[Performance] Inspector Repaints in Local Clock and Remote Clock Time

[unlikelyzero]

Summary

When analyzing the performance of a Display Layout, we noticed that the Inspector was being re-painted unnecessarily. We should avoid modifying or updating the Inspector unnecessarily to avoid any performance penalties associated with that repaint.

Expected vs Current Behavior

Expected: In Local Clock, Inspector not update or repaint unless the user interacted with an element in the object's Main view.
Current: In Local Clock, Inspector updates and repaints even on a folder with no changes.

Steps to Reproduce

1. Open DevTools, Enable Secondary DevTools. Enable Rendering Tab. Enable Paint Flashing.
2. Set Clock to Local Clock
3. Navigate to any object including the Root folder
   Note: Inspector repaints

Environment

• Open MCT Version: 2.0.3
• Deployment Type: local
• OS: macOS
• Browser: Chrome 101

Impact Check List

• Data loss or misrepresented data?
• Regression? Did this used to work or has it always been broken?
• Is there a workaround available?
• Does this impact a critical component?
• Is this just a visual bug with no functional impact?
• Does this block the execution of e2e tests?

Additional Information

Repaint-inspector-bug.mov

[akhenry]

Is there some way to define a regression test that will prevent this regressing again once fixed?

[unlikelyzero]

@akhenry yes, it should be possible with RecalcStyleCount Total number of page style recalculations.

[shefalijoshi]

The root cause has little to do with the time conductor.
Something as simple as hovering over the inspector properties original location link will cause a repaint.

The repaints are being caused by CSS, specifically this overflow-x property
https://github.com/nasa/openmct/blob/release/2.0.5/src/ui/layout/layout.scss#L73

@charlesh88 Is there something we can do about this?

[charlesh88]

Looking at this now with fix-repaint-5247.

[charlesh88]

The Case So Far

The problem here is related to several things, not just overflow. Regard the following:

TC with ticks and RT updating "now" time, constant flashing in the Inspector
This is much like what was originally reported.

Same as above, but with a Flex Layout with two plots.
Note the regular flashing in the axis labels of the plots.

Chrome Dev Tools used to delete the TC ticks and "now" time.
No regular repainting in the Inspector, or on tree item hovers. But look what happens hovering over the buttons at the top of the tree: this is due to CSS hover using a filter style, and was also the cause of what @shefalijoshi mentioned about hovering over Original Location link in the Inspector. Removing filter stopped this behavior immediately.

TC ticks and "now" time removed, with two plots in a Flex Layout.
Periodic repainting occurring, but at a lower periodicity.

In other tests in a local branch, removing many other elements and setting the l-shell__multipane to be position: absolute (rather than a flex element) solved the periodic flashing problem completely, even with the RT TC completely intact.

It was Col. Mustard with the Candlestick in the Hall

I wish.

• CSS hover using filter is definitely responsible for causing repaints elsewhere in the view. This is easy to fix and I'll remove all use of filter everywhere, and we can look at where we stand at that point.
• filter is used elsewhere other than hover states (large icons in Folder grid view and Create menu) and may also be creating problems there.
• overflow: auto is an accomplice here. Containers with overflow that exhibited repainting, when set to overflow: hidden, stopped repainting. However, without containers that provide a scrolling view, we don't have an application, so we need to figure this out.
• Flex layout may be suspect; converting some flex: 1 1 auto elements to position: absolute stopped repainting; but again, that may not be a practical solution overall.

Next Steps

• Stamp out filter everywhere (including temporarily in non-hover elements) and see where we're at.
• Research CSS performance optimizations further.
• Determine what might be happening with the periodic repainting that seems related to the TC and/or ticks, as in the two Plots in the Flex Layout example.
• I could really use some time with someone who's really versed in the Chrome Performance tab. @unlikelyzero I'm looking at you.

[charlesh88]

WIP in branch fix-repaint-5247. Deferring this behind other issues that are more pressing for the Build 6 "fix" sprint.

[charlesh88]

@michaelrogers and I talked today about this.

• After changes in @charlesh88 fix branch the fact that only the Inspector contents are being repainted makes us both suspicious that this problem may be due to some JS process that's reacting to other onscreen elements and re-rendering content as a result. @michaelrogers to look into this possibility.
• @charlesh88 to look further into online forums re. Flex / overflow and relationships to repainting.

[akhenry]

Verified Fixed.