Skip to content

Conversation

@itai-gendler
Copy link

Problem

Nodes flicker to (0,0) or spiral positions during initial render, layout changes, or when adding nodes dynamically. This happens when node coordinates are undefined/NaN.

Solution

Ensure all nodes have valid x/y coordinates (defaulting to graph center) before layout calculation. This prevents D3's force simulation from initializing nodes at invalid positions.

Changes

  • Added coordinate validation in _calculateLayout() before any layout algorithm runs
  • Nodes with invalid coordinates are initialized to graph center (width/2, height/2)

Testing

  • ✅ Initial render
  • ✅ Layout switching
  • ✅ Dynamic node addition
  • ✅ No console errors

Ensure nodes have valid x/y coordinates before layout calculation to prevent
flickering when coordinates are undefined/NaN during initial render, layout
changes, or dynamic node additions.
@github-actions
Copy link

github-actions bot commented Nov 13, 2025

CLA Assistant Lite bot ✅ All required contributors have signed the F5 CLA for this PR. Thank you!

@itai-gendler
Copy link
Author

I have hereby read the F5 CLA and agree to its terms

@itai-gendler
Copy link
Author

recheck

@itai-gendler
Copy link
Author

well after more validation. this improves but doesn't fix the issue.
i'm not sure why, but many times when layout is switched there is a flickering occuring.
i am using vue.js.

@lee00678
Copy link
Collaborator

lee00678 commented Dec 5, 2025

@itai-gendler thanks for the contribution! We will take a look at this.

@rokotyan
Copy link
Contributor

rokotyan commented Dec 5, 2025

@itai-gendler Do you happen to have a reproducible example? I wonder why the nodes have undefined/NaN coordinates in the first place

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.

3 participants