From 652bf9e400d3648c6c4db19d6c91d2b8b89f89d4 Mon Sep 17 00:00:00 2001
From: Jesse Mazzella <jesse.d.mazzella@nasa.gov>
Date: Thu, 29 Feb 2024 14:47:30 -0800
Subject: [PATCH 01/34] refactor: url tools use named exports

---
 src/plugins/LADTable/components/LadRow.vue           | 4 ++--
 src/plugins/notebook/components/NotebookEmbed.vue    | 2 +-
 src/plugins/openInNewTabAction/openInNewTabAction.js | 2 +-
 src/tools/url.js                                     | 2 +-
 src/tools/urlSpec.js                                 | 2 +-
 src/ui/layout/search/ObjectSearchResult.vue          | 4 ++--
 src/ui/mixins/object-link.js                         | 2 +-
 7 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/plugins/LADTable/components/LadRow.vue b/src/plugins/LADTable/components/LadRow.vue
index ea7e525435b..2adf23743de 100644
--- a/src/plugins/LADTable/components/LadRow.vue
+++ b/src/plugins/LADTable/components/LadRow.vue
@@ -58,7 +58,7 @@
 const CONTEXT_MENU_ACTIONS = ['viewDatumAction', 'viewHistoricalData', 'remove'];
 const BLANK_VALUE = '---';
 
-import identifierToString from '/src/tools/url.js';
+import { objectPathToUrl } from '/src/tools/url.js';
 import PreviewAction from '@/ui/preview/PreviewAction.js';
 
 import tooltipHelpers from '../../../api/tooltips/tooltipMixins.js';
@@ -260,7 +260,7 @@ export default {
         event.preventDefault();
         this.preview(this.objectPath);
       } else {
-        const resultUrl = identifierToString(this.openmct, this.objectPath);
+        const resultUrl = objectPathToUrl(this.openmct, this.objectPath);
         this.openmct.router.navigate(resultUrl);
       }
     },
diff --git a/src/plugins/notebook/components/NotebookEmbed.vue b/src/plugins/notebook/components/NotebookEmbed.vue
index 9fb4d061644..725faec51c3 100644
--- a/src/plugins/notebook/components/NotebookEmbed.vue
+++ b/src/plugins/notebook/components/NotebookEmbed.vue
@@ -52,7 +52,7 @@
 import Moment from 'moment';
 import mount from 'utils/mount';
 
-import objectPathToUrl from '@/tools/url';
+import { objectPathToUrl } from '@/tools/url';
 
 import tooltipHelpers from '../../../api/tooltips/tooltipMixins.js';
 import ImageExporter from '../../../exporters/ImageExporter.js';
