Table performance paging

example/generator/GeneratorProvider.js

@@ -92,6 +92,7 @@ GeneratorProvider.prototype.request = function (domainObject, request) {
   var workerRequest = this.makeWorkerRequest(domainObject, request);
   workerRequest.start = request.start;
   workerRequest.end = request.end;
+  workerRequest.size = request.size;
 
   return this.workerInterface.request(workerRequest);
 };

example/generator/generatorWorker.js

@@ -127,6 +127,10 @@
       request.start = request.end - FIFTEEN_MINUTES;
     }
 
+    if (request.size === undefined) {
+      request.size = 5000;
+    }
+
     var now = Date.now();
     var start = request.start;
     var end = request.end > now ? now : request.end;
@@ -139,13 +143,14 @@
     var loadDelay = Math.max(request.loadDelay, 0);
     var infinityValues = request.infinityValues;
     var exceedFloat32 = request.exceedFloat32;
+    var size = request.size;
 
     var step = 1000 / dataRateInHz;
     var nextStep = start - (start % step) + step;
 
     var data = [];
 
-    for (; nextStep < end && data.length < 5000; nextStep += step) {
+    for (; nextStep < end && data.length < size; nextStep += step) {
       data.push({
         utc: nextStep,
         yesterday: nextStep - 60 * 60 * 24 * 1000,

src/plugins/telemetryTable/TelemetryTable.js

@@ -37,10 +37,11 @@ export default class TelemetryTable extends EventEmitter {
 
     this.domainObject = domainObject;
     this.openmct = openmct;
-    this.rowCount = 100;
     this.tableComposition = undefined;
     this.datumCache = [];
     this.configuration = new TelemetryTableConfiguration(domainObject, openmct);
+    this.telemetryMode = this.configuration.getTelemetryMode();
+    this.rowLimit = this.configuration.getRowLimit();
     this.paused = false;
     this.keyString = this.openmct.objects.makeKeyString(this.domainObject.identifier);
 
@@ -100,18 +101,40 @@ export default class TelemetryTable extends EventEmitter {
       this.addTelemetryObject(this.domainObject);
     }
   }
+
+  updateTelemetryMode(mode) {
+    if (this.telemetryMode === mode) {
+      return;
+    }
+
+    this.telemetryMode = mode;
+
+    this.updateRowLimit();
+
+    this.clearAndResubscribe();
+  }
+
+  updateRowLimit() {
+    if (this.telemetryMode === 'performance') {
+      this.tableRows.setLimit(this.rowLimit);
+    } else {
+      this.tableRows.removeLimit();
+    }
+  }
 
   createTableRowCollections() {
     this.tableRows = new TableRowCollection();
 
     //Fetch any persisted default sort
     let sortOptions = this.configuration.getConfiguration().sortOptions;
 
-    //If no persisted sort order, default to sorting by time system, ascending.
+    //If no persisted sort order, default to sorting by time system, descending.
     sortOptions = sortOptions || {
       key: this.openmct.time.timeSystem().key,
-      direction: 'asc'
+      direction: 'desc'
     };
+
+    this.updateRowLimit();
 
     this.tableRows.sortBy(sortOptions);
     this.tableRows.on('resetRowsFromAllData', this.resetRowsFromAllData);
@@ -143,6 +166,10 @@ export default class TelemetryTable extends EventEmitter {
     const telemetryRemover = this.getTelemetryRemover();
 
     this.removeTelemetryCollection(keyString);
+
+    if (this.telemetryMode === 'performance') {
+      requestOptions.size = this.rowLimit;
+    }
 
     this.telemetryCollections[keyString] = this.openmct.telemetry.requestCollection(
       telemetryObject,

src/plugins/telemetryTable/TelemetryTableConfiguration.js

@@ -48,6 +48,10 @@ export default class TelemetryTableConfiguration extends EventEmitter {
     configuration.columnOrder = configuration.columnOrder || [];
     configuration.cellFormat = configuration.cellFormat || {};
     configuration.autosize = configuration.autosize === undefined ? true : configuration.autosize;
+    // anything that doesn't have a telemetryMode existed before the change and should stay as it was for consistency
+    configuration.telemetryMode = configuration.telemetryMode ?? 'unlimited';
+    configuration.persistModeChange = configuration.persistModeChange ?? true;
+    configuration.rowLimit = configuration.rowLimit ?? 50;
 
     return configuration;
   }
@@ -136,6 +140,42 @@ export default class TelemetryTableConfiguration extends EventEmitter {
         return headers;
       }, {});
   }
+
+   getTelemetryMode() {
+    let configuration = this.getConfiguration();
+
+    return configuration.telemetryMode;
+  }
+
+  setTelemetryMode(mode) {
+    let configuration = this.getConfiguration();
+    configuration.telemetryMode = mode;
+    this.updateConfiguration(configuration);
+  }
+
+  getRowLimit() {
+    let configuration = this.getConfiguration();
+
+    return configuration.rowLimit;
+  }
+
+  setRowLimit(limit) {
+    let configuration = this.getConfiguration();
+    configuration.rowLimit = limit;
+    this.updateConfiguration(configuration);
+  }
+
+  getPersistModeChange() {
+    let configuration = this.getConfiguration();
+
+    return configuration.persistModeChange;
+  }
+
+  setPersistModeChange(value) {
+    let configuration = this.getConfiguration();
+    configuration.persistModeChange = value;
+    this.updateConfiguration(configuration);
+  }
 
   getColumnWidths() {
     let configuration = this.getConfiguration();

src/plugins/telemetryTable/TelemetryTableType.js

@@ -20,17 +20,57 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-export default {
-  name: 'Telemetry Table',
-  description:
-    'Display values for one or more telemetry end points in a scrolling table. Each row is a time-stamped value.',
-  creatable: true,
-  cssClass: 'icon-tabular-scrolling',
-  initialize(domainObject) {
-    domainObject.composition = [];
-    domainObject.configuration = {
-      columnWidths: {},
-      hiddenColumns: {}
-    };
-  }
-};
+export default function getTelemetryTableType(options = {}) {
+  const { telemetryMode = 'performance', persistModeChanges = true, rowLimit = 50 } = options;
+
+  return {
+    name: 'Telemetry Table',
+    description:
+      'Display values for one or more telemetry end points in a scrolling table. Each row is a time-stamped value.',
+    creatable: true,
+    cssClass: 'icon-tabular-scrolling',
+    form: [
+      {
+        key: 'telemetryMode',
+        name: 'Telemetry Mode',
+        control: 'select',
+        options: [
+          {
+            value: 'performance',
+            name: 'Performance Mode'
+          },
+          {
+            value: 'unlimited',
+            name: 'Unlimited Mode'
+          }
+        ],
+        cssClass: 'l-inline',
+        property: ['configuration', 'telemetryMode']
+      },
+      {
+        name: 'Persist Telemetry Mode Changes',
+        control: 'toggleSwitch',
+        cssClass: 'l-input',
+        key: 'persistModeChanges',
+        property: ['configuration', 'persistModeChanges']
+      },
+      {
+        name: 'Performance Mode Row Limit',
+        control: 'toggleSwitch',
+        cssClass: 'l-input',
+        key: 'rowLimit',
+        property: ['configuration', 'rowLimit']
+      }
+    ],
+    initialize(domainObject) {
+      domainObject.composition = [];
+      domainObject.configuration = {
+        columnWidths: {},
+        hiddenColumns: {},
+        telemetryMode,
+        persistModeChanges,
+        rowLimit
+      };
+    }
+  };
+}

src/plugins/telemetryTable/TelemetryTableView.js

@@ -25,7 +25,7 @@ import TableComponent from './components/TableComponent.vue';
 import TelemetryTable from './TelemetryTable.js';
 
 export default class TelemetryTableView {
-  constructor(openmct, domainObject, objectPath) {
+  constructor(openmct, domainObject, objectPath, options) {
     this.openmct = openmct;
     this.domainObject = domainObject;
     this.objectPath = objectPath;

src/plugins/telemetryTable/TelemetryTableViewProvider.js

@@ -22,7 +22,7 @@
 
 import TelemetryTableView from './TelemetryTableView.js';
 
-export default function TelemetryTableViewProvider(openmct) {
+export default function TelemetryTableViewProvider(openmct, options) {
   function hasTelemetry(domainObject) {
     if (!Object.prototype.hasOwnProperty.call(domainObject, 'telemetry')) {
       return false;
@@ -44,7 +44,7 @@ export default function TelemetryTableViewProvider(openmct) {
       return domainObject.type === 'table';
     },
     view(domainObject, objectPath) {
-      return new TelemetryTableView(openmct, domainObject, objectPath);
+      return new TelemetryTableView(openmct, domainObject, objectPath, options);
     },
     priority() {
       return 1;

src/plugins/telemetryTable/collections/TableRowCollection.js

@@ -30,6 +30,7 @@ export default class TableRowCollection extends EventEmitter {
     super();
 
     this.rows = [];
+    this.overflowRows = {};
     this.columnFilters = {};
     this.addRows = this.addRows.bind(this);
     this.removeRowsByObject = this.removeRowsByObject.bind(this);
@@ -50,6 +51,13 @@ export default class TableRowCollection extends EventEmitter {
         return true;
       }
     });
+
+    if (this.rowLimit && this.overflowRows[keyString]) {
+      this.overflowRows[keyString] = null;
+      delete this.overflowRows[keyString];
+
+      this.rowAccuracyCheck();
+    }
 
     this.emit('remove', removed);
   }
@@ -59,10 +67,46 @@ export default class TableRowCollection extends EventEmitter {
 
     this.sortAndMergeRows(rowsToAdd);
 
-    // we emit filter no matter what to trigger
-    // an update of visible rows
-    if (rowsToAdd.length > 0) {
-      this.emit('add', rowsToAdd);
+    this.emit('add', rowsToAdd);
+  }
+
+  rowAccuracyCheck() {
+    const keyStrings = Object.keys(this.overflowRows);
+    let rowsToCheck = [];
+
+    keyStrings.forEach((keyString) => {
+      rowsToCheck = [...rowsToCheck, ...this.overflowRows[keyString]];
+      this.overflowRows[keyString] = [];
+    });
+
+    this.addRows(rowsToCheck);
+  }
+
+  maintainLimit() {
+    if (!this.rowLimit) {
+      return;
+    }
+
+    let removed;
+    const existingRowCount = this.rows.length;
+
+    // Removal check
+    if (existingRowCount > this.rowLimit) {
+      const rowRemovalCount = existingRowCount - this.rowLimit;
+
+      if (this.sortOptions.direction === 'asc') {
+        removed = this.rows.slice(0, rowRemovalCount);
+        this.rows = this.rows.slice(rowRemovalCount);
+      } else {
+        removed = this.rows.slice(-rowRemovalCount);
+        this.rows = this.rows.slice(0, existingRowCount - rowRemovalCount);
+      }
+
+      removed.forEach((row) => {
+        this.handleOverflowRow(row);
+      });
+
+      this.emit('remove', removed);
     }
   }
 
@@ -128,6 +172,15 @@ export default class TableRowCollection extends EventEmitter {
     foundRow.updateWithDatum(row.datum);
     this.rows[index] = foundRow;
   }
+
+  setLimit(rowLimit) {
+    this.rowLimit = rowLimit;
+  }
+
+  removeLimit() {
+    this.rowLimit = null;
+    delete this.rowLimit;
+  }
 
   sortCollection(rows) {
     const sortedRows = _.orderBy(
@@ -147,12 +200,40 @@ export default class TableRowCollection extends EventEmitter {
       } else {
         if (addToBeginning) {
           this.rows.unshift(row);
+
+          if (this.overRowLimit()) {
+            this.handleOverflowRow(this.rows.pop());
+          }
         } else {
           this.rows.push(row);
+
+          if (this.overRowLimit()) {
+            this.handleOverflowRow(this.rows.shift());
+          }
         }
       }
     });
   }
+
+  handleOverflowRow(row) {
+    const keyString = row.objectKeyString;
+
+    if (!this.overflowRows[keyString]) {
+      this.overflowRows[keyString] = [];
+    }
+
+    this.overflowRows[keyString].push(row);
+
+    // keep the newest rowLimit amount on hand to repopulate if an item is removed
+    // technically at most in memory would be rowLimit * 2
+    if (this.overflowRows[keyString].length > this.rowLimit) {
+      this.overflowRows[keyString].shift();
+    }
+  }
+
+  overRowLimit() {
+    return this.rowLimit && this.rows.length > this.rowLimit;
+  }
 
   mergeSortedRows(incomingRows) {
     const mergedRows = [];
@@ -193,6 +274,7 @@ export default class TableRowCollection extends EventEmitter {
     }
 
     this.rows = mergedRows;
+    this.maintainLimit();
   }
 
   firstRowInSortOrder(row1, row2) {