feat: Schema Visualizer, docs update & competitor comparison

* chore: add @xyflow/react, dagre, @types/dagre (Task 1) * feat: add SchemaGraph, TableNode, GraphColumn, Relationship types (Task 2) * feat: add SchemaGraph, TableNode, GraphColumn, Relationship Rust models (Task 3) * feat: add cardinality color/label helpers and legend data (Task 4) * feat: add schema_graph command skeleton with validation (Task 5) * feat: add PostgreSQL schema graph query builder + cardinality inference (Task 6) * feat: implement get_schema_graph for PostgreSQL + SQLite (Task 7) * feat: add getSchemaGraph IPC wrapper (Task 8) * feat: un-stub Schema Visualizer nav + add view branch placeholder (Task 9) * feat: add SchemaVisualizerNode custom React Flow table card (Task 10) * feat: add SchemaVisualizerPage with React Flow canvas (Task 11) * feat: wire SchemaVisualizerPage + error handling + style polish (Tasks 12-14) * perf: replace information_schema with pg_catalog for schema graph query (500x+ faster on remote PG) * fix: add DB selector, ghost-style dropdowns, dark controls, minimap styling, attribution * fix: always show schema selector, move attribution to top-left * fix: SelectDropdown close on outside click works in React Flow (capture phase) * style: remove border from attribution badge * style: restore bg on attribution, no border * fix: lower attribution z-index so dropdowns render above * fix: ensure toolbar + dropdowns stack above canvas attribution * feat: crow's foot markers on edges + collapsible legend * fix: restore missing tableCount state (was overwritten by legendOpen) * fix: move crow's foot marker defs inside ReactFlow SVG, remove duplicate external SVGs * fix: inject crow's foot SVG markers into ReactFlow SVG via DOM ref * fix: use hidden SVG before ReactFlow for crow's foot markers, remove DOM injection * feat: custom CrowsFootEdge component with inline crow's foot markers * feat: custom CrowsFootEdge with zero-or-one/zero-or-many notation + nullability-based cardinality * fix: strip markers, use clean text labels only on edges * fix: add SVG marker defs directly inside ReactFlow + url() references for crow's foot * fix: use custom CrowsFootEdge with BaseEdge + inline SVG symbols (no marker defs needed) * debug: add red/green circles at edge endpoints to verify custom edge renders * fix: remove stale duplicate edge data, use clean data.startMarker/endMarker * fix: use getSmoothStepPath offset points for correct tangent angle at endpoints * fix: thicker strokeWidth, position at handle coords, use path tangents * fix: use straight-line angle (not curve tangent) for marker rotation * fix: compute marker positions directly with raw math, no SVG transforms * fix: fixed-orientation symbols — | always vertical, crow's foot fans toward node * fix: dead simple — | vertical line, ← or → horizontal crow's foot based on edge direction * fix: increase marker gap to 12px so symbols aren't hidden behind handle dots * fix: correct offset direction (away from card into gap), G=4 * fix: remove duplicate G offset inside Mark (was canceling out the call-site offset) * fix: crow's foot back to fork shape — three lines converging to a tip * fix: flip crow's foot direction * fix: wider crow's foot spread (4→6) * feat: add crow's foot symbols to relationship legend * style: cleaner legend — horizontal edge with endpoint symbols + label * feat: handles on both sides, edge builder picks closest side based on dagre layout * fix: compute actual handle distances to pick shortest path * revert: PK always left, FK always right — one handle per column only * fix: lock edge marker direction via origRight, TB layout for horizontal spread, truncate long types * fix: semi-transparent minimap mask, border stroke for viewport visibility * feat: click edge to highlight (amber glow), all others dim to 15% opacity * feat: legend highlights matching cardinality row when edge is clicked * fix: crow's foot symbols now read color from edge style (amber when highlighted) * fix: highlighted edge gets zIndex 1000 to render on top * fix: folder empty message now checks unfiltered store, shows filter hint when connections exist but filtered out * feat: flat SVG DB icons from simple-icons (PostgreSQL, MySQL, SQLite, Redis) replacing emoji * chore: add *.db, *.sqlite, *.sqlite3 to .gitignore * docs: update README with 3-way competitor comparison + current roadmap; update AGENTS.md schema visualizer status
2026-07-29 22:36:59 +08:00
parent 3dab09f25d
commit 1f081a66e0
30 changed files with 1788 additions and 74 deletions
@@ -0,0 +1,80 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { SchemaVisualizerPage } from "./SchemaVisualizerPage";
+import { useDbViewerStore } from "../../stores/dbViewerStore";
+import { TooltipProvider } from "../ui/Tooltip";
+
+// Mock the Tauri invoke call
+vi.mock("@tauri-apps/api/core", () => ({
+  invoke: vi.fn().mockResolvedValue({
+    tables: [],
+    relationships: [],
+  }),
+}));
+
+// Mock the SchemaVisualizerNode to avoid React Flow complexity in tests
+vi.mock("./SchemaVisualizerNode", () => ({
+  SchemaVisualizerNode: () => <div data-testid="mock-node">Node</div>,
+}));
+
+describe("SchemaVisualizerPage", () => {
+  beforeEach(() => {
+    useDbViewerStore.getState().reset();
+    useDbViewerStore.setState({
+      schemas: ["public", "auth"],
+      currentSchema: "public",
+    });
+  });
+
+  it("renders the legend panel", () => {
+    render(
+      <TooltipProvider>
+        <SchemaVisualizerPage
+          connectionId="conn-1"
+          onSchemaChange={() => {}}
+        />
+      </TooltipProvider>,
+    );
+    expect(screen.getByText(/one-to-one/i)).toBeInTheDocument();
+    expect(screen.getByText(/one-to-many/i)).toBeInTheDocument();
+    expect(screen.getByText(/many-to-many/i)).toBeInTheDocument();
+  });
+
+  it("shows loading state initially", () => {
+    render(
+      <TooltipProvider>
+        <SchemaVisualizerPage
+          connectionId="conn-1"
+          onSchemaChange={() => {}}
+        />
+      </TooltipProvider>,
+    );
+    expect(screen.getByText(/loading schema/i)).toBeInTheDocument();
+  });
+
+  it("renders Reset Layout button", () => {
+    render(
+      <TooltipProvider>
+        <SchemaVisualizerPage
+          connectionId="conn-1"
+          onSchemaChange={() => {}}
+        />
+      </TooltipProvider>,
+    );
+    expect(screen.getByText(/reset layout/i)).toBeInTheDocument();
+  });
+
+  it("shows error message when introspection fails", async () => {
+    const { invoke } = await import("@tauri-apps/api/core");
+    (invoke as any).mockRejectedValueOnce(new Error("Connection lost"));
+
+    render(
+      <TooltipProvider>
+        <SchemaVisualizerPage connectionId="conn-1" onSchemaChange={() => {}} />
+      </TooltipProvider>,
+    );
+
+    const errorMsg = await screen.findByText(/failed to load schema/i);
+    expect(errorMsg).toBeInTheDocument();
+  });
+});