Provide renderWhenVisible to LadTableSets (#7384)

* Provide renderWhenVisible for LadTables

* fix open in new tab

* add test for open in new tab

* fix test to include renderWhenVisible

* refactor test

* fix tests

* fix tests

* having timing issues now

e2e/tests/functional/plugins/inspectorDataVisualization/numericData.e2e.spec.js

@@ -36,7 +36,7 @@ test.describe('Testing numeric data with inspector data visualization (i.e., dat
     await page.goto('./', { waitUntil: 'domcontentloaded' });
   });
 
-  test('Can click on telemetry and see data in inspector', async ({ page }) => {
+  test('Can click on telemetry and see data in inspector', async ({ page, context }) => {
     const exampleDataVisualizationSource = await createDomainObjectWithDefaults(page, {
       type: 'Example Data Visualization Source'
     });
@@ -67,5 +67,16 @@ test.describe('Testing numeric data with inspector data visualization (i.e., dat
       page.locator('span.plot-series-name', { hasText: 'Second Sine Wave Generator Hz' })
     ).toBeVisible();
     await expect(page.locator('.js-series-data-loaded')).toBeVisible();
+
+    // test new tab
+    await page.getByLabel('Inspector Views').getByLabel('More actions').click();
+    const pagePromise = context.waitForEvent('page');
+    await page.getByRole('menuitem', { name: /Open In New Tab/ }).click();
+
+    // ensure our new tab's title is correct
+    const newPage = await pagePromise;
+    await newPage.waitForLoadState();
+    // expect new tab title to contain 'Second Sine Wave Generator'
+    await expect(newPage).toHaveTitle('Second Sine Wave Generator');
   });
 });

e2e/tests/functional/plugins/lad/lad.e2e.spec.js

@@ -56,9 +56,9 @@ test.describe('Testing LAD table configuration', () => {
     await page.getByRole('tab', { name: 'LAD Table Configuration' }).click();
 
     // make sure headers are visible initially
-    await expect(page.getByRole('cell', { name: 'Timestamp' })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'Timestamp', exact: true })).toBeVisible();
     await expect(page.getByRole('cell', { name: 'Units' })).toBeVisible();
-    await expect(page.getByRole('cell', { name: 'Type' })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'Type', exact: true })).toBeVisible();
     await expect(page.getByRole('cell', { name: 'WATCH' })).toBeVisible();
     await expect(page.getByRole('cell', { name: 'WARNING' })).toBeVisible();
     await expect(page.getByRole('cell', { name: 'DISTRESS' })).toBeVisible();
@@ -66,10 +66,10 @@ test.describe('Testing LAD table configuration', () => {
     await expect(page.getByRole('cell', { name: 'SEVERE' })).toBeVisible();
 
     // hide timestamp column
-    await page.getByLabel('Timestamp').uncheck();
+    await page.getByLabel('Timestamp', { exact: true }).uncheck();
-    await expect(page.getByRole('cell', { name: 'Timestamp' })).toBeHidden();
+    await expect(page.getByRole('cell', { name: 'Timestamp', exact: true })).toBeHidden();
     await expect(page.getByRole('cell', { name: 'Units' })).toBeVisible();
-    await expect(page.getByRole('cell', { name: 'Type' })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'Type', exact: true })).toBeVisible();
     await expect(page.getByRole('cell', { name: 'WATCH' })).toBeVisible();
     await expect(page.getByRole('cell', { name: 'WARNING' })).toBeVisible();
     await expect(page.getByRole('cell', { name: 'DISTRESS' })).toBeVisible();
