@eventcatalog/core 0.1.14 → 0.1.18

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

@@ -1,6 +1,6 @@
 "use strict";
-exports.id = 685;
-exports.ids = [685];
+exports.id = 730;
+exports.ids = [730];
 exports.modules = {
 
 /***/ 2455:
@@ -238,415 +238,6 @@ 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/8.js

@@ -26,6 +26,10 @@ module.exports = {
             label: 'Services',
             href: '/services'
         },
+        {
+            label: 'Visualiser',
+            href: '/visualiser'
+        },
         {
             label: '3D Node Graph',
             href: '/overview'

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

@@ -385,6 +385,15 @@ function EventSideBar({ event , loadedVersion , isOldVersion  }) {
                             })
                         })
                     }),
+                    /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(next_link__WEBPACK_IMPORTED_MODULE_2__["default"], {
+                        href: `/visualiser?type=event&name${eventName}`,
+                        children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("a", {
+                            className: "hidden w-full md:inline-flex h-10 justify-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-800 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-200",
+                            children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("span", {
+                                children: "View in Visualiser"
+                            })
+                        })
+                    }),
                     externalLinks.length > 0 && externalLinks.map((tag)=>/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("a", {
                             href: tag.url,
                             target: "_blank",
@@ -523,7 +532,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);
+/* harmony import */ var _components_Mdx_NodeGraph_NodeGraph__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(8484);
 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__);
 
@@ -553,12 +562,12 @@ const getComponents = ({ event , schema , examples  })=>({
                 ...props
             });
         },
