/* The static tables beside the browser: the named features and their published
   evidence, and the annotation sources. All of it is read out of
   data/sae/index.json.

   Captions are authored in sae-features.html as the first child of each table,
   so filling a table keeps the caption that is already there. */
(async function () {
  const named = document.getElementById('named-table');
  const prov = document.getElementById('feat-prov');
  const sources = document.getElementById('sources-body');
  if (!named) return;

  const esc = value => String(value ?? '').replace(/[&<>"']/g, ch =>
    ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[ch]));

  /* A caption has to stay the table's first child, so it is lifted out and put
     back ahead of the generated head and body. */
  const fill = (table, html) => {
    const caption = table.querySelector('caption');
    table.innerHTML = (caption ? caption.outerHTML : '') + html;
  };

  /* The report's own vocabulary for what a feature resolves. */
  const LEVEL = {
    site: 'base-level', range: 'region-level', motif: 'motif', pattern: 'pattern',
  };

  /* Reading order: the detectors the report validates against annotation, then
     the cis-element motifs and repeat patterns, then the two candidates it
     rejects. Anything the index adds later lands in a fourth group rather than
     disappearing. */
  const GROUPS = [
    { title: 'Validated against annotation', ids: [4131, 2634, 586, 7708, 3930, 2618, 1200] },
    { title: 'Cis-element motifs and repeat patterns', ids: [4567, 145, 5804, 1474, 5349] },
    { title: 'Other named features', ids: [] },
  ];
  /* Best detector of its class in all four annotated genomes. */
  const BEST_IN_CLASS = new Set([4131, 586, 7708]);

  /* MCC gets its own numeric column, so it comes off the front of the evidence
     string; the validation-selected threshold is stated once in the caption. */
  function splitEvidence(text) {
    const raw = String(text ?? '').trim();
    const hit = /^MCC\s+([0-9.]+)/.exec(raw);
    return { mcc: hit ? hit[1] : '' };
  }

  try {
    const index = await (await fetch('data/sae/index.json')).json();
    const s = index.sae;

    prov.textContent = `${s.model_name}, layer ${s.layer}, ${s.d_sae} features, k = ${s.k}`;
    prov.title = `${s.sae_id} · sha256 ${s.sae_sha256.slice(0, 16)}… · ${s.threshold_mode} threshold ${s.sae_threshold.toFixed(4)}`;

    const features = new Map(Object.entries(index.curated_features)
      .map(([id, f]) => [Number(id), f]));
    const grouped = new Set(GROUPS.flatMap(g => g.ids));
    GROUPS[GROUPS.length - 1].ids = [...features.keys()].filter(id => !grouped.has(id));

    const row = id => {
      const f = features.get(id);
      const { mcc } = splitEvidence(f.evidence);
      const label = String(f.label ?? '').replace(/\s*\(rejected\)$/, '');
      return `<tr${BEST_IN_CLASS.has(id) ? ' class="ours"' : ''}>` +
        `<td class="num">f${id}</td><td>${esc(label)}</td>` +
        `<td>${esc(LEVEL[f.kind] || f.kind)}</td>` +
        // A dash, not a blank: an empty cell reads as an oversight. The title
        // still says which kind of absence this is.
        `<td class="n">${mcc ? esc(mcc)
            : '<span class="na" title="the report publishes no MCC for this feature">&ndash;</span>'}</td>` +
        '</tr>';
    };

    fill(named,
      '<thead><tr><th>Feature</th><th>Named for</th><th>Level</th>' +
      '<th class="n">MCC</th></tr></thead>' +
      GROUPS.filter(g => g.ids.length).map(g =>
        `<tbody><tr><th colspan="4" scope="colgroup">${g.title}</th></tr>` +
        g.ids.filter(id => features.has(id)).map(row).join('') + '</tbody>').join(''));


    if (sources) {
      if (index.sources) renderSources(sources, index.sources);
      else renderPendingSources(sources, index.windows);
    }

  } catch (error) {
    fill(named, '<tbody><tr><td>The feature table could not be loaded.</td></tr></tbody>');
    if (window.console) console.error(error);
  }


  /* The verified releases, URLs, citations and licences, once index.sources
     carries them. */
  function renderSources(host, src) {
    // Two registers per species: the annotation the per-base tracks were built from,
    // and the most current annotation on the SAME assembly. A newer assembly cannot be
    // overlaid on these coordinates, so it is named separately rather than used.
    const badge = r => r.currency === 'upgraded'
      ? '<span class="src-badge up">newer release applied</span>'
      : '<span class="src-badge cur">already current</span>';

    let html = `<p>${esc(src.intro)}</p>`;

    html += '<div class="tablewrap"><table class="src-table">' +
      '<caption>' + esc(src.caption) + '</caption>' +
      '<thead><tr><th>Species</th><th>Assembly</th><th>Tracks built from</th>' +
      '<th>Gene models shown</th><th>Status</th></tr></thead><tbody>';
    for (const r of src.species) {
      html += '<tr>' +
        `<td><em>${esc(r.binomial)}</em></td>` +
        `<td><span class="num">${esc(r.assembly)}</span><br><span class="src-acc num">${esc(r.assembly_accession)}</span></td>` +
        `<td>${esc(r.annotation_build)}</td>` +
        `<td>${r.url ? `<a href="${esc(r.url)}">${esc(r.annotation_current)}</a>` : esc(r.annotation_current)}` +
          `${r.released ? `<br><span class="src-acc num">released ${esc(r.released)}</span>` : ''}</td>` +
        `<td>${badge(r)}</td>` +
      '</tr>';
    }
    html += '</tbody></table></div>';

    html += '<details class="src-details"><summary>Per-species detail, licences and what supersedes each assembly</summary>';
    for (const r of src.species) {
      html += `<div class="src-block"><p class="label">${esc(r.binomial)}</p>`;
      if (r.currency_note) html += `<p class="small">${esc(r.currency_note)}</p>`;
      if (r.superseded_by) html += `<p class="small"><strong>Superseded by:</strong> ${esc(r.superseded_by)}</p>`;
      if (r.licence) html += `<p class="small"><strong>Licence:</strong> ${esc(r.licence)}</p>`;
      if (r.citation) html += `<p class="small">${esc(r.citation)}</p>`;
      html += '</div>';
    }
    html += '</details>';

    if (src.usage_registers) html += renderUsageRegisters(src.usage_registers);

    if (src.notes && src.notes.length) {
      html += '<details class="src-details"><summary>Notes on assembly currency and coordinates</summary><ul>' +
        src.notes.map(n => `<li>${esc(n)}</li>`).join('') + '</ul></details>';
    }
    if (src.citations && src.citations.length) {
      html += '<details class="src-details"><summary>Citations</summary><ul class="small">' +
        src.citations.map(c => `<li>${esc(c)}</li>`).join('') + '</ul></details>';
    }
    host.innerHTML = html;
  }

  /* The registers that answer whether a site is used, as opposed to whether an
     annotation carries it. They are a separate table because they are a separate
     question, and because each one covers only Arabidopsis: the verdict a window
     shows is only ever as wide as the register behind it. */
  function renderUsageRegisters(reg) {
    let html = '<h3 id="usage-registers">Usage registers</h3>' +
      `<p>${esc(reg.intro)}</p>`;

    if (reg.verdicts && reg.verdicts.length) {
      html += '<dl class="usage-key">' + reg.verdicts.map(v =>
        `<dt data-verdict="${esc(v.key)}">${esc(v.label)}</dt><dd>${esc(v.gloss)}</dd>`
      ).join('') + '</dl>';
    }

    html += '<div class="tablewrap"><table class="src-table usage-table">' +
      `<caption>${esc(reg.caption)}</caption>` +
      '<thead><tr><th>Register</th><th>Answers</th><th>Version</th><th>Covers</th>' +
      '</tr></thead><tbody>';
    for (const r of reg.rows) {
      html += '<tr>' +
        `<td>${r.url ? `<a href="${esc(r.url)}">${esc(r.name)}</a>` : esc(r.name)}</td>` +
        `<td>${esc(r.role)}</td>` +
        `<td><span class="num">${esc(r.version)}</span></td>` +
        `<td>${esc(r.scope)}</td>` +
      '</tr>';
    }
    html += '</tbody></table></div>';

    html += '<details class="src-details"><summary>What each register contains, and what it ' +
      'cannot answer</summary>';
    for (const r of reg.rows) {
      html += `<div class="src-block"><p class="label">${esc(r.name)}</p>` +
        `<p class="small">${esc(r.content)}</p>` +
        (r.caveat ? `<p class="small"><strong>Cannot answer:</strong> ${esc(r.caveat)}</p>` : '') +
        (r.citation ? `<p class="small">${esc(r.citation)}</p>` : '') +
      '</div>';
    }
    html += '</details>';

    if (reg.note) html += `<p class="note">${esc(reg.note)}</p>`;
    return html;
  }

  /* Until then: the assemblies the windows themselves name, and nothing more. */
  function renderPendingSources(host, windows) {
    const rows = new Map();
    for (const w of windows) {
      const key = `${w.species_binomial}|${w.assembly}`;
      rows.set(key, (rows.get(key) || 0) + 1);
    }
    const body = [...rows.entries()]
      .sort((a, b) => a[0].localeCompare(b[0]))
      .map(([key, n]) => {
        const [binomial, assembly] = key.split('|');
        return `<tr><td><em>${esc(binomial)}</em></td><td class="num">${esc(assembly)}</td>` +
          `<td class="n">${n}</td></tr>`;
      }).join('');
    host.innerHTML =
      '<div class="tablewrap"><table><caption>The four annotated genomes, with the windows ' +
      'each contributes. The <em>AT1G65170</em> window is cut from TAIR10 and carries the ' +
      'Araport11 gene model the report\'s figure draws.</caption>' +
      '<thead><tr><th>Species</th><th>Assembly</th><th class="n">Windows</th></tr></thead>' +
      `<tbody>${body}</tbody></table></div>` +
      '<p class="note">The annotation release, download URL, citation and licence behind each ' +
      'of these assemblies are being verified and will be listed here.</p>';
  }
})();