This PR fixes scatterplot.destroy() to properly remove all event listeners bound during instance creation.
Description
What was changed in this pull request?
unbind wheelHandler bound to canvas when destroying
call lassoManager.destroy when destroying
Why is it necessary?
Destroyed scatterplot instances are currently retained in memory in full (including the allocated KDBush indexes and the webGL context), which leads to memory leaks in applications that create and destroy scatterplots frequently. This happens because there are some event handlers still bound to (detached) DOM elements, so the garbage collection skips the whole thing. The behavior can be observed as follows:
Adjust the example to call destroy after a timeout.
setTimeout(() => {
scatterplot.destroy();
// scatterplot needs to be a let binding for this to work
scatterplot = undefined;
canvas.parentNode.removeChild(canvas);
}, 2000);
Open the Memory tab in chrome devtools and open the example. After the canvas is removed, perform a manual garbage collection and take a heap snapshot. You will see that the instance and a canvas element is still held in memory, with the retainers pointing to certain event handlers:
Open a new tab and repeat with the fixes applied. When looking at the snapshot now, the instance and canvas are no longer present:
Fixes #___
Checklist
[x] Provided a concise title as a semantic commit message (e.g. "fix: correctly handle undefined properties")
[ ] CHANGELOG.md updated
[ ] Tests added or updated
[ ] Documentation in README.md added or updated
[ ] Example(s) added or updated
[ ] Screenshot, gif, or video attached for visual changes
This PR fixes
scatterplot.destroy()
to properly remove all event listeners bound during instance creation.Description
wheelHandler
bound tocanvas
when destroyinglassoManager.destroy
when destroyingDestroyed scatterplot instances are currently retained in memory in full (including the allocated
KDBush
indexes and the webGL context), which leads to memory leaks in applications that create and destroy scatterplots frequently. This happens because there are some event handlers still bound to (detached) DOM elements, so the garbage collection skips the whole thing. The behavior can be observed as follows:Adjust the example to call destroy after a timeout.
Open the
Memory
tab in chrome devtools and open the example. After the canvas is removed, perform a manual garbage collection and take a heap snapshot. You will see that the instance and a canvas element is still held in memory, with the retainers pointing to certain event handlers:Open a new tab and repeat with the fixes applied. When looking at the snapshot now, the instance and canvas are no longer present:
Fixes #___
Checklist
CHANGELOG.md
updatedREADME.md
added or updated