@eventcatalog/core 3.12.7 → 3.12.9-beta.0

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

@@ -94,7 +94,7 @@ export const getNodesAndEdgesForDomainContextMap = async ({ defaultFlow = null }
       data: { label: `Bounded Context: ${domain.data.name}` },
       position: { x: 0, y: 0 },
       style: {
-        height: 40,
+        height: 20,
         backgroundColor: 'transparent',
         border: 'none',
         color: 'black',

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

@@ -23,7 +23,7 @@ import {
 import type { CollectionMessageTypes } from '@types';
 import { getCommands } from '@utils/collections/commands';
 import { getQueries } from '@utils/collections/queries';
-import { createNode } from './utils/utils';
+import { createNode, buildContextMenuForMessage, buildContextMenuForService, buildContextMenuForResource } from './utils/utils';
 import { getConsumersOfMessage, getProducersOfMessage } from '@utils/collections/services';
 import { getNodesAndEdgesForChannelChain } from './channel-node-graph';
 import { getChannelChain, isChannelsConnected } from '@utils/collections/channels';
@@ -79,6 +79,13 @@ const getNodesAndEdges = async ({
       message: {
         ...message.data,
       },
+      contextMenu: buildContextMenuForMessage({
+        id: message.data.id,
+        version: message.data.version,
+        name: message.data.name,
+        collection: message.collection,
+        schemaPath: (message.data as any).schemaPath,
+      }),
     },
     position: { x: 0, y: 0 },
     type: message.collection,
@@ -96,12 +103,23 @@ const getNodesAndEdges = async ({
     const isDataProduct = producer.collection === 'data-products';
 
     // Create the producer node with appropriate data structure
+    const producerContextMenu = isDataProduct
+      ? buildContextMenuForResource({ collection: 'data-products', id: producer.data.id, version: producer.data.version })
+      : buildContextMenuForService({
+          id: producer.data.id,
+          version: producer.data.version,
+          specifications: (producer.data as any).specifications,
+          repository: (producer.data as any).repository,
+        });
+
     nodes.push({
       id: generateIdForNode(producer),
       type: isDataProduct ? 'data-products' : producer?.collection,
       sourcePosition: 'right',
       targetPosition: 'left',
-      data: isDataProduct ? { mode, dataProduct: { ...producer.data } } : { mode, service: { ...producer.data } },
+      data: isDataProduct
+        ? { mode, dataProduct: { ...producer.data }, contextMenu: producerContextMenu }
+        : { mode, service: { ...producer.data }, contextMenu: producerContextMenu },
       position: { x: 250, y: 0 },
     });
 
@@ -121,8 +139,8 @@ const getNodesAndEdges = async ({
         animated: false,
         markerEnd: {
           type: MarkerType.ArrowClosed,
-          width: 40,
-          height: 40,
+          width: 20,
+          height: 20,
         },
       });
       continue;
@@ -153,8 +171,8 @@ const getNodesAndEdges = async ({
         animated: false,
         markerEnd: {
           type: MarkerType.ArrowClosed,
-          width: 40,
-          height: 40,
+          width: 20,
+          height: 20,
         },
       });
       continue;
@@ -183,7 +201,15 @@ const getNodesAndEdges = async ({
         createNode({
           id: generateIdForNode(channel),
           type: channel.collection,
-          data: { mode, channel: { ...channel.data } },
+          data: {
+            mode,
+            channel: { ...channel.data },
+            contextMenu: buildContextMenuForResource({
+              collection: 'channels',
+              id: channel.data.id,
+              version: channel.data.version,
+            }),
+          },
           position: { x: 0, y: 0 },
         })
       );
@@ -217,13 +243,22 @@ const getNodesAndEdges = async ({
     const isDataProduct = consumer.collection === 'data-products';
 
     // Render the consumer node with appropriate data structure
+    const consumerContextMenu = isDataProduct
+      ? buildContextMenuForResource({ collection: 'data-products', id: consumer.data.id, version: consumer.data.version })
+      : buildContextMenuForService({
+          id: consumer.data.id,
+          version: consumer.data.version,
+          specifications: (consumer.data as any).specifications,
+          repository: (consumer.data as any).repository,
+        });
+
     nodes.push({
       id: generateIdForNode(consumer),
       sourcePosition: 'right',
       targetPosition: 'left',
       data: isDataProduct
-        ? { title: consumer?.data.id, mode, dataProduct: { ...consumer.data } }
-        : { title: consumer?.data.id, mode, service: { ...consumer.data } },
+        ? { title: consumer?.data.id, mode, dataProduct: { ...consumer.data }, contextMenu: consumerContextMenu }
+        : { title: consumer?.data.id, mode, service: { ...consumer.data }, contextMenu: consumerContextMenu },
       position: { x: 0, y: 0 },
       type: isDataProduct ? 'data-products' : consumer?.collection,
     });
@@ -496,7 +531,17 @@ export const getNodesAndEdgesForConsumedMessage = ({
     createNode({
       id: messageId,
       type: message.collection,
-      data: { mode, message: { ...message.data } },
+      data: {
+        mode,
+        message: { ...message.data },
+        contextMenu: buildContextMenuForMessage({
+          id: message.data.id,
+          version: message.data.version,
+          name: message.data.name,
+          collection: message.collection,
+          schemaPath: (message.data as any).schemaPath,
+        }),
+      },
       position: { x: 0, y: 0 },
     })
   );
@@ -506,7 +551,16 @@ export const getNodesAndEdgesForConsumedMessage = ({
     createNode({
       id: generateIdForNode(target),
       type: target.collection,
-      data: { mode, service: { ...target.data } },
+      data: {
+        mode,
+        service: { ...target.data },
+        contextMenu: buildContextMenuForService({
+          id: target.data.id,
+          version: target.data.version,
+          specifications: target.data.specifications as { type: string; path: string }[],
+          repository: target.data.repository as { url: string },
+        }),
+      },
       position: { x: 0, y: 0 },
     })
   );
@@ -562,7 +616,15 @@ export const getNodesAndEdgesForConsumedMessage = ({
         createNode({
           id: channelId,
           type: channel.collection,
-          data: { mode, channel: { ...channel.data, ...channel, id: channel.data.id } },
+          data: {
+            mode,
+            channel: { ...channel.data, ...channel, id: channel.data.id },
+            contextMenu: buildContextMenuForResource({
+              collection: 'channels',
+              id: channel.data.id,
+              version: channel.data.version,
+            }),
+          },
           position: { x: 0, y: 0 },
         })
       );
@@ -602,7 +664,16 @@ export const getNodesAndEdgesForConsumedMessage = ({
       createNode({
         id: producerId,
         type: producer.collection,
-        data: { mode, service: { ...producer.data } },
+        data: {
+          mode,
+          service: { ...producer.data },
+          contextMenu: buildContextMenuForService({
+            id: producer.data.id,
+            version: producer.data.version,
+            specifications: producer.data.specifications as { type: string; path: string }[],
+            repository: producer.data.repository as { url: string },
+          }),
+        },
         position: { x: 0, y: 0 },
       })
     );
@@ -803,7 +874,17 @@ export const getNodesAndEdgesForProducedMessage = ({
     createNode({
       id: messageId,
       type: message.collection,
-      data: { mode, message: { ...message.data } },
+      data: {
+        mode,
+        message: { ...message.data },
+        contextMenu: buildContextMenuForMessage({
+          id: message.data.id,
+          version: message.data.version,
+          name: message.data.name,
+          collection: message.collection,
+          schemaPath: (message.data as any).schemaPath,
+        }),
+      },
       position: { x: 0, y: 0 },
     })
   );
@@ -813,7 +894,16 @@ export const getNodesAndEdgesForProducedMessage = ({
     createNode({
       id: generateIdForNode(source),
       type: source.collection,
-      data: { mode, service: { ...source.data } },
+      data: {
+        mode,
+        service: { ...source.data },
+        contextMenu: buildContextMenuForService({
+          id: source.data.id,
+          version: source.data.version,
+          specifications: source.data.specifications as { type: string; path: string }[],
+          repository: source.data.repository as { url: string },
+        }),
+      },
       position: { x: 0, y: 0 },
     })
   );
@@ -862,7 +952,15 @@ export const getNodesAndEdgesForProducedMessage = ({
         createNode({
           id: channelId,
           type: channel.collection,
-          data: { mode, channel: { ...channel.data, ...channel, mode, id: channel.data.id } },
+          data: {
+            mode,
+            channel: { ...channel.data, ...channel, mode, id: channel.data.id },
+            contextMenu: buildContextMenuForResource({
+              collection: 'channels',
+              id: channel.data.id,
+              version: channel.data.version,
+            }),
+          },
           position: { x: 0, y: 0 },
         })
       );
@@ -897,7 +995,16 @@ export const getNodesAndEdgesForProducedMessage = ({
       createNode({
         id: consumerId,
         type: consumer.collection,
-        data: { mode, service: { ...consumer.data } },
+        data: {
+          mode,
+          service: { ...consumer.data },
+          contextMenu: buildContextMenuForService({
+            id: consumer.data.id,
+            version: consumer.data.version,
+            specifications: consumer.data.specifications as { type: string; path: string }[],
+            repository: consumer.data.repository as { url: string },
+          }),
+        },
         position: { x: 0, y: 0 },
       })
     );
@@ -950,7 +1057,15 @@ export const getNodesAndEdgesForProducedMessage = ({
         createNode({
           id: generateIdForNode(channel),
           type: channel.collection,
-          data: { mode, channel: { ...channel.data, ...channel } },
+          data: {
+            mode,
+            channel: { ...channel.data, ...channel },
+            contextMenu: buildContextMenuForResource({
+              collection: 'channels',
+              id: channel.data.id,
+              version: channel.data.version,
+            }),
+          },
           position: { x: 0, y: 0 },
         })
       );

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

@@ -6,6 +6,8 @@ import {
   generatedIdForEdge,
   calculatedNodes,
   createEdge,
+  buildContextMenuForService,
+  buildContextMenuForResource,
 } from '@utils/node-graphs/utils/utils';
 
 import { findMatchingNodes, findInMap, createVersionedMap } from '@utils/collections/util';
@@ -145,8 +147,16 @@ export const getNodesAndEdges = async ({
     id: generateIdForNode(service),
     sourcePosition: 'right',
     targetPosition: 'left',
-    // data: { mode, service: { ...service, ...service.data } },
-    data: { mode, service: { ...service.data } },
+    data: {
+      mode,
+      service: { ...service.data },
+      contextMenu: buildContextMenuForService({
+        id: service.data.id,
+        version: service.data.version,
+        specifications: service.data.specifications as { type: string; path: string }[],
+        repository: service.data.repository as { url: string },
+      }),
+    },
     type: service.collection,
   });
 
@@ -156,7 +166,11 @@ export const getNodesAndEdges = async ({
       id: generateIdForNode(writeTo),
       sourcePosition: 'right',
       targetPosition: 'left',
-      data: { mode, data: { ...writeTo.data } },
+      data: {
+        mode,
+        data: { ...writeTo.data },
+        contextMenu: buildContextMenuForResource({ collection: 'entities', id: writeTo.data.id, version: writeTo.data.version }),
+      },
       type: 'data',
     });
 
@@ -172,8 +186,8 @@ export const getNodesAndEdges = async ({
           markerEnd: {
             type: MarkerType.ArrowClosed,
             color: '#666',
-            width: 40,
-            height: 40,
+            width: 20,
+            height: 20,
           },
         })
       );
@@ -186,7 +200,15 @@ export const getNodesAndEdges = async ({
       id: generateIdForNode(readFrom),
       sourcePosition: 'right',
       targetPosition: 'left',
-      data: { mode, data: { ...readFrom.data } },
+      data: {
+        mode,
+        data: { ...readFrom.data },
+        contextMenu: buildContextMenuForResource({
+          collection: 'entities',
+          id: readFrom.data.id,
+          version: readFrom.data.version,
+        }),
+      },
       type: 'data',
     });
 
@@ -202,8 +224,8 @@ export const getNodesAndEdges = async ({
           markerStart: {
             type: MarkerType.ArrowClosed,
             color: '#666',
-            width: 40,
-            height: 40,
+            width: 20,
+            height: 20,
           },
           markerEnd: undefined,
         })
@@ -243,8 +265,8 @@ export const getNodesAndEdges = async ({
           data: { message: { ...message.data } },
           markerEnd: {
             type: MarkerType.ArrowClosed,
-            width: 40,
-            height: 40,
+            width: 20,
+            height: 20,
           },
           style: {
             strokeWidth: 1,
@@ -265,14 +287,14 @@ export const getNodesAndEdges = async ({
       markerStart: {
         type: MarkerType.ArrowClosed,
         color: '#666',
-        width: 40,
-        height: 40,
+        width: 20,
+        height: 20,
       },
       markerEnd: {
         type: MarkerType.ArrowClosed,
         color: '#666',
-        width: 40,
-        height: 40,
+        width: 20,
+        height: 20,
       },
     });
   });

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

@@ -3,6 +3,7 @@
 import { MarkerType, Position, type Edge, type Node } from '@xyflow/react';
 import dagre from 'dagre';
 import { getItemsFromCollectionByIdAndSemverOrLatest } from '@utils/collections/util';
+import { buildUrl } from '@utils/url-builder';
 interface BaseCollectionData {
   id: string;
   version: string;
@@ -93,13 +94,13 @@ export const createEdge = (edgeOptions: Edge) => {
     animated: false,
     // markerStart: {
     //   type: MarkerType.Arrow,
-    //   width: 40,
-    //   height: 40,
+    //   width: 20,
+    //   height: 20,
     // },
     markerEnd: {
       type: MarkerType.ArrowClosed,
-      width: 40,
-      height: 40,
+      width: 20,
+      height: 20,
     },
     style: {
       strokeWidth: 1,
@@ -118,6 +119,116 @@ export const createNode = (values: Node): Node => {
 
 type DagreGraph = any;
 
+type ContextMenuItem = {
+  label: string;
+  href: string;
+  download?: string;
+  external?: boolean;
+  separator?: boolean;
+};
+
+export const buildContextMenuForMessage = ({
+  id,
+  version,
+  name,
+  collection,
+  schemaPath,
+}: {
+  id: string;
+  version: string;
+  name: string;
+  collection: string;
+  schemaPath?: string;
+}): ContextMenuItem[] => {
+  const items: ContextMenuItem[] = [{ label: 'Read documentation', href: buildUrl(`/docs/${collection}/${id}/${version}`) }];
+
+  if (schemaPath) {
+    items.push({
+      label: 'Download schema',
+      href: buildUrl(`/generated/${collection}/${id}/${schemaPath}`, true),
+      download: `${name}(${version})-${schemaPath}`,
+      external: true,
+      separator: true,
+    });
+  }
+
+  items.push({
+    label: 'Read changelog',
+    href: buildUrl(`/docs/${collection}/${id}/${version}/changelog`),
+    external: true,
+    separator: !schemaPath,
+  });
+
+  return items;
+};
+
+export const buildContextMenuForService = ({
+  id,
+  version,
+  specifications,
+  repository,
+}: {
+  id: string;
+  version: string;
+  specifications?: { type: string; path: string }[];
+  repository?: { url: string };
+}): ContextMenuItem[] => {
+  const items: ContextMenuItem[] = [{ label: 'Read documentation', href: buildUrl(`/docs/services/${id}/${version}`) }];
+
+  if (specifications && Array.isArray(specifications)) {
+    for (const spec of specifications) {
+      const specType = spec.type?.toLowerCase() || '';
+      let label = 'View specification';
+      if (specType.includes('asyncapi')) label = 'View AsyncAPI spec';
+      else if (specType.includes('openapi')) label = 'View OpenAPI spec';
+
+      items.push({
+        label,
+        href: buildUrl(`/docs/services/${id}/${version}/spec/${spec.type}`),
+        separator: items.length === 1,
+      });
+    }
+  }
+
+  if (repository?.url) {
+    items.push({
+      label: 'View code repository',
+      href: repository.url,
+      external: true,
+      separator: true,
+    });
+  }
+
+  items.push({
+    label: 'Read changelog',
+    href: buildUrl(`/docs/services/${id}/${version}/changelog`),
+    external: true,
+    separator: !repository?.url && (!specifications || specifications.length === 0),
+  });
+
+  return items;
+};
+
+export const buildContextMenuForResource = ({
+  collection,
+  id,
+  version,
+}: {
+  collection: string;
+  id: string;
+  version: string;
+}): ContextMenuItem[] => {
+  return [
+    { label: 'Read documentation', href: buildUrl(`/docs/${collection}/${id}/${version}`) },
+    {
+      label: 'Read changelog',
+      href: buildUrl(`/docs/${collection}/${id}/${version}/changelog`),
+      external: true,
+      separator: true,
+    },
+  ];
+};
+
 export const getNodesAndEdgesFromDagre = ({
   nodes,
   edges,

package/package.json

@@ -6,7 +6,7 @@
     "url": "https://github.com/event-catalog/eventcatalog.git"
   },
   "type": "module",
-  "version": "3.12.7",
+  "version": "3.12.9-beta.0",
   "publishConfig": {
     "access": "public"
   },
@@ -32,7 +32,6 @@
     "@asyncapi/react-component": "2.4.3",
     "@auth/core": "^0.37.4",
     "@eventcatalog/license": "^0.0.7",
-    "@eventcatalog/visualizer": "^0.0.6",
     "@fontsource/inter": "^5.2.5",
     "@headlessui/react": "^2.0.3",
     "@heroicons/react": "^2.1.3",
@@ -102,8 +101,9 @@
     "update-notifier": "^7.3.1",
     "uuid": "^10.0.0",
     "zod": "^3.25.0",
-    "@eventcatalog/linter": "1.0.2",
-    "@eventcatalog/sdk": "2.13.1"
+    "@eventcatalog/linter": "1.0.3",
+    "@eventcatalog/visualiser": "^0.0.2-beta.0",
+    "@eventcatalog/sdk": "2.13.2"
   },
   "devDependencies": {
     "@astrojs/check": "^0.9.6",

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

@@ -1,62 +0,0 @@
-import { Panel, useReactFlow, getNodesBounds, getViewportForBounds } from '@xyflow/react';
-import { toPng } from 'html-to-image';
-import { DocumentArrowDownIcon } from '@heroicons/react/24/outline';
-
-function downloadImage(dataUrl: string, filename?: string) {
-  const a = document.createElement('a');
-
-  a.setAttribute('download', `${filename || 'eventcatalog'}.png`);
-  a.setAttribute('href', dataUrl);
-  a.click();
-}
-
-const imageWidth = 1024;
-const imageHeight = 768;
-
-function DownloadButton({ filename, addPadding = true }: { filename?: string; addPadding?: boolean }) {
-  const { getNodes } = useReactFlow();
-  const onClick = () => {
-    const nodesBounds = getNodesBounds(getNodes());
-    const width = imageWidth > nodesBounds.width ? imageWidth : nodesBounds.width;
-    const height = imageHeight > nodesBounds.height ? imageHeight : nodesBounds.height;
-    const viewport = getViewportForBounds(nodesBounds, width, height, 0.5, 2, 0);
-
-    // Hide the button
-    // @ts-ignore
-    document.getElementById('download-visual').style.display = 'none';
-    // @ts-ignore
-    document.querySelector('.react-flow__controls').style.display = 'none';
-
-    // @ts-ignore
-    toPng(document.querySelector('.react-flow__viewport'), {
-      backgroundColor: '#f1f1f1',
-      width,
-      height,
-      style: {
-        width,
-        height,
-        transform: `translate(${viewport.x}px, ${viewport.y}px) scale(${viewport.zoom})`,
-      },
-    }).then((dataUrl: string) => {
-      downloadImage(dataUrl, filename);
-      // @ts-ignore
-      document.getElementById('download-visual').style.display = 'block';
-      // @ts-ignore
-      document.querySelector('.react-flow__controls').style.display = 'block';
-    });
-  };
-
-  return (
-    <div id="download-visual">
-      <button
-        className={`hidden md:flex bg-white group download-btn items-center space-x-1 text-[14px] border border-gray-200 px-1 py-0.5 rounded-md hover:bg-gray-100/50 ${addPadding ? 'mt-14' : '-mt-1'}`}
-        onClick={onClick}
-      >
-        <DocumentArrowDownIcon className="w-4 h-4 group-hover:text-primary" />
-        <span className="group-hover:text-primary">Export visual </span>
-      </button>
-    </div>
-  );
-}
-
-export default DownloadButton;