Skip to content

replit.md

Latest commit

 

History

History
122 lines (102 loc) · 9.13 KB

replit.md

File metadata and controls

122 lines (102 loc) · 9.13 KB

SWMM Engine Web Application

Overview

This is a web-based interface for the EPA Storm Water Management Model (SWMM) simulation engine. The application allows users to upload SWMM input files, run stormwater simulations using WebAssembly-compiled SWMM5 engine directly in the browser, and view simulation results including runoff, flow, and water quality analysis.

The project is a full-stack TypeScript application with a React frontend and Express backend, designed for professional engineering workflows requiring information density and precise data visualization.

User Preferences

Preferred communication style: Simple, everyday language.

System Architecture

Frontend Architecture

  • Framework: React 18 with TypeScript
  • Routing: Wouter (lightweight client-side routing)
  • State Management: TanStack React Query for server state and data fetching
  • UI Components: shadcn/ui component library built on Radix UI primitives
  • Styling: Tailwind CSS with CSS variables for theming (light/dark mode support)
  • Build Tool: Vite with React plugin

Backend Architecture

  • Framework: Express.js with TypeScript
  • Server Pattern: Single HTTP server serving both API routes and static files
  • Development: Vite dev server middleware for hot module replacement
  • Production: Static file serving from built assets

Data Storage

  • ORM: Drizzle ORM with PostgreSQL dialect
  • Schema Location: shared/schema.ts defines all database tables
  • Current Storage: In-memory storage implementation (MemStorage) with interface for easy database swap
  • Migrations: Drizzle Kit for schema migrations (drizzle-kit push)

Key Design Patterns

  • Shared Types: Common schema and types in shared/ directory used by both client and server
  • Path Aliases: @/ for client source, @shared/ for shared code
  • API Structure: RESTful endpoints under /api/ prefix
  • Form Validation: Zod schemas generated from Drizzle tables via drizzle-zod

SWMM Engine Integration

  • WebAssembly Module: SWMM5 engine compiled to WASM located at client/public/wasm/swmm5.js
  • Client-Side Processing: Simulations run entirely in the browser using the WASM module
  • File System Emulation: Emscripten FS API for handling input/output files in browser

Pages & Navigation

  • Simulator (/): Main SWMM5 simulation page with INP file loading, editing, validation, and WASM-based simulation
    • INP Syntax Highlighting: Color-coded editor for section headers, comments, keywords, numbers
    • Network Map Tab: Interactive SVG network map with pan/zoom, color-by-type/depth/flow, tooltips, animated time-stepping playback from binary .OUT data
    • Time Series Tab: Interactive Recharts plots for node/link/subcatchment variables from binary .OUT
    • Profile Plot Tab: Longitudinal pipe profile with ground/invert/water surface elevations along selected path
    • Run Comparison Tab: Side-by-side comparison of two simulation runs with baseline storage in localStorage
    • Binary .OUT Download: Save SWMM binary output file alongside .rpt download
    • 8+ Example Models: Simple tutorial, LID/green infrastructure, water quality, force main, dual drainage, Greenville SI, etc.
    • Enhanced Continuity Dashboard: Color-coded (green/yellow/red) continuity error thresholds with Good/Fair/Poor labels
    • CSV Export: One-click CSV download buttons on Nodes, Links, and Subcatchments result tabs
    • Model Statistics Dashboard: Pipe length distribution histogram, subcatchment area breakdown, connectivity stats (avg/max links per node)
    • Auto-Fix INP Errors: Detects and offers one-click fixes for missing REPORT options, zero-length conduits, missing cross-sections
    • Keyboard Shortcuts: Ctrl+R (Run), Ctrl+E (Edit), Ctrl+1-9 (switch tabs), documented in Help dialog
    • Companion Resources: Cross-links to SWMM5 Manual Search, SWMM vs ICM solver comparison, SWMM Docs, INP Maker, Rosetta Stone
    • Share Results URL: Copy shareable link with ?example=ID&tab=TAB URL params for collaboration
    • Subcatchment Pagination: Shows first 20 rows by default with "Show all" toggle for large models
    • Tab Tooltips: Hover tooltips on all 12 result tabs describing each tab's purpose
    • Control Rule Editor Tab: Interactive editor for SWMM5 [CONTROLS] rules with add/delete/edit, conditions (IF/AND/OR), THEN/ELSE actions, priority, import from INP/text/JSON/file, export to SWMM5 text and JSON, 6 built-in templates, validation warnings, and "Apply to INP" integration
  • RPT Detective (/rpt-detective): Report file analyzer - computes instability index, health score, drama level, detective's notebook with root cause analysis, and detailed surcharge/flooding/conduit tables
    • Section Explorer Tab: Browse all parsed RPT sections (57+ types) with sortable columns, row filtering, and per-section CSV export
    • Statistics Tab: Column-level statistics (count, min, max, mean, median, std dev) with visual distribution bars for any parsed section
    • Compare Scenarios Tab: Upload two .RPT files for side-by-side comparison with delta analysis (flooding nodes, surcharge, continuity errors, % change)
    • Export Tab: Export all sections as individual CSVs, structured JSON, or download raw .RPT; individual section download buttons
  • SWMM4 Legacy (/swmm4): Converter for legacy SWMM4 .DAT files to modern SWMM5 .INP format
  • INP Diff (/inp-diff): Section-aware diff tool for comparing two SWMM5 .inp files, with LCS-based line diffing, category-grouped section sidebar, stat badges, filter controls, and inline diff view with line numbers
  • File Manager (/filebase): Native integration with external SWMM Filebase app - browse, search, pin, and view SWMM5 .inp files with content preview, copy, download, and open-in-simulator actions
  • Batch SWMM (/batch): Batch processing tool for multiple .inp files - upload queue with drag-and-drop, WebSocket-powered real-time progress, results table with CSV export, simulation mode when no local SWMM engine is detected, configurable settings (report step, routing method, stop-on-error)
  • Camel SWMM (/camel): Model management and AI-powered analysis - file upload/validation, 5 model templates, INP section analysis with model summary, 7 sample models, AI tools (model review, what-if analysis, anomaly detection, model builder) via OpenAI, "Open in Simulator" integration
  • About (/docs): Project description, documentation, and social links (LinkedIn, X/Twitter)

