use plotly

app.py

@@ -367,76 +367,31 @@ with gr.Blocks(title="Model Test Results Dashboard", css=load_css(), js=js_func)
                 
                 
                 # Time-series summary displays (multiple Gradio plots)
-                time_series_failure_rates = gr.LinePlot(
+                time_series_failure_rates = gr.Plot(
                     label="",
-                    x="date",
-                    y="failure_rate",
-                    color="platform",
-                    color_map={"AMD": "#FF6B6B", "NVIDIA": "#76B900"},
-                    title="Overall Failure Rates Over Time",
-                    tooltip=["failure_rate", "date", "change"],
-                    height=300,
-                    x_label_angle=45,
-                    y_title="Failure Rate (%)",
                     elem_classes=["plot-container"]
                 )
                 
-                time_series_amd_tests = gr.LinePlot(
+                time_series_amd_tests = gr.Plot(
                     label="",
-                    x="date",
-                    y="count",
-                    color="test_type",
-                    color_map={"Passed": "#4CAF50", "Failed": "#E53E3E", "Skipped": "#FFA500"},
-                    title="AMD Test Results Over Time",
-                    tooltip=["count", "date", "change"],
-                    height=300,
-                    x_label_angle=45,
-                    y_title="Number of Tests",
                     elem_classes=["plot-container"]
                 )
                 
-                time_series_nvidia_tests = gr.LinePlot(
+                time_series_nvidia_tests = gr.Plot(
                     label="",
-                    x="date",
-                    y="count",
-                    color="test_type",
-                    color_map={"Passed": "#4CAF50", "Failed": "#E53E3E", "Skipped": "#FFA500"},
-                    title="NVIDIA Test Results Over Time",
-                    tooltip=["count", "date", "change"],
-                    height=300,
-                    x_label_angle=45,
-                    y_title="Number of Tests",
                     elem_classes=["plot-container"]
                 )
 
                 # Time-series model view (hidden by default)
                 with gr.Column(visible=False, elem_classes=["time-series-detail-view"]) as time_series_detail_view:
                     # Time-series plots for specific model (with spacing)
-                    time_series_amd_model_plot = gr.LinePlot(
+                    time_series_amd_model_plot = gr.Plot(
                         label="",
-                        x="date",
-                        y="count",
-                        color="test_type",
-                        color_map={"Passed": "#4CAF50", "Failed": "#E53E3E", "Skipped": "#FFA500"},
-                        title="AMD Results Over Time",
-                        tooltip=["count", "date", "change"],
-                        height=300,
-                        x_label_angle=45,
-                        y_title="Number of Tests",
                         elem_classes=["plot-container"]
                     )
                     
-                    time_series_nvidia_model_plot = gr.LinePlot(
+                    time_series_nvidia_model_plot = gr.Plot(
                         label="",
-                        x="date",
-                        y="count",
-                        color="test_type",
-                        color_map={"Passed": "#4CAF50", "Failed": "#E53E3E", "Skipped": "#FFA500"},
-                        title="NVIDIA Results Over Time",
-                        tooltip=["count", "date", "change"],
-                        height=300,
-                        x_label_angle=45,
-                        y_title="Number of Tests",
                         elem_classes=["plot-container"]
                     )
 

requirements.txt

@@ -1,2 +1,3 @@
 matplotlib>=3.8
 gradio_toggle
+plotly>=5.0

styles.css

@@ -960,102 +960,48 @@ h1, h2, h3, p, .markdown {
     padding: 30px 20px !important;
 }
 
-/* Historical view plot styling - increase all text sizes */
-.historical-view .plot-container svg text,
-.time-series-detail-view .plot-container svg text {
-    font-size: 18px !important;
-}
-
-/* Historical view title styling */
-.historical-view .plot-container svg text[class*="title"],
-.time-series-detail-view .plot-container svg text[class*="title"],
-.historical-view .plot-container svg g[class*="title"] text,
-.time-series-detail-view .plot-container svg g[class*="title"] text {
-    font-size: 22px !important;
-    font-weight: 600 !important;
+/* Plotly chart styling for historical view */
+.historical-view .plot-container,
+.time-series-detail-view .plot-container {
+    background-color: #000000 !important;
 }
 
-/* Historical view axis titles (x-axis and y-axis labels) */
-.historical-view .plot-container svg g[class*="xtitle"] text,
-.historical-view .plot-container svg g[class*="ytitle"] text,
-.time-series-detail-view .plot-container svg g[class*="xtitle"] text,
-.time-series-detail-view .plot-container svg g[class*="ytitle"] text,
-.historical-view .plot-container svg .xtitle text,
-.historical-view .plot-container svg .ytitle text,
-.time-series-detail-view .plot-container svg .xtitle text,
-.time-series-detail-view .plot-container svg .ytitle text {
-    font-size: 18px !important;
-    font-weight: 500 !important;
+/* Plotly specific text styling */
+.historical-view .js-plotly-plot .plotly,
+.time-series-detail-view .js-plotly-plot .plotly {
+    background-color: #000000 !important;
 }
 
-/* Historical view axis tick labels */
-.historical-view .plot-container svg g[class*="axis"] text,
-.time-series-detail-view .plot-container svg g[class*="axis"] text,
-.historical-view .plot-container svg .xaxis text,
-.historical-view .plot-container svg .yaxis text,
-.time-series-detail-view .plot-container svg .xaxis text,
-.time-series-detail-view .plot-container svg .yaxis text {
+/* Plotly legend text */
+.historical-view .js-plotly-plot .legend text,
+.time-series-detail-view .js-plotly-plot .legend text {
     font-size: 16px !important;
+    fill: #CCCCCC !important;
 }
 
-/* Historical view legend styling - make it much larger */
-.historical-view .plot-container svg g[class*="legend"] text,
-.time-series-detail-view .plot-container svg g[class*="legend"] text,
-.historical-view .plot-container svg .legend text,
-.time-series-detail-view .plot-container svg .legend text,
-.historical-view .plot-container svg g.legend text,
-.time-series-detail-view .plot-container svg g.legend text,
-.historical-view .plot-container svg text.legend,
-.time-series-detail-view .plot-container svg text.legend {
-    font-size: 18px !important;
-    font-weight: 500 !important;
-}
-
-/* Target all plotly/gradio plot text elements */
-.historical-view .plot-container .js-plotly-plot text,
-.time-series-detail-view .plot-container .js-plotly-plot text {
+/* Plotly axis titles */
+.historical-view .js-plotly-plot .g-xtitle text,
+.historical-view .js-plotly-plot .g-ytitle text,
+.time-series-detail-view .js-plotly-plot .g-xtitle text,
+.time-series-detail-view .js-plotly-plot .g-ytitle text {
     font-size: 16px !important;
+    fill: #CCCCCC !important;
 }
 
-.historical-view .plot-container .js-plotly-plot .legendtext,
-.time-series-detail-view .plot-container .js-plotly-plot .legendtext {
-    font-size: 18px !important;
-}
-
-/* Target Altair/Vega-Lite charts used by Gradio */
-.historical-view .vega-embed text,
-.time-series-detail-view .vega-embed text,
-.historical-view .mark-text text,
-.time-series-detail-view .mark-text text {
-    font-size: 18px !important;
-}
-
-/* Vega-Lite legend text */
-.historical-view .vega-embed .role-legend-label,
-.time-series-detail-view .vega-embed .role-legend-label,
-.historical-view .vega-embed g[aria-label*="legend"] text,
-.time-series-detail-view .vega-embed g[aria-label*="legend"] text {
-    font-size: 18px !important;
-    font-weight: 500 !important;
-}
-
-/* Vega-Lite axis titles */
-.historical-view .vega-embed .role-axis-title,
-.time-series-detail-view .vega-embed .role-axis-title {
-    font-size: 18px !important;
-    font-weight: 500 !important;
-}
-
-/* Vega-Lite axis labels */
-.historical-view .vega-embed .role-axis-label,
-.time-series-detail-view .vega-embed .role-axis-label {
-    font-size: 16px !important;
+/* Plotly axis tick labels */
+.historical-view .js-plotly-plot .xtick text,
+.historical-view .js-plotly-plot .ytick text,
+.time-series-detail-view .js-plotly-plot .xtick text,
+.time-series-detail-view .js-plotly-plot .ytick text {
+    font-size: 14px !important;
+    fill: #CCCCCC !important;
 }
 
-/* Vega-Lite chart title */
-.historical-view .vega-embed .role-title,
-.time-series-detail-view .vega-embed .role-title {
-    font-size: 22px !important;
+/* Plotly title */
+.historical-view .js-plotly-plot .g-gtitle text,
+.time-series-detail-view .js-plotly-plot .g-gtitle text {
+    font-size: 20px !important;
+    fill: #FFFFFF !important;
     font-weight: 600 !important;
 }
 

time_series_gradio.py

@@ -3,6 +3,8 @@ import numpy as np
 from datetime import datetime
 from data import extract_model_data
 import gradio as gr
+import plotly.express as px
+import plotly.graph_objects as go
 
 COLORS = {
     'passed': '#4CAF50',
@@ -128,11 +130,19 @@ def get_model_time_series_dfs(historical_df: pd.DataFrame, model_name: str) -> d
 
 def create_time_series_summary_gradio(historical_df: pd.DataFrame) -> dict:
     if historical_df.empty or 'date' not in historical_df.columns:
-        empty_df = pd.DataFrame({'date': [], 'failure_rate': [], 'platform': []})
+        # Create empty Plotly figure
+        empty_fig = go.Figure()
+        empty_fig.update_layout(
+            title="No historical data available",
+            height=400,
+            font=dict(size=16, color='#CCCCCC'),
+            paper_bgcolor='#000000',
+            plot_bgcolor='#1a1a1a',
+        )
         return {
-            'failure_rates': gr.LinePlot(empty_df, x="date", y="failure_rate", color="platform", title="No historical data available", tooltip=["failure_rate", "date", "change"]),
-            'amd_tests': gr.LinePlot(empty_df, x="date", y="failure_rate", color="platform", title="No historical data available", tooltip=["count", "date", "change"]),
-            'nvidia_tests': gr.LinePlot(empty_df, x="date", y="failure_rate", color="platform", title="No historical data available", tooltip=["count", "date", "change"])
+            'failure_rates': gr.Plot(value=empty_fig),
+            'amd_tests': gr.Plot(value=empty_fig),
+            'nvidia_tests': gr.Plot(value=empty_fig)
         }
     
     daily_stats = []
@@ -211,61 +221,159 @@ def create_time_series_summary_gradio(historical_df: pd.DataFrame) -> dict:
     
     nvidia_df = pd.DataFrame(nvidia_data)
     
-    return {
-        'failure_rates': gr.LinePlot(
-            failure_rate_df,
-            x="date",
-            y="failure_rate",
-            color="platform",
-            color_map={"AMD": COLORS['amd'], "NVIDIA": COLORS['nvidia']},
-            title="Overall Failure Rates Over Time",
-            tooltip=["failure_rate", "date", "change"],
-            height=400,
-            x_label_angle=45,
-            y_title="Failure Rate (%)"
+    # 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', hovertemplate='%{y:.2f}%<br>%{x}<extra></extra>')
+    fig_failure_rates.update_layout(
+        height=400,
+        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)'),
+        xaxis=dict(
+            title_font_size=16,
+            tickfont_size=14,
+            gridcolor='#333333',
+            showgrid=True
         ),
-        'amd_tests': gr.LinePlot(
-            amd_df,
-            x="date",
-            y="count",
-            color="test_type",
-            color_map={"Passed": COLORS['passed'], "Failed": COLORS['failed'], "Skipped": COLORS['skipped']},
-            title="AMD Test Results Over Time",
-            tooltip=["count", "date", "change"],
-            height=400,
-            x_label_angle=45,
-            y_title="Number of Tests"
+        yaxis=dict(
+            title_font_size=16,
+            tickfont_size=14,
+            gridcolor='#333333',
+            showgrid=True
         ),
-        'nvidia_tests': gr.LinePlot(
-            nvidia_df,
-            x="date",
-            y="count",
-            color="test_type",
-            color_map={"Passed": COLORS['passed'], "Failed": COLORS['failed'], "Skipped": COLORS['skipped']},
-            title="NVIDIA Test Results Over Time",
-            tooltip=["count", "date", "change"],
-            height=400,
-            x_label_angle=45,
-            y_title="Number of Tests"
-        )
+        hovermode='x unified'
+    )
+    
+    # Create Plotly figure for AMD tests
+    fig_amd = px.line(
+        amd_df,
+        x='date',
+        y='count',
+        color='test_type',
+        color_discrete_map={"Passed": COLORS['passed'], "Failed": COLORS['failed'], "Skipped": COLORS['skipped']},
+        title="AMD Test Results Over Time",
+        labels={'count': 'Number of Tests', 'date': 'Date', 'test_type': 'Test Type'}
+    )
+    fig_amd.update_traces(mode='lines+markers', hovertemplate='%{y}<br>%{x}<extra></extra>')
+    fig_amd.update_layout(
+        height=400,
+        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)'),
+        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'
+    )
+    
+    # Create Plotly figure for NVIDIA tests
+    fig_nvidia = px.line(
+        nvidia_df,
+        x='date',
+        y='count',
+        color='test_type',
+        color_discrete_map={"Passed": COLORS['passed'], "Failed": COLORS['failed'], "Skipped": COLORS['skipped']},
+        title="NVIDIA Test Results Over Time",
+        labels={'count': 'Number of Tests', 'date': 'Date', 'test_type': 'Test Type'}
+    )
+    fig_nvidia.update_traces(mode='lines+markers', hovertemplate='%{y}<br>%{x}<extra></extra>')
+    fig_nvidia.update_layout(
+        height=400,
+        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)'),
+        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'
+    )
+    
+    return {
+        'failure_rates': gr.Plot(value=fig_failure_rates),
+        'amd_tests': gr.Plot(value=fig_amd),
+        'nvidia_tests': gr.Plot(value=fig_nvidia)
     }
 
 
 def create_model_time_series_gradio(historical_df: pd.DataFrame, model_name: str) -> dict:
     if historical_df.empty or 'date' not in historical_df.columns:
-        empty_df = pd.DataFrame({'date': [], 'count': [], 'test_type': []})
+        # Create empty Plotly figures
+        empty_fig_amd = go.Figure()
+        empty_fig_amd.update_layout(
+            title=f"{model_name.upper()} - AMD Results Over Time",
+            height=400,
+            font=dict(size=16, color='#CCCCCC'),
+            paper_bgcolor='#000000',
+            plot_bgcolor='#1a1a1a',
+        )
+        empty_fig_nvidia = go.Figure()
+        empty_fig_nvidia.update_layout(
+            title=f"{model_name.upper()} - NVIDIA Results Over Time",
+            height=400,
+            font=dict(size=16, color='#CCCCCC'),
+            paper_bgcolor='#000000',
+            plot_bgcolor='#1a1a1a',
+        )
         return {
-            'amd_plot': gr.LinePlot(empty_df, x="date", y="count", color="test_type", title=f"{model_name.upper()} - AMD Results Over Time", tooltip=["count", "date", "change"]),
-            'nvidia_plot': gr.LinePlot(empty_df, x="date", y="count", color="test_type", title=f"{model_name.upper()} - NVIDIA Results Over Time", tooltip=["count", "date", "change"])
+            'amd_plot': gr.Plot(value=empty_fig_amd),
+            'nvidia_plot': gr.Plot(value=empty_fig_nvidia)
         }
     
     model_data = historical_df[historical_df.index.str.lower() == model_name.lower()]
     
     if model_data.empty:
-        empty_df = pd.DataFrame({'date': [], 'count': [], 'test_type': []})
+        # Create empty Plotly figures
+        empty_fig_amd = go.Figure()
+        empty_fig_amd.update_layout(
+            title=f"{model_name.upper()} - AMD Results Over Time",
+            height=400,
+            font=dict(size=16, color='#CCCCCC'),
+            paper_bgcolor='#000000',
+            plot_bgcolor='#1a1a1a',
+        )
+        empty_fig_nvidia = go.Figure()
+        empty_fig_nvidia.update_layout(
+            title=f"{model_name.upper()} - NVIDIA Results Over Time",
+            height=400,
+            font=dict(size=16, color='#CCCCCC'),
+            paper_bgcolor='#000000',
+            plot_bgcolor='#1a1a1a',
+        )
         return {
-            'amd_plot': gr.LinePlot(empty_df, x="date", y="count", color="test_type", title=f"{model_name.upper()} - AMD Results Over Time", tooltip=["count", "date", "change"]),
-            'nvidia_plot': gr.LinePlot(empty_df, x="date", y="count", color="test_type", title=f"{model_name.upper()} - NVIDIA Results Over Time", tooltip=["count", "date", "change"])
+            'amd_plot': gr.Plot(value=empty_fig_amd),
+            'nvidia_plot': gr.Plot(value=empty_fig_nvidia)
         }
     
     dates = sorted(model_data['date'].unique())
@@ -328,29 +436,73 @@ def create_model_time_series_gradio(historical_df: pd.DataFrame, model_name: str
     amd_df = pd.DataFrame(amd_data)
     nvidia_df = pd.DataFrame(nvidia_data)
     
-    return {
-        'amd_plot': gr.LinePlot(
-            amd_df,
-            x="date",
-            y="count",
-            color="test_type",
-            color_map={"Passed": COLORS['passed'], "Failed": COLORS['failed'], "Skipped": COLORS['skipped']},
-            title=f"{model_name.upper()} - AMD Results Over Time",
-            x_label_angle=45,
-            y_title="Number of Tests",
-            height=400,
-            tooltip=["count", "date", "change"]
+    # Create Plotly figure for AMD
+    fig_amd = px.line(
+        amd_df,
+        x='date',
+        y='count',
+        color='test_type',
+        color_discrete_map={"Passed": COLORS['passed'], "Failed": COLORS['failed'], "Skipped": COLORS['skipped']},
+        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', hovertemplate='%{y}<br>%{x}<extra></extra>')
+    fig_amd.update_layout(
+        height=400,
+        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)'),
+        xaxis=dict(
+            title_font_size=16,
+            tickfont_size=14,
+            gridcolor='#333333',
+            showgrid=True
         ),
-        'nvidia_plot': gr.LinePlot(
-            nvidia_df,
-            x="date",
-            y="count",
-            color="test_type",
-            color_map={"Passed": COLORS['passed'], "Failed": COLORS['failed'], "Skipped": COLORS['skipped']},
-            title=f"{model_name.upper()} - NVIDIA Results Over Time",
-            x_label_angle=45,
-            y_title="Number of Tests",
-            height=400,
-            tooltip=["count", "date", "change"]
-        )
+        yaxis=dict(
+            title_font_size=16,
+            tickfont_size=14,
+            gridcolor='#333333',
+            showgrid=True
+        ),
+        hovermode='x unified'
+    )
+    
+    # Create Plotly figure for NVIDIA
+    fig_nvidia = px.line(
+        nvidia_df,
+        x='date',
+        y='count',
+        color='test_type',
+        color_discrete_map={"Passed": COLORS['passed'], "Failed": COLORS['failed'], "Skipped": COLORS['skipped']},
+        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', hovertemplate='%{y}<br>%{x}<extra></extra>')
+    fig_nvidia.update_layout(
+        height=400,
+        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)'),
+        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'
+    )
+    
+    return {
+        'amd_plot': gr.Plot(value=fig_amd),
+        'nvidia_plot': gr.Plot(value=fig_nvidia)
     }