From c7be2ba612bbaf8efbe1c85a3c78a5d14fa4ed24 Mon Sep 17 00:00:00 2001
From: Luis Alvergue <luis@compiler.la>
Date: Thu, 31 Jul 2025 16:13:07 +0000
Subject: [PATCH 1/6] chore(5-min-viz): set default station to None

as part of the district landing page feature, we set the default
station to None to show a summary for all stations in the district.
this requires not displaying the lane selector until a station is
selected.
---
 .../apps/districts/app_stations.py            | 24 ++++++++++---------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/pems_streamlit/src/pems_streamlit/apps/districts/app_stations.py b/pems_streamlit/src/pems_streamlit/apps/districts/app_stations.py
index b3325aa..5358bdd 100644
--- a/pems_streamlit/src/pems_streamlit/apps/districts/app_stations.py
+++ b/pems_streamlit/src/pems_streamlit/apps/districts/app_stations.py
@@ -53,22 +53,24 @@ def main():
 
     map_placeholder = st.empty()
 
-    station = st.selectbox(
-        "Station",
-        df_station_metadata["STATION_ID"],
-    )
+    station = st.selectbox("Station", df_station_metadata["STATION_ID"], index=None)
 
     quantity = st.multiselect("Quantity", ["VOLUME_SUM", "OCCUPANCY_AVG", "SPEED_FIVE_MINS"])
 
-    num_lanes = int(df_station_metadata[df_station_metadata["STATION_ID"] == station]["PHYSICAL_LANES"].iloc[0])
-    lane = st.multiselect(
-        "Lane",
-        list(range(1, num_lanes + 1)),
-    )
+    if station:
+        num_lanes = int(df_station_metadata[df_station_metadata["STATION_ID"] == station]["PHYSICAL_LANES"].iloc[0])
+        lane = st.multiselect(
+            "Lane",
+            list(range(1, num_lanes + 1)),
+        )
 
     with map_placeholder:
-        df_selected_station = df_station_metadata.query("STATION_ID == @station")
-        map_station_summary(df_selected_station)
+        if station:
+            df_selected_station = df_station_metadata.query("STATION_ID == @station")
+            map_station_summary(df_selected_station)
+        else:
+            # map summary for all stations in District
+            pass
 
     days = st.multiselect("Days", get_available_days())
 

From 85749e0db41dab9d7bd0ec1cd95bd956928ebba5 Mon Sep 17 00:00:00 2001
From: Luis Alvergue <luis@compiler.la>
Date: Fri, 1 Aug 2025 03:17:27 +0000
Subject: [PATCH 2/6] feat(5-min-viz): add district summary and map

reorganize map components to accomodate a new district summary view
---
 .../pems_streamlit/apps/districts/app_stations.py  |  5 ++---
 .../{map_station_summary.py => map_summary.py}     | 14 ++++++++++++++
 2 files changed, 16 insertions(+), 3 deletions(-)
 rename pems_streamlit/src/pems_streamlit/components/{map_station_summary.py => map_summary.py} (68%)

diff --git a/pems_streamlit/src/pems_streamlit/apps/districts/app_stations.py b/pems_streamlit/src/pems_streamlit/apps/districts/app_stations.py
index 5358bdd..b00c71b 100644
--- a/pems_streamlit/src/pems_streamlit/apps/districts/app_stations.py
+++ b/pems_streamlit/src/pems_streamlit/apps/districts/app_stations.py
@@ -5,7 +5,7 @@
 
 from pems_data import ServiceFactory
 
-from pems_streamlit.components.map_station_summary import map_station_summary
+from pems_streamlit.components.map_summary import map_district_summary, map_station_summary
 from pems_streamlit.components.plot_5_min_traffic_data import plot_5_min_traffic_data
 
 FACTORY = ServiceFactory()
@@ -69,8 +69,7 @@ def main():
             df_selected_station = df_station_metadata.query("STATION_ID == @station")
             map_station_summary(df_selected_station)
         else:
-            # map summary for all stations in District
-            pass
+            map_district_summary(df_station_metadata)
 
     days = st.multiselect("Days", get_available_days())
 
diff --git a/pems_streamlit/src/pems_streamlit/components/map_station_summary.py b/pems_streamlit/src/pems_streamlit/components/map_summary.py
similarity index 68%
rename from pems_streamlit/src/pems_streamlit/components/map_station_summary.py
rename to pems_streamlit/src/pems_streamlit/components/map_summary.py
index a232d8f..6f4c0d9 100644
--- a/pems_streamlit/src/pems_streamlit/components/map_station_summary.py
+++ b/pems_streamlit/src/pems_streamlit/components/map_summary.py
@@ -2,6 +2,20 @@
 import streamlit as st
 
 
