[Tables] limit digests to increase performance

platform/features/table/res/templates/mct-table.html

@@ -5,7 +5,7 @@
         Export
     </a>
 </div>
-<div class="l-view-section scrolling" style="overflow: auto;">
+<div class="l-view-section scrolling" style="overflow: auto;" mct-resize="resize()">
     <table class="sizing-table">
         <tbody>
             <tr>
@@ -32,7 +32,8 @@
                         enableSort ? 'sortable' : '',
                         sortColumn === header ? 'sort' : '',
                         sortDirection || ''
-                    ].join(' ')">
+                    ].join(' ')"
+                    ng-click="toggleSort(header)">
                     {{ header }}
                 </th>
             </tr>
@@ -58,7 +59,8 @@
                 </td>
             </tr>
             <tr ng-repeat-end
-                ng-style="{ top: visibleRow.offsetY + 'px' }">
+                ng-style="{ top: visibleRow.offsetY + 'px' }"
+                ng-click="table.onRowClick($event, visibleRow.rowIndex) ">
                 <td ng-repeat="header in displayHeaders"
                     ng-style=" {
                         width: columnWidths[$index] + 'px',

platform/features/table/res/templates/telemetry-table.html

@@ -1,11 +1,14 @@
 <div ng-controller="TelemetryTableController as tableController"
      ng-class="{'loading': loading}">
+    Request time: {{tableController.lastRequestTime | date : 'HH:mm:ss:sss'}}
     <mct-table
         headers="headers"
-        time-columns="tableController.timeColumns"
         rows="rows"
+        time-columns="tableController.timeColumns"
+        on-show-cell=""
         enableFilter="true"
         enableSort="true"
+        auto-scroll="autoScroll"
         default-sort="defaultSort"
         class="tabular-holder has-control-bar">
     </mct-table>

platform/features/table/src/controllers/MCTTableController.js

@@ -163,8 +163,6 @@ define(
                 }
             }.bind(this));
 
