PR comments from AI

Author: Alessandro100

web-app/src/app/components/GtfsVisualizationMap.layers.tsx

@@ -6,7 +6,7 @@ import {
   type LayerSpecification,
 } from 'maplibre-gl';
 import { generateStopColorExpression } from './GtfsVisualizationMap.functions';
-import { useTheme } from '@mui/material';
+import { type Theme } from '@mui/material';
 
 // layer helpers
 
@@ -43,8 +43,8 @@ export const stopsBaseFilter = (
 // layers
 export const RoutesWhiteLayer = (
   filteredRouteTypeIds: string[],
+  theme: Theme,
 ): LayerSpecification => {
-  const theme = useTheme();
   return {
     id: 'routes-white',
     source: 'routes',
@@ -186,8 +186,8 @@ export const StopsHighlightOuterLayer = (
   hoverInfo: string[],
   hideStops: boolean,
   filteredRoutes: string[],
+  theme: Theme,
 ): LayerSpecification => {
-  const theme = useTheme();
   return {
     id: 'stops-highlight-outer',
     source: 'sample',

web-app/src/app/components/GtfsVisualizationMap.tsx

@@ -111,7 +111,12 @@ export const GtfsVisualizationMap = ({
   mapElements.forEach((el) => {
     if (!el.isStop) {
       const routeElement: MapRouteElement = el as MapRouteElement;
-      if (routeElement.routeId !== '' && routeElement.routeColor !== '') {
+      if (
+        routeElement?.routeId != null &&
+        routeElement.routeId !== '' &&
+        routeElement.routeColor != null &&
+        routeElement.routeColor !== ''
+      ) {
         routeIdToColorMap[routeElement.routeId] = routeElement.routeColor;
       }
     }
@@ -592,7 +597,7 @@ export const GtfsVisualizationMap = ({
                   minzoom: 0,
                   maxzoom: 22,
                 },
-                RoutesWhiteLayer(filteredRouteTypeIds),
+                RoutesWhiteLayer(filteredRouteTypeIds, theme),
                 RouteLayer(filteredRoutes, filteredRouteTypeIds),
                 StopLayer(hideStops, allSelectedRouteIds, stopRadius),
                 RouteHighlightLayer(
@@ -607,7 +612,12 @@ export const GtfsVisualizationMap = ({
                   mapClickStopData?.stop_id,
                   stopHighlightColorMap,
                 ),
-                StopsHighlightOuterLayer(hoverInfo, hideStops, filteredRoutes),
+                StopsHighlightOuterLayer(
+                  hoverInfo,
+                  hideStops,
+                  filteredRoutes,
+                  theme,
+                ),
                 StopsIndexLayer(),
               ],
             }}