Programmatically removing the graph and stopping its logic which runs in background

[bashovski]

Describe the bug
Hello! First of all, I'd like to thank you for creating this brilliant library, it's simply amazing to work with it.
I am using the graph to show nodes and edges generated from spreadsheets and everything works fine besides the part when the graph needs to be recreated (and obviously removed) multiple times because I want to temporarily totally remove it from the dashboard and recreate it using new graph data. I am also only rendering basic text displayed above several nodes (only a few of them) which is being shown on hover and nothing else.

Basically, after having to remove and create the graph again for 4-5 times, the page becomes very laggy.
At the moment we are only removing the graph elements from DOM, but I am 100% sure it's still attempting to render it in background, hence the lag is caused.

This is what I do once I want to remove the graph elements:

        const { graph } = this.$refs;
        while (graph.firstChild) {
          graph.removeChild(graph.lastChild);
        }

Also, after leaving the tab open for 20 minutes or more, it's not uncommon to experience very similar lag to the one I mentioned in the text above.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior

• I think there should be a more elegant, programmatic way to terminate background processes for graph rendering.
• Basically it's just expected to run without lagging.

Screenshots
If applicable, add screenshots to help explain your problem.

This is how the graph looks (the one that gets deleted and recreated multiple times during runtime by user's actions)

Desktop (please complete the following information):

• OS: MacOS

• Browser: Chrome Version 86.0.4240.111 (Official Build) (x86_64), Firefox (also latest)

• Happens on all devices and browsers, usually tested on latest Chrome and Firefox versions.

[vasturiano]

@bashovski thanks for reaching out. I'm glad you find the module useful.

As for the multiple graph elements, whenever you unmount the DOM element, you can also tell the underlying component to halt the animation engine. You can do this via myGraph.pauseAnimation(). That should cancel all of the background activity that is left running after simply detaching the DOM element (which the component has no way to detect).

In addition you can also empty the data structure to remove references completely, by doing: myGraph.grapgData({ node: [], links: [] }).

[bashovski]

Thank you. These two clearly fixed the problem. There's no more lagging!