feat(core): added domain map (#1013)

* feat(core): added domain map * feat(core): added domain map * feat(core): added domain map * Create happy-monkeys-smoke.md * feat(core): added domain map
event-catalog · Dec 10, 2024 · 9c84f9c · 9c84f9c
1 parent f8a2af4
commit 9c84f9c
Show file tree

Hide file tree

Showing 45 changed files with 689 additions and 361 deletions.
diff --git a/.changeset/happy-monkeys-smoke.md b/.changeset/happy-monkeys-smoke.md
@@ -0,0 +1,5 @@
+---
+"@eventcatalog/core": patch
+---
+
+feat(core): added inital version of the domain map to visualizer
diff --git a/eventcatalog/package.json b/eventcatalog/package.json
@@ -30,6 +30,7 @@
     "@stoplight/mosaic": "^1.53.2",
     "@tailwindcss/typography": "^0.5.13",
     "@tanstack/react-table": "^8.17.3",
+    "@xyflow/react": "^12.3.6",
     "astro": "^4.16.5",
     "astro-expressive-code": "^0.36.1",
     "astro-pagefind": "^1.6.0",
@@ -47,7 +48,6 @@
     "rapidoc": "^9.3.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "reactflow": "^11.11.4",
     "rehype-slug": "^6.0.0",
     "remark-gfm": "^3.0.1",
     "semver": "7.6.3",

diff --git a/eventcatalog/src/components/MDX/Accordion/Accordion.tsx b/eventcatalog/src/components/MDX/Accordion/Accordion.tsx
@@ -7,7 +7,7 @@ export default function Example({ title, children }: any) {
     <div className="border border-gray-200 rounded-md px-4 shadow-sm py-2 accordion">
       <Disclosure as="div" key={title} className="">
         {({ open }) => (
-          <>
+          <div>
             <DisclosureButton className="flex w-full items-start justify-between text-left text-gray-900">
               <span className="text-base font-semibold leading-7">{title}</span>
               <span className="ml-6 flex h-7 items-center">
@@ -21,7 +21,7 @@ export default function Example({ title, children }: any) {
             <DisclosurePanel as="dd" className="pr-12 not-prose py-4">
               <p className="text-base leading-7 text-gray-600">{children}</p>
             </DisclosurePanel>
-          </>
+          </div>
         )}
       </Disclosure>
     </div>

diff --git a/eventcatalog/src/components/MDX/AsyncAPI/AsyncAPI.astro b/eventcatalog/src/components/MDX/AsyncAPI/AsyncAPI.astro
@@ -4,13 +4,13 @@ import Admonition from '../Admonition';
 
 <div class="mb-4">
   <Admonition type="warning">
-    <>
+    <div>
       <span class="block font-bold">{`<AsyncAPI/>`} component now deprecated</span>
       <span class="block"
         >Use the new specifications frontmatter api. <a href="https://www.eventcatalog.dev/docs/api/service-api"
           >Read more here.</a
         ></span
       >
-    </>
+    </div>
   </Admonition>
 </div>
diff --git a/eventcatalog/src/components/MDX/ChannelInformation/ChannelInformation.tsx b/eventcatalog/src/components/MDX/ChannelInformation/ChannelInformation.tsx
@@ -25,9 +25,9 @@ const ChannelParameters = (data: CollectionEntry<'channels'>['data']) => {
       <div>
         <p className="text-md">
           {data.address && (
-            <>
+            <div>
               <span className="font-semibold">Address:</span> <code className="bg-gray-100 p-1 rounded">{data.address}</code>
-            </>
+            </div>
           )}
           {data.protocols && data.protocols.length > 0 && (
             <div className="mt-2 flex items-center space-x-1">

diff --git a/eventcatalog/src/components/MDX/Flow/Flow.astro b/eventcatalog/src/components/MDX/Flow/Flow.astro
@@ -23,12 +23,12 @@ const { nodes, edges } = await getNodesAndEdges({
 {
   !flow && (
     <Admonition type="warning">
-      <>
+      <div>
         <span class="block font-bold">{`<Flow/>`} failed to load</span>
         <span class="block">
           Tried to load flow id: {id} with version {version}. Make sure you have this flow defined in your project.
         </span>
-      </>
+      </div>
     </Admonition>
   )
 }

diff --git a/eventcatalog/src/components/MDX/NodeGraph/DownloadButton.tsx b/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/eventcatalog/src/components/MDX/NodeGraph/Edges/AnimatedMessageEdge.tsx b/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
     <>
       <BaseEdge id={id} path={edgePath} markerEnd={markerEnd} />
       {/* Circle Icon */}

diff --git a/eventcatalog/src/components/MDX/NodeGraph/NodeGraph.astro b/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;
+}
 ---
 
 <div>

diff --git a/eventcatalog/src/components/MDX/NodeGraph/NodeGraph.tsx b/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<CollectionTypes>));
         }
         if (node.type === 'services') {
-          navigate(getVisualiserUrlForCollection(node.data.service));
+          navigate(getVisualiserUrlForCollection(node.data.service as CollectionEntry<'services'>));
         }
         return;
       }

diff --git a/eventcatalog/src/components/MDX/NodeGraph/Nodes/Channel.tsx b/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/eventcatalog/src/components/MDX/NodeGraph/Nodes/Command.tsx b/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/eventcatalog/src/components/MDX/NodeGraph/Nodes/Event.tsx b/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/eventcatalog/src/components/MDX/NodeGraph/Nodes/ExternalSystem.tsx b/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/eventcatalog/src/components/MDX/NodeGraph/Nodes/Query.tsx b/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/eventcatalog/src/components/MDX/NodeGraph/Nodes/Service.tsx b/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/eventcatalog/src/components/MDX/NodeGraph/Nodes/Step.tsx b/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 && (
-          <>
+          <div>
             <div className={classNames(mode === 'full' ? `border-b border-gray-200` : '')}>
               <span className="text-xs font-bold block pb-0.5">{title}</span>
             </div>
@@ -56,7 +56,7 @@ export default function StepNode({ data, sourcePosition, targetPosition }: any)
                 </div>
               </div>
             )}
-          </>
+          </div>
         )}
       </div>
     </div>

