fix: location extraction (#979)

Author: cka-y

infra/functions-python/main.tf

@@ -117,12 +117,6 @@ resource "google_storage_bucket" "gbfs_snapshots_bucket" {
   name     = "${var.gbfs_bucket_name}-${var.environment}"
 }
 
-# TODO: Validate if this is still needed
-resource "google_storage_bucket" "reverse_geolocation_results_bucket" {
-  location = var.gcp_region
-  name     = "reverse-geolocation-results-${var.environment}"
-}
-
 resource "google_storage_bucket_iam_member" "datasets_bucket_functions_service_account" {
   bucket = data.google_storage_bucket.datasets_bucket.name
   role   = "roles/storage.admin"
@@ -1336,9 +1330,8 @@ resource "google_storage_bucket_iam_binding" "bucket_object_viewer" {
 resource "google_storage_bucket_iam_binding" "bucket_object_creator" {
   for_each = {
     gbfs_snapshots_bucket = google_storage_bucket.gbfs_snapshots_bucket.name
-    reverse_geolocation_results_bucket = google_storage_bucket.reverse_geolocation_results_bucket.name
   }
-  depends_on = [google_storage_bucket.gbfs_snapshots_bucket, google_storage_bucket.reverse_geolocation_results_bucket]
+  depends_on = [google_storage_bucket.gbfs_snapshots_bucket]
   bucket = each.value
   role   = "roles/storage.objectCreator"
   members = [
@@ -1351,7 +1344,7 @@ resource "google_storage_bucket_iam_binding" "storage_admin" {
   for_each = {
     datasets_bucket = "${var.datasets_bucket_name}-${var.environment}"
   }
-  depends_on = [google_storage_bucket.gbfs_snapshots_bucket, google_storage_bucket.reverse_geolocation_results_bucket]
+  depends_on = [google_storage_bucket.gbfs_snapshots_bucket]
   bucket = each.value
   role   = "roles/storage.admin"
   members = [
@@ -1497,4 +1490,11 @@ resource "google_project_iam_member" "bigquery_job_user" {
   project = var.project_id
   role    = "roles/bigquery.jobUser"
   member  = "serviceAccount:${google_service_account.functions_service_account.email}"
+}
+
+# This permission is added to allow the function to act as the service account and generate tokens.
+resource "google_project_iam_member" "service_account_workflow_act_as_binding" {
+  project = var.project_id
+  role    = "roles/iam.serviceAccountUser" #iam.serviceAccounts.actAs
+  member  = "serviceAccount:${google_service_account.functions_service_account.email}"
 }

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

@@ -1,5 +1,11 @@
-import React, { useState } from 'react';
-import { Box, ToggleButtonGroup, ToggleButton, Tooltip } from '@mui/material';
+import React, { useState, useEffect } from 'react';
+import {
+  Box,
+  ToggleButtonGroup,
+  ToggleButton,
+  Tooltip,
+  Skeleton,
+} from '@mui/material';
 import MapIcon from '@mui/icons-material/Map';
 import TravelExploreIcon from '@mui/icons-material/TravelExplore';
 import { ContentBox } from './ContentBox';
@@ -10,8 +16,9 @@ import { Map } from './Map';
 import { useTranslation } from 'react-i18next';
 import type { LatLngExpression } from 'leaflet';
 import { useTheme } from '@mui/material/styles';
+
 interface CoveredAreaMapProps {
-  boundingBox?: LatLngExpression[]; // Replace 'any' with your actual type
+  boundingBox?: LatLngExpression[];
   latestDataset?: { hosted_url?: string };
 }
 
@@ -36,35 +43,43 @@ const CoveredAreaMap: React.FC<CoveredAreaMapProps> = ({
 }) => {
   const { t } = useTranslation('feeds');
   const theme = useTheme();
-  const [geoJsonError, setGeoJsonError] = React.useState(false);
-  const [geoJsonData, setGeoJsonData] = React.useState<GeoJSONData | null>(
-    null,
-  );
-  React.useEffect(() => {
-    if (latestDataset?.hosted_url != undefined) {
-      fetchGeoJson(latestDataset.hosted_url).then(
-        (data) => {
-          setGeoJsonData(data);
-        },
-        (_) => {
-          setGeoJsonError(true);
-        },
-      );
-    }
-  }, [latestDataset]);
 
+  const [geoJsonData, setGeoJsonData] = useState<GeoJSONData | null>(null);
+  const [geoJsonError, setGeoJsonError] = useState(false);
+  const [geoJsonLoading, setGeoJsonLoading] = useState(false);
   const [view, setView] = useState<
     'boundingBoxView' | 'detailedCoveredAreaView'
   >('detailedCoveredAreaView');
 
+  useEffect(() => {
+    if (latestDataset?.hosted_url !== undefined) {
+      setGeoJsonLoading(true);
+      fetchGeoJson(latestDataset.hosted_url)
+        .then((data) => {
+          setGeoJsonData(data);
+          setGeoJsonError(false);
+          setView('detailedCoveredAreaView');
+        })
+        .catch(() => {
+          setGeoJsonError(true);
+          setView('boundingBoxView');
+        })
+        .finally(() => {
+          setGeoJsonLoading(false);
+        });
+    } else {
+      // No dataset, fallback to bounding box
+      setGeoJsonData(null);
+      setGeoJsonError(true);
+      setView('boundingBoxView');
+    }
+  }, [latestDataset]);
+
   const handleViewChange = (
     _: React.MouseEvent<HTMLElement>,
     newView: 'boundingBoxView' | 'detailedCoveredAreaView' | null,
   ): void => {
-    // Only update state if a non-null value is returned
-    if (newView !== null) {
-      setView(newView);
-    }
+    if (newView !== null) setView(newView);
   };
 
   return (
@@ -89,7 +104,9 @@ const CoveredAreaMap: React.FC<CoveredAreaMapProps> = ({
           <Tooltip title={t('detailedCoveredAreaViewTooltip')}>
             <ToggleButton
               value='detailedCoveredAreaView'
-              disabled={geoJsonError || boundingBox === undefined}
+              disabled={
+                geoJsonLoading || geoJsonError || boundingBox === undefined
+              }
               aria-label='Detailed Covered Area View'
             >
               <TravelExploreIcon />
@@ -114,7 +131,14 @@ const CoveredAreaMap: React.FC<CoveredAreaMapProps> = ({
 
       {boundingBox !== undefined && (
         <Box sx={mapBoxPositionStyle}>
-          {view === 'boundingBoxView' ? (
+          {geoJsonLoading ? (
+            <Skeleton
+              variant='rectangular'
+              width='100%'
+              height='100%'
+              animation='wave'
+            />
+          ) : view === 'boundingBoxView' ? (
             <Map polygon={boundingBox} />
           ) : (
             <MapGeoJSON geoJSONData={geoJsonData} polygon={boundingBox} />