@@ -78,10 +78,10 @@ test.describe('Testing LAD table configuration', () => {
 
     // hide units & type column
     await page.getByLabel('Units').uncheck();
-    await page.getByLabel('Type').uncheck();
+    await page.getByLabel('Type', { exact: true }).uncheck();
-    await expect(page.getByRole('cell', { name: 'Timestamp' })).toBeHidden();
+    await expect(page.getByRole('cell', { name: 'Timestamp', exact: true })).toBeHidden();
     await expect(page.getByRole('cell', { name: 'Units' })).toBeHidden();
-    await expect(page.getByRole('cell', { name: 'Type' })).toBeHidden();
+    await expect(page.getByRole('cell', { name: 'Type', exact: true })).toBeHidden();
     await expect(page.getByRole('cell', { name: 'WATCH' })).toBeVisible();
     await expect(page.getByRole('cell', { name: 'WARNING' })).toBeVisible();
     await expect(page.getByRole('cell', { name: 'DISTRESS' })).toBeVisible();
@@ -90,9 +90,9 @@ test.describe('Testing LAD table configuration', () => {
 
     // hide WATCH column
     await page.getByLabel('WATCH').uncheck();
-    await expect(page.getByRole('cell', { name: 'Timestamp' })).toBeHidden();
+    await expect(page.getByRole('cell', { name: 'Timestamp', exact: true })).toBeHidden();
     await expect(page.getByRole('cell', { name: 'Units' })).toBeHidden();
-    await expect(page.getByRole('cell', { name: 'Type' })).toBeHidden();
+    await expect(page.getByRole('cell', { name: 'Type', exact: true })).toBeHidden();
     await expect(page.getByRole('cell', { name: 'WATCH' })).toBeHidden();
     await expect(page.getByRole('cell', { name: 'WARNING' })).toBeVisible();
     await expect(page.getByRole('cell', { name: 'DISTRESS' })).toBeVisible();
@@ -103,9 +103,9 @@ test.describe('Testing LAD table configuration', () => {
     await page.locator('button[title="Save"]').click();
     await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
     await page.reload();
-    await expect(page.getByRole('cell', { name: 'Timestamp' })).toBeHidden();
+    await expect(page.getByRole('cell', { name: 'Timestamp', exact: true })).toBeHidden();
     await expect(page.getByRole('cell', { name: 'Units' })).toBeHidden();
-    await expect(page.getByRole('cell', { name: 'Type' })).toBeHidden();
+    await expect(page.getByRole('cell', { name: 'Type', exact: true })).toBeHidden();
     await expect(page.getByRole('cell', { name: 'WATCH' })).toBeHidden();
     await expect(page.getByRole('cell', { name: 'WARNING' })).toBeVisible();
     await expect(page.getByRole('cell', { name: 'DISTRESS' })).toBeVisible();
@@ -117,10 +117,10 @@ test.describe('Testing LAD table configuration', () => {
     await page.getByRole('tab', { name: 'LAD Table Configuration' }).click();
 
     // show timestamp column
-    await page.getByLabel('Timestamp').check();
+    await page.getByLabel('Timestamp', { exact: true }).check();
     await expect(page.getByRole('cell', { name: 'Units' })).toBeHidden();
-    await expect(page.getByRole('cell', { name: 'Type' })).toBeHidden();
+    await expect(page.getByRole('cell', { name: 'Type', exact: true })).toBeHidden();
-    await expect(page.getByRole('cell', { name: 'Timestamp' })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'Timestamp', exact: true })).toBeVisible();
     await expect(page.getByRole('cell', { name: 'WATCH' })).toBeHidden();
     await expect(page.getByRole('cell', { name: 'WARNING' })).toBeVisible();
     await expect(page.getByRole('cell', { name: 'DISTRESS' })).toBeVisible();
@@ -132,8 +132,8 @@ test.describe('Testing LAD table configuration', () => {
     await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
     await page.reload();
     await expect(page.getByRole('cell', { name: 'Units' })).toBeHidden();
-    await expect(page.getByRole('cell', { name: 'Type' })).toBeHidden();
+    await expect(page.getByRole('cell', { name: 'Type', exact: true })).toBeHidden();
-    await expect(page.getByRole('cell', { name: 'Timestamp' })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'Timestamp', exact: true })).toBeVisible();
     await expect(page.getByRole('cell', { name: 'WATCH' })).toBeHidden();
     await expect(page.getByRole('cell', { name: 'WARNING' })).toBeVisible();
     await expect(page.getByRole('cell', { name: 'DISTRESS' })).toBeVisible();
@@ -146,11 +146,11 @@ test.describe('Testing LAD table configuration', () => {
 
     // show units, type, and WATCH columns
     await page.getByLabel('Units').check();
-    await page.getByLabel('Type').check();
+    await page.getByLabel('Type', { exact: true }).check();
     await page.getByLabel('WATCH').check();
-    await expect(page.getByRole('cell', { name: 'Timestamp' })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'Timestamp', exact: true })).toBeVisible();
     await expect(page.getByRole('cell', { name: 'Units' })).toBeVisible();
-    await expect(page.getByRole('cell', { name: 'Type' })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'Type', exact: true })).toBeVisible();
     await expect(page.getByRole('cell', { name: 'WATCH' })).toBeVisible();
     await expect(page.getByRole('cell', { name: 'WARNING' })).toBeVisible();
     await expect(page.getByRole('cell', { name: 'DISTRESS' })).toBeVisible();
@@ -161,9 +161,9 @@ test.describe('Testing LAD table configuration', () => {
     await page.locator('button[title="Save"]').click();
     await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
     await page.reload();
-    await expect(page.getByRole('cell', { name: 'Timestamp' })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'Timestamp', exact: true })).toBeVisible();
     await expect(page.getByRole('cell', { name: 'Units' })).toBeVisible();
-    await expect(page.getByRole('cell', { name: 'Type' })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'Type', exact: true })).toBeVisible();
     await expect(page.getByRole('cell', { name: 'WATCH' })).toBeVisible();
     await expect(page.getByRole('cell', { name: 'WARNING' })).toBeVisible();
     await expect(page.getByRole('cell', { name: 'DISTRESS' })).toBeVisible();
@@ -185,9 +185,9 @@ test.describe('Testing LAD table configuration', () => {
     await page.getByRole('tab', { name: 'LAD Table Configuration' }).click();
 
     // make sure Sine Wave headers are visible initially too
-    await expect(page.getByRole('cell', { name: 'Timestamp' })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'Timestamp', exact: true })).toBeVisible();
     await expect(page.getByRole('cell', { name: 'Units' })).toBeVisible();
-    await expect(page.getByRole('cell', { name: 'Type' })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'Type', exact: true })).toBeVisible();
     await expect(page.getByRole('cell', { name: 'WATCH' })).toBeVisible();
     await expect(page.getByRole('cell', { name: 'WARNING' })).toBeVisible();
     await expect(page.getByRole('cell', { name: 'DISTRESS' })).toBeVisible();
