Spaces:

DynamicSuperb
/

leaderboard

Running

App Files Files Community

cyhuang-tw commited on Jun 23

Commit

6ad9359

verified ·

1 Parent(s): 364f28f

Update index.html

Browse files

Files changed (1) hide show

index.html +1000 -18

index.html CHANGED Viewed

@@ -1,19 +1,1001 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dynamic-SUPERB Leaderboard</title>
+    <style>
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            margin: 0;
+            padding: 20px;
+            background-color: #f8f9fa;
+        }
+        /* Menu Styles */
+        .menu-container {
+            position: fixed;
+            top: 15px;
+            left: 15px;
+            z-index: 1000;
+        }
+        .menu-icon {
+            font-size: 28px;
+            cursor: pointer;
+            user-select: none;
+            color: #667eea;
+            background: white;
+            padding: 8px 12px;
+            border-radius: 8px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+            transition: all 0.2s ease;
+        }
+        .menu-icon:hover {
+            background: #667eea;
+            color: white;
+            transform: scale(1.05);
+        }
+        .menu-list {
+            display: none;
+            position: absolute;
+            top: 50px;
+            left: 0;
+            background: white;
+            border: 1px solid #dee2e6;
+            border-radius: 8px;
+            box-shadow: 0 4px 16px rgba(0,0,0,0.15);
+            min-width: 220px;
+            font-size: 14px;
+            overflow: hidden;
+        }
+        .menu-list.show {
+            display: block;
+            animation: slideDown 0.2s ease;
+        }
+        @keyframes slideDown {
+            from { opacity: 0; transform: translateY(-10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .menu-list a {
+            display: block;
+            padding: 12px 16px;
+            color: #495057;
+            text-decoration: none;
+            border-bottom: 1px solid #f8f9fa;
+            transition: background-color 0.2s ease;
+        }
+        .menu-list a:last-child {
+            border-bottom: none;
+        }
+        .menu-list a:hover {
+            background-color: #667eea;
+            color: white;
+        }
+        .menu-list a::before {
+            content: "→ ";
+            margin-right: 8px;
+            opacity: 0;
+            transition: opacity 0.2s ease;
+        }
+        .menu-list a:hover::before {
+            opacity: 1;
+        }
+        .container {
+            max-width: 1400px;
+            margin: 0 auto;
+            background: white;
+            border-radius: 8px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+            overflow: hidden;
+        }
+        .header {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            padding: 30px;
+            text-align: center;
+        }
+        .header h1 {
+            margin: 0;
+            font-size: 2.5em;
+            font-weight: 300;
+        }
+        .controls {
+            padding: 20px 30px;
+            border-bottom: 1px solid #dee2e6;
+            background: #f8f9fa;
+        }
+        .filter-row {
+            display: flex;
+            gap: 20px;
+            margin-bottom: 15px;
+            flex-wrap: wrap;
+        }
+        .form-group {
+            flex: 1;
+            min-width: 200px;
+        }
+        label {
+            display: block;
+            margin-bottom: 5px;
+            font-weight: 600;
+            color: #495057;
+        }
+        select {
+            width: 100%;
+            padding: 10px 15px;
+            border: 2px solid #dee2e6;
+            border-radius: 6px;
+            background: white;
+            font-size: 14px;
+            transition: border-color 0.3s;
+        }
+        select:focus {
+            outline: none;
+            border-color: #667eea;
+        }
+        select:disabled {
+            background-color: #f8f9fa;
+            color: #6c757d;
+            cursor: not-allowed;
+        }
+        .clear-filters {
+            padding: 8px 16px;
+            background: #dc3545;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 14px;
+            transition: background-color 0.3s;
+        }
+        .clear-filters:hover {
+            background: #c82333;
+        }
+        .table-container {
+            overflow-x: auto;
+            max-height: 70vh;
+            overflow-y: auto;
+        }
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            font-size: 12px;
+        }
+        th {
+            background: #343a40;
+            color: white;
+            padding: 8px 6px;
+            text-align: center;
+            position: sticky;
+            top: 0;
+            z-index: 10;
+            border-right: 1px solid #495057;
+            writing-mode: horizontal-tb;
+            text-orientation: initial;
+            min-width: 80px;
+            max-width: 120px;
+            white-space: normal;
+            word-wrap: break-word;
+            word-break: break-word;
+            vertical-align: bottom;
+            height: auto;
+            line-height: 1.2;
+        }
+        th:first-child {
+            min-width: 150px;
+            text-align: left;
+            padding: 12px 8px;
+            white-space: nowrap;
+        }
+        .task-header {
+            font-size: 11px;
+            line-height: 1.2;
+            white-space: normal;
+            word-wrap: break-word;
+            word-break: break-word;
+            text-align: center;
+            vertical-align: bottom;
+            padding: 8px 4px;
+            background: #495057;
+            cursor: default;
+        }
+        .metric-header {
+            font-size: 10px;
+            line-height: 1.1;
+            text-align: center;
+            vertical-align: bottom;
+            padding: 6px 3px;
+            background: #6c757d;
+            position: sticky;
+            top: 40px;
+            z-index: 9;
+            cursor: pointer;
+            transition: background-color 0.2s;
+            user-select: none;
+        }
+        .metric-header:hover {
+            background: #5a6268;
+        }
+        .metric-header.sorted {
+            background: #007bff;
+            font-weight: bold;
+        }
+        .nar-metric {
+            background: #856404 !important;
+            color: #fff3cd;
+        }
+        .nar-metric:hover {
+            background: #975a16 !important;
+        }
+        .nar-metric.sorted {
+            background: #6c5100 !important;
+        }
+        .sort-indicator {
+            font-size: 12px;
+            margin-left: 3px;
+            color: #28a745;
+        }
+        .sort-arrow {
+            font-size: 10px;
+            margin-left: 2px;
+            color: #ffc107;
+        }
+        td {
+            padding: 6px;
+            border-bottom: 1px solid #dee2e6;
+            border-right: 1px solid #dee2e6;
+            text-align: center;
+            font-family: 'Monaco', 'Menlo', monospace;
+            font-size: 11px;
+        }
+        td:first-child {
+            text-align: left;
+            font-family: inherit;
+            font-weight: 600;
+            background: #f8f9fa;
+            position: sticky;
+            left: 0;
+            z-index: 5;
+            padding: 8px 12px;
+            font-size: 13px;
+            white-space: nowrap;
+        }
+        .score.na {
+            color: #6c757d;
+            font-style: italic;
+        }
+        .stats {
+            padding: 15px 30px;
+            background: #e9ecef;
+            font-size: 14px;
+            color: #495057;
+        }
+        .task-name {
+            display: block;
+            margin-bottom: 4px;
+            font-weight: 600;
+        }
+        .metric-indicator {
+            font-size: 9px;
+            color: #ffc107;
+            display: block;
+            margin-top: 2px;
+            font-weight: normal;
+        }
+        .nar-indicator {
+            color: #fff3cd;
+            font-weight: bold;
+        }
+    </style>
+</head>
+<body>
+    <!-- Menu Container -->
+    <div class="menu-container">
+        <div class="menu-icon" id="menuIcon">☰</div>
+        <div class="menu-list" id="menuList">
+            <a href="checker.html">Checker</a>
+            <a href="https://github.com/dynamic-superb/dynamic-superb" target="_blank">GitHub Repository</a>
+            <a href="https://arxiv.org/abs/2411.05361" target="_blank">Paper on arXiv</a>
+        </div>
+    </div>
+    <div class="container">
+        <div class="header">
+            <h1>Dynamic-SUPERB Leaderboard V3</h1>
+            <p>Transposed View with Sorting - Click metric headers to sort</p>
+        </div>
+        <div class="controls">
+            <div class="filter-row">
+                <div class="form-group">
+                    <label for="level1Filter">Level 1 (Top-level):</label>
+                    <select id="level1Filter">
+                        <option value="">All Categories</option>
+                    </select>
+                </div>
+                <div class="form-group">
+                    <label for="level2Filter">Level 2:</label>
+                    <select id="level2Filter" disabled>
+                        <option value="">Select Level 1 first</option>
+                    </select>
+                </div>
+                <div class="form-group">
+                    <label for="level3Filter">Level 3:</label>
+                    <select id="level3Filter" disabled>
+                        <option value="">Select Level 2 first</option>
+                    </select>
+                </div>
+                <div class="form-group">
+                    <label for="level4Filter">Level 4:</label>
+                    <select id="level4Filter" disabled>
+                        <option value="">Select Level 3 first</option>
+                    </select>
+                </div>
+                <div class="form-group">
+                    <button class="clear-filters" onclick="clearAllFilters()">Clear All</button>
+                </div>
+            </div>
+        </div>
+        <div class="stats">
+            <span id="taskCount">Loading...</span>
+        </div>
+        <div class="table-container">
+            <table id="leaderboard">
+                <thead id="tableHead">
+                    <!-- Headers will be populated dynamically -->
+                </thead>
+                <tbody id="tableBody">
+                </tbody>
+            </table>
+        </div>
+    </div>
+    <script>
+        // Menu functionality
+        const menuIcon = document.getElementById('menuIcon');
+        const menuList = document.getElementById('menuList');
+        menuIcon.addEventListener('click', (e) => {
+            e.stopPropagation();
+            menuList.classList.toggle('show');
+        });
+        // Close menu if clicked outside
+        document.addEventListener('click', (e) => {
+            if (!menuIcon.contains(e.target) && !menuList.contains(e.target)) {
+                menuList.classList.remove('show');
+            }
+        });
+        // Utility functions
+        function cleanTaxonomy(tax) {
+            return tax.trim().replace(/^"|"$/g, '');
+        }
+        function parseCSVLine(line) {
+            const result = [];
+            let current = '';
+            let inQuotes = false;
+            for (let i = 0; i < line.length; i++) {
+                const char = line[i];
+                if (char === '"') {
+                    inQuotes = !inQuotes;
+                } else if (char === ',' && !inQuotes) {
+                    result.push(current.trim());
+                    current = '';
+                } else {
+                    current += char;
+                }
+            }
+            result.push(current.trim());
+            return result;
+        }
+        function parseTaxonomyPath(taxonomyPath) {
+            const cleaned = cleanTaxonomy(taxonomyPath);
+            const parts = cleaned.split('/').map(part => part.trim());
+            return {
+                level1: parts[0] || '',
+                level2: parts[1] || '',
+                level3: parts[2] || '',
+                level4: parts[3] || '',
+                fullPath: cleaned,
+                levels: parts.length
+            };
+        }
+        function parseScore(scoreStr) {
+            if (!scoreStr || scoreStr === '-' || scoreStr === '') return null;
+            const cleaned = scoreStr.replace(/[%$,]/g, '');
+            const parsed = parseFloat(cleaned);
+            return isNaN(parsed) ? null : parsed;
+        }
+        function clearAllFilters() {
+            document.getElementById('level1Filter').value = '';
+            document.getElementById('level2Filter').value = '';
+            document.getElementById('level3Filter').value = '';
+            document.getElementById('level4Filter').value = '';
+            document.getElementById('level2Filter').disabled = true;
+            document.getElementById('level3Filter').disabled = true;
+            document.getElementById('level4Filter').disabled = true;
+            document.getElementById('level2Filter').innerHTML = '<option value="">Select Level 1 first</option>';
+            document.getElementById('level3Filter').innerHTML = '<option value="">Select Level 2 first</option>';
+            document.getElementById('level4Filter').innerHTML = '<option value="">Select Level 3 first</option>';
+            // FIXED: Reset the internal filter state
+            if (leaderboard) {
+                leaderboard.currentFilters = { level1: '', level2: '', level3: '', level4: '' };
+            }
+            const headers = document.querySelectorAll('[data-taxonomy]');
+            headers.forEach(header => header.style.display = '');
+            const cells = document.querySelectorAll('td[data-taxonomy]');
+            cells.forEach(cell => cell.style.display = '');
+            // FIXED: Re-render table body to ensure consistency
+            if (leaderboard) {
+                leaderboard.renderTableBody();
+                leaderboard.updateStats();
+            }
+        }
+        class SortableDynamicSUPERBLeaderboard {
+            constructor() {
+                this.data = [];
+                this.models = [];
+                this.tasks = {};
+                this.taskMetrics = {};
+                this.higherBetterMap = {};
+                this.currentSort = { taskName: null, metric: null, direction: 'desc' };
+                this.currentFilters = { level1: '', level2: '', level3: '', level4: '' };
+                this.taxonomyHierarchy = {
+                    level1: new Set(),
+                    level2: new Map(),
+                    level3: new Map(),
+                    level4: new Map()
+                };
+                this.init();
+            }
+            async init() {
+                try {
+                    await this.loadData();
+                    this.processData();
+                    this.buildTaxonomyHierarchy();
+                    this.buildTransposedTable();
+                    this.setupFilters();
+                    this.setupSorting();
+                } catch (error) {
+                    console.error('Error initializing leaderboard:', error);
+                    document.getElementById('tableBody').innerHTML = '<tr><td colspan="100%">Error loading data. Please check the CSV file.</td></tr>';
+                }
+            }
+            async loadData() {
+                const response = await fetch('data.csv');
+                const csvText = await response.text();
+                const lines = csvText.trim().split('\n');
+                const headers = parseCSVLine(lines[0]);
+                // Find HigherBetter and Taxonomy column indices
+                const higherBetterIndex = headers.findIndex(h => h.trim().toLowerCase() === 'higherbetter');
+                const taxonomyIndex = headers.findIndex(h => h.trim().toLowerCase() === 'taxonomy');
+                if (higherBetterIndex === -1) {
+                    console.error('HigherBetter column not found');
+                    return;
+                }
+                // Models are between HigherBetter and Taxonomy
+                const startIndex = higherBetterIndex + 1;
+                const endIndex = taxonomyIndex !== -1 ? taxonomyIndex : headers.length - 1;
+                this.models = headers.slice(startIndex, endIndex);
+                for (let i = 1; i < lines.length; i++) {
+                    const row = parseCSVLine(lines[i]);
+                    if (row.length < headers.length) continue;
+                    const taskName = row[0];
+                    const metric = row[1];
+                    const taxonomy = cleanTaxonomy(row[row.length - 1]);
+                    if (metric === 'X') continue;
+                    const scores = {};
+                    for (let j = 0; j < this.models.length; j++) {
+                        scores[this.models[j]] = row[startIndex + j];
+                    }
+                    // Parse HigherBetter as string
+                    const higherBetterValue = row[higherBetterIndex].trim().toUpperCase();
+                    const higherBetter = higherBetterValue === 'TRUE';
+                    const parsedTaxonomy = parseTaxonomyPath(taxonomy);
+                    this.data.push({
+                        taskName,
+                        metric,
+                        scores,
+                        taxonomy,
+                        parsedTaxonomy,
+                        higherBetter
+                    });
+                    this.higherBetterMap[`${taskName}|${metric}`] = higherBetter;
+                    if (!this.tasks[taskName]) {
+                        this.tasks[taskName] = {
+                            taxonomy,
+                            parsedTaxonomy,
+                            metrics: []
+                        };
+                        this.taskMetrics[taskName] = [];
+                    }
+                    this.tasks[taskName].metrics.push({ metric, scores, higherBetter });
+                    this.taskMetrics[taskName].push(metric);
+                }
+            }
+            processData() {
+                Object.values(this.tasks).forEach(task => {
+                    task.metrics.sort((a, b) => {
+                        if (a.metric.includes('NAR')) return -1;
+                        if (b.metric.includes('NAR')) return 1;
+                        return a.metric.localeCompare(b.metric);
+                    });
+                });
+                Object.keys(this.taskMetrics).forEach(taskName => {
+                    this.taskMetrics[taskName].sort((a, b) => {
+                        if (a.includes('NAR')) return -1;
+                        if (b.includes('NAR')) return 1;
+                        return a.localeCompare(b);
+                    });
+                });
+            }
+            buildTaxonomyHierarchy() {
+                Object.values(this.tasks).forEach(task => {
+                    const parsed = task.parsedTaxonomy;
+                    if (parsed.level1) {
+                        this.taxonomyHierarchy.level1.add(parsed.level1);
+                        if (parsed.level2) {
+                            if (!this.taxonomyHierarchy.level2.has(parsed.level1)) {
+                                this.taxonomyHierarchy.level2.set(parsed.level1, new Set());
+                            }
+                            this.taxonomyHierarchy.level2.get(parsed.level1).add(parsed.level2);
+                            if (parsed.level3) {
+                                const key3 = parsed.level1 + '/' + parsed.level2;
+                                if (!this.taxonomyHierarchy.level3.has(key3)) {
+                                    this.taxonomyHierarchy.level3.set(key3, new Set());
+                                }
+                                this.taxonomyHierarchy.level3.get(key3).add(parsed.level3);
+                                if (parsed.level4) {
+                                    const key4 = key3 + '/' + parsed.level3;
+                                    if (!this.taxonomyHierarchy.level4.has(key4)) {
+                                        this.taxonomyHierarchy.level4.set(key4, new Set());
+                                    }
+                                    this.taxonomyHierarchy.level4.get(key4).add(parsed.level4);
+                                }
+                            }
+                        }
+                    }
+                });
+            }
+            // Check if a task should be visible based on current filters
+            isTaskVisible(taskData) {
+                const { level1, level2, level3, level4 } = this.currentFilters;
+                const parsed = taskData.parsedTaxonomy;
+                if (level1 && parsed.level1 !== level1) return false;
+                if (level2 && parsed.level2 !== level2) return false;
+                if (level3 && parsed.level3 !== level3) return false;
+                if (level4 && parsed.level4 !== level4) return false;
+                return true;
+            }
+            buildTransposedTable() {
+                const thead = document.getElementById('tableHead');
+                let taskHeaderHTML = '<th rowspan="2">Model</th>';
+                let metricHeaderHTML = '';
+                Object.entries(this.tasks).forEach(([taskName, taskData]) => {
+                    const taxonomyAttrs = this.buildTaxonomyDataAttributes(taskData.parsedTaxonomy);
+                    const metrics = this.taskMetrics[taskName];
+                    const hasNAR = metrics.some(m => m.includes('NAR'));
+                    taskHeaderHTML += `
+                        <th class="task-header" colspan="${metrics.length}" ${taxonomyAttrs}>
+                            <span class="task-name">${taskName}</span>
+                            <span class="metric-indicator ${hasNAR ? 'nar-indicator' : ''}">
+                                ${metrics.length} metrics${hasNAR ? ' (NAR)' : ''}
+                            </span>
+                        </th>
+                    `;
+                    metrics.forEach(metric => {
+                        const metricClass = metric.includes('NAR') ? 'nar-metric' : '';
+                        const higherBetter = this.higherBetterMap[`${taskName}|${metric}`];
+                        const sortIndicator = higherBetter ? '↑' : '↓';
+                        metricHeaderHTML += `
+                            <th class="metric-header ${metricClass}"
+                                data-task="${taskName}"
+                                data-metric="${metric}"
+                                ${taxonomyAttrs}>
+                                ${metric}
+                                <span class="sort-indicator">${sortIndicator}</span>
+                                <span class="sort-arrow" id="arrow-${taskName}-${metric}"></span>
+                            </th>
+                        `;
+                    });
+                });
+                thead.innerHTML = `
+                    <tr>${taskHeaderHTML}</tr>
+                    <tr>${metricHeaderHTML}</tr>
+                `;
+                this.renderTableBody();
+                this.updateStats();
+            }
+            renderTableBody() {
+                const tbody = document.getElementById('tableBody');
+                let sortedModels = [...this.models];
+                if (this.currentSort.taskName && this.currentSort.metric) {
+                    sortedModels = this.sortModels(this.currentSort.taskName, this.currentSort.metric, this.currentSort.direction);
+                }
+                let tableHTML = '';
+                sortedModels.forEach(modelName => {
+                    tableHTML += `<tr><td>${modelName}</td>`;
+                    Object.entries(this.tasks).forEach(([taskName, taskData]) => {
+                        const taxonomyAttrs = this.buildTaxonomyDataAttributes(taskData.parsedTaxonomy);
+                        const metrics = this.taskMetrics[taskName];
+                        metrics.forEach(metric => {
+                            const metricData = taskData.metrics.find(m => m.metric === metric);
+                            let score = '-';
+                            let cellClass = 'na';
+                            if (metricData) {
+                                score = metricData.scores[modelName];
+                                cellClass = this.getScoreClass(score);
+                            }
+                            // Apply the same visibility logic as the headers
+                            const isVisible = this.isTaskVisible(taskData);
+                            const displayStyle = isVisible ? '' : 'none';
+                            tableHTML += `
+                                <td class="score ${cellClass}" ${taxonomyAttrs} style="display: ${displayStyle};">
+                                    ${this.formatScore(score)}
+                                </td>
+                            `;
+                        });
+                    });
+                    tableHTML += '</tr>';
+                });
+                tbody.innerHTML = tableHTML;
+            }
+            sortModels(taskName, metric, direction) {
+                const taskData = this.tasks[taskName];
+                const metricData = taskData.metrics.find(m => m.metric === metric);
+                if (!metricData) return [...this.models];
+                const higherBetter = this.higherBetterMap[`${taskName}|${metric}`];
+                return [...this.models].sort((modelA, modelB) => {
+                    const scoreA = parseScore(metricData.scores[modelA]);
+                    const scoreB = parseScore(metricData.scores[modelB]);
+                    if (scoreA === null && scoreB === null) return 0;
+                    if (scoreA === null) return 1;
+                    if (scoreB === null) return -1;
+                    let comparison = scoreA - scoreB;
+                    // Adjust for higherBetter preference
+                    if (!higherBetter) {
+                        comparison = -comparison;
+                    }
+                    // Apply sort direction
+                    if (direction === 'asc') {
+                        comparison = -comparison;
+                    }
+                    return comparison;
+                });
+            }
+            setupSorting() {
+                document.addEventListener('click', (e) => {
+                    if (e.target.classList.contains('metric-header') || e.target.closest('.metric-header')) {
+                        const header = e.target.classList.contains('metric-header') ? e.target : e.target.closest('.metric-header');
+                        const taskName = header.dataset.task;
+                        const metric = header.dataset.metric;
+                        if (!taskName || !metric) return;
+                        // Toggle sort direction if clicking the same column
+                        let direction = 'desc';
+                        if (this.currentSort.taskName === taskName && this.currentSort.metric === metric) {
+                            direction = this.currentSort.direction === 'desc' ? 'asc' : 'desc';
+                        }
+                        this.currentSort = { taskName, metric, direction };
+                        // Update visual indicators
+                        document.querySelectorAll('.metric-header').forEach(h => {
+                            h.classList.remove('sorted');
+                        });
+                        document.querySelectorAll('.sort-arrow').forEach(arrow => {
+                            arrow.textContent = '';
+                        });
+                        header.classList.add('sorted');
+                        const arrowElement = document.getElementById(`arrow-${taskName}-${metric}`);
+                        if (arrowElement) {
+                            arrowElement.textContent = direction === 'desc' ? '▼' : '▲';
+                        }
+                        this.renderTableBody();
+                    }
+                });
+            }
+            buildTaxonomyDataAttributes(parsed) {
+                return `
+                    data-taxonomy="${parsed.fullPath}"
+                    data-level1="${parsed.level1}"
+                    data-level2="${parsed.level2}"
+                    data-level3="${parsed.level3}"
+                    data-level4="${parsed.level4}"
+                `;
+            }
+            getScoreClass(score) {
+                if (!score || score === '-' || score === '') return 'na';
+                return '';
+            }
+            formatScore(score) {
+                if (!score || score === '-' || score === '') return '-';
+                return score;
+            }
+            setupFilters() {
+                const level1Filter = document.getElementById('level1Filter');
+                const level2Filter = document.getElementById('level2Filter');
+                const level3Filter = document.getElementById('level3Filter');
+                const level4Filter = document.getElementById('level4Filter');
+                const sortedLevel1 = Array.from(this.taxonomyHierarchy.level1).sort();
+                sortedLevel1.forEach(item => {
+                    const option = document.createElement('option');
+                    option.value = item;
+                    option.textContent = item;
+                    level1Filter.appendChild(option);
+                });
+                level1Filter.addEventListener('change', (e) => {
+                    const selected = e.target.value;
+                    this.currentFilters.level1 = selected;
+                    level2Filter.innerHTML = '<option value="">All Sub-categories</option>';
+                    level3Filter.innerHTML = '<option value="">Select Level 2 first</option>';
+                    level4Filter.innerHTML = '<option value="">Select Level 3 first</option>';
+                    level2Filter.disabled = !selected;
+                    level3Filter.disabled = true;
+                    level4Filter.disabled = true;
+                    level2Filter.value = '';
+                    level3Filter.value = '';
+                    level4Filter.value = '';
+                    this.currentFilters.level2 = '';
+                    this.currentFilters.level3 = '';
+                    this.currentFilters.level4 = '';
+                    if (selected && this.taxonomyHierarchy.level2.has(selected)) {
+                        const level2Options = Array.from(this.taxonomyHierarchy.level2.get(selected)).sort();
+                        level2Options.forEach(item => {
+                            const option = document.createElement('option');
+                            option.value = item;
+                            option.textContent = item;
+                            level2Filter.appendChild(option);
+                        });
+                    }
+                    this.applyFilters();
+                });
+                level2Filter.addEventListener('change', (e) => {
+                    const level1Value = level1Filter.value;
+                    const level2Value = e.target.value;
+                    this.currentFilters.level2 = level2Value;
+                    level3Filter.innerHTML = '<option value="">All Sub-categories</option>';
+                    level4Filter.innerHTML = '<option value="">Select Level 3 first</option>';
+                    level3Filter.disabled = !level2Value;
+                    level4Filter.disabled = true;
+                    level3Filter.value = '';
+                    level4Filter.value = '';
+                    this.currentFilters.level3 = '';
+                    this.currentFilters.level4 = '';
+                    if (level1Value && level2Value) {
+                        const level2Key = `${level1Value}/${level2Value}`;
+                        if (this.taxonomyHierarchy.level3.has(level2Key)) {
+                            const level3Options = Array.from(this.taxonomyHierarchy.level3.get(level2Key)).sort();
+                            level3Options.forEach(item => {
+                                const option = document.createElement('option');
+                                option.value = item;
+                                option.textContent = item;
+                                level3Filter.appendChild(option);
+                            });
+                        }
+                    }
+                    this.applyFilters();
+                });
+                level3Filter.addEventListener('change', (e) => {
+                    const level1Value = level1Filter.value;
+                    const level2Value = level2Filter.value;
+                    const level3Value = e.target.value;
+                    this.currentFilters.level3 = level3Value;
+                    level4Filter.innerHTML = '<option value="">All Sub-categories</option>';
+                    level4Filter.disabled = !level3Value;
+                    level4Filter.value = '';
+                    this.currentFilters.level4 = '';
+                    if (level1Value && level2Value && level3Value) {
+                        const level3Key = `${level1Value}/${level2Value}/${level3Value}`;
+                        if (this.taxonomyHierarchy.level4.has(level3Key)) {
+                            const level4Options = Array.from(this.taxonomyHierarchy.level4.get(level3Key)).sort();
+                            level4Options.forEach(item => {
+                                const option = document.createElement('option');
+                                option.value = item;
+                                option.textContent = item;
+                                level4Filter.appendChild(option);
+                            });
+                        }
+                    }
+                    this.applyFilters();
+                });
+                level4Filter.addEventListener('change', (e) => {
+                    this.currentFilters.level4 = e.target.value;
+                    this.applyFilters();
+                });
+            }
+            applyFilters() {
+                const level1Value = document.getElementById('level1Filter').value;
+                const level2Value = document.getElementById('level2Filter').value;
+                const level3Value = document.getElementById('level3Filter').value;
+                const level4Value = document.getElementById('level4Filter').value;
+                // Update current filters
+                this.currentFilters = { level1: level1Value, level2: level2Value, level3: level3Value, level4: level4Value };
+                const taskHeaders = document.querySelectorAll('.task-header[data-taxonomy]');
+                const metricHeaders = document.querySelectorAll('.metric-header[data-taxonomy]');
+                let visibleTasks = 0;
+                taskHeaders.forEach((header, index) => {
+                    const headerLevel1 = header.dataset.level1;
+                    const headerLevel2 = header.dataset.level2;
+                    const headerLevel3 = header.dataset.level3;
+                    const headerLevel4 = header.dataset.level4;
+                    let show = true;
+                    if (level1Value && headerLevel1 !== level1Value) show = false;
+                    if (level2Value && headerLevel2 !== level2Value) show = false;
+                    if (level3Value && headerLevel3 !== level3Value) show = false;
+                    if (level4Value && headerLevel4 !== level4Value) show = false;
+                    header.style.display = show ? '' : 'none';
+                    if (show) visibleTasks++;
+                });
+                metricHeaders.forEach((header, index) => {
+                    const headerLevel1 = header.dataset.level1;
+                    const headerLevel2 = header.dataset.level2;
+                    const headerLevel3 = header.dataset.level3;
+                    const headerLevel4 = header.dataset.level4;
+                    let show = true;
+                    if (level1Value && headerLevel1 !== level1Value) show = false;
+                    if (level2Value && headerLevel2 !== level2Value) show = false;
+                    if (level3Value && headerLevel3 !== level3Value) show = false;
+                    if (level4Value && headerLevel4 !== level4Value) show = false;
+                    header.style.display = show ? '' : 'none';
+                    const columnIndex = index + 2;
+                    const cells = document.querySelectorAll(`td:nth-child(${columnIndex})`);
+                    cells.forEach(cell => {
+                        cell.style.display = show ? '' : 'none';
+                    });
+                });
+                // Re-render table body to respect filter state in data cells
+                this.renderTableBody();
+                this.updateStats(visibleTasks);
+            }
+            updateStats(visibleTasks = null) {
+                const totalTasks = Object.keys(this.tasks).length;
+                const totalMetrics = this.data.length;
+                const visible = visibleTasks !== null ? visibleTasks : totalTasks;
+                document.getElementById('taskCount').textContent =
+                    `Showing ${visible} of ${totalTasks} tasks (${totalMetrics} total metrics) across ${this.models.length} models`;
+            }
+        }
+        let leaderboard;
+        document.addEventListener('DOMContentLoaded', () => {
+            leaderboard = new SortableDynamicSUPERBLeaderboard();
+        });
+    </script>
+</body>
 </html>