Update app.py

app.py

@@ -118,7 +118,7 @@ def load_ibtracs_data():
 
 def convert_typhoondata(input_file, output_file):
     with open(input_file, 'r') as infile:
-        next(infile); next(infile)  # Skip header lines
+        next(infile); next(infile)
         reader = csv.reader(infile)
         sid_data = defaultdict(list)
         for row in reader:
@@ -174,7 +174,7 @@ def merge_data(oni_long, typhoon_max):
     return pd.merge(typhoon_max, oni_long, on=['Year', 'Month'])
 
 def categorize_typhoon(wind_speed):
-    wind_speed_kt = wind_speed  # Assuming input is already in knots
+    wind_speed_kt = wind_speed
     if wind_speed_kt >= 137:
         return 'C5 Super Typhoon'
     elif wind_speed_kt >= 113:
@@ -293,7 +293,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
 
-# Path animation function with moving track
+# Path animation function using Gallery
 def categorize_typhoon_by_standard(wind_speed, standard):
     if standard == 'taiwan':
         wind_speed_ms = wind_speed * 0.514444
@@ -319,143 +319,76 @@ def categorize_typhoon_by_standard(wind_speed, standard):
             return 'Tropical Storm', atlantic_standard['Tropical Storm']['color']
         return 'Tropical Depression', atlantic_standard['Tropical Depression']['color']
 
-def generate_improved_animation(year, typhoon, standard):
+def generate_track_gallery(year, typhoon, standard):
     if not typhoon:
-        return None
+        return []
 
     typhoon_id = typhoon.split('(')[-1].strip(')')
     storm = ibtracs.get_storm(typhoon_id)
 
-    # Create animation frames with growing track
-    frames = []
-    for i in range(len(storm.time)):
-        category, color = categorize_typhoon_by_standard(storm.vmax[i], standard)
-        frame_data = [
-            go.Scattergeo(
-                lon=storm.lon[:i+1],  # Only include points up to current time
-                lat=storm.lat[:i+1],
-                mode='lines+markers',
-                line=dict(width=2, color='blue'),
-                marker=dict(size=8, color=color),
-                name=f"{storm.name} at {storm.time[i].strftime('%Y-%m-%d %H:%M')}",
-                text=[f"Time: {storm.time[i].strftime('%Y-%m-%d %H:%M')}<br>Wind: {storm.vmax[i]:.1f} kt<br>Category: {category}"],
-                hoverinfo="text"
-            )
-        ]
-        frames.append(go.Frame(data=frame_data, name=str(i)))
-
-    # Initial figure with just the starting point
-    category, color = categorize_typhoon_by_standard(storm.vmax[0], standard)
-    fig = go.Figure(
-        data=[
-            go.Scattergeo(
-                lon=[storm.lon[0]], 
-                lat=[storm.lat[0]],
-                mode='markers',
-                marker=dict(size=12, color=color),
-                name="Start",
-                text=[f"Start: {storm.time[0].strftime('%Y-%m-%d %H:%M')}<br>Wind: {storm.vmax[0]:.1f} kt<br>Category: {category}"],
-                hoverinfo="text"
-            )
-        ],
-        frames=frames
-    )
-
-    # Add category legend
-    standard_dict = atlantic_standard if standard == 'atlantic' else taiwan_standard
-    for cat, details in standard_dict.items():
-        fig.add_trace(go.Scattergeo(
-            lon=[None], lat=[None], mode='markers',
-            marker=dict(size=10, color=details['color']),
-            name=cat,
-            showlegend=True
-        ))
-
     # Map focus
     min_lat, max_lat = min(storm.lat), max(storm.lat)
     min_lon, max_lon = min(storm.lon), max(storm.lon)
     lat_padding = max((max_lat - min_lat) * 0.3, 5)
     lon_padding = max((max_lon - min_lon) * 0.3, 5)
 
-    # Update layout with animation controls
-    fig.update_layout(
-        title=f"{year} {storm.name} Typhoon Path Animation",
-        geo=dict(
-            projection_type='natural earth',
-            showland=True,
-            showcoastlines=True,
-            landcolor='rgb(243, 243, 243)',
-            countrycolor='rgb(204, 204, 204)',
-            coastlinecolor='rgb(204, 204, 204)',
-            showocean=True,
-            oceancolor='rgb(230, 230, 255)',
-            lataxis={'range': [min_lat - lat_padding, max_lat + lat_padding]},
-            lonaxis={'range': [min_lon - lon_padding, max_lon + lon_padding]}
-        ),
-        updatemenus=[{
-            "buttons": [
-                {
-                    "args": [None, {"frame": {"duration": 200, "redraw": True},
-                                   "fromcurrent": True,
-                                   "transition": {"duration": 0, "easing": "linear"},
-                                   "mode": "immediate"}],
-                    "label": "Play",
-                    "method": "animate"
-                },
-                {
-                    "args": [[None], {"frame": {"duration": 0, "redraw": True},
-                                     "mode": "immediate",
-                                     "transition": {"duration": 0}}],
-                    "label": "Pause",
-                    "method": "animate"
-                }
-            ],
-            "direction": "left",
-            "pad": {"r": 10, "t": 10},
-            "showactive": True,
-            "type": "buttons",
-            "x": 0.1,
-            "xanchor": "left",
-            "y": 0,
-            "yanchor": "bottom"
-        }],
-        sliders=[{
-            "active": 0,
-            "yanchor": "top",
-            "xanchor": "left",
-            "currentvalue": {
-                "font": {"size": 12},
-                "prefix": "Time: ",
-                "visible": True,
-                "xanchor": "right"
-            },
-            "transition": {"duration": 0, "easing": "linear"},
-            "pad": {"b": 10, "t": 50},
-            "len": 0.9,
-            "x": 0.1,
-            "y": 0,
-            "steps": [
-                {
-                    "args": [[str(i)], {"frame": {"duration": 200, "redraw": True},
-                                       "mode": "immediate",
-                                       "transition": {"duration": 0}}],
-                    "label": storm.time[i].strftime('%m/%d %H:%M'),
-                    "method": "animate"
-                } for i in range(len(storm.time))
-            ]
-        }],
-        height=700,
-        showlegend=True,
-        legend=dict(
-            yanchor="top",
-            y=0.99,
-            xanchor="left",
-            x=0.01,
-            bgcolor="rgba(255, 255, 255, 0.8)"
-        ),
-    )
+    # Generate a sequence of figures
+    gallery = []
+    for i in range(len(storm.time)):
+        fig = go.Figure()
+        
+        # Add the growing track up to the current point
+        category, color = categorize_typhoon_by_standard(storm.vmax[i], standard)
+        fig.add_trace(go.Scattergeo(
+            lon=storm.lon[:i+1],
+            lat=storm.lat[:i+1],
+            mode='lines+markers',
+            line=dict(width=2, color='blue'),
+            marker=dict(size=8, color=color),
+            name=f"{storm.name}",
+            text=[f"Time: {storm.time[j].strftime('%Y-%m-%d %H:%M')}<br>Wind: {storm.vmax[j]:.1f} kt<br>Category: {categorize_typhoon_by_standard(storm.vmax[j], standard)[0]}" for j in range(i+1)],
+            hoverinfo="text"
+        ))
 