diff --git a/eventcatalog/src/components/MDX/NodeGraph/Nodes/User.tsx b/eventcatalog/src/components/MDX/NodeGraph/Nodes/User.tsx
@@ -1,5 +1,5 @@
 import { UserIcon } from '@heroicons/react/20/solid';
-import { Handle } from 'reactflow';
+import { Handle } from '@xyflow/react';
 
 interface Data {
   title: string;
@@ -57,7 +57,7 @@ export default function UserNode({ data, sourcePosition, targetPosition }: any)
         )}
 
         {summary && mode === 'full' && (
-          <>
+          <div>
             <div className={classNames(mode === 'full' ? `border-b border-gray-200` : '')}>
               <span className="text-xs font-bold block pb-0.5">{name}</span>
             </div>
@@ -68,7 +68,7 @@ export default function UserNode({ data, sourcePosition, targetPosition }: any)
                 </div>
               </div>
             )}
-          </>
+          </div>
         )}
       </div>
     </div>

diff --git a/eventcatalog/src/components/MDX/OpenAPI/OpenAPI.astro b/eventcatalog/src/components/MDX/OpenAPI/OpenAPI.astro
@@ -4,13 +4,13 @@ import Admonition from '../Admonition';
 
 <div class="mb-4">
   <Admonition type="warning">
-    <>
+    <div>
       <span class="block font-bold">{`<OpenAPI/>`} component now deprecated</span>
       <span class="block"
         >Use the new specifications frontmatter api. <a href="https://www.eventcatalog.dev/docs/api/service-api"
           >Read more here.</a
         ></span
       >
-    </>
+    </div>
   </Admonition>
 </div>
