@eventcatalog/core 1.2.7 → 2.0.0

package/components/Mdx/NodeGraph/NodeGraph.tsx

@@ -1,168 +0,0 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import Link from 'next/link';
-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 CombinedEventsAndServicesSource {
-  data: CombinedEventsAndServices;
-  source: 'all';
-}
-
-interface DomainSource {
-  data: Domain;
-  source: 'domain';
-}
-
-interface ServiceSource {
-  data: Service;
-  source: 'service';
-}
-
-interface EventSource {
-  data: Event;
-  source: 'event';
-}
-
-export type DataSource = CombinedEventsAndServicesSource | DomainSource | ServiceSource | EventSource;
-
-interface NodeGraphBuilderSharedProps {
-  title?: string;
-  subtitle?: string;
-  rootNodeColor?: string;
-  maxZoom?: number;
-  fitView?: boolean;
-  zoomOnScroll?: boolean;
-  isAnimated?: boolean;
-  isDraggable?: boolean;
-  isHorizontal?: boolean;
-  includeBackground?: boolean;
-  includeEdgeLabels?: boolean;
-  includeNodeIcons?: boolean;
-}
-
-type NodeGraphBuilderProps = NodeGraphBuilderSharedProps & DataSource;
-
-type NodeGraphProps = 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 = useCallback(() => {
-    if (source === 'domain' || source === 'all') {
-      const totalEventElements = data.events.map((event) => getEventElements(event, rootNodeColor, isAnimated, true, true));
-      const totalServiceElements = data.services.map((service) =>
-        getServiceElements(service, rootNodeColor, isAnimated, true, true)
-      );
-      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') {
-      return getEventElements(data as Event, rootNodeColor, isAnimated, includeEdgeLabels, includeNodeIcons);
-    }
-
-    return getServiceElements(data as Service, rootNodeColor, isAnimated, includeEdgeLabels, includeNodeIcons);
-  }, [data, includeEdgeLabels, includeNodeIcons, isAnimated, rootNodeColor, source]);
-
-  const { fitView: resetView } = useZoomPanHelper();
-
-  const [elements, setElements] = useState([]);
-
-  useEffect(() => {
-    const elementsForGraph = createGraphLayout(getElements(), isHorizontal);
-    setElements(elementsForGraph);
-    setTimeout(() => {
-      resetView();
-    }, 1);
-  }, [data, getElements, isHorizontal, resetView]);
-
-  // ReactFlow operations
-  const onElementClick = (event, element) => {
-    if (element.data?.link) {
-      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({ maxHeight, renderWithBorder = true, ...builderProps }: NodeGraphProps) {
-  // Set dynamic height of node graph
-  const dynamicHeight = maxHeight || calcCanvasHeight(builderProps);
-
-  const borderClasses = `border-dashed border-2 border-slate-300`;
-
-  return (
-    <div className={`node-graph w-full h-screen ${renderWithBorder ? borderClasses : ''}`} style={{ height: dynamicHeight }}>
-      {/* @ts-ignore */}
-      <ReactFlowProvider>
-        <NodeGraphBuilder {...builderProps} />
-      </ReactFlowProvider>
-      <Link href={`/visualiser?type=${builderProps.source}&name=${builderProps.data.name}`}>
-        <a className="block text-right  underline text-xs mt-4">Open in Visualiser &rarr;</a>
-      </Link>
-    </div>
-  );
-}
-
-export default NodeGraph;

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

@@ -1,102 +0,0 @@
-import { Event, Service } from '@eventcatalog/types';
-import { getEventElements, getServiceElements } from '../GraphElements';
-
-jest.mock('next/config', () => () => ({
-  publicRuntimeConfig: {
-    basePath: '/docs',
-  },
-}));
-
-describe('GraphElements', () => {
-  describe('getServiceElements', () => {
-    it('takes a given Service and returns the ReactFlow elements with relations the events it publishes and consumes', () => {
-      const event = { name: 'My Event', version: '0.0.1' };
-      const event2 = { name: 'My Event 2', version: '0.0.1' };
-      const rootNodeColor = '#2563eb';
-      const isAnimated = true;
-
-      const service = {
-        id: 'My Service',
-        name: 'My Service',
-        version: '0.0.1',
-        summary: 'Summary',
-        publishes: [event],
-        subscribes: [event2],
-      };
-
-      const result = getServiceElements(service as Service, rootNodeColor, isAnimated);
-
-      expect(result).toMatchSnapshot();
-    });
-
-    it('takes a given Service and returns the ReactFlow elements with multiple events & long names', () => {
-      const event = { name: 'My Event', version: '0.0.1' };
-      const event2 = { name: 'My Event 2', version: '0.0.1' };
-      const event3 = { name: 'My Event 3', version: '0.0.1' };
-      const event4 = { name: 'very.very.very.very.very.very.very.very.very.very.very.very.long.name.event.4', version: '0.0.1' };
-      const event5 = { name: 'very very very very very very very very very very very very long name event 5', version: '0.0.1' };
-      const event6 = { name: 'My Event 6', version: '0.0.1' };
-      const event7 = { name: 'My Event 7', version: '0.0.1' };
-      const event8 = { name: 'My Event 8', version: '0.0.1' };
-      const event9 = { name: 'My Event 9', version: '0.0.1' };
-      const rootNodeColor = '#2563eb';
-      const isAnimated = true;
-
-      const service = {
-        id: 'My Service',
-        name: 'My Service',
-        version: '0.0.1',
-        summary: 'Summary',
-        publishes: [event, event2, event3, event4],
-        subscribes: [event5, event6, event7, event8, event9],
-      };
-
-      const result = getServiceElements(service as Service, rootNodeColor, isAnimated);
-
-      expect(result).toMatchSnapshot();
-    });
-  });
-
-  describe('getEventElements', () => {
-    it('takes a given event and returns the ReactFlow elements with relations between the event and its consumers and producers', () => {
-      const event = {
-        name: 'My Event',
-        version: '0.0.1',
-        producerNames: ['Service 1'],
-        consumerNames: ['Service 2'],
-      };
-      const rootNodeColor = '#2563eb';
-      const isAnimated = true;
-
-      const result = getEventElements(event as Event, rootNodeColor, isAnimated);
-
-      expect(result).toMatchSnapshot();
-    });
-
-    it('takes a given event and returns the ReactFlow elements with multiple services & long names', () => {
-      const event = {
-        name: 'My Event',
-        version: '0.0.1',
-        producerNames: [
-          'Service 1',
-          'Service 2',
-          'very very very very very very very very very very very very long name Service 3',
-        ],
-        consumerNames: [
-          'Service 4',
-          'Service 5',
-          'Service 6',
-          'Service 7',
-          'Service 8',
-          'very.very.very.very.very.very.very.very.very.very.very.very.long.name.event.8',
-        ],
-      };
-      const rootNodeColor = '#2563eb';
-      const isAnimated = true;
-
-      const result = getEventElements(event as Event, rootNodeColor, isAnimated);
-
-      expect(result).toMatchSnapshot();
-    });
-  });
-});

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

@@ -1,115 +0,0 @@
-import { Event, Service } from '@eventcatalog/types';
-import { Elements } from 'react-flow-renderer';
-import createGraphLayout, { calcCanvasHeight } from '../GraphLayout';
-
-describe('GraphLayout', () => {
-  describe('createGraphLayout', () => {
-    it('calculate a graph layout', () => {
-      const isHorizontal = true;
-      const elements = [
-        {
-          data: {
-            label: 'My Event 2',
-            link: '/docs/events/My Event 2',
-            maxWidth: 150,
-            width: 150,
-          },
-          id: 's-My_Event_2',
-          position: {
-            x: 0,
-            y: 0,
-          },
-          style: {
-            border: '2px solid #75d7b6',
-            width: 150,
-          },
-          type: 'input',
-        },
-        {
-          data: {
-            label: 'My Service',
-            link: '/docs/services/My Service',
-            maxWidth: 150,
-            width: 150,
-          },
-          id: 'c-My_Service',
-          position: {
-            x: 0,
-            y: 0,
-          },
-          style: {
-            border: '2px solid #2563eb',
-            width: 150,
-          },
-        },
-        {
-          data: {
-            label: 'My Event',
-            link: '/docs/events/My Event',
-            maxWidth: 150,
-            width: 150,
-          },
-          id: 'p-My_Event',
-          position: {
-            x: 0,
-            y: 0,
-          },
-          style: {
-            border: '2px solid #818cf8',
-            width: 150,
-          },
-          type: 'output',
-        },
-        {
-          animated: true,
-          arrowHeadType: 'arrowclosed',
-          id: 'ecp-My_Event',
-          source: 'c-My_Service',
-          target: 'p-My_Event',
-          type: 'smoothstep',
-        },
-        {
-          animated: true,
-          arrowHeadType: 'arrowclosed',
-          id: 'esc-My_Event_2',
-          source: 's-My_Event_2',
-          target: 'c-My_Service',
-          type: 'smoothstep',
-        },
-      ];
-
-      const result = createGraphLayout(elements as Elements, isHorizontal);
-      expect(result).toMatchSnapshot();
-    });
-  });
-
-  describe('calcCanvasHeight', () => {
-    it('takes all events and calculate the canvas height', () => {
-      const data: Event = {
-        producerNames: ['1', '2', '3', '4', '5', '6', '7', '8'],
-        consumerNames: ['1', '2', '3', '4', '5'],
-        name: 'mock',
-        version: '1.0.0',
-      };
-      const result = calcCanvasHeight({ data, source: 'event' });
-      expect(result).toEqual(544);
-    });
-
-    it('takes all services and calculate the canvas height', () => {
-      const event: Event = {
-        producerNames: [],
-        consumerNames: [],
-        name: 'mock',
-        version: '1.0.0',
-      };
-      const data: Service = {
-        publishes: [event, event, event, event, event, event, event, event, event],
-        subscribes: [event, event, event, event, event],
-        name: 'mock',
-        summary: 'mock',
-      };
-      const result = calcCanvasHeight({ data, source: 'service' });
-      expect(result).toEqual(612);
-    });
-  });
-});