-    return fig
+        # Add category legend
+        standard_dict = atlantic_standard if standard == 'atlantic' else taiwan_standard
+        for cat, details in standard_dict.items():
+            fig.add_trace(go.Scattergeo(
+                lon=[None], lat=[None], mode='markers',
+                marker=dict(size=10, color=details['color']),
+                name=cat,
+                showlegend=True
+            ))
+
+        # Update layout
+        fig.update_layout(
+            title=f"{year} {storm.name} at {storm.time[i].strftime('%Y-%m-%d %H:%M')}",
+            geo=dict(
+                projection_type='natural earth',
+                showland=True,
+                showcoastlines=True,
+                landcolor='rgb(243, 243, 243)',
+                countrycolor='rgb(204, 204, 204)',
+                coastlinecolor='rgb(204, 204, 204)',
+                showocean=True,
+                oceancolor='rgb(230, 230, 255)',
+                lataxis={'range': [min_lat - lat_padding, max_lat + lat_padding]},
+                lonaxis={'range': [min_lon - lon_padding, max_lon + lon_padding]}
+            ),
+            height=700,
+            showlegend=True,
+            legend=dict(
+                yanchor="top",
+                y=0.99,
+                xanchor="left",
+                x=0.01,
+                bgcolor="rgba(255, 255, 255, 0.8)"
+            )
+        )
+
+        gallery.append(fig)
+
+    return gallery
 
 # Logistic regression functions
 def perform_wind_regression(start_year, start_month, end_year, end_month):
@@ -504,7 +437,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 animated typhoon paths with intensity classification
+        - **Path Animation**: View a gallery of typhoon path progression over time
         - **Regression Analysis**: Perform statistical regression on typhoon data
         
         Select a tab above to begin your analysis.
@@ -664,16 +597,15 @@ with gr.Blocks(title="Typhoon Analysis Dashboard") as demo:
             typhoon_dropdown = gr.Dropdown(label="Typhoon")
             standard_dropdown = gr.Dropdown(label="Classification Standard", choices=['atlantic', 'taiwan'], value='atlantic')
         
-        animate_btn = gr.Button("Generate Animation")
-        path_plot = gr.Plot(label="Typhoon Path Animation", elem_id="animation_plot")
+        animate_btn = gr.Button("Generate Animation Gallery")
+        path_gallery = gr.Gallery(label="Typhoon Path Progression", elem_id="path_gallery", columns=1, height="auto")
         animation_info = gr.Markdown("""
         ### Animation Instructions
         1. Select a year and typhoon from the dropdowns
         2. Choose a classification standard (Atlantic or Taiwan)
-        3. Click "Generate Animation"
-        4. Use the "Play" button to watch the typhoon track grow over time
-        5. Use the slider to manually navigate through the typhoon's path
-        6. The blue line represents the growing track, with markers colored by intensity
+        3. Click "Generate Animation Gallery"
+        4. Scroll through the gallery to see the typhoon track growing over time
+        5. Each image represents a step in the typhoon's path, with the blue line extending and markers showing intensity
         """)
         
         def update_typhoon_options(year):
@@ -684,18 +616,22 @@ with gr.Blocks(title="Typhoon Analysis Dashboard") as demo:
         
         year_dropdown.change(fn=update_typhoon_options, inputs=year_dropdown, outputs=typhoon_dropdown)
         animate_btn.click(
-            fn=generate_improved_animation,
+            fn=generate_track_gallery,
             inputs=[year_dropdown, typhoon_dropdown, standard_dropdown],
-            outputs=path_plot
+            outputs=path_gallery
         )
 
     # Custom CSS for better spacing and visibility
     gr.HTML("""
     <style>
-    #tracks_plot, #animation_plot {
+    #tracks_plot {
         height: 700px !important;
         width: 100%;
     }
+    #path_gallery .gallery-item {
+        height: 700px !important;
+        width: 100% !important;
+    }
     .plot-container {
         min-height: 600px;
     }