)}
{data.protocols && data.protocols.length > 0 && (
diff --git a/packages/core/eventcatalog/src/components/MDX/Flow/Flow.astro b/packages/core/eventcatalog/src/components/MDX/Flow/Flow.astro
index 9cbd424c..0780bd55 100644
--- a/packages/core/eventcatalog/src/components/MDX/Flow/Flow.astro
+++ b/packages/core/eventcatalog/src/components/MDX/Flow/Flow.astro
@@ -23,12 +23,12 @@ const { nodes, edges } = await getNodesAndEdges({
{
!flow && (
- <>
+
{``} failed to load
Tried to load flow id: {id} with version {version}. Make sure you have this flow defined in your project.
-
+
)
}
diff --git a/packages/core/eventcatalog/src/components/MDX/NodeGraph/DownloadButton.tsx b/packages/core/eventcatalog/src/components/MDX/NodeGraph/DownloadButton.tsx
index c83b1580..2f6e07d6 100644
--- a/packages/core/eventcatalog/src/components/MDX/NodeGraph/DownloadButton.tsx
+++ b/packages/core/eventcatalog/src/components/MDX/NodeGraph/DownloadButton.tsx
@@ -1,4 +1,4 @@
-import { Panel, useReactFlow, getNodesBounds, getViewportForBounds } from 'reactflow';
+import { Panel, useReactFlow, getNodesBounds, getViewportForBounds } from '@xyflow/react';
import { toPng } from 'html-to-image';
import { DocumentArrowDownIcon } from '@heroicons/react/24/outline';
@@ -19,7 +19,7 @@ function DownloadButton({ filename, addPadding = true }: { filename?: string; ad
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);
+ const viewport = getViewportForBounds(nodesBounds, width, height, 0.5, 2, 0);
// Hide the button
// @ts-ignore
diff --git a/packages/core/eventcatalog/src/components/MDX/NodeGraph/Edges/AnimatedMessageEdge.tsx b/packages/core/eventcatalog/src/components/MDX/NodeGraph/Edges/AnimatedMessageEdge.tsx
index 1cafc76e..073b677a 100644
--- a/packages/core/eventcatalog/src/components/MDX/NodeGraph/Edges/AnimatedMessageEdge.tsx
+++ b/packages/core/eventcatalog/src/components/MDX/NodeGraph/Edges/AnimatedMessageEdge.tsx
@@ -1,5 +1,5 @@
import { useMemo } from 'react';
-import { BaseEdge, getBezierPath } from 'reactflow';
+import { BaseEdge, getBezierPath } from '@xyflow/react';
const AnimatedMessageEdge = ({
id,
@@ -44,6 +44,7 @@ const AnimatedMessageEdge = ({
const randomDelay = useMemo(() => Math.random() * 1, []);
return (
+ // @ts-ignore
<>
{/* Circle Icon */}
diff --git a/packages/core/eventcatalog/src/components/MDX/NodeGraph/NodeGraph.astro b/packages/core/eventcatalog/src/components/MDX/NodeGraph/NodeGraph.astro
index bdd66772..575e65b9 100644
--- a/packages/core/eventcatalog/src/components/MDX/NodeGraph/NodeGraph.astro
+++ b/packages/core/eventcatalog/src/components/MDX/NodeGraph/NodeGraph.astro
@@ -6,7 +6,10 @@ import {
getNodesAndEdgesForEvents,
getNodesAndEdgesForQueries,
} from '@utils/node-graphs/message-node-graph';
-import { getNodesAndEdges as getNodesAndEdgesForDomain } from '@utils/node-graphs/domains-node-graph';
+import {
+ getNodesAndEdges as getNodesAndEdgesForDomain,
+ getNodesAndEdgesForDomainContextMap,
+} from '@utils/node-graphs/domains-node-graph';
import { getNodesAndEdges as getNodesAndEdgesForFlows } from '@utils/node-graphs/flows-node-graph';
interface Props {
@@ -24,8 +27,10 @@ interface Props {
}
const { id, collection, title, mode = 'simple', linkTo = 'docs', version, href, linksToVisualiser } = Astro.props;
+
let nodes = [],
edges = [];
+
const getNodesAndEdgesFunctions = {
services: getNodesAndEdgesForService,
events: getNodesAndEdgesForEvents,
@@ -47,6 +52,12 @@ if (collection in getNodesAndEdgesFunctions) {
nodes = fetchedNodes;
edges = fetchedEdges;
}
+
+if (collection === 'domain-context-map') {
+ const { nodes: fetchedNodes, edges: fetchedEdges } = await getNodesAndEdgesForDomainContextMap({});
+ nodes = fetchedNodes;
+ edges = fetchedEdges;
+}
---
diff --git a/packages/core/eventcatalog/src/components/MDX/NodeGraph/NodeGraph.tsx b/packages/core/eventcatalog/src/components/MDX/NodeGraph/NodeGraph.tsx
index 4daa6b43..265901d6 100644
--- a/packages/core/eventcatalog/src/components/MDX/NodeGraph/NodeGraph.tsx
+++ b/packages/core/eventcatalog/src/components/MDX/NodeGraph/NodeGraph.tsx
@@ -1,6 +1,7 @@
import { useEffect, useMemo, useState, useCallback, useRef } from 'react';
import { createPortal } from 'react-dom';
-import ReactFlow, {
+import {
+ ReactFlow,
Background,
ConnectionLineType,
Controls,
@@ -11,8 +12,8 @@ import ReactFlow, {
type Edge,
type Node,
useReactFlow,
-} from 'reactflow';
-import 'reactflow/dist/style.css';
+} from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
// Nodes and edges
import ServiceNode from './Nodes/Service';
@@ -105,10 +106,10 @@ const NodeGraphBuilder = ({
(_: any, node: Node) => {
if (linksToVisualiser) {
if (node.type === 'events' || node.type === 'commands') {
- navigate(getVisualiserUrlForCollection(node.data.message));
+ navigate(getVisualiserUrlForCollection(node.data.message as CollectionEntry
));
}
if (node.type === 'services') {
- navigate(getVisualiserUrlForCollection(node.data.service));
+ navigate(getVisualiserUrlForCollection(node.data.service as CollectionEntry<'services'>));
}
return;
}
diff --git a/packages/core/eventcatalog/src/components/MDX/NodeGraph/Nodes/Channel.tsx b/packages/core/eventcatalog/src/components/MDX/NodeGraph/Nodes/Channel.tsx
index 6f697293..bf688607 100644
--- a/packages/core/eventcatalog/src/components/MDX/NodeGraph/Nodes/Channel.tsx
+++ b/packages/core/eventcatalog/src/components/MDX/NodeGraph/Nodes/Channel.tsx
@@ -2,7 +2,7 @@ import { BoltIcon } from '@heroicons/react/16/solid';
import { ArrowsRightLeftIcon } from '@heroicons/react/20/solid';
import type { CollectionMessageTypes, CollectionTypes } from '@types';
import type { CollectionEntry } from 'astro:content';
-import { Handle } from 'reactflow';
+import { Handle } from '@xyflow/react';
interface Data {
title: string;
diff --git a/packages/core/eventcatalog/src/components/MDX/NodeGraph/Nodes/Command.tsx b/packages/core/eventcatalog/src/components/MDX/NodeGraph/Nodes/Command.tsx
index 4aeaa4ff..29e5af50 100644
--- a/packages/core/eventcatalog/src/components/MDX/NodeGraph/Nodes/Command.tsx
+++ b/packages/core/eventcatalog/src/components/MDX/NodeGraph/Nodes/Command.tsx
@@ -1,6 +1,6 @@
import { ChatBubbleLeftIcon } from '@heroicons/react/16/solid';
import type { CollectionEntry } from 'astro:content';
-import { Handle } from 'reactflow';
+import { Handle } from '@xyflow/react';
interface Data {
title: string;
diff --git a/packages/core/eventcatalog/src/components/MDX/NodeGraph/Nodes/Event.tsx b/packages/core/eventcatalog/src/components/MDX/NodeGraph/Nodes/Event.tsx
index c01197f7..2b38ed21 100644
--- a/packages/core/eventcatalog/src/components/MDX/NodeGraph/Nodes/Event.tsx
+++ b/packages/core/eventcatalog/src/components/MDX/NodeGraph/Nodes/Event.tsx
@@ -1,6 +1,6 @@
import { BoltIcon } from '@heroicons/react/16/solid';
import type { CollectionEntry } from 'astro:content';
-import { Handle } from 'reactflow';
+import { Handle } from '@xyflow/react';
interface Data {
title: string;
diff --git a/packages/core/eventcatalog/src/components/MDX/NodeGraph/Nodes/ExternalSystem.tsx b/packages/core/eventcatalog/src/components/MDX/NodeGraph/Nodes/ExternalSystem.tsx
index 0d1dcf3c..e642fd4f 100644
--- a/packages/core/eventcatalog/src/components/MDX/NodeGraph/Nodes/ExternalSystem.tsx
+++ b/packages/core/eventcatalog/src/components/MDX/NodeGraph/Nodes/ExternalSystem.tsx
@@ -1,7 +1,7 @@
import { ServerIcon } from '@heroicons/react/16/solid';
import { GlobeAmericasIcon } from '@heroicons/react/20/solid';
import type { CollectionEntry } from 'astro:content';
-import { Handle } from 'reactflow';
+import { Handle } from '@xyflow/react';
interface Data {
label: string;
diff --git a/packages/core/eventcatalog/src/components/MDX/NodeGraph/Nodes/Query.tsx b/packages/core/eventcatalog/src/components/MDX/NodeGraph/Nodes/Query.tsx
index a761d0ee..3da209a9 100644
--- a/packages/core/eventcatalog/src/components/MDX/NodeGraph/Nodes/Query.tsx
+++ b/packages/core/eventcatalog/src/components/MDX/NodeGraph/Nodes/Query.tsx
@@ -1,6 +1,6 @@
import { MagnifyingGlassIcon } from '@heroicons/react/16/solid';
import type { CollectionEntry } from 'astro:content';
-import { Handle } from 'reactflow';
+import { Handle } from '@xyflow/react';
interface Data {
title: string;
diff --git a/packages/core/eventcatalog/src/components/MDX/NodeGraph/Nodes/Service.tsx b/packages/core/eventcatalog/src/components/MDX/NodeGraph/Nodes/Service.tsx
index f8a1773e..3696132a 100644
--- a/packages/core/eventcatalog/src/components/MDX/NodeGraph/Nodes/Service.tsx
+++ b/packages/core/eventcatalog/src/components/MDX/NodeGraph/Nodes/Service.tsx
@@ -1,6 +1,6 @@
import { ServerIcon } from '@heroicons/react/16/solid';
import type { CollectionEntry } from 'astro:content';
-import { Handle } from 'reactflow';
+import { Handle } from '@xyflow/react';
interface Data {
label: string;
diff --git a/packages/core/eventcatalog/src/components/MDX/NodeGraph/Nodes/Step.tsx b/packages/core/eventcatalog/src/components/MDX/NodeGraph/Nodes/Step.tsx
index 27824b47..4243ed82 100644
--- a/packages/core/eventcatalog/src/components/MDX/NodeGraph/Nodes/Step.tsx
+++ b/packages/core/eventcatalog/src/components/MDX/NodeGraph/Nodes/Step.tsx
@@ -1,4 +1,4 @@
-import { Handle } from 'reactflow';
+import { Handle } from '@xyflow/react';
interface Data {
title: string;
@@ -45,7 +45,7 @@ export default function StepNode({ data, sourcePosition, targetPosition }: any)
)}
{summary && (
- <>
+
{title}
@@ -56,7 +56,7 @@ export default function StepNode({ data, sourcePosition, targetPosition }: any)
)}
-
+