feat: Integrate routes data into UI map components (#1332)

Author: davidgamez

web-app/public/locales/en/common.json

@@ -48,5 +48,49 @@
         "noWarnings": "No warnings",
         "warnings": "warnings",
         "infoNotices": "info notices"
+    },
+  "gtfsSpec": {
+    "routeType": {
+      "0": {
+        "name": "Tram, Streetcar, Light rail",
+        "description": "Any light rail or street level system within a metropolitan area."
+      },
+      "1": {
+        "name": "Subway, Metro",
+        "description": "Any underground rail system within a metropolitan area."
+      },
+      "2": {
+        "name": "Rail",
+        "description": "Used for intercity or long-distance travel."
+      },
+      "3": {
+        "name": "Bus",
+        "description": "Used for short- and long-distance bus routes."
+      },
+      "4": {
+        "name": "Ferry",
+        "description": "Used for short- and long-distance boat service."
+      },
+      "5": {
+        "name": "Cable tram",
+        "description": "Used for street-level rail cars where the cable runs beneath the vehicle (e.g., cable car in San Francisco)."
+      },
+      "6": {
+        "name": "Aerial lift, suspended cable car (e.g., gondola lift, aerial tramway)",
+        "description": "Cable transport where cabins, cars, gondolas or open chairs are suspended by means of one or more cables."
+      },
+      "7": {
+        "name": "Funicular",
+        "description": "Any rail system designed for steep inclines."
+      },
+      "11": {
+        "name": "Trolleybus",
+        "description": "Electric buses that draw power from overhead wires using poles."
+      },
+      "12": {
+        "name": "Monorail",
+        "description": "Railway in which the track consists of a single rail or a beam."
+      }
     }
-}
+  }
+}

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

@@ -18,11 +18,7 @@ import type { FeatureCollection } from 'geojson';
 import { Box, useTheme } from '@mui/material';
 import { MapElement, MapRouteElement, MapStopElement } from './MapElement';
 import type { MapElementType } from './MapElement';
-import {
-  reversedRouteTypesMapping,
-} from '../constants/RouteTypes';
 import { MapDataPopup } from './Map/MapDataPopup';
