@eventcatalog/core 4.12.2 → 5.0.0-beta.0

package/eventcatalog/src/utils/node-graphs/domains-node-graph.ts

@@ -1,13 +1,11 @@
 import { getCollection } from 'astro:content';
 import {
-  createDagreGraph,
-  calculatedNodes,
   generateIdForNode,
   getEdgeLabelForServiceAsTarget,
   generatedIdForEdge,
   createEdge,
-  layoutDagreGraph,
 } from '@utils/node-graphs/utils/utils';
+import { layoutNodeGraph } from '@utils/node-graphs/layout-node-graph';
 import { getNodesAndEdges as getServicesNodeAndEdges } from './services-node-graph';
 import { getNodesAndEdges as getAgentsNodeAndEdges } from './agents-node-graph';
 import { getNodesAndEdges as getDataProductsNodeAndEdges } from './data-products-node-graph';
@@ -16,12 +14,9 @@ import { createVersionedMap, findInMap } from '@utils/collections/util';
 import { getProducersOfMessage } from '@utils/collections/services';
 import { getProducersOfMessage as getAgentProducersOfMessage } from '@utils/collections/agents';
 
-type DagreGraph = any;
-
 interface NodesAndEdgesProps {
   id: string;
   version: string;
-  defaultFlow?: DagreGraph;
   mode: 'simple' | 'full';
   group?: boolean;
   channelRenderMode?: 'single' | 'flat';
@@ -31,13 +26,11 @@ interface NodesAndEdgesProps {
 export const getNodesAndEdges = async ({
   id,
   version,
-  defaultFlow,
   mode = 'simple',
   group = false,
   channelRenderMode = 'flat',
   layout = true,
 }: NodesAndEdgesProps) => {
-  const flow = defaultFlow || createDagreGraph({ ranksep: 360, nodesep: 50, edgesep: 50 });
   let nodes = new Map(),
     edges = new Map();
 
@@ -97,7 +90,6 @@ export const getNodesAndEdges = async ({
     const { nodes: serviceNodes, edges: serviceEdges } = await getServicesNodeAndEdges({
       id: service.id,
       version: service.version,
-      defaultFlow: flow,
       mode,
       renderAllEdges: true,
       channelRenderMode,
@@ -122,7 +114,6 @@ export const getNodesAndEdges = async ({
     const { nodes: agentNodes, edges: agentEdges } = await getAgentsNodeAndEdges({
       id: agent.id,
       version: agent.version,
-      defaultFlow: flow,
       mode,
       renderAllEdges: true,
       channelRenderMode,
@@ -139,7 +130,6 @@ export const getNodesAndEdges = async ({
     const { nodes: dataProductNodes, edges: dataProductEdges } = await getDataProductsNodeAndEdges({
       id: dataProduct.id,
       version: dataProduct.version,
-      defaultFlow: flow,
       mode,
       layout: false,
     });
@@ -154,7 +144,6 @@ export const getNodesAndEdges = async ({
     const { nodes: subDomainNodes, edges: subDomainEdges } = await getNodesAndEdges({
       id: subDomain.id,
       version: subDomain.version,
-      defaultFlow: flow,
       mode,
       group: true,
       channelRenderMode,
@@ -175,12 +164,6 @@ export const getNodesAndEdges = async ({
     });
   }
 
-  if (layout) {
-    layoutDagreGraph(flow);
-  }
-
-  return {
-    nodes: calculatedNodes(flow, Array.from(nodes.values())),
-    edges: [...edges.values()],
-  };
+  const graph = { nodes: [...nodes.values()], edges: [...edges.values()] };
+  return layout ? layoutNodeGraph(graph) : graph;
 };

package/eventcatalog/src/utils/node-graphs/export-mermaid.ts

@@ -33,8 +33,13 @@ const NODE_SHAPE_MAP: Record<string, [string, string]> = {
   channel: ['[(', ')]'],
   domains: ['[', ']'], // rectangle
   domain: ['[', ']'],
+  'context-domain': ['[', ']'], // another domain, shown as a single card
+  systems: ['[[', ']]'], // a system shown as a single node
+  'context-actor': ['((', '))'], // circle
   flows: ['([', '])'], // stadium (rounded)
   flow: ['([', '])'],
+  systems: ['[[', ']]'],
+  system: ['[[', ']]'],
   step: ['[', ']'], // rectangle
   user: ['((', '))'], // circle
   actor: ['((', '))'], // circle
@@ -50,6 +55,9 @@ const NODE_SHAPE_MAP: Record<string, [string, string]> = {
   note: ['[', ']'], // rectangle
 };
 
+/** Node types that are boundaries around other nodes, rendered as subgraphs */
+const GROUP_NODE_TYPES = new Set(['system-group', 'domain-group']);
+
 /**
  * Mermaid class definitions for styling different node types
  */
@@ -70,8 +78,13 @@ const NODE_STYLE_CLASSES: Record<string, string> = {
   channel: 'fill:#6b7280,stroke:#374151,color:#fff',
   domains: 'fill:#eab308,stroke:#a16207,color:#000',
   domain: 'fill:#eab308,stroke:#a16207,color:#000',
+  'context-domain': 'fill:#eab308,stroke:#a16207,color:#000',
+  systems: 'fill:#7c3aed,stroke:#5b21b6,color:#fff',
+  'context-actor': 'fill:#8b5cf6,stroke:#6d28d9,color:#fff',
   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',
@@ -172,6 +185,16 @@ export function getNodeLabel(node: Node): string {
     return formatLabelWithVersion(name, version);
   }
 
+  if (type === 'systems' || type === 'system-group') {
+    const system = (data as any).system;
+    return formatLabelWithVersion(system?.name || system?.id || node.id, system?.version);
+  }
+
+  if (type === 'context-domain' || type === 'domain-group') {
+    const domain = (data as any).domain;
+    return formatLabelWithVersion(domain?.name || domain?.id || node.id, domain?.version);
+  }
+
   if (type === 'domains' || type === 'domain') {
     const domain = (data as any).domain;
     // Domain data can be nested in .data
@@ -181,6 +204,13 @@ export function getNodeLabel(node: Node): string {
     return formatLabelWithVersion(name, version);
   }
 
+  if (type === 'systems' || type === 'system') {
+    const system = (data as any).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 as any).flow;
     const name = flow?.name || flow?.id || node.id;
@@ -219,6 +249,11 @@ export function getNodeLabel(node: Node): string {
     return entity?.name || entity?.id || node.id;
   }
 
+  if (type === 'custom') {
+    const custom = (data as any).custom ?? {};
+    return custom.title || (data as any).step?.title || node.id;
+  }
+
   if (type === 'note') {
     return (data as any).text || (data as any).label || 'Note';
   }
@@ -275,16 +310,37 @@ export function convertToMermaid(nodes: Node[], edges: Edge[], options: MermaidE
     });
   }
 
-  // Add node definitions
+  // Add node definitions. Nodes inside a group (a system or domain boundary)
+  // are nested in a subgraph for that group, so containment is kept
   lines.push('');
   lines.push('    %% Nodes');
 
+  const nodeIds = new Set(nodes.map((node) => node.id));
+  const childrenOf = new Map<string, Node[]>();
+  const topLevelNodes: Node[] = [];
   nodes.forEach((node) => {
+    if (node.parentId && nodeIds.has(node.parentId)) {
+      childrenOf.set(node.parentId, [...(childrenOf.get(node.parentId) ?? []), node]);
+    } else {
+      topLevelNodes.push(node);
+    }
+  });
+
+  const addNode = (node: Node, depth: number) => {
+    const indent = '    '.repeat(depth);
     const sanitizedId = sanitizeMermaidId(node.id);
     const label = escapeMermaidLabel(getNodeLabel(node));
-    const [prefix, suffix] = getMermaidNodeShape(node.type || 'custom');
+    const children = childrenOf.get(node.id);
 
-    let nodeLine = `    ${sanitizedId}${prefix}"${label}"${suffix}`;
+    if (children || GROUP_NODE_TYPES.has(node.type ?? '')) {
+      lines.push(`${indent}subgraph ${sanitizedId}["${label}"]`);
+      children?.forEach((child) => addNode(child, depth + 1));
+      lines.push(`${indent}end`);
+      return;
+    }
+
+    const [prefix, suffix] = getMermaidNodeShape(node.type || 'custom');
+    let nodeLine = `${indent}${sanitizedId}${prefix}"${label}"${suffix}`;
 
     // Add class reference if styles are enabled
     if (includeStyles && node.type && usedTypes.has(node.type)) {
@@ -292,7 +348,9 @@ export function convertToMermaid(nodes: Node[], edges: Edge[], options: MermaidE
     }
 
     lines.push(nodeLine);
-  });
+  };
+
+  topLevelNodes.forEach((node) => addNode(node, 1));
 
   // Add edge definitions
   lines.push('');

package/eventcatalog/src/utils/node-graphs/field-node-graph.ts

@@ -1,15 +1,6 @@
 import type { Node, Edge } from '@xyflow/react';
-import dagre from 'dagre';
-import {
-  createDagreGraph,
-  calculatedNodes,
-  createEdge,
-  createNode,
-  buildContextMenuForMessage,
-  buildContextMenuForService,
-  DEFAULT_NODE_WIDTH,
-  DEFAULT_NODE_HEIGHT,
-} from './utils/utils';
+import { createEdge, createNode, buildContextMenuForMessage, buildContextMenuForService } from './utils/utils';
+import { layoutNodeGraph } from '@utils/node-graphs/layout-node-graph';
 
 export interface FieldOccurrence {
   messageId: string;
@@ -28,15 +19,16 @@ interface Props {
   fieldType: string;
   occurrences: FieldOccurrence[];
   mode?: 'simple' | 'full';
+  layout?: boolean;
 }
 
-export const getNodesAndEdges = ({
+export const getNodesAndEdges = async ({
   fieldPath,
   fieldType,
   occurrences,
   mode = 'full',
-}: Props): { nodes: Node[]; edges: Edge[] } => {
-  const flow = createDagreGraph({ ranksep: 200, nodesep: 50 });
+  layout = true,
+}: Props): Promise<{ nodes: Node[]; edges: Edge[] }> => {
   const nodes: Node[] = [];
   const edges: Edge[] = [];
   const addedNodes = new Set<string>();
@@ -179,14 +171,7 @@ export const getNodesAndEdges = ({
     }
   }
 
-  // Apply layout
-  for (const node of nodes) {
-    flow.setNode(node.id, { width: DEFAULT_NODE_WIDTH, height: DEFAULT_NODE_HEIGHT });
-  }
-  for (const edge of edges) {
-    flow.setEdge(edge.source, edge.target);
-  }
-  dagre.layout(flow);
+  if (!layout) return { nodes, edges };
 
-  return { nodes: calculatedNodes(flow, nodes), edges };
+  return layoutNodeGraph({ nodes, edges });
 };

package/eventcatalog/src/utils/node-graphs/flow-lanes.ts

@@ -0,0 +1,119 @@
+import type { CollectionEntry } from 'astro:content';
+
+export type Lane = { id: string; name: string };
+
+/**
+ * The lanes a flow step's resource belongs to, for grouping a flow into
+ * swimlanes by domain, system or owning team. Only set for resources that
+ * belong somewhere themselves (services, agents, data stores, data products,
+ * systems);
+ * the visualiser puts other steps (messages, custom steps, sub-flows) in the
+ * lane of the step that leads to them. `external` steps (actors and external
+ * systems) get a lane of their own.
+ */
+export type StepLanes = {
+  domain?: Lane;
+  system?: Lane;
+  team?: Lane;
+  external?: boolean;
+};
+
+type LaneCollections = {
+  domains: CollectionEntry<'domains'>[];
+  systems: CollectionEntry<'systems'>[];
+  teams: CollectionEntry<'teams'>[];
+  users: CollectionEntry<'users'>[];
+};
+
+/** A resource a step points at (a service, agent, data store, data product or system) */
+type Resource = { data: { id: string; name?: string; owners?: (string | { id: string })[] } };
+
+// Lanes use the latest version of each domain and system (as the collection
+// utils do when they don't ask for every version)
+const isLatest = (entry: { filePath?: string }) => !entry.filePath?.includes('versioned');
+const toLane = (entry: Resource): Lane => ({ id: entry.data.id, name: entry.data.name || entry.data.id });
+const pointerIds = (pointers?: { id: string }[]) => (pointers || []).map((pointer) => pointer.id);
+
+/**
+ * Indexes which domain, system and team each resource belongs to (by id).
+ * A resource listed by a domain directly belongs to that domain, otherwise to
+ * the domain of the system it's in. Built once per flow from the collections,
+ * rather than asking `getDomainsForService`, `getOwner` and so on for each step,
+ * so it follows their rules: latest versions only, and hidden teams and users
+ * are left out.
+ */
+export const createLaneIndex = ({ domains, systems, teams, users }: LaneCollections) => {
+  const systemOf = new Map<string, Lane>();
+  const domainOf = new Map<string, Lane>();
+
+  const latestSystems = systems.filter(isLatest);
+  for (const system of latestSystems) {
+    for (const id of [...pointerIds(system.data.services), ...pointerIds(system.data.containers)]) {
+      if (!systemOf.has(id)) systemOf.set(id, toLane(system));
+    }
+  }
+
+  const latestDomains = domains.filter(isLatest);
+  // Resources a domain lists directly win over ones it gets through its systems
+  for (const domain of latestDomains) {
+    const direct = [
+      ...pointerIds(domain.data.services),
+      ...pointerIds(domain.data.agents),
+      ...pointerIds(domain.data['data-products']),
+      ...pointerIds(domain.data.systems),
+    ];
+    for (const id of direct) {
+      if (!domainOf.has(id)) domainOf.set(id, toLane(domain));
+    }
+  }
+  for (const system of latestSystems) {
+    const domain = domainOf.get(system.data.id);
+    if (!domain) continue;
+    for (const id of [...pointerIds(system.data.services), ...pointerIds(system.data.containers)]) {
+      if (!domainOf.has(id)) domainOf.set(id, domain);
+    }
+  }
+
+  const owners = new Map<string, { lane: Lane; isTeam: boolean }>();
+  const hiddenOwners = new Set<string>();
+  for (const [entries, isTeam] of [
+    [users, false],
+    [teams, true],
+  ] as const) {
+    for (const owner of entries) {
+      if (owner.data.hidden) hiddenOwners.add(owner.data.id);
+      else owners.set(owner.data.id, { lane: toLane(owner), isTeam });
+    }
+  }
+
+  // A team owner wins over a user owner
+  const teamOf = (resource: Resource): Lane | undefined => {
+    const resolved = (resource.data.owners || [])
+      .map((owner) => (typeof owner === 'string' ? owner : owner.id))
+      .filter((id) => !hiddenOwners.has(id))
+      .map((id) => owners.get(id) ?? { lane: { id, name: id }, isTeam: false })
+      .sort((a, b) => Number(b.isTeam) - Number(a.isTeam));
+    return resolved[0]?.lane;
+  };
+
+  const lanesFor = (resource: Resource): StepLanes | undefined => {
+    const id = resource.data.id;
+    const team = teamOf(resource);
+    const lanes: StepLanes = {
+      ...(domainOf.has(id) && { domain: domainOf.get(id) }),
+      ...(systemOf.has(id) && { system: systemOf.get(id) }),
+      ...(team && { team }),
+    };
+    return Object.keys(lanes).length > 0 ? lanes : undefined;
+  };
+
+  /** A system is in its own system lane (and the domain that lists it) */
+  const lanesForSystem = (system: Resource): StepLanes => ({
+    ...lanesFor(system),
+    system: toLane(system),
+  });
+
+  return { lanesFor, lanesForSystem };
+};
+
+export type LaneIndex = ReturnType<typeof createLaneIndex>;