feat: finalize visualization UI (#1380)

Author: cka-y

web-app/package.json

@@ -13,6 +13,7 @@
     "@turf/center": "^6.5.0",
     "@types/i18next": "^13.0.0",
     "@types/leaflet": "^1.9.12",
+    "@types/lodash": "^4.17.20",
     "@types/react-map-gl": "^6.1.7",
     "axios": "^1.7.2",
     "countries-list": "^3.1.1",
@@ -25,6 +26,7 @@
     "i18next-browser-languagedetector": "^8.0.0",
     "i18next-http-backend": "^2.5.2",
     "leaflet": "^1.9.4",
+    "loadashes6": "^1.0.0",
     "maplibre-gl": "^5.7.0",
     "material-react-table": "^2.13.0",
     "mui-datatables": "^4.3.0",
@@ -33,6 +35,7 @@
     "pmtiles": "^4.3.0",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0",
+    "react-draggable": "^4.5.0",
     "react-ga4": "^2.1.0",
     "react-google-recaptcha": "^3.1.0",
     "react-helmet-async": "^2.0.5",
@@ -43,6 +46,7 @@
     "react-redux": "^8.1.3",
     "react-router-dom": "^6.16.0",
     "react-scripts": "5.0.1",
+    "react-window": "^2.1.2",
     "recharts": "^2.12.7",
     "redux-persist": "^6.0.0",
     "redux-saga": "^1.2.3",
@@ -108,6 +112,7 @@
     "@types/react-google-recaptcha": "^2.1.8",
     "@types/react-redux": "^7.1.27",
     "@types/react-router-dom": "^5.3.3",
+    "@types/react-window": "^2.0.0",
     "@types/redux-saga": "^0.10.5",
     "@typescript-eslint/eslint-plugin": "^6.7.0",
     "@typescript-eslint/parser": "^6.7.0",

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

@@ -173,5 +173,53 @@
     "noRoutesData": "Could not load routes data for the map.",
     "invalidDataType": "This feed is not a GTFS Schedule feed.",
     "noBoundingBox": "No bounding box available."
+  },
+  "andMoreElements": "And {{count}} more...",
+  "selectedRouteStops": {
+    "title_one": "Stops from selected route",
+    "title_other": "Stops from selected routes",
+    "routeIds_one": "Route ID",
+    "routeIds_other": "Route IDs",
+    "stopId": "Stop ID:"
+  },
+  "scanning": {
+    "titleLarge": "Scanning large feed…",
+    "title": "Scanning the map…",
+    "bodyLarge": "We’re indexing stops across the full extent. This might take a moment.",
+    "body": "We’re indexing stops across the view to speed up filtering.",
+    "gridTile": "Grid: {{grid}} • Tile {{tile}} / {{total}}",
+    "percentComplete": "{{percent}}% complete"
+  },
+  "fullMapView": {
+    "disabledTitle": "Full map view disabled",
+    "disabledDescription": "The full map view feature is disabled at the moment. Please try again later.",
+    "dataBlurb":"Tiles are built from the GTFS feed: we read routes.txt, trips.txt, stop_times.txt, stops.txt (and shapes.txt when present), derive routes/stops to GeoJSON, compile them with Tippecanoe into pmtiles files for map rendering.",
+    "clearAll": "Clear All",
+    "hideStops": "Hide Stops",
+    "closePanel": "Close",
+    "headers": {
+      "routeTypes": "Route Types",
+      "visibility": "Visibility",
+      "routes": "Routes"
+    },
+    "backToMap": "Back To Map",
+    "aria": {
+      "close": "close",
+      "refocus": "refocus",
+      "mapStyle": "map style",
+      "filter": "filter"
+    },
+    "style": {
+      "title": "Map style",
+      "stopSize": "Stop size",
+      "size": {
+        "small": "Small",
+        "medium": "Medium",
+        "large": "Large",
+        "custom": "Custom"
+      },
+      "customStopRadiusAria": "Custom stop radius",
+      "radius": "Radius: {{px}}px"
+    }
   }
 }

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

@@ -210,6 +210,10 @@ const CoveredAreaMap: React.FC<CoveredAreaMapProps> = ({
           <GtfsVisualizationMap
             polygon={boundingBox ?? []}
             latestDataset={latestDataset}
+            dataDisplayLimit={config.visualizationMapPreviewDataLimit}
+            preview={true}
+            filteredRoutes={[]} // this is necessary to re-renders
+            filteredRouteTypeIds={[]}
           />
         </>
       );