@eventcatalog/core 2.14.2 → 2.15.0

package/dist/watcher.cjs

@@ -0,0 +1,223 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/watcher.js
+var watcher_exports = {};
+__export(watcher_exports, {
+  watch: () => watch
+});
+module.exports = __toCommonJS(watcher_exports);
+var import_watcher = __toESM(require("@parcel/watcher"), 1);
+var import_node_fs2 = __toESM(require("fs"), 1);
+
+// src/map-catalog-to-astro.js
+var import_node_path = __toESM(require("path"), 1);
+var COLLECTION_KEYS = [
+  "events",
+  "commands",
+  "services",
+  "users",
+  "teams",
+  "domains",
+  "flows",
+  "pages",
+  "changelogs",
+  "queries",
+  "channels"
+];
+function mapCatalogToAstro({ filePath, astroDir, projectDir }) {
+  const relativeFilePath = removeBasePath(filePath, projectDir);
+  if (!isCatalogRelated(relativeFilePath)) {
+    return [];
+  }
+  const baseTargetPaths = getBaseTargetPaths(relativeFilePath);
+  const relativeTargetPath = getRelativeTargetPath(relativeFilePath);
+  return baseTargetPaths.map(
+    (base) => import_node_path.default.join(astroDir, base, relativeTargetPath.replace("index.md", "index.mdx").replace("changelog.md", "changelog.mdx"))
+  );
+}
+function removeBasePath(fullPath, basePath) {
+  const relativePath = import_node_path.default.relative(basePath, fullPath);
+  return relativePath.startsWith("..") ? fullPath : relativePath;
+}
+function isCollectionKey(key) {
+  return COLLECTION_KEYS.includes(key);
+}
+function isCatalogRelated(filePath) {
+  const filePathArr = filePath.split(import_node_path.default.sep).filter(Boolean);
+  if ([
+    "eventcatalog.config.js",
+    // config file at root
+    "eventcatalog.styles.css",
+    // custom styles file at root
+    "components",
+    // custom components
+    "public",
+    // public assets
+    ...COLLECTION_KEYS
+  ].includes(filePathArr[0])) {
+    return true;
+  }
+  return false;
+}
+function getBaseTargetPaths(filePath) {
+  const filePathArr = filePath.split(import_node_path.default.sep).filter(Boolean);
+  if (isCollectionKey(filePathArr[0])) {
+    if (filePathArr[filePathArr.length - 1] == "changelog.md") {
+      return [import_node_path.default.join("src", "content", "changelogs")];
+    }
+    if (filePathArr[filePathArr.length - 1].match(/\.md$/)) {
+      return [import_node_path.default.join("src", "content")];
+    }
+    const hasExtension = (str) => /\.[a-zA-Z0-9]{2,}$/.test(str);
+    if (hasExtension(filePath)) {
+      return [import_node_path.default.join("public", "generated"), import_node_path.default.join("src", "catalog-files")];
+    }
+    return [import_node_path.default.join("public", "generated"), import_node_path.default.join("src", "catalog-files"), import_node_path.default.join("src", "content")];
+  }
+  if (filePathArr[0] == "components") {
+    return [import_node_path.default.join("src", "custom-defined-components")];
+  }
+  if (filePathArr[0] == "public") {
+    return [import_node_path.default.join("public")];
+  }
+  return [import_node_path.default.join("/")];
+}
+function getRelativeTargetPath(filePath) {
+  const filePathArr = filePath.split(import_node_path.default.sep).filter(Boolean);
+  if (filePathArr[0] == "public" || filePathArr[0] == "components") {
+    filePathArr.shift();
+  }
+  const relativePath = [];
+  for (let i = filePathArr.length - 1; i >= 0; i--) {
+    relativePath.unshift(filePathArr[i]);
+    if (isCollectionKey(filePathArr[i])) break;
+  }
+  return import_node_path.default.join(...relativePath);
+}
+
+// src/watcher.js
+var import_rimraf = require("rimraf");
+
+// src/eventcatalog-config-file-utils.js
+var import_promises = require("fs/promises");
+var import_node_fs = require("fs");
+var import_promises2 = require("fs/promises");
+var import_node_path2 = __toESM(require("path"), 1);
+var import_uuid = require("uuid");
+var import_gray_matter = __toESM(require("gray-matter"), 1);
+function addPropertyToFrontMatter(input, newProperty, newValue) {
+  const file = (0, import_gray_matter.default)(input);
+  return import_gray_matter.default.stringify(file.content, { ...file.data, [newProperty]: newValue });
+}
+
+// src/watcher.js
+async function watch(projectDirectory, catalogDirectory, callback = void 0) {
+  const subscription = await import_watcher.default.subscribe(
+    projectDirectory,
+    compose(
+      /**
+       * @param {Error|null} err
+       * @param {Event[]} events
+       * @returns {unknown}
+       */
+      (err, events) => {
+        if (err) {
+          return;
+        }
+        for (let event of events) {
+          const { path: filePath, type } = event;
+          const astroPaths = mapCatalogToAstro({
+            filePath,
+            astroDir: catalogDirectory,
+            projectDir: projectDirectory
+          });
+          for (const astroPath of astroPaths) {
+            switch (type) {
+              case "create":
+              case "update":
+                try {
+                  if (astroPath.endsWith(".mdx")) {
+                    const content = import_node_fs2.default.readFileSync(astroPath, "utf-8");
+                    const frontmatter = addPropertyToFrontMatter(content, "pathToFile", filePath);
+                    import_node_fs2.default.writeFileSync(astroPath, frontmatter);
+                  }
+                } catch (error) {
+                }
+                if (import_node_fs2.default.statSync(filePath).isDirectory()) import_node_fs2.default.mkdirSync(astroPath, { recursive: true });
+                else retryEPERM(import_node_fs2.default.cpSync)(filePath, astroPath);
+                break;
+              case "delete":
+                retryEPERM(import_rimraf.rimrafSync)(astroPath);
+                break;
+            }
+          }
+        }
+      },
+      callback
+    ),
+    {
+      ignore: [`**/${catalogDirectory}/!(${projectDirectory})**`]
+    }
+  );
+  return () => subscription.unsubscribe();
+}
+function compose(...fns) {
+  return function(err, events) {
+    fns.filter(Boolean).forEach((fn, i) => {
+      try {
+        fn(err, events);
+      } catch (error) {
+        console.error({ error });
+        throw error;
+      }
+    });
+  };
+}
+var MAX_RETRIES = 5;
+var DELAY_MS = 100;
+function retryEPERM(fn) {
+  return (...args) => {
+    let retries = 0;
+    while (retries < MAX_RETRIES) {
+      try {
+        return fn(...args);
+      } catch (err) {
+        if (err.code !== "EPERM") throw err;
+        setTimeout(() => {
+        }, DELAY_MS);
+        retries += 1;
+      }
+    }
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  watch
+});

