improved pipeline display

app/src/content/embeds/d3-pipeline.html

@@ -129,14 +129,14 @@
       const W = container.clientWidth || 820;
       const s = Math.min(1, W / 820);
 
-      const nw = Math.round(166 * s), nh = Math.round(48 * s);
+      const nw = Math.round(200 * s), nh = Math.round(60 * s);
       const nr = Math.round(10 * s);
       const gp = Math.round(10 * s);   // group padding
       const gr = Math.round(10 * s);   // group corner radius
       const glh = Math.round(22 * s);  // group label height
-      const ng = Math.round(8 * s);    // node gap within group
-      const cg = Math.round(28 * s);   // column gap
-      const rg = Math.round(16 * s);   // row gap between groups
+      const ng = Math.round(7 * s);    // node gap within group
+      const cg = Math.round(70 * s);   // column gap
+      const rg = Math.round(14 * s);   // row gap between groups
 
       // Three columns: left (exec + inference), center (input + pipeline), right (output)
       const leftW = nw + gp * 2;
@@ -150,7 +150,7 @@
       const rightX = offsetX + leftW + cg + centerW + cg;
 
       // -- Center column: Input (1 node) + Pipeline (3 nodes)
-      let y = Math.round(6 * s);
+      let y = Math.round(4 * s);
       const inputNode = nodes.find(n => n.id === 'hf_in');
       inputNode._x = centerX + gp; inputNode._y = y + glh + gp;
       inputNode._w = nw; inputNode._h = nh; inputNode._r = nr;
@@ -172,16 +172,15 @@
       pipeGroup._w = centerW; pipeGroup._h = pipeH; pipeGroup._r = gr;
 
       // -- Left column: Execution + Inference
-      // Vertically center the left column with the pipeline
+      // Position so inference engine bottom aligns with write node
       const execNodes = ['local', 'slurm'].map(id => nodes.find(n => n.id === id));
       const execH = glh + gp * 2 + execNodes.length * nh + (execNodes.length - 1) * ng;
       const inferNodes = ['rollout', 'vllm'].map(id => nodes.find(n => n.id === id));
       const inferH = glh + gp * 2 + inferNodes.length * nh + (inferNodes.length - 1) * ng;
