Skip to content

Feat: local Streamlit setup #90

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 9 commits into from
Apr 15, 2025
Merged

Feat: local Streamlit setup #90

merged 9 commits into from
Apr 15, 2025

Conversation

thekaveman
Copy link
Member

@thekaveman thekaveman commented Apr 11, 2025

Closes #71

What this PR does

  • Adds a streamlit service to Compose file, which builds and runs streamlit_app/Dockerfile
    • The image builds on the main pems app image
  • The streamlit Compose service launches streamlit_app/main.py upon startup
  • streamlit_app/main.py discovers Streamlit apps under the streamlit_app/apps/ directory and creates and runs a single large Multipage app
    • Streamlit apps are just Python modules in streamlit_app/apps/ or its subdirectories, that have a filename starting with app_
  • Installs streamlit and additional dependencies in the devcontainer to allow running and debugging the apps locally
  • Comes with a sample DC bikeshare app using a pygwalker config previously created by Traffic Ops
  • Shows a very basic (and hard-coded) integration of the sample Streamlit app with the Django site

Reviewing this PR

Checkout this branch locally (not in a devcontainer)

Create an .env from the sample if you don't have one already.

Build and run the streamlit service

  1. Run bin/build.sh to build all 3 services (app, dev, streamlit)
  2. Run docker compose up streamlit to start the service and connect to its terminal
  3. See the startup log messages, including the localhost URL
  4. If you see the 👋 Welcome to Streamlit! message in the terminal asking for your email, just hit enter
  5. Ctrl/Cmd-click on the localhost URL, to open the Streamlit app in your browser
  6. See the default page with a link to the PeMS site
  7. Enter the (relative) URL: /sample--bikeshare and see the bikeshare sample Streamlit app load

Load the devcontainer

  1. Rebuild and reopen in the devcontainer
  2. Once open, put a breakpoint in the streamlit_app/main.py file and swap to the Run & Debug tab
  3. Select Streamlit, yes sidebar from the dropdown, and hit the play button (or F5)
  4. Open the Local URL from the terminal by Ctrl/Cmd-click or copy/paste (should be http://localhost:8501)
  5. Explore the Streamlit app
  6. Stop the debugger

Test the Django integration

  1. Within the devcontainer Run & Debug tab, choose the Streamlit, no sidebar and start it up
  2. Back in the Run & Debug tab, choose Django: PeMS Client and start it up
  3. Load the PeMS site in your browser (you'll see the Django error page for the default / route)
  4. Enter the relative URL /streamlit to see a page that embeds the Streamlit sample via <iframe>

@thekaveman thekaveman self-assigned this Apr 11, 2025
transitioning to streamlit for viz
Copy link

github-actions bot commented Apr 11, 2025

Coverage report

Click to see where and how coverage changed

FileStatementsMissingCoverageCoverage
(new stmts)
Lines missing
  pems
  urls.py 19
  pems/streamlit_sample
  apps.py
  urls.py 1-4
  streamlit_app
  main.py
  utils.py
Project Total  

This report was generated by python-coverage-comment-action

@thekaveman thekaveman force-pushed the feat/local-streamlit branch from d2f7664 to 418d9d8 Compare April 11, 2025 16:00
but ignore streamlit_app/apps directory, with user-submitted code
and tests with a folder of test apps
walk through the streamlit_ap/apps/ directory and any subdirectory(ies)
looking for app_*.py files, which are assumed to contain a streamlit app each

construct a multipage streamlit site from all the discovered apps

- page titles like Directory | subdirectory | app_name
- page URLs like http://localhost:8501/directory--subdirectory--name

update the launch config for with and without the sidebar
so e.g. Django models can be queried from Streamlit apps
@thekaveman thekaveman force-pushed the feat/local-streamlit branch from 418d9d8 to 1febecc Compare April 11, 2025 17:38
@thekaveman thekaveman marked this pull request as ready for review April 11, 2025 17:50
@thekaveman thekaveman requested a review from a team as a code owner April 11, 2025 17:50
show the bikeshare sample in an iframe in a Django template served
by a Django route/view
@thekaveman thekaveman force-pushed the feat/local-streamlit branch from 1febecc to 4e4d606 Compare April 11, 2025 17:59
Copy link
Member

@lalver1 lalver1 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks great! I was able to run the 3 scenarios without a problem 👍
Using streamlit_app/utils.py and

site = st.navigation(apps, position=nav_position)
is a really nice way to build out the Streamlit site automatically. I think this (plus following some rules about naming new apps in streamlit_app/apps) is the key feature that will allow Traffic Ops to easily add new visualizations.

@thekaveman thekaveman merged commit 0dca644 into main Apr 15, 2025
9 checks passed
@thekaveman thekaveman deleted the feat/local-streamlit branch April 15, 2025 19:08
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.

Start on local streamlit setup
2 participants