adrianbonpin/gridline
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat: Schema Visualizer, docs update & competitor comparison

Browse Source 
* 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
This commit is contained in:
adrianbonpin
2026-07-29 22:36:59 +08:00
committed by GitHub
parent 3dab09f25d
commit 1f081a66e0
30 changed files with 1788 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/connections/ConnectionCard.tsx
+3 -3
View File
@@ -1,6 +1,6 @@
import { memo } from "react";
import type { Connection, Tag } from "../../lib/types";
import { DB_ICONS, DB_LABELS } from "../../lib/dbIcons";
import { DbIcon, DB_LABELS } from "../../lib/dbIcons";
import { ENV_LABELS, ENV_COLORS } from "../../lib/environment";
import { TagBadge } from "../tags/TagBadge";
import { Check, GripVertical } from "lucide-react";
@@ -75,8 +75,8 @@ function ConnectionCardBase({
</div>
<div className="p-4">
<div className="flex items-center gap-3 mb-2">
<div className="w-9 h-9 rounded-lg bg-surface-raised border border-border flex items-center justify-center text-xl">
{DB_ICONS[connection.db_type] ?? "❓"}
<div className="w-9 h-9 rounded-lg bg-surface-raised border border-border flex items-center justify-center overflow-hidden">
<DbIcon type={connection.db_type} size={20} />
</div>
<div className="flex-1 min-w-0">
<div className="font-semibold truncate text-text">
src/components/connections/ConnectionGrid.tsx
+15 -4
View File
@@ -1,10 +1,12 @@
import type { Connection, Folder, Tag } from "../../lib/types";
import { useMemo } from "react";
import { Folder as FolderIcon, Check, Pencil, Trash2 } from "lucide-react";
import { useDroppable } from "@dnd-kit/core";
import { ConnectionCard } from "./ConnectionCard";
import { FolderBreadcrumb } from "../folders/FolderBreadcrumb";
import { getChildFolders } from "../../lib/utils";
import { getChildFolders, getDescendantFolderIds } from "../../lib/utils";
import { useUiStore } from "../../stores/uiStore";
import { useConnectionStore } from "../../stores/connectionStore";
import { TagBadge } from "../tags/TagBadge";
interface DroppableFolderCardProps {
@@ -136,7 +138,14 @@ export function ConnectionGrid({
const directConnections = connections.filter(
(c) => c.folder_id === currentFolderId,
);
const hasItems = visibleFolders.length > 0 || directConnections.length > 0;
const allStoreConnections = useConnectionStore((s) => s.connections);
const allStoreFolders = useConnectionStore((s) => s.folders);
// Check if any direct connections OR any subfolder has connections anywhere below
const hasItems = visibleFolders.length > 0 || directConnections.length > 0 ||
(currentFolderId && allStoreConnections.some((c) => {
const allowed = new Set(getDescendantFolderIds(allStoreFolders, currentFolderId));
return c.folder_id !== null && allowed.has(c.folder_id);
}));
const isSelecting = selectedItemIds.length > 0;
const activeFolder = currentFolderId
? (folders.find((f) => f.id === currentFolderId) ?? null)
@@ -199,8 +208,10 @@ export function ConnectionGrid({
>
{visibleFolders.map((f) => {
const isSelected = selectedItemIds.includes(f.id);
const count = directConnections.filter(
(c) => c.folder_id === f.id,
// Count all connections in this subfolder (including nested descendants)
const subIds = new Set(getDescendantFolderIds(folders, f.id));
const count = allStoreConnections.filter(
(c) => c.folder_id !== null && subIds.has(c.folder_id),
).length;
const subfolderCount = getChildFolders(
folders,