fix styling

time_series_gradio.py

@@ -134,10 +134,11 @@ def create_time_series_summary_gradio(historical_df: pd.DataFrame) -> dict:
         empty_fig = go.Figure()
         empty_fig.update_layout(
             title="No historical data available",
-            height=400,
+            height=500,
             font=dict(size=16, color='#CCCCCC'),
             paper_bgcolor='#000000',
             plot_bgcolor='#1a1a1a',
+            margin=dict(b=120)
         )
         return {
             'failure_rates': empty_fig,
@@ -221,27 +222,55 @@ def create_time_series_summary_gradio(historical_df: pd.DataFrame) -> dict:
     
     nvidia_df = pd.DataFrame(nvidia_data)
     
-    # Create Plotly figure for failure rates
-    fig_failure_rates = px.line(
-        failure_rate_df,
-        x='date',
-        y='failure_rate',
-        color='platform',
-        color_discrete_map={"AMD": COLORS['amd'], "NVIDIA": COLORS['nvidia']},
-        title="Overall Failure Rates Over Time",
-        labels={'failure_rate': 'Failure Rate (%)', 'date': 'Date', 'platform': 'Platform'}
-    )
-    fig_failure_rates.update_traces(mode='lines+markers', marker=dict(size=8))
+    # Create Plotly figure for failure rates with alternating colors
+    fig_failure_rates = go.Figure()
+    
+    # Add NVIDIA line (green line with white markers - Barcelona style)
+    nvidia_data = failure_rate_df[failure_rate_df['platform'] == 'NVIDIA']
+    if not nvidia_data.empty:
+        fig_failure_rates.add_trace(go.Scatter(
+            x=nvidia_data['date'],
+            y=nvidia_data['failure_rate'],
+            mode='lines+markers',
+            name='NVIDIA',
+            line=dict(color='#76B900', width=3),  # Green line
+            marker=dict(size=12, color='#FFFFFF', line=dict(color='#76B900', width=2)),  # White markers with green border
+            hovertemplate='<b>NVIDIA</b><br>Date: %{x}<br>Failure Rate: %{y:.2f}%<extra></extra>'
+        ))
+    
+    # Add AMD line (red line with gray markers - Barcelona style)
+    amd_data = failure_rate_df[failure_rate_df['platform'] == 'AMD']
+    if not amd_data.empty:
+        fig_failure_rates.add_trace(go.Scatter(
+            x=amd_data['date'],
+            y=amd_data['failure_rate'],
+            mode='lines+markers',
+            name='AMD',
+            line=dict(color='#ED1C24', width=3),  # Red line
+            marker=dict(size=12, color='#808080', line=dict(color='#ED1C24', width=2)),  # Gray markers with red border
+            hovertemplate='<b>AMD</b><br>Date: %{x}<br>Failure Rate: %{y:.2f}%<extra></extra>'
+        ))
+    
     fig_failure_rates.update_layout(
-        height=400,
+        title="Overall Failure Rates Over Time",
+        height=500,
         font=dict(size=16, color='#CCCCCC'),
         paper_bgcolor='#000000',
         plot_bgcolor='#1a1a1a',
         title_font_size=20,
-        legend=dict(font=dict(size=16), bgcolor='rgba(0,0,0,0.5)', yanchor="top", y=0.99, xanchor="left", x=0.01),
-        xaxis=dict(title_font_size=16, tickfont_size=14, gridcolor='#333333', showgrid=True),
-        yaxis=dict(title_font_size=16, tickfont_size=14, gridcolor='#333333', showgrid=True),
-        hovermode='x unified'
+        legend=dict(
+            font=dict(size=16), 
+            bgcolor='rgba(0,0,0,0.5)', 
+            orientation="h",
+            yanchor="bottom", 
+            y=-0.3, 
+            xanchor="center", 
+            x=0.5
+        ),
+        xaxis=dict(title='Date', title_font_size=16, tickfont_size=14, gridcolor='#333333', showgrid=True),
+        yaxis=dict(title='Failure Rate (%)', title_font_size=16, tickfont_size=14, gridcolor='#333333', showgrid=True),
+        hovermode='x unified',
+        margin=dict(b=120)
     )
     
     # Create Plotly figure for AMD tests
@@ -254,17 +283,26 @@ def create_time_series_summary_gradio(historical_df: pd.DataFrame) -> dict:
         title="AMD Test Results Over Time",
         labels={'count': 'Number of Tests', 'date': 'Date', 'test_type': 'Test Type'}
     )
