search

uber / react-digraph

A library for creating directed graph editors
MIT License
2.63k stars 268 forks source link

Creating large graphs bogs down the browser #89

Open ajbogh opened 6 years ago

ajbogh commented 6 years ago

Describe the bug Using the example site, creating a large graph will block the browser as the rendering processes many nodes.

To Reproduce Steps to reproduce the behavior:

  1. Go to example site
  2. Type in 1000 nodes
  3. Tab out of input box or click Add Nodes button
  4. Attempt to zoom, select, or move nodes as they are being rendered
  5. Notice that zooming, selecting, and moving nodes essentially stops later on during the rendering cycle.

Expected behavior Node selection, zoom, and moving may be slower than normal but it shouldn't stop completely.

Desktop (please complete the following information):

dggriffin commented 5 years ago

I thought I'd mention that there's also an inflection point at around 50 or so nodes where the zoom/pan functionality shifts from being slow to being impractical. It can significantly affect the usability of this component for apps that commonly display large DAGs.

pash90 commented 5 years ago

@ajbogh Any updates on this issue? My company would love to use this but performance matters a lot when visualising our product and we need to be able to render at least 200 nodes or so at any given time

ajbogh commented 5 years ago

Hi @pash90. We are planning a v7.0+ version that should include a fix for this. The problem occurs because we have to check each and every node on every update. This incurs a significant time lag, as we're aware of here. The original code simply checked if the node array reference changed, but this wasn't good enough for a particular consumer, so we had to loop through other methods.

In the future we will change the API to use a different node/edge object structure which will make searching significantly faster.

pash90 commented 5 years ago

@ajbogh thanks for replying! Currently I'm using Cytoscape with Cola extension in the product but my first choice was this repo. Once I came across performance issues, I switched to Cytoscape. Prolly something that the Uber team might wanna have look at? Its open source too 👍

Djazouli commented 4 years ago

Hello ! Is there any update on this issue ? Maybe a release date for 7.0+ ? I am currently running version 6.7.1, and I am having trouble going over 500+ nodes (1000+ edges). (Adding nodes can then take several seconds)

Thank you very much, have a nice day