Update app.py

app.py

@@ -302,7 +302,7 @@ 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 color legend and typhoon details
+# Video animation function with explicit sidebar and color legend
 def categorize_typhoon_by_standard(wind_speed, standard):
     if standard == 'taiwan':
         wind_speed_ms = wind_speed * 0.514444
@@ -355,20 +355,20 @@ def generate_track_video(year, typhoon, standard):
 
     ax.set_title(f"{year} {storm.name} Typhoon Path")
 
-    # Legend for categories with explicit color meanings
-    standard_dict = atlantic_standard if standard == 'atlantic' else taiwan_standard
-    legend_elements = [plt.Line2D([0], [0], marker='o', color='w', label=f"{cat} ({details['color']})",
-                                  markerfacecolor=details['color'], markersize=10)
-                       for cat, details in standard_dict.items()]
-    ax.legend(handles=legend_elements, loc='upper left', bbox_to_anchor=(1.7, 0.5), title="Intensity Categories")
-
     # Initialize the line and point
     line, = ax.plot([], [], 'b-', linewidth=2, transform=ccrs.PlateCarree())
     point, = ax.plot([], [], 'o', markersize=8, transform=ccrs.PlateCarree())
     date_text = ax.text(0.02, 0.02, '', transform=ax.transAxes, fontsize=12, bbox=dict(facecolor='white', alpha=0.8))
 
-    # Add details text box on the right side
-    details_text = fig.text(0.75, 0.5, '', fontsize=12, verticalalignment='center', horizontalalignment='left',
+    # Add sidebar with typhoon details on the right
+    details_title = fig.text(0.75, 0.65, "Typhoon Details", fontsize=14, fontweight='bold', verticalalignment='top', horizontalalignment='left')
+    details_text = fig.text(0.75, 0.60, '', fontsize=12, verticalalignment='top', horizontalalignment='left',
+                            bbox=dict(facecolor='white', alpha=0.8, boxstyle='round,pad=0.5'))
+
+    # Add color legend 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.75, 0.35, f"Color Legend\n{color_legend_text}", fontsize=12, verticalalignment='top', horizontalalignment='left',
                             bbox=dict(facecolor='white', alpha=0.8, boxstyle='round,pad=0.5'))
 
     def init():
@@ -384,7 +384,7 @@ def generate_track_video(year, typhoon, standard):
         point.set_data([storm.lon[frame]], [storm.lat[frame]])
         point.set_color(color)
         date_text.set_text(storm.time[frame].strftime('%Y-%m-%d %H:%M'))
-        details = f"Typhoon: {storm.name}\n" \
+        details = f"Name: {storm.name}\n" \
                   f"Date: {storm.time[frame].strftime('%Y-%m-%d %H:%M')}\n" \
                   f"Wind Speed: {storm.vmax[frame]:.1f} kt\n" \
                   f"Category: {category}"
@@ -620,8 +620,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
-           - Details (name, date, wind speed, category) on the right
-           - Color legend showing intensity categories on the right
+           - Sidebar on the right showing typhoon details (name, date, wind speed, category)
+           - Color legend below the sidebar explaining what each color represents
         """)
         
         def update_typhoon_options(year):