@eventcatalog/core 3.12.7 → 3.12.9-beta.0

package/eventcatalog/src/components/MDX/NodeGraph/FocusMode/utils.ts

@@ -1,163 +0,0 @@
-import type { Node, Edge } from '@xyflow/react';
-
-export interface NodeDisplayInfo {
-  id: string;
-  name: string;
-  type: string;
-  version?: string;
-  description?: string;
-}
-
-export interface ConnectedNodes {
-  leftNodes: Node[];
-  rightNodes: Node[];
-}
-
-export const NODE_COLOR_CLASSES: Record<string, string> = {
-  events: 'bg-orange-600',
-  services: 'bg-pink-600',
-  flows: 'bg-teal-600',
-  commands: 'bg-blue-600',
-  queries: 'bg-green-600',
-  channels: 'bg-gray-600',
-  externalSystem: 'bg-pink-600',
-  actor: 'bg-yellow-500',
-  step: 'bg-gray-700',
-  data: 'bg-blue-600',
-  'data-products': 'bg-indigo-600',
-  domains: 'bg-yellow-600',
-  entities: 'bg-purple-600',
-};
-
-export const NODE_TYPE_LABELS: Record<string, string> = {
-  events: 'Event',
-  services: 'Service',
-  flows: 'Flow',
-  commands: 'Command',
-  queries: 'Query',
-  channels: 'Channel',
-  externalSystem: 'External System',
-  actor: 'Actor',
-  step: 'Step',
-  data: 'Data',
-  'data-products': 'Data Product',
-  domains: 'Domain',
-  entities: 'Entity',
-};
-
-/**
- * Get connected nodes for a given center node
- * Left nodes: incoming edges (they send TO this node)
- * Right nodes: outgoing edges (this node sends TO them)
- */
-export function getConnectedNodes(centerNodeId: string, nodes: Node[], edges: Edge[]): ConnectedNodes {
-  const leftIds = new Set<string>();
-  const rightIds = new Set<string>();
-
-  edges.forEach((edge) => {
-    if (edge.target === centerNodeId) {
-      leftIds.add(edge.source);
-    }
-    if (edge.source === centerNodeId) {
-      rightIds.add(edge.target);
-    }
-  });
-
-  return {
-    leftNodes: nodes.filter((n) => leftIds.has(n.id)),
-    rightNodes: nodes.filter((n) => rightIds.has(n.id)),
-  };
-}
-
-// Entity keys that follow the standard data structure pattern
-const ENTITY_KEYS = ['service', 'message', 'flow', 'channel', 'domain', 'entity', 'dataProduct'] as const;
-
-/**
- * Extract display information from a ReactFlow node
- */
-export function getNodeDisplayInfo(node: Node): NodeDisplayInfo {
-  const nodeType = node.type || 'unknown';
-  const data = node.data as any;
-
-  // Find the entity in data using standard keys
-  const entityKey = ENTITY_KEYS.find((key) => data[key]);
-  const entity = entityKey ? data[entityKey] : null;
-
-  const name = entity?.data?.name || entity?.id || data.label || data.name || node.id;
-  const version = entity?.data?.version || entity?.version || data.version || '';
-  const description = entity?.data?.summary || entity?.data?.description || data.summary || data.description || '';
-
-  return {
-    id: node.id,
-    name,
-    type: nodeType,
-    version,
-    description: description ? truncateDescription(description, 100) : undefined,
-  };
-}
-
-/**
- * Truncate description to a max length
- */
-function truncateDescription(text: string, maxLength: number): string {
-  if (text.length <= maxLength) return text;
-  return text.slice(0, maxLength).trim() + '...';
-}
-
-/**
- * Get the color class for a node type
- */
-export function getNodeColorClass(nodeType: string): string {
-  return NODE_COLOR_CLASSES[nodeType] || 'bg-gray-500';
-}
-
-/**
- * Get the display label for a node type
- */
-export function getNodeTypeLabel(nodeType: string): string {
-  return NODE_TYPE_LABELS[nodeType] || nodeType;
-}
-
-// Mapping from entity key to doc path
-const DOC_PATH_MAP: Record<string, string> = {
-  service: 'services',
-  flow: 'flows',
-  channel: 'channels',
-  domain: 'domains',
-  entity: 'entities',
-  dataProduct: 'data-products',
-};
-
-/**
- * Get the documentation URL for a node
- */
-export function getNodeDocUrl(node: Node): string | null {
-  const nodeType = node.type || 'unknown';
-  const data = node.data as any;
-
-  // Handle message type separately due to type mapping
-  if (data.message) {
-    const id = data.message.data?.id || data.message.id || '';
-    const version = data.message.data?.version || data.message.version || '';
-    const collectionType = nodeType === 'events' ? 'events' : nodeType === 'commands' ? 'commands' : 'queries';
-    return id && version ? `/docs/${collectionType}/${id}/${version}` : null;
-  }
-
-  // Handle data/container nodes with nested data.data structure
-  if (data.data && nodeType === 'data') {
-    const id = data.data.id || '';
-    const version = data.data.version || '';
-    return id && version ? `/docs/containers/${id}/${version}` : null;
-  }
-
-  // Handle standard entity types
-  for (const [key, path] of Object.entries(DOC_PATH_MAP)) {
-    if (data[key]) {
-      const id = data[key].data?.id || data[key].id || '';
-      const version = data[key].data?.version || data[key].version || '';
-      return id && version ? `/docs/${path}/${id}/${version}` : null;
-    }
-  }
-
-  return null;
-}

