Performance Issues

[bsaranga]

Hi dash14,

First off I want to say this is a wonderful library and kudos to all your hard work. I have noticed some considerable performance issues when node and edge counts are greater than 200. I'm using the ForceLayout handler. Dragging nodes become very sluggish. Any idea what I might be doing wrong?

This is my config

const graphConfig = reactive(vNG.defineConfigs({
  view: {
    scalingObjects: true,
    layoutHandler: new ForceLayout({
      positionFixedByDrag: false,
      positionFixedByClickWithAltKey: true,
      createSimulation: (d3, nodes, edges) => {
        const forceLink = d3.forceLink<ForceNodeDatum, ForceEdgeDatum>(edges).id((d: any) => d.id);
        return d3
          .forceSimulation(nodes)
          .alphaDecay(0.03)
          .velocityDecay(.1)
          .force("edge", forceLink.distance(40).strength(0.5))
          .force("charge", d3.forceManyBody().strength(-1000))
          //.force("center", d3.forceCenter().strength(0.01))
          .alphaMin(0.0001);
      }
    })
  },
  node: {
    normal: {
      radius: 7
    }
  }
}))

I'm adding nodes and edges dynamically into the state like this:

const key = uuidv4();
nodes.value[key] = { name: topic }
edges.value[`edge_${key}`] = { source: activeNode.value, target: key}

[dash14]

Hi @bsaranga,
Thank you for reporting the issue.
The issue of reduced rendering performance when the network graph is large also has been reported in another Issue (#103), and we are currently investigating and considering a course of action to fix the issue.
It will take some more time, but I will report any progress in here.