update leaderboard

README.md

@@ -1,6 +1,6 @@
----
-title: lmgame
-app_file: gradio_app_v2.py
-sdk: gradio
-sdk_version: 5.23.1
----
+---
+title: lmgame
+app_file: gradio_app_v2.py
+sdk: gradio
+sdk_version: 5.23.1
+---

data_visualization.py

@@ -1,11 +1,7 @@
-import matplotlib
-matplotlib.use('Agg')  # Use Agg backend for thread safety
-import matplotlib.pyplot as plt
+import plotly.graph_objects as go
 import numpy as np
 import pandas as pd
-import seaborn as sns
 import json
-import os
 from leaderboard_utils import (
     get_organization,
     get_mario_leaderboard,
@@ -22,7 +18,6 @@ from leaderboard_utils import (
 with open('assets/model_color.json', 'r') as f:
     MODEL_COLORS = json.load(f)
 
-# Define game score columns mapping
 GAME_SCORE_COLUMNS = {
     "Super Mario Bros": "Score",
     "Sokoban": "Levels Cracked",
@@ -31,6 +26,9 @@ GAME_SCORE_COLUMNS = {
     "Tetris (complete)": "Score",
     "Tetris (planning only)": "Score"
 }
+def get_model_prefix(name):
+    return name.split('-')[0]
+
 
 def normalize_values(values, mean, std):
     """
@@ -50,34 +48,15 @@ def normalize_values(values, mean, std):
     # Scale z-scores to 0-100 range, with mean at 50
     scaled_values = [max(0, min(100, (z * 30) + 50)) for z in z_scores]
     return scaled_values
-
-def simplify_model_name(model_name):
-    """
-    Simplify model name by either taking first 11 chars or string before third '-'
-    """
-    hyphen_parts = model_name.split('-')
-    return '-'.join(hyphen_parts[:3]) if len(hyphen_parts) >= 3 else model_name[:11]
+def simplify_model_name(name):
+    if name == "claude-3-7-sonnet-20250219(thinking)":
+        name ="claude-3-7-thinking"
+    parts = name.split('-')
+    return '-'.join(parts[:4]) + '-...' if len(parts) > 4 else name
 
 def create_horizontal_bar_chart(df, game_name):
-    """
-    Create horizontal bar chart for detailed game view
-    
-    Args:
-        df (pd.DataFrame): DataFrame containing game data
-        game_name (str): Name of the game to display
-        
-    Returns:
-        matplotlib.figure.Figure: The generated bar chart figure
-    """
-    # Close any existing figures to prevent memory leaks
-    plt.close('all')
-    
-    # Set style
-    plt.style.use('default')
-    # Increase figure width to accommodate long model names
-    fig, ax = plt.subplots(figsize=(20, 11))
-    
-    # Sort by score
+
+
     if game_name == "Super Mario Bros":
         score_col = "Score"
         df_sorted = df.sort_values(by=score_col, ascending=True)
@@ -106,445 +85,475 @@ def create_horizontal_bar_chart(df, game_name):
         df_sorted = df.sort_values(by=score_col, ascending=True)
     else:
         return None
-    
-    # Create color gradient
-    colors = plt.cm.viridis(np.linspace(0.2, 0.8, len(df_sorted)))
-    
-    # Create horizontal bars
-    bars = ax.barh(range(len(df_sorted)), df_sorted[score_col], color=colors)
-    
-    # Add more space for labels on the left
-    plt.subplots_adjust(left=0.3)
-    
-    # Customize the chart
-    ax.set_yticks(range(len(df_sorted)))
-    
-    # Format player names: keep organization info and truncate the rest if too long
-    def format_player_name(player, org):
-        max_length = 40  # Maximum length for player name
-        if len(player) > max_length:
-            # Keep the first part and last part of the name
-            parts = player.split('-')
-            if len(parts) > 3:
-                formatted = f"{parts[0]}-{parts[1]}-...{parts[-1]}"
-            else:
-                formatted = player[:max_length-3] + "..."
-        else:
-            formatted = player
-        return f"{formatted} [{org}]"
-    
-    player_labels = [format_player_name(row['Player'], row['Organization']) 
-                    for _, row in df_sorted.iterrows()]
-    ax.set_yticklabels(player_labels, fontsize=9)
-    
-    # Add value labels on the bars
-    for i, bar in enumerate(bars):
-        width = bar.get_width()
-        if game_name == "Candy Crash":
-            score_text = f'{width:.1f}'
-        else:
-            score_text = f'{width:.0f}'
-            
-        ax.text(width, bar.get_y() + bar.get_height()/2, 
-                score_text,
-                ha='left', va='center',
-                fontsize=10,
-                fontweight='bold',
-                color='white',
-                bbox=dict(facecolor=(0, 0, 0, 0.3),
-                         edgecolor='none', 
-                         alpha=0.5,
-                         pad=2))
-    
-    # Set title and labels
-    ax.set_title(f"{game_name} Performance", 
-                 pad=20, 
-                 fontsize=14, 
-                 fontweight='bold',
-                 color='#2c3e50')
-    
-    if game_name == "Sokoban":
-        ax.set_xlabel("Maximum Level Reached", 
-                     fontsize=12, 
-                     fontweight='bold',
-                     color='#2c3e50',
-                     labelpad=10)
-    else:
-        ax.set_xlabel(score_col, 
-                     fontsize=12, 
-                     fontweight='bold',
-                     color='#2c3e50',
-                     labelpad=10)
-    
-    # Add grid lines
-    ax.grid(True, axis='x', linestyle='--', alpha=0.3)
-    
-    # Remove top and right spines
-    ax.spines['top'].set_visible(False)
-    ax.spines['right'].set_visible(False)
-    
-    # Adjust layout
-    plt.tight_layout()
-    
+
+
+
+    x = df_sorted[score_col]
+    y = [f"{simplify_model_name(row['Player'])} [{row['Organization']}]" for _, row in df_sorted.iterrows()]
+    colors = [MODEL_COLORS.get(row['Player'], '#808080') for _, row in df_sorted.iterrows()]
+    texts = [f"{v:.1f}" if game_name == "Candy Crash" else f"{int(v)}" for v in x]
+
+    fig = go.Figure(go.Bar(
+        x=x,
+        y=y,
+        orientation='h',
+        marker_color=colors,
+        text=texts,
+        textposition='auto',
+        hovertemplate='%{y}<br>Score: %{x}<extra></extra>'
+    ))
+
+    fig.update_layout(
+        autosize=False,
+        width=800,
+        height=600,
+        margin=dict(l=150, r=150, t=40, b=200),
+        title=dict(
+            text=f"{game_name} Performance",
+            pad=dict(t=10)
+        ),
+        yaxis=dict(automargin=True),
+        legend=dict(
+            font=dict(size=9),
+            itemsizing='trace',
+            x=1.1,
+            y=1,
+            xanchor='left',
+            yanchor='top',
+            bgcolor='rgba(255,255,255,0.6)',
+            bordercolor='gray',
+            borderwidth=1
+        )
+    )
     return fig
 
 def create_radar_charts(df):
-    """
-    Create two radar charts with improved normalization using z-scores
-    """
-    # Close any existing figures to prevent memory leaks
-    plt.close('all')
-    
-    # Define reasoning models
-    reasoning_models = [
-        'claude-3-7-sonnet-20250219(thinking)',
-        'o1-2024-12-17',
-        'gemini-2.0-flash-thinking-exp-1219',
-        'o3-mini-2025-01-31(medium)',
-        'gemini-2.5-pro-exp-03-25',
-        'o1-mini-2024-09-12',
-        'deepseek-r1'
-    ]
-    
-    # Split dataframe into reasoning and non-reasoning models
-    df_reasoning = df[df['Player'].isin(reasoning_models)]
-    df_others = df[~df['Player'].isin(reasoning_models)]
-    
-    # Get game columns
-    game_columns = [col for col in df.columns if col.endswith(' Score')]
-    categories = [col.replace(' Score', '') for col in game_columns]
-    
-    # Create figure with two subplots - adjusted size for new layout
-    fig, (ax1, ax2) = plt.subplots(1, 2, figsize=(10, 6), subplot_kw=dict(projection='polar'))
-    fig.patch.set_facecolor('white')  # Set figure background to white
+    game_cols = [c for c in df.columns if c.endswith(" Score")]
+    categories = [c.replace(" Score", "") for c in game_cols]
+
+    for col in game_cols:
+        vals = df[col].replace("_", 0).astype(float)
+        mean, std = vals.mean(), vals.std()
+        df[f"norm_{col}"] = normalize_values(vals, mean, std)
+
+    fig = go.Figure()
+    for _, row in df.iterrows():
+        player = row["Player"]
+        r = [row[f"norm_{c}"] for c in game_cols]
+
+        color = MODEL_COLORS.get(player, '#808080')  # fallback to gray
+        fig.add_trace(go.Scatterpolar(
+            r=r + [r[0]],
+            theta=categories + [categories[0]],
+            mode='lines+markers',
+            fill='toself',
+            name=player,
+            line=dict(color=color, width=2),
+            marker=dict(color=color),
+            fillcolor=color + '33',  # add transparency to fill (33 = ~20% opacity)
+            opacity=0.8
+        ))
+
+
+    fig.update_layout(
+        autosize=False,
+        width=800,
+        height=600,
+        margin=dict(l=80, r=150, t=40, b=100),
+        title=dict(
+            text="Radar Chart of AI Performance (Normalized)",
+            pad=dict(t=10)
+        ),
+        polar=dict(radialaxis=dict(visible=True, range=[0, 100])),
+        legend=dict(
+            font=dict(size=9),
+            itemsizing='trace',
+            x=1.4,
+            y=1,
+            xanchor='left',
+            yanchor='top',
+            bgcolor='rgba(255,255,255,0.6)',
+            bordercolor='gray',
+            borderwidth=1
+        )
+    )
+    return fig
+
+def get_combined_leaderboard_with_radar(rank_data, selected_games):
+    df = get_combined_leaderboard(rank_data, selected_games)
+    # Create a copy for visualization to avoid modifying the original
+    df_viz = df.copy()
+    return df, create_radar_charts(df_viz)
+
+def create_group_bar_chart(df):
+    game_cols = {}
+    for game in GAME_ORDER:
+        col = f"{game} Score"
+        if col in df.columns:
+            df[col] = df[col].replace("_", np.nan).astype(float)
+            if df[col].notna().any():
+                game_cols[game] = col
+
+    if not game_cols:
+        return go.Figure().update_layout(title="No data available")
+
+    # Drop players with no data
+    df = df.dropna(subset=game_cols.values(), how='all')
+
+    # Normalize scores per game
+    for game, col in game_cols.items():
+        valid = df[col].dropna()
+        norm_col = f"norm_{col}"
+        if valid.empty:
+            df[norm_col] = np.nan
+        else:
+            mean, std = valid.mean(), valid.std()
+            normalized = normalize_values(valid, mean, std)
+            df[norm_col] = np.nan
+            df.loc[valid.index, norm_col] = normalized
+
+    # Build consistent game order (X-axis)
+    sorted_games = [game for game in GAME_ORDER if f"norm_{game} Score" in df.columns]
+    
+    # Format game names with line breaks
+    formatted_games = []
+    for game in sorted_games:
+        if len(game) > 10 and ' ' in game:
+            parts = game.split(' ')
+            midpoint = len(parts) // 2
+            formatted_name = ' '.join(parts[:midpoint]) + '<br>' + ' '.join(parts[midpoint:])
+            formatted_games.append(formatted_name)
+        else:
+            formatted_games.append(game)
     
-    def get_game_stats(df, game_col):
-        """
-        Get mean and std for a game column, handling missing values
-        """
-        values = []
-        for val in df[game_col]:
-            if isinstance(val, str) and val == '_':
-                values.append(0)
-            else:
-                try:
-                    values.append(float(val))
-                except:
-                    values.append(0)
-        return np.mean(values), np.std(values)
-
-    def setup_radar_plot(ax, data, title):
-        ax.set_facecolor('white')  # Set subplot background to white
-        
-        num_vars = len(categories)
-        angles = np.linspace(0, 2*np.pi, num_vars, endpoint=False)
-        angles = np.concatenate((angles, [angles[0]]))
-        
-        # Plot grid lines with darker color
-        grid_values = [10, 30, 50, 70, 90]
-        ax.set_rgrids(grid_values, 
-                    labels=grid_values,
-                    angle=45, 
-                    fontsize=6, 
-                    alpha=0.7,  # Increased alpha for better visibility
-                    color='#404040')  # Darker color for grid labels
+    # Create mapping from original to formatted names
+    game_display_map = dict(zip(sorted_games, formatted_games))
     
-        # Make grid lines darker but still subtle
-        ax.grid(True, color='#404040', alpha=0.3)  # Darker grid lines
-        
-        # Define darker, more vibrant colors for the radar plots
-        colors = ['#1f77b4', '#d62728', '#2ca02c', '#ff7f0e', '#9467bd', '#8c564b']
-        
-        # Calculate game statistics once
-        game_stats = {col: get_game_stats(df, col) for col in game_columns}
-        
-        # Plot data with darker lines and higher opacity for fills
-        for idx, (_, row) in enumerate(data.iterrows()):
-            values = []
-            for col in game_columns:
-                val = row[col]
-                if isinstance(val, str) and val == '_':
-                    values.append(0)
-                else:
-                    try:
-                        values.append(float(val))
-                    except:
-                        values.append(0)
-            
-            # Normalize values using game statistics
-            normalized_values = []
-            for i, v in enumerate(values):
-                mean, std = game_stats[game_columns[i]]
-                normalized_value = normalize_values([v], mean, std)[0]
-                normalized_values.append(normalized_value)
-            
-            # Complete the circular plot
-            normalized_values = np.concatenate((normalized_values, [normalized_values[0]]))
+    # Group models by prefix, then sort alphabetically
+    model_groups = {}
+    for player in df["Player"].unique():
+        prefix = player.split('-')[0]
+        model_groups.setdefault(prefix, []).append(player)
+
+    ordered_players = []
+    for prefix in sorted(model_groups):
+        ordered_players.extend(sorted(model_groups[prefix]))
+
+    # Create one trace per player
+    fig = go.Figure()
+    for player in ordered_players:
+        row = df[df["Player"] == player]
+        if row.empty:
+            continue
+        row = row.iloc[0]
+
+        y_vals = []
+        has_data = False
+        for game in sorted_games:
+            col = f"norm_{game} Score"
+            val = row.get(col, np.nan)
+            if not np.isnan(val):
+                has_data = True
+            y_vals.append(val if not np.isnan(val) else 0)
+
+        if not has_data:
+            continue
             
-            model_name = simplify_model_name(row['Player'])
-            ax.plot(angles, normalized_values, 'o-', linewidth=2.0,  # Increased line width
-                   label=model_name,
-                   color=colors[idx % len(colors)], 
-                   markersize=4)  # Increased marker size
-            ax.fill(angles, normalized_values, 
-                   alpha=0.3,  # Increased fill opacity
-                   color=colors[idx % len(colors)])
-        
-        # Format categories
-        formatted_categories = []
-        for game in categories:
-            if game == "Tetris (planning only)":
-                game = "Tetris\n(planning)"
-            elif game == "Tetris (complete)":
-                game = "Tetris\n(complete)"
-            elif game == "Super Mario Bros":
-                game = "Super\nMario"
-            elif game == "Candy Crash":
-                game = "Candy\nCrash"
-            formatted_categories.append(game)
-        
-        ax.set_xticks(angles[:-1])
-        ax.set_xticklabels(formatted_categories, 
-                          fontsize=8,  # Slightly larger font
-                          color='#202020',  # Darker text
-                          fontweight='bold')  # Bold text
-        ax.tick_params(pad=10, colors='#202020')  # Darker tick colors
-        
-        ax.set_title(title, 
-                    pad=20, 
-                    fontsize=11,  # Slightly larger title
-                    color='#202020',  # Darker title
-                    fontweight='bold')  # Bold title
-        
-        legend = ax.legend(loc='upper right',
-                          bbox_to_anchor=(1.3, 1.1),
-                          fontsize=7,  # Slightly larger legend
-                          framealpha=0.9,  # More opaque legend
-                          edgecolor='#404040',  # Darker edge
-                          ncol=1)
-        
-        ax.set_ylim(0, 105)
-        ax.spines['polar'].set_color('#404040')  # Darker spine
-        ax.spines['polar'].set_alpha(0.5)  # More visible spine
-    
-    # Setup both plots
-    setup_radar_plot(ax1, df_reasoning, "Reasoning Models")
-    setup_radar_plot(ax2, df_others, "Non-Reasoning Models")
-    
-    plt.subplots_adjust(right=0.85, wspace=0.3)
-    
+        fig.add_trace(go.Bar(
+            name=simplify_model_name(player),
+            x=[game_display_map[game] for game in sorted_games],
+            y=y_vals,
+            marker_color=MODEL_COLORS.get(player, '#808080'),
+            hovertemplate="<b>%{fullData.name}</b><br>Score: %{y:.1f}<extra></extra>"
+        ))
+
+    fig.update_layout(
+        autosize=False,
+        width=1000,
+        height=600,
+        margin=dict(l=80, r=150, t=40, b=200),
+        title=dict(text="Grouped Bar Chart of AI Models (Consistent Trace Grouping)", pad=dict(t=10)),
+        xaxis_title="Games",
+        yaxis_title="Normalized Score",
+        xaxis=dict(
+            categoryorder='array',
+            categoryarray=[game_display_map[g] for g in sorted_games],
+            tickangle=0  # Keep text horizontal since we're using line breaks
+        ),
+        barmode='group',
+        bargap=0.2,        # Gap between game categories
+        bargroupgap=0.05,  # Gap between bars in a group
+        uniformtext=dict(mode='hide', minsize=8),  # Hide text that doesn't fit
+        legend=dict(
+            font=dict(size=9),
+            itemsizing='trace',
+            x=1.1,
+            y=1,
+            xanchor='left',
+            yanchor='top',
+            bgcolor='rgba(255,255,255,0.6)',
+            bordercolor='gray',
+            borderwidth=1
+        )
+    )
+
     return fig
 
-def get_combined_leaderboard_with_radar(rank_data, selected_games):
-    """
-    Get combined leaderboard and create radar charts
-    """
+
+
+def get_combined_leaderboard_with_group_bar(rank_data, selected_games):
+    df = get_combined_leaderboard(rank_data, selected_games)
+    # Create a copy for visualization to avoid modifying the original
+    df_viz = df.copy()
+    return df, create_group_bar_chart(df_viz)
+
+def hex_to_rgba(hex_color, alpha=0.2):
+    hex_color = hex_color.lstrip('#')
+    r = int(hex_color[0:2], 16)
+    g = int(hex_color[2:4], 16)
+    b = int(hex_color[4:6], 16)
+    return f'rgba({r}, {g}, {b}, {alpha})'
+
+
+def create_single_radar_chart(df, selected_games=None, highlight_models=None):
+    if selected_games is None:
+        selected_games = ['Super Mario Bros', '2048', 'Candy Crash', 'Sokoban']
+
+    game_cols = [f"{game} Score" for game in selected_games]
+    categories = selected_games
+    
+    # Normalize
+    for col in game_cols:
+        vals = df[col].replace("_", 0).astype(float)
+        mean, std = vals.mean(), vals.std()
+        df[f"norm_{col}"] = normalize_values(vals, mean, std)
+
+    # Group players by prefix
+    model_groups = {}
+    for player in df["Player"]:
+        prefix = get_model_prefix(player)
+        model_groups.setdefault(prefix, []).append(player)
+
+    # Order: grouped by prefix, then alphabetically
+    grouped_players = []
+    for prefix in sorted(model_groups):
+        grouped_players.extend(sorted(model_groups[prefix]))
+
+    fig = go.Figure()
+
+    for player in grouped_players:
+        row = df[df["Player"] == player]
+        if row.empty:
+            continue
+        row = row.iloc[0]
+
+        is_highlighted = highlight_models and player in highlight_models
+        color = 'red' if is_highlighted else MODEL_COLORS.get(player, '#808080')
+        fillcolor = 'rgba(255, 0, 0, 0.3)' if is_highlighted else hex_to_rgba(color, 0.2)
+
+        r = [row[f"norm_{col}"] for col in game_cols]
+
+        fig.add_trace(go.Scatterpolar(
+            r=r + [r[0]],
+            theta=categories + [categories[0]],
+            mode='lines+markers',
+            fill='toself',
+            name=simplify_model_name(row["Player"]),
+            line=dict(color=color, width=4 if is_highlighted else 2),
+            marker=dict(color=color),
+            fillcolor=fillcolor,
+            opacity=1.0 if is_highlighted else 0.7
+        ))
+
+    fig.update_layout(
+        autosize=False,
+        width=800,
+        height=600,
+        margin=dict(l=80, r=150, t=40, b=100),
+        title=dict(
+            text="Single Radar Chart (Normalized Performance)",
+            pad=dict(t=10)
+        ),
+        polar=dict(radialaxis=dict(visible=True, range=[0, 100])),
+        legend=dict(
+            font=dict(size=9),
+            itemsizing='trace',
+            x=1.4,
+            y=1,
+            xanchor='left',
+            yanchor='top',
+            bgcolor='rgba(255,255,255,0.6)',
+            bordercolor='gray',
+            borderwidth=1
+        )
+    )
+
+    return fig
+
+def get_combined_leaderboard_with_single_radar(rank_data, selected_games, highlight_models=None):
     df = get_combined_leaderboard(rank_data, selected_games)
-    radar_fig = create_radar_charts(df)
-    return df, radar_fig
+    selected_game_names = [g for g, sel in selected_games.items() if sel]
+    # Create a copy for visualization to avoid modifying the original
+    df_viz = df.copy()
+    return df, create_single_radar_chart(df_viz, selected_game_names, highlight_models)
 
 def create_organization_radar_chart(rank_data):
-    """
-    Create radar chart comparing organizations
-    """
-    # Get combined leaderboard with all games
-    df = get_combined_leaderboard(rank_data, {game: True for game in GAME_ORDER})
-    
-    # Group by organization and calculate average scores
-    org_performance = {}
-    for org in df["Organization"].unique():
-        org_df = df[df["Organization"] == org]
-        scores = {}
-        for game in GAME_ORDER:
-            game_scores = org_df[f"{game} Score"].apply(lambda x: float(x) if x != "_" else 0)
-            scores[game] = game_scores.mean()
-        org_performance[org] = scores
-    
-    # Create radar chart
-    return create_radar_charts(pd.DataFrame([org_performance]))
+    df = get_combined_leaderboard(rank_data, {g: True for g in GAME_ORDER})
+    orgs = df["Organization"].unique()
+    game_cols = [f"{g} Score" for g in GAME_ORDER if f"{g} Score" in df.columns]
+    categories = [g.replace(" Score", "") for g in game_cols]
+
+    avg_df = pd.DataFrame([
+        {
+            **{col: df[df["Organization"] == org][col].replace("_", 0).astype(float).mean() for col in game_cols},
+            "Organization": org
+        }
+        for org in orgs
+    ])
+
+    for col in game_cols:
+        vals = avg_df[col]
+        mean, std = vals.mean(), vals.std()
+        avg_df[f"norm_{col}"] = normalize_values(vals, mean, std)
+
+    fig = go.Figure()
+    for _, row in avg_df.iterrows():
+        r = [row[f"norm_{col}"] for col in game_cols]
+        fig.add_trace(go.Scatterpolar(
+            r=r + [r[0]],
+            theta=categories + [categories[0]],
+            mode='lines+markers',
+            fill='toself',
+            name=row["Organization"]
+        ))
+
+    fig.update_layout(
+        autosize=False,
+        width=800,
+        height=600,
+        margin=dict(l=80, r=150, t=40, b=200),
+        title=dict(
+            text="Radar Chart: Organization Performance (Normalized)",
+            pad=dict(t=10)
+        ),
+        polar=dict(radialaxis=dict(visible=True, range=[0, 100])),
+        legend=dict(
+            font=dict(size=9),
+            itemsizing='trace',
+            x=1.4,
+            y=1,
+            xanchor='left',
+            yanchor='top',
+            bgcolor='rgba(255,255,255,0.6)',
+            bordercolor='gray',
+            borderwidth=1
+        )
+    )
+    return fig
 
 def create_top_players_radar_chart(rank_data, n=5):
-    """
-    Create radar chart for top N players
-    """
-    # Get combined leaderboard with all games
-    df = get_combined_leaderboard(rank_data, {game: True for game in GAME_ORDER})
-    
-    # Get top N players
-    top_players = df["Player"].head(n).tolist()
-    
-    # Create radar chart for top players
-    return create_radar_charts(df[df["Player"].isin(top_players)])
+    df = get_combined_leaderboard(rank_data, {g: True for g in GAME_ORDER})
+    top_players = df.head(n)["Player"].tolist()
+    top_df = df[df["Player"].isin(top_players)]
+
+    game_cols = [f"{g} Score" for g in GAME_ORDER if f"{g} Score" in df.columns]
+    categories = [g.replace(" Score", "") for g in game_cols]
+
+    for col in game_cols:
+        vals = top_df[col].replace("_", 0).astype(float)
+        mean, std = vals.mean(), vals.std()
+        top_df[f"norm_{col}"] = normalize_values(vals, mean, std)
+
+    fig = go.Figure()
+    for _, row in top_df.iterrows():
+        r = [row[f"norm_{col}"] for col in game_cols]
+        fig.add_trace(go.Scatterpolar(
+            r=r + [r[0]],
+            theta=categories + [categories[0]],
+            mode='lines+markers',
+            fill='toself',
+            name=simplify_model_name(row["Player"])
+        ))
+
+    fig.update_layout(
+        autosize=False,
+        width=800,
+        height=600,
+        margin=dict(l=80, r=150, t=40, b=200),
+        title=dict(
+            text=f"Top {n} Players Radar Chart (Normalized)",
+            pad=dict(t=10)
+        ),
+        polar=dict(radialaxis=dict(visible=True, range=[0, 100])),
+        legend=dict(
+            font=dict(size=9),
+            itemsizing='trace',
+            x=1.4,
+            y=1,
+            xanchor='left',
+            yanchor='top',
+            bgcolor='rgba(255,255,255,0.6)',
+            bordercolor='gray',
+            borderwidth=1
+        )
+    )
+    return fig
 
 def create_player_radar_chart(rank_data, player_name):
-    """
-    Create radar chart for a specific player
-    """
-    # Get combined leaderboard with all games
-    df = get_combined_leaderboard(rank_data, {game: True for game in GAME_ORDER})
-    
-    # Get player's data
+    df = get_combined_leaderboard(rank_data, {g: True for g in GAME_ORDER})
     player_df = df[df["Player"] == player_name]
-    
+
     if player_df.empty:
-        return None
-    
-    # Create radar chart for the player
-    return create_radar_charts(player_df)
+        return go.Figure().update_layout(
+            title=dict(text="Player not found", pad=dict(t=10)),
+            autosize=False,
+            width=800,
+            height=400
+        )
 
-def create_group_bar_chart(df):
-    """
-    Create a grouped bar chart comparing AI model performance across different games
-    
-    Args:
-        df (pd.DataFrame): DataFrame containing the combined leaderboard data
-        
-    Returns:
-        matplotlib.figure.Figure: The generated group bar chart figure
-    """
-    # Close any existing figures to prevent memory leaks
-    plt.close('all')
-    
-    # Create figure and axis with better styling
-    sns.set_style("whitegrid")
-    fig = plt.figure(figsize=(20, 11))
-    
-    # Create subplot with specific spacing
-    ax = plt.subplot(111)
-    
-    # Adjust the subplot parameters
-    plt.subplots_adjust(top=0.90,    # Add more space at the top
-                       bottom=0.15,   # Add more space at the bottom
-                       right=0.85,   # Add more space for legend
-                       left=0.05)     # Add space on the left
-
-    # Get unique models
-    models = df['Player'].unique()
-    
-    # Get active games (those that have score columns in the DataFrame)
-    active_games = []
-    for game in GAME_ORDER:
-        score_col = f"{game} Score"  # Use the same column name for all games
-        if score_col in df.columns:
-            active_games.append(game)
-    
-    n_games = len(active_games)
-    if n_games == 0:
-        return fig  # Return empty figure if no games are selected
+    game_cols = [f"{g} Score" for g in GAME_ORDER if f"{g} Score" in df.columns]
+    categories = [g.replace(" Score", "") for g in game_cols]
 
-    # Keep track of which models have data in any game
-    models_with_data = set()
+    for col in game_cols:
+        vals = player_df[col].replace("_", 0).astype(float)
+        mean, std = df[col].replace("_", 0).astype(float).mean(), df[col].replace("_", 0).astype(float).std()
+        player_df[f"norm_{col}"] = normalize_values(vals, mean, std)
 
-    # Calculate normalized scores for each game
-    for game_idx, game in enumerate(active_games):
-        # Get all scores for this game
-        game_scores = []
-        
-        # Use the same score column name for all games
-        score_col = f"{game} Score"
-            
-        for model in models:
-            try:
-                score = df[df['Player'] == model][score_col].values[0]
-                if score != '_' and float(score) > 0:  # Only include non-zero scores
-                    game_scores.append((model, float(score)))
-                    models_with_data.add(model)  # Add model to set if it has valid data
-            except (IndexError, ValueError):
-                continue
-        
-        if not game_scores:  # Skip if no valid scores for this game
-            continue
-            
-        # Sort scores from highest to lowest
-        game_scores.sort(key=lambda x: x[1], reverse=True)
-        
-        # Extract sorted models and scores
-        sorted_models = [x[0] for x in game_scores]
-        scores = [x[1] for x in game_scores]
-        
-        # Calculate mean and std for normalization
-        mean = np.mean(scores)
-        std = np.std(scores)
-        
-        # Normalize scores
-        normalized_scores = normalize_values(scores, mean, std)
-        
-        # Calculate bar width based on number of models in this game
-        n_models_in_game = len(sorted_models)
-        bar_width = 0.8 / n_models_in_game if n_models_in_game > 0 else 0.8
-        
-        # Plot bars for each model
-        for i, (model, score) in enumerate(zip(sorted_models, normalized_scores)):
-            # Only add to legend if first appearance and model has data
-            should_label = model in models_with_data and model not in [l.get_text() for l in ax.get_legend().get_texts()] if ax.get_legend() else True
-            
-            # Get color from MODEL_COLORS, use a default if not found
-            color = MODEL_COLORS.get(model, f"C{i % 10}")  # Use matplotlib default colors as fallback
-            
-            ax.bar(game_idx + i*bar_width, score, 
-                  width=bar_width, 
-                  label=model if should_label else "",
-                  color=color,
-                  alpha=0.8)
-
-    # Customize the plot
-    ax.set_xticks(np.arange(n_games))
-    ax.set_xticklabels(active_games, rotation=45, ha='right', fontsize=10)
-    ax.set_ylabel('Normalized Performance Score', fontsize=12)
-    ax.set_title('AI Model Performance Comparison Across Gaming Tasks', 
-                 fontsize=14, pad=20)
-
-    # Add grid lines
-    ax.grid(True, axis='y', linestyle='--', alpha=0.3)
-
-    # Create legend with unique entries
-    handles, labels = ax.get_legend_handles_labels()
-    by_label = dict(zip(labels, handles))
-    
-    # Sort models by their first appearance in active games
-    model_order = []
-    for game in active_games:
-        score_col = f"{game} Score"  # Use the same column name for all games
-        for model in models:
-            try:
-                score = df[df['Player'] == model][score_col].values[0]
-                if score != '_' and float(score) > 0 and model not in model_order:
-                    model_order.append(model)
-            except (IndexError, ValueError):
-                continue
-    
-    # Create legend with sorted models
-    sorted_handles = [by_label[model] for model in model_order if model in by_label]
-    sorted_labels = [model for model in model_order if model in by_label]
-    
-    ax.legend(sorted_handles, sorted_labels, 
-              bbox_to_anchor=(1.00, 1),  # Moved from (1.15, 1) to (1.05, 1) to shift left
-              loc='upper left',
-              fontsize=9,
-              title='AI Models',
-              title_fontsize=10)
-
-    # No need for tight_layout() as we're manually controlling the spacing
-    
+    fig = go.Figure()
+    for _, row in player_df.iterrows():
+        r = [row[f"norm_{col}"] for col in game_cols]
+        fig.add_trace(go.Scatterpolar(
+            r=r + [r[0]],
+            theta=categories + [categories[0]],
+            mode='lines+markers',
+            fill='toself',
+            name=simplify_model_name(row["Player"])
+        ))
+
+    fig.update_layout(
+        autosize=False,
+        width=800,
+        height=600,
+        margin=dict(l=80, r=150, t=40, b=200),
+        title=dict(
+            text=f"{simplify_model_name(player_name)} Radar Chart (Normalized)",
+            pad=dict(t=10)
+        ),
+        polar=dict(radialaxis=dict(visible=True, range=[0, 100])),
+        legend=dict(
+            font=dict(size=9),
+            itemsizing='trace',
+            x=1.4,
+            y=1,
+            xanchor='left',
+            yanchor='top',
+            bgcolor='rgba(255,255,255,0.6)',
+            bordercolor='gray',
+            borderwidth=1
+        )
+    )
     return fig
 
-def get_combined_leaderboard_with_group_bar(rank_data, selected_games):
-    """
-    Get combined leaderboard and create group bar chart
-    
-    Args:
-        rank_data (dict): Dictionary containing rank data
-        selected_games (dict): Dictionary of game names and their selection status
-        
-    Returns:
-        tuple: (DataFrame, matplotlib.figure.Figure) containing the leaderboard data and group bar chart
-    """
-    df = get_combined_leaderboard(rank_data, selected_games)
-    group_bar_fig = create_group_bar_chart(df)
-    return df, group_bar_fig
 
 def save_visualization(fig, filename):
-    """
-    Save visualization to file
-    """
-    fig.savefig(filename, bbox_inches='tight', dpi=300)
+    fig.write_image(filename)

gallery_tab.py

@@ -0,0 +1,255 @@
+import gradio as gr
+from datetime import datetime
+import json
+
+# Load video links and news data
+with open('assets/game_video_link.json', 'r') as f:
+    VIDEO_LINKS = json.load(f)
+
+with open('assets/news.json', 'r') as f:
+    NEWS_DATA = json.load(f)
+
+def create_video_gallery():
+    """Create a custom HTML/JS component for video gallery"""
+    # Extract video IDs
+    mario_id = VIDEO_LINKS["super_mario"].split("?v=")[1]
+    sokoban_id = VIDEO_LINKS["sokoban"].split("?v=")[1]
+    game_2048_id = VIDEO_LINKS["2048"].split("?v=")[1]
+    candy_id = VIDEO_LINKS["candy"].split("?v=")[1]
+    
+    # Get the latest video from news data
+    latest_news = NEWS_DATA["news"][0]  # First item is the latest
+    latest_video_id = latest_news["video_link"].split("?v=")[1]
+    latest_date = datetime.strptime(latest_news["date"], "%Y-%m-%d")
+    formatted_latest_date = latest_date.strftime("%B %d, %Y")
+    
+    # Generate news HTML
+    news_items = []
+    for item in NEWS_DATA["news"]:
+        video_id = item["video_link"].split("?v=")[1]
+        date_obj = datetime.strptime(item["date"], "%Y-%m-%d")
+        formatted_date = date_obj.strftime("%B %d, %Y")
+        news_items.append(f'''
+            <div class="news-item">
+                <div class="news-date">{formatted_date}</div>
+                <div class="news-content">
+                    <div class="news-video">
+                        <div class="video-wrapper">
+                            <iframe src="https://www.youtube.com/embed/{video_id}"></iframe>
+                        </div>
+                    </div>
+                    <div class="news-text">
+                        <a href="{item["twitter_link"]}" target="_blank" class="twitter-link">
+                            <span class="twitter-icon">📢</span>
+                            {item["twitter_text"]}
+                        </a>
+                    </div>
+                </div>
+            </div>
+        ''')
+    
+    news_html = '\n'.join(news_items)
+    
+    gallery_html = f'''
+    <div class="video-gallery-container">
+        <style>
+            .video-gallery-container {{
+                width: 100%;
+                max-width: 1400px;
+                margin: 0 auto;
+                padding: 20px;
+            }}
+            .highlight-section {{
+                margin-bottom: 40px;
+            }}
+            .highlight-card {{
+                background: #ffffff;
+                border-radius: 10px;
+                box-shadow: 0 4px 20px rgba(0,0,0,0.15);
+                overflow: hidden;
+                transition: transform 0.3s;
+                border: 2px solid #2196F3;
+            }}
+            .highlight-card:hover {{
+                transform: translateY(-5px);
+            }}
+            .highlight-header {{
+                background: #2196F3;
+                color: white;
+                padding: 15px 20px;
+                font-size: 1.2em;
+                font-weight: bold;
+                display: flex;
+                align-items: center;
+                gap: 10px;
+            }}
+            .highlight-date {{
+                font-size: 0.9em;
+                opacity: 0.9;
+            }}
+            .highlight-content {{
+                padding: 20px;
+            }}
+            .video-grid {{
+                display: grid;
+                grid-template-columns: repeat(2, 1fr);
+                gap: 20px;
+                margin-top: 20px;
+                margin-bottom: 40px;
+            }}
+            .video-card {{
+                background: #ffffff;
+                border-radius: 10px;
+                box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+                overflow: hidden;
+                transition: transform 0.2s;
+            }}
+            .video-card:hover {{
+                transform: translateY(-5px);
+            }}
+            .video-wrapper {{
+                position: relative;
+                padding-bottom: 56.25%;
+                height: 0;
+                overflow: hidden;
+            }}
+            .video-wrapper iframe {{
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                border: none;
+            }}
+            .video-title {{
+                padding: 15px;
+                font-size: 1.2em;
+                font-weight: bold;
+                color: #2c3e50;
+                text-align: center;
+                background: #f8f9fa;
+                border-top: 1px solid #eee;
+            }}
+            .news-section {{
+                margin-top: 40px;
+                border-top: 2px solid #e9ecef;
+                padding-top: 20px;
+            }}
+            .news-section-title {{
+                font-size: 1.8em;
+                font-weight: bold;
+                color: #2c3e50;
+                margin-bottom: 20px;
+                text-align: center;
+            }}
+            .news-item {{
+                background: #ffffff;
+                border-radius: 10px;
+                box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+                margin-bottom: 20px;
+                overflow: hidden;
+            }}
+            .news-date {{
+                padding: 10px 20px;
+                background: #f8f9fa;
+                color: #666;
+                font-size: 0.9em;
+                border-bottom: 1px solid #eee;
+            }}
+            .news-content {{
+                display: flex;
+                padding: 20px;
+                align-items: center;
+                gap: 30px;
+            }}
+            .news-video {{
+                flex: 0 0 300px;
+            }}
+            .news-text {{
+                flex: 1;
+                display: flex;
+                align-items: center;
+                min-height: 169px;
+            }}
+            .twitter-link {{
+                color: #2c3e50;
+                text-decoration: none;
+                display: flex;
+                align-items: center;
+                gap: 15px;
+                font-size: 1.4em;
+                font-weight: 600;
+                line-height: 1.4;
+            }}
+            .twitter-link:hover {{
+                color: #1da1f2;
+            }}
+            .twitter-icon {{
+                font-size: 1.5em;
+                color: #1da1f2;
+            }}
+        </style>
+        
+        <!-- Highlight Section -->
+        <div class="highlight-section">
+            <div class="highlight-card">
+                <div class="highlight-header">
+                    <span>🌟 Latest Update</span>
+                    <span class="highlight-date">{formatted_latest_date}</span>
+                </div>
+                <div class="highlight-content">
+                    <div class="video-wrapper">
+                        <iframe src="https://www.youtube.com/embed/{latest_video_id}"></iframe>
+                    </div>
+                    <div class="video-title">
+                        <a href="{latest_news["twitter_link"]}" target="_blank" class="twitter-link">
+                            <span class="twitter-icon">📢</span>
+                            {latest_news["twitter_text"]}
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- Regular Video Grid -->
+        <div class="video-grid">
+            <div class="video-card">
+                <div class="video-wrapper">
+                    <iframe src="https://www.youtube.com/embed/{mario_id}"></iframe>
+                </div>
+                <div class="video-title">🎮 Super Mario Bros</div>
+            </div>
+            <div class="video-card">
+                <div class="video-wrapper">
+                    <iframe src="https://www.youtube.com/embed/{sokoban_id}"></iframe>
+                </div>
+                <div class="video-title">📦 Sokoban</div>
+            </div>
+            <div class="video-card">
+                <div class="video-wrapper">
+                    <iframe src="https://www.youtube.com/embed/{game_2048_id}"></iframe>
+                </div>
+                <div class="video-title">🔢 2048</div>
+            </div>
+            <div class="video-card">
+                <div class="video-wrapper">
+                    <iframe src="https://www.youtube.com/embed/{candy_id}"></iframe>
+                </div>
+                <div class="video-title">🍬 Candy Crash</div>
+            </div>
+        </div>
+        
+        <!-- News Section -->
+        <div class="news-section">
+            <div class="news-section-title">📰 Latest News</div>
+            {news_html}
+        </div>
+    </div>
+    '''
+    return gr.HTML(gallery_html)
+
+def create_gallery_tab():
+    """Create and return the gallery tab component"""
+    with gr.Tab("🎥 Gallery") as gallery_tab:
+        video_gallery = create_video_gallery()
+    return gallery_tab 

gradio_app_v2.py

@@ -25,8 +25,15 @@ from data_visualization import (
     create_top_players_radar_chart,
     create_player_radar_chart,
     create_horizontal_bar_chart,
-    normalize_values
+    normalize_values,
+    get_combined_leaderboard_with_single_radar
 )
+from gallery_tab import create_video_gallery
+
+
+
+HAS_ENHANCED_LEADERBOARD = True
+
 
 # Define time points and their corresponding data files
 TIME_POINTS = {
@@ -59,25 +66,6 @@ leaderboard_state = {
     }
 }
 
-# Define GIF paths for the carousel
-GIF_PATHS = [
-    "assets/super_mario_bros/super_mario.gif",
-    "assets/sokoban/sokoban.gif",
-    "assets/2048/2048.gif",
-    "assets/candy/candy.gif",
-    "assets/tetris/tetris.gif"
-]
-
-# Print and verify GIF paths
-print("\nChecking GIF paths:")
-for gif_path in GIF_PATHS:
-    if os.path.exists(gif_path):
-        print(f"✓ Found: {gif_path}")
-        # Print file size
-        size = os.path.getsize(gif_path)
-        print(f"  Size: {size / (1024*1024):.2f} MB")
-    else:
-        print(f"✗ Missing: {gif_path}")
 
 # Load video links and news data
 with open('assets/game_video_link.json', 'r') as f:
@@ -86,42 +74,6 @@ with open('assets/game_video_link.json', 'r') as f:
 with open('assets/news.json', 'r') as f:
     NEWS_DATA = json.load(f)
 
-def load_gif(gif_path):
-    """Load a GIF file and return it as a PIL Image"""
-    try:
-        img = Image.open(gif_path)
-        print(f"Successfully loaded GIF: {gif_path}")
-        return img
-    except Exception as e:
-        print(f"Error loading GIF {gif_path}: {e}")
-        return None
-
-def create_gif_carousel():
-    """Create a custom HTML/JS component for GIF carousel"""
-    print("\nCreating GIF carousel with paths:", GIF_PATHS)
-    html = f"""
-    <div id="gif-carousel" style="width: 100%; height: 300px; position: relative; background-color: #f0f0f0;">
-        <img id="current-gif" style="width: 100%; height: 100%; object-fit: contain;" onerror="console.error('Failed to load GIF:', this.src);">
-    </div>
-    <script>
-        const gifs = {json.dumps(GIF_PATHS)};
-        let currentIndex = 0;
-        
-        function updateGif() {{
-            const img = document.getElementById('current-gif');
-            console.log('Loading GIF:', gifs[currentIndex]);
-            img.src = gifs[currentIndex];
-            currentIndex = (currentIndex + 1) % gifs.length;
-        }}
-        
-        // Update GIF every 5 seconds
-        setInterval(updateGif, 5000);
-        // Initial load
-        updateGif();
-    </script>
-    """
-    return gr.HTML(html)
-
 def load_rank_data(time_point):
     """Load rank data for a specific time point"""
     if time_point in TIME_POINTS:
@@ -132,6 +84,76 @@ def load_rank_data(time_point):
             return None
     return None
 
+# Add a note about score values
+def add_score_note():
+    return gr.Markdown("*Note: '-1' in the table indicates no data point for that model.*", elem_classes="score-note")
+
+# Function to prepare DataFrame for display
+def prepare_dataframe_for_display(df, for_game=None):
+    """Format DataFrame for better display in the UI"""
+    # Clone the DataFrame to avoid modifying the original
+    display_df = df.copy()
+    
+    # Filter out normalized score columns
+    norm_columns = [col for col in display_df.columns if col.startswith('norm_')]
+    if norm_columns:
+        display_df = display_df.drop(columns=norm_columns)
+    
+    # Replace '_' with '-' for better display
+    for col in display_df.columns:
+        if col.endswith(' Score'):
+            display_df[col] = display_df[col].apply(lambda x: '-' if x == '_' else x)
+    
+    # If we're in detailed view, add a formatted rank column
+    if for_game:
+        # Sort by relevant score column
+        score_col = f"{for_game} Score"
+        if score_col in display_df.columns:
+            # Convert to numeric for sorting, treating '-' as NaN
+            display_df[score_col] = pd.to_numeric(display_df[score_col], errors='coerce')
+            # Sort by score in descending order
+            display_df = display_df.sort_values(by=score_col, ascending=False)
+            # Add rank column based on the sort
+            display_df.insert(0, 'Rank', range(1, len(display_df) + 1))
+            # Filter out models that didn't participate
+            display_df = display_df[~display_df[score_col].isna()]
+    
+    # Add line breaks to column headers
+    new_columns = {}
+    for col in display_df.columns:
+        if col.endswith(' Score'):
+            # Replace 'Game Name Score' with 'Game Name\nScore'
+            game_name = col.replace(' Score', '')
+            new_col = f"{game_name}\nScore"
+            new_columns[col] = new_col
+        elif col == 'Organization':
+            new_columns[col] = 'Organi-\nzation'
+    
+    # Rename columns with new line breaks
+    if new_columns:
+        display_df = display_df.rename(columns=new_columns)
+    
+    return display_df
+
+# Helper function to ensure leaderboard updates maintain consistent height
+def update_df_with_height(df):
+    """Update DataFrame with consistent height parameter."""
+    # Create column widths array
+    col_widths = ["40px"]  # Row number column width
+    col_widths.append("230px")  # Player column - reduced by 20px
+    col_widths.append("120px")  # Organization column
+    # Add game score columns
+    for _ in range(len(df.columns) - 2):
+        col_widths.append("120px")
+    
+    return gr.update(value=df, 
+                     show_row_numbers=True, 
+                     show_fullscreen_button=True,
+                     line_breaks=True,
+                     show_search="search",
+                     max_height=None,  # Remove height limitation
+                     column_widths=col_widths)
+
 def update_leaderboard(mario_overall, mario_details,
                        sokoban_overall, sokoban_details,
                        _2048_overall, _2048_details,
@@ -212,6 +234,29 @@ def update_leaderboard(mario_overall, mario_details,
             leaderboard_state["previous_details"][changed_game] = False
             if leaderboard_state["current_game"] == changed_game:
                 leaderboard_state["current_game"] = None
+                # When exiting details view, reset to show all games
+                for game in current_overall.keys():
+                    current_overall[game] = True
+                    current_details[game] = False
+                    leaderboard_state["previous_overall"][game] = True
+                    leaderboard_state["previous_details"][game] = False
+    
+    # Special case: If all games are selected and we're trying to view details
+    all_games_selected = all(current_overall.values()) and not any(current_details.values())
+    if all_games_selected and changed_game and current_details[changed_game]:
+        # Reset all other games' states
+        for game in current_overall.keys():
+            if game != changed_game:
+                current_overall[game] = False
+                current_details[game] = False
+                leaderboard_state["previous_overall"][game] = False
+                leaderboard_state["previous_details"][game] = False
+        
+        # Update state for the selected game
+        leaderboard_state["current_game"] = changed_game
+        leaderboard_state["previous_overall"][changed_game] = True
+        leaderboard_state["previous_details"][changed_game] = True
+        current_overall[changed_game] = True
     
     # Build dictionary for selected games
     selected_games = {
@@ -223,7 +268,7 @@ def update_leaderboard(mario_overall, mario_details,
         "Tetris (planning only)": current_overall["Tetris (planning only)"]
     }
     
-    # Get the appropriate DataFrame and chart based on current state
+    # Get the appropriate DataFrame and charts based on current state
     if leaderboard_state["current_game"]:
         # For detailed view
         if leaderboard_state["current_game"] == "Super Mario Bros":
@@ -239,14 +284,26 @@ def update_leaderboard(mario_overall, mario_details,
         else:  # Tetris (planning only)
             df = get_tetris_planning_leaderboard(rank_data)
         
+        # Format the DataFrame for display
+        display_df = prepare_dataframe_for_display(df, leaderboard_state["current_game"])
+        
         # Always create a new chart for detailed view
         chart = create_horizontal_bar_chart(df, leaderboard_state["current_game"])
+        # Use the same chart for all visualizations in detailed view
+        radar_chart = chart
+        group_bar_chart = chart
     else:
         # For overall view
-        df, chart = get_combined_leaderboard_with_group_bar(rank_data, selected_games)
+        df, _ = get_combined_leaderboard_with_group_bar(rank_data, selected_games)
+        # Format the DataFrame for display
+        display_df = prepare_dataframe_for_display(df)
+        # Use the same selected_games for radar chart
+        _, radar_chart = get_combined_leaderboard_with_single_radar(rank_data, selected_games)
+        chart = radar_chart
+        group_bar_chart = radar_chart  # Use radar chart instead of bar chart
     
-    # Return exactly 14 values to match the expected outputs
-    return (df, chart,
+    # Return exactly 16 values to match the expected outputs
+    return (update_df_with_height(display_df), chart, radar_chart, radar_chart,
             current_overall["Super Mario Bros"], current_details["Super Mario Bros"],
             current_overall["Sokoban"], current_details["Sokoban"],
             current_overall["2048"], current_details["2048"],
@@ -274,24 +331,9 @@ def update_leaderboard_with_time(time_point, mario_overall, mario_details,
                             tetris_overall, tetris_details,
                             tetris_plan_overall, tetris_plan_details)
 
-def clear_filters():
-    global leaderboard_state
-    
-    # Reset all checkboxes to default state
-    selected_games = {
-        "Super Mario Bros": True,
-        "Sokoban": True,
-        "2048": True,
-        "Candy Crash": True,
-        "Tetris (complete)": True,
-        "Tetris (planning only)": True
-    }
-    
-    # Get the combined leaderboard and group bar chart
-    df, chart = get_combined_leaderboard_with_group_bar(rank_data, selected_games)
-    
-    # Reset the leaderboard state to match the default checkbox states
-    leaderboard_state = {
+def get_initial_state():
+    """Get the initial state for the leaderboard"""
+    return {
         "current_game": None,
         "previous_overall": {
             "Super Mario Bros": True,
@@ -310,9 +352,34 @@ def clear_filters():
             "Tetris (planning only)": False
         }
     }
+
+def clear_filters():
+    global leaderboard_state
+    
+    # Reset all checkboxes to default state
+    selected_games = {
+        "Super Mario Bros": True,
+        "Sokoban": True,
+        "2048": True,
+        "Candy Crash": True,
+        "Tetris (complete)": True,
+        "Tetris (planning only)": True
+    }
+    
+    # Get the combined leaderboard and group bar chart
+    df, group_bar_chart = get_combined_leaderboard_with_group_bar(rank_data, selected_games)
     
-    # Return exactly 14 values to match the expected outputs
-    return (df, chart,
+    # Format the DataFrame for display
+    display_df = prepare_dataframe_for_display(df)
+    
+    # Get the radar chart using the same selected games
+    _, radar_chart = get_combined_leaderboard_with_single_radar(rank_data, selected_games)
+    
+    # Reset the leaderboard state to match the default checkbox states
+    leaderboard_state = get_initial_state()
+    
+    # Return exactly 16 values to match the expected outputs
+    return (update_df_with_height(display_df), radar_chart, radar_chart, radar_chart,
             True, False,  # mario
             True, False,  # sokoban
             True, False,  # 2048
@@ -428,200 +495,53 @@ def create_timeline_slider():
     """
     return gr.HTML(timeline_html)
 
-def create_video_gallery():
-    """Create a custom HTML/JS component for video gallery"""
-    # Extract video IDs
-    mario_id = VIDEO_LINKS["super_mario"].split("?v=")[1]
-    sokoban_id = VIDEO_LINKS["sokoban"].split("?v=")[1]
-    game_2048_id = VIDEO_LINKS["2048"].split("?v=")[1]
-    candy_id = VIDEO_LINKS["candy"].split("?v=")[1]
-    
-    # Generate news HTML
-    news_items = []
-    for item in NEWS_DATA["news"]:
-        video_id = item["video_link"].split("?v=")[1]
-        date_obj = datetime.strptime(item["date"], "%Y-%m-%d")
-        formatted_date = date_obj.strftime("%B %d, %Y")
-        news_items.append(f'''
-            <div class="news-item">
-                <div class="news-date">{formatted_date}</div>
-                <div class="news-content">
-                    <div class="news-video">
-                        <div class="video-wrapper">
-                            <iframe src="https://www.youtube.com/embed/{video_id}"></iframe>
-                        </div>
-                    </div>
-                    <div class="news-text">
-                        <a href="{item["twitter_link"]}" target="_blank" class="twitter-link">
-                            <span class="twitter-icon">📢</span>
-                            {item["twitter_text"]}
-                        </a>
-                    </div>
-                </div>
-            </div>
-        ''')
-    
-    news_html = '\n'.join(news_items)
-    
-    gallery_html = f'''
-    <div class="video-gallery-container">
-        <style>
-            .video-gallery-container {{
-                width: 100%;
-                max-width: 1400px;
-                margin: 0 auto;
-                padding: 20px;
-            }}
-            .video-grid {{
-                display: grid;
-                grid-template-columns: repeat(2, 1fr);
-                gap: 20px;
-                margin-top: 20px;
-                margin-bottom: 40px;
-            }}
-            .video-card {{
-                background: #ffffff;
-                border-radius: 10px;
-                box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-                overflow: hidden;
-                transition: transform 0.2s;
-            }}
-            .video-card:hover {{
-                transform: translateY(-5px);
-            }}
-            .video-wrapper {{
-                position: relative;
-                padding-bottom: 56.25%;
-                height: 0;
-                overflow: hidden;
-            }}
-            .video-wrapper iframe {{
-                position: absolute;
-                top: 0;
-                left: 0;
-                width: 100%;
-                height: 100%;
-                border: none;
-            }}
-            .video-title {{
-                padding: 15px;
-                font-size: 1.2em;
-                font-weight: bold;
-                color: #2c3e50;
-                text-align: center;
-                background: #f8f9fa;
-                border-top: 1px solid #eee;
-            }}
-            .news-section {{
-                margin-top: 40px;
-                border-top: 2px solid #e9ecef;
-                padding-top: 20px;
-            }}
-            .news-section-title {{
-                font-size: 1.8em;
-                font-weight: bold;
-                color: #2c3e50;
-                margin-bottom: 20px;
-                text-align: center;
-            }}
-            .news-item {{
-                background: #ffffff;
-                border-radius: 10px;
-                box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-                margin-bottom: 20px;
-                overflow: hidden;
-            }}
-            .news-date {{
-                padding: 10px 20px;
-                background: #f8f9fa;
-                color: #666;
-                font-size: 0.9em;
-                border-bottom: 1px solid #eee;
-            }}
-            .news-content {{
-                display: flex;
-                padding: 20px;
-                align-items: center;
-                gap: 30px;
-            }}
-            .news-video {{
-                flex: 0 0 300px;
-            }}
-            .news-text {{
-                flex: 1;
-                display: flex;
-                align-items: center;
-                min-height: 169px;  /* Match 16:9 video height */
-            }}
-            .twitter-link {{
-                color: #2c3e50;
-                text-decoration: none;
-                display: flex;
-                align-items: center;
-                gap: 15px;
-                font-size: 1.4em;
-                font-weight: 600;
-                line-height: 1.4;
-            }}
-            .twitter-link:hover {{
-                color: #1da1f2;
-            }}
-            .twitter-icon {{
-                font-size: 1.5em;
-                color: #1da1f2;
-            }}
-        </style>
-        <div class="video-grid">
-            <div class="video-card">
-                <div class="video-wrapper">
-                    <iframe src="https://www.youtube.com/embed/{mario_id}"></iframe>
-                </div>
-                <div class="video-title">🎮 Super Mario Bros</div>
-            </div>
-            <div class="video-card">
-                <div class="video-wrapper">
-                    <iframe src="https://www.youtube.com/embed/{sokoban_id}"></iframe>
-                </div>
-                <div class="video-title">📦 Sokoban</div>
-            </div>
-            <div class="video-card">
-                <div class="video-wrapper">
-                    <iframe src="https://www.youtube.com/embed/{game_2048_id}"></iframe>
-                </div>
-                <div class="video-title">🔢 2048</div>
-            </div>
-            <div class="video-card">
-                <div class="video-wrapper">
-                    <iframe src="https://www.youtube.com/embed/{candy_id}"></iframe>
-                </div>
-                <div class="video-title">🍬 Candy Crash</div>
-            </div>
-        </div>
-        <div class="news-section">
-            <div class="news-section-title">📰 Latest News</div>
-            {news_html}
-        </div>
-    </div>
-    '''
-    return gr.HTML(gallery_html)
-
 def build_app():
     with gr.Blocks(css="""
-        .visualization-container {
-            height: 85vh !important;
-            max-height: 900px !important;
-            min-height: 600px !important;
-            background-color: #f8f9fa;
-            border-radius: 10px;
-            padding: 25px;  /* Increased padding */
-            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-            overflow: hidden;
-            margin: 0 auto !important;  /* Center the visualization */
-        }
-        .visualization-container .plot {
+        /* Fix for disappearing scrollbar */
+        html, body {
+            overflow-y: auto !important;
+            overflow-x: hidden !important;
+            width: 100% !important;
             height: 100% !important;
+        }
+        
+        /* Prevent content from shrinking to center */
+        .gradio-container {
+            width: 100% !important;
+            max-width: 1200px !important;
+            margin-left: auto !important;
+            margin-right: auto !important;
+            min-height: 100vh !important;
+        }
+        
+        /* Clean up table styling */
+        .table-container {
             width: 100% !important;
+            overflow: visible !important;
+            border-radius: 8px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+        }
+        
+        /* Remove duplicate scrollbars */
+        .gradio-dataframe [data-testid="table"],
+        [data-testid="dataframe"] [data-testid="table"],
+        .gradio-dataframe tbody,
+        [data-testid="dataframe"] tbody,
+        .table-container > div,
+        .table-container > div > div {
+            overflow: visible !important;
+            max-height: none !important;
+        }
+        
+        /* Visualization styling */
+        .visualization-container .js-plotly-plot {
+            margin-left: auto !important;
+            margin-right: auto !important;
+            display: block !important;
+            max-width: 1000px;
         }
+        
+        /* Section styling */
         .section-title {
             font-size: 1.5em;
             font-weight: bold;
@@ -629,41 +549,126 @@ def build_app():
             margin-bottom: 15px;
             padding-bottom: 10px;
             border-bottom: 2px solid #e9ecef;
-            text-align: center;  /* Center the title */
+            text-align: center;
+        }
+        
+        /* Fix table styling */
+        .table-container table {
+            width: 100%;
+            border-collapse: separate;
+            border-spacing: 0;
+            table-layout: fixed !important;
+        }
+        
+        /* Column width customization - adjust for row numbers being first column */
+        .table-container th:nth-child(2), 
+        .table-container td:nth-child(2) {
+            width: 230px !important;
+            min-width: 200px !important;
+            max-width: 280px !important;
+            padding-left: 8px !important;
+            padding-right: 8px !important;
+        }
+        
+        .table-container th:nth-child(3), 
+        .table-container td:nth-child(3) {
+            width: 120px !important;
+            min-width: 100px !important;
+            max-width: 140px !important;
+        }
+        
+        /* Game score columns */
+        .table-container th:nth-child(n+4), 
+        .table-container td:nth-child(n+4) {
+            width: 120px !important;
+            min-width: 100px !important;
+            max-width: 140px !important;
+            text-align: center !important;
+        }
+        
+        /* Make headers sticky */
+        .table-container th {
+            position: sticky !important;
+            top: 0 !important;
+            background-color: #f8f9fa !important;
+            z-index: 10 !important;
+            font-weight: bold;
+            padding: 16px 10px !important;
+            border-bottom: 2px solid #e9ecef;
+            white-space: pre-wrap !important;
+            word-wrap: break-word !important;
+            line-height: 1.2 !important;
+            height: auto !important;
+            min-height: 60px !important;
+            vertical-align: middle !important;
+        }
+        
+        /* Simple cell styling */
+        .table-container td {
+            padding: 8px 8px;
+            border-bottom: 1px solid #e9ecef;
         }
-        /* Add container for the entire app */
-        .container {
-            max-width: 1400px;
-            margin: 0 auto;
-            padding: 0 20px;
+        
+        /* Visual enhancements */
+        .table-container tr:hover {
+            background-color: #f1f3f4;
+        }
+        
+        .table-container tr:nth-child(even) {
+            background-color: #f8fafc;
+        }
+        
+        /* Row number column styling */
+        .gradio-dataframe thead tr th[id="0"],
+        .gradio-dataframe tbody tr td:nth-child(1),
+        [data-testid="dataframe"] thead tr th[id="0"],
+        [data-testid="dataframe"] tbody tr td:nth-child(1),
+        .svelte-1gfkn6j thead tr th:first-child,
+        .svelte-1gfkn6j tbody tr td:first-child {
+            width: 40px !important;
+            min-width: 40px !important;
+            max-width: 40px !important;
+            padding: 4px !important;
+            text-align: center !important;
+            font-size: 0.85em !important;
         }
     """) as demo:
         gr.Markdown("# 🎮 Game Arena: Gaming Agent 🎲")
         
         with gr.Tabs():
             with gr.Tab("🏆 Leaderboard"):
-                # Visualization section at the very top
+                # Visualization section
                 with gr.Row():
                     gr.Markdown("### 📊 Data Visualization")
-                with gr.Row():
-                    visualization = gr.Plot(
-                        value=get_combined_leaderboard_with_group_bar(rank_data, {
-                            "Super Mario Bros": True,
-                            "Sokoban": True,
-                            "2048": True,
-                            "Candy Crash": True,
-                            "Tetris (complete)": True,
-                            "Tetris (planning only)": True
-                        })[1],
-                        label="Performance Visualization",
-                        elem_classes="visualization-container"
-                    )
+                
+                # Detailed view visualization (single chart)
+                detailed_visualization = gr.Plot(
+                    label="Performance Visualization",
+                    visible=False,
+                    elem_classes="visualization-container"
+                )
+                
+                with gr.Column(visible=True) as overall_visualizations:
+                    with gr.Tabs():
+                        with gr.Tab("📈 Radar Chart"):
+                            radar_visualization = gr.Plot(
+                                label="Comparative Analysis (Radar Chart)",
+                                elem_classes="visualization-container"
+                            )
+                        # Comment out the Group Bar Chart tab
+                        # with gr.Tab("📊 Group Bar Chart"):
+                        #     group_bar_visualization = gr.Plot(
+                        #         label="Comparative Analysis (Group Bar Chart)",
+                        #         elem_classes="visualization-container"
+                        #     )
+
+                # Hidden placeholder for group bar visualization (to maintain code references)
+                group_bar_visualization = gr.Plot(visible=False)
 
                 # Game selection section
                 with gr.Row():
                     gr.Markdown("### 🎮 Game Selection")
                 with gr.Row():
-                    # For each game, we have two checkboxes: one for overall and one for detailed view.
                     with gr.Column():
                         gr.Markdown("**🎮 Super Mario Bros**")
                         mario_overall = gr.Checkbox(label="Super Mario Bros Score", value=True)
@@ -688,8 +693,8 @@ def build_app():
                         gr.Markdown("**📋 Tetris (planning)**")
                         tetris_plan_overall = gr.Checkbox(label="Tetris (planning) Score", value=True)
                         tetris_plan_details = gr.Checkbox(label="Tetris (planning) Details", value=False)
-
-                # Time progression display and control buttons - Moved below game selection
+                
+                # Controls
                 with gr.Row():
                     with gr.Column(scale=2):
                         gr.Markdown("**⏰ Time Tracker**")
@@ -697,57 +702,137 @@ def build_app():
                     with gr.Column(scale=1):
                         gr.Markdown("**🔄 Controls**")
                         clear_btn = gr.Button("Reset Filters", variant="secondary")
-
-                # Leaderboard table section
+                
+                # Leaderboard table
                 with gr.Row():
                     gr.Markdown("### 📋 Detailed Results")
+                
+                # Add reference to Jupyter notebook
+                with gr.Row():
+                    gr.Markdown("*All data analysis can be replicated by checking [this Jupyter notebook](https://colab.research.google.com/drive/1yoa3nZpAtmzZqPD6V-rnPQG7wI4nbt40#scrollTo=ac7EVIaJTxpp)*")
+                
+                # Get initial leaderboard dataframe
+                initial_df = get_combined_leaderboard(rank_data, {
+                    "Super Mario Bros": True,
+                    "Sokoban": True,
+                    "2048": True,
+                    "Candy Crash": True,
+                    "Tetris (complete)": True,
+                    "Tetris (planning only)": True
+                })
+                
+                # Format the DataFrame for display
+                initial_display_df = prepare_dataframe_for_display(initial_df)
+                
+                # Custom column widths including row numbers
+                col_widths = ["40px"]  # Row number column width
+                col_widths.append("230px")  # Player column - reduced by 20px
+                col_widths.append("120px")  # Organization column
+                # Add game score columns
+                for _ in range(len(initial_display_df.columns) - 2):
+                    col_widths.append("120px")
+                
+                # Create a standard DataFrame component with enhanced styling
                 with gr.Row():
-                    leaderboard_board = gr.DataFrame(
-                        value=get_combined_leaderboard(rank_data, {
-                            "Super Mario Bros": True,
-                            "Sokoban": True,
-                            "2048": True,
-                            "Candy Crash": True,
-                            "Tetris (complete)": True,
-                            "Tetris (planning only)": True
-                        }),
+                    leaderboard_df = gr.DataFrame(
+                        value=initial_display_df,
                         interactive=True,
+                        elem_id="leaderboard-table",
+                        elem_classes="table-container",
                         wrap=True,
-                        label="Leaderboard"
+                        show_row_numbers=True,
+                        show_fullscreen_button=True,
+                        line_breaks=True,
+                        max_height=None,  # Remove height limitation to avoid scrollbar
+                        show_search="search",
+                        column_widths=col_widths
                     )
-
-                # List of all checkboxes (in order)
-                checkbox_list = [mario_overall, mario_details,
-                                sokoban_overall, sokoban_details,
-                                _2048_overall, _2048_details,
-                                candy_overall, candy_details,
-                                tetris_overall, tetris_details,
-                                tetris_plan_overall, tetris_plan_details]
-
-                # Initialize the leaderboard state when the app starts
-                clear_filters()
-
-                # Update both the leaderboard and visualization when checkboxes change
+                
+                # Add the score note below the table
+                with gr.Row():
+                    score_note = add_score_note()
+                
+                # List of all checkboxes
+                checkbox_list = [
+                    mario_overall, mario_details,
+                    sokoban_overall, sokoban_details,
+                    _2048_overall, _2048_details,
+                    candy_overall, candy_details,
+                    tetris_overall, tetris_details,
+                    tetris_plan_overall, tetris_plan_details
+                ]
+                
+                # Update visualizations when checkboxes change
+                def update_visualizations(*checkbox_states):
+                    # Check if any details checkbox is selected
+                    is_details_view = any([
+                        checkbox_states[1], checkbox_states[3], checkbox_states[5],
+                        checkbox_states[7], checkbox_states[9], checkbox_states[11]
+                    ])
+                    
+                    # Update visibility of visualization blocks
+                    return {
+                        detailed_visualization: gr.update(visible=is_details_view),
+                        overall_visualizations: gr.update(visible=not is_details_view)
+                    }
+                
+                # Add change event to all checkboxes
                 for checkbox in checkbox_list:
                     checkbox.change(
-                        fn=update_leaderboard,
+                        update_visualizations,
                         inputs=checkbox_list,
-                        outputs=[leaderboard_board, visualization] + checkbox_list
+                        outputs=[detailed_visualization, overall_visualizations]
                     )
-
-                # Update both when clear button is clicked
+                
+                # Update leaderboard and visualizations when checkboxes change
+                for checkbox in checkbox_list:
+                    checkbox.change(
+                        update_leaderboard,
+                        inputs=checkbox_list,
+                        outputs=[
+                            leaderboard_df,
+                            detailed_visualization,
+                            radar_visualization,
+                            group_bar_visualization
+                        ] + checkbox_list
+                    )
+                
+                # Update when clear button is clicked
                 clear_btn.click(
+                    clear_filters,
+                    inputs=[],
+                    outputs=[
+                        leaderboard_df,
+                        detailed_visualization,
+                        radar_visualization,
+                        group_bar_visualization
+                    ] + checkbox_list
+                )
+                
+                # Initialize the app
+                demo.load(
                     fn=clear_filters,
                     inputs=[],
-                    outputs=[leaderboard_board, visualization] + checkbox_list
+                    outputs=[
+                        leaderboard_df,
+                        detailed_visualization,
+                        radar_visualization,
+                        group_bar_visualization
+                    ] + checkbox_list
                 )
-
+            
             with gr.Tab("🎥 Gallery"):
                 video_gallery = create_video_gallery()
-
+    
     return demo
 
 if __name__ == "__main__":
     demo_app = build_app()
     # Add file serving configuration
-    demo_app.launch(debug=True, show_error=True, share=True)
+    demo_app.launch(
+        debug=True, 
+        show_error=True, 
+        share=True,
+        height="100%",
+        width="100%"
+    )

leaderboard_tab.py

@@ -0,0 +1,600 @@
+import gradio as gr
+import json
+from leaderboard_utils import (
+    get_mario_leaderboard,
+    get_sokoban_leaderboard,
+    get_2048_leaderboard,
+    get_candy_leaderboard,
+    get_tetris_leaderboard,
+    get_tetris_planning_leaderboard,
+    get_combined_leaderboard,
+    GAME_ORDER
+)
+from data_visualization import (
+    get_combined_leaderboard_with_group_bar,
+    create_horizontal_bar_chart,
+    get_combined_leaderboard_with_single_radar
+)
+import pandas as pd
+
+# Define time points and their corresponding data files
+TIME_POINTS = {
+    "03/25/2025": "rank_data_03_25_2025.json",
+    # Add more time points here as they become available
+}
+
+# Load the initial JSON file with rank data
+with open(TIME_POINTS["03/25/2025"], "r") as f:
+    rank_data = json.load(f)
+
+# Add leaderboard state at the top level
+leaderboard_state = {
+    "current_game": None,
+    "previous_overall": {
+        "Super Mario Bros": True,
+        "Sokoban": True,
+        "2048": True,
+        "Candy Crash": True,
+        "Tetris (complete)": True,
+        "Tetris (planning only)": True
+    },
+    "previous_details": {
+        "Super Mario Bros": False,
+        "Sokoban": False,
+        "2048": False,
+        "Candy Crash": False,
+        "Tetris (complete)": False,
+        "Tetris (planning only)": False
+    }
+}
+
+def load_rank_data(time_point):
+    """Load rank data for a specific time point"""
+    if time_point in TIME_POINTS:
+        try:
+            with open(TIME_POINTS[time_point], "r") as f:
+                return json.load(f)
+        except FileNotFoundError:
+            return None
+    return None
+
+def update_leaderboard(mario_overall, mario_details,
+                       sokoban_overall, sokoban_details,
+                       _2048_overall, _2048_details,
+                       candy_overall, candy_details,
+                       tetris_overall, tetris_details,
+                       tetris_plan_overall, tetris_plan_details):
+    global leaderboard_state
+    
+    # Convert current checkbox states to dictionary for easier comparison
+    current_overall = {
+        "Super Mario Bros": mario_overall,
+        "Sokoban": sokoban_overall,
+        "2048": _2048_overall,
+        "Candy Crash": candy_overall,
+        "Tetris (complete)": tetris_overall,
+        "Tetris (planning only)": tetris_plan_overall
+    }
+    
+    current_details = {
+        "Super Mario Bros": mario_details,
+        "Sokoban": sokoban_details,
+        "2048": _2048_details,
+        "Candy Crash": candy_details,
+        "Tetris (complete)": tetris_details,
+        "Tetris (planning only)": tetris_plan_details
+    }
+    
+    # Find which game's state changed
+    changed_game = None
+    for game in current_overall.keys():
+        if (current_overall[game] != leaderboard_state["previous_overall"][game] or 
+            current_details[game] != leaderboard_state["previous_details"][game]):
+            changed_game = game
+            break
+    
+    if changed_game:
+        # If a game's details checkbox was checked
+        if current_details[changed_game] and not leaderboard_state["previous_details"][changed_game]:
+            # Reset all other games' states
+            for game in current_overall.keys():
+                if game != changed_game:
+                    current_overall[game] = False
+                    current_details[game] = False
+                    leaderboard_state["previous_overall"][game] = False
+                    leaderboard_state["previous_details"][game] = False
+            
+            # Update state for the selected game
+            leaderboard_state["current_game"] = changed_game
+            leaderboard_state["previous_overall"][changed_game] = True
+            leaderboard_state["previous_details"][changed_game] = True
+            current_overall[changed_game] = True
+        
+        # If a game's overall checkbox was checked
+        elif current_overall[changed_game] and not leaderboard_state["previous_overall"][changed_game]:
+            # If we were in details view for another game, switch to overall view
+            if leaderboard_state["current_game"] and leaderboard_state["previous_details"][leaderboard_state["current_game"]]:
+                # Reset previous game's details
+                leaderboard_state["previous_details"][leaderboard_state["current_game"]] = False
+                current_details[leaderboard_state["current_game"]] = False
+                leaderboard_state["current_game"] = None
+            
+            # Update state
+            leaderboard_state["previous_overall"][changed_game] = True
+            leaderboard_state["previous_details"][changed_game] = False
+        
+        # If a game's overall checkbox was unchecked
+        elif not current_overall[changed_game] and leaderboard_state["previous_overall"][changed_game]:
+            # If we're in details view, don't allow unchecking the overall checkbox
+            if leaderboard_state["current_game"] == changed_game:
+                current_overall[changed_game] = True
+            else:
+                leaderboard_state["previous_overall"][changed_game] = False
+                if leaderboard_state["current_game"] == changed_game:
+                    leaderboard_state["current_game"] = None
+        
+        # If a game's details checkbox was unchecked
+        elif not current_details[changed_game] and leaderboard_state["previous_details"][changed_game]:
+            leaderboard_state["previous_details"][changed_game] = False
+            if leaderboard_state["current_game"] == changed_game:
+                leaderboard_state["current_game"] = None
+                # When exiting details view, reset to show all games
+                for game in current_overall.keys():
+                    current_overall[game] = True
+                    current_details[game] = False
+                    leaderboard_state["previous_overall"][game] = True
+                    leaderboard_state["previous_details"][game] = False
+    
+    # Special case: If all games are selected and we're trying to view details
+    all_games_selected = all(current_overall.values()) and not any(current_details.values())
+    if all_games_selected and changed_game and current_details[changed_game]:
+        # Reset all other games' states
+        for game in current_overall.keys():
+            if game != changed_game:
+                current_overall[game] = False
+                current_details[game] = False
+                leaderboard_state["previous_overall"][game] = False
+                leaderboard_state["previous_details"][game] = False
+        
+        # Update state for the selected game
+        leaderboard_state["current_game"] = changed_game
+        leaderboard_state["previous_overall"][changed_game] = True
+        leaderboard_state["previous_details"][changed_game] = True
+        current_overall[changed_game] = True
+    
+    # Build dictionary for selected games
+    selected_games = {
+        "Super Mario Bros": current_overall["Super Mario Bros"],
+        "Sokoban": current_overall["Sokoban"],
+        "2048": current_overall["2048"],
+        "Candy Crash": current_overall["Candy Crash"],
+        "Tetris (complete)": current_overall["Tetris (complete)"],
+        "Tetris (planning only)": current_overall["Tetris (planning only)"]
+    }
+    
+    # Get the appropriate DataFrame and charts based on current state
+    if leaderboard_state["current_game"]:
+        # For detailed view
+        if leaderboard_state["current_game"] == "Super Mario Bros":
+            df = get_mario_leaderboard(rank_data)
+        elif leaderboard_state["current_game"] == "Sokoban":
+            df = get_sokoban_leaderboard(rank_data)
+        elif leaderboard_state["current_game"] == "2048":
+            df = get_2048_leaderboard(rank_data)
+        elif leaderboard_state["current_game"] == "Candy Crash":
+            df = get_candy_leaderboard(rank_data)
+        elif leaderboard_state["current_game"] == "Tetris (complete)":
+            df = get_tetris_leaderboard(rank_data)
+        else:  # Tetris (planning only)
+            df = get_tetris_planning_leaderboard(rank_data)
+        
+        # Always create a new chart for detailed view
+        chart = create_horizontal_bar_chart(df, leaderboard_state["current_game"])
+        # For detailed view, we'll use the same chart for all visualizations
+        radar_chart = chart
+        group_bar_chart = chart
+    else:
+        # For overall view
+        df, group_bar_chart = get_combined_leaderboard_with_group_bar(rank_data, selected_games)
+        # Use the same selected_games for radar chart
+        _, radar_chart = get_combined_leaderboard_with_single_radar(rank_data, selected_games)
+        chart = group_bar_chart
+    
+    # Return exactly 16 values to match the expected outputs
+    return (df, chart, radar_chart, group_bar_chart,
+            current_overall["Super Mario Bros"], current_details["Super Mario Bros"],
+            current_overall["Sokoban"], current_details["Sokoban"],
+            current_overall["2048"], current_details["2048"],
+            current_overall["Candy Crash"], current_details["Candy Crash"],
+            current_overall["Tetris (complete)"], current_details["Tetris (complete)"],
+            current_overall["Tetris (planning only)"], current_details["Tetris (planning only)"])
+
+def update_leaderboard_with_time(time_point, mario_overall, mario_details,
+                               sokoban_overall, sokoban_details,
+                               _2048_overall, _2048_details,
+                               candy_overall, candy_details,
+                               tetris_overall, tetris_details,
+                               tetris_plan_overall, tetris_plan_details):
+    # Load rank data for the selected time point
+    global rank_data
+    new_rank_data = load_rank_data(time_point)
+    if new_rank_data is not None:
+        rank_data = new_rank_data
+    
+    # Use the existing update_leaderboard function
+    return update_leaderboard(mario_overall, mario_details,
+                            sokoban_overall, sokoban_details,
+                            _2048_overall, _2048_details,
+                            candy_overall, candy_details,
+                            tetris_overall, tetris_details,
+                            tetris_plan_overall, tetris_plan_details)
+
+def get_initial_state():
+    """Get the initial state for the leaderboard"""
+    return {
+        "current_game": None,
+        "previous_overall": {
+            "Super Mario Bros": True,
+            "Sokoban": True,
+            "2048": True,
+            "Candy Crash": True,
+            "Tetris (complete)": True,
+            "Tetris (planning only)": True
+        },
+        "previous_details": {
+            "Super Mario Bros": False,
+            "Sokoban": False,
+            "2048": False,
+            "Candy Crash": False,
+            "Tetris (complete)": False,
+            "Tetris (planning only)": False
+        }
+    }
+
+def clear_filters():
+    global leaderboard_state
+    
+    # Reset all checkboxes to default state
+    selected_games = {
+        "Super Mario Bros": True,
+        "Sokoban": True,
+        "2048": True,
+        "Candy Crash": True,
+        "Tetris (complete)": True,
+        "Tetris (planning only)": True
+    }
+    
+    # Get the combined leaderboard and group bar chart
+    df, group_bar_chart = get_combined_leaderboard_with_group_bar(rank_data, selected_games)
+    
+    # Get the radar chart using the same selected games
+    _, radar_chart = get_combined_leaderboard_with_single_radar(rank_data, selected_games)
+    
+    # Reset the leaderboard state to match the default checkbox states
+    leaderboard_state = get_initial_state()
+    
+    # Return exactly 16 values to match the expected outputs
+    return (df, group_bar_chart, radar_chart, group_bar_chart,
+            True, False,  # mario
+            True, False,  # sokoban
+            True, False,  # 2048
+            True, False,  # candy
+            True, False,  # tetris
+            True, False)  # tetris plan
+
+def create_timeline_slider():
+    """Create a custom timeline slider component"""
+    timeline_html = """
+    <div class="timeline-container">
+        <style>
+            .timeline-container {
+                width: 85%;  /* Increased from 70% to 85% */
+                padding: 8px;
+                font-family: Arial, sans-serif;
+                height: 40px;
+                display: flex;
+                align-items: center;
+            }
+            .timeline-track {
+                position: relative;
+                height: 6px;
+                background: #e0e0e0;
+                border-radius: 3px;
+                margin: 0;
+                width: 100%;
+            }
+            .timeline-progress {
+                position: absolute;
+                height: 100%;
+                background: #2196F3;
+                border-radius: 3px;
+                width: 100%;
+            }
+            .timeline-handle {
+                position: absolute;
+                right: 0;
+                top: 50%;
+                transform: translate(50%, -50%);
+                width: 20px;
+                height: 20px;
+                background: #2196F3;
+                border: 3px solid white;
+                border-radius: 50%;
+                cursor: pointer;
+                box-shadow: 0 2px 6px rgba(0,0,0,0.3);
+            }
+            .timeline-date {
+                position: absolute;
+                top: -25px;
+                transform: translateX(-50%);
+                background: #2196F3;  /* Changed to match slider blue color */
+                color: #ffffff !important;
+                padding: 3px 8px;
+                border-radius: 4px;
+                font-size: 12px;
+                white-space: nowrap;
+                font-weight: 600;
+                box-shadow: 0 2px 6px rgba(0,0,0,0.2);
+                letter-spacing: 0.5px;
+                text-shadow: 0 1px 2px rgba(0,0,0,0.2);
+            }
+        </style>
+        <div class="timeline-track">
+            <div class="timeline-progress"></div>
+            <div class="timeline-handle">
+                <div class="timeline-date">03/25/2025</div>
+            </div>
+        </div>
+    </div>
+    <script>
+        (function() {
+            const container = document.querySelector('.timeline-container');
+            const track = container.querySelector('.timeline-track');
+            const handle = container.querySelector('.timeline-handle');
+            let isDragging = false;
+            
+            // For now, we only have one time point
+            const timePoints = {
+                "03/25/2025": 1.0
+            };
+            
+            function updatePosition(e) {
+                if (!isDragging) return;
+                
+                const rect = track.getBoundingClientRect();
+                let x = (e.clientX - rect.left) / rect.width;
+                x = Math.max(0, Math.min(1, x));
+                
+                // For now, snap to the only available time point
+                x = 1.0;
+                
+                handle.style.right = `${(1 - x) * 100}%`;
+            }
+            
+            handle.addEventListener('mousedown', (e) => {
+                isDragging = true;
+                e.preventDefault();
+            });
+            
+            document.addEventListener('mousemove', updatePosition);
+            document.addEventListener('mouseup', () => {
+                isDragging = false;
+            });
+            
+            // Prevent text selection while dragging
+            container.addEventListener('selectstart', (e) => {
+                if (isDragging) e.preventDefault();
+            });
+        })();
+    </script>
+    """
+    return gr.HTML(timeline_html)
+
+def create_leaderboard_tab():
+    """Create and return the leaderboard tab component"""
+    with gr.Tab("🏆 Leaderboard") as leaderboard_tab:
+        # Leaderboard header
+        with gr.Row():
+            gr.Markdown("### 📊 Leaderboard Overview")
+        
+        # Get initial data
+        df = get_combined_leaderboard(rank_data, {game: True for game in GAME_ORDER})
+        
+        # Create interactive DataFrame component
+        leaderboard_df = gr.DataFrame(
+            value=df,
+            label="Leaderboard",
+            interactive=True,  # Enable sorting and filtering
+            wrap=True,  # Enable text wrapping
+            column_widths=["200px", "150px"] + ["100px"] * len(GAME_ORDER),  # Set column widths
+            headers=["Model", "Organization"] + GAME_ORDER,  # Set column headers
+            datatype=["str", "str"] + ["number"] * len(GAME_ORDER)  # Set column types
+        )
+        
+        # Game selection section
+        with gr.Row():
+            gr.Markdown("### 🎮 Game Selection")
+        with gr.Row():
+            with gr.Column():
+                gr.Markdown("**🎮 Super Mario Bros**")
+                mario_overall = gr.Checkbox(label="Super Mario Bros Score", value=True)
+                mario_details = gr.Checkbox(label="Super Mario Bros Details", value=False)
+            with gr.Column():
+                gr.Markdown("**📦 Sokoban**")
+                sokoban_overall = gr.Checkbox(label="Sokoban Score", value=True)
+                sokoban_details = gr.Checkbox(label="Sokoban Details", value=False)
+            with gr.Column():
+                gr.Markdown("**🔢 2048**")
+                _2048_overall = gr.Checkbox(label="2048 Score", value=True)
+                _2048_details = gr.Checkbox(label="2048 Details", value=False)
+            with gr.Column():
+                gr.Markdown("**🍬 Candy Crash**")
+                candy_overall = gr.Checkbox(label="Candy Crash Score", value=True)
+                candy_details = gr.Checkbox(label="Candy Crash Details", value=False)
+            with gr.Column():
+                gr.Markdown("**🎯 Tetris (complete)**")
+                tetris_overall = gr.Checkbox(label="Tetris (complete) Score", value=True)
+                tetris_details = gr.Checkbox(label="Tetris (complete) Details", value=False)
+            with gr.Column():
+                gr.Markdown("**📋 Tetris (planning)**")
+                tetris_plan_overall = gr.Checkbox(label="Tetris (planning) Score", value=True)
+                tetris_plan_details = gr.Checkbox(label="Tetris (planning) Details", value=False)
+        
+        # Controls
+        with gr.Row():
+            with gr.Column(scale=2):
+                gr.Markdown("**⏰ Time Tracker**")
+                timeline = create_timeline_slider()
+            with gr.Column(scale=1):
+                gr.Markdown("**🔄 Controls**")
+                clear_btn = gr.Button("Reset Filters", variant="secondary")
+        
+        # List of all checkboxes
+        checkbox_list = [
+            mario_overall, mario_details,
+            sokoban_overall, sokoban_details,
+            _2048_overall, _2048_details,
+            candy_overall, candy_details,
+            tetris_overall, tetris_details,
+            tetris_plan_overall, tetris_plan_details
+        ]
+        
+        def update_leaderboard(*checkbox_states):
+            # Convert checkbox states to selected games dictionary
+            selected_games = {
+                "Super Mario Bros": checkbox_states[0],
+                "Sokoban": checkbox_states[2],
+                "2048": checkbox_states[4],
+                "Candy Crash": checkbox_states[6],
+                "Tetris (complete)": checkbox_states[8],
+                "Tetris (planning only)": checkbox_states[10]
+            }
+            
+            # Get updated DataFrame
+            df = get_combined_leaderboard(rank_data, selected_games)
+            
+            # Format scores
+            for game in GAME_ORDER:
+                score_col = f"{game} Score"
+                if score_col in df.columns:
+                    df[score_col] = df[score_col].apply(lambda x: float(x) if x != '_' else 0)
+            
+            return df
+        
+        # Update leaderboard when checkboxes change
+        for checkbox in checkbox_list:
+            checkbox.change(
+                update_leaderboard,
+                inputs=checkbox_list,
+                outputs=[leaderboard_df]
+            )
+        
+        # Reset filters when clear button is clicked
+        def reset_filters():
+            # Reset all checkboxes to default state
+            checkbox_states = [True, False] * len(GAME_ORDER)
+            # Get DataFrame with all games selected
+            df = get_combined_leaderboard(rank_data, {game: True for game in GAME_ORDER})
+            return [df] + checkbox_states
+        
+        clear_btn.click(
+            reset_filters,
+            inputs=[],
+            outputs=[leaderboard_df] + checkbox_list
+        )
+    
+    return leaderboard_tab
+
+def make_leaderboard_md(df, last_updated_time):
+    """
+    Create markdown for the gaming leaderboard
+    """
+    total_models = len(df)
+    space = "&nbsp;&nbsp;&nbsp;"
+    
+    # Calculate total games played
+    total_games = sum(1 for col in df.columns if col.endswith(' Score'))
+    
+    leaderboard_md = f"""
+# 🎮 Gaming Performance Leaderboard
+Total #models: **{total_models}**.{space} Total #games: **{total_games}**.{space} Last updated: {last_updated_time}.
+"""
+    return leaderboard_md
+
+def make_category_leaderboard_md(df, game_name):
+    """
+    Create markdown for a specific game category
+    """
+    # Filter for models that participated in this game
+    score_col = f"{game_name} Score"
+    game_df = df[df[score_col] != '_']
+    total_models = len(game_df)
+    
+    # Calculate average score
+    avg_score = game_df[score_col].astype(float).mean()
+    
+    space = "&nbsp;&nbsp;&nbsp;"
+    leaderboard_md = f"""
+### {game_name}
+#### {space} #models: **{total_models}** {space} Average Score: **{avg_score:.1f}**{space}
+"""
+    return leaderboard_md
+
+def make_full_leaderboard_md():
+    """
+    Create markdown explaining the leaderboard metrics
+    """
+    leaderboard_md = """
+The leaderboard displays performance across multiple games:
+- **Super Mario Bros**: Platform game performance
+- **Sokoban**: Puzzle-solving ability
+- **2048**: Number puzzle game
+- **Candy Crash**: Matching game
+- **Tetris**: Classic block-stacking game
+
+Scores are normalized within each game for fair comparison. Higher values indicate better performance.
+"""
+    return leaderboard_md
+
+def create_leaderboard_table(df):
+    """
+    Create a formatted table of the leaderboard
+    """
+    # Select relevant columns
+    columns = ['Player', 'Organization']
+    for game in GAME_ORDER:
+        columns.append(f"{game} Score")
+    
+    # Create table
+    table = df[columns].copy()
+    
+    # Format scores
+    for game in GAME_ORDER:
+        score_col = f"{game} Score"
+        table[score_col] = table[score_col].apply(lambda x: f"{float(x):.1f}" if x != '_' else '-')
+    
+    return table
+
+def update_leaderboard(rank_data, selected_games):
+    """
+    Update the leaderboard with new data
+    """
+    # Get the combined leaderboard data
+    df = get_combined_leaderboard(rank_data, selected_games)
+    
+    # Create markdown sections
+    last_updated = pd.Timestamp.now().strftime("%Y-%m-%d %H:%M:%S")
+    leaderboard_md = make_leaderboard_md(df, last_updated)
+    
+    # Add category sections
+    for game in GAME_ORDER:
+        if selected_games.get(game, False):
+            leaderboard_md += make_category_leaderboard_md(df, game)
+    
+    # Add explanation
+    leaderboard_md += make_full_leaderboard_md()
+    
+    # Create table
+    table = create_leaderboard_table(df)
+    
+    return leaderboard_md, table 

leaderboard_utils.py

@@ -22,6 +22,8 @@ def get_organization(model_name):
         return "openai"
     elif "deepseek" in m:
         return "deepseek"
+    elif "llama" in m:
+        return "meta"
     else:
         return "unknown"
 
@@ -173,7 +175,7 @@ def calculate_rank_and_completeness(rank_data, selected_games):
                     ranks.append(rank)
                     player_data[f"{game} Score"] = player_score
                 else:
-                    player_data[f"{game} Score"] = "_"
+                    player_data[f"{game} Score"] = -1
 
         # Calculate average rank and completeness for sorting only
         if ranks:
@@ -262,7 +264,7 @@ def get_combined_leaderboard(rank_data, selected_games):
                     elif game in ["Tetris (complete)", "Tetris (planning only)"]:
                         player_data[f"{game} Score"] = df[df["Player"] == player]["Score"].iloc[0]
                 else:
-                    player_data[f"{game} Score"] = "_"
+                    player_data[f"{game} Score"] = -1
 
         results.append(player_data)
 
@@ -276,7 +278,7 @@ def get_combined_leaderboard(rank_data, selected_games):
         for game in GAME_ORDER:
             if f"{game} Score" in df_results.columns:
                 df_results["Total Score"] += df_results[f"{game} Score"].apply(
-                    lambda x: float(x) if x != "_" else 0
+                    lambda x: float(x) if x != -1 else 0
                 )
         
         # Sort by total score in descending order