Update app.py

app.py

@@ -1145,7 +1145,8 @@ def calculate_track_uncertainty(track_points):
 
 def create_genesis_animation(prediction_data, enable_animation=True):
     """
-    Create animation showing daily genesis potential and storm development
+    Create professional typhoon track animation showing daily genesis potential and storm development
+    Following NHC/JTWC visualization standards with proper geographic map and time controls
     """
     try:
         if 'daily_gpi_maps' not in prediction_data or not prediction_data['daily_gpi_maps']:
@@ -1155,105 +1156,262 @@ def create_genesis_animation(prediction_data, enable_animation=True):
         storm_predictions = prediction_data.get('storm_predictions', [])
         month = prediction_data['month']
         oni_value = prediction_data['oni_value']
+        year = prediction_data.get('year', 2025)
         
+        # Create base figure with geographic map
         fig = go.Figure()
         
         if enable_animation and len(daily_maps) > 1:
-            # Create animated version
+            # PROFESSIONAL ANIMATION VERSION
             frames = []
             
+            # Get all storm track data for proper bounds
+            all_lats, all_lons = [], []
+            for storm in storm_predictions:
+                track = storm.get('track', [])
+                if track:
+                    all_lats.extend([pt['lat'] for pt in track])
+                    all_lons.extend([pt['lon'] for pt in track])
+            
+            # Set map bounds (Western Pacific focus)
+            map_bounds = {
+                'lat_min': min(5, min(all_lats) - 5) if all_lats else 5,
+                'lat_max': max(35, max(all_lats) + 5) if all_lats else 35, 
+                'lon_min': min(110, min(all_lons) - 10) if all_lons else 110,
+                'lon_max': max(180, max(all_lons) + 10) if all_lons else 180
+            }
+            
+            # Create frames for each day
             for day_idx, day_data in enumerate(daily_maps):
                 day = day_data['day']
+                frame_data = []
+                
+                # 1. GENESIS POTENTIAL BACKGROUND (GPI Contours)
                 gpi_field = day_data['gpi_field']
                 lat_range = day_data['lat_range']
                 lon_range = day_data['lon_range']
                 
