feat(schema): rich node cards on the fullscreen lineage graph (#47, PR1)#48
Merged
Merged
Conversation
Enrich the FULL-SCREEN schema-lineage graph with per-table cards while leaving the inline (compact) data-pane graph untouched. This is PR1 of issue #47 (parity with the system-audit generator); PR2 adds the transitive cross-DB walk + node detail pane. Implemented on the existing dagre + inline-SVG renderer rather than adopting the generator's Cytoscape stack, to stay within CLAUDE.md's two-runtime-dep budget and the 100%-per-file coverage model. - src/core/schema-cards.js (new, pure): buildCardModel / cardSize / columnRoles / buildCardGraph. Deterministic geometry (no DOM measurement) so dagre can size cards and happy-dom can test them. - src/net/ch-client.js: lineage query also selects total_rows/total_bytes and partition/sorting/primary/sampling keys; new loadSchemaCards() pulls system.columns (key-role flags) + system.data_skipping_indices via the tryQueryData best-effort seam (graceful on denial / old ClickHouse). - src/core/dot-layout.js: dagreLayout honors explicit node w/h (cards), else falls back to label-width + fixed height (pipeline/inline). - src/ui/explain-graph.js: rich card SVG (title, engine/rows/bytes header, divider, columns with PK/SK/PARTITION/SAMPLING badges, +N more, skip-index line); openSchemaFullscreen now draws cards. Shared graphSvgWithEdges scaffold across the plain + rich renderers. - src/ui/app.js + results.js: new expandSchemaGraph(focus) action loads the enriched dataset (lineage + cards in parallel) and opens the overlay; Expand button rewired to it, with a toast on load failure. - src/styles.css: card / badge / divider classes. Tests: new schema-cards.test.js + extended ch-client/dot-layout/explain-graph/ app/results specs. 906 tests pass; per-file coverage gate green. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01XmDqY6Bxf5b1fyQE8XwA2u
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What & why
PR1 of #47 — enrich the full-screen schema-lineage graph with rich per-table cards, leaving the inline (compact) data-pane graph untouched. The generator we're matching uses Cytoscape + 3 plugins; we reimplement the ideas on the existing dagre + inline-SVG renderer to stay within CLAUDE.md's two-runtime-dep budget and the 100%-per-file coverage model.
Fullscreen nodes are now cards showing engine · rows · compressed-bytes plus the top-16 columns with PK / SK / PARTITION / SAMPLING badges and a skip-index line. The rich dataset is fetched lazily on Expand — the inline graph's shape and behavior are frozen.
Changes
src/core/schema-cards.js(new, pure, 100%)buildCardModel/cardSize/columnRoles/buildCardGraph. Deterministic geometry (no DOM measurement) so dagre sizes cards and happy-dom tests them.src/net/ch-client.jstotal_rows/total_bytes+ partition/sorting/primary/sampling keys; newloadSchemaCards()pullssystem.columns+system.data_skipping_indicesvia thetryQueryDatabest-effort seam (graceful on denial / older ClickHouse). The two reads run concurrently.src/core/dot-layout.jsdagreLayouthonors explicit nodew/h(cards), else label-width + fixed height (pipeline/inline) — regression-safe.src/ui/explain-graph.jsopenSchemaFullscreendraws cards; sharedgraphSvgWithEdgesscaffold for the plain + rich renderers.src/ui/app.js,src/ui/results.jsexpandSchemaGraph(focus)action (parallel lineage + cards load, toast on failure); Expand button rewired.src/styles.cssTests
New
schema-cards.test.js+ extendedch-client/dot-layout/explain-graph/app/resultsspecs. 906 tests pass; per-file coverage gate green.Review
Ran a high-effort multi-angle review (correctness, removed-behavior, cross-file, reuse, efficiency, altitude, conventions). No correctness bugs survived verification; applied the cleanup/efficiency/UX findings (parallelized the card reads, de-duplicated the SVG scaffold, centralized card vertical metrics into
CARD.*, added expand-failure feedback).Deploy / verify
Deployed to github.demo (
user_files/github-play-sql.html, no restart). Inline graph unchanged; fullscreen Expand shows the rich cards. Cross-DB referenced nodes render header-only here — the transitive cross-DB walk + node detail pane land in PR2.Closes part of #47 (PR1; PR2 to follow).
🤖 Generated with Claude Code
https://claude.ai/code/session_01XmDqY6Bxf5b1fyQE8XwA2u