Fix core interaction bugs: orphan/duplicate arrows, drag-follow edit box, bloated inspector#72
Merged
Merged
Conversation
…box, bloated inspector Three dogfood bugs in the core interaction layer: 1. Flipping an edge direction added a 2nd arrow, and deleting a node left its edges' arrows behind. ROOT CAUSE: the surgical-reinit path in initializeVisualization() removed .nodes-group/.edges-group/.edge-labels-group/ .node-labels-container but NOT .arrows-group — so every rebuild appended a fresh arrows-group while the stale one (old/orphaned arrows) lingered. One line: also remove .arrows-group. Fixes both the flip-duplicate and the delete-orphan arrows (same cause). 2. The inline title-edit box didn't follow a node while dragging — its position derived from currentTransform (React state, only updated on zoom), so it lagged until release. Now an rAF loop (active only while editing) glues the overlay to the live sim position + live zoom transform, so it tracks drag, tick and zoom. 3. The right-side node inspector was a full-height 384px dock — huge and mostly empty for simple nodes. Now a compact floating card (w-72, max-h-70vh, content-height, top-right overlay) that no longer steals graph width. Also adds tests/diagnostics/core-interactions.spec.ts groundwork (a core-action matrix incl. the arrows==edges invariant that catches the arrow class of bugs). NOTE: verified by root-cause analysis; the local box is at load ~27 (shared LLM inference services), which flakes interaction tests and contaminates FPS — CI's clean runners are the authoritative check here. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The 'basic user checks' checklist: each core action is an independent probe that logs PASS/FAIL so one run shows the whole picture. Structural invariants (arrows == edges before/after flip+delete, no JS errors) are asserted; the UI-trigger probes are report-only until their click/coordinate logic is hardened on a quiet machine (the dev box is at load ~27 from shared LLM services, which flakes them). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
🧪 Comprehensive Test Suite
Full-stack smoke gate runs in the CI workflow. |
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.
Dogfood pass surfaced several broken basics. Root-caused and fixed:
1. Duplicate / orphan arrows (two reports, one cause)
Flipping an edge added a 2nd arrow; deleting a node left its edges' arrows behind.
Root cause: the surgical-reinit path in
initializeVisualization()removed.nodes-group,.edges-group,.edge-labels-group,.node-labels-container—but not
.arrows-group. So each rebuild appended a fresh arrows-group whilethe stale one lingered. One line fixes both (same cause).
2. Inline title-edit box didn't follow a dragged node
Its position came from
currentTransform(React state, only updated on zoom), soit lagged until release. Now an rAF loop (active only while editing) glues the
overlay to the live sim position + live zoom transform — tracks drag, tick, zoom.
3. Node inspector was huge and mostly empty
Was a full-height 384px dock. Now a compact floating card (
w-72,max-h-70vh,content-height, top-right overlay) that doesn't steal graph width.
Plus: a core-interaction matrix (
tests/diagnostics/core-interactions.spec.ts)The "basic user checks" checklist — each core action probed independently, logging
a PASS/FAIL matrix. Structural invariants gate (arrows == edges before/after flip
& delete; no JS errors); UI-trigger probes are report-only until hardened.
Verification note
Root-caused by analysis. The local dev box is at load ~27 (shared LLM
inference services — llama-server/piper/uvicorn + other sessions), which flakes
interaction tests and contaminates FPS readings; CI clean runners are the
authoritative check here. (The arrow fix is also exercised by the smoke grow
flow, which creates a node + edge.)
🤖 Generated with Claude Code