Update app.py

app.py

@@ -404,17 +404,98 @@ with gr.Blocks(title="Typhoon Analysis Dashboard") as demo:
             enso_phase = gr.Dropdown(label="ENSO Phase", choices=['all', 'El Nino', 'La Nina', 'Neutral'], value='all')
             typhoon_search = gr.Textbox(label="Typhoon Search")
         analyze_btn = gr.Button("Generate Tracks")
-        tracks_plot = gr.Plot(label="Typhoon Tracks")
         
-        # Fixed function that extracts only the first return value
-        def get_tracks_plot(*args):
-            results = generate_main_analysis(*args)
-            return results[0]
+        # Display all tracks
+        tracks_plot = gr.Plot(label="Typhoon Tracks", elem_id="tracks_plot")
+        typhoon_count = gr.Textbox(label="Number of Typhoons Displayed")
+        
+        # Enhanced function to show all track data
+        def get_full_tracks(start_year, start_month, end_year, end_month, enso_phase, typhoon_search):
+            start_date = datetime(start_year, start_month, 1)
+            end_date = datetime(end_year, end_month, 28)
+            filtered_data = merged_data[
+                (merged_data['ISO_TIME'] >= start_date) & 
+                (merged_data['ISO_TIME'] <= end_date)
+            ]
+            filtered_data['ENSO_Phase'] = filtered_data['ONI'].apply(classify_enso_phases)
+            
+            if enso_phase != 'all':
+                filtered_data = filtered_data[filtered_data['ENSO_Phase'] == enso_phase.capitalize()]
+            
+            # Get all unique storms
+            unique_storms = filtered_data['SID'].unique()
+            count = len(unique_storms)
+            
+            # Create the map with all tracks
+            fig = go.Figure()
+            
+            # Add all tracks
+            for sid in unique_storms:
+                storm_data = typhoon_data[typhoon_data['SID'] == sid]
+                name = storm_data['NAME'].iloc[0] if not pd.isna(storm_data['NAME'].iloc[0]) else "Unnamed"
+                
+                # Get ENSO phase color
+                storm_oni = filtered_data[filtered_data['SID'] == sid]['ONI'].iloc[0]
+                color = 'red' if storm_oni >= 0.5 else ('blue' if storm_oni <= -0.5 else 'green')
+                
+                # Add the track line
+                fig.add_trace(go.Scattergeo(
+                    lon=storm_data['LON'], 
+                    lat=storm_data['LAT'], 
+                    mode='lines',
+                    name=f"{name} ({storm_data['SEASON'].iloc[0]})",
+                    line=dict(width=1.5, color=color),
+                    hoverinfo="name"
+                ))
+            
+            # Highlight searched typhoon if specified
+            if typhoon_search:
+                search_mask = typhoon_data['NAME'].str.contains(typhoon_search, case=False, na=False)
+                if search_mask.any():
+                    for sid in typhoon_data[search_mask]['SID'].unique():
+                        storm_data = typhoon_data[typhoon_data['SID'] == sid]
+                        fig.add_trace(go.Scattergeo(
+                            lon=storm_data['LON'], 
+                            lat=storm_data['LAT'], 
+                            mode='lines+markers',
+                            name=f"MATCHED: {storm_data['NAME'].iloc[0]} ({storm_data['SEASON'].iloc[0]})",
+                            line=dict(width=3, color='yellow'),
+                            marker=dict(size=5),
+                            hoverinfo="name"
+                        ))
+            
+            # Add colorbar/legend for ENSO phases
+            fig.update_layout(
+                title=f"Typhoon Tracks ({start_year}-{start_month} to {end_year}-{end_month})",
+                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)',
+                    center=dict(lon=140, lat=20),
+                    projection_scale=3
+                ),
+                legend_title="Typhoons by ENSO Phase",
+                showlegend=True,
+                height=700
+            )
+            
+            # Add annotations explaining colors
+            fig.add_annotation(
+                x=0.02, y=0.98, xref="paper", yref="paper",
+                text="Red: El Niño, Blue: La Niña, Green: Neutral",
+                showarrow=False, align="left",
+                bgcolor="rgba(255,255,255,0.8)"
+            )
+            
+            return fig, f"Total typhoons displayed: {count}"
             
         analyze_btn.click(
-            fn=get_tracks_plot,
+            fn=get_full_tracks,
             inputs=[start_year, start_month, end_year, end_month, enso_phase, typhoon_search],
-            outputs=tracks_plot
+            outputs=[tracks_plot, typhoon_count]
         )
     
     with gr.Tab("Wind Analysis"):
