feat: enhance graph responsiveness and add annotations for clarity

app.py

@@ -806,14 +806,15 @@ def create_combined_time_series_graph(df):
         logger.info("Cumulative APR graph line has been removed as requested")
     
     # Update layout - use simple boolean values everywhere
-    # Increase the width and height for better visualization
+    # Make chart responsive instead of fixed width
     fig.update_layout(
         title="Babydegen agents",
-        xaxis_title="Time",
-        yaxis_title="Percent drawdown || Agent APR",
+        xaxis_title=None,  # Remove x-axis title to use annotation instead
+        yaxis_title=None,  # Remove the y-axis title as we'll use annotations instead
         template="plotly_white",
-        height=700,  # Increased height
-        width=1400,  # Increased width
+        height=600,  # Reduced height for better fit on smaller screens
+        # Removed fixed width to enable responsiveness
+        autosize=True,  # Enable auto-sizing for responsiveness
         legend=dict(
             orientation="h",
             yanchor="bottom",
@@ -822,10 +823,47 @@ def create_combined_time_series_graph(df):
             x=1,
             groupclick="toggleitem"
         ),
-        margin=dict(r=20, l=20, t=30, b=20),
+        margin=dict(r=30, l=120, t=40, b=50),  # Increased bottom margin for x-axis title
         hovermode="closest"
     )
     
+    # Add annotations for y-axis regions
+    fig.add_annotation(
+        x=-0.08,  # Position further from the y-axis to avoid overlapping with tick labels
+        y=-25,    # Middle of the negative region
+        xref="paper",
+        yref="y",
+        text="Percent drawdown",
+        showarrow=False,
+        font=dict(size=14, family="Arial, sans-serif", color="black", weight="bold"),  # Smaller font size
+        textangle=-90,  # Rotate text to be vertical
+        align="center"
+    )
+    
+    fig.add_annotation(
+        x=-0.08,  # Position further from the y-axis to avoid overlapping with tick labels
+        y=50,     # Middle of the positive region
+        xref="paper",
+        yref="y",
+        text="Agent APR",
+        showarrow=False,
+        font=dict(size=14, family="Arial, sans-serif", color="black", weight="bold"),  # Smaller font size
+        textangle=-90,  # Rotate text to be vertical
+        align="center"
+    )
+    
+    # Add x-axis title as annotation to match y-axis annotation style
+    fig.add_annotation(
+        x=0.5,    # Center of the x-axis
+        y=-0.15,  # Below the x-axis
+        xref="paper",
+        yref="paper",
+        text="Date",
+        showarrow=False,
+        font=dict(size=14, family="Arial, sans-serif", color="black", weight="bold"),  # Match y-axis font
+        align="center"
+    )
+    
     # Update y-axis with fixed range of -50 to +100 for psychological effect
     fig.update_yaxes(
         showgrid=True, 
@@ -835,7 +873,8 @@ def create_combined_time_series_graph(df):
         autorange=False,  # Disable autoscaling
         range=[-50, 100],  # Set fixed range from -50 to +100
         tickformat=".2f",  # Format tick labels with 2 decimal places
-        tickfont=dict(size=16, family="Arial, sans-serif", color="black", weight="bold")  # Larger and bold font for tick labels
+        tickfont=dict(size=12, family="Arial, sans-serif", color="black", weight="bold"),  # Smaller font for tick labels
+        title=None  # Remove the built-in axis title since we're using annotations
     )
     
     # Update x-axis with better formatting and autoscaling
@@ -845,9 +884,10 @@ def create_combined_time_series_graph(df):
         gridcolor='rgba(0,0,0,0.1)',
         # No fixed range - let Plotly autoscale
         autorange=True,  # Explicitly enable autoscaling
-        tickformat="%b %d, %H:%M",  # More detailed time format
+        tickformat="%b %d",  # Simplified date format without time
         tickangle=-30,  # Angle the labels for better readability
-        tickfont=dict(size=16, family="Arial, sans-serif", color="black", weight="bold")  # Larger and bold font for tick labels
+        tickfont=dict(size=12, family="Arial, sans-serif", color="black", weight="bold"),  # Smaller font for tick labels
+        title=None  # Remove built-in title to use annotation instead
     )
     
     # SIMPLIFIED APPROACH: Do a direct plot without markers for comparison
