@eventcatalog/core 0.1.14 → 0.1.18

package/.next/server/chunks/484.js

@@ -0,0 +1,572 @@
+"use strict";
+exports.id = 484;
+exports.ids = [484];
+exports.modules = {
+
+/***/ 8484:
+/***/ ((__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: ../../node_modules/next/link.js
+var next_link = __webpack_require__(9097);
+// 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_);
+// EXTERNAL MODULE: external "@heroicons/react/outline/"
+var _ = __webpack_require__(535);
+// EXTERNAL MODULE: external "@heroicons/react/solid/"
+var solid_ = __webpack_require__(9464);
+;// CONCATENATED MODULE: ./components/Mdx/NodeGraph/Node.tsx
+
+
+
+
+function Node({ type , label  }) {
+    const Icon = type === 'event' ? solid_.MailIcon : _.ServerIcon;
+    return(/*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", {
+        children: [
+            /*#__PURE__*/ jsx_runtime_.jsx(Icon, {
+                className: "h-3 w-3 text-gray-700 inline-block mr-1 -mt-0.5"
+            }),
+            /*#__PURE__*/ jsx_runtime_.jsx("span", {
+                className: "text-gray-700",
+                children: label
+            })
+        ]
+    }));
+}
+/* harmony default export */ const NodeGraph_Node = (Node);
+
+;// CONCATENATED MODULE: ./components/Mdx/NodeGraph/GraphElements.tsx
+
+
+
+
+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 * 8 > MIN_NODE_WIDTH ? value.length * 8 : MIN_NODE_WIDTH
+;
+const buildNodeEdge = ({ id , target , source , label , isAnimated =true  })=>({
+        id,
+        target,
+        source,
+        type: 'smoothstep',
+        arrowHeadType: external_react_flow_renderer_.ArrowHeadType.ArrowClosed,
+        animated: isAnimated,
+        label,
+        labelBgPadding: [
+            8,
+            4
+        ],
+        labelBgBorderRadius: 4,
+        labelStyle: {
+            fontSize: '6px'
+        },
+        labelBgStyle: {
+            fill: 'white',
+            color: '#fff',
+            fillOpacity: 0.5
+        }
+    })
+;
+const buildNodeData = ({ name , label , type , maxWidth  })=>{
+    const width = calcWidth(label);
+    const linkType = type === 'service' ? 'services' : 'events';
+    const link = generateLink(name, linkType);
+    return {
+        label,
+        link,
+        width,
+        maxWidth
+    };
+};
+const getNodeLabel = ({ type , label , includeIcon  })=>{
+    if (!includeIcon) return label;
+    return(/*#__PURE__*/ jsx_runtime_.jsx(NodeGraph_Node, {
+        type: type,
+        label: label
+    }));
+};
+/**
+ * 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, includeLabels = false, includeNodeIcons = false)=>{
+    const position = {
+        x: 0,
+        y: 0
+    };
+    const consumerColor = '#818cf8';
+    const producerColor = '#75d7b6';
+    const nodeStyles = {
+        fontSize: includeNodeIcons ? '8px' : 'auto'
+    };
+    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;
+        const labelToRender = getNodeLabel({
+            type: 'service',
+            label,
+            includeIcon: includeNodeIcons
+        });
+        return {
+            id,
+            data: buildNodeData({
+                name: label,
+                label: labelToRender,
+                type: 'service',
+                maxWidth: nodeMaxWidth
+            }),
+            style: {
+                border: `2px solid ${producerColor}`,
+                width: nodeWidth,
+                ...nodeStyles
+            },
+            type: 'input',
+            position
+        };
+    });
+    const consumersNodes = consumers.map(({ id , label  })=>{
+        const width = calcWidth(label);
+        const labelToRender = getNodeLabel({
+            type: 'service',
+            label,
+            includeIcon: includeNodeIcons
+        });
+        return {
+            id,
+            data: buildNodeData({
+                name: label,
+                label: labelToRender,
+                type: 'service',
+                maxWidth: maxConsumersWidth
+            }),
+            style: {
+                border: `2px solid ${consumerColor}`,
+                width,
+                ...nodeStyles
+            },
+            type: 'output',
+            position
+        };
+    });
+    const eventNode = {
+        id: eventNameAsNodeID,
+        data: buildNodeData({
+            name: eventName,
+            label: getNodeLabel({
+                type: 'event',
+                label: eventName,
+                includeIcon: includeNodeIcons
+            }),
+            type: 'event',
+            maxWidth: eventNodeWidth
+        }),
+        style: {
+            border: `2px solid ${rootNodeColor}`,
+            width: eventNodeWidth,
+            ...nodeStyles
+        },
+        position
+    };
+    // Build connections
+    const producersEdges = producers.map(({ id , label  })=>buildNodeEdge({
+            id: `epe-${label.replace(/ /g, '_')}`,
+            source: id,
+            target: eventNameAsNodeID,
+            isAnimated,
+            label: includeLabels ? 'publishes' : ''
+        })
+    );
+    const consumersEdges = consumers.map(({ id , label  })=>buildNodeEdge({
+            id: `ece-${label.replace(/ /g, '_')}`,
+            target: id,
+            source: eventNameAsNodeID,
+            isAnimated,
+            label: includeLabels ? 'subscribed by' : ''
+        })
+    );
+    // 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, includeEdgeLabels = false, includeNodeIcons = false)=>{
+    const position = {
+        x: 0,
+        y: 0
+    };
+    const publishColor = '#818cf8';
+    const subscribeColor = '#75d7b6';
+    const nodeStyles = {
+        fontSize: includeNodeIcons ? '8px' : 'auto'
+    };
+    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);
+        const labelToRender = getNodeLabel({
+            type: 'event',
+            label: node.name,
+            includeIcon: includeNodeIcons
+        });
+        return {
+            id: `pub-${node.name.replace(/ /g, '_')}`,
+            data: buildNodeData({
+                name: node.name,
+                label: labelToRender,
+                type: 'event',
+                maxWidth: maxPublishesWidth
+            }),
+            style: {
+                border: `2px solid ${publishColor}`,
+                width: nodeWidth,
+                ...nodeStyles
+            },
+            type: 'output',
+            position
+        };
+    });
+    const subscribesNodes = subscribes.map((node)=>{
+        const nodeWidth = calcWidth(node.name);
+        const diff = maxSubscribesWidth - nodeWidth;
+        const nodeMaxWidth = diff !== 0 ? nodeWidth - diff : maxSubscribesWidth;
+        const labelToRender = getNodeLabel({
+            type: 'event',
+            label: node.name,
+            includeIcon: includeNodeIcons
+        });
+        return {
+            id: `sub-${node.name.replace(/ /g, '_')}`,
+            data: buildNodeData({
+                name: node.name,
+                label: labelToRender,
+                type: 'event',
+                maxWidth: nodeMaxWidth,
+                ...nodeStyles
+            }),
+            style: {
+                border: `2px solid ${subscribeColor}`,
+                width: nodeWidth,
+                ...nodeStyles
+            },
+            type: 'input',
+            position
+        };
+    });
+    const serviceNode = {
+        id: serviceNameAsNodeID,
+        data: buildNodeData({
+            name: serviceName,
+            label: getNodeLabel({
+                type: 'service',
+                label: serviceName,
+                includeIcon: includeNodeIcons
+            }),
+            type: 'service',
+            maxWidth: calcWidth(serviceName)
+        }),
+        style: {
+            border: `2px solid ${rootNodeColor}`,
+            width: calcWidth(serviceName),
+            ...nodeStyles
+        },
+        position
+    };
+    // Build connections
+    const publishesEdges = publishes.map((node)=>buildNodeEdge({
+            id: `ecp-${node.name.replace(/ /g, '_')}`,
+            source: serviceNameAsNodeID,
+            target: `pub-${node.name.replace(/ /g, '_')}`,
+            isAnimated,
+            label: includeEdgeLabels ? 'publishes' : ''
+        })
+    );
+    const subscribesEdges = subscribes.map((node)=>buildNodeEdge({
+            id: `esc-${node.name.replace(/ /g, '_')}`,
+            target: serviceNameAsNodeID,
+            source: `sub-${node.name.replace(/ /g, '_')}`,
+            isAnimated,
+            label: includeEdgeLabels ? 'subscribed by' : ''
+        })
+    );
+    // 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 , includeBackground =false , includeEdgeLabels =false , includeNodeIcons , title , subtitle  }) {
+    const getElements = ()=>{
+        if (source === 'event') {
+            return getEventElements(data, rootNodeColor, isAnimated, includeEdgeLabels, includeNodeIcons);
+        }
+        return getServiceElements(data, rootNodeColor, isAnimated, includeEdgeLabels, includeNodeIcons);
+    };
+    // 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
+    );
+    const { fitView: resetView  } = (0,external_react_flow_renderer_.useZoomPanHelper)();
+    // Calculate initial element layout
+    const graphElements = createGraphLayout(getElements(), isHorizontal);
+    const { 0: elements , 1: setElements  } = (0,external_react_.useState)(graphElements);
+    // if data changes, reset the elements
+    (0,external_react_.useEffect)(()=>{
+        const updatedElements = createGraphLayout(getElements(), isHorizontal);
+        setElements(updatedElements);
+        setTimeout(()=>{
+            resetView();
+        }, 1);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        data
+    ]);
+    // 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__*/ (0,jsx_runtime_.jsxs)((external_react_flow_renderer_default()), {
+        elements: elements,
+        onLoad: onLoad,
+        onElementClick: onElementClick,
+        nodesDraggable: isDraggable,
+        zoomOnScroll: zoomOnScroll,
+        maxZoom: maxZoom,
+        children: [
+            title && /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", {
+                className: "absolute top-4 right-4 bg-white z-10 text-lg px-4 py-2 space-x-2",
+                children: [
+                    /*#__PURE__*/ jsx_runtime_.jsx("span", {
+                        className: " font-bold",
+                        children: title
+                    }),
+                    subtitle && /*#__PURE__*/ (0,jsx_runtime_.jsxs)(jsx_runtime_.Fragment, {
+                        children: [
+                            /*#__PURE__*/ jsx_runtime_.jsx("span", {
+                                className: "text-gray-200",
+                                children: "|"
+                            }),
+                            /*#__PURE__*/ jsx_runtime_.jsx("span", {
+                                className: "font-light",
+                                children: subtitle
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx_runtime_.jsx(external_react_flow_renderer_.Controls, {
+                className: "block absolute top-5 react-flow__controls-no-shadow"
+            }),
+            includeBackground && /*#__PURE__*/ jsx_runtime_.jsx(external_react_flow_renderer_.Background, {
+                color: "#c1c1c1",
+                gap: 8
+            })
+        ]
+    }));
+}
+// NodeGraph wrapping NodeGraphBuilder Component
+function NodeGraph({ data , source , rootNodeColor , maxHeight , maxZoom , fitView , zoomOnScroll , isAnimated , isDraggable , isHorizontal , includeBackground , renderWithBorder =true , title , subtitle , includeEdgeLabels , includeNodeIcons  }) {
+    // Set dynamic height of node graph
+    const dynamicHeight = maxHeight || calcCanvasHeight(data, source);
+    const borderClasses = `border-dashed border-2 border-slate-300`;
+    return(/*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", {
+        className: `node-graph w-full h-screen ${renderWithBorder ? borderClasses : ''}`,
+        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,
+                    includeBackground: includeBackground,
+                    zoomOnScroll: zoomOnScroll,
+                    isAnimated: isAnimated,
+                    isDraggable: isDraggable,
+                    isHorizontal: isHorizontal,
+                    includeEdgeLabels: includeEdgeLabels,
+                    includeNodeIcons: includeNodeIcons,
+                    title: title,
+                    subtitle: subtitle
+                })
+            }),
+            /*#__PURE__*/ jsx_runtime_.jsx(next_link["default"], {
+                href: `/visualiser?type=${source}&name=${data.name}`,
+                children: /*#__PURE__*/ jsx_runtime_.jsx("a", {
+                    className: "block text-right underline text-xs mt-4",
+                    children: "Open in Visualiser →"
+                })
+            })
+        ]
+    }));
+}
+/* harmony default export */ const NodeGraph_NodeGraph = (NodeGraph);
+
+
+/***/ })
+
+};
+;