Hugging Face's logo

Spaces:
Fancy-yousa
/
FeatureSelect-Methods-Leaderboard
Sleeping

App Files Community
FeatureSelect-Methods-Leaderboard / Webapp /templates /global.html
Fancy-yousa's picture
Fancy-yousa
Upload 12 files
3ac33b9 verified
raw
history blame contribute delete
15 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Global Leaderboard</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
:root {
--primary-color: #8e44ad; /* Purple for global view */
--secondary-color: #2c3e50;
--background-color: #f8f9fa;
--text-color: #333;
--border-color: #dee2e6;
--hover-color: #f1f1f1;
--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;
}
.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, .nav-links li a.active {
background: rgba(255,255,255,0.1);
color: white;
}
/* 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;
}
.container {
max-width: 1200px;
margin: 0 auto;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
border-bottom: 2px solid var(--primary-color);
padding-bottom: 10px;
}
h1 {
margin: 0;
color: var(--secondary-color);
}
.description-box {
background-color: #e8f4fd;
border-left: 4px solid #3498db;
padding: 15px;
margin-bottom: 20px;
border-radius: 4px;
}
.description-box h3 {
margin-top: 0;
color: #2980b9;
}
.description-box p {
margin: 5px 0;
line-height: 1.5;
}
.weights-control {
background-color: #f1f1f1;
padding: 15px;
border-radius: 8px;
margin-bottom: 20px;
border: 1px solid #ddd;
}
.weights-control h3 {
margin-top: 0;
margin-bottom: 15px;
font-size: 1.1em;
}
.sliders-container {
display: flex;
gap: 20px;
flex-wrap: wrap;
align-items: center;
}
.slider-group {
display: flex;
align-items: center;
gap: 10px;
}
.slider-group label {
font-weight: bold;
min-width: 60px;
}
input[type="number"] {
width: 80px;
padding: 5px;
border: 1px solid #ccc;
border-radius: 4px;
}
input[readonly] {
background-color: #e9ecef;
color: #666;
}
button.recalc-btn {
background-color: var(--primary-color);
color: white;
border: none;
padding: 8px 20px;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
margin-left: auto;
}
button.recalc-btn:hover {
opacity: 0.9;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
}
th, td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid var(--border-color);
}
th {
background-color: var(--secondary-color);
color: white;
cursor: pointer;
user-select: none;
position: sticky;
top: 0;
}
th:hover {
background-color: #34495e;
}
th .arrow {
font-size: 10px;
margin-left: 5px;
opacity: 0.7;
}
tr:hover {
background-color: var(--hover-color);
}
.score-bar {
height: 6px;
background-color: #e9ecef;
border-radius: 3px;
overflow: hidden;
margin-top: 5px;
}
.score-fill {
height: 100%;
background-color: var(--primary-color);
}
.version-tag {
font-size: 0.8em;
color: #7f8c8d;
margin-top: 5px;
}
</style>
</head>
<body>
<div 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>
<h2>Navigation</h2>
<ul class="nav-links">
<li><a href="/">πŸ“Š 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" class="active">🌍 Global Rankings</a></li>
<li><a href="/submit">πŸ“€ Submit Data/Method</a></li>
</ul>
</div>
<div style="margin-top: auto; padding-top: 20px; border-top: 1px solid #34495e;">
<p style="font-size: 0.8em; color: #bdc3c7; text-align: center;">
Need help?<br>
<a href="mailto:support@autofs.com" style="color: var(--primary-color);">Contact Support</a>
</p>
</div>
</div>
<div class="main-content">
<div class="container">
<header>
<div>
<h1>🌍 Global Algorithm Rankings</h1>
<div id="last-updated" class="version-tag">Data Last Updated: Loading...</div>
</div>
<!-- Removed redundant back link as sidebar handles navigation -->
</header>
<div class="description-box">
<h3>About Global Rankings</h3>
<p>
This page provides a comprehensive evaluation of feature selection algorithms across all available datasets.
Algorithms are ranked based on a weighted score combining <strong>Accuracy (F1)</strong>, <strong>Robustness (AUC)</strong>, and <strong>Efficiency (Time)</strong>.
You can adjust the importance of each factor below to customize the ranking criteria.
</p>
</div>
<div class="weights-control">
<h3>πŸ† Scoring Formula: S = Ξ±Β·F1 + Ξ²Β·AUC</h3>
<p style="font-size: 0.9em; color: #666; margin-bottom: 10px;">
Constraint: Ξ± + Ξ² = 1.
</p>
<div class="sliders-container">
<div class="slider-group">
<label for="weight-a">F1 (Ξ±):</label>
<input type="number" id="weight-a" value="0.5" step="0.05" min="0" max="1">
</div>
<div class="slider-group">
<label for="weight-b">AUC (Ξ²):</label>
<input type="number" id="weight-b" value="0.5" readonly title="Auto-calculated: 1 - Ξ±">
</div>
<button class="recalc-btn" onclick="calculateAndRender()">Recalculate Rankings</button>
</div>
</div>
<div id="loading-indicator" style="text-align: center; color: #666;">Loading global stats...</div>
<table id="global-table">
<thead>
<tr>
<th data-key="rank">#</th>
<th data-key="algorithm">Algorithm <span class="arrow">↕</span></th>
<th data-key="mean_f1_global">Global F1 <span class="arrow">↕</span></th>
<th data-key="mean_auc_global">Global AUC <span class="arrow">↕</span></th>
<th data-key="final_score">Final Score <span class="arrow">↕</span></th>
</tr>
</thead>
<tbody>
<!-- Data rows -->
</tbody>
</table>
</div>
</div>
<script>
let rawData = [];
let processedData = [];
let sortKey = 'final_score';
let sortDirection = -1; // Descending by default
const tableBody = document.querySelector("#global-table tbody");
const weightA = document.getElementById("weight-a");
const weightB = document.getElementById("weight-b");
const lastUpdatedDiv = document.getElementById("last-updated");
// Fetch datasets info to get latest date
function fetchLastUpdated() {
fetch("/api/datasets")
.then(res => res.json())
.then(data => {
if (data.length > 0) {
// Sort by date to find latest? Or just take one?
// Usually we want the overall latest date.
// Let's just pick the first one's date or find the max date if needed.
// For simplicity, just showing "Latest"
const dates = data.map(d => d.last_updated).filter(d => d !== 'Unknown').sort().reverse();
if (dates.length > 0) {
lastUpdatedDiv.textContent = `Data Last Updated: ${dates[0]}`;
} else {
lastUpdatedDiv.textContent = `Data Last Updated: Unknown`;
}
}
});
}
function fetchGlobalStats() {
fetch("/api/global_stats")
.then(res => res.json())
.then(data => {
rawData = data;
document.getElementById("loading-indicator").style.display = 'none';
calculateAndRender();
})
.catch(err => {
console.error("Error:", err);
document.getElementById("loading-indicator").textContent = "Error loading data.";
});
}
// Weight auto-adjustment logic
function updateWeights(changedInput) {
let a = parseFloat(weightA.value) || 0;
// Clamp inputs to 0-1
if (a < 0) a = 0; if (a > 1) a = 1;
if (changedInput === 'a') {
let b = 1 - a;
// Update UI
weightA.value = parseFloat(a.toFixed(2));
weightB.value = parseFloat(b.toFixed(2));
}
}
weightA.addEventListener('input', () => updateWeights('a'));
function calculateAndRender() {
const a = parseFloat(weightA.value) || 0;
const b = parseFloat(weightB.value) || 0;
// Process data
processedData = rawData.map(d => {
const score = (a * d.mean_f1_global) + (b * d.mean_auc_global);
return {
...d,
final_score: score
};
});
sortData();
renderTable();
}
function sortData() {
processedData.sort((x, y) => {
const valX = x[sortKey];
const valY = y[sortKey];
if (valX < valY) return -1 * sortDirection;
if (valX > valY) return 1 * sortDirection;
return 0;
});
}
function safeFixed(val, digits=4) {
if (val === undefined || val === null) return 'N/A';
return Number(val).toFixed(digits);
}
function renderTable() {
tableBody.innerHTML = "";
if (processedData.length === 0) {
tableBody.innerHTML = '<tr><td colspan="5" style="text-align:center;">No data available</td></tr>';
return;
}
processedData.forEach((row, index) => {
const tr = document.createElement("tr");
// Highlight rank 1-3
let rankHtml = index + 1;
if (index === 0) rankHtml = 'πŸ₯‡ 1';
if (index === 1) rankHtml = 'πŸ₯ˆ 2';
if (index === 2) rankHtml = 'πŸ₯‰ 3';
tr.innerHTML = `
<td>${rankHtml}</td>
<td><strong>${row.algorithm}</strong> <span style="font-size:0.8em; color:#999">(${row.datasets_count} datasets)</span></td>
<td>${safeFixed(row.mean_f1_global)}</td>
<td>${safeFixed(row.mean_auc_global)}</td>
<td>
<strong>${safeFixed(row.final_score)}</strong>
<div class="score-bar"><div class="score-fill" style="width: ${Math.min(row.final_score * 100, 100)}%"></div></div>
</td>
`;
tableBody.appendChild(tr);
});
updateSortArrows();
}
function updateSortArrows() {
document.querySelectorAll('th .arrow').forEach(span => span.textContent = '↕');
const activeHeader = document.querySelector(`th[data-key="${sortKey}"] .arrow`);
if (activeHeader) activeHeader.textContent = sortDirection === 1 ? '↑' : '↓';
}
document.querySelectorAll('th[data-key]').forEach(th => {
th.addEventListener('click', () => {
const key = th.dataset.key;
if (sortKey === key) {
sortDirection *= -1;
} else {
sortKey = key;
sortDirection = (key === 'rank') ? 1 : -1;
}
if (key === 'rank') {
sortKey = 'final_score';
sortDirection = -1;
}
sortData();
renderTable();
});
});
document.addEventListener("DOMContentLoaded", () => {
fetchLastUpdated();
fetchGlobalStats();
});
</script>
</body>
</html>