A comprehensive browser-based platform for exploring, understanding, and executing the EPA Storm Water Management Model (SWMM5) engine.
SWMM5 Explorer provides four integrated modules for working with stormwater modeling:
- Code Browser: Navigate 75 real SWMM5 C source files with syntax highlighting and fuzzy search
- AI Tools: DeepSeek V3.2 and Claude Sonnet 4.5 for code analysis, plus Nano Banana diagram prompts
- Flow Diagrams: D3.js Sankey visualizations of SWMM5 data flow with click-to-navigate
- INP Generator: Interactive form builder for SWMM5 input files
- WASM Engine: Run simulations in-browser (simulation mode - ready for real WASM integration)
- State Management: Zustand for cross-module integration
- Routing: Wouter for client-side navigation
- UI Components: shadcn/ui with custom industrial/blueprint theme
- Visualization: D3.js with d3-sankey for flow diagrams
- Search: Fuse.js for fuzzy file and function search
- Code Display: react-syntax-highlighter with VS Code dark theme
- AI Integration: OpenRouter (DeepSeek V3.2, Claude Sonnet 4.5) via Replit AI Integrations
- Database: PostgreSQL with Drizzle ORM
- Dark navy background (#0a192f)
- Cyan accent color (#64ffda / primary)
- JetBrains Mono for code, Rajdhani for headings
- Blueprint grid overlays
- Glowing borders and industrial aesthetic
| File | Purpose |
|---|---|
client/src/lib/store.ts |
Zustand state management for cross-module integration |
client/src/lib/swmm-data.ts |
SWMM5 source files and Sankey flow data |
client/src/lib/swmm-engine.ts |
WASM engine interface (simulation mode) |
client/src/pages/CodeBrowser.tsx |
Code browser with fuzzy search |
client/src/pages/SankeyDiagram.tsx |
D3 Sankey flow visualization |
client/src/pages/AITools.tsx |
AI analysis tools |
client/src/pages/WasmEngine.tsx |
WASM simulation interface |
server/routes.ts |
AI API endpoints (DeepSeek, Claude) |
- Upgraded AI models to DeepSeek V3.2 and Claude Sonnet 4.5
- Implemented Fuse.js fuzzy search for files and functions
- Replaced ReactFlow with D3.js Sankey diagrams
- Added Zustand state management for cross-module integration
- Enhanced WASM engine with progress phases and cancellation
The WASM engine currently runs in simulation mode since the actual SWMM5 WASM binary is not compiled. The architecture supports:
- Progress reporting with phases (init, hydrology, routing, quality, complete)
- Cancellation support
- Report generation
- Integration with Zustand store for cross-module state sharing
To enable real WASM simulation, compile SWMM5 C source with Emscripten and place the output in /public/wasm/swmm5.js.
Clicking Sankey diagram nodes navigates to Code Browser with file and line parameters.
URL format: /code?file=filename.c&line=123
Uses Replit AI Integrations - no API keys needed, billed to Replit credits.