Atlas: auto-reveal products grid below on center; shorter graph pane so grid peeks

319762ae627ef1f6502fc3a90e6d428dadc61f8a · 2026-07-30 11:53:32 -0700 · Steve Abrams

Files touched

M public/index.html

Diff

commit 319762ae627ef1f6502fc3a90e6d428dadc61f8a
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Thu Jul 30 11:53:32 2026 -0700

    Atlas: auto-reveal products grid below on center; shorter graph pane so grid peeks
---
 public/index.html | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/public/index.html b/public/index.html
index 7078371..a89b768 100644
--- a/public/index.html
+++ b/public/index.html
@@ -51,7 +51,7 @@ aside h2{font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:var(
 
 /* right column scrolls: graph on top, product grid below */
 .stage{position:relative;min-height:0;overflow-y:auto}
-.graphwrap{position:relative;height:60vh;min-height:420px}
+.graphwrap{position:relative;height:56vh;min-height:400px}
 #crumbs{position:absolute;top:12px;left:16px;z-index:4;display:flex;gap:6px;align-items:center;font-size:12px;flex-wrap:wrap;max-width:70%}
 #crumbs a{color:var(--muted);cursor:pointer;text-decoration:none;border-bottom:1px dotted #3a3c46}
 #crumbs a:hover{color:var(--amber);border-color:var(--amber)}
@@ -143,7 +143,7 @@ function init(){
   document.getElementById('built').textContent='built '+new Date(G.builtAt).toLocaleString(undefined,{month:'short',day:'numeric',hour:'numeric',minute:'2-digit'})+' · '+G.coverage.total.toLocaleString()+' imaged products';
   renderCover(); renderSwatches(); renderGroupBtns();
   const colors=Object.values(G.nodes).filter(n=>n.type==='color').sort((a,b)=>b.count-a.count);
-  center(colors[0].key,true);
+  center(colors[0].key,true,false); // no auto-scroll on first paint
 }
 function renderCover(){
   const c=G.coverage;
@@ -171,11 +171,15 @@ function renderGroupBtns(){
     return top?`<button data-key="${top.key}">Top ${lbl}: ${top.label} (${top.count.toLocaleString()})</button>`:'';}).join('');
   box.querySelectorAll('button').forEach(b=>b.onclick=()=>center(b.dataset.key,true));
 }
-function center(key,reset){
+function center(key,reset,scroll){
   if(!G.nodes[key])return; current=key;
   if(reset)trail=[key]; else if(trail[trail.length-1]!==key)trail.push(key);
   document.querySelectorAll('.sw').forEach(s=>s.classList.toggle('active',s.dataset.key===key));
   renderCrumbs(); draw(); openGrid(key);
+  if(scroll!==false){ // reveal the grid below whenever a node lands in center
+    const ph=document.getElementById('phead');
+    if(ph) ph.scrollIntoView({behavior:'smooth',block:'start'});
+  }
 }
 function renderCrumbs(){
   document.getElementById('crumbs').innerHTML=trail.map((k,i)=>`<a data-i="${i}">${esc(G.nodes[k].label)}</a>`+(i<trail.length-1?'<span class="sep">›</span>':'')).join('');

← 5ef1711 Atlas: product-photo nodes (clipped thumbnails) + click-to-o · back to Catalog Crawl Atlas · Atlas: accumulating multi-facet filter — drilling stacks col bc458ad →