Skip to content

feat: ER diagram of tables and foreign keys - #19

Merged
Meanski merged 2 commits into
mainfrom
feat/er-diagram
Oct 8, 2026
Merged

Meanski merged 2 commits into
mainfrom
feat/er-diagram

Conversation

@Meanski

@Meanski Meanski commented Oct 7, 2026

Copy link
Copy Markdown
Owner

Item 8 of the parity roadmap.

  • A Diagram tab in the database explorer lays out every table (columns, key markers, types) and draws its foreign keys, using dagre for layered left-to-right placement.
  • Pan and zoom with fit-to-view. Search highlights matching tables and their relationships. Click a table to browse its rows. Export the diagram as SVG.
  • Main gets a new db:schema call that reads the whole catalog in three queries (columns, primary keys, foreign keys) for PostgreSQL and MySQL/MariaDB:
    • Composite foreign keys keep their column pairing (pg_constraint by ordinal; MySQL grouped by constraint).
    • The schema is the connection's current_schema(), and primary keys skip INCLUDE columns, matching tableInfo from feat: edit, insert and delete database rows #18.
    • Databases beyond 300 tables are cut off, and the diagram says so.
  • The explorer's toolbar and results tabs moved into their own components, keeping DatabaseExplorer under control. The icon buttons have accessible names.

Tests cover schema assembly (truncation, composite keys), both catalogs, the layout maths, and the diagram (search, browse-on-click, export, empty and truncated states). The features page is updated.

Copilot AI balanced review requested due to automatic review settings October 7, 2026 23:59
@coderabbitai

coderabbitai Bot commented Oct 7, 2026 •

Copy link
Copy Markdown
Contributor

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration
  • Configuration used: Repository: Meanski/noxed/.coderabbit.yaml
  • Review profile: CHILL
  • Plan: Advanced
  • Run ID: d4888638-55e0-4471-9963-170700145ecf

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review
  • Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@cloudflare-workers-and-pages

cloudflare-workers-and-pages Bot commented Oct 7, 2026 •

Copy link
Copy Markdown

Deploying noxed with  Cloudflare Pages  Cloudflare Pages

Latest commit: 10f9bbc
Status: ✅  Deploy successful!
Preview URL: https://90c7bfcc.noxed.pages.dev
Branch Preview URL: https://feat-er-diagram.noxed.pages.dev

View logs

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟡 Changes recommended

Cross-schema foreign keys can be mapped incorrectly, and exported SVGs omit key metadata.

2 open findings
What changed in this PR

Adds ER diagram support to the database explorer, including schema discovery, layout, navigation, search, zooming, and SVG export.

Changes:

  • Adds PostgreSQL/MySQL schema catalog IPC support.
  • Adds an interactive dagre-based ER diagram.
  • Extracts toolbar/tab components and expands test coverage.
File Description
src/​renderer/​src/​lib/​erLayout.ts Implements ER layout utilities.
src/​renderer/​src/​lib/​__tests__/​erLayout.test.ts Tests layout and transforms.
src/​renderer/​src/​components/​Database/​types.ts Adds the diagram panel type.
src/​renderer/​src/​components/​Database/​ResultsTabsBar.tsx Extracts result tabs and actions.
src/​renderer/​src/​components/​Database/​ExplorerToolbar.tsx Extracts explorer controls.
src/​renderer/​src/​components/​Database/​ErDiagram.tsx Implements the interactive diagram.
src/​renderer/​src/​components/​Database/​DatabaseExplorer.tsx Integrates diagram browsing.
src/​renderer/​src/​components/​Database/​__tests__/​ErDiagram.test.tsx Tests diagram interactions.
src/​renderer/​src/​components/​Database/​__tests__/​DatabaseExplorer.test.tsx Tests explorer integration.
src/​renderer/​src/​__tests__/​harness.tsx Mocks the schema API.
src/​preload/​index.ts Exposes schema IPC.
src/​preload/​index.d.ts Types schema responses.
src/​main/​ipc/​database.ts Reads and assembles catalogs.
src/​main/​ipc/​__tests__/​database.test.ts Tests schema assembly and queries.
package.json Adds dagre.
package-lock.json Locks dagre dependencies.
docs/​features.html Documents ER diagrams.

🧠 Review effort: Balanced


Give feedback about Copilot approvals in this survey to enter a drawing for a $150 gift card.

Comment thread src/main/ipc/database.ts Outdated
Comment thread src/renderer/src/components/Database/ErDiagram.tsx Outdated
Copilot AI balanced review requested due to automatic review settings October 8, 2026 00:03

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🔵 Needs a closer look

Relationship metadata is incomplete or inaccessible in key views, and dotted identifiers can corrupt foreign-key identity.

0 open findings

2 resolved since last review
Previously missed (4)

In code that hasn't changed since last review

Medium severity Use unambiguous encoding for relationship tuple keys

src/​main/​ipc/​database.ts:358

Using . as a tuple separator is ambiguous for valid quoted identifiers. For example, table a.b with constraint c collides with table a and constraint b.c, causing the two foreign keys to be merged into one corrupted relationship. Encode the tuple unambiguously.

Medium severity Preserve relationship direction and labels in exported SVG

src/​renderer/​src/​components/​Database/​ErDiagram.tsx:101

The exported paths omit both the arrow marker and e.label. As a result, the downloaded diagram loses relationship direction and column pairing; multiple foreign keys between the same tables become indistinguishable. Preserve the marker and escaped relationship label in the SVG.

This issue also appears on line 173 of the same file.

Medium severity Prevent collisions in React edge keys

src/​renderer/​src/​lib/​erLayout.ts:94

This edge key can collide when table or constraint names contain dots (for example, a.b/c and a/b.c). Duplicate React keys can reconcile the wrong relationship when highlighting or re-rendering; encode the identifier tuple unambiguously.

Low severity Pluralize table and relationship counts independently

src/​renderer/​src/​components/​Database/​ErDiagram.tsx:137

Singular schemas are rendered as “1 tables · 1 relationships”. Pluralize each count independently.

🧠 Review effort: Balanced


Give feedback about Copilot approvals in this survey to enter a drawing for a $150 gift card.

@Meanski
Meanski merged commit 9f9105c into main Oct 8, 2026
5 checks passed
@Meanski
Meanski deleted the feat/er-diagram branch October 8, 2026 00:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants