fix(content-graph): address #132 review comments#133
Merged
Conversation
Review feedback from #132 batched into one branch: - Centre dashicon glyphs in satellite bubbles. The dashicons font's bbox reserves descender space the icons never use, so a bare 0.5 anchor parked the visible glyph in the disc's upper half. Anchor lowered to ~0.62 for dashicons + a per-icon nudge map for the outliers (admin-comments) + a larger 18px font in 28px discs so the optical centre is unambiguous. - Render satellite spokes BEHIND the focused node. Added a dedicated spokeLayer between edges and nodes; the focused node's disc now occludes the spoke origins instead of being painted across by them. - Selected state on the clicked satellite. Each ref gets a synthetic key (user:42, term:category:7, …) and the matching bubble picks up a thicker stroke + soft halo while its dossier is open. Selection auto-clears on back-to-post navigation. - iOS-style page transition on the side panel. The panel body is now a clipped stage holding sliding pages; forward push uses new-from-right + parallax-left, back pop uses new-from-left parallax + old-to-right. 240ms cubic-bezier(0.32, 0.72, 0, 1). Honors prefers-reduced-motion. - Tooltip pinned to the cursor. Pixi v8's event.global is already in canvas-local coordinates; the previous code subtracted the host's viewport rect, which is why the tooltip drifted far from the hovered satellite. Drop the rect subtraction. - Translucent rounded backing behind every node label so they remain legible over edge tangles + the dot-grid background. - Smooth alpha fade for labels across a smoothstep zoom band (0.55..0.95) instead of the previous binary cutoff at 0.85. Re: "different orbits per type" — tried it, but with the typical 1-2 satellites per kind it produced an off-balance cluster (each kind on its own concentric ring). Reverted to a single ring with even angular distribution; refs come from flattenDetail already banded by kind, so the ring still reads as colour-grouped as you walk around it.
Contributor
✅ WordPress Plugin Check Report
📊 ReportAll checks passed! No errors or warnings found. 🤖 Generated by WordPress Plugin Check Action • Learn more about Plugin Check |
Satellite labels (e.g. "Recipe", "admin") were rendering directly on the dot-grid background and frequently fused with neighbour- post labels or the focused-node disc when the layout placed them in tight proximity. Add a translucent rounded backing per satellite — same pattern the node labels already use — so each name reads as its own object regardless of what's behind it. Backing is computed once per satellite at build time (label width is fixed for the satellite's lifetime), so this is not an additional per-frame cost.
Two related fixes for the side panel: - Open / close now slide. The panel's outer container animates its width 0 ↔ 320px while the inner frame eases off to the right and fades, so the canvas reclaims the space smoothly when the user closes the panel and the panel arrives with a subtle parallax when opening. 220ms cubic-bezier + 180ms opacity, honors prefers-reduced-motion. Replaced the binary `host.hidden` toggle with a `--closed` class so the transition can run; the initial PHP-rendered `[hidden]` paint is pinned to no-transition so page load stays flicker-free. - The iOS-style sub-view transition (post → user/term/comment … and back) was wired correctly but never animated because `swapPage` read `currentPage` AFTER `renderCurrent` had already reassigned it to the new page — `prev === next` short-circuited the slide. Capture the outgoing page in `renderCurrent` and pass it explicitly so swapPage has a real `prev` to animate out.
Collaborator
AllTerrainDeveloper
left a comment
AllTerrainDeveloper
left a comment
There was a problem hiding this comment.
A few comments
Not great :)
- Seems the icon centering is not addressed.
Awesome!
- The text transition is superb
- The select state is good!
- The tooltip positioning is great!
- The "Back" smooth transition is nice!
- The post title font could be bigger, matching the rest of labels.
Also
- What about removing the alpha so the lines are truly hidden?
- That "bug"/glitch when a node is slightly moving and we click on it and its not opening is a bit annoying... I believe it has to be with the DRAG state. I don't think we need to drag anything in this view. Removing the drag features would solve it immediately I believe?
Earlier attempt used an off-centre anchor (0.5, 0.62) plus a single
per-kind y nudge, but that left the asymmetric glyphs (notably
admin-comments — bubble in upper-left + tail trailing down-right)
parked in the disc's upper-left corner.
Reset anchor to a clean (0.5, 0.5), bump the glyph to 20px so it
fills more of the 28px disc, and turn KIND_ICON_NUDGE into a per-
kind {x, y} map. The comment glyph gets {x: 2, y: 2} so the bubble
lands on the disc centre with the tail trailing past the lower-
right disc edge. Other kinds stay near zero with a +1y for users /
media / revisions.
Earlier values (+1 to +2) were not enough — every kind of glyph was still parked in the upper half of its disc. Pixi.Text bbox = ascent + descent for the font, but dashicons leave the descent empty, so the glyph centre sits ~ascent/2 above the bbox centre. For fontSize:20 that's ~3px upward. Setting y:3 across every kind brings the visible glyph onto the disc centre; comment keeps its +2 x nudge for the left-loaded speech-bubble bbox.
Bundle of fixes from the PR-comment round:
- No double loading. The native-window registry callback was
dropping the render Promise with `void`, so the framework's big-W
overlay hid before the graph had fetched its data. Await the
render and forward the returned `abort` as the framework's
teardown, so cleanup (Pixi destroy, panel destroy, toolbar
destroy) actually fires on close.
- Non-focus edges truly hidden during focus (alpha 0, not 0.05),
and the focused-side endpoint of every visible edge / spoke is
geometry-trimmed at the halo's outer edge so no line crosses the
focused-node disc.
- Edge visibility now zoom-aware. Smoothstep(0.45, 1.1) over the
world scale lifts the default edge alpha from 0.2 (overview) to
0.55 (1×+), so post-to-post links read clearly the moment you
zoom in, without cluttering the overview.
- Drag is back, threshold-gated. The earlier "click on a moving
node didn't open" bug was incidental `globalpointermove` events
flipping `isDragging` to true between down + up. Now drag only
promotes after the pointer travels >6px; small jitter stays a
click. Click also pins the node briefly so simulation drift
can't yank it from under the cursor.
- Sim warm-start in setData: spin the integrator min(90, 30 + n)
steps synchronously before the first paint so the window opens
onto a near-settled layout instead of nodes flying into place.
Initial reheat alpha lowered 0.15 → 0.12 for a calmer final
settle.
- Per-icon nudge for the speech-bubble glyph (`{x:1, y:4}`) and
media (`{x:-1, y:1}`) tuned visually against the rendered
output. Comment kept its own override because its tail-loaded
bbox isn't centre-balanced like the other dashicons.
Collaborator
Author
|
Thanks for your review @AllTerrainDeveloper! I have addressed all the comments:
This is ready for another review |
Collaborator
|
Looking! |
AllTerrainDeveloper
approved these changes
May 11, 2026
Collaborator
AllTerrainDeveloper
left a comment
AllTerrainDeveloper
left a comment
There was a problem hiding this comment.
Let's ship it! I found an unrelated not-nice UX that we can address on a new issue I will open now
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
2 participants
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.
Summary
Batches the eight review items from #132 into a single PR. Addresses the issue end-to-end.
0.5/0.5anchor parked the visible glyph in the disc's upper half. Anchor lowered to0.5/0.62for dashicons plus a per-icon nudge map (KIND_ICON_NUDGE) for outliers (admin-comments). Disc bumped 12 → 14, glyph 13 → 18.spokeLayercontainer betweenedgeLayerandnodeLayer; the focused node's disc now occludes the spoke origins instead of being painted across by them.user:42,term:category:7, …) and the matching bubble picks up a thicker stroke + soft halo while its dossier is open. Selection auto-clears on back-to-post navigation via a newonViewChangepanel callback.cubic-bezier(0.32, 0.72, 0, 1), honoursprefers-reduced-motion.event.globalis already canvas-local; subtracting the host's viewport rect was producing the drift the reviewer flagged. Dropped.Containerwith a translucent rounded-rect graphic + the text, drawn inlabelLayerso the whole thing fades together.scale > 0.85cutoff withsmoothstep(0.55, 0.95)overworld.scale.x."Different orbits per type" — tried, reverted
Implemented the per-kind concentric rings as suggested in the issue. With the typical 1-2 satellites per kind the result was an off-balance cluster (each kind landed on its own ring at increasing distances, and the staggered start angles bunched everyone on one side). Kept the single-ring layout with even angular distribution — much closer to the reference image attached in the issue. Refs come out of
flattenDetailalready banded by kind, so the ring still reads as colour-grouped as you walk around it.Closes #132
Test plan
prefers-reduced-motionin OS settings — panel transitions become instant