footprint-explainable-ui 0.26.2 → 0.28.0

package/dist/flowchart.d.cts

@@ -997,6 +997,17 @@ interface TracedFlowProps extends BaseComponentProps {
      * none — single-active behaviour is unchanged.
      */
     coActiveStageIds?: ReadonlySet<string>;
+    /**
+     * Dependency-CONE overlay (the variable backward slice painted on the
+     * chart): a map of chart node id → BFS depth (0 = the slice anchor/writer).
+     * Nodes NOT in the map dim to near-transparency; members re-light with a
+     * staggered transition-delay by depth — causality walks BACKWARDS across
+     * the chart when the cone changes. Edges with either endpoint outside the
+     * cone dim too. `undefined`/`null` = no cone, byte-identical rendering.
+     * Keys are chart node ids (the stage part of a runtimeStageId — strip
+     * `#N` before passing).
+     */
+    sliceCone?: ReadonlyMap<string, number> | null;
     /**
      * Subflow ids to render as GROUP CONTAINER boxes — the subflow's member
      * stages render NESTED inside the box (xyflow `parentId` + `extent`),
@@ -1024,7 +1035,7 @@ interface TracedFlowProps extends BaseComponentProps {
      */
     children?: react.ReactNode;
 }
-declare function TracedFlow({ graph, overlay, scrubIndex, layout: layoutProp, colors: colorOverrides, onNodeClick, onSubflowChange, groupedSubflows, mainChartBox, nodeTypes: userNodeTypes, edgeTypes: userEdgeTypes, coActiveStageIds, children, className, style, }: TracedFlowProps): react.JSX.Element;
+declare function TracedFlow({ graph, overlay, scrubIndex, layout: layoutProp, colors: colorOverrides, onNodeClick, onSubflowChange, groupedSubflows, mainChartBox, nodeTypes: userNodeTypes, edgeTypes: userEdgeTypes, coActiveStageIds, sliceCone, children, className, style, }: TracedFlowProps): react.JSX.Element;
 
 interface GroupContainerNodeData {
     label: string;

package/dist/flowchart.d.ts

@@ -997,6 +997,17 @@ interface TracedFlowProps extends BaseComponentProps {
      * none — single-active behaviour is unchanged.
      */
     coActiveStageIds?: ReadonlySet<string>;
+    /**
+     * Dependency-CONE overlay (the variable backward slice painted on the
+     * chart): a map of chart node id → BFS depth (0 = the slice anchor/writer).
+     * Nodes NOT in the map dim to near-transparency; members re-light with a
+     * staggered transition-delay by depth — causality walks BACKWARDS across
+     * the chart when the cone changes. Edges with either endpoint outside the
+     * cone dim too. `undefined`/`null` = no cone, byte-identical rendering.
+     * Keys are chart node ids (the stage part of a runtimeStageId — strip
+     * `#N` before passing).
+     */
+    sliceCone?: ReadonlyMap<string, number> | null;
     /**
      * Subflow ids to render as GROUP CONTAINER boxes — the subflow's member
      * stages render NESTED inside the box (xyflow `parentId` + `extent`),
@@ -1024,7 +1035,7 @@ interface TracedFlowProps extends BaseComponentProps {
      */
     children?: react.ReactNode;
 }
-declare function TracedFlow({ graph, overlay, scrubIndex, layout: layoutProp, colors: colorOverrides, onNodeClick, onSubflowChange, groupedSubflows, mainChartBox, nodeTypes: userNodeTypes, edgeTypes: userEdgeTypes, coActiveStageIds, children, className, style, }: TracedFlowProps): react.JSX.Element;
+declare function TracedFlow({ graph, overlay, scrubIndex, layout: layoutProp, colors: colorOverrides, onNodeClick, onSubflowChange, groupedSubflows, mainChartBox, nodeTypes: userNodeTypes, edgeTypes: userEdgeTypes, coActiveStageIds, sliceCone, children, className, style, }: TracedFlowProps): react.JSX.Element;
 
 interface GroupContainerNodeData {
     label: string;

package/dist/flowchart.js

@@ -2625,6 +2625,7 @@ function TracedFlow({
   nodeTypes: userNodeTypes,
   edgeTypes: userEdgeTypes,
   coActiveStageIds,
+  sliceCone,
   children,
   className,
   style
@@ -2726,6 +2727,38 @@ function TracedFlow({
     ),
     [positioned.edges, slice, colors]
   );
+  const [coneRevealed, setConeRevealed] = useState4(false);
+  useEffect7(() => {
+    if (!sliceCone) return;
+    setConeRevealed(false);
+    const raf = requestAnimationFrame(() => setConeRevealed(true));
+    return () => cancelAnimationFrame(raf);
+  }, [sliceCone]);
+  const conedNodes = useMemo5(() => {
+    if (!sliceCone || sliceCone.size === 0) return reactFlowNodes;
+    return reactFlowNodes.map((n) => {
+      const depth = sliceCone.get(n.id);
+      if (depth === void 0) {
+        return { ...n, style: { ...n.style, opacity: 0.22, transition: "opacity 260ms ease" } };
+      }
+      return {
+        ...n,
+        style: {
+          ...n.style,
+          opacity: coneRevealed ? 1 : 0.22,
+          transition: "opacity 320ms ease",
+          transitionDelay: `${depth * 90}ms`
+        }
+      };
+    });
+  }, [reactFlowNodes, sliceCone, coneRevealed]);
+  const conedEdges = useMemo5(() => {
+    if (!sliceCone || sliceCone.size === 0) return reactFlowEdges;
+    return reactFlowEdges.map((e) => {
+      const inCone = sliceCone.has(e.source) && sliceCone.has(e.target);
+      return inCone ? e : { ...e, style: { ...e.style, opacity: 0.12, transition: "opacity 260ms ease" } };
+    });
+  }, [reactFlowEdges, sliceCone]);
   const handleNodeClick = useCallback3(
     (_, node) => {
       const data = node.data ?? {};
@@ -2767,8 +2800,8 @@ function TracedFlow({
         /* @__PURE__ */ jsx11("div", { style: { flex: 1, minHeight: 0 }, children: /* @__PURE__ */ jsxs8(
           ReactFlow2,
           {
-            nodes: reactFlowNodes,
-            edges: reactFlowEdges,
+            nodes: conedNodes,
+            edges: conedEdges,
             nodeTypes: mergedNodeTypes,
             edgeTypes: mergedEdgeTypes,
             onNodeClick: handleNodeClick,