Fixed scrolling

platform/features/table/bundle.js

@@ -23,6 +23,7 @@
 
 define([
     "./src/directives/MCTTable",
+    "./src/controllers/RTTableController",
     "./src/controllers/TelemetryTableController",
     "./src/controllers/TableOptionsController",
     '../../commonUI/regions/src/Region',
@@ -31,6 +32,7 @@ define([
 ], function (
     MCTTable,
     TelemetryTableController,
+    RTTableController,
     TableOptionsController,
     Region,
     InspectorRegion,
@@ -86,6 +88,11 @@ define([
                     "implementation": TelemetryTableController,
                     "depends": ["$scope", "telemetryHandler", "telemetryFormatter"]
                 },
+                {
+                    "key": "RTTableController",
+                    "implementation": RTTableController,
+                    "depends": ["$scope", "telemetryHandler", "telemetryFormatter"]
+                },
                 {
                     "key": "TableOptionsController",
                     "implementation": TableOptionsController,
@@ -104,6 +111,17 @@ define([
                     ],
                     "delegation": true,
                     "editable": true
+                },
+                {
+                    "name": "Scrolling",
+                    "key": "realtime",
+                    "glyph": "\ue605",
+                    "templateUrl": "templates/rt-table.html",
+                    "needs": [
+                        "telemetry"
+                    ],
+                    "delegation": true,
+                    "editable": true
                 }
             ],
             "directives": [

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

@@ -0,0 +1,8 @@
+<div ng-controller="RTTableController">
+    <mct-table
+        headers="headers"
+        rows="rows"
+        enableFilter="true"
+        enableSort="true">
+    </mct-table>
+</div>

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

@@ -12,6 +12,8 @@ define(
             this.element = element;
             this.$timeout = $timeout;
             this.maxDisplayRows = 50;
+            element.find('div').on('scroll', this.onScroll.bind(this));
+            this.scrollable = element.find('div')[0];
 
                 $scope.visibleRows = [];
             $scope.overrideRowPositioning = false;
@@ -33,8 +35,6 @@ define(
 
             setDefaults($scope);
 
-            element.find('div').on('scroll', this.onScroll.bind(this));
-
             $scope.toggleSort = function (key) {
                 if (!$scope.enableSort) {
                     return;
@@ -52,10 +52,17 @@ define(
             };
 
             $scope.$watchCollection('filters', function () {
-                self.updateRows(self.$scope.rows);
+                self.updateRows(self.$scope.displayRows);
             });
             $scope.$watchCollection('headers', this.updateHeaders.bind(this));
-            $scope.$watchCollection('rows', this.updateRows.bind(this));
+            $scope.$watch('rows', this.updateRows.bind(this));
+            $scope.$on('newRow', this.newRow.bind(this));
+        }
+
+        MCTTableController.prototype.newRow = function (event, newRow) {
+            this.$scope.displayRows.push(newRow);
+            this.filterAndSort(this.$scope.displayRows);
+            this.$timeout(this.setElementSizes(), 0);
         }
 
         /**
@@ -65,8 +72,9 @@ define(
          */
         MCTTableController.prototype.onScroll = function (event) {
             var self = this,
-                topScroll = event.target.scrollTop,
+                target = this.scrollable,
-                bottomScroll = topScroll + event.target.offsetHeight,
+                topScroll = target.scrollTop,
+                bottomScroll = topScroll + target.offsetHeight,
                 firstVisible,
                 lastVisible,
                 totalVisible,
@@ -177,6 +185,7 @@ define(
                 };
             });
 
+            this.onScroll();
             this.$scope.overrideRowPositioning = true;
         };
 
@@ -290,19 +299,8 @@ define(
             this.$timeout(this.setElementSizes.bind(this));
         };
 
-        /**
+        MCTTableController.prototype.filterAndSort = function(rows) {
-         * Update rows with new data.  If filtering is enabled, rows
+            var displayRows = rows;
-         * will be sorted before display.
-         */
-        MCTTableController.prototype.updateRows = function (newRows) {
-            var displayRows = newRows;
-            this.$scope.visibleRows = [];
-            this.$scope.overrideRowPositioning = false;
-
-            if (!this.$scope.displayHeaders) {
-                return;
-            }
-
             if (this.$scope.enableFilter) {
                 displayRows = this.filterRows(displayRows);
             }
@@ -311,6 +309,21 @@ define(
                 displayRows = this.sortRows(displayRows);
             }
             this.$scope.displayRows = displayRows;
+        };
+
+        /**
+         * Update rows with new data.  If filtering is enabled, rows
+         * will be sorted before display.
+         */
+        MCTTableController.prototype.updateRows = function (newRows) {
+            console.log('updateRows');
+            this.$scope.visibleRows = [];
+            this.$scope.overrideRowPositioning = false;
+
+            if (!this.$scope.displayHeaders) {
+                return;
+            }
+            this.filterAndSort(newRows || []);
             this.resize();
         };
 

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

@@ -0,0 +1,99 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web 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 Web 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.
+ *****************************************************************************/
+/*global define*/
+
+/**
+ * This bundle adds a table view for displaying telemetry data.
+ * @namespace platform/features/table
+ */
+define(
+    [
+        './TableController',
+        '../Table',
+        '../NameColumn'
+    ],
+    function (TableController, Table, NameColumn) {
+        "use strict";
+
+        /**
+         * The TableController is responsible for getting data onto the page
+         * in the table widget. This includes handling composition,
+         * configuration, and telemetry subscriptions.
+         * @memberof platform/features/table
+         * @param $scope
+         * @param telemetryHandler
+         * @param telemetryFormatter
+         * @constructor
+         */
+        function RTTableController($scope, telemetryHandler, telemetryFormatter) {
+            TableController.call(this, $scope, telemetryHandler, telemetryFormatter);
+        }
+
+        RTTableController.prototype = Object.create(TableController.prototype);
+
+        /**
+         Create a new subscription. This is called when
+         */
+        RTTableController.prototype.subscribe = function() {
+            var self = this;
+
+            if (this.handle) {
+                this.handle.unsubscribe();
+            }
+
+            function updateData(){
+                var datum;
+                self.handle.getTelemetryObjects().forEach(function(telemetryObject){
+                    datum = self.handle.getDatum(telemetryObject);
+                    if (datum) {
+                        if (!self.$scope.rows) {
+                            self.$scope.rows = [self.table.getRowValues(telemetryObject, datum)];
+                        } else {
+                            self.updateRows(telemetryObject, datum);
+                        }
+                    }
+                });
+
+            }
+
+            this.handle = this.$scope.domainObject && this.telemetryHandler.handle(
+                    this.$scope.domainObject,
+                    updateData,
+                    true // Lossless
+                );
+
+            this.setup();
+        };
+
+        /**
+         * Add data to rows
+         * @param object The object for which data is available (table may
+         * be composed of multiple objects)
+         * @param datum The data received from the telemetry source
+         */
+        RTTableController.prototype.updateRows = function (object, datum) {
+            this.$scope.$broadcast('newRow', this.table.getRowValues(object, datum));
+        };
+
+        return RTTableController;
+    }
+);

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

@@ -57,7 +57,7 @@ define(
             this.table = new TableConfiguration($scope.domainObject, telemetryFormatter);
             this.changeListeners = [];
 
-            $scope.rows = [];
+            $scope.rows = undefined;
 
             // Subscribe to telemetry when a domain object becomes available
             this.$scope.$watch('domainObject', function(domainObject){