@eventcatalog/visualiser 4.1.4 → 5.0.0-beta.0

package/dist/layout.d.mts

@@ -0,0 +1,74 @@
+import { Node, Edge } from '@xyflow/react';
+
+type LayoutGraph = {
+    nodes: Node[];
+    edges: Edge[];
+};
+type LayoutSize = {
+    width: number;
+    height: number;
+};
+type EdgeRoute = {
+    points: {
+        x: number;
+        y: number;
+    }[];
+    label?: {
+        x: number;
+        y: number;
+    };
+    /** Where the edge's source and target were laid out (top-left, in the flow) */
+    source?: {
+        x: number;
+        y: number;
+    };
+    target?: {
+        x: number;
+        y: number;
+    };
+};
+/** The size a node is laid out at: as rendered, or an estimate for its type */
+declare const getNodeSize: (node: Node) => LayoutSize;
+/**
+ * Lays a graph out with ELK (left to right). Nested groups (nodes other nodes
+ * have as their `parentId`) are laid out in one pass with their children.
+ * Edges are routed at right angles around nodes, each edge with its own
+ * connection point so edges don't run on top of each other, and labels are
+ * placed on their edge. Each edge keeps its type and gets its route (and label
+ * position) in `data.route`, which the visualiser's edges are drawn along.
+ *
+ * Node positions are top-left corners (nodes get `origin: [0, 0]`), children
+ * relative to their group. Groups are sized to fit their children.
+ */
+declare const layoutWithElk: ({ nodes, edges }: LayoutGraph, { sizeOf }?: {
+    sizeOf?: (node: Node) => LayoutSize;
+}) => Promise<LayoutGraph>;
+
+declare const isMessageNode: (node: Node) => boolean;
+/**
+ * Label for an edge carrying messages (name -> collection), e.g.
+ * "publishes\nProduct Created", "publishes\n3 events", "sends\n3 messages"
+ */
+declare const getMessagesLabel: (messages: Map<string, string>) => string | undefined;
+declare const isCarrier: (node: Node) => boolean;
+/**
+ * Removes the nodes `isHidden` picks. Messages and channels removed are
+ * bridged: the nodes either side of them are connected directly, labelled with
+ * the messages between them. Other edges to removed nodes go with them.
+ * e.g. hiding events, ServiceA -> OrderPlaced -> ServiceB becomes ServiceA -> ServiceB
+ */
+declare const hideNodes: (nodes: Node[], edges: Edge[], isHidden: (node: Node) => boolean) => {
+    nodes: Node[];
+    edges: Edge[];
+};
+/**
+ * Removes message nodes (events, commands, queries) and the channels they
+ * travel through, connecting the nodes on either side directly.
+ * e.g. ServiceA -> OrderPlaced -> orders-topic -> ServiceB becomes ServiceA -> ServiceB
+ */
+declare const hideMessageNodes: (nodes: Node[], edges: Edge[]) => {
+    nodes: Node[];
+    edges: Edge[];
+};
+
+export { type EdgeRoute, type LayoutGraph, type LayoutSize, getMessagesLabel, getNodeSize, hideMessageNodes, hideNodes, isCarrier, isMessageNode, layoutWithElk };

package/dist/layout.d.ts

@@ -0,0 +1,74 @@
+import { Node, Edge } from '@xyflow/react';
+
+type LayoutGraph = {
+    nodes: Node[];
+    edges: Edge[];
+};
+type LayoutSize = {
+    width: number;
+    height: number;
+};
+type EdgeRoute = {
+    points: {
+        x: number;
+        y: number;
+    }[];
+    label?: {
+        x: number;
+        y: number;
+    };
+    /** Where the edge's source and target were laid out (top-left, in the flow) */
+    source?: {
+        x: number;
+        y: number;
+    };
+    target?: {
+        x: number;
+        y: number;
+    };
+};
+/** The size a node is laid out at: as rendered, or an estimate for its type */
+declare const getNodeSize: (node: Node) => LayoutSize;
+/**
+ * Lays a graph out with ELK (left to right). Nested groups (nodes other nodes
+ * have as their `parentId`) are laid out in one pass with their children.
+ * Edges are routed at right angles around nodes, each edge with its own
+ * connection point so edges don't run on top of each other, and labels are
+ * placed on their edge. Each edge keeps its type and gets its route (and label
+ * position) in `data.route`, which the visualiser's edges are drawn along.
+ *
+ * Node positions are top-left corners (nodes get `origin: [0, 0]`), children
+ * relative to their group. Groups are sized to fit their children.
+ */
+declare const layoutWithElk: ({ nodes, edges }: LayoutGraph, { sizeOf }?: {
+    sizeOf?: (node: Node) => LayoutSize;
+}) => Promise<LayoutGraph>;
+
+declare const isMessageNode: (node: Node) => boolean;
+/**
+ * Label for an edge carrying messages (name -> collection), e.g.
+ * "publishes\nProduct Created", "publishes\n3 events", "sends\n3 messages"
+ */
+declare const getMessagesLabel: (messages: Map<string, string>) => string | undefined;
+declare const isCarrier: (node: Node) => boolean;
+/**
+ * Removes the nodes `isHidden` picks. Messages and channels removed are
+ * bridged: the nodes either side of them are connected directly, labelled with
+ * the messages between them. Other edges to removed nodes go with them.
+ * e.g. hiding events, ServiceA -> OrderPlaced -> ServiceB becomes ServiceA -> ServiceB
+ */
+declare const hideNodes: (nodes: Node[], edges: Edge[], isHidden: (node: Node) => boolean) => {
+    nodes: Node[];
+    edges: Edge[];
+};
+/**
+ * Removes message nodes (events, commands, queries) and the channels they
+ * travel through, connecting the nodes on either side directly.
+ * e.g. ServiceA -> OrderPlaced -> orders-topic -> ServiceB becomes ServiceA -> ServiceB
+ */
+declare const hideMessageNodes: (nodes: Node[], edges: Edge[]) => {
+    nodes: Node[];
+    edges: Edge[];
+};
+
+export { type EdgeRoute, type LayoutGraph, type LayoutSize, getMessagesLabel, getNodeSize, hideMessageNodes, hideNodes, isCarrier, isMessageNode, layoutWithElk };

