@eventcatalog/core 2.24.3 → 2.25.1

package/dist/analytics/analytics.cjs

@@ -37,7 +37,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "2.24.3";
+var version = "2.25.1";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/analytics.js

@@ -1,7 +1,7 @@
 import {
   raiseEvent
-} from "../chunk-OZZMZUB3.js";
-import "../chunk-3MDI2MXJ.js";
+} from "../chunk-O33THQNO.js";
+import "../chunk-DZIMF2ES.js";
 export {
   raiseEvent
 };

package/dist/analytics/log-build.cjs

@@ -106,7 +106,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "2.24.3";
+var version = "2.25.1";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/log-build.js

@@ -1,8 +1,8 @@
 import {
   log_build_default
-} from "../chunk-7K4ERS3X.js";
-import "../chunk-OZZMZUB3.js";
-import "../chunk-3MDI2MXJ.js";
+} from "../chunk-OZLFIB46.js";
+import "../chunk-O33THQNO.js";
+import "../chunk-DZIMF2ES.js";
 import "../chunk-E7TXTI7G.js";
 export {
   log_build_default as default

package/dist/catalog-to-astro-content-directory.cjs

@@ -247,7 +247,6 @@ var ensureAstroCollectionNotEmpty = async (astroDir) => {
     "teams",
     "domains",
     "flows",
-    "pages",
     "changelogs",
     "queries",
     "channels",

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

@@ -1,6 +1,6 @@
 import {
   catalogToAstro
-} from "./chunk-CXKIF3EI.js";
+} from "./chunk-VCR3LHZR.js";
 import "./chunk-E7TXTI7G.js";
 import "./chunk-7JDTB3U5.js";
 export {

package/dist/{chunk-3MDI2MXJ.js → chunk-DZIMF2ES.js}

@@ -1,5 +1,5 @@
 // package.json
-var version = "2.24.3";
+var version = "2.25.1";
 
 // src/constants.ts
 var VERSION = version;

package/dist/{chunk-OZZMZUB3.js → chunk-O33THQNO.js}

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-3MDI2MXJ.js";
+} from "./chunk-DZIMF2ES.js";
 
 // src/analytics/analytics.js
 import axios from "axios";

package/dist/{chunk-7K4ERS3X.js → chunk-OZLFIB46.js}

@@ -1,6 +1,6 @@
 import {
   raiseEvent
-} from "./chunk-OZZMZUB3.js";
+} from "./chunk-O33THQNO.js";
 import {
   getEventCatalogConfigFile,
   verifyRequiredFieldsAreInCatalogConfigFile

package/dist/{chunk-CXKIF3EI.js → chunk-VCR3LHZR.js}

@@ -47,7 +47,6 @@ var ensureAstroCollectionNotEmpty = async (astroDir) => {
     "teams",
     "domains",
     "flows",
-    "pages",
     "changelogs",
     "queries",
     "channels",

package/dist/constants.cjs

@@ -25,7 +25,7 @@ __export(constants_exports, {
 module.exports = __toCommonJS(constants_exports);
 
 // package.json
-var version = "2.24.3";
+var version = "2.25.1";
 
 // src/constants.ts
 var VERSION = version;

package/dist/constants.js

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-3MDI2MXJ.js";
+} from "./chunk-DZIMF2ES.js";
 export {
   VERSION
 };

package/dist/eventcatalog.cjs

@@ -161,7 +161,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "2.24.3";
+var version = "2.25.1";
 
 // src/constants.ts
 var VERSION = version;
@@ -435,7 +435,6 @@ var ensureAstroCollectionNotEmpty = async (astroDir) => {
     "teams",
     "domains",
     "flows",
-    "pages",
     "changelogs",
     "queries",
     "channels",

package/dist/eventcatalog.js

@@ -6,14 +6,14 @@ import {
 } from "./chunk-OW2FQPYP.js";
 import {
   log_build_default
-} from "./chunk-7K4ERS3X.js";
-import "./chunk-OZZMZUB3.js";
+} from "./chunk-OZLFIB46.js";
+import "./chunk-O33THQNO.js";
 import {
   catalogToAstro
-} from "./chunk-CXKIF3EI.js";
+} from "./chunk-VCR3LHZR.js";
 import {
   VERSION
-} from "./chunk-3MDI2MXJ.js";
+} from "./chunk-DZIMF2ES.js";
 import {
   isBackstagePluginEnabled
 } from "./chunk-XMDPVKIJ.js";

package/eventcatalog/src/components/MDX/NodeGraph/Edges/FlowEdge.tsx

@@ -0,0 +1,96 @@
+import { useMemo } from 'react';
+import { BaseEdge, EdgeLabelRenderer, getBezierPath, type EdgeProps as XYFlowEdgeProps } from '@xyflow/react';
+
+interface EdgeData {
+  message?: {
+    collection?: string;
+  };
+  opacity?: number;
+  animated?: boolean;
+}
+
+interface CustomEdgeProps extends Omit<XYFlowEdgeProps, 'data'> {
+  data?: EdgeData;
+}
+
+export default function CustomEdge({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  style = {},
+  markerEnd,
+  label,
+  labelStyle,
+  data,
+}: CustomEdgeProps) {
+  const [edgePath, labelX, labelY] = getBezierPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition,
+  });
+
+  const randomDelay = useMemo(() => Math.random() * 1, []);
+  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';
+      }
+    },
+    []
+  );
+
+  return (
+    <>
+      <BaseEdge
+        path={edgePath}
+        markerEnd={markerEnd}
+        style={{
+          strokeWidth: 2,
+          stroke: '#fff',
+          ...style,
+        }}
+      />
+      {data?.animated && (
+        <g className={`z-30 ${opacity === 1 ? 'opacity-100' : 'opacity-10'}`}>
+          <circle cx="0" cy="0" r="7" fill={messageColor(collection || 'default')}>
+            <animateMotion dur="2s" repeatCount="indefinite" path={edgePath} rotate="auto" begin={`${randomDelay}s`}>
+              <mpath href={`#${id}`} />
+            </animateMotion>
+          </circle>
+        </g>
+      )}
+      {label && (
+        <EdgeLabelRenderer>
+          <div
+            style={{
+              position: 'absolute',
+              transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
+              zIndex: 1000,
+              ...labelStyle,
+            }}
+            className="nodrag nopan max-w-[150px] text-xs bg-white px-2 py-1 rounded border border-gray-200 text-gray-600 font-medium shadow-sm"
+          >
+            {label}
+          </div>
+        </EdgeLabelRenderer>
+      )}
+    </>
+  );
+}

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

