Update app.py

app.py

@@ -37,48 +37,30 @@ CACHE_EXPIRY_DAYS = 1
 # Color maps for Plotly (RGB)
 color_map = {
     'C5 Super Typhoon': 'rgb(255, 0, 0)',
-    'C4 Very Strong Typhoon': 'rgb(255, 63, 0)',
-    'C3 Strong Typhoon': 'rgb(255, 127, 0)',
-    'C2 Typhoon': 'rgb(255, 191, 0)',
-    'C1 Typhoon': 'rgb(255, 255, 0)',
-    'Tropical Storm': 'rgb(0, 255, 255)',
-    'Tropical Depression': 'rgb(173, 216, 230)'
+    'C4 Very Strong Typhoon': 'rgb(255, 165, 0)',
+    'C3 Strong Typhoon': 'rgb(255, 255, 0)',
+    'C2 Typhoon': 'rgb(0, 255, 0)',
+    'C1 Typhoon': 'rgb(0, 255, 255)',
+    'Tropical Storm': 'rgb(0, 0, 255)',
+    'Tropical Depression': 'rgb(128, 128, 128)'
 }
 
-# Classification standards with color names for Matplotlib
+# Classification standards with distinct colors for Matplotlib
 atlantic_standard = {
-    'C5 Super Typhoon': {'wind_speed': 137, 'color': 'Red'},
-    'C4 Very Strong Typhoon': {'wind_speed': 113, 'color': 'Orange-Red'},
-    'C3 Strong Typhoon': {'wind_speed': 96, 'color': 'Orange'},
-    'C2 Typhoon': {'wind_speed': 83, 'color': 'Light Orange'},
-    'C1 Typhoon': {'wind_speed': 64, 'color': 'Yellow'},
-    'Tropical Storm': {'wind_speed': 34, 'color': 'Cyan'},
-    'Tropical Depression': {'wind_speed': 0, 'color': 'Light Blue'}
+    'C5 Super Typhoon': {'wind_speed': 137, 'color': 'Red', 'hex': '#FF0000'},         # Pure Red
+    'C4 Very Strong Typhoon': {'wind_speed': 113, 'color': 'Orange', 'hex': '#FFA500'}, # Bright Orange
+    'C3 Strong Typhoon': {'wind_speed': 96, 'color': 'Yellow', 'hex': '#FFFF00'},      # Pure Yellow
+    'C2 Typhoon': {'wind_speed': 83, 'color': 'Green', 'hex': '#00FF00'},             # Pure Green
+    'C1 Typhoon': {'wind_speed': 64, 'color': 'Cyan', 'hex': '#00FFFF'},              # Pure Cyan
+    'Tropical Storm': {'wind_speed': 34, 'color': 'Blue', 'hex': '#0000FF'},          # Pure Blue
+    'Tropical Depression': {'wind_speed': 0, 'color': 'Gray', 'hex': '#808080'}       # Medium Gray
 }
 
 taiwan_standard = {
-    'Strong Typhoon': {'wind_speed': 51.0, 'color': 'Red'},
-    'Medium Typhoon': {'wind_speed': 33.7, 'color': 'Orange'},
-    'Mild Typhoon': {'wind_speed': 17.2, 'color': 'Yellow'},
-    'Tropical Depression': {'wind_speed': 0, 'color': 'Light Blue'}
-}
-
-# HEX codes for Matplotlib plotting (unchanged)
-atlantic_hex = {
-    'C5 Super Typhoon': '#FF0000',
-    'C4 Very Strong Typhoon': '#FF3F00',
-    'C3 Strong Typhoon': '#FF7F00',
-    'C2 Typhoon': '#FFBF00',
-    'C1 Typhoon': '#FFFF00',
-    'Tropical Storm': '#00FFFF',
-    'Tropical Depression': '#ADD8E6'
-}
-
-taiwan_hex = {
-    'Strong Typhoon': '#FF0000',
-    'Medium Typhoon': '#FF7F00',
-    'Mild Typhoon': '#FFFF00',
-    'Tropical Depression': '#ADD8E6'
+    'Strong Typhoon': {'wind_speed': 51.0, 'color': 'Red', 'hex': '#FF0000'},         # Pure Red
+    'Medium Typhoon': {'wind_speed': 33.7, 'color': 'Orange', 'hex': '#FFA500'},      # Bright Orange
+    'Mild Typhoon': {'wind_speed': 17.2, 'color': 'Yellow', 'hex': '#FFFF00'},        # Pure Yellow
+    'Tropical Depression': {'wind_speed': 0, 'color': 'Gray', 'hex': '#808080'}       # Medium Gray
 }
 
 # Data loading and preprocessing functions
