@eventcatalog/core 2.11.6 → 2.12.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @eventcatalog/core
 
+## 2.12.0
+
+### Minor Changes
+
+- a136d50: feat(core): services can now send and receive the same messages in vis…
+
+## 2.11.7
+
+### Patch Changes
+
+- 159e2d4: feat(core): added ability to embed discovery table
+
 ## 2.11.6
 
 ### Patch Changes

package/package.json

@@ -6,7 +6,7 @@
     "url": "https://github.com/event-catalog/eventcatalog.git"
   },
   "type": "module",
-  "version": "2.11.6",
+  "version": "2.12.0",
   "publishConfig": {
     "access": "public"
   },

package/src/components/MDX/NodeGraph/NodeGraph.tsx

@@ -81,6 +81,7 @@ const NodeGraphBuilder = ({
     setEdges((eds) =>
       eds.map((edge) => {
         edge.style = { ...edge.style, opacity: 1 };
+        edge.labelStyle = { ...edge.labelStyle, opacity: 1 };
         return { ...edge, animated: false };
       })
     );
@@ -107,9 +108,19 @@ const NodeGraphBuilder = ({
         if (edge.source === node.id || edge.target === node.id) {
           connectedNodeIds.add(edge.source);
           connectedNodeIds.add(edge.target);
-          return { ...edge, style: { ...edge.style, opacity: 1 }, animated: true };
+          return {
+            ...edge,
+            style: { ...edge.style, opacity: 1 },
+            labelStyle: { ...edge.labelStyle, opacity: 1 },
+            animated: true,
+          };
         }
-        return { ...edge, style: { ...edge.style, opacity: 0.1 }, animated: false };
+        return {
+          ...edge,
+          style: { ...edge.style, opacity: 0.1 },
+          labelStyle: { ...edge.labelStyle, opacity: 0.1 },
+          animated: false,
+        };
       });
 
       const updatedNodes = nodes.map((n) => {

package/src/components/MDX/NodeGraph/Nodes/Command.tsx

@@ -18,13 +18,10 @@ function classNames(...classes: any) {
 }
 
 export default function CommandNode({ data, sourcePosition, targetPosition }: any) {
-  const { mode, message, showSource = true, showTarget = true } = data as Data;
+  const { mode, message } = data as Data;
 
   const { name, version, summary, owners = [], producers = [], consumers = [] } = message.data;
 
-  const renderTarget = showTarget || (targetPosition && producers.length > 0);
-  const renderSource = showSource || (sourcePosition && consumers.length > 0);
-
   return (
     <div className={classNames('w-full rounded-md border flex justify-start  bg-white text-black border-blue-400')}>
       <div
@@ -41,8 +38,8 @@ export default function CommandNode({ data, sourcePosition, targetPosition }: an
         )}
       </div>
       <div className="p-1 min-w-60 max-w-[min-content]">
-        {renderTarget && <Handle type="target" position={targetPosition} />}
-        {renderSource && <Handle type="source" position={sourcePosition} />}
+        {targetPosition && <Handle type="target" position={targetPosition} />}
+        {sourcePosition && <Handle type="source" position={sourcePosition} />}
         <div className={classNames(mode === 'full' ? `border-b border-gray-200` : '')}>
           <span className="text-xs font-bold block pb-0.5">{name}</span>
           <div className="flex justify-between">

package/src/components/MDX/NodeGraph/Nodes/Event.tsx

@@ -18,13 +18,10 @@ function classNames(...classes: any) {
 }
 
 export default function EventNode({ data, sourcePosition, targetPosition }: any) {
-  const { mode, message, showTarget = true, showSource = true } = data as Data;
+  const { mode, message } = data as Data;
 
   const { name, version, summary, owners = [], producers = [], consumers = [] } = message.data;
 
-  const renderTarget = showTarget || (targetPosition && producers.length > 0);
-  const renderSource = showSource || (sourcePosition && consumers.length > 0);
-
   return (
     <div className={classNames('w-full rounded-md border flex justify-start  bg-white text-black border-orange-400')}>
       <div
@@ -41,8 +38,8 @@ export default function EventNode({ data, sourcePosition, targetPosition }: any)
         )}
       </div>
       <div className="p-1 min-w-60 max-w-[min-content]">
-        {renderTarget && <Handle type="target" position={targetPosition} />}
-        {renderSource && <Handle type="source" position={sourcePosition} />}
+        {targetPosition && <Handle type="target" position={targetPosition} />}
+        {sourcePosition && <Handle type="source" position={sourcePosition} />}
         <div className={classNames(mode === 'full' ? `border-b border-gray-200` : '')}>
           <span className="text-xs font-bold block pb-0.5">{name}</span>
           <div className="flex justify-between">

package/src/components/MDX/NodeGraph/Nodes/ExternalSystem.tsx

@@ -18,7 +18,7 @@ function classNames(...classes: any) {
 }
 
 export default function ExternalSystemNode({ data, sourcePosition, targetPosition }: any) {
-  const { mode, step, showTarget = true, showSource = true } = data as Data;
+  const { mode, step } = data as Data;
   const { externalSystem } = step;
   const { name, summary, url } = externalSystem;
 
@@ -43,8 +43,8 @@ export default function ExternalSystemNode({ data, sourcePosition, targetPositio
         )}
       </div>
       <div className="p-1 min-w-60 max-w-[min-content]">
-        {showTarget && <Handle type="target" position={targetPosition} />}
-        {showSource && <Handle type="source" position={sourcePosition} />}
+        {targetPosition && <Handle type="target" position={targetPosition} />}
+        {sourcePosition && <Handle type="source" position={sourcePosition} />}
         <div className={classNames(mode === 'full' ? `border-b border-gray-200` : '')}>
           <div className="h-full ">
             <span className="text-sm font-bold pb-0.5 block w-full">{name}</span>

package/src/components/MDX/NodeGraph/Nodes/Query.tsx

@@ -22,8 +22,8 @@ export default function QueryNode({ data, sourcePosition, targetPosition }: any)
 
   const { name, version, summary, owners = [], producers = [], consumers = [] } = message.data;
 
-  const renderTarget = showTarget || (targetPosition && producers.length > 0);
-  const renderSource = showSource || (sourcePosition && consumers.length > 0);
+  const renderTarget = true; //showTarget || (targetPosition && producers.length > 0);
+  const renderSource = true; // showSource || (sourcePosition && consumers.length > 0);
 
   return (
     <div className={classNames('w-full rounded-md border flex justify-start  bg-white text-black border-green-400')}>

package/src/components/MDX/NodeGraph/Nodes/Service.tsx

@@ -17,7 +17,7 @@ function classNames(...classes: any) {
 }
 
 export default function ServiceNode({ data, sourcePosition, targetPosition }: any) {
-  const { label, bgColor = 'bg-blue-500', mode, service, showTarget = true, showSource = true } = data as Data;
+  const { label, bgColor = 'bg-blue-500', mode, service } = data as Data;
 
   const { version, owners = [], sends = [], receives = [], name } = service.data;
 
@@ -37,8 +37,8 @@ export default function ServiceNode({ data, sourcePosition, targetPosition }: an
         )}
       </div>
       <div className="p-1 min-w-60 max-w-[min-content]">
-        {showTarget && <Handle type="target" position={targetPosition} />}
-        {showSource && <Handle type="source" position={sourcePosition} />}
+        {targetPosition && <Handle type="target" position={targetPosition} />}
+        {sourcePosition && <Handle type="source" position={sourcePosition} />}
         <div className={classNames(mode === 'full' ? `border-b border-gray-200` : '')}>
           <span className="text-xs font-bold block pt-0.5 pb-0.5">{name}</span>
           <div className="flex justify-between">

package/src/components/MDX/NodeGraph/Nodes/Step.tsx

@@ -16,13 +16,10 @@ function classNames(...classes: any) {
 }
 
 export default function StepNode({ data, sourcePosition, targetPosition }: any) {
-  const { mode, step, showTarget = true, showSource = true } = data as Data;
+  const { mode, step } = data as Data;
 
   const { title, summary } = step;
 
-  const renderTarget = showTarget || true;
-  const renderSource = showSource || true;
-
   return (
     <div className={classNames('w-full rounded-md border flex justify-start  bg-white text-black border-blue-400 min-h-[3em]')}>
       <div
@@ -38,8 +35,8 @@ export default function StepNode({ data, sourcePosition, targetPosition }: any)
         )}
       </div>
       <div className="p-1 min-w-60 max-w-[min-content]">
-        {renderTarget && <Handle type="target" position={targetPosition} />}
-        {renderSource && <Handle type="source" position={sourcePosition} />}
+        {targetPosition && <Handle type="target" position={targetPosition} />}
+        {sourcePosition && <Handle type="source" position={sourcePosition} />}
 
         {!summary && (
           <div className="h-full flex items-center">

package/src/components/MDX/NodeGraph/Nodes/User.tsx

@@ -21,9 +21,6 @@ export default function UserNode({ data, sourcePosition, targetPosition }: any)
 
   const { summary, actor: { name } = {} } = step;
 
-  const renderTarget = showTarget || true;
-  const renderSource = showSource || true;
-
   return (
     <div
       className={classNames(
@@ -45,8 +42,8 @@ export default function UserNode({ data, sourcePosition, targetPosition }: any)
         )}
       </div>
       <div className="p-1 min-w-60 max-w-[min-content]">
-        {renderTarget && <Handle type="target" position={targetPosition} />}
-        {renderSource && <Handle type="source" position={sourcePosition} />}
+        {targetPosition && <Handle type="target" position={targetPosition} />}
+        {sourcePosition && <Handle type="source" position={sourcePosition} />}
 
         {(!summary || mode !== 'full') && (
           <div className="h-full ">

package/src/components/Tables/Table.tsx

@@ -40,10 +40,6 @@ export const Table = ({
   const [data, _setData] = useState(initialData);
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
 
-  useEffect(() => {
-    console.log(window.location.pathname);
-  }, []);
-
   useEffect(() => {
     const urlParams = new URLSearchParams(window.location.search);
     const id = urlParams.get('id');

package/src/layouts/DiscoverLayout.astro

@@ -102,7 +102,7 @@ const tabs = [
     <!-- Table -->
     <div class="pb-20 ml-6">
       <div>
-        <div class="sm:flex sm:items-center py-4 pb-4">
+        <div class="sm:flex sm:items-center py-4 pb-4" id="discover-title">
           <div class="sm:flex-auto space-y-2">
             <h1 class="text-4xl font-semibold text-gray-900 capitalize">{title}</h1>
             <p class="text-md text-gray-700">{subtitle}</p>

package/src/layouts/VerticalSideBarLayout.astro

@@ -232,7 +232,9 @@ const showSideBarOnLoad = currentNavigationItem?.sidebar;
         'eventcatalog-header',
         'eventcatalog-header-spacer',
         'visualiser-footer',
+        // /discover page elements
         'discover-collection-tabs',
+        'discover-title',
       ];
 
       elementsToHide.forEach((id) => {
@@ -266,8 +268,6 @@ const showSideBarOnLoad = currentNavigationItem?.sidebar;
 
         const navItem = navigationItems.find((navItem) => navItem.id === id);
 
-        console.log(navItem);
-
         if (!navItem.sidebar || !currentPath.includes(navItem.id)) {
           window.location.href = navItem.href;
           return;

package/src/utils/collections/util.ts

@@ -57,3 +57,15 @@ export const getItemsFromCollectionByIdAndSemverOrLatest = <T extends { data: {
   // latest version
   return sorted.length > 0 ? [sorted[sorted.length - 1]] : [];
 };
+
+export const findMatchingNodes = (
+  nodesA: CollectionEntry<'events' | 'commands' | 'queries' | 'services'>[],
+  nodesB: CollectionEntry<'events' | 'commands' | 'queries' | 'services'>[]
+) => {
+  // Track messages that are both sent and received
+  return nodesA.filter((nodeA) => {
+    return nodesB.some((nodeB) => {
+      return nodeB.data.id === nodeA.data.id && nodeB.data.version === nodeA.data.version;
+    });
+  });
+};

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

@@ -1,3 +1,4 @@
+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';
@@ -33,6 +34,9 @@ export const getNodesAndEdges = async ({ id, version, defaultFlow, mode = 'simpl
   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({
@@ -40,7 +44,7 @@ export const getNodesAndEdges = async ({ id, version, defaultFlow, mode = 'simpl
         type: producer?.collection,
         sourcePosition: 'right',
         targetPosition: 'left',
-        data: { mode, service: producer, showTarget: false },
+        data: { mode, service: producer },
         position: { x: 250, y: 0 },
       });
       edges.push({
@@ -67,7 +71,7 @@ export const getNodesAndEdges = async ({ id, version, defaultFlow, mode = 'simpl
     id: generateIdForNode(command),
     sourcePosition: 'right',
     targetPosition: 'left',
-    data: { mode, message: command, showTarget: producers.length > 0, showSource: consumers.length > 0 },
+    data: { mode, message: command },
     position: { x: 0, y: 0 },
     type: command.collection,
   });
@@ -78,7 +82,7 @@ export const getNodesAndEdges = async ({ id, version, defaultFlow, mode = 'simpl
       id: generateIdForNode(consumer),
       sourcePosition: 'right',
       targetPosition: 'left',
-      data: { title: consumer?.data.id, mode, service: consumer, showSource: false },
+      data: { title: consumer?.data.id, mode, service: consumer },
       position: { x: 0, y: 0 },
       type: consumer?.collection,
     });
@@ -100,6 +104,28 @@ export const getNodesAndEdges = async ({ id, version, defaultFlow, mode = 'simpl
     });
   });
 
+  // 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 });
   });

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

@@ -4,6 +4,7 @@ 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;
 
@@ -34,6 +35,9 @@ export const getNodesAndEdges = async ({ id, version, defaultFlow, mode = 'simpl
   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({
@@ -101,6 +105,28 @@ export const getNodesAndEdges = async ({ id, version, defaultFlow, mode = 'simpl
     });
   });
 
+  // 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 });
   });

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

@@ -3,6 +3,7 @@ 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;
 
@@ -33,6 +34,9 @@ export const getNodesAndEdges = async ({ id, version, defaultFlow, mode = 'simpl
   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({
@@ -40,7 +44,7 @@ export const getNodesAndEdges = async ({ id, version, defaultFlow, mode = 'simpl
         type: producer?.collection,
         sourcePosition: 'right',
         targetPosition: 'left',
-        data: { mode, service: producer, showTarget: false },
+        data: { mode, service: producer },
         position: { x: 250, y: 0 },
       });
       edges.push({
@@ -67,7 +71,7 @@ export const getNodesAndEdges = async ({ id, version, defaultFlow, mode = 'simpl
     id: generateIdForNode(query),
     sourcePosition: 'right',
     targetPosition: 'left',
-    data: { mode, message: query, showTarget: producers.length > 0, showSource: consumers.length > 0 },
+    data: { mode, message: query },
     position: { x: 0, y: 0 },
     type: query.collection,
   });
@@ -78,7 +82,7 @@ export const getNodesAndEdges = async ({ id, version, defaultFlow, mode = 'simpl
       id: generateIdForNode(consumer),
       sourcePosition: 'right',
       targetPosition: 'left',
-      data: { title: consumer?.data.id, mode, service: consumer, showSource: false },
+      data: { title: consumer?.data.id, mode, service: consumer },
       position: { x: 0, y: 0 },
       type: consumer?.collection,
     });
@@ -100,6 +104,28 @@ export const getNodesAndEdges = async ({ id, version, defaultFlow, mode = 'simpl
     });
   });
 
+  // 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 });
   });

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

@@ -1,7 +1,7 @@
 import { getCollection, type CollectionEntry } from 'astro:content';
 import dagre from 'dagre';
 import { createDagreGraph, generateIdForNode, generatedIdForEdge, calculatedNodes } from '@utils/node-graph-utils/utils';
-import { getItemsFromCollectionByIdAndSemverOrLatest } from '@utils/collections/util';
+import { findMatchingNodes, getItemsFromCollectionByIdAndSemverOrLatest } from '@utils/collections/util';
 import { MarkerType } from 'reactflow';
 
 type DagreGraph = any;
@@ -78,10 +78,12 @@ export const getNodesAndEdges = async ({ id, defaultFlow, version, mode = 'simpl
   const receives = (receivesHydrated as CollectionEntry<'events' | 'commands' | 'queries'>[]) || [];
   const sends = (sendsHydrated as CollectionEntry<'events' | 'commands' | 'queries'>[]) || [];
 
-  // Get all the data from them
+  // Track messages that are both sent and received
+  const bothSentAndReceived = findMatchingNodes(receives, sends);
 
+  // Get all the data from them
   if (receives && receives.length > 0) {
-    //All the messages the service receives
+    // All the messages the service receives
     receives.forEach((receive, index) => {
       nodes.push({
         id: generateIdForNode(receive),
@@ -89,7 +91,7 @@ export const getNodesAndEdges = async ({ id, defaultFlow, version, mode = 'simpl
         sourcePosition: 'right',
         targetPosition: 'left',
         data: { mode, message: receive, showTarget: renderAllEdges },
-        position: { x: 250, y: 0 },
+        position: { x: 250, y: index * 100 },
       });
       edges.push({
         id: generatedIdForEdge(receive, service),
@@ -121,13 +123,13 @@ export const getNodesAndEdges = async ({ id, defaultFlow, version, mode = 'simpl
   });
 
   // The messages the service sends
-  sends.forEach((send) => {
+  sends.forEach((send, index) => {
     nodes.push({
       id: generateIdForNode(send),
       sourcePosition: 'right',
       targetPosition: 'left',
       data: { mode, message: send, showSource: renderAllEdges },
-      position: { x: 0, y: 0 },
+      position: { x: 500, y: index * 100 },
       type: send?.collection,
     });
     edges.push({
@@ -148,6 +150,28 @@ export const getNodesAndEdges = async ({ id, defaultFlow, version, mode = 'simpl
     });
   });
 
+  // Handle messages that are both sent and received
+  bothSentAndReceived.forEach((message) => {
+    if (message) {
+      edges.push({
+        id: generatedIdForEdge(service, message) + '-both',
+        source: generateIdForNode(service),
+        target: generateIdForNode(message),
+        type: 'smoothstep',
+        label: `${getSendsMessageByMessageType(message?.collection)} & ${getReceivesMessageByMessageType(message?.collection)}`,
+        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 });
   });
@@ -156,7 +180,7 @@ export const getNodesAndEdges = async ({ id, defaultFlow, version, mode = 'simpl
     flow.setEdge(edge.source, edge.target);
   });
 
-  // Render the diagram in memory getting hte X and Y
+  // Render the diagram in memory getting the X and Y
   dagre.layout(flow);
 
   return {