Feat: gtfs visualization (#1270)

Author: Alessandro100

functions-python/tasks_executor/src/tasks/pmtiles_builder/build_pmtiles.py

@@ -256,6 +256,21 @@ def _upload_files_to_gcs(self, file_to_upload):
                     self.bucket_name,
                     blob_path,
                 )
+
+                try:
+                    blob.make_public()
+                    self.logger.debug(
+                        "Made object public: https://storage.googleapis.com/%s/%s",
+                        self.bucket_name,
+                        blob_path,
+                    )
+                except Exception as e:
+                    # Likely due to Uniform bucket-level access; log and continue
+                    self.logger.warning(
+                        "Could not make %s public (uniform bucket-level access enabled?): %s",
+                        blob_path,
+                        e,
+                    )
         except Exception as e:
             raise Exception(f"Failed to upload files to GCS: {e}") from e
 

web-app/package.json

@@ -13,6 +13,7 @@
     "@turf/center": "^6.5.0",
     "@types/i18next": "^13.0.0",
     "@types/leaflet": "^1.9.12",
+    "@types/react-map-gl": "^6.1.7",
     "axios": "^1.7.2",
     "countries-list": "^3.1.1",
     "date-fns": "^2.30.0",
@@ -24,10 +25,12 @@
     "i18next-browser-languagedetector": "^8.0.0",
     "i18next-http-backend": "^2.5.2",
     "leaflet": "^1.9.4",
+    "maplibre-gl": "^4.7.1",
     "material-react-table": "^2.13.0",
     "mui-datatables": "^4.3.0",
     "mui-nested-menu": "^3.4.0",
     "openapi-fetch": "^0.9.3",
+    "pmtiles": "^4.2.1",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0",
     "react-ga4": "^2.1.0",
@@ -36,6 +39,7 @@
     "react-hook-form": "^7.52.1",
     "react-i18next": "^14.1.2",
     "react-leaflet": "^4.2.1",
+    "react-map-gl": "^7.1.7",
     "react-redux": "^8.1.3",
     "react-router-dom": "^6.16.0",
     "react-scripts": "5.0.1",

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

@@ -68,6 +68,8 @@
   "coveredAreaTitle": "Covered Area",
   "boundingBoxView": "Bounding Box",
   "boundingBoxViewTooltip": "View the bounding box of the feed",
+  "gtfsVisualizationView": "Routes and Stops",
+  "gtfsVisualizationTooltip": "View the routes and stops of the feed",
   "detailedCoveredAreaView": "Detailed",
   "detailedCoveredAreaViewTooltip": "View the detailed covered area of the feed",
   "unableToGenerateBoundingBox": "Unable to generate bounding box from the feed's stops.txt file.",

web-app/src/app/Theme.ts

