@eventcatalog/core 2.12.2 → 2.13.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @eventcatalog/core
 
+## 2.13.0
+
+### Minor Changes
+
+- 003c1f2: feat(core): adding channels to eventcatalog
+
+## 2.12.3
+
+### Patch Changes
+
+- d0d13c9: chore(core): fixing z-index issue with the header nav and removing the max-width
+
 ## 2.12.2
 
 ### Patch Changes

package/package.json

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

package/public/icons/protocols/kafka.svg

@@ -0,0 +1 @@
+<svg width="100%" height="100%"  viewBox="-78.5 0 413 413" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" fill="currentColor" stroke="currentColor" stroke-width="0.00413"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#CCCCCC" stroke-width="5.782000000000001"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M87.9320692,36.714181 C83.382936,32.1427482 77.0364491,29.3196096 69.9808327,29.3196096 C62.9519759,29.3196096 56.6545483,32.1427482 52.1589343,36.714181 L52.0295962,36.714181 C47.4938428,41.2633143 44.6707042,47.614261 44.6707042,54.6431179 C44.6707042,61.6987343 47.4938428,67.9961618 52.0295962,72.5185355 L52.1589343,72.6211139 C56.6545483,77.1702472 62.9519759,79.9666261 69.9808327,79.9666261 C77.0364491,79.9666261 83.382936,77.1702472 87.9320692,72.6211139 L87.9989682,72.5185355 C92.5570213,67.9961618 95.3534002,61.6987343 95.3534002,54.6431179 C95.3534002,47.614261 92.5570213,41.2633143 87.9989682,36.714181 L87.9320692,36.714181 Z M69.9808327,383.353672 C77.0364491,383.353672 83.382936,380.481475 87.9320692,375.985861 L87.9989682,375.852063 C92.5570213,371.365368 95.3534002,365.014422 95.3534002,358.034624 C95.3534002,350.979008 92.5570213,344.654821 87.9989682,340.083388 L87.9320692,340.083388 C83.382936,335.458436 77.0364491,332.662057 69.9808327,332.662057 C62.9519759,332.662057 56.6545483,335.458436 52.1589343,340.083388 L52.0295962,340.083388 C47.4938428,344.654821 44.6707042,350.979008 44.6707042,358.034624 C44.6707042,365.014422 47.4938428,371.365368 52.0295962,375.852063 L52.1589343,375.985861 C56.6545483,380.481475 62.9519759,383.353672 69.9808327,383.353672 Z M207.953367,306.633879 C214.228495,304.988163 219.910452,300.960842 223.375821,294.873031 L223.844114,293.985504 C226.925929,288.209889 227.487881,281.546747 225.842165,275.641794 C224.183069,269.317607 220.106689,263.724849 214.032258,260.2238 L213.679923,259.987423 C207.76159,256.745051 201.018169,256.040381 194.82332,257.712857 C188.525893,259.282754 182.870696,263.488472 179.423166,269.527223 C175.931037,275.507996 175.199608,282.407514 176.872084,288.758461 C178.598078,295.002369 182.634319,300.648647 188.66861,304.176455 L188.70875,304.176455 C194.756421,307.650744 201.60688,308.279595 207.953367,306.633879 Z M95.9688712,180.386512 C89.3146489,173.750129 80.1450235,169.59347 69.9808327,169.59347 C59.8567813,169.59347 50.7094556,173.750129 44.0686131,180.386512 C37.4589901,187.000595 33.38261,196.147921 33.38261,206.285352 C33.38261,216.449543 37.4589901,225.623628 44.0686131,232.31353 C50.7094556,238.896393 59.8567813,243.026292 69.9808327,243.026292 C80.1450235,243.026292 89.3146489,238.896393 95.9688712,232.31353 C102.591874,225.623628 106.668254,216.449543 106.668254,206.285352 C106.668254,196.147921 102.591874,187.000595 95.9688712,180.386512 Z M81.3581257,137.223266 C96.0848295,139.64947 109.335295,146.705086 119.445967,156.896037 L119.526245,156.896037 C121.131822,158.514993 122.701719,160.267747 124.151198,162.042801 L149.434566,147.414216 C146.036096,137.142987 145.879999,126.403464 148.609478,116.341852 C152.217565,102.85501 160.959037,90.7819674 174.062325,83.2045386 L174.494938,82.9458624 C187.455508,75.6003502 202.191132,74.0839725 215.495117,77.6920595 C228.964119,81.2956866 241.11744,90.0772977 248.681489,103.171665 L248.681489,103.198425 C256.209859,116.212514 257.739616,131.157755 254.144909,144.591077 C250.563582,158.069 241.781971,170.222321 228.692063,177.746231 L225.240074,179.788881 L224.887739,179.788881 C212.779016,185.560036 199.461652,186.452023 187.232511,183.23641 C177.188739,180.569369 167.974514,174.976611 160.7628,167.006708 L135.519571,181.590694 C138.418528,189.270702 140.028564,197.55726 140.028564,206.285352 C140.028564,214.986684 138.418528,223.375821 135.519571,231.109347 L160.7628,245.639814 C167.974514,237.567333 177.188739,232.077153 187.232511,229.410112 C200.701514,225.726206 215.637835,227.296103 228.692063,234.900292 L229.526071,235.292766 L229.526071,235.346285 C242.138765,242.972773 250.603721,254.78714 254.144909,268.113424 C257.739616,281.466468 256.209859,296.416169 248.681489,309.457017 L248.226576,310.371304 L248.173057,310.291025 C240.609008,322.86358 228.692063,331.382055 215.535256,334.985683 C202.035034,338.54025 187.103173,337.023873 174.062325,329.526723 L174.062325,329.419684 C160.959037,321.842255 152.217565,309.742453 148.609478,296.286831 C145.879999,286.251978 146.036096,275.507996 149.434566,265.241226 L124.151198,250.65724 C122.701719,252.436754 121.131822,254.10923 119.526245,255.728186 L119.445967,255.804005 C109.335295,265.945896 96.0848295,273.001512 81.3581257,275.351898 L81.3581257,304.568929 C91.8523516,306.763217 101.258354,312.01702 108.630625,319.384832 L108.666305,319.46511 C118.54506,329.290346 124.65963,342.982345 124.65963,358.034624 C124.65963,373.037844 118.54506,386.645104 108.666305,396.523859 L108.630625,396.679957 C98.6849713,406.558712 85.0331117,412.673282 69.9808327,412.673282 C55.0088325,412.673282 41.3391332,406.558712 31.4202388,396.679957 L31.3845593,396.679957 L31.3845593,396.523859 C21.4924245,386.645104 15.3644745,373.037844 15.3644745,358.034624 C15.3644745,342.982345 21.4924245,329.290346 31.3845593,319.46511 L31.3845593,319.384832 L31.4202388,319.384832 C38.7791307,312.01702 48.1985125,306.763217 58.6659788,304.568929 L58.6659788,275.351898 C43.9258952,273.001512 30.7155691,265.945896 20.6182773,255.804005 L20.5112389,255.728186 C7.88962418,243.053052 0,225.623628 0,206.285352 C0,187.000595 7.88962418,169.571171 20.5112389,156.896037 L20.6182773,156.896037 C30.7155691,146.705086 43.9258952,139.64947 58.6659788,137.223266 L58.6659788,108.135573 C48.1985125,105.861006 38.7791307,100.611663 31.4202388,93.2929105 L31.3845593,93.2929105 L31.3845593,93.2126317 C21.4924245,83.2848174 15.3644745,69.6953969 15.3644745,54.6431179 C15.3644745,39.6666577 21.4924245,25.9478991 31.3845593,16.0691441 L31.4202388,16.0200848 C41.3391332,6.11457024 55.0088325,0 69.9808327,0 C85.0331117,0 98.6849713,6.11457024 108.630625,16.0200848 L108.630625,16.0691441 L108.666305,16.0691441 C118.54506,25.9478991 124.65963,39.6666577 124.65963,54.6431179 C124.65963,69.6953969 118.54506,83.2848174 108.666305,93.2126317 L108.630625,93.2929105 C101.258354,100.611663 91.8523516,105.861006 81.3581257,108.135573 L81.3581257,137.223266 Z M223.375821,117.83147 L223.166204,117.519275 C219.674075,111.636621 214.108077,107.716339 207.953367,106.017104 C201.60688,104.344628 194.756421,105.053758 188.66861,108.528047 L188.70875,108.528047 C182.634319,111.975576 178.571319,117.621853 176.872084,123.946041 C175.199608,130.216708 175.931037,137.142987 179.423166,143.177278 L179.539124,143.337836 C183.040173,149.291848 188.606171,153.28795 194.82332,154.906906 C201.071688,156.65966 208.033646,155.928231 214.032258,152.427182 L214.357833,152.271085 C220.262787,148.743276 224.196449,143.177278 225.842165,137.062708 C227.51464,130.76528 226.85011,123.865762 223.375821,117.83147 Z" fill="currentColor"> </path> </g> </g></svg>

