Use click selection and anywhere deselection; restore sweep details and visible whole-tree reset

.gitattributes

@@ -51,3 +51,4 @@ dial-selection.png filter=lfs diff=lfs merge=lfs -text
 download-detail.png filter=lfs diff=lfs merge=lfs -text
 presentation-desktop.png filter=lfs diff=lfs merge=lfs -text
 presentation-mobile.png filter=lfs diff=lfs merge=lfs -text
+sweep-info.png filter=lfs diff=lfs merge=lfs -text

README.md

@@ -27,27 +27,27 @@ The human assembly detail uses actual published GFF3 coordinates, with 23,767 pr
 
 ## Locus bars and atlas silhouettes
 
-The outer annulus aligns to the exact same ordered assembly tips as the tree. Published counts are available for **17,828 of the 33,588 displayed assemblies**, summing to **212,905,534 predicted coding loci**; the other 15,760 assemblies have unavailable counts in this metadata inventory. The default sums available locus counts across **5 consecutive assemblies**; 20-, 50- and 200-assembly bins and individual assembly bars are selectable in View options. Bins partition taxonomic display order, and can straddle named taxon boundaries. Bar length uses a linear scale, recalculated for each bin size and labelled above the tree. Hover reveals the count and number of measured assemblies. Clicking a bin switches to individual bars and zooms into its strands.
+The outer annulus aligns to the exact same ordered assembly tips as the tree. Published counts are available for **17,828 of the 33,588 displayed assemblies**, summing to **212,905,534 predicted coding loci**; the other 15,760 assemblies have unavailable counts in this metadata inventory. The default sums available locus counts across **5 consecutive assemblies**; 20-, 50- and 200-assembly bins and individual assembly bars are selectable in View options. Bins partition taxonomic display order, and can straddle named taxon boundaries. Bar length uses a linear scale, recalculated for each bin size and labelled above the tree. Hover reveals the count and number of measured assemblies. Clicking a bar selects the assembly at its angle without changing the camera or bin size.
 
 Grey marks at the bar bases indicate missing counts. For bins, the grey mark spans the fraction of assemblies without measurements. A bin sums only available values: missing counts are not imputed, treated as measured zero, or scaled up to the full release. Green locus bars count all predicted loci in the covered assemblies; the blue/green colouring of the tree still describes annotation records at assembly level, not whether individual loci are new.
 
-The original **Genome Atlas silhouettes**, without circle backgrounds, sit on their corresponding taxonomic nodes. Clicking an icon focuses the branch. Icons appear progressively with zoom and are hidden when they would overlap; the checkbox in View options hides them all. All original PhyloPic source links and licence/attribution records are retained in the interface under **About the data → Icon credits and licences** and in the source data. The original SVG artwork is preserved; its displayed fill is adapted to each theme with an alpha mask, without backgrounds.
+The original **Genome Atlas silhouettes**, without circle backgrounds, sit on their corresponding taxonomic nodes. Clicking an icon selects a nearby assembly strand without zooming. Icons appear progressively with zoom and are hidden when they would overlap; the checkbox in View options hides them all. All original PhyloPic source links and licence/attribution records are retained in the interface under **About the data → Icon credits and licences** and in the source data. The original SVG artwork is preserved; its displayed fill is adapted to each theme with an alpha mask, without backgrounds.
 
 ## Presentation and video capture
 
 The Space uses a single wide title, a centred full-width tree and five resource buttons: **Model, Database, Explorer, Paper and Blog**. The sidebar, animation button and all cumulative sweep counters have been removed. Search, bar settings, comparison modes and zoom controls are available under **View options**. **About the data** retains the subset limitations and icon credits.
 
-Click the page background, then press **Space** to start or replay a four-second clockwise sweep; Space again or Escape stops it. A thin centre hand follows the selected strand. Playback has no aggregate counters. Only the interaction canvas redraws each frame; the detailed tree stays cached.
+Click the page background, then press **Space** to start or replay a four-second clockwise sweep; Space again or Escape stops it. A thin centre hand follows the selected strand, and its assembly info box updates during playback. The final assembly remains selected after the sweep. Playback has no aggregate counters. Only the interaction canvas redraws each frame; the detailed tree stays cached.
 
-For browser automation, `POC.startSweep()` and `POC.stopSweep(false)` provide the same controls. On the app URL, `?record=1` hides the small utility controls and suppresses mouse interactions for a clean recording; adding `&animate=1` starts one sweep a second after loading. Resource links and the title remain visible. These parameters apply to the app itself; the normal private Space page remains the entry point for signed-in users.
+For browser automation, `POC.startSweep()` and `POC.stopSweep(false)` provide the same controls. On the app URL, `?record=1` hides the small utility controls and suppresses mouse interactions for a clean recording while retaining the animated assembly info box; adding `&animate=1` starts one sweep a second after loading. Resource links and the title remain visible. These parameters apply to the app itself; the normal private Space page remains the entry point for signed-in users.
 
 ## Layout and implementation
 
 The taxonomy and plain-language names reuse the earlier explorer work. Only ancestor nodes on paths to included assemblies are retained. The drawing simplifies intervening taxonomy to standard ranks; full lineage metadata is preserved. Radius is a layout choice, not evolutionary time or branch length.
 
-Every assembly has its own lane through parent bundles and its own endpoint. A common taper makes individual paths finer towards the root; all assemblies use the same width at a given radius. Density and bundle width encode assembly counts, not coding-locus counts. At overview scale, many paths occupy the same pixel. Hovering a strand highlights its exact path and opens its assembly details; clicking freezes the selected strand and its details. Hovering or clicking elsewhere inside the tree cannot replace it. Click outside the outer tree/locus ring, click the close button, or press Escape to release it. Zoom, pan and search reveal individual accessions. The cursor is neutral over empty space and becomes a pointer over selectable strands; it becomes a drag cursor only during an actual pan. Selection highlights reuse the exact sampled coordinates drawn by WebGL, so they stay aligned with the underlying strand at every zoom level.
+Every assembly has its own lane through parent bundles and its own endpoint. A common taper makes individual paths finer towards the root; all assemblies use the same width at a given radius. Density and bundle width encode assembly counts, not coding-locus counts. At overview scale, many paths occupy the same pixel. Clicking a strand, the centre dial, an icon or a bar selects a real assembly and opens its details without zooming. Hovering does not select a strand. Once an assembly is selected, the next click anywhere clears it, including clicks on another strand, the centre, an icon, a bar, the title, the footer or the info box. Links and buttons inside the box execute their action before clearing. Scroll or use explicit zoom controls to zoom, and drag to pan. A **Whole tree** button appears directly on the graphic whenever zoomed or panned, and resets both. Double-clicking does not zoom. Selection highlights reuse the exact sampled coordinates drawn by WebGL, so they stay aligned with the underlying strand at every zoom level.
 
-Dark mode is the default, with charcoal surfaces, emerald and blue strands, and pale atlas silhouettes. The sun/moon control switches to the light theme and saves the preference locally. The root opening contains a fine watch hand that points to the selected strand. Hover anywhere inside the opening to select by direction; click to freeze, or drag to turn the hand before releasing to freeze the final selection. Dragging outside the dial pans the tree. Fine locus bars use shared explicit angular vertices instead of independently approximated Canvas arcs, avoiding gaps in narrow bins without changing their counts.
+Dark mode is the default, with charcoal surfaces, emerald and blue strands, and pale atlas silhouettes. The sun/moon control switches to the light theme and saves the preference locally. The root opening contains a fine watch hand that points to the selected strand. Click inside the opening to select by direction. Dragging pans the tree. Fine locus bars use shared explicit angular vertices instead of independently approximated Canvas arcs, avoiding gaps in narrow bins without changing their counts.
 
 The self-contained HTML includes compressed data, JavaScript and two local font families (Manrope and Inter). It makes no network requests to draw the tree. Links to source records open only when selected. WebGL is required. Source and data preparation scripts are included for reuse. The metadata counts include source paths, content hashes and pipeline revisions for auditing. The icon data includes each original source page and licence.
 
@@ -65,6 +65,6 @@ This layout change retains the 33,588 real assembly strands and available per-as
 
 ## Rebuild
 
-`python build.py` builds the self-contained HTML from the template, JavaScript, compact data and embedded release fonts. `python check_presentation.py` checks desktop/mobile layout, resource buttons, search, frozen selection, annotation access, themes and the counter-free sweep. `python export_still.py` exports the current presentation as a 2160 × 2700 PNG. `python verify_live.py` repeats the current checks against the published private Space.
+`python build.py` builds the self-contained HTML from the template, JavaScript, compact data and embedded release fonts. `python check_presentation.py` checks desktop/mobile layout, resource buttons, search, click selection and deselection, zoom reset, annotation access, themes and the counter-free sweep. `python export_still.py` exports the current presentation as a 2160 × 2700 PNG. `python verify_live.py` repeats the current checks against the published private Space.
 
 Earlier exploratory checks are retained for reference; their sidebar and counter expectations describe previous revisions. Data provenance and limitations are recorded in `provenance.json`. The original release video and database explorer are separate projects.

app.js

