MctChart still using Vue.extend() for LimitLines and LimitLabels

[ozyx]

Summary

Vue.extend() is still being used in MctChart, causing Plots to create many instances of Vue apps when loaded. These are never destroyed and bog down performance.

Expected vs Current Behavior

We should not be using Vue.extend() as it is being removed in Vue 3 proper and causes performance degradation in the unique way we use it.

Steps to Reproduce

1. Open a browser to Open MCT with the Vue debug browser plugin installed
2. Navigate to an Overlay Plot with some SWGs in it
3. Open the Vue plugin and observe there are > 50 Apps registered

Environment

• Open MCT Version: 3.0.0-SNAPSHOT
• Deployment Type: local
• OS: MacOS
• Browser: Chrome

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?
• Does this have an impact on Performance?

Additional Information

[ozyx]

Testing Notes

1. Install the Vue browser extension
2. Create an Overlay Plot
3. Add telemetry with limits
4. With the Vue extension open, activate and deactivate limit lines on the plot series
5. Make sure that there's only one App listed in the Vue extension (it doesn;'t create a ton of Vue apps)

[khalidadil]

I tested this locally with 3 SWGs in a single Overlay Plot. I'm not seeing multiple Vue apps when enabling/disabling limit lines, but after enabling the first set of limit lines, disabling them doesn't cause them to go away. Any other limit lines that are enabled don't show up.

[shefalijoshi]

Un-checking limit lines doesn't disable them unless you navigate away and return from the view.

[ozyx]

Un-checking limit lines doesn't disable them unless you navigate away and return from the view.

filing as separate issue