Update air_quality_map.py

air_quality_map.py

@@ -241,7 +241,7 @@ class AirQualityApp:
         """Fetch the latest AQI data for monitors"""
         # If we don't have API credentials, use mock data
         if not EMAIL or not API_KEY:
-            return []  # We don't have mock AQI data for simplicity
+            return self.mock_get_aqi_data(state_code, county_code, parameter_code)
         
         # Convert state code to numeric format for API
         api_state_code = state_code
@@ -285,20 +285,68 @@ class AirQualityApp:
             return aqi_data
         except Exception as e:
             print(f"Error fetching AQI data: {e}")
-            return []
+            return self.mock_get_aqi_data(state_code, county_code, parameter_code)
     
-    def create_map(self, state_code, county_code=None, parameter_code=None):
-        """Create a map with air quality monitoring stations"""
-        # IMPORTANT: We don't pass county_code to get_monitors anymore since the API doesn't support it
+    def mock_get_aqi_data(self, state_code, county_code=None, parameter_code=None):
+        """Generate mock AQI data for demonstration"""
+        # Get monitors first
+        monitors = self.mock_get_monitors(state_code, county_code, parameter_code)
+        
+        # Create mock AQI data for each monitor
+        mock_aqi_data = []
+        
+        for monitor in monitors:
+            # Create 5 days of mock readings for each monitor
+            for i in range(5):
+                # Base AQI value depends on the parameter
+                base_aqi = 0
+                if monitor.get("parameter_code") == "88101":  # PM2.5
+                    base_aqi = 35
+                elif monitor.get("parameter_code") == "44201":  # Ozone
+                    base_aqi = 45
+                elif monitor.get("parameter_code") == "42401":  # SO2
+                    base_aqi = 25
+                else:
+                    base_aqi = 30
+                
+                # Vary the AQI by +/- 20 points randomly
+                import random
+                aqi_value = max(0, min(300, base_aqi + random.randint(-20, 20)))
+                
+                # Date is "2024-04-XX" where XX starts from 10 and goes back
+                date = f"2024-04-{14-i:02d}"
+                
+                mock_aqi_data.append({
+                    "state_code": monitor.get("state_code"),
+                    "county_code": monitor.get("county_code"),
+                    "site_number": monitor.get("site_number"),
+                    "parameter_code": monitor.get("parameter_code"),
+                    "parameter_name": monitor.get("parameter_name"),
+                    "date_local": date,
+                    "aqi": aqi_value,
+                    "category": self.get_aqi_category(aqi_value),
+                    "city_name": monitor.get("city_name", "Unknown"),
+                    "local_site_name": monitor.get("local_site_name", "Unknown")
+                })
+        
+        return mock_aqi_data
+    
+    def create_map_and_data(self, state_code, county_code=None, parameter_code=None):
+        """Create a map with air quality monitoring stations and separate data for display"""
+        # Get monitors (don't pass county_code to API)
         monitors = self.get_monitors(state_code, parameter_code=parameter_code)
         
         if not monitors:
-            return "No monitoring stations found for the selected criteria."
+            return {
+                "map": "No monitoring stations found for the selected criteria.",
+                "data_html": "",
+                "legend": ""
+            }
         
         # Convert to DataFrame for easier manipulation
         df = pd.DataFrame(monitors)
         
-        # Now filter by county if provided - do this AFTER getting the monitors
+        # Filter by county if provided - after getting the monitors
         if county_code:
             print(f"Filtering by county_code: {county_code}")
             county_code_str = str(county_code)
@@ -306,31 +354,40 @@ class AirQualityApp:
             print(f"After filtering, {len(df)} monitors remain")
             
             if len(df) == 0:
-                return "No monitoring stations found for the selected county."
+                return {
+                    "map": "No monitoring stations found for the selected county.",
+                    "data_html": "",
+                    "legend": ""
+                }
         
         # Create a map centered on the mean latitude and longitude
         center_lat = df["latitude"].mean()
         center_lon = df["longitude"].mean()
         
-        # Create a map with a specific width and height - make it bigger
-        m = folium.Map(location=[center_lat, center_lon], zoom_start=7, width='100%', height=700)
+        # Create a map with a specific width and height
+        m = folium.Map(location=[center_lat, center_lon], zoom_start=7, width='100%', height=600)
         
         # Add a marker cluster
         marker_cluster = MarkerCluster().add_to(m)
         
-        # Get latest AQI data if credentials are provided
-        aqi_data = {}
+        # Get latest AQI data
         if EMAIL and API_KEY:
-            # Again, don't pass county_code to API
             aqi_results = self.get_latest_aqi(state_code, parameter_code=parameter_code)
-            # Create a lookup dictionary by site ID
-            for item in aqi_results:
-                site_id = f"{item['state_code']}-{item['county_code']}-{item['site_number']}"
-                if site_id not in aqi_data:
-                    aqi_data[site_id] = []
-                aqi_data[site_id].append(item)
-        
-        # Add markers for each monitoring station
+        else:
+            aqi_results = self.mock_get_aqi_data(state_code, county_code, parameter_code)
+        
+        # Create a lookup dictionary by site ID
+        aqi_data = {}
+        for item in aqi_results:
+            site_id = f"{item['state_code']}-{item['county_code']}-{item['site_number']}"
+            if site_id not in aqi_data:
+                aqi_data[site_id] = []
+            aqi_data[site_id].append(item)
+        
+        # Initialize a list to collect all air quality readings for display in UI
+        all_readings = []
+        
+        # Add markers for each monitoring station with minimal popup content
         for _, row in df.iterrows():
             site_id = f"{row['state_code']}-{row['county_code']}-{row['site_number']}"
             
@@ -339,12 +396,22 @@ class AirQualityApp:
             
             # Get AQI data for this station if available
             station_aqi_data = aqi_data.get(site_id, [])
-            latest_aqi = None
-            aqi_category = None
             
-            # Create a table of pollutant readings if available
-            aqi_readings_html = ""
+            # Add all readings from this station to the collected data
+            for reading in station_aqi_data:
+                all_readings.append({
+                    "site_id": site_id,
+                    "site_name": row['local_site_name'],
+                    "city": row.get('city_name', 'N/A'),
+                    "county": row.get('county_name', 'N/A'),
+                    "state": row.get('state_name', 'N/A'),
+                    "date": reading.get('date_local', 'N/A'),
+                    "pollutant": reading.get('parameter_name', 'N/A'),
+                    "aqi": reading.get('aqi', 'N/A'),
+                    "category": self.get_aqi_category(reading.get('aqi', 0)) if reading.get('aqi') else 'N/A'
+                })
             
+            # Set marker color based on latest AQI if available
             if station_aqi_data:
                 # Sort by date (most recent first)
                 station_aqi_data.sort(key=lambda x: x.get('date_local', ''), reverse=True)
@@ -354,74 +421,88 @@ class AirQualityApp:
                     latest_aqi = station_aqi_data[0].get('aqi')
                     aqi_category = self.get_aqi_category(latest_aqi)
                     color = self.aqi_categories.get(aqi_category, "blue")
-                
-                # Create a table of readings
-                aqi_readings_html = """
-                <h4>Recent Air Quality Readings</h4>
-                <table style="width:100%; border-collapse: collapse; margin-top: 10px;">
-                <tr style="background-color: #f2f2f2;">
-                    <th style="padding: 8px; text-align: left; border: 1px solid #ddd;">Date</th>
-                    <th style="padding: 8px; text-align: left; border: 1px solid #ddd;">Pollutant</th>
-                    <th style="padding: 8px; text-align: left; border: 1px solid #ddd;">AQI</th>
-                    <th style="padding: 8px; text-align: left; border: 1px solid #ddd;">Category</th>
-                </tr>
-                """
-                
-                # Add up to 10 most recent readings
-                for i, reading in enumerate(station_aqi_data[:10]):
-                    date = reading.get('date_local', 'N/A')
-                    pollutant = reading.get('parameter_name', 'N/A')
-                    aqi_value = reading.get('aqi', 'N/A')
-                    category = self.get_aqi_category(aqi_value) if aqi_value and aqi_value != 'N/A' else 'N/A'
-                    
-                    row_style = ' style="background-color: #f2f2f2;"' if i % 2 == 0 else ''
-                    aqi_readings_html += f"""
-                    <tr{row_style}>
-                        <td style="padding: 8px; text-align: left; border: 1px solid #ddd;">{date}</td>
-                        <td style="padding: 8px; text-align: left; border: 1px solid #ddd;">{pollutant}</td>
-                        <td style="padding: 8px; text-align: left; border: 1px solid #ddd;">{aqi_value}</td>
-                        <td style="padding: 8px; text-align: left; border: 1px solid #ddd;">{category}</td>
-                    </tr>
-                    """
-                
-                aqi_readings_html += "</table>"
-                
-                # If there are more readings than what we showed
-                if len(station_aqi_data) > 10:
-                    aqi_readings_html += f"<p><em>Showing 10 of {len(station_aqi_data)} readings</em></p>"
             