@@ -62,14 +62,14 @@ function draw(){if(!gl)return;let dpr=canvas.width/W;gl.viewport(0,0,canvas.widt
  drawAtlasIcons();
  if(sweep.running)cacheSweepTree();
  drawInteraction();
+ const away=zoom!==1||Math.abs(pan.x)>1||Math.abs(pan.y)>1;$('#home').hidden=!away;$('.stage-wrap').dataset.zoomed=String(away);
  $('#zoom-readout').textContent=zoom.toFixed(1)+'×';$('#zoomout').disabled=zoom<=1;$('#zoomin').disabled=zoom>=320;
  window.POC&&(window.POC.zoom=zoom);
 }
-function zoomAt(factor,x=W/2,y=H/2){stopSweep();hoverAssembly(null);$('#layer-tooltip').hidden=true;hoverBin=null;let old=zoom,n=Math.max(1,Math.min(320,zoom*factor));let ratio=n/old;pan.x=(pan.x+W/2-x)*ratio+x-W/2;pan.y=(pan.y+H/2-y)*ratio+y-H/2;zoom=n;if(zoom===1)pan={x:0,y:0};schedule()}
+function zoomAt(factor,x=W/2,y=H/2){stopSweep();$('#layer-tooltip').hidden=true;hoverBin=null;let old=zoom,n=Math.max(1,Math.min(320,zoom*factor));let ratio=n/old;pan.x=(pan.x+W/2-x)*ratio+x-W/2;pan.y=(pan.y+H/2-y)*ratio+y-H/2;zoom=n;if(zoom===1)pan={x:0,y:0};schedule()}
 function reset(){stopSweep(false);$('#layer-tooltip').hidden=true;hoverBin=null;zoom=1;pan={x:0,y:0};clearSelection();schedule()}
 // Select the strand in the pointer's direction anywhere inside the root opening.
-// A small neutral hub avoids unstable angles right at the pivot. Dial drags can
-// continue beyond the opening without turning into a pan gesture.
+// A small neutral hub avoids unstable angles right at the pivot.
 function hitDial(x,y,dragging=false){
  const [wx,wy]=world(x,y),r=Math.hypot(wx,wy);
  if((!dragging&&r>92)||r*baseScale*zoom<3)return null;
@@ -89,53 +89,62 @@ function nearest(x,y,radius=7){
  }return found;
 }
 function closeViewOptions(){if($('#view-dialog').open)$('#view-dialog').close()}
+function chooseAssembly(a){closeViewOptions();stopSweep(false);selectAssembly(a)}
 function focusAssembly(a,z=70){closeViewOptions();stopSweep(false);selected=a;zoom=z;let s=baseScale*zoom;pan={x:-a.tip[0]*s,y:-a.tip[1]*s};selectAssembly(a);schedule()}
 function clearSelection(){selected=pinnedAssembly=hoveredAssembly=null;$('#selection').hidden=true;scheduleInteraction()}
-function hoverAssembly(a){
- if(sweep.running||pinnedAssembly)return;
- hoveredAssembly=a;const next=a||pinnedAssembly;
- if(next===selected)return;
- if(next)selectAssembly(next,false);else{selected=null;$('#selection').hidden=true;scheduleInteraction()}
-}
-function selectAssembly(a,pin=true){if(!a)return;if(pin)pinnedAssembly=a;selected=a;
+function selectAssembly(a,pin=true,redraw=true){if(!a)return;if(pin)pinnedAssembly=a;selected=a;
  $('#selection').dataset.pinned=String(a===pinnedAssembly);
- $('#sel-state').textContent=a===pinnedAssembly?'Frozen · click outside tree to release':'Hover preview · click to freeze';let r=a.row,species=a.lineage.find(n=>n.rank==='species');$('#selection').hidden=false;$('#sel-name').textContent=a.name;$('#sel-id').textContent=a.accession;$('#sel-id').href='https://www.ncbi.nlm.nih.gov/datasets/genome/'+a.accession+'/';$('#sel-lineage').textContent=a.lineage.filter(n=>['kingdom','phylum','class','order','family','genus'].includes(n.rank)).map(n=>n.common||n.name).join(' › ');
+ $('#sel-state').textContent=sweep.running?'Scanning assemblies':'Selected · click anywhere to clear';let r=a.row,species=a.lineage.find(n=>n.rank==='species');$('#selection').hidden=false;$('#sel-name').textContent=a.name;$('#sel-id').textContent=a.accession;$('#sel-id').href='https://www.ncbi.nlm.nih.gov/datasets/genome/'+a.accession+'/';$('#sel-lineage').textContent=a.lineage.filter(n=>['kingdom','phylum','class','order','family','genus'].includes(n.rank)).map(n=>n.common||n.name).join(' › ');
  const has=mode?r[5]:r[4]===1;
  $('#sel-status').innerHTML=mode?`<i class="dot ${has?'blue':'green'}"></i>${has?'In the RefSeq comparison corpus':'Outside the RefSeq comparison corpus'}`:r[4]===1?`<i class="dot blue"></i>GenBank annotation record<br><small>${esc(r[7])} · ${esc(r[9])}</small>`:'<i class="dot green"></i>No annotation listed in this GenBank snapshot';
  $('#sel-data').innerHTML=(species?`<span>${esc(species.common||species.name)} · assembly comparison</span><b>${fmt(mode?species.refMatches:species.existing)} / ${fmt(species.count)} ${mode?'in RefSeq corpus':'with GenBank records'}</b>`:'')+`<span>Predicted coding loci</span><b>${a.loci===null?'Count unavailable':fmt(a.loci)}</b>`+(r[3]?`<span>Assembly length</span><b>${(r[3]/1e6).toLocaleString('en-US',{maximumFractionDigits:2})} Mb</b>`:'')+(r[6]?`<span>RefSeq counterpart</span><b>${esc(r[6])}</b>`:'')+(mode&&r[4]===1?`<span>GenBank annotation provider</span><b>${esc(r[7])}</b>`:'');
- updateDataAccess(a);$('#sel-loci').hidden=a.accession!=='GCA_000001405.29';scheduleInteraction()}
+ updateDataAccess(a);$('#sel-loci').hidden=a.accession!=='GCA_000001405.29';if(redraw)scheduleInteraction()}
 function updateLegend(){let n=mode?D.meta.refseq_matches:D.meta.classification_counts['1'];$('#blue-count').textContent=fmt(n);$('#green-count').textContent=fmt(leaves.length-n);$('#blue-label').textContent=mode?'In RefSeq comparison corpus':'GenBank annotation record';$('#green-label').textContent=mode?'Outside that comparison corpus':'No GenBank record listed';$('#scope-note').textContent=mode?'Counts are assemblies, not genes. Blue marks exact paired-accession matches to the project’s 2,055-assembly RefSeq corpus, not all RefSeq annotations. Green does not imply new genes.':'Counts are assemblies, not genes. This view checks GenBank submission metadata; it does not include annotations stored only on paired RefSeq records. Missing metadata is not proof of no prior annotation.';if(selected&&!sweep.running)selectAssembly(selected,false);schedule()}
-function search(q){q=q.trim().toLowerCase();let out=[];if(q.length>1){out=leaves.filter(a=>a.accession.toLowerCase().includes(q)||a.name.toLowerCase().includes(q)||(nodes.get(a.taxid).common||'').toLowerCase().includes(q)).slice(0,7);}$('#results').replaceChildren(...out.map(a=>{let b=document.createElement('button');b.innerHTML=`<strong>${esc(a.name)}</strong><span>${esc(a.accession)}</span>`;b.onclick=()=>{focusAssembly(a);$('#results').replaceChildren();$('#search').value=''};return b}));if(q.length>1&&!out.length)$('#results').textContent='No match in this PoC subset.';}
+function search(q){q=q.trim().toLowerCase();let out=[];if(q.length>1){out=leaves.filter(a=>a.accession.toLowerCase().includes(q)||a.name.toLowerCase().includes(q)||(nodes.get(a.taxid).common||'').toLowerCase().includes(q)).slice(0,7);}$('#results').replaceChildren(...out.map(a=>{let b=document.createElement('button');b.innerHTML=`<strong>${esc(a.name)}</strong><span>${esc(a.accession)}</span>`;b.onclick=()=>{chooseAssembly(a);$('#results').replaceChildren();$('#search').value=''};return b}));if(q.length>1&&!out.length)$('#results').textContent='No match in this PoC subset.';}
 function geneModal(){closeViewOptions();stopSweep();const g=D.example;$('#gene-dialog').showModal();$('#gene-summary').textContent=fmt(g.gene_count)+' candidate coding loci in this assembly';const svg=$('#gene-svg');let start=0,end=1000000,width=1100,left=30,right=1080;let x=p=>left+(p-start)/(end-start)*(right-left);let parts=[];for(let p=0;p<=end;p+=100000){parts.push(`<line x1="${x(p)}" y1="38" x2="${x(p)}" y2="198" stroke="${palette.grid}"/><text x="${x(p)}" y="24" text-anchor="middle">${p/1e6} Mb</text>`)}
  for(let gene of g.genes){if(gene.start>end)continue;let y=gene.strand==='+'?92:158;parts.push(`<g><title>${esc(gene.id)} · ${fmt(gene.start)}–${fmt(gene.end)} bp · ${gene.strand}</title><line x1="${x(gene.start)}" x2="${x(Math.min(end,gene.end))}" y1="${y}" y2="${y}" stroke="${palette.bar}"/>`);for(let [s,e] of gene.cds)if(s<=end)parts.push(`<rect x="${x(s)}" y="${y-7}" width="${Math.max(.6,x(Math.min(end,e))-x(s))}" height="14" fill="${palette.green}"/>`);parts.push('</g>')};svg.innerHTML=parts.join('');$('#gene-count-window').textContent=g.genes.filter(g=>g.start<=end).length+' candidate loci in this 1 Mb window. Bars show predicted coding segments; connecting lines span intervening sequence.';
 }
 async function init(){try{const raw=Uint8Array.from(atob($('#dataset').textContent.trim()),c=>c.charCodeAt(0));D=JSON.parse(await new Response(new Blob([raw]).stream().pipeThrough(new DecompressionStream('gzip'))).text());prepare();await Promise.all([document.fonts.ready,loadAtlasIcons()]);setupGL();prepareSweep();setTheme(theme);makeLocusBins();resize();updateLegend();$('#loading').remove();$('#shown').textContent=fmt(leaves.length);$('#taxa-shown').textContent=fmt(D.meta.taxa);$('#search').disabled=false;
  new ResizeObserver(resize).observe(stage);
  stage.addEventListener('wheel',e=>{e.preventDefault();let r=canvas.getBoundingClientRect();zoomAt(Math.exp(-e.deltaY*.0017),e.clientX-r.left,e.clientY-r.top)},{passive:false});
- let down=null,moved=false,hoverPending=false,hoverEvent=null;
+ let down=null,moved=false,suppressChartClick=false,clickPoint=null,hoverPending=false,hoverEvent=null;
  const queueHover=e=>{hoverEvent=e;if(hoverPending)return;hoverPending=true;requestAnimationFrame(()=>{hoverPending=false;const event=hoverEvent;hoverEvent=null;if(!down&&event)hoverLayers(event)})};
- stage.addEventListener('pointerdown',e=>{stopSweep(false);hoverEvent=null;const b=stage.getBoundingClientRect(),a=pinnedAssembly?null:hitDial(e.clientX-b.left,e.clientY-b.top);down={x:e.clientX,y:e.clientY,dial:!!a,locked:!!pinnedAssembly};moved=false;if(a){selectAssembly(a,false);canvas.style.cursor='pointer'}stage.setPointerCapture(e.pointerId)});
+ stage.addEventListener('pointerdown',e=>{
+  if(e.button!==0)return;
+  hoverEvent=null;suppressChartClick=false;clickPoint=null;
+  down={x:e.clientX,y:e.clientY};moved=false;
+  stage.setPointerCapture(e.pointerId);
+ });
  stage.addEventListener('pointermove',e=>{
   if(!down){queueHover(e);return}
-  let dx=e.clientX-down.x,dy=e.clientY-down.y;
-  if(down.dial){const b=stage.getBoundingClientRect(),a=hitDial(e.clientX-b.left,e.clientY-b.top,true);if(a&&a!==selected)selectAssembly(a,false);moved=moved||Math.hypot(dx,dy)>=4;return}
+  const dx=e.clientX-down.x,dy=e.clientY-down.y;
   if(!moved&&Math.hypot(dx,dy)<4)return;
-  if(!moved)hoverAssembly(null);
+  if(!moved)stopSweep(false);
   moved=true;canvas.style.cursor='grabbing';$('#layer-tooltip').hidden=true;
-  pan.x+=dx;pan.y+=dy;down={...down,x:e.clientX,y:e.clientY};schedule();
+  pan.x+=dx;pan.y+=dy;down={x:e.clientX,y:e.clientY};schedule();
+ });
+ stage.addEventListener('pointerup',e=>{if(!down)return;clickPoint={x:e.clientX,y:e.clientY};suppressChartClick=moved;down=null;canvas.style.cursor='default'});
+ stage.addEventListener('pointercancel',()=>{down=null;suppressChartClick=true;canvas.style.cursor='default'});
+ stage.addEventListener('pointerleave',()=>{hoverEvent=null;$('#layer-tooltip').hidden=true;if(hoverBin){hoverBin=null;schedule()}if(!down)canvas.style.cursor='default'});
+ // Snapshot before target handlers run so actions inside the info box can use
+ // the selected assembly before this same click clears it.
+ document.addEventListener('click',e=>{e.hadAssemblySelection=!!pinnedAssembly},true);
+ document.addEventListener('click',e=>{
+  if(e.target.closest('#stage')){
+   if(suppressChartClick){suppressChartClick=false;return}
+   stopSweep(false);$('#layer-tooltip').hidden=true;
+   if(e.hadAssemblySelection){clearSelection();return}
+   const box=stage.getBoundingClientRect(),p=clickPoint||{x:e.clientX,y:e.clientY},x=p.x-box.left,y=p.y-box.top;clickPoint=null;
+   const a=assemblyAtClick(x,y);if(a)selectAssembly(a);else clearSelection();
+  }else if(e.hadAssemblySelection){clearSelection()}
  });
- stage.addEventListener('pointerup',e=>{if(!down)return;const dragged=moved,dial=down.dial,b=stage.getBoundingClientRect(),x=e.clientX-b.left,y=e.clientY-b.top;if(dial){const a=hitDial(x,y,true);if(a)selectAssembly(a)}else if(!dragged){if(!insideTree(x,y))clearSelection();else if(!down.locked&&!clickLayers(x,y)){const a=hitAssembly(x,y);if(a)selectAssembly(a)}}down=null;canvas.style.cursor=hitDial(x,y)?'pointer':'default';if(!dial&&!dragged&&e.pointerType!=='touch')hoverLayers(e)});
- stage.addEventListener('pointercancel',()=>{down=null;hoverAssembly(null);canvas.style.cursor='default'});
- stage.addEventListener('pointerleave',e=>{hoverEvent=null;$('#layer-tooltip').hidden=true;hoverBin=null;if(!down){canvas.style.cursor='default';if(!e.relatedTarget?.closest?.('#selection'))hoverAssembly(null)}schedule()});
- document.addEventListener('pointerdown',e=>{if(pinnedAssembly&&!e.target.closest('#stage,#selection,dialog'))clearSelection()});
  document.addEventListener('keydown',e=>{if(e.key==='Escape'&&!document.querySelector('dialog[open]'))clearSelection()});
- $('#selection').addEventListener('pointerleave',e=>{if(e.relatedTarget!==canvas)hoverAssembly(null)});
  $('#sel-download').onclick=()=>showDataAccess(selected);$('#data-close').onclick=()=>$('#data-dialog').close();$('#data-copy').onclick=copyDataCode;
  $('#theme-toggle').onclick=()=>setTheme(theme==='dark'?'light':'dark');
  $('#view-options').onclick=()=>{stopSweep(false);$('#view-dialog').showModal()};$('#view-close').onclick=closeViewOptions;
  $('#locus-mode').onchange=e=>{locusMode=e.target.value;makeLocusBins()};$('#show-icons').onchange=e=>{showIcons=e.target.checked;schedule()};$('#credits-open').onclick=()=>$('#credits-dialog').showModal();$('#credits-close').onclick=()=>$('#credits-dialog').close();
- stage.addEventListener('dblclick',e=>{let b=canvas.getBoundingClientRect(),x=e.clientX-b.left,y=e.clientY-b.top;if(!hitDial(x,y))zoomAt(3,x,y)});
- $('#zoomin').onclick=()=>zoomAt(2);$('#zoomout').onclick=()=>zoomAt(.5);$('#reset').onclick=reset;$('#search').addEventListener('input',e=>search(e.target.value));$('#search').addEventListener('keydown',e=>{if(e.key==='Escape')$('#results').replaceChildren();if(e.key==='Enter')$('#results button')?.click()});$('#scope').onchange=e=>{mode=Number(e.target.value);updateLegend()};$('#existing-only').onchange=e=>{view=e.target.checked?'existing':'all';schedule()};$('#human').onclick=()=>focusAssembly(leaves.find(a=>a.accession==='GCA_000001405.29'));$('#detail').onclick=()=>focusAssembly(leaves.find(a=>a.accession==='GCA_000001405.29'),95);$('#sel-loci').onclick=geneModal;$('#gene-open').onclick=geneModal;$('#gene-close').onclick=()=>$('#gene-dialog').close();$('#sel-close').onclick=()=>{clearSelection();schedule()};$('#sel-focus').onclick=()=>focusAssembly(selected,100);$('#about').onclick=()=>{stopSweep();$('#about-dialog').showModal()};$('#about-close').onclick=()=>$('#about-dialog').close();
+ $('#home').onclick=reset;
+ $('#zoomin').onclick=()=>zoomAt(2);$('#zoomout').onclick=()=>zoomAt(.5);$('#reset').onclick=reset;$('#search').addEventListener('input',e=>search(e.target.value));$('#search').addEventListener('keydown',e=>{if(e.key==='Escape')$('#results').replaceChildren();if(e.key==='Enter')$('#results button')?.click()});$('#scope').onchange=e=>{mode=Number(e.target.value);updateLegend()};$('#existing-only').onchange=e=>{view=e.target.checked?'existing':'all';schedule()};$('#human').onclick=()=>chooseAssembly(leaves.find(a=>a.accession==='GCA_000001405.29'));$('#detail').onclick=()=>focusAssembly(leaves.find(a=>a.accession==='GCA_000001405.29'),95);$('#sel-loci').onclick=geneModal;$('#gene-open').onclick=geneModal;$('#gene-close').onclick=()=>$('#gene-dialog').close();$('#sel-close').onclick=()=>{clearSelection();schedule()};$('#sel-focus').onclick=()=>focusAssembly(selected,100);$('#about').onclick=()=>{stopSweep();$('#about-dialog').showModal()};$('#about-close').onclick=()=>$('#about-dialog').close();
  const params=new URLSearchParams(location.search);
  if(params.get('animate')==='1')setTimeout(startSweep,1000);
  }catch(e){if($('#loading'))$('#loading').textContent='Unable to load the tree: '+e.message;console.error(e)}}

carbon-a-strand-source.zip

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:9de0766b160cc3dcf0552de0d4f4af06f11dd79adbe46644359de982e819b115
-size 15180642
+oid sha256:09d40a78b0d612469caf0b4e285b020f225dd4639c76d8a613fdbb3156c30132
+size 15181594

check_presentation.py

@@ -22,24 +22,50 @@ def check(url=None,headers=None):
   assert page.locator('#view-dialog').is_hidden()
   assert page.locator('footer').bounding_box()['y']>=page.locator('.stage-wrap').bounding_box()['y']+page.locator('.stage-wrap').bounding_box()['height']
   page.screenshot(path=str(R/'presentation-desktop.png'))
-  # Hover, frozen selection, and outside release still use the same geometry.
-  def point(i):
-   return page.evaluate('''i=>{const q=screen(polar(62,leaves[i].angle)),b=stage.getBoundingClientRect();return [b.x+q[0],b.y+q[1]]}''',i)
-  page.mouse.move(*point(12345));page.wait_for_function('selected?.i===12345')
-  assert page.locator('#selection').is_visible()
-  page.mouse.click(*point(12345));page.mouse.move(*point(25000));page.wait_for_timeout(60)
-  assert page.evaluate('pinnedAssembly.i')==12345
-  page.mouse.click(*point(25000));assert page.evaluate('selected.i')==12345
-  box=page.locator('#stage').bounding_box();page.mouse.click(box['x']+2,box['y']+2)
-  assert page.evaluate('pinnedAssembly===null')
+  # Hover never selects. Every chart click selects without zooming, and the
+  # next click anywhere clears without immediately selecting a replacement.
+  def point(i,radius=62):
+   return page.evaluate("""([i,radius])=>{const q=screen(polar(radius,leaves[i].angle)),b=stage.getBoundingClientRect();return [b.x+q[0],b.y+q[1]]}""",[i,radius])
+  page.mouse.move(*point(12345));page.wait_for_timeout(80)
+  assert page.evaluate('selected===null') and page.locator('#selection').is_hidden()
+  page.mouse.click(*point(12345));assert page.evaluate('pinnedAssembly.i')==12345
+  assert page.locator('#selection').is_visible() and page.evaluate('zoom')==1
+  page.mouse.move(*point(25000));assert page.evaluate('pinnedAssembly.i')==12345
+  page.mouse.click(*point(25000));assert page.evaluate('selected===null')
+  assert page.locator('#selection').is_hidden()
+  page.mouse.click(*point(25000));assert page.evaluate('pinnedAssembly.i')==25000
+  page.locator('h1').click();assert page.evaluate('selected===null')
+  # Plain strands, icons and binned bars all use selection, without zoom or
+  # changing bar mode. Clicking info-box text also deselects.
+  targets=[point(12345,730)]
+  targets+=page.evaluate("""()=>{const r=stage.getBoundingClientRect(),ic=iconHits[0],bin=locusBins.find(b=>b.known&&b.value>10000),q=screen(polar(R+BAR_GAP+4,leaves[Math.floor(bin.mid)].angle));return [[r.x+ic.x,r.y+ic.y],[r.x+q[0],r.y+q[1]]]}""")
+  for xy in targets:
+   page.mouse.click(*xy);assert page.evaluate('selected!==null')
+   assert page.evaluate('zoom')==1 and page.evaluate('locusMode')=='5'
+   page.locator('#sel-name').click();assert page.evaluate('selected===null')
+  page.mouse.dblclick(*point(12345,730));assert page.evaluate('zoom')==1
+  assert page.evaluate('selected===null')
+  # Wheel zoom and pan have an always-accessible reset on the graphic.
+  page.mouse.move(*point(10000));page.mouse.wheel(0,-450)
+  page.wait_for_function('zoom>1 && !document.querySelector("#home").hidden')
+  page.locator('#home').click();page.wait_for_function('zoom===1 && pan.x===0 && pan.y===0')
+  page.locator('#home').wait_for(state='hidden')
+  box=page.locator('#stage').bounding_box()
+  page.mouse.move(box['x']+20,box['y']+30);page.mouse.down()
+  page.mouse.move(box['x']+75,box['y']+60,steps=4);page.mouse.up()
+  page.wait_for_function('!document.querySelector("#home").hidden')
+  assert page.evaluate('selected===null')
+  page.locator('#home').click();assert page.evaluate('pan.x===0 && pan.y===0')
   # Search is accessible through the dialog; selecting a result closes it.
   page.locator('#view-options').click();page.locator('#search').fill('GCA_000001405.29')
   page.locator('#results button').first.click()
   assert page.locator('#view-dialog').is_hidden()
   assert page.locator('#sel-id').inner_text()=='GCA_000001405.29'
+  assert page.evaluate('zoom')==1
   assert page.locator('#sel-files').get_attribute('href').endswith('/GCA_000001405.29')
   page.locator('#sel-download').click();compile(page.locator('#data-code').inner_text(),'download_example','exec')
-  page.locator('#data-close').click();page.locator('#sel-close').click()
+  assert page.evaluate('selected===null')  # the info action runs before clearing
+  page.locator('#data-close').click()
   page.locator('#view-options').click();page.locator('#scope').select_option('1');page.locator('#locus-mode').select_option('20')
   assert page.evaluate('mode')==1 and page.evaluate('locusMode')=='20'
   page.locator('#scope').select_option('0');page.locator('#locus-mode').select_option('5');page.locator('#reset').click();page.locator('#view-close').click()
@@ -53,22 +79,25 @@ def check(url=None,headers=None):
   page.reload(wait_until='domcontentloaded')
   page.wait_for_function('window.POC && !document.querySelector("#loading")',timeout=60000)
   # Keyboard playback, smooth full turn, exact highlighted geometry and no UI counters.
-  page.evaluate('''()=>{document.activeElement.blur();window.framesSeen=[];window.treeRedraws=0;const oldDraw=gl.drawArrays.bind(gl);gl.drawArrays=(...a)=>{treeRedraws++;oldDraw(...a)};const oldUpdate=updateSweep;updateSweep=t=>{oldUpdate(t);framesSeen.push({t:performance.now(),p:sweep.progress,angle:sweep.angle,selected:selected?.i??null})}}''')
+  page.evaluate('''()=>{document.activeElement.blur();window.framesSeen=[];window.treeRedraws=0;const oldDraw=gl.drawArrays.bind(gl);gl.drawArrays=(...a)=>{treeRedraws++;oldDraw(...a)};const oldUpdate=updateSweep;updateSweep=t=>{oldUpdate(t);framesSeen.push({t:performance.now(),p:sweep.progress,angle:sweep.angle,selected:selected?.i??null,info:document.querySelector('#sel-id').textContent,expected:selected?.accession})}}''')
   page.keyboard.press('Space');page.wait_for_function('sweep.running && sweep.progress>.1')
-  assert page.locator('#selection').is_hidden()
+  assert page.locator('#selection').is_visible()
   try: page.wait_for_function('sweep.status==="complete"',timeout=12000)
   except Exception:
    print('sweep failure',page.evaluate('({sweep,hidden:document.hidden,frames:window.framesSeen?.length,focus:document.activeElement.tagName,now:performance.now(),redraws:treeRedraws,pending,zoom})'),errors,flush=True);page.screenshot(path=str(R/'sweep-failure.png'));print('after screenshot',page.evaluate('sweep'),flush=True);raise
-  result=page.evaluate('({frames:framesSeen,redraws:treeRedraws,angle:sweep.angle,selected,zoom})')
+  result=page.evaluate('({frames:framesSeen,redraws:treeRedraws,angle:sweep.angle,selected:selected?.i,pinned:pinnedAssembly?.i,zoom})')
   frames=result['frames'];duration=frames[-1]['t']-frames[1]['t']
   assert 3900<=duration<4700,duration
   assert len(frames)>35,len(frames)
   assert result['redraws']<6,result['redraws']
   assert abs(result['angle']-1.5*math.pi)<1e-9
-  assert result['selected'] is None and result['zoom']==1
+  assert result['selected']==33587 and result['pinned']==33587 and result['zoom']==1
+  assert all(f['info']==f['expected'] for f in frames), 'Info must match the highlighted strand every frame'
+  assert page.locator('#selection').is_visible()
+  page.screenshot(path=str(R/'sweep-info.png'))
   assert all(a['angle']<=b['angle'] for a,b in zip(frames,frames[1:]))
   page.keyboard.press('Space');page.wait_for_function('sweep.progress>.1 && sweep.running');page.keyboard.press('Escape')
-  assert not page.evaluate('sweep.running')
+  assert not page.evaluate('sweep.running') and page.evaluate('selected===null')
   # A phone layout has no horizontal overflow and retains all resource buttons.
   page.evaluate('reset()');page.mouse.move(0,0);page.set_viewport_size({'width':390,'height':844})
   page.wait_for_timeout(150)
@@ -76,9 +105,16 @@ def check(url=None,headers=None):
   assert page.locator('footer').bounding_box()['y']+page.locator('footer').bounding_box()['height']<=845
   assert all(x.is_visible() for x in page.locator('.resource-links a').all())
   page.screenshot(path=str(R/'presentation-mobile.png'))
+  page.mouse.click(*point(11000));assert page.locator('#selection').is_visible()
+  page.locator('h1').click();assert page.evaluate('selected===null')
+  # Capture mode must retain the info box too.
+  page.evaluate("document.documentElement.dataset.recording='true';POC.startSweep()")
+  page.wait_for_function('sweep.progress>.1 && sweep.running')
+  assert page.locator('#selection').is_visible()
+  page.evaluate('POC.stopSweep(false)')
   assert not errors,errors
   browser.close()
- return {'sweep_duration_ms':round(duration),'sweep_frames':len(frames),'background_redraws':result['redraws'],'layout':'desktop and mobile passed','hover_freeze_and_release':'passed','search_and_downloads':'passed','resource_links':5,'counter_and_button':'removed','errors':errors}
+ return {'sweep_duration_ms':round(duration),'sweep_frames':len(frames),'background_redraws':result['redraws'],'layout':'desktop and mobile passed','click_selection_and_anywhere_deselection':'passed','clicks_do_not_zoom':'passed','visible_home_reset':'passed','sweep_info_matches_strand':'passed','search_and_downloads':'passed','resource_links':5,'counter_and_button':'removed','errors':errors}
 
 if __name__=='__main__':
  result=check();(R/'presentation-verification.json').write_text(json.dumps(result,indent=2));print(json.dumps(result))

layers.js

@@ -79,17 +79,22 @@ function drawAtlasIcons(){
 }
 function hitIcon(x,y){return iconHits.find(h=>Math.hypot(h.x-x,h.y-y)<h.r)}
 function hitBar(x,y){if(locusMode==='off')return null;let p=world(x,y),rad=Math.hypot(...p);if(rad<R+2||rad>R+BAR_GAP+BAR_HEIGHT+8)return null;let angle=Math.atan2(p[1],p[0]);while(angle<START)angle+=TAU;if(angle>START+SPAN)return null;let i=Math.floor((angle-START)/SPAN*leaves.length),size=locusMode==='raw'?1:Number(locusMode);return locusBins[Math.floor(i/size)]||null}
-function hoverLayers(e){if(sweep.running)return;if(pinnedAssembly){$('#layer-tooltip').hidden=true;canvas.style.cursor='default';return;}if(document.querySelector('dialog[open]'))return;let box=stage.getBoundingClientRect(),x=e.clientX-box.left,y=e.clientY-box.top,dial=hitDial(x,y),ic=dial?null:hitIcon(x,y),bin=dial?null:hitBar(x,y),tip=$('#layer-tooltip');
- if(!ic&&!bin){tip.hidden=true;if(hoverBin){hoverBin=null;schedule()}const a=hitAssembly(x,y,3);canvas.style.cursor=a?'pointer':'default';hoverAssembly(a);return}
+function hoverLayers(e){if(sweep.running)return;if(pinnedAssembly){$('#layer-tooltip').hidden=true;canvas.style.cursor='pointer';return;}if(document.querySelector('dialog[open]'))return;let box=stage.getBoundingClientRect(),x=e.clientX-box.left,y=e.clientY-box.top,dial=hitDial(x,y),ic=dial?null:hitIcon(x,y),bin=dial?null:hitBar(x,y),tip=$('#layer-tooltip');
+ if(!ic&&!bin){tip.hidden=true;if(hoverBin){hoverBin=null;schedule()}const a=hitAssembly(x,y,3);canvas.style.cursor=a?'pointer':'default';return}
  canvas.style.cursor='pointer';
- hoverAssembly(!ic&&locusMode==='raw'?leaves[bin.lo]:null);
  if(!ic&&locusMode==='raw'){tip.hidden=true;if(hoverBin!==bin){hoverBin=bin;schedule()}return}
- if(ic){tip.innerHTML=`<b>${esc(ic.n.common||ic.n.name)}</b><span>${esc(ic.n.name)} · ${fmt(ic.n.count)} assemblies</span><span>${fmt(mode?ic.n.refMatches:ic.n.existing)} ${mode?'match the RefSeq comparison corpus':'have GenBank annotation records'}</span><small>Assembly counts, not gene counts · click to explore</small>`}
- else{const n=bin.hi-bin.lo,one=n===1,a=leaves[bin.lo];tip.innerHTML=`<b>${one?esc(a.name):shortCount(bin.value)+' predicted coding loci'}</b><span>${one?(bin.known?fmt(bin.value)+' predicted coding loci':'Locus count unavailable'):fmt(bin.known)+' of '+fmt(n)+' assemblies have counts'}</span><small>${one?esc(a.accession):'Sum of available counts · click to inspect individual bars'}</small>`;if(hoverBin!==bin){hoverBin=bin;schedule()}}
+ if(ic){tip.innerHTML=`<b>${esc(ic.n.common||ic.n.name)}</b><span>${esc(ic.n.name)} · ${fmt(ic.n.count)} assemblies</span><span>${fmt(mode?ic.n.refMatches:ic.n.existing)} ${mode?'match the RefSeq comparison corpus':'have GenBank annotation records'}</span><small>Assembly counts, not gene counts · click to select a strand</small>`}
+ else{const n=bin.hi-bin.lo,one=n===1,a=leaves[bin.lo];tip.innerHTML=`<b>${one?esc(a.name):shortCount(bin.value)+' predicted coding loci'}</b><span>${one?(bin.known?fmt(bin.value)+' predicted coding loci':'Locus count unavailable'):fmt(bin.known)+' of '+fmt(n)+' assemblies have counts'}</span><small>${one?esc(a.accession):'Sum of available counts · click to select an assembly'}</small>`;if(hoverBin!==bin){hoverBin=bin;schedule()}}
  tip.hidden=false;const wrap=$('.stage-wrap').getBoundingClientRect();tip.style.left=box.left-wrap.left+Math.max(8,Math.min(W-tip.offsetWidth-8,x+16))+'px';tip.style.top=box.top-wrap.top+Math.max(8,Math.min(H-tip.offsetHeight-8,y+15))+'px';
 }
-function focusNode(n){stopSweep(false);let pts=[point(n,n.mid)];for(let j=0;j<=16;j++)pts.push(polar(R,START+SPAN*(n.lo+(n.hi-n.lo)*j/16)/leaves.length));let xs=pts.map(p=>p[0]),ys=pts.map(p=>p[1]),minx=Math.min(...xs),maxx=Math.max(...xs),miny=Math.min(...ys),maxy=Math.max(...ys);zoom=Math.max(1,Math.min(35,Math.min(W/(maxx-minx+140),H/(maxy-miny+140))/baseScale));pan={x:-(minx+maxx)/2*baseScale*zoom,y:-(miny+maxy)/2*baseScale*zoom};clearSelection();$('#layer-tooltip').hidden=true;schedule()}
-function clickLayers(x,y){const ic=hitIcon(x,y);if(ic){focusNode(ic.n);return true}const b=hitBar(x,y);if(!b)return false;
- if(locusMode==='raw'){selectAssembly(leaves[b.lo]);return true}
- const mid=b.mid,p=polar(R+BAR_GAP,START+SPAN*(mid+.5)/leaves.length);locusMode='raw';$('#locus-mode').value='raw';makeLocusBins();zoom=24;pan={x:-p[0]*baseScale*zoom,y:-p[1]*baseScale*zoom};$('#layer-tooltip').hidden=true;schedule();return true;
+// Icons and bar bins resolve to real strands without changing the camera.
+function assemblyAtClick(x,y){
+ const dial=hitDial(x,y);if(dial)return dial;
+ const bin=hitBar(x,y);
+ if(bin){const p=world(x,y);let angle=Math.atan2(p[1],p[0]);while(angle<START)angle+=TAU;
+  const i=Math.max(bin.lo,Math.min(bin.hi-1,Math.floor((angle-START)/SPAN*leaves.length)));
+  return leaves[i];
+ }
+ const icon=hitIcon(x,y);
+ return nearest(x,y,7)||(icon?leaves[Math.round(icon.n.mid)]:null);
 }

presentation-verification.json

@@ -1,9 +1,12 @@
 {
-  "sweep_duration_ms": 4008,
-  "sweep_frames": 73,
+  "sweep_duration_ms": 4013,
+  "sweep_frames": 125,
   "background_redraws": 0,
   "layout": "desktop and mobile passed",
-  "hover_freeze_and_release": "passed",
+  "click_selection_and_anywhere_deselection": "passed",
+  "clicks_do_not_zoom": "passed",
+  "visible_home_reset": "passed",
+  "sweep_info_matches_strand": "passed",
   "search_and_downloads": "passed",
   "resource_links": 5,
   "counter_and_button": "removed",

provenance.json

@@ -71,7 +71,8 @@
   "presentation": {
     "updated_at": "2026-10-12",
     "layout": "Wide title, centered tree and five resource buttons; no sidebar",
-    "animation": "4-second sweep; no counters or visible playback button; keyboard Space or POC.startSweep()",
-    "data_changed": false
+    "animation": "4-second sweep with matching assembly info each frame; final assembly remains selected; no counters or playback button.",
+    "data_changed": false,
+    "interaction": "Click to select; next click anywhere clears. Icons, bars, double-clicks and search do not zoom. Visible Whole tree resets zoom/pan."
   }
 }

sweep.js

@@ -41,7 +41,8 @@ function updateSweep(progress){
  const t=sweep.progress,eased=t*t*(3-2*t);
  sweep.angle=NOON+TAU*eased;
  const n=leaves.length,count=Math.max(0,Math.min(n,Math.floor((sweep.angle-START)/SPAN*n+.5)));
- selected=count&&sweep.angle<=START+SPAN?leaves[count-1]:null;
+ const a=leaves[Math.max(0,Math.min(n-1,count-1))];
+ if(a!==selected||$('#selection').hidden)selectAssembly(a,false,false);
 }
 
 function updateSweepState(){
@@ -70,7 +71,8 @@ function startSweep(){
   updateSweep((now-sweep.startedAt)/SWEEP_DURATION);drawInteraction();
   if(sweep.progress<1){sweep.frame=requestAnimationFrame(step);return}
   sweep.running=false;sweep.status='complete';sweep.frame=0;
-  selected=pinnedAssembly=hoveredAssembly=null;
+  // Leave the final assembly visible so its details can be read after playback.
+  if(selected)selectAssembly(selected,true,false);
   updateSweepState();
   $('#sweep-announcement').textContent='Sweep complete.';
   drawInteraction();
@@ -81,6 +83,6 @@ function stopSweep(pin=true){
  if(!sweep.running)return;
  cancelAnimationFrame(sweep.frame);sweep.frame=0;sweep.running=false;sweep.status='stopped';
  updateSweepState();$('#sweep-announcement').textContent='Sweep stopped.';
- if(pin&&selected)selectAssembly(selected);else selected=pinnedAssembly=hoveredAssembly=null;
+ if(pin&&selected)selectAssembly(selected);else clearSelection();
  scheduleInteraction();
 }

template.html

@@ -9,6 +9,7 @@ h1{font-family:Manrope,Arial,sans-serif;font-size:clamp(29px,3.4vw,55px);font-we
 .wordmark{font-weight:800;white-space:nowrap}.wordmark em{font-style:normal;color:var(--green)}.title-separator{color:var(--muted);font-weight:400;margin:0 .24em}
 .stage-wrap{position:relative;min-width:0;min-height:0;width:100%;max-width:1600px;justify-self:center;overflow:hidden}
 #stage{position:absolute;inset:6px 24px 0;touch-action:none}canvas{position:absolute;width:100%;height:100%;inset:0}#tree{cursor:default;touch-action:none}#overlay,#interaction,#tree-still{pointer-events:none}#tree-still{visibility:hidden}[data-sweeping="true"] #tree,[data-sweeping="true"] #overlay{visibility:hidden}[data-sweeping="true"] #tree-still{visibility:visible}
+.home-control{position:absolute;left:24px;bottom:14px;z-index:6;display:flex;align-items:center;gap:8px;background:var(--panel);font-size:12px;padding:10px 14px;border-radius:4px}.home-control svg{width:15px;height:15px;stroke:var(--green);stroke-width:1.5;fill:none}[data-zoomed="true"] #selection{max-height:calc(100% - 82px)}
 .resources{padding:12px 24px 18px;text-align:center}
 .resource-links{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
 .resource-links a{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:12px 16px;min-width:120px;border:1px solid var(--rule);border-radius:4px;text-decoration:none;font-size:13px;font-weight:500;background:transparent}
@@ -16,7 +17,7 @@ h1{font-family:Manrope,Arial,sans-serif;font-size:clamp(29px,3.4vw,55px);font-we
 .utilities{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:9px}
 .utilities button{border:0;background:transparent;color:var(--muted);padding:6px 2px;font-size:10px}.utilities button:hover{color:var(--ink)}
 #theme-toggle{display:grid;place-items:center;width:26px;height:26px;padding:4px;flex-shrink:0}#theme-toggle svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.5;fill:none}[data-theme="dark"] .theme-moon,[data-theme="light"] .theme-sun{display:none}
-[data-recording="true"] .utilities{visibility:hidden}[data-recording="true"] #stage{pointer-events:none}[data-recording="true"] #selection,[data-recording="true"] #layer-tooltip{display:none!important}
+[data-recording="true"] .utilities{visibility:hidden}[data-recording="true"] #stage{pointer-events:none}[data-recording="true"] #layer-tooltip,[data-recording="true"] #home{display:none!important}[data-recording="true"] #selection{pointer-events:none}
 .tag{font-size:10px;letter-spacing:1.3px;color:var(--muted);text-transform:uppercase}
 #loading{position:absolute;inset:0;display:grid;place-content:center;background:var(--bg);color:var(--muted);z-index:10}
 #selection{position:absolute;right:24px;top:18px;width:295px;max-height:calc(100% - 36px);overflow:auto;background:var(--panel);border:1px solid var(--rule);box-shadow:0 8px 40px var(--shadow);z-index:5;padding:23px}
@@ -29,16 +30,17 @@ dialog{background:var(--panel);border:1px solid var(--rule);padding:32px;max-wid
 .legend,.locus-controls{border-top:1px solid var(--rule);padding-top:18px;margin-top:18px}.legend select,.locus-controls select{width:100%;border:0;border-bottom:1px solid var(--rule);padding:9px 0;margin:6px 0 12px;background:var(--panel);font-size:12px}.key{display:flex;align-items:center;gap:8px;font-size:11px;margin-bottom:10px}.key strong{margin-left:auto;font-weight:500;font-variant-numeric:tabular-nums}.sample-line{height:2px;width:21px;display:inline-block;background:var(--green);flex-shrink:0}.sample-line.blue{background:var(--blue)}.scope-note,.locus-controls p{font-size:10px;color:var(--muted);line-height:1.5;margin:10px 0 13px}.checkbox{font-size:11px;display:flex;gap:7px;align-items:center}.checkbox input{accent-color:var(--green)}.locus-controls strong{display:block;font-size:11px;font-weight:500;margin-top:10px}.icon-toggle{margin-top:12px}.quick{display:flex;gap:6px;margin:20px 0 6px}.quick button{font-size:11px;padding:8px 10px}.controls{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:18px}.controls button{font-size:11px;padding:7px 10px}.controls span{font-size:10px;padding:0 5px;min-width:42px;text-align:center;color:var(--muted)}
 #icon-credits{max-height:60vh;overflow:auto}#icon-credits table{border-collapse:collapse;width:100%;font-size:11px;text-align:left}#icon-credits th,#icon-credits td{padding:10px 8px;border-bottom:1px solid var(--rule)}#icon-credits a,#data-dialog a{color:var(--green)}.gene-label{font-size:11px;margin-top:28px;color:var(--muted)}#gene-svg{width:100%;height:auto;font:11px Inter;fill:var(--muted);margin:16px 0}.gene-notes{border-top:1px solid var(--rule);padding-top:15px;font-size:11px}#data-dialog pre{max-height:45vh;overflow:auto;border:1px solid var(--rule);background:var(--bg);padding:18px;font-size:11px;line-height:1.7;white-space:pre}#copy-status{font-size:11px;margin-left:12px;color:var(--green)}#data-dialog .data-setup{font-size:11px}
 .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
-@media(max-width:700px){.presentation{min-height:650px}.hero{padding:25px 22px 4px}h1{font-size:clamp(26px,5.8vw,38px);letter-spacing:-1px}.title-separator{display:none}.title-topic{display:block;margin-top:6px;font-size:.8em}#stage{inset:0 4px}.resource-links{gap:7px}.resource-links a{min-width:0;padding:10px 11px;gap:12px;font-size:11px}.resources{padding:8px 12px 14px}.utilities{margin-top:8px}#selection{width:275px;right:12px;top:10px;max-height:calc(100% - 20px)}dialog{padding:24px}}
+@media(max-width:700px){.presentation{min-height:650px}.hero{padding:25px 22px 4px}h1{font-size:clamp(26px,5.8vw,38px);letter-spacing:-1px}.title-separator{display:none}.title-topic{display:block;margin-top:6px;font-size:.8em}#stage{inset:0 4px}.resource-links{gap:7px}.resource-links a{min-width:0;padding:10px 11px;gap:12px;font-size:11px}.home-control{left:12px;bottom:10px}
+.resources{padding:8px 12px 14px}.utilities{margin-top:8px}#selection{width:275px;right:12px;top:10px;max-height:calc(100% - 20px)}dialog{padding:24px}}
 @media(prefers-reduced-motion:no-preference){button,.resource-links a{transition:background .15s,border-color .15s}}
 </style></head><body>
 <main class="presentation">
 <header class="hero"><h1><span class="wordmark">Carbon-<em>A</em></span><span class="title-separator" aria-hidden="true"> · </span><span class="title-topic">Across the tree of life</span></h1></header>
 <section class="stage-wrap" aria-label="Carbon-A assembly tree">
 <span id="sweep-announcement" class="visually-hidden" role="status"></span>
-<div id="stage"><canvas id="tree" aria-label="Interactive taxonomic tree of assembly strands. Hover to inspect, click to freeze, and scroll to zoom. Search is in View options."></canvas><canvas id="tree-still" aria-hidden="true"></canvas><canvas id="overlay" aria-hidden="true"></canvas><canvas id="interaction" aria-hidden="true"></canvas><div id="loading">Preparing the assembly tree…</div></div>
-<div id="layer-tooltip" hidden></div><section id="selection" hidden><button id="sel-close" aria-label="Close assembly details">×</button><div id="sel-state">Hover preview</div><h2 id="sel-name"></h2><a id="sel-id" target="_blank" rel="noopener"></a><div id="sel-lineage"></div><div id="sel-status"></div><div id="sel-data"></div><div class="data-access"><a id="sel-files" target="_blank" rel="noopener">Annotation files ↗</a><br><button id="sel-download">Get annotation data ↗</button><p id="sel-availability"></p></div><button id="sel-focus">Follow this strand ↗</button><button id="sel-loci" hidden>See coding regions →</button></section></section>
+<div id="stage"><canvas id="tree" aria-label="Interactive taxonomic tree of assembly strands. Click a strand to select it; click anywhere again to clear. Scroll to zoom. Search is in View options."></canvas><canvas id="tree-still" aria-hidden="true"></canvas><canvas id="overlay" aria-hidden="true"></canvas><canvas id="interaction" aria-hidden="true"></canvas><div id="loading">Preparing the assembly tree…</div></div>
+<button id="home" class="home-control" hidden aria-label="Return to the whole tree"><svg viewBox="0 0 20 20" aria-hidden="true"><path d="m2 9 8-7 8 7M4 8v9h5v-5h2v5h5V8"/></svg>Whole tree</button><div id="layer-tooltip" hidden></div><section id="selection" hidden><button id="sel-close" aria-label="Close assembly details">×</button><div id="sel-state">Selected</div><h2 id="sel-name"></h2><a id="sel-id" target="_blank" rel="noopener"></a><div id="sel-lineage"></div><div id="sel-status"></div><div id="sel-data"></div><div class="data-access"><a id="sel-files" target="_blank" rel="noopener">Annotation files ↗</a><br><button id="sel-download">Get annotation data ↗</button><p id="sel-availability"></p></div><button id="sel-focus">Zoom to this strand ↗</button><button id="sel-loci" hidden>See coding regions →</button></section></section>
 <footer class="resources"><nav class="resource-links" aria-label="Carbon-A resources"><a href="https://huggingface.co/HuggingFaceBio/Carbon-A-1.2B" target="_blank" rel="noopener">Model<span aria-hidden="true">↗</span></a><a href="https://huggingface.co/buckets/HuggingFaceBio/genbank-annotations" target="_blank" rel="noopener">Database<span aria-hidden="true">↗</span></a><a href="https://huggingface.co/spaces/HuggingFaceBio/carbon-a-database-explorer" target="_blank" rel="noopener">Explorer<span aria-hidden="true">↗</span></a><a href="https://huggingface.co/buckets/HuggingFaceBio/Carbon-A-Technical-Report" target="_blank" rel="noopener">Paper<span aria-hidden="true">↗</span></a><a href="https://huggingface.co/blog/HuggingFaceBio/carbon-annotator-genbank-genome-annotation" target="_blank" rel="noopener">Blog<span aria-hidden="true">↗</span></a></nav><div class="utilities"><button id="view-options">View options</button><button id="about">About the data</button><button id="theme-toggle" aria-label="Switch to light mode" title="Switch to light mode"><svg class="theme-sun" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 1v3m0 16v3M1 12h3m16 0h3M4.2 4.2l2.1 2.1m11.4 11.4 2.1 2.1M4.2 19.8l2.1-2.1M17.7 6.3l2.1-2.1"/></svg><svg class="theme-moon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20.5 14.5A9 9 0 0 1 9.5 3.5a9 9 0 1 0 11 11Z"/></svg></button></div></footer>
 </main>
-<dialog id="view-dialog"><button id="view-close" class="dialog-close" aria-label="Close view options">×</button><h2>Explore the tree</h2><div class="searchbox"><input id="search" type="search" aria-label="Search assemblies or species" placeholder="Search a species or assembly…" disabled autocomplete="off"><div id="results"></div></div><section class="locus-controls"><label class="tag" for="locus-mode">Coding loci at the strand tips</label><select id="locus-mode"><option value="5">Binned · 5 assemblies per bar</option><option value="20">Binned · 20 assemblies per bar</option><option value="50">Binned · 50 assemblies per bar</option><option value="200">Binned · 200 assemblies per bar</option><option value="raw">Individual assemblies</option><option value="off">Hide locus bars</option></select><strong id="locus-readout"></strong><p id="locus-explain"></p><label class="checkbox icon-toggle"><input type="checkbox" id="show-icons" checked>Genome Atlas silhouettes</label></section><section class="legend"><label class="tag" for="scope">Compare assembly records</label><select id="scope"><option value="0">GenBank annotation records</option><option value="1">RefSeq comparison corpus</option></select><div class="key"><i class="sample-line blue"></i><span id="blue-label"></span><strong id="blue-count"></strong></div><div class="key"><i class="sample-line"></i><span id="green-label"></span><strong id="green-count"></strong></div><label class="checkbox"><input id="existing-only" type="checkbox">Emphasise matching assemblies</label><p id="scope-note" class="scope-note"></p></section><div class="controls"><button id="detail">Strand detail</button><button id="zoomout" aria-label="Zoom out">−</button><span id="zoom-readout">1.0×</span><button id="zoomin" aria-label="Zoom in">+</button><button id="reset">Whole tree</button></div><div class="quick"><button id="human">Find a human assembly ↗</button><button id="gene-open">Its coding regions →</button></div><p>Hover to inspect · Click to freeze · Click outside to release.<br>Scroll to zoom · Drag to pan · Space to animate.</p></dialog>
-<dialog id="gene-dialog"><button class="dialog-close" id="gene-close" aria-label="Close coding-region view">×</button><span class="tag">From an assembly to its annotations</span><h2 style="margin-top:16px">Homo sapiens</h2><p id="gene-summary"></p><div class="gene-label">GCA_000001405.29 · chromosome 1, CM000663.2 · first 1,000,000 bases<br>Upper track: forward strand · lower track: reverse strand</div><svg id="gene-svg" viewBox="0 0 1110 210" role="img" aria-label="Actual predicted coding segments in the first one million bases of human chromosome 1"></svg><p id="gene-count-window"></p><p class="gene-notes">Real coordinates from the published Carbon-A GFF3. These are model predictions, not experimentally confirmed genes. The blue/green tree colours describe annotation records for an assembly; they do not classify individual loci as known or new.</p></dialog><dialog id="about-dialog"><button class="dialog-close" id="about-close" aria-label="Close data information">×</button><h2>What is being drawn</h2><p>Each of the <span id="shown">33,588</span> strands across <span id="taxa-shown">16,976</span> taxa is a distinct accession from the explorer’s covered-assembly table, mapped through the NCBI taxonomy. This is a subset of the release. No assemblies or taxonomic branches have been invented to fill out the release total.</p><ul><li>Tree and common names: the existing HuggingFaceBio GenBank annotation explorer, 7 October 2026.</li><li>Existing annotation evidence: the cached NCBI GenBank assembly summary, 7 October 2026; a named annotation provider is required.</li><li>RefSeq mode counts matching assemblies, not genes: exact versioned matches between an assembly’s paired GCF accession and the project’s 2,055-assembly comparison corpus. It does not cover all RefSeq annotations.</li><li>Gene detail: actual published GFF3 coordinates and metadata for GCA_000001405.29.</li><li>Release totals supplied on 8 October 2026: 48,167 assemblies, 22,617 taxa, 566.34M coding loci and 27.18 Tbp.</li></ul><p>The centre hand points to the selected strand. Hover or drag inside the centre to select by direction; click to freeze and click outside the tree to release. For video capture, press Space to start or replay a four-second clockwise sweep. Escape stops it. The sweep has no counters.</p><p>Equal-width assembly strands preserve count through shared ancestors. At overview scale many strands fall within a pixel; zoom reveals them separately. Radius and branch length are layout choices, not dates or evolutionary distances.</p><p>For example, the human branch contains 1,412 assemblies: 2 match the project’s RefSeq comparison corpus, while 4 have annotation-provider records in this GenBank snapshot. These small counts describe assembly records, not human genes. RefSeq annotations are maintained separately from GenBank submission annotations. <a href="https://www.ncbi.nlm.nih.gov/refseq/about/human/" target="_blank" rel="noopener">NCBI’s explanation of human reference annotation</a>.</p><p>The outer bars sum measured gene_count values from published per-assembly metadata. Bins contain consecutive assembly tips in taxonomy order. Grey base marks indicate the fraction of assemblies without counts; these are not treated as measured zeros. The radial scale is linear and recalculated for each bin size. Colours within the tree classify assemblies; the green outer bars count all predicted loci, regardless of prior annotation status.</p><p>Silhouettes are the original PhyloPic assets and taxon assignments used by the Genome Atlas. Click an icon to explore its branch. <button id="credits-open">Icon credits and licences</button></p><p><a href="https://huggingface.co/spaces/HuggingFaceBio/carbon-a-database-explorer" target="_blank" rel="noopener">Source explorer ↗</a> · <a href="https://www.ncbi.nlm.nih.gov/datasets/docs/v2/reference-docs/ftp-browsing/" target="_blank" rel="noopener">NCBI metadata ↗</a></p></dialog><dialog id="credits-dialog"><button id="credits-close" class="dialog-close" aria-label="Close icon credits">×</button><h2>Genome Atlas silhouettes</h2><p>Original PhyloPic silhouettes, reused with the atlas’s taxonomic assignments. Their fill colour is adapted to the selected theme; original SVG files are preserved in the source data. Each image’s source page and licence are linked below.</p><div id="icon-credits"></div></dialog><dialog id="data-dialog"><button id="data-close" class="dialog-close" aria-label="Close download instructions">×</button><h2>Get annotation data</h2><p id="data-assembly"></p><p id="data-description"></p><p><a id="data-browse" target="_blank" rel="noopener">Browse annotation files ↗</a></p><p class="data-setup">Install <code>huggingface_hub</code> and run <code>hf auth login</code> with an account that can access the bucket.</p><pre><code id="data-code"></code></pre><button id="data-copy">Copy Python code</button><span id="copy-status" role="status"></span><p><a href="https://huggingface.co/docs/huggingface_hub/guides/buckets#download-files" target="_blank" rel="noopener">Hugging Face download documentation ↗</a></p></dialog><script id="dataset" type="application/octet-stream">__DATA__</script><script>__SCRIPT__</script></body></html>
+<dialog id="view-dialog"><button id="view-close" class="dialog-close" aria-label="Close view options">×</button><h2>Explore the tree</h2><div class="searchbox"><input id="search" type="search" aria-label="Search assemblies or species" placeholder="Search a species or assembly…" disabled autocomplete="off"><div id="results"></div></div><section class="locus-controls"><label class="tag" for="locus-mode">Coding loci at the strand tips</label><select id="locus-mode"><option value="5">Binned · 5 assemblies per bar</option><option value="20">Binned · 20 assemblies per bar</option><option value="50">Binned · 50 assemblies per bar</option><option value="200">Binned · 200 assemblies per bar</option><option value="raw">Individual assemblies</option><option value="off">Hide locus bars</option></select><strong id="locus-readout"></strong><p id="locus-explain"></p><label class="checkbox icon-toggle"><input type="checkbox" id="show-icons" checked>Genome Atlas silhouettes</label></section><section class="legend"><label class="tag" for="scope">Compare assembly records</label><select id="scope"><option value="0">GenBank annotation records</option><option value="1">RefSeq comparison corpus</option></select><div class="key"><i class="sample-line blue"></i><span id="blue-label"></span><strong id="blue-count"></strong></div><div class="key"><i class="sample-line"></i><span id="green-label"></span><strong id="green-count"></strong></div><label class="checkbox"><input id="existing-only" type="checkbox">Emphasise matching assemblies</label><p id="scope-note" class="scope-note"></p></section><div class="controls"><button id="detail">Strand detail</button><button id="zoomout" aria-label="Zoom out">−</button><span id="zoom-readout">1.0×</span><button id="zoomin" aria-label="Zoom in">+</button><button id="reset">Whole tree</button></div><div class="quick"><button id="human">Find a human assembly ↗</button><button id="gene-open">Its coding regions →</button></div><p>Click a strand to select · Click anywhere again to clear.<br>Scroll to zoom · Drag to pan · Space to animate.</p></dialog>
+<dialog id="gene-dialog"><button class="dialog-close" id="gene-close" aria-label="Close coding-region view">×</button><span class="tag">From an assembly to its annotations</span><h2 style="margin-top:16px">Homo sapiens</h2><p id="gene-summary"></p><div class="gene-label">GCA_000001405.29 · chromosome 1, CM000663.2 · first 1,000,000 bases<br>Upper track: forward strand · lower track: reverse strand</div><svg id="gene-svg" viewBox="0 0 1110 210" role="img" aria-label="Actual predicted coding segments in the first one million bases of human chromosome 1"></svg><p id="gene-count-window"></p><p class="gene-notes">Real coordinates from the published Carbon-A GFF3. These are model predictions, not experimentally confirmed genes. The blue/green tree colours describe annotation records for an assembly; they do not classify individual loci as known or new.</p></dialog><dialog id="about-dialog"><button class="dialog-close" id="about-close" aria-label="Close data information">×</button><h2>What is being drawn</h2><p>Each of the <span id="shown">33,588</span> strands across <span id="taxa-shown">16,976</span> taxa is a distinct accession from the explorer’s covered-assembly table, mapped through the NCBI taxonomy. This is a subset of the release. No assemblies or taxonomic branches have been invented to fill out the release total.</p><ul><li>Tree and common names: the existing HuggingFaceBio GenBank annotation explorer, 7 October 2026.</li><li>Existing annotation evidence: the cached NCBI GenBank assembly summary, 7 October 2026; a named annotation provider is required.</li><li>RefSeq mode counts matching assemblies, not genes: exact versioned matches between an assembly’s paired GCF accession and the project’s 2,055-assembly comparison corpus. It does not cover all RefSeq annotations.</li><li>Gene detail: actual published GFF3 coordinates and metadata for GCA_000001405.29.</li><li>Release totals supplied on 8 October 2026: 48,167 assemblies, 22,617 taxa, 566.34M coding loci and 27.18 Tbp.</li></ul><p>The centre hand points to the selected strand. Click a strand or inside the centre to select an assembly. Click anywhere again to clear the selection. Clicking icons and bars also selects an assembly without zooming; use the scroll wheel or zoom controls to zoom and Whole tree to return. For video capture, press Space to start or replay a four-second clockwise sweep. Escape stops it. The assembly info box follows the highlighted strand and remains on the final assembly when playback finishes. The sweep has no counters.</p><p>Equal-width assembly strands preserve count through shared ancestors. At overview scale many strands fall within a pixel; zoom reveals them separately. Radius and branch length are layout choices, not dates or evolutionary distances.</p><p>For example, the human branch contains 1,412 assemblies: 2 match the project’s RefSeq comparison corpus, while 4 have annotation-provider records in this GenBank snapshot. These small counts describe assembly records, not human genes. RefSeq annotations are maintained separately from GenBank submission annotations. <a href="https://www.ncbi.nlm.nih.gov/refseq/about/human/" target="_blank" rel="noopener">NCBI’s explanation of human reference annotation</a>.</p><p>The outer bars sum measured gene_count values from published per-assembly metadata. Bins contain consecutive assembly tips in taxonomy order. Grey base marks indicate the fraction of assemblies without counts; these are not treated as measured zeros. The radial scale is linear and recalculated for each bin size. Colours within the tree classify assemblies; the green outer bars count all predicted loci, regardless of prior annotation status.</p><p>Silhouettes are the original PhyloPic assets and taxon assignments used by the Genome Atlas. Click an icon to select a strand at that node. <button id="credits-open">Icon credits and licences</button></p><p><a href="https://huggingface.co/spaces/HuggingFaceBio/carbon-a-database-explorer" target="_blank" rel="noopener">Source explorer ↗</a> · <a href="https://www.ncbi.nlm.nih.gov/datasets/docs/v2/reference-docs/ftp-browsing/" target="_blank" rel="noopener">NCBI metadata ↗</a></p></dialog><dialog id="credits-dialog"><button id="credits-close" class="dialog-close" aria-label="Close icon credits">×</button><h2>Genome Atlas silhouettes</h2><p>Original PhyloPic silhouettes, reused with the atlas’s taxonomic assignments. Their fill colour is adapted to the selected theme; original SVG files are preserved in the source data. Each image’s source page and licence are linked below.</p><div id="icon-credits"></div></dialog><dialog id="data-dialog"><button id="data-close" class="dialog-close" aria-label="Close download instructions">×</button><h2>Get annotation data</h2><p id="data-assembly"></p><p id="data-description"></p><p><a id="data-browse" target="_blank" rel="noopener">Browse annotation files ↗</a></p><p class="data-setup">Install <code>huggingface_hub</code> and run <code>hf auth login</code> with an account that can access the bucket.</p><pre><code id="data-code"></code></pre><button id="data-copy">Copy Python code</button><span id="copy-status" role="status"></span><p><a href="https://huggingface.co/docs/huggingface_hub/guides/buckets#download-files" target="_blank" rel="noopener">Hugging Face download documentation ↗</a></p></dialog><script id="dataset" type="application/octet-stream">__DATA__</script><script>__SCRIPT__</script></body></html>