Add interactive ABI5 genome browser with measured variant scores

README.md

@@ -42,6 +42,10 @@ Static landing page for the Botanic1 models (Living Models), linking to the mode
 - `leaderboard.html`: the S_bal^test leaderboard, the nine-family scorecard and the
   size and training-token views, filterable and sortable.
 - `causal-variants.html`: the 545-study causal-variant prioritisation benchmark, with
+  a JavaScript/SVG genome browser for the ABI5 locus. Gene models, SNP positions,
+  and measured Botanic1-XL absolute LLR scores share a coordinate axis. Hover, tap,
+  keyboard selection, zoom, and pan are handled by `assets/causal-browser.js`;
+  `assets/causal.css` styles the browser.
   the recall curve recomputed client-side from the full cohort's per-study ranks and
   a fixed preview of 20 studies selected across species. Sorting and searching stay
   within those 20 examples; the page notes that the full study set will be published later.
@@ -68,8 +72,8 @@ adding a page.
 
 ## Data
 
-Everything numeric under `data/` is generated from the report repository's committed
-tables by `scripts/build_data.py`, which imports the manuscript's own
+The benchmark summaries under `data/` are generated from the report repository's
+committed tables by `scripts/build_data.py`, which imports the manuscript's own
 `figures/scripts/gwas_causal_common.py` so the cohort and the tie-aware recall cannot
 diverge from the article. Rerun it from the report repository root after any change
 to `figures/data/`:
@@ -81,6 +85,15 @@ python3 hf_space/scripts/build_data.py
 The script prints the checks it runs (the S_bal of the four sizes, the cohort size and
 the headline recalls) so a mismatch with the manuscript is visible at build time.
 
+`data/abi5-locus.json` is a separate extract of the original Botanic1-XL 4,096 bp
+scoring output for ABI5: 5,948 SNPs in a 100 kbp locus. Scores are the absolute
+values of the source `score` column. The validated SNP at TAIR10 Chr2:15,205,931
+G>C has |LLR| 7.703125 and rank 23, matching `causal.json`. Ranks and ties always
+refer to the full locus, including when the view is zoomed. The file also contains
+38 Araport11 canonical gene models obtained from Ensembl REST, together with the
+annotation URL, study reference, and source scoring-file SHA-256. Gene annotations
+are displayed for biological context and are not inputs to the model score.
+
 Figure PNGs under `assets/figures/` are the report's committed renders.
 `data_pipeline.svg` is a `pdftocairo -svg` conversion of the report's data-pipeline PDF.
 `agentic_orchestration.svg` retains Figure S1's layout, nodes, queues, connections and

assets/causal-browser.js

@@ -0,0 +1,196 @@
+/* A single measured locus, drawn in genomic coordinates. No raster assets.
+   Ranks use descending |LLR| over the full 100 kbp locus, even while zoomed. */
+(async function () {
+  const host = document.getElementById('locus-plot');
+  if (!host) return;
+  const readout = document.getElementById('locus-readout');
+  const region = document.getElementById('locus-region');
+  const buttons = ['locus-in', 'locus-out', 'locus-full', 'locus-causal'].map(id => document.getElementById(id));
+  buttons.forEach(b => { b.disabled = true; });
+  const esc = s => String(s).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
+  const fmt = n => Math.round(n).toLocaleString('en-US');
+  try {
+    const response = await fetch('data/abi5-locus.json');
+    if (!response.ok) throw new Error('Locus data unavailable');
+    const data = await response.json();
+    const variants = data.variants;
+    const causalIndex = variants.findIndex(v => v.causal);
+    const causal = variants[causalIndex];
+    const sorted = variants.map(v => v.abs_llr).sort((a, b) => b - a);
+    const cutoff = sorted[Math.floor(variants.length * .01) - 1];
+    const ymax = Math.ceil(sorted[0] / 2) * 2;
+    let start = causal.pos - 10000, end = causal.pos + 10000;
+    let selected = causalIndex, inspected = causalIndex, shown = [], W = 960;
+    let L = 96, R = 22;
+    const H = 365, scoreTop = 207, scoreBottom = 318, snpY = 171;
+    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    svg.setAttribute('role', 'group'); svg.setAttribute('tabindex', '0');
+    svg.setAttribute('aria-label', 'ABI5 genome browser. Gene models, SNP positions and absolute LLR scores.');
+    svg.setAttribute('aria-describedby', 'locus-help');
+    host.append(svg);
+    const x = pos => L + (pos - start) / (end - start) * (W - L - R);
+    const y = score => scoreBottom - score / ymax * (scoreBottom - scoreTop);
+    const path = (d, cls) => `<path class="${cls}" d="${d}"/>`;
+    const text = (px, py, s, cls = '', anchor = 'start') => `<text x="${px}" y="${py}" class="${cls}" text-anchor="${anchor}">${esc(s)}</text>`;
+    const diamond = (px, py, r = 5) => `<path class="causal-dot" d="M${px} ${py-r}l${r} ${r}l-${r} ${r}l-${r} -${r}Z"/>`;
+    function setView(a, b) {
+      const width = Math.max(1000, Math.min(data.end - data.start, b - a));
+      start = Math.max(data.start, Math.min(data.end - width, a)); end = start + width;
+      render();
+    }
+    function zoom(factor) {
+      const centre = variants[selected].pos >= start && variants[selected].pos <= end ? variants[selected].pos : (start + end) / 2;
+      const width = Math.max(1000, Math.min(data.end - data.start, (end - start) * factor));
+      setView(centre - width / 2, centre + width / 2);
+    }
+    function show(index, announce = false) {
+      inspected = index;
+      const v = variants[index];
+      const group = svg.querySelector('#locus-focus');
+      const shade = svg.querySelector('#locus-context');
+      if (!group || !shade) return;
+      const left = Math.max(L, x(v.pos - data.context_bp / 2));
+      const right = Math.min(W - R, x(v.pos + data.context_bp / 2));
+      shade.setAttribute('x', left); shade.setAttribute('width', Math.max(0, right - left));
+      group.innerHTML = v.pos >= start && v.pos <= end ?
+        path(`M${x(v.pos)} 42V325`, 'focus-line') +
+        `<circle class="${v.causal ? 'causal-dot' : 'focus-dot'}" cx="${x(v.pos)}" cy="${y(v.abs_llr)}" r="4"/>` +
+        (v.causal ? diamond(x(v.pos), snpY, 5) : `<circle class="focus-dot" cx="${x(v.pos)}" cy="${snpY}" r="3.5"/>`) : '';
+      readout.setAttribute('aria-live', announce ? 'polite' : 'off');
+      readout.innerHTML = `<span class="${v.causal ? 'causal-tag' : 'variant-tag'}">${v.causal ? 'Validated causal SNP' : 'Population SNP'}</span>` +
+        `<strong>Chr${esc(data.chrom)}:${fmt(v.pos)} ${esc(v.ref)} → ${esc(v.alt)}</strong>` +
+        `<span>|LLR| <strong>${v.abs_llr.toFixed(3)}</strong></span>` +
+        `<span>Rank <strong>${fmt(v.rank)}${v.ties > 1 ? '–' + fmt(v.rank + v.ties - 1) : ''} / ${fmt(variants.length)}</strong>${v.ties > 1 ? ' (tied)' : ''}</span>`;
+    }
+    function render() {
+      W = host.clientWidth;
+      L = W < 500 ? 72 : 96; R = W < 500 ? 16 : 22;
+      svg.setAttribute('viewBox', `0 0 ${W} ${H}`);
+      svg.setAttribute('data-start', Math.round(start)); svg.setAttribute('data-end', Math.round(end));
+      shown = variants.map((v, index) => ({v, index})).filter(({v}) => v.pos >= start && v.pos <= end);
+      region.textContent = `Chr${data.chrom}:${fmt(start)}–${fmt(end)} · ${((end-start)/1000).toLocaleString('en-US',{maximumFractionDigits:1})} kbp · ${fmt(shown.length)} SNPs in view`;
+      buttons[0].disabled = end - start <= 1000;
+      buttons[1].disabled = end - start >= data.end - data.start;
+      buttons[2].disabled = end - start >= data.end - data.start;
+      buttons[3].disabled = false;
+      let out = `<title>ABI5 locus: ${data.model}, ${fmt(variants.length)} measured SNP scores</title>`;
+      out += `<defs><clipPath id="locus-clip"><rect x="${L}" y="40" width="${W-L-R}" height="286"/></clipPath></defs>`;
+      out += text(12, 32, 'Chr ' + data.chrom, 'track-name');
+      out += text(12, 80, 'Genes', 'track-name') + text(12, 97, 'Araport11');
+      out += text(12, snpY + 4, 'SNPs', 'track-name');
+      out += text(12, 226, '|LLR|', 'track-name');
+      out += `<g clip-path="url(#locus-clip)"><rect id="locus-context" class="context-window" y="42" height="283"/></g>`;
+      const targetStep = (end-start) / Math.max(1, Math.floor((W-L-R)/120));
+      const step = [250,500,1000,2500,5000,10000,20000,50000,100000].find(s => s >= targetStep);
+      for (let pos = Math.ceil(start / step) * step; pos <= end; pos += step) {
+        const anchor = x(pos)<L+30 ? 'start' : x(pos)>W-R-30 ? 'end' : 'middle';
+        out += path(`M${x(pos)} 37V325`, 'grid') + text(x(pos), 30, fmt(pos), '', anchor);
+      }
+      // Pack canonical transcripts in three lanes; labels are shown only when they fit.
+      const lanes = [L-1, L-1, L-1];
+      const genes = data.genes.filter(g => g.end >= start && g.start <= end);
+      let geneShapes = '';
+      for (const g of genes) {
+        const gx = Math.max(L, x(g.start)), ge = Math.min(W-R, x(g.end));
+        const lane = lanes.indexOf(Math.min(...lanes)); const gy = 75 + lane * 26;
+        const isCausal = g.name === 'ABI5';
+        lanes[lane] = Math.max(ge + 9, gx + g.name.length * 6 + 8);
+        geneShapes += `<g class="gene${isCausal ? ' causal-gene' : ''}"><title>${esc(g.name)} · ${esc(g.transcript)} · ${g.strand > 0 ? '+' : '−'} strand</title>`;
+        geneShapes += path(`M${gx} ${gy}H${ge}`, 'gene-line');
+        for (let px = gx+12; px < ge-4; px += 18) {
+          const direction = g.strand > 0 ? 3 : -3;
+          geneShapes += path(`M${px-direction} ${gy-2.5}l${direction} 2.5l${-direction} 2.5`, 'gene-line');
+        }
+        for (const [a,b] of g.exons) if (b >= start && a <= end) {
+          const ex = Math.max(L,x(a)), ew = Math.max(1,Math.min(W-R,x(b))-ex);
+          geneShapes += `<rect class="exon" x="${ex}" y="${gy-4}" width="${ew}" height="8"/>`;
+        }
+        // Reserve the causal gene's label even in the full-locus overview.
+        const labelWidth = g.name.length*6;
+        const next = genes.find(n => n.start > g.start && x(n.start) < gx + labelWidth + 8);
+        if (isCausal || (!next && gx + labelWidth < W-R)) geneShapes += text(gx,gy-9,g.name,'gene-label' + (isCausal ? ' causal-gene' : ''));
+        geneShapes += '</g>';
+      }
+      out += `<g clip-path="url(#locus-clip)">${geneShapes}</g>`;
+      for (let score=0; score<=ymax; score+=4) out += path(`M${L} ${y(score)}H${W-R}`,'grid')+text(L-8,y(score)+3,score,'','end');
+      out += text(W-R,195,'◆ validated causal SNP','','end');
+      out += `<g clip-path="url(#locus-clip)">`;
+      out += path(shown.map(({v})=>`M${x(v.pos).toFixed(2)} ${snpY-5}v10`).join(''),'snp-rug');
+      out += path(shown.map(({v})=>`M${x(v.pos).toFixed(2)} ${scoreBottom}V${y(v.abs_llr).toFixed(2)}`).join(''),'score-stems');
+      out += path(`M${L} ${y(cutoff)}H${W-R}`,'threshold');
+      out += text(W-R-4,y(cutoff)-5,'top 1% cutoff','','end');
+      if (causal.pos >= start && causal.pos <= end) {
+        out += path(`M${x(causal.pos)} ${scoreBottom}V${y(causal.abs_llr)}`,'causal-stem');
+        out += diamond(x(causal.pos),y(causal.abs_llr),5) + diamond(x(causal.pos),snpY,5);
+      }
+      out += '<g id="locus-focus"></g></g>';
+      out += `<rect x="${L}" y="342" width="12" height="9" fill="var(--sage)" stroke="var(--rule-2)"/>`;
+      out += text(L+19,350,W<500 ? '4,096 bp context' : 'shaded: 4,096 bp scoring window');
+      svg.innerHTML = out;
+      show(inspected);
+    }
+    function eventPoint(ev) {
+      const point = svg.createSVGPoint(); point.x = ev.clientX; point.y = ev.clientY;
+      return point.matrixTransform(svg.getScreenCTM().inverse());
+    }
+    function nearest(ev) {
+      const point = eventPoint(ev);
+      if (point.x < L || point.x > W-R || point.y < 147 || point.y > 325) return null;
+      let best = null, distance = Infinity;
+      for (const {v,index} of shown) {
+        const dx = x(v.pos)-point.x;
+        const dy = point.y > 195 ? (y(v.abs_llr)-point.y) * .4 : 0;
+        const d = dx*dx+dy*dy;
+        if (d < distance) { distance = d; best = index; }
+      }
+      return best;
+    }
+    let drag = null;
+    svg.addEventListener('pointerdown', ev => {
+      if (ev.button !== 0) return;
+      const point = eventPoint(ev);
+      if (point.x < L || point.x > W-R) return;
+      drag = {px:ev.clientX,start,end,moved:false};
+    });
+    svg.addEventListener('pointermove', ev => {
+      if (drag) {
+        const delta = ev.clientX-drag.px;
+        if (Math.abs(delta)>5) drag.moved = true;
+        if (drag.moved) {
+          svg.setPointerCapture(ev.pointerId);
+          const shift = -delta / svg.getBoundingClientRect().width * W / (W-L-R) * (drag.end-drag.start);
+          setView(drag.start+shift,drag.end+shift); return;
+        }
+      }
+      const index = nearest(ev); if (index !== null && index !== inspected) show(index);
+    });
+    svg.addEventListener('pointerup', ev => {
+      if (drag && !drag.moved) { const index=nearest(ev); if(index!==null) { selected=index;show(index,true); } }
+      drag=null; if(svg.hasPointerCapture(ev.pointerId)) svg.releasePointerCapture(ev.pointerId);
+    });
+    svg.addEventListener('pointercancel', () => {drag=null;show(selected);});
+    svg.addEventListener('pointerleave', () => { if (!drag) show(selected); });
+    svg.addEventListener('keydown', ev => {
+      if (ev.key === '+' || ev.key === '=') { ev.preventDefault();zoom(.5);return; }
+      if (ev.key === '-') { ev.preventDefault();zoom(2);return; }
+      if (ev.key === 'Home') { ev.preventDefault();selected=causalIndex;inspected=selected;setView(causal.pos-10000,causal.pos+10000);show(selected,true);return; }
+      if (!['ArrowLeft','ArrowRight'].includes(ev.key)) return;
+      ev.preventDefault();selected=Math.max(0,Math.min(variants.length-1,selected+(ev.key==='ArrowLeft'?-1:1)));
+      inspected=selected;
+      const pos=variants[selected].pos, width=end-start;
+      if (pos < start || pos > end) setView(pos-width/2,pos+width/2);
+      show(selected,true);
+    });
+    buttons[0].addEventListener('click',()=>zoom(.5));
+    buttons[1].addEventListener('click',()=>zoom(2));
+    buttons[2].addEventListener('click',()=>setView(data.start,data.end));
+    buttons[3].addEventListener('click',()=>{selected=causalIndex;inspected=selected;setView(causal.pos-10000,causal.pos+10000);show(selected,true);});
+    let resize;
+    new ResizeObserver(()=>{cancelAnimationFrame(resize);resize=requestAnimationFrame(render);}).observe(host);
+    render();
+  } catch (error) {
+    region.textContent = 'ABI5 locus';
+    readout.textContent = 'The locus could not be loaded. Reload the page to try again.';
+    host.innerHTML = '<p class="locus-fallback">The recall curves below summarise the full benchmark.</p>';
+  }
+})();

