update app.py

app.py

@@ -28,6 +28,14 @@ from data_visualization import (
     normalize_values,
     get_combined_leaderboard_with_single_radar
 )
+from gallery_tab import create_video_gallery
+
+# Try to import enhanced leaderboard, use standard DataFrame if not available
+
+from gradio_leaderboard import Leaderboard, SelectColumns, ColumnFilter
+from leaderboard_config import ON_LOAD_COLUMNS, TYPES
+HAS_ENHANCED_LEADERBOARD = True
+
 
 # Define time points and their corresponding data files
 TIME_POINTS = {
@@ -60,25 +68,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:
@@ -87,42 +76,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:
@@ -133,6 +86,43 @@ def load_rank_data(time_point):
             return None
     return None
 
+# 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()]
+    
+    return display_df
+
+# Helper function to ensure leaderboard updates maintain consistent height
+def update_df_with_height(df):
+    """Update DataFrame with consistent height parameter."""
+    return gr.update(value=df, height=800)
+
 def update_leaderboard(mario_overall, mario_details,
                        sokoban_overall, sokoban_details,
                        _2048_overall, _2048_details,
@@ -263,6 +253,9 @@ 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"])
         # For detailed view, we'll use the same chart for all visualizations
@@ -271,12 +264,14 @@ def update_leaderboard(mario_overall, mario_details,
     else:
         # For overall view
         df, group_bar_chart = 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 = group_bar_chart
     
     # Return exactly 16 values to match the expected outputs
-    return (df, chart, radar_chart, group_bar_chart,
+    return (update_df_with_height(display_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"],
@@ -342,6 +337,9 @@ def clear_filters():
     # Get the combined leaderboard and group bar chart
     df, group_bar_chart = get_combined_leaderboard_with_group_bar(rank_data, selected_games)
     
+    # 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)
     
@@ -349,7 +347,7 @@ def clear_filters():
     leaderboard_state = get_initial_state()
     
     # Return exactly 16 values to match the expected outputs
-    return (df, group_bar_chart, radar_chart, group_bar_chart,
+    return (update_df_with_height(display_df), group_bar_chart, radar_chart, group_bar_chart,
             True, False,  # mario
             True, False,  # sokoban
             True, False,  # 2048
@@ -465,263 +463,19 @@ 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]
-    
-    # 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 build_app():
     with gr.Blocks(css="""
-        .visualization-container {
-            height: 70vh !important;  /* Reduced from 85vh to 70vh */
-            max-height: 700px !important;  /* Reduced from 900px to 700px */
-            min-height: 500px !important;  /* Reduced from 600px to 500px */
-            background-color: #f8f9fa;
-            border-radius: 10px;
-            padding: 20px;  /* Reduced padding from 25px to 20px */
-            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-            overflow: hidden;
-            margin: 0 auto !important;
+        .visualization-container .js-plotly-plot {
+            margin-left: auto !important;
+            margin-right: auto !important;
+            display: block !important;
         }
-        .visualization-container .plot {
-            height: 100% !important;
-            width: 100% !important;
-            object-fit: contain !important;  /* Added to ensure proper scaling */
+
+        /* Optional: limit width for better layout on large screens */
+        .visualization-container .js-plotly-plot {
+            max-width: 1000px;
         }
+
         .section-title {
             font-size: 1.5em;
             font-weight: bold;
@@ -736,6 +490,65 @@ def build_app():
             margin: 0 auto;
             padding: 0 20px;
         }
+        
+        /* Enhanced table styling - SIMPLIFIED */
+        .table-container {
+            height: 800px !important;
+            max-height: 1000px !important;
+            overflow-y: auto !important;  /* ONLY the outer container gets scrolling */
+            border-radius: 8px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+        }
+        
+        /* Prevent inner containers from having scrollbars */
+        .table-container > div,
+        .table-container > div > div,
+        .gradio-dataframe > div,
+        [data-testid="dataframe"] > div {
+            overflow: visible !important;
+            height: auto !important;
+        }
+        
+        /* Fix table styling */
+        .table-container table {
+            width: 100%;
+            border-collapse: separate;
+            border-spacing: 0;
+        }
+        
+        /* Make headers sticky */
+        .table-container th {
+            position: sticky !important;
+            top: 0 !important;
+            background-color: #f8f9fa !important;
+            z-index: 10 !important;
+            font-weight: bold;
+            padding: 12px;
+            border-bottom: 2px solid #e9ecef;
+        }
+        
+        /* Simple cell styling */
+        .table-container td {
+            padding: 10px 12px;
+            border-bottom: 1px solid #e9ecef;
+        }
+        
+        /* Visual enhancements */
+        .table-container tr:hover {
+            background-color: #f1f3f4;
+        }
+        
+        .table-container tr:nth-child(even) {
+            background-color: #f8fafc;
+        }
+        
+        /* Row containing the table */
+        .gradio-container .gr-row {
+            min-height: auto !important;
+            height: auto !important;
+            overflow: visible !important;
+            margin-bottom: 20px;
+        }
     """) as demo:
         gr.Markdown("# 🎮 Game Arena: Gaming Agent 🎲")
         
@@ -752,19 +565,20 @@ def build_app():
                     elem_classes="visualization-container"
                 )
                 
-                # Overall view visualizations (two charts)
-                with gr.Row(visible=True) as overall_visualizations:
-                    with gr.Column(scale=1):
-                        radar_visualization = gr.Plot(
-                            label="Comparative Analysis (Radar Chart)",
-                            elem_classes="visualization-container"
-                        )
-                    with gr.Column(scale=1):
-                        group_bar_visualization = gr.Plot(
-                            label="Comparative Analysis (Group Bar Chart)",
-                            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"
+                            )
+                        with gr.Tab("📊 Group Bar Chart"):
+                            group_bar_visualization = gr.Plot(
+                                label="Comparative Analysis (Group Bar Chart)",
+                                elem_classes="visualization-container"
+                            )
+
+
                 # Game selection section
                 with gr.Row():
                     gr.Markdown("### 🎮 Game Selection")
@@ -806,20 +620,59 @@ def build_app():
                 # Leaderboard table
                 with gr.Row():
                     gr.Markdown("### 📋 Detailed Results")
+
+                # Add leaderboard search box in its own row
+                with gr.Row():
+                    search_box = gr.Textbox(
+                        label="🔍 Search by Player or Organization",
+                        placeholder="Type to filter the table...",
+                        show_label=True
+                    )
+                
+                # 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)
+                
+                # Create a standard DataFrame component with enhanced styling
                 with gr.Row():
                     leaderboard_df = 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
-                        }),
-                        label="Leaderboard",
-                        interactive=False
+                        value=initial_display_df,
+                        interactive=True,
+                        elem_id="leaderboard-table",
+                        elem_classes="table-container",
+                        wrap=True,
+                        column_widths={"Player": "25%", "Organization": "20%"},
+                        height=800
                     )
                 
+                # Add search functionality
+                def filter_table(search_term, current_df):
+                    if not search_term:
+                        return current_df
+                    
+                    # Filter the DataFrame by Player or Organization
+                    filtered_df = current_df[
+                        current_df["Player"].str.contains(search_term, case=False) | 
+                        current_df["Organization"].str.contains(search_term, case=False)
+                    ]
+                    return filtered_df
+                
+                # Connect search box to the table
+                search_box.change(
+                    filter_table,
+                    inputs=[search_box, leaderboard_df],
+                    outputs=[leaderboard_df]
+                )
+                
                 # List of all checkboxes
                 checkbox_list = [
                     mario_overall, mario_details,

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,53 +26,25 @@ 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):
-    """
-    Normalize values using z-score and scale to 0-100 range
-    
-    Args:
-        values (list): List of values to normalize
-        mean (float): Mean value for normalization
-        std (float): Standard deviation for normalization
-        
-    Returns:
-        list: Normalized values scaled to 0-100 range
-    """
     if std == 0:
-        return [50 if v > 0 else 0 for v in values]  # Handle zero std case
+        return [50 if v > 0 else 0 for v in values]
     z_scores = [(v - mean) / std for v in values]
-    # 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
+    return [max(0, min(100, (z * 30) + 50)) for z in z_scores]
 
-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, 7))
-    
-    # Sort by score
+
+
     if game_name == "Super Mario Bros":
         score_col = "Score"
         df_sorted = df.sort_values(by=score_col, ascending=True)
@@ -106,645 +73,406 @@ 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, top=0.85, bottom=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}'
-            
-        # Get color for model from MODEL_COLORS, use default if not found
-        model_name = df_sorted.iloc[i]['Player']
-        color = MODEL_COLORS.get(model_name, '#808080')  # Default to gray if color not found
-        bar.set_color(color)  # Set the bar color
-        
-        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
-    
-    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
-    
-        # 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]]))
-            
-            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=(0.9, 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)
-    
+    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):
-    """
-    Get combined leaderboard and create radar charts
-    """
     df = get_combined_leaderboard(rank_data, selected_games)
