Extreme Performance Issues With 600+ Nodes & Edges

Compared to G6 (GGEditor) and cytoscapeJS with similar data structure the load of graph is almost instant (< 1 second).

Here is example static page I created with the same data across 3 different graph frameworks. Graph Tests

Created also example page with X6 problem: https://x6grapheditor.z16.web.core.windows.net/

Expected Behavior

• the data to be loaded instantly and zoom in/out is smooth with 600+ nodes & edges

Current Behavior

• when trying to zoom out the page completely freezes for good minute and each action afterwards is beyond slow

Steps To Reproduce

1. clone X6 repo
2. cd x6/examples/x6-example-drawio
3. npm install
4. add JSON data file to project: https://pastebin.com/jiwuQ98G
5. modify editor.ts file to render data from JSON:

  renderGraph() {
    const graph = this.graph
    graph.render(data)
  }

  start() {
    this.renderGraph()
  }

1. npm run start

Additional Context

This data with nodes & edges is real life example I’m using in my projects. I have anonimized the data so I can put it publicly.

Your Environment

• cloned official example of this repository x6/examples/x6-example-drawio

• node: 10.15.0

• npm: 6.11.3

• x6: 0.3.0

• OS: Windows 10 Ver 1909

• Browser: Chrome Version 80.0.3987.149 (Official Build) (64-bit)

[bubkoo]

@avilde The possible reason may be each node/edge will be re-rendered when zoom in/out, we are working on only scale the top-most group g instead of re-rendering each nodes.

[x6-bot[bot]]

This thread has been automatically locked because it has not had recent activity.

Please open a new issue for related bugs and link to relevant comments in this thread.