diff --git a/docs/plans/site-ui-4-shots/dag/demo-feed-proven-1000-dark.jpg b/docs/plans/site-ui-4-shots/dag/demo-feed-proven-1000-dark.jpg new file mode 100644 index 000000000..4507088e3 Binary files /dev/null and b/docs/plans/site-ui-4-shots/dag/demo-feed-proven-1000-dark.jpg differ diff --git a/docs/plans/site-ui-4-shots/dag/home-1440-dark-mid.jpg b/docs/plans/site-ui-4-shots/dag/home-1440-dark-mid.jpg index 3eb2106b7..685facd6b 100644 Binary files a/docs/plans/site-ui-4-shots/dag/home-1440-dark-mid.jpg and b/docs/plans/site-ui-4-shots/dag/home-1440-dark-mid.jpg differ diff --git a/docs/plans/site-ui-4-shots/dag/home-1440-light-mid.jpg b/docs/plans/site-ui-4-shots/dag/home-1440-light-mid.jpg index 018c664a2..e8fe6e63f 100644 Binary files a/docs/plans/site-ui-4-shots/dag/home-1440-light-mid.jpg and b/docs/plans/site-ui-4-shots/dag/home-1440-light-mid.jpg differ diff --git a/docs/plans/site-ui-4-shots/dag/home-390-dark-mid.jpg b/docs/plans/site-ui-4-shots/dag/home-390-dark-mid.jpg index 7be5f21e2..a5d1d5012 100644 Binary files a/docs/plans/site-ui-4-shots/dag/home-390-dark-mid.jpg and b/docs/plans/site-ui-4-shots/dag/home-390-dark-mid.jpg differ diff --git a/docs/plans/site-ui-4-shots/dag/home-390-light-mid.jpg b/docs/plans/site-ui-4-shots/dag/home-390-light-mid.jpg index c9c68d60d..e67568d6c 100644 Binary files a/docs/plans/site-ui-4-shots/dag/home-390-light-mid.jpg and b/docs/plans/site-ui-4-shots/dag/home-390-light-mid.jpg differ diff --git a/docs/plans/site-ui-4-shots/dag/live-1440-dark-mid.jpg b/docs/plans/site-ui-4-shots/dag/live-1440-dark-mid.jpg index 9022d75be..e07c991d5 100644 Binary files a/docs/plans/site-ui-4-shots/dag/live-1440-dark-mid.jpg and b/docs/plans/site-ui-4-shots/dag/live-1440-dark-mid.jpg differ diff --git a/docs/plans/site-ui-4-shots/dag/live-1440-dark-selected.jpg b/docs/plans/site-ui-4-shots/dag/live-1440-dark-selected.jpg index 06eeba9cb..fdd951e77 100644 Binary files a/docs/plans/site-ui-4-shots/dag/live-1440-dark-selected.jpg and b/docs/plans/site-ui-4-shots/dag/live-1440-dark-selected.jpg differ diff --git a/docs/plans/site-ui-4-shots/dag/live-1440-light-mid.jpg b/docs/plans/site-ui-4-shots/dag/live-1440-light-mid.jpg index 5d165717f..9f40157ae 100644 Binary files a/docs/plans/site-ui-4-shots/dag/live-1440-light-mid.jpg and b/docs/plans/site-ui-4-shots/dag/live-1440-light-mid.jpg differ diff --git a/docs/plans/site-ui-4-shots/dag/live-1440-light-selected.jpg b/docs/plans/site-ui-4-shots/dag/live-1440-light-selected.jpg index 1d8350a56..7e0cc4a0f 100644 Binary files a/docs/plans/site-ui-4-shots/dag/live-1440-light-selected.jpg and b/docs/plans/site-ui-4-shots/dag/live-1440-light-selected.jpg differ diff --git a/docs/plans/site-ui-4-shots/dag/live-390-dark-mid.jpg b/docs/plans/site-ui-4-shots/dag/live-390-dark-mid.jpg index 6ff647b5c..41ba8dc10 100644 Binary files a/docs/plans/site-ui-4-shots/dag/live-390-dark-mid.jpg and b/docs/plans/site-ui-4-shots/dag/live-390-dark-mid.jpg differ diff --git a/docs/plans/site-ui-4-shots/dag/live-390-dark-selected.jpg b/docs/plans/site-ui-4-shots/dag/live-390-dark-selected.jpg index b9ed5c28b..c0945219a 100644 Binary files a/docs/plans/site-ui-4-shots/dag/live-390-dark-selected.jpg and b/docs/plans/site-ui-4-shots/dag/live-390-dark-selected.jpg differ diff --git a/docs/plans/site-ui-4-shots/dag/live-390-light-mid.jpg b/docs/plans/site-ui-4-shots/dag/live-390-light-mid.jpg index 58dfd7747..ac9b63436 100644 Binary files a/docs/plans/site-ui-4-shots/dag/live-390-light-mid.jpg and b/docs/plans/site-ui-4-shots/dag/live-390-light-mid.jpg differ diff --git a/docs/plans/site-ui-4-shots/dag/live-390-light-selected.jpg b/docs/plans/site-ui-4-shots/dag/live-390-light-selected.jpg index 19417325a..b18c2d309 100644 Binary files a/docs/plans/site-ui-4-shots/dag/live-390-light-selected.jpg and b/docs/plans/site-ui-4-shots/dag/live-390-light-selected.jpg differ diff --git a/docs/plans/site-ui-4-shots/dag/live-scene-10s.gif b/docs/plans/site-ui-4-shots/dag/live-scene-10s.gif index 70da72c4c..0d153e122 100644 Binary files a/docs/plans/site-ui-4-shots/dag/live-scene-10s.gif and b/docs/plans/site-ui-4-shots/dag/live-scene-10s.gif differ diff --git a/docs/plans/site-ui-4-shots/dag/live-scene-10s.mp4 b/docs/plans/site-ui-4-shots/dag/live-scene-10s.mp4 index 17d0aa655..39ce324a5 100644 Binary files a/docs/plans/site-ui-4-shots/dag/live-scene-10s.mp4 and b/docs/plans/site-ui-4-shots/dag/live-scene-10s.mp4 differ diff --git a/docs/plans/site-ui-4-shots/dag/live-scene-10s.webm b/docs/plans/site-ui-4-shots/dag/live-scene-10s.webm index 7a4035341..877e540f0 100644 Binary files a/docs/plans/site-ui-4-shots/dag/live-scene-10s.webm and b/docs/plans/site-ui-4-shots/dag/live-scene-10s.webm differ diff --git a/docs/plans/site-ui-4-shots/dag/side-by-side-live-vs-demo.jpg b/docs/plans/site-ui-4-shots/dag/side-by-side-live-vs-demo.jpg new file mode 100644 index 000000000..bad6744f1 Binary files /dev/null and b/docs/plans/site-ui-4-shots/dag/side-by-side-live-vs-demo.jpg differ diff --git a/site/index.html b/site/index.html index e4b705f5d..98692928b 100644 --- a/site/index.html +++ b/site/index.html @@ -296,7 +296,7 @@ function caption(d){var nb=null;(d.blocks||[]).forEach(function(b){if(!nb||b.ts>nb.ts)nb=b;});if(!nb)return;var sh=nb.shards||[],w=nb.locked?'locked checkpoint':nb.proven?'proven':nb.chain?'on the selected chain':nb.color==='blue'?'included':nb.color==='red'?'excluded':'pending'; cap.classList.remove('muted');cap.textContent=(nb.number?'block '+fmtN(nb.number):nb.hash)+': mined '+hms(nb.ts)+', '+w+(sh.length?'; '+sh.length+(sh.length===1?' shard ':' shards ')+(sh.every(function(x){return x.state==='paid';})?'paid':sh.some(function(x){return x.state==='verified'||x.state==='paid';})?'proven':sh.some(function(x){return x.state==='proving';})?'proving':'planned'):'');} var c=document.getElementById('dag'),dag=null; - if(c&&window.IgneumFeed&&window.IgneumDag){dag=IgneumDag.mount(c,{poll:false,window:90,tooltip:document.getElementById('dag-tip'),chip:document.getElementById('dag-chip')}); + if(c&&window.IgneumFeed&&window.IgneumDag){dag=IgneumDag.mount(c,{poll:false,window:60,tooltip:document.getElementById('dag-tip'),chip:document.getElementById('dag-chip')}); IgneumFeed.start({window:300,subs:[dag],onState:onState,onData:function(d){onData(d);caption(d);}});} })(); diff --git a/site/live-dag.js b/site/live-dag.js index 55631547d..d9d896ad2 100644 --- a/site/live-dag.js +++ b/site/live-dag.js @@ -1,4 +1,7 @@ -/* Igneum DAG / Ember 2.0 +/* Igneum DAG / Ember 2.0 (the EMBER 02 renderer pack, 7 Oct 2026) with the real-data presentation options of 2.0.1: + * maxLanes (own key + top keys + others, default 7), minNode (node half-size floor, default 9.5), hairlineAlpha (non-chain + * edges, default .12, drawn only within laneReach lanes, default 2, and only a merged block's first parent unless selected), + * othersScale (the others lane's size and alpha, default .75), provenGlow (a glow and ring on proven blocks, default on). * Replacement for the supplied live-dag.js. No framework, network writes or synthetic records. * Existing mount/push options and public methods are retained; see README.md for additions. * Every node, parent edge, proof segment and checkpoint is derived from the observer reply. @@ -47,6 +50,7 @@ var maxBlocks=clamp(finite(opts.maxBlocks)?opts.maxBlocks:6000,100,20000); var lag=finite(opts.lagMs)?clamp(opts.lagMs,0,10000):2500; var fps=clamp(finite(opts.fps)?opts.fps:30,10,60), minFrame=1000/fps; + var maxLanes=clamp(finite(opts.maxLanes)?opts.maxLanes:7,2,12), minNode=finite(opts.minNode)?opts.minNode:9.5, hairAlpha=finite(opts.hairlineAlpha)?opts.hairlineAlpha:.12, laneReach=finite(opts.laneReach)?opts.laneReach:2, othersScale=finite(opts.othersScale)?opts.othersScale:.75, provenGlow=opts.provenGlow!==false; var mq=root.matchMedia?root.matchMedia('(prefers-reduced-motion: reduce)'):null; var reduced=mq?mq.matches:false, manualMotion=true; var mediaTheme=root.matchMedia?root.matchMedia('(prefers-color-scheme: dark)'):null; @@ -93,7 +97,7 @@ padL=compact||W<510?14:W<750?84:106;padR=compact?12:24;padT=compact?29:58;padB=compact?22:38; var start=rightTime()-windowS*1000, end=rightTime()+lag+1000,counts=new Map(),mineKeys=new Set(); blocks.forEach(function(b){if(b.ts>=start && b.ts<=end){counts.set(b.miner,(counts.get(b.miner)||0)+1);if(own(b))mineKeys.add(b.miner);}}); - var capacity=Math.max(2,Math.floor((H-padT-padB)/(compact?26:46))),ids=Array.from(counts.keys()); + var capacity=Math.min(maxLanes,Math.max(2,Math.floor((H-padT-padB)/(compact?26:46)))),ids=Array.from(counts.keys()); ids.sort(function(a,b){return (mineKeys.has(b)?1:0)-(mineKeys.has(a)?1:0)||(counts.get(b)-counts.get(a))||a.localeCompare(b);}); var chosen=ids.slice(0,ids.length>capacity?capacity-1:capacity); // Preserve existing key order instead of re-ranking every poll. Always keep the user's lane visible. @@ -214,19 +218,22 @@ // Animate lane transitions without changing their underlying key identity. blocks.forEach(function(b){b.x=xOf(b.ts,rt);var progress=animate?clamp((clock-b.laneAt)/450,0,1):1;progress=1-Math.pow(1-progress,3);b.y=b.fromY+(b.targetY-b.fromY)*progress;b.on=b.ts>=left&&b.ts<=rt&&passes(b);if(b.on&&b.newArrival&&b.visibleAt===null){b.visibleAt=t;b.born=t;}}); ctx.save();ctx.beginPath();ctx.rect(padL-1,padT-15,plotW+2,plotH+25);ctx.clip(); - blocks.forEach(function(b){if(!b.on)return;b.parents.forEach(function(hash){var p=view.get(hash);if(!p||!passes(p)||p.x>W-padR||p.xW-padR||p.x0)return;var li=laneOf.has(b.miner)?laneOf.get(b.miner):lanes.length-1,lp=laneOf.has(p.miner)?laneOf.get(p.miner):lanes.length-1;if(Math.abs(li-lp)>laneReach)return;} + if(path||selectedEdge){ctx.strokeStyle=rgba(path?col.ember:col.bone,path?.1:.10);ctx.lineWidth=path?8:4;curve(b,p);ctx.stroke();} + ctx.strokeStyle=rgba(path?col.ember:selectedEdge?col.bone:b.color==='red'?col.red:col.ash,path?.68:selectedEdge?.7:hairAlpha);ctx.lineWidth=path?1.65:selectedEdge?1.4:1;curve(b,p);ctx.stroke(); var age=t-b.born;if(animate&&age>=0&&age<1400){var f=clamp(age/1150,0,1),pt=pointOn(b,p,f);ctx.shadowBlur=10;ctx.shadowColor=path?col.ember:col.blue;ctx.fillStyle=path?col.molten:col.blue;ctx.beginPath();ctx.arc(pt.x,pt.y,path?2.2:1.65,0,TAU);ctx.fill();ctx.shadowBlur=0;} });}); - var density=blocks.filter(function(b){return b.on;}).length/Math.max(plotW,1), S=compact?6.5:density>.16?7:9.5; + var S=compact?6.5:clamp(lh*.22,minNode,13); blocks.forEach(function(b){if(!b.on)return; var age=t-b.born,newness=animate?Math.max(clamp(1-age/1700,0,1),clamp(1-(t-b.changed)/900,0,1)*.65):0; var ink=b.color==='red'?col.red:b.chain?col.ember:b.color==='blue'?col.blue:col.ash; - var isOwn=own(b),isSelected=b.hash===selected||b.hash===hover,sz=S*(1+(newness*.15)); + var isOwn=own(b),isSelected=b.hash===selected||b.hash===hover,inOthers=!laneOf.has(b.miner),sz=S*(1+(newness*.15))*(inOthers?othersScale:1); if(newness>0||isOwn||isSelected){var glow=ctx.createRadialGradient(b.x,b.y,0,b.x,b.y,sz*3.8);glow.addColorStop(0,rgba(isOwn?col.molten:ink,newness*.26+(isSelected?.15:isOwn?.06:0)));glow.addColorStop(1,rgba(ink,0));ctx.fillStyle=glow;ctx.fillRect(b.x-sz*4,b.y-sz*4,sz*8,sz*8);} - ctx.globalAlpha=b.color==='red'?.78:1; + ctx.globalAlpha=(b.color==='red'?.78:1)*(inOthers&&!isSelected&&!isOwn?othersScale:1); + // a proven block glows and carries a ring, so the proof reads from across the room + if(provenGlow&&b.proven){var pg=ctx.createRadialGradient(b.x,b.y,0,b.x,b.y,sz*3.2);pg.addColorStop(0,rgba(ink,.26));pg.addColorStop(1,rgba(ink,0));ctx.fillStyle=pg;ctx.fillRect(b.x-sz*3.4,b.y-sz*3.4,sz*6.8,sz*6.8);ctx.strokeStyle=rgba(ink,.6);ctx.lineWidth=1;ctx.beginPath();ctx.arc(b.x,b.y,sz+5,0,TAU);ctx.stroke();} // Inset tiles: inclusion is the outline; proof is the core, never the same status. ctx.fillStyle=col.bg;ctx.strokeStyle=rgba(ink,b.chain?.95:.8);ctx.lineWidth=b.chain?1.75:1.25;rounded(ctx,b.x-sz,b.y-sz,2*sz,2*sz,3);ctx.fill();ctx.stroke(); var tile=ctx.createLinearGradient(b.x,b.y-sz,b.x,b.y+sz);tile.addColorStop(0,rgba(ink,b.proven?.5:.16));tile.addColorStop(1,rgba(ink,b.proven?.22:.025));ctx.fillStyle=tile;rounded(ctx,b.x-sz+2,b.y-sz+2,2*sz-4,2*sz-4,2);ctx.fill(); @@ -338,5 +345,5 @@ getSnapshot:function(){return {ok:true,state:{stale:state!=='live'},blocks:blocks.map(cloneBlock),finality:{checkpoints:cps.map(function(c){return Object.assign({},c);})}};}}; instances.set(canvas,api);if(chip)chip.hidden=true;theme();size();emit('onState',state,reason);if(opts.poll!==false)poll();redraw();return api; } - root.IgneumDag={mount:mount,version:'2.0.0'}; + root.IgneumDag={mount:mount,version:'2.0.1'}; })(window); diff --git a/site/live.html b/site/live.html index 5abfc43c0..58290e2ca 100644 --- a/site/live.html +++ b/site/live.html @@ -296,7 +296,7 @@ details.tablebar summary{display:flex;align-items:center}
Click to inspect  ·  Drag to explore - 90 s + 60 s