package/eventcatalog/src/components/MDX/NodeGraph/FocusModeModal.tsx

@@ -1,99 +0,0 @@
-import React, { useState, useCallback, useEffect } from 'react';
-import * as Dialog from '@radix-ui/react-dialog';
-import { XIcon, FocusIcon } from 'lucide-react';
-import { ReactFlowProvider, type Node, type Edge, type NodeTypes, type EdgeTypes } from '@xyflow/react';
-import FocusModeContent from './FocusMode/FocusModeContent';
-import { getNodeDisplayInfo } from './FocusMode/utils';
-
-interface FocusModeModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-  initialNodeId: string | null;
-  nodes: Node[];
-  edges: Edge[];
-  nodeTypes: NodeTypes;
-  edgeTypes: EdgeTypes;
-}
-
-const FocusModeModal: React.FC<FocusModeModalProps> = ({
-  isOpen,
-  onClose,
-  initialNodeId,
-  nodes,
-  edges,
-  nodeTypes,
-  edgeTypes,
-}) => {
-  const [centerNodeId, setCenterNodeId] = useState<string | null>(initialNodeId);
-
-  // Reset center node when modal opens with new initial node
-  useEffect(() => {
-    if (isOpen && initialNodeId) {
-      setCenterNodeId(initialNodeId);
-    }
-  }, [isOpen, initialNodeId]);
-
-  const handleSwitchCenter = useCallback((newCenterNodeId: string, _direction: 'left' | 'right') => {
-    setCenterNodeId(newCenterNodeId);
-  }, []);
-
-  // Get center node info for title
-  const centerNode = centerNodeId ? nodes.find((n) => n.id === centerNodeId) : null;
-  const centerNodeInfo = centerNode ? getNodeDisplayInfo(centerNode) : null;
-
-  if (!centerNodeId) {
-    return null;
-  }
-
-  return (
-    <Dialog.Root open={isOpen} onOpenChange={(open) => !open && onClose()}>
-      <Dialog.Portal container={typeof document !== 'undefined' ? document.body : undefined}>
-        <div className="fixed inset-0 z-[99999]" style={{ isolation: 'isolate' }}>
-          <Dialog.Overlay className="fixed inset-0 bg-black/70 data-[state=open]:animate-overlayShow" />
-          <Dialog.Content className="fixed inset-4 md:inset-8 lg:inset-12 rounded-lg bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] shadow-xl focus:outline-none data-[state=open]:animate-contentShow flex flex-col overflow-hidden">
-            {/* Header */}
-            <div className="flex items-center justify-between px-6 py-4 border-b border-[rgb(var(--ec-page-border))] flex-shrink-0">
-              <div className="flex items-center gap-3">
-                <div className="flex items-center justify-center w-10 h-10 rounded-lg bg-[rgb(var(--ec-accent-subtle))]">
-                  <FocusIcon className="w-5 h-5 text-[rgb(var(--ec-accent))]" />
-                </div>
-                <div>
-                  <Dialog.Title className="text-lg font-semibold text-[rgb(var(--ec-page-text))]">Focus Mode</Dialog.Title>
-                  <Dialog.Description className="text-sm text-[rgb(var(--ec-page-text-muted))]">
-                    {centerNodeInfo
-                      ? `Exploring: ${centerNodeInfo.name} - Click on connected nodes to navigate`
-                      : 'Explore node connections'}
-                  </Dialog.Description>
-                </div>
-              </div>
-              <Dialog.Close asChild>
-                <button
-                  className="flex items-center justify-center w-10 h-10 rounded-lg text-[rgb(var(--ec-icon-color))] hover:text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-content-hover,var(--ec-page-border)/0.5))] transition-colors"
-                  aria-label="Close"
-                >
-                  <XIcon className="w-5 h-5" />
-                </button>
-              </Dialog.Close>
-            </div>
-
-            {/* Content */}
-            <div className="flex-1 overflow-hidden">
-              <ReactFlowProvider>
-                <FocusModeContent
-                  centerNodeId={centerNodeId}
-                  nodes={nodes}
-                  edges={edges}
-                  nodeTypes={nodeTypes}
-                  edgeTypes={edgeTypes}
-                  onSwitchCenter={handleSwitchCenter}
-                />
-              </ReactFlowProvider>
-            </div>
-          </Dialog.Content>
-        </div>
-      </Dialog.Portal>
-    </Dialog.Root>
-  );
-};
-
-export default FocusModeModal;

