@eventcatalog/core 2.54.7 → 2.55.0

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

@@ -1,33 +1,13 @@
-import { ServerIcon } from '@heroicons/react/16/solid';
-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';
-import { getIcon } from '@utils/badges';
+import { Position } from '@xyflow/react';
 
-interface Data {
-  label: string;
-  bgColor: string;
-  color: string;
-  mode: 'simple' | 'full';
-  service: CollectionEntry<'services'>;
-  showTarget?: boolean;
-  showSource?: boolean;
-}
-
-function classNames(...classes: any) {
-  return classes.filter(Boolean).join(' ');
-}
-
-export default function ServiceNode({ data, sourcePosition, targetPosition }: any) {
-  const { mode, service } = data as Data;
+import { nodeComponents, type ServiceNode } from '@eventcatalog/visualizer';
+const ServiceComponent = nodeComponents.service;
 
-  const { id, version, owners = [], sends = [], receives = [], name, specifications, repository, styles } = service.data;
-  const { node: { color = 'pink', label } = {}, icon = 'ServerIcon' } = styles || {};
-
-  const Icon = getIcon(icon);
-  const nodeLabel = label || service?.data?.sidebar?.badge || 'Service';
-  const fontSize = nodeLabel.length > 10 ? '7px' : '9px';
+export default function ServiceNode(props: ServiceNode) {
+  const { id, version, specifications, repository } = props.data.service as any;
 
   let asyncApiFiles = Array.isArray(specifications) ? specifications?.filter((spec) => spec.type === 'asyncapi') : ([] as any);
   let openApiFiles = Array.isArray(specifications) ? specifications?.filter((spec) => spec.type === 'openapi') : ([] as any);
@@ -60,54 +40,20 @@ export default function ServiceNode({ data, sourcePosition, targetPosition }: an
   return (
     <ContextMenu.Root>
       <ContextMenu.Trigger>
-        <div className={classNames(`w-full rounded-md border flex justify-start  bg-white text-black border-${color}-400`)}>
-          <div
-            className={classNames(
-              `bg-gradient-to-b from-${color}-500 to-${color}-700 relative flex items-center w-5 justify-center rounded-l-sm text-${color}-100`,
-              `border-r-[1px] border-${color}-500`
-            )}
-          >
-            {Icon && <Icon 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-[${fontSize}] text-white font-bold uppercase tracking-[3px] `}
-              >
-                {nodeLabel}
-              </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 pt-0.5 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 ">{nodeLabel}</span>
-                )}
-              </div>
-            </div>
-            {mode === 'full' && (
-              <div className="divide-y divide-gray-200 ">
-                <div className="leading-3 py-1">
-                  <span className="text-[8px] font-light">{service.data.summary}</span>
-                </div>
-
-                <div className="grid grid-cols-2 gap-x-4 py-1">
-                  <span className="text-xs" style={{ fontSize: '0.2em' }}>
-                    Receives messages: {receives.length}
-                  </span>
-                  <span className="text-xs" style={{ fontSize: '0.2em' }}>
-                    Publishes messages: {sends.length}
-                  </span>
-                  <span className="text-xs" style={{ fontSize: '0.2em' }}>
-                    Owners: {owners.length}
-                  </span>
-                </div>
-              </div>
-            )}
-          </div>
+        <div className="relative">
+          <Handle
+            type="target"
+            position={Position.Left}
+            style={{ width: 10, height: 10, background: 'pink', zIndex: 10 }}
+            className="bg-pink-500"
+          />
+          <Handle
+            type="source"
+            position={Position.Right}
+            style={{ width: 10, height: 10, background: 'pink', zIndex: 10 }}
+            className="bg-pink-500"
+          />
+          <ServiceComponent {...props} />
         </div>
       </ContextMenu.Trigger>
       <ContextMenu.Portal>

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

@@ -0,0 +1,24 @@
+import { Handle, Position } from '@xyflow/react';
+
+import { nodeComponents, type ViewNode } from '@eventcatalog/visualizer';
+const ViewComponent = nodeComponents.view;
+
+export default function ViewNode(props: ViewNode) {
+  return (
+    <div className="relative">
+      <Handle
+        type="target"
+        position={Position.Left}
+        style={{ width: 10, height: 10, background: 'blue', zIndex: 10 }}
+        className="bg-gray-500"
+      />
+      <Handle
+        type="source"
+        position={Position.Right}
+        style={{ width: 10, height: 10, background: 'blue', zIndex: 10 }}
+        className="bg-gray-500"
+      />
+      <ViewComponent {...props} />
+    </div>
+  );
+}

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

@@ -24,6 +24,7 @@ import Miro from '@components/MDX/Miro/Miro.astro';
 import Lucid from '@components/MDX/Lucid/Lucid.astro';
 import DrawIO from '@components/MDX/DrawIO/DrawIO.astro';
 import FigJam from '@components/MDX/FigJam/FigJam.astro';
+import Design from '@components/MDX/Design/Design.astro';
 //  Portals: required for server/client components
 import NodeGraphPortal from '@components/MDX/NodeGraph/NodeGraphPortal';
 import SchemaViewerPortal from '@components/MDX/SchemaViewer/SchemaViewerPortal';
@@ -37,6 +38,7 @@ const components = (props: any) => {
     Admonition,
     AsyncAPI,
     ChannelInformation: (mdxProp: any) => ChannelInformation({ ...props.data, ...mdxProp }),
+    Design: (mdxProp: any) => jsx(Design, { ...props, ...mdxProp }),
     File: (mdxProp: any) => File({ ...props, ...mdxProp }),
     RemoteSchema,
     Flow,

package/eventcatalog/src/components/Search/Search.astro

@@ -3,8 +3,8 @@ import MagnifyingGlassIcon from '@heroicons/react/24/outline/MagnifyingGlassIcon
 import SearchModal from './SearchModal.tsx';
 import { buildUrl } from '@utils/url-builder.ts';
 
-const pagefindJsUrl = buildUrl('/pagefind/pagefind.js');
-const pagefindCssUrl = buildUrl('/pagefind/pagefind-ui.css');
+const pagefindJsUrl = buildUrl('/pagefind/pagefind.js', true);
+const pagefindCssUrl = buildUrl('/pagefind/pagefind-ui.css', true);
 ---
 
 <link href={pagefindCssUrl} rel="stylesheet" />

package/eventcatalog/src/components/SideNav/ListViewSideBar/index.tsx

@@ -314,6 +314,7 @@ const ListViewSideBar: React.FC<ListViewSideBarProps> = ({ resources, currentPat
           }))
           .filter((service: ServiceItem & { isVisible: boolean }) => service.isVisible) || [],
       flows: data.flows?.filter(filterItem) || [],
+      designs: data.designs?.filter(filterItem) || [],
       messagesNotInService:
         data.messagesNotInService?.filter(
           (msg: MessageItem) =>
@@ -758,6 +759,28 @@ const ListViewSideBar: React.FC<ListViewSideBarProps> = ({ resources, currentPat
                 </ul>
               </div>
             )}
+            {filteredData['designs'] && isVisualizer && (
+              <div className="pt-4 pb-2">
+                <ul className="space-y-4">
+                  {filteredData['designs'].map((item: any) => (
+                    <li key={item.href} className="space-y-0" data-active={decodedCurrentPath === item.href}>
+                      <a
+                        href={item.href}
+                        data-active={decodedCurrentPath === item.href}
+                        className={`flex items-center justify-between px-2 py-0.5 text-xs font-bold rounded-md ${
+                          decodedCurrentPath === item.href ? 'bg-cyan-100 text-cyan-900' : 'hover:bg-purple-100'
+                        }`}
+                      >
+                        <span className="truncate">
+                          <HighlightedText text={item.label} searchTerm={debouncedSearchTerm} />
+                        </span>
+                        <span className="text-cyan-600 ml-2 text-[10px] font-medium bg-cyan-50 px-2 py-0.5 rounded">DESIGN</span>
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            )}
           </>
         )}
       </div>

package/eventcatalog/src/components/SideNav/ListViewSideBar/types.ts

@@ -52,6 +52,13 @@ export interface FlowItem {
   label: string;
 }
 
+export interface DesignItem {
+  href: string;
+  label: string;
+  id: string;
+  name: string;
+}
+
 export interface Resources {
   'context-map'?: Array<{
     href: string;
@@ -62,6 +69,7 @@ export interface Resources {
   domains?: DomainItem[];
   services?: ServiceItem[];
   flows?: FlowItem[];
+  designs?: DesignItem[];
   messagesNotInService?: MessageItem[];
   commands?: MessageItem[];
   queries?: MessageItem[];

package/eventcatalog/src/components/SideNav/ListViewSideBar/utils.ts

@@ -7,6 +7,7 @@ import { getServices, getSpecificationsForService } from '@utils/collections/ser
 import { getCommands } from '@utils/commands';
 import { getEvents } from '@utils/events';
 import { getQueries } from '@utils/queries';
+import { getDesigns } from '@utils/collections/designs';
 
 const stripCollection = (collection: any) => {
   return collection.map((item: any) => ({
@@ -25,6 +26,7 @@ export async function getResourcesForNavigation({ currentPath }: { currentPath:
   const domains = await getDomains({ getAllVersions: false });
   const channels = await getChannels({ getAllVersions: false });
   const flows = await getFlows({ getAllVersions: false });
+  const designs = await getDesigns({ getAllVersions: false });
 
   const messages = [...events, ...commands, ...queries];
 
@@ -152,5 +154,14 @@ export async function getResourcesForNavigation({ currentPath }: { currentPath:
     messagesNotInService: messagesNotInServiceAsSideNav,
   };
 
+  // Add designs?
+  if (designs.length > 0) {
+    sideNav['designs'] = designs.map((design) => ({
+      label: design.data.name,
+      href: buildUrl(`/visualiser/designs/${design.data.id}`),
+      collection: 'designs',
+    }));
+  }
+
   return sideNav;
 }

package/eventcatalog/src/content.config.ts

@@ -1,7 +1,10 @@
 import { z, defineCollection, reference } from 'astro:content';
 import { glob } from 'astro/loaders';
+import { glob as globPackage } from 'glob';
 import { v4 as uuidv4 } from 'uuid';
 import { badge, ownerReference } from './content.config-shared-collections';
+import fs from 'fs';
+import path from 'path';
 
 // Enterprise Collections
 import { chatPromptsSchema, customPagesSchema } from './enterprise/collections';
@@ -556,6 +559,35 @@ const teams = defineCollection({
   }),
 });
 
+const designs = defineCollection({
+  loader: async () => {
+    const data = await globPackage('**/**/*.ecstudio', { cwd: projectDirBase });
+    // File all the files in the designs folder
+    // Limit 3 designs community edition?
+    const files = data.reduce<{ id: string; name: string }[]>((acc, filePath) => {
+      try {
+        const data = fs.readFileSync(path.join(projectDirBase!, filePath), 'utf-8');
+        const json = JSON.parse(data);
+        return [...acc, { ...json }];
+      } catch (error) {
+        console.error('Error loading design', error);
+        return acc;
+      }
+    }, []);
+    return files;
+  },
+  schema: z.object({
+    id: z.string(),
+    name: z.string(),
+    creationDate: z.string(),
+    source: z.string(),
+    nodes: z.any(),
+    edges: z.any(),
+    viewport: z.any(),
+    version: z.string(),
+  }),
+});
+
 export const collections = {
   events,
   commands,
@@ -576,4 +608,7 @@ export const collections = {
   // EventCatalog Pro Collections
   customPages,
   chatPrompts,
+
+  // EventCatalog Studio Collections
+  designs,
 };

package/eventcatalog/src/pages/visualiser/designs/[id]/_index.data.ts

@@ -0,0 +1,75 @@
+import { HybridPage } from '@utils/page-loaders/hybrid-page';
+import { isAuthEnabled } from '@utils/feature';
+
+export class Page extends HybridPage {
+  static async getStaticPaths(): Promise<Array<{ params: any; props: any }>> {
+    if (isAuthEnabled()) {
+      return [];
+    }
+
+    const { getDesigns } = await import('@utils/collections/designs');
+
+    const designs = await getDesigns();
+
+    return designs.map((item) => ({
+      params: {
+        type: 'designs',
+        id: item.data.id,
+      },
+      props: {
+        type: 'designs',
+        ...item,
+      },
+    }));
+  }
+
+  protected static async fetchData(params: any) {
+    const { id } = params;
+
+    if (!id) {
+      return null;
+    }
+
+    const { getDesigns } = await import('@utils/collections/designs');
+    const designs = await getDesigns();
+
+    const design = designs.find((design) => design.data.id === id);
+
+    if (!design) {
+      return null;
+    }
+
+    return {
+      type: 'designs',
+      ...design,
+    };
+  }
+
+  protected static createNotFoundResponse(): Response {
+    return new Response(null, {
+      status: 404,
+      statusText: 'Design not found',
+    });
+  }
+
+  static get clientAuthScript(): string {
+    if (!isAuthEnabled()) {
+      return '';
+    }
+
+    return `
+      if (typeof window !== 'undefined' && !import.meta.env.SSR) {
+        fetch('/api/auth/session')
+          .then(res => res.json())
+          .then(session => {
+            if (!session?.user) {
+              window.location.href = '/auth/login?callbackUrl=' + encodeURIComponent(window.location.pathname);
+            }
+          })
+          .catch(() => {
+            window.location.href = '/auth/login?callbackUrl=' + encodeURIComponent(window.location.pathname);
+          });
+      }
+    `;
+  }
+}

package/eventcatalog/src/pages/visualiser/designs/[id]/index.astro

@@ -0,0 +1,31 @@
+---
+import NodeGraph from '@components/MDX/NodeGraph/NodeGraph';
+import { ClientRouter } from 'astro:transitions';
+import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
+
+import { Page } from './_index.data';
+
+export const prerender = Page.prerender;
+export const getStaticPaths = Page.getStaticPaths;
+
+const props = Astro.props;
+
+const { data } = props;
+---
+
+<VerticalSideBarLayout title={`Visualiser | Bounded context map`}>
+  <div class="bg-gray-100/50 m-4">
+    <div class="h-[calc(100vh-130px)] w-full relative border border-gray-200" id={`${data.id}-portal`} transition:animate="fade">
+    </div>
+    <NodeGraph
+      id={data.id}
+      nodes={data.nodes}
+      edges={data.edges}
+      title={data.name}
+      client:only="react"
+      mode="full"
+      linkTo="visualiser"
+    />
+  </div>
+  <ClientRouter />
+</VerticalSideBarLayout>

package/eventcatalog/src/pages/visualiser/domains/[id]/[version]/entity-map/_index.data.ts

@@ -39,8 +39,6 @@ export class Page extends HybridPage {
     // Find the specific item by id and version, and only if it has entities
     const item = items.find((i) => i.data.id === id && i.data.version === version && domainHasEntities(i));
 
-    console.log('ITEM', item);
-
     if (!item) {
       return null;
     }

package/eventcatalog/src/utils/collections/designs.ts

@@ -0,0 +1,13 @@
+import { getCollection } from 'astro:content';
+import type { CollectionEntry } from 'astro:content';
+
+export type Design = CollectionEntry<'designs'>;
+
+interface Props {
+  getAllVersions?: boolean;
+}
+
+export const getDesigns = async ({ getAllVersions = true }: Props = {}): Promise<Design[]> => {
+  const designs = await getCollection('designs');
+  return designs.sort((a, b) => a.data.name.localeCompare(b.data.name));
+};

package/eventcatalog/src/utils/collections/file-diffs.ts

@@ -6,7 +6,7 @@ import { getItemsFromCollectionByIdAndSemverOrLatest } from './util';
 import type { CollectionEntry } from 'astro:content';
 import type { CollectionTypes } from '@types';
 
-const FILE_EXTENSIONS_TO_INCLUDE = ['.json', '.avro', '.yaml', '.yml', '.proto', '.pb', '.pbjson', '.pb.go'];
+const FILE_EXTENSIONS_TO_INCLUDE = ['.json', '.avsc', '.avro', '.yaml', '.yml', '.proto', '.pb', '.pbjson', '.pb.go'];
 
 /**
  * Generates a diff string in a unified diff format for two versions of a file.

package/eventcatalog/src/utils/node-graphs/domains-canvas.ts

@@ -166,7 +166,7 @@ export const getDomainsCanvasData = async (): Promise<DomainCanvasData> => {
           position: { x: 0, y: 0 }, // Temporary position, will be calculated by dagre
           data: {
             mode: 'simple',
-            message: messageObject,
+            message: { ...messageObject.data },
           },
           sourcePosition: 'right',
           targetPosition: 'left',
@@ -188,7 +188,7 @@ export const getDomainsCanvasData = async (): Promise<DomainCanvasData> => {
                 animated: true,
                 label: 'publishes',
                 data: {
-                  message: messageObject,
+                  message: { ...messageObject.data },
                   type: 'domain-to-message',
                   publisherService: service,
                 },
@@ -213,7 +213,7 @@ export const getDomainsCanvasData = async (): Promise<DomainCanvasData> => {
                 animated: true,
                 label: 'consumed by',
                 data: {
-                  message: messageObject,
+                  message: { ...messageObject.data },
                   type: 'message-to-domain',
                   consumerService: service,
                 },

package/eventcatalog/src/utils/node-graphs/flows-node-graph.ts

@@ -89,7 +89,7 @@ export const getNodesAndEdges = async ({ id, defaultFlow, version, mode = 'simpl
       targetPosition: 'left',
       data: {
         mode,
-        step: step,
+        step: { ...step, ...step.data },
         showTarget: true,
         showSource: true,
       },
@@ -97,12 +97,12 @@ export const getNodesAndEdges = async ({ id, defaultFlow, version, mode = 'simpl
       type: step.type,
     } as NodeType;
 
-    if (step.service) node.data.service = step.service;
-    if (step.flow) node.data.flow = step.flow;
-    if (step.message) node.data.message = step.message;
-    if (step.actor) node.data.actor = step.actor;
-    if (step.externalSystem) node.data.externalSystem = step.externalSystem;
-    if (step.custom) node.data.custom = step.custom;
+    if (step.service) node.data.service = { ...step.service, ...step.service.data };
+    if (step.flow) node.data.flow = { ...step.flow, ...step.flow.data };
+    if (step.message) node.data.message = { ...step.message, ...step.message.data };
+    if (step.actor) node.data.actor = { ...step.actor, ...step.actor.data };
+    if (step.externalSystem) node.data.externalSystem = { ...step.externalSystem, ...step.externalSystem.data };
+    if (step.custom) node.data.custom = { ...step.custom, ...step.custom.data };
     nodes.push(node);
   });
 

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

@@ -66,7 +66,7 @@ const getNodesAndEdges = async ({
       type: producer?.collection,
       sourcePosition: 'right',
       targetPosition: 'left',
-      data: { mode, service: producer },
+      data: { mode, service: { ...producer.data } },
       position: { x: 250, y: 0 },
     });
 
@@ -110,7 +110,12 @@ const getNodesAndEdges = async ({
     id: generateIdForNode(message),
     sourcePosition: 'right',
     targetPosition: 'left',
-    data: { mode, message: message },
+    data: {
+      mode,
+      message: {
+        ...message.data,
+      },
+    },
     position: { x: 0, y: 0 },
     type: message.collection,
   });
@@ -121,7 +126,7 @@ const getNodesAndEdges = async ({
       id: generateIdForNode(consumer),
       sourcePosition: 'right',
       targetPosition: 'left',
-      data: { title: consumer?.data.id, mode, service: consumer },
+      data: { title: consumer?.data.id, mode, service: { ...consumer.data } },
       position: { x: 0, y: 0 },
       type: consumer?.collection,
     });

package/eventcatalog/src/utils/node-graphs/services-node-graph.ts

@@ -106,7 +106,7 @@ export const getNodesAndEdges = async ({
       type: receive?.collection,
       sourcePosition: 'right',
       targetPosition: 'left',
-      data: { mode, message: receive },
+      data: { mode, message: { ...receive.data } },
     });
 
     // does the message have channels defined?
@@ -132,7 +132,7 @@ export const getNodesAndEdges = async ({
           source: generateIdForNode(receive),
           target: generateIdForNode(service),
           label: getReceivesMessageByMessageType(receive?.collection),
-          data: { message: receive },
+          data: { message: { ...receive.data } },
         })
       );
     }
@@ -143,7 +143,8 @@ export const getNodesAndEdges = async ({
     id: generateIdForNode(service),
     sourcePosition: 'right',
     targetPosition: 'left',
-    data: { mode, service: service },
+    // data: { mode, service: { ...service, ...service.data } },
+    data: { mode, service: { ...service.data } },
     type: service.collection,
   });
 
@@ -153,7 +154,7 @@ export const getNodesAndEdges = async ({
       id: generateIdForNode(send),
       sourcePosition: 'right',
       targetPosition: 'left',
-      data: { mode, message: send },
+      data: { mode, message: { ...send.data } },
       type: send?.collection,
     });
 
@@ -179,7 +180,7 @@ export const getNodesAndEdges = async ({
           source: generateIdForNode(service),
           target: generateIdForNode(send),
           label: getSendsMessageByMessageType(send?.collection),
-          data: { message: send },
+          data: { message: { ...send.data } },
         })
       );
     }
@@ -194,7 +195,7 @@ export const getNodesAndEdges = async ({
         target: generateIdForNode(message),
         label: `${getSendsMessageByMessageType(message?.collection)} & ${getReceivesMessageByMessageType(message?.collection)}`,
         animated: false,
-        data: { message },
+        data: { message: { ...message.data } },
         markerEnd: {
           type: MarkerType.ArrowClosed,
           width: 40,

package/eventcatalog/src/utils/node-graphs/utils/utils.ts

@@ -131,7 +131,7 @@ export const getChannelNodesAndEdges = ({
       nodes.push(
         createNode({
           id: channelId,
-          data: { title: channel?.data.id, mode, channel, source, target },
+          data: { title: channel?.data.id, mode, channel: { ...channel, ...channel.data }, source, target },
           position: { x: 0, y: 0 },
           type: channel?.collection,
         })

package/eventcatalog/tailwind.config.mjs

@@ -61,6 +61,7 @@ export default {
     'bg-indigo-100',
     'text-[5px]',
     'text-[9px]',
+    'min-h-[100px]',
   ],
 
   plugins: [require('@tailwindcss/typography')],

package/package.json

@@ -6,7 +6,7 @@
     "url": "https://github.com/event-catalog/eventcatalog.git"
   },
   "type": "module",
-  "version": "2.54.7",
+  "version": "2.55.0",
   "publishConfig": {
     "access": "public"
   },
@@ -37,6 +37,7 @@
     "@eventcatalog/generator-ai": "^1.1.0",
     "@eventcatalog/linter": "^0.0.2",
     "@eventcatalog/sdk": "^2.2.7",
+    "@eventcatalog/visualizer": "^0.0.4",
     "@fontsource/inter": "^5.2.5",
     "@headlessui/react": "^2.0.3",
     "@heroicons/react": "^2.1.3",