Filter indicators styling

- Reverting mistakenly changed file;

example/generator/GeneratorMetadataProvider.js

@@ -99,10 +99,10 @@ define([
 
     GeneratorMetadataProvider.prototype.getMetadata = function (domainObject) {
         return _.extend(
-                {},
-                domainObject.telemetry,
-                METADATA_BY_TYPE[domainObject.type]
-            );
+            {},
+            domainObject.telemetry,
+            METADATA_BY_TYPE[domainObject.type]
+        );
     };
 
     return GeneratorMetadataProvider;

index.html

@@ -86,6 +86,7 @@
         openmct.install(openmct.plugins.LADTable());
         openmct.install(openmct.plugins.Filters(['table', 'telemetry.plot.overlay']));
         openmct.install(openmct.plugins.ObjectMigration());
+        openmct.install(openmct.plugins.GoToOriginalAction());
         openmct.start();
     </script>
 </html>

package.json

@@ -55,7 +55,7 @@
     "node-bourbon": "^4.2.3",
     "node-sass": "^4.9.2",
     "painterro": "^0.2.65",
-    "printj": "^1.1.0",
+    "printj": "^1.2.1",
     "raw-loader": "^0.5.1",
     "request": "^2.69.0",
     "split": "^1.0.0",

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

@@ -9,17 +9,17 @@
                          ng-model="ngModel"
                          ng-show="ngModel.progressPerc !== undefined"></mct-include>
         </div>
-        <div class="c-overlay__button-bar">
-            <button ng-repeat="dialogOption in ngModel.options"
+    </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"
+            {{dialogOption.label}}
+        </button>
+        <button class="c-button c-button--major"
                 ng-if="ngModel.primaryOption"
                 ng-click="ngModel.primaryOption.callback()">
-                    {{ngModel.primaryOption.label}}
-            </button>
-        </div>
+            {{ngModel.primaryOption.label}}
+        </button>
     </div>
 </div>

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

@@ -64,7 +64,6 @@ define(
          * @returns boolean
          */
         EditorCapability.prototype.inEditContext = function () {
-            console.warn('DEPRECATION WARNING: isEditing checks must be done via openmct.editor.');
             return this.openmct.editor.isEditing();
         };
 
@@ -74,7 +73,6 @@ define(
          * @returns {*}
          */
         EditorCapability.prototype.isEditContextRoot = function () {
-            console.warn('DEPRECATION WARNING: isEditing checks must be done via openmct.editor.');
             return this.openmct.editor.isEditing();
         };
 

platform/commonUI/edit/src/services/TransactionManager.js

@@ -77,14 +77,19 @@ define([], function () {
                 return promiseFn().then(nextFn);
             };
         }
-
-        if (!this.isScheduled(id)) {
-            this.clearTransactionFns[id] =
-                this.transactionService.addToTransaction(
-                    chain(onCommit, release),
-                    chain(onCancel, release)
-                );
+        /**
+         * Clear any existing persistence calls for object with given ID. This ensures only the most recent persistence
+         * call is executed. This should prevent stale objects being persisted and overwriting fresh ones.
+         */
+        if (this.isScheduled(id)) {
+            this.clearTransactionsFor(id);
         }
+
+        this.clearTransactionFns[id] =
+            this.transactionService.addToTransaction(
+                chain(onCommit, release),
+                chain(onCancel, release)
+            );
     };
 
     /**

platform/commonUI/edit/test/services/TransactionManagerSpec.js

@@ -93,24 +93,33 @@ define(
                     expect(mockOnCancel).toHaveBeenCalled();
                 });
 
-                it("ignores subsequent calls for the same object", function () {
-                    manager.addToTransaction(
-                        testId,
-                        jasmine.createSpy(),
-                        jasmine.createSpy()
-                    );
-                    expect(mockTransactionService.addToTransaction.calls.count())
-                        .toEqual(1);
-                });
+                describe("Adds callbacks to transaction", function () {
+                    beforeEach(function () {
+                        spyOn(manager, 'clearTransactionsFor');
+                        manager.clearTransactionsFor.and.callThrough();
+                    });
 
-                it("accepts subsequent calls for other objects", function () {
-                    manager.addToTransaction(
-                        'other-id',
-                        jasmine.createSpy(),
-                        jasmine.createSpy()
-                    );
-                    expect(mockTransactionService.addToTransaction.calls.count())
-                        .toEqual(2);
+                    it("and clears pending calls if same object", function () {
+                        manager.addToTransaction(
+                            testId,
+                            jasmine.createSpy(),
+                            jasmine.createSpy()
+                        );
+                        expect(manager.clearTransactionsFor).toHaveBeenCalledWith(testId);
+                    });
+
+                    it("and does not clear pending calls if different object", function () {
+                        manager.addToTransaction(
+                            'other-id',
+                            jasmine.createSpy(),
+                            jasmine.createSpy()
+                        );
+                        expect(manager.clearTransactionsFor).not.toHaveBeenCalled();
+                    });
+
+                    afterEach(function () {
+                        expect(mockTransactionService.addToTransaction.calls.count()).toEqual(2);
+                    });
                 });
 
                 it("does not remove callbacks from the transaction", function () {

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

@@ -54,6 +54,7 @@ define(
                     if (isDestroyed) {
                         return;
                     }
+
                     var removeSelectable = openmct.selection.selectable(
                         element[0],
                         scope.$eval(attrs.mctSelectable),

platform/core/src/runs/TransactingMutationListener.js

@@ -43,23 +43,10 @@ define([], function () {
         var mutationTopic = topic('mutation');
         mutationTopic.listen(function (domainObject) {
             var persistence = domainObject.getCapability('persistence');
-            var wasActive = transactionService.isActive();
             cacheService.put(domainObject.getId(), domainObject.getModel());
 
             if (hasChanged(domainObject)) {
-
-                if (!wasActive) {
-                    transactionService.startTransaction();
-                }
-
-                transactionService.addToTransaction(
-                    persistence.persist.bind(persistence),
-                    persistence.refresh.bind(persistence)
-                );
-
-                if (!wasActive) {
-                    transactionService.commit();
-                }
+                persistence.persist();
             }
         });
     }

platform/core/test/runs/TransactingMutationListenerSpec.js

@@ -24,22 +24,27 @@ define(
     ["../../src/runs/TransactingMutationListener"],
     function (TransactingMutationListener) {
 
-        xdescribe("TransactingMutationListener", function () {
+        describe("TransactingMutationListener", function () {
             var mockTopic,
                 mockMutationTopic,
+                mockCacheService,
                 mockTransactionService,
                 mockDomainObject,
+                mockModel,
                 mockPersistence;
 
             beforeEach(function () {
                 mockTopic = jasmine.createSpy('topic');
                 mockMutationTopic =
                     jasmine.createSpyObj('mutation', ['listen']);
+                mockCacheService =
+                    jasmine.createSpyObj('cacheService', [
+                        'put'
+                    ]);
                 mockTransactionService =
                     jasmine.createSpyObj('transactionService', [
                         'isActive',
                         'startTransaction',
-                        'addToTransaction',
                         'commit'
                     ]);
                 mockDomainObject = jasmine.createSpyObj(
@@ -52,18 +57,24 @@ define(
                 );
 
                 mockTopic.and.callFake(function (t) {
-                    return (t === 'mutation') && mockMutationTopic;
+                    expect(t).toBe('mutation');
+                    return mockMutationTopic;
                 });
 
+                mockDomainObject.getId.and.returnValue('mockId');
                 mockDomainObject.getCapability.and.callFake(function (c) {
-                    return (c === 'persistence') && mockPersistence;
+                    expect(c).toBe('persistence');
+                    return mockPersistence;
                 });
+                mockModel = {};
+                mockDomainObject.getModel.and.returnValue(mockModel);
 
                 mockPersistence.persisted.and.returnValue(true);
 
                 return new TransactingMutationListener(
                     mockTopic,
-                    mockTransactionService
+                    mockTransactionService,
+                    mockCacheService
                 );
             });
 
@@ -72,48 +83,27 @@ define(
                     .toHaveBeenCalledWith(jasmine.any(Function));
             });
 
-            [false, true].forEach(function (isActive) {
-                var verb = isActive ? "is" : "isn't";
+            it("calls persist if the model has changed", function () {
+                mockModel.persisted = Date.now();
 
-                function onlyWhenInactive(expectation) {
-                    return isActive ? expectation.not : expectation;
-                }
+                //Mark the model dirty by setting the mutated date later than the last persisted date.
+                mockModel.modified = mockModel.persisted + 1;
 
-                describe("when a transaction " + verb + " active", function () {
-                    var innerVerb = isActive ? "does" : "doesn't";
+                mockMutationTopic.listen.calls.mostRecent()
+                    .args[0](mockDomainObject);
 
-                    beforeEach(function () {
-                        mockTransactionService.isActive.and.returnValue(isActive);
-                    });
+                expect(mockPersistence.persist).toHaveBeenCalled();
+            });
 
-                    describe("and mutation occurs", function () {
-                        beforeEach(function () {
-                            mockMutationTopic.listen.calls.mostRecent()
-                                .args[0](mockDomainObject);
-                        });
+            it("does not call persist if the model has not changed", function () {
+                mockModel.persisted = Date.now();
 
+                mockModel.modified = mockModel.persisted;
 
-                        it(innerVerb + " start a new transaction", function () {
-                            onlyWhenInactive(
-                                expect(mockTransactionService.startTransaction)
-                            ).toHaveBeenCalled();
-                        });
+                mockMutationTopic.listen.calls.mostRecent()
+                    .args[0](mockDomainObject);
 
-                        it("adds to the active transaction", function () {
-                            expect(mockTransactionService.addToTransaction)
-                                .toHaveBeenCalledWith(
-                                    jasmine.any(Function),
-                                    jasmine.any(Function)
-                                );
-                        });
-
-                        it(innerVerb + " immediately commit", function () {
-                            onlyWhenInactive(
-                                expect(mockTransactionService.commit)
-                            ).toHaveBeenCalled();
-                        });
-                    });
-                });
+                expect(mockPersistence.persist).not.toHaveBeenCalled();
             });
         });
     }

platform/entanglement/bundle.js

@@ -24,7 +24,6 @@ define([
     "./src/actions/MoveAction",
     "./src/actions/CopyAction",
     "./src/actions/LinkAction",
-    "./src/actions/GoToOriginalAction",
     "./src/actions/SetPrimaryLocationAction",
     "./src/services/LocatingCreationDecorator",
     "./src/services/LocatingObjectDecorator",
@@ -41,7 +40,6 @@ define([
     MoveAction,
     CopyAction,
     LinkAction,
-    GoToOriginalAction,
     SetPrimaryLocationAction,
     LocatingCreationDecorator,
     LocatingObjectDecorator,
@@ -104,14 +102,6 @@ define([
                         "linkService"
                     ]
                 },
-                {
-                    "key": "follow",
-                    "name": "Go To Original",
-                    "description": "Go to the original, un-linked instance of this object.",
-                    "cssClass": "",
-                    "category": "contextual",
-                    "implementation": GoToOriginalAction
-                },
                 {
                     "key": "locate",
                     "name": "Set Primary Location",

platform/entanglement/src/actions/GoToOriginalAction.js

@@ -1,60 +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 () {
-
-        /**
-         * Implements the "Go To Original" action, which follows a link back
-         * to an original instance of an object.
-         *
-         * @implements {Action}
-         * @constructor
-         * @private
-         * @memberof platform/entanglement
-         * @param {ActionContext} context the context in which the action
-         *        will be performed
-         */
-        function GoToOriginalAction(context) {
-            this.domainObject = context.domainObject;
-        }
-
-        GoToOriginalAction.prototype.perform = function () {
-            return this.domainObject.getCapability("location").getOriginal()
-                .then(function (originalObject) {
-                    var actionCapability =
-                        originalObject.getCapability("action");
-                    return actionCapability &&
-                            actionCapability.perform("navigate");
-                });
-        };
-
-        GoToOriginalAction.appliesTo = function (context) {
-            var domainObject = context.domainObject;
-            return domainObject && domainObject.hasCapability("location") &&
-                domainObject.getCapability("location").isLink();
-        };
-
-        return GoToOriginalAction;
-    }
-);
-

platform/entanglement/test/actions/GoToOriginalActionSpec.js

@@ -1,93 +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(
-    [
-        '../../src/actions/GoToOriginalAction',
-        '../DomainObjectFactory',
-        '../ControlledPromise'
-    ],
-    function (GoToOriginalAction, domainObjectFactory, ControlledPromise) {
-
-        describe("The 'go to original' action", function () {
-            var testContext,
-                originalDomainObject,
-                mockLocationCapability,
-                mockOriginalActionCapability,
-                originalPromise,
-                action;
-
-            beforeEach(function () {
-                mockLocationCapability = jasmine.createSpyObj(
-                    'location',
-                    ['isLink', 'isOriginal', 'getOriginal']
-                );
-                mockOriginalActionCapability = jasmine.createSpyObj(
-                    'action',
-                    ['perform', 'getActions']
-                );
-                originalPromise = new ControlledPromise();
-                mockLocationCapability.getOriginal.and.returnValue(originalPromise);
-                mockLocationCapability.isLink.and.returnValue(true);
-                mockLocationCapability.isOriginal.and.callFake(function () {
-                    return !mockLocationCapability.isLink();
-                });
-                testContext = {
-                    domainObject: domainObjectFactory({
-                        capabilities: {
-                            location: mockLocationCapability
-                        }
-                    })
-                };
-                originalDomainObject = domainObjectFactory({
-                    capabilities: {
-                        action: mockOriginalActionCapability
-                    }
-                });
-
-                action = new GoToOriginalAction(testContext);
-            });
-
-            it("is applicable to links", function () {
-                expect(GoToOriginalAction.appliesTo(testContext))
-                    .toBeTruthy();
-            });
-
-            it("is not applicable to originals", function () {
-                mockLocationCapability.isLink.and.returnValue(false);
-                expect(GoToOriginalAction.appliesTo(testContext))
-                    .toBeFalsy();
-            });
-
-            it("navigates to original objects when performed", function () {
-                expect(mockOriginalActionCapability.perform)
-                    .not.toHaveBeenCalled();
-                action.perform();
-                originalPromise.resolve(originalDomainObject);
-                expect(mockOriginalActionCapability.perform)
-                    .toHaveBeenCalledWith('navigate');
-            });
-
-        });
-    }
-);

platform/import-export/src/actions/ImportAsJSONAction.js

@@ -64,12 +64,30 @@ define(['zepto'], function ($) {
         var tree = this.generateNewIdentifiers(objTree);
         var rootId = tree.rootId;
         var rootObj = this.instantiate(tree.openmct[rootId], rootId);
+        var newStyleParent = parent.useCapability('adapter');
+        var newStyleRootObj = rootObj.useCapability('adapter');
 
-        // Instantiate all objects in tree with their newly genereated ids,
-        // adding each to its rightful parent's composition
-        rootObj.getCapability("location").setPrimaryLocation(parent.getId());
-        this.deepInstantiate(rootObj, tree.openmct, []);
-        parent.getCapability("composition").add(rootObj);
+        if (this.openmct.composition.checkPolicy(newStyleParent, newStyleRootObj)) {
+            // Instantiate all objects in tree with their newly generated ids,
+            // adding each to its rightful parent's composition
+            rootObj.getCapability("location").setPrimaryLocation(parent.getId());
+            this.deepInstantiate(rootObj, tree.openmct, []);
+            parent.getCapability("composition").add(rootObj);
+        } else {
+            var dialog = this.openmct.overlays.dialog({
+                iconClass: 'alert',
+                message: "We're sorry, but you cannot import that object type into this object.",
+                buttons: [
+                    {
+                        label: "Ok",
+                        emphasis: true,
+                        callback: function () {
+                            dialog.dismiss();
+                        }
+                    }
+                ]
+            });
+        }
     };
 
     ImportAsJSONAction.prototype.deepInstantiate = function (parent, tree, seen) {
@@ -80,15 +98,17 @@ define(['zepto'], function ($) {
             var newObj;
 
             seen.push(parent.getId());
-            parentModel.composition.forEach(function (childId, index) {
-                if (!tree[childId] || seen.includes(childId)) {
+
+            parentModel.composition.forEach(function (childId) {
+                let keystring = this.openmct.objects.makeKeyString(childId);
+
+                if (!tree[keystring] || seen.includes(keystring)) {
                     return;
                 }
 
-                newObj = this.instantiate(tree[childId], childId);
-                parent.getCapability("composition").add(newObj);
+                newObj = this.instantiate(tree[keystring], keystring);
                 newObj.getCapability("location")
-                    .setPrimaryLocation(tree[childId].location);
+                    .setPrimaryLocation(tree[keystring].location);
                 this.deepInstantiate(newObj, tree, seen);
             }, this);
         }

src/adapter/bundle.js

@@ -36,7 +36,7 @@ define([
     './runs/RegisterLegacyTypes',
     './services/LegacyObjectAPIInterceptor',
     './views/installLegacyViews',
-    './policies/legacyCompositionPolicyAdapter',
+    './policies/LegacyCompositionPolicyAdapter',
     './actions/LegacyActionAdapter'
 ], function (
     legacyRegistry,

src/adapter/views/LegacyViewProvider.js

@@ -45,15 +45,30 @@ define([
             view: function (domainObject) {
                 let $rootScope = openmct.$injector.get('$rootScope');
                 let templateLinker = openmct.$injector.get('templateLinker');
-                let scope = $rootScope.$new();
+                let scope = $rootScope.$new(true);
                 let legacyObject = convertToLegacyObject(domainObject);
                 let isDestroyed = false;
+                let unlistenToStatus;
+                let element;
                 scope.domainObject = legacyObject;
                 scope.model = legacyObject.getModel();
-
+                let child;
+                let parent;
 
                 return {
                     show: function (container) {
+                        parent = container;
+                        child = document.createElement('div');
+                        parent.appendChild(child);
+                        let statusCapability = legacyObject.getCapability('status');
+                        unlistenToStatus = statusCapability.listen((newStatus) => {
+                            child.classList.remove('s-status-timeconductor-unsynced');
+
+                            if (newStatus.includes('timeconductor-unsynced')) {
+                                child.classList.add('s-status-timeconductor-unsynced');
+                            }
+                        });
+
                         // TODO: implement "gestures" support ?
                         let uses = legacyView.uses || [];
                         let promises = [];
@@ -74,12 +89,13 @@ define([
                             uses.forEach(function (key, i) {
                                 scope[key] = results[i];
                             });
+                            element = openmct.$angular.element(child);
                             templateLinker.link(
                                 scope,
-                                openmct.$angular.element(container),
+                                element,
                                 legacyView
                             );
-                            container.classList.add('u-contents');
+                            child.classList.add('u-contents');
                         }
 
                         if (promises.length) {
@@ -93,7 +109,12 @@ define([
                         }
                     },
                     destroy: function () {
+                        element.off();
+                        element.remove();
                         scope.$destroy();
+                        element = null;
+                        scope = null;
+                        unlistenToStatus();
                     }
                 }
             },

src/adapter/views/TypeInspectorViewProvider.js

@@ -25,7 +25,7 @@ define([
             cssClass: representation.cssClass,
             description: representation.description,
             canView: function (selection) {
-                if (selection.length === 0 || selection[0].length === 0) {
+                if (selection.length !== 1 || selection[0].length === 0) {
                     return false;
                 }
 
@@ -41,15 +41,18 @@ define([
                 let domainObject = selection[0][0].context.item;
                 let $rootScope = openmct.$injector.get('$rootScope');
                 let templateLinker = openmct.$injector.get('templateLinker');
-                let scope = $rootScope.$new();
+                let scope = $rootScope.$new(true);
                 let legacyObject = convertToLegacyObject(domainObject);
                 let isDestroyed = false;
+                let element;
                 scope.domainObject = legacyObject;
                 scope.model = legacyObject.getModel();
 
 
                 return {
                     show: function (container) {
+                        let child = document.createElement('div');
+                        container.appendChild(child);
                         // TODO: implement "gestures" support ?
                         let uses = representation.uses || [];
                         let promises = [];
@@ -70,9 +73,10 @@ define([
                             uses.forEach(function (key, i) {
                                 scope[key] = results[i];
                             });
+                            element = openmct.$angular.element(child)
                             templateLinker.link(
                                 scope,
-                                openmct.$angular.element(container),
+                                element,
                                 representation
                             );
                             container.style.height = '100%';
@@ -89,7 +93,11 @@ define([
                         }
                     },
                     destroy: function () {
+                        element.off();
+                        element.remove();
                         scope.$destroy();
+                        element = null;
+                        scope = null;
                     }
                 }
             }

src/api/composition/CompositionAPISpec.js

@@ -22,8 +22,20 @@ define([
             publicAPI = {};
             publicAPI.objects = jasmine.createSpyObj('ObjectAPI', [
                 'get',
-                'mutate'
+                'mutate',
+                'observe',
+                'areIdsEqual'
             ]);
+
+            publicAPI.objects.areIdsEqual.and.callFake(function (id1, id2) {
+                return id1.namespace === id2.namespace && id1.key === id2.key;
+            });
+
+            publicAPI.composition = jasmine.createSpyObj('CompositionAPI', [
+                'checkPolicy'
+            ]);
+            publicAPI.composition.checkPolicy.and.returnValue(true);
+
             publicAPI.objects.eventEmitter = jasmine.createSpyObj('eventemitter', [
                 'on'
             ]);
@@ -91,7 +103,7 @@ define([
                 beforeEach(function () {
                     listener = jasmine.createSpy('reorderListener');
                     composition.on('reorder', listener);
-                    
+
                     return composition.load();
                 });
                 it('', function () {
@@ -119,49 +131,16 @@ define([
                     expect(newComposition[2].key).toEqual('a');
                 })
             });
-
-            // TODO: Implement add/removal in new default provider.
-            xit('synchronizes changes between instances', function () {
-                var otherComposition = compositionAPI.get(domainObject);
-                var addListener = jasmine.createSpy('addListener');
-                var removeListener = jasmine.createSpy('removeListener');
-                var otherAddListener = jasmine.createSpy('otherAddListener');
-                var otherRemoveListener = jasmine.createSpy('otherRemoveListener');
+            it('supports adding an object to composition', function () {
+                let addListener = jasmine.createSpy('addListener');
+                let mockChildObject = {
+                    identifier: {key: 'mock-key', namespace: ''}
+                };
                 composition.on('add', addListener);
-                composition.on('remove', removeListener);
-                otherComposition.on('add', otherAddListener);
-                otherComposition.on('remove', otherRemoveListener);
+                composition.add(mockChildObject);
 
-                return Promise.all([composition.load(), otherComposition.load()])
-                    .then(function () {
-                        expect(addListener).toHaveBeenCalled();
-                        expect(otherAddListener).toHaveBeenCalled();
-                        expect(removeListener).not.toHaveBeenCalled();
-                        expect(otherRemoveListener).not.toHaveBeenCalled();
-
-                        var object = addListener.calls.mostRecent().args[0];
-                        composition.remove(object);
-                        expect(removeListener).toHaveBeenCalled();
-                        expect(otherRemoveListener).toHaveBeenCalled();
-
-                        addListener.reset();
-                        otherAddListener.reset();
-                        composition.add(object);
-                        expect(addListener).toHaveBeenCalled();
-                        expect(otherAddListener).toHaveBeenCalled();
-
-                        removeListener.reset();
-                        otherRemoveListener.reset();
-                        otherComposition.remove(object);
-                        expect(removeListener).toHaveBeenCalled();
-                        expect(otherRemoveListener).toHaveBeenCalled();
-
-                        addListener.reset();
-                        otherAddListener.reset();
-                        otherComposition.add(object);
-                        expect(addListener).toHaveBeenCalled();
-                        expect(otherAddListener).toHaveBeenCalled();
-                    });
+                expect(domainObject.composition.length).toBe(4);
+                expect(domainObject.composition[3]).toEqual(mockChildObject.identifier);
             });
         });
 
@@ -184,7 +163,9 @@ define([
                                 key: 'thing'
                             }
                         ]);
-                    }
+                    },
+                    add: jasmine.createSpy('add'),
+                    remove: jasmine.createSpy('remove')
                 };
                 domainObject = {
                     identifier: {
@@ -214,6 +195,25 @@ define([
                     });
                 });
             });
+            describe('Calling add or remove', function () {
+                let mockChildObject;
+
+                beforeEach(function () {
+                    mockChildObject = {
+                        identifier: {key: 'mock-key', namespace: ''}
+                    };
+                    composition.add(mockChildObject);
+                });
+
+                it('calls add on the provider', function () {
+                    expect(customProvider.add).toHaveBeenCalledWith(domainObject, mockChildObject.identifier);
+                });
+
+                it('calls remove on the provider', function () {
+                    composition.remove(mockChildObject);
+                    expect(customProvider.remove).toHaveBeenCalledWith(domainObject, mockChildObject.identifier);
+                });
+            });
         });
 
         describe('dynamic custom composition', function () {

src/api/composition/CompositionCollection.js

@@ -75,9 +75,7 @@ define([
             throw new Error('Event not supported by composition: ' + event);
         }
         if (!this.mutationListener) {
-            this.mutationListener = this.publicAPI.objects.observe(this.domainObject, '*', (newDomainObject) => {
-                this.domainObject = newDomainObject;
-            })
+            this._synchronize();
         }
         if (this.provider.on && this.provider.off) {
             if (event === 'add') {
@@ -134,10 +132,8 @@ define([
 
         this.listeners[event].splice(index, 1);
         if (this.listeners[event].length === 0) {
-            if (this.mutationListener) {
-                this.mutationListener();
-                delete this.mutationListener;
-            }
+            this._destroy();
+
             // Remove provider listener if this is the last callback to
             // be removed.
             if (this.provider.off && this.provider.on) {
@@ -181,6 +177,9 @@ define([
      */
     CompositionCollection.prototype.add = function (child, skipMutate) {
         if (!skipMutate) {
+            if (!this.publicAPI.composition.checkPolicy(this.domainObject, child)) {
+                throw `Object of type ${child.type} cannot be added to object of type ${this.domainObject.type}`;
+            }
             this.provider.add(this.domainObject, child.identifier);
         } else {
             this.emit('add', child);
@@ -272,6 +271,19 @@ define([
         this.remove(child, true);
     };
 
+    CompositionCollection.prototype._synchronize = function () {
+        this.mutationListener = this.publicAPI.objects.observe(this.domainObject, '*', (newDomainObject) => {
+            this.domainObject = JSON.parse(JSON.stringify(newDomainObject));
+        });
+    };
+
+    CompositionCollection.prototype._destroy = function () {
+        if (this.mutationListener) {
+            this.mutationListener();
+            delete this.mutationListener;
+        }
+    };
+
     /**
      * Emit events.
      * @private

src/api/composition/DefaultCompositionProvider.js

@@ -48,24 +48,11 @@ define([
         this.listeningTo = {};
         this.onMutation = this.onMutation.bind(this);
 
-        this.cannotContainDuplicates = this.cannotContainDuplicates.bind(this);
         this.cannotContainItself = this.cannotContainItself.bind(this);
 
-        compositionAPI.addPolicy(this.cannotContainDuplicates);
         compositionAPI.addPolicy(this.cannotContainItself);
     }
 
-    /**
-     * @private
-     */
-    DefaultCompositionProvider.prototype.cannotContainDuplicates = function (parent, child) {
-        return this.appliesTo(parent) &&
-            parent.composition.findIndex((composeeId) => {
-                return composeeId.namespace === child.identifier.namespace &&
-                    composeeId.key === child.identifier.key;
-            }) === -1;
-    }
-
     /**
      * @private
      */
@@ -199,9 +186,18 @@ define([
      * @memberof module:openmct.CompositionProvider#
      * @method add
      */
-    DefaultCompositionProvider.prototype.add = function (domainObject, child) {
-        throw new Error('Default Provider does not implement adding.');
-        // TODO: this needs to be synchronized via mutation
+    DefaultCompositionProvider.prototype.add = function (parent, childId) {
+        if (!this.includes(parent, childId)) {
+            parent.composition.push(childId);
+            this.publicAPI.objects.mutate(parent, 'composition', parent.composition);
+        }
+    };
+    /**
+     * @private
+     */
+    DefaultCompositionProvider.prototype.includes = function (parent, childId) {
+        return parent.composition.findIndex(composee =>
+            this.publicAPI.objects.areIdsEqual(composee, childId)) !== -1;
     };
 
     DefaultCompositionProvider.prototype.reorder = function (domainObject, oldIndex, newIndex) {

src/api/overlays/components/OverlayComponent.vue

@@ -92,6 +92,7 @@
             display: flex;
             flex-direction: column;
             flex: 1 1 auto;
+            height: 0; // Chrome 73 overflow bug fix
             overflow: auto;
             padding-right: $interiorMargin; // fend off scroll bar
         }

src/plugins/LADTable/LADTableViewProvider.js

@@ -21,7 +21,7 @@
  *****************************************************************************/
 
 define([
-    './components/LadTable.vue',
+    './components/LADTable.vue',
     'vue'
 ], function (
     LadTableComponent,

src/plugins/LADTable/components/LADTable.vue

@@ -41,7 +41,7 @@
 
 <script>
 import lodash from 'lodash';
-import LadRow from './LadRow.vue';
+import LadRow from './LADRow.vue';
 
 export default {
     inject: ['openmct', 'domainObject'],

src/plugins/LADTable/components/LadTableSet.vue

@@ -52,7 +52,7 @@
 
 <script>
     import lodash from 'lodash';
-    import LadRow from './LadRow.vue';
+    import LadRow from './LADRow.vue';
 
     export default {
     inject: ['openmct', 'domainObject'],

src/plugins/displayLayout/AlphanumericFormatViewProvider.js

@@ -0,0 +1,77 @@
+/*****************************************************************************
+ * 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/AlphanumericFormatView.vue',
+    'vue'
+], function (AlphanumericFormatView, Vue) {
+
+    function AlphanumericFormatViewProvider(openmct, options) {
+        function isTelemetryObject(selectionPath) {
+            let selectedObject = selectionPath[0].context.item;
+            let parentObject = selectionPath[1].context.item;
+            return parentObject && 
+                parentObject.type === 'layout' &&
+                selectedObject &&
+                openmct.telemetry.isTelemetryObject(selectedObject) &&
+                !options.showAsView.includes(selectedObject.type)
+        }
+
+        return {
+            key: 'alphanumeric-format',
+            name: 'Alphanumeric Format',
+            canView: function (selection) {
+                if (selection.length === 0 || selection[0].length === 1) {
+                    return false;
+                }
+
+                return selection.every(isTelemetryObject);
+            },
+            view: function (selection) {
+                let component;
+                return {
+                    show: function (element) {
+                        component = new Vue({
+                            provide: {
+                                openmct
+                            },
+                            components: {
+                                AlphanumericFormatView: AlphanumericFormatView.default
+                            },
+                            template: '<alphanumeric-format-view></alphanumeric-format-view>',
+                            el: element
+                        });
+                    },
+                    destroy: function () {
+                        component.$destroy();
+                        component = undefined;
+                    }
+                }
+            },
+            priority: function () {
+                return 1;
+            }
+        }
+    }
+
+    return AlphanumericFormatViewProvider;
+});

src/plugins/displayLayout/components/AlphanumericFormatView.vue

@@ -0,0 +1,90 @@
+/*****************************************************************************
+ * 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>
+    <div class="c-properties" v-if="isEditing">
+        <div class="c-properties__header">Alphanumeric Format</div>
+        <ul class="c-properties__section">
+            <li class="c-properties__row">
+                <div class="c-properties__label" title="Printf formatting for the selected telemetry">
+                    <label for="telemetryPrintfFormat">Format</label>
+                </div>
+                <div class="c-properties__value">
+                    <input id="telemetryPrintfFormat"
+                        type="text"
+                        @change="formatTelemetry"
+                        :value="telemetryFormat"
+                        :placeholder="nonMixedFormat ? '' : 'Mixed'"
+                    >
+                </div>
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script>
+    export default {
+        inject: ['openmct'],
+        data() {
+            let selectionPath = this.openmct.selection.get()[0];
+            return {
+                isEditing: this.openmct.editor.isEditing(),
+                telemetryFormat: undefined,
+                nonMixedFormat: false
+            }
+        },
+        methods: {
+            toggleEdit(isEditing) {
+                this.isEditing = isEditing;
+            },
+            formatTelemetry(event) {
+                let newFormat = event.currentTarget.value;
+                this.openmct.selection.get().forEach(selectionPath => {
+                    selectionPath[0].context.updateTelemetryFormat(newFormat);    
+                });
+                this.telemetryFormat = newFormat;
+            },
+            handleSelection(selection) {
+                if (selection.length === 0 || selection[0].length < 2) {
+                    return;
+                }
+
+                let format = selection[0][0].context.layoutItem.format;
+                this.nonMixedFormat = selection.every(selectionPath => {
+                    return selectionPath[0].context.layoutItem.format === format;
+                });
+
+                this.telemetryFormat = this.nonMixedFormat ? format : '';
+            }
+        },
+        mounted() {
+            this.openmct.editor.on('isEditing', this.toggleEdit);
+            this.openmct.selection.on('change', this.handleSelection);
+            this.handleSelection(this.openmct.selection.get());
+        },
+        destroyed() {
+            this.openmct.editor.off('isEditing', this.toggleEdit);
+            this.openmct.selection.off('change', this.handleSelection);
+        }
+    }
+
+</script>

src/plugins/displayLayout/components/DisplayLayout.vue

@@ -48,7 +48,8 @@
                    :multiSelect="selectedLayoutItems.length > 1"
                    @move="move"
                    @endMove="endMove"
-                   @endLineResize='endLineResize'>
+                   @endLineResize='endLineResize'
+                   @formatChanged='updateTelemetryFormat'>
         </component>
         <edit-marquee v-if='showMarquee'
                       :gridSize="gridSize"
@@ -269,33 +270,63 @@
                     _.cloneDeep(this.selectedLayoutItems).forEach(selectedItem => {
                         if (selectedItem.type === 'line-view') {
                             this.initialPositions[selectedItem.id] = [selectedItem.x, selectedItem.y, selectedItem.x2, selectedItem.y2];
+                            this.startingMinX2 = this.startingMinX2 !== undefined ? Math.min(this.startingMinX2, selectedItem.x2) : selectedItem.x2;
+                            this.startingMinY2 = this.startingMinY2 !== undefined ? Math.min(this.startingMinY2, selectedItem.y2) : selectedItem.y2;
                         } else {
                             this.initialPositions[selectedItem.id] = [selectedItem.x, selectedItem.y];
                         }
+
+                        this.startingMinX = this.startingMinX !== undefined ? Math.min(this.startingMinX, selectedItem.x) : selectedItem.x;
+                        this.startingMinY = this.startingMinY !== undefined ? Math.min(this.startingMinY, selectedItem.y) : 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];
-                        }
+                        this.updateItemPosition(item, gridDelta);
                     }
                     return item;
                 });
             },
+            updateItemPosition(item, gridDelta) {
+                let startingPosition = this.initialPositions[item.id];
+                let [startingX, startingY, startingX2, startingY2] = startingPosition;
+
+                if (this.startingMinX + gridDelta[0] >= 0) {
+                    if (item.x2 !== undefined) {
+                        if (this.startingMinX2 + gridDelta[0] >= 0) {
+                            item.x = startingX + gridDelta[0];
+                        }
+                    } else {
+                        item.x = startingX + gridDelta[0];
+                    }
+                }
+
+                if (this.startingMinY + gridDelta[1] >= 0) {
+                    if (item.y2 !== undefined) {
+                        if (this.startingMinY2 + gridDelta[1] >= 0) {
+                            item.y = startingY + gridDelta[1];
+                        }
+                    } else {
+                        item.y = startingY + gridDelta[1];
+                    }
+                }
+
+                if (item.x2 !== undefined && this.startingMinX2 + gridDelta[0] >= 0 && this.startingMinX + gridDelta[0] >= 0) {
+                    item.x2 = startingX2 + gridDelta[0];
+                }
+
+                if (item.y2 !== undefined && this.startingMinY2 + gridDelta[1] >= 0 && this.startingMinY + gridDelta[1] >= 0) {
+                    item.y2 = startingY2 + gridDelta[1];
+                }
+            },
             endMove() {
                 this.mutate('configuration.items', this.layoutItems);
                 this.initialPositions = undefined;
+                this.startingMinX = undefined;
+                this.startingMinY = undefined;
+                this.startingMinX2 = undefined;
+                this.startingMinY2 = undefined;
             },
             mutate(path, value) {
                 this.openmct.objects.mutate(this.internalDomainObject, path, value);
@@ -527,6 +558,11 @@
                     this.layoutItems.splice(itemIndex, 1);
                     this.layoutItems.splice(newIndex, 0, items[itemIndex]);
                 }
+            },
+            updateTelemetryFormat(item, format) {
+                let index = _.findIndex(this.layoutItems, item);
+                item.format = format;
+                this.mutate(`configuration.items[${index}]`, item);
             }
         },
         mounted() {

src/plugins/displayLayout/components/EditMarquee.vue

@@ -116,7 +116,7 @@
                 let height = Number.NEGATIVE_INFINITY;
 
                 this.selectedLayoutItems.forEach(item => {
-                    if (item.x2) {
+                    if (item.x2 !== undefined) {
                         let lineWidth = Math.abs(item.x - item.x2);
                         let lineMinX = Math.min(item.x, item.x2);
                         x = Math.min(lineMinX, x);
@@ -126,7 +126,7 @@
                         width = Math.max(item.width + item.x, width);
                     }
 
-                    if (item.y2) {
+                    if (item.y2 !== undefined) {
                         let lineHeight = Math.abs(item.y - item.y2);
                         let lineMinY = Math.min(item.y, item.y2);
                         y = Math.min(lineMinY, y);

src/plugins/displayLayout/components/SubobjectView.vue

@@ -22,6 +22,7 @@
 <template>
     <layout-frame :item="item"
                   :grid-size="gridSize"
+                  :title="domainObject && domainObject.name"
                   @move="(gridDelta) => $emit('move', gridDelta)"
                   @endMove="() => $emit('endMove')">
         <object-frame v-if="domainObject"

src/plugins/displayLayout/components/TelemetryView.vue

@@ -79,6 +79,7 @@
 
  <script>
     import LayoutFrame from './LayoutFrame.vue'
+    import printj from 'printj'
 
     const DEFAULT_TELEMETRY_DIMENSIONS = [10, 5],
           DEFAULT_POSITION = [1, 1];
@@ -143,6 +144,10 @@
                     return;
                 }
 
+                if (this.item.format) {
+                    return printj.sprintf(this.item.format, this.datum[this.valueMetadata.key]);
+                }
+
                 return this.valueFormatter && this.valueFormatter.format(this.datum);
             },
             telemetryClass() {
@@ -168,6 +173,9 @@
                 }
 
                 this.context.index = newIndex;
+            },
+            item(newItem) {
+                this.context.layoutItem = newItem;
             }
         },
         methods: {
@@ -176,7 +184,8 @@
                 let options = {
                     start: bounds.start,
                     end: bounds.end,
-                    size: 1
+                    size: 1,
+                    strategy: 'latest'
                 };
                 this.openmct.telemetry.request(this.domainObject, options)
                     .then(data => {
@@ -218,10 +227,14 @@
                 this.context = {
                     item: domainObject,
                     layoutItem: this.item,
-                    index: this.index
+                    index: this.index,
+                    updateTelemetryFormat: this.updateTelemetryFormat
                 };
                 this.removeSelectable = this.openmct.selection.selectable(
                     this.$el, this.context, this.initSelect);
+            },
+            updateTelemetryFormat(format) {
+                this.$emit('formatChanged', this.item, format);
             }
         },
         mounted() {

src/plugins/displayLayout/plugin.js

@@ -25,6 +25,8 @@ import Vue from 'vue'
 import objectUtils from '../../api/objects/object-utils.js'
 import DisplayLayoutType from './DisplayLayoutType.js'
 import DisplayLayoutToolbar from './DisplayLayoutToolbar.js'
+import AlphaNumericFormatViewProvider from './AlphaNumericFormatViewProvider.js'
+
 export default function DisplayLayoutPlugin(options) {
     return function (openmct) {
         openmct.objectViews.addProvider({
@@ -76,7 +78,8 @@ export default function DisplayLayoutPlugin(options) {
             }
         });
         openmct.types.addType('layout', DisplayLayoutType());
-        openmct.toolbars.addProvider(new DisplayLayoutToolbar(openmct));
+        openmct.toolbars.addProvider(new DisplayLayoutToolbar(openmct, options));
+        openmct.inspectorViews.addProvider(new AlphaNumericFormatViewProvider(openmct, options));
         openmct.composition.addPolicy((parent, child) => {
             if (parent.type === 'layout' && child.type === 'folder') {
                 return false;

src/plugins/filters/components/FilterField.vue

@@ -42,7 +42,10 @@
 
                 <!-- Checkbox list, NOT editing -->
                 <template v-if="filter.possibleValues && !isEditing">
-                    <span>{{persistedFilters[filter.comparator].join(', ')}}</span>
+                    <span 
+                        v-if="persistedFilters[filter.comparator]">
+                        {{persistedFilters[filter.comparator].join(', ')}}
+                    </span>
                 </template>
             </div>
         </li>

src/plugins/filters/components/FilterObject.vue

@@ -69,16 +69,25 @@ export default {
                 }
             } else {
                 if (!this.updatedFilters[key]) {
-                    this.updatedFilters[key] = {};
+                    this.$set(this.updatedFilters, key, {});
                 }
-                this.updatedFilters[key][comparator] = [value ? valueName : undefined];
+                this.$set(this.updatedFilters[key], comparator, [value ? valueName : undefined]);
             }
 
             this.$emit('updateFilters', this.keyString, this.updatedFilters);
         },
         updateTextFilter(key, comparator, value) {
+            if (value.trim() === '') {
+                if (this.updatedFilters[key]) {
+                    delete this.updatedFilters[key];
+                    this.$emit('updateFilters', this.keyString, this.updatedFilters);
+                }
+                return;
+            }
+
             if (!this.updatedFilters[key]) {
-                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);

src/plugins/flexibleLayout/components/flexibleLayout.vue

@@ -113,7 +113,8 @@
 
         &__container-holder {
             display: flex;
-            flex: 1 1 100%; // Must needs to be 100% to work
+            flex: 1 1 100%; // Must be 100% to work
+            overflow: auto;
 
             // Columns by default
             flex-direction: row;

src/plugins/goToOriginalAction/goToOriginalAction.js

@@ -0,0 +1,53 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+
+export default class GoToOriginalAction {
+    constructor(openmct) {
+        this.name = 'Go To Original';
+        this.description = 'Go to the original unlinked instance of this object';
+
+        this._openmct = openmct;
+    }
+    invoke(objectPath) {
+        this._openmct.objects.getOriginalPath(objectPath[0].identifier)
+            .then((originalPath) => {
+                let url = '#/browse/' + originalPath
+                    .map(function (o) {
+                        return o && this._openmct.objects.makeKeyString(o.identifier);
+                    }.bind(this))
+                    .reverse()
+                    .slice(1)
+                    .join('/');
+
+                window.location.href = url;
+            });
+    }
+    appliesTo(objectPath) {
+        let parentKeystring = objectPath[1] && this._openmct.objects.makeKeyString(objectPath[1].identifier);
+
+        if (!parentKeystring) {
+            return false;
+        }
+
+        return (parentKeystring !== objectPath[0].location);
+    }
+}

src/plugins/goToOriginalAction/plugin.js

@@ -0,0 +1,28 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+import GoToOriginalAction from './goToOriginalAction';
+
+export default function () {
+    return function (openmct) {
+        openmct.contextMenu.registerAction(new GoToOriginalAction(openmct));
+    };
+}

src/plugins/objectMigration/Migrations.js

@@ -64,35 +64,45 @@ define([
             Object.keys(panels).forEach(key => {
                 let panel = panels[key];
                 let domainObject = childObjects[key];
+                let identifier = undefined;
 
                 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
+                    // If object is a telemetry point, convert it to a plot and
+                    // replace the object in migratedObject composition with the plot.
+                    identifier = {
+                        key: uuid(),
+                        namespace: migratedObject.identifier.namespace
+                    };
+                    let plotObject = {
+                        identifier: identifier,
+                        location: domainObject.location,
+                        name: domainObject.name,
+                        type: "telemetry.plot.overlay"
+                    };
+                    let plotType = openmct.types.get('telemetry.plot.overlay');
+                    plotType.definition.initialize(plotObject);
+                    plotObject.composition.push(domainObject.identifier);
+                    openmct.objects.mutate(plotObject, 'persisted', Date.now());
+
+                    let keyString = openmct.objects.makeKeyString(domainObject.identifier);
+                    let clonedComposition = Object.assign([], migratedObject.composition);
+                    clonedComposition.forEach((identifier, index) => {
+                        if (openmct.objects.makeKeyString(identifier) === keyString) {
+                            migratedObject.composition[index] = plotObject.identifier;
+                        }
                     });
                 }
+
+                items.push({
+                    width: panel.dimensions[0],
+                    height: panel.dimensions[1],
+                    x: panel.position[0],
+                    y: panel.position[1],
+                    identifier: identifier || domainObject.identifier,
+                    id: uuid(),
+                    type: 'subobject-view',
+                    hasFrame: panel.hasFrame
+                });
             });
 
             migratedObject.configuration.items = items;
@@ -167,7 +177,9 @@ define([
         return [
             {
                 check(domainObject) {
-                    return domainObject.type === 'layout' && domainObject.configuration.layout;
+                    return domainObject.type === 'layout' &&
+                        domainObject.configuration &&
+                        domainObject.configuration.layout;
                 },
                 migrate(domainObject) {
                     let childObjects = {};
@@ -186,7 +198,9 @@ define([
             },
             {
                 check(domainObject) {
-                    return domainObject.type === 'telemetry.fixed' && domainObject.configuration['fixed-display'];
+                    return domainObject.type === 'telemetry.fixed' &&
+                        domainObject.configuration &&
+                        domainObject.configuration['fixed-display'];
                 },
                 migrate(domainObject) {
                     const DEFAULT_GRID_SIZE = [64, 16];
@@ -224,6 +238,7 @@ define([
             {
                 check(domainObject) {
                     return domainObject.type === 'table' &&
+                        domainObject.configuration &&
                         domainObject.configuration.table;
                 },
                 migrate(domainObject) {

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

@@ -43,12 +43,16 @@
     <div class="l-view-section">
         <div class="c-loading--overlay loading"
              ng-show="!!currentRequest.pending"></div>
-        <div class="gl-plot child-frame"
+        <div class="gl-plot child-frame u-inspectable"
             ng-repeat="telemetryObject in telemetryObjects"
             ng-class="{
                 's-status-timeconductor-unsynced': telemetryObject
                     .getCapability('status')
                     .get('timeconductor-unsynced')
+            }"
+            mct-selectable="{
+                item: telemetryObject.useCapability('adapter'),
+                oldItem: telemetryObject
             }">
             <mct-overlay-plot domain-object="telemetryObject"></mct-overlay-plot>
         </div>

src/plugins/plot/src/configuration/Collection.js

@@ -115,11 +115,13 @@ define([
 
     Collection.prototype.remove = function (model) {
         var index = this.indexOf(model);
+
         if (index === -1) {
             throw new Error('model not found in collection.');
         }
-        this.models.splice(index, 1);
+
         this.emit('remove', model, index);
+        this.models.splice(index, 1);
     };
 
     Collection.prototype.destroy = function (model) {

src/plugins/plot/src/configuration/SeriesCollection.js

@@ -100,19 +100,33 @@ define([
         removeTelemetryObject: function (identifier) {
             var plotObject = this.plot.get('domainObject');
             if (plotObject.type === 'telemetry.plot.overlay') {
-                var index = _.findIndex(plotObject.configuration.series, function (s) {
+
+                var persistedIndex = _.findIndex(plotObject.configuration.series, function (s) {
                     return _.isEqual(identifier, s.identifier);
                 });
-                this.remove(this.at(index));
-                // Because this is triggered by a composition change, we have
-                // to defer mutation of our plot object, otherwise we might
-                // mutate an outdated version of the plotObject.
-                setTimeout(function () {
-                    var newPlotObject = this.plot.get('domainObject');
-                    var cSeries = newPlotObject.configuration.series.slice();
-                    cSeries.splice(index, 1);
-                    this.openmct.objects.mutate(newPlotObject, 'configuration.series', cSeries);
-                }.bind(this));
+
+                var configIndex = _.findIndex(this.models, function (m) {
+                    return _.isEqual(m.domainObject.identifier, identifier);
+                });
+
+                /*
+                    when cancelling out of edit mode, the config store and domain object are out of sync
+                    thus it is necesarry to check both and remove the models that are no longer in composition
+                */
+                if (persistedIndex === -1) {
+                    this.remove(this.at(configIndex));
+                } else {
+                    this.remove(this.at(persistedIndex));
+                    // Because this is triggered by a composition change, we have
+                    // to defer mutation of our plot object, otherwise we might
+                    // mutate an outdated version of the plotObject.
+                    setTimeout(function () {
+                        var newPlotObject = this.plot.get('domainObject');
+                        var cSeries = newPlotObject.configuration.series.slice();
+                        cSeries.splice(persistedIndex, 1);
+                        this.openmct.objects.mutate(newPlotObject, 'configuration.series', cSeries);
+                    }.bind(this));
+                }
             }
         },
         onSeriesAdd: function (series) {

src/plugins/plot/src/configuration/configStore.js

@@ -25,23 +25,11 @@ define([
 
     function ConfigStore() {
         this.store = {};
-        this.tracking = {};
     }
 
-    ConfigStore.prototype.track = function (id) {
-        if (!this.tracking[id]) {
-            this.tracking[id] = 0;
-        }
-        this.tracking[id] += 1;
-    };
-
-    ConfigStore.prototype.untrack = function (id) {
-        this.tracking[id] -= 1;
-        if (this.tracking[id] <= 0) {
-            delete this.tracking[id];
-            this.store[id].destroy();
-            delete this.store[id];
-        }
+    ConfigStore.prototype.deleteStore = function (id) {
+        this.store[id].destroy();
+        delete this.store[id];
     };
 
     ConfigStore.prototype.add = function (id, config) {

src/plugins/plot/src/inspector/PlotOptionsController.js

@@ -49,7 +49,6 @@ define([
     };
 
     PlotOptionsController.prototype.destroy = function () {
-        configStore.untrack(this.configId);
         this.stopListening();
         this.unlisten();
     };
@@ -60,7 +59,7 @@ define([
             this.$timeout(this.setUpScope.bind(this));
             return;
         }
-        configStore.track(this.configId);
+
         this.config = this.$scope.config = config;
         this.$scope.plotSeries = [];
 

src/plugins/plot/src/plot/MCTPlotController.js

@@ -282,11 +282,19 @@ define([
     };
 
     MCTPlotController.prototype.zoom = function (zoomDirection, zoomFactor) {
+        var currentXaxis = this.$scope.xAxis.get('displayRange'),
+            currentYaxis = this.$scope.yAxis.get('displayRange');
+
+        // when there is no plot data, the ranges can be undefined
+        // in which case we should not perform zoom
+        if (!currentXaxis || !currentYaxis) {
+            return;
+        }
+
         this.freeze();
         this.trackHistory();
-        var currentXaxis = this.$scope.xAxis.get('displayRange'),
-            currentYaxis = this.$scope.yAxis.get('displayRange'),
-            xAxisDist= (currentXaxis.max - currentXaxis.min) * zoomFactor,
+
+        var xAxisDist= (currentXaxis.max - currentXaxis.min) * zoomFactor,
             yAxisDist = (currentYaxis.max - currentYaxis.min) * zoomFactor;
 
         if (zoomDirection === 'in') {
@@ -322,12 +330,19 @@ define([
             return;
         }
 
+        let xDisplayRange = this.$scope.xAxis.get('displayRange'),
+            yDisplayRange = this.$scope.yAxis.get('displayRange');
+
+        // when there is no plot data, the ranges can be undefined
+        // in which case we should not perform zoom
+        if (!xDisplayRange || !yDisplayRange) {
+            return;
+        }
+
         this.freeze();
         window.clearTimeout(this.stillZooming);
 
-        let xDisplayRange = this.$scope.xAxis.get('displayRange'),
-            yDisplayRange = this.$scope.yAxis.get('displayRange'),
-            xAxisDist = (xDisplayRange.max - xDisplayRange.min),
+        let xAxisDist = (xDisplayRange.max - xDisplayRange.min),
             yAxisDist = (yDisplayRange.max - yDisplayRange.min),
             xDistMouseToMax = xDisplayRange.max - this.positionOverPlot.x,
             xDistMouseToMin = this.positionOverPlot.x - xDisplayRange.min,

src/plugins/plot/src/telemetry/PlotController.js

@@ -148,7 +148,6 @@ define([
             });
             configStore.add(configId, config);
         }
-        configStore.track(configId);
         return config;
     };
 
@@ -157,7 +156,8 @@ define([
     };
 
     PlotController.prototype.destroy = function () {
-        configStore.untrack(this.config.id);
+        configStore.deleteStore(this.config.id);
+
         this.stopListening();
         if (this.checkForSize) {
             clearInterval(this.checkForSize);

src/plugins/plot/src/telemetry/StackedPlotController.js

@@ -79,6 +79,15 @@ define([
                     $scope.$broadcast('plot:tickWidth', _.max(tickWidthMap));
                 }
             }
+
+            function compositionReorder(reorderPlan) {
+                let oldComposition = telemetryObjects.slice();
+
+                reorderPlan.forEach((reorder) => {
+                    telemetryObjects[reorder.newIndex] = oldComposition[reorder.oldIndex];
+                });
+            }
+
             thisRequest.pending += 1;
             openmct.objects.get(domainObject.getId())
                 .then(function (obj) {
@@ -89,10 +98,12 @@ define([
                     composition = openmct.composition.get(obj);
                     composition.on('add', addChild);
                     composition.on('remove', removeChild);
+                    composition.on('reorder', compositionReorder);
                     composition.load();
                     unlisten = function () {
                         composition.off('add', addChild);
                         composition.off('remove', removeChild);
+                        composition.off('reorder', compositionReorder);
                     };
                 });
         }

src/plugins/plugins.js

@@ -23,6 +23,7 @@
 define([
     'lodash',
     './utcTimeSystem/plugin',
+    './localTimeSystem/plugin',
     '../../example/generator/plugin',
     './autoflow/AutoflowTabularPlugin',
     './timeConductor/plugin',
@@ -41,10 +42,12 @@ define([
     './tabs/plugin',
     './LADTable/plugin',
     './filters/plugin',
-    './objectMigration/plugin'
+    './objectMigration/plugin',
+    './goToOriginalAction/plugin'
 ], function (
     _,
     UTCTimeSystem,
+    LocalTimeSystem,
     GeneratorPlugin,
     AutoflowPlugin,
     TimeConductorPlugin,
@@ -63,7 +66,8 @@ define([
     Tabs,
     LADTable,
     Filters,
-    ObjectMigration
+    ObjectMigration,
+    GoToOriginalAction
 ) {
     var bundleMap = {
         LocalStorage: 'platform/persistence/local',
@@ -79,6 +83,7 @@ define([
     });
 
     plugins.UTCTimeSystem = UTCTimeSystem;
+    plugins.LocalTimeSystem = LocalTimeSystem;
 
     plugins.ImportExport = ImportExport;
 
@@ -160,6 +165,7 @@ define([
     plugins.LADTable = LADTable;
     plugins.Filters = Filters;
     plugins.ObjectMigration = ObjectMigration.default;
+    plugins.GoToOriginalAction = GoToOriginalAction.default;
 
     return plugins;
 });

src/plugins/summaryWidget/src/Condition.js

@@ -70,16 +70,14 @@ define([
          */
         function onValueInput(event) {
             var elem = event.target,
-                value = (isNaN(elem.valueAsNumber) ? elem.value : elem.valueAsNumber),
+                value = isNaN(Number(elem.value)) ? elem.value : Number(elem.value),
                 inputIndex = self.valueInputs.indexOf(elem);
 
-            if (elem.tagName.toUpperCase() === 'INPUT') {
-                self.eventEmitter.emit('change', {
-                    value: value,
-                    property: 'values[' + inputIndex + ']',
-                    index: self.index
-                });
-            }
+            self.eventEmitter.emit('change', {
+                value: value,
+                property: 'values[' + inputIndex + ']',
+                index: self.index
+            });
         }
 
         this.listenTo(this.deleteButton, 'click', this.remove, this);
@@ -108,8 +106,7 @@ define([
         Object.values(this.selects).forEach(function (select) {
             $('.t-configuration', self.domElement).append(select.getDOM());
         });
-
-        this.listenTo($(this.domElement), 'input', onValueInput);
+        this.listenTo($('.t-value-inputs', this.domElement), 'input', onValueInput);
     }
 
     Condition.prototype.getDOM = function (container) {
@@ -167,7 +164,9 @@ define([
 
     /**
      * When an operation is selected, create the appropriate value inputs
-     * and add them to the view
+     * and add them to the view. If an operation is of type enum, create
+     * a drop-down menu instead.
+     *
      * @param {string} operation The key of currently selected operation
      */
     Condition.prototype.generateValueInputs = function (operation) {
@@ -176,25 +175,49 @@ define([
             inputCount,
             inputType,
             newInput,
-            index = 0;
+            index = 0,
+            emitChange = false;
 
         inputArea.html('');
         this.valueInputs = [];
+        this.config.values = [];
 
         if (evaluator.getInputCount(operation)) {
             inputCount = evaluator.getInputCount(operation);
             inputType = evaluator.getInputType(operation);
+
             while (index < inputCount) {
-                if (!this.config.values[index]) {
-                    this.config.values[index] = (inputType === 'number' ? 0 : '');
+                if (inputType === 'select') {
+                    newInput = $('<select>' + this.generateSelectOptions() + '</select>');
+                    emitChange = true;
+                } else {
+                    this.config.values[index] = inputType === 'number' ? 0 : '';
+                    newInput = $('<input type = "' + inputType + '" value = "' + this.config.values[index] + '"> </input>');
                 }
-                newInput = $('<input type = "' + inputType + '" value = "' + this.config.values[index] + '"> </input>');
+
                 this.valueInputs.push(newInput.get(0));
                 inputArea.append(newInput);
                 index += 1;
             }
+
+            if (emitChange) {
+                this.eventEmitter.emit('change', {
+                    value: Number(newInput[0].options[0].value),
+                    property: 'values[0]',
+                    index: this.index
+                });
+            }
         }
     };
 
+    Condition.prototype.generateSelectOptions = function () {
+        let telemetryMetadata = this.conditionManager.getTelemetryMetadata(this.config.object);
+        let options = '';
+        telemetryMetadata[this.config.key].enumerations.forEach(enumeration => {
+            options += '<option value="' + enumeration.value + '">'+ enumeration.string + '</option>';
+        });
+        return options;
+    };
+
     return Condition;
 });

src/plugins/summaryWidget/src/ConditionEvaluator.js

@@ -24,7 +24,8 @@ define([], function () {
          */
         this.inputTypes = {
             number: 'number',
-            string: 'text'
+            string: 'text',
+            enum: 'select'
         };
 
         /**
@@ -34,7 +35,8 @@ define([], function () {
          */
         this.inputValidators = {
             number: this.validateNumberInput,
-            string: this.validateStringInput
+            string: this.validateStringInput,
+            enum: this.validateNumberInput
         };
 
         /**
@@ -201,7 +203,7 @@ define([], function () {
                     return typeof input[0] === 'undefined';
                 },
                 text: 'is undefined',
-                appliesTo: ['string', 'number'],
+                appliesTo: ['string', 'number', 'enum'],
                 inputCount: 0,
                 getDescription: function () {
                     return ' is undefined';
@@ -212,11 +214,33 @@ define([], function () {
                     return typeof input[0] !== 'undefined';
                 },
                 text: 'is defined',
-                appliesTo: ['string', 'number'],
+                appliesTo: ['string', 'number', 'enum'],
                 inputCount: 0,
                 getDescription: function () {
                     return ' is defined';
                 }
+            },
+            enumValueIs: {
+                operation: function (input) {
+                    return input[0] === input[1];
+                },
+                text: 'is',
+                appliesTo: ['enum'],
+                inputCount: 1,
+                getDescription: function (values) {
+                    return ' == ' + values[0];
+                }
+            },
+            enumValueIsNot: {
+                operation: function (input) {
+                    return input[0] !== input[1];
+                },
+                text: 'is not',
+                appliesTo: ['enum'],
+                inputCount: 1,
+                getDescription: function (values) {
+                    return ' != ' + values[0];
+                }
             }
         };
     }
@@ -310,13 +334,16 @@ define([], function () {
             validator;
 
         if (cache[object] && typeof cache[object][key] !== 'undefined') {
-            telemetryValue = [cache[object][key]];
+            let value = cache[object][key];
+            telemetryValue = [isNaN(Number(value)) ? value : Number(value)];
         }
+
         op = this.operations[operation] && this.operations[operation].operation;
         input = telemetryValue && telemetryValue.concat(values);
         validator = op && this.inputValidators[this.operations[operation].appliesTo[0]];
+
         if (op && input && validator) {
-            if (this.operations[operation].appliesTo.length === 2) {
+            if (this.operations[operation].appliesTo.length > 1) {
                 return (this.validateNumberInput(input) || this.validateStringInput(input)) && op(input);
             } else {
                 return validator(input) && op(input);
@@ -372,7 +399,7 @@ define([], function () {
     };
 
     /**
-     * Returns true only of the given operation applies to a given type
+     * Returns true only if the given operation applies to a given type
      * @param {string} key The key of the operation
      * @param {string} type The value type to query
      * @returns {boolean} True if the condition applies, false otherwise

src/plugins/summaryWidget/src/ConditionManager.js

@@ -130,7 +130,9 @@ define ([
         this.telemetryTypesById[objectId] = {};
         Object.values(this.telemetryMetadataById[objectId]).forEach(function (valueMetadata) {
             var type;
-            if (valueMetadata.hints.hasOwnProperty('range')) {
+            if (valueMetadata.enumerations !== undefined) {
+                type = 'enum';
+            } else if (valueMetadata.hints.hasOwnProperty('range')) {
                 type = 'number';
             } else if (valueMetadata.hints.hasOwnProperty('domain')) {
                 type = 'number';
@@ -163,11 +165,18 @@ define ([
      * @param {datum} datum The new data from the telemetry source
      * @private
      */
-    ConditionManager.prototype.handleSubscriptionCallback = function (objId, datum) {
-        this.subscriptionCache[objId] = datum;
+    ConditionManager.prototype.handleSubscriptionCallback = function (objId, telemetryDatum) {
+        this.subscriptionCache[objId] = this.createNormalizedDatum(objId, telemetryDatum);
         this.eventEmitter.emit('receiveTelemetry');
     };
 
+    ConditionManager.prototype.createNormalizedDatum = function (objId, telemetryDatum) {
+        return Object.values(this.telemetryMetadataById[objId]).reduce((normalizedDatum, metadatum) => {
+            normalizedDatum[metadatum.key] = telemetryDatum[metadatum.source];
+            return normalizedDatum;
+        }, {});
+    };
+
     /**
      * Event handler for an add event in this Summary Widget's composition.
      * Sets up subscription handlers and parses its property types.
@@ -236,6 +245,7 @@ define ([
                 id.namespace === identifier.namespace;
         });
         delete this.compositionObjs[objectId];
+        delete this.subscriptionCache[objectId];
         this.subscriptions[objectId](); //unsubscribe from telemetry source
         delete this.subscriptions[objectId];
         this.eventEmitter.emit('remove', identifier);

src/plugins/summaryWidget/src/input/OperationSelect.js

@@ -110,9 +110,11 @@ define([
 
         type = self.manager.getTelemetryPropertyType(self.config.object, key);
 
-        self.operationKeys = operations.filter(function (operation) {
-            return self.evaluator.operationAppliesTo(operation, type);
-        });
+        if (type !== undefined) {
+            self.operationKeys = operations.filter(function (operation) {
+                return self.evaluator.operationAppliesTo(operation, type);
+            });
+        }
     };
 
     OperationSelect.prototype.destroy = function () {

src/plugins/summaryWidget/src/telemetry/SummaryWidgetMetadataProvider.js

@@ -38,7 +38,7 @@ define([
         return this.openmct.time.getAllTimeSystems().map(function (ts, i) {
             return {
                 key: ts.key,
-                name: 'UTC',
+                name: ts.name,
                 format: ts.timeFormat,
                 hints: {
                     domain: i
@@ -64,7 +64,7 @@ define([
             // Generally safe assumption is that we have one domain per timeSystem.
             values: this.getDomains().concat([
                 {
-                    name: 'state',
+                    name: 'State',
                     key: 'state',
                     source: 'ruleIndex',
                     format: 'enum',

src/plugins/summaryWidget/src/telemetry/operations.js

@@ -174,7 +174,7 @@ define([
                 return typeof input[0] === 'undefined';
             },
             text: 'is undefined',
-            appliesTo: ['string', 'number'],
+            appliesTo: ['string', 'number', 'enum'],
             inputCount: 0,
             getDescription: function () {
                 return ' is undefined';
@@ -185,11 +185,33 @@ define([
                 return typeof input[0] !== 'undefined';
             },
             text: 'is defined',
-            appliesTo: ['string', 'number'],
+            appliesTo: ['string', 'number', 'enum'],
             inputCount: 0,
             getDescription: function () {
                 return ' is defined';
             }
+        },
+        enumValueIs: {
+            operation: function (input) {
+                return input[0] === input[1];
+            },
+            text: 'is',
+            appliesTo: ['enum'],
+            inputCount: 1,
+            getDescription: function (values) {
+                return ' == ' + values[0];
+            }
+        },
+        enumValueIsNot: {
+            operation: function (input) {
+                return input[0] !== input[1];
+            },
+            text: 'is not',
+            appliesTo: ['enum'],
+            inputCount: 1,
+            getDescription: function (values) {
+                return ' != ' + values[0];
+            }
         }
     };
 

src/plugins/tabs/components/tabs.vue

@@ -7,7 +7,8 @@
             }">
             <div class="c-drop-hint"
                  @drop="onDrop"
-                 ref="dropHint">
+                 @dragenter="dragenter"
+                 @dragleave="dragleave">
             </div>
             <div class="c-tabs-view__empty-message"
                  v-if="!tabsList.length > 0">Drag objects here to add them to this view.</div>
@@ -197,13 +198,6 @@ export default {
 
         document.addEventListener('dragstart', this.dragstart);
         document.addEventListener('dragend', this.dragend);
-
-        let dropHint = this.$refs.dropHint;
-
-        if (dropHint) {
-            dropHint.addEventListener('dragenter', this.dragenter);
-            dropHint.addEventListener('dragleave', this.dragleave);
-        }
     },
     destroyed() {
         this.composition.off('add', this.addItem);
@@ -212,12 +206,6 @@ export default {
 
         document.removeEventListener('dragstart', this.dragstart);
         document.removeEventListener('dragend', this.dragend);
-    },
-    beforeDestroy() {
-        let dropHint = this.$refs.dropHint;
-
-        dropHint.removeEventListener('dragenter', this.dragenter);
-        dropHint.removeEventListener('dragleave', this.dragleave);
     }
 }
 </script>

src/plugins/telemetryTable/TableConfigurationViewProvider.js

@@ -37,7 +37,7 @@ define([
             key: 'table-configuration',
             name: 'Telemetry Table Configuration',
             canView: function (selection) {
-                if (selection.length === 0 || selection[0].length === 0) {
+                if (selection.length !== 1 || selection[0].length === 0) {
                     return false;
                 }
                 let object = selection[0][0].context.item;

src/plugins/telemetryTable/TelemetryTable.js

@@ -239,7 +239,7 @@ define([
             this.filteredRows.destroy();
             Object.keys(this.subscriptions).forEach(this.unsubscribe, this);
             this.openmct.time.off('bounds', this.refreshData);
-            this.openmct.time.on('timeSystem', this.refreshData);
+            this.openmct.time.off('timeSystem', this.refreshData);
             if (this.filterObserver) {
                 this.filterObserver();
             }

src/plugins/telemetryTable/collections/BoundedTableRowCollection.js

@@ -31,9 +31,9 @@ define(
     ) {
 
         class BoundedTableRowCollection extends SortedTableRowCollection {
-            constructor (openmct) {
+            constructor(openmct) {
                 super();
-                
+
                 this.futureBuffer = new SortedTableRowCollection();
                 this.openmct = openmct;
 
@@ -46,12 +46,13 @@ define(
                 openmct.time.on('bounds', this.bounds);
             }
 
-            addOne (item) {
+            addOne(item) {
+                let parsedValue = this.getValueForSortColumn(item);
                 // Insert into either in-bounds array, or the future buffer.
-                // Data in the future buffer will be re-evaluated for possible 
+                // Data in the future buffer will be re-evaluated for possible
                 // insertion on next bounds change
-                let beforeStartOfBounds = this.parseTime(item.datum[this.sortOptions.key]) < this.lastBounds.start;
-                let afterEndOfBounds = this.parseTime(item.datum[this.sortOptions.key]) > this.lastBounds.end;
+                let beforeStartOfBounds = parsedValue < this.lastBounds.start;
+                let afterEndOfBounds = parsedValue > this.lastBounds.end;
 
                 if (!afterEndOfBounds && !beforeStartOfBounds) {
                     return super.addOne(item);
@@ -86,13 +87,13 @@ define(
              * @fires TelemetryCollection#discarded
              * @param bounds
              */
-            bounds (bounds) {
+            bounds(bounds) {
                 let startChanged = this.lastBounds.start !== bounds.start;
                 let endChanged = this.lastBounds.end !== bounds.end;
-                
+
                 let startIndex = 0;
                 let endIndex = 0;
-                
+
                 let discarded = [];
                 let added = [];
                 let testValue = {
@@ -135,9 +136,13 @@ define(
                 }
             }
 
+            getValueForSortColumn(row) {
+                return this.parseTime(row.datum[this.sortOptions.key]);
+            }
+
             destroy() {
                 this.openmct.time.off('bounds', this.bounds);
             }
         }
-    return BoundedTableRowCollection;
-});
+        return BoundedTableRowCollection;
+    });

src/plugins/telemetryTable/collections/SortedTableRowCollection.js

@@ -60,7 +60,7 @@ define(
                     if (rowsAdded.length > 0) {
                         this.emit('add', rowsAdded);
                     }
-                    this.dupeCheck = true;    
+                    this.dupeCheck = true;
                 } else {
                     let wasAdded = this.addOne(rows);
                     if (wasAdded) {
@@ -115,11 +115,10 @@ define(
                 if (this.rows.length === 0) {
                     return 0;
                 }
-                
-                const sortOptionsKey = this.sortOptions.key;
-                const testRowValue = testRow.datum[sortOptionsKey];
-                const firstValue = this.rows[0].datum[sortOptionsKey];
-                const lastValue = this.rows[this.rows.length - 1].datum[sortOptionsKey];
+
+                const testRowValue = this.getValueForSortColumn(testRow);
+                const firstValue = this.getValueForSortColumn(this.rows[0]);
+                const lastValue = this.getValueForSortColumn(this.rows[this.rows.length - 1]);
 
                 lodashFunction = lodashFunction || _.sortedIndex;
 
@@ -133,7 +132,7 @@ define(
                         return 0;
                     } else {
                         return lodashFunction(rows, testRow, (thisRow) => {
-                            return thisRow.datum[sortOptionsKey];
+                            return this.getValueForSortColumn(thisRow);
                         });
                     }
                 } else {
@@ -147,7 +146,7 @@ define(
                     } else {
                         // Use a custom comparison function to support descending sort.
                         return lodashFunction(rows, testRow, (thisRow) => {
-                            const thisRowValue = thisRow.datum[sortOptionsKey];
+                            const thisRowValue = this.getValueForSortColumn(thisRow);
                             if (testRowValue === thisRowValue) {
                                 return EQUAL;
                             } else if (testRowValue < thisRowValue) {
@@ -206,7 +205,7 @@ define(
                     this.emit('sort');
                 }
                 // Return duplicate to avoid direct modification of underlying object
-                return Object.assign({}, this.sortOptions); 
+                return Object.assign({}, this.sortOptions);
             }
 
             removeAllRowsForObject(objectKeyString) {
@@ -218,25 +217,32 @@ define(
                     }
                     return true;
                 });
+
                 this.emit('remove', removed);
             }
 
+            getValueForSortColumn(row) {
+                return row.datum[this.sortOptions.key];
+            }
+
             remove(removedRows) {
                 this.rows = this.rows.filter(row => {
                     return removedRows.indexOf(row) === -1;
                 });
+
                 this.emit('remove', removedRows);
             }
 
-            getRows () {
+            getRows() {
                 return this.rows;
             }
 
             clear() {
                 let removedRows = this.rows;
                 this.rows = [];
+
                 this.emit('remove', removedRows);
             }
         }
-    return SortedTableRowCollection;
-});
+        return SortedTableRowCollection;
+    });

src/plugins/telemetryTable/components/TelemetryFilterIndicator.vue

@@ -0,0 +1,142 @@
+<template>
+    <div v-if="filterNames.length > 0"
+        :title=title
+        class="c-filter-indication"
+        :class="{'c-filter-indication--mixed':mixed}">
+        <span class="c-filter-indication__mixed">{{label}}</span>
+        <span v-for="(name, index) in filterNames"
+              class="c-filter-indication__label">
+            {{name}}
+        </span>
+    </div>
+</template>
+
+<style lang="scss">
+    @import "~styles/sass-base";
+    .c-filter-indication {
+        @include userSelectNone();
+        background: $colorFilterBg;
+        color: $colorFilterFg;
+        display: flex;
+        align-items: center;
+        font-size: 0.9em;
+        margin-top: $interiorMarginSm;
+        padding: 2px;
+        text-transform: uppercase;
+
+        &:before {
+            font-family: symbolsfont-12px;
+            content: $glyph-icon-filter;
+            display: block;
+            font-size: 12px;
+            margin-right: $interiorMarginSm;
+        }
+
+        &__mixed {
+            font-weight: bold;
+            margin-right: $interiorMarginSm;
+        }
+
+        &--mixed {
+            .c-filter-indication__mixed {
+                font-style: italic;
+            }
+        }
+
+        &__label {
+            + .c-filter-indication__label {
+                &:before {
+                    content: ',';
+                }
+            }
+        }
+    }
+</style>
+
+<script>
+    const FILTER_INDICATOR_LABEL = 'Filters:';
+    const FILTER_INDICATOR_LABEL_MIXED = 'Mixed Filters:';
+    const FILTER_INDICATOR_TITLE = 'Data filters are being applied to this view.';
+    const FILTER_INDICATOR_TITLE_MIXED = 'A mix of data filter values are being applied to this view.';
+
+    export default {
+        inject: ['openmct', 'table'],
+        data() {
+            return {
+                filterNames: [],
+                telemetryFilters: {},
+                mixed: false,
+                label: FILTER_INDICATOR_LABEL,
+                title: FILTER_INDICATOR_TITLE
+            }           
+        },
+        methods: {
+            isTelemetryObject(domainObject) {
+                return domainObject.hasOwnProperty('telemetry');
+            },
+            setFilterNames() {
+                let names = [];
+                let composition = this.openmct.composition.get(this.table.configuration.domainObject);
+
+                composition.load().then((domainObjects) => {
+                    domainObjects.forEach(telemetryObject => {
+                        let keyString= this.openmct.objects.makeKeyString(telemetryObject.identifier);
+                        let filters = this.telemetryFilters[keyString];
+
+                        if (filters !== undefined) {
+                            let metadataValues = this.openmct.telemetry.getMetadata(telemetryObject).values();
+                            Object.keys(filters).forEach(key => {
+                                metadataValues.forEach(metadaum => {
+
+                                    if (key === metadaum.key) {
+                                        names.push(metadaum.name);
+                                    }
+                                });
+                            });
+                        }
+                    });
+                    this.filterNames = Array.from(new Set(names));
+                });
+            },
+            handleConfigurationChanges(configuration) {
+                if (!_.eq(this.telemetryFilters, configuration.filters)) {
+                    this.updateFilters(configuration.filters || {});
+                }
+            },
+            checkFiltersForMixedValues() {
+                let valueToCompare = this.telemetryFilters[Object.keys(this.telemetryFilters)[0]];
+                let mixed = false;
+                Object.values(this.telemetryFilters).forEach(value => {
+                    if (!_.isEqual(valueToCompare, value)) {
+                        mixed = true;
+                        return;
+                    }
+                });
+                this.mixed = mixed;
+            },
+            setLabels() {
+                if (this.mixed) {
+                    this.label = FILTER_INDICATOR_LABEL_MIXED;
+                    this.title = FILTER_INDICATOR_TITLE_MIXED;
+                } else {
+                    this.label = FILTER_INDICATOR_LABEL;
+                    this.title = FILTER_INDICATOR_TITLE;
+                }
+            },
+            updateFilters(filters) {
+                this.telemetryFilters = JSON.parse(JSON.stringify(filters));
+                this.setFilterNames();
+                this.checkFiltersForMixedValues();
+                this.setLabels();
+            }
+        },
+        mounted() {
+            let filters = this.table.configuration.getConfiguration().filters || {};
+            this.table.configuration.on('change', this.handleConfigurationChanges);
+            this.updateFilters(filters);
+        },
+        destroyed() {
+            this.table.configuration.off('change', this.handleConfigurationChanges);
+        }
+    }
+</script>

src/plugins/telemetryTable/components/table.vue

@@ -78,7 +78,7 @@
     <!-- Content table -->
     <div class="c-table__body-w c-telemetry-table__body-w js-telemetry-table__body-w" @scroll="scroll" :style="{ 'max-width': widthWithScroll}">
         <div class="c-telemetry-table__scroll-forcer" :style="{ width: totalWidth + 'px' }"></div>
-        <table class="c-table__body c-telemetry-table__body"
+        <table class="c-table__body c-telemetry-table__body js-telemetry-table__content"
                :style="{ height: totalHeight + 'px'}">
             <tbody>
                 <telemetry-table-row v-for="(row, rowIndex) in visibleRows"
@@ -105,6 +105,7 @@
             :row="sizingRowData">
         </telemetry-table-row>
     </table>
+    <telemetry-filter-indicator></telemetry-filter-indicator>
 </div>
 </template>
 
@@ -279,12 +280,13 @@
 import TelemetryTableRow from './table-row.vue';
 import search from '../../../ui/components/search.vue';
 import TableColumnHeader from './table-column-header.vue';
+import TelemetryFilterIndicator from './TelemetryFilterIndicator.vue';
 import _ from 'lodash';
 
 const VISIBLE_ROW_COUNT = 100;
 const ROW_HEIGHT = 17;
 const RESIZE_POLL_INTERVAL = 200;
-const AUTO_SCROLL_TRIGGER_HEIGHT = 20;
+const AUTO_SCROLL_TRIGGER_HEIGHT = 100;
 const RESIZE_HOT_ZONE = 10;
 const MOVE_TRIGGER_WAIT = 500;
 const VERTICAL_SCROLL_WIDTH = 30;
@@ -293,7 +295,8 @@ export default {
     components: {
         TelemetryTableRow,
         TableColumnHeader,
-        search
+        search,
+        TelemetryFilterIndicator
     },
     inject: ['table', 'openmct', 'csvExporter'],
     props: {
@@ -364,42 +367,48 @@ export default {
     },
     methods: {
         updateVisibleRows() {
+            if (!this.updatingView) {
+                this.updatingView = true;
+                requestAnimationFrame(()=> {
 
-            let start = 0;
-            let end = VISIBLE_ROW_COUNT;
-            let filteredRows = this.table.filteredRows.getRows();
-            let filteredRowsLength = filteredRows.length;
+                    let start = 0;
+                    let end = VISIBLE_ROW_COUNT;
+                    let filteredRows = this.table.filteredRows.getRows();
+                    let filteredRowsLength = filteredRows.length;
 
-            this.totalHeight = this.rowHeight * filteredRowsLength - 1;
+                    if (filteredRowsLength < VISIBLE_ROW_COUNT) {
+                        end = filteredRowsLength;
+                    } else {
+                        let firstVisible = this.calculateFirstVisibleRow();
+                        let lastVisible = this.calculateLastVisibleRow();
+                        let totalVisible = lastVisible - firstVisible;
 
-            if (filteredRowsLength < VISIBLE_ROW_COUNT) {
-                end = filteredRowsLength;
-            } else {
-                let firstVisible = this.calculateFirstVisibleRow();
-                let lastVisible = this.calculateLastVisibleRow();
-                let totalVisible = lastVisible - firstVisible;
+                        let numberOffscreen = VISIBLE_ROW_COUNT - totalVisible;
+                        start = firstVisible - Math.floor(numberOffscreen / 2);
+                        end = lastVisible + Math.ceil(numberOffscreen / 2);
 
-                let numberOffscreen = VISIBLE_ROW_COUNT - totalVisible;
-                start = firstVisible - Math.floor(numberOffscreen / 2);
-                end = lastVisible + Math.ceil(numberOffscreen / 2);
+                        if (start < 0) {
+                            start = 0;
+                            end = Math.min(VISIBLE_ROW_COUNT, filteredRowsLength);
+                        } else if (end >= filteredRowsLength) {
+                            end = filteredRowsLength;
+                            start = end - VISIBLE_ROW_COUNT + 1;
+                        }
+                    }
+                    this.rowOffset = start;
+                    this.visibleRows = filteredRows.slice(start, end);
 
-                if (start < 0) {
-                    start = 0;
-                    end = Math.min(VISIBLE_ROW_COUNT, filteredRowsLength);
-                } else if (end >= filteredRowsLength) {
-                    end = filteredRowsLength;
-                    start = end - VISIBLE_ROW_COUNT + 1;
-                }
+                    this.updatingView = false;
+                });
             }
-            this.rowOffset = start;
-            this.visibleRows = filteredRows.slice(start, end);
         },
         calculateFirstVisibleRow() {
-            return Math.floor(this.scrollable.scrollTop / this.rowHeight);
+            let scrollTop = this.scrollable.scrollTop;
+            return Math.floor(scrollTop / this.rowHeight);
         },
         calculateLastVisibleRow() {
-            let bottomScroll = this.scrollable.scrollTop + this.scrollable.offsetHeight;
-            return Math.floor(bottomScroll / this.rowHeight);
+            let scrollBottom = this.scrollable.scrollTop + this.scrollable.offsetHeight;
+            return Math.ceil(scrollBottom / this.rowHeight);
         },
         updateHeaders() {
             this.headers = this.table.configuration.getVisibleHeaders();
@@ -443,71 +452,70 @@ export default {
             }
             this.table.sortBy(this.sortOptions);
         },
-        scroll() {
-            if (!this.processingScroll) {
-                this.processingScroll = true;
-                requestAnimationFrame(()=> {
-                    this.updateVisibleRows();
-                    this.synchronizeScrollX();
+        scroll () {
+            this.updateVisibleRows();
+            this.synchronizeScrollX();
 
-                    if (this.shouldSnapToBottom()) {
-                        this.autoScroll = true;
-                    } else {
-                        // If user scrolls away from bottom, disable auto-scroll.
-                        // Auto-scroll will be re-enabled if user scrolls to bottom again.
-                        this.autoScroll = false;
-                    }
-                    this.processingScroll = false;
-                });
+            if (this.shouldSnapToBottom()) {
+                this.autoScroll = true;
+            } else {
+                // If user scrolls away from bottom, disable auto-scroll.
+                // Auto-scroll will be re-enabled if user scrolls to bottom again.
+                this.autoScroll = false;
             }
         },
         shouldSnapToBottom() {
             return this.scrollable.scrollTop >= (this.scrollable.scrollHeight - this.scrollable.offsetHeight - AUTO_SCROLL_TRIGGER_HEIGHT);
         },
         scrollToBottom() {
-            this.scrollable.scrollTop = this.scrollable.scrollHeight;
+            this.scrollable.scrollTop = Number.MAX_SAFE_INTEGER;
         },
         synchronizeScrollX() {
             this.headersHolderEl.scrollLeft = this.scrollable.scrollLeft;
         },
         filterChanged(columnKey) {
             this.table.filteredRows.setColumnFilter(columnKey, this.filters[columnKey]);
+            this.setHeight();
         },
         clearFilter(columnKey) {
             this.filters[columnKey] = '';
             this.table.filteredRows.setColumnFilter(columnKey, '');
+            this.setHeight();
         },
-        rowsAdded(rows) {
+        rowsAdded (rows) {
+            this.setHeight();
+
             let sizingRow;
             if (Array.isArray(rows)) {
                 sizingRow = rows[0];
             } else {
                 sizingRow = rows;
             }
+
             if (!this.sizingRows[sizingRow.objectKeyString]) {
                 this.sizingRows[sizingRow.objectKeyString] = sizingRow;
                 this.$nextTick().then(this.calculateColumnWidths);
             }
 
-            if (!this.updatingView) {
-                this.updatingView = true;
-                requestAnimationFrame(()=> {
-                    this.updateVisibleRows();
-                    if (this.autoScroll) {
-                        this.$nextTick().then(this.scrollToBottom);
-                    }
-                    this.updatingView = false;
-                });
+            if (this.autoScroll) {
+                this.scrollToBottom();
             }
+
+            this.updateVisibleRows();
         },
-        rowsRemoved(rows) {
-            if (!this.updatingView) {
-                this.updatingView = true;
-                requestAnimationFrame(()=> {
-                    this.updateVisibleRows();
-                    this.updatingView = false;
-                });
-            }
+        rowsRemoved (rows) {
+            this.setHeight();
+            this.updateVisibleRows();
+        },
+        /**
+         * Calculates height based on total number of rows, and sets table height.
+         */
+        setHeight() {
+            let filteredRowsLength = this.table.filteredRows.getRows().length;
+            this.totalHeight = this.rowHeight * filteredRowsLength - 1;
+            // Set element height directly to avoid having to wait for Vue to update DOM 
+            // which causes subsequent scroll to use an out of date height.
+            this.contentTable.style.height = this.totalHeight + 'px'; 
         },
         exportAsCSV() {
             const headerKeys = Object.keys(this.headers);
@@ -595,7 +603,11 @@ export default {
                     this.calculateTableSize();
                     // On some resize events scrollTop is reset to 0. Possibly due to a transition we're using?
                     // Need to preserve scroll position in this case.
-                    this.scrollable.scrollTop = scrollTop;
+                    if (this.autoScroll) {
+                        this.scrollToBottom();
+                    } else {
+                        this.scrollable.scrollTop = scrollTop;
+                    }
                     width = el.clientWidth;
                     height = el.clientHeight;
                 }
@@ -608,6 +620,9 @@ export default {
         this.filterChanged = _.debounce(this.filterChanged, 500);
     },
     mounted() {
+        this.rowsAdded = _.throttle(this.rowsAdded, 200);
+        this.rowsRemoved = _.throttle(this.rowsRemoved, 200);
+        this.scroll = _.throttle(this.scroll, 100);
 
         this.table.on('object-added', this.addObject);
         this.table.on('object-removed', this.removeObject);
@@ -621,6 +636,7 @@ export default {
         //Default sort
         this.sortOptions = this.table.filteredRows.sortBy();
         this.scrollable = this.$el.querySelector('.js-telemetry-table__body-w');
+        this.contentTable = this.$el.querySelector('.js-telemetry-table__content');
         this.sizingTable = this.$el.querySelector('.js-telemetry-table__sizing');
         this.headersHolderEl = this.$el.querySelector('.js-table__headers-w');
 

src/styles-new/_about.scss

@@ -54,10 +54,11 @@
 
     &:after {
         // App logo
-        top: 0;
-        right: 15%;
-        bottom: 0;
-        left: 15%;
+        $d: 25%;
+        top: $d;
+        right: $d;
+        bottom: $d;
+        left: $d;
     }
 }
 
@@ -75,12 +76,20 @@
 
     &__image,
     &__text {
-        height: 50%;
-        flex: 1 1 0;
+        flex: 1 1 auto;
+    }
+
+    &__image {
+        height: 35%;
     }
 
     &__text {
+        height: 65%;
         overflow: auto;
+        > * + * {
+            border-top: 1px solid $colorInteriorBorder;
+            margin-top: 1em;
+        }
     }
 
     &--licenses {
@@ -107,7 +116,7 @@
 
     h1, h2, h3 {
         font-weight: normal;
-        margin-bottom: 1em;
+        margin-bottom: .25em;
     }
 
     h1 {

src/styles-new/_constants-espresso.scss

@@ -115,6 +115,9 @@ $colorInfo: #2294a2;
 $colorInfoFg: #fff;
 $colorOk: #33cc33;
 $colorOkFg: #fff;
+$colorFilterBg: #44449c;
+$colorFilterFg: #8984e9;
+
 
 // States
 $colorPausedBg: #ff9900;

src/styles-new/_constants-snow.scss

@@ -115,6 +115,8 @@ $colorInfo: #2294a2;
 $colorInfoFg: #fff;
 $colorOk: #33cc33;
 $colorOkFg: #fff;
+$colorFilterBg: #a29fe2;
+$colorFilterFg: #fff;
 
 // States
 $colorPausedBg: #ff9900;

src/styles-new/_constants.scss

@@ -141,6 +141,8 @@ $glyph-icon-grid: '\e922';
 $glyph-icon-grippy-ew: '\e923';
 $glyph-icon-columns: '\e924';
 $glyph-icon-rows: '\e925';
+$glyph-icon-filter: '\e926';
+$glyph-icon-filter-outline: '\e927';
 $glyph-icon-arrows-right-left: '\ea00';
 $glyph-icon-arrows-up-down: '\ea01';
 $glyph-icon-bullet: '\ea02';

src/styles-new/_controls.scss

@@ -393,6 +393,11 @@ select {
             color: $colorMenuIc;
             font-size: 1em;
             margin-right: $interiorMargin;
+            min-width: 1em;
+        }
+
+        &:not([class]):before {
+             content: ''; // Add this element so that menu items without an icon still indent properly
         }
     }
 }

src/styles-new/_glyphs.scss

@@ -30,10 +30,10 @@
 }
 
 @font-face {
-    // Use https://icomoon.io/app with icomoon-project-openmct-symbols-12px.json to generate font files
+    // Use https://icomoon.io/app with icomoon-project-Open-MCT-Symbols-12px.json to generate font files
     font-family: 'symbolsfont-12px';
-    src: url('./fonts/openmct-symbols-12px.woff') format('woff'),
-    url('./fonts/openmct-symbols-12px.ttf') format('truetype');
+    src: url('./fonts/Open-MCT-Symbols-12px.woff') format('woff'),
+    url('./fonts/Open-MCT-Symbols-12px.ttf') format('truetype');
     font-weight: normal;
     font-style: normal;
 }
@@ -77,6 +77,8 @@
 .icon-grippy-ew {  @include glyphBefore($glyph-icon-grippy-ew); }
 .icon-columns {  @include glyphBefore($glyph-icon-columns); }
 .icon-rows {  @include glyphBefore($glyph-icon-rows); }
+.icon-filter {  @include glyphBefore($glyph-icon-filter); }
+.icon-filter-outline {  @include glyphBefore($glyph-icon-filter-outline); }
 .icon-arrows-right-left {  @include glyphBefore($glyph-icon-arrows-right-left); }
 .icon-arrows-up-down {  @include glyphBefore($glyph-icon-arrows-up-down); }
 .icon-bullet {  @include glyphBefore($glyph-icon-bullet); }
@@ -164,6 +166,8 @@
 
 /************************** 12 PX CLASSES */
 // TODO: sync with 16px redo as of 10/25/18
+.icon-filter-12px {  @include glyphBefore($glyph-icon-filter,'symbolsfont-12px'); }
+.icon-filter-outline-12px {  @include glyphBefore($glyph-icon-filter-outline,'symbolsfont-12px'); }
 .icon-crosshair-12px {  @include glyphBefore($glyph-icon-crosshair,'symbolsfont-12px'); }
 .icon-folder-12px {  @include glyphBefore($glyph-icon-folder,'symbolsfont-12px'); }
 .icon-list-view-12px {  @include glyphBefore($glyph-icon-list-view,'symbolsfont-12px'); }

src/styles-new/_legacy-plots.scss

@@ -51,6 +51,22 @@ mct-plot {
     }
 }
 
+.is-editing {
+    .gl-plot.child-frame {
+        &:hover {
+            background: rgba($editUIColorBg, 0.1);
+            box-shadow: inset rgba($editUIColorBg, 0.8) 0 0 0 1px;
+        }
+
+        &[s-selected] {
+            border: 1px solid $editUIColorFg !important;
+            color: $editUIColorFg !important;
+            box-shadow: $editFrameSelectedShdw;
+            z-index: 2;
+        }
+    }
+}
+
 .gl-plot {
     color: $colorPlotFg;
     display: flex;
@@ -548,3 +564,10 @@ mct-plot {
         top: 0; bottom: 0;
     }
 }
+
+.s-status-timeconductor-unsynced {
+    .t-object-alert.t-alert-unsynced {
+        @extend .icon-alert-triangle;
+        color: $colorPausedBg;
+    }
+}

src/styles-new/_mixins.scss

@@ -425,12 +425,13 @@
     // Background is displayed on hover
     // Padding is included to facilitate a bigger hit area
     // Make the icon bigger relative to its container
+    $pLR: 4px;
+    $pTB: 4px;
+
     @include cControl();
     background: none;
     box-shadow: none;
     cursor: pointer;
-    $pLR: 4px;
-    $pTB: 4px;
     transition: $transOut;
     border-radius: $controlCr;
     padding: $pTB $pLR;

src/styles-new/core.scss

@@ -33,3 +33,4 @@
 @import "table";
 @import "legacy";
 @import "legacy-plots";
+@import "legacy-messages";

src/styles-new/fonts/Open MCT Symbols 12px.json

@@ -1,19 +1,35 @@
 {
   "metadata": {
-    "name": "openmct-symbols-12px",
+    "name": "Open MCT Symbols 12px",
     "lastOpened": 0,
-    "created": 1527031065005
+    "created": 1561483556329
   },
   "iconSets": [
     {
       "selection": [
+        {
+          "order": 12,
+          "id": 10,
+          "name": "icon12-filter",
+          "prevSize": 12,
+          "code": 59686,
+          "tempChar": ""
+        },
+        {
+          "order": 14,
+          "id": 11,
+          "name": "icon12-filter-outline",
+          "prevSize": 12,
+          "code": 59687,
+          "tempChar": ""
+        },
         {
           "order": 9,
           "id": 6,
           "name": "icon12-crosshair",
           "prevSize": 12,
           "code": 59696,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 11,
@@ -21,7 +37,7 @@
           "name": "icon12-grippy",
           "prevSize": 12,
           "code": 59697,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 10,
@@ -29,7 +45,7 @@
           "name": "icon12-list-view",
           "prevSize": 12,
           "code": 921666,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 6,
@@ -37,14 +53,14 @@
           "prevSize": 12,
           "code": 921865,
           "name": "icon12-folder",
-          "tempChar": ""
+          "tempChar": ""
         }
       ],
       "id": 0,
       "metadata": {
-        "name": "openmct-symbols-12px",
+        "name": "Open MCT Symbols 12px",
         "importSize": {
-          "width": 279,
+          "width": 384,
           "height": 384
         },
         "designer": "Charles Hacskaylo"
@@ -52,6 +68,28 @@
       "height": 1024,
       "prevSize": 12,
       "icons": [
+        {
+          "id": 10,
+          "paths": [
+            "M853.333 0h-682.667c-94.135 0.302-170.364 76.532-170.667 170.638l-0 0.029v682.667c0.302 94.135 76.532 170.364 170.638 170.667l0.029 0h256v-341.333l-341.333-341.333h853.333l-341.333 341.333 1.067 341.333h254.933c94.135-0.302 170.364-76.532 170.667-170.638l0-0.029v-682.667c-0.302-94.135-76.532-170.364-170.638-170.667l-0.029-0z"
+          ],
+          "attrs": [],
+          "grid": 0,
+          "tags": [
+            "icon12-filter"
+          ]
+        },
+        {
+          "id": 11,
+          "paths": [
+            "M853.333 0h-682.667c-94.135 0.302-170.364 76.532-170.667 170.638l-0 0.029v682.667c0.302 94.135 76.532 170.364 170.638 170.667l0.029 0h682.667c94.135-0.302 170.364-76.532 170.667-170.638l0-0.029v-682.667c-0.302-94.135-76.532-170.364-170.638-170.667l-0.029-0zM170.933 853.333h-0.267v-512l256 256v256zM853.067 853.333h-255.2l-0.533-256 256-256v511.733zM853.333 341.333h-682.667v-170.4h682.667z"
+          ],
+          "attrs": [],
+          "grid": 0,
+          "tags": [
+            "icon12-filter-outline"
+          ]
+        },
         {
           "id": 6,
           "paths": [
@@ -60,26 +98,11 @@
             "M597.333 768h-170.667v256h170.667v-256z",
             "M256 426.667h-256v170.667h256v-170.667z"
           ],
-          "attrs": [
-            {},
-            {},
-            {},
-            {}
-          ],
-          "isMulticolor": false,
-          "isMulticolor2": false,
+          "attrs": [],
           "grid": 0,
           "tags": [
             "icon12-crosshair"
-          ],
-          "colorPermutations": {
-            "1161751": [
-              {},
-              {},
-              {},
-              {}
-            ]
-          }
+          ]
         },
         {
           "id": 8,
@@ -95,39 +118,12 @@
             "M744.773 511.867c0 51.458-41.715 93.173-93.173 93.173s-93.173-41.715-93.173-93.173c0-51.458 41.715-93.173 93.173-93.173s93.173 41.715 93.173 93.173z",
             "M744.773 791.36c0 51.458-41.715 93.173-93.173 93.173s-93.173-41.715-93.173-93.173c0-51.458 41.715-93.173 93.173-93.173s93.173 41.715 93.173 93.173z"
           ],
-          "attrs": [
-            {},
-            {},
-            {},
-            {},
-            {},
-            {},
-            {},
-            {},
-            {},
-            {}
-          ],
+          "attrs": [],
           "width": 745,
-          "isMulticolor": false,
-          "isMulticolor2": false,
           "grid": 0,
           "tags": [
             "icon12-grippy"
-          ],
-          "colorPermutations": {
-            "1161751": [
-              {},
-              {},
-              {},
-              {},
-              {},
-              {},
-              {},
-              {},
-              {},
-              {}
-            ]
-          }
+          ]
         },
         {
           "id": 7,
@@ -136,24 +132,11 @@
             "M0 426.667h1024v170.667h-1024v-170.667z",
             "M0 853.333h1024v170.667h-1024v-170.667z"
           ],
-          "attrs": [
-            {},
-            {},
-            {}
-          ],
-          "isMulticolor": false,
-          "isMulticolor2": false,
+          "attrs": [],
           "grid": 0,
           "tags": [
             "icon12-list-view"
-          ],
-          "colorPermutations": {
-            "1161751": [
-              {},
-              {},
-              {}
-            ]
-          }
+          ]
         },
         {
           "id": 3,
@@ -162,40 +145,14 @@
             "M85.333 426.667h853.333c47.128 0 85.333 38.205 85.333 85.333v426.667c0 47.128-38.205 85.333-85.333 85.333h-853.333c-47.128 0-85.333-38.205-85.333-85.333v-426.667c0-47.128 38.205-85.333 85.333-85.333z"
           ],
           "attrs": [],
-          "isMulticolor": false,
           "grid": 0,
           "tags": [
             "icon12-folder"
-          ],
-          "colorPermutations": {
-            "1161751": [
-              {
-                "f": 0
-              },
-              {
-                "f": 0
-              }
-            ]
-          }
+          ]
         }
       ],
       "invisible": false,
-      "colorThemes": [
-        [
-          [
-            0,
-            0,
-            0,
-            1
-          ],
-          [
-            0,
-            161,
-            75,
-            1
-          ]
-        ]
-      ],
+      "colorThemes": [],
       "colorThemeIdx": 0
     }
   ],
@@ -206,9 +163,9 @@
     "showQuickUse2": true,
     "showSVGs": true,
     "fontPref": {
-      "prefix": "icon-",
+      "prefix": "openmct-symbols-",
       "metadata": {
-        "fontFamily": "openmct-symbols-12px",
+        "fontFamily": "Open-MCT-Symbols-12px",
         "majorVersion": 1,
         "minorVersion": 0
       },
@@ -217,7 +174,12 @@
         "baseline": 6.25,
         "whitespace": 50
       },
-      "embed": false
+      "embed": false,
+      "noie8": true,
+      "ie7": false,
+      "showMetadata": false,
+      "includeMetadata": false,
+      "showMetrics": true
     },
     "imagePref": {
       "prefix": "icon-",

src/styles-new/fonts/Open MCT Symbols 16px.json

@@ -1,8 +1,8 @@
 {
   "metadata": {
-    "name": "Open MCT Symbols",
+    "name": "Open MCT Symbols 16px",
     "lastOpened": 0,
-    "created": 1541830438012
+    "created": 1561482854927
   },
   "iconSets": [
     {
@@ -317,13 +317,29 @@
           "code": 59685,
           "tempChar": ""
         },
+        {
+          "order": 161,
+          "id": 142,
+          "name": "icon-filter",
+          "prevSize": 32,
+          "code": 59686,
+          "tempChar": ""
+        },
+        {
+          "order": 162,
+          "id": 141,
+          "name": "icon-filter-outline",
+          "prevSize": 32,
+          "code": 59687,
+          "tempChar": ""
+        },
         {
           "order": 27,
           "id": 105,
           "name": "icon-arrows-right-left",
           "prevSize": 32,
           "code": 59904,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 26,
@@ -331,7 +347,7 @@
           "name": "icon-arrows-up-down",
           "prevSize": 32,
           "code": 59905,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 68,
@@ -339,7 +355,7 @@
           "name": "icon-bullet",
           "prevSize": 32,
           "code": 59906,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 150,
@@ -347,7 +363,7 @@
           "prevSize": 32,
           "code": 59907,
           "name": "icon-calendar",
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 45,
@@ -355,7 +371,7 @@
           "name": "icon-chain-links",
           "prevSize": 32,
           "code": 59908,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 73,
@@ -363,7 +379,7 @@
           "name": "icon-download",
           "prevSize": 32,
           "code": 59909,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 39,
@@ -371,7 +387,7 @@
           "name": "icon-duplicate",
           "prevSize": 32,
           "code": 59910,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 50,
@@ -379,7 +395,7 @@
           "name": "icon-folder-new",
           "prevSize": 32,
           "code": 59911,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 138,
@@ -387,7 +403,7 @@
           "name": "icon-fullscreen-collapse",
           "prevSize": 32,
           "code": 59912,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 139,
@@ -395,7 +411,7 @@
           "name": "icon-fullscreen-expand",
           "prevSize": 32,
           "code": 59913,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 122,
@@ -403,7 +419,7 @@
           "name": "icon-layers",
           "prevSize": 32,
           "code": 59914,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 151,
@@ -411,7 +427,7 @@
           "name": "icon-line-horz",
           "prevSize": 32,
           "code": 59915,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 100,
@@ -419,7 +435,7 @@
           "name": "icon-magnify",
           "prevSize": 32,
           "code": 59916,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 99,
@@ -427,7 +443,7 @@
           "name": "icon-magnify-in",
           "prevSize": 32,
           "code": 59917,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 101,
@@ -435,7 +451,7 @@
           "name": "icon-magnify-out-v2",
           "prevSize": 32,
           "code": 59918,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 103,
@@ -443,7 +459,7 @@
           "name": "icon-menu",
           "prevSize": 32,
           "code": 59919,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 124,
@@ -451,7 +467,7 @@
           "name": "icon-move",
           "prevSize": 32,
           "code": 59920,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 7,
@@ -459,7 +475,7 @@
           "name": "icon-new-window",
           "prevSize": 32,
           "code": 59921,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 63,
@@ -467,7 +483,7 @@
           "name": "icon-paint-bucket-v2",
           "prevSize": 32,
           "code": 59922,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 15,
@@ -475,7 +491,7 @@
           "name": "icon-pencil",
           "prevSize": 32,
           "code": 59923,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 54,
@@ -483,7 +499,7 @@
           "name": "icon-pencil-edit-in-place",
           "prevSize": 32,
           "code": 59924,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 40,
@@ -491,7 +507,7 @@
           "name": "icon-play",
           "prevSize": 32,
           "code": 59925,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 125,
@@ -499,7 +515,7 @@
           "name": "icon-pause",
           "prevSize": 32,
           "code": 59926,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 119,
@@ -507,7 +523,7 @@
           "name": "icon-plot-resource",
           "prevSize": 32,
           "code": 59927,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 48,
@@ -515,7 +531,7 @@
           "name": "icon-pointer-left",
           "prevSize": 32,
           "code": 59928,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 47,
@@ -523,7 +539,7 @@
           "name": "icon-pointer-right",
           "prevSize": 32,
           "code": 59929,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 85,
@@ -531,7 +547,7 @@
           "name": "icon-refresh",
           "prevSize": 32,
           "code": 59930,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 55,
@@ -539,7 +555,7 @@
           "name": "icon-save",
           "prevSize": 32,
           "code": 59931,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 56,
@@ -547,7 +563,7 @@
           "name": "icon-save-as",
           "prevSize": 32,
           "code": 59932,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 58,
@@ -555,7 +571,7 @@
           "name": "icon-sine",
           "prevSize": 32,
           "code": 59933,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 113,
@@ -563,7 +579,7 @@
           "name": "icon-font",
           "prevSize": 32,
           "code": 59934,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 41,
@@ -571,7 +587,7 @@
           "name": "icon-thumbs-strip",
           "prevSize": 32,
           "code": 59935,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 146,
@@ -579,7 +595,7 @@
           "name": "icon-two-parts-both",
           "prevSize": 32,
           "code": 59936,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 145,
@@ -587,7 +603,7 @@
           "name": "icon-two-parts-one-only",
           "prevSize": 32,
           "code": 59937,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 82,
@@ -595,7 +611,7 @@
           "name": "icon-resync",
           "prevSize": 32,
           "code": 59938,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 86,
@@ -603,7 +619,7 @@
           "name": "icon-reset",
           "prevSize": 32,
           "code": 59939,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 61,
@@ -611,7 +627,7 @@
           "name": "icon-x-in-circle",
           "prevSize": 32,
           "code": 59940,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 84,
@@ -619,7 +635,7 @@
           "name": "icon-brightness",
           "prevSize": 32,
           "code": 59941,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 83,
@@ -627,7 +643,7 @@
           "name": "icon-contrast",
           "prevSize": 32,
           "code": 59942,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 87,
@@ -635,7 +651,7 @@
           "name": "icon-expand",
           "prevSize": 32,
           "code": 59943,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 89,
@@ -643,7 +659,7 @@
           "name": "icon-list-view",
           "prevSize": 32,
           "code": 59944,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 133,
@@ -651,7 +667,7 @@
           "name": "icon-grid-snap-to",
           "prevSize": 32,
           "code": 59945,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 132,
@@ -659,7 +675,7 @@
           "name": "icon-grid-snap-no",
           "prevSize": 32,
           "code": 59946,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 94,
@@ -667,7 +683,7 @@
           "name": "icon-frame-show",
           "prevSize": 32,
           "code": 59947,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 95,
@@ -675,7 +691,7 @@
           "name": "icon-frame-hide",
           "prevSize": 32,
           "code": 59948,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 97,
@@ -683,7 +699,7 @@
           "name": "icon-import",
           "prevSize": 32,
           "code": 59949,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 96,
@@ -691,7 +707,7 @@
           "name": "icon-export",
           "prevSize": 32,
           "code": 59950,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 114,
@@ -699,7 +715,7 @@
           "name": "icon-font-size",
           "prevSize": 32,
           "code": 59951,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 144,
@@ -707,7 +723,7 @@
           "name": "icon-activity",
           "prevSize": 32,
           "code": 60160,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 104,
@@ -715,7 +731,7 @@
           "name": "icon-activity-mode",
           "prevSize": 32,
           "code": 60161,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 137,
@@ -723,7 +739,7 @@
           "name": "icon-autoflow-tabular",
           "prevSize": 32,
           "code": 60162,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 115,
@@ -731,7 +747,7 @@
           "name": "icon-clock",
           "prevSize": 32,
           "code": 60163,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 2,
@@ -739,7 +755,7 @@
           "name": "icon-database",
           "prevSize": 32,
           "code": 60164,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 3,
@@ -747,7 +763,7 @@
           "name": "icon-database-query",
           "prevSize": 32,
           "code": 60165,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 67,
@@ -755,7 +771,7 @@
           "name": "icon-dataset",
           "prevSize": 32,
           "code": 60166,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 59,
@@ -763,7 +779,7 @@
           "name": "icon-datatable",
           "prevSize": 32,
           "code": 60167,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 136,
@@ -771,7 +787,7 @@
           "name": "icon-dictionary",
           "prevSize": 32,
           "code": 60168,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 51,
@@ -779,7 +795,7 @@
           "name": "icon-folder",
           "prevSize": 32,
           "code": 60169,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 147,
@@ -787,7 +803,7 @@
           "name": "icon-image",
           "prevSize": 32,
           "code": 60170,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 4,
@@ -795,7 +811,7 @@
           "name": "icon-layout",
           "prevSize": 32,
           "code": 60171,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 24,
@@ -803,7 +819,7 @@
           "name": "icon-object",
           "prevSize": 32,
           "code": 60172,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 52,
@@ -811,7 +827,7 @@
           "name": "icon-object-unknown",
           "prevSize": 32,
           "code": 60173,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 105,
@@ -819,7 +835,7 @@
           "name": "icon-packet",
           "prevSize": 32,
           "code": 60174,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 126,
@@ -827,7 +843,7 @@
           "name": "icon-page",
           "prevSize": 32,
           "code": 60175,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 130,
@@ -835,7 +851,7 @@
           "name": "icon-plot-overlay",
           "prevSize": 32,
           "code": 60176,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 80,
@@ -843,7 +859,7 @@
           "name": "icon-plot-stacked",
           "prevSize": 32,
           "code": 60177,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 134,
@@ -851,7 +867,7 @@
           "name": "icon-session",
           "prevSize": 32,
           "code": 60178,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 109,
@@ -859,7 +875,7 @@
           "name": "icon-tabular",
           "prevSize": 32,
           "code": 60179,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 107,
@@ -867,7 +883,7 @@
           "name": "icon-tabular-lad",
           "prevSize": 32,
           "code": 60180,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 106,
@@ -875,7 +891,7 @@
           "name": "icon-tabular-lad-set",
           "prevSize": 32,
           "code": 60181,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 70,
@@ -883,7 +899,7 @@
           "name": "icon-tabular-realtime",
           "prevSize": 32,
           "code": 60182,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 60,
@@ -891,7 +907,7 @@
           "name": "icon-tabular-scrolling",
           "prevSize": 32,
           "code": 60183,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 131,
@@ -899,7 +915,7 @@
           "name": "icon-telemetry",
           "prevSize": 32,
           "code": 60184,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 108,
@@ -907,7 +923,7 @@
           "name": "icon-timeline",
           "prevSize": 32,
           "code": 60185,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 81,
@@ -915,7 +931,7 @@
           "name": "icon-timer",
           "prevSize": 32,
           "code": 60186,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 69,
@@ -923,7 +939,7 @@
           "name": "icon-topic",
           "prevSize": 32,
           "code": 60187,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 79,
@@ -931,7 +947,7 @@
           "name": "icon-box-with-dashed-lines-v2",
           "prevSize": 32,
           "code": 60188,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 90,
@@ -939,7 +955,7 @@
           "name": "icon-summary-widget",
           "prevSize": 32,
           "code": 60189,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 92,
@@ -947,7 +963,7 @@
           "name": "icon-notebook",
           "prevSize": 32,
           "code": 60190,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 118,
@@ -955,7 +971,7 @@
           "name": "icon-tabs-view",
           "prevSize": 32,
           "code": 60191,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 117,
@@ -963,7 +979,7 @@
           "name": "icon-flexible-layout",
           "prevSize": 32,
           "code": 60192,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 152,
@@ -971,7 +987,7 @@
           "name": "icon-generator-sine",
           "prevSize": 32,
           "code": 60193,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 153,
@@ -979,7 +995,7 @@
           "name": "icon-generator-event",
           "prevSize": 32,
           "code": 60194,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 160,
@@ -987,7 +1003,7 @@
           "name": "icon-gauge",
           "prevSize": 32,
           "code": 60195,
-          "tempChar": ""
+          "tempChar": ""
         }
       ],
       "id": 0,
@@ -1602,6 +1618,46 @@
             ]
           }
         },
+        {
+          "id": 142,
+          "paths": [
+            "M896 0h-768c-70.601 0.227-127.773 57.399-128 127.978l-0 0.022v768c0.227 70.601 57.399 127.773 127.978 128l0.022 0h256v-512l-192-192h640l-192 192v512h256c70.601-0.227 127.773-57.399 128-127.978l0-0.022v-768c-0.227-70.601-57.399-127.773-127.978-128l-0.022-0z"
+          ],
+          "attrs": [
+            {}
+          ],
+          "isMulticolor": false,
+          "isMulticolor2": false,
+          "grid": 1,
+          "tags": [
+            "icon-filter"
+          ],
+          "colorPermutations": {
+            "11841841841": [
+              {}
+            ]
+          }
+        },
+        {
+          "id": 141,
+          "paths": [
+            "M896 0h-768c-70.601 0.227-127.773 57.399-128 127.978l-0 0.022v768c0.227 70.601 57.399 127.773 127.978 128l0.022 0h768c70.601-0.227 127.773-57.399 128-127.978l0-0.022v-768c-0.227-70.601-57.399-127.773-127.978-128l-0.022-0zM896 895.8h-256v-383.8l192-192h-640l192 192v384h-256v-767.8h768z"
+          ],
+          "attrs": [
+            {}
+          ],
+          "isMulticolor": false,
+          "isMulticolor2": false,
+          "grid": 1,
+          "tags": [
+            "icon-filter-outline"
+          ],
+          "colorPermutations": {
+            "11841841841": [
+              {}
+            ]
+          }
+        },
         {
           "id": 105,
           "paths": [

src/styles-new/sass-base.scss

@@ -25,8 +25,8 @@
 // Do not include anything that renders to CSS!
 @import "constants";
 @import "constants-mobile.scss";
-//@import "constants-espresso"; // TEMP
-@import "constants-snow"; // TEMP
+@import "constants-espresso"; // TEMP
+//@import "constants-snow"; // TEMP
 //@import "constants-maelstrom";
 @import "mixins";
 @import "animations";

src/ui/components/ObjectFrame.vue

@@ -26,8 +26,8 @@
             'has-complex-content': complexContent
         }">
         <div class="c-so-view__header">
-            <div class="c-so-view__header__name"
-                 :class="cssClass">
+            <div class="c-so-view__header__icon" :class="cssClass"></div>
+            <div class="c-so-view__header__name">
                 {{ domainObject && domainObject.name }}
             </div>
             <context-menu-drop-down
@@ -63,12 +63,16 @@
             align-items: center;
             margin-bottom: $interiorMargin;
 
+            &__icon {
+                flex: 0 0 auto;
+                margin-right: $interiorMarginSm;
+                opacity: 0.5;
+            }
+
             &__name {
                 @include headerFont(1em);
-                display: flex;
-                &:before {
-                    margin-right: $interiorMarginSm;
-                }
+                @include ellipsize();
+                flex: 0 1 auto;
             }
         }
 
@@ -88,19 +92,6 @@
             }
         }
 
-        &__name {
-            @include ellipsize();
-            @include headerFont(1.2em);
-            flex: 0 1 auto;
-
-            &:before {
-                // Object type icon
-                flex: 0 0 auto;
-                margin-right: $interiorMarginSm;
-                opacity: 0.5;
-            }
-        }
-
         &__local-controls {
             position: absolute;
             top: $interiorMargin; right: $interiorMargin;

src/ui/components/ObjectView.vue

@@ -34,10 +34,10 @@ export default {
         this.currentObject = this.object;
         this.updateView();
         this.$el.addEventListener('dragover', this.onDragOver);
-        this.$el.addEventListener('drop', this.addObjectToParent);
         this.$el.addEventListener('drop', this.editIfEditable, {
             capture: true
         });
+        this.$el.addEventListener('drop', this.addObjectToParent);
     },
     methods: {
         clear() {
@@ -57,6 +57,10 @@ export default {
                 this.removeSelectable();
                 delete this.removeSelectable;
             }
+
+            if (this.composition) {
+                this.composition._destroy();
+            }
         },
         invokeEditModeHandler(editMode) {
             this.currentView.onEditModeChange(editMode);
@@ -70,6 +74,13 @@ export default {
             if (!this.currentObject) {
                 return;
             }
+            
+            this.composition = this.openmct.composition.get(this.currentObject);
+            if (this.composition) {
+                this.composition._synchronize();
+                this.loadComposition();
+            }
+
             this.viewContainer = document.createElement('div');
             this.viewContainer.classList.add('c-object-view','u-contents');
             this.$el.append(this.viewContainer);
@@ -112,6 +123,10 @@ export default {
                 delete this.removeSelectable;
             }
 
+            if (this.composition) {
+                this.composition._destroy();
+            }
+
             this.currentObject = object;
             this.unlisten = this.openmct.objects.observe(this.currentObject, '*', (mutatedObject) => {
                 this.currentObject = mutatedObject;
@@ -120,6 +135,9 @@ export default {
             this.viewKey = viewKey;
             this.updateView(immediatelySelect);
         },
+        loadComposition() {
+            return this.composition.load();
+        },
         getSelectionContext() {
             if (this.currentView.getSelectionContext) {
                 return this.currentView.getSelectionContext();
@@ -133,10 +151,12 @@ export default {
             }
         },
         addObjectToParent(event) {
-            if (this.hasComposableDomainObject(event)) {
+            if (this.hasComposableDomainObject(event) && this.composition) {
                 let composableDomainObject = this.getComposableDomainObject(event);
-                this.currentObject.composition.push(composableDomainObject.identifier);
-                this.openmct.objects.mutate(this.currentObject, 'composition', this.currentObject.composition);
+                this.loadComposition().then(() => {
+                    this.composition.add(composableDomainObject);
+                });
+
                 event.preventDefault();
                 event.stopPropagation();
             }
@@ -155,6 +175,7 @@ export default {
         editIfEditable(event) {
             let provider = this.getViewProvider();
             if (provider && 
+                provider.canEdit &&
                 provider.canEdit(this.currentObject) &&
                 !this.openmct.editor.isEditing()) {
                     this.openmct.editor.edit();

src/ui/inspector/Elements.vue

@@ -67,6 +67,7 @@
     }
 </style>
 <script>
+import _ from 'lodash';
 import Search from '../components/search.vue';
 import ObjectLabel from '../components/ObjectLabel.vue';
 
@@ -82,7 +83,8 @@ export default {
             isEditing: this.openmct.editor.isEditing(),
             parentObject: undefined,
             currentSearch: '',
-            isDragging: false
+            isDragging: false,
+            selection: []
         }
     },
     mounted() {
@@ -99,6 +101,10 @@ export default {
             this.showSelection(this.openmct.selection.get());
         },
         showSelection(selection) {
+            if (_.isEqual(this.selection, selection)) {
+                return;
+            }
+            this.selection = selection;
             this.elements = [];
             this.elementsCache = {};
             this.listeners = [];

src/ui/inspector/InspectorViews.vue

@@ -25,10 +25,6 @@ import _ from 'lodash';
         },
         methods: {
             updateSelection(selection) {
-                if (_.isEqual(this.selection, selection)) {
-                    return;
-                }
-
                 this.selection = selection;
 
                 if (this.selectedViews) {
@@ -38,10 +34,6 @@ import _ from 'lodash';
                     this.$el.innerHTML = '';
                 }
 
-                if (selection.length > 1) {
-                    return;
-                }
-
                 this.selectedViews = this.openmct.inspectorViews.get(selection);
                 this.selectedViews.forEach(selectedView => {
                     let viewContainer = document.createElement('div');

src/ui/layout/AboutDialog.vue

@@ -1,23 +1,24 @@
 <template>
 <div class="c-about c-about--splash">
-    <div v-if="branding.aboutHtml" class="s-text l-content" v-html="branding.aboutHtml"></div>
-    <div v-else class="c-about__image c-splash-image"></div>
-
+    <div class="c-about__image c-splash-image"></div>
     <div class="c-about__text s-text">
-        <h1 class="l-title s-title">Open MCT</h1>
-        <div class="l-description s-description">
-	        <p>Open MCT, Copyright &copy; 2014-2019, United States Government as represented by the Administrator of the National Aeronautics and Space Administration. All rights reserved.</p>
-	        <p>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 <a target="_blank" href="http://www.apache.org/licenses/LICENSE-2.0">http://www.apache.org/licenses/LICENSE-2.0</a>.</p>
-	        <p>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.</p>
-	        <p>Open MCT includes source code licensed under additional open source licenses. See the Open Source Licenses file included with this distribution or <a @click="showLicenses">click here for third party licensing information</a>.</p>
+        <div class="c-about__text__element" v-if="branding.aboutHtml" v-html="branding.aboutHtml"></div>
+        <div class="c-about__text__element">
+            <h1 class="l-title s-title">Open MCT</h1>
+            <div class="l-description s-description">
+                <p>Open MCT, Copyright &copy; 2014-2019, United States Government as represented by the Administrator of the National Aeronautics and Space Administration. All rights reserved.</p>
+                <p>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 <a target="_blank" href="http://www.apache.org/licenses/LICENSE-2.0">http://www.apache.org/licenses/LICENSE-2.0</a>.</p>
+                <p>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.</p>
+                <p>Open MCT includes source code licensed under additional open source licenses. See the Open Source Licenses file included with this distribution or <a @click="showLicenses">click here for third party licensing information</a>.</p>
+            </div>
+            <h2>Version Information</h2>
+            <ul class="t-info l-info s-info">
+                <li>Version: {{buildInfo.version || 'Unknown'}}</li>
+                <li>Build Date: {{buildInfo.buildDate || 'Unknown'}}</li>
+                <li>Revision: {{buildInfo.revision || 'Unknown'}}</li>
+                <li>Branch: {{buildInfo.branch || 'Unknown'}}</li>
+            </ul>
         </div>
-        <h2>Version Information</h2>
-        <ul class="t-info l-info s-info">
-            <li>Version: {{buildInfo.version || 'Unknown'}}</li>
-            <li>Build Date: {{buildInfo.buildDate || 'Unknown'}}</li>
-            <li>Revision: {{buildInfo.revision || 'Unknown'}}</li>
-            <li>Branch: {{buildInfo.branch || 'Unknown'}}</li>
-        </ul>
     </div>
 </div>
 </template>

src/ui/layout/BrowseBar.vue

@@ -289,10 +289,14 @@ const PLACEHOLDER_OBJECT = {};
 
         &__nav-to-parent-button {
             // This is an icon-button
-            $p: $interiorMarginLg;
+            $p: $interiorMargin;
             margin-right: $interiorMargin;
             padding-left: $p;
             padding-right: $p;
+
+            .is-editing & {
+                display: none;
+            }
         }
 
         &__object-name--w {

src/ui/layout/Layout.vue

@@ -64,7 +64,6 @@
         &__status {
             background: $colorStatusBarBg;
             color: $colorStatusBarFg;
-            height: 24px;
             padding: $interiorMarginSm;
         }
 
@@ -75,6 +74,7 @@
                 // For mobile, collapse button becomes menu icon
                 body.mobile & {
                     @include cClickIconButton();
+                    color: $colorKey !important;
                     position: absolute;
                     right: -2 * nth($shellPanePad, 2); // Needs to be -1 * when pane is collapsed
                     top: 0;
@@ -186,6 +186,7 @@
         &__main-container {
             // Wrapper for main views
             flex: 1 1 auto !important;
+            height: 0; // Chrome 73 overflow bug fix
             overflow: auto;
         }
 

src/ui/layout/mct-tree.vue

@@ -52,13 +52,12 @@
 
         &__tree {
             flex: 1 1 auto;
-            height: 100%;
+            height: 0; // Chrome 73 overflow bug fix
         }
     }
 
     .c-tree {
         @include userSelectNone();
-        height: 100%; // Chrome 73 overflow bug fix
         overflow-x: hidden;
         overflow-y: auto;
         padding-right: $interiorMargin;

src/ui/layout/pane.vue

@@ -194,8 +194,8 @@
                 /********************************* STYLES FOR DESKTOP COLLAPSED PANES, ALL ORIENTATIONS */
                 $d: nth($splitterBtnD, 1);
                 flex-basis: $d;
-                min-width: $d !important;
-                min-height: $d !important;
+                min-width: $d;
+                min-height: $d;
 
                 > .l-pane__handle {
                     display: none;

src/ui/layout/tree-item.vue

@@ -70,17 +70,18 @@
                 this.domainObject = newObject;
             });
             this.$once('hook:destroyed', removeListener);
+
             if (this.openmct.composition.get(this.node.object)) {
                 this.hasChildren = true;
             }
 
             this.openmct.router.on('change:path', this.highlightIfNavigated);
         },
-        destroy() {
+        destroyed() {
+            this.openmct.router.off('change:path', this.highlightIfNavigated);
             if (this.composition) {
                 this.composition.off('add', this.addChild);
                 this.composition.off('remove', this.removeChild);
-                this.openmct.router.off('change:path', this.highlightIfNavigated);
                 delete this.composition;
             }
         },

src/ui/mixins/context-menu-gesture.js

@@ -18,7 +18,7 @@ export default {
 
         this.objectPath.forEach(object => {
             if (object) {
-                this.$once('hook:destroy',
+                this.$once('hook:destroyed',
                     this.openmct.objects.observe(object, '*', updateObject.bind(this, object)))
             }
         });

src/ui/preview/Preview.vue

@@ -33,7 +33,8 @@
             </div>
             <div class="l-browse-bar__end">
                 <div class="l-browse-bar__actions">
-                    <button class="l-browse-bar__actions__edit c-button icon-notebook" 
+                    <button v-if="notebookEnabled"
+                        class="l-browse-bar__actions__edit c-button icon-notebook" 
                         title="New Notebook entry" 
                         @click="snapshot">
                     </button>
@@ -101,16 +102,21 @@
 
             return {
                 domainObject: domainObject,
-                type: type
+                type: type,
+                notebookEnabled: false
             };
         },
         mounted() {
             let viewProvider = this.openmct.objectViews.get(this.domainObject)[0];
             this.view = viewProvider.view(this.domainObject);
             this.view.show(this.$refs.objectView, false);
-            this.notebookSnapshot = new NotebookSnapshot(this.openmct);
+
+            if (this.openmct.types.get('notebook')) {
+                this.notebookSnapshot = new NotebookSnapshot(this.openmct);
+                this.notebookEnabled = true;
+            }
         },
-        destroy() {
+        destroyed() {
             this.view.destroy();
         }
     }

webpack.config.js

@@ -35,6 +35,7 @@ const webpackConfig = {
             "bourbon": "bourbon.scss",
             "vue": path.join(__dirname, "node_modules/vue/dist/vue.js"),
             "d3-scale": path.join(__dirname, "node_modules/d3-scale/build/d3-scale.min.js"),
+            "printj": path.join(__dirname, "node_modules/printj/dist/printj.min.js"),
             "styles": path.join(__dirname, "src/styles-new")
         }
     },