footprint-explainable-ui 0.25.0 → 0.25.2

package/dist/flowchart.js

@@ -490,7 +490,7 @@ var StageNode = memo(function StageNode2({
                   background: bg,
                   border: `${isHero ? "2.5px" : isMuted ? "1px" : "2px"} ${isLazyUnresolved ? "dashed" : "solid"} ${borderColor}`,
                   borderRadius: theme.radius,
-                  padding: description ? `${Math.round(8 * sizeScale)}px ${Math.round(16 * sizeScale)}px` : `${Math.round(10 * sizeScale)}px ${Math.round(20 * sizeScale)}px`,
+                  padding: description ? `${Math.round(6 * sizeScale)}px ${Math.round(12 * sizeScale)}px` : `${Math.round(7 * sizeScale)}px ${Math.round(14 * sizeScale)}px`,
                   display: "flex",
                   flexDirection: "column",
                   alignItems: "center",
@@ -1464,6 +1464,14 @@ function staggeredBendY(sourceBottom, targetTop, others, minGapFromTarget = 8) {
   if (lowestSkippedBottom === -Infinity) return null;
   return Math.min((lowestSkippedBottom + targetTop) / 2, targetTop - minGapFromTarget);
 }
+function forkFanBendY(sourceBottom, childTops, minGapFromTarget = 8) {
+  if (childTops.length < 2) return null;
+  const nearestTop = Math.min(...childTops);
+  return Math.min((sourceBottom + nearestTop) / 2, nearestTop - minGapFromTarget);
+}
+function resolveStepBendY(forkBend, staggeredBend) {
+  return staggeredBend ?? forkBend;
+}
 
 // src/components/SmartStepEdge/SmartStepEdge.tsx
 import { jsx as jsx7 } from "react/jsx-runtime";
@@ -1486,6 +1494,16 @@ function SmartStepEdge({
     if (!src || !tgt) return null;
     const sourceBottom = src.internals.positionAbsolute.y + (src.measured.height ?? 0);
     const targetTop = tgt.internals.positionAbsolute.y;
+    const childTops = [];
+    for (const e of s.edges) {
+      if (e.source !== source) continue;
+      if (e.data?.kind === "loop") continue;
+      const c = s.nodeLookup.get(e.target);
+      if (c && c.type !== GROUP_CONTAINER_NODE_TYPE) {
+        childTops.push(c.internals.positionAbsolute.y);
+      }
+    }
+    const fan = forkFanBendY(sourceBottom, childTops);
     const others = [];
     for (const n of s.nodeLookup.values()) {
       if (n.id === source || n.id === target) continue;
@@ -1493,7 +1511,8 @@ function SmartStepEdge({
       const top = n.internals.positionAbsolute.y;
       others.push({ top, bottom: top + (n.measured.height ?? 0) });
     }
-    return staggeredBendY(sourceBottom, targetTop, others);
+    const staggered = staggeredBendY(sourceBottom, targetTop, others);
+    return resolveStepBendY(fan, staggered);
   });
   const [path] = getSmoothStepPath({
     sourceX,
@@ -1856,7 +1875,7 @@ function TraceFlow(props) {
 }
 
 // src/components/FlowchartView/TracedFlow.tsx
-import { useCallback as useCallback3, useMemo as useMemo5, useRef as useRef5, useState as useState4 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect7, useMemo as useMemo5, useRef as useRef5, useState as useState4 } from "react";
 import {
   ReactFlow as ReactFlow2,
   Background as Background2,
@@ -1874,6 +1893,150 @@ function devWarn(messageFn, ...extras) {
   console.warn(messageFn(), ...extras);
 }
 
+// src/components/FlowchartView/_internal/snapLinearSuccessors.ts
+function snapLinearSuccessors(graph, options = {}) {
+  if (graph.nodes.length === 0) return graph;
+  const fallbackW = options.nodeWidth ?? DEFAULT_NODE_W2;
+  const fallbackH = options.nodeHeight ?? DEFAULT_NODE_H2;
+  const byId = /* @__PURE__ */ new Map();
+  const width = /* @__PURE__ */ new Map();
+  for (const n of graph.nodes) {
+    byId.set(n.id, n);
+    width.set(n.id, sizeOf(n, fallbackW, fallbackH, options.nodeSize).width);
+  }
+  const preds = /* @__PURE__ */ new Map();
+  const outDegree = /* @__PURE__ */ new Map();
+  const seenEdge = /* @__PURE__ */ new Set();
+  for (const e of graph.edges) {
+    if (e.data?.kind === "loop") continue;
+    if (!byId.has(e.source) || !byId.has(e.target)) continue;
+    const key = `${e.source}\0${e.target}`;
+    if (seenEdge.has(key)) continue;
+    seenEdge.add(key);
+    const list = preds.get(e.target);
+    if (list) list.push(e.source);
+    else preds.set(e.target, [e.source]);
+    outDegree.set(e.source, (outDegree.get(e.source) ?? 0) + 1);
+  }
+  const workingX = /* @__PURE__ */ new Map();
+  for (const n of graph.nodes) workingX.set(n.id, n.position.x);
+  const centerX = (id) => workingX.get(id) + width.get(id) / 2;
+  const order = [...graph.nodes].sort(
+    (a, b) => a.position.y - b.position.y || a.position.x - b.position.x || (a.id < b.id ? -1 : a.id > b.id ? 1 : 0)
+  );
+  for (const n of order) {
+    const p = preds.get(n.id);
+    if (!p || p.length !== 1) continue;
+    const pid = p[0];
+    if ((outDegree.get(pid) ?? 0) !== 1) continue;
+    const P = byId.get(pid);
+    if ((n.parentId ?? void 0) !== (P.parentId ?? void 0)) continue;
+    workingX.set(n.id, centerX(pid) - width.get(n.id) / 2);
+  }
+  const nodes = graph.nodes.map((n) => {
+    const nx = workingX.get(n.id);
+    return nx === n.position.x ? n : { ...n, position: { x: nx, y: n.position.y } };
+  });
+  return { nodes, edges: graph.edges };
+}
+function createSnappedDagreLayout(base, options = {}) {
+  return (graph) => snapLinearSuccessors(base(graph), options);
+}
+
+// src/components/FlowchartView/_internal/centerForkParents.ts
+function centerForkParents(graph, options = {}) {
+  if (graph.nodes.length === 0) return graph;
+  const fallbackW = options.nodeWidth ?? DEFAULT_NODE_W2;
+  const fallbackH = options.nodeHeight ?? DEFAULT_NODE_H2;
+  const byId = /* @__PURE__ */ new Map();
+  const width = /* @__PURE__ */ new Map();
+  for (const n of graph.nodes) {
+    byId.set(n.id, n);
+    width.set(n.id, sizeOf(n, fallbackW, fallbackH, options.nodeSize).width);
+  }
+  const childrenOf = /* @__PURE__ */ new Map();
+  const predsOf = /* @__PURE__ */ new Map();
+  const outDegree = /* @__PURE__ */ new Map();
+  const inDegree = /* @__PURE__ */ new Map();
+  const seen = /* @__PURE__ */ new Set();
+  for (const e of graph.edges) {
+    if (e.data?.kind === "loop") continue;
+    if (!byId.has(e.source) || !byId.has(e.target)) continue;
+    const key = `${e.source} ${e.target}`;
+    if (seen.has(key)) continue;
+    seen.add(key);
+    const cl = childrenOf.get(e.source);
+    if (cl) cl.push(e.target);
+    else childrenOf.set(e.source, [e.target]);
+    const pl = predsOf.get(e.target);
+    if (pl) pl.push(e.source);
+    else predsOf.set(e.target, [e.source]);
+    outDegree.set(e.source, (outDegree.get(e.source) ?? 0) + 1);
+    inDegree.set(e.target, (inDegree.get(e.target) ?? 0) + 1);
+  }
+  const workingX = /* @__PURE__ */ new Map();
+  for (const n of graph.nodes) workingX.set(n.id, n.position.x);
+  const centerX = (id) => workingX.get(id) + width.get(id) / 2;
+  const nodeSep = options.nodeSep ?? 60;
+  const clampX = (id, desiredX) => {
+    const w = width.get(id);
+    const x0 = workingX.get(id);
+    const self = byId.get(id);
+    let minX = -Infinity;
+    let maxX = Infinity;
+    for (const m of graph.nodes) {
+      if (m.id === id || m.parentId !== self.parentId) continue;
+      if (Math.abs(m.position.y - self.position.y) > 1) continue;
+      const mLeft = workingX.get(m.id);
+      const mRight = mLeft + width.get(m.id);
+      if (mRight <= x0) minX = Math.max(minX, mRight + nodeSep);
+      else if (mLeft >= x0 + w) maxX = Math.min(maxX, mLeft - nodeSep - w);
+    }
+    return minX <= maxX ? Math.max(minX, Math.min(maxX, desiredX)) : x0;
+  };
+  const order = [...graph.nodes].sort(
+    (a, b) => b.position.y - a.position.y || a.position.x - b.position.x || a.id.localeCompare(b.id)
+  );
+  for (const n of order) {
+    const outD = outDegree.get(n.id) ?? 0;
+    const inD = inDegree.get(n.id) ?? 0;
+    const isFork = outD >= 2 && inD <= 1;
+    const isMerge = inD >= 2 && outD <= 1;
+    if (!isFork && !isMerge) continue;
+    const kin = ((isFork ? childrenOf.get(n.id) : predsOf.get(n.id)) ?? []).filter(
+      (k) => byId.get(k)?.parentId === n.parentId
+      // same compound only
+    );
+    if (kin.length < 2) continue;
+    const centers = kin.map(centerX);
+    const wN = width.get(n.id);
+    const span = (Math.min(...centers) + Math.max(...centers)) / 2;
+    workingX.set(n.id, clampX(n.id, span - wN / 2));
+    const stepOf = isFork ? predsOf : childrenOf;
+    let curId = n.id;
+    const walked = /* @__PURE__ */ new Set([curId]);
+    for (; ; ) {
+      const nexts = stepOf.get(curId);
+      if (!nexts || nexts.length !== 1) break;
+      const m = nexts[0];
+      if (walked.has(m)) break;
+      if ((outDegree.get(m) ?? 0) > 1) break;
+      if ((inDegree.get(m) ?? 0) > 1) break;
+      if (byId.get(m)?.parentId !== byId.get(curId)?.parentId) break;
+      workingX.set(m, clampX(m, centerX(curId) - width.get(m) / 2));
+      walked.add(m);
+      curId = m;
+    }
+  }
+  const nodes = graph.nodes.map(
+    (n) => workingX.get(n.id) === n.position.x ? n : { ...n, position: { x: workingX.get(n.id), y: n.position.y } }
+  );
+  return { nodes, edges: graph.edges };
+}
+function withForkCentering(base, options = {}) {
+  return (graph) => centerForkParents(base(graph), options);
+}
+
 // src/components/FlowchartView/_internal/notifyChange.ts
 function createNotifier(label = "notifier") {
   const listeners = /* @__PURE__ */ new Set();
@@ -2231,6 +2394,49 @@ function GroupContainerNode({ data }) {
   );
 }
 
+// src/components/FlowchartView/_internal/MeasuredNodeSizes.tsx
+import { useEffect as useEffect6 } from "react";
+import { useNodesInitialized, useStore as useStore3 } from "@xyflow/react";
+
+// src/components/FlowchartView/_internal/measuredFootprints.ts
+function extractMeasuredFootprints(entries) {
+  const sizes = /* @__PURE__ */ new Map();
+  for (const [id, node] of entries) {
+    const width = node.measured?.width;
+    const height = node.measured?.height;
+    if (typeof width === "number" && typeof height === "number" && width > 0 && height > 0) {
+      sizes.set(id, { width: Math.round(width), height: Math.round(height) });
+    }
+  }
+  return sizes;
+}
+function sameFootprints(a, b) {
+  if (a === b) return true;
+  if (a.size !== b.size) return false;
+  for (const [id, s] of a) {
+    const t = b.get(id);
+    if (!t || t.width !== s.width || t.height !== s.height) return false;
+  }
+  return true;
+}
+
+// src/components/FlowchartView/_internal/MeasuredNodeSizes.tsx
+function MeasuredNodeSizes({
+  onSizes,
+  includeHiddenNodes = false
+}) {
+  const initialized = useNodesInitialized({ includeHiddenNodes });
+  const sizes = useStore3(
+    (s) => extractMeasuredFootprints(s.nodeLookup),
+    sameFootprints
+  );
+  useEffect6(() => {
+    if (!initialized || sizes.size === 0) return;
+    onSizes(sizes);
+  }, [initialized, sizes, onSizes]);
+  return null;
+}
+
 // src/components/FlowchartView/TracedFlow.tsx
 import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 var DEFAULT_COLORS = {
@@ -2370,6 +2576,13 @@ function TracedFlow({
   style
 }) {
   const layout = layoutProp ?? dagreTraceLayout;
+  useEffect7(() => {
+    if (layoutProp === dagreTraceLayout) {
+      devWarn(
+        () => "[footprint-explainable-ui] <TracedFlow layout={dagreTraceLayout}> bypasses the built-in measure-then-layout pipeline (content-exact sizing, fork/merge centering, straight spines). OMIT the `layout` prop to use it \u2014 passing the raw dagreTraceLayout silently forfeits every layout improvement eui ships."
+      );
+    }
+  }, [layoutProp]);
   const colors = useMemo5(
     () => ({ ...DEFAULT_COLORS, ...colorOverrides ?? {} }),
     [colorOverrides]
@@ -2403,8 +2616,19 @@ function TracedFlow({
     () => buildSubflowBreadcrumb(graph, drill.currentSubflowId),
     [graph, drill.currentSubflowId]
   );
+  const [measuredSizes, setMeasuredSizes] = useState4(null);
   const positioned = useMemo5(() => {
-    const realBase = layout === "passthrough" ? (g) => g : layout;
+    const nodeSize = measuredSizes ? (n) => measuredSizes.get(n.id) : void 0;
+    const sizeOpts = nodeSize ? { nodeSize } : {};
+    const dagreBase = withForkCentering(
+      createSnappedDagreLayout(
+        createDagreTraceLayout({ ...sizeOpts, rankSep: 52, nodeSep: 36 }),
+        sizeOpts
+      ),
+      { ...sizeOpts, nodeSep: 36 }
+      // same nodeSep → clamp preserves dagre's reserved gap
+    );
+    const realBase = layout === "passthrough" ? (g) => g : layoutProp === void 0 ? dagreBase : layout;
     if (groupedSet.size > 0) {
       const grouped = applyGroupLayout(filteredGraph, {
         groupedSubflowIds: [...groupedSet],
@@ -2415,8 +2639,8 @@ function TracedFlow({
     if (mainChartBox) {
       return wrapInMainChartBox(filteredGraph, { baseLayout: realBase, ...mainChartBox });
     }
-    return layout === "passthrough" ? filteredGraph : layout(filteredGraph);
-  }, [filteredGraph, layout, groupedSet, mainChartBox]);
+    return realBase(filteredGraph);
+  }, [filteredGraph, layout, layoutProp, groupedSet, mainChartBox, measuredSizes]);
   const slice = useMemo5(() => {
     const empty = {
       doneStageIds: /* @__PURE__ */ new Set(),
@@ -2460,7 +2684,11 @@ function TracedFlow({
   );
   const wrapperRef = useRef5(null);
   const [rfInstance, setRfInstance] = useState4(null);
-  useChartAutoRefit(wrapperRef, rfInstance, { refitKey: drill.currentSubflowId });
+  useChartAutoRefit(wrapperRef, rfInstance, {
+    // Re-fit on drill AND after the measured-size re-layout settles.
+    refitKey: `${drill.currentSubflowId ?? ""}:${measuredSizes ? "measured" : "estimated"}`,
+    padding: 0.18
+  });
   return /* @__PURE__ */ jsxs8(
     "div",
     {
@@ -2492,8 +2720,11 @@ function TracedFlow({
             onNodeClick: handleNodeClick,
             onInit: setRfInstance,
             fitView: true,
+            fitViewOptions: { padding: 0.18 },
+            minZoom: 0.1,
             proOptions: { hideAttribution: true },
             children: [
+              /* @__PURE__ */ jsx11(MeasuredNodeSizes, { onSizes: setMeasuredSizes }),
               /* @__PURE__ */ jsx11(Background2, { variant: BackgroundVariant2.Dots, gap: 20, size: 1 }),
               children
             ]
@@ -3508,56 +3739,6 @@ function SlotPillNode({ data }) {
   );
 }
 
-// src/components/FlowchartView/_internal/snapLinearSuccessors.ts
-function snapLinearSuccessors(graph, options = {}) {
-  if (graph.nodes.length === 0) return graph;
-  const fallbackW = options.nodeWidth ?? DEFAULT_NODE_W2;
-  const fallbackH = options.nodeHeight ?? DEFAULT_NODE_H2;
-  const byId = /* @__PURE__ */ new Map();
-  const width = /* @__PURE__ */ new Map();
-  for (const n of graph.nodes) {
-    byId.set(n.id, n);
-    width.set(n.id, sizeOf(n, fallbackW, fallbackH, options.nodeSize).width);
-  }
-  const preds = /* @__PURE__ */ new Map();
-  const outDegree = /* @__PURE__ */ new Map();
-  const seenEdge = /* @__PURE__ */ new Set();
-  for (const e of graph.edges) {
-    if (e.data?.kind === "loop") continue;
-    if (!byId.has(e.source) || !byId.has(e.target)) continue;
-    const key = `${e.source}\0${e.target}`;
-    if (seenEdge.has(key)) continue;
-    seenEdge.add(key);
-    const list = preds.get(e.target);
-    if (list) list.push(e.source);
-    else preds.set(e.target, [e.source]);
-    outDegree.set(e.source, (outDegree.get(e.source) ?? 0) + 1);
-  }
-  const workingX = /* @__PURE__ */ new Map();
-  for (const n of graph.nodes) workingX.set(n.id, n.position.x);
-  const centerX = (id) => workingX.get(id) + width.get(id) / 2;
-  const order = [...graph.nodes].sort(
-    (a, b) => a.position.y - b.position.y || a.position.x - b.position.x || (a.id < b.id ? -1 : a.id > b.id ? 1 : 0)
-  );
-  for (const n of order) {
-    const p = preds.get(n.id);
-    if (!p || p.length !== 1) continue;
-    const pid = p[0];
-    if ((outDegree.get(pid) ?? 0) !== 1) continue;
-    const P = byId.get(pid);
-    if ((n.parentId ?? void 0) !== (P.parentId ?? void 0)) continue;
-    workingX.set(n.id, centerX(pid) - width.get(n.id) / 2);
-  }
-  const nodes = graph.nodes.map((n) => {
-    const nx = workingX.get(n.id);
-    return nx === n.position.x ? n : { ...n, position: { x: nx, y: n.position.y } };
-  });
-  return { nodes, edges: graph.edges };
-}
-function createSnappedDagreLayout(base, options = {}) {
-  return (graph) => snapLinearSuccessors(base(graph), options);
-}
-
 // src/components/FlowchartView/_internal/traceGroupLayout.ts
 function buildAdjacency(graph, fallbackW, fallbackH, nodeSize) {
   const preds = /* @__PURE__ */ new Map();