feat: visualization map loading and error state (#1362)

Author: cka-y

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

@@ -52,11 +52,11 @@
   "gtfsSpec": {
     "routeType": {
       "0": {
-        "name": "Tram, Streetcar, Light rail",
+        "name": "Tram/Streetcar/Light rail",
         "description": "Any light rail or street level system within a metropolitan area."
       },
       "1": {
-        "name": "Subway, Metro",
+        "name": "Subway/Metro",
         "description": "Any underground rail system within a metropolitan area."
       },
       "2": {
@@ -76,7 +76,7 @@
         "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)",
+        "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": {

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

@@ -17,6 +17,10 @@
     "fullName": "Include the full name for transit provider, e.g “Toronto Transit Commission” instead of “TTC”",
     "checkSpelling": "Double check the spelling"
   },
+  "routeIds": "Route IDs",
+  "stopCode": "Stop Code",
+  "viewStopInfo": "View Stop Info",
+  "gtfsVisualizationViewLabel": "GTFS Visualization View",
   "errorAndContact": "Please check your internet connection and try again. If the problem persists <1>contact us</1> for for further assistance.",
   "errorLoadingFeed": "There was an error loading the feed.",
   "errorLoadingQualityReport": "Unable to generate data quality report.",
@@ -152,7 +156,7 @@
   },
   "viewRealtimeVisualization": "View real-time visualization",
   "versions": "Versions",
-  "dataAattribution": "Transit data provided by",
+  "dataAttribution": "Transit data provided by",
   "emptyLicenseUsage": "Can this feed be used commercially by trip planners and other third parties?",
   "common": {
     "form": {
@@ -161,5 +165,13 @@
       "notSure": "Unsure"
     }
   },
-  "openDetailedMap": "Open Detailed Map"
+  "openDetailedMap": "Open Detailed Map",
+  "retry": "Retry",
+  "visualizationMapErrors": {
+    "errorDescription": "An error occurred while loading the map.",
+    "noFeedMetadata": "Could not load feed metadata.",
+    "noRoutesData": "Could not load routes data for the map.",
+    "invalidDataType": "This feed is not a GTFS Schedule feed.",
+    "noBoundingBox": "No bounding box available."
+  }
 }

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import {
   Box,
   ToggleButtonGroup,
@@ -25,17 +25,18 @@ import { Map } from './Map';
 import { useTranslation } from 'react-i18next';
 import type { LatLngExpression } from 'leaflet';
 import { useTheme } from '@mui/material/styles';
-import { type GBFSFeedType, type AllFeedType } from '../services/feeds/utils';
+import { type AllFeedType } from '../services/feeds/utils';
 import { OpenInNew } from '@mui/icons-material';
 import { computeBoundingBox } from '../screens/Feed/Feed.functions';
 import { displayFormattedDate } from '../utils/date';
 import { useSelector } from 'react-redux';
-import { selectAutodiscoveryGbfsVersion } from '../store/feed-selectors';
 import ModeOfTravelIcon from '@mui/icons-material/ModeOfTravel';
 import { GtfsVisualizationMap } from './GtfsVisualizationMap';
 import ZoomOutMapIcon from '@mui/icons-material/ZoomOutMap';
 import { useRemoteConfig } from '../context/RemoteConfigProvider';
 import ReactGA from 'react-ga4';
+import { selectLatestGbfsVersion } from '../store/feed-selectors';
+import { selectGtfsDatasetRoutesLoadingStatus } from '../store/supporting-files-selectors';
 
 interface CoveredAreaMapProps {
   boundingBox?: LatLngExpression[];
@@ -77,20 +78,26 @@ const CoveredAreaMap: React.FC<CoveredAreaMapProps> = ({
   >(null);
   const [geoJsonError, setGeoJsonError] = useState(false);
   const [geoJsonLoading, setGeoJsonLoading] = useState(false);
-  const [view, setView] = useState<MapViews>('detailedCoveredAreaView');
-  const latestGbfsVersion = useSelector(selectAutodiscoveryGbfsVersion);
+  const [view, setView] = useState<MapViews>(
+    feed?.data_type === 'gtfs'
+      ? 'gtfsVisualizationView'
+      : 'detailedCoveredAreaView',
+  );
+
+  const latestGbfsVersion = useSelector(selectLatestGbfsVersion);
+  const routesJsonLoadingStatus = useSelector(
+    selectGtfsDatasetRoutesLoadingStatus,
+  );
 
   const getAndSetGeoJsonData = (urlToExtract: string): void => {
     setGeoJsonLoading(true);
     fetchGeoJson(urlToExtract)
       .then((data) => {
         setGeoJsonData(data);
         setGeoJsonError(false);
-        setView('detailedCoveredAreaView');
       })
       .catch(() => {
         setGeoJsonError(true);
-        setView('boundingBoxView');
       })
       .finally(() => {
         setGeoJsonLoading(false);
@@ -119,9 +126,23 @@ const CoveredAreaMap: React.FC<CoveredAreaMapProps> = ({
     }
     setGeoJsonData(null);
     setGeoJsonError(true);
-    setView('boundingBoxView');
   }, [latestDataset, feed]);
 
+  // effect to determine which view to display
+  useEffect(() => {
+    if (feed == undefined) return;
+    if (feed?.data_type === 'gbfs') return;
+    if (routesJsonLoadingStatus != 'failed' && boundingBox != undefined) {
+      setView('gtfsVisualizationView');
+      return;
+    }
+    if (geoJsonData != null && boundingBox != undefined) {
+      setView('detailedCoveredAreaView');
+      return;
+    }
+    setView('boundingBoxView');
+  }, [feed, routesJsonLoadingStatus, boundingBox, geoJsonData]);
+
   const handleViewChange = (
     _: React.MouseEvent<HTMLElement>,
     newView: MapViews | null,
@@ -137,9 +158,7 @@ const CoveredAreaMap: React.FC<CoveredAreaMapProps> = ({
     });
   };
 
-  const getGbfsLatestVersionVisualizationUrl = (
-    feed: GBFSFeedType,
-  ): string | undefined => {
+  const getGbfsLatestVersionVisualizationUrl = (): string | undefined => {
     const latestAutodiscoveryUrl = latestGbfsVersion?.endpoints?.find(
       (endpoint) => endpoint.name === 'gbfs',
     )?.url;
@@ -154,11 +173,13 @@ const CoveredAreaMap: React.FC<CoveredAreaMapProps> = ({
       view === 'boundingBoxView' && feed?.data_type === 'gtfs';
 
     const displayGtfsVisualizationView =
-      view === 'gtfsVisualizationView' &&
-      feed?.data_type === 'gtfs' &&
-      config.enableGtfsVisualizationMap;
+      view === 'gtfsVisualizationView' && feed?.data_type === 'gtfs';
+
     let gbfsBoundingBox: LatLngExpression[] = [];
     if (feed?.data_type === 'gbfs') {
+      if (geoJsonData == null) {
+        return <></>;
+      }
       gbfsBoundingBox = computeBoundingBox(geoJsonData) ?? [];
       if (gbfsBoundingBox.length === 0) {
         setGeoJsonError(true);
@@ -187,19 +208,33 @@ const CoveredAreaMap: React.FC<CoveredAreaMapProps> = ({
         </>
       );
     }
+    if (geoJsonData != null) {
+      return (
+        <MapGeoJSON
+          geoJSONData={geoJsonData}
+          polygon={boundingBox ?? gbfsBoundingBox}
+          displayMapDetails={feed?.data_type === 'gtfs'}
+        />
+      );
+    }
+    return <></>;
+  };
 
+  const latestAutodiscoveryUrl = getGbfsLatestVersionVisualizationUrl();
+  const enableGtfsVisualizationView = useMemo(() => {
     return (
-      <MapGeoJSON
-        geoJSONData={geoJsonData}
-        polygon={boundingBox ?? gbfsBoundingBox}
-        displayMapDetails={feed?.data_type === 'gtfs'}
-      />
+      config.enableGtfsVisualizationMap &&
+      feed?.data_type === 'gtfs' &&
+      routesJsonLoadingStatus != 'failed' &&
+      boundingBox != undefined
     );
-  };
+  }, [
+    feed?.data_type,
+    config.enableGtfsVisualizationMap,
+    routesJsonLoadingStatus,
+    boundingBox,
+  ]);
 
-  const latestAutodiscoveryUrl = getGbfsLatestVersionVisualizationUrl(
-    feed as GBFSFeedType,
-  );
   return (
     <ContentBox
       sx={{
@@ -271,6 +306,17 @@ const CoveredAreaMap: React.FC<CoveredAreaMapProps> = ({
             aria-label='map view selection'
             onChange={handleViewChange}
           >
+            {config.enableGtfsVisualizationMap && (
+              <Tooltip title={t('gtfsVisualizationTooltip')}>
+                <ToggleButton
+                  value='gtfsVisualizationView'
+                  disabled={!enableGtfsVisualizationView}
+                  aria-label={t('gtfsVisualizationViewLabel')}
+                >
+                  <ModeOfTravelIcon />
+                </ToggleButton>
+              </Tooltip>
+            )}
             <Tooltip title={t('detailedCoveredAreaViewTooltip')}>
               <ToggleButton
                 value='detailedCoveredAreaView'
@@ -290,19 +336,6 @@ const CoveredAreaMap: React.FC<CoveredAreaMapProps> = ({
                 <MapIcon />
               </ToggleButton>
             </Tooltip>
-            {config.enableGtfsVisualizationMap && (
-              <Tooltip title={t('gtfsVisualizationTooltip')}>
-                <span>
-                  <ToggleButton
-                    value='gtfsVisualizationView'
-                    disabled={!config.enableGtfsVisualizationMap}
-                    aria-label='Bounding Box View'
-                  >
-                    <ModeOfTravelIcon />
-                  </ToggleButton>
-                </span>
-              </Tooltip>
-            )}
           </ToggleButtonGroup>
         )}
       </Box>
@@ -320,15 +353,15 @@ const CoveredAreaMap: React.FC<CoveredAreaMapProps> = ({
 
       {(boundingBox != undefined || !geoJsonError) && (
         <Box sx={mapBoxPositionStyle}>
-          {geoJsonLoading ? (
+          {geoJsonLoading || routesJsonLoadingStatus === 'loading' ? (
             <Skeleton
               variant='rectangular'
               width='100%'
               height='100%'
               animation='wave'
             />
           ) : (
-            <>{geoJsonData !== null && <>{renderMap()}</>}</>
+            <>{renderMap()}</>
           )}
         </Box>
       )}

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

@@ -42,13 +42,16 @@ export const GtfsVisualizationMap = ({
   hideStops = false,
 }: GtfsVisualizationMapProps): JSX.Element => {
 
-    const { stopsPmtilesUrl, routesPmtilesUrl } = useMemo(() => {
-    const baseUrl = latestDataset?.hosted_url ? latestDataset.hosted_url.replace(/[^/]+$/, '') : undefined;
-     const stops = `${baseUrl}/pmtiles/stops.pmtiles`;
-     const routes = `${baseUrl}/pmtiles/routes.pmtiles`;
-
-     return { stopsPmtilesUrl: stops, routesPmtilesUrl: routes };
-  }, [latestDataset?.id, latestDataset?.stable_id]);
+    const { stopsPmtilesUrl, routesPmtilesUrl } = useMemo(
+      () =>
+      {
+        const baseUrl = latestDataset?.hosted_url ? latestDataset.hosted_url.replace(/[^/]+$/, '') : undefined;
+        const stops = `${baseUrl}/pmtiles/stops.pmtiles`;
+        const routes = `${baseUrl}/pmtiles/routes.pmtiles`;
+        return { stopsPmtilesUrl: stops, routesPmtilesUrl: routes };
+     },
+      [latestDataset?.id, latestDataset?.stable_id]
+    );
 
   const theme = useTheme();
   const [hoverInfo, setHoverInfo] = useState<string[]>([]);
@@ -58,10 +61,7 @@ export const GtfsVisualizationMap = ({
     string,
     string
   > | null>(null);
-  const [mapClickStopData, setMapClickStopData] = useState<Record<
-    string,
-    string
-  > | null>(null);
+  const [mapClickStopData, setMapClickStopData] = useState<Record<string, string> | null>(null);
   const mapRef = useRef<MapRef>(null);
 
   // Create a map to store routeId to routeColor mapping