@eventcatalog/core 2.50.2 → 2.50.3

package/dist/analytics/analytics.cjs

@@ -37,7 +37,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "2.50.2";
+var version = "2.50.3";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/analytics.js

@@ -1,7 +1,7 @@
 import {
   raiseEvent
-} from "../chunk-PRZAFM4L.js";
-import "../chunk-L3RINLLN.js";
+} from "../chunk-JCCZIMIQ.js";
+import "../chunk-RGWI2XAA.js";
 export {
   raiseEvent
 };

package/dist/analytics/log-build.cjs

@@ -106,7 +106,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "2.50.2";
+var version = "2.50.3";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/log-build.js

@@ -1,8 +1,8 @@
 import {
   log_build_default
-} from "../chunk-6DT6JYDR.js";
-import "../chunk-PRZAFM4L.js";
-import "../chunk-L3RINLLN.js";
+} from "../chunk-ZTETQ7PD.js";
+import "../chunk-JCCZIMIQ.js";
+import "../chunk-RGWI2XAA.js";
 import "../chunk-E7TXTI7G.js";
 export {
   log_build_default as default

package/dist/{chunk-PRZAFM4L.js → chunk-JCCZIMIQ.js}

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-L3RINLLN.js";
+} from "./chunk-RGWI2XAA.js";
 
 // src/analytics/analytics.js
 import axios from "axios";

package/dist/{chunk-L3RINLLN.js → chunk-RGWI2XAA.js}

@@ -1,5 +1,5 @@
 // package.json
-var version = "2.50.2";
+var version = "2.50.3";
 
 // src/constants.ts
 var VERSION = version;

package/dist/{chunk-6DT6JYDR.js → chunk-ZTETQ7PD.js}