-    radar_fig = create_radar_charts(df)
-    return df, radar_fig
-
-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]))
+    # Create a copy for visualization to avoid modifying the original
+    df_viz = df.copy()
+    return df, create_radar_charts(df_viz)
 
-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)])
+def create_group_bar_chart(df):
+    active_games = [g for g in GAME_ORDER if f"{g} Score" in df.columns]
+    game_cols = [f"{g} Score" for g in active_games]
 
-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
-    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)
+    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)
 
-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=(10, 7))
-    
-    # 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.25,   # Increased from 0.15 to 0.25 to add more space at the bottom
-                       right=0.70,   # Reduced from 0.75 to 0.70 to make 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
+    fig = go.Figure()
+    for _, row in df.iterrows():
+        player = row["Player"]
+        color = MODEL_COLORS.get(player, '#808080')  # Default to gray if missing
 
-    # Keep track of which models have data in any game
-    models_with_data = set()
+        fig.add_trace(go.Bar(
+            name=simplify_model_name(row["Player"]),
+            x=active_games,
+            y=[row[f"norm_{g} Score"] for g in active_games],
+            marker_color=color
+        ))
 
-    # 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, fontweight='bold')
-    ax.set_ylabel('Normalized Performance Score', fontsize=12)
-    ax.set_title('AI Model Performance Across Games', 
-                 fontsize=14, pad=20, fontweight='bold')
-
-    # 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),
-              loc='upper left',
-              fontsize=9,
-              title='AI Models',
-              title_fontsize=10)  # Added bold font weight for model names
-
-    # No need for tight_layout() as we're manually controlling the spacing
-    
+    fig.update_layout(
+        autosize=False,
+        width=800,
+        height=600,
+        margin=dict(l=80, r=150, t=40, b=200),
+        title=dict(
+            text="Grouped Bar Chart of AI Models",
+            pad=dict(t=10)
+        ),
+        xaxis_title="Games",
+        yaxis_title="Normalized Score",
+        barmode='group',
+        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_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
+    # 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):
-    """
-    Create a single radar chart comparing AI model performance across selected games
-    
-    Args:
-        df (pd.DataFrame): DataFrame containing the combined leaderboard data
-        selected_games (list, optional): List of game names to include in the radar chart
-        highlight_models (list, optional): List of model names to highlight in the chart
-        
-    Returns:
-        matplotlib.figure.Figure: The generated radar chart figure
-    """
-    # Close any existing figures to prevent memory leaks
-    plt.close('all')
-    
-    # Use provided selected_games or default to the four main games
     if selected_games is None:
         selected_games = ['Super Mario Bros', '2048', 'Candy Crash', 'Sokoban']
-    
-    game_columns = [f"{game} Score" for game in selected_games]
+
+    game_cols = [f"{game} Score" for game in selected_games]
     categories = selected_games
     
-    # Create figure
-    fig, ax = plt.subplots(figsize=(8, 7), subplot_kw=dict(projection='polar'))
-    fig.patch.set_facecolor('white')
-    ax.set_facecolor('white')
-    
-    # Compute number of variables
-    num_vars = len(categories)
-    angles = np.linspace(0, 2*np.pi, num_vars, endpoint=False)
-    angles = np.concatenate((angles, [angles[0]]))  # Complete the circle
-    
-    # Set up the axes
-    ax.set_xticks(angles[:-1])
-    
-    # Format categories with bold text
-    formatted_categories = []
-    for game in categories:
-        if game == "Super Mario Bros":
-            game = "Super\nMario"
-        elif game == "Candy Crash":
-            game = "Candy\nCrash"
-        elif game == "Tetris (planning only)":
-            game = "Tetris\n(planning)"
-        elif game == "Tetris (complete)":
-            game = "Tetris\n(complete)"
-        formatted_categories.append(game)
-    
-    # Set bold labels for categories
-    ax.set_xticklabels(formatted_categories, fontsize=10, fontweight='bold')
-    
-    # Draw grid lines
-    ax.set_rgrids([20, 40, 60, 80, 100], 
-                  labels=['20', '40', '60', '80', '100'],
-                  angle=45,
-                  fontsize=8)
-    
-    # Calculate game statistics for normalization
-    def get_game_stats(df, game_col):
-        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)
-    
-    game_stats = {col: get_game_stats(df, col) for col in game_columns}
-    
-    # Split the dataframe into highlighted and non-highlighted models
-    if highlight_models:
-        highlighted_df = df[df['Player'].isin(highlight_models)]
-        non_highlighted_df = df[~df['Player'].isin(highlight_models)]
-    else:
-        highlighted_df = pd.DataFrame()
-        non_highlighted_df = df
-    
-    # Plot non-highlighted models first
-    for _, row in non_highlighted_df.iterrows():
-        values = []
-        for col in game_columns:
-            val = row[col]
-            if isinstance(val, str) and val == '_':
-                values.append(0)
-            else:
-                try:
-                    mean, std = game_stats[col]
-                    if std == 0:
-                        normalized = 50 if float(val) > 0 else 0
-                    else:
-                        z_score = (float(val) - mean) / std
-                        normalized = max(0, min(100, (z_score * 30) + 50))
-                    values.append(normalized)
-                except:
-                    values.append(0)
-        
-        # Complete the circular plot
-        values = np.concatenate((values, [values[0]]))
-        
-        # Get color for model, use default if not found
-        model_name = row['Player']
-        color = MODEL_COLORS.get(model_name, '#808080')  # Default to gray if color not found
-        
-        # Plot with lines and markers
-        ax.plot(angles, values, 'o-', linewidth=2, label=model_name, color=color)
-        ax.fill(angles, values, alpha=0.25, color=color)
-    
-    # Plot highlighted models last (so they appear on top)
-    for _, row in highlighted_df.iterrows():
-        values = []
-        for col in game_columns:
-            val = row[col]
-            if isinstance(val, str) and val == '_':
-                values.append(0)
-            else:
-                try:
-                    mean, std = game_stats[col]
-                    if std == 0:
-                        normalized = 50 if float(val) > 0 else 0
-                    else:
-                        z_score = (float(val) - mean) / std
-                        normalized = max(0, min(100, (z_score * 30) + 30))
-                    values.append(normalized)
-                except:
-                    values.append(0)
-        
-        # Complete the circular plot
-        values = np.concatenate((values, [values[0]]))
-        
-        # Plot with red color and thicker line
-        model_name = row['Player']
-        ax.plot(angles, values, 'o-', linewidth=6, label=model_name, color='red')
-        ax.fill(angles, values, alpha=0.25, color='red')
-    
-    # Add title
-    plt.title('AI Models Performance Across Games\n(Normalized Scores)',
-              pad=20, fontsize=14, fontweight='bold')
-    
-    # Get handles and labels for legend
-    handles, labels = ax.get_legend_handles_labels()
-    
-    # Reorder legend to put highlighted models first
-    if highlight_models:
-        highlighted_handles = []
-        highlighted_labels = []
-        non_highlighted_handles = []
-        non_highlighted_labels = []
-        
-        for handle, label in zip(handles, labels):
-            if label in highlight_models:
-                highlighted_handles.append(handle)
-                highlighted_labels.append(label)
-            else:
-                non_highlighted_handles.append(handle)
-                non_highlighted_labels.append(label)
-        
-        handles = highlighted_handles + non_highlighted_handles
-        labels = highlighted_labels + non_highlighted_labels
-    
-    # Add legend with reordered handles and labels
-    legend = plt.legend(handles, labels,
-                       loc='center left',
-                       bbox_to_anchor=(0.95, 1),
-                       fontsize=8,
-                       title='AI Models',
-                       title_fontsize=10)  # Added bold font weight for model names
-    
-    # Adjust layout to prevent label cutoff
-    plt.subplots_adjust(right=0.8)  # Added subplot adjustment to give more space on the right
-    plt.tight_layout()
-    
+    # 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):
-    """
-    Get combined leaderboard and create single radar chart
-    
-    Args:
-        rank_data (dict): Dictionary containing rank data
-        selected_games (dict): Dictionary of game names and their selection status
-        highlight_models (list, optional): List of model names to highlight in the chart
-        
-    Returns:
-        tuple: (DataFrame, matplotlib.figure.Figure) containing the leaderboard data and radar chart
-    """
     df = get_combined_leaderboard(rank_data, selected_games)
-    # Convert selected_games dict to list of selected game names
-    selected_game_names = [game for game, selected in selected_games.items() if selected]
-    radar_fig = create_single_radar_chart(df, selected_games=selected_game_names, highlight_models=highlight_models)
-    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 save_visualization(fig, filename):
-    """
-    Save visualization to file
-    """
-    fig.savefig(filename, bbox_inches='tight', dpi=300)
+def create_organization_radar_chart(rank_data):
+    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):
+    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):
+    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 go.Figure().update_layout(
+            title=dict(text="Player not found", pad=dict(t=10)),
+            autosize=False,
+            width=800,
+            height=400
+        )
+
+    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 = 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)
 
+    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 save_visualization(fig, filename):
+    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 

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