@eventcatalog/core 0.2.6 → 0.2.9

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @eventcatalog/core
 
+## 0.2.9
+
+### Patch Changes
+
+- [`3740427`](https://github.com/boyney123/eventcatalog/commit/37404275e021c4d55ae43f5efbf12e321bf65025) [#230](https://github.com/boyney123/eventcatalog/pull/230) Thanks [@boyney123](https://github.com/boyney123)! - fix: visualiser now supports long names in diagram (again)
+
+## 0.2.8
+
+### Patch Changes
+
+- [`2985a14`](https://github.com/boyney123/eventcatalog/commit/2985a14ecdebb5f15ea0ff6512ee88f8863e676f) [#227](https://github.com/boyney123/eventcatalog/pull/227) Thanks [@boyney123](https://github.com/boyney123)! - feat: adding new node in visualiser to show all events and services
+
+## 0.2.7
+
+### Patch Changes
+
+- [`4e03a95`](https://github.com/boyney123/eventcatalog/commit/4e03a95f1420c36169232723f277e88b12c3d5f7) [#224](https://github.com/boyney123/eventcatalog/pull/224) Thanks [@boyney123](https://github.com/boyney123)! - feat: visualiser on click now sets query params
+
 ## 0.2.6
 
 ### Patch Changes

package/components/Mdx/NodeGraph/GraphElements.tsx

@@ -25,11 +25,23 @@ const buildNodeEdge = ({ id, target, source, label, isAnimated = true }): Edge =
   labelBgStyle: { fill: 'white', color: '#fff', fillOpacity: 0.5 },
 });
 
-const buildNodeData = ({ name, label, type, maxWidth }: { name: string; label: string; type: NODE_TYPES; maxWidth?: number }) => {
+const buildNodeData = ({
+  name,
+  label,
+  type,
+  maxWidth,
+  renderInColumn,
+}: {
+  name: string;
+  label: string;
+  type: NODE_TYPES;
+  maxWidth?: number;
+  renderInColumn?: number;
+}) => {
   const width = calcWidth(label);
   const linkType = type === 'service' ? 'services' : 'events';
   const link = generateLink(name, linkType);
-  return { label, link, width, maxWidth };
+  return { label, link, width, maxWidth, renderInColumn };
 };
 
 const getNodeLabel = ({ type, label, includeIcon }: { type: NODE_TYPES; label: any; includeIcon: boolean }) => {
@@ -77,7 +89,7 @@ export const getEventElements = (
     const labelToRender = getNodeLabel({ type: 'service', label, includeIcon: includeNodeIcons });
     return {
       id,
-      data: buildNodeData({ name: label, label: labelToRender, type: 'service', maxWidth: nodeMaxWidth }),
+      data: buildNodeData({ name: label, label: labelToRender, type: 'service', maxWidth: nodeMaxWidth, renderInColumn: 1 }),
       style: { border: `2px solid ${producerColor}`, width: nodeWidth, ...nodeStyles },
       type: 'input',
       position,
@@ -88,7 +100,7 @@ export const getEventElements = (
     const labelToRender = getNodeLabel({ type: 'service', label, includeIcon: includeNodeIcons });
     return {
       id,
-      data: buildNodeData({ name: label, label: labelToRender, type: 'service', maxWidth: maxConsumersWidth }),
+      data: buildNodeData({ name: label, label: labelToRender, type: 'service', maxWidth: maxConsumersWidth, renderInColumn: 3 }),
       style: { border: `2px solid ${consumerColor}`, width, ...nodeStyles },
       type: 'output',
       position,
@@ -102,6 +114,7 @@ export const getEventElements = (
       label: getNodeLabel({ type: 'event', label: eventName, includeIcon: includeNodeIcons }),
       type: 'event',
       maxWidth: eventNodeWidth,
+      renderInColumn: 2,
     }),
     style: {
       border: `2px solid ${rootNodeColor}`,
@@ -114,7 +127,7 @@ export const getEventElements = (
   // Build connections
   const producersEdges: Edge[] = producers.map(({ id, label }) =>
     buildNodeEdge({
-      id: `epe-${label.replace(/ /g, '_')}`,
+      id: `epe-${label.replace(/ /g, '_')}-${eventNameAsNodeID}`,
       source: id,
       target: eventNameAsNodeID,
       isAnimated,
@@ -123,7 +136,7 @@ export const getEventElements = (
   );
   const consumersEdges: Edge[] = consumers.map(({ id, label }) =>
     buildNodeEdge({
-      id: `ece-${label.replace(/ /g, '_')}`,
+      id: `ece-${label.replace(/ /g, '_')}-${eventNameAsNodeID}`,
       target: id,
       source: eventNameAsNodeID,
       isAnimated,
@@ -171,7 +184,13 @@ export const getServiceElements = (
     const labelToRender = getNodeLabel({ type: 'event', label: node.name, includeIcon: includeNodeIcons });
     return {
       id: `pub-${node.name.replace(/ /g, '_')}`,
-      data: buildNodeData({ name: node.name, label: labelToRender, type: 'event', maxWidth: maxPublishesWidth }),
+      data: buildNodeData({
+        name: node.name,
+        label: labelToRender,
+        type: 'event',
+        maxWidth: maxPublishesWidth,
+        renderInColumn: 3,
+      }),
       style: { border: `2px solid ${publishColor}`, width: nodeWidth, ...nodeStyles },
       type: 'output',
       position,
@@ -184,7 +203,14 @@ export const getServiceElements = (
     const labelToRender = getNodeLabel({ type: 'event', label: node.name, includeIcon: includeNodeIcons });
     return {
       id: `sub-${node.name.replace(/ /g, '_')}`,
-      data: buildNodeData({ name: node.name, label: labelToRender, type: 'event', maxWidth: nodeMaxWidth, ...nodeStyles }),
+      data: buildNodeData({
+        name: node.name,
+        label: labelToRender,
+        type: 'event',
+        maxWidth: nodeMaxWidth,
+        ...nodeStyles,
+        renderInColumn: 1,
+      }),
       style: {
         border: `2px solid ${subscribeColor}`,
         width: nodeWidth,
@@ -202,6 +228,7 @@ export const getServiceElements = (
       label: getNodeLabel({ type: 'service', label: serviceName, includeIcon: includeNodeIcons }),
       type: 'service',
       maxWidth: calcWidth(serviceName),
+      renderInColumn: 2,
     }),
     style: {
       border: `2px solid ${rootNodeColor}`,

package/components/Mdx/NodeGraph/GraphLayout.ts

@@ -6,6 +6,27 @@ const nodeDefaultHeight = 36;
 const offset = 48;
 const verticalOffset = offset / 1.5;
 
+const getMaxWidthElementFromPreviousColumn = (elements, column) => {
+  const elementsInColumn = elements.filter((element) => element?.data?.renderInColumn === column);
+
+  if (elementsInColumn.length === 0) return {};
+  if (elementsInColumn.length === 1) return elementsInColumn[0];
+
+  const maxWidthElement = elementsInColumn.reduce((currentElement, element) => {
+    const currentElementWidth = currentElement?.data?.maxWidth || currentElement?.data?.width || nodeDefaultWidth;
+    const elementWidth = element?.data?.maxWidth || element?.data.width || nodeDefaultWidth;
+    return elementWidth > currentElementWidth ? element : currentElement;
+  }, elementsInColumn[0]);
+
+  return maxWidthElement;
+};
+
+const getXPositionFromElement = (elem) => {
+  const elementWidth = elem?.data?.maxWidth || elem.width || nodeDefaultWidth;
+  const currentXPositionOfElement = elem.position.x;
+  return currentXPositionOfElement + elementWidth;
+};
+
 export default function createGraphLayout(elements: Elements, isHorizontal: boolean): Elements {
   const dagreGraph = new dagre.graphlib.Graph();
 
@@ -29,16 +50,43 @@ export default function createGraphLayout(elements: Elements, isHorizontal: bool
   // Calculate the layout, to get the node positions with their widths and heights
   dagre.layout(dagreGraph);
 
-  return elements.map((element) => {
+  const allNodes = elements.filter((element) => element.data);
+  const allEdges = elements.filter((element) => !element.data);
+
+  const sortedNodesByColumn = allNodes.sort((nodeA, nodeB) =>
+    // eslint-disable-next-line no-nested-ternary
+    nodeA.data.renderInColumn > nodeB.data.renderInColumn ? 1 : nodeB.data.renderInColumn > nodeA.data.renderInColumn ? -1 : 0
+  );
+  const allData = [...sortedNodesByColumn, ...allEdges];
+
+  return allData.map((element) => {
     if (isNode(element)) {
       const node = dagreGraph.node(element.id);
       element.targetPosition = isHorizontal ? Position.Left : Position.Top;
       element.sourcePosition = isHorizontal ? Position.Right : Position.Bottom;
+
+      const paddingBetweenNodes = element.data.renderInColumn > 1 ? 75 : 0;
+      const currentColumnToRenderIn = element?.data?.renderInColumn;
+      const maxWidthElementFromPreviousColumn = getMaxWidthElementFromPreviousColumn(elements, currentColumnToRenderIn - 1);
+
+      const nodeX =
+        Object.keys(maxWidthElementFromPreviousColumn).length > 0
+          ? getXPositionFromElement(maxWidthElementFromPreviousColumn)
+          : 0;
+
       element.position = {
-        x: offset / 2 + node.x - (element?.data?.maxWidth || node.width) / 2,
+        x: nodeX + paddingBetweenNodes,
         y: node.y - node.height / 2,
       };
+
+      // This is due to an issue with ReactFlow giving errors when we set the width in the styles.
+      if (element.style.width) {
+        if (element.style.width <= nodeDefaultWidth) {
+          element.style.width = undefined;
+        }
+      }
     }
+
     return element;
   });
 }

package/components/Mdx/NodeGraph/NodeGraph.tsx

@@ -1,13 +1,19 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import Link from 'next/link';
-import ReactFlow, { Controls, ReactFlowProvider, useStoreState, Background, useZoomPanHelper } from 'react-flow-renderer';
+import ReactFlow, { Controls, ReactFlowProvider, Background, useZoomPanHelper } from 'react-flow-renderer';
 import { Domain, Event, Service } from '@eventcatalog/types';
 import { getEventElements, getServiceElements } from './GraphElements';
 import createGraphLayout, { calcCanvasHeight } from './GraphLayout';
 
+interface CombinedEventsAndServices {
+  events: Event[];
+  services: Service[];
+  name?: string;
+}
+
 interface NodeGraphBuilderProps {
-  data: Event | Service | Domain;
-  source: 'event' | 'service' | 'domain';
+  data: Event | Service | Domain | CombinedEventsAndServices;
+  source: 'event' | 'service' | 'domain' | 'all';
   title?: string;
   subtitle?: string;
   rootNodeColor?: string;
@@ -44,14 +50,17 @@ function NodeGraphBuilder({
   title,
   subtitle,
 }: NodeGraphBuilderProps) {
-  const getElements = () => {
-    if (source === 'domain') {
-      const domainData = data as Domain;
-      const totalEventElements = domainData.events.map((event) => getEventElements(event, rootNodeColor, isAnimated, true, true));
-      const totalServiceElements = domainData.services.map((service) =>
+  const getElements = useCallback(() => {
+    if (source === 'domain' || source === 'all') {
+      const graphData = source === 'domain' ? (data as Domain) : (data as CombinedEventsAndServices);
+      const totalEventElements = graphData.events.map((event) => getEventElements(event, rootNodeColor, isAnimated, true, true));
+      const totalServiceElements = graphData.services.map((service) =>
         getServiceElements(service, rootNodeColor, isAnimated, true, true)
       );
-      return totalEventElements.flat().concat(totalServiceElements.flat());
+      const eventsWithServices = totalEventElements.flat().concat(totalServiceElements.flat());
+      // after we merge make sure all elements are unique for the diagram
+      // @ts-ignore
+      return [...new Map(eventsWithServices.map((item) => [item.id, item])).values()];
     }
 
     if (source === 'event') {
@@ -59,45 +68,19 @@ function NodeGraphBuilder({
     }
 
     return getServiceElements(data as Service, rootNodeColor, isAnimated, includeEdgeLabels, includeNodeIcons);
-  };
+  }, [data, includeEdgeLabels, includeNodeIcons, isAnimated, rootNodeColor, source]);
 
-  // Initialize graph layout
-  const isInitializedRef = useRef(false);
-  const nodes = useStoreState((state) => state.nodes);
-  const edges = useStoreState((state) => state.edges);
   const { fitView: resetView } = useZoomPanHelper();
 
-  // Calculate initial element layout
-  const graphElements = createGraphLayout(getElements(), isHorizontal);
-  const [elements, setElements] = useState(graphElements);
+  const [elements, setElements] = useState([]);
 
-  // if data changes, reset the elements
   useEffect(() => {
-    const updatedElements = createGraphLayout(getElements(), isHorizontal);
-    setElements(updatedElements);
+    const elementsForGraph = createGraphLayout(getElements(), isHorizontal);
+    setElements(elementsForGraph);
     setTimeout(() => {
       resetView();
     }, 1);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [data]);
-
-  // Rerender graph layout to get rendered width/height for nodes/edges
-  useEffect(() => {
-    if (
-      isInitializedRef.current === false &&
-      nodes.length > 0 &&
-      // eslint-disable-next-line no-underscore-dangle
-      nodes?.[0]?.__rf.width != null
-    ) {
-      // Calculate element layout
-      const updateElements = () => {
-        const updatedElements = createGraphLayout([...nodes, ...edges], isHorizontal);
-        setElements(updatedElements);
-        isInitializedRef.current = true;
-      };
-      updateElements();
-    }
-  }, [nodes, edges, isInitializedRef, isHorizontal]);
+  }, [data, getElements, isHorizontal, resetView]);
 
   // ReactFlow operations
   const onElementClick = (event, element) => window.open(element.data.link, '_self');

package/components/Mdx/NodeGraph/__tests__/__snapshots__/GraphElements.spec.ts.snap

@@ -7,6 +7,7 @@ Array [
       "label": "Service 1",
       "link": "/docs/services/Service 1",
       "maxWidth": -332,
+      "renderInColumn": 1,
       "width": 150,
     },
     "id": "pr-Service_1",
@@ -26,6 +27,7 @@ Array [
       "label": "Service 2",
       "link": "/docs/services/Service 2",
       "maxWidth": -332,
+      "renderInColumn": 1,
       "width": 150,
     },
     "id": "pr-Service_2",
@@ -45,6 +47,7 @@ Array [
       "label": "very very very very very very very very very very very very long name Service 3",
       "link": "/docs/services/very very very very very very very very very very very very long name Service 3",
       "maxWidth": 632,
+      "renderInColumn": 1,
       "width": 632,
     },
     "id": "pr-very_very_very_very_very_very_very_very_very_very_very_very_long_name_Service_3",
@@ -64,6 +67,7 @@ Array [
       "label": "My Event",
       "link": "/docs/events/My Event",
       "maxWidth": 150,
+      "renderInColumn": 2,
       "width": 150,
     },
     "id": "ev-My_Event",
@@ -82,6 +86,7 @@ Array [
       "label": "Service 4",
       "link": "/docs/services/Service 4",
       "maxWidth": 616,
+      "renderInColumn": 3,
       "width": 150,
     },
     "id": "co-Service_4",
@@ -101,6 +106,7 @@ Array [
       "label": "Service 5",
       "link": "/docs/services/Service 5",
       "maxWidth": 616,
+      "renderInColumn": 3,
       "width": 150,
     },
     "id": "co-Service_5",
@@ -120,6 +126,7 @@ Array [
       "label": "Service 6",
       "link": "/docs/services/Service 6",
       "maxWidth": 616,
+      "renderInColumn": 3,
       "width": 150,
     },
     "id": "co-Service_6",
@@ -139,6 +146,7 @@ Array [
       "label": "Service 7",
       "link": "/docs/services/Service 7",
       "maxWidth": 616,
+      "renderInColumn": 3,
       "width": 150,
     },
     "id": "co-Service_7",
@@ -158,6 +166,7 @@ Array [
       "label": "Service 8",
       "link": "/docs/services/Service 8",
       "maxWidth": 616,
+      "renderInColumn": 3,
       "width": 150,
     },
     "id": "co-Service_8",
@@ -177,6 +186,7 @@ Array [
       "label": "very.very.very.very.very.very.very.very.very.very.very.very.long.name.event.8",
       "link": "/docs/services/very.very.very.very.very.very.very.very.very.very.very.very.long.name.event.8",
       "maxWidth": 616,
+      "renderInColumn": 3,
       "width": 616,
     },
     "id": "co-very.very.very.very.very.very.very.very.very.very.very.very.long.name.event.8",
@@ -194,7 +204,7 @@ Array [
   Object {
     "animated": true,
     "arrowHeadType": "arrowclosed",
-    "id": "epe-Service_1",
+    "id": "epe-Service_1-ev-My_Event",
     "label": "",
     "labelBgBorderRadius": 4,
     "labelBgPadding": Array [
@@ -216,7 +226,7 @@ Array [
   Object {
     "animated": true,
     "arrowHeadType": "arrowclosed",
-    "id": "epe-Service_2",
+    "id": "epe-Service_2-ev-My_Event",
     "label": "",
     "labelBgBorderRadius": 4,
     "labelBgPadding": Array [
@@ -238,7 +248,7 @@ Array [
   Object {
     "animated": true,
     "arrowHeadType": "arrowclosed",
-    "id": "epe-very_very_very_very_very_very_very_very_very_very_very_very_long_name_Service_3",
+    "id": "epe-very_very_very_very_very_very_very_very_very_very_very_very_long_name_Service_3-ev-My_Event",
     "label": "",
     "labelBgBorderRadius": 4,
     "labelBgPadding": Array [
@@ -260,7 +270,7 @@ Array [
   Object {
     "animated": true,
     "arrowHeadType": "arrowclosed",
-    "id": "ece-Service_4",
+    "id": "ece-Service_4-ev-My_Event",
     "label": "",
     "labelBgBorderRadius": 4,
     "labelBgPadding": Array [
@@ -282,7 +292,7 @@ Array [
   Object {
     "animated": true,
     "arrowHeadType": "arrowclosed",
-    "id": "ece-Service_5",
+    "id": "ece-Service_5-ev-My_Event",
     "label": "",
     "labelBgBorderRadius": 4,
     "labelBgPadding": Array [
@@ -304,7 +314,7 @@ Array [
   Object {
     "animated": true,
     "arrowHeadType": "arrowclosed",
-    "id": "ece-Service_6",
+    "id": "ece-Service_6-ev-My_Event",
     "label": "",
     "labelBgBorderRadius": 4,
     "labelBgPadding": Array [
@@ -326,7 +336,7 @@ Array [
   Object {
     "animated": true,
     "arrowHeadType": "arrowclosed",
-    "id": "ece-Service_7",
+    "id": "ece-Service_7-ev-My_Event",
     "label": "",
     "labelBgBorderRadius": 4,
     "labelBgPadding": Array [
@@ -348,7 +358,7 @@ Array [
   Object {
     "animated": true,
     "arrowHeadType": "arrowclosed",
-    "id": "ece-Service_8",
+    "id": "ece-Service_8-ev-My_Event",
     "label": "",
     "labelBgBorderRadius": 4,
     "labelBgPadding": Array [
@@ -370,7 +380,7 @@ Array [
   Object {
     "animated": true,
     "arrowHeadType": "arrowclosed",
-    "id": "ece-very.very.very.very.very.very.very.very.very.very.very.very.long.name.event.8",
+    "id": "ece-very.very.very.very.very.very.very.very.very.very.very.very.long.name.event.8-ev-My_Event",
     "label": "",
     "labelBgBorderRadius": 4,
     "labelBgPadding": Array [
@@ -399,6 +409,7 @@ Array [
       "label": "Service 1",
       "link": "/docs/services/Service 1",
       "maxWidth": 150,
+      "renderInColumn": 1,
       "width": 150,
     },
     "id": "pr-Service_1",
@@ -418,6 +429,7 @@ Array [
       "label": "My Event",
       "link": "/docs/events/My Event",
       "maxWidth": 150,
+      "renderInColumn": 2,
       "width": 150,
     },
     "id": "ev-My_Event",
@@ -436,6 +448,7 @@ Array [
       "label": "Service 2",
       "link": "/docs/services/Service 2",
       "maxWidth": 150,
+      "renderInColumn": 3,
       "width": 150,
     },
     "id": "co-Service_2",
@@ -453,7 +466,7 @@ Array [
   Object {
     "animated": true,
     "arrowHeadType": "arrowclosed",
-    "id": "epe-Service_1",
+    "id": "epe-Service_1-ev-My_Event",
     "label": "",
     "labelBgBorderRadius": 4,
     "labelBgPadding": Array [
@@ -475,7 +488,7 @@ Array [
   Object {
     "animated": true,
     "arrowHeadType": "arrowclosed",
-    "id": "ece-Service_2",
+    "id": "ece-Service_2-ev-My_Event",
     "label": "",
     "labelBgBorderRadius": 4,
     "labelBgPadding": Array [
@@ -504,6 +517,7 @@ Array [
       "label": "very very very very very very very very very very very very long name event 5",
       "link": "/docs/events/very very very very very very very very very very very very long name event 5",
       "maxWidth": 616,
+      "renderInColumn": 1,
       "width": 616,
     },
     "id": "sub-very_very_very_very_very_very_very_very_very_very_very_very_long_name_event_5",
@@ -523,6 +537,7 @@ Array [
       "label": "My Event 6",
       "link": "/docs/events/My Event 6",
       "maxWidth": -316,
+      "renderInColumn": 1,
       "width": 150,
     },
     "id": "sub-My_Event_6",
@@ -542,6 +557,7 @@ Array [
       "label": "My Event 7",
       "link": "/docs/events/My Event 7",
       "maxWidth": -316,
+      "renderInColumn": 1,
       "width": 150,
     },
     "id": "sub-My_Event_7",
@@ -561,6 +577,7 @@ Array [
       "label": "My Event 8",
       "link": "/docs/events/My Event 8",
       "maxWidth": -316,
+      "renderInColumn": 1,
       "width": 150,
     },
     "id": "sub-My_Event_8",
@@ -580,6 +597,7 @@ Array [
       "label": "My Event 9",
       "link": "/docs/events/My Event 9",
       "maxWidth": -316,
+      "renderInColumn": 1,
       "width": 150,
     },
     "id": "sub-My_Event_9",
@@ -599,6 +617,7 @@ Array [
       "label": "My Service",
       "link": "/docs/services/My Service",
       "maxWidth": 150,
+      "renderInColumn": 2,
       "width": 150,
     },
     "id": "ser-My_Service",
@@ -617,6 +636,7 @@ Array [
       "label": "My Event",
       "link": "/docs/events/My Event",
       "maxWidth": 616,
+      "renderInColumn": 3,
       "width": 150,
     },
     "id": "pub-My_Event",
@@ -636,6 +656,7 @@ Array [
       "label": "My Event 2",
       "link": "/docs/events/My Event 2",
       "maxWidth": 616,
+      "renderInColumn": 3,
       "width": 150,
     },
     "id": "pub-My_Event_2",
@@ -655,6 +676,7 @@ Array [
       "label": "My Event 3",
       "link": "/docs/events/My Event 3",
       "maxWidth": 616,
+      "renderInColumn": 3,
       "width": 150,
     },
     "id": "pub-My_Event_3",
@@ -674,6 +696,7 @@ Array [
       "label": "very.very.very.very.very.very.very.very.very.very.very.very.long.name.event.4",
       "link": "/docs/events/very.very.very.very.very.very.very.very.very.very.very.very.long.name.event.4",
       "maxWidth": 616,
+      "renderInColumn": 3,
       "width": 616,
     },
     "id": "pub-very.very.very.very.very.very.very.very.very.very.very.very.long.name.event.4",
@@ -896,6 +919,7 @@ Array [
       "label": "My Event 2",
       "link": "/docs/events/My Event 2",
       "maxWidth": 150,
+      "renderInColumn": 1,
       "width": 150,
     },
     "id": "sub-My_Event_2",
@@ -915,6 +939,7 @@ Array [
       "label": "My Service",
       "link": "/docs/services/My Service",
       "maxWidth": 150,
+      "renderInColumn": 2,
       "width": 150,
     },
     "id": "ser-My_Service",
@@ -933,6 +958,7 @@ Array [
       "label": "My Event",
       "link": "/docs/events/My Event",
       "maxWidth": 150,
+      "renderInColumn": 3,
       "width": 150,
     },
     "id": "pub-My_Event",

package/components/Mdx/NodeGraph/__tests__/__snapshots__/GraphLayout.spec.ts.snap

@@ -11,13 +11,13 @@ Array [
     },
     "id": "s-My_Event_2",
     "position": Object {
-      "x": 24,
+      "x": 0,
       "y": 0,
     },
     "sourcePosition": "right",
     "style": Object {
       "border": "2px solid #75d7b6",
-      "width": 150,
+      "width": undefined,
     },
     "targetPosition": "left",
     "type": "input",
@@ -31,13 +31,13 @@ Array [
     },
     "id": "c-My_Service",
     "position": Object {
-      "x": 270,
+      "x": 0,
       "y": 0,
     },
     "sourcePosition": "right",
     "style": Object {
       "border": "2px solid #2563eb",
-      "width": 150,
+      "width": undefined,
     },
     "targetPosition": "left",
   },
@@ -50,13 +50,13 @@ Array [
     },
     "id": "p-My_Event",
     "position": Object {
-      "x": 516,
+      "x": 0,
       "y": 0,
     },
     "sourcePosition": "right",
     "style": Object {
       "border": "2px solid #818cf8",
-      "width": 150,
+      "width": undefined,
     },
     "targetPosition": "left",
     "type": "output",