@@ -206,8 +206,8 @@ test.describe('Testing LAD table configuration', () => {
     // Ensure Units & Limit columns are gone
     // as Event Generator don't have them
     await page.goto(ladTable.url);
-    await expect(page.getByRole('cell', { name: 'Timestamp' })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'Timestamp', exact: true })).toBeVisible();
-    await expect(page.getByRole('cell', { name: 'Type' })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'Type', exact: true })).toBeVisible();
     await expect(page.getByRole('cell', { name: 'Units' })).toBeHidden();
     await expect(page.getByRole('cell', { name: 'WATCH' })).toBeHidden();
     await expect(page.getByRole('cell', { name: 'WARNING' })).toBeHidden();

e2e/tests/functional/plugins/lad/ladSet.e2e.spec.js

@@ -0,0 +1,66 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import { createDomainObjectWithDefaults } from '../../../../appActions.js';
+import { expect, test } from '../../../../pluginFixtures.js';
+
+test.describe('LAD Table Sets', () => {
+  test('Ensure we have numbers in cells', async ({ page }) => {
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    const ladTableSet = await createDomainObjectWithDefaults(page, {
+      type: 'LAD Table Set'
+    });
+
+    const firstLadTable = await createDomainObjectWithDefaults(page, {
+      type: 'LAD Table',
+      parent: ladTableSet.uuid
+    });
+
+    await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      parent: firstLadTable.uuid
+    });
+
+    const secondLadTable = await createDomainObjectWithDefaults(page, {
+      type: 'LAD Table',
+      parent: ladTableSet.uuid
+    });
+
+    await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      parent: secondLadTable.uuid
+    });
+
+    await page.goto(ladTableSet.url);
+
+    const valueFromFirstSineWave = await page.getByLabel('lad value').first().innerText();
+    const firstSineWaveNumber = parseFloat(valueFromFirstSineWave);
+    // ensure we have a float value in the cell and it's finite
+    expect(Number.isFinite(firstSineWaveNumber)).toBeTruthy();
+
+    const valueFromSecondSineWave = await page.getByLabel('lad value').last().innerText();
+    const secondSineWaveNumber = parseFloat(valueFromSecondSineWave);
+    // ensure we have a float value in the cell and it's finite
+    expect(Number.isFinite(secondSineWaveNumber)).toBeTruthy();
+  });
+});

