feat: enhance graph layout with increased dimensions and improved x-axis formatting

app.py

@@ -810,13 +810,14 @@ def create_combined_time_series_graph(df):
         logger.info(f"Added infinite window moving average APR trace with {len(x_values_ma)} points")
     
     # Update layout - use simple boolean values everywhere
+    # Increase the width and height for better visualization
     fig.update_layout(
         title="Average APR Values Across All Agents",
         xaxis_title="Time",
         yaxis_title="Value",
         template="plotly_white",
-        height=600,
-        width=1000,
+        height=700,  # Increased height
+        width=1400,  # Increased width
         legend=dict(
             orientation="h",
             yanchor="bottom",
@@ -853,12 +854,36 @@ def create_combined_time_series_graph(df):
         dtick=dtick
     )
     
-    # Update x-axis
-    fig.update_xaxes(
-        showgrid=True, 
-        gridwidth=1, 
-        gridcolor='rgba(0,0,0,0.1)'
-    )
+    # Update x-axis with better formatting and focus on data points
+    # Get the actual data time range
+    if not apr_data.empty:
+        # Find the actual time range where we have data
+        data_min_time = apr_data['timestamp'].min()
+        data_max_time = apr_data['timestamp'].max()
+        
+        # Add some padding (10% on each side)
+        time_range = data_max_time - data_min_time
+        padding = time_range * 0.1
+        display_min_time = data_min_time - padding
+        display_max_time = data_max_time + padding
+        
+        # Update x-axis range to focus on the actual data
+        fig.update_xaxes(
+            showgrid=True, 
+            gridwidth=1, 
+            gridcolor='rgba(0,0,0,0.1)',
+            range=[display_min_time, display_max_time],
+            tickformat="%b %d, %H:%M",  # More detailed time format
+            tickangle=-30,  # Angle the labels for better readability
+            tickfont=dict(size=12)  # Larger font for tick labels
+        )
+    else:
+        # Default x-axis settings if no data
+        fig.update_xaxes(
+            showgrid=True, 
+            gridwidth=1, 
+            gridcolor='rgba(0,0,0,0.1)'
+        )
     
     # SIMPLIFIED APPROACH: Do a direct plot without markers for comparison
     # This creates a simple, reliable fallback plot if the advanced one fails
@@ -998,21 +1023,42 @@ def create_combined_time_series_graph(df):
                 )
             )
         
-        # Simplified layout with adjusted y-axis range
+        # Simplified layout with adjusted y-axis range and increased size
         simple_fig.update_layout(
             title="Average APR Values Across All Agents",
             xaxis_title="Time",
             yaxis_title="Value",
-                    yaxis=dict(
-                        range=[-40, -10],  # Fixed range to match the main graph
-                        tickmode='linear',
-                        tick0=0,
-                        dtick=5
-                    ),
-            height=600,
-            width=1000
+            yaxis=dict(
+                range=[-40, -10],  # Fixed range to match the main graph
+                tickmode='linear',
+                tick0=0,
+                dtick=5
+            ),
+            height=700,  # Increased height
+            width=1400,  # Increased width
+            template="plotly_white"  # Use a cleaner template
         )
         
+        # Apply the same x-axis improvements to the fallback graph
+        if not apr_data.empty:
+            # Find the actual time range where we have data
+            data_min_time = apr_data['timestamp'].min()
+            data_max_time = apr_data['timestamp'].max()
+            
+            # Add some padding (10% on each side)
+            time_range = data_max_time - data_min_time
+            padding = time_range * 0.1
+            display_min_time = data_min_time - padding
+            display_max_time = data_max_time + padding
+            
+            # Update x-axis range to focus on the actual data
+            simple_fig.update_xaxes(
+                range=[display_min_time, display_max_time],
+                tickformat="%b %d, %H:%M",
+                tickangle=-30,
+                tickfont=dict(size=12)
+            )
+        
         # Add a note about hidden agents if there are more than MAX_VISIBLE_AGENTS
         if len(unique_agents) > MAX_VISIBLE_AGENTS:
             simple_fig.add_annotation(