@eventcatalog/core 4.6.2 → 4.7.0

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

@@ -13,7 +13,7 @@ import {
   removeFavorite as removeFavoriteAction,
   type FavoriteItem,
 } from '@stores/favorites-store';
-import { canCollapseGroup, getBadgeClasses, getGroupLabel, isGroupCollapsed } from './utils';
+import { canCollapseGroup, findNodeKeyByUrl, getBadgeClasses, getGroupLabel, isGroupCollapsed } from './utils';
 import { resolveIconUrl } from '@utils/icon';
 
 const cn = (...classes: (string | false | undefined)[]) => classes.filter(Boolean).join(' ');
@@ -201,86 +201,9 @@ export default function NestedSideBar() {
   /**
    * Find a node key by matching URL patterns
    */
-  const findNodeKeyByUrl = useCallback(
+  const findNodeKeyForUrl = useCallback(
     (url: string): string | null => {
-      // Strip the base path so patterns always match against /docs/..., /visualiser/..., etc.
-      const normalizedUrl = stripBasePath(url);
-
-      // URL patterns to match resources with version
-      const urlPatternsWithVersion = [
-        // Domains
-        { pattern: /^\/docs\/domains\/([^/]+)\/([^/]+)/, type: 'domain' },
-        { pattern: /^\/visualiser\/domains\/([^/]+)\/([^/]+)/, type: 'domain' },
-        { pattern: /^\/architecture\/domains\/([^/]+)\/([^/]+)/, type: 'domain' },
-        // Systems (key prefix is `system`, url segment is `systems`).
-        // The visualiser pattern also matches the System Diagram
-        // (/visualiser/systems/:id/:version/context) since it is not end-anchored.
-        { pattern: /^\/docs\/systems\/([^/]+)\/([^/]+)/, type: 'system' },
-        { pattern: /^\/visualiser\/systems\/([^/]+)\/([^/]+)/, type: 'system' },
-        { pattern: /^\/architecture\/systems\/([^/]+)\/([^/]+)/, type: 'system' },
-        // Agents
-        { pattern: /^\/docs\/agents\/([^/]+)\/([^/]+)/, type: 'agent' },
-        { pattern: /^\/visualiser\/agents\/([^/]+)\/([^/]+)/, type: 'agent' },
-        // Decision Records
-        { pattern: /^\/docs\/adrs\/([^/]+)\/([^/]+)/, type: 'adr' },
-        // Services
-        { pattern: /^\/docs\/services\/([^/]+)\/([^/]+)/, type: 'service' },
-        { pattern: /^\/architecture\/services\/([^/]+)\/([^/]+)/, type: 'service' },
-        { pattern: /^\/visualiser\/services\/([^/]+)\/([^/]+)/, type: 'service' },
-        // Messages (events, commands, queries) - note: keys use singular form
-        { pattern: /^\/docs\/events\/([^/]+)\/([^/]+)/, type: 'event' },
-        { pattern: /^\/docs\/commands\/([^/]+)\/([^/]+)/, type: 'command' },
-        { pattern: /^\/docs\/queries\/([^/]+)\/([^/]+)/, type: 'query' },
-        { pattern: /^\/visualiser\/messages\/([^/]+)\/([^/]+)/, type: 'message' },
-        { pattern: /^\/visualiser\/events\/([^/]+)\/([^/]+)/, type: 'event' },
-        { pattern: /^\/visualiser\/commands\/([^/]+)\/([^/]+)/, type: 'command' },
-        { pattern: /^\/visualiser\/queries\/([^/]+)\/([^/]+)/, type: 'query' },
-        // Containers
-        { pattern: /^\/docs\/containers\/([^/]+)\/([^/]+)/, type: 'container' },
-        { pattern: /^\/visualiser\/containers\/([^/]+)\/([^/]+)/, type: 'container' },
-        // Flows
-        { pattern: /^\/docs\/flows\/([^/]+)\/([^/]+)/, type: 'flow' },
-        { pattern: /^\/visualiser\/flows\/([^/]+)\/([^/]+)/, type: 'flow' },
-        // Data Products
-        { pattern: /^\/docs\/data-products\/([^/]+)\/([^/]+)/, type: 'data-product' },
-        { pattern: /^\/visualiser\/data-products\/([^/]+)\/([^/]+)/, type: 'data-product' },
-        // Entities
-        { pattern: /^\/docs\/entities\/([^/]+)\/([^/]+)/, type: 'entity' },
-      ];
-
-      // URL patterns without version (language pages, etc)
-      const urlPatternsWithoutVersion = [{ pattern: /^\/docs\/domains\/([^/]+)\/language/, type: 'domain' }];
-
-      // First try to match patterns with version
-      for (const { pattern, type } of urlPatternsWithVersion) {
-        const match = normalizedUrl.match(pattern);
-        if (match) {
-          const id = match[1];
-          const version = match[2];
-
-          // First try with version
-          const keyWithVersion = `${type}:${id}:${version}`;
-          if (nodes[keyWithVersion]) {
-            return keyWithVersion;
-          }
-
-          // Fallback to lookup without version (for latest)
-          const foundNodeKey = nodeLookup.get(`${type}:${id}`);
-          if (foundNodeKey) return foundNodeKey;
-        }
-      }
-
-      // Then try patterns without version
-      for (const { pattern, type } of urlPatternsWithoutVersion) {
-        const match = normalizedUrl.match(pattern);
-        if (match) {
-          const id = match[1];
-          const foundNodeKey = nodeLookup.get(`${type}:${id}`);
-          if (foundNodeKey) return foundNodeKey;
-        }
-      }
-
-      return null;
+      return findNodeKeyByUrl(stripBasePath(url), nodes, nodeLookup);
     },
     [nodeLookup, nodes]
   );
@@ -337,7 +260,7 @@ export default function NestedSideBar() {
    */
   const findAndNavigateToUrl = useCallback(
     (url: string) => {
-      const foundNodeKey = findNodeKeyByUrl(url);
+      const foundNodeKey = findNodeKeyForUrl(url);
 
       if (foundNodeKey) {
         setNavigationStack((currentStack) => {
@@ -373,7 +296,7 @@ export default function NestedSideBar() {
       }
       return false;
     },
-    [findNodeKeyByUrl, tryConnectStack, resolveRef, roots]
+    [findNodeKeyForUrl, tryConnectStack, resolveRef, roots]
   );
 
   /**
@@ -393,7 +316,7 @@ export default function NestedSideBar() {
     }
 
     const savedState = loadState();
-    const targetKey = findNodeKeyByUrl(currentUrl);
+    const targetKey = findNodeKeyForUrl(currentUrl);
 
     let finalStack: NavigationLevel[] | null = null;
 
@@ -432,7 +355,7 @@ export default function NestedSideBar() {
     }
 
     setIsInitialized(true);
-  }, [data, roots, isInitialized, buildStackFromPath, findNodeKeyByUrl, tryConnectStack, resolveRef]);
+  }, [data, roots, isInitialized, buildStackFromPath, findNodeKeyForUrl, tryConnectStack, resolveRef]);
 
   /**
    * Save state whenever navigation changes
@@ -510,7 +433,7 @@ export default function NestedSideBar() {
     return stripBasePath(left).replace(/\/$/, '') === stripBasePath(right).replace(/\/$/, '');
   }, []);
 
-  const activeNodeKey = useMemo(() => findNodeKeyByUrl(currentPath), [currentPath, findNodeKeyByUrl]);
+  const activeNodeKey = useMemo(() => findNodeKeyForUrl(currentPath), [currentPath, findNodeKeyForUrl]);
 
   // Show loading state if no data yet
   if (!data || roots.length === 0) {

package/eventcatalog/src/components/SideNav/NestedSideBar/utils.spec.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest';
-import { canCollapseGroup, getGroupLabel, isGroupCollapsed } from './utils';
+import { canCollapseGroup, findNodeKeyByUrl, getGroupLabel, isGroupCollapsed } from './utils';
 
 const preferences = (expanded: string[] = []) => ({
   expanded: new Set(expanded),
@@ -41,3 +41,21 @@ describe('isGroupCollapsed', () => {
     expect(isGroupCollapsed(true, 'outbound-messages', preferences(['outbound-messages']))).toBe(false);
   });
 });
+
+describe('findNodeKeyByUrl', () => {
+  const channelKey = 'channel:product-events:1.0.0';
+  const nodes = { [channelKey]: {} };
+  const nodeLookup = new Map([['channel:product-events', channelKey]]);
+
+  it('selects the channel sidebar for channel documentation', () => {
+    expect(findNodeKeyByUrl('/docs/channels/product-events/1.0.0', nodes, nodeLookup)).toBe(channelKey);
+  });
+
+  it('keeps the channel sidebar selected on the channel map', () => {
+    expect(findNodeKeyByUrl('/visualiser/channels/product-events/1.0.0', nodes, nodeLookup)).toBe(channelKey);
+  });
+
+  it('falls back to the available channel version', () => {
+    expect(findNodeKeyByUrl('/docs/channels/product-events/latest', nodes, nodeLookup)).toBe(channelKey);
+  });
+});

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

@@ -17,6 +17,86 @@ export const isGroupCollapsed = (canCollapse: boolean, groupId: string, preferen
   return canCollapse && !preferences.expanded.has(groupId);
 };
 
+/**
+ * Finds the sidebar node represented by a resource URL.
+ * The URL must have its configured base path removed before it is passed in.
+ */
+export const findNodeKeyByUrl = (
+  url: string,
+  nodes: Record<string, unknown>,
+  nodeLookup: ReadonlyMap<string, string>
+): string | null => {
+  const urlPatternsWithVersion = [
+    // Domains
+    { pattern: /^\/docs\/domains\/([^/]+)\/([^/]+)/, type: 'domain' },
+    { pattern: /^\/visualiser\/domains\/([^/]+)\/([^/]+)/, type: 'domain' },
+    { pattern: /^\/architecture\/domains\/([^/]+)\/([^/]+)/, type: 'domain' },
+    // Systems (key prefix is `system`, url segment is `systems`).
+    // The visualiser pattern also matches the System Diagram
+    // (/visualiser/systems/:id/:version/context) since it is not end-anchored.
+    { pattern: /^\/docs\/systems\/([^/]+)\/([^/]+)/, type: 'system' },
+    { pattern: /^\/visualiser\/systems\/([^/]+)\/([^/]+)/, type: 'system' },
+    { pattern: /^\/architecture\/systems\/([^/]+)\/([^/]+)/, type: 'system' },
+    // Agents
+    { pattern: /^\/docs\/agents\/([^/]+)\/([^/]+)/, type: 'agent' },
+    { pattern: /^\/visualiser\/agents\/([^/]+)\/([^/]+)/, type: 'agent' },
+    // Decision Records
+    { pattern: /^\/docs\/adrs\/([^/]+)\/([^/]+)/, type: 'adr' },
+    // Services
+    { pattern: /^\/docs\/services\/([^/]+)\/([^/]+)/, type: 'service' },
+    { pattern: /^\/architecture\/services\/([^/]+)\/([^/]+)/, type: 'service' },
+    { pattern: /^\/visualiser\/services\/([^/]+)\/([^/]+)/, type: 'service' },
+    // Messages (events, commands, queries) - note: keys use singular form
+    { pattern: /^\/docs\/events\/([^/]+)\/([^/]+)/, type: 'event' },
+    { pattern: /^\/docs\/commands\/([^/]+)\/([^/]+)/, type: 'command' },
+    { pattern: /^\/docs\/queries\/([^/]+)\/([^/]+)/, type: 'query' },
+    { pattern: /^\/visualiser\/messages\/([^/]+)\/([^/]+)/, type: 'message' },
+    { pattern: /^\/visualiser\/events\/([^/]+)\/([^/]+)/, type: 'event' },
+    { pattern: /^\/visualiser\/commands\/([^/]+)\/([^/]+)/, type: 'command' },
+    { pattern: /^\/visualiser\/queries\/([^/]+)\/([^/]+)/, type: 'query' },
+    // Channels
+    { pattern: /^\/docs\/channels\/([^/]+)\/([^/]+)/, type: 'channel' },
+    { pattern: /^\/visualiser\/channels\/([^/]+)\/([^/]+)/, type: 'channel' },
+    // Containers
+    { pattern: /^\/docs\/containers\/([^/]+)\/([^/]+)/, type: 'container' },
+    { pattern: /^\/visualiser\/containers\/([^/]+)\/([^/]+)/, type: 'container' },
+    // Flows
+    { pattern: /^\/docs\/flows\/([^/]+)\/([^/]+)/, type: 'flow' },
+    { pattern: /^\/visualiser\/flows\/([^/]+)\/([^/]+)/, type: 'flow' },
+    // Data Products
+    { pattern: /^\/docs\/data-products\/([^/]+)\/([^/]+)/, type: 'data-product' },
+    { pattern: /^\/visualiser\/data-products\/([^/]+)\/([^/]+)/, type: 'data-product' },
+    // Entities
+    { pattern: /^\/docs\/entities\/([^/]+)\/([^/]+)/, type: 'entity' },
+  ];
+
+  const urlPatternsWithoutVersion = [{ pattern: /^\/docs\/domains\/([^/]+)\/language/, type: 'domain' }];
+
+  for (const { pattern, type } of urlPatternsWithVersion) {
+    const match = url.match(pattern);
+    if (match) {
+      const id = match[1];
+      const version = match[2];
+      const keyWithVersion = `${type}:${id}:${version}`;
+
+      if (nodes[keyWithVersion]) return keyWithVersion;
+
+      const foundNodeKey = nodeLookup.get(`${type}:${id}`);
+      if (foundNodeKey) return foundNodeKey;
+    }
+  }
+
+  for (const { pattern, type } of urlPatternsWithoutVersion) {
+    const match = url.match(pattern);
+    if (match) {
+      const foundNodeKey = nodeLookup.get(`${type}:${match[1]}`);
+      if (foundNodeKey) return foundNodeKey;
+    }
+  }
+
+  return null;
+};
+
 /**
  * Returns Tailwind classes for badge styling based on badge type.
  * Uses CSS variables from theme.css for proper theming support.

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

@@ -29,6 +29,7 @@ export class Page extends HybridPage {
       'domains',
       'flows',
       'containers',
+      'channels',
       'data-products',
       'systems',
     ];

package/eventcatalog/src/stores/sidebar-store/state.ts

@@ -764,6 +764,8 @@ export const getNestedSideBarData = async (): Promise<NavigationData> => {
     {} as Record<string, NavNode>
   );
 
+  const visualiserEnabled = config?.visualiser?.enabled !== false;
+
   const channelNodes = channels.reduce(
     (acc, channel) => {
       const versionedKey = `channel:${channel.data.id}:${channel.data.version}`;
@@ -796,6 +798,18 @@ export const getNestedSideBarData = async (): Promise<NavigationData> => {
               ].filter(Boolean) as { title: string; href: string }[]
             ),
             docsSection,
+            visualiserEnabled && {
+              type: 'group',
+              title: 'Architecture',
+              icon: 'Workflow',
+              pages: [
+                {
+                  type: 'item',
+                  title: 'Map',
+                  href: buildUrl(`/visualiser/${channel.collection}/${channel.data.id}/${channel.data.version}`),
+                },
+              ],
+            },
           ].filter(Boolean) as ChildRef[],
         },
         channel,
@@ -827,7 +841,6 @@ export const getNestedSideBarData = async (): Promise<NavigationData> => {
     {} as Record<string, NavNode>
   );
 
-  const visualiserEnabled = config?.visualiser?.enabled !== false;
   const rootDomainsNodes: Record<string, NavNode> = {};
 
   if (rootDomains.length > 0) {