diff --git a/src/plugins/openInNewTabAction/openInNewTabAction.js b/src/plugins/openInNewTabAction/openInNewTabAction.js
index 501c4431b6c..e9f601924bd 100644
--- a/src/plugins/openInNewTabAction/openInNewTabAction.js
+++ b/src/plugins/openInNewTabAction/openInNewTabAction.js
@@ -19,7 +19,7 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-import objectPathToUrl from '/src/tools/url.js';
+import { objectPathToUrl } from '/src/tools/url.js';
 export default class OpenInNewTab {
   constructor(openmct) {
     this.name = 'Open In New Tab';
diff --git a/src/tools/url.js b/src/tools/url.js
index 2d11459c5d8..8cf66de23e5 100644
--- a/src/tools/url.js
+++ b/src/tools/url.js
@@ -66,7 +66,7 @@ export function identifierToString(openmct, objectPath) {
  * @param {any} customUrlParams
  * @returns {string} url
  */
-export default function objectPathToUrl(openmct, objectPath, customUrlParams = {}) {
+export function objectPathToUrl(openmct, objectPath, customUrlParams = {}) {
   let url = identifierToString(openmct, objectPath);
 
   let urlParams = paramsToArray(openmct, customUrlParams);
diff --git a/src/tools/urlSpec.js b/src/tools/urlSpec.js
index 7323aa828d7..740067ee14c 100644
--- a/src/tools/urlSpec.js
+++ b/src/tools/urlSpec.js
@@ -1,5 +1,5 @@
 import { createOpenMct, resetApplicationState } from '../utils/testing.js';
-import { default as objectPathToUrl, identifierToString, paramsToArray } from './url.js';
+import { identifierToString, objectPathToUrl, paramsToArray } from './url.js';
 
 describe('the url tool', function () {
   let openmct;
diff --git a/src/ui/layout/search/ObjectSearchResult.vue b/src/ui/layout/search/ObjectSearchResult.vue
index 6972122bf89..805456a6627 100644
--- a/src/ui/layout/search/ObjectSearchResult.vue
+++ b/src/ui/layout/search/ObjectSearchResult.vue
@@ -55,7 +55,7 @@
 
 <script>
 import tooltipHelpers from '../../../api/tooltips/tooltipMixins.js';
-import identifierToString from '../../../tools/url.js';
+import { objectPathToUrl } from '../../../tools/url.js';
 import ObjectPath from '../../components/ObjectPath.vue';
 import PreviewAction from '../../preview/PreviewAction.js';
 
@@ -101,7 +101,7 @@ export default {
         event.preventDefault();
         this.preview(objectPath);
       } else {
-        let resultUrl = identifierToString(this.openmct, objectPath);
+        let resultUrl = objectPathToUrl(this.openmct, objectPath);
 
         // Remove the vestigial 'ROOT' identifier from url if it exists
         if (resultUrl.includes('/ROOT')) {
diff --git a/src/ui/mixins/object-link.js b/src/ui/mixins/object-link.js
index 938509d6f52..1a15373e5a1 100644
--- a/src/ui/mixins/object-link.js
+++ b/src/ui/mixins/object-link.js
@@ -1,4 +1,4 @@
-import objectPathToUrl from '../../tools/url.js';
+import { objectPathToUrl } from '../../tools/url.js';
 
 export default {
   inject: ['openmct'],

From 2afc8e7ad92f4e6bb6581db9a712c83ce7adec1b Mon Sep 17 00:00:00 2001
From: Jesse Mazzella <jesse.d.mazzella@nasa.gov>
Date: Fri, 1 Mar 2024 12:10:30 -0800
Subject: [PATCH 02/34] fix: refactor method and remove customUrlParams

---
 src/tools/url.js | 25 +++++++++++--------------
 1 file changed, 11 insertions(+), 14 deletions(-)

diff --git a/src/tools/url.js b/src/tools/url.js
index 8cf66de23e5..38823641612 100644
--- a/src/tools/url.js
+++ b/src/tools/url.js
@@ -24,12 +24,8 @@
  * Module defining url handling.
  */
 
-function getUrlParams(openmct, customUrlParams = {}) {
+function getUrlParams(openmct) {
   let urlParams = openmct.router.getParams();
-  Object.entries(customUrlParams).forEach((urlParam) => {
-    const [key, value] = urlParam;
-    urlParams[key] = value;
-  });
 
   if (urlParams['tc.mode'] === 'fixed') {
     delete urlParams['tc.startDelta'];
@@ -42,16 +38,17 @@ function getUrlParams(openmct, customUrlParams = {}) {
   return urlParams;
 }
 
-export function paramsToArray(openmct, customUrlParams = {}) {
-  // parse urlParams from an object to an array.
-  let urlParams = getUrlParams(openmct, customUrlParams);
-  let newTabParams = [];
-  for (let key in urlParams) {
-    if ({}.hasOwnProperty.call(urlParams, key)) {
-      let param = `${key}=${urlParams[key]}`;
-      newTabParams.push(param);
+export function paramsToArray(openmct) {
+  const urlParams = getUrlParams(openmct);
+  // Filter out any parameters whose values are objects, then map the rest to the desired string format.
+  const newTabParams = Object.entries(urlParams).reduce((acc, [key, value]) => {
+    // Only process the parameter if its value is not an object (or is null, which is fine to include).
+    if (typeof value !== 'object' || value === null) {
+      const param = `${key}=${encodeURIComponent(value)}`;
+      acc.push(param);
     }
-  }
+    return acc;
+  }, []);
 
   return newTabParams;
 }

From 4b5c16b6da26a6c0ba9fb5a70902e20629554967 Mon Sep 17 00:00:00 2001
From: Jesse Mazzella <jesse.d.mazzella@nasa.gov>
Date: Fri, 1 Mar 2024 12:10:46 -0800
Subject: [PATCH 03/34] test(e2e): verify bounds are preserved in data pivoting

---
 .../inspectorDataVisualization/numericData.e2e.spec.js      | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/e2e/tests/functional/plugins/inspectorDataVisualization/numericData.e2e.spec.js b/e2e/tests/functional/plugins/inspectorDataVisualization/numericData.e2e.spec.js
index 8bfb1a666a4..7166112b059 100644
--- a/e2e/tests/functional/plugins/inspectorDataVisualization/numericData.e2e.spec.js
+++ b/e2e/tests/functional/plugins/inspectorDataVisualization/numericData.e2e.spec.js
@@ -37,6 +37,8 @@ test.describe('Testing numeric data with inspector data visualization (i.e., dat
   });
 
   test('Can click on telemetry and see data in inspector @2p', async ({ page, context }) => {
+    const initStartBounds = await page.getByLabel('Start bounds').textContent();
+    const initEndBounds = await page.getByLabel('End bounds').textContent();
     const exampleDataVisualizationSource = await createDomainObjectWithDefaults(page, {
       type: 'Example Data Visualization Source'
     });
@@ -78,5 +80,9 @@ test.describe('Testing numeric data with inspector data visualization (i.e., dat
     await newPage.waitForLoadState();
     // expect new tab title to contain 'Second Sine Wave Generator'
     await expect(newPage).toHaveTitle('Second Sine Wave Generator');
+
+    // Verify that "Open in New Tab" preserves the time bounds
+    expect(initStartBounds).toEqual(await newPage.getByLabel('Start bounds').textContent());
+    expect(initEndBounds).toEqual(await newPage.getByLabel('End bounds').textContent());
   });
 });

From 3738297db71dd9c05c9f466fb4a67e0a1cdd6609 Mon Sep 17 00:00:00 2001
From: Jesse Mazzella <jesse.d.mazzella@nasa.gov>
Date: Fri, 1 Mar 2024 12:15:40 -0800
Subject: [PATCH 04/34] test: remove test as feature is no longer needed

- dataVisualization logic has moved from MMGIS plugin to the open source. As such, we can just use the time conductor bounds
---
 src/tools/urlSpec.js | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/src/tools/urlSpec.js b/src/tools/urlSpec.js
index 740067ee14c..90436c83667 100644
--- a/src/tools/urlSpec.js
+++ b/src/tools/urlSpec.js
@@ -65,15 +65,5 @@ describe('the url tool', function () {
       const constructedURL = objectPathToUrl(openmct, mockObjectPath);
       expect(constructedURL).toContain('#/browse/mock-parent-folder/mock-folder');
     });
-    it('can take params to set a custom url', () => {
-      const customParams = {
-        'tc.startBound': 1669911059,
-        'tc.endBound': 1669911082,
-        'tc.mode': 'fixed'
-      };
-      const constructedURL = objectPathToUrl(openmct, mockObjectPath, customParams);
-      expect(constructedURL).toContain('tc.startBound=1669911059&tc.endBound=1669911082');
-      expect(constructedURL).toContain('tc.mode=fixed');
-    });
   });
 });

From c9ed24fb74a7b04d48d65a0ae8c4a5ee549799e6 Mon Sep 17 00:00:00 2001
From: Jesse Mazzella <jesse.d.mazzella@nasa.gov>
Date: Fri, 1 Mar 2024 12:23:17 -0800
Subject: [PATCH 05/34] refactor: autoformat keeps changing this so i'mma just
 commit it

---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index e3dfda52285..da07198cfde 100644
--- a/index.html
+++ b/index.html
@@ -19,7 +19,7 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

From e8fe59e4d297ccd86202c1744c21e6a4acc61c1e Mon Sep 17 00:00:00 2001
From: Jesse Mazzella <jesse.d.mazzella@nasa.gov>
Date: Fri, 1 Mar 2024 12:30:08 -0800
Subject: [PATCH 06/34] refactor: remove unnecessary code

---
 src/tools/url.js | 17 ++---------------
 1 file changed, 2 insertions(+), 15 deletions(-)

diff --git a/src/tools/url.js b/src/tools/url.js
index 38823641612..83769a310f2 100644
--- a/src/tools/url.js
+++ b/src/tools/url.js
@@ -24,22 +24,9 @@
  * Module defining url handling.
  */
 
-function getUrlParams(openmct) {
-  let urlParams = openmct.router.getParams();
-
-  if (urlParams['tc.mode'] === 'fixed') {
-    delete urlParams['tc.startDelta'];
-    delete urlParams['tc.endDelta'];
-  } else if (urlParams['tc.mode'] === 'local') {
-    delete urlParams['tc.startBound'];
-    delete urlParams['tc.endBound'];
-  }
-
-  return urlParams;
-}
-
 export function paramsToArray(openmct) {
-  const urlParams = getUrlParams(openmct);
+  const urlParams = openmct.router.getParams();
+
   // Filter out any parameters whose values are objects, then map the rest to the desired string format.
   const newTabParams = Object.entries(urlParams).reduce((acc, [key, value]) => {
     // Only process the parameter if its value is not an object (or is null, which is fine to include).

From 944e9fd2ef89bada9d9313e0802d3c1f41d49897 Mon Sep 17 00:00:00 2001
From: Jesse Mazzella <jesse.d.mazzella@nasa.gov>
Date: Fri, 1 Mar 2024 12:38:20 -0800
Subject: [PATCH 07/34] refactor: simplify, add docs

---
 src/tools/url.js | 17 ++++++-----------
 1 file changed, 6 insertions(+), 11 deletions(-)

diff --git a/src/tools/url.js b/src/tools/url.js
index 83769a310f2..f40ed03e2ee 100644
--- a/src/tools/url.js
+++ b/src/tools/url.js
@@ -24,20 +24,15 @@
  * Module defining url handling.
  */
 
+/**
+ * Convert the current URL parameters to an array of strings.
+ * @param {import('../../openmct').OpenMCT} openmct
+ * @returns {Array<string>} newTabParams
+ */
 export function paramsToArray(openmct) {
   const urlParams = openmct.router.getParams();
 
-  // Filter out any parameters whose values are objects, then map the rest to the desired string format.
-  const newTabParams = Object.entries(urlParams).reduce((acc, [key, value]) => {
-    // Only process the parameter if its value is not an object (or is null, which is fine to include).
-    if (typeof value !== 'object' || value === null) {
-      const param = `${key}=${encodeURIComponent(value)}`;
-      acc.push(param);
-    }
-    return acc;
-  }, []);
-
-  return newTabParams;
+  return Object.entries(urlParams).map(([key, value]) => `${key}=${value}`);
 }
 
 export function identifierToString(openmct, objectPath) {

From bf34b8147ea4b40ad632527caed1a121baa52c0b Mon Sep 17 00:00:00 2001
From: Jesse Mazzella <jesse.d.mazzella@nasa.gov>
Date: Fri, 1 Mar 2024 15:22:21 -0800
Subject: [PATCH 08/34] Revert "refactor: remove unnecessary code"

This reverts commit 87aef35c510230835fb682b80e89a6006ef2d923.
---
 src/tools/url.js | 25 ++++++++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/src/tools/url.js b/src/tools/url.js
index f40ed03e2ee..54df5aad938 100644
--- a/src/tools/url.js
+++ b/src/tools/url.js
@@ -30,11 +30,34 @@
  * @returns {Array<string>} newTabParams
  */
 export function paramsToArray(openmct) {
-  const urlParams = openmct.router.getParams();
+  let urlParams = openmct.router.getParams();
+
+  if (urlParams['tc.mode'] === 'fixed') {
+    delete urlParams['tc.startDelta'];
+    delete urlParams['tc.endDelta'];
+  } else if (urlParams['tc.mode'] === 'local') {
+    delete urlParams['tc.startBound'];
+    delete urlParams['tc.endBound'];
+  }
 
   return Object.entries(urlParams).map(([key, value]) => `${key}=${value}`);
 }
 
+// export function paramsToArray(openmct) {
+//   const urlParams = getUrlParams(openmct);
+//   // Filter out any parameters whose values are objects, then map the rest to the desired string format.
+//   const newTabParams = Object.entries(urlParams).reduce((acc, [key, value]) => {
+//     // Only process the parameter if its value is not an object (or is null, which is fine to include).
+//     if (typeof value !== 'object' || value === null) {
+//       const param = `${key}=${encodeURIComponent(value)}`;
+//       acc.push(param);
+//     }
+//     return acc;
+//   }, []);
+
+//   return newTabParams;
+// }
+
 export function identifierToString(openmct, objectPath) {
   return '#/browse/' + openmct.objects.getRelativePath(objectPath);
 }

From ef2db0c58e7ce57752419cd2b1206136e695df03 Mon Sep 17 00:00:00 2001
From: Jesse Mazzella <jesse.d.mazzella@nasa.gov>
Date: Sun, 3 Mar 2024 11:47:33 -0800
Subject: [PATCH 09/34] a11y: improve aria labels for ITC

---
 .../timeConductor/independent/IndependentTimeConductor.vue  | 1 +
 src/ui/components/ObjectFrame.vue                           | 5 +++++
 src/ui/layout/AppLayout.vue                                 | 6 +++++-
 3 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/plugins/timeConductor/independent/IndependentTimeConductor.vue b/src/plugins/timeConductor/independent/IndependentTimeConductor.vue
index a086151af0b..5ca91492a48 100644
--- a/src/plugins/timeConductor/independent/IndependentTimeConductor.vue
+++ b/src/plugins/timeConductor/independent/IndependentTimeConductor.vue
@@ -27,6 +27,7 @@
       isFixed ? 'is-fixed-mode' : independentTCEnabled ? 'is-realtime-mode' : 'is-fixed-mode',
       { 'is-expanded': independentTCEnabled }
     ]"
+    aria-label="Independent Time Conductor Panel"
   >
     <ToggleSwitch
       id="independentTCToggle"
diff --git a/src/ui/components/ObjectFrame.vue b/src/ui/components/ObjectFrame.vue
index 3aa03b84457..78aad29f504 100644
--- a/src/ui/components/ObjectFrame.vue
+++ b/src/ui/components/ObjectFrame.vue
@@ -32,6 +32,7 @@
         'has-complex-content': complexContent
       }
     ]"
+    :aria-label="ariaLabel"
   >
     <div class="c-so-view__header">
       <div class="c-object-label" :class="[statusClass]">
@@ -58,6 +59,7 @@
           'c-so-view__frame-controls--no-frame': !hasFrame,
           'has-complex-content': complexContent
         }"
+        :aria-label="`${ariaLabel} Controls`"
       >
         <div v-if="supportsIndependentTime" class="c-conductor-holder--compact">
           <independent-time-conductor :domain-object="domainObject" :object-path="objectPath" />
@@ -163,6 +165,9 @@ export default {
     };
   },
   computed: {
+    ariaLabel() {
+      return `${this.domainObject.name} Frame`;
+    },
     statusClass() {
       return this.status ? `is-status--${this.status}` : '';
     }
diff --git a/src/ui/layout/AppLayout.vue b/src/ui/layout/AppLayout.vue
index e57cbac5e6b..9ea9e87b058 100644
--- a/src/ui/layout/AppLayout.vue
+++ b/src/ui/layout/AppLayout.vue
@@ -145,7 +145,11 @@
           :show-edit-view="true"
           @change-action-collection="setActionCollection"
         />
-        <component :is="conductorComponent" class="l-shell__time-conductor" />
+        <component
+          :is="conductorComponent"
+          class="l-shell__time-conductor"
+          aria-label="Global Time Conductor"
+        />
       </pane>
       <pane
         class="l-shell__pane-inspector l-pane--holds-multipane"

From 86ef3670a51de8395628a0508b65880b50ed5cc4 Mon Sep 17 00:00:00 2001
From: Jesse Mazzella <jesse.d.mazzella@nasa.gov>
Date: Sun, 3 Mar 2024 11:47:48 -0800
Subject: [PATCH 10/34] fix: simplify url method

---
 src/tools/url.js | 27 ++-------------------------
 1 file changed, 2 insertions(+), 25 deletions(-)

diff --git a/src/tools/url.js b/src/tools/url.js
index 54df5aad938..e8958b0dd97 100644
--- a/src/tools/url.js
+++ b/src/tools/url.js
@@ -30,34 +30,11 @@
  * @returns {Array<string>} newTabParams
  */
 export function paramsToArray(openmct) {
-  let urlParams = openmct.router.getParams();
+  const urlParams = openmct.router.getParams();
 
-  if (urlParams['tc.mode'] === 'fixed') {
-    delete urlParams['tc.startDelta'];
-    delete urlParams['tc.endDelta'];
-  } else if (urlParams['tc.mode'] === 'local') {
-    delete urlParams['tc.startBound'];
-    delete urlParams['tc.endBound'];
-  }
-
-  return Object.entries(urlParams).map(([key, value]) => `${key}=${value}`);
+  return Object.entries(urlParams).map(([key, value]) => `${key}=${encodeURIComponent(value)}`);
 }
 
-// export function paramsToArray(openmct) {
-//   const urlParams = getUrlParams(openmct);
-//   // Filter out any parameters whose values are objects, then map the rest to the desired string format.
-//   const newTabParams = Object.entries(urlParams).reduce((acc, [key, value]) => {
-//     // Only process the parameter if its value is not an object (or is null, which is fine to include).
-//     if (typeof value !== 'object' || value === null) {
-//       const param = `${key}=${encodeURIComponent(value)}`;
-//       acc.push(param);
-//     }
-//     return acc;
-//   }, []);
-
-//   return newTabParams;
-// }
-
 export function identifierToString(openmct, objectPath) {
   return '#/browse/' + openmct.objects.getRelativePath(objectPath);
 }

From 1293554d13db4b409a0520c528b672b781a50b3c Mon Sep 17 00:00:00 2001
From: Jesse Mazzella <jesse.d.mazzella@nasa.gov>
Date: Sun, 3 Mar 2024 11:48:16 -0800
Subject: [PATCH 11/34] fix: update ITC app actions

---
 e2e/appActions.js | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/e2e/appActions.js b/e2e/appActions.js
index 92b71fd2811..0dcfbb36178 100644
--- a/e2e/appActions.js
+++ b/e2e/appActions.js
@@ -505,15 +505,14 @@ async function setTimeConductorBounds(page, startDate, endDate) {
  * @param {string} startDate
  * @param {string} endDate
  */
-async function setIndependentTimeConductorBounds(page, startDate, endDate) {
-  // Activate Independent Time Conductor in Fixed Time Mode
-  await page.getByRole('switch').click();
+async function setIndependentTimeConductorBounds(page, { start, end }) {
+  // Activate Independent Time Conductor
+  await page.getByLabel('Enable Independent Time Conductor').click();
 
   // Bring up the time conductor popup
-  await page.click('.c-conductor-holder--compact .c-compact-tc');
+  await page.getByLabel('Independent Time Conductor Settings').click();
   await expect(page.locator('.itc-popout')).toBeInViewport();
-
-  await setTimeBounds(page, startDate, endDate);
+  await setTimeBounds(page, start, end);
 
   await page.keyboard.press('Enter');
 }

From 70b8247d6e7ce3ad5d587f21603db0d7a5b462a6 Mon Sep 17 00:00:00 2001
From: Jesse Mazzella <jesse.d.mazzella@nasa.gov>
Date: Sun, 3 Mar 2024 11:48:53 -0800
Subject: [PATCH 12/34] test: add test to generate test data for display layout
 w/ overlay plot + ITC enabled

---
 ...isplay_layout_with_child_overlay_plot.json | 26 +++++++++
 .../generateLocalStorageData.e2e.spec.js      | 54 ++++++++++++++++++-
 2 files changed, 79 insertions(+), 1 deletion(-)
 create mode 100644 e2e/test-data/display_layout_with_child_overlay_plot.json

diff --git a/e2e/test-data/display_layout_with_child_overlay_plot.json b/e2e/test-data/display_layout_with_child_overlay_plot.json
new file mode 100644
index 00000000000..b6854feba20
--- /dev/null
+++ b/e2e/test-data/display_layout_with_child_overlay_plot.json
@@ -0,0 +1,26 @@
+{
+  "cookies": [],
+  "origins": [
+    {
+      "origin": "http://localhost:8080",
+      "localStorage": [
+        {
+          "name": "mct",
+          "value": "{\"mine\":{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"29836e66-111a-45f8-81ed-f662661be9f9\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"modified\":1732413602140,\"created\":1732413600860,\"persisted\":1732413602140},\"29836e66-111a-45f8-81ed-f662661be9f9\":{\"identifier\":{\"key\":\"29836e66-111a-45f8-81ed-f662661be9f9\",\"namespace\":\"\"},\"name\":\"Parent Display Layout\",\"type\":\"layout\",\"composition\":[{\"key\":\"55cd0300-6e57-4992-b670-0c2880c0e6b2\",\"namespace\":\"\"}],\"configuration\":{\"items\":[{\"width\":32,\"height\":18,\"x\":1,\"y\":1,\"identifier\":{\"key\":\"55cd0300-6e57-4992-b670-0c2880c0e6b2\",\"namespace\":\"\"},\"hasFrame\":true,\"fontSize\":\"default\",\"font\":\"default\",\"type\":\"subobject-view\",\"id\":\"022720f7-a6b5-40c3-b051-75f5d10a9042\"}],\"layoutGrid\":[10,10]},\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate display layout with 1 child overlay plot\\nchrome\",\"modified\":1732413604780,\"location\":\"mine\",\"created\":1732413602140,\"persisted\":1732413604780},\"55cd0300-6e57-4992-b670-0c2880c0e6b2\":{\"identifier\":{\"key\":\"55cd0300-6e57-4992-b670-0c2880c0e6b2\",\"namespace\":\"\"},\"name\":\"Child Overlay Plot 1\",\"type\":\"telemetry.plot.overlay\",\"composition\":[{\"key\":\"ec13f652-4636-4763-8e88-898144cbc6f2\",\"namespace\":\"\"}],\"configuration\":{\"series\":[{\"identifier\":{\"key\":\"ec13f652-4636-4763-8e88-898144cbc6f2\",\"namespace\":\"\"}}],\"useIndependentTime\":true,\"timeOptions\":{\"clockOffsets\":{\"start\":-1800000,\"end\":30000},\"fixedOffsets\":{\"start\":1731438671000,\"end\":1731442271000},\"clock\":\"local\",\"mode\":\"fixed\"}},\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate display layout with 1 child overlay plot\\nchrome\",\"modified\":1732413605500,\"location\":\"29836e66-111a-45f8-81ed-f662661be9f9\",\"created\":1732413603280,\"persisted\":1732413605500},\"ec13f652-4636-4763-8e88-898144cbc6f2\":{\"name\":\"Child SWG 1\",\"type\":\"generator\",\"identifier\":{\"key\":\"ec13f652-4636-4763-8e88-898144cbc6f2\",\"namespace\":\"\"},\"telemetry\":{\"period\":10,\"amplitude\":1,\"offset\":0,\"dataRateInHz\":1,\"phase\":0,\"randomness\":0,\"loadDelay\":0,\"infinityValues\":false,\"exceedFloat32\":false,\"staleness\":false},\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate display layout with 1 child overlay plot\\nchrome\",\"modified\":1732413604440,\"location\":\"55cd0300-6e57-4992-b670-0c2880c0e6b2\",\"created\":1732413604440,\"persisted\":1732413604440}}"
+        },
+        {
+          "name": "mct-tree-expanded",
+          "value": "[]"
+        },
+        {
+          "name": "tcHistory",
+          "value": "{\"utc\":[{\"start\":1731352271000,\"end\":1731355871000}]}"
+        },
+        {
+          "name": "mct-recent-objects",
+          "value": "[{\"objectPath\":[{\"identifier\":{\"key\":\"29836e66-111a-45f8-81ed-f662661be9f9\",\"namespace\":\"\"},\"name\":\"Parent Display Layout\",\"type\":\"layout\",\"composition\":[{\"key\":\"55cd0300-6e57-4992-b670-0c2880c0e6b2\",\"namespace\":\"\"}],\"configuration\":{\"items\":[],\"layoutGrid\":[10,10]},\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate display layout with 1 child overlay plot\\nchrome\",\"modified\":1732413603280,\"location\":\"mine\",\"created\":1732413602140,\"persisted\":1732413603280},{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"29836e66-111a-45f8-81ed-f662661be9f9\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"modified\":1732413602140,\"created\":1732413600860,\"persisted\":1732413602140},{\"identifier\":{\"key\":\"ROOT\",\"namespace\":\"\"},\"name\":\"Open MCT\",\"type\":\"root\",\"composition\":[{\"key\":\"mine\",\"namespace\":\"\"}]}],\"navigationPath\":\"/browse/mine/29836e66-111a-45f8-81ed-f662661be9f9\",\"domainObject\":{\"identifier\":{\"key\":\"29836e66-111a-45f8-81ed-f662661be9f9\",\"namespace\":\"\"},\"name\":\"Parent Display Layout\",\"type\":\"layout\",\"composition\":[{\"key\":\"55cd0300-6e57-4992-b670-0c2880c0e6b2\",\"namespace\":\"\"}],\"configuration\":{\"items\":[],\"layoutGrid\":[10,10]},\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate display layout with 1 child overlay plot\\nchrome\",\"modified\":1732413603280,\"location\":\"mine\",\"created\":1732413602140,\"persisted\":1732413603280}},{\"objectPath\":[{\"identifier\":{\"key\":\"ec13f652-4636-4763-8e88-898144cbc6f2\",\"namespace\":\"\"},\"name\":\"Child SWG 1\",\"type\":\"generator\",\"telemetry\":{\"period\":10,\"amplitude\":1,\"offset\":0,\"dataRateInHz\":1,\"phase\":0,\"randomness\":0,\"loadDelay\":0,\"infinityValues\":false,\"exceedFloat32\":false,\"staleness\":false},\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate display layout with 1 child overlay plot\\nchrome\",\"modified\":1732413604440,\"location\":\"55cd0300-6e57-4992-b670-0c2880c0e6b2\",\"created\":1732413604440,\"persisted\":1732413604440},{\"identifier\":{\"key\":\"55cd0300-6e57-4992-b670-0c2880c0e6b2\",\"namespace\":\"\"},\"name\":\"Child Overlay Plot 1\",\"type\":\"telemetry.plot.overlay\",\"composition\":[{\"key\":\"ec13f652-4636-4763-8e88-898144cbc6f2\",\"namespace\":\"\"}],\"configuration\":{\"series\":[]},\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate display layout with 1 child overlay plot\\nchrome\",\"modified\":1732413604440,\"location\":\"29836e66-111a-45f8-81ed-f662661be9f9\",\"created\":1732413603280,\"persisted\":1732413604440},{\"identifier\":{\"key\":\"29836e66-111a-45f8-81ed-f662661be9f9\",\"namespace\":\"\"},\"name\":\"Parent Display Layout\",\"type\":\"layout\",\"composition\":[{\"key\":\"55cd0300-6e57-4992-b670-0c2880c0e6b2\",\"namespace\":\"\"}],\"configuration\":{\"items\":[],\"layoutGrid\":[10,10]},\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate display layout with 1 child overlay plot\\nchrome\",\"modified\":1732413603280,\"location\":\"mine\",\"created\":1732413602140,\"persisted\":1732413603280},{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"29836e66-111a-45f8-81ed-f662661be9f9\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"modified\":1732413602140,\"created\":1732413600860,\"persisted\":1732413602140},{\"identifier\":{\"key\":\"ROOT\",\"namespace\":\"\"},\"name\":\"Open MCT\",\"type\":\"root\",\"composition\":[{\"key\":\"mine\",\"namespace\":\"\"}]}],\"navigationPath\":\"/browse/mine/29836e66-111a-45f8-81ed-f662661be9f9/55cd0300-6e57-4992-b670-0c2880c0e6b2/ec13f652-4636-4763-8e88-898144cbc6f2\",\"domainObject\":{\"identifier\":{\"key\":\"ec13f652-4636-4763-8e88-898144cbc6f2\",\"namespace\":\"\"},\"name\":\"Child SWG 1\",\"type\":\"generator\",\"telemetry\":{\"period\":10,\"amplitude\":1,\"offset\":0,\"dataRateInHz\":1,\"phase\":0,\"randomness\":0,\"loadDelay\":0,\"infinityValues\":false,\"exceedFloat32\":false,\"staleness\":false},\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate display layout with 1 child overlay plot\\nchrome\",\"modified\":1732413604440,\"location\":\"55cd0300-6e57-4992-b670-0c2880c0e6b2\",\"created\":1732413604440,\"persisted\":1732413604440}},{\"objectPath\":[{\"identifier\":{\"key\":\"55cd0300-6e57-4992-b670-0c2880c0e6b2\",\"namespace\":\"\"},\"name\":\"Child Overlay Plot 1\",\"type\":\"telemetry.plot.overlay\",\"composition\":[{\"key\":\"ec13f652-4636-4763-8e88-898144cbc6f2\",\"namespace\":\"\"}],\"configuration\":{\"series\":[]},\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate display layout with 1 child overlay plot\\nchrome\",\"modified\":1732413604440,\"location\":\"29836e66-111a-45f8-81ed-f662661be9f9\",\"created\":1732413603280,\"persisted\":1732413604440},{\"identifier\":{\"key\":\"29836e66-111a-45f8-81ed-f662661be9f9\",\"namespace\":\"\"},\"name\":\"Parent Display Layout\",\"type\":\"layout\",\"composition\":[{\"key\":\"55cd0300-6e57-4992-b670-0c2880c0e6b2\",\"namespace\":\"\"}],\"configuration\":{\"items\":[],\"layoutGrid\":[10,10]},\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate display layout with 1 child overlay plot\\nchrome\",\"modified\":1732413603280,\"location\":\"mine\",\"created\":1732413602140,\"persisted\":1732413603280},{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"29836e66-111a-45f8-81ed-f662661be9f9\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"modified\":1732413602140,\"created\":1732413600860,\"persisted\":1732413602140},{\"identifier\":{\"key\":\"ROOT\",\"namespace\":\"\"},\"name\":\"Open MCT\",\"type\":\"root\",\"composition\":[{\"key\":\"mine\",\"namespace\":\"\"}]}],\"navigationPath\":\"/browse/mine/29836e66-111a-45f8-81ed-f662661be9f9/55cd0300-6e57-4992-b670-0c2880c0e6b2\",\"domainObject\":{\"identifier\":{\"key\":\"55cd0300-6e57-4992-b670-0c2880c0e6b2\",\"namespace\":\"\"},\"name\":\"Child Overlay Plot 1\",\"type\":\"telemetry.plot.overlay\",\"composition\":[{\"key\":\"ec13f652-4636-4763-8e88-898144cbc6f2\",\"namespace\":\"\"}],\"configuration\":{\"series\":[]},\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate display layout with 1 child overlay plot\\nchrome\",\"modified\":1732413604440,\"location\":\"29836e66-111a-45f8-81ed-f662661be9f9\",\"created\":1732413603280,\"persisted\":1732413604440}},{\"objectPath\":[{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"29836e66-111a-45f8-81ed-f662661be9f9\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"modified\":1732413602140,\"created\":1732413600860,\"persisted\":1732413602140},{\"identifier\":{\"key\":\"ROOT\",\"namespace\":\"\"},\"name\":\"Open MCT\",\"type\":\"root\",\"composition\":[{\"key\":\"mine\",\"namespace\":\"\"}]}],\"navigationPath\":\"/browse/mine\",\"domainObject\":{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"29836e66-111a-45f8-81ed-f662661be9f9\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"modified\":1732413602140,\"created\":1732413600860,\"persisted\":1732413602140}}]"
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/e2e/tests/framework/generateLocalStorageData.e2e.spec.js b/e2e/tests/framework/generateLocalStorageData.e2e.spec.js
index 4b28e6009a8..416a4f115c3 100644
--- a/e2e/tests/framework/generateLocalStorageData.e2e.spec.js
+++ b/e2e/tests/framework/generateLocalStorageData.e2e.spec.js
@@ -33,7 +33,12 @@
 
 import { fileURLToPath } from 'url';
 
-import { createDomainObjectWithDefaults, createExampleTelemetryObject } from '../../appActions.js';
+import {
+  createDomainObjectWithDefaults,
+  createExampleTelemetryObject,
+  setIndependentTimeConductorBounds,
+  setTimeConductorBounds
+} from '../../appActions.js';
 import { MISSION_TIME } from '../../constants.js';
 import { expect, test } from '../../pluginFixtures.js';
 
@@ -89,6 +94,53 @@ test.describe('Generate Visual Test Data @localStorage @generatedata', () => {
     });
   });
 
+  test('Generate display layout with 1 child overlay plot', async ({ page, context }) => {
+    const parent = await createDomainObjectWithDefaults(page, {
+      type: 'Display Layout',
+      name: 'Parent Display Layout'
+    });
+    const overlayPlot = await createDomainObjectWithDefaults(page, {
+      type: 'Overlay Plot',
+      name: 'Child Overlay Plot 1',
+      parent: parent.uuid
+    });
+    await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      name: 'Child SWG 1',
+      parent: overlayPlot.uuid
+    });
+
+    await page.goto(parent.url, { waitUntil: 'domcontentloaded' });
+
+    await setIndependentTimeConductorBounds(page, {
+      start: '2024-11-12 19:11:11.000Z',
+      end: '2024-11-12 20:11:11.000Z'
+    });
+
+    const NEW_GLOBAL_START_BOUNDS = '2024-11-11 19:11:11.000Z';
+    const NEW_GLOBAL_END_BOUNDS = '2024-11-11 20:11:11.000Z';
+
+    await setTimeConductorBounds(page, NEW_GLOBAL_START_BOUNDS, NEW_GLOBAL_END_BOUNDS);
+
+    // Verify that the global time conductor bounds have been updated
+    expect(
+      await page.getByLabel('Global Time Conductor').getByLabel('Start bounds').textContent()
+    ).toEqual(NEW_GLOBAL_START_BOUNDS);
+    expect(
+      await page.getByLabel('Global Time Conductor').getByLabel('End bounds').textContent()
+    ).toEqual(NEW_GLOBAL_END_BOUNDS);
+
+    //Save localStorage for future test execution
+    await context.storageState({
+      path: fileURLToPath(
+        new URL(
+          '../../../e2e/test-data/display_layout_with_child_overlay_plot.json',
+          import.meta.url
+        )
+      )
+    });
+  });
+
   test('Generate flexible layout with 2 child display layouts', async ({ page, context }) => {
     // Create Display Layout
     const parent = await createDomainObjectWithDefaults(page, {

From 768ecdee96beb64aafcaaf1c43ce1d36d1b266cd Mon Sep 17 00:00:00 2001
From: Jesse Mazzella <jesse.d.mazzella@nasa.gov>
Date: Sun, 3 Mar 2024 11:49:13 -0800
Subject: [PATCH 13/34] test(e2e): add suite + test for open in new tab from
 subobject

- needs cleanup
---
 .../displayLayout/displayLayout.e2e.spec.js   | 101 +++++++++++++++++-
 1 file changed, 99 insertions(+), 2 deletions(-)

diff --git a/e2e/tests/functional/plugins/displayLayout/displayLayout.e2e.spec.js b/e2e/tests/functional/plugins/displayLayout/displayLayout.e2e.spec.js
index f06b29b509b..0d7cca779b0 100644
--- a/e2e/tests/functional/plugins/displayLayout/displayLayout.e2e.spec.js
+++ b/e2e/tests/functional/plugins/displayLayout/displayLayout.e2e.spec.js
@@ -23,6 +23,7 @@ import { fileURLToPath } from 'url';
 
 import {
   createDomainObjectWithDefaults,
+  navigateToObjectWithFixedTimeBounds,
   setFixedTimeMode,
   setIndependentTimeConductorBounds,
   setRealTimeMode,
@@ -30,12 +31,108 @@ import {
 } from '../../../../appActions.js';
 import { expect, test } from '../../../../pluginFixtures.js';
 
-const LOCALSTORAGE_PATH = fileURLToPath(
+const CHILD_LAYOUT_STORAGE_STATE_PATH = fileURLToPath(
   new URL('../../../../test-data/display_layout_with_child_layouts.json', import.meta.url)
 );
+const CHILD_PLOT_STORAGE_STATE_PATH = fileURLToPath(
+  new URL('../../../../test-data/display_layout_with_child_overlay_plot.json', import.meta.url)
+);
 const TINY_IMAGE_BASE64 =
   'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIAQMAAAD+wSzIAAAABlBMVEX///+/v7+jQ3Y5AAAADklEQVQI12P4AIX8EAgALgAD/aNpbtEAAAAASUVORK5CYII';
 
+test.describe('Display Layout Sub-object Actions @localStorage @2p', () => {
+  const INIT_ITC_START_BOUNDS = '2024-11-12 19:11:11.000Z';
+  const INIT_ITC_END_BOUNDS = '2024-11-12 20:11:11.000Z';
+  const NEW_GLOBAL_START_BOUNDS = '2024-11-11 19:11:11.000Z';
+  const NEW_GLOBAL_END_BOUNDS = '2024-11-11 20:11:11.000Z';
+
+  test.use({
+    storageState: CHILD_PLOT_STORAGE_STATE_PATH
+  });
+
+  test.beforeEach(async ({ page }) => {
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+    await page.getByLabel('Expand My Items folder').click();
+    const waitForMyItemsNavigation = page.waitForURL(`**/mine/?*`);
+    await page
+      .getByLabel('Main Tree')
+      .getByLabel('Navigate to Parent Display Layout layout Object')
+      .click();
+    await waitForMyItemsNavigation;
+  });
+  test('Open in New Tab action preserves time bounds', async ({ page }) => {
+    const TEST_FIXED_START_TIME = 1731352271000;
+    const TEST_FIXED_END_TIME = TEST_FIXED_START_TIME + 3600000;
+
+    expect(
+      await page
+        .getByLabel('Child Overlay Plot 1 Frame Controls')
+        .getByLabel('Start bounds')
+        .textContent()
+    ).toEqual(INIT_ITC_START_BOUNDS);
+    expect(
+      await page
+        .getByLabel('Child Overlay Plot 1 Frame Controls')
+        .getByLabel('End bounds')
+        .textContent()
+    ).toEqual(INIT_ITC_END_BOUNDS);
+
+    // Update the global fixed bounds to 2024-11-11 19:11:11.000Z / 2024-11-11 20:11:11.000Z
+    const url = page.url().split('?')[0];
+    await navigateToObjectWithFixedTimeBounds(
+      page,
+      url,
+      TEST_FIXED_START_TIME,
+      TEST_FIXED_END_TIME
+    );
+
+    // ITC bounds should still match the original global bounds
+    expect(
+      await page
+        .getByLabel('Child Overlay Plot 1 Frame Controls')
+        .getByLabel('Start bounds')
+        .textContent()
+    ).toEqual(INIT_ITC_START_BOUNDS);
+    expect(
+      await page
+        .getByLabel('Child Overlay Plot 1 Frame Controls')
+        .getByLabel('End bounds')
+        .textContent()
+    ).toEqual(INIT_ITC_END_BOUNDS);
+
+    // Open the Child Overlay Plot 1 in a new tab
+    await page.getByLabel('View menu items').click();
+    const pagePromise = page.context().waitForEvent('page');
+    await page.getByLabel('Open In New Tab').click();
+
+    const newPage = await pagePromise;
+    await newPage.waitForLoadState('domcontentloaded');
+
+    // Verify that the global time conductor bounds in the new page match the updated global bounds
+    expect(
+      await newPage.getByLabel('Global Time Conductor').getByLabel('Start bounds').textContent()
+    ).toEqual(NEW_GLOBAL_START_BOUNDS);
+    expect(
+      await newPage.getByLabel('Global Time Conductor').getByLabel('End bounds').textContent()
+    ).toEqual(NEW_GLOBAL_END_BOUNDS);
+
+    await expect(newPage.getByLabel('Disable Independent Time Conductor')).toBeVisible();
+    // Verify that the ITC bounds in the new page match the original ITC bounds
+    expect(
+      await newPage
+        .getByLabel('Independent Time Conductor Panel')
+        .getByLabel('Start bounds')
+        .textContent()
+    ).toEqual(INIT_ITC_START_BOUNDS);
+    expect(
+      await newPage
+        .getByLabel('Independent Time Conductor Panel')
+        .getByLabel('End bounds')
+        .textContent()
+    ).toEqual(INIT_ITC_END_BOUNDS);
+  });
+});
+
 test.describe('Display Layout Toolbar Actions @localStorage', () => {
   const PARENT_DISPLAY_LAYOUT_NAME = 'Parent Display Layout';
   const CHILD_DISPLAY_LAYOUT_NAME1 = 'Child Layout 1';
@@ -50,7 +147,7 @@ test.describe('Display Layout Toolbar Actions @localStorage', () => {
     await page.getByLabel('Edit Object').click();
   });
   test.use({
-    storageState: LOCALSTORAGE_PATH
+    storageState: CHILD_LAYOUT_STORAGE_STATE_PATH
   });
 
   test('can add/remove Text element to a single layout', async ({ page }) => {

From d2f934e5d4ba8391ebccfbac8450cdd77c783c58 Mon Sep 17 00:00:00 2001
From: Jesse Mazzella <jesse.d.mazzella@nasa.gov>
Date: Sun, 3 Mar 2024 15:32:59 -0800
Subject: [PATCH 14/34] a11y: various a11y improvement drivebys

---
 e2e/tests/functional/plugins/gauge/gauge.e2e.spec.js  |  4 ++--
 .../plugins/notebook/notebookSnapshots.e2e.spec.js    |  2 +-
 .../visual-a11y/components/header.visual.spec.js      |  4 ++--
 src/api/menu/components/SuperMenu.vue                 | 10 +++++-----
 .../notebook/components/NotebookMenuSwitcher.vue      | 11 ++++++++---
 src/ui/layout/CreateButton.vue                        |  3 ++-
 src/ui/layout/ViewSwitcher.vue                        |  8 +++++++-
 7 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/e2e/tests/functional/plugins/gauge/gauge.e2e.spec.js b/e2e/tests/functional/plugins/gauge/gauge.e2e.spec.js
index 46a65ce5792..d2dd067f307 100644
--- a/e2e/tests/functional/plugins/gauge/gauge.e2e.spec.js
+++ b/e2e/tests/functional/plugins/gauge/gauge.e2e.spec.js
@@ -175,13 +175,13 @@ test.describe('Gauge', () => {
     });
 
     // Try to create a Folder into the Gauge. Should be disallowed.
-    await page.getByRole('button', { name: /Create/ }).click();
+    await page.getByRole('button', { name: 'Create' }).click();
     await page.getByRole('menuitem', { name: /Folder/ }).click();
     await expect(page.locator('[aria-label="Save"]')).toBeDisabled();
     await page.getByLabel('Cancel').click();
 
     // Try to create a Display Layout into the Gauge. Should be disallowed.
-    await page.getByRole('button', { name: /Create/ }).click();
+    await page.getByRole('button', { name: 'Create' }).click();
     await page.getByRole('menuitem', { name: /Display Layout/ }).click();
     await expect(page.locator('[aria-label="Save"]')).toBeDisabled();
   });
diff --git a/e2e/tests/functional/plugins/notebook/notebookSnapshots.e2e.spec.js b/e2e/tests/functional/plugins/notebook/notebookSnapshots.e2e.spec.js
index b6064e86650..377b0783661 100644
--- a/e2e/tests/functional/plugins/notebook/notebookSnapshots.e2e.spec.js
+++ b/e2e/tests/functional/plugins/notebook/notebookSnapshots.e2e.spec.js
@@ -83,7 +83,7 @@ test.describe('Snapshot Container tests', () => {
     //     name: "Dropped Overlay Plot"
     // });
 
-    await page.getByLabel('Take a Notebook Snapshot').click();
+    await page.getByLabel('Open the Notebook Snapshot Menu').click();
     await page.getByRole('menuitem', { name: 'Save to Notebook Snapshots' }).click();
     await page.getByLabel('Show Snapshots').click();
   });
diff --git a/e2e/tests/visual-a11y/components/header.visual.spec.js b/e2e/tests/visual-a11y/components/header.visual.spec.js
index ba9320a83bb..8f5265a979b 100644
--- a/e2e/tests/visual-a11y/components/header.visual.spec.js
+++ b/e2e/tests/visual-a11y/components/header.visual.spec.js
@@ -68,14 +68,14 @@ test.describe('Visual - Header @a11y', () => {
   });
 
   test('show snapshot button', async ({ page, theme }) => {
-    await page.getByLabel('Take a Notebook Snapshot').click();
+    await page.getByLabel('Open the Notebook Snapshot Menu').click();
 
     await page.getByRole('menuitem', { name: 'Save to Notebook Snapshots' }).click();
 
     await percySnapshot(page, `Notebook Snapshot Show button (theme: '${theme}')`, {
       scope: header
     });
-    await expect(await page.getByLabel('Show Snapshots')).toBeVisible();
+    await expect(page.getByLabel('Show Snapshots')).toBeVisible();
   });
 });
 // Skipping for https://github.com/nasa/openmct/issues/7421
diff --git a/src/api/menu/components/SuperMenu.vue b/src/api/menu/components/SuperMenu.vue
index 1bbdaf940e0..5bebe8019d1 100644
--- a/src/api/menu/components/SuperMenu.vue
+++ b/src/api/menu/components/SuperMenu.vue
@@ -38,8 +38,8 @@
             :key="action.name"
             role="menuitem"
             :aria-disabled="action.isDisabled"
+            aria-describedby="item-description"
             :class="action.cssClass"
-            :title="action.description"
             @click="action.onItemClicked"
             @mouseover="toggleItemDescription(action)"
             @mouseleave="toggleItemDescription()"
@@ -64,7 +64,7 @@
         role="menuitem"
         :class="action.cssClass"
         :aria-label="action.name"
-        :title="action.description"
+        aria-describedby="item-description"
         @click="action.onItemClicked"
         @mouseover="toggleItemDescription(action)"
         @mouseleave="toggleItemDescription()"
@@ -79,7 +79,7 @@
       <div class="l-item-description__name">
         {{ hoveredItem.name }}
       </div>
-      <div class="l-item-description__description">
+      <div id="item-description" class="l-item-description__description">
         {{ hoveredItem.description }}
       </div>
     </div>
@@ -90,7 +90,7 @@ import popupMenuMixin from '../mixins/popupMenuMixin.js';
 export default {
   mixins: [popupMenuMixin],
   inject: ['options'],
-  data: function () {
+  data() {
     return {
       hoveredItem: {}
     };
@@ -109,7 +109,7 @@ export default {
         cssClass: action.cssClass
       };
 
-      this.hoveredItem = Object.assign({}, this.hoveredItem, hoveredItem);
+      this.hoveredItem = hoveredItem;
     }
   }
 };
diff --git a/src/plugins/notebook/components/NotebookMenuSwitcher.vue b/src/plugins/notebook/components/NotebookMenuSwitcher.vue
index 99d1384c675..aaa7cbe57b9 100644
--- a/src/plugins/notebook/components/NotebookMenuSwitcher.vue
+++ b/src/plugins/notebook/components/NotebookMenuSwitcher.vue
@@ -23,11 +23,11 @@
   <div class="c-menu-button c-ctrl-wrapper c-ctrl-wrapper--menus-left">
     <button
       class="c-icon-button c-button--menu icon-camera"
-      aria-label="Take a Notebook Snapshot"
-      title="Take a Notebook Snapshot"
+      :aria-label="snapshotMenuLabel"
+      :title="snapshotMenuLabel"
       @click.stop.prevent="showMenu"
     >
-      <span title="Take Notebook Snapshot" class="c-icon-button__label"> Snapshot </span>
+      <span class="c-icon-button__label">Snapshot</span>
     </button>
   </div>
 </template>
@@ -72,6 +72,11 @@ export default {
       notebookTypes: []
     };
   },
+  computed: {
+    snapshotMenuLabel() {
+      return 'Open the Notebook Snapshot Menu';
+    }
+  },
   mounted() {
     validateNotebookStorageObject();
 
diff --git a/src/ui/layout/CreateButton.vue b/src/ui/layout/CreateButton.vue
index 45d1d9e059e..69694a19831 100644
--- a/src/ui/layout/CreateButton.vue
+++ b/src/ui/layout/CreateButton.vue
@@ -24,9 +24,10 @@
     <button
       class="c-create-button c-button--menu c-button--major icon-plus"
       :aria-disabled="isEditing"
+      aria-labelledby="create-button-label"
       @click.prevent.stop="showCreateMenu"
     >
-      <span class="c-button__label">Create</span>
+      <span id="create-button-label" class="c-button__label">Create</span>
     </button>
   </div>
 </template>
diff --git a/src/ui/layout/ViewSwitcher.vue b/src/ui/layout/ViewSwitcher.vue
index 6f966887bfb..0c62325295d 100644
--- a/src/ui/layout/ViewSwitcher.vue
+++ b/src/ui/layout/ViewSwitcher.vue
@@ -27,7 +27,8 @@
     <button
       class="c-icon-button c-button--menu"
       :class="currentView.cssClass"
-      title="Change the current view"
+      :title="viewSwitcherLabel"
+      :aria-label="viewSwitcherLabel"
       @click.prevent.stop="showMenu"
     >
       <span class="c-icon-button__label">
@@ -51,6 +52,11 @@ export default {
     }
   },
   emits: ['set-view'],
+  computed: {
+    viewSwitcherLabel() {
+      return 'Open the View Switcher Menu';
+    }
+  },
   methods: {
     setView(view) {
       this.$emit('set-view', view);

From 4733b6bead55eca15a7eae6f5e9b6595f902b471 Mon Sep 17 00:00:00 2001
From: Jesse Mazzella <jesse.d.mazzella@nasa.gov>
Date: Sun, 3 Mar 2024 15:46:35 -0800
Subject: [PATCH 15/34] a11y: clock indicator needs to be quiet

---
 src/plugins/clock/components/ClockIndicator.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/plugins/clock/components/ClockIndicator.vue b/src/plugins/clock/components/ClockIndicator.vue
index 2342679da3a..8521934b5ce 100644
--- a/src/plugins/clock/components/ClockIndicator.vue
+++ b/src/plugins/clock/components/ClockIndicator.vue
@@ -25,6 +25,7 @@
     aria-label="Clock Indicator"
     class="c-indicator t-indicator-clock icon-clock no-minify c-indicator--not-clickable"
     role="complementary"
+    aria-live="off"
   >
     <span class="label c-indicator__label">
       {{ timeTextValue }}

From beaeebdef96f61079a0366097904d39cf96a19b8 Mon Sep 17 00:00:00 2001
From: Jesse Mazzella <jesse.d.mazzella@nasa.gov>
Date: Sun, 3 Mar 2024 16:22:49 -0800
Subject: [PATCH 16/34] a11y: add `aria-live` to SuperMenu details

---
 src/api/menu/components/SuperMenu.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/api/menu/components/SuperMenu.vue b/src/api/menu/components/SuperMenu.vue
index 5bebe8019d1..58a94a06f3e 100644
--- a/src/api/menu/components/SuperMenu.vue
+++ b/src/api/menu/components/SuperMenu.vue
@@ -74,7 +74,7 @@
       <li v-if="options.actions.length === 0">No actions defined.</li>
     </ul>
 
-    <div class="c-super-menu__item-description">
+    <div aria-live="polite" class="c-super-menu__item-description">
       <div :class="['l-item-description__icon', 'bg-' + hoveredItem.cssClass]"></div>
       <div class="l-item-description__name">
         {{ hoveredItem.name }}

From 751d23e36178f825311d3d9c38ebdd3f121eb7a0 Mon Sep 17 00:00:00 2001
From: Jesse Mazzella <jesse.d.mazzella@nasa.gov>
Date: Sun, 3 Mar 2024 16:56:43 -0800
Subject: [PATCH 17/34] a11y: greatly improve a11y of Menus and SuperMenus

---
 src/api/menu/components/MenuComponent.vue | 22 ++++++++++++++++-
 src/api/menu/components/SuperMenu.vue     | 29 ++++++++++++++++-------
 src/styles/_global.scss                   | 16 +++++++++++--
 3 files changed, 56 insertions(+), 11 deletions(-)

diff --git a/src/api/menu/components/MenuComponent.vue b/src/api/menu/components/MenuComponent.vue
index d7d334f58bc..dfba201b4d2 100644
--- a/src/api/menu/components/MenuComponent.vue
+++ b/src/api/menu/components/MenuComponent.vue
@@ -29,10 +29,13 @@
             :key="action.name"
             role="menuitem"
             :aria-disabled="action.isDisabled"
-            :class="action.cssClass"
             :aria-label="action.name"
+            aria-describedby="item-description"
+            :class="action.cssClass"
             :title="action.description"
             @click="action.onItemClicked"
+            @mouseover="toggleItem(action)"
+            @mouseleave="toggleItem()"
           >
             {{ action.name }}
           </li>
@@ -52,16 +55,23 @@
         v-for="action in options.actions"
         :key="action.name"
         role="menuitem"
+        aria-describedby="item-description"
         :aria-disabled="action.isDisabled"
         :class="action.cssClass"
         :aria-label="action.name"
         :title="action.description"
         @click="action.onItemClicked"
+        @mouseover="toggleItem(action)"
+        @mouseleave="toggleItem()"
       >
         {{ action.name }}
       </li>
       <li v-if="options.actions.length === 0">No actions defined.</li>
     </ul>
+    <div v-if="hoveredItem" id="item-description" class="visually-hidden" aria-live="polite">
+      <span v-if="hoveredItem.name">{{ hoveredItem.name }}</span>
+      <span v-if="hoveredItem.description">: {{ hoveredItem.description }}</span>
+    </div>
   </div>
 </template>
 
@@ -70,11 +80,21 @@ import popupMenuMixin from '../mixins/popupMenuMixin.js';
 export default {
   mixins: [popupMenuMixin],
   inject: ['options'],
+  data() {
+    return {
+      hoveredItem: null
+    };
+  },
   computed: {
     optionsLabel() {
       const label = this.options.label ? `${this.options.label} Menu` : 'Menu';
       return label;
     }
+  },
+  methods: {
+    toggleItem(action) {
+      this.hoveredItem = action ?? null;
+    }
   }
 };
 </script>
diff --git a/src/api/menu/components/SuperMenu.vue b/src/api/menu/components/SuperMenu.vue
index 58a94a06f3e..cd8d72f7be3 100644
--- a/src/api/menu/components/SuperMenu.vue
+++ b/src/api/menu/components/SuperMenu.vue
@@ -75,12 +75,12 @@
     </ul>
 
     <div aria-live="polite" class="c-super-menu__item-description">
-      <div :class="['l-item-description__icon', 'bg-' + hoveredItem.cssClass]"></div>
+      <div :class="itemDescriptionIconClass"></div>
       <div class="l-item-description__name">
-        {{ hoveredItem.name }}
+        {{ hoveredItemName }}
       </div>
       <div id="item-description" class="l-item-description__description">
-        {{ hoveredItem.description }}
+        {{ hoveredItemDescription }}
       </div>
     </div>
   </div>
@@ -92,21 +92,34 @@ export default {
   inject: ['options'],
   data() {
     return {
-      hoveredItem: {}
+      hoveredItem: null
     };
   },
   computed: {
     optionsLabel() {
       const label = this.options.label ? `${this.options.label} Super Menu` : 'Super Menu';
       return label;
+    },
+    itemDescriptionIconClass() {
+      const iconClass = ['l-item-description__icon'];
+      if (this.hoveredItem) {
+        iconClass.push('bg-' + this.hoveredItem.cssClass);
+      }
+      return iconClass;
+    },
+    hoveredItemName() {
+      return this.hoveredItem?.name ?? '';
+    },
+    hoveredItemDescription() {
+      return this.hoveredItem?.description ?? '';
     }
   },
   methods: {
-    toggleItemDescription(action = {}) {
+    toggleItemDescription(action = null) {
       const hoveredItem = {
-        name: action.name,
-        description: action.description,
-        cssClass: action.cssClass
+        name: action?.name,
+        description: action?.description,
+        cssClass: action?.cssClass
       };
 
       this.hoveredItem = hoveredItem;
diff --git a/src/styles/_global.scss b/src/styles/_global.scss
index c5d414d0ef7..42e9607ed54 100644
--- a/src/styles/_global.scss
+++ b/src/styles/_global.scss
@@ -68,6 +68,18 @@ div {
   flex: 1 1 auto;
 }
 
+.visually-hidden {
+  // Provides a way to add accessible text to elements
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
 /******************************************************** BROWSER ELEMENTS */
 body.desktop {
   ::-webkit-scrollbar {
@@ -361,7 +373,7 @@ body.desktop .has-local-controls {
   }
 }
 
-[aria-disabled = 'true'],
+[aria-disabled='true'],
 *[disabled],
 .disabled {
   opacity: $controlDisabledOpacity;
@@ -397,7 +409,7 @@ body.desktop .has-local-controls {
     position: absolute;
     top: 0;
     bottom: 0;
-    content: "";
+    content: '';
     right: 0;
     width: $fadeTruncateW * 1.5;
     z-index: 2;

From 84c27d7748b0bc03171f6d13ad39d239c0d47778 Mon Sep 17 00:00:00 2001
From: Jesse Mazzella <jesse.d.mazzella@nasa.gov>
Date: Sun, 3 Mar 2024 17:41:40 -0800
Subject: [PATCH 18/34] test(e2e): clean up test

---
 .../displayLayout/displayLayout.e2e.spec.js   | 20 +++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/e2e/tests/functional/plugins/displayLayout/displayLayout.e2e.spec.js b/e2e/tests/functional/plugins/displayLayout/displayLayout.e2e.spec.js
index 0d7cca779b0..a59c9b21edf 100644
--- a/e2e/tests/functional/plugins/displayLayout/displayLayout.e2e.spec.js
+++ b/e2e/tests/functional/plugins/displayLayout/displayLayout.e2e.spec.js
@@ -58,12 +58,23 @@ test.describe('Display Layout Sub-object Actions @localStorage @2p', () => {
       .getByLabel('Main Tree')
       .getByLabel('Navigate to Parent Display Layout layout Object')
       .click();
+    // Wait for the URL to change to the display layout
     await waitForMyItemsNavigation;
   });
   test('Open in New Tab action preserves time bounds', async ({ page }) => {
-    const TEST_FIXED_START_TIME = 1731352271000;
-    const TEST_FIXED_END_TIME = TEST_FIXED_START_TIME + 3600000;
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/7524'
+    });
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/6982'
+    });
+
+    const TEST_FIXED_START_TIME = 1731352271000; // 2024-11-11 19:11:11.000Z
+    const TEST_FIXED_END_TIME = TEST_FIXED_START_TIME + 3600000; // 2024-11-11 20:11:11.000Z
 
+    // Verify the ITC has the expected initial bounds
     expect(
       await page
         .getByLabel('Child Overlay Plot 1 Frame Controls')
@@ -86,7 +97,7 @@ test.describe('Display Layout Sub-object Actions @localStorage @2p', () => {
       TEST_FIXED_END_TIME
     );
 
-    // ITC bounds should still match the original global bounds
+    // ITC bounds should still match the initial ITC bounds
     expect(
       await page
         .getByLabel('Child Overlay Plot 1 Frame Controls')
@@ -116,6 +127,7 @@ test.describe('Display Layout Sub-object Actions @localStorage @2p', () => {
       await newPage.getByLabel('Global Time Conductor').getByLabel('End bounds').textContent()
     ).toEqual(NEW_GLOBAL_END_BOUNDS);
 
+    // Verify that the ITC is enabled in the new page
     await expect(newPage.getByLabel('Disable Independent Time Conductor')).toBeVisible();
     // Verify that the ITC bounds in the new page match the original ITC bounds
     expect(
@@ -433,7 +445,7 @@ test.describe('Display Layout', () => {
 
     const startDate = '2021-12-30 01:01:00.000Z';
     const endDate = '2021-12-30 01:11:00.000Z';
-    await setIndependentTimeConductorBounds(page, startDate, endDate);
+    await setIndependentTimeConductorBounds(page, { start: startDate, end: endDate });
 
     // check image date
     await expect(page.getByText('2021-12-30 01:11:00.000Z').first()).toBeVisible();

From dac242e3c47f93d458223965a0aebe2ddfcfb293 Mon Sep 17 00:00:00 2001
From: Jesse Mazzella <jesse.d.mazzella@nasa.gov>
Date: Sun, 3 Mar 2024 17:42:00 -0800
Subject: [PATCH 19/34] fix: improve a11y for context menus, fix test

---
 e2e/tests/framework/appActions.e2e.spec.js | 2 +-
 src/api/menu/components/MenuComponent.vue  | 2 +-
 src/ui/mixins/context-menu-gesture.js      | 3 ++-
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/e2e/tests/framework/appActions.e2e.spec.js b/e2e/tests/framework/appActions.e2e.spec.js
index 4aba0e196ec..cc932479518 100644
--- a/e2e/tests/framework/appActions.e2e.spec.js
+++ b/e2e/tests/framework/appActions.e2e.spec.js
@@ -174,6 +174,6 @@ test.describe('AppActions', () => {
       type: 'Folder'
     });
     await openObjectTreeContextMenu(page, folder.url);
-    await expect(page.getByLabel('Menu')).toBeVisible();
+    await expect(page.getByLabel(`${folder.name} Context Menu`)).toBeVisible();
   });
 });
diff --git a/src/api/menu/components/MenuComponent.vue b/src/api/menu/components/MenuComponent.vue
index dfba201b4d2..ae5d4d743ce 100644
--- a/src/api/menu/components/MenuComponent.vue
+++ b/src/api/menu/components/MenuComponent.vue
@@ -87,7 +87,7 @@ export default {
   },
   computed: {
     optionsLabel() {
-      const label = this.options.label ? `${this.options.label} Menu` : 'Menu';
+      const label = this.options.label ? `${this.options.label} Context Menu` : 'Context Menu';
       return label;
     }
   },
diff --git a/src/ui/mixins/context-menu-gesture.js b/src/ui/mixins/context-menu-gesture.js
index 038e500329e..343f246fe3a 100644
--- a/src/ui/mixins/context-menu-gesture.js
+++ b/src/ui/mixins/context-menu-gesture.js
@@ -61,7 +61,8 @@ export default {
       let sortedActions = this.openmct.actions._groupAndSortActions(actions);
 
       const menuOptions = {
-        onDestroy: this.onContextMenuDestroyed
+        onDestroy: this.onContextMenuDestroyed,
+        label: this.objectPath[0].name
       };
 
       const menuItems = this.openmct.menus.actionsToMenuItems(

From 7bdf8e3ab2eeb556afd723a01c53bef9e143493e Mon Sep 17 00:00:00 2001
From: Jesse Mazzella <jesse.d.mazzella@nasa.gov>
Date: Mon, 4 Mar 2024 11:11:16 -0800
Subject: [PATCH 20/34] chore: remove nop-longer-recommended extension

---
 .vscode/extensions.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index 24ebdbe6fb2..d88ed5d86a6 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -5,7 +5,6 @@
   // List of extensions which should be recommended for users of this workspace.
   "recommendations": [
     "Vue.volar",
-    "Vue.vscode-typescript-vue-plugin",
     "dbaeumer.vscode-eslint",
     "rvest.vs-code-prettier-eslint"
   ],

From 72370152ede858af130ec802a16dd577a3574bca Mon Sep 17 00:00:00 2001
From: Jesse Mazzella <jesse.d.mazzella@nasa.gov>
Date: Mon, 4 Mar 2024 11:36:55 -0800
Subject: [PATCH 21/34] feat: provide one more bound option for example data
 viz

---
 .../components/ExampleDataVisualizationSource.vue         | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/example/dataVisualization/components/ExampleDataVisualizationSource.vue b/example/dataVisualization/components/ExampleDataVisualizationSource.vue
index b4856b60feb..fe0dcde44ec 100644
--- a/example/dataVisualization/components/ExampleDataVisualizationSource.vue
+++ b/example/dataVisualization/components/ExampleDataVisualizationSource.vue
@@ -55,6 +55,7 @@
 </template>
 
 <script>
+const ONE_HOUR = 60 * 60 * 1000;
 export default {
   inject: ['openmct', 'domainObject'],
   data() {
@@ -77,6 +78,10 @@ export default {
     selectItem(item, event) {
       event.stopPropagation();
       const bounds = this.openmct.time.getBounds();
+      const otherBounds = {
+        start: bounds.start - ONE_HOUR,
+        end: bounds.end + ONE_HOUR
+      };
       const selection = [
         {
           element: this.$el,
@@ -90,6 +95,9 @@ export default {
               dataRanges: [
                 {
                   bounds
+                },
+                {
+                  bounds: otherBounds
                 }
               ],
               loading: false

From 0e75c240017cb4e6a6208e95e5b93b9aa100cca8 Mon Sep 17 00:00:00 2001
From: Jesse Mazzella <jesse.d.mazzella@nasa.gov>
Date: Mon, 4 Mar 2024 11:37:31 -0800
Subject: [PATCH 22/34] fix: no need for `mount`, use dynamic rendering instead

---
 .../NumericDataInspectorView.vue              | 79 ++++++-------------
 .../TelemetryFrame.vue                        | 14 +++-
 2 files changed, 35 insertions(+), 58 deletions(-)

diff --git a/src/plugins/inspectorDataVisualization/NumericDataInspectorView.vue b/src/plugins/inspectorDataVisualization/NumericDataInspectorView.vue
index 049e5fbb6ab..92a43eb1f63 100644
--- a/src/plugins/inspectorDataVisualization/NumericDataInspectorView.vue
+++ b/src/plugins/inspectorDataVisualization/NumericDataInspectorView.vue
@@ -25,7 +25,18 @@
     <div class="c-inspect-properties">
       <div class="c-inspect-properties__header">Numeric Data</div>
     </div>
-    <div ref="numericDataView"></div>
+    <div ref="numericDataView">
+      <TelemetryFrame
+        v-for="plotObject of plotObjects"
+        :key="plotObject.identifier.key"
+        :bounds="bounds"
+        :telemetry-object="plotObject"
+        :path="[plotObject]"
+        :render-when-visible="plotObject.renderWhenVisible"
+      >
+        <Plot />
+      </TelemetryFrame>
+    </div>
 
     <div v-if="!hasNumericData">
       {{ noNumericDataText }}
@@ -33,13 +44,15 @@
   </div>
 </template>
 <script>
-import mount from 'utils/mount';
-
 import VisibilityObserver from '../../utils/visibility/VisibilityObserver.js';
 import Plot from '../plot/PlotView.vue';
 import TelemetryFrame from './TelemetryFrame.vue';
 
 export default {
+  components: {
+    TelemetryFrame,
+    Plot
+  },
   inject: ['openmct', 'domainObject', 'timeFormatter'],
   props: {
     bounds: {
@@ -90,16 +103,19 @@ export default {
       this.clearPlots();
 
       this.unregisterTimeContextList = [];
-      this.componentsList = [];
-      this.elementsList = [];
       this.visibilityObservers = [];
 
       this.telemetryKeys.forEach(async (telemetryKey) => {
         const plotObject = await this.openmct.objects.get(telemetryKey);
+        const visibilityObserver = new VisibilityObserver(
+          this.$refs.numericDataView,
+          this.openmct.element
+        );
+        plotObject.renderWhenVisible = visibilityObserver.renderWhenVisible;
 
+        this.visibilityObservers.push(visibilityObserver);
         this.plotObjects.push(plotObject);
         this.unregisterTimeContextList.push(this.setIndependentTimeContextForComponent(plotObject));
-        this.renderPlot(plotObject);
       });
     },
     setIndependentTimeContextForComponent(plotObject) {
@@ -110,63 +126,14 @@ export default {
       // set the time context of the object to the selected time range
       return this.openmct.time.addIndependentContext(keyString, this.bounds);
     },
-    renderPlot(plotObject) {
-      const wrapper = document.createElement('div');
-      const visibilityObserver = new VisibilityObserver(wrapper, this.openmct.element);
-
-      const { destroy } = mount(
-        {
-          components: {
-            TelemetryFrame,
-            Plot
-          },
-          provide: {
-            openmct: this.openmct,
-            path: [plotObject],
-            renderWhenVisible: visibilityObserver.renderWhenVisible
-          },
-          data() {
-            return {
-              plotObject,
-              bounds: this.bounds
-            };
-          },
-          template: `<TelemetryFrame
-                      :bounds="bounds"
-                      :telemetry-object="plotObject"
-                    >
-                      <Plot />
-                    </TelemetryFrame>`
-        },
-        {
-          app: this.openmct.app,
-          element: wrapper
-        }
-      );
-
-      this.componentsList.push(destroy);
-      this.elementsList.push(wrapper);
-      this.visibilityObservers.push(visibilityObserver);
-      this.$refs.numericDataView.append(wrapper);
-    },
     clearPlots() {
-      if (this.componentsList?.length) {
-        this.componentsList.forEach((destroy) => destroy());
-        delete this.componentsList;
-      }
-
-      if (this.elementsList?.length) {
-        this.elementsList.forEach((element) => element.remove());
-        delete this.elementsList;
-      }
-
       if (this.visibilityObservers?.length) {
         this.visibilityObservers.forEach((visibilityObserver) => visibilityObserver.destroy());
         delete this.visibilityObservers;
       }
 
       if (this.plotObjects?.length) {
-        this.plotObjects = [];
+        this.plotObjects.splice(0, this.plotObjects.length);
       }
 
       if (this.unregisterTimeContextList?.length) {
diff --git a/src/plugins/inspectorDataVisualization/TelemetryFrame.vue b/src/plugins/inspectorDataVisualization/TelemetryFrame.vue
index da3a230647b..f3509debb28 100644
--- a/src/plugins/inspectorDataVisualization/TelemetryFrame.vue
+++ b/src/plugins/inspectorDataVisualization/TelemetryFrame.vue
@@ -70,17 +70,27 @@ export default {
   inject: ['openmct'],
   provide() {
     return {
-      domainObject: this.telemetryObject
+      domainObject: this.telemetryObject,
+      path: this.path,
+      renderWhenVisible: this.renderWhenVisible
     };
   },
   props: {
     bounds: {
       type: Object,
-      default: () => {}
+      required: true
     },
     telemetryObject: {
       type: Object,
       default: () => {}
+    },
+    path: {
+      type: Array,
+      default: () => []
+    },
+    renderWhenVisible: {
+      type: Function,
+      required: true
     }
   },
   data() {

From bc9f3626676e297ef34108a38bc8a880a3d1ccfc Mon Sep 17 00:00:00 2001
From: Jesse Mazzella <jesse.d.mazzella@nasa.gov>
Date: Mon, 4 Mar 2024 15:14:14 -0800
Subject: [PATCH 23/34] Revert "fix: simplify url method"

This reverts commit b24c7dabc783a9a1c3f2460eada99f452259f566.
---
 src/tools/url.js | 27 +++++++++++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/tools/url.js b/src/tools/url.js
index e8958b0dd97..54df5aad938 100644
--- a/src/tools/url.js
+++ b/src/tools/url.js
@@ -30,11 +30,34 @@
  * @returns {Array<string>} newTabParams
  */
 export function paramsToArray(openmct) {
-  const urlParams = openmct.router.getParams();
+  let urlParams = openmct.router.getParams();
 
-  return Object.entries(urlParams).map(([key, value]) => `${key}=${encodeURIComponent(value)}`);
+  if (urlParams['tc.mode'] === 'fixed') {
+    delete urlParams['tc.startDelta'];
+    delete urlParams['tc.endDelta'];
+  } else if (urlParams['tc.mode'] === 'local') {
+    delete urlParams['tc.startBound'];
+    delete urlParams['tc.endBound'];
+  }
+
+  return Object.entries(urlParams).map(([key, value]) => `${key}=${value}`);
 }
 
+// export function paramsToArray(openmct) {
+//   const urlParams = getUrlParams(openmct);
+//   // Filter out any parameters whose values are objects, then map the rest to the desired string format.
+//   const newTabParams = Object.entries(urlParams).reduce((acc, [key, value]) => {
+//     // Only process the parameter if its value is not an object (or is null, which is fine to include).
+//     if (typeof value !== 'object' || value === null) {
+//       const param = `${key}=${encodeURIComponent(value)}`;
+//       acc.push(param);
+//     }
+//     return acc;
+//   }, []);
+
+//   return newTabParams;
+// }
+
 export function identifierToString(openmct, objectPath) {
   return '#/browse/' + openmct.objects.getRelativePath(objectPath);
 }

From b849c3f4086b5b7777514f70f22bb2accbab68ff Mon Sep 17 00:00:00 2001
From: Jesse Mazzella <jesse.d.mazzella@nasa.gov>
Date: Mon, 4 Mar 2024 15:33:33 -0800
Subject: [PATCH 24/34] fix: correct time conductor bounds when opening in a
 new tab from a plot in the inspector

---
 .../TelemetryFrame.vue                        |  4 +++-
 .../openInNewTabAction/openInNewTabAction.js  | 22 ++++++++++++++++--
 src/tools/url.js                              | 23 ++++++-------------
 3 files changed, 30 insertions(+), 19 deletions(-)

diff --git a/src/plugins/inspectorDataVisualization/TelemetryFrame.vue b/src/plugins/inspectorDataVisualization/TelemetryFrame.vue
index f3509debb28..79ec7d70c3f 100644
--- a/src/plugins/inspectorDataVisualization/TelemetryFrame.vue
+++ b/src/plugins/inspectorDataVisualization/TelemetryFrame.vue
@@ -120,7 +120,9 @@ export default {
         'tc.mode': 'fixed'
       };
       const newTabAction = this.openmct.actions.getAction('newTab');
-      newTabAction.invoke([sourceTelemObject], urlParams);
+      // No view context needed, so pass undefined.
+      // The urlParams arg will override the global time bounds with the dataviz plot bounds.
+      newTabAction.invoke([sourceTelemObject], undefined, urlParams);
       this.showMenu = false;
     },
     previewTelemetry() {
diff --git a/src/plugins/openInNewTabAction/openInNewTabAction.js b/src/plugins/openInNewTabAction/openInNewTabAction.js
index e9f601924bd..bfa60b893cc 100644
--- a/src/plugins/openInNewTabAction/openInNewTabAction.js
+++ b/src/plugins/openInNewTabAction/openInNewTabAction.js
@@ -31,8 +31,26 @@ export default class OpenInNewTab {
 
     this._openmct = openmct;
   }
-  invoke(objectPath, urlParams = undefined) {
-    let url = objectPathToUrl(this._openmct, objectPath, urlParams);
+
+  /**
+   * Invokes the "Open in New Tab" action. This will open the object in a new
+   * browser tab. The URL for the new tab is determined by the current object
+   * path and any custom time bounds.
+   *
+   * @param {import('@/api/objects/ObjectAPI').DomainObject[]} objectPath The current object path
+   * @param {ViewContext} _view The view context for the object being opened (unused)
+   * @param {Object<string, string | number>} customUrlParams Provides the ability to override
+   * the global time conductor bounds. It is an object with the following key/value pairs:
+   * ```
+   * {
+   *  'tc.start': <number>,
+   *  'tc.end': <number>,
+   *  'tc.mode': 'fixed' | 'local' | <string>
+   * }
+   * ```
+   */
+  invoke(objectPath, _view, customUrlParams) {
+    const url = objectPathToUrl(this._openmct, objectPath, customUrlParams);
     window.open(url);
   }
 }
diff --git a/src/tools/url.js b/src/tools/url.js
index 54df5aad938..7aff233e002 100644
--- a/src/tools/url.js
+++ b/src/tools/url.js
@@ -29,9 +29,15 @@
  * @param {import('../../openmct').OpenMCT} openmct
  * @returns {Array<string>} newTabParams
  */
-export function paramsToArray(openmct) {
+export function paramsToArray(openmct, customUrlParams = {}) {
   let urlParams = openmct.router.getParams();
 
+  // Merge the custom URL parameters with the current URL parameters.
+  Object.entries(customUrlParams).forEach((param) => {
+    const [key, value] = param;
+    urlParams[key] = value;
+  });
+
   if (urlParams['tc.mode'] === 'fixed') {
     delete urlParams['tc.startDelta'];
     delete urlParams['tc.endDelta'];
@@ -43,21 +49,6 @@ export function paramsToArray(openmct) {
   return Object.entries(urlParams).map(([key, value]) => `${key}=${value}`);
 }
 
-// export function paramsToArray(openmct) {
-//   const urlParams = getUrlParams(openmct);
-//   // Filter out any parameters whose values are objects, then map the rest to the desired string format.
-//   const newTabParams = Object.entries(urlParams).reduce((acc, [key, value]) => {
-//     // Only process the parameter if its value is not an object (or is null, which is fine to include).
-//     if (typeof value !== 'object' || value === null) {
-//       const param = `${key}=${encodeURIComponent(value)}`;
-//       acc.push(param);
-//     }
-//     return acc;
-//   }, []);
-
-//   return newTabParams;
-// }
-
 export function identifierToString(openmct, objectPath) {
   return '#/browse/' + openmct.objects.getRelativePath(objectPath);
 }

From 6383a21d58c43dad01a85ef1faf521f79c2ea06f Mon Sep 17 00:00:00 2001
From: Jesse Mazzella <jesse.d.mazzella@nasa.gov>
Date: Mon, 4 Mar 2024 18:34:54 -0800
Subject: [PATCH 25/34] test: fix e2e tests

---
 e2e/tests/functional/planning/timestrip.e2e.spec.js    | 10 ++++++++--
 .../plugins/flexibleLayout/flexibleLayout.e2e.spec.js  |  9 ++++-----
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/e2e/tests/functional/planning/timestrip.e2e.spec.js b/e2e/tests/functional/planning/timestrip.e2e.spec.js
index 46abb087f9b..e6b36181c7b 100644
--- a/e2e/tests/functional/planning/timestrip.e2e.spec.js
+++ b/e2e/tests/functional/planning/timestrip.e2e.spec.js
@@ -131,7 +131,10 @@ test.describe('Time Strip', () => {
       const startBoundString = new Date(startBound).toISOString().replace('T', ' ');
       const endBoundString = new Date(endBound).toISOString().replace('T', ' ');
 
-      await setIndependentTimeConductorBounds(page, startBoundString, endBoundString);
+      await setIndependentTimeConductorBounds(page, {
+        start: startBoundString,
+        end: endBoundString
+      });
       expect(await activityBounds.count()).toEqual(1);
     });
 
@@ -160,7 +163,10 @@ test.describe('Time Strip', () => {
       const startBoundString = new Date(startBound).toISOString().replace('T', ' ');
       const endBoundString = new Date(endBound).toISOString().replace('T', ' ');
 
-      await setIndependentTimeConductorBounds(page, startBoundString, endBoundString);
+      await setIndependentTimeConductorBounds(page, {
+        start: startBoundString,
+        end: endBoundString
+      });
 
       // Verify that two events are displayed
       expect(await activityBounds.count()).toEqual(2);
diff --git a/e2e/tests/functional/plugins/flexibleLayout/flexibleLayout.e2e.spec.js b/e2e/tests/functional/plugins/flexibleLayout/flexibleLayout.e2e.spec.js
index e25283d8d6a..17ad06b78a8 100644
--- a/e2e/tests/functional/plugins/flexibleLayout/flexibleLayout.e2e.spec.js
+++ b/e2e/tests/functional/plugins/flexibleLayout/flexibleLayout.e2e.spec.js
@@ -248,11 +248,10 @@ test.describe('Flexible Layout', () => {
     await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
 
     // flip on independent time conductor
-    await setIndependentTimeConductorBounds(
-      page,
-      '2021-12-30 01:01:00.000Z',
-      '2021-12-30 01:11:00.000Z'
-    );
+    await setIndependentTimeConductorBounds(page, {
+      start: '2021-12-30 01:01:00.000Z',
+      end: '2021-12-30 01:11:00.000Z'
+    });
 
     // check image date
     await expect(page.getByText('2021-12-30 01:11:00.000Z').first()).toBeVisible();

From 87b9866ce0f267e20b49721973d16a41c0e34a15 Mon Sep 17 00:00:00 2001
From: Jesse Mazzella <jesse.d.mazzella@nasa.gov>
Date: Mon, 4 Mar 2024 18:35:37 -0800
Subject: [PATCH 26/34] Revert "test: remove test as feature is no longer
 needed"

This reverts commit 759ebd4667bffb1979d5f62af6b47f349dcd9f77.
---
 src/tools/urlSpec.js | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/tools/urlSpec.js b/src/tools/urlSpec.js
index 90436c83667..740067ee14c 100644
--- a/src/tools/urlSpec.js
+++ b/src/tools/urlSpec.js
@@ -65,5 +65,15 @@ describe('the url tool', function () {
       const constructedURL = objectPathToUrl(openmct, mockObjectPath);
       expect(constructedURL).toContain('#/browse/mock-parent-folder/mock-folder');
     });
+    it('can take params to set a custom url', () => {
+      const customParams = {
+        'tc.startBound': 1669911059,
+        'tc.endBound': 1669911082,
+        'tc.mode': 'fixed'
+      };
+      const constructedURL = objectPathToUrl(openmct, mockObjectPath, customParams);
+      expect(constructedURL).toContain('tc.startBound=1669911059&tc.endBound=1669911082');
+      expect(constructedURL).toContain('tc.mode=fixed');
+    });
   });
 });

From 28381b5aac37882a2087814c451f175a1e80ebc7 Mon Sep 17 00:00:00 2001
From: Jesse Mazzella <jesse.d.mazzella@nasa.gov>
Date: Mon, 4 Mar 2024 18:40:05 -0800
Subject: [PATCH 27/34] test: move 2p annotation to test

---
 .../plugins/displayLayout/displayLayout.e2e.spec.js           | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/e2e/tests/functional/plugins/displayLayout/displayLayout.e2e.spec.js b/e2e/tests/functional/plugins/displayLayout/displayLayout.e2e.spec.js
index a59c9b21edf..83c34ad93fb 100644
--- a/e2e/tests/functional/plugins/displayLayout/displayLayout.e2e.spec.js
+++ b/e2e/tests/functional/plugins/displayLayout/displayLayout.e2e.spec.js
@@ -40,7 +40,7 @@ const CHILD_PLOT_STORAGE_STATE_PATH = fileURLToPath(
 const TINY_IMAGE_BASE64 =
   'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIAQMAAAD+wSzIAAAABlBMVEX///+/v7+jQ3Y5AAAADklEQVQI12P4AIX8EAgALgAD/aNpbtEAAAAASUVORK5CYII';
 
-test.describe('Display Layout Sub-object Actions @localStorage @2p', () => {
+test.describe('Display Layout Sub-object Actions @localStorage', () => {
   const INIT_ITC_START_BOUNDS = '2024-11-12 19:11:11.000Z';
   const INIT_ITC_END_BOUNDS = '2024-11-12 20:11:11.000Z';
   const NEW_GLOBAL_START_BOUNDS = '2024-11-11 19:11:11.000Z';
@@ -61,7 +61,7 @@ test.describe('Display Layout Sub-object Actions @localStorage @2p', () => {
     // Wait for the URL to change to the display layout
     await waitForMyItemsNavigation;
   });
-  test('Open in New Tab action preserves time bounds', async ({ page }) => {
+  test('Open in New Tab action preserves time bounds  @2p', async ({ page }) => {
     test.info().annotations.push({
       type: 'issue',
       description: 'https://github.com/nasa/openmct/issues/7524'

From ff23585f5511ecade34cd482ef054daf057da5a6 Mon Sep 17 00:00:00 2001
From: Jesse Mazzella <jesse.d.mazzella@nasa.gov>
Date: Tue, 5 Mar 2024 10:52:46 -0800
Subject: [PATCH 28/34] test: fix e2e

---
 .../displayLayout/displayLayout.e2e.spec.js   |  2 +-
 .../styling/flexLayoutStyling.e2e.spec.js     | 80 ++++++++++++++-----
 .../ExampleDataVisualizationSource.vue        |  4 +-
 3 files changed, 61 insertions(+), 25 deletions(-)

diff --git a/e2e/tests/functional/plugins/displayLayout/displayLayout.e2e.spec.js b/e2e/tests/functional/plugins/displayLayout/displayLayout.e2e.spec.js
index 83c34ad93fb..cc678d3b5bf 100644
--- a/e2e/tests/functional/plugins/displayLayout/displayLayout.e2e.spec.js
+++ b/e2e/tests/functional/plugins/displayLayout/displayLayout.e2e.spec.js
@@ -61,7 +61,7 @@ test.describe('Display Layout Sub-object Actions @localStorage', () => {
     // Wait for the URL to change to the display layout
     await waitForMyItemsNavigation;
   });
-  test('Open in New Tab action preserves time bounds  @2p', async ({ page }) => {
+  test('Open in New Tab action preserves time bounds @2p', async ({ page }) => {
     test.info().annotations.push({
       type: 'issue',
       description: 'https://github.com/nasa/openmct/issues/7524'
diff --git a/e2e/tests/functional/plugins/styling/flexLayoutStyling.e2e.spec.js b/e2e/tests/functional/plugins/styling/flexLayoutStyling.e2e.spec.js
index 6431066effa..27129822fd0 100644
--- a/e2e/tests/functional/plugins/styling/flexLayoutStyling.e2e.spec.js
+++ b/e2e/tests/functional/plugins/styling/flexLayoutStyling.e2e.spec.js
@@ -114,7 +114,9 @@ test.describe('Flexible Layout styling', () => {
       hexToRGB(defaultFrameBorderColor),
       NO_STYLE_RGBA,
       hexToRGB(setTextColor),
-      page.getByLabel('StackedPlot1 Frame').getByLabel('Stacked Plot Style Target')
+      page
+        .getByRole('group', { name: 'StackedPlot1 Frame' })
+        .getByLabel('Stacked Plot Style Target')
     );
 
     // Check styles on StackedPlot2. Note: https://github.com/nasa/openmct/issues/7337
@@ -122,7 +124,9 @@ test.describe('Flexible Layout styling', () => {
       hexToRGB(defaultFrameBorderColor),
       NO_STYLE_RGBA,
       hexToRGB(setTextColor),
-      page.getByLabel('StackedPlot2 Frame').getByLabel('Stacked Plot Style Target')
+      page
+        .getByRole('group', { name: 'StackedPlot2 Frame' })
+        .getByLabel('Stacked Plot Style Target')
     );
   });
 
@@ -143,7 +147,9 @@ test.describe('Flexible Layout styling', () => {
       hexToRGB(defaultBorderTargetColor),
       NO_STYLE_RGBA,
       hexToRGB(defaultTextColor),
-      page.getByLabel('StackedPlot1 Frame').getByLabel('Stacked Plot Style Target')
+      page
+        .getByRole('group', { name: 'StackedPlot1 Frame' })
+        .getByLabel('Stacked Plot Style Target')
     );
 
     // Check styles on StackedPlot2
@@ -151,7 +157,9 @@ test.describe('Flexible Layout styling', () => {
       hexToRGB(defaultBorderTargetColor),
       NO_STYLE_RGBA,
       hexToRGB(defaultTextColor),
-      page.getByLabel('StackedPlot2 Frame').getByLabel('Stacked Plot Style Target')
+      page
+        .getByRole('group', { name: 'StackedPlot2 Frame' })
+        .getByLabel('Stacked Plot Style Target')
     );
 
     // Set styles using setStyles function on StackedPlot1 but not StackedPlot2
@@ -160,7 +168,7 @@ test.describe('Flexible Layout styling', () => {
       setBorderColor,
       setBackgroundColor,
       setTextColor,
-      page.getByLabel('StackedPlot1 Frame')
+      page.getByRole('group', { name: 'StackedPlot1 Frame' })
     );
 
     // Check styles on StackedPlot1
@@ -168,7 +176,9 @@ test.describe('Flexible Layout styling', () => {
       hexToRGB(setBorderColor),
       hexToRGB(setBackgroundColor),
       hexToRGB(setTextColor),
-      page.getByLabel('StackedPlot1 Frame').getByLabel('Stacked Plot Style Target')
+      page
+        .getByRole('group', { name: 'StackedPlot1 Frame' })
+        .getByLabel('Stacked Plot Style Target')
     );
 
     // Check styles on StackedPlot2
@@ -176,7 +186,9 @@ test.describe('Flexible Layout styling', () => {
       hexToRGB(defaultBorderTargetColor),
       NO_STYLE_RGBA,
       hexToRGB(defaultTextColor),
-      page.getByLabel('StackedPlot2 Frame').getByLabel('Stacked Plot Style Target')
+      page
+        .getByRole('group', { name: 'StackedPlot2 Frame' })
+        .getByLabel('Stacked Plot Style Target')
     );
 
     // Save Flexible Layout
@@ -191,7 +203,9 @@ test.describe('Flexible Layout styling', () => {
       hexToRGB(setBorderColor),
       hexToRGB(setBackgroundColor),
       hexToRGB(setTextColor),
-      page.getByLabel('StackedPlot1 Frame').getByLabel('Stacked Plot Style Target')
+      page
+        .getByRole('group', { name: 'StackedPlot1 Frame' })
+        .getByLabel('Stacked Plot Style Target')
     );
 
     // Check styles on StackedPlot2
@@ -199,7 +213,9 @@ test.describe('Flexible Layout styling', () => {
       hexToRGB(defaultBorderTargetColor),
       NO_STYLE_RGBA,
       hexToRGB(defaultTextColor),
-      page.getByLabel('StackedPlot2 Frame').getByLabel('Stacked Plot Style Target')
+      page
+        .getByRole('group', { name: 'StackedPlot2 Frame' })
+        .getByLabel('Stacked Plot Style Target')
     );
   });
 
@@ -241,7 +257,9 @@ test.describe('Flexible Layout styling', () => {
       hexToRGB(setBorderColor),
       hexToRGB(setBackgroundColor),
       hexToRGB(setTextColor),
-      page.getByLabel('StackedPlot1 Frame').getByLabel('Stacked Plot Style Target')
+      page
+        .getByRole('group', { name: 'StackedPlot1 Frame' })
+        .getByLabel('Stacked Plot Style Target')
     );
 
     // Check styles on StackedPlot2 to verify they are the default
@@ -249,7 +267,9 @@ test.describe('Flexible Layout styling', () => {
       hexToRGB(defaultBorderTargetColor),
       NO_STYLE_RGBA,
       hexToRGB(defaultTextColor),
-      page.getByLabel('StackedPlot2 Frame').getByLabel('Stacked Plot Style Target')
+      page
+        .getByRole('group', { name: 'StackedPlot2 Frame' })
+        .getByLabel('Stacked Plot Style Target')
     );
 
     // Set styles using setStyles function on StackedPlot2
@@ -258,7 +278,7 @@ test.describe('Flexible Layout styling', () => {
       setBorderColor,
       setBackgroundColor,
       setTextColor,
-      page.getByLabel('StackedPlot2 Frame')
+      page.getByRole('group', { name: 'StackedPlot2 Frame' })
     );
 
     // Check styles on StackedPlot2
@@ -266,7 +286,9 @@ test.describe('Flexible Layout styling', () => {
       hexToRGB(setBorderColor),
       hexToRGB(setBackgroundColor),
       hexToRGB(setTextColor),
-      page.getByLabel('StackedPlot2 Frame').getByLabel('Stacked Plot Style Target')
+      page
+        .getByRole('group', { name: 'StackedPlot2 Frame' })
+        .getByLabel('Stacked Plot Style Target')
     );
 
     // Save Flexible Layout
@@ -281,7 +303,9 @@ test.describe('Flexible Layout styling', () => {
       hexToRGB(setBorderColor),
       hexToRGB(setBackgroundColor),
       hexToRGB(setTextColor),
-      page.getByLabel('StackedPlot1 Frame').getByLabel('Stacked Plot Style Target')
+      page
+        .getByRole('group', { name: 'StackedPlot1 Frame' })
+        .getByLabel('Stacked Plot Style Target')
     );
 
     // Check styles on StackedPlot2
@@ -289,7 +313,9 @@ test.describe('Flexible Layout styling', () => {
       hexToRGB(setBorderColor),
       hexToRGB(setBackgroundColor),
       hexToRGB(setTextColor),
-      page.getByLabel('StackedPlot2 Frame').getByLabel('Stacked Plot Style Target')
+      page
+        .getByRole('group', { name: 'StackedPlot2 Frame' })
+        .getByLabel('Stacked Plot Style Target')
     );
 
     // Directly navigate to the flexible layout
@@ -326,7 +352,9 @@ test.describe('Flexible Layout styling', () => {
       hexToRGB(setBorderColor),
       hexToRGB(setBackgroundColor),
       hexToRGB(setTextColor),
-      page.getByLabel('StackedPlot1 Frame').getByLabel('Stacked Plot Style Target')
+      page
+        .getByRole('group', { name: 'StackedPlot1 Frame' })
+        .getByLabel('Stacked Plot Style Target')
     );
 
     // Check styles on StackedPlot2 matches previous set colors
@@ -334,7 +362,9 @@ test.describe('Flexible Layout styling', () => {
       hexToRGB(setBorderColor),
       hexToRGB(setBackgroundColor),
       hexToRGB(setTextColor),
-      page.getByLabel('StackedPlot2 Frame').getByLabel('Stacked Plot Style Target')
+      page
+        .getByRole('group', { name: 'StackedPlot2 Frame' })
+        .getByLabel('Stacked Plot Style Target')
     );
   });
 
@@ -356,7 +386,7 @@ test.describe('Flexible Layout styling', () => {
       setBorderColor,
       setBackgroundColor,
       setTextColor,
-      page.getByLabel('StackedPlot1 Frame')
+      page.getByRole('group', { name: 'StackedPlot1 Frame' })
     );
 
     // Check styles using checkStyles function
@@ -364,7 +394,9 @@ test.describe('Flexible Layout styling', () => {
       hexToRGB(setBorderColor),
       hexToRGB(setBackgroundColor),
       hexToRGB(setTextColor),
-      page.getByLabel('StackedPlot1 Frame').getByLabel('Stacked Plot Style Target')
+      page
+        .getByRole('group', { name: 'StackedPlot1 Frame' })
+        .getByLabel('Stacked Plot Style Target')
     );
 
     // Save Flexible Layout
@@ -386,7 +418,7 @@ test.describe('Flexible Layout styling', () => {
       'No Style',
       'No Style',
       'No Style',
-      page.getByLabel('StackedPlot1 Frame')
+      page.getByRole('group', { name: 'StackedPlot1 Frame' })
     );
 
     // Check styles using checkStyles function
@@ -394,7 +426,9 @@ test.describe('Flexible Layout styling', () => {
       hexToRGB(defaultBorderTargetColor),
       NO_STYLE_RGBA,
       hexToRGB(inheritedColor),
-      page.getByLabel('StackedPlot1 Frame').getByLabel('Stacked Plot Style Target')
+      page
+        .getByRole('group', { name: 'StackedPlot1 Frame' })
+        .getByLabel('Stacked Plot Style Target')
     );
     // Save Flexible Layout
     await page.getByRole('button', { name: 'Save' }).click();
@@ -408,7 +442,9 @@ test.describe('Flexible Layout styling', () => {
       hexToRGB(defaultBorderTargetColor),
       NO_STYLE_RGBA,
       hexToRGB(inheritedColor),
-      page.getByLabel('StackedPlot1 Frame').getByLabel('Stacked Plot Style Target')
+      page
+        .getByRole('group', { name: 'StackedPlot1 Frame' })
+        .getByLabel('Stacked Plot Style Target')
     );
   });
 
diff --git a/example/dataVisualization/components/ExampleDataVisualizationSource.vue b/example/dataVisualization/components/ExampleDataVisualizationSource.vue
index fe0dcde44ec..7bb79497a6b 100644
--- a/example/dataVisualization/components/ExampleDataVisualizationSource.vue
+++ b/example/dataVisualization/components/ExampleDataVisualizationSource.vue
@@ -94,10 +94,10 @@ export default {
               },
               dataRanges: [
                 {
-                  bounds
+                  bounds: otherBounds
                 },
                 {
-                  bounds: otherBounds
+                  bounds
                 }
               ],
               loading: false

From c48af0f58038a1cd6d9c882fd5da8b034129f664 Mon Sep 17 00:00:00 2001
From: Jesse Mazzella <jesse.d.mazzella@nasa.gov>
Date: Tue, 5 Mar 2024 10:53:57 -0800
Subject: [PATCH 29/34] fix: no words for the word god today

---
 src/plugins/inspectorDataVisualization/TelemetryFrame.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/plugins/inspectorDataVisualization/TelemetryFrame.vue b/src/plugins/inspectorDataVisualization/TelemetryFrame.vue
index 79ec7d70c3f..6be2f35b198 100644
--- a/src/plugins/inspectorDataVisualization/TelemetryFrame.vue
+++ b/src/plugins/inspectorDataVisualization/TelemetryFrame.vue
@@ -121,7 +121,8 @@ export default {
       };
       const newTabAction = this.openmct.actions.getAction('newTab');
       // No view context needed, so pass undefined.
-      // The urlParams arg will override the global time bounds with the dataviz plot bounds.
+      // The urlParams arg will override the global time bounds with the data visualization
+      // plot bounds.
       newTabAction.invoke([sourceTelemObject], undefined, urlParams);
       this.showMenu = false;
     },

From 689f9da3fb18eda713bc5936c56687ba7245785b Mon Sep 17 00:00:00 2001
From: Jesse Mazzella <jesse.d.mazzella@nasa.gov>
Date: Tue, 5 Mar 2024 13:57:03 -0800
Subject: [PATCH 30/34] test: fix e2e

---
 .../functional/plugins/conditionSet/conditionSet.e2e.spec.js    | 2 +-
 .../plugins/styling/styleInspectorOptions.e2e.spec.js           | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/e2e/tests/functional/plugins/conditionSet/conditionSet.e2e.spec.js b/e2e/tests/functional/plugins/conditionSet/conditionSet.e2e.spec.js
index a9684daabb3..ade83caa8ab 100644
--- a/e2e/tests/functional/plugins/conditionSet/conditionSet.e2e.spec.js
+++ b/e2e/tests/functional/plugins/conditionSet/conditionSet.e2e.spec.js
@@ -286,7 +286,7 @@ test.describe('Basic Condition Set Use', () => {
     await page.locator('button[title="Save"]').click();
     await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
 
-    await page.click('button[title="Change the current view"]');
+    await page.getByLabel('Open the View Switcher Menu').click();
 
     await expect(page.getByRole('menuitem', { name: /Lad Table/ })).toBeHidden();
     await expect(page.getByRole('menuitem', { name: /Conditions View/ })).toBeVisible();
diff --git a/e2e/tests/functional/plugins/styling/styleInspectorOptions.e2e.spec.js b/e2e/tests/functional/plugins/styling/styleInspectorOptions.e2e.spec.js
index 1898d8bad85..b64cf9b3c9b 100644
--- a/e2e/tests/functional/plugins/styling/styleInspectorOptions.e2e.spec.js
+++ b/e2e/tests/functional/plugins/styling/styleInspectorOptions.e2e.spec.js
@@ -67,7 +67,7 @@ test.describe('Style Inspector Options', () => {
     await expect(page.getByRole('tab', { name: 'Styles' })).toBeVisible();
 
     // Select Stacked Layout Column
-    await page.getByLabel('Stacked Plot Frame').click();
+    await page.getByRole('group', { name: 'Stacked Plot Frame' }).click();
 
     // The overall Flex Layout or Stacked Plot itself MUST be style-able.
     await expect(page.getByRole('tab', { name: 'Styles' })).toBeVisible();

From 6657b34412ca7753566a0e11a7d3c7665e3be8a9 Mon Sep 17 00:00:00 2001
From: Jesse Mazzella <jesse.d.mazzella@nasa.gov>
Date: Tue, 5 Mar 2024 16:16:03 -0800
Subject: [PATCH 31/34] fix: e2e test

---
 e2e/tests/visual-a11y/styling.visual.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/e2e/tests/visual-a11y/styling.visual.spec.js b/e2e/tests/visual-a11y/styling.visual.spec.js
index eccaef12e4d..d8edc3b1658 100644
--- a/e2e/tests/visual-a11y/styling.visual.spec.js
+++ b/e2e/tests/visual-a11y/styling.visual.spec.js
@@ -91,7 +91,7 @@ test.describe('Flexible Layout styling @a11y', () => {
       setBorderColor,
       setBackgroundColor,
       setTextColor,
-      page.getByLabel('StackedPlot1 Frame')
+      page.getByRole('group', { name: 'StackedPlot1 Frame' })
     );
 
     await percySnapshot(

From 9b6cf51320f99f86e7ea550f9421f60ea786246a Mon Sep 17 00:00:00 2001
From: Jesse Mazzella <jesse.d.mazzella@nasa.gov>
Date: Tue, 5 Mar 2024 16:36:16 -0800
Subject: [PATCH 32/34] test: fix test

---
 e2e/tests/visual-a11y/telemetryViews.visual.spec.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/e2e/tests/visual-a11y/telemetryViews.visual.spec.js b/e2e/tests/visual-a11y/telemetryViews.visual.spec.js
index 3e382c0b0bc..acb62628046 100644
--- a/e2e/tests/visual-a11y/telemetryViews.visual.spec.js
+++ b/e2e/tests/visual-a11y/telemetryViews.visual.spec.js
@@ -53,11 +53,11 @@ test.describe('Visual - Telemetry Views', () => {
     await page.goto(telemetry.url, { waitUntil: 'domcontentloaded' });
 
     //Click this button to see telemetry display options
-    await page.getByRole('button', { name: 'Plot' }).click();
+    await page.getByLabel('Open the View Switcher Menu').click();
     await page.getByLabel('Telemetry Table').click();
 
     //Get Table View in place
-    expect(await page.getByLabel('Expand Columns')).toBeInViewport();
+    await expect(page.getByLabel('Expand Columns')).toBeInViewport();
 
     await percySnapshot(page, `Default Telemetry Table View (theme: ${theme})`);
 

From 6ab14b7c2f19414909b645f6e4e1f0bfb776d22e Mon Sep 17 00:00:00 2001
From: Jesse Mazzella <jesse.d.mazzella@nasa.gov>
Date: Tue, 5 Mar 2024 16:38:07 -0800
Subject: [PATCH 33/34] driveby: fix perf test

---
 e2e/tests/performance/contract/imagery.contract.perf.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/e2e/tests/performance/contract/imagery.contract.perf.spec.js b/e2e/tests/performance/contract/imagery.contract.perf.spec.js
index c87e6df5eab..1608b7956c8 100644
--- a/e2e/tests/performance/contract/imagery.contract.perf.spec.js
+++ b/e2e/tests/performance/contract/imagery.contract.perf.spec.js
@@ -178,7 +178,7 @@ test.describe('Performance tests', () => {
     console.log('jpgResourceTiming ' + JSON.stringify(jpgResourceTiming));
 
     // Click Close Icon
-    await page.locator('[aria-label="Close"]').click();
+    await page.getByRole('button', { name: 'Close' }).click();
     await page.evaluate(() => window.performance.mark('view-large-close-button'));
 
     //await client.send('HeapProfiler.enable');

From 06db9d090e3bedc46a34fb25cc7cbb06faa8d01b Mon Sep 17 00:00:00 2001
From: Jesse Mazzella <jesse.d.mazzella@nasa.gov>
Date: Thu, 7 Mar 2024 14:42:13 -0800
Subject: [PATCH 34/34] fix: revert required prop change

---
 src/plugins/inspectorDataVisualization/TelemetryFrame.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/plugins/inspectorDataVisualization/TelemetryFrame.vue b/src/plugins/inspectorDataVisualization/TelemetryFrame.vue
index 6be2f35b198..6094d1e8512 100644
--- a/src/plugins/inspectorDataVisualization/TelemetryFrame.vue
+++ b/src/plugins/inspectorDataVisualization/TelemetryFrame.vue
@@ -78,7 +78,7 @@ export default {
   props: {
     bounds: {
       type: Object,
-      required: true
+      default: () => {}
     },
     telemetryObject: {
       type: Object,