@eventcatalog/core 4.10.0 → 4.10.2

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

@@ -0,0 +1,42 @@
+import { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import CatalogForceGraph from '@components/CatalogGraph/CatalogForceGraph';
+import type { CatalogGraphWireLink, CatalogGraphWireNode } from '@utils/node-graphs/catalog-force-graph';
+
+interface Props {
+  /** DOM id of the placeholder div ArchitectureGraphPortal rendered into the MDX content */
+  portalId: string;
+  nodes: CatalogGraphWireNode[];
+  links: CatalogGraphWireLink[];
+  linkLabels: string[];
+  initialLens?: string;
+  initialFocus?: string;
+  initialFocusDepth?: number;
+  showSearch?: boolean;
+  showLegend?: boolean;
+  showLensPicker?: boolean;
+  /** Base URL of the standalone /visualiser/graph page — the graph renders an
+   * "open full screen" link carrying its live view state (focus, depth, lens) */
+  href?: string;
+  hrefLabel?: string;
+}
+
+// The island mounts outside the MDX content, finds the placeholder div the MDX
+// component map emitted, and portals the graph into it — same pattern as the
+// visualiser's NodeGraph.
+const AstroArchitectureGraph = ({ portalId, href, hrefLabel, ...graphProps }: Props) => {
+  const [container, setContainer] = useState<HTMLElement | null>(null);
+
+  useEffect(() => {
+    setContainer(document.getElementById(portalId));
+  }, [portalId]);
+
+  if (!container) return null;
+
+  return createPortal(
+    <CatalogForceGraph {...graphProps} syncUrl={false} zoomOnScroll={false} openInGraphUrl={href} openInGraphLabel={hrefLabel} />,
+    container
+  );
+};
+
+export default AstroArchitectureGraph;

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

@@ -35,6 +35,7 @@ import MermaidFileLoader from '@components/MDX/MermaidFileLoader/MermaidFileLoad
 import LikeC4View from '@components/MDX/LikeC4View/LikeC4View.astro';
 //  Portals: required for server/client components
 import NodeGraphPortal from '@components/MDX/NodeGraph/NodeGraphPortal';
+import ArchitectureGraphPortal from '@components/MDX/ArchitectureGraph/ArchitectureGraphPortal';
 import ContextDiagramPortal from '@components/MDX/ContextDiagram/ContextDiagramPortal';
 import SystemContextMapPortal from '@components/MDX/SystemContextMap/SystemContextMapPortal';
 import SchemaViewerPortal from '@components/MDX/SchemaViewer/SchemaViewerPortal';
@@ -50,6 +51,10 @@ const getEntityMapCollection = (props: any, mdxProp: any) => {
 };
 
 const components = (props: any) => {
+  // Occurrence counter so multiple <ArchitectureGraph/> tags on one page each get
+  // their own portal — MDX renders in document order, matching the body scan order
+  // the host pages use to render the islands.
+  let architectureGraphOccurrence = 0;
   return {
     Attachments: (mdxProp: any) => jsx(Attachments, { ...props, ...mdxProp }),
     CustomProperties: (mdxProp: any) => jsx(CustomProperties, { ...props, ...mdxProp }),
@@ -69,6 +74,14 @@ const components = (props: any) => {
     ADRTable: (mdxProp: any) => jsx(ADRTable, { ...props, ...mdxProp }),
     EntityPropertiesTable: (mdxProp: any) => jsx(EntityPropertiesTable, { ...props, ...mdxProp }),
     NodeGraph: (mdxProp: any) => jsx(NodeGraphPortal, { ...props.data, ...mdxProp, props, mdxProp }),
+    ArchitectureGraph: (mdxProp: any) =>
+      jsx(ArchitectureGraphPortal, {
+        ...props.data,
+        ...mdxProp,
+        occurrenceIndex: architectureGraphOccurrence++,
+        props,
+        mdxProp,
+      }),
     ComponentDiagram: (mdxProp: any) => jsx(NodeGraphPortal, { ...props.data, ...mdxProp, props, mdxProp }),
     ContextDiagram: (mdxProp: any) => jsx(ContextDiagramPortal, { ...props.data, ...mdxProp, props, mdxProp }),
     SystemContextMap: (mdxProp: any) => jsx(SystemContextMapPortal, { ...mdxProp }),

package/eventcatalog/src/enterprise/custom-documentation/pages/docs/custom/index.astro

@@ -14,9 +14,17 @@ import { getMDXComponentsByName, parseMdxBooleanProp } from '@utils/markdown';
 import { getAdjacentPages, getNavigationItems } from '@enterprise/custom-documentation/utils/custom-docs';
 import CustomDocsNav from '@enterprise/custom-documentation/components/CustomDocsNav/CustomDocsNav.astro';
 import NodeGraph from '@components/MDX/NodeGraph/NodeGraph.astro';
+import ArchitectureGraph from '@components/MDX/ArchitectureGraph/ArchitectureGraph.astro';
+import { architectureGraphPortalId } from '@components/MDX/ArchitectureGraph/ArchitectureGraphPortal';
 import CopyAsMarkdown from '@components/CopyAsMarkdown';
 
-import { isVisualiserEnabled, isMarkdownDownloadEnabled, isRSSEnabled, isEventCatalogChatEnabled } from '@utils/feature';
+import {
+  isVisualiserEnabled,
+  isMarkdownDownloadEnabled,
+  isRSSEnabled,
+  isEventCatalogChatEnabled,
+  isArchitectureGraphEnabled,
+} from '@utils/feature';
 
 const props = Astro.props;
 const doc = props.data;
@@ -48,6 +56,18 @@ const resolvedNodeGraphs = await Promise.all(
   })
 );
 
+// Architecture graphs embedded via <ArchitectureGraph />. Custom docs have no
+// resource of their own, so with no `id` + `type` the whole catalog is rendered.
+const architectureGraphs = (getMDXComponentsByName(props.body, 'ArchitectureGraph') || []).map((graph: any) => ({
+  id: graph.id,
+  collection: graph.type ? resourceToCollectionMap[graph.type as keyof typeof resourceToCollectionMap] : undefined,
+  depth: graph.depth ? Number(graph.depth) : undefined,
+  lens: graph.lens,
+  search: parseMdxBooleanProp(graph.search, true),
+  legend: parseMdxBooleanProp(graph.legend, true),
+  lensPicker: parseMdxBooleanProp(graph.lensPicker, false),
+}));
+
 const { prev, next } = await getAdjacentPages(currentSlug);
 
 const ownersRaw = doc?.owners || [];
@@ -171,6 +191,31 @@ const editUrl =
               })
           }
 