package/eventcatalog/src/components/MDX/NodeGraph/MermaidView.tsx

@@ -1,242 +0,0 @@
-import React, { useState, useEffect, useRef, useCallback } from 'react';
-import { CheckIcon, ClipboardIcon } from 'lucide-react';
-import type { Node, Edge } from '@xyflow/react';
-import { convertToMermaid } from '@utils/node-graphs/export-mermaid';
-import { copyToClipboard } from '@utils/clipboard';
-
-interface MermaidViewProps {
-  nodes: Node[];
-  edges: Edge[];
-  maxTextSize?: number;
-}
-
-const MermaidView = ({ nodes, edges, maxTextSize = 100000 }: MermaidViewProps) => {
-  const [copySuccess, setCopySuccess] = useState(false);
-  const [mermaidCode, setMermaidCode] = useState('');
-  const [previewSvg, setPreviewSvg] = useState<string | null>(null);
-  const [previewError, setPreviewError] = useState<string | null>(null);
-  const [isRendering, setIsRendering] = useState(true);
-  const containerRef = useRef<HTMLDivElement>(null);
-  const svgContainerRef = useRef<HTMLDivElement>(null);
-  const panZoomInstanceRef = useRef<any>(null);
-
-  // Generate mermaid code
-  useEffect(() => {
-    const code = convertToMermaid(nodes, edges, { includeStyles: true, direction: 'LR' });
-    setMermaidCode(code);
-  }, [nodes, edges]);
-
-  // Render mermaid preview
-  useEffect(() => {
-    if (!mermaidCode) return;
-
-    let cancelled = false;
-    setIsRendering(true);
-    setPreviewError(null);
-
-    const renderMermaid = async () => {
-      try {
-        const { default: mermaid } = await import('mermaid');
-
-        // Detect current theme
-        const isDarkMode = document.documentElement.getAttribute('data-theme') === 'dark';
-        const currentTheme = isDarkMode ? 'dark' : 'default';
-
-        mermaid.initialize({
-          maxTextSize: maxTextSize,
-          startOnLoad: false,
-          theme: currentTheme,
-          flowchart: {
-            curve: 'basis',
-            padding: 20,
-          },
-          securityLevel: 'loose',
-        });
-
-        const id = 'mermaid-view-' + Math.random().toString(36).substring(2, 9);
-        const { svg } = await mermaid.render(id, mermaidCode);
-
-        if (!cancelled) {
-          setPreviewSvg(svg);
-          setPreviewError(null);
-        }
-      } catch (error) {
-        if (!cancelled) {
-          console.error('Mermaid render error:', error);
-          setPreviewError(error instanceof Error ? error.message : 'Failed to render diagram');
-          setPreviewSvg(null);
-        }
-      } finally {
-        if (!cancelled) {
-          setIsRendering(false);
-        }
-      }
-    };
-
-    renderMermaid();
-
-    return () => {
-      cancelled = true;
-    };
-  }, [mermaidCode]);
-
-  // Initialize pan/zoom after SVG is rendered
-  useEffect(() => {
-    if (!previewSvg || !svgContainerRef.current) return;
-
-    const initZoom = async () => {
-      const svgElement = svgContainerRef.current?.querySelector('svg');
-      if (!svgElement) return;
-
-      try {
-        const { default: svgPanZoom } = await import('svg-pan-zoom');
-
-        // Set SVG to fill container
-        svgElement.style.width = '100%';
-        svgElement.style.height = '100%';
-        svgElement.removeAttribute('height');
-        svgElement.removeAttribute('width');
-
-        const instance = svgPanZoom(svgElement, {
-          zoomEnabled: true,
-          controlIconsEnabled: false,
-          fit: true,
-          center: true,
-          minZoom: 0.1,
-          maxZoom: 10,
-          zoomScaleSensitivity: 0.15,
-          dblClickZoomEnabled: true,
-          mouseWheelZoomEnabled: true,
-          panEnabled: true,
-        });
-
-        panZoomInstanceRef.current = instance;
-      } catch (e) {
-        console.warn('Failed to initialize zoom:', e);
-      }
-    };
-
-    initZoom();
-
-    return () => {
-      if (panZoomInstanceRef.current) {
-        try {
-          panZoomInstanceRef.current.destroy();
-        } catch (e) {
-          // Ignore
-        }
-        panZoomInstanceRef.current = null;
-      }
-    };
-  }, [previewSvg]);
-
-  const handleCopyToClipboard = useCallback(async () => {
-    await copyToClipboard(mermaidCode);
-    setCopySuccess(true);
-    setTimeout(() => setCopySuccess(false), 2000);
-  }, [mermaidCode]);
-
-  return (
-    <div
-      ref={containerRef}
-      className="w-full h-full bg-[rgb(var(--ec-page-bg))] relative flex flex-col"
-      style={{ animation: 'fadeIn 200ms ease-out' }}
-    >
-      <style>{`
-        @keyframes fadeIn {
-          from { opacity: 0; }
-          to { opacity: 1; }
-        }
-      `}</style>
-
-      {/* Copy button - top right */}
-      <div className="absolute top-[10px] right-4 z-20">
-        <div className="relative group">
-          <button
-            onClick={handleCopyToClipboard}
-            className={`p-2.5 rounded-md shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[rgb(var(--ec-accent))] transition-all duration-150 ${
-              copySuccess
-                ? 'bg-green-500 text-white scale-110'
-                : 'bg-[rgb(var(--ec-card-bg))] hover:bg-[rgb(var(--ec-page-border))/0.5] text-[rgb(var(--ec-icon-color))] hover:scale-105'
-            }`}
-            aria-label={copySuccess ? 'Copied!' : 'Copy Mermaid code'}
-          >
-            {copySuccess ? <CheckIcon className="h-5 w-5" /> : <ClipboardIcon className="h-5 w-5" />}
-          </button>
-          <div className="absolute top-full right-0 mt-2 px-2 py-1 bg-[rgb(var(--ec-page-text))] text-[rgb(var(--ec-page-bg))] text-xs rounded shadow-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-50">
-            {copySuccess ? 'Copied!' : 'Copy Mermaid code'}
-          </div>
-        </div>
-      </div>
-
-      {/* Mermaid diagram container */}
-      <div className="flex-1 overflow-hidden">
-        {isRendering && (
-          <div className="w-full h-full flex items-center justify-center">
-            <div className="relative">
-              <div className="flex items-center gap-4 opacity-40">
-                <div className="w-24 h-10 bg-[rgb(var(--ec-page-border))] rounded animate-pulse" />
-                <div className="w-12 h-0.5 bg-[rgb(var(--ec-page-border))] animate-pulse" />
-                <div
-                  className="w-20 h-10 bg-[rgb(var(--ec-page-border))] rounded-full animate-pulse"
-                  style={{ animationDelay: '75ms' }}
-                />
-                <div className="w-12 h-0.5 bg-[rgb(var(--ec-page-border))] animate-pulse" style={{ animationDelay: '150ms' }} />
-                <div
-                  className="w-24 h-10 bg-[rgb(var(--ec-page-border))] rounded animate-pulse"
-                  style={{ animationDelay: '225ms' }}
-                />
-              </div>
-              <p className="text-center text-sm text-[rgb(var(--ec-page-text-muted))] mt-4">Rendering diagram...</p>
-            </div>
-          </div>
-        )}
-
-        {previewError && !isRendering && (
-          <div className="w-full h-full flex flex-col items-center justify-center p-4">
-            <div className="text-red-500 text-sm mb-2">Failed to render diagram</div>
-            <div className="text-[rgb(var(--ec-page-text-muted))] text-xs font-mono bg-[rgb(var(--ec-code-bg))] p-2 rounded max-w-lg overflow-auto">
-              {previewError}
-            </div>
-            <div className="mt-4 text-sm text-[rgb(var(--ec-page-text-muted))]">
-              <p>You can still copy the Mermaid code and paste it into</p>
-              <a
-                href="https://mermaid.live"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-[rgb(var(--ec-accent))] hover:underline"
-              >
-                mermaid.live
-              </a>
-            </div>
-          </div>
-        )}
-
-        {previewSvg && !isRendering && !previewError && (
-          <div
-            ref={svgContainerRef}
-            className="w-full h-full cursor-grab active:cursor-grabbing [&_svg]:w-full [&_svg]:h-full"
-            dangerouslySetInnerHTML={{ __html: previewSvg }}
-          />
-        )}
-      </div>
-
-      {/* Footer hint */}
-      <div className="absolute bottom-4 left-4 z-20">
-        <div className="flex items-center gap-2 bg-[rgb(var(--ec-card-bg))]/90 backdrop-blur-sm px-3 py-1.5 rounded-md shadow-sm border border-[rgb(var(--ec-page-border))]">
-          <svg className="w-3.5 h-3.5 text-[rgb(var(--ec-icon-color))]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={2}
-              d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"
-            />
-          </svg>
-          <span className="text-xs text-[rgb(var(--ec-page-text-muted))]">Scroll to zoom · Drag to pan</span>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default MermaidView;