Nested Nodes ordering instable

I’m submitting a…

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:

Current behavior

When working with expanding and collapsing nested nodes, reaflow seems to change the ordering of the nodes (even though the sequence of the input arrays stays similar).

Expected behavior

I would expect reaflow not to change the ordering of the nodes on the canvas depending on if it needs to draw edges to children or not.

Minimal reproduction of the problem with instructions

To reproduce the problem, note in which sequence the nodes are laid out on the canvas. Then click on nodes 2 and 3 to expand or collapse them, which will display the children of nodes 2 and 3.

I recorded a gif that demonstrates the problematic behaviour:

You can play around with that example here: https://codesandbox.io/s/vigorous-agnesi-nzl6f

What is the motivation / use case for changing the behavior?

From a user’s perspective, nodes changing where they are displayed can confuse and make it difficult to understand complex graphs.

Environment

Libs:
- react version: 17.0.2
- reaflow: 3.1.3


Browser:
- [x] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [x] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

The code sandbox example is a bit hacky. I hope that doesn’t distract from the actual issue.

@amcdnl I’m happy to contribute, but I need guidance/pointers on where to start investigating?

[amcdnl]

Collapse and expand isn’t built in out of the box but essentially all you need to do is manipulate your graph. I will try to put together a demo on this!

[Vishal-Isharani]

The same is happening with a simple list of nodes, Check out this https://react-3qjytm.stackblitz.io