@@ -1,6 +1,6 @@
 import {
   raiseEvent
-} from "./chunk-PRZAFM4L.js";
+} from "./chunk-JCCZIMIQ.js";
 import {
   getEventCatalogConfigFile,
   verifyRequiredFieldsAreInCatalogConfigFile

package/dist/constants.cjs

@@ -25,7 +25,7 @@ __export(constants_exports, {
 module.exports = __toCommonJS(constants_exports);
 
 // package.json
-var version = "2.50.2";
+var version = "2.50.3";
 
 // src/constants.ts
 var VERSION = version;

package/dist/constants.js

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-L3RINLLN.js";
+} from "./chunk-RGWI2XAA.js";
 export {
   VERSION
 };

package/dist/eventcatalog.cjs

@@ -157,7 +157,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "2.50.2";
+var version = "2.50.3";
 
 // src/constants.ts
 var VERSION = version;

package/dist/eventcatalog.js

@@ -6,8 +6,8 @@ import {
 } from "./chunk-XE6PFSH5.js";
 import {
   log_build_default
-} from "./chunk-6DT6JYDR.js";
-import "./chunk-PRZAFM4L.js";
+} from "./chunk-ZTETQ7PD.js";
+import "./chunk-JCCZIMIQ.js";
 import {
   catalogToAstro,
   checkAndConvertMdToMdx
@@ -15,7 +15,7 @@ import {
 import "./chunk-LDBRNJIL.js";
 import {
   VERSION
-} from "./chunk-L3RINLLN.js";
+} from "./chunk-RGWI2XAA.js";
 import {
   isAuthEnabled,
   isBackstagePluginEnabled,

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

@@ -1,28 +1,51 @@
 import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/react';
 import { MinusIcon } from '@heroicons/react/16/solid';
 import { PlusIcon } from '@heroicons/react/24/outline';
+import { useEffect } from 'react';
+
+declare global {
+  interface Window {
+    renderDiagrams?: (graphs: HTMLCollectionOf<Element>) => void;
+    renderPlantUML?: (graphs: HTMLCollectionOf<Element>) => void;
+  }
+}
 
 export default function Example({ title, children }: any) {
   return (
     <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">
-                {open ? (
-                  <MinusIcon className="h-6 w-6" aria-hidden="true" />
-                ) : (
-                  <PlusIcon className="h-6 w-6" aria-hidden="true" />
-                )}
-              </span>
-            </DisclosureButton>
-            <DisclosurePanel as="dd" className="pr-12 not-prose py-4">
-              <p className="text-base leading-7 text-gray-600">{children}</p>
-            </DisclosurePanel>
-          </div>
-        )}
+        {({ open }) => {
+          useEffect(() => {
+            if (open) {
+              const graphs = document.getElementsByClassName('mermaid');
+              const plantUML = document.getElementsByClassName('plantuml');
+              if (graphs.length > 0 && window.renderDiagrams) {
+                window.renderDiagrams(graphs);
+              }
+              if (plantUML.length > 0 && window.renderPlantUML) {
+                window.renderPlantUML(plantUML);
+              }
+            }
+          }, [open]);
+
+          return (
+            <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">
+                  {open ? (
+                    <MinusIcon className="h-6 w-6" aria-hidden="true" />
+                  ) : (
+                    <PlusIcon className="h-6 w-6" aria-hidden="true" />
+                  )}
+                </span>
+              </DisclosureButton>
+              <DisclosurePanel as="dd" className="pr-12 py-4 prose prose-sm max-w-none">
+                <div className="text-base leading-7 text-gray-600">{children}</div>
+              </DisclosurePanel>
+            </div>
+          );
+        }}
       </Disclosure>
     </div>
   );

package/eventcatalog/src/components/MDX/Flow/Flow.astro

@@ -5,7 +5,7 @@ import Admonition from '@components/MDX/Admonition';
 import NodeGraph from '../NodeGraph/NodeGraph';
 import { getVersionFromCollection } from '@utils/collections/versions';
 
-const { id, version = 'latest', maxHeight, includeKey = true } = Astro.props;
+const { id, version = 'latest', maxHeight, includeKey = true, mode = 'simple', walkthrough = true, search = true } = Astro.props;
 
 // Find the flow for the given id and version
 const flows = await getFlows();
@@ -17,6 +17,7 @@ const flow = flowCollection[0];
 const { nodes, edges } = await getNodesAndEdges({
   id: id,
   version: flow.data.version,
+  mode: mode,
 });
 ---
 
@@ -53,6 +54,8 @@ const { nodes, edges } = await getNodesAndEdges({
     includeKey={includeKey}
     footerLabel=`Flow diagram - ${flow.data.name} - v(${flow.data.version})`
     client:only="react"
+    showFlowWalkthrough={walkthrough}
+    showSearch={search}
   />
 </div>
 

package/eventcatalog/src/components/MDX/NodeGraph/NodeGraph.astro

@@ -30,9 +30,22 @@ interface Props {
     url: string;
   };
   linksToVisualiser?: boolean;
+  showSearch?: boolean;
+  showLegend?: boolean;
 }
 
-const { id, collection, title, mode = 'simple', linkTo = 'docs', version, href, linksToVisualiser } = Astro.props;
+const {
+  id,
+  collection,
+  title,
+  mode = 'simple',
+  linkTo = 'docs',
+  version,
+  href,
+  linksToVisualiser,
+  showSearch = true,
+  showLegend = true,
+} = Astro.props;
 
 let nodes = [],
   edges = [];
@@ -121,6 +134,8 @@ if (collection === 'domains-entities') {
     linksToVisualiser={linksToVisualiser}
     links={links}
     mode={mode}
+    showSearch={showSearch}
+    includeKey={showLegend}
   />
 </div>
 

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

@@ -55,6 +55,8 @@ interface Props {
   linksToVisualiser?: boolean;
   links?: { label: string; url: string }[];
   mode?: 'full' | 'simple';
+  showFlowWalkthrough?: boolean;
+  showSearch?: boolean;
 }
 
 const getVisualiserUrlForCollection = (collectionItem: CollectionEntry<CollectionTypes>) => {
@@ -71,6 +73,8 @@ const NodeGraphBuilder = ({
   linksToVisualiser = false,
   links = [],
   mode = 'full',
+  showFlowWalkthrough = true,
+  showSearch = true,
 }: Props) => {
   const nodeTypes = useMemo(
     () => ({
@@ -492,7 +496,7 @@ const NodeGraphBuilder = ({
               </span>
             )}
           </div>
-          {mode === 'full' && (
+          {mode === 'full' && showSearch && (
             <div className="flex justify-end space-x-2 w-96">
               <VisualiserSearch ref={searchRef} nodes={nodes} onNodeSelect={handleNodeSelect} onClear={handleSearchClear} />
             </div>
@@ -588,7 +592,7 @@ const NodeGraphBuilder = ({
       )}
       {includeBackground && <Background color="#bbb" gap={16} />}
       {includeBackground && <Controls />}
-      {isFlowVisualization && (
+      {isFlowVisualization && showFlowWalkthrough && (
         <Panel position="bottom-left">
           <StepWalkthrough
             nodes={nodes}
@@ -637,6 +641,8 @@ interface NodeGraphProps {
   links?: { label: string; url: string }[];
   mode?: 'full' | 'simple';
   portalId?: string;
+  showFlowWalkthrough?: boolean;
+  showSearch?: boolean;
 }
 
 const NodeGraph = ({
@@ -653,6 +659,8 @@ const NodeGraph = ({
   links = [],
   mode = 'full',
   portalId,
+  showFlowWalkthrough = true,
+  showSearch = true,
 }: NodeGraphProps) => {
   const [elem, setElem] = useState(null);
   const [showFooter, setShowFooter] = useState(true);
@@ -687,6 +695,8 @@ const NodeGraph = ({
             linksToVisualiser={linksToVisualiser}
             links={links}
             mode={mode}
+            showFlowWalkthrough={showFlowWalkthrough}
+            showSearch={showSearch}
           />
 
           {showFooter && (

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

@@ -410,6 +410,9 @@ const badges = doc?.badges || [];
     renderDiagrams(graphs);
   }
 
+  // Make renderDiagrams available globally for accordion component
+  window.renderDiagrams = renderDiagrams;
+
   document.addEventListener('astro:page-load', setupObserver);
 </script>
 
@@ -467,5 +470,9 @@ const badges = doc?.badges || [];
     if (document.getElementsByClassName('plantuml').length > 0) {
       renderPlantUML(graphs, deflate);
     }
+
+    window.renderPlantUML = (graphs: any) => {
+      renderPlantUML(graphs, deflate);
+    };
   });
 </script>

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

@@ -191,10 +191,17 @@ const generatePromptForResource = (props: any) => {
 // Handle node graphs in the markdown
 let nodeGraphs = getMDXComponentsByName(props.body || '', 'NodeGraph') || [];
 
+// Get props for the node graph (when no id is passed, we assume its the current page)
+const nodeGraphPropsForPage = nodeGraphs.find((nodeGraph: any) => nodeGraph.id === undefined) || ({} as any);
+
+// This will render the graph for this page
 nodeGraphs.push({
   id: props.data.id,
   version: props.data.version,
   type: collectionToResourceMap[props.collection as keyof typeof collectionToResourceMap],
+  ...nodeGraphPropsForPage,
+  search: nodeGraphPropsForPage?.search ? nodeGraphPropsForPage.search === 'true' : true,
+  legend: nodeGraphPropsForPage?.legend ? nodeGraphPropsForPage.legend === 'true' : true,
 });
 ---
 
@@ -350,8 +357,10 @@ nodeGraphs.push({
                     version={nodeGraph.version}
                     collection={collection}
                     title={nodeGraph.title}
-                    mode="simple"
+                    mode={nodeGraph.mode || 'simple'}
                     linksToVisualiser={true}
+                    showSearch={nodeGraph.search ?? true}
+                    showLegend={nodeGraph.legend ?? true}
                     href={{
                       label: 'Open in Visualiser',
                       url: buildUrl(`/visualiser/${collection}/${nodeGraph.id}/${nodeGraph.version}`),
@@ -485,6 +494,9 @@ nodeGraphs.push({
     if (document.getElementsByClassName('mermaid').length > 0) {
       renderDiagrams(graphs);
     }
+
+    // Make renderDiagrams available globally for accordion component
+    window.renderDiagrams = renderDiagrams;
   </script>
 
   <script>
@@ -542,6 +554,10 @@ nodeGraphs.push({
       if (document.getElementsByClassName('plantuml').length > 0) {
         renderPlantUML(graphs, deflate);
       }
+
+      window.renderPlantUML = (graphs: any) => {
+        renderPlantUML(graphs, deflate);
+      };
     });
   </script>
 </VerticalSideBarLayout>

package/package.json

@@ -6,7 +6,7 @@
     "url": "https://github.com/event-catalog/eventcatalog.git"
   },
   "type": "module",
-  "version": "2.50.2",
+  "version": "2.50.3",
   "publishConfig": {
     "access": "public"
   },