@eventcatalog/visualiser 4.1.3 → 4.1.5

package/LICENSE

@@ -22,7 +22,10 @@ SOFTWARE.
 
 ---
 
-Note: Source code within `packages/core/eventcatalog/src/enterprise/` is
-licensed under the EventCatalog Commercial License and is NOT covered by the
-MIT License above. See `packages/core/eventcatalog/src/enterprise/LICENSE`
-for the full terms.
+Note: Source code within the following directories is licensed under the
+EventCatalog Commercial License and is NOT covered by the MIT License above:
+
+- `packages/core/eventcatalog/src/enterprise/`
+- `packages/core/src/federation/`
+
+See the `LICENSE` file in each directory for the full terms.

package/dist/index.d.mts

@@ -903,6 +903,16 @@ declare const getEdgeLabelForServiceAsTarget: (data: MessageCollectionItem) => "
 declare const getEdgeLabelForMessageAsSource: (data: MessageCollectionItem, throughChannel?: boolean) => "sends to" | "accepts" | "subscribed to" | "subscribed by";
 declare const calculatedNodes: (flow: dagre.graphlib.Graph, nodes: Node[]) => any[];
 declare const createDagreGraph: ({ ranksep, nodesep, ...rest }: any) => dagre.graphlib.Graph<{}>;
+/**
+ * network-simplex produces the nicest layered layout but is O(V·E) and hangs on
+ * large architecture maps. tight-tree keeps the same LR layering with far less
+ * work. Callers can still force a ranker via createDagreGraph({ ranker }).
+ */
+declare const LARGE_GRAPH_NODE_THRESHOLD = 80;
+declare const LARGE_GRAPH_EDGE_THRESHOLD = 200;
+declare const LARGE_GRAPH_RANKER = "tight-tree";
+declare const selectDagreRanker: (nodeCount: number, edgeCount: number, explicitRanker?: string) => string | undefined;
+declare const layoutDagreGraph: (flow: dagre.graphlib.Graph) => void;
 declare const createEdge: (edgeOptions: Edge) => Edge;
 declare const createNode: (values: Node) => Node;
 type DagreGraph = any;