-    fig_amd.update_traces(mode='lines+markers', marker=dict(size=8))
+    fig_amd.update_traces(mode='lines+markers', marker=dict(size=8), line=dict(width=3))
     fig_amd.update_layout(
-        height=400,
+        height=500,
         font=dict(size=16, color='#CCCCCC'),
         paper_bgcolor='#000000',
         plot_bgcolor='#1a1a1a',
         title_font_size=20,
-        legend=dict(font=dict(size=16), bgcolor='rgba(0,0,0,0.5)', yanchor="top", y=0.99, xanchor="left", x=0.01),
+        legend=dict(
+            font=dict(size=16), 
+            bgcolor='rgba(0,0,0,0.5)', 
+            orientation="h",
+            yanchor="bottom", 
+            y=-0.3, 
+            xanchor="center", 
+            x=0.5
+        ),
         xaxis=dict(title_font_size=16, tickfont_size=14, gridcolor='#333333', showgrid=True),
         yaxis=dict(title_font_size=16, tickfont_size=14, gridcolor='#333333', showgrid=True),
-        hovermode='x unified'
+        hovermode='x unified',
+        margin=dict(b=120)
     )
     
     # Create Plotly figure for NVIDIA tests
@@ -277,17 +315,26 @@ def create_time_series_summary_gradio(historical_df: pd.DataFrame) -> dict:
         title="NVIDIA Test Results Over Time",
         labels={'count': 'Number of Tests', 'date': 'Date', 'test_type': 'Test Type'}
     )
