@eventcatalog/core 3.10.2 → 3.12.0

package/eventcatalog/src/components/MDX/NodeGraph/FocusMode/FocusModeNodeActions.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import { NodeToolbar, Position, useViewport, type Node } from '@xyflow/react';
+import { ArrowRightLeft, FileText } from 'lucide-react';
+import { getNodeDocUrl } from './utils';
+import { buildUrl } from '@utils/url-builder';
+
+interface FocusModeNodeActionsProps {
+  node: Node;
+  isCenter: boolean;
+  onSwitch: (nodeId: string, direction: 'left' | 'right') => void;
+}
+
+const FocusModeNodeActions: React.FC<FocusModeNodeActionsProps> = ({ node, isCenter, onSwitch }) => {
+  const { zoom } = useViewport();
+
+  // Don't show actions for placeholder nodes
+  if (node.type === 'placeholder') return null;
+
+  const docUrl = getNodeDocUrl(node);
+  const direction = (node.position?.x ?? 0) < 0 ? 'left' : 'right';
+
+  // Scale sizes based on zoom (inverse relationship - smaller when zoomed out)
+  const baseButtonSize = 32;
+  const baseIconSize = 16;
+  const scaleFactor = Math.max(0.6, Math.min(1, zoom));
+  const buttonSize = Math.round(baseButtonSize * scaleFactor);
+  const iconSize = Math.round(baseIconSize * scaleFactor);
+
+  const handleSwitch = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    onSwitch(node.id, direction);
+  };
+
+  const handleDocClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (docUrl) {
+      window.location.href = buildUrl(docUrl);
+    }
+  };
+
+  // Center node only shows docs icon (if available)
+  if (isCenter) {
+    if (!docUrl) return null;
+    return (
+      <NodeToolbar nodeId={node.id} position={Position.Bottom} isVisible={true} offset={-16}>
+        <div
+          className="flex items-center gap-1 bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-page-border))] rounded-lg shadow-md"
+          style={{ padding: Math.round(4 * scaleFactor) }}
+        >
+          <button
+            onClick={handleDocClick}
+            className="flex items-center justify-center rounded-md text-[rgb(var(--ec-icon-color))] hover:text-[rgb(var(--ec-accent))] hover:bg-[rgb(var(--ec-accent-subtle))] transition-colors"
+            style={{ width: buttonSize, height: buttonSize }}
+            title="View documentation"
+          >
+            <FileText style={{ width: iconSize, height: iconSize }} />
+          </button>
+        </div>
+      </NodeToolbar>
+    );
+  }
+
+  return (
+    <NodeToolbar nodeId={node.id} position={Position.Bottom} isVisible={true} offset={-16}>
+      <div
+        className="flex items-center gap-1 bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-page-border))] rounded-lg shadow-md"
+        style={{ padding: Math.round(4 * scaleFactor) }}
+      >
+        {docUrl && (
+          <button
+            onClick={handleDocClick}
+            className="flex items-center justify-center rounded-md text-[rgb(var(--ec-icon-color))] hover:text-[rgb(var(--ec-accent))] hover:bg-[rgb(var(--ec-accent-subtle))] transition-colors"
+            style={{ width: buttonSize, height: buttonSize }}
+            title="View documentation"
+          >
+            <FileText style={{ width: iconSize, height: iconSize }} />
+          </button>
+        )}
+        <button
+          onClick={handleSwitch}
+          className="flex items-center justify-center rounded-md text-[rgb(var(--ec-icon-color))] hover:text-[rgb(var(--ec-accent))] hover:bg-[rgb(var(--ec-accent-subtle))] transition-colors"
+          style={{ width: buttonSize, height: buttonSize }}
+          title="Focus on this node"
+        >
+          <ArrowRightLeft style={{ width: iconSize, height: iconSize }} />
+        </button>
+      </div>
+    </NodeToolbar>
+  );
+};
+
+export default FocusModeNodeActions;

package/eventcatalog/src/components/MDX/NodeGraph/FocusMode/FocusModePlaceholder.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Handle, Position } from '@xyflow/react';
+
+interface FocusModePlaceholderProps {
+  data: {
+    label: string;
+    side: 'left' | 'right';
+  };
+}
+
+const FocusModePlaceholder: React.FC<FocusModePlaceholderProps> = ({ data }) => {
+  const { label, side } = data;
+
+  return (
+    <div
+      className="px-4 py-4 rounded-lg border-2 border-dashed border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-page-bg)/0.5)] max-w-[280px] flex items-center justify-center"
+      style={{ opacity: 0.6, minHeight: '130px' }}
+    >
+      {side === 'right' && <Handle type="target" position={Position.Left} style={{ visibility: 'hidden' }} />}
+      <div className="text-center text-sm text-[rgb(var(--ec-page-text-muted))] italic">{label}</div>
+      {side === 'left' && <Handle type="source" position={Position.Right} style={{ visibility: 'hidden' }} />}
+    </div>
+  );
+};
+
+export default FocusModePlaceholder;

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

@@ -0,0 +1,163 @@
+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

@@ -0,0 +1,99 @@
+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/NodeGraph.astro

@@ -19,7 +19,8 @@ import { getVersionFromCollection } from '@utils/collections/versions';
 import { pageDataLoader } from '@utils/page-loaders/page-data-loader';
 import { getNodesAndEdges as getNodesAndEdgesForContainer } from '@utils/node-graphs/container-node-graph';
 import config from '@config';
-import { isEventCatalogChatEnabled } from '@utils/feature';
+import { isEventCatalogChatEnabled, isDevMode } from '@utils/feature';
+import { loadSavedLayout, applyLayoutToNodes, buildResourceKey } from '@utils/node-graphs/layout-persistence';
 
 const isChatEnabled = isEventCatalogChatEnabled();
 
@@ -139,12 +140,17 @@ if (collection === 'services-containers') {
   nodes = fetchedNodes;
   edges = fetchedEdges;
 }
+
+// Load and apply saved layout if it exists (dev mode feature)
+const resourceKey = buildResourceKey(collection, id, version);
+const savedLayout = await loadSavedLayout(resourceKey);
+const nodesWithLayout = applyLayoutToNodes(nodes as any[], savedLayout);
 ---
 
 <div>
   <NodeGraphNew
     id={id}
-    nodes={nodes}
+    nodes={nodesWithLayout}
     edges={edges}
     title={title}
     hrefLabel={href?.label}
@@ -159,6 +165,8 @@ if (collection === 'services-containers') {
     zoomOnScroll={zoomOnScroll}
     isChatEnabled={isChatEnabled}
     maxTextSize={config.mermaid?.maxTextSize}
+    isDevMode={isDevMode()}
+    resourceKey={resourceKey}
   />
 </div>