assets/causal.css

@@ -0,0 +1,45 @@
+/* Live locus tracks. Coordinates and scores come from data/abi5-locus.json. */
+.locus-browser { margin: 30px 0; border: 1px solid var(--rule-2); border-radius: 10px; background: var(--card); overflow: hidden; font-family: var(--sans); }
+.locus-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 18px 22px; border-bottom: 1px solid var(--rule); background: var(--sage); }
+.locus-browser h2 { margin: 0 0 5px; font-size: 19px; }
+.locus-heading p { margin: 0; color: var(--ink-2); font-size: 12px; }
+.locus-tools { display: flex; gap: 6px; flex-wrap: wrap; }
+.locus-tools button { font: 600 12px var(--sans); color: var(--ink-2); background: var(--card); border: 1px solid var(--rule-2); border-radius: 5px; padding: 7px 10px; cursor: pointer; min-height: 34px; }
+.locus-tools button:first-child, .locus-tools button:nth-child(2) { font-size: 17px; min-width: 34px; padding: 3px 9px; }
+.locus-tools button:hover { background: var(--lime-2); color: var(--ink); }
+.locus-tools button:disabled { opacity: .4; cursor: default; }
+.locus-browser .locus-region { margin: 0; padding: 12px 22px 0; font: 11px var(--mono); color: var(--ink-2); max-width: none; }
+.locus-scroll { overflow-x: auto; padding: 0 12px; }
+#locus-plot { min-width: 0; }
+#locus-plot svg { display: block; width: 100%; height: auto; touch-action: pan-y; cursor: crosshair; }
+#locus-plot text { fill: var(--ink-2); font: 10.5px var(--mono); }
+#locus-plot .track-name { fill: var(--ink); font: 600 11px var(--sans); }
+#locus-plot .gene-label { font: italic 10px var(--sans); }
+#locus-plot .gene-label.causal-gene { font-weight: 800; fill: var(--ink); }
+#locus-plot .grid { stroke: var(--rule); stroke-width: .7; }
+#locus-plot .gene-line { stroke: var(--tree-2); stroke-width: 1; fill: none; }
+#locus-plot .exon { fill: var(--tree-2); }
+#locus-plot .gene.causal-gene .exon { fill: var(--accent); }
+#locus-plot .gene.causal-gene .gene-line { stroke: var(--accent); }
+#locus-plot .score-stems { fill: none; stroke: var(--tree-2); stroke-width: 1; opacity: .85; }
+#locus-plot .snp-rug { fill: none; stroke: var(--tree-2); stroke-width: 1; opacity: .6; }
+#locus-plot .causal-stem { stroke: var(--ink); stroke-width: 2; }
+#locus-plot .causal-dot { fill: var(--lime); stroke: var(--ink); stroke-width: 1.3; }
+#locus-plot .context-window { fill: color-mix(in srgb, var(--ours-light) 13%, var(--card)); }
+#locus-plot .focus-line { stroke: var(--ink-3); stroke-dasharray: 3 3; stroke-width: 1; }
+#locus-plot .focus-dot { fill: var(--card); stroke: var(--ink); stroke-width: 1.8; }
+#locus-plot .threshold { fill: none; stroke: var(--ink-3); stroke-dasharray: 4 4; stroke-width: 1; }
+.locus-readout { display: flex; align-items: center; gap: 7px 20px; flex-wrap: wrap; min-height: 64px; padding: 13px 22px; border-top: 1px solid var(--rule); background: var(--paper-2); font: 12px var(--mono); color: var(--ink-2); }
+.locus-readout strong { color: var(--ink); font-weight: 500; }
+.locus-readout .causal-tag { display: inline-flex; align-items: center; gap: 7px; font: 600 12px var(--sans); color: var(--ink); }
+.locus-readout .causal-tag::before { content: ''; width: 8px; height: 8px; transform: rotate(45deg); background: var(--lime); border: 1px solid var(--ink); }
+.locus-readout .variant-tag { font: 12px var(--sans); }
+.locus-browser figcaption { margin: 0; padding: 11px 22px; max-width: none; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 7px 24px; font-size: 11px; border-top: 1px solid var(--rule); }
+.locus-browser figcaption a { color: var(--ink-2); }
+.locus-browser .locus-fallback { margin: 15px 22px; font-size: 14px; }
+@media (max-width: 640px) {
+  .locus-heading { padding: 16px; gap: 12px; }
+  .locus-browser .locus-region { padding: 12px 16px 0; font-size: 10px; }
+  .locus-readout, .locus-browser figcaption { padding-left: 16px; padding-right: 16px; }
+  .locus-tools button { min-height: 40px; }
+}