package/dist/watcher.d.cts

@@ -0,0 +1,21 @@
+/**
+ * @typedef {Object} Event
+ * @property {string} path
+ * @property {"create"|"update"|"delete"} type
+ *
+ * @typedef {(err: Error | null, events: Event[]) => unknown} SubscribeCallback
+ */
+/**
+ *
+ * @param {string} projectDirectory
+ * @param {string} catalogDirectory
+ * @param {SubscribeCallback|undefined} callback
+ */
+declare function watch(projectDirectory: string, catalogDirectory: string, callback?: SubscribeCallback | undefined): Promise<() => Promise<void>>;
+type Event = {
+    path: string;
+    type: "create" | "update" | "delete";
+};
+type SubscribeCallback = (err: Error | null, events: Event[]) => unknown;
+
+export { type Event, type SubscribeCallback, watch };

package/dist/watcher.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @typedef {Object} Event
+ * @property {string} path
+ * @property {"create"|"update"|"delete"} type
+ *
+ * @typedef {(err: Error | null, events: Event[]) => unknown} SubscribeCallback
+ */
+/**
+ *
+ * @param {string} projectDirectory
+ * @param {string} catalogDirectory
+ * @param {SubscribeCallback|undefined} callback
+ */
+declare function watch(projectDirectory: string, catalogDirectory: string, callback?: SubscribeCallback | undefined): Promise<() => Promise<void>>;
+type Event = {
+    path: string;
+    type: "create" | "update" | "delete";
+};
+type SubscribeCallback = (err: Error | null, events: Event[]) => unknown;
+
+export { type Event, type SubscribeCallback, watch };

