@eventcatalog/core 0.1.10 → 0.1.14

package/.next/server/chunks/{730.js → 685.js}

@@ -1,6 +1,6 @@
 "use strict";
-exports.id = 730;
-exports.ids = [730];
+exports.id = 685;
+exports.ids = [685];
 exports.modules = {
 
 /***/ 2455:
@@ -238,6 +238,415 @@ function Admonition({ children , type , className =''  }) {
 };
 
 
+/***/ }),
+
+/***/ 1262:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  "Z": () => (/* binding */ NodeGraph_NodeGraph)
+});
+
+// EXTERNAL MODULE: external "react/jsx-runtime"
+var jsx_runtime_ = __webpack_require__(997);
+// EXTERNAL MODULE: external "react"
+var external_react_ = __webpack_require__(6689);
+// EXTERNAL MODULE: external "react-flow-renderer"
+var external_react_flow_renderer_ = __webpack_require__(6987);
+var external_react_flow_renderer_default = /*#__PURE__*/__webpack_require__.n(external_react_flow_renderer_);
+// EXTERNAL MODULE: external "next/config"
+var config_ = __webpack_require__(4558);
+var config_default = /*#__PURE__*/__webpack_require__.n(config_);
+;// CONCATENATED MODULE: ./components/Mdx/NodeGraph/GraphElements.ts
+
+
+const { publicRuntimeConfig: { basePath =''  } = {
+}  } = config_default()();
+const MIN_NODE_WIDTH = 150;
+const generateLink = (value, type)=>basePath !== '' ? `${basePath}/${type}/${value}` : `/${type}/${value}`
+;
+const calcWidth = (value)=>value.length * 7 > MIN_NODE_WIDTH ? value.length * 7 : MIN_NODE_WIDTH
+;
+const buildNodeEdge = ({ id , target , source , isAnimated =true  })=>({
+        id,
+        target,
+        source,
+        type: 'smoothstep',
+        arrowHeadType: external_react_flow_renderer_.ArrowHeadType.ArrowClosed,
+        animated: isAnimated
+    })
+;
+const buildNodeData = ({ label , type , maxWidth  })=>{
+    const width = calcWidth(label);
+    const linkType = type === 'service' ? 'services' : 'events';
+    const link = generateLink(label, linkType);
+    return {
+        label,
+        link,
+        width,
+        maxWidth
+    };
+};
+/**
+ * Builds a graph for a given event
+ * @param {Event} - event
+ * @param rootNodeColor - The color of the root node
+ * @param isAnimated - whether to animate the graph
+ */ const getEventElements = ({ name: eventName , producers: eventProducers , consumers: eventConsumers  }, rootNodeColor = '#2563eb', isAnimated = true)=>{
+    const position = {
+        x: 0,
+        y: 0
+    };
+    const consumerColor = '#818cf8';
+    const producerColor = '#75d7b6';
+    const producersNames = eventProducers.map((s)=>calcWidth(s)
+    );
+    const maxProducersWidth = Math.max(...producersNames);
+    const consumersNames = eventConsumers.map((s)=>calcWidth(s)
+    );
+    const maxConsumersWidth = Math.max(...consumersNames);
+    const eventNameAsNodeID = `ev-${eventName.replace(/ /g, '_')}`;
+    const eventNodeWidth = calcWidth(eventName);
+    const producers = eventProducers.map((node)=>({
+            label: node,
+            id: `pr-${node.replace(/ /g, '_')}`
+        })
+    );
+    const consumers = eventConsumers.map((node)=>({
+            label: node,
+            id: `co-${node.replace(/ /g, '_')}`
+        })
+    );
+    // Transforms services & event into a graph model
+    const producersNodes = producers.map(({ label , id  })=>{
+        const nodeWidth = calcWidth(label);
+        const diff = maxProducersWidth - nodeWidth;
+        const nodeMaxWidth = diff !== 0 ? nodeWidth - diff : maxProducersWidth;
+        return {
+            id,
+            data: buildNodeData({
+                label,
+                type: 'service',
+                maxWidth: nodeMaxWidth
+            }),
+            style: {
+                border: `2px solid ${producerColor}`,
+                width: nodeWidth
+            },
+            type: 'input',
+            position
+        };
+    });
+    const consumersNodes = consumers.map(({ id , label  })=>{
+        const width = calcWidth(label);
+        return {
+            id,
+            data: buildNodeData({
+                label,
+                type: 'service',
+                maxWidth: maxConsumersWidth
+            }),
+            style: {
+                border: `2px solid ${consumerColor}`,
+                width
+            },
+            type: 'output',
+            position
+        };
+    });
+    const eventNode = {
+        id: eventNameAsNodeID,
+        data: buildNodeData({
+            label: eventName,
+            type: 'event',
+            maxWidth: eventNodeWidth
+        }),
+        style: {
+            border: `2px solid ${rootNodeColor}`,
+            width: eventNodeWidth
+        },
+        position
+    };
+    // Build connections
+    const producersEdges = producers.map(({ id , label  })=>buildNodeEdge({
+            id: `epe-${label.replace(/ /g, '_')}`,
+            source: id,
+            target: eventNameAsNodeID,
+            isAnimated
+        })
+    );
+    const consumersEdges = consumers.map(({ id , label  })=>buildNodeEdge({
+            id: `ece-${label.replace(/ /g, '_')}`,
+            target: id,
+            source: eventNameAsNodeID,
+            isAnimated
+        })
+    );
+    // Merge nodes in order
+    const elements = [
+        ...producersNodes,
+        eventNode,
+        ...consumersNodes,
+        ...producersEdges,
+        ...consumersEdges
+    ];
+    return elements;
+};
+/**
+ * Builds a graph for a given service
+ * @param {Service} service
+ * @param {string} rootNodeColor of the root node
+ * @param isAnimated whether the graph should be animated
+ * @returns {string} Mermaid Graph
+ */ const getServiceElements = ({ publishes , subscribes , name: serviceName  }, rootNodeColor = '#2563eb', isAnimated = true)=>{
+    const position = {
+        x: 0,
+        y: 0
+    };
+    const publishColor = '#818cf8';
+    const subscribeColor = '#75d7b6';
+    const publishesNames = publishes.map((e)=>calcWidth(e.name)
+    );
+    const maxPublishesWidth = Math.max(...publishesNames);
+    const subscribesNames = subscribes.map((e)=>calcWidth(e.name)
+    );
+    const maxSubscribesWidth = Math.max(...subscribesNames);
+    const serviceNameAsNodeID = `ser-${serviceName.replace(/ /g, '_')}`;
+    // Transforms services & event into a graph model
+    const publishesNodes = publishes.map((node)=>{
+        const nodeWidth = calcWidth(node.name);
+        return {
+            id: `pub-${node.name.replace(/ /g, '_')}`,
+            data: buildNodeData({
+                label: node.name,
+                type: 'event',
+                maxWidth: maxPublishesWidth
+            }),
+            style: {
+                border: `2px solid ${publishColor}`,
+                width: nodeWidth
+            },
+            type: 'output',
+            position
+        };
+    });
+    const subscribesNodes = subscribes.map((node)=>{
+        const nodeWidth = calcWidth(node.name);
+        const diff = maxSubscribesWidth - nodeWidth;
+        const nodeMaxWidth = diff !== 0 ? nodeWidth - diff : maxSubscribesWidth;
+        return {
+            id: `sub-${node.name.replace(/ /g, '_')}`,
+            data: buildNodeData({
+                label: node.name,
+                type: 'event',
+                maxWidth: nodeMaxWidth
+            }),
+            style: {
+                border: `2px solid ${subscribeColor}`,
+                width: nodeWidth
+            },
+            type: 'input',
+            position
+        };
+    });
+    const serviceNode = {
+        id: serviceNameAsNodeID,
+        data: buildNodeData({
+            label: serviceName,
+            type: 'service',
+            maxWidth: calcWidth(serviceName)
+        }),
+        style: {
+            border: `2px solid ${rootNodeColor}`,
+            width: calcWidth(serviceName)
+        },
+        position
+    };
+    // Build connections
+    const publishesEdges = publishes.map((node)=>buildNodeEdge({
+            id: `ecp-${node.name.replace(/ /g, '_')}`,
+            source: serviceNameAsNodeID,
+            target: `pub-${node.name.replace(/ /g, '_')}`,
+            isAnimated
+        })
+    );
+    const subscribesEdges = subscribes.map((node)=>buildNodeEdge({
+            id: `esc-${node.name.replace(/ /g, '_')}`,
+            target: serviceNameAsNodeID,
+            source: `sub-${node.name.replace(/ /g, '_')}`,
+            isAnimated
+        })
+    );
+    // Merge nodes in order
+    const elements = [
+        ...subscribesNodes,
+        serviceNode,
+        ...publishesNodes,
+        ...publishesEdges,
+        ...subscribesEdges
+    ];
+    return elements;
+};
+
+// EXTERNAL MODULE: external "dagre"
+var external_dagre_ = __webpack_require__(4214);
+var external_dagre_default = /*#__PURE__*/__webpack_require__.n(external_dagre_);
+;// CONCATENATED MODULE: ./components/Mdx/NodeGraph/GraphLayout.ts
+
+
+const nodeDefaultWidth = 150;
+const nodeDefaultHeight = 36;
+const offset = 48;
+const verticalOffset = offset / 1.5;
+function createGraphLayout(elements, isHorizontal) {
+    const dagreGraph = new (external_dagre_default()).graphlib.Graph();
+    dagreGraph.setDefaultEdgeLabel(()=>({
+        })
+    );
+    dagreGraph.setGraph({
+        rankdir: 'LR',
+        ranksep: offset * 2,
+        nodesep: verticalOffset
+    });
+    elements.forEach((element)=>{
+        if ((0,external_react_flow_renderer_.isNode)(element)) {
+            var ref, ref1, ref2, ref3;
+            // eslint-disable-next-line no-underscore-dangle
+            const nodeWidth = ((ref = element.__rf) === null || ref === void 0 ? void 0 : ref.width) ? (ref1 = element.__rf) === null || ref1 === void 0 ? void 0 : ref1.width : (ref2 = element.data) === null || ref2 === void 0 ? void 0 : ref2.width;
+            dagreGraph.setNode(element.id, {
+                width: nodeWidth || nodeDefaultWidth,
+                // eslint-disable-next-line no-underscore-dangle
+                height: ((ref3 = element.__rf) === null || ref3 === void 0 ? void 0 : ref3.height) || nodeDefaultHeight
+            });
+        } else {
+            dagreGraph.setEdge(element.source, element.target);
+        }
+    });
+    // Calculate the layout, to get the node positions with their widths and heights
+    external_dagre_default().layout(dagreGraph);
+    return elements.map((element)=>{
+        if ((0,external_react_flow_renderer_.isNode)(element)) {
+            var ref;
+            const node = dagreGraph.node(element.id);
+            element.targetPosition = isHorizontal ? external_react_flow_renderer_.Position.Left : external_react_flow_renderer_.Position.Top;
+            element.sourcePosition = isHorizontal ? external_react_flow_renderer_.Position.Right : external_react_flow_renderer_.Position.Bottom;
+            element.position = {
+                x: offset / 2 + node.x - ((element === null || element === void 0 ? void 0 : (ref = element.data) === null || ref === void 0 ? void 0 : ref.maxWidth) || node.width) / 2,
+                y: node.y - node.height / 2
+            };
+        }
+        return element;
+    });
+};
+// Helper - ReactFlow canvas height calculator
+const calcCanvasHeight = (data, type)=>{
+    const minHeight = 300;
+    const nodeSpacing = nodeDefaultHeight + verticalOffset;
+    let nodesHeight = 0;
+    if (type === 'event') {
+        nodesHeight = Math.max(data.producers.length, data.consumers.length) * nodeSpacing;
+    } else {
+        nodesHeight = Math.max(data.publishes.length, data.subscribes.length) * nodeSpacing;
+    }
+    return Math.max(minHeight, nodesHeight);
+};
+
+;// CONCATENATED MODULE: ./components/Mdx/NodeGraph/NodeGraph.tsx
+
+
+
+
+
+// NodeGraphBuilder component wrapping ReactFlow
+function NodeGraphBuilder({ data , source , rootNodeColor , maxZoom =10 , isAnimated =true , fitView =true , zoomOnScroll =false , isDraggable =false , isHorizontal =true  }) {
+    // Load event or service elements for graph
+    let initialElements;
+    if (source === 'event') {
+        initialElements = getEventElements(data, rootNodeColor, isAnimated);
+    } else {
+        initialElements = getServiceElements(data, rootNodeColor, isAnimated);
+    }
+    // Initialize graph layout
+    const isInitializedRef = (0,external_react_.useRef)(false);
+    const nodes = (0,external_react_flow_renderer_.useStoreState)((state)=>state.nodes
+    );
+    const edges = (0,external_react_flow_renderer_.useStoreState)((state)=>state.edges
+    );
+    // Calculate initial element layout
+    const graphElements = createGraphLayout(initialElements, isHorizontal);
+    const { 0: elements , 1: setElements  } = (0,external_react_.useState)(graphElements);
+    // Rerender graph layout to get rendered width/height for nodes/edges
+    (0,external_react_.useEffect)(()=>{
+        var // eslint-disable-next-line no-underscore-dangle
+        ref;
+        if (isInitializedRef.current === false && nodes.length > 0 && (nodes === null || nodes === void 0 ? void 0 : (ref = nodes[0]) === null || ref === void 0 ? void 0 : ref.__rf.width) != null) {
+            // Calculate element layout
+            const updateElements = ()=>{
+                const updatedElements = createGraphLayout([
+                    ...nodes,
+                    ...edges
+                ], isHorizontal);
+                setElements(updatedElements);
+                isInitializedRef.current = true;
+            };
+            updateElements();
+        }
+    }, [
+        nodes,
+        edges,
+        isInitializedRef,
+        isHorizontal
+    ]);
+    // ReactFlow operations
+    const onElementClick = (event, element)=>window.open(element.data.link, '_self')
+    ;
+    const onLoad = (0,external_react_.useCallback)((reactFlowInstance)=>{
+        if (fitView) {
+            reactFlowInstance.fitView();
+        }
+    }, [
+        fitView
+    ]);
+    return(/*#__PURE__*/ jsx_runtime_.jsx((external_react_flow_renderer_default()), {
+        elements: elements,
+        onLoad: onLoad,
+        onElementClick: onElementClick,
+        nodesDraggable: isDraggable,
+        zoomOnScroll: zoomOnScroll,
+        maxZoom: maxZoom,
+        children: /*#__PURE__*/ jsx_runtime_.jsx(external_react_flow_renderer_.Controls, {
+        })
+    }));
+}
+// NodeGraph wrapping NodeGraphBuilder Component
+function NodeGraph({ data , source , rootNodeColor , maxHeight , maxZoom , fitView , zoomOnScroll , isAnimated , isDraggable , isHorizontal  }) {
+    // Set dynamic height of node graph
+    const dynamicHeight = maxHeight || calcCanvasHeight(data, source);
+    return(/*#__PURE__*/ jsx_runtime_.jsx("div", {
+        className: "node-graph w-full border-dashed border-2 border-slate-300",
+        style: {
+            height: dynamicHeight
+        },
+        children: /*#__PURE__*/ jsx_runtime_.jsx(external_react_flow_renderer_.ReactFlowProvider, {
+            children: /*#__PURE__*/ jsx_runtime_.jsx(NodeGraphBuilder, {
+                source: source,
+                data: data,
+                rootNodeColor: rootNodeColor,
+                maxZoom: maxZoom,
+                fitView: fitView,
+                zoomOnScroll: zoomOnScroll,
+                isAnimated: isAnimated,
+                isDraggable: isDraggable,
+                isHorizontal: isHorizontal
+            })
+        })
+    }));
+}
+/* harmony default export */ const NodeGraph_NodeGraph = (NodeGraph);
+
+
 /***/ }),
 
 /***/ 4488:

