garbage collect plotly data.

### Reviewer Checklist

1. Changes appear to address issue? Y
2. Appropriate unit tests included? Y
3. Code style and in-line documentation are appropriate? Y
4. Commit messages meet standards? Y
5. Has associated issue been labelled `unverified`? (only applicable if this PR closes the issue) Y

.gitignore

@@ -37,5 +37,8 @@ protractor/logs
 # npm-debug log
 npm-debug.log
 
+# karma reports
+report.*.json
+
 package-lock.json
 report.*.json

index.html

@@ -113,7 +113,10 @@
         openmct.install(openmct.plugins.LADTable());
         openmct.install(openmct.plugins.Filters(['table', 'telemetry.plot.overlay']));
         openmct.install(openmct.plugins.ObjectMigration());
-        openmct.install(openmct.plugins.ClearData(['table', 'telemetry.plot.overlay', 'telemetry.plot.stacked']));
+        openmct.install(openmct.plugins.ClearData(
+            ['table', 'telemetry.plot.overlay', 'telemetry.plot.stacked'],
+            {indicator: true}
+        ));
         openmct.start();
     </script>
 </html>

karma.conf.js

@@ -23,7 +23,7 @@
 /*global module,process*/
 
 const devMode = process.env.NODE_ENV !== 'production';
-const browsers = [process.env.NODE_ENV === 'debug' ? 'ChromeDebugging' : 'ChromeHeadless'];
+const browsers = [process.env.NODE_ENV === 'debug' ? 'ChromeDebugging' : 'FirefoxHeadless'];
 const coverageEnabled = process.env.COVERAGE === 'true';
 const reporters = ['progress', 'html'];
 
@@ -95,6 +95,7 @@ module.exports = (config) => {
             stats: 'errors-only',
             logLevel: 'warn'
         },
-        singleRun: true
+        singleRun: true,
+        browserNoActivityTimeout: 90000
     });
 }

package.json

@@ -38,13 +38,14 @@
     "istanbul-instrumenter-loader": "^3.0.1",
     "jasmine-core": "^3.1.0",
     "jsdoc": "^3.3.2",
-    "karma": "5.0.9",
-    "karma-chrome-launcher": "3.1.0",
+    "karma": "^2.0.3",
+    "karma-chrome-launcher": "^2.2.0",
+    "karma-firefox-launcher": "^1.3.0",
     "karma-cli": "^1.0.1",
     "karma-coverage": "^1.1.2",
     "karma-coverage-istanbul-reporter": "^2.1.1",
     "karma-html-reporter": "^0.2.7",
-    "karma-jasmine": "^2.0.0",
+    "karma-jasmine": "^1.1.2",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^3.0.0",
     "location-bar": "^3.0.1",
@@ -58,9 +59,8 @@
     "moment-timezone": "0.5.28",
     "node-bourbon": "^4.2.3",
     "node-sass": "^4.9.2",
-    "painterro": "^0.2.65",
-    "plotly.js-basic-dist-min": "^1.54.6",
-    "plotly.js-gl2d-dist-min": "^1.54.5",
+    "painterro": "^1.0.35",
+    "plotly.js-dist": "^1.54.5",
     "printj": "^1.2.1",
     "raw-loader": "^0.5.1",
     "request": "^2.69.0",

platform/commonUI/edit/src/policies/EditPersistableObjectsPolicy.js

@@ -36,8 +36,6 @@ define(
         }
 
         EditPersistableObjectsPolicy.prototype.allow = function (action, context) {
-            var identifier;
-            var provider;
             var domainObject = context.domainObject;
             var key = action.getMetadata().key;
             var category = (context || {}).category;
@@ -46,9 +44,8 @@ define(
             // is also invoked during the create process which should be allowed,
             // because it may be saved elsewhere
             if ((key === 'edit' && category === 'view-control') || key === 'properties') {
-                identifier = objectUtils.parseKeyString(domainObject.getId());
-                provider = this.openmct.objects.getProvider(identifier);
-                return provider.save !== undefined;
+                let newStyleObject = objectUtils.toNewFormat(domainObject, domainObject.getId());
+                return this.openmct.objects.isPersistable(newStyleObject);
             }
 
             return true;

platform/commonUI/edit/test/policies/EditPersistableObjectsSpec.js

@@ -43,7 +43,7 @@ define(
                 );
 
                 mockObjectAPI = jasmine.createSpyObj('objectAPI', [
-                    'getProvider'
+                    'isPersistable'
                 ]);
 
                 mockAPI = {
@@ -69,34 +69,31 @@ define(
             });
 
             it("Applies to edit action", function () {
-                mockObjectAPI.getProvider.and.returnValue({});
-                expect(mockObjectAPI.getProvider).not.toHaveBeenCalled();
+                expect(mockObjectAPI.isPersistable).not.toHaveBeenCalled();
 
                 policy.allow(mockEditAction, testContext);
-                expect(mockObjectAPI.getProvider).toHaveBeenCalled();
+                expect(mockObjectAPI.isPersistable).toHaveBeenCalled();
             });
 
             it("Applies to properties action", function () {
-                mockObjectAPI.getProvider.and.returnValue({});
-                expect(mockObjectAPI.getProvider).not.toHaveBeenCalled();
+                expect(mockObjectAPI.isPersistable).not.toHaveBeenCalled();
 
                 policy.allow(mockPropertiesAction, testContext);
-                expect(mockObjectAPI.getProvider).toHaveBeenCalled();
+                expect(mockObjectAPI.isPersistable).toHaveBeenCalled();
             });
 
             it("does not apply to other actions", function () {
-                mockObjectAPI.getProvider.and.returnValue({});
-                expect(mockObjectAPI.getProvider).not.toHaveBeenCalled();
+                expect(mockObjectAPI.isPersistable).not.toHaveBeenCalled();
 
                 policy.allow(mockOtherAction, testContext);
-                expect(mockObjectAPI.getProvider).not.toHaveBeenCalled();
+                expect(mockObjectAPI.isPersistable).not.toHaveBeenCalled();
             });
 
             it("Tests object provider for editability", function () {
-                mockObjectAPI.getProvider.and.returnValue({});
+                mockObjectAPI.isPersistable.and.returnValue(false);
                 expect(policy.allow(mockEditAction, testContext)).toBe(false);
-                expect(mockObjectAPI.getProvider).toHaveBeenCalled();
-                mockObjectAPI.getProvider.and.returnValue({save: function () {}});
+                expect(mockObjectAPI.isPersistable).toHaveBeenCalled();
+                mockObjectAPI.isPersistable.and.returnValue(true);
                 expect(policy.allow(mockEditAction, testContext)).toBe(true);
             });
         });

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

@@ -19,7 +19,13 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<div class="c-object-label">
-    <div class="c-object-label__type-icon {{type.getCssClass()}}" ng-class="{ 'l-icon-link':location.isLink() }"></div>
+<div class="c-object-label"
+     ng-class="{ 'is-missing': model.status === 'missing' }"
+>
+    <div class="c-object-label__type-icon {{type.getCssClass()}}"
+         ng-class="{ 'l-icon-link':location.isLink() }"
+    >
+        <span class="is-missing__indicator" title="This item is missing"></span>
+    </div>
     <div class='c-object-label__name'>{{model.name}}</div>
 </div>

platform/containment/src/PersistableCompositionPolicy.js

@@ -48,9 +48,8 @@ define(
             // prevents editing of objects that cannot be persisted, so we can assume that this
             // is a new object.
             if (!(parent.hasCapability('editor') && parent.getCapability('editor').isEditContextRoot())) {
-                var identifier = objectUtils.parseKeyString(parent.getId());
-                var provider = this.openmct.objects.getProvider(identifier);
-                return provider.save !== undefined;
+                let newStyleObject = objectUtils.toNewFormat(parent, parent.getId());
+                return this.openmct.objects.isPersistable(newStyleObject);
             }
             return true;
         };

platform/containment/test/PersistableCompositionPolicySpec.js

@@ -33,7 +33,7 @@ define(
 
             beforeEach(function () {
                 objectAPI = jasmine.createSpyObj('objectsAPI', [
-                    'getProvider'
+                    'isPersistable'
                 ]);
 
                 mockOpenMCT = {
@@ -51,10 +51,6 @@ define(
                     'isEditContextRoot'
                 ]);
                 mockParent.getCapability.and.returnValue(mockEditorCapability);
-
-                objectAPI.getProvider.and.returnValue({
-                    save: function () {}
-                });
                 persistableCompositionPolicy = new PersistableCompositionPolicy(mockOpenMCT);
             });
 
@@ -65,19 +61,22 @@ define(
 
             it("Does not allow composition for objects that are not persistable", function () {
                 mockEditorCapability.isEditContextRoot.and.returnValue(false);
+                objectAPI.isPersistable.and.returnValue(true);
                 expect(persistableCompositionPolicy.allow(mockParent, mockChild)).toBe(true);
-                objectAPI.getProvider.and.returnValue({});
+                objectAPI.isPersistable.and.returnValue(false);
                 expect(persistableCompositionPolicy.allow(mockParent, mockChild)).toBe(false);
             });
 
             it("Always allows composition of objects in edit mode to support object creation", function () {
                 mockEditorCapability.isEditContextRoot.and.returnValue(true);
+                objectAPI.isPersistable.and.returnValue(true);
                 expect(persistableCompositionPolicy.allow(mockParent, mockChild)).toBe(true);
-                expect(objectAPI.getProvider).not.toHaveBeenCalled();
+                expect(objectAPI.isPersistable).not.toHaveBeenCalled();
 
                 mockEditorCapability.isEditContextRoot.and.returnValue(false);
+                objectAPI.isPersistable.and.returnValue(true);
                 expect(persistableCompositionPolicy.allow(mockParent, mockChild)).toBe(true);
-                expect(objectAPI.getProvider).toHaveBeenCalled();
+                expect(objectAPI.isPersistable).toHaveBeenCalled();
             });
 
         });

platform/core/bundle.js

