@eventcatalog/core 0.2.7 → 0.2.8

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @eventcatalog/core
 
+## 0.2.8
+
+### Patch Changes
+
+- [`2985a14`](https://github.com/boyney123/eventcatalog/commit/2985a14ecdebb5f15ea0ff6512ee88f8863e676f) [#227](https://github.com/boyney123/eventcatalog/pull/227) Thanks [@boyney123](https://github.com/boyney123)! - feat: adding new node in visualiser to show all events and services
+
 ## 0.2.7
 
 ### Patch Changes

package/components/Mdx/NodeGraph/GraphElements.tsx

@@ -114,7 +114,7 @@ export const getEventElements = (
   // Build connections
   const producersEdges: Edge[] = producers.map(({ id, label }) =>
     buildNodeEdge({
-      id: `epe-${label.replace(/ /g, '_')}`,
+      id: `epe-${label.replace(/ /g, '_')}-${eventNameAsNodeID}`,
       source: id,
       target: eventNameAsNodeID,
       isAnimated,
@@ -123,7 +123,7 @@ export const getEventElements = (
   );
   const consumersEdges: Edge[] = consumers.map(({ id, label }) =>
     buildNodeEdge({
-      id: `ece-${label.replace(/ /g, '_')}`,
+      id: `ece-${label.replace(/ /g, '_')}-${eventNameAsNodeID}`,
       target: id,
       source: eventNameAsNodeID,
       isAnimated,

package/components/Mdx/NodeGraph/GraphLayout.ts

@@ -38,6 +38,11 @@ export default function createGraphLayout(elements: Elements, isHorizontal: bool
         x: offset / 2 + node.x - (element?.data?.maxWidth || node.width) / 2,
         y: node.y - node.height / 2,
       };
+
+      // This is due to an issue with ReactFlow giving errors when we set the width in the styles.
+      if (element.style.width) {
+        element.style.width = undefined;
+      }
     }
     return element;
   });

package/components/Mdx/NodeGraph/NodeGraph.tsx

@@ -1,13 +1,19 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import Link from 'next/link';
-import ReactFlow, { Controls, ReactFlowProvider, useStoreState, Background, useZoomPanHelper } from 'react-flow-renderer';
+import ReactFlow, { Controls, ReactFlowProvider, Background, useZoomPanHelper } from 'react-flow-renderer';
 import { Domain, Event, Service } from '@eventcatalog/types';
 import { getEventElements, getServiceElements } from './GraphElements';
 import createGraphLayout, { calcCanvasHeight } from './GraphLayout';
 
+interface CombinedEventsAndServices {
+  events: Event[];
+  services: Service[];
+  name?: string;
+}
+
 interface NodeGraphBuilderProps {
-  data: Event | Service | Domain;
-  source: 'event' | 'service' | 'domain';
+  data: Event | Service | Domain | CombinedEventsAndServices;
+  source: 'event' | 'service' | 'domain' | 'all';
   title?: string;
   subtitle?: string;
   rootNodeColor?: string;
@@ -44,14 +50,17 @@ function NodeGraphBuilder({
   title,
   subtitle,
 }: NodeGraphBuilderProps) {
-  const getElements = () => {
-    if (source === 'domain') {
-      const domainData = data as Domain;
-      const totalEventElements = domainData.events.map((event) => getEventElements(event, rootNodeColor, isAnimated, true, true));
-      const totalServiceElements = domainData.services.map((service) =>
+  const getElements = useCallback(() => {
+    if (source === 'domain' || source === 'all') {
+      const graphData = source === 'domain' ? (data as Domain) : (data as CombinedEventsAndServices);
+      const totalEventElements = graphData.events.map((event) => getEventElements(event, rootNodeColor, isAnimated, true, true));
+      const totalServiceElements = graphData.services.map((service) =>
         getServiceElements(service, rootNodeColor, isAnimated, true, true)
       );
-      return totalEventElements.flat().concat(totalServiceElements.flat());
+      const eventsWithServices = totalEventElements.flat().concat(totalServiceElements.flat());
+      // after we merge make sure all elements are unique for the diagram
+      // @ts-ignore
+      return [...new Map(eventsWithServices.map((item) => [item.id, item])).values()];
     }
 
     if (source === 'event') {
@@ -59,45 +68,19 @@ function NodeGraphBuilder({
     }
 
     return getServiceElements(data as Service, rootNodeColor, isAnimated, includeEdgeLabels, includeNodeIcons);
-  };
+  }, [data, includeEdgeLabels, includeNodeIcons, isAnimated, rootNodeColor, source]);
 
-  // Initialize graph layout
-  const isInitializedRef = useRef(false);
-  const nodes = useStoreState((state) => state.nodes);
-  const edges = useStoreState((state) => state.edges);
   const { fitView: resetView } = useZoomPanHelper();
 
-  // Calculate initial element layout
-  const graphElements = createGraphLayout(getElements(), isHorizontal);
-  const [elements, setElements] = useState(graphElements);
+  const [elements, setElements] = useState([]);
 
-  // if data changes, reset the elements
   useEffect(() => {
-    const updatedElements = createGraphLayout(getElements(), isHorizontal);
-    setElements(updatedElements);
+    const elementsForGraph = createGraphLayout(getElements(), isHorizontal);
+    setElements(elementsForGraph);
     setTimeout(() => {
       resetView();
     }, 1);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [data]);
-
-  // Rerender graph layout to get rendered width/height for nodes/edges
-  useEffect(() => {
-    if (
-      isInitializedRef.current === false &&
-      nodes.length > 0 &&
-      // eslint-disable-next-line no-underscore-dangle
-      nodes?.[0]?.__rf.width != null
-    ) {
-      // Calculate element layout
-      const updateElements = () => {
-        const updatedElements = createGraphLayout([...nodes, ...edges], isHorizontal);
-        setElements(updatedElements);
-        isInitializedRef.current = true;
-      };
-      updateElements();
-    }
-  }, [nodes, edges, isInitializedRef, isHorizontal]);
+  }, [data, getElements, isHorizontal, resetView]);
 
   // ReactFlow operations
   const onElementClick = (event, element) => window.open(element.data.link, '_self');

package/components/Mdx/NodeGraph/__tests__/__snapshots__/GraphElements.spec.ts.snap

@@ -194,7 +194,7 @@ Array [
   Object {
     "animated": true,
     "arrowHeadType": "arrowclosed",
-    "id": "epe-Service_1",
+    "id": "epe-Service_1-ev-My_Event",
     "label": "",
     "labelBgBorderRadius": 4,
     "labelBgPadding": Array [
@@ -216,7 +216,7 @@ Array [
   Object {
     "animated": true,
     "arrowHeadType": "arrowclosed",
-    "id": "epe-Service_2",
+    "id": "epe-Service_2-ev-My_Event",
     "label": "",
     "labelBgBorderRadius": 4,
     "labelBgPadding": Array [
@@ -238,7 +238,7 @@ Array [
   Object {
     "animated": true,
     "arrowHeadType": "arrowclosed",
-    "id": "epe-very_very_very_very_very_very_very_very_very_very_very_very_long_name_Service_3",
+    "id": "epe-very_very_very_very_very_very_very_very_very_very_very_very_long_name_Service_3-ev-My_Event",
     "label": "",
     "labelBgBorderRadius": 4,
     "labelBgPadding": Array [
@@ -260,7 +260,7 @@ Array [
   Object {
     "animated": true,
     "arrowHeadType": "arrowclosed",
-    "id": "ece-Service_4",
+    "id": "ece-Service_4-ev-My_Event",
     "label": "",
     "labelBgBorderRadius": 4,
     "labelBgPadding": Array [
@@ -282,7 +282,7 @@ Array [
   Object {
     "animated": true,
     "arrowHeadType": "arrowclosed",
-    "id": "ece-Service_5",
+    "id": "ece-Service_5-ev-My_Event",
     "label": "",
     "labelBgBorderRadius": 4,
     "labelBgPadding": Array [
@@ -304,7 +304,7 @@ Array [
   Object {
     "animated": true,
     "arrowHeadType": "arrowclosed",
-    "id": "ece-Service_6",
+    "id": "ece-Service_6-ev-My_Event",
     "label": "",
     "labelBgBorderRadius": 4,
     "labelBgPadding": Array [
@@ -326,7 +326,7 @@ Array [
   Object {
     "animated": true,
     "arrowHeadType": "arrowclosed",
-    "id": "ece-Service_7",
+    "id": "ece-Service_7-ev-My_Event",
     "label": "",
     "labelBgBorderRadius": 4,
     "labelBgPadding": Array [
@@ -348,7 +348,7 @@ Array [
   Object {
     "animated": true,
     "arrowHeadType": "arrowclosed",
-    "id": "ece-Service_8",
+    "id": "ece-Service_8-ev-My_Event",
     "label": "",
     "labelBgBorderRadius": 4,
     "labelBgPadding": Array [
@@ -370,7 +370,7 @@ Array [
   Object {
     "animated": true,
     "arrowHeadType": "arrowclosed",
-    "id": "ece-very.very.very.very.very.very.very.very.very.very.very.very.long.name.event.8",
+    "id": "ece-very.very.very.very.very.very.very.very.very.very.very.very.long.name.event.8-ev-My_Event",
     "label": "",
     "labelBgBorderRadius": 4,
     "labelBgPadding": Array [
@@ -453,7 +453,7 @@ Array [
   Object {
     "animated": true,
     "arrowHeadType": "arrowclosed",
-    "id": "epe-Service_1",
+    "id": "epe-Service_1-ev-My_Event",
     "label": "",
     "labelBgBorderRadius": 4,
     "labelBgPadding": Array [
@@ -475,7 +475,7 @@ Array [
   Object {
     "animated": true,
     "arrowHeadType": "arrowclosed",
-    "id": "ece-Service_2",
+    "id": "ece-Service_2-ev-My_Event",
     "label": "",
     "labelBgBorderRadius": 4,
     "labelBgPadding": Array [

package/components/Mdx/NodeGraph/__tests__/__snapshots__/GraphLayout.spec.ts.snap

@@ -17,7 +17,7 @@ Array [
     "sourcePosition": "right",
     "style": Object {
       "border": "2px solid #75d7b6",
-      "width": 150,
+      "width": undefined,
     },
     "targetPosition": "left",
     "type": "input",
@@ -37,7 +37,7 @@ Array [
     "sourcePosition": "right",
     "style": Object {
       "border": "2px solid #2563eb",
-      "width": 150,
+      "width": undefined,
     },
     "targetPosition": "left",
   },
@@ -56,7 +56,7 @@ Array [
     "sourcePosition": "right",
     "style": Object {
       "border": "2px solid #818cf8",
-      "width": 150,
+      "width": undefined,
     },
     "targetPosition": "left",
     "type": "output",

package/out/404/index.html

@@ -1 +1 @@
-<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width"/><meta charSet="utf-8"/><meta name="description" content="Discover, Explore and Document your Event Driven Architectures"/><link rel="icon" href="/favicon.ico"/><meta property="og:url" content="https://eventcatalog.dev/"/><meta property="og:type" content="website"/><meta property="og:title" content="EventCatalog"/><meta property="og:description" content="Discover, Explore and Document your Event Driven Architectures"/><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"/><title>404: This page could not be found</title><meta name="next-head-count" content="15"/><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"/><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/atom-one-light.min.css"/><link rel="preload" href="/_next/static/css/70ede87da43120f8.css" as="style"/><link rel="stylesheet" href="/_next/static/css/70ede87da43120f8.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-7adfcbd8c9cf8b5d.js" defer=""></script><script src="/_next/static/chunks/framework-d23f68ad701fe0b2.js" defer=""></script><script src="/_next/static/chunks/main-b9941e28536fdc23.js" defer=""></script><script src="/_next/static/chunks/pages/_app-2e37f6bdeff8f48f.js" defer=""></script><script src="/_next/static/chunks/pages/_error-5a714c45c50a8db4.js" defer=""></script><script src="/_next/static/zBZQzifddapIzeKavm45C/_buildManifest.js" defer=""></script><script src="/_next/static/zBZQzifddapIzeKavm45C/_ssgManifest.js" defer=""></script><script src="/_next/static/zBZQzifddapIzeKavm45C/_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="/domains/">Domains</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":"zBZQzifddapIzeKavm45C","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"/><meta name="description" content="Discover, Explore and Document your Event Driven Architectures"/><link rel="icon" href="/favicon.ico"/><meta property="og:url" content="https://eventcatalog.dev/"/><meta property="og:type" content="website"/><meta property="og:title" content="EventCatalog"/><meta property="og:description" content="Discover, Explore and Document your Event Driven Architectures"/><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"/><title>404: This page could not be found</title><meta name="next-head-count" content="15"/><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"/><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/atom-one-light.min.css"/><link rel="preload" href="/_next/static/css/0a26a4437a9215b6.css" as="style"/><link rel="stylesheet" href="/_next/static/css/0a26a4437a9215b6.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-e5e3b0fb197a3a00.js" defer=""></script><script src="/_next/static/chunks/framework-d23f68ad701fe0b2.js" defer=""></script><script src="/_next/static/chunks/main-b9941e28536fdc23.js" defer=""></script><script src="/_next/static/chunks/pages/_app-2e37f6bdeff8f48f.js" defer=""></script><script src="/_next/static/chunks/pages/_error-5a714c45c50a8db4.js" defer=""></script><script src="/_next/static/TyltMt8WoQrXvlgzfYCko/_buildManifest.js" defer=""></script><script src="/_next/static/TyltMt8WoQrXvlgzfYCko/_ssgManifest.js" defer=""></script><script src="/_next/static/TyltMt8WoQrXvlgzfYCko/_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="/domains/">Domains</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":"TyltMt8WoQrXvlgzfYCko","nextExport":true,"isFallback":false,"gip":true,"scriptLoader":[]}</script></body></html>

package/out/_next/static/{zBZQzifddapIzeKavm45C → TyltMt8WoQrXvlgzfYCko}/_buildManifest.js

@@ -1 +1 @@
-self.__BUILD_MANIFEST=function(s,e,a,c,n,i,t,d,m,o,v,f,u,r,b,k,h,j){return{__rewrites:{beforeFiles:[],afterFiles:[],fallback:[]},"/":["static/chunks/pages/index-fe1a9e09c7f51e66.js"],"/_error":["static/chunks/pages/_error-5a714c45c50a8db4.js"],"/domains":[s,"static/chunks/pages/domains-6ab78cb1bc2f4200.js"],"/domains/[domain]":[c,e,s,n,i,t,"static/chunks/pages/domains/[domain]-2b08aa35416b7fe6.js"],"/domains/[domain]/events/[name]":[a,c,d,m,o,e,s,n,v,f,i,t,u,r,"static/chunks/pages/domains/[domain]/events/[name]-a5fb5b26471e703b.js"],"/domains/[domain]/events/[name]/logs":[e,b,k,"static/chunks/pages/domains/[domain]/events/[name]/logs-9678f8d15063d3b5.js"],"/domains/[domain]/events/[name]/v/[version]":[a,c,d,m,o,e,s,n,v,f,i,t,u,r,"static/chunks/pages/domains/[domain]/events/[name]/v/[version]-a7fa6002267ccd3b.js"],"/domains/[domain]/services/[name]":[a,c,e,s,n,i,t,h,"static/chunks/pages/domains/[domain]/services/[name]-80d6d803e5466b81.js"],"/events":[a,e,s,j,"static/chunks/pages/events-691363297e733e50.js"],"/events/[name]":[a,c,d,m,o,e,s,n,v,f,i,t,u,r,"static/chunks/pages/events/[name]-d3d2a03948b8dfeb.js"],"/events/[name]/logs":[e,b,k,"static/chunks/pages/events/[name]/logs-279caf3ba628e52c.js"],"/events/[name]/v/[version]":[a,c,d,m,o,e,s,n,v,f,i,t,u,r,"static/chunks/pages/events/[name]/v/[version]-93d978734b0dc0a3.js"],"/overview":["static/chunks/pages/overview-7ada2cb9fcb9a9ea.js"],"/services":[a,e,s,j,"static/chunks/pages/services-0a099323cc1d9712.js"],"/services/[name]":[a,c,e,s,n,i,t,h,"static/chunks/pages/services/[name]-148079bb388f8c53.js"],"/users/[id]":[a,s,"static/chunks/pages/users/[id]-d1f16749cca85865.js"],"/visualiser":[c,e,s,n,i,"static/chunks/pages/visualiser-249f35d81fbd72e6.js"],sortedPages:["/","/_app","/_error","/domains","/domains/[domain]","/domains/[domain]/events/[name]","/domains/[domain]/events/[name]/logs","/domains/[domain]/events/[name]/v/[version]","/domains/[domain]/services/[name]","/events","/events/[name]","/events/[name]/logs","/events/[name]/v/[version]","/overview","/services","/services/[name]","/users/[id]","/visualiser"]}}("static/chunks/962-17a425b16c23bd0f.js","static/chunks/519-2ec6fc3cdbaa4dc2.js","static/chunks/176cb4e4-59b1695530801e16.js","static/chunks/b744740b-32af777c67e2c3ff.js","static/chunks/506-68ae644af2659950.js","static/chunks/109-c7517eb568876b36.js","static/chunks/169-b33dfdaf2847d062.js","static/chunks/1df474da-91f6061ee61707c6.js","static/chunks/7f5d3f51-83121b73403fb948.js","static/chunks/2edb282b-b8f4863366339abc.js","static/chunks/5-6380a6f543e8372a.js","static/chunks/650-7b49ecd97114e917.js","static/chunks/178-c0d21132335f7d58.js","static/css/7e14b4dede1671ad.css","static/chunks/364-0efd016d31d19995.js","static/css/5eeed9cb243ce668.css","static/chunks/585-8ff3ec10b43fcb10.js","static/chunks/274-8d503842229d0944.js"),self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB();
+self.__BUILD_MANIFEST=function(s,e,a,c,n,i,t,d,m,o,v,u,b,f,r,k,h,j){return{__rewrites:{beforeFiles:[],afterFiles:[],fallback:[]},"/":["static/chunks/pages/index-fe1a9e09c7f51e66.js"],"/_error":["static/chunks/pages/_error-5a714c45c50a8db4.js"],"/domains":[s,"static/chunks/pages/domains-6ab78cb1bc2f4200.js"],"/domains/[domain]":[c,e,s,n,i,t,"static/chunks/pages/domains/[domain]-2b08aa35416b7fe6.js"],"/domains/[domain]/events/[name]":[a,c,d,m,o,e,s,n,v,u,i,t,b,f,"static/chunks/pages/domains/[domain]/events/[name]-a5fb5b26471e703b.js"],"/domains/[domain]/events/[name]/logs":[e,r,k,"static/chunks/pages/domains/[domain]/events/[name]/logs-9678f8d15063d3b5.js"],"/domains/[domain]/events/[name]/v/[version]":[a,c,d,m,o,e,s,n,v,u,i,t,b,f,"static/chunks/pages/domains/[domain]/events/[name]/v/[version]-a7fa6002267ccd3b.js"],"/domains/[domain]/services/[name]":[a,c,e,s,n,i,t,h,"static/chunks/pages/domains/[domain]/services/[name]-80d6d803e5466b81.js"],"/events":[a,e,s,j,"static/chunks/pages/events-691363297e733e50.js"],"/events/[name]":[a,c,d,m,o,e,s,n,v,u,i,t,b,f,"static/chunks/pages/events/[name]-d3d2a03948b8dfeb.js"],"/events/[name]/logs":[e,r,k,"static/chunks/pages/events/[name]/logs-279caf3ba628e52c.js"],"/events/[name]/v/[version]":[a,c,d,m,o,e,s,n,v,u,i,t,b,f,"static/chunks/pages/events/[name]/v/[version]-93d978734b0dc0a3.js"],"/overview":["static/chunks/pages/overview-7ada2cb9fcb9a9ea.js"],"/services":[a,e,s,j,"static/chunks/pages/services-0a099323cc1d9712.js"],"/services/[name]":[a,c,e,s,n,i,t,h,"static/chunks/pages/services/[name]-148079bb388f8c53.js"],"/users/[id]":[a,s,"static/chunks/pages/users/[id]-d1f16749cca85865.js"],"/visualiser":[c,e,s,n,i,"static/chunks/pages/visualiser-5ba1bdaa135986ba.js"],sortedPages:["/","/_app","/_error","/domains","/domains/[domain]","/domains/[domain]/events/[name]","/domains/[domain]/events/[name]/logs","/domains/[domain]/events/[name]/v/[version]","/domains/[domain]/services/[name]","/events","/events/[name]","/events/[name]/logs","/events/[name]/v/[version]","/overview","/services","/services/[name]","/users/[id]","/visualiser"]}}("static/chunks/962-17a425b16c23bd0f.js","static/chunks/519-2ec6fc3cdbaa4dc2.js","static/chunks/176cb4e4-59b1695530801e16.js","static/chunks/b744740b-594b36f2f589c271.js","static/chunks/506-68ae644af2659950.js","static/chunks/109-d73be14eba8537e1.js","static/chunks/169-b33dfdaf2847d062.js","static/chunks/1df474da-91f6061ee61707c6.js","static/chunks/7f5d3f51-83121b73403fb948.js","static/chunks/2edb282b-b8f4863366339abc.js","static/chunks/5-6380a6f543e8372a.js","static/chunks/650-7b49ecd97114e917.js","static/chunks/178-c0d21132335f7d58.js","static/css/7e14b4dede1671ad.css","static/chunks/364-0efd016d31d19995.js","static/css/5eeed9cb243ce668.css","static/chunks/585-8ff3ec10b43fcb10.js","static/chunks/274-8d503842229d0944.js"),self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB();

package/out/_next/static/chunks/109-d73be14eba8537e1.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[109],{78484:function(e,t,n){n.d(t,{Z:function(){return I}});var r=n(52322),a=n(2784),o=n(39097),i=n(54064),l=n(70314),c=n(17962),u=n(61519);var s=function(e){var t=e.type,n=e.label,a="event"===t?u.bV6:c.QTo;return(0,r.jsxs)("div",{children:[(0,r.jsx)(a,{className:"h-3 w-3 text-gray-700 inline-block mr-1 -mt-0.5"}),(0,r.jsx)("span",{className:"text-gray-700",children:n})]})};function d(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function p(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function m(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"===typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),r.forEach((function(t){p(e,t,n[t])}))}return e}function f(e){return function(e){if(Array.isArray(e))return d(e)}(e)||function(e){if("undefined"!==typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||function(e,t){if(!e)return;if("string"===typeof e)return d(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(n);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return d(e,t)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}var b=(0,l.default)().publicRuntimeConfig,h=(void 0===b?{}:b).basePath,v=void 0===h?"":h,g=function(e){return 8*e.length>150?8*e.length:150},y=function(e){var t=e.id,n=e.target,r=e.source,a=e.label,o=e.isAnimated,l=void 0===o||o;return{id:t,target:n,source:r,type:"smoothstep",arrowHeadType:i.f8.ArrowClosed,animated:l,label:a,labelBgPadding:[8,4],labelBgBorderRadius:4,labelStyle:{fontSize:"6px"},labelBgStyle:{fill:"white",color:"#fff",fillOpacity:.5}}},x=function(e){var t=e.name,n=e.label,r=e.type,a=e.maxWidth,o=g(n),i=function(e,t){return""!==v?"".concat(v,"/").concat(t,"/").concat(e):"/".concat(t,"/").concat(e)}(t,"service"===r?"services":"events");return{label:n,link:i,width:o,maxWidth:a}},w=function(e){var t=e.type,n=e.label;return e.includeIcon?(0,r.jsx)(s,{type:t,label:n}):n},j=function(e){var t,n,r=e.name,a=e.producerNames,o=e.consumerNames,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"#2563eb",l=!(arguments.length>2&&void 0!==arguments[2])||arguments[2],c=arguments.length>3&&void 0!==arguments[3]&&arguments[3],u=arguments.length>4&&void 0!==arguments[4]&&arguments[4],s={x:0,y:0},d="#818cf8",p="#75d7b6",b={fontSize:u?"8px":"auto"},h=a.map((function(e){return g(e)})),v=(t=Math).max.apply(t,f(h)),j=o.map((function(e){return g(e)})),A=(n=Math).max.apply(n,f(j)),_="ev-".concat(r.replace(/ /g,"_")),S=g(r),N=a.map((function(e){return{label:e,id:"pr-".concat(e.replace(/ /g,"_"))}})),k=o.map((function(e){return{label:e,id:"co-".concat(e.replace(/ /g,"_"))}})),O=N.map((function(e){var t=e.label,n=e.id,r=g(t),a=v-r,o=0!==a?r-a:v,i=w({type:"service",label:t,includeIcon:u});return{id:n,data:x({name:t,label:i,type:"service",maxWidth:o}),style:m({border:"2px solid ".concat(p),width:r},b),type:"input",position:s}})),I=k.map((function(e){var t=e.id,n=e.label,r=g(n),a=w({type:"service",label:n,includeIcon:u});return{id:t,data:x({name:n,label:a,type:"service",maxWidth:A}),style:m({border:"2px solid ".concat(d),width:r},b),type:"output",position:s}})),C={id:_,data:x({name:r,label:w({type:"event",label:r,includeIcon:u}),type:"event",maxWidth:S}),style:m({border:"2px solid ".concat(i),width:S},b),position:s},E=N.map((function(e){var t=e.id,n=e.label;return y({id:"epe-".concat(n.replace(/ /g,"_"),"-").concat(_),source:t,target:_,isAnimated:l,label:c?"publishes":""})})),z=k.map((function(e){var t=e.id,n=e.label;return y({id:"ece-".concat(n.replace(/ /g,"_"),"-").concat(_),target:t,source:_,isAnimated:l,label:c?"subscribed by":""})})),L=f(O).concat([C],f(I),f(E),f(z));return L},A=function(e){var t,n,r=e.publishes,a=e.subscribes,o=e.name,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"#2563eb",l=!(arguments.length>2&&void 0!==arguments[2])||arguments[2],c=arguments.length>3&&void 0!==arguments[3]&&arguments[3],u=arguments.length>4&&void 0!==arguments[4]&&arguments[4],s={x:0,y:0},d="#818cf8",p="#75d7b6",b={fontSize:u?"8px":"auto"},h=r.map((function(e){return g(e.name)})),v=(t=Math).max.apply(t,f(h)),j=a.map((function(e){return g(e.name)})),A=(n=Math).max.apply(n,f(j)),_="ser-".concat(o.replace(/ /g,"_")),S=r.map((function(e){var t=g(e.name),n=w({type:"event",label:e.name,includeIcon:u});return{id:"pub-".concat(e.name.replace(/ /g,"_")),data:x({name:e.name,label:n,type:"event",maxWidth:v}),style:m({border:"2px solid ".concat(d),width:t},b),type:"output",position:s}})),N=a.map((function(e){var t=g(e.name),n=A-t,r=0!==n?t-n:A,a=w({type:"event",label:e.name,includeIcon:u});return{id:"sub-".concat(e.name.replace(/ /g,"_")),data:x(m({name:e.name,label:a,type:"event",maxWidth:r},b)),style:m({border:"2px solid ".concat(p),width:t},b),type:"input",position:s}})),k={id:_,data:x({name:o,label:w({type:"service",label:o,includeIcon:u}),type:"service",maxWidth:g(o)}),style:m({border:"2px solid ".concat(i),width:g(o)},b),position:s},O=r.map((function(e){return y({id:"ecp-".concat(e.name.replace(/ /g,"_")),source:_,target:"pub-".concat(e.name.replace(/ /g,"_")),isAnimated:l,label:c?"publishes":""})})),I=a.map((function(e){return y({id:"esc-".concat(e.name.replace(/ /g,"_")),target:_,source:"sub-".concat(e.name.replace(/ /g,"_")),isAnimated:l,label:c?"subscribed by":""})})),C=f(N).concat([k],f(S),f(O),f(I));return C},_=n(46506),S=n.n(_);function N(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function k(e){return function(e){if(Array.isArray(e))return N(e)}(e)||function(e){if("undefined"!==typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||function(e,t){if(!e)return;if("string"===typeof e)return N(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(n);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return N(e,t)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function O(e){var t=e.data,n=e.source,o=e.rootNodeColor,l=e.maxZoom,c=void 0===l?10:l,u=e.isAnimated,s=void 0===u||u,d=e.fitView,p=void 0===d||d,m=e.zoomOnScroll,f=void 0!==m&&m,b=e.isDraggable,h=void 0!==b&&b,v=e.isHorizontal,g=void 0===v||v,y=e.includeBackground,x=void 0!==y&&y,w=e.includeEdgeLabels,_=void 0!==w&&w,N=e.includeNodeIcons,O=e.title,I=e.subtitle,C=(0,a.useCallback)((function(){if("domain"===n||"all"===n){var e=t,r=e.events.map((function(e){return j(e,o,s,!0,!0)})),a=e.services.map((function(e){return A(e,o,s,!0,!0)})),i=r.flat().concat(a.flat());return k(new Map(i.map((function(e){return[e.id,e]}))).values())}return"event"===n?j(t,o,s,_,N):A(t,o,s,_,N)}),[t,_,N,s,o,n]),E=(0,i.Hs)().fitView,z=(0,a.useState)([]),L=z[0],M=z[1];(0,a.useEffect)((function(){var e=function(e,t){var n=new(S().graphlib.Graph);return n.setDefaultEdgeLabel((function(){return{}})),n.setGraph({rankdir:"LR",ranksep:96,nodesep:32}),e.forEach((function(e){if((0,i.UG)(e)){var t,r,a,o,l=(null===(t=e.__rf)||void 0===t?void 0:t.width)?null===(r=e.__rf)||void 0===r?void 0:r.width:null===(a=e.data)||void 0===a?void 0:a.width;n.setNode(e.id,{width:l||150,height:(null===(o=e.__rf)||void 0===o?void 0:o.height)||36})}else n.setEdge(e.source,e.target)})),S().layout(n),e.map((function(e){if((0,i.UG)(e)){var r,a=n.node(e.id);e.targetPosition=t?i.Ly.Left:i.Ly.Top,e.sourcePosition=t?i.Ly.Right:i.Ly.Bottom,e.position={x:24+a.x-((null===e||void 0===e||null===(r=e.data)||void 0===r?void 0:r.maxWidth)||a.width)/2,y:a.y-a.height/2},e.style.width&&(e.style.width=void 0)}return e}))}(C(),g);M(e),setTimeout((function(){E()}),1)}),[t,C,g,E]);var W=(0,a.useCallback)((function(e){p&&e.fitView()}),[p]);return(0,r.jsxs)(i.ZP,{elements:L,onLoad:W,onElementClick:function(e,t){return window.open(t.data.link,"_self")},nodesDraggable:h,zoomOnScroll:f,maxZoom:c,children:[O&&(0,r.jsxs)("div",{className:"absolute top-4 right-4 bg-white z-10 text-lg px-4 py-2 space-x-2",children:[(0,r.jsx)("span",{className:" font-bold",children:O}),I&&(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("span",{className:"text-gray-200",children:"|"}),(0,r.jsx)("span",{className:"font-light",children:I})]})]}),(0,r.jsx)(i.ZX,{className:"block absolute top-5 react-flow__controls-no-shadow"}),x&&(0,r.jsx)(i.Aq,{color:"#c1c1c1",gap:8})]})}var I=function(e){var t=e.data,n=e.source,a=e.rootNodeColor,l=e.maxHeight,c=e.maxZoom,u=e.fitView,s=e.zoomOnScroll,d=e.isAnimated,p=e.isDraggable,m=e.isHorizontal,f=e.includeBackground,b=e.renderWithBorder,h=void 0===b||b,v=e.title,g=e.subtitle,y=e.includeEdgeLabels,x=e.includeNodeIcons,w=l||function(e,t){var n=0;return"event"===t&&(n=68*Math.max(e.producerNames.length,e.consumerNames.length)),"service"===t&&(n=68*Math.max(e.publishes.length,e.subscribes.length)),Math.max(300,n)}(t,n);return(0,r.jsxs)("div",{className:"node-graph w-full h-screen ".concat(h?"border-dashed border-2 border-slate-300":""),style:{height:w},children:[(0,r.jsx)(i.tV,{children:(0,r.jsx)(O,{source:n,data:t,rootNodeColor:a,maxZoom:c,fitView:u,includeBackground:f,zoomOnScroll:s,isAnimated:d,isDraggable:p,isHorizontal:m,includeEdgeLabels:y,includeNodeIcons:x,title:v,subtitle:g})}),(0,r.jsx)(o.default,{href:"/visualiser?type=".concat(n,"&name=").concat(t.name),children:(0,r.jsx)("a",{className:"block text-right underline text-xs mt-4",children:"Open in Visualiser \u2192"})})]})}},46892:function(e,t,n){function r(e){for(var t=0,n=0;n<e.length;n++)t=e.charCodeAt(n)+((t<<5)-t);for(var r="#",a=0;a<3;a++){r+="00".concat((t>>8*a&255).toString(16)).substr(-2)}return r}n.d(t,{Z:function(){return r}})}}]);