Performance issues with large amount of data

[mcharnet]

Hi @dnass,

Thanks again for having upgraded to Svelte 5. I finally got time to test it on my project. Everything is working well with most of my charts, but I have some issues with reactive rendering on ones that display a large amount of data (~20000 points). It was perfect with svelte-canvas v1.0 but since the bump, there is a lag when I want to hover a point and change reactively opacity of the others. Would you have an idea of what could cause this within the update?

Thanks,
Marine

[dnass]

Hi, any chance you could share a reproduction of the issue?

[mcharnet]

Hi,
Thanks for your quick reply. Here is a minimal reproduction of my code : https://svelte.dev/playground/411322c99faa47129aad018574a04d21?version=5.15.0

Thanks for your help !

[dnass]

I don't totally understand why this issue is happening, but I found that the performance improves a lot if you precompute the x and y coordinates instead of calling xScale and yScale inside the render callback. Here's how you can do that.

I'll keep looking into this to see if there's something I can fix in the library, but in the meantime, let me know if this solution works for you.

[mcharnet]

Thanks for taking the time to take a look. Unfortunately, this change doesn't improve so much the performance in the real app.. Moreover, I noticed another issue with my boxplot, points are not even rendered (https://svelte.dev/playground/a921fbc5d3374ac1a5f942c629d54098?version=5.16.0).

I'm trying too on my side, let's keep in touch if we find something !

[dnass]

There are a couple reasons the boxplot example isn't working:

• The canvas is inside the SVG, which is invalid.
• You're calling the scale functions on the data twice, first in reactivePointsScaled and then in points.

[dnass]

In the production version of the cluster viz, are there any other calculations happening in the render function that could be moved outside?