package/dist/layout.js

@@ -0,0 +1,427 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/layout.ts
+var layout_exports = {};
+__export(layout_exports, {
+  getMessagesLabel: () => getMessagesLabel,
+  getNodeSize: () => getNodeSize,
+  hideMessageNodes: () => hideMessageNodes,
+  hideNodes: () => hideNodes,
+  isCarrier: () => isCarrier,
+  isMessageNode: () => isMessageNode,
+  layoutWithElk: () => layoutWithElk
+});
+module.exports = __toCommonJS(layout_exports);
+
+// src/utils/utils/utils.ts
+var import_react = require("@xyflow/react");
+var getEdgeLabelSize = (label) => {
+  if (typeof label !== "string" || !label.trim())
+    return { width: 0, height: 0 };
+  const lines = label.split("\n");
+  const longestLine = Math.max(...lines.map((line) => line.trim().length));
+  return { width: longestLine * 6 + 20, height: lines.length * 14 + 12 };
+};
+var createEdge = (edgeOptions) => {
+  return {
+    label: "subscribed by",
+    animated: false,
+    // markerStart: {
+    //   type: MarkerType.Arrow,
+    //   width: 40,
+    //   height: 40,
+    // },
+    markerEnd: {
+      type: import_react.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
+  };
+};
+
+// src/utils/elk-layout.ts
+var DEFAULT_SIZE = { width: 240, height: 112 };
+var NODE_SIZES = {
+  events: { width: 240, height: 104 },
+  commands: { width: 240, height: 126 },
+  queries: { width: 240, height: 126 },
+  services: { width: 240, height: 112 },
+  data: { width: 240, height: 108 },
+  systems: { width: 240, height: 120 },
+  system: { width: 240, height: 120 },
+  "context-domain": { width: 240, height: 112 },
+  "context-actor": { width: 180, height: 80 },
+  actor: { width: 180, height: 80 },
+  note: { width: 200, height: 150 },
+  step: { width: 240, height: 80 },
+  // Groups with nothing in them (groups with children are sized to fit them)
+  "domain-group": { width: 320, height: 160 },
+  "system-group": { width: 320, height: 160 }
+};
+var GROUP_TYPES = /* @__PURE__ */ new Set(["domain-group", "system-group", "group"]);
+var getNodeSize = (node) => {
+  if (node.measured?.width && node.measured?.height) {
+    return { width: node.measured.width, height: node.measured.height };
+  }
+  if (typeof node.width === "number" && typeof node.height === "number") {
+    return { width: node.width, height: node.height };
+  }
+  if (node.type === "domains" || node.type === "domain") {
+    const services = node.data?.domain?.data?.services || [];
+    return { width: 260, height: 60 + services.length * 40 };
+  }
+  return NODE_SIZES[node.type || ""] ?? DEFAULT_SIZE;
+};
+var GROUP_PADDING = "[top=100,left=40,bottom=40,right=40]";
+var SPACING = {
+  "elk.layered.spacing.nodeNodeBetweenLayers": "60",
+  "elk.spacing.nodeNode": "40",
+  "elk.spacing.edgeNode": "25",
+  "elk.spacing.edgeEdge": "15"
+};
+var LARGE_GRAPH_NODES = 80;
+var LARGE_GRAPH_EDGES = 200;
+var LARGE_GRAPH_OPTIONS = {
+  "elk.layered.nodePlacement.strategy": "BRANDES_KOEPF",
+  "elk.layered.thoroughness": "1",
+  "elk.layered.crossingMinimization.greedySwitch.type": "OFF"
+};
+var elk;
+var getElk = async () => {
+  if (!elk) {
+    const { default: ELK } = await import("elkjs/lib/elk.bundled.js");
+    elk = new ELK();
+  }
+  return elk;
+};
+var layoutWithElk = async ({ nodes, edges }, { sizeOf = getNodeSize } = {}) => {
+  const nodesById = new Map(nodes.map((node) => [node.id, node]));
+  const groupIds = new Set(
+    nodes.map((node) => node.parentId).filter((id) => !!id && nodesById.has(id))
+  );
+  const parentOf = (node) => node.parentId && groupIds.has(node.parentId) ? node.parentId : void 0;
+  const layoutEdges = edges.filter(
+    (edge) => nodesById.has(edge.source) && nodesById.has(edge.target)
+  );
+  const ports = /* @__PURE__ */ new Map();
+  const addPort = (nodeId, id, side) => {
+    const nodePorts = ports.get(nodeId) || [];
+    if (!nodePorts.some((port) => port.id === id)) {
+      ports.set(nodeId, [
+        ...nodePorts,
+        { id, layoutOptions: { "elk.port.side": side } }
+      ]);
+    }
+    return id;
+  };
+  const edgePorts = layoutEdges.map((edge, index) => ({
+    source: addPort(
+      edge.source,
+      edge.sourceHandle ? `${edge.source}__${edge.sourceHandle}` : `e${index}__out`,
+      "EAST"
+    ),
+    target: addPort(
+      edge.target,
+      edge.targetHandle ? `${edge.target}__${edge.targetHandle}` : `e${index}__in`,
+      "WEST"
+    )
+  }));
+  const toElkNode = (node) => ({
+    id: node.id,
+    ...groupIds.has(node.id) ? {
+      children: nodes.filter((child) => parentOf(child) === node.id).map(toElkNode)
+    } : sizeOf(node),
+    layoutOptions: {
+      "elk.portConstraints": "FIXED_SIDE",
+      ...groupIds.has(node.id) ? { "elk.padding": GROUP_PADDING, ...SPACING } : {},
+      // A node's own options (e.g. a group's padding) win
+      ...node.data?.layoutOptions ?? {}
+    },
+    ports: ports.get(node.id) || []
+  });
+  const layout = await (await getElk()).layout({
+    id: "root",
+    layoutOptions: {
+      "elk.algorithm": "layered",
+      "elk.direction": "RIGHT",
+      "elk.hierarchyHandling": "INCLUDE_CHILDREN",
+      "elk.edgeRouting": "ORTHOGONAL",
+      // Edge routes in absolute coordinates (node positions stay relative to their parent)
+      "elk.json.edgeCoords": "ROOT",
+      "elk.edgeLabels.placement": "CENTER",
+      ...SPACING,
+      ...nodes.length >= LARGE_GRAPH_NODES || edges.length >= LARGE_GRAPH_EDGES ? LARGE_GRAPH_OPTIONS : { "elk.layered.nodePlacement.strategy": "NETWORK_SIMPLEX" }
+    },
+    children: nodes.filter((node) => !parentOf(node)).map(toElkNode),
+    edges: layoutEdges.map((edge, index) => ({
+      id: `e${index}`,
+      sources: [edgePorts[index].source],
+      targets: [edgePorts[index].target],
+      // Labels sit on their edge, rather than beside it (only works set per label)
+      labels: edge.label ? [
+        {
+          text: String(edge.label),
+          ...getEdgeLabelSize(edge.label),
+          layoutOptions: { "elk.edgeLabels.inline": "true" }
+        }
+      ] : []
+    }))
+  });
+  const laidOut = /* @__PURE__ */ new Map();
+  const collect = (elkNode) => (elkNode.children || []).forEach((child) => {
+    laidOut.set(child.id, child);
+    collect(child);
+  });
+  collect(layout);
+  const absolute = (nodeId) => {
+    const node = nodesById.get(nodeId);
+    const parent = node && parentOf(node);
+    const offset = parent ? absolute(parent) : { x: 0, y: 0 };
+    const elkNode = laidOut.get(nodeId);
+    return { x: offset.x + (elkNode?.x ?? 0), y: offset.y + (elkNode?.y ?? 0) };
+  };
+  const routes = /* @__PURE__ */ new Map();
+  (layout.edges || []).forEach((elkEdge) => {
+    const section = elkEdge.sections?.[0];
+    if (!section) return;
+    const label = elkEdge.labels?.[0];
+    const edge = layoutEdges[Number(elkEdge.id.slice(1))];
+    routes.set(edge, {
+      points: [
+        section.startPoint,
+        ...section.bendPoints || [],
+        section.endPoint
+      ],
+      label: label ? {
+        x: (label.x ?? 0) + (label.width ?? 0) / 2,
+        y: (label.y ?? 0) + (label.height ?? 0) / 2
+      } : void 0,
+      source: absolute(edge.source),
+      target: absolute(edge.target)
+    });
+  });
+  const depth = (node) => {
+    const parent = node && parentOf(node);
+    return parent ? depth(nodesById.get(parent)) + 1 : 0;
+  };
+  return {
+    // Parents must come before their children in the array for React Flow
+    nodes: [...nodes].sort((a, b) => depth(a) - depth(b)).map((node) => {
+      const elkNode = laidOut.get(node.id);
+      if (!elkNode) return node;
+      return {
+        ...node,
+        origin: [0, 0],
+        position: { x: elkNode.x ?? 0, y: elkNode.y ?? 0 },
+        ...groupIds.has(node.id) || GROUP_TYPES.has(node.type || "") && typeof node.style?.width !== "number" ? {
+          style: {
+            ...node.style,
+            width: elkNode.width,
+            height: elkNode.height
+          },
+          // Re-measured at its new size
+          measured: void 0
+        } : {}
+      };
+    }),
+    edges: edges.map((edge) => {
+      const route = routes.get(edge);
+      return route ? { ...edge, data: { ...edge.data, route } } : edge;
+    })
+  };
+};
+
+// src/utils/hide-messages.ts
+var import_react2 = require("@xyflow/react");
+
+// src/nodes/node-types.ts
+var EVENT = ["event", "events"];
+var QUERY = ["queries", "query", "querie"];
+var COMMAND = ["command", "commands"];
+var MESSAGE = [...EVENT, ...COMMAND, ...QUERY];
+
+// src/utils/hide-messages.ts
+var MESSAGE_NODE_TYPES = [...MESSAGE, "messageGroup", "messageGroupExpanded"];
+var isMessageNode = (node) => MESSAGE_NODE_TYPES.includes(node.type || "");
+var getCollection = (type = "") => {
+  if (EVENT.includes(type)) return "events";
+  if (COMMAND.includes(type)) return "commands";
+  if (QUERY.includes(type)) return "queries";
+  return "messages";
+};
+var getMessages = (node) => {
+  const data = node.data;
+  if (node.type === "messageGroup") {
+    return (data?.messages || []).map(({ message: message2 }) => [
+      message2?.data?.name || message2?.data?.id,
+      getCollection(message2?.collection)
+    ]);
+  }
+  const message = data?.message;
+  return message ? [[message.name || message.id, getCollection(node.type)]] : [];
+};
+var VERBS = {
+  events: "publishes",
+  commands: "invokes",
+  queries: "requests"
+};
+var getMessagesLabel = (messages) => {
+  if (messages.size === 0) return void 0;
+  const collections = new Set(messages.values());
+  const collection = collections.size === 1 ? Array.from(collections)[0] : "messages";
+  const verb = VERBS[collection] || "sends";
+  const sent = messages.size === 1 ? Array.from(messages.keys())[0] : `${messages.size} ${collection}`;
+  return `${verb}
+${sent}`;
+};
+var isCarrier = (node) => isMessageNode(node) || node.type === "channels";
+var isCrossDomain = (edge) => !!edge.data?.crossDomain;
+var getRoute = (edge) => edge.data?.route;
+var joinRoutes = (routes) => {
+  if (!routes.every((route) => route && route.points.length > 0)) return;
+  const laidOut = routes;
+  const arrives = laidOut[0].points[laidOut[0].points.length - 1];
+  const leaves = laidOut[1].points[0];
+  return {
+    points: laidOut.flatMap((route) => route.points),
+    label: { x: (arrives.x + leaves.x) / 2, y: (arrives.y + leaves.y) / 2 },
+    source: laidOut[0].source,
+    target: laidOut[laidOut.length - 1].target
+  };
+};
+var hideNodes = (nodes, edges, isHidden) => {
+  const hiddenNodes = new Map(
+    nodes.filter(isHidden).map((node) => [node.id, node])
+  );
+  if (hiddenNodes.size === 0) return { nodes, edges };
+  const outgoingEdges = /* @__PURE__ */ new Map();
+  for (const edge of edges) {
+    const outgoing = outgoingEdges.get(edge.source) || [];
+    outgoing.push(edge);
+    outgoingEdges.set(edge.source, outgoing);
+  }
+  const keptEdges = [];
+  const bridgedEdges = /* @__PURE__ */ new Map();
+  for (const edge of edges) {
+    if (hiddenNodes.has(edge.source)) continue;
+    const target = hiddenNodes.get(edge.target);
+    if (!target) {
+      keptEdges.push(edge);
+      continue;
+    }
+    if (!isCarrier(target)) continue;
+    const stack = [
+      {
+        id: edge.target,
+        messages: [],
+        routes: [getRoute(edge)],
+        crossDomain: isCrossDomain(edge)
+      }
+    ];
+    const visited = /* @__PURE__ */ new Set();
+    while (stack.length > 0) {
+      const current = stack.pop();
+      if (visited.has(current.id)) continue;
+      visited.add(current.id);
+      const messages = [
+        ...current.messages,
+        ...getMessages(hiddenNodes.get(current.id))
+      ];
+      for (const next of outgoingEdges.get(current.id) || []) {
+        const routes = [...current.routes, getRoute(next)];
+        const crossDomain = current.crossDomain || isCrossDomain(next);
+        const nextNode = hiddenNodes.get(next.target);
+        if (nextNode) {
+          if (isCarrier(nextNode))
+            stack.push({ id: next.target, messages, routes, crossDomain });
+          continue;
+        }
+        if (next.target === edge.source) continue;
+        const id = `bridged-${edge.source}-${next.target}`;
+        const bridged = bridgedEdges.get(id) || {
+          source: edge.source,
+          target: next.target,
+          messages: /* @__PURE__ */ new Map(),
+          route: joinRoutes(routes),
+          crossDomain: false
+        };
+        bridged.crossDomain || (bridged.crossDomain = crossDomain);
+        messages.forEach(
+          ([name, collection]) => bridged.messages.set(name, collection)
+        );
+        bridgedEdges.set(id, bridged);
+      }
+    }
+  }
+  const newEdges = Array.from(
+    bridgedEdges,
+    ([id, bridged]) => createEdge({
+      id,
+      source: bridged.source,
+      target: bridged.target,
+      label: getMessagesLabel(bridged.messages),
+      // The same size arrow as the rest of the graph's edges
+      markerEnd: {
+        type: import_react2.MarkerType.ArrowClosed,
+        width: 20,
+        height: 20,
+        color: "rgb(var(--ec-page-text-muted))"
+      },
+      // Along the same route, and crossing domains if any edge it replaces did
+      data: {
+        ...bridged.route ? { route: bridged.route } : {},
+        ...bridged.crossDomain ? { crossDomain: true } : {}
+      }
+    })
+  );
+  return {
+    nodes: nodes.filter((node) => !hiddenNodes.has(node.id)),
+    edges: [...keptEdges, ...newEdges]
+  };
+};
+var hideMessageNodes = (nodes, edges) => hideNodes(nodes, edges, isCarrier);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getMessagesLabel,
+  getNodeSize,
+  hideMessageNodes,
+  hideNodes,
+  isCarrier,
+  isMessageNode,
+  layoutWithElk
+});
+//# sourceMappingURL=layout.js.map