package/.next/server/chunks/944.js

@@ -59,48 +59,34 @@ function Examples({ title ='Examples' , description , examples =[] , showLineNum
                     className: "text-md font-medium text-gray-700",
                     children: description
                 }),
-                /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
-                    children: [
-                        /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("nav", {
-                            className: "-mb-px flex",
-                            "aria-label": "Tabs",
-                            children: tabs.map((tab)=>{
-                                const isSelected = tab.name === selectedTab.name;
-                                return(/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("button", {
-                                    type: "button",
-                                    onClick: ()=>handleTabSelection(tab)
-                                    ,
-                                    className: classNames(isSelected ? 'border-green-500 text-green-600 selected' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300', 'whitespace-nowrap py-4 border-b-2 font-medium text-sm important:no-underline px-8 hover:bg-gray-50 transition'),
-                                    "aria-current": isSelected ? 'page' : undefined,
-                                    children: [
-                                        tab.name,
-                                        /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("span", {
-                                            className: "block text-xs mt-",
-                                            children: [
-                                                "(",
-                                                tab.langugage,
-                                                ")"
-                                            ]
-                                        })
-                                    ]
-                                }, tab.name));
-                            })
-                        }),
-                        /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
-                            className: "my-4",
-                            children: [
-                                /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_components_SyntaxHighlighter__WEBPACK_IMPORTED_MODULE_2__/* ["default"] */ .Z, {
+                /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
+                    children: /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
+                        className: "col-span-5",
+                        children: [
+                            /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("nav", {
+                                className: "-mb-2 flex bg-gray-900",
+                                "aria-label": "Tabs",
+                                children: tabs.map((tab)=>{
+                                    const isSelected = tab.name === selectedTab.name;
+                                    return(/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("button", {
+                                        type: "button",
+                                        onClick: ()=>handleTabSelection(tab)
+                                        ,
+                                        className: classNames(isSelected ? 'border-yellow-300 text-yellow-300 selected bg-gray-700' : 'border-transparent text-gray-500 hover:text-gray-400 bg-gray-800  ', 'whitespace-nowrap py-3 border-b-2 font-medium important:no-underline px-6 text-xs  transition '),
+                                        "aria-current": isSelected ? 'page' : undefined,
+                                        children: tab.name
+                                    }, tab.name));
+                                })
+                            }),
+                            /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
+                                children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_components_SyntaxHighlighter__WEBPACK_IMPORTED_MODULE_2__/* ["default"] */ .Z, {
                                     language: selectedTab.langugage,
                                     showLineNumbers: showLineNumbers,
                                     children: selectedTab.content
-                                }),
-                                selectedTab.langugage && /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("span", {
-                                    className: "-mb-2 block text-xs text-right font-bold",
-                                    children: selectedTab.name
                                 })
-                            ]
-                        })
-                    ]
+                            })
+                        ]
+                    })
                 })
             ]
         })
