| <!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> |
|
|