package/scripts/catalog-to-astro-content-directory.js

@@ -41,7 +41,19 @@ const copyFiles = async (source, target) => {
 
 const ensureAstroCollectionNotEmpty = async (astroDir) => {
   // TODO: maybe import collections from `src/content/config.ts`...
-  const COLLECTIONS = ['events', 'commands', 'services', 'users', 'teams', 'domains', 'flows', 'pages', 'changelogs', 'queries'];
+  const COLLECTIONS = [
+    'events',
+    'commands',
+    'services',
+    'users',
+    'teams',
+    'domains',
+    'flows',
+    'pages',
+    'changelogs',
+    'queries',
+    'channels',
+  ];
 
   // Check empty collections
   const emptyCollections = [];

package/scripts/default-files-for-collections/channels.md

@@ -0,0 +1,8 @@
+---
+id: empty
+name: empty
+version: 0.0.1
+hidden: true
+---
+
+<!-- Do not delete this file, required for EC, you an ignore this file -->

package/scripts/map-catalog-to-astro.js

@@ -11,6 +11,7 @@ const COLLECTION_KEYS = [
   'pages',
   'changelogs',
   'queries',
+  'channels',
 ];
 
 /**

package/src/components/DocsNavigation.astro

@@ -1,12 +1,12 @@
 ---
 import { getCommands } from '@utils/commands';
-import { getDomains } from '@utils/domains/domains';
+import { getDomains } from '@utils/collections/domains';
 import { getEvents } from '@utils/events';
-import { getServices } from '@utils/services/services';
-import { getFlows } from '@utils/flows/flows';
+import { getServices } from '@utils/collections/services';
+import { getFlows } from '@utils/collections/flows';
 import { getTeams } from '@utils/teams';
 import { getUsers } from '@utils/users';
-import config, { type CatalogConfig } from '@eventcatalog';
+import config, { type CatalogConfig } from '@utils/eventcatalog-config/catalog';
 import { buildUrl } from '@utils/url-builder';
 import { getQueries } from '@utils/queries';
 

package/src/components/Header.astro

@@ -1,5 +1,5 @@
 ---
-import catalog from '@eventcatalog';
+import catalog from '@utils/eventcatalog-config/catalog';
 import Search from '@components/Search.astro';
 import { buildUrl } from '@utils/url-builder';
 
@@ -12,9 +12,9 @@ const logo = {
 
 <nav
   id="eventcatalog-header"
-  class="fixed top-0 left-0 right-0 bg-white border-b border-gray-100 py-3 font-bold text-xl bg-opacity-20 backdrop-blur-sm"
+  class="fixed top-0 left-0 right-0 bg-white border-b border-gray-100 py-3 font-bold text-xl bg-opacity-20 backdrop-blur-sm z-10"
 >
-  <div class="max-w-[120em] mx-auto px-4 sm:px-4 lg:px-4 xxl:max-w-[96em]">
+  <div class="px-4 sm:px-4 lg:px-4">
     <div class="flex justify-between items-center">
       <div class="flex-shrink-0 flex items-center w-1/3">
         <a href={buildUrl(catalog.landingPage || '/')} class="flex space-x-2 items-center">

package/src/components/Lists/PillListFlat.tsx

@@ -12,12 +12,14 @@ interface Props {
   pills: {
     label: string;
     badge?: string;
-    href: string;
+    href?: string;
     tag?: string;
     color?: string;
     collection?: string;
+    description?: string;
+    icon?: string;
   }[];
-  emptyMessage: string;
+  emptyMessage?: string;
 }
 
 const PillList = ({ title, pills, emptyMessage, color = 'gray', ...props }: Props) => {
@@ -33,27 +35,32 @@ const PillList = ({ title, pills, emptyMessage, color = 'gray', ...props }: Prop
           <DisclosurePanel className="mt-2 text-sm/5 text-black/50">
             <ul role="list" className="space-y-2">
               {pills.map((item) => {
+                const href = item.href ?? '#';
                 const Icon = item.collection ? getIconForCollection(item.collection) : null;
+
                 return (
                   <li
                     className=" has-tooltip rounded-md text-gray-600 group px-1 w-full hover:bg-gradient-to-l hover:from-purple-500 hover:to-purple-700 hover:text-white hover:font-normal  "
                     key={item.href}
                   >
-                    <a className={`flex items-center space-x-2`} href={item.href}>
-                      {Icon && <Icon className={`h-4 w-4`} />}
-                      <span className="font-light text-sm truncate">
-                        {item.label} ({item.tag})
-                      </span>
-                      {item.label.length > 24 && (
-                        <span className="tooltip rounded relative shadow-lg p-1 font-normal text-xs bg-white  text-black ml-[30px] mt-12">
-                          {item.label} ({item.tag})
+                    <a className={`leading-3`} href={href}>
+                      <span className="space-x-2 flex items-center">
+                        {Icon && <Icon className={`h-4 w-4`} />}
+                        <span className="font-light text-sm truncate">
+                          {item.label} {item.tag && <>({item.tag})</>}
                         </span>
-                      )}
+                        {item.label.length > 24 && (
+                          <span className="tooltip rounded relative shadow-lg p-1 font-normal text-xs bg-white  text-black ml-[30px] mt-12">
+                            {item.label} ({item.tag})
+                          </span>
+                        )}
+                      </span>
+                      {item.description && <span className="text-[9px] block ml-6 mt-1 leading-0">{item.description}</span>}
                     </a>
                   </li>
                 );
               })}
-              {pills.length === 0 && (
+              {pills.length === 0 && emptyMessage && (
                 <li className="inline mr-2 leading-tight text-xs">
                   <span className="text-gray-400">{emptyMessage}</span>
                 </li>

package/src/components/Lists/ProtocolList.tsx

@@ -0,0 +1,88 @@
+import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/react';
+import { ChevronDownIcon } from '@heroicons/react/20/solid';
+import * as ProtocolIcons from '@icons/protocols';
+
+import './PillListFlat.styles.css';
+
+interface Props {
+  title: string;
+  color: string;
+  icon?: any;
+  pills: {
+    label: string;
+    badge?: string;
+    href?: string;
+    tag?: string;
+    color?: string;
+    collection?: string;
+    description?: string;
+    icon?: string;
+  }[];
+  emptyMessage?: string;
+}
+
+const protocolIcons = Object.keys(ProtocolIcons).reduce(
+  (icons, key) => {
+    const iconKey = key as keyof typeof ProtocolIcons;
+    icons[key.toLowerCase()] = ProtocolIcons[iconKey];
+    return icons;
+  },
+  {} as { [key: string]: string }
+);
+
+const getIconForProtocol = (icon: keyof typeof protocolIcons) => {
+  const Icon = protocolIcons[icon];
+  return Icon ? (props: any) => <span {...props} dangerouslySetInnerHTML={{ __html: Icon }} /> : null;
+};
+
+const ProtocolList = ({ title, pills, emptyMessage, color = 'gray', ...props }: Props) => {
+  return (
+    <div>
+      <div className="mx-auto w-full max-w-lg divide-y divide-white/5 rounded-xl bg-white/5">
+        <Disclosure as="div" className="pb-8" defaultOpen={pills.length <= 10}>
+          <DisclosureButton className="group flex w-full items-center justify-start space-x-4">
+            <span className="text-sm text-black group-data-[hover]:text-black/80 capitalize"> {title} </span>
+            <ChevronDownIcon className="size-5 ml-2 fill-black/60 group-data-[hover]:fill-black/50 group-data-[open]:rotate-180" />
+          </DisclosureButton>
+          <DisclosurePanel className="mt-2 text-sm/5 text-black/50">
+            <ul role="list" className="space-y-2">
+              {pills.map((item) => {
+                const href = item.href ?? '#';
+                const Icon = item.icon ? getIconForProtocol(item.icon) : null;
+
+                return (
+                  <li
+                    className=" has-tooltip rounded-md text-gray-600 group px-1 w-full hover:bg-gradient-to-l hover:from-purple-500 hover:to-purple-700 hover:text-white hover:font-normal  "
+                    key={item.href}
+                  >
+                    <a className={`leading-3`} href={href}>
+                      <span className="space-x-2 flex items-center">
+                        {Icon && <Icon className={`h-4 w-4`} />}
+                        <span className="font-light text-sm truncate">
+                          {item.label} {item.tag && <>({item.tag})</>}
+                        </span>
+                        {item.label.length > 24 && (
+                          <span className="tooltip rounded relative shadow-lg p-1 font-normal text-xs bg-white  text-black ml-[30px] mt-12">
+                            {item.label} ({item.tag})
+                          </span>
+                        )}
+                      </span>
+                      {item.description && <span className="text-[9px] block ml-6 mt-1 leading-0">{item.description}</span>}
+                    </a>
+                  </li>
+                );
+              })}
+              {pills.length === 0 && emptyMessage && (
+                <li className="inline mr-2 leading-tight text-xs">
+                  <span className="text-gray-400">{emptyMessage}</span>
+                </li>
+              )}
+            </ul>
+          </DisclosurePanel>
+        </Disclosure>
+      </div>
+    </div>
+  );
+};
+
+export default ProtocolList;

package/src/components/MDX/ChannelInformation/ChannelInformation.tsx

@@ -0,0 +1,79 @@
+import type { CollectionEntry } from 'astro:content';
+import * as ProtocolIcons from '@icons/protocols';
+
+const protocolIcons = Object.keys(ProtocolIcons).reduce(
+  (icons, key) => {
+    const iconKey = key as keyof typeof ProtocolIcons;
+    icons[key.toLowerCase()] = ProtocolIcons[iconKey];
+    return icons;
+  },
+  {} as { [key: string]: string }
+);
+
+const getIconForProtocol = (icon: keyof typeof protocolIcons) => {
+  const Icon = protocolIcons[icon];
+  return Icon ? (props: any) => <span {...props} dangerouslySetInnerHTML={{ __html: Icon }} /> : null;
+};
+
+const ChannelParameters = (data: CollectionEntry<'channels'>['data']) => {
+  return (
+    <div className="container mx-auto py-4 not-prose space-y-4">
+      <div>
+        <h4 className="text-2xl font-bold">Channel information</h4>
+      </div>
+
+      <div>
+        <p className="text-md">
+          {data.address && (
+            <>
+              <span className="font-semibold">Address:</span> <code className="bg-gray-100 p-1 rounded">{data.address}</code>
+            </>
+          )}
+          {data.protocols && data.protocols.length > 0 && (
+            <div className="mt-2 flex items-center space-x-1">
+              <span className="font-semibold">{data.protocols.length > 1 ? 'Protocols:' : 'Protocol:'}</span>
+              <ul className="space-x-2 flex">
+                {data.protocols.map((protocol) => {
+                  const IconComponent = getIconForProtocol(protocol.toLowerCase() as keyof typeof protocolIcons);
+                  return (
+                    <li key={protocol} className=" text-sm flex items-center space-x-1  bg-gray-100 rounded-md px-1">
+                      {IconComponent && <IconComponent className="w-4 h-4" />}
+                      <span>{protocol}</span>
+                    </li>
+                  );
+                })}
+              </ul>
+            </div>
+          )}
+        </p>
+      </div>
+
+      {data.parameters && Object.keys(data.parameters).length > 0 && (
+        <div className="overflow-x-auto">
+          <table className="min-w-full bg-white border border-gray-300">
+            <thead>
+              <tr className="bg-purple-500 text-white">
+                <th className="py-2 px-4 border-b text-left">Parameter</th>
+                <th className="py-2 px-4 border-b text-left">Options</th>
+                <th className="py-2 px-4 border-b text-left">Description</th>
+                <th className="py-2 px-4 border-b text-left">Default</th>
+              </tr>
+            </thead>
+            <tbody>
+              {Object.entries(data.parameters).map(([param, details]) => (
+                <tr className="hover:bg-gray-50" key={param}>
+                  <td className="py-2 px-4 border-b">{param}</td>
+                  <td className="py-2 px-4 border-b">{details.default || 'N/A'}</td>
+                  <td className="py-2 px-4 border-b">{details.enum ? details.enum.join(', ') : 'N/A'}</td>
+                  <td className="py-2 px-4 border-b">{details.description}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ChannelParameters;

package/src/components/MDX/Flow/Flow.astro

@@ -1,9 +1,9 @@
 ---
-import { getFlows } from '@utils/flows/flows';
-import { getNodesAndEdges } from '@utils/flows/node-graph';
+import { getFlows } from '@utils/collections/flows';
+import { getNodesAndEdges } from '@utils/node-graphs/flows-node-graph';
 import Admonition from '@components/MDX/Admonition';
 import NodeGraph from '../NodeGraph/NodeGraph';
-import { getVersionFromCollection } from '@utils/versions/versions';
+import { getVersionFromCollection } from '@utils/collections/versions';
 
 const { id, version = 'latest', maxHeight, includeKey = true } = Astro.props;
 

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

@@ -47,15 +47,15 @@ function DownloadButton({ filename, addPadding = true }: { filename?: string; ad
   };
 
   return (
-    <Panel position="top-right" id="download-visual">
+    <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">Download visual </span>
+        <span className="group-hover:text-primary">Export visual </span>
       </button>
-    </Panel>
+    </div>
   );
 }
 

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

@@ -0,0 +1,82 @@
+import { useMemo } from 'react';
+import { BaseEdge, getBezierPath } from 'reactflow';
+
+const AnimatedMessageEdge = ({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  data,
+  label,
+  markerEnd,
+}: any) => {
+  const [edgePath, labelX, labelY] = getBezierPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition,
+  });
+
+  const collection = data?.message?.collection;
+  const opacity = data?.opacity ?? 1;
+
+  const messageColor = useMemo(
+    () => (collection: string) => {
+      switch (collection) {
+        case 'events':
+          return 'orange';
+        case 'commands':
+          return 'blue';
+        case 'queries':
+          return 'green';
+        default:
+          return 'gray';
+      }
+    },
+    []
+  );
+
+  const randomDelay = useMemo(() => Math.random() * 1, []);
+
+  return (
+    <>
+      <BaseEdge id={id} path={edgePath} markerEnd={markerEnd} />
+      {/* Circle Icon */}
+      <g className={`z-30 ${opacity === 1 ? 'opacity-100' : 'opacity-10'}`}>
+        <circle cx="0" cy="0" r="7" fill={messageColor(collection)}>
+          <animateMotion dur="2s" repeatCount="indefinite" path={edgePath} rotate="auto" begin={`${randomDelay}s`}>
+            <mpath href={`#${id}`} />
+          </animateMotion>
+        </circle>
+      </g>
+      <g>
+        {/* Background rectangle */}
+        <rect
+          x={labelX - label.length * 3} // Adjust based on text length
+          y={labelY - 15} // Position above the text
+          width={label.length * 6} // Width based on text length
+          height={20} // Fixed height
+          fill="white" // Background color
+          opacity={0.8} // Opacity
+          rx="4" // Rounded corners
+        />
+
+        {/* Text element */}
+        <text x={labelX} y={labelY} fill="black" fontSize="10" textAnchor="middle" dy="-2">
+          {label}
+        </text>
+      </g>
+      {/* Label */}
+      {/* <text x={labelX} y={labelY} fill="black" fontSize="12" textAnchor="middle" dy="-5">
+        {label}
+      </text> */}
+    </>
+  );
+};
+
+export default AnimatedMessageEdge;

