Skip to content

Latest commit

 

History

History
74 lines (57 loc) · 3.11 KB

File metadata and controls

74 lines (57 loc) · 3.11 KB

SWMM5 Explorer

A comprehensive browser-based platform for exploring, understanding, and executing the EPA Storm Water Management Model (SWMM5) engine.

Overview

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)

Architecture

Frontend (React + Vite)

  • 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

Backend (Express)

  • AI Integration: OpenRouter (DeepSeek V3.2, Claude Sonnet 4.5) via Replit AI Integrations
  • Database: PostgreSQL with Drizzle ORM

Design System

  • Dark navy background (#0a192f)
  • Cyan accent color (#64ffda / primary)
  • JetBrains Mono for code, Rajdhani for headings
  • Blueprint grid overlays
  • Glowing borders and industrial aesthetic

Key Files

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)

Recent Changes

January 2026

  • 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

Development Notes

WASM Engine Status

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.

Cross-Module Navigation

Clicking Sankey diagram nodes navigates to Code Browser with file and line parameters. URL format: /code?file=filename.c&line=123

AI Integration

Uses Replit AI Integrations - no API keys needed, billed to Replit credits.