@eventcatalog/core 2.64.3 → 2.65.0-beta.0

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

@@ -6,11 +6,12 @@ import {
   generatedIdForEdge,
   calculatedNodes,
   createEdge,
-  getChannelNodesAndEdges,
 } from '@utils/node-graphs/utils/utils';
+
 import { findMatchingNodes, getItemsFromCollectionByIdAndSemverOrLatest } from '@utils/collections/util';
 import { MarkerType } from '@xyflow/react';
 import type { CollectionMessageTypes } from '@types';
+import { getNodesAndEdgesForConsumedMessage, getNodesAndEdgesForProducedMessage } from './message-node-graph';
 
 type DagreGraph = any;
 
@@ -119,42 +120,20 @@ export const getNodesAndEdges = async ({
   if (renderMessages) {
     // All the messages the service receives
     receives.forEach((receive) => {
-      // Create the node for the message
-      nodes.push({
-        id: generateIdForNode(receive),
-        type: receive?.collection,
-        sourcePosition: 'right',
-        targetPosition: 'left',
-        data: { mode, message: { ...receive.data } },
+      const targetChannels = receivesRaw.find((receiveRaw) => receiveRaw.id === receive.data.id)?.from;
+
+      const { nodes: consumedMessageNodes, edges: consumedMessageEdges } = getNodesAndEdgesForConsumedMessage({
+        message: receive,
+        targetChannels: targetChannels,
+        services,
+        currentNodes: nodes,
+        target: service,
+        mode,
+        channels,
       });
 
-      // does the message have channels defined?
-      if (receive.data.channels) {
-        const { nodes: channelNodes, edges: channelEdges } = getChannelNodesAndEdges({
-          channels,
-          channelsToRender: receive.data.channels,
-          source: receive,
-          channelToTargetLabel: getReceivesMessageByMessageType(receive?.collection),
-          target: service,
-          mode,
-          currentNodes: nodes,
-          channelRenderMode,
-        });
-
-        nodes.push(...channelNodes);
-        edges.push(...channelEdges);
-      } else {
-        // No channels, just link the message to the service
-        edges.push(
-          createEdge({
-            id: generatedIdForEdge(receive, service),
-            source: generateIdForNode(receive),
-            target: generateIdForNode(service),
-            label: getReceivesMessageByMessageType(receive?.collection),
-            data: { message: { ...receive.data } },
-          })
-        );
-      }
+      nodes.push(...consumedMessageNodes);
+      edges.push(...consumedMessageEdges);
     });
   }
 
@@ -230,42 +209,22 @@ export const getNodesAndEdges = async ({
   });
 
   if (renderMessages) {
-    // The messages the service sends
-    sends.forEach((send, index) => {
-      nodes.push({
-        id: generateIdForNode(send),
-        sourcePosition: 'right',
-        targetPosition: 'left',
-        data: { mode, message: { ...send.data } },
-        type: send?.collection,
+    sends.forEach((send) => {
+      const sourceChannels = sendsRaw.find((sendRaw) => sendRaw.id === send.data.id)?.to;
+
+      const { nodes: producedMessageNodes, edges: producedMessageEdges } = getNodesAndEdgesForProducedMessage({
+        message: send,
+        sourceChannels: sourceChannels,
+        services,
+        currentNodes: nodes,
+        source: service,
+        currentEdges: edges,
+        mode,
+        channels,
       });
 
-      if (send.data.channels) {
-        const { nodes: channelNodes, edges: channelEdges } = getChannelNodesAndEdges({
-          channels,
-          channelsToRender: send.data.channels,
-          source: service,
-          target: send,
-          mode,
-          sourceToChannelLabel: `${getSendsMessageByMessageType(send?.collection)}`,
-          channelToTargetLabel: getSendsMessageByMessageType(send?.collection),
-          currentNodes: nodes,
-          channelRenderMode,
-        });
-        nodes.push(...channelNodes);
-        edges.push(...channelEdges);
-      } else {
-        // No channels, just link the message to the service
-        edges.push(
-          createEdge({
-            id: generatedIdForEdge(service, send),
-            source: generateIdForNode(service),
-            target: generateIdForNode(send),
-            label: getSendsMessageByMessageType(send?.collection),
-            data: { message: { ...send.data } },
-          })
-        );
-      }
+      nodes.push(...producedMessageNodes);
+      edges.push(...producedMessageEdges);
     });
 
     // Handle messages that are both sent and received
@@ -325,8 +284,25 @@ export const getNodesAndEdges = async ({
   // Render the diagram in memory getting the X and Y
   dagre.layout(flow);
 
+  // Find any duplicated edges, and merge them into one edge
+  const uniqueEdges = edges.reduce((acc: any[], edge: any) => {
+    const existingEdge = acc.find((e: any) => e.id === edge.id);
+    if (existingEdge) {
+      existingEdge.label = `${existingEdge.label} & ${edge.label}`;
+      // Add the custom colors to the existing edge which can be an array of strings
+      const value = Array.isArray(edge.data.customColor) ? edge.data.customColor : [edge.data.customColor];
+      const existingValue = Array.isArray(existingEdge.data.customColor)
+        ? existingEdge.data.customColor
+        : [existingEdge.data.customColor];
+      existingEdge.data.customColor = [...value, ...existingValue];
+    } else {
+      acc.push(edge);
+    }
+    return acc;
+  }, []);
+
   return {
     nodes: calculatedNodes(flow, nodes),
-    edges,
+    edges: uniqueEdges,
   };
 };

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

@@ -27,26 +27,44 @@ export const generatedIdForEdge = (source: CollectionItem, target: CollectionIte
   return `${source.data.id}-${source.data.version}-${target.data.id}-${target.data.version}`;
 };
 
+export const getColorFromString = (id: string) => {
+  // Takes the given id (string) and returns a custom hex color based on the id
+  // Create a hash from the string
+  let hash = 0;
+  for (let i = 0; i < id.length; i++) {
+    hash = id.charCodeAt(i) + ((hash << 5) - hash);
+  }
+
+  // Convert the hash into a hex color
+  let color = '#';
+  for (let i = 0; i < 3; i++) {
+    const value = (hash >> (i * 8)) & 0xff;
+    color += value.toString(16).padStart(2, '0');
+  }
+
+  return color;
+};
+
 export const getEdgeLabelForServiceAsTarget = (data: MessageCollectionItem) => {
   const type = data.collection;
   switch (type) {
     case 'commands':
       return 'invokes';
     case 'events':
-      return 'publishes event';
+      return 'publishes \nevent';
     case 'queries':
       return 'requests';
     default:
       return 'sends to';
   }
 };
-export const getEdgeLabelForMessageAsSource = (data: MessageCollectionItem) => {
+export const getEdgeLabelForMessageAsSource = (data: MessageCollectionItem, throughChannel = false) => {
   const type = data.collection;
   switch (type) {
     case 'commands':
       return 'accepts';
     case 'events':
-      return 'subscribed by';
+      return throughChannel ? 'subscribed to' : 'subscribed by';
     case 'queries':
       return 'accepts';
     default:
@@ -73,6 +91,11 @@ export const createEdge = (edgeOptions: Edge) => {
   return {
     label: 'subscribed by',
     animated: false,
+    // markerStart: {
+    //   type: MarkerType.Arrow,
+    //   width: 40,
+    //   height: 40,
+    // },
     markerEnd: {
       type: MarkerType.ArrowClosed,
       width: 40,
@@ -93,83 +116,6 @@ export const createNode = (values: Node): Node => {
   };
 };
 
-export const getChannelNodesAndEdges = ({
-  channels: channelsCollection,
-  channelsToRender,
-  source,
-  target,
-  channelToTargetLabel = 'sends from channel',
-  sourceToChannelLabel = 'sends to channel',
-  mode = 'full',
-  currentNodes = [],
-  channelRenderMode = 'flat',
-}: {
-  channels: CollectionItem[];
-  channelsToRender: { id: string; version: string }[];
-  source: CollectionItem;
-  target: CollectionItem;
-  channelToTargetLabel?: string;
-  sourceToChannelLabel?: string;
-  mode?: 'simple' | 'full';
-  currentNodes?: Node[];
-  channelRenderMode?: 'flat' | 'single';
-}) => {
-  const nodes: Node[] = [];
-  const edges: Edge[] = [];
-
-  // Get the channels from the collection
-  const channels = channelsToRender
-    .map((channel) => getItemsFromCollectionByIdAndSemverOrLatest(channelsCollection, channel.id, channel.version)[0])
-    .filter((channel) => channel !== undefined);
-
-  channels.forEach((channel) => {
-    const singleChannel = channelRenderMode === 'single'; // Only one node per channel, other wise one node per channel connection
-    const channelId = singleChannel ? generateIdForNodes([channel]) : generateIdForNodes([source, channel, target]);
-
-    // Need to check if the channel node is already in the graph
-    if (!currentNodes.find((node) => node.id === channelId)) {
-      nodes.push(
-        createNode({
-          id: channelId,
-          data: { title: channel?.data.id, mode, channel: { ...channel, ...channel.data }, source, target },
-          position: { x: 0, y: 0 },
-          type: channel?.collection,
-        })
-      );
-    }
-
-    // if the source (left node) is a service, use the target as the edge message
-    const edgeMessage = source.collection === 'services' ? target : source;
-
-    // Link from left to channel
-    edges.push(
-      createEdge({
-        // id: generatedIdForEdge(source, channel),
-        id: generateIdForNodes([source, channel, target]),
-        source: generateIdForNode(source),
-        target: channelId,
-        label: '',
-        // label: sourceToChannelLabel,
-        data: { message: edgeMessage, source: edgeMessage, channel, target },
-      })
-    );
-
-    // Link channel to service
-    edges.push(
-      createEdge({
-        // id: generatedIdForEdge(channel, target),
-        id: generateIdForNodes([channel, target, source]),
-        source: channelId,
-        target: generateIdForNode(target),
-        label: channelToTargetLabel,
-        data: { message: edgeMessage, source, channel, target },
-      })
-    );
-  });
-
-  return { nodes, edges };
-};
-
 type DagreGraph = any;
 
 export const getNodesAndEdgesFromDagre = ({

package/package.json

@@ -6,7 +6,7 @@
     "url": "https://github.com/event-catalog/eventcatalog.git"
   },
   "type": "module",
-  "version": "2.64.3",
+  "version": "2.65.0-beta.0",
   "publishConfig": {
     "access": "public"
   },
@@ -38,7 +38,7 @@
     "@eventcatalog/generator-ai": "^1.1.0",
     "@eventcatalog/license": "^0.0.7",
     "@eventcatalog/linter": "^0.0.2",
-    "@eventcatalog/sdk": "^2.8.4",
+    "@eventcatalog/sdk": "^2.9.2",
     "@eventcatalog/visualizer": "^0.0.6",
     "@fontsource/inter": "^5.2.5",
     "@headlessui/react": "^2.0.3",