ui changes

app.py

@@ -86,8 +86,14 @@ with col2:
         with st.expander("Learn more about O3", expanded=False):
             st.markdown(
                 """
-                *Ozone (O<sub>3</sub>)*: A harmful gas at ground level that can irritate the respiratory system and aggravate asthma.<br>
-                **Good/Bad**: "Good" means safe levels for most people, while "Bad" suggests harmful levels, especially for sensitive groups.
+                *Ozone (O<sub>3</sub>)* is a gas that occurs both in the Earth's upper atmosphere and at ground level.
+                
+                **Levels interpretation:**
+                * <span style='color:#77C124'>**Good**</span> (< 120 µg/m³): Safe for most people. Ideal conditions for outdoor activities.
+                * <span style='color:#E68B0A'>**Medium**</span> (120-240 µg/m³): May cause breathing discomfort for sensitive groups. People with respiratory conditions should limit prolonged outdoor exposure.
+                * <span style='color:#E63946'>**Bad**</span> (> 240 µg/m³): Health alert! Everyone may experience breathing difficulties. Avoid outdoor activities, especially during peak sunlight hours.
+                
+                *Health Effects:* High levels can cause throat irritation, coughing, chest pain, and shortness of breath. Long-term exposure may lead to reduced lung function and chronic respiratory illness.
                 """,
                 unsafe_allow_html=True,
             )
@@ -103,8 +109,14 @@ with col2:
         with st.expander("Learn more about NO2", expanded=False):
             st.markdown(
                 """
-                *Nitrogen Dioxide (NO<sub>2</sub>)*: A toxic gas that contributes to lung irritation and worsens asthma and other respiratory issues.<br>
-                **Good/Bad**: "Good" means safe air quality, while "Bad" indicates levels that could cause respiratory problems, especially for vulnerable individuals.
+                *Nitrogen Dioxide (NO<sub>2</sub>)* is primarily produced by vehicles and industrial processes.
+                
+                **Levels interpretation:**
+                * <span style='color:#77C124'>**Good**</span> (< 40 µg/m³): Healthy air quality. No restrictions on outdoor activities.
+                * <span style='color:#E68B0A'>**Medium**</span> (40-80 µg/m³): Moderate pollution. Sensitive individuals should consider reducing prolonged outdoor exertion.
+                * <span style='color:#E63946'>**Bad**</span> (> 80 µg/m³): Poor air quality. Everyone should reduce outdoor activities, particularly near high-traffic areas.
+                
+                *Health Effects:* Can inflame airways, aggravate asthma, and increase susceptibility to respiratory infections. Long-term exposure may affect lung development in children and contribute to heart disease.
                 """,
                 unsafe_allow_html=True,
             )
@@ -169,6 +181,35 @@ with col2:
         )
     )
 
+    # Add legend annotations
+    fig_o3.add_annotation(
+        x=1, y=1,
+        xref="paper", yref="paper",
+        text="<span style='color:#77C124'>■</span> Good",
+        showarrow=False,
+        yshift=10,
+        xshift=-10,
+        align="right"
+    )
+    fig_o3.add_annotation(
+        x=1, y=1,
+        xref="paper", yref="paper",
+        text="<span style='color:#E68B0A'>■</span> Medium",
+        showarrow=False,
+        yshift=-10,
+        xshift=-10,
+        align="right"
+    )
+    fig_o3.add_annotation(
+        x=1, y=1,
+        xref="paper", yref="paper",
+        text="<span style='color:#E63946'>■</span> Bad",
+        showarrow=False,
+        yshift=-30,
+        xshift=-10,
+        align="right"
+    )
+
     fig_o3.update_layout(
         plot_bgcolor="rgba(0, 0, 0, 0)",
         paper_bgcolor="rgba(0, 0, 0, 0)",
@@ -185,6 +226,7 @@ with col2:
             tickcolor="gray",
         ),
         showlegend=False,  # Disable legend
+        margin=dict(r=100)  # Add right margin for legend
     )
 
     st.plotly_chart(fig_o3, key="fig_o3")
@@ -235,6 +277,35 @@ with col2:
         )
     )
 