src/plugins/LADTable/LadTableSetView.js

@@ -34,7 +34,7 @@ export default class LadTableSetView {
     this.component = null;
   }
 
-  show(element) {
+  show(element, isEditing, { renderWhenVisible }) {
     let ladTableConfiguration = new LADTableConfiguration(this.domainObject, this.openmct);
 
     const { vNode, destroy } = mount(
@@ -47,7 +47,8 @@ export default class LadTableSetView {
           openmct: this.openmct,
           objectPath: this.objectPath,
           currentView: this,
-          ladTableConfiguration
+          ladTableConfiguration,
+          renderWhenVisible
         },
         data: () => {
           return {

src/plugins/LADTable/components/LadRow.vue

@@ -35,13 +35,20 @@
     >
       {{ domainObject.name }}
     </td>
-    <td v-if="showTimestamp" class="js-second-data">{{ formattedTimestamp }}</td>
+    <td v-if="showTimestamp" aria-label="lad timestamp" class="js-second-data">
-    <td class="js-third-data" :class="valueClasses">{{ value }}</td>
+      {{ formattedTimestamp }}
+    </td>
+    <td aria-label="lad value" class="js-third-data" :class="valueClasses">{{ value }}</td>
     <td v-if="hasUnits" class="js-units">
       {{ unit }}
     </td>
-    <td v-if="showType" class="js-type-data">{{ typeLabel }}</td>
+    <td v-if="showType" aria-label="lad type" class="js-type-data">{{ typeLabel }}</td>
-    <td v-for="limit in formattedLimitValues" :key="limit.key" class="js-limit-data">
+    <td
+      v-for="limit in formattedLimitValues"
+      :key="limit.key"
+      aria-label="lad limit value"
+      class="js-limit-data"
+    >
       {{ limit.value }}
     </td>
   </tr>

src/plugins/LADTable/components/LadTableConfiguration.vue

@@ -143,6 +143,9 @@ export default {
       ladTable.domainObject = domainObject;
       ladTable.key = this.openmct.objects.makeKeyString(domainObject.identifier);
 
+      if (!this.ladTelemetryObjects) {
+        this.ladTelemetryObjects = {};
+      }
       this.ladTelemetryObjects[ladTable.key] = [];
       this.ladTableObjects.push(ladTable);
 

src/plugins/LADTable/pluginSpec.js

@@ -423,7 +423,7 @@ describe('The LAD Table Set', () => {
         (viewProvider) => viewProvider.key === ladTableSetKey
       );
       ladTableSetView = ladTableSetViewProvider.view(mockObj.ladTableSet, [mockObj.ladTableSet]);
-      ladTableSetView.show(child);
+      ladTableSetView.show(child, false, { renderWhenVisible });
 
       return nextTick();
     });

src/plugins/inspectorDataVisualization/TelemetryFrame.vue

@@ -93,13 +93,11 @@ export default {
       this.showMenu = !this.showMenu;
     },
     async getTelemetryPath() {
-      let sourceTelem;
+      const telemetryObjectKeyString = this.openmct.objects.makeKeyString(
-      if (this.telemetryObject.type === 'yamcs.telemetry') {
+        this.telemetryObject.identifier
-        sourceTelem = this.openmct.objects.makeKeyString(this.telemetryObject.identifier);
+      );
-      } else if (this.telemetryObject.type === 'yamcs.image') {
+
-        sourceTelem = this.openmct.objects.makeKeyString(this.telemetryObject.identifier);
+      const telemetryPath = await this.openmct.objects.getOriginalPath(telemetryObjectKeyString);
-      }
-      const telemetryPath = await this.openmct.objects.getOriginalPath(sourceTelem);
       return telemetryPath;
     },
     async openInNewTab() {