diff --git a/eventcatalog/src/components/MDX/SchemaViewer/SchemaViewer.astro b/eventcatalog/src/components/MDX/SchemaViewer/SchemaViewer.astro
@@ -82,10 +82,10 @@ try {
           {/* User has tried to load the schema, but it was not found on file system */}
           {!schema.exists && (
             <Admonition type="warning">
-              <>
+              <div>
                 <span class="block font-bold">{`<SchemaViewer/>`} failed to load</span>
                 <span class="block">Tried to load schema from {schema.schemaPath}, but no schema can be found</span>
-              </>
+              </div>
             </Admonition>
           )}
         </div>

diff --git a/eventcatalog/src/components/Tables/Table.tsx b/eventcatalog/src/components/Tables/Table.tsx
@@ -67,7 +67,7 @@ export const Table = ({
   });
 
   return (
-    <>
+    <div>
       {/* <div className='text-right text-gray-400'>{table.getPrePaginationRowModel().rows.length} results</div> */}
       <div className=" bg-gray-100/20 rounded-md border-2 border-gray-200 shadow-sm ">
         <table className="min-w-full divide-y divide-gray-200 rounded-md ">
@@ -171,7 +171,7 @@ export const Table = ({
           </select>
         </div>
       </div>
-    </>
+    </div>
   );
 };
 
@@ -225,7 +225,7 @@ function Filter({ column }: { column: Column<any, unknown> }) {
   }, [column.getFacetedUniqueValues(), filterVariant]);
 
   return (
-    <>
+    <div>
       {/* Autocomplete suggestions from faceted values feature */}
       <datalist id={column.id + 'list'}>
         {sortedUniqueValues.map((value: any, index) => (
@@ -241,6 +241,6 @@ function Filter({ column }: { column: Column<any, unknown> }) {
         list={column.id + 'list'}
       />
       <div className="h-1" />
-    </>
+    </div>
   );
 }
diff --git a/eventcatalog/src/hooks/eventcatalog-visualizer.ts b/eventcatalog/src/hooks/eventcatalog-visualizer.ts
@@ -1,5 +1,5 @@
 import { useCallback, useMemo, useState, useEffect } from 'react';
-import { type Edge, type Node } from 'reactflow';
+import { type Edge, type Node } from '@xyflow/react';
 import {
   createEdge,
   generatedIdForEdge,
@@ -8,6 +8,8 @@ import {
   getEdgeLabelForServiceAsTarget,
   getNodesAndEdgesFromDagre,
 } from '@utils/node-graphs/utils/utils';
+import type { CollectionEntry } from 'astro:content';
+import type { CollectionMessageTypes, CollectionTypes } from '@types';
 
 interface EventCatalogVisualizerProps {
   nodes: Node[];
@@ -50,18 +52,21 @@ export const useEventCatalogVisualiser = ({ nodes, edges, setNodes, setEdges }:
         return [...acc, edge];
       }
 
+      const dataTarget = data?.target as CollectionEntry<CollectionTypes>;
+      const dataSource = data?.source as CollectionEntry<CollectionTypes>;
+
       if (sourceIsChannel) {
         const edgeLabel =
-          data.target.collection === 'services'
-            ? getEdgeLabelForMessageAsSource(data.source)
-            : getEdgeLabelForServiceAsTarget(data.target);
+          dataTarget?.collection === 'services'
+            ? getEdgeLabelForMessageAsSource(dataSource as CollectionEntry<CollectionMessageTypes>)
+            : getEdgeLabelForServiceAsTarget(dataTarget as CollectionEntry<CollectionMessageTypes>);
 
         return [
           ...acc,
           createEdge({
-            id: generatedIdForEdge(data.source, data.target),
-            source: generateIdForNode(data.source),
-            target: generateIdForNode(data.target),
+            id: generatedIdForEdge(dataSource, dataTarget),
+            source: generateIdForNode(dataSource),
+            target: generateIdForNode(dataTarget),
             label: edgeLabel,
           }),
         ];