From 9ed8d4f5a5bde0f068e3b0a77bdaa6f5e39dde39 Mon Sep 17 00:00:00 2001
From: David Tsay <3614296+davetsay@users.noreply.github.com>
Date: Fri, 8 Dec 2023 09:33:49 -0800
Subject: [PATCH] Provide own renderWhenVisible function since manually
 creating an object view (#7281)

inspector view needs renderWhenVisible function
---
 .../NumericDataInspectorView.vue              | 25 ++++++++++++++-----
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/plugins/inspectorDataVisualization/NumericDataInspectorView.vue b/src/plugins/inspectorDataVisualization/NumericDataInspectorView.vue
index 6f4b828744..43b2d1523f 100644
--- a/src/plugins/inspectorDataVisualization/NumericDataInspectorView.vue
+++ b/src/plugins/inspectorDataVisualization/NumericDataInspectorView.vue
@@ -35,6 +35,7 @@
 <script>
 import mount from 'utils/mount';
 
+import VisibilityObserver from '../../utils/visibility/VisibilityObserver';
 import Plot from '../plot/PlotView.vue';
 import TelemetryFrame from './TelemetryFrame.vue';
 
@@ -89,8 +90,9 @@ export default {
       this.clearPlots();
 
       this.unregisterTimeContextList = [];
-      this.elementsList = [];
       this.componentsList = [];
+      this.elementsList = [];
+      this.visibilityObservers = [];
 
       this.telemetryKeys.forEach(async (telemetryKey) => {
         const plotObject = await this.openmct.objects.get(telemetryKey);
@@ -109,7 +111,10 @@ export default {
       return this.openmct.time.addIndependentContext(keyString, this.bounds);
     },
     renderPlot(plotObject) {
-      const { vNode, destroy } = mount(
+      const wrapper = document.createElement('div');
+      const visibilityObserver = new VisibilityObserver(wrapper);
+
+      const { destroy } = mount(
         {
           components: {
             TelemetryFrame,
@@ -117,7 +122,8 @@ export default {
           },
           provide: {
             openmct: this.openmct,
-            path: [plotObject]
+            path: [plotObject],
+            renderWhenVisible: visibilityObserver.renderWhenVisible
           },
           data() {
             return {
@@ -133,13 +139,15 @@ export default {
                     </TelemetryFrame>`
         },
         {
-          app: this.openmct.app
+          app: this.openmct.app,
+          element: wrapper
         }
       );
 
       this.componentsList.push(destroy);
-      this.elementsList.push(vNode.el);
-      this.$refs.numericDataView.append(vNode.el);
+      this.elementsList.push(wrapper);
+      this.visibilityObservers.push(visibilityObserver);
+      this.$refs.numericDataView.append(wrapper);
     },
     clearPlots() {
       if (this.componentsList?.length) {
@@ -152,6 +160,11 @@ export default {
         delete this.elementsList;
       }
 
+      if (this.visibilityObservers?.length) {
+        this.visibilityObservers.forEach((visibilityObserver) => visibilityObserver.destroy());
+        delete this.visibilityObservers;
+      }
+
       if (this.plotObjects?.length) {
         this.plotObjects = [];
       }