Skip to content

Web frontend: draw a bounding box, build, inspect and download in the browser - #501

Open
Zhonghao Zhang (Zhonghao1995) wants to merge 3 commits into
ImperialCollegeLondon:mainfrom
Zhonghao1995:frontend
Open

Web frontend: draw a bounding box, build, inspect and download in the browser#501
Zhonghao Zhang (Zhonghao1995) wants to merge 3 commits into
ImperialCollegeLondon:mainfrom
Zhonghao1995:frontend

Conversation

@Zhonghao1995

@Zhonghao1995 Zhonghao Zhang (Zhonghao1995) commented Sep 5, 2026

Copy link
Copy Markdown

I like SWMManywhere a lot and, in my spare time, built an interactive web frontend for it. It is adapted from the frontend I wrote for SWMMCanada, but everything it exposes is SWMManywhere's own configuration: draw a bounding box on a map, adjust the parameters (the form is generated from the pydantic models in parameters.py), edit graphfcn_list, build, inspect the synthesised network on the map with per-element attributes and simulated flow/flooding series, and download the model package. Every build is an ordinary config.yml, shown on the page so the run can be reproduced from the CLI.

The web frontend after building a small box in Andorra la Vella

Everything is in one new folder, frontend/. Nothing under src/, the docs, pyproject.toml or the CI is changed, so it can be adopted or dropped as a unit, or moved to a companion repository if you would rather keep this one Python-only.

  • frontend/src/: React + Vite + MapLibre app.
  • frontend/server/: a small FastAPI service that only calls the public API (load_config, swmmanywhere, run).
  • frontend/server/tests/: 8 tests on the bundled Bellinge fixtures, no network, no SWMM.
  • frontend/README.md: how it works, how to run it, the HTTP surface, and notes.

Runs locally:

pip install -e . && pip install -r frontend/server/requirements.txt
cd frontend && uvicorn server.app:app --port 8000
npm install && npm run dev        # http://localhost:5174

npm run build makes the server serve the app itself at /. Verified end to end on the documentation's Andorra bounding box and on a hand-drawn one. The Python files pass the repository's pre-commit hooks.

AI assistance, for transparency: the adaptation from the SWMMCanada frontend to SWMManywhere was done with Claude Fable 5.1 (Max) in Claude Code, working against this package's source. I directed the design choices, and I reviewed and tested the result myself.

While building it I ran into a few things in the package that I have only documented, not changed: the Overture release id parsing in _get_latest_s3_url now that STAC hrefs are absolute, affine>=3 breaking pyflwdir.dem.slope under numba, and subcatchment slope (m/m) being written unchanged into SWMM's %Slope. Happy to file them as separate issues.

@Zhonghao1995

Copy link
Copy Markdown
Author

Hi Barney,
Hope you’re doing well. I just used Fable 5.1 to develop an interactive frontend for SWMMAnywhere, and it seems to work quite well.

I got a lot of inspiration from your project while developing SWMMCanada and continuing to improve my Agentic SWMM. I extracted some code from the frontend of my SWMMCanada project and further customized it based on the SWMManywhere source code. I think it might be helpful for improving the interaction of your backend, so as to not rely on the SWMM GUI.

Of course, you can choose to keep it or reject it. I simply hope your project keeps getting better and better. :)
Cheers,
Zhonghao

@barneydobson

barneydobson commented Sep 5, 2026

Copy link
Copy Markdown
Collaborator

Thanks Zhonghao Zhang (@Zhonghao1995) for the PRs, I really appreciate contributors to SWMManywhere so am glad to see community starting to happen! I've approved the workflow runners for those so if you (or Fable) can fix those that'd be grand - although note that the workflows are a bit temperamental because the notebooks call web APIs (see issue).

This PR is obviously a bigger effort which will take some time for me to review. Let me also tag Taher Chegini (@cheginit) - he has been making a lot of improvements to SWMManywhere as part of a swmmanywhere-us. It is US tailored, but I believe many of the improvements would be general so the intention is to eventually bring a lot of that into SWMManywhere. I don't think a frontend was part of that work but am not sure!

In general I have fallen behind a bit behind on maintaining SWMManywhere because in part I've started a new job as a lecturer (shockingly.. quite busy) and also knowing we'll probably want to do a lot of sweeping changes with swmmanywhere-us - but I definitely haven't forgotten about it! And will have a masters-level student using it this year so I don't want to drag my feet too much.

@Zhonghao1995

Copy link
Copy Markdown
Author

Thanks barneydobson . Really appreciate you taking the time to look at the PRs. I’ll take a look at the workflow failures and have Fable help fix the issues over the weekend. :)
Cheers,
Zhonghao

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants