Refactor popup creation in WeatherMapManager for compact layout and improved readability

src/geovisor/map_manager.py

@@ -950,142 +950,131 @@ class WeatherMapManager:
             return 'green'    # Calm winds
 
     def _create_enhanced_popup(self, city: Dict, mcp_data: Dict = None) -> str:
-        """Create comprehensive Folium-compatible popup with all weather data"""
+        """Create compact horizontal-layout popup for better map integration"""
         try:
             city_name = city.get('name', 'Unknown City').title()
             forecast = city.get('forecast', [])
             
             if not forecast:
                 return f"""
-                <div style="width: 320px;">
-                    <h3 style="color: #2c3e50; margin-bottom: 10px;">📍 {city_name}</h3>
-                    <p>No weather data available</p>
+                <div style="width: 320px; font-family: Arial, sans-serif;">
+                    <h3 style="color: #2c3e50; margin-bottom: 10px; text-align: center;">📍 {city_name}</h3>
+                    <p style="text-align: center; color: #777;">No weather data available</p>
                 </div>
                 """
             
             current = forecast[0]
             next_period = forecast[1] if len(forecast) > 1 else {}
             
-            # Extract comprehensive weather data
+            # Extract essential weather data
             temperature = current.get('temperature', 'N/A')
             temp_unit = current.get('temperatureUnit', 'F')
             feels_like = current.get('apparentTemperature', {})
             feels_like_val = feels_like.get('value', 'N/A') if isinstance(feels_like, dict) else 'N/A'
             conditions = current.get('shortForecast', 'N/A')
-            detailed_forecast = current.get('detailedForecast', 'No details available')
             
-            # Wind data
+            # Compact weather details
             wind_speed = current.get('windSpeed', 'N/A')
             wind_direction = current.get('windDirection', '')
-            wind_gust = current.get('windGust', {})
-            wind_gust_val = wind_gust.get('value', 'N/A') if isinstance(wind_gust, dict) else 'N/A'
-            
-            # Precipitation and humidity
             precip_prob = current.get('precipitationProbability', 0) or 0
             humidity = current.get('relativeHumidity', {})
             humidity_val = humidity.get('value', 'N/A') if isinstance(humidity, dict) else 'N/A'
-            dewpoint = current.get('dewpoint', {})
-            dewpoint_val = dewpoint.get('value', 'N/A') if isinstance(dewpoint, dict) else 'N/A'
-            
-            # Pressure and visibility
-            pressure = current.get('barometricPressure', {})
-            pressure_val = pressure.get('value', 'N/A') if isinstance(pressure, dict) else 'N/A'
-            visibility = current.get('visibility', {})
-            visibility_val = visibility.get('value', 'N/A') if isinstance(visibility, dict) else 'N/A'
-            
-            # UV and other conditions
-            heat_index = current.get('heatIndex', {})
-            heat_index_val = heat_index.get('value', 'N/A') if isinstance(heat_index, dict) else 'N/A'
-            wind_chill = current.get('windChill', {})
-            wind_chill_val = wind_chill.get('value', 'N/A') if isinstance(wind_chill, dict) else 'N/A'
             
             # Get weather emoji
             weather_emoji = self._get_weather_emoji(conditions)
             
-            # Create comprehensive popup content
+            # Create compact horizontal popup content
             popup_content = f"""
-            <div style="width: 320px; font-family: Arial, sans-serif;">
-                <h3 style="color: #2c3e50; margin-bottom: 10px; border-bottom: 2px solid #3498db; padding-bottom: 5px;">
-                    {weather_emoji} {city_name}
-                </h3>
-                
-                <div style="background: #f8f9fa; padding: 8px; border-radius: 5px; margin-bottom: 8px;">
-                    <h4 style="color: #e74c3c; margin: 0 0 5px 0; font-size: 14px;">🌡️ Temperature</h4>
-                    <p style="margin: 2px 0; font-size: 12px;"><b>Current:</b> {temperature}°{temp_unit}</p>
-                    <p style="margin: 2px 0; font-size: 12px;"><b>Feels Like:</b> {feels_like_val}°{temp_unit}</p>
-                    <p style="margin: 2px 0; font-size: 12px;"><b>Dewpoint:</b> {dewpoint_val}°{temp_unit}</p>
-                    {f'<p style="margin: 2px 0; font-size: 12px;"><b>Heat Index:</b> {heat_index_val}°{temp_unit}</p>' if heat_index_val != 'N/A' else ''}
-                    {f'<p style="margin: 2px 0; font-size: 12px;"><b>Wind Chill:</b> {wind_chill_val}°{temp_unit}</p>' if wind_chill_val != 'N/A' else ''}
+            <div style="width: 320px; font-family: Arial, sans-serif; line-height: 1.2;">
+                <!-- Header with gradient background -->
+                <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 8px; border-radius: 8px 8px 0 0; text-align: center; margin-bottom: 8px;">
+                    <h3 style="margin: 0; font-size: 16px; font-weight: bold;">
+                        {weather_emoji} {city_name}
+                    </h3>
+                    <p style="margin: 2px 0 0 0; font-size: 11px; opacity: 0.9;">
+                        📍 {city.get('lat', 'N/A'):.3f}°, {city.get('lon', 'N/A'):.3f}°
+                    </p>
                 </div>
                 
-                <div style="background: #e8f4f8; padding: 8px; border-radius: 5px; margin-bottom: 8px;">
-                    <h4 style="color: #2980b9; margin: 0 0 5px 0; font-size: 14px;">🌤️ Conditions</h4>
-                    <p style="margin: 2px 0; font-size: 12px;"><b>Weather:</b> {conditions}</p>
-                    <p style="margin: 2px 0; font-size: 12px;"><b>Humidity:</b> {humidity_val}%</p>
-                    <p style="margin: 2px 0; font-size: 12px;"><b>Rain Chance:</b> {precip_prob}%</p>
-                    <p style="margin: 2px 0; font-size: 12px;"><b>Visibility:</b> {visibility_val} mi</p>
+                <!-- Main temperature and conditions in horizontal layout -->
+                <div style="display: flex; gap: 8px; margin-bottom: 8px;">
+                    <div style="flex: 1; background: #f8f9fa; padding: 8px; border-radius: 6px; border-left: 4px solid #e74c3c;">
+                        <div style="font-size: 20px; font-weight: bold; color: #e74c3c; margin-bottom: 2px;">
+                            {temperature}°{temp_unit}
+                        </div>
+                        <div style="font-size: 10px; color: #666;">
+                            Feels {feels_like_val}°{temp_unit}
+                        </div>
+                    </div>
+                    <div style="flex: 2; background: #e8f4f8; padding: 8px; border-radius: 6px; border-left: 4px solid #2980b9;">
+                        <div style="font-size: 12px; font-weight: bold; color: #2980b9; margin-bottom: 2px;">
+                            {conditions}
+                        </div>
+                        <div style="font-size: 10px; color: #666;">
+                            💧 {humidity_val}% • 🌧️ {precip_prob}%
+                        </div>
+                    </div>
                 </div>
                 
-                <div style="background: #fff3cd; padding: 8px; border-radius: 5px; margin-bottom: 8px;">
-                    <h4 style="color: #856404; margin: 0 0 5px 0; font-size: 14px;">💨 Wind & Pressure</h4>
-                    <p style="margin: 2px 0; font-size: 12px;"><b>Wind:</b> {wind_speed} {wind_direction}</p>
-                    {f'<p style="margin: 2px 0; font-size: 12px;"><b>Gusts:</b> {wind_gust_val} mph</p>' if wind_gust_val != 'N/A' else ''}
-                    <p style="margin: 2px 0; font-size: 12px;"><b>Pressure:</b> {pressure_val} mb</p>
-                </div>
+                <!-- Wind and additional data in compact grid -->
+                <div style="display: flex; gap: 6px; margin-bottom: 8px;">
+                    <div style="flex: 1; background: #fff3cd; padding: 6px; border-radius: 4px; text-align: center;">
+                        <div style="font-size: 11px; font-weight: bold; color: #856404;">💨 Wind</div>
+                        <div style="font-size: 10px; color: #666;">{wind_speed} {wind_direction}</div>
+                    </div>
             """
             
-            # Add next period forecast
+            # Add next period in compact format
             if next_period:
+                next_temp = next_period.get('temperature', 'N/A')
+                next_conditions = next_period.get('shortForecast', 'N/A')[:15] + ('...' if len(next_period.get('shortForecast', '')) > 15 else '')
+                next_name = next_period.get('name', 'Next')[:8]  # Truncate long period names
+                
                 popup_content += f"""
-                <div style="background: #e6f3ff; padding: 8px; border-radius: 5px; margin-bottom: 8px;">
-                    <h4 style="color: #0056b3; margin: 0 0 5px 0; font-size: 14px;">📅 {next_period.get('name', 'Next Period')}</h4>
-                    <p style="margin: 2px 0; font-size: 12px;"><b>Temp:</b> {next_period.get('temperature', 'N/A')}°{next_period.get('temperatureUnit', 'F')}</p>
-                    <p style="margin: 2px 0; font-size: 12px;"><b>Conditions:</b> {next_period.get('shortForecast', 'N/A')}</p>
-                    <p style="margin: 2px 0; font-size: 12px;"><b>Rain:</b> {next_period.get('precipitationProbability', 0)}%</p>
+                    <div style="flex: 2; background: #e6f3ff; padding: 6px; border-radius: 4px; text-align: center;">
+                        <div style="font-size: 11px; font-weight: bold; color: #0056b3;">📅 {next_name}</div>
+                        <div style="font-size: 10px; color: #666;">{next_temp}°F • {next_conditions}</div>
+                    </div>
                 </div>
                 """
+            else:
+                popup_content += "</div>"
             
-            # Add 5-day outlook if available
+            # Add compact 3-day outlook if available
             if len(forecast) > 2:
                 popup_content += f"""
-                <div style="background: #f0f8ff; padding: 8px; border-radius: 5px; margin-bottom: 8px;">
-                    <h4 style="color: #4169e1; margin: 0 0 5px 0; font-size: 14px;">📊 5-Day Outlook</h4>
+                <div style="background: #f0f8ff; padding: 6px; border-radius: 6px; margin-bottom: 8px;">
+                    <div style="font-size: 11px; font-weight: bold; color: #4169e1; margin-bottom: 4px; text-align: center;">
+                        📊 3-Day Outlook
+                    </div>
+                    <div style="display: flex; gap: 4px;">
                 """
-                for i, period in enumerate(forecast[2:6]):  # Next 4 periods
-                    period_name = period.get('name', f'Day {i+3}')
+                for i, period in enumerate(forecast[2:5]):  # Next 3 periods only
+                    period_name = period.get('name', f'D{i+3}')[:3]  # Very short names
                     period_temp = period.get('temperature', 'N/A')
-                    period_conditions = period.get('shortForecast', 'N/A')[:20] + ('...' if len(period.get('shortForecast', '')) > 20 else '')
-                    popup_content += f'<p style="margin: 1px 0; font-size: 11px;"><b>{period_name}:</b> {period_temp}°F - {period_conditions}</p>'
-                popup_content += "</div>"
-            
-            # Add detailed forecast text
-            if detailed_forecast and detailed_forecast != 'No details available':
-                truncated_forecast = detailed_forecast[:120] + ('...' if len(detailed_forecast) > 120 else '')
-                popup_content += f"""
-                <div style="background: #f5f5f5; padding: 8px; border-radius: 5px; margin-bottom: 8px;">
-                    <h4 style="color: #555; margin: 0 0 5px 0; font-size: 14px;">📝 Detailed Forecast</h4>
-                    <p style="margin: 0; font-size: 11px; line-height: 1.3;">{truncated_forecast}</p>
-                </div>
-                """
+                    period_emoji = self._get_weather_emoji(period.get('shortForecast', ''))
+                    
+                    popup_content += f"""
+                        <div style="flex: 1; text-align: center; background: rgba(255,255,255,0.7); padding: 4px; border-radius: 3px;">
+                            <div style="font-size: 9px; font-weight: bold;">{period_name}</div>
+                            <div style="font-size: 12px;">{period_emoji}</div>
+                            <div style="font-size: 9px;">{period_temp}°F</div>
+                        </div>
+                    """
+                popup_content += "</div></div>"
             
-            # Add comprehensive MCP data
+            # Add compact MCP data if available
             if mcp_data:
-                mcp_section = self._create_comprehensive_mcp_section(city_name, mcp_data)
+                mcp_section = self._create_compact_mcp_section(city_name, mcp_data)
                 if mcp_section:
                     popup_content += mcp_section
             
-            # Add coordinates and footer
+            # Compact footer
             popup_content += f"""
-                <div style="background: #e9ecef; padding: 6px; border-radius: 5px; margin-bottom: 5px;">
-                    <p style="margin: 0; font-size: 11px; text-align: center; color: #6c757d;">
-                        📍 Coordinates: {city.get('lat', 'N/A'):.3f}°, {city.get('lon', 'N/A'):.3f}°
-                    </p>
-                </div>
-                
-                <div style="text-align: center; margin-top: 5px;">
-                    <p style="font-size: 10px; color: #666; margin: 0;">
+                <div style="background: linear-gradient(90deg, #667eea 0%, #764ba2 100%); color: white; padding: 4px; border-radius: 0 0 8px 8px; text-align: center;">
+                    <div style="font-size: 9px; opacity: 0.9;">
                         🤖 Enhanced Weather Intelligence
-                    </p>
+                    </div>
                 </div>
             </div>
             """
@@ -1102,8 +1091,8 @@ class WeatherMapManager:
             </div>
             """
 
-    def _create_comprehensive_mcp_section(self, city_name: str, mcp_data: Dict) -> str:
-        """Create comprehensive MCP enhancement section with all available data"""
+    def _create_compact_mcp_section(self, city_name: str, mcp_data: Dict) -> str:
+        """Create compact MCP section for horizontal layout popup"""
         if not mcp_data:
             return ""
         
@@ -1118,215 +1107,53 @@ class WeatherMapManager:
             return ""
         
         mcp_html = """
-        <div style="background: linear-gradient(135deg, #667eea, #764ba2); color: white; padding: 10px; border-radius: 8px; margin-bottom: 8px;">
-            <h4 style="margin: 0 0 8px 0; color: white; font-size: 14px;">🔬 Enhanced Intelligence</h4>
+        <div style="background: linear-gradient(90deg, #667eea 0%, #764ba2 100%); color: white; padding: 6px; border-radius: 6px; margin-bottom: 6px;">
+            <div style="font-size: 11px; font-weight: bold; margin-bottom: 4px; text-align: center;">
+                🔬 Enhanced Intelligence
+            </div>
+            <div style="display: flex; flex-wrap: wrap; gap: 4px;">
         """
         
+        # Compact data items in horizontal pills
+        compact_items = []
+        
         # Air Quality Data
         if 'air_quality' in city_mcp or any('air' in str(k).lower() for k in city_mcp.keys()):
-            air_quality_data = city_mcp.get('air_quality', 'Good')
-            mcp_html += f"""
-            <div style="background: rgba(255,255,255,0.2); padding: 6px; margin: 4px 0; border-radius: 4px;">
-                <strong>🌬️ Air Quality:</strong> {air_quality_data}
-            </div>
-            """
+            air_quality = str(city_mcp.get('air_quality', 'Good'))[:10]
+            compact_items.append(f'<span style="background: rgba(255,255,255,0.3); padding: 2px 6px; border-radius: 10px; font-size: 9px; white-space: nowrap;">🌬️ {air_quality}</span>')
         
-        # Historical Weather Data
+        # Historical Data
         if 'historical_avg' in city_mcp or any('historical' in str(k).lower() for k in city_mcp.keys()):
-            historical_data = city_mcp.get('historical_avg', 'No historical data')
-            mcp_html += f"""
-            <div style="background: rgba(255,255,255,0.2); padding: 6px; margin: 4px 0; border-radius: 4px;">
-                <strong>📊 Historical Average:</strong> {historical_data}
-            </div>
-            """
-        
-        # Marine Conditions
-        if 'marine_conditions' in city_mcp or any('marine' in str(k).lower() for k in city_mcp.keys()):
-            marine_data = city_mcp.get('marine_conditions', 'No marine data')
-            mcp_html += f"""
-            <div style="background: rgba(255,255,255,0.2); padding: 6px; margin: 4px 0; border-radius: 4px;">
-                <strong>🌊 Marine Conditions:</strong> {marine_data}
-            </div>
-            """
-        
-        # Travel Advice
-        if 'travel_advice' in city_mcp or any('travel' in str(k).lower() for k in city_mcp.keys()):
-            travel_data = city_mcp.get('travel_advice', 'Good travel conditions')
-            mcp_html += f"""
-            <div style="background: rgba(255,255,255,0.2); padding: 6px; margin: 4px 0; border-radius: 4px;">
-                <strong>✈️ Travel Advice:</strong> {travel_data}
-            </div>
-            """
-        
-        # Severe Weather Alerts
-        if any('severe' in str(k).lower() or 'alert' in str(k).lower() for k in city_mcp.keys()):
-            for key, value in city_mcp.items():
-                if 'severe' in key.lower() or 'alert' in key.lower():
-                    mcp_html += f"""
-                    <div style="background: rgba(255,100,100,0.3); padding: 6px; margin: 4px 0; border-radius: 4px; border: 1px solid rgba(255,255,255,0.3);">
-                        <strong>⚠️ Alert:</strong> {str(value)[:60]}{'...' if len(str(value)) > 60 else ''}
-                    </div>
-                    """
+            historical = str(city_mcp.get('historical_avg', 'N/A'))[:8]
+            compact_items.append(f'<span style="background: rgba(255,255,255,0.3); padding: 2px 6px; border-radius: 10px; font-size: 9px; white-space: nowrap;">📊 {historical}</span>')
         
         # UV Index
         if 'uv_index' in city_mcp or any('uv' in str(k).lower() for k in city_mcp.keys()):
-            uv_data = city_mcp.get('uv_index', 'Moderate')
-            mcp_html += f"""
-            <div style="background: rgba(255,255,255,0.2); padding: 6px; margin: 4px 0; border-radius: 4px;">
-                <strong>☀️ UV Index:</strong> {uv_data}
-            </div>
-            """
-        
-        # Pollen Count
-        if 'pollen' in city_mcp or any('pollen' in str(k).lower() for k in city_mcp.keys()):
-            pollen_data = city_mcp.get('pollen', 'Low')
-            mcp_html += f"""
-            <div style="background: rgba(255,255,255,0.2); padding: 6px; margin: 4px 0; border-radius: 4px;">
-                <strong>🌸 Pollen Count:</strong> {pollen_data}
-            </div>
-            """
+            uv = str(city_mcp.get('uv_index', 'Mod'))[:8]
+            compact_items.append(f'<span style="background: rgba(255,255,255,0.3); padding: 2px 6px; border-radius: 10px; font-size: 9px; white-space: nowrap;">☀️ {uv}</span>')
         
-        # Agricultural Conditions
-        if any('agriculture' in str(k).lower() or 'farming' in str(k).lower() for k in city_mcp.keys()):
-            for key, value in city_mcp.items():
-                if 'agriculture' in key.lower() or 'farming' in key.lower():
-                    mcp_html += f"""
-                    <div style="background: rgba(255,255,255,0.2); padding: 6px; margin: 4px 0; border-radius: 4px;">
-                        <strong>🚜 Agriculture:</strong> {str(value)[:50]}{'...' if len(str(value)) > 50 else ''}
-                    </div>
-                    """
-        
-        # Climate Data
-        if any('climate' in str(k).lower() for k in city_mcp.keys()):
-            for key, value in city_mcp.items():
-                if 'climate' in key.lower():
-                    mcp_html += f"""
-                    <div style="background: rgba(255,255,255,0.2); padding: 6px; margin: 4px 0; border-radius: 4px;">
-                        <strong>🌍 Climate:</strong> {str(value)[:50]}{'...' if len(str(value)) > 50 else ''}
-                    </div>
-                    """
-        
-        # Ocean/Water Data
-        if any('ocean' in str(k).lower() or 'water' in str(k).lower() or 'tide' in str(k).lower() for k in city_mcp.keys()):
-            for key, value in city_mcp.items():
-                if any(term in key.lower() for term in ['ocean', 'water', 'tide', 'wave']):
-                    mcp_html += f"""
-                    <div style="background: rgba(255,255,255,0.2); padding: 6px; margin: 4px 0; border-radius: 4px;">
-                        <strong>🌊 Ocean Data:</strong> {str(value)[:50]}{'...' if len(str(value)) > 50 else ''}
-                    </div>
-                    """
-        
-        # Satellite Data
-        if any('satellite' in str(k).lower() for k in city_mcp.keys()):
-            for key, value in city_mcp.items():
-                if 'satellite' in key.lower():
-                    mcp_html += f"""
-                    <div style="background: rgba(255,255,255,0.2); padding: 6px; margin: 4px 0; border-radius: 4px;">
-                        <strong>🛰️ Satellite:</strong> {str(value)[:50]}{'...' if len(str(value)) > 50 else ''}
-                    </div>
-                    """
-        
-        # Storm Data
-        if any('storm' in str(k).lower() or 'hurricane' in str(k).lower() or 'tornado' in str(k).lower() for k in city_mcp.keys()):
-            for key, value in city_mcp.items():
-                if any(term in key.lower() for term in ['storm', 'hurricane', 'tornado', 'cyclone']):
-                    mcp_html += f"""
-                    <div style="background: rgba(255,100,100,0.3); padding: 6px; margin: 4px 0; border-radius: 4px; border: 1px solid rgba(255,255,255,0.3);">
-                        <strong>🌪️ Storm Data:</strong> {str(value)[:50]}{'...' if len(str(value)) > 50 else ''}
-                    </div>
-                    """
-        
-        # Any other MCP tool results (catch-all)
-        excluded_keys = ['air_quality', 'historical_avg', 'marine_conditions', 'travel_advice', 'uv_index', 'pollen']
-        for tool_name, tool_result in city_mcp.items():
-            if tool_name not in excluded_keys and not any(term in tool_name.lower() for term in ['severe', 'alert', 'agriculture', 'farming', 'climate', 'ocean', 'water', 'tide', 'wave', 'satellite', 'storm', 'hurricane', 'tornado', 'cyclone']):
-                # Format tool name for display
-                display_name = tool_name.replace('_', ' ').title()
-                result_str = str(tool_result)[:50] + ('...' if len(str(tool_result)) > 50 else '')
-                
-                # Choose appropriate emoji based on tool name
-                emoji = "🤖"
-                if 'temperature' in tool_name.lower():
-                    emoji = "🌡️"
-                elif 'wind' in tool_name.lower():
-                    emoji = "💨"
-                elif 'pressure' in tool_name.lower():
-                    emoji = "⚡"
-                elif 'humidity' in tool_name.lower():
-                    emoji = "💧"
-                elif 'forecast' in tool_name.lower():
-                    emoji = "📅"
-                elif 'radar' in tool_name.lower():
-                    emoji = "📡"
-                
-                mcp_html += f"""
-                <div style="background: rgba(255,255,255,0.2); padding: 6px; margin: 4px 0; border-radius: 4px;">
-                    <strong>{emoji} {display_name}:</strong> {result_str}
-                </div>
-                """
-        
-        mcp_html += "</div>"
-        return mcp_html
-
-    def _create_simple_mcp_section(self, city_name: str, mcp_data: Dict) -> str:
-        """Create simplified MCP section for popup"""
-        if not mcp_data:
-            return ""
-        
-        # Find matching city data (case insensitive)
-        city_mcp = None
-        for key, value in mcp_data.items():
-            if key.lower() == city_name.lower():
-                city_mcp = value
-                break
-        
-        if not city_mcp:
-            return ""
-        
-        mcp_html = '<h4 style="color: #4a90e2; margin: 10px 0 5px 0;">Enhanced Data</h4>'
-        
-        # Add air quality data
-        if 'air_quality' in city_mcp:
-            mcp_html += f'<p style="margin: 3px 0;"><b>Air Quality:</b> {city_mcp["air_quality"]}</p>'
-        
-        # Add historical data
-        if 'historical_avg' in city_mcp:
-            mcp_html += f'<p style="margin: 3px 0;"><b>Historical Avg:</b> {city_mcp["historical_avg"]}°F</p>'
-        
-        # Add marine conditions
+        # Marine/Travel (prioritize most relevant)
         if 'marine_conditions' in city_mcp:
-            mcp_html += f'<p style="margin: 3px 0;"><b>Marine:</b> {city_mcp["marine_conditions"]}</p>'
+            marine = str(city_mcp.get('marine_conditions', ''))[:8]
+            compact_items.append(f'<span style="background: rgba(255,255,255,0.3); padding: 2px 6px; border-radius: 10px; font-size: 9px; white-space: nowrap;">🌊 {marine}</span>')
+        elif 'travel_advice' in city_mcp:
+            travel = str(city_mcp.get('travel_advice', ''))[:8]
+            compact_items.append(f'<span style="background: rgba(255,255,255,0.3); padding: 2px 6px; border-radius: 10px; font-size: 9px; white-space: nowrap;">✈️ {travel}</span>')
         
-        # Add travel advice
-        if 'travel_advice' in city_mcp:
-            mcp_html += f'<p style="margin: 3px 0;"><b>Travel:</b> {city_mcp["travel_advice"]}</p>'
+        # Severe Weather Alerts (high priority)
+        if any('severe' in str(k).lower() or 'alert' in str(k).lower() for k in city_mcp.keys()):
+            compact_items.append(f'<span style="background: rgba(255,100,100,0.6); padding: 2px 6px; border-radius: 10px; font-size: 9px; white-space: nowrap;">⚠️ Alert</span>')
         
-        return mcp_html
+        # Add up to 4 most important items
+        for item in compact_items[:4]:
+            mcp_html += item
         
-        # Add any MCP tool results
-        for tool_name, tool_result in city_mcp.items():
-            if tool_name not in ['air_quality', 'historical_avg', 'marine_conditions', 'travel_advice']:
-                if tool_name == 'get_air_quality_data':
-                    enhancements_html += f"""
-                    <div style="background: rgba(255,255,255,0.4); padding: 8px; margin: 5px 0; border-radius: 6px;">
-                        <strong>🌬️ Air Quality Analysis:</strong> {str(tool_result)[:100]}...
-                    </div>
-                    """
-                elif tool_name == 'get_historical_weather':
-                    enhancements_html += f"""
-                    <div style="background: rgba(255,255,255,0.4); padding: 8px; margin: 5px 0; border-radius: 6px;">
-                        <strong>📊 Historical Analysis:</strong> {str(tool_result)[:100]}...
-                    </div>
-                    """
-                elif tool_name == 'get_severe_weather_outlook':
-                    enhancements_html += f"""
-                    <div style="background: rgba(255,255,255,0.4); padding: 8px; margin: 5px 0; border-radius: 6px;">
-                        <strong>⚠️ Severe Weather:</strong> {str(tool_result)[:100]}...
-                    </div>
-                    """
+        mcp_html += """
+            </div>
+        </div>
+        """
         
-        enhancements_html += "</div>"
-        return enhancements_html
+        return mcp_html
         
 
 def create_map_manager() -> WeatherMapManager: