|
| 1 | +import React, { useMemo } from 'react'; |
| 2 | +import { |
| 3 | + ReactFlow, |
| 4 | + MiniMap, |
| 5 | + Controls, |
| 6 | + Background, |
| 7 | + BackgroundVariant, |
| 8 | + useNodesState, |
| 9 | + useEdgesState, |
| 10 | + MarkerType, |
| 11 | +} from '@xyflow/react'; |
| 12 | +import '@xyflow/react/dist/style.css'; |
| 13 | +import CollectionNode from './CollectionNode'; |
| 14 | +import { Database, Link2, Sparkles } from 'lucide-react'; |
| 15 | +import { Badge } from '../ui/badge'; |
| 16 | + |
| 17 | +const nodeTypes = { |
| 18 | + collectionNode: CollectionNode, |
| 19 | +}; |
| 20 | + |
| 21 | +export default function SchemaCanvas({ collections = [], isAiAssisted = false }) { |
| 22 | + // Convert collections list into React Flow Nodes and Edges with auto-layout |
| 23 | + const { initialNodes, initialEdges, totalFields, totalRelations } = useMemo(() => { |
| 24 | + const nodes = []; |
| 25 | + const edges = []; |
| 26 | + let fieldCount = 0; |
| 27 | + let relationCount = 0; |
| 28 | + |
| 29 | + const COLS = collections.length > 4 ? 3 : 2; |
| 30 | + const X_GAP = 320; |
| 31 | + const Y_GAP = 300; |
| 32 | + |
| 33 | + collections.forEach((col, idx) => { |
| 34 | + const colX = (idx % COLS) * X_GAP + 40; |
| 35 | + const colY = Math.floor(idx / COLS) * Y_GAP + 40; |
| 36 | + const fields = col.model || col.fields || []; |
| 37 | + fieldCount += fields.length; |
| 38 | + |
| 39 | + nodes.push({ |
| 40 | + id: col.name, |
| 41 | + type: 'collectionNode', |
| 42 | + position: { x: colX, y: colY }, |
| 43 | + data: { |
| 44 | + name: col.name, |
| 45 | + fields, |
| 46 | + isLocked: col.name === 'users', |
| 47 | + }, |
| 48 | + }); |
| 49 | + |
| 50 | + // Find Ref fields and create relation edges |
| 51 | + fields.forEach((field) => { |
| 52 | + const targetRef = field.ref || field.items?.ref; |
| 53 | + if ((field.type === 'Ref' || field.items?.type === 'Ref') && targetRef) { |
| 54 | + relationCount++; |
| 55 | + edges.push({ |
| 56 | + id: `edge-${col.name}-${field.key}-${targetRef}`, |
| 57 | + source: col.name, |
| 58 | + target: targetRef, |
| 59 | + sourceHandle: `${col.name}-${field.key}-ref`, |
| 60 | + targetHandle: `${targetRef}-target`, |
| 61 | + type: 'smoothstep', |
| 62 | + animated: true, |
| 63 | + label: `${field.key} → ${targetRef}`, |
| 64 | + labelStyle: { fill: 'var(--color-text-muted)', fontSize: 10, fontFamily: 'monospace' }, |
| 65 | + labelBgStyle: { fill: 'var(--color-bg-card)', fillOpacity: 0.85 }, |
| 66 | + labelBgPadding: [4, 2], |
| 67 | + labelBgBorderRadius: 4, |
| 68 | + style: { stroke: 'var(--color-primary)', strokeWidth: 1.5 }, |
| 69 | + markerEnd: { |
| 70 | + type: MarkerType.ArrowClosed, |
| 71 | + width: 14, |
| 72 | + height: 14, |
| 73 | + color: 'var(--color-primary)', |
| 74 | + }, |
| 75 | + }); |
| 76 | + } |
| 77 | + }); |
| 78 | + }); |
| 79 | + |
| 80 | + return { initialNodes: nodes, initialEdges: edges, totalFields: fieldCount, totalRelations: relationCount }; |
| 81 | + }, [collections]); |
| 82 | + |
| 83 | + const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes); |
| 84 | + const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges); |
| 85 | + |
| 86 | + React.useEffect(() => { |
| 87 | + setNodes(initialNodes); |
| 88 | + setEdges(initialEdges); |
| 89 | + }, [initialNodes, initialEdges, setNodes, setEdges]); |
| 90 | + |
| 91 | + return ( |
| 92 | + <div className="relative w-full h-full min-h-[480px] bg-[var(--color-bg-main)] rounded-lg overflow-hidden border border-[var(--color-border)] select-none"> |
| 93 | + {/* Top Overlay Stats Bar */} |
| 94 | + <div className="absolute top-3 left-3 z-10 flex items-center gap-2 bg-[var(--color-bg-card)]/90 backdrop-blur-md px-3 py-1.5 rounded-md border border-[var(--color-border)] shadow-sm pointer-events-auto"> |
| 95 | + <div className="flex items-center gap-1.5 text-xs text-[var(--color-text-main)] font-semibold"> |
| 96 | + <Database size={13} className="text-[var(--color-primary)]" /> |
| 97 | + <span>{collections.length} Collection{collections.length !== 1 ? 's' : ''}</span> |
| 98 | + </div> |
| 99 | + <span className="text-[var(--color-border)]">|</span> |
| 100 | + <div className="text-[11px] text-[var(--color-text-muted)] font-mono"> |
| 101 | + {totalFields} Fields |
| 102 | + </div> |
| 103 | + {totalRelations > 0 && ( |
| 104 | + <> |
| 105 | + <span className="text-[var(--color-border)]">|</span> |
| 106 | + <div className="flex items-center gap-1 text-[11px] text-cyan-400 font-mono"> |
| 107 | + <Link2 size={11} /> |
| 108 | + <span>{totalRelations} Relation{totalRelations !== 1 ? 's' : ''}</span> |
| 109 | + </div> |
| 110 | + </> |
| 111 | + )} |
| 112 | + {isAiAssisted && ( |
| 113 | + <Badge variant="purple" className="text-[9px] px-1.5 py-0 h-4 ml-1 flex items-center gap-1"> |
| 114 | + <Sparkles size={9} /> |
| 115 | + <span>AI Visualizer</span> |
| 116 | + </Badge> |
| 117 | + )} |
| 118 | + </div> |
| 119 | + |
| 120 | + <ReactFlow |
| 121 | + nodes={nodes} |
| 122 | + edges={edges} |
| 123 | + onNodesChange={onNodesChange} |
| 124 | + onEdgesChange={onEdgesChange} |
| 125 | + nodeTypes={nodeTypes} |
| 126 | + fitView |
| 127 | + fitViewOptions={{ padding: 0.25 }} |
| 128 | + minZoom={0.2} |
| 129 | + maxZoom={1.5} |
| 130 | + defaultEdgeOptions={{ |
| 131 | + type: 'smoothstep', |
| 132 | + }} |
| 133 | + proOptions={{ hideAttribution: true }} |
| 134 | + > |
| 135 | + <Background |
| 136 | + variant={BackgroundVariant.Dots} |
| 137 | + gap={18} |
| 138 | + size={1} |
| 139 | + color="var(--color-border)" |
| 140 | + className="opacity-40" |
| 141 | + /> |
| 142 | + <Controls |
| 143 | + className="!bg-[var(--color-bg-card)] !border !border-[var(--color-border)] !rounded-md !shadow-md [&>button]:!bg-[var(--color-bg-card)] [&>button]:!border-b [&>button]:!border-[var(--color-border)] [&>button]:!text-[var(--color-text-main)] [&>button:hover]:!bg-[var(--color-surface-hover)]" |
| 144 | + /> |
| 145 | + <MiniMap |
| 146 | + nodeColor="var(--color-bg-input)" |
| 147 | + maskColor="rgba(0, 0, 0, 0.4)" |
| 148 | + className="!bg-[var(--color-bg-card)] !border !border-[var(--color-border)] !rounded-md" |
| 149 | + zoomable |
| 150 | + pannable |
| 151 | + /> |
| 152 | + </ReactFlow> |
| 153 | + |
| 154 | + <style>{` |
| 155 | + .react-flow__node { |
| 156 | + cursor: grab; |
| 157 | + } |
| 158 | + .react-flow__node:active { |
| 159 | + cursor: grabbing; |
| 160 | + } |
| 161 | + .react-flow__edge-path { |
| 162 | + stroke: var(--color-primary); |
| 163 | + } |
| 164 | + `}</style> |
| 165 | + </div> |
| 166 | + ); |
| 167 | +} |
0 commit comments