fixed filter field issue, and prevent elements pool from updating when selection has not changed

* Leave edit mode on navigation after removal

* Only leave edit mode if removing navigated item, or parent of

* Do not emit mutation from filters with out of date object model

index.html

@@ -27,7 +27,7 @@
         <meta name="apple-mobile-web-app-capable" content="yes">
         <title></title>
         <script src="dist/openmct.js"></script>
-        <link rel="stylesheet" href="dist/openmct.css">
+        <link rel="stylesheet" href="dist/styles/openmct.css">
         <link rel="icon" type="image/png" href="dist/favicons/favicon-32x32.png" sizes="32x32">
         <link rel="icon" type="image/png" href="dist/favicons/favicon-96x96.png" sizes="96x96">
         <link rel="icon" type="image/png" href="dist/favicons/favicon-16x16.png" sizes="16x16">
@@ -54,6 +54,9 @@
         openmct.install(openmct.plugins.AutoflowView({
             type: "telemetry.panel"
         }));
+        openmct.install(openmct.plugins.DisplayLayout({
+            showAsView: ['summary-widget', 'example.imagery']
+        }));
         openmct.install(openmct.plugins.Conductor({
             menuOptions: [
                 {
@@ -81,6 +84,8 @@
         openmct.install(openmct.plugins.Tabs());
         openmct.install(openmct.plugins.FlexibleLayout());
         openmct.install(openmct.plugins.LADTable());
+        openmct.install(openmct.plugins.Filters(['table', 'telemetry.plot.overlay']));
+        openmct.install(openmct.plugins.ObjectMigration());
         openmct.start();
     </script>
 </html>

package.json

@@ -25,7 +25,7 @@
     "eventemitter3": "^1.2.0",
     "exports-loader": "^0.7.0",
     "express": "^4.13.1",
-    "fast-sass-loader": "^1.4.5",
+    "fast-sass-loader": "1.4.6",
     "file-loader": "^1.1.11",
     "file-saver": "^1.3.8",
     "git-rev-sync": "^1.4.0",

platform/commonUI/browse/bundle.js

@@ -31,7 +31,6 @@ define([
     "./src/navigation/NavigateAction",
     "./src/navigation/OrphanNavigationHandler",
     "./src/windowing/NewTabAction",
-    "./src/windowing/WindowTitler",
     "./res/templates/browse.html",
     "./res/templates/browse-object.html",
     "./res/templates/browse/object-header.html",
@@ -52,7 +51,6 @@ define([
     NavigateAction,
     OrphanNavigationHandler,
     NewTabAction,
-    WindowTitler,
     browseTemplate,
     browseObjectTemplate,
     objectHeaderTemplate,
@@ -226,14 +224,6 @@ define([
                 }
             ],
             "runs": [
-                {
-                    "implementation": WindowTitler,
-                    "depends": [
-                        "navigationService",
-                        "$rootScope",
-                        "$document"
-                    ]
-                },
                 {
                     "implementation": OrphanNavigationHandler,
                     "depends": [

platform/commonUI/browse/src/windowing/WindowTitler.js

@@ -1,51 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, 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 () {
-
-        /**
-         * Updates the title of the current window to reflect the name
-         * of the currently navigated-to domain object.
-         * @memberof platform/commonUI/browse
-         * @constructor
-         */
-        function WindowTitler(navigationService, $rootScope, $document) {
-            // Look up name of the navigated domain object...
-            function getNavigatedObjectName() {
-                var navigatedObject = navigationService.getNavigation();
-                return navigatedObject && navigatedObject.getModel().name;
-            }
-
-            // Set the window title...
-            function setTitle(name) {
-                $document[0].title = name;
-            }
-
-            // Watch the former, and invoke the latter
-            $rootScope.$watch(getNavigatedObjectName, setTitle);
-        }
-
-        return WindowTitler;
-    }
-);

platform/commonUI/browse/test/windowing/WindowTitlerSpec.js

@@ -1,78 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, 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.
- *****************************************************************************/
-
-/**
- * WindowTitlerSpec. Created by vwoeltje on 11/6/14.
- */
-define(
-    ["../../src/windowing/WindowTitler"],
-    function (WindowTitler) {
-
-        describe("The window titler", function () {
-            var mockNavigationService,
-                mockRootScope,
-                mockDocument,
-                mockDomainObject,
-                titler; // eslint-disable-line
-
-            beforeEach(function () {
-                mockNavigationService = jasmine.createSpyObj(
-                    'navigationService',
-                    ['getNavigation']
-                );
-                mockRootScope = jasmine.createSpyObj(
-                    '$rootScope',
-                    ['$watch']
-                );
-                mockDomainObject = jasmine.createSpyObj(
-                    'domainObject',
-                    ['getModel']
-                );
-                mockDocument = [{}];
-
-                mockDomainObject.getModel.and.returnValue({ name: 'Test name' });
-                mockNavigationService.getNavigation.and.returnValue(mockDomainObject);
-
-                titler = new WindowTitler(
-                    mockNavigationService,
-                    mockRootScope,
-                    mockDocument
-                );
-            });
-
-            it("listens for changes to the name of the navigated object", function () {
-                expect(mockRootScope.$watch).toHaveBeenCalledWith(
-                    jasmine.any(Function),
-                    jasmine.any(Function)
-                );
-                expect(mockRootScope.$watch.calls.mostRecent().args[0]())
-                    .toEqual('Test name');
-            });
-
-            it("sets the title to the name of the navigated object", function () {
-                mockRootScope.$watch.calls.mostRecent().args[1]("Some name");
-                expect(mockDocument[0].title).toEqual("Some name");
-            });
-
-        });
-    }
-);

platform/commonUI/dialog/bundle.js

@@ -28,6 +28,7 @@ define([
     "./res/templates/dialog.html",
     "./res/templates/overlay-blocking-message.html",
     "./res/templates/message.html",
+    "./res/templates/notification-message.html",
     "./res/templates/overlay-message-list.html",
     "./res/templates/overlay.html",
     'legacyRegistry'
@@ -39,6 +40,7 @@ define([
     dialogTemplate,
     overlayBlockingMessageTemplate,
     messageTemplate,
+    notificationMessageTemplate,
     overlayMessageListTemplate,
     overlayTemplate,
     legacyRegistry
@@ -63,7 +65,8 @@ define([
                     "depends": [
                         "$document",
                         "$compile",
-                        "$rootScope"
+                        "$rootScope",
+                        "$timeout"
                     ]
                 }
             ],
@@ -88,6 +91,10 @@ define([
                     "key": "message",
                     "template": messageTemplate
                 },
+                {
+                    "key": "notification-message",
+                    "template": notificationMessageTemplate
+                },
                 {
                     "key": "overlay-message-list",
                     "template": overlayMessageListTemplate

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

@@ -19,24 +19,24 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<div class="abs top-bar">
-    <div class="dialog-title">{{ngModel.title}}</div>
-    <div class="hint">All fields marked <span class="req icon-asterisk"></span> are required.</div>
+<div class="c-overlay__top-bar">
+    <div class="c-overlay__dialog-title">{{ngModel.title}}</div>
+    <div class="c-overlay__dialog-hint hint">All fields marked <span class="req icon-asterisk"></span> are required.</div>
 </div>
-<div class='abs editor'>
+<div class='c-overlay__contents-main'>
     <mct-form ng-model="ngModel.value"
               structure="ngModel.structure"
               class="validates"
               name="createForm">
     </mct-form>
 </div>
-<div class="abs bottom-bar">
-    <a class='s-button major'
+<div class="c-overlay__button-bar">
+    <a class='c-button c-button--major'
        ng-class="{ disabled: !createForm.$valid }"
        ng-click="ngModel.confirm()">
         OK
     </a>
-    <a class='s-button'
+    <a class='c-button  '
        ng-click="ngModel.cancel()">
         Cancel
     </a>

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

@@ -1,25 +1,32 @@
-<div class="l-message"
+<div class="c-message"
      ng-class="'message-severity-' + ngModel.severity">
     <div class="w-message-contents">
-        <div class="top-bar">
-            <div class="title">{{ngModel.message}}</div>
+        <div class="c-message__top-bar">
+            <div class="c-message__title">{{ngModel.title}}</div>
+        </div>
+        <div class="c-message__hint" ng-hide="ngModel.hint === undefined">
+            {{ngModel.hint}}
+            <span ng-if="ngModel.timestamp !== undefined">[{{ngModel.timestamp}}]</span>
         </div>
         <div class="message-body">
+            <div class="message-action">
+                {{ngModel.actionText}}
+            </div>
             <mct-include key="'progress-bar'"
                          ng-model="ngModel"
-                         ng-show="ngModel.progressPerc !== undefined"></mct-include>
+                         ng-show="ngModel.progress !== undefined || ngModel.unknownProgress"></mct-include>
         </div>
-        <div class="bottom-bar">
-            <a ng-repeat="dialogOption in ngModel.options"
-                class="s-button"
-                ng-click="dialogOption.callback()">
-                    {{dialogOption.label}}
-            </a>
-            <a class="s-button major"
-                ng-if="ngModel.primaryOption"
-                ng-click="ngModel.primaryOption.callback()">
-                    {{ngModel.primaryOption.label}}
-            </a>
+        <div class="c-overlay__button-bar">
+            <button ng-repeat="dialogOption in ngModel.options"
+               class="c-button"
+               ng-click="dialogOption.callback()">
+                {{dialogOption.label}}
+            </button>
+            <button class="c-button c-button--major"
+               ng-if="ngModel.primaryOption"
+               ng-click="ngModel.primaryOption.callback()">
+                {{ngModel.primaryOption.label}}
+            </button>
         </div>
     </div>
-</div>
+</div>

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

@@ -0,0 +1,25 @@
+<div class="c-message"
+     ng-class="'message-severity-' + ngModel.severity">
+    <div class="w-message-contents">
+        <div class="c-message__top-bar">
+            <div class="c-message__title">{{ngModel.message}}</div>
+        </div>
+        <div class="message-body">
+            <mct-include key="'progress-bar'"
+                         ng-model="ngModel"
+                         ng-show="ngModel.progressPerc !== undefined"></mct-include>
+        </div>
+        <div class="c-overlay__button-bar">
+            <button ng-repeat="dialogOption in ngModel.options"
+                class="c-button"
+                ng-click="dialogOption.callback()">
+                    {{dialogOption.label}}
+            </button>
+            <button class="c-button c-button--major"
+                ng-if="ngModel.primaryOption"
+                ng-click="ngModel.primaryOption.callback()">
+                    {{ngModel.primaryOption.label}}
+            </button>
+        </div>
+    </div>
+</div>

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

@@ -1,22 +1,23 @@
 <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 class="t-message-list c-overlay__contents">
+        <div class="c-overlay__top-bar">
+            <div class="c-overlay__dialog-title">{{ngModel.dialog.title}}</div>
+            <div class="c-overlay__dialog-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="w-messages">
+        <div class="w-messages c-overlay__messages">
             <mct-include
                 ng-repeat="msg in ngModel.dialog.messages | orderBy: '-'"
-                key="'message'" ng-model="msg.model"></mct-include>
+                key="'notification-message'" ng-model="msg.model"></mct-include>
         </div>
-        <div class="bottom-bar">
-            <a ng-repeat="dialogAction in ngModel.dialog.actions"
-               class="s-button major"
+        <div class="c-overlay__bottom-bar">
+            <button ng-repeat="dialogAction in ngModel.dialog.actions"
+               class="c-button c-button--major"
                ng-click="dialogAction.action()">
                 {{dialogAction.label}}
-            </a>
+            </button>
         </div>
     </div>
 </mct-container>

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

@@ -19,18 +19,18 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<mct-container key="overlay">
-    <div class="abs top-bar">
-        <div class="dialog-title">{{ngModel.dialog.title}}</div>
-        <div class="hint">{{ngModel.dialog.hint}}</div>
+<mct-container key="c-overlay__contents">
+    <div class=c-overlay__top-bar">
+        <div class="c-overlay__dialog-title">{{ngModel.dialog.title}}</div>
+        <div class="c-overlay__dialog-hint hint">{{ngModel.dialog.hint}}</div>
     </div>
-    <div class='abs editor'>
+    <div class='c-overlay__contents-main'>
         <mct-include key="ngModel.dialog.template"
                      parameters="ngModel.dialog.parameters"
                      ng-model="ngModel.dialog.model">
         </mct-include>
     </div>
-    <div class="abs bottom-bar">
+    <div class="c-overlay__button-bar">
         <a ng-repeat="option in ngModel.dialog.options"
            href=''
            class="s-button lg"

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

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

platform/commonUI/dialog/src/OverlayService.js

@@ -44,8 +44,9 @@ define(
          * @memberof platform/commonUI/dialog
          * @constructor
          */
-        function OverlayService($document, $compile, $rootScope) {
+        function OverlayService($document, $compile, $rootScope, $timeout) {
             this.$compile = $compile;
+            this.$timeout = $timeout;
 
             // Don't include $document and $rootScope directly;
             // avoids https://docs.angularjs.org/error/ng/cpws
@@ -93,12 +94,14 @@ define(
             scope.key = key;
             scope.typeClass = typeClass || 't-dialog';
 
-            // Create the overlay element and add it to the document's body
-            element = this.$compile(TEMPLATE)(scope);
-            
-            // Append so that most recent dialog is last in DOM. This means the most recent dialog will be on top when
-            // multiple overlays with the same z-index are active.
-            this.findBody().append(element);
+            this.$timeout(() => {
+                // Create the overlay element and add it to the document's body
+                element = this.$compile(TEMPLATE)(scope);
+                
+                // Append so that most recent dialog is last in DOM. This means the most recent dialog will be on top when
+                // multiple overlays with the same z-index are active.
+                this.findBody().append(element);
+            });
 
             return {
                 dismiss: dismiss

platform/commonUI/dialog/test/OverlayServiceSpec.js

@@ -35,16 +35,20 @@ define(
                 mockTemplate,
                 mockElement,
                 mockScope,
+                mockTimeout,
                 overlayService;
 
             beforeEach(function () {
                 mockDocument = jasmine.createSpyObj("$document", ["find"]);
                 mockCompile = jasmine.createSpy("$compile");
                 mockRootScope = jasmine.createSpyObj("$rootScope", ["$new"]);
-                mockBody = jasmine.createSpyObj("body", ["prepend"]);
+                mockBody = jasmine.createSpyObj("body", ["append"]);
                 mockTemplate = jasmine.createSpy("template");
                 mockElement = jasmine.createSpyObj("element", ["remove"]);
                 mockScope = jasmine.createSpyObj("scope", ["$destroy"]);
+                mockTimeout = function (callback) {
+                    callback();
+                }
 
                 mockDocument.find.and.returnValue(mockBody);
                 mockCompile.and.returnValue(mockTemplate);
@@ -54,7 +58,8 @@ define(
                 overlayService = new OverlayService(
                     mockDocument,
                     mockCompile,
-                    mockRootScope
+                    mockRootScope,
+                    mockTimeout
                 );
             });
 
@@ -67,7 +72,7 @@ define(
 
             it("adds the templated element to the body", function () {
                 overlayService.createOverlay("test", {});
-                expect(mockBody.prepend).toHaveBeenCalledWith(mockElement);
+                expect(mockBody.append).toHaveBeenCalledWith(mockElement);
             });
 
             it("places the provided model/key in its template's scope", function () {

platform/commonUI/edit/bundle.js

@@ -160,7 +160,7 @@ define([
                 },
                 {
                     "key": "remove",
-                    "category": "contextual",
+                    "category": "legacy",
                     "implementation": RemoveAction,
                     "cssClass": "icon-trash",
                     "name": "Remove",

platform/commonUI/edit/src/actions/PropertiesDialog.js

@@ -49,7 +49,7 @@ define(
                     name: "Properties",
                     rows: this.properties.map(function (property, index) {
                         // Property definition is same as form row definition
-                        var row = Object.create(property.getDefinition());
+                        var row = JSON.parse(JSON.stringify(property.getDefinition()));
                         row.key = index;
                         return row;
                     }).filter(function (row) {

platform/commonUI/edit/src/actions/RemoveAction.js

@@ -23,11 +23,7 @@
 /**
  * Module defining RemoveAction. Created by vwoeltje on 11/17/14.
  */
-define([
-    './RemoveDialog'
-], function (
-    RemoveDialog
-) {
+define([], function () {
 
     /**
      * Construct an action which will remove the provided object manifestation.
@@ -114,12 +110,7 @@ define([
             return parent.useCapability('mutation', doMutate);
         }
 
-        /*
-         * Pass in the function to remove the domain object so it can be
-         * associated with an 'OK' button press
-         */
-        dialog = new RemoveDialog(this.openmct, domainObject, removeFromContext);
-        dialog.show();
+        removeFromContext();
     };
 
     // Object needs to have a parent for Remove to be applicable

platform/commonUI/edit/src/actions/RemoveDialog.js

@@ -1,72 +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 () {
-
-    /**
-     * @callback removeCallback
-     * @param {DomainObject} domainObject the domain object to be removed
-     */
-
-    /**
-     * Construct a new Remove dialog.
-     *
-     * @param {DialogService} dialogService the service that shows the dialog
-     * @param {DomainObject} domainObject the domain object to be removed
-     * @param {removeCallback} removeCallback callback that handles removal of the domain object
-     * @memberof platform/commonUI/edit
-     * @constructor
-     */
-    function RemoveDialog(openmct, domainObject, removeCallback) {
-        this.openmct = openmct;
-        this.domainObject = domainObject;
-        this.removeCallback = removeCallback;
-    }
-
-    /**
-     * Display a dialog to confirm the removal of a domain object.
-     */
-    RemoveDialog.prototype.show = function () {
-        let dialog = this.openmct.overlays.dialog({
-            title: 'Remove ' + this.domainObject.getModel().name,
-            iconClass: 'alert',
-            message: 'Warning! This action will permanently remove this object. Are you sure you want to continue?',
-            buttons: [
-                {
-                    label: 'OK',
-                    callback: () => {
-                        this.removeCallback();
-                        dialog.dismiss();
-                    }
-                },
-                {
-                    label: 'Cancel',
-                    callback: () => {
-                        dialog.dismiss();
-                    }
-                }
-            ]
-        });
-    };
-
-    return RemoveDialog;
-});

platform/commonUI/edit/src/actions/SaveAsAction.js

@@ -92,16 +92,7 @@ function (
          * @memberof platform/commonUI/edit.SaveAction#
          */
     SaveAsAction.prototype.perform = function () {
-        // Discard the current root view (which will be the editing
-        // UI, which will have been pushed atop the Browse UI.)
-        function returnToBrowse(object) {
-            if (object) {
-                object.getCapability("action").perform("navigate");
-            }
-            return object;
-        }
-
-        return this.save().then(returnToBrowse);
+        return this.save();
     };
 
     /**
@@ -171,9 +162,6 @@ function (
         function saveAfterClone(clonedObject) {
             return this.openmct.editor.save().then(() => {
                 // Force mutation for search indexing
-                clonedObject.useCapability('mutation', (model) => {
-                    return model;
-                });
                 return clonedObject;
             })
         }
@@ -182,6 +170,14 @@ function (
             return fetchObject(clonedObject.getId())
         }
 
+        function indexForSearch(savedObject) {
+            savedObject.useCapability('mutation', (model) => {
+                return model;
+            });
+
+            return savedObject;
+        }
+
         function onSuccess(object) {
             self.notificationService.info("Save Succeeded");
             return object;
@@ -192,7 +188,7 @@ function (
             if (reason !== "user canceled") {
                 self.notificationService.error("Save Failed");
             }
-            return false;
+            throw reason;
         }
 
         return getParent(domainObject)
@@ -203,6 +199,7 @@ function (
             .then(undirtyOriginals)
             .then(saveAfterClone)
             .then(finishEditing)
+            .then(indexForSearch)
             .then(hideBlockingDialog)
             .then(onSuccess)
             .catch(onFailure);

platform/commonUI/edit/src/creation/CreateAction.js

@@ -67,20 +67,38 @@ define(
                 openmct = this.openmct,
                 newObject;
 
-            function onSave() {
-                // openmct.editor.save();
-            }
-
             function onCancel() {
                 openmct.editor.cancel();
             }
 
+            function isFirstViewEditable(domainObject) {
+                let firstView = openmct.objectViews.get(domainObject)[0];
+
+                return firstView && firstView.canEdit && firstView.canEdit(domainObject);
+            }
+
+            function navigateAndEdit(object) {
+                let objectPath = object.getCapability('context').getPath(),
+                    url = '#/browse/' + objectPath
+                        .slice(1)
+                        .map(function (o) {
+                            return o && openmct.objects.makeKeyString(o.getId());
+                        })
+                        .join('/');
+
+                window.location.href = url;
+
+                if (isFirstViewEditable(object.useCapability('adapter'))) {
+                    openmct.editor.edit();
+                }
+            }
+
             newModel.type = this.type.getKey();
             newModel.location = this.parent.getId();
             newObject = this.parent.useCapability('instantiation', newModel);
 
             openmct.editor.edit();
-            newObject.getCapability("action").perform("save-as").then(onSave, onCancel);
+            newObject.getCapability("action").perform("save-as").then(navigateAndEdit, onCancel);
             // TODO: support editing object without saving object first.
             // Which means we have to toggle createwizard afterwards.  For now,
             // We will disable this.

platform/commonUI/edit/src/creation/CreateWizard.js

@@ -66,7 +66,7 @@ define(
                 name: "Properties",
                 rows: this.properties.map(function (property, index) {
                     // Property definition is same as form row definition
-                    var row = Object.create(property.getDefinition());
+                    var row = JSON.parse(JSON.stringify(property.getDefinition()));
 
                     // Use index as the key into the formValue;
                     // this correlates to the indexing provided by

platform/commonUI/general/res/templates/label.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="t-object-label l-flex-row flex-elem grows">
-    <div class="t-item-icon flex-elem {{type.getCssClass()}}" ng-class="{ 'l-icon-link':location.isLink() }"></div>
-    <div class='t-title-label flex-elem grows'>{{model.name}}</div>
+<div class="c-object-label">
+    <div class="c-object-label__type-icon {{type.getCssClass()}}" ng-class="{ 'l-icon-link':location.isLink() }"></div>
+    <div class='c-object-label__name'>{{model.name}}</div>
 </div>

platform/commonUI/general/res/templates/message-banner.html

@@ -1,13 +1,13 @@
 <div ng-controller="BannerController" ng-show="active.notification"
-     class="l-message-banner s-message-banner {{active.notification.model.severity}}" ng-class="{
+     class="c-message-banner {{active.notification.model.severity}}" ng-class="{
      'minimized': active.notification.model.minimized,
      'new': !active.notification.model.minimized}"
      ng-click="maximize(active.notification)">
-    <span class="banner-elem label">
+    <span class="c-message-banner__message">
         {{active.notification.model.title}}
     </span>
     <span ng-show="active.notification.model.progress !== undefined || active.notification.model.unknownProgress">
-        <mct-include key="'progress-bar'" class="banner-elem"
+        <mct-include key="'progress-bar'" class="c-message-banner__progress-bar"
                      ng-model="active.notification.model">
         </mct-include>
     </span>
@@ -16,5 +16,5 @@
        ng-click="action(active.notification.model.primaryOption.callback, $event)">
         {{active.notification.model.primaryOption.label}}
     </a>
-    <a class="banner-elem close icon-x" ng-click="dismiss(active.notification, $event)"></a>
+    <button class="c-message-banner__close-button c-click-icon icon-x-in-circle" ng-click="dismiss(active.notification, $event)"></button>
 </div>

platform/commonUI/general/res/templates/tree-node.html

@@ -20,14 +20,11 @@
  at runtime from the About dialog for additional information.
 -->
 <span ng-controller="ToggleController as toggle">
-    <span ng-controller="TreeNodeController as treeNode">
-        <span
-            class="tree-item menus-to-left"
-            ng-class="{selected: treeNode.isSelected()}"
-            >
-            <span
-                class='ui-symbol view-control flex-elem'
-                ng-class="{ 'has-children': model.composition !== undefined, expanded: toggle.isActive() }"
+    <div class="u-contents" ng-controller="TreeNodeController as treeNode">
+        <div class="c-tree__item menus-to-left"
+            ng-class="{selected: treeNode.isSelected()}">
+            <span class='c-disclosure-triangle c-tree__item__view-control'
+                ng-class="{ 'is-enabled': model.composition !== undefined, 'c-disclosure-triangle--expanded': toggle.isActive() }"
                 ng-click="toggle.toggle(); treeNode.trackExpansion()"
                 >
             </span>
@@ -39,19 +36,15 @@
                 ng-click="treeNode.select()"
                 >
             </mct-representation>
-        </span>
-        <span
-            class="tree-item-subtree"
+        </div>
+        <div class="u-contents"
             ng-show="toggle.isActive()"
-            ng-if="model.composition !== undefined"
-            >
-
+            ng-if="model.composition !== undefined">
             <mct-representation key="'subtree'"
                                 ng-model="ngModel"
                                 parameters="parameters"
                                 mct-object="treeNode.hasBeenExpanded() && domainObject">
             </mct-representation>
-
-        </span>
-    </span>
+        </div>
+    </div>
 </span>

platform/commonUI/general/res/templates/tree.html

@@ -19,8 +19,8 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<ul class="tree">
-    <li>
+<ul class="c-tree">
+    <li class="c-tree__item-h">
         <mct-representation key="'tree-node'"
                             mct-object="domainObject"
                             ng-model="ngModel"

platform/commonUI/general/res/templates/tree/node.html

@@ -1,4 +1,2 @@
-<span class="tree-item menus-to-left">
-</span>
-<span class="tree-item-subtree">
-</span>
+<span class="c-tree__item js-tree__item"></span>
+<span class="c-tree__item-subtree"></span>

platform/commonUI/general/res/templates/tree/toggle.html

@@ -1,2 +1 @@
-<span class='ui-symbol view-control flex-elem'>
-</span>
+<span class='c-disclosure-triangle c-tree__item__view-control'></span>

platform/commonUI/general/res/templates/tree/tree-label.html

@@ -1,6 +1,4 @@
-<span class="rep-object-label">
-    <div class="t-object-label l-flex-row flex-elem grows">
-        <div class="t-item-icon flex-elem"></div>
-        <div class='t-title-label flex-elem grows'></div>
-    </div>
-</span>
+<div class="rep-object-label c-object-label c-tree__item__label">
+    <div class="c-object-label__type-icon c-tree__item__type-icon t-item-icon"></div>
+    <div class="c-object-label__name c-tree__item__name t-title-label"></div>
+</div>

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

@@ -37,9 +37,9 @@ define([
         this.expanded = state;
 
         if (state) {
-            this.el.addClass('expanded');
+            this.el.addClass('c-disclosure-triangle--expanded');
         } else {
-            this.el.removeClass('expanded');
+            this.el.removeClass('c-disclosure-triangle--expanded');
         }
 
         this.callbacks.forEach(function (callback) {

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

@@ -28,7 +28,7 @@ define([
 ], function ($, nodeTemplate, ToggleView, TreeLabelView) {
 
     function TreeNodeView(gestureService, subtreeFactory, selectFn, openmct) {
-        this.li = $('<li>');
+        this.li = $('<li class="c-tree__item-h">');
         this.openmct = openmct;
         this.statusClasses = [];
 
@@ -38,7 +38,7 @@ define([
                 if (!this.subtreeView) {
                     this.subtreeView = subtreeFactory();
                     this.subtreeView.model(this.activeObject);
-                    this.li.find('.tree-item-subtree').eq(0)
+                    this.li.find('.c-tree__item-subtree').eq(0)
                         .append($(this.subtreeView.elements()));
                 }
                 $(this.subtreeView.elements()).removeClass('hidden');
@@ -85,9 +85,9 @@ define([
             var obj = domainObject.useCapability('adapter');
             var hasComposition =  this.openmct.composition.get(obj) !== undefined;
             if (hasComposition) {
-                $(this.toggleView.elements()).removeClass('no-children');
+                $(this.toggleView.elements()).addClass('is-enabled');
             } else {
-                $(this.toggleView.elements()).addClass('no-children');
+                $(this.toggleView.elements()).removeClass('is-enabled');
             }
         }
 
@@ -120,7 +120,7 @@ define([
             selectedIdPath = getIdPath(domainObject);
 
         if (this.onSelectionPath) {
-            this.li.find('.tree-item').eq(0).removeClass('selected');
+            this.li.find('.js-tree__item').eq(0).removeClass('is-selected');
             if (this.subtreeView) {
                 this.subtreeView.value(undefined);
             }
@@ -136,7 +136,7 @@ define([
 
         if (this.onSelectionPath) {
             if (activeIdPath.length === selectedIdPath.length) {
-                this.li.find('.tree-item').eq(0).addClass('selected');
+                this.li.find('.js-tree__item').eq(0).addClass('is-selected');
             } else {
                 // Expand to reveal the selection
                 this.toggleView.value(true);

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

@@ -27,7 +27,7 @@ define([
 ], function ($, TreeNodeView, spinnerTemplate) {
 
     function TreeView(gestureService, openmct, selectFn) {
-        this.ul = $('<ul class="tree"></ul>');
+        this.ul = $('<ul class="c-tree"></ul>');
         this.nodeViews = [];
         this.callbacks = [];
         this.selectFn = selectFn || this.value.bind(this);

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

@@ -24,10 +24,10 @@
         <button ng-click="timer.clickStopButton()"
                 ng-hide="timer.timerState == 'stopped'"
                 title="Reset"
-                class="c-timer__ctrl-reset c-click-icon c-click-icon--major icon-reset"></button>
+                class="c-timer__ctrl-reset c-icon-button c-icon-button--major icon-reset"></button>
         <button ng-click="timer.clickButton()"
                 title="{{timer.buttonText()}}"
-                class="c-timer__ctrl-pause-play c-click-icon c-click-icon--major {{timer.buttonCssClass()}}"></button>
+                class="c-timer__ctrl-pause-play c-icon-button c-icon-button--major {{timer.buttonCssClass()}}"></button>
     </div>
     <div class="c-timer__direction {{timer.signClass()}}"
         ng-hide="!timer.signClass()"></div>

platform/features/hyperlink/bundle.js

@@ -45,7 +45,6 @@ define([
                             "key": "url",
                             "name": "URL",
                             "control": "textfield",
-                            "pattern": "^(ftp|https?)\\:\\/\\/",
                             "required": true,
                             "cssClass": "l-input-lg"
                         },

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

@@ -1,22 +1,18 @@
-<div class="t-imagery" ng-controller="ImageryController as imagery">
+<div class="t-imagery c-imagery" ng-controller="ImageryController as imagery">
     <mct-split-pane class='abs' anchor="bottom" alias="imagery">
-    <div class="split-pane-component has-local-controls l-image-main-wrapper l-flex-col"
-        ng-mouseenter="showLocalControls = true;"
-        ng-mouseleave="showLocalControls = false;">
-        <div class="h-local-controls h-local-controls-overlay-content h-local-controls-trans s-local-controls local-controls-hidden l-flex-row">
-            <span class="holder flex-elem grows">
+    <div class="split-pane-component has-local-controls l-image-main-wrapper l-flex-col">
+        <div class="h-local-controls h-local-controls--overlay-content c-local-controls--show-on-hover l-flex-row c-imagery__lc">
+            <span class="holder flex-elem grows c-imagery__lc__sliders">
                 <input class="icon-brightness" type="range"
                        min="0"
                        max="500"
-                       ng-model="filters.brightness">
-                </input>
+                       ng-model="filters.brightness" />
                 <input class="icon-contrast" type="range"
                        min="0"
                        max="500"
-                       ng-model="filters.contrast">
-                </input>
+                       ng-model="filters.contrast" />
             </span>
-            <span class="holder flex-elem t-reset-btn-holder">
+            <span class="holder flex-elem t-reset-btn-holder c-imagery__lc__reset-btn">
                 <a class="s-icon-button icon-reset t-btn-reset"
                    ng-click="filters = { brightness: 100, contrast: 100 }"></a>
             </span>
@@ -33,14 +29,14 @@
 
         <div class="l-image-main-controlbar flex-elem l-flex-row">
             <div class="l-datetime-w flex-elem grows">
-                <a class="s-button show-thumbs sm hidden icon-thumbs-strip"
+                <a class="c-button show-thumbs sm hidden icon-thumbs-strip"
                     ng-click="showThumbsBubble = (showThumbsBubble) ? false:true"></a>
                 <span class="l-time">{{imagery.getTime()}}</span>
             </div>
             <div class="h-local-controls flex-elem">
-                <a class="s-button pause-play"
+                <a class="c-button icon-pause pause-play"
                     ng-click="imagery.paused(!imagery.paused())"
-                    ng-class="{ paused: imagery.paused() }"></a>
+                    ng-class="{ 'is-paused': imagery.paused() }"></a>
                 <a href=""
                     class="s-button l-mag s-mag vsm icon-reset"
                     ng-click="clipped = false"

platform/features/pages/bundle.js

@@ -47,7 +47,6 @@ define([
                             "key": "url",
                             "name": "URL",
                             "control": "textfield",
-                            "pattern": "^(ftp|https?)\\:\\/\\/",
                             "required": true,
                             "cssClass": "l-input-lg"
                         }

platform/forms/res/templates/form.html

@@ -19,13 +19,13 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<form name="mctForm" novalidate class="form l-flex-col">
+<form name="mctForm" novalidate class="form c-form" autocomplete="off">
     <span ng-repeat="section in structure.sections"
-          class="l-form-section l-flex-col flex-elem {{ section.cssClass }}">
-        <h2 class="section-header flex-elem" ng-if="section.name">
+          class="l-form-section c-form__section {{ section.cssClass }}">
+        <h2 class="c-form__header" ng-if="section.name">
             {{section.name}}
         </h2>
-        <ng-form class="form-row validates l-flex-row flex-elem {{ section.cssClass }}"
+        <ng-form class="form-row c-form__row validates {{ section.cssClass }}"
                  ng-class="{
                  first:$index < 1,
                  req: row.required,
@@ -37,11 +37,11 @@
                  }"
                  name="mctFormInner"
                  ng-repeat="row in section.rows">
-            <div class='label flex-elem' title="{{row.description}}">
+            <div class='c-form__row__label label flex-elem' title="{{row.description}}">
                 {{row.name}}
             </div>
-            <div class='controls flex-elem'>
-                <div class="wrapper" ng-if="row.control">
+            <div class='c-form__row__controls controls flex-elem'>
+                <div class="c-form__controls-wrapper wrapper" ng-if="row.control">
                     <mct-control key="row.control"
                                  ng-model="ngModel"
                                  ng-required="row.required"

platform/forms/src/controllers/SnapshotPreviewController.js

@@ -29,12 +29,13 @@ define(
         function SnapshotPreviewController($scope, openmct) {
 
             $scope.previewImage = function (imageUrl) {
-                let image = document.createElement('img');
-                image.src = imageUrl;
+                let imageDiv = document.createElement('div');
+                imageDiv.classList = 'image-main s-image-main';
+                imageDiv.style.backgroundImage = `url(${imageUrl})`;
 
                 let previewImageOverlay = openmct.overlays.overlay(
                     {
-                        element: image,
+                        element: imageDiv,
                         size: 'large',
                         buttons: [
                             {

platform/persistence/queue/src/PersistenceFailureHandler.js

@@ -37,75 +37,17 @@ define(
         }
 
         /**
-         * Handle persistence failures by providing the user with a
-         * dialog summarizing these failures, and giving the option
-         * to overwrite/cancel as appropriate.
+         * Discard failures
          * @param {Array} failures persistence failures, as prepared
          *        by PersistenceQueueHandler
          * @memberof platform/persistence/queue.PersistenceFailureHandler#
          */
         PersistenceFailureHandler.prototype.handle = function handleFailures(failures) {
-            // Prepare dialog for display
+
             var dialogModel = new PersistenceFailureDialog(failures),
                 revisionErrors = dialogModel.model.revised,
                 $q = this.$q;
 
-            // Refresh revision information for the domain object associated
-            // with this persistence failure
-            function refresh(failure) {
-                // Refresh the domain object to the latest from persistence
-                return failure.persistence.refresh();
-            }
-
-            // Issue a new persist call for the domain object associated with
-            // this failure.
-            function persist(failure) {
-                // Note that we reissue the persist request here, but don't
-                // return it, to avoid a circular wait. We trust that the
-                // PersistenceQueue will behave correctly on the next round
-                // of flushing.
-                failure.requeue();
-            }
-
-            // Retry persistence (overwrite) for this set of failed attempts
-            function retry(failuresToRetry) {
-                var models = {};
-
-                // Cache a copy of the model
-                function cacheModel(failure) {
-                    // Clone...
-                    models[failure.id] = JSON.parse(JSON.stringify(
-                        failure.domainObject.getModel()
-                    ));
-                }
-
-                // Mutate a domain object to restore its model
-                function remutate(failure) {
-                    var model = models[failure.id];
-                    return failure.domainObject.useCapability(
-                        "mutation",
-                        function () {
-                            return model;
-                        },
-                        model.modified
-                    );
-                }
-
-                // Cache the object models we might want to save
-                failuresToRetry.forEach(cacheModel);
-
-                // Strategy here:
-                // * Cache all of the models we might want to save (above)
-                // * Refresh all domain objects (so they are latest versions)
-                // * Re-insert the cached domain object models
-                // * Invoke persistence again
-                return $q.all(failuresToRetry.map(refresh)).then(function () {
-                    return $q.all(failuresToRetry.map(remutate));
-                }).then(function () {
-                    return $q.all(failuresToRetry.map(persist));
-                });
-            }
-
             // Discard changes for a failed refresh
             function discard(failure) {
                 var persistence =
@@ -118,19 +60,7 @@ define(
                 return $q.all(failuresToDiscard.map(discard));
             }
 
-            // Handle user input (did they choose to overwrite?)
-            function handleChoice(key) {
-                // If so, try again
-                if (key === PersistenceFailureConstants.OVERWRITE_KEY) {
-                    return retry(revisionErrors);
-                } else {
-                    return discardAll(revisionErrors);
-                }
-            }
-
-            // Prompt for user input, the overwrite if they said so.
-            return this.dialogService.getUserChoice(dialogModel)
-                .then(handleChoice, handleChoice);
+            return discardAll(revisionErrors);
         };
 
         return PersistenceFailureHandler;

platform/persistence/queue/test/PersistenceFailureHandlerSpec.js

@@ -74,43 +74,14 @@ define(
                 handler = new PersistenceFailureHandler(mockQ, mockDialogService);
             });
 
-            it("shows a dialog to handle failures", function () {
+            it("discards on handle", function () {
                 handler.handle(mockFailures);
-                expect(mockDialogService.getUserChoice).toHaveBeenCalled();
-            });
-
-            it("overwrites on request", function () {
-                mockQ.all.and.returnValue(asPromise([]));
-                handler.handle(mockFailures);
-                // User chooses overwrite
-                mockPromise.then.calls.mostRecent().args[0](Constants.OVERWRITE_KEY);
-                // Should refresh, remutate, and requeue all objects
-                mockFailures.forEach(function (mockFailure, i) {
-                    expect(mockFailure.persistence.refresh).toHaveBeenCalled();
-                    expect(mockFailure.requeue).toHaveBeenCalled();
-                    expect(mockFailure.domainObject.useCapability).toHaveBeenCalledWith(
-                        'mutation',
-                        jasmine.any(Function),
-                        i // timestamp
-                    );
-                    expect(mockFailure.domainObject.useCapability.calls.mostRecent().args[1]())
-                        .toEqual({ id: mockFailure.id, modified: i });
-                });
-            });
-
-            it("discards on request", function () {
-                mockQ.all.and.returnValue(asPromise([]));
-                handler.handle(mockFailures);
-                // User chooses overwrite
-                mockPromise.then.calls.mostRecent().args[0](false);
-                // Should refresh, but not remutate, and requeue all objects
                 mockFailures.forEach(function (mockFailure) {
                     expect(mockFailure.persistence.refresh).toHaveBeenCalled();
                     expect(mockFailure.requeue).not.toHaveBeenCalled();
                     expect(mockFailure.domainObject.useCapability).not.toHaveBeenCalled();
                 });
             });
-
         });
     }
 );

platform/search/res/templates/search.html

@@ -45,7 +45,7 @@
                 </mct-include>
             </div>
 
-            <a class="s-button c-search__btn-cancel"
+            <a class="c-button c-search__btn-cancel"
                ng-show="!(ngModel.input === '' || ngModel.input === undefined)"
                ng-click="ngModel.input = ''; ngModel.checkAll = true; menuController.checkAll(); controller.search()">
                 Cancel</a>

src/MCT.js

@@ -44,6 +44,9 @@ define([
     '../platform/core/src/objects/DomainObjectImpl',
     '../platform/core/src/capabilities/ContextualDomainObject',
     './ui/preview/plugin',
+    './api/Branding',
+    './plugins/licenses/plugin',
+    './plugins/remove/plugin',
     'vue'
 ], function (
     EventEmitter,
@@ -69,6 +72,9 @@ define([
     DomainObjectImpl,
     ContextualDomainObject,
     PreviewPlugin,
+    BrandingAPI,
+    LicensesPlugin,
+    RemoveActionPlugin,
     Vue
 ) {
     /**
@@ -89,6 +95,13 @@ define([
      */
     function MCT() {
         EventEmitter.call(this);
+        this.buildInfo = {
+            version: __OPENMCT_VERSION__,
+            buildDate: __OPENMCT_BUILD_DATE__,
+            revision: __OPENMCT_REVISION__,
+            branch: __OPENMCT_BUILD_BRANCH__
+        };
+
         this.legacyBundle = { extensions: {
             services: [
                 {
@@ -228,16 +241,21 @@ define([
 
         this.contextMenu = new api.ContextMenuRegistry();
 
+        this.router = new ApplicationRouter();
+
+        this.branding = BrandingAPI.default;
+
         this.legacyRegistry = defaultRegistry;
         this.install(this.plugins.Plot());
         this.install(this.plugins.TelemetryTable());
-        this.install(this.plugins.DisplayLayout());
         this.install(PreviewPlugin.default());
+        this.install(LegacyIndicatorsPlugin());
+        this.install(LicensesPlugin.default());
+        this.install(RemoveActionPlugin.default());
 
         if (typeof BUILD_CONSTANTS !== 'undefined') {
             this.install(buildInfoPlugin(BUILD_CONSTANTS));
         }
-
     }
 
     MCT.prototype = Object.create(EventEmitter.prototype);
@@ -308,6 +326,12 @@ define([
      *        MCT; if undefined, MCT will be run in the body of the document
      */
     MCT.prototype.start = function (domElement) {
+        if (!this.plugins.DisplayLayout._installed) {
+            this.install(this.plugins.DisplayLayout({
+                showAsView: ['summary-widget']
+            }));
+        }
+
         if (!domElement) {
             domElement = document.body;
         }
@@ -331,12 +355,8 @@ define([
         legacyRegistry.register('adapter', this.legacyBundle);
         legacyRegistry.enable('adapter');
 
-        this.install(LegacyIndicatorsPlugin());
-
-        this.router = new ApplicationRouter();
-
         this.router.route(/^\/$/, () => {
-            this.router.setPath('/browse/mine');
+            this.router.setPath('/browse/');
         });
 
         /**

src/adapter/actions/LegacyContextMenuAction.js

@@ -33,20 +33,25 @@ export default class LegacyContextMenuAction {
     }
 
     invoke(objectPath) {
-        let context = {
-            category: 'contextual',
-            domainObject: this.openmct.legacyObject(objectPath)
-        }
-        let legacyAction = new this.LegacyAction(context);
+        this.openmct.objects.getRoot().then((root) => {
+            let pathWithRoot = objectPath.slice();
+            pathWithRoot.push(root);
 
-        if (!legacyAction.getMetadata) {
-            let metadata = Object.create(this.LegacyAction.definition);
-            metadata.context = context;
-            legacyAction.getMetadata = function () {
-                return metadata;
-            }.bind(legacyAction);
-        }
-        legacyAction.perform();
+            let context = {
+                category: 'contextual',
+                domainObject: this.openmct.legacyObject(pathWithRoot)
+            }
+            let legacyAction = new this.LegacyAction(context);
+
+            if (!legacyAction.getMetadata) {
+                let metadata = Object.create(this.LegacyAction.definition);
+                metadata.context = context;
+                legacyAction.getMetadata = function () {
+                    return metadata;
+                }.bind(legacyAction);
+            }
+            legacyAction.perform();
+        });
     }
 
     appliesTo(objectPath) {

src/adapter/runs/LegacyTelemetryProvider.js

@@ -137,8 +137,7 @@ define([
         function callbackWrapper(series) {
             callback(createDatum(domainObject, metadata, series, series.getPointCount() - 1));
         }
-
-        return capability.subscribe(callbackWrapper, request);
+        return capability.subscribe(callbackWrapper, request) || function () {};
     };
 
     LegacyTelemetryProvider.prototype.supportsLimits = function (domainObject) {
@@ -158,7 +157,7 @@ define([
 
         return {
             evaluate: function (datum, property) {
-                return limitEvaluator.evaluate(datum, property.key);
+                return limitEvaluator.evaluate(datum, property && property.key);
             }
         };
     };

src/adapter/services/LegacyObjectAPIInterceptor.js

@@ -57,8 +57,10 @@ define([
         }.bind(this);
 
         handleLegacyMutation = function (legacyObject) {
-            var newStyleObject = utils.toNewFormat(legacyObject.getModel(), legacyObject.getId());
-            this.eventEmitter.emit(newStyleObject.identifier.key + ":*", newStyleObject);
+            var newStyleObject = utils.toNewFormat(legacyObject.getModel(), legacyObject.getId()),
+                keystring = utils.makeKeyString(newStyleObject.identifier);
+
+            this.eventEmitter.emit(keystring + ":*", newStyleObject);
             this.eventEmitter.emit('mutation', newStyleObject);
         }.bind(this);
 

src/adapter/views/TypeInspectorViewProvider.js

@@ -25,14 +25,20 @@ define([
             cssClass: representation.cssClass,
             description: representation.description,
             canView: function (selection) {
-                if (!selection[0] || !selection[0].context.item) {
+                if (selection.length === 0 || selection[0].length === 0) {
                     return false;
                 }
-                let domainObject = selection[0].context.item;
-                return domainObject.type === typeDefinition.key;
+
+                let selectionContext = selection[0][0].context;
+
+                if (!selectionContext.item) {
+                    return false;
+                }
+
+                return selectionContext.item.type === typeDefinition.key;
             },
             view: function (selection) {
-                let domainObject = selection[0].context.item;
+                let domainObject = selection[0][0].context.item;
                 let $rootScope = openmct.$injector.get('$rootScope');
                 let templateLinker = openmct.$injector.get('templateLinker');
                 let scope = $rootScope.$new();

src/api/Branding.js

@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
+ * Open MCT, Copyright (c) 2014-2019, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -19,31 +19,27 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-// Styles for extended text copy
 
-.abs.l-standalone {
-	$d: 20%;
-	padding: $d/4 $d;
-}
+let brandingOptions = {};
 
-.s-text {
-	font-size: 0.8em;
-	ol, ul {
-		list-style: square;
-		margin-left: 1.5em;
-		li {
+/**
+ * @typedef {Object} BrandingOptions
+ * @memberOf openmct/branding
+ * @property {string} smallLogoImage URL to the image to use as the applications logo.
+ * This logo will appear on every screen and when clicked will launch the about dialog.
+ * @property {string} aboutHtml Custom content for the about screen. When defined the
+ * supplied content will be inserted at the start of the about dialog, and the default
+ * Open MCT splash logo will be suppressed.
+ */
 
-		}
-	}
-
-	h1, h2, h3 {
-        font-weight: 200 !important;
-    }
-
-    table {
-        td { font-size: inherit; }
-        tr.header {
-            background-color: rgba($colorBodyFg, 0.2);
-        }
+/**
+ * Set branding options for the application. These will override certain visual elements 
+ * of the application and allow for customization of the application.
+ * @param {BrandingOptions} options
+ */
+export default function Branding(options) {
+    if (arguments.length === 1) {
+        brandingOptions = options;
     }
+    return brandingOptions;
 }

src/api/Editor.js

@@ -28,11 +28,6 @@ export default class Editor extends EventEmitter {
         super();
         this.editing = false;
         this.openmct = openmct;
-        document.addEventListener('drop', (event) => {
-            if (!this.isEditing()) {
-                this.edit();
-            }
-        }, {capture: true});
     }
 
     /**
@@ -79,9 +74,11 @@ export default class Editor extends EventEmitter {
      * @private
      */
     cancel() {
-        this.getTransactionService().cancel();
+        let cancelPromise = this.getTransactionService().cancel();
         this.editing = false;
         this.emit('isEditing', false);
+
+        return cancelPromise;
     }
 
     /**

src/api/composition/CompositionAPISpec.js

@@ -21,7 +21,11 @@ define([
             topicService.and.returnValue(mutationTopic);
             publicAPI = {};
             publicAPI.objects = jasmine.createSpyObj('ObjectAPI', [
-                'get'
+                'get',
+                'mutate'
+            ]);
+            publicAPI.objects.eventEmitter = jasmine.createSpyObj('eventemitter', [
+                'on'
             ]);
             publicAPI.objects.get.and.callFake(function (identifier) {
                 return Promise.resolve({identifier: identifier});
@@ -52,6 +56,14 @@ define([
                         {
                             namespace: 'test',
                             key: 'a'
+                        },
+                        {
+                            namespace: 'test',
+                            key: 'b'
+                        },
+                        {
+                            namespace: 'test',
+                            key: 'c'
                         }
                     ]
                 };
@@ -68,12 +80,45 @@ define([
                 composition.on('add', listener);
 
                 return composition.load().then(function () {
-                    expect(listener.calls.count()).toBe(1);
+                    expect(listener.calls.count()).toBe(3);
                     expect(listener).toHaveBeenCalledWith({
                         identifier: {namespace: 'test', key: 'a'}
                     });
                 });
             });
+            describe('supports reordering of composition', function () {
+                var listener;
+                beforeEach(function () {
+                    listener = jasmine.createSpy('reorderListener');
+                    composition.on('reorder', listener);
+                    
+                    return composition.load();
+                });
+                it('', function () {
+                    composition.reorder(1, 0);
+                    let newComposition =
+                        publicAPI.objects.mutate.calls.mostRecent().args[2];
+                    let reorderPlan = listener.calls.mostRecent().args[0][0];
+
+                    expect(reorderPlan.oldIndex).toBe(1);
+                    expect(reorderPlan.newIndex).toBe(0);
+                    expect(newComposition[0].key).toEqual('b');
+                    expect(newComposition[1].key).toEqual('a');
+                    expect(newComposition[2].key).toEqual('c');
+                });
+                it('', function () {
+                    composition.reorder(0, 2);
+                    let newComposition =
+                        publicAPI.objects.mutate.calls.mostRecent().args[2];
+                    let reorderPlan = listener.calls.mostRecent().args[0][0];
+
+                    expect(reorderPlan.oldIndex).toBe(0);
+                    expect(reorderPlan.newIndex).toBe(2);
+                    expect(newComposition[0].key).toEqual('b');
+                    expect(newComposition[1].key).toEqual('c');
+                    expect(newComposition[2].key).toEqual('a');
+                })
+            });
 
             // TODO: Implement add/removal in new default provider.
             xit('synchronizes changes between instances', function () {

src/api/composition/CompositionCollection.js

@@ -25,7 +25,6 @@ define([
 ], function (
     _
 ) {
-
     /**
      * A CompositionCollection represents the list of domain objects contained
      * by another domain object. It provides methods for loading this
@@ -56,13 +55,13 @@ define([
         this.listeners = {
             add: [],
             remove: [],
-            load: []
+            load: [],
+            reorder: []
         };
         this.onProviderAdd = this.onProviderAdd.bind(this);
         this.onProviderRemove = this.onProviderRemove.bind(this);
     }
 
-
     /**
      * Listen for changes to this composition.  Supports 'add', 'remove', and
      * 'load' events.
@@ -75,7 +74,11 @@ define([
         if (!this.listeners[event]) {
             throw new Error('Event not supported by composition: ' + event);
         }
-
+        if (!this.mutationListener) {
+            this.mutationListener = this.publicAPI.objects.observe(this.domainObject, '*', (newDomainObject) => {
+                this.domainObject = newDomainObject;
+            })
+        }
         if (this.provider.on && this.provider.off) {
             if (event === 'add') {
                 this.provider.on(
@@ -91,6 +94,13 @@ define([
                     this.onProviderRemove,
                     this
                 );
+            } if (event === 'reorder') {
+                this.provider.on(
+                    this.domainObject,
+                    'reorder',
+                    this.onProviderReorder,
+                    this
+                )
             }
         }
 
@@ -124,6 +134,10 @@ define([
 
         this.listeners[event].splice(index, 1);
         if (this.listeners[event].length === 0) {
+            if (this.mutationListener) {
+                this.mutationListener();
+                delete this.mutationListener;
+            }
             // Remove provider listener if this is the last callback to
             // be removed.
             if (this.provider.off && this.provider.on) {
@@ -141,6 +155,13 @@ define([
                         this.onProviderRemove,
                         this
                     );
+                } else if (event === 'reorder') {
+                    this.provider.off(
+                        this.domainObject,
+                        'reorder',
+                        this.onProviderReorder,
+                        this
+                    );
                 }
             }
         }
@@ -209,6 +230,29 @@ define([
         }
     };
 
+    /**
+     * Reorder the domain objects in this composition.
+     *
+     * A call to [load]{@link module:openmct.CompositionCollection#load}
+     * must have resolved before using this method.
+     *
+     * @param {number} oldIndex
+     * @param {number} newIndex
+     * @memberof module:openmct.CompositionCollection#
+     * @name remove
+     */
+    CompositionCollection.prototype.reorder = function (oldIndex, newIndex, skipMutate) {
+        this.provider.reorder(this.domainObject, oldIndex, newIndex);
+    };
+
+    /**
+     * Handle reorder from provider.
+     * @private
+     */
+    CompositionCollection.prototype.onProviderReorder = function (reorderMap) {
+        this.emit('reorder', reorderMap);
+    };
+
     /**
      * Handle adds from provider.
      * @private
@@ -232,12 +276,12 @@ define([
      * Emit events.
      * @private
      */
-    CompositionCollection.prototype.emit = function (event, payload) {
+    CompositionCollection.prototype.emit = function (event, ...payload) {
         this.listeners[event].forEach(function (l) {
             if (l.context) {
-                l.callback.call(l.context, payload);
+                l.callback.apply(l.context, payload);
             } else {
-                l.callback(payload);
+                l.callback(...payload);
             }
         });
     };

src/api/composition/DefaultCompositionProvider.js

@@ -126,6 +126,7 @@ define([
             objectListeners = this.listeningTo[keyString] = {
                 add: [],
                 remove: [],
+                reorder: [],
                 composition: [].slice.apply(domainObject.composition)
             };
         }
@@ -160,7 +161,7 @@ define([
         });
 
         objectListeners[event].splice(index, 1);
-        if (!objectListeners.add.length && !objectListeners.remove.length) {
+        if (!objectListeners.add.length && !objectListeners.remove.length && !objectListeners.reorder.length) {
             delete this.listeningTo[keyString];
         }
     };
@@ -178,8 +179,12 @@ define([
      * @method remove
      */
     DefaultCompositionProvider.prototype.remove = function (domainObject, childId) {
-        // TODO: this needs to be synchronized via mutation.
-        throw new Error('Default Provider does not implement removal.');
+        let composition = domainObject.composition.filter(function (child) {
+            return !(childId.namespace === child.namespace &&
+                childId.key === child.key);
+        });
+
+        this.publicAPI.objects.mutate(domainObject, 'composition', composition);
     };
 
     /**
@@ -199,6 +204,54 @@ define([
         // TODO: this needs to be synchronized via mutation
     };
 
+    DefaultCompositionProvider.prototype.reorder = function (domainObject, oldIndex, newIndex) {
+        let newComposition = domainObject.composition.slice();
+        let removeId = oldIndex > newIndex ? oldIndex + 1 : oldIndex;
+        let insertPosition = oldIndex < newIndex ? newIndex + 1 : newIndex;
+        //Insert object in new position
+        newComposition.splice(insertPosition, 0, domainObject.composition[oldIndex]);
+        newComposition.splice(removeId, 1);
+
+        let reorderPlan = [{
+            oldIndex,
+            newIndex
+        }];
+
+        if (oldIndex > newIndex) {
+            for (let i = newIndex; i < oldIndex; i++) {
+                reorderPlan.push({
+                    oldIndex: i,
+                    newIndex: i + 1
+                });
+            }
+        } else {
+            for (let i = oldIndex + 1; i <= newIndex; i++) {
+                reorderPlan.push({
+                    oldIndex: i,
+                    newIndex: i - 1
+                });
+            }
+        }
+        this.publicAPI.objects.mutate(domainObject, 'composition', newComposition);
+
+        let id = objectUtils.makeKeyString(domainObject.identifier);
+        var listeners = this.listeningTo[id];
+
+        if (!listeners) {
+            return;
+        }
+
+        listeners.reorder.forEach(notify);
+
+        function notify(listener) {
+            if (listener.context) {
+                listener.callback.call(listener.context, reorderPlan);
+            } else {
+                listener.callback(reorderPlan);
+            }
+        }
+    };
+
     /**
      * Listens on general mutation topic, using injector to fetch to avoid
      * circular dependencies.

src/api/objects/MutableObject.js

@@ -21,8 +21,10 @@
  *****************************************************************************/
 
 define([
+    './object-utils.js',
     'lodash'
 ], function (
+    utils,
     _
 ) {
     var ANY_OBJECT_EVENT = "mutation";
@@ -41,7 +43,9 @@ define([
     }
 
     function qualifiedEventName(object, eventName) {
-        return [object.identifier.key, eventName].join(':');
+        var keystring = utils.makeKeyString(object.identifier);
+
+        return [keystring, eventName].join(':');
     }
 
     MutableObject.prototype.stopListening = function () {

src/api/objects/ObjectAPI.js

@@ -226,7 +226,20 @@ define([
                     (identifier.namespace === identifiers[0].namespace &&
                         identifier.key === identifiers[0].key);
             });
-    }
+    };
+
+    ObjectAPI.prototype.getOriginalPath = function (identifier, path = []) {
+        return this.get(identifier).then((domainObject) => {
+            path.push(domainObject);
+            let location = domainObject.location;
+
+            if (location) {
+                return this.getOriginalPath(utils.parseKeyString(location), path);
+            } else {
+                return path;
+            }
+        });
+    };
 
     /**
      * Uniquely identifies a domain object.

src/api/overlays/Overlay.js

@@ -5,7 +5,8 @@ import Vue from 'vue';
 const cssClasses = {
     large: 'l-overlay-large',
     small: 'l-overlay-small',
-    fit: 'l-overlay-fit'
+    fit: 'l-overlay-fit',
+    fullscreen: 'l-overlay-fullscreen'
 };
 
 class Overlay extends EventEmitter {

src/api/overlays/components/DialogComponent.vue

@@ -27,10 +27,16 @@
 <style lang="scss">
     @import "~styles/sass-base";
 
+    @mixin legacyMessage() {
+        flex: 0 1 auto;
+        font-family: symbolsfont;
+        font-size: $messageIconD; // Singleton message in a dialog
+        margin-right: $interiorMarginLg;
+    }
+
     .c-message {
         display: flex;
         align-items: center;
-        padding: $interiorMarginLg;
 
         > * + * {
             margin-left: $interiorMarginLg;
@@ -58,7 +64,44 @@
         &__title,
         &__action-text {
             font-size: 1.2em; // TEMP
+        }
 
+        &--simple {
+            // Icon and text elements only
+            &:before {
+                font-size: 30px !important;
+            }
+
+            [class*='__text'] {
+                font-size: 1.25em;
+            }
+        }
+
+        /************************** LEGACY */
+        &.message-severity-info:before {
+            @include legacyMessage();
+            content: $glyph-icon-info;
+            color: $colorInfo;
+        }
+
+        &.message-severity-alert:before {
+            @include legacyMessage();
+            content: $glyph-icon-alert-rect;
+            color: $colorWarningLo;
+        }
+
+        &.message-severity-error:before {
+            @include legacyMessage();
+            content: $glyph-icon-alert-triangle;
+            color: $colorWarningLo;
+        }
+
+        // Messages in a list
+        .c-overlay__messages & {
+            padding: $interiorMarginLg;
+            &:before {
+                font-size: $messageListIconD;
+            }
         }
     }
 </style>

src/api/overlays/components/OverlayComponent.vue

@@ -56,16 +56,44 @@
         }
 
         &__close-button {
-            $p: $interiorMarginSm;
+            $p: $interiorMargin;
             border-radius: 100% !important;
+            color: $overlayColorFg;
             display: inline-block;
+            font-size: 1.25em;
             position: absolute;
             top: $p; right: $p;
         }
 
         &__contents {
+            flex: 1 1 auto;
+            display: flex;
+            flex-direction: column;
+        }
+
+        &__top-bar {
+            flex: 0 0 auto;
+            flex-direction: column;
+            display: flex;
+
+            > * {
+                flex: 0 0 auto;
+                margin-bottom: $interiorMargin;
+            }
+        }
+
+        &__dialog-title {
+            @include ellipsize();
+            font-size: 1.5em;
+            line-height: 120%;
+        }
+
+        &__contents-main {
+            display: flex;
+            flex-direction: column;
             flex: 1 1 auto;
             overflow: auto;
+            padding-right: $interiorMargin; // fend off scroll bar
         }
 
         &__button-bar {
@@ -89,18 +117,29 @@
         .c-overlay {
             &__blocker {
                 @include abs();
-                background: rgba(black, 0.7);
+                background: $colorOvrBlocker;
                 cursor: pointer;
                 display: block;
             }
-
-            &__outer {
-                border-radius: $overlayCr;
-                box-shadow: rgba(black, 0.5) 0 2px 25px;
-            }
         }
 
         // Overlay types, styling for desktop. Appended to .l-overlay-wrapper element.
+        .l-overlay-large,
+        .l-overlay-small,
+        .l-overlay-fit {
+            .c-overlay__outer {
+                border-radius: $overlayCr;
+                box-shadow: rgba(black, 0.5) 0 2px 25px;
+            }
+        }
+        
+        .l-overlay-fullscreen {
+            // Used by About > Licenses display
+            .c-overlay__outer {
+                @include overlaySizing($overlayOuterMarginFullscreen);
+            }
+        }
+
         .l-overlay-large {
             // Default
             .c-overlay__outer {
@@ -114,6 +153,7 @@
             }
         }
 
+        .t-dialog-sm .l-overlay-small, // Legacy dialog support
         .l-overlay-fit {
             .c-overlay__outer {
                 @include overlaySizing(auto);

src/api/telemetry/TelemetryAPI.js

@@ -280,7 +280,11 @@ define([
         if (!provider) {
             return Promise.reject('No provider found');
         }
-        return provider.request.apply(provider, arguments);
+        return provider.request.apply(provider, arguments).catch((rejected) => {
+            this.openmct.notifications.error('Error requesting telemetry data, see console for details');
+            console.error(rejected);
+            return Promise.reject(rejected);
+        });
     };
 
     /**
@@ -297,7 +301,7 @@ define([
      * @returns {Function} a function which may be called to terminate
      *          the subscription
      */
-    TelemetryAPI.prototype.subscribe = function (domainObject, callback) {
+    TelemetryAPI.prototype.subscribe = function (domainObject, callback, options) {
         var provider = this.findSubscriptionProvider(domainObject);
 
         if (!this.subscribeCache) {
@@ -316,7 +320,7 @@ define([
                         subscriber.callbacks.forEach(function (cb) {
                             cb(value);
                         });
-                    });
+                    }, options);
             } else {
                 subscriber.unsubscribe = function () {};
             }

src/api/telemetry/TelemetryAPISpec.js

@@ -28,14 +28,22 @@ define([
     describe('Telemetry API', function () {
         var openmct;
         var telemetryAPI;
+        var mockTypeService;
 
         beforeEach(function () {
             openmct = {
                 time: jasmine.createSpyObj('timeAPI', [
                     'timeSystem',
                     'bounds'
+                ]),
+                $injector: jasmine.createSpyObj('injector', [
+                    'get'
                 ])
             };
+            mockTypeService = jasmine.createSpyObj('typeService', [
+                'getType'
+            ]);
+            openmct.$injector.get.and.returnValue(mockTypeService);
             openmct.time.timeSystem.and.returnValue({key: 'system'});
             openmct.time.bounds.and.returnValue({start: 0, end: 1});
             telemetryAPI = new TelemetryAPI(openmct);
@@ -296,5 +304,233 @@ define([
                 );
             });
         });
+        describe('metadata', function () {
+            let mockMetadata = {};
+            let mockObjectType = {
+                typeDef: {}
+            };
+            beforeEach(function () {
+                telemetryAPI.addProvider({
+                    key: 'mockMetadataProvider',
+                    supportsMetadata() {
+                        return true;
+                    },
+                    getMetadata() {
+                        return mockMetadata;
+                    }
+                });
+                mockTypeService.getType.and.returnValue(mockObjectType);
+            })
+            it('respects explicit priority', function () {
+                mockMetadata.values = [
+                    {
+                        key: "name",
+                        name: "Name",
+                        hints: {
+                            priority: 2
+                        }
+                        
+                    },
+                    {
+                        key: "timestamp",
+                        name: "Timestamp",
+                        hints: {
+                            priority: 1
+                        }
+                    },
+                    {
+                        key: "sin",
+                        name: "Sine",
+                        hints: {
+                            priority: 4
+                        }
+                    },
+                    {
+                        key: "cos",
+                        name: "Cosine",
+                        hints: {
+                            priority: 3
+                        }
+                    }
+                ];
+                let metadata = telemetryAPI.getMetadata({});
+                let values = metadata.values();
+
+                values.forEach((value, index) => {
+                    expect(value.hints.priority).toBe(index + 1);
+                });
+            });
+            it('if no explicit priority, defaults to order defined', function () {
+                mockMetadata.values = [
+                    {
+                        key: "name",
+                        name: "Name"
+                        
+                    },
+                    {
+                        key: "timestamp",
+                        name: "Timestamp"
+                    },
+                    {
+                        key: "sin",
+                        name: "Sine"
+                    },
+                    {
+                        key: "cos",
+                        name: "Cosine"
+                    }
+                ];
+                let metadata = telemetryAPI.getMetadata({});
+                let values = metadata.values();
+
+                values.forEach((value, index) => {
+                    expect(value.key).toBe(mockMetadata.values[index].key);
+                });
+            });
+            it('respects domain priority', function () {
+                mockMetadata.values = [
+                    {
+                        key: "name",
+                        name: "Name"
+                        
+                    },
+                    {
+                        key: "timestamp-utc",
+                        name: "Timestamp UTC",
+                        hints: {
+                            domain: 2
+                        }
+                    },
+                    {
+                        key: "timestamp-local",
+                        name: "Timestamp Local",
+                        hints: {
+                            domain: 1
+                        }
+                    },
+                    {
+                        key: "sin",
+                        name: "Sine",
+                        hints: {
+                            range: 2
+                        }
+                    },
+                    {
+                        key: "cos",
+                        name: "Cosine",
+                        hints: {
+                            range: 1
+                        }
+                    }
+                ];
+                let metadata = telemetryAPI.getMetadata({});
+                let values = metadata.valuesForHints(['domain']);
+
+                expect(values[0].key).toBe('timestamp-local');
+                expect(values[1].key).toBe('timestamp-utc');
+            });
+            it('respects range priority', function () {
+                mockMetadata.values = [
+                    {
+                        key: "name",
+                        name: "Name"
+                        
+                    },
+                    {
+                        key: "timestamp-utc",
+                        name: "Timestamp UTC",
+                        hints: {
+                            domain: 2
+                        }
+                    },
+                    {
+                        key: "timestamp-local",
+                        name: "Timestamp Local",
+                        hints: {
+                            domain: 1
+                        }
+                    },
+                    {
+                        key: "sin",
+                        name: "Sine",
+                        hints: {
+                            range: 2
+                        }
+                    },
+                    {
+                        key: "cos",
+                        name: "Cosine",
+                        hints: {
+                            range: 1
+                        }
+                    }
+                ];
+                let metadata = telemetryAPI.getMetadata({});
+                let values = metadata.valuesForHints(['range']);
+
+                expect(values[0].key).toBe('cos');
+                expect(values[1].key).toBe('sin');
+            });
+            it('respects priority and domain ordering', function () {
+                mockMetadata.values = [
+                    {
+                        key: "id",
+                        name: "ID",
+                        hints: {
+                            priority: 2
+                        }
+                    },
+                    {
+                        key: "name",
+                        name: "Name",
+                        hints: {
+                            priority: 1
+                        }
+                        
+                    },
+                    {
+                        key: "timestamp-utc",
+                        name: "Timestamp UTC",
+                        hints: {
+                            domain: 2,
+                            priority: 1
+                        }
+                    },
+                    {
+                        key: "timestamp-local",
+                        name: "Timestamp Local",
+                        hints: {
+                            domain: 1,
+                            priority: 2
+                        }
+                    },
+                    {
+                        key: "timestamp-pst",
+                        name: "Timestamp PST",
+                        hints: {
+                            domain: 3,
+                            priority: 2
+                        }
+                    },
+                    {
+                        key: "sin",
+                        name: "Sine"
+                    },
+                    {
+                        key: "cos",
+                        name: "Cosine"
+                    }
+                ];
+                let metadata = telemetryAPI.getMetadata({});
+                let values = metadata.valuesForHints(['priority', 'domain']);
+                [
+                    'timestamp-utc',
+                    'timestamp-local',
+                    'timestamp-pst'
+                ].forEach((key, index) => {
+                    expect(values[index].key).toBe(key);
+                });
+            });
+        })
     });
 });

src/api/telemetry/TelemetryMetadataManager.js

@@ -116,14 +116,18 @@ define([
             return hints.every(hasHint, metadata);
         }
         var matchingMetadata = this.valueMetadatas.filter(hasHints);
-        var sortedMetadata = _.sortBy(matchingMetadata, function (metadata) {
-            return hints.map(function (hint) {
+        let iteratees = hints.map(hint => {
+            return (metadata) => {
                 return metadata.hints[hint];
-            });
+            }
         });
-        return sortedMetadata;
+        return _.sortByAll(matchingMetadata, ...iteratees);
     };
 
+    TelemetryMetadataManager.prototype.getFilterableValues = function () {
+        return this.valueMetadatas.filter(metadatum => metadatum.filters && metadatum.filters.length > 0);
+    }
+
     TelemetryMetadataManager.prototype.getDefaultDisplayValue = function () {
         let valueMetadata = this.valuesForHints(['range'])[0];
 

src/plugins/LADTable/LADTableSetViewProvider.js

@@ -35,6 +35,9 @@ define([
             canView: function (domainObject) {
                 return domainObject.type === 'LadTableSet';
             },
+            canEdit: function (domainObject) {
+                return domainObject.type === 'LadTableSet';
+            },
             view: function (domainObject) {
                 let component;
 

src/plugins/LADTable/LADTableViewProvider.js

@@ -35,6 +35,9 @@ define([
             canView: function (domainObject) {
                 return domainObject.type === 'LadTable';
             },
+            canEdit: function (domainObject) {
+                return domainObject.type === 'LadTable';
+            },
             view: function (domainObject) {
                 let component;
 

src/plugins/LADTable/components/LADTable.vue

@@ -65,17 +65,25 @@ export default {
             let index = _.findIndex(this.items, (item) => this.openmct.objects.makeKeyString(identifier) === item.key);
 
             this.items.splice(index, 1);
+        },
+        reorder(reorderPlan) {
+            let oldItems = this.items.slice();
+            reorderPlan.forEach((reorderEvent) => {
+                this.$set(this.items, reorderEvent.newIndex, oldItems[reorderEvent.oldIndex]);
+            });
         }
     },
     mounted() {
         this.composition = this.openmct.composition.get(this.domainObject);
         this.composition.on('add', this.addItem);
         this.composition.on('remove', this.removeItem);
+        this.composition.on('reorder', this.reorder);
         this.composition.load();
     },
     destroyed() {
         this.composition.off('add', this.addItem);
         this.composition.off('remove', this.removeItem);
+        this.composition.off('reorder', this.reorder);
     }
 }
 </script>

src/plugins/LADTable/components/LadTableSet.vue

@@ -93,6 +93,12 @@
             this.primaryTelemetryObjects.splice(index,1);
             primary = undefined;
         },
+        reorderPrimary(reorderPlan) {
+            let oldComposition = this.primaryTelemetryObjects.slice();
+            reorderPlan.forEach(reorderEvent => {
+                this.$set(this.primaryTelemetryObjects, reorderEvent.newIndex, oldComposition[reorderEvent.oldIndex]);
+            });
+        },
         addSecondary(primary) {
             return (domainObject) => {
                 let secondary = {};
@@ -120,11 +126,13 @@
         this.composition = this.openmct.composition.get(this.domainObject);
         this.composition.on('add', this.addPrimary);
         this.composition.on('remove', this.removePrimary);
+        this.composition.on('reorder', this.reorderPrimary);
         this.composition.load();
     },
     destroyed() {
         this.composition.off('add', this.addPrimary);
         this.composition.off('remove', this.removePrimary);
+        this.composition.off('reorder', this.reorderPrimary);
         this.compositions.forEach(c => {
             c.composition.off('add', c.addCallback);
             c.composition.off('remove', c.removeCallback);

src/plugins/displayLayout/DisplayLayoutToolbar.js

@@ -28,11 +28,17 @@ define([], function () {
             key: "layout",
             description: "A toolbar for objects inside a display layout.",
             forSelection: function (selection) {
-                // Apply the layout toolbar if the edit mode is on, and the selected object
-                // is inside a layout, or the main layout is selected.
-                return (openmct.editor.isEditing() && selection &&
-                    ((selection[1] && selection[1].context.item && selection[1].context.item.type === 'layout') ||
-                        (selection[0].context.item && selection[0].context.item.type === 'layout')));
+                if (!selection || selection.length === 0) {
+                    return false;
+                }
+
+                let selectionPath = selection[0];
+                let selectedObject = selectionPath[0];
+                let selectedParent = selectionPath[1];
+
+                // Apply the layout toolbar if the selected object is inside a layout, or the main layout is selected.
+                return (selectedParent && selectedParent.context.item && selectedParent.context.item.type === 'layout') ||
+                    (selectedObject.context.item && selectedObject.context.item.type === 'layout');
             },
             toolbar: function (selection) {
                 const DIALOG_FORM = {
@@ -73,190 +79,72 @@ define([], function () {
                     return openmct.$injector.get('dialogService').getUserInput(form, {});
                 }
 
-                function getPath() {
-                    return `configuration.items[${selection[0].context.index}]`;
+                function getPath(selectionPath) {
+                    return `configuration.items[${selectionPath[0].context.index}]`;
                 }
 
-                let selectedParent = selection[1] && selection[1].context.item,
-                    selectedObject = selection[0].context.item,
-                    layoutItem = selection[0].context.layoutItem,
-                    toolbar = [];
-
-                if (selectedObject && selectedObject.type === 'layout') {
-                    toolbar.push({
-                        control: "menu",
-                        domainObject: selectedObject,
-                        method: function (option) {
-                            let name = option.name.toLowerCase();
-                            let form = DIALOG_FORM[name];
-                            if (form) {
-                                getUserInput(form)
-                                    .then(element => selection[0].context.addElement(name, element));
-                            } else {
-                                selection[0].context.addElement(name);
-                            }
-                        },
-                        key: "add",
-                        icon: "icon-plus",
-                        label: "Add",
-                        options: [
-                            {
-                                "name": "Box",
-                                "class": "icon-box-round-corners"
-                            },
-                            {
-                                "name": "Line",
-                                "class": "icon-line-horz"
-                            },
-                            {
-                                "name": "Text",
-                                "class": "icon-font"
-                            },
-                            {
-                                "name": "Image",
-                                "class": "icon-image"
-                            }
-                        ]
+                function getAllTypes(selection) {
+                    return selection.filter(selectionPath => {
+                        let type = selectionPath[0].context.layoutItem.type;
+                        return type === 'text-view' ||
+                            type === 'telemetry-view' ||
+                            type === 'box-view' ||
+                            type === 'image-view' ||
+                            type === 'line-view' ||
+                            type === 'subobject-view';
                     });
                 }
 
-                if (!layoutItem) {
-                    return toolbar;
-                }
-
-                let separator = {
-                    control: "separator"
-                };
-                let remove = {
-                    control: "button",
-                    domainObject: selectedParent,
-                    icon: "icon-trash",
-                    title: "Delete the selected object",
-                    method: function () {
-                        let removeItem = selection[1].context.removeItem;
-                        let prompt = openmct.overlays.dialog({
-                            iconClass: 'alert',
-                            message: `Warning! This action will remove this item from the Display Layout. Do you want to continue?`,
-                            buttons: [
+                function getAddButton(selection, selectionPath) {
+                    if (selection.length === 1) {
+                        selectionPath = selectionPath || selection[0];
+                        return {
+                            control: "menu",
+                            domainObject: selectionPath[0].context.item,
+                            method: function (option) {
+                                let name = option.name.toLowerCase();
+                                let form = DIALOG_FORM[name];
+                                if (form) {
+                                    getUserInput(form)
+                                        .then(element => selectionPath[0].context.addElement(name, element));
+                                } else {
+                                    selectionPath[0].context.addElement(name);
+                                }
+                            },
+                            key: "add",
+                            icon: "icon-plus",
+                            label: "Add",
+                            options: [
                                 {
-                                    label: 'Ok',
-                                    emphasis: 'true',
-                                    callback: function () {
-                                        removeItem(layoutItem, selection[0].context.index);
-                                        prompt.dismiss();
-                                    }
+                                    "name": "Box",
+                                    "class": "icon-box-round-corners"
                                 },
                                 {
-                                    label: 'Cancel',
-                                    callback: function () {
-                                        prompt.dismiss();
-                                    }
+                                    "name": "Line",
+                                    "class": "icon-line-horz"
+                                },
+                                {
+                                    "name": "Text",
+                                    "class": "icon-font"
+                                },
+                                {
+                                    "name": "Image",
+                                    "class": "icon-image"
                                 }
                             ]
-                        });
+                        };
                     }
-                };
-                let stackOrder = {
-                    control: "menu",
-                    domainObject: selectedParent,
-                    icon: "icon-layers",
-                    title: "Move the selected object above or below other objects",
-                    options: [
-                        {
-                            name: "Move to Top",
-                            value: "top",
-                            class: "icon-arrow-double-up"
-                        },
-                        {
-                            name: "Move Up",
-                            value: "up",
-                            class: "icon-arrow-up"
-                        },
-                        {
-                            name: "Move Down",
-                            value: "down",
-                            class: "icon-arrow-down"
-                        },
-                        {
-                            name: "Move to Bottom",
-                            value: "bottom",
-                            class: "icon-arrow-double-down"
-                        }
-                    ],
-                    method: function (option) {
-                        selection[1].context.orderItem(option.value, selection[0].context.index);
-                    }
-                };
-                let useGrid = {
-                    control: "toggle-button",
-                    domainObject: selectedParent,
-                    property: function () {
-                        return getPath() + ".useGrid";
-                    },
-                    options: [
-                        {
-                            value: false,
-                            icon: "icon-grid-snap-to",
-                            title: "Grid snapping enabled"
-                        },
-                        {
-                            value: true,
-                            icon: "icon-grid-snap-no",
-                            title: "Grid snapping disabled"
-                        }
-                    ]
-                };
-                let x = {
-                    control: "input",
-                    type: "number",
-                    domainObject: selectedParent,
-                    property: function () {
-                        return getPath() + ".x";
-                    },
-                    label: "X:",
-                    title: "X position"
-                },
-                y = {
-                    control: "input",
-                    type: "number",
-                    domainObject: selectedParent,
-                    property: function () {
-                        return getPath() + ".y";
-                    },
-                    label: "Y:",
-                    title: "Y position",
-                },
-                width = {
-                    control: 'input',
-                    type: 'number',
-                    domainObject: selectedParent,
-                    property: function () {
-                        return getPath() + ".width";
-                    },
-                    label: 'W:',
-                    title: 'Resize object width'
-                },
-                height = {
-                    control: 'input',
-                    type: 'number',
-                    domainObject: selectedParent,
-                    property: function () {
-                        return getPath() + ".height";
-                    },
-                    label: 'H:',
-                    title: 'Resize object height'
-                };
+                }
 
-                if (layoutItem.type === 'subobject-view') {
-                    if (toolbar.length > 0) {
-                        toolbar.push(separator);
-                    }
-
-                    toolbar.push({
+                function getToggleFrameButton(selectedParent, selection) {
+                    return {
                         control: "toggle-button",
                         domainObject: selectedParent,
-                        property: function () {
-                            return getPath() + ".hasFrame";
+                        applicableSelectedItems: selection.filter(selectionPath => 
+                            selectionPath[0].context.layoutItem.type === 'subobject-view'
+                        ),
+                        property: function (selectionPath) {
+                            return getPath(selectionPath) + ".hasFrame";
                         },
                         options: [
                             {
@@ -270,52 +158,186 @@ define([], function () {
                                 title: "Frame hidden"
                             }
                         ]
-                    });
-                    toolbar.push(separator);
-                    toolbar.push(stackOrder);
-                    toolbar.push(x);
-                    toolbar.push(y);
-                    toolbar.push(width);
-                    toolbar.push(height);
-                    toolbar.push(useGrid);
-                    toolbar.push(separator);
-                    toolbar.push(remove);
-                } else {
+                    };
+                }
+
+                function getRemoveButton(selectedParent, selectionPath, selection) {
+                    return {
+                        control: "button",
+                        domainObject: selectedParent,
+                        icon: "icon-trash",
+                        title: "Delete the selected object",
+                        method: function () {
+                            let removeItem = selectionPath[1].context.removeItem;
+                            let prompt = openmct.overlays.dialog({
+                                iconClass: 'alert',
+                                message: `Warning! This action will remove this item from the Display Layout. Do you want to continue?`,
+                                buttons: [
+                                    {
+                                        label: 'Ok',
+                                        emphasis: 'true',
+                                        callback: function () {
+                                            removeItem(getAllTypes(selection));
+                                            prompt.dismiss();
+                                        }
+                                    },
+                                    {
+                                        label: 'Cancel',
+                                        callback: function () {
+                                            prompt.dismiss();
+                                        }
+                                    }
+                                ]
+                            });
+                        }
+                    };
+                }
+
+                function getStackOrder(selectedParent, selectionPath) {
+                    return {
+                        control: "menu",
+                        domainObject: selectedParent,
+                        icon: "icon-layers",
+                        title: "Move the selected object above or below other objects",
+                        options: [
+                            {
+                                name: "Move to Top",
+                                value: "top",
+                                class: "icon-arrow-double-up"
+                            },
+                            {
+                                name: "Move Up",
+                                value: "up",
+                                class: "icon-arrow-up"
+                            },
+                            {
+                                name: "Move Down",
+                                value: "down",
+                                class: "icon-arrow-down"
+                            },
+                            {
+                                name: "Move to Bottom",
+                                value: "bottom",
+                                class: "icon-arrow-double-down"
+                            }
+                        ],
+                        method: function (option) {
+                            selectionPath[1].context.orderItem(option.value, getAllTypes(selection));
+                        }
+                    };
+                }
+
+                function getXInput(selectedParent, selection) {
+                    if (selection.length === 1) {
+                        return {
+                            control: "input",
+                            type: "number",
+                            domainObject: selectedParent,
+                            applicableSelectedItems: getAllTypes(selection),
+                            property: function (selectionPath) {
+                                return getPath(selectionPath) + ".x";
+                            },
+                            label: "X:",
+                            title: "X position"
+                        };
+                    }
+                }
+
+                function getYInput(selectedParent, selection) {
+                    if (selection.length === 1) {
+                        return {
+                            control: "input",
+                            type: "number",
+                            domainObject: selectedParent,
+                            applicableSelectedItems: getAllTypes(selection),
+                            property: function (selectionPath) {
+                                return getPath(selectionPath) + ".y";
+                            },
+                            label: "Y:",
+                            title: "Y position",
+                        };
+                    }
+                }
+
+                function getWidthInput(selectedParent, selection) {
+                    if (selection.length === 1) {
+                        return {
+                            control: 'input',
+                            type: 'number',
+                            domainObject: selectedParent,
+                            applicableSelectedItems: getAllTypes(selection),
+                            property: function (selectionPath) {
+                                return getPath(selectionPath) + ".width";
+                            },
+                            label: 'W:',
+                            title: 'Resize object width'
+                        };
+                    }
+                }
+
+                function getHeightInput(selectedParent, selection) {
+                    if (selection.length === 1) {
+                        return {
+                            control: 'input',
+                            type: 'number',
+                            domainObject: selectedParent,
+                            applicableSelectedItems: getAllTypes(selection),
+                            property: function (selectionPath) {
+                                return getPath(selectionPath) + ".height";
+                            },
+                            label: 'H:',
+                            title: 'Resize object height'
+                        };
+                    }
+                }
+
+                function getX2Input(selectedParent, selection) {
+                    if (selection.length === 1) {
+                        return {
+                            control: "input",
+                            type: "number",
+                            domainObject: selectedParent,
+                            applicableSelectedItems: selection.filter(selectionPath => {
+                                return selectionPath[0].context.layoutItem.type === 'line-view';
+                            }),
+                            property: function (selectionPath) {
+                                return getPath(selectionPath) + ".x2";
+                            },
+                            label: "X2:",
+                            title: "X2 position"
+                        };
+                    }
+                }
+
+                function getY2Input(selectedParent, selection) {
+                    if (selection.length === 1) {
+                        return {
+                            control: "input",
+                            type: "number",
+                            domainObject: selectedParent,
+                            applicableSelectedItems: selection.filter(selectionPath => {
+                                return selectionPath[0].context.layoutItem.type === 'line-view';
+                            }),
+                            property: function (selectionPath) {
+                                return getPath(selectionPath) + ".y2";
+                            },
+                            label: "Y2:",
+                            title: "Y2 position",
+                        };
+                    }
+                }
+
+                function getTextSizeMenu(selectedParent, selection) {
                     const TEXT_SIZE = [8, 9, 10, 11, 12, 13, 14, 15, 16, 20, 24, 30, 36, 48, 72, 96, 128];
-                    let fill = {
-                        control: "color-picker",
-                        domainObject: selectedParent,
-                        property: function () {
-                            return getPath() + ".fill";
-                        },
-                        icon: "icon-paint-bucket",
-                        title: "Set fill color"
-                    },
-                    stroke = {
-                        control: "color-picker",
-                        domainObject: selectedParent,
-                        property: function () {
-                            return getPath() + ".stroke";
-                        },
-                        icon: "icon-line-horz",
-                        title: "Set border color"
-                    },
-                    color = {
-                        control: "color-picker",
-                        domainObject: selectedParent,
-                        property: function () {
-                            return getPath() + ".color";
-                        },
-                        icon: "icon-font",
-                        mandatory: true,
-                        title: "Set text color",
-                        preventNone: true
-                    },
-                    size = {
+                    return {
                         control: "select-menu",
                         domainObject: selectedParent,
-                        property: function () {
-                            return getPath() + ".size";
+                        applicableSelectedItems: selection.filter(selectionPath => {
+                            let type = selectionPath[0].context.layoutItem.type;
+                            return type === 'text-view' || type === 'telemetry-view';
+                        }),
+                        property: function (selectionPath) {
+                            return getPath(selectionPath) + ".size";
                         },
                         title: "Set text size",
                         options: TEXT_SIZE.map(size => {
@@ -324,13 +346,128 @@ define([], function () {
                             };
                         })
                     };
+                }
 
-                    if (layoutItem.type === 'telemetry-view') {
-                        let displayMode = {
+                function getFillMenu(selectedParent, selection) {
+                    return {
+                        control: "color-picker",
+                        domainObject: selectedParent,
+                        applicableSelectedItems: selection.filter(selectionPath => {
+                            let type = selectionPath[0].context.layoutItem.type;
+                            return type === 'text-view' ||
+                                type === 'telemetry-view' ||
+                                type === 'box-view';
+                        }),
+                        property: function (selectionPath) {
+                            return getPath(selectionPath) + ".fill";
+                        },
+                        icon: "icon-paint-bucket",
+                        title: "Set fill color"
+                    };
+                }
+
+                function getStrokeMenu(selectedParent, selection) {
+                    return {
+                        control: "color-picker",
+                        domainObject: selectedParent,
+                        applicableSelectedItems: selection.filter(selectionPath => {
+                            let type = selectionPath[0].context.layoutItem.type;
+                            return type === 'text-view' ||
+                                type === 'telemetry-view' ||
+                                type === 'box-view' ||
+                                type === 'image-view' ||
+                                type === 'line-view';
+                        }),
+                        property: function (selectionPath) {
+                            return getPath(selectionPath) + ".stroke";
+                        },
+                        icon: "icon-line-horz",
+                        title: "Set border color"
+                    };
+                }
+
+                function getTextColorMenu(selectedParent, selection) {
+                    return {
+                        control: "color-picker",
+                        domainObject: selectedParent,
+                        applicableSelectedItems: selection.filter(selectionPath => {
+                            let type = selectionPath[0].context.layoutItem.type;
+                            return type === 'text-view' || type === 'telemetry-view';
+                        }),
+                        property: function (selectionPath) {
+                            return getPath(selectionPath) + ".color";
+                        },
+                        icon: "icon-font",
+                        mandatory: true,
+                        title: "Set text color",
+                        preventNone: true
+                    };
+                }
+
+                function getURLButton(selectedParent, selection) {
+                    return {
+                        control: "button",
+                        domainObject: selectedParent,
+                        applicableSelectedItems: selection.filter(selectionPath => {
+                            return selectionPath[0].context.layoutItem.type === 'image-view';
+                        }),
+                        property: function (selectionPath) {
+                            return getPath(selectionPath);
+                        },
+                        icon: "icon-image",
+                        title: "Edit image properties",
+                        dialog: DIALOG_FORM['image']
+                    };
+                }
+
+                function getTextButton(selectedParent, selection) {
+                        return {
+                            control: "button",
+                            domainObject: selectedParent,
+                            applicableSelectedItems: selection.filter(selectionPath => {
+                                return selectionPath[0].context.layoutItem.type === 'text-view';
+                            }),
+                            property: function (selectionPath) {
+                                return getPath(selectionPath);
+                            },
+                            icon: "icon-gear",
+                            title: "Edit text properties",
+                            dialog: DIALOG_FORM['text']
+                        };
+                }
+
+                function getTelemetryValueMenu(selectionPath, selection) {
+                    if (selection.length === 1) {
+                        return {
+                            control: "select-menu",
+                            domainObject: selectionPath[1].context.item,
+                            applicableSelectedItems: selection.filter(selectionPath => {
+                                return selectionPath[0].context.layoutItem.type === 'telemetry-view';
+                            }),
+                            property: function (selectionPath) {
+                                return getPath(selectionPath) + ".value";
+                            },
+                            title: "Set value",
+                            options: openmct.telemetry.getMetadata(selectionPath[0].context.item).values().map(value => {
+                                return {
+                                    name: value.name,
+                                    value: value.key
+                                }
+                            })
+                        };
+                    }
+                }
+
+                function getDisplayModeMenu(selectedParent, selection) {
+                    if (selection.length === 1) {
+                        return {
                             control: "select-menu",
                             domainObject: selectedParent,
-                            property: function () {
-                                return getPath() + ".displayMode";
+                            applicableSelectedItems: selection.filter(selectionPath => {
+                                return selectionPath[0].context.layoutItem.type === 'telemetry-view';
+                            }),
+                            property: function (selectionPath) {
+                                return getPath(selectionPath) + ".displayMode";
                             },
                             title: "Set display mode",
                             options: [
@@ -347,146 +484,196 @@ define([], function () {
                                     value: "value"
                                 }
                             ]
-                        },
-                        value = {
-                            control: "select-menu",
-                            domainObject: selectedParent,
-                            property: function () {
-                                return getPath() + ".value";
-                            },
-                            title: "Set value",
-                            options: openmct.telemetry.getMetadata(selectedObject).values().map(value => {
-                                return {
-                                    name: value.name,
-                                    value: value.key
-                                }
-                            })
                         };
-                        toolbar = [
-                            displayMode,
-                            separator,
-                            value,
-                            separator,
-                            fill,
-                            stroke,
-                            color,
-                            separator,
-                            size,
-                            separator,
-                            stackOrder,
-                            x,
-                            y,
-                            height,
-                            width,
-                            useGrid,
-                            separator,
-                            remove
-                        ];
-                    } else if (layoutItem.type === 'text-view') {
-                        let text = {
-                            control: "button",
-                            domainObject: selectedParent,
-                            property: function () {
-                                return getPath();
-                            },
-                            icon: "icon-gear",
-                            title: "Edit text properties",
-                            dialog: DIALOG_FORM['text']
-                        };
-                        toolbar = [
-                            fill,
-                            stroke,
-                            separator,
-                            color,
-                            size,
-                            separator,
-                            stackOrder,
-                            x,
-                            y,
-                            height,
-                            width,
-                            useGrid,
-                            separator,
-                            text,
-                            separator,
-                            remove
-                        ];
-                    } else if (layoutItem.type === 'box-view') {
-                        toolbar = [
-                            fill,
-                            stroke,
-                            separator,
-                            stackOrder,
-                            x,
-                            y,
-                            height,
-                            width,
-                            useGrid,
-                            separator,
-                            remove
-                        ];
-                    } else if (layoutItem.type === 'image-view') {
-                        let url = {
-                            control: "button",
-                            domainObject: selectedParent,
-                            property: function () {
-                                return getPath();
-                            },
-                            icon: "icon-image",
-                            title: "Edit image properties",
-                            dialog: DIALOG_FORM['image']
-                        };
-                        toolbar = [
-                            stroke,
-                            separator,
-                            stackOrder,
-                            x,
-                            y,
-                            height,
-                            width,
-                            useGrid,
-                            separator,
-                            url,
-                            separator,
-                            remove
-                        ];
-                    } else if (layoutItem.type === 'line-view') {
-                        let x2 = {
-                            control: "input",
-                            type: "number",
-                            domainObject: selectedParent,
-                            property: function () {
-                                return getPath() + ".x2";
-                            },
-                            label: "X2:",
-                            title: "X2 position"
-                        },
-                        y2 = {
-                            control: "input",
-                            type: "number",
-                            domainObject: selectedParent,
-                            property: function () {
-                                return getPath() + ".y2";
-                            },
-                            label: "Y2:",
-                            title: "Y2 position",
-                        };
-                        toolbar = [
-                            stroke,
-                            separator,
-                            stackOrder,
-                            x,
-                            y,
-                            x2,
-                            y2,
-                            useGrid,
-                            separator,
-                            remove
-                        ];
                     }
                 }
 
-                return toolbar;
+                function getSeparator() {
+                    return {
+                        control: "separator"
+                    };
+                }
+
+                function isMainLayoutSelected(selectionPath) {
+                    let selectedObject = selectionPath[0].context.item;
+                    return selectedObject && selectedObject.type === 'layout' &&
+                        !selectionPath[0].context.layoutItem;
+                }
+
+                if (isMainLayoutSelected(selection[0])) {
+                    return [getAddButton(selection)];
+                }
+
+                let toolbar = {
+                    'add-menu': [],
+                    'toggle-frame': [],
+                    'display-mode': [],
+                    'telemetry-value': [],
+                    'style': [],
+                    'text-style': [],
+                    'position': [],
+                    'text': [],
+                    'url': [],
+                    'remove': [],
+                };
+
+                selection.forEach(selectionPath => {
+                    let selectedParent = selectionPath[1].context.item;
+                    let layoutItem = selectionPath[0].context.layoutItem;
+
+                    if (layoutItem.type === 'subobject-view') {
+                        if (toolbar['add-menu'].length === 0 && selectionPath[0].context.item.type === 'layout') {
+                            toolbar['add-menu'] = [getAddButton(selection, selectionPath)];
+                        }
+                        if (toolbar['toggle-frame'].length === 0) {
+                            toolbar['toggle-frame'] = [getToggleFrameButton(selectedParent, selection)];
+                        }
+                        if (toolbar['position'].length === 0) {
+                            toolbar['position'] = [
+                                getStackOrder(selectedParent, selectionPath),
+                                getXInput(selectedParent, selection),
+                                getYInput(selectedParent, selection),
+                                getHeightInput(selectedParent, selection),
+                                getWidthInput(selectedParent, selection)
+                            ];
+                        }
+                        if (toolbar['remove'].length === 0) {
+                            toolbar['remove'] = [getRemoveButton(selectedParent, selectionPath, selection)];
+                        }
+                    } else if (layoutItem.type === 'telemetry-view') {
+                        if (toolbar['display-mode'].length === 0) {
+                            toolbar['display-mode'] = [getDisplayModeMenu(selectedParent, selection)];
+                        }
+                        if (toolbar['telemetry-value'].length === 0) {
+                            toolbar['telemetry-value'] = [getTelemetryValueMenu(selectionPath, selection)];
+                        }
+                        if (toolbar['style'].length < 2) {
+                            toolbar['style'] = [
+                                getFillMenu(selectedParent, selection),
+                                getStrokeMenu(selectedParent, selection)
+                            ];
+                        }
+                        if (toolbar['text-style'].length === 0) {
+                            toolbar['text-style'] = [
+                                getTextColorMenu(selectedParent, selection),
+                                getTextSizeMenu(selectedParent, selection)
+                            ];
+                        }
+                        if (toolbar['position'].length === 0) {
+                            toolbar['position'] = [
+                                getStackOrder(selectedParent, selectionPath),
+                                getXInput(selectedParent, selection),
+                                getYInput(selectedParent, selection),
+                                getHeightInput(selectedParent, selection),
+                                getWidthInput(selectedParent, selection)
+                            ];
+                        }
+                        if (toolbar['remove'].length === 0) {
+                            toolbar['remove'] = [getRemoveButton(selectedParent, selectionPath, selection)];
+                        }
+                    } else if (layoutItem.type === 'text-view') {
+                        if (toolbar['style'].length < 2) {
+                            toolbar['style'] = [
+                                getFillMenu(selectedParent, selection),
+                                getStrokeMenu(selectedParent, selection)
+                            ];
+                        }
+                        if (toolbar['text-style'].length === 0) {
+                            toolbar['text-style'] = [
+                                getTextColorMenu(selectedParent, selection),
+                                getTextSizeMenu(selectedParent, selection)
+                            ];
+                        }
+                        if (toolbar['position'].length === 0) {
+                            toolbar['position'] = [
+                                getStackOrder(selectedParent, selectionPath),
+                                getXInput(selectedParent, selection),
+                                getYInput(selectedParent, selection),
+                                getHeightInput(selectedParent, selection),
+                                getWidthInput(selectedParent, selection)
+                            ];
+                        }
+                        if (toolbar['text'].length === 0) {
+                            toolbar['text'] = [getTextButton(selectedParent, selection)];
+                        }
+                        if (toolbar['remove'].length === 0) {
+                            toolbar['remove'] = [getRemoveButton(selectedParent, selectionPath, selection)];
+                        }
+                    } else if (layoutItem.type === 'box-view') {
+                        if (toolbar['style'].length < 2) {
+                            toolbar['style'] = [
+                                getFillMenu(selectedParent, selection),
+                                getStrokeMenu(selectedParent, selection)
+                            ];
+                        }
+                        if (toolbar['position'].length === 0) {
+                            toolbar['position'] = [
+                                getStackOrder(selectedParent, selectionPath),
+                                getXInput(selectedParent, selection),
+                                getYInput(selectedParent, selection),
+                                getHeightInput(selectedParent, selection),
+                                getWidthInput(selectedParent, selection)
+                            ];
+                        }
+                        if (toolbar['remove'].length === 0) {
+                            toolbar['remove'] = [getRemoveButton(selectedParent, selectionPath, selection)];
+                        }
+                    } else if (layoutItem.type === 'image-view') {
+                        if (toolbar['style'].length === 0) {
+                            toolbar['style'] = [
+                                getStrokeMenu(selectedParent, selection)
+                            ];
+                        }
+                        if (toolbar['position'].length === 0) {
+                            toolbar['position'] = [
+                                getStackOrder(selectedParent, selectionPath),
+                                getXInput(selectedParent, selection),
+                                getYInput(selectedParent, selection),
+                                getHeightInput(selectedParent, selection),
+                                getWidthInput(selectedParent, selection)
+                            ];
+                        }
+                        if (toolbar['url'].length === 0) {
+                            toolbar['url'] = [getURLButton(selectedParent, selection)];
+                        }
+                        if (toolbar['remove'].length === 0) {
+                            toolbar['remove'] = [getRemoveButton(selectedParent, selectionPath, selection)];
+                        }
+                    } else if (layoutItem.type === 'line-view') {
+                        if (toolbar['style'].length === 0) {
+                            toolbar['style'] = [
+                                getStrokeMenu(selectedParent, selection)
+                            ];
+                        }
+                        if (toolbar['position'].length === 0) {
+                            toolbar['position'] = [
+                                getStackOrder(selectedParent, selectionPath),
+                                getXInput(selectedParent, selection),
+                                getYInput(selectedParent, selection),
+                                getX2Input(selectedParent, selection),
+                                getY2Input(selectedParent, selection)
+                            ];
+                        }
+                        if (toolbar['remove'].length === 0) {
+                            toolbar['remove'] = [getRemoveButton(selectedParent, selectionPath, selection)];
+                        }
+                    }
+                });
+
+                let toolbarArray = Object.values(toolbar);
+                return _.flatten(toolbarArray.reduce((accumulator, group, index) => {
+                    group = group.filter(control => control !== undefined);
+
+                    if (group.length > 0) {
+                        accumulator.push(group);
+
+                        if (index < toolbarArray.length - 1) {
+                            accumulator.push(getSeparator());
+                        }
+                    }
+
+                    return accumulator;
+                }, []));
             }
         }
     }

src/plugins/displayLayout/LayoutDrag.js

@@ -95,7 +95,7 @@ define(
          * @param {number[]} pixelDelta the offset from the
          *        original position, in pixels
          */
-        LayoutDrag.prototype.getAdjustedPosition = function (pixelDelta) {
+        LayoutDrag.prototype.getAdjustedPositionAndDimensions = function (pixelDelta) {
             var gridDelta = toGridDelta(this.gridSize, pixelDelta);
             return {
                 position: max(add(
@@ -109,6 +109,16 @@ define(
             };
         };
 
+        LayoutDrag.prototype.getAdjustedPosition = function (pixelDelta) {
+            var gridDelta = toGridDelta(this.gridSize, pixelDelta);
+            return {
+                position: max(add(
+                    this.rawPosition.position,
+                    multiply(gridDelta, this.posFactor)
+                ), [0, 0])
+            };
+        };
+
         return LayoutDrag;
 
     }

src/plugins/displayLayout/components/BoxView.vue

@@ -23,7 +23,8 @@
 <template>
     <layout-frame :item="item"
                   :grid-size="gridSize"
-                  @endDrag="(item, updates) => $emit('endDrag', item, updates)">
+                  @move="(gridDelta) => $emit('move', gridDelta)"
+                  @endMove="() => $emit('endMove')">
         <div class="c-box-view"
              :style="style">
         </div>
@@ -54,8 +55,7 @@
                 x: 1,
                 y: 1,
                 width: 10, 
-                height: 5,
-                useGrid: true
+                height: 5
             };
         },
         inject: ['openmct'],

src/plugins/displayLayout/components/DisplayLayout.vue

@@ -23,8 +23,11 @@
 <template>
     <div class="l-layout"
          @dragover="handleDragOver"
-         @click="bypassSelection"
-         @drop="handleDrop">
+         @click.capture="bypassSelection"
+         @drop="handleDrop"
+         :class="{
+            'is-multi-selected': selectedLayoutItems.length > 1
+            }">
         <!-- Background grid -->
         <div class="l-layout__grid-holder c-grid">
             <div class="c-grid__x l-grid l-grid-x"
@@ -39,18 +42,38 @@
                    :is="item.type"
                    :item="item"
                    :key="item.id"
-                   :gridSize="item.useGrid ? gridSize : [1, 1]"
+                   :gridSize="gridSize"
                    :initSelect="initSelectIndex === index"
                    :index="index"
-                   @endDrag="endDrag"
-        >
+                   :multiSelect="selectedLayoutItems.length > 1"
+                   @move="move"
+                   @endMove="endMove"
+                   @endLineResize='endLineResize'>
         </component>
+        <edit-marquee v-if='showMarquee'
+                      :gridSize="gridSize"
+                      :selectedLayoutItems="selectedLayoutItems"
+                      @endResize="endResize">
+        </edit-marquee>
     </div>
 </template>
 
 <style lang="scss">
     @import "~styles/sass-base";
 
+    @mixin displayMarquee($c) {
+        > .c-frame-edit {
+            // All other frames
+            //@include test($c, 0.4);
+            display: block;
+        }
+        > .c-frame > .c-frame-edit {
+            // Line object frame
+            //@include test($c, 0.4);
+            display: block;
+        }
+    }
+
     .l-layout {
         @include abs();
         display: flex;
@@ -70,7 +93,7 @@
         .l-shell__main-container {
             &[s-selected],
             &[s-selected-parent] {
-                // Display grid in main layout holder when editing
+                // Display grid and allow edit marquee to display in main layout holder when editing
                 > .l-layout {
                     background: $editUIGridColorBg;
 
@@ -84,7 +107,7 @@
         .l-layout__frame {
             &[s-selected],
             &[s-selected-parent] {
-                // Display grid in nested layouts when editing
+                // Display grid and allow edit marquee to display in nested layouts when editing
                 > * > * > .l-layout {
                     background: $editUIGridColorBg;
                     box-shadow: inset $editUIGridColorFg 0 0 2px 1px;
@@ -95,10 +118,21 @@
                 }
             }
         }
+
+        /*********************** EDIT MARQUEE CONTROL */
+        *[s-selected-parent] {
+            > .l-layout {
+                // When main shell layout is the parent
+                @include displayMarquee(deeppink);
+            }
+            > * > * > * {
+                // When a sub-layout is the parent
+                @include displayMarquee(blue);
+            }
+        }
     }
 </style>
 
-
 <script>
     import uuid from 'uuid';
 
@@ -108,6 +142,7 @@
     import TextView from './TextView.vue'
     import LineView from './LineView.vue'
     import ImageView from './ImageView.vue'
+    import EditMarquee from './EditMarquee.vue'
 
     const ITEM_TYPE_VIEW_MAP = {
         'subobject-view': SubobjectView,
@@ -123,9 +158,11 @@
         down: -1,
         bottom: Number.NEGATIVE_INFINITY
     };
-
     const DRAG_OBJECT_TRANSFER_PREFIX = 'openmct/domain-object/';
 
+    let components = ITEM_TYPE_VIEW_MAP;
+    components['edit-marquee'] = EditMarquee;
+
     function getItemDefinition(itemType, ...options) {
         let itemView = ITEM_TYPE_VIEW_MAP[itemType];
 
@@ -141,7 +178,8 @@
             let domainObject = JSON.parse(JSON.stringify(this.domainObject));
             return {
                 internalDomainObject: domainObject,
-                initSelectIndex: undefined
+                initSelectIndex: undefined,
+                selection: []
             };
         },
         computed: {
@@ -150,82 +188,115 @@
             },
             layoutItems() {
                 return this.internalDomainObject.configuration.items;
+            },
+            selectedLayoutItems() {
+                return this.layoutItems.filter(item => {
+                    return this.itemIsInCurrentSelection(item);
+                });
+            },
+            showMarquee() {
+                let selectionPath = this.selection[0];
+                let singleSelectedLine = this.selection.length === 1 &&
+                    selectionPath[0].context.layoutItem && selectionPath[0].context.layoutItem.type === 'line-view';
+                return selectionPath && selectionPath.length > 1 && !singleSelectedLine;
             }
         },
-        inject: ['openmct'],
+        inject: ['openmct', 'options'],
         props: ['domainObject'],
-        components: ITEM_TYPE_VIEW_MAP,
+        components: components,
         methods: {
             addElement(itemType, element) {
                 this.addItem(itemType + '-view', element);
             },
             setSelection(selection) {
-                if (selection.length === 0) {
-                    return;
-                }
-
-                if (this.removeSelectionListener) {
-                    this.removeSelectionListener();
-                }
-
-                let itemIndex = selection[0].context.index;
-
-                if (itemIndex !== undefined) {
-                    this.attachSelectionListener(itemIndex);
-                }
+                this.selection = selection;
             },
-            attachSelectionListener(index) {
-                let path = `configuration.items[${index}].useGrid`;
-                this.removeSelectionListener = this.openmct.objects.observe(this.internalDomainObject, path, function (value) {
-                    let item = this.layoutItems[index];
-
-                    if (value) {
-                        item.x = Math.round(item.x / this.gridSize[0]);
-                        item.y = Math.round(item.y / this.gridSize[1]);
-                        item.width = Math.round(item.width / this.gridSize[0]);
-                        item.height = Math.round(item.height / this.gridSize[1]);
-
-                        if (item.x2) {
-                            item.x2 = Math.round(item.x2 / this.gridSize[0]);
-                        }
-                        if (item.y2) {
-                            item.y2 = Math.round(item.y2 / this.gridSize[1]);
-                        }
-                    } else {
-                        item.x = this.gridSize[0] * item.x;
-                        item.y = this.gridSize[1] * item.y;
-                        item.width = this.gridSize[0] * item.width;
-                        item.height = this.gridSize[1] * item.height;
-
-                        if (item.x2) {
-                            item.x2 = this.gridSize[0] * item.x2;
-                        }
-                        if (item.y2) {
-                            item.y2 = this.gridSize[1] * item.y2;
-                        }
-                    }
-                    item.useGrid = value;
-                    this.mutate(`configuration.items[${index}]`, item);
-                }.bind(this));
+            itemIsInCurrentSelection(item) {
+                return this.selection.some(selectionPath =>
+                    selectionPath[0].context.layoutItem && selectionPath[0].context.layoutItem.id === item.id);
             },
             bypassSelection($event) {
                 if (this.dragInProgress) {
                     if ($event) {
                         $event.stopImmediatePropagation();
                     }
+                    this.dragInProgress = false;
                     return;
                 }
             },
-            endDrag(item, updates) {
+            endLineResize(item, updates) {
                 this.dragInProgress = true;
-                setTimeout(function () {
-                    this.dragInProgress = false;
-                }.bind(this), 0);
-
                 let index = this.layoutItems.indexOf(item);
                 Object.assign(item, updates);
                 this.mutate(`configuration.items[${index}]`, item);
             },
+            endResize(scaleWidth, scaleHeight, marqueeStart, marqueeOffset) {
+                this.dragInProgress = true;
+                this.layoutItems.forEach(item => {
+                    if (this.itemIsInCurrentSelection(item)) {
+                        let itemXInMarqueeSpace = item.x - marqueeStart.x;
+                        let itemXInMarqueeSpaceAfterScale = Math.round(itemXInMarqueeSpace * scaleWidth);
+                        item.x = itemXInMarqueeSpaceAfterScale + marqueeOffset.x + marqueeStart.x;
+
+                        let itemYInMarqueeSpace = item.y - marqueeStart.y;
+                        let itemYInMarqueeSpaceAfterScale = Math.round(itemYInMarqueeSpace * scaleHeight);
+                        item.y = itemYInMarqueeSpaceAfterScale + marqueeOffset.y + marqueeStart.y;
+
+                        if (item.x2) {
+                            let itemX2InMarqueeSpace = item.x2 - marqueeStart.x;
+                            let itemX2InMarqueeSpaceAfterScale = Math.round(itemX2InMarqueeSpace * scaleWidth);
+                            item.x2 = itemX2InMarqueeSpaceAfterScale + marqueeOffset.x + marqueeStart.x;
+                        } else {
+                            item.width = Math.round(item.width * scaleWidth);
+                        }
+
+                        if (item.y2) {
+                            let itemY2InMarqueeSpace = item.y2 - marqueeStart.y;
+                            let itemY2InMarqueeSpaceAfterScale = Math.round(itemY2InMarqueeSpace * scaleHeight);
+                            item.y2 = itemY2InMarqueeSpaceAfterScale + marqueeOffset.y + marqueeStart.y;
+                        } else {
+                            item.height = Math.round(item.height * scaleHeight);
+                        }
+                    }
+                });
+                this.mutate("configuration.items", this.layoutItems);
+            },
+            move(gridDelta) {
+                this.dragInProgress = true;
+
+                if (!this.initialPositions) {
+                    this.initialPositions = {};
+                    _.cloneDeep(this.selectedLayoutItems).forEach(selectedItem => {
+                        if (selectedItem.type === 'line-view') {
+                            this.initialPositions[selectedItem.id] = [selectedItem.x, selectedItem.y, selectedItem.x2, selectedItem.y2];
+                        } else {
+                            this.initialPositions[selectedItem.id] = [selectedItem.x, selectedItem.y];
+                        }
+                    });
+                }
+
+                let layoutItems = this.layoutItems.map(item => {
+                    if (this.initialPositions[item.id]) {
+                        let startingPosition = this.initialPositions[item.id];
+                        let [startingX, startingY, startingX2, startingY2] = startingPosition;
+                        item.x = startingX + gridDelta[0];
+                        item.y = startingY + gridDelta[1];
+
+                        if (item.x2) {
+                            item.x2 = startingX2 + gridDelta[0];
+                        }
+
+                        if (item.y2) {
+                            item.y2 = startingY2 + gridDelta[1];
+                        }
+                    }
+                    return item;
+                });
+            },
+            endMove() {
+                this.mutate('configuration.items', this.layoutItems);
+                this.initialPositions = undefined;
+            },
             mutate(path, value) {
                 this.openmct.objects.mutate(this.internalDomainObject, path, value);
             },
@@ -283,9 +354,8 @@
                 }
             },
             isTelemetry(domainObject) {
-                if (this.openmct.telemetry.isTelemetryObject(domainObject)
-                    && domainObject.type !== 'summary-widget'
-                    && domainObject.type !== 'example.imagery') {
+                if (this.openmct.telemetry.isTelemetryObject(domainObject) && 
+                    !this.options.showAsView.includes(domainObject.type)) {
                     return true;
                 } else {
                     return false;
@@ -314,11 +384,15 @@
                     this.objectViewMap[keyString] = true;
                 }
             },
-            removeItem(item, index) {
+            removeItem(selectedItems) {
+                let indices = [];
                 this.initSelectIndex = -1;
-                this.layoutItems.splice(index, 1);
+                selectedItems.forEach(selectedItem => {
+                    indices.push(selectedItem[0].context.index);
+                    this.untrackItem(selectedItem[0].context.layoutItem);
+                });
+                _.pullAt(this.layoutItems, indices);
                 this.mutate("configuration.items", this.layoutItems);
-                this.untrackItem(item);
                 this.$el.click();
             },
             untrackItem(item) {
@@ -384,20 +458,74 @@
                 this.mutate("configuration.items", layoutItems);
                 this.$el.click();
             },
-            orderItem(position, index) {
+            orderItem(position, selectedItems) {
                 let delta = ORDERS[position];
-                let newIndex = Math.max(Math.min(index + delta, this.layoutItems.length - 1), 0);
-                let item = this.layoutItems[index];
+                let indices = [];
+                let newIndex = -1;
+                let items = [];
 
-                if (newIndex !== index) {
-                    this.layoutItems.splice(index, 1);
-                    this.layoutItems.splice(newIndex, 0, item);
-                    this.mutate('configuration.items', this.layoutItems);
+                Object.assign(items, this.layoutItems);
+                this.selectedLayoutItems.forEach(selectedItem => {
+                    indices.push(this.layoutItems.indexOf(selectedItem));
+                });
+                indices.sort((a, b) => a - b);
 
-                    if (this.removeSelectionListener) {
-                        this.removeSelectionListener();
-                        this.attachSelectionListener(newIndex);
+                if (position === 'top' || position === 'up') {
+                    indices.reverse();
+                }
+
+                if (position === 'top' || position === 'bottom') {
+                    this.moveToTopOrBottom(position, indices, items, delta);
+                } else {
+                    this.moveUpOrDown(position, indices, items, delta);
+                }
+
+                this.mutate('configuration.items', this.layoutItems);
+            },
+            moveUpOrDown(position, indices, items, delta) {
+                let previousItemIndex = -1;
+                let newIndex = -1;
+
+                indices.forEach((itemIndex, index) => {
+                    let isAdjacentItemSelected = position === 'up' ?
+                        itemIndex + 1 === previousItemIndex :
+                        itemIndex - 1 === previousItemIndex;
+
+                    if (index > 0 && isAdjacentItemSelected) {
+                        if (position === 'up') {
+                            newIndex -= 1;
+                        } else {
+                            newIndex += 1;
+                        }
+                    } else {
+                        newIndex = Math.max(Math.min(itemIndex + delta, this.layoutItems.length - 1), 0);
                     }
+
+                    previousItemIndex = itemIndex;
+                    this.updateItemOrder(newIndex, itemIndex, items);
+                });
+            },
+            moveToTopOrBottom(position, indices, items, delta) {
+                let newIndex = -1;
+
+                indices.forEach((itemIndex, index) => {
+                    if (index === 0) {
+                        newIndex = Math.max(Math.min(itemIndex + delta, this.layoutItems.length - 1), 0);
+                    } else {
+                        if (position === 'top') {
+                            newIndex -= 1;
+                        } else {
+                            newIndex += 1;
+                        }
+                    }
+
+                    this.updateItemOrder(newIndex, itemIndex, items);
+                });
+            },
+            updateItemOrder(newIndex, itemIndex, items) {
+                if (newIndex !== itemIndex) {
+                    this.layoutItems.splice(itemIndex, 1);
+                    this.layoutItems.splice(newIndex, 0, items[itemIndex]);
                 }
             }
         },
@@ -413,14 +541,10 @@
             this.composition.load();
         },
         destroyed: function () {
-            this.openmct.off('change', this.setSelection);
+            this.openmct.selection.off('change', this.setSelection);
             this.composition.off('add', this.addChild);
             this.composition.off('remove', this.removeChild);
             this.unlisten();
-
-            if (this.removeSelectionListener) {
-                this.removeSelectionListener();
-            }
         }
     }
 </script>

src/plugins/displayLayout/components/EditMarquee.vue

@@ -0,0 +1,233 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2018, 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.
+ *****************************************************************************/
+
+<template>
+        <!-- Resize handles -->
+        <div class="c-frame-edit" :style="style">
+            <div class="c-frame-edit__handle c-frame-edit__handle--nw"
+                 @mousedown="startResize([1,1], [-1,-1], $event)"></div>
+            <div class="c-frame-edit__handle c-frame-edit__handle--ne"
+                 @mousedown="startResize([0,1], [1,-1], $event)"></div>
+            <div class="c-frame-edit__handle c-frame-edit__handle--sw"
+                 @mousedown="startResize([1,0], [-1,1], $event)"></div>
+            <div class="c-frame-edit__handle c-frame-edit__handle--se"
+                 @mousedown="startResize([0,0], [1,1], $event)"></div>
+        </div>
+</template>
+
+<style lang="scss">
+    @import "~styles/sass-base";
+
+    .c-frame-edit {
+        // In Layouts, this is the editing rect and handles
+        display: none; // Set to display: block in DisplayLayout.vue
+        pointer-events: none;
+        @include abs();
+        border: $editMarqueeBorder;
+
+        &__handle {
+            $d: 6px;
+            $o: floor($d * -0.5);
+            background: $editFrameColorHandleFg;
+            box-shadow: $editFrameColorHandleBg 0 0 0 2px;
+            pointer-events: all;
+            position: absolute;
+            width: $d; height: $d;
+            top: auto; right: auto; bottom: auto; left: auto;
+
+            &:before {
+                // Extended hit area
+                @include abs(-10px);
+                content: '';
+                display: block;
+                z-index: 0;
+            }
+
+            &:hover {
+                background: $editUIColor;
+            }
+
+            &--nwse {
+                cursor: nwse-resize;
+            }
+
+            &--nw {
+                cursor: nw-resize;
+                left: $o; top: $o;
+            }
+
+            &--ne {
+                cursor: ne-resize;
+                right: $o; top: $o;
+            }
+
+            &--se {
+                cursor: se-resize;
+                right: $o; bottom: $o;
+            }
+
+            &--sw {
+                cursor: sw-resize;
+                left: $o; bottom: $o;
+            }
+        }
+    }
+</style>
+
+
+<script>
+    import LayoutDrag from './../LayoutDrag'
+
+    export default {
+        inject: ['openmct'],
+        props: {
+            selectedLayoutItems: Array,
+            gridSize: Array
+        },        
+        data() {
+            return {
+                dragPosition: undefined
+            }
+        },
+        computed: {
+            style() {
+                let x = Number.POSITIVE_INFINITY;
+                let y = Number.POSITIVE_INFINITY;
+                let width = Number.NEGATIVE_INFINITY;
+                let height = Number.NEGATIVE_INFINITY;
+
+                this.selectedLayoutItems.forEach(item => {
+                    if (item.x2) {
+                        let lineWidth = Math.abs(item.x - item.x2);
+                        let lineMinX = Math.min(item.x, item.x2);
+                        x = Math.min(lineMinX, x);
+                        width = Math.max(lineWidth + lineMinX, width);
+                    } else {
+                        x = Math.min(item.x, x);
+                        width = Math.max(item.width + item.x, width);
+                    }
+
+                    if (item.y2) {
+                        let lineHeight = Math.abs(item.y - item.y2);
+                        let lineMinY = Math.min(item.y, item.y2);
+                        y = Math.min(lineMinY, y);
+                        height = Math.max(lineHeight + lineMinY, height);
+                    } else {
+                        y = Math.min(item.y, y);
+                        height = Math.max(item.height + item.y, height);
+                    }
+                });
+
+                if (this.dragPosition) {
+                    [x, y] = this.dragPosition.position;
+                    [width, height] = this.dragPosition.dimensions;
+                } else {
+                    width = width - x;
+                    height = height - y;
+                }
+
+                this.marqueePosition = {
+                    x: x,
+                    y: y,
+                    width: width,
+                    height: height
+                }
+                return this.getMarqueeStyle(x, y, width, height);
+            }
+        },
+        methods: {
+            getMarqueeStyle(x, y, width, height) {
+                return {
+                    left: (this.gridSize[0] * x) + 'px',
+                    top: (this.gridSize[1] * y) + 'px',
+                    width: (this.gridSize[0] * width) + 'px',
+                    height: (this.gridSize[1] * height) + 'px'
+                };
+            },
+            updatePosition(event) {
+                let currentPosition = [event.pageX, event.pageY];
+                this.initialPosition = this.initialPosition || currentPosition;
+                this.delta = currentPosition.map(function (value, index) {
+                    return value - this.initialPosition[index];
+                }.bind(this));
+            },
+            startResize(posFactor, dimFactor, event) {
+                document.body.addEventListener('mousemove', this.continueResize);
+                document.body.addEventListener('mouseup', this.endResize);
+                this.marqueeStartPosition = {
+                    position: [this.marqueePosition.x, this.marqueePosition.y],
+                    dimensions: [this.marqueePosition.width, this.marqueePosition.height]
+                };
+                this.updatePosition(event);
+                this.activeDrag = new LayoutDrag(this.marqueeStartPosition, posFactor, dimFactor, this.gridSize);
+                event.preventDefault();
+            },
+            continueResize(event) {
+                event.preventDefault();
+                this.updatePosition(event);
+                this.dragPosition = this.activeDrag.getAdjustedPositionAndDimensions(this.delta);
+            },
+            endResize(event) {
+                document.body.removeEventListener('mousemove', this.continueResize);
+                document.body.removeEventListener('mouseup', this.endResize);
+                this.continueResize(event);
+
+                let marqueeStartWidth = this.marqueeStartPosition.dimensions[0];
+                let marqueeStartHeight = this.marqueeStartPosition.dimensions[1];
+                let marqueeStartX = this.marqueeStartPosition.position[0];
+                let marqueeStartY = this.marqueeStartPosition.position[1];
+
+                let marqueeEndX = this.dragPosition.position[0];
+                let marqueeEndY = this.dragPosition.position[1];
+                let marqueeEndWidth = this.dragPosition.dimensions[0];
+                let marqueeEndHeight = this.dragPosition.dimensions[1];
+
+                let scaleWidth =  marqueeEndWidth / marqueeStartWidth;
+                let scaleHeight =  marqueeEndHeight / marqueeStartHeight;
+
+                let marqueeStart = {
+                    x: marqueeStartX,
+                    y: marqueeStartY,
+                    height: marqueeStartWidth,
+                    width: marqueeStartHeight
+                };
+                let marqueeEnd = {
+                    x: marqueeEndX,
+                    y: marqueeEndY,
+                    width: marqueeEndWidth,
+                    height: marqueeEndHeight
+                };
+                let marqueeOffset = {
+                    x: marqueeEnd.x - marqueeStart.x,
+                    y: marqueeEnd.y - marqueeStart.y
+                };
+
+                this.$emit('endResize', scaleWidth, scaleHeight, marqueeStart, marqueeOffset);
+                this.dragPosition = undefined;
+                this.initialPosition = undefined;
+                this.marqueeStartPosition = undefined;
+                this.delta = undefined;
+                event.preventDefault();
+            }
+        }
+    }
+</script>

src/plugins/displayLayout/components/ImageView.vue

@@ -23,7 +23,8 @@
 <template>
     <layout-frame :item="item"
                   :grid-size="gridSize"
-                  @endDrag="(item, updates) => $emit('endDrag', item, updates)">
+                  @move="(gridDelta) => $emit('move', gridDelta)"
+                  @endMove="() => $emit('endMove')">
         <div class="c-image-view"
              :style="style">
         </div>
@@ -56,8 +57,7 @@
                 y: 1,
                 width: 10,
                 height: 5,
-                url: element.url,
-                useGrid: true
+                url: element.url
             };
         },
         inject: ['openmct'],

src/plugins/displayLayout/components/LayoutFrame.vue

@@ -24,25 +24,14 @@
     <div class="l-layout__frame c-frame"
          :class="{
              'no-frame': !item.hasFrame,
-             'u-inspectable': inspectable,
-             'is-resizing': isResizing
+             'u-inspectable': inspectable
          }"
          :style="style">
 
         <slot></slot>
 
-        <!-- Drag handles -->
-        <div class="c-frame-edit">
-            <div class="c-frame-edit__move"
-                 @mousedown="startDrag([1,1], [0,0], $event, 'move')"></div>
-            <div class="c-frame-edit__handle c-frame-edit__handle--nw"
-                 @mousedown="startDrag([1,1], [-1,-1], $event, 'resize')"></div>
-            <div class="c-frame-edit__handle c-frame-edit__handle--ne"
-                 @mousedown="startDrag([0,1], [1,-1], $event, 'resize')"></div>
-            <div class="c-frame-edit__handle c-frame-edit__handle--sw"
-                 @mousedown="startDrag([1,0], [-1,1], $event, 'resize')"></div>
-            <div class="c-frame-edit__handle c-frame-edit__handle--se"
-                 @mousedown="startDrag([0,0], [1,1], $event, 'resize')"></div>
+        <div class="c-frame-edit__move"
+             @mousedown="startMove([1,1], [0,0], $event)">
         </div>
     </div>
 </template>
@@ -50,7 +39,7 @@
 <style lang="scss">
     @import "~styles/sass-base";
 
-    /******************************* FRAME */
+    /******************* FRAME */
     .c-frame {
         display: flex;
         flex-direction: column;
@@ -59,124 +48,15 @@
         > *:first-child {
             flex: 1 1 auto;
         }
-
-        &:not(.no-frame) {
-            background: $colorBodyBg;
-            border: $browseFrameBorder;
-            padding: $interiorMargin;
-        }
-
     }
 
-    .c-frame-edit {
-        // In Layouts, this is the editing rect and handles
-        // In Fixed Position, this is a wrapper element
-        @include abs();
+    .c-frame-edit__move {
         display: none;
-
-        &__move {
-            @include abs();
-            cursor: move;
-        }
-
-        &__handle {
-            $d: 6px;
-            $o: floor($d * -0.5);
-            background: $editFrameColorHandleFg;
-            box-shadow: $editFrameColorHandleBg 0 0 0 2px;
-            display: none; // Set to block via s-selected selector
-            position: absolute;
-            width: $d; height: $d;
-            top: auto; right: auto; bottom: auto; left: auto;
-
-            &:before {
-                // Extended hit area
-                @include abs(-10px);
-                content: '';
-                display: block;
-                z-index: 0;
-            }
-
-            &:hover {
-                background: $editUIColor;
-            }
-
-            &--nwse {
-                cursor: nwse-resize;
-            }
-
-            &--nw {
-                cursor: nw-resize;
-                left: $o; top: $o;
-            }
-
-            &--ne {
-                cursor: ne-resize;
-                right: $o; top: $o;
-            }
-
-            &--se {
-                cursor: se-resize;
-                right: $o; bottom: $o;
-            }
-
-            &--sw {
-                cursor: sw-resize;
-                left: $o; bottom: $o;
-            }
-        }
-    }
-
-    .c-so-view.has-complex-content + .c-frame-edit {
-        // Target frames that hold domain objects that include header elements, as opposed to drawing and alpha objects
-        // Make the __move element a more affordable drag UI element
-        .c-frame-edit__move {
-            @include userSelectNone();
-            background: $editFrameMovebarColorBg;
-            box-shadow: rgba(black, 0.2) 0 1px;
-            bottom: auto;
-            height: 0; // Height is set on hover on s-selected.c-frame
-            opacity: 0.8;
-            max-height: 100%;
-            overflow: hidden;
-            text-align: center;
-
-            &:before {
-                // Grippy
-                $h: 4px;
-                $tbOffset: ($editFrameMovebarH - $h) / 2;
-                $lrOffset: 25%;
-                @include grippy($editFrameMovebarColorFg);
-                content: '';
-                display: block;
-                position: absolute;
-                top: $tbOffset; right: $lrOffset; bottom: $tbOffset; left: $lrOffset;
-            }
-
-            &:hover {
-                background: $editFrameHovMovebarColorBg;
-                &:before { @include grippy($editFrameHovMovebarColorFg); }
-            }
-        }
     }
 
     .is-editing {
+        /******************* STYLES FOR C-FRAME WHILE EDITING */
         .c-frame {
-            $moveBarOutDelay: 500ms;
-            &.no-frame {
-                border: $editFrameBorder; // Base border style for a frame element while editing.
-            }
-
-            &-edit {
-                display: contents;
-            }
-
-            &-edit__move,
-            .c-so-view {
-                transition: $transOut;
-                transition-delay: $moveBarOutDelay;
-            }
-
             &:not([s-selected]) {
                 &:hover {
                     border: $editFrameBorderHov;
@@ -188,37 +68,110 @@
                 border: $editFrameSelectedBorder;
                 box-shadow: $editFrameSelectedShdw;
 
-                > .c-frame-edit {
-                    [class*='__handle'] {
+                .c-frame-edit__move {
+                    cursor: move;
+                }
+            }
+        }
+
+        /******************* DEFAULT STYLES FOR -EDIT__MOVE */
+        // All object types
+        .c-frame-edit__move {
+            @include abs();
+            display: block;
+        }
+
+        // Has-complex-content objects
+        .c-so-view.has-complex-content {
+            transition: $transOut;
+            transition-delay: $moveBarOutDelay;
+
+            > .c-so-view__local-controls {
+                transition: transform 250ms ease-in-out;
+                transition-delay: $moveBarOutDelay;
+            }
+
+            + .c-frame-edit__move {
+                display: none;
+            }
+
+        }
+
+        .l-layout {
+            /******************* 0 - 1 ITEM SELECTED */
+            &:not(.is-multi-selected) {
+                > .l-layout__frame[s-selected] {
+                    > .c-so-view.has-complex-content {
+                        > .c-so-view__local-controls {
+                            transition: transform $transOutTime ease-in-out;
+                            transition-delay: $moveBarOutDelay;
+                        }
+
+                        + .c-frame-edit__move {
+                            transition: $transOut;
+                            transition-delay: $moveBarOutDelay;
+                            @include userSelectNone();
+                            background: $editFrameMovebarColorBg;
+                            box-shadow: rgba(black, 0.2) 0 1px;
+                            bottom: auto;
+                            display: block;
+                            height: 0; // Height is set on hover below
+                            opacity: 0.8;
+                            max-height: 100%;
+                            overflow: hidden;
+                            text-align: center;
+
+                            &:before {
+                                // Grippy
+                                $h: 4px;
+                                $tbOffset: ($editFrameMovebarH - $h) / 2;
+                                $lrOffset: 25%;
+                                @include grippy($editFrameMovebarColorFg);
+                                content: '';
+                                display: block;
+                                position: absolute;
+                                top: $tbOffset;
+                                right: $lrOffset;
+                                bottom: $tbOffset;
+                                left: $lrOffset;
+                            }
+                        }
+                    }
+
+                    &:hover {
+                        > .c-so-view.has-complex-content {
+                            transition: $transIn;
+                            transition-delay: 0s;
+                            padding-top: $editFrameMovebarH + $interiorMarginSm;
+
+                            > .c-so-view__local-controls {
+                                transform: translateY($editFrameMovebarH);
+                                transition: transform $transInTime ease-in-out;
+                                transition-delay: 0s;
+                            }
+
+                            + .c-frame-edit__move {
+                                transition: $transIn;
+                                transition-delay: 0s;
+                                height: $editFrameMovebarH;
+                            }
+                        }
+                    }
+                }
+            }
+
+            /******************* > 1 ITEMS SELECTED */
+            &.is-multi-selected {
+                .l-layout__frame[s-selected] {
+                    > .c-so-view.has-complex-content + .c-frame-edit__move {
                         display: block;
                     }
                 }
             }
         }
-
-        .l-layout__frame:not(.is-resizing) {
-            // Show and animate the __move bar for sub-object views with complex content
-            &:hover > .c-so-view.has-complex-content {
-                // Move content down so the __move bar doesn't cover it.
-                padding-top: $editFrameMovebarH;
-                transition: $transIn;
-
-                &.c-so-view--no-frame {
-                    // Move content down with a bit more space
-                    padding-top: $editFrameMovebarH + $interiorMarginSm;
-                }
-
-                // Show the move bar
-                + .c-frame-edit .c-frame-edit__move {
-                    height: $editFrameMovebarH;
-                    transition: $transIn;
-                }
-            }
-        }
     }
 </style>
 
-
 <script>
     import LayoutDrag from './../LayoutDrag'
 
@@ -228,21 +181,9 @@
             item: Object,
             gridSize: Array
         },
-        data() {
-            return {
-                dragPosition: undefined,
-                isResizing: undefined
-            }
-        },
         computed: {
             style() {
                 let {x, y, width, height} = this.item;
-
-                if (this.dragPosition) {
-                    [x, y] = this.dragPosition.position;
-                    [width, height] = this.dragPosition.dimensions;
-                }
-
                 return {
                     left: (this.gridSize[0] * x) + 'px',
                     top: (this.gridSize[1] * y) + 'px',
@@ -264,36 +205,40 @@
                     return value - this.initialPosition[index];
                 }.bind(this));
             },
-            startDrag(posFactor, dimFactor, event, type) {
-                document.body.addEventListener('mousemove', this.continueDrag);
-                document.body.addEventListener('mouseup', this.endDrag);
-
+            startMove(posFactor, dimFactor, event) {
+                document.body.addEventListener('mousemove', this.continueMove);
+                document.body.addEventListener('mouseup', this.endMove);
                 this.dragPosition = {
-                    position: [this.item.x, this.item.y],
-                    dimensions: [this.item.width, this.item.height]
+                    position: [this.item.x, this.item.y]
                 };
                 this.updatePosition(event);
                 this.activeDrag = new LayoutDrag(this.dragPosition, posFactor, dimFactor, this.gridSize);
-                this.isResizing = type === 'resize';
                 event.preventDefault();
             },
-            continueDrag(event) {
+            continueMove(event) {
                 event.preventDefault();
                 this.updatePosition(event);
-                this.dragPosition = this.activeDrag.getAdjustedPosition(this.delta);
+                let newPosition = this.activeDrag.getAdjustedPosition(this.delta);
+
+                if (!_.isEqual(newPosition, this.dragPosition)) {
+                    this.dragPosition = newPosition;
+                    this.$emit('move', this.toGridDelta(this.delta));
+                }
             },
-            endDrag(event) {
-                document.body.removeEventListener('mousemove', this.continueDrag);
-                document.body.removeEventListener('mouseup', this.endDrag);
-                this.continueDrag(event);
-                let [x, y] = this.dragPosition.position;
-                let [width, height] = this.dragPosition.dimensions;
-                this.$emit('endDrag', this.item, {x, y, width, height});
+            endMove(event) {
+                document.body.removeEventListener('mousemove', this.continueMove);
+                document.body.removeEventListener('mouseup', this.endMove);
+                this.continueMove(event);
+                this.$emit('endMove');
                 this.dragPosition = undefined;
                 this.initialPosition = undefined;
                 this.delta = undefined;
-                this.isResizing = undefined;
                 event.preventDefault();
+            },
+            toGridDelta(pixelDelta) {
+                return pixelDelta.map((v, i) => {
+                    return Math.round(v / this.gridSize[i]);
+                });
             }
         }
     }

src/plugins/displayLayout/components/LineView.vue

@@ -30,9 +30,9 @@
             </line>
         </svg>
 
-        <div class="c-frame-edit">
-            <div class="c-frame-edit__move"
-                 @mousedown="startDrag($event)"></div>
+        <div class="c-frame-edit__move"
+             @mousedown="startDrag($event)"></div>
+        <div class="c-frame-edit" v-if="showFrameEdit">
             <div class="c-frame-edit__handle"
                  :class="startHandleClass"
                  @mousedown="startDrag($event, 'start')"></div>
@@ -66,8 +66,7 @@
                 y: 10,
                 x2: 10,
                 y2: 5,
-                stroke: '#717171',
-                useGrid: true
+                stroke: '#717171'
             };
         },
         inject: ['openmct'],
@@ -76,24 +75,31 @@
             gridSize: Array,
             initSelect: Boolean,
             index: Number,
+            multiSelect: Boolean
         },
         data() {
             return {
-                dragPosition: undefined
+                dragPosition: undefined,
+                dragging: undefined,
+                selection: []
             };
         },
         computed: {
+            showFrameEdit() {
+                let layoutItem = this.selection.length > 0 && this.selection[0][0].context.layoutItem;
+                return !this.multiSelect && layoutItem && layoutItem.id === this.item.id;
+            },
             position() {
                 let {x, y, x2, y2} = this.item;
-                if (this.dragPosition) {
+                if (this.dragging && this.dragPosition) {
                     ({x, y, x2, y2} = this.dragPosition);
                 }
                 return {x, y, x2, y2};
             },
             style() {
                 let {x, y, x2, y2} = this.position;
-                let width = this.gridSize[0] * Math.abs(x - x2);
-                let height = this.gridSize[1] * Math.abs(y - y2);
+                let width = Math.max(this.gridSize[0] * Math.abs(x - x2), 1);
+                let height = Math.max(this.gridSize[1] * Math.abs(y - y2), 1);
                 let left = this.gridSize[0] * Math.min(x, x2);
                 let top = this.gridSize[1] * Math.min(y, y2);
                 return {
@@ -175,13 +181,27 @@
                 event.preventDefault();
                 let pxDeltaX = this.startPosition[0] - event.pageX;
                 let pxDeltaY = this.startPosition[1] - event.pageY;
-                this.dragPosition = this.calculateDragPosition(pxDeltaX, pxDeltaY);
+                let newPosition = this.calculateDragPosition(pxDeltaX, pxDeltaY);
+
+                if (!this.dragging) {
+                    if (!_.isEqual(newPosition, this.dragPosition)) {
+                        let gridDelta = [event.pageX - this.startPosition[0], event.pageY - this.startPosition[1]];
+                        this.dragPosition = newPosition;
+                        this.$emit('move', this.toGridDelta(gridDelta));
+                    }
+                } else {
+                    this.dragPosition = newPosition;
+                }
             },
             endDrag(event) {
                 document.body.removeEventListener('mousemove', this.continueDrag);
                 document.body.removeEventListener('mouseup', this.endDrag);
                 let {x, y, x2, y2} = this.dragPosition;
-                this.$emit('endDrag', this.item, {x, y, x2, y2});
+                if (!this.dragging) {
+                    this.$emit('endMove');
+                } else {
+                    this.$emit('endLineResize', this.item, {x, y, x2, y2});
+                }
                 this.dragPosition = undefined;
                 this.dragging = undefined;
                 event.preventDefault();
@@ -191,6 +211,7 @@
                 let gridDeltaY = Math.round(pxDeltaY / this.gridSize[0]); // TODO: should this be gridSize[1]?
                 let {x, y, x2, y2} = this.item;
                 let dragPosition = {x, y, x2, y2};
+
                 if (this.dragging === 'start') {
                     dragPosition.x -= gridDeltaX;
                     dragPosition.y -= gridDeltaY;
@@ -205,6 +226,14 @@
                     dragPosition.y2 -= gridDeltaY;
                 }
                 return dragPosition;
+            },
+            setSelection(selection) {
+                this.selection = selection;
+            },
+            toGridDelta(pixelDelta) {
+                return pixelDelta.map((v, i) => {
+                    return Math.round(v / this.gridSize[i]);
+                });
             }
         },
         watch: {
@@ -217,6 +246,7 @@
             }
         },
         mounted() {
+            this.openmct.selection.on('change', this.setSelection);
             this.context = {
                 layoutItem: this.item,
                 index: this.index
@@ -228,6 +258,7 @@
             if (this.removeSelectable) {
                 this.removeSelectable();
             }
+            this.openmct.selection.off('change', this.setSelection);
         }
     }
  </script>

src/plugins/displayLayout/components/SubobjectView.vue

@@ -22,11 +22,13 @@
 <template>
     <layout-frame :item="item"
                   :grid-size="gridSize"
-                  @endDrag="(item, updates) => $emit('endDrag', item, updates)">
+                  @move="(gridDelta) => $emit('move', gridDelta)"
+                  @endMove="() => $emit('endMove')">
         <object-frame v-if="domainObject"
                       :domain-object="domainObject"
                       :object-path="objectPath"
                       :has-frame="item.hasFrame"
+                      :show-edit-view="false"
                       ref="objectFrame">
         </object-frame>
     </layout-frame>
@@ -65,8 +67,7 @@
                 x: position[0],
                 y: position[1],
                 identifier: domainObject.identifier,
-                hasFrame: hasFrameByDefault(domainObject.type),
-                useGrid: true
+                hasFrame: hasFrameByDefault(domainObject.type)
             };
         },
         inject: ['openmct'],

src/plugins/displayLayout/components/TelemetryView.vue

@@ -23,7 +23,8 @@
  <template>
      <layout-frame :item="item"
                    :grid-size="gridSize"
-                   @endDrag="(item, updates) => $emit('endDrag', item, updates)">
+                   @move="(gridDelta) => $emit('move', gridDelta)"
+                   @endMove="() => $emit('endMove')">
         <div class="c-telemetry-view"
              :style="styleObject"
              v-if="domainObject">
@@ -96,10 +97,9 @@
                 displayMode: 'all',
                 value: metadata.getDefaultDisplayValue(),
                 stroke: "transparent",
-                fill: "",
+                fill: "transparent",
                 color: "",
-                size: "13px",
-                useGrid: true
+                size: "13px"
             };
         },
         inject: ['openmct'],

src/plugins/displayLayout/components/TextView.vue

@@ -23,7 +23,8 @@
  <template>
     <layout-frame :item="item"
                   :grid-size="gridSize"
-                  @endDrag="(item, updates) => $emit('endDrag', item, updates)">
+                  @move="(gridDelta) => $emit('move', gridDelta)"
+                  @endMove="() => $emit('endMove')">
         <div class="c-text-view"
              :style="style">
             {{ item.text }}
@@ -59,8 +60,7 @@
                 y: 1,
                 width: 10,
                 height: 5,
-                text: element.text,
-                useGrid: true
+                text: element.text
             };
         },
         inject: ['openmct'],

src/plugins/displayLayout/plugin.js

@@ -25,8 +25,7 @@ import Vue from 'vue'
 import objectUtils from '../../api/objects/object-utils.js'
 import DisplayLayoutType from './DisplayLayoutType.js'
 import DisplayLayoutToolbar from './DisplayLayoutToolbar.js'
-
-export default function () {
+export default function DisplayLayoutPlugin(options) {
     return function (openmct) {
         openmct.objectViews.addProvider({
             key: 'layout.view',
@@ -47,7 +46,8 @@ export default function () {
                             template: '<layout ref="displayLayout" :domain-object="domainObject"></layout>',
                             provide: {
                                 openmct,
-                                objectUtils
+                                objectUtils,
+                                options
                             },
                             el: container,
                             data () {
@@ -60,6 +60,7 @@ export default function () {
                     getSelectionContext() {
                         return {
                             item: domainObject,
+                            supportsMultiSelect: true,
                             addElement: component && component.$refs.displayLayout.addElement,
                             removeItem: component && component.$refs.displayLayout.removeItem,
                             orderItem: component && component.$refs.displayLayout.orderItem
@@ -83,5 +84,6 @@ export default function () {
                 return true;
             }
         });
+        DisplayLayoutPlugin._installed = true;
     }
 }

src/plugins/filters/components/FilterField.vue

@@ -0,0 +1,116 @@
+<template>
+    <div class="u-contents c-filter-settings">
+        <li class="grid-row c-filter-settings__setting"
+            v-for="(filter, index) in filterField.filters"
+            :key="index">
+            <div class="grid-cell label">
+                {{ filterField.name }} =
+            </div>
+            <div class="grid-cell value">
+                <!-- EDITING -->
+                <!-- String input, editing -->
+                <template v-if="!filter.possibleValues && isEditing">
+                    <input class="c-input--flex"
+                           type="text"
+                           placeholder="Enter Value"
+                           :id="`${filter}filterControl`"
+                           :value="persistedValue(filter)"
+                           @change="updateFilterValue($event, filter)">
+                </template>
+
+                <!-- Checkbox list, editing -->
+                <template v-if="filter.possibleValues && isEditing">
+                    <div class="c-checkbox-list__row"
+                         v-for="value in filter.possibleValues"
+                         :key="value">
+                        <input class="c-checkbox-list__input"
+                               type="checkbox"
+                               :id="`${value}filterControl`"
+                               @change="onUserSelect($event, filter.comparator, value)"
+                               :checked="isChecked(filter.comparator, value)">
+                        <span class="c-checkbox-list__value">
+                            {{ value }}
+                        </span>
+                    </div>
+                </template>
+
+                <!-- BROWSING -->
+                <!-- String input, NOT editing -->
+                <template v-if="!filter.possibleValues && !isEditing">
+                    {{ persistedValue(filter) }}
+                </template>
+
+                <!-- Checkbox list, NOT editing -->
+                <template v-if="filter.possibleValues && !isEditing">
+                    <span 
+                        v-if="persistedFilters[filter.comparator]">
+                        {{persistedFilters[filter.comparator].join(', ')}}
+                    </span>
+                </template>
+            </div>
+        </li>
+    </div>
+</template>
+
+<style lang="scss">
+    @import "~styles/sass-base";
+
+    .c-filter-settings {
+        &__setting {
+            .grid-cell.label {
+                white-space: nowrap;
+            }
+        }
+    }
+</style>
+
+
+<script>
+export default {
+    inject: [
+        'openmct'
+    ],
+    props: {
+        filterField: Object, 
+        persistedFilters: {
+            type: Object,
+            default: () => {
+                return {}
+            }
+        }
+    },
+    data() {
+        return {
+            expanded: false,
+            isEditing: this.openmct.editor.isEditing()
+        }
+    },
+    methods: {
+        toggleIsEditing(isEditing) {
+            this.isEditing = isEditing;
+        },
+        onUserSelect(event, comparator, value){
+            this.$emit('onUserSelect', this.filterField.key, comparator, value, event.target.checked);
+        },
+        isChecked(comparator, value) {
+            if (this.persistedFilters[comparator] && this.persistedFilters[comparator].includes(value)) {
+                return true;
+            } else {
+                return false;
+            }
+        },
+        persistedValue(comparator) {
+            return this.persistedFilters && this.persistedFilters[comparator];
+        },
+        updateFilterValue(event, comparator) {
+            this.$emit('onTextEnter', this.filterField.key, comparator, event.target.value);
+        }
+    },
+    mounted() {
+        this.openmct.editor.on('isEditing', this.toggleIsEditing);
+    },
+    beforeDestroy() {
+        this.openmct.editor.off('isEditing', this.toggleIsEditing);
+    }
+}
+</script>

src/plugins/filters/components/FilterObject.vue

@@ -0,0 +1,94 @@
+<template>
+    <li>
+        <div class="c-tree__item menus-to-left"
+             @click="toggleExpanded">
+            <span class="c-disclosure-triangle is-enabled flex-elem"
+              :class="{'c-disclosure-triangle--expanded': expanded}"></span>
+            <div class="c-tree__item__label">
+                <div class="c-object-label">
+                    <div class="c-object-label__type-icon"
+                         :class="objectCssClass">
+                    </div>
+                    <div class="c-object-label__name flex-elem grows">{{ filterObject.name }}</div>
+                </div>
+            </div>
+        </div>
+        <ul class="grid-properties" v-if="expanded">
+            <filter-field
+                    v-for="field in filterObject.valuesWithFilters"
+                    :key="field.key"
+                    :filterField="field"
+                    :persistedFilters="persistedFilters[field.key]"
+                    @onUserSelect="collectUserSelects"
+                    @onTextEnter="updateTextFilter">
+            </filter-field>
+        </ul>
+    </li>
+</template>
+
+<style lang="scss">
+
+</style>
+
+<script>
+import FilterField from './FilterField.vue';
+
+export default {
+    inject: ['openmct'],
+    components: {
+        FilterField
+    },
+    props: {
+        filterObject: Object, 
+        persistedFilters: {
+            type: Object,
+            default: () => {
+                return {};
+            }
+        }
+    },
+    data() {
+        return {
+            expanded: false,
+            objectCssClass: undefined,
+            updatedFilters: this.persistedFilters
+        }
+    },
+    methods: {
+        toggleExpanded() {
+            this.expanded = !this.expanded;
+        },
+        collectUserSelects(key, comparator, valueName, value) {
+            let filterValue = this.updatedFilters[key];
+
+            if (filterValue && filterValue[comparator]) {
+                if (value === false) {
+                    filterValue[comparator] = filterValue[comparator].filter(v => v !== valueName);
+                } else {
+                    filterValue[comparator].push(valueName);
+                }
+            } else {
+                if (!this.updatedFilters[key]) {
+                    this.$set(this.updatedFilters, key, {});
+                }
+                this.$set(this.updatedFilters[key], comparator, [value ? valueName : undefined]);
+            }
+
+            this.$emit('updateFilters', this.keyString, this.updatedFilters);
+        },
+        updateTextFilter(key, comparator, value) {
+            if (!this.updatedFilters[key]) {
+                this.$set(this.updatedFilters, key, {});
+                this.$set(this.updatedFilters[key], comparator, '');
+            }
+            this.updatedFilters[key][comparator] = value;
+            this.$emit('updateFilters', this.keyString, this.updatedFilters);
+        }
+    },
+    mounted() {
+        let type = this.openmct.types.get(this.filterObject.domainObject.type) || {};
+        this.keyString = this.openmct.objects.makeKeyString(this.filterObject.domainObject.identifier);
+        this.objectCssClass = type.definition.cssClass;
+    }
+}
+</script>

src/plugins/filters/components/FiltersView.vue

@@ -0,0 +1,87 @@
+<template>
+    <ul class="tree c-tree c-properties__section" v-if="Object.keys(children).length">
+        <h2 class="c-properties__header">Filters</h2>
+        <filter-object 
+            v-for="(child, key) in children"
+            :key="key"
+            :filterObject="child"
+            :persistedFilters="persistedFilters[key]"
+            @updateFilters="persistFilters">
+        </filter-object>
+    </ul>
+</template>
+
+<style lang="scss">
+
+</style>
+
+<script>
+import FilterObject from './FilterObject.vue';
+
+export default {
+    components: {
+        FilterObject
+    },
+    inject: [
+        'openmct'
+    ],
+    data() {
+        let providedObject = this.openmct.selection.get()[0][0].context.item;
+        let persistedFilters = {};
+
+        if (providedObject.configuration && providedObject.configuration.filters) {
+            persistedFilters = providedObject.configuration.filters;
+        }
+
+        return {
+            providedObject,
+            persistedFilters,
+            children: {}
+        }
+    },
+    methods: {
+        addChildren(child) {
+            let keyString = this.openmct.objects.makeKeyString(child.identifier),
+                metadata = this.openmct.telemetry.getMetadata(child),
+                valuesWithFilters = metadata.valueMetadatas.filter((value) => value.filters),
+                childObject = {
+                    name: child.name,
+                    domainObject: child,
+                    valuesWithFilters
+                };
+
+            if (childObject.valuesWithFilters.length) {
+                this.$set(this.children, keyString, childObject);
+            } else {
+                return;
+            }
+        },
+        removeChildren(identifier) {
+            let keyString = this.openmct.objects.makeKeyString(identifier);
+            this.$delete(this.children, keyString);
+            this.persistFilters(keyString);
+        },
+        persistFilters(keyString, userSelects) {
+            this.persistedFilters[keyString] = userSelects;
+            this.openmct.objects.mutate(this.providedObject, 'configuration.filters', this.persistedFilters);
+        },
+        updatePersistedFilters(filters) {
+            this.persistedFilters = filters;
+        }
+    },
+    mounted(){
+        this.composition = this.openmct.composition.get(this.providedObject);
+        this.composition.on('add', this.addChildren);
+        this.composition.on('remove', this.removeChildren);
+        this.composition.load();
+        this.unobserve = this.openmct.objects.observe(this.providedObject, 'configuration.filters', this.updatePersistedFilters);
+        this.unobserveAllMutation = this.openmct.objects.observe(this.providedObject, '*', (mutatedObject) => this.providedObject = mutatedObject);
+    },
+    beforeDestroy() {
+        this.composition.off('add', this.addChildren);
+        this.composition.off('remove', this.removeChildren);
+        this.unobserve();
+        this.unobserveAllMutation();
+    }
+}
+</script>

src/plugins/filters/filtersInspectorViewProvider.js

@@ -0,0 +1,72 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2018, 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([
+    './components/FiltersView.vue',
+    'vue'
+], function (
+    FiltersView,
+    Vue
+) {
+
+    function FiltersInspectorViewProvider(openmct, supportedObjectTypesArray) {
+        return {
+            key: 'filters-inspector',
+            name: 'Filters Inspector View',
+            canView: function (selection) {
+                if (selection.length === 0 || selection[0].length === 0) {
+                    return false;
+                }
+                let object = selection[0][0].context.item;
+
+                return object && supportedObjectTypesArray.some(type => object.type === type);
+            },
+            view: function (selection) {
+                let component;
+                return {
+                    show: function (element) {
+                        component = new Vue({
+                            provide: {
+                                openmct
+                            },
+                            components: {
+                                FiltersView: FiltersView.default
+                            },
+                            template: '<filters-view></filters-view>',
+                            el: element
+                        });
+                    },
+                    destroy: function () {
+                        if (component) {
+                            component.$destroy();
+                            component = undefined;
+                        }
+                    }
+                }
+            },
+            priority: function () {
+                return 1;
+            }
+        }
+    }
+    return FiltersInspectorViewProvider;
+});

src/plugins/filters/plugin.js

@@ -20,6 +20,14 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-@import "vendor/normalize.min.css";
-@import "startup-base";
-@import "openmct";
+define([
+    './filtersInspectorViewProvider'
+], function (
+    FiltersInspectorViewProvider
+) {
+    return function plugin(supportedObjectTypesArray) {
+        return function install(openmct) {
+            openmct.inspectorViews.addProvider(new FiltersInspectorViewProvider(openmct, supportedObjectTypesArray));
+        };
+    };
+});

src/plugins/flexibleLayout/components/flexibleLayout.vue

@@ -106,9 +106,6 @@
     .c-fl {
         @include abs();
         display: flex;
-        flex-direction: column; // TEMP: only needed to support temp-toolbar element
-
-        > * + * {  margin-top: $interiorMargin; }
 
         .temp-toolbar {
             flex: 0 0 auto;
@@ -292,11 +289,6 @@
             margin-bottom: $interiorMargin;
         }
 
-        &__object-view {
-            flex: 1 1 auto;
-            overflow: auto;
-        }
-
         &__size-indicator {
             $size: 35px;
 
@@ -422,6 +414,7 @@ import Container from '../utils/container';
 import Frame from '../utils/frame';
 import ResizeHandle from  './resizeHandle.vue';
 import DropHint from './dropHint.vue';
+import RemoveAction from '../../remove/RemoveAction.js';
 
 const MIN_CONTAINER_SIZE = 5;
 
@@ -506,10 +499,29 @@ export default {
             this.persist();
         },
         deleteContainer(containerId) {
-            let container = this.containers.filter(c => c.id === containerId)[0];
-            let containerIndex = this.containers.indexOf(container);
+            let container = this.containers.filter(c => c.id === containerId)[0],
+                containerIndex = this.containers.indexOf(container);
+
+            /*
+                remove associated domainObjects from composition
+            */
+            container.frames.forEach(f => {
+                this.removeFromComposition(f.domainObjectIdentifier);
+            });
+
             this.containers.splice(containerIndex, 1);
+
+            /*
+                add a container when there are no containers in the FL,
+                to prevent user from not being able to add a frame via
+                drag and drop. 
+            */
+            if (this.containers.length === 0) {
+                this.containers.push(new Container(100));
+            }
+
             sizeToFill(this.containers);
+            this.setSelectionToParent();
             this.persist();
         },
         moveFrame(toContainerIndex, toFrameIndex, frameId, fromContainerIndex) {
@@ -543,14 +555,23 @@ export default {
         deleteFrame(frameId) {
             let container = this.containers
                 .filter(c => c.frames.some(f => f.id === frameId))[0];
-            let containerIndex = this.containers.indexOf(container);
             let frame = container
                 .frames
                 .filter((f => f.id === frameId))[0];
-            let frameIndex = container.frames.indexOf(frame);
-            container.frames.splice(frameIndex, 1);
-            sizeToFill(container.frames);
-            this.persist(containerIndex);
+
+            this.removeFromComposition(frame.domainObjectIdentifier)
+                .then(() => {
+                    sizeToFill(container.frames)
+                    this.setSelectionToParent();
+                });
+        },
+        removeFromComposition(identifier) {
+            return this.openmct.objects.get(identifier).then((childDomainObject) => {
+                this.RemoveAction.removeFromComposition(this.domainObject, childDomainObject);
+            });
+        },
+        setSelectionToParent() {
+            this.$el.click();
         },
         allowContainerDrop(event, index) {
             if (!event.dataTransfer.types.includes('containerid')) {
@@ -620,7 +641,7 @@ export default {
             } else {
                 this.containers.splice(toIndex, 0, container);
             }
-            this.persist(index);
+            this.persist();
         },
         removeChildObject(identifier) {
             let removeIdentifier = this.openmct.objects.makeKeyString(identifier);
@@ -641,6 +662,8 @@ export default {
         this.composition.on('remove', this.removeChildObject);
         this.composition.on('add', this.addFrame);
 
+        this.RemoveAction = new RemoveAction(this.openmct);
+
         this.unobserve = this.openmct.objects.observe(this.domainObject, '*', this.updateDomainObject);
     },
     beforeDestroy() {

src/plugins/flexibleLayout/components/frame.vue

@@ -36,6 +36,7 @@
                 :domain-object="domainObject"
                 :object-path="objectPath"
                 :has-frame="hasFrame"
+                :show-edit-view="false"
                 ref="objectFrame">
             </object-frame>
 
@@ -78,12 +79,14 @@ export default {
         },
         setSelection() {
             this.$nextTick(function () {
-                let childContext = this.$refs.objectFrame.getSelectionContext();
-                childContext.item = this.domainObject;
-                childContext.type = 'frame';
-                childContext.frameId = this.frame.id;
-                this.unsubscribeSelection = this.openmct.selection.selectable(
-                    this.$refs.frame, childContext, false);
+                if (this.$refs && this.$refs.objectFrame) {
+                    let childContext = this.$refs.objectFrame.getSelectionContext();
+                    childContext.item = this.domainObject;
+                    childContext.type = 'frame';
+                    childContext.frameId = this.frame.id;
+                    this.unsubscribeSelection = this.openmct.selection.selectable(
+                        this.$refs.frame, childContext, false);
+                }
             });
         },
         initDrag(event) {

src/plugins/flexibleLayout/components/resizeHandle.vue

@@ -79,10 +79,12 @@ export default {
     mounted() {
         document.addEventListener('dragstart', this.setDragging);
         document.addEventListener('dragend', this.unsetDragging);
+        document.addEventListener('drop', this.unsetDragging);
     },
     destroyed() {
         document.removeEventListener('dragstart', this.setDragging);
         document.removeEventListener('dragend', this.unsetDragging);
+        document.removeEventListener('drop', this.unsetDragging);
     }
 }
 </script>

src/plugins/flexibleLayout/flexibleLayoutViewProvider.js

@@ -57,7 +57,7 @@ define([
                                 layoutObject: domainObject
                             },
                             el: element,
-                            template: '<flexible-layout-component ref="flexibleLayout"></flexible-layout-component>'
+                            template: '<flexible-layout-component ref="flexibleLayout" :isEditing="isEditing"></flexible-layout-component>'
                         });
                     },
                     getSelectionContext: function () {

src/plugins/flexibleLayout/toolbarProvider.js

@@ -27,28 +27,22 @@ function ToolbarProvider(openmct) {
         key: "flex-layout",
         description: "A toolbar for objects inside a Flexible Layout.",
         forSelection: function (selection) {
-            let context = selection[0].context;
+            let context = selection[0][0].context;
 
-            return (openmct.editor.isEditing() && context && context.type &&
+            return (context && context.type &&
                 (context.type === 'flexible-layout' || context.type === 'container' || context.type === 'frame'));
         },
         toolbar: function (selection) {
 
-            let primary = selection[0],
-                secondary = selection[1],
-                tertiary = selection[2],
+            let selectionPath = selection[0],
+                primary = selectionPath[0],
+                secondary = selectionPath[1],
+                tertiary = selectionPath[2],
                 deleteFrame,
                 toggleContainer,
                 deleteContainer,
                 addContainer,
-                toggleFrame,
-                separator;
-
-            separator = {
-                control: "separator",
-                domainObject: selection[0].context.item,
-                key: "separator"
-            };
+                toggleFrame;
 
             toggleContainer = {
                 control: 'toggle-button',
@@ -69,6 +63,12 @@ function ToolbarProvider(openmct) {
                 ]
             };
 
+            function getSeparator() {
+                return {
+                    control: "separator"
+                };
+            }
+
             if (primary.context.type === 'frame') {
                 let frameId = primary.context.frameId;
                 let layoutObject = tertiary.context.item;
@@ -77,11 +77,11 @@ function ToolbarProvider(openmct) {
                     .containers;
                 let container = containers
                     .filter(c => c.frames.some(f => f.id === frameId))[0];
-                let frame = container
+                let containerIndex = containers.indexOf(container);
+                let frame = container && container
                     .frames
                     .filter((f => f.id === frameId))[0];
-                let containerIndex = containers.indexOf(container);
-                let frameIndex = container.frames.indexOf(frame);
+                let frameIndex = container && container.frames.indexOf(frame);
 
                 deleteFrame = {
                     control: "button",
@@ -202,9 +202,9 @@ function ToolbarProvider(openmct) {
             let toolbar = [
                 toggleContainer,
                 addContainer,
-                toggleFrame ? separator: undefined,
+                toggleFrame ? getSeparator() : undefined,
                 toggleFrame,
-                deleteFrame || deleteContainer ? separator: undefined,
+                deleteFrame || deleteContainer ? getSeparator() : undefined,
                 deleteFrame,
                 deleteContainer
             ];

src/plugins/folderView/components/GridItem.vue

@@ -16,7 +16,7 @@
         </div>
         <div class="c-grid-item__controls">
             <div class="icon-people" title='Shared'></div>
-            <button class="c-click-icon icon-info c-info-button" title='More Info'></button>
+            <button class="c-icon-button icon-info c-info-button" title='More Info'></button>
             <div class="icon-pointer-right c-pointer-icon"></div>
         </div>
     </a>

src/plugins/folderView/components/composition-loader.js

@@ -14,6 +14,7 @@ export default {
     },
     mounted() {
         this.composition = this.openmct.composition.get(this.domainObject);
+        this.keystring = this.openmct.objects.makeKeyString(this.domainObject.identifier);
         if (!this.composition) {
             return;
         }
@@ -34,7 +35,7 @@ export default {
             this.items.push({
                 model: child,
                 type: type.definition,
-                isAlias: this.domainObject.identifier.key !== child.location,
+                isAlias: this.keystring !== child.location,
                 objectPath: [child].concat(this.openmct.router.path),
                 objectKeyString: this.openmct.objects.makeKeyString(child.identifier)
             });

src/plugins/licenses/Licenses.vue

@@ -0,0 +1,52 @@
+/*****************************************************************************
+* Open MCT, Copyright (c) 2014-2019, 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.
+*****************************************************************************/
+<template>
+    <div class="c-about c-about--licenses">
+        <h1>Open MCT Third Party Licenses</h1>
+        <p>This software includes components released under the following licenses:</p>
+        <div v-for="(pkg, key) in packages" :key="key" class="c-license">
+            <h2 class="c-license__name">{{key}}</h2>
+            <div class="c-license__details">
+                <span class="c-license__author"><em>Author</em> {{pkg.publisher}}</span> |
+                <span class="c-license__license"><em>License(s)</em> {{pkg.licenses}}</span> |
+                <span class="c-license__repo"><em>Repository</em> <a :href="pkg.repository" target="_blank">{{pkg.repository}}</a></span>
+            </div>
+            <div class="c-license__text">
+                <p>{{pkg.licenseText}}</p>
+            </div>
+        </div>
+    </div>
+</template>
+<style lang="sass">
+</style>
+<script>
+import packages from './third-party-licenses.json';
+
+export default {
+    data() {
+        return {
+            packages: packages
+        }
+    }
+}
+</script>
+ 

src/plugins/licenses/plugin.js

@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
+ * Open MCT, Copyright (c) 2014-2019, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -19,21 +19,20 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-.app-logo {
-    background: url('../images/logo-app.svg') no-repeat center center;
-}
+import Licenses from './Licenses.vue';
+import Vue from 'vue';
 
-.l-splash-holder {
-    background: #333;
-    .s-splash {
-        border-radius: 10px;
-        box-shadow: 0 5px 50px 25px rgba(255, 255, 255, 0.1);
-    }
-}
+export default function () {
+    return function install(openmct) {
+        openmct.router.route(/^\/licenses$/, () => {
+            let licensesVm = new Vue(Licenses).$mount();
 
-.s-splash {
-    background-image: url('../images/bg-splash.jpg');
-    &:after {
-        background-image: url('../images/logo-app-shdw.svg');
-    }
+            openmct.overlays.overlay({
+                element: licensesVm.$el,
+                size: 'fullscreen',
+                dismissable: false,
+                onDestroy: () => licensesVm.$destroy()
+            });
+        });
+    };
 }

src/plugins/licenses/third-party-licenses.json

@@ -0,0 +1,268 @@
+{
+  "angular-route@1.4.14": {
+    "licenses": "MIT",
+    "repository": "https://github.com/angular/angular.js",
+    "publisher": "Angular Core Team",
+    "email": "angular-core+npm@google.com",
+    "path": "/Users/akhenry/Code/licenses/node_modules/angular-route",
+    "licenseFile": "/Users/akhenry/Code/licenses/node_modules/angular-route/LICENSE.md",
+    "licenseText": "The MIT License (MIT)\n\nCopyright (c) 2016 Angular\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.",
+    "copyright": "Copyright (c) 2016 Angular"
+  },
+  "angular@1.4.14": {
+    "licenses": "MIT",
+    "repository": "https://github.com/angular/angular.js",
+    "publisher": "Angular Core Team",
+    "email": "angular-core+npm@google.com",
+    "path": "/Users/akhenry/Code/licenses/node_modules/angular",
+    "licenseFile": "/Users/akhenry/Code/licenses/node_modules/angular/LICENSE.md",
+    "licenseText": "The MIT License (MIT)\n\nCopyright (c) 2016 Angular\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.",
+    "copyright": "Copyright (c) 2016 Angular"
+  },
+  "base64-arraybuffer@0.1.5": {
+    "licenses": "MIT",
+    "repository": "https://github.com/niklasvh/base64-arraybuffer",
+    "publisher": "Niklas von Hertzen",
+    "email": "niklasvh@gmail.com",
+    "url": "http://hertzen.com",
+    "path": "/Users/akhenry/Code/licenses/node_modules/base64-arraybuffer",
+    "licenseFile": "/Users/akhenry/Code/licenses/node_modules/base64-arraybuffer/LICENSE-MIT",
+    "licenseText": "Copyright (c) 2012 Niklas von Hertzen\n\nPermission is hereby granted, free of charge, to any person\nobtaining a copy of this software and associated documentation\nfiles (the \"Software\"), to deal in the Software without\nrestriction, including without limitation the rights to use,\ncopy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the\nSoftware is furnished to do so, subject to the following\nconditions:\n\nThe above copyright notice and this permission notice shall be\nincluded in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\nEXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\nOF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\nNONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\nHOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\nWHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\nFROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\nOTHER DEALINGS IN THE SOFTWARE.",
+    "copyright": "Copyright (c) 2012 Niklas von Hertzen"
+  },
+  "comma-separated-values@3.6.4": {
+    "licenses": "MIT",
+    "repository": "https://github.com/knrz/CSV.js",
+    "publisher": "=",
+    "email": "hi@knrz.co",
+    "url": "http://knrz.co/",
+    "path": "/Users/akhenry/Code/licenses/node_modules/comma-separated-values",
+    "licenseFile": "/Users/akhenry/Code/licenses/node_modules/comma-separated-values/LICENSE",
+    "licenseText": "The MIT License (MIT)\n\nCopyright (c) 2014 Kash Nouroozi\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.",
+    "copyright": "Copyright (c) 2014 Kash Nouroozi"
+  },
+  "css-line-break@1.0.1": {
+    "licenses": "MIT",
+    "repository": "https://github.com/niklasvh/css-line-break",
+    "publisher": "Niklas von Hertzen",
+    "email": "niklasvh@gmail.com",
+    "url": "https://hertzen.com",
+    "path": "/Users/akhenry/Code/licenses/node_modules/css-line-break",
+    "licenseFile": "/Users/akhenry/Code/licenses/node_modules/css-line-break/LICENSE",
+    "licenseText": "Copyright (c) 2017 Niklas von Hertzen\n\nPermission is hereby granted, free of charge, to any person\nobtaining a copy of this software and associated documentation\nfiles (the \"Software\"), to deal in the Software without\nrestriction, including without limitation the rights to use,\ncopy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the\nSoftware is furnished to do so, subject to the following\nconditions:\n\nThe above copyright notice and this permission notice shall be\nincluded in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\nEXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\nOF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\nNONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\nHOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\nWHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\nFROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\nOTHER DEALINGS IN THE SOFTWARE.",
+    "copyright": "Copyright (c) 2017 Niklas von Hertzen"
+  },
+  "d3-array@1.2.4": {
+    "licenses": "BSD-3-Clause",
+    "repository": "https://github.com/d3/d3-array",
+    "publisher": "Mike Bostock",
+    "url": "http://bost.ocks.org/mike",
+    "path": "/Users/akhenry/Code/licenses/node_modules/d3-array",
+    "licenseFile": "/Users/akhenry/Code/licenses/node_modules/d3-array/LICENSE",
+    "licenseText": "Copyright 2010-2016 Mike Bostock\nAll rights reserved.\n\nRedistribution and use in source and binary forms, with or without modification,\nare permitted provided that the following conditions are met:\n\n* Redistributions of source code must retain the above copyright notice, this\n  list of conditions and the following disclaimer.\n\n* Redistributions in binary form must reproduce the above copyright notice,\n  this list of conditions and the following disclaimer in the documentation\n  and/or other materials provided with the distribution.\n\n* Neither the name of the author nor the names of contributors may be used to\n  endorse or promote products derived from this software without specific prior\n  written permission.\n\nTHIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS \"AS IS\" AND\nANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED\nWARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE\nDISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR\nANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES\n(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;\nLOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON\nANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT\n(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS\nSOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.",
+    "copyright": "Copyright 2010-2016 Mike Bostock. All rights reserved."
+  },
+  "d3-axis@1.0.12": {
+    "licenses": "BSD-3-Clause",
+    "repository": "https://github.com/d3/d3-axis",
+    "publisher": "Mike Bostock",
+    "url": "http://bost.ocks.org/mike",
+    "path": "/Users/akhenry/Code/licenses/node_modules/d3-axis",
+    "licenseFile": "/Users/akhenry/Code/licenses/node_modules/d3-axis/LICENSE",
+    "licenseText": "Copyright 2010-2016 Mike Bostock\nAll rights reserved.\n\nRedistribution and use in source and binary forms, with or without modification,\nare permitted provided that the following conditions are met:\n\n* Redistributions of source code must retain the above copyright notice, this\n  list of conditions and the following disclaimer.\n\n* Redistributions in binary form must reproduce the above copyright notice,\n  this list of conditions and the following disclaimer in the documentation\n  and/or other materials provided with the distribution.\n\n* Neither the name of the author nor the names of contributors may be used to\n  endorse or promote products derived from this software without specific prior\n  written permission.\n\nTHIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS \"AS IS\" AND\nANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED\nWARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE\nDISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR\nANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES\n(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;\nLOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON\nANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT\n(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS\nSOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.",
+    "copyright": "Copyright 2010-2016 Mike Bostock. All rights reserved."
+  },
+  "d3-collection@1.0.7": {
+    "licenses": "BSD-3-Clause",
+    "repository": "https://github.com/d3/d3-collection",
+    "publisher": "Mike Bostock",
+    "url": "http://bost.ocks.org/mike",
+    "path": "/Users/akhenry/Code/licenses/node_modules/d3-collection",
+    "licenseFile": "/Users/akhenry/Code/licenses/node_modules/d3-collection/LICENSE",
+    "licenseText": "Copyright 2010-2016, Mike Bostock\nAll rights reserved.\n\nRedistribution and use in source and binary forms, with or without modification,\nare permitted provided that the following conditions are met:\n\n* Redistributions of source code must retain the above copyright notice, this\n  list of conditions and the following disclaimer.\n\n* Redistributions in binary form must reproduce the above copyright notice,\n  this list of conditions and the following disclaimer in the documentation\n  and/or other materials provided with the distribution.\n\n* Neither the name of the author nor the names of contributors may be used to\n  endorse or promote products derived from this software without specific prior\n  written permission.\n\nTHIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS \"AS IS\" AND\nANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED\nWARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE\nDISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR\nANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES\n(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;\nLOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON\nANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT\n(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS\nSOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.",
+    "copyright": "Copyright 2010-2016, Mike Bostock. All rights reserved."
+  },
+  "d3-color@1.0.4": {
+    "licenses": "BSD-3-Clause",
+    "repository": "https://github.com/d3/d3-color",
+    "publisher": "Mike Bostock",
+    "url": "http://bost.ocks.org/mike",
+    "path": "/Users/akhenry/Code/licenses/node_modules/d3-color",
+    "licenseFile": "/Users/akhenry/Code/licenses/node_modules/d3-color/LICENSE",
+    "licenseText": "Copyright 2010-2016 Mike Bostock\nAll rights reserved.\n\nRedistribution and use in source and binary forms, with or without modification,\nare permitted provided that the following conditions are met:\n\n* Redistributions of source code must retain the above copyright notice, this\n  list of conditions and the following disclaimer.\n\n* Redistributions in binary form must reproduce the above copyright notice,\n  this list of conditions and the following disclaimer in the documentation\n  and/or other materials provided with the distribution.\n\n* Neither the name of the author nor the names of contributors may be used to\n  endorse or promote products derived from this software without specific prior\n  written permission.\n\nTHIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS \"AS IS\" AND\nANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED\nWARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE\nDISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR\nANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES\n(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;\nLOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON\nANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT\n(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS\nSOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.",
+    "copyright": "Copyright 2010-2016 Mike Bostock. All rights reserved."
+  },
+  "d3-format@1.2.2": {
+    "licenses": "BSD-3-Clause",
+    "repository": "https://github.com/d3/d3-format",
+    "publisher": "Mike Bostock",
+    "url": "http://bost.ocks.org/mike",
+    "path": "/Users/akhenry/Code/licenses/node_modules/d3-format",
+    "licenseFile": "/Users/akhenry/Code/licenses/node_modules/d3-format/LICENSE",
+    "licenseText": "Copyright 2010-2015 Mike Bostock\nAll rights reserved.\n\nRedistribution and use in source and binary forms, with or without modification,\nare permitted provided that the following conditions are met:\n\n* Redistributions of source code must retain the above copyright notice, this\n  list of conditions and the following disclaimer.\n\n* Redistributions in binary form must reproduce the above copyright notice,\n  this list of conditions and the following disclaimer in the documentation\n  and/or other materials provided with the distribution.\n\n* Neither the name of the author nor the names of contributors may be used to\n  endorse or promote products derived from this software without specific prior\n  written permission.\n\nTHIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS \"AS IS\" AND\nANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED\nWARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE\nDISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR\nANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES\n(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;\nLOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON\nANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT\n(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS\nSOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.",
+    "copyright": "Copyright 2010-2015 Mike Bostock. All rights reserved."
+  },
+  "d3-interpolate@1.1.6": {
+    "licenses": "BSD-3-Clause",
+    "repository": "https://github.com/d3/d3-interpolate",
+    "publisher": "Mike Bostock",
+    "url": "http://bost.ocks.org/mike",
+    "path": "/Users/akhenry/Code/licenses/node_modules/d3-interpolate",
+    "licenseFile": "/Users/akhenry/Code/licenses/node_modules/d3-interpolate/LICENSE",
+    "licenseText": "Copyright 2010-2016 Mike Bostock\nAll rights reserved.\n\nRedistribution and use in source and binary forms, with or without modification,\nare permitted provided that the following conditions are met:\n\n* Redistributions of source code must retain the above copyright notice, this\n  list of conditions and the following disclaimer.\n\n* Redistributions in binary form must reproduce the above copyright notice,\n  this list of conditions and the following disclaimer in the documentation\n  and/or other materials provided with the distribution.\n\n* Neither the name of the author nor the names of contributors may be used to\n  endorse or promote products derived from this software without specific prior\n  written permission.\n\nTHIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS \"AS IS\" AND\nANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED\nWARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE\nDISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR\nANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES\n(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;\nLOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON\nANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT\n(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS\nSOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.",
+    "copyright": "Copyright 2010-2016 Mike Bostock. All rights reserved."
+  },
+  "d3-scale@1.0.7": {
+    "licenses": "BSD-3-Clause",
+    "repository": "https://github.com/d3/d3-scale",
+    "publisher": "Mike Bostock",
+    "url": "http://bost.ocks.org/mike",
+    "path": "/Users/akhenry/Code/licenses/node_modules/d3-scale",
+    "licenseFile": "/Users/akhenry/Code/licenses/node_modules/d3-scale/LICENSE",
+    "licenseText": "Copyright 2010-2015 Mike Bostock\nAll rights reserved.\n\nRedistribution and use in source and binary forms, with or without modification,\nare permitted provided that the following conditions are met:\n\n* Redistributions of source code must retain the above copyright notice, this\n  list of conditions and the following disclaimer.\n\n* Redistributions in binary form must reproduce the above copyright notice,\n  this list of conditions and the following disclaimer in the documentation\n  and/or other materials provided with the distribution.\n\n* Neither the name of the author nor the names of contributors may be used to\n  endorse or promote products derived from this software without specific prior\n  written permission.\n\nTHIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS \"AS IS\" AND\nANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED\nWARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE\nDISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR\nANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES\n(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;\nLOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON\nANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT\n(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS\nSOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.",
+    "copyright": "Copyright 2010-2015 Mike Bostock. All rights reserved."
+  },
+  "d3-selection@1.3.2": {
+    "licenses": "BSD-3-Clause",
+    "repository": "https://github.com/d3/d3-selection",
+    "publisher": "Mike Bostock",
+    "url": "https://bost.ocks.org/mike",
+    "path": "/Users/akhenry/Code/licenses/node_modules/d3-selection",
+    "licenseFile": "/Users/akhenry/Code/licenses/node_modules/d3-selection/LICENSE",
+    "licenseText": "Copyright (c) 2010-2018, Michael Bostock\nAll rights reserved.\n\nRedistribution and use in source and binary forms, with or without\nmodification, are permitted provided that the following conditions are met:\n\n* Redistributions of source code must retain the above copyright notice, this\n  list of conditions and the following disclaimer.\n\n* Redistributions in binary form must reproduce the above copyright notice,\n  this list of conditions and the following disclaimer in the documentation\n  and/or other materials provided with the distribution.\n\n* The name Michael Bostock may not be used to endorse or promote products\n  derived from this software without specific prior written permission.\n\nTHIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS \"AS IS\"\nAND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE\nIMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE\nDISCLAIMED. IN NO EVENT SHALL MICHAEL BOSTOCK BE LIABLE FOR ANY DIRECT,\nINDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING,\nBUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,\nDATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY\nOF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING\nNEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE,\nEVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.",
+    "copyright": "Copyright (c) 2010-2018, Michael Bostock. All rights reserved."
+  },
+  "d3-time-format@2.1.3": {
+    "licenses": "BSD-3-Clause",
+    "repository": "https://github.com/d3/d3-time-format",
+    "publisher": "Mike Bostock",
+    "url": "http://bost.ocks.org/mike",
+    "path": "/Users/akhenry/Code/licenses/node_modules/d3-time-format",
+    "licenseFile": "/Users/akhenry/Code/licenses/node_modules/d3-time-format/LICENSE",
+    "licenseText": "Copyright 2010-2017 Mike Bostock\nAll rights reserved.\n\nRedistribution and use in source and binary forms, with or without modification,\nare permitted provided that the following conditions are met:\n\n* Redistributions of source code must retain the above copyright notice, this\n  list of conditions and the following disclaimer.\n\n* Redistributions in binary form must reproduce the above copyright notice,\n  this list of conditions and the following disclaimer in the documentation\n  and/or other materials provided with the distribution.\n\n* Neither the name of the author nor the names of contributors may be used to\n  endorse or promote products derived from this software without specific prior\n  written permission.\n\nTHIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS \"AS IS\" AND\nANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED\nWARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE\nDISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR\nANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES\n(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;\nLOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON\nANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT\n(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS\nSOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.",
+    "copyright": "Copyright 2010-2017 Mike Bostock. All rights reserved."
+  },
+  "d3-time@1.0.10": {
+    "licenses": "BSD-3-Clause",
+    "repository": "https://github.com/d3/d3-time",
+    "publisher": "Mike Bostock",
+    "url": "http://bost.ocks.org/mike",
+    "path": "/Users/akhenry/Code/licenses/node_modules/d3-time",
+    "licenseFile": "/Users/akhenry/Code/licenses/node_modules/d3-time/LICENSE",
+    "licenseText": "Copyright 2010-2016 Mike Bostock\nAll rights reserved.\n\nRedistribution and use in source and binary forms, with or without modification,\nare permitted provided that the following conditions are met:\n\n* Redistributions of source code must retain the above copyright notice, this\n  list of conditions and the following disclaimer.\n\n* Redistributions in binary form must reproduce the above copyright notice,\n  this list of conditions and the following disclaimer in the documentation\n  and/or other materials provided with the distribution.\n\n* Neither the name of the author nor the names of contributors may be used to\n  endorse or promote products derived from this software without specific prior\n  written permission.\n\nTHIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS \"AS IS\" AND\nANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED\nWARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE\nDISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR\nANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES\n(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;\nLOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON\nANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT\n(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS\nSOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.",
+    "copyright": "Copyright 2010-2016 Mike Bostock. All rights reserved."
+  },
+  "eventemitter3@1.2.0": {
+    "licenses": "MIT",
+    "repository": "https://github.com/primus/eventemitter3",
+    "publisher": "Arnout Kazemier",
+    "path": "/Users/akhenry/Code/licenses/node_modules/eventemitter3",
+    "licenseFile": "/Users/akhenry/Code/licenses/node_modules/eventemitter3/LICENSE",
+    "licenseText": "The MIT License (MIT)\n\nCopyright (c) 2014 Arnout Kazemier\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.",
+    "copyright": "Copyright (c) 2014 Arnout Kazemier"
+  },
+  "file-saver@1.3.8": {
+    "licenses": "MIT",
+    "repository": "https://github.com/eligrey/FileSaver.js",
+    "publisher": "Eli Grey",
+    "email": "me@eligrey.com",
+    "path": "/Users/akhenry/Code/licenses/node_modules/file-saver",
+    "licenseFile": "/Users/akhenry/Code/licenses/node_modules/file-saver/LICENSE.md",
+    "licenseText": "The MIT License\n\nCopyright © 2016 [Eli Grey][1].\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the \"Software\"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n\n  [1]: http://eligrey.com",
+    "copyright": "Copyright © 2016 [Eli Grey][1]."
+  },
+  "html2canvas@1.0.0-alpha.12": {
+    "licenses": "MIT",
+    "repository": "https://github.com/niklasvh/html2canvas",
+    "publisher": "Niklas von Hertzen",
+    "email": "niklasvh@gmail.com",
+    "url": "https://hertzen.com",
+    "path": "/Users/akhenry/Code/licenses/node_modules/html2canvas",
+    "licenseFile": "/Users/akhenry/Code/licenses/node_modules/html2canvas/LICENSE",
+    "licenseText": "Copyright (c) 2012 Niklas von Hertzen\n\nPermission is hereby granted, free of charge, to any person\nobtaining a copy of this software and associated documentation\nfiles (the \"Software\"), to deal in the Software without\nrestriction, including without limitation the rights to use,\ncopy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the\nSoftware is furnished to do so, subject to the following\nconditions:\n\nThe above copyright notice and this permission notice shall be\nincluded in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\nEXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\nOF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\nNONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\nHOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\nWHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\nFROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\nOTHER DEALINGS IN THE SOFTWARE.",
+    "copyright": "Copyright (c) 2012 Niklas von Hertzen"
+  },
+  "location-bar@3.0.1": {
+    "licenses": "BSD-2-Clause",
+    "repository": "https://github.com/KidkArolis/location-bar",
+    "publisher": "Karolis Narkevicius",
+    "path": "/Users/akhenry/Code/licenses/node_modules/location-bar",
+    "licenseFile": "/Users/akhenry/Code/licenses/node_modules/location-bar/README.md",
+    "licenseText": ""
+  },
+  "lodash@3.10.1": {
+    "licenses": "MIT",
+    "repository": "https://github.com/lodash/lodash",
+    "publisher": "John-David Dalton",
+    "email": "john.david.dalton@gmail.com",
+    "url": "http://allyoucanleet.com/",
+    "path": "/Users/akhenry/Code/licenses/node_modules/lodash",
+    "licenseFile": "/Users/akhenry/Code/licenses/node_modules/lodash/LICENSE",
+    "licenseText": "Copyright 2012-2015 The Dojo Foundation <http://dojofoundation.org/>\nBased on Underscore.js, copyright 2009-2015 Jeremy Ashkenas,\nDocumentCloud and Investigative Reporters & Editors <http://underscorejs.org/>\n\nPermission is hereby granted, free of charge, to any person obtaining\na copy of this software and associated documentation files (the\n\"Software\"), to deal in the Software without restriction, including\nwithout limitation the rights to use, copy, modify, merge, publish,\ndistribute, sublicense, and/or sell copies of the Software, and to\npermit persons to whom the Software is furnished to do so, subject to\nthe following conditions:\n\nThe above copyright notice and this permission notice shall be\nincluded in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\nEXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF\nMERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\nNONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE\nLIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION\nOF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION\nWITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.",
+    "copyright": "Copyright 2012-2015 The Dojo Foundation <http://dojofoundation.org/>. Based on Underscore.js, copyright 2009-2015 Jeremy Ashkenas,. DocumentCloud and Investigative Reporters & Editors <http://underscorejs.org/>"
+  },
+  "moment-duration-format@2.2.2": {
+    "licenses": "MIT",
+    "repository": "https://github.com/jsmreese/moment-duration-format",
+    "path": "/Users/akhenry/Code/licenses/node_modules/moment-duration-format",
+    "licenseFile": "/Users/akhenry/Code/licenses/node_modules/moment-duration-format/LICENSE",
+    "licenseText": "The MIT License (MIT)\n\nCopyright (c) 2018 John Madhavan-Reese\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of\nthis software and associated documentation files (the \"Software\"), to deal in\nthe Software without restriction, including without limitation the rights to\nuse, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of\nthe Software, and to permit persons to whom the Software is furnished to do so,\nsubject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS\nFOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR\nCOPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER\nIN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN\nCONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.",
+    "copyright": "Copyright (c) 2018 John Madhavan-Reese"
+  },
+  "moment-timezone@0.5.23": {
+    "licenses": "MIT",
+    "repository": "https://github.com/moment/moment-timezone",
+    "publisher": "Tim Wood",
+    "email": "washwithcare@gmail.com",
+    "url": "http://timwoodcreates.com/",
+    "path": "/Users/akhenry/Code/licenses/node_modules/moment-timezone",
+    "licenseFile": "/Users/akhenry/Code/licenses/node_modules/moment-timezone/LICENSE",
+    "licenseText": "The MIT License (MIT)\r\n\r\nCopyright (c) JS Foundation and other contributors\r\n\r\nPermission is hereby granted, free of charge, to any person obtaining a copy of\r\nthis software and associated documentation files (the \"Software\"), to deal in\r\nthe Software without restriction, including without limitation the rights to\r\nuse, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of\r\nthe Software, and to permit persons to whom the Software is furnished to do so,\r\nsubject to the following conditions:\r\n\r\nThe above copyright notice and this permission notice shall be included in all\r\ncopies or substantial portions of the Software.\r\n\r\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\r\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS\r\nFOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR\r\nCOPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER\r\nIN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN\r\nCONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.",
+    "copyright": "Copyright (c) JS Foundation and other contributors"
+  },
+  "moment@2.24.0": {
+    "licenses": "MIT",
+    "repository": "https://github.com/moment/moment",
+    "publisher": "Iskren Ivov Chernev",
+    "email": "iskren.chernev@gmail.com",
+    "url": "https://github.com/ichernev",
+    "path": "/Users/akhenry/Code/licenses/node_modules/moment",
+    "licenseFile": "/Users/akhenry/Code/licenses/node_modules/moment/LICENSE",
+    "licenseText": "Copyright (c) JS Foundation and other contributors\n\nPermission is hereby granted, free of charge, to any person\nobtaining a copy of this software and associated documentation\nfiles (the \"Software\"), to deal in the Software without\nrestriction, including without limitation the rights to use,\ncopy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the\nSoftware is furnished to do so, subject to the following\nconditions:\n\nThe above copyright notice and this permission notice shall be\nincluded in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\nEXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\nOF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\nNONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\nHOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\nWHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\nFROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\nOTHER DEALINGS IN THE SOFTWARE.",
+    "copyright": "Copyright (c) JS Foundation and other contributors"
+  },
+  "painterro@0.2.71": {
+    "licenses": "MIT",
+    "publisher": "Ivan Borshchov",
+    "path": "/Users/akhenry/Code/licenses/node_modules/painterro",
+    "licenseFile": "/Users/akhenry/Code/licenses/node_modules/painterro/LICENSE",
+    "licenseText": "The MIT License (MIT)\n\nCopyright (c) 2017 Ivan Borshchov\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in\nall copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\nTHE SOFTWARE.",
+    "copyright": "Copyright (c) 2017 Ivan Borshchov"
+  },
+  "printj@1.2.1": {
+    "licenses": "Apache-2.0",
+    "repository": "https://github.com/SheetJS/printj",
+    "publisher": "sheetjs",
+    "path": "/Users/akhenry/Code/licenses/node_modules/printj",
+    "licenseFile": "/Users/akhenry/Code/licenses/node_modules/printj/LICENSE",
+    "licenseText": "Copyright (C) 2016-present  SheetJS\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.",
+    "copyright": "Copyright (C) 2016-present  SheetJS"
+  },
+  "vue@2.5.6": {
+    "licenses": "MIT",
+    "repository": "https://github.com/vuejs/vue",
+    "publisher": "Evan You",
+    "path": "/Users/akhenry/Code/licenses/node_modules/vue",
+    "licenseFile": "/Users/akhenry/Code/licenses/node_modules/vue/LICENSE",
+    "licenseText": "The MIT License (MIT)\n\nCopyright (c) 2013-present, Yuxi (Evan) You\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in\nall copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\nTHE SOFTWARE.",
+    "copyright": "Copyright (c) 2013-present, Yuxi (Evan) You"
+  },
+  "zepto@1.2.0": {
+    "licenses": "MIT",
+    "repository": "https://github.com/madrobby/zepto",
+    "path": "/Users/akhenry/Code/licenses/node_modules/zepto",
+    "licenseFile": "/Users/akhenry/Code/licenses/node_modules/zepto/README.md",
+    "licenseText": "Copyright (c) 2010-2018 Thomas Fuchs\nhttp://zeptojs.com/\n\nPermission is hereby granted, free of charge, to any person obtaining\na copy of this software and associated documentation files (the\n\"Software\"), to deal in the Software without restriction, including\nwithout limitation the rights to use, copy, modify, merge, publish,\ndistribute, sublicense, and/or sell copies of the Software, and to\npermit persons to whom the Software is furnished to do so, subject to\nthe following conditions:\n\nThe above copyright notice and this permission notice shall be\nincluded in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\nEXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF\nMERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\nNONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE\nLIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION\nOF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION\nWITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE."
+  }
+}
+

src/plugins/notebook/res/templates/entry.html

@@ -26,7 +26,7 @@
     </div>
 
     <div class="c-ne__local-controls--hidden">
-        <button class="c-click-icon c-click-icon--major icon-trash"
+        <button class="c-icon-button c-icon-button--major icon-trash"
            title="Delete this entry"
            @click="deleteEntry">
         </button>

src/plugins/objectMigration/Migrations.js

@@ -0,0 +1,249 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2018, 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([
+    'uuid'
+], function (
+    uuid
+) {
+    return function Migrations(openmct) {
+        function getColumnNameKeyMap(domainObject) {
+            let composition = openmct.composition.get(domainObject);
+            if (composition) {
+                return composition.load().then(composees => {
+                    return composees.reduce((nameKeyMap, composee) => {
+                        let metadata = openmct.telemetry.getMetadata(composee);
+                        if (metadata !== undefined) {
+                            metadata.values().forEach(value => {
+                                nameKeyMap[value.name] = value.key;
+                            });
+                        }
+                        return nameKeyMap;
+                    }, {});
+                });
+            } else {
+                return Promise.resolve([]);
+            }
+        }
+
+        function isTelemetry(domainObject) {
+            if (openmct.telemetry.isTelemetryObject(domainObject)
+                && domainObject.type !== 'summary-widget'
+                && domainObject.type !== 'example.imagery') {
+                return true;
+            } else {
+                return false;
+            }
+        }
+
+        function migrateDisplayLayout(domainObject, childObjects) {
+            const DEFAULT_GRID_SIZE = [32, 32];
+            let migratedObject = Object.assign({}, domainObject);
+            let panels = migratedObject.configuration.layout.panels;
+            let items = [];
+
+            Object.keys(panels).forEach(key => {
+                let panel = panels[key];
+                let domainObject = childObjects[key];
+
+                if (isTelemetry(domainObject)) {
+                    items.push({
+                        width: panel.dimensions[0],
+                        height: panel.dimensions[1],
+                        x: panel.position[0],
+                        y: panel.position[1],
+                        identifier: domainObject.identifier,
+                        id: uuid(),
+                        type: 'telemetry-view',
+                        displayMode: 'all',
+                        value: openmct.telemetry.getMetadata(domainObject).getDefaultDisplayValue(),
+                        stroke: "transparent",
+                        fill: "",
+                        color: "",
+                        size: "13px"
+                    });
+                } else {
+                    items.push({
+                        width: panel.dimensions[0],
+                        height: panel.dimensions[1],
+                        x: panel.position[0],
+                        y: panel.position[1],
+                        identifier: domainObject.identifier,
+                        id: uuid(),
+                        type: 'subobject-view',
+                        hasFrame: panel.hasFrame
+                    });
+                }
+            });
+
+            migratedObject.configuration.items = items;
+            migratedObject.configuration.layoutGrid = migratedObject.layoutGrid || DEFAULT_GRID_SIZE;
+            delete migratedObject.layoutGrid;
+            delete migratedObject.configuration.layout;
+            return migratedObject;
+        }
+
+        function migrateFixedPositionConfiguration(elements, telemetryObjects, gridSize) {
+            const DEFAULT_STROKE = "transparent";
+            const DEFAULT_SIZE = "13px";
+            const DEFAULT_COLOR = "";
+            const DEFAULT_FILL = "";
+            let items = [];
+
+            elements.forEach(element => {
+                let item = {
+                    x: element.x,
+                    y: element.y,
+                    width: element.width,
+                    height: element.height,
+                    id: uuid()
+                };
+
+                if (!element.useGrid) {
+                    item.x = Math.round(item.x / gridSize[0]);
+                    item.y = Math.round(item.y / gridSize[1]);
+                    item.width = Math.round(item.width / gridSize[0]);
+                    item.height = Math.round(item.height / gridSize[1]);
+                }
+
+                if (element.type === "fixed.telemetry") {
+                    item.type = "telemetry-view";
+                    item.stroke = element.stroke || DEFAULT_STROKE;
+                    item.fill = element.fill || DEFAULT_FILL;
+                    item.color = element.color || DEFAULT_COLOR;
+                    item.size = element.size || DEFAULT_SIZE;
+                    item.identifier = telemetryObjects[element.id].identifier;
+                    item.displayMode = element.titled ? 'all' : 'value';
+                    item.value = openmct.telemetry.getMetadata(telemetryObjects[element.id]).getDefaultDisplayValue();
+                } else if (element.type === 'fixed.box') {
+                    item.type = "box-view";
+                    item.stroke = element.stroke || DEFAULT_STROKE;
+                    item.fill = element.fill || DEFAULT_FILL;
+                } else if (element.type === 'fixed.line') {
+                    item.type = "line-view";
+                    item.x2 = element.x2;
+                    item.y2 = element.y2;
+                    item.stroke = element.stroke || DEFAULT_STROKE;
+                    delete item.height;
+                    delete item.width;
+                } else if (element.type === 'fixed.text') {
+                    item.type = "text-view";
+                    item.text = element.text;
+                    item.stroke = element.stroke || DEFAULT_STROKE;
+                    item.fill = element.fill || DEFAULT_FILL;
+                    item.color = element.color || DEFAULT_COLOR;
+                    item.size = element.size || DEFAULT_SIZE;
+                } else if (element.type === 'fixed.image') {
+                    item.type = "image-view";
+                    item.url =element.url;
+                    item.stroke = element.stroke || DEFAULT_STROKE;
+                }
+
+                items.push(item);
+            });
+
+            return items;
+        }
+
+        return [
+            {
+                check(domainObject) {
+                    return domainObject.type === 'layout' && domainObject.configuration.layout;
+                },
+                migrate(domainObject) {
+                    let childObjects = {};
+                    let promises = Object.keys(domainObject.configuration.layout.panels).map(key => {
+                        return openmct.objects.get(key)
+                            .then(object => {
+                                childObjects[key] = object;
+                            });
+                    });
+
+                    return Promise.all(promises)
+                        .then(function () {
+                            return migrateDisplayLayout(domainObject, childObjects);
+                        });
+                }
+            },
+            {
+                check(domainObject) {
+                    return domainObject.type === 'telemetry.fixed' && domainObject.configuration['fixed-display'];
+                },
+                migrate(domainObject) {
+                    const DEFAULT_GRID_SIZE = [64, 16];
+                    let newLayoutObject = {
+                        identifier: domainObject.identifier,
+                        location: domainObject.location,
+                        name: domainObject.name,
+                        type: "layout"
+                    };
+                    let gridSize = domainObject.layoutGrid || DEFAULT_GRID_SIZE;
+                    let layoutType = openmct.types.get('layout');
+                    layoutType.definition.initialize(newLayoutObject);
+                    newLayoutObject.composition = domainObject.composition;
+                    newLayoutObject.configuration.layoutGrid = gridSize;
+
+                    let elements = domainObject.configuration['fixed-display'].elements;
+                    let telemetryObjects = {};
+                    let promises = elements.map(element => {
+                        if (element.id) {
+                            return openmct.objects.get(element.id)
+                                .then(object => {
+                                    telemetryObjects[element.id] = object;
+                                });
+                        }
+                    });
+
+                    return Promise.all(promises)
+                        .then(function () {
+                            newLayoutObject.configuration.items =
+                                migrateFixedPositionConfiguration(elements, telemetryObjects, gridSize);
+                            return newLayoutObject;
+                        });
+                }
+            },
+            {
+                check(domainObject) {
+                    return domainObject.type === 'table' &&
+                        domainObject.configuration.table;
+                },
+                migrate(domainObject) {
+                    let currentTableConfiguration = domainObject.configuration.table || {};
+                    let currentColumnConfiguration = currentTableConfiguration.columns || {};
+                    return getColumnNameKeyMap(domainObject).then(nameKeyMap => {
+                        let hiddenColumns = Object.keys(currentColumnConfiguration).filter(columnName => {
+                            return currentColumnConfiguration[columnName] === false;
+                        }).reduce((hiddenColumnsMap, hiddenColumnName) => {
+                            let key = nameKeyMap[hiddenColumnName];
+                            hiddenColumnsMap[key] = true;
+                            return hiddenColumnsMap;
+                        }, {});
+
+                        domainObject.configuration.hiddenColumns = hiddenColumns;
+                        delete domainObject.configuration.table;
+                        return domainObject;
+                    });
+                }
+            }
+        ];
+    }
+});

src/plugins/objectMigration/plugin.js

@@ -19,40 +19,35 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-@mixin labelValidate($sym, $c) {
-    > .label {
-        @include glyphAfter($sym);
-        &:after {
-            color: $c;
-            margin-left: $interiorMargin;
+
+import Migrations from './Migrations.js'
+
+export default function () {
+    return function (openmct) {
+        let migrations = Migrations(openmct);
+
+        function needsMigration(domainObject) {
+            return migrations.some(m => m.check(domainObject));
         }
-    }
-}
 
-
-mct-form.validates {
-    .form-row.validates {
-        > .label {
-            padding-right: $reqSymbolM; // Keep room for validation element
-            &:after {
-                font-size: $reqSymbolFontSize;
-            }
+        function migrateObject(domainObject) {
+            return migrations.filter(m => m.check(domainObject))[0]
+                .migrate(domainObject);
         }
-        &.invalid,
-        &.invalid.req { @include labelValidate($glyph-icon-x, $colorFormInvalid); }
 
-        &.valid,
-        &.valid.req { @include labelValidate($glyph-icon-check, $colorFormValid); }
-
-        &.req { @include labelValidate($glyph-icon-asterisk, $colorFormRequired); }
-    }
-}
-
-body.desktop .form-row.validates > .label {
-    &:after {
-        position: absolute;
-        right: $interiorMargin;
-        height: 100%;
-        line-height: 200%;
-    }
+        let wrappedFunction = openmct.objects.get;
+        openmct.objects.get = function migrate(identifier) {
+            return wrappedFunction.apply(openmct.objects, [identifier])
+                .then(function (object) {
+                    if (needsMigration(object)) {
+                        migrateObject(object)
+                            .then(newObject => {
+                                openmct.objects.mutate(newObject, 'persisted', Date.now());
+                                return newObject;
+                            });
+                    }
+                    return object;
+                });
+        }
+    };
 }

src/plugins/plot/plugin.js

@@ -250,7 +250,8 @@ define([
                                 {"has": "telemetry"}
                             ],
                             "model": {
-                                "composition": []
+                                "composition": [],
+                                "configuration": {}
                             },
                             "properties": [],
                             "priority": 890

src/plugins/plot/res/templates/mct-plot.html

@@ -136,7 +136,7 @@
             <span class="t-object-alert t-alert-unsynced"
                   title="This plot is not currently displaying the latest data.
                 Reset Pan/zoom to return to view latest data."></span>
-            <div class="gl-plot-display-area">
+            <div class="gl-plot-display-area has-local-controls has-cursor-guides">
                 <mct-ticks axis="xAxis">
                     <div class="gl-plot-hash hash-v"
                          ng-repeat="tick in ticks track by tick.value"
@@ -147,7 +147,6 @@
                      </div>
                 </mct-ticks>
 
-
                 <mct-ticks axis="yAxis">
                      <div class="gl-plot-hash hash-h"
                           ng-repeat="tick in ticks track by tick.value"
@@ -155,7 +154,6 @@
                      </div>
                 </mct-ticks>
 
-
                 <mct-chart config="config"
                            series="series"
                            rectangles="rectangles"
@@ -164,23 +162,37 @@
                            the-y-axis="yAxis">
                 </mct-chart>
 
-                <div class="h-local-controls h-local-controls-overlay-content"
-                     ng-show="plotHistory.length">
-                    <div class="l-btn-set">
-                        <a class="s-button icon-arrow-left"
-                           ng-click="plot.back()"
-                           title="Restore previous pan/zoom">
-                        </a>
-                        <a class="s-button icon-reset"
-                           ng-click="plot.clear()"
-                           title="Reset pan/zoom">
-                        </a>
+                <div class="gl-plot__local-controls h-local-controls h-local-controls--overlay-content c-local-controls--show-on-hover">
+                    <div class="c-button-set c-button-set--strip-h">
+                        <button class="c-button icon-minus"
+                                ng-click="plot.zoom('out', 0.2)"
+                                title="Zoom out">
+                        </button>
+                        <button class="c-button icon-plus"
+                                ng-click="plot.zoom('in', 0.2)"
+                                title="Zoom in">
+                        </button>
+                    </div>
+                    <div class="c-button-set c-button-set--strip-h"
+                         ng-disabled="!plotHistory.length">
+                        <button class="c-button icon-arrow-left"
+                                ng-click="plot.back()"
+                                title="Restore previous pan/zoom">
+                        </button>
+                        <button class="c-button icon-reset"
+                                ng-click="plot.clear()"
+                                title="Reset pan/zoom">
+                        </button>
                     </div>
                 </div>
 
-                <span class="t-wait-spinner loading" ng-show="plot.isRequestPending()">
-                </span>
-
+                <!--Cursor guides-->
+                <div class="c-cursor-guide--v js-cursor-guide--v"
+                    ng-show="plot.cursorGuide">
+                </div>
+                <div class="c-cursor-guide--h js-cursor-guide--h"
+                    ng-show="plot.cursorGuide">
+                </div>
             </div>
 
             <div class="gl-plot-axis-area gl-plot-x"

src/plugins/plot/res/templates/plot-options-browse.html

@@ -20,7 +20,7 @@
  at runtime from the About dialog for additional information.
 -->
 <div ng-controller="PlotOptionsController">
-    <ul class="tree c-tree">
+    <ul class="c-tree">
         <h2 title="Plot series display properties in this object">Plot Series</h2>
         <li ng-repeat="series in config.series.models">
             <div class="c-tree__item menus-to-left">

src/plugins/plot/res/templates/plot-options-edit.html

@@ -20,7 +20,7 @@
  at runtime from the About dialog for additional information.
 -->
 <div ng-controller="PlotOptionsController">
-    <ul class="tree c-tree">
+    <ul class="c-tree">
         <h2 title="Display properties for this object">Plot Series</h2>
         <li ng-repeat="series in plotSeries"
             ng-controller="PlotSeriesFormController"
@@ -87,13 +87,15 @@
                                   ng-style="{ background: series.get('color').asHexString() }">
                             </span>
                         </div>
-                        <div class="c-palette--inline c-palette__items" ng-show="toggle.isActive()">
-                            <div class="u-contents" ng-repeat="group in config.series.palette.groups()">
-                                <div class="c-palette__item"
-                                     ng-repeat="color in group"
-                                     ng-class="{ 'selected': series.get('color').equalTo(color) }"
-                                     ng-style="{ background: color.asHexString() }"
-                                     ng-click="setColor(color)">
+                        <div class="c-palette c-palette--color">
+                            <div class="c-palette__items" ng-show="toggle.isActive()">
+                                <div class="u-contents" ng-repeat="group in config.series.palette.groups()">
+                                    <div class="c-palette__item"
+                                         ng-repeat="color in group"
+                                         ng-class="{ 'selected': series.get('color').equalTo(color) }"
+                                         ng-style="{ background: color.asHexString() }"
+                                         ng-click="setColor(color)">
+                                    </div>
                                 </div>
                             </div>
                         </div>

src/plugins/plot/res/templates/plot.html

@@ -20,31 +20,34 @@
  at runtime from the About dialog for additional information.
 -->
 <span ng-controller="PlotController as controller"
-    class="abs holder holder-plot has-control-bar"
-    ng-class="{
-        'loading': !!pending
-    }"
-    >
+    class="abs holder holder-plot has-control-bar">
     <div class="l-control-bar" ng-show="!controller.hideExportButtons">
-         <span class="l-btn-set">
-            <a class="s-button t-export labeled icon-download"
+         <span class="c-button-set c-button-set--strip-h">
+            <button class="c-button icon-download"
                ng-click="controller.exportPNG()"
                title="Export This View's Data as PNG">
-                PNG
-            </a>
-            <a class="s-button t-export labeled"
+                 <span class="c-button__label">PNG</span>
+            </button>
+            <button class="c-button"
                ng-click="controller.exportJPG()"
                title="Export This View's Data as JPG">
-                JPG
-            </a>
+                 <span class="c-button__label">JPG</span>
+            </button>
         </span>
+        <button class="c-button icon-crosshair"
+                ng-class="{ 'is-active': controller.cursorGuide }"
+                ng-click="controller.toggleCursorGuide($event)"
+                title="Toggle cursor guides">
+        </button>
     </div>
 
     <div class="l-view-section">
+        <div class="c-loading--overlay loading"
+            ng-show="!!pending"></div>
         <mct-plot config="controller.config"
                   series="series"
                   the-y-axis="yAxis"
                   the-x-axis="xAxis">
-                  </mct-plot>
+        </mct-plot>
     </div>
 </span>

src/plugins/plot/res/templates/stacked-plot.html

@@ -20,26 +20,29 @@
  at runtime from the About dialog for additional information.
 -->
 <span ng-controller="StackedPlotController as stackedPlot"
-      class="abs holder holder-plot has-control-bar t-plot-stacked"
-      ng-class="{
-          'loading': !!currentRequest.pending
-      }">
-
+      class="abs holder holder-plot has-control-bar t-plot-stacked">
     <div class="l-control-bar" ng-show="!stackedPlot.hideExportButtons">
-       <span class="l-btn-set">
-          <a class="s-button t-export labeled icon-download"
+       <span class="c-button-set c-button-set--strip-h">
+          <button class="c-button icon-download"
              ng-click="stackedPlot.exportPNG()"
              title="Export This View's Data as PNG">
-              PNG
-          </a>
-          <a class="s-button t-export labeled"
+              <span class="c-button__label">PNG</span>
+          </button>
+          <button class="c-button"
              ng-click="stackedPlot.exportJPG()"
              title="Export This View's Data as JPG">
-              JPG
-          </a>
-      </span>
+              <span class="c-button__label">JPG</span>
+          </button>
+        </span>
+        <button class="c-button icon-crosshair"
+                ng-class="{ 'is-active': stackedPlot.cursorGuide }"
+                ng-click="stackedPlot.toggleCursorGuide($event)"
+                title="Toggle cursor guides">
+        </button>
     </div>
     <div class="l-view-section">
+        <div class="c-loading--overlay loading"
+             ng-show="!!currentRequest.pending"></div>
         <div class="gl-plot child-frame"
             ng-repeat="telemetryObject in telemetryObjects"
             ng-class="{

src/plugins/plot/src/configuration/PlotConfigurationModel.js

@@ -101,6 +101,19 @@ define([
                     seriesConfig.identifier.namespace === identifier.namespace;
             })[0];
         },
+        /**
+         * Retrieve the persisted filters for a given identifier.
+         */
+        getPersistedFilters: function (identifier) {
+            var domainObject = this.get('domainObject'),
+                keystring = this.openmct.objects.makeKeyString(identifier);
+
+            if (!domainObject.configuration || !domainObject.configuration.filters) {
+                return;
+            }
+
+            return domainObject.configuration.filters[keystring];
+        },
         /**
          * Update the domain object with the given value.
          */

src/plugins/plot/src/configuration/PlotSeries.js

@@ -84,6 +84,7 @@ define([
             this.listenTo(this, 'change:xKey', this.onXKeyChange, this);
             this.listenTo(this, 'change:yKey', this.onYKeyChange, this);
             this.persistedConfig = options.persistedConfig;
+            this.filters = options.filters;
 
             Model.apply(this, arguments);
             this.onXKeyChange(this.get('xKey'));
@@ -139,13 +140,16 @@ define([
          * @returns {Promise}
          */
         fetch: function (options) {
-            options = _.extend({}, {size: 1000, strategy: 'minmax'}, options || {});
+            options = _.extend({}, {size: 1000, strategy: 'minmax', filters: this.filters}, options || {});
             if (!this.unsubscribe) {
                 this.unsubscribe = this.openmct
                     .telemetry
                     .subscribe(
                         this.domainObject,
-                        this.add.bind(this)
+                        this.add.bind(this),
+                        {
+                            filters: this.filters
+                        }
                     );
             }
 
@@ -360,6 +364,19 @@ define([
                 }
             }
 
+        },
+        /**
+         * Updates filters, clears the plot series, unsubscribes and resubscribes
+         * @public
+         */
+        updateFiltersAndRefresh: function (updatedFilters) {
+            this.filters = updatedFilters;
+            this.reset();
+            if (this.unsubscribe) {
+                this.unsubscribe();
+                delete this.unsubscribe;
+            }
+            this.fetch();
         }
     });