-        Schema: ({ title ='Event Schema'  })=>{
+        Schema: ({ title  })=>{
             if (!schema) return null;
             return(/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("section", {
                 className: "mt-8 xl:mt-10",
                 children: [
-                    /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("h2", {
+                    title && /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("h2", {
                         id: "activity-title",
                         className: "text-lg font-medium text-gray-900 underline",
                         children: title
@@ -572,12 +581,12 @@ const getComponents = ({ event , schema , examples  })=>({
                 ]
             }));
         },
-        SchemaViewer: ({ title ='Event Schema' , renderRootTreeLines =false , defaultExpandedDepth =1 , maxHeight  })=>{
+        SchemaViewer: ({ title , renderRootTreeLines =false , defaultExpandedDepth =1 , maxHeight  })=>{
             if (!schema) return null;
             return(/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("section", {
                 className: "mt-8 xl:mt-10",
                 children: [
-                    /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("h2", {
+                    title && /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("h2", {
                         className: "text-lg font-medium text-gray-900 underline",
                         children: title
                     }),

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/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>
+<!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/6774df2af1f71309.css" as="style"/><link rel="stylesheet" href="/_next/static/css/6774df2af1f71309.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-49abfa9a972ed5a3.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-2ce3055a6b681f1a.js" defer=""></script><script src="/_next/static/chunks/pages/_error-5a714c45c50a8db4.js" defer=""></script><script src="/_next/static/KZ2mEdt5MUAVDtbybTBw1/_buildManifest.js" defer=""></script><script src="/_next/static/KZ2mEdt5MUAVDtbybTBw1/_ssgManifest.js" defer=""></script><script src="/_next/static/KZ2mEdt5MUAVDtbybTBw1/_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="/visualiser/">Visualiser</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-400">Events</a></div><div class="px-5 py-2"><a href="/services" class="text-base text-gray-500 hover:text-gray-400">Services</a></div><div class="px-5 py-2"><a href="/visualiser" class="text-base text-gray-500 hover:text-gray-400">Visualiser</a></div><div class="px-5 py-2"><a href="/overview" class="text-base text-gray-500 hover:text-gray-400">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-400">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":"KZ2mEdt5MUAVDtbybTBw1","nextExport":true,"isFallback":false,"gip":true,"scriptLoader":[]}</script></body></html>

package/.next/server/pages/500.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>500: Internal Server Error</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">500</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">Internal Server Error<!-- -->.</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":500}},"page":"/_error","query":{},"buildId":"ac8XYzWpx91m8pzawAm8i","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>500: Internal Server Error</title><meta name="next-head-count" content="18"/><link rel="preload" href="/_next/static/css/6774df2af1f71309.css" as="style"/><link rel="stylesheet" href="/_next/static/css/6774df2af1f71309.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-49abfa9a972ed5a3.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-2ce3055a6b681f1a.js" defer=""></script><script src="/_next/static/chunks/pages/_error-5a714c45c50a8db4.js" defer=""></script><script src="/_next/static/KZ2mEdt5MUAVDtbybTBw1/_buildManifest.js" defer=""></script><script src="/_next/static/KZ2mEdt5MUAVDtbybTBw1/_ssgManifest.js" defer=""></script><script src="/_next/static/KZ2mEdt5MUAVDtbybTBw1/_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="/visualiser/">Visualiser</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">500</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">Internal Server Error<!-- -->.</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-400">Events</a></div><div class="px-5 py-2"><a href="/services" class="text-base text-gray-500 hover:text-gray-400">Services</a></div><div class="px-5 py-2"><a href="/visualiser" class="text-base text-gray-500 hover:text-gray-400">Visualiser</a></div><div class="px-5 py-2"><a href="/overview" class="text-base text-gray-500 hover:text-gray-400">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-400">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":500}},"page":"/_error","query":{},"buildId":"KZ2mEdt5MUAVDtbybTBw1","nextExport":true,"isFallback":false,"gip":true,"scriptLoader":[]}</script></body></html>

package/.next/server/pages/_app.js

@@ -5,7 +5,7 @@ exports.id = 888;
 exports.ids = [888];
 exports.modules = {
 
-/***/ 6998:
+/***/ 2373:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 // ESM COMPAT FLAG
@@ -26,8 +26,8 @@ var next_link = __webpack_require__(9097);
 // EXTERNAL MODULE: external "next/config"
 var config_ = __webpack_require__(4558);
 var config_default = /*#__PURE__*/__webpack_require__.n(config_);
-;// CONCATENATED MODULE: external "next/router"
-const router_namespaceObject = require("next/router");
+// EXTERNAL MODULE: external "next/router"
+var router_ = __webpack_require__(1853);
 // EXTERNAL MODULE: ./hooks/EventCatalog.tsx
 var EventCatalog = __webpack_require__(5008);
 ;// CONCATENATED MODULE: ./components/Header.tsx
@@ -45,6 +45,10 @@ const navigation = [
         name: 'Services',
         href: '/services'
     },
+    {
+        name: 'Visualiser',
+        href: '/visualiser'
+    },
     {
         name: '3D Node Graph',
         href: '/overview'
@@ -55,7 +59,7 @@ function classNames(...classes) {
 }
 function Example() {
     const { title , homepageLink , logo  } = (0,EventCatalog/* useConfig */.ZR)();
-    const router = (0,router_namespaceObject.useRouter)();
+    const router = (0,router_.useRouter)();
     const { publicRuntimeConfig: { basePath =''  } = {
     }  } = config_default()();
     const logoToLoad = logo || {
@@ -153,7 +157,7 @@ function Footer() {
                             className: "px-5 py-2",
                             children: /*#__PURE__*/ jsx_runtime_.jsx("a", {
                                 href: item.href,
-                                className: "text-base text-gray-500 hover:text-gray-900",
+                                className: "text-base text-gray-500 hover:text-gray-400",
                                 children: item.label
                             })
                         }, item.label)
@@ -374,6 +378,13 @@ module.exports = require("next/head");
 
 /***/ }),
 
+/***/ 1853:
+/***/ ((module) => {
+
+module.exports = require("next/router");
+
+/***/ }),
+
 /***/ 6689:
 /***/ ((module) => {
 
@@ -402,7 +413,7 @@ module.exports = require("path");
 var __webpack_require__ = require("../webpack-runtime.js");
 __webpack_require__.C(exports);
 var __webpack_exec__ = (moduleId) => (__webpack_require__(__webpack_require__.s = moduleId))
-var __webpack_exports__ = __webpack_require__.X(0, [47,97,8], () => (__webpack_exec__(6998)));
+var __webpack_exports__ = __webpack_require__.X(0, [47,97,8], () => (__webpack_exec__(2373)));
 module.exports = __webpack_exports__;
 
 })();