Read node contents/diagram in place + zoom-decoupled legibility (PR-3/PR-4) - #87
Merged
Merged
Conversation
…ibility (PR-3/PR-4) Closes the core "zoom does double duty" UX problem: zoom was both spatial navigation AND the readability control, so reading a label/contents meant zooming all the way in. PR-3 — expand-in-place peek: a ⛶ icon on every node card opens a readable Card/Contents/Diagram panel anchored to the node on the canvas (reuses the NodeInspector with a new `compact` variant + NodeContentRenderer/NodeSubgraphPreview). It tracks its node every frame via rAF + d3.zoomTransform (same technique as the inline-rename box), clamps to the viewport, closes on Esc / graph-change / when its node leaves the simulation. PR-4 — legibility floor: the primary label (title) is wrapped in a counter-scaled .node-title-group so its on-screen size never drops below ~12px within the working zoom band (kept readable when zoomed out, not only when zoomed in); the title also appears across the band, not just past one threshold. The in-card description now truncates honestly with an ellipsis instead of silently vanishing. Perf-safe: the counter-scale pass is skipped in dense-graph data-simplify mode; new code reads the live d3 transform (the currentTransform state has no .k). Verified: tests/diagnostics/node-expand-legibility.spec.ts (PR-3 anchored peek + PR-4 on-screen floor), existing node-inspector diagnostic still green, smoke 5/5, typecheck + lint + build clean. Adversarial review pass applied (honest-preview + title-opacity consistency across build/poll paths, zoom-pass gating, panel auto-close on delete). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
🧪 Comprehensive Test Suite
Full-stack smoke gate runs in the CI workflow. |
mvalancy
added a commit
that referenced
this pull request
Jun 18, 2026
…iority/status) (#110) * LAYOUT-3: dashboard — compact summary + one dense status grid (was sparse/oversized) On desktop the dashboard read as huge boxes with tiny content: a tall near-empty "Total Tasks" banner and 9 single-digit status cards spread across 3 sparse 3-column rows. Make it clear/readable/organized: - Total Tasks becomes a compact one-line summary strip (px-5 py-3) instead of a full p-8 hero. - The 9 status cards collapse into ONE responsive grid (2 cols phone → 3 → 5 on desktop, gap-3, p-4) so they read as a tidy stat panel and the analytics section rises above the fold. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * EDIT-1: in-context node quick-edit popover (double-click) — title/desc/type/priority/status Double-clicking a node now opens a compact, node-anchored quick editor instead of only renaming the title — edit every field in context without the heavy details modal (#87): - Title + Description (inline text/textarea), Type + Status (chip pickers), Priority (% slider mapped to the 0–1 float). Status shows the canonical enum statuses (the card's "%" is derived from the enum, so a picker — not a raw %-slider — is the correct control; a literal % slider would have no field to write to). - Each field saves immediately (optimistic updateWorkItems) with an undo entry; Esc / close button / graph-switch dismiss it. Single click+drag still moves the node (only a genuine double-click opens the editor). - New presentational component NodeQuickEdit.tsx; the grow-flow still uses the inline rename box for naming brand-new nodes. Follow-up (noted): timestamped status notes/comments (needs a metadata model) and per-sub-element double-click targets. Tests: tests/e2e/node-quick-edit.spec.ts @quickedit (2/2) — opens with every field + Esc closes; title edit persists to the graph and reverts. THE GATE 5/5. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
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
Finishes the node-inspector plan's last two phases, closing the "zoom does double duty" problem the user named — zoom was both navigation and the readability control, so reading a node's label or contents meant zooming all the way in.
PR-3 — expand-in-place peek
NodeInspector(newcompact+rootTestIdprops) +NodeContentRenderer(compact) +NodeSubgraphPreview— no duplication.rAF+d3.zoomTransform(same technique as the inline-rename box), clamps to the viewport, and closes on Esc / graph change / when its node leaves the simulation.PR-4 — zoom-decoupled legibility floor
.node-title-groupso its on-screen size never drops below ~12px within the working zoom band — readable when zoomed out, not only when zoomed in. The title also appears across the band rather than past a single hard threshold.…instead of silently vanishing when too long.data-simplifymode; new code reads the live d3 transform (thecurrentTransformstate has no.k).Verification
tests/diagnostics/node-expand-legibility.spec.ts: PR-3 anchored peek (Card/Contents/Diagram, fits viewport, glued through zoom, Esc closes) + PR-4 on-screen floor (title 14px at k=0.61 where native would be 8.6px).node-inspectordiagnostic (PR-2) still green; smoke 5/5; typecheck + lint + build clean.🤖 Generated with Claude Code