@eventcatalog/core 2.12.3 → 2.13.0

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

@@ -0,0 +1,128 @@
+import { getCollection, type CollectionEntry } from 'astro:content';
+import { MarkerType, Position, type Edge, type Node } from 'reactflow';
+import dagre from 'dagre';
+import { getItemsFromCollectionByIdAndSemverOrLatest } from '@utils/collections/util';
+import type { CollectionTypes } from '@types';
+
+export const generateIdForNode = (node: CollectionEntry<CollectionTypes>) => {
+  return `${node.data.id}-${node.data.version}`;
+};
+export const generateIdForNodes = (nodes: any) => {
+  return nodes.map((node: any) => `${node.data.id}-${node.data.version}`).join('-');
+};
+export const generatedIdForEdge = (source: CollectionEntry<CollectionTypes>, target: CollectionEntry<CollectionTypes>) => {
+  return `${source.data.id}-${source.data.version}-${target.data.id}-${target.data.version}`;
+};
+
+export const calculatedNodes = (flow: dagre.graphlib.Graph, nodes: Node[]) => {
+  return nodes.map((node: any) => {
+    const { x, y } = flow.node(node.id);
+    return { ...node, position: { x, y } };
+  });
+};
+
+// Creates a new dagre graph
+export const createDagreGraph = ({ ranksep = 180, nodesep = 50, ...rest }: any) => {
+  const graph = new dagre.graphlib.Graph({ compound: true });
+  graph.setGraph({ rankdir: 'LR', ranksep, nodesep, ...rest });
+  graph.setDefaultEdgeLabel(() => ({}));
+  return graph;
+};
+
+export const createEdge = (edgeOptions: Edge) => {
+  return {
+    label: 'subscribed by',
+    animated: false,
+    markerEnd: {
+      type: MarkerType.ArrowClosed,
+      width: 40,
+      height: 40,
+    },
+    style: {
+      strokeWidth: 1,
+    },
+    ...edgeOptions,
+  };
+};
+
+export const createNode = (values: Node): Node => {
+  return {
+    sourcePosition: Position.Right,
+    targetPosition: Position.Left,
+    ...values,
+  };
+};
+
+export const getChannelNodesAndEdges = ({
+  channels: channelsCollection,
+  channelsToRender,
+  source,
+  target,
+  channelToTargetLabel = 'sends from channel',
+  sourceToChannelLabel = 'sends to channel',
+  mode = 'full',
+  currentNodes = [],
+}: {
+  channels: CollectionEntry<'channels'>[];
+  channelsToRender: { id: string; version: string }[];
+  source: CollectionEntry<CollectionTypes>;
+  target: CollectionEntry<CollectionTypes>;
+  channelToTargetLabel?: string;
+  sourceToChannelLabel?: string;
+  mode?: 'simple' | 'full';
+  currentNodes?: Node[];
+}) => {
+  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 channelId = 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, 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 },
+      })
+    );
+
+    // 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 },
+      })
+    );
+  });
+
+  return { nodes, edges };
+};

package/src/utils/{pages/pages.ts → page-loaders/page-data-loader.ts}

@@ -1,8 +1,9 @@
 import type { CollectionTypes, PageTypes } from '@types';
-import { getDomains } from '@utils/domains/domains';
+import { getChannels } from '@utils/channels';
+import { getDomains } from '@utils/collections/domains';
 import { getCommands, getEvents } from '@utils/messages';
 import { getQueries } from '@utils/queries';
-import { getServices } from '@utils/services/services';
+import { getServices } from '@utils/collections/services';
 import type { CollectionEntry } from 'astro:content';
 
 export const pageDataLoader: Record<PageTypes, () => Promise<CollectionEntry<CollectionTypes>[]>> = {
@@ -11,4 +12,5 @@ export const pageDataLoader: Record<PageTypes, () => Promise<CollectionEntry<Col
   queries: getQueries,
   services: getServices,
   domains: getDomains,
+  channels: getChannels,
 };

package/src/utils/queries.ts

