@diagrammo/dgmo 0.6.0 → 0.6.2

package/src/infra/renderer.ts

@@ -16,6 +16,19 @@ import type { InfraRole } from './roles';
 import { parseInfra } from './parser';
 import { computeInfra } from './compute';
 import { layoutInfra } from './layout';
+import {
+  LEGEND_HEIGHT,
+  LEGEND_PILL_PAD,
+  LEGEND_PILL_FONT_SIZE,
+  LEGEND_PILL_FONT_W,
+  LEGEND_CAPSULE_PAD,
+  LEGEND_DOT_R,
+  LEGEND_ENTRY_FONT_SIZE,
+  LEGEND_ENTRY_FONT_W,
+  LEGEND_ENTRY_DOT_GAP,
+  LEGEND_ENTRY_TRAIL,
+  LEGEND_GROUP_GAP,
+} from '../utils/legend-constants';
 
 // ============================================================
 // Constants
@@ -39,22 +52,7 @@ const NODE_PAD_BOTTOM = 10;
 const COLLAPSE_BAR_HEIGHT = 6;
 const COLLAPSE_BAR_INSET = 0;
 
-// Legend pill/capsule constants (matching org chart style)
-const LEGEND_HEIGHT = 28;
-const LEGEND_PILL_PAD = 16;
-const LEGEND_PILL_FONT_SIZE = 11;
-const LEGEND_PILL_FONT_W = LEGEND_PILL_FONT_SIZE * 0.6;
-const LEGEND_CAPSULE_PAD = 4;
-const LEGEND_DOT_R = 4;
-const LEGEND_ENTRY_FONT_SIZE = 10;
-const LEGEND_ENTRY_FONT_W = LEGEND_ENTRY_FONT_SIZE * 0.6;
-const LEGEND_ENTRY_DOT_GAP = 4;
-const LEGEND_ENTRY_TRAIL = 8;
-const LEGEND_GROUP_GAP = 12;
-const LEGEND_FIXED_GAP = 16; // gap between fixed legend and scaled diagram
-const SPEED_BADGE_H_PAD = 5; // horizontal padding inside active speed badge
-const SPEED_BADGE_V_PAD = 3; // vertical padding inside active speed badge
-const SPEED_BADGE_GAP = 6;   // gap between speed option slots
+const LEGEND_FIXED_GAP = 16; // gap between fixed legend and scaled diagram — local, not shared
 
 // Health colors (from UX spec)
 const COLOR_HEALTHY = '#22c55e';
@@ -131,10 +129,352 @@ const REJECT_COUNT_MAX = 3;
 // Edge path generator
 // ============================================================
 
