@eventcatalog/core 0.1.12 → 0.1.16

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @eventcatalog/core
 
+## 0.1.16
+
+### Patch Changes
+
+- [`2d10847`](https://github.com/boyney123/eventcatalog/commit/2d108470af945e1cec59c114627878c56d7385dd) [#186](https://github.com/boyney123/eventcatalog/pull/186) Thanks [@boyney123](https://github.com/boyney123)! - feat: added new visualiser feature
+
+## 0.1.15
+
+### Patch Changes
+
+- [`60bea4d`](https://github.com/boyney123/eventcatalog/commit/60bea4db471bf3c63a936b86ce7ee549e73972a6) [#182](https://github.com/boyney123/eventcatalog/pull/182) Thanks [@thim81](https://github.com/thim81)! - fix: optional title for all MDX components
+
+* [`bf5bab4`](https://github.com/boyney123/eventcatalog/commit/bf5bab44b9be92c5888c6548694c42d1fa83a678) [#184](https://github.com/boyney123/eventcatalog/pull/184) Thanks [@thim81](https://github.com/thim81)! - fix: increase node width for NodeGraph
+
+## 0.1.14
+
+### Patch Changes
+
+- [`1558d17`](https://github.com/boyney123/eventcatalog/commit/1558d17b1c9f925c8e74d22b57edbfc4195a73a6) [#178](https://github.com/boyney123/eventcatalog/pull/178) Thanks [@boyney123](https://github.com/boyney123)! - feat: added better code example component
+
+## 0.1.13
+
+### Patch Changes
+
+- [`ca01bef`](https://github.com/boyney123/eventcatalog/commit/ca01bef1659b2c364210a86e0f9e916f6c1fbaa4) [#166](https://github.com/boyney123/eventcatalog/pull/166) Thanks [@thim81](https://github.com/thim81)! - feat: new nodegraph component to render services and events
+
 ## 0.1.12
 
 ### Patch Changes

package/components/Header.tsx

@@ -6,6 +6,7 @@ import { useConfig } from '@/hooks/EventCatalog';
 const navigation = [
   { name: 'Events', href: '/events' },
   { name: 'Services', href: '/services' },
+  { name: 'Visualiser', href: '/visualiser' },
   { name: '3D Node Graph', href: '/overview' },
 ];
 

package/components/Mdx/Examples.tsx

@@ -33,33 +33,33 @@ function Examples({ title = 'Examples', description, examples = [], showLineNumb
         {description && <p className="text-md font-medium text-gray-700">{description}</p>}
 
         <div>
-          <nav className="-mb-px flex" aria-label="Tabs">
-            {tabs.map((tab) => {
-              const isSelected = tab.name === selectedTab.name;
-              return (
-                <button
-                  type="button"
-                  key={tab.name}
-                  onClick={() => handleTabSelection(tab)}
-                  className={classNames(
-                    isSelected
-                      ? 'border-green-500 text-green-600 selected'
-                      : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300',
-                    'whitespace-nowrap py-4 border-b-2 font-medium text-sm important:no-underline px-8 hover:bg-gray-50 transition'
-                  )}
-                  aria-current={isSelected ? 'page' : undefined}
-                >
-                  {tab.name}
-                  <span className="block text-xs mt-">({tab.langugage})</span>
-                </button>
-              );
-            })}
-          </nav>
-          <div className="my-4">
-            <SyntaxHighlighter language={selectedTab.langugage} showLineNumbers={showLineNumbers}>
-              {selectedTab.content}
-            </SyntaxHighlighter>
-            {selectedTab.langugage && <span className="-mb-2 block text-xs text-right font-bold">{selectedTab.name}</span>}
+          <div className="col-span-5">
+            <nav className="-mb-2 flex bg-gray-900" aria-label="Tabs">
+              {tabs.map((tab) => {
+                const isSelected = tab.name === selectedTab.name;
+                return (
+                  <button
+                    type="button"
+                    key={tab.name}
+                    onClick={() => handleTabSelection(tab)}
+                    className={classNames(
+                      isSelected
+                        ? 'border-yellow-300 text-yellow-300 selected bg-gray-700'
+                        : 'border-transparent text-gray-500 hover:text-gray-400 bg-gray-800  ',
+                      'whitespace-nowrap py-3 border-b-2 font-medium important:no-underline px-6 text-xs  transition '
+                    )}
+                    aria-current={isSelected ? 'page' : undefined}
+                  >
+                    {tab.name}
+                  </button>
+                );
+              })}
+            </nav>
+            <div>
+              <SyntaxHighlighter language={selectedTab.langugage} showLineNumbers={showLineNumbers}>
+                {selectedTab.content}
+              </SyntaxHighlighter>
+            </div>
           </div>
         </div>
       </div>

package/components/Mdx/NodeGraph/GraphElements.tsx

@@ -0,0 +1,238 @@
+import { ArrowHeadType, XYPosition, Node, Edge } from 'react-flow-renderer';
+import getConfig from 'next/config';
+import type { Event, Service } from '@eventcatalog/types';
+import CustomNode from './Node';
+
+const { publicRuntimeConfig: { basePath = '' } = {} } = getConfig();
+
+const MIN_NODE_WIDTH = 150;
+type NODE_TYPES = 'service' | 'event';
+
+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 }): Edge => ({
+  id,
+  target,
+  source,
+  type: 'smoothstep',
+  arrowHeadType: 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 }: { name: string; label: string; type: NODE_TYPES; maxWidth?: number }) => {
+  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 }: { type: NODE_TYPES; label: any; includeIcon: boolean }) => {
+  if (!includeIcon) return label;
+  return <CustomNode 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
+ */
+export const getEventElements = (
+  { name: eventName, producers: eventProducers, consumers: eventConsumers }: Event,
+  rootNodeColor = '#2563eb',
+  isAnimated = true,
+  includeLabels = false,
+  includeNodeIcons = false
+) => {
+  const position: XYPosition = { 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: Node[] = 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: Node[] = 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: Node = {
+    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: Edge[] = producers.map(({ id, label }) =>
+    buildNodeEdge({
+      id: `epe-${label.replace(/ /g, '_')}`,
+      source: id,
+      target: eventNameAsNodeID,
+      isAnimated,
+      label: includeLabels ? 'publishes' : '',
+    })
+  );
+  const consumersEdges: Edge[] = 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: (Node | Edge)[] = [...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
+ */
+export const getServiceElements = (
+  { publishes, subscribes, name: serviceName }: Service,
+  rootNodeColor = '#2563eb',
+  isAnimated = true,
+  includeEdgeLabels = false,
+  includeNodeIcons = false
+) => {
+  const position: XYPosition = { 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: Node[] = 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: Node[] = 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: Node = {
+    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: Edge[] = publishes.map((node) =>
+    buildNodeEdge({
+      id: `ecp-${node.name.replace(/ /g, '_')}`,
+      source: serviceNameAsNodeID,
+      target: `pub-${node.name.replace(/ /g, '_')}`,
+      isAnimated,
+      label: includeEdgeLabels ? 'publishes' : '',
+    })
+  );
+
+  const subscribesEdges: Edge[] = 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: (Node | Edge)[] = [...subscribesNodes, serviceNode, ...publishesNodes, ...publishesEdges, ...subscribesEdges];
+  return elements;
+};

package/components/Mdx/NodeGraph/GraphLayout.ts

@@ -0,0 +1,57 @@
+import { isNode, Elements, Position } from 'react-flow-renderer';
+import dagre from 'dagre';
+
+const nodeDefaultWidth = 150;
+const nodeDefaultHeight = 36;
+const offset = 48;
+const verticalOffset = offset / 1.5;
+
+export default function createGraphLayout(elements: Elements, isHorizontal: boolean): Elements {
+  const dagreGraph = new dagre.graphlib.Graph();
+
+  dagreGraph.setDefaultEdgeLabel(() => ({}));
+  dagreGraph.setGraph({ rankdir: 'LR', ranksep: offset * 2, nodesep: verticalOffset });
+
+  elements.forEach((element) => {
+    if (isNode(element)) {
+      // eslint-disable-next-line no-underscore-dangle
+      const nodeWidth = element.__rf?.width ? element.__rf?.width : element.data?.width;
+      dagreGraph.setNode(element.id, {
+        width: nodeWidth || nodeDefaultWidth,
+        // eslint-disable-next-line no-underscore-dangle
+        height: element.__rf?.height || nodeDefaultHeight,
+      });
+    } else {
+      dagreGraph.setEdge(element.source, element.target);
+    }
+  });
+
+  // Calculate the layout, to get the node positions with their widths and heights
+  dagre.layout(dagreGraph);
+
+  return elements.map((element) => {
+    if (isNode(element)) {
+      const node = dagreGraph.node(element.id);
+      element.targetPosition = isHorizontal ? Position.Left : Position.Top;
+      element.sourcePosition = isHorizontal ? Position.Right : Position.Bottom;
+      element.position = {
+        x: offset / 2 + node.x - (element?.data?.maxWidth || node.width) / 2,
+        y: node.y - node.height / 2,
+      };
+    }
+    return element;
+  });
+}
+
+// Helper - ReactFlow canvas height calculator
+export const calcCanvasHeight = (data, type): number => {
+  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);
+};

package/components/Mdx/NodeGraph/Node.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ServerIcon } from '@heroicons/react/outline/';
+import { MailIcon } from '@heroicons/react/solid/';
+
+function Node({ type, label }: any) {
+  const Icon = type === 'event' ? MailIcon : ServerIcon;
+  return (
+    <div>
+      <Icon className="h-3 w-3 text-gray-700 inline-block mr-1 -mt-0.5" />
+      <span className="text-gray-700">{label}</span>
+    </div>
+  );
+}
+
+export default Node;

package/components/Mdx/NodeGraph/NodeGraph.tsx

@@ -0,0 +1,180 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import Link from 'next/link';
+import ReactFlow, { Controls, ReactFlowProvider, useStoreState, Background, useZoomPanHelper } from 'react-flow-renderer';
+import { Event, Service } from '@eventcatalog/types';
+import { getEventElements, getServiceElements } from './GraphElements';
+import createGraphLayout, { calcCanvasHeight } from './GraphLayout';
+
+interface NodeGraphBuilderProps {
+  data: Event | Service;
+  source: 'event' | 'service';
+  title?: string;
+  subtitle?: string;
+  rootNodeColor?: string;
+  maxZoom?: number;
+  fitView?: boolean;
+  zoomOnScroll?: boolean;
+  isAnimated?: boolean;
+  isDraggable?: boolean;
+  isHorizontal?: boolean;
+  includeBackground?: boolean;
+  includeEdgeLabels?: boolean;
+  includeNodeIcons?: boolean;
+}
+
+interface NodeGraphProps extends NodeGraphBuilderProps {
+  maxHeight?: number | string;
+  renderWithBorder?: boolean;
+}
+
+// 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,
+}: NodeGraphBuilderProps) {
+  const getElements = () => {
+    if (source === 'event') {
+      return getEventElements(data as Event, rootNodeColor, isAnimated, includeEdgeLabels, includeNodeIcons);
+    }
+    return getServiceElements(data as Service, rootNodeColor, isAnimated, includeEdgeLabels, includeNodeIcons);
+  };
+
+  // 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);
+
+  // if data changes, reset the elements
+  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
+  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]);
+
+  // ReactFlow operations
+  const onElementClick = (event, element) => window.open(element.data.link, '_self');
+  const onLoad = useCallback(
+    (reactFlowInstance) => {
+      if (fitView) {
+        reactFlowInstance.fitView();
+      }
+    },
+    [fitView]
+  );
+
+  return (
+    <ReactFlow
+      elements={elements}
+      onLoad={onLoad}
+      onElementClick={onElementClick}
+      nodesDraggable={isDraggable}
+      zoomOnScroll={zoomOnScroll}
+      maxZoom={maxZoom}
+    >
+      {title && (
+        <div className="absolute top-4 right-4 bg-white z-10 text-lg px-4 py-2 space-x-2">
+          <span className=" font-bold">{title}</span>
+          {subtitle && (
+            <>
+              <span className="text-gray-200">|</span>
+              <span className="font-light">{subtitle}</span>
+            </>
+          )}
+        </div>
+      )}
+      <Controls className="block absolute top-5 react-flow__controls-no-shadow" />
+      {includeBackground && <Background color="#c1c1c1" gap={8} />}
+    </ReactFlow>
+  );
+}
+
+// NodeGraph wrapping NodeGraphBuilder Component
+function NodeGraph({
+  data,
+  source,
+  rootNodeColor,
+  maxHeight,
+  maxZoom,
+  fitView,
+  zoomOnScroll,
+  isAnimated,
+  isDraggable,
+  isHorizontal,
+  includeBackground,
+  renderWithBorder = true,
+  title,
+  subtitle,
+  includeEdgeLabels,
+  includeNodeIcons,
+}: NodeGraphProps) {
+  // Set dynamic height of node graph
+  const dynamicHeight = maxHeight || calcCanvasHeight(data, source);
+
+  const borderClasses = `border-dashed border-2 border-slate-300`;
+
+  return (
+    <div className={`node-graph w-full h-screen ${renderWithBorder ? borderClasses : ''}`} style={{ height: dynamicHeight }}>
+      <ReactFlowProvider>
+        <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}
+        />
+      </ReactFlowProvider>
+      <Link href={`/visualiser?type=${source}&name=${data.name}`}>
+        <a className="block text-right  underline text-xs mt-4">Open in Visualiser &rarr;</a>
+      </Link>
+    </div>
+  );
+}
+
+export default NodeGraph;