@@ -297,7 +297,8 @@ define([
                             "persistenceService",
                             "identifierService",
                             "notificationService",
-                            "$q"
+                            "$q",
+                            "openmct"
                         ]
                     },
                     {

platform/core/src/capabilities/PersistenceCapability.js

@@ -20,8 +20,8 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define(
-    function () {
+define(["objectUtils"],
+    function (objectUtils) {
 
         /**
          * Defines the `persistence` capability, used to trigger the
@@ -47,6 +47,7 @@ define(
             identifierService,
             notificationService,
             $q,
+            openmct,
             domainObject
         ) {
             // Cache modified timestamp
@@ -58,6 +59,7 @@ define(
             this.persistenceService = persistenceService;
             this.notificationService = notificationService;
             this.$q = $q;
+            this.openmct = openmct;
         }
 
         /**
@@ -66,7 +68,7 @@ define(
          */
         function rejectIfFalsey(value, $q) {
             if (!value) {
-                return $q.reject("Error persisting object");
+                return Promise.reject("Error persisting object");
             } else {
                 return value;
             }
@@ -98,7 +100,7 @@ define(
                 dismissable: true
             });
 
-            return $q.reject(error);
+            return Promise.reject(error);
         }
 
         /**
@@ -110,34 +112,16 @@ define(
          */
         PersistenceCapability.prototype.persist = function () {
             var self = this,
-                domainObject = this.domainObject,
-                model = domainObject.getModel(),
-                modified = model.modified,
-                persisted = model.persisted,
-                persistenceService = this.persistenceService,
-                persistenceFn = persisted !== undefined ?
-                    this.persistenceService.updateObject :
-                    this.persistenceService.createObject;
+                domainObject = this.domainObject;
 
-            if (persisted !== undefined && persisted === modified) {
-                return this.$q.when(true);
-            }
-
-            // Update persistence timestamp...
-            domainObject.useCapability("mutation", function (m) {
-                m.persisted = modified;
-            }, modified);
-
-            // ...and persist
-            return persistenceFn.apply(persistenceService, [
-                this.getSpace(),
-                this.getKey(),
-                domainObject.getModel()
-            ]).then(function (result) {
-                return rejectIfFalsey(result, self.$q);
-            }).catch(function (error) {
-                return notifyOnError(error, domainObject, self.notificationService, self.$q);
-            });
+            let newStyleObject = objectUtils.toNewFormat(domainObject.getModel(), domainObject.getId());
+            return this.openmct.objects
+                .save(newStyleObject)
+                .then(function (result) {
+                    return rejectIfFalsey(result, self.$q);
+                }).catch(function (error) {
+                    return notifyOnError(error, domainObject, self.notificationService, self.$q);
+                });
         };
 
         /**

platform/core/test/capabilities/PersistenceCapabilitySpec.js

@@ -19,7 +19,6 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-
 /**
  * PersistenceCapabilitySpec. Created by vwoeltje on 11/6/14.
  */
@@ -40,7 +39,8 @@ define(
                 model,
                 SPACE = "some space",
                 persistence,
-                happyPromise;
+                mockOpenMCT,
+                mockNewStyleDomainObject;
 
             function asPromise(value, doCatch) {
                 return (value || {}).then ? value : {
@@ -56,7 +56,6 @@ define(
             }
 
             beforeEach(function () {
-                happyPromise = asPromise(true);
                 model = { someKey: "some value", name: "domain object"};
 
                 mockPersistenceService = jasmine.createSpyObj(
@@ -94,12 +93,23 @@ define(
                     },
                     useCapability: jasmine.createSpy()
                 };
+
+                mockNewStyleDomainObject = Object.assign({}, model);
+                mockNewStyleDomainObject.identifier = {
+                    namespace: "",
+                    key: id
+                }
+
                 // Simulate mutation capability
                 mockDomainObject.useCapability.and.callFake(function (capability, mutator) {
                     if (capability === 'mutation') {
                         model = mutator(model) || model;
                     }
                 });
+
+                mockOpenMCT = {};
+                mockOpenMCT.objects = jasmine.createSpyObj('Object API', ['save']);
+
                 mockIdentifierService.parse.and.returnValue(mockIdentifier);
                 mockIdentifier.getSpace.and.returnValue(SPACE);
                 mockIdentifier.getKey.and.returnValue(key);
@@ -110,51 +120,28 @@ define(
                     mockIdentifierService,
                     mockNofificationService,
                     mockQ,
+                    mockOpenMCT,
                     mockDomainObject
                 );
             });
 
             describe("successful persistence", function () {
                 beforeEach(function () {
-                    mockPersistenceService.updateObject.and.returnValue(happyPromise);
-                    mockPersistenceService.createObject.and.returnValue(happyPromise);
+                    mockOpenMCT.objects.save.and.returnValue(Promise.resolve(true));
                 });
                 it("creates unpersisted objects with the persistence service", function () {
                     // Verify precondition; no call made during constructor
-                    expect(mockPersistenceService.createObject).not.toHaveBeenCalled();
+                    expect(mockOpenMCT.objects.save).not.toHaveBeenCalled();
 
                     persistence.persist();
 
-                    expect(mockPersistenceService.createObject).toHaveBeenCalledWith(
-                        SPACE,
-                        key,
-                        model
-                    );
-                });
-
-                it("updates previously persisted objects with the persistence service", function () {
-                    // Verify precondition; no call made during constructor
-                    expect(mockPersistenceService.updateObject).not.toHaveBeenCalled();
-
-                    model.persisted = 12321;
-                    persistence.persist();
-
-                    expect(mockPersistenceService.updateObject).toHaveBeenCalledWith(
-                        SPACE,
-                        key,
-                        model
-                    );
+                    expect(mockOpenMCT.objects.save).toHaveBeenCalledWith(mockNewStyleDomainObject);
                 });
 
                 it("reports which persistence space an object belongs to", function () {
                     expect(persistence.getSpace()).toEqual(SPACE);
                 });
 
-                it("updates persisted timestamp on persistence", function () {
-                    model.modified = 12321;
-                    persistence.persist();
-                    expect(model.persisted).toEqual(12321);
-                });
                 it("refreshes the domain object model from persistence", function () {
                     var refreshModel = {someOtherKey: "some other value"};
                     model.persisted = 1;
@@ -165,30 +152,37 @@ define(
 
                 it("does not trigger error notification on successful" +
                     " persistence", function () {
-                    persistence.persist();
-                    expect(mockQ.reject).not.toHaveBeenCalled();
-                    expect(mockNofificationService.error).not.toHaveBeenCalled();
+                    let rejected = false;
+                    return persistence.persist()
+                        .catch(() => rejected = true)
+                        .then(() => {
+                            expect(rejected).toBe(false);
+                            expect(mockNofificationService.error).not.toHaveBeenCalled();
+                        });
                 });
             });
 
             describe("unsuccessful persistence", function () {
-                var sadPromise = {
-                    then: function (callback) {
-                        return asPromise(callback(0), true);
-                    }
-                };
                 beforeEach(function () {
-                    mockPersistenceService.createObject.and.returnValue(sadPromise);
+                    mockOpenMCT.objects.save.and.returnValue(Promise.resolve(false));
                 });
                 it("rejects on falsey persistence result", function () {
-                    persistence.persist();
-                    expect(mockQ.reject).toHaveBeenCalled();
+                    let rejected = false;
+                    return persistence.persist()
+                        .catch(() => rejected = true)
+                        .then(() => {
+                            expect(rejected).toBe(true);
+                        });
                 });
 
                 it("notifies user on persistence failure", function () {
-                    persistence.persist();
-                    expect(mockQ.reject).toHaveBeenCalled();
-                    expect(mockNofificationService.error).toHaveBeenCalled();
+                    let rejected = false;
+                    return persistence.persist()
+                        .catch(() => rejected = true)
+                        .then(() => {
+                            expect(rejected).toBe(true);
+                            expect(mockNofificationService.error).toHaveBeenCalled();
+                        });
                 });
             });
         });

src/adapter/services/LegacyObjectAPIInterceptor.js

@@ -25,10 +25,11 @@ define([
 ], function (
     utils
 ) {
-    function ObjectServiceProvider(eventEmitter, objectService, instantiate, topic) {
+    function ObjectServiceProvider(eventEmitter, objectService, instantiate, topic, $injector) {
         this.eventEmitter = eventEmitter;
         this.objectService = objectService;
         this.instantiate = instantiate;
+        this.$injector = $injector;
 
         this.generalTopic = topic('mutation');
         this.bridgeEventBuses();
@@ -68,16 +69,53 @@ define([
         removeGeneralTopicListener = this.generalTopic.listen(handleLegacyMutation);
     };
 
-    ObjectServiceProvider.prototype.save = function (object) {
-        var key = object.key;
+    ObjectServiceProvider.prototype.create = async function (object) {
+        let model = utils.toOldFormat(object);
 
-        return object.getCapability('persistence')
-            .persist()
-            .then(function () {
-                return utils.toNewFormat(object, key);
-            });
+        return this.getPersistenceService().createObject(
+            this.getSpace(utils.makeKeyString(object.identifier)),
+            object.identifier.key,
+            model
+        );
+    }
+    ObjectServiceProvider.prototype.update = async function (object) {
+        let model = utils.toOldFormat(object);
+
+        return this.getPersistenceService().updateObject(
+            this.getSpace(utils.makeKeyString(object.identifier)),
+            object.identifier.key,
+            model
+        );
+    }
+
+    /**
+     * Get the space in which this domain object is persisted;
+     * this is useful when, for example, decided which space a
+     * newly-created domain object should be persisted to (by
+     * default, this should be the space of its containing
+     * object.)
+     *
+     * @returns {string} the name of the space which should
+     *          be used to persist this object
+     */
+    ObjectServiceProvider.prototype.getSpace = function (keystring) {
+        return this.getIdentifierService().parse(keystring).getSpace();
     };
 
+    ObjectServiceProvider.prototype.getIdentifierService = function () {
+        if (this.identifierService === undefined) {
+            this.identifierService = this.$injector.get('identifierService');
+        }
+        return this.identifierService;
+    };
+
+    ObjectServiceProvider.prototype.getPersistenceService = function () {
+        if (this.persistenceService === undefined) {
+            this.persistenceService = this.$injector.get('persistenceService');
+        }
+        return this.persistenceService;
+    }
+
     ObjectServiceProvider.prototype.delete = function (object) {
         // TODO!
     };
@@ -118,7 +156,8 @@ define([
                 eventEmitter,
                 objectService,
                 instantiate,
-                topic
+                topic,
+                openmct.$injector
             )
         );
 

src/api/objects/ObjectAPI.js

@@ -101,14 +101,25 @@ define([
      */
 
     /**
-     * Save this domain object in its current state.
+     * Create the given domain object in the corresponding persistence store
      *
-     * @method save
+     * @method create
      * @memberof module:openmct.ObjectProvider#
      * @param {module:openmct.DomainObject} domainObject the domain object to
-     *        save
+     *        create
      * @returns {Promise} a promise which will resolve when the domain object
-     *          has been saved, or be rejected if it cannot be saved
+     *          has been created, or be rejected if it cannot be saved
+     */
+
+    /**
+     * Update this domain object in its persistence store
+     *
+     * @method update
+     * @memberof module:openmct.ObjectProvider#
+     * @param {module:openmct.DomainObject} domainObject the domain object to
+     *        update
+     * @returns {Promise} a promise which will resolve when the domain object
+     *          has been updated, or be rejected if it cannot be saved
      */
 
     /**
@@ -161,8 +172,41 @@ define([
         throw new Error('Delete not implemented');
     };
 
-    ObjectAPI.prototype.save = function () {
-        throw new Error('Save not implemented');
+    ObjectAPI.prototype.isPersistable = function (domainObject) {
+        let provider = this.getProvider(domainObject.identifier);
+        return provider !== undefined &&
+            provider.create !== undefined &&
+            provider.update !== undefined;
+    }
+
+    /**
+     * Save this domain object in its current state. EXPERIMENTAL
+     *
+     * @private
+     * @memberof module:openmct.ObjectAPI#
+     * @param {module:openmct.DomainObject} domainObject the domain object to
+     *        save
+     * @returns {Promise} a promise which will resolve when the domain object
+     *          has been saved, or be rejected if it cannot be saved
+     */
+    ObjectAPI.prototype.save = function (domainObject) {
+        let provider = this.getProvider(domainObject.identifier);
+        let result;
+
+        if (!this.isPersistable(domainObject)) {
+            result = Promise.reject('Object provider does not support saving');
+        } else if (hasAlreadyBeenPersisted(domainObject)) {
+            result = Promise.resolve(true);
+        } else {
+            if (domainObject.persisted === undefined) {
+                this.mutate(domainObject, 'persisted', domainObject.modified);
+                result = provider.create(domainObject);
+            } else {
+                this.mutate(domainObject, 'persisted', domainObject.modified);
+                result = provider.update(domainObject);
+            }
+        }
+        return result;
     };
 
     /**
@@ -276,5 +320,9 @@ define([
      * @memberof module:openmct
      */
 
+    function hasAlreadyBeenPersisted(domainObject) {
+        return domainObject.persisted !== undefined &&
+            domainObject.persisted === domainObject.modified;
+    }
     return ObjectAPI;
 });

src/api/objects/ObjectAPISpec.js

@@ -0,0 +1,60 @@
+import ObjectAPI from './ObjectAPI.js';
+
+describe("The Object API", () => {
+    let objectAPI;
+    let mockDomainObject;
+    const TEST_NAMESPACE = "test-namespace";
+    const FIFTEEN_MINUTES = 15 * 60 * 1000;
+
+    beforeEach(() => {
+        objectAPI = new ObjectAPI();
+        mockDomainObject = {
+            identifier: {
+                namespace: TEST_NAMESPACE,
+                key: "test-key"
+            },
+            name: "test object",
+            type: "test-type"
+        };
+    })
+    describe("The save function", () => {
+        it("Rejects if no provider available", () => {
+            let rejected = false;
+            return objectAPI.save(mockDomainObject)
+                .catch(() => rejected = true)
+                .then(() => expect(rejected).toBe(true));
+        });
+        describe("when a provider is available", () => {
+            let mockProvider;
+            beforeEach(() => {
+                mockProvider = jasmine.createSpyObj("mock provider", [
+                    "create",
+                    "update"
+                ]);
+                objectAPI.addProvider(TEST_NAMESPACE, mockProvider);
+            })
+            it("Calls 'create' on provider if object is new", () => {
+                objectAPI.save(mockDomainObject);
+                expect(mockProvider.create).toHaveBeenCalled();
+                expect(mockProvider.update).not.toHaveBeenCalled();
+            });
+            it("Calls 'update' on provider if object is not new", () => {
+                mockDomainObject.persisted = Date.now() - FIFTEEN_MINUTES;
+                mockDomainObject.modified = Date.now();
+
+                objectAPI.save(mockDomainObject);
+                expect(mockProvider.create).not.toHaveBeenCalled();
+                expect(mockProvider.update).toHaveBeenCalled();
+            });
+
+            it("Does not persist if the object is unchanged", () => {
+                mockDomainObject.persisted =
+                    mockDomainObject.modified = Date.now();
+
+                objectAPI.save(mockDomainObject);
+                expect(mockProvider.create).not.toHaveBeenCalled();
+                expect(mockProvider.update).not.toHaveBeenCalled();
+            });
+        });
+    })
+});

src/api/telemetry/TelemetryAPI.js

@@ -334,8 +334,8 @@ define([
             });
             if (subscriber.callbacks.length === 0) {
                 subscriber.unsubscribe();
+                delete this.subscribeCache[keyString];
             }
-            delete this.subscribeCache[keyString];
         }.bind(this);
     };
 

src/api/telemetry/TelemetryAPISpec.js

@@ -156,6 +156,29 @@ define([
                 expect(callbacktwo).not.toHaveBeenCalledWith('anotherValue');
             });
 
+            it('only deletes subscription cache when there are no more subscribers', function () {
+                var unsubFunc = jasmine.createSpy('unsubscribe');
+                telemetryProvider.subscribe.and.returnValue(unsubFunc);
+                telemetryProvider.supportsSubscribe.and.returnValue(true);
+                telemetryAPI.addProvider(telemetryProvider);
+
+                var callback = jasmine.createSpy('callback');
+                var callbacktwo = jasmine.createSpy('callback two');
+                var callbackThree = jasmine.createSpy('callback three');
+                var unsubscribe = telemetryAPI.subscribe(domainObject, callback);
+                var unsubscribeTwo = telemetryAPI.subscribe(domainObject, callbacktwo);
+
+                expect(telemetryProvider.subscribe.calls.count()).toBe(1);
+                unsubscribe();
+                var unsubscribeThree = telemetryAPI.subscribe(domainObject, callbackThree);
+                // Regression test for where subscription cache was deleted on each unsubscribe, resulting in
+                // superfluous additional subscriptions. If the subscription cache is being deleted on each unsubscribe,
+                // then a subsequent subscribe will result in a new subscription at the provider.
+                expect(telemetryProvider.subscribe.calls.count()).toBe(1);
+                unsubscribeTwo();
+                unsubscribeThree();
+            });
+
             it('does subscribe/unsubscribe', function () {
                 var unsubFunc = jasmine.createSpy('unsubscribe');
                 telemetryProvider.subscribe.and.returnValue(unsubFunc);

src/plugins/clearData/plugin.js

@@ -29,24 +29,28 @@ define([
     ClearDataAction,
     Vue
 ) {
-    return function plugin(appliesToObjects) {
+    return function plugin(appliesToObjects, options = {indicator: true}) {
+        let installIndicator = options.indicator;
+
         appliesToObjects = appliesToObjects || [];
 
         return function install(openmct) {
-            let component = new Vue ({
-                    provide: {
-                        openmct
-                    },
-                    components: {
-                        GlobalClearIndicator: GlobaClearIndicator.default
-                    },
-                    template: '<GlobalClearIndicator></GlobalClearIndicator>'
-                }),
-                indicator = {
-                    element: component.$mount().$el
-                };
+            if (installIndicator) {
+                let component = new Vue ({
+                        provide: {
+                            openmct
+                        },
+                        components: {
+                            GlobalClearIndicator: GlobaClearIndicator.default
+                        },
+                        template: '<GlobalClearIndicator></GlobalClearIndicator>'
+                    }),
+                    indicator = {
+                        element: component.$mount().$el
+                    };
 
-            openmct.indicators.add(indicator);
+                openmct.indicators.add(indicator);
+            }
 
             openmct.contextMenu.registerAction(new ClearDataAction.default(openmct, appliesToObjects));
         };

src/plugins/condition/ConditionManager.js

@@ -103,6 +103,8 @@ export default class ConditionManager extends EventEmitter {
                         criterion.operation = '';
                         conditionChanged = true;
                     }
+                } else {
+                    conditionChanged = true;
                 }
             });
             if (conditionChanged) {

src/plugins/condition/StyleRuleManager.js

@@ -46,6 +46,7 @@ export default class StyleRuleManager extends EventEmitter {
         if (this.isEditing) {
             if (this.stopProvidingTelemetry) {
                 this.stopProvidingTelemetry();
+                delete this.stopProvidingTelemetry;
             }
             if (this.conditionSetIdentifier) {
                 this.applySelectedConditionStyle();
@@ -66,6 +67,7 @@ export default class StyleRuleManager extends EventEmitter {
     subscribeToConditionSet() {
         if (this.stopProvidingTelemetry) {
             this.stopProvidingTelemetry();
+            delete this.stopProvidingTelemetry;
         }
         this.openmct.objects.get(this.conditionSetIdentifier).then((conditionSetDomainObject) => {
             this.openmct.telemetry.request(conditionSetDomainObject)
@@ -154,8 +156,8 @@ export default class StyleRuleManager extends EventEmitter {
         this.applyStaticStyle();
         if (this.stopProvidingTelemetry) {
             this.stopProvidingTelemetry();
+            delete this.stopProvidingTelemetry;
         }
-        delete this.stopProvidingTelemetry;
         this.conditionSetIdentifier = undefined;
     }
 

src/plugins/condition/components/inspector/ConditionalStylesView.vue

@@ -197,6 +197,7 @@ export default {
             }
             if (this.stopProvidingTelemetry) {
                 this.stopProvidingTelemetry();
+                delete this.stopProvidingTelemetry;
             }
         },
         initialize(conditionSetDomainObject) {
@@ -210,6 +211,7 @@ export default {
             if (this.isEditing) {
                 if (this.stopProvidingTelemetry) {
                     this.stopProvidingTelemetry();
+                    delete this.stopProvidingTelemetry;
                 }
             } else {
                 this.subscribeToConditionSet();
@@ -307,6 +309,7 @@ export default {
             this.persist(domainObjectStyles);
             if (this.stopProvidingTelemetry) {
                 this.stopProvidingTelemetry();
+                delete this.stopProvidingTelemetry;
             }
         },
         updateDomainObjectItemStyles(newItems) {
@@ -375,6 +378,7 @@ export default {
         subscribeToConditionSet() {
             if (this.stopProvidingTelemetry) {
                 this.stopProvidingTelemetry();
+                delete this.stopProvidingTelemetry;
             }
             if (this.conditionSetDomainObject) {
                 this.openmct.telemetry.request(this.conditionSetDomainObject)

src/plugins/condition/components/inspector/StylesView.vue

@@ -190,6 +190,7 @@ export default {
             if (this.isEditing) {
                 if (this.stopProvidingTelemetry) {
                     this.stopProvidingTelemetry();
+                    delete this.stopProvidingTelemetry;
                 }
             } else {
                 this.subscribeToConditionSet();
@@ -325,6 +326,7 @@ export default {
 
             if (this.stopProvidingTelemetry) {
                 this.stopProvidingTelemetry();
+                delete this.stopProvidingTelemetry;
             }
 
             if (this.unObserveObjects) {
@@ -337,6 +339,7 @@ export default {
         subscribeToConditionSet() {
             if (this.stopProvidingTelemetry) {
                 this.stopProvidingTelemetry();
+                delete this.stopProvidingTelemetry;
             }
             if (this.conditionSetDomainObject) {
                 this.openmct.telemetry.request(this.conditionSetDomainObject)
@@ -494,6 +497,7 @@ export default {
 
             if (this.stopProvidingTelemetry) {
                 this.stopProvidingTelemetry();
+                delete this.stopProvidingTelemetry;
             }
         },
         removeConditionalStyles(domainObjectStyles, itemId) {

src/plugins/displayLayout/components/DisplayLayout.vue

@@ -457,16 +457,44 @@ export default {
             this.objectViewMap = {};
             this.layoutItems.forEach(this.trackItem);
         },
-        addChild(child) {
-            let keyString = this.openmct.objects.makeKeyString(child.identifier);
-            if (this.isTelemetry(child)) {
-                if (!this.telemetryViewMap[keyString] && !this.objectViewMap[keyString]) {
-                    this.addItem('telemetry-view', child);
+        isItemAlreadyTracked(child) {
+            let found = false,
+                keyString = this.openmct.objects.makeKeyString(child.identifier);
+
+            this.layoutItems.forEach(item => {
+                if (item.identifier) {
+                    let itemKeyString = this.openmct.objects.makeKeyString(item.identifier);
+
+                    if (itemKeyString === keyString) {
+                        found = true;
+                        return;
+                    }
                 }
-            } else if (!this.objectViewMap[keyString]) {
-                this.addItem('subobject-view', child);
+            });
+
+            if (found) {
+                return true;
+            } else if (this.isTelemetry(child)) {
+                return this.telemetryViewMap[keyString] && this.objectViewMap[keyString];
+            } else {
+                return this.objectViewMap[keyString];
             }
         },
+        addChild(child) {
+            if (this.isItemAlreadyTracked(child)) {
+                return;
+            }
+
+            let type;
+
+            if (this.isTelemetry(child)) {
+                type = 'telemetry-view';
+            } else {
+                type = 'subobject-view';
+            }
+
+            this.addItem(type, child);
+        },
         removeChild(identifier) {
             let keyString = this.openmct.objects.makeKeyString(identifier);
 
@@ -559,14 +587,17 @@ export default {
             }
         },
         updateTelemetryFormat(item, format) {
-            let index = this.layoutItems.findIndex(item);
+            let index = this.layoutItems.findIndex((layoutItem) => {
+                return layoutItem.id === item.id;
+            });
+
             item.format = format;
             this.mutate(`configuration.items[${index}]`, item);
         },
         createNewDomainObject(domainObject, composition, viewType, nameExtension, model) {
             let identifier = {
                     key: uuid(),
-                    namespace: domainObject.identifier.namespace
+                    namespace: this.internalDomainObject.identifier.namespace
                 },
                 type = this.openmct.types.get(viewType),
                 parentKeyString = this.openmct.objects.makeKeyString(this.internalDomainObject.identifier),

src/plugins/displayLayout/components/TelemetryView.vue

@@ -31,10 +31,16 @@
     <div
         v-if="domainObject"
         class="c-telemetry-view"
-        :class="styleClass"
+        :class="{
+            styleClass,
+            'is-missing': domainObject.status === 'missing'
+        }"
         :style="styleObject"
         @contextmenu.prevent="showContextMenu"
     >
+        <div class="is-missing__indicator"
+             title="This item is missing"
+        ></div>
         <div
             v-if="showLabel"
             class="c-telemetry-view__label"

src/plugins/displayLayout/components/telemetry-view.scss

@@ -26,4 +26,15 @@
         @include abs();
         border: 1px solid transparent;
     }
+
+    @include isMissing($absPos: true);
+
+    .is-missing__indicator {
+        top: 0;
+        left: 0;
+    }
+
+    &.is-missing {
+        border: $borderMissing;
+    }
 }

src/plugins/folderView/components/GridItem.vue

@@ -1,13 +1,18 @@
 <template>
 <a
     class="l-grid-view__item c-grid-item"
-    :class="{ 'is-alias': item.isAlias === true }"
+    :class="{
+        'is-alias': item.isAlias === true,
+        'is-missing': item.model.status === 'missing',
+        'c-grid-item--unknown': item.type.cssClass === undefined || item.type.cssClass.indexOf('unknown') !== -1
+    }"
     :href="objectLink"
 >
     <div
         class="c-grid-item__type-icon"
         :class="(item.type.cssClass != undefined) ? 'bg-' + item.type.cssClass : 'bg-icon-object-unknown'"
-    ></div>
+    >
+    </div>
     <div class="c-grid-item__details">
         <!-- Name and metadata -->
         <div
@@ -22,6 +27,9 @@
         </div>
     </div>
     <div class="c-grid-item__controls">
+        <div class="is-missing__indicator"
+             title="This item is missing"
+        ></div>
         <div
             class="icon-people"
             title="Shared"

src/plugins/folderView/components/ListItem.vue

@@ -7,13 +7,19 @@
     <td class="c-list-item__name">
         <a
             ref="objectLink"
+            class="c-object-label"
+            :class="{ 'is-missing': item.model.status === 'missing' }"
             :href="objectLink"
         >
             <div
-                class="c-list-item__type-icon"
+                class="c-object-label__type-icon c-list-item__type-icon"
                 :class="item.type.cssClass"
-            ></div>
-            <div class="c-list-item__name-value">{{ item.model.name }}</div>
+            >
+                <span class="is-missing__indicator"
+                      title="This item is missing"
+                ></span>
+            </div>
+            <div class="c-object-label__name c-list-item__name">{{ item.model.name }}</div>
         </a>
     </td>
     <td class="c-list-item__type">

src/plugins/folderView/components/grid-view.scss

@@ -38,7 +38,15 @@
         // Object is an alias to an original.
         [class*='__type-icon'] {
             @include isAlias();
-            color: $colorIconAliasForKeyFilter;
+        }
+    }
+
+    &.is-missing {
+        @include isMissing();
+
+        [class*='__type-icon'],
+        [class*='__details'] {
+            opacity: $opacityMissing;
         }
     }
 
@@ -85,15 +93,14 @@
     body.desktop & {
         $transOutMs: 300ms;
         flex-flow: column nowrap;
-        transition: background $transOutMs ease-in-out;
+        transition: $transOutMs ease-in-out;
 
         &:hover {
-            background: $colorItemBgHov;
+            filter: $filterItemHoverFg;
             transition: $transIn;
 
             .c-grid-item__type-icon {
-                filter: $colorKeyFilterHov;
-                transform: scale(1);
+                transform: scale(1.1);
                 transition: $transInBounce;
             }
         }
@@ -103,7 +110,7 @@
         }
 
         &__controls {
-            align-items: start;
+            align-items: baseline;
             flex: 0 0 auto;
             order: 1;
             .c-info-button,
@@ -115,7 +122,6 @@
             font-size: floor($gridItemDesk / 3);
             margin: $interiorMargin 22.5% $interiorMargin * 3 22.5%;
             order: 2;
-            transform: scale(0.9);
             transform-origin: center;
             transition: all $transOutMs ease-in-out;
         }

src/plugins/folderView/components/list-item.scss

@@ -1,37 +1,17 @@
 /******************************* LIST ITEM */
 .c-list-item {
-    &__name a {
-        display: flex;
-
-        > * + * { margin-left: $interiorMarginSm; }
-    }
-
     &__type-icon {
-        // Have to do it this way instead of using icon-* class, due to need to apply alias to the icon
-        color: $colorKey;
-        display: inline-block;
-        width: 1em;
-        margin-right:$interiorMarginSm;
+        color: $colorItemTreeIcon;
     }
 
-    &__name-value {
+    &__name {
         @include ellipsize();
     }
 
     &.is-alias {
         // Object is an alias to an original.
         [class*='__type-icon'] {
-            &:after {
-                color: $colorIconAlias;
-                content: $glyph-icon-link;
-                font-family: symbolsfont;
-                display: block;
-                position: absolute;
-                text-shadow: rgba(black, 0.5) 0 1px 2px;
-                top: auto; left: -1px; bottom: 1px; right: auto;
-                transform-origin: bottom left;
-                transform: scale(0.65);
-            }
+            @include isAlias();
         }
     }
 }

src/plugins/folderView/components/list-view.scss

@@ -13,7 +13,8 @@
             cursor: pointer;
 
             &:hover {
-                background: $colorListItemBgHov;
+                background: $colorItemTreeHoverBg;
+                filter: $filterHov;
                 transition: $transIn;
             }
         }

src/plugins/newFolderAction/newFolderAction.js

@@ -24,14 +24,14 @@ import uuid from 'uuid';
 
 export default class NewFolderAction {
     constructor(openmct) {
-        this.name = 'New Folder';
+        this.name = 'Add New Folder';
         this.key = 'newFolder';
         this.description = 'Create a new folder';
-        this.cssClass = 'icon-folder';
+        this.cssClass = 'icon-folder-new';
 
         this._openmct = openmct;
         this._dialogForm = {
-            name: "New Folder Name",
+            name: "Add New Folder",
             sections: [
                 {
                     rows: [
@@ -39,7 +39,9 @@ export default class NewFolderAction {
                             key: "name",
                             control: "textfield",
                             name: "Folder Name",
-                            required: false
+                            pattern: "\\S+",
+                            required: true,
+                            cssClass: "l-input-lg"
                         }
                     ]
                 }
@@ -53,7 +55,7 @@ export default class NewFolderAction {
             dialogService = this._openmct.$injector.get('dialogService'),
             folderType = this._openmct.types.get('folder');
 
-        dialogService.getUserInput(this._dialogForm, {}).then((userInput) => {
+        dialogService.getUserInput(this._dialogForm, {name: 'Unnamed Folder'}).then((userInput) => {
             let name = userInput.name,
                 identifier = {
                     key: uuid(),

src/plugins/notebook/components/notebook-snapshot-container.vue

@@ -2,13 +2,16 @@
 <div class="c-snapshots-h">
     <div class="l-browse-bar">
         <div class="l-browse-bar__start">
-            <div class="l-browse-bar__object-name--w icon-notebook">
-                <div class="l-browse-bar__object-name">
-                    Notebook Snapshots
-                    <span v-if="snapshots.length"
-                          class="l-browse-bar__object-details"
-                    >&nbsp;{{ snapshots.length }} of {{ getNotebookSnapshotMaxCount() }}
-                    </span>
+            <div class="l-browse-bar__object-name--w">
+                <div class="l-browse-bar__object-name c-object-label">
+                    <div class="c-object-label__type-icon icon-notebook"></div>
+                    <div class="c-object-label__name">
+                        Notebook Snapshots
+                        <span v-if="snapshots.length"
+                              class="l-browse-bar__object-details"
+                        >&nbsp;{{ snapshots.length }} of {{ getNotebookSnapshotMaxCount() }}
+                        </span>
+                    </div>
                 </div>
                 <PopupMenu v-if="snapshots.length > 0"
                            :popup-menu-items="popupMenuItems"

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

@@ -28,17 +28,22 @@
             ng-click="legend.set('expanded', !legend.get('expanded'));">
         </div>
 
-        <div class="c-plot-legend__wrapper">
+        <div class="c-plot-legend__wrapper"
+            ng-class="{ 'is-cursor-locked':  !!lockHighlightPoint }">
 
             <!-- COLLAPSED PLOT LEGEND -->
             <div class="plot-wrapper-collapsed-legend"
-                 ng-class="{'icon-cursor-lock': !!lockHighlightPoint}">
+                 ng-class="{'is-cursor-locked': !!lockHighlightPoint }">
+                <div class="c-state-indicator__alert-cursor-lock icon-cursor-lock" title="Cursor is point locked. Click anywhere in the plot to unlock."></div>
                 <div class="plot-legend-item"
-                      ng-repeat="series in series track by $index">
+                     ng-class="{'is-missing': series.domainObject.status === 'missing'}"
+                     ng-repeat="series in series track by $index"
+                >
                     <div class="plot-series-swatch-and-name">
-                        <span class="plot-series-color-swatch"
+                        <span class="plot-series-color-swatch "
                               ng-style="{ 'background-color': series.get('color').asHexString() }">
                         </span>
+                        <span class="is-missing__indicator" title="This item is missing"></span>
                         <span class="plot-series-name">{{ series.get('name') }}</span>
                     </div>
                     <div class="plot-series-value hover-value-enabled value-to-display-{{ legend.get('valueToShowWhenCollapsed') }} {{ series.closest.mctLimitState.cssClass }}"
@@ -55,7 +60,10 @@
             </div>
 
             <!-- EXPANDED PLOT LEGEND -->
-            <div class="plot-wrapper-expanded-legend">
+            <div class="plot-wrapper-expanded-legend"
+                 ng-class="{'is-cursor-locked': !!lockHighlightPoint }"
+            >
+                <div class="c-state-indicator__alert-cursor-lock--verbose icon-cursor-lock" title="Click anywhere in the plot to unlock."> Cursor locked to point</div>
                 <table>
                     <thead>
                         <tr>
@@ -76,12 +84,15 @@
                             </th>
                         </tr>
                     </thead>
-                    <tr ng-repeat="series in series" class="plot-legend-item">
-                        <td class="plot-series-swatch-and-name"
-                            ng-class="{'icon-cursor-lock': !!lockHighlightPoint}">
+                    <tr ng-repeat="series in series"
+                        class="plot-legend-item"
+                        ng-class="{'is-missing': series.domainObject.status === 'missing'}"
+                    >
+                        <td class="plot-series-swatch-and-name">
                             <span class="plot-series-color-swatch"
                                   ng-style="{ 'background-color': series.get('color').asHexString() }">
                             </span>
+                            <span class="is-missing__indicator" title="This item is missing"></span>
                             <span class="plot-series-name">{{ series.get('name') }}</span>
                         </td>
 
@@ -134,7 +145,7 @@
                     {{option.name}}
                 </option>
             </select>
-            
+
 
             <mct-ticks axis="yAxis">
                 <div ng-repeat="tick in ticks track by tick.value"

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

@@ -44,7 +44,7 @@
                 </li>
                 <li class="grid-row">
                     <div class="grid-cell label"
-                         title="The line rendering style for this series.">Line Style</div>
+                         title="The rendering method to join lines for this series.">Line Method</div>
                     <div class="grid-cell value">{{ {
                         'none': 'None',
                         'linear': 'Linear interpolation',
@@ -56,7 +56,7 @@
                     <div class="grid-cell label"
                          title="Whether markers are displayed, and their size.">Markers</div>
                     <div class="grid-cell value">
-                        {{series.get('markers') ? "Enabled: " + series.get('markerSize') + "px" : "Disabled"}}
+                        {{ series.markerOptionsDisplayText() }}
                     </div>
                 </li>
                 <li class="grid-row">

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

@@ -52,7 +52,7 @@
                 </li>
                 <li class="grid-row">
                     <div class="grid-cell label"
-                         title="The line rendering style for this series.">Line Style</div>
+                         title="The rendering method to join lines for this series.">Line Method</div>
                     <div class="grid-cell value">
                         <select ng-model="form.interpolate">
                             <option value="none">None</option>
@@ -64,12 +64,27 @@
                 <li class="grid-row">
                     <div class="grid-cell label"
                          title="Whether markers are displayed.">Markers</div>
-                    <div class="grid-cell value"><input type="checkbox" ng-model="form.markers"/></div>
+                    <div class="grid-cell value">
+                        <input type="checkbox" ng-model="form.markers"/>
+                        <select
+                            ng-show="form.markers"
+                            ng-model="form.markerShape">
+                            <option
+                                ng-repeat="option in markerShapeOptions"
+                                value="{{ option.value }}"
+                                ng-selected="option.value == form.markerShape"
+                            >
+                                {{ option.name }}
+                            </option>
+                        </select>
+                    </div>
                 </li>
                 <li class="grid-row">
                     <div class="grid-cell label"
                          title="Display markers visually denoting points in alarm.">Alarm Markers</div>
-                    <div class="grid-cell value"><input type="checkbox" ng-model="form.alarmMarkers"/></div>
+                    <div class="grid-cell value">
+                        <input type="checkbox" ng-model="form.alarmMarkers"/>
+                    </div>
                 </li>
                 <li class="grid-row" ng-show="form.markers || form.alarmMarkers">
                     <div class="grid-cell label"

src/plugins/plot/src/chart/MCTChartController.js

@@ -371,7 +371,8 @@ function (
             chartElement.getBuffer(),
             chartElement.color().asRGBAArray(),
             chartElement.count,
-            chartElement.series.get('markerSize')
+            chartElement.series.get('markerSize'),
+            chartElement.series.get('markerShape')
         );
     };
 
@@ -395,9 +396,10 @@ function (
                 this.offset.yVal(highlight.point, highlight.series)
             ]),
             color = highlight.series.get('color').asRGBAArray(),
-            pointCount = 1;
+            pointCount = 1,
+            shape = highlight.series.get('markerShape');
 
-        this.drawAPI.drawPoints(points, color, pointCount, HIGHLIGHT_SIZE);
+        this.drawAPI.drawPoints(points, color, pointCount, HIGHLIGHT_SIZE, shape);
     };
 
     MCTChartController.prototype.drawRectangles = function () {

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

@@ -25,12 +25,14 @@ define([
     'lodash',
     '../configuration/Model',
     '../lib/extend',
-    'EventEmitter'
+    'EventEmitter',
+    '../draw/MarkerShapes'
 ], function (
     _,
     Model,
     extend,
-    EventEmitter
+    EventEmitter,
+    MARKER_SHAPES
 ) {
 
     /**
@@ -56,6 +58,7 @@ define([
      *                `linear` (points are connected via straight lines), or
      *                `stepAfter` (points are connected by steps).
      * `markers`: boolean, whether or not this series should render with markers.
+     * `markerShape`: string, shape of markers.
      * `markerSize`: number, size in pixels of markers for this series.
      * `alarmMarkers`: whether or not to display alarm markers for this series.
      * `stats`: An object that tracks the min and max y values observed in this
@@ -101,6 +104,7 @@ define([
                 xKey: options.collection.plot.xAxis.get('key'),
                 yKey: range.key,
                 markers: true,
+                markerShape: 'point',
                 markerSize: 2.0,
                 alarmMarkers: true
             };
@@ -165,6 +169,7 @@ define([
                 .telemetry
                 .request(this.domainObject, options)
                 .then(function (points) {
+                    console.log('PlotSeries: total points', points.length);
                     var newPoints = _(this.data)
                         .concat(points)
                         .sortBy(this.getXVal)
@@ -391,6 +396,7 @@ define([
                 }
             }
 
+            console.log('PlotSeries: this.data.length', this.data.length);
         },
         /**
          * Updates filters, clears the plot series, unsubscribes and resubscribes
@@ -410,6 +416,18 @@ define([
             } else {
                 this.filters = deepCopiedFilters;
             }
+        },
+        markerOptionsDisplayText: function () {
+            const showMarkers = this.get('markers');
+            if (!showMarkers) {
+                return "Disabled";
+            }
+
+            const markerShapeKey = this.get('markerShape');
+            const markerShape = MARKER_SHAPES[markerShapeKey].label;
+            const markerSize = this.get('markerSize');
+
+            return `${markerShape}: ${markerSize}px`;
         }
     });
 

src/plugins/plot/src/draw/Draw2D.js

@@ -23,10 +23,12 @@
 
 define([
     'EventEmitter',
-    '../lib/eventHelpers'
+    '../lib/eventHelpers',
+    './MarkerShapes'
 ], function (
     EventEmitter,
-    eventHelpers
+    eventHelpers,
+    MARKER_SHAPES
 ) {
 
     /**
@@ -121,18 +123,17 @@ define([
         buf,
         color,
         points,
-        pointSize
+        pointSize,
+        shape
     ) {
-        var i = 0,
-            offset = pointSize / 2;
+        const drawC2DShape = MARKER_SHAPES[shape].drawC2D.bind(this);
 
         this.setColor(color);
 
-        for (; i < points; i++) {
-            this.c2d.fillRect(
-                this.x(buf[i * 2]) - offset,
-                this.y(buf[i * 2 + 1]) - offset,
-                pointSize,
+        for (let i = 0; i < points; i++) {
+            drawC2DShape(
+                this.x(buf[i * 2]),
+                this.y(buf[i * 2 + 1]),
                 pointSize
             );
         }

src/plugins/plot/src/draw/DrawWebGL.js

@@ -23,30 +23,64 @@
 
 define([
     'EventEmitter',
-    '../lib/eventHelpers'
+    '../lib/eventHelpers',
+    './MarkerShapes'
 ], function (
     EventEmitter,
-    eventHelpers
+    eventHelpers,
+    MARKER_SHAPES
 ) {
 
     // WebGL shader sources (for drawing plain colors)
-    var FRAGMENT_SHADER = [
-            "precision mediump float;",
-            "uniform vec4 uColor;",
-            "void main(void) {",
-            "gl_FragColor = uColor;",
-            "}"
-        ].join('\n'),
-        VERTEX_SHADER = [
-            "attribute vec2 aVertexPosition;",
-            "uniform vec2 uDimensions;",
-            "uniform vec2 uOrigin;",
-            "uniform float uPointSize;",
-            "void main(void) {",
-            "gl_Position = vec4(2.0 * ((aVertexPosition - uOrigin) / uDimensions) - vec2(1,1), 0, 1);",
-            "gl_PointSize = uPointSize;",
-            "}"
-        ].join('\n');
+    const FRAGMENT_SHADER = `
+        precision mediump float;
+        uniform vec4 uColor;
+        uniform int uMarkerShape;
+        
+        void main(void) {
+            gl_FragColor = uColor;
+
+            if (uMarkerShape > 1) {
+                vec2 clipSpacePointCoord = 2.0 * gl_PointCoord - 1.0;
+
+                if (uMarkerShape == 2) { // circle
+                    float distance = length(clipSpacePointCoord);
+
+                    if (distance > 1.0) {
+                        discard;
+                    }
+                } else if (uMarkerShape == 3) { // diamond
+                    float distance = abs(clipSpacePointCoord.x) + abs(clipSpacePointCoord.y);
+
+                    if (distance > 1.0) {
+                        discard;
+                    }
+                } else if (uMarkerShape == 4) { // triangle
+                    float x = clipSpacePointCoord.x;
+                    float y = clipSpacePointCoord.y;
+                    float distance = 2.0 * x - 1.0;
+                    float distance2 = -2.0 * x - 1.0;
+
+                    if (distance > y || distance2 > y) {
+                        discard;
+                    }
+                }
+
+            }
+        }
+    `;
+
+    const VERTEX_SHADER = `
+        attribute vec2 aVertexPosition;
+        uniform vec2 uDimensions;
+        uniform vec2 uOrigin;
+        uniform float uPointSize;
+        
+        void main(void) {
+            gl_Position = vec4(2.0 * ((aVertexPosition - uOrigin) / uDimensions) - vec2(1,1), 0, 1);
+            gl_PointSize = uPointSize;
+        }
+    `;
 
     /**
      * Create a draw api utilizing WebGL.
@@ -90,6 +124,7 @@ define([
         this.vertexShader = this.gl.createShader(this.gl.VERTEX_SHADER);
         this.gl.shaderSource(this.vertexShader, VERTEX_SHADER);
         this.gl.compileShader(this.vertexShader);
+
         this.fragmentShader = this.gl.createShader(this.gl.FRAGMENT_SHADER);
         this.gl.shaderSource(this.fragmentShader, FRAGMENT_SHADER);
         this.gl.compileShader(this.fragmentShader);
@@ -105,6 +140,7 @@ define([
         // shader programs (to pass values into shaders at draw-time)
         this.aVertexPosition = this.gl.getAttribLocation(this.program, "aVertexPosition");
         this.uColor = this.gl.getUniformLocation(this.program, "uColor");
+        this.uMarkerShape = this.gl.getUniformLocation(this.program, "uMarkerShape");
         this.uDimensions = this.gl.getUniformLocation(this.program, "uDimensions");
         this.uOrigin = this.gl.getUniformLocation(this.program, "uOrigin");
         this.uPointSize = this.gl.getUniformLocation(this.program, "uPointSize");
@@ -114,9 +150,6 @@ define([
         // Create a buffer to holds points which will be drawn
         this.buffer = this.gl.createBuffer();
 
-        // Use a line width of 2.0 for legibility
-        this.gl.lineWidth(2.0);
-
         // Enable blending, for smoothness
         this.gl.enable(this.gl.BLEND);
         this.gl.blendFunc(this.gl.SRC_ALPHA, this.gl.ONE_MINUS_SRC_ALPHA);
@@ -138,14 +171,18 @@ define([
             ((v - this.origin[1]) / this.dimensions[1]) * this.height;
     };
 
-    DrawWebGL.prototype.doDraw = function (drawType, buf, color, points) {
+    DrawWebGL.prototype.doDraw = function (drawType, buf, color, points, shape) {
         if (this.isContextLost) {
             return;
         }
+
+        const shapeCode = MARKER_SHAPES[shape] ? MARKER_SHAPES[shape].drawWebGL : 0;
+
         this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.buffer);
         this.gl.bufferData(this.gl.ARRAY_BUFFER, buf, this.gl.DYNAMIC_DRAW);
         this.gl.vertexAttribPointer(this.aVertexPosition, 2, this.gl.FLOAT, false, 0, 0);
         this.gl.uniform4fv(this.uColor, color);
+        this.gl.uniform1i(this.uMarkerShape, shapeCode)
         this.gl.drawArrays(drawType, 0, points);
     };
 
@@ -210,12 +247,12 @@ define([
      * Draw the buffer as points.
      *
      */
-    DrawWebGL.prototype.drawPoints = function (buf, color, points, pointSize) {
+    DrawWebGL.prototype.drawPoints = function (buf, color, points, pointSize, shape) {
         if (this.isContextLost) {
             return;
         }
         this.gl.uniform1f(this.uPointSize, pointSize);
-        this.doDraw(this.gl.POINTS, buf, color, points);
+        this.doDraw(this.gl.POINTS, buf, color, points, shape);
     };
 
     /**

src/plugins/plot/src/draw/MarkerShapes.js

@@ -0,0 +1,90 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2020, 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 () {
+    /**
+     * @label string (required) display name of shape
+     * @drawWebGL integer (unique, required) index provided to WebGL Fragment Shader
+     * @drawC2D function (required) canvas2d draw function
+     */
+    const MARKER_SHAPES = {
+        point: {
+            label: 'Point',
+            drawWebGL: 1,
+            drawC2D: function (x, y, size) {
+                const offset = size / 2;
+
+                this.c2d.fillRect(x - offset, y - offset, size, size);
+            }
+        },
+        circle: {
+            label: 'Circle',
+            drawWebGL: 2,
+            drawC2D: function (x, y, size) {
+                const radius = size / 2;
+
+                this.c2d.beginPath();
+                this.c2d.arc(x, y, radius, 0, 2 * Math.PI, false);
+                this.c2d.closePath();
+                this.c2d.fill();
+            }
+        },
+        diamond: {
+            label: 'Diamond',
+            drawWebGL: 3,
+            drawC2D: function (x, y, size) {
+                const offset = size / 2;
+                const top = [x, y + offset];
+                const right = [x + offset, y];
+                const bottom = [x, y - offset];
+                const left = [x - offset, y];
+
+                this.c2d.beginPath();
+                this.c2d.moveTo(...top);
+                this.c2d.lineTo(...right);
+                this.c2d.lineTo(...bottom);
+                this.c2d.lineTo(...left);
+                this.c2d.closePath();
+                this.c2d.fill();
+            }
+        },
+        triangle: {
+            label: 'Triangle',
+            drawWebGL: 4,
+            drawC2D: function (x, y, size) {
+                const offset = size / 2;
+                const v1 = [x, y - offset];
+                const v2 = [x - offset, y + offset];
+                const v3 = [x + offset, y + offset];
+
+                this.c2d.beginPath();
+                this.c2d.moveTo(...v1);
+                this.c2d.lineTo(...v2);
+                this.c2d.lineTo(...v3);
+                this.c2d.closePath();
+                this.c2d.fill();
+            }
+        }
+    };
+
+    return MARKER_SHAPES;
+});

src/plugins/plot/src/inspector/PlotSeriesFormController.js

@@ -22,9 +22,11 @@
 
 define([
     './PlotModelFormController',
+    '../draw/MarkerShapes',
     'lodash'
 ], function (
     PlotModelFormController,
+    MARKER_SHAPES,
     _
 ) {
 
@@ -93,6 +95,13 @@ define([
                         value: o.key
                     };
                 });
+            this.$scope.markerShapeOptions = Object.entries(MARKER_SHAPES)
+                .map(([key, obj]) => {
+                    return {
+                        name: obj.label,
+                        value: key
+                    };
+                });
         },
 
         fields: [
@@ -108,6 +117,10 @@ define([
                 modelProp: 'markers',
                 objectPath: dynamicPathForKey('markers')
             },
+            {
+                modelProp: 'markerShape',
+                objectPath: dynamicPathForKey('markerShape')
+            },
             {
                 modelProp: 'markerSize',
                 coerce: Number,

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

@@ -71,8 +71,6 @@ define([
         this.listenTo(this.$canvas, 'mouseleave', this.untrackMousePosition, this);
         this.listenTo(this.$canvas, 'mousedown', this.onMouseDown, this);
         this.listenTo(this.$canvas, 'wheel', this.wheelZoom, this);
-
-        this.watchForMarquee();
     };
 
     MCTPlotController.prototype.initialize = function () {
@@ -83,11 +81,6 @@ define([
         this.listenTo(this.$canvas, 'mousedown', this.onMouseDown, this);
         this.listenTo(this.$canvas, 'wheel', this.wheelZoom, this);
 
-        this.watchForMarquee();
-
-        this.listenTo(this.$window, 'keydown', this.toggleInteractionMode, this);
-        this.listenTo(this.$window, 'keyup', this.resetInteractionMode, this);
-
         this.$scope.rectangles = [];
         this.$scope.tickWidth = 0;
 
@@ -243,12 +236,16 @@ define([
     };
 
     MCTPlotController.prototype.onMouseDown = function ($event) {
+        // do not monitor drag events on browser context click
+        if (event.ctrlKey) {
+            return;
+        }
+
         this.listenTo(this.$window, 'mouseup', this.onMouseUp, this);
         this.listenTo(this.$window, 'mousemove', this.trackMousePosition, this);
-        if (this.allowPan) {
+        if (event.altKey) {
             return this.startPan($event);
-        }
-        if (this.allowMarquee) {
+        } else {
             return this.startMarquee($event);
         }
     };
@@ -261,11 +258,11 @@ define([
             this.$scope.lockHighlightPoint = !this.$scope.lockHighlightPoint;
         }
 
-        if (this.allowPan) {
+        if (this.pan) {
             return this.endPan($event);
         }
 
-        if (this.allowMarquee) {
+        if (this.marquee) {
             return this.endMarquee($event);
         }
     };
@@ -289,6 +286,9 @@ define([
     };
 
     MCTPlotController.prototype.startMarquee = function ($event) {
+        this.$canvas.removeClass('plot-drag');
+        this.$canvas.addClass('plot-marquee');
+
         this.trackMousePosition($event);
         if (this.positionOverPlot) {
             this.freeze();
@@ -444,6 +444,9 @@ define([
     };
 
     MCTPlotController.prototype.startPan = function ($event) {
+        this.$canvas.addClass('plot-drag');
+        this.$canvas.removeClass('plot-marquee');
+
         this.trackMousePosition($event);
         this.freeze();
         this.pan = {
@@ -486,32 +489,6 @@ define([
         this.$scope.$emit('user:viewport:change:end');
     };
 
-    MCTPlotController.prototype.watchForMarquee = function () {
-        this.$canvas.removeClass('plot-drag');
-        this.$canvas.addClass('plot-marquee');
-        this.allowPan = false;
-        this.allowMarquee = true;
-    };
-
-    MCTPlotController.prototype.watchForPan = function () {
-        this.$canvas.addClass('plot-drag');
-        this.$canvas.removeClass('plot-marquee');
-        this.allowPan = true;
-        this.allowMarquee = false;
-    };
-
-    MCTPlotController.prototype.toggleInteractionMode = function (event) {
-        if (event.keyCode === 18) { // control key.
-            this.watchForPan();
-        }
-    };
-
-    MCTPlotController.prototype.resetInteractionMode = function (event) {
-        if (event.keyCode === 18) {
-            this.watchForMarquee();
-        }
-    };
-
     MCTPlotController.prototype.freeze = function () {
         this.config.yAxis.set('frozen', true);
         this.config.xAxis.set('frozen', true);

src/plugins/plotlyPlot/components/PlotlyViewLayout.vue

@@ -1,20 +1,22 @@
 <template>
 <div :id="plotId"
-     class="l-view-section">
+     class="l-view-section"
+>
 </div>
 </template>
 
 <script>
-// import Plotly from 'plotly.js-gl2d-dist-min';
-import Plotly from 'plotly.js-basic-dist-min';
+import Plotly from 'plotly.js-dist';
 import BoundedTableRowCollection from '../../telemetryTable/collections/BoundedTableRowCollection';
 import TelemetryTableRow from '../../telemetryTable/TelemetryTableRow';
 import TelemetryTableColumn from '../../telemetryTable/TelemetryTableColumn';
+import { throttle } from 'lodash';
 
 export default {
     inject: ['openmct', 'domainObject'],
     data: function () {
         return {
+            data: [],
             bounds: this.openmct.time.bounds(),
             plotData: {},
             outstandingRequests: 0,
@@ -49,8 +51,9 @@ export default {
         this.subscriptions = {};
         this.boundedRowsUnlisteners = {};
         this.traceIndices = {};
-    },
 
+        this.purgeDataOutsideRange = throttle(this.purgeDataOutsideRange, 5000);
+    },
     destroyed() {
         Object.values(this.subscriptions)
             .forEach(subscription => subscription());
@@ -116,6 +119,7 @@ export default {
                     const keyString = this.openmct.objects.makeKeyString(telemetryObject.identifier);
                     let columnMap = this.columnMaps[keyString];
                     let limitEvaluator = this.limitEvaluators[keyString];
+                    console.log('Plotly: total points', telemetryData.length);
                     const telemetryRows = telemetryData.map(datum => new TelemetryTableRow(datum, columnMap, keyString, limitEvaluator));
                     this.boundedRows[keyString].add(telemetryRows);
                 });
@@ -189,7 +193,7 @@ export default {
             };
             Plotly.newPlot(
                 this.plotElement,
-                [],
+                this.data,
                 layout,
                 {
                     displayModeBar: true, // turns off hover-activated toolbar
@@ -198,6 +202,53 @@ export default {
             );
 
         },
+        purgeDataOutsideRange() {
+            const bounds = this.openmct.time.bounds();
+            const pointsPerData = [];
+            this.data.forEach((data, index) => {
+                const startIndex = this.getStartIndex(data, bounds.start);
+                const endIndex = this.getEndIndex(data, bounds.end);
+                data.x = data.x.slice(startIndex, endIndex);
+                data.y = data.y.slice(startIndex, endIndex);
+                this.$set(this.data, index, data);
+            });
+
+            console.log('Plotly: this.data.length', this.data[0].x.length);
+        },
+        getEndIndex(data, time) {
+            let endIndex = data.x.length - 1;
+            let success = false;
+            let index = endIndex;
+            while(!success && index >= 0) {
+                if (index === 0) {
+                    success = true;
+                    endIndex = 0;
+                    break;
+                }
+
+                success = data.x[index] <= time;
+                if (success) {
+                    endIndex = index;
+                }
+
+                index--;
+            }
+
+            return endIndex;
+        },
+        getStartIndex(data, time) {
+            let startIndex = 0;
+            data.x.some((x, index) => {
+                const success = x >= time;
+                if (success) {
+                    startIndex = index;
+                }
+
+                return success;
+            });
+
+            return Math.max(0, startIndex - 3);
+        },
         resetTraceForObject(telemetryObject) {
             this.removeTraceForObject(telemetryObject);
             this.addTraceForObject(telemetryObject);
@@ -299,13 +350,15 @@ export default {
                         drawBuffer.x = [];
                         drawBuffer.y = [];
                     });
+
+                    this.purgeDataOutsideRange();
                     Plotly.extendTraces(
                         this.plotElement,
                         {
                             x: dataForXAxes,
                             y: dataForYAxes
                         },
-                        traceIndices
+                        traceIndices,
                     );
 
                     this.drawing = false;

src/plugins/tabs/README.md

@@ -1,7 +0,0 @@
-# Espresso Theme
-A light colored theme for the Open MCT user interface.
-
-## Installation
-```js
-openmct.install(openmct.plugins.Snow());
-```

src/plugins/tabs/components/tabs.vue

@@ -3,7 +3,7 @@
     <div
         class="c-tabs-view__tabs-holder c-tabs"
         :class="{
-            'is-dragging': isDragging,
+            'is-dragging': isDragging && allowEditing,
             'is-mouse-over': allowDrop
         }"
     >
@@ -22,14 +22,24 @@
         <button
             v-for="(tab,index) in tabsList"
             :key="index"
-            class="c-tabs-view__tab c-tab"
-            :class="[
-                {'is-current': isCurrent(tab)},
-                tab.type.definition.cssClass
-            ]"
+            class="c-tab c-tabs-view__tab"
+            :class="{
+                'is-current': isCurrent(tab)
+            }"
             @click="showTab(tab, index)"
         >
-            <span class="c-button__label">{{ tab.domainObject.name }}</span>
+            <div class="c-object-label"
+                 :class="{'is-missing': tab.domainObject.status === 'missing'}"
+            >
+                <div class="c-object-label__type-icon"
+                     :class="tab.type.definition.cssClass"
+                >
+                    <span class="is-missing__indicator"
+                          title="This item is missing"
+                    ></span>
+                </div>
+                <span class="c-button__label c-object-label__name">{{ tab.domainObject.name }}</span>
+            </div>
         </button>
     </div>
     <div
@@ -38,15 +48,6 @@
         class="c-tabs-view__object-holder"
         :class="{'c-tabs-view__object-holder--hidden': !isCurrent(tab)}"
     >
-        <div
-            v-if="currentTab"
-            class="c-tabs-view__object-name c-object-label l-browse-bar__object-name--w"
-            :class="currentTab.type.definition.cssClass"
-        >
-            <div class="l-browse-bar__object-name c-object-label__name">
-                {{ currentTab.domainObject.name }}
-            </div>
-        </div>
         <object-view
             v-if="internalDomainObject.keep_alive ? currentTab : isCurrent(tab)"
             class="c-tabs-view__object"
@@ -58,6 +59,12 @@
 
 <script>
 import ObjectView from '../../../ui/components/ObjectView.vue';
+import {
+    getSearchParam,
+    setSearchParam,
+    deleteSearchParam
+} from 'utils/openmctLocation';
+
 
 var unknownObjectType = {
     definition: {
@@ -71,26 +78,45 @@ export default {
     components: {
         ObjectView
     },
+    props: {
+        isEditing: {
+            type: Boolean,
+            required: true
+        }
+    },
     data: function () {
+        let keyString = this.openmct.objects.makeKeyString(this.domainObject.identifier);
+
         return {
             internalDomainObject: this.domainObject,
             currentTab: {},
+            currentTabIndex: undefined,
             tabsList: [],
             setCurrentTab: true,
             isDragging: false,
-            allowDrop: false
+            allowDrop: false,
+            searchTabKey: `tabs.pos.${keyString}`
         };
     },
+    computed: {
+        allowEditing() {
+            return !this.internalDomainObject.locked && this.isEditing;
+        }
+    },
     mounted() {
         if (this.composition) {
             this.composition.on('add', this.addItem);
             this.composition.on('remove', this.removeItem);
             this.composition.on('reorder', this.onReorder);
             this.composition.load().then(() => {
-                let currentTabIndex = this.domainObject.currentTabIndex;
+                let currentTabIndexFromURL = getSearchParam(this.searchTabKey);
+                let currentTabIndexFromDomainObject = this.internalDomainObject.currentTabIndex;
 
-                if (currentTabIndex !== undefined && this.tabsList.length > currentTabIndex) {
-                    this.currentTab = this.tabsList[currentTabIndex];
+                if (currentTabIndexFromURL !== null) {
+                    this.setCurrentTabByIndex(currentTabIndexFromURL);
+                } else if (currentTabIndexFromDomainObject !== undefined) {
+                    this.setCurrentTabByIndex(currentTabIndexFromDomainObject);
+                    this.storeCurrentTabIndexInURL(currentTabIndexFromDomainObject);
                 }
             });
         }
@@ -100,20 +126,29 @@ export default {
         document.addEventListener('dragstart', this.dragstart);
         document.addEventListener('dragend', this.dragend);
     },
+    beforeDestroy() {
+        this.persistCurrentTabIndex(this.currentTabIndex);
+    },
     destroyed() {
         this.composition.off('add', this.addItem);
         this.composition.off('remove', this.removeItem);
         this.composition.off('reorder', this.onReorder);
 
         this.unsubscribe();
+        this.clearCurrentTabIndexFromURL();
 
         document.removeEventListener('dragstart', this.dragstart);
         document.removeEventListener('dragend', this.dragend);
     },
     methods:{
+        setCurrentTabByIndex(index) {
+            if (this.tabsList[index]) {
+                this.currentTab = this.tabsList[index];
+            }
+        },
         showTab(tab, index) {
             if (index !== undefined) {
-                this.storeCurrentTabIndex(index);
+                this.storeCurrentTabIndexInURL(index);
             }
 
             this.currentTab = tab;
@@ -133,6 +168,10 @@ export default {
                 this.setCurrentTab = false;
             }
         },
+        reset() {
+            this.currentTab = {};
+            this.setCurrentTab = true;
+        },
         removeItem(identifier) {
             let pos = this.tabsList.findIndex(tab =>
                     tab.domainObject.identifier.namespace === identifier.namespace && tab.domainObject.identifier.key === identifier.key
@@ -144,6 +183,10 @@ export default {
             if (this.isCurrent(tabToBeRemoved)) {
                 this.showTab(this.tabsList[this.tabsList.length - 1], this.tabsList.length - 1);
             }
+
+            if (!this.tabsList.length) {
+                this.reset();
+            }
         },
         onReorder(reorderPlan) {
             let oldTabs = this.tabsList.slice();
@@ -154,7 +197,7 @@ export default {
         },
         onDrop(e) {
             this.setCurrentTab = true;
-            this.storeCurrentTabIndex(this.tabsList.length);
+            this.storeCurrentTabIndexInURL(this.tabsList.length);
         },
         dragstart(e) {
             if (e.dataTransfer.types.includes('openmct/domain-object-path')) {
@@ -177,8 +220,19 @@ export default {
         updateInternalDomainObject(domainObject) {
             this.internalDomainObject = domainObject;
         },
-        storeCurrentTabIndex(index) {
+        persistCurrentTabIndex(index) {
             this.openmct.objects.mutate(this.internalDomainObject, 'currentTabIndex', index);
+        },
+        storeCurrentTabIndexInURL(index) {
+            let currentTabIndexInURL = getSearchParam(this.searchTabKey);
+
+            if (index !== currentTabIndexInURL) {
+                setSearchParam(this.searchTabKey, index);
+                this.currentTabIndex = index;
+            }
+        },
+        clearCurrentTabIndexFromURL() {
+            deleteSearchParam(this.searchTabKey);
         }
     }
 }

src/plugins/tabs/tabs.js

@@ -42,20 +42,28 @@ define([
                 let component;
 
                 return {
-                    show: function (element) {
+                    show: function (element, editMode) {
                         component =  new Vue({
                             el: element,
                             components: {
                                 TabsComponent: TabsComponent.default
                             },
+                            data() {
+                                return {
+                                    isEditing: editMode
+                                };
+                            },
                             provide: {
                                 openmct,
                                 domainObject,
                                 composition: openmct.composition.get(domainObject)
                             },
-                            template: '<tabs-component></tabs-component>'
+                            template: '<tabs-component :isEditing="isEditing"></tabs-component>'
                         });
                     },
+                    onEditModeChange(editMode) {
+                        component.isEditing = editMode;
+                    },
                     destroy: function (element) {
                         component.$destroy();
                         component = undefined;

src/styles/_constants-espresso.scss

@@ -151,6 +151,10 @@ $browseFrameColor: pullForward($colorBodyBg, 10%);
 $browseFrameBorder: 1px solid $browseFrameColor; // Frames in Disp and Flex Layouts when frame is showing
 $browseSelectableShdwHov: rgba($colorBodyFg, 0.3) 0 0 3px;
 $browseSelectedBorder: 1px solid rgba($colorBodyFg, 0.4);
+$filterItemHoverFg: brightness(1.2) contrast(1.1);
+$filterItemMissing: brightness(0.6) grayscale(1);
+$opacityMissing: 0.5;
+$borderMissing: 1px dashed $colorAlert !important;
 
 /************************************************** EDITING */
 $editUIColor: $uiColor; // Base color

src/styles/_constants-maelstrom.scss

@@ -155,6 +155,10 @@ $browseFrameColor: pullForward($colorBodyBg, 10%);
 $browseFrameBorder: 1px solid $browseFrameColor; // Frames in Disp and Flex Layouts when frame is showing
 $browseSelectableShdwHov: rgba($colorBodyFg, 0.3) 0 0 3px;
 $browseSelectedBorder: 1px solid rgba($colorBodyFg, 0.4);
+$filterItemHoverFg: brightness(1.2) contrast(1.1);
+$filterItemMissing: contrast(0.2);
+$opacityMissing: 0.5;
+$borderMissing: 1px dashed $colorAlert !important;
 
 /************************************************** EDITING */
 $editUIColor: $uiColor; // Base color

src/styles/_constants-snow.scss

@@ -151,6 +151,10 @@ $browseFrameColor: pullForward($colorBodyBg, 10%);
 $browseFrameBorder: 1px solid $browseFrameColor; // Frames in Disp and Flex Layouts when frame is showing
 $browseSelectableShdwHov: rgba($colorBodyFg, 0.3) 0 0 3px;
 $browseSelectedBorder: 1px solid rgba($colorBodyFg, 0.4);
+$filterItemHoverFg: brightness(0.9);
+$filterItemMissing: contrast(0.2);
+$opacityMissing: 0.4;
+$borderMissing: 1px dashed $colorAlert !important;
 
 /************************************************** EDITING */
 $editUIColor: $uiColor; // Base color

src/styles/_constants.scss

@@ -61,7 +61,7 @@ $plotXBarH: 35px;
 $plotLegendH: 20px;
 $plotLegendWidthCollapsed: 20%;
 $plotLegendWidthExpanded: 50%;
-$plotSwatchD: 10px;
+$plotSwatchD: 12px;
 $plotDisplayArea: (0, 0, $plotXBarH, $plotYBarW); // 1: Top, 2: right, 3: bottom, 4: left
 $plotMinH: 95px;
 $controlBarH: 25px;

src/styles/_controls.scss

@@ -411,7 +411,17 @@ select {
 
 .c-tab {
     // Used in Tab View, generic tabs
-    background: $colorBtnBg;
+    $notchSize: 7px;
+    $clipPath:
+        polygon(
+            0% 0%,
+            calc(100% - #{$notchSize}) 0%,
+            100% #{$notchSize},
+            100% calc(100% - #{$notchSize}),
+            100% 100%,
+            0% 100%
+        );
+    background: rgba($colorBtnBg, 0.7);
     color: $colorBtnFg;
     cursor: pointer;
     display: flex;
@@ -420,21 +430,15 @@ select {
     margin: 1px 1px 0 0;
     padding: $interiorMargin $interiorMarginLg;
     white-space: nowrap;
+    clip-path: $clipPath;
+    -webkit-clip-path: $clipPath; // Safari
 
-    --notchSize: 7px;
-
-    clip-path:
-        polygon(
-            0% 0%,
-            calc(100% - var(--notchSize)) 0%,
-            100% var(--notchSize),
-            100% calc(100% - var(--notchSize)),
-            100% 100%,
-            0% 100%
-        );
+    > * + * {
+        margin-left: $interiorMargin;
+    }
 
     @include hover() {
-        background: $colorBtnBgHov;
+        filter: $filterHov;
     }
 
     &.is-current {

src/styles/_legacy-plots.scss

@@ -43,7 +43,9 @@ mct-plot {
 
 .c-plot,
 .gl-plot {
-    .s-status-taking-snapshot & {
+    overflow: hidden;
+
+        .s-status-taking-snapshot & {
         .c-control-bar {
             display: none;
         }
@@ -51,6 +53,17 @@ mct-plot {
             display: none;
         }
     }
+
+    /*********************** MISSING ITEM INDICATORS */
+    .is-missing__indicator {
+        display: none;
+    }
+    .is-missing {
+        @include isMissing();
+        .is-missing__indicator {
+            font-size: 0.8em;
+        }
+    }
 }
 
 .c-plot {
@@ -74,6 +87,7 @@ mct-plot {
         display: flex;
         flex: 1 1 auto;
         flex-direction: column;
+        overflow: hidden;
     }
 
     &--stacked {
@@ -102,18 +116,15 @@ mct-plot {
     }
 }
 
-
 .gl-plot {
     display: flex;
-    position: relative;
-    width: 100%;
-    height: 100%;
-    min-height: $plotMinH;
+    flex: 1 1 auto;
 
     /*********************** AXIS AND DISPLAY AREA */
     .plot-wrapper-axis-and-display-area {
         position: relative;
         flex: 1 1 auto;
+        min-height: $plotMinH;
     }
 
     .gl-plot-wrapper-display-area-and-x-axis {
@@ -196,7 +207,6 @@ mct-plot {
             left: 0; top: 0; right: auto; bottom: 0;
             padding-left: 5px;
             text-orientation: mixed;
-            //overflow: hidden;
             writing-mode: vertical-lr;
             &:before {
                 // Icon denoting configurability
@@ -368,12 +378,6 @@ mct-plot {
     z-index: -10;
 
     .l-view-section {
-        //$m: $interiorMargin;
-        //top: $m !important;
-        //right: $m;
-        //bottom: $m;
-        //left: $m;
-
         .s-status-timeconductor-unsynced .holder-plot {
             .t-object-alert.t-alert-unsynced {
                 display: none;
@@ -429,14 +433,18 @@ mct-plot {
 /****************** _LEGEND.SCSS */
 .gl-plot-legend,
 .c-plot-legend {
+    overflow: hidden;
+
     &__wrapper {
         // Holds view-control and both collapsed and expanded legends
         flex: 1 1 auto;
-        overflow: auto; // Prevents collapsed legend from forcing scrollbars on higher parent containers
+        height: 100%;
+        overflow: auto;
+        padding: 2px;
     }
 
     &__view-control {
-        padding-top: 2px;
+        padding-top: 4px;
         margin-right: $interiorMarginSm;
     }
 
@@ -481,15 +489,21 @@ mct-plot {
 /***************** GENERAL STYLES, ALL STATES */
 .plot-legend-item {
     // General styles for legend items, both expanded and collapsed legend states
+    > * + * {
+        margin-left: $interiorMarginSm;
+    }
+
     .plot-series-color-swatch {
-        border-radius: $smallCr;
+        border-radius: 30%; //$smallCr;
         border: 1px solid $colorBodyBg;
         display: inline-block;
+        flex: 0 0 auto;
         height: $plotSwatchD;
         width: $plotSwatchD;
     }
     .plot-series-name {
         display: inline;
+        @include ellipsize();
     }
 
     .plot-series-value {
@@ -497,6 +511,16 @@ mct-plot {
     }
 }
 
+.plot-series-swatch-and-name {
+    display: flex;
+    flex: 0 1 auto;
+    align-items: center;
+
+    > * + * {
+        margin-left: $interiorMarginSm;
+    }
+}
+
 .plot-wrapper-expanded-legend {
     flex: 1 1 auto;
 }
@@ -505,9 +529,6 @@ mct-plot {
     &.plot-legend-collapsed .plot-wrapper-expanded-legend { display: none; }
     &.plot-legend-expanded .plot-wrapper-collapsed-legend { display: none; }
 
-    &.plot-legend-collapsed .icon-cursor-lock::before { padding-right: 5px; }
-    &.plot-legend-expanded .icon-cursor-lock::before { padding-right: 5px; }
-
     &.plot-legend-top .gl-plot-legend { margin-bottom: $interiorMargin; }
     &.plot-legend-bottom .gl-plot-legend { margin-top: $interiorMargin; }
     &.plot-legend-right .gl-plot-legend { margin-left: $interiorMargin; }
@@ -521,19 +542,13 @@ mct-plot {
             display: flex;
             align-items: center;
             justify-content: stretch;
-            &:not(:first-child) {
-                margin-left: $interiorMarginLg;
-            }
+
             .plot-series-swatch-and-name,
             .plot-series-value {
                 @include ellipsize();
                 flex: 1 1 auto;
             }
 
-            .plot-series-swatch-and-name {
-                margin-right: $interiorMarginSm;
-            }
-
             .plot-series-value {
                 text-align: left;
             }
@@ -543,7 +558,7 @@ mct-plot {
     /***************** GENERAL STYLES, EXPANDED */
     &.plot-legend-expanded {
         .gl-plot-legend {
-            // max-height: 70%;
+             max-height: 70%;
         }
 
         .plot-wrapper-expanded-legend {
@@ -564,6 +579,11 @@ mct-plot {
                 display: flex;
                 flex: 1 1 auto;
                 overflow: hidden;
+
+                > .plot-legend-item + .plot-legend-item {
+                    // Space between plot items
+                    margin-left: $interiorMarginLg;
+                }
             }
         }
     }
@@ -595,12 +615,17 @@ mct-plot {
                 min-width: 0;
                 flex: 1 1 auto;
                 overflow-y: auto;
+
+                > * + * {
+                    // Space between plot items
+                    margin-top: $interiorMarginSm;
+                }
             }
             .plot-legend-item {
-                margin-bottom: 1px;
                 margin-left: 0;
-                flex-wrap: wrap;
+                flex-wrap: nowrap;
                 .plot-series-swatch-and-name {
+                    @include ellipsize();
                     flex: 0 1 auto;
                     min-width: 20%;
                 }
@@ -654,3 +679,24 @@ mct-plot {
         display: inline-block !important;
     }
 }
+
+/*********************** CURSOR LOCK INDICATOR */
+[class*='c-state-indicator__alert-cursor-lock'] {
+    display: none;
+}
+
+[class*='is-cursor-locked'] {
+    background: rgba($colorInfo, 0.1);
+
+    [class*='c-state-indicator__alert-cursor-lock'] {
+        @include userSelectNone();
+        color: $colorInfo;
+        display: block;
+        margin-right: $interiorMarginSm;
+
+        &[class*='--verbose'] {
+            padding: $interiorMarginSm;
+
+        }
+    }
+}

src/styles/_mixins.scss

@@ -117,6 +117,33 @@
     }
 }
 
+@mixin isMissing($absPos: false) {
+    // Common styles to be applied to tree items, object labels, grid and list item views
+    //opacity: 0.7;
+    //pointer-events: none; // Don't think we can do this, as disables title hover on icon element
+
+    .is-missing__indicator {
+        display: none ;
+        text-shadow: $colorBodyBg 0 0 2px;
+        color: $colorAlert;
+        font-family: symbolsfont;
+
+        &:before {
+            content: $glyph-icon-alert-triangle;
+        }
+    }
+
+    @if $absPos {
+        .is-missing__indicator {
+            position: absolute;
+            z-index: 3;
+        }
+    }
+
+    &.is-missing .is-missing__indicator,
+    .is-missing .is-missing__indicator { display: block !important; }
+}
+
 @mixin bgDiagonalStripes($c: yellow, $a: 0.1, $d: 40px) {
     background-image: linear-gradient(-45deg,
         rgba($c, $a) 25%, transparent 25%,

src/styles/_table.scss

@@ -49,8 +49,6 @@ table {
     td {
         vertical-align: top;
     }
-
-    a { color: $colorBtnMajorBg; }
 }
 
 .is-editing {

src/styles/vue-styles.scss

@@ -13,7 +13,6 @@
 @import "../plugins/filters/components/filters-view.scss";
 @import "../plugins/filters/components/global-filters.scss";
 @import "../plugins/flexibleLayout/components/flexible-layout.scss";
-@import "../plugins/folderView/components/grid-item.scss";
 @import "../plugins/folderView/components/grid-view.scss";
 @import "../plugins/folderView/components/list-item.scss";
 @import "../plugins/folderView/components/list-view.scss";

src/ui/components/ObjectFrame.vue

@@ -24,13 +24,24 @@
     class="c-so-view has-local-controls"
     :class="{
         'c-so-view--no-frame': !hasFrame,
-        'has-complex-content': complexContent
+        'has-complex-content': complexContent,
+        'is-missing': domainObject.status === 'missing'
     }"
 >
     <div class="c-so-view__header">
         <div class="c-object-label"
-             :class="[cssClass, classList]"
+             :class="{
+                 classList,
+                 'is-missing': domainObject.status === 'missing'
+             }"
         >
+            <div class="c-object-label__type-icon"
+                 :class="cssClass"
+            >
+                <span class="is-missing__indicator"
+                      title="This item is missing"
+                ></span>
+            </div>
             <div class="c-object-label__name">
                 {{ domainObject && domainObject.name }}
             </div>
@@ -46,6 +57,9 @@
             @click="expand"
         ></button>
     </div>
+    <div class="is-missing__indicator"
+         title="This item is missing"
+    ></div>
     <object-view
         ref="objectView"
         class="c-so-view__object-view"

src/ui/components/ObjectLabel.vue

@@ -1,7 +1,10 @@
 <template>
 <a
     class="c-tree__item__label c-object-label"
-    :class="classList"
+    :class="{
+        classList,
+        'is-missing': observedObject.status === 'missing'
+    }"
     draggable="true"
     :href="objectLink"
     @dragstart="dragStart"
@@ -10,8 +13,14 @@
     <div
         class="c-tree__item__type-icon c-object-label__type-icon"
         :class="typeClass"
-    ></div>
-    <div class="c-tree__item__name c-object-label__name">{{ observedObject.name }}</div>
+    >
+        <span class="is-missing__indicator"
+              title="This item is missing"
+        ></span>
+    </div>
+    <div class="c-tree__item__name c-object-label__name">
+        {{ observedObject.name }}
+    </div>
 </a>
 </template>
 

src/ui/components/ObjectView.vue

@@ -53,7 +53,9 @@ export default {
     mounted() {
         this.currentObject = this.object;
         this.updateView();
-        this.$el.addEventListener('dragover', this.onDragOver);
+        this.$el.addEventListener('dragover', this.onDragOver, {
+            capture: true
+        });
         this.$el.addEventListener('drop', this.editIfEditable, {
             capture: true
         });
@@ -269,6 +271,7 @@ export default {
             if (provider &&
                 provider.canEdit &&
                 provider.canEdit(this.currentObject) &&
+                this.isEditingAllowed() &&
                 !this.openmct.editor.isEditing()) {
                 this.openmct.editor.edit();
             }
@@ -301,7 +304,7 @@ export default {
                 objectPath= this.currentObjectPath || this.objectPath,
                 parentObject = objectPath[1];
 
-            return [browseObject, parentObject, this.currentObject].every(object => !object.locked);
+            return [browseObject, parentObject, this.currentObject].every(object => object && !object.locked);
         }
     }
 }

src/ui/components/object-frame.scss

@@ -2,6 +2,10 @@
     display: flex;
     flex-direction: column;
 
+    &.is-missing {
+        border: $borderMissing;
+    }
+
     /*************************** HEADER */
     &__header {
         flex: 0 0 auto;
@@ -39,6 +43,15 @@
         > .c-so-view__local-controls {
             top: $interiorMarginSm; right: $interiorMarginSm;
         }
+
+        &.is-missing {
+            @include isMissing($absPos: true);
+
+            .is-missing__indicator {
+                top: $interiorMargin;
+                left: $interiorMargin;
+            }
+        }
     }
 
     &__local-controls {
@@ -61,11 +74,9 @@
         height: 0; // Chrome 73 overflow bug fix
         overflow: auto;
 
-        .u-angular-object-view-wrapper {
-            .u-fills-container {
-                // Expand component types that fill a container
-                @include abs();
-            }
+        .u-fills-container {
+            // Expand component types that fill a container
+            @include abs();
         }
     }
 
@@ -78,8 +89,5 @@
 }
 
 .u-angular-object-view-wrapper {
-    flex: 1 1 auto;
-    height: 100%;
-    width: 100%;
-    overflow: hidden;
+    display: contents;
 }

src/ui/components/object-label.scss

@@ -7,19 +7,33 @@
     overflow: hidden;
     white-space: nowrap;
 
+    > * + * { margin-left: $interiorMargin; }
+
     &__name {
         @include ellipsize();
         display: inline;
     }
 
-    &__type-icon,
-    &:before {
+    &__type-icon {
         // Type icon. Must be an HTML entity to allow inclusion of alias indicator.
         display: block;
         flex: 0 0 auto;
         font-size: 1.1em;
-        opacity: 0.6;
-        margin-right: $interiorMargin;
+    }
+
+    &.is-missing {
+        @include isMissing($absPos: true);
+
+        [class*='__type-icon']:before,
+        [class*='__type-icon']:after{
+            opacity: $opacityMissing;
+        }
+
+        .is-missing__indicator {
+            right: -3px;
+            top: -3px;
+            transform: scale(0.7);
+        }
     }
 }
 
@@ -27,6 +41,8 @@
     border-radius: $controlCr;
     padding: $interiorMarginSm 1px;
 
+    > * + * { margin-left: $interiorMarginSm; }
+
     &__name {
         display: inline;
         width: 100%;

src/ui/inspector/ObjectName.vue

@@ -1,16 +1,24 @@
 <template>
 <div class="c-inspector__header">
-    <div v-if="!multiSelect && !singleSelectNonObject"
+    <div v-if="!multiSelect"
          class="c-inspector__selected-w c-object-label"
-         :class="typeCssClass"
+         :class="{'is-missing': domainObject.status === 'missing' }"
     >
-        <span class="c-inspector__selected c-object-label__name">{{ item.name }}</span>
-    </div>
-    <div v-if="singleSelectNonObject"
-         class="c-inspector__selected-w  c-object-label"
-         :class="typeCssClass"
-    >
-        <span class="c-inspector__selected  c-object-label__name c-inspector__selected--non-domain-object">Layout Object</span>
+        <div class="c-object-label__type-icon"
+             :class="typeCssClass"
+        >
+            <span class="is-missing__indicator"
+                  title="This item is missing"
+            ></span>
+        </div>
+
+        <span v-if="!singleSelectNonObject"
+              class="c-inspector__selected c-object-label__name"
+        >{{ item.name }}</span>
+        <span v-if="singleSelectNonObject"
+              class="c-inspector__selected  c-object-label__name c-inspector__selected--non-domain-object"
+        >Layout Object</span>
+
     </div>
     <div v-if="multiSelect"
          class="c-inspector__multiple-selected-w"

src/ui/inspector/inspector.scss

@@ -4,7 +4,7 @@
     flex-direction: column;
 
     > * {
-        // Thi is on purpose: want extra margin on top object-name element
+        // This is on purpose: want extra margin on top object-name element
         margin-top: $interiorMargin;
     }
 
@@ -41,6 +41,8 @@
 
     &__content {
         flex: 1 1 auto;
+        display: flex;
+        flex-direction: column;
     }
 
     &__elements {

src/ui/layout/BrowseBar.vue

@@ -8,8 +8,18 @@
         ></button>
         <div
             class="l-browse-bar__object-name--w c-object-label"
-            :class="[ type.cssClass, classList ]"
+            :class="{
+                classList,
+                'is-missing': domainObject.status === 'missing'
+            }"
         >
+            <div class="c-object-label__type-icon"
+                 :class="type.cssClass"
+            >
+                <span class="is-missing__indicator"
+                      title="This item is missing"
+                ></span>
+            </div>
             <span
                 class="l-browse-bar__object-name c-object-label__name c-input-inline"
                 contenteditable

src/ui/layout/layout.scss

@@ -354,9 +354,9 @@
         @include headerFont(1.4em);
         min-width: 0;
 
-        &:before {
-            // Icon
-            margin-right: $interiorMargin;
+        .is-missing__indicator {
+            right: -5px !important;
+            top: -4px !important;
         }
     }
 

src/ui/layout/mct-tree.scss

@@ -52,12 +52,13 @@
         padding: $interiorMarginSm $interiorMargin;
         transition: background 150ms ease;
 
+        &__type-icon {
+            color: $colorItemTreeIcon;
+        }
+
         &:hover {
             background: $colorItemTreeHoverBg;
-
-            [class*="__name"] {
-                color: $colorItemTreeHoverFg;
-            }
+            filter: $filterHov;
         }
 
         &.is-navigated-object,
@@ -81,12 +82,6 @@
             margin-left: $interiorMarginSm;
         }
 
-        &:hover {
-            .c-tree__item__type-icon:before {
-                color: $colorItemTreeIconHover;
-            }
-        }
-
         &.is-navigated-object,
         &.is-selected {
             .c-tree__item__type-icon:before {
@@ -115,10 +110,6 @@
             color: $colorItemTreeFg;
         }
 
-        &__type-icon {
-            color: $colorItemTreeIcon;
-        }
-
         &.is-alias {
             // Object is an alias to an original.
             [class*='__type-icon'] {

src/ui/layout/status-bar/indicators.scss

@@ -76,16 +76,23 @@
 [class*='minify-indicators'] {
     // All styles for minified Indicators should go in here
     .c-indicator:not(.no-minify) {
+        border: 1px solid transparent; // Hack to make minified sizing work in Safari. Have no idea why this works.
+        overflow: visible;
+        transition: transform;
+
         @include hover() {
             background: $colorIndicatorBgHov;
+            transition: transform 250ms ease-in 200ms; // Go-away transition
+
             .c-indicator__label {
                 box-shadow: $colorIndicatorMenuBgShdw;
                 transform: scale(1.0);
-                transition: all 100ms ease-out 100ms;
+                overflow: visible;
+                transition: transform 100ms ease-out 100ms; // Appear transition
             }
         }
         .c-indicator__label {
-            transition: all 250ms ease-in 200ms;
+            transition: transform 250ms ease-in 200ms; // Go-away transition
             background: $colorIndicatorMenuBg;
             color: $colorIndicatorMenuFg;
             border-radius: $controlCr;
@@ -95,7 +102,7 @@
             position: absolute;
             transform-origin: 90% 0;
             transform: scale(0.0);
-            overflow: visible;
+            overflow: hidden;
             z-index: 50;
 
             &:before {