-            # Create popup content with detailed information
+            # Create simple popup content with just station name and link to data
             popup_content = f"""
-            <div style="min-width: 300px;">
-                <h3>{row['local_site_name']}</h3>
+            <div>
+                <h4>{row['local_site_name']}</h4>
                 <p><strong>Site ID:</strong> {site_id}</p>
-                <p><strong>Address:</strong> {row.get('address', 'N/A')}</p>
-                <p><strong>City:</strong> {row.get('city_name', 'N/A')}</p>
-                <p><strong>County:</strong> {row.get('county_name', 'N/A')}</p>
-                <p><strong>State:</strong> {row.get('state_name', 'N/A')}</p>
-                <p><strong>Parameter:</strong> {row['parameter_name']}</p>
-                <p><strong>Coordinates:</strong> {row['latitude']}, {row['longitude']}</p>
-                {aqi_readings_html}
+                <p>See detailed data in the panel below.</p>
             </div>
             """
             
-            # Create a larger popup for detailed data
-            popup = folium.Popup(popup_content, max_width=500)
-            
-            # Add marker to cluster
+            # Add marker to cluster with simple popup
+            popup = folium.Popup(popup_content, max_width=300)
             folium.Marker(
                 location=[row["latitude"], row["longitude"]],
                 popup=popup,
                 icon=folium.Icon(color=color, icon="cloud"),
             ).add_to(marker_cluster)
         
-        # Return map HTML and legend HTML separately
-        map_html = m._repr_html_()
+        # Sort all readings by date (most recent first)
+        all_readings.sort(key=lambda x: x.get('date', ''), reverse=True)
+        
+        # Convert all readings to HTML table for display in UI
+        data_html = self.create_readings_table_html(all_readings)
+        
+        # Return map HTML, data HTML, and legend HTML separately
+        return {
+            "map": m._repr_html_(),
+            "data_html": data_html,
+            "legend": self.create_legend_html()
+        }
+    
+    def create_readings_table_html(self, readings):
+        """Create an HTML table of air quality readings"""
+        if not readings:
+            return "<p>No air quality data available for the selected criteria.</p>"
+        
+        html = """
+        <div style="max-height: 500px; overflow-y: auto;">
+            <h3>Air Quality Readings</h3>
+            <table style="width:100%; border-collapse: collapse; margin-top: 10px;">
+            <tr style="background-color: #f2f2f2; position: sticky; top: 0;">
+                <th style="padding: 8px; text-align: left; border: 1px solid #ddd;">Station</th>
+                <th style="padding: 8px; text-align: left; border: 1px solid #ddd;">Location</th>
+                <th style="padding: 8px; text-align: left; border: 1px solid #ddd;">Date</th>
+                <th style="padding: 8px; text-align: left; border: 1px solid #ddd;">Pollutant</th>
+                <th style="padding: 8px; text-align: left; border: 1px solid #ddd;">AQI</th>
+                <th style="padding: 8px; text-align: left; border: 1px solid #ddd;">Category</th>
+            </tr>
+        """
+        
+        for i, reading in enumerate(readings):
+            # Get background color for AQI category
+            category = reading.get('category', 'N/A')
+            bg_color = self.aqi_legend_colors.get(category, "#ffffff")
+            
+            # For better readability, use a lighter version of the color
+            if category != 'Good' and category != 'N/A':
+                # Add alpha transparency to the color
+                bg_color = bg_color + "40"  # 40 is 25% opacity in hex
+            
+            # Alternate row colors for better readability
+            row_style = ' style="background-color: #f9f9f9;"' if i % 2 == 0 else ''
+            
+            location = f"{reading.get('city', 'N/A')}, {reading.get('state', 'N/A')}"
+            
+            html += f"""
+            <tr{row_style}>
+                <td style="padding: 8px; text-align: left; border: 1px solid #ddd;">{reading.get('site_name', 'N/A')}</td>
+                <td style="padding: 8px; text-align: left; border: 1px solid #ddd;">{location}</td>
+                <td style="padding: 8px; text-align: left; border: 1px solid #ddd;">{reading.get('date', 'N/A')}</td>
+                <td style="padding: 8px; text-align: left; border: 1px solid #ddd;">{reading.get('pollutant', 'N/A')}</td>
+                <td style="padding: 8px; text-align: left; border: 1px solid #ddd;">{reading.get('aqi', 'N/A')}</td>
+                <td style="padding: 8px; text-align: left; border: 1px solid #ddd; background-color: {bg_color};">{category}</td>
+            </tr>
+            """
         
-        # Create legend HTML outside the map
-        legend_html = self.create_legend_html()
+        html += """
+            </table>
+        </div>
+        """
         
