add covered area feature flag

Author: davidgamez

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

@@ -76,7 +76,7 @@
   "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.",
+  "unableToGenerateBoundingBox": "Unable to generate bounding box from the feed",
   "unableToGetGbfsMap": "Error fetching GBFS Map",
   "areYouOfficialProducer": "Are you the official producer or transit agency responsible for this data ?",
   "isOfficialSource": "Is this an official data source?",

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

@@ -79,9 +79,7 @@ const CoveredAreaMap: React.FC<CoveredAreaMapProps> = ({
   const [geoJsonError, setGeoJsonError] = useState(false);
   const [geoJsonLoading, setGeoJsonLoading] = useState(false);
   const [view, setView] = useState<MapViews>(
-    feed?.data_type === 'gtfs'
-      ? 'gtfsVisualizationView'
-      : 'detailedCoveredAreaView',
+    feed?.data_type === 'gtfs' ? 'gtfsVisualizationView' : 'boundingBoxView',
   );
 
   const latestGbfsVersion = useSelector(selectLatestGbfsVersion);
@@ -131,18 +129,30 @@ const CoveredAreaMap: React.FC<CoveredAreaMapProps> = ({
   // effect to determine which view to display
   useEffect(() => {
     if (feed == undefined) return;
-    if (feed?.data_type === 'gbfs') return; // use default for gbfs
+    if (feed?.data_type === 'gbfs') {
+      setView(
+        config.enableDetailedCoveredArea
+          ? 'detailedCoveredAreaView'
+          : 'boundingBoxView',
+      );
+      return;
+    }
 
     // for gtfs feeds
     if (
+      feed?.data_type === 'gtfs' &&
       config.enableGtfsVisualizationMap &&
       routesJsonLoadingStatus != 'failed' &&
       boundingBox != undefined
     ) {
       setView('gtfsVisualizationView');
       return;
     }
-    if (geoJsonData != null && boundingBox != undefined) {
+    if (
+      config.enableDetailedCoveredArea &&
+      geoJsonData != null &&
+      boundingBox != undefined
+    ) {
       setView('detailedCoveredAreaView');
       return;
     }
@@ -176,22 +186,13 @@ const CoveredAreaMap: React.FC<CoveredAreaMapProps> = ({
 
   const renderMap = (): JSX.Element => {
     const displayBoundingBoxMap =
-      view === 'boundingBoxView' && feed?.data_type === 'gtfs';
+      view === 'boundingBoxView' &&
+      (feed?.data_type === 'gtfs' ||
+        (feed?.data_type === 'gbfs' && boundingBox != null));
 
     const displayGtfsVisualizationView =
       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);
-      }
-    }
-
     if (displayBoundingBoxMap) {
       return <Map polygon={boundingBox ?? []} />;
     }
@@ -218,11 +219,20 @@ const CoveredAreaMap: React.FC<CoveredAreaMapProps> = ({
         </>
       );
     }
-    if (geoJsonData != null) {
+    if (config.enableDetailedCoveredArea && geoJsonData != null) {
+      let gbfsGeoJsonBoundingBox: LatLngExpression[] = [];
+      if (feed?.data_type === 'gbfs') {
+        gbfsGeoJsonBoundingBox = computeBoundingBox(geoJsonData) ?? [];
+        if (gbfsGeoJsonBoundingBox.length === 0) {
+          setGeoJsonError(true);
+        }
+      }
+      const feedBoundingBox: LatLngExpression[] =
+        feed?.data_type === 'gtfs' ? boundingBox ?? [] : gbfsGeoJsonBoundingBox;
       return (
         <MapGeoJSON
           geoJSONData={geoJsonData}
-          polygon={boundingBox ?? gbfsBoundingBox}
+          polygon={feedBoundingBox}
           displayMapDetails={feed?.data_type === 'gtfs'}
         />
       );
@@ -327,17 +337,19 @@ const CoveredAreaMap: React.FC<CoveredAreaMapProps> = ({
                 </ToggleButton>
               </Tooltip>
             )}
-            <Tooltip title={t('detailedCoveredAreaViewTooltip')}>
-              <ToggleButton
-                value='detailedCoveredAreaView'
-                disabled={
-                  geoJsonLoading || geoJsonError || boundingBox === undefined
-                }
-                aria-label='Detailed Covered Area View'
-              >
-                <TravelExploreIcon />
-              </ToggleButton>
-            </Tooltip>
+            {config.enableDetailedCoveredArea && (
+              <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'
@@ -349,17 +361,19 @@ const CoveredAreaMap: React.FC<CoveredAreaMapProps> = ({
           </ToggleButtonGroup>
         )}
       </Box>
-      {feed?.data_type === 'gtfs' &&
+      {(feed?.data_type === 'gtfs' || feed?.data_type === 'gbfs') &&
         boundingBox === undefined &&
         view === 'boundingBoxView' && (
           <WarningContentBox>
             {t('unableToGenerateBoundingBox')}
           </WarningContentBox>
         )}
 
-      {feed?.data_type === 'gbfs' && geoJsonError && (
-        <WarningContentBox>{t('unableToGetGbfsMap')}</WarningContentBox>
-      )}
+      {config.enableDetailedCoveredArea &&
+        feed?.data_type === 'gbfs' &&
+        geoJsonError && (
+          <WarningContentBox>{t('unableToGetGbfsMap')}</WarningContentBox>
+        )}
 
       {(boundingBox != undefined || !geoJsonError) && (
         <Box sx={mapBoxPositionStyle}>

web-app/src/app/interface/RemoteConfig.ts

@@ -40,6 +40,11 @@ export interface RemoteConfigValues extends FirebaseDefaultConfig {
   /** Max number of data stuff to display on top of the map to avoid overflow */
   visualizationMapPreviewDataLimit: number;
   visualizationMapFullDataLimit: number;
+
+  // This feature flag enable or the coovered area component with expected behavior:
+  // 1- hides/shows the toggle button for gtfs feeds
+  // 2- use bounding box view for GBFS instead of full covered area map
+  enableDetailedCoveredArea: boolean;
 }
 
 const featureByPassDefault: BypassConfig = {
@@ -68,6 +73,7 @@ export const defaultRemoteConfigValues: RemoteConfigValues = {
   enableGtfsVisualizationMap: false,
   visualizationMapFullDataLimit: 5,
   visualizationMapPreviewDataLimit: 3,
+  enableDetailedCoveredArea: false,
 };
 
 remoteConfig.defaultConfig = defaultRemoteConfigValues;

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

@@ -36,7 +36,7 @@ import {
   selectGtfsDatasetRoutesJson,
   selectGtfsDatasetRoutesLoadingStatus,
   selectGtfsDatasetRouteTypes,
-  selectGtfsFeedBoundingBox,
+  selectFeedBoundingBox,
   selectIsAnonymous,
   selectIsAuthenticated,
   selectUserProfile,
@@ -78,7 +78,7 @@ export default function FullMapView(): React.ReactElement {
     hosted_url: gtfsFeed?.latest_dataset?.hosted_url,
     id: gtfsFeed?.latest_dataset?.id,
   };
-  const boundingBox = useSelector(selectGtfsFeedBoundingBox);
+  const boundingBox = useSelector(selectFeedBoundingBox);
   const routes = useSelector(selectGtfsDatasetRoutesJson);
   const routeTypes = useSelector(selectGtfsDatasetRouteTypes);
 

web-app/src/app/screens/Feed/index.tsx

@@ -27,7 +27,7 @@ import {
   selectRelatedFeedsData,
   selectRelatedGtfsRTFeedsData,
   selectAutoDiscoveryUrl,
-  selectGtfsFeedBoundingBox,
+  selectFeedBoundingBox,
 } from '../../store/feed-selectors';
 import { clearDataset, loadingDataset } from '../../store/dataset-reducer';
 import {
@@ -156,7 +156,7 @@ export default function Feed(): React.ReactElement {
   const datasets = useSelector(selectDatasetsData);
   const hasLoadedAllDatasets = useSelector(selectHasLoadedAllDatasets);
   const latestDataset = useSelector(selectLatestDatasetsData);
-  const boundingBox = useSelector(selectGtfsFeedBoundingBox);
+  const boundingBox = useSelector(selectFeedBoundingBox);
   const feed = useSelector(selectFeedData);
   const gbfsAutodiscoveryUrl = useSelector(selectAutoDiscoveryUrl);
   const needsToLoadFeed = feed === undefined || feed?.id !== feedId;

web-app/src/app/services/feeds/types.ts

@@ -227,6 +227,13 @@ export interface components {
       provider_url?: string;
       /** @description A list of GBFS versions that the feed supports. Each version is represented by its version number and a list of endpoints. */
       versions?: Array<components['schemas']['GbfsVersion']>;
+      bounding_box?: components['schemas']['BoundingBox'];
+      /**
+       * Format: date-time
+       * @description The date and time the bounding box was generated, in ISO 8601 date-time format.
+       * @example "2023-07-10T22:06:00.000Z"
+       */
+      bounding_box_generated_at?: string;
     };
     GbfsVersion: {
       /**

web-app/src/app/store/feed-selectors.ts

@@ -98,13 +98,18 @@ export const selectRelatedGtfsRTFeedsData = (
   return state.feedProfile.relatedFeedsData.gtfsRt;
 };
 
-export const selectGtfsFeedBoundingBox = (
+export const selectFeedBoundingBox = (
   state: RootState,
 ): LatLngExpression[] | undefined => {
-  if (!isGtfsFeedType(state.feedProfile.data)) {
+  if (
+    !(
+      isGtfsFeedType(state.feedProfile.data) ||
+      isGbfsFeedType(state.feedProfile.data)
+    )
+  ) {
     return undefined;
   }
-  const feed = state.feedProfile.data as GTFSFeedType;
+  const feed = state.feedProfile.data;
 
   if (
     feed?.bounding_box?.maximum_latitude == undefined ||