made various improvements to the banner

app/src/content/embeds/banner.html

@@ -53,6 +53,11 @@
                 'guided_rewrite_original': 'Guided Rewrite'
             };
 
+            function gpuDays(seconds) {
+                const d = Math.round(seconds / 86400);
+                return d.toLocaleString() + ' days';
+            }
+
             function parseEntry(d, i) {
                 const [cat, promptFile] = d.prompt.split('/');
                 const promptKey = promptFile.replace('.md', '');
@@ -67,7 +72,10 @@
                     model: modelShort,
                     family,
                     compB: d.output_tokens / 1e9,
-                    promptB: d.input_tokens / 1e9,
+                    outputHuman: d.output_tokens_human,
+                    inputHuman: d.input_tokens_human,
+                    gpuSeconds: d.gpu_time_seconds,
+                    gpuTime: gpuDays(d.gpu_time_seconds),
                     docsM: d.num_documents / 1e6,
                     dclm: d.dclm_score_difference,
                     edu: d.edu_score_difference,
@@ -106,7 +114,7 @@
 
                     const cx = W / 2;
                     const packR = Math.min(W * 0.28, H * 0.34);
-                    const maxR = Math.min(packR * 0.37, 56);
+                    const maxR = Math.min(packR * 0.30, 44);
                     const minR = Math.max(4, W * 0.005);
                     const rScale = d3.scaleSqrt()
                         .domain([0, d3.max(data, d => d.compB)])
@@ -156,23 +164,26 @@
                         drift();
                     });
 
+                    // All overlay elements pass pointer events through to circles
+                    const noPtr = el => el.style('pointer-events', 'none');
+
                     // Mega number
-                    canvas.append('text')
+                    noPtr(canvas.append('text')
                         .attr('x', cx).attr('y', megaY)
                         .attr('text-anchor', 'middle').attr('dominant-baseline', 'middle')
                         .attr('fill', '#1a1a1a')
                         .attr('font-size', megaFS).attr('font-weight', 900)
                         .attr('letter-spacing', '-0.04em')
-                        .text(formatTokens(totalOutputB));
+                        .text(formatTokens(totalOutputB)));
 
                     const labelFS = Math.max(10, megaFS * 0.15);
-                    canvas.append('text')
+                    noPtr(canvas.append('text')
                         .attr('x', cx).attr('y', megaY + megaFS * 0.44)
                         .attr('text-anchor', 'middle').attr('dominant-baseline', 'middle')
                         .attr('fill', '#999')
                         .attr('font-size', labelFS).attr('font-weight', 600)
                         .attr('letter-spacing', '0.18em')
-                        .text('TOKENS GENERATED');
+                        .text('TOKENS GENERATED'));
 
                     // Bottom stats
                     const totalDocsB = (totalDocsM / 1000).toFixed(2);
@@ -184,9 +195,10 @@
                         .attr('font-size', subFS).attr('font-weight', 500)
                         .attr('letter-spacing', '0.14em')
                         .text(subText);
+                    noPtr(subEl);
 
                     // Legend
-                    const legFS = Math.max(7, subFS * 0.95);
+                    const legFS = Math.max(11, subFS * 1.5);
                     const dotR = Math.max(2.5, legFS * 0.38);
                     const legY = subY + subFS * 2.6;
                     const familyCounts = {};
@@ -201,30 +213,66 @@
                     tw -= 12;
                     let lx = cx - tw / 2;
                     families.forEach(it => {
-                        legG.append('circle')
+                        const ig = legG.append('g').style('cursor', 'pointer');
+                        ig.append('circle')
                             .attr('cx', lx + dotR).attr('cy', legY)
                             .attr('r', dotR).attr('fill', col[it.n]).attr('fill-opacity', 0.5);
-                        const t = legG.append('text')
+                        const t = ig.append('text')
                             .attr('x', lx + dotR * 2 + 4).attr('y', legY)
                             .attr('dominant-baseline', 'middle')
                             .attr('fill', '#555').attr('font-size', legFS).attr('font-weight', 500)
                             .text(`${it.n} (${it.c})`);
+                        // Precompute cumulative stats for this family
+                        const fam = data.filter(d => d.family === it.n);
+                        const famOutputB = fam.reduce((s, d) => s + d.compB, 0);
+                        const famDocsM = fam.reduce((s, d) => s + d.docsM, 0);
+                        const famGpu = gpuDays(fam.reduce((s, d) => s + d.gpuSeconds, 0));
+                        const famModels = [...new Set(fam.map(d => d.model))];
+
+                        ig.on('mouseenter', function(event) {
+                            circles.transition().duration(80)
+                                .attr('fill-opacity', d => d.family === it.n ? 0.55 : 0.06)
+                                .attr('stroke-opacity', d => d.family === it.n ? 0.5 : 0.03);
+                            const c = col[it.n];
+                            tip.html(
+                                `<div style="display:flex;align-items:center;gap:6px;margin-bottom:4px">` +
+                                `<span style="width:8px;height:8px;border-radius:50%;background:${c};opacity:.6;display:inline-block"></span>` +
+                                `<span style="font-weight:700;font-size:1.05em;color:#111">${it.n}</span></div>` +
+                                `<div style="display:grid;grid-template-columns:auto 1fr;gap:3px 14px;font-size:.9em">` +
+                                `<span style="opacity:.35">Runs</span><span style="font-weight:600;color:#111">${it.c}</span>` +
+                                `<span style="opacity:.35">Models</span><span>${famModels.join(', ')}</span>` +
+                                `<span style="opacity:.35">Output</span><span>${formatTokens(famOutputB)} tokens</span>` +
+                                `<span style="opacity:.35">GPU time</span><span>${famGpu}</span>` +
+                                `<span style="opacity:.35">Docs</span><span>${famDocsM.toFixed(1)}M</span></div>`
+                            ).style('opacity', 1);
+                            const r = container.getBoundingClientRect();
+                            const bbox = ig.node().getBBox();
+                            const svgRect = canvas.node().getBoundingClientRect();
+                            let tx = svgRect.left - r.left + bbox.x + bbox.width / 2;
+                            let ty = svgRect.top - r.top + bbox.y + bbox.height + 8;
+                            tip.style('left', tx + 'px').style('top', ty + 'px')
+                               .style('transform', 'translate(-50%, 0)');
+                        }).on('mouseleave', () => {
+                            circles.transition().duration(160)
+                                .attr('fill-opacity', fillAlpha).attr('stroke-opacity', 0.12);
+                            tip.style('opacity', 0).style('transform', 'none');
+                        });
                         lx += dotR * 2 + 4 + t.node().getComputedTextLength() + 12;
                     });
 
