mego viewer: HF download links for dataset files, spans auto-scroll to current step, projection off by default

egoSample/mego.html

@@ -114,7 +114,7 @@ const EPS = D.eps, SKC = D.skc, CAL = D.cal;
 const CAMS = ["head_fisheye","head_fisheye_left","head_fisheye_right","head_stereo_left","head_stereo_right"];
 const KLAB = {wild:"In-the-wild", sim:"Simulated-scenario (staged)"};
 const AX = {x:"#e0616f", y:"#41c76b", z:"#4f8ff7"};
-let cur=-1, vids=[], master=null, playing=false, EP=null, SIG=null, raf=0, _toggle=null;
+let cur=-1, vids=[], master=null, playing=false, EP=null, SIG=null, raf=0, _toggle=null, _lastCi=-2;
 let orbH={yaw:0,pitch:-0.28,drag:0}, orbP={yaw:0,pitch:-0.28,drag:0};
 
 const esc = s => (s||'').replace(/[&<>"]/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c]));
@@ -177,6 +177,7 @@ function loadSig(slug){
 
 /* ---------- render ---------- */
 function render(){
+  _lastCi=-2;
   const e=EP, dur=e.duration, segs=e.segments;
   const skc=s=>SKC[s]||'#666';
 
@@ -204,14 +205,15 @@ function render(){
     `<span class="it"><span class="sw" style="background:${skc(s)}"></span>${s} <b style="color:#e6e8ee">${e.skills[s]}</b></span>`).join('');
   const validRows = Object.entries(e.valids).map(([k,v])=>
     `<div class="ro"><span class="k">${k}</span><span class="v ${v<0.98?'':'hi'}">${(v*100).toFixed(1)}%</span></div>`).join('');
-  const dir = e.task+'/0';
-  const epp = String(e.ep).padStart(3,'0');
+  const HF = 'https://huggingface.co/datasets/faradayfuture/egoSample';
+  const HFDIR = HF+'/tree/main/mego_'+e.slug;
+  const raw = f => HF+'/resolve/main/mego_'+e.slug+'/'+f;
   const camDl = CAMS.map(c=>`<a class="fc dl" href="media/${e.slug}/${c}.mp4" download="${e.slug}_${c}.mp4">${c}.mp4</a>`).join('');
   const refChips = [
-    `data/chunk-000/file-${epp}.parquet`,
+    'data/file-000.parquet',
     'meta/ff/segments.parquet','meta/ff/episode_meta.parquet',
     'meta/ff/camera_params.json','meta/ff/quality.json','meta/info.json'
-  ].map(f=>`<span class="fc dim">${f}</span>`).join('');
+  ].map(f=>`<a class="fc dl" href="${raw(f)}" target="_blank" rel="noopener">${f}</a>`).join('');
 
   document.getElementById('main').innerHTML = `
   <header>
@@ -249,7 +251,7 @@ function render(){
     <button id="play">&#9654;</button>
     <input type="range" id="seek" min="0" max="1000" value="0">
     <span class="t" id="tlab">0:00.00 / ${fmt(dur)}</span>
-    <label><input type="checkbox" id="ovck" checked> project hand pose on head_fisheye</label>
+    <label><input type="checkbox" id="ovck"> project hand pose on head_fisheye</label>
   </div>
   <div class="badges" style="padding:0 20px;margin-top:8px">
     <span class="bdg"><b>${e.nframes}</b> frames</span>
@@ -295,7 +297,7 @@ function render(){
   <div class="panel" style="margin:14px 20px 30px;padding:11px 16px">
     <div class="rt">episode clips &mdash; click to download</div>
     <div class="files" style="padding:0 0 6px">${camDl}</div>
-    <div class="rt" style="margin-top:8px">dataset files &middot; Mego-view/${dir}/</div>
+    <div class="rt" style="margin-top:8px">dataset files &middot; <a href="${HFDIR}" target="_blank" rel="noopener" style="text-transform:none;color:#7fe0a0">full episode on HuggingFace &rarr;</a></div>
     <div class="files" style="padding:0">${refChips}</div>
   </div>`;
 
@@ -390,8 +392,17 @@ function updateUI(t){
   const ci=curSpan(t);
   document.getElementById('roSk').textContent = ci>=0?segs[ci].skill:'–';
   document.getElementById('roSp').textContent = ci>=0?`${ci+1} / ${segs.length}`:'–';
-  document.querySelectorAll('#slist .si').forEach((el,k)=>el.classList.toggle('on',k===ci));
+  const slEls=document.querySelectorAll('#slist .si');
+  slEls.forEach((el,k)=>el.classList.toggle('on',k===ci));
   document.querySelectorAll('#chips .chip').forEach((el,k)=>el.classList.toggle('on',k===ci));
+  // keep the current span visible inside the spans list (scrolls only that container)
+  if(ci>=0 && slEls[ci] && ci!==_lastCi){
+    const sl=document.getElementById('slist'), el=slEls[ci];
+    const top=el.offsetTop-sl.offsetTop, bot=top+el.offsetHeight;
+    if(top<sl.scrollTop || bot>sl.scrollTop+sl.clientHeight)
+      sl.scrollTop = top - sl.clientHeight/2 + el.offsetHeight/2;
+  }
+  _lastCi=ci;
   if(SIG){
     const j=Math.min(SIG.n-1, Math.round(t*SIG.fps));
     const gx=SIG.headImu.gyro[j], ax=SIG.headImu.acc[j];