More complex dashboards are very slow to respond

[rastignacc]

Describe the bug
More complex dashboards are very slow to respond, UI freezes

To Reproduce

1. Go to Dashboards screen
2. Select dashboard with many charts, let all charts load
3. Observe that UI gets slower as charts are getting rendered (already with first chart's being rendered), and slowest when everything's rendered.

Expected behavior
UI should be responsive and not lag.

Screenshots

Environment:

• OS: Windows 10
• Browser: Any
• Seq Version: 2020.1.4235
• Using Docker? No

Additional context
As the attached screenshot shows data were for 24 hours by 5 minutes but I've tried 24 hours by hour as well with no visible difference. Seems hiding point markers and suppressing legends helps here a lot.

[nblumhardt]

Thank you, much appreciated - we'll dig into this.

[nblumhardt]

Quick update - we're working on some new charting infrastructure to speed this up, but it's going to be a multi-step process. In 2020.3 we hope to flesh it out through a new storage view page, but the dashboard itself won't be updated in that release. If turning off point markers helps, that could be a reasonable workaround for a little while.

[nblumhardt]

2020.4 (when the final build is out next week) should speed this up a fraction more 🤞

[nblumhardt]

It would be great to hear whether 2020.4 helped at all with this.

We're expecting to do some significant dashboarding work in the medium-term, but we're now keeping the Issues tab in this repository exclusively for work scheduled in the next milestone or two. We'll therefore track this through a discussion (Discussions tab) and follow up in the future.

[rastignacc]

we're upgrading to 2020.5 next week so I'll provide feedback when I know more

[rastignacc]

not much of an improvement in 2020.5. it's still stuttering. assuming the UI is built on angularjs, it might be too many items in $scope? possibly some one-time databinding might help wherever possible, but I guess you guys have already incorporated this approach already.
https://www.qualtrics.com/eng/angularjs-performance-optimization-with-one-time-bindings/. as I mentioned above, when the screen loads, all is good, but then when charts are getting rendered it's slows down until it's really slow as last chart renders.

[nblumhardt]

Thanks for the follow-up, @rastignacc - disappointing, but we'll push ahead!

I think Plotly.js rendering is our bottleneck, here; I've just dug back into it, it seems that since we've updated our minimum browser requirements, we can now try out the WebGL-based Plotly.js rendering, which is reported to be quite a lot faster.

One of the limitations of WebGL rendering, though, is that only the first 16 charts on a dashboard will be able to use it. How does this line up with your dashboards? Guessing that you have quite a few more charts than that?

[rastignacc]

The dashboard I've been testing against has 11 charts so this should work ;)