Akiba So
fc468464b2
Context: Build a spatial risk assessment system correlating air quality data with children's respiratory disease incidence across Wuhan. Approach: FastAPI backend serving PostGIS spatial queries, React frontend with Deck.gl maps, and a PyTorch SpatialTemporalGCN pipeline for multi-day (1d/3d/7d) risk prediction. Changes: - backend/ — FastAPI API with auth (JWT), alerts, risk analysis, geocoded case data, grid statistics, and report endpoints - frontend/ — React dashboard with interactive risk maps, alert monitoring, district comparison charts, and timeline player - models/ — SpatialTemporalGCN model with trained weights and ONNX export for inference - scripts/ — ETL pipeline for weather + medical data, grid generation, feature engineering, training, and daily inference - deploy/ — Docker Compose configs for backend, frontend, and MLflow - docs/ — API docs, deployment guide, user guide, and code review Impact: Enables spatial risk visualization, alert monitoring, and ML-driven health risk forecasting for environmental health teams.
1.5 KiB
1.5 KiB
Frontend — React + TypeScript + Leaflet
Stack
- React 18, TypeScript 5, Vite 5
- Tailwind CSS, Recharts, Zustand (state), Axios
- Leaflet / react-leaflet (maps)
- Playwright (e2e tests)
Structure
frontend/src/
main.tsx # Entry point
App.tsx # Router setup
components/ # Reusable UI (maps, charts, nav)
pages/ # Route-level views
services/api.ts # Axios client with TTL cache + request dedup
stores/ # Zustand stores
types/index.ts # Shared TypeScript interfaces
utils/ # Helpers (responsive.ts)
Path Alias
@/ maps to src/ — use import { X } from '@/components/X'.
Patterns
- Components: PascalCase, one per file, default export
- API calls: use
services/api.tswrappers (riskApi,alertApi,caseApi,gridApi) — they handle caching and request dedup - State: Zustand stores in
stores/, typed with TypeScript interfaces fromtypes/ - Styling: Tailwind utility classes, no CSS modules
Running
cd frontend
pnpm dev # localhost:5173, proxies /api → localhost:8000
pnpm build # tsc + vite build → dist/
Anti-Patterns
- Don't call axios directly — use the cached API wrappers in
services/api.ts - Don't use
anyin TypeScript types — useunknownand narrow - Don't mix data fetching with presentation — fetch in pages, render in components
- Don't inline styles when Tailwind classes work
- Don't create god components (>200 lines) — extract sub-components