/* Copyright 2026 Olewave, LLC
   SPDX-License-Identifier: Apache-2.0 */

/* FA-Bench leaderboards, Track 2 (ASR with timestamps) and Track 1 (forced
   alignment), on the word tier and the phone tier. Word boards rank by the word
   timestamp F1 at 20 ms and phone boards by the phone boundary F1 at 20 ms,
   highest first.

   Renders into every element carrying data-fab-leaderboard. The leaderboard
   page hands one card its boards as
   <script type="text/csv" data-board> blocks, and the card switches between
   them. A post can embed one board, read from data-src with data-track and
   data-tier, and the standalone page inlines its CSV by data-inline, because
   a browser will not fetch a file from a page opened from disk. Logos load
   from data-logos, or from logos/ beside the CSV.

   The board is a ranked table, one row per system. Range is the span of
   ranks a system takes over 2,000 bootstrap draws of the test utterances, and
   the column the table is sorted by carries a bar in the colour of the
   organization behind the system, with its 95% interval. Ranked by one test
   cell, the table shows that cell alone with its own error rate. On the
   forced alignment boards, F1 Drop is how far an aligner's mean F1 falls on
   the words Qwen3-ASR recognized, which a line under the table defines with
   the top row as its example. A
   board with data-words="recognized" ranks the aligners on those words, and
   the Transcript switch picks it. Price
   is an API's list price per audio hour. build_page.py writes every number in
   the CSVs, and each cell's interval comes from the same bootstrap draws as
   the mean's. */