-const lineGenerator = d3Shape.line<{ x: number; y: number }>()
-  .x((d) => d.x)
-  .y((d) => d.y)
-  .curve(d3Shape.curveBasis);
+type Pt = { x: number; y: number };
+
+/** Produce an SVG path string for a sequence of waypoints.
+ *  2-point paths use curveBumpX/Y (nice S-curve).
+ *  Multi-point obstacle-avoiding paths use CatmullRom for a smooth fit. */
+function buildPathD(pts: Pt[], direction: 'LR' | 'TB'): string {
+  const gen = d3Shape.line<Pt>().x((d) => d.x).y((d) => d.y);
+  if (pts.length <= 2) {
+    gen.curve(direction === 'TB' ? d3Shape.curveBumpY : d3Shape.curveBumpX);
+  } else {
+    gen.curve(d3Shape.curveCatmullRom.alpha(0.5));
+  }
+  return gen(pts) ?? '';
+}
+
+type Rect = { x: number; y: number; width: number; height: number };
+
+/** Port-order exit and enter points for edges to eliminate fan-out crossings.
+ *
+ *  For each node with ≥2 outgoing edges: sort edges by target perpendicular coord
+ *  and assign source-border exit positions in the same order.
+ *  For each node with ≥2 incoming edges: sort edges by source perpendicular coord
+ *  and assign target-border enter positions in the same order.
+ *
+ *  Returns two maps keyed by "sourceId:targetId":
+ *  - srcPts: port-ordered exit point on the source border
+ *  - tgtPts: port-ordered enter point on the target border */
+function computePortPts(
+  edges: InfraLayoutEdge[],
+  nodeMap: Map<string, InfraLayoutNode>,
+  direction: 'LR' | 'TB',
+): { srcPts: Map<string, Pt>; tgtPts: Map<string, Pt> } {
+  const srcPts = new Map<string, Pt>();
+  const tgtPts = new Map<string, Pt>();
+  const PAD = 0.1; // keep ports 10% in from node edges
+
+  const activeEdges = edges.filter((e) => e.points.length > 0);
+
+  // ── Source (exit) port ordering ──────────────────────────────────────────
+  const bySource = new Map<string, InfraLayoutEdge[]>();
+  for (const e of activeEdges) {
+    if (!bySource.has(e.sourceId)) bySource.set(e.sourceId, []);
+    bySource.get(e.sourceId)!.push(e);
+  }
+  for (const [sourceId, es] of bySource) {
+    if (es.length < 2) continue;
+    const source = nodeMap.get(sourceId);
+    if (!source) continue;
+    const sorted = es
+      .map((e) => ({ e, t: nodeMap.get(e.targetId) }))
+      .filter((x): x is { e: InfraLayoutEdge; t: InfraLayoutNode } => x.t != null)
+      .sort((a, b) => (direction === 'LR' ? a.t.y - b.t.y : a.t.x - b.t.x));
+    const n = sorted.length;
+    for (let i = 0; i < n; i++) {
+      const frac = n === 1 ? 0.5 : PAD + (1 - 2 * PAD) * i / (n - 1);
+      const { e, t } = sorted[i];
+      const isBackward = direction === 'LR' ? t.x < source.x : t.y < source.y;
+      if (direction === 'LR') {
+        srcPts.set(`${e.sourceId}:${e.targetId}`, {
+          x: isBackward ? source.x - source.width / 2 : source.x + source.width / 2,
+          y: source.y - source.height / 2 + frac * source.height,
+        });
+      } else {
+        srcPts.set(`${e.sourceId}:${e.targetId}`, {
+          x: source.x - source.width / 2 + frac * source.width,
+          y: isBackward ? source.y - source.height / 2 : source.y + source.height / 2,
+        });
+      }
+    }
+  }
+
+  // ── Target (enter) port ordering ─────────────────────────────────────────
+  const byTarget = new Map<string, InfraLayoutEdge[]>();
+  for (const e of activeEdges) {
+    if (!byTarget.has(e.targetId)) byTarget.set(e.targetId, []);
+    byTarget.get(e.targetId)!.push(e);
+  }
+  for (const [targetId, es] of byTarget) {
+    if (es.length < 2) continue;
+    const target = nodeMap.get(targetId);
+    if (!target) continue;
+    const sorted = es
+      .map((e) => ({ e, s: nodeMap.get(e.sourceId) }))
+      .filter((x): x is { e: InfraLayoutEdge; s: InfraLayoutNode } => x.s != null)
+      .sort((a, b) => (direction === 'LR' ? a.s.y - b.s.y : a.s.x - b.s.x));
+    const n = sorted.length;
+    for (let i = 0; i < n; i++) {
+      const frac = n === 1 ? 0.5 : PAD + (1 - 2 * PAD) * i / (n - 1);
+      const { e, s } = sorted[i];
+      const isBackward = direction === 'LR' ? target.x < s.x : target.y < s.y;
+      if (direction === 'LR') {
+        tgtPts.set(`${e.sourceId}:${e.targetId}`, {
+          x: isBackward ? target.x + target.width / 2 : target.x - target.width / 2,
+          y: target.y - target.height / 2 + frac * target.height,
+        });
+      } else {
+        tgtPts.set(`${e.sourceId}:${e.targetId}`, {
+          x: target.x - target.width / 2 + frac * target.width,
+          y: isBackward ? target.y + target.height / 2 : target.y - target.height / 2,
+        });
+      }
+    }
+  }
+
+  return { srcPts, tgtPts };
+}
+
+/** Find the Y lane for routing around blocking obstacles.
+ *  Prefers threading through Y gaps between blocking rects over routing above/below all.
+ *  Picks the candidate closest to targetY to minimise arc size.
+ *
+ *  Uses a tight merge expansion (MERGE_SLOP) so narrow inter-group gaps are preserved
+ *  and can be threaded, rather than being swallowed into one large merged interval. */
+function findRoutingLane(
+  blocking: Rect[],
+  targetY: number,
+  margin: number,
+): number {
+  // Use a small slop for merging so closely-spaced (but distinct) groups
+  // stay as separate intervals and the gap between them can be threaded.
+  const MERGE_SLOP = 4;
+  const sorted = [...blocking].sort((a, b) => (a.y + a.height / 2) - (b.y + b.height / 2));
+  const merged: [number, number][] = [];
+  for (const r of sorted) {
+    const lo = r.y - MERGE_SLOP;
+    const hi = r.y + r.height + MERGE_SLOP;
+    if (merged.length && lo <= merged[merged.length - 1][1]) {
+      merged[merged.length - 1][1] = Math.max(merged[merged.length - 1][1], hi);
+    } else {
+      merged.push([lo, hi]);
+    }
+  }
+  if (merged.length === 0) return targetY;
+
+  // Candidate lanes: above all, below all, mid-points of gaps wide enough to thread.
+  // MIN_GAP: allow narrow gaps (edge is ~1.5px, so even 10px clearance is fine).
+  const MIN_GAP = 10;
+  const candidates: number[] = [
+    merged[0][0] - margin,                      // above all blocking rects
+    merged[merged.length - 1][1] + margin,      // below all blocking rects
+  ];
+  for (let i = 0; i < merged.length - 1; i++) {
+    const gapLo = merged[i][1];
+    const gapHi = merged[i + 1][0];
+    if (gapHi - gapLo >= MIN_GAP) {
+      candidates.push((gapLo + gapHi) / 2);    // thread through the gap
+    }
+  }
+
+  // Return the candidate closest to targetY (tightest arc)
+  return candidates.reduce((best, c) =>
+    Math.abs(c - targetY) < Math.abs(best - targetY) ? c : best,
+    candidates[0]);
+}
+
+/** Check whether segment p1→p2 passes through (or has an endpoint inside) the rectangle. */
+function segmentIntersectsRect(p1: Pt, p2: Pt, rect: { x: number; y: number; width: number; height: number }): boolean {
+  const { x: rx, y: ry, width: rw, height: rh } = rect;
+  const rr = rx + rw;
+  const rb = ry + rh;
+  // Point-in-rect check
+  const inRect = (p: Pt) => p.x >= rx && p.x <= rr && p.y >= ry && p.y <= rb;
+  if (inRect(p1) || inRect(p2)) return true;
+  // Segment bounding box vs rect
+  if (Math.max(p1.x, p2.x) < rx || Math.min(p1.x, p2.x) > rr) return false;
+  if (Math.max(p1.y, p2.y) < ry || Math.min(p1.y, p2.y) > rb) return false;
+  // Cross product sign helper (z-component of cross product)
+  const cross = (o: Pt, a: Pt, b: Pt) => (a.x - o.x) * (b.y - o.y) - (a.y - o.y) * (b.x - o.x);
+  // Does segment p1p2 cross segment a→b?
+  const crosses = (a: Pt, b: Pt) => {
+    const d1 = cross(a, b, p1);
+    const d2 = cross(a, b, p2);
+    const d3 = cross(p1, p2, a);
+    const d4 = cross(p1, p2, b);
+    return ((d1 > 0 && d2 < 0) || (d1 < 0 && d2 > 0)) &&
+           ((d3 > 0 && d4 < 0) || (d3 < 0 && d4 > 0));
+  };
+  const tl: Pt = { x: rx, y: ry };
+  const tr: Pt = { x: rr, y: ry };
+  const br: Pt = { x: rr, y: rb };
+  const bl: Pt = { x: rx, y: rb };
+  return crosses(tl, tr) || crosses(tr, br) || crosses(br, bl) || crosses(bl, tl);
+}
+
+/** Check whether the curveBumpX/Y S-curve from sc to tc intersects rect.
+ *
+ *  curveBumpX (LR) stays near sc.y for the left half of the edge, transitions
+ *  vertically at the midpoint, then stays near tc.y for the right half.
+ *  Approximated as three Manhattan segments:
+ *    sc → (midX, sc.y) → (midX, tc.y) → tc
+ *
+ *  curveBumpY (TB) mirrors this on the other axis. */
+function curveIntersectsRect(sc: Pt, tc: Pt, rect: Rect, direction: 'LR' | 'TB'): boolean {
+  if (direction === 'LR') {
+    const midX = (sc.x + tc.x) / 2;
+    const m1: Pt = { x: midX, y: sc.y };
+    const m2: Pt = { x: midX, y: tc.y };
+    return segmentIntersectsRect(sc, m1, rect)
+        || segmentIntersectsRect(m1, m2, rect)
+        || segmentIntersectsRect(m2, tc, rect);
+  } else {
+    const midY = (sc.y + tc.y) / 2;
+    const m1: Pt = { x: sc.x, y: midY };
+    const m2: Pt = { x: tc.x, y: midY };
+    return segmentIntersectsRect(sc, m1, rect)
+        || segmentIntersectsRect(m1, m2, rect)
+        || segmentIntersectsRect(m2, tc, rect);
+  }
+}
+
+/** Compute waypoints for an edge.
+ *
+ *  - Backward edges (going against the primary layout direction) arc above/left
+ *    of all layout content to avoid crossing everything.
+ *  - Forward edges that cross a group bounding box or an unrelated node arc
+ *    above or below the collective blocking region (gap-aware Y routing).
+ *  - Clear forward edges use a direct 2-point path (curveBumpX/Y S-curve). */
+function edgeWaypoints(
+  source: InfraLayoutNode,
+  target: InfraLayoutNode,
+  groups: InfraLayoutGroup[],
+  nodes: InfraLayoutNode[],
+  direction: 'LR' | 'TB',
+  margin = 30,
+  srcExitPt?: Pt, // port-ordered exit point on source border
+  tgtEnterPt?: Pt, // port-ordered enter point on target border
+): Pt[] {
+  const sc: Pt = { x: source.x, y: source.y };
+  const tc: Pt = { x: target.x, y: target.y };
+
+  // ── Backward edge handling ───────────────────────────────────────────────
+  // curveBumpX/Y on a backward edge creates a loop. Route around obstacles
+  // in the backward path's axis band for a tight arc (not global min/max).
+  const isBackward = direction === 'LR' ? tc.x < sc.x : tc.y < sc.y;
+  if (isBackward) {
+    if (direction === 'LR') {
+      // Collect group/node rects that overlap the X band [tc.x, sc.x]
+      const xBandObs: Rect[] = [];
+      for (const g of groups) {
+        if (g.x + g.width < tc.x - margin || g.x > sc.x + margin) continue;
+        xBandObs.push({ x: g.x, y: g.y, width: g.width, height: g.height });
+      }
+      for (const n of nodes) {
+        if (n.id === source.id || n.id === target.id) continue;
+        const nLeft = n.x - n.width / 2;
+        const nRight = n.x + n.width / 2;
+        if (nRight < tc.x - margin || nLeft > sc.x + margin) continue;
+        xBandObs.push({ x: nLeft, y: n.y - n.height / 2, width: n.width, height: n.height });
+      }
+      const midY   = (sc.y + tc.y) / 2;
+      const routeY = xBandObs.length > 0 ? findRoutingLane(xBandObs, midY, margin) : midY;
+      const exitBorder: Pt = srcExitPt ?? nodeBorderPoint(source, { x: sc.x, y: routeY });
+      const exitPt   : Pt = { x: exitBorder.x, y: routeY };
+      const enterPt  : Pt = { x: tc.x, y: routeY };
+      const tp = tgtEnterPt ?? nodeBorderPoint(target, enterPt);
+      return srcExitPt
+        ? [srcExitPt, exitPt, enterPt, tp]
+        : [exitBorder, exitPt, enterPt, tp];
+    } else {
+      // TB backward: collect obstacles in Y band [tc.y, sc.y]; find X lane
+      const yBandObs: Rect[] = [];
+      for (const g of groups) {
+        if (g.y + g.height < tc.y - margin || g.y > sc.y + margin) continue;
+        yBandObs.push({ x: g.x, y: g.y, width: g.width, height: g.height });
+      }
+      for (const n of nodes) {
+        if (n.id === source.id || n.id === target.id) continue;
+        const nTop = n.y - n.height / 2;
+        const nBot = n.y + n.height / 2;
+        if (nBot < tc.y - margin || nTop > sc.y + margin) continue;
+        yBandObs.push({ x: n.x - n.width / 2, y: nTop, width: n.width, height: n.height });
+      }
+      // Rotate axes so findRoutingLane (which works in Y) resolves an X lane
+      const rotated = yBandObs.map((r) => ({ x: r.y, y: r.x, width: r.height, height: r.width }));
+      const midX    = (sc.x + tc.x) / 2;
+      const routeX  = rotated.length > 0 ? findRoutingLane(rotated, midX, margin) : midX;
+      const exitPt  : Pt = srcExitPt ?? { x: routeX, y: sc.y };
+      const enterPt : Pt = { x: routeX, y: tc.y };
+      return [
+        srcExitPt ?? nodeBorderPoint(source, exitPt),
+        exitPt,
+        enterPt,
+        tgtEnterPt ?? nodeBorderPoint(target, enterPt),
+      ];
+    }
+  }
+
+  // ── Forward edge: obstacle avoidance (groups + individual nodes) ─────────
+  const blocking: { x: number; y: number; width: number; height: number }[] = [];
+  const blockingGroupIds = new Set<string>();
+
+  // Use actual path endpoints (port-ordered) for more accurate blocking detection.
+  // Node centers underestimate midX/midY, causing nearby obstacles to go undetected.
+  const pathSrc: Pt = srcExitPt ?? sc;
+  const pathTgt: Pt = tgtEnterPt ?? tc;
+
+  // Groups (excluding source/target groups)
+  for (const g of groups) {
+    if (g.id === source.groupId || g.id === target.groupId) continue;
+    const gRect: Rect = { x: g.x, y: g.y, width: g.width, height: g.height };
+    if (curveIntersectsRect(pathSrc, pathTgt, gRect, direction)) {
+      blocking.push(gRect);
+      blockingGroupIds.add(g.id);
+    }
+  }
+
+  // Individual nodes not already covered by a blocking group rect
+  for (const n of nodes) {
+    if (n.id === source.id || n.id === target.id) continue;
+    // Skip nodes in source/target groups (routing around the group handles them)
+    if (n.groupId && (n.groupId === source.groupId || n.groupId === target.groupId)) continue;
+    // Skip nodes inside a group whose bounding box is already blocking
+    if (n.groupId && blockingGroupIds.has(n.groupId)) continue;
+    const nodeRect: Rect = { x: n.x - n.width / 2, y: n.y - n.height / 2, width: n.width, height: n.height };
+    if (curveIntersectsRect(pathSrc, pathTgt, nodeRect, direction)) {
+      blocking.push(nodeRect);
+    }
+  }
+
+  if (blocking.length === 0) {
+    // Direct 2-point path — use port-ordered entry/exit points when provided.
+    const sp = srcExitPt ?? nodeBorderPoint(source, tc);
+    const tp = tgtEnterPt ?? nodeBorderPoint(target, sp);
+    return [sp, tp];
+  }
+
+  const obsLeft  = Math.min(...blocking.map((o) => o.x));
+  const obsRight = Math.max(...blocking.map((o) => o.x + o.width));
+
+  const routeY = findRoutingLane(blocking, tc.y, margin);
+
+  // Clamp exit/enter X to [sc.x, tc.x] for LR so the path never reverses
+  // direction when an obstacle's bounding box extends past source or target.
+  const exitX  = direction === 'LR' ? Math.max(sc.x, obsLeft  - margin) : obsLeft  - margin;
+  const enterX = direction === 'LR' ? Math.min(tc.x, obsRight + margin) : obsRight + margin;
+  const exitPt  : Pt = { x: exitX,  y: routeY };
+  const enterPt : Pt = { x: enterX, y: routeY };
+
+  const tp = tgtEnterPt ?? nodeBorderPoint(target, enterPt);
+
+  if (srcExitPt) {
+    return [srcExitPt, exitPt, enterPt, tp];
+  }
+
+  return [nodeBorderPoint(source, exitPt), exitPt, enterPt, tp];
+}
 
 /** Compute the point on a node's border closest to an external target point. */
 function nodeBorderPoint(
@@ -599,12 +939,15 @@ function renderEdgePaths(
   svg: d3Selection.Selection<SVGGElement, unknown, null, undefined>,
   edges: InfraLayoutEdge[],
   nodes: InfraLayoutNode[],
+  groups: InfraLayoutGroup[],
   palette: PaletteColors,
   isDark: boolean,
   animate: boolean,
+  direction: 'LR' | 'TB',
 ) {
   const nodeMap = new Map(nodes.map((n) => [n.id, n]));
   const maxRps = Math.max(...edges.map((e) => e.computedRps), 1);
+  const { srcPts, tgtPts } = computePortPts(edges, nodeMap, direction);
 
   for (const edge of edges) {
     if (edge.points.length === 0) continue;
@@ -614,29 +957,13 @@ function renderEdgePaths(
     const color = edgeColor(edge, palette);
     const strokeW = edgeWidth();
 
-    // Ensure dagre waypoints are ordered source→target (not guaranteed by dagre)
-    let pts = edge.points;
-    if (sourceNode && targetNode && pts.length >= 2) {
-      const first = pts[0];
-      const distFirstToSource = (first.x - sourceNode.x) ** 2 + (first.y - sourceNode.y) ** 2;
-      const distFirstToTarget = (first.x - targetNode.x) ** 2 + (first.y - targetNode.y) ** 2;
-      if (distFirstToTarget < distFirstToSource) {
-        pts = [...pts].reverse();
-      }
-    }
-
-    // Prepend source border point and append target border point so edges
-    // visually connect to node boundaries (dagre waypoints float between nodes)
-    if (sourceNode && pts.length > 0) {
-      const bp = nodeBorderPoint(sourceNode, pts[0]);
-      pts = [bp, ...pts];
-    }
-    if (targetNode && pts.length > 0) {
-      const bp = nodeBorderPoint(targetNode, pts[pts.length - 1]);
-      pts = [...pts, bp];
-    }
-
-    const pathD = lineGenerator(pts) ?? '';
+    if (!sourceNode || !targetNode) continue;
+    const key = `${edge.sourceId}:${edge.targetId}`;
+    const pts = edgeWaypoints(
+      sourceNode, targetNode, groups, nodes, direction, 30,
+      srcPts.get(key), tgtPts.get(key),
+    );
+    const pathD = buildPathD(pts, direction);
     const edgeG = svg.append('g')
       .attr('class', 'infra-edge')
       .attr('data-line-number', edge.lineNumber);
@@ -676,16 +1003,30 @@ function renderEdgePaths(
 function renderEdgeLabels(
   svg: d3Selection.Selection<SVGGElement, unknown, null, undefined>,
   edges: InfraLayoutEdge[],
+  nodes: InfraLayoutNode[],
+  groups: InfraLayoutGroup[],
   palette: PaletteColors,
   isDark: boolean,
   animate: boolean,
+  direction: 'LR' | 'TB',
 ) {
+  const nodeMap = new Map(nodes.map((n) => [n.id, n]));
+  const { srcPts, tgtPts } = computePortPts(edges, nodeMap, direction);
   for (const edge of edges) {
     if (edge.points.length === 0) continue;
     if (!edge.label) continue;
 
-    const midIdx = Math.floor(edge.points.length / 2);
-    const midPt = edge.points[midIdx];
+    const sourceNode = nodeMap.get(edge.sourceId);
+    const targetNode = nodeMap.get(edge.targetId);
+    if (!sourceNode || !targetNode) continue;
+
+    const key = `${edge.sourceId}:${edge.targetId}`;
+    const wps = edgeWaypoints(
+      sourceNode, targetNode, groups, nodes, direction, 30,
+      srcPts.get(key), tgtPts.get(key),
+    );
+    // Label midpoint: middle waypoint of the routed path
+    const midPt = wps[Math.floor(wps.length / 2)];
     const labelText = edge.label;
 
     const g = svg.append('g')
@@ -713,7 +1054,7 @@ function renderEdgeLabels(
 
     // When animated, add a wider invisible hover zone so labels appear on hover
     if (animate) {
-      const pathD = lineGenerator(edge.points) ?? '';
+      const pathD = buildPathD(wps, direction);
       g.insert('path', ':first-child')
         .attr('d', pathD)
         .attr('fill', 'none')
@@ -1311,21 +1652,6 @@ export function computeInfraLegendGroups(
   return groups;
 }
 
-/** Compute total width for the playback pill (speed only). */
-function computePlaybackWidth(playback: InfraPlaybackState | undefined): number {
-  if (!playback) return 0;
-  const pillWidth = 'Playback'.length * LEGEND_PILL_FONT_W + LEGEND_PILL_PAD;
-  if (!playback.expanded) return pillWidth;
-
-  let entriesW = 8; // gap after pill
-  entriesW += LEGEND_PILL_FONT_SIZE * 0.8 + 6; // play/pause
-  for (const s of playback.speedOptions) {
-    entriesW += `${s}x`.length * LEGEND_ENTRY_FONT_W + SPEED_BADGE_H_PAD * 2 + SPEED_BADGE_GAP;
-  }
-  return LEGEND_CAPSULE_PAD * 2 + pillWidth + entriesW;
-}
-
-/** Whether a separate Scenario pill should render. */
 function renderLegend(
   rootSvg: d3Selection.Selection<SVGSVGElement, unknown, null, undefined>,
   legendGroups: InfraLegendGroup[],
@@ -1334,21 +1660,21 @@ function renderLegend(
   palette: PaletteColors,
   isDark: boolean,
   activeGroup: string | null,
-  playback?: InfraPlaybackState,
 ) {
-  if (legendGroups.length === 0 && !playback) return;
+  if (legendGroups.length === 0) return;
 
   const legendG = rootSvg.append('g')
     .attr('transform', `translate(0, ${legendY})`);
 
+  if (activeGroup) {
+    legendG.attr('data-legend-active', activeGroup.toLowerCase());
+  }
+
   // Compute centered positions
   const effectiveW = (g: InfraLegendGroup) =>
     activeGroup != null && g.name.toLowerCase() === activeGroup.toLowerCase() ? g.width : g.minifiedWidth;
-  const playbackW = computePlaybackWidth(playback);
-  const trailingGaps = legendGroups.length > 0 && playbackW > 0 ? LEGEND_GROUP_GAP : 0;
   const totalLegendW = legendGroups.reduce((s, g) => s + effectiveW(g), 0)
-    + (legendGroups.length - 1) * LEGEND_GROUP_GAP
-    + trailingGaps + playbackW;
+    + (legendGroups.length - 1) * LEGEND_GROUP_GAP;
   let cursorX = (totalWidth - totalLegendW) / 2;
 
   for (const group of legendGroups) {
@@ -1366,7 +1692,6 @@ function renderLegend(
       .attr('transform', `translate(${cursorX}, 0)`)
       .attr('class', 'infra-legend-group')
       .attr('data-legend-group', group.name.toLowerCase())
-      .attr('data-legend-type', group.type)
       .style('cursor', 'pointer');
 
     // Outer capsule background (active only)
@@ -1400,7 +1725,7 @@ function renderLegend(
         .attr('height', pillH)
         .attr('rx', pillH / 2)
         .attr('fill', 'none')
-        .attr('stroke', isDark ? mix(palette.textMuted, palette.bg, 50) : mix(palette.textMuted, palette.bg, 50))
+        .attr('stroke', mix(palette.textMuted, palette.bg, 50))
         .attr('stroke-width', 0.75);
     }
 
@@ -1422,15 +1747,12 @@ function renderLegend(
         const entryG = gEl
           .append('g')
           .attr('class', 'infra-legend-entry')
-          .attr('data-legend-entry', entry.key)
-          .attr('data-legend-type', group.type)
+          .attr('data-legend-entry', entry.key.toLowerCase())
           .attr('data-legend-color', entry.color)
+          .attr('data-legend-type', group.type)
+          .attr('data-legend-tag-group', group.type === 'tag' ? (group.tagKey ?? '') : null)
           .style('cursor', 'pointer');
 
-        if (group.type === 'tag' && group.tagKey) {
-          entryG.attr('data-legend-tag-group', group.tagKey);
-        }
-
         entryG.append('circle')
           .attr('cx', entryX + LEGEND_DOT_R)
           .attr('cy', LEGEND_HEIGHT / 2)
@@ -1453,127 +1775,12 @@ function renderLegend(
     cursorX += effectiveW(group) + LEGEND_GROUP_GAP;
   }
 
-  // Playback pill — speed + pause only
-  if (playback) {
-    const isExpanded = playback.expanded;
-    const groupBg = isDark
-      ? mix(palette.bg, palette.text, 85)
-      : mix(palette.bg, palette.text, 92);
-
-    const pillLabel = 'Playback';
-    const pillWidth = pillLabel.length * LEGEND_PILL_FONT_W + LEGEND_PILL_PAD;
-    const fullW = computePlaybackWidth(playback);
-
-    const pbG = legendG
-      .append('g')
-      .attr('transform', `translate(${cursorX}, 0)`)
-      .attr('class', 'infra-legend-group infra-playback-pill')
-      .style('cursor', 'pointer');
-
-    if (isExpanded) {
-      pbG.append('rect')
-        .attr('width', fullW)
-        .attr('height', LEGEND_HEIGHT)
-        .attr('rx', LEGEND_HEIGHT / 2)
-        .attr('fill', groupBg);
-    }
-
-    const pillXOff = isExpanded ? LEGEND_CAPSULE_PAD : 0;
-    const pillYOff = isExpanded ? LEGEND_CAPSULE_PAD : 0;
-    const pillH = LEGEND_HEIGHT - (isExpanded ? LEGEND_CAPSULE_PAD * 2 : 0);
-
-    pbG.append('rect')
-      .attr('x', pillXOff).attr('y', pillYOff)
-      .attr('width', pillWidth).attr('height', pillH)
-      .attr('rx', pillH / 2)
-      .attr('fill', isExpanded ? palette.bg : groupBg);
-
-    if (isExpanded) {
-      pbG.append('rect')
-        .attr('x', pillXOff).attr('y', pillYOff)
-        .attr('width', pillWidth).attr('height', pillH)
-        .attr('rx', pillH / 2)
-        .attr('fill', 'none')
-        .attr('stroke', mix(palette.textMuted, palette.bg, 50))
-        .attr('stroke-width', 0.75);
-    }
-
-    pbG.append('text')
-      .attr('x', pillXOff + pillWidth / 2)
-      .attr('y', LEGEND_HEIGHT / 2 + LEGEND_PILL_FONT_SIZE / 2 - 2)
-      .attr('font-family', FONT_FAMILY)
-      .attr('font-size', LEGEND_PILL_FONT_SIZE)
-      .attr('font-weight', '500')
-      .attr('fill', isExpanded ? palette.text : palette.textMuted)
-      .attr('text-anchor', 'middle')
-      .text(pillLabel);
-
-    if (isExpanded) {
-      let entryX = pillXOff + pillWidth + 8;
-      const entryY = LEGEND_HEIGHT / 2 + LEGEND_ENTRY_FONT_SIZE / 2 - 1;
-
-      const ppLabel = playback.paused ? '▶' : '⏸';
-      pbG.append('text')
-        .attr('x', entryX).attr('y', entryY)
-        .attr('font-family', FONT_FAMILY)
-        .attr('font-size', LEGEND_PILL_FONT_SIZE)
-        .attr('fill', palette.textMuted)
-        .attr('data-playback-action', 'toggle-pause')
-        .style('cursor', 'pointer')
-        .text(ppLabel);
-      entryX += LEGEND_PILL_FONT_SIZE * 0.8 + 6;
-
-      for (const s of playback.speedOptions) {
-        const label = `${s}x`;
-        const isActive = playback.speed === s;
-        const slotW = label.length * LEGEND_ENTRY_FONT_W + SPEED_BADGE_H_PAD * 2;
-        const badgeH = LEGEND_ENTRY_FONT_SIZE + SPEED_BADGE_V_PAD * 2;
-        const badgeY = (LEGEND_HEIGHT - badgeH) / 2;
-
-        // Wrap in <g> with data attrs so a single element carries the action,
-        // and both rect and text inherit the hit target cleanly.
-        const speedG = pbG.append('g')
-          .attr('data-playback-action', 'set-speed')
-          .attr('data-playback-value', String(s))
-          .style('cursor', 'pointer');
-
-        // Badge rect: filled for active, transparent hit-target for inactive
-        speedG.append('rect')
-          .attr('x', entryX)
-          .attr('y', badgeY)
-          .attr('width', slotW)
-          .attr('height', badgeH)
-          .attr('rx', badgeH / 2)
-          .attr('fill', isActive ? palette.primary : 'transparent');
-
-        speedG.append('text')
-          .attr('x', entryX + slotW / 2).attr('y', entryY)
-          .attr('font-family', FONT_FAMILY)
-          .attr('font-size', LEGEND_ENTRY_FONT_SIZE)
-          .attr('font-weight', isActive ? '600' : '400')
-          .attr('fill', isActive ? palette.bg : palette.textMuted)
-          .attr('text-anchor', 'middle')
-          .text(label);
-        entryX += slotW + SPEED_BADGE_GAP;
-      }
-    }
-
-    cursorX += fullW + LEGEND_GROUP_GAP;
-  }
-
 }
 
 // ============================================================
 // Main render
 // ============================================================
 
-export interface InfraPlaybackState {
-  expanded: boolean;
-  paused: boolean;
-  speed: number;
-  speedOptions: readonly number[];
-}
-
 export function renderInfra(
   container: HTMLDivElement,
   layout: InfraLayoutResult,
@@ -1584,7 +1791,7 @@ export function renderInfra(
   tagGroups?: InfraTagGroup[],
   activeGroup?: string | null,
   animate?: boolean,
-  playback?: InfraPlaybackState | null,
+  _playback?: unknown,
   expandedNodeIds?: Set<string> | null,
   exportMode?: boolean,
   collapsedNodes?: Set<string> | null,
@@ -1594,7 +1801,7 @@ export function renderInfra(
 
   // Build legend groups
   const legendGroups = computeInfraLegendGroups(layout.nodes, tagGroups ?? [], palette, layout.edges);
-  const hasLegend = legendGroups.length > 0 || !!playback;
+  const hasLegend = legendGroups.length > 0;
   // In app mode (not export), legend is rendered as a separate fixed-size SVG
   const fixedLegend = !exportMode && hasLegend;
   const legendOffset = hasLegend && !fixedLegend ? LEGEND_HEIGHT : 0;
@@ -1677,7 +1884,7 @@ export function renderInfra(
 
   // Render layers: groups (back), edge paths, nodes, reject particles, edge labels (front)
   renderGroups(svg, layout.groups, palette, isDark);
-  renderEdgePaths(svg, layout.edges, layout.nodes, palette, isDark, shouldAnimate);
+  renderEdgePaths(svg, layout.edges, layout.nodes, layout.groups, palette, isDark, shouldAnimate, layout.direction);
   const fanoutSourceIds = collectFanoutSourceIds(layout.edges);
   const scaledGroupIds = new Set<string>(
     layout.groups
@@ -1692,7 +1899,7 @@ export function renderInfra(
   if (shouldAnimate) {
     renderRejectParticles(svg, layout.nodes);
   }
-  renderEdgeLabels(svg, layout.edges, palette, isDark, shouldAnimate);
+  renderEdgeLabels(svg, layout.edges, layout.nodes, layout.groups, palette, isDark, shouldAnimate, layout.direction);
 
   // Legend at bottom
   if (hasLegend) {
@@ -1707,9 +1914,9 @@ export function renderInfra(
         .attr('viewBox', `0 0 ${containerWidth} ${LEGEND_HEIGHT + LEGEND_FIXED_GAP}`)
         .attr('preserveAspectRatio', 'xMidYMid meet')
         .style('display', 'block');
-      renderLegend(legendSvg, legendGroups, containerWidth, LEGEND_FIXED_GAP / 2, palette, isDark, activeGroup ?? null, playback ?? undefined);
+      renderLegend(legendSvg, legendGroups, containerWidth, LEGEND_FIXED_GAP / 2, palette, isDark, activeGroup ?? null);
     } else {
-      renderLegend(rootSvg, legendGroups, totalWidth, titleOffset + layout.height + 4, palette, isDark, activeGroup ?? null, playback ?? undefined);
+      renderLegend(rootSvg, legendGroups, totalWidth, titleOffset + layout.height + 4, palette, isDark, activeGroup ?? null);
     }
   }
 }