@@ -991,25 +1031,65 @@ def create_combined_time_series_graph(df):
         # Simplified layout with adjusted y-axis range and increased size
         simple_fig.update_layout(
             title="Babydegen agents",
-            xaxis_title="Time",
-            yaxis_title="Percent drawdown || Agent APR",
+            xaxis_title=None,  # Remove x-axis title to use annotation instead
+            yaxis_title=None,  # Remove the y-axis title as we'll use annotations instead
                     yaxis=dict(
                         # No fixed range - let Plotly autoscale
                         autorange=True,  # Explicitly enable autoscaling
                         tickformat=".2f",  # Format tick labels with 2 decimal places
                         tickfont=dict(size=12)  # Larger font for tick labels
                     ),
-            height=700,  # Increased height
-            width=1400,  # Increased width
-            template="plotly_white"  # Use a cleaner template
+            height=600,  # Reduced height for better fit
+            # Removed fixed width to enable responsiveness
+            autosize=True,  # Enable auto-sizing for responsiveness
+            template="plotly_white",  # Use a cleaner template
+            margin=dict(r=30, l=120, t=40, b=50)  # Increased bottom margin for x-axis title
+        )
+        
+        # Add annotations for y-axis regions in the fallback graph
+        simple_fig.add_annotation(
+            x=-0.08,  # Position further from the y-axis to avoid overlapping with tick labels
+            y=-25,    # Middle of the negative region
+            xref="paper",
+            yref="y",
+            text="Percent drawdown",
+            showarrow=False,
+            font=dict(size=12, family="Arial, sans-serif", color="black"),  # Even smaller font for fallback
+            textangle=-90,  # Rotate text to be vertical
+            align="center"
+        )
+        
+        simple_fig.add_annotation(
+            x=-0.08,  # Position further from the y-axis to avoid overlapping with tick labels
+            y=50,     # Middle of the positive region
+            xref="paper",
+            yref="y",
+            text="Agent APR",
+            showarrow=False,
+            font=dict(size=12, family="Arial, sans-serif", color="black"),  # Even smaller font for fallback
+            textangle=-90,  # Rotate text to be vertical
+            align="center"
+        )
+        
+        # Add x-axis title as annotation to match y-axis annotation style
+        simple_fig.add_annotation(
+            x=0.5,    # Center of the x-axis
+            y=-0.15,  # Below the x-axis
+            xref="paper",
+            yref="paper",
+            text="Date",
+            showarrow=False,
+            font=dict(size=12, family="Arial, sans-serif", color="black"),  # Match y-axis font
+            align="center"
         )
         
         # Apply autoscaling to the x-axis for the fallback graph
         simple_fig.update_xaxes(
             autorange=True,  # Explicitly enable autoscaling
-            tickformat="%b %d, %H:%M",
+            tickformat="%b %d",  # Simplified date format without time
             tickangle=-30,
-            tickfont=dict(size=12)
+            tickfont=dict(size=12),
+            title=None  # Remove built-in title to use annotation instead
         )
         
         # Add a note about hidden agents if there are more than MAX_VISIBLE_AGENTS
@@ -1462,7 +1542,7 @@ def create_visualizations():
     
     return fig_swaps_chain, fig_bridges_chain, fig_agents_registered, fig_tvl
 
-# Modify dashboard function to remove the diagnostics section
+# Modify dashboard function to make the plot container responsive
 def dashboard():
     with gr.Blocks() as demo:
         gr.Markdown("# Average Modius Agent Performance")
@@ -1472,8 +1552,9 @@ def dashboard():
             with gr.Column():
                 refresh_btn = gr.Button("Refresh APR Data")
                 
-                # Create container for plotly figure (combined graph only)
-                combined_graph = gr.Plot(label="APR for All Agents")
+                # Create container for plotly figure with responsive sizing
+                with gr.Column():
+                    combined_graph = gr.Plot(label="APR for All Agents", elem_id="responsive_plot")
                 
                 # Create compact toggle controls at the bottom of the graph
                 with gr.Row(visible=True):
@@ -1488,10 +1569,21 @@ def dashboard():
                             with gr.Column(scale=1, min_width=150):
                                 adjusted_apr_toggle = gr.Checkbox(label="Adjusted APR Moving Average", value=True, elem_id="adjusted_apr_toggle")
                 
-                # Add custom CSS for styling the toggle checkboxes
+                # Add custom CSS for making the plot responsive
                 gr.HTML("""
                 <style>
-                    /* Style for toggle checkboxes */
+                    /* Make plot responsive */
+                    #responsive_plot {
+                        width: 100% !important;
+                        max-width: 100% !important;
+                    }
+                    #responsive_plot > div {
+                        width: 100% !important;
+                        height: auto !important;
+                        min-height: 500px !important;
+                    }
+                    
+                    /* Existing toggle checkbox styling */
                     #apr_toggle .gr-checkbox {
                         accent-color: #e74c3c !important;
                     }