Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix mouse interaction performance for 2,000 series #932

Closed
leeoniya opened this issue Mar 3, 2024 · 1 comment
Closed

fix mouse interaction performance for 2,000 series #932

leeoniya opened this issue Mar 3, 2024 · 1 comment
Labels
bug Something isn't working perf

Comments

@leeoniya
Copy link
Owner

leeoniya commented Mar 3, 2024

this is a retro issue to illustrate the performance gains of the new cursor.points.one: true setting with a large amount of series (2k series * 1k points each). the commits were:

uPlot currently draws live cursor hover points using dom elements to avoid clearing and redrawing the main canvas on every mousemove event. this strategy may change in the future to utilize a second canvas, but that's a longer-term project: #922. anyways, the DOM method works well for a sane amount of series (< 100). however, there are users of Grafana that throw some pretty insane datasets at uPlot - like 2,000 series. since uPlot always creates one dom hover point per series, this now translates to 2,000 dom elements updated on every mouse move.

even after we disable the massive/useless live legend (also in the dom), we still have obvious super badness. 10s of continuous mousemoves results in only 570ms of browser idle time, with heavy UI lag and cpu burn:

image

a new cursor.points.one: true option switches uPlot to only create a single hover point which is reused across all series and only shows up for the closest hovered series and data index. how does it do that? it relies on the series focus functionality that uses proximity setting, so you also need to set cursor.focus.prox >= 0, and if you dont want series dimming, also focus.alpha: 1.

additionally, the first listed commit disables formatting values with a static or disabled legend.

with these settings and legend disabled we now have 8935ms of browser idle time and no perceivable UI lag 🎉

image
@leeoniya leeoniya added bug Something isn't working perf labels Mar 3, 2024
@leeoniya leeoniya closed this as completed Mar 3, 2024
@leeoniya
Copy link
Owner Author

leeoniya commented Mar 3, 2024

on the Grafana side...

original:

image

cursor.points.one: true:

image

cursor.points.one: true + newVizTooltips feature flag:

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working perf
Projects
None yet
Development

No branches or pull requests

1 participant