-    fig_nvidia.update_traces(mode='lines+markers', marker=dict(size=8))
+    fig_nvidia.update_traces(mode='lines+markers', marker=dict(size=8), line=dict(width=3))
     fig_nvidia.update_layout(
-        height=400,
+        height=500,
         font=dict(size=16, color='#CCCCCC'),
         paper_bgcolor='#000000',
         plot_bgcolor='#1a1a1a',
         title_font_size=20,
-        legend=dict(font=dict(size=16), bgcolor='rgba(0,0,0,0.5)', yanchor="top", y=0.99, xanchor="left", x=0.01),
+        legend=dict(
+            font=dict(size=16), 
+            bgcolor='rgba(0,0,0,0.5)', 
+            orientation="h",
+            yanchor="bottom", 
+            y=-0.3, 
+            xanchor="center", 
+            x=0.5
+        ),
         xaxis=dict(title_font_size=16, tickfont_size=14, gridcolor='#333333', showgrid=True),
         yaxis=dict(title_font_size=16, tickfont_size=14, gridcolor='#333333', showgrid=True),
-        hovermode='x unified'
+        hovermode='x unified',
+        margin=dict(b=120)
     )
     
     return {
@@ -303,18 +350,20 @@ def create_model_time_series_gradio(historical_df: pd.DataFrame, model_name: str
         empty_fig_amd = go.Figure()
         empty_fig_amd.update_layout(
             title=f"{model_name.upper()} - AMD Results Over Time",
-            height=400,
+            height=500,
             font=dict(size=16, color='#CCCCCC'),
             paper_bgcolor='#000000',
             plot_bgcolor='#1a1a1a',
+            margin=dict(b=120)
         )
         empty_fig_nvidia = go.Figure()
         empty_fig_nvidia.update_layout(
             title=f"{model_name.upper()} - NVIDIA Results Over Time",
-            height=400,
+            height=500,
             font=dict(size=16, color='#CCCCCC'),
             paper_bgcolor='#000000',
             plot_bgcolor='#1a1a1a',
+            margin=dict(b=120)
         )
         return {
             'amd_plot': empty_fig_amd,
@@ -328,18 +377,20 @@ def create_model_time_series_gradio(historical_df: pd.DataFrame, model_name: str
         empty_fig_amd = go.Figure()
         empty_fig_amd.update_layout(
             title=f"{model_name.upper()} - AMD Results Over Time",
-            height=400,
+            height=500,
             font=dict(size=16, color='#CCCCCC'),
             paper_bgcolor='#000000',
             plot_bgcolor='#1a1a1a',
+            margin=dict(b=120)
         )
         empty_fig_nvidia = go.Figure()
         empty_fig_nvidia.update_layout(
             title=f"{model_name.upper()} - NVIDIA Results Over Time",
-            height=400,
+            height=500,
             font=dict(size=16, color='#CCCCCC'),
             paper_bgcolor='#000000',
             plot_bgcolor='#1a1a1a',
+            margin=dict(b=120)
         )
         return {
             'amd_plot': empty_fig_amd,
@@ -416,17 +467,26 @@ def create_model_time_series_gradio(historical_df: pd.DataFrame, model_name: str
         title=f"{model_name.upper()} - AMD Results Over Time",
         labels={'count': 'Number of Tests', 'date': 'Date', 'test_type': 'Test Type'}
     )
-    fig_amd.update_traces(mode='lines+markers', marker=dict(size=8))
+    fig_amd.update_traces(mode='lines+markers', marker=dict(size=8), line=dict(width=3))
     fig_amd.update_layout(
-        height=400,
+        height=500,
         font=dict(size=16, color='#CCCCCC'),
         paper_bgcolor='#000000',
         plot_bgcolor='#1a1a1a',
         title_font_size=20,
-        legend=dict(font=dict(size=16), bgcolor='rgba(0,0,0,0.5)', yanchor="top", y=0.99, xanchor="left", x=0.01),
+        legend=dict(
+            font=dict(size=16), 
+            bgcolor='rgba(0,0,0,0.5)', 
+            orientation="h",
+            yanchor="bottom", 
+            y=-0.3, 
+            xanchor="center", 
+            x=0.5
+        ),
         xaxis=dict(title_font_size=16, tickfont_size=14, gridcolor='#333333', showgrid=True),
         yaxis=dict(title_font_size=16, tickfont_size=14, gridcolor='#333333', showgrid=True),
-        hovermode='x unified'
+        hovermode='x unified',
+        margin=dict(b=120)
     )
     
     # Create Plotly figure for NVIDIA
@@ -439,17 +499,26 @@ def create_model_time_series_gradio(historical_df: pd.DataFrame, model_name: str
         title=f"{model_name.upper()} - NVIDIA Results Over Time",
         labels={'count': 'Number of Tests', 'date': 'Date', 'test_type': 'Test Type'}
     )
-    fig_nvidia.update_traces(mode='lines+markers', marker=dict(size=8))
+    fig_nvidia.update_traces(mode='lines+markers', marker=dict(size=8), line=dict(width=3))
     fig_nvidia.update_layout(
-        height=400,
+        height=500,
         font=dict(size=16, color='#CCCCCC'),
         paper_bgcolor='#000000',
         plot_bgcolor='#1a1a1a',
         title_font_size=20,
-        legend=dict(font=dict(size=16), bgcolor='rgba(0,0,0,0.5)', yanchor="top", y=0.99, xanchor="left", x=0.01),
+        legend=dict(
+            font=dict(size=16), 
+            bgcolor='rgba(0,0,0,0.5)', 
+            orientation="h",
+            yanchor="bottom", 
+            y=-0.3, 
+            xanchor="center", 
+            x=0.5
+        ),
         xaxis=dict(title_font_size=16, tickfont_size=14, gridcolor='#333333', showgrid=True),
         yaxis=dict(title_font_size=16, tickfont_size=14, gridcolor='#333333', showgrid=True),
-        hovermode='x unified'
+        hovermode='x unified',
+        margin=dict(b=120)
     )
     
     return {