package/src/components/MDX/NodeGraph/NodeGraph.astro

@@ -1,11 +1,13 @@
 ---
 import NodeGraphNew from './NodeGraph';
-import { getNodesAndEdges as getNodesAndEdgesForService } from '@utils/services/node-graph';
-import { getNodesAndEdges as getNodesAndEdgesForEvent } from '@utils/events/node-graph';
-import { getNodesAndEdges as getNodesAndEdgesForCommand } from '@utils/commands/node-graph';
-import { getNodesAndEdges as getNodesAndEdgesForQueries } from '@utils/queries/node-graph';
-import { getNodesAndEdges as getNodesAndEdgesForDomain } from '@utils/domains/node-graph';
-import { getNodesAndEdges as getNodesAndEdgesForFlows } from '@utils/flows/node-graph';
+import { getNodesAndEdges as getNodesAndEdgesForService } from '@utils/node-graphs/services-node-graph';
+import {
+  getNodesAndEdgesForCommands,
+  getNodesAndEdgesForEvents,
+  getNodesAndEdgesForQueries,
+} from '@utils/node-graphs/message-node-graph';
+import { getNodesAndEdges as getNodesAndEdgesForDomain } from '@utils/node-graphs/domains-node-graph';
+import { getNodesAndEdges as getNodesAndEdgesForFlows } from '@utils/node-graphs/flows-node-graph';
 
 interface Props {
   id: string;
@@ -24,71 +26,26 @@ interface Props {
 const { id, collection, title, mode = 'simple', linkTo = 'docs', version, href, linksToVisualiser } = Astro.props;
 let nodes = [],
   edges = [];
-
-if (collection === 'services') {
-  const { nodes: serviceNodes, edges: serviceEdges } = await getNodesAndEdgesForService({
-    id: id,
-    version,
-    mode,
-  });
-
-  nodes = serviceNodes;
-  edges = serviceEdges;
-}
-
-if (collection === 'events') {
-  const { nodes: eventNodes, edges: eventEdges } = await getNodesAndEdgesForEvent({
-    id: id,
-    version,
-    mode,
-  });
-
-  nodes = eventNodes;
-  edges = eventEdges;
-}
-
-if (collection === 'commands') {
-  const { nodes: eventNodes, edges: eventEdges } = await getNodesAndEdgesForCommand({
-    id: id,
-    version,
-    mode,
-  });
-
-  nodes = eventNodes;
-  edges = eventEdges;
-}
-
-if (collection === 'queries') {
-  const { nodes: eventNodes, edges: eventEdges } = await getNodesAndEdgesForQueries({
-    id: id,
-    version,
-    mode,
-  });
-
-  nodes = eventNodes;
-  edges = eventEdges;
-}
-
-if (collection === 'domains') {
-  const { nodes: eventNodes, edges: eventEdges } = await getNodesAndEdgesForDomain({
-    id: id,
-    version,
-    mode,
-  });
-
-  nodes = eventNodes;
-  edges = eventEdges;
-}
-
-if (collection === 'flows') {
-  const { nodes: eventNodes, edges: eventEdges } = await getNodesAndEdgesForFlows({
-    id: id,
+const getNodesAndEdgesFunctions = {
+  services: getNodesAndEdgesForService,
+  events: getNodesAndEdgesForEvents,
+  commands: getNodesAndEdgesForCommands,
+  queries: getNodesAndEdgesForQueries,
+  domains: getNodesAndEdgesForDomain,
+  flows: getNodesAndEdgesForFlows,
+};
+
+if (collection in getNodesAndEdgesFunctions) {
+  const { nodes: fetchedNodes, edges: fetchedEdges } = await getNodesAndEdgesFunctions[
+    collection as keyof typeof getNodesAndEdgesFunctions
+  ]({
+    id,
     version,
     mode,
   });
 
-  nodes = eventNodes;
-  edges = eventEdges;
+  nodes = fetchedNodes;
+  edges = fetchedEdges;
 }
 ---