openmemory.md

WRD Insight Dashboard (JalDrishti)

Overview

React + TypeScript (Vite) dashboard for Maharashtra WRD concept demo. Key modules:

• Dashboard (KPIs/analytics)
• GIS Map (Leaflet)
• Repository (documents)
• AI Assistant (chat-style document assistant)

Architecture

• Top-level layout: src/components/Layout.tsx with sidebar + header + routed page content via react-router-dom Outlet.
• Routes: src/App.tsx mounts Chatbot at /ai-assistant.

Components

• src/pages/Chatbot.tsx
  • Desktop chat renders within the routed page content area.
  • Mobile chat uses a floating button and a fixed inset-0 full-screen overlay.
• src/pages/GisMap.tsx
  • Leaflet-based GIS map with district boundaries and dam markers.
  • Loads cached GeoJSON from public/data/maharashtra-districts.geojson.
  • Live Data button toggles simulated rainfall/flood pulse animation overlay.

Patterns

• Nested flex scroll fix: for chat UIs inside dashboards, ensure the scrollable region is in a flex-1 min-h-0 overflow-y-auto container, and parents also include min-h-0 when needed. This prevents the input/footer from being pushed off-screen.
• Route-specific page wrapper: for /ai-assistant and /map, Layout.tsx uses overflow-hidden and removes outer padding so each page manages its internal scrolling and spacing.
• GeoJSON caching for GIS: District boundaries are cached locally to avoid Nominatim rate-limiting. Run python scripts/cache_maharashtra_districts_geojson.py to refresh. Script uses bbox fallback when Nominatim is unavailable.