@eventcatalog/core 3.17.5 → 3.18.0

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

@@ -55,7 +55,7 @@ export const getNodesAndEdgesForDomainContextMap = async ({ defaultFlow = null }
     const servicesCount = domainServices.length;
     const SERVICES_PER_ROW = 1;
     const SERVICE_WIDTH = 330;
-    const SERVICE_HEIGHT = 100;
+    const SERVICE_HEIGHT = 120;
     const PADDING = 40;
     const TITLE_HEIGHT = 20;
 

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

@@ -1,6 +1,6 @@
 import { getCollection, type CollectionEntry } from 'astro:content';
 import dagre from 'dagre';
-import { createDagreGraph, calculatedNodes } from '@utils/node-graphs/utils/utils';
+import { createDagreGraph, calculatedNodes, DEFAULT_NODE_WIDTH, DEFAULT_NODE_HEIGHT } from '@utils/node-graphs/utils/utils';
 import { MarkerType } from '@xyflow/react';
 import type { Node as NodeType } from '@xyflow/react';
 import { createVersionedMap, findInMap } from '@utils/collections/util';
@@ -153,7 +153,7 @@ export const getNodesAndEdges = async ({ id, defaultFlow, version, mode = 'simpl
   });
 
   nodes.forEach((node: any) => {
-    graph.setNode(node.id, { width: 150, height: 100 });
+    graph.setNode(node.id, { width: DEFAULT_NODE_WIDTH, height: DEFAULT_NODE_HEIGHT });
   });
 
   edges.forEach((edge: any) => {

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

@@ -24,7 +24,15 @@ import {
 import type { CollectionMessageTypes } from '@types';
 import { getCommands } from '@utils/collections/commands';
 import { getQueries } from '@utils/collections/queries';
-import { createNode, buildContextMenuForMessage, buildContextMenuForService, buildContextMenuForResource } from './utils/utils';
+import {
+  createNode,
+  buildContextMenuForMessage,
+  buildContextMenuForService,
+  buildContextMenuForResource,
+  getOperationFields,
+  DEFAULT_NODE_WIDTH,
+  DEFAULT_NODE_HEIGHT,
+} from './utils/utils';
 import { getConsumersOfMessage, getProducersOfMessage } from '@utils/collections/services';
 import { getNodesAndEdgesForChannelChain } from './channel-node-graph';
 import { getChannelChain, isChannelsConnected } from '@utils/collections/channels';
@@ -79,6 +87,7 @@ const getNodesAndEdges = async ({
       mode,
       message: {
         ...message.data,
+        ...getOperationFields(message.data),
       },
       contextMenu: buildContextMenuForMessage({
         id: message.data.id,
@@ -458,7 +467,7 @@ const getNodesAndEdges = async ({
   });
 
   nodes.forEach((node: any) => {
-    flow.setNode(node.id, { width: 150, height: 100 });
+    flow.setNode(node.id, { width: DEFAULT_NODE_WIDTH, height: DEFAULT_NODE_HEIGHT });
   });
 
   edges.forEach((edge: any) => {
@@ -546,7 +555,7 @@ export const getNodesAndEdgesForConsumedMessage = ({
       type: message.collection,
       data: {
         mode,
-        message: { ...message.data },
+        message: { ...message.data, ...getOperationFields(message.data) },
         contextMenu: buildContextMenuForMessage({
           id: message.data.id,
           version: message.data.version,
@@ -893,7 +902,7 @@ export const getNodesAndEdgesForProducedMessage = ({
       type: message.collection,
       data: {
         mode,
-        message: { ...message.data },
+        message: { ...message.data, ...getOperationFields(message.data) },
         contextMenu: buildContextMenuForMessage({
           id: message.data.id,
           version: message.data.version,

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

@@ -9,6 +9,8 @@ import {
   buildContextMenuForService,
   buildContextMenuForResource,
   versionMatches,
+  DEFAULT_NODE_WIDTH,
+  DEFAULT_NODE_HEIGHT,
 } from '@utils/node-graphs/utils/utils';
 
 import { findMatchingNodes, findInMap, createVersionedMap } from '@utils/collections/util';
@@ -275,6 +277,7 @@ export const getNodesAndEdges = async ({
           },
           style: {
             strokeWidth: 1,
+            stroke: 'var(--ec-edge-stroke, #6b7280)',
           },
         });
       }
@@ -305,7 +308,7 @@ export const getNodesAndEdges = async ({
   });
 
   nodes.forEach((node: any) => {
-    flow.setNode(node.id, { width: 150, height: 100 });
+    flow.setNode(node.id, { width: DEFAULT_NODE_WIDTH, height: DEFAULT_NODE_HEIGHT });
   });
 
   edges.forEach((edge: any) => {

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

@@ -98,6 +98,9 @@ export const calculatedNodes = (flow: dagre.graphlib.Graph, nodes: Node[]) => {
   });
 };
 
+export const DEFAULT_NODE_WIDTH = 150;
+export const DEFAULT_NODE_HEIGHT = 120;
+
 // Creates a new dagre graph
 export const createDagreGraph = ({ ranksep = 180, nodesep = 50, ...rest }: any) => {
   const graph = new dagre.graphlib.Graph({ compound: true });
@@ -122,6 +125,7 @@ export const createEdge = (edgeOptions: Edge) => {
     },
     style: {
       strokeWidth: 1,
+      stroke: 'var(--ec-edge-stroke, #6b7280)',
     },
     ...edgeOptions,
   };
@@ -180,6 +184,61 @@ export const buildContextMenuForMessage = ({
   return items;
 };
 
+const getSpecMenuItems = (
+  specs: unknown,
+  id: string,
+  version: string
+): { label: string; href: string; separator?: boolean }[] => {
+  const items: { label: string; href: string; separator?: boolean }[] = [];
+
+  const addSpec = (type: string, filePath: string, isFirst: boolean) => {
+    const filename = filePath.split('/').pop() || filePath;
+    const filenameNoExt = filename.replace(/\.[^/.]+$/, '');
+    const typeLower = type.toLowerCase();
+
+    let label = 'View specification';
+    let urlSegment = 'spec';
+    if (typeLower === 'asyncapi') {
+      label = 'View AsyncAPI spec';
+      urlSegment = 'asyncapi';
+    } else if (typeLower === 'openapi') {
+      label = 'View OpenAPI spec';
+      urlSegment = 'spec';
+    } else if (typeLower === 'graphql') {
+      label = 'View GraphQL spec';
+      urlSegment = 'graphql';
+    }
+
+    items.push({
+      label,
+      href: buildUrl(`/docs/services/${id}/${version}/${urlSegment}/${filenameNoExt}`),
+      separator: isFirst,
+    });
+  };
+
+  if (Array.isArray(specs)) {
+    specs.forEach((spec: any, i: number) => {
+      if (spec?.type && spec?.path) addSpec(spec.type, spec.path, i === 0);
+    });
+  } else if (specs && typeof specs === 'object') {
+    const legacy = specs as Record<string, string>;
+    let first = true;
+    if (legacy.asyncapiPath) {
+      addSpec('asyncapi', legacy.asyncapiPath, first);
+      first = false;
+    }
+    if (legacy.openapiPath) {
+      addSpec('openapi', legacy.openapiPath, first);
+      first = false;
+    }
+    if (legacy.graphqlPath) {
+      addSpec('graphql', legacy.graphqlPath, first);
+    }
+  }
+
+  return items;
+};
+
 export const buildContextMenuForService = ({
   id,
   version,
@@ -188,25 +247,13 @@ export const buildContextMenuForService = ({
 }: {
   id: string;
   version: string;
-  specifications?: { type: string; path: string }[];
+  specifications?: unknown;
   repository?: { url: string };
 }): ContextMenuItem[] => {
   const items: ContextMenuItem[] = [{ label: 'Read documentation', href: buildUrl(`/docs/services/${id}/${version}`) }];
 
-  if (specifications && Array.isArray(specifications)) {
-    for (const spec of specifications) {
-      const specType = spec.type?.toLowerCase() || '';
-      let label = 'View specification';
-      if (specType.includes('asyncapi')) label = 'View AsyncAPI spec';
-      else if (specType.includes('openapi')) label = 'View OpenAPI spec';
-
-      items.push({
-        label,
-        href: buildUrl(`/docs/services/${id}/${version}/spec/${spec.type}`),
-        separator: items.length === 1,
-      });
-    }
-  }
+  const specItems = getSpecMenuItems(specifications, id, version);
+  items.push(...specItems);
 
   if (repository?.url) {
     items.push({
@@ -221,7 +268,7 @@ export const buildContextMenuForService = ({
     label: 'Read changelog',
     href: buildUrl(`/docs/services/${id}/${version}/changelog`),
     external: true,
-    separator: !repository?.url && (!specifications || specifications.length === 0),
+    separator: !repository?.url && specItems.length === 0,
   });
 
   return items;
@@ -247,6 +294,22 @@ export const buildContextMenuForResource = ({
   ];
 };
 
+/**
+ * Extracts operation fields (method, path, statusCodes) from a message's
+ * `operation` frontmatter and returns them as top-level props the visualiser expects.
+ */
+export const getOperationFields = (data: Record<string, any>) => {
+  const op = data.operation;
+  if (!op) return {};
+  return {
+    ...(op.method ? { method: op.method } : {}),
+    ...(op.path ? { path: op.path } : {}),
+    ...(Array.isArray(op.statusCodes) && op.statusCodes.length > 0
+      ? { statusCodes: op.statusCodes.map(Number).filter((n: number) => !isNaN(n)) }
+      : {}),
+  };
+};
+
 export const getNodesAndEdgesFromDagre = ({
   nodes,
   edges,
@@ -259,7 +322,7 @@ export const getNodesAndEdgesFromDagre = ({
   const flow = defaultFlow || createDagreGraph({ ranksep: 300, nodesep: 50 });
 
   nodes.forEach((node: any) => {
-    flow.setNode(node.id, { width: 150, height: 100 });
+    flow.setNode(node.id, { width: DEFAULT_NODE_WIDTH, height: DEFAULT_NODE_HEIGHT });
   });
 
   edges.forEach((edge: any) => {

package/eventcatalog/tailwind.config.mjs

@@ -7,7 +7,16 @@ const theme = config.theme || {};
 /** @type {import('tailwindcss').Config} */
 export default {
   darkMode: ['selector', '[data-theme="dark"]'],
-  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
+  content: {
+    // Resolve globs relative to this config file, not process.cwd().
+    // This prevents production builds from missing utilities when Astro is launched from a different working directory.
+    relative: true,
+    files: [
+      './src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}',
+      // Include visualizer components so core Tailwind generates their utilities.
+      '../../visualiser/src/**/*.{js,jsx,ts,tsx}',
+    ],
+  },
   theme: {
     extend: {
       fontFamily: {
@@ -67,7 +76,7 @@ export default {
     { pattern: /bg-.*-500\/(10|20)/, variants: ['dark'] },
     { pattern: /from-.*-(100|200|300|400|500|600|700)/ },
     { pattern: /to-.*-(100|200|300|400|500|600|700)/ },
-    { pattern: /text-.*-(300|400|500|800)/, variants: ['dark', 'group-hover', 'dark:group-hover'] },
+    { pattern: /text-.*-(100|300|400|500|800)/, variants: ['dark', 'group-hover', 'dark:group-hover'] },
     { pattern: /ring-.*-500\/30/, variants: ['dark'] },
     'border-blue-200',
     'border-green-300',

package/package.json

@@ -6,7 +6,7 @@
     "url": "https://github.com/event-catalog/eventcatalog.git"
   },
   "type": "module",
-  "version": "3.17.5",
+  "version": "3.18.0",
   "publishConfig": {
     "access": "public"
   },
@@ -91,7 +91,7 @@
     "remark-comment": "^1.0.0",
     "remark-directive": "^3.0.0",
     "remark-gfm": "^4.0.1",
-    "rimraf": "^5.0.7",
+    "rimraf": "^6.1.3",
     "semver": "7.6.3",
     "shelljs": "^0.9.0",
     "svg-pan-zoom": "^3.6.2",
@@ -101,9 +101,9 @@
     "update-notifier": "^7.3.1",
     "uuid": "^10.0.0",
     "zod": "^3.25.0",
-    "@eventcatalog/linter": "1.0.8",
+    "@eventcatalog/linter": "1.0.7",
     "@eventcatalog/sdk": "2.15.0",
-    "@eventcatalog/visualiser": "^3.14.1"
+    "@eventcatalog/visualiser": "^3.15.0"
   },
   "devDependencies": {
     "@astrojs/check": "^0.9.6",