@@ -320,31 +302,31 @@ def generate_main_analysis(start_year, start_month, end_year, end_month, enso_ph
     
     return tracks_fig, wind_scatter, pressure_scatter, regression_fig, slopes_text
 
-# Video animation function with adjusted size, color names, and sidebar
+# Video animation function with color examples, distinct colors, and dynamic sidebar
 def categorize_typhoon_by_standard(wind_speed, standard):
     if standard == 'taiwan':
         wind_speed_ms = wind_speed * 0.514444
         if wind_speed_ms >= 51.0:
-            return 'Strong Typhoon', taiwan_hex['Strong Typhoon']
+            return 'Strong Typhoon', taiwan_standard['Strong Typhoon']['hex']
         elif wind_speed_ms >= 33.7:
-            return 'Medium Typhoon', taiwan_hex['Medium Typhoon']
+            return 'Medium Typhoon', taiwan_standard['Medium Typhoon']['hex']
         elif wind_speed_ms >= 17.2:
-            return 'Mild Typhoon', taiwan_hex['Mild Typhoon']
-        return 'Tropical Depression', taiwan_hex['Tropical Depression']
+            return 'Mild Typhoon', taiwan_standard['Mild Typhoon']['hex']
+        return 'Tropical Depression', taiwan_standard['Tropical Depression']['hex']
     else:
         if wind_speed >= 137:
-            return 'C5 Super Typhoon', atlantic_hex['C5 Super Typhoon']
+            return 'C5 Super Typhoon', atlantic_standard['C5 Super Typhoon']['hex']
         elif wind_speed >= 113:
-            return 'C4 Very Strong Typhoon', atlantic_hex['C4 Very Strong Typhoon']
+            return 'C4 Very Strong Typhoon', atlantic_standard['C4 Very Strong Typhoon']['hex']
         elif wind_speed >= 96:
-            return 'C3 Strong Typhoon', atlantic_hex['C3 Strong Typhoon']
+            return 'C3 Strong Typhoon', atlantic_standard['C3 Strong Typhoon']['hex']
         elif wind_speed >= 83:
-            return 'C2 Typhoon', atlantic_hex['C2 Typhoon']
+            return 'C2 Typhoon', atlantic_standard['C2 Typhoon']['hex']
         elif wind_speed >= 64:
-            return 'C1 Typhoon', atlantic_hex['C1 Typhoon']
+            return 'C1 Typhoon', atlantic_standard['C1 Typhoon']['hex']
         elif wind_speed >= 34:
-            return 'Tropical Storm', atlantic_hex['Tropical Storm']
-        return 'Tropical Depression', atlantic_hex['Tropical Depression']
+            return 'Tropical Storm', atlantic_standard['Tropical Storm']['hex']
+        return 'Tropical Depression', atlantic_standard['Tropical Depression']['hex']
 
 def generate_track_video(year, typhoon, standard):
     if not typhoon:
@@ -361,7 +343,7 @@ def generate_track_video(year, typhoon, standard):
 
     # Set up the figure with adjusted size to fit Gradio (900x700 pixels at 100 DPI)
     fig = plt.figure(figsize=(9, 7), dpi=100)  # 9x7 inches = 900x700 pixels
-    ax = plt.axes([0.05, 0.15, 0.60, 0.80], projection=ccrs.PlateCarree())  # Map on left 60%, adjusted for legend space
+    ax = plt.axes([0.05, 0.15, 0.60, 0.80], projection=ccrs.PlateCarree())  # Map on left 60%
     ax.set_extent([min_lon - lon_padding, max_lon + lon_padding, min_lat - lat_padding, max_lat + lat_padding], crs=ccrs.PlateCarree())
 
     # Add world map features
@@ -379,15 +361,17 @@ def generate_track_video(year, typhoon, standard):
     date_text = ax.text(0.02, 0.02, '', transform=ax.transAxes, fontsize=10, bbox=dict(facecolor='white', alpha=0.8))
 
     # Add sidebar with typhoon details on the right
-    details_title = fig.text(0.70, 0.90, "Typhoon Details", fontsize=12, fontweight='bold', verticalalignment='top', horizontalalignment='left')
-    details_text = fig.text(0.70, 0.85, '', fontsize=10, verticalalignment='top', horizontalalignment='left',
+    details_title = fig.text(0.65, 0.90, "Typhoon Details", fontsize=12, fontweight='bold', verticalalignment='top', horizontalalignment='left')
+    details_text = fig.text(0.65, 0.85, '', fontsize=10, verticalalignment='top', horizontalalignment='left',
                             bbox=dict(facecolor='white', alpha=0.8, boxstyle='round,pad=0.5'))
 
-    # Add color legend below the details
+    # Add color legend with colored markers below the details
     standard_dict = atlantic_standard if standard == 'atlantic' else taiwan_standard
-    color_legend_text = "\n".join([f"{cat}: {details['color']}" for cat, details in standard_dict.items()])
-    color_legend = fig.text(0.70, 0.60, f"Color Legend\n{color_legend_text}", fontsize=10, verticalalignment='top', horizontalalignment='left',
-                            bbox=dict(facecolor='white', alpha=0.8, boxstyle='round,pad=0.5'))
+    legend_elements = [plt.Line2D([0], [0], marker='o', color='w', label=f"{cat}", 
+                                   markerfacecolor=details['hex'], markersize=10)
+                       for cat, details in standard_dict.items()]
+    fig.legend(handles=legend_elements, title="Color Legend", loc='center right', 
+               bbox_to_anchor=(0.95, 0.5), fontsize=10)
 
     def init():
         line.set_data([], [])
@@ -468,7 +452,7 @@ with gr.Blocks(title="Typhoon Analysis Dashboard") as demo:
         ### Features:
         - **Track Visualization**: View typhoon tracks by time period and ENSO phase
         - **Statistical Analysis**: Examine relationships between ONI values and typhoon characteristics
-        - **Path Animation**: Watch an animated typhoon path with video controls, world map, color legend, and details sidebar
+        - **Path Animation**: Watch an animated typhoon path with video controls, world map, color legend with examples, and dynamic sidebar
         - **Regression Analysis**: Perform statistical regression on typhoon data
         
         Select a tab above to begin your analysis.
@@ -638,8 +622,8 @@ with gr.Blocks(title="Typhoon Analysis Dashboard") as demo:
         4. Use the video player's built-in controls to play, pause, or scrub through the animation
         5. The animation shows the typhoon track growing over a world map, with:
            - Date on the bottom left
-           - Sidebar on the right showing typhoon details (name, date, wind speed, category)
-           - Color legend below the sidebar using color names (e.g., "Red: C5 Super Typhoon")
+           - Sidebar on the right showing typhoon details (name, date, wind speed, category) as it moves
+           - Color legend with colored markers (e.g., Red: C5 Super Typhoon) on the right
         """)
         
         def update_typhoon_options(year):