(function () {
  'use strict';

  // The page's language. The leaderboard page hands its translations in a
  // JSON script, #fab-i18n, keyed by the English, so each string here is
  // written once, in English, inside t() or tf(), and the view reads them
  // from this file to translate them. Any string without a translation stays
  // English. tf fills {name} slots after translating, so a translation can
  // put them in any order.
  var I18N = (function () {
    try {
      var s = document.getElementById('fab-i18n');
      return s ? JSON.parse(s.textContent) : {};
    } catch (e) { return {}; }
  })();
  function t(s) { return I18N[s] || s; }
  function tf(s, vars) {
    return t(s).replace(/\{(\w+)\}/g, function (m, k) { return vars[k] != null ? vars[k] : m; });
  }

  var CELLS = [
    { key: 'f1_mean4', label: t('Mean of the four test cells') },
    { key: 'f1_timit_clean', label: t('TIMIT core test, clean') },
    { key: 'f1_timit_noisy', label: t('TIMIT core test, noisy') },
    { key: 'f1_buckeye_clean', label: t('Buckeye test, clean') },
    { key: 'f1_buckeye_noisy', label: t('Buckeye test, noisy') }
  ];
  var SUBTITLE = {
    f1_mean4: t('Mean of TIMIT core test and Buckeye test, each on clean and on noisy audio. Higher is better.'),
    f1_timit_clean: t('TIMIT core test on clean audio. Higher is better.'),
    f1_timit_noisy: t('TIMIT core test, mean of reverb, noise, music and babble. Higher is better.'),
    f1_buckeye_clean: t('Buckeye test on clean audio. Higher is better.'),
    f1_buckeye_noisy: t('Buckeye test, mean of reverb, noise, music and babble. Higher is better.')
  };
  var VIEWS = [
    { key: 'all', label: t('All') },
    { key: 'open', label: t('Open models') },
    { key: 'commercial', label: t('Commercial APIs') }
  ];

  // Brand colours where the organization has one, darkened only as far as 3:1
  // on white needs. At night (dark.css) a bar takes night, the same colour
  // mixed toward white only as far as 3:1 on the dark card needs. Every organization with a published mark shows it, and
  // lowercase lettered tiles stand in for the projects that have none, in colours
  // picked to stay apart from their neighbours in the ranking. Only Olign
  // wears the site's purple. logos/SOURCES.txt says where each logo comes from.
  var ORGS = {
    olewave: { name: 'Olewave', color: '#5f3bff', night: '#623fff', logo: 'olewave.png' },
    mfa: { name: 'Montreal Forced Aligner', color: '#b91c1c', night: '#bf3030', logo: 'mfa.svg', mark: true },
    maps: { name: 'Mason Phonetics Lab', color: '#a16207', logo: 'maps.png' },
    charsiu: { name: 'Charsiu', color: '#0f766e', mono: 'ch' },
    google: { name: 'Google', color: '#4285f4', logo: 'google-g.svg', mark: true },
    nyra: { name: 'nyra health', color: '#00a4a5', logo: 'nyra.png' },
    meta: { name: 'Meta', color: '#0467df', logo: 'meta.svg', mark: true },
    alibaba: { name: 'Alibaba Qwen', color: '#fa6500', logo: 'alibaba.svg', mark: true },
    mistral: { name: 'Mistral AI', color: '#fa520f', logo: 'mistral.svg', mark: true },
    amazon: { name: 'Amazon', color: '#232f3e', night: '#616974', logo: 'amazon.png' },
    bfa: { name: 'Bournemouth Forced Aligner', color: '#4d7c0f', mono: 'bfa' },
    stablets: { name: 'stable-ts', color: '#713f12', night: '#885e38', mono: 'st' },
    assemblyai: { name: 'AssemblyAI', color: '#2545d3', night: '#3f5bd8', logo: 'assemblyai.png' },
    deepgram: { name: 'Deepgram', color: '#065f46', night: '#26745e', logo: 'deepgram.svg', mark: true },
    nvidia: { name: 'NVIDIA', color: '#64a600', logo: 'nvidia.svg', mark: true },
    pytorch: { name: 'PyTorch', color: '#ee4c2c', logo: 'pytorch.svg', mark: true },
    ibm: { name: 'IBM', color: '#002d9c', night: '#4264b6', logo: 'ibm.svg', mark: true },
    whisperx: { name: 'WhisperX', color: '#831843', night: '#9e4b6c', mono: 'wx' },
    neufa: { name: 'NeuFA', color: '#0369a1', night: '#086ca3', mono: 'nf' },
    mlspeech: { name: 'Speech, Language, and AI Lab, Technion', color: '#1f2937', night: '#606771', logo: 'mlspeech.png' },
    cmusphinx: { name: 'CMU Sphinx, Carnegie Mellon LTI', color: '#57534e', night: '#696661', logo: 'cmu-scs-dragon.png' },
    speechmatics: { name: 'Speechmatics', color: '#0b3b4a', night: '#486c77', logo: 'speechmatics.png' },
    linto: { name: 'LinTO', color: '#269fcd', logo: 'linto.png' },
    microsoft: { name: 'Microsoft', color: '#0078d4', logo: 'microsoft.png' },
    elevenlabs: { name: 'ElevenLabs', color: '#000000', night: '#696969', logo: 'elevenlabs.svg', mark: true },
    openai: { name: 'OpenAI', color: '#52525b', night: '#67676f', logo: 'openai.png' }
  };
  var UNKNOWN_ORG = { name: '', color: '#646464', mono: '?' };
  function orgOf(d) { return ORGS[d.org] || UNKNOWN_ORG; }

  function el(tag, attrs, children) {
    var node = document.createElement(tag);
    setAttrs(node, attrs);
    append(node, children);
    return node;
  }
  function setAttrs(node, attrs) {
    for (var k in attrs || {}) {
      if (attrs[k] !== null && attrs[k] !== undefined) node.setAttribute(k, attrs[k]);
    }
  }
  function append(node, children) {
    if (children === null || children === undefined) return;
    (Array.isArray(children) ? children : [children]).forEach(function (c) {
      if (c === null || c === undefined) return;
      if (Array.isArray(c)) return append(node, c);
      node.appendChild(typeof c === 'string' ? document.createTextNode(c) : c);
    });
  }

  function parseCSV(text) {
    var rows = [], row = [], field = '', quoted = false;
    for (var i = 0; i < text.length; i++) {
      var c = text.charAt(i);
      if (quoted) {
        if (c === '"') {
          if (text.charAt(i + 1) === '"') { field += '"'; i++; } else { quoted = false; }
        } else { field += c; }
      } else if (c === '"') {
        quoted = true;
      } else if (c === ',') {
        row.push(field); field = '';
      } else if (c === '\n' || c === '\r') {
        if (c === '\r' && text.charAt(i + 1) === '\n') i++;
        row.push(field); field = '';
        if (row.length > 1 || row[0] !== '') rows.push(row);
        row = [];
      } else {
        field += c;
      }
    }
    if (field !== '' || row.length) { row.push(field); rows.push(row); }
    var head = rows.shift() || [];
    return rows.map(function (r) {
      var o = {};
      head.forEach(function (h, k) {
        var v = r[k] === undefined ? '' : r[k];
        o[h] = /^(f1_|mae_ms_|wer_pct_|per_pct_|price_|rank_lo|rank_hi)/.test(h) ? (v === '' ? null : Number(v)) : v;
      });
      if (!o.label) o.label = o.system;
      return o;
    });
  }

  function displayName(d) { return d.flag ? d.label + ' ' + d.flag : d.label; }
  function f3(v) { return v === null || v === undefined || isNaN(v) ? '–' : v.toFixed(3); }
  function f1(v) { return v === null || v === undefined || isNaN(v) ? '–' : v.toFixed(1); }
  function niceMax(v) { return Math.max(0.1, Math.ceil(v * 10 - 1e-9) / 10); }

  // A label with no arrow can stand for a pipeline whose system name has one,
  // and the source line then names its steps. One with an arrow shows them.
  function hidesPipeline(d) {
    return d.label.indexOf(' → ') < 0 && d.system.indexOf(' → ') > 0;
  }

  // Every FA-Bench and Olign in the card's text links to its home, on a page
  // that names the homes in data-fabench-href and data-olign-href. The
  // version a board was scored by links to its release on GitHub.
  var RELEASE = 'https://github.com/olewave/fa-bench/releases/tag/v2.0.0';
  var TERMS = /(FA-Bench 2\.0\.0|FA-Bench|Olign)/;
  function linked(text, hrefs) {
    if (!hrefs) return text;
    return String(text).split(TERMS).map(function (part) {
      var href = part === 'FA-Bench 2.0.0' ? RELEASE : part === 'FA-Bench' ? hrefs.fabench
        : part === 'Olign' ? hrefs.olign : null;
      return href ? el('a', { href: href }, part) : part;
    });
  }

  // A logo in a light tile, or a lettered tile in the organization's colour.
  // The letters are lowercase and small, so a tile reads as a stand-in and
  // never louder than the real logos beside it.
  function monoFont(text, size) {
    var k = text.length >= 4 ? 0.27 : (text.length === 3 ? 0.34 : 0.4);
    return Math.max(7, Math.round(size * k * 10) / 10);
  }
  function htmlLogo(org, base, s) {
    if (org.logo) {
      return el('img', { class: 'fab-lb__logo-img' + (org.mark ? ' is-mark' : ''), src: base + org.logo,
        alt: '', width: s, height: s, loading: 'lazy', decoding: 'async' });
    }
    return el('b', { class: 'fab-lb__mono', 'aria-hidden': 'true',
      style: 'background:' + org.color + ';width:' + s + 'px;height:' + s + 'px;font-size:' + monoFont(org.mono, s) + 'px' },
      org.mono);
  }

  // The site's theme turns every <select> on the page into a bootstrap-select
  // dropdown once the page has loaded (custom.js, handleBootstrapSelect). The
  // chart's menu keeps its own look, so it undoes that whenever it happens.
  function keepNativeSelect(select) {
    var home = select.parentElement;
    function unwrap() {
      var wrap = select.parentElement;
      if (!wrap || wrap === home || !wrap.classList.contains('bootstrap-select')) return;
      var $ = window.jQuery;
      if ($ && $.fn && $.fn.selectpicker) {
        try { $(select).selectpicker('destroy'); } catch (e) { /* unwrap by hand below */ }
      }
      wrap = select.parentElement;
      if (wrap && wrap !== home && wrap.classList.contains('bootstrap-select')) {
        home.insertBefore(select, wrap);
        home.removeChild(wrap);
      }
      select.classList.remove('bs-select-hidden', 'selectpicker');
      select.style.display = '';
    }
    if (window.MutationObserver) new MutationObserver(unwrap).observe(home, { childList: true, subtree: true });
    window.addEventListener('load', function () { setTimeout(unwrap, 0); });
  }

  // A page can hand one card several boards, the leaderboard page its five.
  // Switches at the top left of the table pick the task, the tier and, on the
  // forced alignment boards, the transcript the aligners are handed. The board shown stays in
  // the address bar's #fragment, so a link opens the same board.
  var TASKS = [
    { track: 2, label: t('ASR with timestamps') },
    { track: 1, label: t('Forced alignment'),
      info: t('Forced alignment estimates the timestamps of each word, phone or character in speech given its transcript.') }
  ];
  var TIERS = [
    { tier: 'word', label: t('Words') },
    { tier: 'phone', label: t('Phones') }
  ];
  var TRANSCRIPTS = [
    { words: 'reference', label: t('Reference words') },
    { words: 'recognized', label: t('Recognized words') }
  ];
  // Gives each switch label an id unique on the page, for aria-labelledby.
  var switchIds = 0;

  // The small "i" after a switch whose option carries info, outside the
  // option's button, so pointing at it shows the text without changing the
  // board. The text shows on hover, on keyboard focus and on a tap, since a
  // phone has no hover, and the button's aria-label holds it.
  function infoIcon(o) {
    var box = el('span', { class: 'fab-lb__info' });
    var btn = el('button', { type: 'button', class: 'fab-lb__info-btn', 'aria-label': o.info }, 'i');
    append(box, [btn, el('span', { class: 'fab-lb__info-tip', 'aria-hidden': 'true' }, o.info)]);
    function close() { box.classList.remove('is-open'); }
    btn.addEventListener('click', function () { box.classList.toggle('is-open'); });
    document.addEventListener('click', function (e) { if (!box.contains(e.target)) close(); });
    document.addEventListener('keydown', function (e) { if (e.key === 'Escape') close(); });
    return box;
  }

  function metricOf(tier) {
    return tier === 'word' ? t('word timestamp F1 at 20 ms') : t('phone boundary F1 at 20 ms');
  }

  function boardTitle(b) {
    var metric = { metric: metricOf(b.tier) };
    return b.track === 2 ? tf('ASR with timestamps, {metric}', metric) : b.words === 'recognized'
      ? tf('Forced alignment with recognized words, {metric}', metric) : tf('Forced alignment, {metric}', metric);
  }

  // A row shown under another name says so here, so the label never hides
  // which pipeline produced the number.
  // A one-step API row names its model and API version under its name
  // instead, in the table and the tooltip.
  function sourceOf(b, hrefs) {
    var parts = [t('Scored by FA-Bench 2.0.0.')].concat(b.data.filter(hidesPipeline).map(function (d) {
      return tf('{label} aligns the words {asr} recognizes.', { label: d.label, asr: d.system.split(' → ')[0] });
    }), [b.track === 2 ? t('Every row is one system as shipped.') : b.words === 'recognized'
        ? t('Every aligner here is handed the words Qwen3-ASR recognized instead of the reference transcript.')
        : t('Every aligner here is handed the reference transcript.'),
      t('Ranges and intervals come from 2,000 bootstrap draws of the test utterances.')],
      b.data.some(function (d) { return d.price_usd_per_hour; })
        ? [t('Prices are list prices per audio hour, pay as you go, read on 2026-10-27.')] : [],
      [t('Logos belong to their owners.')]);
    return [
      linked(parts.join(' ') + ' ', hrefs),
      b.csvHref ? el('a', { href: b.csvHref, download: '' }, t('Download the CSV')) : null,
      b.csvHref ? '.' : null
    ];
  }

  // The error column follows the cell a table is ranked by, so the caption does.
  function captionOf(b, cell) {
    var noisy = /_noisy$/.test(cell);
    var err = b.tier === 'phone'
      ? (noisy ? t('PER is the phone error rate in percent, the mean of the four noisy conditions.')
        : t('PER is the phone error rate in percent, on clean audio.'))
      : b.track === 1
      ? (noisy ? t('MAE is the mean absolute boundary error in ms, the mean of the four noisy conditions.')
        : t('MAE is the mean absolute boundary error in ms, on clean audio.'))
      : (noisy ? t('WER is the word error rate in percent, the mean of the four noisy conditions.')
        : t('WER is the word error rate in percent, on clean audio.'));
    return tf('{title}, on a scale of 0 to 1.', { title: boardTitle(b) }) + ' ' + err + (b.track === 1 && b.words !== 'recognized'
      ? ' ' + t('The Transcript switch ranks the aligners on the words Qwen3-ASR recognized.') : '');
  }

  // F1 Drop is defined in one place only, the line under a forced alignment
  // table, with the board's top row as its worked example, so the numbers
  // follow the data. A board on recognized words holds the reference score
  // as its mean plus F1 Drop.
  function dropLine(b) {
    var rec = b.words === 'recognized';
    var d = ranked(b.data, 'all', 'f1_mean4').filter(function (x) {
      return x.f1_drop != null && (rec || x.f1_mean4_recognized != null);
    })[0];
    if (!d) return '';
    return t('F1 Drop is how far an aligner\'s mean F1 falls when it is handed the words Qwen3-ASR recognized in place of the reference transcript.') + ' ' +
      tf('{label}, for example, scores {ref} on the reference transcript and {on} on recognized words, an F1 Drop of {drop}.', {
        label: d.label, ref: f3(rec ? d.f1_mean4 + d.f1_drop : d.f1_mean4),
        on: f3(rec ? d.f1_mean4 : d.f1_mean4_recognized), drop: f3(d.f1_drop) });
  }

  function ranked(data, view, cell) {
    return data
      .filter(function (d) { return view === 'all' || d.access === view; })
      .sort(function (a, b) { return (b[cell] - a[cell]) || a.label.localeCompare(b.label); });
  }

  function Leaderboard(root, boards, logoBase) {
    this.root = root;
    this.hrefs = root.hasAttribute('data-fabench-href') ? {
      fabench: root.getAttribute('data-fabench-href'),
      olign: root.getAttribute('data-olign-href')
    } : null;
    // A hard rule: a system that no longer takes part in FA-Bench, by its
    // organization in data-withdrawn or by an empty rank in the CSV, never
    // enters a chart, a rank or a count. The table lists its last results at
    // the bottom, unranked, and data-withdrawn-note says why.
    var gone = (root.getAttribute('data-withdrawn') || '').split(/[\s,]+/).filter(Boolean);
    var out = function (d) { return d.rank === '' || gone.indexOf(d.org) !== -1; };
    this.withdrawnNote = root.getAttribute('data-withdrawn-note');
    boards.forEach(function (b) {
      b.withdrawn = b.data.filter(out);
      b.data = b.data.filter(function (d) { return !out(d); });
    });
    this.boards = boards;
    this.view = 'all';
    this.cell = 'f1_mean4';
    this.words = 'reference';
    this.logoBase = logoBase;
    this.build();
    this.useBoard(this.boardFromHash() || boards[0], false);
    root.classList.add('is-ready');
    var self = this;
    // A link to #fa-phone in the text, or Back to such a link, shows that
    // board and brings the card into view.
    if (boards.length > 1) {
      window.addEventListener('hashchange', function () {
        var b = self.boardFromHash();
        if (!b) return;
        if (b !== self.board) self.useBoard(b, false);
        root.scrollIntoView({ block: 'start' });
      });
    }
  }

  Leaderboard.prototype.boardFromHash = function () {
    var key = (window.location.hash || '').slice(1);
    return key && this.boards.filter(function (b) { return b.key === key; })[0] || null;
  };

  Leaderboard.prototype.count = function (view) {
    return this.data.filter(function (d) { return view === 'all' || d.access === view; }).length;
  };

  Leaderboard.prototype.build = function () {
    var self = this, root = this.root, multi = this.boards.length > 1;
    root.textContent = '';

    this.titleEl = el(multi ? 'h2' : 'div', { class: 'fab-lb__title' });
    this.subEl = el('div', { class: 'fab-lb__sub' });

    // Only a choice the boards offer gets a switch. Each sits in one row at
    // the top left of the table, after a short visible label that also names
    // its group for a screen reader.
    this.switchButtons = [];
    this.switchEls = {};
    var switches = [[TASKS, 'track', t('Task')], [TIERS, 'tier', t('Boundaries')],
      [TRANSCRIPTS, 'words', t('Transcript')]].map(function (spec) {
      var opts = spec[0].filter(function (o) {
        return self.boards.some(function (b) { return b[spec[1]] === o[spec[1]]; });
      });
      if (opts.length < 2) return null;
      var id = 'fab-lb-switch-' + (++switchIds);
      var seg = el('div', { class: 'fab-lb__seg fab-lb__seg--switch' }, opts.map(function (o) {
        var btn = el('button', { type: 'button', 'aria-pressed': 'false' }, o.label);
        btn.addEventListener('click', function () { self.pick(spec[1], o[spec[1]]); });
        self.switchButtons.push({ btn: btn, key: spec[1], value: o[spec[1]] });
        return btn;
      }));
      return (self.switchEls[spec[1]] = el('div', { class: 'fab-lb__switch', role: 'group', 'aria-labelledby': id }, [
        el('span', { class: 'fab-lb__switch-label', id: id }, spec[2]),
        el('div', { class: 'fab-lb__switch-ctl' }, [seg].concat(opts.filter(function (o) { return o.info; }).map(infoIcon)))
      ]));
    }).filter(Boolean);

    this.viewButtons = VIEWS.map(function (v) {
      var b = el('button', { type: 'button', 'aria-pressed': String(v.key === self.view) }, [
        v.label, el('b', { class: 'fab-lb__count' })
      ]);
      b.addEventListener('click', function () { self.setView(v.key); self.render(); });
      return b;
    });
    this.select = el('select', { 'aria-label': 'Test cells to rank by' },
      CELLS.map(function (c) { return el('option', { value: c.key }, c.label); }));
    this.select.addEventListener('change', function () { self.cell = self.select.value; self.render(); });

    this.live = el('div', { class: 'fab-lb__sr', 'aria-live': 'polite' });
    this.notes = el('div', { class: 'fab-lb__notes' });
    this.source = el('div', { class: 'fab-lb__source' });

    // Every board's table is in the page from the start, the hidden ones
    // ranked by the mean, so a reader or a search engine finds every number
    // whichever board is showing.
    this.boards.forEach(function (b) {
      b.caption = el('caption');
      b.thead = el('thead');
      b.tbody = el('tbody');
      b.wrap = el('div', { class: 'fab-lb__table-wrap' }, el('table', { class: 'fab-lb__tbl' }, [
        b.caption, b.thead, b.tbody
      ]));
      // Outside the scrolling wrap, so on a phone it wraps to the card's width.
      b.drop = b.track === 1 ? el('p', { class: 'fab-lb__drop' }, dropLine(b)) : null;
      self.drawTable(b, ranked(b.data, 'all', 'f1_mean4'), 'f1_mean4', 'all');
    });
    var table = el('div', { class: 'fab-lb__table is-board' }, this.boards.map(function (b) { return [b.wrap, b.drop]; }));

    var controls = el('div', { class: 'fab-lb__controls' }, [
      el('div', { class: 'fab-lb__seg', role: 'group', 'aria-label': 'Systems to show' }, this.viewButtons),
      el('label', { class: 'fab-lb__cell' }, this.select)
    ]);
    var heading = el('div', { class: 'fab-lb__heading' }, [this.titleEl, this.subEl]);
    // The title and subtitle lead the card with nothing beside them. The
    // switches follow, then the systems filter and the menu, then the table.
    append(root, switches.length
      ? [el('div', { class: 'fab-lb__head' }, heading),
         el('div', { class: 'fab-lb__switches' }, switches),
         el('div', { class: 'fab-lb__toolbar' }, controls)]
      : el('div', { class: 'fab-lb__head' }, [heading, controls]));
    append(root, [table, this.live, this.notes, this.source]);
    keepNativeSelect(this.select);
  };

  Leaderboard.prototype.setView = function (key) {
    this.view = key;
    this.viewButtons.forEach(function (x, i) { x.setAttribute('aria-pressed', String(VIEWS[i].key === key)); });
  };

  // The board for the task, tier and transcript chosen, with one of them
  // changed to value, or the nearest the boards have: the task's board on
  // that tier, then the task's first.
  Leaderboard.prototype.pick = function (key, value) {
    var want = { track: this.track, tier: this.tier, words: this.words };
    want[key] = value;
    var fits = function (keys) {
      return function (x) { return keys.every(function (k) { return x[k] === want[k]; }); };
    };
    var b = this.boards.filter(fits(['track', 'tier', 'words']))[0] ||
      this.boards.filter(fits(['track', 'tier']))[0] || this.boards.filter(fits(['track']))[0];
    if (b && b !== this.board) this.useBoard(b, true);
  };

  // Whether a task's boards come on both transcripts, which only forced
  // alignment can, since an ASR has no transcript to be handed.
  Leaderboard.prototype.offersTranscripts = function (track) {
    var boards = this.boards;
    return TRANSCRIPTS.every(function (o) {
      return boards.some(function (b) { return b.track === track && b.words === o.words; });
    });
  };

  Leaderboard.prototype.useBoard = function (b, chosen) {
    var self = this;
    this.board = b;
    this.track = b.track;
    this.tier = b.tier;
    // The Transcript switch shows on a task that offers both transcripts
    // only, and the transcript chosen stays when the task or the tier changes.
    var offers = this.offersTranscripts(b.track);
    if (this.switchEls.words) this.switchEls.words.hidden = !offers;
    if (offers) this.words = b.words;
    this.data = b.data;
    this.boards.forEach(function (x) {
      x.wrap.hidden = x !== b;
      if (x.drop) x.drop.hidden = x !== b;
    });
    // A choice the task has no board for is greyed out and can't be pressed,
    // such as Phones on the ASR board, since no ASR returns phones.
    this.switchButtons.forEach(function (s) {
      s.btn.setAttribute('aria-pressed', String(b[s.key] === s.value));
      s.btn.disabled = s.key !== 'track' && !self.boards.some(function (x) {
        return x.track === b.track &&
          (s.key === 'tier' ? x.tier === s.value : x.tier === b.tier && x.words === s.value);
      });
    });
    this.titleEl.textContent = boardTitle(b);
    if (!this.count(this.view)) this.setView('all');
    // A view with no system on this board, such as commercial aligners, can't be chosen.
    this.viewButtons.forEach(function (btn, i) {
      var n = self.count(VIEWS[i].key);
      btn.lastChild.textContent = String(n);
      btn.disabled = !n;
    });
    this.source.textContent = '';
    append(this.source, sourceOf(b, this.hrefs));
    // replaceState, so Back leaves the page instead of stepping through boards.
    if (chosen && this.boards.length > 1 && window.history && history.replaceState) {
      history.replaceState(null, '', b === this.boards[0]
        ? window.location.pathname + window.location.search : '#' + b.key);
    }
    this.render();
  };

  Leaderboard.prototype.visible = function () {
    return ranked(this.data, this.view, this.cell);
  };

  Leaderboard.prototype.render = function () {
    var list = this.visible(), cell = this.cell;
    this.subEl.textContent = SUBTITLE[cell];
    this.drawTable(this.board, list, cell, this.view);
    this.drawNotes(list);
    var cellLabel = CELLS.filter(function (c) { return c.key === cell; })[0].label;
    this.live.textContent = tf('{title}. {n} systems, ranked by {cell}.', {
      title: boardTitle(this.board), n: list.length, cell: cellLabel.toLowerCase() });
  };

  // The sorted column draws each ranked row's value as a bar in its
  // organization's colour, on a scale to the best value shown, with its 95%
  // interval as a capped whisker. A withdrawn row keeps its numbers and its
  // interval as text, with no bar and no whisker, since no chart includes it.
  // Rank numbers the rows in the order shown.
  // Range, the bootstrap's span of ranks among every system ranked by the
  // mean, holds only for the full board ranked by the mean, so only that view
  // shows it. A view of one cell shows that cell's F1
  // and error rate alone, since the mean, F1 Drop and the other
  // cells' numbers would sit beside a ranking they don't follow.
  Leaderboard.prototype.drawTable = function (b, list, cell, view) {
    var self = this;
    var spans = view === 'all' && cell === 'f1_mean4';
    var top = niceMax(Math.max.apply(null, list.map(function (d) {
      return d[cell + '_hi'] != null ? d[cell + '_hi'] : d[cell];
    }).concat([0])));
    var err = b.tier === 'phone' ? ['per_pct_', 'PER'] : b.track === 1 ? ['mae_ms_', 'MAE'] : ['wer_pct_', 'WER'];
    var cells = [
      { key: 'f1_timit_clean', label: t('TIMIT clean'), num: true },
      { key: 'f1_timit_noisy', label: t('TIMIT noisy'), num: true },
      { key: 'f1_buckeye_clean', label: t('Buckeye clean'), num: true },
      { key: 'f1_buckeye_noisy', label: t('Buckeye noisy'), num: true }
    ];
    var cols = [{ key: 'rank', label: t('Rank'), num: true }]
      .concat(spans ? [{ key: 'range', label: t('Range'), num: true }] : [],
        [{ key: 'label', label: t('System') }]);
    if (cell !== 'f1_mean4') {
      cols = cols.concat(cells.filter(function (c) { return c.key === cell; }),
        [{ key: err[0] + cell.slice(3), label: err[1], num: true }]);
    } else {
      cols.push({ key: 'f1_mean4', label: t('Mean F1'), num: true });
      // The Transcript switch shows the aligners on recognized words, so a
      // forced alignment board keeps only F1 Drop, which ties the two together.
      if (b.track === 1) cols.push({ key: 'f1_drop', label: t('F1 Drop'), num: true });
      cols = cols.concat(cells, [
        { key: err[0] + 'timit_clean', label: err[1] + ' TIMIT', num: true },
        { key: err[0] + 'buckeye_clean', label: err[1] + ' Buckeye', num: true }]);
    }
    if (b.data.some(function (d) { return d.price_usd_per_hour; })) {
      cols.push({ key: 'price_usd_per_hour', label: t('$/audio\u00a0h'), num: true });
    }
    b.caption.textContent = captionOf(b, cell);
    // The F1 Drop line goes with its column, which a view of one cell drops.
    if (b.drop && this.board === b) b.drop.hidden = cell !== 'f1_mean4';
    b.thead.textContent = '';
    b.thead.appendChild(el('tr', null, cols.map(function (c) {
      return el('th', { class: (c.num ? 'num' : '') + (c.key === cell ? ' is-sorted' : ''), scope: 'col',
        'aria-sort': c.key === cell ? 'descending' : null }, c.label);
    })));
    b.tbody.textContent = '';
    list.forEach(function (d, i) {
      row(d, String(i + 1), !d.rank_lo ? String(i + 1)
        : d.rank_lo === d.rank_hi ? String(d.rank_lo) : d.rank_lo + '–' + d.rank_hi);
    });
    // The withdrawn systems' last results, after every ranked row.
    ranked(b.withdrawn || [], this.board === b ? this.view : 'all', cell)
      .forEach(function (d) { row(d, '–', '–', 'is-withdrawn'); });

    function pct(x) { return (100 * x / top).toFixed(2) + '%'; }
    // The value and its 95% interval as ± the larger side.
    function withCi(d) {
      var v = d[cell], lo = d[cell + '_lo'], hi = d[cell + '_hi'];
      return [f3(v), lo != null && hi != null ? el('small', null, ' ±' + Math.max(hi - v, v - lo).toFixed(3)) : null];
    }
    function bar(d) {
      var v = d[cell], lo = d[cell + '_lo'], hi = d[cell + '_hi'], ci = lo != null && hi != null;
      return el('div', { class: 'fab-lb__barcell' }, [
        el('span', { class: 'fab-lb__barnum' }, withCi(d)),
        el('span', { class: 'fab-lb__bartrack', 'aria-hidden': 'true' }, [
          el('i', { class: 'fab-lb__barfill', style: '--bar:' + orgOf(d).color +
            (orgOf(d).night ? ';--bar-night:' + orgOf(d).night : '') + ';width:' + pct(v) }),
          ci ? el('i', { class: 'fab-lb__ci', style: 'left:' + pct(lo) + ';width:' + pct(hi - lo) }) : null
        ])
      ]);
    }

    function row(d, rank, range, cls) {
      b.tbody.appendChild(el('tr', cls ? { class: cls } : null, cols.map(function (c) {
        var v;
        if (c.key === 'rank') v = rank;
        else if (c.key === 'range') v = range;
        else if (c.key === 'label') {
          v = el('div', { class: 'fab-lb__sys' }, [
            htmlLogo(orgOf(d), self.logoBase, 16),
            el('div', null, [
              el('div', { class: 'fab-lb__sys-name' }, linked(displayName(d), self.hrefs))
            ])
          ]);
        }
        else if (c.key === cell) v = cls ? withCi(d) : bar(d);
        else if (c.key === 'price_usd_per_hour') {
          v = d[c.key] ? '$' + d[c.key].toFixed(2) : d.access === 'open' ? el('span', { class: 'fab-lb__open' }, t('open')) : '–';
        }
        else if (/^(wer_|per_|mae_)/.test(c.key)) v = f1(d[c.key]);
        else v = f3(d[c.key]);
        return el('td', { class: (c.num ? 'num' : c.key === 'label' ? 'fab-lb__sys-cell' : '') +
          (c.key === cell ? ' is-sorted' : '') }, v);
      })));
    }
  };

  Leaderboard.prototype.drawNotes = function (list) {
    var seen = {}, lines = [], hrefs = this.hrefs;
    list.forEach(function (d) {
      if (d.note && !seen[d.note]) { seen[d.note] = 1; lines.push(el('div', null, linked(d.flag + ' ' + t(d.note), hrefs))); }
    });
    if (this.board.note) lines.push(el('div', null, linked(this.board.note, hrefs)));
    // The version each row ran, in the notes rather than under its name.
    var versions = list.concat(ranked(this.board.withdrawn, this.view, this.cell))
      .filter(function (d) { return d.version; })
      .map(function (d) { return tf('{label} is {version}.', { label: d.label, version: d.version }); }).join(' ');
    if (versions) lines.push(el('div', null, linked(versions, hrefs)));
    if (this.board.withdrawn.length && this.withdrawnNote) {
      lines.push(el('div', null, linked(this.withdrawnNote, hrefs)));
    }
    this.notes.textContent = '';
    append(this.notes, lines);
    this.notes.hidden = !lines.length;
  };

  // data-logos="" is a real setting, for a page that carries its logos as
  // data URIs, so only a missing attribute falls back to logos/ by the CSV.
  function logoBaseOf(root) {
    var logos = root.getAttribute('data-logos');
    if (logos !== null) return logos;
    var src = root.getAttribute('data-src') || '';
    return src.replace(/[?#].*$/, '').replace(/[^\/]*$/, '') + 'logos/';
  }

  // The leaderboard page inlines each board's CSV in a <script
  // type="text/csv" data-board>, beside the plain tables it serves for
  // readers without JavaScript. A post embeds one board by data-src, or by
  // data-inline on a page opened from disk.
  function load(root) {
    var inlined = root.querySelectorAll('script[type="text/csv"][data-board]');
    if (inlined.length) {
      try {
        var boards = Array.prototype.map.call(inlined, function (s) {
          return {
            key: s.getAttribute('data-board'),
            track: s.getAttribute('data-track') === '1' ? 1 : 2,
            tier: s.getAttribute('data-tier') === 'phone' ? 'phone' : 'word',
            words: s.getAttribute('data-words') === 'recognized' ? 'recognized' : 'reference',
            data: parseCSV(s.textContent.replace(/^\s+/, '')),
            csvHref: s.getAttribute('data-href'),
            note: s.getAttribute('data-note')
          };
        });
        new Leaderboard(root, boards, logoBaseOf(root));
      } catch (e) {
        root.classList.remove('is-js');   // the plain tables stay in view
      }
      return;
    }
    var inlineId = root.getAttribute('data-inline');
    var inline = inlineId && document.getElementById(inlineId);
    var got = inline
      ? Promise.resolve(inline.textContent.replace(/^\s+/, ''))
      : fetch(root.getAttribute('data-src')).then(function (r) {
          if (!r.ok) throw new Error('HTTP ' + r.status);
          return r.text();
        });
    got.then(function (text) {
      // data-track="1" draws forced alignment on the reference transcript,
      // which has no WER. Anything else is Track 2, ASR with timestamps.
      // data-tier="phone" scores phone boundaries and reports PER beside them.
      // data-words="recognized" hands the aligners recognized words instead.
      new Leaderboard(root, [{
        key: null,
        track: root.getAttribute('data-track') === '1' ? 1 : 2,
        tier: root.getAttribute('data-tier') === 'phone' ? 'phone' : 'word',
        words: root.getAttribute('data-words') === 'recognized' ? 'recognized' : 'reference',
        data: parseCSV(text),
        csvHref: root.getAttribute('data-csv-href') || root.getAttribute('data-src')
      }], logoBaseOf(root));
    }).catch(function () {
      root.textContent = '';
      var href = root.getAttribute('data-csv-href') || root.getAttribute('data-src');
      append(root, el('div', { class: 'fab-lb__source' }, [
        t('The chart could not load its data.') + ' ',
        href ? el('a', { href: href }, t('Open the CSV')) : null,
        href ? ' ' + t('to read the numbers.') : null
      ]));
    });
  }

  function start() {
    Array.prototype.forEach.call(document.querySelectorAll('[data-fab-leaderboard]'), load);
  }
  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', start);
  else start();
})();