package/dist/watcher.js

@@ -0,0 +1,8 @@
+import {
+  watch
+} from "./chunk-7HYM3M5I.js";
+import "./chunk-E7TXTI7G.js";
+import "./chunk-PK2EQVPD.js";
+export {
+  watch
+};

package/eventcatalog/public/icons/ms-teams.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="none"><path fill="#5059C9" d="M10.765 6.875h3.616c.342 0 .619.276.619.617v3.288a2.272 2.272 0 01-2.274 2.27h-.01a2.272 2.272 0 01-2.274-2.27V7.199c0-.179.145-.323.323-.323zM13.21 6.225c.808 0 1.464-.655 1.464-1.462 0-.808-.656-1.463-1.465-1.463s-1.465.655-1.465 1.463c0 .807.656 1.462 1.465 1.462z"/><path fill="#7B83EB" d="M8.651 6.225a2.114 2.114 0 002.117-2.112A2.114 2.114 0 008.65 2a2.114 2.114 0 00-2.116 2.112c0 1.167.947 2.113 2.116 2.113zM11.473 6.875h-5.97a.611.611 0 00-.596.625v3.75A3.669 3.669 0 008.488 15a3.669 3.669 0 003.582-3.75V7.5a.611.611 0 00-.597-.625z"/><path fill="#000000" d="M8.814 6.875v5.255a.598.598 0 01-.596.595H5.193a3.951 3.951 0 01-.287-1.476V7.5a.61.61 0 01.597-.624h3.31z" opacity=".1"/><path fill="#000000" d="M8.488 6.875v5.58a.6.6 0 01-.596.595H5.347a3.22 3.22 0 01-.267-.65 3.951 3.951 0 01-.172-1.15V7.498a.61.61 0 01.596-.624h2.985z" opacity=".2"/><path fill="#000000" d="M8.488 6.875v4.93a.6.6 0 01-.596.595H5.08a3.951 3.951 0 01-.172-1.15V7.498a.61.61 0 01.596-.624h2.985z" opacity=".2"/><path fill="#000000" d="M8.163 6.875v4.93a.6.6 0 01-.596.595H5.079a3.951 3.951 0 01-.172-1.15V7.498a.61.61 0 01.596-.624h2.66z" opacity=".2"/><path fill="#000000" d="M8.814 5.195v1.024c-.055.003-.107.006-.163.006-.055 0-.107-.003-.163-.006A2.115 2.115 0 016.593 4.6h1.625a.598.598 0 01.596.594z" opacity=".1"/><path fill="#000000" d="M8.488 5.52v.699a2.115 2.115 0 01-1.79-1.293h1.195a.598.598 0 01.595.594z" opacity=".2"/><path fill="#000000" d="M8.488 5.52v.699a2.115 2.115 0 01-1.79-1.293h1.195a.598.598 0 01.595.594z" opacity=".2"/><path fill="#000000" d="M8.163 5.52v.647a2.115 2.115 0 01-1.465-1.242h.87a.598.598 0 01.595.595z" opacity=".2"/><path fill="url(#microsoft-teams-color-16__paint0_linear_2372_494)" d="M1.597 4.925h5.969c.33 0 .597.267.597.596v5.958a.596.596 0 01-.597.596h-5.97A.596.596 0 011 11.479V5.521c0-.33.267-.596.597-.596z"/><path fill="#ffffff" d="M6.152 7.193H4.959v3.243h-.76V7.193H3.01v-.63h3.141v.63z"/><defs><linearGradient id="microsoft-teams-color-16__paint0_linear_2372_494" x1="2.244" x2="6.906" y1="4.46" y2="12.548" gradientUnits="userSpaceOnUse"><stop stop-color="#5A62C3"/><stop offset=".5" stop-color="#4D55BD"/><stop offset="1" stop-color="#3940AB"/></linearGradient></defs></svg>

