chart

app.js

@@ -19,18 +19,25 @@ const state = {
   colorScores: false,
   availability: new Set(["Open", "Closed"]),
   availabilityMenuOpen: false,
+  chartDataset: "combined",
+  chartMetric: "WER",
+  chartAvailability: "All",
 };
 
 function setTheme(theme, persist = true) {
   document.documentElement.dataset.theme = theme;
   const toggle = document.querySelector("#theme-toggle");
+
   if (toggle) {
     const nextTheme = theme === "dark" ? "light" : "dark";
     toggle.setAttribute("aria-label", `Switch to ${nextTheme} mode`);
     toggle.title = `Switch to ${nextTheme} mode`;
   }
+
   if (persist) {
-    try { localStorage.setItem("arm-asr-theme", theme); } catch (_) {}
+    try {
+      localStorage.setItem("arm-asr-theme", theme);
+    } catch (_) {}
   }
 }
 
@@ -42,6 +49,7 @@ function parseCsv(text) {
 
   for (let index = 0; index < text.length; index += 1) {
     const char = text[index];
+
     if (quoted) {
       if (char === '"' && text[index + 1] === '"') {
         field += '"';
@@ -58,7 +66,11 @@ function parseCsv(text) {
       field = "";
     } else if (char === "\n") {
       row.push(field.replace(/\r$/, ""));
-      if (row.some((value) => value !== "")) rows.push(row);
+
+      if (row.some((value) => value !== "")) {
+        rows.push(row);
+      }
+
       row = [];
       field = "";
     } else {
@@ -70,30 +82,47 @@ function parseCsv(text) {
     row.push(field.replace(/\r$/, ""));
     rows.push(row);
   }
+
   return rows;
 }
 
 function ingest(rows) {
   const [sections, datasets, metrics] = rows.slice(0, 3);
+
   const modelIndex = sections.indexOf("model");
   const urlIndex = sections.indexOf("model_url");
   const availabilityIndex = sections.indexOf("availability");
   const standardIndex = sections.indexOf("standard");
+
   let currentDataset = "";
 
   for (let index = standardIndex; index < sections.length; index += 1) {
-    if (datasets[index]) currentDataset = datasets[index];
+    if (datasets[index]) {
+      currentDataset = datasets[index];
+    }
+
     if (currentDataset && METRICS.includes(metrics[index])) {
-      state.columns.set(`${currentDataset}|${metrics[index]}`, index);
-      if (!state.datasets.includes(currentDataset)) state.datasets.push(currentDataset);
+      state.columns.set(
+        `${currentDataset}|${metrics[index]}`,
+        index
+      );
+
+      if (!state.datasets.includes(currentDataset)) {
+        state.datasets.push(currentDataset);
+      }
     }
   }
 
   state.records = rows.slice(3).map((row) => {
     const values = {};
+
     for (const [key, index] of state.columns) {
-      values[key] = row[index] === "" || row[index] === undefined ? null : Number(row[index]);
+      values[key] =
+        row[index] === "" || row[index] === undefined
+          ? null
+          : Number(row[index]);
     }
+
     return {
       model: row[modelIndex],
       url: row[urlIndex],
@@ -104,325 +133,1399 @@ function ingest(rows) {
 }
 
 function currentDataset() {
-  return document.querySelector('input[name="dataset"]:checked')?.value || state.datasets[0];
+  return (
+    document.querySelector('input[name="dataset"]:checked')?.value ||
+    state.datasets[0]
+  );
 }
 
 function currentMatrixMetric() {
-  return document.querySelector('input[name="matrix-metric"]:checked')?.value || "WER";
+  return (
+    document.querySelector('input[name="matrix-metric"]:checked')?.value ||
+    "WER"
+  );
 }
 
 function rankRecords(records, dataset, metric = "WER") {
   const rankKey = `${dataset}|${metric}`;
+
   const ranked = [...records].sort((left, right) => {
     const a = left.values[rankKey];
     const b = right.values[rankKey];
+
     if (a === null) return 1;
     if (b === null) return -1;
+
     return a - b || left.model.localeCompare(right.model);
   });
-  return new Map(ranked.map((record, index) => [record.model, index + 1]));
+
+  return new Map(
+    ranked.map((record, index) => [
+      record.model,
+      index + 1,
+    ])
+  );
 }
 
 function makeCell(tag, text, className = "") {
   const cell = document.createElement(tag);
   cell.textContent = text;
-  if (className) cell.className = className;
+
+  if (className) {
+    cell.className = className;
+  }
+
   return cell;
 }
 
 function matrixRanges(columns) {
-  const familyValues = { wer: [], cer: [] };
+  const familyValues = {
+    wer: [],
+    cer: [],
+  };
+
   columns.forEach((column) => {
     const metric = column.key.split("|")[1];
     const family = metric.startsWith("CER") ? "cer" : "wer";
+
     state.records.forEach((record) => {
       const value = record.values[column.key];
-      if (value !== null) familyValues[family].push(value);
+
+      if (value !== null) {
+        familyValues[family].push(value);
+      }
     });
   });
 
-  const familyRanges = Object.fromEntries(Object.entries(familyValues).map(([family, values]) => [
-    family,
-    values.length ? { min: Math.min(...values), max: Math.max(...values) } : null,
-  ]));
+  const familyRanges = Object.fromEntries(
+    Object.entries(familyValues).map(([family, values]) => [
+      family,
+      values.length
+        ? {
+            min: Math.min(...values),
+            max: Math.max(...values),
+          }
+        : null,
+    ])
+  );
 
-  return new Map(columns.map((column) => {
-    const metric = column.key.split("|")[1];
-    const family = metric.startsWith("CER") ? "cer" : "wer";
-    return [column.key, familyRanges[family]];
-  }));
+  return new Map(
+    columns.map((column) => {
+      const metric = column.key.split("|")[1];
+      const family = metric.startsWith("CER") ? "cer" : "wer";
+
+      return [
+        column.key,
+        familyRanges[family],
+      ];
+    })
+  );
 }
 
 function heatClass(value, range) {
-  if (value === null || !range || range.max === range.min) return "";
-  const ratio = (value - range.min) / (range.max - range.min);
-  return ` heat-score-${Math.min(5, Math.floor(ratio * 5) + 1)}`;
+  if (
+    value === null ||
+    !range ||
+    range.max === range.min
+  ) {
+    return "";
+  }
+
+  const ratio =
+    (value - range.min) /
+    (range.max - range.min);
+
+  return ` heat-score-${Math.min(
+    5,
+    Math.floor(ratio * 5) + 1
+  )}`;
 }
 
-function render() {
-  const dataset = currentDataset();
-  const matrixMetric = currentMatrixMetric();
-  const isMatrix = state.view === "matrix";
-  const columns = isMatrix
-    ? state.datasets.map((item) => ({ label: DATASET_LABELS[item] || item, key: `${item}|${matrixMetric}` }))
-    : METRICS.map((metric) => ({ label: metric, key: `${dataset}|${metric}` }));
-  const table = document.querySelector("#leaderboard-table");
-  const head = table.querySelector("thead");
-  const body = table.querySelector("tbody");
-  const rankDataset = isMatrix ? "combined" : dataset;
-  const rankMetric = isMatrix ? matrixMetric : "WER";
-  const ranks = rankRecords(state.records, rankDataset, rankMetric);
-  const ranges = state.colorScores ? matrixRanges(columns) : new Map();
-
-  let records = state.records.filter((record) => state.availability.has(record.availability));
-
-  if (columns.some((column) => column.key === state.sortKey)) {
-    const direction = state.sortDirection === "asc" ? 1 : -1;
-    records = [...records].sort((left, right) => {
-      const a = left.values[state.sortKey];
-      const b = right.values[state.sortKey];
-      if (a === null) return 1;
-      if (b === null) return -1;
-      return (a - b) * direction || left.model.localeCompare(right.model);
+function renderComparisonChart() {
+  const container =
+    document.querySelector("#comparison-bars");
+
+  const empty =
+    document.querySelector("#comparison-chart-empty");
+
+  if (!container || !empty) {
+    return;
+  }
+
+  const key =
+    `${state.chartDataset}|${state.chartMetric}`;
+
+  const records = state.records
+    .filter((record) => {
+      return (
+        state.chartAvailability === "All" ||
+        record.availability === state.chartAvailability
+      );
+    })
+    .map((record) => ({
+      model: record.model,
+      url: record.url,
+      availability: record.availability,
+      value: record.values[key],
+    }))
+    .filter((record) => {
+      return (
+        record.value !== null &&
+        Number.isFinite(record.value)
+      );
+    })
+    .sort((left, right) => {
+      return (
+        left.value - right.value ||
+        left.model.localeCompare(right.model)
+      );
     });
+
+  empty.hidden = records.length !== 0;
+
+  if (!records.length) {
+    container.replaceChildren();
+    return;
   }
 
-  const headerRow = document.createElement("tr");
-  const rankHeader = makeCell("th", "Rank");
-  rankHeader.title = `Ranked by ${rankMetric} for ${DATASET_LABELS[rankDataset] || rankDataset}`;
-  const availabilityHeader = document.createElement("th");
-  const availabilityControl = document.createElement("span");
-  availabilityControl.className = "availability-control";
-  const availabilityLabel = document.createElement("button");
-  availabilityLabel.type = "button";
-  availabilityLabel.className = "availability-label";
-  availabilityLabel.setAttribute("aria-expanded", String(state.availabilityMenuOpen));
-  availabilityLabel.setAttribute("aria-label", "Filter models by availability");
-  const availabilitySummary = state.availability.size === 2
-    ? "All"
-    : [...state.availability][0];
-  availabilityLabel.innerHTML = `Availability <span>${availabilitySummary}</span><b aria-hidden="true">⌄</b>`;
-  availabilityLabel.addEventListener("click", (event) => {
-    event.stopPropagation();
-    state.availabilityMenuOpen = !state.availabilityMenuOpen;
-    render();
+  const maxValue = Math.max(
+    ...records.map((record) => record.value)
+  );
+
+  const rows = records.map((record) => {
+    const row =
+      document.createElement("div");
+
+    row.className =
+      "comparison-bar-row";
+
+    const modelWrap =
+      document.createElement("div");
+
+    modelWrap.className =
+      "comparison-model";
+
+    const availabilityDot =
+      document.createElement("span");
+
+    availabilityDot.className =
+      `comparison-availability-dot ${record.availability.toLowerCase()}`;
+
+    availabilityDot.title =
+      record.availability === "Open"
+        ? "Open model"
+        : "Closed model";
+
+    availabilityDot.setAttribute(
+      "aria-label",
+      record.availability === "Open"
+        ? "Open model"
+        : "Closed model"
+    );
+
+    modelWrap.append(
+      availabilityDot
+    );
+
+    if (record.url) {
+      const modelLink =
+        document.createElement("a");
+
+      modelLink.className =
+        "comparison-model-link";
+
+      modelLink.href =
+        record.url;
+
+      modelLink.target =
+        "_blank";
+
+      modelLink.rel =
+        "noreferrer";
+
+      modelLink.title =
+        `Open ${record.model}`;
+
+      modelLink.setAttribute(
+        "aria-label",
+        `Open ${record.model} model page`
+      );
+
+      const modelName =
+        document.createElement("span");
+
+      modelName.textContent =
+        record.model;
+
+      const icon =
+        document.createElement("svg");
+
+      icon.setAttribute(
+        "viewBox",
+        "0 0 24 24"
+      );
+
+      icon.setAttribute(
+        "aria-hidden",
+        "true"
+      );
+
+      icon.innerHTML =
+        '<path d="M14 5h5v5m0-5-8 8M19 14v4a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h4"/>';
+
+      modelLink.append(
+        modelName,
+        icon
+      );
+
+      modelWrap.append(
+        modelLink
+      );
+    } else {
+      const modelName =
+        document.createElement("span");
+
+      modelName.className =
+        "comparison-model-name";
+
+      modelName.textContent =
+        record.model;
+
+      modelName.title =
+        record.model;
+
+      modelWrap.append(
+        modelName
+      );
+    }
+
+    const track =
+      document.createElement("div");
+
+    track.className =
+      "comparison-track";
+
+    track.setAttribute(
+      "aria-hidden",
+      "true"
+    );
+
+    const fill =
+      document.createElement("div");
+
+    fill.className =
+      "comparison-fill";
+
+    fill.style.width = `${
+      maxValue
+        ? (record.value / maxValue) * 100
+        : 0
+    }%`;
+
+    track.append(fill);
+
+    const value =
+      document.createElement("div");
+
+    value.className =
+      "comparison-value";
+
+    value.textContent =
+      `${record.value.toFixed(2)}%`;
+
+    row.setAttribute(
+      "aria-label",
+      `${record.model}: ${record.value.toFixed(
+        2
+      )} percent ${state.chartMetric}, ${record.availability}`
+    );
+
+    row.append(
+      modelWrap,
+      track,
+      value
+    );
+
+    return row;
   });
-  const availabilityFilters = document.createElement("span");
-  availabilityFilters.className = "availability-filters";
-  availabilityFilters.hidden = !state.availabilityMenuOpen;
-  availabilityFilters.addEventListener("click", (event) => event.stopPropagation());
-  ["Open", "Closed"].forEach((value) => {
-    const button = document.createElement("button");
-    button.type = "button";
-    button.className = `availability-filter ${value.toLowerCase()}`;
-    button.classList.toggle("is-active", state.availability.has(value));
-    button.setAttribute("aria-pressed", String(state.availability.has(value)));
-    button.setAttribute("aria-label", `Toggle ${value.toLowerCase()} models`);
-    button.textContent = value;
-    button.addEventListener("click", () => {
-      if (state.availability.has(value) && state.availability.size > 1) state.availability.delete(value);
-      else state.availability.add(value);
-      render();
-    });
-    availabilityFilters.append(button);
+
+  container.replaceChildren(
+    ...rows
+  );
+}
+
+function buildChartControls() {
+  const datasetSelect =
+    document.querySelector("#chart-dataset");
+
+  const metricSelect =
+    document.querySelector("#chart-metric");
+
+  const availabilitySelect =
+    document.querySelector("#chart-availability");
+
+  if (
+    !datasetSelect ||
+    !metricSelect ||
+    !availabilitySelect
+  ) {
+    return;
+  }
+
+  state.datasets.forEach((dataset) => {
+    const option =
+      document.createElement("option");
+
+    option.value =
+      dataset;
+
+    option.textContent =
+      DATASET_LABELS[dataset] ||
+      dataset;
+
+    datasetSelect.append(
+      option
+    );
+  });
+
+  METRICS.forEach((metric) => {
+    const option =
+      document.createElement("option");
+
+    option.value =
+      metric;
+
+    option.textContent =
+      metric;
+
+    metricSelect.append(
+      option
+    );
   });
-  availabilityControl.append(availabilityLabel, availabilityFilters);
-  availabilityHeader.append(availabilityControl);
-  headerRow.append(rankHeader, makeCell("th", "Model"), availabilityHeader);
+
+  state.chartDataset =
+    state.datasets.includes("combined")
+      ? "combined"
+      : state.datasets[0];
+
+  state.chartMetric =
+    "WER";
+
+  state.chartAvailability =
+    "All";
+
+  datasetSelect.value =
+    state.chartDataset;
+
+  metricSelect.value =
+    state.chartMetric;
+
+  availabilitySelect.value =
+    state.chartAvailability;
+
+  datasetSelect.addEventListener(
+    "change",
+    () => {
+      state.chartDataset =
+        datasetSelect.value;
+
+      renderComparisonChart();
+    }
+  );
+
+  metricSelect.addEventListener(
+    "change",
+    () => {
+      state.chartMetric =
+        metricSelect.value;
+
+      renderComparisonChart();
+    }
+  );
+
+  availabilitySelect.addEventListener(
+    "change",
+    () => {
+      state.chartAvailability =
+        availabilitySelect.value;
+
+      renderComparisonChart();
+    }
+  );
+}
+
+function render() {
+  const dataset =
+    currentDataset();
+
+  const matrixMetric =
+    currentMatrixMetric();
+
+  const isMatrix =
+    state.view === "matrix";
+
+  const columns = isMatrix
+    ? state.datasets.map((item) => ({
+        label:
+          DATASET_LABELS[item] ||
+          item,
+        key:
+          `${item}|${matrixMetric}`,
+      }))
+    : METRICS.map((metric) => ({
+        label:
+          metric,
+        key:
+          `${dataset}|${metric}`,
+      }));
+
+  const table =
+    document.querySelector(
+      "#leaderboard-table"
+    );
+
+  const head =
+    table.querySelector("thead");
+
+  const body =
+    table.querySelector("tbody");
+
+  const rankDataset =
+    isMatrix
+      ? "combined"
+      : dataset;
+
+  const rankMetric =
+    isMatrix
+      ? matrixMetric
+      : "WER";
+
+  const ranks =
+    rankRecords(
+      state.records,
+      rankDataset,
+      rankMetric
+    );
+
+  const ranges =
+    state.colorScores
+      ? matrixRanges(columns)
+      : new Map();
+
+  let records =
+    state.records.filter(
+      (record) =>
+        state.availability.has(
+          record.availability
+        )
+    );
+
+  if (
+    columns.some(
+      (column) =>
+        column.key === state.sortKey
+    )
+  ) {
+    const direction =
+      state.sortDirection === "asc"
+        ? 1
+        : -1;
+
+    records =
+      [...records].sort(
+        (left, right) => {
+          const a =
+            left.values[
+              state.sortKey
+            ];
+
+          const b =
+            right.values[
+              state.sortKey
+            ];
+
+          if (a === null) return 1;
+          if (b === null) return -1;
+
+          return (
+            (a - b) * direction ||
+            left.model.localeCompare(
+              right.model
+            )
+          );
+        }
+      );
+  }
+
+  const headerRow =
+    document.createElement("tr");
+
+  const rankHeader =
+    makeCell("th", "Rank");
+
+  rankHeader.title =
+    `Ranked by ${rankMetric} for ${
+      DATASET_LABELS[rankDataset] ||
+      rankDataset
+    }`;
+
+  const availabilityHeader =
+    document.createElement("th");
+
+  const availabilityControl =
+    document.createElement("span");
+
+  availabilityControl.className =
+    "availability-control";
+
+  const availabilityLabel =
+    document.createElement("button");
+
+  availabilityLabel.type =
+    "button";
+
+  availabilityLabel.className =
+    "availability-label";
+
+  availabilityLabel.setAttribute(
+    "aria-expanded",
+    String(
+      state.availabilityMenuOpen
+    )
+  );
+
+  availabilityLabel.setAttribute(
+    "aria-label",
+    "Filter models by availability"
+  );
+
+  const availabilitySummary =
+    state.availability.size === 2
+      ? "All"
+      : [...state.availability][0];
+
+  availabilityLabel.innerHTML =
+    `Availability <span>${availabilitySummary}</span><b aria-hidden="true">⌄</b>`;
+
+  availabilityLabel.addEventListener(
+    "click",
+    (event) => {
+      event.stopPropagation();
+
+      state.availabilityMenuOpen =
+        !state.availabilityMenuOpen;
+
+      render();
+    }
+  );
+
+  const availabilityFilters =
+    document.createElement("span");
+
+  availabilityFilters.className =
+    "availability-filters";
+
+  availabilityFilters.hidden =
+    !state.availabilityMenuOpen;
+
+  availabilityFilters.addEventListener(
+    "click",
+    (event) =>
+      event.stopPropagation()
+  );
+
+  ["Open", "Closed"].forEach(
+    (value) => {
+      const button =
+        document.createElement(
+          "button"
+        );
+
+      button.type =
+        "button";
+
+      button.className =
+        `availability-filter ${value.toLowerCase()}`;
+
+      button.classList.toggle(
+        "is-active",
+        state.availability.has(
+          value
+        )
+      );
+
+      button.setAttribute(
+        "aria-pressed",
+        String(
+          state.availability.has(
+            value
+          )
+        )
+      );
+
+      button.setAttribute(
+        "aria-label",
+        `Toggle ${value.toLowerCase()} models`
+      );
+
+      button.textContent =
+        value;
+
+      button.addEventListener(
+        "click",
+        () => {
+          if (
+            state.availability.has(
+              value
+            ) &&
+            state.availability.size > 1
+          ) {
+            state.availability.delete(
+              value
+            );
+          } else {
+            state.availability.add(
+              value
+            );
+          }
+
+          render();
+        }
+      );
+
+      availabilityFilters.append(
+        button
+      );
+    }
+  );
+
+  availabilityControl.append(
+    availabilityLabel,
+    availabilityFilters
+  );
+
+  availabilityHeader.append(
+    availabilityControl
+  );
+
+  headerRow.append(
+    rankHeader,
+    makeCell("th", "Model"),
+    availabilityHeader
+  );
+
   columns.forEach((column) => {
-    const header = document.createElement("th");
-    if (isMatrix && column.key.startsWith("combined|")) header.classList.add("combined-score");
-    const button = document.createElement("button");
-    button.type = "button";
-    button.className = "sort-button";
-    if (state.sortKey === column.key) button.classList.add(`is-${state.sortDirection}`);
-    button.textContent = column.label;
-    button.setAttribute("aria-label", `Sort by ${column.label}`);
-    button.addEventListener("click", () => {
-      if (state.sortKey === column.key) {
-        state.sortDirection = state.sortDirection === "asc" ? "desc" : "asc";
-      } else {
-        state.sortKey = column.key;
-        state.sortDirection = "asc";
+    const header =
+      document.createElement("th");
+
+    if (
+      isMatrix &&
+      column.key.startsWith(
+        "combined|"
+      )
+    ) {
+      header.classList.add(
+        "combined-score"
+      );
+    }
+
+    const button =
+      document.createElement(
+        "button"
+      );
+
+    button.type =
+      "button";
+
+    button.className =
+      "sort-button";
+
+    if (
+      state.sortKey ===
+      column.key
+    ) {
+      button.classList.add(
+        `is-${state.sortDirection}`
+      );
+    }
+
+    button.textContent =
+      column.label;
+
+    button.setAttribute(
+      "aria-label",
+      `Sort by ${column.label}`
+    );
+
+    button.addEventListener(
+      "click",
+      () => {
+        if (
+          state.sortKey ===
+          column.key
+        ) {
+          state.sortDirection =
+            state.sortDirection ===
+            "asc"
+              ? "desc"
+              : "asc";
+        } else {
+          state.sortKey =
+            column.key;
+
+          state.sortDirection =
+            "asc";
+        }
+
+        render();
       }
-      render();
-    });
+    );
+
     header.append(button);
     headerRow.append(header);
   });
-  head.replaceChildren(headerRow);
 
-  const rows = records.map((record) => {
-    const row = document.createElement("tr");
-    const modelCell = document.createElement("td");
-    const modelWrap = document.createElement("div");
-    modelWrap.className = "model-cell";
-    const model = document.createElement("span");
-    model.className = "model-name";
-    model.textContent = record.model;
-    modelWrap.append(model);
-    if (record.url) {
-      const link = document.createElement("a");
-      link.className = "model-link";
-      link.href = record.url;
-      link.target = "_blank";
-      link.rel = "noreferrer";
-      link.title = `Open ${record.model}`;
-      link.setAttribute("aria-label", `Open ${record.model} model page`);
-      link.innerHTML = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M14 5h5v5m0-5-8 8M19 14v4a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h4"/></svg>';
-      modelWrap.append(link);
-    }
-    modelCell.append(modelWrap);
+  head.replaceChildren(
+    headerRow
+  );
 
-    const rank = ranks.get(record.model);
-    const rankCell = makeCell("td", rank ? `#${rank}` : "—", `rank${rank <= 3 ? " rank-top" : ""}`);
+  const rows =
+    records.map((record) => {
+      const row =
+        document.createElement("tr");
 
-    const availabilityCell = document.createElement("td");
-    const badge = document.createElement("span");
-    badge.className = `availability-badge ${record.availability.toLowerCase()}`;
-    badge.textContent = record.availability;
-    availabilityCell.append(badge);
-    row.append(rankCell, modelCell, availabilityCell);
+      const modelCell =
+        document.createElement(
+          "td"
+        );
 
-    columns.forEach((column) => {
-      const value = record.values[column.key];
-      const heat = state.colorScores ? `heat-cell${heatClass(value, ranges.get(column.key))}` : "";
-      const cell = makeCell("td", value === null ? "—" : value.toFixed(2), heat);
-      if (isMatrix && column.key.startsWith("combined|")) cell.classList.add("combined-score");
-      row.append(cell);
+      const modelWrap =
+        document.createElement(
+          "div"
+        );
+
+      modelWrap.className =
+        "model-cell";
+
+      const model =
+        document.createElement(
+          "span"
+        );
+
+      model.className =
+        "model-name";
+
+      model.textContent =
+        record.model;
+
+      modelWrap.append(
+        model
+      );
+
+      if (record.url) {
+        const link =
+          document.createElement(
+            "a"
+          );
+
+        link.className =
+          "model-link";
+
+        link.href =
+          record.url;
+
+        link.target =
+          "_blank";
+
+        link.rel =
+          "noreferrer";
+
+        link.title =
+          `Open ${record.model}`;
+
+        link.setAttribute(
+          "aria-label",
+          `Open ${record.model} model page`
+        );
+
+        link.innerHTML =
+          '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M14 5h5v5m0-5-8 8M19 14v4a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h4"/></svg>';
+
+        modelWrap.append(
+          link
+        );
+      }
+
+      modelCell.append(
+        modelWrap
+      );
+
+      const rank =
+        ranks.get(
+          record.model
+        );
+
+      const rankCell =
+        makeCell(
+          "td",
+          rank
+            ? `#${rank}`
+            : "—",
+          `rank${
+            rank <= 3
+              ? " rank-top"
+              : ""
+          }`
+        );
+
+      const availabilityCell =
+        document.createElement(
+          "td"
+        );
+
+      const badge =
+        document.createElement(
+          "span"
+        );
+
+      badge.className =
+        `availability-badge ${record.availability.toLowerCase()}`;
+
+      badge.textContent =
+        record.availability;
+
+      availabilityCell.append(
+        badge
+      );
+
+      row.append(
+        rankCell,
+        modelCell,
+        availabilityCell
+      );
+
+      columns.forEach(
+        (column) => {
+          const value =
+            record.values[
+              column.key
+            ];
+
+          const heat =
+            state.colorScores
+              ? `heat-cell${heatClass(
+                  value,
+                  ranges.get(
+                    column.key
+                  )
+                )}`
+              : "";
+
+          const cell =
+            makeCell(
+              "td",
+              value === null
+                ? "—"
+                : value.toFixed(2),
+              heat
+            );
+
+          if (
+            isMatrix &&
+            column.key.startsWith(
+              "combined|"
+            )
+          ) {
+            cell.classList.add(
+              "combined-score"
+            );
+          }
+
+          row.append(
+            cell
+          );
+        }
+      );
+
+      return row;
     });
-    return row;
-  });
-  body.replaceChildren(...rows);
-
-  document.querySelector("#table-title").textContent = isMatrix
-    ? `${matrixMetric} across all datasets`
-    : `${DATASET_LABELS[dataset] || dataset} leaderboard`;
-  const colorNote = state.colorScores
-    ? " Colors are scaled separately within the WER and CER metric families: green is better, red is worse."
-    : "";
-  document.querySelector("#table-description").textContent = (isMatrix
-    ? `Rank is based on Overall ${matrixMetric}. Scores are percentages; lower is better.`
-    : "Rank is based on WER. Scores are percentages; lower is better.") + colorNote;
-  document.querySelector("#result-count").textContent = `${records.length} ${records.length === 1 ? "model" : "models"}`;
-  document.querySelector("#empty-state").hidden = records.length !== 0;
-  table.hidden = records.length === 0;
+
+  body.replaceChildren(
+    ...rows
+  );
+
+  document.querySelector(
+    "#table-title"
+  ).textContent =
+    isMatrix
+      ? `${matrixMetric} across all datasets`
+      : `${
+          DATASET_LABELS[dataset] ||
+          dataset
+        } leaderboard`;
+
+  const colorNote =
+    state.colorScores
+      ? " Colors are scaled separately within the WER and CER metric families: green is better, red is worse."
+      : "";
+
+  document.querySelector(
+    "#table-description"
+  ).textContent =
+    (
+      isMatrix
+        ? `Rank is based on Overall ${matrixMetric}. Scores are percentages; lower is better.`
+        : "Rank is based on WER. Scores are percentages; lower is better."
+    ) + colorNote;
+
+  document.querySelector(
+    "#result-count"
+  ).textContent =
+    `${records.length} ${
+      records.length === 1
+        ? "model"
+        : "models"
+    }`;
+
+  document.querySelector(
+    "#empty-state"
+  ).hidden =
+    records.length !== 0;
+
+  table.hidden =
+    records.length === 0;
 }
 
 function setView(view) {
-  state.view = view;
-  const isMatrix = view === "matrix";
-  document.querySelector("#leaderboards").classList.toggle("matrix-view", isMatrix);
-  document.querySelector(".matrix-metric-field").hidden = !isMatrix;
-  document.querySelectorAll(".view-button").forEach((button) => {
-    const active = button.dataset.view === view;
-    button.classList.toggle("is-active", active);
-    button.setAttribute("aria-pressed", String(active));
-  });
-  state.sortKey = isMatrix
-    ? `combined|${currentMatrixMetric()}`
-    : `${currentDataset()}|WER`;
-  state.sortDirection = "asc";
+  state.view =
+    view;
+
+  const isMatrix =
+    view === "matrix";
+
+  document
+    .querySelector(
+      "#leaderboards"
+    )
+    .classList.toggle(
+      "matrix-view",
+      isMatrix
+    );
+
+  document.querySelector(
+    ".matrix-metric-field"
+  ).hidden =
+    !isMatrix;
+
+  document
+    .querySelectorAll(
+      ".view-button"
+    )
+    .forEach((button) => {
+      const active =
+        button.dataset.view ===
+        view;
+
+      button.classList.toggle(
+        "is-active",
+        active
+      );
+
+      button.setAttribute(
+        "aria-pressed",
+        String(active)
+      );
+    });
+
+  state.sortKey =
+    isMatrix
+      ? `combined|${currentMatrixMetric()}`
+      : `${currentDataset()}|WER`;
+
+  state.sortDirection =
+    "asc";
+
   render();
 }
 
-function activateTab(name, updateHash = true) {
-  const validName = ["leaderboards", "datasets", "about"].includes(name) ? name : "leaderboards";
-  document.querySelectorAll(".tab").forEach((tab) => {
-    const active = tab.dataset.tab === validName;
-    tab.classList.toggle("is-active", active);
-    tab.setAttribute("aria-selected", String(active));
-  });
-  document.querySelectorAll(".panel").forEach((panel) => {
-    const active = panel.id === validName;
-    panel.classList.toggle("is-active", active);
-    panel.hidden = !active;
-  });
-  if (updateHash) history.replaceState(null, "", `#${validName}`);
+function activateTab(
+  name,
+  updateHash = true
+) {
+  const validName =
+    [
+      "leaderboards",
+      "datasets",
+      "about",
+    ].includes(name)
+      ? name
+      : "leaderboards";
+
+  document
+    .querySelectorAll(
+      ".tab"
+    )
+    .forEach((tab) => {
+      const active =
+        tab.dataset.tab ===
+        validName;
+
+      tab.classList.toggle(
+        "is-active",
+        active
+      );
+
+      tab.setAttribute(
+        "aria-selected",
+        String(active)
+      );
+    });
+
+  document
+    .querySelectorAll(
+      ".panel"
+    )
+    .forEach((panel) => {
+      const active =
+        panel.id ===
+        validName;
+
+      panel.classList.toggle(
+        "is-active",
+        active
+      );
+
+      panel.hidden =
+        !active;
+    });
+
+  if (updateHash) {
+    history.replaceState(
+      null,
+      "",
+      `#${validName}`
+    );
+  }
 }
 
 function buildControls() {
-  const datasetOptions = document.querySelector("#dataset-options");
-  state.datasets.forEach((dataset, index) => {
-    const label = document.createElement("label");
-    label.className = "choice-pill";
-    if (dataset === "combined") label.classList.add("combined-choice");
-    const input = document.createElement("input");
-    input.type = "radio";
-    input.name = "dataset";
-    input.value = dataset;
-    input.checked = index === 0;
-    input.addEventListener("change", () => {
-      state.sortKey = `${dataset}|WER`;
-      state.sortDirection = "asc";
-      render();
+  const datasetOptions =
+    document.querySelector(
+      "#dataset-options"
+    );
+
+  state.datasets.forEach(
+    (dataset, index) => {
+      const label =
+        document.createElement(
+          "label"
+        );
+
+      label.className =
+        "choice-pill";
+
+      if (
+        dataset === "combined"
+      ) {
+        label.classList.add(
+          "combined-choice"
+        );
+      }
+
+      const input =
+        document.createElement(
+          "input"
+        );
+
+      input.type =
+        "radio";
+
+      input.name =
+        "dataset";
+
+      input.value =
+        dataset;
+
+      input.checked =
+        index === 0;
+
+      input.addEventListener(
+        "change",
+        () => {
+          state.sortKey =
+            `${dataset}|WER`;
+
+          state.sortDirection =
+            "asc";
+
+          render();
+        }
+      );
+
+      label.append(
+        input,
+        document.createTextNode(
+          DATASET_LABELS[
+            dataset
+          ] || dataset
+        )
+      );
+
+      datasetOptions.append(
+        label
+      );
+    }
+  );
+
+  const matrixOptions =
+    document.querySelector(
+      "#matrix-metric-options"
+    );
+
+  METRICS.forEach(
+    (metric, index) => {
+      const matrixLabel =
+        document.createElement(
+          "label"
+        );
+
+      matrixLabel.className =
+        "choice-pill";
+
+      const matrixInput =
+        document.createElement(
+          "input"
+        );
+
+      matrixInput.type =
+        "radio";
+
+      matrixInput.name =
+        "matrix-metric";
+
+      matrixInput.value =
+        metric;
+
+      matrixInput.checked =
+        index === 0;
+
+      matrixInput.addEventListener(
+        "change",
+        () => {
+          state.sortKey =
+            `combined|${metric}`;
+
+          state.sortDirection =
+            "asc";
+
+          render();
+        }
+      );
+
+      matrixLabel.append(
+        matrixInput,
+        document.createTextNode(
+          metric
+        )
+      );
+
+      matrixOptions.append(
+        matrixLabel
+      );
+    }
+  );
+
+  document
+    .querySelector(
+      "#color-toggle"
+    )
+    .addEventListener(
+      "click",
+      (event) => {
+        state.colorScores =
+          !state.colorScores;
+
+        event.currentTarget.classList.toggle(
+          "is-active",
+          state.colorScores
+        );
+
+        event.currentTarget.setAttribute(
+          "aria-pressed",
+          String(
+            state.colorScores
+          )
+        );
+
+        render();
+      }
+    );
+
+  document
+    .querySelectorAll(
+      ".view-button"
+    )
+    .forEach((button) => {
+      button.addEventListener(
+        "click",
+        () => {
+          setView(
+            button.dataset.view
+          );
+        }
+      );
     });
-    label.append(input, document.createTextNode(DATASET_LABELS[dataset] || dataset));
-    datasetOptions.append(label);
-  });
 
-  const matrixOptions = document.querySelector("#matrix-metric-options");
-  METRICS.forEach((metric, index) => {
-    const matrixLabel = document.createElement("label");
-    matrixLabel.className = "choice-pill";
-    const matrixInput = document.createElement("input");
-    matrixInput.type = "radio";
-    matrixInput.name = "matrix-metric";
-    matrixInput.value = metric;
-    matrixInput.checked = index === 0;
-    matrixInput.addEventListener("change", () => {
-      state.sortKey = `combined|${metric}`;
-      state.sortDirection = "asc";
-      render();
+  document
+    .querySelectorAll(
+      ".tab"
+    )
+    .forEach((tab) => {
+      tab.addEventListener(
+        "click",
+        () => {
+          activateTab(
+            tab.dataset.tab
+          );
+        }
+      );
     });
-    matrixLabel.append(matrixInput, document.createTextNode(metric));
-    matrixOptions.append(matrixLabel);
-  });
 
-  document.querySelector("#color-toggle").addEventListener("click", (event) => {
-    state.colorScores = !state.colorScores;
-    event.currentTarget.classList.toggle("is-active", state.colorScores);
-    event.currentTarget.setAttribute("aria-pressed", String(state.colorScores));
-    render();
-  });
-  document.querySelectorAll(".view-button").forEach((button) => button.addEventListener("click", () => setView(button.dataset.view)));
-  document.querySelectorAll(".tab").forEach((tab) => tab.addEventListener("click", () => activateTab(tab.dataset.tab)));
-  document.querySelector("#theme-toggle").addEventListener("click", () => {
-    setTheme(document.documentElement.dataset.theme === "dark" ? "light" : "dark");
-  });
-  document.addEventListener("click", () => {
-    if (!state.availabilityMenuOpen) return;
-    state.availabilityMenuOpen = false;
-    render();
-  });
-  document.addEventListener("keydown", (event) => {
-    if (event.key !== "Escape" || !state.availabilityMenuOpen) return;
-    state.availabilityMenuOpen = false;
-    render();
-  });
-  setTheme(document.documentElement.dataset.theme, false);
+  document
+    .querySelector(
+      "#theme-toggle"
+    )
+    .addEventListener(
+      "click",
+      () => {
+        setTheme(
+          document.documentElement
+            .dataset.theme ===
+            "dark"
+            ? "light"
+            : "dark"
+        );
+      }
+    );
+
+  document.addEventListener(
+    "click",
+    () => {
+      if (
+        !state.availabilityMenuOpen
+      ) {
+        return;
+      }
+
+      state.availabilityMenuOpen =
+        false;
+
+      render();
+    }
+  );
+
+  document.addEventListener(
+    "keydown",
+    (event) => {
+      if (
+        event.key !== "Escape" ||
+        !state.availabilityMenuOpen
+      ) {
+        return;
+      }
+
+      state.availabilityMenuOpen =
+        false;
+
+      render();
+    }
+  );
+
+  setTheme(
+    document.documentElement
+      .dataset.theme,
+    false
+  );
 }
 
 async function start() {
   try {
-    const response = await fetch("results.csv");
-    if (!response.ok) throw new Error(`Could not load results.csv (${response.status})`);
-    ingest(parseCsv(await response.text()));
+    const response =
+      await fetch(
+        "results.csv"
+      );
+
+    if (!response.ok) {
+      throw new Error(
+        `Could not load results.csv (${response.status})`
+      );
+    }
+
+    ingest(
+      parseCsv(
+        await response.text()
+      )
+    );
+
     buildControls();
-    activateTab(location.hash.slice(1), false);
+    buildChartControls();
+
+    activateTab(
+      location.hash.slice(1),
+      false
+    );
+
     render();
+    renderComparisonChart();
   } catch (error) {
-    document.querySelector("#table-title").textContent = "Leaderboard unavailable";
-    document.querySelector("#leaderboard-table").hidden = true;
-    const empty = document.querySelector("#empty-state");
-    empty.hidden = false;
-    empty.querySelector("h3").textContent = "Could not load results";
-    empty.querySelector("p").textContent = error.message;
+    document.querySelector(
+      "#table-title"
+    ).textContent =
+      "Leaderboard unavailable";
+
+    document.querySelector(
+      "#leaderboard-table"
+    ).hidden =
+      true;
+
+    const empty =
+      document.querySelector(
+        "#empty-state"
+      );
+
+    empty.hidden =
+      false;
+
+    empty.querySelector(
+      "h3"
+    ).textContent =
+      "Could not load results";
+
+    empty.querySelector(
+      "p"
+    ).textContent =
+      error.message;
   }
 }
 
-if (typeof module !== "undefined") {
-  module.exports = { heatClass, ingest, matrixRanges, parseCsv, rankRecords, setTheme, state };
+if (
+  typeof module !==
+  "undefined"
+) {
+  module.exports = {
+    heatClass,
+    ingest,
+    matrixRanges,
+    parseCsv,
+    rankRecords,
+    setTheme,
+    state,
+  };
 }
 
-if (typeof document !== "undefined") start();
+if (
+  typeof document !==
+  "undefined"
+) {
+  start();
+}