[Frontend] MIsc mods and fixes

Fixes #1590
Less brittle approach to 'niceValuesToShowWhenExpanded' array
that won't break when user config is wired up; mobile styling added
to hide nearest* columns in mobile (no hover) context; removed
hex color value display and use niceValuesToShowWhenExpanded
lookup in plot-options-browse.html; added CSS class 'comma-list';

API.md

@@ -372,7 +372,6 @@ Known hints:
 
 * `domain`: Indicates that the value represents the "input" of a datum. Values with a `domain` hint will be used for the x-axis of a plot, and tables will render columns for these values first.
 * `range`: Indicates that the value is the "output" of a datum.  Values with a `range` hint will be used as the y-axis on a plot, and tables will render columns for these values after the `domain` values.
-* `image`: Indicates that the value may be interpreted as the URL to an image file, in which case appropriate views will be made available.
 
 ##### The Time Conductor and Telemetry 
 
@@ -548,24 +547,29 @@ numbers in UTC terrestrial time.
 
 #### Getting and Setting the Active Time System
 
-Once registered, a time system can be activated by calling `timeSystem` with
-the timeSystem `key` or an instance of the time system.  If you are not using a
-[clock](#clocks), you must also specify valid [bounds](#time-bounds) for the
-timeSystem.
+Once registered, a time system can be activated using a key, or an instance of 
+the time system itself.
 
 ```javascript
-openmct.time.timeSystem('utc', bounds);
+openmct.time.timeSystem('utc');
 ```
 
-A time system can be immediately activated after registration: 
+A time system can be immediately activated upon registration: 
 
 ```javascript
+var utcTimeSystem = {
+    key: 'utc',
+    name: 'UTC Time',
+    cssClass = 'icon-clock',
+    timeFormat = 'utc',
+    durationFormat = 'duration',
+    isUTCBased = true
+};
 openmct.time.addTimeSystem(utcTimeSystem);
-openmct.time.timeSystem(utcTimeSystem, bounds);
+openmct.time.timeSystem(utcTimeSystem);
 ```
 
-Setting the active time system will trigger a [`'timeSystem'`](#time-events) 
-event.  If you supplied bounds, a [`'bounds'`](#time-events) event will be triggered afterwards with your newly supplied bounds.
+Setting the active time system will trigger a [time system event](#time-events). 
 
 ### Time Bounds
 
@@ -588,8 +592,8 @@ let now = Date.now();
 openmct.time.bounds({start: now - ONE_HOUR, now);
 ```
 
-To respond to bounds change events, listen for the [`'bounds'`](#time-events)
-event.
+To respond to bounds change events, simply register a callback against the `bounds`
+event. For more information on the bounds event, please see the section on [Time Events](#time-events).
 
 ## Clocks
 
@@ -669,16 +673,14 @@ An example clock implementation is provided in the form of the [LocalClock](http
 Once registered a clock can be activated by calling the `clock` function on the 
 Time API passing in the key or instance of a registered clock. Only one clock 
 may be active at once, so activating a clock will deactivate any currently 
-active clock. [`clockOffsets`](#clock-offsets) must be specified when changing a clock.
-
-Setting the clock triggers a [`'clock'`](#time-events) event, followed by a [`'clockOffsets'`](#time-events) event, and then a [`'bounds'`](#time-events) event as the offsets are applied to the clock's currentValue().
-
+active clock. Setting the clock will also trigger a ['clock' event](#time-events).
 
 ```
-openmct.time.clock(someClock, clockOffsets);
+openmct.time.clock(someClock);
 ```
 
-Upon being activated, the time API will listen for tick events on the clock by calling `clock.on`.
+Upon being activated, a clock's `on` function will be immediately called to subscribe
+to `tick` events.
 
 The currently active clock (if any) can be retrieved by calling the same 
 function without any arguments.
@@ -705,7 +707,7 @@ relative time spans. Offsets are defined as an object with two properties:
 * `start`: A `number` that must be < 0 and which is used to calculate the start 
 bounds on each clock tick. The start offset will be calculated relative to the 
 value provided by a clock's tick callback, or its `currentValue()` function.
-* `end`: A `number` that must be >= 0 and which is used to calculate the end 
+* `end`: A `number` that must be >=0 and which is used to calculate the end 
 bounds on each clock tick.
 
 The `clockOffsets` function can be used to get or set clock offsets. For example, 
@@ -726,9 +728,16 @@ Clock offsets are only relevant when a clock source is active.
 
 ## Time Events
 
-The Time API is a standard event emitter; you can register callbacks for events using the `on` method and remove callbacks for events with the `off` method.
+The time API supports the registration of listeners that will be invoked when the 
+application's temporal state changes. Events listeners can be registered using 
+the `on` function. They can be deregistered using the `off` function. The arguments
+accepted by the `on` and `off` functions are:
 
-For example:
+* `event`: A `string` naming the event to subscribe to. Event names correspond to
+the property of the Time API you're interested in. A [full list of time events](#list-of-time-events) 
+is provided later.
+
+As an example, the code to listen to bounds change events looks like:
 
 ``` javascript
 openmct.time.on('bounds', function callback (newBounds, tick) {
@@ -738,38 +747,40 @@ openmct.time.on('bounds', function callback (newBounds, tick) {
 
 #### List of Time Events
 
-The events emitted by the Time API are:
+The events supported by the Time API are:
 
-* `bounds`: emitted whenever the bounds change.  The callback will be invoked 
-  with two arguments:
-  * `bounds`: A [bounds](#getting-and-setting-bounds) bounds object
-    representing a new time period bound by the specified start and send times.
-  * `tick`: A `boolean` indicating whether or not this bounds change is due to
-    a "tick" from a [clock source](#clocks). This information can be useful 
-    when determining a strategy for fetching telemetry data in response to a 
-    bounds change event. For example, if the bounds change was automatic, and 
-    is due to a tick then it's unlikely that you would need to perform a 
-    historical data query. It should be sufficient to just show any new 
-    telemetry received via subscription since the last tick, and optionally to 
-    discard any older data that now falls outside of the currently set bounds. 
-    If `tick` is false,then the bounds change was not due to an automatic tick, 
-    and a query for historical data may be necessary, depending on your data 
-    caching strategy, and how significantly the start bound has changed.
-* `timeSystem`: emitted whenever the active time system changes.  The callback will be invoked with a single argument:
-  * `timeSystem`: The newly active [time system](#defining-and-registering-time-systems).
-* `clock`: emitted whenever the clock changes.  The callback will be invoked 
-  with a single argument:
-  * `clock`: The newly active [clock](#clocks), or `undefined` if an active 
-    clock has been deactivated.
-* `clockOffsets`: emitted whenever the active clock offsets change.  The 
-  callback will be invoked with a single argument:
-  * `clockOffsets`: The new [clock offsets](#clock-offsets).
+* `bounds`: Listen for changes to current bounds. The callback will be invoked 
+with two arguments:
+    * `bounds`: A [bounds](#getting-and-setting-bounds) bounds object representing 
+    a new time period bound by the specified start and send times.
+    * `tick`: A `boolean` indicating whether or not this bounds change is due to a 
+    "tick" from a [clock source](#clocks). This information can be useful when 
+    determining a strategy for fetching telemetry data in response to a bounds 
+    change event. For example, if the bounds change was automatic, and is due 
+    to a tick then it's unlikely that you would need to perform a historical 
+    data query. It should be sufficient to just show any new telemetry received 
+    via subscription since the last tick, and optionally to discard any older 
+    data that now falls outside of the currently set bounds. If `tick` is false,
+    then the bounds change was not due to an automatic tick, and a query for 
+    historical data may be necessary, depending on your data caching strategy, 
+    and how significantly the start bound has changed.
+* `timeSystem`: Listen for changes to the active [time system](#defining-and-registering-time-systems).
+The callback will be invoked with a single argument - the newly active time system.
+    * `timeSystem`: The newly active [time system](#defining-and-registering-time-systems) object.
+* `clock`: Listen for changes to the active clock. When invoked, the callback 
+will be provided with the new clock.
+    * `clock`: The newly active [clock](#clocks), or `undefined` if an active clock
+    has been deactivated.
+* `clockOffsets`: Listen for changes to active clock offsets. When invoked the 
+callback will be provided with the new clock offsets.
+    * `clockOffsets`: A [clock offsets](#clock-offsets) object.
 
 
 ## The Time Conductor
 
-The Time Conductor provides a user interface for managing time bounds in Open 
-MCT. It allows a user to select from configured time systems and clocks, and to set bounds and clock offsets.
+The Time Conductor provides a user interface for managing time bounds in Open MCT.
+It allows a user to select from configured time systems and clocks, and to set bounds
+and clock offsets.
 
 If activated, the time conductor must be provided with configuration options, 
 detailed below.

README.md

@@ -137,6 +137,20 @@ naming convention is otherwise the same.)
 When `npm test` is run, test results will be written as HTML to
 `target/tests`. Code coverage information is written to `target/coverage`.
 
+
+### Functional Testing
+
+The tests described above are all at the unit-level; an additional
+test suite using [Protractor](https://angular.github.io/protractor/)
+is under development, in the `protractor` folder.
+
+To run:
+
+* Install protractor following the instructions above.
+* `cd protractor`
+* `npm install`
+* `npm run all`
+
 # Glossary
 
 Certain terms are used throughout Open MCT with consistent meanings

docs/src/guide/index.md

@@ -933,10 +933,9 @@ Note that `templateUrl` is not supported for `containers`.
 
 Controls provide options for the `mct-control` directive. 
  
-These standard control types are included in the forms bundle:
+Ten standard control types are included in the forms bundle:
 
-* `textfield`: A text input to enter plain text.
-* `numberfield`: A text input to enter numbers.
+* `textfield`: An area to enter plain text.
 * `select`: A drop-down list of options.
 * `checkbox`: A box which may be checked/unchecked.
 * `color`: A color picker.

example/imagery/bundle.js

@@ -0,0 +1,80 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2017, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT 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 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*/
+
+define([
+    "./src/ImageTelemetryProvider",
+    'legacyRegistry'
+], function (
+    ImageTelemetryProvider,
+    legacyRegistry
+) {
+    "use strict";
+
+    legacyRegistry.register("example/imagery", {
+        "name": "Imagery",
+        "description": "Example of a component that produces image telemetry.",
+        "extensions": {
+            "components": [
+                {
+                    "implementation": ImageTelemetryProvider,
+                    "type": "provider",
+                    "provides": "telemetryService",
+                    "depends": [
+                        "$q",
+                        "$timeout"
+                    ]
+                }
+            ],
+            "types": [
+                {
+                    "key": "imagery",
+                    "name": "Example Imagery",
+                    "cssClass": "icon-image",
+                    "features": "creation",
+                    "description": "For development use. Creates example imagery data that mimics a live imagery stream.",
+                    "priority": 10,
+                    "model": {
+                        "telemetry": {}
+                    },
+                    "telemetry": {
+                        "source": "imagery",
+                        "domains": [
+                            {
+                                "name": "Time",
+                                "key": "time",
+                                "format": "utc"
+                            }
+                        ],
+                        "ranges": [
+                            {
+                                "name": "Image",
+                                "key": "url",
+                                "format": "imageUrl"
+                            }
+                        ]
+                    }
+                }
+            ]
+        }
+    });
+});

example/imagery/plugin.js

@@ -1,140 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2017, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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([
-
-], function(
-
-) {
-    function ImageryPlugin() {
-
-        var IMAGE_SAMPLES = [
-                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18731.jpg",
-                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18732.jpg",
-                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18733.jpg",
-                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18734.jpg",
-                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18735.jpg",
-                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18736.jpg",
-                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18737.jpg",
-                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18738.jpg",
-                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18739.jpg",
-                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18740.jpg",
-                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18741.jpg",
-                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18742.jpg",
-                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18743.jpg",
-                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18744.jpg",
-                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18745.jpg",
-                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18746.jpg",
-                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18747.jpg",
-                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18748.jpg"
-            ];
-
-        function pointForTimestamp(timestamp) {
-            return {
-                utc: Math.floor(timestamp / 5000) * 5000,
-                url: IMAGE_SAMPLES[Math.floor(timestamp / 5000) % IMAGE_SAMPLES.length]
-            };
-        }
-
-        var realtimeProvider = {
-            supportsSubscribe: function (domainObject) {
-                return domainObject.type === 'example.imagery';
-            },
-            subscribe: function (domainObject, callback) {
-                var interval = setInterval(function () {
-                    callback(pointForTimestamp(Date.now()));
-                }, 5000);
-
-                return function (interval) {
-                    clearInterval(interval);
-                };
-            }
-        };
-
-        var historicalProvider = {
-            supportsRequest: function (domainObject, options) {
-                return domainObject.type === 'example.imagery'
-                    && options.strategy !== 'latest';
-            },
-            request: function (domainObject, options) {
-                var start = options.start;
-                var end = options.end;
-                var data = [];
-                while (start < end) {
-                    data.push(pointForTimestamp(start));
-                    start += 5000;
-                }
-                return Promise.resolve(data);
-            }
-        };
-
-        var ladProvider = {
-            supportsRequest: function (domainObject, options) {
-                return domainObject.type === 'example.imagery' &&
-                    options.strategy === 'latest';
-            },
-            request: function (domainObject, options) {
-                return Promise.resolve([pointForTimestamp(Date.now())]);
-            }
-        };
-
-
-        return function install(openmct) {
-            openmct.types.addType('example.imagery', {
-                key: 'example.imagery',
-                name: 'Example Imagery',
-                cssClass: 'icon-image',
-                description: 'For development use. Creates example imagery ' +
-                    'data that mimics a live imagery stream.',
-                creatable: true,
-                initialize: function (object) {
-                    object.telemetry = {
-                        values: [
-                            {
-                                name: 'Time',
-                                key: 'utc',
-                                format: 'utc',
-                                hints: {
-                                    domain: 1
-                                }
-                            },
-                            {
-                                name: 'Image',
-                                key: 'url',
-                                format: 'image',
-                                hints: {
-                                    image: 1
-                                }
-                            }
-                        ]
-                    }
-                }
-            });
-
-            openmct.telemetry.addProvider(realtimeProvider);
-            openmct.telemetry.addProvider(historicalProvider);
-            openmct.telemetry.addProvider(ladProvider);
-        };
-    }
-
-    return ImageryPlugin;
-});

example/imagery/src/ImageTelemetry.js

@@ -0,0 +1,81 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2017, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT 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 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,Promise*/
+
+/**
+ * Module defining ImageTelemetry. Created by vwoeltje on 06/22/15.
+ */
+define(
+    [],
+    function () {
+        "use strict";
+
+        var firstObservedTime = Date.now(),
+            images = [
+                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18731.jpg",
+                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18732.jpg",
+                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18733.jpg",
+                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18734.jpg",
+                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18735.jpg",
+                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18736.jpg",
+                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18737.jpg",
+                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18738.jpg",
+                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18739.jpg",
+                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18740.jpg",
+                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18741.jpg",
+                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18742.jpg",
+                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18743.jpg",
+                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18744.jpg",
+                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18745.jpg",
+                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18746.jpg",
+                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18747.jpg",
+                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18748.jpg"
+
+            ].map(function (url, index) {
+                return {
+                    timestamp: firstObservedTime + 1000 * index,
+                    url: url
+                };
+            });
+
+
+        /**
+         *
+         * @constructor
+         */
+        function ImageTelemetry() {
+            return {
+                getPointCount: function () {
+                    return Math.floor((Date.now() - firstObservedTime) / 1000);
+                },
+                getDomainValue: function (i, domain) {
+                    return images[i % images.length].timestamp;
+                },
+                getRangeValue: function (i, range) {
+                    return images[i % images.length].url;
+                }
+            };
+        }
+
+        return ImageTelemetry;
+    }
+);

example/imagery/src/ImageTelemetryProvider.js

@@ -0,0 +1,115 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2017, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT 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 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,Promise*/
+
+/**
+ * Module defining ImageTelemetryProvider. Created by vwoeltje on 06/22/15.
+ */
+define(
+    ["./ImageTelemetry"],
+    function (ImageTelemetry) {
+        "use strict";
+
+        /**
+         *
+         * @constructor
+         */
+        function ImageTelemetryProvider($q, $timeout) {
+            var subscriptions = [];
+
+            //
+            function matchesSource(request) {
+                return request.source === "imagery";
+            }
+
+            // Used internally; this will be repacked by doPackage
+            function generateData(request) {
+                return {
+                    key: request.key,
+                    telemetry: new ImageTelemetry()
+                };
+            }
+
+            //
+            function doPackage(results) {
+                var packaged = {};
+                results.forEach(function (result) {
+                    packaged[result.key] = result.telemetry;
+                });
+                // Format as expected (sources -> keys -> telemetry)
+                return { imagery: packaged };
+            }
+
+            function requestTelemetry(requests) {
+                return $timeout(function () {
+                    return doPackage(requests.filter(matchesSource).map(generateData));
+                }, 0);
+            }
+
+            function handleSubscriptions() {
+                subscriptions.forEach(function (subscription) {
+                    var requests = subscription.requests;
+                    subscription.callback(doPackage(
+                        requests.filter(matchesSource).map(generateData)
+                    ));
+                });
+            }
+
+            function startGenerating() {
+                $timeout(function () {
+                    handleSubscriptions();
+                    if (subscriptions.length > 0) {
+                        startGenerating();
+                    }
+                }, 1000);
+            }
+
+            function subscribe(callback, requests) {
+                var subscription = {
+                    callback: callback,
+                    requests: requests
+                };
+
+                function unsubscribe() {
+                    subscriptions = subscriptions.filter(function (s) {
+                        return s !== subscription;
+                    });
+                }
+
+                subscriptions.push(subscription);
+
+                if (subscriptions.length === 1) {
+                    startGenerating();
+                }
+
+                return unsubscribe;
+            }
+
+            return {
+                requestTelemetry: requestTelemetry,
+                subscribe: subscribe
+            };
+        }
+
+        return ImageTelemetryProvider;
+    }
+);

gulpfile.js

@@ -77,15 +77,11 @@ if (process.env.NODE_ENV === 'development') {
 gulp.task('scripts', function () {
     var requirejsOptimize = require('gulp-requirejs-optimize');
     var replace = require('gulp-replace-task');
-    var header = require('gulp-header');
-    var comment = fs.readFileSync('src/about.frag');
-
     return gulp.src(paths.main)
         .pipe(sourcemaps.init())
         .pipe(requirejsOptimize(options.requirejsOptimize))
         .pipe(sourcemaps.write('.'))
         .pipe(replace(options.replace))
-        .pipe(header(comment, options.replace.variables))
         .pipe(gulp.dest(paths.dist));
 });
 

index.html

@@ -32,40 +32,21 @@
 
         require(['openmct'], function (openmct) {
             [
-                'example/eventGenerator',
-                'example/styleguide'
+                'example/imagery',
+                'example/eventGenerator'
             ].forEach(
                 openmct.legacyRegistry.enable.bind(openmct.legacyRegistry)
             );
             openmct.install(openmct.plugins.MyItems());
             openmct.install(openmct.plugins.LocalStorage());
-            openmct.install(openmct.plugins.Espresso());
+            openmct.install(openmct.plugins.Snow());
             openmct.install(openmct.plugins.Generator());
-            openmct.install(openmct.plugins.ExampleImagery());
             openmct.install(openmct.plugins.UTCTimeSystem());
-            openmct.install(openmct.plugins.Conductor({
-                menuOptions: [
-                    {
-                        name: "Fixed",
-                        timeSystem: 'utc',
-                        bounds: {
-                            start: Date.now() - 30 * 60 * 1000,
-                            end: Date.now()
-                        }
-                    },
-                    {
-                        name: "Realtime",
-                        timeSystem: 'utc',
-                        clock: 'local',
-                        clockOffsets: {
-                            start: -25 * 60 * 1000,
-                            end: 5 * 60 * 1000
-                        }
-                    }
-                ]
-            }));
-            openmct.time.clock('local', {start: -THIRTY_MINUTES, end: 0});
-            openmct.time.timeSystem('utc');
+
+            openmct.time.clock('local', {start: -15 * 60 * 1000, end: 0});
+            openmct.time.clockOffsets({start: -15 * 60 * 1000, end: 0});
+            openmct.time.timeSystem('utc', openmct.time.bounds());
+            window.openmct = openmct;
             openmct.start();
         });
     </script>

package.json

@@ -22,7 +22,6 @@
     "git-rev-sync": "^1.4.0",
     "glob": ">= 3.0.0",
     "gulp": "^3.9.0",
-    "gulp-header": "^1.8.8",
     "gulp-jscs": "^3.0.2",
     "gulp-jshint": "^2.0.0",
     "gulp-jshint-html-reporter": "^0.1.3",

platform/commonUI/browse/bundle.js

@@ -240,7 +240,7 @@ define([
             "views": [
                 {
                     "key": "items",
-                    "name": "Grid",
+                    "name": "Items",
                     "cssClass": "icon-thumbs-strip",
                     "description": "Grid of available items",
                     "template": itemsTemplate,

platform/commonUI/browse/res/templates/browse-object.html

@@ -20,7 +20,7 @@
  at runtime from the About dialog for additional information.
 -->
 <div ng-controller="BrowseObjectController" class="abs l-flex-col">
-    <div class="holder flex-elem l-flex-row object-browse-bar t-primary">
+    <div class="holder flex-elem l-flex-row object-browse-bar ">
         <div class="items-select left flex-elem l-flex-row grows">
             <mct-representation key="'back-arrow'"
                                 mct-object="domainObject"
@@ -31,18 +31,16 @@
             </mct-representation>
         </div>
         <div class="btn-bar right l-flex-row flex-elem flex-justify-end flex-fixed">
-            <span class="l-object-action-buttons">
-                <mct-representation key="'switcher'"
-                                    mct-object="domainObject"
-                                    ng-model="representation">
-                </mct-representation>
-                <!-- Temporarily, on mobile, the action buttons are hidden-->
-                <mct-representation key="'action-group'"
-                                    mct-object="domainObject"
-                                    parameters="{ category: 'view-control' }"
-                                    class="mobile-hide l-object-action-buttons">
-                </mct-representation>
-            </span>
+            <mct-representation key="'switcher'"
+                                mct-object="domainObject"
+                                ng-model="representation">
+            </mct-representation>
+            <!-- Temporarily, on mobile, the action buttons are hidden-->
+            <mct-representation key="'action-group'"
+                                mct-object="domainObject"
+                                parameters="{ category: 'view-control' }"
+                                class="mobile-hide">
+            </mct-representation>
         </div>
     </div>
     <div class="holder l-flex-col flex-elem grows l-object-wrapper l-controls-visible l-time-controller-visible">

platform/commonUI/browse/res/templates/browse/object-header.html

@@ -29,7 +29,3 @@
         mct-object='domainObject'
         class="flex-elem context-available-w"></mct-representation>
 </span>
-<a class="s-button icon-expand t-btn-view-large"
-   title="View large"
-   mct-trigger-modal>
-</a>

platform/commonUI/dialog/res/templates/message.html

@@ -16,7 +16,7 @@
         </div>
         <div class="bottom-bar">
             <a ng-repeat="dialogOption in ngModel.options"
-               class="s-button"
+               class="s-button major"
                ng-click="dialogOption.callback()">
                 {{dialogOption.label}}
             </a>

platform/commonUI/dialog/res/templates/overlay.html

@@ -19,12 +19,12 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<div class="abs overlay l-dialog" ng-class="{'delayEntry100ms' : ngModel.delay}">
+<div class="abs overlay" ng-class="{'delayEntry100ms' : ngModel.delay}">
     <div class="abs blocker"></div>
-    <div class="abs outer-holder">
+    <div class="abs holder">
         <a ng-click="ngModel.cancel()"
            ng-if="ngModel.cancel"
-           class="close icon-x-in-circle"></a>
-        <div class="abs inner-holder contents" ng-transclude></div>
+           class="close icon-x"></a>
+        <div class="abs contents" ng-transclude></div>
     </div>
 </div>

platform/commonUI/formats/src/UTCTimeFormat.js

@@ -121,6 +121,9 @@ define([
     };
 
     UTCTimeFormat.prototype.parse = function (text) {
+        if (typeof text === 'number') {
+            return text;
+        }
         return moment.utc(text, DATE_FORMATS).valueOf();
     };
 

platform/commonUI/general/res/fonts/symbols/icomoon-project-openmct-symbols-12px.json

@@ -1,207 +1,245 @@
 {
-	"metadata": {
-		"name": "openmct-symbols-12px",
-		"lastOpened": 1467322505818,
-		"created": 1467322503679
-	},
-	"iconSets": [
-		{
-			"selection": [
-				{
-					"order": 4,
-					"id": 2,
-					"prevSize": 12,
-					"code": 59671,
-					"name": "icon12-eye-open",
-					"tempChar": ""
-				},
-				{
-					"order": 7,
-					"id": 5,
-					"prevSize": 12,
-					"code": 921607,
-					"name": "icon12-pane-collapse-left",
-					"tempChar": ""
-				},
-				{
-					"order": 8,
-					"id": 4,
-					"prevSize": 12,
-					"code": 921608,
-					"name": "icon12-pane-collapse-right",
-					"tempChar": ""
-				},
-				{
-					"order": 6,
-					"id": 3,
-					"prevSize": 12,
-					"code": 921865,
-					"name": "icon12-folder",
-					"tempChar": ""
-				}
-			],
-			"id": 0,
-			"metadata": {
-				"name": "openmct-symbols-12px",
-				"importSize": {
-					"width": 320,
-					"height": 384
-				},
-				"designer": "Charles Hacskaylo"
-			},
-			"height": 1024,
-			"prevSize": 12,
-			"icons": [
-				{
-					"id": 2,
-					"paths": [
-						"M512 86c-257.92 0-471.28 185.147-506.667 426 35.493 240.853 248.853 426 506.667 426s471.28-185.147 506.667-426c-35.387-240.853-248.747-426-506.667-426zM738.373 685.2c-131.048 109.517-321.699 109.517-452.747 0-53.328-44.749-90.832-105.477-106.96-173.2 16.101-67.707 53.565-128.435 106.853-173.2 131.048-109.517 321.699-109.517 452.747 0 53.368 44.733 90.909 105.464 107.067 173.2-16.128 67.723-53.632 128.451-106.96 173.2z",
-						"M682.667 512c0 94.257-76.41 170.667-170.667 170.667s-170.667-76.41-170.667-170.667c0-94.257 76.41-170.667 170.667-170.667s170.667 76.41 170.667 170.667z"
-					],
-					"attrs": [],
-					"isMulticolor": false,
-					"grid": 0,
-					"tags": [
-						"icon12-eye-open"
-					],
-					"colorPermutations": {
-						"1161751": [
-							{
-								"f": 0
-							},
-							{
-								"f": 0
-							}
-						]
-					}
-				},
-				{
-					"id": 5,
-					"paths": [
-						"M0 0h170.667v1024h-170.667v-1024z",
-						"M853.333 256h-256v-256l-341.333 426.667 341.333 426.667v-256h256v-341.333z"
-					],
-					"attrs": [
-						{
-							"opacity": 1
-						},
-						{
-							"opacity": 1
-						}
-					],
-					"isMulticolor": false,
-					"width": 853,
-					"grid": 0,
-					"tags": [
-						"icon12-pane-collapse-left"
-					],
-					"colorPermutations": {
-						"1161751": [
-							{},
-							{}
-						]
-					}
-				},
-				{
-					"id": 4,
-					"paths": [
-						"M682.667 0h170.667v1024h-170.667v-1024z",
-						"M0 256h256v-256l341.333 426.667-341.333 426.667v-256h-256v-341.333z"
-					],
-					"attrs": [
-						{
-							"opacity": 1
-						},
-						{
-							"opacity": 1
-						}
-					],
-					"isMulticolor": false,
-					"width": 853,
-					"grid": 0,
-					"tags": [
-						"icon12-pane-collapse-right"
-					],
-					"colorPermutations": {
-						"1161751": [
-							{},
-							{}
-						]
-					}
-				},
-				{
-					"id": 3,
-					"paths": [
-						"M938.667 170.667h-341.333l-110.32-110.32c-33.2-33.2-98.667-60.347-145.68-60.347h-256c-47.073 0.136-85.197 38.26-85.333 85.32l-0 341.346c0.136-47.073 38.26-85.197 85.32-85.333l853.346-0c47.073 0.136 85.197 38.26 85.333 85.32l0-170.654c-0.136-47.073-38.26-85.197-85.32-85.333z",
-						"M85.333 426.667h853.333c47.128 0 85.333 38.205 85.333 85.333v426.667c0 47.128-38.205 85.333-85.333 85.333h-853.333c-47.128 0-85.333-38.205-85.333-85.333v-426.667c0-47.128 38.205-85.333 85.333-85.333z"
-					],
-					"attrs": [],
-					"isMulticolor": false,
-					"grid": 0,
-					"tags": [
-						"icon12-folder"
-					],
-					"colorPermutations": {
-						"1161751": [
-							{
-								"f": 0
-							},
-							{
-								"f": 0
-							}
-						]
-					}
-				}
-			],
-			"invisible": false,
-			"colorThemes": [
-				[
-					[
-						0,
-						0,
-						0,
-						1
-					],
-					[
-						0,
-						161,
-						75,
-						1
-					]
-				]
-			],
-			"colorThemeIdx": 0
-		}
-	],
-	"preferences": {
-		"showGlyphs": true,
-		"showCodes": true,
-		"showQuickUse": true,
-		"showQuickUse2": true,
-		"showSVGs": true,
-		"fontPref": {
-			"prefix": "icon-",
-			"metadata": {
-				"fontFamily": "openmct-symbols-12px",
-				"majorVersion": 1,
-				"minorVersion": 0
-			},
-			"metrics": {
-				"emSize": 1024,
-				"baseline": 6.25,
-				"whitespace": 50
-			},
-			"embed": false
-		},
-		"imagePref": {
-			"prefix": "icon-",
-			"png": true,
-			"useClassSelector": true,
-			"color": 0,
-			"bgColor": 16777215
-		},
-		"historySize": 100,
-		"gridSize": 16
-	},
-	"uid": -1
-}
+  "metadata": {
+    "name": "openmct-symbols-12px",
+    "lastOpened": 0,
+    "created": 1495662782083
+  },
+  "iconSets": [
+    {
+      "selection": [
+        {
+          "order": 4,
+          "id": 2,
+          "prevSize": 12,
+          "code": 59671,
+          "name": "icon12-eye-open",
+          "tempChar": ""
+        },
+        {
+          "order": 10,
+          "id": 6,
+          "name": "icon-crosshair-12px",
+          "prevSize": 12,
+          "code": 59696,
+          "tempChar": ""
+        },
+        {
+          "order": 7,
+          "id": 5,
+          "prevSize": 12,
+          "code": 921607,
+          "name": "icon12-pane-collapse-left",
+          "tempChar": ""
+        },
+        {
+          "order": 8,
+          "id": 4,
+          "prevSize": 12,
+          "code": 921608,
+          "name": "icon12-pane-collapse-right",
+          "tempChar": ""
+        },
+        {
+          "order": 6,
+          "id": 3,
+          "prevSize": 12,
+          "code": 921865,
+          "name": "icon12-folder",
+          "tempChar": ""
+        }
+      ],
+      "id": 0,
+      "metadata": {
+        "name": "openmct-symbols-12px",
+        "importSize": {
+          "width": 384,
+          "height": 384
+        },
+        "designer": "Charles Hacskaylo"
+      },
+      "height": 1024,
+      "prevSize": 12,
+      "icons": [
+        {
+          "id": 2,
+          "paths": [
+            "M512 86c-257.92 0-471.28 185.147-506.667 426 35.493 240.853 248.853 426 506.667 426s471.28-185.147 506.667-426c-35.387-240.853-248.747-426-506.667-426zM738.373 685.2c-131.048 109.517-321.699 109.517-452.747 0-53.328-44.749-90.832-105.477-106.96-173.2 16.101-67.707 53.565-128.435 106.853-173.2 131.048-109.517 321.699-109.517 452.747 0 53.368 44.733 90.909 105.464 107.067 173.2-16.128 67.723-53.632 128.451-106.96 173.2z",
+            "M682.667 512c0 94.257-76.41 170.667-170.667 170.667s-170.667-76.41-170.667-170.667c0-94.257 76.41-170.667 170.667-170.667s170.667 76.41 170.667 170.667z"
+          ],
+          "attrs": [],
+          "isMulticolor": false,
+          "grid": 0,
+          "tags": [
+            "icon12-eye-open"
+          ],
+          "colorPermutations": {
+            "1161751": [
+              {
+                "f": 0
+              },
+              {
+                "f": 0
+              }
+            ]
+          }
+        },
+        {
+          "id": 6,
+          "paths": [
+            "M597.333 0h-170.667v256h170.667v-256z",
+            "M1024 426.667h-256v170.667h256v-170.667z",
+            "M597.333 768h-170.667v256h170.667v-256z",
+            "M256 426.667h-256v170.667h256v-170.667z"
+          ],
+          "attrs": [
+            {},
+            {},
+            {},
+            {}
+          ],
+          "isMulticolor": false,
+          "isMulticolor2": false,
+          "grid": 0,
+          "tags": [
+            "icon-crosshair-12px"
+          ],
+          "colorPermutations": {
+            "1161751": [
+              {},
+              {},
+              {},
+              {},
+              {}
+            ]
+          }
+        },
+        {
+          "id": 5,
+          "paths": [
+            "M0 0h170.667v1024h-170.667v-1024z",
+            "M853.333 256h-256v-256l-341.333 426.667 341.333 426.667v-256h256v-341.333z"
+          ],
+          "attrs": [
+            {
+              "opacity": 1
+            },
+            {
+              "opacity": 1
+            }
+          ],
+          "isMulticolor": false,
+          "width": 853,
+          "grid": 0,
+          "tags": [
+            "icon12-pane-collapse-left"
+          ],
+          "colorPermutations": {
+            "1161751": [
+              {},
+              {}
+            ]
+          }
+        },
+        {
+          "id": 4,
+          "paths": [
+            "M682.667 0h170.667v1024h-170.667v-1024z",
+            "M0 256h256v-256l341.333 426.667-341.333 426.667v-256h-256v-341.333z"
+          ],
+          "attrs": [
+            {
+              "opacity": 1
+            },
+            {
+              "opacity": 1
+            }
+          ],
+          "isMulticolor": false,
+          "width": 853,
+          "grid": 0,
+          "tags": [
+            "icon12-pane-collapse-right"
+          ],
+          "colorPermutations": {
+            "1161751": [
+              {},
+              {}
+            ]
+          }
+        },
+        {
+          "id": 3,
+          "paths": [
+            "M938.667 170.667h-341.333l-110.32-110.32c-33.2-33.2-98.667-60.347-145.68-60.347h-256c-47.073 0.136-85.197 38.26-85.333 85.32l-0 341.346c0.136-47.073 38.26-85.197 85.32-85.333l853.346-0c47.073 0.136 85.197 38.26 85.333 85.32l0-170.654c-0.136-47.073-38.26-85.197-85.32-85.333z",
+            "M85.333 426.667h853.333c47.128 0 85.333 38.205 85.333 85.333v426.667c0 47.128-38.205 85.333-85.333 85.333h-853.333c-47.128 0-85.333-38.205-85.333-85.333v-426.667c0-47.128 38.205-85.333 85.333-85.333z"
+          ],
+          "attrs": [],
+          "isMulticolor": false,
+          "grid": 0,
+          "tags": [
+            "icon12-folder"
+          ],
+          "colorPermutations": {
+            "1161751": [
+              {
+                "f": 0
+              },
+              {
+                "f": 0
+              }
+            ]
+          }
+        }
+      ],
+      "invisible": false,
+      "colorThemes": [
+        [
+          [
+            0,
+            0,
+            0,
+            1
+          ],
+          [
+            0,
+            161,
+            75,
+            1
+          ]
+        ]
+      ],
+      "colorThemeIdx": 0
+    }
+  ],
+  "preferences": {
+    "showGlyphs": true,
+    "showCodes": true,
+    "showQuickUse": true,
+    "showQuickUse2": true,
+    "showSVGs": true,
+    "fontPref": {
+      "prefix": "icon-",
+      "metadata": {
+        "fontFamily": "openmct-symbols-12px",
+        "majorVersion": 1,
+        "minorVersion": 0
+      },
+      "metrics": {
+        "emSize": 1024,
+        "baseline": 6.25,
+        "whitespace": 50
+      },
+      "embed": false
+    },
+    "imagePref": {
+      "prefix": "icon-",
+      "png": true,
+      "useClassSelector": true,
+      "color": 0,
+      "bgColor": 16777215
+    },
+    "historySize": 100,
+    "gridSize": 16
+  },
+  "uid": -1
+}

platform/commonUI/general/res/fonts/symbols/icomoon-project-openmct-symbols-16px.json

@@ -1,8 +1,8 @@
 {
   "metadata": {
     "name": "openmct-symbols-16px",
-    "lastOpened": 0,
-    "created": 1497475810461
+    "lastOpened": 1487197651675,
+    "created": 1487194069058
   },
   "iconSets": [
     {
@@ -573,28 +573,20 @@
           "tempChar": ""
         },
         {
-          "order": 124,
+          "order": 122,
           "id": 106,
           "name": "icon-expand",
           "prevSize": 24,
           "code": 921665,
           "tempChar": ""
         },
-        {
-          "order": 123,
-          "id": 107,
-          "name": "icon-list-view",
-          "prevSize": 24,
-          "code": 921666,
-          "tempChar": ""
-        },
         {
           "order": 37,
           "prevSize": 24,
           "name": "icon-activity",
           "id": 32,
           "code": 921856,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 36,
@@ -602,7 +594,7 @@
           "name": "icon-activity-mode",
           "id": 31,
           "code": 921857,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 52,
@@ -610,7 +602,7 @@
           "name": "icon-autoflow-tabular",
           "id": 47,
           "code": 921858,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 55,
@@ -618,7 +610,7 @@
           "name": "icon-clock",
           "id": 50,
           "code": 921859,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 58,
@@ -626,7 +618,7 @@
           "name": "icon-database",
           "id": 53,
           "code": 921860,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 57,
@@ -634,7 +626,7 @@
           "name": "icon-database-query",
           "id": 52,
           "code": 921861,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 17,
@@ -642,7 +634,7 @@
           "name": "icon-dataset",
           "id": 12,
           "code": 921862,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 22,
@@ -650,7 +642,7 @@
           "name": "icon-datatable",
           "id": 17,
           "code": 921863,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 59,
@@ -658,7 +650,7 @@
           "name": "icon-dictionary",
           "id": 54,
           "code": 921864,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 62,
@@ -666,7 +658,7 @@
           "name": "icon-folder",
           "id": 57,
           "code": 921865,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 66,
@@ -674,7 +666,7 @@
           "name": "icon-image",
           "id": 61,
           "code": 921872,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 68,
@@ -682,7 +674,7 @@
           "name": "icon-layout",
           "id": 63,
           "code": 921873,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 77,
@@ -690,7 +682,7 @@
           "name": "icon-object",
           "id": 72,
           "code": 921874,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 78,
@@ -698,7 +690,7 @@
           "name": "icon-object-unknown",
           "id": 73,
           "code": 921875,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 79,
@@ -706,7 +698,7 @@
           "name": "icon-packet",
           "id": 74,
           "code": 921876,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 80,
@@ -714,7 +706,7 @@
           "name": "icon-page",
           "id": 75,
           "code": 921877,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 114,
@@ -722,7 +714,7 @@
           "name": "icon-plot-overlay",
           "prevSize": 24,
           "code": 921878,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 113,
@@ -730,7 +722,7 @@
           "name": "icon-plot-stacked",
           "prevSize": 24,
           "code": 921879,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 10,
@@ -738,7 +730,7 @@
           "name": "icon-session",
           "id": 5,
           "code": 921880,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 24,
@@ -746,7 +738,7 @@
           "name": "icon-tabular",
           "id": 19,
           "code": 921881,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 7,
@@ -754,7 +746,7 @@
           "name": "icon-tabular-lad",
           "id": 2,
           "code": 921888,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 6,
@@ -762,7 +754,7 @@
           "name": "icon-tabular-lad-set",
           "id": 1,
           "code": 921889,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 8,
@@ -770,7 +762,7 @@
           "name": "icon-tabular-realtime",
           "id": 3,
           "code": 921890,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 23,
@@ -778,7 +770,7 @@
           "name": "icon-tabular-scrolling",
           "id": 18,
           "code": 921891,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 112,
@@ -786,7 +778,7 @@
           "name": "icon-telemetry",
           "id": 86,
           "code": 921892,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 90,
@@ -794,7 +786,7 @@
           "name": "icon-telemetry-panel",
           "id": 85,
           "code": 921893,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 93,
@@ -802,7 +794,7 @@
           "name": "icon-timeline",
           "id": 88,
           "code": 921894,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 116,
@@ -810,7 +802,7 @@
           "name": "icon-timer-v1.5",
           "prevSize": 24,
           "code": 921895,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 11,
@@ -818,7 +810,7 @@
           "name": "icon-topic",
           "id": 6,
           "code": 921896,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 115,
@@ -826,7 +818,7 @@
           "name": "icon-box-with-dashed-lines",
           "id": 29,
           "code": 921897,
-          "tempChar": ""
+          "tempChar": ""
         }
       ],
       "metadata": {
@@ -2371,51 +2363,6 @@
             ]
           }
         },
-        {
-          "id": 107,
-          "paths": [
-            "M0 64h1024v128h-1024v-128z",
-            "M0 320h1024v128h-1024v-128z",
-            "M0 576h1024v128h-1024v-128z",
-            "M0 832h1024v128h-1024v-128z"
-          ],
-          "attrs": [
-            {
-              "fill": "rgb(0, 161, 75)"
-            },
-            {
-              "fill": "rgb(0, 161, 75)"
-            },
-            {
-              "fill": "rgb(0, 161, 75)"
-            },
-            {
-              "fill": "rgb(0, 161, 75)"
-            }
-          ],
-          "isMulticolor": false,
-          "isMulticolor2": false,
-          "grid": 16,
-          "tags": [
-            "icon-list-view"
-          ],
-          "colorPermutations": {
-            "1161751207457516161751": [
-              {
-                "f": 1
-              },
-              {
-                "f": 1
-              },
-              {
-                "f": 1
-              },
-              {
-                "f": 1
-              }
-            ]
-          }
-        },
         {
           "paths": [
             "M576 64h-256l320 320h-290.256c-44.264-76.516-126.99-128-221.744-128h-128v512h128c94.754 0 177.48-51.484 221.744-128h290.256l-320 320h256l448-448-448-448z"
@@ -3290,4 +3237,4 @@
     "showGrid": true
   },
   "uid": -1
-}
+}

platform/commonUI/general/res/fonts/symbols/openmct-symbols-12px.svg

@@ -8,7 +8,8 @@
 <missing-glyph horiz-adv-x="1024" />
 <glyph unicode="&#x20;" horiz-adv-x="512" d="" />
 <glyph unicode="&#xe917;" glyph-name="icon12-eye-open" d="M512 852.667c-257.92 0-471.28-185.147-506.667-426 35.493-240.853 248.853-426 506.667-426s471.28 185.147 506.667 426c-35.387 240.853-248.747 426-506.667 426zM738.373 253.467c-131.048-109.517-321.699-109.517-452.747 0-53.328 44.749-90.832 105.477-106.96 173.2 16.101 67.707 53.565 128.435 106.853 173.2 131.048 109.517 321.699 109.517 452.747 0 53.368-44.733 90.909-105.464 107.067-173.2-16.128-67.723-53.632-128.451-106.96-173.2zM682.667 426.667c0-94.257-76.41-170.667-170.667-170.667s-170.667 76.41-170.667 170.667c0 94.257 76.41 170.667 170.667 170.667s170.667-76.41 170.667-170.667z" />
+<glyph unicode="&#xe930;" glyph-name="icon-crosshair-12px" d="M597.333 938.667h-170.667v-256h170.667v256zM1024 512h-256v-170.667h256v170.667zM597.333 170.667h-170.667v-256h170.667v256zM256 512h-256v-170.667h256v170.667z" />
 <glyph unicode="&#xe1007;" glyph-name="icon12-pane-collapse-left" horiz-adv-x="853" d="M0 938.667h170.667v-1024h-170.667v1024zM853.333 682.667h-256v256l-341.333-426.667 341.333-426.667v256h256v341.333z" />
 <glyph unicode="&#xe1008;" glyph-name="icon12-pane-collapse-right" horiz-adv-x="853" d="M682.667 938.667h170.667v-1024h-170.667v1024zM0 682.667h256v256l341.333-426.667-341.333-426.667v256h-256v341.333z" />
 <glyph unicode="&#xe1109;" glyph-name="icon12-folder" d="M938.667 768h-341.333l-110.32 110.32c-33.2 33.2-98.667 60.347-145.68 60.347h-256c-47.073-0.136-85.197-38.26-85.333-85.32v-341.346c0.136 47.073 38.26 85.197 85.32 85.333h853.346c47.073-0.136 85.197-38.26 85.333-85.32v170.654c-0.136 47.073-38.26 85.197-85.32 85.333zM85.333 512h853.333c47.128 0 85.333-38.205 85.333-85.333v-426.667c0-47.128-38.205-85.333-85.333-85.333h-853.333c-47.128 0-85.333 38.205-85.333 85.333v426.667c0 47.128 38.205 85.333 85.333 85.333z" />
-</font></defs></svg>
+</font></defs></svg>

platform/commonUI/general/res/fonts/symbols/openmct-symbols-16px.svg

@@ -78,7 +78,6 @@
 <glyph unicode="&#xe1039;" glyph-name="icon-brightness" d="M253.414 641.939l-155.172 116.384c-50.233-66.209-85.127-146.713-97.91-234.39l191.586-30.216c8.145 56.552 29.998 106.879 62.068 149.006zM191.98 402.283l-191.919-27.434c13.115-90.459 48.009-170.963 99.174-238.453l154.18 117.665c-31.476 41.347-53.309 91.675-61.231 146.504zM466.283 768.020l-27.434 191.919c-90.459-13.115-170.963-48.009-238.453-99.174l117.665-154.18c41.347 31.476 91.675 53.309 146.504 61.231zM822.323 861.758c-66.209 50.233-146.713 85.127-234.39 97.91l-30.216-191.586c56.552-8.145 106.879-29.998 149.006-62.068zM832.020 493.717l191.919 27.434c-13.115 90.459-48.009 170.963-99.174 238.453l-154.18-117.665c31.476-41.347 53.309-91.675 61.231-146.504zM201.677 34.242c66.209-50.233 146.713-85.127 234.39-97.91l30.216 191.586c-56.552 8.145-106.879 29.998-149.006 62.068zM770.586 254.061l155.131-116.343c50.233 66.209 85.127 146.713 97.91 234.39l-191.586 30.216c-8.125-56.564-29.966-106.906-62.028-149.049zM557.717 127.98l27.434-191.919c90.459 13.115 170.963 48.009 238.453 99.174l-117.665 154.18c-41.347-31.476-91.675-53.309-146.504-61.231zM770.586 448c0-142.813-115.773-258.586-258.586-258.586s-258.586 115.773-258.586 258.586c0 142.813 115.773 258.586 258.586 258.586s258.586-115.773 258.586-258.586z" />
 <glyph unicode="&#xe1040;" glyph-name="icon-contrast" d="M512 960c-282.78 0-512-229.24-512-512s229.22-512 512-512 512 229.24 512 512-229.22 512-512 512zM783.52 176.48c-69.111-69.481-164.785-112.481-270.502-112.481-0.358 0-0.716 0-1.074 0.001l0.055 768c212.070-0.010 383.982-171.929 383.982-384 0-106.034-42.977-202.031-112.462-271.52z" />
 <glyph unicode="&#xe1041;" glyph-name="icon-expand" d="M960 960c0 0 0 0 0 0h-320v-128h165.4l-210.6-210.8c-25-25-25-65.6 0-90.6 12.4-12.4 28.8-18.8 45.2-18.8s32.8 6.2 45.2 18.8l210.8 210.8v-165.4h128v384h-64zM896 154.6l-210.8 210.6c-25 25-65.6 25-90.6 0s-25-65.6 0-90.6l210.8-210.6h-165.4v-128h384v384h-128v-165.4zM218.6 832h165.4v128h-320c0 0 0 0 0 0h-64v-384h128v165.4l210.8-210.8c12.4-12.4 28.8-18.8 45.2-18.8s32.8 6.2 45.2 18.8c25 25 25 65.6 0 90.6l-210.6 210.8zM338.8 365.2l-210.8-210.6v165.4h-128v-384h384v128h-165.4l210.8 210.8c25 25 25 65.6 0 90.6-25.2 24.8-65.6 24.8-90.6-0.2z" />
-<glyph unicode="&#xe1042;" glyph-name="icon-list-view" d="M0 896h1024v-128h-1024v128zM0 640h1024v-128h-1024v128zM0 384h1024v-128h-1024v128zM0 128h1024v-128h-1024v128z" />
 <glyph unicode="&#xe1100;" glyph-name="icon-activity" d="M576 896h-256l320-320h-290.256c-44.264 76.516-126.99 128-221.744 128h-128v-512h128c94.754 0 177.48 51.484 221.744 128h290.256l-320-320h256l448 448-448 448z" />
 <glyph unicode="&#xe1101;" glyph-name="icon-activity-mode" d="M512 960c-214.866 0-398.786-132.372-474.744-320h90.744c56.86 0 107.938-24.724 143.094-64h240.906l-192 192h256l320-320-320-320h-256l192 192h-240.906c-35.156-39.276-86.234-64-143.094-64h-90.744c75.958-187.628 259.878-320 474.744-320 282.77 0 512 229.23 512 512s-229.23 512-512 512z" />
 <glyph unicode="&#xe1102;" glyph-name="icon-autoflow-tabular" d="M192 960c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h64v1024h-64zM384 960h256v-1024h-256v1024zM832 960h-64v-704h256v512c0 105.6-86.4 192-192 192z" />
@@ -109,4 +108,4 @@
 <glyph unicode="&#xe1127;" glyph-name="icon-timer-v1.5" horiz-adv-x="896" d="M576 813.4v82.58c0 35.346-28.654 64-64 64h-128c-35.346 0-64-28.654-64-64v-82.58c-185.040-55.080-320-226.48-320-429.42 0-247.42 200.58-448 448-448s448 200.58 448 448c0 202.96-135 374.4-320 429.42zM468 363.98l-263.76-211c-57.105 59.935-92.24 141.251-92.24 230.772 0 0.080 0 0.16 0 0.24 0 185.268 150.72 335.988 336 335.988 6.72 0 13.38-0.22 20-0.62v-355.38z" />
 <glyph unicode="&#xe1128;" glyph-name="icon-topic" d="M454.36 483.36l86.3 86.3c9.088 8.965 21.577 14.502 35.36 14.502s26.272-5.537 35.366-14.507l86.294-86.294c19.328-19.358 42.832-34.541 69.047-44.082l1.313 171.722-57.64 57.64c-34.407 34.33-81.9 55.558-134.35 55.558s-99.943-21.228-134.354-55.562l-86.296-86.297c-9.088-8.965-21.577-14.502-35.36-14.502s-26.272 5.537-35.366 14.507l-28.674 28.654v-172.14c19.045-7.022 41.040-11.084 63.984-11.084 52.463 0 99.966 21.239 134.379 55.587zM505.64 412.64l-86.3-86.3c-9.088-8.965-21.577-14.502-35.36-14.502s-26.272 5.537-35.366 14.507l-86.294 86.294c-2 2-4.2 4-6.36 6v-197.36c33.664-30.72 78.65-49.537 128.031-49.537 52.44 0 99.923 21.22 134.333 55.541l86.296 86.296c9.088 8.965 21.577 14.502 35.36 14.502s26.272-5.537 35.366-14.507l86.294-86.294c2-2 4.2-4 6.36-6v197.36c-33.664 30.72-78.65 49.537-128.031 49.537-52.44 0-99.923-21.22-134.333-55.541zM832 960h-128v-192h127.66l0.34-0.34v-639.32l-0.34-0.34h-127.66v-192h128c105.6 0 192 86.4 192 192v640c0 105.6-86.4 192-192 192zM320 128h-127.66l-0.34 0.34v639.32l0.34 0.34h127.66v192h-128c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h128v192z" />
 <glyph unicode="&#xe1129;" glyph-name="icon-box-with-dashed-lines" d="M0 576h128v-256h-128v256zM128 831.78l0.22 0.22h191.78v128h-192c-70.606-0.215-127.785-57.394-128-127.979v-192.021h128v191.78zM128 64.22v191.78h-128v-192c0.215-70.606 57.394-127.785 127.979-128h192.021v128h-191.78zM384 960h256v-128h-256v128zM896 64.22l-0.22-0.22h-191.78v-128h192c70.606 0.215 127.785 57.394 128 127.979v192.021h-128v-191.78zM896 960h-192v-128h191.78l0.22-0.22v-191.78h128v192c-0.215 70.606-57.394 127.785-127.979 128zM896 576h128v-256h-128v256zM384 64h256v-128h-256v128zM256 704h512v-512h-512v512z" />
-</font></defs></svg>
+</font></defs></svg>

platform/commonUI/general/res/sass/_constants.scss

@@ -99,7 +99,7 @@ $plotXBarH: 32px;
 $plotLegendH: 20px;
 $plotSwatchD: 8px;
 // 1: Top, 2: right, 3: bottom, 4: left
-$plotDisplayArea: ($plotLegendH + $interiorMargin, 0, $plotXBarH, $plotYBarW);
+$plotDisplayArea: (0, 0, $plotXBarH, $plotYBarW);
 /* min plot height is based on user testing to find minimum useful height */
 $plotMinH: 95px;
 /*************** Bubbles */

platform/commonUI/general/res/sass/_global.scss

@@ -40,7 +40,7 @@
     * Use https://icomoon.io/app with icomoon-project-openmct-symbols-12px.json
     * to generate font files
     */
-    font-family: 'symbolsfont 12px';
+    font-family: 'symbolsfont-12px';
     src: url($dirCommonRes + 'fonts/symbols/openmct-symbols-12px.eot');
     src: url($dirCommonRes + 'fonts/symbols/openmct-symbols-12px.eot?#iefix') format('embedded-opentype'),
     url($dirCommonRes + 'fonts/symbols/openmct-symbols-12px.woff') format('woff'),
@@ -81,6 +81,12 @@ input, textarea {
     letter-spacing: inherit;
 }
 
+input[type="text"],
+input[type="search"] {
+    vertical-align: baseline;
+    padding: $inputTextP;
+}
+
 h1, h2, h3 {
     letter-spacing: 0.04em;
     margin: 0;
@@ -234,6 +240,12 @@ a.disabled {
     color: rgba(#fff, 0.2);
 }
 
+.comma-list span {
+    &:not(:first-child) {
+        &:before { content: ', '; }
+    }
+}
+
 .test-stripes {
     @include bgDiagonalStripes();
 }

platform/commonUI/general/res/sass/_glyphs.scss

@@ -1,17 +1,10 @@
-@mixin glyphBefore($unicode, $family: 'symbolsfont') {
+@mixin glyph($unicode, $family: 'symbolsfont') {
     &:before {
         content: $unicode;
         font-family: $family;
     }
 }
 
-@mixin glyphAfter($unicode, $family: 'symbolsfont') {
-    &:after {
-        content: $unicode;
-        font-family: $family;
-    }
-}
-
 /************************** CHAR UNICODES */
 
 $glyph-icon-alert-rect: '\e900';
@@ -44,6 +37,7 @@ $glyph-icon-plus: '\e926';
 $glyph-icon-trash: '\e927';
 $glyph-icon-x: '\e928';
 $glyph-icon-brackets: '\e929';
+$glyph-icon-crosshair: '\e930';
 $glyph-icon-arrows-out: '\e1000';
 $glyph-icon-arrows-right-left: '\e1001';
 $glyph-icon-arrows-up-down: '\e1002';
@@ -85,7 +79,6 @@ $glyph-icon-x-in-circle: '\e1038';
 $glyph-icon-brightness: '\e1039';
 $glyph-icon-contrast: '\e1040';
 $glyph-icon-expand: '\e1041';
-$glyph-icon-list-view: '\e1042';
 $glyph-icon-activity: '\e1100';
 $glyph-icon-activity-mode: '\e1101';
 $glyph-icon-autoflow-tabular: '\e1102';
@@ -119,112 +112,112 @@ $glyph-icon-box-with-dashed-lines: '\e1129';
 
 /************************** 16 PX CLASSES */
 
-.icon-alert-rect {  @include glyphBefore($glyph-icon-alert-rect); }
-.icon-alert-triangle {  @include glyphBefore($glyph-icon-alert-triangle); }
-.icon-arrow-down {  @include glyphBefore($glyph-icon-arrow-down); }
-.icon-arrow-left {  @include glyphBefore($glyph-icon-arrow-left); }
-.icon-arrow-right {  @include glyphBefore($glyph-icon-arrow-right); }
-.icon-arrow-double-up {  @include glyphBefore($glyph-icon-arrow-double-up); }
-.icon-arrow-tall-up {  @include glyphBefore($glyph-icon-arrow-tall-up); }
-.icon-arrow-tall-down {  @include glyphBefore($glyph-icon-arrow-tall-down); }
-.icon-arrow-double-down {  @include glyphBefore($glyph-icon-arrow-double-down); }
-.icon-arrow-up {  @include glyphBefore($glyph-icon-arrow-up); }
-.icon-asterisk {  @include glyphBefore($glyph-icon-asterisk); }
-.icon-bell {  @include glyphBefore($glyph-icon-bell); }
-.icon-box {  @include glyphBefore($glyph-icon-box); }
-.icon-box-with-arrow {  @include glyphBefore($glyph-icon-box-with-arrow); }
-.icon-check {  @include glyphBefore($glyph-icon-check); }
-.icon-connectivity {  @include glyphBefore($glyph-icon-connectivity); }
-.icon-database-in-brackets {  @include glyphBefore($glyph-icon-database-in-brackets); }
-.icon-eye-open {  @include glyphBefore($glyph-icon-eye-open); }
-.icon-gear {  @include glyphBefore($glyph-icon-gear); }
-.icon-hourglass {  @include glyphBefore($glyph-icon-hourglass); }
-.icon-info {  @include glyphBefore($glyph-icon-info); }
-.icon-link {  @include glyphBefore($glyph-icon-link); }
-.icon-lock {  @include glyphBefore($glyph-icon-lock); }
-.icon-minus {  @include glyphBefore($glyph-icon-minus); }
-.icon-people {  @include glyphBefore($glyph-icon-people); }
-.icon-person {  @include glyphBefore($glyph-icon-person); }
-.icon-plus {  @include glyphBefore($glyph-icon-plus); }
-.icon-trash {  @include glyphBefore($glyph-icon-trash); }
-.icon-x {  @include glyphBefore($glyph-icon-x); }
-.icon-brackets {  @include glyphBefore($glyph-icon-brackets); }
-.icon-arrows-out {  @include glyphBefore($glyph-icon-arrows-out); }
-.icon-arrows-right-left {  @include glyphBefore($glyph-icon-arrows-right-left); }
-.icon-arrows-up-down {  @include glyphBefore($glyph-icon-arrows-up-down); }
-.icon-bullet {  @include glyphBefore($glyph-icon-bullet); }
-.icon-calendar {  @include glyphBefore($glyph-icon-calendar); }
-.icon-chain-links {  @include glyphBefore($glyph-icon-chain-links); }
-.icon-collapse-pane-left {  @include glyphBefore($glyph-icon-collapse-pane-left); }
-.icon-collapse-pane-right {  @include glyphBefore($glyph-icon-collapse-pane-right); }
-.icon-download {  @include glyphBefore($glyph-icon-download); }
-.icon-duplicate {  @include glyphBefore($glyph-icon-duplicate); }
-.icon-folder-new {  @include glyphBefore($glyph-icon-folder-new); }
-.icon-fullscreen-collapse {  @include glyphBefore($glyph-icon-fullscreen-collapse); }
-.icon-fullscreen-expand {  @include glyphBefore($glyph-icon-fullscreen-expand); }
-.icon-layers {  @include glyphBefore($glyph-icon-layers); }
-.icon-line-horz {  @include glyphBefore($glyph-icon-line-horz); }
-.icon-magnify {  @include glyphBefore($glyph-icon-magnify); }
-.icon-magnify-in {  @include glyphBefore($glyph-icon-magnify-in); }
-.icon-magnify-out {  @include glyphBefore($glyph-icon-magnify-out); }
-.icon-menu-hamburger {  @include glyphBefore($glyph-icon-menu-hamburger); }
-.icon-move {  @include glyphBefore($glyph-icon-move); }
-.icon-new-window {  @include glyphBefore($glyph-icon-new-window); }
-.icon-paint-bucket {  @include glyphBefore($glyph-icon-paint-bucket); }
-.icon-pause {  @include glyphBefore($glyph-icon-pause); }
-.icon-pencil {  @include glyphBefore($glyph-icon-pencil); }
-.icon-play {  @include glyphBefore($glyph-icon-play); }
-.icon-plot-resource {  @include glyphBefore($glyph-icon-plot-resource); }
-.icon-pointer-left {  @include glyphBefore($glyph-icon-pointer-left); }
-.icon-pointer-right {  @include glyphBefore($glyph-icon-pointer-right); }
-.icon-refresh {  @include glyphBefore($glyph-icon-refresh); }
-.icon-save {  @include glyphBefore($glyph-icon-save); }
-.icon-sine {  @include glyphBefore($glyph-icon-sine); }
-.icon-T {  @include glyphBefore($glyph-icon-T); }
-.icon-thumbs-strip {  @include glyphBefore($glyph-icon-thumbs-strip); }
-.icon-two-parts-both {  @include glyphBefore($glyph-icon-two-parts-both); }
-.icon-two-parts-one-only {  @include glyphBefore($glyph-icon-two-parts-one-only); }
-.icon-resync {  @include glyphBefore($glyph-icon-resync); }
-.icon-reset {  @include glyphBefore($glyph-icon-reset); }
-.icon-x-in-circle {  @include glyphBefore($glyph-icon-x-in-circle); }
-.icon-brightness {  @include glyphBefore($glyph-icon-brightness); }
-.icon-contrast {  @include glyphBefore($glyph-icon-contrast); }
-.icon-expand {  @include glyphBefore($glyph-icon-expand); }
-.icon-list-view {  @include glyphBefore($glyph-icon-list-view); }
-.icon-activity {  @include glyphBefore($glyph-icon-activity); }
-.icon-activity-mode {  @include glyphBefore($glyph-icon-activity-mode); }
-.icon-autoflow-tabular {  @include glyphBefore($glyph-icon-autoflow-tabular); }
-.icon-clock {  @include glyphBefore($glyph-icon-clock); }
-.icon-database {  @include glyphBefore($glyph-icon-database); }
-.icon-database-query {  @include glyphBefore($glyph-icon-database-query); }
-.icon-dataset {  @include glyphBefore($glyph-icon-dataset); }
-.icon-datatable {  @include glyphBefore($glyph-icon-datatable); }
-.icon-dictionary {  @include glyphBefore($glyph-icon-dictionary); }
-.icon-folder {  @include glyphBefore($glyph-icon-folder); }
-.icon-image {  @include glyphBefore($glyph-icon-image); }
-.icon-layout {  @include glyphBefore($glyph-icon-layout); }
-.icon-object {  @include glyphBefore($glyph-icon-object); }
-.icon-object-unknown {  @include glyphBefore($glyph-icon-object-unknown); }
-.icon-packet {  @include glyphBefore($glyph-icon-packet); }
-.icon-page {  @include glyphBefore($glyph-icon-page); }
-.icon-plot-overlay {  @include glyphBefore($glyph-icon-plot-overlay); }
-.icon-plot-stacked {  @include glyphBefore($glyph-icon-plot-stacked); }
-.icon-session {  @include glyphBefore($glyph-icon-session); }
-.icon-tabular {  @include glyphBefore($glyph-icon-tabular); }
-.icon-tabular-lad {  @include glyphBefore($glyph-icon-tabular-lad); }
-.icon-tabular-lad-set {  @include glyphBefore($glyph-icon-tabular-lad-set); }
-.icon-tabular-realtime {  @include glyphBefore($glyph-icon-tabular-realtime); }
-.icon-tabular-scrolling {  @include glyphBefore($glyph-icon-tabular-scrolling); }
-.icon-telemetry {  @include glyphBefore($glyph-icon-telemetry); }
-.icon-telemetry-panel {  @include glyphBefore($glyph-icon-telemetry-panel); }
-.icon-timeline {  @include glyphBefore($glyph-icon-timeline); }
-.icon-timer {  @include glyphBefore($glyph-icon-timer); }
-.icon-topic {  @include glyphBefore($glyph-icon-topic); }
-.icon-box-with-dashed-lines {  @include glyphBefore($glyph-icon-box-with-dashed-lines); }
+.icon-alert-rect {  @include glyph($glyph-icon-alert-rect); }
+.icon-alert-triangle {  @include glyph($glyph-icon-alert-triangle); }
+.icon-arrow-down {  @include glyph($glyph-icon-arrow-down); }
+.icon-arrow-left {  @include glyph($glyph-icon-arrow-left); }
+.icon-arrow-right {  @include glyph($glyph-icon-arrow-right); }
+.icon-arrow-double-up {  @include glyph($glyph-icon-arrow-double-up); }
+.icon-arrow-tall-up {  @include glyph($glyph-icon-arrow-tall-up); }
+.icon-arrow-tall-down {  @include glyph($glyph-icon-arrow-tall-down); }
+.icon-arrow-double-down {  @include glyph($glyph-icon-arrow-double-down); }
+.icon-arrow-up {  @include glyph($glyph-icon-arrow-up); }
+.icon-asterisk {  @include glyph($glyph-icon-asterisk); }
+.icon-bell {  @include glyph($glyph-icon-bell); }
+.icon-box {  @include glyph($glyph-icon-box); }
+.icon-box-with-arrow {  @include glyph($glyph-icon-box-with-arrow); }
+.icon-check {  @include glyph($glyph-icon-check); }
+.icon-connectivity {  @include glyph($glyph-icon-connectivity); }
+.icon-database-in-brackets {  @include glyph($glyph-icon-database-in-brackets); }
+.icon-eye-open {  @include glyph($glyph-icon-eye-open); }
+.icon-gear {  @include glyph($glyph-icon-gear); }
+.icon-hourglass {  @include glyph($glyph-icon-hourglass); }
+.icon-info {  @include glyph($glyph-icon-info); }
+.icon-link {  @include glyph($glyph-icon-link); }
+.icon-lock {  @include glyph($glyph-icon-lock); }
+.icon-minus {  @include glyph($glyph-icon-minus); }
+.icon-people {  @include glyph($glyph-icon-people); }
+.icon-person {  @include glyph($glyph-icon-person); }
+.icon-plus {  @include glyph($glyph-icon-plus); }
+.icon-trash {  @include glyph($glyph-icon-trash); }
+.icon-x {  @include glyph($glyph-icon-x); }
+.icon-brackets {  @include glyph($glyph-icon-brackets); }
+.icon-arrows-out {  @include glyph($glyph-icon-arrows-out); }
+.icon-arrows-right-left {  @include glyph($glyph-icon-arrows-right-left); }
+.icon-arrows-up-down {  @include glyph($glyph-icon-arrows-up-down); }
+.icon-bullet {  @include glyph($glyph-icon-bullet); }
+.icon-calendar {  @include glyph($glyph-icon-calendar); }
+.icon-chain-links {  @include glyph($glyph-icon-chain-links); }
+.icon-collapse-pane-left {  @include glyph($glyph-icon-collapse-pane-left); }
+.icon-collapse-pane-right {  @include glyph($glyph-icon-collapse-pane-right); }
+.icon-download {  @include glyph($glyph-icon-download); }
+.icon-duplicate {  @include glyph($glyph-icon-duplicate); }
+.icon-folder-new {  @include glyph($glyph-icon-folder-new); }
+.icon-fullscreen-collapse {  @include glyph($glyph-icon-fullscreen-collapse); }
+.icon-fullscreen-expand {  @include glyph($glyph-icon-fullscreen-expand); }
+.icon-layers {  @include glyph($glyph-icon-layers); }
+.icon-line-horz {  @include glyph($glyph-icon-line-horz); }
+.icon-magnify {  @include glyph($glyph-icon-magnify); }
+.icon-magnify-in {  @include glyph($glyph-icon-magnify-in); }
+.icon-magnify-out {  @include glyph($glyph-icon-magnify-out); }
+.icon-menu-hamburger {  @include glyph($glyph-icon-menu-hamburger); }
+.icon-move {  @include glyph($glyph-icon-move); }
+.icon-new-window {  @include glyph($glyph-icon-new-window); }
+.icon-paint-bucket {  @include glyph($glyph-icon-paint-bucket); }
+.icon-pause {  @include glyph($glyph-icon-pause); }
+.icon-pencil {  @include glyph($glyph-icon-pencil); }
+.icon-play {  @include glyph($glyph-icon-play); }
+.icon-plot-resource {  @include glyph($glyph-icon-plot-resource); }
+.icon-pointer-left {  @include glyph($glyph-icon-pointer-left); }
+.icon-pointer-right {  @include glyph($glyph-icon-pointer-right); }
+.icon-refresh {  @include glyph($glyph-icon-refresh); }
+.icon-save {  @include glyph($glyph-icon-save); }
+.icon-sine {  @include glyph($glyph-icon-sine); }
+.icon-T {  @include glyph($glyph-icon-T); }
+.icon-thumbs-strip {  @include glyph($glyph-icon-thumbs-strip); }
+.icon-two-parts-both {  @include glyph($glyph-icon-two-parts-both); }
+.icon-two-parts-one-only {  @include glyph($glyph-icon-two-parts-one-only); }
+.icon-resync {  @include glyph($glyph-icon-resync); }
+.icon-reset {  @include glyph($glyph-icon-reset); }
+.icon-x-in-circle {  @include glyph($glyph-icon-x-in-circle); }
+.icon-brightness {  @include glyph($glyph-icon-brightness); }
+.icon-contrast {  @include glyph($glyph-icon-contrast); }
+.icon-expand {  @include glyph($glyph-icon-expand); }
+.icon-activity {  @include glyph($glyph-icon-activity); }
+.icon-activity-mode {  @include glyph($glyph-icon-activity-mode); }
+.icon-autoflow-tabular {  @include glyph($glyph-icon-autoflow-tabular); }
+.icon-clock {  @include glyph($glyph-icon-clock); }
+.icon-database {  @include glyph($glyph-icon-database); }
+.icon-database-query {  @include glyph($glyph-icon-database-query); }
+.icon-dataset {  @include glyph($glyph-icon-dataset); }
+.icon-datatable {  @include glyph($glyph-icon-datatable); }
+.icon-dictionary {  @include glyph($glyph-icon-dictionary); }
+.icon-folder {  @include glyph($glyph-icon-folder); }
+.icon-image {  @include glyph($glyph-icon-image); }
+.icon-layout {  @include glyph($glyph-icon-layout); }
+.icon-object {  @include glyph($glyph-icon-object); }
+.icon-object-unknown {  @include glyph($glyph-icon-object-unknown); }
+.icon-packet {  @include glyph($glyph-icon-packet); }
+.icon-page {  @include glyph($glyph-icon-page); }
+.icon-plot-overlay {  @include glyph($glyph-icon-plot-overlay); }
+.icon-plot-stacked {  @include glyph($glyph-icon-plot-stacked); }
+.icon-session {  @include glyph($glyph-icon-session); }
+.icon-tabular {  @include glyph($glyph-icon-tabular); }
+.icon-tabular-lad {  @include glyph($glyph-icon-tabular-lad); }
+.icon-tabular-lad-set {  @include glyph($glyph-icon-tabular-lad-set); }
+.icon-tabular-realtime {  @include glyph($glyph-icon-tabular-realtime); }
+.icon-tabular-scrolling {  @include glyph($glyph-icon-tabular-scrolling); }
+.icon-telemetry {  @include glyph($glyph-icon-telemetry); }
+.icon-telemetry-panel {  @include glyph($glyph-icon-telemetry-panel); }
+.icon-timeline {  @include glyph($glyph-icon-timeline); }
+.icon-timer {  @include glyph($glyph-icon-timer); }
+.icon-topic {  @include glyph($glyph-icon-topic); }
+.icon-box-with-dashed-lines {  @include glyph($glyph-icon-box-with-dashed-lines); }
 
 /************************** 12 PX CLASSES */
 
-.icon-eye-open-12px {  @include glyphBefore($glyph-icon-eye-open,'symbolsfont-12px'); }
-.icon-collapse-pane-left-12px {  @include glyphBefore($glyph-icon-collapse-pane-left,'symbolsfont-12px'); }
-.icon-collapse-pane-right-12px {  @include glyphBefore($glyph-icon-collapse-pane-right,'symbolsfont-12px'); }
-.icon-folder-12px {  @include glyphBefore($glyph-icon-folder,'symbolsfont-12px'); }
+.icon-eye-open-12px {  @include glyph($glyph-icon-eye-open,'symbolsfont-12px'); }
+.icon-crosshair-12px {  @include glyph($glyph-icon-crosshair,'symbolsfont-12px'); }
+.icon-collapse-pane-left-12px {  @include glyph($glyph-icon-collapse-pane-left,'symbolsfont-12px'); }
+.icon-collapse-pane-right-12px {  @include glyph($glyph-icon-collapse-pane-right,'symbolsfont-12px'); }
+.icon-folder-12px {  @include glyph($glyph-icon-folder,'symbolsfont-12px'); }

platform/commonUI/general/res/sass/_icons.scss

@@ -44,6 +44,12 @@
     }
 }
 
+
+.t-alert-unsynced {
+    @extend .icon-alert-triangle;
+    color: $colorPausedBg;
+}
+
 .bar .ui-symbol {
 	display: inline-block;
 }
@@ -81,18 +87,5 @@
             @include transform(scale(0.3));
             z-index: 2;
         }
-
-/*        .t-item-icon-glyph {
-            &:after {
-                color: $colorIconLink;
-                content: '\e921'; //$glyph-icon-link;
-                height: auto; width: auto;
-                position: absolute;
-                left: 0; top: 0; right: 0; bottom: 20%;
-                @include transform-origin(bottom left);
-                @include transform(scale(0.3));
-                z-index: 2;
-            }
-        }*/
     }
 }

platform/commonUI/general/res/sass/_inspector.scss

@@ -53,6 +53,7 @@
     .l-inspector-part {
         box-sizing: border-box;
         padding-right: $interiorMargin;
+
         .tree .form {
             margin-left: $treeVCW + $interiorMarginLg;
         }
@@ -78,6 +79,7 @@
                 }
             }
             .form-row {
+                // To be replaced with .inspector-config, see below.
                 @include align-items(center);
                 border: none !important;
                 margin-bottom: 0 !important;
@@ -99,15 +101,12 @@
         position: relative;
     }
 
-    ul li {
-        margin-bottom: $interiorMarginLg;
-    }
-
     em.t-inspector-part-header {
         border-radius: $basicCr;
         background-color: $colorInspectorSectionHeaderBg;
         color: $colorInspectorSectionHeaderFg;
-        margin-bottom: $interiorMargin;
+        margin-top: $interiorMarginLg;
+        //margin-bottom: $interiorMargin;
         padding: floor($formTBPad * .75) $formLRPad;
         text-transform: uppercase;
     }
@@ -201,3 +200,102 @@ mct-representation:not(.s-status-editing) .l-inspect {
         pointer-events: inherit;
     }
 }
+
+// NEW COMPACT FORM, FOR USE IN INSPECTOR
+// ul > li > label, control
+// Make a new UL for each form section
+// Allow control-first, controls-below
+
+.l-inspect .tree ul li,
+.inspector-config ul li {
+    padding: 2px 0;
+}
+
+
+.inspector-config {
+    $labelW: 40%;
+    $minW: $labelW;
+    ul {
+        margin-bottom: $interiorMarginLg;
+        li {
+            @include display(flex);
+            @include flex-wrap(wrap);
+            @include align-items(center);
+            label,
+            .control {
+                @include display(flex);
+                min-width: $minW;
+            }
+            label {
+                line-height: inherit;
+                padding: $interiorMarginSm 0;
+                width: $labelW;
+            }
+            .control {
+                @include flex-grow(1);
+            }
+
+            &:not(.section-header) {
+                &:not(.connects-to-previous) {
+                    //border-top: 1px solid $colorFormLines;
+                }
+            }
+
+            &.connects-to-previous {
+                padding-top: 0 !important;
+            }
+
+            &.section-header {
+                margin-top: $interiorMarginLg;
+                border-top: 1px solid $colorFormLines;
+            }
+
+            &.controls-first {
+                .control {
+                    @include flex-grow(0);
+                    margin-right: $interiorMargin;
+                    min-width: 0;
+                    order: 1;
+                    width: auto;
+                }
+                label {
+                    @include flex-grow(1);
+                    order: 2;
+                    width: auto;
+                }
+            }
+            &.controls-under {
+                display: block;
+                .control, label {
+                    display: block;
+                    width: auto;
+                }
+
+                ul li {
+                    border-top: none !important;
+                    padding: 0;
+                }
+            }
+        }
+    }
+
+    .form-error {
+        // Block element that visually flags an error and contains a message
+        background-color: $colorFormFieldErrorBg;
+        color: $colorFormFieldErrorFg;
+        border-radius: $basicCr;
+        display: block;
+        padding: 1px 6px;
+        &:before {
+            content: $glyph-icon-alert-triangle;
+            display: inline;
+            font-family: symbolsfont;
+            margin-right: $interiorMarginSm;
+        }
+    }
+}
+
+.tree .inspector-config {
+    margin-left: $treeVCW + $interiorMarginLg;
+}
+

platform/commonUI/general/res/sass/_main.scss

@@ -58,6 +58,7 @@
 @import "search/search";
 @import "mobile/search/search";
 @import "overlay/overlay";
+@import "mobile/overlay/overlay";
 @import "tree/tree";
 @import "object-label";
 @import "mobile/tree";
@@ -70,6 +71,7 @@
 @import "fixed-position";
 @import "lists/tabular";
 @import "plots/plots-main";
+@import "plots/legend";
 @import "iframe";
 @import "views";
 @import "items/item";

platform/commonUI/general/res/sass/_mixins.scss

@@ -285,14 +285,13 @@
 
 @mixin containerBase($bg: $colorBodyBg, $fg: $colorBodyFg) {
 	background-color: $bg;
-	//border-radius: $controlCr;
+	border-radius: $controlCr;
 	box-sizing: border-box;
 	color: $fg;
 }
 
 @mixin btnBase($bg: $colorBtnBg, $bgHov: $colorBtnBgHov, $fg: $colorBtnFg, $fgHov: $colorBtnFgHov, $ic: $colorBtnIcon, $icHov: $colorBtnIconHov) {
 	@include user-select(none);
-    border-radius: $controlCr;
     color: $fg;
 	.icon,
     &:before {

platform/commonUI/general/res/sass/_views.scss

@@ -5,6 +5,7 @@
 }
 
 .l-view-section {
+    //@include test(orange, 0.1);
 	@include absPosDefault(0);
 	h2 {
 		color: #fff;

platform/commonUI/general/res/sass/controls/_color-palette.scss

@@ -19,11 +19,22 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+
+.s-palette-item {
+    $colorSelectedColor: #fff;
+    @include txtShdwSubtle(0.8);
+    @include trans-prop-nice-fade(0.25s);
+    border: 1px solid transparent;
+    &:hover {
+        @include trans-prop-nice-fade(0);
+        border-color: $colorSelectedColor !important;
+    }
+}
+
 .l-color-palette {
 	$d: 16px;
 	$colorsPerRow: 10;
 	$m: 1;
-	$colorSelectedColor: #fff;
 
 	box-sizing: border-box;
 	padding: $interiorMargin !important;
@@ -35,10 +46,6 @@
 
 		.l-palette-item {
 			box-sizing: border-box;
-			@include txtShdwSubtle(0.8);
-			@include trans-prop-nice-fade(0.25s);
-			border: 1px solid transparent;
-			color: $colorSelectedColor;
 			display: block;
 			float: left;
 			height: $d; width: $d;
@@ -51,13 +58,6 @@
             }
 		}
 
-		.s-palette-item {
-			&:hover {
-				@include trans-prop-nice-fade(0);
-				border-color: $colorSelectedColor !important;
-			}
-		}
-
 		.l-palette-item-label {
 			margin-left: $interiorMargin;
 		}
@@ -69,10 +69,21 @@
 			}
 		}
 	}
-
-
-
-
-
-
+}
+
+.l-inline-color-palette {
+    // Is an <li>
+    .l-palette-row {
+        @include display(flex);
+        width: 100%;
+        .l-palette-item {
+            @include display(flex);
+            @include flex(1 0 auto);
+            margin: 1px;
+            &:before {
+                content: '';
+                padding-top: 75%;
+            }
+        }
+    }
 }

platform/commonUI/general/res/sass/controls/_controls.scss

@@ -139,6 +139,26 @@
     }
 }
 
+/******************************************************** VIEW CONTROLS */
+// Expand/collapse > and v arrows, used in tree and plot legend
+// Moved this over from a tree-only context 5/18/17
+
+.view-control {
+    @extend .ui-symbol;
+    cursor: pointer;
+    height: 1em; width: 1em;
+    line-height: inherit;
+    &:before {
+        position: absolute;
+        @include trans-prop-nice(transform, 100ms);
+        content: $glyph-icon-arrow-right;
+        @include transform-origin(center);
+    }
+    &.expanded:before {
+        @include transform(rotate(90deg));
+    }
+}
+
 /******************************************************** CUSTOM CHECKBOXES */
 label.checkbox.custom,
 label.radio.custom {
@@ -224,28 +244,18 @@ textarea {
 
 /******************************************************** INPUTS */
 input[type="text"],
-input[type="search"],
-input[type="number"] {
+input[type="search"] {
     @include nice-input();
-    vertical-align: baseline;
-    padding: $inputTextP;
     &.numeric {
         text-align: right;
     }
 }
 
-.l-input-sm {
-    input[type="text"],
-    input[type="search"],
-    input[type="number"] {
-        width: 50px !important;
-    }
-}
-
 .l-input-lg input[type="text"],
 input[type="text"].lg {  width: 100% !important; }
 .l-input-med input[type="text"],
 input[type="text"].med { width: 200px !important; }
+.l-input-sm input[type="text"],
 input[type="text"].sm {  width: 50px !important; }
 .l-numeric input[type="text"],
 input[type="text"].numeric { text-align: right; }
@@ -661,8 +671,7 @@ textarea {
     }
 }
 
-.view-switcher,
-.t-btn-view-large {
+.view-switcher {
     @include trans-prop-nice-fade($controlFadeMs);
 }
 

platform/commonUI/general/res/sass/controls/_menus.scss

@@ -249,7 +249,7 @@
 .context-menu-holder,
 .menu-holder {
 	position: absolute;
-	z-index: 120;
+	z-index: 70;
 	.context-menu-wrapper {
 		position: absolute;
 		height: 100%;
@@ -273,7 +273,7 @@
 
 .btn-bar.right .menu,
 .menus-to-left .menu {
-    z-index: 79;
+        z-index: 79;
 	left: auto;
 	right: 0;
 	width: auto;

platform/commonUI/general/res/sass/controls/_messages.scss

@@ -311,24 +311,6 @@ body.desktop .t-message-single {
     }
 }
 
-@include phonePortrait {
-    .t-message-single {
-        .l-message {
-            @include flex-direction(column);
-            .message-contents { margin-left: 0; }
-        }
-        .type-icon.message-type {
-            margin-bottom: $interiorMarginLg;
-            width: 100%;
-            text-align: center;
-        }
-
-        .bottom-bar {
-            text-align: center !important;
-        }
-    }
-}
-
 // Messages in list
 .t-message-list {
     @include messageBlock(32px);
@@ -368,6 +350,7 @@ body.desktop .t-message-list {
 .s-unsynced {
     $c: $colorPausedBg;
     border: 1px solid $c;
+    @include animTo($animName: pulsePaused, $propName: border-color, $propValStart: rgba($c, 0.8), $propValEnd: rgba($c, 0.5), $dur: $animPausedPulseDur, $dir: alternate, $count: infinite);
 }
 
 .s-status-timeconductor-unsynced {
@@ -380,10 +363,6 @@ body.desktop .t-message-list {
     .object-header {
         .t-object-alert {
             display: inline;
-            &.t-alert-unsynced {
-                @extend .icon-alert-triangle;
-                color: $colorPausedBg;
-            }
         }
     }
 }

platform/commonUI/general/res/sass/features/_time-display.scss

@@ -1,36 +1,33 @@
 .l-time-display {
 	$transTime: 200ms;
-    $controlSize: 14px;
-    $control1ControlW: $controlSize + $interiorMargin;
-    $control2ControlW: $control1ControlW * 2;
     line-height: 140%;
 	&:hover {
-		.l-btn.controls {
+		.l-btn.control {
 			opacity: 1;
 		}
 	}
 
 	&.l-timer {
+        .l-value:before,
+        .control {
+            font-size: 0.8em;
+        }
+
         .l-value:before {
             // Direction +/- element
-            font-size: $controlSize;
             margin-right: $interiorMarginSm;
-
         }
-        .controls {
+        .control {
             @include trans-prop-nice((width, opacity), $transTime);
-            font-size: $controlSize;
             line-height: inherit;
             margin-right: 0;
             opacity: 0;
             width: 0;
-            .flex-elem {
-                margin-right: $interiorMargin;
-            }
         }
-		&:hover .controls {
+		&:hover .control {
+            margin-right: $interiorMargin;
             opacity: 1;
-			width: $control2ControlW;
+			width: 1em;
 		}
 	}
 
@@ -38,34 +35,4 @@
         color: pullForward($colorBodyFg, 50%);
         font-weight: 400;
     }
-
-    // States
-    &.s-state-stopped,
-    &.s-state-paused {
-        .l-value {
-            opacity: 0.4;
-        }
-    }
-
-    &.s-state-started {
-        .l-value {
-            opacity: 1;
-        }
-    }
-
-    &.s-state-stopped {
-        // Hide Stop button, 1controlW
-        .t-btn-stop {
-            display: none;
-        }
-        &:hover .controls {  width: $control1ControlW;  }
-
-    }
-
-    &.s-state-paused {
-        // Paused, do something visual
-        .l-value {
-            &:before { @extend .pulse; }
-        }
-    }
 }

platform/commonUI/general/res/sass/forms/_validation.scss

@@ -19,40 +19,44 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-@mixin labelValidate($sym, $c) {
-    > .label {
-        @include glyphAfter($sym);
-        &:after {
-            color: $c;
-            margin-left: $interiorMargin;
-        }
-    }
-}
-
-
 mct-form.validates {
     .form-row.validates {
         > .label {
             padding-right: $reqSymbolM; // Keep room for validation element
-            &:after {
+            &:before {
+                position: absolute;
+                right: $interiorMargin;
                 font-size: $reqSymbolFontSize;
+                height: 100%;
+                line-height: 200%;
+
             }
         }
         &.invalid,
-        &.invalid.req { @include labelValidate($glyph-icon-x, $colorFormInvalid); }
-
+        &.invalid.req {
+            > .label {
+                @extend .icon-x;
+                &:before {
+                    color: $colorFormInvalid;
+                }
+            }
+        }
         &.valid,
-        &.valid.req { @include labelValidate($glyph-icon-check, $colorFormValid); }
-
-        &.req { @include labelValidate($glyph-icon-asterisk, $colorFormRequired); }
-    }
-}
-
-body.desktop .form-row.validates > .label {
-    &:after {
-        position: absolute;
-        right: $interiorMargin;
-        height: 100%;
-        line-height: 200%;
+        &.valid.req {
+            > .label {
+                @extend .icon-check;
+                &:before {
+                    color: $colorFormValid;
+                }
+            }
+        }
+        &.req {
+            > .label {
+                @extend .icon-asterisk;
+                &:before {
+                    color: $colorFormRequired;
+                }
+            }
+        }
     }
 }

platform/commonUI/general/res/sass/items/_item.scss

@@ -132,33 +132,5 @@
 	        }
         }
     }
-}
 
-table.list-view {
-    $s: 1.2em;
-    width: 100%;
-    th, td {
-        cursor: pointer;
-    }
-    tr:hover td {
-        background-color: $colorItemBg;
-        color: $colorItemFg;
-    }
-    td {
-        $p: $interiorMargin;
-        @include ellipsize;
-        color: $colorItemFg;
-        font-size: 1em;
-        line-height: $s;
-        max-width: 0;
-        padding-top: $p;
-        padding-bottom: $p;
-    }
-    .t-item-icon {
-        font-size: $s;
-        margin-right: $interiorMargin;
-    }
-    .t-title-label {
-        @include ellipsize; // Yep, need it here too as well as the <td>
-    }
 }

platform/commonUI/general/res/sass/mobile/_layout.scss

@@ -92,7 +92,7 @@ body.mobile {
     }
 
     .object-browse-bar {
-        &.t-primary { margin-left: 45px; }
+        margin-left: 45px;
         .context-available {
             opacity: 1 !important;
         }

platform/commonUI/general/res/sass/mobile/_tree.scss

@@ -34,18 +34,7 @@ body.touch {
 		line-height: $mobileTreeItemH !important;
 		.view-control {
             font-size: 1em;
-            margin-right: $interiorMargin;
-            width: ceil($mobileTreeItemH * 0.75);
-            &.has-children {
-                &:before {
-                    content: $glyph-icon-arrow-down;
-                    left: 50%;
-                    @include transform(translateX(-50%) rotate(-90deg));
-                }
-                &.expanded:before {
-                    @include transform(translateX(-50%) rotate(0deg));
-                }
-            }
+            width: ceil($mobileTreeItemH * 0.5);
 		}
 		.t-object-label {
 			line-height: inherit;

platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss

@@ -0,0 +1,74 @@
+@include phoneandtablet {
+    .overlay {
+        .clk-icon.close {
+            top: $mobileOverlayMargin; right: $mobileOverlayMargin;
+        }
+
+        > .holder {
+            height: 90%; width: 90%;
+
+            > .contents {
+                top: $mobileOverlayMargin;
+                right: $mobileOverlayMargin;
+                bottom: $mobileOverlayMargin;
+                left: $mobileOverlayMargin;
+
+                .top-bar {
+                    > .title {
+                        margin-right: 1.2em;
+                    }
+                }
+            }
+        }
+    }
+}
+
+@include phone {
+    .overlay > .holder {
+        $m: 0;
+        border-radius: $m;
+        top: $m;
+        right: $m;
+        bottom: $m;
+        left: $m;
+        height: auto; width: auto;
+        min-width: 200px; min-height: 200px;
+        max-height: 100%; max-width: 100%;
+        overflow: auto;
+        @include transform(none);
+
+        .editor .form .form-row.l-flex-row  {
+            // Display elements in a columnar view
+            @include flex-direction(column);
+            > .flex-elem {
+                &:not(:first-child) {
+                    margin-top: $interiorMargin;
+                }
+                &.label {
+                    width: 100%;
+                }
+                &.controls {
+                    overflow: auto;
+                }
+            }
+
+            &.validates > .label:before {
+                position: relative;
+                right: auto;
+                line-height: inherit;
+                margin-right: $interiorMargin;
+            }
+        }
+    }
+    .t-dialog-sm .overlay > .holder {
+        height: auto; max-height: 100%;
+    }
+}
+
+@include phonePortrait {
+    .overlay > .holder {
+        .contents .bottom-bar {
+            text-align: center;
+        }
+    }
+}

platform/commonUI/general/res/sass/overlay/_overlay.scss

@@ -21,16 +21,11 @@
  *****************************************************************************/
 
 .overlay {
+    font-size: 90%;
     &.delayEntry100ms {
         @include keyframes(fadeInFromNone) {
-            0% {
-                display: none;
-                opacity: 0;
-            }
-            100% {
-                display: block;
-                opacity: 1;
-            }
+            0% { display: none; opacity: 0; }
+            100% { display: block; opacity: 1; }
         }
         @include animation-delay($delayEntryMs);
         @include animation(fadeInFromNone $durEntryMs ease-in);
@@ -40,21 +35,29 @@
         z-index: 100;
     }
     .close {
-        $d: $interiorMargin;
-        opacity: 0.3;
+        font-size: 0.8rem;
         position: absolute;
-        top: $d;
-        right: $d;
+        top: $interiorMarginLg;
+        right: $interiorMarginLg;
         bottom: auto;
         left: auto;
-        &:hover {
-            opacity: 0.6;
-        }
+        z-index: 100;
     }
-
-    > .abs.outer-holder {
-        z-index: 102;
-        > .abs.inner-holder {
+    > .holder {
+        @include containerSubtle($colorOvrBg, $colorOvrFg);
+        border-radius: $basicCr * 3;
+        color: $colorOvrFg;
+        top: 50%;
+        right: auto;
+        bottom: auto;
+        left: 50%;
+        @include transform(translateX(-50%) translateY(-50%));
+        height: 70%;
+        width: 50%;
+        min-height: 300px;
+        min-width: 600px;
+        z-index: 101;
+        > .contents {
             $m: $overlayMargin;
             top: $m;
             right: $m;
@@ -62,176 +65,78 @@
             left: $m;
         }
     }
+    .title {
+        @include ellipsize();
+        font-size: 1.2em;
+        line-height: 120%;
+        margin-bottom: $interiorMargin;
+    }
+
+    .hint, .field-hints { color: $colorFieldHintOverlay !important;  }
+
+    .abs.top-bar {
+        height: $ovrTopBarH;
+    }
+
+    .abs.editor,
+    .abs.message-body {
+        top: $ovrTopBarH + $interiorMarginLg;
+        bottom: $ovrFooterH + $interiorMarginLg;
+        left: 0;
+        right: 0;
+        overflow: auto;
+        .field.l-input-med {
+            input[type='text'] {
+                width: 100%;
+            }
+        }
+    }
 
     .bottom-bar {
         text-align: right;
         .s-button {
+            $bg: $colorOvrBtnBg;
+            &:not(.major) {
+                @include btnSubtle($bg, pullForward($bg, 10%), $colorOvrBtnFg, $colorOvrBtnFg);
+            }
             font-size: 95%;
             height: $ovrFooterH;
             line-height: $ovrFooterH;
-            margin-bottom: $interiorMarginSm;
+            margin-left: $interiorMargin;
             padding: 0 $interiorMargin * 3;
-            &:not(:last-child) {
-                margin-right: $interiorMargin;
+            &:first-child {
+                margin-left: 0;
             }
         }
+
     }
 
-    // Dialog boxes, size constrained and centered in desktop/tablet
-    &.l-dialog {
-        .s-button {
-            &:not(.major) {
-                @include btnSubtle($bg: $colorOvrBtnBg, $bgHov: pullForward($colorOvrBtnBg, 10%), $fg: $colorOvrBtnFg, $fgHov: $colorOvrBtnFg, $ic: $colorOvrBtnFg, $icHov: $colorOvrBtnFg);
-            }
-        }
-
-        > .abs.outer-holder {
-            @include desktopandtablet {
-                $max: 1280px;
-                @include transform(translateX(-50%) translateY(-50%));
-                border-radius: $overlayCr;
-                top: 50%; right: auto; bottom: auto; left: 50%;
-                width: 70%; height: 70%;
-                min-width: 520px;
-                max-width: $max; max-height: $max;
-            }
-            @include phone {
-                overflow: auto;
-
-                .editor .form .form-row.l-flex-row  {
-                    // Display elements in a columnar view
-                    @include flex-direction(column);
-                    > .flex-elem {
-                        &:not(:first-child) {
-                            margin-top: $interiorMargin;
-                        }
-                        &.label {
-                            width: 100%;
-                        }
-                        &.controls {
-                            overflow: auto;
-                        }
-                    }
-
-                    &.validates > .label:before {
-                        position: relative;
-                        right: auto;
-                        line-height: inherit;
-                        margin-right: $interiorMargin;
-                    }
-                }
-            }
-
-            @include containerSubtle($colorOvrBg, $colorOvrFg);
-        }
-
-        .title {
-            @include ellipsize();
-            font-size: 1.2em;
-            line-height: 120%;
-            margin-bottom: $interiorMargin;
-        }
-
-        .hint, .field-hints {
-            color: $colorFieldHintOverlay !important;
-        }
-
-        .abs.top-bar {
-            height: $ovrTopBarH;
-        }
-
-        .abs.bottom-bar {
-            top: auto;
-            right: 0;
-            bottom: 0;
-            left: 0;
-            overflow: visible;
-            height: $ovrFooterH;
-        }
-
-        .abs.editor,
-        .abs.message-body {
-            top: $ovrTopBarH + $interiorMarginLg;
-            bottom: $ovrFooterH + $interiorMarginLg;
-            left: 0;
-            right: 0;
-            overflow: auto;
-            .field.l-input-med {
-                input[type='text'] {
-                    width: 100%;
-                }
-            }
-        }
-
-        .l-progress-bar {
-            $h: $progressBarHOverlay;
-            display: block;
-            height: $h;
-            line-height: $h;
-            margin: .5em 0;
-            width: 100%;
-        }
-
-        .select {
-            box-shadow: $shdwBtnsOverlay;
-        }
+    .abs.bottom-bar {
+        top: auto;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        overflow: visible;
+        height: $ovrFooterH;
     }
 
-    // Large view overlays for mobile and desktop
-    &.l-large-view {
-        > .abs.outer-holder {
-            @include keyframes(overlayIn) {
-                from {
-                    opacity: 0;
-                    transform: scale(0, 0);
-                }
-                to {
-                    opacity: 1;
-                    transform: scale(1.0, 1.0);
-                }
-            }
-
-            @include animToParams(overlayIn, $dur: $durLargeViewExpand, $delay: 0);
-            background: $colorBodyBg;
-
-            .abs.inner-holder {
-                opacity: 0;
-                @include keyframes(contentsIn) {
-                    from { opacity: 0; }
-                    to { opacity: 1; }
-                }
-                @include animToParams(contentsIn, $dur: 50ms, $delay: $durLargeViewExpand * 1.25);
-            }
-
-            .t-btn-view-large {
-                display: none;
-            }
-            z-index: 101;
-        }
-    }
-}
-
-body.desktop {
-    .overlay {
-        > .abs.outer-holder {
-            border-radius: $overlayCr;
-        }
-
-        &.l-large-view {
-            > .abs.outer-holder {
-                width: 90%;
-                height: 90%;
-                top: 5%;
-                left: 5%;
-                @include boxShdwLarge();
-            }
-        }
-    }
-
-    .t-dialog-sm .overlay > .outer-holder {
-        // Used for blocker and in-progress dialogs, modal alerts, etc.
-        $h: 225px;
-        max-height: $h;
+    .l-progress-bar {
+        $h: $progressBarHOverlay;
+        display: block;
         height: $h;
+        line-height: $h;
+        margin: .5em 0;
+        width: 100%;
+    }
+
+    .select {
+        box-shadow: $shdwBtnsOverlay;
     }
 }
+
+.t-dialog-sm .overlay > .holder {
+    // Used for blocker and in-progress dialogs, modal alerts, etc.
+    $h: 225px;
+    min-height: $h;
+    height: $h;
+}

platform/commonUI/general/res/sass/plots/_legend.scss

@@ -0,0 +1,208 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2017, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT 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 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.
+ *****************************************************************************/
+.gl-plot {
+    .gl-plot-legend {
+        min-height: $plotLegendH;
+
+        .view-control {
+            font-size: 1em;
+            margin-right: $interiorMarginSm;
+        }
+
+        table {
+            table-layout: fixed;
+            tr {
+                display: table-row;
+            }
+            th,
+            td {
+                @include ellipsize(); // Note: this won't work if table-layout uses anything other than fixed.
+                display: table-cell;
+                padding: 1px 3px; // Tighter than standard tabular padding
+            }
+        }
+
+        &.hover-on-plot {
+            // User is hovering over the plot to get a value at a point
+            .hover-value-enabled {
+                background-color: $legendHoverValueBg;
+                border-radius: $smallCr;
+                padding: 0 $interiorMarginSm;
+                &:before {
+                    opacity: 0.5;
+                }
+                &.cursor-hover,
+                .value-to-display-nearestTimestamp,
+                .value-to-display-nearestValue
+                {
+                    @extend .icon-crosshair-12px;
+                    &:before {
+                        font-size: 9px;
+                    }
+                }
+
+                &.value-to-display-min:before {
+                    content: 'MIN ';
+                }
+                &.value-to-display-max:before {
+                    content: 'MAX ';
+                }
+            }
+        }
+    }
+
+    &.plot-legend-collapsed .plot-wrapper-expanded-legend { display: none; }
+    &.plot-legend-expanded .plot-wrapper-collapsed-legend { display: none; }
+
+    /***************** GENERAL STYLES, ALL STATES */
+    .plot-legend-item {
+        // General styles for legend items, both expanded and collapsed legend states
+        .plot-series-color-swatch {
+            border-radius: $smallCr;
+            border: 1px solid $colorBodyBg;
+            display: inline-block;
+            height: $plotSwatchD;
+            width: $plotSwatchD;
+        }
+        .plot-series-name {
+            display: inline;
+        }
+
+        .plot-series-value {
+            @include ellipsize();
+        }
+    }
+
+    /***************** GENERAL STYLES, COLLAPSED */
+    &.plot-legend-collapsed {
+        // .plot-legend-item is a span of spans.
+        &.plot-legend-top .gl-plot-legend { margin-bottom: $interiorMargin; }
+        &.plot-legend-bottom .gl-plot-legend { margin-top: $interiorMargin; }
+        &.plot-legend-right .gl-plot-legend { margin-left: $interiorMargin; }
+        &.plot-legend-left .gl-plot-legend { margin-right: $interiorMargin; }
+
+        .plot-legend-item {
+            display: flex;
+            align-items: center;
+            &:not(:first-child) {
+                margin-left: $interiorMarginLg;
+            }
+            .plot-series-swatch-and-name,
+            .plot-series-value {
+                @include ellipsize();
+                flex: 1 1 auto;
+            }
+
+            .plot-series-swatch-and-name {
+                margin-right: $interiorMarginSm;
+            }
+
+            .plot-series-value {
+                text-align: left;
+                width: 170px;
+            }
+        }
+    }
+
+    /***************** GENERAL STYLES, EXPANDED */
+    &.plot-legend-expanded {
+        .gl-plot-legend {
+            max-height: 70%;
+        }
+
+        .plot-wrapper-expanded-legend {
+            overflow-y: auto;
+        }
+
+        &.plot-legend-top .gl-plot-legend {
+            margin-bottom: $interiorMargin;
+        }
+        &.plot-legend-bottom .gl-plot-legend {
+            margin-top: $interiorMargin;
+        }
+    }
+
+    /***************** TOP OR BOTTOM */
+    &.plot-legend-top,
+    &.plot-legend-bottom {
+        // General styles when legend is on the top or bottom
+        @extend .l-flex-col;
+        &.plot-legend-collapsed {
+            // COLLAPSED ON TOP OR BOTTOM
+            .plot-wrapper-collapsed-legend {
+                display: flex;
+                flex: 1 1 auto;
+                overflow: hidden;
+            }
+        }
+    }
+
+    /***************** EITHER SIDE */
+    &.plot-legend-left,
+    &.plot-legend-right {
+        @extend .l-flex-row;
+        // If the legend is expanded, use flex-col instead so that the legend gets the width it needs.
+        &.plot-legend-expanded {
+            // EXPANDED, ON EITHER SIDE
+            @extend .l-flex-col;
+        }
+
+        &.plot-legend-collapsed {
+            // COLLAPSED, ON EITHER SIDE
+            .gl-plot-legend {
+                max-height: inherit;
+                width: 25%;
+            }
+            .plot-wrapper-collapsed-legend {
+                display: flex;
+                flex-flow: column nowrap;
+                min-width: 0;
+                flex: 1 1 auto;
+                overflow-y: auto;
+            }
+            .plot-legend-item {
+                margin-bottom: 1px;
+                margin-left: 0;
+                flex-wrap: wrap;
+                .plot-series-swatch-and-name {
+                    flex: 0 1 auto;
+                    min-width: 20%;
+                }
+                .plot-series-value {
+                    flex: 0 1 auto;
+                    width: auto;
+                }
+            }
+        }
+    }
+
+    /***************** ON BOTTOM OR RIGHT */
+    &.plot-legend-right:not(.plot-legend-expanded),
+    &.plot-legend-bottom {
+        .gl-plot-legend {
+            order: 2;
+        }
+        .plot-wrapper-axis-and-display-area {
+            order: 1;
+        }
+    }
+}

platform/commonUI/general/res/sass/plots/_plots-main.scss

@@ -20,10 +20,42 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 .abs.holder-plot {
-    // Fend off the scrollbar when less than min-height;
-    right: $interiorMargin;
+    right: $interiorMargin; // Fend off the scrollbar when less than min-height;
+    .t-object-alert.t-alert-unsynced {
+        display: none;
+    }
 }
 
+/********************************************* STACKED PLOT LAYOUT */
+.t-plot-stacked {
+    .l-view-section {
+        //  Make this a flex container
+        display: flex;
+        flex-flow: column nowrap;
+        .gl-plot.child-frame {
+            mct-plot { 
+                display: flex; 
+                flex: 1 1 auto;
+                height: 100%;
+                position: relative;
+            }
+            flex: 1 1 auto;
+            &:not(:first-child) {
+                margin-top: $interiorMargin;
+            }
+        }
+    }
+
+    .s-status-timeconductor-unsynced .holder-plot {
+        .t-object-alert.t-alert-unsynced {
+            display: block;
+        }
+    }
+
+}
+
+
+
 .gl-plot {
 	color: $colorPlotFg;
 	font-size: 0.7rem;
@@ -32,6 +64,19 @@
 	height: 100%;
     min-height: $plotMinH;
 
+    /********************************************* AXIS AND DISPLAY AREA */
+    .plot-wrapper-axis-and-display-area {
+        margin-top: $interiorMargin; // Keep the top tick label from getting clipped
+        position: relative;
+        flex: 1 1 auto;
+        .t-object-alert {
+            position: absolute;
+            display: block;
+            font-size: 1.5em;
+            top: $interiorMarginSm; left: $interiorMarginSm;
+        }
+    }
+
     .gl-plot-wrapper-display-area-and-x-axis {
         // Holds the plot area and the X-axis only
         position: absolute;
@@ -49,7 +94,6 @@
         }
 
         .gl-plot-axis-area.gl-plot-x {
-            //@include test(green);
             top: auto;
             right: 0;
             bottom: 0;
@@ -63,7 +107,7 @@
 	.gl-plot-axis-area {
 		position: absolute;
 		&.gl-plot-y {
-			top: $plotLegendH + $interiorMargin;
+			top: nth($plotDisplayArea, 1);
 			right: auto;
 			bottom: nth($plotDisplayArea, 3);
 			left: 0;
@@ -158,17 +202,6 @@
 		}
 	}
 
-	.gl-plot-legend {
-		position: absolute;
-		top: 0;
-		right: 0;
-		bottom: auto;
-		left: 0;
-		height: $plotLegendH;
-		overflow-x: hidden;
-		overflow-y: auto;
-	}
-
 	/****************************** Limits and Out-of-Bounds data */
 
 	.l-limit-bar,
@@ -235,39 +268,6 @@
     border: 1px solid $colorPlotAreaBorder;
 }
 
-.gl-plot-legend,
-.legend {
-	.plot-legend-item,
-	.legend-item {
-		display: inline-block;
-		margin-right: $interiorMarginLg;
-		margin-bottom: $interiorMarginSm;
-		span {
-			vertical-align: middle;
-		}
-		.plot-color-swatch,
-		.color-swatch {
-			border-radius: 2px;
-			display: inline-block;
-			height: $plotSwatchD;
-			width: $plotSwatchD;
-		}
-	}
-}
-
-.gl-plot-legend {
-	.plot-legend-item {
-		border-radius: $smallCr;
-		line-height: 1.5em;
-		padding: 0px $itemPadLR;
-		.plot-color-swatch {
-			border: 1px solid $colorBodyBg;
-			height: $plotSwatchD + 1;
-			width: $plotSwatchD + 1;
-		}
-	}
-}
-
 .tick {
 	position: absolute;
 	border: 0 $colorPlotHash solid;

platform/commonUI/general/res/sass/tree/_tree.scss

@@ -23,7 +23,7 @@
 ul.tree {
     @include menuUlReset();
     @include user-select(none);
-    li {
+    > li {
         display: block;
         position: relative;
     }
@@ -54,18 +54,10 @@ ul.tree {
         color: $colorItemTreeVC;
         font-size: 0.75em;
         margin-right: $interiorMargin;
-        height: 100%;
-        line-height: inherit;
         width: $treeVCW;
-        &.has-children {
+        &.no-children {
             &:before {
-                position: absolute;
-                @include trans-prop-nice(transform, 100ms);
-                content: "\e904";
-                @include transform-origin(center);
-            }
-            &.expanded:before {
-                @include transform(rotate(90deg));
+                content:"";
             }
         }
     }

platform/commonUI/general/res/sass/user-environ/_frame.scss

@@ -20,77 +20,69 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 .frame {
-    $ohH: $btnFrameH;
-    $bc: $colorInteriorBorder;
-    &.child-frame.panel {
-        background: $colorBodyBg;
-        border: 1px solid $bc;
+	$ohH: $btnFrameH;
+	$bc: $colorInteriorBorder;
+	&.child-frame.panel {
+		background: $colorBodyBg;
+		border: 1px solid $bc;
         z-index: 0; // Needed to prevent child-frame controls from showing through when another child-frame is above
-        &:hover {
-            border-color: lighten($bc, 10%);
+		&:hover {
+			border-color: lighten($bc, 10%);
+		}
+	}
+	.object-top-bar {
+		font-size: 0.75em;
+		height: $ohH;
+		line-height: $ohH;
+        .left {
+            padding-right: $interiorMarginLg;
         }
-    }
-    .object-browse-bar {
-        font-size: 0.75em;
-        height: $ohH;
-        line-height: $ohH;
-    }
-
-    > .object-holder.abs {
-        top: $ohH + $interiorMargin;
-    }
-    .contents {
-        $myM: $interiorMargin;
-        top: $myM;
-        right: $myM;
-        bottom: $myM;
-        left: $myM;
-    }
-    &.frame-template {
-        .s-button,
-        .s-menu-button {
-            height: $ohH;
-            line-height: $ohH;
-            padding: 0 $interiorMargin;
-            > span,
+	}
+	>.object-holder.abs {
+		top: $ohH + $interiorMargin;
+	}
+	.contents {
+		$myM: $interiorMargin;
+		top: $myM;
+		right: $myM;
+		bottom: $myM;
+		left: $myM;
+	}
+	&.frame-template {
+		.s-button,
+		.s-menu-button {
+			height: $ohH;
+			line-height: $ohH;
+			padding: 0 $interiorMargin;
+			> span,
             &:before {
-                font-size: 0.65rem;
-            }
-        }
+				font-size: 0.65rem;
+			}
+		}
 
-        .s-menu-button:after {
-            font-size: 8px;
-        }
+		.s-menu-button:after {
+			font-size: 8px;
+		}
 
-        .view-switcher {
-            z-index: 10;
-        }
-    }
-    .view-switcher {
-        margin-left: $interiorMargin; // Kick other top bar elements away when I'm present.
-        // Hide the name when the view switcher is in a frame context
-        .title-label {
-            display: none;
-        }
-    }
-}
-
-body.desktop .frame {
-    // Hide local controls initially and show it them on hover when they're in an element that's in a frame context
-    // Frame template is used because we need to target the lowest nested frame
-    .view-switcher,
-    .t-btn-view-large {
-        opacity: 0;
-        pointer-events: none;
-    }
-
-    // Target the first descendant so that we only show the elements in the outermost container.
-    // Handles the case where we have layouts in layouts.
-    &:hover > .object-browse-bar {
-        .view-switcher,
-        .t-btn-view-large {
-            opacity: 1;
-            pointer-events: inherit;
-        }
-    }
+		.view-switcher {
+			z-index: 10;
+		}
+	}
+	.view-switcher {
+		// Hide the name when the view switcher is in a frame context
+		.title-label {
+			display: none;
+		}
+	}
 }
+ body.desktop .frame.frame-template {
+     // Hide the view switcher by default when it's in an element that's in a frame context
+     // Frame template is used because we need to target the lowest nested frame
+     .view-switcher {
+         opacity: 0;
+     }
+     &:hover .view-switcher {
+         // Show the view switcher on frame hover
+         opacity: 1;
+     }
+ }

platform/commonUI/general/res/sass/user-environ/_layout.scss

@@ -136,6 +136,14 @@
     .mini-tab-icon.toggle-pane {
         z-index: 5;
     }
+    &.items {
+        .object-browse-bar {
+            .left.abs,
+            .right.abs {
+                top: auto;
+            }
+        }
+    }
 }
 
 body.desktop .pane .mini-tab-icon.toggle-pane {
@@ -227,13 +235,8 @@ body.desktop .pane .mini-tab-icon.toggle-pane {
     top: $ueTopBarH + $interiorMarginLg;
 }
 
-.l-object-wrapper {
-    padding: 0;
-    @include trans-prop-nice((padding), 0.25s);
-    .l-edit-controls {
-        @include trans-prop-nice((height), 0.5s);
-        height: 0;
-    }
+.l-object-wrapper-inner {
+    @include trans-prop-nice-resize(0.25s);
 }
 
 .object-browse-bar .s-button,
@@ -247,9 +250,10 @@ body.desktop .pane .mini-tab-icon.toggle-pane {
     vertical-align: top;
 }
 
-.object-browse-bar {
-    .l-object-action-buttons {
-        margin-left: $interiorMarginLg; // Kick the view switcher and other elements away
+.object-browse-bar,
+.top-bar {
+    .view-switcher {
+        margin-right: $interiorMarginLg * 2;
     }
 }
 
@@ -261,6 +265,7 @@ body.desktop .pane .mini-tab-icon.toggle-pane {
     white-space: nowrap;
 
     .left {
+        padding-right: $interiorMarginLg;
         .l-back {
             margin-right: $interiorMarginLg;
             &.s-status-editing { display: none; }
@@ -343,21 +348,53 @@ body.desktop {
     .pane:not(.resizing) {
         @include trans-prop-nice-resize-w(250ms);
     }
-    .pane.primary-pane > .object-browse-bar {
+    .pane.primary-pane .object-browse-bar {
         min-width: 200px; // Needed for nice display when primary pane is constrained severely via splitters
     }
 }
 
 .s-status-editing {
     .l-object-wrapper {
+        $t2Dur: $browseToEditAnimMs;
+        $t1Dur: $t2Dur / 2;
+        $pulseDur: $editBorderPulseMs;
+        $bC0: rgba($colorEditAreaFg, 0.5);
+        $bC100: rgba($colorEditAreaFg, 1);
+
         background-color: $colorEditAreaBg;
         border-radius: $controlCr;
-        border: 1px dotted $colorEditAreaFg;
-        padding: $interiorMargin;
+        border: 1px dotted $bC0;
+
+        // Transition 1
+        @include keyframes(wrapperIn) {
+            from { border: 0px dotted transparent; padding: 0; }
+            to { border: 1px dotted $bC0; padding: 5px; }
+        }
+
+        // Do last
+        @include keyframes(pulseNew) {
+            from  { border-color: $bC0; }
+            to { border-color: $bC100; }
+        }
+
+        @include animation-name(wrapperIn, pulseNew);
+        @include animation-duration($t1Dur, $pulseDur);
+        @include animation-delay(0s, $t1Dur + $t2Dur);
+        @include animation-direction(normal, alternate);
+        @include animation-fill-mode(both, none);
+        @include animation-iteration-count(1, infinite);
+        @include animation-timing-function(ease-in-out, linear);
+
 
         .l-edit-controls {
-            height: $ueEditToolBarH + $interiorMargin; margin-bottom: $interiorMargin;
+            height: 0;
             border-bottom: 1px solid $colorInteriorBorder;
+            // Transition 2: reveal edit controls
+            @include keyframes(editIn) {
+                from { border-bottom: 0px solid transparent; height: 0; margin-bottom: 0; }
+                to { border-bottom: 1px solid $colorInteriorBorder; height: $ueEditToolBarH + $interiorMargin; margin-bottom: $interiorMargin; }
+            }
+            @include animToParams(editIn, $dur: $t2Dur, $delay: $t1Dur);
             .tool-bar {
                 right: $interiorMargin;
             }

platform/commonUI/general/res/sass/user-environ/_tool-bar.scss

@@ -26,11 +26,9 @@
 	.l-control-group {
 		height: $btnToolbarH;
 	}
-	input[type="text"],
-    input[type="search"],
-    input[type="number"] {
+	input[type="text"] {
 		box-sizing: border-box;
-		font-size: .8em;
+		font-size: .9em;
 		height: $btnToolbarH;
 		margin-bottom: 1px;
 		position: relative;

platform/commonUI/general/src/ui/TreeNodeView.js

@@ -83,9 +83,9 @@ define([
         this.activeObject = domainObject;
 
         if (domainObject && domainObject.hasCapability('composition')) {
-            $(this.toggleView.elements()).addClass('has-children');
+            $(this.toggleView.elements()).removeClass('no-children');
         } else {
-            $(this.toggleView.elements()).removeClass('has-children');
+            $(this.toggleView.elements()).addClass('no-children');
         }
 
         if (domainObject && domainObject.hasCapability('status')) {

platform/commonUI/themes/espresso/res/sass/_constants.scss

@@ -17,7 +17,6 @@ $hoverRatioPercent: 10%;
 $basicCr: 3px;
 $controlCr: 2px;
 $smallCr: 2px;
-$overlayCr: 11px;
 
 // Buttons and Controls
 $colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent);
@@ -147,7 +146,6 @@ $colorOvrFg: pullForward($colorBodyFg, 30%);
 $colorOvrBtnBg: pullForward($colorOvrBg, 20%);
 $colorOvrBtnFg: #fff;
 $colorFieldHintOverlay: pullForward($colorOvrBg, 30%);
-$durLargeViewExpand: 250ms;
 
 // Items
 $colorItemBg: lighten($colorBodyBg, 5%);
@@ -175,6 +173,8 @@ $colorPlotHash: $colorTick;
 $stylePlotHash: dashed;
 $colorPlotAreaBorder: $colorInteriorBorder;
 $colorPlotLabelFg: pushBack($colorPlotFg, 20%);
+$legendCollapsedNameMaxW: 50%;
+$legendHoverValueBg: rgba($colorBodyFg, 0.1);
 
 // Tree
 $colorItemTreeHoverBg: pullForward($colorBodyBg, $hoverRatioPercent);

platform/commonUI/themes/snow/res/sass/_constants.scss

@@ -17,7 +17,6 @@ $hoverRatioPercent: 10%;
 $basicCr: 4px;
 $controlCr: $basicCr;
 $smallCr: 3px;
-$overlayCr: 11px;
 
 // Buttons and Controls
 $colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent);
@@ -147,7 +146,6 @@ $colorOvrFg: $colorBodyFg;
 $colorOvrBtnBg: pullForward($colorOvrBg, 40%);
 $colorOvrBtnFg: #fff;
 $colorFieldHintOverlay: pullForward($colorOvrBg, 40%);
-$durLargeViewExpand: 250ms;
 
 // Items
 $colorItemBg: #ddd;
@@ -175,6 +173,8 @@ $colorPlotHash: $colorTick;
 $stylePlotHash: dashed;
 $colorPlotAreaBorder: $colorInteriorBorder;
 $colorPlotLabelFg: pushBack($colorPlotFg, 20%);
+$legendCollapsedNameMaxW: 50%;
+$legendHoverValueBg: rgba($colorBodyFg, 0.2);
 
 // Tree
 $colorItemTreeHoverBg: pullForward($colorBodyBg, $hoverRatioPercent);

platform/features/clock/bundle.js

@@ -28,8 +28,6 @@ define([
     "./src/controllers/RefreshingController",
     "./src/actions/StartTimerAction",
     "./src/actions/RestartTimerAction",
-    "./src/actions/StopTimerAction",
-    "./src/actions/PauseTimerAction",
     "text!./res/templates/clock.html",
     "text!./res/templates/timer.html",
     'legacyRegistry'
@@ -41,8 +39,6 @@ define([
     RefreshingController,
     StartTimerAction,
     RestartTimerAction,
-    StopTimerAction,
-    PauseTimerAction,
     clockTemplate,
     timerTemplate,
     legacyRegistry
@@ -143,17 +139,6 @@ define([
                     "cssClass": "icon-play",
                     "priority": "preferred"
                 },
-                {
-                    "key": "timer.pause",
-                    "implementation": PauseTimerAction,
-                    "depends": [
-                        "now"
-                    ],
-                    "category": "contextual",
-                    "name": "Pause",
-                    "cssClass": "icon-pause",
-                    "priority": "preferred"
-                },
                 {
                     "key": "timer.restart",
                     "implementation": RestartTimerAction,
@@ -164,17 +149,6 @@ define([
                     "name": "Restart at 0",
                     "cssClass": "icon-refresh",
                     "priority": "preferred"
-                },
-                {
-                    "key": "timer.stop",
-                    "implementation": StopTimerAction,
-                    "depends": [
-                        "now"
-                    ],
-                    "category": "contextual",
-                    "name": "Stop",
-                    "cssClass": "icon-box",
-                    "priority": "preferred"
                 }
             ],
             "types": [

platform/features/clock/res/templates/timer.html

@@ -19,16 +19,11 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<div class="l-time-display l-digital l-timer s-timer s-state-{{timer.timerState}}" ng-controller="TimerController as timer">
+<div class="l-time-display l-digital l-timer s-timer" ng-controller="TimerController as timer">
 	<div class="l-elem-wrapper l-flex-row">
-        <div class="l-elem-wrapper l-flex-row controls">
-            <a ng-click="timer.clickStopButton()"
-               title="Stop"
-               class="flex-elem s-icon-button t-btn-stop icon-box"></a>
-            <a ng-click="timer.clickButton()"
-               title="{{timer.buttonText()}}"
-               class="flex-elem s-icon-button t-btn-pauseplay {{timer.buttonCssClass()}}"></a>
-        </div>
+		<a ng-click="timer.clickButton()"
+			title="{{timer.buttonText()}}"
+			class="flex-elem control s-icon-button {{timer.buttonCssClass()}}"></a>
 	    <span class="flex-elem l-value {{timer.signClass()}}">
 	        <span class="value"
 		        ng-class="{ active:timer.text() }">{{timer.text() || "--:--:--"}}

platform/features/clock/src/actions/AbstractStartTimerAction.js

@@ -25,10 +25,13 @@ define(
     function () {
 
         /**
-         * Implements the "Pause" action for timers.
+         * Implements the "Start" and "Restart" action for timers.
          *
-         * Sets the reference pausedTime in a timer to the current
-         * time, such that it stops counting up.
+         * Sets the reference timestamp in a timer to the current
+         * time, such that it begins counting up.
+         *
+         * Both "Start" and "Restart" share this implementation, but
+         * control their visibility with different `appliesTo` behavior.
          *
          * @implements {Action}
          * @memberof platform/features/clock
@@ -37,35 +40,22 @@ define(
          *        time (typically wrapping `Date.now`)
          * @param {ActionContext} context the context for this action
          */
-        function PauseTimerAction(now, context) {
+        function AbstractStartTimerAction(now, context) {
             this.domainObject = context.domainObject;
             this.now = now;
         }
 
-        PauseTimerAction.appliesTo = function (context) {
-            var model =
-                (context.domainObject && context.domainObject.getModel()) ||
-                {};
-
-
-            // We show this variant for timers which have
-            // a target time, or is in a playing state.
-            return model.type === 'timer' &&
-                    model.timerState === 'started';
-        };
-
-        PauseTimerAction.prototype.perform = function () {
+        AbstractStartTimerAction.prototype.perform = function () {
             var domainObject = this.domainObject,
                 now = this.now;
 
-            function updateModel(model) {
-                model.timerState = 'paused';
-                model.pausedTime = now();
+            function setTimestamp(model) {
+                model.timestamp = now();
             }
 
-            return domainObject.useCapability('mutation', updateModel);
+            return domainObject.useCapability('mutation', setTimestamp);
         };
 
-        return PauseTimerAction;
+        return AbstractStartTimerAction;
     }
 );

platform/features/clock/src/actions/RestartTimerAction.js

@@ -21,8 +21,8 @@
  *****************************************************************************/
 
 define(
-    [],
-    function () {
+    ['./AbstractStartTimerAction'],
+    function (AbstractStartTimerAction) {
 
         /**
          * Implements the "Restart at 0" action.
@@ -30,6 +30,7 @@ define(
          * Behaves the same as (and delegates functionality to)
          * the "Start" action.
          *
+         * @extends {platform/features/clock.AbstractTimerAction}
          * @implements {Action}
          * @memberof platform/features/clock
          * @constructor
@@ -38,33 +39,24 @@ define(
          * @param {ActionContext} context the context for this action
          */
         function RestartTimerAction(now, context) {
-            this.domainObject = context.domainObject;
-            this.now = now;
+            AbstractStartTimerAction.apply(this, [now, context]);
         }
 
+        RestartTimerAction.prototype =
+            Object.create(AbstractStartTimerAction.prototype);
+
         RestartTimerAction.appliesTo = function (context) {
             var model =
                 (context.domainObject && context.domainObject.getModel()) ||
                 {};
 
-            // We show this variant for timers which already have a target time.
+            // We show this variant for timers which already have
+            // a target time.
             return model.type === 'timer' &&
-                model.timerState !== 'stopped';
-        };
-
-        RestartTimerAction.prototype.perform = function () {
-            var domainObject = this.domainObject,
-                now = this.now;
-
-            function updateModel(model) {
-                model.timestamp = now();
-                model.timerState = 'started';
-                model.pausedTime = undefined;
-            }
-
-            return domainObject.useCapability('mutation', updateModel);
+                    model.timestamp !== undefined;
         };
 
         return RestartTimerAction;
+
     }
 );

platform/features/clock/src/actions/StartTimerAction.js

@@ -21,8 +21,8 @@
  *****************************************************************************/
 
 define(
-    [],
-    function () {
+    ['./AbstractStartTimerAction'],
+    function (AbstractStartTimerAction) {
 
         /**
          * Implements the "Start" action for timers.
@@ -30,6 +30,7 @@ define(
          * Sets the reference timestamp in a timer to the current
          * time, such that it begins counting up.
          *
+         * @extends {platform/features/clock.AbstractTimerAction}
          * @implements {Action}
          * @memberof platform/features/clock
          * @constructor
@@ -38,10 +39,12 @@ define(
          * @param {ActionContext} context the context for this action
          */
         function StartTimerAction(now, context) {
-            this.domainObject = context.domainObject;
-            this.now = now;
+            AbstractStartTimerAction.apply(this, [now, context]);
         }
 
+        StartTimerAction.prototype =
+            Object.create(AbstractStartTimerAction.prototype);
+
         StartTimerAction.appliesTo = function (context) {
             var model =
                 (context.domainObject && context.domainObject.getModel()) ||
@@ -50,28 +53,10 @@ define(
             // We show this variant for timers which do not yet have
             // a target time.
             return model.type === 'timer' &&
-                    model.timerState !== 'started';
-        };
-
-        StartTimerAction.prototype.perform = function () {
-            var domainObject = this.domainObject,
-                now = this.now;
-
-            function updateModel(model) {
-                //if we are resuming
-                if (model.pausedTime) {
-                    var timeShift = now() - model.pausedTime;
-                    model.timestamp = model.timestamp + timeShift;
-                } else {
-                    model.timestamp = now();
-                }
-                model.timerState = 'started';
-                model.pausedTime = undefined;
-            }
-
-            return domainObject.useCapability('mutation', updateModel);
+                    model.timestamp === undefined;
         };
 
         return StartTimerAction;
+
     }
 );

platform/features/clock/src/actions/StopTimerAction.js

@@ -1,71 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2009-2016, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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(
-    [],
-    function () {
-
-        /**
-         * Implements the "Stop" action for timers.
-         *
-         * Sets the reference timestamp in a timer undefined,
-         * such that it is reset and makes no movements.
-         *
-         * @implements {Action}
-         * @memberof platform/features/clock
-         * @constructor
-         * @param {Function} now a function which returns the current
-         *        time (typically wrapping `Date.now`)
-         * @param {ActionContext} context the context for this action
-         */
-        function StopTimerAction(now, context) {
-            this.domainObject = context.domainObject;
-            this.now = now;
-        }
-
-        StopTimerAction.appliesTo = function (context) {
-            var model =
-                (context.domainObject && context.domainObject.getModel()) ||
-                {};
-
-
-            // We show this variant for timers which do not yet have
-            // a target time.
-            return model.type === 'timer' &&
-                    model.timerState !== 'stopped';
-        };
-
-        StopTimerAction.prototype.perform = function () {
-            var domainObject = this.domainObject;
-
-            function updateModel(model) {
-                model.timestamp = undefined;
-                model.timerState = 'stopped';
-                model.pausedTime = undefined;
-            }
-
-            return domainObject.useCapability('mutation', updateModel);
-        };
-
-        return StopTimerAction;
-    }
-);

platform/features/clock/src/controllers/TimerController.js

@@ -42,7 +42,6 @@ define(
                 active = true,
                 relativeTimestamp,
                 lastTimestamp,
-                relativeTimerState,
                 self = this;
 
             function update() {
@@ -52,9 +51,12 @@ define(
                     self.textValue = formatter(timeDelta);
                     self.signValue = timeDelta < 0 ? "-" :
                         timeDelta >= 1000 ? "+" : "";
+                    self.signCssClass = timeDelta < 0 ? "icon-minus" :
+                        timeDelta >= 1000 ? "icon-plus" : "";
                 } else {
                     self.textValue = "";
                     self.signValue = "";
+                    self.signCssClass = "";
                 }
             }
 
@@ -66,50 +68,19 @@ define(
                 relativeTimestamp = timestamp;
             }
 
-            function updateTimerState(timerState) {
-                self.timerState = relativeTimerState = timerState;
-            }
-
-            function updateActions(actionCapability, actionKey) {
-                self.relevantAction = actionCapability &&
-                    actionCapability.getActions(actionKey)[0];
-
-                self.stopAction = relativeTimerState !== 'stopped' ?
-                    actionCapability && actionCapability.getActions('timer.stop')[0] : undefined;
-
-            }
-
-            function isPaused() {
-                return relativeTimerState === 'paused';
-            }
-
-            function handleLegacyTimer(model) {
-                if (model.timerState === undefined) {
-                    model.timerState = model.timestamp === undefined ?
-                        'stopped' : 'started';
-                }
-            }
-
             function updateObject(domainObject) {
-                var model = domainObject.getModel();
-                handleLegacyTimer(model);
-
-                var timestamp = model.timestamp,
+                var model = domainObject.getModel(),
+                    timestamp = model.timestamp,
                     formatKey = model.timerFormat,
-                    timerState = model.timerState,
                     actionCapability = domainObject.getCapability('action'),
-                    actionKey = (timerState !== 'started') ?
-                        'timer.start' : 'timer.pause';
+                    actionKey = (timestamp === undefined) ?
+                            'timer.start' : 'timer.restart';
 
                 updateFormat(formatKey);
                 updateTimestamp(timestamp);
-                updateTimerState(timerState);
-                updateActions(actionCapability, actionKey);
 
-                //if paused on startup show last known position
-                if (isPaused() && !lastTimestamp) {
-                    lastTimestamp = model.pausedTime;
-                }
+                self.relevantAction = actionCapability &&
+                    actionCapability.getActions(actionKey)[0];
 
                 update();
             }
@@ -127,16 +98,8 @@ define(
             function tick() {
                 var lastSign = self.signValue,
                     lastText = self.textValue;
-
-                if (!isPaused()) {
-                    lastTimestamp = now();
-                    update();
-                }
-
-                if (relativeTimerState === undefined) {
-                    handleModification();
-                }
-
+                lastTimestamp = now();
+                update();
                 // We're running in an animation frame, not in a digest cycle.
                 // We need to trigger a digest cycle if our displayable data
                 // changes.
@@ -167,27 +130,27 @@ define(
 
         /**
          * Get the CSS class to display the right icon
-         * for the start/pause button.
-         * @returns {string} cssclass to display
+         * for the start/restart button.
+         * @returns {string} cssClass to display
          */
         TimerController.prototype.buttonCssClass = function () {
             return this.relevantAction ?
-                this.relevantAction.getMetadata().cssClass : "";
+                    this.relevantAction.getMetadata().cssClass : "";
         };
 
         /**
-         * Get the text to show for the start/pause button
+         * Get the text to show for the start/restart button
          * (e.g. in a tooltip)
          * @returns {string} name of the action
          */
         TimerController.prototype.buttonText = function () {
             return this.relevantAction ?
-                this.relevantAction.getMetadata().name : "";
+                    this.relevantAction.getMetadata().name : "";
         };
 
 
         /**
-         * Perform the action associated with the start/pause button.
+         * Perform the action associated with the start/restart button.
          */
         TimerController.prototype.clickButton = function () {
             if (this.relevantAction) {
@@ -196,16 +159,6 @@ define(
             }
         };
 
-        /**
-         * Perform the action associated with the stop button.
-         */
-        TimerController.prototype.clickStopButton = function () {
-            if (this.stopAction) {
-                this.stopAction.perform();
-                this.updateObject(this.$scope.domainObject);
-            }
-        };
-
         /**
          * Get the sign (+ or -) of the current timer value, as
          * displayable text.
@@ -215,6 +168,15 @@ define(
             return this.signValue;
         };
 
+        /**
+         * Get the sign (+ or -) of the current timer value, as
+         * a CSS class.
+         * @returns {string} sign of the current timer value
+         */
+        TimerController.prototype.signClass = function () {
+            return this.signCssClass;
+        };
+
         /**
          * Get the text to display for the current timer value.
          * @returns {string} current timer value

platform/features/clock/test/actions/AbstractStartTimerActionSpec.js

@@ -21,41 +21,28 @@
  *****************************************************************************/
 
 define(
-    ["../../src/actions/PauseTimerAction"],
-    function (PauseTimerAction) {
+    ["../../src/actions/AbstractStartTimerAction"],
+    function (AbstractStartTimerAction) {
 
-        describe("A timer's Pause action", function () {
+        describe("A timer's start/restart action", function () {
             var mockNow,
                 mockDomainObject,
                 testModel,
-                testContext,
                 action;
 
             function asPromise(value) {
                 return (value || {}).then ? value : {
-                        then: function (callback) {
-                            return asPromise(callback(value));
-                        }
-                    };
-            }
-
-            function testState(type, timerState, timestamp, expected) {
-                testModel.type = type;
-                testModel.timerState = timerState;
-                testModel.timestamp = timestamp;
-
-                if (expected) {
-                    expect(PauseTimerAction.appliesTo(testContext)).toBeTruthy();
-                } else {
-                    expect(PauseTimerAction.appliesTo(testContext)).toBeFalsy();
-                }
+                    then: function (callback) {
+                        return asPromise(callback(value));
+                    }
+                };
             }
 
             beforeEach(function () {
                 mockNow = jasmine.createSpy('now');
                 mockDomainObject = jasmine.createSpyObj(
                     'domainObject',
-                    ['getCapability', 'useCapability', 'getModel']
+                    ['getCapability', 'useCapability']
                 );
 
                 mockDomainObject.useCapability.andCallFake(function (c, v) {
@@ -64,41 +51,24 @@ define(
                         return asPromise(true);
                     }
                 });
-                mockDomainObject.getModel.andCallFake(function () {
-                    return testModel;
-                });
 
                 testModel = {};
-                testContext = {domainObject: mockDomainObject};
 
-                action = new PauseTimerAction(mockNow, testContext);
+                action = new AbstractStartTimerAction(mockNow, {
+                    domainObject: mockDomainObject
+                });
             });
 
-            it("updates the model with a timerState", function () {
-                testModel.timerState = 'started';
-                action.perform();
-                expect(testModel.timerState).toEqual('paused');
-            });
-
-            it("updates the model with a pausedTime", function () {
-                testModel.pausedTime = undefined;
+            it("updates the model with a timestamp", function () {
                 mockNow.andReturn(12000);
                 action.perform();
-                expect(testModel.pausedTime).toEqual(12000);
+                expect(testModel.timestamp).toEqual(12000);
             });
 
-            it("applies only to timers in a playing state", function () {
-                //in a stopped state
-                testState('timer', 'stopped', undefined, false);
-
-                //in a paused state
-                testState('timer', 'paused', 12000, false);
-
-                //in a playing state
-                testState('timer', 'started', 12000, true);
-
-                //not a timer
-                testState('clock', 'started', 12000, false);
+            it("does not truncate milliseconds", function () {
+                mockNow.andReturn(42321);
+                action.perform();
+                expect(testModel.timestamp).toEqual(42321);
             });
         });
     }

platform/features/clock/test/actions/RestartTimerActionSpec.js

@@ -39,18 +39,6 @@ define(
                 };
             }
 
-            function testState(type, timerState, timestamp, expected) {
-                testModel.type = type;
-                testModel.timerState = timerState;
-                testModel.timestamp = timestamp;
-
-                if (expected) {
-                    expect(RestartTimerAction.appliesTo(testContext)).toBeTruthy();
-                } else {
-                    expect(RestartTimerAction.appliesTo(testContext)).toBeFalsy();
-                }
-            }
-
             beforeEach(function () {
                 mockNow = jasmine.createSpy('now');
                 mockDomainObject = jasmine.createSpyObj(
@@ -75,36 +63,23 @@ define(
             });
 
             it("updates the model with a timestamp", function () {
-                testModel.pausedTime = 12000;
                 mockNow.andReturn(12000);
                 action.perform();
                 expect(testModel.timestamp).toEqual(12000);
             });
 
-            it("updates the model with a pausedTime", function () {
-                testModel.pausedTime = 12000;
-                action.perform();
-                expect(testModel.pausedTime).toEqual(undefined);
-            });
+            it("applies only to timers with a target time", function () {
+                testModel.type = 'timer';
+                testModel.timestamp = 12000;
+                expect(RestartTimerAction.appliesTo(testContext)).toBeTruthy();
 
-            it("updates the model with a timerState", function () {
-                testModel.timerState = 'stopped';
-                action.perform();
-                expect(testModel.timerState).toEqual('started');
-            });
+                testModel.type = 'timer';
+                testModel.timestamp = undefined;
+                expect(RestartTimerAction.appliesTo(testContext)).toBeFalsy();
 
-            it("applies only to timers in a non-stopped state", function () {
-                //in a stopped state
-                testState('timer', 'stopped', undefined, false);
-
-                //in a paused state
-                testState('timer', 'paused', 12000, true);
-
-                //in a playing state
-                testState('timer', 'started', 12000, true);
-
-                //not a timer
-                testState('clock', 'paused', 12000, false);
+                testModel.type = 'clock';
+                testModel.timestamp = 12000;
+                expect(RestartTimerAction.appliesTo(testContext)).toBeFalsy();
             });
         });
     }

platform/features/clock/test/actions/StartTimerActionSpec.js

@@ -33,22 +33,10 @@ define(
 
             function asPromise(value) {
                 return (value || {}).then ? value : {
-                        then: function (callback) {
-                            return asPromise(callback(value));
-                        }
-                    };
-            }
-
-            function testState(type, timerState, timestamp, expected) {
-                testModel.type = type;
-                testModel.timerState = timerState;
-                testModel.timestamp = timestamp;
-
-                if (expected) {
-                    expect(StartTimerAction.appliesTo(testContext)).toBeTruthy();
-                } else {
-                    expect(StartTimerAction.appliesTo(testContext)).toBeFalsy();
-                }
+                    then: function (callback) {
+                        return asPromise(callback(value));
+                    }
+                };
             }
 
             beforeEach(function () {
@@ -69,7 +57,7 @@ define(
                 });
 
                 testModel = {};
-                testContext = {domainObject: mockDomainObject};
+                testContext = { domainObject: mockDomainObject };
 
                 action = new StartTimerAction(mockNow, testContext);
             });
@@ -80,30 +68,18 @@ define(
                 expect(testModel.timestamp).toEqual(12000);
             });
 
-            it("updates the model with a pausedTime", function () {
-                testModel.pausedTime = 12000;
-                action.perform();
-                expect(testModel.pausedTime).toEqual(undefined);
-            });
+            it("applies only to timers without a target time", function () {
+                testModel.type = 'timer';
+                testModel.timestamp = 12000;
+                expect(StartTimerAction.appliesTo(testContext)).toBeFalsy();
 
-            it("updates the model with a timerState", function () {
-                testModel.timerState = undefined;
-                action.perform();
-                expect(testModel.timerState).toEqual('started');
-            });
+                testModel.type = 'timer';
+                testModel.timestamp = undefined;
+                expect(StartTimerAction.appliesTo(testContext)).toBeTruthy();
 
-            it("applies only to timers not in a playing state", function () {
-                //in a stopped state
-                testState('timer', 'stopped', undefined, true);
-
-                //in a paused state
-                testState('timer', 'paused', 12000, true);
-
-                //in a playing state
-                testState('timer', 'started', 12000, false);
-
-                //not a timer
-                testState('clock', 'paused', 12000, false);
+                testModel.type = 'clock';
+                testModel.timestamp = 12000;
+                expect(StartTimerAction.appliesTo(testContext)).toBeFalsy();
             });
         });
     }

platform/features/clock/test/actions/StopTimerActionSpec.js

@@ -1,110 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2009-2016, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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(
-    ["../../src/actions/StopTimerAction"],
-    function (StopTimerAction) {
-
-        describe("A timer's stop action", function () {
-            var mockNow,
-                mockDomainObject,
-                testModel,
-                testContext,
-                action;
-
-            function asPromise(value) {
-                return (value || {}).then ? value : {
-                        then: function (callback) {
-                            return asPromise(callback(value));
-                        }
-                    };
-            }
-
-            function testState(type, timerState, timestamp, expected) {
-                testModel.type = type;
-                testModel.timerState = timerState;
-                testModel.timestamp = timestamp;
-
-                if (expected) {
-                    expect(StopTimerAction.appliesTo(testContext)).toBeTruthy();
-                } else {
-                    expect(StopTimerAction.appliesTo(testContext)).toBeFalsy();
-                }
-            }
-
-            beforeEach(function () {
-                mockNow = jasmine.createSpy('now');
-                mockDomainObject = jasmine.createSpyObj(
-                    'domainObject',
-                    ['getCapability', 'useCapability', 'getModel']
-                );
-
-                mockDomainObject.useCapability.andCallFake(function (c, v) {
-                    if (c === 'mutation') {
-                        testModel = v(testModel) || testModel;
-                        return asPromise(true);
-                    }
-                });
-                mockDomainObject.getModel.andCallFake(function () {
-                    return testModel;
-                });
-
-                testModel = {};
-                testContext = {domainObject: mockDomainObject};
-
-                action = new StopTimerAction(mockNow, testContext);
-            });
-
-            it("updates the model with a timestamp", function () {
-                mockNow.andReturn(12000);
-                action.perform();
-                expect(testModel.timestamp).toEqual(undefined);
-            });
-
-            it("updates the model with a pausedTime", function () {
-                testModel.pausedTime = 12000;
-                action.perform();
-                expect(testModel.pausedTime).toEqual(undefined);
-            });
-
-            it("updates the model with a timerState", function () {
-                testModel.timerState = 'started';
-                action.perform();
-                expect(testModel.timerState).toEqual('stopped');
-            });
-
-            it("applies only to timers in a non-stopped state", function () {
-                //in a stopped state
-                testState('timer', 'stopped', undefined, false);
-
-                //in a paused state
-                testState('timer', 'paused', 12000, true);
-
-                //in a playing state
-                testState('timer', 'started', 12000, true);
-
-                //not a timer
-                testState('clock', 'paused', 12000, false);
-            });
-        });
-    }
-);

platform/features/clock/test/controllers/TimerControllerSpec.js

@@ -34,14 +34,13 @@ define(
                 mockDomainObject,
                 mockActionCapability,
                 mockStart,
-                mockPause,
-                mockStop,
+                mockRestart,
                 testModel,
                 controller;
 
             function invokeWatch(expr, value) {
                 mockScope.$watch.calls.forEach(function (call) {
-                    if (call.args[0] === expr) {
+                    if (call.args[0] ===  expr) {
                         call.args[1](value);
                     }
                 });
@@ -68,12 +67,8 @@ define(
                     'start',
                     ['getMetadata', 'perform']
                 );
-                mockPause = jasmine.createSpyObj(
-                    'paused',
-                    ['getMetadata', 'perform']
-                );
-                mockStop = jasmine.createSpyObj(
-                    'stopped',
+                mockRestart = jasmine.createSpyObj(
+                    'restart',
                     ['getMetadata', 'perform']
                 );
                 mockNow = jasmine.createSpy('now');
@@ -87,14 +82,11 @@ define(
                 mockActionCapability.getActions.andCallFake(function (k) {
                     return [{
                         'timer.start': mockStart,
-                        'timer.pause': mockPause,
-                        'timer.stop': mockStop
+                        'timer.restart': mockRestart
                     }[k]];
                 });
-
-                mockStart.getMetadata.andReturn({cssClass: "icon-play", name: "Start"});
-                mockPause.getMetadata.andReturn({cssClass: "icon-pause", name: "Pause"});
-                mockStop.getMetadata.andReturn({cssClass: "icon-box", name: "Stop"});
+                mockStart.getMetadata.andReturn({ cssClass: "icon-play", name: "Start" });
+                mockRestart.getMetadata.andReturn({ cssClass: "icon-refresh", name: "Restart" });
                 mockScope.domainObject = mockDomainObject;
 
                 testModel = {};
@@ -152,37 +144,28 @@ define(
                 expect(controller.text()).toEqual("0D 00:00:00");
             });
 
-            it("shows cssClass & name for the applicable start/pause action", function () {
+            it("shows cssClass & name for the applicable start/restart action", function () {
                 invokeWatch('domainObject', mockDomainObject);
                 expect(controller.buttonCssClass()).toEqual("icon-play");
                 expect(controller.buttonText()).toEqual("Start");
 
                 testModel.timestamp = 12321;
-                testModel.timerState = 'started';
                 invokeWatch('model.modified', 1);
-                expect(controller.buttonCssClass()).toEqual("icon-pause");
-                expect(controller.buttonText()).toEqual("Pause");
+                expect(controller.buttonCssClass()).toEqual("icon-refresh");
+                expect(controller.buttonText()).toEqual("Restart");
             });
 
-            it("performs correct start/pause/stop action on click", function () {
-                //test start
+            it("performs correct start/restart action on click", function () {
                 invokeWatch('domainObject', mockDomainObject);
                 expect(mockStart.perform).not.toHaveBeenCalled();
                 controller.clickButton();
                 expect(mockStart.perform).toHaveBeenCalled();
 
-                //test pause
                 testModel.timestamp = 12321;
-                testModel.timerState = 'started';
                 invokeWatch('model.modified', 1);
-                expect(mockPause.perform).not.toHaveBeenCalled();
+                expect(mockRestart.perform).not.toHaveBeenCalled();
                 controller.clickButton();
-                expect(mockPause.perform).toHaveBeenCalled();
-
-                //test stop
-                expect(mockStop.perform).not.toHaveBeenCalled();
-                controller.clickStopButton();
-                expect(mockStop.perform).toHaveBeenCalled();
+                expect(mockRestart.perform).toHaveBeenCalled();
             });
 
             it("stops requesting animation frames when destroyed", function () {

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

@@ -19,6 +19,7 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+/* global console*/
 
 define(
     [
@@ -97,6 +98,7 @@ define(
             this.validation = new TimeConductorValidation(this.timeAPI);
             this.formatService = formatService;
             this.config = config;
+            this.clocksForTimeSystem = {};
             this.timeSystemsForClocks = {};
             this.$scope.timeSystemModel = {};
             this.$scope.boundsModel = {};
@@ -169,20 +171,23 @@ define(
         TimeConductorController.prototype.selectMenuOption = function (newOption, oldOption) {
             if (newOption !== oldOption) {
                 var config = this.getConfig(this.timeAPI.timeSystem(), newOption.clock);
-                if (!config) {
-                    // Clock does not support this timeSystem, fallback to first
-                    // option provided for clock.
-                    config = this.config.menuOptions.filter(function (menuOption) {
-                        return menuOption.clock === (newOption.clock && newOption.clock.key);
-                    })[0];
+
+                /*
+                 * If there is no configuration defined for the selected clock
+                 * and time system default to the first time system that
+                 * configuration is available for.
+                 */
+                if (config === undefined) {
+                    var timeSystem = this.timeSystemsForClocks[newOption.key][0];
+                    this.$scope.timeSystemModel.selected = timeSystem;
+                    this.setTimeSystemFromView(timeSystem.key);
+                    config = this.getConfig(timeSystem, newOption.clock);
                 }
 
-                if (config.clock) {
-                    this.timeAPI.clock(config.clock, config.clockOffsets);
-                    this.timeAPI.timeSystem(config.timeSystem);
-                } else {
+                if (newOption.key === 'fixed') {
                     this.timeAPI.stopClock();
-                    this.timeAPI.timeSystem(config.timeSystem, config.bounds);
+                } else {
+                    this.timeAPI.clock(newOption.key, config.clockOffsets);
                 }
             }
         };
@@ -204,22 +209,28 @@ define(
                 cssClass: 'icon-calendar'
             }];
             var clocks = {};
+            var clocksForTimeSystem = this.clocksForTimeSystem;
             var timeSystemsForClocks = this.timeSystemsForClocks;
 
             (config.menuOptions || []).forEach(function (menuOption) {
+                var clock = this.getClock(menuOption.clock);
                 var clockKey = menuOption.clock || 'fixed';
-                var clock = this.getClock(clockKey);
-
-                if (clock !== undefined) {
-                    clocks[clock.key] = clock;
-                }
 
                 var timeSystem = this.timeSystems[menuOption.timeSystem];
                 if (timeSystem !== undefined) {
+                    if (clock !== undefined) {
+                        // Use an associative array to built a set of unique
+                        // clocks
+                        clocks[clock.key] = clock;
+                        clocksForTimeSystem[timeSystem.key] = clocksForTimeSystem[timeSystem.key] || [];
+                        clocksForTimeSystem[timeSystem.key].push(clock);
+                    }
                     timeSystemsForClocks[clockKey] = timeSystemsForClocks[clockKey] || [];
                     timeSystemsForClocks[clockKey].push(timeSystem);
+                } else if (menuOption.clock !== undefined) {
+                    console.error('Unknown clock "' + clockKey + '", has it been registered?');
                 }
-            }, this);
+            }.bind(this));
 
             /*
              * Populate the clocks menu with metadata from the available clocks
@@ -351,10 +362,10 @@ define(
          * @param {Clock} clock
          */
         TimeConductorController.prototype.setViewFromClock = function (clock) {
-            var newClockKey = clock ? clock.key : 'fixed';
-            var timeSystems = this.timeSystemsForClocks[newClockKey];
+            var newClockKey = clock && clock.key;
+            var timeSystems = this.timeSystemsForClocks[newClockKey || 'fixed'];
             var menuOption = this.menu.options.filter(function (option) {
-                return option.key === (newClockKey);
+                return option.key === (newClockKey || 'fixed');
             })[0];
 
             this.menu.selected = menuOption;
@@ -383,7 +394,9 @@ define(
 
             this.isFixed = clock === undefined;
 
-            if (clock === undefined) {
+            if (clock !== undefined) {
+                this.setViewFromOffsets(this.timeAPI.clockOffsets());
+            } else {
                 this.setViewFromBounds(this.timeAPI.bounds());
             }
 
@@ -404,15 +417,34 @@ define(
             var clock = this.menu.selected.clock;
             var timeSystem = this.timeSystems[key];
             var config = this.getConfig(timeSystem, clock);
+            var bounds;
 
             this.$scope.timeSystemModel.selected = timeSystem;
-            this.$scope.timeSystemModel.format = timeSystem.timeFormat;
 
+            /**
+             * Time systems require default bounds to be specified when they
+             * are set
+             */
             if (clock === undefined) {
-                this.timeAPI.timeSystem(timeSystem, config.bounds);
+                bounds = config.bounds;
+                this.timeAPI.timeSystem(timeSystem, bounds);
             } else {
-                this.timeAPI.clock(clock, config.clockOffsets);
-                this.timeAPI.timeSystem(timeSystem);
+                bounds = {
+                    start: clock.currentValue() + config.clockOffsets.start,
+                    end: clock.currentValue() + config.clockOffsets.end
+                };
+                //Has time system change resulted in offsets change (based on config)?
+                this.timeAPI.timeSystem(timeSystem, bounds);
+                var configOffsets = config.clockOffsets;
+                var apiOffsets = this.timeAPI.clockOffsets();
+
+                //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);
+                }
             }
         };
 

platform/features/imagery/bundle.js

@@ -53,10 +53,7 @@ define([
             "policies": [
                 {
                     "category": "view",
-                    "implementation": ImageryViewPolicy,
-                    "depends": [
-                        "openmct"
-                    ]
+                    "implementation": ImageryViewPolicy
                 }
             ],
             "controllers": [
@@ -65,7 +62,7 @@ define([
                     "implementation": ImageryController,
                     "depends": [
                         "$scope",
-                        "openmct"
+                        "telemetryHandler"
                     ]
                 }
             ],

platform/features/imagery/res/templates/imagery.html

@@ -34,8 +34,10 @@
         <div class="l-image-main-controlbar flex-elem l-flex-row">
             <div class="left flex-elem grows">
                 <a class="s-button show-thumbs sm hidden icon-thumbs-strip"
-                    ng-click="showThumbsBubble = (showThumbsBubble) ? false:true"></a>
+                    ng-click="showThumbsBubble = (showThumbsBubble)? false:true"></a>
+                <span class="l-timezone">{{imagery.getZone()}}</span>
                 <span class="l-time">{{imagery.getTime()}}</span>
+                <span class="l-date">{{imagery.getDate()}}</span>
             </div>
             <div class="right flex-elem">
                 <a class="s-button pause-play"

platform/features/imagery/src/controllers/ImageryController.js

@@ -28,80 +28,72 @@ define(
     ['moment'],
     function (moment) {
 
+        var DATE_FORMAT = "YYYY-MM-DD",
+            TIME_FORMAT = "HH:mm:ss.SSS";
+
         /**
          * Controller for the "Imagery" view of a domain object which
          * provides image telemetry.
          * @constructor
          * @memberof platform/features/imagery
          */
-        function ImageryController($scope, openmct) {
-            this.$scope = $scope;
-            this.openmct = openmct;
-            this.date = "";
-            this.time = "";
-            this.zone = "";
-            this.imageUrl = "";
+        function ImageryController($scope, telemetryHandler) {
+            var self = this;
 
-            this.$scope.filters = {
+            function releaseSubscription() {
+                if (self.handle) {
+                    self.handle.unsubscribe();
+                    self.handle = undefined;
+                }
+            }
+
+            function updateValuesCallback() {
+                return self.updateValues();
+            }
+
+            // Create a new subscription; telemetrySubscriber gets
+            // to do the meaningful work here.
+            function subscribe(domainObject) {
+                releaseSubscription();
+                self.date = "";
+                self.time = "";
+                self.zone = "";
+                self.imageUrl = "";
+                self.handle = domainObject && telemetryHandler.handle(
+                    domainObject,
+                    updateValuesCallback,
+                    true // Lossless
+                );
+            }
+
+            $scope.filters = {
                 brightness: 100,
                 contrast: 100
             };
 
-            this.subscribe = this.subscribe.bind(this);
-            this.stopListening = this.stopListening.bind(this);
-            this.updateValues = this.updateValues.bind(this);
-
             // Subscribe to telemetry when a domain object becomes available
-            this.subscribe(this.$scope.domainObject);
+            $scope.$watch('domainObject', subscribe);
 
             // Unsubscribe when the plot is destroyed
-            this.$scope.$on("$destroy", this.stopListening);
+            $scope.$on("$destroy", releaseSubscription);
         }
 
-        ImageryController.prototype.subscribe = function (domainObject) {
-            this.date = "";
-            this.imageUrl = "";
-            this.openmct.objects.get(domainObject.getId())
-                .then(function (object) {
-                    this.domainObject = object;
-                    var metadata = this.openmct
-                        .telemetry
-                        .getMetadata(this.domainObject);
-                    var timeKey = this.openmct.time.timeSystem().key;
-                    this.timeFormat = this.openmct
-                        .telemetry
-                        .getValueFormatter(metadata.value(timeKey));
-                    this.imageFormat = this.openmct
-                        .telemetry
-                        .getValueFormatter(metadata.valuesForHints(['image'])[0]);
-                    this.unsubscribe = this.openmct.telemetry
-                        .subscribe(this.domainObject, this.updateValues);
-                    this.openmct.telemetry
-                        .request(this.domainObject, {
-                            strategy: 'latest',
-                            size: 1
-                        })
-                        .then(function (values) {
-                            this.updateValues(values[0]);
-                        }.bind(this));
-                }.bind(this));
-        };
-
-        ImageryController.prototype.stopListening = function () {
-            if (this.unsubscribe) {
-                this.unsubscribe();
-                delete this.unsubscribe;
-            }
-        };
-
         // Update displayable values to reflect latest image telemetry
-        ImageryController.prototype.updateValues = function (datum) {
-            if (this.isPaused) {
-                this.nextDatum = datum;
-                return;
+        ImageryController.prototype.updateValues = function () {
+            var imageObject =
+                    this.handle && this.handle.getTelemetryObjects()[0],
+                timestamp,
+                m;
+            if (imageObject && !this.isPaused) {
+                timestamp = this.handle.getDomainValue(imageObject);
+                m = timestamp !== undefined ?
+                        moment.utc(timestamp) :
+                        undefined;
+                this.date = m ? m.format(DATE_FORMAT) : "";
+                this.time = m ? m.format(TIME_FORMAT) : "";
+                this.zone = m ? "UTC" : "";
+                this.imageUrl = this.handle.getRangeValue(imageObject);
             }
-            this.time = this.timeFormat.format(datum);
-            this.imageUrl = this.imageFormat.format(datum);
         };
 
         /**
@@ -113,6 +105,25 @@ define(
             return this.time;
         };
 
+        /**
+         * Get the date portion (month, year) of the
+         * timestamp associated with the incoming image telemetry.
+         * @returns {string} the date
+         */
+        ImageryController.prototype.getDate = function () {
+            return this.date;
+        };
+
+        /**
+         * Get the time zone for the displayed time/date corresponding
+         * to the timestamp associated with the incoming image
+         * telemetry.
+         * @returns {string} the time
+         */
+        ImageryController.prototype.getZone = function () {
+            return this.zone;
+        };
+
         /**
          * Get the URL of the image telemetry to display.
          * @returns {string} URL for telemetry image
@@ -130,10 +141,8 @@ define(
         ImageryController.prototype.paused = function (state) {
             if (arguments.length > 0 && state !== this.isPaused) {
                 this.isPaused = state;
-                if (this.nextDatum) {
-                    this.updateValues(this.nextDatum);
-                    delete this.nextDatum;
-                }
+                // Switch to latest image
+                this.updateValues();
             }
             return this.isPaused;
         };
@@ -141,3 +150,4 @@ define(
         return ImageryController;
     }
 );
+

platform/features/imagery/src/policies/ImageryViewPolicy.js

@@ -20,40 +20,39 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define([
-    '../../../../../src/api/objects/object-utils'
-], function (
-    objectUtils
-) {
-    /**
-     * Policy preventing the Imagery view from being made available for
-     * domain objects which do not have associated image telemetry.
-     * @implements {Policy.<View, DomainObject>}
-     * @constructor
-     */
-    function ImageryViewPolicy(openmct) {
-        this.openmct = openmct;
-    }
+define(
+    function () {
 
-    ImageryViewPolicy.prototype.hasImageTelemetry = function (domainObject) {
-        var newDO = objectUtils.toNewFormat(
-            domainObject.getModel(),
-            domainObject.getId()
-        );
-
-        var metadata = this.openmct.telemetry.getMetadata(newDO);
-        var values = metadata.valuesForHints(['image']);
-        return values.length >= 1;
-    };
-
-    ImageryViewPolicy.prototype.allow = function (view, domainObject) {
-        if (view.key === 'imagery') {
-            return this.hasImageTelemetry(domainObject);
+        /**
+         * Policy preventing the Imagery view from being made available for
+         * domain objects which do not have associated image telemetry.
+         * @implements {Policy.<View, DomainObject>}
+         * @constructor
+         */
+        function ImageryViewPolicy() {
         }
 
-        return true;
-    };
+        function hasImageTelemetry(domainObject) {
+            var telemetry = domainObject &&
+                    domainObject.getCapability('telemetry'),
+                metadata = telemetry ? telemetry.getMetadata() : {},
+                ranges = metadata.ranges || [];
 
-    return ImageryViewPolicy;
-});
+            return ranges.some(function (range) {
+                return range.format === 'imageUrl' ||
+                    range.format === 'image';
+            });
+        }
+
+        ImageryViewPolicy.prototype.allow = function (view, domainObject) {
+            if (view.key === 'imagery') {
+                return hasImageTelemetry(domainObject);
+            }
+
+            return true;
+        };
+
+        return ImageryViewPolicy;
+    }
+);
 

platform/features/imagery/test/controllers/ImageryControllerSpec.js

@@ -25,161 +25,137 @@ define(
     function (ImageryController) {
 
         describe("The Imagery controller", function () {
-            var $scope,
-                openmct,
-                oldDomainObject,
-                newDomainObject,
-                unsubscribe,
-                metadata,
-                prefix,
-                controller,
-                hasLoaded;
+            var mockScope,
+                mockTelemetryHandler,
+                mockHandle,
+                mockDomainObject,
+                controller;
+
+            function invokeWatch(expr, value) {
+                mockScope.$watch.calls.forEach(function (call) {
+                    if (call.args[0] === expr) {
+                        call.args[1](value);
+                    }
+                });
+            }
 
             beforeEach(function () {
-                $scope = jasmine.createSpyObj('$scope', ['$on', '$watch']);
-                oldDomainObject = jasmine.createSpyObj(
-                    'domainObject',
-                    ['getId']
+                mockScope = jasmine.createSpyObj('$scope', ['$on', '$watch']);
+                mockTelemetryHandler = jasmine.createSpyObj(
+                    'telemetryHandler',
+                    ['handle']
+                );
+                mockHandle = jasmine.createSpyObj(
+                    'handle',
+                    [
+                        'getDomainValue',
+                        'getRangeValue',
+                        'getTelemetryObjects',
+                        'unsubscribe'
+                    ]
+                );
+                mockDomainObject = jasmine.createSpyObj(
+                    'domainObject',
+                    ['getId', 'getModel', 'getCapability']
                 );
-                newDomainObject = { name: 'foo' };
 
-                oldDomainObject.getId.andReturn('testID');
-                openmct = {
-                    objects: jasmine.createSpyObj('objectAPI', [
-                        'get'
-                    ]),
-                    time: jasmine.createSpyObj('timeAPI', [
-                        'timeSystem'
-                    ]),
-                    telemetry: jasmine.createSpyObj('telemetryAPI', [
-                        'subscribe',
-                        'request',
-                        'getValueFormatter',
-                        'getMetadata'
-                    ])
-                };
-                metadata = jasmine.createSpyObj('metadata', [
-                    'value',
-                    'valuesForHints'
-                ]);
-                prefix = "formatted ";
-                unsubscribe = jasmine.createSpy('unsubscribe');
-                openmct.telemetry.subscribe.andReturn(unsubscribe);
-                openmct.time.timeSystem.andReturn({
-                    key: 'testKey'
-                });
-                $scope.domainObject = oldDomainObject;
-                openmct.objects.get.andReturn(Promise.resolve(newDomainObject));
-                openmct.telemetry.getMetadata.andReturn(metadata);
-                openmct.telemetry.getValueFormatter.andCallFake(function (property) {
-                    var formatter =
-                        jasmine.createSpyObj("formatter-" + property, ['format']);
-                    var isTime = (property === "timestamp");
-                    formatter.format.andCallFake(function (datum) {
-                        return (isTime ? prefix : "") + datum[property];
-                    });
-                    return formatter;
-                });
-                hasLoaded = false;
-                openmct.telemetry.request.andCallFake(function () {
-                    setTimeout(function () {
-                        hasLoaded = true;
-                    }, 10);
-                    return Promise.resolve([{
-                            timestamp: 1434600258123,
-                            value: 'some/url'
-                        }]);
-                });
-                metadata.value.andReturn("timestamp");
-                metadata.valuesForHints.andReturn(["value"]);
-
-                controller = new ImageryController($scope, openmct);
+                mockTelemetryHandler.handle.andReturn(mockHandle);
+                mockHandle.getTelemetryObjects.andReturn([mockDomainObject]);
 
+                controller = new ImageryController(
+                    mockScope,
+                    mockTelemetryHandler
+                );
+                invokeWatch('domainObject', mockDomainObject);
             });
 
-            describe("when loaded", function () {
-                var callback;
-                beforeEach(function () {
-                    waitsFor(function () {
-                        return hasLoaded;
-                    }, 500);
+            it("unsubscribes when scope is destroyed", function () {
+                expect(mockHandle.unsubscribe).not.toHaveBeenCalled();
 
-
-                    runs(function () {
-                        callback =
-                            openmct.telemetry.subscribe.mostRecentCall.args[1];
-                    });
+                // Find the $destroy listener and call it
+                mockScope.$on.calls.forEach(function (call) {
+                    if (call.args[0] === '$destroy') {
+                        call.args[1]();
+                    }
                 });
+                expect(mockHandle.unsubscribe).toHaveBeenCalled();
+            });
 
+            it("exposes the latest telemetry values", function () {
+                // 06/18/2015 4:04am UTC
+                var testTimestamp = 1434600258123,
+                    testUrl = "some/url",
+                    nextTimestamp = 1434600259456, // 4:05.456
+                    nextUrl = "some/other/url";
 
-                it("uses LAD telemetry", function () {
-                    expect(openmct.telemetry.request).toHaveBeenCalledWith(
-                        newDomainObject,
-                        {
-                            strategy: 'latest',
-                            size: 1
-                        }
-                    );
-                    expect(controller.getTime()).toEqual(prefix + 1434600258123);
-                    expect(controller.getImageUrl()).toEqual('some/url');
-                });
+                mockHandle.getDomainValue.andReturn(testTimestamp);
+                mockHandle.getRangeValue.andReturn(testUrl);
 
+                // Call the subscription listener
+                mockTelemetryHandler.handle.mostRecentCall.args[1]();
 
-                it("exposes the latest telemetry values", function () {
-                    callback({
-                        timestamp: 1434600259456,
-                        value: "some/other/url"
-                    });
+                expect(controller.getTime()).toEqual("04:04:18.123");
+                expect(controller.getDate()).toEqual("2015-06-18");
+                expect(controller.getZone()).toEqual("UTC");
+                expect(controller.getImageUrl()).toEqual(testUrl);
 
-                    expect(controller.getTime()).toEqual(prefix + 1434600259456);
-                    expect(controller.getImageUrl()).toEqual("some/other/url");
-                });
+                mockHandle.getDomainValue.andReturn(nextTimestamp);
+                mockHandle.getRangeValue.andReturn(nextUrl);
+                mockTelemetryHandler.handle.mostRecentCall.args[1]();
 
-                it("allows updates to be paused and unpaused", function () {
-                    var newTimestamp = 1434600259456,
-                        newUrl = "some/other/url",
-                        initialTimestamp = controller.getTime(),
-                        initialUrl = controller.getImageUrl();
+                expect(controller.getTime()).toEqual("04:04:19.456");
+                expect(controller.getDate()).toEqual("2015-06-18");
+                expect(controller.getZone()).toEqual("UTC");
+                expect(controller.getImageUrl()).toEqual(nextUrl);
+            });
 
-                    expect(initialTimestamp).not.toBe(prefix + newTimestamp);
-                    expect(initialUrl).not.toBe(newUrl);
-                    expect(controller.paused()).toBeFalsy();
+            it("allows updates to be paused", function () {
+                // 06/18/2015 4:04am UTC
+                var testTimestamp = 1434600258123,
+                    testUrl = "some/url",
+                    nextTimestamp = 1434600259456, // 4:05.456
+                    nextUrl = "some/other/url";
 
-                    controller.paused(true);
-                    expect(controller.paused()).toBeTruthy();
-                    callback({ timestamp: newTimestamp, value: newUrl });
+                // As above, but pause in between. Expect details
+                // not to change this time
 
-                    expect(controller.getTime()).toEqual(initialTimestamp);
-                    expect(controller.getImageUrl()).toEqual(initialUrl);
+                mockHandle.getDomainValue.andReturn(testTimestamp);
+                mockHandle.getRangeValue.andReturn(testUrl);
 
-                    controller.paused(false);
-                    expect(controller.paused()).toBeFalsy();
-                    expect(controller.getTime()).toEqual(prefix + newTimestamp);
-                    expect(controller.getImageUrl()).toEqual(newUrl);
-                });
+                // Call the subscription listener
+                mockTelemetryHandler.handle.mostRecentCall.args[1]();
 
-                it("subscribes to telemetry", function () {
-                    expect(openmct.telemetry.subscribe).toHaveBeenCalledWith(
-                        newDomainObject,
-                        jasmine.any(Function)
-                    );
-                });
+                expect(controller.getTime()).toEqual("04:04:18.123");
+                expect(controller.getDate()).toEqual("2015-06-18");
+                expect(controller.getZone()).toEqual("UTC");
+                expect(controller.getImageUrl()).toEqual(testUrl);
 
-                it("unsubscribes when scope is destroyed", function () {
-                    expect(unsubscribe).not.toHaveBeenCalled();
+                expect(controller.paused()).toBeFalsy();
+                controller.paused(true); // Pause!
+                expect(controller.paused()).toBeTruthy();
 
-                    $scope.$on.calls.forEach(function (call) {
-                        if (call.args[0] === '$destroy') {
-                            call.args[1]();
-                        }
-                    });
-                    expect(unsubscribe).toHaveBeenCalled();
-                });
+                mockHandle.getDomainValue.andReturn(nextTimestamp);
+                mockHandle.getRangeValue.andReturn(nextUrl);
+                mockTelemetryHandler.handle.mostRecentCall.args[1]();
+
+                expect(controller.getTime()).toEqual("04:04:18.123");
+                expect(controller.getDate()).toEqual("2015-06-18");
+                expect(controller.getZone()).toEqual("UTC");
+                expect(controller.getImageUrl()).toEqual(testUrl);
             });
 
             it("initially shows an empty string for date/time", function () {
+                // Call the subscription listener while domain/range
+                // values are still undefined
+                mockHandle.getDomainValue.andReturn(undefined);
+                mockHandle.getRangeValue.andReturn(undefined);
+                mockTelemetryHandler.handle.mostRecentCall.args[1]();
+
+                // Should have empty strings for date/time/zone
                 expect(controller.getTime()).toEqual("");
-                expect(controller.getImageUrl()).toEqual("");
+                expect(controller.getDate()).toEqual("");
+                expect(controller.getZone()).toEqual("");
+                expect(controller.getImageUrl()).toBeUndefined();
             });
         });
     }

platform/features/imagery/test/policies/ImageryViewPolicySpec.js

@@ -26,17 +26,14 @@ define(
 
         describe("Imagery view policy", function () {
             var testView,
-                openmct,
                 mockDomainObject,
                 mockTelemetry,
-                mockMetadata,
+                testMetadata,
                 policy;
 
             beforeEach(function () {
                 testView = { key: "imagery" };
-                mockMetadata = jasmine.createSpyObj('metadata', [
-                    "valuesForHints"
-                ]);
+                testMetadata = {};
                 mockDomainObject = jasmine.createSpyObj(
                     'domainObject',
                     ['getId', 'getModel', 'getCapability']
@@ -48,33 +45,30 @@ define(
                 mockDomainObject.getCapability.andCallFake(function (c) {
                     return c === 'telemetry' ? mockTelemetry : undefined;
                 });
-                mockDomainObject.getId.andReturn("some-id");
-                mockDomainObject.getModel.andReturn({ name: "foo" });
-                mockTelemetry.getMetadata.andReturn(mockMetadata);
-                mockMetadata.valuesForHints.andReturn(["bar"]);
+                mockTelemetry.getMetadata.andReturn(testMetadata);
 
-                openmct = { telemetry: mockTelemetry };
-
-                policy = new ImageryViewPolicy(openmct);
-            });
-
-            it("checks for hints indicating image telemetry", function () {
-                policy.allow(testView, mockDomainObject);
-                expect(mockMetadata.valuesForHints)
-                    .toHaveBeenCalledWith(["image"]);
+                policy = new ImageryViewPolicy();
             });
 
             it("allows the imagery view for domain objects with image telemetry", function () {
+                testMetadata.ranges = [{ key: "foo", format: "imageUrl" }];
                 expect(policy.allow(testView, mockDomainObject)).toBeTruthy();
             });
 
             it("disallows the imagery view for domain objects without image telemetry", function () {
-                mockMetadata.valuesForHints.andReturn([]);
+                testMetadata.ranges = [{ key: "foo", format: "somethingElse" }];
+                expect(policy.allow(testView, mockDomainObject)).toBeFalsy();
+            });
+
+            it("disallows the imagery view for domain objects without telemetry", function () {
+                testMetadata.ranges = [{ key: "foo", format: "imageUrl" }];
+                mockDomainObject.getCapability.andReturn(undefined);
                 expect(policy.allow(testView, mockDomainObject)).toBeFalsy();
             });
 
             it("allows other views", function () {
                 testView.key = "somethingElse";
+                testMetadata.ranges = [{ key: "foo", format: "somethingElse" }];
                 expect(policy.allow(testView, mockDomainObject)).toBeTruthy();
             });
 

platform/features/layout/bundle.js

@@ -24,7 +24,6 @@ define([
     "./src/LayoutController",
     "./src/FixedController",
     "./src/LayoutCompositionPolicy",
-    './src/MCTTriggerModal',
     "text!./res/templates/layout.html",
     "text!./res/templates/fixed.html",
     "text!./res/templates/frame.html",
@@ -38,7 +37,6 @@ define([
     LayoutController,
     FixedController,
     LayoutCompositionPolicy,
-    MCTTriggerModal,
     layoutTemplate,
     fixedTemplate,
     frameTemplate,
@@ -224,15 +222,6 @@ define([
                     "template": frameTemplate
                 }
             ],
-            "directives": [
-                {
-                    "key": "mctTriggerModal",
-                    "implementation": MCTTriggerModal,
-                    "depends": [
-                        "$document"
-                    ]
-                }
-            ],
             "controllers": [
                 {
                     "key": "LayoutController",
@@ -312,46 +301,6 @@ define([
                             "conversion": "number[]"
                         }
                     ]
-                },
-                {
-                    "key": "telemetry.panel",
-                    "name": "Telemetry Panel",
-                    "cssClass": "icon-telemetry-panel",
-                    "description": "A panel for collecting telemetry elements.",
-                    "priority": 899,
-                    "delegates": [
-                        "telemetry"
-                    ],
-                    "features": "creation",
-                    "contains": [
-                        {
-                            "has": "telemetry"
-                        }
-                    ],
-                    "model": {
-                        "composition": []
-                    },
-                    "properties": [
-                        {
-                            "name": "Layout Grid",
-                            "control": "composite",
-                            "items": [
-                                {
-                                    "name": "Horizontal grid (px)",
-                                    "control": "textfield",
-                                    "cssClass": "l-input-sm l-numeric"
-                                },
-                                {
-                                    "name": "Vertical grid (px)",
-                                    "control": "textfield",
-                                    "cssClass": "l-input-sm l-numeric"
-                                }
-                            ],
-                            "pattern": "^(\\d*[1-9]\\d*)?$",
-                            "property": "layoutGrid",
-                            "conversion": "number[]"
-                        }
-                    ]
                 }
             ]
         }

platform/features/layout/res/templates/frame.html

@@ -20,7 +20,7 @@
  at runtime from the About dialog for additional information.
 -->
 <div class="frame frame-template abs">
-    <div class="abs object-browse-bar l-flex-row">
+    <div class="abs object-top-bar l-flex-row">
         <div class="left flex-elem l-flex-row grows">
             <mct-representation
                 key="'object-header'"

platform/features/layout/src/MCTTriggerModal.js

@@ -1,137 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2016, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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([
-    'zepto'
-], function (
-    $
-) {
-
-    var OVERLAY_TEMPLATE = '' +
-'<div class="abs overlay l-large-view">' +
-'    <div class="abs blocker"></div>' +
-'    <div class="abs outer-holder">' +
-'       <a class="close icon-x-in-circle"></a>' +
-'       <div class="abs inner-holder l-flex-col">' +
-'           <div class="t-contents flex-elem holder grows"></div>' +
-'           <div class="bottom-bar flex-elem holder">' +
-'               <a class="t-done s-button major">Done</a>' +
-'           </div>' +
-'       </div>' +
-'    </div>' +
-'</div>';
-
-    /**
-     * MCT Trigger Modal is intended for use in only one location: inside the
-     * object-header to allow views in a layout to be popped out in a modal.
-     * Users can close the modal and go back to normal, and everything generally
-     * just works fine.
-     *
-     * This code is sensitive to how our html is constructed-- particularly with
-     * how it locates the the container of an element in a layout. However, it
-     * should be able to handle slight relocations so long as it is always a
-     * descendent of a `.frame` element.
-     */
-    function MCTTriggerModal($document) {
-        var document = $document[0];
-
-        function link($scope, $element) {
-            var frame = $element.parent();
-
-            for (var i = 0; i < 10; i++) {
-                if (frame.hasClass('frame')) {
-                    break;
-                }
-                frame = frame.parent();
-            }
-            if (!frame.hasClass('frame')) {
-                $element.remove();
-                return;
-            }
-
-            frame = frame[0];
-            var layoutContainer = frame.parentElement,
-                isOpen = false,
-                toggleOverlay,
-                overlay,
-                closeButton,
-                doneButton,
-                blocker,
-                overlayContainer;
-
-            function openOverlay() {
-                // Remove frame classes from being applied in a non-frame context
-                $(frame).removeClass('frame frame-template');
-                overlay = document.createElement('span');
-                overlay.innerHTML = OVERLAY_TEMPLATE;
-                overlayContainer = overlay.querySelector('.t-contents');
-                closeButton = overlay.querySelector('a.close');
-                closeButton.addEventListener('click', toggleOverlay);
-                doneButton = overlay.querySelector('a.t-done');
-                doneButton.addEventListener('click', toggleOverlay);
-                blocker = overlay.querySelector('.abs.blocker');
-                blocker.addEventListener('click', toggleOverlay);
-                document.body.appendChild(overlay);
-                layoutContainer.removeChild(frame);
-                overlayContainer.appendChild(frame);
-            }
-
-            function closeOverlay() {
-                $(frame).addClass('frame frame-template');
-                overlayContainer.removeChild(frame);
-                layoutContainer.appendChild(frame);
-                document.body.removeChild(overlay);
-                closeButton.removeEventListener('click', toggleOverlay);
-                closeButton = undefined;
-                doneButton.removeEventListener('click', toggleOverlay);
-                doneButton = undefined;
-                blocker.removeEventListener('click', toggleOverlay);
-                blocker = undefined;
-                overlayContainer = undefined;
-                overlay = undefined;
-            }
-
-            toggleOverlay = function () {
-                if (!isOpen) {
-                    openOverlay();
-                    isOpen = true;
-                } else {
-                    closeOverlay();
-                    isOpen = false;
-                }
-            };
-
-            $element.on('click', toggleOverlay);
-            $scope.$on('$destroy', function () {
-                $element.off('click', toggleOverlay);
-            });
-        }
-
-        return {
-            restrict: 'A',
-            link: link
-        };
-    }
-
-    return MCTTriggerModal;
-
-});

platform/features/layout/test/MCTTriggerModalSpec.js

@@ -1,122 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2016, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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([
-    '../src/MCTTriggerModal'
-], function (
-    MCTTriggerModal
-) {
-    describe('MCTTriggerModal', function () {
-        var $scope,
-            $element,
-            frame,
-            layoutContainer,
-            $document,
-            mctTriggerModal;
-
-        function makeElement(classes, parentEl) {
-            var elem = jasmine.createSpyObj('element.' + classes.join('.'), [
-                'hasClass',
-                'parent'
-            ]);
-            elem.hasClass.andCallFake(function (className) {
-                return classes.indexOf(className) !== -1;
-            });
-            elem.parent.andReturn(parentEl);
-            var div = document.createElement('div');
-            div.className = classes.join(' ');
-            parentEl[0].appendChild(div);
-            elem[0] = div;
-            return elem;
-        }
-
-
-        beforeEach(function () {
-            $scope = jasmine.createSpyObj('$scope', ['$on']);
-            $element = jasmine.createSpyObj('$element', [
-                'parent',
-                'remove',
-                'on',
-                'off'
-            ]);
-            layoutContainer = document.createElement('div');
-            frame = makeElement(['frame'], [layoutContainer]);
-            var child = makeElement([], frame);
-            for (var i = 0; i < 5; i++) {
-                child = makeElement([], child);
-            }
-            $element.parent.andReturn(child);
-            $document = [jasmine.createSpyObj('document', ['createElement'])];
-            $document[0].body = document.createElement('div');
-            $document[0].createElement.andCallFake(function (tag) {
-                return document.createElement(tag);
-            });
-
-            mctTriggerModal = new MCTTriggerModal($document);
-        });
-
-        it('is a directive definition', function () {
-            expect(mctTriggerModal.restrict).toBe('A');
-            expect(mctTriggerModal.link).toEqual(jasmine.any(Function));
-        });
-
-        describe('link', function () {
-            beforeEach(function () {
-                mctTriggerModal.link($scope, $element);
-            });
-
-            it('attaches handlers to $element', function () {
-                expect($element.on).toHaveBeenCalledWith(
-                    'click',
-                    jasmine.any(Function)
-                );
-            });
-
-            it('cleans up on $scope $destroy', function () {
-                expect($scope.$on).toHaveBeenCalledWith(
-                    '$destroy',
-                    jasmine.any(Function)
-                );
-                $scope.$on.mostRecentCall.args[1]();
-                expect($element.off).toHaveBeenCalledWith(
-                    'click',
-                    jasmine.any(Function)
-                );
-            });
-
-            it('opens and closes overlays', function () {
-                [
-                    'a.close', 'a.t-done', '.abs.blocker'
-                ].forEach(function (selector) {
-                    $element.on.mostRecentCall.args[1]();
-                    var container = $document[0].body.querySelector('.t-contents');
-                    expect(container.children[0]).toBe(frame[0]);
-                    expect(layoutContainer.children[0]).not.toBe(frame[0]);
-                    $document[0].body.querySelector(selector)
-                        .dispatchEvent(new Event('click'));
-                    expect(container.children[0]).not.toBe(frame[0]);
-                    expect(layoutContainer.children[0]).toBe(frame[0]);
-                });
-            });
-        });
-    });
-});

platform/features/listview/bundle.js

@@ -1,64 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2017, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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([
-    './src/controllers/ListViewController',
-    './src/directives/MCTGesture',
-    'text!./res/templates/listview.html',
-    'legacyRegistry'
-], function (
-    ListViewController,
-    MCTGesture,
-    listViewTemplate,
-    legacyRegistry
-) {
-    legacyRegistry.register("platform/features/listview", {
-        "name": "List View Plugin",
-        "description": "Allows folder contents to be shown in list format",
-        "extensions":
-        {
-            "views": [
-                {
-                    "key": "list",
-                    "type": "folder",
-                    "name": "List",
-                    "cssClass": "icon-list-view",
-                    "template": listViewTemplate
-                }
-            ],
-            "controllers": [
-                {
-                    "key": "ListViewController",
-                    "implementation": ListViewController,
-                    "depends": ["$scope"]
-                }
-            ],
-            "directives": [
-                {
-                    "key": "mctGesture",
-                    "implementation" : MCTGesture,
-                    "depends": ["gestureService"]
-                }
-            ]
-        }
-    });
-});

platform/features/listview/res/templates/listview.html

@@ -1,88 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2017, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT 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 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.
--->
-<div ng-controller="ListViewController">
-    <table class="list-view">
-        <thead>
-        <tr>
-            <th class="sortable"
-                ng-click="reverseSort = (orderByField === 'title')? !reverseSort:false; orderByField='title';"
-                ng-class="{
-                 sort: orderByField == 'title',
-                 asc: !reverseSort,
-                 desc: reverseSort
-                }">
-                Name
-            </th>
-
-
-            <th class="sortable"
-                ng-click="reverseSort = (orderByField === 'type')? !reverseSort:false; orderByField='type';"
-                ng-class="{
-                sort: orderByField == 'type',
-                asc: !reverseSort,
-                desc: reverseSort
-                }">
-                Type
-            </th>
-
-            <th class="sortable"
-                ng-click="reverseSort = (orderByField === 'persisted')? !reverseSort:true; orderByField='persisted';"
-                ng-class="{
-                sort: orderByField == 'persisted',
-                asc: !reverseSort,
-                desc: reverseSort
-                }">
-                Created Date
-            </th>
-
-            <th class="sortable"
-                ng-click="reverseSort = (orderByField === 'modified')? !reverseSort:true; orderByField='modified';"
-                ng-class="{
-                sort: orderByField == 'modified',
-                asc: !reverseSort,
-                desc: reverseSort
-                }">
-                Update Date
-            </th>
-
-        </tr>
-        </thead>
-        <tbody>
-        <tr ng-repeat="child in children|orderBy:orderByField:reverseSort"
-            mct-gesture="['menu','info']"
-            mct-object="child.asDomainObject"
-            ng-click="child.action.perform('navigate')">
-            <td>
-                <div class="l-flex-row">
-                    <span class="flex-elem t-item-icon" ng-class="{ 'l-icon-link': child.location.isLink()}">
-                        <span class="t-item-icon-glyph {{child.icon}}"></span>
-                    </span>
-                    <span class="t-title-label flex-elem grows">{{child.title}}</span>
-                </div>
-            </td>
-            <td>{{child.type}}</td>
-            <td>{{child.persisted}}</td>
-            <td>{{child.modified}}</td>
-        </tr>
-        </tbody>
-    </table>
-</div>

platform/features/listview/src/controllers/ListViewController.js

@@ -1,67 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2017, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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(function () {
-    function ListViewController($scope) {
-        this.$scope = $scope;
-        $scope.orderByField = 'title';
-        $scope.reverseSort = false;
-
-        this.updateView();
-        var unlisten = $scope.domainObject.getCapability('mutation')
-            .listen(this.updateView.bind(this));
-
-        $scope.$on('$destroy', function () {
-            unlisten();
-        });
-
-    }
-    ListViewController.prototype.updateView = function () {
-        this.$scope.domainObject.useCapability('composition')
-            .then(function (children) {
-                var formattedChildren = this.formatChildren(children);
-                this.$scope.children = formattedChildren;
-                this.$scope.data = {children: formattedChildren};
-            }.bind(this)
-        );
-    };
-    ListViewController.prototype.formatChildren = function (children) {
-        return children.map(function (child) {
-            return {
-                icon: child.getCapability('type').getCssClass(),
-                title: child.getModel().name,
-                type: child.getCapability('type').getName(),
-                persisted: new Date(
-                    child.getModel().persisted
-                ).toUTCString(),
-                modified: new Date(
-                    child.getModel().modified
-                ).toUTCString(),
-                asDomainObject: child,
-                location: child.getCapability('location'),
-                action: child.getCapability('action')
-            };
-        });
-    };
-
-    return ListViewController;
-});

platform/features/listview/src/directives/MCTGesture.js

@@ -1,44 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2017, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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(function () {
-    function MCTGesture(gestureService) {
-        return {
-            restrict : 'A',
-            scope: {
-                domainObject: '=mctObject'
-            },
-            link : function ($scope, $element, attrs) {
-                var activeGestures = gestureService.attachGestures(
-                    $element,
-                    $scope.domainObject,
-                    $scope.$eval(attrs.mctGesture)
-                );
-                $scope.$on('$destroy', function () {
-                    activeGestures.destroy();
-                    delete this.activeGestures;
-                });
-            }
-        };
-    }
-    return MCTGesture;
-});

platform/features/listview/test/controllers/ListViewControllerSpec.js

@@ -1,138 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2017, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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(
-    ["../../src/controllers/ListViewController"],
-    function (ListViewController) {
-        describe("The Controller for the ListView", function () {
-            var scope,
-                unlistenFunc,
-                domainObject,
-                childObject,
-                controller,
-                childModel,
-                typeCapability,
-                mutationCapability;
-            beforeEach(function () {
-                unlistenFunc = jasmine.createSpy("unlisten");
-
-                mutationCapability = jasmine.createSpyObj(
-                    "mutationCapability",
-                    ["listen"]
-                );
-                mutationCapability.listen.andReturn(unlistenFunc);
-
-                typeCapability = jasmine.createSpyObj(
-                    "typeCapability",
-                    ["getCssClass", "getName"]
-                );
-                typeCapability.getCssClass.andReturn("icon-folder");
-                typeCapability.getName.andReturn("Folder");
-
-
-                childModel = jasmine.createSpyObj(
-                    "childModel",
-                    ["persisted", "modified", "name"]
-                );
-                childModel.persisted = 1496867697303;
-                childModel.modified = 1496867697303;
-                childModel.name = "Battery Charge Status";
-
-                childObject = jasmine.createSpyObj(
-                    "childObject",
-                    ["getModel", "getCapability"]
-                );
-                childObject.getModel.andReturn(
-                    childModel
-                );
-                // childObject.getCapability.andReturn(
-                //     typeCapability
-                // );
-                childObject.getCapability.andCallFake(function (arg) {
-                    if (arg === 'location') {
-                        return '';
-                    } else if (arg === 'type') {
-                        return typeCapability;
-                    }
-                });
-                childObject.location = '';
-
-                domainObject = jasmine.createSpyObj(
-                    "domainObject",
-                    ["getCapability", "useCapability"]
-                );
-                domainObject.useCapability.andReturn(
-                    Promise.resolve([childObject])
-                );
-                domainObject.getCapability.andReturn(
-                    mutationCapability
-                );
-
-
-                scope = jasmine.createSpyObj(
-                    "$scope",
-                    ["$on"]
-                );
-                scope.domainObject = domainObject;
-
-                controller  = new ListViewController(scope);
-
-                waitsFor(function () {
-                    return scope.children;
-                });
-            });
-            it("updates the view", function () {
-                expect(scope.children[0]).toEqual(
-                    {
-                        icon: "icon-folder",
-                        title: "Battery Charge Status",
-                        type: "Folder",
-                        persisted: "Wed, 07 Jun 2017 20:34:57 GMT",
-                        modified: "Wed, 07 Jun 2017 20:34:57 GMT",
-                        asDomainObject: childObject,
-                        location: ''
-                    }
-                );
-            });
-            it("updates the scope when mutation occurs", function () {
-                domainObject.useCapability.andReturn(
-                    Promise.resolve([])
-                );
-                expect(mutationCapability.listen).toHaveBeenCalledWith(jasmine.any(Function));
-                mutationCapability.listen.mostRecentCall.args[0]();
-                waitsFor(function () {
-                    return scope.children.length !== 1;
-                });
-                runs(function () {
-                    expect(scope.children.length).toEqual(0);
-                });
-            });
-            it("releases listeners on $destroy", function () {
-                expect(scope.$on).toHaveBeenCalledWith('$destroy', jasmine.any(Function));
-                scope.$on.mostRecentCall.args[1]();
-                expect(unlistenFunc).toHaveBeenCalled();
-            });
-
-
-        });
-    }
-);

platform/features/listview/test/directives/MCTGestureSpec.js

@@ -1,86 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2017, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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(
-    ["../../src/directives/MCTGesture"],
-    function (MCTGesture) {
-        describe("The Gesture Listener for the ListView items", function () {
-            var mctGesture,
-                gestureService,
-                scope,
-                element,
-                attrs,
-                attachedGesture;
-            beforeEach(function () {
-                attachedGesture = jasmine.createSpyObj(
-                    "attachedGesture",
-                    ['destroy']
-                );
-                gestureService = jasmine.createSpyObj(
-                    "gestureService",
-                    ["attachGestures"]
-                );
-                gestureService.attachGestures.andReturn(
-                    attachedGesture
-                );
-                mctGesture = MCTGesture(gestureService);
-            });
-            it("creates a directive Object", function () {
-                expect(mctGesture).toBeDefined();
-            });
-            it("has link function that attaches gesture to gestureService",
-                function () {
-                    attrs = {
-                        mctGesture: "menu,info"
-                    };
-                    element = jasmine.createSpy("element");
-                    scope = jasmine.createSpyObj(
-                        "$scope",
-                        ["$on", "$eval"]
-                    );
-                    scope.domainObject = "fake domainObject";
-                    mctGesture.link(scope, element, attrs);
-                    expect(gestureService.attachGestures).toHaveBeenCalled();
-                }
-            );
-            it("release gesture service on $destroy", function () {
-                attrs = {
-                    mctGesture: "menu,info"
-                };
-                element = jasmine.createSpy("element");
-                scope = jasmine.createSpyObj(
-                    "$scope",
-                    ["$on", "$eval"]
-                );
-                scope.domainObject = "fake domainObject";
-                mctGesture.link(scope, element, attrs);
-                expect(scope.$on).toHaveBeenCalledWith(
-                    '$destroy',
-                     jasmine.any(Function)
-                );
-                scope.$on.mostRecentCall.args[1]();
-                expect(attachedGesture.destroy).toHaveBeenCalled();
-            });
-
-        });
-    }
-);

platform/features/plot/README.md

@@ -1,37 +0,0 @@
-# Plot README
-
-## Chart 
-
-The `mct-chart` directive is used to support drawing of simple charts. It is 
-present to support the Plot view, and its functionality is limited to the 
-functionality that is relevant for that view.
-
-This directive is used at the element level and takes one attribute, `draw` 
-which is an Angular expression which will should evaluate to a drawing object. 
-This drawing object should contain the following properties:
-
-* `dimensions`: The size, in logical coordinates, of the chart area. A 
-two-element array or numbers. 
-* `origin`: The position, in logical coordinates, of the lower-left corner of 
-the chart area. A two-element array or numbers. 
-* `lines`: An array of lines (e.g. as a plot line) to draw, where each line is 
-expressed as an object containing: 
-    * `buffer`: A Float32Array containing points in the line, in logical 
-    coordinates, in sequential x,y pairs. 
-    * `color`: The color of the line, as a four-element RGBA array, where 
-    each element is a number in the range of 0.0-1.0. 
-    * `points`: The number of points in the line. 
-* `boxes`: An array of rectangles to draw in the chart area. Each is an object 
-containing: 
-    * `start`: The first corner of the rectangle, as a two-element array of 
-    numbers, in logical coordinates. 
-    * `end`: The opposite corner of the rectangle, as a two-element array of 
-    numbers, in logical coordinates. color : The color of the line, as a 
-    four-element RGBA array, where each element is a number in the range of 
-    0.0-1.0. 
-
-While `mct-chart` is intended to support plots specifically, it does perform 
-some useful management of canvas objects (e.g. choosing between WebGL and Canvas 
-2D APIs for drawing based on browser support) so its usage is recommended when 
-its supported drawing primitives are sufficient for other charting tasks. 
- 

platform/features/plot/bundle.js

@@ -1,154 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2017, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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([
-    "./src/MCTChart",
-    "./src/PlotController",
-    "./src/policies/PlotViewPolicy",
-    "./src/PlotOptionsController",
-    "./src/services/ExportImageService",
-    "text!./res/templates/plot.html",
-    "text!./res/templates/plot-options-browse.html",
-    'legacyRegistry'
-], function (
-    MCTChart,
-    PlotController,
-    PlotViewPolicy,
-    PlotOptionsController,
-    exportImageService,
-    plotTemplate,
-    plotOptionsBrowseTemplate,
-    legacyRegistry
-) {
-
-    legacyRegistry.register("platform/features/plot", {
-        "name": "Plot view for telemetry",
-        "extensions": {
-            "views": [
-                {
-                    "name": "Plot",
-                    "key": "plot",
-                    "cssClass": "icon-sine",
-                    "template": plotTemplate,
-                    "needs": [
-                        "telemetry"
-                    ],
-                    "priority": "preferred",
-                    "delegation": true
-                }
-            ],
-            "directives": [
-                {
-                    "key": "mctChart",
-                    "implementation": MCTChart,
-                    "depends": [
-                        "$interval",
-                        "$log"
-                    ]
-                }
-            ],
-            "controllers": [
-                {
-                    "key": "PlotController",
-                    "implementation": PlotController,
-                    "depends": [
-                        "$scope",
-                        "$element",
-                        "exportImageService",
-                        "telemetryFormatter",
-                        "telemetryHandler",
-                        "throttle",
-                        "PLOT_FIXED_DURATION",
-                        "openmct"
-                    ]
-                },
-                {
-                    "key": "PlotOptionsController",
-                    "implementation": PlotOptionsController,
-                    "depends": [
-                        "$scope"
-                    ]
-                }
-            ],
-            "services": [
-                {
-                    "key": "exportImageService",
-                    "implementation": exportImageService,
-                    "depends": [
-                        "$q",
-                        "$timeout",
-                        "$log",
-                        "EXPORT_IMAGE_TIMEOUT"
-                    ]
-
-                }
-            ],
-            "constants": [
-                {
-                    "key": "PLOT_FIXED_DURATION",
-                    "value": 900000,
-                    "priority": "fallback",
-                    "comment": "Fifteen minutes."
-                },
-                {
-                    "key": "EXPORT_IMAGE_TIMEOUT",
-                    "value": 500,
-                    "priority": "fallback"
-                }
-            ],
-            "policies": [
-                {
-                    "category": "view",
-                    "implementation": PlotViewPolicy
-                }
-            ],
-            "representations": [
-                {
-                    "key": "plot-options-browse",
-                    "template": plotOptionsBrowseTemplate
-                }
-            ],
-            "licenses": [
-                {
-                    "name": "FileSaver.js",
-                    "version": "0.0.2",
-                    "author": "Eli Grey",
-                    "description": "File download initiator (for file exports)",
-                    "website": "https://github.com/eligrey/FileSaver.js/",
-                    "copyright": "Copyright © 2015 Eli Grey.",
-                    "license": "license-mit",
-                    "link": "https://github.com/eligrey/FileSaver.js/blob/master/LICENSE.md"
-                },
-                {
-                    "name": "html2canvas",
-                    "version": "0.4.1",
-                    "author": "Niklas von Hertzen",
-                    "description": "JavaScript HTML renderer",
-                    "website": "https://github.com/niklasvh/html2canvas",
-                    "copyright": "Copyright © 2012 Niklas von Hertzen.",
-                    "license": "license-mit",
-                    "link": "https://github.com/niklasvh/html2canvas/blob/master/LICENSE"
-                }
-            ]
-        }
-    });
-});

platform/features/plot/res/templates/plot-options-browse.html

@@ -1,70 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2017, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT 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 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.
--->
-<div ng-controller="PlotOptionsController" class="flex-elem grows l-inspector-part">
-    <em class="t-inspector-part-header" title="Display properties for this object">Plot Options</em>
-    <mct-form
-            ng-model="configuration.plot.xAxis"
-            structure="xAxisForm"
-            name="xAxisFormState"
-            class="flex-elem l-flex-row no-margin">
-    </mct-form>
-    <mct-form
-            ng-model="configuration.plot.yAxis"
-            structure="yAxisForm"
-            name="yAxisFormState"
-            class="flex-elem l-flex-row no-margin">
-    </mct-form>
-    <div class="form">
-        <div class="section-header ng-binding ng-scope">
-            Plot Series
-        </div>
-        <ul class="first flex-elem grows vscroll">
-            <ul class="tree">
-                <li ng-repeat="child in children">
-                    <span ng-controller="ToggleController as toggle">
-                        <span ng-controller="TreeNodeController as treeNode">
-                            <span class="tree-item menus-to-left">
-                                <span
-                                    class='ui-symbol view-control flex-elem has-children'
-                                    ng-class="{ expanded: toggle.isActive() }"
-                                    ng-click="toggle.toggle(); treeNode.trackExpansion()">
-                                </span>
-                                <mct-representation
-                                    class="rep-object-label"
-                                    key="'label'"
-                                    mct-object="child">
-                                </mct-representation>
-                            </span>
-                        </span>
-                        <mct-form
-                            ng-class="{hidden: !toggle.isActive()}"
-                            ng-model="configuration.plot.series[$index]"
-                            structure="plotSeriesForm"
-                            name="plotOptionsState"
-                            class="flex-elem l-flex-row">
-                        </mct-form>
-                    </span>
-                </li>
-            </ul>
-        </ul>
-    </div>
-</div>

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

@@ -1,165 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2017, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT 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 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.
--->
-<span ng-controller="PlotController as plot"
-      class="abs holder holder-plot has-control-bar">
-    <div class="l-control-bar" ng-show="!plot.hideExportButtons">
-         <span class="l-btn-set">
-            <a class="s-button t-export labeled icon-download"
-               ng-click="plot.exportPNG()"
-               title="Export This View's Data as PNG">
-                PNG
-            </a>
-            <a class="s-button t-export labeled"
-               ng-click="plot.exportJPG()"
-               title="Export This View's Data as JPG">
-                JPG
-            </a>
-        </span>
-    </div>
-    <div class="l-view-section">
-        <div class="gl-plot"
-             ng-style="{ height: 100 / plot.getSubPlots().length + '%'}"
-             ng-repeat="subplot in plot.getSubPlots()">
-            <div class="gl-plot-legend">
-                <span class='plot-legend-item'
-                        ng-repeat="telemetryObject in subplot.getTelemetryObjects()"
-                        ng-class="plot.getLegendClass(telemetryObject)">
-                    <span class='plot-color-swatch'
-                          ng-style="{ 'background-color': plot.getColor($index) }">
-                    </span>
-                    <span class='title-label'>{{telemetryObject.getModel().name}}</span>
-                </span>
-            </div>
-
-            <div class="gl-plot-axis-area gl-plot-y">
-                <div class="gl-plot-label gl-plot-y-label">
-                    {{axes[1].active.name}}
-                </div>
-                <div ng-repeat="tick in subplot.getRangeTicks()"
-                     class="gl-plot-tick gl-plot-y-tick-label"
-                     ng-style="{ bottom: (100 * $index / (subplot.getRangeTicks().length - 1)) + '%' }">
-                    {{tick.label | reverse}}
-                </div>
-                <div class="gl-plot-y-options gl-plot-local-controls"
-                     ng-if="axes[1].options.length > 1">
-                    <div class='form-control shell select'>
-                        <select class="form-control input shell"
-                                ng-model="axes[1].active"
-                                ng-options="option.name for option in axes[1].options">
-                        </select>
-                    </div>
-                </div>
-            </div>
-
-            <div class="gl-plot-wrapper-display-area-and-x-axis">
-                <mct-include key="'time-of-interest'"
-                             class="l-toi-holder show-val"
-                             ng-if="toiPerc"
-                             ng-class="{ 'pinned': toiPinned, 'val-to-left': toiPerc > 80 }"
-                             ng-style="{'left': toiPerc + '%'}"></mct-include>
-
-                <div class="gl-plot-coords"
-                     ng-if="subplot.isHovering() && subplot.getHoverCoordinates()">
-                    {{subplot.getHoverCoordinates()}}
-                </div>
-
-                <div class="gl-plot-display-area"
-                     ng-mouseenter="subplot.isHovering(true);"
-                     ng-mouseleave="subplot.isHovering(false)"
-                     ng-class="{ loading: plot.isRequestPending() }">
-
-                    <!-- Out-of-bounds data indicators -->
-                    <!-- ng-show is temporarily hard-coded in next element -->
-                    <div ng-show="false" class="l-oob-data l-oob-data-up"></div>
-                    <div ng-show="false" class="l-oob-data l-oob-data-dwn"></div>
-                    <div class="gl-plot-hash hash-v"
-                         ng-repeat="tick in subplot.getDomainTicks()"
-                         ng-style="{ left: (100 * $index / (subplot.getDomainTicks().length - 1)) + '%', height: '100%' }"
-                         ng-show="$index > 0 && $index < (subplot.getDomainTicks().length - 1)">
-                    </div>
-                    <div class="gl-plot-hash hash-h"
-                         ng-repeat="tick in subplot.getRangeTicks()"
-                         ng-style="{ bottom: (100 * $index / (subplot.getRangeTicks().length - 1)) + '%', width: '100%' }"
-                         ng-show="$index > 0 && $index < (subplot.getRangeTicks().length - 1)">
-                    </div>
-                    <mct-chart draw="subplot.getDrawingObject()"
-                               ng-if="subplot.getTelemetryObjects().length > 0"
-                               ng-mousemove="subplot.hover($event)"
-                               mct-drag="subplot.continueDrag($event)"
-                               mct-drag-down="subplot.startDrag($event)"
-                               mct-drag-up="subplot.endDrag($event); plot.update()">
-                    </mct-chart>
-                    <!-- TODO: Move into correct position; make part of group; infer from set of actions -->
-                    <div class="l-local-controls gl-plot-local-controls t-plot-display-controls"
-                         ng-if="$first">
-                        <a class="s-button icon-arrow-left"
-                           ng-click="plot.stepBackPanZoom()"
-                           ng-show="plot.isZoomed()"
-                           title="Restore previous pan/zoom">
-                        </a>
-                        <a class="s-button icon-arrows-out"
-                           ng-click="plot.unzoom()"
-                           ng-show="plot.isZoomed()"
-                           title="Reset pan/zoom">
-                        </a>
-                        <div class="menu-element s-menu-button menus-to-left {{plot.getMode().cssClass}}"
-                             ng-if="plot.getModeOptions().length > 1"
-                             ng-controller="ClickAwayController as toggle">
-                            <span class="l-click-area" ng-click="toggle.toggle()"></span>
-                            <span>{{plot.getMode().name}}</span>
-                            <div class="menu" ng-show="toggle.isActive()">
-                                <ul>
-                                    <li ng-repeat="option in plot.getModeOptions()"
-                                        ng-click="plot.setMode(option); toggle.setState(false)"
-                                        class="{{option.cssClass}}">
-                                        {{option.name}}
-                                    </li>
-                                </ul>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div ng-if="$last" class="gl-plot-axis-area gl-plot-x">
-                    <div ng-repeat="tick in subplot.getDomainTicks()"
-                         class="gl-plot-tick gl-plot-x-tick-label"
-                         ng-show="$index > 0 && $index < (subplot.getDomainTicks().length - 1)"
-                         ng-style="{ left: (100 * $index / (subplot.getDomainTicks().length - 1)) + '%' }">
-                        {{tick.label | reverse}}
-                    </div>
-                    <div class="gl-plot-label gl-plot-x-label">
-                        {{axes[0].active.name}}
-                    </div>
-                    <div class="gl-plot-x-options gl-plot-local-controls"
-                         ng-if="axes[0].options.length > 1">
-                        <div class='form-control shell select'>
-                            <select class="form-control input shell"
-                                    ng-model="axes[0].active"
-                                    ng-options="option.name for option in axes[0].options">
-                            </select>
-                        </div>
-                    </div>
-
-                </div>
-            </div>
-        </div>
-    </div>
-</span>

platform/features/plot/src/Canvas2DChart.js

@@ -1,117 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2017, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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(
-    [],
-    function () {
-
-        /**
-         * Create a new chart which uses Canvas's 2D API for rendering.
-         *
-         * @memberof platform/features/plot
-         * @constructor
-         * @implements {platform/features/plot.Chart}
-         * @param {CanvasElement} canvas the canvas object to render upon
-         * @throws {Error} an error is thrown if Canvas's 2D API is unavailable.
-         */
-        function Canvas2DChart(canvas) {
-            this.canvas = canvas;
-            this.c2d = canvas.getContext('2d');
-            this.width = canvas.width;
-            this.height = canvas.height;
-            this.dimensions = [this.width, this.height];
-            this.origin = [0, 0];
-
-            if (!this.c2d) {
-                throw new Error("Canvas 2d API unavailable.");
-            }
-        }
-
-        // Convert from logical to physical x coordinates
-        Canvas2DChart.prototype.x = function (v) {
-            return ((v - this.origin[0]) / this.dimensions[0]) * this.width;
-        };
-
-        // Convert from logical to physical y coordinates
-        Canvas2DChart.prototype.y = function (v) {
-            return this.height -
-                ((v - this.origin[1]) / this.dimensions[1]) * this.height;
-        };
-
-        // Set the color to be used for drawing operations
-        Canvas2DChart.prototype.setColor = function (color) {
-            var mappedColor = color.map(function (c, i) {
-                return i < 3 ? Math.floor(c * 255) : (c);
-            }).join(',');
-            this.c2d.strokeStyle = "rgba(" + mappedColor + ")";
-            this.c2d.fillStyle = "rgba(" + mappedColor + ")";
-        };
-
-
-        Canvas2DChart.prototype.clear = function () {
-            var canvas = this.canvas;
-            this.width = canvas.width;
-            this.height = canvas.height;
-            this.c2d.clearRect(0, 0, this.width, this.height);
-        };
-
-        Canvas2DChart.prototype.setDimensions = function (newDimensions, newOrigin) {
-            this.dimensions = newDimensions;
-            this.origin = newOrigin;
-        };
-
-        Canvas2DChart.prototype.drawLine = function (buf, color, points) {
-            var i;
-
-            this.setColor(color);
-
-            // Configure context to draw two-pixel-thick lines
-            this.c2d.lineWidth = 2;
-
-            // Start a new path...
-            if (buf.length > 1) {
-                this.c2d.beginPath();
-                this.c2d.moveTo(this.x(buf[0]), this.y(buf[1]));
-            }
-
-            // ...and add points to it...
-            for (i = 2; i < points * 2; i = i + 2) {
-                this.c2d.lineTo(this.x(buf[i]), this.y(buf[i + 1]));
-            }
-
-            // ...before finally drawing it.
-            this.c2d.stroke();
-        };
-
-        Canvas2DChart.prototype.drawSquare = function (min, max, color) {
-            var x1 = this.x(min[0]),
-                y1 = this.y(min[1]),
-                w = this.x(max[0]) - x1,
-                h = this.y(max[1]) - y1;
-
-            this.setColor(color);
-            this.c2d.fillRect(x1, y1, w, h);
-        };
-
-        return Canvas2DChart;
-    }
-);

platform/features/plot/src/GLChart.js

@@ -1,160 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2017, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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.
- *****************************************************************************/
-
-/**
- * Module defining GLPlot. Created by vwoeltje on 11/12/14.
- */
-define(
-    [],
-    function () {
-
-        // WebGL shader sources (for drawing plain colors)
-        var FRAGMENT_SHADER = [
-                "precision mediump float;",
-                "uniform vec4 uColor;",
-                "void main(void) {",
-                "gl_FragColor = uColor;",
-                "}"
-            ].join('\n'),
-            VERTEX_SHADER = [
-                "attribute vec2 aVertexPosition;",
-                "uniform vec2 uDimensions;",
-                "uniform vec2 uOrigin;",
-                "void main(void) {",
-                "gl_Position = vec4(2.0 * ((aVertexPosition - uOrigin) / uDimensions) - vec2(1,1), 0, 1);",
-                "}"
-            ].join('\n');
-
-        /**
-         * Create a new chart which uses WebGL for rendering.
-         *
-         * @memberof platform/features/plot
-         * @constructor
-         * @implements {platform/features/plot.Chart}
-         * @param {CanvasElement} canvas the canvas object to render upon
-         * @throws {Error} an error is thrown if WebGL is unavailable.
-         */
-        function GLChart(canvas) {
-            var gl = canvas.getContext("webgl", { preserveDrawingBuffer: true }) ||
-                    canvas.getContext("experimental-webgl", { preserveDrawingBuffer: true }),
-                vertexShader,
-                fragmentShader,
-                program,
-                aVertexPosition,
-                uColor,
-                uDimensions,
-                uOrigin;
-
-            // Ensure a context was actually available before proceeding
-            if (!gl) {
-                throw new Error("WebGL unavailable.");
-            }
-
-            // Initialize shaders
-            vertexShader = gl.createShader(gl.VERTEX_SHADER);
-            gl.shaderSource(vertexShader, VERTEX_SHADER);
-            gl.compileShader(vertexShader);
-            fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
-            gl.shaderSource(fragmentShader, FRAGMENT_SHADER);
-            gl.compileShader(fragmentShader);
-
-            // Assemble vertex/fragment shaders into programs
-            program = gl.createProgram();
-            gl.attachShader(program, vertexShader);
-            gl.attachShader(program, fragmentShader);
-            gl.linkProgram(program);
-            gl.useProgram(program);
-
-            // Get locations for attribs/uniforms from the
-            // shader programs (to pass values into shaders at draw-time)
-            aVertexPosition = gl.getAttribLocation(program, "aVertexPosition");
-            uColor = gl.getUniformLocation(program, "uColor");
-            uDimensions = gl.getUniformLocation(program, "uDimensions");
-            uOrigin = gl.getUniformLocation(program, "uOrigin");
-            gl.enableVertexAttribArray(aVertexPosition);
-
-            // Create a buffer to holds points which will be drawn
-            this.buffer = gl.createBuffer();
-
-            // Use a line width of 2.0 for legibility
-            gl.lineWidth(2.0);
-
-            // Enable blending, for smoothness
-            gl.enable(gl.BLEND);
-            gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
-
-            this.gl = gl;
-            this.aVertexPosition = aVertexPosition;
-            this.uColor = uColor;
-            this.uDimensions = uDimensions;
-            this.uOrigin = uOrigin;
-        }
-
-        // Utility function to handle drawing of a buffer;
-        // drawType will determine whether this is a box, line, etc.
-        GLChart.prototype.doDraw = function (drawType, buf, color, points) {
-            var gl = this.gl;
-            gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
-            gl.bufferData(gl.ARRAY_BUFFER, buf, gl.DYNAMIC_DRAW);
-            gl.vertexAttribPointer(this.aVertexPosition, 2, gl.FLOAT, false, 0, 0);
-            gl.uniform4fv(this.uColor, color);
-            gl.drawArrays(drawType, 0, points);
-        };
-
-        GLChart.prototype.clear = function () {
-            var gl = this.gl;
-
-            // Set the viewport size; note that we use the width/height
-            // that our WebGL context reports, which may be lower
-            // resolution than the canvas we requested.
-            gl.viewport(
-                0,
-                0,
-                gl.drawingBufferWidth,
-                gl.drawingBufferHeight
-            );
-            gl.clear(gl.COLOR_BUFFER_BIT + gl.DEPTH_BUFFER_BIT);
-        };
-
-
-        GLChart.prototype.setDimensions = function (dimensions, origin) {
-            var gl = this.gl;
-            if (dimensions && dimensions.length > 0 &&
-                origin && origin.length > 0) {
-                gl.uniform2fv(this.uDimensions, dimensions);
-                gl.uniform2fv(this.uOrigin, origin);
-            }
-        };
-
-        GLChart.prototype.drawLine = function (buf, color, points) {
-            this.doDraw(this.gl.LINE_STRIP, buf, color, points);
-        };
-
-        GLChart.prototype.drawSquare = function (min, max, color) {
-            this.doDraw(this.gl.TRIANGLE_FAN, new Float32Array(
-                min.concat([min[0], max[1]]).concat(max).concat([max[0], min[1]])
-            ), color, 4);
-        };
-
-        return GLChart;
-    }
-);

platform/features/plot/src/MCTChart.js

@@ -1,250 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2017, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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.
- *****************************************************************************/
-
-/**
- * Module defining MCTChart. Created by vwoeltje on 11/12/14.
- */
-define(
-    ["./GLChart", "./Canvas2DChart"],
-    function (GLChart, Canvas2DChart) {
-
-        var TEMPLATE = "<canvas style='position: absolute; background: none; width: 100%; height: 100%;'></canvas>";
-
-        /**
-         * The mct-chart directive provides a canvas element which can be
-         * drawn upon, to support Plot view and similar visualizations.
-         *
-         * This directive takes one attribute, "draw", which is an Angular
-         * expression which will be two-way bound to a drawing object. This
-         * drawing object should contain:
-         *
-         * * `dimensions`: An object describing the logical bounds of the
-         *   drawable area, containing two fields:
-         *   * `origin`: The position, in logical coordinates, of the
-         *     lower-left corner of the chart area. A two-element array.
-         *   * `dimensions`: A two-element array containing the width
-         *     and height of the chart area, in logical coordinates.
-         * * `lines`: An array of lines to be drawn, where each line is
-         *   expressed as an object containing:
-         *   * `buffer`: A Float32Array containing points in the line,
-         *     in logical coordinate, in sequential x/y pairs.
-         *   * `color`: The color of the line, as a four-element RGBA
-         *     array, where each element is in the range of 0.0-1.0
-         *   * `points`: The number of points in the line.
-         * * `boxes`: An array of rectangles to draw in the chart area
-         *   (used for marquee zoom). Each is an object containing:
-         *   * `start`: The first corner of the rectangle (as a two-element
-         *      array, logical coordinates)
-         *   * `end`: The opposite corner of the rectangle (again, as a
-         *      two-element array)
-         *   * `color`: The color of the box, as a four-element RGBA
-         *     array, where each element is in the range of 0.0-1.0
-         *
-         * @memberof platform/features/plot
-         * @constructor
-         */
-        function MCTChart($interval, $log) {
-            // Get an underlying chart implementation
-            function getChart(Charts, canvas) {
-                // Try the first available option...
-                var Chart = Charts[0];
-
-                // This function recursively try-catches all options;
-                // if these all fail, issue a warning.
-                if (!Chart) {
-                    $log.warn("Cannot initialize mct-chart.");
-                    return undefined;
-                }
-
-                // Try first option; if it fails, try remaining options
-                try {
-                    return new Chart(canvas);
-                } catch (e) {
-                    $log.warn([
-                        "Could not instantiate chart",
-                        Chart.name,
-                        ";",
-                        e.message
-                    ].join(" "));
-
-                    return getChart(Charts.slice(1), canvas);
-                }
-            }
-
-            function linkChart(scope, element) {
-                var canvas = element.find("canvas")[0],
-                    activeInterval,
-                    chart;
-
-                // Handle drawing, based on contents of the "draw" object
-                // in scope
-                function doDraw(draw) {
-                    // Ensure canvas context has same resolution
-                    // as canvas element
-                    canvas.width = canvas.offsetWidth;
-                    canvas.height = canvas.offsetHeight;
-
-                    // Clear previous contents
-                    chart.clear();
-
-                    // Nothing to draw if no draw object defined
-                    if (!draw) {
-                        return;
-                    }
-
-                    // Set logical boundaries for the chart
-                    chart.setDimensions(
-                        draw.dimensions || [1, 1],
-                        draw.origin || [0, 0]
-                    );
-
-                    // Draw line segments
-                    (draw.lines || []).forEach(function (line) {
-                        chart.drawLine(
-                            line.buffer,
-                            line.color,
-                            line.points
-                        );
-                    });
-
-                    // Draw boxes (e.g. marquee zoom rect)
-                    (draw.boxes || []).forEach(function (box) {
-                        chart.drawSquare(
-                            box.start,
-                            box.end,
-                            box.color
-                        );
-                    });
-
-                }
-
-                // Issue a drawing call, if-and-only-if canvas size
-                // has changed. This will be called on a timer, since
-                // there is no event to depend on.
-                function drawIfResized() {
-                    if (canvas.width !== canvas.offsetWidth ||
-                            canvas.height !== canvas.offsetHeight) {
-                        doDraw(scope.draw);
-                        scope.$apply();
-                    }
-                }
-
-                // Stop watching for changes to size (scope destroyed)
-                function releaseInterval() {
-                    if (activeInterval) {
-                        $interval.cancel(activeInterval);
-                    }
-                }
-
-                // Switch from WebGL to plain 2D if context is lost
-                function fallbackFromWebGL() {
-                    element.html(TEMPLATE);
-                    canvas = element.find("canvas")[0];
-                    chart = getChart([Canvas2DChart], canvas);
-                    if (chart) {
-                        doDraw(scope.draw);
-                    }
-                }
-
-                // Try to initialize a chart.
-                chart = getChart([GLChart, Canvas2DChart], canvas);
-
-                // If that failed, there's nothing more we can do here.
-                // (A warning will already have been issued)
-                if (!chart) {
-                    return;
-                }
-
-                // WebGL is a bit of a special case; it may work, then fail
-                // later for various reasons, so we need to listen for this
-                // and fall back to plain canvas drawing when it occurs.
-                canvas.addEventListener("webglcontextlost", fallbackFromWebGL);
-
-                // Check for resize, on a timer
-                activeInterval = $interval(drawIfResized, 1000, 0, false);
-
-                // Watch "draw" for external changes to the set of
-                // things to be drawn.
-                scope.$watchCollection("draw", doDraw);
-
-                // Stop checking for resize when scope is destroyed
-                scope.$on("$destroy", releaseInterval);
-            }
-
-            return {
-                // Apply directive only to elements
-                restrict: "E",
-
-                // Template to use (a canvas element)
-                template: TEMPLATE,
-
-                // Link function; set up scope
-                link: linkChart,
-
-                // Initial, isolate scope for the directive
-                scope: { draw: "=" }
-            };
-        }
-
-        /**
-         * @interface platform/features/plot.Chart
-         * @private
-         */
-
-        /**
-         * Clear the chart.
-         * @method platform/features/plot.Chart#clear
-         */
-        /**
-         * Set the logical boundaries of the chart.
-         * @param {number[]} dimensions the horizontal and
-         *        vertical dimensions of the chart
-         * @param {number[]} origin the horizontal/vertical
-         *        origin of the chart
-         * @memberof platform/features/plot.Chart#setDimensions
-         */
-        /**
-         * Draw the supplied buffer as a line strip (a sequence
-         * of line segments), in the chosen color.
-         * @param {Float32Array} buf the line strip to draw,
-         *        in alternating x/y positions
-         * @param {number[]} color the color to use when drawing
-         *        the line, as an RGBA color where each element
-         *        is in the range of 0.0-1.0
-         * @param {number} points the number of points to draw
-         * @memberof platform/features/plot.Chart#drawLine
-         */
-        /**
-         * Draw a rectangle extending from one corner to another,
-         * in the chosen color.
-         * @param {number[]} min the first corner of the rectangle
-         * @param {number[]} max the opposite corner
-         * @param {number[]} color the color to use when drawing
-         *        the rectangle, as an RGBA color where each element
-         *        is in the range of 0.0-1.0
-         * @memberof platform/features/plot.Chart#drawSquare
-         */
-
-        return MCTChart;
-    }
-);
-

platform/features/plot/src/PlotController.js

@@ -1,437 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2017, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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.
- *****************************************************************************/
-
-/**
- * This bundle adds a "Plot" view for numeric telemetry data.
- * @namespace platform/features/plot
- */
-define(
-    [
-        "./elements/PlotUpdater",
-        "./elements/PlotPalette",
-        "./elements/PlotAxis",
-        "./elements/PlotLimitTracker",
-        "./elements/PlotTelemetryFormatter",
-        "./modes/PlotModeOptions",
-        "./SubPlotFactory"
-    ],
-    function (
-        PlotUpdater,
-        PlotPalette,
-        PlotAxis,
-        PlotLimitTracker,
-        PlotTelemetryFormatter,
-        PlotModeOptions,
-        SubPlotFactory
-    ) {
-
-        var AXIS_DEFAULTS = [
-                { "name": "Time" },
-                { "name": "Value" }
-            ];
-
-        /**
-         * The PlotController is responsible for any computation/logic
-         * associated with displaying the plot view. Specifically, these
-         * responsibilities include:
-         *
-         * * Describing axes and labeling.
-         * * Handling user interactions.
-         * * Deciding what needs to be drawn in the chart area.
-         *
-         * @memberof platform/features/plot
-         * @constructor
-         */
-        function PlotController(
-            $scope,
-            $element,
-            exportImageService,
-            telemetryFormatter,
-            telemetryHandler,
-            throttle,
-            PLOT_FIXED_DURATION,
-            openmct
-        ) {
-            var self = this,
-                plotTelemetryFormatter =
-                    new PlotTelemetryFormatter(telemetryFormatter),
-                subPlotFactory =
-                    new SubPlotFactory(plotTelemetryFormatter),
-                cachedObjects = [],
-                updater,
-                lastBounds,
-                lastRange,
-                lastDomain,
-                handle;
-            var timeAPI = openmct.time;
-
-            // Populate the scope with axis information (specifically, options
-            // available for each axis.)
-            function setupAxes(metadatas) {
-                $scope.axes.forEach(function (axis) {
-                    axis.updateMetadata(metadatas);
-                });
-            }
-
-            // Trigger an update of a specific subplot;
-            // used in a loop to update all subplots.
-            function updateSubplot(subplot) {
-                subplot.update();
-            }
-
-            // Set up available modes (stacked/overlaid), based on the
-            // set of telemetry objects in this plot view.
-            function setupModes(telemetryObjects) {
-                if (cachedObjects !== telemetryObjects) {
-                    cachedObjects = telemetryObjects;
-                    self.modeOptions = new PlotModeOptions(
-                        telemetryObjects || [],
-                        subPlotFactory
-                    );
-                }
-            }
-
-            // Change the displayable bounds
-            function setBasePanZoom(bounds) {
-                var start = bounds.start,
-                    end = bounds.end;
-                if (updater) {
-                    updater.setDomainBounds(start, end);
-                    self.update();
-                }
-                lastBounds = bounds;
-            }
-
-            // Reinstantiate the plot updater (e.g. because we have a
-            // new subscription.) This will clear the plot.
-            function recreateUpdater() {
-                var domain = $scope.axes[0].active.key,
-                    range = $scope.axes[1].active.key,
-                    duration = PLOT_FIXED_DURATION;
-
-                updater = new PlotUpdater(handle, domain, range, duration);
-                lastDomain = domain;
-                lastRange = range;
-
-                self.limitTracker = new PlotLimitTracker(handle, range);
-
-                // Keep any externally-provided bounds
-                if (lastBounds) {
-                    setBasePanZoom(lastBounds);
-                }
-            }
-
-            function getUpdater() {
-                if (!updater) {
-                    recreateUpdater();
-                }
-                return updater;
-            }
-
-            // Handle new telemetry data in this plot
-            function updateValues() {
-                self.pending = false;
-                if (handle) {
-                    setupModes(handle.getTelemetryObjects());
-                    setupAxes(handle.getMetadata());
-                    getUpdater().update();
-                    self.modeOptions.getModeHandler().plotTelemetry(updater);
-                    self.limitTracker.update();
-                    self.update();
-                }
-            }
-
-            // Display new historical data as it becomes available
-            function addHistoricalData(domainObject, series) {
-                self.pending = false;
-                getUpdater().addHistorical(domainObject, series);
-                self.modeOptions.getModeHandler().plotTelemetry(updater);
-                self.update();
-            }
-
-            // Issue a new request for historical telemetry
-            function requestTelemetry() {
-                if (handle) {
-                    handle.request({}, addHistoricalData);
-                }
-            }
-
-            // Requery for data entirely
-            function replot() {
-                if (handle) {
-                    updater = undefined;
-                    requestTelemetry();
-                }
-            }
-
-            function changeTimeOfInterest(timeOfInterest) {
-                if (timeOfInterest !== undefined) {
-                    var bounds = timeAPI.bounds();
-                    var range = bounds.end - bounds.start;
-                    $scope.toiPerc = ((timeOfInterest - bounds.start) / range) * 100;
-                    $scope.toiPinned = true;
-                } else {
-                    $scope.toiPerc = undefined;
-                    $scope.toiPinned = false;
-                }
-            }
-
-            // Create a new subscription; telemetrySubscriber gets
-            // to do the meaningful work here.
-            function subscribe(domainObject) {
-                if (handle) {
-                    handle.unsubscribe();
-                }
-                handle = domainObject && telemetryHandler.handle(
-                    domainObject,
-                    updateValues,
-                    true // Lossless
-                );
-                replot();
-
-                changeTimeOfInterest(timeAPI.timeOfInterest());
-                timeAPI.on("timeOfInterest", changeTimeOfInterest);
-            }
-
-            // Release the current subscription (called when scope is destroyed)
-            function releaseSubscription() {
-                if (handle) {
-                    handle.unsubscribe();
-                    handle = undefined;
-                }
-                timeAPI.off("timeOfInterest", changeTimeOfInterest);
-            }
-
-            function requery() {
-                self.pending = true;
-                releaseSubscription();
-                subscribe($scope.domainObject);
-            }
-
-            function updateDomainFormat() {
-                var domainAxis = $scope.axes[0];
-                plotTelemetryFormatter
-                    .setDomainFormat(domainAxis.active.format);
-            }
-
-            function domainRequery(newDomain) {
-                if (newDomain !== lastDomain) {
-                    updateDomainFormat();
-                    requery();
-                }
-            }
-
-            function rangeRequery(newRange) {
-                if (newRange !== lastRange) {
-                    requery();
-                }
-            }
-
-            // Respond to a display bounds change (requery for data)
-            function changeDisplayBounds(event, bounds, follow) {
-                //'hack' for follow mode
-                if (follow === true) {
-                    setBasePanZoom(bounds);
-                } else {
-                    var domainAxis = $scope.axes[0];
-
-                    if (bounds.domain) {
-                        domainAxis.chooseOption(bounds.domain);
-                    }
-                    updateDomainFormat();
-                    setBasePanZoom(bounds);
-                    requery();
-                }
-                self.setUnsynchedStatus($scope.domainObject, follow && self.isZoomed());
-                changeTimeOfInterest(timeAPI.timeOfInterest());
-            }
-
-            this.modeOptions = new PlotModeOptions([], subPlotFactory);
-            this.updateValues = updateValues;
-
-            // Create a throttled update function
-            this.scheduleUpdate = throttle(function () {
-                self.modeOptions.getModeHandler().getSubPlots()
-                    .forEach(updateSubplot);
-            });
-
-            self.pending = true;
-            self.$element = $element;
-            self.exportImageService = exportImageService;
-
-            // Initialize axes; will get repopulated when telemetry
-            // metadata becomes available.
-            $scope.axes = [
-                new PlotAxis("domains", [], AXIS_DEFAULTS[0]),
-                new PlotAxis("ranges", [], AXIS_DEFAULTS[1])
-            ];
-
-            //Are some initialized bounds defined?
-            var bounds = timeAPI.bounds();
-            if (bounds &&
-                bounds.start !== undefined &&
-                bounds.end !== undefined) {
-                changeDisplayBounds(undefined, timeAPI.bounds(), timeAPI.clock() !== undefined);
-            }
-
-            // Watch for changes to the selected axis
-            $scope.$watch("axes[0].active.key", domainRequery);
-            $scope.$watch("axes[1].active.key", rangeRequery);
-
-            // Subscribe to telemetry when a domain object becomes available
-            $scope.$watch('domainObject', subscribe);
-
-            // Respond to external bounds changes
-            $scope.$on("telemetry:display:bounds", changeDisplayBounds);
-
-            // Unsubscribe when the plot is destroyed
-            $scope.$on("$destroy", releaseSubscription);
-        }
-
-        /**
-         * Get the color (as a style-friendly string) to use
-         * for plotting the trace at the specified index.
-         * @param {number} index the index of the trace
-         * @returns {string} the color, in #RRGGBB form
-         */
-        PlotController.prototype.getColor = function (index) {
-            return PlotPalette.getStringColor(index);
-        };
-
-        /**
-         * Check if the plot is zoomed or panned out
-         * of its default state (to determine whether back/unzoom
-         * controls should be shown)
-         * @returns {boolean} true if not in default state
-         */
-        PlotController.prototype.isZoomed = function () {
-            return this.modeOptions.getModeHandler().isZoomed();
-        };
-
-        /**
-         * Undo the most recent pan/zoom change and restore
-         * the prior state.
-         */
-        PlotController.prototype.stepBackPanZoom = function () {
-            return this.modeOptions.getModeHandler().stepBackPanZoom();
-        };
-
-        /**
-         * Undo all pan/zoom changes and restore the initial state.
-         */
-        PlotController.prototype.unzoom = function () {
-            return this.modeOptions.getModeHandler().unzoom();
-        };
-
-        /**
-         * Get the mode options (Stacked/Overlaid) that are applicable
-         * for this plot.
-         */
-        PlotController.prototype.getModeOptions = function () {
-            return this.modeOptions.getModeOptions();
-        };
-
-        /**
-         * Get the current mode that is applicable to this plot. This
-         * will include key, name, and cssClass fields.
-         */
-        PlotController.prototype.getMode = function () {
-            return this.modeOptions.getMode();
-        };
-
-        /**
-         * Set the mode which should be active in this plot.
-         * @param mode one of the mode options returned from
-         *        getModeOptions()
-         */
-        PlotController.prototype.setMode = function (mode) {
-            this.modeOptions.setMode(mode);
-            this.updateValues();
-        };
-
-        /**
-         * Get all individual plots contained within this Plot view.
-         * (Multiple may be contained when in Stacked mode).
-         * @returns {SubPlot[]} all subplots in this Plot view
-         */
-        PlotController.prototype.getSubPlots = function () {
-            return this.modeOptions.getModeHandler().getSubPlots();
-        };
-
-        /**
-         * Get the CSS class to apply to the legend for this domain
-         * object; this will reflect limit state.
-         * @returns {string} the CSS class
-         */
-        PlotController.prototype.getLegendClass = function (telemetryObject) {
-            return this.limitTracker &&
-                this.limitTracker.getLegendClass(telemetryObject);
-        };
-
-        /**
-         * Explicitly update all plots.
-         */
-        PlotController.prototype.update = function () {
-            this.scheduleUpdate();
-        };
-
-        /**
-         * Check if a request is pending (to show the wait spinner)
-         */
-        PlotController.prototype.isRequestPending = function () {
-            // Placeholder; this should reflect request state
-            // when requesting historical telemetry
-            return this.pending;
-        };
-
-        PlotController.prototype.setUnsynchedStatus = function (domainObject, status) {
-            if (domainObject.hasCapability('status')) {
-                domainObject.getCapability('status').set('timeconductor-unsynced', status);
-            }
-        };
-
-        /**
-         * Export the plot to PNG
-         */
-        PlotController.prototype.exportPNG = function () {
-            var self = this;
-            self.hideExportButtons = true;
-            self.exportImageService.exportPNG(self.$element[0], "plot.png").finally(function () {
-                self.hideExportButtons = false;
-            });
-        };
-
-        /**
-         * Export the plot to JPG
-         */
-        PlotController.prototype.exportJPG = function () {
-            var self = this;
-            self.hideExportButtons = true;
-            self.exportImageService.exportJPG(self.$element[0], "plot.jpg").finally(function () {
-                self.hideExportButtons = false;
-            });
-        };
-
-        return PlotController;
-    }
-);
-

platform/features/plot/src/PlotOptionsController.js

@@ -1,195 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2017, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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(
-    ['./PlotOptionsForm'],
-    function (PlotOptionsForm) {
-
-        /**
-         * Notes on implementation of plot options
-         *
-         * Multiple y-axes will have to be handled with multiple forms as
-         * they will need to be stored on distinct model object
-         *
-         * Likewise plot series options per-child will need to be separate
-         * forms.
-         */
-
-        /**
-         * The LayoutController is responsible for supporting the
-         * Layout view. It arranges frames according to saved configuration
-         * and provides methods for updating these based on mouse
-         * movement.
-         * @memberof platform/features/plot
-         * @constructor
-         * @param {Scope} $scope the controller's Angular scope
-         */
-        function PlotOptionsController($scope) {
-
-            var self = this;
-            this.$scope = $scope;
-            this.domainObject = $scope.domainObject;
-            this.configuration = this.domainObject.getModel().configuration || {};
-            this.plotOptionsForm = new PlotOptionsForm();
-            this.composition = [];
-            this.watches = [];
-
-            /*
-             Listen for changes to the domain object and update the object's
-             children.
-             */
-            this.mutationListener = this.domainObject.getCapability('mutation').listen(function (model) {
-                if (self.hasCompositionChanged(self.composition, model.composition)) {
-                    self.updateChildren();
-                }
-            });
-
-            /*
-             Set form structures on scope
-             */
-            $scope.plotSeriesForm = this.plotOptionsForm.plotSeriesForm;
-            $scope.xAxisForm = this.plotOptionsForm.xAxisForm;
-            $scope.yAxisForm = this.plotOptionsForm.yAxisForm;
-
-            $scope.$on("$destroy", function () {
-                //Clean up any listeners on destruction of controller
-                self.mutationListener();
-            });
-
-            this.defaultConfiguration();
-            this.updateChildren();
-
-            /*
-             * Setup a number of watches for changes to form values. On
-             * change, update the model configuration via mutation
-             */
-            $scope.$watchCollection('configuration.plot.yAxis', function (newValue, oldValue) {
-                self.updateConfiguration(newValue, oldValue);
-            });
-            $scope.$watchCollection('configuration.plot.xAxis', function (newValue, oldValue) {
-                self.updateConfiguration(newValue, oldValue);
-            });
-
-            this.watchSeries();
-
-        }
-
-        /**
-         * Unregister all watches for series data (ie. the configuration for
-         * child objects)
-         * @private
-         */
-        PlotOptionsController.prototype.clearSeriesWatches = function () {
-            this.watches.forEach(function (watch) {
-                watch();
-            });
-            this.watches = [];
-        };
-
-        /**
-         * Attach watches for each object in the plot's composition
-         * @private
-         */
-        PlotOptionsController.prototype.watchSeries = function () {
-            var self = this;
-
-            this.clearSeriesWatches();
-
-            (self.$scope.children || []).forEach(function (child, index) {
-                self.watches.push(
-                    self.$scope.$watchCollection(
-                        'configuration.plot.series[' + index + ']',
-                        function (newValue, oldValue) {
-                            self.updateConfiguration(newValue, oldValue);
-                        }
-                    )
-                );
-            });
-        };
-
-        /**
-         * Determine whether the changes to the model that triggered a
-         * mutation event were purely compositional.
-         *
-         * @private
-         */
-        PlotOptionsController.prototype.hasCompositionChanged = function (oldComposition, newComposition) {
-            // Framed slightly strangely, but the boolean logic is
-            // easier to follow for the unchanged case.
-            var isUnchanged = oldComposition === newComposition ||
-                    (
-                        oldComposition.length === newComposition.length &&
-                        oldComposition.every(function (currentValue, index) {
-                            return newComposition[index] && currentValue === newComposition[index];
-                        })
-                    );
-            return !isUnchanged;
-        };
-
-        /**
-         * Default the plot options model
-         *
-         * @private
-         */
-        PlotOptionsController.prototype.defaultConfiguration = function () {
-            this.configuration.plot = this.configuration.plot || {};
-            this.configuration.plot.xAxis = this.configuration.plot.xAxis || {};
-            this.configuration.plot.yAxis = this.configuration.plot.yAxis || {}; // y-axes will be associative array keyed on axis key
-            this.configuration.plot.series = this.configuration.plot.series || []; // series will be associative array keyed on sub-object id
-            this.$scope.configuration = this.configuration;
-        };
-
-        /**
-         * When a child is added to, or removed from a plot, update the
-         * plot options model
-         * @private
-         */
-        PlotOptionsController.prototype.updateChildren = function () {
-            var self = this;
-            this.domainObject.useCapability('composition').then(function (children) {
-                self.$scope.children = children;
-                self.composition = self.domainObject.getModel().composition;
-                children.forEach(function (child, index) {
-                    self.configuration.plot.series[index] =
-                        self.configuration.plot.series[index] || {'id': child.getId()};
-                });
-                self.watchSeries();
-            });
-        };
-
-        /**
-         * On changes to the form, update the configuration on the domain
-         * object
-         * @private
-         */
-        PlotOptionsController.prototype.updateConfiguration = function () {
-            var self = this;
-            this.domainObject.useCapability('mutation', function (model) {
-                model.configuration = model.configuration || {};
-                model.configuration.plot = self.configuration.plot;
-            });
-        };
-
-        return PlotOptionsController;
-    }
-);
-

platform/features/plot/src/PlotOptionsForm.js

@@ -1,150 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2017, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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(
-    [],
-    function () {
-
-        /**
-         * A class for encapsulating structure and behaviour of the plot
-         * options form
-         * @memberOf platform/features/plot
-         * @param topic
-         * @constructor
-         */
-        function PlotOptionsForm() {
-
-            /*
-             Defined below are the form structures for the plot options.
-             */
-            this.xAxisForm = {
-                'name': 'x-axis',
-                'sections': [{
-                    'name': 'x-axis',
-                    'rows': [
-                        {
-                            'name': 'Domain',
-                            'control': 'select',
-                            'key': 'key',
-                            'options': [
-                                {'name': 'SCET', 'value': 'scet'},
-                                {'name': 'SCLK', 'value': 'sclk'},
-                                {'name': 'LST', 'value': 'lst'}
-                            ]
-                        }
-                    ]
-                }]};
-
-            this.yAxisForm = {
-                'name': 'y-axis',
-                'sections': [{
-                    // Will need to be repeated for each y-axis, with a
-                    // distinct name for each. Ideally the name of the axis
-                    // itself.
-                    'name': 'y-axis',
-                    'rows': [
-                    {
-                        'name': 'Range',
-                        'control': 'select',
-                        'key': 'key',
-                        'options': [
-                            {'name': 'EU', 'value': 'eu'},
-                            {'name': 'DN', 'value': 'dn'},
-                            {'name': 'Status', 'value': 'status'}
-                        ]
-                    },
-                    {
-                        'name': 'Autoscale',
-                        'control': 'checkbox',
-                        'key': 'autoscale'
-                    },
-                    {
-                        'name': 'Min',
-                        'control': 'textfield',
-                        'key': 'min',
-                        'pattern': '[0-9]',
-                        'inputsize' : 'sm'
-                    },
-                    {
-                        'name': 'Max',
-                        'control': 'textfield',
-                        'key': 'max',
-                        'pattern': '[0-9]',
-                        'inputsize' : 'sm'
-                    }
-                ]
-                }]
-            };
-            this.plotSeriesForm = {
-                'name': 'Series Options',
-                'sections': [
-                    {
-                        rows: [
-                        {
-                            'name': 'Color',
-                            'control': 'color',
-                            'key': 'color'
-                        }]
-                    },
-                    {
-                        'rows': [
-                            {
-                                'name': 'Markers',
-                                'control': 'checkbox',
-                                'key': 'markers',
-                                'layout': 'control-first'
-                            }
-                        ]
-                    },
-                    {
-                        'rows': [
-                            {
-                                'name': 'No Line',
-                                'control': 'radio',
-                                'key': 'lineType',
-                                'value': 'noLine',
-                                'layout': 'control-first'
-                            },
-                            {
-                                'name': 'Step Line',
-                                'control': 'radio',
-                                'key': 'lineType',
-                                'value': 'stepLine',
-                                'layout': 'control-first'
-                            },
-                            {
-                                'name': 'Linear Line',
-                                'control': 'radio',
-                                'key': 'lineType',
-                                'value': 'linearLine',
-                                'layout': 'control-first'
-                            }
-                        ]
-                    }
-                ]
-            };
-        }
-
-        return PlotOptionsForm;
-    }
-);
-

platform/features/plot/src/SubPlot.js

@@ -1,415 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2017, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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(
-    [
-        './elements/PlotPosition',
-        './elements/PlotTickGenerator'
-    ],
-    function (PlotPosition, PlotTickGenerator) {
-
-        var DOMAIN_TICKS = 5,
-            RANGE_TICKS = 7;
-
-        /**
-         * A SubPlot is an individual plot within a Plot View (which
-         * may contain multiple plots, specifically when in Stacked
-         * plot mode.)
-         * @memberof platform/features/plot
-         * @constructor
-         * @param {DomainObject[]} telemetryObjects the domain objects
-         *        which will be plotted in this sub-plot
-         * @param {PlotPanZoomStack} panZoomStack the stack of pan-zoom
-         *        states which is applicable to this sub-plot
-         * @param {TelemetryFormatter} telemetryFormatter the telemetry
-         *        formatting service; used to convert domain/range values
-         *        from telemetry data sets to a human-readable form.
-         */
-        function SubPlot(telemetryObjects, panZoomStack, telemetryFormatter) {
-            // We are used from a template often, so maintain
-            // state in local variables to allow for fast look-up,
-            // as is normal for controllers.
-            this.telemetryObjects = telemetryObjects;
-            this.domainTicks = [];
-            this.rangeTicks = [];
-            this.formatter = telemetryFormatter;
-            this.draw = {};
-            this.hovering = false;
-            this.panZoomStack = panZoomStack;
-
-            // Start with the right initial drawing bounds,
-            // tick marks
-            this.updateDrawingBounds();
-            this.updateTicks();
-        }
-
-        /**
-         * Tests whether this subplot has domain data to show for the current pan/zoom level. Absence of domain data
-         * implies that there is no range data displayed either
-         * @returns {boolean} true if domain data exists for the current pan/zoom level
-         */
-        SubPlot.prototype.hasDomainData = function () {
-            return this.panZoomStack &&
-                this.panZoomStack.getDimensions()[0] > 0;
-        };
-
-        // Utility function for filtering out empty strings.
-        function isNonEmpty(v) {
-            return typeof v === 'string' && v !== "";
-        }
-
-        // Converts from pixel coordinates to domain-range,
-        // to interpret mouse gestures.
-        SubPlot.prototype.mousePositionToDomainRange = function (mousePosition) {
-            return new PlotPosition(
-                mousePosition.x,
-                mousePosition.y,
-                mousePosition.width,
-                mousePosition.height,
-                this.panZoomStack
-            ).getPosition();
-        };
-
-        // Utility function to get the mouse position (in x,y
-        // pixel coordinates in the canvas area) from a mouse
-        // event object.
-        SubPlot.prototype.toMousePosition = function ($event) {
-            var bounds = this.subPlotBounds;
-
-            return {
-                x: $event.clientX - bounds.left,
-                y: $event.clientY - bounds.top,
-                width: bounds.width,
-                height: bounds.height
-            };
-        };
-
-        // Convert a domain-range position to a displayable
-        // position. This will subtract the domain offset, which
-        // is used to bias domain values to minimize loss-of-precision
-        // associated with conversion to a 32-bit floating point
-        // format (which is needed in the chart area itself, by WebGL.)
-        SubPlot.prototype.toDisplayable = function (position) {
-            return [position[0] - this.domainOffset, position[1]];
-        };
-
-        // Update the current hover coordinates
-        SubPlot.prototype.updateHoverCoordinates = function () {
-            var formatter = this.formatter;
-
-            // Utility, for map/forEach loops. Index 0 is domain,
-            // index 1 is range.
-            function formatValue(v, i) {
-                return i ?
-                    formatter.formatRangeValue(v) :
-                    formatter.formatDomainValue(v);
-            }
-
-            this.hoverCoordinates = this.mousePosition &&
-                this.mousePositionToDomainRange(this.mousePosition)
-                    .map(formatValue)
-                    .filter(isNonEmpty)
-                    .join(", ");
-        };
-
-        // Update the drawable marquee area to reflect current
-        // mouse position (or don't show it at all, if no marquee
-        // zoom is in progress)
-        SubPlot.prototype.updateMarqueeBox = function () {
-            // Express this as a box in the draw object, which
-            // is passed to an mct-chart in the template for rendering.
-            this.draw.boxes = this.marqueeStart ?
-                [{
-                    start: this.toDisplayable(
-                        this.mousePositionToDomainRange(this.marqueeStart)
-                    ),
-                    end: this.toDisplayable(
-                        this.mousePositionToDomainRange(this.mousePosition)
-                    ),
-                    color: [1, 1, 1, 0.5]
-                }] : undefined;
-        };
-
-        // Update the bounds (origin and dimensions) of the drawing area.
-        SubPlot.prototype.updateDrawingBounds = function () {
-            var panZoom = this.panZoomStack.getPanZoom();
-
-            // Communicate pan-zoom state from stack to the draw object
-            // which is passed to mct-chart in the template.
-            this.draw.dimensions = panZoom.dimensions;
-            this.draw.origin = [
-                panZoom.origin[0] - this.domainOffset,
-                panZoom.origin[1]
-            ];
-        };
-
-        // Update tick marks in scope.
-        SubPlot.prototype.updateTicks = function () {
-            var tickGenerator =
-                new PlotTickGenerator(this.panZoomStack, this.formatter);
-
-            this.domainTicks =
-                tickGenerator.generateDomainTicks(DOMAIN_TICKS);
-            this.rangeTicks =
-                tickGenerator.generateRangeTicks(RANGE_TICKS);
-        };
-
-        SubPlot.prototype.updatePan = function () {
-            var start, current, delta, nextOrigin;
-
-            // Clear the previous panning pan-zoom state
-            this.panZoomStack.popPanZoom();
-
-            // Calculate what the new resulting pan-zoom should be
-            start = this.mousePositionToDomainRange(
-                this.panStart,
-                this.panZoomStack
-            );
-            current = this.mousePositionToDomainRange(
-                this.mousePosition,
-                this.panZoomStack
-            );
-
-            delta = [current[0] - start[0], current[1] - start[1]];
-            nextOrigin = [
-                this.panStartBounds.origin[0] - delta[0],
-                this.panStartBounds.origin[1] - delta[1]
-            ];
-
-            // ...and push a new one at the current mouse position
-            this.panZoomStack
-                .pushPanZoom(nextOrigin, this.panStartBounds.dimensions);
-        };
-
-        /**
-         * Get the set of domain objects which are being
-         * represented in this sub-plot.
-         * @returns {DomainObject[]} the domain objects which
-         *          will have data plotted in this sub-plot
-         */
-        SubPlot.prototype.getTelemetryObjects = function () {
-            return this.telemetryObjects;
-        };
-
-        /**
-         * Get ticks mark information appropriate for using in the
-         * template for this sub-plot's domain axis, as prepared
-         * by the PlotTickGenerator.
-         * @returns {Array} tick marks for the domain axis
-         */
-        SubPlot.prototype.getDomainTicks = function () {
-            return this.domainTicks;
-        };
-
-        /**
-         * Get ticks mark information appropriate for using in the
-         * template for this sub-plot's range axis, as prepared
-         * by the PlotTickGenerator.
-         * @returns {Array} tick marks for the range axis
-         */
-        SubPlot.prototype.getRangeTicks = function () {
-            return this.rangeTicks;
-        };
-
-        /**
-         * Get the drawing object associated with this sub-plot;
-         * this object will be passed to the mct-chart in which
-         * this sub-plot's lines will be plotted, as its "draw"
-         * attribute, and should have the same internal format
-         * expected by that directive.
-         * @return {object} the drawing object
-         */
-        SubPlot.prototype.getDrawingObject = function () {
-            return this.draw;
-        };
-
-        /**
-         * Get the coordinates (as displayable text) for the
-         * current mouse position.
-         * @returns {string[]} the displayable domain and range
-         *          coordinates over which the mouse is hovered
-         */
-        SubPlot.prototype.getHoverCoordinates = function () {
-            return this.hoverCoordinates;
-        };
-
-        /**
-         * Handle mouse movement over the chart area.
-         * @param $event the mouse event
-         * @memberof platform/features/plot.SubPlot#
-         */
-        SubPlot.prototype.hover = function ($event) {
-            this.hovering = true;
-            this.subPlotBounds = $event.target.getBoundingClientRect();
-            this.mousePosition = this.toMousePosition($event);
-            //If there is a domain to display, show hover coordinates, otherwise hover coordinates are meaningless
-            if (this.hasDomainData()) {
-                this.updateHoverCoordinates();
-            }
-            if (this.marqueeStart) {
-                this.updateMarqueeBox();
-            }
-            if (this.panStart) {
-                this.updatePan();
-                this.updateDrawingBounds();
-                this.updateTicks();
-            }
-        };
-
-        /**
-         * Continue a previously-start pan or zoom gesture.
-         * @param $event the mouse event
-         * @memberof platform/features/plot.SubPlot#
-         */
-        SubPlot.prototype.continueDrag = function ($event) {
-            this.mousePosition = this.toMousePosition($event);
-            if (this.marqueeStart) {
-                this.updateMarqueeBox();
-            }
-            if (this.panStart) {
-                this.updatePan();
-                this.updateDrawingBounds();
-                this.updateTicks();
-            }
-        };
-
-        /**
-         * Initiate a marquee zoom action.
-         * @param $event the mouse event
-         */
-        SubPlot.prototype.startDrag = function ($event) {
-            this.subPlotBounds = $event.target.getBoundingClientRect();
-            this.mousePosition = this.toMousePosition($event);
-            // Treat any modifier key as a pan
-            if ($event.altKey || $event.shiftKey || $event.ctrlKey) {
-                // Start panning
-                this.panStart = this.mousePosition;
-                this.panStartBounds = this.panZoomStack.getPanZoom();
-                // We're starting a pan, so add this back as a
-                // state on the stack; it will get replaced
-                // during the pan.
-                this.panZoomStack.pushPanZoom(
-                    this.panStartBounds.origin,
-                    this.panStartBounds.dimensions
-                );
-                $event.preventDefault();
-            } else {
-                // Start marquee zooming
-                this.marqueeStart = this.mousePosition;
-                this.updateMarqueeBox();
-            }
-        };
-
-        /**
-         * Complete a marquee zoom action.
-         * @param $event the mouse event
-         */
-        SubPlot.prototype.endDrag = function ($event) {
-            var self = this;
-
-            // Perform a marquee zoom.
-            function marqueeZoom(start, end) {
-                // Determine what boundary is described by the marquee,
-                // in domain-range values. Use the minima for origin, so that
-                // it doesn't matter what direction the user marqueed in.
-                var a = self.mousePositionToDomainRange(start),
-                    b = self.mousePositionToDomainRange(end),
-                    origin = [
-                        Math.min(a[0], b[0]),
-                        Math.min(a[1], b[1])
-                    ],
-                    dimensions = [
-                        Math.max(a[0], b[0]) - origin[0],
-                        Math.max(a[1], b[1]) - origin[1]
-                    ];
-
-                // Proceed with zoom if zoom dimensions are non zeros
-                if (!(dimensions[0] === 0 && dimensions[1] === 0)) {
-                    // Push the new state onto the pan-zoom stack
-                    self.panZoomStack.pushPanZoom(origin, dimensions);
-
-                    // Make sure tick marks reflect new bounds
-                    self.updateTicks();
-                }
-            }
-
-            this.mousePosition = this.toMousePosition($event);
-            this.subPlotBounds = undefined;
-            if (this.marqueeStart) {
-                marqueeZoom(this.marqueeStart, this.mousePosition);
-                this.marqueeStart = undefined;
-                this.updateMarqueeBox();
-                this.updateDrawingBounds();
-                this.updateTicks();
-            }
-            if (this.panStart) {
-                // End panning
-                this.panStart = undefined;
-                this.panStartBounds = undefined;
-            }
-        };
-
-        /**
-         * Update the drawing bounds, marquee box, and
-         * tick marks for this subplot.
-         */
-        SubPlot.prototype.update = function () {
-            this.updateDrawingBounds();
-            this.updateMarqueeBox();
-            this.updateTicks();
-        };
-
-        /**
-         * Set the domain offset associated with this sub-plot.
-         * A domain offset is subtracted from all domain
-         * before lines are drawn to avoid artifacts associated
-         * with the use of 32-bit floats when domain values
-         * are often timestamps (due to insufficient precision.)
-         * A SubPlot will be drawing boxes (for marquee zoom) in
-         * the same offset coordinate space, so it needs to know
-         * the value of this to position that marquee box
-         * correctly.
-         * @param {number} value the domain offset
-         */
-        SubPlot.prototype.setDomainOffset = function (value) {
-            this.domainOffset = value;
-        };
-
-        /**
-         * When used with no argument, check whether or not the user
-         * is currently hovering over this subplot. When used with
-         * an argument, set that state.
-         * @param {boolean} [state] the new hovering state
-         * @returns {boolean} the hovering state
-         */
-        SubPlot.prototype.isHovering = function (state) {
-            if (state !== undefined) {
-                this.hovering = state;
-            }
-            return this.hovering;
-        };
-
-        return SubPlot;
-
-    }
-);
-

platform/features/plot/src/SubPlotFactory.js

@@ -1,59 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2017, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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(
-    ["./SubPlot"],
-    function (SubPlot) {
-
-        /**
-         * Utility factory; wraps the SubPlot constructor and adds
-         * in a reference to the telemetryFormatter, which will be
-         * used to represent telemetry values (timestamps or data
-         * values) as human-readable strings.
-         * @memberof platform/features/plot
-         * @constructor
-         */
-        function SubPlotFactory(telemetryFormatter) {
-            this.telemetryFormatter = telemetryFormatter;
-        }
-
-        /**
-         * Instantiate a new sub-plot.
-         * @param {DomainObject[]} telemetryObjects the domain objects
-         *        which will be plotted in this sub-plot
-         * @param {PlotPanZoomStack} panZoomStack the stack of pan-zoom
-         *        states which is applicable to this sub-plot
-         * @returns {SubPlot} the instantiated sub-plot
-         * @method
-         */
-        SubPlotFactory.prototype.createSubPlot = function (telemetryObjects, panZoomStack) {
-            return new SubPlot(
-                telemetryObjects,
-                panZoomStack,
-                this.telemetryFormatter
-            );
-        };
-
-        return SubPlotFactory;
-
-    }
-);

platform/features/plot/src/elements/PlotAxis.js

@@ -1,134 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2017, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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(
-    [],
-    function () {
-
-        /**
-         * A PlotAxis provides a template-ready set of options
-         * for the domain or range axis, sufficient to populate
-         * selectors.
-         *
-         * @memberof platform/features/plot
-         * @constructor
-         * @param {string} axisType the field in metadatas to
-         *        look at for axis options; usually one of
-         *        "domains" or "ranges"
-         * @param {object[]} metadatas metadata objects, as
-         *        returned by the `getMetadata()` method of
-         *        a `telemetry` capability.
-         * @param {object} defaultValue the value to use for the
-         *        active state in the event that no options are
-         *        found; should contain "name" and "key" at
-         *        minimum.
-         *
-         */
-        function PlotAxis(axisType, metadatas, defaultValue) {
-            this.axisType = axisType;
-            this.defaultValue = defaultValue;
-            this.optionKeys = {};
-
-            /**
-             * The currently chosen option for this axis. An
-             * initial value is provided; this will be updated
-             * directly form the plot template.
-             * @memberof platform/features/plot.PlotAxis#
-             */
-            this.active = defaultValue;
-
-            /**
-             * The set of options applicable for this axis;
-             * an array of objects, where each object contains a
-             * "key" field and a "name" field (for machine- and
-             * human-readable names respectively)
-             * @memberof platform/features/plot.PlotAxis#
-             */
-            this.options = [];
-
-            // Initialize options from metadata objects
-            this.updateMetadata(metadatas);
-        }
-
-
-        /**
-         * Update axis options to reflect current metadata.
-         * @param {TelemetryMetadata[]} metadata objects describing
-         *        applicable telemetry
-         */
-        PlotAxis.prototype.updateMetadata = function (metadatas) {
-            var axisType = this.axisType,
-                optionKeys = this.optionKeys,
-                newOptions = {},
-                toAdd = [];
-
-            function isValid(option) {
-                return option && optionKeys[option.key];
-            }
-
-            metadatas.forEach(function (m) {
-                (m[axisType] || []).forEach(function (option) {
-                    var key = option.key;
-                    if (!optionKeys[key] && !newOptions[key]) {
-                        toAdd.push(option);
-                    }
-                    newOptions[key] = true;
-                });
-            });
-
-            optionKeys = this.optionKeys = newOptions;
-
-            // General approach here is to avoid changing object
-            // instances unless something has really changed, since
-            // Angular is watching; don't want to trigger extra digests.
-            if (!this.options.every(isValid)) {
-                this.options = this.options.filter(isValid);
-            }
-
-            if (toAdd.length > 0) {
-                this.options = this.options.concat(toAdd);
-            }
-
-            if (!isValid(this.active)) {
-                this.active = this.options[0] || this.defaultValue;
-            }
-        };
-
-        /**
-         * Change the domain/range selection for this axis. If the
-         * provided `key` is not recognized as an option, no change
-         * will occur.
-         * @param {string} key the identifier for the domain/range
-         */
-        PlotAxis.prototype.chooseOption = function (key) {
-            var self = this;
-            this.options.forEach(function (option) {
-                if (option.key === key) {
-                    self.active = option;
-                }
-            });
-        };
-
-        return PlotAxis;
-
-    }
-);

platform/features/plot/src/elements/PlotLimitTracker.js

@@ -1,78 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2017, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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(
-    [],
-    function () {
-
-        /**
-         * Tracks the limit state of telemetry objects being plotted.
-         * @memberof platform/features/plot
-         * @constructor
-         * @param {platform/telemetry.TelemetryHandle} handle the handle
-         *        to telemetry access
-         * @param {string} range the key to use when looking up range values
-         */
-        function PlotLimitTracker(handle, range) {
-            this.handle = handle;
-            this.range = range;
-            this.legendClasses = {};
-        }
-
-        /**
-         * Update limit states to reflect the latest data.
-         */
-        PlotLimitTracker.prototype.update = function () {
-            var legendClasses = {},
-                range = this.range,
-                handle = this.handle;
-
-            function updateLimit(telemetryObject) {
-                var limit = telemetryObject.getCapability('limit'),
-                    datum = handle.getDatum(telemetryObject);
-
-                if (limit && datum) {
-                    legendClasses[telemetryObject.getId()] =
-                        (limit.evaluate(datum, range) || {}).cssClass;
-                }
-            }
-
-            handle.getTelemetryObjects().forEach(updateLimit);
-
-            this.legendClasses = legendClasses;
-        };
-
-        /**
-         * Get the CSS class associated with any limit violations for this
-         * telemetry object.
-         * @param {DomainObject} domainObject the telemetry object to check
-         * @returns {string} the CSS class name, if any
-         */
-        PlotLimitTracker.prototype.getLegendClass = function (domainObject) {
-            var id = domainObject && domainObject.getId();
-            return id && this.legendClasses[id];
-        };
-
-        return PlotLimitTracker;
-
-    }
-);

platform/features/plot/src/elements/PlotLine.js

@@ -1,118 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2017, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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(
-    ['./PlotSeriesWindow'],
-    function (PlotSeriesWindow) {
-
-
-        /**
-         * Represents a single line or trace of a plot.
-         * @param {{PlotLineBuffer}} buffer the plot buffer
-         * @constructor
-         */
-        function PlotLine(buffer) {
-            this.buffer = buffer;
-        }
-
-        /**
-         * Add a point to this plot line.
-         * @param {number} domainValue the domain value
-         * @param {number} rangeValue the range value
-         */
-        PlotLine.prototype.addPoint = function (domainValue, rangeValue) {
-            var buffer = this.buffer,
-                index;
-
-            // Make sure we got real/useful values here...
-            if (domainValue !== undefined && rangeValue !== undefined) {
-                index = buffer.findInsertionIndex(domainValue);
-
-                // Already in the buffer? Skip insertion
-                if (index < 0) {
-                    return;
-                }
-
-                // Insert the point
-                if (!buffer.insertPoint(domainValue, rangeValue, index)) {
-                    // If insertion failed, trim from the beginning...
-                    buffer.trim(1);
-                    // ...and try again.
-                    buffer.insertPoint(domainValue, rangeValue, index);
-                }
-            }
-        };
-
-        /**
-         * Add a series of telemetry data to this plot line.
-         * @param {TelemetrySeries} series the data series
-         * @param {string} [domain] the key indicating which domain
-         *        to use when looking up data from this series
-         * @param {string} [range] the key indicating which range
-         *        to use when looking up data from this series
-         */
-        PlotLine.prototype.addSeries = function (series, domain, range) {
-            var buffer = this.buffer;
-
-            // Insert a time-windowed data series into the buffer
-            function insertSeriesWindow(seriesWindow) {
-                var count = seriesWindow.getPointCount();
-
-                function doInsert() {
-                    var firstTimestamp = seriesWindow.getDomainValue(0),
-                        lastTimestamp = seriesWindow.getDomainValue(count - 1),
-                        startIndex = buffer.findInsertionIndex(firstTimestamp),
-                        endIndex = buffer.findInsertionIndex(lastTimestamp);
-
-                    // Does the whole series fit in between two adjacent indexes?
-                    if ((startIndex === endIndex) && startIndex > -1) {
-                        // Insert it in between
-                        buffer.insert(seriesWindow, startIndex);
-                    } else {
-                        // Split it up, and add the two halves
-                        seriesWindow.split().forEach(insertSeriesWindow);
-                    }
-                }
-
-                // Only insert if there are points to insert
-                if (count > 0) {
-                    doInsert();
-                }
-            }
-
-            // Should try to add via insertion if a
-            // clear insertion point is available;
-            // if not, should split and add each half.
-            // Insertion operation also needs to factor out
-            // redundant timestamps, for overlapping data
-            insertSeriesWindow(new PlotSeriesWindow(
-                series,
-                domain,
-                range,
-                0,
-                series.getPointCount()
-            ));
-        };
-
-        return PlotLine;
-    }
-);

platform/features/plot/src/elements/PlotLineBuffer.js

@@ -1,268 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2017, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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(
-    [],
-    function () {
-
-        /**
-         * Contains the buffer used to draw a plot.
-         * @param {number} domainOffset number to subtract from domain values
-         * @param {number} initialSize initial buffer size
-         * @param {number} maxSize maximum buffer size
-         * @memberof platform/features/plot
-         * @constructor
-         */
-        function PlotLineBuffer(domainOffset, initialSize, maxSize) {
-            this.buffer = new Float32Array(initialSize * 2);
-            this.rangeExtrema =
-                [Number.POSITIVE_INFINITY, Number.NEGATIVE_INFINITY];
-            this.length = 0;
-            this.domainOffset = domainOffset;
-            this.initialSize = initialSize;
-            this.maxSize = maxSize;
-        }
-
-        // Binary search for an insertion index
-        PlotLineBuffer.prototype.binSearch = function (value, min, max) {
-            var mid = Math.floor((min + max) / 2),
-                found = this.buffer[mid * 2];
-
-            // On collisions, insert at same index
-            if (found === value) {
-                return mid;
-            }
-
-            // Otherwise, if we're down to a single index,
-            // we've found our insertion point
-            if (min >= max) {
-                // Compare the found timestamp with the search
-                // value to decide if we'll insert after or before.
-                return min + ((found < value) ? 1 : 0);
-            }
-
-            // Finally, do the recursive step
-            if (found < value) {
-                return this.binSearch(value, mid + 1, max);
-            } else {
-                return this.binSearch(value, min, mid - 1);
-            }
-        };
-
-        // Increase the size of the buffer
-        PlotLineBuffer.prototype.doubleBufferSize = function () {
-            var sz = Math.min(this.maxSize * 2, this.buffer.length * 2),
-                canDouble = sz > this.buffer.length,
-                doubled = canDouble && new Float32Array(sz);
-
-            if (canDouble) {
-                doubled.set(this.buffer); // Copy contents of original
-                this.buffer = doubled;
-            }
-
-            return canDouble;
-        };
-
-        // Decrease the size of the buffer
-        PlotLineBuffer.prototype.halveBufferSize = function () {
-            var sz = Math.max(this.initialSize * 2, this.buffer.length / 2),
-                canHalve = sz < this.buffer.length;
-
-            if (canHalve) {
-                this.buffer = new Float32Array(this.buffer.subarray(0, sz));
-            }
-
-            return canHalve;
-        };
-
-        // Set a value in the buffer
-        PlotLineBuffer.prototype.setValue = function (index, domainValue, rangeValue) {
-            this.buffer[index * 2] = domainValue - this.domainOffset;
-            this.buffer[index * 2 + 1] = rangeValue;
-            // Track min/max of range values (min/max for
-            // domain values can be read directly from buffer)
-            this.rangeExtrema[0] = Math.min(this.rangeExtrema[0], rangeValue);
-            this.rangeExtrema[1] = Math.max(this.rangeExtrema[1], rangeValue);
-        };
-
-        /**
-         * Get the WebGL-displayable buffer of points to plot.
-         * @returns {Float32Array} displayable buffer for this line
-         */
-        PlotLineBuffer.prototype.getBuffer = function () {
-            return this.buffer;
-        };
-
-        /**
-         * Get the number of points stored in this buffer.
-         * @returns {number} the number of points stored
-         */
-        PlotLineBuffer.prototype.getLength = function () {
-            return this.length;
-        };
-
-        /**
-         * Get the min/max range values that are currently in this
-         * buffer. Unlike range extrema, these will change as the
-         * buffer gets trimmed.
-         * @returns {number[]} min, max domain values
-         */
-        PlotLineBuffer.prototype.getDomainExtrema = function () {
-            // Since these are ordered in the buffer, assume
-            // these are the values at the first and last index
-            return [
-                this.buffer[0] + this.domainOffset,
-                this.buffer[this.length * 2 - 2] + this.domainOffset
-            ];
-        };
-
-        /**
-         * Get the min/max range values that have been observed for this
-         * buffer. Note that these values may have been trimmed out at
-         * some point.
-         * @returns {number[]} min, max range values
-         */
-        PlotLineBuffer.prototype.getRangeExtrema = function () {
-            return this.rangeExtrema;
-        };
-
-        /**
-         * Remove values from this buffer.
-         * Normally, values are removed from the start
-         * of the buffer; a truthy value in the second argument
-         * will cause values to be removed from the end.
-         * @param {number} count number of values to remove
-         * @param {boolean} [fromEnd] true if the most recent
-         *        values should be removed
-         */
-        PlotLineBuffer.prototype.trim = function (count, fromEnd) {
-            // If we're removing values from the start...
-            if (!fromEnd) {
-                // ...do so by shifting buffer contents over
-                this.buffer.set(this.buffer.subarray(2 * count));
-            }
-            // Reduce used buffer size accordingly
-            this.length -= count;
-            // Finally, if less than half of the buffer is being
-            // used, free up some memory.
-            if (this.length < this.buffer.length / 4) {
-                this.halveBufferSize();
-            }
-        };
-
-        /**
-         * Insert data from the provided series at the specified
-         * index. If this would exceed the buffer's maximum capacity,
-         * this operation fails and the buffer is unchanged.
-         * @param {TelemetrySeries} series the series to insert
-         * @param {number} index the index at which to insert this
-         *        series
-         * @returns {boolean} true if insertion succeeded; otherwise
-         *          false
-         */
-        PlotLineBuffer.prototype.insert = function (series, index) {
-            var sz = series.getPointCount(),
-                i;
-
-            // Don't allow append after the end; that doesn't make sense
-            index = Math.min(index, this.length);
-
-            // Resize if necessary
-            while (sz > ((this.buffer.length / 2) - this.length)) {
-                if (!this.doubleBufferSize()) {
-                    // Can't make room for this, insertion fails
-                    return false;
-                }
-            }
-
-            // Shift data over if necessary
-            if (index < this.length) {
-                this.buffer.set(
-                    this.buffer.subarray(index * 2, this.length * 2),
-                    (index + sz) * 2
-                );
-            }
-
-            // Insert data into the set
-            for (i = 0; i < sz; i += 1) {
-                this.setValue(
-                    i + index,
-                    series.getDomainValue(i),
-                    series.getRangeValue(i)
-                );
-            }
-
-            // Increase the length
-            this.length += sz;
-
-            // Indicate that insertion was successful
-            return true;
-        };
-
-        /**
-         * Append a single data point.
-         * @memberof platform/features/plot.PlotLineBuffer#
-         */
-        PlotLineBuffer.prototype.insertPoint = function (domainValue, rangeValue) {
-            // Ensure there is space for this point
-            if (this.length >= (this.buffer.length / 2)) {
-                if (!this.doubleBufferSize()) {
-                    return false;
-                }
-            }
-
-            // Put the data in the buffer
-            this.setValue(this.length, domainValue, rangeValue);
-
-            // Update length
-            this.length += 1;
-
-            // Indicate that this was successful
-            return true;
-        };
-
-        /**
-         * Find an index for inserting data with this
-         * timestamp. The second argument indicates whether
-         * we are searching for insert-before or insert-after
-         * positions.
-         * Timestamps are meant to be unique, so if a collision
-         * occurs, this will return -1.
-         * @param {number} timestamp timestamp to insert
-         * @returns {number} the index for insertion (or -1)
-         */
-        PlotLineBuffer.prototype.findInsertionIndex = function (timestamp) {
-            var value = timestamp - this.domainOffset;
-
-            // Handle empty buffer case and check for an
-            // append opportunity (which is most common case for
-            // real-time data so is optimized-for) before falling
-            // back to a binary search for the insertion point.
-            return (this.length < 1) ? 0 :
-                (value > this.buffer[this.length * 2 - 2]) ? this.length :
-                    this.binSearch(value, 0, this.length - 1);
-        };
-
-        return PlotLineBuffer;
-    }
-);
-

platform/features/plot/src/elements/PlotPalette.js

@@ -1,133 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2017, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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.
- *****************************************************************************/
-
-/**
- * Plot palette. Defines colors for various plot lines.
- */
-define(
-    function () {
-
-        // Prepare different forms of the palette, since we wish to
-        // describe colors in several ways (as RGB 0-255, as
-        // RGB 0.0-1.0, or as stylesheet-appropriate #-prefixed colors).
-        var integerPalette = [
-            [0x20, 0xB2, 0xAA],
-            [0x9A, 0xCD, 0x32],
-            [0xFF, 0x8C, 0x00],
-            [0xD2, 0xB4, 0x8C],
-            [0x40, 0xE0, 0xD0],
-            [0x41, 0x69, 0xFF],
-            [0xFF, 0xD7, 0x00],
-            [0x6A, 0x5A, 0xCD],
-            [0xEE, 0x82, 0xEE],
-            [0xCC, 0x99, 0x66],
-            [0x99, 0xCC, 0xCC],
-            [0x66, 0xCC, 0x33],
-            [0xFF, 0xCC, 0x00],
-            [0xFF, 0x66, 0x33],
-            [0xCC, 0x66, 0xFF],
-            [0xFF, 0x00, 0x66],
-            [0xFF, 0xFF, 0x00],
-            [0x80, 0x00, 0x80],
-            [0x00, 0x86, 0x8B],
-            [0x00, 0x8A, 0x00],
-            [0xFF, 0x00, 0x00],
-            [0x00, 0x00, 0xFF],
-            [0xF5, 0xDE, 0xB3],
-            [0xBC, 0x8F, 0x8F],
-            [0x46, 0x82, 0xB4],
-            [0xFF, 0xAF, 0xAF],
-            [0x43, 0xCD, 0x80],
-            [0xCD, 0xC1, 0xC5],
-            [0xA0, 0x52, 0x2D],
-            [0x64, 0x95, 0xED]
-        ], stringPalette = integerPalette.map(function (arr) {
-            // Convert to # notation for use in styles
-            return '#' + arr.map(function (c) {
-                return (c < 16 ? '0' : '') + c.toString(16);
-            }).join('');
-        }), floatPalette = integerPalette.map(function (arr) {
-            return arr.map(function (c) {
-                return c / 255.0;
-            }).concat([1]); // RGBA
-        });
-
-        /**
-         * PlotPalette allows a consistent set of colors to be retrieved
-         * by index, in various color formats. All PlotPalette methods are
-         * static, so there is no need for a constructor call; using
-         * this will simply return PlotPalette itself.
-         * @memberof platform/features/plot
-         * @constructor
-         */
-        function PlotPalette() {
-            return PlotPalette;
-        }
-
-        /**
-         * Look up a color in the plot's palette, by index.
-         * This will be returned as a three element array of RGB
-         * values, as integers in the range of 0-255.
-         * @param {number} i the index of the color to look up
-         * @return {number[]} the color, as integer RGB values
-         */
-        PlotPalette.getIntegerColor = function (i) {
-            return integerPalette[Math.floor(i) % integerPalette.length];
-        };
-
-
-        /**
-         * Look up a color in the plot's palette, by index.
-         * This will be returned as a three element array of RGB
-         * values, in the range of 0.0-1.0.
-         *
-         * This format is present specifically to support use with
-         * WebGL, which expects colors of that form.
-         *
-         * @param {number} i the index of the color to look up
-         * @return {number[]} the color, as floating-point RGB values
-         */
-        PlotPalette.getFloatColor = function (i) {
-            return floatPalette[Math.floor(i) % floatPalette.length];
-        };
-
-
-        /**
-         * Look up a color in the plot's palette, by index.
-         * This will be returned as a string using #-prefixed
-         * six-digit RGB hex notation (e.g. #FF0000)
-         * See http://www.w3.org/TR/css3-color/#rgb-color.
-         *
-         * This format is useful for representing colors in in-line
-         * styles.
-         *
-         * @param {number} i the index of the color to look up
-         * @return {string} the color, as a style-friendly string
-         */
-        PlotPalette.getStringColor = function (i) {
-            return stringPalette[Math.floor(i) % stringPalette.length];
-        };
-
-        return PlotPalette;
-
-    }
-);