@eventcatalog/core 3.48.4 → 4.0.0-beta.1

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

@@ -0,0 +1,208 @@
+import { getCollection } from 'astro:content';
+import dagre from 'dagre';
+import { createDagreGraph, calculatedNodes, DEFAULT_NODE_WIDTH, DEFAULT_NODE_HEIGHT } from '@utils/node-graphs/utils/utils';
+import { getNodesAndEdges as getServicesNodeAndEdges } from './services-node-graph';
+import { getNodesAndEdges as getContainerNodeAndEdges } from './container-node-graph';
+import merge from 'lodash.merge';
+import { createVersionedMap, findInMap } from '@utils/collections/util';
+
+type DagreGraph = any;
+
+interface NodesAndEdgesProps {
+  id: string;
+  version: string;
+  defaultFlow?: DagreGraph;
+  mode?: 'simple' | 'full';
+  group?: boolean;
+  // When true, wraps the whole system graph in a single parent boundary node
+  // labelled with the system name. Used by the standalone System Diagram.
+  wrapInSystemGroup?: boolean;
+  channelRenderMode?: 'single' | 'flat';
+  layout?: boolean;
+}
+
+export const getNodesAndEdges = async ({
+  id,
+  version,
+  defaultFlow,
+  mode = 'simple',
+  group = false,
+  wrapInSystemGroup = false,
+  channelRenderMode = 'flat',
+  layout = true,
+}: NodesAndEdgesProps) => {
+  const flow = defaultFlow || createDagreGraph({ ranksep: 360, nodesep: 50, edgesep: 50 });
+  let nodes = new Map(),
+    edges = new Map();
+
+  // 1. Parallel Fetching
+  const [systems, services, containers] = await Promise.all([
+    getCollection('systems'),
+    getCollection('services'),
+    getCollection('containers'),
+  ]);
+
+  const system = systems.find((s) => s.data.id === id && s.data.version === version);
+
+  // Nothing found...
+  if (!system) {
+    return {
+      nodes: [],
+      edges: [],
+    };
+  }
+
+  // 2. Build optimized maps
+  const serviceMap = createVersionedMap(services);
+  const containerMap = createVersionedMap(containers);
+
+  const rawServices = system?.data.services || [];
+
+  // Optimized hydration
+  const systemServicesWithVersion = rawServices
+    .map((service) => findInMap(serviceMap, service.id, service.version))
+    .filter((s): s is any => !!s)
+    .map((svc) => ({ id: svc.data.id, version: svc.data.version }));
+
+  // Hydrate the data stores (containers) mapped directly to the system
+  const systemContainersWithVersion = (system?.data.containers || [])
+    .map((container) => findInMap(containerMap, container.id, container.version))
+    .filter((c): c is any => !!c)
+    .map((container) => ({ id: container.data.id, version: container.data.version }));
+
+  // Grab the node-graph for each service in the system and merge them into one graph
+  for (const service of systemServicesWithVersion) {
+    const { nodes: serviceNodes, edges: serviceEdges } = await getServicesNodeAndEdges({
+      id: service.id,
+      version: service.version,
+      defaultFlow: flow,
+      mode,
+      renderAllEdges: true,
+      channelRenderMode,
+      layout: false,
+    });
+
+    serviceNodes.forEach((n) => {
+      /**
+       * A message could be sent by one service and received by another service in the same system.
+       * So, we need to deep merge the message to keep the `showSource` and `showTarget` as true.
+       */
+      nodes.set(n.id, nodes.has(n.id) ? merge(nodes.get(n.id), n) : n);
+    });
+    // @ts-ignore
+    serviceEdges.forEach((e) => edges.set(e.id, e));
+  }
+
+  // Grab the node-graph for each data store (container) in the system and merge them into one graph.
+  // This renders the data store along with the services that read from / write to it, the same way
+  // services are merged above.
+  for (const container of systemContainersWithVersion) {
+    const { nodes: containerNodes, edges: containerEdges } = await getContainerNodeAndEdges({
+      id: container.id,
+      version: container.version,
+      defaultFlow: flow,
+      mode,
+      channelRenderMode,
+      layout: false,
+    });
+
+    containerNodes.forEach((n) => {
+      nodes.set(n.id, nodes.has(n.id) ? merge(nodes.get(n.id), n) : n);
+    });
+    // @ts-ignore
+    containerEdges.forEach((e) => edges.set(e.id, e));
+  }
+
+  // Add group node to the graph (used when a system is rendered inside another view)
+  if (group) {
+    nodes.forEach((n) => {
+      nodes.set(n.id, { ...n, data: { ...n.data, group: { type: 'System', value: system?.data.name, id: system?.data.id } } });
+    });
+  }
+
+  if (layout) {
+    dagre.layout(flow);
+  }
+
+  let laidOutNodes = calculatedNodes(flow, Array.from(nodes.values()));
+
+  // Wrap everything inside a single parent "system group" boundary node, so all
+  // the services / data stores / messages visibly belong to one system. We only
+  // do this when this graph owns its own layout (`layout` true) — when it's
+  // being merged into a larger graph (e.g. a domain view) the host owns grouping.
+  if (wrapInSystemGroup && layout && laidOutNodes.length > 0) {
+    laidOutNodes = wrapNodesInSystemGroup(laidOutNodes, flow, system);
+  }
+
+  return {
+    nodes: laidOutNodes,
+    edges: [...edges.values()],
+  };
+};
+
+// Padding around the children inside the group box, and headroom for the header banner.
+const GROUP_PADDING_X = 100;
+const GROUP_PADDING_Y = 100;
+const GROUP_HEADER_HEIGHT = 64;
+
+/**
+ * Wraps a set of already-laid-out nodes in one parent `system-group` node.
+ *
+ * The rest of the app uses dagre's node position directly as the ReactFlow
+ * position, so we stay in that same coordinate space. Child nodes under a
+ * `parentId` are positioned relative to the parent, so we:
+ *   1. compute the bounding box of all nodes (using dagre position + size),
+ *   2. create a parent group node at the box origin (minus padding/header),
+ *   3. re-home every node as a child, offset by the group origin.
+ */
+const wrapNodesInSystemGroup = (laidOutNodes: any[], flow: DagreGraph, system: any) => {
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+
+  for (const node of laidOutNodes) {
+    const dims = flow.node(node.id) || {};
+    const width = dims.width ?? DEFAULT_NODE_WIDTH;
+    const height = dims.height ?? DEFAULT_NODE_HEIGHT;
+
+    minX = Math.min(minX, node.position.x);
+    minY = Math.min(minY, node.position.y);
+    maxX = Math.max(maxX, node.position.x + width);
+    maxY = Math.max(maxY, node.position.y + height);
+  }
+
+  // Origin of the group box (room for padding + the header banner at the top).
+  const groupX = minX - GROUP_PADDING_X;
+  const groupY = minY - GROUP_PADDING_Y - GROUP_HEADER_HEIGHT;
+  const groupWidth = maxX - minX + GROUP_PADDING_X * 2;
+  const groupHeight = maxY - minY + GROUP_PADDING_Y * 2 + GROUP_HEADER_HEIGHT;
+
+  const groupId = `system-group-${system.data.id}-${system.data.version}`;
+
+  const groupNode = {
+    id: groupId,
+    type: 'system-group',
+    position: { x: groupX, y: groupY },
+    draggable: false,
+    selectable: false,
+    style: { width: groupWidth, height: groupHeight },
+    data: {
+      system: { name: system.data.name, version: system.data.version },
+    },
+  };
+
+  // Re-home each node as a child, with its position relative to the group origin.
+  const childNodes = laidOutNodes.map((node) => ({
+    ...node,
+    parentId: groupId,
+    extent: 'parent',
+    position: {
+      x: node.position.x - groupX,
+      y: node.position.y - groupY,
+    },
+  }));
+
+  // Parent must come before its children in the array for ReactFlow.
+  return [groupNode, ...childNodes];
+};

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