+          {
+            architectureGraphs.length > 0 &&
+              architectureGraphs.map((graph: any, occurrenceIndex: number) => (
+                <ArchitectureGraph
+                  id={graph.id}
+                  collection={graph.collection}
+                  depth={graph.depth}
+                  lens={graph.lens}
+                  showSearch={graph.search}
+                  showLegend={graph.legend}
+                  showLensPicker={graph.lensPicker}
+                  portalId={architectureGraphPortalId(graph.id ?? (doc as any).id, occurrenceIndex)}
+                  href={
+                    isArchitectureGraphEnabled()
+                      ? {
+                          label: 'Open full screen',
+                          // Base URL only — the graph appends its live view state (focus, depth, lens)
+                          url: buildUrl('/visualiser/graph'),
+                        }
+                      : undefined
+                  }
+                />
+              ))
+          }
+
           <!-- Previous / Next Navigation -->
           <div class="py-8 border-t border-[rgb(var(--ec-page-border))] mt-8">
             <div class="flex flex-col sm:flex-row justify-between w-full gap-4">

package/eventcatalog/src/pages/docs/[type]/[id]/[version]/index.astro

@@ -10,6 +10,8 @@ import Footer from '@layouts/Footer.astro';
 
 import components from '@components/MDX/components';
 import NodeGraph from '@components/MDX/NodeGraph/NodeGraph.astro';