@@ -12,6 +12,21 @@ declare module '@mui/material/styles' {
   interface PaletteOptions {
     boxShadow?: string;
   }
+  interface Theme {
+    map: {
+      basemapTileUrl: string;
+      routeColor: string;
+      routeTextColor: string;
+    };
+  }
+
+  interface ThemeOptions {
+    map?: {
+      basemapTileUrl?: string;
+      routeColor?: string;
+      routeTextColor?: string;
+    };
+  }
 }
 
 declare module '@mui/material/Typography' {
@@ -96,6 +111,13 @@ export const getTheme = (mode: ThemeModeEnum): Theme => {
   const chosenPalette = !isLightMode ? darkPalette : palette;
   return createTheme({
     palette: { ...chosenPalette, mode },
+    map: {
+      basemapTileUrl: isLightMode
+        ? 'https://a.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png'
+        : 'https://a.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png',
+      routeColor: chosenPalette.background.default,
+      routeTextColor: chosenPalette.text.primary,
+    },
     mixins: {
       code: {
         contrastText: '#f1fa8c',

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

@@ -42,7 +42,7 @@ export const ContentBox = (
             mb: 1,
           }}
         >
-          <span>{props.title}</span>
+          {props.title.trim() !== '' && <span>{props.title}</span>}
           {props.action != null && props.action}
         </Typography>
       )}

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

@@ -7,7 +7,9 @@ import {
   Skeleton,
   Button,
   Typography,
+  Fab,
 } from '@mui/material';
+import { Link } from 'react-router-dom';
 import MapIcon from '@mui/icons-material/Map';
 import TravelExploreIcon from '@mui/icons-material/TravelExplore';
 import { ContentBox } from './ContentBox';
@@ -28,6 +30,10 @@ 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';
 
 interface CoveredAreaMapProps {
   boundingBox?: LatLngExpression[];
@@ -50,22 +56,26 @@ export const fetchGeoJson = async (
   return await response.json();
 };
 
+type MapViews =
+  | 'boundingBoxView'
+  | 'detailedCoveredAreaView'
+  | 'gtfsVisualizationView';
+
 const CoveredAreaMap: React.FC<CoveredAreaMapProps> = ({
   boundingBox,
   latestDataset,
   feed,
 }) => {
   const { t } = useTranslation('feeds');
   const theme = useTheme();
+  const { config } = useRemoteConfig();
 
   const [geoJsonData, setGeoJsonData] = useState<
     GeoJSONData | GeoJSONDataGBFS | null
   >(null);
   const [geoJsonError, setGeoJsonError] = useState(false);
   const [geoJsonLoading, setGeoJsonLoading] = useState(false);
-  const [view, setView] = useState<
-    'boundingBoxView' | 'detailedCoveredAreaView'
-  >('detailedCoveredAreaView');
+  const [view, setView] = useState<MapViews>('detailedCoveredAreaView');
   const latestGbfsVersion = useSelector(selectAutodiscoveryGbfsVersion);
 
   const getAndSetGeoJsonData = (urlToExtract: string): void => {
@@ -112,7 +122,7 @@ const CoveredAreaMap: React.FC<CoveredAreaMapProps> = ({
 
   const handleViewChange = (
     _: React.MouseEvent<HTMLElement>,
-    newView: 'boundingBoxView' | 'detailedCoveredAreaView' | null,
+    newView: MapViews | null,
   ): void => {
     if (newView !== null) setView(newView);
   };
@@ -132,29 +142,51 @@ const CoveredAreaMap: React.FC<CoveredAreaMapProps> = ({
   const renderMap = (): JSX.Element => {
     const displayBoundingBoxMap =
       view === 'boundingBoxView' && feed?.data_type === 'gtfs';
+
+    const displayGtfsVisualizationView =
+      view === 'gtfsVisualizationView' &&
+      feed?.data_type === 'gtfs' &&
+      config.enableGtfsVisualizationMap;
     let gbfsBoundingBox: LatLngExpression[] = [];
     if (feed?.data_type === 'gbfs') {
       gbfsBoundingBox = computeBoundingBox(geoJsonData) ?? [];
       if (gbfsBoundingBox.length === 0) {
         setGeoJsonError(true);
       }
     }
-    return (
-      <>
-        {displayBoundingBoxMap ? (
-          <Map polygon={boundingBox ?? []} />
-        ) : (
-          <MapGeoJSON
-            geoJSONData={geoJsonData}
-            polygon={boundingBox ?? gbfsBoundingBox}
-            displayMapDetails={feed?.data_type === 'gtfs'}
+
+    if (displayBoundingBoxMap) {
+      return <Map polygon={boundingBox ?? []} />;
+    }
+
+    if (displayGtfsVisualizationView) {
+      return (
+        <>
+          <Fab
+            size='small'
+            sx={{ position: 'absolute', top: 16, right: 16 }}
+            component={Link}
+            to='./map'
+          >
+            <ZoomOutMapIcon></ZoomOutMapIcon>
+          </Fab>
+          <GtfsVisualizationMap
+            polygon={boundingBox ?? []}
+            latestDataset={latestDataset}
           />
-        )}
-      </>
+        </>
+      );
+    }
+
+    return (
+      <MapGeoJSON
+        geoJSONData={geoJsonData}
+        polygon={boundingBox ?? gbfsBoundingBox}
+        displayMapDetails={feed?.data_type === 'gtfs'}
+      />
     );
   };
 
-  const mapDisplayError = boundingBox == undefined && geoJsonError;
   const latestAutodiscoveryUrl = getGbfsLatestVersionVisualizationUrl(
     feed as GBFSFeedType,
   );
@@ -166,73 +198,95 @@ const CoveredAreaMap: React.FC<CoveredAreaMapProps> = ({
         flexDirection: 'column',
         maxHeight: {
           xs: '100%',
-          md: '70vh',
+          md: '70vh', // TODO: optimize this
         },
         minHeight: '50vh',
       }}
-      title={mapDisplayError ? '' : t('coveredAreaTitle') + ' - ' + t(view)}
+      title={t('coveredAreaTitle') + ' - ' + t(view)}
       width={{ xs: '100%' }}
       outlineColor={theme.palette.primary.dark}
       padding={2}
-      action={
-        <>
-          {feed?.data_type === 'gbfs' ? (
-            <Box sx={{ textAlign: 'right' }}>
-              {latestAutodiscoveryUrl != undefined && (
-                <Button
-                  href={latestAutodiscoveryUrl}
-                  target='_blank'
-                  rel='noreferrer'
-                  endIcon={<OpenInNew />}
-                >
-                  {t('viewRealtimeVisualization')}
-                </Button>
-              )}
-              {(geoJsonData as GeoJSONDataGBFS)?.extracted_at != undefined && (
-                <Typography
-                  variant='caption'
-                  color='text.secondary'
-                  sx={{ display: 'block', px: 1 }}
-                >
-                  {t('common:updated')}:{' '}
-                  {displayFormattedDate(
-                    (geoJsonData as GeoJSONDataGBFS).extracted_at,
-                  )}
-                </Typography>
-              )}
-            </Box>
-          ) : (
-            <ToggleButtonGroup
-              value={view}
-              color='primary'
-              exclusive
-              aria-label='map view selection'
-              onChange={handleViewChange}
-            >
-              <Tooltip title={t('detailedCoveredAreaViewTooltip')}>
-                <ToggleButton
-                  value='detailedCoveredAreaView'
-                  disabled={
-                    geoJsonLoading || geoJsonError || boundingBox === undefined
-                  }
-                  aria-label='Detailed Covered Area View'
-                >
-                  <TravelExploreIcon />
-                </ToggleButton>
-              </Tooltip>
-              <Tooltip title={t('boundingBoxViewTooltip')}>
+    >
+      <Box
+        display={'flex'}
+        justifyContent={
+          view === 'gtfsVisualizationView' ? 'space-between' : 'flex-end'
+        }
+        mb={1}
+        alignItems={'center'}
+      >
+        {view === 'gtfsVisualizationView' &&
+          config.enableGtfsVisualizationMap && (
+            <Button component={Link} to='./map'>
+              Open Full Map with Filters
+            </Button>
+          )}
+        {feed?.data_type === 'gbfs' ? (
+          <Box sx={{ textAlign: 'right' }}>
+            {latestAutodiscoveryUrl != undefined && (
+              <Button
+                href={latestAutodiscoveryUrl}
+                target='_blank'
+                rel='noreferrer'
+                endIcon={<OpenInNew />}
+              >
+                {t('viewRealtimeVisualization')}
+              </Button>
+            )}
+            {(geoJsonData as GeoJSONDataGBFS)?.extracted_at != undefined && (
+              <Typography
+                variant='caption'
+                color='text.secondary'
+                sx={{ display: 'block', px: 1 }}
+              >
+                {t('common:updated')}:{' '}
+                {displayFormattedDate(
+                  (geoJsonData as GeoJSONDataGBFS).extracted_at,
+                )}
+              </Typography>
+            )}
+          </Box>
+        ) : (
+          <ToggleButtonGroup
+            value={view}
+            color='primary'
+            exclusive
+            aria-label='map view selection'
+            onChange={handleViewChange}
+          >
+            <Tooltip title={t('detailedCoveredAreaViewTooltip')}>
+              <ToggleButton
+                value='detailedCoveredAreaView'
+                disabled={
+                  geoJsonLoading || geoJsonError || boundingBox === undefined
+                }
+                aria-label='Detailed Covered Area View'
+              >
+                <TravelExploreIcon />
+              </ToggleButton>
+            </Tooltip>
+            <Tooltip title={t('boundingBoxViewTooltip')}>
+              <ToggleButton
+                value='boundingBoxView'
+                aria-label='Bounding Box View'
+              >
+                <MapIcon />
+              </ToggleButton>
+            </Tooltip>
+            {config.enableGtfsVisualizationMap && (
+              <Tooltip title={t('gtfsVisualizationTooltip')}>
                 <ToggleButton
-                  value='boundingBoxView'
+                  value='gtfsVisualizationView'
+                  disabled={!config.enableGtfsVisualizationMap}
                   aria-label='Bounding Box View'
                 >
-                  <MapIcon />
+                  <ModeOfTravelIcon />
                 </ToggleButton>
               </Tooltip>
-            </ToggleButtonGroup>
-          )}
-        </>
-      }
-    >
+            )}
+          </ToggleButtonGroup>
+        )}
+      </Box>
       {feed?.data_type === 'gtfs' &&
         boundingBox === undefined &&
         view === 'boundingBoxView' && (