feat: add plot ranking ladder

src/components/visualizations.py

@@ -7,6 +7,8 @@ import plotly.express as px
 import pandas as pd
 from typing import Optional, Dict, List, Set
 from ..core.glicko2_ranking import analyze_glicko2_rankings
+import plotly.graph_objects as go
+import numpy as np
 
 
 def clean_device_id(device_id: str) -> str:
@@ -315,6 +317,180 @@ def render_leaderboard_table(df: pd.DataFrame, filters: Dict):
     )
 
 
+def create_device_radar_chart(g2_confident_display: pd.DataFrame, top_n: int = 10):
+    """Create a radar chart comparing the top N devices across different performance metrics."""
+    # Select top N devices
+    top_devices = g2_confident_display.nlargest(top_n, "Rating")
+
+    # Normalize metrics to 0-100 scale for better visualization
+    metrics = ["Rating", "Token Rating", "Prompt Rating"]
+    for metric in metrics:
+        min_val = top_devices[metric].min()
+        max_val = top_devices[metric].max()
+        top_devices[f"{metric}_normalized"] = (
+            (top_devices[metric] - min_val) / (max_val - min_val)
+        ) * 100
+
+    # Create radar chart
+    fig = go.Figure()
+
+    # Add a trace for each device
+    for idx, row in top_devices.iterrows():
+        fig.add_trace(
+            go.Scatterpolar(
+                r=[
+                    row["Rating_normalized"],
+                    row["Token Rating_normalized"],
+                    row["Prompt Rating_normalized"],
+                    row["Rating_normalized"],  # Close the shape
+                ],
+                theta=["Overall", "Token Gen", "Prompt Proc", "Overall"],
+                fill="toself",
+                name=f"{row['Device']} ({row['Platform']})",
+                line=dict(
+                    color=px.colors.qualitative.Set1[
+                        idx % len(px.colors.qualitative.Set1)
+                    ]
+                ),
+                hovertemplate="<b>%{name}</b><br>"
+                + "Overall: %{r[0]:.1f}%<br>"
+                + "Token Gen: %{r[1]:.1f}%<br>"
+                + "Prompt Proc: %{r[2]:.1f}%<br>"
+                + "<extra></extra>",
+            )
+        )
+
+    # Update layout
+    fig.update_layout(
+        polar=dict(
+            radialaxis=dict(visible=True, range=[0, 100], tickfont=dict(size=10)),
+            angularaxis=dict(tickfont=dict(size=12)),
+        ),
+        showlegend=True,
+        legend=dict(orientation="h", yanchor="bottom", y=1.02, xanchor="right", x=1),
+        title=dict(
+            text=f"Performance Comparison of Top {top_n} Devices",
+            x=0.5,
+            y=0.95,
+            font=dict(size=16),
+        ),
+        margin=dict(t=100, l=50, r=50, b=50),
+        height=600,
+    )
+
+    return fig
+
+
+def create_ranking_ladder(g2_confident_display: pd.DataFrame, top_n: int = 20):
+    """Create a ranking ladder visualization showing device positions and confidence intervals."""
+    # Select top N devices
+    top_devices = g2_confident_display.nlargest(top_n, "Rating").copy()
+
+    # Create y-axis positions (rank 1 at top)
+    top_devices["rank_position"] = np.arange(1, len(top_devices) + 1)
+
+    # Create figure
+    fig = go.Figure()
+
+    # Add confidence intervals
+    for idx, row in top_devices.iterrows():
+        # Add confidence interval bars
+        fig.add_trace(
+            go.Scatter(
+                x=[
+                    row["Rating"] - row["Rating Deviation"],
+                    row["Rating"] + row["Rating Deviation"],
+                ],
+                y=[row["rank_position"], row["rank_position"]],
+                mode="lines",
+                line=dict(color="rgba(0,0,0,0.3)", width=8),
+                showlegend=False,
+                hoverinfo="skip",
+            )
+        )
+
+    # Add rating points
+    for platform in top_devices["Platform"].unique():
+        platform_devices = top_devices[top_devices["Platform"] == platform]
+        fig.add_trace(
+            go.Scatter(
+                x=platform_devices["Rating"],
+                y=platform_devices["rank_position"],
+                mode="markers+text",
+                marker=dict(
+                    size=12,
+                    color=px.colors.qualitative.Set1[
+                        list(top_devices["Platform"].unique()).index(platform)
+                        % len(px.colors.qualitative.Set1)
+                    ],
+                ),
+                text=platform_devices["Device"],
+                textposition="middle right",
+                textfont=dict(
+                    color="rgba(0,0,0,1.0)",  # Full black for maximum contrast
+                    size=12,  # Slightly larger
+                    family="Arial Black, sans-serif",  # Bold font
+                ),
+                name=platform,
+                hovertemplate="<b>%{text}</b><br>"
+                + "Rank: #%{y:.0f}<br>"
+                + "Rating: %{x:.0f}<br>"
+                + "Deviation: ±%{customdata[0]:.0f}<br>"
+                + "<extra></extra>",
+                customdata=platform_devices[["Rating Deviation"]].values,
+            )
+        )
+
+    # Update layout
+    fig.update_layout(
+        title=dict(
+            text=f"Device Ranking Ladder (Top {top_n})",
+            x=0.5,
+            y=0.95,
+            font=dict(size=16, family="Arial, sans-serif", color="rgba(0,0,0,1.0)"),
+        ),
+        xaxis=dict(
+            title="Rating",
+            showgrid=True,
+            gridwidth=1,
+            gridcolor="rgba(0,0,0,0.1)",
+            autorange="reversed",  # Reverse x-axis to show highest values on left
+            titlefont=dict(
+                size=14, family="Arial, sans-serif", color="rgba(0,0,0,1.0)"
+            ),
+        ),
+        yaxis=dict(
+            title="Rank",
+            showgrid=True,
+            gridwidth=1,
+            gridcolor="rgba(0,0,0,0.1)",
+            tickmode="array",
+            tickvals=top_devices["rank_position"],
+            ticktext=[f"#{i}" for i in range(1, len(top_devices) + 1)],
+            autorange="reversed",  # This will put rank 1 at the top
+            titlefont=dict(
+                size=14, family="Arial, sans-serif", color="rgba(0,0,0,1.0)"
+            ),
+        ),
+        showlegend=True,
+        legend=dict(
+            orientation="h",
+            yanchor="bottom",
+            y=1.02,
+            xanchor="right",
+            x=1,
+            font=dict(size=12, family="Arial, sans-serif", color="rgba(0,0,0,1.0)"),
+        ),
+        margin=dict(t=100, l=50, r=200, b=50),
+        height=800,
+        hovermode="closest",
+        paper_bgcolor="rgba(255,255,255,1)",  # Pure white background
+        plot_bgcolor="rgba(255,255,255,1)",  # Pure white plot area
+    )
+
+    return fig
+
+
 def render_device_rankings(df: pd.DataFrame):
     """Render device rankings using Glicko-2 algorithm."""
     if df.empty:
@@ -432,6 +608,12 @@ def render_device_rankings(df: pd.DataFrame):
                 g2_confident_display.index = g2_confident_display.index + 1
                 g2_confident_display = g2_confident_display.rename_axis("Rank")
 
+                # Display the ranking ladder
+                st.plotly_chart(
+                    create_ranking_ladder(g2_confident_display, top_n=20),
+                    use_container_width=True,
+                )
+
                 # Display the table
                 st.dataframe(
                     g2_confident_display[
@@ -450,20 +632,6 @@ def render_device_rankings(df: pd.DataFrame):
                     hide_index=False,
                 )
 
-                # # Platform statistics
-                # st.markdown("#### Platform Statistics")
-                # platform_stats = (
-                #     g2_confident_display.groupby("Platform")
-                #     .agg(
-                #         {
-                #             "Rating": ["mean", "std"],
-                #         }
-                #     )
-                #     .round(0)
-                #     .astype(int)
-                # )
-                # st.dataframe(platform_stats, use_container_width=True)
-
             else:
                 st.warning(
                     "No confident rankings available. Try adjusting the minimum matches threshold."