@@ -497,50 +578,95 @@ with gr.Blocks(title="Typhoon Analysis Dashboard") as demo:
             standard_dropdown = gr.Dropdown(label="Classification Standard", 
                                           choices=['atlantic', 'taiwan'], value='atlantic')
         
-        # Fix the animation with improved function
-        def generate_fixed_path_animation(year, typhoon, standard):
+        # Completely redesigned animation function to show track movement clearly
+        def generate_improved_animation(year, typhoon, standard):
             if not typhoon:
                 return None
                 
             typhoon_id = typhoon.split('(')[-1].strip(')')
             storm = ibtracs.get_storm(typhoon_id)
             
-            # Create better frames for animation
+            # Create frames that show the growing track
             frames = []
+            
+            # Add frames showing growing track
             for i in range(len(storm.time)):
+                # Get wind category and color
                 category, color = categorize_typhoon_by_standard(storm.vmax[i], standard)
-                frames.append(
-                    go.Frame(
-                        data=[
-                            go.Scattergeo(
-                                lon=storm.lon[:i+1], lat=storm.lat[:i+1], 
-                                mode='lines', line=dict(width=2, color='blue'),
-                                name="Path"
-                            ),
-                            go.Scattergeo(
-                                lon=[storm.lon[i]], lat=[storm.lat[i]], 
-                                mode='markers', 
-                                marker=dict(size=10, color=color),
-                                name=f"Position at {storm.time[i].strftime('%Y-%m-%d %H:%M')}",
-                                text=f"Wind: {storm.vmax[i]} kt<br>Category: {category}"
-                            )
-                        ],
-                        name=f"frame{i}"
+                
+                # Create frame showing path up to current point
+                frame_data = [
+                    # Path line up to current point
+                    go.Scattergeo(
+                        lon=storm.lon[:i+1], 
+                        lat=storm.lat[:i+1], 
+                        mode='lines', 
+                        line=dict(width=2, color='blue'),
+                        name="Track"
+                    ),
+                    # Current position
+                    go.Scattergeo(
+                        lon=[storm.lon[i]], 
+                        lat=[storm.lat[i]], 
+                        mode='markers', 
+                        marker=dict(size=12, color=color),
+                        name=f"Current Position",
+                        text=f"Time: {storm.time[i].strftime('%Y-%m-%d %H:%M')}<br>Wind: {storm.vmax[i]} kt<br>Category: {category}"
                     )
-                )
+                ]
+                
+                # Add previous positions as smaller markers
+                if i > 0:
+                    frame_data.append(
+                        go.Scattergeo(
+                            lon=storm.lon[:i], 
+                            lat=storm.lat[:i], 
+                            mode='markers', 
+                            marker=dict(size=5, color='rgba(100,100,100,0.5)'),
+                            name="Previous Positions",
+                            showlegend=False
+                        )
+                    )
+                
+                frames.append(go.Frame(data=frame_data, name=f"frame{i}"))
             
-            # Initial plot
+            # Initial figure showing start point
             fig = go.Figure(
                 data=[
                     go.Scattergeo(
-                        lon=[storm.lon[0]], lat=[storm.lat[0]],
-                        mode='markers', marker=dict(size=10, color='green'),
-                        name="Start Position"
+                        lon=[storm.lon[0]], 
+                        lat=[storm.lat[0]],
+                        mode='markers', 
+                        marker=dict(size=12, color='green'),
+                        name="Starting Position",
+                        text=f"Start: {storm.time[0].strftime('%Y-%m-%d %H:%M')}"
                     )
                 ],
                 frames=frames
             )
             
+            # Add category legend
+            if standard == 'atlantic':
+                for cat, details in atlantic_standard.items():
+                    fig.add_trace(go.Scattergeo(
+                        lon=[None], lat=[None], mode='markers',
+                        marker=dict(size=10, color=details['color']),
+                        name=cat
+                    ))
+            else:
+                for cat, details in taiwan_standard.items():
+                    fig.add_trace(go.Scattergeo(
+                        lon=[None], lat=[None], mode='markers',
+                        marker=dict(size=10, color=details['color']),
+                        name=cat
+                    ))
+            
+            # Focus map on storm area
+            min_lat, max_lat = min(storm.lat), max(storm.lat)
+            min_lon, max_lon = min(storm.lon), max(storm.lon)
+            lat_padding = (max_lat - min_lat) * 0.3 or 5
+            lon_padding = (max_lon - min_lon) * 0.3 or 5
+            
             # Update layout with better animation controls
             fig.update_layout(
                 title=f"{year} {storm.name} Typhoon Path",
@@ -551,13 +677,15 @@ with gr.Blocks(title="Typhoon Analysis Dashboard") as demo:
                     landcolor='rgb(243, 243, 243)',
                     countrycolor='rgb(204, 204, 204)',
                     coastlinecolor='rgb(204, 204, 204)',
-                    lataxis={'range': [min(storm.lat)-5, max(storm.lat)+5]},
-                    lonaxis={'range': [min(storm.lon)-10, max(storm.lon)+10]}
+                    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, "mode": "immediate"}],
+                            "args": [None, {"frame": {"duration": 100, "redraw": True}, "fromcurrent": True, "mode": "immediate"}],
                             "label": "Play",
                             "method": "animate"
                         },
