[Telemetry Table] Address issues found during testing Table Performance (#7529)

Fix exporting from Limited Mode: #7268 (comment)
Fix UI issues: #7268 (comment)
Apply configuration changes made in Edit Properties.

---------

Co-authored-by: Jesse Mazzella <jesse.d.mazzella@nasa.gov>
Co-authored-by: Andrew Henry <akhenry@gmail.com>

e2e/appActions.js

@@ -392,6 +392,7 @@ async function setTimeConductorMode(page, isFixedTimespan = true) {
     await page.getByRole('menuitem', { name: /Real-Time/ }).click();
     await page.waitForURL(/tc\.mode=local/);
   }
+  await page.getByLabel('Submit time offsets').or(page.getByLabel('Submit time bounds')).click();
 }
 
 /**
@@ -662,5 +663,6 @@ export {
   setRealTimeMode,
   setStartOffset,
   setTimeConductorBounds,
+  setTimeConductorMode,
   waitForPlotsToRender
 };

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

@@ -20,10 +20,31 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import { createDomainObjectWithDefaults, setTimeConductorBounds } from '../../../../appActions.js';
+import {
+  createDomainObjectWithDefaults,
+  setTimeConductorBounds,
+  setTimeConductorMode
+} from '../../../../appActions.js';
 import { expect, test } from '../../../../pluginFixtures.js';
 
 test.describe('Telemetry Table', () => {
+  let table;
+  test.beforeEach(async ({ page }) => {
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+    table = await createDomainObjectWithDefaults(page, { type: 'Telemetry Table' });
+  });
+
+  test('Limits to 50 rows by default', async ({ page }) => {
+    await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      parent: table.uuid
+    });
+    await page.goto(table.url);
+    await setTimeConductorMode(page, false);
+    const rows = page.getByLabel('table content').getByLabel('Table Row');
+    await expect(rows).toHaveCount(50);
+  });
+
   test('unpauses and filters data when paused by button and user changes bounds', async ({
     page
   }) => {
@@ -34,7 +55,6 @@ test.describe('Telemetry Table', () => {
 
     await page.goto('./', { waitUntil: 'domcontentloaded' });
 
-    const table = await createDomainObjectWithDefaults(page, { type: 'Telemetry Table' });
     await createDomainObjectWithDefaults(page, {
       type: 'Sine Wave Generator',
       parent: table.uuid
@@ -78,7 +98,6 @@ test.describe('Telemetry Table', () => {
   test('Supports filtering telemetry by regular text search', async ({ page }) => {
     await page.goto('./', { waitUntil: 'domcontentloaded' });
 
-    const table = await createDomainObjectWithDefaults(page, { type: 'Telemetry Table' });
     await createDomainObjectWithDefaults(page, {
       type: 'Event Message Generator',
       parent: table.uuid
@@ -121,7 +140,6 @@ test.describe('Telemetry Table', () => {
   test('Supports filtering using Regex', async ({ page }) => {
     await page.goto('./', { waitUntil: 'domcontentloaded' });
 
-    const table = await createDomainObjectWithDefaults(page, { type: 'Telemetry Table' });
     await createDomainObjectWithDefaults(page, {
       type: 'Event Message Generator',
       parent: table.uuid

e2e/tests/visual-a11y/imagery.visual.spec.js

@@ -75,8 +75,6 @@ test.describe('Visual - Example Imagery', () => {
     await page.goto(exampleImagery.url, { waitUntil: 'domcontentloaded' });
 
     await setRealTimeMode(page, true);
-    //Temporary to close the dialog
-    await page.getByLabel('Submit time offsets').click();
 
     await expect(page.getByLabel('Image Wrapper')).toBeVisible();
 

src/plugins/telemetryTable/TelemetryTable.js

@@ -114,7 +114,11 @@ export default class TelemetryTable extends EventEmitter {
     this.clearAndResubscribe();
   }
 
-  updateRowLimit() {
+  updateRowLimit(rowLimit) {
+    if (rowLimit) {
+      this.rowLimit = rowLimit;
+    }
+
     if (this.telemetryMode === 'performance') {
       this.tableRows.setLimit(this.rowLimit);
     } else {

src/plugins/telemetryTable/TelemetryTableType.js

@@ -21,7 +21,7 @@
  *****************************************************************************/
 
 export default function getTelemetryTableType(options = {}) {
-  const { telemetryMode = 'performance', persistModeChanges = true, rowLimit = 50 } = options;
+  const { telemetryMode = 'performance', persistModeChange = true, rowLimit = 50 } = options;
 
   return {
     name: 'Telemetry Table',
@@ -32,12 +32,12 @@ export default function getTelemetryTableType(options = {}) {
     form: [
       {
         key: 'telemetryMode',
-        name: 'Telemetry Mode',
+        name: 'Data Mode',
         control: 'select',
         options: [
           {
             value: 'performance',
-            name: 'Performance Mode'
+            name: 'Limited (Performance) Mode'
           },
           {
             value: 'unlimited',
@@ -48,15 +48,15 @@ export default function getTelemetryTableType(options = {}) {
         property: ['configuration', 'telemetryMode']
       },
       {
-        name: 'Persist Telemetry Mode Changes',
+        name: 'Persist Data Mode Changes',
         control: 'toggleSwitch',
         cssClass: 'l-input',
-        key: 'persistModeChanges',
+        key: 'persistModeChange',
-        property: ['configuration', 'persistModeChanges']
+        property: ['configuration', 'persistModeChange']
       },
       {
-        name: 'Performance Mode Row Limit',
+        name: 'Limited Data Mode Row Limit',
-        control: 'toggleSwitch',
+        control: 'numberfield',
         cssClass: 'l-input',
         key: 'rowLimit',
         property: ['configuration', 'rowLimit']
@@ -68,7 +68,7 @@ export default function getTelemetryTableType(options = {}) {
         columnWidths: {},
         hiddenColumns: {},
         telemetryMode,
-        persistModeChanges,
+        persistModeChange,
         rowLimit
       };
     }

src/plugins/telemetryTable/components/TableComponent.vue

@@ -398,7 +398,8 @@ export default {
       totalNumberOfRows: 0,
       rowContext: {},
       telemetryMode: configuration.telemetryMode,
-      persistModeChanges: configuration.persistModeChanges
+      persistModeChange: configuration.persistModeChange,
+      afterLoadActions: []
     };
   },
   computed: {
@@ -458,10 +459,8 @@ export default {
     },
     loading: {
       handler(isLoading) {
-        if (isLoading) {
+        if (!isLoading) {
-          this.setLoadingPromise();
+          this.runAfterLoadActions();
-        } else {
-          this.loadFinishResolve();
         }
 
         if (this.viewActionsCollection) {
@@ -538,6 +537,8 @@ export default {
     this.table.on('outstanding-requests', this.outstandingRequests);
     this.table.on('telemetry-staleness', this.handleStaleness);
 
+    this.table.configuration.on('change', this.handleConfigurationChanges);
+
     this.table.tableRows.on('add', this.rowsAdded);
     this.table.tableRows.on('remove', this.rowsRemoved);
     this.table.tableRows.on('sort', this.throttledUpdateVisibleRows);
@@ -567,6 +568,8 @@ export default {
     this.table.off('outstanding-requests', this.outstandingRequests);
     this.table.off('telemetry-staleness', this.handleStaleness);
 
+    this.table.configuration.off('change', this.handleConfigurationChanges);
+
     this.table.tableRows.off('add', this.rowsAdded);
     this.table.tableRows.off('remove', this.rowsRemoved);
     this.table.tableRows.off('sort', this.throttledUpdateVisibleRows);
@@ -581,11 +584,34 @@ export default {
     this.table.destroy();
   },
   methods: {
-    setLoadingPromise() {
+    addToAfterLoadActions(func) {
-      this.loadFinishResolve = null;
+      this.afterLoadActions.push(func);
-      this.isFinishedLoading = new Promise((resolve, reject) => {
+    },
-        this.loadFinishResolve = resolve;
+    runAfterLoadActions() {
-      });
+      if (this.afterLoadActions.length > 0) {
+        this.afterLoadActions.forEach((action) => action());
+        this.afterLoadActions = [];
+      }
+    },
+    handleConfigurationChanges(changes) {
+      const { rowLimit, telemetryMode, persistModeChange } = changes;
+
+      this.persistModeChange = persistModeChange;
+
+      if (this.rowLimit !== rowLimit) {
+        this.rowLimit = rowLimit;
+        this.table.updateRowLimit(rowLimit);
+
+        if (this.telemetryMode !== telemetryMode) {
+          // need to clear and resubscribe, if different, handled below
+          this.table.clearAndResubscribe();
+        }
+      }
+
+      if (this.telemetryMode !== telemetryMode) {
+        this.telemetryMode = telemetryMode;
+        this.table.updateTelemetryMode(telemetryMode);
+      }
     },
     updateVisibleRows() {
       if (!this.updatingView) {
@@ -1042,7 +1068,7 @@ export default {
           let row = allRows[i];
           row.marked = true;
 
-          if (row !== baseRow) {
+          if (row !== baseRow && this.markedRows.indexOf(row) === -1) {
             this.markedRows.push(row);
           }
         }
@@ -1166,11 +1192,9 @@ export default {
           {
             label,
             emphasis: true,
-            callback: async () => {
+            callback: () => {
+              this.addToAfterLoadActions(callback);
               this.updateTelemetryMode();
-              await this.isFinishedLoading;
-
-              callback();
 
               dialog.dismiss();
             }
@@ -1187,7 +1211,7 @@ export default {
     updateTelemetryMode() {
       this.telemetryMode = this.telemetryMode === 'unlimited' ? 'performance' : 'unlimited';
 
-      if (this.persistModeChanges) {
+      if (this.persistModeChange) {
         this.table.configuration.setTelemetryMode(this.telemetryMode);
       }
 

src/plugins/telemetryTable/components/TableFooterIndicator.vue

@@ -40,7 +40,7 @@
         :title="rowCountTitle"
         class="c-table-indicator__elem c-table-indicator__row-count"
       >
-        {{ rowCount }} Rows
+        {{ rowCount }}
       </span>
 
       <span
@@ -113,7 +113,7 @@ export default {
       }
     },
     rowCount() {
-      return this.isUnlimitedMode ? this.totalRows : 'LATEST 50';
+      return this.isUnlimitedMode ? `${this.totalRows} ROWS` : `LATEST ${this.totalRows} ROWS`;
     },
     rowCountTitle() {
       return this.isUnlimitedMode
@@ -121,12 +121,12 @@ export default {
         : 'performance mode limited to 50 rows';
     },
     telemetryModeButtonLabel() {
-      return this.isUnlimitedMode ? 'SHOW LATEST 50' : 'SHOW ALL';
+      return this.isUnlimitedMode ? 'SHOW LIMITED' : 'SHOW UNLIMITED';
     },
     telemetryModeButtonTitle() {
       return this.isUnlimitedMode
-        ? 'Change to Performance mode (latest 50 values)'
+        ? 'Change to Limited (Performance) Mode'
-        : 'Change to show all values';
+        : 'Change to Unlimited Mode';
     },
     title() {
       if (this.hasMixedFilters) {

src/plugins/telemetryTable/components/TableRow.vue

@@ -24,6 +24,7 @@
     :style="{ top: rowTop }"
     class="noselect"
     :class="[rowClass, { 'is-selected': marked }]"
+    :aria-label="ariaLabel"
     v-on="listeners"
   >
     <component
@@ -99,6 +100,9 @@ export default {
     };
   },
   computed: {
+    ariaLabel() {
+      return this.marked ? 'Selected Table Row' : 'Table Row';
+    },
     listeners() {
       let listenersObject = {
         click: this.markRow

src/styles/_controls.scss

@@ -499,7 +499,9 @@ select {
   color: $colorSelectFg;
   box-shadow: $shdwSelect;
   background-repeat: no-repeat, no-repeat;
-  background-position: right 0.4em top 80%, 0 0;
+  background-position:
+    right 0.4em top 80%,
+    0 0;
   border: none;
   border-radius: $controlCr;
   padding: 2px 20px 2px $interiorMargin;
@@ -718,15 +720,15 @@ select {
   .c-super-menu__item-description {
     flex: 1 1 70%;
 
-    [class*="__icon"] {
+    [class*='__icon'] {
       display: none !important;
     }
 
-    [class*="__name"] {
+    [class*='__name'] {
       margin-top: 0 !important;
     }
 
-    [class*="__item-description"] {
+    [class*='__item-description'] {
       min-width: 200px;
     }
   }
@@ -1133,7 +1135,7 @@ input[type='range'] {
     // Hidden by default; requires a hover 1 - 3 levels above to display
     @include transition(opacity, $transOutTime);
     opacity: 0;
-    pointer-events: none;
+    pointer-events: auto;
   }
 }