modified: backend/src/controllers/schemaController.ts

modified: frontend/package.json modified: frontend/src/pages/DatabaseSchema.tsx
2026-01-27 23:49:47 +03:00
parent d8dffb5ee1
commit c780979b57
3 changed files with 119 additions and 61 deletions
--- a/backend/src/controllers/schemaController.ts
+++ b/backend/src/controllers/schemaController.ts
@@ -38,13 +38,15 @@ async function parsePostgresSchema(databaseId: string): Promise<SchemaData> {
    throw new Error('Database not found or not active');
  }

-  // Get all tables
+  // Get all tables with comments via pg_catalog
  const tablesResult = await pool.query(`
    SELECT
      t.table_schema,
      t.table_name,
-      obj_description((t.table_schema || '.' || t.table_name)::regclass, 'pg_class') as table_comment
+      pg_catalog.obj_description(c.oid, 'pg_class') as table_comment
    FROM information_schema.tables t
+    LEFT JOIN pg_catalog.pg_class c ON c.relname = t.table_name
+    LEFT JOIN pg_catalog.pg_namespace n ON n.oid = c.relnamespace AND n.nspname = t.table_schema
    WHERE t.table_schema NOT IN ('pg_catalog', 'information_schema')
      AND t.table_type = 'BASE TABLE'
    ORDER BY t.table_schema, t.table_name
@@ -61,8 +63,10 @@ async function parsePostgresSchema(databaseId: string): Promise<SchemaData> {
        c.is_nullable,
        c.column_default,
        CASE WHEN pk.column_name IS NOT NULL THEN true ELSE false END as is_primary,
-        col_description((c.table_schema || '.' || c.table_name)::regclass, c.ordinal_position) as column_comment
+        pg_catalog.col_description(pc.oid, c.ordinal_position) as column_comment
      FROM information_schema.columns c
+      LEFT JOIN pg_catalog.pg_class pc ON pc.relname = c.table_name
+      LEFT JOIN pg_catalog.pg_namespace pn ON pn.oid = pc.relnamespace AND pn.nspname = c.table_schema
      LEFT JOIN (
        SELECT ku.column_name, ku.table_schema, ku.table_name
        FROM information_schema.table_constraints tc
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -18,6 +18,7 @@
    "@monaco-editor/react": "^4.6.0",
    "@tanstack/react-query": "^5.14.2",
    "@xyflow/react": "^12.0.0",
+    "@dagrejs/dagre": "^1.1.4",
    "axios": "^1.6.2",
    "clsx": "^2.0.0",
    "cmdk": "^0.2.0",
--- a/frontend/src/pages/DatabaseSchema.tsx
+++ b/frontend/src/pages/DatabaseSchema.tsx
@@ -1,4 +1,4 @@
-import { useState, useMemo } from 'react';
+import { useState, useMemo, useEffect } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import {
  ReactFlow,
@@ -10,8 +10,10 @@ import {
  useNodesState,
  useEdgesState,
  MarkerType,
+  Position,
 } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
+import Dagre from '@dagrejs/dagre';
 import { Database as DatabaseIcon, RefreshCw, Loader2, Key, Link } from 'lucide-react';
 import { databasesApi, schemaApi, TableInfo, SchemaData } from '@/services/api';
 import { Database } from '@/types';
@@ -19,34 +21,48 @@ import { Database } from '@/types';
 // Custom node for table
 function TableNode({ data }: { data: TableInfo & Record<string, unknown> }) {
  return (
-    <div className="bg-white border-2 border-gray-300 rounded-lg shadow-lg min-w-64 overflow-hidden">
+    <div className="bg-white border-2 border-gray-300 rounded-lg shadow-lg min-w-64 max-w-80 overflow-hidden">
      {/* Table header */}
      <div className="bg-primary-600 text-white px-3 py-2 font-semibold text-sm">
        <div className="flex items-center gap-2">
          <DatabaseIcon size={14} />
-          <span>{data.schema}.{data.name}</span>
+          <span className="truncate">{data.name}</span>
        </div>
        {data.comment && (
-          <div className="text-xs text-primary-200 mt-1 font-normal">{data.comment}</div>
+          <div className="text-xs text-primary-200 mt-1 font-normal truncate" title={data.comment}>
+            {data.comment}
+          </div>
        )}
      </div>

      {/* Columns */}
-      <div className="divide-y divide-gray-100">
+      <div className="divide-y divide-gray-100 max-h-64 overflow-y-auto">
        {data.columns.map((col) => (
          <div
            key={col.name}
-            className="px-3 py-1.5 text-xs flex items-center gap-2 hover:bg-gray-50"
+            className="px-3 py-1.5 text-xs flex items-center gap-2 hover:bg-gray-50 cursor-default group relative"
+            title={col.comment || undefined}
          >
-            {col.is_primary && <Key size={12} className="text-yellow-500 flex-shrink-0" />}
+            <div className="flex items-center gap-1 flex-shrink-0">
+              {col.is_primary && <Key size={11} className="text-yellow-500" />}
              {data.foreign_keys.some(fk => fk.column === col.name) && (
-              <Link size={12} className="text-blue-500 flex-shrink-0" />
+                <Link size={11} className="text-blue-500" />
              )}
-            <span className={`font-medium ${col.is_primary ? 'text-yellow-700' : 'text-gray-700'}`}>
+            </div>
+            <span className={`font-medium truncate ${col.is_primary ? 'text-yellow-700' : 'text-gray-700'}`}>
              {col.name}
            </span>
-            <span className="text-gray-400 flex-1">{col.type}</span>
-            {!col.nullable && <span className="text-red-400 text-[10px]">NOT NULL</span>}
+            <span className="text-gray-400 truncate flex-1 text-right">{col.type}</span>
+            {!col.nullable && <span className="text-red-400 text-[10px] flex-shrink-0">NN</span>}
+
+            {/* Tooltip for column comment */}
+            {col.comment && (
+              <div className="absolute left-full ml-2 top-0 z-50 hidden group-hover:block">
+                <div className="bg-gray-900 text-white text-xs rounded px-2 py-1 max-w-64 whitespace-normal shadow-lg">
+                  {col.comment}
+                </div>
+              </div>
+            )}
          </div>
        ))}
        {data.columns.length === 0 && (
@@ -54,7 +70,12 @@ function TableNode({ data }: { data: TableInfo & Record<string, unknown> }) {
        )}
      </div>

-      {/* Column comments tooltip would go here in a more advanced version */}
+      {/* FK summary */}
+      {data.foreign_keys.length > 0 && (
+        <div className="bg-blue-50 px-3 py-1.5 text-xs text-blue-600 border-t border-blue-100">
+          {data.foreign_keys.length} FK
+        </div>
+      )}
    </div>
  );
 }
@@ -63,50 +84,80 @@ const nodeTypes = {
  table: TableNode,
 };

-function generateNodesAndEdges(schema: SchemaData): { nodes: Node[]; edges: Edge[] } {
-  const nodes: Node[] = [];
-  const edges: Edge[] = [];
-  const tablePositions = new Map<string, { x: number; y: number }>();
+// Calculate node height based on columns count
+function getNodeHeight(table: TableInfo): number {
+  const headerHeight = 44;
+  const columnHeight = 28;
+  const fkBarHeight = table.foreign_keys.length > 0 ? 28 : 0;
+  const maxVisibleColumns = 10;
+  const visibleColumns = Math.min(table.columns.length, maxVisibleColumns);
+  return headerHeight + (visibleColumns * columnHeight) + fkBarHeight + 8;
+}

-  // Calculate positions in a grid layout
-  const cols = Math.ceil(Math.sqrt(schema.tables.length));
-  const nodeWidth = 280;
-  const nodeHeight = 200;
-  const gapX = 100;
-  const gapY = 80;
+function getLayoutedElements(schema: SchemaData): { nodes: Node[]; edges: Edge[] } {
+  const g = new Dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({}));

-  schema.tables.forEach((table, index) => {
-    const col = index % cols;
-    const row = Math.floor(index / cols);
-    const x = col * (nodeWidth + gapX);
-    const y = row * (nodeHeight + gapY);
-
-    const fullName = `${table.schema}.${table.name}`;
-    tablePositions.set(table.name, { x, y });
-    tablePositions.set(fullName, { x, y });
-
-    nodes.push({
-      id: fullName,
-      type: 'table',
-      position: { x, y },
-      data: { ...table } as TableInfo & Record<string, unknown>,
-    });
+  g.setGraph({
+    rankdir: 'LR', // Left to Right
+    nodesep: 80,   // Horizontal separation between nodes
+    ranksep: 120,  // Vertical separation between ranks
+    marginx: 50,
+    marginy: 50,
  });

-  // Create edges for foreign keys
+  // Add nodes
+  schema.tables.forEach((table) => {
+    const nodeId = `${table.schema}.${table.name}`;
+    const width = 280;
+    const height = getNodeHeight(table);
+    g.setNode(nodeId, { width, height });
+  });
+
+  // Add edges
  schema.tables.forEach((table) => {
    const sourceId = `${table.schema}.${table.name}`;
-
    table.foreign_keys.forEach((fk) => {
-      // Try to find target table
-      let targetId = schema.tables.find(t => t.name === fk.references_table);
-      if (targetId) {
+      const targetTable = schema.tables.find(t => t.name === fk.references_table);
+      if (targetTable) {
+        const targetId = `${targetTable.schema}.${targetTable.name}`;
+        g.setEdge(sourceId, targetId);
+      }
+    });
+  });
+
+  // Run layout
+  Dagre.layout(g);
+
+  // Create nodes with positions
+  const nodes: Node[] = schema.tables.map((table) => {
+    const nodeId = `${table.schema}.${table.name}`;
+    const nodeWithPosition = g.node(nodeId);
+
+    return {
+      id: nodeId,
+      type: 'table',
+      position: {
+        x: nodeWithPosition.x - nodeWithPosition.width / 2,
+        y: nodeWithPosition.y - nodeWithPosition.height / 2,
+      },
+      data: { ...table } as TableInfo & Record<string, unknown>,
+      sourcePosition: Position.Right,
+      targetPosition: Position.Left,
+    };
+  });
+
+  // Create edges
+  const edges: Edge[] = [];
+  schema.tables.forEach((table) => {
+    const sourceId = `${table.schema}.${table.name}`;
+    table.foreign_keys.forEach((fk) => {
+      const targetTable = schema.tables.find(t => t.name === fk.references_table);
+      if (targetTable) {
+        const targetId = `${targetTable.schema}.${targetTable.name}`;
        edges.push({
          id: `${fk.constraint_name}`,
          source: sourceId,
-          target: `${targetId.schema}.${targetId.name}`,
-          sourceHandle: fk.column,
-          targetHandle: fk.references_column,
+          target: targetId,
          type: 'smoothstep',
          animated: true,
          style: { stroke: '#3b82f6', strokeWidth: 2 },
@@ -114,9 +165,10 @@ function generateNodesAndEdges(schema: SchemaData): { nodes: Node[]; edges: Edge
            type: MarkerType.ArrowClosed,
            color: '#3b82f6',
          },
-          label: fk.column,
+          label: `${fk.column} → ${fk.references_column}`,
          labelStyle: { fontSize: 10, fill: '#666' },
-          labelBgStyle: { fill: 'white', fillOpacity: 0.8 },
+          labelBgStyle: { fill: 'white', fillOpacity: 0.9 },
+          labelBgPadding: [4, 2] as [number, number],
        });
      }
    });
@@ -155,21 +207,21 @@ export default function DatabaseSchema() {

  const schema = schemaResponse?.data;

-  const { nodes: initialNodes, edges: initialEdges } = useMemo(() => {
+  const { nodes: layoutedNodes, edges: layoutedEdges } = useMemo(() => {
    if (!schema) return { nodes: [], edges: [] };
-    return generateNodesAndEdges(schema);
+    return getLayoutedElements(schema);
  }, [schema]);

-  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
-  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+  const [nodes, setNodes, onNodesChange] = useNodesState<Node>([]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>([]);

  // Update nodes when schema changes
-  useMemo(() => {
-    if (initialNodes.length > 0) {
-      setNodes(initialNodes);
-      setEdges(initialEdges);
+  useEffect(() => {
+    if (layoutedNodes.length > 0) {
+      setNodes(layoutedNodes);
+      setEdges(layoutedEdges);
    }
-  }, [initialNodes, initialEdges, setNodes, setEdges]);
+  }, [layoutedNodes, layoutedEdges, setNodes, setEdges]);

  if (isLoadingDatabases) {
    return (
@@ -180,7 +232,7 @@ export default function DatabaseSchema() {
  }

  return (
-    <div className="flex flex-col -m-8 bg-white" style={{ height: 'calc(100vh - 65px)' }}>
+    <div className="flex flex-col -m-8 bg-white overflow-hidden" style={{ height: 'calc(100vh - 65px)' }}>
      {/* Toolbar */}
      <div className="flex items-center gap-4 p-3 border-b border-gray-200 bg-gray-50 flex-shrink-0">
        <div className="flex items-center gap-2">
@@ -235,7 +287,7 @@ export default function DatabaseSchema() {
          </div>
        )}

-        {selectedDbId && !isLoadingSchema && schema && (
+        {selectedDbId && !isLoadingSchema && schema && nodes.length > 0 && (
          <ReactFlow
            nodes={nodes}
            edges={edges}
@@ -243,6 +295,7 @@ export default function DatabaseSchema() {
            onEdgesChange={onEdgesChange}
            nodeTypes={nodeTypes}
            fitView
+            fitViewOptions={{ padding: 0.2 }}
            minZoom={0.1}
            maxZoom={2}
            defaultEdgeOptions={{