Merge branch 'plotly-test' of https://github.com/nasa/openmct into plotly-test

.gitignore

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

index.html

@@ -113,10 +113,7 @@
         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'],
-            {indicator: true}
-        ));
+        openmct.install(openmct.plugins.ClearData(['table', 'telemetry.plot.overlay', 'telemetry.plot.stacked']));
         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' : 'FirefoxHeadless'];
+const browsers = [process.env.NODE_ENV === 'debug' ? 'ChromeDebugging' : 'ChromeHeadless'];
 const coverageEnabled = process.env.COVERAGE === 'true';
 const reporters = ['progress', 'html'];
 
@@ -95,7 +95,6 @@ module.exports = (config) => {
             stats: 'errors-only',
             logLevel: 'warn'
         },
-        singleRun: true,
-        browserNoActivityTimeout: 90000
+        singleRun: true
     });
 }

package.json

@@ -2,7 +2,6 @@
   "name": "openmct",
   "version": "1.0.0-snapshot",
   "description": "The Open MCT core platform",
-  "dependencies": {},
   "devDependencies": {
     "angular": ">=1.8.0",
     "angular-route": "1.4.14",
@@ -39,14 +38,13 @@
     "istanbul-instrumenter-loader": "^3.0.1",
     "jasmine-core": "^3.1.0",
     "jsdoc": "^3.3.2",
-    "karma": "^2.0.3",
-    "karma-chrome-launcher": "^2.2.0",
-    "karma-firefox-launcher": "^1.3.0",
+    "karma": "5.0.9",
+    "karma-chrome-launcher": "3.1.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": "^1.1.2",
+    "karma-jasmine": "^2.0.0",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^3.0.0",
     "location-bar": "^3.0.1",
@@ -60,7 +58,9 @@
     "moment-timezone": "0.5.28",
     "node-bourbon": "^4.2.3",
     "node-sass": "^4.9.2",
-    "painterro": "^1.0.35",
+    "painterro": "^0.2.65",
+    "plotly.js-basic-dist-min": "^1.54.6",
+    "plotly.js-gl2d-dist-min": "^1.54.5",
     "printj": "^1.2.1",
     "raw-loader": "^0.5.1",
     "request": "^2.69.0",

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

@@ -31,13 +31,13 @@
     </mct-form>
 </div>
 <div class="c-overlay__button-bar">
-    <button class='c-button c-button--major'
+    <a class='c-button c-button--major'
        ng-class="{ disabled: !createForm.$valid }"
        ng-click="ngModel.confirm()">
         OK
-    </button>
-    <button class='c-button  '
+    </a>
+    <a class='c-button  '
        ng-click="ngModel.cancel()">
         Cancel
-    </button>
+    </a>
 </div>

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

@@ -31,13 +31,13 @@
         </mct-include>
     </div>
     <div class="c-overlay__button-bar">
-        <button ng-repeat="option in ngModel.dialog.options"
+        <a ng-repeat="option in ngModel.dialog.options"
            href=''
            class="s-button lg"
            title="{{option.description}}"
            ng-click="ngModel.confirm(option.key)"
            ng-class="{ major: $first, subtle: !$first }">
             {{option.name}}
-        </button>
+        </a>
     </div>
 </mct-container>

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

@@ -24,7 +24,7 @@
     <div class="c-overlay__outer">
         <button ng-click="ngModel.cancel()"
            ng-if="ngModel.cancel"
-           class="c-click-icon c-overlay__close-button icon-x"></button>
+           class="c-click-icon c-overlay__close-button icon-x-in-circle"></button>
         <div class="c-overlay__contents" ng-transclude></div>
     </div>
 </div>

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

@@ -36,6 +36,8 @@ define(
         }
 
         EditPersistableObjectsPolicy.prototype.allow = function (action, context) {
+            var identifier;
+            var provider;
             var domainObject = context.domainObject;
             var key = action.getMetadata().key;
             var category = (context || {}).category;
@@ -44,8 +46,9 @@ 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') {
-                let newStyleObject = objectUtils.toNewFormat(domainObject, domainObject.getId());
-                return this.openmct.objects.isPersistable(newStyleObject);
+                identifier = objectUtils.parseKeyString(domainObject.getId());
+                provider = this.openmct.objects.getProvider(identifier);
+                return provider.save !== undefined;
             }
 
             return true;

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

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

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

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

platform/containment/src/PersistableCompositionPolicy.js

@@ -48,8 +48,9 @@ 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())) {
-                let newStyleObject = objectUtils.toNewFormat(parent, parent.getId());
-                return this.openmct.objects.isPersistable(newStyleObject);
+                var identifier = objectUtils.parseKeyString(parent.getId());
+                var provider = this.openmct.objects.getProvider(identifier);
+                return provider.save !== undefined;
             }
             return true;
         };

platform/containment/test/PersistableCompositionPolicySpec.js

@@ -33,7 +33,7 @@ define(
 
             beforeEach(function () {
                 objectAPI = jasmine.createSpyObj('objectsAPI', [
-                    'isPersistable'
+                    'getProvider'
                 ]);
 
                 mockOpenMCT = {
@@ -51,6 +51,10 @@ define(
                     'isEditContextRoot'
                 ]);
                 mockParent.getCapability.and.returnValue(mockEditorCapability);
+
+                objectAPI.getProvider.and.returnValue({
+                    save: function () {}
+                });
                 persistableCompositionPolicy = new PersistableCompositionPolicy(mockOpenMCT);
             });
 
@@ -61,22 +65,19 @@ 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.isPersistable.and.returnValue(false);
+                objectAPI.getProvider.and.returnValue({});
                 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.isPersistable).not.toHaveBeenCalled();
+                expect(objectAPI.getProvider).not.toHaveBeenCalled();
 
                 mockEditorCapability.isEditContextRoot.and.returnValue(false);
-                objectAPI.isPersistable.and.returnValue(true);
                 expect(persistableCompositionPolicy.allow(mockParent, mockChild)).toBe(true);
-                expect(objectAPI.isPersistable).toHaveBeenCalled();
+                expect(objectAPI.getProvider).toHaveBeenCalled();
             });
 
         });

platform/core/bundle.js

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

platform/core/src/capabilities/PersistenceCapability.js

@@ -20,8 +20,8 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define(["objectUtils"],
-    function (objectUtils) {
+define(
+    function () {
 
         /**
          * Defines the `persistence` capability, used to trigger the
@@ -47,7 +47,6 @@ define(["objectUtils"],
             identifierService,
             notificationService,
             $q,
-            openmct,
             domainObject
         ) {
             // Cache modified timestamp
@@ -59,7 +58,6 @@ define(["objectUtils"],
             this.persistenceService = persistenceService;
             this.notificationService = notificationService;
             this.$q = $q;
-            this.openmct = openmct;
         }
 
         /**
@@ -68,7 +66,7 @@ define(["objectUtils"],
          */
         function rejectIfFalsey(value, $q) {
             if (!value) {
-                return Promise.reject("Error persisting object");
+                return $q.reject("Error persisting object");
             } else {
                 return value;
             }
@@ -100,7 +98,7 @@ define(["objectUtils"],
                 dismissable: true
             });
 
-            return Promise.reject(error);
+            return $q.reject(error);
         }
 
         /**
@@ -112,16 +110,34 @@ define(["objectUtils"],
          */
         PersistenceCapability.prototype.persist = function () {
             var self = this,
-                domainObject = this.domainObject;
+                domainObject = this.domainObject,
+                model = domainObject.getModel(),
+                modified = model.modified,
+                persisted = model.persisted,
+                persistenceService = this.persistenceService,
+                persistenceFn = persisted !== undefined ?
+                    this.persistenceService.updateObject :
+                    this.persistenceService.createObject;
 
-            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);
-                });
+            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);
+            });
         };
 
         /**

platform/core/test/capabilities/PersistenceCapabilitySpec.js

@@ -19,6 +19,7 @@
  * 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.
  */
