Update src/streamlit_app.py

src/streamlit_app.py

@@ -40,89 +40,106 @@ if st.button("Refresh Data"):
 
 df = fetch_cwa_alarms()
 
+# --- Sidebar for Filters ---
+with st.sidebar:
+    st.header("🔍 Filter Options")
+    if not df.empty:
+        # Get unique values for filter controls
+        msg_types = sorted(df['msgType'].unique())
+        msg_numbers = sorted(df['msgNo'].unique())
+
+        # Create user controls
+        selected_types = st.multiselect(
+            'Message Type(s)',
+            options=msg_types,
+            default=msg_types,
+            help="Filter reports by their type (e.g., Alert, Update)."
+        )
+        selected_numbers = st.multiselect(
+            'Message Number(s)',
+            options=msg_numbers,
+            default=msg_numbers,
+            help="Filter reports by their sequence number. '1' is the initial alert."
+        )
+    else:
+        st.info("Waiting for data to load filters...")
+
+
+# --- Main Content Area ---
 if df.empty:
     st.warning("No alarm data is currently available or the API could not be reached.")
 else:
-    # --- Data Preparation ---
-    # Convert data types
-    df['originTime'] = pd.to_datetime(df['originTime'])
-    df['magnitudeValue'] = pd.to_numeric(df['magnitudeValue'])
-    df['depth'] = pd.to_numeric(df['depth'])
-
-    # --- Interactive Map Display ---
-    st.header("Earthquake Epicenter Map")
-    st.markdown("Each circle represents an earthquake epicenter. Updates for the same event are grouped. Hover to see all affected areas.")
-
-    # To show one point per earthquake, we find the most significant report (highest magnitude) for each unique origin time.
-    map_df = df.sort_values('magnitudeValue', ascending=False).drop_duplicates(subset='originTime').copy()
-
-    # For the hover text, we group all locations for each unique origin time.
-    table_df_for_hover = df.explode('locationDesc')
-    hover_areas = table_df_for_hover.groupby('originTime')['locationDesc'].apply(lambda x: ', '.join(set(x))).reset_index(name="Affected Areas")
-    map_df = pd.merge(map_df, hover_areas, on='originTime')
-
-    fig = px.scatter_mapbox(
-        map_df,
-        lat="epicenterLat",
-        lon="epicenterLon",
-        size="magnitudeValue",
-        color="depth",
-        color_continuous_scale=px.colors.sequential.OrRd,
-        size_max=25,
-        zoom=6.5,
-        center={"lat": 23.9, "lon": 121.5},
-        mapbox_style="open-street-map",
-        hover_name="originTime",
-        hover_data={
-            "Affected Areas": True,
-            "magnitudeValue": ':.1f',
-            "depth": True,
-            "epicenterLat": False,
-            "epicenterLon": False
-        },
-        labels={"depth": "Depth (km)", "magnitudeValue": "Magnitude"}
-    )
-    fig.update_layout(
-        margin={"r": 0, "t": 40, "l": 0, "b": 0},
-        legend_title_text='Magnitude'
-    )
-    st.plotly_chart(fig, use_container_width=True)
-    
-    # --- Detailed Table Display (MODIFIED SECTION) ---
-    st.header("Detailed Alarm Reports")
-    st.markdown("This table shows all alarm reports, including updates. Areas for each report are listed together.")
-
-    # Create a new column by joining the list of areas into a single string.
-    df['Alarm Areas'] = df['locationDesc'].apply(lambda areas: ', '.join(areas))
-    
-    # Select and rename the requested columns for a clean display.
-    display_df = df[[
-        "originTime",
-        "identifier",
-        "msgType",
-        "msgNo",
-        "magnitudeValue",
-        "depth",
-        "epicenterLat",
-        "epicenterLon",
-        "Alarm Areas"  # Use the new joined column
-    ]].rename(columns={
-        "originTime": "Origin Time",
-        "identifier": "Report ID",
-        "msgType": "Message Type",
-        "msgNo": "Message No.",
-        "magnitudeValue": "Magnitude",
-        "depth": "Depth (km)",
-        "epicenterLat": "Latitude",
-        "epicenterLon": "Longitude",
-        "Alarm Areas": "Alarm Areas"
-    })
-    
-    st.dataframe(
-        display_df.sort_values(by=["Origin Time", "Message No."], ascending=[False, True]),
-        use_container_width=True,
-        hide_index=True,
-        column_config={
-            "Origin Time": st.column_config.DatetimeColumn(format="YYYY-MM-DD HH:mm:ss")
-        }
-    )
+    # --- Apply Filters ---
+    # Filter the DataFrame based on user selections in the sidebar
+    filtered_df = df[
+        df['msgType'].isin(selected_types) &
+        df['msgNo'].isin(selected_numbers)
+    ]
+
+    if filtered_df.empty:
+        st.warning("No data matches your current filter settings. Please adjust the filters in the sidebar.")
+    else:
+        # Prepare data using the filtered DataFrame
+        filtered_df['originTime'] = pd.to_datetime(filtered_df['originTime'])
+        filtered_df['magnitudeValue'] = pd.to_numeric(filtered_df['magnitudeValue'])
+        filtered_df['depth'] = pd.to_numeric(filtered_df['depth'])
+
+        # --- Interactive Map Display ---
+        st.header("Earthquake Epicenter Map")
+        st.markdown("Each circle represents an earthquake epicenter. The map updates based on your filters.")
+
+        map_df = filtered_df.sort_values('magnitudeValue', ascending=False).drop_duplicates(subset='originTime').copy()
+        table_df_for_hover = filtered_df.explode('locationDesc')
+        hover_areas = table_df_for_hover.groupby('originTime')['locationDesc'].apply(lambda x: ', '.join(set(x))).reset_index(name="Affected Areas")
+        map_df = pd.merge(map_df, hover_areas, on='originTime')
+
+        fig = px.scatter_mapbox(
+            map_df,
+            lat="epicenterLat",
+            lon="epicenterLon",
+            size="magnitudeValue",
+            color="depth",
+            color_continuous_scale=px.colors.sequential.OrRd,
+            size_max=25,
+            zoom=6.5,
+            center={"lat": 23.9, "lon": 121.5},
+            mapbox_style="open-street-map",
+            hover_name="originTime",
+            hover_data={
+                "Affected Areas": True,
+                "magnitudeValue": ':.1f',
+                "depth": True,
+                "epicenterLat": False,
+                "epicenterLon": False
+            },
+            labels={"depth": "Depth (km)", "magnitudeValue": "Magnitude"}
+        )
+        fig.update_layout(
+            margin={"r": 0, "t": 40, "l": 0, "b": 0},
+            legend_title_text='Magnitude'
+        )
+        st.plotly_chart(fig, use_container_width=True)
+        
+        # --- Detailed Table Display ---
+        st.header("Detailed Alarm Reports")
+        st.markdown("This table shows all alarm reports matching your filters.")
+
+        filtered_df['Alarm Areas'] = filtered_df['locationDesc'].apply(lambda areas: ', '.join(areas))
+        
+        display_df = filtered_df[[
+            "originTime", "identifier", "msgType", "msgNo", "magnitudeValue",
+            "depth", "epicenterLat", "epicenterLon", "Alarm Areas"
+        ]].rename(columns={
+            "originTime": "Origin Time", "identifier": "Report ID", "msgType": "Message Type",
+            "msgNo": "Message No.", "magnitudeValue": "Magnitude", "depth": "Depth (km)",
+            "epicenterLat": "Latitude", "epicenterLon": "Longitude", "Alarm Areas": "Alarm Areas"
+        })
+        
+        st.dataframe(
+            display_df.sort_values(by=["Origin Time", "Message No."], ascending=[False, True]),
+            use_container_width=True,
+            hide_index=True,
+            column_config={
+                "Origin Time": st.column_config.DatetimeColumn(format="YYYY-MM-DD HH:mm:ss")
+            }
+        )