-import { useTheme as themeProvider } from '../context/ThemeProvider';
 
 interface LatestDatasetLite {
   hosted_url?: string;
@@ -34,15 +30,15 @@ export interface GtfsVisualizationMapProps {
   polygon: LatLngExpression[];
   latestDataset?: LatestDatasetLite;
   filteredRoutes?: string[];
-  filteredRouteTypes?: string[];
+  filteredRouteTypeIds?: string[];
   hideStops?: boolean;
 }
 
 export const GtfsVisualizationMap = ({
   polygon,
   latestDataset,
   filteredRoutes = [],
-  filteredRouteTypes = [],
+  filteredRouteTypeIds = [],
   hideStops = false,
 }: GtfsVisualizationMapProps): JSX.Element => {
 
@@ -68,10 +64,6 @@ export const GtfsVisualizationMap = ({
   > | null>(null);
   const mapRef = useRef<MapRef>(null);
 
-  const filteredRouteTypesIds = filteredRouteTypes.map(
-    (d) => reversedRouteTypesMapping[d],
-  );
-
   // Create a map to store routeId to routeColor mapping
   const routeIdToColorMap: Record<string, string> = {};
   mapElements.forEach((el) => {
@@ -106,8 +98,8 @@ export const GtfsVisualizationMap = ({
   }
 
   const routeTypeFilter: ExpressionSpecification | boolean =
-    filteredRouteTypes.length > 0
-      ? ['in', ['get', 'route_type'], ['literal', filteredRouteTypesIds]]
+    filteredRouteTypeIds.length > 0
+      ? ['in', ['get', 'route_type'], ['literal', filteredRouteTypeIds]]
       : true; // if no filter applied, show all
 
   const handleMouseClick = (event: maplibregl.MapLayerMouseEvent): void => {

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

@@ -9,9 +9,10 @@ import {
   Box,
   ListItemButton,
 } from '@mui/material';
+import { type GtfsRoute } from '../types';
 
 interface RouteSelectorProps {
-  routes: Array<{ routeId: string; routeName: string; color?: string }>;
+  routes: GtfsRoute[];
   selectedRouteIds?: string[];
   onSelectionChange?: (selectedRoutes: string[]) => void;
 }
@@ -29,16 +30,19 @@ export default function RouteSelector({
     const searchLower = search.toLowerCase();
     return routes.filter(
       (route) =>
-        route.routeName.toLowerCase().includes(searchLower) ||
-        route.routeId.includes(searchLower),
+        (route.routeName ?? '').toLowerCase().includes(searchLower) ||
+        (route.routeId ?? '').includes(searchLower),
     );
   }, [search, routes]);
 
   useEffect(() => {
     setSelectedRoutes([...selectedRouteIds]);
   }, [selectedRouteIds]);
 
-  const handleToggle = (routeId: string): void => {
+  const handleToggle = (routeId: string | undefined): void => {
+    if (routeId == undefined) {
+      return;
+    }
     setSelectedRoutes((prev) => {
       const newSelection = prev.includes(routeId)
         ? prev.filter((id) => id !== routeId)
@@ -76,7 +80,7 @@ export default function RouteSelector({
 
       <List dense sx={{ maxHeight: 'none', overflow: 'auto', flex: 1 }}>
         {filteredRoutes
-          .sort((a, b) => a.routeId.localeCompare(b.routeId))
+          .sort((a, b) => (a.routeId ?? '').localeCompare(b.routeId ?? ''))
           .map((route) => (
             <ListItemButton
               key={route.routeId}
@@ -89,7 +93,7 @@ export default function RouteSelector({
               <ListItemIcon sx={{ minWidth: 34 }}>
                 <Checkbox
                   edge='start'
-                  checked={selectedRoutes.includes(route.routeId)}
+                  checked={selectedRoutes.includes(route.routeId ?? '')}
                   tabIndex={-1}
                   disableRipple
                 />

web-app/src/app/constants/RouteTypes.tsx

@@ -13,13 +13,19 @@ import MeetingRoomIcon from '@mui/icons-material/MeetingRoom';
 import PlaceIcon from '@mui/icons-material/Place';
 import DirectionsSubwayIcon from '@mui/icons-material/DirectionsSubway';
 import type { SvgIconComponent } from '@mui/icons-material';
+import type { TFunction } from 'i18next';
 
 export interface RouteTypeMetadata {
   name: string;
   icon: SvgIconComponent;
+  isDefault?: boolean;
 }
 
-export type LocationTypeMetadata = RouteTypeMetadata;
+export const defaultRouteType: RouteTypeMetadata = {
+  name: '',
+  icon: PlaceIcon,
+  isDefault: true,
+};
 
 export const routeTypesMapping: Record<string, RouteTypeMetadata> = {
   '0': { name: 'Tram', icon: TramIcon },
@@ -36,7 +42,7 @@ export const routeTypesMapping: Record<string, RouteTypeMetadata> = {
 };
 
 // TODO: find better icons for these
-export const locationTypesMapping: Record<string, LocationTypeMetadata> = {
+export const locationTypesMapping: Record<string, RouteTypeMetadata> = {
   '0': { name: 'Stop', icon: DirectionsBusIcon },
   '1': { name: 'Station', icon: TrainIcon },
   '2': { name: 'Entrance/Exit', icon: MeetingRoomIcon },
@@ -46,3 +52,22 @@ export const locationTypesMapping: Record<string, LocationTypeMetadata> = {
 export const reversedRouteTypesMapping = Object.fromEntries(
   Object.entries(routeTypesMapping).map(([k, v]) => [v.name, k]),
 );
+
+export const getRouteByTypeOrDefault = (
+  routeType: string | undefined | null,
+): RouteTypeMetadata => {
+  if (routeType == null) {
+    return defaultRouteType;
+  }
+  return routeTypesMapping[routeType] ?? defaultRouteType;
+};
+
+export const getRouteTypeTranslatedName = (
+  routeTypeId: string,
+  t: TFunction,
+): string => {
+  const routeType = getRouteByTypeOrDefault(routeTypeId);
+  return !(routeType.isDefault ?? false)
+    ? t(`common:gtfsSpec.routeType.${routeTypeId}.name`)
+    : '';
+};

web-app/src/app/screens/Feed/components/FeedSummary.tsx

@@ -47,6 +47,12 @@ import CommuteIcon from '@mui/icons-material/Commute';
 import { Link as RouterLink } from 'react-router-dom';
 import TravelExploreIcon from '@mui/icons-material/TravelExplore';
 import { useRemoteConfig } from '../../../context/RemoteConfigProvider';
+import { useSelector } from 'react-redux';
+import {
+  selectGtfsDatasetRoutesTotal,
+  selectGtfsDatasetRouteTypes,
+} from '../../../store/selectors';
+import { getRouteTypeTranslatedName } from '../../../constants/RouteTypes';
 
 export interface FeedSummaryProps {
   feed: GTFSFeedType | GTFSRTFeedType | undefined;
@@ -69,6 +75,9 @@ export default function FeedSummary({
     ? sortedProviders
     : sortedProviders.slice(0, 4);
   const { config } = useRemoteConfig();
+  const totalRoutes = useSelector(selectGtfsDatasetRoutesTotal);
+  const routeTypes = useSelector(selectGtfsDatasetRouteTypes);
+
   return (
     <ContentBox
       width={width}
@@ -153,13 +162,14 @@ export default function FeedSummary({
             </Typography>
           </StyledTitleContainer>
           <Typography variant='body1'>
-            130
+            {totalRoutes ?? '---'}
             <Tooltip title='Find Routes On Map' placement='top' sx={{ ml: 1 }}>
               <IconButton
                 size='small'
                 component={RouterLink}
                 to='./map'
                 color={'primary'}
+                disabled={totalRoutes == undefined}
               >
                 <TravelExploreIcon></TravelExploreIcon>
               </IconButton>
@@ -177,7 +187,11 @@ export default function FeedSummary({
             </Typography>
           </StyledTitleContainer>
           <Typography variant='body1'>
-            Bus, Ferry, Tram
+            {routeTypes != null && routeTypes.length > 0
+              ? routeTypes
+                  .map((routeType) => getRouteTypeTranslatedName(routeType, t))
+                  .join(', ')
+              : '---'}
             <Tooltip
               title='View Routes Types On Map'
               placement='top'
@@ -188,6 +202,7 @@ export default function FeedSummary({
                 component={RouterLink}
                 to='./map'
                 color={'primary'}
+                disabled={routeTypes == undefined}
               >
                 <TravelExploreIcon></TravelExploreIcon>
               </IconButton>