[Time Conductor] Addressing comments from code review

platform/features/conductor/core/bundle.js

@@ -21,12 +21,12 @@
  *****************************************************************************/
 
 define([
-    "./src/ui/TimeConductorViewService",
     "./src/ui/TimeConductorController",
     "./src/ui/ConductorAxisController",
     "./src/ui/ConductorTOIController",
+    "./src/ui/ConductorTOIDirective",
     "./src/ui/TimeOfInterestController",
-    "./src/ui/MctConductorAxis",
+    "./src/ui/ConductorAxisDirective",
     "./src/ui/NumberFormat",
     "text!./res/templates/time-conductor.html",
     "text!./res/templates/mode-selector/mode-selector.html",
@@ -34,12 +34,12 @@ define([
     "text!./res/templates/time-of-interest.html",
     "legacyRegistry"
 ], function (
-    TimeConductorViewService,
     TimeConductorController,
     ConductorAxisController,
     ConductorTOIController,
+    ConductorTOIDirective,
     TimeOfInterestController,
-    MCTConductorAxis,
+    ConductorAxisDirective,
     NumberFormat,
     timeConductorTemplate,
     modeSelectorTemplate,
@@ -50,16 +50,6 @@ define([
 
     legacyRegistry.register("platform/features/conductor/core", {
         "extensions": {
-            "services": [
-                {
-                    "key": "timeConductorViewService",
-                    "implementation": TimeConductorViewService,
-                    "depends": [
-                        "openmct",
-                        "timeSystems[]"
-                    ]
-                }
-            ],
             "controllers": [
                 {
                     "key": "TimeConductorController",
@@ -68,7 +58,6 @@ define([
                         "$scope",
                         "$window",
                         "openmct",
-                        "timeConductorViewService",
                         "formatService",
                         "CONDUCTOR_CONFIG"
                     ]
@@ -79,7 +68,6 @@ define([
                     "depends": [
                         "$scope",
                         "openmct",
-                        "timeConductorViewService",
                         "formatService"
                     ]
                 },
@@ -95,12 +83,16 @@ define([
             ],
             "directives": [
                 {
-                    "key": "mctConductorAxis",
+                    "key": "conductorAxis",
-                    "implementation": MCTConductorAxis,
+                    "implementation": ConductorAxisDirective,
                     "depends": [
                         "openmct",
                         "formatService"
                     ]
+                },
+                {
+                    "key": "conductorTOI",
+                    "implementation": ConductorTOIDirective
                 }
             ],
             "stylesheets": [

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

@@ -1,6 +1,6 @@
 <!-- Parent holder for time conductor. follow-mode | fixed-mode -->
 <div ng-controller="TimeConductorController as tcController"
-    class="holder grows flex-elem l-flex-row l-time-conductor {{tcController.mode}}-mode {{timeSystemModel.selected.metadata.key}}-time-system"
+    class="holder grows flex-elem l-flex-row l-time-conductor {{tcController.isFixed ? 'fixed-mode' : 'realtime-mode'}} {{timeSystemModel.selected.metadata.key}}-time-system"
         ng-class="{'status-panning': tcController.panning}">
     <div class="flex-elem holder time-conductor-icon">
         <div class="hand-little"></div>
@@ -28,7 +28,7 @@
                             </mct-control>
                         </span>
                             <span class="l-time-range-input-w time-delta start-delta"
-                              ng-class="{'hide':(tcController.mode === 'fixed')}">
+                              ng-class="{'hide':tcController.isFixed}">
                                 -
                             <mct-control key="'datetime-field'"
                                          structure="{
@@ -55,13 +55,13 @@
                                          }"
                                          ng-model="boundsModel"
                                          ng-blur="tcController.setBoundsFromView(boundsModel)"
-                                         ng-disabled="tcController.mode !== 'fixed'"
+                                         ng-disabled="!tcController.isFixed"
                                          field="'end'"
                                          class="time-range-input">
                             </mct-control>
                         </span>
                         <span class="l-time-range-input-w time-delta end-delta"
-                              ng-class="{'hide':(tcController.mode === 'fixed')}">
+                              ng-class="{'hide': tcController.isFixed}">
                                 +
                             <mct-control key="'datetime-field'"
                                          structure="{
@@ -79,21 +79,11 @@
 
                 <input type="submit" class="hidden">
             </form>
-            <mct-conductor-axis></mct-conductor-axis>
+            <conductor-axis view-service="tcController.conductorViewService"></conductor-axis>
         </div>
 
         <!-- Holds data visualization, time of interest -->
-        <div class="l-data-visualization-holder l-row-elem flex-elem"
+        <conductor-toi  view-service="tcController.conductorViewService"></conductor-toi>
-             ng-controller="ConductorTOIController as toi">
-            <a class="l-page-button s-icon-button icon-pointer-left"></a>
-            <div class="l-data-visualization" ng-click="toi.setTOIFromPosition($event)">
-                <mct-include key="'time-of-interest'"
-                             class="l-toi-holder show-val"
-                             ng-class="{ pinned: toi.pinned, 'val-to-left': toi.left > 80 }"
-                             ng-style="{'left': toi.left + '%'}"></mct-include>
-            </div>
-            <a class="l-page-button align-right s-icon-button icon-pointer-right"></a>
-        </div>
 
         <!-- Holds time system and session selectors, and zoom control -->
         <div class="l-time-conductor-controls l-row-elem l-flex-row flex-elem">

platform/features/conductor/core/src/ui/ConductorAxisController.js

@@ -34,11 +34,10 @@ define(
          * Used by the mct-conductor-axis directive
          * @constructor
          */
-        function ConductorAxisController(openmct, formatService, conductorViewService, scope, element) {
+        function ConductorAxisController(openmct, formatService, scope, element) {
             // Dependencies
             this.formatService = formatService;
             this.timeAPI = openmct.time;
-            this.conductorViewService = conductorViewService;
 
             this.scope = scope;
 
@@ -60,8 +59,8 @@ define(
         ConductorAxisController.prototype.destroy = function () {
             this.timeAPI.off('timeSystem', this.changeTimeSystem);
             this.timeAPI.off('bounds', this.changeBounds);
-            this.conductorViewService.off("zoom", this.onZoom);
+            this.viewService.off("zoom", this.onZoom);
-            this.conductorViewService.off("zoom-stop", this.onZoomStop);
+            this.viewService.off("zoom-stop", this.onZoomStop);
         };
 
         /**
@@ -92,8 +91,8 @@ define(
 
             this.scope.$on("$destroy", this.destroy);
 
-            this.conductorViewService.on("zoom", this.onZoom);
+            this.viewService.on("zoom", this.onZoom);
-            this.conductorViewService.on("zoom-stop", this.onZoomStop);
+            this.viewService.on("zoom-stop", this.onZoomStop);
         };
 
         /**
@@ -175,7 +174,7 @@ define(
          */
         ConductorAxisController.prototype.panStop = function () {
             //resync view bounds with time conductor bounds
-            this.conductorViewService.emit("pan-stop");
+            this.viewService.emit("pan-stop");
             this.timeAPI.bounds(this.bounds);
         };
 
@@ -222,7 +221,7 @@ define(
                     end: end
                 };
                 this.setScale();
-                this.conductorViewService.emit("pan", this.bounds);
+                this.viewService.emit("pan", this.bounds);
             }
         };
 

platform/features/conductor/core/src/ui/ConductorAxisDirective.js

@@ -21,23 +21,25 @@
  *****************************************************************************/
 
 define(['./ConductorAxisController'], function (ConductorAxisController) {
-    function MctConductorAxis() {
+    function ConductorAxisDirective() {
         /**
          * The mct-conductor-axis renders a horizontal axis with regular
          * labelled 'ticks'. It requires 'start' and 'end' integer values to
          * be specified as attributes.
          */
-
         return {
             controller: [
                 'openmct',
                 'formatService',
-                'timeConductorViewService',
                 '$scope',
                 '$element',
                 ConductorAxisController
             ],
             controllerAs: 'axis',
+            scope: {
+                viewService: "="
+            },
+            bindToController: true,
 
             restrict: 'E',
             priority: 1000,
@@ -50,5 +52,5 @@ define(['./ConductorAxisController'], function (ConductorAxisController) {
         };
     }
 
-    return MctConductorAxis;
+    return ConductorAxisDirective;
 });

platform/features/conductor/core/src/ui/ConductorTOIController.js

@@ -29,9 +29,8 @@ define(
          * TOI indicator based on the current value of the TOI, and the width of the TOI conductor.
          * @memberof platform.features.conductor
          */
-        function ConductorTOIController($scope, openmct, conductorViewService) {
+        function ConductorTOIController($scope, openmct) {
             this.timeAPI = openmct.time;
-            this.conductorViewService = conductorViewService;
 
             //Bind all class functions to 'this'
             Object.keys(ConductorTOIController.prototype).filter(function (key) {

platform/features/conductor/core/src/ui/ConductorTOIDirective.js

@@ -0,0 +1,63 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+
+define(['./ConductorTOIController'], function (ConductorTOIController) {
+    /**
+     * A directive that encapsulates the TOI specific behavior of the Time Conductor UI.
+     * @constructor
+     */
+    function ConductorTOIDirective() {
+        /**
+         * The mct-conductor-axis renders a horizontal axis with regular
+         * labelled 'ticks'. It requires 'start' and 'end' integer values to
+         * be specified as attributes.
+         */
+        return {
+            controller: [
+                '$scope',
+                'openmct',
+                ConductorTOIController
+            ],
+            controllerAs: 'toi',
+            scope: {
+                viewService: "="
+            },
+            bindToController: true,
+
+            restrict: 'E',
+            priority: 1000,
+
+            template:
+                '<div class="l-data-visualization-holder l-row-elem flex-elem">' +
+                '   <a class="l-page-button s-icon-button icon-pointer-left"></a>' +
+                '   <div class="l-data-visualization" ng-click="toi.setTOIFromPosition($event)">' +
+                '       <mct-include key="\'time-of-interest\'" class="l-toi-holder show-val" ' +
+                '       ng-class="{ pinned: toi.pinned, \'val-to-left\': toi.left > 80 }" ' +
+                '       ng-style="{\'left\': toi.left + \'%\'}"></mct-include>' +
+                '   </div>' +
+                '   <a class="l-page-button align-right s-icon-button icon-pointer-right"></a>' +
+                '</div>'
+        };
+    }
+
+    return ConductorTOIDirective;
+});

platform/features/conductor/core/src/ui/TimeConductorController.js

@@ -24,9 +24,14 @@
 define(
     [
         'moment',
-        './TimeConductorValidation'
+        './TimeConductorValidation',
+        './TimeConductorViewService'
     ],
-    function (moment, TimeConductorValidation) {
+    function (
+        moment,
+        TimeConductorValidation,
+        TimeConductorViewService
+    ) {
 
         var timeUnitsMegastructure = [
             ["Decades", function (r) {
@@ -67,7 +72,6 @@ define(
             $scope,
             $window,
             openmct,
-            conductorViewService,
             formatService,
             config
         ) {
@@ -89,8 +93,8 @@ define(
 
             this.$scope = $scope;
             this.$window = $window;
-            this.conductorViewService = conductorViewService;
             this.timeAPI = openmct.time;
+            this.conductorViewService = new TimeConductorViewService(openmct);
             this.validation = new TimeConductorValidation(this.timeAPI);
             this.formatService = formatService;
             this.config = config;
@@ -99,7 +103,12 @@ define(
             this.$scope.timeSystemModel = {};
             this.$scope.boundsModel = {};
 
-            this.mode = this.timeAPI.clock() === undefined ? 'fixed' : 'realtime';
+            this.timeSystems = this.timeAPI.getAllTimeSystems().reduce(function (map, timeSystem) {
+                map[timeSystem.key] = timeSystem;
+                return map;
+            }, {});
+
+            this.isFixed = this.timeAPI.clock() === undefined;
 
             var options = this.optionsFromConfig(config);
             this.menu = {
@@ -107,11 +116,6 @@ define(
                 options: options
             };
 
-            // Construct the provided time system definitions
-            this.timeSystems = config.menuOptions.map(function (menuOption) {
-                return this.getTimeSystem(menuOption.timeSystem);
-            }.bind(this));
-
             //Set the initial state of the UI from the conductor state
             var timeSystem = this.timeAPI.timeSystem();
             if (timeSystem) {
@@ -224,7 +228,7 @@ define(
                 var clock = this.getClock(menuOption.clock);
                 var clockKey = menuOption.clock || 'fixed';
 
-                var timeSystem = this.getTimeSystem(menuOption.timeSystem);
+                var timeSystem = this.timeSystems[menuOption.timeSystem];
                 if (timeSystem !== undefined) {
                     if (clock !== undefined) {
                         // Use an associative array to built a set of unique
@@ -400,7 +404,7 @@ define(
                 }
             }
 
-            this.mode = clock === undefined ? 'fixed' : 'realtime';
+            this.isFixed = clock === undefined;
 
             if (clock !== undefined) {
                 this.setViewFromOffsets(this.timeAPI.clockOffsets());
@@ -423,7 +427,7 @@ define(
          */
         TimeConductorController.prototype.setTimeSystemFromView = function (key) {
             var clock = this.menu.selected.clock;
-            var timeSystem = this.getTimeSystem(key);
+            var timeSystem = this.timeSystems[key];
             var config = this.getConfig(timeSystem, clock);
             var bounds;
 
@@ -445,7 +449,12 @@ define(
                 this.timeAPI.timeSystem(timeSystem, bounds);
                 var configOffsets = config.clockOffsets;
                 var apiOffsets = this.timeAPI.clockOffsets();
-                if (configOffsets.start !== apiOffsets.start || configOffsets.end !== apiOffsets.end) {
+
+                //Checking if a clock is actually set on the Time API before
+                // trying to set offsets.
+                if (this.timeAPI.clock() !== undefined &&
+                    (configOffsets.start !== apiOffsets.start ||
+                    configOffsets.end !== apiOffsets.end)) {
                     this.timeAPI.clockOffsets(configOffsets);
                 }
             }

src/api/time/TimeAPI.js

@@ -22,8 +22,6 @@
 
 define(['EventEmitter'], function (EventEmitter) {
 
-    var tick;
-
     /**
      * The public API for setting and querying the temporal state of the
      * application. The concept of time is integral to Open MCT, and at least
@@ -61,24 +59,7 @@ define(['EventEmitter'], function (EventEmitter) {
         this.activeClock = undefined;
         this.offsets = undefined;
 
-        /**
+        this.tick = this.tick.bind(this);
-         * Tick is private to avoid misuse.
-         */
-        tick = function (timestamp) {
-            var newBounds = {
-                start: timestamp + this.offsets.start,
-                end: timestamp + this.offsets.end
-            };
-
-            this.boundsVal = newBounds;
-            this.emit('bounds', this.boundsVal, true);
-
-            // If a bounds change results in a TOI outside of the current
-            // bounds, unset it
-            if (this.toi < newBounds.start || this.toi > newBounds.end) {
-                this.timeOfInterest(undefined);
-            }
-        }.bind(this);
 
     }
 
@@ -194,10 +175,8 @@ define(['EventEmitter'], function (EventEmitter) {
             isNaN(offsets.end)
         ) {
             return "Start and end offsets must be specified as integer values";
-        } else if (offsets.start >= 0) {
+        } else if (offsets.start >= offsets.end) {
-            return "Specified start offset must less than 0";
+            return "Specified start offset must be < end offset";
-        } else if (offsets.end < 0) {
-            return "Specified end offset must greater than or equal to 0";
         }
         return true;
     };
@@ -330,6 +309,28 @@ define(['EventEmitter'], function (EventEmitter) {
         return this.toi;
     };
 
+    /**
+     * Update bounds based on provided time and current offsets
+     * @private
+     * @param {number} timestamp A time from which boudns will be calculated
+     * using current offsets.
+     */
+    TimeAPI.prototype.tick = function (timestamp) {
+        var newBounds = {
+            start: timestamp + this.offsets.start,
+            end: timestamp + this.offsets.end
+        };
+
+        this.boundsVal = newBounds;
+        this.emit('bounds', this.boundsVal, true);
+
+        // If a bounds change results in a TOI outside of the current
+        // bounds, unset it
+        if (this.toi < newBounds.start || this.toi > newBounds.end) {
+            this.timeOfInterest(undefined);
+        }
+    };
+
     /**
      * Set the active clock. Tick source will be immediately subscribed to
      * and ticking will begin. Offsets from 'now' must also be provided. A clock
@@ -360,14 +361,14 @@ define(['EventEmitter'], function (EventEmitter) {
 
             var previousClock = this.activeClock;
             if (previousClock !== undefined) {
-                previousClock.off("tick", tick);
+                previousClock.off("tick", this.tick);
             }
 
             this.activeClock = clock;
 
             if (this.activeClock !== undefined) {
                 this.offsets = offsets;
-                this.activeClock.on("tick", tick);
+                this.activeClock.on("tick", this.tick);
             }
 
             /**