@eventcatalog/visualiser 3.15.2 → 3.15.4

package/dist/index.js

@@ -96,9 +96,9 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/components/NodeGraph.tsx
-var import_react69 = require("react");
+var import_react71 = require("react");
 var import_react_dom = require("react-dom");
-var import_react70 = require("@xyflow/react");
+var import_react72 = require("@xyflow/react");
 var import_style = require("@xyflow/react/dist/style.css");
 var import_lucide_react25 = require("lucide-react");
 var DropdownMenu2 = __toESM(require("@radix-ui/react-dropdown-menu"));
@@ -6968,13 +6968,229 @@ var MermaidView = ({
 };
 var MermaidView_default = MermaidView;
 
+// src/hooks/use-channel-visibility.ts
+var import_react65 = require("react");
+
+// src/utils/utils/utils.ts
+var import_react64 = require("@xyflow/react");
+var import_dagre = __toESM(require("dagre"));
+var generateIdForNode = (node) => {
+  return `${node.data.id}-${node.data.version}`;
+};
+var generateIdForNodes = (nodes) => {
+  return nodes.map((node) => `${node.data.id}-${node.data.version}`).join("-");
+};
+var generatedIdForEdge = (source, target) => {
+  return `${source.data.id}-${source.data.version}-${target.data.id}-${target.data.version}`;
+};
+var getColorFromString = (id) => {
+  let hash = 0;
+  for (let i = 0; i < id.length; i++) {
+    hash = id.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  let color = "#";
+  for (let i = 0; i < 3; i++) {
+    const value = hash >> i * 8 & 255;
+    color += value.toString(16).padStart(2, "0");
+  }
+  return color;
+};
+var getEdgeLabelForServiceAsTarget = (data) => {
+  const type = data.collection;
+  switch (type) {
+    case "commands":
+      return "invokes";
+    case "events":
+      return "publishes \nevent";
+    case "queries":
+      return "requests";
+    default:
+      return "sends to";
+  }
+};
+var getEdgeLabelForMessageAsSource = (data, throughChannel = false) => {
+  const type = data.collection;
+  switch (type) {
+    case "commands":
+      return "accepts";
+    case "events":
+      return throughChannel ? "subscribed to" : "subscribed by";
+    case "queries":
+      return "accepts";
+    default:
+      return "sends to";
+  }
+};
+var calculatedNodes = (flow, nodes) => {
+  return nodes.map((node) => {
+    const { x, y } = flow.node(node.id);
+    return { ...node, position: { x, y } };
+  });
+};
+var createDagreGraph = ({
+  ranksep = 180,
+  nodesep = 50,
+  ...rest
+}) => {
+  const graph = new import_dagre.default.graphlib.Graph({ compound: true });
+  graph.setGraph({ rankdir: "LR", ranksep, nodesep, ...rest });
+  graph.setDefaultEdgeLabel(() => ({}));
+  return graph;
+};
+var createEdge = (edgeOptions) => {
+  return {
+    label: "subscribed by",
+    animated: false,
+    // markerStart: {
+    //   type: MarkerType.Arrow,
+    //   width: 40,
+    //   height: 40,
+    // },
+    markerEnd: {
+      type: import_react64.MarkerType.ArrowClosed,
+      width: 40,
+      height: 40,
+      color: "rgb(var(--ec-page-text-muted))"
+    },
+    style: {
+      strokeWidth: 1.5,
+      stroke: "rgb(var(--ec-page-text-muted))",
+      strokeDasharray: "5 5"
+    },
+    ...edgeOptions
+  };
+};
+var createNode = (values) => {
+  return {
+    sourcePosition: import_react64.Position.Right,
+    targetPosition: import_react64.Position.Left,
+    ...values
+  };
+};
+var getNodesAndEdgesFromDagre = ({
+  nodes,
+  edges,
+  defaultFlow
+}) => {
+  const flow = defaultFlow || createDagreGraph({ ranksep: 300, nodesep: 50 });
+  nodes.forEach((node) => {
+    flow.setNode(node.id, { width: 150, height: 100 });
+  });
+  edges.forEach((edge) => {
+    flow.setEdge(edge.source, edge.target);
+  });
+  import_dagre.default.layout(flow);
+  return {
+    nodes: calculatedNodes(flow, nodes),
+    edges
+  };
+};
+
+// src/hooks/use-channel-visibility.ts
+var useChannelVisibility = ({
+  nodes,
+  edges,
+  setNodes,
+  setEdges,
+  skipProcessing = false
+}) => {
+  const [hideChannels, setHideChannels] = (0, import_react65.useState)(false);
+  const [initialNodes, setInitialNodes] = (0, import_react65.useState)(nodes);
+  const [initialEdges, setInitialEdges] = (0, import_react65.useState)(edges);
+  (0, import_react65.useEffect)(() => {
+    const storedHideChannels = localStorage.getItem(
+      "EventCatalog:hideChannels"
+    );
+    if (storedHideChannels !== null) {
+      setHideChannels(storedHideChannels === "true");
+    }
+  }, []);
+  (0, import_react65.useEffect)(() => {
+    const hasChannels = nodes.some((node) => node.type === "channels");
+    if (!hideChannels || hasChannels) {
+      setInitialNodes(nodes);
+      setInitialEdges(edges);
+    }
+  }, [nodes, edges, hideChannels]);
+  const toggleChannelsVisibility = (0, import_react65.useCallback)(() => {
+    setHideChannels((prev) => {
+      const newValue = !prev;
+      localStorage.setItem(
+        "EventCatalog:hideChannels",
+        JSON.stringify(newValue)
+      );
+      return newValue;
+    });
+  }, []);
+  const channels = (0, import_react65.useMemo)(
+    () => nodes.filter((node) => node.type === "channels"),
+    [nodes]
+  );
+  const updatedNodes = (0, import_react65.useMemo)(
+    () => nodes.filter((node) => node.type !== "channels"),
+    [nodes]
+  );
+  const updatedEdges = (0, import_react65.useMemo)(() => {
+    const newEdges = edges.reduce((acc, edge) => {
+      const { source, target, data } = edge;
+      const targetIsChannel = channels.some((channel) => channel.id === target);
+      const sourceIsChannel = channels.some((channel) => channel.id === source);
+      if (!sourceIsChannel && !targetIsChannel) {
+        return [...acc, edge];
+      }
+      if (sourceIsChannel || targetIsChannel) {
+        const rootSourceAndTarget = data?.rootSourceAndTarget;
+        if (!rootSourceAndTarget) {
+          return [...acc, edge];
+        }
+        const targetIsService = rootSourceAndTarget?.target?.collection === "services";
+        const edgeLabel = targetIsService ? getEdgeLabelForMessageAsSource(rootSourceAndTarget.source) : getEdgeLabelForServiceAsTarget(rootSourceAndTarget.target);
+        const newEdgeId = `${rootSourceAndTarget.source.id}-${rootSourceAndTarget.target.id}`;
+        return [
+          ...acc,
+          createEdge({
+            id: newEdgeId,
+            source: rootSourceAndTarget.source.id,
+            target: rootSourceAndTarget.target.id,
+            label: edgeLabel
+          })
+        ];
+      }
+      return acc;
+    }, []);
+    return newEdges.filter(
+      (edge, index, self) => index === self.findIndex((t) => t.id === edge.id)
+    );
+  }, [edges, channels]);
+  (0, import_react65.useEffect)(() => {
+    if (skipProcessing) {
+      return;
+    }
+    if (hideChannels) {
+      const { nodes: newNodes, edges: newEdges } = getNodesAndEdgesFromDagre({
+        nodes: updatedNodes,
+        edges: updatedEdges
+      });
+      setNodes(newNodes);
+      setEdges(newEdges);
+    } else {
+      setNodes(initialNodes);
+      setEdges(initialEdges);
+    }
+  }, [hideChannels, skipProcessing]);
+  return {
+    hideChannels,
+    toggleChannelsVisibility
+  };
+};
+
 // src/components/VisualizerDropdownContent.tsx
-var import_react64 = require("react");
+var import_react66 = require("react");
 var DropdownMenu = __toESM(require("@radix-ui/react-dropdown-menu"));
 var import_lucide_react23 = require("lucide-react");
 var import_outline2 = require("@heroicons/react/24/outline");
 var import_jsx_runtime35 = require("react/jsx-runtime");
-var VisualizerDropdownContent = (0, import_react64.memo)(
+var VisualizerDropdownContent = (0, import_react66.memo)(
   ({
     isMermaidView,
     setIsMermaidView,
@@ -7000,7 +7216,7 @@ var VisualizerDropdownContent = (0, import_react64.memo)(
     notesCount = 0,
     onOpenNotes
   }) => {
-    const [layoutStatus, setLayoutStatus] = (0, import_react64.useState)("idle");
+    const [layoutStatus, setLayoutStatus] = (0, import_react66.useState)("idle");
     const portalContainer = usePortalContainer();
     const handleSaveLayout = async () => {
       if (!onSaveLayout) return;
@@ -7339,10 +7555,10 @@ VisualizerDropdownContent.displayName = "VisualizerDropdownContent";
 var VisualizerDropdownContent_default = VisualizerDropdownContent;
 
 // src/components/NodeContextMenu.tsx
-var import_react65 = require("react");
+var import_react67 = require("react");
 var ContextMenu5 = __toESM(require("@radix-ui/react-context-menu"));
 var import_jsx_runtime36 = require("react/jsx-runtime");
-var NodeContextMenu_default = (0, import_react65.memo)(function NodeContextMenu({
+var NodeContextMenu_default = (0, import_react67.memo)(function NodeContextMenu({
   items,
   children
 }) {
@@ -7380,8 +7596,8 @@ var NodeContextMenu_default = (0, import_react65.memo)(function NodeContextMenu(
 });
 
 // src/utils/layout.ts
-var import_dagre = __toESM(require("dagre"));
-var import_react66 = require("@xyflow/react");
+var import_dagre2 = __toESM(require("dagre"));
+var import_react68 = require("@xyflow/react");
 var GROUP_HEADER_HEIGHT = 44;
 var GROUP_CONTENT_PADDING_TOP = 50;
 var GROUP_CONTENT_PADDING_BOTTOM = 30;
@@ -7566,7 +7782,7 @@ function layoutGraph(nodes, edges, options = {}, style) {
           computeGroupSize(child.id);
         }
       }
-      const ig = new import_dagre.default.graphlib.Graph();
+      const ig = new import_dagre2.default.graphlib.Graph();
       ig.setDefaultEdgeLabel(() => ({}));
       ig.setGraph({
         rankdir,
@@ -7592,7 +7808,7 @@ function layoutGraph(nodes, edges, options = {}, style) {
           ig.setEdge(edge.source, edge.target);
         }
       }
-      import_dagre.default.layout(ig);
+      import_dagre2.default.layout(ig);
       const childPositions = /* @__PURE__ */ new Map();
       let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
       for (const child of children) {
@@ -7647,7 +7863,7 @@ function layoutGraph(nodes, edges, options = {}, style) {
       topLevelGroupIds.add(groupId);
     }
   }
-  const outerG = new import_dagre.default.graphlib.Graph();
+  const outerG = new import_dagre2.default.graphlib.Graph();
   outerG.setDefaultEdgeLabel(() => ({}));
   outerG.setGraph({ rankdir, nodesep, ranksep, edgesep });
   for (const groupId of topLevelGroupIds) {
@@ -7689,7 +7905,7 @@ function layoutGraph(nodes, edges, options = {}, style) {
       outerG.setEdge(src, tgt);
     }
   }
-  import_dagre.default.layout(outerG);
+  import_dagre2.default.layout(outerG);
   const outerPositions = /* @__PURE__ */ new Map();
   outerG.nodes().forEach((id) => {
     const pos = outerG.node(id);
@@ -7793,7 +8009,7 @@ function layoutGraph(nodes, edges, options = {}, style) {
     const isFlowStep = edge.type === "flow-step";
     const isBidirectional = edge.type === "reads-writes";
     const arrowMarker = {
-      type: import_react66.MarkerType.ArrowClosed,
+      type: import_react68.MarkerType.ArrowClosed,
       width: 20,
       height: 20,
       color: "rgb(var(--ec-page-text-muted))"
@@ -7824,7 +8040,7 @@ function getMessageCollection(edge, nodeById) {
   return targetNode ? `${targetNode.type}s` : void 0;
 }
 function flatLayout(nodes, edges, graphOpts, nodeSize, style) {
-  const g = new import_dagre.default.graphlib.Graph();
+  const g = new import_dagre2.default.graphlib.Graph();
   g.setDefaultEdgeLabel(() => ({}));
   g.setGraph(graphOpts);
   nodes.forEach((node) => {
@@ -7834,7 +8050,7 @@ function flatLayout(nodes, edges, graphOpts, nodeSize, style) {
   edges.forEach((edge) => {
     g.setEdge(edge.source, edge.target);
   });
-  import_dagre.default.layout(g);
+  import_dagre2.default.layout(g);
   const layoutNodes = nodes.map((node) => {
     const pos = g.node(node.id);
     return {
@@ -7850,7 +8066,7 @@ function flatLayout(nodes, edges, graphOpts, nodeSize, style) {
     const isFlowStep = edge.type === "flow-step";
     const isBidirectional = edge.type === "reads-writes";
     const arrowMarker = {
-      type: import_react66.MarkerType.ArrowClosed,
+      type: import_react68.MarkerType.ArrowClosed,
       width: 20,
       height: 20,
       color: "rgb(var(--ec-page-text-muted))"
@@ -7870,9 +8086,9 @@ function flatLayout(nodes, edges, graphOpts, nodeSize, style) {
 }
 
 // src/components/NotesToolbarButton.tsx
-var import_react67 = require("react");
+var import_react69 = require("react");
 var import_lucide_react24 = require("lucide-react");
-var import_react68 = require("@xyflow/react");
+var import_react70 = require("@xyflow/react");
 var Dialog4 = __toESM(require("@radix-ui/react-dialog"));
 var import_jsx_runtime37 = require("react/jsx-runtime");
 var NODE_TYPE_META = {
@@ -8133,12 +8349,12 @@ function AllNotesModal({
   onClose,
   nodes
 }) {
-  const { setCenter, getZoom } = (0, import_react68.useReactFlow)();
-  const [selectedIdx, setSelectedIdx] = (0, import_react67.useState)(0);
+  const { setCenter, getZoom } = (0, import_react70.useReactFlow)();
+  const [selectedIdx, setSelectedIdx] = (0, import_react69.useState)(0);
   const portalContainer = usePortalContainer();
   const totalNotes = noteGroups.reduce((sum, g) => sum + g.notes.length, 0);
   const selected = noteGroups[selectedIdx] || noteGroups[0];
-  const handleNavigate = (0, import_react67.useCallback)(
+  const handleNavigate = (0, import_react69.useCallback)(
     (nodeId) => {
       const node = nodes.find((n) => n.id === nodeId);
       if (!node) return;
@@ -8590,13 +8806,13 @@ var LAYOUT_CHANGE_PANEL_STYLE_WITH_WALKTHROUGH = {
 };
 var LAYOUT_CHANGE_PANEL_STYLE_DEFAULT = { marginLeft: "60px" };
 var LEGEND_PANEL_STYLE_WITH_MINIMAP = { marginRight: "230px" };
-var LegendPanel = (0, import_react69.memo)(function LegendPanel2({
+var LegendPanel = (0, import_react71.memo)(function LegendPanel2({
   legend,
   showMinimap,
   onLegendClick
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-    import_react70.Panel,
+    import_react72.Panel,
     {
       position: "bottom-right",
       style: showMinimap ? LEGEND_PANEL_STYLE_WITH_MINIMAP : void 0,
@@ -8652,14 +8868,14 @@ var NodeGraphBuilder = ({
   onSaveLayout,
   onResetLayout
 }) => {
-  (0, import_react69.useEffect)(() => {
+  (0, import_react71.useEffect)(() => {
     if (onBuildUrl) {
       setBuildUrlFn(onBuildUrl);
     }
   }, []);
-  const nodeTypes = (0, import_react69.useMemo)(() => {
+  const nodeTypes = (0, import_react71.useMemo)(() => {
     const wrapWithContextMenu = (Component) => {
-      const Wrapped = (0, import_react69.memo)((props) => {
+      const Wrapped = (0, import_react71.memo)((props) => {
         const items = props.data?.contextMenu;
         if (!items?.length) return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Component, { ...props });
         return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(NodeContextMenu_default, { items, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Component, { ...props }) });
@@ -8696,10 +8912,10 @@ var NodeGraphBuilder = ({
       "data-product": wrapWithContextMenu(DataProduct_default),
       "data-products": wrapWithContextMenu(DataProduct_default),
       group: GroupNode_default,
-      note: (0, import_react69.memo)((props) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(NoteNode_default, { ...props, readOnly: true }))
+      note: (0, import_react71.memo)((props) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(NoteNode_default, { ...props, readOnly: true }))
     };
   }, []);
-  const edgeTypes2 = (0, import_react69.useMemo)(
+  const edgeTypes2 = (0, import_react71.useMemo)(
     () => ({
       animated: AnimatedMessageEdge_default,
       multiline: MultilineEdgeLabel_default,
@@ -8707,47 +8923,47 @@ var NodeGraphBuilder = ({
     }),
     []
   );
-  const [nodes, setNodes, onNodesChange] = (0, import_react70.useNodesState)(initialNodes);
-  const [edges, setEdges, onEdgesChange] = (0, import_react70.useEdgesState)(initialEdges);
-  const { fitView, getNodes } = (0, import_react70.useReactFlow)();
-  (0, import_react69.useEffect)(() => {
+  const [nodes, setNodes, onNodesChange] = (0, import_react72.useNodesState)(initialNodes);
+  const [edges, setEdges, onEdgesChange] = (0, import_react72.useEdgesState)(initialEdges);
+  const { fitView, getNodes } = (0, import_react72.useReactFlow)();
+  (0, import_react71.useEffect)(() => {
     setNodes(initialNodes);
     setEdges(initialEdges);
     requestAnimationFrame(() => {
       fitView({ duration: 300, padding: 0.2 });
     });
   }, [initialNodes, initialEdges, setNodes, setEdges, fitView]);
-  const [animateMessages, setAnimateMessages] = (0, import_react69.useState)(true);
-  const [_activeStepIndex, _setActiveStepIndex] = (0, import_react69.useState)(null);
-  const [_isFullscreen, _setIsFullscreen] = (0, import_react69.useState)(false);
-  const [isShareModalOpen, setIsShareModalOpen] = (0, import_react69.useState)(false);
-  const [shareUrlCopySuccess, setShareUrlCopySuccess] = (0, import_react69.useState)(false);
-  const [isMermaidView, setIsMermaidView] = (0, import_react69.useState)(false);
-  const [showMinimap, setShowMinimap] = (0, import_react69.useState)(false);
-  const [hasLayoutChanges, setHasLayoutChanges] = (0, import_react69.useState)(false);
-  const [isSavingLayout, setIsSavingLayout] = (0, import_react69.useState)(false);
-  const initialPositionsRef = (0, import_react69.useRef)(
+  const [animateMessages, setAnimateMessages] = (0, import_react71.useState)(true);
+  const [_activeStepIndex, _setActiveStepIndex] = (0, import_react71.useState)(null);
+  const [_isFullscreen, _setIsFullscreen] = (0, import_react71.useState)(false);
+  const [isShareModalOpen, setIsShareModalOpen] = (0, import_react71.useState)(false);
+  const [shareUrlCopySuccess, setShareUrlCopySuccess] = (0, import_react71.useState)(false);
+  const [isMermaidView, setIsMermaidView] = (0, import_react71.useState)(false);
+  const [showMinimap, setShowMinimap] = (0, import_react71.useState)(false);
+  const [hasLayoutChanges, setHasLayoutChanges] = (0, import_react71.useState)(false);
+  const [isSavingLayout, setIsSavingLayout] = (0, import_react71.useState)(false);
+  const initialPositionsRef = (0, import_react71.useRef)(
     {}
   );
-  const [focusModeOpen, setFocusModeOpen] = (0, import_react69.useState)(false);
-  const [focusedNodeId, setFocusedNodeId] = (0, import_react69.useState)(null);
-  const [isNotesModalOpen, setIsNotesModalOpen] = (0, import_react69.useState)(false);
-  const openNotesModal = (0, import_react69.useCallback)(() => setIsNotesModalOpen(true), []);
-  const interactionCountRef = (0, import_react69.useRef)(0);
-  const startInteraction = (0, import_react69.useCallback)(() => {
+  const [focusModeOpen, setFocusModeOpen] = (0, import_react71.useState)(false);
+  const [focusedNodeId, setFocusedNodeId] = (0, import_react71.useState)(null);
+  const [isNotesModalOpen, setIsNotesModalOpen] = (0, import_react71.useState)(false);
+  const openNotesModal = (0, import_react71.useCallback)(() => setIsNotesModalOpen(true), []);
+  const interactionCountRef = (0, import_react71.useRef)(0);
+  const startInteraction = (0, import_react71.useCallback)(() => {
     interactionCountRef.current += 1;
     if (interactionCountRef.current === 1) {
       reactFlowWrapperRef.current?.classList.add("ec-interaction-active");
     }
   }, []);
-  const endInteraction = (0, import_react69.useCallback)(() => {
+  const endInteraction = (0, import_react71.useCallback)(() => {
     interactionCountRef.current = Math.max(0, interactionCountRef.current - 1);
     if (interactionCountRef.current === 0) {
       reactFlowWrapperRef.current?.classList.remove("ec-interaction-active");
     }
   }, []);
-  const hoveredEdgeNodesRef = (0, import_react69.useRef)([]);
-  const handleEdgeMouseEnter = (0, import_react69.useCallback)(
+  const hoveredEdgeNodesRef = (0, import_react71.useRef)([]);
+  const handleEdgeMouseEnter = (0, import_react71.useCallback)(
     (_, edge) => {
       const wrapper = reactFlowWrapperRef.current;
       if (!wrapper) return;
@@ -8759,15 +8975,15 @@ var NodeGraphBuilder = ({
     },
     []
   );
-  const handleEdgeMouseLeave = (0, import_react69.useCallback)(() => {
+  const handleEdgeMouseLeave = (0, import_react71.useCallback)(() => {
     hoveredEdgeNodesRef.current.forEach(
       (el) => el.classList.remove("ec-edge-hover-node")
     );
     hoveredEdgeNodesRef.current = [];
   }, []);
-  const hoveredNodeEdgesRef = (0, import_react69.useRef)([]);
-  const hoveredNodePeersRef = (0, import_react69.useRef)([]);
-  const handleNodeMouseEnter = (0, import_react69.useCallback)(
+  const hoveredNodeEdgesRef = (0, import_react71.useRef)([]);
+  const hoveredNodePeersRef = (0, import_react71.useRef)([]);
+  const handleNodeMouseEnter = (0, import_react71.useCallback)(
     (_, node) => {
       const wrapper = reactFlowWrapperRef.current;
       if (!wrapper) return;
@@ -8796,7 +9012,7 @@ var NodeGraphBuilder = ({
     },
     []
   );
-  const handleNodeMouseLeave = (0, import_react69.useCallback)(() => {
+  const handleNodeMouseLeave = (0, import_react71.useCallback)(() => {
     hoveredNodeEdgesRef.current.forEach(
       (el) => el.classList.remove("ec-node-hover-edge")
     );
@@ -8806,21 +9022,25 @@ var NodeGraphBuilder = ({
     );
     hoveredNodePeersRef.current = [];
   }, []);
-  const hasChannels = (0, import_react69.useMemo)(
+  const hasChannels = (0, import_react71.useMemo)(
     () => initialNodes.some((node) => node.type === "channels"),
     [initialNodes]
   );
-  const hideChannels = false;
-  const toggleChannelsVisibility = () => {
-  };
-  const searchRef = (0, import_react69.useRef)(null);
-  const reactFlowWrapperRef = (0, import_react69.useRef)(null);
-  const scrollableContainerRef = (0, import_react69.useRef)(null);
-  const nodesRef = (0, import_react69.useRef)(nodes);
+  const { hideChannels, toggleChannelsVisibility } = useChannelVisibility({
+    nodes,
+    edges,
+    setNodes,
+    setEdges,
+    skipProcessing: !hasChannels
+  });
+  const searchRef = (0, import_react71.useRef)(null);
+  const reactFlowWrapperRef = (0, import_react71.useRef)(null);
+  const scrollableContainerRef = (0, import_react71.useRef)(null);
+  const nodesRef = (0, import_react71.useRef)(nodes);
   nodesRef.current = nodes;
-  const edgesRef = (0, import_react69.useRef)(edges);
+  const edgesRef = (0, import_react71.useRef)(edges);
   edgesRef.current = edges;
-  (0, import_react69.useEffect)(() => {
+  (0, import_react71.useEffect)(() => {
     if (isDevMode && initialNodes.length > 0) {
       const positions = {};
       initialNodes.forEach((node) => {
@@ -8829,7 +9049,7 @@ var NodeGraphBuilder = ({
       initialPositionsRef.current = positions;
     }
   }, [isDevMode, initialNodes]);
-  const checkForLayoutChanges = (0, import_react69.useCallback)(() => {
+  const checkForLayoutChanges = (0, import_react71.useCallback)(() => {
     if (!isDevMode) return;
     const initial = initialPositionsRef.current;
     if (Object.keys(initial).length === 0) return;
@@ -8839,7 +9059,7 @@ var NodeGraphBuilder = ({
     });
     setHasLayoutChanges(hasChanges);
   }, [isDevMode]);
-  const handleNodesChange = (0, import_react69.useCallback)(
+  const handleNodesChange = (0, import_react71.useCallback)(
     (changes) => {
       onNodesChange(changes);
       const hasDragEnd = changes.some(
@@ -8851,7 +9071,7 @@ var NodeGraphBuilder = ({
     },
     [onNodesChange, checkForLayoutChanges]
   );
-  const resetNodesAndEdges = (0, import_react69.useCallback)(() => {
+  const resetNodesAndEdges = (0, import_react71.useCallback)(() => {
     setNodes(
       (nds) => nds.map((node) => {
         node.style = { ...node.style, opacity: 1 };
@@ -8870,7 +9090,7 @@ var NodeGraphBuilder = ({
       })
     );
   }, [setNodes, setEdges, animateMessages]);
-  (0, import_react69.useEffect)(() => {
+  (0, import_react71.useEffect)(() => {
     if (!focusNodeId) return;
     const targetNode = nodesRef.current.find((node) => node.id === focusNodeId);
     if (!targetNode) return;
@@ -8888,13 +9108,13 @@ var NodeGraphBuilder = ({
       });
     });
   }, [focusNodeId, focusRequestId, fitView, setNodes]);
-  (0, import_react69.useEffect)(() => {
+  (0, import_react71.useEffect)(() => {
     if (fitRequestId == null) return;
     requestAnimationFrame(() => {
       fitView({ duration: 400, padding: 0.2 });
     });
   }, [fitRequestId, fitView]);
-  const handleNodeClick = (0, import_react69.useCallback)(
+  const handleNodeClick = (0, import_react71.useCallback)(
     (_, node) => {
       if (onNodeClick) {
         onNodeClick(node);
@@ -8916,7 +9136,7 @@ var NodeGraphBuilder = ({
     },
     [onNodeClick, linksToVisualiser, onNavigate]
   );
-  const toggleAnimateMessages = (0, import_react69.useCallback)(() => {
+  const toggleAnimateMessages = (0, import_react71.useCallback)(() => {
     setAnimateMessages((prev) => {
       const next = !prev;
       localStorage.setItem(
@@ -8926,10 +9146,10 @@ var NodeGraphBuilder = ({
       return next;
     });
   }, []);
-  const handleFitView = (0, import_react69.useCallback)(() => {
+  const handleFitView = (0, import_react71.useCallback)(() => {
     fitView({ duration: 400, padding: 0.2 });
   }, [fitView]);
-  (0, import_react69.useEffect)(() => {
+  (0, import_react71.useEffect)(() => {
     if (animated !== void 0) {
       setAnimateMessages(animated);
       return;
@@ -8949,7 +9169,7 @@ var NodeGraphBuilder = ({
       }
     }
   }, [animated]);
-  (0, import_react69.useEffect)(() => {
+  (0, import_react71.useEffect)(() => {
     setEdges(
       (eds) => eds.map((edge) => ({
         ...edge,
@@ -8959,12 +9179,12 @@ var NodeGraphBuilder = ({
       }))
     );
   }, [animateMessages]);
-  (0, import_react69.useEffect)(() => {
+  (0, import_react71.useEffect)(() => {
     setTimeout(() => {
       fitView({ duration: 800 });
     }, 150);
   }, []);
-  const generateMermaidCode = (0, import_react69.useCallback)(() => {
+  const generateMermaidCode = (0, import_react71.useCallback)(() => {
     try {
       return convertToMermaid(nodesRef.current, edgesRef.current, {
         includeStyles: true,
@@ -8975,7 +9195,7 @@ var NodeGraphBuilder = ({
       return "";
     }
   }, []);
-  (0, import_react69.useEffect)(() => {
+  (0, import_react71.useEffect)(() => {
     if (zoomOnScroll) return;
     const findScrollableContainer = () => {
       const selectors = [
@@ -9020,34 +9240,34 @@ var NodeGraphBuilder = ({
       };
     }
   }, [zoomOnScroll]);
-  const handlePaneClick = (0, import_react69.useCallback)(() => {
+  const handlePaneClick = (0, import_react71.useCallback)(() => {
     searchRef.current?.hideSuggestions();
     resetNodesAndEdges();
     fitView({ duration: 800 });
   }, [resetNodesAndEdges, fitView]);
-  const handleNodeSelect = (0, import_react69.useCallback)(
+  const handleNodeSelect = (0, import_react71.useCallback)(
     (node) => {
       handleNodeClick(null, node);
     },
     [handleNodeClick]
   );
-  const handleSearchClear = (0, import_react69.useCallback)(() => {
+  const handleSearchClear = (0, import_react71.useCallback)(() => {
     resetNodesAndEdges();
     fitView({ duration: 800 });
   }, [resetNodesAndEdges, fitView]);
-  const downloadImage = (0, import_react69.useCallback)((dataUrl, filename) => {
+  const downloadImage = (0, import_react71.useCallback)((dataUrl, filename) => {
     const a = document.createElement("a");
     a.setAttribute("download", `${filename || "eventcatalog"}.png`);
     a.setAttribute("href", dataUrl);
     a.click();
   }, []);
-  const openStudioModal = (0, import_react69.useCallback)(() => {
+  const openStudioModal = (0, import_react71.useCallback)(() => {
     setIsStudioModalOpen(true);
   }, [setIsStudioModalOpen]);
-  const openChat = (0, import_react69.useCallback)(() => {
+  const openChat = (0, import_react71.useCallback)(() => {
     window.dispatchEvent(new CustomEvent("eventcatalog:open-chat"));
   }, []);
-  const handleSaveLayout = (0, import_react69.useCallback)(async () => {
+  const handleSaveLayout = (0, import_react71.useCallback)(async () => {
     if (!resourceKey || !onSaveLayout) return false;
     const positions = {};
     nodesRef.current.forEach((node) => {
@@ -9058,11 +9278,11 @@ var NodeGraphBuilder = ({
     });
     return await onSaveLayout(resourceKey, positions);
   }, [resourceKey, onSaveLayout]);
-  const handleResetLayout = (0, import_react69.useCallback)(async () => {
+  const handleResetLayout = (0, import_react71.useCallback)(async () => {
     if (!resourceKey || !onResetLayout) return false;
     return await onResetLayout(resourceKey);
   }, [resourceKey, onResetLayout]);
-  const handleQuickSaveLayout = (0, import_react69.useCallback)(async () => {
+  const handleQuickSaveLayout = (0, import_react71.useCallback)(async () => {
     setIsSavingLayout(true);
     const success = await handleSaveLayout();
     setIsSavingLayout(false);
@@ -9075,17 +9295,17 @@ var NodeGraphBuilder = ({
       setHasLayoutChanges(false);
     }
   }, [handleSaveLayout]);
-  const handleCopyArchitectureCode = (0, import_react69.useCallback)(async () => {
+  const handleCopyArchitectureCode = (0, import_react71.useCallback)(async () => {
     const code = generateMermaidCode();
     await copyToClipboard(code);
   }, [generateMermaidCode]);
-  const handleCopyShareUrl = (0, import_react69.useCallback)(async () => {
+  const handleCopyShareUrl = (0, import_react71.useCallback)(async () => {
     const url = typeof window !== "undefined" ? window.location.href : "";
     await copyToClipboard(url);
     setShareUrlCopySuccess(true);
     setTimeout(() => setShareUrlCopySuccess(false), 2e3);
   }, []);
-  const toggleFullScreen = (0, import_react69.useCallback)(() => {
+  const toggleFullScreen = (0, import_react71.useCallback)(() => {
     if (!document.fullscreenElement) {
       reactFlowWrapperRef.current?.requestFullscreen().catch((err) => {
         console.error(
@@ -9096,7 +9316,7 @@ var NodeGraphBuilder = ({
       document.exitFullscreen();
     }
   }, []);
-  (0, import_react69.useEffect)(() => {
+  (0, import_react71.useEffect)(() => {
     const handleFullscreenChange = () => {
       _setIsFullscreen(!!document.fullscreenElement);
       setTimeout(() => {
@@ -9108,13 +9328,13 @@ var NodeGraphBuilder = ({
       document.removeEventListener("fullscreenchange", handleFullscreenChange);
     };
   }, [fitView]);
-  const handleExportVisual = (0, import_react69.useCallback)(() => {
+  const handleExportVisual = (0, import_react71.useCallback)(() => {
     const imageWidth = 1024;
     const imageHeight = 768;
-    const nodesBounds = (0, import_react70.getNodesBounds)(getNodes());
+    const nodesBounds = (0, import_react72.getNodesBounds)(getNodes());
     const width = imageWidth > nodesBounds.width ? imageWidth : nodesBounds.width;
     const height = imageHeight > nodesBounds.height ? imageHeight : nodesBounds.height;
-    const viewport = (0, import_react70.getViewportForBounds)(
+    const viewport = (0, import_react72.getViewportForBounds)(
       nodesBounds,
       width,
       height,
@@ -9140,7 +9360,7 @@ var NodeGraphBuilder = ({
       if (controls) controls.style.display = "block";
     });
   }, [getNodes, downloadImage, title]);
-  const handleLegendClick = (0, import_react69.useCallback)(
+  const handleLegendClick = (0, import_react71.useCallback)(
     (collectionType, groupId) => {
       const updatedNodes = nodes.map((node) => {
         if (groupId && node.data.group && node.data.group?.id === groupId) {
@@ -9171,7 +9391,7 @@ var NodeGraphBuilder = ({
     },
     [nodes, edges, setNodes, setEdges, fitView]
   );
-  const getNodesByCollectionWithColors = (0, import_react69.useCallback)((nodes2) => {
+  const getNodesByCollectionWithColors = (0, import_react71.useCallback)((nodes2) => {
     const colorClasses = {
       events: "bg-orange-600",
       services: "bg-pink-600",
@@ -9222,24 +9442,24 @@ var NodeGraphBuilder = ({
     );
     return { ...legendForDomains, ...legendForNodes };
   }, []);
-  const legendKeyRef = (0, import_react69.useRef)("");
+  const legendKeyRef = (0, import_react71.useRef)("");
   const computedLegendKey = nodes.map((n) => `${n.id}:${n.type}:${n.data.group?.id || ""}`).join(",");
   if (computedLegendKey !== legendKeyRef.current) {
     legendKeyRef.current = computedLegendKey;
   }
   const legendKey = legendKeyRef.current;
-  const legend = (0, import_react69.useMemo)(
+  const legend = (0, import_react71.useMemo)(
     () => getNodesByCollectionWithColors(nodes),
     [getNodesByCollectionWithColors, legendKey]
   );
-  const nodeIdsKeyRef = (0, import_react69.useRef)("");
+  const nodeIdsKeyRef = (0, import_react71.useRef)("");
   const computedNodeIdsKey = nodes.map((n) => n.id).join(",");
   if (computedNodeIdsKey !== nodeIdsKeyRef.current) {
     nodeIdsKeyRef.current = computedNodeIdsKey;
   }
   const nodeIdsKey = nodeIdsKeyRef.current;
-  const searchNodes = (0, import_react69.useMemo)(() => nodes, [nodeIdsKey]);
-  const allNoteGroups = (0, import_react69.useMemo)(() => {
+  const searchNodes = (0, import_react71.useMemo)(() => nodes, [nodeIdsKey]);
+  const allNoteGroups = (0, import_react71.useMemo)(() => {
     const groups = [];
     for (const node of nodes) {
       const result = getNotesFromNode(node);
@@ -9254,11 +9474,11 @@ var NodeGraphBuilder = ({
     }
     return groups;
   }, [nodeIdsKey]);
-  const totalNotesCount = (0, import_react69.useMemo)(
+  const totalNotesCount = (0, import_react71.useMemo)(
     () => allNoteGroups.reduce((sum, g) => sum + g.notes.length, 0),
     [allNoteGroups]
   );
-  const handleStepChange = (0, import_react69.useCallback)(
+  const handleStepChange = (0, import_react71.useCallback)(
     (nodeId, highlightPaths, shouldZoomOut) => {
       if (nodeId === null) {
         resetNodesAndEdges();
@@ -9333,7 +9553,7 @@ var NodeGraphBuilder = ({
     },
     [nodes, edges, setNodes, setEdges, resetNodesAndEdges, fitView]
   );
-  const isFlowVisualization = (0, import_react69.useMemo)(
+  const isFlowVisualization = (0, import_react71.useMemo)(
     () => edges.some((edge) => edge.type === "flow-edge"),
     [edges]
   );
@@ -9421,7 +9641,7 @@ var NodeGraphBuilder = ({
             }
           ) })
         ] }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
-          import_react70.ReactFlow,
+          import_react72.ReactFlow,
           {
             nodeTypes,
             edgeTypes: edgeTypes2,
@@ -9433,7 +9653,7 @@ var NodeGraphBuilder = ({
             onEdgesChange,
             onEdgeMouseEnter: handleEdgeMouseEnter,
             onEdgeMouseLeave: handleEdgeMouseLeave,
-            connectionLineType: import_react70.ConnectionLineType.SmoothStep,
+            connectionLineType: import_react72.ConnectionLineType.SmoothStep,
             nodeOrigin: NODE_ORIGIN,
             onNodeClick: handleNodeClick,
             onNodeMouseEnter: handleNodeMouseEnter,
@@ -9447,7 +9667,7 @@ var NodeGraphBuilder = ({
             className: "relative",
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
-                import_react70.Panel,
+                import_react72.Panel,
                 {
                   position: "top-center",
                   className: "w-full pr-6 pointer-events-none",
@@ -9564,10 +9784,10 @@ var NodeGraphBuilder = ({
                   ]
                 }
               ),
-              includeBackground && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react70.Background, { color: "var(--ec-bg-dots)", gap: 16 }),
-              includeBackground && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react70.Controls, {}),
+              includeBackground && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react72.Background, { color: "var(--ec-bg-dots)", gap: 16 }),
+              includeBackground && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react72.Controls, {}),
               showMinimap && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-                import_react70.MiniMap,
+                import_react72.MiniMap,
                 {
                   nodeStrokeWidth: 3,
                   zoomable: true,
@@ -9575,7 +9795,7 @@ var NodeGraphBuilder = ({
                   style: MINIMAP_STYLE
                 }
               ),
-              isFlowVisualization && showFlowWalkthrough && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react70.Panel, { position: "bottom-left", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+              isFlowVisualization && showFlowWalkthrough && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react72.Panel, { position: "bottom-left", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                 StepWalkthrough_default,
                 {
                   nodes,
@@ -9586,7 +9806,7 @@ var NodeGraphBuilder = ({
                 }
               ) }),
               isDevMode && hasLayoutChanges && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-                import_react70.Panel,
+                import_react72.Panel,
                 {
                   position: "bottom-left",
                   style: isFlowVisualization && showFlowWalkthrough ? LAYOUT_CHANGE_PANEL_STYLE_WITH_WALKTHROUGH : LAYOUT_CHANGE_PANEL_STYLE_DEFAULT,
@@ -9745,7 +9965,7 @@ var NodeGraph = ({
   onSaveLayout,
   onResetLayout
 }) => {
-  const graphLayout = (0, import_react69.useMemo)(() => {
+  const graphLayout = (0, import_react71.useMemo)(() => {
     if (!graph) return null;
     return layoutGraph(
       graph.nodes,
@@ -9760,17 +9980,17 @@ var NodeGraph = ({
   const includeKey = includeKeyProp !== void 0 ? includeKeyProp : graph?.options?.legend !== false;
   const showSearch = showSearchProp !== void 0 ? showSearchProp : graph?.options?.search !== false;
   const animated = animatedProp ?? graph?.options?.animated;
-  const [elem, setElem] = (0, import_react69.useState)(null);
-  const [showFooter, setShowFooter] = (0, import_react69.useState)(true);
-  const [isStudioModalOpen, setIsStudioModalOpen] = (0, import_react69.useState)(false);
-  const openStudioModal = (0, import_react69.useCallback)(() => {
+  const [elem, setElem] = (0, import_react71.useState)(null);
+  const [showFooter, setShowFooter] = (0, import_react71.useState)(true);
+  const [isStudioModalOpen, setIsStudioModalOpen] = (0, import_react71.useState)(false);
+  const openStudioModal = (0, import_react71.useCallback)(() => {
     setIsStudioModalOpen(true);
   }, []);
   const containerToRenderInto = portalId || `${id}-portal`;
-  (0, import_react69.useEffect)(() => {
+  (0, import_react71.useEffect)(() => {
     setElem(document.getElementById(containerToRenderInto));
   }, []);
-  (0, import_react69.useEffect)(() => {
+  (0, import_react71.useEffect)(() => {
     const urlParams = new URLSearchParams(window.location.search);
     const embed = urlParams.get("embed");
     if (embed === "true") {
@@ -9779,7 +9999,7 @@ var NodeGraph = ({
   }, []);
   if (!elem) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { children: (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_react70.ReactFlowProvider, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_react72.ReactFlowProvider, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
         NodeGraphBuilder,
         {
@@ -9871,121 +10091,6 @@ var edgeTypes = {
   "flow-edge": FlowEdge_default,
   multiline: MultilineEdgeLabel_default
 };
-
-// src/utils/utils/utils.ts
-var import_react71 = require("@xyflow/react");
-var import_dagre2 = __toESM(require("dagre"));
-var generateIdForNode = (node) => {
-  return `${node.data.id}-${node.data.version}`;
-};
-var generateIdForNodes = (nodes) => {
-  return nodes.map((node) => `${node.data.id}-${node.data.version}`).join("-");
-};
-var generatedIdForEdge = (source, target) => {
-  return `${source.data.id}-${source.data.version}-${target.data.id}-${target.data.version}`;
-};
-var getColorFromString = (id) => {
-  let hash = 0;
-  for (let i = 0; i < id.length; i++) {
-    hash = id.charCodeAt(i) + ((hash << 5) - hash);
-  }
-  let color = "#";
-  for (let i = 0; i < 3; i++) {
-    const value = hash >> i * 8 & 255;
-    color += value.toString(16).padStart(2, "0");
-  }
-  return color;
-};
-var getEdgeLabelForServiceAsTarget = (data) => {
-  const type = data.collection;
-  switch (type) {
-    case "commands":
-      return "invokes";
-    case "events":
-      return "publishes \nevent";
-    case "queries":
-      return "requests";
-    default:
-      return "sends to";
-  }
-};
-var getEdgeLabelForMessageAsSource = (data, throughChannel = false) => {
-  const type = data.collection;
-  switch (type) {
-    case "commands":
-      return "accepts";
-    case "events":
-      return throughChannel ? "subscribed to" : "subscribed by";
-    case "queries":
-      return "accepts";
-    default:
-      return "sends to";
-  }
-};
-var calculatedNodes = (flow, nodes) => {
-  return nodes.map((node) => {
-    const { x, y } = flow.node(node.id);
-    return { ...node, position: { x, y } };
-  });
-};
-var createDagreGraph = ({
-  ranksep = 180,
-  nodesep = 50,
-  ...rest
-}) => {
-  const graph = new import_dagre2.default.graphlib.Graph({ compound: true });
-  graph.setGraph({ rankdir: "LR", ranksep, nodesep, ...rest });
-  graph.setDefaultEdgeLabel(() => ({}));
-  return graph;
-};
-var createEdge = (edgeOptions) => {
-  return {
-    label: "subscribed by",
-    animated: false,
-    // markerStart: {
-    //   type: MarkerType.Arrow,
-    //   width: 40,
-    //   height: 40,
-    // },
-    markerEnd: {
-      type: import_react71.MarkerType.ArrowClosed,
-      width: 40,
-      height: 40,
-      color: "rgb(var(--ec-page-text-muted))"
-    },
-    style: {
-      strokeWidth: 1.5,
-      stroke: "rgb(var(--ec-page-text-muted))",
-      strokeDasharray: "5 5"
-    },
-    ...edgeOptions
-  };
-};
-var createNode = (values) => {
-  return {
-    sourcePosition: import_react71.Position.Right,
-    targetPosition: import_react71.Position.Left,
-    ...values
-  };
-};
-var getNodesAndEdgesFromDagre = ({
-  nodes,
-  edges,
-  defaultFlow
-}) => {
-  const flow = defaultFlow || createDagreGraph({ ranksep: 300, nodesep: 50 });
-  nodes.forEach((node) => {
-    flow.setNode(node.id, { width: 150, height: 100 });
-  });
-  edges.forEach((edge) => {
-    flow.setEdge(edge.source, edge.target);
-  });
-  import_dagre2.default.layout(flow);
-  return {
-    nodes: calculatedNodes(flow, nodes),
-    edges
-  };
-};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ACTOR,