-                frame_data = []
-                
-                # Add GPI contour
                 frame_data.append(
-                    go.Contour(
-                        z=gpi_field,
-                        x=lon_range,
-                        y=lat_range,
-                        colorscale='Viridis',
-                        showscale=True,
-                        colorbar=dict(title="Genesis Potential Index"),
-                        name=f'GPI Day {day}',
+                    go.Scattergeo(
+                        lat=np.repeat(lat_range, len(lon_range)),
+                        lon=np.tile(lon_range, len(lat_range)),
+                        mode='markers',
+                        marker=dict(
+                            size=6,
+                            color=gpi_field.flatten(),
+                            colorscale='Viridis',
+                            cmin=0,
+                            cmax=3,
+                            opacity=0.6,
+                            showscale=(day_idx == 0),
+                            colorbar=dict(
+                                title="Genesis<br>Potential<br>Index",
+                                titleside="right"
+                            ) if day_idx == 0 else None
+                        ),
+                        name='Genesis Potential',
+                        showlegend=(day_idx == 0),
                         hovertemplate=(
-                            'Longitude: %{x:.1f}°E<br>'
-                            'Latitude: %{y:.1f}°N<br>'
-                            'GPI: %{z:.2f}<br>'
-                            f'Day: {day}<br>'
+                            'Genesis Potential<br>'
+                            'Lat: %{lat:.1f}°N<br>'
+                            'Lon: %{lon:.1f}°E<br>'
+                            'GPI: %{marker.color:.2f}<br>'
+                            f'Day {day} of {month:02d}/{year}<br>'
                             '<extra></extra>'
                         )
                     )
                 )
                 
-                # Add storm tracks up to current day
-                for storm in storm_predictions:
+                # 2. STORM TRACKS (Progressive reveal like NHC)
+                for storm_idx, storm in enumerate(storm_predictions):
                     track = storm['track']
-                    # Only show track points up to current day
+                    storm_id = storm['storm_id']
+                    
+                    # Get track points up to current day
                     current_track = [pt for pt in track if pt['day'] <= day]
                     
-                    if current_track:
+                    if current_track and len(current_track) > 0:
                         lats = [pt['lat'] for pt in current_track]
                         lons = [pt['lon'] for pt in current_track]
                         intensities = [pt['intensity'] for pt in current_track]
+                        categories = [pt['category'] for pt in current_track]
+                        
+                        # Get colors based on intensity (Saffir-Simpson-like scale)
+                        colors = []
+                        for intensity in intensities:
+                            if intensity < 34:
+                                colors.append('#80808080')  # Gray - TD
+                            elif intensity < 64:
+                                colors.append('#0000FF80')  # Blue - TS  
+                            elif intensity < 83:
+                                colors.append('#00FFFF80')  # Cyan - C1
+                            elif intensity < 96:
+                                colors.append('#00FF0080')  # Green - C2
+                            elif intensity < 113:
+                                colors.append('#FFFF0080')  # Yellow - C3
+                            elif intensity < 137:
+                                colors.append('#FFA50080')  # Orange - C4
+                            else:
+                                colors.append('#FF000080')  # Red - C5
+                        
+                        # 3. HISTORICAL TRACK (Past movement)
+                        if len(current_track) > 1:
+                            frame_data.append(
+                                go.Scattergeo(
+                                    lat=lats[:-1],  # All except current position
+                                    lon=lons[:-1],
+                                    mode='lines+markers',
+                                    line=dict(
+                                        color='rgba(100,100,100,0.7)', 
+                                        width=3
+                                    ),
+                                    marker=dict(
+                                        size=[max(6, int/8) for int in intensities[:-1]],
+                                        color=colors[:-1],
+                                        line=dict(width=1, color='white')
+                                    ),
+                                    name=f'Storm {storm_id} Track',
+                                    showlegend=(storm_idx == 0 and day_idx == 0),
+                                    legendgroup=f'storm_{storm_id}',
+                                    hovertemplate=(
+                                        f'<b>Storm {storm_id} History</b><br>'
+                                        'Lat: %{lat:.1f}°N<br>'
+                                        'Lon: %{lon:.1f}°E<br>'
+                                        '<extra></extra>'
+                                    )
+                                )
+                            )
+                        
+                        # 4. CURRENT POSITION (Big marker like operational forecasts)
+                        current_pos = current_track[-1]
+                        current_intensity = current_pos['intensity']
+                        current_category = current_pos['category']
+                        
+                        # Get current position color
+                        if current_intensity < 34:
+                            current_color = '#808080'  # Gray - TD
+                        elif current_intensity < 64:
+                            current_color = '#0000FF'  # Blue - TS  
+                        elif current_intensity < 83:
+                            current_color = '#00FFFF'  # Cyan - C1
+                        elif current_intensity < 96:
+                            current_color = '#00FF00'  # Green - C2
+                        elif current_intensity < 113:
+                            current_color = '#FFFF00'  # Yellow - C3
+                        elif current_intensity < 137:
+                            current_color = '#FFA500'  # Orange - C4
+                        else:
+                            current_color = '#FF0000'  # Red - C5
                         
-                        # Storm track
                         frame_data.append(
-                            go.Scatter(
-                                x=lons,
-                                y=lats,
-                                mode='lines+markers',
-                                line=dict(color='red', width=3),
+                            go.Scattergeo(
+                                lat=[current_pos['lat']],
+                                lon=[current_pos['lon']],
+                                mode='markers',
                                 marker=dict(
-                                    size=[max(4, int/10) for int in intensities],
-                                    color='red'
+                                    size=max(15, current_intensity/4),
+                                    color=current_color,
+                                    symbol='circle',
+                                    line=dict(width=3, color='white'),
+                                    opacity=1.0
                                 ),
-                                name=f'Storm {storm["storm_id"]}',
+                                name=f'Storm {storm_id} Current',
+                                showlegend=(storm_idx == 0 and day_idx == 0),
+                                legendgroup=f'storm_{storm_id}',
                                 hovertemplate=(
-                                    f'Storm {storm["storm_id"]}<br>'
-                                    'Longitude: %{x:.1f}°E<br>'
-                                    'Latitude: %{y:.1f}°N<br>'
+                                    f'<b>STORM {storm_id}</b><br>'
+                                    f'Day {day:.1f} of {month:02d}/{year}<br>'
+                                    f'Position: %{{lat:.1f}}°N, %{{lon:.1f}}°E<br>'
+                                    f'Intensity: {current_intensity:.0f} kt<br>'
+                                    f'Category: {current_category}<br>'
+                                    f'Pressure: {current_pos["pressure"]:.0f} hPa<br>'
+                                    f'Uncertainty: ±{current_pos["position_uncertainty"]:.1f}°<br>'
                                     '<extra></extra>'
-                                ),
-                                showlegend=(day_idx == 0)
+                                )
                             )
                         )
                         
-                        # Current position marker
-                        if current_track:
-                            current_pos = current_track[-1]
+                        # 5. UNCERTAINTY CONE (Growing with time like NHC)
+                        if len(current_track) > 1:
+                            uncertainty = current_pos['position_uncertainty']
+                            center_lat = current_pos['lat']
+                            center_lon = current_pos['lon']
+                            
+                            # Create uncertainty circle
+                            circle_lats = []
+                            circle_lons = []
+                            for angle in np.linspace(0, 2*np.pi, 20):
+                                circle_lats.append(center_lat + uncertainty * np.cos(angle))
+                                circle_lons.append(center_lon + uncertainty * np.sin(angle))
+                            
                             frame_data.append(
-                                go.Scatter(
-                                    x=[current_pos['lon']],
-                                    y=[current_pos['lat']],
+                                go.Scattergeo(
+                                    lat=circle_lats,
+                                    lon=circle_lons,
+                                    mode='lines',
+                                    line=dict(
+                                        color='rgba(255,0,0,0.3)',
+                                        width=2,
+                                        dash='dash'
+                                    ),
+                                    fill='toself',
+                                    fillcolor='rgba(255,0,0,0.1)',
+                                    name=f'Storm {storm_id} Uncertainty',
+                                    showlegend=(storm_idx == 0 and day_idx == 0),
+                                    legendgroup=f'storm_{storm_id}',
+                                    hoverinfo='skip'
+                                )
+                            )
+                        
+                        # 6. GENESIS MARKER (Show where storm formed)
+                        if len(current_track) >= 1:
+                            genesis_pos = track[0]  # First position
+                            frame_data.append(
+                                go.Scattergeo(
+                                    lat=[genesis_pos['lat']],
+                                    lon=[genesis_pos['lon']],
                                     mode='markers',
                                     marker=dict(
-                                        size=15,
-                                        color='yellow',
+                                        size=12,
+                                        color='gold',
                                         symbol='star',
                                         line=dict(width=2, color='black')
                                     ),
-                                    name=f'Storm {storm["storm_id"]} Current',
-                                    showlegend=False,
+                                    name=f'Storm {storm_id} Genesis',
+                                    showlegend=(storm_idx == 0 and day_idx == 0),
+                                    legendgroup=f'storm_{storm_id}',
                                     hovertemplate=(
-                                        f'Storm {storm["storm_id"]} - Day {day:.1f}<br>'
-                                        f'Intensity: {current_pos["intensity"]:.0f} kt<br>'
-                                        f'Category: {current_pos["category"]}<br>'
-                                        f'Pressure: {current_pos["pressure"]:.0f} hPa<br>'
+                                        f'<b>GENESIS - Storm {storm_id}</b><br>'
+                                        f'Day {genesis_pos["day"]:.1f}<br>'
+                                        f'Location: %{{lat:.1f}}°N, %{{lon:.1f}}°E<br>'
+                                        f'Initial Intensity: {genesis_pos["intensity"]:.0f} kt<br>'
                                         '<extra></extra>'
                                     )
                                 )
                             )
                 
+                # Create frame
                 frames.append(go.Frame(
                     data=frame_data,
                     name=str(day),
                     layout=go.Layout(
-                        title=f"Genesis Potential & Storm Development - Month {month}, Day {day}<br>ONI: {oni_value:.2f}"
+                        title=f"Typhoon Development Forecast - Day {day}, {month:02d}/{year} | ONI: {oni_value:.2f}",
+                        geo=dict(
+                            projection_type="natural earth",
+                            showland=True,
+                            landcolor="lightgray",
+                            showocean=True,
+                            oceancolor="lightblue",
+                            showcoastlines=True,
+                            coastlinecolor="darkgray",
+                            center=dict(
+                                lat=(map_bounds['lat_min'] + map_bounds['lat_max']) / 2,
+                                lon=(map_bounds['lon_min'] + map_bounds['lon_max']) / 2
+                            ),
+                            lonaxis_range=[map_bounds['lon_min'], map_bounds['lon_max']],
+                            lataxis_range=[map_bounds['lat_min'], map_bounds['lat_max']],
+                            resolution=50
+                        )
                     )
                 ))
             
@@ -1262,30 +1420,46 @@ def create_genesis_animation(prediction_data, enable_animation=True):
             # Set initial frame
             if frames:
                 fig.add_traces(frames[0].data)
+                fig.update_layout(frames[0].layout)
             
-            # Add animation controls
+            # PROFESSIONAL ANIMATION CONTROLS (like NHC website)
             fig.update_layout(
                 updatemenus=[{
                     "buttons": [
                         {
-                            "args": [None, {"frame": {"duration": 1000, "redraw": True},
-                                          "fromcurrent": True, "transition": {"duration": 300}}],
-                            "label": "▶️ Play",
+                            "args": [None, {
+                                "frame": {"duration": 800, "redraw": True},
+                                "fromcurrent": True, 
+                                "transition": {"duration": 300, "easing": "cubic-in-out"}
+                            }],
+                            "label": "▶️ Play Animation",
                             "method": "animate"
                         },
                         {
-                            "args": [[None], {"frame": {"duration": 0, "redraw": True},
-                                            "mode": "immediate", "transition": {"duration": 0}}],
+                            "args": [[None], {
+                                "frame": {"duration": 0, "redraw": True},
+                                "mode": "immediate", 
+                                "transition": {"duration": 0}
+                            }],
                             "label": "⏸️ Pause",
                             "method": "animate"
+                        },
+                        {
+                            "args": [[frames[0].name], {
+                                "frame": {"duration": 0, "redraw": True},
+                                "mode": "immediate", 
+                                "transition": {"duration": 0}
+                            }],
+                            "label": "⏮️ Reset",
+                            "method": "animate"
                         }
                     ],
                     "direction": "left",
-                    "pad": {"r": 10, "t": 87},
+                    "pad": {"r": 10, "t": 120},
                     "showactive": False,
                     "type": "buttons",
                     "x": 0.1,
-                    "xanchor": "right",
+                    "xanchor": "right", 
                     "y": 0,
                     "yanchor": "top"
                 }],
@@ -1294,8 +1468,8 @@ def create_genesis_animation(prediction_data, enable_animation=True):
                     "yanchor": "top",
                     "xanchor": "left",
                     "currentvalue": {
-                        "font": {"size": 16},
-                        "prefix": "Day: ",
+                        "font": {"size": 16, "color": "darkblue"},
+                        "prefix": f"{month:02d}/{year} Day: ",
                         "visible": True,
                         "xanchor": "right"
                     },
@@ -1306,39 +1480,41 @@ def create_genesis_animation(prediction_data, enable_animation=True):
                     "y": 0,
                     "steps": [
                         {
-                            "args": [[str(day_data['day'])], {"frame": {"duration": 300, "redraw": True},
-                                                   "mode": "immediate", "transition": {"duration": 300}}],
-                            "label": f"D{day_data['day']}",
+                            "args": [[str(day_data['day'])], {
+                                "frame": {"duration": 300, "redraw": True},
+                                "mode": "immediate", 
+                                "transition": {"duration": 300}
+                            }],
+                            "label": f"Day {day_data['day']}",
                             "method": "animate"
                         }
-                        for day_data in daily_maps[::max(1, len(daily_maps)//15)]
+                        for day_data in daily_maps
                     ]
                 }]
             )
             
         else:
-            # Static version showing final day
+            # STATIC VERSION (Final state overview)
             final_day = daily_maps[-1]
             gpi_field = final_day['gpi_field']
             lat_range = final_day['lat_range']
             lon_range = final_day['lon_range']
             
-            # Add GPI contour
+            # Add GPI background
             fig.add_trace(
-                go.Contour(
-                    z=gpi_field,
-                    x=lon_range,
-                    y=lat_range,
-                    colorscale='Viridis',
-                    showscale=True,
-                    colorbar=dict(title="Genesis Potential Index"),
-                    name='Genesis Potential',
-                    hovertemplate=(
-                        'Longitude: %{x:.1f}°E<br>'
-                        'Latitude: %{y:.1f}°N<br>'
-                        'GPI: %{z:.2f}<br>'
-                        '<extra></extra>'
-                    )
+                go.Scattergeo(
+                    lat=np.repeat(lat_range, len(lon_range)),
+                    lon=np.tile(lon_range, len(lat_range)),
+                    mode='markers',
+                    marker=dict(
+                        size=6,
+                        color=gpi_field.flatten(),
+                        colorscale='Viridis',
+                        opacity=0.6,
+                        showscale=True,
+                        colorbar=dict(title="Genesis Potential Index")
+                    ),
+                    name='Genesis Potential'
                 )
             )
             
@@ -1350,37 +1526,32 @@ def create_genesis_animation(prediction_data, enable_animation=True):
                     lons = [pt['lon'] for pt in track]
                     intensities = [pt['intensity'] for pt in track]
                     
+                    # Complete track
                     fig.add_trace(
-                        go.Scatter(
-                            x=lons,
-                            y=lats,
+                        go.Scattergeo(
+                            lat=lats,
+                            lon=lons,
                             mode='lines+markers',
                             line=dict(color='red', width=3),
                             marker=dict(
-                                size=[max(4, int/10) for int in intensities],
+                                size=[max(6, int/8) for int in intensities],
                                 color=intensities,
                                 colorscale='Reds',
                                 showscale=False
                             ),
-                            name=f'Storm {storm["storm_id"]}',
-                            hovertemplate=(
-                                f'Storm {storm["storm_id"]}<br>'
-                                'Longitude: %{x:.1f}°E<br>'
-                                'Latitude: %{y:.1f}°N<br>'
-                                '<extra></extra>'
-                            )
+                            name=f'Storm {storm["storm_id"]} Complete Track'
                         )
                     )
                     
                     # Genesis marker
                     fig.add_trace(
-                        go.Scatter(
-                            x=[lons[0]],
-                            y=[lats[0]],
+                        go.Scattergeo(
+                            lat=[lats[0]],
+                            lon=[lons[0]],
                             mode='markers',
                             marker=dict(
-                                size=20,
-                                color='yellow',
+                                size=15,
+                                color='gold',
                                 symbol='star',
                                 line=dict(width=2, color='black')
                             ),
@@ -1389,25 +1560,49 @@ def create_genesis_animation(prediction_data, enable_animation=True):
                         )
                     )
         
-        # Update layout
+        # FINAL LAYOUT (Professional meteorological style)
         fig.update_layout(
-            title=f"Typhoon Genesis Prediction - Month {month} (ONI: {oni_value:.2f})" + 
-                  (" - Animated" if enable_animation else ""),
-            xaxis_title="Longitude (°E)",
-            yaxis_title="Latitude (°N)",
-            width=1000,
-            height=700,
-            showlegend=True
+            title={
+                'text': f"🌊 Typhoon Genesis & Development Forecast<br><sub>{month:02d}/{year} | ONI: {oni_value:.2f} | " + 
+                       ("Interactive Animation" if enable_animation else "Monthly Summary") + "</sub>",
+                'x': 0.5,
+                'font': {'size': 18}
+            },
+            geo=dict(
+                projection_type="natural earth",
+                showland=True,
+                landcolor="lightgray",
+                showocean=True,
+                oceancolor="lightblue",
+                showcoastlines=True,
+                coastlinecolor="darkgray",
+                showlakes=True,
+                lakecolor="lightblue",
+                showcountries=True,
+                countrycolor="gray",
+                resolution=50,
+                center=dict(lat=20, lon=140),
+                lonaxis_range=[110, 180],
+                lataxis_range=[5, 35]
+            ),
+            width=1200,
+            height=800,
+            showlegend=True,
+            legend=dict(
+                x=0.02,
+                y=0.98,
+                bgcolor="rgba(255,255,255,0.8)",
+                bordercolor="gray",
+                borderwidth=1
+            )
         )
         
-        # Set map bounds
-        fig.update_xaxes(range=[110, 180])
-        fig.update_yaxes(range=[5, 35])
-        
         return fig
         
     except Exception as e:
-        logging.error(f"Error creating genesis animation: {e}")
+        logging.error(f"Error creating professional genesis animation: {e}")
+        import traceback
+        traceback.print_exc()
         return create_error_plot(f"Animation error: {str(e)}")
 
 def create_error_plot(error_message):