Update app.py

app.py

@@ -94,7 +94,7 @@ class OceanCurrentMapper:
     
     def create_current_map(self, region: str, resolution: str, show_vectors: bool, 
                           show_speed: bool, vector_scale: float) -> go.Figure:
-        """Create interactive ocean current map"""
+        """Create interactive ocean current map with improved sizing"""
         
         # Get current data
         current_data = self.generate_synthetic_current_data(region, resolution)
@@ -110,7 +110,12 @@ class OceanCurrentMapper:
                 colorscale='Viridis',
                 name='Current Speed (m/s)',
                 showscale=True,
-                colorbar=dict(title="Speed (m/s)", x=1.02)
+                colorbar=dict(
+                    title="Speed (m/s)", 
+                    x=1.02,
+                    thickness=15,
+                    len=0.7
+                )
             ))
         
         # Add vector field if requested
@@ -142,22 +147,42 @@ class OceanCurrentMapper:
                             showarrow=True
                         )
         
-        # Update layout
+        # Calculate aspect ratio for better proportions
+        lat_range = current_data['latitude'].max() - current_data['latitude'].min()
+        lon_range = current_data['longitude'].max() - current_data['longitude'].min()
+        
+        # Update layout with improved sizing
         fig.update_layout(
             title=f'Ocean Currents - {region}',
-            xaxis_title='Longitude',
-            yaxis_title='Latitude',
+            xaxis=dict(
+                title='Longitude',
+                scaleanchor="y",
+                scaleratio=1,
+                constrain="domain"
+            ),
+            yaxis=dict(
+                title='Latitude',
+                constrain="domain"
+            ),
             showlegend=True,
-            width=None,  # Let it auto-size
-            height=500,  # Smaller height for embedding
             autosize=True,
-            margin=dict(l=50, r=50, t=80, b=50)
+            # Set explicit dimensions for better control
+            width=800,
+            height=600,
+            margin=dict(l=60, r=100, t=80, b=60),
+            # Add responsive config
+            dragmode='pan',
+            hovermode='closest'
         )
         
+        # Set axis ranges for better proportions
+        fig.update_xaxes(range=[current_data['longitude'].min(), current_data['longitude'].max()])
+        fig.update_yaxes(range=[current_data['latitude'].min(), current_data['latitude'].max()])
+        
         return fig
     
     def get_forecast_data(self, region: str, forecast_hours: int) -> go.Figure:
-        """Generate forecast visualization"""
+        """Generate forecast visualization with improved sizing"""
         
         # Create time series for forecast
         times = [datetime.now() + timedelta(hours=i) for i in range(forecast_hours)]
@@ -179,8 +204,9 @@ class OceanCurrentMapper:
         fig = make_subplots(
             rows=3, cols=1,
             subplot_titles=('Current Speed (m/s)', 'Wave Height (m)', 'Wind Speed (m/s)'),
-            vertical_spacing=0.08,
-            shared_xaxes=True
+            vertical_spacing=0.1,
+            shared_xaxes=True,
+            specs=[[{"secondary_y": False}], [{"secondary_y": False}], [{"secondary_y": False}]]
         )
         
         # Current Speed subplot
@@ -222,14 +248,15 @@ class OceanCurrentMapper:
             row=3, col=1
         )
         
-        # Update layout
+        # Update layout with better sizing
         fig.update_layout(
             title=f'Ocean Conditions Forecast - {region}',
-            showlegend=False,  # Remove legend since subplot titles are clear
-            width=None,
-            height=600,  # Increased height for 3 subplots
+            showlegend=False,
+            width=800,
+            height=650,
             autosize=True,
-            margin=dict(l=50, r=50, t=80, b=50)
+            margin=dict(l=60, r=50, t=80, b=60),
+            hovermode='x unified'
         )
         
         # Update x-axis labels