-      const leftTotalH = execH + rg + inferH;
-      const leftCenterY = pipeTop + pipeH / 2;
-      const leftTop = Math.max(pipeTop, leftCenterY - leftTotalH / 2);
-
-      const execTop = leftTop;
+      const writeNode = nodes.find(n => n.id === 'write');
+      const inferBottom = writeNode._y + writeNode._h + gp;
+      const inferTop = inferBottom - inferH;
+      const execTop = inferTop - rg - execH;
       execNodes.forEach((n, i) => {
         n._x = leftX + gp; n._y = execTop + glh + gp + i * (nh + ng);
         n._w = nw; n._h = nh; n._r = nr;
@@ -190,7 +189,6 @@
       execGroup._x = leftX; execGroup._y = execTop;
       execGroup._w = leftW; execGroup._h = execH; execGroup._r = gr;
 
-      const inferTop = execTop + execH + rg;
       inferNodes.forEach((n, i) => {
         n._x = leftX + gp; n._y = inferTop + glh + gp + i * (nh + ng);
         n._w = nw; n._h = nh; n._r = nr;
@@ -199,10 +197,11 @@
       inferGroup._x = leftX; inferGroup._y = inferTop;
       inferGroup._w = leftW; inferGroup._h = inferH; inferGroup._r = gr;
 
-      // -- Right column: Output (vertically centered with pipeline)
+      // -- Right column: Output (align bottom with write node)
       const outNodes = ['hf_out', 'card', 'monitor'].map(id => nodes.find(n => n.id === id));
       const outH = glh + gp * 2 + outNodes.length * nh + (outNodes.length - 1) * ng;
-      const outTop = pipeTop + (pipeH - outH) / 2;
+      const outBottom = writeNode._y + writeNode._h + gp;
+      const outTop = outBottom - outH;
       outNodes.forEach((n, i) => {
         n._x = rightX + gp; n._y = outTop + glh + gp + i * (nh + ng);
         n._w = nw; n._h = nh; n._r = nr;
@@ -211,29 +210,40 @@
       outGroup._x = rightX; outGroup._y = outTop;
       outGroup._w = rightW; outGroup._h = outH; outGroup._r = gr;
 
+      const minY = Math.min(
+        ...nodes.map(n => n._y),
+        ...groups.map(g => g._y)
+      );
+      if (minY < 0) {
+        // Shift everything down so nothing is clipped
+        const shift = -minY + Math.round(4 * s);
+        nodes.forEach(n => { n._y += shift; });
+        groups.forEach(g => { g._y += shift; });
+      }
       const maxY = Math.max(
         ...nodes.map(n => n._y + n._h + gp),
         ...groups.map(g => g._y + g._h)
       );
-      svg.attr('height', maxY + Math.round(8 * s));
+      svg.attr('height', maxY + Math.round(4 * s));
 
       return s;
     }
 
-    function anchor(n, side) {
-      if (side === 'top')    return { x: n._x + n._w / 2, y: n._y };
-      if (side === 'bottom') return { x: n._x + n._w / 2, y: n._y + n._h };
-      if (side === 'left')   return { x: n._x,            y: n._y + n._h / 2 };
-      if (side === 'right')  return { x: n._x + n._w,     y: n._y + n._h / 2 };
+    function pt(n, side, offset) {
+      const o = offset || 0;
+      if (side === 'top')    return { x: n._x + n._w / 2 + o, y: n._y };
+      if (side === 'bottom') return { x: n._x + n._w / 2 + o, y: n._y + n._h };
+      if (side === 'left')   return { x: n._x,                 y: n._y + n._h / 2 + o };
+      if (side === 'right')  return { x: n._x + n._w,          y: n._y + n._h / 2 + o };
     }
 
-    function bezier(a, b, orient) {
-      if (orient === 'v') {
-        const d = (b.y - a.y) * 0.45;
-        return `M${a.x},${a.y} C${a.x},${a.y + d} ${b.x},${b.y - d} ${b.x},${b.y}`;
-      }
-      const d = (b.x - a.x) * 0.4;
-      return `M${a.x},${a.y} C${a.x + d},${a.y} ${b.x - d},${b.y} ${b.x},${b.y}`;
+    function hBez(a, b) {
+      const mx = (a.x + b.x) / 2;
+      return `M${a.x},${a.y} C${mx},${a.y} ${mx},${b.y} ${b.x},${b.y}`;
+    }
+    function vBez(a, b) {
+      const my = (a.y + b.y) / 2;
+      return `M${a.x},${a.y} C${a.x},${my} ${b.x},${my} ${b.x},${b.y}`;
     }
 
     function edgePath(e) {
@@ -241,18 +251,19 @@
       const t = nodes.find(n => n.id === e.to);
       if (!f || !t) return '';
 
-      // Explicit routing for each edge
-      if (e.from === 'hf_in' && e.to === 'read')       return bezier(anchor(f, 'bottom'), anchor(t, 'top'), 'v');
-      if (e.from === 'read' && e.to === 'transform')    return bezier(anchor(f, 'bottom'), anchor(t, 'top'), 'v');
-      if (e.from === 'transform' && e.to === 'write')   return bezier(anchor(f, 'bottom'), anchor(t, 'top'), 'v');
-      if (e.from === 'transform' && e.to === 'rollout')  return bezier(anchor(f, 'left'),   anchor(t, 'right'), 'h');
-      if (e.from === 'rollout' && e.to === 'vllm')       return bezier(anchor(f, 'bottom'), anchor(t, 'top'), 'v');
-      if (e.from === 'write' && e.to === 'hf_out')       return bezier(anchor(f, 'right'),  anchor(t, 'left'), 'h');
-      if (e.from === 'write' && e.to === 'card')          return bezier(anchor(f, 'right'),  anchor(t, 'left'), 'h');
-      if (e.from === 'write' && e.to === 'monitor')       return bezier(anchor(f, 'right'),  anchor(t, 'left'), 'h');
-
-      // Fallback
-      return bezier(anchor(f, 'right'), anchor(t, 'left'), 'h');
+      if (e.from === 'hf_in' && e.to === 'read')        return vBez(pt(f,'bottom'), pt(t,'top'));
+      if (e.from === 'read' && e.to === 'transform')     return vBez(pt(f,'bottom'), pt(t,'top'));
+      if (e.from === 'transform' && e.to === 'write')    return vBez(pt(f,'bottom'), pt(t,'top'));
+      if (e.from === 'transform' && e.to === 'rollout')  return hBez(pt(f,'left'),   pt(t,'right'));
+      if (e.from === 'rollout' && e.to === 'vllm')       return vBez(pt(f,'bottom'), pt(t,'top'));
+
+      // Fan out from Write: top/center/bottom of right edge
+      const sp = Math.round(f._h * 0.28);
+      if (e.from === 'write' && e.to === 'hf_out')  return hBez(pt(f,'right', -sp), pt(t,'left'));
+      if (e.from === 'write' && e.to === 'card')     return hBez(pt(f,'right'),      pt(t,'left'));
+      if (e.from === 'write' && e.to === 'monitor')  return hBez(pt(f,'right',  sp), pt(t,'left'));
+
+      return hBez(pt(f,'right'), pt(t,'left'));
     }
 
     function render() {
@@ -281,13 +292,13 @@
         .attr('stroke', d => d.id === 'pipeline' ? c.pipeBd : c.groupBd)
         .attr('stroke-width', 1);
       gM.select('.grp-icon')
-        .attr('x', d => d._x + Math.round(10 * s))
-        .attr('y', d => d._y + Math.round(19 * s))
+        .attr('x', d => d._x + Math.round(6 * s))
+        .attr('y', d => d._y + Math.round(15 * s))
         .style('font-size', fsIcon + 'px')
         .text(d => d.icon);
       gM.select('.group-label')
-        .attr('x', d => d._x + Math.round(10 * s) + fsIcon + Math.round(3 * s))
-        .attr('y', d => d._y + Math.round(19 * s))
+        .attr('x', d => d._x + Math.round(6 * s) + fsIcon + Math.round(3 * s))
+        .attr('y', d => d._y + Math.round(15 * s))
         .style('font-size', fsGrp + 'px')
         .text(d => d.label);
       gSel.exit().remove();