assets/site.css

@@ -100,6 +100,16 @@ em, i { font-style: italic; }
 .topbar nav a:hover { color: var(--ink); }
 .topbar nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--lime); }
 .topbar nav a.ext::after { content: "↗"; font-size: 0.8em; margin-left: 4px; color: var(--ink-3); }
+@media (max-width: 1100px) {
+  .topbar .inner { flex-wrap: wrap; gap: 10px; }
+  .topbar nav { gap: 8px 20px; }
+}
+@media (max-width: 640px) {
+  .topbar .inner { padding: 10px 18px; }
+  .topbar .lockup .wordmark { --cell: 18px; }
+  .topbar .lockup .org { font-size: 12px; gap: 5px; }
+  .topbar nav { font-size: 12px; gap: 4px 16px; }
+}
 
 /* ---- token cells ---- */
 .wordmark { --cell: 64px; display: inline-flex; align-items: flex-end; gap: calc(var(--cell) * 0.09); user-select: none; }

causal-variants.html

@@ -8,7 +8,8 @@
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Spectral:ital,wght@0,400;0,500;0,600;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap">
-<link rel="stylesheet" href="assets/site.css?v=20260908-inline-logo">
+<link rel="stylesheet" href="assets/site.css?v=20260908-browser">
+<link rel="stylesheet" href="assets/causal.css?v=20260908-browser">
 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.9.0/d3.min.js"></script>
 </head>
 <body>
