Refactor Winners by Category to single unified table

- Changed from multiple category cards to a single horizontal table
- Format: | [emoji] Category | Score | ... for each category
- Display only model name (removed SDK version)
- Deduplicate by model name, keeping highest score
- Updated CSS for new table layout with responsive design

Co-authored-by: openhands <openhands@all-hands.dev>

content.py

@@ -966,187 +966,144 @@ h3 .header-link-icon {
 
 /* ====== Winners by Category Section ====== */
 .winners-by-category-container {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-    gap: 20px;
     margin: 20px 0;
+    overflow-x: auto;
 }
 
-.winner-category-card {
+.winners-unified-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 13px;
     background: #fff;
     border: 1px solid #032629;
     border-radius: 12px;
-    padding: 16px;
-    transition: box-shadow 0.2s ease;
+    overflow: hidden;
 }
 
-.dark .winner-category-card {
+.dark .winners-unified-table {
     background: rgba(250, 242, 233, 0.05);
     border-color: #9fead1;
 }
 
-.winner-category-card:hover {
-    box-shadow: 0 4px 12px rgba(3, 38, 41, 0.15);
-}
-
-.dark .winner-category-card:hover {
-    box-shadow: 0 4px 12px rgba(159, 234, 209, 0.2);
-}
-
-.winner-category-header {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    margin-bottom: 16px;
-    padding-bottom: 12px;
-    border-bottom: 2px solid #F0529C;
-}
-
-.dark .winner-category-header {
-    border-bottom-color: #0FCB8C;
+.winners-unified-table thead tr {
+    background: linear-gradient(to right, rgba(240, 82, 156, 0.1), rgba(15, 203, 140, 0.1));
 }
 
-.winner-category-icon {
-    width: 32px;
-    height: 32px;
+.dark .winners-unified-table thead tr {
+    background: linear-gradient(to right, rgba(240, 82, 156, 0.2), rgba(15, 203, 140, 0.2));
 }
 
-.winner-category-header h3 {
-    margin: 0;
-    font-size: 16px;
+.winners-unified-table .category-header {
+    padding: 12px 8px;
+    text-align: center;
     font-weight: 700;
+    font-size: 13px;
     color: #032629;
+    border-bottom: 2px solid #F0529C;
+    border-right: 1px solid #eee;
+    white-space: nowrap;
 }
 
-.dark .winner-category-header h3 {
+.dark .winners-unified-table .category-header {
     color: #fff;
+    border-bottom-color: #0FCB8C;
+    border-right-color: #2a3a3a;
 }
 
-.winner-table {
-    width: 100%;
-    border-collapse: collapse;
-    font-size: 13px;
-}
-
-.winner-table thead tr {
-    border-bottom: 1px solid #ddd;
-}
-
-.dark .winner-table thead tr {
-    border-bottom-color: #4a5a5a;
-}
-
-.winner-table th {
-    padding: 8px 4px;
-    text-align: left;
-    font-weight: 600;
-    color: #667876;
-    font-size: 11px;
-    text-transform: uppercase;
+.winners-unified-table .category-header:last-child {
+    border-right: none;
 }
 
-.dark .winner-table th {
-    color: #9fead1;
+.winner-category-icon-small {
+    width: 18px;
+    height: 18px;
+    vertical-align: middle;
+    margin-right: 6px;
 }
 
-.winner-table td {
-    padding: 10px 4px;
+.winners-unified-table td {
+    padding: 8px 6px;
     vertical-align: middle;
     border-bottom: 1px solid #eee;
 }
 
-.dark .winner-table td {
+.dark .winners-unified-table td {
     border-bottom-color: #2a3a3a;
 }
 
-.winner-table tbody tr:last-child td {
+.winners-unified-table tbody tr:last-child td {
     border-bottom: none;
 }
 
-.winner-table .rank-col {
-    width: 32px;
-    text-align: center;
-    font-size: 14px;
+.winners-unified-table tbody tr:hover {
+    background: rgba(240, 82, 156, 0.05);
 }
 
-.winner-table .score-col {
-    width: 60px;
-    text-align: right;
-    color: #F0529C;
-    font-size: 14px;
-}
-
-.dark .winner-table .score-col {
-    color: #0FCB8C;
-}
-
-.system-info {
-    display: flex;
-    align-items: center;
-    gap: 10px;
+.dark .winners-unified-table tbody tr:hover {
+    background: rgba(15, 203, 140, 0.1);
 }
 
-.company-logo-small {
-    width: 20px;
-    height: 20px;
-    flex-shrink: 0;
-}
-
-.system-details {
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-}
-
-.sdk-name {
-    font-weight: 600;
-    color: #032629;
-    font-size: 13px;
+.winners-unified-table .model-cell {
     white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    color: #032629;
+    font-weight: 500;
+    border-right: none;
 }
 
-.dark .sdk-name {
+.dark .winners-unified-table .model-cell {
     color: #fff;
 }
 
-.model-name {
-    font-size: 11px;
-    color: #667876;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+.winners-unified-table .score-cell {
+    text-align: right;
+    font-weight: 700;
+    color: #F0529C;
+    padding-right: 12px;
+    border-right: 1px solid #eee;
+    min-width: 50px;
 }
 
-.dark .model-name {
-    color: #9fead1;
+.dark .winners-unified-table .score-cell {
+    color: #0FCB8C;
+    border-right-color: #2a3a3a;
 }
 
-.no-data {
-    text-align: center;
-    color: #999;
-    font-style: italic;
-    padding: 20px !important;
+.winners-unified-table td:nth-last-child(1) {
+    border-right: none;
+}
+
+.company-logo-tiny {
+    width: 16px;
+    height: 16px;
+    vertical-align: middle;
+    margin-right: 6px;
 }
 
 /* Responsive adjustments for winners section */
-@media (max-width: 600px) {
-    .winners-by-category-container {
-        grid-template-columns: 1fr;
+@media (max-width: 900px) {
+    .winners-unified-table {
+        font-size: 11px;
+    }
+    
+    .winners-unified-table .category-header {
+        font-size: 11px;
+        padding: 8px 4px;
     }
     
-    .winner-category-card {
-        padding: 12px;
+    .winner-category-icon-small {
+        width: 14px;
+        height: 14px;
+        margin-right: 4px;
     }
     
-    .winner-table .score-col,
-    .winner-table .rank-col {
-        font-size: 12px;
+    .winners-unified-table td {
+        padding: 6px 4px;
     }
     
-    .sdk-name {
-        font-size: 12px;
+    .company-logo-tiny {
+        width: 14px;
+        height: 14px;
+        margin-right: 4px;
     }
     
     .model-name {

ui_components.py

@@ -426,14 +426,15 @@ CATEGORY_DEFINITIONS = [
 
 def get_winners_by_category(df: pd.DataFrame, top_n: int = 5) -> dict:
     """
-    Extract the top N systems for each category based on their score.
+    Extract the top N models for each category based on their score.
+    Deduplicates by model name, keeping only the highest score per model.
     
     Args:
         df: The full leaderboard DataFrame with all scores
-        top_n: Number of top systems to return per category (default: 5)
+        top_n: Number of top models to return per category (default: 5)
         
     Returns:
-        Dictionary mapping category name to list of top systems with their scores
+        Dictionary mapping category name to list of top models with their scores
     """
     winners = {}
     
@@ -452,72 +453,87 @@ def get_winners_by_category(df: pd.DataFrame, top_n: int = 5) -> dict:
             winners[cat_name] = []
             continue
         
-        # Sort by score descending and take top N
-        cat_df = cat_df.sort_values(score_col, ascending=False).head(top_n)
+        # Clean model names for deduplication
+        def clean_model_name(model):
+            if isinstance(model, list):
+                model = model[0] if model else "Unknown"
+            return str(model).split('/')[-1]
+        
+        cat_df['_clean_model'] = cat_df['Language Model'].apply(clean_model_name)
+        
+        # Deduplicate by model name, keeping highest score
+        cat_df = cat_df.sort_values(score_col, ascending=False)
+        cat_df = cat_df.drop_duplicates(subset=['_clean_model'], keep='first')
+        
+        # Take top N after dedup
+        cat_df = cat_df.head(top_n)
         
         # Extract relevant info
-        top_systems = []
+        top_models = []
         for rank, (_, row) in enumerate(cat_df.iterrows(), 1):
-            system_info = {
+            model_info = {
                 "rank": rank,
-                "sdk_version": row.get("SDK Version", "Unknown"),
                 "language_model": row.get("Language Model", "Unknown"),
                 "score": row[score_col],
             }
-            top_systems.append(system_info)
+            top_models.append(model_info)
         
-        winners[cat_name] = top_systems
+        winners[cat_name] = top_models
     
     return winners
 
 
 def create_winners_by_category_html(df: pd.DataFrame, top_n: int = 5) -> str:
     """
-    Create an HTML table displaying the top N winners for each category.
+    Create a single HTML table displaying the top N winners for each category side by side.
+    Format: | [emoji] Category | Score | [emoji] Category | Score | ...
     
     Args:
         df: The full leaderboard DataFrame
-        top_n: Number of top systems to show per category
+        top_n: Number of top models to show per category
         
     Returns:
         HTML string with the winners table
     """
     winners = get_winners_by_category(df, top_n)
     
-    # Build the HTML table
+    # Build a single unified table
     html_parts = ['<div class="winners-by-category-container">']
+    html_parts.append('<table class="winners-unified-table">')
     
-    # Create a card for each category
+    # Header row with category icons and names
+    html_parts.append('<thead><tr>')
     for cat_def in CATEGORY_DEFINITIONS:
         cat_name = cat_def["name"]
         icon_file = cat_def["icon"]
         icon_uri = get_svg_as_data_uri(f"assets/{icon_file}")
-        
-        top_systems = winners.get(cat_name, [])
-        
         html_parts.append(f'''
-        <div class="winner-category-card">
-            <div class="winner-category-header">
-                <img src="{icon_uri}" alt="{cat_name}" class="winner-category-icon">
-                <h3>{cat_name}</h3>
-            </div>
-            <table class="winner-table">
-                <thead>
-                    <tr>
-                        <th class="rank-col">#</th>
-                        <th class="system-col">System</th>
-                        <th class="score-col">Score</th>
-                    </tr>
-                </thead>
-                <tbody>
+            <th class="category-header" colspan="2">
+                <img src="{icon_uri}" alt="{cat_name}" class="winner-category-icon-small">
+                {cat_name}
+            </th>
         ''')
+    html_parts.append('</tr></thead>')
+    
+    # Body rows - one row per rank position
+    html_parts.append('<tbody>')
+    for rank in range(1, top_n + 1):
+        html_parts.append('<tr>')
         
-        if top_systems:
-            for system in top_systems:
-                rank = system["rank"]
-                sdk_version = system["sdk_version"]
-                language_model = system["language_model"]
-                score = system["score"]
+        for cat_def in CATEGORY_DEFINITIONS:
+            cat_name = cat_def["name"]
+            top_models = winners.get(cat_name, [])
+            
+            # Find the model at this rank
+            model_at_rank = None
+            for m in top_models:
+                if m["rank"] == rank:
+                    model_at_rank = m
+                    break
+            
+            if model_at_rank:
+                language_model = model_at_rank["language_model"]
+                score = model_at_rank["score"]
                 
                 # Get company logo for the model
                 company_info = get_company_from_model(language_model)
@@ -526,46 +542,30 @@ def create_winners_by_category_html(df: pd.DataFrame, top_n: int = 5) -> str:
                 # Format model name - clean it if it's a list
                 if isinstance(language_model, list):
                     language_model = language_model[0] if language_model else "Unknown"
-                model_display = str(language_model).split('/')[-1]  # Remove provider prefix
+                model_display = str(language_model).split('/')[-1]
                 
                 # Add medal emoji for top 3
-                rank_display = rank
+                rank_prefix = ""
                 if rank == 1:
-                    rank_display = "🥇"
+                    rank_prefix = "🥇 "
                 elif rank == 2:
-                    rank_display = "🥈"
+                    rank_prefix = "🥈 "
                 elif rank == 3:
-                    rank_display = "🥉"
+                    rank_prefix = "🥉 "
                 
                 html_parts.append(f'''
-                    <tr>
-                        <td class="rank-col">{rank_display}</td>
-                        <td class="system-col">
-                            <div class="system-info">
-                                <img src="{logo_uri}" alt="{company_info['name']}" class="company-logo-small">
-                                <div class="system-details">
-                                    <span class="sdk-name">{sdk_version}</span>
-                                    <span class="model-name">{model_display}</span>
-                                </div>
-                            </div>
-                        </td>
-                        <td class="score-col"><strong>{score:.1f}</strong></td>
-                    </tr>
+                    <td class="model-cell">
+                        <img src="{logo_uri}" alt="{company_info['name']}" class="company-logo-tiny">
+                        {rank_prefix}{model_display}
+                    </td>
+                    <td class="score-cell">{score:.1f}</td>
                 ''')
-        else:
-            html_parts.append('''
-                    <tr>
-                        <td colspan="3" class="no-data">No submissions yet</td>
-                    </tr>
-            ''')
+            else:
+                html_parts.append('<td class="model-cell">-</td><td class="score-cell">-</td>')
         
-        html_parts.append('''
-                </tbody>
-            </table>
-        </div>
-        ''')
+        html_parts.append('</tr>')
     
-    html_parts.append('</div>')
+    html_parts.append('</tbody></table></div>')
     
     return ''.join(html_parts)