+import ArchitectureGraph from '@components/MDX/ArchitectureGraph/ArchitectureGraph.astro';
+import { architectureGraphPortalId } from '@components/MDX/ArchitectureGraph/ArchitectureGraphPortal';
 import SchemaViewer from '@components/MDX/SchemaViewer/SchemaViewerRoot.astro';
 import Admonition from '@components/MDX/Admonition';
 import VersionList from '@components/Lists/VersionList.astro';
@@ -65,6 +67,7 @@ import {
   isVisualiserEnabled,
   isRSSEnabled,
   isEventCatalogMCPEnabled,
+  isArchitectureGraphEnabled,
 } from '@utils/feature';
 import { getMDXComponentsByName, parseMdxBooleanProp } from '@utils/markdown';
 
@@ -361,6 +364,20 @@ const contextDiagrams = contextDiagramSupported
     })
   : [];
 
+// Architecture graphs embedded via <ArchitectureGraph />. Renders the D3
+// catalog-wide force graph focused on the current resource's neighbourhood;
+// `id` + `type` focus another resource instead. Each renders into its own
+// portal, so it never collides with the page's NodeGraph.
+const architectureGraphs = (getMDXComponentsByName(props.body || '', 'ArchitectureGraph') || []).map((graph: any) => ({
+  id: graph.id ?? props.data.id,
+  collection: graph.type ? resourceToCollectionMap[graph.type as keyof typeof resourceToCollectionMap] : props.collection,
+  depth: graph.depth ? Number(graph.depth) : undefined,
+  lens: graph.lens,
+  search: parseMdxBooleanProp(graph.search, true),
+  legend: parseMdxBooleanProp(graph.legend, true),
+  lensPicker: parseMdxBooleanProp(graph.lensPicker, false),
+}));
+
 // Get props for the node graph (when no id is passed, we assume its the current page)
 const hasCurrentFlowEmbed =
   props.collection === 'flows' &&
@@ -653,6 +670,30 @@ if (!isAdrPage && !hasCurrentFlowEmbed && !hasCurrentPageNodeGraph) {
                 />
               ))
           }
+          {
+            architectureGraphs.length > 0 &&
+              architectureGraphs.map((graph: any, occurrenceIndex: number) => (
+                <ArchitectureGraph
+                  id={graph.id}
+                  collection={graph.collection}
+                  depth={graph.depth}
+                  lens={graph.lens}
+                  showSearch={graph.search}
+                  showLegend={graph.legend}
+                  showLensPicker={graph.lensPicker}
+                  portalId={architectureGraphPortalId(graph.id, occurrenceIndex)}
+                  href={
+                    isArchitectureGraphEnabled()
+                      ? {
+                          label: 'Open full screen',
+                          // Base URL only — the graph appends its live view state (focus, depth, lens)
+                          url: buildUrl('/visualiser/graph'),
+                        }
+                      : undefined
+                  }
+                />
+              ))
+          }
         </div>
         <Footer />
         <!-- Add edit this page button  with icon and text-->

package/eventcatalog/src/pages/docs/[type]/[id]/language/[dictionaryId]/_index.data.ts

@@ -13,7 +13,7 @@ export const resolveUbiquitousLanguageTermEditUrl = ({
   collection,
   configEditUrl,
 }: {
-  term: Pick<DictionaryTerm, 'editUrl'>;
+  term: Pick<DictionaryTerm, 'id' | 'editUrl'>;
   collection: Pick<UbiquitousLanguage, 'filePath'> & { data: Pick<UbiquitousLanguage['data'], 'editUrl'> };
   configEditUrl?: string;
 }) =>

package/eventcatalog/src/pages/index.astro

@@ -1,16 +1,19 @@
 ---
 import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
-import { getMDXComponentsByName } from '@utils/markdown';
+import { getMDXComponentsByName, parseMdxBooleanProp } from '@utils/markdown';
+import { architectureGraphPortalId } from '@components/MDX/ArchitectureGraph/ArchitectureGraphPortal';
 import { resourceToCollectionMap } from '@utils/collections/util';
 import { buildUrl } from '@utils/url-builder';
