Plot panel slows down when displaying too much data

Description As I add a data into the plot, the plot starts drawing slower and slower, eventually can’t work at all.

• Version: v0.15.0
• OS: Studio in Windows 11 with ROS noetic in WSL 2

Steps To Reproduce

Connect to ROS 1 Rosbridge then add anything to the plot

Expected Behavior When I using plot in the webviz

https://user-images.githubusercontent.com/57067221/129442644-4bc0ee48-ba4e-4446-902d-9c51b86e4eff.mp4

Actual Behavior When I using plot in the Studio

https://user-images.githubusercontent.com/57067221/129443380-3cdbd3af-c1d4-4502-8dfe-72fc2126c9a7.mp4

[amacneil]

@defunctzombie suggested closing out this bug since we addressed the main issues, and open a new feature to allow toggling point rendering which improves performance.

Longer term we have discussed moving to webGL plots for better performance.

[defunctzombie]

@sink0918 I looked into the slowdown issue while connected to a live stream. The slowdown comes from the underlying charting library (chartjs) we are using for the plot.

The library has two areas which contribute to the slowdown as more and more data is plotted in realtime. One of these is the rendering of the points. Each point is individually rendered and, as the number of points increases on the plot, the time to render the points increases. This issue also impacts webviz; it just takes a little longer than in studio due to the next issue area which is a change in plugin notification handling in chartjs. Webviz uses chartjs v2.9. In studio, we’ve upgraded to chartjs v3. From my profiling of studio, chartjs v3 shows a new slowdown in an internal codepath which delivers notifications to plugins. We use two plugins for our plots (datalabels and zoom). While we could look at removing these or finding alternatives it isn’t quick and not necessarily likely to fix the underlying chartjs notification slowdown.

These two issues: point rendering and plugin notifications are what contribute to the slowdown as more and more data changes on the streaming chart. We can alleviate the point rendering issue by making point rendering a plot option. This will delay when you start to see rendering latency but also impacts features like hovering to see point data.

Unfortunately there is no quick win here like there was with disabling chart animations which were a contributor to the slowdown issue that impacted the sliding window view. For now I recommend using a window size that provides the streaming experience you are comfortable with. I will keep this issue open and this comment will provide further performance guidance when we are able to spend time looking into this.