@@ -578,7 +706,10 @@ with gr.Blocks(title="Typhoon Analysis Dashboard") as demo:
                     "yanchor": "top",
                     "xanchor": "left",
                     "currentvalue": {
-                        "prefix": "Frame: "
+                        "font": {"size": 12},
+                        "prefix": "Time: ",
+                        "visible": True,
+                        "xanchor": "right"
                     },
                     "pad": {"b": 10, "t": 50},
                     "len": 0.9,
@@ -590,24 +721,34 @@ with gr.Blocks(title="Typhoon Analysis Dashboard") as demo:
                                 "frame": {"duration": 0, "redraw": True},
                                 "mode": "immediate"
                             }],
-                            "label": str(i),
+                            "label": storm.time[i].strftime('%m/%d %H:00') if i < len(storm.time) else "",
                             "method": "animate"
                         } for i, f in enumerate(frames)
                     ]
-                }]
+                }],
+                height=700,
+                showlegend=True,
+                legend=dict(
+                    yanchor="top",
+                    y=0.99,
+                    xanchor="left",
+                    x=0.01,
+                    bgcolor="rgba(255, 255, 255, 0.8)"
+                )
             )
             
             return fig
         
         animate_btn = gr.Button("Generate Animation")
-        path_plot = gr.Plot(label="Typhoon Path Animation")
+        path_plot = gr.Plot(label="Typhoon Path Animation", elem_id="animation_plot")
         animation_info = gr.Markdown("""
         ### Animation Instructions
         1. Select a year and typhoon from the dropdowns
         2. Click "Generate Animation"
         3. Use the play button to start the animation
-        4. Use the slider to scrub through different positions
-        5. If animation doesn't play automatically, try using the slider to view frames
+        4. Use the slider to manually control the animation timeline
+        5. The animation shows the typhoon track developing over time, with the current position highlighted
+        6. Colors indicate typhoon intensity according to the selected classification standard
         """)
         
         # Year dropdown change function
@@ -619,9 +760,21 @@ 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_fixed_path_animation,
+            fn=generate_improved_animation,
             inputs=[year_dropdown, typhoon_dropdown, standard_dropdown],
             outputs=path_plot
         )
 
+    # Custom CSS for better spacing and to ensure plots are visible
+    gr.HTML("""
+    <style>
+    #tracks_plot, #animation_plot {
+        height: 700px !important;
+    }
+    .plot-container {
+        min-height: 600px;
+    }
+    </style>
+    """)
+
 demo.launch()