@@ -324,6 +324,18 @@ export const buildContextMenuForResource = ({
   ];
 };
 
+/**
+ * Context menu for a system node on the System Diagram.
+ * Offers the system's documentation, its architecture map, and its own context view.
+ */
+export const buildContextMenuForSystem = ({ id, version }: { id: string; version: string }): ContextMenuItem[] => {
+  return [
+    { label: 'Read documentation', href: buildUrl(`/docs/systems/${id}/${version}`) },
+    { label: 'View map', href: buildUrl(`/visualiser/systems/${id}/${version}`) },
+    { label: 'View context', href: buildUrl(`/visualiser/systems/${id}/${version}/context`) },
+  ];
+};
+
 /**
  * Extracts operation fields (method, path, statusCodes) from a message's
  * `operation` frontmatter and returns them as top-level props the visualiser expects.

package/eventcatalog/src/utils/page-loaders/page-data-loader.ts

@@ -2,6 +2,7 @@ import type { CollectionTypes, PageTypes } from '@types';
 import { getAgents } from '@utils/collections/agents';
 import { getChannels } from '@utils/collections/channels';
 import { getDomains } from '@utils/collections/domains';
+import { getSystems } from '@utils/collections/systems';
 import { getCommands, getEvents } from '@utils/collections/messages';
 import { getQueries } from '@utils/collections/queries';
 import { getServices } from '@utils/collections/services';
@@ -24,6 +25,7 @@ export const pageDataLoader: Record<PageTypes, (options?: PageDataLoaderOptions)
     queries: getQueries,
     services: getServices,
     domains: getDomains,
+    systems: getSystems,
     channels: getChannels,
     flows: getFlows,
     entities: getEntities,

package/package.json

@@ -7,7 +7,7 @@
   },
   "license": "SEE LICENSE IN LICENSE",
   "type": "module",
-  "version": "3.48.4",
+  "version": "4.0.0-beta.1",
   "publishConfig": {
     "access": "public"
   },
@@ -23,6 +23,9 @@
   },
   "files": [
     "eventcatalog/",
+    "!eventcatalog/.astro/",
+    "!eventcatalog/dist/",
+    "!eventcatalog/node_modules/",
     "!eventcatalog/**/__tests__/",
     "bin/",
     "dist/"
@@ -30,9 +33,9 @@
   "dependencies": {
     "@ai-sdk/react": "^3.0.17",
     "@astrojs/markdown-remark": "^7.2.0",
-    "@astrojs/mdx": "^6.0.3",
-    "@astrojs/node": "^10.1.4",
-    "@astrojs/react": "^5.0.7",
+    "@astrojs/mdx": "^7.0.0",
+    "@astrojs/node": "^11.0.0",
+    "@astrojs/react": "^6.0.0",
     "@astrojs/rss": "^4.0.18",
     "@asyncapi/avro-schema-parser": "3.0.24",
     "@asyncapi/parser": "^3.6.0",
@@ -54,13 +57,13 @@
     "@radix-ui/react-tooltip": "^1.1.8",
     "@scalar/api-reference-react": "^0.9.36",
     "@tailwindcss/typography": "^0.5.16",
-    "@tailwindcss/vite": ">=4.1.5 <4.2.2",
+    "@tailwindcss/vite": "^4.3.1",
     "@tanstack/react-table": "^8.17.3",
     "@xyflow/react": "^12.3.6",
     "ai": "^6.0.17",
-    "astro": "^6.4.7",
+    "astro": "^7.0.3",
     "astro-compress": "^2.4.0",
-    "astro-expressive-code": "^0.41.7",
+    "astro-expressive-code": "^0.44.0",
     "astro-seo": "^0.8.4",
     "auth-astro": "^4.2.0",
     "boxen": "^8.0.1",
@@ -94,7 +97,7 @@
     "react-syntax-highlighter": "^15.6.6",
     "recast": "^0.23.11",
     "rehype-autolink-headings": "^7.1.0",
-    "rehype-expressive-code": "^0.41.7",
+    "rehype-expressive-code": "^0.44.0",
     "rehype-slug": "^6.0.0",
     "remark-comment": "^1.0.0",
     "remark-directive": "^3.0.0",
@@ -105,15 +108,15 @@
     "sonner": "^2.0.7",
     "sql.js": "^1.12.0",
     "svg-pan-zoom": "^3.6.2",
-    "tailwindcss": "^4.1.5",
+    "tailwindcss": "^4.3.1",
     "typescript": "^5.4.5",
     "unist-util-visit": "^5.0.0",
     "update-notifier": "^7.3.1",
     "uuid": "^10.0.0",
     "zod": "^4.3.6",
-    "@eventcatalog/visualiser": "^3.22.1",
-    "@eventcatalog/sdk": "2.24.2",
-    "@eventcatalog/linter": "1.1.1"
+    "@eventcatalog/linter": "1.1.2-beta.0",
+    "@eventcatalog/sdk": "2.25.0-beta.0",
+    "@eventcatalog/visualiser": "^4.0.0-beta.0"
   },
   "devDependencies": {
     "@astrojs/check": "^0.9.9",
@@ -123,7 +126,7 @@
     "@types/jsonwebtoken": "^9.0.10",
     "@types/lodash.debounce": "^4.0.9",
     "@types/lodash.merge": "4.6.9",
-    "@types/node": "^20.14.2",
+    "@types/node": "^22.12.0",
     "@types/pako": "^2.0.3",
     "@types/react": "^19.2.13",
     "@types/react-dom": "^19.2.3",
@@ -135,7 +138,7 @@
     "prettier": "^3.3.3",
     "prettier-plugin-astro": "^0.14.1",
     "tsup": "^8.1.0",
-    "vite": "^7.1.11",
+    "vite": "^8.1.0",
     "vite-tsconfig-paths": "^4.3.2",
     "vitest": "^4.0.18"
   },

package/eventcatalog/src/pages/visualiser/context-map/index.astro

@@ -1,30 +0,0 @@
----
-import NodeGraph from '@components/MDX/NodeGraph/NodeGraph.astro';
-import { ClientRouter } from 'astro:transitions';
-import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
----
-
-<VerticalSideBarLayout title={`Visualiser | Bounded context map`}>
-  <div class="m-4">
-    <div
-      class="h-[calc(100vh-130px)] w-full relative border border-[rgb(var(--ec-page-border))] rounded-md"
-      id={`domain-context-map-portal`}
-      transition:animate="fade"
-    >
-    </div>
-    <NodeGraph
-      id="domain-context-map"
-      collection="domain-context-map"
-      title="Bounded context map"
-      mode="full"
-      linkTo="visualiser"
-      version="1.0.0"
-      linksToVisualiser={false}
-      href={{
-        label: ``,
-        url: '/',
-      }}
-    />
-  </div>
-  <ClientRouter />
-</VerticalSideBarLayout>