package/{src → eventcatalog/src}/components/MDX/NodeGraph/NodeGraph.tsx

@@ -11,9 +11,6 @@ import ReactFlow, {
   type Edge,
   type Node,
   useReactFlow,
-  getBezierPath,
-  BaseEdge,
-  SmoothStepEdge,
 } from 'reactflow';
 import 'reactflow/dist/style.css';
 
@@ -34,7 +31,7 @@ import DownloadButton from './DownloadButton';
 import { buildUrl } from '@utils/url-builder';
 import ChannelNode from './Nodes/Channel';
 import { CogIcon } from '@heroicons/react/20/solid';
-
+import { useEventCatalogVisualiser } from 'src/hooks/eventcatalog-visualizer';
 interface Props {
   nodes: any;
   edges: any;
@@ -85,7 +82,7 @@ const NodeGraphBuilder = ({
   const [isSettingsOpen, setIsSettingsOpen] = useState(false);
   const [isAnimated, setIsAnimated] = useState(false);
   const [animateMessages, setAnimateMessages] = useState(false);
-
+  const { hideChannels, toggleChannelsVisibility } = useEventCatalogVisualiser({ nodes, edges, setNodes, setEdges });
   const { fitView } = useReactFlow();
 
   const resetNodesAndEdges = useCallback(() => {
@@ -162,16 +159,6 @@ const NodeGraphBuilder = ({
     [nodes, edges, setNodes, setEdges, resetNodesAndEdges, fitView]
   );
 
-  const toggleAnimation = () => {
-    setIsAnimated(!isAnimated);
-    setEdges((eds) =>
-      eds.map((edge) => ({
-        ...edge,
-        animated: !isAnimated,
-      }))
-    );
-  };
-
   const toggleAnimateMessages = () => {
     setAnimateMessages(!animateMessages);
     localStorage.setItem('EventCatalog:animateMessages', JSON.stringify(!animateMessages));
@@ -196,6 +183,10 @@ const NodeGraphBuilder = ({
     );
   }, [animateMessages]);
 
+  useEffect(() => {
+    fitView({ duration: 800 });
+  }, [nodes, edges]);
+
   const handlePaneClick = useCallback(() => {
     setIsSettingsOpen(false);
     resetNodesAndEdges();
@@ -319,6 +310,27 @@ const NodeGraphBuilder = ({
               </div>
               <p className="text-[10px] text-gray-500">Animate events, queries and commands.</p>
             </div>
+            <div>
+              <div className="flex items-center justify-between">
+                <label htmlFor="message-animation-toggle" className="text-sm font-medium text-gray-700">
+                  Hide Channels
+                </label>
+                <button
+                  id="message-animation-toggle"
+                  onClick={toggleChannelsVisibility}
+                  className={`${
+                    hideChannels ? 'bg-purple-600' : 'bg-gray-200'
+                  } relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2`}
+                >
+                  <span
+                    className={`${
+                      hideChannels ? 'translate-x-6' : 'translate-x-1'
+                    } inline-block h-4 w-4 transform rounded-full bg-white transition-transform`}
+                  />
+                </button>
+              </div>
+              <p className="text-[10px] text-gray-500">Show or hide channels in the visualizer.</p>
+            </div>
           </div>
         </div>
       )}
@@ -341,29 +353,6 @@ const NodeGraphBuilder = ({
                 </li>
               ))}
             </ul>
-            {/* <span className="font-bold">Key</span> */}
-            {/* <ul className="m-0 p-0">
-              <li className="flex space-x-2 items-center text-[10px]">
-                <span className="w-2 h-2 bg-orange-500 block" />
-                <span className="block">Events</span>
-              </li>
-              <li className="flex space-x-2 items-center text-[10px]">
-                <span className="w-2 h-2 bg-pink-500 block" />
-                <span className="block">Service</span>
-              </li>
-              <li className="flex space-x-2 items-center text-[10px]">
-                <span className="w-2 h-2 bg-blue-500 block" />
-                <span className="block">Command</span>
-              </li>
-              <li className="flex space-x-2 items-center text-[10px]">
-                <span className="w-2 h-2 bg-green-500 block" />
-                <span className="block">Query</span>
-              </li>
-              <li className="flex space-x-2 items-center text-[10px]">
-                <span className="w-2 h-2 bg-gray-500 block" />
-                <span className="block">Channel</span>
-              </li>
-            </ul> */}
           </div>
         </Panel>
       )}

package/{src → eventcatalog/src}/content/config.ts

@@ -231,6 +231,7 @@ const users = defineCollection({
     hidden: z.boolean().optional(),
     email: z.string().optional(),
     slackDirectMessageUrl: z.string().optional(),
+    msTeamsDirectMessageUrl: z.string().optional(),
     ownedDomains: z.array(reference('domains')).optional(),
     ownedServices: z.array(reference('services')).optional(),
     ownedEvents: z.array(reference('events')).optional(),
@@ -248,6 +249,7 @@ const teams = defineCollection({
     email: z.string().optional(),
     hidden: z.boolean().optional(),
     slackDirectMessageUrl: z.string().optional(),
+    msTeamsDirectMessageUrl: z.string().optional(),
     members: z.array(reference('users')).optional(),
     ownedCommands: z.array(reference('commands')).optional(),
     ownedDomains: z.array(reference('domains')).optional(),

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

@@ -0,0 +1,89 @@
+import { useCallback, useMemo, useState, useEffect } from 'react';
+import { type Edge, type Node } from 'reactflow';
+import {
+  createEdge,
+  generatedIdForEdge,
+  generateIdForNode,
+  getEdgeLabelForMessageAsSource,
+  getEdgeLabelForServiceAsTarget,
+  getNodesAndEdgesFromDagre,
+} from '@utils/node-graphs/utils/utils';
+
+interface EventCatalogVisualizerProps {
+  nodes: Node[];
+  edges: Edge[];
+  setNodes: (nodes: Node[]) => void;
+  setEdges: (edges: Edge[]) => void;
+}
+
+export const useEventCatalogVisualiser = ({ nodes, edges, setNodes, setEdges }: EventCatalogVisualizerProps) => {
+  const [hideChannels, setHideChannels] = useState(false);
+  const [initialNodes] = useState(nodes);
+  const [initialEdges] = useState(edges);
+
+  // Initialize hideChannels from localStorage
+  useEffect(() => {
+    const storedHideChannels = localStorage.getItem('EventCatalog:hideChannels');
+    if (storedHideChannels !== null) {
+      setHideChannels(storedHideChannels === 'true');
+    }
+  }, []);
+
+  const toggleChannelsVisibility = useCallback(() => {
+    setHideChannels((prev) => {
+      const newValue = !prev;
+      localStorage.setItem('EventCatalog:hideChannels', JSON.stringify(newValue));
+      return newValue;
+    });
+  }, []);
+
+  const channels = useMemo(() => nodes.filter((node) => node.type === 'channels'), [nodes]);
+  const updatedNodes = useMemo(() => nodes.filter((node) => node.type !== 'channels'), [nodes]);
+
+  const updatedEdges = useMemo(() => {
+    return 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);
+
+      if (!sourceIsChannel && !targetIsChannel) {
+        return [...acc, edge];
+      }
+
+      if (sourceIsChannel) {
+        const edgeLabel =
+          data.target.collection === 'services'
+            ? getEdgeLabelForMessageAsSource(data.source)
+            : getEdgeLabelForServiceAsTarget(data.target);
+
+        return [
+          ...acc,
+          createEdge({
+            id: generatedIdForEdge(data.source, data.target),
+            source: generateIdForNode(data.source),
+            target: generateIdForNode(data.target),
+            label: edgeLabel,
+          }),
+        ];
+      }
+
+      return [...acc, edge];
+    }, []);
+  }, [edges, channels]);
+
+  useEffect(() => {
+    if (hideChannels) {
+      const { nodes: newNodes, edges: newEdges } = getNodesAndEdgesFromDagre({ nodes: updatedNodes, edges: updatedEdges });
+      setNodes(newNodes);
+      setEdges(newEdges);
+    } else {
+      setNodes(initialNodes);
+      setEdges(initialEdges);
+    }
+  }, [hideChannels]);
+
+  return {
+    hideChannels,
+    toggleChannelsVisibility,
+  };
+};

package/{src → eventcatalog/src}/pages/docs/[type]/[id]/[version]/asyncapi/index.astro

@@ -4,6 +4,7 @@ import { readFileSync } from 'fs';
 import { createElement } from 'react';
 import { renderToString } from 'react-dom/server';
 import { Parser } from '@asyncapi/parser';
+import { AvroSchemaParser } from '@asyncapi/avro-schema-parser';
 
 import type { CollectionTypes, PageTypes } from '@types';
 
@@ -46,7 +47,7 @@ const fileContent = readFileSync(pathOnDisk, 'utf-8');
 
 // AsyncAPI parser will parser schemas for users, they can turn this off.
 const parseSchemas = Config?.asyncAPI?.renderParsedSchemas ?? true;
-const parsed = await new Parser().parse(fileContent, { parseSchemas });
+const parsed = await new Parser({ schemaParsers: [AvroSchemaParser()] }).parse(fileContent, { parseSchemas });
 const stringified = parsed.document?.json();
 const config: ConfigInterface = { show: { sidebar: true, errors: true } };
 

package/{src → eventcatalog/src}/pages/docs/teams/[id]/index.astro

@@ -99,6 +99,16 @@ const ownedEventsList = [...events, ...commands].map((p) => ({
                   </div>
                 )
               }
+              {
+                props.data.msTeamsDirectMessageUrl && (
+                  <div class="flex space-x-1 items-center text-xs text-gray-500 font-bold hover:underline hover:text-primary">
+                    <img src="/icons/ms-teams.svg" class="w-4 h-4" />
+                    <a href={`${props.data.msTeamsDirectMessageUrl}`} target="_blank" rel="noopener noreferrer">
+                      Send DM on Teams
+                    </a>
+                  </div>
+                )
+              }
             </div>
           </div>
         </div>

package/{src → eventcatalog/src}/pages/docs/users/[id]/index.astro

@@ -96,6 +96,16 @@ const associatedTeams = teams.map((o) => ({
                     </div>
                   )
                 }
+                {
+                  props.data.msTeamsDirectMessageUrl && (
+                    <div class="flex space-x-1 items-center text-xs text-gray-500 font-bold hover:underline hover:text-primary">
+                      <img src="/icons/ms-teams.svg" class="w-4 h-4" />
+                      <a href={`${props.data.msTeamsDirectMessageUrl}`} target="_blank" rel="noopener noreferrer">
+                        Send DM on Teams
+                      </a>
+                    </div>
+                  )
+                }
               </div>
             </div>
           </div>

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

@@ -9,6 +9,8 @@ import {
   generatedIdForEdge,
   generateIdForNode,
   getChannelNodesAndEdges,
+  getEdgeLabelForMessageAsSource,
+  getEdgeLabelForServiceAsTarget,
 } from './utils/utils';
 import { MarkerType } from 'reactflow';
 import { findMatchingNodes } from '@utils/collections/util';
@@ -26,33 +28,6 @@ interface Props {
   collection?: CollectionEntry<CollectionMessageTypes>[];
 }
 
-const getEdgeLabelForServiceAsTarget = (data: CollectionEntry<CollectionMessageTypes>) => {
-  const type = data.collection;
-  switch (type) {
-    case 'commands':
-      return 'invokes';
-    case 'events':
-      return 'publishes event';
-    case 'queries':
-      return 'requests';
-    default:
-      return 'sends to';
-  }
-};
-const getEdgeLabelForMessageAsSource = (data: CollectionEntry<CollectionMessageTypes>) => {
-  const type = data.collection;
-  switch (type) {
-    case 'commands':
-      return 'accepts';
-    case 'events':
-      return 'subscribed by';
-    case 'queries':
-      return 'accepts';
-    default:
-      return 'sends to';
-  }
-};
-
 const getNodesAndEdges = async ({ id, version, defaultFlow, mode = 'simple', collection = [] }: Props) => {
   const flow = defaultFlow || createDagreGraph({ ranksep: 300, nodesep: 50 });
   const nodes = [] as any,