@eventcatalog/core 2.64.3 → 2.65.0-beta.0

package/eventcatalog/src/hooks/eventcatalog-visualizer.ts

@@ -27,8 +27,8 @@ export const useEventCatalogVisualiser = ({
   skipProcessing = false,
 }: EventCatalogVisualizerProps) => {
   const [hideChannels, setHideChannels] = useState(false);
-  const [initialNodes] = useState(nodes);
-  const [initialEdges] = useState(edges);
+  const [initialNodes, setInitialNodes] = useState(nodes);
+  const [initialEdges, setInitialEdges] = useState(edges);
 
   // Initialize hideChannels from localStorage
   useEffect(() => {
@@ -38,6 +38,14 @@ export const useEventCatalogVisualiser = ({
     }
   }, []);
 
+  useEffect(() => {
+    const hasChannels = nodes.some((node) => node.type === 'channels');
+    if (!hideChannels || hasChannels) {
+      setInitialNodes(nodes);
+      setInitialEdges(edges);
+    }
+  }, [nodes, edges, hideChannels]);
+
   const toggleChannelsVisibility = useCallback(() => {
     setHideChannels((prev) => {
       const newValue = !prev;
@@ -50,7 +58,7 @@ export const useEventCatalogVisualiser = ({
   const updatedNodes = useMemo(() => nodes.filter((node) => node.type !== 'channels'), [nodes]);
 
   const updatedEdges = useMemo(() => {
-    return edges.reduce<Edge[]>((acc, edge) => {
+    const newEdges = edges.reduce<Edge[]>((acc, edge) => {
       const { source, target, data } = edge;
       const targetIsChannel = channels.some((channel) => channel.id === target);
       const sourceIsChannel = channels.some((channel) => channel.id === source);
@@ -59,30 +67,42 @@ export const useEventCatalogVisualiser = ({
         return [...acc, edge];
       }
 
-      const dataTarget = data?.target as CollectionEntry<CollectionTypes>;
-      const dataSource = data?.source as CollectionEntry<CollectionTypes>;
+      if (sourceIsChannel || targetIsChannel) {
+        const rootSourceAndTarget = data?.rootSourceAndTarget as {
+          source: { id: string; collection: string };
+          target: { id: string; collection: string };
+        };
+
+        if (!rootSourceAndTarget) {
+          return [...acc, edge];
+        }
 
-      if (sourceIsChannel) {
-        const edgeLabel =
-          dataTarget?.collection === 'services'
-            ? getEdgeLabelForMessageAsSource(dataSource as CollectionEntry<CollectionMessageTypes>)
-            : getEdgeLabelForServiceAsTarget(dataTarget as CollectionEntry<CollectionMessageTypes>);
+        // is target services?
+        const targetIsService = rootSourceAndTarget?.target?.collection === 'services';
+        const edgeLabel = targetIsService
+          ? getEdgeLabelForMessageAsSource(rootSourceAndTarget.source as any)
+          : getEdgeLabelForServiceAsTarget(rootSourceAndTarget.target as any);
+
+        const newEdgeId = `${rootSourceAndTarget.source.id}-${rootSourceAndTarget.target.id}`;
 
         return [
           ...acc,
           createEdge({
-            id: generatedIdForEdge(dataSource, dataTarget),
-            source: generateIdForNode(dataSource),
-            target: generateIdForNode(dataTarget),
+            id: newEdgeId,
+            source: rootSourceAndTarget.source.id,
+            target: rootSourceAndTarget.target.id,
             label: edgeLabel,
           }),
         ];
       }
-
-      return [...acc, edge];
+      return acc;
     }, []);
+
+    return newEdges.filter((edge, index, self) => index === self.findIndex((t) => t.id === edge.id));
   }, [edges, channels]);
 
+  // console.log('UPDATED EDGES', JSON.stringify(updatedEdges, null, 2));
+
   useEffect(() => {
     // Skip processing if there are no channels to manage
     if (skipProcessing) {

package/eventcatalog/src/utils/channels.ts

@@ -1,7 +1,7 @@
 import { getCollection } from 'astro:content';
 import type { CollectionEntry } from 'astro:content';
 import path from 'path';
-import { getVersionForCollectionItem, satisfies } from './collections/util';
+import { getItemsFromCollectionByIdAndSemverOrLatest, getVersionForCollectionItem, satisfies } from './collections/util';
 import { getMessages } from './messages';
 import type { CollectionMessageTypes } from '@types';
 import utils from '@eventcatalog/sdk';
@@ -92,3 +92,75 @@ export const getChannels = async ({ getAllVersions = true }: Props = {}): Promis
 
   return cachedChannels[cacheKey];
 };
+
+// Could be recursive, we need to keep going until we find a loop or until we reach the target channel
+export const isChannelsConnected = (
+  sourceChannel: CollectionEntry<'channels'>,
+  targetChannel: CollectionEntry<'channels'>,
+  channels: CollectionEntry<'channels'>[],
+  visited: Set<string> = new Set()
+) => {
+  // Create a unique key for this channel (id + version to handle multiple versions)
+  const channelKey = `${sourceChannel.data.id}:${sourceChannel.data.version}`;
+
+  // Base case: we've reached the target channel
+  if (sourceChannel.data.id === targetChannel.data.id) {
+    return true;
+  }
+
+  // Prevent infinite loops by tracking visited channels
+  if (visited.has(channelKey)) {
+    return false;
+  }
+
+  // Mark this channel as visited
+  visited.add(channelKey);
+
+  const routes = sourceChannel.data.routes ?? [];
+  for (const route of routes) {
+    const routeChannel = getItemsFromCollectionByIdAndSemverOrLatest(
+      channels,
+      route.id,
+      route.version
+    )[0] as CollectionEntry<'channels'>;
+
+    if (routeChannel) {
+      // Pass the visited set to the recursive call
+      if (isChannelsConnected(routeChannel, targetChannel, channels, visited)) {
+        return true;
+      }
+    }
+  }
+  return false;
+};
+
+// Go from the source to the target channel and return the channel chain
+export const getChannelChain = (
+  sourceChannel: CollectionEntry<'channels'>,
+  targetChannel: CollectionEntry<'channels'>,
+  channels: CollectionEntry<'channels'>[]
+): CollectionEntry<'channels'>[] => {
+  // Base case: we've reached the target channel
+  if (sourceChannel.data.id === targetChannel.data.id && sourceChannel.data.version === targetChannel.data.version) {
+    return [sourceChannel];
+  }
+
+  const routes = sourceChannel.data.routes ?? [];
+
+  if (routes.length > 0 && isChannelsConnected(sourceChannel, targetChannel, channels)) {
+    // Need to check every route and see if any of them are connected to the target channel
+    for (const route of routes) {
+      const routeChannel = getItemsFromCollectionByIdAndSemverOrLatest(
+        channels,
+        route.id,
+        route.version
+      )[0] as CollectionEntry<'channels'>;
+      if (routeChannel) {
+        if (isChannelsConnected(routeChannel, targetChannel, channels)) {
+          return [sourceChannel, ...getChannelChain(routeChannel, targetChannel, channels)];
+        }
+      }
+    }
+  }
+  return [];
+};

package/eventcatalog/src/utils/collections/util.ts

@@ -42,6 +42,13 @@ export function sortVersioned<T>(versioned: T[], versionExtractor: (e: T) => str
   }
 }
 
+// Takes a collection and a id of a resource, and checks if the version is the latest version in the collection
+export const getLatestVersionInCollectionById = (collection: CollectionEntry<CollectionTypes>[], id: string) => {
+  const items = collection.filter((i) => i.data.id === id);
+  const sortedVersions = sortVersioned(items, (v) => v.data.version);
+  return sortedVersions[0]?.data.version ?? id;
+};
+
 export const getVersionForCollectionItem = (
   item: CollectionEntry<CollectionTypes>,
   collection: CollectionEntry<CollectionTypes>[]

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

@@ -0,0 +1,75 @@
+import type { CollectionEntry } from 'astro:content';
+import { createEdge, createNode, generatedIdForEdge, generateIdForNode, getColorFromString } from './utils/utils';
+import { type Node, type Edge } from '@xyflow/react';
+
+interface CollectionItem {
+  collection: string;
+  data: any;
+}
+
+export const getNodesAndEdgesForChannelChain = ({
+  source,
+  target,
+  channelChain = [],
+  mode = 'simple',
+}: {
+  source: CollectionItem;
+  target: CollectionItem;
+  channelChain: CollectionEntry<'channels'>[];
+  mode?: 'simple' | 'full';
+}) => {
+  const nodes: Node[] = [];
+  const edges: Edge[] = [];
+
+  // We found a channel chain, we need to render all the channels in the chain
+  for (const channel of channelChain) {
+    nodes.push(
+      createNode({
+        id: generateIdForNode(channel),
+        type: channel.collection,
+        data: { mode, channel: { ...channel.data, ...channel } },
+        position: { x: 0, y: 0 },
+      })
+    );
+  }
+
+  // Connect the source to the first channel in the chain
+  edges.push(
+    createEdge({
+      id: generatedIdForEdge(source, channelChain[0]),
+      source: generateIdForNode(source),
+      target: generateIdForNode(channelChain[0]),
+      label: 'routes to',
+      data: { customColor: getColorFromString(source.data.id) },
+    })
+  );
+
+  // Make sure all the channels in the chain are connected together
+  for (const channel of channelChain) {
+    const index = channelChain.findIndex((c) => c.id === channel.id);
+    if (channelChain[index + 1]) {
+      edges.push(
+        createEdge({
+          id: generatedIdForEdge(channel, channelChain[index + 1]),
+          source: generateIdForNode(channel),
+          target: generateIdForNode(channelChain[index + 1]),
+          label: `routes to`,
+          data: { customColor: getColorFromString(source.data.id) },
+        })
+      );
+    }
+  }
+
+  // Connect the last channel to the target
+  edges.push(
+    createEdge({
+      id: generatedIdForEdge(channelChain[channelChain.length - 1], target),
+      source: generateIdForNode(channelChain[channelChain.length - 1]),
+      target: generateIdForNode(target),
+      label: 'consumes',
+      data: { customColor: getColorFromString(source.data.id) },
+    })
+  );
+
+  return { nodes, edges };
+};