@eventcatalog/core 4.12.2 → 5.0.0-beta.0

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

@@ -1,25 +1,20 @@
 import { getCollection, type CollectionEntry } from 'astro:content';
 import {
-  createDagreGraph,
-  calculatedNodes,
-  DEFAULT_NODE_WIDTH,
-  DEFAULT_NODE_HEIGHT,
   buildContextMenuForResource,
   buildContextMenuForService,
-  layoutDagreGraph,
+  buildContextMenuForSystem,
 } from '@utils/node-graphs/utils/utils';
+import { layoutNodeGraph } from '@utils/node-graphs/layout-node-graph';
 import { MarkerType } from '@xyflow/react';
 import type { Node as NodeType } from '@xyflow/react';
 import { createVersionedMap, findInMap } from '@utils/collections/util';
-
-type DagreGraph = any;
+import { createLaneIndex, type LaneIndex } from '@utils/node-graphs/flow-lanes';
 
 interface Props {
   id: string;
   version: string;
-  defaultFlow?: DagreGraph;
   mode?: 'simple' | 'full';
-  renderAllEdges?: boolean;
+  layout?: boolean;
 }
 
 interface Maps {
@@ -29,6 +24,9 @@ interface Maps {
   flowMap: Map<string, any[]>;
   containerMap: Map<string, any[]>;
   dataProductMap: Map<string, any[]>;
+  systemMap: Map<string, any[]>;
+  channelMap: Map<string, any[]>;
+  laneIndex: LaneIndex;
 }
 
 const getServiceNode = (step: any, serviceMap: Map<string, any[]>) => {
@@ -78,6 +76,25 @@ const getDataProductNode = (step: any, dataProductMap: Map<string, any[]>) => {
   };
 };
 
+const getSystemNode = (step: any, systemMap: Map<string, any[]>) => {
+  const pointer = step.systems || step.system;
+  const system = findInMap(systemMap, pointer.id, pointer.version);
+  return {
+    ...step,
+    type: system ? 'systems' : 'step',
+    system,
+  };
+};
+
+const getChannelNode = (step: any, channelMap: Map<string, any[]>) => {
+  const channel = findInMap(channelMap, step.channel.id, step.channel.version);
+  return {
+    ...step,
+    type: channel ? 'channels' : 'step',
+    channel,
+  };
+};
+
 const getMessageNode = (step: any, messageMap: Map<string, any[]>) => {
   const message = findInMap(messageMap, step.message.id, step.message.version);
   return {
@@ -87,6 +104,68 @@ const getMessageNode = (step: any, messageMap: Map<string, any[]>) => {
   };
 };
 
+// The whole graph is sent to the browser, so a step's resource is in its node's
+// data once (e.g. `data.service`), without what's only needed to build the
+// catalog (its markdown body, file path, ...), and the step is just the step
+const RESOURCE_KEYS = ['message', 'agent', 'service', 'flow', 'container', 'dataProduct', 'system', 'channel'];
+const resourceForNode = (entry: any) => {
+  // Only what the nodes read: its id, collection and frontmatter (nested, as
+  // e.g. the sub-flow node reads `flow.data`, and spread on top)
+  const { id, collection, data } = entry;
+  return { id, collection, data, ...data };
+};
+const stepForNode = (step: any) => {
+  const own = { ...step, ...step.data };
+  RESOURCE_KEYS.forEach((key) => delete own[key]);
+  return { ...own, title: titleOf(step) };
+};
+
+// A step without a title is named after what it points at (or its id). A
+// custom step is labelled with its own title first, as its node is.
+const titleOf = (step: any): string => {
+  if (step.custom?.title) return step.custom.title;
+  if (step.title) return step.title;
+  const resource = RESOURCE_KEYS.map((key) => step[key]).find((entry) => entry?.data);
+  return resource?.data.name || resource?.data.id || step.actor?.name || step.externalSystem?.name || String(step.id);
+};
+
+// Mistakes in a flow (a typo in a next step, a resource that was renamed)
+// would otherwise just drop an arrow or draw a plain box, so they're logged,
+// once each (a flow is drawn on several pages). Once per process on purpose:
+// in `astro dev` a problem that's fixed and then made again isn't logged again
+// until the server restarts, which is fine for a warning.
+const warned = new Set<string>();
+const warnOnce = (flow: any, problem: string) => {
+  const message = `[flows] Flow "${flow.data.id}" (${flow.data.version}): ${problem}`;
+  if (warned.has(message)) return;
+  warned.add(message);
+  console.warn(message);
+};
+
+// The keys a step points at a resource with, as authors write them
+const POINTER_KEYS: Record<string, string> = {
+  message: 'message',
+  agent: 'agent',
+  service: 'service',
+  systems: 'system',
+  system: 'system',
+  channel: 'channel',
+  flow: 'flow',
+  container: 'container',
+  dataProduct: 'data product',
+};
+const warnAboutMissingResource = (flow: any, step: any, hydrated: any) => {
+  for (const [key, kind] of Object.entries(POINTER_KEYS)) {
+    const pointer = step[key];
+    const resourceKey = key === 'systems' ? 'system' : key;
+    if (!pointer || hydrated[resourceKey]) continue;
+    warnOnce(
+      flow,
+      `step "${step.id}" points at ${kind} "${pointer.id}" (${pointer.version ?? 'latest'}), which is not in the catalog, so it is shown as a plain step.`
+    );
+  }
+};
+
 // Rewrite every id/source/target in a precomputed sub-flow graph with a
 // namespace prefix so inlined copies don't collide with the parent. Nested
 // `data.expandedNodes` / `data.expandedEdges` payloads are rewritten too so
@@ -129,9 +208,11 @@ const buildFlowGraphInternal = (
   const hydratedSteps = steps.map((step: any) => {
     if (step.agent) return getAgentNode(step, maps.agentMap);
     if (step.service) return getServiceNode(step, maps.serviceMap);
+    if (step.systems || step.system) return getSystemNode(step, maps.systemMap);
     if (step.flow) return getFlowNode(step, maps.flowMap);
     if (step.container) return getContainerNode(step, maps.containerMap);
     if (step.dataProduct) return getDataProductNode(step, maps.dataProductMap);
+    if (step.channel) return getChannelNode(step, maps.channelMap);
     if (step.message) return getMessageNode(step, maps.messageMap);
     if (step.actor) return { ...step, type: 'actor', actor: step.actor };
     if (step.custom) return { ...step, type: 'custom', custom: step.custom };
@@ -139,23 +220,26 @@ const buildFlowGraphInternal = (
     return { ...step, type: 'step' };
   });
 
-  hydratedSteps.forEach((step: any, index: number) => {
+  steps.forEach((step: any, index: number) => warnAboutMissingResource(flow, step, hydratedSteps[index]));
+  const stepIds = new Set(steps.map((step: any) => String(step.id)));
+
+  hydratedSteps.forEach((step: any) => {
     const node: NodeType = {
       id: stepNodeId(step.id),
       sourcePosition: 'right',
       targetPosition: 'left',
       data: {
         mode,
-        step: { ...step, ...step.data },
+        step: stepForNode(step),
         showTarget: true,
         showSource: true,
       },
-      position: { x: 250, y: index * 150 },
+      position: { x: 0, y: 0 },
       type: step.type,
     } as NodeType;
 
     if (step.agent) {
-      node.data.agent = { ...step.agent, ...step.agent.data };
+      node.data.agent = resourceForNode(step.agent);
       node.data.contextMenu = buildContextMenuForResource({
         collection: 'agents',
         id: step.agent.data.id,
@@ -163,7 +247,7 @@ const buildFlowGraphInternal = (
       });
     }
     if (step.service) {
-      node.data.service = { ...step.service, ...step.service.data };
+      node.data.service = resourceForNode(step.service);
       node.data.contextMenu = buildContextMenuForService({
         id: step.service.data.id,
         version: step.service.data.version,
@@ -171,8 +255,15 @@ const buildFlowGraphInternal = (
         repository: step.service.data.repository,
       });
     }
+    if (step.system?.data) {
+      node.data.system = resourceForNode(step.system);
+      node.data.contextMenu = buildContextMenuForSystem({
+        id: step.system.data.id,
+        version: step.system.data.version,
+      });
+    }
     if (step.flow) {
-      node.data.flow = { ...step.flow, ...step.flow.data };
+      node.data.flow = resourceForNode(step.flow);
       node.data.contextMenu = buildContextMenuForResource({
         collection: 'flows',
         id: step.flow.data.id,
@@ -195,7 +286,7 @@ const buildFlowGraphInternal = (
       }
     }
     if (step.message) {
-      node.data.message = { ...step.message, ...step.message.data };
+      node.data.message = resourceForNode(step.message);
       node.data.contextMenu = buildContextMenuForResource({
         collection: step.message.collection,
         id: step.message.data.id,
@@ -204,15 +295,23 @@ const buildFlowGraphInternal = (
     }
     if (step.container?.data) {
       node.data.data = { ...step.container.data };
-      node.data.container = { ...step.container, ...step.container.data };
+      node.data.container = resourceForNode(step.container);
       node.data.contextMenu = buildContextMenuForResource({
         collection: 'containers',
         id: step.container.data.id,
         version: step.container.data.version,
       });
     }
+    if (step.channel?.data) {
+      node.data.channel = resourceForNode(step.channel);
+      node.data.contextMenu = buildContextMenuForResource({
+        collection: 'channels',
+        id: step.channel.data.id,
+        version: step.channel.data.version,
+      });
+    }
     if (step.dataProduct?.data) {
-      node.data.dataProduct = { ...step.dataProduct, ...step.dataProduct.data };
+      node.data.dataProduct = resourceForNode(step.dataProduct);
       node.data.contextMenu = buildContextMenuForResource({
         collection: 'data-products',
         id: step.dataProduct.data.id,
@@ -225,6 +324,17 @@ const buildFlowGraphInternal = (
     }
     if (step.externalSystem) node.data.externalSystem = { ...step.externalSystem, ...step.externalSystem.data };
     if (step.custom) node.data.custom = { ...step.custom, ...step.custom.data };
+
+    // Which domain, system and team the step belongs to, for swimlanes
+    const resource = step.agent || step.service || step.container || step.dataProduct;
+    const lanes =
+      step.actor || step.externalSystem
+        ? { external: true }
+        : step.system?.data
+          ? maps.laneIndex.lanesForSystem(step.system)
+          : resource && maps.laneIndex.lanesFor(resource);
+    if (lanes) node.data.lanes = lanes;
+
     nodes.push(node);
   });
 
@@ -247,6 +357,10 @@ const buildFlowGraphInternal = (
     });
 
     paths.forEach((path: any) => {
+      if (!stepIds.has(String(path.id))) {
+        warnOnce(flow, `step "${step.id}" leads to step "${path.id}", but the flow has no step with that id.`);
+        return;
+      }
       edges.push({
         id: `step-${step.id}-step-${path.id}`,
         source: stepNodeId(step.id),
@@ -271,19 +385,23 @@ const buildFlowGraphInternal = (
   return { nodes, edges };
 };
 
-export const getNodesAndEdges = async ({ id, defaultFlow, version, mode = 'simple', renderAllEdges = false }: Props) => {
-  const graph = defaultFlow || createDagreGraph({ ranksep: 360, nodesep: 200 });
-
-  const [flows, events, commands, queries, agents, services, containers, dataProducts] = await Promise.all([
-    getCollection('flows'),
-    getCollection('events'),
-    getCollection('commands'),
-    getCollection('queries'),
-    getCollection('agents'),
-    getCollection('services'),
-    getCollection('containers'),
-    getCollection('data-products'),
-  ]);
+export const getNodesAndEdges = async ({ id, version, mode = 'simple', layout = true }: Props) => {
+  const [flows, events, commands, queries, agents, services, containers, dataProducts, domains, systems, channels, teams, users] =
+    await Promise.all([
+      getCollection('flows'),
+      getCollection('events'),
+      getCollection('commands'),
+      getCollection('queries'),
+      getCollection('agents'),
+      getCollection('services'),
+      getCollection('containers'),
+      getCollection('data-products'),
+      getCollection('domains'),
+      getCollection('systems'),
+      getCollection('channels'),
+      getCollection('teams'),
+      getCollection('users'),
+    ]);
 
   const flow = flows.find((flow) => flow.data.id === id && flow.data.version === version);
 
@@ -302,6 +420,9 @@ export const getNodesAndEdges = async ({ id, defaultFlow, version, mode = 'simpl
     flowMap: createVersionedMap(flows),
     containerMap: createVersionedMap(containers),
     dataProductMap: createVersionedMap(dataProducts),
+    systemMap: createVersionedMap(systems),
+    channelMap: createVersionedMap(channels),
+    laneIndex: createLaneIndex({ domains, systems, teams, users }),
   };
 
   const subFlowCache = new Map<string, { nodes: any[]; edges: any[] }>();
@@ -313,18 +434,5 @@ export const getNodesAndEdges = async ({ id, defaultFlow, version, mode = 'simpl
     new Set([`${flow.data.id}@${flow.data.version}`])
   );
 
-  nodes.forEach((node: any) => {
-    graph.setNode(node.id, { width: DEFAULT_NODE_WIDTH, height: DEFAULT_NODE_HEIGHT });
-  });
-
-  edges.forEach((edge: any) => {
-    graph.setEdge(edge.source, edge.target);
-  });
-
-  layoutDagreGraph(graph);
-
-  return {
-    nodes: calculatedNodes(graph, nodes),
-    edges: edges,
-  };
+  return layout ? await layoutNodeGraph({ nodes, edges }) : { nodes, edges };
 };

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

@@ -0,0 +1,28 @@
+import { hideMessageNodes, layoutWithElk } from '@eventcatalog/visualiser/layout';
+
+type Graph = { nodes: any[]; edges: any[] };
+
+/**
+ * Lays a node graph out for the visualiser (with ELK, left to right). Builders
+ * create their nodes and edges without positions and lay the finished graph
+ * out once with this. Nodes get top-left positions (`origin: [0, 0]`), groups
+ * (nodes with children) are sized to fit them, and edges get the route they're
+ * drawn along (`data.route`), with room for their labels.
+ */
+export const layoutNodeGraph = async <G extends Graph>(graph: G): Promise<G> => (await layoutWithElk(graph)) as unknown as G;
+
+/**
+ * Lays out the graphs of a levels page: level 1 (`overview`: domains, systems
+ * and their relationships), level 3 (the detailed graph, with messages and
+ * channels) and level 2 in between, the detailed graph with its messages and
+ * channels hidden (`hiddenMessages`), so the browser doesn't have to lay it out
+ * again. Without an overview there's no level 1.
+ */
+export const layoutLevels = async (detailed: Graph, overview?: Graph) => {
+  const [laidOut, laidOutOverview, hiddenMessages] = await Promise.all([
+    layoutNodeGraph(detailed),
+    overview && layoutNodeGraph(overview),
+    layoutNodeGraph(hideMessageNodes(detailed.nodes, detailed.edges)),
+  ]);
+  return { ...laidOut, overview: laidOutOverview, hiddenMessages };
+};

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

@@ -55,7 +55,7 @@ export async function loadSavedLayout(resourceKey: string): Promise<SavedLayout
 
 /**
  * Applies saved positions to nodes. Nodes with saved positions get them applied,
- * nodes without saved positions keep their Dagre-calculated positions.
+ * nodes without saved positions keep their laid out positions.
  */
 export function applyLayoutToNodes<T extends { id: string; position: { x: number; y: number } }>(
   nodes: T[],
@@ -63,7 +63,7 @@ export function applyLayoutToNodes<T extends { id: string; position: { x: number
 ): T[];
 export function applyLayoutToNodes(nodes: any[], savedLayout: SavedLayout | null): any[] {
   if (!savedLayout) {
-    return nodes; // No saved layout, use original Dagre positions
+    return nodes; // No saved layout, use the laid out positions
   }
 
   return nodes.map((node) => {
@@ -75,7 +75,7 @@ export function applyLayoutToNodes(nodes: any[], savedLayout: SavedLayout | null
         position: { x: savedPosition.x, y: savedPosition.y },
       };
     }
-    // Keep Dagre-calculated position for new/unmatched nodes
+    // Keep the laid out position for new/unmatched nodes
     return node;
   });
 }

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

@@ -2,8 +2,6 @@
 import { getEvents } from '@utils/collections/events';
 import { getCollection, type CollectionEntry } from 'astro:content';
 import {
-  calculatedNodes,
-  createDagreGraph,
   createEdge,
   generatedIdForEdge,
   generateIdForNode,
@@ -11,8 +9,8 @@ import {
   getEdgeLabelForMessageAsSource,
   getEdgeLabelForServiceAsTarget,
   versionMatches,
-  layoutDagreGraph,
 } from './utils/utils';
+import { layoutNodeGraph } from '@utils/node-graphs/layout-node-graph';
 import { MarkerType, type Node, type Edge } from '@xyflow/react';
 import {
   findMatchingNodes,
@@ -31,8 +29,6 @@ import {
   buildContextMenuForService,
   buildContextMenuForResource,
   getOperationFields,
-  DEFAULT_NODE_WIDTH,
-  DEFAULT_NODE_HEIGHT,
 } from './utils/utils';
 import { getConsumersOfMessage, getProducersOfMessage } from '@utils/collections/services';
 import {
@@ -44,16 +40,15 @@ import { getChannelChain, isChannelsConnected } from '@utils/collections/channel
 import { getChannels } from '@utils/collections/channels';
 import { getTriggeredByOfMessage, getTriggersOfMessage, type MessageReceiver } from '@utils/collections/message-triggers';
 
-type DagreGraph = any;
 type RoutableResource = CollectionEntry<'agents'> | CollectionEntry<'services'>;
 type ProducerConsumerResource = RoutableResource | CollectionEntry<'data-products'>;
 
 interface Props {
   id: string;
   version: string;
-  defaultFlow?: DagreGraph;
   mode?: 'simple' | 'full';
   channelRenderMode?: 'flat' | 'single';
+  layout?: boolean;
   collection?: CollectionEntry<CollectionMessageTypes>[];
   channels?: CollectionEntry<'channels'>[];
 }
@@ -216,15 +211,14 @@ export const createTriggerMessageNode = (
 const getNodesAndEdges = async ({
   id,
   version,
-  defaultFlow,
   mode = 'simple',
   channelRenderMode = 'flat',
   collection = [],
   channels = [],
+  layout = true,
 }: Props) => {
-  const flow = defaultFlow || createDagreGraph({ ranksep: 300, nodesep: 50 });
-  const nodes = [] as any,
-    edges = [] as any;
+  const nodes: any[] = [],
+    edges: any[] = [];
 
   const message = collection.find((message) => {
     return message.data.id === id && message.data.version === version;
@@ -297,7 +291,7 @@ const getNodesAndEdges = async ({
       sourcePosition: 'right',
       targetPosition: 'left',
       data: isDataProduct(producer) ? getDataProductNodeData(producer, mode) : getRoutableNodeData(producer, mode),
-      position: { x: 250, y: 0 },
+      position: { x: 0, y: 0 },
     });
     if (!isDataProduct(producer)) {
       appendAgentToolNodesAndEdges({ agent: producer, nodes, edges, mode });
@@ -684,54 +678,42 @@ const getNodesAndEdges = async ({
     appendEdge(relation.receiver, relation.message, getEdgeLabelForServiceAsTarget(relation.message), relation.message);
   }
 
-  nodes.forEach((node: any) => {
-    flow.setNode(node.id, { width: DEFAULT_NODE_WIDTH, height: DEFAULT_NODE_HEIGHT });
-  });
-
-  edges.forEach((edge: any) => {
-    flow.setEdge(edge.source, edge.target);
-  });
+  if (!layout) return { nodes, edges };
 
-  // Render the diagram in memory getting hte X and Y
-  layoutDagreGraph(flow);
-
-  return {
-    nodes: calculatedNodes(flow, nodes),
-    edges,
-  };
+  return layoutNodeGraph({ nodes, edges });
 };
 
 export const getNodesAndEdgesForQueries = async ({
   id,
   version,
-  defaultFlow,
   mode = 'simple',
   channelRenderMode = 'flat',
+  layout = true,
 }: Props) => {
   const [queries, channels] = await Promise.all([getQueries(), getChannels()]);
-  return getNodesAndEdges({ id, version, defaultFlow, mode, channelRenderMode, collection: queries, channels });
+  return getNodesAndEdges({ id, version, mode, channelRenderMode, collection: queries, channels, layout });
 };
 
 export const getNodesAndEdgesForCommands = async ({
   id,
   version,
-  defaultFlow,
   mode = 'simple',
   channelRenderMode = 'flat',
+  layout = true,
 }: Props) => {
   const [commands, channels] = await Promise.all([getCommands(), getChannels()]);
-  return getNodesAndEdges({ id, version, defaultFlow, mode, channelRenderMode, collection: commands, channels });
+  return getNodesAndEdges({ id, version, mode, channelRenderMode, collection: commands, channels, layout });
 };
 
 export const getNodesAndEdgesForEvents = async ({
   id,
   version,
-  defaultFlow,
   mode = 'simple',
   channelRenderMode = 'flat',
+  layout = true,
 }: Props) => {
   const [events, channels] = await Promise.all([getEvents(), getChannels()]);
-  return getNodesAndEdges({ id, version, defaultFlow, mode, channelRenderMode, collection: events, channels });
+  return getNodesAndEdges({ id, version, mode, channelRenderMode, collection: events, channels, layout });
 };
 
 export const getNodesAndEdgesForConsumedMessage = ({
@@ -756,7 +738,7 @@ export const getNodesAndEdgesForConsumedMessage = ({
   channelMap?: Map<string, CollectionEntry<'channels'>[]>;
 }) => {
   let nodes = [] as Node[],
-    edges = [] as any;
+    edges: any[] = [];
 
   // Use the provided map or create one if missing
   const map = channelMap || createVersionedMap(channels);
@@ -1092,7 +1074,7 @@ export const getNodesAndEdgesForProducedMessage = ({
   channelMap?: Map<string, CollectionEntry<'channels'>[]>;
 }) => {
   let nodes = [] as Node[],
-    edges = [] as any;
+    edges: any[] = [];
 
   // Use provided map or create one
   const map = channelMap || createVersionedMap(channels);

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

@@ -1,20 +1,16 @@
 import { getCollection, type CollectionEntry } from 'astro:content';
 import {
-  createDagreGraph,
   generateIdForNode,
   generatedIdForEdge,
-  calculatedNodes,
   createEdge,
   buildContextMenuForAgent,
   buildContextMenuForService,
   buildContextMenuForResource,
   versionMatches,
-  DEFAULT_NODE_WIDTH,
-  DEFAULT_NODE_HEIGHT,
   partitionMessagesByGroup,
   getOperationFields,
-  layoutDagreGraph,
 } from '@utils/node-graphs/utils/utils';
+import { layoutNodeGraph } from '@utils/node-graphs/layout-node-graph';
 
 const sanitizeGroupId = (name: string) => name.replace(/[^a-zA-Z0-9]/g, '-').toLowerCase();
 const sanitizeToolId = (name: string) =>
@@ -108,12 +104,9 @@ const precomputeGroupExpansion = (
   return { expandedNodes, expandedEdges };
 };
 
-type DagreGraph = any;
-
 interface Props {
   id: string;
   version: string;
-  defaultFlow?: DagreGraph;
   mode?: 'simple' | 'full';
   renderAllEdges?: boolean;
   channelRenderMode?: 'single' | 'flat';
@@ -172,7 +165,6 @@ const getReceivesMessageByMessageType = (messageType: string) => {
 
 export const getNodesAndEdges = async ({
   id,
-  defaultFlow,
   version,
   mode = 'simple',
   renderAllEdges = false,
@@ -181,7 +173,6 @@ export const getNodesAndEdges = async ({
   collection = 'services',
   layout = true,
 }: Props) => {
-  const flow = defaultFlow || createDagreGraph({ ranksep: 300, nodesep: 50 });
   let nodes = [] as any,
     edges = [] as any;
 
@@ -282,6 +273,7 @@ export const getNodesAndEdges = async ({
 
       nodes.push({
         id: groupNodeId,
+        position: { x: 0, y: 0 },
         sourcePosition: 'right',
         targetPosition: 'left',
         type: 'messageGroup',
@@ -345,6 +337,7 @@ export const getNodesAndEdges = async ({
   // The service itself
   nodes.push({
     id: generateIdForNode(service),
+    position: { x: 0, y: 0 },
     sourcePosition: 'right',
     targetPosition: 'left',
     data: {
@@ -358,6 +351,7 @@ export const getNodesAndEdges = async ({
   writesTo.forEach((writeTo) => {
     nodes.push({
       id: generateIdForNode(writeTo),
+      position: { x: 0, y: 0 },
       sourcePosition: 'right',
       targetPosition: 'left',
       data: {
@@ -398,6 +392,7 @@ export const getNodesAndEdges = async ({
 
       nodes.push({
         id: toolNodeId,
+        position: { x: 0, y: 0 },
         sourcePosition: 'right',
         targetPosition: 'left',
         data: {
@@ -447,6 +442,7 @@ export const getNodesAndEdges = async ({
   readsFrom.forEach((readFrom) => {
     nodes.push({
       id: generateIdForNode(readFrom),
+      position: { x: 0, y: 0 },
       sourcePosition: 'right',
       targetPosition: 'left',
       data: {
@@ -500,6 +496,7 @@ export const getNodesAndEdges = async ({
 
       nodes.push({
         id: groupNodeId,
+        position: { x: 0, y: 0 },
         sourcePosition: 'right',
         targetPosition: 'left',
         type: 'messageGroup',
@@ -626,19 +623,6 @@ export const getNodesAndEdges = async ({
 
   const uniqueNodes = Array.from(uniqueNodesById.values());
 
-  uniqueNodes.forEach((node: any) => {
-    flow.setNode(node.id, { width: DEFAULT_NODE_WIDTH, height: DEFAULT_NODE_HEIGHT });
-  });
-
-  edges.forEach((edge: any) => {
-    flow.setEdge(edge.source, edge.target);
-  });
-
-  if (layout) {
-    // Render the diagram in memory getting the X and Y
-    layoutDagreGraph(flow);
-  }
-
   // Find any duplicated edges, and merge them into one edge
   const uniqueEdgesById = new Map<string, any>();
   edges.forEach((edge: any) => {
@@ -661,8 +645,10 @@ export const getNodesAndEdges = async ({
   });
   const uniqueEdges = Array.from(uniqueEdgesById.values());
 
-  return {
-    nodes: calculatedNodes(flow, uniqueNodes),
+  const graph = {
+    nodes: uniqueNodes.map((node: any) => ({ ...node, position: node.position ?? { x: 0, y: 0 } })),
     edges: uniqueEdges,
   };
+
+  return layout ? await layoutNodeGraph(graph) : graph;
 };