| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <title>Feature Selection Leaderboard</title> |
| | <style> |
| | body { font-family: Arial, sans-serif; margin: 20px; } |
| | table { border-collapse: collapse; width: 100%; margin-top: 20px; } |
| | th, td { border: 1px solid #ddd; padding: 8px; text-align: center; } |
| | th { cursor: pointer; background-color: #f2f2f2; position: relative; } |
| | th .arrow { font-size: 12px; margin-left: 4px; } |
| | select { padding: 5px; margin-bottom: 10px; } |
| | </style> |
| | </head> |
| | <body> |
| |
|
| | <h1>Feature Selection Leaderboard</h1> |
| |
|
| | <label for="dataset-select">Select Dataset:</label> |
| | <select id="dataset-select"> |
| | |
| | </select> |
| |
|
| | <table id="result-table"> |
| | <thead> |
| | <tr> |
| | <th data-key="rank">Rank <span class="arrow">↑↓</span></th> |
| | <th data-key="algorithm">Algorithm <span class="arrow">↑↓</span></th> |
| | <th data-key="num_features">Num Features <span class="arrow">↑↓</span></th> |
| | <th data-key="mean_f1">Mean F1 <span class="arrow">↑↓</span></th> |
| | <th data-key="mean_auc">Mean AUC <span class="arrow">↑↓</span></th> |
| | <th data-key="time">Time <span class="arrow">↑↓</span></th> |
| | </tr> |
| | </thead> |
| | <tbody> |
| | |
| | </tbody> |
| | </table> |
| |
|
| | <script> |
| | |
| | let currentResults = []; |
| | |
| | |
| | function updateTable(results) { |
| | const tbody = document.querySelector("#result-table tbody"); |
| | tbody.innerHTML = ""; |
| | currentResults = results; |
| | |
| | results.forEach((r, idx) => { |
| | const row = document.createElement("tr"); |
| | row.innerHTML = ` |
| | <td>${idx + 1}</td> |
| | <td>${r.algorithm}</td> |
| | <td>${r.num_features}</td> |
| | <td>${r.mean_f1.toFixed(4)}</td> |
| | <td>${r.mean_auc.toFixed(4)}</td> |
| | <td>${r.time.toFixed(2)}</td> |
| | `; |
| | tbody.appendChild(row); |
| | }); |
| | } |
| | |
| | |
| | function fetchResults(dataset) { |
| | console.log("[DEBUG] Fetching dataset:", dataset); |
| | fetch(`/api/results?dataset=${dataset}`) |
| | .then(res => res.json()) |
| | .then(data => { |
| | console.log("[DEBUG] Fetched results:", data); |
| | updateTable(data); |
| | }) |
| | .catch(err => console.error(err)); |
| | } |
| | |
| | |
| | document.addEventListener("DOMContentLoaded", () => { |
| | const select = document.getElementById("dataset-select"); |
| | |
| | |
| | fetch("/api/datasets") |
| | .then(res => res.json()) |
| | .then(datasets => { |
| | datasets.forEach(ds => { |
| | const option = document.createElement("option"); |
| | option.value = ds; |
| | option.textContent = ds; |
| | select.appendChild(option); |
| | }); |
| | |
| | |
| | if (datasets.includes("Authorship")) { |
| | select.value = "Authorship"; |
| | fetchResults("Authorship"); |
| | } else if (datasets.length > 0) { |
| | select.value = datasets[0]; |
| | fetchResults(datasets[0]); |
| | } |
| | }); |
| | |
| | |
| | select.addEventListener("change", () => { |
| | fetchResults(select.value); |
| | }); |
| | |
| | |
| | document.querySelectorAll("#result-table th").forEach(th => { |
| | th.addEventListener("click", () => { |
| | const key = th.dataset.key; |
| | if (!key) return; |
| | sortTable(key); |
| | }); |
| | }); |
| | }); |
| | |
| | |
| | let sortAsc = true; |
| | function sortTable(key) { |
| | currentResults.sort((a, b) => { |
| | let valA = a[key], valB = b[key]; |
| | |
| | |
| | if (key === "time") { |
| | return sortAsc ? valA - valB : valB - valA; |
| | } else { |
| | return sortAsc ? valB - valA : valA - valB; |
| | } |
| | }); |
| | |
| | sortAsc = !sortAsc; |
| | updateTable(currentResults); |
| | } |
| | </script> |
| |
|
| | </body> |
| | </html> |
| |
|