-import { isCustomLandingPageEnabled, isVisualiserEnabled } from '@utils/feature';
+import { isCustomLandingPageEnabled, isVisualiserEnabled, isArchitectureGraphEnabled } from '@utils/feature';
 import DefaultAstroLandingPage from './_index.astro';
 import config from '@config';
 
 let nodeGraphs: any[] = [];
 let systemContextMaps: any[] = [];
+let architectureGraphs: any[] = [];
 let CustomContent = null;
 let NodeGraph = null;
+let ArchitectureGraph = null;
 let customHomepageComponents: Record<string, any> = {};
 
 import path from 'path';
@@ -37,11 +40,19 @@ if (existsSync(pathToUserDefinedLandingPage) && isCustomLandingPageEnabled()) {
   // The homepage can also embed the global System Context Map via <SystemContextMap />.
   systemContextMaps = getMDXComponentsByName(rawContent, 'SystemContextMap') || [];
 
+  // …and the catalog-wide Architecture Graph via <ArchitectureGraph />. With no
+  // `id` + `type` the whole catalog is rendered.
+  architectureGraphs = getMDXComponentsByName(rawContent, 'ArchitectureGraph') || [];
+
   // Avoid pulling visualizer CSS into the default homepage bundle.
   // Only load the NodeGraph component when the custom homepage actually uses a graph.
   if (nodeGraphs.length > 0 || systemContextMaps.length > 0) {
     NodeGraph = (await import('@components/MDX/NodeGraph/NodeGraph.astro')).default;
   }
+  // Only build the catalog-wide graph data when the homepage actually embeds it.
+  if (architectureGraphs.length > 0) {
+    ArchitectureGraph = (await import('@components/MDX/ArchitectureGraph/ArchitectureGraph.astro')).default;
+  }
 }
 
 if (config.landingPage) {
@@ -104,6 +115,27 @@ if (config.landingPage) {
               }
             />
           ))}
+        {ArchitectureGraph &&
+          architectureGraphs.map((graph: any, occurrenceIndex: number) => (
+            <ArchitectureGraph
+              id={graph.id}
+              collection={graph.type ? resourceToCollectionMap[graph.type as keyof typeof resourceToCollectionMap] : undefined}
+              depth={graph.depth ? Number(graph.depth) : undefined}
+              lens={graph.lens}
+              showSearch={parseMdxBooleanProp(graph.search, true)}
+              showLegend={parseMdxBooleanProp(graph.legend, true)}
+              showLensPicker={parseMdxBooleanProp(graph.lensPicker, false)}
+              portalId={architectureGraphPortalId(graph.id, occurrenceIndex)}
+              href={
+                isArchitectureGraphEnabled()
+                  ? {
+                      label: 'Open full screen',
+                      url: buildUrl('/visualiser/graph'),
+                    }
+                  : undefined
+              }
+            />
+          ))}
       </main>
     </VerticalSideBarLayout>
   ) : (

package/eventcatalog/src/pages/visualiser/graph/index.astro

@@ -1,8 +1,7 @@
 ---
 import VisualiserLayout from '@layouts/VisualiserLayout.astro';
 import CatalogForceGraph from '@components/CatalogGraph/CatalogForceGraph';
-import type { CatalogGraphWireLink } from '@components/CatalogGraph/CatalogForceGraph';
-import { getCatalogForceGraph } from '@utils/node-graphs/catalog-force-graph';
+import { getCatalogForceGraph, toCatalogForceGraphWire } from '@utils/node-graphs/catalog-force-graph';
 import { isArchitectureGraphEnabled } from '@utils/feature';
 
 // Bail before building the graph — on very large catalogs the whole point of
@@ -11,29 +10,9 @@ if (!isArchitectureGraphEnabled()) {
   return new Response(null, { status: 404 });
 }
 
-const { nodes, links } = await getCatalogForceGraph();
-
 // Compact wire format: index-based links and client-derived URLs keep the
 // island props Astro serialises into the page small for large catalogs.
-const nodeIndexById = new Map(nodes.map((node, index) => [node.id, index]));
-const linkLabels = [...new Set(links.map((link) => link.label))];
-const labelIndexByLabel = new Map(linkLabels.map((label, index) => [label, index]));
-
-const wireNodes = nodes.map(({ id, label, collection, version }) => ({
-  // Node ids are `${collection}/${resourceId}` — send only the resource id, the client rebuilds the key
-  id: id.slice(collection.length + 1),
-  label,
-  collection,
-  version,
-}));
-
-const wireLinks = links.map(
-  (link): CatalogGraphWireLink => [
-    nodeIndexById.get(link.source)!,
-    nodeIndexById.get(link.target)!,
-    labelIndexByLabel.get(link.label)!,
-  ]
-);
+const { nodes: wireNodes, links: wireLinks, linkLabels } = toCatalogForceGraphWire(await getCatalogForceGraph());
 ---
 
 <VisualiserLayout title="Visualiser | Architecture Graph" description="Force-directed graph of every resource in the catalog">

package/eventcatalog/src/stores/sidebar-store/builders/domain.ts

@@ -327,7 +327,7 @@ export const buildDomainSections = (
                 `/docs/domains/${domain.data.id}/${domain.data.version}/graphql/${specification.filenameWithoutExtension}`
               ),
             })),