+def map_district_summary(df_station_metadata: pd.DataFrame):
+
+    map_col, info_col = st.columns([0.6, 0.4])
+
+    with map_col:
+        map_df = df_station_metadata.rename(columns={"LATITUDE": "latitude", "LONGITUDE": "longitude"})
+        map_df_cleaned = map_df.dropna(subset=["latitude", "longitude"])
+        st.map(map_df_cleaned[["latitude", "longitude"]], height=265)
+
+    with info_col:
+        with st.container(border=True):
+            st.markdown(f"**Stations** {df_station_metadata['STATION_ID'].nunique()}")
+
+
 def map_station_summary(df_station_metadata: pd.DataFrame):
 
     map_col, info_col = st.columns([0.6, 0.4])

From 0b2313b96f8c758ada73929ac0814100967834fd Mon Sep 17 00:00:00 2001
From: Luis Alvergue <luis@compiler.la>
Date: Fri, 1 Aug 2025 03:21:43 +0000
Subject: [PATCH 3/6] chore(5-min-viz): make page use full width

pages in the Django app are set to use a full width layout. the
height of the div containing the streamlit app is also set to full
height. the streamlit app (page) is configured to use a wide layout.
---
 .../apps/districts/app_stations.py               |  2 ++
 .../src/pems_web/core/templates/core/base.html   | 16 ++++++++--------
 .../districts/templates/districts/district.html  |  2 +-
 .../districts/templates/districts/index.html     |  4 ++--
 pems_web/src/pems_web/static/css/styles.css      |  5 +++++
 5 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/pems_streamlit/src/pems_streamlit/apps/districts/app_stations.py b/pems_streamlit/src/pems_streamlit/apps/districts/app_stations.py
index b00c71b..2876dde 100644
--- a/pems_streamlit/src/pems_streamlit/apps/districts/app_stations.py
+++ b/pems_streamlit/src/pems_streamlit/apps/districts/app_stations.py
@@ -12,6 +12,8 @@
 STATIONS = FACTORY.stations_service()
 S3 = FACTORY.s3_source
 
+st.set_page_config(layout="wide")
+
 
 @st.cache_data(ttl=3600)  # Cache for 1 hour
 def load_station_metadata(district_number: str) -> pd.DataFrame:
diff --git a/pems_web/src/pems_web/core/templates/core/base.html b/pems_web/src/pems_web/core/templates/core/base.html
index 0e7e398..c9fc790 100644
--- a/pems_web/src/pems_web/core/templates/core/base.html
+++ b/pems_web/src/pems_web/core/templates/core/base.html
@@ -32,7 +32,7 @@
     <header role="banner" id="header" class="global-header fixed">
       <!-- Utility header structural component -->
       <div class="utility-header">
-        <div class="container">
+        <div class="container-fluid">
           <div class="flex-row">
             <div class="social-media-links">
               <div class="header-cagov-logo">
@@ -54,7 +54,7 @@
       </div>
       <!-- header branding with light gray background -->
       <div class="section-default">
-        <div class="branding">
+        <div class="branding container-fluid">
           <div class="header-organization-banner">
             <a href="{% url 'core:index' %}">
               <div class="logo-assets">
@@ -84,7 +84,7 @@
         </div>
       </div>
       <!-- Top Level Navigation Only -->
-      <div class="navigation-search full-width-nav container">
+      <div class="navigation-search full-width-nav container-fluid">
         <div id="head-search" class="search-container featured-search">
           <div class="d-block d-lg-none">
             <a href="{% url 'core:index' %}" class="drawer-logo-link first-level-link">
@@ -94,7 +94,7 @@
             </a>
           </div>
         </div>
-        <nav id="navigation" class="main-navigation singlelevel" aria-label="Main navigation">
+        <nav id="navigation" class="main-navigation container-fluid singlelevel" aria-label="Main navigation">
           <ul id="nav_list" class="top-level-nav">
             <li class="nav-item">
               <a href="{% url 'core:index' %}" class="first-level-link">Home</a>
@@ -113,9 +113,9 @@
       </div>
     </header>
     <div id="main-content" class="main-content">
-      <div class="container">
+      <div class="container-fluid">
         <main class="main-primary">
-          <h1>
+          <h1 class="m-y-md">
             {% block headline %}
             {% endblock headline %}
           </h1>
@@ -126,7 +126,7 @@ <h1>
     </div>
     <!-- Global Footer -->
     <footer id="footer" class="global-footer">
-      <div class="container">
+      <div class="container-fluid">
         <div class="d-flex">
           <a href="https://www.ca.gov" class="cagov-logo">
             <span class="sr-only">CA.gov</span>
@@ -152,7 +152,7 @@ <h1>
       </div>
       <!-- Copyright Statement -->
       <div class="copyright">
-        <div class="container text-right">
+        <div class="container-fluid text-right">
           <span aria-hidden="true">©</span>
           <span id="thisyear">
             <script>document.getElementById('thisyear').appendChild(document.createTextNode(new Date().getFullYear()))</script>