@@ -17,7 +18,24 @@
 
 <main class="prose">
 <h1>Zero-shot causal variant prioritisation</h1>
-<p class="lede">A new and harder zero-shot causal-variant discovery benchmark based on experimentally validated variants, totalling 545 loci across 14 species. Each task ranks one documented causal SNP among population SNPs in its surrounding 100 kbp locus.</p>
+<p class="lede">545 loci across 14 species, each with an experimentally validated causal SNP. The task: recover that SNP among thousands of neighbouring population variants, using sequence alone.</p>
+
+<figure class="locus-browser" aria-labelledby="locus-title">
+  <div class="locus-heading">
+    <div><h2 id="locus-title">ABI5 locus</h2><p><i>Arabidopsis thaliana</i> · TAIR10 · Botanic1-XL</p></div>
+    <div class="locus-tools" role="group" aria-label="Genome browser navigation">
+      <button type="button" id="locus-out" aria-label="Zoom out">−</button>
+      <button type="button" id="locus-in" aria-label="Zoom in">+</button>
+      <button type="button" id="locus-full">100 kbp locus</button>
+      <button type="button" id="locus-causal">Causal SNP</button>
+    </div>
+  </div>
+  <p class="locus-region" id="locus-region">Loading locus…</p>
+  <div class="locus-scroll"><div id="locus-plot"></div></div>
+  <div class="locus-readout" id="locus-readout" aria-live="polite" aria-atomic="true"></div>
+  <figcaption><span id="locus-help">Hover or tap a SNP to inspect. Drag to pan; + / − to zoom. Arrow keys select SNPs.</span><span>Measured SNP scores · 4,096 bp context · <a href="https://plants.ensembl.org/Arabidopsis_thaliana/Gene/Summary?g=AT2G36270" target="_blank" rel="noopener">Araport11 gene models ↗</a></span></figcaption>
+  <noscript><p class="locus-fallback">Enable JavaScript to explore the ABI5 locus. <a href="https://www.biorxiv.org/content/10.64898/2026.09.04.749355v1">Read the benchmark in the report ↗</a></p></noscript>
+</figure>
 
 <p>Our newly introduced causal-variant benchmark uses experimentally validated functional variants as a source of ground truth, instead of relying on indirect proxies such as allele frequency or variant class. Every language model is scored at min(4,096, trained context) (PlantCaduceus-l32 and GPN are fixed at 512 bp) for each LLR, putting the SNV in the middle of the window. All gLMs are evaluated on the full dataset from the reference genome sequences only, while bioinformatics baselines require either precise annotations for Ensembl VEP or MSA support for conservation scores. As a result, PhyloP and PhastCons, which are built on PlantRegMap, are only scored on a subset of the studies.</p>
 <p>Although it should not necessarily be ranked first, we expect a validated causal variant to rank near the top of its locus, within the top 1% (about 60 variants) or even 0.1% (about 6 variants), which is why we choose to assess the performance on this task using the recall at these thresholds. The recalls are tie-aware: if the candidate is within a tie block in a study and the considered top fraction has to cut within the block, then the contribution of that study to the recall is neither 0 nor 1 but the proportion of the tie block that can fit in the shortlist.</p>