@@ -39,8 +40,7 @@ define(
                 model,
                 SPACE = "some space",
                 persistence,
-                mockOpenMCT,
-                mockNewStyleDomainObject;
+                happyPromise;
 
             function asPromise(value, doCatch) {
                 return (value || {}).then ? value : {
@@ -56,6 +56,7 @@ define(
             }
 
             beforeEach(function () {
+                happyPromise = asPromise(true);
                 model = { someKey: "some value", name: "domain object"};
 
                 mockPersistenceService = jasmine.createSpyObj(
@@ -93,23 +94,12 @@ 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);
@@ -120,28 +110,51 @@ define(
                     mockIdentifierService,
                     mockNofificationService,
                     mockQ,
-                    mockOpenMCT,
                     mockDomainObject
                 );
             });
 
             describe("successful persistence", function () {
                 beforeEach(function () {
-                    mockOpenMCT.objects.save.and.returnValue(Promise.resolve(true));
+                    mockPersistenceService.updateObject.and.returnValue(happyPromise);
+                    mockPersistenceService.createObject.and.returnValue(happyPromise);
                 });
                 it("creates unpersisted objects with the persistence service", function () {
                     // Verify precondition; no call made during constructor
-                    expect(mockOpenMCT.objects.save).not.toHaveBeenCalled();
+                    expect(mockPersistenceService.createObject).not.toHaveBeenCalled();
 
                     persistence.persist();
 
-                    expect(mockOpenMCT.objects.save).toHaveBeenCalledWith(mockNewStyleDomainObject);
+                    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
+                    );
                 });
 
                 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;
@@ -152,37 +165,30 @@ define(
 
                 it("does not trigger error notification on successful" +
                     " persistence", function () {
-                    let rejected = false;
-                    return persistence.persist()
-                        .catch(() => rejected = true)
-                        .then(() => {
-                            expect(rejected).toBe(false);
-                            expect(mockNofificationService.error).not.toHaveBeenCalled();
-                        });
+                    persistence.persist();
+                    expect(mockQ.reject).not.toHaveBeenCalled();
+                    expect(mockNofificationService.error).not.toHaveBeenCalled();
                 });
             });
 
             describe("unsuccessful persistence", function () {
+                var sadPromise = {
+                    then: function (callback) {
+                        return asPromise(callback(0), true);
+                    }
+                };
                 beforeEach(function () {
-                    mockOpenMCT.objects.save.and.returnValue(Promise.resolve(false));
+                    mockPersistenceService.createObject.and.returnValue(sadPromise);
                 });
                 it("rejects on falsey persistence result", function () {
-                    let rejected = false;
-                    return persistence.persist()
-                        .catch(() => rejected = true)
-                        .then(() => {
-                            expect(rejected).toBe(true);
-                        });
+                    persistence.persist();
+                    expect(mockQ.reject).toHaveBeenCalled();
                 });
 
                 it("notifies user on persistence failure", function () {
-                    let rejected = false;
-                    return persistence.persist()
-                        .catch(() => rejected = true)
-                        .then(() => {
-                            expect(rejected).toBe(true);
-                            expect(mockNofificationService.error).toHaveBeenCalled();
-                        });
+                    persistence.persist();
+                    expect(mockQ.reject).toHaveBeenCalled();
+                    expect(mockNofificationService.error).toHaveBeenCalled();
                 });
             });
         });

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

@@ -19,7 +19,7 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<div class="c-clock l-time-display u-style-receiver js-style-receiver" ng-controller="ClockController as clock">
+<div class="c-clock l-time-display" ng-controller="ClockController as clock">
 	<div class="c-clock__timezone">
 		{{clock.zone()}}
 	</div>

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

@@ -19,7 +19,7 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<div class="c-timer u-style-receiver js-style-receiver is-{{timer.timerState}}" ng-controller="TimerController as timer">
+<div class="c-timer is-{{timer.timerState}}" ng-controller="TimerController as timer">
     <div class="c-timer__controls">
         <button ng-click="timer.clickStopButton()"
                 ng-hide="timer.timerState == 'stopped'"

platform/search/res/templates/search.html

@@ -29,9 +29,9 @@
                        type="text" tabindex="10000"
                        ng-model="ngModel.input"
                        ng-keyup="controller.search()"/>
-                <button class="c-search__clear-input clear-icon icon-x-in-circle"
+                <a class="c-search__clear-input clear-icon icon-x-in-circle"
                    ng-class="{show: !(ngModel.input === '' || ngModel.input === undefined)}"
-                   ng-click="ngModel.input = ''; controller.search()"></button>
+                   ng-click="ngModel.input = ''; controller.search()"></a>
                 <!-- To prevent double triggering of clicks on click away, render
                    non-clickable version of the button when menu active-->
                 <a ng-if="!toggle.isActive()" class="menu-icon context-available"
@@ -45,16 +45,16 @@
                 </mct-include>
             </div>
 
-            <button class="c-button c-search__btn-cancel"
+            <a class="c-button c-search__btn-cancel"
                ng-show="!(ngModel.input === '' || ngModel.input === undefined)"
                ng-click="ngModel.input = ''; ngModel.checkAll = true; menuController.checkAll(); controller.search()">
-                Cancel</button>
+                Cancel</a>
         </div>
 
         <div class="active-filter-display flex-elem holder"
              ng-class="{invisible: ngModel.filtersString === '' || ngModel.filtersString === undefined || !ngModel.search}">
-            <button class="clear-filters icon-x-in-circle s-icon-button"
-               ng-click="ngModel.checkAll = true; menuController.checkAll()"></button>Filtered by: {{ ngModel.filtersString }}
+            <a class="clear-filters icon-x-in-circle s-icon-button"
+               ng-click="ngModel.checkAll = true; menuController.checkAll()"></a>Filtered by: {{ ngModel.filtersString }}
         </div>
 
         <div class="flex-elem holder results-msg" ng-model="ngModel" ng-show="!loading && ngModel.search">
@@ -72,7 +72,7 @@
                                 ng-model="ngModel"
                                 class="l-flex-row flex-elem grows">
             </mct-representation>
-            <button class="load-more-button s-button vsm" ng-if="controller.areMore()" ng-click="controller.loadMore()">More Results</button>
+            <a class="load-more-button s-button vsm" ng-if="controller.areMore()" ng-click="controller.loadMore()">More Results</a>
         </div>
     </div>
 </div>

src/MCT.js

@@ -252,6 +252,7 @@ define([
         // Plugins that are installed by default
 
         this.install(this.plugins.Plot());
+        this.install(this.plugins.PlotlyPlot());
         this.install(this.plugins.TelemetryTable());
         this.install(PreviewPlugin.default());
         this.install(LegacyIndicatorsPlugin());

src/adapter/services/LegacyObjectAPIInterceptor.js

@@ -25,11 +25,10 @@ define([
 ], function (
     utils
 ) {
-    function ObjectServiceProvider(eventEmitter, objectService, instantiate, topic, $injector) {
+    function ObjectServiceProvider(eventEmitter, objectService, instantiate, topic) {
         this.eventEmitter = eventEmitter;
         this.objectService = objectService;
         this.instantiate = instantiate;
-        this.$injector = $injector;
 
         this.generalTopic = topic('mutation');
         this.bridgeEventBuses();
@@ -69,53 +68,16 @@ define([
         removeGeneralTopicListener = this.generalTopic.listen(handleLegacyMutation);
     };
 
-    ObjectServiceProvider.prototype.create = async function (object) {
-        let model = utils.toOldFormat(object);
+    ObjectServiceProvider.prototype.save = function (object) {
+        var key = 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();
+        return object.getCapability('persistence')
+            .persist()
+            .then(function () {
+                return utils.toNewFormat(object, key);
+            });
     };
 
-    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!
     };
@@ -156,8 +118,7 @@ define([
                 eventEmitter,
                 objectService,
                 instantiate,
-                topic,
-                openmct.$injector
+                topic
             )
         );
 

src/api/objects/ObjectAPI.js

@@ -101,25 +101,14 @@ define([
      */
 
     /**
-     * Create the given domain object in the corresponding persistence store
+     * Save this domain object in its current state.
      *
-     * @method create
+     * @method save
      * @memberof module:openmct.ObjectProvider#
      * @param {module:openmct.DomainObject} domainObject the domain object to
-     *        create
+     *        save
      * @returns {Promise} a promise which will resolve when the domain object
-     *          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
+     *          has been saved, or be rejected if it cannot be saved
      */
 
     /**
@@ -172,41 +161,8 @@ define([
         throw new Error('Delete 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;
+    ObjectAPI.prototype.save = function () {
+        throw new Error('Save not implemented');
     };
 
     /**
@@ -320,9 +276,5 @@ define([
      * @memberof module:openmct
      */
 
-    function hasAlreadyBeenPersisted(domainObject) {
-        return domainObject.persisted !== undefined &&
-            domainObject.persisted === domainObject.modified;
-    }
     return ObjectAPI;
 });

src/api/objects/ObjectAPISpec.js

@@ -1,60 +0,0 @@
-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/overlays/components/OverlayComponent.vue

@@ -7,7 +7,7 @@
     <div class="c-overlay__outer">
         <button
             v-if="dismissable"
-            class="c-click-icon c-overlay__close-button icon-x"
+            class="c-click-icon c-overlay__close-button icon-x-in-circle"
             @click="destroy"
         ></button>
         <div

src/api/overlays/components/overlay-component.scss

@@ -29,12 +29,13 @@
     }
 
     &__close-button {
-        $p: $interiorMargin + 2px;
+        $p: $interiorMargin;
+        border-radius: 100% !important;
         color: $overlayColorFg;
-        font-size: 1.5em;
+        display: inline-block;
+        font-size: 1.25em;
         position: absolute;
         top: $p; right: $p;
-        z-index: 99;
     }
 
     &__contents {
@@ -42,7 +43,7 @@
         display: flex;
         flex-direction: column;
         outline: none;
-        overflow: auto;
+        overflow: hidden;
     }
 
     &__top-bar {
@@ -86,10 +87,6 @@
     .c-click-icon {
         filter: $overlayBrightnessAdjust;
     }
-
-    .c-object-label__name {
-        filter: $objectLabelNameFilter;
-    }
 }
 
 body.desktop {
@@ -103,6 +100,7 @@ body.desktop {
     }
 
     // Overlay types, styling for desktop. Appended to .l-overlay-wrapper element.
+    .l-overlay-large,
     .l-overlay-small,
     .l-overlay-fit {
         .c-overlay__outer {
@@ -120,28 +118,8 @@ body.desktop {
 
     .l-overlay-large {
         // Default
-        $pad: $interiorMarginLg;
-        $tbPad: floor($pad * 0.8);
-        $lrPad: $pad;
-        .c-overlay {
-            &__blocker {
-                display: none;
-            }
-
-            &__outer {
-                @include overlaySizing($overlayOuterMarginFullscreen);
-                padding: $tbPad $lrPad;
-            }
-
-            &__close-button {
-                //top: $interiorMargin;
-                //right: $interiorMargin;
-            }
-        }
-
-        .l-browse-bar {
-            margin-right: 50px; // Don't cover close button
-            margin-bottom: $interiorMargin;
+        .c-overlay__outer {
+            @include overlaySizing($overlayOuterMarginLg);
         }
     }
 
@@ -161,4 +139,4 @@ body.desktop {
             min-width: 20%;
         }
     }
-}
+}

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,29 +156,6 @@ 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/LADTable/components/LADTable.vue

@@ -21,7 +21,7 @@
  *****************************************************************************/
 
 <template>
-<div class="c-lad-table-wrapper u-style-receiver js-style-receiver">
+<div class="c-lad-table-wrapper">
     <table class="c-table c-lad-table">
         <thead>
             <tr>

src/plugins/clearData/plugin.js

@@ -29,28 +29,24 @@ define([
     ClearDataAction,
     Vue
 ) {
-    return function plugin(appliesToObjects, options = {indicator: true}) {
-        let installIndicator = options.indicator;
-
+    return function plugin(appliesToObjects) {
         appliesToObjects = appliesToObjects || [];
 
         return function install(openmct) {
-            if (installIndicator) {
-                let component = new Vue ({
-                        provide: {
-                            openmct
-                        },
-                        components: {
-                            GlobalClearIndicator: GlobaClearIndicator.default
-                        },
-                        template: '<GlobalClearIndicator></GlobalClearIndicator>'
-                    }),
-                    indicator = {
-                        element: component.$mount().$el
-                    };
+            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,8 +103,6 @@ export default class ConditionManager extends EventEmitter {
                         criterion.operation = '';
                         conditionChanged = true;
                     }
-                } else {
-                    conditionChanged = true;
                 }
             });
             if (conditionChanged) {

src/plugins/condition/StyleRuleManager.js

@@ -46,7 +46,6 @@ export default class StyleRuleManager extends EventEmitter {
         if (this.isEditing) {
             if (this.stopProvidingTelemetry) {
                 this.stopProvidingTelemetry();
-                delete this.stopProvidingTelemetry;
             }
             if (this.conditionSetIdentifier) {
                 this.applySelectedConditionStyle();
@@ -67,7 +66,6 @@ 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)
@@ -156,8 +154,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,7 +197,6 @@ export default {
             }
             if (this.stopProvidingTelemetry) {
                 this.stopProvidingTelemetry();
-                delete this.stopProvidingTelemetry;
             }
         },
         initialize(conditionSetDomainObject) {
@@ -211,7 +210,6 @@ export default {
             if (this.isEditing) {
                 if (this.stopProvidingTelemetry) {
                     this.stopProvidingTelemetry();
-                    delete this.stopProvidingTelemetry;
                 }
             } else {
                 this.subscribeToConditionSet();
@@ -309,7 +307,6 @@ export default {
             this.persist(domainObjectStyles);
             if (this.stopProvidingTelemetry) {
                 this.stopProvidingTelemetry();
-                delete this.stopProvidingTelemetry;
             }
         },
         updateDomainObjectItemStyles(newItems) {
@@ -378,7 +375,6 @@ 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,7 +190,6 @@ export default {
             if (this.isEditing) {
                 if (this.stopProvidingTelemetry) {
                     this.stopProvidingTelemetry();
-                    delete this.stopProvidingTelemetry;
                 }
             } else {
                 this.subscribeToConditionSet();
@@ -326,7 +325,6 @@ export default {
 
             if (this.stopProvidingTelemetry) {
                 this.stopProvidingTelemetry();
-                delete this.stopProvidingTelemetry;
             }
 
             if (this.unObserveObjects) {
@@ -339,7 +337,6 @@ export default {
         subscribeToConditionSet() {
             if (this.stopProvidingTelemetry) {
                 this.stopProvidingTelemetry();
-                delete this.stopProvidingTelemetry;
             }
             if (this.conditionSetDomainObject) {
                 this.openmct.telemetry.request(this.conditionSetDomainObject)
@@ -497,7 +494,6 @@ export default {
 
             if (this.stopProvidingTelemetry) {
                 this.stopProvidingTelemetry();
-                delete this.stopProvidingTelemetry;
             }
         },
         removeConditionalStyles(domainObjectStyles, itemId) {

src/plugins/condition/criterion/AllTelemetryCriterion.js

@@ -127,7 +127,7 @@ export default class AllTelemetryCriterion extends TelemetryCriterion {
 
         if (validatedData) {
             if (this.isStalenessCheck()) {
-                if (this.stalenessSubscription && this.stalenessSubscription[validatedData.id]) {
+                if (this.stalenessSubscription[validatedData.id]) {
                     this.stalenessSubscription[validatedData.id].update(validatedData);
                 }
                 this.telemetryDataCache[validatedData.id] = false;

src/plugins/condition/criterion/TelemetryCriterion.js

@@ -142,14 +142,12 @@ export default class TelemetryCriterion extends EventEmitter {
             };
         }
 
-        let telemetryObject = this.telemetryObject;
-
         return this.openmct.telemetry.request(
             this.telemetryObject,
             options
         ).then(results => {
             const latestDatum = results.length ? results[results.length - 1] : {};
-            const normalizedDatum = this.createNormalizedDatum(latestDatum, telemetryObject);
+            const normalizedDatum = this.createNormalizedDatum(latestDatum, this.telemetryObject);
 
             return {
                 id: this.id,
@@ -203,7 +201,7 @@ export default class TelemetryCriterion extends EventEmitter {
         let inputValue;
         if (metadataObject) {
             if(metadataObject.enumerations && input.length) {
-                const enumeration = metadataObject.enumerations.find((item) => item.value.toString() === input[0].toString());
+                const enumeration = metadataObject.enumerations[input[0]];
                 if (enumeration !== undefined && enumeration.string) {
                     inputValue = [enumeration.string];
                 }

src/plugins/condition/criterion/TelemetryCriterionSpec.js

@@ -21,14 +21,12 @@
  *****************************************************************************/
 
 import TelemetryCriterion from "./TelemetryCriterion";
-import { getMockTelemetry } from "utils/testing";
 
 let openmct = {},
     mockListener,
     testCriterionDefinition,
     testTelemetryObject,
-    telemetryCriterion,
-    mockTelemetry = getMockTelemetry();
+    telemetryCriterion;
 
 describe("The telemetry criterion", function () {
 
@@ -62,7 +60,7 @@ describe("The telemetry criterion", function () {
         };
         openmct.objects = jasmine.createSpyObj('objects', ['get', 'makeKeyString']);
         openmct.objects.makeKeyString.and.returnValue(testTelemetryObject.identifier.key);
-        openmct.telemetry = jasmine.createSpyObj('telemetry', ['isTelemetryObject', "subscribe", "getMetadata", "getValueFormatter", "request"]);
+        openmct.telemetry = jasmine.createSpyObj('telemetry', ['isTelemetryObject', "subscribe", "getMetadata", "getValueFormatter"]);
         openmct.telemetry.isTelemetryObject.and.returnValue(true);
         openmct.telemetry.subscribe.and.returnValue(function () {});
         openmct.telemetry.getValueFormatter.and.returnValue({
@@ -111,30 +109,4 @@ describe("The telemetry criterion", function () {
         });
         expect(telemetryCriterion.result).toBeTrue();
     });
-
-    describe('the LAD request', () => {
-        beforeEach(async () => {
-            let telemetryRequestResolve;
-            let telemetryRequestPromise = new Promise((resolve) => {
-                telemetryRequestResolve = resolve;
-            });
-            openmct.telemetry.request.and.callFake(() => {
-                setTimeout(() => {
-                    telemetryRequestResolve(mockTelemetry);
-                }, 100);
-                return telemetryRequestPromise;
-            });
-        });
-
-        it("returns results for slow LAD requests", async function () {
-            const criteriaRequest = telemetryCriterion.requestLAD();
-            telemetryCriterion.destroy();
-            expect(telemetryCriterion.telemetryObject).toBeUndefined();
-            setTimeout(() => {
-                criteriaRequest.then((result) => {
-                    expect(result).toBeDefined();
-                });
-            }, 300);
-        });
-    });
 });

src/plugins/conditionWidget/components/ConditionWidget.vue

@@ -22,7 +22,7 @@
 
 <template>
 <component :is="urlDefined ? 'a' : 'span'"
-           class="c-condition-widget u-style-receiver js-style-receiver"
+           class="c-condition-widget"
            :href="urlDefined ? internalDomainObject.url : null"
 >
     <div class="c-condition-widget__label">

src/plugins/displayLayout/DisplayLayoutToolbar.js

@@ -124,117 +124,7 @@ define(['lodash'], function (_) {
                         'telemetry.plot.overlay-multi': [
                             VIEW_TYPES['telemetry.plot.stacked']
                         ]
-                    },
-                    SMALL_FONT_SIZES = [
-                        {
-                            name: 'Default Size',
-                            value: 'default'
-                        },
-                        {
-                            name: '8px',
-                            value: '8'
-                        },
-                        {
-                            name: '9px',
-                            value: '9'
-                        },
-                        {
-                            name: '10px',
-                            value: '10'
-                        },
-                        {
-                            name: '11px',
-                            value: '11'
-                        },
-                        {
-                            name: '12px',
-                            value: '12'
-                        },
-                        {
-                            name: '13px',
-                            value: '13'
-                        },
-                        {
-                            name: '14px',
-                            value: '14'
-                        },
-                        {
-                            name: '16px',
-                            value: '16'
-                        },
-                        {
-                            name: '18px',
-                            value: '18'
-                        },
-                        {
-                            name: '20px',
-                            value: '20'
-                        },
-                        {
-                            name: '24px',
-                            value: '24'
-                        }
-                    ],
-                    LARGE_FONT_SIZES = [
-                        {
-                            name: '28px',
-                            value: '28'
-                        },
-                        {
-                            name: '32px',
-                            value: '32'
-                        },
-                        {
-                            name: '36px',
-                            value: '36'
-                        },
-                        {
-                            name: '42px',
-                            value: '42'
-                        },
-                        {
-                            name: '48px',
-                            value: '48'
-                        },
-                        {
-                            name: '72px',
-                            value: '72'
-                        },
-                        {
-                            name: '96px',
-                            value: '96'
-                        },
-                        {
-                            name: '128px',
-                            value: '128'
-                        }
-                    ],
-                    FONTS = [
-                        {
-                            name: 'Default',
-                            value: 'default'
-                        },
-                        {
-                            name: 'Bold',
-                            value: 'default-bold'
-                        },
-                        {
-                            name: 'Narrow',
-                            value: 'narrow'
-                        },
-                        {
-                            name: 'Narrow Bold',
-                            value: 'narrow-bold'
-                        },
-                        {
-                            name: 'Monospace',
-                            value: 'monospace'
-                        },
-                        {
-                            name: 'Monospace Bold',
-                            value: 'monospace-bold'
-                        }
-                    ]
+                    };
 
                 function getUserInput(form) {
                     return openmct.$injector.get('dialogService').getUserInput(form, {});
@@ -488,136 +378,25 @@ define(['lodash'], function (_) {
                     }
                 }
 
-                function getAvailableFontSizeOptions(selection) {
-                    let sizeOptions = 'big';
-
-                    selection.forEach(selectable => {
-                        if (selectable[0].context.item) {
-                            if (selectable[0].context.item.type.includes('plot') ||
-                            selectable[0].context.item.type.includes('table')) {
-                                sizeOptions = 'small';
-                            }
-                        }
-                    });
-
-                    if (sizeOptions === 'small') {
-                        return SMALL_FONT_SIZES;
-                    } else {
-                        return SMALL_FONT_SIZES.concat(LARGE_FONT_SIZES);
-                    }
-                }
-
-                function getFontSizeMenu(selectedParent, selection) {
-
-                    if (selection.length === 1) {
-                        let primary = selection[0][0];
-                        let type = primary.context.layoutItem.type;
-
-                        if (type === 'subobject-view') {
-                            let objectType = primary.context.item.type;
-
-                            if (objectType === 'layout' ||
-                                objectType === 'flexible-layout' ||
-                                objectType === 'tabs') {
-                                return;
-                            }
-                        }
-
-                        return {
-                            control: 'select-menu',
-                            domainObject: selectedParent,
-                            icon: "icon-font-size",
-                            applicableSelectedItems: selection,
-                            property: (selectionPath) => {
-                                return getPath(selectionPath) + '.fontSize';
-                            },
-                            title: "Set font size",
-                            options: getAvailableFontSizeOptions(selection)
-                        };
-                    } else {
-                        return {
-                            control: 'select-menu',
-                            domainObject: selectedParent,
-                            icon: "icon-font-size",
-                            applicableSelectedItems: selection.filter(selectionPath => {
-                                let type = selectionPath[0].context.layoutItem.type;
-
-                                if (type === 'line-view' || type === 'box-view') {
-                                    return false;
-                                } else if (type === 'subobject-view') {
-                                    let objectType = selectionPath[0].context.item.type;
-
-                                    if (objectType === 'layout' ||
-                                        objectType === 'flexible-layout' ||
-                                        objectType === 'tabs') {
-                                        return false;
-                                    }
-                                }
-                                return true;
-                            }),
-                            property: (selectionPath) => {
-                                return getPath(selectionPath) + '.fontSize';
-                            },
-                            title: "Set font size",
-                            options: getAvailableFontSizeOptions(selection)
-                        }
-                    }
-                }
-
-                function getFontMenu(selectedParent, selection) {
-                    if (selection.length === 1) {
-                        let primary = selection[0][0];
-                        let type = primary.context.layoutItem.type;
-
-                        if (type === 'subobject-view') {
-                            let objectType = primary.context.item.type;
-
-                            if (objectType === 'layout' ||
-                                objectType === 'flexible-layout' ||
-                                objectType === 'tabs') {
-                                return;
-                            }
-                        }
-
-                        return {
-                            control: 'select-menu',
-                            domainObject: selectedParent,
-                            icon: "icon-font",
-                            applicableSelectedItems: selection,
-                            property: (selectionPath) => {
-                                return getPath(selectionPath) + '.font';
-                            },
-                            title: "Set font style",
-                            options: FONTS
-                        }
-                    } else {
-                        return {
-                            control: 'select-menu',
-                            domainObject: selectedParent,
-                            icon: "icon-font",
-                            applicableSelectedItems: selection.filter(selectionPath => {
-                                let type = selectionPath[0].context.layoutItem.type;
-
-                                if (type === 'line-view' || type === 'box-view') {
-                                    return false;
-                                } else if (type === 'subobject-view') {
-                                    let objectType = selectionPath[0].context.item.type;
-
-                                    if (objectType === 'layout' ||
-                                    objectType === 'flexible-layout' ||
-                                    objectType === 'tabs') {
-                                        return false;
-                                    }
-                                }
-                                return true;
-                            }),
-                            property: (selectionPath) => {
-                                return getPath(selectionPath) + '.font';
-                            },
-                            title: "Set font style",
-                            options: FONTS
-                        }
-                    }
+                function getTextSizeMenu(selectedParent, selection) {
+                    const TEXT_SIZE = [8, 9, 10, 11, 12, 13, 14, 15, 16, 20, 24, 30, 36, 48, 72, 96, 128];
+                    return {
+                        control: "select-menu",
+                        domainObject: selectedParent,
+                        applicableSelectedItems: selection.filter(selectionPath => {
+                            let type = selectionPath[0].context.layoutItem.type;
+                            return type === 'text-view' || type === 'telemetry-view';
+                        }),
+                        property: function (selectionPath) {
+                            return getPath(selectionPath) + ".size";
+                        },
+                        title: "Set text size",
+                        options: TEXT_SIZE.map(size => {
+                            return {
+                                value: size + "px"
+                            };
+                        })
+                    };
                 }
 
                 function getTextButton(selectedParent, selection) {
@@ -630,7 +409,7 @@ define(['lodash'], function (_) {
                         property: function (selectionPath) {
                             return getPath(selectionPath);
                         },
-                        icon: "icon-pencil",
+                        icon: "icon-font",
                         title: "Edit text properties",
                         dialog: DIALOG_FORM.text
                     };
@@ -807,8 +586,7 @@ define(['lodash'], function (_) {
                     'display-mode': [],
                     'telemetry-value': [],
                     'style': [],
-                    'font-size': [],
-                    'font-family': [],
+                    'text-style': [],
                     'position': [],
                     'duplicate': [],
                     'remove': []
@@ -844,16 +622,6 @@ define(['lodash'], function (_) {
                         if (toolbar.viewSwitcher.length === 0) {
                             toolbar.viewSwitcher = [getViewSwitcherMenu(selectedParent, selectionPath, selectedObjects)];
                         }
-                        if (toolbar['font-size'].length === 0) {
-                            toolbar['font-size'] = [
-                                getFontSizeMenu(selectedParent, selectedObjects)
-                            ];
-                        }
-                        if (toolbar['font-family'].length === 0) {
-                            toolbar['font-family'] = [
-                                getFontMenu(selectedParent, selectedObjects)
-                            ];
-                        }
                     } else if (layoutItem.type === 'telemetry-view') {
                         if (toolbar['display-mode'].length === 0) {
                             toolbar['display-mode'] = [getDisplayModeMenu(selectedParent, selectedObjects)];
@@ -861,14 +629,9 @@ define(['lodash'], function (_) {
                         if (toolbar['telemetry-value'].length === 0) {
                             toolbar['telemetry-value'] = [getTelemetryValueMenu(selectionPath, selectedObjects)];
                         }
-                        if (toolbar['font-size'].length === 0) {
-                            toolbar['font-size'] = [
-                                getFontSizeMenu(selectedParent, selectedObjects)
-                            ];
-                        }
-                        if (toolbar['font-family'].length === 0) {
-                            toolbar['font-family'] = [
-                                getFontMenu(selectedParent, selectedObjects)
+                        if (toolbar['text-style'].length === 0) {
+                            toolbar['text-style'] = [
+                                getTextSizeMenu(selectedParent, selectedObjects)
                             ];
                         }
                         if (toolbar.position.length === 0) {
@@ -887,14 +650,9 @@ define(['lodash'], function (_) {
                             toolbar.viewSwitcher = [getViewSwitcherMenu(selectedParent, selectionPath, selectedObjects)];
                         }
                     } else if (layoutItem.type === 'text-view') {
-                        if (toolbar['font-size'].length === 0) {
-                            toolbar['font-size'] = [
-                                getFontSizeMenu(selectedParent, selectedObjects)
-                            ];
-                        }
-                        if (toolbar['font-family'].length === 0) {
-                            toolbar['font-family'] = [
-                                getFontMenu(selectedParent, selectedObjects)
+                        if (toolbar['text-style'].length === 0) {
+                            toolbar['text-style'] = [
+                                getTextSizeMenu(selectedParent, selectedObjects)
                             ];
                         }
                         if (toolbar.position.length === 0) {

src/plugins/displayLayout/components/BoxView.vue

@@ -29,7 +29,7 @@
     @endMove="() => $emit('endMove')"
 >
     <div
-        class="c-box-view u-style-receiver js-style-receiver"
+        class="c-box-view"
         :class="[styleClass]"
         :style="style"
     ></div>

src/plugins/displayLayout/components/DisplayLayout.vue

@@ -22,7 +22,7 @@
 
 <template>
 <div
-    class="l-layout u-style-receiver js-style-receiver"
+    class="l-layout"
     :class="{
         'is-multi-selected': selectedLayoutItems.length > 1,
         'allow-editing': isEditing
@@ -457,43 +457,15 @@ export default {
             this.objectViewMap = {};
             this.layoutItems.forEach(this.trackItem);
         },
-        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;
-                    }
-                }
-            });
-
-            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;
-
+            let keyString = this.openmct.objects.makeKeyString(child.identifier);
             if (this.isTelemetry(child)) {
-                type = 'telemetry-view';
-            } else {
-                type = 'subobject-view';
+                if (!this.telemetryViewMap[keyString] && !this.objectViewMap[keyString]) {
+                    this.addItem('telemetry-view', child);
+                }
+            } else if (!this.objectViewMap[keyString]) {
+                this.addItem('subobject-view', child);
             }
-
-            this.addItem(type, child);
         },
         removeChild(identifier) {
             let keyString = this.openmct.objects.makeKeyString(identifier);
@@ -587,17 +559,14 @@ export default {
             }
         },
         updateTelemetryFormat(item, format) {
-            let index = this.layoutItems.findIndex((layoutItem) => {
-                return layoutItem.id === item.id;
-            });
-
+            let index = this.layoutItems.findIndex(item);
             item.format = format;
             this.mutate(`configuration.items[${index}]`, item);
         },
         createNewDomainObject(domainObject, composition, viewType, nameExtension, model) {
             let identifier = {
                     key: uuid(),
-                    namespace: this.internalDomainObject.identifier.namespace
+                    namespace: domainObject.identifier.namespace
                 },
                 type = this.openmct.types.get(viewType),
                 parentKeyString = this.openmct.objects.makeKeyString(this.internalDomainObject.identifier),
@@ -612,13 +581,6 @@ export default {
                 object.composition.push(...composition);
             }
 
-            if (object.modified || object.persisted) {
-                object.modified = undefined;
-                object.persisted = undefined;
-                delete object.modified;
-                delete object.persisted;
-            }
-
             object.name = objectName;
             object.identifier = identifier;
             object.location = parentKeyString;

src/plugins/displayLayout/components/ImageView.vue

@@ -81,7 +81,6 @@ export default {
         style() {
             let backgroundImage = 'url(' + this.item.url + ')';
             let border = '1px solid ' + this.item.stroke;
-
             if (this.itemStyle) {
                 if (this.itemStyle.imageUrl !== undefined) {
                     backgroundImage = 'url(' + this.itemStyle.imageUrl + ')';

src/plugins/displayLayout/components/LayoutFrame.vue

@@ -25,14 +25,14 @@
     class="l-layout__frame c-frame"
     :class="{
         'no-frame': !item.hasFrame,
-        'u-inspectable': inspectable,
-        'is-in-small-container': size.width < 600 || size.height < 600
+        'u-inspectable': inspectable
     }"
     :style="style"
 >
     <slot></slot>
+
     <div
-        class="c-frame__move-bar"
+        class="c-frame-edit__move"
         @mousedown="isEditing ? startMove([1,1], [0,0], $event) : null"
     ></div>
 </div>
@@ -61,13 +61,6 @@ export default {
         }
     },
     computed: {
-        size() {
-            let {width, height} = this.item;
-            return {
-                width: (this.gridSize[0] * width),
-                height: (this.gridSize[1] * height)
-            };
-        },
         style() {
             let {x, y, width, height} = this.item;
             return {

src/plugins/displayLayout/components/LineView.vue

@@ -22,7 +22,7 @@
 
 <template>
 <div
-    class="l-layout__frame c-frame no-frame c-line-view"
+    class="l-layout__frame c-frame no-frame"
     :class="[styleClass]"
     :style="style"
 >
@@ -31,20 +31,14 @@
         height="100%"
     >
         <line
-            class="c-line-view__hover-indicator"
-            v-bind="linePosition"
-            vector-effect="non-scaling-stroke"
-        />
-        <line
-            class="c-line-view__line"
             v-bind="linePosition"
             :stroke="stroke"
-            vector-effect="non-scaling-stroke"
+            stroke-width="2"
         />
     </svg>
 
     <div
-        class="c-frame__move-bar"
+        class="c-frame-edit__move"
         @mousedown="startDrag($event)"
     ></div>
     <div
@@ -55,8 +49,7 @@
             class="c-frame-edit__handle"
             :class="startHandleClass"
             @mousedown="startDrag($event, 'start')"
-        >
-        </div>
+        ></div>
         <div
             class="c-frame-edit__handle"
             :class="endHandleClass"
@@ -75,18 +68,14 @@ const START_HANDLE_QUADRANTS = {
     1: 'c-frame-edit__handle--sw',
     2: 'c-frame-edit__handle--se',
     3: 'c-frame-edit__handle--ne',
-    4: 'c-frame-edit__handle--nw',
-    5: 'c-frame-edit__handle--nw',
-    6: 'c-frame-edit__handle--ne'
+    4: 'c-frame-edit__handle--nw'
 };
 
 const END_HANDLE_QUADRANTS = {
     1: 'c-frame-edit__handle--ne',
     2: 'c-frame-edit__handle--nw',
     3: 'c-frame-edit__handle--sw',
-    4: 'c-frame-edit__handle--se',
-    5: 'c-frame-edit__handle--sw',
-    6: 'c-frame-edit__handle--nw'
+    4: 'c-frame-edit__handle--se'
 };
 
 export default {
@@ -169,12 +158,6 @@ export default {
         },
         vectorQuadrant() {
             let {x, y, x2, y2} = this.position;
-            if (x2 === x) {
-                return 5; // Vertical line
-            }
-            if (y2 === y) {
-                return 6; // Horizontal line
-            }
             if (x2 > x) {
                 if (y2 < y) {
                     return 1;
@@ -187,27 +170,21 @@ export default {
             return 3;
         },
         linePosition() {
-            let pos = {};
-            switch(this.vectorQuadrant) {
-            case 1:
-            case 3:
-                // slopes up
-                pos = {x1: '0%', y1: '100%', x2: '100%', y2: '0%'};
-                break;
-            case 5:
-                // vertical
-                pos = {x1: '0%', y1: '0%', x2: '0%', y2: '100%'};
-                break;
-            case 6:
-                // horizontal
-                pos = {x1: '0%', y1: '0%', x2: '100%', y2: '0%'};
-                break;
-            default:
-                // slopes down
-                pos = {x1: '0%', y1: '0%', x2: '100%', y2: '100%'};
-                break;
-            }
-            return pos;
+            return this.vectorQuadrant % 2 !== 0
+                // odd vectorQuadrant slopes up
+                ? {
+                    x1: '0%',
+                    y1: '100%',
+                    x2: '100%',
+                    y2: '0%'
+                }
+                // even vectorQuadrant slopes down
+                : {
+                    x1: '0%',
+                    y1: '0%',
+                    x2: '100%',
+                    y2: '100%'
+                };
         }
     },
     watch: {
@@ -232,7 +209,8 @@ export default {
             layoutItem: this.item,
             index: this.index
         };
-        this.removeSelectable = this.openmct.selection.selectable(this.$el, this.context, this.initSelect);
+        this.removeSelectable = this.openmct.selection.selectable(
+            this.$el, this.context, this.initSelect);
     },
     destroyed() {
         if (this.removeSelectable) {
@@ -246,17 +224,12 @@ export default {
             document.body.addEventListener('mousemove', this.continueDrag);
             document.body.addEventListener('mouseup', this.endDrag);
             this.startPosition = [event.pageX, event.pageY];
-            let {x, y, x2, y2} = this.item;
-            this.dragPosition = {x, y, x2, y2};
-            if (x === x2 || y === y2) {
-                if (y > y2 || x < x2) {
-                    if (this.dragging === 'start') {
-                        this.dragging = 'end';
-                    } else if (this.dragging === 'end') {
-                        this.dragging = 'start';
-                    }
-                }
-            }
+            this.dragPosition = {
+                x: this.item.x,
+                y: this.item.y,
+                x2: this.item.x2,
+                y2: this.item.y2
+            };
             event.preventDefault();
         },
         continueDrag(event) {
@@ -290,7 +263,7 @@ export default {
         },
         calculateDragPosition(pxDeltaX, pxDeltaY) {
             let gridDeltaX = Math.round(pxDeltaX / this.gridSize[0]);
-            let gridDeltaY = Math.round(pxDeltaY / this.gridSize[1]);
+            let gridDeltaY = Math.round(pxDeltaY / this.gridSize[0]); // TODO: should this be gridSize[1]?
             let {x, y, x2, y2} = this.item;
             let dragPosition = {x, y, x2, y2};
 

src/plugins/displayLayout/components/SubobjectView.vue

@@ -35,8 +35,6 @@
         :object-path="currentObjectPath"
         :has-frame="item.hasFrame"
         :show-edit-view="false"
-        :font-size="item.fontSize"
-        :font="item.font"
     />
 </layout-frame>
 </template>
@@ -75,8 +73,6 @@ export default {
             y: position[1],
             identifier: domainObject.identifier,
             hasFrame: hasFrameByDefault(domainObject.type),
-            fontSize: 'default',
-            font: 'default',
             viewKey
         };
     },
@@ -124,6 +120,7 @@ export default {
             if (!this.context) {
                 return;
             }
+
             this.context.layoutItem = newItem;
         }
     },

src/plugins/displayLayout/components/TelemetryView.vue

@@ -30,19 +30,11 @@
 >
     <div
         v-if="domainObject"
-        class="u-style-receiver c-telemetry-view"
-        :class="{
-            styleClass,
-            'is-missing': domainObject.status === 'missing'
-        }"
+        class="c-telemetry-view"
+        :class="styleClass"
         :style="styleObject"
-        :data-font-size="item.fontSize"
-        :data-font="item.font"
         @contextmenu.prevent="showContextMenu"
     >
-        <div class="is-missing__indicator"
-             title="This item is missing"
-        ></div>
         <div
             v-if="showLabel"
             class="c-telemetry-view__label"
@@ -91,8 +83,7 @@ export default {
             stroke: "",
             fill: "",
             color: "",
-            fontSize: 'default',
-            font: 'default'
+            size: "13px"
         };
     },
     inject: ['openmct', 'objectPath'],
@@ -139,15 +130,10 @@ export default {
             return displayMode === 'all' || displayMode === 'value';
         },
         styleObject() {
-            let size;
-            //for legacy size support
-            if (!this.item.fontSize) {
-                size = this.item.size
-            }
-
             return Object.assign({}, {
-                size
+                fontSize: this.item.size
             }, this.itemStyle);
+
         },
         fieldName() {
             return this.valueMetadata && this.valueMetadata.name;

src/plugins/displayLayout/components/TextView.vue

@@ -29,9 +29,7 @@
     @endMove="() => $emit('endMove')"
 >
     <div
-        class="c-text-view u-style-receiver js-style-receiver"
-        :data-font-size="item.fontSize"
-        :data-font="item.font"
+        class="c-text-view"
         :class="[styleClass]"
         :style="style"
     >
@@ -49,14 +47,13 @@ export default {
         return {
             fill: '',
             stroke: '',
+            size: '13px',
             color: '',
             x: 1,
             y: 1,
             width: 10,
             height: 5,
-            text: element.text,
-            fontSize: 'default',
-            font: 'default'
+            text: element.text
         };
     },
     inject: ['openmct'],
@@ -87,14 +84,8 @@ export default {
     },
     computed: {
         style() {
-            let size;
-            //legacy size support
-            if (!this.item.fontSize) {
-                size = this.item.size;
-            }
-
             return Object.assign({
-                size
+                fontSize: this.item.size
             }, this.itemStyle);
         }
     },

src/plugins/displayLayout/components/box-and-line-views.scss

@@ -1,60 +0,0 @@
-.c-box-view {
-    border-width: $drawingObjBorderW !important;
-    display: flex;
-    align-items: stretch;
-
-    .c-frame & {
-        @include abs();
-    }
-}
-
-.c-line-view {
-    &.c-frame {
-        box-shadow: none !important;
-    }
-
-    .c-frame-edit {
-        border: none;
-    }
-
-    .c-handle-info {
-        background: rgba(#999, 0.2);
-        padding: 2px;
-        position: absolute;
-        top: 5px; left: 5px;
-        white-space: nowrap;
-    }
-
-    svg {
-        // Prevent clipping when line is horizontal and vertical
-        min-height: 1px;
-        min-width: 1px;
-        // Must use !important to counteract setting in normalize.min.css
-        overflow: visible;
-    }
-
-    &__line {
-        stroke-linecap: round;
-        stroke-width: $drawingObjBorderW;
-    }
-
-    &__hover-indicator {
-        display: none;
-        opacity: 0.5;
-        stroke: $editFrameColorHov;
-        stroke-width: $drawingObjBorderW + 4;
-    }
-
-    .is-editing & {
-        // Needed to allow line to be moved
-        $w: 4px;
-        min-width: $w;
-        min-height: $w;
-
-        &:hover {
-            [class*='__hover-indicator'] {
-                display: inline;
-            }
-        }
-    }
-}

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

@@ -0,0 +1,8 @@
+.c-box-view {
+    display: flex;
+    align-items: stretch;
+
+    .c-frame & {
+        @include abs();
+    }
+}

src/plugins/displayLayout/components/layout-frame.scss

@@ -7,13 +7,9 @@
     > *:first-child {
         flex: 1 1 auto;
     }
-
-    &.is-in-small-container {
-        //background: rgba(blue, 0.1);
-    }
 }
 
-.c-frame__move-bar {
+.c-frame-edit__move {
     display: none;
 }
 
@@ -33,7 +29,7 @@
             border: $editFrameSelectedBorder;
             box-shadow: $editFrameSelectedShdw;
 
-            .c-frame__move-bar {
+            .c-frame-edit__move {
                 cursor: move;
             }
         }
@@ -41,7 +37,7 @@
 
     /******************* DEFAULT STYLES FOR -EDIT__MOVE */
     // All object types
-    .c-frame__move-bar {
+    .c-frame-edit__move {
         @include abs();
         display: block;
     }
@@ -56,7 +52,7 @@
             transition-delay: $moveBarOutDelay;
         }
 
-        + .c-frame__move-bar {
+        + .c-frame-edit__move {
             display: none;
         }
 
@@ -65,14 +61,14 @@
     .l-layout {
         /******************* 0 - 1 ITEM SELECTED */
         &:not(.is-multi-selected) {
-            > .l-layout__frame {
+            > .l-layout__frame[s-selected] {
                 > .c-so-view.has-complex-content {
                     > .c-so-view__local-controls {
                         transition: transform $transOutTime ease-in-out;
                         transition-delay: $moveBarOutDelay;
                     }
 
-                    + .c-frame__move-bar {
+                    + .c-frame-edit__move {
                         transition: $transOut;
                         transition-delay: $moveBarOutDelay;
                         @include userSelectNone();
@@ -93,7 +89,7 @@
                             $lrOffset: 25%;
                             @include grippy($editFrameMovebarColorFg);
                             content: '';
-                            display: none;
+                            display: block;
                             position: absolute;
                             top: $tbOffset;
                             right: $lrOffset;
@@ -115,7 +111,7 @@
                             transition-delay: 0s;
                         }
 
-                        + .c-frame__move-bar {
+                        + .c-frame-edit__move {
                             transition: $transIn;
                             transition-delay: 0s;
                             height: $editFrameMovebarH;
@@ -123,19 +119,12 @@
                     }
                 }
             }
-            > .l-layout__frame[s-selected] {
-                > .c-so-view.has-complex-content {
-                    + .c-frame__move-bar:before {
-                        display: block;
-                    }
-                }
-            }
         }
 
         /******************* > 1 ITEMS SELECTED */
         &.is-multi-selected {
             .l-layout__frame[s-selected] {
-                > .c-so-view.has-complex-content + .c-frame__move-bar {
+                > .c-so-view.has-complex-content + .c-frame-edit__move {
                     display: block;
                 }
             }

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

@@ -26,15 +26,4 @@
         @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,18 +1,13 @@
 <template>
 <a
     class="l-grid-view__item c-grid-item"
-    :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
-    }"
+    :class="{ 'is-alias': item.isAlias === true }"
     :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
@@ -27,9 +22,6 @@
         </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,19 +7,13 @@
     <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-object-label__type-icon c-list-item__type-icon"
+                class="c-list-item__type-icon"
                 :class="item.type.cssClass"
-            >
-                <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>
+            ></div>
+            <div class="c-list-item__name-value">{{ item.model.name }}</div>
         </a>
     </td>
     <td class="c-list-item__type">

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

@@ -38,15 +38,7 @@
         // Object is an alias to an original.
         [class*='__type-icon'] {
             @include isAlias();
-        }
-    }
-
-    &.is-missing {
-        @include isMissing();
-
-        [class*='__type-icon'],
-        [class*='__details'] {
-            opacity: $opacityMissing;
+            color: $colorIconAliasForKeyFilter;
         }
     }
 
@@ -93,14 +85,15 @@
     body.desktop & {
         $transOutMs: 300ms;
         flex-flow: column nowrap;
-        transition: $transOutMs ease-in-out;
+        transition: background $transOutMs ease-in-out;
 
         &:hover {
-            filter: $filterItemHoverFg;
+            background: $colorItemBgHov;
             transition: $transIn;
 
             .c-grid-item__type-icon {
-                transform: scale(1.1);
+                filter: $colorKeyFilterHov;
+                transform: scale(1);
                 transition: $transInBounce;
             }
         }
@@ -110,7 +103,7 @@
         }
 
         &__controls {
-            align-items: baseline;
+            align-items: start;
             flex: 0 0 auto;
             order: 1;
             .c-info-button,
@@ -122,6 +115,7 @@
             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,17 +1,37 @@
 /******************************* LIST ITEM */
 .c-list-item {
-    &__type-icon {
-        color: $colorItemTreeIcon;
+    &__name a {
+        display: flex;
+
+        > * + * { margin-left: $interiorMarginSm; }
     }
 
-    &__name {
+    &__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;
+    }
+
+    &__name-value {
         @include ellipsize();
     }
 
     &.is-alias {
         // Object is an alias to an original.
         [class*='__type-icon'] {
-            @include isAlias();
+            &: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);
+            }
         }
     }
 }

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

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

src/plugins/imagery/components/ImageryViewLayout.vue

@@ -29,13 +29,13 @@
         >
         </div>
         <div class="c-imagery__control-bar">
-            <div class="c-imagery__timestamp u-style-receiver js-style-receiver">{{ getTime() }}</div>
+            <div class="c-imagery__timestamp">{{ getTime() }}</div>
             <div class="h-local-controls flex-elem">
-                <button
+                <a
                     class="c-button icon-pause pause-play"
                     :class="{'is-paused': paused()}"
                     @click="paused(!paused())"
-                ></button>
+                ></a>
             </div>
         </div>
     </div>
@@ -228,8 +228,8 @@ export default {
         subscribe() {
             this.unsubscribe = this.openmct.telemetry
                 .subscribe(this.domainObject, (datum) => {
-                    let parsedTimestamp = this.timeFormat.parse(datum);
-                    let bounds = this.openmct.time.bounds();
+                    let parsedTimestamp = this.timeFormat.parse(datum[this.timeKey]),
+                        bounds = this.openmct.time.bounds();
 
                     if(parsedTimestamp >= bounds.start && parsedTimestamp <= bounds.end) {
                         this.updateHistory(datum);

src/plugins/imagery/components/imagery-view-layout.scss

@@ -42,7 +42,6 @@
         height: 135px;
         overflow-x: auto;
         overflow-y: hidden;
-        padding-bottom: $interiorMarginSm;
 
         &.is-paused {
             background: rgba($colorPausedBg, 0.4);
@@ -100,7 +99,7 @@
 .c-imagery {
     .h-local-controls--overlay-content {
         position: absolute;
-        left: $interiorMargin; top: $interiorMargin;
+        right: $interiorMargin; top: $interiorMargin;
         z-index: 2;
         background: $colorLocalControlOvrBg;
         border-radius: $basicCr;

src/plugins/newFolderAction/newFolderAction.js

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

src/plugins/notebook/components/notebook-embed.vue

@@ -248,8 +248,7 @@ export default {
         previewEmbed() {
             const self = this;
             const previewAction = new PreviewAction(self.openmct);
-            this.openmct.objects.get(self.embed.domainObject.identifier)
-                .then(domainObject => previewAction.invoke([domainObject]));
+            previewAction.invoke(JSON.parse(self.embed.objectPath));
         },
         removeEmbed(success) {
             if (!success) {

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

@@ -2,16 +2,13 @@
 <div class="c-snapshots-h">
     <div class="l-browse-bar">
         <div class="l-browse-bar__start">
-            <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 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>
                 <PopupMenu v-if="snapshots.length > 0"
                            :popup-menu-items="popupMenuItems"

src/plugins/notebook/utils/notebook-entries.js

@@ -95,7 +95,8 @@ export const createNewEmbed = (snapshotMeta, snapshot = '') => {
         id: 'embed-' + date,
         name,
         snapshot,
-        type
+        type,
+        objectPath: JSON.stringify(objectPath)
     };
 }
 

src/plugins/notificationIndicator/components/NotificationIndicator.vue

@@ -1,6 +1,6 @@
 <template>
 <div
-    v-show="notifications.length > 0"
+    v-if="notifications.length > 0"
     class="c-indicator c-indicator--clickable icon-bell"
     :class="[severityClass]"
 >

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

@@ -21,34 +21,24 @@
 -->
 <div class="gl-plot plot-legend-{{legend.get('position')}} {{legend.get('expanded')? 'plot-legend-expanded' : 'plot-legend-collapsed'}}">
     <div class="c-plot-legend gl-plot-legend"
-         ng-class="{
-            'hover-on-plot': !!highlights.length,
-            'is-legend-hidden': legend.get('hideLegendWhenSmall')
-        }"
-    >
+         ng-class="{ 'hover-on-plot': !!highlights.length }"
+         ng-show="legend.get('position') !== 'hidden'">
         <div class="c-plot-legend__view-control gl-plot-legend__view-control c-disclosure-triangle is-enabled"
             ng-class="{ 'c-disclosure-triangle--expanded': legend.get('expanded') }"
             ng-click="legend.set('expanded', !legend.get('expanded'));">
         </div>
 
-        <div class="c-plot-legend__wrapper"
-            ng-class="{ 'is-cursor-locked':  !!lockHighlightPoint }">
+        <div class="c-plot-legend__wrapper">
 
             <!-- COLLAPSED PLOT LEGEND -->
             <div class="plot-wrapper-collapsed-legend"
-                 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>
+                 ng-class="{'icon-cursor-lock': !!lockHighlightPoint}">
                 <div class="plot-legend-item"
-                     ng-class="{
-                        'is-missing': series.domainObject.status === 'missing'
-                    }"
-                     ng-repeat="series in series track by $index"
-                >
+                      ng-repeat="series in series track by $index">
                     <div 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>
                     </div>
                     <div class="plot-series-value hover-value-enabled value-to-display-{{ legend.get('valueToShowWhenCollapsed') }} {{ series.closest.mctLimitState.cssClass }}"
@@ -65,10 +55,7 @@
             </div>
 
             <!-- EXPANDED PLOT 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>
+            <div class="plot-wrapper-expanded-legend">
                 <table>
                     <thead>
                         <tr>
@@ -89,17 +76,12 @@
                             </th>
                         </tr>
                     </thead>
-                    <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">
+                    <tr ng-repeat="series in series" class="plot-legend-item">
+                        <td class="plot-series-swatch-and-name"
+                            ng-class="{'icon-cursor-lock': !!lockHighlightPoint}">
                             <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>
 
@@ -135,7 +117,7 @@
     <div class="plot-wrapper-axis-and-display-area flex-elem grows">
         <div class="gl-plot-axis-area gl-plot-y has-local-controls"
              ng-style="{
-                 width: (tickWidth + 20) + 'px'
+                 width: (tickWidth + 30) + 'px'
              }">
 
             <div class="gl-plot-label gl-plot-y-label"
@@ -152,6 +134,7 @@
                     {{option.name}}
                 </option>
             </select>
+            
 
             <mct-ticks axis="yAxis">
                 <div ng-repeat="tick in ticks track by tick.value"
@@ -165,15 +148,17 @@
         </div>
         <div class="gl-plot-wrapper-display-area-and-x-axis"
              ng-style="{
-                 left: (tickWidth + 20) + 'px'
-             }">
+                     left: (tickWidth + 30) + 'px'
+                 }">
+            <div class="l-state-indicators">
+                <span class="l-state-indicators__alert-no-lad t-object-alert t-alert-unsynced icon-alert-triangle"
+                      title="This plot is not currently displaying the latest data. Reset pan/zoom to view latest data."></span>
+                <span class="l-state-indicators__alert-cursor-lock icon-cursor-lock"
+                      title="Telemetry point selection is locked. Click anywhere in the plot to unlock."
+                      ng-if="lockHighlightPoint"></span>
+            </div>
 
             <div class="gl-plot-display-area has-local-controls has-cursor-guides">
-                <div class="l-state-indicators">
-                    <span class="l-state-indicators__alert-no-lad t-object-alert t-alert-unsynced icon-alert-triangle"
-                          title="This plot is not currently displaying the latest data. Reset pan/zoom to view latest data."></span>
-                </div>
-
                 <mct-ticks axis="xAxis">
                     <div class="gl-plot-hash hash-v"
                          ng-repeat="tick in ticks track by tick.value"
@@ -232,9 +217,9 @@
                 </div>
             </div>
 
-            <div class="gl-plot-axis-area gl-plot-x has-local-controls">
+            <div class="gl-plot-axis-area gl-plot-x">
                 <mct-ticks axis="xAxis">
-                     <div ng-repeat="tick in ticks track by tick.text"
+                     <div ng-repeat="tick in ticks track by tick.value"
                           class="gl-plot-tick gl-plot-x-tick-label"
                           ng-style="{
                               left: (100 * (tick.value - min) / interval) + '%'
@@ -244,21 +229,9 @@
                      </div>
                 </mct-ticks>
 
-                <div
-                    class="gl-plot-label gl-plot-x-label"
-                    ng-class="{'icon-gear': isEnabledXKeyToggle()}"
-                >
+                <div class="gl-plot-label gl-plot-x-label">
                     {{ xAxis.get('label') }}
                 </div>
-
-                <select
-                    ng-show="plot.isEnabledXKeyToggle()"
-                    ng-model="selectedXKeyOption.key"
-                    ng-change="plot.toggleXKeyOption('{{selectedXKeyOption.key}}', series[0])"
-                    class="gl-plot-x-label__select local-controls--hidden"
-                    ng-options="option.key as option.name for option in xKeyOptions"
-                >
-                </select>
             </div>
 
         </div>

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 rendering method to join lines for this series.">Line Method</div>
+                         title="The line rendering style for this series.">Line Style</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.markerOptionsDisplayText() }}
+                        {{series.get('markers') ? "Enabled: " + series.get('markerSize') + "px" : "Disabled"}}
                     </div>
                 </li>
                 <li class="grid-row">
@@ -114,11 +114,6 @@
                      title="The position of the legend relative to the plot display area.">Position</div>
                 <div class="grid-cell value capitalize">{{ config.legend.get('position') }}</div>
             </li>
-            <li class="grid-row">
-                <div class="grid-cell label"
-                     title="Hide the legend when the plot is small">Hide when plot small</div>
-                <div class="grid-cell value">{{ config.legend.get('hideLegendWhenSmall') ? "Yes" : "No" }}</div>
-            </li>
             <li class="grid-row">
                 <div class="grid-cell label"
                      title="Show the legend expanded by default">Expand by Default</div>

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 rendering method to join lines for this series.">Line Method</div>
+                         title="The line rendering style for this series.">Line Style</div>
                     <div class="grid-cell value">
                         <select ng-model="form.interpolate">
                             <option value="none">None</option>
@@ -64,27 +64,12 @@
                 <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"/>
-                        <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>
+                    <div class="grid-cell value"><input type="checkbox" ng-model="form.markers"/></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"
@@ -174,6 +159,7 @@
                      title="The position of the legend relative to the plot display area.">Position</div>
                 <div class="grid-cell value">
                     <select ng-model="form.position">
+                        <option value="hidden">Hidden</option>
                         <option value="top">Top</option>
                         <option value="right">Right</option>
                         <option value="bottom">Bottom</option>
@@ -181,11 +167,6 @@
                     </select>
                 </div>
             </li>
-            <li class="grid-row">
-                <div class="grid-cell label"
-                     title="Hide the legend when the plot is small">Hide when plot small</div>
-                <div class="grid-cell value"><input type="checkbox" ng-model="form.hideLegendWhenSmall"/></div>
-            </li>
             <li class="grid-row">
                 <div class="grid-cell label"
                      title="Show the legend expanded by default">Expand by default</div>

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

@@ -41,7 +41,7 @@
         </button>
     </div>
 
-    <div class="l-view-section u-style-receiver js-style-receiver">
+    <div class="l-view-section">
         <div class="c-loading--overlay loading"
             ng-show="!!pending"></div>
         <mct-plot config="controller.config"

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

@@ -40,7 +40,7 @@
                 title="Toggle cursor guides">
         </button>
     </div>
-    <div class="l-view-section u-style-receiver js-style-receiver">
+    <div class="l-view-section">
         <div class="c-loading--overlay loading"
              ng-show="!!currentRequest.pending"></div>
         <div class="gl-plot child-frame u-inspectable"

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

@@ -68,6 +68,7 @@ function (
             this.listenTo(this.config.series, 'add', this.onSeriesAdd, this);
             this.listenTo(this.config.series, 'remove', this.onSeriesRemove, this);
             this.listenTo(this.config.yAxis, 'change:key', this.clearOffset, this);
+            this.listenTo(this.config.xAxis, 'change:key', this.clearOffset, this);
             this.listenTo(this.config.yAxis, 'change', this.scheduleDraw);
             this.listenTo(this.config.xAxis, 'change', this.scheduleDraw);
             this.$scope.$watch('highlights', this.scheduleDraw);
@@ -80,14 +81,7 @@ function (
 
     MCTChartController.$inject = ['$scope'];
 
-    MCTChartController.prototype.reDraw = function (mode, o, series) {
-        this.changeInterpolate(mode, o, series);
-        this.changeMarkers(mode, o, series);
-        this.changeAlarmMarkers(mode, o, series);
-    };
-
     MCTChartController.prototype.onSeriesAdd = function (series) {
-        this.listenTo(series, 'change:xKey', this.reDraw, this);
         this.listenTo(series, 'change:interpolate', this.changeInterpolate, this);
         this.listenTo(series, 'change:markers', this.changeMarkers, this);
         this.listenTo(series, 'change:alarmMarkers', this.changeAlarmMarkers, this);
@@ -377,8 +371,7 @@ function (
             chartElement.getBuffer(),
             chartElement.color().asRGBAArray(),
             chartElement.count,
-            chartElement.series.get('markerSize'),
-            chartElement.series.get('markerShape')
+            chartElement.series.get('markerSize')
         );
     };
 
@@ -402,10 +395,9 @@ function (
                 this.offset.yVal(highlight.point, highlight.series)
             ]),
             color = highlight.series.get('color').asRGBAArray(),
-            pointCount = 1,
-            shape = highlight.series.get('markerShape');
+            pointCount = 1;
 
-        this.drawAPI.drawPoints(points, color, pointCount, HIGHLIGHT_SIZE, shape);
+        this.drawAPI.drawPoints(points, color, pointCount, HIGHLIGHT_SIZE);
     };
 
     MCTChartController.prototype.drawRectangles = function () {

src/plugins/plot/src/configuration/LegendModel.js

@@ -48,7 +48,6 @@ define([
             return {
                 position: 'top',
                 expandByDefault: false,
-                hideLegendWhenSmall: false,
                 valueToShowWhenCollapsed: 'nearestValue',
                 showTimestampWhenExpanded: true,
                 showValueWhenExpanded: true,

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

@@ -25,14 +25,12 @@ define([
     'lodash',
     '../configuration/Model',
     '../lib/extend',
-    'EventEmitter',
-    '../draw/MarkerShapes'
+    'EventEmitter'
 ], function (
     _,
     Model,
     extend,
-    EventEmitter,
-    MARKER_SHAPES
+    EventEmitter
 ) {
 
     /**
@@ -58,7 +56,6 @@ 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
@@ -104,7 +101,6 @@ define([
                 xKey: options.collection.plot.xAxis.get('key'),
                 yKey: range.key,
                 markers: true,
-                markerShape: 'point',
                 markerSize: 2.0,
                 alarmMarkers: true
             };
@@ -414,31 +410,6 @@ define([
             } else {
                 this.filters = deepCopiedFilters;
             }
-        },
-        getDisplayRange: function (xKey) {
-            const unsortedData = this.data;
-            this.data = [];
-            unsortedData.forEach(point => this.add(point, false));
-
-            const minValue = this.getXVal(this.data[0]);
-            const maxValue = this.getXVal(this.data[this.data.length-1]);
-
-            return {
-                min: minValue,
-                max: maxValue
-            };
-        },
-        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/configuration/XAxisModel.js

@@ -48,7 +48,6 @@ define([
                 this.set('range', this.get('range'));
             }
             this.listenTo(this, 'change:key', this.changeKey, this);
-            this.listenTo(this, 'resetSeries', this.resetSeries, this);
         },
         changeKey: function (newKey) {
             var series = this.plot.series.first();
@@ -63,13 +62,8 @@ define([
                 });
                 this.set('label', newKey);
             }
-
             this.plot.series.forEach(function (plotSeries) {
                 plotSeries.set('xKey', newKey);
-            });
-        },
-        resetSeries: function () {
-            this.plot.series.forEach(function (plotSeries) {
                 plotSeries.reset();
             });
         },

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

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

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

@@ -23,64 +23,30 @@
 
 define([
     'EventEmitter',
-    '../lib/eventHelpers',
-    './MarkerShapes'
+    '../lib/eventHelpers'
 ], function (
     EventEmitter,
-    eventHelpers,
-    MARKER_SHAPES
+    eventHelpers
 ) {
 
     // WebGL shader sources (for drawing plain colors)
-    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;
-        }
-    `;
+    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');
 
     /**
      * Create a draw api utilizing WebGL.
@@ -124,7 +90,6 @@ 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);
@@ -140,7 +105,6 @@ 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");
@@ -150,6 +114,9 @@ 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);
@@ -171,18 +138,14 @@ define([
             ((v - this.origin[1]) / this.dimensions[1]) * this.height;
     };
 
-    DrawWebGL.prototype.doDraw = function (drawType, buf, color, points, shape) {
+    DrawWebGL.prototype.doDraw = function (drawType, buf, color, points) {
         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);
     };
 
@@ -247,12 +210,12 @@ define([
      * Draw the buffer as points.
      *
      */
-    DrawWebGL.prototype.drawPoints = function (buf, color, points, pointSize, shape) {
+    DrawWebGL.prototype.drawPoints = function (buf, color, points, pointSize) {
         if (this.isContextLost) {
             return;
         }
         this.gl.uniform1f(this.uPointSize, pointSize);
-        this.doDraw(this.gl.POINTS, buf, color, points, shape);
+        this.doDraw(this.gl.POINTS, buf, color, points);
     };
 
     /**

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

@@ -1,90 +0,0 @@
-/*****************************************************************************
- * 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/PlotLegendFormController.js

@@ -32,11 +32,6 @@ define([
                 modelProp: 'position',
                 objectPath: 'configuration.legend.position'
             },
-            {
-                modelProp: 'hideLegendWhenSmall',
-                coerce: Boolean,
-                objectPath: 'configuration.legend.hideLegendWhenSmall'
-            },
             {
                 modelProp: 'expandByDefault',
                 coerce: Boolean,

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

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

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

@@ -71,6 +71,8 @@ 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 () {
@@ -81,6 +83,11 @@ 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;
 
@@ -101,32 +108,12 @@ define([
         this.listenTo(this.$scope, 'plot:tickWidth', this.onTickWidthChange, this);
         this.listenTo(this.$scope, 'plot:highlight:set', this.onPlotHighlightSet, this);
         this.listenTo(this.$scope, 'plot:reinitializeCanvas', this.initCanvas, this);
-        this.listenTo(this.config.xAxis, 'resetSeries', this.setUpXAxisOptions, this);
         this.listenTo(this.config.xAxis, 'change:displayRange', this.onXAxisChange, this);
         this.listenTo(this.config.yAxis, 'change:displayRange', this.onYAxisChange, this);
 
-        this.setUpXAxisOptions();
         this.setUpYAxisOptions();
     };
 
-    MCTPlotController.prototype.setUpXAxisOptions = function () {
-        const xAxisKey = this.config.xAxis.get('key');
-
-        if (this.$scope.series.length === 1) {
-            let metadata = this.$scope.series[0].metadata;
-
-            this.$scope.xKeyOptions = metadata
-                .valuesForHints(['domain'])
-                .map(function (o) {
-                    return {
-                        name: o.name,
-                        key: o.key
-                    };
-                });
-            this.$scope.selectedXKeyOption = this.getXKeyOption(xAxisKey);
-        }
-    };
-
     MCTPlotController.prototype.setUpYAxisOptions = function () {
         if (this.$scope.series.length === 1) {
             let metadata = this.$scope.series[0].metadata;
@@ -256,16 +243,12 @@ 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 (event.altKey) {
+        if (this.allowPan) {
             return this.startPan($event);
-        } else {
+        }
+        if (this.allowMarquee) {
             return this.startMarquee($event);
         }
     };
@@ -278,11 +261,11 @@ define([
             this.$scope.lockHighlightPoint = !this.$scope.lockHighlightPoint;
         }
 
-        if (this.pan) {
+        if (this.allowPan) {
             return this.endPan($event);
         }
 
-        if (this.marquee) {
+        if (this.allowMarquee) {
             return this.endMarquee($event);
         }
     };
@@ -306,9 +289,6 @@ define([
     };
 
     MCTPlotController.prototype.startMarquee = function ($event) {
-        this.$canvas.removeClass('plot-drag');
-        this.$canvas.addClass('plot-marquee');
-
         this.trackMousePosition($event);
         if (this.positionOverPlot) {
             this.freeze();
@@ -464,9 +444,6 @@ define([
     };
 
     MCTPlotController.prototype.startPan = function ($event) {
-        this.$canvas.addClass('plot-drag');
-        this.$canvas.removeClass('plot-marquee');
-
         this.trackMousePosition($event);
         this.freeze();
         this.pan = {
@@ -509,6 +486,32 @@ 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);
@@ -540,32 +543,6 @@ define([
         this.cursorGuide = !this.cursorGuide;
     };
 
-    MCTPlotController.prototype.getXKeyOption = function (key) {
-        return this.$scope.xKeyOptions.find(option => option.key === key);
-    };
-
-    MCTPlotController.prototype.isEnabledXKeyToggle = function () {
-        const isSinglePlot = this.$scope.xKeyOptions && this.$scope.xKeyOptions.length > 1 && this.$scope.series.length === 1;
-        const isFrozen = this.config.xAxis.get('frozen');
-        const inRealTimeMode = this.config.openmct.time.clock();
-
-        return isSinglePlot && !isFrozen && !inRealTimeMode;
-    };
-
-    MCTPlotController.prototype.toggleXKeyOption = function (lastXKey, series) {
-        const selectedXKey = this.$scope.selectedXKeyOption.key;
-        const dataForSelectedXKey = series.data
-            ? series.data[0][selectedXKey]
-            : undefined;
-
-        if (dataForSelectedXKey !== undefined) {
-            this.config.xAxis.set('key', selectedXKey);
-        } else {
-            this.config.openmct.notifications.error('Cannot change x-axis view as no data exists for this view type.');
-            this.$scope.selectedXKeyOption.key = lastXKey;
-        }
-    };
-
     MCTPlotController.prototype.toggleYAxisLabel = function (label, options, series) {
         let yAxisObject = options.filter(o => o.name === label)[0];
 

src/plugins/plot/src/plot/MCTTicksController.js

@@ -122,7 +122,6 @@ define([
             this.tickUpdate = false;
             this.listenTo(this.axis, 'change:displayRange', this.updateTicks, this);
             this.listenTo(this.axis, 'change:format', this.updateTicks, this);
-            this.listenTo(this.axis, 'change:key', this.updateTicksForceRegeneration, this);
             this.listenTo(this.$scope, '$destroy', this.stopListening, this);
             this.updateTicks();
         }
@@ -134,18 +133,12 @@ define([
 
     /**
      * Determine whether ticks should be regenerated for a given range.
-     * Ticks are updated
-     * a) if they don't exist,
-     * b) if existing ticks are outside of given range,
-     * c) if range exceeds size of tick range by more than one tick step,
-     * d) if forced to regenerate (ex. changing x-axis metadata).
-     *
+     * Ticks are updated a) if they don't exist, b) if the existing ticks are
+     * outside of given range, or c) if the range exceeds the size of the tick
+     * range by more than one tick step.
      * @private
      */
-    MCTTicksController.prototype.shouldRegenerateTicks = function (range, forceRegeneration) {
-        if (forceRegeneration) {
-            return true;
-        }
+    MCTTicksController.prototype.shouldRegenerateTicks = function (range) {
         if (!this.tickRange || !this.$scope.ticks || !this.$scope.ticks.length) {
             return true;
         }
@@ -173,11 +166,7 @@ define([
         return ticks(range.min, range.max, number);
     };
 
-    MCTTicksController.prototype.updateTicksForceRegeneration = function () {
-        this.updateTicks(true);
-    }
-
-    MCTTicksController.prototype.updateTicks = function (forceRegeneration = false) {
+    MCTTicksController.prototype.updateTicks = function () {
         var range = this.axis.get('displayRange');
         if (!range) {
             delete this.$scope.min;
@@ -195,7 +184,7 @@ define([
         this.$scope.min = range.min;
         this.$scope.max = range.max;
         this.$scope.interval = Math.abs(range.min - range.max);
-        if (this.shouldRegenerateTicks(range, forceRegeneration)) {
+        if (this.shouldRegenerateTicks(range)) {
             var newTicks = this.getTicks();
             this.tickRange = {
                 min: Math.min.apply(Math, newTicks),
@@ -253,7 +242,6 @@ define([
             this.$scope.$emit('plot:tickWidth', tickWidth);
             this.shouldCheckWidth = false;
         }
-
         this.$scope.$digest();
         this.tickUpdate = false;
     };

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

@@ -90,7 +90,7 @@ define([
 
     PlotController.prototype.followTimeConductor = function () {
         this.listenTo(this.openmct.time, 'bounds', this.updateDisplayBounds, this);
-        this.listenTo(this.openmct.time, 'timeSystem', this.syncXAxisToTimeSystem, this);
+        this.listenTo(this.openmct.time, 'timeSystem', this.onTimeSystemChange, this);
         this.synchronized(true);
     };
 
@@ -130,9 +130,6 @@ define([
     };
 
     PlotController.prototype.addSeries = function (series) {
-        this.listenTo(series, 'change:xKey', function (xKey) {
-            this.setDisplayRange(series, xKey);
-        }, this);
         this.listenTo(series, 'change:yKey', function () {
             this.loadSeriesData(series);
         }, this);
@@ -144,16 +141,6 @@ define([
         this.loadSeriesData(series);
     };
 
-
-    PlotController.prototype.setDisplayRange = function (series, xKey) {
-        if (this.config.series.models.length !== 1) {
-            return;
-        }
-
-        const displayRange = series.getDisplayRange(xKey);
-        this.config.xAxis.set('range', displayRange);
-    };
-
     PlotController.prototype.removeSeries = function (plotSeries) {
         this.stopListening(plotSeries);
     };
@@ -173,9 +160,8 @@ define([
         return config;
     };
 
-    PlotController.prototype.syncXAxisToTimeSystem = function (timeSystem) {
+    PlotController.prototype.onTimeSystemChange = function (timeSystem) {
         this.config.xAxis.set('key', timeSystem.key);
-        this.config.xAxis.emit('resetSeries');
     };
 
     PlotController.prototype.destroy = function () {
@@ -197,8 +183,7 @@ define([
             plotSeries.load({
                 size: this.$element[0].offsetWidth,
                 start: range.min,
-                end: range.max,
-                domain: this.config.xAxis.get('key')
+                end: range.max
             })
                 .then(this.stopLoading.bind(this));
             if (purge) {
@@ -211,17 +196,10 @@ define([
      * Track latest display bounds.  Forces update when not receiving ticks.
      */
     PlotController.prototype.updateDisplayBounds = function (bounds, isTick) {
-        const xAxisKey = this.config.xAxis.get('key');
-        const timeSystem = this.openmct.time.timeSystem();
-        const newRange = {
+        var newRange = {
             min: bounds.start,
             max: bounds.end
         };
-
-        if (xAxisKey !== timeSystem.key) {
-            this.syncXAxisToTimeSystem(timeSystem);
-        }
-
         this.config.xAxis.set('range', newRange);
         if (!isTick) {
             this.skipReloadOnInteraction = true;

src/plugins/plotlyPlot/PlotlyViewProvider.js

@@ -0,0 +1,72 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2019, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import PlotlyViewLayout from './components/PlotlyViewLayout.vue';
+import Vue from 'vue';
+
+export default function PlotlyViewProvider(openmct) {
+    return {
+        key: 'plotlyPlot',
+        name: 'Plotly Plot',
+        cssClass: 'icon-plot-overlay',
+        canView: function (domainObject) {
+            return domainObject.type === 'plotlyPlot';
+        },
+        canEdit: function (domainObject) {
+            return domainObject.type === 'plotlyPlot';
+        },
+        view: function (domainObject) {
+            let component;
+
+            return {
+                show: function (element, isEditing) {
+                    component =  new Vue({
+                        provide: {
+                            openmct,
+                            domainObject
+                        },
+                        el: element,
+                        components: {
+                            PlotlyViewLayout
+                        },
+                        data() {
+                            return {
+                                isEditing
+                            }
+                        },
+                        template: '<plotly-view-layout :isEditing="isEditing"></plotly-view-layout>'
+                    });
+                },
+                onEditModeChange: function (isEditing) {
+                    component.isEditing = isEditing;
+                },
+                destroy: function (element) {
+                    component.$destroy();
+                    component = undefined;
+                }
+            };
+        },
+        priority: function () {
+            return 1;
+        }
+    };
+}

src/plugins/plotlyPlot/components/PlotlyViewLayout.vue

@@ -0,0 +1,317 @@
+<template>
+<div :id="plotId"
+     class="l-view-section">
+</div>
+</template>
+
+<script>
+// import Plotly from 'plotly.js-gl2d-dist-min';
+import Plotly from 'plotly.js-basic-dist-min';
+import BoundedTableRowCollection from '../../telemetryTable/collections/BoundedTableRowCollection';
+import TelemetryTableRow from '../../telemetryTable/TelemetryTableRow';
+import TelemetryTableColumn from '../../telemetryTable/TelemetryTableColumn';
+
+export default {
+    inject: ['openmct', 'domainObject'],
+    data: function () {
+        return {
+            bounds: this.openmct.time.bounds(),
+            plotData: {},
+            outstandingRequests: 0,
+            subscriptions: {},
+            plotComposition: undefined,
+            timestampKey: this.openmct.time.timeSystem().key,
+            yAxisLabel: '',
+            plotId: this.openmct.objects.makeKeyString(this.domainObject.identifier)
+        }
+    },
+    computed: {
+        getContainerHeight: function () {
+            return this.plotElement.parentNode.offsetHeight - 5;
+        },
+        getContainerWidth: function () {
+            return this.plotElement.parentNode.offsetWidth - 5;
+        }
+    },
+    mounted() {
+        this.plotElement = document.getElementById(this.plotId);
+        this.openmct.time.on('bounds', this.updateDomain);
+        this.openmct.time.on('bounds', this.updateData);
+
+        this.loadComposition();
+        this.createPlot();
+
+        this.boundedRows = {};
+        this.limitEvaluators = {};
+        this.columnMaps = {};
+        this.drawBuffers = {};
+        this.telemetryObjects = [];
+        this.subscriptions = {};
+        this.boundedRowsUnlisteners = {};
+        this.traceIndices = {};
+    },
+
+    destroyed() {
+        Object.values(this.subscriptions)
+            .forEach(subscription => subscription());
+
+        this.openmct.time.off('bounds', this.updateDomain);
+        this.openmct.time.off('bounds', this.updateData);
+
+        Object.values(this.boundedRowsUnlisteners).forEach((unlisteners) => {
+            unlisteners.forEach(unlistener => unlistener());
+        });
+
+        this.plotComposition.off('add', this.addTelemetryObject);
+        this.plotComposition.off('remove', this.removeTelemetryObject);
+    },
+    methods: {
+        loadComposition() {
+            this.plotComposition = this.openmct.composition.get(this.domainObject);
+            this.plotComposition.on('add', this.addTelemetryObject);
+            this.plotComposition.on('remove', this.removeTelemetryObject);
+            this.plotComposition.load()
+        },
+        addTelemetryObject(telemetryObject) {
+            this.telemetryObjects.push(telemetryObject);
+            let keyString = this.openmct.objects.makeKeyString(telemetryObject.identifier);
+            this.addTraceForObject(telemetryObject);
+
+            this.requestData(telemetryObject);
+            let subscription = this.subscribe(telemetryObject);
+            this.subscriptions[keyString] = subscription;
+        },
+        removeTelemetryObject(identifier) {
+            const keyString = this.openmct.objects.makeKeyString(identifier);
+            const index = this.telemetryObjects.findIndex(object => identifier.key === object.identifier.key);
+            this.unsubscribe(keyString);
+            this.removeTraceForObject(this.telemetryObjects[index]);
+            this.telemetryObjects = this.telemetryObjects.filter(object => !(identifier.key === object.identifier.key));
+            if (!this.telemetryObjects.length) {
+                Plotly.purge(this.plotElement);
+                this.createPlot();
+            }
+        },
+        updateDomain(bounds, isTick) {
+            let newDomain = {
+                'xaxis.range': [
+                    bounds.start,
+                    bounds.end
+                ]
+            };
+            Plotly.relayout(this.plotElement, newDomain);
+        },
+        updateData(bounds, isTick) {
+            if (!isTick) {
+                this.clearData();
+                this.telemetryObjects.forEach(telemetryObject => this.requestData(telemetryObject));
+            }
+        },
+        clearData() {
+            this.telemetryObjects.forEach(telemetryObject => this.resetTraceForObject(telemetryObject));
+        },
+        requestData(telemetryObject) {
+            return this.openmct.telemetry.request(telemetryObject)
+                .then(telemetryData => {
+                    const keyString = this.openmct.objects.makeKeyString(telemetryObject.identifier);
+                    let columnMap = this.columnMaps[keyString];
+                    let limitEvaluator = this.limitEvaluators[keyString];
+                    const telemetryRows = telemetryData.map(datum => new TelemetryTableRow(datum, columnMap, keyString, limitEvaluator));
+                    this.boundedRows[keyString].add(telemetryRows);
+                });
+        },
+        subscribe(telemetryObject) {
+            const keyString = this.openmct.objects.makeKeyString(telemetryObject.identifier);
+            let columnMap = this.columnMaps[keyString];
+            let limitEvaluator = this.limitEvaluators[keyString];
+
+            return this.openmct.telemetry.subscribe(telemetryObject, (datum) => {
+                let newRow = new TelemetryTableRow(datum, columnMap, keyString, limitEvaluator);
+                this.boundedRows[keyString].add(newRow);
+            });
+        },
+        unsubscribe(keyString) {
+            this.subscriptions[keyString]();
+            delete this.subscriptions[keyString];
+        },
+        createPlot() {
+            let timeSystem = this.openmct.time.timeSystem();
+            let bounds = this.openmct.time.bounds();
+            let formatMetadata = {
+                key: timeSystem.key,
+                name: timeSystem.name,
+                format: timeSystem.timeFormat
+            }
+            this.timeFormatter = this.openmct.telemetry.getValueFormatter(formatMetadata);
+            let xRange = [
+                bounds.start,
+                bounds.end
+            ];
+
+            let layout = {
+                hovermode: 'compare',
+                hoverdistance: -1,
+                autosize: true,
+                showlegend: true,
+                legend: {
+                    y: 1.07,
+                    "orientation": "h"
+                },
+                height: this.getContainerHeight,
+                font: {
+                    family: "'Helvetica Neue', Helvetica, Arial, sans-serif",
+                    size: "12px",
+                    color: "#aaa"
+                },
+                xaxis: {
+                    title: timeSystem.name,
+                    type: 'date',
+                    zeroline: false,
+                    showgrid: false,
+                    range: xRange
+                },
+                yaxis: {
+                    zeroline: false,
+                    showgrid: false,
+                    tickwidth: 3,
+                    tickcolor: 'transparent',
+                    autorange: true,
+                    visible: false
+                },
+                margin: {
+                    l: 40,
+                    r: 5,
+                    b: 40,
+                    t: 0
+                },
+                paper_bgcolor: 'transparent',
+                plot_bgcolor: 'transparent'
+            };
+            Plotly.newPlot(
+                this.plotElement,
+                [],
+                layout,
+                {
+                    displayModeBar: true, // turns off hover-activated toolbar
+                    staticPlot: false // turns off hover effects on datapoints
+                }
+            );
+
+        },
+        resetTraceForObject(telemetryObject) {
+            this.removeTraceForObject(telemetryObject);
+            this.addTraceForObject(telemetryObject);
+        },
+        removeTraceForObject(telemetryObject) {
+            let keyString = this.openmct.objects.makeKeyString(telemetryObject.identifier);
+            let index = this.traceIndices[keyString];
+            Plotly.deleteTraces(this.plotElement, index);
+
+            delete this.traceIndices[keyString];
+            this.recalculateTraceIndices();
+
+            this.boundedRowsUnlisteners[keyString].forEach((unlistener) => unlistener());
+        },
+        addTraceForObject(telemetryObject) {
+            let keyString = this.openmct.objects.makeKeyString(telemetryObject.identifier);
+            let boundedRows = new BoundedTableRowCollection(this.openmct);
+            this.boundedRows[keyString] = boundedRows;
+
+            this.traceIndices[keyString] = Object.keys(this.traceIndices).length;
+            this.recalculateTraceIndices();
+
+            Plotly.addTraces(this.plotElement, {
+                x: [],
+                y: [],
+                name: telemetryObject.name,
+                type: "scattergl",
+                mode: 'lines+markers',
+                marker: {
+                    size: 5
+                },
+                line: {
+                    shape: 'linear',
+                    width: 1.5
+                }
+            });
+
+            const metadataValues = this.openmct.telemetry.getMetadata(telemetryObject).values();
+
+            let columnMap = metadataValues.reduce((map, metadatum) => {
+                let column = new TelemetryTableColumn(this.openmct, metadatum);
+                map[metadatum.key] = column;
+                return map;
+            }, {});
+            const limitEvaluator = this.openmct.telemetry.limitEvaluator(telemetryObject);
+            const valueFormatter = this.openmct.telemetry.getValueFormatter(this.openmct.telemetry.getMetadata(telemetryObject).valuesForHints(['range'])[0]);
+            let layout_update = {
+                yaxis: {title: valueFormatter.valueMetadata.name, visible: true}
+            };
+            Plotly.update(this.plotElement, {}, layout_update)
+            this.columnMaps[keyString] = columnMap;
+            this.limitEvaluators[keyString] = limitEvaluator;
+
+            let timeSystemKey = this.openmct.time.timeSystem().key;
+            let drawBuffer = {
+                keyString,
+                x: [],
+                y: []
+            };
+
+            this.drawBuffers[keyString] = drawBuffer;
+
+            const addRow = (rows) => {
+                if (rows instanceof Array) {
+                    rows.forEach(row => {
+                        drawBuffer.x.push(row.datum[timeSystemKey]);
+                        drawBuffer.y.push(valueFormatter.format(row.datum));
+                    })
+                } else {
+                    drawBuffer.x.push(rows.datum[timeSystemKey]);
+                    drawBuffer.y.push(valueFormatter.format(rows.datum));
+                }
+                this.scheduleDraw();
+            }
+
+            boundedRows.on('add', addRow);
+            this.boundedRowsUnlisteners[keyString] = [];
+
+            this.boundedRowsUnlisteners[keyString].push(() => {
+                boundedRows.off('add', addRow);
+            })
+        },
+        recalculateTraceIndices() {
+            Object.keys(this.traceIndices).forEach((key, indexOfKey) => {
+                this.traceIndices[key] = indexOfKey;
+            });
+        },
+        scheduleDraw() {
+            if (!this.drawing) {
+                this.drawing = true;
+                requestAnimationFrame(() => {
+                    let dataForXAxes = [];
+                    let dataForYAxes = [];
+                    let traceIndices = [];
+                    Object.values(this.drawBuffers).forEach((drawBuffer) => {
+                        dataForXAxes.push(drawBuffer.x);
+                        dataForYAxes.push(drawBuffer.y);
+                        traceIndices.push(this.traceIndices[drawBuffer.keyString]);
+                        drawBuffer.x = [];
+                        drawBuffer.y = [];
+                    });
+                    Plotly.extendTraces(
+                        this.plotElement,
+                        {
+                            x: dataForXAxes,
+                            y: dataForYAxes
+                        },
+                        traceIndices
+                    );
+
+                    this.drawing = false;
+                });
+            }
+        }
+    }
+}
+</script>

src/plugins/plotlyPlot/components/plotly.scss

@@ -0,0 +1,3 @@
+.plot svg {
+}
+

src/plugins/plotlyPlot/plugin.js

@@ -0,0 +1,17 @@
+import PlotlyViewProvider from './PlotlyViewProvider';
+
+export default function plugin() {
+    return function install(openmct) {
+        openmct.objectViews.addProvider(new PlotlyViewProvider(openmct));
+
+        openmct.types.addType('plotlyPlot', {
+            name: "Plotly Plot",
+            description: "Simple plot rendered by plotly.js",
+            creatable: true,
+            cssClass: 'icon-plot-overlay',
+            initialize: function (domainObject) {
+                domainObject.composition = [];
+            }
+        });
+    };
+}

src/plugins/plugins.js

@@ -34,6 +34,7 @@ define([
     './URLIndicatorPlugin/URLIndicatorPlugin',
     './telemetryMean/plugin',
     './plot/plugin',
+    './plotlyPlot/plugin',
     './telemetryTable/plugin',
     './staticRootPlugin/plugin',
     './notebook/plugin',
@@ -69,6 +70,7 @@ define([
     URLIndicatorPlugin,
     TelemetryMean,
     PlotPlugin,
+    PlotlyPlotPlugin,
     TelemetryTablePlugin,
     StaticRootPlugin,
     Notebook,
@@ -177,8 +179,8 @@ define([
     plugins.ExampleImagery = ExampleImagery;
     plugins.ImageryPlugin = ImageryPlugin;
     plugins.Plot = PlotPlugin;
+    plugins.PlotlyPlot = PlotlyPlotPlugin.default;
     plugins.TelemetryTable = TelemetryTablePlugin;
-
     plugins.SummaryWidget = SummaryWidget;
     plugins.TelemetryMean = TelemetryMean;
     plugins.URLIndicator = URLIndicatorPlugin;

src/plugins/tabs/README.md

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

src/plugins/tabs/components/tabs.scss

@@ -17,19 +17,6 @@
             margin-right: $interiorMarginSm;
             opacity: 0.7;
         }
-
-        &__label {
-            flex: 1 1 auto;
-        }
-
-        &__close-btn {
-            flex: 0 0 auto;
-            pointer-events: all;
-        }
-
-        > * + * {
-            margin-left: $interiorMargin;
-        }
     }
 
     &__object-holder {

src/plugins/tabs/components/tabs.vue

@@ -3,7 +3,7 @@
     <div
         class="c-tabs-view__tabs-holder c-tabs"
         :class="{
-            'is-dragging': isDragging && allowEditing,
+            'is-dragging': isDragging,
             'is-mouse-over': allowDrop
         }"
     >
@@ -19,21 +19,18 @@
         >
             Drag objects here to add them to this view.
         </div>
-        <div
+        <button
             v-for="(tab,index) in tabsList"
             :key="index"
-            class="c-tab c-tabs-view__tab"
-            :class="{
-                'is-current': isCurrent(tab)
-            }"
+            class="c-tabs-view__tab c-tab"
+            :class="[
+                {'is-current': isCurrent(tab)},
+                tab.type.definition.cssClass
+            ]"
             @click="showTab(tab, index)"
         >
-            <span class="c-button__label c-tabs-view__tab__label">{{ tab.domainObject.name }}</span>
-            <button v-if="isEditing"
-                    class="icon-x c-click-icon c-tabs-view__tab__close-btn"
-                    @click="showRemoveDialog(index)"
-            ></button>
-        </div>
+            <span class="c-button__label">{{ tab.domainObject.name }}</span>
+        </button>
     </div>
     <div
         v-for="(tab, index) in tabsList"
@@ -41,6 +38,15 @@
         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"
@@ -52,13 +58,6 @@
 
 <script>
 import ObjectView from '../../../ui/components/ObjectView.vue';
-import RemoveAction from '../../remove/RemoveAction.js';
-import {
-    getSearchParam,
-    setSearchParam,
-    deleteSearchParam
-} from 'utils/openmctLocation';
-
 
 var unknownObjectType = {
     definition: {
@@ -72,114 +71,53 @@ 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,
-            searchTabKey: `tabs.pos.${keyString}`
+            allowDrop: false
         };
     },
-    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 currentTabIndexFromURL = getSearchParam(this.searchTabKey);
-                let currentTabIndexFromDomainObject = this.internalDomainObject.currentTabIndex;
+                let currentTabIndex = this.domainObject.currentTabIndex;
 
-                if (currentTabIndexFromURL !== null) {
-                    this.setCurrentTabByIndex(currentTabIndexFromURL);
-                } else if (currentTabIndexFromDomainObject !== undefined) {
-                    this.setCurrentTabByIndex(currentTabIndexFromDomainObject);
-                    this.storeCurrentTabIndexInURL(currentTabIndexFromDomainObject);
+                if (currentTabIndex !== undefined && this.tabsList.length > currentTabIndex) {
+                    this.currentTab = this.tabsList[currentTabIndex];
                 }
             });
         }
 
         this.unsubscribe = this.openmct.objects.observe(this.internalDomainObject, '*', this.updateInternalDomainObject);
 
-        this.RemoveAction = new RemoveAction(this.openmct);
         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.storeCurrentTabIndexInURL(index);
+                this.storeCurrentTabIndex(index);
             }
 
             this.currentTab = tab;
         },
-        showRemoveDialog(index) {
-            if(!this.tabsList[index]) {
-                return;
-            }
-
-            let activeTab = this.tabsList[index];
-            let childDomainObject = activeTab.domainObject
-
-            let prompt = this.openmct.overlays.dialog({
-                iconClass: 'alert',
-                message: `This action will remove this tab from the Tabs Layout. Do you want to continue?`,
-                buttons: [
-                    {
-                        label: 'Ok',
-                        emphasis: 'true',
-                        callback: () => {
-                            this.removeFromComposition(childDomainObject);
-                            prompt.dismiss();
-                        }
-                    },
-                    {
-                        label: 'Cancel',
-                        callback: () => {
-                            prompt.dismiss();
-                        }
-                    }
-                ]
-            });
-        },
-        removeFromComposition(childDomainObject) {
-            this.composition.remove(childDomainObject);
-        },
         addItem(domainObject) {
             let type = this.openmct.types.get(domainObject.type) || unknownObjectType,
                 tabItem = {
@@ -195,10 +133,6 @@ 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
@@ -210,10 +144,6 @@ 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();
@@ -224,7 +154,7 @@ export default {
         },
         onDrop(e) {
             this.setCurrentTab = true;
-            this.storeCurrentTabIndexInURL(this.tabsList.length);
+            this.storeCurrentTabIndex(this.tabsList.length);
         },
         dragstart(e) {
             if (e.dataTransfer.types.includes('openmct/domain-object-path')) {
@@ -247,19 +177,8 @@ export default {
         updateInternalDomainObject(domainObject) {
             this.internalDomainObject = domainObject;
         },
-        persistCurrentTabIndex(index) {
+        storeCurrentTabIndex(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,28 +42,20 @@ define([
                 let component;
 
                 return {
-                    show: function (element, editMode) {
+                    show: function (element) {
                         component =  new Vue({
                             el: element,
                             components: {
                                 TabsComponent: TabsComponent.default
                             },
-                            data() {
-                                return {
-                                    isEditing: editMode
-                                };
-                            },
                             provide: {
                                 openmct,
                                 domainObject,
                                 composition: openmct.composition.get(domainObject)
                             },
-                            template: '<tabs-component :isEditing="isEditing"></tabs-component>'
+                            template: '<tabs-component></tabs-component>'
                         });
                     },
-                    onEditModeChange(editMode) {
-                        component.isEditing = editMode;
-                    },
                     destroy: function (element) {
                         component.$destroy();
                         component = undefined;

src/plugins/telemetryTable/TelemetryTableRow.js

@@ -74,10 +74,6 @@ define([], function () {
             return this.cellLimitClasses;
         }
 
-        getContextualDomainObject(openmct, objectKeyString) {
-            return openmct.objects.get(objectKeyString);
-        }
-
         getContextMenuActions() {
             return [];
         }

src/plugins/telemetryTable/collections/FilteredTableRowCollection.js

@@ -46,23 +46,11 @@ define(
                 filter = filter.trim().toLowerCase();
 
                 let rowsToFilter = this.getRowsToFilter(columnKey, filter);
-
                 if (filter.length === 0) {
                     delete this.columnFilters[columnKey];
                 } else {
                     this.columnFilters[columnKey] = filter;
                 }
-
-                this.rows = rowsToFilter.filter(this.matchesFilters, this);
-                this.emit('filter');
-            }
-
-            setColumnRegexFilter(columnKey, filter) {
-                filter = filter.trim();
-
-                let rowsToFilter = this.masterCollection.getRows();
-
-                this.columnFilters[columnKey] = new RegExp(filter);
                 this.rows = rowsToFilter.filter(this.matchesFilters, this);
                 this.emit('filter');
             }
@@ -82,10 +70,6 @@ define(
              * @private
              */
             isSubsetOfCurrentFilter(columnKey, filter) {
-                if (this.columnFilters[columnKey] instanceof RegExp) {
-                    return false;
-                }
-
                 return this.columnFilters[columnKey] &&
                     filter.startsWith(this.columnFilters[columnKey]) &&
                     // startsWith check will otherwise fail when filter cleared
@@ -112,11 +96,7 @@ define(
                         return false;
                     }
 
-                    if (this.columnFilters[key] instanceof RegExp) {
-                        doesMatchFilters = this.columnFilters[key].test(formattedValue);
-                    } else {
-                        doesMatchFilters = formattedValue.toLowerCase().indexOf(this.columnFilters[key]) !== -1;
-                    }
+                    doesMatchFilters = formattedValue.toLowerCase().indexOf(this.columnFilters[key]) !== -1;
                 });
                 return doesMatchFilters;
             }

src/plugins/telemetryTable/collections/SortedTableRowCollection.js

@@ -73,6 +73,7 @@ define(
              * @private
              */
             addOne(row) {
+                // console.log('SortedTableRowCollection addOne', row);
                 if (this.sortOptions === undefined) {
                     throw 'Please specify sort options';
                 }

src/plugins/telemetryTable/components/sizing-row.vue

@@ -1,56 +0,0 @@
-<template>
-<tr class="c-telemetry-table__sizing-tr"><td>SIZING ROW</td></tr>
-</template>
-
-<script>
-export default {
-    props: {
-        isEditing: {
-            type: Boolean,
-            default: false
-        }
-    },
-    watch: {
-        isEditing: function (isEditing) {
-            if (isEditing) {
-                this.pollForRowHeight();
-            } else {
-                this.clearPoll();
-            }
-        }
-    },
-    mounted() {
-        this.$nextTick().then(() => {
-            this.height = this.$el.offsetHeight;
-            this.$emit('change-height', this.height);
-        });
-
-        if (this.isEditing) {
-            this.pollForRowHeight();
-        }
-    },
-    destroyed() {
-        this.clearPoll();
-    },
-    methods: {
-        pollForRowHeight() {
-            this.clearPoll();
-            this.pollID = window.setInterval(this.heightPoll, 300);
-        },
-        clearPoll() {
-            if (this.pollID) {
-                window.clearInterval(this.pollID);
-                this.pollID = undefined;
-            }
-        },
-        heightPoll() {
-            let height = this.$el.offsetHeight;
-
-            if (height !== this.height) {
-                this.$emit('change-height', height);
-                this.height = height;
-            }
-        }
-    }
-}
-</script>

src/plugins/telemetryTable/components/table-row.vue

@@ -171,7 +171,7 @@ export default {
         showContextMenu: function (event) {
             event.preventDefault();
 
-            this.row.getContextualDomainObject(this.openmct, this.row.objectKeyString).then(domainObject => {
+            this.openmct.objects.get(this.row.objectKeyString).then((domainObject) => {
                 let contextualObjectPath = this.objectPath.slice();
                 contextualObjectPath.unshift(domainObject);
 

src/plugins/telemetryTable/components/table.scss

@@ -9,9 +9,6 @@
 
 .c-telemetry-table {
     // Table that displays telemetry in a scrolling body area
-
-    @include fontAndSize();
-
     display: flex;
     flex-flow: column nowrap;
     justify-content: flex-start;
@@ -57,16 +54,6 @@
                 width: 100%;
             }
         }
-
-        &__filter {
-            .c-table__search {
-                padding-top: 0;
-                padding-bottom: 0;
-            }
-            .is-in-small-container & {
-                display: none;
-            }
-        }
     }
 
     &__headers__label {
@@ -99,10 +86,6 @@
         height: 0; // Fixes Chrome 73 overflow bug
         overflow-x: auto;
         overflow-y: scroll;
-
-        .is-editing & {
-            pointer-events: none;
-        }
     }
 
     /******************************* TABLES */
@@ -115,7 +98,7 @@
             display: flex; // flex-flow defaults to row nowrap (which is what we want) so no need to define
             align-items: stretch;
             position: absolute;
-            min-height: 18px; // Needed when a row has empty values in its cells
+            height: 18px; // Needed when a row has empty values in its cells
 
             &.is-selected {
                 background-color: $colorSelectedBg !important;
@@ -153,15 +136,9 @@
             white-space: nowrap;
         }
     }
-
-    &__sizing-tr {
-        // A row element used to determine sizing of rows based on font size
-        visibility: hidden;
-        pointer-events: none;
-    }
 }
 
-/******************************* SPECIFIC CASE WRAPPERS */
+/******************************* EDITING */
 .is-editing {
     .c-telemetry-table__headers__labels {
         th[draggable],
@@ -181,10 +158,8 @@
     }
 }
 
-.is-paused {
-    .c-table__body-w {
-        border: 1px solid rgba($colorPausedBg, 0.8);
-    }
+.paused {
+    border: 1px solid #ff9900;
 }
 
 /******************************* LEGACY */

src/plugins/telemetryTable/components/table.vue

@@ -20,16 +20,13 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 <template>
-<div class="c-table-wrapper"
-     :class="{ 'is-paused': paused }"
->
+<div class="c-table-wrapper">
     <!-- main contolbar  start-->
     <div v-if="!marking.useAlternateControlBar"
          class="c-table-control-bar c-control-bar"
     >
         <button
             v-if="allowExport"
-            v-show="!markedRows.length"
             class="c-button icon-download labeled"
             title="Export this view's data"
             @click="exportAllDataAsCSV()"
@@ -125,10 +122,10 @@
     <!-- alternate controlbar end  -->
 
     <div
-        class="c-table c-telemetry-table c-table--filterable c-table--sortable has-control-bar u-style-receiver js-style-receiver"
+        class="c-table c-telemetry-table c-table--filterable c-table--sortable has-control-bar"
         :class="{
             'loading': loading,
-            'is-paused' : paused
+            'paused' : paused
         }"
     >
         <div :style="{ 'max-width': widthWithScroll, 'min-width': '150px'}">
@@ -190,17 +187,7 @@
                                 class="c-table__search"
                                 @input="filterChanged(key)"
                                 @clear="clearFilter(key)"
-                            >
-
-                                <button
-                                    class="c-search__use-regex"
-                                    :class="{ 'is-active': enableRegexSearch[key] }"
-                                    title="Click to enable regex: enter a string with slashes, like this: /regex_exp/"
-                                    @click="toggleRegex(key)"
-                                >
-                                    /R/
-                                </button>
-                            </search>
+                            />
                         </table-column-header>
                     </tr>
                 </thead>
@@ -244,10 +231,6 @@
             class="c-telemetry-table__sizing js-telemetry-table__sizing"
             :style="sizingTableWidth"
         >
-            <sizing-row
-                :is-editing="isEditing"
-                @change-height="setRowHeight"
-            />
             <tr>
                 <template v-for="(title, key) in headers">
                     <th
@@ -280,7 +263,6 @@ import TelemetryFilterIndicator from './TelemetryFilterIndicator.vue';
 import CSVExporter from '../../../exporters/CSVExporter.js';
 import _ from 'lodash';
 import ToggleSwitch from '../../../ui/components/ToggleSwitch.vue';
-import SizingRow from './sizing-row.vue';
 
 const VISIBLE_ROW_COUNT = 100;
 const ROW_HEIGHT = 17;
@@ -293,8 +275,7 @@ export default {
         TableColumnHeader,
         search,
         TelemetryFilterIndicator,
-        ToggleSwitch,
-        SizingRow
+        ToggleSwitch
     },
     inject: ['table', 'openmct', 'objectPath'],
     props: {
@@ -357,8 +338,7 @@ export default {
             paused: false,
             markedRows: [],
             isShowingMarkedRowsOnly: false,
-            hideHeaders: configuration.hideHeaders,
-            enableRegexSearch: {}
+            hideHeaders: configuration.hideHeaders
         }
     },
     computed: {
@@ -510,7 +490,7 @@ export default {
             let columnWidths = {},
                 totalWidth = 0,
                 headerKeys = Object.keys(this.headers),
-                sizingTableRow = this.sizingTable.children[1],
+                sizingTableRow = this.sizingTable.children[0],
                 sizingCells = sizingTableRow.children;
 
             headerKeys.forEach((headerKey, headerIndex, array)=>{
@@ -567,17 +547,6 @@ export default {
         },
         filterChanged(columnKey) {
             this.table.filteredRows.setColumnFilter(columnKey, this.filters[columnKey]);
-
-            if (this.enableRegexSearch[columnKey]) {
-                if (this.isCompleteRegex(this.filters[columnKey])) {
-                    this.table.filteredRows.setColumnRegexFilter(columnKey, this.filters[columnKey].slice(1,-1));
-                } else {
-                    return;
-                }
-            } else {
-                this.table.filteredRows.setColumnFilter(columnKey, this.filters[columnKey]);
-            }
-
             this.setHeight();
         },
         clearFilter(columnKey) {
@@ -904,23 +873,6 @@ export default {
             this.isAutosizeEnabled = true;
 
             this.$nextTick().then(this.calculateColumnWidths);
-        },
-        setRowHeight(height) {
-            this.rowHeight = height;
-            this.setHeight();
-            this.calculateTableSize();
-            this.clearRowsAndRerender();
-        },
-        toggleRegex(key) {
-            this.$set(this.filters, key, '');
-            if (this.enableRegexSearch[key] === undefined) {
-                this.$set(this.enableRegexSearch, key, true)
-            } else {
-                this.$set(this.enableRegexSearch, key, !this.enableRegexSearch[key]);
-            }
-        },
-        isCompleteRegex(string) {
-            return (string.length > 2 && string[0] === '/' && string[string.length - 1] === '/')
         }
     }
 }

src/plugins/timeConductor/Conductor.vue

@@ -143,7 +143,7 @@
             <ConductorHistory
                 v-if="isFixed"
                 class="c-conductor__history-select"
-                :bounds="bounds"
+                :bounds="openmct.time.bounds()"
                 :time-system="timeSystem"
             />
         </div>
@@ -190,10 +190,6 @@ export default {
                 start: offsets && durationFormatter.format(Math.abs(offsets.start)),
                 end: offsets && durationFormatter.format(Math.abs(offsets.end))
             },
-            bounds: {
-                start: bounds.start,
-                end: bounds.end
-            },
             formattedBounds: {
                 start: timeFormatter.format(bounds.start),
                 end: timeFormatter.format(bounds.end)
@@ -214,7 +210,7 @@ export default {
         document.addEventListener('keydown', this.handleKeyDown);
         document.addEventListener('keyup', this.handleKeyUp);
         this.setTimeSystem(JSON.parse(JSON.stringify(this.openmct.time.timeSystem())));
-        this.openmct.time.on('bounds', this.handleNewBounds);
+        this.openmct.time.on('bounds', this.setViewFromBounds);
         this.openmct.time.on('timeSystem', this.setTimeSystem);
         this.openmct.time.on('clock', this.setViewFromClock);
         this.openmct.time.on('clockOffsets', this.setViewFromOffsets)
@@ -224,13 +220,6 @@ export default {
         document.removeEventListener('keyup', this.handleKeyUp);
     },
     methods: {
-        handleNewBounds(bounds) {
-            this.setBounds(bounds);
-            this.setViewFromBounds(bounds);
-        },
-        setBounds(bounds) {
-            this.bounds = bounds;
-        },
         handleKeyDown(event) {
             if (event.key === 'Alt') {
                 this.altPressed = true;
@@ -257,13 +246,10 @@ export default {
             this.formattedBounds.end = this.timeFormatter.format(bounds.end);
         },
         endZoom(bounds) {
+            const _bounds = bounds ? bounds : this.openmct.time.bounds();
             this.isZooming = false;
 
-            if (bounds) {
-                this.openmct.time.bounds(bounds);
-            } else {
-                this.setViewFromBounds(this.bounds);
-            }
+            this.openmct.time.bounds(_bounds);
         },
         setTimeSystem(timeSystem) {
             this.timeSystem = timeSystem

src/plugins/timeConductor/ConductorAxis.vue

@@ -207,7 +207,7 @@ export default {
             this.$emit('panAxis', panBounds);
         },
         endPan() {
-            const panBounds = this.isChangingViewBounds()
+            const panBounds = this.dragStartX && this.dragX && this.dragStartX !== this.dragX
                 ? this.getPanBounds()
                 : undefined;
             this.$emit('endPan', panBounds);
@@ -251,14 +251,16 @@ export default {
             });
         },
         endZoom() {
-            let zoomBounds;
-            if (this.isChangingViewBounds()) {
-                const zoomRange = this.getZoomRange();
-                zoomBounds = {
+            const zoomRange = this.dragStartX && this.dragX && this.dragStartX !== this.dragX
+                ? this.getZoomRange()
+                : undefined;
+
+            const zoomBounds = zoomRange
+                ? {
                     start: this.scaleToBounds(zoomRange.start),
                     end: this.scaleToBounds(zoomRange.end)
-                };
-            }
+                }
+                : this.openmct.time.bounds();
 
             this.zoomStyle = {};
             this.$emit('endZoom', zoomBounds);
@@ -287,9 +289,6 @@ export default {
             const offset = valueDelta / this.width * timeDelta;
             return bounds.start + offset;
         },
-        isChangingViewBounds() {
-            return this.dragStartX && this.dragX && this.dragStartX !== this.dragX;
-        },
         resize() {
             if (this.$refs.axisHolder.clientWidth !== this.width) {
                 this.setAxisDimensions();

src/plugins/timeConductor/ConductorHistory.vue

@@ -84,12 +84,7 @@ export default {
     },
     data() {
         return {
-            /**
-             * previous bounds entries available for easy re-use
-             * @history array of timespans
-             * @timespans {start, end} number representing timestamp
-             */
-            history: this.getHistoryFromLocalStorage(),
+            history: {}, // contains arrays of timespans {start, end}, array key is time system key
             presets: []
         }
     },
@@ -116,20 +111,22 @@ export default {
                 this.addTimespan();
             },
             deep: true
+        },
+        history: {
+            handler() {
+                this.persistHistoryToLocalStorage();
+            },
+            deep: true
         }
     },
     mounted() {
-        this.initializeHistoryIfNoHistory();
+        this.getHistoryFromLocalStorage();
     },
     methods: {
         getHistoryFromLocalStorage() {
-            const localStorageHistory = localStorage.getItem(LOCAL_STORAGE_HISTORY_KEY);
-            const history = localStorageHistory ? JSON.parse(localStorageHistory) : undefined;
-
-            return history;
-        },
-        initializeHistoryIfNoHistory() {
-            if (!this.history) {
+            if (localStorage.getItem(LOCAL_STORAGE_HISTORY_KEY)) {
+                this.history = JSON.parse(localStorage.getItem(LOCAL_STORAGE_HISTORY_KEY))
+            } else {
                 this.history = {};
                 this.persistHistoryToLocalStorage();
             }
@@ -159,8 +156,6 @@ export default {
 
             currentHistory.unshift(timespan);
             this.history[key] = currentHistory;
-
-            this.persistHistoryToLocalStorage();
         },
         selectTimespan(timespan) {
             this.openmct.time.bounds(timespan);

src/styles/_constants-espresso.scss

@@ -84,10 +84,6 @@ $filterHov: brightness(1.3); // Tree, location items
 $colorSelectedBg: pushBack($colorKey, 10%);
 $colorSelectedFg: pullForward($colorBodyFg, 20%);
 
-// Object labels
-$objectLabelTypeIconOpacity: 0.7;
-$objectLabelNameFilter: brightness(1.3);
-
 // Layout
 $shellMainPad: 4px 0;
 $shellPanePad: $interiorMargin, 7px;
@@ -98,7 +94,7 @@ $sideBarHeaderBg: rgba($colorBodyFg, 0.2);
 $sideBarHeaderFg: rgba($colorBodyFg, 0.7);
 
 // Status colors, mainly used for messaging and item ancillary symbols
-$colorStatusFg: #888;
+$colorStatusFg: #999;
 $colorStatusDefault: #ccc;
 $colorStatusInfo: #60ba7b;
 $colorStatusInfoFilter: invert(58%) sepia(44%) saturate(405%) hue-rotate(85deg) brightness(102%) contrast(92%);
@@ -155,10 +151,6 @@ $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
@@ -209,9 +201,9 @@ $colorBtnMajorBg: $colorKey;
 $colorBtnMajorBgHov: $colorKeyHov;
 $colorBtnMajorFg: $colorKeyFg;
 $colorBtnMajorFgHov: pushBack($colorBtnMajorFg, 10%);
-$colorBtnCautionBg: $colorStatusAlert;
+$colorBtnCautionBg: #f16f6f;
 $colorBtnCautionBgHov: #f1504e;
-$colorBtnCautionFg: $colorBtnBg;
+$colorBtnCautionFg: $colorBtnFg;
 $colorBtnActiveBg: $colorOk;
 $colorBtnActiveFg: $colorOkFg;
 $colorBtnSelectedBg: $colorSelectedBg;
@@ -339,7 +331,7 @@ $shdwItemText: none;
 $colorTabBorder: pullForward($colorBodyBg, 10%);
 $colorTabBodyBg: $colorBodyBg;
 $colorTabBodyFg: pullForward($colorBodyFg, 20%);
-$colorTabHeaderBg: rgba($colorBodyFg, 0.15);
+$colorTabHeaderBg: rgba($colorBodyFg, 0.2);
 $colorTabHeaderFg: $colorBodyFg;
 $colorTabHeaderBorder: $colorBodyBg;
 $colorTabGroupHeaderBg: pullForward($colorBodyBg, 5%);
@@ -357,7 +349,7 @@ $stylePlotHash: dashed;
 $colorPlotAreaBorder: $colorInteriorBorder;
 $colorPlotLabelFg: pushBack($colorPlotFg, 20%);
 $legendHoverValueBg: rgba($colorBodyFg, 0.2);
-$legendTableHeadBg: $colorTabHeaderBg;
+$legendTableHeadBg: rgba($colorBodyFg, 0.15);
 
 // Tree
 $colorTreeBg: transparent;

src/styles/_constants-maelstrom.scss

@@ -88,10 +88,6 @@ $filterHov: brightness(1.3); // Tree, location items
 $colorSelectedBg: pushBack($colorKey, 10%);
 $colorSelectedFg: pullForward($colorBodyFg, 20%);
 
-// Object labels
-$objectLabelTypeIconOpacity: 0.7;
-$objectLabelNameFilter: brightness(1.3);
-
 // Layout
 $shellMainPad: 4px 0;
 $shellPanePad: $interiorMargin, 7px;
@@ -159,10 +155,6 @@ $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
@@ -213,9 +205,9 @@ $colorBtnMajorBg: $colorKey;
 $colorBtnMajorBgHov: $colorKeyHov;
 $colorBtnMajorFg: $colorKeyFg;
 $colorBtnMajorFgHov: pushBack($colorBtnMajorFg, 10%);
-$colorBtnCautionBg: $colorStatusAlert;
+$colorBtnCautionBg: #f16f6f;
 $colorBtnCautionBgHov: #f1504e;
-$colorBtnCautionFg: $colorBtnBg;
+$colorBtnCautionFg: $colorBtnFg;
 $colorBtnActiveBg: $colorOk;
 $colorBtnActiveFg: $colorOkFg;
 $colorBtnSelectedBg: $colorSelectedBg;
@@ -343,7 +335,7 @@ $shdwItemText: none;
 $colorTabBorder: pullForward($colorBodyBg, 10%);
 $colorTabBodyBg: $colorBodyBg;
 $colorTabBodyFg: pullForward($colorBodyFg, 20%);
-$colorTabHeaderBg: rgba($colorBodyFg, 0.15);
+$colorTabHeaderBg: rgba($colorBodyFg, 0.2);
 $colorTabHeaderFg: $colorBodyFg;
 $colorTabHeaderBorder: $colorBodyBg;
 $colorTabGroupHeaderBg: pullForward($colorBodyBg, 5%);

src/styles/_constants-snow.scss

@@ -80,14 +80,10 @@ $uiColor: #289fec; // Resize bars, splitter bars, etc.
 $colorInteriorBorder: rgba($colorBodyFg, 0.2);
 $colorA: #999;
 $colorAHov: $colorKey;
-$filterHov: brightness(0.8) contrast(2); // Tree, location items
+$filterHov: brightness(1.3); // Tree, location items
 $colorSelectedBg: pushBack($colorKey, 40%);
 $colorSelectedFg: pullForward($colorBodyFg, 10%);
 
-// Object labels
-$objectLabelTypeIconOpacity: 0.5;
-$objectLabelNameFilter: brightness(0.5);
-
 // Layout
 $shellMainPad: 4px 0;
 $shellPanePad: $interiorMargin, 7px;
@@ -155,10 +151,6 @@ $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
@@ -228,7 +220,7 @@ $colorDisclosureCtrlHov: rgba($colorBodyFg, 0.7);
 $btnStdH: 24px;
 $colorCursorGuide: rgba(black, 0.6);
 $shdwCursorGuide: rgba(white, 0.4) 0 0 2px;
-$colorLocalControlOvrBg: rgba($colorBodyBg, 0.8);
+$colorLocalControlOvrBg: rgba($colorBodyFg, 0.8);
 $colorSelectBg: $colorBtnBg; // This must be a solid color, not a gradient, due to usage of SVG bg in selects
 $colorSelectFg: $colorBtnFg;
 $colorSelectArw: lighten($colorBtnBg, 20%);