Upload 2 files

assets/app.js

@@ -0,0 +1,233 @@
+// SelectArena leaderboard: a static page over the generated files in data/.
+//
+// data/meta.json lists every published subset; each subset folder
+// data/subsets/tasks_<t>/models_<m>/budgets_<b>/ holds elo_explorer.html and leaderboard_table.html,
+// which are embedded as iframes. The folder names mirror selectarena.website.subsets.Subset.rel_path.
+// Every embedded page posts {saFrameHeight: <px>} to this window; the listener below resizes its iframe.
+(function () {
+  'use strict';
+
+  var ALL = 'all';
+  var TASK_LABELS = {
+    all: 'All tasks',
+    classification: 'Classification',
+    binary: 'Binary',
+    multiclass: 'Multiclass',
+    regression: 'Regression'
+  };
+  var TABS = ['leaderboard', 'datasets', 'robustness', 'about'];
+  var state = { tab: 'leaderboard', tasks: ALL, model: ALL, budget: ALL };
+  var meta = null;
+  var published = {};
+
+  function $(id) { return document.getElementById(id); }
+  function key(s) { return s.tasks + '|' + s.model + '|' + s.budget; }
+  function subsetDir(s) {
+    return 'data/subsets/tasks_' + s.tasks + '/models_' + s.model + '/budgets_' + s.budget + '/';
+  }
+  function withAxis(axis, value) {
+    var s = { tasks: state.tasks, model: state.model, budget: state.budget };
+    s[axis] = value;
+    return s;
+  }
+
+  function budgetLabel(index, total) {
+    var label = 'Budget ' + (index + 1);
+    if (total && index === 0) return label + ' (smallest)';
+    if (total && index === total - 1) return label + ' (largest)';
+    return label;
+  }
+
+  // ---- URL hash: #tab=...&tasks=...&model=...&budget=... (shareable selections) ----
+  function readHash() {
+    var params = new URLSearchParams(window.location.hash.slice(1));
+    ['tab', 'tasks', 'model', 'budget'].forEach(function (k) {
+      var v = params.get(k);
+      if (v) state[k] = v;
+    });
+    if (TABS.indexOf(state.tab) < 0) state.tab = 'leaderboard';
+  }
+  function writeHash() {
+    var params = new URLSearchParams();
+    if (state.tab !== 'leaderboard') params.set('tab', state.tab);
+    ['tasks', 'model', 'budget'].forEach(function (k) { if (state[k] !== ALL) params.set(k, state[k]); });
+    var hash = params.toString();
+    try {
+      history.replaceState(null, '', hash ? '#' + hash : window.location.pathname + window.location.search);
+    } catch (e) { /* sandboxed frame: the selection still works, it just is not in the URL */ }
+  }
+
+  // ---- iframes ----
+  function setFrame(frame, src) {
+    if (frame.getAttribute('src') !== src) frame.setAttribute('src', src);
+  }
+  window.addEventListener('message', function (event) {
+    var data = event.data;
+    if (!data || typeof data.saFrameHeight !== 'number') return;
+    document.querySelectorAll('iframe.sa-frame').forEach(function (frame) {
+      if (frame.contentWindow === event.source) frame.style.height = data.saFrameHeight + 'px';
+    });
+  });
+
+  // ---- header ----
+  function renderFacts() {
+    var version = document.querySelector('meta[name="selectarena-version"]').getAttribute('content');
+    $('current-version').textContent = 'v' + version;
+    var facts = [];
+    if (meta) {
+      var models = Object.keys(meta.models || {}).map(function (k) { return meta.models[k]; });
+      facts.push(meta.n_methods + ' methods', meta.n_datasets + ' datasets');
+      if (models.length) facts.push('downstream models: ' + models.join(', '));
+      facts.push('updated ' + meta.generated_at);
+    }
+    facts.push('v' + version);
+    var list = $('facts');
+    list.textContent = '';
+    facts.forEach(function (text) {
+      var li = document.createElement('li');
+      li.textContent = text;
+      list.appendChild(li);
+    });
+  }
+
+  // ---- tabs ----
+  function showTab(tab) {
+    state.tab = tab;
+    TABS.forEach(function (t) {
+      $('tab-' + t).setAttribute('aria-selected', String(t === tab));
+      $('tab-' + t).tabIndex = t === tab ? 0 : -1;
+      $('panel-' + t).hidden = t !== tab;
+    });
+    if (tab === 'datasets') loadDatasets();
+    if (tab === 'robustness') loadRobustness();
+    writeHash();
+  }
+  function initTabs() {
+    document.querySelectorAll('[role="tab"]').forEach(function (button) {
+      button.addEventListener('click', function () { showTab(button.dataset.tab); });
+      button.addEventListener('keydown', function (event) {
+        var i = TABS.indexOf(button.dataset.tab);
+        if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {
+          var next = TABS[(i + (event.key === 'ArrowRight' ? 1 : TABS.length - 1)) % TABS.length];
+          showTab(next);
+          $('tab-' + next).focus();
+        }
+      });
+    });
+  }
+
+  // ---- leaderboard ----
+  function axisOptions() {
+    var taskTypes = meta.task_types || [ALL];
+    var models = meta.models || {};
+    return {
+      tasks: Object.keys(TASK_LABELS)
+        .filter(function (k) { return taskTypes.indexOf(k) >= 0; })
+        .map(function (k) { return { value: k, label: TASK_LABELS[k] }; }),
+      model: [{ value: ALL, label: 'All models' }].concat(
+        Object.keys(models).map(function (k) { return { value: k, label: models[k] }; })),
+      budget: [{ value: ALL, label: 'All budgets' }].concat(
+        (meta.budgets || []).map(function (b) { return { value: String(b), label: budgetLabel(b, meta.total_budget) }; }))
+    };
+  }
+
+  function renderChips(axis, options) {
+    var container = $('chips-' + axis);
+    container.textContent = '';
+    options.forEach(function (option) {
+      var button = document.createElement('button');
+      button.type = 'button';
+      button.className = 'chip';
+      button.textContent = option.label;
+      button.setAttribute('aria-pressed', String(option.value === state[axis]));
+      var available = published[key(withAxis(axis, option.value))];
+      if (!available && option.value !== state[axis]) {
+        button.disabled = true;
+        button.title = 'No leaderboard for this combination';
+      }
+      button.addEventListener('click', function () {
+        state[axis] = option.value;
+        renderLeaderboard();
+        writeHash();
+      });
+      container.appendChild(button);
+    });
+  }
+
+  function renderLeaderboard() {
+    var options = axisOptions();
+    ['tasks', 'model', 'budget'].forEach(function (axis) { renderChips(axis, options[axis]); });
+
+    var info = published[key(state)];
+    var scope = [
+      TASK_LABELS[state.tasks] || state.tasks,
+      state.model === ALL ? 'all downstream models' : (meta.models[state.model] || state.model),
+      state.budget === ALL ? 'all budgets' : budgetLabel(Number(state.budget), meta.total_budget)
+    ].join(' · ');
+    var summary = $('summary');
+    summary.textContent = '';
+    var strong = document.createElement('strong');
+    strong.textContent = scope;
+    summary.appendChild(strong);
+    if (!info) {
+      $('subset-missing').hidden = false;
+      $('subset-content').hidden = true;
+      return;
+    }
+    summary.appendChild(document.createTextNode(
+      ': ' + info.n_methods + ' methods on ' + info.n_datasets + ' datasets, ' +
+      info.n_comparisons.toLocaleString('en-US') + ' method results compared.'));
+    $('subset-missing').hidden = true;
+    $('subset-content').hidden = false;
+    var dir = subsetDir(state);
+    setFrame($('frame-figure'), dir + 'elo_explorer.html');
+    var table = $('frame-table');
+    if (table.getAttribute('src') !== dir + 'leaderboard_table.html') {
+      table.style.height = (info.n_methods * 37 + 90) + 'px';
+    }
+    setFrame(table, dir + 'leaderboard_table.html');
+  }
+
+  // ---- other tabs (loaded on first view) ----
+  function loadDatasets() {
+    if (!meta) { $('datasets-missing').hidden = false; $('frame-datasets').hidden = true; return; }
+    setFrame($('frame-datasets'), 'data/per_dataset_table.html');
+  }
+  function loadRobustness() {
+    [['stability', meta && meta.has_stability], ['validity', meta && meta.has_validity]].forEach(function (entry) {
+      var name = entry[0];
+      $(name + '-missing').hidden = !!entry[1];
+      $('frame-' + name).hidden = !entry[1];
+      if (entry[1]) setFrame($('frame-' + name), 'data/' + name + '_table.html');
+    });
+    if (meta && meta.validity_noise != null) $('validity-noise').textContent = Number(meta.validity_noise).toFixed(1);
+  }
+
+  // ---- start ----
+  function start() {
+    readHash();
+    initTabs();
+    fetch('data/meta.json', { cache: 'no-cache' })
+      .then(function (response) {
+        if (!response.ok) throw new Error('HTTP ' + response.status);
+        return response.json();
+      })
+      .then(function (data) {
+        meta = data;
+        (meta.subsets || []).forEach(function (s) { published[key(s)] = s; });
+        if (!published[key(state)]) { state.tasks = ALL; state.model = ALL; state.budget = ALL; }
+        $('leaderboard-content').hidden = false;
+        renderFacts();
+        renderLeaderboard();
+        showTab(state.tab);
+      })
+      .catch(function () {
+        meta = null;
+        $('no-results').hidden = false;
+        renderFacts();
+        showTab(state.tab);
+      });
+  }
+
+  start();
+})();

