Positioning of TOI in tables and plots

platform/features/conductor-v2/conductor/res/sass/_time-of-interest.scss

@@ -140,7 +140,6 @@
     }
 }
 
-
 // TOI is showing value as well
 .show-val .l-toi-holder {
     .l-toi {

platform/features/conductor-v2/conductor/res/templates/time-conductor.html

@@ -90,8 +90,7 @@
             <a class="l-page-button s-icon-button icon-pointer-left"></a>
             <div class="l-data-visualization">
                 <div style="position: relative; height: 100%" ng-style="{'left': toi.left + '%'}">
-                <mct-include key="'time-of-interest'" class="show-val"
+                <mct-include key="'time-of-interest'" class="show-val"></mct-include>
-                             parameters = "{'name': 'conductor'}"></mct-include>
                 </div>
             </div>
             <a class="l-page-button align-right s-icon-button icon-pointer-right"></a>

platform/features/conductor-v2/conductor/src/ui/TimeOfInterestController.js

@@ -47,6 +47,10 @@ define(
             conductor.on('timeSystem', this.changeTimeSystem);
             if (conductor.timeSystem()) {
                 this.changeTimeSystem(conductor.timeSystem());
+                var toi = conductor.timeOfInterest();
+                if (toi) {
+                    this.changeTimeOfInterest(toi);
+                }
             }
 
             $scope.$on('$destroy', this.destroy);

platform/features/plot/bundle.js

@@ -77,7 +77,8 @@ define([
                         "telemetryFormatter",
                         "telemetryHandler",
                         "throttle",
-                        "PLOT_FIXED_DURATION"
+                        "PLOT_FIXED_DURATION",
+                        "timeConductor"
                     ]
                 },
                 {

platform/features/plot/res/templates/plot.html

@@ -19,6 +19,12 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
+<style>
+    .gl-plot-wrapper-display-area-and-x-axis .toiPositioner {
+        position: relative;
+        height: 100%;
+    }
+</style>
 <span ng-controller="PlotController as plot"
       class="abs holder holder-plot has-control-bar">
     <div class="l-control-bar" ng-show="!plot.hideExportButtons">
@@ -71,9 +77,10 @@
             </div>
 
             <div class="gl-plot-wrapper-display-area-and-x-axis">
-                <mct-include key="'time-of-interest'" class="show-val"
+                <div class="toiPositioner"
-                             parameters = "{'name': 'plot'}"
+                     ng-if="toiPerc" ng-style="{'left': toiPerc + '%'}">
-                        ></mct-include>
+                    <mct-include key="'time-of-interest'" class="show-val"></mct-include>
+                </div>
 
                 <div class="gl-plot-coords"
                      ng-if="subplot.isHovering() && subplot.getHoverCoordinates()">

platform/features/plot/src/PlotController.js

@@ -68,7 +68,8 @@ define(
             telemetryFormatter,
             telemetryHandler,
             throttle,
-            PLOT_FIXED_DURATION
+            PLOT_FIXED_DURATION,
+            conductor
         ) {
             var self = this,
                 plotTelemetryFormatter =
@@ -200,6 +201,7 @@ define(
                 if (handle) {
                     handle.unsubscribe();
                     handle = undefined;
+                    conductor.off(changeTimeOfInterest);
                 }
             }
 
@@ -242,6 +244,17 @@ define(
                     requery();
                 }
                 self.setUnsynchedStatus($scope.domainObject, follow && self.isZoomed());
+                changeTimeOfInterest(conductor.timeOfInterest());
+            }
+
+            function changeTimeOfInterest(timeOfInterest) {
+                if (timeOfInterest !== undefined){
+                    var bounds = conductor.bounds();
+                    var range = bounds.end - bounds.start;
+                    $scope.toiPerc = ((timeOfInterest - bounds.start) / range) * 100;
+                } else {
+                    $scope.toiPerc = undefined;
+                }
             }
 
             this.modeOptions = new PlotModeOptions([], subPlotFactory);
@@ -264,6 +277,10 @@ define(
                 new PlotAxis("ranges", [], AXIS_DEFAULTS[1])
             ];
 
+            changeTimeOfInterest(conductor.timeOfInterest());
+
+            conductor.on("timeOfInterest", changeTimeOfInterest);
+
             // Watch for changes to the selected axis
             $scope.$watch("axes[0].active.key", domainRequery);
             $scope.$watch("axes[1].active.key", rangeRequery);

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

@@ -49,10 +49,8 @@
             </tr>
         </thead>
         <tbody>
-        <!--ng-class="{ 'l-toi pinned': false }"-->
-        <!--ng-click="dummyUnpin()" -->
             <tr ng-repeat-start="visibleRow in visibleRows track by visibleRow.rowIndex"
-                ng-if="visibleRow.rowIndex === 10"
+                ng-if="visibleRow.rowIndex === toiRowIndex"
                 ng-style="{ top: visibleRow.offsetY + 'px' }"
                 class="l-toi-tablerow pinned">
                 <td colspan="999">
@@ -60,8 +58,8 @@
                 </td>
             </tr>
             <tr ng-repeat-end
-                ng-click="table.onRowClick($event, visibleRow.rowIndex)"
+                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/src/controllers/MCTTableController.js

@@ -110,6 +110,7 @@ define(
 
                     this.conductor.on('timeSystem', this.changeTimeSystem);
                     this.conductor.on('timeOfInterest', this.setTimeOfInterest);
+                    this.conductor.on('bounds', this.changeBounds);
 
                     // If time system defined, set initially
                     if (conductor.timeSystem()) {
@@ -124,6 +125,7 @@ define(
         MCTTableController.prototype.destroyConductorListeners = function () {
             this.conductor.off('timeSystem', this.changeTimeSystem);
             this.conductor.off('timeOfInterest', this.setTimeOfInterest);
+            this.conductor.off('bounds', this.changeBounds);
         };
 
         MCTTableController.prototype.changeTimeSystem = function () {
@@ -542,7 +544,15 @@ define(
             }
 
             this.$scope.displayRows = this.filterAndSort(newRows || []);
-            this.resize(newRows).then(this.setVisibleRows.bind(this));
+            this.resize(newRows).then(function() {
+                this.setVisibleRows();
+
+                var timeOfInterest = this.conductor.timeOfInterest();
+                if (timeOfInterest) {
+                    this.setTimeOfInterest(timeOfInterest);
+                }
+            }.bind(this));
+
         };
 
         /**
@@ -604,25 +614,29 @@ define(
             if (this.$scope.timeColumns.indexOf(this.$scope.sortColumn) !== -1
                 && newTOI
                 && this.$scope.displayRows.length > 0) {
-                var formattedTOI = this.toiFormatter.format(newTOI);;
+                    var formattedTOI = this.toiFormatter.format(newTOI);
-                // searchElement, min, max
+                    // searchElement, min, max
-                this.$scope.toiRowIndex = this.binarySearch(this.$scope.displayRows,
+                    this.$scope.toiRowIndex = this.binarySearch(this.$scope.displayRows,
-                    formattedTOI, 0, this.$scope.displayRows.length - 1);
+                        formattedTOI, 0, this.$scope.displayRows.length - 1);
-                this.scrollToRow(this.$scope.toiRowIndex);
+                    this.scrollToRow(this.$scope.toiRowIndex);
             }
         };
 
+        /**
+         * On zoom, pan, etc. reset TOI
+         * @param bounds
+         */
+        MCTTableController.prototype.changeBounds = function(bounds) {
+            this.setTimeOfInterest(this.conductor.timeOfInterest());
+        };
+
         MCTTableController.prototype.onRowClick = function (event, rowIndex) {
             if (this.$scope.timeColumns.indexOf(this.$scope.sortColumn) !== -1) {
-                if (rowIndex === this.$scope.toiRowIndex) {
+                var selectedTime = this.$scope.displayRows[rowIndex][this.$scope.sortColumn].text;
-                    this.conductor.timeOfInterest(undefined);
+                if (selectedTime
-                } else {
+                    && this.toiFormatter.validate(selectedTime)
-                    var selectedTime = this.$scope.displayRows[rowIndex][this.$scope.sortColumn].text;
+                    && event.altKey) {
-                    if (selectedTime
+                    this.conductor.timeOfInterest(this.toiFormatter.parse(selectedTime));
-                        && this.toiFormatter.validate(selectedTime)
-                        && event.altKey) {
-                        this.conductor.timeOfInterest(this.toiFormatter.parse(selectedTime));
-                    }
                 }
             }
         };