@@ -443,6 +429,8 @@ __webpack_require__.a(module, async (__webpack_handle_async_dependencies__) => {
 /* harmony import */ var react_syntax_highlighter__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(727);
 /* harmony import */ var react_syntax_highlighter__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react_syntax_highlighter__WEBPACK_IMPORTED_MODULE_3__);
 /* harmony import */ var copy_text_to_clipboard__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(7656);
+/* harmony import */ var _heroicons_react_outline__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(8768);
+/* harmony import */ var _heroicons_react_outline__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_heroicons_react_outline__WEBPACK_IMPORTED_MODULE_5__);
 var __webpack_async_dependencies__ = __webpack_handle_async_dependencies__([copy_text_to_clipboard__WEBPACK_IMPORTED_MODULE_4__]);
 copy_text_to_clipboard__WEBPACK_IMPORTED_MODULE_4__ = (__webpack_async_dependencies__.then ? await __webpack_async_dependencies__ : __webpack_async_dependencies__)[0];
 
@@ -450,6 +438,7 @@ copy_text_to_clipboard__WEBPACK_IMPORTED_MODULE_4__ = (__webpack_async_dependenc
 
 
 
+
 function SyntaxHighlighter({ language , name ='' , ...props }) {
     const { 0: showCopied , 1: setShowCopied  } = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(false);
     const handleCopyCode = ()=>{
@@ -460,25 +449,40 @@ function SyntaxHighlighter({ language , name ='' , ...props }) {
     };
     const regex = /\\n/g;
     return(/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
-        className: "relative group",
+        className: "h-96 relative",
         children: [
-            /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("button", {
+            name && /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
+                className: `flex -mb-3 pb-2 bg-gray-900 ${name ? 'justify-between' : 'justify-end'}`,
+                children: [
+                    name && /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("span", {
+                        className: "block text-xs py-2 px-2 font-bold text-gray-300",
+                        children: name
+                    }),
+                    /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("button", {
+                        type: "button",
+                        onClick: handleCopyCode,
+                        className: "text-xs text-white rounded-md px-4",
+                        children: showCopied ? 'Copied' : /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_heroicons_react_outline__WEBPACK_IMPORTED_MODULE_5__.ClipboardCopyIcon, {
+                            className: "h-4 w-4"
+                        })
+                    })
+                ]
+            }),
+            !name && /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("button", {
                 type: "button",
                 onClick: handleCopyCode,
-                className: "absolute top-2 right-5 text-sm bg-gray-700 text-white rounded-md py-1 px-4 transform transition opacity-0 group-hover:opacity-100",
-                children: showCopied ? 'Copied' : 'Copy'
+                className: "text-xs absolute right-0 top-2 text-white rounded-md px-4",
+                children: showCopied ? 'Copied' : /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_heroicons_react_outline__WEBPACK_IMPORTED_MODULE_5__.ClipboardCopyIcon, {
+                    className: "h-4 w-4"
+                })
             }),
             /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(react_syntax_highlighter__WEBPACK_IMPORTED_MODULE_3__.Prism, {
                 style: (react_syntax_highlighter_dist_cjs_styles_prism_dracula__WEBPACK_IMPORTED_MODULE_2___default()),
                 language: language,
                 ...props,
                 wrapLines: true,
-                className: "max-h-96 overflow-auto",
+                className: "h-96 overflow-auto",
                 children: props.children.replace(regex, '\n')
-            }),
-            name && /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("span", {
-                className: "-mb-2 block text-xs text-right font-bold",
-                children: name
             })
         ]
     }));