assets/style.css

@@ -0,0 +1,111 @@
+/* SelectArena leaderboard. Colors are tokens so light and dark mode stay in sync with the
+   generated pages in data/ (they use the same palette). */
+:root {
+  --fg: #1f2328;
+  --muted: #59636e;
+  --bg: #ffffff;
+  --surface: #f6f8fa;
+  --line: #d1d9e0;
+  --accent: #0072b2;
+  --accent-soft: #e6f1f8;
+  --validity: #d55e00;
+  --on-accent: #ffffff;
+  --radius: 10px;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --fg: #e6edf3;
+    --muted: #9198a1;
+    --bg: #0d1117;
+    --surface: #151b23;
+    --line: #3d444d;
+    --accent: #4aa3df;
+    --accent-soft: #10273a;
+    --validity: #f08a4b;
+    --on-accent: #0d1117;
+  }
+}
+
+* { box-sizing: border-box; }
+html { -webkit-text-size-adjust: 100%; }
+body {
+  margin: 0;
+  background: var(--bg);
+  color: var(--fg);
+  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+}
+a { color: var(--accent); }
+.page { max-width: 1200px; margin: 0 auto; padding: 24px 16px 48px; }
+
+/* Header */
+.header h1 { font-size: 2.1rem; line-height: 1.15; margin: 0; letter-spacing: -0.015em; }
+.header h1 .mark { color: var(--accent); }
+.subtitle { margin: 4px 0 12px; color: var(--muted); font-size: 1.05rem; }
+.facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
+.facts li {
+  font-size: 0.8rem; padding: 2px 10px; border-radius: 999px;
+  border: 1px solid var(--line); color: var(--muted);
+}
+.links { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 10px; font-size: 0.95rem; }
+.intro { max-width: 75ch; color: var(--fg); margin: 16px 0 8px; }
+
+/* Tabs */
+.tabs {
+  display: flex; gap: 2px; margin: 20px 0 16px; border-bottom: 1px solid var(--line);
+  overflow-x: auto; scrollbar-width: none;
+}
+.tabs button {
+  font: inherit; font-weight: 600; color: var(--muted); background: none; border: 0;
+  padding: 10px 14px; border-bottom: 2px solid transparent; margin-bottom: -1px;
+  cursor: pointer; white-space: nowrap;
+}
+.tabs button[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--accent); }
+.tabs button:hover { color: var(--fg); }
+.tabs button:focus-visible, .chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+[role="tabpanel"][hidden] { display: none; }
+
+/* Selection controls */
+.controls {
+  display: grid; gap: 12px; padding: 14px 16px; margin-bottom: 14px;
+  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
+}
+.control { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 10px; }
+.control-label { font-size: 0.85rem; font-weight: 600; color: var(--muted); }
+.chips { display: flex; flex-wrap: wrap; gap: 6px; }
+.chip {
+  font: inherit; font-size: 0.85rem; color: var(--fg); background: var(--bg);
+  border: 1px solid var(--line); border-radius: 999px; padding: 3px 12px; cursor: pointer;
+}
+.chip:hover { border-color: var(--accent); }
+.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
+.chip:disabled { opacity: 0.4; cursor: not-allowed; }
+@media (max-width: 640px) {
+  .control { grid-template-columns: 1fr; gap: 6px; }
+}
+
+.summary { margin: 0 0 10px; color: var(--muted); font-size: 0.95rem; }
+.summary strong { color: var(--fg); }
+.caption { font-size: 0.88rem; color: var(--muted); max-width: 95ch; margin: 6px 0 22px; }
+.caption .stab { color: var(--accent); font-weight: 600; }
+.caption .val { color: var(--validity); font-weight: 600; }
+
+.frame { width: 100%; border: 0; display: block; }
+.notice {
+  padding: 18px; border: 1px dashed var(--line); border-radius: var(--radius);
+  color: var(--muted); margin: 8px 0 16px;
+}
+h2 { font-size: 1.2rem; margin: 26px 0 8px; }
+.prose { max-width: 80ch; }
+.prose li { margin: 4px 0; }
+code { font-size: 0.88em; background: var(--surface); padding: 1px 5px; border-radius: 4px; }
+
+/* Footer */
+footer { margin-top: 36px; border-top: 1px solid var(--line); padding-top: 12px; }
+details { margin: 8px 0; }
+details summary { cursor: pointer; font-weight: 600; }
+pre {
+  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
+  padding: 12px; overflow-x: auto; font-size: 0.82rem;
+}
+.history { padding-left: 18px; }
+.history li { margin: 6px 0; }