@@ -289,6 +316,7 @@ def create_current_map(region, resolution, show_vectors, show_speed, vector_scal
         # Return empty plot on error
         fig = go.Figure()
         fig.add_annotation(text=f"Error: {str(e)}", x=0.5, y=0.5, showarrow=False)
+        fig.update_layout(width=800, height=600)
         return fig
 
 def create_forecast(region, forecast_hours):
@@ -300,6 +328,7 @@ def create_forecast(region, forecast_hours):
         # Return empty plot on error
         fig = go.Figure()
         fig.add_annotation(text=f"Error: {str(e)}", x=0.5, y=0.5, showarrow=False)
+        fig.update_layout(width=800, height=600)
         return fig
 
 def analyze_conditions(region):
@@ -310,7 +339,7 @@ def analyze_conditions(region):
         traceback.print_exc()
         return f"Error analyzing conditions: {str(e)}"
 
-# Define the Gradio interface
+# Define the Gradio interface with improved layout
 with gr.Blocks(title="Ocean Current Mapper", theme=gr.themes.Ocean()) as demo:
     gr.Markdown("""
     <h1 style="font-size: 3em; text-align: center; color: #2E86AB; margin-bottom: 0.5em;">
@@ -330,7 +359,7 @@ with gr.Blocks(title="Ocean Current Mapper", theme=gr.themes.Ocean()) as demo:
     
     with gr.Tab("Current Map"):
         with gr.Row():
-            with gr.Column(scale=1):
+            with gr.Column(scale=1, min_width=300):
                 region = gr.Dropdown(
                     choices=["Gulf of Mexico", "California Coast", "Atlantic Coast", "Global"],
                     value="Gulf of Mexico",
@@ -352,8 +381,13 @@ with gr.Blocks(title="Ocean Current Mapper", theme=gr.themes.Ocean()) as demo:
                 )
                 update_map = gr.Button("Update Map", variant="primary")
                 
-            with gr.Column(scale=2):
-                current_map = gr.Plot(label="Ocean Current Map")
+            with gr.Column(scale=2, min_width=600):
+                current_map = gr.Plot(
+                    label="Ocean Current Map",
+                    show_label=False,
+                    container=True,
+                    scale=1
+                )
         
         update_map.click(
             fn=create_current_map,
@@ -363,7 +397,7 @@ with gr.Blocks(title="Ocean Current Mapper", theme=gr.themes.Ocean()) as demo:
     
     with gr.Tab("Forecast"):
         with gr.Row():
-            with gr.Column(scale=1):
+            with gr.Column(scale=1, min_width=300):
                 forecast_region = gr.Dropdown(
                     choices=["Gulf of Mexico", "California Coast", "Atlantic Coast", "Global"],
                     value="Gulf of Mexico",
@@ -378,8 +412,13 @@ with gr.Blocks(title="Ocean Current Mapper", theme=gr.themes.Ocean()) as demo:
                 )
                 update_forecast = gr.Button("Generate Forecast", variant="primary")
                 
-            with gr.Column(scale=2):
-                forecast_plot = gr.Plot(label="Ocean Conditions Forecast")
+            with gr.Column(scale=2, min_width=600):
+                forecast_plot = gr.Plot(
+                    label="Ocean Conditions Forecast",
+                    show_label=False,
+                    container=True,
+                    scale=1
+                )
         
         update_forecast.click(
             fn=create_forecast,
@@ -389,7 +428,7 @@ with gr.Blocks(title="Ocean Current Mapper", theme=gr.themes.Ocean()) as demo:
     
     with gr.Tab("Surfing Conditions"):
         with gr.Row():
-            with gr.Column(scale=1):
+            with gr.Column(scale=1, min_width=300):
                 surf_region = gr.Dropdown(
                     choices=["Gulf of Mexico", "California Coast", "Atlantic Coast"],
                     value="California Coast",
@@ -397,7 +436,7 @@ with gr.Blocks(title="Ocean Current Mapper", theme=gr.themes.Ocean()) as demo:
                 )
                 analyze_button = gr.Button("Analyze Conditions", variant="primary")
                 
-            with gr.Column(scale=2):
+            with gr.Column(scale=2, min_width=600):
                 surf_analysis = gr.Textbox(
                     label="Surfing Conditions Analysis",
                     lines=8,
@@ -447,7 +486,6 @@ if __name__ == "__main__":
         print("Starting Ocean Current Mapper...")
         demo.launch(
             share=True,
-            height=600,
             show_error=True,
             inbrowser=False,
             server_name="0.0.0.0",