V7 >1000 nodes

[FVernooij]

We where using v6 to plot a bunch of process relationships.
Today I am trying to upgrade to version 7 as it seemed quite good.

However for some reason after 400 nodes my browser just hangs and starts crashing due to unresponsive scripts (not even attempting to render the edges yet)

• Is there a way to just feed my array of nodes into the object without rendering them to the dom?
• Is there a way to disable those 2 circles / anchors, this chart is non-interactive?
• Anything else I could to to possibly boost performance?

<Svelvet
    theme={'dark'}
    minimap={true}
    locked={true}
    editable={false}
    disableSelection={true}
  >
  {#each nodes as node}
    <Node
      id={node.id}
      position={{x: node.position.x, y: node.position.y}}
      dimensions={{width: node.width, height: node.height}}
      label={node.data.label}
      bgColor={node.bgColor}
    />
  {/each}
  </Svelvet>

Thanks for your help!

[briangregoryholmes]

Hi, @FVernooij! Thanks for reaching out and using Svelvet. Right now, 250 Nodes (+connections) seems to be the spot where we start to drop frames or have unreasonable load times. I'm actively looking into general performance optimizations for situations like yours where Svelvet is being used less for interaction and more for visualization. In those cases, we'll likely offer a flag at the Svelvet level that would turn off certain more expensive features. I'll keep you posted, but know that this is an active area for us.

Anchors can be disabled when creating custom Nodes with the locked prop on the Anchor component, but they can't be disabled at the Node level at the moment. That's an easy feature to add.

[FVernooij]

Hi, Thanks for your fast response!
Yes it would be awesome if there could be some optimisations for a purely visual mode.
We, except of an onclick callback on each node are not looking for any interaction or dynamics other than moving/panning the view itself.

When testing, I used locked={true}, yet I could still drag anchors out of those circles... but could not connect them to anything else.
If it would be up to me, I would rather not see those circles at all.

Keep me posted!

[briangregoryholmes]

Optimizations will be coming in the next version that won't require flags. We rather conditionally turn off certain listeners/features based on how the Node has been configured. I'm able to get 1000+ Nodes and Edges rendering in the latest version of Safari without issues. There are some issues with Chrome when zoomed in, but I think I can get those resolved in time. We're likely ~two weeks out from release.

At some point, we'll expose a new Node component type that is purely for larger, less interactive visualizations, but that will come after the next release. I think this is a better approach than putting flags on a single component type. They are two pretty different approaches and I'd like to have them logically separated.

[jycouet]

Happy to read that some optimizations happened.
I just started a new project, with 200 nodes, and 2000 Anchors and my browser is is kinda hanged.
I'm in v9.

Should I open a new discussion? issue? To look more into it?

🙏 Thank you for your help and this great lib