diff --git a/pems_web/src/pems_web/districts/templates/districts/district.html b/pems_web/src/pems_web/districts/templates/districts/district.html
index c26c8ea..463ac5c 100644
--- a/pems_web/src/pems_web/districts/templates/districts/district.html
+++ b/pems_web/src/pems_web/districts/templates/districts/district.html
@@ -5,7 +5,7 @@
 {% endblock headline %}
 
 {% block districts-content %}
-    <div class="row" style="min-height: 450px;">
+    <div class="row min-vh-100">
         <div class="col-lg-12">
             <iframe title="District {{ current_district.number }} visualization"
                     class="w-100 h-100"
diff --git a/pems_web/src/pems_web/districts/templates/districts/index.html b/pems_web/src/pems_web/districts/templates/districts/index.html
index 025073a..9ce4232 100644
--- a/pems_web/src/pems_web/districts/templates/districts/index.html
+++ b/pems_web/src/pems_web/districts/templates/districts/index.html
@@ -5,7 +5,7 @@
 {% endblock headline %}
 
 {% block inner-content %}
-    <div class="container p-t-lg">
+    <div class="container-fluid p-t-xs">
         <div class="row">
             <div class="col-lg-2 pb-lg-5" role="complementary">
                 {% block sidebar %}
@@ -15,7 +15,7 @@
             <div class="col-lg-10 pb-lg-5">
                 {% block districts-content %}
                     <div class="row" style="min-height: 450px;">
-                        <div class="col-lg-12">
+                        <div class="col-lg-12 min-vh-100">
                             <iframe title="District visualizations" class="w-100 h-100" src="{{ streamlit.url }}/districts--stations?embed=true">
                             </iframe>
                         </div>
diff --git a/pems_web/src/pems_web/static/css/styles.css b/pems_web/src/pems_web/static/css/styles.css
index c95d545..97d0fdf 100644
--- a/pems_web/src/pems_web/static/css/styles.css
+++ b/pems_web/src/pems_web/static/css/styles.css
@@ -10,3 +10,8 @@ header {
     }
   }
 }
+
+.main-navigation.container-fluid,
+.branding.container-fluid {
+  max-width: 100% !important;
+}

From 8bdd12b9191b30bb02a1465d753de9b822acaf6a Mon Sep 17 00:00:00 2001
From: Luis Alvergue <luis@compiler.la>
Date: Fri, 1 Aug 2025 17:52:37 +0000
Subject: [PATCH 4/6] chore(5-min-viz): add more data to the info box on the
 landing page

---
 pems_data/src/pems_data/services/stations.py                | 1 +
 pems_streamlit/src/pems_streamlit/components/map_summary.py | 3 +++
 tests/pytest/pems_data/services/test_stations.py            | 1 +
 3 files changed, 5 insertions(+)