-        return {"map": map_html, "legend": legend_html}
+        return html
     
     def create_legend_html(self):
         """Create the HTML for the AQI legend"""
@@ -443,19 +524,22 @@ class AirQualityApp:
     
     def get_aqi_category(self, aqi_value):
         """Determine AQI category based on value"""
-        aqi = int(aqi_value)
-        if aqi <= 50:
-            return "Good"
-        elif aqi <= 100:
-            return "Moderate"
-        elif aqi <= 150:
-            return "Unhealthy for Sensitive Groups"
-        elif aqi <= 200:
-            return "Unhealthy"
-        elif aqi <= 300:
-            return "Very Unhealthy"
-        else:
-            return "Hazardous"
+        try:
+            aqi = int(aqi_value)
+            if aqi <= 50:
+                return "Good"
+            elif aqi <= 100:
+                return "Moderate"
+            elif aqi <= 150:
+                return "Unhealthy for Sensitive Groups"
+            elif aqi <= 200:
+                return "Unhealthy"
+            elif aqi <= 300:
+                return "Very Unhealthy"
+            else:
+                return "Hazardous"
+        except (ValueError, TypeError):
+            return "N/A"
     
     def mock_get_counties(self, state_code):
         """Return mock county data for the specified state"""
@@ -488,6 +572,7 @@ class AirQualityApp:
             numeric_state_code = state_code_mapping.get(state_code, "01")  # Default to "01" if not found
         else:
             numeric_state_code = state_code