+    # Add legend annotations
+    fig_no2.add_annotation(
+        x=1, y=1,
+        xref="paper", yref="paper",
+        text="<span style='color:#77C124'>■</span> Good",
+        showarrow=False,
+        yshift=10,
+        xshift=-10,
+        align="right"
+    )
+    fig_no2.add_annotation(
+        x=1, y=1,
+        xref="paper", yref="paper",
+        text="<span style='color:#E68B0A'>■</span> Medium",
+        showarrow=False,
+        yshift=-10,
+        xshift=-10,
+        align="right"
+    )
+    fig_no2.add_annotation(
+        x=1, y=1,
+        xref="paper", yref="paper",
+        text="<span style='color:#E63946'>■</span> Bad",
+        showarrow=False,
+        yshift=-30,
+        xshift=-10,
+        align="right"
+    )
+
     fig_no2.update_layout(
         plot_bgcolor="rgba(0, 0, 0, 0)",
         paper_bgcolor="rgba(0, 0, 0, 0)",
@@ -251,6 +322,7 @@ with col2:
             tickcolor="gray",
         ),
         showlegend=False,  # Disable legend
+        margin=dict(r=100)  # Add right margin for legend
     )
 
     st.plotly_chart(fig_no2, key="fig_no2")

predictions_history.csv

@@ -1,12 +1,6 @@
 pollutant,date_predicted,date,prediction_value
-O3,2025-03-07,2025-03-08,37.82937461928374
-NO2,2025-03-07,2025-03-08,18.27364918273649
-O3,2025-03-07,2025-03-09,40.17283746918274
-NO2,2025-03-07,2025-03-09,15.82736491827365
 O3,2025-03-07,2025-03-10,29.12736491827365
 NO2,2025-03-07,2025-03-10,32.17283746918274
-O3,2025-03-08,2025-03-09,35.28374691827365
-NO2,2025-03-08,2025-03-09,14.72837469182736
 O3,2025-03-08,2025-03-10,24.83746918273649
 NO2,2025-03-08,2025-03-10,29.18273649182736
 O3,2025-03-08,2025-03-11,48.17283746918274

src/helper_functions.py

@@ -45,29 +45,29 @@ def pollution_box(label: str, value: str, delta: str, threshold: float) -> None:
     """
     Create a pollution metric box with a side-by-side layout and fixed width.
 
-    This function generates a styled markdown box displaying pollution level status, value, and other related information.
-
     Parameters:
     ----------
     label : str
         The text label representing the type of pollution or metric.
-
     value : str
-        The value of the pollution metric, typically a string that can be converted to a float.
-
+        The value of the pollution metric.
     delta : str
-        A string representing the change in pollution level, though not currently used in the rendering.
-
+        The change in pollution level.
     threshold : float
-        The threshold value to determine if the pollution level is "Good" or "Bad".
-
-    Returns:
-    -------
-    None
+        The threshold value to determine pollution level status.
     """
-    # Determine if the pollution level is "Good" or "Bad"
-    status = "Good" if float(value.split()[0]) < threshold else "Bad"
-    status_color = "#77C124" if status == "Good" else "#E68B0A"
+    current_value = float(value.split()[0])
+    
+    # Determine status and color based on the same logic as get_simple_color_scale
+    if current_value < threshold:
+        status = "Good"
+        status_color = "#77C124"
+    elif current_value < 2 * threshold:
+        status = "Medium"
+        status_color = "#E68B0A"
+    else:
+        status = "Bad"
+        status_color = "#E63946"
 
     # Render the pollution box
     st.markdown(
@@ -82,9 +82,9 @@ def pollution_box(label: str, value: str, delta: str, threshold: float) -> None:
             padding: 15px;
             margin-bottom: 10px;
         ">
-            <h4 style="font-size: 24px; font-weight: bold; margin: 0;">{label}</h4>  <!-- Bigger label -->
-            <p style="font-size: 36px; font-weight: bold; color: {status_color}; margin: 0;">{status}</p>  <!-- Good/Bad with color -->
-            <p style="font-size: 18px; margin: 0;">{value}</p>  <!-- Smaller value where delta used to be -->
+            <h4 style="font-size: 24px; font-weight: bold; margin: 0;">{label}</h4>
+            <p style="font-size: 36px; font-weight: bold; color: {status_color}; margin: 0;">{status}</p>
+            <p style="font-size: 18px; margin: 0;">{value}</p>
         </div>
     """,
         unsafe_allow_html=True,