diff --git a/pems_data/src/pems_data/services/stations.py b/pems_data/src/pems_data/services/stations.py
index e6eda50..626aee8 100644
--- a/pems_data/src/pems_data/services/stations.py
+++ b/pems_data/src/pems_data/services/stations.py
@@ -52,6 +52,7 @@ def get_district_metadata(self, district_number: str) -> pd.DataFrame:
         cache_opts = {"key": self._build_cache_key("metadata", "district", district_number), "ttl": 3600}  # 1 hour
         columns = [
             "STATION_ID",
+            "CONTROLLER_ID",
             "NAME",
             "PHYSICAL_LANES",
             "STATE_POSTMILE",
diff --git a/pems_streamlit/src/pems_streamlit/components/map_summary.py b/pems_streamlit/src/pems_streamlit/components/map_summary.py
index 6f4c0d9..4aacc63 100644
--- a/pems_streamlit/src/pems_streamlit/components/map_summary.py
+++ b/pems_streamlit/src/pems_streamlit/components/map_summary.py
@@ -13,7 +13,10 @@ def map_district_summary(df_station_metadata: pd.DataFrame):
 
     with info_col:
         with st.container(border=True):
+            st.markdown(f"**Directional Distance** {df_station_metadata['LENGTH'].sum().round(1)} miles")
+            st.markdown(f"**Freeways** {df_station_metadata['FREEWAY'].nunique()}")
             st.markdown(f"**Stations** {df_station_metadata['STATION_ID'].nunique()}")
+            st.markdown(f"**Controllers** {df_station_metadata['CONTROLLER_ID'].nunique()}")
 
 
 def map_station_summary(df_station_metadata: pd.DataFrame):
diff --git a/tests/pytest/pems_data/services/test_stations.py b/tests/pytest/pems_data/services/test_stations.py
index ca9507f..f961e0b 100644
--- a/tests/pytest/pems_data/services/test_stations.py
+++ b/tests/pytest/pems_data/services/test_stations.py
@@ -33,6 +33,7 @@ def test_get_district_metadata(self, service: StationsService, data_source: IDat
         assert data_source.read.call_args.args[0] == service.metadata_file
         assert data_source.read.call_args.kwargs["columns"] == [
             "STATION_ID",
+            "CONTROLLER_ID",
             "NAME",
             "PHYSICAL_LANES",
             "STATE_POSTMILE",

From 508e0279dc303c66acdcc25d40b65194c5a8efc3 Mon Sep 17 00:00:00 2001
From: Luis Alvergue <luis@compiler.la>
Date: Mon, 4 Aug 2025 21:07:41 +0000
Subject: [PATCH 5/6] chore(5-min-viz): improve layout of UI

---
 .../apps/districts/app_stations.py            | 33 ++++++++++---------
 1 file changed, 18 insertions(+), 15 deletions(-)

diff --git a/pems_streamlit/src/pems_streamlit/apps/districts/app_stations.py b/pems_streamlit/src/pems_streamlit/apps/districts/app_stations.py
index 2876dde..f680369 100644
--- a/pems_streamlit/src/pems_streamlit/apps/districts/app_stations.py
+++ b/pems_streamlit/src/pems_streamlit/apps/districts/app_stations.py
@@ -53,18 +53,23 @@ def main():
 
     df_station_metadata = load_station_metadata(district_number)
 
-    map_placeholder = st.empty()
+    col1, col2 = st.columns([0.25, 0.75])
 
-    station = st.selectbox("Station", df_station_metadata["STATION_ID"], index=None)
-
-    quantity = st.multiselect("Quantity", ["VOLUME_SUM", "OCCUPANCY_AVG", "SPEED_FIVE_MINS"])
-
-    if station:
-        num_lanes = int(df_station_metadata[df_station_metadata["STATION_ID"] == station]["PHYSICAL_LANES"].iloc[0])
-        lane = st.multiselect(
-            "Lane",
-            list(range(1, num_lanes + 1)),
-        )
+    with col1:
+        station = st.selectbox("Station", df_station_metadata["STATION_ID"], index=None)
+        lane = None
+        if station:
+            num_lanes = int(df_station_metadata[df_station_metadata["STATION_ID"] == station]["PHYSICAL_LANES"].iloc[0])
+            lane = st.multiselect(
+                "Lane",
+                list(range(1, num_lanes + 1)),
+            )
+        quantity = st.multiselect("Quantity", ["VOLUME_SUM", "OCCUPANCY_AVG", "SPEED_FIVE_MINS"])
+        days = st.multiselect("Days", get_available_days())
+        station_data_button = st.button("Load Station Data", type="primary")
+
+    with col2:
+        map_placeholder = st.empty()
 
     with map_placeholder:
         if station:
@@ -73,15 +78,13 @@ def main():
         else:
             map_district_summary(df_station_metadata)
 
-    days = st.multiselect("Days", get_available_days())
-
-    station_data_button = st.button("Load Station Data", type="primary")
-
     error_placeholder = st.empty()
     plot_placeholder = st.empty()
 
     if station_data_button:
         error_messages = []
+        if not station:
+            error_messages.append("- Please select a station to proceed.")
         if len(quantity) == 0 or len(quantity) > 2:
             error_messages.append("- Please select one or two quantities to proceed.")
         if not lane:

From 529adbe3ff25bc390c5fc51bc487dd5b5f616837 Mon Sep 17 00:00:00 2001
From: Luis Alvergue <luis@compiler.la>
Date: Tue, 5 Aug 2025 19:38:31 +0000
Subject: [PATCH 6/6] chore(5-min-viz): clear out stale district/station info

if a station is selected and then de-selected, some information
associated with the station is not cleared, i.e., Absolute Post Mile
and Lanes stay greyed out, Streamlit's sign of "stale data". it turns
out that the st.empty() method sometimes needs some time to take effect
on the front-end. adding a small delay ensures that the DOM is ready
for st.empty().
---
 .../src/pems_streamlit/apps/districts/app_stations.py           | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/pems_streamlit/src/pems_streamlit/apps/districts/app_stations.py b/pems_streamlit/src/pems_streamlit/apps/districts/app_stations.py
index f680369..d677ef7 100644
--- a/pems_streamlit/src/pems_streamlit/apps/districts/app_stations.py
+++ b/pems_streamlit/src/pems_streamlit/apps/districts/app_stations.py
@@ -1,4 +1,5 @@
 import re
+import time
 
 import pandas as pd
 import streamlit as st
@@ -72,6 +73,7 @@ def main():
         map_placeholder = st.empty()
 
     with map_placeholder:
+        time.sleep(0.1)
         if station:
             df_selected_station = df_station_metadata.query("STATION_ID == @station")
             map_station_summary(df_selected_station)