@pipelex/mthds-ui 0.5.2 → 0.6.0

package/dist/graph/react/index.js

@@ -2,19 +2,22 @@
 import {
   DEFAULT_GRAPH_CONFIG,
   EDGE_TYPE,
+  FOLD_MODE,
   GRAPH_DIRECTION,
   MAX_VISIBLE_CONTROLLER_CHILDREN,
   applyControllers,
+  applyFolds,
   buildGraph,
+  findCousinControllers,
   getLayoutedElements,
   getPipeBlueprint,
   resolveConceptRef,
   stuffDigestFromId
-} from "../../chunk-OMJ6DRXM.js";
+} from "../../chunk-NISDJYQJ.js";
 import {
   __spreadProps,
   __spreadValues
-} from "../../chunk-DDAAVRWG.js";
+} from "../../chunk-2NMEKWO5.js";
 
 // src/graph/react/index.ts
 import "./graph-core.css";
@@ -1648,6 +1651,46 @@ var BOXES_ICON = /* @__PURE__ */ jsxs16(
     ]
   }
 );
+var FOLD_ALL_ICON = /* @__PURE__ */ jsxs16(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    width: "14",
+    height: "14",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: [
+      /* @__PURE__ */ jsx16("rect", { x: "6", y: "6", width: "12", height: "12", rx: "2" }),
+      /* @__PURE__ */ jsx16("polyline", { points: "2 2 6 6 2 6" }),
+      /* @__PURE__ */ jsx16("polyline", { points: "22 2 18 6 22 6" }),
+      /* @__PURE__ */ jsx16("polyline", { points: "2 22 6 18 2 18" }),
+      /* @__PURE__ */ jsx16("polyline", { points: "22 22 18 18 22 18" })
+    ]
+  }
+);
+var EXPAND_ALL_ICON = /* @__PURE__ */ jsxs16(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    width: "14",
+    height: "14",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: [
+      /* @__PURE__ */ jsx16("rect", { x: "9", y: "9", width: "6", height: "6", rx: "1" }),
+      /* @__PURE__ */ jsx16("polyline", { points: "3 3 7 7 3 7" }),
+      /* @__PURE__ */ jsx16("polyline", { points: "21 3 17 7 21 7" }),
+      /* @__PURE__ */ jsx16("polyline", { points: "3 21 7 17 3 17" }),
+      /* @__PURE__ */ jsx16("polyline", { points: "21 21 17 17 21 17" })
+    ]
+  }
+);
 function GraphToolbar({
   direction,
   onDirectionChange,
@@ -1656,11 +1699,18 @@ function GraphToolbar({
   onZoomIn,
   onZoomOut,
   onFitView,
+  onFoldAll,
+  onExpandAll,
+  foldAllDisabled = false,
+  expandAllDisabled = false,
   rightOffset = 0
 }) {
   const isVertical = direction === GRAPH_DIRECTION.TB || direction === GRAPH_DIRECTION.BT;
   const directionLabel = isVertical ? "Switch to horizontal layout" : "Switch to vertical layout";
   const controllersLabel = showControllers ? "Hide pipe controllers" : "Show pipe controllers \u2014 groups pipes by their controlling pipe";
+  const foldAllSection = onFoldAll || onExpandAll;
+  const foldAllTitle = foldAllDisabled ? "Fold all controllers (nothing to fold)" : "Fold all controllers";
+  const expandAllTitle = expandAllDisabled ? "Expand all controllers (nothing to expand)" : "Expand all controllers";
   return /* @__PURE__ */ jsxs16("div", { className: "graph-toolbar", style: { right: `${rightOffset + 8}px` }, children: [
     /* @__PURE__ */ jsx16(
       "button",
@@ -1684,6 +1734,31 @@ function GraphToolbar({
         children: BOXES_ICON
       }
     ),
+    foldAllSection && /* @__PURE__ */ jsx16("div", { className: "graph-toolbar-separator" }),
+    onFoldAll && /* @__PURE__ */ jsx16(
+      "button",
+      {
+        type: "button",
+        className: "graph-toolbar-btn",
+        onClick: onFoldAll,
+        disabled: foldAllDisabled,
+        title: foldAllTitle,
+        "aria-label": foldAllTitle,
+        children: FOLD_ALL_ICON
+      }
+    ),
+    onExpandAll && /* @__PURE__ */ jsx16(
+      "button",
+      {
+        type: "button",
+        className: "graph-toolbar-btn",
+        onClick: onExpandAll,
+        disabled: expandAllDisabled,
+        title: expandAllTitle,
+        "aria-label": expandAllTitle,
+        children: EXPAND_ALL_ICON
+      }
+    ),
     (onZoomOut || onZoomIn || onFitView) && /* @__PURE__ */ jsx16("div", { className: "graph-toolbar-separator" }),
     onZoomOut && /* @__PURE__ */ jsx16(
       "button",
@@ -1748,7 +1823,22 @@ function ControllerGroupNode({ data }) {
     /* @__PURE__ */ jsxs17("div", { className: "controller-group-header", children: [
       /* @__PURE__ */ jsx17("span", { className: "controller-group-icon", children: config.icon }),
       /* @__PURE__ */ jsx17("span", { className: "controller-group-badge", children: config.badge }),
-      data.label && /* @__PURE__ */ jsx17("span", { className: "controller-group-label", children: data.label })
+      data.label && /* @__PURE__ */ jsx17("span", { className: "controller-group-label", children: data.label }),
+      data.onToggleFold && /* @__PURE__ */ jsx17(
+        "button",
+        {
+          type: "button",
+          className: "controller-group-fold",
+          title: "Fold controller (alt/option: only this one)",
+          "aria-label": "Fold controller",
+          onClick: (e) => {
+            var _a2;
+            e.stopPropagation();
+            (_a2 = data.onToggleFold) == null ? void 0 : _a2.call(data, { soloMode: e.altKey });
+          },
+          children: "\u2921"
+        }
+      )
     ] }),
     isCollapsible && /* @__PURE__ */ jsx17(
       "button",
@@ -1778,8 +1868,21 @@ var PIPE_TYPE_BADGES2 = {
   PipeCompose: "Compose",
   PipeImgGen: "ImgGen",
   PipeSearch: "Search",
-  PipeFunc: "Func"
+  PipeFunc: "Func",
+  PipeSequence: "Sequence",
+  PipeParallel: "Parallel",
+  PipeCondition: "Condition",
+  PipeBatch: "Batch"
+};
+var CONTROLLER_TYPE_TABLE = {
+  PipeSequence: true,
+  PipeParallel: true,
+  PipeCondition: true,
+  PipeBatch: true
 };
+function isControllerType(pipeType) {
+  return pipeType in CONTROLLER_TYPE_TABLE;
+}
 var STATUS_CONFIG = {
   succeeded: { color: "#50FA7B", label: "Succeeded" },
   failed: { color: "#FF5555", label: "Failed" },
@@ -1796,14 +1899,17 @@ function PipeCardBase({ data, children }) {
   const badge = getBadge(data.pipeType);
   const statusConfig = (_a = STATUS_CONFIG[data.status]) != null ? _a : STATUS_CONFIG.scheduled;
   const isRunning = data.status === "running";
+  const isController = isControllerType(data.pipeType);
   const [inputsExpanded, setInputsExpanded] = useState2(false);
   const hasMany = data.inputs.length > MAX_VISIBLE_INPUTS;
   const visibleInputs = hasMany && !inputsExpanded ? data.inputs.slice(0, MAX_VISIBLE_INPUTS) : data.inputs;
   const hiddenCount = data.inputs.length - MAX_VISIBLE_INPUTS;
   const dirClass = data.direction === "TB" ? "pipe-card--tb" : "pipe-card--lr";
-  return /* @__PURE__ */ jsxs18("div", { className: `pipe-card ${dirClass}`, children: [
+  const controllerClass = isController ? " pipe-card--controller" : "";
+  const badgeClass = isController ? "pipe-card-badge pipe-card-badge--controller" : "pipe-card-badge";
+  return /* @__PURE__ */ jsxs18("div", { className: `pipe-card ${dirClass}${controllerClass}`, children: [
     /* @__PURE__ */ jsxs18("div", { className: "pipe-card-header", children: [
-      /* @__PURE__ */ jsx18("span", { className: "pipe-card-badge", children: badge }),
+      /* @__PURE__ */ jsx18("span", { className: badgeClass, children: badge }),
       /* @__PURE__ */ jsx18("span", { className: "pipe-card-code", title: data.pipeCode, children: data.pipeCode }),
       /* @__PURE__ */ jsx18(
         "span",
@@ -1819,6 +1925,21 @@ function PipeCardBase({ data, children }) {
             }
           )
         }
+      ),
+      data.onExpand && /* @__PURE__ */ jsx18(
+        "button",
+        {
+          type: "button",
+          className: "pipe-card-expand",
+          title: "Expand controller (alt/option: only this one)",
+          "aria-label": "Expand controller",
+          onClick: (e) => {
+            var _a2;
+            e.stopPropagation();
+            (_a2 = data.onExpand) == null ? void 0 : _a2.call(data, { soloMode: e.altKey });
+          },
+          children: "\u2922"
+        }
       )
     ] }),
     data.description && /* @__PURE__ */ jsx18("span", { className: "pipe-card-description", title: data.description, children: data.description }),
@@ -1876,7 +1997,11 @@ var PIPE_CARD_REGISTRY = {
   PipeCompose: PipeCardBase,
   PipeImgGen: PipeCardBase,
   PipeSearch: PipeCardBase,
-  PipeFunc: PipeCardBase
+  PipeFunc: PipeCardBase,
+  PipeSequence: PipeCardBase,
+  PipeParallel: PipeCardBase,
+  PipeCondition: PipeCardBase,
+  PipeBatch: PipeCardBase
 };
 function getPipeCardComponent(pipeType) {
   return PIPE_CARD_REGISTRY[pipeType];
@@ -1938,6 +2063,10 @@ function StuffNodeDetail({
     )
   ) });
 }
+function seedFoldedControllers(mode, controllerIds) {
+  if (mode === FOLD_MODE.FOLDED) return new Set(controllerIds);
+  return /* @__PURE__ */ new Set();
+}
 function cloneCachedNodes(nodes) {
   return nodes.map((n) => __spreadProps(__spreadValues({}, n), {
     position: __spreadValues({}, n.position),
@@ -1962,11 +2091,13 @@ function applyStatusOverrides(nodes, statusMap) {
   });
 }
 function GraphViewer(props) {
+  var _a, _b, _c;
   const {
     graphspec,
     config = DEFAULT_GRAPH_CONFIG,
     initialDirection,
     initialShowControllers,
+    initialFoldMode,
     hideToolbar = false,
     onNavigateToPipe,
     onStuffNodeClick,
@@ -1981,16 +2112,19 @@ function GraphViewer(props) {
   } = props;
   const [direction, setDirection] = React7.useState(
     () => {
-      var _a, _b;
-      return (_b = (_a = initialDirection != null ? initialDirection : config.direction) != null ? _a : DEFAULT_GRAPH_CONFIG.direction) != null ? _b : GRAPH_DIRECTION.TB;
+      var _a2, _b2;
+      return (_b2 = (_a2 = initialDirection != null ? initialDirection : config.direction) != null ? _a2 : DEFAULT_GRAPH_CONFIG.direction) != null ? _b2 : GRAPH_DIRECTION.TB;
     }
   );
   const [showControllers, setShowControllers] = React7.useState(
     () => {
-      var _a, _b;
-      return (_b = (_a = initialShowControllers != null ? initialShowControllers : config.showControllers) != null ? _a : DEFAULT_GRAPH_CONFIG.showControllers) != null ? _b : false;
+      var _a2, _b2;
+      return (_b2 = (_a2 = initialShowControllers != null ? initialShowControllers : config.showControllers) != null ? _a2 : DEFAULT_GRAPH_CONFIG.showControllers) != null ? _b2 : false;
     }
   );
+  const effectiveFoldMode = (_b = (_a = initialFoldMode != null ? initialFoldMode : config.foldMode) != null ? _a : DEFAULT_GRAPH_CONFIG.foldMode) != null ? _b : FOLD_MODE.EXPANDED;
+  const foldModeRef = React7.useRef(effectiveFoldMode);
+  foldModeRef.current = effectiveFoldMode;
   const containerRef = React7.useRef(null);
   const [detailSelection, setDetailSelection] = React7.useState(null);
   const [conceptOverride, setConceptOverride] = React7.useState(null);
@@ -2004,10 +2138,10 @@ function GraphViewer(props) {
     setConceptOverride(null);
   }, [graphspec]);
   React7.useEffect(() => {
-    var _a;
+    var _a2;
     const el = containerRef.current;
     if (!el) return;
-    const palette = (_a = config.paletteColors) != null ? _a : DEFAULT_GRAPH_CONFIG.paletteColors;
+    const palette = (_a2 = config.paletteColors) != null ? _a2 : DEFAULT_GRAPH_CONFIG.paletteColors;
     if (!palette) return;
     for (const [cssVar, value] of Object.entries(palette)) {
       el.style.setProperty(cssVar, value);
@@ -2022,6 +2156,7 @@ function GraphViewer(props) {
   const [edges, setEdges, onEdgesChange] = useEdgesState([]);
   const reactFlowRef = React7.useRef(null);
   const initialDataRef = React7.useRef(null);
+  const rawGraphDataRef = React7.useRef(null);
   const layoutCacheRef = React7.useRef(null);
   const [expandedControllers, setExpandedControllers] = React7.useState(/* @__PURE__ */ new Set());
   const toggleCollapse = React7.useCallback((controllerId) => {
@@ -2032,6 +2167,20 @@ function GraphViewer(props) {
       return next;
     });
   }, []);
+  const [foldedControllers, setFoldedControllers] = React7.useState(/* @__PURE__ */ new Set());
+  const toggleFold = React7.useCallback((controllerId, options) => {
+    setFoldedControllers((prev) => {
+      const next = new Set(prev);
+      const shouldFold = !next.has(controllerId);
+      const raw = rawGraphDataRef.current;
+      const targets = !(options == null ? void 0 : options.soloMode) && (raw == null ? void 0 : raw.graphspec) && raw.analysis ? findCousinControllers(controllerId, raw.graphspec, raw.analysis.controllerNodeIds) : /* @__PURE__ */ new Set([controllerId]);
+      for (const id of targets) {
+        if (shouldFold) next.add(id);
+        else next.delete(id);
+      }
+      return next;
+    });
+  }, []);
   const edgeType = config.edgeType || EDGE_TYPE.DEFAULT;
   const layoutConfig = React7.useMemo(
     () => ({ nodesep: config.nodesep, ranksep: config.ranksep }),
@@ -2051,6 +2200,13 @@ function GraphViewer(props) {
   expandedRef.current = expandedControllers;
   const toggleCollapseRef = React7.useRef(toggleCollapse);
   toggleCollapseRef.current = toggleCollapse;
+  const foldedRef = React7.useRef(foldedControllers);
+  foldedRef.current = foldedControllers;
+  const toggleFoldRef = React7.useRef(toggleFold);
+  toggleFoldRef.current = toggleFold;
+  const isFirstFoldEffect = React7.useRef(true);
+  const prevFoldSizeRef = React7.useRef(0);
+  const skipNextFoldEffectRef = React7.useRef(false);
   const statusMapRef = React7.useRef(statusMap);
   statusMapRef.current = statusMap;
   React7.useEffect(() => {
@@ -2082,7 +2238,8 @@ function GraphViewer(props) {
           showControllersRef.current,
           expandedRef.current,
           toggleCollapseRef.current,
-          relayouted.controllerPositions
+          relayouted.controllerPositions,
+          toggleFoldRef.current
         );
         setNodes(
           applyStatusOverrides(
@@ -2116,16 +2273,18 @@ function GraphViewer(props) {
       showControllers,
       expandedControllers,
       toggleCollapse,
-      layoutCacheRef.current.controllerPositions
+      layoutCacheRef.current.controllerPositions,
+      toggleFold
     );
     setNodes(
       applyStatusOverrides(toAppNodes(hydrateLabels(withControllers.nodes)), statusMapRef.current)
     );
     setEdges(toAppEdges(withControllers.edges));
-  }, [showControllers, expandedControllers, toggleCollapse]);
+  }, [showControllers, expandedControllers, toggleCollapse, toggleFold]);
   React7.useEffect(() => {
     if (!graphspec) {
       initialDataRef.current = null;
+      rawGraphDataRef.current = null;
       layoutCacheRef.current = null;
       setNodes([]);
       setEdges([]);
@@ -2133,30 +2292,51 @@ function GraphViewer(props) {
     }
     let cancelled = false;
     setExpandedControllers(/* @__PURE__ */ new Set());
+    expandedRef.current = /* @__PURE__ */ new Set();
     const { graphData, analysis } = buildGraph(graphspec, edgeType);
-    initialDataRef.current = {
+    rawGraphDataRef.current = {
       nodes: graphData.nodes,
       edges: graphData.edges,
-      _analysis: analysis,
+      analysis,
+      graphspec
+    };
+    const seedSet = analysis ? seedFoldedControllers(foldModeRef.current, analysis.controllerNodeIds) : /* @__PURE__ */ new Set();
+    setFoldedControllers(seedSet);
+    foldedRef.current = seedSet;
+    skipNextFoldEffectRef.current = seedSet.size > 0;
+    prevFoldSizeRef.current = seedSet.size;
+    const folded = seedSet.size > 0 && analysis ? applyFolds(
+      { nodes: graphData.nodes, edges: graphData.edges },
+      analysis,
+      graphspec,
+      seedSet,
+      toggleFoldRef.current
+    ) : { nodes: graphData.nodes, edges: graphData.edges, analysis };
+    initialDataRef.current = {
+      nodes: folded.nodes,
+      edges: folded.edges,
+      _analysis: folded.analysis,
       _graphspec: graphspec
     };
     (async () => {
       try {
         const currentDirection = directionRef.current;
         const currentLayoutConfig = layoutConfigRef.current;
-        const needsLayout = graphData.nodes.some(
+        const needsLayout = folded.nodes.some(
           (n) => !n.position || n.position.x === 0 && n.position.y === 0
         );
         const layouted = needsLayout ? await getLayoutedElements(
-          graphData.nodes,
-          graphData.edges,
+          folded.nodes,
+          folded.edges,
           currentDirection,
           currentLayoutConfig,
           graphspec,
-          analysis
-        ) : __spreadProps(__spreadValues({}, graphData), {
+          folded.analysis
+        ) : {
+          nodes: folded.nodes,
+          edges: folded.edges,
           controllerPositions: {}
-        });
+        };
         if (cancelled) return;
         layoutCacheRef.current = {
           nodes: layouted.nodes,
@@ -2167,11 +2347,12 @@ function GraphViewer(props) {
           cloneCachedNodes(layouted.nodes),
           layouted.edges,
           graphspec,
-          analysis,
+          folded.analysis,
           showControllersRef.current,
           expandedRef.current,
           toggleCollapseRef.current,
-          layouted.controllerPositions
+          layouted.controllerPositions,
+          toggleFoldRef.current
         );
         setNodes(
           applyStatusOverrides(
@@ -2200,6 +2381,86 @@ function GraphViewer(props) {
       cancelled = true;
     };
   }, [graphspec, edgeType]);
+  React7.useEffect(() => {
+    if (isFirstFoldEffect.current) {
+      isFirstFoldEffect.current = false;
+      prevFoldSizeRef.current = foldedControllers.size;
+      return;
+    }
+    if (skipNextFoldEffectRef.current) {
+      skipNextFoldEffectRef.current = false;
+      prevFoldSizeRef.current = foldedControllers.size;
+      return;
+    }
+    const prevSize = prevFoldSizeRef.current;
+    prevFoldSizeRef.current = foldedControllers.size;
+    if (prevSize === 0 && foldedControllers.size === 0) return;
+    if (!rawGraphDataRef.current || !rawGraphDataRef.current.analysis) return;
+    const raw = rawGraphDataRef.current;
+    const currentGraphspec = raw.graphspec;
+    const currentAnalysis = raw.analysis;
+    if (!currentGraphspec || !currentAnalysis) return;
+    let cancelled = false;
+    const folded = applyFolds(
+      { nodes: raw.nodes, edges: raw.edges },
+      currentAnalysis,
+      currentGraphspec,
+      foldedControllers,
+      toggleFold
+    );
+    initialDataRef.current = {
+      nodes: folded.nodes,
+      edges: folded.edges,
+      _analysis: folded.analysis,
+      _graphspec: currentGraphspec
+    };
+    (async () => {
+      try {
+        const layouted = await getLayoutedElements(
+          folded.nodes,
+          folded.edges,
+          directionRef.current,
+          layoutConfigRef.current,
+          currentGraphspec,
+          folded.analysis
+        );
+        if (cancelled) return;
+        layoutCacheRef.current = {
+          nodes: layouted.nodes,
+          edges: layouted.edges,
+          controllerPositions: layouted.controllerPositions
+        };
+        const withControllers = applyControllers(
+          cloneCachedNodes(layouted.nodes),
+          layouted.edges,
+          currentGraphspec,
+          folded.analysis,
+          showControllersRef.current,
+          expandedRef.current,
+          toggleCollapseRef.current,
+          layouted.controllerPositions,
+          toggleFoldRef.current
+        );
+        setNodes(
+          applyStatusOverrides(
+            toAppNodes(hydrateLabels(withControllers.nodes)),
+            statusMapRef.current
+          )
+        );
+        setEdges(toAppEdges(withControllers.edges));
+        setTimeout(() => {
+          if (!cancelled && reactFlowRef.current) {
+            reactFlowRef.current.fitView({ padding: 0.1 });
+          }
+        }, 50);
+      } catch (err) {
+        console.error("[GraphViewer] ELK layout failed:", err);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [foldedControllers, toggleFold]);
   React7.useEffect(() => {
     if (!layoutCacheRef.current || !initialDataRef.current) return;
     const cachedNodes = cloneCachedNodes(layoutCacheRef.current.nodes);
@@ -2212,20 +2473,21 @@ function GraphViewer(props) {
       showControllersRef.current,
       expandedRef.current,
       toggleCollapseRef.current,
-      layoutCacheRef.current.controllerPositions
+      layoutCacheRef.current.controllerPositions,
+      toggleFoldRef.current
     );
     setNodes(applyStatusOverrides(toAppNodes(hydrateLabels(withControllers.nodes)), statusMap));
     setEdges(toAppEdges(withControllers.edges));
   }, [statusMap]);
   const onNodeClick = React7.useCallback(
     (event, node) => {
-      var _a;
+      var _a2;
       const nodeData = node.data;
       onNodeSelect == null ? void 0 : onNodeSelect(node.id, nodeData, event);
       if (nodeData.isController || nodeData.isPipe) {
         const code = nodeData.pipeCode || nodeData.labelText;
         if (code && onNavigateToPipe) {
-          onNavigateToPipe(code, (_a = nodeData.pipeCardData) == null ? void 0 : _a.status);
+          onNavigateToPipe(code, (_a2 = nodeData.pipeCardData) == null ? void 0 : _a2.status);
         }
       } else if (nodeData.isStuff && onStuffNodeClick && graphspec) {
         const digest = stuffDigestFromId(node.id);
@@ -2283,6 +2545,24 @@ function GraphViewer(props) {
   );
   const selectedSpecNode = (detailSelection == null ? void 0 : detailSelection.kind) === "pipe" && graphspec ? graphspec.nodes.find((n) => n.pipe_code === detailSelection.nodeData.pipeCode) : void 0;
   const detailOpen = detailSelection !== null || conceptOverride !== null;
+  const rawAnalysis = (_c = rawGraphDataRef.current) == null ? void 0 : _c.analysis;
+  const allControllerIds = rawAnalysis == null ? void 0 : rawAnalysis.controllerNodeIds;
+  const foldAllProps = React7.useMemo(() => {
+    if (!showControllers || !allControllerIds || allControllerIds.size === 0) {
+      return {
+        onFoldAll: void 0,
+        onExpandAll: void 0,
+        foldAllDisabled: false,
+        expandAllDisabled: false
+      };
+    }
+    return {
+      onFoldAll: () => setFoldedControllers(new Set(allControllerIds)),
+      onExpandAll: () => setFoldedControllers(/* @__PURE__ */ new Set()),
+      foldAllDisabled: foldedControllers.size === allControllerIds.size,
+      expandAllDisabled: foldedControllers.size === 0
+    };
+  }, [showControllers, allControllerIds, foldedControllers]);
   return /* @__PURE__ */ jsxs20("div", { ref: containerRef, className: "react-flow-container", children: [
     /* @__PURE__ */ jsx20(
       ReactFlow,
@@ -2351,17 +2631,21 @@ function GraphViewer(props) {
         showControllers,
         onShowControllersChange: setShowControllers,
         onZoomIn: () => {
-          var _a;
-          return (_a = reactFlowRef.current) == null ? void 0 : _a.zoomIn();
+          var _a2;
+          return (_a2 = reactFlowRef.current) == null ? void 0 : _a2.zoomIn();
         },
         onZoomOut: () => {
-          var _a;
-          return (_a = reactFlowRef.current) == null ? void 0 : _a.zoomOut();
+          var _a2;
+          return (_a2 = reactFlowRef.current) == null ? void 0 : _a2.zoomOut();
         },
         onFitView: () => {
-          var _a;
-          return (_a = reactFlowRef.current) == null ? void 0 : _a.fitView({ padding: 0.1 });
+          var _a2;
+          return (_a2 = reactFlowRef.current) == null ? void 0 : _a2.fitView({ padding: 0.1 });
         },
+        onFoldAll: foldAllProps.onFoldAll,
+        onExpandAll: foldAllProps.onExpandAll,
+        foldAllDisabled: foldAllProps.foldAllDisabled,
+        expandAllDisabled: foldAllProps.expandAllDisabled,
         rightOffset: detailOpen ? panelWidth : 0
       }
     )