@eventcatalog/visualiser 4.1.3 → 4.1.5

package/dist/index.mjs

@@ -5841,6 +5841,7 @@ var System_default = memo26(function SystemNode({ data }) {
   const { id, version, name, summary, scope } = system;
   const isExternal = scope === "external";
   const isDark = useDarkMode();
+  const isFlowStep = Boolean(data.step);
   const stats = [
     { icon: ServerIcon2, label: "Services", count: servicesCount },
     { icon: MessageSquareIcon, label: "Messages", count: messagesCount },
@@ -5854,15 +5855,18 @@ var System_default = memo26(function SystemNode({ data }) {
   return /* @__PURE__ */ jsxs27(
     "div",
     {
-      role: "button",
-      tabIndex: 0,
-      onClick: goToMap,
-      onKeyDown: (e) => {
-        if (e.key === "Enter" || e.key === " ") goToMap();
+      ...isFlowStep ? {} : {
+        role: "button",
+        tabIndex: 0,
+        onClick: goToMap,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") goToMap();
+        },
+        title: `Open the ${name} map`
       },
-      title: `Open the ${name} map`,
       className: classNames18(
-        "relative min-w-48 max-w-60 rounded-xl border-2 overflow-visible cursor-pointer",
+        "relative min-w-48 max-w-60 rounded-xl border-2 overflow-visible",
+        !isFlowStep && "cursor-pointer",
         isExternal ? "border-dashed border-violet-400" : "border-violet-500"
       ),
       style: {
@@ -8999,6 +9003,8 @@ var NODE_SHAPE_MAP = {
   flows: ["([", "])"],
   // stadium (rounded)
   flow: ["([", "])"],
+  systems: ["[[", "]]"],
+  system: ["[[", "]]"],
   step: ["[", "]"],
   // rectangle
   user: ["((", "))"],
@@ -9048,6 +9054,8 @@ var NODE_STYLE_CLASSES = {
   domain: "fill:#eab308,stroke:#a16207,color:#000",
   flows: "fill:#14b8a6,stroke:#0f766e,color:#fff",
   flow: "fill:#14b8a6,stroke:#0f766e,color:#fff",
+  systems: "fill:#8b5cf6,stroke:#6d28d9,color:#fff",
+  system: "fill:#8b5cf6,stroke:#6d28d9,color:#fff",
   step: "fill:#374151,stroke:#1f2937,color:#fff",
   user: "fill:#8b5cf6,stroke:#6d28d9,color:#fff",
   actor: "fill:#eab308,stroke:#a16207,color:#000",
@@ -9119,6 +9127,12 @@ function getNodeLabel(node) {
     const version = domainData?.version || domain?.version;
     return formatLabelWithVersion(name, version);
   }
+  if (type === "systems" || type === "system") {
+    const system = data.system;
+    const name = system?.name || system?.id || node.id;
+    const version = system?.data?.version || system?.version;
+    return formatLabelWithVersion(name, version);
+  }
   if (type === "flows" || type === "flow") {
     const flow = data.flow;
     const name = flow?.name || flow?.id || node.id;
@@ -9538,6 +9552,26 @@ var createDagreGraph = ({
   graph.setDefaultEdgeLabel(() => ({}));
   return graph;
 };
+var LARGE_GRAPH_NODE_THRESHOLD = 80;
+var LARGE_GRAPH_EDGE_THRESHOLD = 200;
+var LARGE_GRAPH_RANKER = "tight-tree";
+var selectDagreRanker = (nodeCount, edgeCount, explicitRanker) => {
+  if (explicitRanker) return explicitRanker;
+  if (nodeCount >= LARGE_GRAPH_NODE_THRESHOLD || edgeCount >= LARGE_GRAPH_EDGE_THRESHOLD) {
+    return LARGE_GRAPH_RANKER;
+  }
+  return void 0;
+};
+var layoutDagreGraph = (flow) => {
+  const label = flow.graph() || {};
+  const nodeCount = flow.nodeCount();
+  const edgeCount = flow.edgeCount();
+  const ranker = selectDagreRanker(nodeCount, edgeCount, label.ranker);
+  if (ranker && label.ranker !== ranker) {
+    flow.setGraph({ ...label, ranker });
+  }
+  dagre.layout(flow);
+};
 var createEdge = (edgeOptions) => {
   return {
     label: "subscribed by",
@@ -9580,7 +9614,7 @@ var getNodesAndEdgesFromDagre = ({
   edges.forEach((edge) => {
     flow.setEdge(edge.source, edge.target);
   });
-  dagre.layout(flow);
+  layoutDagreGraph(flow);
   return {
     nodes: calculatedNodes(flow, nodes),
     edges
@@ -11581,7 +11615,7 @@ function AllNotesModal({
 import dagre3 from "dagre";
 import { Fragment as Fragment15, jsx as jsx52, jsxs as jsxs49 } from "react/jsx-runtime";
 var POSITION_CHANGE_THRESHOLD = 1;
-var LARGE_GRAPH_NODE_THRESHOLD = 30;
+var LARGE_GRAPH_NODE_THRESHOLD2 = 30;
 var NODE_ORIGIN = [0.1, 0.1];
 var INITIAL_FIT_VIEW_OPTIONS = { padding: 0.2, duration: 0 };
 var MINIMAP_STYLE = {
@@ -12020,7 +12054,7 @@ var NodeGraphBuilder = ({
           g.setEdge(sourceTop, targetTop);
         }
       });
-      dagre3.layout(g);
+      layoutDagreGraph(g);
       const positioned = nextNodes.map((node) => {
         if (node.parentId) {
           const parent = nextNodes.find((n) => n.id === node.parentId);
@@ -12111,7 +12145,7 @@ var NodeGraphBuilder = ({
           g.setEdge(e.source, e.target);
         }
       });
-      dagre3.layout(g);
+      layoutDagreGraph(g);
       let minX = Infinity;
       let minY = Infinity;
       let maxX = -Infinity;
@@ -12730,7 +12764,7 @@ var NodeGraphBuilder = ({
       if (storedAnimateMessages !== null) {
         setAnimateMessages(storedAnimateMessages === "true");
       } else {
-        setAnimateMessages(initialNodes.length <= LARGE_GRAPH_NODE_THRESHOLD);
+        setAnimateMessages(initialNodes.length <= LARGE_GRAPH_NODE_THRESHOLD2);
       }
     }
   }, [animated, disableMessageAnimation, initialNodes.length]);
@@ -13727,6 +13761,9 @@ export {
   Flow_default as FlowNode,
   FocusModeModal_default as FocusModeModal,
   GroupNode_default as GroupNode,
+  LARGE_GRAPH_EDGE_THRESHOLD,
+  LARGE_GRAPH_NODE_THRESHOLD,
+  LARGE_GRAPH_RANKER,
   LabelledDefaultEdge,
   LabelledSmoothStepEdge,
   LabelledStepEdge,
@@ -13774,9 +13811,11 @@ export {
   getNestedEntityProperties,
   getNodesAndEdgesFromDagre,
   getPropertyTypeLabel,
+  layoutDagreGraph,
   layoutGraph,
   nodeComponents,
   nodeConfigs,
-  normalizeOwners
+  normalizeOwners,
+  selectDagreRanker
 };
 //# sourceMappingURL=index.mjs.map