@@ -926,4 +936,4 @@ declare function layoutGraph(nodes: GraphNode[], edges: GraphEdge[], options?: {
     edges: Edge[];
 };
 
-export { ACTOR, AGENT, AGENT_TOOL, _default$o as Actor, type ActorNode, type Agent$1 as Agent, _default$i as AgentNode, type AgentTool$1 as AgentTool, _default$j as AgentToolNode, type AgentToolNode as AgentToolNodeType, AnimatedMessageEdge, type BaseNodeData, CHANNEL, COMMAND, type Channel, type ChannelNode, _default$f as Command, type CommandNode, _default$8 as ContextActorNode, type ContextMenuItem, _default$b as CustomNode, DATA, type Data, type DataNode, _default$s as DataProductNode, _default$a as DomainNode, type DslGraph, ENTITY_TARGET_HANDLE_ID, EVENT, type EdgeType, _default$c as EntityNode, type EntityProperty, _default$e as Event, type EventCatalogResource, type EventNode, type ExternalSystem, _default$2 as ExternalSystem2Node, type ExternalSystemNode, _default$q as Field, type FieldNode as FieldNodeType, _default$1 as FlowEdge, _default$r as FlowExpandedNode, _default$6 as FlowNode, FocusModeModal, type GraphEdge, type GraphEdgeType, type GraphNode, _default$5 as GroupNode, LabelledDefaultEdge, LabelledSmoothStepEdge, LabelledStepEdge, MESSAGE, type MermaidExportOptions, MermaidView, type Message, _default$t as MessageGroupExpandedNode, type MessageGroupExpandedNodeData, _default$u as MessageGroupNode, type MessageGroupNodeData, type MessageGroupNode as MessageGroupNodeType, _default as MultilineEdgeLabel, type NodeCategory, type NodeConfiguration, _default$v as NodeContextMenu, NodeGraph, type NodeGraphProps, type NodeType, _default$k as Note, type NoteNode, NotesIndicator, OwnerIndicator, QUERY, _default$g as Query, type QueryNode, type RegisteredNode, SERVICE, _default$h as Service, type ServiceNode, type Service as ServiceType, _default$4 as StepNode, _default$w as StepWalkthrough, _default$7 as SystemGroupNode, _default$9 as SystemNode, _default$3 as UserNode, VIEW, type View, type ViewNode, VisualiserSearch, type VisualizerCallbacks, type VisualizerLink, type VisualizerMode, _default$n as actorConfig, buildNodeData, calculatedNodes, convertToMermaid, createDagreGraph, createEdge, createNode, _default$m as dataNodeConfig, edgeTypes, _default$d as eventConfig, exportNodeGraphForStudio, _default$l as externalSystemConfig, _default$p as fieldConfig, generateIdForNode, generateIdForNodes, generatedIdForEdge, getColorFromString, getEdgeLabelForMessageAsSource, getEdgeLabelForServiceAsTarget, getNestedEntityProperties, getNodesAndEdgesFromDagre, getPropertyTypeLabel, layoutGraph, nodeComponents, nodeConfigs, normalizeOwners };
+export { ACTOR, AGENT, AGENT_TOOL, _default$o as Actor, type ActorNode, type Agent$1 as Agent, _default$i as AgentNode, type AgentTool$1 as AgentTool, _default$j as AgentToolNode, type AgentToolNode as AgentToolNodeType, AnimatedMessageEdge, type BaseNodeData, CHANNEL, COMMAND, type Channel, type ChannelNode, _default$f as Command, type CommandNode, _default$8 as ContextActorNode, type ContextMenuItem, _default$b as CustomNode, DATA, type Data, type DataNode, _default$s as DataProductNode, _default$a as DomainNode, type DslGraph, ENTITY_TARGET_HANDLE_ID, EVENT, type EdgeType, _default$c as EntityNode, type EntityProperty, _default$e as Event, type EventCatalogResource, type EventNode, type ExternalSystem, _default$2 as ExternalSystem2Node, type ExternalSystemNode, _default$q as Field, type FieldNode as FieldNodeType, _default$1 as FlowEdge, _default$r as FlowExpandedNode, _default$6 as FlowNode, FocusModeModal, type GraphEdge, type GraphEdgeType, type GraphNode, _default$5 as GroupNode, LARGE_GRAPH_EDGE_THRESHOLD, LARGE_GRAPH_NODE_THRESHOLD, LARGE_GRAPH_RANKER, LabelledDefaultEdge, LabelledSmoothStepEdge, LabelledStepEdge, MESSAGE, type MermaidExportOptions, MermaidView, type Message, _default$t as MessageGroupExpandedNode, type MessageGroupExpandedNodeData, _default$u as MessageGroupNode, type MessageGroupNodeData, type MessageGroupNode as MessageGroupNodeType, _default as MultilineEdgeLabel, type NodeCategory, type NodeConfiguration, _default$v as NodeContextMenu, NodeGraph, type NodeGraphProps, type NodeType, _default$k as Note, type NoteNode, NotesIndicator, OwnerIndicator, QUERY, _default$g as Query, type QueryNode, type RegisteredNode, SERVICE, _default$h as Service, type ServiceNode, type Service as ServiceType, _default$4 as StepNode, _default$w as StepWalkthrough, _default$7 as SystemGroupNode, _default$9 as SystemNode, _default$3 as UserNode, VIEW, type View, type ViewNode, VisualiserSearch, type VisualizerCallbacks, type VisualizerLink, type VisualizerMode, _default$n as actorConfig, buildNodeData, calculatedNodes, convertToMermaid, createDagreGraph, createEdge, createNode, _default$m as dataNodeConfig, edgeTypes, _default$d as eventConfig, exportNodeGraphForStudio, _default$l as externalSystemConfig, _default$p as fieldConfig, generateIdForNode, generateIdForNodes, generatedIdForEdge, getColorFromString, getEdgeLabelForMessageAsSource, getEdgeLabelForServiceAsTarget, getNestedEntityProperties, getNodesAndEdgesFromDagre, getPropertyTypeLabel, layoutDagreGraph, layoutGraph, nodeComponents, nodeConfigs, normalizeOwners, selectDagreRanker };

package/dist/index.d.ts

@@ -903,6 +903,16 @@ declare const getEdgeLabelForServiceAsTarget: (data: MessageCollectionItem) => "
 declare const getEdgeLabelForMessageAsSource: (data: MessageCollectionItem, throughChannel?: boolean) => "sends to" | "accepts" | "subscribed to" | "subscribed by";
 declare const calculatedNodes: (flow: dagre.graphlib.Graph, nodes: Node[]) => any[];
 declare const createDagreGraph: ({ ranksep, nodesep, ...rest }: any) => dagre.graphlib.Graph<{}>;
+/**
+ * network-simplex produces the nicest layered layout but is O(V·E) and hangs on
+ * large architecture maps. tight-tree keeps the same LR layering with far less
+ * work. Callers can still force a ranker via createDagreGraph({ ranker }).
+ */
+declare const LARGE_GRAPH_NODE_THRESHOLD = 80;
+declare const LARGE_GRAPH_EDGE_THRESHOLD = 200;
+declare const LARGE_GRAPH_RANKER = "tight-tree";
+declare const selectDagreRanker: (nodeCount: number, edgeCount: number, explicitRanker?: string) => string | undefined;
+declare const layoutDagreGraph: (flow: dagre.graphlib.Graph) => void;
 declare const createEdge: (edgeOptions: Edge) => Edge;
 declare const createNode: (values: Node) => Node;
 type DagreGraph = any;
@@ -926,4 +936,4 @@ declare function layoutGraph(nodes: GraphNode[], edges: GraphEdge[], options?: {
     edges: Edge[];
 };
 
-export { ACTOR, AGENT, AGENT_TOOL, _default$o as Actor, type ActorNode, type Agent$1 as Agent, _default$i as AgentNode, type AgentTool$1 as AgentTool, _default$j as AgentToolNode, type AgentToolNode as AgentToolNodeType, AnimatedMessageEdge, type BaseNodeData, CHANNEL, COMMAND, type Channel, type ChannelNode, _default$f as Command, type CommandNode, _default$8 as ContextActorNode, type ContextMenuItem, _default$b as CustomNode, DATA, type Data, type DataNode, _default$s as DataProductNode, _default$a as DomainNode, type DslGraph, ENTITY_TARGET_HANDLE_ID, EVENT, type EdgeType, _default$c as EntityNode, type EntityProperty, _default$e as Event, type EventCatalogResource, type EventNode, type ExternalSystem, _default$2 as ExternalSystem2Node, type ExternalSystemNode, _default$q as Field, type FieldNode as FieldNodeType, _default$1 as FlowEdge, _default$r as FlowExpandedNode, _default$6 as FlowNode, FocusModeModal, type GraphEdge, type GraphEdgeType, type GraphNode, _default$5 as GroupNode, LabelledDefaultEdge, LabelledSmoothStepEdge, LabelledStepEdge, MESSAGE, type MermaidExportOptions, MermaidView, type Message, _default$t as MessageGroupExpandedNode, type MessageGroupExpandedNodeData, _default$u as MessageGroupNode, type MessageGroupNodeData, type MessageGroupNode as MessageGroupNodeType, _default as MultilineEdgeLabel, type NodeCategory, type NodeConfiguration, _default$v as NodeContextMenu, NodeGraph, type NodeGraphProps, type NodeType, _default$k as Note, type NoteNode, NotesIndicator, OwnerIndicator, QUERY, _default$g as Query, type QueryNode, type RegisteredNode, SERVICE, _default$h as Service, type ServiceNode, type Service as ServiceType, _default$4 as StepNode, _default$w as StepWalkthrough, _default$7 as SystemGroupNode, _default$9 as SystemNode, _default$3 as UserNode, VIEW, type View, type ViewNode, VisualiserSearch, type VisualizerCallbacks, type VisualizerLink, type VisualizerMode, _default$n as actorConfig, buildNodeData, calculatedNodes, convertToMermaid, createDagreGraph, createEdge, createNode, _default$m as dataNodeConfig, edgeTypes, _default$d as eventConfig, exportNodeGraphForStudio, _default$l as externalSystemConfig, _default$p as fieldConfig, generateIdForNode, generateIdForNodes, generatedIdForEdge, getColorFromString, getEdgeLabelForMessageAsSource, getEdgeLabelForServiceAsTarget, getNestedEntityProperties, getNodesAndEdgesFromDagre, getPropertyTypeLabel, layoutGraph, nodeComponents, nodeConfigs, normalizeOwners };
+export { ACTOR, AGENT, AGENT_TOOL, _default$o as Actor, type ActorNode, type Agent$1 as Agent, _default$i as AgentNode, type AgentTool$1 as AgentTool, _default$j as AgentToolNode, type AgentToolNode as AgentToolNodeType, AnimatedMessageEdge, type BaseNodeData, CHANNEL, COMMAND, type Channel, type ChannelNode, _default$f as Command, type CommandNode, _default$8 as ContextActorNode, type ContextMenuItem, _default$b as CustomNode, DATA, type Data, type DataNode, _default$s as DataProductNode, _default$a as DomainNode, type DslGraph, ENTITY_TARGET_HANDLE_ID, EVENT, type EdgeType, _default$c as EntityNode, type EntityProperty, _default$e as Event, type EventCatalogResource, type EventNode, type ExternalSystem, _default$2 as ExternalSystem2Node, type ExternalSystemNode, _default$q as Field, type FieldNode as FieldNodeType, _default$1 as FlowEdge, _default$r as FlowExpandedNode, _default$6 as FlowNode, FocusModeModal, type GraphEdge, type GraphEdgeType, type GraphNode, _default$5 as GroupNode, LARGE_GRAPH_EDGE_THRESHOLD, LARGE_GRAPH_NODE_THRESHOLD, LARGE_GRAPH_RANKER, LabelledDefaultEdge, LabelledSmoothStepEdge, LabelledStepEdge, MESSAGE, type MermaidExportOptions, MermaidView, type Message, _default$t as MessageGroupExpandedNode, type MessageGroupExpandedNodeData, _default$u as MessageGroupNode, type MessageGroupNodeData, type MessageGroupNode as MessageGroupNodeType, _default as MultilineEdgeLabel, type NodeCategory, type NodeConfiguration, _default$v as NodeContextMenu, NodeGraph, type NodeGraphProps, type NodeType, _default$k as Note, type NoteNode, NotesIndicator, OwnerIndicator, QUERY, _default$g as Query, type QueryNode, type RegisteredNode, SERVICE, _default$h as Service, type ServiceNode, type Service as ServiceType, _default$4 as StepNode, _default$w as StepWalkthrough, _default$7 as SystemGroupNode, _default$9 as SystemNode, _default$3 as UserNode, VIEW, type View, type ViewNode, VisualiserSearch, type VisualizerCallbacks, type VisualizerLink, type VisualizerMode, _default$n as actorConfig, buildNodeData, calculatedNodes, convertToMermaid, createDagreGraph, createEdge, createNode, _default$m as dataNodeConfig, edgeTypes, _default$d as eventConfig, exportNodeGraphForStudio, _default$l as externalSystemConfig, _default$p as fieldConfig, generateIdForNode, generateIdForNodes, generatedIdForEdge, getColorFromString, getEdgeLabelForMessageAsSource, getEdgeLabelForServiceAsTarget, getNestedEntityProperties, getNodesAndEdgesFromDagre, getPropertyTypeLabel, layoutDagreGraph, layoutGraph, nodeComponents, nodeConfigs, normalizeOwners, selectDagreRanker };

package/dist/index.js

@@ -59,6 +59,9 @@ __export(index_exports, {
   FlowNode: () => Flow_default,
   FocusModeModal: () => FocusModeModal_default,
   GroupNode: () => GroupNode_default,
+  LARGE_GRAPH_EDGE_THRESHOLD: () => LARGE_GRAPH_EDGE_THRESHOLD,
+  LARGE_GRAPH_NODE_THRESHOLD: () => LARGE_GRAPH_NODE_THRESHOLD,
+  LARGE_GRAPH_RANKER: () => LARGE_GRAPH_RANKER,
   LabelledDefaultEdge: () => LabelledDefaultEdge,
   LabelledSmoothStepEdge: () => LabelledSmoothStepEdge,
   LabelledStepEdge: () => LabelledStepEdge,
@@ -106,10 +109,12 @@ __export(index_exports, {
   getNestedEntityProperties: () => getNestedEntityProperties,
   getNodesAndEdgesFromDagre: () => getNodesAndEdgesFromDagre,
   getPropertyTypeLabel: () => getPropertyTypeLabel,
+  layoutDagreGraph: () => layoutDagreGraph,
   layoutGraph: () => layoutGraph,
   nodeComponents: () => nodeComponents,
   nodeConfigs: () => nodeConfigs,
-  normalizeOwners: () => normalizeOwners
+  normalizeOwners: () => normalizeOwners,
+  selectDagreRanker: () => selectDagreRanker
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -5900,6 +5905,7 @@ var System_default = (0, import_react54.memo)(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: import_lucide_react26.Server, label: "Services", count: servicesCount },
     { icon: import_lucide_react26.MessageSquare, label: "Messages", count: messagesCount },
@@ -5913,15 +5919,18 @@ var System_default = (0, import_react54.memo)(function SystemNode({ data }) {
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
     "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: {
@@ -9006,6 +9015,8 @@ var NODE_SHAPE_MAP = {
   flows: ["([", "])"],
   // stadium (rounded)
   flow: ["([", "])"],
+  systems: ["[[", "]]"],
+  system: ["[[", "]]"],
   step: ["[", "]"],
   // rectangle
   user: ["((", "))"],
@@ -9055,6 +9066,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",
@@ -9126,6 +9139,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;
@@ -9545,6 +9564,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 });
+  }
+  import_dagre.default.layout(flow);
+};
 var createEdge = (edgeOptions) => {
   return {
     label: "subscribed by",
@@ -9587,7 +9626,7 @@ var getNodesAndEdgesFromDagre = ({
   edges.forEach((edge) => {
     flow.setEdge(edge.source, edge.target);
   });
-  import_dagre.default.layout(flow);
+  layoutDagreGraph(flow);
   return {
     nodes: calculatedNodes(flow, nodes),
     edges
@@ -11552,7 +11591,7 @@ function AllNotesModal({
 var import_dagre3 = __toESM(require("dagre"));
 var import_jsx_runtime52 = require("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 = {
@@ -11991,7 +12030,7 @@ var NodeGraphBuilder = ({
           g.setEdge(sourceTop, targetTop);
         }
       });
-      import_dagre3.default.layout(g);
+      layoutDagreGraph(g);
       const positioned = nextNodes.map((node) => {
         if (node.parentId) {
           const parent = nextNodes.find((n) => n.id === node.parentId);
@@ -12082,7 +12121,7 @@ var NodeGraphBuilder = ({
           g.setEdge(e.source, e.target);
         }
       });
-      import_dagre3.default.layout(g);
+      layoutDagreGraph(g);
       let minX = Infinity;
       let minY = Infinity;
       let maxX = -Infinity;
@@ -12701,7 +12740,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]);
@@ -13699,6 +13738,9 @@ var edgeTypes = {
   FlowNode,
   FocusModeModal,
   GroupNode,
+  LARGE_GRAPH_EDGE_THRESHOLD,
+  LARGE_GRAPH_NODE_THRESHOLD,
+  LARGE_GRAPH_RANKER,
   LabelledDefaultEdge,
   LabelledSmoothStepEdge,
   LabelledStepEdge,
@@ -13746,9 +13788,11 @@ var edgeTypes = {
   getNestedEntityProperties,
   getNodesAndEdgesFromDagre,
   getPropertyTypeLabel,
+  layoutDagreGraph,
   layoutGraph,
   nodeComponents,
   nodeConfigs,
-  normalizeOwners
+  normalizeOwners,
+  selectDagreRanker
 });
 //# sourceMappingURL=index.js.map