Coerce inputs to numbers

commit a04fba579b
Author: Pete Richards <peter.l.richards@nasa.gov>
Date:   Tue Jan 2 16:05:13 2018 -0500

    Add test for identifier generation

commit 77fa775f7b
Author: Pete Richards <peter.l.richards@nasa.gov>
Date:   Tue Jan 2 15:56:34 2018 -0500

    [SummaryWidget] Use objectutil to get legacy id

    Use objectUtils to get a proper legacy id so that namespaces are
    properly handled.  Fixes https://github.com/nasa/openmct/issues/1858

API.md

@@ -879,6 +879,21 @@ openmct.install(openmct.plugins.CouchDB('http://localhost:9200'))
 * `openmct.plugins.Espresso` and `openmct.plugins.Snow` are two different
   themes (dark and light) available for Open MCT. Note that at least one
   of these themes must be installed for Open MCT to appear correctly.
+* `openmct.plugins.URLIndicatorPlugin` adds an indicator which shows the
+availability of a URL with the following options: 
+  - `url` : URL to indicate the status of
+  - `cssClass`: Icon to show in the status bar, defaults to `icon-database`, [list of all icons](https://nasa.github.io/openmct/style-guide/#/browse/styleguide:home?view=items)
+  - `interval`: Interval between checking the connection, defaults to `10000`
+  - `label` Name showing up as text in the status bar, defaults to url
+```javascript
+openmct.install(openmct.plugins.URLIndicatorPlugin({
+  url: 'http://google.com',
+  cssClass: 'check',
+  interval: 10000,
+  label: 'Google'
+ })
+);
+```
 * `openmct.plugins.LocalStorage` provides persistence of user-created
   objects in browser-local storage. This is particularly useful in
   development environments.

bower.json

@@ -17,7 +17,7 @@
     "screenfull": "^3.0.0",
     "node-uuid": "^1.4.7",
     "comma-separated-values": "^3.6.4",
-    "FileSaver.js": "^0.0.2",
+    "file-saver": "^1.3.3",
     "zepto": "^1.1.6",
     "eventemitter3": "^1.2.0",
     "lodash": "3.10.1",

example/generator/GeneratorProvider.js

@@ -30,7 +30,8 @@ define([
         amplitude: 1,
         period: 10,
         offset: 0,
-        dataRateInHz: 1
+        dataRateInHz: 1,
+        phase: 0
     };
 
     function GeneratorProvider() {
@@ -50,16 +51,19 @@ define([
             'amplitude',
             'period',
             'offset',
-            'dataRateInHz'
+            'dataRateInHz',
+            'phase',
         ];
 
+        request = request || {};
+
         var workerRequest = {};
 
         props.forEach(function (prop) {
             if (domainObject.telemetry && domainObject.telemetry.hasOwnProperty(prop)) {
                 workerRequest[prop] = domainObject.telemetry[prop];
             }
-            if (request.hasOwnProperty(prop)) {
+            if (request && request.hasOwnProperty(prop)) {
                 workerRequest[prop] = request[prop];
             }
             if (!workerRequest[prop]) {
@@ -67,7 +71,7 @@ define([
             }
             workerRequest[prop] = Number(workerRequest[prop]);
         });
-
+        workerRequest.name = domainObject.name;
         return workerRequest;
     };
 

example/generator/StateGeneratorProvider.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.
+ *****************************************************************************/
+
+define([
+
+], function (
+
+) {
+
+    function StateGeneratorProvider() {
+
+    }
+
+    function pointForTimestamp(timestamp, duration, name) {
+        return {
+            name: name,
+            utc: Math.floor(timestamp / duration) * duration,
+            value: Math.floor(timestamp / duration) % 2
+        };
+    }
+
+    StateGeneratorProvider.prototype.supportsSubscribe = function (domainObject) {
+        return domainObject.type === 'example.state-generator';
+    };
+
+    StateGeneratorProvider.prototype.subscribe = function (domainObject, callback) {
+        var duration = domainObject.telemetry.duration * 1000;
+
+        var interval = setInterval(function () {
+            var now = Date.now();
+            callback(pointForTimestamp(now, duration, domainObject.name));
+        }, duration);
+
+        return function () {
+            clearInterval(interval);
+        };
+    };
+
+
+    StateGeneratorProvider.prototype.supportsRequest = function (domainObject, options) {
+        return domainObject.type === 'example.state-generator';
+    };
+
+    StateGeneratorProvider.prototype.request = function (domainObject, options) {
+        var start = options.start;
+        var end = options.end;
+        var duration = domainObject.telemetry.duration * 1000;
+        if (options.strategy === 'latest' || options.size === 1) {
+            start = end;
+        }
+        var data = [];
+        while (start <= end && data.length < 5000) {
+            data.push(pointForTimestamp(start, duration, domainObject.name));
+            start += 5000;
+        }
+        return Promise.resolve(data);
+    };
+
+    return StateGeneratorProvider;
+
+});

example/generator/WorkerInterface.js

@@ -44,9 +44,7 @@ define([
         message = message.data;
         var callback = this.callbacks[message.id];
         if (callback) {
-            if (callback(message)) {
-                delete this.callbacks[message.id];
-            }
+            callback(message);
         }
     };
 
@@ -72,6 +70,7 @@ define([
             deferred.resolve = resolve;
             deferred.reject = reject;
         });
+        var messageId;
 
         function callback(message) {
             if (message.error) {
@@ -79,33 +78,27 @@ define([
             } else {
                 deferred.resolve(message.data);
             }
-            return true;
+            delete this.callbacks[messageId];
         }
 
-        this.dispatch('request', request, callback);
+        messageId = this.dispatch('request', request, callback.bind(this));
 
         return promise;
     };
 
     WorkerInterface.prototype.subscribe = function (request, cb) {
-        var isCancelled = false;
-
-        var callback = function (message) {
-            if (isCancelled) {
-                return true;
-            }
+        function callback(message) {
             cb(message.data);
         };
 
-        var messageId = this.dispatch('subscribe', request, callback)
+        var messageId = this.dispatch('subscribe', request, callback);
 
         return function () {
-            isCancelled = true;
             this.dispatch('unsubscribe', {
                 id: messageId
             });
+            delete this.callbacks[messageId];
         }.bind(this);
-
     };
 
 

example/generator/generatorWorker.js

@@ -62,10 +62,11 @@
                 self.postMessage({
                     id: message.id,
                     data: {
+                        name: data.name,
                         utc: nextStep,
                         yesterday: nextStep - 60*60*24*1000,
-                        sin: sin(nextStep, data.period, data.amplitude, data.offset),
-                        cos: cos(nextStep, data.period, data.amplitude, data.offset)
+                        sin: sin(nextStep, data.period, data.amplitude, data.offset, data.phase),
+                        cos: cos(nextStep, data.period, data.amplitude, data.offset, data.phase)
                     }
                 });
                 nextStep += step;
@@ -82,21 +83,22 @@
     }
 
     function onRequest(message) {
-        var data = message.data;
-        if (data.end == undefined) {
-            data.end = Date.now();
+        var request = message.data;
+        if (request.end == undefined) {
+            request.end = Date.now();
         }
-        if (data.start == undefined){
-            data.start = data.end - FIFTEEN_MINUTES;
+        if (request.start == undefined){
+            request.start = request.end - FIFTEEN_MINUTES;
         }
 
         var now = Date.now();
-        var start = data.start;
-        var end = data.end > now ? now : data.end;
-        var amplitude = data.amplitude;
-        var period = data.period;
-        var offset = data.offset;
-        var dataRateInHz = data.dataRateInHz;
+        var start = request.start;
+        var end = request.end > now ? now : request.end;
+        var amplitude = request.amplitude;
+        var period = request.period;
+        var offset = request.offset;
+        var dataRateInHz = request.dataRateInHz;
+        var phase = request.phase;
 
         var step = 1000 / dataRateInHz;
         var nextStep = start - (start % step) + step;
@@ -105,10 +107,11 @@
 
         for (; nextStep < end && data.length < 5000; nextStep += step) {
             data.push({
+                name: request.name,
                 utc: nextStep,
                 yesterday: nextStep - 60*60*24*1000,
-                sin: sin(nextStep, period, amplitude, offset),
-                cos: cos(nextStep, period, amplitude, offset)
+                sin: sin(nextStep, period, amplitude, offset, phase),
+                cos: cos(nextStep, period, amplitude, offset, phase)
             });
         }
         self.postMessage({
@@ -117,14 +120,14 @@
         });
     }
 
-    function cos(timestamp, period, amplitude, offset) {
+    function cos(timestamp, period, amplitude, offset, phase) {
         return amplitude *
-            Math.cos(timestamp / period / 1000 * Math.PI * 2) + offset;
+            Math.cos(phase + (timestamp / period / 1000 * Math.PI * 2)) + offset;
     }
 
-    function sin(timestamp, period, amplitude, offset) {
+    function sin(timestamp, period, amplitude, offset, phase) {
         return amplitude *
-            Math.sin(timestamp / period / 1000 * Math.PI * 2) + offset;
+            Math.sin(phase + (timestamp / period / 1000 * Math.PI * 2)) + offset;
     }
 
     function sendError(error, message) {

example/generator/plugin.js

@@ -23,10 +23,12 @@
 
 define([
     "./GeneratorProvider",
-    "./SinewaveLimitCapability"
+    "./SinewaveLimitCapability",
+    "./StateGeneratorProvider"
 ], function (
     GeneratorProvider,
-    SinewaveLimitCapability
+    SinewaveLimitCapability,
+    StateGeneratorProvider
 ) {
 
     var legacyExtensions = {
@@ -46,6 +48,75 @@ define([
                 openmct.legacyExtension(type, extension)
             })
         });
+
+        openmct.types.addType("example.state-generator", {
+            name: "State Generator",
+            description: "For development use.  Generates test enumerated telemetry by cycling through a given set of states",
+            cssClass: "icon-telemetry",
+            creatable: true,
+            form: [
+                {
+                    name: "State Duration (seconds)",
+                    control: "textfield",
+                    cssClass: "l-input-sm l-numeric",
+                    key: "duration",
+                    required: true,
+                    property: [
+                        "telemetry",
+                        "duration"
+                    ],
+                    pattern: "^\\d*(\\.\\d*)?$"
+                }
+            ],
+            initialize: function (object) {
+                object.telemetry = {
+                    duration: 5,
+                    values: [
+                        {
+                            key: "name",
+                            name: "Name"
+                        },
+                        {
+                            key: "utc",
+                            name: "Time",
+                            format: "utc",
+                            hints: {
+                                domain: 1
+                            }
+                        },
+                        {
+                            key: "state",
+                            source: "value",
+                            name: "State",
+                            format: "enum",
+                            enumerations: [
+                                {
+                                    value: 0,
+                                    string: "OFF"
+                                },
+                                {
+                                    value: 1,
+                                    string: "ON"
+                                }
+                            ],
+                            hints: {
+                                range: 1
+                            }
+                        },
+                        {
+                            key: "value",
+                            name: "Value",
+                            hints: {
+                                range: 2
+                            }
+                        }
+                    ]
+                }
+            }
+        });
+
+        openmct.telemetry.addProvider(new StateGeneratorProvider());
+
         openmct.types.addType("generator", {
             name: "Sine Wave Generator",
             description: "For development use. Generates example streaming telemetry data using a simple sine wave algorithm.",
@@ -99,6 +170,18 @@ define([
                         "dataRateInHz"
                     ],
                     pattern: "^\\d*(\\.\\d*)?$"
+                },
+                {
+                    name: "Phase (radians)",
+                    control: "textfield",
+                    cssClass: "l-input-sm l-numeric",
+                    key: "phase",
+                    required: true,
+                    property: [
+                        "telemetry",
+                        "phase"
+                    ],
+                    pattern: "^\\d*(\\.\\d*)?$"
                 }
             ],
             initialize: function (object) {
@@ -107,7 +190,12 @@ define([
                     amplitude: 1,
                     offset: 0,
                     dataRateInHz: 1,
+                    phase: 0,
                     values: [
+                        {
+                            key: "name",
+                            name: "Name"
+                        },
                         {
                             key: "utc",
                             name: "Time",
@@ -127,6 +215,8 @@ define([
                         {
                             key: "sin",
                             name: "Sine",
+                            format: 'printf',
+                            sprintf: '%0.2f',
                             hints: {
                                 range: 1
                             }
@@ -134,6 +224,8 @@ define([
                         {
                             key: "cos",
                             name: "Cosine",
+                            format: 'printf',
+                            sprintf: '%0.2f',
                             hints: {
                                 range: 2
                             }
@@ -142,6 +234,7 @@ define([
                 };
             }
         });
+
         openmct.telemetry.addProvider(new GeneratorProvider());
     };
 

example/imagery/plugin.js

@@ -48,8 +48,9 @@ define([
                 "https://www.hq.nasa.gov/alsj/a16/AS16-117-18748.jpg"
             ];
 
-        function pointForTimestamp(timestamp) {
+        function pointForTimestamp(timestamp, name) {
             return {
+                name: name,
                 utc: Math.floor(timestamp / 5000) * 5000,
                 url: IMAGE_SAMPLES[Math.floor(timestamp / 5000) % IMAGE_SAMPLES.length]
             };
@@ -61,7 +62,7 @@ define([
             },
             subscribe: function (domainObject, callback) {
                 var interval = setInterval(function () {
-                    callback(pointForTimestamp(Date.now()));
+                    callback(pointForTimestamp(Date.now(), domainObject.name));
                 }, 5000);
 
                 return function (interval) {
@@ -79,8 +80,8 @@ define([
                 var start = options.start;
                 var end = options.end;
                 var data = [];
-                while (start < end && data.length < 5000) {
-                    data.push(pointForTimestamp(start));
+                while (start <= end && data.length < 5000) {
+                    data.push(pointForTimestamp(start, domainObject.name));
                     start += 5000;
                 }
                 return Promise.resolve(data);
@@ -93,7 +94,7 @@ define([
                     options.strategy === 'latest';
             },
             request: function (domainObject, options) {
-                return Promise.resolve([pointForTimestamp(Date.now())]);
+                return Promise.resolve([pointForTimestamp(Date.now(), domainObject.name)]);
             }
         };
 
@@ -109,6 +110,10 @@ define([
                 initialize: function (object) {
                     object.telemetry = {
                         values: [
+                            {
+                                name: 'Name',
+                                key: 'name'
+                            },
                             {
                                 name: 'Time',
                                 key: 'utc',

example/styleguide/res/sass/_style-guide-base.scss

@@ -58,11 +58,7 @@
         position: relative;
     }
 
-    .w-mct-example {
-        div {
-            margin-bottom: $interiorMarginLg;
-        }
-    }
+    .w-mct-example > div { margin-bottom: $interiorMarginLg; }
 
     code,
     pre {

example/styleguide/res/templates/menus.html

@@ -121,7 +121,7 @@
         <h2>Palettes</h2>
         <div class="cols cols1-1">
             <div class="col">
-                <p>Use a palette to provide color choices. Similar to context menus and dropdowns, palettes should be dismissed when a choice is made within them, or if the user clicks outside one.</p>
+                <p>Use a palette to provide color choices. Similar to context menus and dropdowns, palettes should be dismissed when a choice is made within them, or if the user clicks outside one. Selected palette choices should utilize the <code>selected</code> CSS class to visualize indicate that state.</p>
                 <p>Note that while this example uses static markup for illustrative purposes, don't do this - use a front-end framework with repeaters to build the color choices.</p>
             </div>
             <mct-example><div style="height: 220px" title="Ignore me, I'm just here to provide space for this example.">
@@ -129,9 +129,9 @@
 <div class="s-button s-menu-button menu-element t-color-palette icon-paint-bucket" ng-controller="ClickAwayController as toggle">
     <span class="l-click-area" ng-click="toggle.toggle()"></span>
     <span class="color-swatch" style="background: rgb(255, 0, 0);"></span>
-    <div class="menu l-color-palette" ng-show="toggle.isActive()">
+    <div class="menu l-palette l-color-palette" ng-show="toggle.isActive()">
         <div class="l-palette-row l-option-row">
-            <div class="l-palette-item s-palette-item " ng-click="ngModel[field] = 'transparent'"></div>
+            <div class="l-palette-item s-palette-item no-selection"></div>
             <span class="l-palette-item-label">None</span>
         </div>
         <div class="l-palette-row">
@@ -147,7 +147,7 @@
             <div class="l-palette-item s-palette-item" style="background: rgb(255, 255, 255);"></div>
         </div>
         <div class="l-palette-row">
-            <div class="l-palette-item s-palette-item" style="background: rgb(136, 32, 32);"></div>
+            <div class="l-palette-item s-palette-item selected" style="background: rgb(255, 0, 0);"></div>
             <div class="l-palette-item s-palette-item" style="background: rgb(224, 64, 64);"></div>
             <div class="l-palette-item s-palette-item" style="background: rgb(240, 160, 72);"></div>
             <div class="l-palette-item s-palette-item" style="background: rgb(255, 248, 96);"></div>

index.html

@@ -25,8 +25,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
     <title></title>
-    <script src="bower_components/requirejs/require.js">
-    </script>
+    <script src="bower_components/requirejs/require.js"> </script>
     <script>
         var THIRTY_MINUTES = 30 * 60 * 1000;
 
@@ -44,13 +43,16 @@
             openmct.install(openmct.plugins.ExampleImagery());
             openmct.install(openmct.plugins.UTCTimeSystem());
             openmct.install(openmct.plugins.ImportExport());
+            openmct.install(openmct.plugins.AutoflowView({
+                type: "telemetry.panel"
+            }));
             openmct.install(openmct.plugins.Conductor({
                 menuOptions: [
                     {
                         name: "Fixed",
                         timeSystem: 'utc',
                         bounds: {
-                            start: Date.now() - 30 * 60 * 1000,
+                            start: Date.now() - THIRTY_MINUTES,
                             end: Date.now()
                         }
                     },
@@ -65,6 +67,7 @@
                     }
                 ]
             }));
+            openmct.install(openmct.plugins.SummaryWidget());
             openmct.time.clock('local', {start: -THIRTY_MINUTES, end: 0});
             openmct.time.timeSystem('utc');
             openmct.start();

karma.conf.js

@@ -36,6 +36,7 @@ module.exports = function(config) {
         files: [
             {pattern: 'bower_components/**/*.js', included: false},
             {pattern: 'node_modules/d3-*/**/*.js', included: false},
+            {pattern: 'node_modules/vue/**/*.js', included: false},
             {pattern: 'src/**/*.js', included: false},
             {pattern: 'example/**/*.html', included: false},
             {pattern: 'example/**/*.js', included: false},

openmct.js

@@ -33,10 +33,11 @@ requirejs.config({
         "moment": "bower_components/moment/moment",
         "moment-duration-format": "bower_components/moment-duration-format/lib/moment-duration-format",
         "moment-timezone": "bower_components/moment-timezone/builds/moment-timezone-with-data",
-        "saveAs": "bower_components/FileSaver.js/FileSaver.min",
+        "saveAs": "bower_components/file-saver/FileSaver.min",
         "screenfull": "bower_components/screenfull/dist/screenfull.min",
         "text": "bower_components/text/text",
         "uuid": "bower_components/node-uuid/uuid",
+        "vue": "node_modules/vue/dist/vue.min",
         "zepto": "bower_components/zepto/zepto.min",
         "lodash": "bower_components/lodash/lodash",
         "d3-selection": "node_modules/d3-selection/build/d3-selection.min",
@@ -48,7 +49,8 @@ requirejs.config({
         "d3-format": "node_modules/d3-format/build/d3-format.min",
         "d3-interpolate": "node_modules/d3-interpolate/build/d3-interpolate.min",
         "d3-time": "node_modules/d3-time/build/d3-time.min",
-        "d3-time-format": "node_modules/d3-time-format/build/d3-time-format.min"
+        "d3-time-format": "node_modules/d3-time-format/build/d3-time-format.min",
+        "printj": "node_modules/printj/dist/printj.min"
     },
     "shim": {
         "angular": {
@@ -66,6 +68,9 @@ requirejs.config({
         "moment-duration-format": {
             "deps": ["moment"]
         },
+        "saveAs": {
+            "exports": "saveAs"
+        },
         "screenfull": {
             "exports": "screenfull"
         },

package.json

@@ -15,7 +15,8 @@
     "d3-time-format": "^2.0.3",
     "express": "^4.13.1",
     "minimist": "^1.1.1",
-    "request": "^2.69.0"
+    "request": "^2.69.0",
+    "vue": "^2.5.6"
   },
   "devDependencies": {
     "bower": "^1.7.7",
@@ -48,6 +49,7 @@
     "mkdirp": "^0.5.1",
     "moment": "^2.11.1",
     "node-bourbon": "^4.2.3",
+    "printj": "^1.1.0",
     "requirejs": "2.1.x",
     "split": "^1.0.0"
   },

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

@@ -57,7 +57,12 @@
             </div>
             <mct-representation key="representation.selected.key"
                                 mct-object="representation.selected.key && domainObject"
-                                class="abs flex-elem grows object-holder-main scroll">
+                                class="abs flex-elem grows object-holder-main scroll"
+                                mct-selectable="{
+                                    item: domainObject.useCapability('adapter'),
+                                    oldItem: domainObject
+                                }"
+                                mct-init-select>
             </mct-representation>
         </div>
     </div>

platform/commonUI/browse/res/templates/browse/inspector-region.html

@@ -19,12 +19,21 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<div ng-controller="InspectorController">
-    <div ng-repeat="region in regions">
+<div ng-controller="InspectorController as controller">
         <mct-representation
-                key="region.content.key"
-                mct-object="domainObject"
+                key="'object-properties'"
+                mct-object="controller.selectedItem()"
                 ng-model="ngModel">
         </mct-representation>
-    </div>
+
+        <div ng-if="!controller.hasProviderView()">
+            <mct-representation
+                    key="inspectorKey"
+                    mct-object="controller.selectedItem()"
+                    ng-model="ngModel">
+            </mct-representation>
+        </div>
+
+        <div class='inspector-provider-view'>
+        </div>
 </div>

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

@@ -38,8 +38,6 @@
                   ng-class="{ last:($index + 1) === contextualParents.length }">
                 <mct-representation key="'label'"
                                     mct-object="parent"
-                                    ng-model="ngModel"
-                                    ng-click="ngModel.selectedObject = parent"
                                     class="location-item">
                 </mct-representation>
             </span>
@@ -51,8 +49,6 @@
                   ng-class="{ last:($index + 1) === primaryParents.length }">
                 <mct-representation key="'label'"
                                     mct-object="parent"
-                                    ng-model="ngModel"
-                                    ng-click="ngModel.selectedObject = parent"
                                     class="location-item">
                 </mct-representation>
             </span>

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

@@ -20,7 +20,7 @@
  at runtime from the About dialog for additional information.
 -->
 <div class="abs top-bar">
-    <div class="title">{{ngModel.title}}</div>
+    <div class="dialog-title">{{ngModel.title}}</div>
     <div class="hint">All fields marked <span class="req icon-asterisk"></span> are required.</div>
 </div>
 <div class='abs editor'>

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

@@ -1,11 +1,10 @@
 <div class="l-message"
      ng-class="'message-severity-' + ngModel.severity">
-    <div class="ui-symbol type-icon message-type"></div>
-    <div class="message-contents">
+    <div class="w-message-contents">
         <div class="top-bar">
             <div class="title">{{ngModel.title}}</div>
-            <div class="hint" ng-hide="ngModel.hint === undefined">{{ngModel.hint}}</div>
         </div>
+        <div class="hint" ng-hide="ngModel.hint === undefined">{{ngModel.hint}}</div>
         <div class="message-body">
             <div class="message-action">
                 {{ngModel.actionText}}
@@ -25,8 +24,6 @@
                ng-click="ngModel.primaryOption.callback()">
                 {{ngModel.primaryOption.label}}
             </a>
-
         </div>
-
     </div>
 </div>

platform/commonUI/dialog/res/templates/overlay-message-list.html

@@ -1,17 +1,17 @@
-<mct-container key="overlay" class="t-message-list">
-    <div class="message-contents">
-        <div class="abs top-bar">
-            <div class="title">{{ngModel.dialog.title}}</div>
+<mct-container key="overlay">
+    <div class="t-message-list">
+        <div class="top-bar">
+            <div class="dialog-title">{{ngModel.dialog.title}}</div>
             <div class="hint">Displaying {{ngModel.dialog.messages.length}} message<span ng-show="ngModel.dialog.messages.length > 1 ||
                                                                                                   ngModel.dialog.messages.length == 0">s</span>
             </div>
         </div>
-        <div class="abs message-body">
+        <div class="w-messages">
             <mct-include
-                    ng-repeat="msg in ngModel.dialog.messages | orderBy: '-'"
-                    key="'message'" ng-model="msg.model"></mct-include>
+                ng-repeat="msg in ngModel.dialog.messages | orderBy: '-'"
+                key="'message'" ng-model="msg.model"></mct-include>
         </div>
-        <div class="abs bottom-bar">
+        <div class="bottom-bar">
             <a ng-repeat="dialogAction in ngModel.dialog.actions"
                class="s-button major"
                ng-click="dialogAction.action()">

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

@@ -21,7 +21,7 @@
 -->
 <mct-container key="overlay">
     <div class="abs top-bar">
-        <div class="title">{{ngModel.dialog.title}}</div>
+        <div class="dialog-title">{{ngModel.dialog.title}}</div>
         <div class="hint">{{ngModel.dialog.hint}}</div>
     </div>
     <div class='abs editor'>

platform/commonUI/edit/bundle.js

@@ -121,7 +121,8 @@ define([
                     "key": "ElementsController",
                     "implementation": ElementsController,
                     "depends": [
-                        "$scope"
+                        "$scope",
+                        "openmct"
                     ]
                 },
                 {
@@ -299,9 +300,6 @@ define([
                 {
                     "key": "edit-elements",
                     "template": elementsTemplate,
-                    "uses": [
-                        "composition"
-                    ],
                     "gestures": [
                         "drop"
                     ]
@@ -385,7 +383,10 @@ define([
                     ]
                 },
                 {
-                    "implementation": EditToolbarRepresenter
+                    "implementation": EditToolbarRepresenter,
+                    "depends": [
+                        "openmct"
+                    ]
                 }
             ],
             "constants": [

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

@@ -61,7 +61,12 @@
             <mct-representation key="representation.selected.key"
                                 mct-object="representation.selected.key && domainObject"
                                 class="abs flex-elem grows object-holder-main scroll"
-                                toolbar="toolbar">
+                                toolbar="toolbar"
+                                mct-selectable="{
+                                    item: domainObject.useCapability('adapter'),
+                                    oldItem: domainObject
+                                }"
+                                mct-init-select>
             </mct-representation>
         </div><!--/ l-object-wrapper-inner -->
     </div>

platform/commonUI/edit/res/templates/elements.html

@@ -25,7 +25,7 @@
                  ng-model="filterBy">
     </mct-include>
     <div class="flex-elem grows vscroll">
-        <ul class="tree">
+        <ul class="tree" ng-if="composition.length > 0">
             <li ng-repeat="containedObject in composition | filter:searchElements">
                 <span class="tree-item">
                     <mct-representation
@@ -36,5 +36,6 @@
                 </span>
             </li>
         </ul>
+        <div ng-if="composition.length === 0">No contained elements</div>    
     </div>
 </div>

platform/commonUI/edit/src/capabilities/EditorCapability.js

@@ -101,10 +101,15 @@ define(
          */
         EditorCapability.prototype.finish = function () {
             var domainObject = this.domainObject;
-            return this.transactionService.cancel().then(function () {
-                domainObject.getCapability("status").set("editing", false);
-                return domainObject;
-            });
+
+            if (this.transactionService.isActive()) {
+                return this.transactionService.cancel().then(function () {
+                    domainObject.getCapability("status").set("editing", false);
+                    return domainObject;
+                });
+            } else {
+                return Promise.resolve(domainObject);
+            }
         };
 
         /**

platform/commonUI/edit/src/controllers/ElementsController.js

@@ -29,7 +29,11 @@ define(
          *
          * @constructor
          */
-        function ElementsController($scope) {
+        function ElementsController($scope, openmct) {
+            this.scope = $scope;
+            this.scope.composition = [];
+            var self = this;
+
             function filterBy(text) {
                 if (typeof text === 'undefined') {
                     return $scope.searchText;
@@ -47,10 +51,44 @@ define(
                 }
             }
 
+            function setSelection(selection) {
+                self.scope.selection = selection;
+                self.refreshComposition(selection);
+            }
+
             $scope.filterBy = filterBy;
             $scope.searchElements = searchElements;
+
+            openmct.selection.on('change', setSelection);
+            setSelection(openmct.selection.get());
+
+            $scope.$on("$destroy", function () {
+                openmct.selection.off("change", setSelection);
+            });
         }
 
+        /**
+         * Gets the composition for the selected object and populates the scope with it.
+         *
+         * @param selection the selection object
+         * @private
+         */
+        ElementsController.prototype.refreshComposition = function (selection) {
+            if (!selection[0]) {
+                return;
+            }
+
+            var selectedObjectComposition = selection[0].context.oldItem.useCapability('composition');
+
+            if (selectedObjectComposition) {
+                selectedObjectComposition.then(function (composition) {
+                    this.scope.composition = composition;
+                }.bind(this));
+            } else {
+                this.scope.composition = [];
+            }
+        };
+
         return ElementsController;
     }
 );

platform/commonUI/edit/src/representers/EditToolbarRepresenter.js

@@ -38,7 +38,7 @@ define(
          * @constructor
          * @implements {Representer}
          */
-        function EditToolbarRepresenter(scope, element, attrs) {
+        function EditToolbarRepresenter(openmct, scope, element, attrs) {
             var self = this;
 
             // Mark changes as ready to persist
@@ -109,6 +109,7 @@ define(
             this.updateSelection = updateSelection;
             this.toolbar = undefined;
             this.toolbarObject = {};
+            this.openmct = openmct;
 
             // If this representation exposes a toolbar, set up watches
             // to synchronize with it.
@@ -146,7 +147,7 @@ define(
             // Expose the toolbar object to the parent scope
             initialize(definition);
             // Create a selection scope
-            this.setSelection(new EditToolbarSelection());
+            this.setSelection(new EditToolbarSelection(this.openmct));
             // Initialize toolbar to an empty selection
             this.updateSelection([]);
         };

platform/commonUI/edit/src/representers/EditToolbarSelection.js

@@ -38,10 +38,18 @@ define(
          * @memberof platform/commonUI/edit
          * @constructor
          */
-        function EditToolbarSelection() {
+        function EditToolbarSelection(openmct) {
             this.selection = [{}];
             this.selecting = false;
             this.selectedObj = undefined;
+
+            openmct.selection.on('change', function (selection) {
+                if (selection[0] && selection[0].context.toolbar) {
+                    this.select(selection[0].context.toolbar);
+                } else {
+                    this.deselect();
+                }
+            }.bind(this));
         }
 
         /**

platform/commonUI/edit/test/capabilities/EditorCapabilitySpec.js

@@ -62,6 +62,7 @@ define(
                 );
                 mockTransactionService.commit.andReturn(fastPromise());
                 mockTransactionService.cancel.andReturn(fastPromise());
+                mockTransactionService.isActive = jasmine.createSpy('isActive');
 
                 mockStatusCapability = jasmine.createSpyObj(
                     "statusCapability",
@@ -141,6 +142,7 @@ define(
 
             describe("finish", function () {
                 beforeEach(function () {
+                    mockTransactionService.isActive.andReturn(true);
                     capability.edit();
                     capability.finish();
                 });
@@ -152,6 +154,23 @@ define(
                 });
             });
 
+            describe("finish", function () {
+                beforeEach(function () {
+                    mockTransactionService.isActive.andReturn(false);
+                    capability.edit();
+                });
+
+                it("does not cancel transaction when transaction is not active", function () {
+                    capability.finish();
+                    expect(mockTransactionService.cancel).not.toHaveBeenCalled();
+                });
+
+                it("returns a promise", function () {
+                    expect(capability.finish() instanceof Promise).toBe(true);
+                });
+
+            });
+
             describe("dirty", function () {
                 var model = {};
 

platform/commonUI/edit/test/controllers/ElementsControllerSpec.js

@@ -27,11 +27,23 @@ define(
 
         describe("The Elements Pane controller", function () {
             var mockScope,
+                mockOpenMCT,
+                mockSelection,
                 controller;
 
             beforeEach(function () {
-                mockScope = jasmine.createSpy("$scope");
-                controller = new ElementsController(mockScope);
+                mockScope = jasmine.createSpyObj("$scope", ['$on']);
+                mockSelection = jasmine.createSpyObj("selection", [
+                    'on',
+                    'off',
+                    'get'
+                ]);
+                mockSelection.get.andReturn([]);
+                mockOpenMCT = {
+                    selection: mockSelection
+                };
+
+                controller = new ElementsController(mockScope, mockOpenMCT);
             });
 
             function getModel(model) {

platform/commonUI/edit/test/representers/EditToolbarRepresenterSpec.js

@@ -29,7 +29,9 @@ define(
                 mockElement,
                 testAttrs,
                 mockUnwatch,
-                representer;
+                representer,
+                mockOpenMCT,
+                mockSelection;
 
             beforeEach(function () {
                 mockScope = jasmine.createSpyObj(
@@ -46,7 +48,18 @@ define(
 
                 mockScope.$parent.$watchCollection.andReturn(mockUnwatch);
 
+                mockSelection = jasmine.createSpyObj("selection", [
+                    'on',
+                    'off',
+                    'get'
+                ]);
+                mockSelection.get.andReturn([]);
+                mockOpenMCT = {
+                    selection: mockSelection
+                };
+
                 representer = new EditToolbarRepresenter(
+                    mockOpenMCT,
                     mockScope,
                     mockElement,
                     testAttrs

platform/commonUI/edit/test/representers/EditToolbarSelectionSpec.js

@@ -28,13 +28,25 @@ define(
             var testProxy,
                 testElement,
                 otherElement,
-                selection;
+                selection,
+                mockSelection,
+                mockOpenMCT;
 
             beforeEach(function () {
                 testProxy = { someKey: "some value" };
                 testElement = { someOtherKey: "some other value" };
                 otherElement = { yetAnotherKey: 42 };
-                selection = new EditToolbarSelection();
+                mockSelection = jasmine.createSpyObj("selection", [
+                    // 'select',
+                    'on',
+                    'off',
+                    'get'
+                ]);
+                mockSelection.get.andReturn([]);
+                mockOpenMCT = {
+                    selection: mockSelection
+                };
+                selection = new EditToolbarSelection(mockOpenMCT);
                 selection.proxy(testProxy);
             });
 

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/bundle.js

@@ -41,6 +41,7 @@ define([
     "./src/controllers/BannerController",
     "./src/directives/MCTContainer",
     "./src/directives/MCTDrag",
+    "./src/directives/MCTSelectable",
     "./src/directives/MCTClickElsewhere",
     "./src/directives/MCTResize",
     "./src/directives/MCTPopup",
@@ -90,6 +91,7 @@ define([
     BannerController,
     MCTContainer,
     MCTDrag,
+    MCTSelectable,
     MCTClickElsewhere,
     MCTResize,
     MCTPopup,
@@ -328,6 +330,13 @@ define([
                         "$document"
                     ]
                 },
+                {
+                    "key": "mctSelectable",
+                    "implementation": MCTSelectable,
+                    "depends": [
+                        "openmct"
+                    ]
+                },
                 {
                     "key": "mctClickElsewhere",
                     "implementation": MCTClickElsewhere,

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

@@ -137,6 +137,11 @@
         min-height: 0;
         &.holder:not(:last-child) { margin-bottom: $interiorMarginLg; }
     }
+    &.l-flex-accordion .flex-accordion-holder {
+        display: flex;
+        flex-direction: column;
+        //overflow: hidden !important;
+    }
     .flex-container { @include flex-direction(column); }
 }
 

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/_fixed-position.scss

@@ -25,6 +25,7 @@
 	}
 
 	.l-fixed-position-item {
+        border-width: 1px;
 		position: absolute;
 		&.s-not-selected {
 			opacity: 0.8;

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'),
@@ -180,6 +180,20 @@ a.disabled {
     @include ellipsize();
 }
 
+.no-selection {
+    // aka selection = "None". Used in palettes and their menu buttons.
+    $c: red; $s: 48%; $e: 52%;
+    @include background-image(linear-gradient(-45deg,
+        transparent $s - 5%,
+        $c $s,
+        $c $e,
+        transparent $e + 5%
+    ));
+    background-repeat: no-repeat;
+    background-size: contain;
+}
+
+
 .scrolling,
 .scroll {
     overflow: auto;
@@ -234,6 +248,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/_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

@@ -37,7 +37,7 @@
 /********************************* CONTROLS */
 @import "controls/breadcrumb";
 @import "controls/buttons";
-@import "controls/color-palette";
+@import "controls/palette";
 @import "controls/controls";
 @import "controls/lists";
 @import "controls/menus";
@@ -70,6 +70,7 @@
 @import "fixed-position";
 @import "lists/tabular";
 @import "plots/plots-main";
+@import "plots/legend";
 @import "iframe";
 @import "views";
 @import "items/item";
@@ -80,3 +81,4 @@
 @import "autoflow";
 @import "features/imagery";
 @import "features/time-display";
+@import "widgets";

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/_widgets.scss

@@ -0,0 +1,306 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+
+/************************************************************* WIDGET OBJECT */
+.l-summary-widget {
+    // Widget layout classes here
+    @include ellipsize();
+    display: inline-block;
+    text-align: center;
+    .widget-label:before {
+        // Widget icon
+        font-size: 0.9em;
+        margin-right: $interiorMarginSm;
+    }
+}
+
+.s-summary-widget {
+    // Widget style classes here
+    @include boxShdw($shdwBtns);
+    border-radius: $basicCr;
+    border-style: solid;
+    border-width: 1px;
+    box-sizing: border-box;
+    cursor: default;
+    font-size: 0.8rem;
+    padding: $interiorMarginLg $interiorMarginLg * 2;
+    &[href] {
+        cursor: pointer;
+    }
+}
+
+.widget-edit-holder {
+    // Hide edit area when in browse mode
+    display: none;
+}
+
+.widget-rule-header {
+    @extend .l-flex-row;
+    @include align-items(center);
+    margin-bottom: $interiorMargin;
+    > .flex-elem {
+        &:not(:first-child) {
+            margin-left: $interiorMargin;
+        }
+    }
+}
+
+.widget-rules-wrapper,
+.widget-rule-content,
+.w-widget-test-data-content {
+    @include trans-prop-nice($props: (height, min-height, opacity), $dur: 250ms);
+    min-height: 0;
+    height: 0;
+    opacity: 0;
+    overflow: hidden;
+    pointer-events: none;
+}
+
+.widget-rules-wrapper {
+    flex: 1 1 auto !important;
+}
+
+.widget-rule-content.expanded {
+    overflow: visible !important;
+    min-height: 50px;
+    height: auto;
+    opacity: 1;
+    pointer-events: inherit;
+}
+
+.w-widget-test-data-content {
+    .l-enable {
+        padding: $interiorMargin 0;
+    }
+
+    .w-widget-test-data-items {
+        max-height: 20vh;
+        overflow-y: scroll !important;
+        padding-right: $interiorMargin;
+    }
+}
+
+.l-widget-thumb-wrapper,
+.l-compact-form label {
+    $ruleLabelW: 40%;
+    $ruleLabelMaxW: 150px;
+    @include display(flex);
+    max-width: $ruleLabelMaxW;
+    width: $ruleLabelW;
+}
+
+.t-message-widget-no-data {
+    display: none;
+}
+
+/********************************************************** EDITING A WIDGET */
+.s-status-editing > mct-view > .w-summary-widget {
+    // Classes for editor layout while editing a widget
+    // This selector is ugly and brittle, but needed to prevent interface from showing when widget is in a layout
+    // being edited.
+    @include absPosDefault();
+    @extend .l-flex-col;
+
+    > .l-summary-widget {
+        // Main view of the summary widget
+        // Give some airspace and center the widget in the area
+        margin: 30px auto;
+    }
+
+    .widget-edit-holder {
+        display: flex; // Overrides `display: none` during Browse mode
+        .flex-accordion-holder {
+            // Needed because otherwise accordion elements "creep" when contents expand and contract
+            display: block !important;
+        }
+        &.expanded-widget-test-data {
+            .w-widget-test-data-content {
+                min-height: 50px;
+                height: auto;
+                opacity: 1;
+                pointer-events: inherit;
+            }
+            &:not(.expanded-widget-rules) {
+                // Test data is expanded and rules are collapsed
+                // Make text data take up all the vertical space
+                .flex-accordion-holder { display: flex; }
+                .widget-test-data {
+                    flex-grow: 999999;
+                }
+                .w-widget-test-data-items {
+                    max-height: inherit;
+                }
+            }
+        }
+        &.expanded-widget-rules {
+            .widget-rules-wrapper {
+                min-height: 50px;
+                height: auto;
+                opacity: 1;
+                pointer-events: inherit;
+            }
+        }
+    }
+
+    &.s-status-no-data {
+        .widget-edit-holder {
+            opacity: 0.3;
+            pointer-events: none;
+        }
+        .t-message-widget-no-data {
+            display: flex;
+        }
+    }
+
+
+    .l-compact-form {
+        // Overrides on .l-compact-form
+        ul {
+            &:last-child { margin: 0; }
+            li {
+                @include align-items(flex-start);
+                @include flex-wrap(nowrap);
+                line-height: 230%; // Provide enough space when controls wrap
+                padding: 2px 0;
+                &:not(.widget-rule-header) {
+                    &:not(.connects-to-previous) {
+                        border-top: 1px solid $colorFormLines;
+                    }
+                }
+                &.connects-to-previous {
+                    padding: $interiorMargin 0;
+                }
+
+                > label {
+                    display: block; // Needed to align text to right
+                    text-align: right;
+                }
+            }
+        }
+
+        &.s-widget-test-data-item {
+            // Single line of ul li label span, etc.
+            ul {
+                li {
+                    border: none !important;
+                    > label {
+                        display: inline-block;
+                        width: auto;
+                        text-align: left;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.widget-edit-holder {
+    font-size: 0.8rem;
+}
+
+.widget-rules-wrapper {
+    // Wrapper area that holds n rules
+    box-sizing: border-box;
+    overflow-y: scroll;
+    padding-right: $interiorMargin;
+}
+
+.l-widget-rule,
+.l-widget-test-data-item {
+    box-sizing: border-box;
+    margin-bottom: $interiorMarginSm;
+    padding: $interiorMargin $interiorMarginLg;
+}
+
+.l-widget-thumb-wrapper {
+    @extend .l-flex-row;
+    @include align-items(center);
+    > span { display: block; }
+    .grippy-holder,
+    .view-control {
+        margin-right: $interiorMargin;
+        width: 1em;
+        height: 1em;
+    }
+
+    .widget-thumb {
+        @include flex(1 1 auto);
+        width: 100%;
+    }
+}
+
+.rule-title {
+    @include flex(0 1 auto);
+    color: pullForward($colorBodyFg, 50%);
+}
+
+.rule-description {
+    @include flex(1 1 auto);
+    @include ellipsize();
+    color: pushBack($colorBodyFg, 20%);
+}
+
+.s-widget-rule,
+.s-widget-test-data-item {
+    background-color: rgba($colorBodyFg, 0.1);
+    border-radius: $basicCr;
+}
+
+.widget-thumb {
+    @include ellipsize();
+    @extend .s-summary-widget;
+    @extend .l-summary-widget;
+    padding: $interiorMarginSm $interiorMargin;
+}
+
+// Hide and show elements in the rule-header on hover
+.l-widget-rule,
+.l-widget-test-data-item {
+    .grippy,
+    .l-rule-action-buttons-wrapper,
+    .l-condition-action-buttons-wrapper,
+    .l-widget-test-data-item-action-buttons-wrapper {
+        @include trans-prop-nice($props: opacity, $dur: 500ms);
+        opacity: 0;
+    }
+    &:hover {
+        .grippy,
+        .l-rule-action-buttons-wrapper,
+        .l-widget-test-data-item-action-buttons-wrapper {
+            @include trans-prop-nice($props: opacity, $dur: 0);
+            opacity: 1;
+        }
+    }
+    .l-rule-action-buttons-wrapper {
+          .t-delete {
+            margin-left: 10px;
+          }
+    }
+    .t-condition {
+        &:hover {
+            .l-condition-action-buttons-wrapper {
+                @include trans-prop-nice($props: opacity, $dur: 0);
+                opacity: 1;
+            }
+        }
+    }
+}

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

@@ -150,6 +150,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 {
@@ -261,7 +281,7 @@ input[type="number"] {
 input[type="text"].lg {  width: 100% !important; }
 .l-input-med input[type="text"],
 input[type="text"].med { width: 200px !important; }
-input[type="text"].sm {  width: 50px !important; }
+input[type="text"].sm, input[type="number"].sm {  width: 50px !important; }
 .l-numeric input[type="text"],
 input[type="text"].numeric { text-align: right; }
 
@@ -317,14 +337,10 @@ input[type="text"].s-input-inline,
 .select {
     @include btnSubtle($bg: $colorSelectBg);
     @extend .icon-arrow-down; // Context arrow
-    @if $shdwBtns != none {
-        margin: 0 0 2px 0; // Needed to avoid dropshadow from being clipped by parent containers
-    }
     display: inline-block;
     padding: 0 $interiorMargin;
     overflow: hidden;
     position: relative;
-    line-height: $formInputH;
     select {
         @include appearance(none);
         box-sizing: border-box;
@@ -340,11 +356,13 @@ input[type="text"].s-input-inline,
         }
     }
     &:before {
-        pointer-events: none;
+        @include transform(translateY(-50%));
         color: rgba($colorInvokeMenu, percentToDecimal($contrastInvokeMenuPercent));
         display: block;
+        pointer-events: none;
         position: absolute;
-        right: $interiorMargin; top: 0;
+        right: $interiorMargin;
+        top: 50%;
     }
 }
 
@@ -396,8 +414,7 @@ input[type="text"].s-input-inline,
     .l-elem-wrapper {
         mct-representation {
             // Holds the context-available item
-            // Must have min-width to make flex work properly
-            // in Safari
+            // Must have min-width to make flex work properly in Safari
             min-width: 0.7em;
         }
     }
@@ -563,7 +580,6 @@ input[type="text"].s-input-inline,
     height: $h;
     margin-top: 1 + floor($h/2) * -1;
     @include btnSubtle(pullForward($colorBtnBg, 10%));
-    //border-radius: 50% !important;
 }
 
 @mixin sliderKnobRound() {
@@ -578,7 +594,6 @@ input[type="text"].s-input-inline,
 
 input[type="range"] {
     // HTML5 range inputs
-
     -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
     background: transparent; /* Otherwise white in Chrome */
     &:focus {
@@ -736,6 +751,30 @@ textarea {
     }
 }
 
+.view-switcher,
+.t-btn-view-large {
+    @include trans-prop-nice-fade($controlFadeMs);
+}
+
+.view-control {
+    @extend .icon-arrow-right;
+    cursor: pointer;
+    font-size: 0.75em;
+    &:before {
+        position: absolute;
+        @include trans-prop-nice(transform, 100ms);
+        @include transform-origin(center);
+    }
+    &.expanded:before {
+        @include transform(rotate(90deg));
+    }
+}
+
+.grippy {
+    @extend .icon-grippy;
+    cursor: move;
+}
+
 /******************************************************** BROWSER ELEMENTS */
 body.desktop {
     ::-webkit-scrollbar {

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

@@ -29,23 +29,27 @@
     }
 
     .icon {
-        font-size: 16px; //120%;
+        font-size: 16px;
     }
 
     .title-label {
         margin-left: $interiorMarginSm;
     }
 
+    .icon-swatch,
     .color-swatch {
         // Used in color menu buttons in toolbar
         $d: 10px;
         display: inline-block;
         border: 1px solid rgba($colorBtnFg, 0.2);
-        height: $d;
-        width: $d;
+        height: $d; width: $d;
+        line-height: $d;
         vertical-align: middle;
         margin-left: $interiorMarginSm;
         margin-top: -2px;
+        &:not(.no-selection) {
+            border-color: transparent;
+        }
     }
 
     &:after {

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

@@ -19,7 +19,7 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-
+/******************************************************************* STATUS BLOCK ELEMS */
 @mixin statusBannerColors($bg, $fg: $colorStatusFg) {
 	$bgPb: 30%;
 	$bgPbD: 10%;
@@ -140,7 +140,7 @@
     }
 }
 
-/* Styles for messages and message banners */
+/******************************************************************* MESSAGE BANNERS */
 .message {
 	&.block {
 		border-radius: $basicCr;
@@ -196,7 +196,6 @@
 		padding: 0 $interiorMargin;
 	}
     .close {
-		//@include test(red, 0.7);
 		cursor: pointer;
         font-size: 7px;
 		width: 8px;
@@ -240,132 +239,147 @@
     }
 }
 
-@mixin messageBlock($iconW: 32px) {
-    .type-icon.message-type {
+/******************************************************************* MESSAGES */
+
+/* Contexts:
+    In .t-message-list
+    In .overlay as a singleton
+    Inline in the view area
+ */
+
+// Archetypal message
+.l-message {
+    $iconW: 32px;
+    @include display(flex);
+    @include flex-direction(row);
+    @include align-items(stretch);
+    padding: $interiorMarginLg;
+
+    &:before {
+        // Icon
+        @include flex(0 1 auto);
         @include txtShdw($shdwStatusIc);
         @extend .icon-bell;
         color: $colorStatusDefault;
         font-size: $iconW;
-        padding: 1px;
         width: $iconW + 2;
+        margin-right: $interiorMarginLg;
     }
 
-    .message-severity-info .type-icon.message-type {
+    &.message-severity-info:before {
         @extend .icon-info;
         color: $colorInfo;
     }
-    .message-severity-alert .type-icon.message-type {
-        @extend .icon-bell;
+
+    &.message-severity-alert:before {
         color: $colorWarningLo;
     }
-    .message-severity-error .type-icon.message-type {
+
+    &.message-severity-error:before {
         @extend .icon-alert-rect;
         color: $colorWarningHi;
     }
 }
-/* Paths:
-    t-dialog | t-dialog-sm > t-message-single | t-message-list > overlay > holder > contents > l-message >
-        message-type > (icon)
-        message-contents >
-        top-bar >
-            title
-            hint
-        editor >
-            (if displaying list of messages)
-            ul > li > l-message >
-                ... same as above
-        bottom-bar
-*/
 
-.l-message {
+
+.w-message-contents {
+    @include flex(1 1 auto);
     @include display(flex);
-    @include flex-direction(row);
-    @include align-items(stretch);
-    .type-icon.message-type {
-        @include flex(0 1 auto);
-        position: relative;
-    }
-    .message-contents {
-        @include flex(1 1 auto);
-        margin-left: $overlayMargin;
-        position: relative;
+    @include flex-direction(column);
 
-        .top-bar,
+    > div,
+    > span {
+        //@include test(red);
+        margin-bottom: $interiorMargin;
+    }
+
+    .message-body {
+        @include flex(1 1 100%);
+    }
+}
+
+// Singleton in an overlay dialog
+.t-message-single .l-message,
+.t-message-single.l-message {
+        $iconW: 80px;
+        @include absPosDefault();
+        padding: 0;
+        &:before {
+            font-size: $iconW;
+            width: $iconW + 2;
+        }
+        .title {
+            font-size: 1.2em;
+        }
+}
+
+// Singleton inline in a view
+.t-message-inline .l-message,
+.t-message-inline.l-message {
+    border-radius: $controlCr;
+    &.message-severity-info { background-color: rgba($colorInfo, 0.3); }
+    &.message-severity-alert { background-color: rgba($colorWarningLo, 0.3); }
+    &.message-severity-error { background-color: rgba($colorWarningHi, 0.3); }
+
+    .w-message-contents.l-message-body-only {
         .message-body {
-            margin-bottom: $interiorMarginLg * 2;
+            margin-top: $interiorMargin;
         }
     }
 }
 
+// In a list
+.t-message-list {
+    @include absPosDefault();
+    @include display(flex);
+    @include flex-direction(column);
 
-// Message as singleton
-.t-message-single {
-    @include messageBlock(80px);
-}
-
-body.desktop .t-message-single {
-    .l-message,
-    .bottom-bar {
-        @include absPosDefault();
+    > div,
+    > span {
+        margin-bottom: $interiorMargin;
     }
 
-    .bottom-bar {
-        top: auto;
-        height: $ovrFooterH;
+    .w-messages {
+        @include flex(1 1 100%);
+        overflow-y: auto;
+        padding-right: $interiorMargin;
     }
+    // Each message
+    .l-message {
+        border-radius: $controlCr;
+        background: rgba($colorOvrFg, 0.1);
+        margin-bottom: $interiorMargin;
+        .hint,
+        .bottom-bar {
+            text-align: left;
+        }
+    }
+
 }
 
 @include phonePortrait {
-    .t-message-single {
-        .l-message {
-            @include flex-direction(column);
-            .message-contents { margin-left: 0; }
-        }
-        .type-icon.message-type {
+    .t-message-single .l-message,
+    .t-message-single.l-message {
+        @include flex-direction(column);
+        &:before {
+            margin-right: 0;
             margin-bottom: $interiorMarginLg;
-            width: 100%;
             text-align: center;
+            width: 100%;
         }
 
         .bottom-bar {
-            text-align: center !important;
-        }
-    }
-}
-
-// Messages in list
-.t-message-list {
-    @include messageBlock(32px);
-
-    .message-contents {
-        .l-message {
-            border-radius: $controlCr;
-            background: rgba($colorOvrFg, 0.1);
-            margin-bottom: $interiorMargin;
-            padding: $interiorMarginLg;
-
-            .message-contents,
-            .bottom-bar {
-                position: relative;
-            }
-
-            .message-contents {
-                font-size: 0.9em;
-                margin-left: $interiorMarginLg;
-                .message-action { color: pushBack($colorOvrFg, 20%); }
-                .bottom-bar { text-align: left; }
-            }
-
-            .top-bar,
-            .message-body {
-                margin-bottom: $interiorMarginLg;
+            text-align: center;
+            .s-button {
+                display: block;
+                width: 100%;
             }
         }
     }
 }
 
 body.desktop .t-message-list {
-    .message-contents .l-message { margin-right: $interiorMarginLg; }
+    .w-message-contents { padding-right: $interiorMargin; }
 }
 
 // Alert elements in views
@@ -384,10 +398,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/controls/_palette.scss

@@ -0,0 +1,89 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+.l-palette {
+	box-sizing: border-box;
+	padding: $interiorMargin !important;
+}
+
+.l-palette-row {
+    $d: 16px;
+    $m: 1;
+    $colorsPerRow: 10;
+    display: flex;
+    flex-wrap: wrap;
+    line-height: $d;
+    width: ($d * $colorsPerRow) + ($m * $colorsPerRow);
+
+    &.l-option-row {
+        margin-bottom: $interiorMargin;
+        .s-palette-item {
+            border-color: $colorPaletteFg;
+        }
+    }
+
+    .l-palette-item {
+        box-sizing: border-box;
+        display: block;
+        height: $d; width: $d;
+        min-width: $d;
+        line-height: $d * 0.9;
+        margin: 0 ($m * 1px) ($m * 1px) 0;
+        position: relative;
+        text-align: center;
+    }
+}
+
+.s-palette-item {
+    border: 1px solid transparent;
+    color: $colorPaletteFg;
+    text-shadow: $shdwPaletteFg;
+    @include trans-prop-nice-fade(0.25s);
+    &:hover {
+        @include trans-prop-nice-fade(0);
+        border-color: $colorPaletteSelected !important;
+    }
+    &.selected {
+        border-color: $colorPaletteSelected;
+        box-shadow: $shdwPaletteSelected; //Needed to see selection rect on light colored swatches
+    }
+}
+
+.l-palette-item-label {
+    margin-left: $interiorMargin;
+}
+
+.l-inline-palette {
+    .l-palette-row {
+        width: 100%;
+        .l-palette-item {
+            //@include display(flex);
+            @include flex(1 0 auto);
+            margin: 1px;
+            min-width: auto;
+            width: auto;
+            &:before {
+                content: '';
+                padding-top: 75%;
+            }
+        }
+    }
+}

platform/commonUI/general/res/sass/edit/_editor.scss

@@ -80,23 +80,32 @@
 
     // Editing Grids
     .l-grid-holder {
-        display: block;
         .l-grid {
             &.l-grid-x { @include bgTicks($colorGridLines, 'x'); }
             &.l-grid-y { @include bgTicks($colorGridLines, 'y'); }
         }
     }
 
-    // Prevent nested frames from showing their grids
-    .t-frame-outer .l-grid-holder { display: none !important; }
-
-    // Prevent nested elements from showing s-hover-border
-    .t-frame-outer .s-hover-border {
-        border: none !important;
+    // Display grid when selected or selection parent.
+    .s-selected .l-grid-holder,
+    .s-selected-parent .l-grid-holder {
+        display: block;
     }
 
-    // Prevent nested frames from being selectable until we have proper sub-object editing
-    .t-frame-outer .t-frame-outer {
-        pointer-events: none;
+    // Display in nested frames...
+    .t-frame-outer {
+        // ...when drilled in or selection parent...
+        &.s-drilled-in, &.s-selected-parent {
+            .l-grid-holder {
+                display: block;
+            }
+            .t-frame-outer:not(.s-drilled-in) .l-grid-holder {
+                display: none;
+            }
+        }
+        // ...but hide otherwise.
+        .l-grid-holder {
+            display: none;
+        }
     }
 }

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

@@ -20,7 +20,19 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 .section-header {
+    border-radius: $basicCr;
+    background: $colorFormSectionHeader;
+    color: lighten($colorBodyFg, 20%);
+    font-size: inherit;
+    margin: $interiorMargin 0;
+    padding: $formTBPad $formLRPad;
     text-transform: uppercase;
+    .view-control {
+        display: inline-block;
+        margin-right: $interiorMargin;
+        width: 1em;
+        height: 1em;
+    }
 }
 
 .form {
@@ -41,15 +53,6 @@
         }
     }
 
-    .section-header {
-        border-radius: $basicCr;
-        background: $colorFormSectionHeader;
-        $c: lighten($colorBodyFg, 20%);
-        color: $c;
-        font-size: 0.8em;
-        padding: $formTBPad $formLRPad;
-    }
-
 	.form-row {
 		$m: $interiorMargin;
 		box-sizing: border-box;
@@ -57,9 +60,6 @@
         margin-bottom: $interiorMarginLg * 2;
 		padding: $formTBPad 0;
 		position: relative;
-        //&ng-form {
-        //    display: block;
-        //}
 
 		&.first {
 			border-top: none;
@@ -171,3 +171,106 @@
 		padding: $interiorMargin;
 	}
 }
+
+/**************************************************************************** COMPACT FORM */
+// ul > li > label, control
+// Make a new UL for each form section
+// Allow control-first, controls-below
+// TO-DO: migrate work in branch ch-plot-styling that users .inspector-config to use classes below instead
+
+.l-compact-form .tree ul li,
+.l-compact-form ul li {
+    padding: 2px 0;
+}
+
+
+.l-compact-form {
+    $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);
+            }
+            label {
+                line-height: inherit;
+                width: $labelW;
+            }
+            .controls {
+                @include flex-grow(1);
+                margin-left: $interiorMargin;
+                input[type="text"],
+                input[type="search"],
+                input[type="number"],
+                .select {
+                    height: $btnStdH;
+                    line-height: $btnStdH;
+                    vertical-align: middle;
+                }
+
+                .e-control {
+                    // Individual form controls
+                    &:not(:first-child) {
+                        margin-left: $interiorMarginSm;
+                    }
+                }
+            }
+
+            &.connects-to-previous {
+                padding-top: 0;
+            }
+
+            &.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;
+        }
+    }
+}

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/overlay/_overlay.scss

@@ -79,6 +79,7 @@
 
     // Dialog boxes, size constrained and centered in desktop/tablet
     &.l-dialog {
+        font-size: 0.8rem;
         .s-button {
             &:not(.major) {
                 @include btnSubtle($bg: $colorOvrBtnBg, $bgHov: pullForward($colorOvrBtnBg, 10%), $fg: $colorOvrBtnFg, $fgHov: $colorOvrBtnFg, $ic: $colorOvrBtnFg, $icHov: $colorOvrBtnFg);
@@ -125,9 +126,9 @@
             @include containerSubtle($colorOvrBg, $colorOvrFg);
         }
 
-        .title {
+        .dialog-title {
             @include ellipsize();
-            font-size: 1.2em;
+            font-size: 1.5em;
             line-height: 120%;
             margin-bottom: $interiorMargin;
         }

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,18 +20,64 @@
  * 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;
+    display: flex;
 	font-size: 0.7rem;
 	position: relative;
 	width: 100%;
 	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 +95,6 @@
         }
 
         .gl-plot-axis-area.gl-plot-x {
-            //@include test(green);
             top: auto;
             right: 0;
             bottom: 0;
@@ -63,7 +108,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 +203,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 +269,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;
     }
@@ -52,21 +52,11 @@ ul.tree {
 
     .view-control {
         color: $colorItemTreeVC;
-        font-size: 0.75em;
         margin-right: $interiorMargin;
-        height: 100%;
-        line-height: inherit;
         width: $treeVCW;
-        &.has-children {
-            &:before {
-                position: absolute;
-                @include trans-prop-nice(transform, 100ms);
-                content: "\e904";
-                @include transform-origin(center);
-            }
-            &.expanded:before {
-                @include transform(rotate(90deg));
-            }
+        &:before { display: block; }
+        &.no-children {
+            &:before { display: none; }
         }
     }
 

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

@@ -23,15 +23,14 @@
     $ohH: $btnFrameH;
     $bc: $colorInteriorBorder;
     &.child-frame.panel {
+        border: 1px solid transparent;
         z-index: 0; // Needed to prevent child-frame controls from showing through when another child-frame is above
         &:not(.no-frame) {
             background: $colorBodyBg;
-            border: 1px solid $bc;
-            &:hover {
-                border-color: lighten($bc, 10%);
-            }
+            border-color: $bc;
         }
     }
+
     .object-browse-bar {
         font-size: 0.75em;
         height: $ohH;
@@ -44,7 +43,8 @@
 
     &.t-object-type-timer,
     &.t-object-type-clock,
-    &.t-object-type-hyperlink {
+    &.t-object-type-hyperlink,
+    &.t-object-type-summary-widget {
         // Hide the right side buttons for objects where they don't make sense
         // Note that this will hide the view Switcher button if applied
         // to an object that has it.
@@ -91,9 +91,9 @@
 
     &.no-frame {
         background: transparent !important;
-        border: none !important;
+        border: none;
         .object-browse-bar .right {
-            $m: 0; // $interiorMarginSm;
+            $m: 0;
             background: rgba(black, 0.3);
             border-radius: $basicCr;
             padding: $interiorMarginSm;
@@ -103,7 +103,7 @@
         }
         &.t-frame-outer > .t-rep-frame {
             &.contents {
-                $m: 2px;
+                $m: 0px;
                 top: $m;
                 right: $m;
                 bottom: $m;
@@ -114,6 +114,7 @@
                     display: none;
                 }
                 > .object-holder.abs {
+                    overflow: hidden;
                     top: 0 !important;
                 }
             }
@@ -125,14 +126,21 @@
         pointer-events: none !important;
     }
 
-        /********************************************************** OBJECT TYPES */
-    .t-object-type-hyperlink {
+    /********************************************************** OBJECT TYPES */
+    .t-object-type-hyperlink,
+    .t-object-type-summary-widget {
         .object-holder {
             overflow: hidden;
         }
+        .w-summary-widget,
+        .l-summary-widget,
         .l-hyperlink.s-button {
-            // When a hyperlink is a button in a frame, make it expand to fill out to the object-holder
+            // Some object types expand to the full size of the object-holder.
             @extend .abs;
+        }
+
+        .l-summary-widget,
+        .l-hyperlink.s-button {
             .label {
                 @include ellipsize();
                 @include transform(translateY(-50%));

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

@@ -20,35 +20,51 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 .s-hover-border {
-    border: 1px dotted transparent;
+    &:hover {
+        border-color: rgba($colorSelectableSelectedPrimary, 0.5) !important;
+    }
 }
 
 .s-status-editing {
-    // Limit to editing mode until we have sub-object selection
+    // Limit to editing mode
+    $o: 0.5;
+    $oHover: 0.8;
+    $bc: $colorSelectableSelectedPrimary;
     .s-hover-border {
         // Show a border by default so user can see object bounds and empty objects
-        border: 1px dotted rgba($colorSelectableSelectedPrimary, 0.3) !important;
+        border-color: rgba($bc, $o) !important;
+        border-style: dotted !important;
+
         &:hover {
-            border-color: rgba($colorSelectableSelectedPrimary, 0.7) !important;
+            border-color: rgba($bc, $oHover) !important;
+        }
+
+        &.t-object-type-layout {
+            border-style: dashed !important;
         }
     }
-
-    .s-selected > .s-hover-border,
-    .s-selected.s-hover-border {
-        // Styles for a selected object. Also used by legacy Fixed Position/Panel objects.
-        border-color: $colorSelectableSelectedPrimary !important;
-        @include boxShdwLarge();
-        // Show edit-corners if you got 'em
-        .edit-corner {
-            display: block;
-            &:hover {
-                background-color: rgba($colorKey, 1);
+    .s-selected {
+        &.s-moveable {
+            &:not(.s-drilled-in) {
+                cursor: move;
             }
         }
     }
+}
 
-    .s-selected > .s-moveable,
-    .s-selected.s-moveable {
-        cursor: move;
+.s-selected > .s-hover-border,
+.s-selected.s-hover-border {
+    // Styles for a selected object. Also used by legacy Fixed Position/Panel objects.
+    border-color: $colorSelectableSelectedPrimary !important;
+    @include boxShdwLarge();
+    // Show edit-corners if you got 'em
+    .edit-corner {
+        display: block;
+        &:hover {
+            background-color: rgba($colorKey, 1);
+        }
     }
-}
+}
+
+
+

platform/commonUI/general/res/templates/controls/datetime-field.html

@@ -20,7 +20,7 @@
  at runtime from the About dialog for additional information.
 -->
 <span ng-controller="DateTimeFieldController">
-    <input type="text"
+    <input type="text" autocorrect="off" spellcheck="false"
            ng-model="textValue"
            ng-blur="restoreTextValue(); ngBlur()"
            ng-mouseup="ngMouseup()"

platform/commonUI/general/src/controllers/ObjectInspectorController.js

@@ -40,7 +40,7 @@ define(
 
             // Gets an array of the contextual parents/ancestors of the selected object
             function getContextualPath() {
-                var currentObj = $scope.ngModel.selectedObject,
+                var currentObj = $scope.domainObject,
                     currentParent,
                     parents = [];
 
@@ -68,7 +68,7 @@ define(
 
                 // If this the the initial call of this recursive function
                 if (!current) {
-                    current = $scope.ngModel.selectedObject;
+                    current = $scope.domainObject;
                     $scope.primaryParents = [];
                 }
 
@@ -87,16 +87,16 @@ define(
 
             // Gets the metadata for the selected object
             function getMetadata() {
-                $scope.metadata = $scope.ngModel.selectedObject &&
-                    $scope.ngModel.selectedObject.hasCapability('metadata') &&
-                    $scope.ngModel.selectedObject.useCapability('metadata');
+                $scope.metadata = $scope.domainObject &&
+                    $scope.domainObject.hasCapability('metadata') &&
+                    $scope.domainObject.useCapability('metadata');
             }
 
             // Set scope variables when the selected object changes
-            $scope.$watch('ngModel.selectedObject', function () {
-                $scope.isLink = $scope.ngModel.selectedObject &&
-                    $scope.ngModel.selectedObject.hasCapability('location') &&
-                    $scope.ngModel.selectedObject.getCapability('location').isLink();
+            $scope.$watch('domainObject', function () {
+                $scope.isLink = $scope.domainObject &&
+                    $scope.domainObject.hasCapability('location') &&
+                    $scope.domainObject.getCapability('location').isLink();
 
                 if ($scope.isLink) {
                     getPrimaryPath();
@@ -109,7 +109,7 @@ define(
                 getMetadata();
             });
 
-            var mutation = $scope.ngModel.selectedObject.getCapability('mutation');
+            var mutation = $scope.domainObject.getCapability('mutation');
             var unlisten = mutation.listen(getMetadata);
             $scope.$on('$destroy', unlisten);
         }

platform/commonUI/general/src/directives/MCTSelectable.js

@@ -21,39 +21,40 @@
  *****************************************************************************/
 
 define(
-    ["./SubPlot"],
-    function (SubPlot) {
+    [],
+    function () {
 
         /**
-         * 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
+         * The mct-selectable directive allows selection functionality
+         * (click) to be attached to specific elements.
+         *
+         * @memberof platform/commonUI/general
          * @constructor
          */
-        function SubPlotFactory(telemetryFormatter) {
-            this.telemetryFormatter = telemetryFormatter;
+        function MCTSelectable(openmct) {
+
+            // Link; install event handlers.
+            function link(scope, element, attrs) {
+                var removeSelectable = openmct.selection.selectable(
+                    element[0],
+                    scope.$eval(attrs.mctSelectable),
+                    attrs.hasOwnProperty('mctInitSelect') && scope.$eval(attrs.mctInitSelect) !== false
+                );
+
+                scope.$on("$destroy", function () {
+                    removeSelectable();
+                });
+            }
+
+            return {
+                // mct-selectable only makes sense as an attribute
+                restrict: "A",
+                // Link function, to install event handlers
+                link: link
+            };
+
         }
 
-        /**
-         * 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;
-
+        return MCTSelectable;
     }
 );

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/general/test/controllers/ObjectInspectorControllerSpec.js

@@ -41,16 +41,6 @@ define(
                     "$scope",
                     ["$watch", "$on"]
                 );
-                mockScope.ngModel = {};
-                mockScope.ngModel.selectedObject = {
-                    getCapability: function () {
-                        return {
-                            listen: function () {
-                                return true;
-                            }
-                        };
-                    }
-                };
 
                 mockObjectService = jasmine.createSpyObj(
                     "objectService",
@@ -77,22 +67,27 @@ define(
                     "location capability",
                     ["isLink"]
                 );
+
                 mockDomainObject.getCapability.andCallFake(function (param) {
                     if (param === 'location') {
                         return mockLocationCapability;
                     } else if (param === 'context') {
                         return mockContextCapability;
+                    } else if (param === 'mutation') {
+                        return {
+                            listen: function () {
+                                return true;
+                            }
+                        };
                     }
                 });
 
+                mockScope.domainObject = mockDomainObject;
                 controller = new ObjectInspectorController(mockScope, mockObjectService);
-
-                // Change the selected object to trigger the watch call
-                mockScope.ngModel.selectedObject = mockDomainObject;
             });
 
             it("watches for changes to the selected object", function () {
-                expect(mockScope.$watch).toHaveBeenCalledWith('ngModel.selectedObject', jasmine.any(Function));
+                expect(mockScope.$watch).toHaveBeenCalledWith('domainObject', jasmine.any(Function));
             });
 
             it("looks for contextual parent objects", function () {

platform/commonUI/regions/bundle.js

@@ -38,7 +38,8 @@ define([
                     "implementation": InspectorController,
                     "depends": [
                         "$scope",
-                        "policyService"
+                        "openmct",
+                        "$document"
                     ]
                 }
             ],

platform/commonUI/regions/src/InspectorController.js

@@ -21,44 +21,69 @@
  *****************************************************************************/
 
 define(
-    ['../../browse/src/InspectorRegion'],
-    function (InspectorRegion) {
+    [],
+    function () {
 
         /**
-         * The InspectorController adds region data for a domain object's type
-         * to the scope.
+         * The InspectorController listens for the selection changes and adds the selection
+         * object to the scope.
          *
          * @constructor
          */
-        function InspectorController($scope, policyService) {
-            var domainObject = $scope.domainObject,
-                typeCapability = domainObject.getCapability('type'),
-                statusListener;
+        function InspectorController($scope, openmct, $document) {
+            var self = this;
+            self.$scope = $scope;
 
             /**
-             * Filters region parts to only those allowed by region policies
-             * @param regions
-             * @returns {{}}
+             * Callback handler for the selection change event.
+             * Adds the selection object to the scope. If the selected item has an inspector view,
+             * it puts the key in the scope. If provider view exists, it shows the view.
              */
-            function filterRegions(inspector) {
-                //Dupe so we're not modifying the type definition.
-                return inspector.regions && inspector.regions.filter(function (region) {
-                    return policyService.allow('region', region, domainObject);
-                });
+            function setSelection(selection) {
+                if (selection[0]) {
+                    var view = openmct.inspectorViews.get(selection);
+                    var container = $document[0].querySelectorAll('.inspector-provider-view')[0];
+                    container.innerHTML = "";
+
+                    if (view) {
+                        self.providerView = true;
+                        view.show(container);
+                    } else {
+                        self.providerView = false;
+                        $scope.inspectorKey = selection[0].context.oldItem.getCapability("type").typeDef.inspector;
+                    }
+                }
+
+                self.$scope.selection = selection;
             }
 
-            function setRegions() {
-                $scope.regions = filterRegions(typeCapability.getDefinition().inspector || new InspectorRegion());
-            }
+            openmct.selection.on("change", setSelection);
+
+            setSelection(openmct.selection.get());
 
-            statusListener = domainObject.getCapability("status").listen(setRegions);
             $scope.$on("$destroy", function () {
-                statusListener();
+                openmct.selection.off("change", setSelection);
             });
-
-            setRegions();
         }
 
+        /**
+         * Gets the selected item.
+         *
+         * @returns a domain object
+         */
+        InspectorController.prototype.selectedItem = function () {
+            return this.$scope.selection[0].context.oldItem;
+        };
+
+        /**
+         * Checks if a provider view exists.
+         *
+         * @returns 'true' if provider view exists, 'false' otherwise
+         */
+        InspectorController.prototype.hasProviderView = function () {
+            return this.providerView;
+        };
+
         return InspectorController;
     }
 );

platform/commonUI/regions/test/InspectorControllerSpec.js

@@ -27,82 +27,93 @@ define(
         describe("The inspector controller ", function () {
             var mockScope,
                 mockDomainObject,
-                mockTypeCapability,
-                mockTypeDefinition,
-                mockPolicyService,
-                mockStatusCapability,
-                capabilities = {},
-                controller;
+                mockOpenMCT,
+                mockSelection,
+                mockInspectorViews,
+                mockTypeDef,
+                controller,
+                container,
+                $document = [],
+                selectable = [];
 
             beforeEach(function () {
-                mockTypeDefinition = {
-                    inspector:
-                        {
-                            'regions': [
-                                {'name': 'Part One'},
-                                {'name': 'Part Two'}
-                            ]
-                        }
+                mockTypeDef = {
+                    typeDef: {
+                        inspector: "some-key"
+                    }
                 };
 
-                mockTypeCapability = jasmine.createSpyObj('typeCapability', [
-                    'getDefinition'
-                ]);
-                mockTypeCapability.getDefinition.andReturn(mockTypeDefinition);
-                capabilities.type = mockTypeCapability;
-
-                mockStatusCapability = jasmine.createSpyObj('statusCapability', [
-                    'listen'
-                ]);
-                capabilities.status = mockStatusCapability;
-
                 mockDomainObject = jasmine.createSpyObj('domainObject', [
                     'getCapability'
                 ]);
-                mockDomainObject.getCapability.andCallFake(function (name) {
-                    return capabilities[name];
-                });
-
-                mockPolicyService = jasmine.createSpyObj('policyService', [
-                   'allow'
-                ]);
+                mockDomainObject.getCapability.andReturn(mockTypeDef);
 
                 mockScope = jasmine.createSpyObj('$scope',
-                    ['$on']
+                    ['$on', 'selection']
                 );
 
-                mockScope.domainObject = mockDomainObject;
+                selectable[0] = {
+                    context: {
+                        oldItem: mockDomainObject
+                    }
+                };
+
+                mockSelection = jasmine.createSpyObj("selection", [
+                    'on',
+                    'off',
+                    'get'
+                ]);
+                mockSelection.get.andReturn(selectable);
+
+                mockInspectorViews = jasmine.createSpyObj('inspectorViews', ['get']);
+                mockOpenMCT = {
+                    selection: mockSelection,
+                    inspectorViews: mockInspectorViews
+                };
+
+                container = jasmine.createSpy('container', ['innerHTML']);
+                $document[0] = jasmine.createSpyObj("$document", ['querySelectorAll']);
+                $document[0].querySelectorAll.andReturn([container]);
+
+                controller = new InspectorController(mockScope, mockOpenMCT, $document);
             });
 
-            it("filters out regions disallowed by region policy", function () {
-                mockPolicyService.allow.andReturn(false);
-                controller = new InspectorController(mockScope, mockPolicyService);
-                expect(mockScope.regions.length).toBe(0);
+            it("listens for selection change event", function () {
+                expect(mockOpenMCT.selection.on).toHaveBeenCalledWith(
+                    'change',
+                    jasmine.any(Function)
+                );
+
+                expect(controller.selectedItem()).toEqual(mockDomainObject);
+
+                var mockItem = jasmine.createSpyObj('domainObject', [
+                    'getCapability'
+                ]);
+                mockItem.getCapability.andReturn(mockTypeDef);
+                selectable[0].context.oldItem = mockItem;
+
+                mockOpenMCT.selection.on.mostRecentCall.args[1](selectable);
+
+                expect(controller.selectedItem()).toEqual(mockItem);
             });
 
-            it("does not filter out regions allowed by region policy", function () {
-                mockPolicyService.allow.andReturn(true);
-                controller = new InspectorController(mockScope, mockPolicyService);
-                expect(mockScope.regions.length).toBe(2);
+            it("cleans up on scope destroy", function () {
+                expect(mockScope.$on).toHaveBeenCalledWith(
+                    '$destroy',
+                    jasmine.any(Function)
+                );
+
+                mockScope.$on.calls[0].args[1]();
+
+                expect(mockOpenMCT.selection.off).toHaveBeenCalledWith(
+                    'change',
+                    jasmine.any(Function)
+                );
             });
 
-            it("Responds to status changes", function () {
-                mockPolicyService.allow.andReturn(true);
-                controller = new InspectorController(mockScope, mockPolicyService);
-                expect(mockScope.regions.length).toBe(2);
-                expect(mockStatusCapability.listen).toHaveBeenCalled();
-                mockPolicyService.allow.andReturn(false);
-                mockStatusCapability.listen.mostRecentCall.args[0]();
-                expect(mockScope.regions.length).toBe(0);
-            });
-
-            it("Unregisters status listener", function () {
-                var mockListener = jasmine.createSpy('listener');
-                mockStatusCapability.listen.andReturn(mockListener);
-                controller = new InspectorController(mockScope, mockPolicyService);
-                expect(mockScope.$on).toHaveBeenCalledWith("$destroy", jasmine.any(Function));
-                mockScope.$on.mostRecentCall.args[1]();
-                expect(mockListener).toHaveBeenCalled();
+            it("adds selection object to scope", function () {
+                expect(mockScope.selection).toEqual(selectable);
+                expect(controller.selectedItem()).toEqual(mockDomainObject);
             });
         });
     }

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

@@ -181,6 +181,8 @@ $colorPlotHash: $colorTick;
 $stylePlotHash: dashed;
 $colorPlotAreaBorder: $colorInteriorBorder;
 $colorPlotLabelFg: pushBack($colorPlotFg, 20%);
+$legendCollapsedNameMaxW: 50%;
+$legendHoverValueBg: rgba($colorBodyFg, 0.1);
 
 // Tree
 $colorItemTreeHoverBg: pullForward($colorBodyBg, $hoverRatioPercent);
@@ -243,6 +245,12 @@ $colorCalCellSelectedBg: $colorItemTreeSelectedBg;
 $colorCalCellSelectedFg: $colorItemTreeSelectedFg;
 $colorCalCellInMonthBg: pushBack($colorMenuBg, 5%);
 
+// Palettes
+$colorPaletteFg: pullForward($colorMenuBg, 30%);
+$colorPaletteSelected: #fff;
+$shdwPaletteFg: black 0 0 2px;
+$shdwPaletteSelected: inset 0 0 0 1px #000;
+
 // About Screen
 $colorAboutLink: #84b3ff;
 

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

@@ -181,6 +181,8 @@ $colorPlotHash: $colorTick;
 $stylePlotHash: dashed;
 $colorPlotAreaBorder: $colorInteriorBorder;
 $colorPlotLabelFg: pushBack($colorPlotFg, 20%);
+$legendCollapsedNameMaxW: 50%;
+$legendHoverValueBg: rgba($colorBodyFg, 0.2);
 
 // Tree
 $colorItemTreeHoverBg: pullForward($colorBodyBg, $hoverRatioPercent);
@@ -243,6 +245,12 @@ $colorCalCellSelectedBg: $colorItemTreeSelectedBg;
 $colorCalCellSelectedFg: $colorItemTreeSelectedFg;
 $colorCalCellInMonthBg: pullForward($colorMenuBg, 5%);
 
+// Palettes
+$colorPaletteFg: pullForward($colorMenuBg, 30%);
+$colorPaletteSelected: #333;
+$shdwPaletteFg: none;
+$shdwPaletteSelected: inset 0 0 0 1px #fff;
+
 // About Screen
 $colorAboutLink: #84b3ff;
 

platform/features/autoflow/plugin.js

@@ -1,54 +0,0 @@
-define([
-    'text!./res/templates/autoflow-tabular.html',
-    './src/AutoflowTabularController',
-    './src/MCTAutoflowTable'
-], function (
-    autoflowTabularTemplate,
-    AutoflowTabularController,
-    MCTAutoflowTable
-) {
-    return function (options) {
-        return function (openmct) {
-            openmct.legacyRegistry.register("platform/features/autoflow", {
-                "name": "WARP Telemetry Adapter",
-                "description": "Retrieves telemetry from the WARP Server and provides related types and views.",
-                "resources": "res",
-                "extensions": {
-                    "views": [
-                        {
-                            "key": "autoflow",
-                            "name": "Autoflow Tabular",
-                            "cssClass": "icon-packet",
-                            "description": "A tabular view of packet contents.",
-                            "template": autoflowTabularTemplate,
-                            "type": options && options.type,
-                            "needs": [
-                                "telemetry"
-                            ],
-                            "delegation": true
-                        }
-                    ],
-                    "controllers": [
-                        {
-                            "key": "AutoflowTabularController",
-                            "implementation": AutoflowTabularController,
-                            "depends": [
-                                "$scope",
-                                "$timeout",
-                                "telemetrySubscriber"
-                            ]
-                        }
-                    ],
-                    "directives": [
-                        {
-                            "key": "mctAutoflowTable",
-                            "implementation": MCTAutoflowTable
-                        }
-                    ]
-                }
-            });
-            openmct.legacyRegistry.enable("platform/features/autoflow");
-        };
-    };
-});
-

platform/features/autoflow/res/templates/autoflow-tabular.html

@@ -1,26 +0,0 @@
-<div class="items-holder abs contents autoflow obj-value-format"
-     ng-controller="AutoflowTabularController as autoflow">
-    <div class="abs l-flex-row holder t-autoflow-header l-autoflow-header">
-        <mct-include key="'input-filter'"
-                     ng-model="autoflow.filter"
-                     class="flex-elem">
-        </mct-include>
-        <div class="flex-elem grows t-last-update" title="Last Update">{{autoflow.updated()}}</div>
-        <a title="Change column width"
-            class="s-button flex-elem icon-arrows-right-left change-column-width"
-            ng-click="autoflow.increaseColumnWidth()"></a>
-    </div>
-    <div class="abs t-autoflow-items l-autoflow-items"
-         mct-resize="autoflow.setBounds(bounds)"
-         mct-resize-interval="50">
-        <mct-autoflow-table values="autoflow.rangeValues()"
-                            objects="autoflow.getTelemetryObjects()"
-                            rows="autoflow.getRows()"
-                            classes="autoflow.classes()"
-                            updated="autoflow.updated()"
-                            column-width="autoflow.columnWidth()"
-                            counter="autoflow.counter()"
-                            >
-        </mct-autoflow-table>
-    </div>
-</div>

platform/features/autoflow/src/AutoflowTableLinker.js

@@ -1,169 +0,0 @@
-/*global angular*/
-define(
-    [],
-    function () {
-
-        /**
-         * The link step for the `mct-autoflow-table` directive;
-         * watches scope and updates the DOM appropriately.
-         * See documentation in `MCTAutoflowTable.js` for the rationale
-         * for including this directive, as well as for an explanation
-         * of which values are placed in scope.
-         *
-         * @constructor
-         * @param {Scope} scope the scope for this usage of the directive
-         * @param element the jqLite-wrapped element which used this directive
-         */
-        function AutoflowTableLinker(scope, element) {
-            var objects, // Domain objects at last structure refresh
-                rows, // Number of rows from last structure refresh
-                priorClasses = {},
-                valueSpans = {}; // Span elements to put data values in
-
-            // Create a new name-value pair in the specified column
-            function createListItem(domainObject, ul) {
-                // Create a new li, and spans to go in it.
-                var li = angular.element('<li>'),
-                    titleSpan = angular.element('<span>'),
-                    valueSpan = angular.element('<span>');
-
-                // Place spans in the li, and li into the column.
-                // valueSpan must precede titleSpan in the DOM due to new CSS float approach
-                li.append(valueSpan).append(titleSpan);
-                ul.append(li);
-
-                // Style appropriately
-                li.addClass('l-autoflow-row');
-                titleSpan.addClass('l-autoflow-item l');
-                valueSpan.addClass('l-autoflow-item r l-obj-val-format');
-
-                // Set text/tooltip for the name-value row
-                titleSpan.text(domainObject.getModel().name);
-                titleSpan.attr("title", domainObject.getModel().name);
-
-                // Keep a reference to the span which will hold the
-                // data value, to populate in the next refreshValues call
-                valueSpans[domainObject.getId()] = valueSpan;
-
-                return li;
-            }
-
-            // Create a new column of name-value pairs in this table.
-            function createColumn(el) {
-                // Create a ul
-                var ul = angular.element('<ul>');
-
-                // Add it into the mct-autoflow-table
-                el.append(ul);
-
-                // Style appropriately
-                ul.addClass('l-autoflow-col');
-
-                // Get the current col width and apply at time of column creation
-                // Important to do this here, as new columns could be created after
-                // the user has changed the width.
-                ul.css('width', scope.columnWidth + 'px');
-
-                // Return it, so some li elements can be added
-                return ul;
-            }
-
-            // Change the width of the columns when user clicks the resize button.
-            function resizeColumn() {
-                element.find('ul').css('width', scope.columnWidth + 'px');
-            }
-
-            // Rebuild the DOM associated with this table.
-            function rebuild(domainObjects, rowCount) {
-                var activeColumn;
-
-                // Empty out our cached span elements
-                valueSpans = {};
-
-                // Start with an empty DOM beneath this directive
-                element.html("");
-
-                // Add DOM elements for each domain object being displayed
-                // in this table.
-                domainObjects.forEach(function (object, index) {
-                    // Start a new column if we'd run out of room
-                    if (index % rowCount === 0) {
-                        activeColumn = createColumn(element);
-                    }
-                    // Add the DOM elements for that object to whichever
-                    // column (a `ul` element) is current.
-                    createListItem(object, activeColumn);
-                });
-            }
-
-            // Update spans with values, as made available via the
-            // `values` attribute of this directive.
-            function refreshValues() {
-                // Get the available values
-                var values = scope.values || {},
-                    classes = scope.classes || {};
-
-                // Populate all spans with those values (or clear
-                // those spans if no value is available)
-                (objects || []).forEach(function (object) {
-                    var id = object.getId(),
-                        span = valueSpans[id],
-                        value;
-
-                    if (span) {
-                        // Look up the value...
-                        value = values[id];
-                        // ...and convert to empty string if it's undefined
-                        value = value === undefined ? "" : value;
-                        span.attr("data-value", value);
-
-                        // Update the span
-                        span.text(value);
-                        span.attr("title", value);
-                        span.removeClass(priorClasses[id]);
-                        span.addClass(classes[id]);
-                        priorClasses[id] = classes[id];
-                    }
-                    // Also need stale/alert/ok class
-                    // on span
-                });
-            }
-
-            // Refresh the DOM for this table, if necessary
-            function refreshStructure() {
-                // Only rebuild if number of rows or set of objects
-                // has changed; otherwise, our structure is still valid.
-                if (scope.objects !== objects ||
-                        scope.rows !== rows) {
-
-                    // Track those values to support future refresh checks
-                    objects = scope.objects;
-                    rows = scope.rows;
-
-                    // Rebuild the DOM
-                    rebuild(objects || [], rows || 1);
-
-                    // Refresh all data values shown
-                    refreshValues();
-                }
-            }
-
-            // Changing the domain objects in use or the number
-            // of rows should trigger a structure change (DOM rebuild)
-            scope.$watch("objects", refreshStructure);
-            scope.$watch("rows", refreshStructure);
-
-            // When the current column width has been changed, resize the column
-            scope.$watch('columnWidth', resizeColumn);
-
-            // When the last-updated time ticks,
-            scope.$watch("updated", refreshValues);
-
-            // Update displayed values when the counter changes.
-            scope.$watch("counter", refreshValues);
-
-        }
-
-        return AutoflowTableLinker;
-    }
-);

platform/features/autoflow/src/AutoflowTabularController.js

@@ -1,324 +0,0 @@
-
-define(
-    ['moment'],
-    function (moment) {
-
-        var ROW_HEIGHT = 16,
-            SLIDER_HEIGHT = 10,
-            INITIAL_COLUMN_WIDTH = 225,
-            MAX_COLUMN_WIDTH = 525,
-            COLUMN_WIDTH_STEP = 25,
-            DEBOUNCE_INTERVAL = 100,
-            DATE_FORMAT = "YYYY-DDD HH:mm:ss.SSS\\Z",
-            NOT_UPDATED = "No updates",
-            EMPTY_ARRAY = [];
-
-        /**
-         * Responsible for supporting the autoflow tabular view.
-         * Implements the all-over logic which drives that view,
-         * mediating between template-provided areas, the included
-         * `mct-autoflow-table` directive, and the underlying
-         * domain object model.
-         * @constructor
-         */
-        function AutflowTabularController(
-            $scope,
-            $timeout,
-            telemetrySubscriber
-        ) {
-            var filterValue = "",
-                filterValueLowercase = "",
-                subscription,
-                filteredObjects = [],
-                lastUpdated = {},
-                updateText = NOT_UPDATED,
-                rangeValues = {},
-                classes = {},
-                limits = {},
-                updatePending = false,
-                lastBounce = Number.NEGATIVE_INFINITY,
-                columnWidth = INITIAL_COLUMN_WIDTH,
-                rows = 1,
-                counter = 0;
-
-            // Trigger an update of the displayed table by incrementing
-            // the counter that it watches.
-            function triggerDisplayUpdate() {
-                counter += 1;
-            }
-
-            // Check whether or not an object's name matches the
-            // user-entered filter value.
-            function filterObject(domainObject) {
-                return (domainObject.getModel().name || "")
-                    .toLowerCase()
-                    .indexOf(filterValueLowercase) !== -1;
-            }
-
-            // Comparator for sorting points back into packet order
-            function compareObject(objectA, objectB) {
-                var indexA = objectA.getModel().index || 0,
-                    indexB = objectB.getModel().index || 0;
-                return indexA - indexB;
-            }
-
-            // Update the list of currently-displayed objects; these
-            // will be the subset of currently subscribed-to objects
-            // which match a user-entered filter.
-            function doUpdateFilteredObjects() {
-                // Generate the list
-                filteredObjects = (
-                    subscription ?
-                            subscription.getTelemetryObjects() :
-                            []
-                ).filter(filterObject).sort(compareObject);
-
-                // Clear the pending flag
-                updatePending = false;
-
-                // Track when this occurred, so that we can wait
-                // a whole before updating again.
-                lastBounce = Date.now();
-
-                triggerDisplayUpdate();
-            }
-
-            // Request an update to the list of current objects; this may
-            // run on a timeout to avoid excessive calls, e.g. while the user
-            // is typing a filter.
-            function updateFilteredObjects() {
-                // Don't do anything if an update is already scheduled
-                if (!updatePending) {
-                    if (Date.now() > lastBounce + DEBOUNCE_INTERVAL) {
-                        // Update immediately if it's been long enough
-                        doUpdateFilteredObjects();
-                    } else {
-                        // Otherwise, update later, and track that we have
-                        // an update pending so that subsequent calls can
-                        // be ignored.
-                        updatePending = true;
-                        $timeout(doUpdateFilteredObjects, DEBOUNCE_INTERVAL);
-                    }
-                }
-            }
-
-            // Track the latest data values for this domain object
-            function recordData(telemetryObject) {
-                // Get latest domain/range values for this object.
-                var id = telemetryObject.getId(),
-                    domainValue = subscription.getDomainValue(telemetryObject),
-                    rangeValue = subscription.getRangeValue(telemetryObject);
-
-                // Track the most recent timestamp change observed...
-                if (domainValue !== undefined && domainValue !== lastUpdated[id]) {
-                    lastUpdated[id] = domainValue;
-                    // ... and update the displayable text for that timestamp
-                    updateText = isNaN(domainValue) ? "" :
-                            moment.utc(domainValue).format(DATE_FORMAT);
-                }
-
-                // Store data values into the rangeValues structure, which
-                // will be used to populate the table itself.
-                // Note that we want full precision here.
-                rangeValues[id] = rangeValue;
-
-                // Update limit states as well
-                classes[id] = limits[id] && (limits[id].evaluate({
-                    // This relies on external knowledge that the
-                    // range value of a telemetry point is encoded
-                    // in its datum as "value."
-                    value: rangeValue
-                }) || {}).cssClass;
-            }
-
-
-            // Look at telemetry objects from the subscription; this is watched
-            // to detect changes from the subscription.
-            function subscribedTelemetry() {
-                return subscription ?
-                        subscription.getTelemetryObjects() : EMPTY_ARRAY;
-            }
-
-            // Update the data values which will be used to populate the table
-            function updateValues() {
-                subscribedTelemetry().forEach(recordData);
-                triggerDisplayUpdate();
-            }
-
-            // Getter-setter function for user-entered filter text.
-            function filter(value) {
-                // If value was specified, we're a setter
-                if (value !== undefined) {
-                    // Store the new value
-                    filterValue = value;
-                    filterValueLowercase = value.toLowerCase();
-                    // Change which objects appear in the table
-                    updateFilteredObjects();
-                }
-
-                // Always act as a getter
-                return filterValue;
-            }
-
-            // Update the bounds (width and height) of this view;
-            // called from the mct-resize directive. Recalculates how
-            // many rows should appear in the contained table.
-            function setBounds(bounds) {
-                var availableSpace = bounds.height - SLIDER_HEIGHT;
-                rows = Math.max(1, Math.floor(availableSpace / ROW_HEIGHT));
-            }
-
-            // Increment the current column width, up to the defined maximum.
-            // When the max is hit, roll back to the default.
-            function increaseColumnWidth() {
-                columnWidth += COLUMN_WIDTH_STEP;
-                // Cycle down to the initial width instead of exceeding max
-                columnWidth = columnWidth > MAX_COLUMN_WIDTH ?
-                        INITIAL_COLUMN_WIDTH : columnWidth;
-            }
-
-            // Get displayable text for last-updated value
-            function updated() {
-                return updateText;
-            }
-
-            // Unsubscribe, if a subscription is active.
-            function releaseSubscription() {
-                if (subscription) {
-                    subscription.unsubscribe();
-                    subscription = undefined;
-                }
-            }
-
-            // Update set of telemetry objects managed by this view
-            function updateTelemetryObjects(telemetryObjects) {
-                updateFilteredObjects();
-                limits = {};
-                telemetryObjects.forEach(function (telemetryObject) {
-                    var id = telemetryObject.getId();
-                    limits[id] = telemetryObject.getCapability('limit');
-                });
-            }
-
-            // Create a subscription for the represented domain object.
-            // This will resolve capability delegation as necessary.
-            function makeSubscription(domainObject) {
-                // Unsubscribe, if there is an existing subscription
-                releaseSubscription();
-
-                // Clear updated timestamp
-                lastUpdated = {};
-                updateText = NOT_UPDATED;
-
-                // Create a new subscription; telemetrySubscriber gets
-                // to do the meaningful work here.
-                subscription = domainObject && telemetrySubscriber.subscribe(
-                    domainObject,
-                    updateValues
-                );
-
-                // Our set of in-view telemetry objects may have changed,
-                // so update the set that is being passed down to the table.
-                updateFilteredObjects();
-            }
-
-            // Watch for changes to the set of objects which have telemetry
-            $scope.$watch(subscribedTelemetry, updateTelemetryObjects);
-
-            // Watch for the represented domainObject (this field will
-            // be populated by mct-representation)
-            $scope.$watch("domainObject", makeSubscription);
-
-            // Make sure we unsubscribe when this view is destroyed.
-            $scope.$on("$destroy", releaseSubscription);
-
-            return {
-                /**
-                 * Get the number of rows which should be shown in this table.
-                 * @return {number} the number of rows to show
-                 */
-                getRows: function () {
-                    return rows;
-                },
-                /**
-                 * Get the objects which should currently be displayed in
-                 * this table. This will be watched, so the return value
-                 * should be stable when this list is unchanging. Only
-                 * objects which match the user-entered filter value should
-                 * be returned here.
-                 * @return {DomainObject[]} the domain objects to include in
-                 *         this table.
-                 */
-                getTelemetryObjects: function () {
-                    return filteredObjects;
-                },
-                /**
-                 * Set the bounds (width/height) of this autoflow tabular view.
-                 * The template must ensure that these bounds are tracked on
-                 * the table area only.
-                 * @param bounds the bounds; and object with `width` and
-                 *        `height` properties, both as numbers, in pixels.
-                 */
-                setBounds: setBounds,
-                /**
-                 * Increments the width of the autoflow column.
-                 * Setting does not yet persist.
-                 */
-                increaseColumnWidth: increaseColumnWidth,
-                /**
-                 * Get-or-set the user-supplied filter value.
-                 * @param {string} [value] the new filter value; omit to use
-                 *        as a getter
-                 * @returns {string} the user-supplied filter value
-                 */
-                filter: filter,
-                /**
-                 * Get all range values for use in this table. These will be
-                 * returned as an object of key-value pairs, where keys are
-                 * domain object IDs, and values are the most recently observed
-                 * data values associated with those objects, formatted for
-                 * display.
-                 * @returns {object.<string,string>} most recent values
-                 */
-                rangeValues: function () {
-                    return rangeValues;
-                },
-                /**
-                 * Get CSS classes to apply to specific rows, representing limit
-                 * states and/or stale states. These are returned as key-value
-                 * pairs where keys are domain object IDs, and values are CSS
-                 * classes to display for domain objects with those IDs.
-                 * @returns {object.<string,string>} CSS classes
-                 */
-                classes: function () {
-                    return classes;
-                },
-                /**
-                 * Get the "last updated" text for this view; this will be
-                 * the most recent timestamp observed for any telemetry-
-                 * providing object, formatted for display.
-                 * @returns {string} the time of the most recent update
-                 */
-                updated: updated,
-                /**
-                 * Get the current column width, in pixels.
-                 * @returns {number} column width
-                 */
-                columnWidth: function () {
-                    return columnWidth;
-                },
-                /**
-                 * Keep a counter and increment this whenever the display
-                 * should be updated; this will be watched by the
-                 * `mct-autoflow-table`.
-                 * @returns {number} a counter value
-                 */
-                counter: function () {
-                    return counter;
-                }
-            };
-        }
-
-        return AutflowTabularController;
-    }
-);

platform/features/autoflow/src/MCTAutoflowTable.js

@@ -1,60 +0,0 @@
-
-define(
-    ["./AutoflowTableLinker"],
-    function (AutoflowTableLinker) {
-
-        /**
-         * The `mct-autoflow-table` directive specifically supports
-         * autoflow tabular views; it is not intended for use outside
-         * of that view.
-         *
-         * This directive is responsible for creating the structure
-         * of the table in this view, and for updating its values.
-         * While this is achievable using a regular Angular template,
-         * this is undesirable from the perspective of performance
-         * due to the number of watches that can be involved for large
-         * tables. Instead, this directive will maintain a small number
-         * of watches, rebuilding table structure only when necessary,
-         * and updating displayed values in the more common case of
-         * new data arriving.
-         *
-         * @constructor
-         */
-        function MCTAutoflowTable() {
-            return {
-                // Only applicable at the element level
-                restrict: "E",
-
-                // The link function; handles DOM update/manipulation
-                link: AutoflowTableLinker,
-
-                // Parameters to pass from attributes into scope
-                scope: {
-                    // Set of domain objects to show in the table
-                    objects: "=",
-
-                    // Values for those objects, by ID
-                    values: "=",
-
-                    // CSS classes to show for objects, by ID
-                    classes: "=",
-
-                    // Number of rows to show before autoflowing
-                    rows: "=",
-
-                    // Time of last update; watched to refresh values
-                    updated: "=",
-
-                    // Current width of the autoflow column
-                    columnWidth: "=",
-
-                    // A counter used to trigger display updates
-                    counter: "="
-                }
-            };
-        }
-
-        return MCTAutoflowTable;
-
-    }
-);

platform/features/autoflow/test/AutoflowTableLinkerSpec.js

@@ -1,178 +0,0 @@
-
-define(
-    ["../src/AutoflowTableLinker"],
-    function (AutoflowTableLinker) {
-
-        describe("The mct-autoflow-table linker", function () {
-            var cachedAngular,
-                mockAngular,
-                mockScope,
-                mockElement,
-                mockElements,
-                linker;
-
-            // Utility function to generate more mock elements
-            function createMockElement(html) {
-                var mockEl = jasmine.createSpyObj(
-                    "element-" + html,
-                    [
-                        "append",
-                        "addClass",
-                        "removeClass",
-                        "text",
-                        "attr",
-                        "html",
-                        "css",
-                        "find"
-                    ]
-                );
-                mockEl.testHtml = html;
-                mockEl.append.andReturn(mockEl);
-                mockElements.push(mockEl);
-                return mockEl;
-            }
-
-            function createMockDomainObject(id) {
-                var mockDomainObject = jasmine.createSpyObj(
-                    "domainObject-" + id,
-                    ["getId", "getModel"]
-                );
-                mockDomainObject.getId.andReturn(id);
-                mockDomainObject.getModel.andReturn({name: id.toUpperCase()});
-                return mockDomainObject;
-            }
-
-            function fireWatch(watchExpression, value) {
-                mockScope.$watch.calls.forEach(function (call) {
-                    if (call.args[0] === watchExpression) {
-                        call.args[1](value);
-                    }
-                });
-            }
-
-            // AutoflowTableLinker accesses Angular in the global
-            // scope, since it is not injectable; we simulate that
-            // here by adding/removing it to/from the window object.
-            beforeEach(function () {
-                mockElements = [];
-
-                mockAngular = jasmine.createSpyObj("angular", ["element"]);
-                mockScope = jasmine.createSpyObj("scope", ["$watch"]);
-                mockElement = createMockElement('<div>');
-
-                mockAngular.element.andCallFake(createMockElement);
-
-                if (window.angular !== undefined) {
-                    cachedAngular = window.angular;
-                }
-                window.angular = mockAngular;
-
-                linker = new AutoflowTableLinker(mockScope, mockElement);
-            });
-
-            afterEach(function () {
-                if (cachedAngular !== undefined) {
-                    window.angular = cachedAngular;
-                } else {
-                    delete window.angular;
-                }
-            });
-
-            it("watches for changes in inputs", function () {
-                expect(mockScope.$watch).toHaveBeenCalledWith(
-                    "objects",
-                    jasmine.any(Function)
-                );
-                expect(mockScope.$watch).toHaveBeenCalledWith(
-                    "rows",
-                    jasmine.any(Function)
-                );
-                expect(mockScope.$watch).toHaveBeenCalledWith(
-                    "counter",
-                    jasmine.any(Function)
-                );
-            });
-
-            it("changes structure when domain objects change", function () {
-                // Set up scope
-                mockScope.rows = 4;
-                mockScope.objects = ['a', 'b', 'c', 'd', 'e', 'f']
-                    .map(createMockDomainObject);
-
-                // Fire an update to the set of objects
-                fireWatch("objects");
-
-                // Should have rebuilt with two columns of
-                // four and two rows each; first, by clearing...
-                expect(mockElement.html).toHaveBeenCalledWith("");
-
-                // Should have appended two columns...
-                expect(mockElement.append.calls.length).toEqual(2);
-
-                // ...which should have received two and four rows each
-                expect(mockElement.append.calls[0].args[0].append.calls.length)
-                    .toEqual(4);
-                expect(mockElement.append.calls[1].args[0].append.calls.length)
-                    .toEqual(2);
-            });
-
-            it("updates values", function () {
-                var mockSpans;
-
-                mockScope.objects = ['a', 'b', 'c', 'd', 'e', 'f']
-                    .map(createMockDomainObject);
-                mockScope.values = { a: 0 };
-
-                // Fire an update to the set of values
-                fireWatch("objects");
-                fireWatch("updated");
-
-                // Get all created spans
-                mockSpans = mockElements.filter(function (mockElem) {
-                    return mockElem.testHtml === '<span>';
-                });
-
-                // First span should be a, should have gotten this value.
-                // This test detects, in particular, WTD-749
-                expect(mockSpans[0].text).toHaveBeenCalledWith('A');
-                expect(mockSpans[1].text).toHaveBeenCalledWith(0);
-            });
-
-            it("listens for changes in column width", function () {
-                var mockUL = createMockElement("<ul>");
-                mockElement.find.andReturn(mockUL);
-                mockScope.columnWidth = 200;
-                fireWatch("columnWidth", mockScope.columnWidth);
-                expect(mockUL.css).toHaveBeenCalledWith("width", "200px");
-            });
-
-            it("updates CSS classes", function () {
-                var mockSpans;
-
-                mockScope.objects = ['a', 'b', 'c', 'd', 'e', 'f']
-                    .map(createMockDomainObject);
-                mockScope.values = { a: "a value to find" };
-                mockScope.classes = { a: 'class-a' };
-
-                // Fire an update to the set of values
-                fireWatch("objects");
-                fireWatch("updated");
-
-                // Figure out which span holds the relevant value...
-                mockSpans = mockElements.filter(function (mockElem) {
-                    return mockElem.testHtml === '<span>';
-                }).filter(function (mockSpan) {
-                    var attrCalls = mockSpan.attr.calls;
-                    return attrCalls.some(function (call) {
-                        return call.args[0] === 'title' &&
-                                call.args[1] === mockScope.values.a;
-                    });
-                });
-
-                // ...and make sure it also has had its class applied
-                expect(mockSpans[0].addClass)
-                    .toHaveBeenCalledWith(mockScope.classes.a);
-            });
-        });
-    }
-);

platform/features/autoflow/test/AutoflowTabularControllerSpec.js

@@ -1,341 +0,0 @@
-
-define(
-    ["../src/AutoflowTabularController"],
-    function (AutoflowTabularController) {
-
-        describe("The autoflow tabular controller", function () {
-            var mockScope,
-                mockTimeout,
-                mockSubscriber,
-                mockDomainObject,
-                mockSubscription,
-                controller;
-
-            // Fire watches that are registered as functions.
-            function fireFnWatches() {
-                mockScope.$watch.calls.forEach(function (call) {
-                    if (typeof call.args[0] === 'function') {
-                        call.args[1](call.args[0]());
-                    }
-                });
-            }
-
-            beforeEach(function () {
-                mockScope = jasmine.createSpyObj(
-                    "$scope",
-                    ["$on", "$watch"]
-                );
-                mockTimeout = jasmine.createSpy("$timeout");
-                mockSubscriber = jasmine.createSpyObj(
-                    "telemetrySubscriber",
-                    ["subscribe"]
-                );
-                mockDomainObject = jasmine.createSpyObj(
-                    "domainObject",
-                    ["getId", "getModel", "getCapability"]
-                );
-                mockSubscription = jasmine.createSpyObj(
-                    "subscription",
-                    [
-                        "unsubscribe",
-                        "getTelemetryObjects",
-                        "getDomainValue",
-                        "getRangeValue"
-                    ]
-                );
-
-                mockSubscriber.subscribe.andReturn(mockSubscription);
-                mockDomainObject.getModel.andReturn({name: "something"});
-
-                controller = new AutoflowTabularController(
-                    mockScope,
-                    mockTimeout,
-                    mockSubscriber
-                );
-            });
-
-            it("listens for the represented domain object", function () {
-                expect(mockScope.$watch).toHaveBeenCalledWith(
-                    "domainObject",
-                    jasmine.any(Function)
-                );
-            });
-
-            it("provides a getter-setter function for filtering", function () {
-                expect(controller.filter()).toEqual("");
-                controller.filter("something");
-                expect(controller.filter()).toEqual("something");
-            });
-
-            it("tracks bounds and adjust number of rows accordingly", function () {
-                // Rows are 15px high, and need room for an 10px slider
-                controller.setBounds({ width: 700, height: 120 });
-                expect(controller.getRows()).toEqual(6); // 110 usable height / 16px
-                controller.setBounds({ width: 700, height: 240 });
-                expect(controller.getRows()).toEqual(14); // 230 usable height / 16px
-            });
-
-            it("subscribes to a represented object's telemetry", function () {
-                // Set up subscription, scope
-                mockSubscription.getTelemetryObjects
-                    .andReturn([mockDomainObject]);
-                mockScope.domainObject = mockDomainObject;
-
-                // Invoke the watcher with represented domain object
-                mockScope.$watch.mostRecentCall.args[1](mockDomainObject);
-
-                // Should have subscribed to it
-                expect(mockSubscriber.subscribe).toHaveBeenCalledWith(
-                    mockDomainObject,
-                    jasmine.any(Function)
-                );
-
-                // Should report objects as reported from subscription
-                expect(controller.getTelemetryObjects())
-                    .toEqual([mockDomainObject]);
-            });
-
-            it("releases subscriptions on destroy", function () {
-                // Set up subscription...
-                mockSubscription.getTelemetryObjects
-                    .andReturn([mockDomainObject]);
-                mockScope.domainObject = mockDomainObject;
-                mockScope.$watch.mostRecentCall.args[1](mockDomainObject);
-
-                // Verify precondition
-                expect(mockSubscription.unsubscribe).not.toHaveBeenCalled();
-
-                // Make sure we're listening for $destroy
-                expect(mockScope.$on).toHaveBeenCalledWith(
-                    "$destroy",
-                    jasmine.any(Function)
-                );
-
-                // Fire a destroy event
-                mockScope.$on.mostRecentCall.args[1]();
-
-                // Should have unsubscribed
-                expect(mockSubscription.unsubscribe).toHaveBeenCalled();
-            });
-
-            it("presents latest values and latest update state", function () {
-                // Make sure values are available
-                mockSubscription.getDomainValue.andReturn(402654321123);
-                mockSubscription.getRangeValue.andReturn(789);
-                mockDomainObject.getId.andReturn('testId');
-
-                // Set up subscription...
-                mockSubscription.getTelemetryObjects
-                    .andReturn([mockDomainObject]);
-                mockScope.domainObject = mockDomainObject;
-                mockScope.$watch.mostRecentCall.args[1](mockDomainObject);
-
-                // Fire subscription callback
-                mockSubscriber.subscribe.mostRecentCall.args[1]();
-
-                // ...and exposed the results for template to consume
-                expect(controller.updated()).toEqual("1982-278 08:25:21.123Z");
-                expect(controller.rangeValues().testId).toEqual(789);
-            });
-
-            it("sorts domain objects by index", function () {
-                var testIndexes = { a: 2, b: 1, c: 3, d: 0 },
-                    mockDomainObjects = Object.keys(testIndexes).sort().map(function (id) {
-                        var mockDomainObj = jasmine.createSpyObj(
-                            "domainObject",
-                            ["getId", "getModel"]
-                        );
-
-                        mockDomainObj.getId.andReturn(id);
-                        mockDomainObj.getModel.andReturn({ index: testIndexes[id] });
-
-                        return mockDomainObj;
-                    });
-
-                // Expose those domain objects...
-                mockSubscription.getTelemetryObjects.andReturn(mockDomainObjects);
-                mockScope.domainObject = mockDomainObject;
-                mockScope.$watch.mostRecentCall.args[1](mockDomainObject);
-
-                // Fire subscription callback
-                mockSubscriber.subscribe.mostRecentCall.args[1]();
-
-                // Controller should expose same objects, but sorted by index from model
-                expect(controller.getTelemetryObjects()).toEqual([
-                    mockDomainObjects[3], // d, index=0
-                    mockDomainObjects[1], // b, index=1
-                    mockDomainObjects[0], // a, index=2
-                    mockDomainObjects[2]  // c, index=3
-                ]);
-            });
-
-            it("uses a timeout to throttle update", function () {
-                // Set up subscription...
-                mockSubscription.getTelemetryObjects
-                    .andReturn([mockDomainObject]);
-                mockScope.domainObject = mockDomainObject;
-
-                // Set the object in view; should not need a timeout
-                mockScope.$watch.mostRecentCall.args[1](mockDomainObject);
-                expect(mockTimeout.calls.length).toEqual(0);
-
-                // Next call should schedule an update on a timeout
-                mockScope.$watch.mostRecentCall.args[1](mockDomainObject);
-                expect(mockTimeout.calls.length).toEqual(1);
-
-                // ...but this last one should not, since existing
-                // timeout will cover it
-                mockScope.$watch.mostRecentCall.args[1](mockDomainObject);
-                expect(mockTimeout.calls.length).toEqual(1);
-            });
-
-            it("allows changing column width", function () {
-                var initialWidth = controller.columnWidth();
-                controller.increaseColumnWidth();
-                expect(controller.columnWidth()).toBeGreaterThan(initialWidth);
-            });
-
-            describe("filter", function () {
-                var doFilter,
-                    filteredObjects,
-                    filteredObjectNames;
-
-                beforeEach(function () {
-                    var telemetryObjects,
-                        updateFilteredObjects;
-
-                    telemetryObjects = [
-                        'DEF123',
-                        'abc789',
-                        '456abc',
-                        '4ab3cdef',
-                        'hjs[12].*(){}^\\'
-                    ].map(function (objectName, index) {
-                        var mockTelemetryObject = jasmine.createSpyObj(
-                            objectName,
-                            ["getId", "getModel"]
-                        );
-
-                        mockTelemetryObject.getId.andReturn(objectName);
-                        mockTelemetryObject.getModel.andReturn({
-                            name: objectName,
-                            index: index
-                        });
-
-                        return mockTelemetryObject;
-                    });
-
-                    mockSubscription
-                        .getTelemetryObjects
-                        .andReturn(telemetryObjects);
-
-                    // Trigger domainObject change to create subscription.
-                    mockScope.$watch.mostRecentCall.args[1](mockDomainObject);
-
-                    updateFilteredObjects = function () {
-                        filteredObjects = controller.getTelemetryObjects();
-                        filteredObjectNames = filteredObjects.map(function (o) {
-                            return o.getModel().name;
-                        });
-                    };
-
-                    doFilter = function (term) {
-                        controller.filter(term);
-                        // Filter is debounced so we have to force it to occur.
-                        mockTimeout.mostRecentCall.args[0]();
-                        updateFilteredObjects();
-                    };
-
-                    updateFilteredObjects();
-                });
-
-                it("initially shows all objects", function () {
-                    expect(filteredObjectNames).toEqual([
-                        'DEF123',
-                        'abc789',
-                        '456abc',
-                        '4ab3cdef',
-                        'hjs[12].*(){}^\\'
-                    ]);
-                });
-
-                it("by blank string matches all objects", function () {
-                    doFilter('');
-                    expect(filteredObjectNames).toEqual([
-                        'DEF123',
-                        'abc789',
-                        '456abc',
-                        '4ab3cdef',
-                        'hjs[12].*(){}^\\'
-                    ]);
-                });
-
-                it("exactly matches an object name", function () {
-                    doFilter('4ab3cdef');
-                    expect(filteredObjectNames).toEqual(['4ab3cdef']);
-                });
-
-                it("partially matches object names", function () {
-                    doFilter('abc');
-                    expect(filteredObjectNames).toEqual([
-                        'abc789',
-                        '456abc'
-                    ]);
-                });
-
-                it("matches case insensitive names", function () {
-                    doFilter('def');
-                    expect(filteredObjectNames).toEqual([
-                        'DEF123',
-                        '4ab3cdef'
-                    ]);
-                });
-
-                it("works as expected with special characters", function () {
-                    doFilter('[12]');
-                    expect(filteredObjectNames).toEqual(['hjs[12].*(){}^\\']);
-                    doFilter('.*');
-                    expect(filteredObjectNames).toEqual(['hjs[12].*(){}^\\']);
-                    doFilter('.*()');
-                    expect(filteredObjectNames).toEqual(['hjs[12].*(){}^\\']);
-                    doFilter('.*?');
-                    expect(filteredObjectNames).toEqual([]);
-                    doFilter('.+');
-                    expect(filteredObjectNames).toEqual([]);
-                });
-
-                it("exposes CSS classes from limits", function () {
-                    var id = mockDomainObject.getId(),
-                        testClass = "some-css-class",
-                        mockLimitCapability =
-                            jasmine.createSpyObj('limit', ['evaluate']);
-
-                    mockDomainObject.getCapability.andCallFake(function (key) {
-                        return key === 'limit' && mockLimitCapability;
-                    });
-                    mockLimitCapability.evaluate
-                        .andReturn({ cssClass: testClass });
-
-                    mockSubscription.getTelemetryObjects
-                        .andReturn([mockDomainObject]);
-
-                    fireFnWatches();
-                    mockSubscriber.subscribe.mostRecentCall.args[1]();
-
-                    expect(controller.classes()[id]).toEqual(testClass);
-                });
-
-                it("exposes a counter that changes with each update", function () {
-                    var i, prior;
-
-                    for (i = 0; i < 10; i += 1) {
-                        prior = controller.counter();
-                        expect(controller.counter()).toEqual(prior);
-                        mockSubscriber.subscribe.mostRecentCall.args[1]();
-                        expect(controller.counter()).not.toEqual(prior);
-                    }
-                });
-            });
-        });
-    }
-);

platform/features/autoflow/test/MCTAutoflowTableSpec.js

@@ -1,39 +0,0 @@
-
-define(
-    ["../src/MCTAutoflowTable"],
-    function (MCTAutoflowTable) {
-
-        describe("The mct-autoflow-table directive", function () {
-            var mctAutoflowTable;
-
-            beforeEach(function () {
-                mctAutoflowTable = new MCTAutoflowTable();
-            });
-
-            // Real functionality is contained/tested in the linker,
-            // so just check to make sure we're exposing the directive
-            // appropriately.
-            it("is applicable at the element level", function () {
-                expect(mctAutoflowTable.restrict).toEqual("E");
-            });
-
-            it("two-ways binds needed scope variables", function () {
-                expect(mctAutoflowTable.scope).toEqual({
-                    objects: "=",
-                    values: "=",
-                    rows: "=",
-                    updated: "=",
-                    classes: "=",
-                    columnWidth: "=",
-                    counter: "="
-                });
-            });
-
-            it("provides a link function", function () {
-                expect(mctAutoflowTable.link).toEqual(jasmine.any(Function));
-            });
-
-
-        });
-    }
-);

platform/features/clock/src/indicators/FollowIndicator.js

@@ -45,7 +45,7 @@ define(
 
         FollowIndicator.prototype.getText = function () {
             var timer = this.timerService.getTimer();
-            return (timer) ? 'Following timer ' + timer.getModel().name : NO_TIMER;
+            return timer ? ('Following timer ' + timer.name) : NO_TIMER;
         };
 
         FollowIndicator.prototype.getDescription = function () {

platform/features/clock/test/indicators/FollowIndicatorSpec.js

@@ -42,18 +42,15 @@ define(["../../src/indicators/FollowIndicator"], function (FollowIndicator) {
         });
 
         describe("when a timer is set", function () {
-            var testModel;
-            var mockDomainObject;
+            var testObject;
 
             beforeEach(function () {
-                testModel = { name: "some timer!" };
-                mockDomainObject = jasmine.createSpyObj('timer', ['getModel']);
-                mockDomainObject.getModel.andReturn(testModel);
-                mockTimerService.getTimer.andReturn(mockDomainObject);
+                testObject = { name: "some timer!" };
+                mockTimerService.getTimer.andReturn(testObject);
             });
 
             it("displays the timer's name", function () {
-                expect(indicator.getText().indexOf(testModel.name))
+                expect(indicator.getText().indexOf(testObject.name))
                     .not.toEqual(-1);
             });
         });

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

@@ -255,6 +255,8 @@ define(
                 if (this.nextDatum) {
                     this.updateValues(this.nextDatum);
                     delete this.nextDatum;
+                } else {
+                    this.updateValues(this.$scope.imageHistory[this.$scope.imageHistory.length - 1]);
                 }
                 this.autoScroll = true;
             }

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

@@ -183,6 +183,17 @@ define(
                     expect(controller.getImageUrl()).toEqual(newUrl);
                 });
 
+                it("forwards large image view to latest image in history on un-pause", function () {
+                    $scope.imageHistory = [
+                        { utc: 1434600258122, url: 'some/url1', selected: false},
+                        { utc: 1434600258123, url: 'some/url2', selected: false}
+                    ];
+                    controller.paused(true);
+                    controller.paused(false);
+
+                    expect(controller.getImageUrl()).toEqual(controller.getImageUrl($scope.imageHistory[1]));
+                });
+
                 it("subscribes to telemetry", function () {
                     expect(openmct.telemetry.subscribe).toHaveBeenCalledWith(
                         newDomainObject,
@@ -227,7 +238,7 @@ define(
                     expect(controller.updateHistory(mockDatum)).toBe(false);
                 });
 
-                describe("user clicks on imagery thumbnail", function () {
+                describe("when user clicks on imagery thumbnail", function () {
                     var mockDatum = { utc: 1434600258123, url: 'some/url', selected: false};
 
                     it("pauses and adds selected class to imagery thumbnail", function () {
@@ -248,6 +259,7 @@ define(
                         expect(controller.getTime()).toEqual(controller.timeFormat.format(mockDatum.utc));
                     });
                 });
+
             });
 
             it("initially shows an empty string for date/time", function () {

platform/features/layout/bundle.js

@@ -260,7 +260,9 @@ define([
                     "key": "LayoutController",
                     "implementation": LayoutController,
                     "depends": [
-                        "$scope"
+                        "$scope",
+                        "$element",
+                        "openmct"
                     ]
                 },
                 {
@@ -334,46 +336,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/fixed.html

@@ -40,7 +40,7 @@
             's-selected': controller.selected(element)
          }"
          ng-style="element.style"
-         ng-click="controller.select(element)">
+         ng-click="controller.select(element, $event)">
         <mct-include key="element.template"
                      parameters="{ gridSize: controller.getGridSize() }"
                      ng-model="element">
@@ -53,14 +53,16 @@
              mct-drag-down="controller.moveHandle().startDrag(controller.selected())"
              mct-drag="controller.moveHandle().continueDrag(delta)"
              mct-drag-up="controller.moveHandle().endDrag()"
-             ng-style="controller.selected().style">
+             ng-style="controller.selected().style"
+             ng-click="$event.stopPropagation()">
         </div>
         <div ng-repeat="handle in controller.handles()"
              class="l-fixed-position-item-handle edit-corner"
              ng-style="handle.style()"
              mct-drag-down="handle.startDrag()"
              mct-drag="handle.continueDrag(delta)"
-             mct-drag-up="handle.endDrag()">
+             mct-drag-up="handle.endDrag()"
+             ng-click="$event.stopPropagation()">
         </div>
     </span>
 

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

@@ -19,7 +19,7 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<div class="frame frame-template t-frame-inner abs t-object-type-{{ representation.selected.key }}">
+<div class="frame frame-template t-frame-inner abs t-object-type-{{ domainObject.getModel().type }}">
     <div class="abs object-browse-bar l-flex-row">
         <div class="left flex-elem l-flex-row grows">
             <mct-representation

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

@@ -22,10 +22,12 @@
 
 <div class="abs l-layout"
      ng-controller="LayoutController as controller"
-     ng-click="controller.clearSelection()">
+     ng-click="controller.bypassSelection($event)">
 
     <!-- Background grid -->
-    <div class="l-grid-holder" ng-click="controller.clearSelection()">
+    <div class="l-grid-holder"
+         ng-show="!controller.drilledIn"
+         ng-click="controller.bypassSelection($event)">
         <div class="l-grid l-grid-x"
              ng-if="!controller.getGridSize()[0] < 3"
              ng-style="{ 'background-size': controller.getGridSize() [0] + 'px 100%' }"></div>
@@ -34,10 +36,13 @@
              ng-style="{ 'background-size': '100% ' + controller.getGridSize() [1] + 'px' }"></div>
     </div>
 
-    <div class='abs frame t-frame-outer child-frame panel s-selectable s-moveable s-hover-border'
-         ng-class="{ 'no-frame': !controller.hasFrame(childObject), 's-selected':controller.selected(childObject) }"
+    <div class="abs frame t-frame-outer child-frame panel s-selectable s-moveable s-hover-border t-object-type-{{ childObject.getModel().type }}"
+         data-layout-id="{{childObject.getId() + '-' + $id}}"
+         ng-class="{ 'no-frame': !controller.hasFrame(childObject), 's-drilled-in': controller.isDrilledIn(childObject) }"
          ng-repeat="childObject in composition"
-         ng-click="controller.select($event, childObject.getId())"
+         ng-init="controller.selectIfNew(childObject.getId() + '-' + $id, childObject)"
+         mct-selectable="controller.getContext(childObject, true)"
+         ng-dblclick="controller.drill($event, childObject)"
          ng-style="controller.getFrameStyle(childObject.getId())">
 
         <mct-representation key="'frame'"
@@ -45,7 +50,7 @@
                             mct-object="childObject">
         </mct-representation>
         <!-- Drag handles -->
-        <span class="abs t-edit-handle-holder s-hover-border" ng-if="controller.selected(childObject)">
+        <span class="abs t-edit-handle-holder" ng-if="controller.selected(childObject) && !controller.isDrilledIn(childObject)">
             <span class="edit-handle edit-move"
                   mct-drag-down="controller.startDrag(childObject.getId(), [1,1], [0,0])"
                   mct-drag="controller.continueDrag(delta)"
@@ -73,7 +78,6 @@
                   mct-drag-up="controller.endDrag()">
             </span>
         </span>
-
     </div>
 
 </div>

platform/features/layout/src/FixedController.js

@@ -360,22 +360,47 @@ define(
          */
         FixedController.prototype.updateView = function (telemetryObject, datum) {
             var metadata = this.openmct.telemetry.getMetadata(telemetryObject);
-            var rangeMetadata = metadata.valuesForHints(['range'])[0];
-            var rangeKey = rangeMetadata.source || rangeMetadata.key;
-            var valueMetadata = metadata.value(rangeKey);
+            var telemetryKeyToDisplay = this.chooseTelemetryKeyToDisplay(metadata);
+            var formattedTelemetryValue = this.getFormattedTelemetryValueForKey(telemetryKeyToDisplay, datum, metadata);
             var limitEvaluator = this.openmct.telemetry.limitEvaluator(telemetryObject);
-            var formatter = this.openmct.telemetry.getValueFormatter(valueMetadata);
-            var value = datum[valueMetadata.key];
-            var alarm = limitEvaluator && limitEvaluator.evaluate(datum, rangeKey);
+            var alarm = limitEvaluator && limitEvaluator.evaluate(datum, telemetryKeyToDisplay);
 
             this.setDisplayedValue(
                 telemetryObject,
-                formatter.format(value),
+                formattedTelemetryValue,
                 alarm && alarm.cssClass
             );
             this.digest();
         };
 
+        /**
+         * @private
+         */
+        FixedController.prototype.getFormattedTelemetryValueForKey = function (telemetryKeyToDisplay, datum, metadata) {
+            var valueMetadata = metadata.value(telemetryKeyToDisplay);
+            var formatter = this.openmct.telemetry.getValueFormatter(valueMetadata);
+
+            return formatter.format(datum[valueMetadata.key]);
+        };
+
+        /**
+         * @private
+         */
+        FixedController.prototype.chooseTelemetryKeyToDisplay = function (metadata) {
+            // If there is a range value, show that preferentially
+            var telemetryKeyToDisplay = metadata.valuesForHints(['range'])[0];
+
+            // If no range is defined, default to the highest priority non time-domain data.
+            if (telemetryKeyToDisplay === undefined) {
+                var valuesOrderedByPriority = metadata.values();
+                telemetryKeyToDisplay = valuesOrderedByPriority.filter(function (valueMetadata) {
+                    return !(valueMetadata.hints.domain);
+                })[0];
+            }
+
+            return telemetryKeyToDisplay.source;
+        };
+
         /**
          * Request the last historical data point for the given domain objects
          * @param {object[]} objects
@@ -388,7 +413,9 @@ define(
             objects.forEach(function (object) {
                 self.openmct.telemetry.request(object, {start: bounds.start, end: bounds.end, size: 1})
                     .then(function (data) {
-                        self.updateView(object, data[data.length - 1]);
+                        if (data.length > 0) {
+                            self.updateView(object, data[data.length - 1]);
+                        }
                     });
             });
             return objects;
@@ -479,7 +506,11 @@ define(
          * Set the active user selection in this view.
          * @param element the element to select
          */
-        FixedController.prototype.select = function select(element) {
+        FixedController.prototype.select = function select(element, event) {
+            if (event) {
+                event.stopPropagation();
+            }
+
             if (this.selection) {
                 // Update selection...
                 this.selection.select(element);

platform/features/layout/src/LayoutController.js

@@ -27,9 +27,11 @@
  */
 define(
     [
+        'zepto',
         './LayoutDrag'
     ],
     function (
+        $,
         LayoutDrag
     ) {
 
@@ -50,10 +52,12 @@ define(
          * @constructor
          * @param {Scope} $scope the controller's Angular scope
          */
-        function LayoutController($scope) {
+        function LayoutController($scope, $element, openmct) {
             var self = this,
                 callbackCount = 0;
 
+            this.$element = $element;
+
             // Update grid size when it changed
             function updateGridSize(layoutGrid) {
                 var oldSize = self.gridSize;
@@ -123,12 +127,11 @@ define(
                         self.layoutPanels(ids);
                         self.setFrames(ids);
 
-                        // If there is a newly-dropped object, select it.
-                        if (self.droppedIdToSelectAfterRefresh) {
-                            self.select(null, self.droppedIdToSelectAfterRefresh);
-                            delete self.droppedIdToSelectAfterRefresh;
-                        } else if (composition.indexOf(self.selectedId) === -1) {
-                            self.clearSelection();
+                        if (self.selectedId &&
+                            self.selectedId !== $scope.domainObject.getId() &&
+                            composition.indexOf(self.selectedId) === -1) {
+                            // Click triggers selection of layout parent.
+                            self.$element[0].click();
                         }
                     }
                 });
@@ -160,22 +163,39 @@ define(
                 }
             };
 
+            // Sets the selectable object in response to the selection change event.
+            function setSelection(selectable) {
+                var selection = selectable[0];
+
+                if (!selection) {
+                    delete self.selectedId;
+                    return;
+                }
+
+                self.selectedId = selection.context.oldItem.getId();
+                self.drilledIn = undefined;
+                self.selectable = selectable;
+            }
+
             this.positions = {};
             this.rawPositions = {};
             this.gridSize = DEFAULT_GRID_SIZE;
             this.$scope = $scope;
+            this.drilledIn = undefined;
+            this.openmct = openmct;
 
             // Watch for changes to the grid size in the model
             $scope.$watch("model.layoutGrid", updateGridSize);
 
-            $scope.$watch("selection", function (selection) {
-                this.selection = selection;
-            }.bind(this));
-
             // Update composed objects on screen, and position panes
             $scope.$watchCollection("model.composition", refreshComposition);
 
-            // Position panes where they are dropped
+            openmct.selection.on('change', setSelection);
+
+            $scope.$on("$destroy", function () {
+                openmct.selection.off("change", setSelection);
+            });
+
             $scope.$on("mctDrop", handleDrop);
         }
 
@@ -357,37 +377,14 @@ define(
         };
 
         /**
-         * Check if the object is currently selected.
+         * Checks if the object is currently selected.
          *
          * @param {string} obj the object to check for selection
          * @returns {boolean} true if selected, otherwise false
          */
         LayoutController.prototype.selected = function (obj) {
-            return !!this.selectedId && this.selectedId === obj.getId();
-        };
-
-        /**
-         * Set the active user selection in this view.
-         *
-         * @param event the mouse event
-         * @param {string} id the object id
-         */
-        LayoutController.prototype.select = function (event, id) {
-            if (event) {
-                event.stopPropagation();
-                if (this.selection) {
-                    event.preventDefault();
-                }
-            }
-
-            this.selectedId = id;
-
-            var selectedObj = {};
-            selectedObj[this.frames[id] ? 'hideFrame' : 'showFrame'] = this.toggleFrame.bind(this, id);
-
-            if (this.selection) {
-                this.selection.select(selectedObj);
-            }
+            var sobj = this.openmct.selection.get()[0];
+            return (sobj && sobj.context.oldItem.getId() === obj.getId()) ? true : false;
         };
 
         /**
@@ -396,7 +393,7 @@ define(
          * @param {string} id the object id
          * @private
          */
-        LayoutController.prototype.toggleFrame = function (id) {
+        LayoutController.prototype.toggleFrame = function (id, domainObject) {
             var configuration = this.$scope.configuration;
 
             if (!configuration.panels[id]) {
@@ -404,21 +401,75 @@ define(
             }
 
             this.frames[id] = configuration.panels[id].hasFrame = !this.frames[id];
-            this.select(undefined, id); // reselect so toolbar updates
+
+            var selection = this.openmct.selection.get();
+            selection[0].context.toolbar = this.getToolbar(id, domainObject);
+            this.openmct.selection.select(selection);  // reselect so toolbar updates
         };
 
         /**
-         * Clear the current user selection.
+         * Gets the toolbar object for the given domain object.
+         *
+         * @param id the domain object id
+         * @param domainObject the domain object
+         * @returns {object}
+         * @private
          */
-        LayoutController.prototype.clearSelection = function () {
+        LayoutController.prototype.getToolbar = function (id, domainObject) {
+            var toolbarObj = {};
+            toolbarObj[this.frames[id] ? 'hideFrame' : 'showFrame'] = this.toggleFrame.bind(this, id, domainObject);
+            return toolbarObj;
+        };
+
+        /**
+         * Bypasses selection if drag is in progress.
+         *
+         * @param event the angular event object
+         */
+        LayoutController.prototype.bypassSelection = function (event) {
             if (this.dragInProgress) {
+                if (event) {
+                    event.stopPropagation();
+                }
+                return;
+            }
+        };
+
+        /**
+         * Checks if the domain object is drilled in.
+         *
+         * @param domainObject the domain object
+         * @return true if the object is drilled in, false otherwise
+         */
+        LayoutController.prototype.isDrilledIn = function (domainObject) {
+            return this.drilledIn === domainObject.getId();
+        };
+
+        /**
+         * Puts the given object in the drilled-in mode.
+         *
+         * @param event the angular event object
+         * @param domainObject the domain object
+         */
+        LayoutController.prototype.drill = function (event, domainObject) {
+            if (event) {
+                event.stopPropagation();
+            }
+
+            if (!domainObject.getCapability('editor').inEditContext()) {
                 return;
             }
 
-            if (this.selection) {
-                this.selection.deselect();
-                delete this.selectedId;
+            if (!domainObject.hasCapability('composition')) {
+                return;
             }
+
+            // Disable since fixed position doesn't use the selection API yet
+            if (domainObject.getModel().type === 'telemetry.fixed') {
+                return;
+            }
+
+            this.drilledIn = domainObject.getId();
         };
 
         /**
@@ -440,6 +491,36 @@ define(
             return this.gridSize;
         };
 
+        /**
+         * Gets the selection context.
+         *
+         * @param domainObject the domain object
+         * @returns {object} the context object which includes
+         *                  item, oldItem and toolbar
+         */
+        LayoutController.prototype.getContext = function (domainObject, toolbar) {
+            return {
+                item: domainObject.useCapability('adapter'),
+                oldItem: domainObject,
+                toolbar: toolbar ? this.getToolbar(domainObject.getId(), domainObject) : undefined
+            };
+        };
+
+        /**
+         * Selects a newly-dropped object.
+         *
+         * @param classSelector the css class selector
+         * @param domainObject the domain object
+         */
+        LayoutController.prototype.selectIfNew = function (selector, domainObject) {
+            if (domainObject.getId() === this.droppedIdToSelectAfterRefresh) {
+                setTimeout(function () {
+                    $('[data-layout-id="' + selector + '"]')[0].click();
+                    delete this.droppedIdToSelectAfterRefresh;
+                }.bind(this), 0);
+            }
+        };
+
         return LayoutController;
     }
 );

platform/features/layout/test/FixedControllerSpec.js

@@ -178,7 +178,6 @@ define(
                     Promise.resolve(mockChildren)
                 );
 
-
                 mockScope.model = testModel;
                 mockScope.configuration = testConfiguration;
                 mockScope.selection = jasmine.createSpyObj(
@@ -194,7 +193,8 @@ define(
 
                 mockMetadata = jasmine.createSpyObj('mockMetadata', [
                     'valuesForHints',
-                    'value'
+                    'value',
+                    'values'
                 ]);
                 mockMetadata.value.andReturn({
                     key: 'value'
@@ -653,6 +653,39 @@ define(
                     });
                 });
 
+                it("selects an range value to display, if available", function () {
+                    mockMetadata.valuesForHints.andReturn([
+                        {
+                            key: 'range',
+                            source: 'range'
+                        }
+                    ]);
+                    var key = controller.chooseTelemetryKeyToDisplay(mockMetadata);
+                    expect(key).toEqual('range');
+                });
+
+                it("selects the first non-domain value to display, if no range available", function () {
+                    mockMetadata.valuesForHints.andReturn([]);
+                    mockMetadata.values.andReturn([
+                        {
+                            key: 'domain',
+                            source: 'domain',
+                            hints: {
+                                domain: 1
+                            }
+                        },
+                        {
+                            key: 'image',
+                            source: 'image',
+                            hints: {
+                                image: 1
+                            }
+                        }
+                    ]);
+                    var key = controller.chooseTelemetryKeyToDisplay(mockMetadata);
+                    expect(key).toEqual('image');
+                });
+
                 it("reflects limit status", function () {
                     mockLimitEvaluator.evaluate.andReturn({cssClass: "alarm-a"});
                     controller.updateView(mockTelemetryObject, [{

platform/features/layout/test/LayoutControllerSpec.js

@@ -21,8 +21,14 @@
  *****************************************************************************/
 
 define(
-    ["../src/LayoutController"],
-    function (LayoutController) {
+    [
+        "../src/LayoutController",
+        "zepto"
+    ],
+    function (
+        LayoutController,
+        $
+    ) {
 
         describe("The Layout controller", function () {
             var mockScope,
@@ -32,7 +38,12 @@ define(
                 controller,
                 mockCompositionCapability,
                 mockComposition,
-                mockCompositionObjects;
+                mockCompositionObjects,
+                mockOpenMCT,
+                mockSelection,
+                mockDomainObjectCapability,
+                $element = [],
+                selectable = [];
 
             function mockPromise(value) {
                 return {
@@ -58,21 +69,18 @@ define(
                         } else {
                             return {};
                         }
+                    },
+                    getCapability: function () {
+                        return mockDomainObjectCapability;
+                    },
+                    hasCapability: function (param) {
+                        if (param === 'composition') {
+                            return id !== 'b';
+                        }
                     }
                 };
             }
 
-            // Utility function to find a watch for a given expression
-            function findWatch(expr) {
-                var watch;
-                mockScope.$watch.calls.forEach(function (call) {
-                    if (call.args[0] === expr) {
-                        watch = call.args[1];
-                    }
-                });
-                return watch;
-            }
-
             beforeEach(function () {
                 mockScope = jasmine.createSpyObj(
                     "$scope",
@@ -88,7 +96,6 @@ define(
                 mockComposition = ["a", "b", "c"];
                 mockCompositionObjects = mockComposition.map(mockDomainObject);
 
-
                 testConfiguration = {
                     panels: {
                         a: {
@@ -97,27 +104,70 @@ define(
                         }
                     }
                 };
-
+                mockDomainObjectCapability = jasmine.createSpyObj('capability',
+                    ['inEditContext']
+                );
                 mockCompositionCapability = mockPromise(mockCompositionObjects);
 
                 mockScope.domainObject = mockDomainObject("mockDomainObject");
                 mockScope.model = testModel;
                 mockScope.configuration = testConfiguration;
-                mockScope.selection = jasmine.createSpyObj(
-                    'selection',
-                    ['select', 'get', 'selected', 'deselect']
-                );
+
+                selectable[0] = {
+                    context: {
+                        oldItem: mockScope.domainObject
+                    }
+                };
+
+                mockSelection = jasmine.createSpyObj("selection", [
+                    'select',
+                    'on',
+                    'off',
+                    'get'
+                ]);
+                mockSelection.get.andReturn(selectable);
+                mockOpenMCT = {
+                    selection: mockSelection
+                };
+
+                $element = $('<div></div>');
+                $(document).find('body').append($element);
+                spyOn($element[0], 'click');
 
                 spyOn(mockScope.domainObject, "useCapability").andCallThrough();
 
-                controller = new LayoutController(mockScope);
+                controller = new LayoutController(mockScope, $element, mockOpenMCT);
                 spyOn(controller, "layoutPanels").andCallThrough();
 
-                findWatch("selection")(mockScope.selection);
-
                 jasmine.Clock.useMock();
             });
 
+            afterEach(function () {
+                $element.remove();
+            });
+
+
+            it("listens for selection change events", function () {
+                expect(mockOpenMCT.selection.on).toHaveBeenCalledWith(
+                    'change',
+                    jasmine.any(Function)
+                );
+            });
+
+            it("cleans up on scope destroy", function () {
+                expect(mockScope.$on).toHaveBeenCalledWith(
+                    '$destroy',
+                    jasmine.any(Function)
+                );
+
+                mockScope.$on.calls[0].args[1]();
+
+                expect(mockOpenMCT.selection.off).toHaveBeenCalledWith(
+                    'change',
+                    jasmine.any(Function)
+                );
+            });
+
             // Model changes will indicate that panel positions
             // may have changed, for instance.
             it("watches for changes to composition", function () {
@@ -320,67 +370,35 @@ define(
                     .not.toEqual(oldStyle);
             });
 
-            it("allows panels to be selected", function () {
+            it("allows objects to be selected", function () {
+                mockScope.$watchCollection.mostRecentCall.args[1]();
+                var childObj = mockCompositionObjects[0];
+                selectable[0].context.oldItem = childObj;
+                mockOpenMCT.selection.on.mostRecentCall.args[1](selectable);
+
+                expect(controller.selected(childObj)).toBe(true);
+            });
+
+            it("prevents event bubbling while drag is in progress", function () {
                 mockScope.$watchCollection.mostRecentCall.args[1]();
                 var childObj = mockCompositionObjects[0];
 
-                controller.select(mockEvent, childObj.getId());
+                // Do a drag
+                controller.startDrag(childObj.getId(), [1, 1], [0, 0]);
+                controller.continueDrag([100, 100]);
+                controller.endDrag();
+
+                // Because mouse position could cause the parent object to be selected, this should be ignored.
+                controller.bypassSelection(mockEvent);
 
                 expect(mockEvent.stopPropagation).toHaveBeenCalled();
 
-                expect(controller.selected(childObj)).toBe(true);
-            });
-
-            it("allows selection to be cleared", function () {
-                mockScope.$watchCollection.mostRecentCall.args[1]();
-                var childObj = mockCompositionObjects[0];
-
-                controller.select(null, childObj.getId());
-                controller.clearSelection();
-
-                expect(controller.selected(childObj)).toBeFalsy();
-            });
-
-            it("prevents clearing selection while drag is in progress", function () {
-                mockScope.$watchCollection.mostRecentCall.args[1]();
-                var childObj = mockCompositionObjects[0];
-                var id = childObj.getId();
-
-                controller.select(mockEvent, id);
-
-                // Do a drag
-                controller.startDrag(id, [1, 1], [0, 0]);
-                controller.continueDrag([100, 100]);
-                controller.endDrag();
-
-                // Because mouse position could cause clearSelection to be called, this should be ignored.
-                controller.clearSelection();
-
-                expect(controller.selected(childObj)).toBe(true);
-
-                // Shoud be able to clear the selection after dragging is done.
+                // Shoud be able to select another object when dragging is done.
                 jasmine.Clock.tick(0);
-                controller.clearSelection();
+                mockEvent.stopPropagation.reset();
+                controller.bypassSelection(mockEvent);
 
-                expect(controller.selected(childObj)).toBe(false);
-            });
-
-            it("clears selection after moving/resizing", function () {
-                mockScope.$watchCollection.mostRecentCall.args[1]();
-                var childObj = mockCompositionObjects[0];
-                var id = childObj.getId();
-
-                controller.select(mockEvent, id);
-
-                // Do a drag
-                controller.startDrag(id, [1, 1], [0, 0]);
-                controller.continueDrag([100, 100]);
-                controller.endDrag();
-
-                jasmine.Clock.tick(0);
-                controller.clearSelection();
-
-                expect(controller.selected(childObj)).toBe(false);
+                expect(mockEvent.stopPropagation).not.toHaveBeenCalled();
             });
 
             it("shows frames by default", function () {
@@ -398,43 +416,74 @@ define(
             it("hides frame when selected object has frame ", function () {
                 mockScope.$watchCollection.mostRecentCall.args[1]();
                 var childObj = mockCompositionObjects[0];
-                controller.select(mockEvent, childObj.getId());
-
-                expect(mockScope.selection.select).toHaveBeenCalled();
-
-                var selectedObj = mockScope.selection.select.mostRecentCall.args[0];
+                selectable[0].context.oldItem = childObj;
+                mockOpenMCT.selection.on.mostRecentCall.args[1](selectable);
+                var toolbarObj = controller.getToolbar(childObj.getId(), childObj);
 
                 expect(controller.hasFrame(childObj)).toBe(true);
-                expect(selectedObj.hideFrame).toBeDefined();
-                expect(selectedObj.hideFrame).toEqual(jasmine.any(Function));
+                expect(toolbarObj.hideFrame).toBeDefined();
+                expect(toolbarObj.hideFrame).toEqual(jasmine.any(Function));
             });
 
             it("shows frame when selected object has no frame", function () {
                 mockScope.$watchCollection.mostRecentCall.args[1]();
-
                 var childObj = mockCompositionObjects[1];
-                controller.select(mockEvent, childObj.getId());
-
-                expect(mockScope.selection.select).toHaveBeenCalled();
-
-                var selectedObj = mockScope.selection.select.mostRecentCall.args[0];
+                selectable[0].context.oldItem = childObj;
+                mockOpenMCT.selection.on.mostRecentCall.args[1](selectable);
+                var toolbarObj = controller.getToolbar(childObj.getId(), childObj);
 
                 expect(controller.hasFrame(childObj)).toBe(false);
-                expect(selectedObj.showFrame).toBeDefined();
-                expect(selectedObj.showFrame).toEqual(jasmine.any(Function));
+                expect(toolbarObj.showFrame).toBeDefined();
+                expect(toolbarObj.showFrame).toEqual(jasmine.any(Function));
             });
 
-            it("deselects the object that is no longer in the composition", function () {
+            it("selects the parent object when selected object is removed", function () {
                 mockScope.$watchCollection.mostRecentCall.args[1]();
                 var childObj = mockCompositionObjects[0];
-                controller.select(mockEvent, childObj.getId());
+                selectable[0].context.oldItem = childObj;
+                mockOpenMCT.selection.on.mostRecentCall.args[1](selectable);
 
                 var composition = ["b", "c"];
                 mockScope.$watchCollection.mostRecentCall.args[1](composition);
 
-                expect(controller.selected(childObj)).toBe(false);
+                expect($element[0].click).toHaveBeenCalled();
             });
 
+            it("allows objects to be drilled-in only when editing", function () {
+                mockScope.$watchCollection.mostRecentCall.args[1]();
+                var childObj = mockCompositionObjects[0];
+                childObj.getCapability().inEditContext.andReturn(false);
+                controller.drill(mockEvent, childObj);
+
+                expect(controller.isDrilledIn(childObj)).toBe(false);
+            });
+
+            it("allows objects to be drilled-in only if it has sub objects", function () {
+                mockScope.$watchCollection.mostRecentCall.args[1]();
+                var childObj = mockCompositionObjects[1];
+                childObj.getCapability().inEditContext.andReturn(true);
+                controller.drill(mockEvent, childObj);
+
+                expect(controller.isDrilledIn(childObj)).toBe(false);
+            });
+
+            it("selects a newly-dropped object", function () {
+                mockScope.$on.mostRecentCall.args[1](
+                    mockEvent,
+                    'd',
+                    { x: 300, y: 100 }
+                );
+
+                var childObj = mockDomainObject("d");
+                var testElement = $("<div data-layout-id='some-id'></div>");
+                $element.append(testElement);
+                spyOn(testElement[0], 'click');
+
+                controller.selectIfNew('some-id', childObj);
+                jasmine.Clock.tick(0);
+
+                expect(testElement[0].click).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,157 +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,
-                    "depends": [
-                        "openmct"
-                    ]
-                }
-            ],
-            "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/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;
-    }
-);