Diagram becomes unresponsive with large data

[dhruv29011991]

Diagram freezes when using latest version i.e. 2.0.0 with large data of nodes and edges

[tisoap]

Hey @dhruv29011991 ! Could you share an URL with a minimal example on CodeSandbox or a minimal GitHub repository where the issue happens?

[dhruv29011991]

Hello @tisoap, thanks for responding, I have added the URL below for the example please have a look and let know if you require any more information from my end.

https://codesandbox.io/s/react-flow-demo-forked-jno5ub

[agrawal-rohit]

Facing this issue as well, the performance drop is pretty significant with as few as 25 nodes. I'm using a gridRatio of 9, any higher than that, and the paths lose their smoothness. I believe the issue is occurring because the react-flow hook useNodes re-renders all the edges even when a zoom or pan event occurs.

[tisoap]

On previous versions of react-flow-smart-edge I had debouncing code implemented on the library itself, wich got dropped with the v2 release and the introduction of getSmartEdge function. I need to either re-introduce debouncing or improve performance overall. I will look into navmesh as a possible path-finding substitute for this library.

For anyone facing this issue in the meantime, I recommend debouncing your custom edge implementation before calling getSmartEdge.

[agrawal-rohit]

Facing this issue as well, the performance drop is pretty significant with as few as 25 nodes. I'm using a gridRatio of 9, any higher than that, and the paths lose their smoothness. I believe the issue is occurring because the react-flow hook useNodes re-renders all the edges even when a zoom or pan event occurs.

So I've memoized the getSmartEdge by only executing it when the position or dimensions of a node changes, and it's a big improvement as it doesn't re-compute the edges during a zoom and pan event, only when a node is dragged around.

On previous versions of react-flow-smart-edge I had debouncing code implemented on the library itself, wich got dropped with the v2 release and the introduction of getSmartEdge function. I need to either re-introduce debouncing or improve performance overall. I will look into navmesh as a possible path-finding substitute for this library.

For anyone facing this issue in the meantime, I recommend debouncing your custom edge implementation before calling getSmartEdge.

Although @tisoap the performance is still not that great and I can notice a lot of stuttering when dragging nodes in a graph of 25-30 nodes. The navmesh integration and other performance improvements would be really appreciated 😇

[AlecSchneider]

@agrawal-rohit would you mind sharing your code/instructions for how you memoized getSmartEdge are you using React.useMemo or built your own cache?

[tisoap]

@AlecSchneider I didn't memoize getSmartEdge, but I debounced component that was using it. I.E. wait a couple ms after props update before rendering the component