@eventcatalog/core 0.1.13 → 0.1.17

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @eventcatalog/core
 
+## 0.1.17
+
+### Patch Changes
+
+- [`d57e67b`](https://github.com/boyney123/eventcatalog/commit/d57e67bf38be9391841b3c6dee6ab360b2eb1325) [#188](https://github.com/boyney123/eventcatalog/pull/188) Thanks [@boyney123](https://github.com/boyney123)! - fixing visualiser for mobile devices
+
+## 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

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.ts → GraphElements.tsx}

@@ -1,29 +1,42 @@
 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 * 7 > MIN_NODE_WIDTH ? value.length * 7 : MIN_NODE_WIDTH);
+const calcWidth = (value) => (value.length * 8 > MIN_NODE_WIDTH ? value.length * 8 : MIN_NODE_WIDTH);
 
-const buildNodeEdge = ({ id, target, source, isAnimated = true }) => ({
+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 = ({ label, type, maxWidth }: { label: string; type: 'service' | 'event'; maxWidth?: number }) => {
+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(label, linkType);
+  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
@@ -33,12 +46,17 @@ const buildNodeData = ({ label, type, maxWidth }: { label: string; type: 'servic
 export const getEventElements = (
   { name: eventName, producers: eventProducers, consumers: eventConsumers }: Event,
   rootNodeColor = '#2563eb',
-  isAnimated = true
+  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);
@@ -56,40 +74,61 @@ export const getEventElements = (
     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({ label, type: 'service', maxWidth: nodeMaxWidth }),
-      style: { border: `2px solid ${producerColor}`, width: nodeWidth },
+      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({ label, type: 'service', maxWidth: maxConsumersWidth }),
-      style: { border: `2px solid ${consumerColor}`, width },
+      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({ label: eventName, type: 'event', maxWidth: eventNodeWidth }),
+    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 })
+    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 })
+    buildNodeEdge({
+      id: `ece-${label.replace(/ /g, '_')}`,
+      target: id,
+      source: eventNameAsNodeID,
+      isAnimated,
+      label: includeLabels ? 'subscribed by' : '',
+    })
   );
 
   // Merge nodes in order
@@ -107,12 +146,17 @@ export const getEventElements = (
 export const getServiceElements = (
   { publishes, subscribes, name: serviceName }: Service,
   rootNodeColor = '#2563eb',
-  isAnimated = true
+  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);
@@ -124,10 +168,11 @@ export const getServiceElements = (
   // 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({ label: node.name, type: 'event', maxWidth: maxPublishesWidth }),
-      style: { border: `2px solid ${publishColor}`, width: nodeWidth },
+      data: buildNodeData({ name: node.name, label: labelToRender, type: 'event', maxWidth: maxPublishesWidth }),
+      style: { border: `2px solid ${publishColor}`, width: nodeWidth, ...nodeStyles },
       type: 'output',
       position,
     };
@@ -136,12 +181,14 @@ export const getServiceElements = (
     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({ label: node.name, type: 'event', maxWidth: nodeMaxWidth }),
+      data: buildNodeData({ name: node.name, label: labelToRender, type: 'event', maxWidth: nodeMaxWidth, ...nodeStyles }),
       style: {
         border: `2px solid ${subscribeColor}`,
         width: nodeWidth,
+        ...nodeStyles,
       },
       type: 'input',
       position,
@@ -150,10 +197,16 @@ export const getServiceElements = (
 
   const serviceNode: Node = {
     id: serviceNameAsNodeID,
-    data: buildNodeData({ label: serviceName, type: 'service', maxWidth: calcWidth(serviceName) }),
+    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,
   };
@@ -165,6 +218,7 @@ export const getServiceElements = (
       source: serviceNameAsNodeID,
       target: `pub-${node.name.replace(/ /g, '_')}`,
       isAnimated,
+      label: includeEdgeLabels ? 'publishes' : '',
     })
   );
 
@@ -174,6 +228,7 @@ export const getServiceElements = (
       target: serviceNameAsNodeID,
       source: `sub-${node.name.replace(/ /g, '_')}`,
       isAnimated,
+      label: includeEdgeLabels ? 'subscribed by' : '',
     })
   );
 

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

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import ReactFlow, { Controls, ReactFlowProvider, useStoreState } from 'react-flow-renderer';
+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';
@@ -7,6 +8,8 @@ import createGraphLayout, { calcCanvasHeight } from './GraphLayout';
 interface NodeGraphBuilderProps {
   data: Event | Service;
   source: 'event' | 'service';
+  title?: string;
+  subtitle?: string;
   rootNodeColor?: string;
   maxZoom?: number;
   fitView?: boolean;
@@ -14,10 +17,14 @@ interface NodeGraphBuilderProps {
   isAnimated?: boolean;
   isDraggable?: boolean;
   isHorizontal?: boolean;
+  includeBackground?: boolean;
+  includeEdgeLabels?: boolean;
+  includeNodeIcons?: boolean;
 }
 
 interface NodeGraphProps extends NodeGraphBuilderProps {
-  maxHeight?: number;
+  maxHeight?: number | string;
+  renderWithBorder?: boolean;
 }
 
 // NodeGraphBuilder component wrapping ReactFlow
@@ -31,24 +38,39 @@ function NodeGraphBuilder({
   zoomOnScroll = false,
   isDraggable = false,
   isHorizontal = true,
+  includeBackground = false,
+  includeEdgeLabels = false,
+  includeNodeIcons,
+  title,
+  subtitle,
 }: NodeGraphBuilderProps) {
-  // Load event or service elements for graph
-  let initialElements;
-  if (source === 'event') {
-    initialElements = getEventElements(data as Event, rootNodeColor, isAnimated);
-  } else {
-    initialElements = getServiceElements(data as Service, rootNodeColor, isAnimated);
-  }
+  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(initialElements, isHorizontal);
+  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 (
@@ -87,7 +109,19 @@ function NodeGraphBuilder({
       zoomOnScroll={zoomOnScroll}
       maxZoom={maxZoom}
     >
-      <Controls />
+      {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>
   );
 }
@@ -104,12 +138,20 @@ function NodeGraph({
   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 border-dashed border-2 border-slate-300" style={{ height: dynamicHeight }}>
+    <div className={`node-graph w-full h-screen ${renderWithBorder ? borderClasses : ''}`} style={{ height: dynamicHeight }}>
       <ReactFlowProvider>
         <NodeGraphBuilder
           source={source}
@@ -117,12 +159,20 @@ function NodeGraph({
           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>
   );
 }