Use different root for renderWhenVisible (#7415)

* attempt to fix

* reenable test

* going to revert most of this, but works

* slowly reverting changes

* further reversions to the mean

* reversion to the mean

* revert

* change to use openmct element

* reference issue

* reference issue

---------

Co-authored-by: John Hill <john.c.hill@nasa.gov>

e2e/tests/functional/plugins/plot/overlayPlot.e2e.spec.js

@@ -63,10 +63,9 @@ test.describe('Overlay Plot', () => {
     await expect(seriesColorSwatch).toHaveCSS('background-color', 'rgb(255, 166, 61)');
   });
 
-  //skipping due to https://github.com/nasa/openmct/issues/7405
+  test('Limit lines persist when series is moved to another Y Axis and on refresh', async ({
-  test.fixme(
+    page
-    'Limit lines persist when series is moved to another Y Axis and on refresh',
+  }) => {
-    async ({ page }) => {
     test.info().annotations.push({
       type: 'issue',
       description: 'https://github.com/nasa/openmct/issues/6338'
@@ -135,8 +134,7 @@ test.describe('Overlay Plot', () => {
     await page.reload();
 
     await assertLimitLinesExistAndAreVisible(page);
-    }
+  });
-  );
 
   test('The elements pool supports dragging series into multiple y-axis buckets', async ({
     page

src/plugins/inspectorDataVisualization/NumericDataInspectorView.vue

@@ -112,7 +112,7 @@ export default {
     },
     renderPlot(plotObject) {
       const wrapper = document.createElement('div');
-      const visibilityObserver = new VisibilityObserver(wrapper);
+      const visibilityObserver = new VisibilityObserver(wrapper, this.openmct.element);
 
       const { destroy } = mount(
         {

src/plugins/plot/chart/MctChart.vue

@@ -200,7 +200,13 @@ export default {
     this.chartVisible = true;
     this.chartContainer = this.$refs.chart;
     this.drawnOnce = false;
-    this.visibilityObserver = new IntersectionObserver(this.visibilityChanged);
+    const rootContainer = this.openmct.element;
+    const options = {
+      root: rootContainer,
+      rootMargin: '0px',
+      threshold: 1.0
+    };
+    this.visibilityObserver = new IntersectionObserver(this.visibilityChanged, options);
     eventHelpers.extend(this);
     this.seriesModels = [];
     this.config = this.getConfig();
@@ -276,6 +282,8 @@ export default {
       return config;
     },
     visibilityChanged([entry]) {
+      // Per https://github.com/nasa/openmct/issues/7405, we only want to draw when the chart is visible.
+      // and we need to use the Open MCT root element as the root of the intersection observer.
       if (entry.target === this.chartContainer) {
         const wasVisible = this.chartVisible;
         this.chartVisible = entry.isIntersecting;

src/ui/components/ObjectView.vue

@@ -131,7 +131,10 @@ export default {
     this.debounceUpdateView = _.debounce(this.updateView, 10);
   },
   mounted() {
-    this.visibilityObserver = new VisibilityObserver(this.$refs.objectViewWrapper);
+    this.visibilityObserver = new VisibilityObserver(
+      this.$refs.objectViewWrapper,
+      this.openmct.element
+    );
     this.updateView();
     this.$refs.objectViewWrapper.addEventListener('dragover', this.onDragOver, {
       capture: true

src/utils/visibility/VisibilityObserver.js

@@ -32,17 +32,22 @@ export default class VisibilityObserver {
    * Constructs a VisibilityObserver instance to manage visibility-based requestAnimationFrame calls.
    *
    * @param {HTMLElement} element - The DOM element to observe for visibility changes.
+   * @param {HTMLElement} rootContainer - The DOM element that is the root of the viewport.
    * @throws {Error} If element is not provided.
    */
-  constructor(element) {
+  constructor(element, rootContainer) {
-    if (!element) {
+    if (!element || !rootContainer) {
-      throw new Error(`VisibilityObserver must be created with an element`);
+      throw new Error(`VisibilityObserver must be created with an element and a rootContainer.`);
     }
     this.#element = element;
     this.isIntersecting = true;
     this.calledOnce = false;
-
+    const options = {
-    this.#observer = new IntersectionObserver(this.#observerCallback);
+      root: rootContainer,
+      rootMargin: '0px',
+      threshold: 1.0
+    };
+    this.#observer = new IntersectionObserver(this.#observerCallback, options);
     this.lastUnfiredFunc = null;
     this.renderWhenVisible = this.renderWhenVisible.bind(this);
   }