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 world map (using Matplotlib and Cartopy)
+# Video animation function with world map and details sidebar
 def categorize_typhoon_by_standard(wind_speed, standard):
     if standard == 'taiwan':
         wind_speed_ms = wind_speed * 0.514444
@@ -341,9 +341,9 @@ def generate_track_video(year, typhoon, standard):
     lat_padding = max((max_lat - min_lat) * 0.3, 5)
     lon_padding = max((max_lon - min_lon) * 0.3, 5)
 
-    # Set up the figure with Cartopy
-    fig = plt.figure(figsize=(10, 7))
-    ax = plt.axes(projection=ccrs.PlateCarree())
+    # Set up the figure with space for sidebar
+    fig = plt.figure(figsize=(14, 7))  # Wider figure to accommodate sidebar
+    ax = plt.axes([0.05, 0.05, 0.65, 0.9], projection=ccrs.PlateCarree())  # Map on left 65% of figure
     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
@@ -359,18 +359,23 @@ def generate_track_video(year, typhoon, standard):
     standard_dict = atlantic_standard if standard == 'atlantic' else taiwan_standard
     for cat, details in standard_dict.items():
         ax.plot([], [], 'o', color=details['color'], label=cat)
-    ax.legend(loc='upper left', bbox_to_anchor=(1, 1))
+    ax.legend(loc='upper left', bbox_to_anchor=(1.7, 1))
 
     # 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',
+                            bbox=dict(facecolor='white', alpha=0.8, boxstyle='round,pad=0.5'))
+
     def init():
         line.set_data([], [])
         point.set_data([], [])
         date_text.set_text('')
-        return line, point, date_text
+        details_text.set_text('')
+        return line, point, date_text, details_text
 
     def update(frame):
         line.set_data(storm.lon[:frame+1], storm.lat[:frame+1])
@@ -378,7 +383,12 @@ 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'))
-        return line, point, date_text
+        details = f"Typhoon: {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}"
+        details_text.set_text(details)
+        return line, point, date_text, details_text
 
     # Create animation
     ani = animation.FuncAnimation(fig, update, init_func=init, frames=len(storm.time),
@@ -439,7 +449,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 and world map background
+        - **Path Animation**: Watch an animated typhoon path with video controls, world map, and details sidebar
         - **Regression Analysis**: Perform statistical regression on typhoon data
         
         Select a tab above to begin your analysis.
@@ -607,7 +617,7 @@ with gr.Blocks(title="Typhoon Analysis Dashboard") as demo:
         2. Choose a classification standard (Atlantic or Taiwan)
         3. Click "Generate Animation"
         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 the date displayed and intensity markers
+        5. The animation shows the typhoon track growing over a world map, with date on the bottom left and details on the right
         """)
         
         def update_typhoon_options(year):