static/app.js

const state = {
  rows: [],
  sort: { key: "mean", direction: "desc" },
};

let columns = [];

function configureColumns(metrics) {
  columns = [
    { key: "rank", label: "Rank" },
    { key: "model", label: "Model" },
    { key: "access", label: "Access" },
    { key: "size", label: "Model size" },
    { key: "mean", label: "Mean", score: true },
    ...metrics.map(metric => ({ key: metric.key, label: metric.name, score: true, benchmark: true })),
  ];
}

const $ = (selector) => document.querySelector(selector);
const $$ = (selector) => [...document.querySelectorAll(selector)];
const escapeHtml = (value) => String(value ?? "").replace(/[&<>'"]/g, (char) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", "'": "&#39;", '"': "&quot;" })[char]);
const formatScore = (value) => value == null || Number.isNaN(Number(value)) ? "—" : Number(value).toFixed(2);
function visibleColumns() {
  return columns.filter(column =>
    (column.key !== "access" || $("#show-access").value === "show") &&
    (column.key !== "size" || $("#show-size").value === "show")
  );
}

function renderHead() {
  $("#leaderboard-head").innerHTML = `<tr>${visibleColumns().map((column) => {
    const sortable = column.score || column.key === "model";
    const active = state.sort.key === column.key;
    const arrow = active ? (state.sort.direction === "asc" ? " ↑" : " ↓") : "";
    const label = column.benchmark ? escapeHtml(column.label).replaceAll(" ", "<br>") : escapeHtml(column.label);
    return `<th class="${sortable ? "sortable" : ""} ${active ? "active-sort" : ""}" data-key="${escapeHtml(column.key)}">${label}${arrow}</th>`;
  }).join("")}</tr>`;
  $$("th.sortable").forEach((header) => header.addEventListener("click", () => {
    const key = header.dataset.key;
    state.sort = { key, direction: state.sort.key === key && state.sort.direction === "desc" ? "asc" : "desc" };
    renderHead();
    renderRows();
  }));
}

function filteredRows() {
  const access = $("#model-filter").value;
  const rows = state.rows.filter(row => !access || row.access === access);
  const multiplier = state.sort.direction === "asc" ? 1 : -1;
  return rows.sort((a, b) => {
    const av = a[state.sort.key];
    const bv = b[state.sort.key];
    if (typeof av === "number" && typeof bv === "number") return (av - bv) * multiplier;
    return String(av ?? "").localeCompare(String(bv ?? "")) * multiplier;
  });
}

function cell(row, column, rank) {
  const value = row[column.key];
  if (column.key === "rank") return `<td class="rank ${rank < 3 ? "top" : ""}">${String(rank + 1).padStart(2, "0")}</td>`;
  if (column.key === "model") {
    const medal = ["🥇", "🥈", "🥉"][rank] || "";
    const suffix = medal ? ` <span aria-label="Rank ${rank + 1}">${medal}</span>` : "";
    const url = /^https:\/\/(huggingface\.co|ai\.google\.dev)\//.test(row.url || "") ? row.url : "";
    return `<td class="model-cell">${url ? `<a href="${escapeHtml(url)}" title="${escapeHtml(row.link_title)}" target="_blank" rel="noopener noreferrer">${escapeHtml(value)}</a>${suffix}` : escapeHtml(value) + suffix}</td>`;
  }
  if (["access", "size"].includes(column.key)) {
    const title = column.key === "size" ? row.size_note : "";
    return `<td title="${escapeHtml(title)}"><span class="pill">${escapeHtml(value)}</span></td>`;
  }
  if (column.score) return `<td class="score ${column.key === "mean" ? "primary" : ""}">${formatScore(value)}</td>`;
  return `<td>${escapeHtml(value ?? "—")}</td>`;
}

function renderRows() {
  const rows = filteredRows();
  $("#leaderboard-body").innerHTML = rows.map((row, rank) => `<tr>${visibleColumns().map((column) => cell(row, column, rank)).join("")}</tr>`).join("");
  $(".table-shell").classList.toggle("is-empty", rows.length === 0);
  $("#empty-state").classList.toggle("hidden", rows.length > 0);
  $("#result-count").textContent = `${rows.length} model${rows.length === 1 ? "" : "s"} shown`;
}

async function loadData() {
  try {
    const response = await fetch("/leaderboard-assets/results.json");
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    const payload = await response.json();
    state.rows = payload.rows;
    configureColumns(payload.metrics);
    renderHead();
    renderRows();
  } catch (error) {
    $("#leaderboard-body").innerHTML = "";
    $("#data-warning").textContent = `The leaderboard could not be loaded: ${error.message}`;
    $("#data-warning").classList.remove("hidden");
  }
}

$("#model-filter").addEventListener("change", renderRows);
[$("#show-access"), $("#show-size")].forEach(control => control.addEventListener("change", () => {
  renderHead();
  renderRows();
}));
loadData();