| | <!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 { |
| | 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-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; |
| | } |
| | |
| | |
| | .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 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 { |
| | margin-left: var(--sidebar-width); |
| | flex: 1; |
| | padding: 40px; |
| | max-width: calc(100% - var(--sidebar-width)); |
| | box-sizing: border-box; |
| | min-width: 0; |
| | } |
| | |
| | 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-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-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-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; |
| | } |
| | |
| | canvas { |
| | width: 100% !important; |
| | height: 100% !important; |
| | } |
| | |
| | |
| | .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 { |
| | 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> |
| |
|
| | |
| | <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> |
| |
|
| | |
| | <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> |
| |
|
| | |
| | <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> |
| |
|
| | |
| | <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> |
| | |
| | </select> |
| |
|
| | <label>Algorithms:</label> |
| | <div id="algo-checkboxes" class="checkbox-group"> |
| | |
| | </div> |
| | </div> |
| | </aside> |
| |
|
| | |
| | <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></thead> |
| | <tbody></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 © 2026</p> |
| | </div> |
| | </main> |
| |
|
| | |
| | <div id="details-modal" class="modal"> |
| | <div class="modal-content"> |
| | <span class="close">×</span> |
| | <h2 id="modal-title">Algorithm Details</h2> |
| | <div id="modal-body"></div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <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;">×</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 = ''; |
| | |
| | |
| | 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"); |
| | |
| | |
| | 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'); |
| | |
| | |
| | const valF1 = document.getElementById('val-f1'); |
| | const valFeats = document.getElementById('val-feats'); |
| | const valDelRate = document.getElementById('val-del-rate'); |
| | |
| | |
| | const statCount = document.getElementById('stat-count'); |
| | const statBest = document.getElementById('stat-best'); |
| | const statUpdated = document.getElementById('stat-updated'); |
| | |
| | |
| | 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'); |
| | |
| | |
| | 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' } |
| | ] |
| | }; |
| | |
| | |
| | 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"; }; |
| | |
| | |
| | document.addEventListener("DOMContentLoaded", () => { |
| | fetchAlgorithms(); |
| | fetchDatasets(); |
| | }); |
| | |
| | function fetchAlgorithms() { |
| | fetch("/api/algos") |
| | .then(res => res.json()) |
| | .then(data => { |
| | algoComplexityMap = data; |
| | |
| | const complexities = new Set(); |
| | Object.values(data).forEach(c => { |
| | if (c.time) complexities.add(c.time); |
| | }); |
| | 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"; |
| | |
| | |
| | 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; |
| | |
| | |
| | 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; |
| | filterFeats.value = 100; |
| | valFeats.textContent = "100+"; |
| | } |
| | } |
| | |
| | fetch(`/api/results?dataset=${name}`) |
| | .then(res => res.json()) |
| | .then(data => { |
| | loadingIndicator.style.display = "none"; |
| | currentResults = data; |
| | |
| | |
| | if (data.length > 0) { |
| | const f1Scores = data.map(d => d.mean_f1 || 0); |
| | |
| | const minF1 = Math.min(...f1Scores); |
| | const maxF1 = Math.max(...f1Scores); |
| | |
| | |
| | |
| | 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); |
| | } |
| | |
| | |
| | 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(); |
| | } |
| | |
| | |
| | [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; |
| | |
| | |
| | const checkedAlgos = Array.from(document.querySelectorAll('.algo-cb:checked')).map(cb => cb.value); |
| | |
| | |
| | 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); |
| | |
| | |
| | if (!checkedAlgos.includes(r.algorithm)) return false; |
| | |
| | |
| | if (f1 < minF1) return false; |
| | if (feats > maxFeats) return false; |
| | |
| | |
| | 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; |
| | } |
| | |
| | |
| | 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) { |
| | |
| | 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); |
| | |
| | |
| | const bestValues = {}; |
| | |
| | |
| | config.forEach(col => { |
| | const values = results.map(r => Number(getVal(r, col.key) || 0)); |
| | bestValues[col.key] = Math.max(...values); |
| | }); |
| | |
| | |
| | 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; |
| | |
| | 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>`; |
| | }); |
| | |
| | |
| | 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(" "); |
| | |
| | |
| | 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; |
| | |
| | |
| | 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)' |
| | } |
| | ]; |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | } 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); |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | return { |
| | label: clf.toUpperCase(), |
| | data: data, |
| | backgroundColor: `hsla(${100 + i*40}, 70%, 60%, 0.7)` |
| | }; |
| | }); |
| | } |
| | |
| | |
| | if (scoreChartInstance) scoreChartInstance.destroy(); |
| | scoreChartInstance = new Chart(document.getElementById('scoreChart'), { |
| | type: 'bar', |
| | data: { labels, datasets }, |
| | options: { indexAxis: 'y', responsive: true, maintainAspectRatio: false } |
| | }); |
| | |
| | |
| | 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 ? '↑' : '↓'; |
| | } |
| | |
| | |
| | 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> |