@@ -509,7 +513,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var next_mdx_remote__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(next_mdx_remote__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var _components_Mdx_Admonition__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(1790);
 /* harmony import */ var _components_Mdx_Examples__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(3067);
-/* harmony import */ var _utils_random_bg__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(6892);
+/* harmony import */ var _utils_random_bg__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(6892);
 /* harmony import */ var _components_ContentView__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(2455);
 /* harmony import */ var _components_Mermaid__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(788);
 /* harmony import */ var _components_Sidebars_EventSidebar__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(9610);
@@ -519,6 +523,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _components_Mdx_SchemaViewer_SchemaViewer__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(7228);
 /* harmony import */ var _lib_events__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(9959);
 /* harmony import */ var _hooks_EventCatalog__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(5008);
+/* harmony import */ var _components_Mdx_NodeGraph_NodeGraph__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(1262);
 var __webpack_async_dependencies__ = __webpack_handle_async_dependencies__([_lib_events__WEBPACK_IMPORTED_MODULE_12__, _components_Mermaid__WEBPACK_IMPORTED_MODULE_6__, _components_Mdx_Examples__WEBPACK_IMPORTED_MODULE_4__, _components_Mdx_SchemaViewer_SchemaViewer__WEBPACK_IMPORTED_MODULE_11__, _components_SyntaxHighlighter__WEBPACK_IMPORTED_MODULE_10__]);
 ([_lib_events__WEBPACK_IMPORTED_MODULE_12__, _components_Mermaid__WEBPACK_IMPORTED_MODULE_6__, _components_Mdx_Examples__WEBPACK_IMPORTED_MODULE_4__, _components_Mdx_SchemaViewer_SchemaViewer__WEBPACK_IMPORTED_MODULE_11__, _components_SyntaxHighlighter__WEBPACK_IMPORTED_MODULE_10__] = __webpack_async_dependencies__.then ? await __webpack_async_dependencies__ : __webpack_async_dependencies__);
 
@@ -536,6 +541,7 @@ var __webpack_async_dependencies__ = __webpack_handle_async_dependencies__([_lib
 
 
 
+
 const getComponents = ({ event , schema , examples  })=>({
         code: ({ className , ...props })=>{
             const match = /language-(\w+)/.exec(className || '');
@@ -606,11 +612,32 @@ const getComponents = ({ event , schema , examples  })=>({
                     /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_components_Mermaid__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .Z, {
                         source: "event",
                         data: event,
-                        rootNodeColor: (0,_utils_random_bg__WEBPACK_IMPORTED_MODULE_14__/* ["default"] */ .Z)(event.name),
+                        rootNodeColor: (0,_utils_random_bg__WEBPACK_IMPORTED_MODULE_15__/* ["default"] */ .Z)(event.name),
                         charts: charts
                     })
                 ]
             })
+        ,
+        NodeGraph: ({ title , maxHeight , maxZoom , fitView , zoomOnScroll , isAnimated , isDraggable  })=>/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
+                className: "mx-auto w-full",
+                children: [
+                    title && /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("h2", {
+                        className: "text-lg font-medium text-gray-900 underline",
+                        children: title
+                    }),
+                    /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_components_Mdx_NodeGraph_NodeGraph__WEBPACK_IMPORTED_MODULE_14__/* ["default"] */ .Z, {
+                        source: "event",
+                        data: event,
+                        rootNodeColor: (0,_utils_random_bg__WEBPACK_IMPORTED_MODULE_15__/* ["default"] */ .Z)(event.name),
+                        maxHeight: maxHeight,
+                        maxZoom: maxZoom,
+                        fitView: fitView,
+                        zoomOnScroll: zoomOnScroll,
+                        isAnimated: isAnimated,
+                        isDraggable: isDraggable
+                    })
+                ]
+            })
     })
 ;
 function Events(props) {

package/.next/server/pages/404.html

@@ -1 +1 @@
-<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width"/><meta charSet="utf-8"/><script src="//unpkg.com/three"></script><script src="//unpkg.com/three/examples/js/renderers/CSS2DRenderer.js"></script><link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css"/><meta name="description" content="An open source project to Discover, Explore and Document your Event Driven Architectures."/><meta property="og:url" content="https://eventcatalog.dev/"/><meta property="og:type" content="website"/><meta property="og:title" content="EventCatalog | Discover, Explore and Document your Event Driven Architectures."/><meta property="og:description" content="An open source tool powered by markdown to document your Event Driven Architecture."/><meta property="og:image" content="https://eventcatalog.dev/img/opengraph.png"/><meta property="og:image:alt" content="EventCatalog | Discover, Explore and Document your Event Driven Architectures."/><meta property="og:image:width" content="1200"/><meta property="og:image:height" content="600"/><meta property="og:locale" content="en-GB"/><meta name="author" content="David Boyne"/><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/atom-one-light.min.css"/><title>404: This page could not be found</title><meta name="next-head-count" content="18"/><link rel="preload" href="/_next/static/css/0b54ec6503b91283.css" as="style"/><link rel="stylesheet" href="/_next/static/css/0b54ec6503b91283.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-5cd94c89d3acac5f.js"></script><script src="/_next/static/chunks/webpack-2ebfdb1666dac4ad.js" defer=""></script><script src="/_next/static/chunks/framework-576ec6a1c1386453.js" defer=""></script><script src="/_next/static/chunks/main-0015f560a7edeb35.js" defer=""></script><script src="/_next/static/chunks/pages/_app-c205def1388372e3.js" defer=""></script><script src="/_next/static/chunks/pages/_error-5a714c45c50a8db4.js" defer=""></script><script src="/_next/static/e-q1iE1pYqLSobepXPoMN/_buildManifest.js" defer=""></script><script src="/_next/static/e-q1iE1pYqLSobepXPoMN/_ssgManifest.js" defer=""></script><script src="/_next/static/e-q1iE1pYqLSobepXPoMN/_middlewareManifest.js" defer=""></script></head><body><div id="__next" data-reactroot=""><div class="bg-gray-800"><div class="max-w-7xl mx-auto "><div class="relative flex items-center justify-between h-16"><div class="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start"><div class="flex-shrink-0 flex items-center text-white font-bold"><a class="flex items-center" href="/"><img alt="logo" class="text-white w-8 inline-block mr-3" src="/logo.svg"/><span class="text-xl">EventCatalog</span></a></div></div><div class="hidden sm:block sm:ml-6"><div class="flex space-x-4"><a class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium" href="/events/">Events</a><a class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium" href="/services/">Services</a><a class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium" href="/overview/">3D Node Graph</a></div></div></div></div></div><div style="color:#000;background:#fff;font-family:-apple-system, BlinkMacSystemFont, Roboto, &quot;Segoe UI&quot;, &quot;Fira Sans&quot;, Avenir, &quot;Helvetica Neue&quot;, &quot;Lucida Grande&quot;, sans-serif;height:100vh;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center"><div><style>body { margin: 0 }</style><h1 style="display:inline-block;border-right:1px solid rgba(0, 0, 0,.3);margin:0;margin-right:20px;padding:10px 23px 10px 0;font-size:24px;font-weight:500;vertical-align:top">404</h1><div style="display:inline-block;text-align:left;line-height:49px;height:49px;vertical-align:middle"><h2 style="font-size:14px;font-weight:normal;line-height:inherit;margin:0;padding:0">This page could not be found<!-- -->.</h2></div></div></div><footer class="bg-gray-800"><div class="max-w-7xl mx-auto py-12 px-4 overflow-hidden sm:px-6 lg:px-8"><nav class="-mx-5 -my-2 flex flex-wrap justify-center" aria-label="Footer"><div class="px-5 py-2"><a href="/events" class="text-base text-gray-500 hover:text-gray-900">Events</a></div><div class="px-5 py-2"><a href="/services" class="text-base text-gray-500 hover:text-gray-900">Services</a></div><div class="px-5 py-2"><a href="/overview" class="text-base text-gray-500 hover:text-gray-900">3D Node Graph</a></div><div class="px-5 py-2"><a href="https://github.com/boyney123/eventcatalog-demo/edit/master" class="text-base text-gray-500 hover:text-gray-900">GitHub</a></div></nav><p class="mt-8 text-center text-base text-gray-400">Copyright © <!-- -->2022<!-- --> <!-- -->Your Company<!-- -->. Built with<!-- --> <a class="underline" href="https://eventcatalog.dev" target="_blank" rel="noreferrer">EventCatalog.</a></p></div></footer></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"statusCode":404}},"page":"/_error","query":{},"buildId":"e-q1iE1pYqLSobepXPoMN","nextExport":true,"isFallback":false,"gip":true,"scriptLoader":[]}</script></body></html>
+<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width"/><meta charSet="utf-8"/><script src="//unpkg.com/three"></script><script src="//unpkg.com/three/examples/js/renderers/CSS2DRenderer.js"></script><link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css"/><meta name="description" content="An open source project to Discover, Explore and Document your Event Driven Architectures."/><meta property="og:url" content="https://eventcatalog.dev/"/><meta property="og:type" content="website"/><meta property="og:title" content="EventCatalog | Discover, Explore and Document your Event Driven Architectures."/><meta property="og:description" content="An open source tool powered by markdown to document your Event Driven Architecture."/><meta property="og:image" content="https://eventcatalog.dev/img/opengraph.png"/><meta property="og:image:alt" content="EventCatalog | Discover, Explore and Document your Event Driven Architectures."/><meta property="og:image:width" content="1200"/><meta property="og:image:height" content="600"/><meta property="og:locale" content="en-GB"/><meta name="author" content="David Boyne"/><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/atom-one-light.min.css"/><title>404: This page could not be found</title><meta name="next-head-count" content="18"/><link rel="preload" href="/_next/static/css/7c5aa7fd17ca8eca.css" as="style"/><link rel="stylesheet" href="/_next/static/css/7c5aa7fd17ca8eca.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-5cd94c89d3acac5f.js"></script><script src="/_next/static/chunks/webpack-258a9e5dae8126df.js" defer=""></script><script src="/_next/static/chunks/framework-576ec6a1c1386453.js" defer=""></script><script src="/_next/static/chunks/main-0015f560a7edeb35.js" defer=""></script><script src="/_next/static/chunks/pages/_app-46c2e0f1ff3b4efb.js" defer=""></script><script src="/_next/static/chunks/pages/_error-5a714c45c50a8db4.js" defer=""></script><script src="/_next/static/ac8XYzWpx91m8pzawAm8i/_buildManifest.js" defer=""></script><script src="/_next/static/ac8XYzWpx91m8pzawAm8i/_ssgManifest.js" defer=""></script><script src="/_next/static/ac8XYzWpx91m8pzawAm8i/_middlewareManifest.js" defer=""></script></head><body><div id="__next" data-reactroot=""><div class="bg-gray-800"><div class="max-w-7xl mx-auto "><div class="relative flex items-center justify-between h-16"><div class="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start"><div class="flex-shrink-0 flex items-center text-white font-bold"><a class="flex items-center" href="/"><img alt="logo" class="text-white w-8 inline-block mr-3" src="/logo.svg"/><span class="text-xl">EventCatalog</span></a></div></div><div class="hidden sm:block sm:ml-6"><div class="flex space-x-4"><a class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium" href="/events/">Events</a><a class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium" href="/services/">Services</a><a class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium" href="/overview/">3D Node Graph</a></div></div></div></div></div><div style="color:#000;background:#fff;font-family:-apple-system, BlinkMacSystemFont, Roboto, &quot;Segoe UI&quot;, &quot;Fira Sans&quot;, Avenir, &quot;Helvetica Neue&quot;, &quot;Lucida Grande&quot;, sans-serif;height:100vh;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center"><div><style>body { margin: 0 }</style><h1 style="display:inline-block;border-right:1px solid rgba(0, 0, 0,.3);margin:0;margin-right:20px;padding:10px 23px 10px 0;font-size:24px;font-weight:500;vertical-align:top">404</h1><div style="display:inline-block;text-align:left;line-height:49px;height:49px;vertical-align:middle"><h2 style="font-size:14px;font-weight:normal;line-height:inherit;margin:0;padding:0">This page could not be found<!-- -->.</h2></div></div></div><footer class="bg-gray-800"><div class="max-w-7xl mx-auto py-12 px-4 overflow-hidden sm:px-6 lg:px-8"><nav class="-mx-5 -my-2 flex flex-wrap justify-center" aria-label="Footer"><div class="px-5 py-2"><a href="/events" class="text-base text-gray-500 hover:text-gray-900">Events</a></div><div class="px-5 py-2"><a href="/services" class="text-base text-gray-500 hover:text-gray-900">Services</a></div><div class="px-5 py-2"><a href="/overview" class="text-base text-gray-500 hover:text-gray-900">3D Node Graph</a></div><div class="px-5 py-2"><a href="https://github.com/boyney123/eventcatalog-demo/edit/master" class="text-base text-gray-500 hover:text-gray-900">GitHub</a></div></nav><p class="mt-8 text-center text-base text-gray-400">Copyright © <!-- -->2022<!-- --> <!-- -->Your Company<!-- -->. Built with<!-- --> <a class="underline" href="https://eventcatalog.dev" target="_blank" rel="noreferrer">EventCatalog.</a></p></div></footer></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"statusCode":404}},"page":"/_error","query":{},"buildId":"ac8XYzWpx91m8pzawAm8i","nextExport":true,"isFallback":false,"gip":true,"scriptLoader":[]}</script></body></html>