Key Client-Side Libraries (new)

  • client/src/lib/inpNetworkParser.ts: Parses [COORDINATES], [VERTICES], [SUBCATCHMENTS], [Polygons], [JUNCTIONS], [OUTFALLS], [STORAGE], [CONDUITS], [PUMPS], [ORIFICES], [WEIRS] from INP files to extract network topology
  • client/src/lib/swmmBinaryParser.ts: Parses SWMM5 binary .OUT files to extract time series data for all nodes, links, subcatchments, and system variables
  • client/src/components/network-map.tsx: Interactive SVG network map with pan/zoom, result-based coloring, and tooltips
  • client/src/components/time-series-chart.tsx: Interactive Recharts time series plots for SWMM simulation output
  • client/src/components/profile-plot.tsx: Longitudinal pipe profile visualization with ground/invert/water surface
  • client/src/components/run-comparison.tsx: Side-by-side simulation comparison with delta metrics
  • client/src/components/inp-syntax-editor.tsx: INP syntax highlighting editor overlay
  • client/src/components/control-rule-editor.tsx: Interactive SWMM5 control rule editor with CRUD, import/export, templates, validation
  • client/src/lib/swmmControlRules.ts: Parser, exporter, validator, templates, and data model for SWMM5 control rules
  • client/src/lib/rptSectionParser.ts: Full RPT section parser with stats, scenario comparison, CSV/JSON export for Section Explorer/Stats/Compare/Export tabs

Engine Initialization

  • SWMM WASM engine auto-initializes on page load (no manual "Initialize Engine" button)
  • Status indicator badge shows: green dot "Engine v{version}" when ready, spinner "Loading Engine..." during init, or red dot "Engine Unavailable" on failure
  • Engine is also auto-initialized before simulation if not already ready

Layout Structure (from design guidelines)

  • Top toolbar: Fixed height navigation and actions
  • Left sidebar: Collapsible project tree/properties panel
  • Main canvas: Network diagram editor area
  • Right panel: Toggle-able properties and settings
  • Bottom panel: Resizable logs/output area

External Dependencies

Database

  • PostgreSQL (via DATABASE_URL environment variable)
  • Drizzle ORM for database operations
  • connect-pg-simple for session storage

Frontend Libraries

  • Radix UI primitives for accessible components
  • Embla Carousel for carousel functionality
  • React Day Picker for calendar components
  • Recharts for data visualization
  • cmdk for command palette functionality
  • Vaul for drawer components

Development Tools

  • Replit-specific plugins for development (cartographer, dev-banner, runtime-error-modal)
  • esbuild for production server bundling
  • TypeScript with strict mode enabled

Fonts (via Google Fonts CDN)

  • DM Sans, Geist Mono, Fira Code, Architects Daughter