@@ -46,7 +64,7 @@
 <div class="tablewrap"><table id="sweep"></table></div>
 
 <h2 id="limits">Simplifications</h2>
-<p>This new benchmark also uses some simplifications: the search is limited to a 100 kbp causal region and to a single basic type of mutation, SNPs. Besides, the task relies on the assumption that the documented causal SNP should be ranked among the candidate variants assigned the lowest likelihood by the model, an assumption that could be challenged since the surrounding unlabelled variants may include other functional or phenotypically relevant mutations. This limitation affects the interpretation of the absolute benchmark scores, but not the relative comparison between methods, since all methods are evaluated against the same set of unlabelled variants.</p>
+<p>This benchmark restricts the search to SNPs in a 100 kbp locus. It asks whether the documented causal SNP ranks near the top by absolute LLR. Surrounding unlabelled variants may also be functional or phenotypically relevant, so the benchmark measures recovery of the documented causal SNP rather than identifying every functional variant in the locus.</p>
 
 <h2 id="sec-studies">The 545 studies</h2>
 <p>Below are 20 example studies from the benchmark. The full set of 545 studies, candidate variants, and curation audit will be published later.</p>
@@ -66,6 +84,7 @@
 </div>
 <div class="tip" id="tip" role="tooltip"></div>
 <script src="assets/hero.js"></script>
