Defer rendering for inactive tabs in Open MCT Tabbed View

[akhenry]

Is your feature request related to a problem? Please describe.
The Open MCT Tabbed View allows users to create displays with multiple complex embedded displays within them. Chrome and other browsers have an optimization that throttles callbacks to requestAnimationFrame for inactive browser tabs and we should implement something similar for inactive tabs in an Open MCT Tabbed View.

Describe the solution you'd like
An API function that wraps requestAnimationFrame and replaces it wherever we are using it in our views. This function would be aware of the visibility of the calling component and only actually call the wrapped RAF callback if the component is in an active tab.

Potential means of detecting visibility include:

1. The tabbed view emitting an event on active tab change that is observed by all child views
   OR
2. Doing something snazzy with Intersection Observers to determine whether the component is visible and not obscured by another tab. The benefit of this approach is that it potentially handles the case where a component is scrolled outside of the viewport. While this case shouldn't typically happen during mission usage (displays should be sized to the operator's workstation) it would still be a nice feature to have.

Let's also use tab visibility awareness to release Web GL contexts from inactive tabs.

Do some experimentation, propose an API, and then let's review the proposal.

[scottbell]

@akhenry I've been fiddling with Intersection Observers, and I think that's the best route. We can use the el in the ViewProviders, and then only fire requestAnimationFrame if the visibility is true (namely, isIntersecting set to true).

Screen.Recording.2023-10-16.at.4.39.31.PM.mov

I'll come up with an API next.

[scottbell]

@akhenry I've got a proposed API in this draft PR: #7149

[scottbell]

@akhenry Here's performance before. Note the CPU remains pretty heavy regardless of tab chosen:

before.mov

And here's after. Note tabbing to the notebook causes the CPU to plunge and remain low:

after.mov

[unlikelyzero]

Complex "Real" Display Test

• TBD

4 Tab display

• Create a Display Layout with the following Plot, LAD Table, Telemetry Table, Gauge, and Alphanumeric with 4 tabs referencing 2 telemetry endpoints.
• Click between tabs and determine if there's any slowness
• Click between tabs and determine how historical telemetry network requests with eager load and without eager load

[scottbell]

@akhenry note i split off the webgl stuff into this branch. Should we create another ticket too?

[scottbell]

To test:

1. Create a tabbed layout
2. Drop some high frequency data into one tab as stacked plots
3. Drop a large LAD table with high frequency data into another tab
4. Drop a notebook into another
5. Bring up the performance monitor in Chrome.
6. Bring up the large LAD table and look at the performance monitor. Note the high CPU usage.
7. Bring up the plot and notice the high CPU usage.
8. Bring up the notebook, the CPU usage should decrease

[scottbell]

@akhenry note i split off the webgl stuff into this branch. Should we create another ticket too?

@akhenry created a ticket here #7202

[khalidadil]

The data I was looking at didn't have a super high data rate, but I did notice a small CPU usage difference when I switched between tabs.

Verified Fixed in Testathon on 11/13/23