search

tisoap / react-flow-smart-edge

Custom Edge for React Flow that never intersects with other nodes
https://tisoap.github.io/react-flow-smart-edge/
MIT License
242 stars 26 forks source link

Diagram becomes unresponsive with large data #35

Open dhruv29011991 opened 2 years ago

dhruv29011991 commented 2 years ago

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

tisoap commented 1 year ago

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

dhruv29011991 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

@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 commented 1 year ago

@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