@@ -24,6 +24,7 @@ import StepNode from './Nodes/Step';
 import CommandNode from './Nodes/Command';
 import ExternalSystemNode from './Nodes/ExternalSystem';
 import AnimatedMessageEdge from './Edges/AnimatedMessageEdge';
+import FlowEdge from './Edges/FlowEdge';
 
 import type { CollectionEntry } from 'astro:content';
 import { navigate } from 'astro:transitions/client';
@@ -75,6 +76,7 @@ const NodeGraphBuilder = ({
   const edgeTypes = useMemo(
     () => ({
       animated: AnimatedMessageEdge,
+      'flow-edge': FlowEdge,
     }),
     []
   );
@@ -97,7 +99,7 @@ const NodeGraphBuilder = ({
       eds.map((edge) => {
         edge.style = { ...edge.style, opacity: 1 };
         edge.labelStyle = { ...edge.labelStyle, opacity: 1 };
-        return { ...edge, data: { ...edge.data, opacity: 1 }, animated: animateMessages };
+        return { ...edge, data: { ...edge.data, opacity: 1, animated: animateMessages }, animated: animateMessages };
       })
     );
   }, [setNodes, setEdges, animateMessages]);
@@ -125,7 +127,7 @@ const NodeGraphBuilder = ({
           connectedNodeIds.add(edge.target);
           return {
             ...edge,
-            data: { ...edge.data, opacity: 1 },
+            data: { ...edge.data, opacity: 1, animated: animateMessages },
             style: { ...edge.style, opacity: 1 },
             labelStyle: { ...edge.labelStyle, opacity: 1 },
             animated: true,
@@ -133,7 +135,7 @@ const NodeGraphBuilder = ({
         }
         return {
           ...edge,
-          data: { ...edge.data, opacity: 0.1 },
+          data: { ...edge.data, opacity: 0.1, animated: animateMessages },
           style: { ...edge.style, opacity: 0.1 },
           labelStyle: { ...edge.labelStyle, opacity: 0.1 },
           animated: animateMessages,
@@ -178,8 +180,8 @@ const NodeGraphBuilder = ({
       eds.map((edge) => ({
         ...edge,
         animated: animateMessages,
-        type: animateMessages ? 'animated' : 'default',
-        data: { ...edge.data, animateMessages },
+        type: edge.type === 'flow-edge' ? 'flow-edge' : animateMessages ? 'animated' : 'default',
+        data: { ...edge.data, animateMessages, animated: animateMessages },
       }))
     );
   }, [animateMessages]);
@@ -427,8 +429,9 @@ const NodeGraph = ({
               )}
 
               {href && (
-                <div className="py-2 w-full text-right">
-                  <a className=" text-sm no-underline py-2 text-gray-800 hover:text-primary" href={href}>
+                <div className="py-2 w-full text-right flex justify-between">
+                  <span className="text-sm text-gray-500 italic">Right click a node to access documentation</span>
+                  <a className=" text-sm underline text-gray-800 hover:text-primary" href={href}>
                     {hrefLabel} &rarr;
                   </a>
                 </div>

package/eventcatalog/src/components/MDX/NodeGraph/Nodes/Channel.tsx

@@ -3,6 +3,8 @@ import { ArrowsRightLeftIcon } from '@heroicons/react/20/solid';
 import type { CollectionMessageTypes, CollectionTypes } from '@types';
 import type { CollectionEntry } from 'astro:content';
 import { Handle } from '@xyflow/react';
+import * as ContextMenu from '@radix-ui/react-context-menu';
+import { buildUrl } from '@utils/url-builder';
 
 interface Data {
   title: string;
@@ -67,67 +69,93 @@ export default function ChannelNode({ data, sourcePosition, targetPosition }: an
   };
 
   return (
-    <div
-      className={classNames(
-        mode === 'simple' ? 'min-h-[3em]' : 'min-h-[6.5em]',
-        'w-full rounded-md border flex justify-start  bg-white text-black border-gray-400 transform  '
-      )}
-    >
-      <div
-        className={classNames(
-          'bg-gradient-to-b from-gray-500 to-gray-700 relative flex items-center w-5 justify-center rounded-l-sm text-gray-100-500',
-          `border-r-[1px] border-gray-500`
-        )}
-      >
-        <ArrowsRightLeftIcon className="w-4 h-4 opacity-90 text-white absolute top-1 " />
-        {mode === 'full' && (
-          <span className="rotate -rotate-90 w-1/2 text-center absolute bottom-1 text-[9px] text-white font-bold uppercase tracking-[3px] ">
-            Channel
-          </span>
-        )}
-      </div>
-      <div className="p-1 min-w-60 max-w-[min-content]">
-        {targetPosition && <Handle type="target" position={targetPosition} />}
-        {sourcePosition && <Handle type="source" position={sourcePosition} />}
-        <div className={classNames(mode === 'full' ? `border-b border-gray-200` : '')}>
-          <div className="flex justify-between items-center">
-            <span className="text-xs font-bold block pb-0.5">{name}</span>
-            {Icon && <Icon className="w-5 h-5 opacity-60 p-0.5" />}
-          </div>
-          <div className="flex justify-between">
-            <span className="text-[10px] font-light block pt-0.5 pb-0.5 ">v{version}</span>
-            {mode === 'simple' && <span className="text-[10px] text-gray-500 font-light block pt-0.5 pb-0.5 ">Channel</span>}
+    <ContextMenu.Root>
+      <ContextMenu.Trigger>
+        <div
+          className={classNames(
+            mode === 'simple' ? 'min-h-[3em]' : 'min-h-[6.5em]',
+            'w-full rounded-md border flex justify-start  bg-white text-black border-gray-400 transform  '
+          )}
+        >
+          <div
+            className={classNames(
+              'bg-gradient-to-b from-gray-500 to-gray-700 relative flex items-center w-5 justify-center rounded-l-sm text-gray-100-500',
+              `border-r-[1px] border-gray-500`
+            )}
+          >
+            <ArrowsRightLeftIcon className="w-4 h-4 opacity-90 text-white absolute top-1 " />
+            {mode === 'full' && (
+              <span className="rotate -rotate-90 w-1/2 text-center absolute bottom-1 text-[9px] text-white font-bold uppercase tracking-[3px] ">
+                Channel
+              </span>
+            )}
           </div>
-        </div>
-        {mode === 'full' && (
-          <div className="divide-y divide-gray-200 ">
-            <div className="leading-[10px] py-1 ">
-              <span className="text-[8px] font-light">{summary}</span>
+          <div className="p-1 min-w-60 max-w-[min-content]">
+            {targetPosition && <Handle type="target" position={targetPosition} />}
+            {sourcePosition && <Handle type="source" position={sourcePosition} />}
+            <div className={classNames(mode === 'full' ? `border-b border-gray-200` : '')}>
+              <div className="flex justify-between items-center">
+                <span className="text-xs font-bold block pb-0.5">{name}</span>
+                {Icon && <Icon className="w-5 h-5 opacity-60 p-0.5" />}
+              </div>
+              <div className="flex justify-between">
+                <span className="text-[10px] font-light block pt-0.5 pb-0.5 ">v{version}</span>
+                {mode === 'simple' && <span className="text-[10px] text-gray-500 font-light block pt-0.5 pb-0.5 ">Channel</span>}
+              </div>
             </div>
-            {address && (
-              <div className="leading-3 py-1 flex flex-col items-start space-y-0.5">
-                <div className="text-[6px] flex items-center space-x-0.5 ">
-                  <LinkIcon className="w-2 h-2 opacity-60" />
-                  <span className="block font-normal ">{getAddress()}</span>
+            {mode === 'full' && (
+              <div className="divide-y divide-gray-200 ">
+                <div className="leading-[10px] py-1 ">
+                  <span className="text-[8px] font-light">{summary}</span>
                 </div>
-                {protocols.length > 0 && (
-                  <div className="text-[6px] font-semibold flex space-x-2 items-center ">
-                    {[...protocols].map((protocol, index) => {
-                      const ProtoColIcon = getIconForProtocol(protocol);
-                      return (
-                        <span key={index} className="font-normal flex items-center -ml-[1px] space-x-0.5">
-                          {ProtoColIcon && <ProtoColIcon className="w-2 h-2 opacity-60 inline-block" />}
-                          <span>{protocol}</span>
-                        </span>
-                      );
-                    })}
+                {address && (
+                  <div className="leading-3 py-1 flex flex-col items-start space-y-0.5">
+                    <div className="text-[6px] flex items-center space-x-0.5 ">
+                      <LinkIcon className="w-2 h-2 opacity-60" />
+                      <span className="block font-normal ">{getAddress()}</span>
+                    </div>
+                    {protocols.length > 0 && (
+                      <div className="text-[6px] font-semibold flex space-x-2 items-center ">
+                        {[...protocols].map((protocol, index) => {
+                          const ProtoColIcon = getIconForProtocol(protocol);
+                          return (
+                            <span key={index} className="font-normal flex items-center -ml-[1px] space-x-0.5">
+                              {ProtoColIcon && <ProtoColIcon className="w-2 h-2 opacity-60 inline-block" />}
+                              <span>{protocol}</span>
+                            </span>
+                          );
+                        })}
+                      </div>
+                    )}
                   </div>
                 )}
               </div>
             )}
           </div>
-        )}
-      </div>
-    </div>
+        </div>
+      </ContextMenu.Trigger>
+      <ContextMenu.Portal>
+        <ContextMenu.Content className="min-w-[220px] bg-white rounded-md p-1 shadow-md border border-gray-200">
+          <ContextMenu.Item
+            asChild
+            className="text-sm px-2 py-1.5 outline-none cursor-pointer hover:bg-orange-100 rounded-sm flex items-center"
+          >
+            <a href={buildUrl(`/docs/channels/${id}/${version}`)}>Read documentation</a>
+          </ContextMenu.Item>
+          <ContextMenu.Separator className="h-[1px] bg-gray-200 m-1" />
+
+          <ContextMenu.Item asChild>
+            <a
+              href={buildUrl(`/docs/channels/${id}/${version}/changelog`)}
+              className="text-sm px-2 py-1.5 outline-none cursor-pointer hover:bg-orange-100 rounded-sm flex items-center"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Read changelog
+            </a>
+          </ContextMenu.Item>
+        </ContextMenu.Content>
+      </ContextMenu.Portal>
+    </ContextMenu.Root>
   );
 }

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

@@ -1,6 +1,7 @@
 import { ChatBubbleLeftIcon } from '@heroicons/react/16/solid';
 import type { CollectionEntry } from 'astro:content';
 import { Handle } from '@xyflow/react';
+import MessageContextMenu from './MessageContextMenu';
 
 interface Data {
   title: string;
@@ -20,52 +21,54 @@ function classNames(...classes: any) {
 export default function CommandNode({ data, sourcePosition, targetPosition }: any) {
   const { mode, message } = data as Data;
 
-  const { name, version, summary, owners = [], producers = [], consumers = [] } = message.data;
+  const { id, name, version, summary, owners = [], producers = [], consumers = [], schemaPath } = message.data;
 
   return (
-    <div className={classNames('w-full rounded-md border flex justify-start  bg-white text-black border-blue-400')}>
-      <div
-        className={classNames(
-          'bg-gradient-to-b from-blue-500 to-blue-700 relative flex items-center w-5 justify-center rounded-l-sm text-blue-100-500',
-          `border-r-[1px] border-blue-500`
-        )}
-      >
-        <ChatBubbleLeftIcon className="w-4 h-4 opacity-90 text-white absolute top-1 " />
-        {mode === 'full' && (
-          <span className="rotate -rotate-90 w-1/2 text-center absolute bottom-1 text-[9px] text-white font-bold uppercase tracking-[3px] ">
-            Command
-          </span>
-        )}
-      </div>
-      <div className="p-1 min-w-60 max-w-[min-content]">
-        {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">
-            <span className="text-[10px] font-light block pt-0.5 pb-0.5 ">v{version}</span>
-            {mode === 'simple' && <span className="text-[10px] text-gray-500 font-light block pt-0.5 pb-0.5 ">Command</span>}
-          </div>
+    <MessageContextMenu message={message} messageType="commands">
+      <div className={classNames('w-full rounded-md border flex justify-start  bg-white text-black border-blue-400')}>
+        <div
+          className={classNames(
+            'bg-gradient-to-b from-blue-500 to-blue-700 relative flex items-center w-5 justify-center rounded-l-sm text-blue-100-500',
+            `border-r-[1px] border-blue-500`
+          )}
+        >
+          <ChatBubbleLeftIcon className="w-4 h-4 opacity-90 text-white absolute top-1 " />
+          {mode === 'full' && (
+            <span className="rotate -rotate-90 w-1/2 text-center absolute bottom-1 text-[9px] text-white font-bold uppercase tracking-[3px] ">
+              Command
+            </span>
+          )}
         </div>
-        {mode === 'full' && (
-          <div className="divide-y divide-gray-200 ">
-            <div className="leading-3 py-1">
-              <span className="text-[8px] font-light">{summary}</span>
-            </div>
-            <div className="grid grid-cols-2 gap-x-4 py-1">
-              <span className="text-xs" style={{ fontSize: '0.2em' }}>
-                Producers: {producers.length}
-              </span>
-              <span className="text-xs" style={{ fontSize: '0.2em' }}>
-                Consumers: {consumers.length}
-              </span>
-              <span className="text-xs" style={{ fontSize: '0.2em' }}>
-                Owners: {owners.length}
-              </span>
+        <div className="p-1 min-w-60 max-w-[min-content]">
+          {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">
+              <span className="text-[10px] font-light block pt-0.5 pb-0.5 ">v{version}</span>
+              {mode === 'simple' && <span className="text-[10px] text-gray-500 font-light block pt-0.5 pb-0.5 ">Command</span>}
             </div>
           </div>
-        )}
+          {mode === 'full' && (
+            <div className="divide-y divide-gray-200 ">
+              <div className="leading-3 py-1">
+                <span className="text-[8px] font-light">{summary}</span>
+              </div>
+              <div className="grid grid-cols-2 gap-x-4 py-1">
+                <span className="text-xs" style={{ fontSize: '0.2em' }}>
+                  Producers: {producers.length}
+                </span>
+                <span className="text-xs" style={{ fontSize: '0.2em' }}>
+                  Consumers: {consumers.length}
+                </span>
+                <span className="text-xs" style={{ fontSize: '0.2em' }}>
+                  Owners: {owners.length}
+                </span>
+              </div>
+            </div>
+          )}
+        </div>
       </div>
-    </div>
+    </MessageContextMenu>
   );
 }