-                    // Background pills
+                    // Background pills (also pass through pointer events)
                     const subBBox = subEl.node().getBBox();
-                    canvas.insert('rect', 'text:first-of-type')
+                    noPtr(canvas.insert('rect', 'text:first-of-type')
                         .attr('x', subBBox.x - 8).attr('y', subBBox.y - 3)
                         .attr('width', subBBox.width + 16).attr('height', subBBox.height + 6)
                         .attr('rx', 4).attr('ry', 4)
-                        .attr('fill', 'white').attr('fill-opacity', 0.75);
+                        .attr('fill', 'white').attr('fill-opacity', 0.75));
                     const legBBox = legG.node().getBBox();
-                    canvas.insert('rect', 'text:first-of-type')
+                    noPtr(canvas.insert('rect', 'text:first-of-type')
                         .attr('x', legBBox.x - 8).attr('y', legBBox.y - 3)
                         .attr('width', legBBox.width + 16).attr('height', legBBox.height + 6)
                         .attr('rx', 4).attr('ry', 4)
-                        .attr('fill', 'white').attr('fill-opacity', 0.75);
+                        .attr('fill', 'white').attr('fill-opacity', 0.75));
 
                     // Tooltip
                     const tip = d3.select(container).append('div')
@@ -234,7 +282,7 @@
                         .style('color', '#2c3e50')
                         .style('border', '1px solid rgba(0,0,0,0.08)')
                         .style('border-radius', '10px').style('padding', '12px 16px')
-                        .style('font-size', Math.max(10, W * 0.011) + 'px')
+                        .style('font-size', Math.max(12, W * 0.014) + 'px')
                         .style('font-family', "'Inter', system-ui, sans-serif")
                         .style('line-height', '1.55').style('white-space', 'nowrap')
                         .style('opacity', 0).style('transition', 'opacity .1s ease')
@@ -247,7 +295,7 @@
                                 .attr('fill-opacity', 0.55).attr('stroke-opacity', 0.5).attr('stroke-width', 1.5);
                             gB.selectAll('circle').filter(o => o.id !== d.id)
                                 .transition().duration(80)
-                                .attr('fill-opacity', 0.06).attr('stroke-opacity', 0.03);
+                                .attr('fill-opacity', 0.1).attr('stroke-opacity', 0.08);
                             const c = col[d.family];
                             const dc = d.dclm >= 0 ? '#16a34a' : '#dc2626';
                             const ec = d.edu >= 0 ? '#16a34a' : '#dc2626';
@@ -257,8 +305,9 @@
                                 `<span style="font-weight:700;font-size:1.05em;color:#111">${d.model}</span></div>` +
                                 `<div style="opacity:.4;font-size:.88em;margin-bottom:7px">${d.prompt} · ${d.cat} · ${d.source}</div>` +
                                 `<div style="display:grid;grid-template-columns:auto 1fr;gap:3px 14px;font-size:.9em">` +
-                                `<span style="opacity:.35">Output</span><span style="font-weight:600;color:#111">${d.compB.toFixed(2)}B tokens</span>` +
-                                `<span style="opacity:.35">Input</span><span>${d.promptB.toFixed(2)}B</span>` +
+                                `<span style="opacity:.35">Output</span><span style="font-weight:600;color:#111">${d.outputHuman} tokens</span>` +
+                                `<span style="opacity:.35">Input</span><span>${d.inputHuman}</span>` +
+                                `<span style="opacity:.35">GPU time</span><span>${d.gpuTime}</span>` +
                                 `<span style="opacity:.35">Docs</span><span>${d.docsM.toFixed(1)}M</span>` +
                                 `<span style="opacity:.35">DCLM</span><span style="color:${dc}">${d.dclm >= 0 ? '+' : ''}${d.dclm.toFixed(3)}</span>` +
                                 `<span style="opacity:.35">Edu</span><span style="color:${ec}">${d.edu >= 0 ? '+' : ''}${d.edu.toFixed(3)}</span></div>`
@@ -270,12 +319,13 @@
                             let ty = event.clientY - r.top - 10;
                             if (tx + 260 > W) tx = event.clientX - r.left - 270;
                             if (ty < 8) ty = 8;
-                            tip.style('left', tx + 'px').style('top', ty + 'px');
+                            tip.style('left', tx + 'px').style('top', ty + 'px')
+                               .style('transform', 'none');
                         })
                         .on('mouseleave', function() {
                             gB.selectAll('circle').transition().duration(160)
                                 .attr('fill-opacity', fillAlpha).attr('stroke-opacity', 0.12).attr('stroke-width', 0.7);
-                            tip.style('opacity', 0);
+                            tip.style('opacity', 0).style('transform', 'none');
                         });
                 };