+        
         # Sample data for California
         if state_code == "CA" or numeric_state_code == "06":
             monitors = [
@@ -503,6 +588,8 @@ class AirQualityApp:
                     "local_site_name": "Los Angeles - North Main Street",
                     "address": "1630 North Main Street",
                     "city_name": "Los Angeles",
+                    "county_name": "Los Angeles",
+                    "state_name": "California",
                     "cbsa_name": "Los Angeles-Long Beach-Anaheim",
                     "date_established": "1998-01-01",
                     "last_sample_date": "2024-04-10"
@@ -519,6 +606,8 @@ class AirQualityApp:
                     "local_site_name": "Los Angeles - North Main Street",
                     "address": "1630 North Main Street",
                     "city_name": "Los Angeles",
+                    "county_name": "Los Angeles",
+                    "state_name": "California",
                     "cbsa_name": "Los Angeles-Long Beach-Anaheim",
                     "date_established": "1998-01-01",
                     "last_sample_date": "2024-04-10"
@@ -535,6 +624,8 @@ class AirQualityApp:
                     "local_site_name": "Sacramento - T Street",
                     "address": "1309 T Street",
                     "city_name": "Sacramento",
+                    "county_name": "Sacramento",
+                    "state_name": "California",
                     "cbsa_name": "Sacramento-Roseville",
                     "date_established": "1999-03-01",
                     "last_sample_date": "2024-04-10"
@@ -551,6 +642,8 @@ class AirQualityApp:
                     "local_site_name": "San Diego - Beardsley Street",
                     "address": "1110 Beardsley Street",
                     "city_name": "San Diego",
+                    "county_name": "San Diego",
+                    "state_name": "California",
                     "cbsa_name": "San Diego-Carlsbad",
                     "date_established": "1999-04-15",
                     "last_sample_date": "2024-04-10"
@@ -571,6 +664,8 @@ class AirQualityApp:
                     "local_site_name": "New York - PS 59",
                     "address": "228 East 57th Street",
                     "city_name": "New York",
+                    "county_name": "New York",
+                    "state_name": "New York",
                     "cbsa_name": "New York-Newark-Jersey City",
                     "date_established": "1999-07-15",
                     "last_sample_date": "2024-04-10"
@@ -587,6 +682,8 @@ class AirQualityApp:
                     "local_site_name": "New York - IS 52",
                     "address": "681 Kelly Street",
                     "city_name": "Bronx",
+                    "county_name": "Bronx",
+                    "state_name": "New York",
                     "cbsa_name": "New York-Newark-Jersey City",
                     "date_established": "1998-01-01",
                     "last_sample_date": "2024-04-10"
@@ -607,6 +704,8 @@ class AirQualityApp:
                     "local_site_name": "Houston - Clinton Drive",
                     "address": "9525 Clinton Drive",
                     "city_name": "Houston",
+                    "county_name": "Harris",
+                    "state_name": "Texas",
                     "cbsa_name": "Houston-The Woodlands-Sugar Land",
                     "date_established": "1997-09-01",
                     "last_sample_date": "2024-04-10"
@@ -623,6 +722,8 @@ class AirQualityApp:
                     "local_site_name": "Dallas - Hinton Street",
                     "address": "1415 Hinton Street",
                     "city_name": "Dallas",
+                    "county_name": "Dallas",
+                    "state_name": "Texas",
                     "cbsa_name": "Dallas-Fort Worth-Arlington",
                     "date_established": "1998-01-01",
                     "last_sample_date": "2024-04-10"
@@ -643,6 +744,8 @@ class AirQualityApp:
                     "local_site_name": f"{self.states.get(state_code, 'Unknown')} - Station 1",
                     "address": "123 Main Street",
                     "city_name": "City 1",
+                    "county_name": "County 1",
+                    "state_name": self.states.get(state_code, "Unknown"),
                     "cbsa_name": f"{self.states.get(state_code, 'Unknown')} Metro Area",
                     "date_established": "2000-01-01",
                     "last_sample_date": "2024-04-10"
@@ -659,6 +762,8 @@ class AirQualityApp:
                     "local_site_name": f"{self.states.get(state_code, 'Unknown')} - Station 2",
                     "address": "456 Oak Street",
                     "city_name": "City 2",
+                    "county_name": "County 2",
+                    "state_name": self.states.get(state_code, "Unknown"),
                     "cbsa_name": f"{self.states.get(state_code, 'Unknown')} Metro Area",
                     "date_established": "2000-01-01",
                     "last_sample_date": "2024-04-10"
@@ -673,97 +778,4 @@ class AirQualityApp:
         if parameter_code:
             monitors = [m for m in monitors if m["parameter_code"] == parameter_code]
             
-        return monitors
-
-def create_air_quality_map_ui():
-    """Create the Gradio interface for the Air Quality Map application"""
-    app = AirQualityApp()
-    
-    def update_counties(state_code):
-        """Callback to update counties dropdown when state changes"""
-        counties = app.get_counties(state_code)
-        return gr.Dropdown(choices=counties)
-    
-    def show_map(state, county=None, parameter=None):
-        """Callback to generate and display the map"""
-        # Extract code from county string if provided
-        county_code = None
-        if county and ":" in county:
-            county_code = county.split(":")[0].strip()
-            
-        # Extract code from parameter string if provided
-        parameter_code = None
-        if parameter and ":" in parameter:
-            parameter_code = parameter.split(":")[0].strip()
-            
-        # Generate the map
-        result = app.create_map(state, county_code, parameter_code)
-        
-        if isinstance(result, dict):
-            # Return the combined HTML
-            return result["map"]
-        else:
-            # Return error message or whatever was returned
-            return result
-    
-    # Create the UI
-    with gr.Blocks(title="Air Quality Monitoring Stations") as interface:
-        gr.Markdown("# NOAA Air Quality Monitoring Stations Map")
-        gr.Markdown("""
-        This application displays air quality monitoring stations in the United States.
-        
-        **Note:** To use the actual EPA AQS API, you need to register for an API key and set 
-        `EPA_AQS_EMAIL` and `EPA_AQS_API_KEY` environment variables in your Hugging Face Space.
-        
-        For demonstration without an API key, the app shows sample data for California (CA), New York (NY), and Texas (TX).
-        """)
-        
-        with gr.Row():
-            with gr.Column(scale=1):
-                # State dropdown with default value
-                state_dropdown = gr.Dropdown(
-                    choices=list(app.states.keys()),
-                    label="Select State",
-                    value="CA"
-                )
-                
-                # County dropdown with mock counties for the default state
-                county_dropdown = gr.Dropdown(
-                    choices=app.mock_get_counties("CA"),
-                    label="Select County (Optional)",
-                    allow_custom_value=True
-                )
-                
-                # Parameter dropdown (pollutant type)
-                parameter_dropdown = gr.Dropdown(
-                    choices=app.mock_get_parameters(),
-                    label="Select Pollutant (Optional)",
-                    allow_custom_value=True
-                )
-                
-                # Button to generate map
-                map_button = gr.Button("Show Map")
-            
-            # HTML component to display the map in a larger column
-            with gr.Column(scale=3):
-                map_html = gr.HTML(label="Air Quality Monitoring Stations Map")
-        
-        # Set up event handlers
-        state_dropdown.change(
-            fn=update_counties,
-            inputs=state_dropdown,
-            outputs=county_dropdown
-        )
-        
-        map_button.click(
-            fn=show_map,
-            inputs=[state_dropdown, county_dropdown, parameter_dropdown],
-            outputs=map_html
-        )
-    
-    return interface
-
-# Create and launch the app
-if __name__ == "__main__":
-    air_quality_map_ui = create_air_quality_map_ui()
-    air_quality_map_ui.launch()
+        return monitors