-          ],
+          ] as ChildRef[],
         }
       : null,
     systems: renderSystems

package/eventcatalog/src/stores/sidebar-store/builders/service.ts

@@ -195,7 +195,7 @@ export const buildServiceSections = (
               leftIcon: '/icons/graphql-black.svg',
               href: buildUrl(`${docsBasePath}/graphql/${specification.filenameWithoutExtension}`),
             })),
-          ],
+          ] as ChildRef[],
         }
       : null,
     'resource-groups': renderResourceGroups

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

@@ -450,7 +450,7 @@ export const getNestedSideBarData = async (): Promise<NavigationData> => {
       }
       return acc;
     },
-    {} as Record<string, NavNode>
+    {} as Record<string, NavNode | string>
   );
 
   const domainNodes = domainsWithOwners.reduce(

package/eventcatalog/src/utils/node-graphs/catalog-force-graph.ts

@@ -35,6 +35,47 @@ export interface CatalogGraphLink {
   label: string;
 }
 
+/** Compact wire format — index-based links keep the payload Astro serialises into the island small. */
+export interface CatalogGraphWireNode {
+  /** Resource id, e.g. `InventoryService` — the client rebuilds the `${collection}/${id}` key */
+  id: string;
+  label: string;
+  collection: string;
+  version?: string;
+}
+
+/** [sourceIndex, targetIndex, labelIndex] into the nodes / linkLabels arrays */
+export type CatalogGraphWireLink = [number, number, number];
+
+/**
+ * Compacts the built graph for serialisation into a client island: node ids are
+ * stripped of their `${collection}/` prefix, link labels are deduped into one
+ * array, and each link becomes an index tuple. URLs are dropped server-side and
+ * rebuilt client-side.
+ */
+export const toCatalogForceGraphWire = ({ nodes, links }: { nodes: CatalogGraphNode[]; links: CatalogGraphLink[] }) => {
+  const nodeIndexById = new Map(nodes.map((node, index) => [node.id, index]));
+  const linkLabels = [...new Set(links.map((link) => link.label))];
+  const labelIndexByLabel = new Map(linkLabels.map((label, index) => [label, index]));
+
+  const wireNodes: CatalogGraphWireNode[] = nodes.map(({ id, label, collection, version }) => ({
+    id: id.slice(collection.length + 1),
+    label,
+    collection,
+    version,
+  }));
+
+  const wireLinks = links.map(
+    (link): CatalogGraphWireLink => [
+      nodeIndexById.get(link.source)!,
+      nodeIndexById.get(link.target)!,
+      labelIndexByLabel.get(link.label)!,
+    ]
+  );
+
+  return { nodes: wireNodes, links: wireLinks, linkLabels };
+};
+
 type AnyEntry = {
   collection?: string;
   data: { id: string; name?: string; version?: string; latestVersion?: string; visualiser?: boolean };

package/package.json

@@ -7,7 +7,7 @@
   },
   "license": "SEE LICENSE IN LICENSE",
   "type": "module",
-  "version": "4.10.0",
+  "version": "4.10.2",
   "publishConfig": {
     "access": "public"
   },