How soumalyasaha/flood-nowcast works
Flood Risk Nowcast is a Kolkata flood-risk dashboard with a browser map, scenario playback, analytics, incident views, and a live-prediction screen. Users enter through the routed app, select or view a simulation, and inspect changing flood-risk results across modeled areas. The frontend shares simulation state and requests backend endpoints; the backend computes risk for three distinct drainage mechanisms. The map also presents ward boundaries, historical flood zones, pumping stations, and pipeline overlays. Backend data loading and several page-level interactions are not fully shown in the excerpts, so those links are omitted where unverified.
Main entry points: App.tsx App Router · MapViewPage.tsx Risk Map · SimulationContext.tsx Simulation State · main.py Nowcast API
Components 21
Dashboard
- App Router
frontend/src/App.tsx - App Layout
frontend/src/components/layout/AppLayout.tsx - Risk Map
frontend/src/pages/MapViewPage.tsx - Analytics
frontend/src/pages/AnalyticsPage.tsx - Incidents
frontend/src/pages/IncidentsPage.tsx - Live Prediction
frontend/src/pages/LivePredictionPage.tsx - Header Bar
frontend/src/components/ui/HeaderBar.tsx - Hazard Legend
frontend/src/components/ui/Legend.tsx - Metric Cards
frontend/src/components/ui/MetricCard.tsx - Simulation Clock
frontend/src/components/ui/SimulationClock.tsx
Simulation Client
- Simulation State
frontend/src/context/SimulationContext.tsx - Simulation Hook
frontend/src/hooks/useSimulation.ts - Ward Data Hook
frontend/src/hooks/useWards.ts - Map Layer State
frontend/src/hooks/useMapLayers.ts - API Client
frontend/src/api/config.ts
Risk Backend
- Nowcast API
backend/main.py - Scenario Data
backend/data
Map Data
- Ward Geometries
frontend/src/data/kolkata_ward_polygons.ts - Ward Pipeline
frontend/src/data/ward96_pipeline.ts
Other components
- Dashboard User
- Map Tile Service
Connections 20
- Dashboard User → App Router: opens
- App Router → App Layout: renders
frontend/src/App.tsx - App Router → Risk Map: routes to
frontend/src/App.tsx - App Router → Analytics: routes to
frontend/src/App.tsx - App Router → Incidents: routes to
frontend/src/App.tsx - App Router → Live Prediction: routes to
frontend/src/App.tsx - App Router → Simulation State: provides
frontend/src/App.tsx - Risk Map → Simulation Hook: reads state
frontend/src/pages/MapViewPage.tsx - Simulation Hook → Simulation State: delegates to
frontend/src/hooks/useSimulation.ts - Risk Map → Hazard Legend: renders
frontend/src/pages/MapViewPage.tsx - Risk Map → Metric Cards: renders
frontend/src/pages/MapViewPage.tsx - Risk Map → Ward Geometries: renders
frontend/src/pages/MapViewPage.tsx - Risk Map → Ward Pipeline: uses
frontend/src/pages/MapViewPage.tsx - Risk Map → Map Tile Service: requests tiles
frontend/src/pages/MapViewPage.tsx - Simulation State → API Client: requests
frontend/src/context/SimulationContext.tsx - API Client → Nowcast API: calls endpoints
- Ward Data Hook → Nowcast API: fetches wards
frontend/src/hooks/useWards.ts - Simulation State → Nowcast API: starts and steps
frontend/src/context/SimulationContext.tsx - Simulation State → Nowcast API: requests prediction
frontend/src/context/SimulationContext.tsx - Nowcast API → Scenario Data: loads scenarios