-            console.log('constructed');
-
             $scope.$on('$destroy', function() {
                 this.scrollable.off('scroll', this.onScroll);
                 this.destroyConductorListeners();
@@ -193,15 +191,7 @@ define(
          * @private
          */
         MCTTableController.prototype.scrollToBottom = function () {
-            var self = this;
+            this.scrollable[0].scrollTop = this.scrollable[0].scrollHeight;
-
-            //Use timeout to defer execution until next digest when any
-            // pending UI changes have completed, eg. a new row in the table.
-            if (this.$scope.autoScroll) {
-                this.digest(function () {
-                    self.scrollable[0].scrollTop = self.scrollable[0].scrollHeight;
-                });
-            }
         };
 
         /**
@@ -219,8 +209,12 @@ define(
 
                 //Resize the columns , then update the rows visible in the table
                 this.resize([this.$scope.sizingRow, row])
-                    .then(this.setVisibleRows.bind(this))
+                    .then(this.setVisibleRows)
-                    .then(this.scrollToBottom.bind(this));
+                    .then(function () {
+                        if (this.$scope.autoScroll) {
+                            this.scrollToBottom();
+                        }
+                    }.bind(this));
 
                 var toi = this.conductor.timeOfInterest();
                 if (toi !== -1) {
@@ -250,16 +244,24 @@ define(
          * @private
          */
         MCTTableController.prototype.onScroll = function (event) {
+                if (!this.scrolling) {
+                    this.scrolling = true;
+
+                    requestAnimationFrame(function () {
+                        this.setVisibleRows();
+                        this.digest();
+
                         // If user scrolls away from bottom, disable auto-scroll.
                         // Auto-scroll will be re-enabled if user scrolls to bottom again.
                         if (this.scrollable[0].scrollTop <
-                (this.scrollable[0].scrollHeight - this.scrollable[0].offsetHeight)) {
+                            (this.scrollable[0].scrollHeight - this.scrollable[0].offsetHeight) - 20) {
                             this.$scope.autoScroll = false;
                         } else {
                             this.$scope.autoScroll = true;
                         }
-            this.setVisibleRows();
+                        this.scrolling = false;
-            this.$scope.$digest();
+                    }.bind(this));
+                }
         };
 
         /**
@@ -338,7 +340,7 @@ define(
                     this.$scope.visibleRows[this.$scope.visibleRows.length - 1]
                         .rowIndex === end) {
 
-                    return; // don't update if no changes are required.
+                    return Promise.resolve(); // don't update if no changes are required.
                 }
             }
             //Set visible rows from display rows, based on calculated offset.
@@ -351,6 +353,7 @@ define(
                         contents: row
                     };
                 });
+            return this.digest();
         };
 
         /**
@@ -566,25 +569,25 @@ define(
             return largestRow;
         };
 
-        MCTTableController.prototype.digest = function (callback) {
+        // Will effectively cap digests at 60Hz
+        // Also turns digest into a promise allowing code to force digest, then
+        // schedule something to happen afterwards
+        MCTTableController.prototype.digest = function () {
             var scope = this.$scope;
-            var callbacks = this.callbacks;
+            var self = this;
             var requestAnimationFrame = this.$window.requestAnimationFrame;
 
-            var promise = callbacks[callback];
+            if (!this.digestPromise) {
-
+                this.digestPromise = new Promise(function (resolve) {
-            if (!promise){
-                promise = new Promise(function (resolve) {
                     requestAnimationFrame(function() {
                         scope.$digest();
-                        delete callbacks[callback];
+                        delete self.digestPromise;
-                        resolve(callback && callback());
+                        resolve();
                     });
                 });
-                callbacks[callback] = promise;
             }
 
-            return promise;
+            return this.digestPromise;
         };
 
         /**
@@ -598,7 +601,7 @@ define(
          */
         MCTTableController.prototype.resize = function (rows) {
             this.$scope.sizingRow = this.buildLargestRow(rows);
-            return this.digest(this.setElementSizes);
+            return this.digest().then(this.setElementSizes);
         };
 
         /**
@@ -631,7 +634,6 @@ define(
                 .then(this.setVisibleRows)
                 //Timeout following setVisibleRows to allow digest to
                 // perform DOM changes, otherwise scrollTo won't work.
-                .then(this.digest)
                 .then(function () {
                     //If TOI specified, scroll to it
                     var timeOfInterest = this.conductor.timeOfInterest();
@@ -732,7 +734,9 @@ define(
          */
         MCTTableController.prototype.changeBounds = function (bounds) {
             this.setTimeOfInterestRow(this.conductor.timeOfInterest());
+            if (this.$scope.toiRowIndex !== -1) {
                 this.scrollToRow(this.$scope.toiRowIndex);
+            }
         };
 
         /**

platform/features/table/src/controllers/TelemetryTableController.js

@@ -76,15 +76,23 @@ define(
                 'loadColumns',
                 'getHistoricalData',
                 'subscribeToNewData',
-                'changeBounds'
+                'changeBounds',
+                'setScroll'
             ]);
 
             this.getData();
             this.registerChangeListeners();
 
+            this.openmct.conductor.on('follow', this.setScroll);
+            this.setScroll(this.openmct.conductor.follow());
+
             this.$scope.$on("$destroy", this.destroy);
         }
 
+        TelemetryTableController.prototype.setScroll = function (scroll){
+            this.$scope.autoScroll = scroll;
+        };
+
         /**
          * Based on the selected time system, find a matching domain column
          * to sort by. By default will just match on key.
@@ -171,6 +179,7 @@ define(
 
             this.openmct.conductor.off('timeSystem', this.sortByTimeSystem);
             this.openmct.conductor.off('bounds', this.changeBounds);
+            this.openmct.conductor.off('follow', this.setScroll);
 
             this.subscriptions.forEach(function (subscription) {
                 subscription();
@@ -229,20 +238,18 @@ define(
             var openmct = this.openmct;
             var bounds = openmct.conductor.bounds();
             var scope = this.$scope;
+            var rowData = [];
             var processedObjects = 0;
             var requestTime = this.lastRequestTime = Date.now();
 
             return new Promise(function (resolve, reject){
-                console.log('Created promise');
                 function finishProcessing(tableRows){
-                    scope.rows = tableRows;
+                    scope.rows = tableRows.concat(scope.rows);
                     scope.loading = false;
-                    console.log('Resolved promise');
                     resolve(tableRows);
                 }
 
-                function processData(historicalData, index, rowData, limitEvaluator){
+                function processData(historicalData, index, limitEvaluator){
-                    console.log("Processing batch");
                     if (index >= historicalData.length) {
                         processedObjects++;
 
@@ -250,13 +257,14 @@ define(
                             finishProcessing(rowData);
                         }
                     } else {
-                        rowData = rowData.concat(historicalData.slice(index, index + this.batchSize)
+                        rowData = rowData.concat(
-                            .map(this.table.getRowValues.bind(this.table, limitEvaluator)));
+                            historicalData.slice(index, index + this.batchSize).map(
+                                this.table.getRowValues.bind(this.table, limitEvaluator))
+                        );
                         this.timeoutHandle = this.$timeout(processData.bind(
                             this,
                             historicalData,
                             index + this.batchSize,
-                            rowData,
                             limitEvaluator
                         ));
                     }
@@ -265,12 +273,10 @@ define(
                 function makeTableRows(object, historicalData) {
                     // Only process one request at a time
                     if (requestTime === this.lastRequestTime) {
-                        console.log('Processing request');
                         var limitEvaluator = openmct.telemetry.limitEvaluator(object);
-                        processData.call(this, historicalData, 0, [], limitEvaluator);
+                        processData.call(this, historicalData, 0, limitEvaluator);
                     } else {
-                        console.log('Ignoring returned data because of staleness');
+                        resolve(rowData);
-                        resolve([]);
                     }
                 }
 
@@ -287,7 +293,6 @@ define(
                     objects.forEach(requestData.bind(this));
                 } else {
                     scope.loading = false;
-                    console.log('Resolved promise');
                     resolve([]);
                 }
             }.bind(this));
@@ -317,16 +322,15 @@ define(
                     this.$scope.$broadcast('remove:row', 0);
                     this.$scope.rows.shift();
                 }
-
+                if (!this.$scope.loading) {
                     this.$scope.$broadcast('add:row',
                         this.$scope.rows.length - 1);
-
+                }
             }
 
             objects.forEach(function (object){
                 this.subscriptions.push(
                     telemetryApi.subscribe(object, newData.bind(this, object), {}));
-                console.log('subscribed');
             }.bind(this));
 
             return objects;
@@ -374,7 +378,7 @@ define(
             getDomainObjects()
                 .then(filterForTelemetry)
                 .then(this.loadColumns)
-                //.then(this.subscribeToNewData)
+                .then(this.subscribeToNewData)
                 .then(this.getHistoricalData)
                 .catch(error)
         };