+<script src="assets/causal-browser.js?v=20260908-browser" defer></script>
 
 <script>
 (async function () {

corpus.html

@@ -8,7 +8,7 @@
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Spectral:ital,wght@0,400;0,500;0,600;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap">
-<link rel="stylesheet" href="assets/site.css?v=20260908-inline-logo">
+<link rel="stylesheet" href="assets/site.css?v=20260908-browser">
 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.9.0/d3.min.js"></script>
 </head>
 <body>

factory.html

@@ -9,7 +9,7 @@
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Spectral:ital,wght@0,400;0,500;0,600;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap">
-<link rel="stylesheet" href="assets/site.css?v=20260908-inline-logo">
+<link rel="stylesheet" href="assets/site.css?v=20260908-browser">
 <link rel="stylesheet" href="assets/factory.css">
 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.9.0/d3.min.js"></script>
 </head>

index.html

@@ -9,7 +9,7 @@
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Spectral:ital,wght@0,400;0,500;0,600;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap">
-<link rel="stylesheet" href="assets/site.css?v=20260908-inline-logo">
+<link rel="stylesheet" href="assets/site.css?v=20260908-browser">
 <link rel="stylesheet" href="assets/landing.css?v=20260908-inline-logo">
 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.9.0/d3.min.js" defer></script>
 <script src="assets/hero.js" defer></script>

leaderboard.html

@@ -8,7 +8,7 @@
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Spectral:ital,wght@0,400;0,500;0,600;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap">
-<link rel="stylesheet" href="assets/site.css?v=20260908-inline-logo">
+<link rel="stylesheet" href="assets/site.css?v=20260908-browser">
 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.9.0/d3.min.js"></script>
 </head>
 <body>