feat: add ER diagram and enhance TableStructure with FK details, triggers, comments
- Add interactive ER diagram with ReactFlow + dagre auto-layout, accessible via right-click context menu on schema nodes in the sidebar - Enhance TableStructure: column comments, FK referenced table/columns, ON UPDATE/DELETE rules, new Triggers tab - Backend: rewrite get_table_constraints using pg_constraint for proper composite FK support, add get_table_triggers and get_schema_erd commands Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
186
src/components/erd/ErdDiagram.tsx
Normal file
186
src/components/erd/ErdDiagram.tsx
Normal file
@@ -0,0 +1,186 @@
|
||||
import { useMemo, useCallback, useEffect, useState } from "react";
|
||||
import {
|
||||
ReactFlow,
|
||||
Background,
|
||||
Controls,
|
||||
MiniMap,
|
||||
MarkerType,
|
||||
PanOnScrollMode,
|
||||
applyNodeChanges,
|
||||
applyEdgeChanges,
|
||||
type Node,
|
||||
type Edge,
|
||||
type NodeTypes,
|
||||
type NodeChange,
|
||||
type EdgeChange,
|
||||
} from "@xyflow/react";
|
||||
import dagre from "dagre";
|
||||
import "@xyflow/react/dist/style.css";
|
||||
|
||||
import { useSchemaErd } from "@/hooks/use-schema";
|
||||
import { ErdTableNode, type ErdTableNodeData } from "./ErdTableNode";
|
||||
import type { ErdData } from "@/types";
|
||||
|
||||
const nodeTypes: NodeTypes = {
|
||||
erdTable: ErdTableNode,
|
||||
};
|
||||
|
||||
const NODE_WIDTH = 250;
|
||||
const NODE_ROW_HEIGHT = 24;
|
||||
const NODE_HEADER_HEIGHT = 36;
|
||||
|
||||
function buildLayout(data: ErdData): { nodes: Node[]; edges: Edge[] } {
|
||||
const g = new dagre.graphlib.Graph();
|
||||
g.setDefaultEdgeLabel(() => ({}));
|
||||
g.setGraph({ rankdir: "LR", nodesep: 60, ranksep: 150 });
|
||||
|
||||
// Build list of FK column names per table for icon display
|
||||
const fkColumnsPerTable = new Map<string, string[]>();
|
||||
for (const rel of data.relationships) {
|
||||
const key = `${rel.source_schema}.${rel.source_table}`;
|
||||
if (!fkColumnsPerTable.has(key)) fkColumnsPerTable.set(key, []);
|
||||
for (const col of rel.source_columns) {
|
||||
const arr = fkColumnsPerTable.get(key)!;
|
||||
if (!arr.includes(col)) arr.push(col);
|
||||
}
|
||||
}
|
||||
|
||||
for (const table of data.tables) {
|
||||
const height = NODE_HEADER_HEIGHT + table.columns.length * NODE_ROW_HEIGHT;
|
||||
g.setNode(table.name, { width: NODE_WIDTH, height });
|
||||
}
|
||||
|
||||
for (const rel of data.relationships) {
|
||||
g.setEdge(rel.source_table, rel.target_table);
|
||||
}
|
||||
|
||||
dagre.layout(g);
|
||||
|
||||
const nodes: Node[] = data.tables.map((table) => {
|
||||
const pos = g.node(table.name);
|
||||
const tableKey = `${table.schema}.${table.name}`;
|
||||
return {
|
||||
id: table.name,
|
||||
type: "erdTable",
|
||||
position: { x: pos.x - NODE_WIDTH / 2, y: pos.y - pos.height / 2 },
|
||||
data: {
|
||||
label: table.name,
|
||||
schema: table.schema,
|
||||
columns: table.columns,
|
||||
fkColumnNames: fkColumnsPerTable.get(tableKey) ?? [],
|
||||
} satisfies ErdTableNodeData,
|
||||
};
|
||||
});
|
||||
|
||||
const edges: Edge[] = data.relationships.map((rel) => ({
|
||||
id: rel.constraint_name,
|
||||
source: rel.source_table,
|
||||
target: rel.target_table,
|
||||
type: "smoothstep",
|
||||
label: rel.constraint_name,
|
||||
labelStyle: { fontSize: 10, fill: "var(--muted-foreground)" },
|
||||
labelBgStyle: { fill: "var(--card)", fillOpacity: 0.8 },
|
||||
labelBgPadding: [4, 2] as [number, number],
|
||||
markerEnd: {
|
||||
type: MarkerType.ArrowClosed,
|
||||
width: 16,
|
||||
height: 16,
|
||||
color: "var(--muted-foreground)",
|
||||
},
|
||||
style: { stroke: "var(--muted-foreground)", strokeWidth: 1.5 },
|
||||
}));
|
||||
|
||||
return { nodes, edges };
|
||||
}
|
||||
|
||||
interface Props {
|
||||
connectionId: string;
|
||||
schema: string;
|
||||
}
|
||||
|
||||
export function ErdDiagram({ connectionId, schema }: Props) {
|
||||
const { data: erdData, isLoading, error } = useSchemaErd(connectionId, schema);
|
||||
|
||||
const layout = useMemo(() => {
|
||||
if (!erdData) return null;
|
||||
return buildLayout(erdData);
|
||||
}, [erdData]);
|
||||
|
||||
const [nodes, setNodes] = useState<Node[]>([]);
|
||||
const [edges, setEdges] = useState<Edge[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
if (layout) {
|
||||
setNodes(layout.nodes);
|
||||
setEdges(layout.edges);
|
||||
}
|
||||
}, [layout]);
|
||||
|
||||
const onNodesChange = useCallback(
|
||||
(changes: NodeChange[]) => setNodes((nds) => applyNodeChanges(changes, nds)),
|
||||
[],
|
||||
);
|
||||
|
||||
const onEdgesChange = useCallback(
|
||||
(changes: EdgeChange[]) => setEdges((eds) => applyEdgeChanges(changes, eds)),
|
||||
[],
|
||||
);
|
||||
|
||||
const onInit = useCallback((instance: { fitView: () => void }) => {
|
||||
setTimeout(() => instance.fitView(), 50);
|
||||
}, []);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex h-full items-center justify-center text-sm text-muted-foreground">
|
||||
Loading ER diagram...
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="flex h-full items-center justify-center text-sm text-destructive">
|
||||
Error loading ER diagram: {String(error)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!erdData || erdData.tables.length === 0) {
|
||||
return (
|
||||
<div className="flex h-full items-center justify-center text-sm text-muted-foreground">
|
||||
No tables found in schema "{schema}".
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="h-full w-full">
|
||||
<ReactFlow
|
||||
nodes={nodes}
|
||||
edges={edges}
|
||||
onNodesChange={onNodesChange}
|
||||
onEdgesChange={onEdgesChange}
|
||||
nodeTypes={nodeTypes}
|
||||
onInit={onInit}
|
||||
fitView
|
||||
colorMode="dark"
|
||||
minZoom={0.05}
|
||||
maxZoom={3}
|
||||
zoomOnScroll
|
||||
zoomOnPinch
|
||||
panOnScroll
|
||||
panOnScrollMode={PanOnScrollMode.Free}
|
||||
proOptions={{ hideAttribution: true }}
|
||||
>
|
||||
<Background gap={16} size={1} />
|
||||
<Controls className="!bg-card !border !shadow-sm [&>button]:!bg-card [&>button]:!border-border [&>button]:!text-foreground" />
|
||||
<MiniMap
|
||||
className="!bg-card !border"
|
||||
nodeColor="var(--muted)"
|
||||
maskColor="rgba(0, 0, 0, 0.7)"
|
||||
/>
|
||||
</ReactFlow>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
54
src/components/erd/ErdTableNode.tsx
Normal file
54
src/components/erd/ErdTableNode.tsx
Normal file
@@ -0,0 +1,54 @@
|
||||
import { memo } from "react";
|
||||
import { Handle, Position, type NodeProps } from "@xyflow/react";
|
||||
import type { ErdColumn } from "@/types";
|
||||
import { KeyRound, Link } from "lucide-react";
|
||||
|
||||
export interface ErdTableNodeData {
|
||||
label: string;
|
||||
schema: string;
|
||||
columns: ErdColumn[];
|
||||
fkColumnNames: string[];
|
||||
[key: string]: unknown;
|
||||
}
|
||||
|
||||
function ErdTableNodeComponent({ data }: NodeProps) {
|
||||
const { label, columns, fkColumnNames } = data as unknown as ErdTableNodeData;
|
||||
|
||||
return (
|
||||
<div className="min-w-[220px] rounded-lg border border-border bg-card text-card-foreground shadow-md">
|
||||
<div className="rounded-t-lg border-b bg-primary/10 px-3 py-2 text-xs font-bold tracking-wide text-primary">
|
||||
{label}
|
||||
</div>
|
||||
<div className="divide-y divide-border/50">
|
||||
{(columns as ErdColumn[]).map((col, i) => (
|
||||
<div key={i} className="flex items-center gap-1.5 px-3 py-1 text-[11px]">
|
||||
{col.is_primary_key ? (
|
||||
<KeyRound className="h-3 w-3 shrink-0 text-amber-500" />
|
||||
) : (fkColumnNames as string[]).includes(col.name) ? (
|
||||
<Link className="h-3 w-3 shrink-0 text-blue-400" />
|
||||
) : (
|
||||
<span className="h-3 w-3 shrink-0" />
|
||||
)}
|
||||
<span className="font-medium">{col.name}</span>
|
||||
<span className="ml-auto text-muted-foreground">{col.data_type}</span>
|
||||
{col.is_nullable && (
|
||||
<span className="text-muted-foreground/60">?</span>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<Handle
|
||||
type="target"
|
||||
position={Position.Left}
|
||||
className="!w-1.5 !h-1.5 !bg-primary !opacity-0 hover:!opacity-100 !border-none !min-w-0 !min-h-0"
|
||||
/>
|
||||
<Handle
|
||||
type="source"
|
||||
position={Position.Right}
|
||||
className="!w-1.5 !h-1.5 !bg-primary !opacity-0 hover:!opacity-100 !border-none !min-w-0 !min-h-0"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export const ErdTableNode = memo(ErdTableNodeComponent);
|
||||
Reference in New Issue
Block a user