Spaces:

Fancy-yousa
/

FeatureSelect-Methods-Leaderboard

Sleeping

File size: 38,004 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AutoFS Leaderboard</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        :root {
            --primary-color: #3498db;
            --secondary-color: #2c3e50;
            --background-color: #f8f9fa;
            --text-color: #333;
            --border-color: #dee2e6;
            --hover-color: #f1f1f1;
            --accent-color: #e67e22;
            --sidebar-width: 280px;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
            background-color: var(--background-color);
            color: var(--text-color);
            display: flex;
            min-height: 100vh;
        }

        /* Sidebar Styling */
        .sidebar {
            width: var(--sidebar-width);
            background-color: var(--secondary-color);
            color: white;
            position: fixed;
            height: 100vh;
            overflow-y: auto;
            padding: 20px;
            box-sizing: border-box;
            left: 0;
            top: 0;
            z-index: 100;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .sidebar h2 {
            font-size: 1.2em;
            margin-bottom: 10px;
            color: #ecf0f1;
            border-bottom: 1px solid #34495e;
            padding-bottom: 5px;
        }

        /* Stats Cards */
        .stats-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 10px;
        }

        .stat-card {
            background: rgba(255,255,255,0.1);
            padding: 10px;
            border-radius: 6px;
            text-align: center;
        }

        .stat-value {
            font-size: 1.2em;
            font-weight: bold;
            color: var(--accent-color);
        }

        .stat-label {
            font-size: 0.8em;
            color: #bdc3c7;
        }

        /* Navigation */
        .nav-links {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .nav-links li a {
            display: block;
            padding: 10px;
            color: #bdc3c7;
            text-decoration: none;
            border-radius: 4px;
            transition: background 0.2s;
        }

        .nav-links li a:hover {
            background: rgba(255,255,255,0.1);
            color: white;
        }

        /* Sidebar Filters */
        .sidebar-filters label {
            display: block;
            margin-bottom: 5px;
            font-size: 0.9em;
            color: #bdc3c7;
        }

        .sidebar-input {
            width: 100%;
            margin-bottom: 15px;
            padding: 5px;
            box-sizing: border-box;
            background: rgba(255,255,255,0.9);
            border: none;
            border-radius: 4px;
        }
        
        input[type="range"] {
            width: 100%;
        }

        .checkbox-group {
            max-height: 150px;
            overflow-y: auto;
            background: rgba(0,0,0,0.2);
            padding: 5px;
            border-radius: 4px;
        }

        .checkbox-item {
            display: flex;
            align-items: center;
            gap: 5px;
            margin-bottom: 3px;
            font-size: 0.85em;
        }

        /* Main Content Styling */
        .main-content {
            margin-left: var(--sidebar-width);
            flex: 1;
            padding: 40px;
            max-width: calc(100% - var(--sidebar-width));
            box-sizing: border-box;
            min-width: 0; /* Prevent flex item from overflowing */
        }

        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            border-bottom: 2px solid var(--primary-color);
            padding-bottom: 10px;
        }

        .subtitle {
            font-size: 0.9em;
            color: #7f8c8d;
            margin-top: 5px;
        }

        /* Info Boxes */
        .info-section {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }

        .description-box, .metadata-box {
            flex: 1;
            background-color: white;
            border-left: 4px solid #3498db;
            padding: 15px;
            border-radius: 4px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }

        .metadata-box {
            border-left-color: #f1c40f;
        }

        /* Table */
        .table-container {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            overflow-x: auto;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid var(--border-color);
        }

        th {
            background-color: #f8f9fa;
            color: var(--secondary-color);
            cursor: pointer;
            user-select: none;
        }

        th:hover {
            background-color: #e9ecef;
        }
        
        tr:hover {
            background-color: var(--hover-color);
        }

        .algo-link {
            color: var(--primary-color);
            cursor: pointer;
            font-weight: bold;
        }
        .algo-link:hover { text-decoration: underline; }

        .features-cell {
            max-width: 200px;
            cursor: pointer;
        }
        .truncate-text {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: block;
        }
        .features-cell:hover .truncate-text { text-decoration: underline; color: var(--primary-color); }

        /* Charts */
        .charts-section {
            margin-top: 30px;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .chart-container {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            position: relative;
            height: 60vh;
            min-height: 400px;
            max-height: 700px;
            width: 100%;
            box-sizing: border-box; /* Fix overflow */
        }
        
        canvas {
            width: 100% !important;
            height: 100% !important;
        }

        /* Modal */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
        }

        .modal-content {
            background-color: white;
            margin: 10% auto;
            padding: 20px;
            border-radius: 8px;
            width: 50%;
            max-width: 600px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }

        .close { float: right; font-size: 28px; cursor: pointer; }
        .feature-tag {
            display: inline-block;
            background-color: #e1ecf4;
            color: #2c3e50;
            padding: 4px 8px;
            border-radius: 4px;
            margin: 2px;
            font-size: 0.9em;
        }

        /* PDF Sidebar */
        .pdf-sidebar {
            position: fixed;
            top: 0;
            right: -50%;
            width: 50%;
            height: 100%;
            background: white;
            box-shadow: -2px 0 5px rgba(0,0,0,0.2);
            z-index: 2000;
            transition: right 0.3s ease-in-out;
            display: flex;
            flex-direction: column;
        }
        .pdf-sidebar.open { right: 0; }
        .sidebar-header {
            padding: 10px 20px;
            background: var(--primary-color);
            color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .sidebar-content { flex: 1; }
        .sidebar-content iframe { width: 100%; height: 100%; border: none; }
        
        .loading { text-align: center; padding: 20px; color: #666; }
    </style>
</head>
<body>

<!-- Sidebar Navigation & Filters -->
<aside class="sidebar">
    <div style="text-align: center; margin-bottom: 20px;">
        <h1 style="font-size: 1.5em; margin: 0; color: white;">AutoFS</h1>
        <div style="font-size: 0.8em; color: #bdc3c7;">Feature Selection Leaderboard</div>
    </div>

    <!-- Stats -->
    <div class="stats-grid">
        <div class="stat-card">
            <div class="stat-value" id="stat-count">-</div>
            <div class="stat-label">Methods</div>
        </div>
        <div class="stat-card">
            <div class="stat-value" id="stat-best">-</div>
            <div class="stat-label">Best F1</div>
        </div>
        <div class="stat-card">
            <div class="stat-value" id="stat-updated">-</div>
            <div class="stat-label">Updated</div>
        </div>
    </div>

    <!-- Navigation -->
    <div>
        <h2>Navigation</h2>
        <ul class="nav-links">
            <li><a href="#overview">📊 Overview</a></li>
            <li><a href="#main-table">🏆 Leaderboard</a></li>
            <li><a href="/#charts">📈 Charts</a></li>
            <li><a href="#details">ℹ️ Details</a></li>
            <li><a href="/global">🌍 Global Rankings</a></li>
            <li><a href="/submit">📤 Submit Data/Method</a></li>
        </ul>
    </div>

    <!-- Filters -->
    <div class="sidebar-filters">
        <h2>Filters</h2>
        
        <label>Dataset:</label>
        <select id="dataset-select" class="sidebar-input">
            <option value="" disabled selected>Loading...</option>
        </select>

        <label>Min F1 Score: <span id="val-f1" style="color:var(--accent-color)">0.0000</span></label>
        <input type="range" id="filter-f1" min="0" max="1" step="0.0001" value="0">

        <label>Del. Rate: <span id="val-del-rate" style="color:var(--accent-color)">0% - 100%</span></label>
        <div style="display: flex; gap: 5px;">
            <input type="range" id="filter-del-min" min="0" max="100" value="0" style="width: 50%;">
            <input type="range" id="filter-del-max" min="0" max="100" value="100" style="width: 50%;">
        </div>

        <label>Max Features: <span id="val-feats" style="color:var(--accent-color)">All</span></label>
        <input type="range" id="filter-feats" min="1" max="100" step="1" value="100">

        <label>Complexity:</label>
        <select id="filter-complexity" class="sidebar-input" onchange="applyFilters()">
            <option value="all">All Complexities</option>
            <!-- Populated via JS -->
        </select>

        <label>Algorithms:</label>
        <div id="algo-checkboxes" class="checkbox-group">
            <!-- Populated via JS -->
        </div>
    </div>
</aside>

<!-- Main Content -->
<main class="main-content">
    <header>
        <div>
            <h1 style="color: var(--secondary-color); margin: 0;">🏆 Leaderboard Dashboard</h1>
            <div class="subtitle">Comprehensive benchmark of feature selection algorithms across diverse datasets.</div>
        </div>
    </header>

    <div class="intro-text" style="background: white; padding: 20px; margin-bottom: 20px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); color: #555; line-height: 1.6; font-size: 0.95em;">
        <p style="margin-top:0">Feature selection is a critical step in machine learning and data analysis, aimed at <strong>identifying the most relevant subset of features</strong> from a high-dimensional dataset. By eliminating irrelevant or redundant features, feature selection not only <strong>improves model interpretability</strong> but also <strong>enhances predictive performance</strong> and <strong>reduces computational cost</strong>.</p>
        <p>This leaderboard presents a comprehensive comparison of various feature selection algorithms across multiple benchmark datasets. It includes several <strong>information-theoretic and mutual information-based methods</strong>, which quantify the statistical dependency between features and the target variable to rank feature relevance. Mutual information approaches are particularly effective in <strong>capturing both linear and non-linear relationships</strong>, making them suitable for complex datasets where classical correlation-based methods may fail.</p>
        <p>The leaderboard is structured to reflect algorithm performance across different datasets, allowing for an objective assessment of each method’s ability to select informative features. For each method and dataset combination, metrics such as <strong>classification accuracy, F1-score, and area under the ROC curve (AUC)</strong> are reported, providing insights into how the selected features contribute to predictive modeling.</p>
        <p style="margin-bottom:0">By examining this feature selection leaderboard, researchers and practitioners can gain a better understanding of which methods perform consistently well across diverse domains, helping to guide the choice of feature selection strategies in real-world applications. This serves as a valuable resource for both benchmarking and method development in the field of feature selection.</p>
    </div>

    <div id="overview" class="info-section">
        <div class="description-box">
            <h3>About This Dataset</h3>
            <p>
                Analyzing performance on <strong><span id="desc-dataset-name">Selected</span></strong>.
                Compare F1 scores, AUC stability, and computational efficiency to find the optimal method for your data.
            </p>
        </div>
        <div class="metadata-box">
            <h3>Dataset Metadata</h3>
            <p><strong>Name:</strong> <span id="meta-name">-</span></p>
            <p><strong>Samples:</strong> <span id="meta-samples">-</span> | <strong>Features:</strong> <span id="meta-features">-</span></p>
            <p><strong>Last Updated:</strong> <span id="meta-updated">-</span></p>
        </div>
    </div>

    <div id="main-table" style="margin-top: 30px;">
        <h3>📋 Detailed Rankings</h3>
        <div id="loading-indicator" class="loading" style="display: none;">Loading data...</div>
        <div class="table-container">
            <table id="result-table">
                <thead><!-- Headers generated dynamically --></thead>
                <tbody><!-- Data rows --></tbody>
            </table>
        </div>
    </div>

    <div id="charts" class="charts-section">
        <div class="chart-container">
            <h3>📊 Performance Comparison</h3>
            <div style="position: absolute; top: 15px; right: 20px; z-index: 10;">
                <select id="chart-view-mode" onchange="updateView()" style="padding: 5px;">
                    <option value="overall">Overall (Mean)</option>
                    <option value="classifiers-f1">F1 by Classifier</option>
                    <option value="classifiers-auc">AUC by Classifier</option>
                </select>
            </div>
            <canvas id="scoreChart"></canvas>
            <div id="score-debug" style="position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); color:red; display:none; background:rgba(255,255,255,0.9); padding:10px; border:1px solid red;"></div>
        </div>
        
        <div class="chart-container">
            <h3>📉 Pareto Frontier (Trade-off)</h3>
            <p style="font-size:0.9em; color:#666; margin-top:-10px;">X: Selected Features vs Y: F1 Score (Top-Left is better)</p>
            <canvas id="paretoChart"></canvas>
        </div>
    </div>

    
    <div id="details" style="margin-top: 50px; color: #999; text-align: center; border-top: 1px solid #eee; padding-top: 20px;">
        <p>AutoFS Benchmark Platform &copy; 2026</p>
    </div>
</main>

<!-- Modal -->
<div id="details-modal" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <h2 id="modal-title">Algorithm Details</h2>
        <div id="modal-body"></div>
    </div>
</div>

<!-- PDF Sidebar -->
<div id="pdf-sidebar" class="pdf-sidebar">
    <div class="sidebar-header">
        <h3 id="sidebar-title" style="margin:0; color:white;">Paper Preview</h3>
        <span class="close" onclick="closeSidebar()" style="color:white; opacity:0.8; font-size: 28px; cursor: pointer;">&times;</span>
    </div>
    <div class="sidebar-content">
        <iframe id="pdf-frame" src=""></iframe>
    </div>
</div>

<script>
    let currentResults = [];
    let filteredResults = [];
    let allDatasets = [];
    let algoComplexityMap = {};
    let sortDirection = 1; 
    let lastSortKey = '';

    // Elements
    const datasetSelect = document.getElementById("dataset-select");
    const loadingIndicator = document.getElementById("loading-indicator");
    const tableHead = document.querySelector("#result-table thead");
    const tableBody = document.querySelector("#result-table tbody");
    
    // Filter Elements
    const filterF1 = document.getElementById('filter-f1');
    const filterFeats = document.getElementById('filter-feats');
    const filterDelMin = document.getElementById('filter-del-min');
    const filterDelMax = document.getElementById('filter-del-max');
    const filterComplexity = document.getElementById('filter-complexity');
    const algoCheckboxes = document.getElementById('algo-checkboxes');
    
    // Display Values
    const valF1 = document.getElementById('val-f1');
    const valFeats = document.getElementById('val-feats');
    const valDelRate = document.getElementById('val-del-rate');

    // Stats Elements
    const statCount = document.getElementById('stat-count');
    const statBest = document.getElementById('stat-best');
    const statUpdated = document.getElementById('stat-updated');

    // Metadata Elements
    const metaName = document.getElementById('meta-name');
    const metaSamples = document.getElementById('meta-samples');
    const metaFeatures = document.getElementById('meta-features');
    const metaUpdated = document.getElementById('meta-updated');
    const descName = document.getElementById('desc-dataset-name');

    // Charts
    let scoreChartInstance = null;
    let paretoChartInstance = null;

    const VIEW_CONFIG = {
        'overall': [
            { key: 'mean_f1', label: 'Mean F1' },
            { key: 'mean_auc', label: 'Mean AUC' }
        ],
        'classifiers-f1': [
            { key: 'metrics.nb.f1', label: 'NB F1' },
            { key: 'metrics.svm.f1', label: 'SVM F1' },
            { key: 'metrics.rf.f1', label: 'RF F1' }
        ],
        'classifiers-auc': [
            { key: 'metrics.nb.auc', label: 'NB AUC' },
            { key: 'metrics.svm.auc', label: 'SVM AUC' },
            { key: 'metrics.rf.auc', label: 'RF AUC' }
        ]
    };

    // Modal Logic
    const modal = document.getElementById("details-modal");
    document.querySelector(".close").onclick = () => modal.style.display = "none";
    window.onclick = (e) => { if (e.target == modal) modal.style.display = "none"; };

    // Initialization
    document.addEventListener("DOMContentLoaded", () => {
        fetchAlgorithms();
        fetchDatasets();
    });

    function fetchAlgorithms() {
        fetch("/api/algos")
            .then(res => res.json())
            .then(data => {
                algoComplexityMap = data;
                // Populate Complexity Filter
                const complexities = new Set();
                Object.values(data).forEach(c => {
                    if (c.time) complexities.add(c.time); // Use time formula as key
                });
                complexities.forEach(c => {
                    const opt = document.createElement('option');
                    opt.value = c;
                    opt.textContent = c;
                    filterComplexity.appendChild(opt);
                });
            })
            .catch(console.error);
    }

    function fetchDatasets() {
        fetch("/api/datasets")
            .then(res => res.json())
            .then(data => {
                allDatasets = data;
                datasetSelect.innerHTML = "";
                data.forEach(ds => {
                    const opt = document.createElement("option");
                    opt.value = ds.name;
                    opt.textContent = ds.name;
                    datasetSelect.appendChild(opt);
                });
                if (data.length > 0) loadDataset(data[0].name);
            });
    }

    datasetSelect.addEventListener("change", (e) => loadDataset(e.target.value));

    function loadDataset(name) {
        loadingIndicator.style.display = "block";
        
        // Update Metadata
        const ds = allDatasets.find(d => d.name === name);
        if (ds) {
            metaName.textContent = ds.name;
            metaSamples.textContent = ds.num_samples || 'N/A';
            metaFeatures.textContent = ds.total_features || 'N/A';
            metaUpdated.textContent = ds.last_updated;
            descName.textContent = ds.name;
            statUpdated.textContent = ds.last_updated;
            
            // Update Max Features Slider
            if (ds.total_features && ds.total_features !== 'Unavailable') {
                filterFeats.max = ds.total_features;
                filterFeats.value = ds.total_features;
                valFeats.textContent = ds.total_features;
            } else {
                filterFeats.max = 100; // Default
                filterFeats.value = 100;
                valFeats.textContent = "100+";
            }
        }

        fetch(`/api/results?dataset=${name}`)
            .then(res => res.json())
            .then(data => {
                loadingIndicator.style.display = "none";
                currentResults = data;

                // Adjust Filter Ranges based on Data
                if (data.length > 0) {
                    const f1Scores = data.map(d => d.mean_f1 || 0);
                    
                    const minF1 = Math.min(...f1Scores);
                    const maxF1 = Math.max(...f1Scores);

                    // Set F1 Range (sensible defaults)
                    // Set min to a bit below the lowest score to maximize resolution
                    const safeMin = Math.max(0, Math.floor((Math.min(...f1Scores) - 0.1) * 10) / 10);
                    filterF1.min = safeMin;
                    filterF1.max = 1;
                    filterF1.value = safeMin;
                    valF1.textContent = safeMin.toFixed(4);
                }
                
                // Populate Algorithm Checkboxes
                const algos = [...new Set(data.map(r => r.algorithm))].sort();
                algoCheckboxes.innerHTML = `
                    <div class="checkbox-item">
                        <input type="checkbox" id="algo-all" checked onchange="toggleAllAlgos(this)">
                        <label for="algo-all" style="font-weight:bold">Select All</label>
                    </div>
                `;
                algos.forEach(algo => {
                    algoCheckboxes.innerHTML += `
                        <div class="checkbox-item">
                            <input type="checkbox" value="${algo}" checked class="algo-cb" onchange="applyFilters()">
                            <label>${algo}</label>
                        </div>
                    `;
                });

                applyFilters();
                renderTableHeader();
            })
            .catch(err => {
                console.error(err);
                loadingIndicator.style.display = "none";
            });
    }

    function toggleAllAlgos(source) {
        document.querySelectorAll('.algo-cb').forEach(cb => {
            cb.checked = source.checked;
        });
        applyFilters();
    }

    // Filter Logic
    [filterF1, filterFeats, filterDelMin, filterDelMax].forEach(el => el.addEventListener('input', applyFilters));

    function applyFilters() {
        const minF1 = parseFloat(filterF1.value);
        const maxFeats = parseFloat(filterFeats.value);
        const minDel = parseInt(filterDelMin.value) / 100;
        const maxDel = parseInt(filterDelMax.value) / 100;
        const selectedComplexity = filterComplexity.value;
        
        // Get checked algorithms
        const checkedAlgos = Array.from(document.querySelectorAll('.algo-cb:checked')).map(cb => cb.value);

        // Update UI Values
        valF1.textContent = minF1.toFixed(4);
        valFeats.textContent = maxFeats;
        valDelRate.textContent = `${(minDel*100).toFixed(0)}% - ${(maxDel*100).toFixed(0)}%`;

        filteredResults = currentResults.filter(r => {
            const f1 = r.mean_f1 || 0;
            const feats = r.num_features || (r.selected_features ? r.selected_features.length : 0);
            
            // Algo Filter
            if (!checkedAlgos.includes(r.algorithm)) return false;

            // Metric Filters
            if (f1 < minF1) return false;
            if (feats > maxFeats) return false;

            // Deletion Rate Check
            const ds = allDatasets.find(d => d.name === datasetSelect.value);
            let totalFeats = 0;
            if (ds && ds.total_features && ds.total_features !== 'Unavailable') {
                totalFeats = parseInt(ds.total_features);
            }
            
            if (totalFeats > 0) {
                const delRate = 1.0 - (feats / totalFeats);
                if (delRate < minDel || delRate > maxDel) return false;
            }

            // Complexity Filter
            if (selectedComplexity !== 'all') {
                const algoInfo = algoComplexityMap[r.algorithm];
                if (!algoInfo || algoInfo.time !== selectedComplexity) return false;
            }

            return true;
        });

        updateDashboard(filteredResults);
        renderTable(filteredResults);
        updateCharts(filteredResults);
    }

    function updateDashboard(results) {
        // Update Stats
        statCount.textContent = results.length;
        if (results.length > 0) {
            const best = results.reduce((prev, curr) => (prev.mean_f1 > curr.mean_f1) ? prev : curr, {mean_f1:0, algorithm:'-'});
            statBest.textContent = `${best.algorithm} (${Number(best.mean_f1).toFixed(3)})`;
        } else {
            statBest.textContent = "-";
        }
    }

    function renderTableHeader() {
        const viewMode = document.getElementById('chart-view-mode').value;
        const config = VIEW_CONFIG[viewMode];
        let html = `<tr>
            <th>Rank</th>
            <th onclick="sortTable('algorithm')">Algorithm <span class="arrow"></span></th>`;
        config.forEach(col => {
            html += `<th onclick="sortTable('${col.key}')">${col.label} <span class="arrow"></span></th>`;
        });
        html += `<th onclick="sortTable('selected_features')">Selected Features <span class="arrow"></span></th>
                 </tr>`;
        tableHead.innerHTML = html;
    }

    function renderTable(results) {
        tableBody.innerHTML = "";
        if (results.length === 0) {
            tableBody.innerHTML = '<tr><td colspan="10" style="text-align:center;">No results match filters</td></tr>';
            return;
        }

        const viewMode = document.getElementById('chart-view-mode').value;
        const config = VIEW_CONFIG[viewMode];
        const getVal = (obj, path) => path.split('.').reduce((acc, part) => acc && acc[part], obj);

        // Calculate Best Values (Max for Score, Min for Time/Feats)
        const bestValues = {};
        
        // Metrics (Max is best)
        config.forEach(col => {
            const values = results.map(r => Number(getVal(r, col.key) || 0));
            bestValues[col.key] = Math.max(...values);
        });

        // Features (Min is best)
        const featCounts = results.map(r => Array.isArray(r.selected_features) ? r.selected_features.length : Infinity);
        bestValues['features'] = Math.min(...featCounts);

        results.forEach((row, index) => {
            const tr = document.createElement("tr");
            let metricsHTML = '';
            
            config.forEach(col => {
                const rawVal = getVal(row, col.key);
                const val = (rawVal !== undefined && rawVal !== null) ? Number(rawVal) : 0;
                // Compare formatted values to avoid precision issues
                const isBest = val.toFixed(4) === bestValues[col.key].toFixed(4) && val > 0;
                const style = isBest ? 'font-weight:bold; color:var(--primary-color);' : '';
                metricsHTML += `<td style="${style}">${val.toFixed(4)}</td>`;
            });

            // Features
            const featText = Array.isArray(row.selected_features) ? row.selected_features.join(", ") : "N/A";
            const featCount = Array.isArray(row.selected_features) ? row.selected_features.length : 0;
            const isBestFeat = featCount === bestValues['features'];
            const featStyle = isBestFeat ? 'font-weight:bold; color:var(--primary-color);' : '';

            tr.innerHTML = `
                <td>${index + 1}</td>
                <td class="algo-link" onclick="openPdf('${row.algorithm}')">${row.algorithm || 'Unknown'}</td>
                ${metricsHTML}
                <td class="features-cell" onclick="showDetails(${index})" title="${featText}">
                    <div class="truncate-text" style="${featStyle}">${featText}</div>
                </td>
            `;
            tableBody.appendChild(tr);
        });
    }

    function showDetails(index) {
        const row = filteredResults[index];
        if (!row) return;
        
        const algo = row.algorithm;
        const features = Array.isArray(row.selected_features) ? row.selected_features.join(", ") : "";
        const metrics = row.metrics || {};

        document.getElementById("modal-title").innerText = `${algo} - Details`;
        const list = features.split(", ").map(f => `<span class="feature-tag">${f}</span>`).join(" ");
        
        // Build Classifier Table
        let classifierTable = `
            <table style="width:100%; margin-top:10px; border-collapse:collapse;">
                <thead>
                    <tr style="background:#f8f9fa;">
                        <th style="padding:8px; border:1px solid #dee2e6;">Classifier</th>
                        <th style="padding:8px; border:1px solid #dee2e6;">F1 Score</th>
                        <th style="padding:8px; border:1px solid #dee2e6;">AUC Score</th>
                    </tr>
                </thead>
                <tbody>
        `;
        
        ['nb', 'svm', 'rf'].forEach(clf => {
            const m = metrics[clf] || {};
            classifierTable += `
                <tr>
                    <td style="padding:8px; border:1px solid #dee2e6;">${clf.toUpperCase()}</td>
                    <td style="padding:8px; border:1px solid #dee2e6;">${m.f1 ? Number(m.f1).toFixed(4) : '-'}</td>
                    <td style="padding:8px; border:1px solid #dee2e6;">${m.auc ? Number(m.auc).toFixed(4) : '-'}</td>
                </tr>
            `;
        });
        classifierTable += `</tbody></table>`;

        document.getElementById("modal-body").innerHTML = `
            <p><strong>Selected Features (${features ? features.split(", ").length : 0}):</strong></p>
            <div style="line-height:1.6; max-height:200px; overflow-y:auto;">${list}</div>
            <hr>
            <p><strong>Classifier Performance:</strong></p>
            ${classifierTable}
            <hr>
            <p><strong>Complexity:</strong></p>
            <pre style="background:#f4f4f4; padding:10px; border-radius:4px;">${JSON.stringify(algoComplexityMap[algo] || 'Unknown', null, 2)}</pre>
        `;
        modal.style.display = "block";
    }

    function updateView() {
        renderTableHeader();
        renderTable(filteredResults);
        updateCharts(filteredResults);
    }

    function updateCharts(results) {
        const topResults = results.slice(0, 20);
        const labels = topResults.map(r => r.algorithm);
        const viewMode = document.getElementById('chart-view-mode').value;
        
        // Prepare datasets based on viewMode (same as before)
        let datasets = [];
        const debugEl = document.getElementById('score-debug');
        if (debugEl) debugEl.style.display = 'none';

        if (viewMode === 'overall') {
            const f1Data = topResults.map(r => r.mean_f1);
            const aucData = topResults.map(r => r.mean_auc);
            
            datasets = [
                {
                    label: 'Mean F1', 
                    data: f1Data,
                    backgroundColor: 'rgba(52, 152, 219, 0.7)'
                },
                {
                    label: 'Mean AUC', 
                    data: aucData,
                    backgroundColor: 'rgba(46, 204, 113, 0.7)'
                }
            ];

            // Debug Check for AUC
            // const validAuc = aucData.some(v => v > 0);
            // if (!validAuc && debugEl) {
            //     debugEl.innerHTML = "<strong>Warning:</strong> No AUC data found for these algorithms.<br>Check backend 'metrics.x.auc' or JSON source.";
            //     debugEl.style.display = 'block';
            // }

        } else if (viewMode === 'classifiers-f1') {
            datasets = ['nb', 'svm', 'rf'].map((clf, i) => ({
                label: clf.toUpperCase(),
                data: topResults.map(r => r.metrics?.[clf]?.f1),
                backgroundColor: `hsla(${200 + i*40}, 70%, 60%, 0.7)`
            }));
        } else if (viewMode === 'classifiers-auc') {
            datasets = ['nb', 'svm', 'rf'].map((clf, i) => {
                const data = topResults.map(r => r.metrics?.[clf]?.auc);
                // Check if data exists
                // if (data.every(v => !v)) {
                //      if (debugEl) {
                //         debugEl.innerHTML += `<br>Missing AUC for ${clf.toUpperCase()}`;
                //         debugEl.style.display = 'block';
                //      }
                // }
                return {
                    label: clf.toUpperCase(),
                    data: data,
                    backgroundColor: `hsla(${100 + i*40}, 70%, 60%, 0.7)`
                };
            });
        }

        // Score Chart
        if (scoreChartInstance) scoreChartInstance.destroy();
        scoreChartInstance = new Chart(document.getElementById('scoreChart'), {
            type: 'bar',
            data: { labels, datasets },
            options: { indexAxis: 'y', responsive: true, maintainAspectRatio: false }
        });

        // Pareto Chart
        if (paretoChartInstance) paretoChartInstance.destroy();
        const paretoData = results.map(r => ({
            x: r.num_features || (r.selected_features ? r.selected_features.length : 0),
            y: r.mean_f1,
            algorithm: r.algorithm
        }));
        paretoChartInstance = new Chart(document.getElementById('paretoChart'), {
            type: 'scatter',
            data: {
                datasets: [{
                    label: 'Algo',
                    data: paretoData,
                    backgroundColor: 'rgba(230, 126, 34, 0.7)'
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    x: { title: {display:true, text:'Num Features'} },
                    y: { title: {display:true, text:'Mean F1'} }
                },
                plugins: {
                    tooltip: {
                        callbacks: {
                            label: ctx => `${ctx.raw.algorithm}: F1=${ctx.raw.y.toFixed(4)}, Feats=${ctx.raw.x}`
                        }
                    }
                }
            }
        });
    }

    function sortTable(key) {
        if (lastSortKey === key) sortDirection *= -1;
        else { sortDirection = 1; lastSortKey = key; }
        
        const getVal = (obj, path) => path.split('.').reduce((acc, part) => acc && acc[part], obj);
        
        filteredResults.sort((a, b) => {
            let valA = getVal(a, key);
            let valB = getVal(b, key);
            if (key === 'selected_features') {
                valA = Array.isArray(valA) ? valA.length : 0;
                valB = Array.isArray(valB) ? valB.length : 0;
            }
            if (valA === undefined) valA = -Infinity;
            if (valB === undefined) valB = -Infinity;
            return (valA < valB ? -1 : 1) * sortDirection;
        });
        
        renderTable(filteredResults);
        document.querySelectorAll('th .arrow').forEach(span => span.textContent = '↕');
        const th = Array.from(document.querySelectorAll('th')).find(th => th.getAttribute('onclick').includes(`'${key}'`));
        if (th) th.querySelector('.arrow').textContent = sortDirection === 1 ? '↑' : '↓';
    }

    // PDF Sidebar
    function openPdf(algoName) {
        if (!algoName) return;
        const filename = algoName.toUpperCase() + ".pdf";
        document.getElementById('pdf-frame').src = `/pdfs/${filename}`;
        document.getElementById('pdf-sidebar').classList.add('open');
    }
    function closeSidebar() {
        document.getElementById('pdf-sidebar').classList.remove('open');
        setTimeout(() => document.getElementById('pdf-frame').src = "", 300);
    }
</script>

</body>
</html>