@@ -23,6 +23,7 @@ export const getQueries = async ({ getAllVersions = true }: Props = {}): Promise
   });
 
   const services = await getCollection('services');
+  const allChannels = await getCollection('channels');
 
   return queries.map((query) => {
     const { latestVersion, versions } = getVersionForCollectionItem(query, queries);
@@ -43,10 +44,14 @@ export const getQueries = async ({ getAllVersions = true }: Props = {}): Promise
       })
     );
 
+    const messageChannels = query.data.channels || [];
+    const channelsForQuery = allChannels.filter((c) => messageChannels.some((channel) => c.data.id === channel.id));
+
     return {
       ...query,
       data: {
         ...query.data,
+        messageChannels: channelsForQuery,
         producers,
         consumers,
         versions,

package/tsconfig.json

@@ -5,7 +5,8 @@
     "baseUrl": ".",
     "paths": {
       "@config": ["./eventcatalog.config.js"],
-      "@eventcatalog": ["src/utils/config/catalog.ts"],
+      "@eventcatalog": ["src/utils/eventcatalog-config/catalog.ts"],
+      "@icons/*": ["src/icons/*"],
       "@components/*": ["src/components/*"],
       "@catalog/components/*": ["src/custom-defined-components/*"],
       "@types": ["src/types/index.ts"],

package/src/remark-plugins/remark-modified-time.mjs

@@ -1,9 +0,0 @@
-import { execSync } from "child_process";
-
-export function remarkModifiedTime() {
-  return function (_, file) {
-    const filepath = file.history[0];
-    const result = execSync(`git log -1 --pretty="format:%cI" "${filepath}"`);
-    file.data.astro.frontmatter.lastModified = result.toString();
-  };
-}

package/src/utils/commands/node-graph.ts

@@ -1,144 +0,0 @@
-import { findMatchingNodes } from '@utils/collections/util';
-import { getCommands } from '@utils/commands';
-import { calculatedNodes, createDagreGraph, generateIdForNode, generatedIdForEdge } from '@utils/node-graph-utils/utils';
-import { type CollectionEntry } from 'astro:content';
-import dagre from 'dagre';
-import { MarkerType } from 'reactflow';
-
-type DagreGraph = any;
-
-interface Props {
-  id: string;
-  version: string;
-  defaultFlow?: DagreGraph;
-  mode?: 'simple' | 'full';
-}
-
-export const getNodesAndEdges = async ({ id, version, defaultFlow, mode = 'simple' }: Props) => {
-  const flow = defaultFlow || createDagreGraph({ ranksep: 300, nodesep: 50 });
-  const nodes = [] as any,
-    edges = [] as any;
-
-  const commands = await getCommands();
-
-  const command = commands.find((command) => command.data.id === id && command.data.version === version);
-
-  // Nothing found...
-  if (!command) {
-    return {
-      nodes: [],
-      edges: [],
-    };
-  }
-
-  const producers = (command.data.producers as CollectionEntry<'services'>[]) || [];
-  const consumers = (command.data.consumers as CollectionEntry<'services'>[]) || [];
-
-  // Track nodes that are both sent and received
-  const bothSentAndReceived = findMatchingNodes(producers, consumers);
-
-  if (producers && producers.length > 0) {
-    producers.forEach((producer, index) => {
-      nodes.push({
-        id: generateIdForNode(producer),
-        type: producer?.collection,
-        sourcePosition: 'right',
-        targetPosition: 'left',
-        data: { mode, service: producer },
-        position: { x: 250, y: 0 },
-      });
-      edges.push({
-        id: generatedIdForEdge(producer, command),
-        source: generateIdForNode(producer),
-        target: generateIdForNode(command),
-        type: 'smoothstep',
-        label: 'invokes',
-        animated: false,
-        markerEnd: {
-          type: MarkerType.ArrowClosed,
-          width: 40,
-          height: 40,
-        },
-        style: {
-          strokeWidth: 1,
-        },
-      });
-    });
-  }
-
-  // The service itself
-  nodes.push({
-    id: generateIdForNode(command),
-    sourcePosition: 'right',
-    targetPosition: 'left',
-    data: { mode, message: command },
-    position: { x: 0, y: 0 },
-    type: command.collection,
-  });
-
-  // The messages the service sends
-  consumers.forEach((consumer) => {
-    nodes.push({
-      id: generateIdForNode(consumer),
-      sourcePosition: 'right',
-      targetPosition: 'left',
-      data: { title: consumer?.data.id, mode, service: consumer },
-      position: { x: 0, y: 0 },
-      type: consumer?.collection,
-    });
-    edges.push({
-      id: generatedIdForEdge(command, consumer),
-      source: generateIdForNode(command),
-      target: generateIdForNode(consumer),
-      type: 'smoothstep',
-      label: 'accepts',
-      animated: false,
-      markerEnd: {
-        type: MarkerType.ArrowClosed,
-        width: 40,
-        height: 40,
-      },
-      style: {
-        strokeWidth: 1,
-      },
-    });
-  });
-
-  // Handle nodes that are both sent and received
-  bothSentAndReceived.forEach((message) => {
-    if (message) {
-      edges.push({
-        id: generatedIdForEdge(command, message) + '-both',
-        source: generateIdForNode(command),
-        target: generateIdForNode(message),
-        type: 'smoothstep',
-        label: `publishes and subscribes`,
-        animated: false,
-        markerEnd: {
-          type: MarkerType.ArrowClosed,
-          width: 40,
-          height: 40,
-        },
-        style: {
-          strokeWidth: 1,
-        },
-      });
-    }
-  });
-
-  nodes.forEach((node: any) => {
-    flow.setNode(node.id, { width: 150, height: 100 });
-  });
-
-  edges.forEach((edge: any) => {
-    flow.setEdge(edge.source, edge.target);
-  });
-
-  // Render the diagram in memory getting hte X and Y
-  dagre.layout(flow);
-
-  return {
-    nodes: calculatedNodes(flow, nodes),
-    edges: edges,
-  };
-};

package/src/utils/events/node-graph.ts

@@ -1,145 +0,0 @@
-// import { getColor } from '@utils/colors';
-import { getEvents } from '@utils/events';
-import type { CollectionEntry } from 'astro:content';
-import dagre from 'dagre';
-import { calculatedNodes, createDagreGraph, generatedIdForEdge, generateIdForNode } from '../node-graph-utils/utils';
-import { MarkerType } from 'reactflow';
-import { findMatchingNodes } from '@utils/collections/util';
-
-type DagreGraph = any;
-
-interface Props {
-  id: string;
-  version: string;
-  defaultFlow?: DagreGraph;
-  mode?: 'simple' | 'full';
-}
-
-export const getNodesAndEdges = async ({ id, version, defaultFlow, mode = 'simple' }: Props) => {
-  const flow = defaultFlow || createDagreGraph({ ranksep: 300, nodesep: 50 });
-  const nodes = [] as any,
-    edges = [] as any;
-
-  const events = await getEvents();
-
-  const event = events.find((event) => event.data.id === id && event.data.version === version);
-
-  // Nothing found...
-  if (!event) {
-    return {
-      nodes: [],
-      edges: [],
-    };
-  }
-
-  const producers = (event.data.producers as CollectionEntry<'services'>[]) || [];
-  const consumers = (event.data.consumers as CollectionEntry<'services'>[]) || [];
-
-  // Track nodes that are both sent and received
-  const bothSentAndReceived = findMatchingNodes(producers, consumers);
-
-  if (producers && producers.length > 0) {
-    producers.forEach((producer) => {
-      nodes.push({
-        id: generateIdForNode(producer),
-        type: producer?.collection,
-        sourcePosition: 'right',
-        targetPosition: 'left',
-        data: { mode, service: producer, showTarget: false },
-        position: { x: 250, y: 0 },
-      });
-      edges.push({
-        id: generatedIdForEdge(producer, event),
-        source: generateIdForNode(producer),
-        target: generateIdForNode(event),
-        type: 'smoothstep',
-        label: 'publishes event',
-        animated: false,
-        markerEnd: {
-          type: MarkerType.ArrowClosed,
-          width: 40,
-          height: 40,
-        },
-        style: {
-          strokeWidth: 1,
-        },
-      });
-    });
-  }
-
-  // The event itself
-  nodes.push({
-    id: generateIdForNode(event),
-    sourcePosition: 'right',
-    targetPosition: 'left',
-    data: { mode, message: event, showTarget: producers.length > 0, showSource: consumers.length > 0 },
-    position: { x: 0, y: 0 },
-    type: event.collection,
-  });
-
-  // The messages the service sends
-  consumers.forEach((consumer) => {
-    nodes.push({
-      id: generateIdForNode(consumer),
-      sourcePosition: 'right',
-      targetPosition: 'left',
-      data: { title: consumer?.data.id, mode, service: consumer, showSource: false },
-      position: { x: 0, y: 0 },
-      type: consumer?.collection,
-    });
-    edges.push({
-      id: generatedIdForEdge(event, consumer),
-      source: generateIdForNode(event),
-      target: generateIdForNode(consumer),
-      type: 'smoothstep',
-      label: 'subscribed by',
-      animated: false,
-      markerEnd: {
-        type: MarkerType.ArrowClosed,
-        width: 40,
-        height: 40,
-      },
-      style: {
-        strokeWidth: 1,
-      },
-    });
-  });
-
-  // Handle messages that are both sent and received
-  bothSentAndReceived.forEach((message) => {
-    if (message) {
-      edges.push({
-        id: generatedIdForEdge(event, message) + '-both',
-        source: generateIdForNode(event),
-        target: generateIdForNode(message),
-        type: 'smoothstep',
-        label: `publishes and subscribes`,
-        animated: false,
-        markerEnd: {
-          type: MarkerType.ArrowClosed,
-          width: 40,
-          height: 40,
-        },
-        style: {
-          strokeWidth: 1,
-        },
-      });
-    }
-  });
-
-  nodes.forEach((node: any) => {
-    flow.setNode(node.id, { width: 150, height: 100 });
-  });
-
-  edges.forEach((edge: any) => {
-    flow.setEdge(edge.source, edge.target);
-  });
-
-  // Render the diagram in memory getting hte X and Y
-  dagre.layout(flow);
-
-  return {
-    nodes: calculatedNodes(flow, nodes),
-    edges: edges,
-  };
-};

package/src/utils/node-graph-utils/utils.ts

@@ -1,29 +0,0 @@
-import type { CollectionEntry } from 'astro:content';
-import type { Node } from 'reactflow';
-import dagre from 'dagre';
-
-export const generateIdForNode = (node: CollectionEntry<'events' | 'services' | 'commands' | 'queries'>) => {
-  return `${node.data.id}-${node.data.version}`;
-};
-
-export const generatedIdForEdge = (
-  source: CollectionEntry<'events' | 'services' | 'commands' | 'queries'>,
-  target: CollectionEntry<'events' | 'services' | 'commands' | 'queries'>
-) => {
-  return `${source.data.id}-${source.data.version}-${target.data.id}-${target.data.version}`;
-};
-
-export const calculatedNodes = (flow: dagre.graphlib.Graph, nodes: Node[]) => {
-  return nodes.map((node: any) => {
-    const { x, y } = flow.node(node.id);
-    return { ...node, position: { x, y } };
-  });
-};
-
-// Creates a new dagre graph
-export const createDagreGraph = ({ ranksep = 180, nodesep = 50, ...rest }: any) => {
-  const graph = new dagre.graphlib.Graph({ compound: true });
-  graph.setGraph({ rankdir: 'LR', ranksep, nodesep, ...rest });
-  graph.setDefaultEdgeLabel(() => ({}));
-  return graph;
-};

package/src/utils/queries/node-graph.ts

@@ -1,144 +0,0 @@
-import { getQueries } from '@utils/queries';
-import type { CollectionEntry } from 'astro:content';
-import dagre from 'dagre';
-import { calculatedNodes, createDagreGraph, generatedIdForEdge, generateIdForNode } from '../node-graph-utils/utils';
-import { MarkerType } from 'reactflow';
-import { findMatchingNodes } from '@utils/collections/util';
-
-type DagreGraph = any;
-
-interface Props {
-  id: string;
-  version: string;
-  defaultFlow?: DagreGraph;
-  mode?: 'simple' | 'full';
-}
-
-export const getNodesAndEdges = async ({ id, version, defaultFlow, mode = 'simple' }: Props) => {
-  const flow = defaultFlow || createDagreGraph({ ranksep: 300, nodesep: 50 });
-  const nodes = [] as any,
-    edges = [] as any;
-
-  const queries = await getQueries();
-
-  const query = queries.find((query) => query.data.id === id && query.data.version === version);
-
-  // Nothing found...
-  if (!query) {
-    return {
-      nodes: [],
-      edges: [],
-    };
-  }
-
-  const producers = (query.data.producers as CollectionEntry<'services'>[]) || [];
-  const consumers = (query.data.consumers as CollectionEntry<'services'>[]) || [];
-
-  // Track nodes that are both sent and received
-  const bothSentAndReceived = findMatchingNodes(producers, consumers);
-
-  if (producers && producers.length > 0) {
-    producers.forEach((producer) => {
-      nodes.push({
-        id: generateIdForNode(producer),
-        type: producer?.collection,
-        sourcePosition: 'right',
-        targetPosition: 'left',
-        data: { mode, service: producer },
-        position: { x: 250, y: 0 },
-      });
-      edges.push({
-        id: generatedIdForEdge(producer, query),
-        source: generateIdForNode(producer),
-        target: generateIdForNode(query),
-        type: 'smoothstep',
-        label: 'requests',
-        animated: false,
-        markerEnd: {
-          type: MarkerType.ArrowClosed,
-          width: 40,
-          height: 40,
-        },
-        style: {
-          strokeWidth: 1,
-        },
-      });
-    });
-  }
-
-  // The query itself
-  nodes.push({
-    id: generateIdForNode(query),
-    sourcePosition: 'right',
-    targetPosition: 'left',
-    data: { mode, message: query },
-    position: { x: 0, y: 0 },
-    type: query.collection,
-  });
-
-  // The messages the service sends
-  consumers.forEach((consumer) => {
-    nodes.push({
-      id: generateIdForNode(consumer),
-      sourcePosition: 'right',
-      targetPosition: 'left',
-      data: { title: consumer?.data.id, mode, service: consumer },
-      position: { x: 0, y: 0 },
-      type: consumer?.collection,
-    });
-    edges.push({
-      id: generatedIdForEdge(query, consumer),
-      source: generateIdForNode(query),
-      target: generateIdForNode(consumer),
-      type: 'smoothstep',
-      label: 'accepts',
-      animated: false,
-      markerEnd: {
-        type: MarkerType.ArrowClosed,
-        width: 40,
-        height: 40,
-      },
-      style: {
-        strokeWidth: 1,
-      },
-    });
-  });
-
-  // Handle nodes that are both sent and received
-  bothSentAndReceived.forEach((message) => {
-    if (message) {
-      edges.push({
-        id: generatedIdForEdge(query, message) + '-both',
-        source: generateIdForNode(query),
-        target: generateIdForNode(message),
-        type: 'smoothstep',
-        label: `publishes and subscribes`,
-        animated: false,
-        markerEnd: {
-          type: MarkerType.ArrowClosed,
-          width: 40,
-          height: 40,
-        },
-        style: {
-          strokeWidth: 1,
-        },
-      });
-    }
-  });
-
-  nodes.forEach((node: any) => {
-    flow.setNode(node.id, { width: 150, height: 100 });
-  });
-
-  edges.forEach((edge: any) => {
-    flow.setEdge(edge.source, edge.target);
-  });
-
-  // Render the diagram in memory getting hte X and Y
-  dagre.layout(flow);
-
-  return {
-    nodes: calculatedNodes(flow, nodes),
-    edges: edges,
-  };
-};