Skip to content

fix(relationships): draw avatars on graph nodes and fan multi-edges#42

Merged
SiteRelEnby merged 1 commit into
mainfrom
fix/relationship-graph-avatars-multiedge
Jul 15, 2026
Merged

fix(relationships): draw avatars on graph nodes and fan multi-edges#42
SiteRelEnby merged 1 commit into
mainfrom
fix/relationship-graph-avatars-multiedge

Conversation

@SiteRelEnby

Copy link
Copy Markdown
Collaborator

Fixes the two issues reported on the relationship graph, matching how the web viewer handles them.

Avatars weren't shown

Nodes were plain coloured circles with an initial. Each node already carries avatar_url, so it is now loaded through the app's configured Coil loader (relative URLs resolve via RelativeUrlInterceptor, and it uses the credential-free image client from #39), centre-cropped to a square, and clipped to the node circle with the node colour drawn as a ring border. It falls back to the colour + initial while loading or when a node has no avatar. Loads run off-canvas into ImageBitmaps and land in a snapshot state map, so the canvas redraws as each arrives.

Overlapping multi-edges

Multiple relationships between the same two nodes drew on top of each other (a single straight line) and their labels stacked at the shared midpoint, so "partner / protector / source" piled up. Now:

  • Edges that share a node pair are fanned into quadratic-Bezier curves (a lone edge stays straight), bowing about the pair's low->high axis so the group spreads symmetrically.
  • Each sibling's label is nudged along the edge (staggered t), so the labels separate lengthwise instead of colliding at the midpoint. That is what makes them readable on a near-vertical edge, where a purely sideways offset would still overlap the wide label boxes.
  • Directed arrowheads follow the curve's tangent at the target rather than the straight source->target direction.

Verification

  • :app:assemblePlayRelease :app:testPlayReleaseUnitTest green.
  • Needs a device/emulator pass: it's a Canvas rendering change I can't pixel-check here. Worth confirming against the reported case (two members with three relationship types between them): avatars render in the nodes, the three edges fan apart, and the three labels are individually readable.

Not in scope

The force simulation is still O(n^2) on the main thread (tracked separately, #172); this PR is only the two visual fixes.

Two visible issues in the relationship graph, matching how the web viewer
handles them.

Avatars weren't shown: nodes were plain coloured circles with an initial. Each
node's avatar_url is now loaded through the app's configured Coil loader (so
relative URLs resolve and the credential-free image client is used), centre-
cropped, and clipped to the node circle with the node colour as a ring border.
It falls back to the colour + initial while loading or when a node has no avatar.

Multiple relationships between the same two nodes drew on top of each other, and
their labels stacked at the shared midpoint. Edges that share a node pair are now
fanned into quadratic-Bezier curves (a lone edge stays straight), and each
sibling's label is nudged along the edge so they separate lengthwise instead of
overlapping. Directed arrowheads follow the curve's tangent at the target.
@SiteRelEnby
SiteRelEnby merged commit 82ca54a into main Jul 15, 2026
1 check passed
@SiteRelEnby
SiteRelEnby deleted the fix/relationship-graph-avatars-multiedge branch July 15, 2026 04:52
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.

1 participant