package/dist/layout.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/layout.ts","../src/utils/utils/utils.ts","../src/utils/elk-layout.ts","../src/utils/hide-messages.ts","../src/nodes/node-types.ts"],"sourcesContent":["/**\n * Graph layout and transforms, without React components: used by EventCatalog\n * to lay graphs out on the server (`@eventcatalog/visualiser/layout`).\n */\nexport {\n  layoutWithElk,\n  getNodeSize,\n  type LayoutGraph,\n  type LayoutSize,\n  type EdgeRoute,\n} from \"./utils/elk-layout\";\nexport {\n  hideMessageNodes,\n  hideNodes,\n  getMessagesLabel,\n  isCarrier,\n  isMessageNode,\n} from \"./utils/hide-messages\";\n","// Can't use the CollectionEntry type from astro:content  because a client component is using this util\n\nimport { MarkerType, Position, type Edge, type Node } from \"@xyflow/react\";\n\ninterface BaseCollectionData {\n  id: string;\n  version: string;\n}\n\ninterface CollectionItem {\n  collection: string;\n  data: BaseCollectionData;\n}\n\ninterface MessageCollectionItem extends CollectionItem {\n  collection: \"commands\" | \"events\" | \"queries\";\n}\n\nexport const generateIdForNode = (node: CollectionItem) => {\n  return `${node.data.id}-${node.data.version}`;\n};\nexport const generateIdForNodes = (nodes: any) => {\n  return nodes\n    .map((node: any) => `${node.data.id}-${node.data.version}`)\n    .join(\"-\");\n};\nexport const generatedIdForEdge = (\n  source: CollectionItem,\n  target: CollectionItem,\n) => {\n  return `${source.data.id}-${source.data.version}-${target.data.id}-${target.data.version}`;\n};\n\nexport const getColorFromString = (id: string) => {\n  // Takes the given id (string) and returns a custom hex color based on the id\n  // Create a hash from the string\n  let hash = 0;\n  for (let i = 0; i < id.length; i++) {\n    hash = id.charCodeAt(i) + ((hash << 5) - hash);\n  }\n\n  // Convert the hash into a hex color\n  let color = \"#\";\n  for (let i = 0; i < 3; i++) {\n    const value = (hash >> (i * 8)) & 0xff;\n    color += value.toString(16).padStart(2, \"0\");\n  }\n\n  return color;\n};\n\nexport const getEdgeLabelForServiceAsTarget = (data: MessageCollectionItem) => {\n  const type = data.collection;\n  switch (type) {\n    case \"commands\":\n      return \"invokes\";\n    case \"events\":\n      return \"publishes \\nevent\";\n    case \"queries\":\n      return \"requests\";\n    default:\n      return \"sends to\";\n  }\n};\nexport const getEdgeLabelForMessageAsSource = (\n  data: MessageCollectionItem,\n  throughChannel = false,\n) => {\n  const type = data.collection;\n  switch (type) {\n    case \"commands\":\n      return \"accepts\";\n    case \"events\":\n      return throughChannel ? \"subscribed to\" : \"subscribed by\";\n    case \"queries\":\n      return \"accepts\";\n    default:\n      return \"sends to\";\n  }\n};\n\n/**\n * Rough size of an edge label, so the layout can leave room for it on its edge\n */\nexport const getEdgeLabelSize = (label: unknown) => {\n  if (typeof label !== \"string\" || !label.trim())\n    return { width: 0, height: 0 };\n  const lines = label.split(\"\\n\");\n  const longestLine = Math.max(...lines.map((line) => line.trim().length));\n  return { width: longestLine * 6 + 20, height: lines.length * 14 + 12 };\n};\n\nexport const createEdge = (edgeOptions: Edge): Edge => {\n  return {\n    label: \"subscribed by\",\n    animated: false,\n    // markerStart: {\n    //   type: MarkerType.Arrow,\n    //   width: 40,\n    //   height: 40,\n    // },\n    markerEnd: {\n      type: MarkerType.ArrowClosed,\n      width: 40,\n      height: 40,\n      color: \"rgb(var(--ec-page-text-muted))\",\n    },\n    style: {\n      strokeWidth: 1.5,\n      stroke: \"rgb(var(--ec-page-text-muted))\",\n      strokeDasharray: \"5 5\",\n    },\n    ...edgeOptions,\n  };\n};\n\nexport const createNode = (values: Node): Node => {\n  return {\n    sourcePosition: Position.Right,\n    targetPosition: Position.Left,\n    ...values,\n  };\n};\n","import type { Edge, Node } from \"@xyflow/react\";\nimport type {\n  ELK,\n  ElkExtendedEdge,\n  ElkNode,\n  ElkPort,\n  LayoutOptions,\n} from \"elkjs/lib/elk-api\";\nimport { getEdgeLabelSize } from \"./utils/utils\";\n\nexport type LayoutGraph = { nodes: Node[]; edges: Edge[] };\nexport type LayoutSize = { width: number; height: number };\nexport type EdgeRoute = {\n  points: { x: number; y: number }[];\n  label?: { x: number; y: number };\n  /** Where the edge's source and target were laid out (top-left, in the flow) */\n  source?: { x: number; y: number };\n  target?: { x: number; y: number };\n};\n\n// The size each node type renders at (at most), for nodes that haven't been\n// rendered (and measured) yet, e.g. when laying a graph out on the server\nconst DEFAULT_SIZE: LayoutSize = { width: 240, height: 112 };\nconst NODE_SIZES: Record<string, LayoutSize> = {\n  events: { width: 240, height: 104 },\n  commands: { width: 240, height: 126 },\n  queries: { width: 240, height: 126 },\n  services: { width: 240, height: 112 },\n  data: { width: 240, height: 108 },\n  systems: { width: 240, height: 120 },\n  system: { width: 240, height: 120 },\n  \"context-domain\": { width: 240, height: 112 },\n  \"context-actor\": { width: 180, height: 80 },\n  actor: { width: 180, height: 80 },\n  note: { width: 200, height: 150 },\n  step: { width: 240, height: 80 },\n  // Groups with nothing in them (groups with children are sized to fit them)\n  \"domain-group\": { width: 320, height: 160 },\n  \"system-group\": { width: 320, height: 160 },\n};\n\n// Nodes sized by their style, like groups: an empty one needs a size too\nconst GROUP_TYPES = new Set([\"domain-group\", \"system-group\", \"group\"]);\n\n/** The size a node is laid out at: as rendered, or an estimate for its type */\nexport const getNodeSize = (node: Node): LayoutSize => {\n  if (node.measured?.width && node.measured?.height) {\n    return { width: node.measured.width, height: node.measured.height };\n  }\n  if (typeof node.width === \"number\" && typeof node.height === \"number\") {\n    return { width: node.width, height: node.height };\n  }\n  // Domains list their services, so grow with them\n  if (node.type === \"domains\" || node.type === \"domain\") {\n    const services = (node.data as any)?.domain?.data?.services || [];\n    return { width: 260, height: 60 + services.length * 40 };\n  }\n  return NODE_SIZES[node.type || \"\"] ?? DEFAULT_SIZE;\n};\n\n// Room for a group's header above its children\nconst GROUP_PADDING = \"[top=100,left=40,bottom=40,right=40]\";\n\n// Space between nodes and edges. Set on every group as well as the graph, as\n// groups don't take it from the graph (they'd use ELK's much tighter defaults)\nconst SPACING = {\n  \"elk.layered.spacing.nodeNodeBetweenLayers\": \"60\",\n  \"elk.spacing.nodeNode\": \"40\",\n  \"elk.spacing.edgeNode\": \"25\",\n  \"elk.spacing.edgeEdge\": \"15\",\n};\n\n// Large graphs (e.g. a big domain) use cheaper settings: the nicest node\n// placement takes minutes on a few thousand edges, these take a second or two\nconst LARGE_GRAPH_NODES = 80;\nconst LARGE_GRAPH_EDGES = 200;\nconst LARGE_GRAPH_OPTIONS: LayoutOptions = {\n  \"elk.layered.nodePlacement.strategy\": \"BRANDES_KOEPF\",\n  \"elk.layered.thoroughness\": \"1\",\n  \"elk.layered.crossingMinimization.greedySwitch.type\": \"OFF\",\n};\n\nlet elk: ELK | undefined;\n// Loaded when first needed, so pages that never lay out in the browser don't download it\nconst getElk = async () => {\n  if (!elk) {\n    const { default: ELK } = await import(\"elkjs/lib/elk.bundled.js\");\n    elk = new ELK();\n  }\n  return elk;\n};\n\n/**\n * Lays a graph out with ELK (left to right). Nested groups (nodes other nodes\n * have as their `parentId`) are laid out in one pass with their children.\n * Edges are routed at right angles around nodes, each edge with its own\n * connection point so edges don't run on top of each other, and labels are\n * placed on their edge. Each edge keeps its type and gets its route (and label\n * position) in `data.route`, which the visualiser's edges are drawn along.\n *\n * Node positions are top-left corners (nodes get `origin: [0, 0]`), children\n * relative to their group. Groups are sized to fit their children.\n */\nexport const layoutWithElk = async (\n  { nodes, edges }: LayoutGraph,\n  { sizeOf = getNodeSize }: { sizeOf?: (node: Node) => LayoutSize } = {},\n): Promise<LayoutGraph> => {\n  const nodesById = new Map(nodes.map((node) => [node.id, node]));\n  const groupIds = new Set(\n    nodes\n      .map((node) => node.parentId)\n      .filter((id): id is string => !!id && nodesById.has(id)),\n  );\n  const parentOf = (node: Node) =>\n    node.parentId && groupIds.has(node.parentId) ? node.parentId : undefined;\n\n  // Each edge gets its own port, leaving from the right of its source and\n  // arriving at the left of its target, so ELK spreads edges out along a\n  // node's side rather than routing them all through one point. Edges to a\n  // specific handle (e.g. a service listed in a domain) share that handle's port.\n  const layoutEdges = edges.filter(\n    (edge) => nodesById.has(edge.source) && nodesById.has(edge.target),\n  );\n  const ports = new Map<string, ElkPort[]>();\n  const addPort = (\n    nodeId: string,\n    id: string,\n    side: \"EAST\" | \"WEST\",\n  ): string => {\n    const nodePorts = ports.get(nodeId) || [];\n    if (!nodePorts.some((port) => port.id === id)) {\n      ports.set(nodeId, [\n        ...nodePorts,\n        { id, layoutOptions: { \"elk.port.side\": side } },\n      ]);\n    }\n    return id;\n  };\n  const edgePorts = layoutEdges.map((edge, index) => ({\n    source: addPort(\n      edge.source,\n      edge.sourceHandle\n        ? `${edge.source}__${edge.sourceHandle}`\n        : `e${index}__out`,\n      \"EAST\",\n    ),\n    target: addPort(\n      edge.target,\n      edge.targetHandle\n        ? `${edge.target}__${edge.targetHandle}`\n        : `e${index}__in`,\n      \"WEST\",\n    ),\n  }));\n\n  const toElkNode = (node: Node): ElkNode => ({\n    id: node.id,\n    ...(groupIds.has(node.id)\n      ? {\n          children: nodes\n            .filter((child) => parentOf(child) === node.id)\n            .map(toElkNode),\n        }\n      : sizeOf(node)),\n    layoutOptions: {\n      \"elk.portConstraints\": \"FIXED_SIDE\",\n      ...(groupIds.has(node.id)\n        ? { \"elk.padding\": GROUP_PADDING, ...SPACING }\n        : {}),\n      // A node's own options (e.g. a group's padding) win\n      ...((node.data as { layoutOptions?: LayoutOptions } | undefined)\n        ?.layoutOptions ?? {}),\n    },\n    ports: ports.get(node.id) || [],\n  });\n\n  const layout = await (\n    await getElk()\n  ).layout({\n    id: \"root\",\n    layoutOptions: {\n      \"elk.algorithm\": \"layered\",\n      \"elk.direction\": \"RIGHT\",\n      \"elk.hierarchyHandling\": \"INCLUDE_CHILDREN\",\n      \"elk.edgeRouting\": \"ORTHOGONAL\",\n      // Edge routes in absolute coordinates (node positions stay relative to their parent)\n      \"elk.json.edgeCoords\": \"ROOT\",\n      \"elk.edgeLabels.placement\": \"CENTER\",\n      ...SPACING,\n      ...(nodes.length >= LARGE_GRAPH_NODES || edges.length >= LARGE_GRAPH_EDGES\n        ? LARGE_GRAPH_OPTIONS\n        : { \"elk.layered.nodePlacement.strategy\": \"NETWORK_SIMPLEX\" }),\n    },\n    children: nodes.filter((node) => !parentOf(node)).map(toElkNode),\n    edges: layoutEdges.map((edge, index) => ({\n      id: `e${index}`,\n      sources: [edgePorts[index].source],\n      targets: [edgePorts[index].target],\n      // Labels sit on their edge, rather than beside it (only works set per label)\n      labels: edge.label\n        ? [\n            {\n              text: String(edge.label),\n              ...getEdgeLabelSize(edge.label),\n              layoutOptions: { \"elk.edgeLabels.inline\": \"true\" },\n            },\n          ]\n        : [],\n    })),\n  });\n\n  const laidOut = new Map<string, ElkNode>();\n  const collect = (elkNode: ElkNode) =>\n    (elkNode.children || []).forEach((child) => {\n      laidOut.set(child.id, child);\n      collect(child);\n    });\n  collect(layout);\n\n  // Where a node was laid out in the flow (ELK positions are relative to the parent)\n  const absolute = (nodeId: string): { x: number; y: number } => {\n    const node = nodesById.get(nodeId);\n    const parent = node && parentOf(node);\n    const offset = parent ? absolute(parent) : { x: 0, y: 0 };\n    const elkNode = laidOut.get(nodeId);\n    return { x: offset.x + (elkNode?.x ?? 0), y: offset.y + (elkNode?.y ?? 0) };\n  };\n\n  const routes = new Map<Edge, EdgeRoute>();\n  (layout.edges || []).forEach((elkEdge: ElkExtendedEdge) => {\n    const section = elkEdge.sections?.[0];\n    if (!section) return;\n    const label = elkEdge.labels?.[0];\n    const edge = layoutEdges[Number(elkEdge.id.slice(1))];\n    routes.set(edge, {\n      points: [\n        section.startPoint,\n        ...(section.bendPoints || []),\n        section.endPoint,\n      ],\n      label: label\n        ? {\n            x: (label.x ?? 0) + (label.width ?? 0) / 2,\n            y: (label.y ?? 0) + (label.height ?? 0) / 2,\n          }\n        : undefined,\n      source: absolute(edge.source),\n      target: absolute(edge.target),\n    });\n  });\n\n  const depth = (node?: Node): number => {\n    const parent = node && parentOf(node);\n    return parent ? depth(nodesById.get(parent)) + 1 : 0;\n  };\n\n  return {\n    // Parents must come before their children in the array for React Flow\n    nodes: [...nodes]\n      .sort((a, b) => depth(a) - depth(b))\n      .map((node) => {\n        const elkNode = laidOut.get(node.id);\n        if (!elkNode) return node;\n        return {\n          ...node,\n          origin: [0, 0] as [number, number],\n          position: { x: elkNode.x ?? 0, y: elkNode.y ?? 0 },\n          ...(groupIds.has(node.id) ||\n          (GROUP_TYPES.has(node.type || \"\") &&\n            typeof node.style?.width !== \"number\")\n            ? {\n                style: {\n                  ...node.style,\n                  width: elkNode.width,\n                  height: elkNode.height,\n                },\n                // Re-measured at its new size\n                measured: undefined,\n              }\n            : {}),\n        };\n      }),\n    edges: edges.map((edge) => {\n      const route = routes.get(edge);\n      return route ? { ...edge, data: { ...edge.data, route } } : edge;\n    }),\n  };\n};\n","import { MarkerType, type Edge, type Node } from \"@xyflow/react\";\nimport { COMMAND, EVENT, MESSAGE, QUERY } from \"../nodes/node-types\";\nimport { createEdge } from \"./utils/utils\";\nimport type { EdgeRoute } from \"./elk-layout\";\n\nconst MESSAGE_NODE_TYPES = [...MESSAGE, \"messageGroup\", \"messageGroupExpanded\"];\n\nexport const isMessageNode = (node: Node) =>\n  MESSAGE_NODE_TYPES.includes(node.type || \"\");\n\nconst getCollection = (type = \"\") => {\n  if (EVENT.includes(type)) return \"events\";\n  if (COMMAND.includes(type)) return \"commands\";\n  if (QUERY.includes(type)) return \"queries\";\n  return \"messages\";\n};\n\n// Returns the messages a node represents, as [name, collection] pairs\nconst getMessages = (node: Node): [string, string][] => {\n  const data = node.data as any;\n  if (node.type === \"messageGroup\") {\n    return (data?.messages || []).map(({ message }: any) => [\n      message?.data?.name || message?.data?.id,\n      getCollection(message?.collection),\n    ]);\n  }\n  const message = data?.message;\n  return message\n    ? [[message.name || message.id, getCollection(node.type)]]\n    : [];\n};\n\nconst VERBS: Record<string, string> = {\n  events: \"publishes\",\n  commands: \"invokes\",\n  queries: \"requests\",\n};\n\n/**\n * Label for an edge carrying messages (name -> collection), e.g.\n * \"publishes\\nProduct Created\", \"publishes\\n3 events\", \"sends\\n3 messages\"\n */\nexport const getMessagesLabel = (messages: Map<string, string>) => {\n  if (messages.size === 0) return undefined;\n  const collections = new Set(messages.values());\n  const collection =\n    collections.size === 1 ? Array.from(collections)[0] : \"messages\";\n  const verb = VERBS[collection] || \"sends\";\n  const sent =\n    messages.size === 1\n      ? Array.from(messages.keys())[0]\n      : `${messages.size} ${collection}`;\n  return `${verb}\\n${sent}`;\n};\n\n// Messages and channels carry what's sent between the nodes either side of them\nexport const isCarrier = (node: Node) =>\n  isMessageNode(node) || node.type === \"channels\";\n\nconst isCrossDomain = (edge: Edge) =>\n  !!(edge.data as { crossDomain?: boolean } | undefined)?.crossDomain;\n\nconst getRoute = (edge: Edge) =>\n  (edge.data as { route?: EdgeRoute } | undefined)?.route;\n\n/**\n * The route of an edge bridging hidden nodes: along the routes of the edges it\n * replaces (through where the hidden nodes were), labelled where the first\n * hidden node was. None unless they're all laid out.\n */\nconst joinRoutes = (routes: (EdgeRoute | undefined)[]) => {\n  if (!routes.every((route) => route && route.points.length > 0)) return;\n  const laidOut = routes as EdgeRoute[];\n  const arrives = laidOut[0].points[laidOut[0].points.length - 1];\n  const leaves = laidOut[1].points[0];\n  return {\n    points: laidOut.flatMap((route) => route.points),\n    label: { x: (arrives.x + leaves.x) / 2, y: (arrives.y + leaves.y) / 2 },\n    source: laidOut[0].source,\n    target: laidOut[laidOut.length - 1].target,\n  };\n};\n\n/**\n * Removes the nodes `isHidden` picks. Messages and channels removed are\n * bridged: the nodes either side of them are connected directly, labelled with\n * the messages between them. Other edges to removed nodes go with them.\n * e.g. hiding events, ServiceA -> OrderPlaced -> ServiceB becomes ServiceA -> ServiceB\n */\nexport const hideNodes = (\n  nodes: Node[],\n  edges: Edge[],\n  isHidden: (node: Node) => boolean,\n) => {\n  const hiddenNodes = new Map(\n    nodes.filter(isHidden).map((node) => [node.id, node]),\n  );\n  if (hiddenNodes.size === 0) return { nodes, edges };\n\n  const outgoingEdges = new Map<string, Edge[]>();\n  for (const edge of edges) {\n    const outgoing = outgoingEdges.get(edge.source) || [];\n    outgoing.push(edge);\n    outgoingEdges.set(edge.source, outgoing);\n  }\n\n  const keptEdges: Edge[] = [];\n  const bridgedEdges = new Map<\n    string,\n    {\n      source: string;\n      target: string;\n      messages: Map<string, string>;\n      route?: EdgeRoute;\n      crossDomain: boolean;\n    }\n  >();\n\n  for (const edge of edges) {\n    if (hiddenNodes.has(edge.source)) continue;\n    const target = hiddenNodes.get(edge.target);\n    if (!target) {\n      keptEdges.push(edge);\n      continue;\n    }\n    if (!isCarrier(target)) continue;\n\n    // Follow the edge through hidden messages and channels until we reach\n    // visible nodes, collecting the names of the messages along the way\n    const stack = [\n      {\n        id: edge.target,\n        messages: [] as [string, string][],\n        routes: [getRoute(edge)],\n        crossDomain: isCrossDomain(edge),\n      },\n    ];\n    const visited = new Set<string>();\n    while (stack.length > 0) {\n      const current = stack.pop()!;\n      if (visited.has(current.id)) continue;\n      visited.add(current.id);\n      const messages = [\n        ...current.messages,\n        ...getMessages(hiddenNodes.get(current.id)!),\n      ];\n\n      for (const next of outgoingEdges.get(current.id) || []) {\n        const routes = [...current.routes, getRoute(next)];\n        const crossDomain = current.crossDomain || isCrossDomain(next);\n        const nextNode = hiddenNodes.get(next.target);\n        if (nextNode) {\n          if (isCarrier(nextNode))\n            stack.push({ id: next.target, messages, routes, crossDomain });\n          continue;\n        }\n        if (next.target === edge.source) continue;\n\n        // Prefixed, so it can't clash with an edge directly between the two\n        const id = `bridged-${edge.source}-${next.target}`;\n        const bridged = bridgedEdges.get(id) || {\n          source: edge.source,\n          target: next.target,\n          messages: new Map<string, string>(),\n          route: joinRoutes(routes),\n          crossDomain: false,\n        };\n        bridged.crossDomain ||= crossDomain;\n        messages.forEach(([name, collection]) =>\n          bridged.messages.set(name, collection),\n        );\n        bridgedEdges.set(id, bridged);\n      }\n    }\n  }\n\n  const newEdges = Array.from(bridgedEdges, ([id, bridged]) =>\n    createEdge({\n      id,\n      source: bridged.source,\n      target: bridged.target,\n      label: getMessagesLabel(bridged.messages),\n      // The same size arrow as the rest of the graph's edges\n      markerEnd: {\n        type: MarkerType.ArrowClosed,\n        width: 20,\n        height: 20,\n        color: \"rgb(var(--ec-page-text-muted))\",\n      },\n      // Along the same route, and crossing domains if any edge it replaces did\n      data: {\n        ...(bridged.route ? { route: bridged.route } : {}),\n        ...(bridged.crossDomain ? { crossDomain: true } : {}),\n      },\n    }),\n  );\n\n  return {\n    nodes: nodes.filter((node) => !hiddenNodes.has(node.id)),\n    edges: [...keptEdges, ...newEdges],\n  };\n};\n\n/**\n * Removes message nodes (events, commands, queries) and the channels they\n * travel through, connecting the nodes on either side directly.\n * e.g. ServiceA -> OrderPlaced -> orders-topic -> ServiceB becomes ServiceA -> ServiceB\n */\nexport const hideMessageNodes = (nodes: Node[], edges: Edge[]) =>\n  hideNodes(nodes, edges, isCarrier);\n","export const SERVICE = [\"service\", \"services\"];\nexport const AGENT = [\"agent\", \"agents\"];\nexport const AGENT_TOOL = [\"agentTool\", \"agent-tool\"];\nexport const EVENT = [\"event\", \"events\"];\nexport const QUERY = [\"queries\", \"query\", \"querie\"];\nexport const COMMAND = [\"command\", \"commands\"];\nexport const CHANNEL = [\"channel\", \"channels\"];\nexport const ACTOR = [\"actor\", \"actors\"];\nexport const DATA = [\"data\"];\nexport const VIEW = [\"view\"];\n\nexport const MESSAGE = [...EVENT, ...COMMAND, ...QUERY];\n"],"mappings":"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","names":["import_react","message"]}