expose Vue on openmct

* When a mutation is requested, the LegacyObjectAPIInterceptor triggers a second mutatation request - ensure that the model for this 2nd request has some diff from the current model before saving the object.

Co-authored-by: Andrew Henry <akhenry@gmail.com>

API.md

@@ -430,6 +430,7 @@ Known hints:
 * `domain`: Values with a `domain` hint will be used for the x-axis of a plot, and tables will render columns for these values first.
 * `range`: Values with a `range` hint will be used as the y-axis on a plot, and tables will render columns for these values after the `domain` values.
 * `image`: Indicates that the value may be interpreted as the URL to an image file, in which case appropriate views will be made available.
+* `imageDownloadName`: Indicates that the value may be interpreted as the name of the image file.
 
 ##### The Time Conductor and Telemetry 
 

example/imagery/plugin.js

@@ -50,11 +50,16 @@ define([
         const IMAGE_DELAY = 20000;
 
         function pointForTimestamp(timestamp, name) {
+            const url = IMAGE_SAMPLES[Math.floor(timestamp / IMAGE_DELAY) % IMAGE_SAMPLES.length];
+            const urlItems = url.split('/');
+            const imageDownloadName = `example.imagery.${urlItems[urlItems.length - 1]}`;
+
             return {
-                name: name,
+                name,
                 utc: Math.floor(timestamp / IMAGE_DELAY) * IMAGE_DELAY,
                 local: Math.floor(timestamp / IMAGE_DELAY) * IMAGE_DELAY,
-                url: IMAGE_SAMPLES[Math.floor(timestamp / IMAGE_DELAY) % IMAGE_SAMPLES.length]
+                url,
+                imageDownloadName
             };
         }
 
@@ -139,6 +144,14 @@ define([
                                 hints: {
                                     image: 1
                                 }
+                            },
+                            {
+                                name: 'Image Download Name',
+                                key: 'imageDownloadName',
+                                format: 'imageDownloadName',
+                                hints: {
+                                    imageDownloadName: 1
+                                }
                             }
                         ]
                     };

index.html

@@ -88,7 +88,6 @@
         openmct.install(openmct.plugins.ExampleImagery());
         openmct.install(openmct.plugins.PlanLayout());
         openmct.install(openmct.plugins.Timeline());
-        openmct.install(openmct.plugins.PlotVue());
         openmct.install(openmct.plugins.UTCTimeSystem());
         openmct.install(openmct.plugins.AutoflowView({
             type: "telemetry.panel"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "openmct",
-  "version": "1.6.3-SNAPSHOT",
+  "version": "1.7.1-SNAPSHOT",
   "description": "The Open MCT core platform",
   "dependencies": {},
   "devDependencies": {

platform/core/src/capabilities/MutationCapability.js

@@ -141,11 +141,17 @@ define(
                 if (mutationResult !== false) {
                     // Copy values if result was a different object
                     // (either our clone or some other new thing)
-                    if (model !== result) {
+                    let modelHasChanged = _.isEqual(model, result) === false;
+                    if (modelHasChanged) {
                         copyValues(model, result);
                     }
 
-                    model.modified = useTimestamp ? timestamp : now();
+                    if (modelHasChanged
+                        || (useTimestamp !== undefined)
+                        || (model.modified === undefined)) {
+                        model.modified = useTimestamp ? timestamp : now();
+                    }
+
                     notifyListeners(model);
                 }
 

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

@@ -154,7 +154,9 @@ define(['zepto', 'objectUtils'], function ($, objectUtils) {
         tree = JSON.stringify(tree).replace(new RegExp(oldIdKeyString, 'g'), newIdKeyString);
 
         return JSON.parse(tree, (key, value) => {
-            if (Object.prototype.hasOwnProperty.call(value, 'key')
+            if (value !== undefined
+                && value !== null
+                && Object.prototype.hasOwnProperty.call(value, 'key')
                 && Object.prototype.hasOwnProperty.call(value, 'namespace')
                 && value.key === oldId.key
                 && value.namespace === oldId.namespace) {

platform/persistence/couch/README.md

@@ -1,8 +0,0 @@
-# Couch DB Persistence Plugin
-An adapter for using CouchDB for persistence of user-created objects. The plugin installation function takes the URL 
-for the CouchDB database as a parameter.
-
-## Installation
-```js
-openmct.install(openmct.plugins.CouchDB('http://localhost:5984/openmct'))
-```

platform/persistence/couch/bundle.js

@@ -1,78 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-    "./src/CouchPersistenceProvider",
-    "./src/CouchIndicator"
-], function (
-    CouchPersistenceProvider,
-    CouchIndicator
-) {
-
-    return {
-        name: "platform/persistence/couch",
-        definition: {
-            "name": "Couch Persistence",
-            "description": "Adapter to read and write objects using a CouchDB instance.",
-            "extensions": {
-                "components": [
-                    {
-                        "provides": "persistenceService",
-                        "type": "provider",
-                        "implementation": CouchPersistenceProvider,
-                        "depends": [
-                            "$http",
-                            "$q",
-                            "PERSISTENCE_SPACE",
-                            "COUCHDB_PATH"
-                        ]
-                    }
-                ],
-                "constants": [
-                    {
-                        "key": "PERSISTENCE_SPACE",
-                        "value": "mct"
-                    },
-                    {
-                        "key": "COUCHDB_PATH",
-                        "value": "/couch/openmct"
-                    },
-                    {
-                        "key": "COUCHDB_INDICATOR_INTERVAL",
-                        "value": 15000
-                    }
-                ],
-                "indicators": [
-                    {
-                        "implementation": CouchIndicator,
-                        "depends": [
-                            "$http",
-                            "$interval",
-                            "COUCHDB_PATH",
-                            "COUCHDB_INDICATOR_INTERVAL"
-                        ]
-                    }
-                ]
-            }
-        }
-    };
-});

platform/persistence/couch/src/CouchDocument.js

@@ -1,61 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-
-        /**
-         * A CouchDocument describes domain object model in a format
-         * which is easily read-written to CouchDB. This includes
-         * Couch's _id and _rev fields, as well as a separate
-         * metadata field which contains a subset of information found
-         * in the model itself (to support search optimization with
-         * CouchDB views.)
-         * @memberof platform/persistence/couch
-         * @constructor
-         * @param {string} id the id under which to store this mode
-         * @param {object} model the model to store
-         * @param {string} rev the revision to include (or undefined,
-         *        if no revision should be noted for couch)
-         * @param {boolean} whether or not to mark this document as
-         *        deleted (see CouchDB docs for _deleted)
-         */
-        function CouchDocument(id, model, rev, markDeleted) {
-            return {
-                "_id": id,
-                "_rev": rev,
-                "_deleted": markDeleted,
-                "metadata": {
-                    "category": "domain object",
-                    "type": model.type,
-                    "owner": "admin",
-                    "name": model.name,
-                    "created": Date.now()
-                },
-                "model": model
-            };
-        }
-
-        return CouchDocument;
-    }
-);

platform/persistence/couch/src/CouchIndicator.js

@@ -1,119 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, 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 () {
-
-        // Set of connection states; changing among these states will be
-        // reflected in the indicator's appearance.
-        // CONNECTED: Everything nominal, expect to be able to read/write.
-        // DISCONNECTED: HTTP failed; maybe misconfigured, disconnected.
-        // SEMICONNECTED: Connected to the database, but it reported an error.
-        // PENDING: Still trying to connect, and haven't failed yet.
-        var CONNECTED = {
-                text: "Connected",
-                glyphClass: "ok",
-                statusClass: "s-status-on",
-                description: "Connected to the domain object database."
-            },
-            DISCONNECTED = {
-                text: "Disconnected",
-                glyphClass: "err",
-                statusClass: "s-status-caution",
-                description: "Unable to connect to the domain object database."
-            },
-            SEMICONNECTED = {
-                text: "Unavailable",
-                glyphClass: "caution",
-                statusClass: "s-status-caution",
-                description: "Database does not exist or is unavailable."
-            },
-            PENDING = {
-                text: "Checking connection...",
-                statusClass: "s-status-caution"
-            };
-
-        /**
-         * Indicator for the current CouchDB connection. Polls CouchDB
-         * at a regular interval (defined by bundle constants) to ensure
-         * that the database is available.
-         * @constructor
-         * @memberof platform/persistence/couch
-         * @implements {Indicator}
-         * @param $http Angular's $http service
-         * @param $interval Angular's $interval service
-         * @param {string} path the URL to poll to check for couch availability
-         * @param {number} interval the interval, in milliseconds, to poll at
-         */
-        function CouchIndicator($http, $interval, path, interval) {
-            var self = this;
-
-            // Track the current connection state
-            this.state = PENDING;
-
-            this.$http = $http;
-            this.$interval = $interval;
-            this.path = path;
-            this.interval = interval;
-
-            // Callback if the HTTP request to Couch fails
-            function handleError() {
-                self.state = DISCONNECTED;
-            }
-
-            // Callback if the HTTP request succeeds. CouchDB may
-            // report an error, so check for that.
-            function handleResponse(response) {
-                var data = response.data;
-                self.state = data.error ? SEMICONNECTED : CONNECTED;
-            }
-
-            // Try to connect to CouchDB, and update the indicator.
-            function updateIndicator() {
-                $http.get(path).then(handleResponse, handleError);
-            }
-
-            // Update the indicator initially, and start polling.
-            updateIndicator();
-            $interval(updateIndicator, interval);
-        }
-
-        CouchIndicator.prototype.getCssClass = function () {
-            return "c-indicator--clickable icon-suitcase " + this.state.statusClass;
-        };
-
-        CouchIndicator.prototype.getGlyphClass = function () {
-            return this.state.glyphClass;
-        };
-
-        CouchIndicator.prototype.getText = function () {
-            return this.state.text;
-        };
-
-        CouchIndicator.prototype.getDescription = function () {
-            return this.state.description;
-        };
-
-        return CouchIndicator;
-    }
-);

platform/persistence/couch/src/CouchPersistenceProvider.js

@@ -1,145 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * This bundle implements a persistence service which uses CouchDB to
- * store documents.
- * @namespace platform/persistence/cache
- */
-define(
-    ["./CouchDocument"],
-    function (CouchDocument) {
-
-        // JSLint doesn't like dangling _'s, but CouchDB uses these, so
-        // hide this behind variables.
-        var REV = "_rev",
-            ID = "_id";
-
-        /**
-         * The CouchPersistenceProvider reads and writes JSON documents
-         * (more specifically, domain object models) to/from a CouchDB
-         * instance.
-         * @memberof platform/persistence/couch
-         * @constructor
-         * @implements {PersistenceService}
-         * @param $http Angular's $http service
-         * @param $interval Angular's $interval service
-         * @param {string} space the name of the persistence space being served
-         * @param {string} path the path to the CouchDB instance
-         */
-        function CouchPersistenceProvider($http, $q, space, path) {
-            this.spaces = [space];
-            this.revs = {};
-            this.$q = $q;
-            this.$http = $http;
-            this.path = path;
-        }
-
-        // Pull out a list of document IDs from CouchDB's
-        // _all_docs response
-        function getIdsFromAllDocs(allDocs) {
-            return allDocs.rows.map(function (r) {
-                return r.id;
-            });
-        }
-
-        // Check the response to a create/update/delete request;
-        // track the rev if it's valid, otherwise return false to
-        // indicate that the request failed.
-        CouchPersistenceProvider.prototype.checkResponse = function (response) {
-            if (response && response.ok) {
-                this.revs[response.id] = response.rev;
-
-                return response.ok;
-            } else {
-                return false;
-            }
-        };
-
-        // Get a domain object model out of CouchDB's response
-        CouchPersistenceProvider.prototype.getModel = function (response) {
-            if (response && response.model) {
-                this.revs[response[ID]] = response[REV];
-
-                return response.model;
-            } else {
-                return undefined;
-            }
-        };
-
-        // Issue a request using $http; get back the plain JS object
-        // from the expected JSON response
-        CouchPersistenceProvider.prototype.request = function (subpath, method, value) {
-            return this.$http({
-                method: method,
-                url: this.path + '/' + subpath,
-                data: value
-            }).then(function (response) {
-                return response.data;
-            }, function () {
-                return undefined;
-            });
-        };
-
-        // Shorthand methods for GET/PUT methods
-        CouchPersistenceProvider.prototype.get = function (subpath) {
-            return this.request(subpath, "GET");
-        };
-
-        CouchPersistenceProvider.prototype.put = function (subpath, value) {
-            return this.request(subpath, "PUT", value);
-        };
-
-        CouchPersistenceProvider.prototype.listSpaces = function () {
-            return this.$q.when(this.spaces);
-        };
-
-        CouchPersistenceProvider.prototype.listObjects = function () {
-            return this.get("_all_docs").then(getIdsFromAllDocs.bind(this));
-        };
-
-        CouchPersistenceProvider.prototype.createObject = function (space, key, value) {
-            return this.put(key, new CouchDocument(key, value))
-                .then(this.checkResponse.bind(this));
-        };
-
-        CouchPersistenceProvider.prototype.readObject = function (space, key) {
-            return this.get(key).then(this.getModel.bind(this));
-        };
-
-        CouchPersistenceProvider.prototype.updateObject = function (space, key, value) {
-            var rev = this.revs[key];
-
-            return this.put(key, new CouchDocument(key, value, rev))
-                .then(this.checkResponse.bind(this));
-        };
-
-        CouchPersistenceProvider.prototype.deleteObject = function (space, key, value) {
-            var rev = this.revs[key];
-
-            return this.put(key, new CouchDocument(key, value, rev, true))
-                .then(this.checkResponse.bind(this));
-        };
-
-        return CouchPersistenceProvider;
-    }
-);

platform/persistence/couch/test/CouchDocumentSpec.js

@@ -1,63 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, 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.
- *****************************************************************************/
-
-/**
- * DomainObjectProviderSpec. Created by vwoeltje on 11/6/14.
- */
-define(
-    ["../src/CouchDocument"],
-    function (CouchDocument) {
-
-        // JSLint doesn't like dangling _'s, but CouchDB uses these, so
-        // hide this behind variables.
-        var REV = "_rev",
-            ID = "_id",
-            DELETED = "_deleted";
-
-        describe("A couch document", function () {
-            it("includes an id", function () {
-                expect(new CouchDocument("testId", {})[ID])
-                    .toEqual("testId");
-            });
-
-            it("includes a rev only when one is provided", function () {
-                expect(new CouchDocument("testId", {})[REV])
-                    .not.toBeDefined();
-                expect(new CouchDocument("testId", {}, "testRev")[REV])
-                    .toEqual("testRev");
-            });
-
-            it("includes the provided model", function () {
-                var model = { someKey: "some value" };
-                expect(new CouchDocument("testId", model).model)
-                    .toEqual(model);
-            });
-
-            it("marks documents as deleted only on request", function () {
-                expect(new CouchDocument("testId", {}, "testRev")[DELETED])
-                    .not.toBeDefined();
-                expect(new CouchDocument("testId", {}, "testRev", true)[DELETED])
-                    .toBe(true);
-            });
-        });
-    }
-);

platform/persistence/couch/test/CouchIndicatorSpec.js

@@ -1,129 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../src/CouchIndicator"],
-    function (CouchIndicator) {
-
-        xdescribe("The CouchDB status indicator", function () {
-            var mockHttp,
-                mockInterval,
-                testPath,
-                testInterval,
-                mockPromise,
-                indicator;
-
-            beforeEach(function () {
-                mockHttp = jasmine.createSpyObj("$http", ["get"]);
-                mockInterval = jasmine.createSpy("$interval");
-                mockPromise = jasmine.createSpyObj("promise", ["then"]);
-                testPath = "/test/path";
-                testInterval = 12321; // Some number
-
-                mockHttp.get.and.returnValue(mockPromise);
-
-                indicator = new CouchIndicator(
-                    mockHttp,
-                    mockInterval,
-                    testPath,
-                    testInterval
-                );
-            });
-
-            it("polls for changes", function () {
-                expect(mockInterval).toHaveBeenCalledWith(
-                    jasmine.any(Function),
-                    testInterval
-                );
-            });
-
-            it("has a database icon", function () {
-                expect(indicator.getCssClass()).toEqual("icon-database s-status-caution");
-            });
-
-            it("consults the database at the configured path", function () {
-                expect(mockHttp.get).toHaveBeenCalledWith(testPath);
-            });
-
-            it("changes when the database connection is nominal", function () {
-                var initialText = indicator.getText(),
-                    initialDescrption = indicator.getDescription(),
-                    initialGlyphClass = indicator.getGlyphClass();
-
-                // Nominal just means getting back an object, without
-                // an error field.
-                mockPromise.then.calls.mostRecent().args[0]({ data: {} });
-
-                // Verify that these values changed;
-                // don't test for specific text.
-                expect(indicator.getText()).not.toEqual(initialText);
-                expect(indicator.getGlyphClass()).not.toEqual(initialGlyphClass);
-                expect(indicator.getDescription()).not.toEqual(initialDescrption);
-
-                // Do check for specific class
-                expect(indicator.getGlyphClass()).toEqual("ok");
-            });
-
-            it("changes when the server reports an error", function () {
-                var initialText = indicator.getText(),
-                    initialDescrption = indicator.getDescription(),
-                    initialGlyphClass = indicator.getGlyphClass();
-
-                // Nominal just means getting back an object, with
-                // an error field.
-                mockPromise.then.calls.mostRecent().args[0](
-                    { data: { error: "Uh oh." } }
-                );
-
-                // Verify that these values changed;
-                // don't test for specific text.
-                expect(indicator.getText()).not.toEqual(initialText);
-                expect(indicator.getGlyphClass()).not.toEqual(initialGlyphClass);
-                expect(indicator.getDescription()).not.toEqual(initialDescrption);
-
-                // Do check for specific class
-                expect(indicator.getGlyphClass()).toEqual("caution");
-
-            });
-
-            it("changes when the server cannot be reached", function () {
-                var initialText = indicator.getText(),
-                    initialDescrption = indicator.getDescription(),
-                    initialGlyphClass = indicator.getGlyphClass();
-
-                // Nominal just means getting back an object, without
-                // an error field.
-                mockPromise.then.calls.mostRecent().args[1]({ data: {} });
-
-                // Verify that these values changed;
-                // don't test for specific text.
-                expect(indicator.getText()).not.toEqual(initialText);
-                expect(indicator.getGlyphClass()).not.toEqual(initialGlyphClass);
-                expect(indicator.getDescription()).not.toEqual(initialDescrption);
-
-                // Do check for specific class
-                expect(indicator.getGlyphClass()).toEqual("err");
-            });
-
-        });
-    }
-);

platform/persistence/couch/test/CouchPersistenceProviderSpec.js

@@ -1,223 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, 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.
- *****************************************************************************/
-
-/**
- * DomainObjectProviderSpec. Created by vwoeltje on 11/6/14.
- */
-define(
-    ["../src/CouchPersistenceProvider"],
-    function (CouchPersistenceProvider) {
-
-        describe("The couch persistence provider", function () {
-            var mockHttp,
-                mockQ,
-                testSpace = "testSpace",
-                testPath = "/test/db",
-                capture,
-                provider;
-
-            function mockPromise(value) {
-                return {
-                    then: function (callback) {
-                        return mockPromise(callback(value));
-                    }
-                };
-            }
-
-            beforeEach(function () {
-                mockHttp = jasmine.createSpy("$http");
-                mockQ = jasmine.createSpyObj("$q", ["when"]);
-
-                mockQ.when.and.callFake(mockPromise);
-
-                // Capture promise results
-                capture = jasmine.createSpy("capture");
-
-                provider = new CouchPersistenceProvider(
-                    mockHttp,
-                    mockQ,
-                    testSpace,
-                    testPath
-                );
-            });
-
-            it("reports available spaces", function () {
-                provider.listSpaces().then(capture);
-                expect(capture).toHaveBeenCalledWith([testSpace]);
-            });
-
-            // General pattern of tests below is to simulate CouchDB's
-            // response, verify that request looks like what CouchDB
-            // would expect, and finally verify that CouchPersistenceProvider's
-            // return values match what is expected.
-            it("lists all available documents", function () {
-                mockHttp.and.returnValue(mockPromise({
-                    data: { rows: [{ id: "a" }, { id: "b" }, { id: "c" }] }
-                }));
-                provider.listObjects().then(capture);
-                expect(mockHttp).toHaveBeenCalledWith({
-                    url: "/test/db/_all_docs", // couch document listing
-                    method: "GET",
-                    data: undefined
-                });
-                expect(capture).toHaveBeenCalledWith(["a", "b", "c"]);
-            });
-
-            it("allows object creation", function () {
-                var model = { someKey: "some value" };
-                mockHttp.and.returnValue(mockPromise({
-                    data: {
-                        "_id": "abc",
-                        "_rev": "xyz",
-                        "ok": true
-                    }
-                }));
-                provider.createObject("testSpace", "abc", model).then(capture);
-                expect(mockHttp).toHaveBeenCalledWith({
-                    url: "/test/db/abc",
-                    method: "PUT",
-                    data: {
-                        "_id": "abc",
-                        "_rev": undefined,
-                        "_deleted": undefined,
-                        metadata: jasmine.any(Object),
-                        model: model
-                    }
-                });
-                expect(capture).toHaveBeenCalledWith(true);
-            });
-
-            it("allows object models to be read back", function () {
-                var model = { someKey: "some value" };
-                mockHttp.and.returnValue(mockPromise({
-                    data: {
-                        "_id": "abc",
-                        "_rev": "xyz",
-                        "model": model
-                    }
-                }));
-                provider.readObject("testSpace", "abc").then(capture);
-                expect(mockHttp).toHaveBeenCalledWith({
-                    url: "/test/db/abc",
-                    method: "GET",
-                    data: undefined
-                });
-                expect(capture).toHaveBeenCalledWith(model);
-            });
-
-            it("allows object update", function () {
-                var model = { someKey: "some value" };
-
-                // First do a read to populate rev tags...
-                mockHttp.and.returnValue(mockPromise({
-                    data: {
-                        "_id": "abc",
-                        "_rev": "xyz",
-                        "model": {}
-                    }
-                }));
-                provider.readObject("testSpace", "abc");
-
-                // Now perform an update
-                mockHttp.and.returnValue(mockPromise({
-                    data: {
-                        "_id": "abc",
-                        "_rev": "uvw",
-                        "ok": true
-                    }
-                }));
-                provider.updateObject("testSpace", "abc", model).then(capture);
-                expect(mockHttp).toHaveBeenCalledWith({
-                    url: "/test/db/abc",
-                    method: "PUT",
-                    data: {
-                        "_id": "abc",
-                        "_rev": "xyz",
-                        "_deleted": undefined,
-                        metadata: jasmine.any(Object),
-                        model: model
-                    }
-                });
-                expect(capture).toHaveBeenCalledWith(true);
-            });
-
-            it("allows object deletion", function () {
-                // First do a read to populate rev tags...
-                mockHttp.and.returnValue(mockPromise({
-                    data: {
-                        "_id": "abc",
-                        "_rev": "xyz",
-                        "model": {}
-                    }
-                }));
-                provider.readObject("testSpace", "abc");
-
-                // Now perform an update
-                mockHttp.and.returnValue(mockPromise({
-                    data: {
-                        "_id": "abc",
-                        "_rev": "uvw",
-                        "ok": true
-                    }
-                }));
-                provider.deleteObject("testSpace", "abc", {}).then(capture);
-                expect(mockHttp).toHaveBeenCalledWith({
-                    url: "/test/db/abc",
-                    method: "PUT",
-                    data: {
-                        "_id": "abc",
-                        "_rev": "xyz",
-                        "_deleted": true,
-                        metadata: jasmine.any(Object),
-                        model: {}
-                    }
-                });
-                expect(capture).toHaveBeenCalledWith(true);
-            });
-
-            it("reports failure to create objects", function () {
-                var model = { someKey: "some value" };
-                mockHttp.and.returnValue(mockPromise({
-                    data: {
-                        "_id": "abc",
-                        "_rev": "xyz",
-                        "ok": false
-                    }
-                }));
-                provider.createObject("testSpace", "abc", model).then(capture);
-                expect(capture).toHaveBeenCalledWith(false);
-            });
-
-            it("returns undefined when objects are not found", function () {
-                // Act like a 404
-                mockHttp.and.returnValue({
-                    then: function (success, fail) {
-                        return mockPromise(fail());
-                    }
-                });
-                provider.readObject("testSpace", "abc").then(capture);
-                expect(capture).toHaveBeenCalledWith(undefined);
-            });
-
-        });
-    }
-);

src/MCT.js

@@ -284,7 +284,6 @@ define([
         this.install(this.plugins.ViewDatumAction());
         this.install(this.plugins.ObjectInterceptors());
         this.install(this.plugins.NonEditableFolder());
-        this.install(this.plugins.Devices());
     }
 
     MCT.prototype = Object.create(EventEmitter.prototype);
@@ -404,24 +403,39 @@ define([
             this.router.setPath('/browse/');
         });
 
-        if (!isHeadlessMode) {
-            const appLayout = new Vue({
-                components: {
-                    'Layout': Layout.default
-                },
-                provide: {
-                    openmct: this
-                },
-                template: '<Layout ref="layout"></Layout>'
-            });
-            domElement.appendChild(appLayout.$mount().$el);
+        /**
+         * Fired by [MCT]{@link module:openmct.MCT} when the application
+         * is started.
+         * @event start
+         * @memberof module:openmct.MCT~
+         */
+        const startPromise = new Main();
+        startPromise.run(this)
+            .then(function (angular) {
+                this.$angular = angular;
+                // OpenMCT Object provider doesn't operate properly unless
+                // something has depended upon objectService.  Cool, right?
+                this.$injector.get('objectService');
 
-            this.layout = appLayout.$refs.layout;
-            Browse(this);
-        }
+                if (!isHeadlessMode) {
+                    const appLayout = new Vue({
+                        components: {
+                            'Layout': Layout.default
+                        },
+                        provide: {
+                            openmct: this
+                        },
+                        template: '<Layout ref="layout"></Layout>'
+                    });
+                    domElement.appendChild(appLayout.$mount().$el);
 
-        this.router.start();
-        this.emit('start');
+                    this.layout = appLayout.$refs.layout;
+                    Browse(this);
+                }
+
+                this.router.start();
+                this.emit('start');
+            }.bind(this));
     };
 
     MCT.prototype.startHeadless = function () {
@@ -446,6 +460,13 @@ define([
         this.router.destroy();
     };
 
+    /**
+     * Expose this project's Vue so plugins can make use of it.
+     *
+     * @memberof module:openmct.MCT#
+     */
+    MCT.prototype.Vue = Vue;
+
     MCT.prototype.plugins = plugins;
 
     return MCT;

src/adapter/bundle.js

@@ -36,7 +36,8 @@ define([
     './views/installLegacyViews',
     './policies/LegacyCompositionPolicyAdapter',
     './actions/LegacyActionAdapter',
-    './services/LegacyPersistenceAdapter'
+    './services/LegacyPersistenceAdapter',
+    './services/ExportImageService'
 ], function (
     ActionDialogDecorator,
     AdapterCapability,
@@ -53,7 +54,8 @@ define([
     installLegacyViews,
     legacyCompositionPolicyAdapter,
     LegacyActionAdapter,
-    LegacyPersistenceAdapter
+    LegacyPersistenceAdapter,
+    ExportImageService
 ) {
     return {
         name: 'src/adapter',
@@ -82,6 +84,13 @@ define([
                             "identifierService",
                             "cacheService"
                         ]
+                    },
+                    {
+                        "key": "exportImageService",
+                        "implementation": ExportImageService,
+                        "depends": [
+                            "dialogService"
+                        ]
                     }
                 ],
                 components: [

src/adapter/services/LegacyObjectAPIInterceptor.js

@@ -52,7 +52,7 @@ define([
 
             oldStyleObject.getCapability('mutation').mutate(function () {
                 return utils.toOldFormat(newStyleObject);
-            });
+            }, newStyleObject.modified);
 
             removeGeneralTopicListener = this.generalTopic.listen(handleLegacyMutation);
         }.bind(this);

src/api/objects/MutableDomainObject.js

@@ -76,7 +76,10 @@ class MutableDomainObject {
     }
     $set(path, value) {
         _.set(this, path, value);
-        _.set(this, 'modified', Date.now());
+
+        if (path !== 'persisted' && path !== 'modified') {
+            _.set(this, 'modified', Date.now());
+        }
 
         //Emit secret synchronization event first, so that all objects are in sync before subsequent events fired.
         this._globalEventEmitter.emit(qualifiedEventName(this, '$_synchronize_model'), this);
@@ -112,9 +115,11 @@ class MutableDomainObject {
         return () => this._instanceEventEmitter.off(event, callback);
     }
     $destroy() {
-        this._observers.forEach(observer => observer());
-        delete this._globalEventEmitter;
-        delete this._observers;
+        while (this._observers.length > 0) {
+            const observer = this._observers.pop();
+            observer();
+        }
+
         this._instanceEventEmitter.emit('$_destroy');
     }
 

src/api/objects/ObjectAPI.js

@@ -38,6 +38,9 @@ function ObjectAPI(typeRegistry, openmct) {
     this.eventEmitter = new EventEmitter();
     this.providers = {};
     this.rootRegistry = new RootRegistry();
+    this.injectIdentifierService = function () {
+        this.identifierService = openmct.$injector.get("identifierService");
+    };
 
     this.rootProvider = new RootObjectProvider(this.rootRegistry);
     this.cache = {};
@@ -52,16 +55,33 @@ ObjectAPI.prototype.supersecretSetFallbackProvider = function (p) {
     this.fallbackProvider = p;
 };
 
+/**
+ * @private
+ */
+ObjectAPI.prototype.getIdentifierService = function () {
+    // Lazily acquire identifier service
+    if (!this.identifierService) {
+        this.injectIdentifierService();
+    }
+
+    return this.identifierService;
+};
+
 /**
  * Retrieve the provider for a given identifier.
  * @private
  */
 ObjectAPI.prototype.getProvider = function (identifier) {
+    //handles the '' vs 'mct' namespace issue
+    const keyString = utils.makeKeyString(identifier);
+    const identifierService = this.getIdentifierService();
+    const namespace = identifierService.parse(keyString).getSpace();
+
     if (identifier.key === 'ROOT') {
         return this.rootProvider;
     }
 
-    return this.providers[identifier.namespace] || this.fallbackProvider;
+    return this.providers[namespace] || this.fallbackProvider;
 };
 
 /**
@@ -141,6 +161,7 @@ ObjectAPI.prototype.addProvider = function (namespace, provider) {
 
 ObjectAPI.prototype.get = function (identifier, abortSignal) {
     let keystring = this.makeKeyString(identifier);
+
     if (this.cache[keystring] !== undefined) {
         return this.cache[keystring];
     }
@@ -156,15 +177,16 @@ ObjectAPI.prototype.get = function (identifier, abortSignal) {
         throw new Error('Provider does not support get!');
     }
 
-    let objectPromise = provider.get(identifier, abortSignal);
-    this.cache[keystring] = objectPromise;
-
-    return objectPromise.then(result => {
+    let objectPromise = provider.get(identifier, abortSignal).then(result => {
         delete this.cache[keystring];
         result = this.applyGetInterceptors(identifier, result);
 
         return result;
     });
+
+    this.cache[keystring] = objectPromise;
+
+    return objectPromise;
 };
 
 /**
@@ -464,6 +486,12 @@ ObjectAPI.prototype.getOriginalPath = function (identifier, path = []) {
     });
 };
 
+ObjectAPI.prototype.isObjectPathToALink = function (domainObject, objectPath) {
+    return objectPath !== undefined
+        && objectPath.length > 1
+        && domainObject.location !== this.makeKeyString(objectPath[1].identifier);
+};
+
 /**
  * Uniquely identifies a domain object.
  *
@@ -500,8 +528,10 @@ ObjectAPI.prototype.getOriginalPath = function (identifier, path = []) {
  */
 
 function hasAlreadyBeenPersisted(domainObject) {
-    return domainObject.persisted !== undefined
-        && domainObject.persisted === domainObject.modified;
+    const result = domainObject.persisted !== undefined
+        && domainObject.persisted >= domainObject.modified;
+
+    return result;
 }
 
 export default ObjectAPI;

src/api/telemetry/DefaultMetadataProvider.js

@@ -116,9 +116,11 @@ define([
      * @private
      */
     DefaultMetadataProvider.prototype.typeHasTelemetry = function (domainObject) {
-        const type = this.openmct.types.get(domainObject.type);
+        if (!this.typeService) {
+            this.typeService = this.openmct.$injector.get('typeService');
+        }
 
-        return Boolean(type.definition.telemetry);
+        return Boolean(this.typeService.getType(domainObject.type).typeDef.telemetry);
     };
 
     return DefaultMetadataProvider;

src/api/telemetry/TelemetryAPI.js

@@ -142,8 +142,6 @@ define([
         this.metadataCache = new WeakMap();
         this.formatMapCache = new WeakMap();
         this.valueFormatterCache = new WeakMap();
-
-        this.formatters = new Map();
     }
 
     /**
@@ -415,6 +413,17 @@ define([
         return _.sortBy(options, sortKeys);
     };
 
+    /**
+     * @private
+     */
+    TelemetryAPI.prototype.getFormatService = function () {
+        if (!this.formatService) {
+            this.formatService = this.openmct.$injector.get('formatService');
+        }
+
+        return this.formatService;
+    };
+
     /**
      * Get a value formatter for a given valueMetadata.
      *
@@ -424,7 +433,7 @@ define([
         if (!this.valueFormatterCache.has(valueMetadata)) {
             this.valueFormatterCache.set(
                 valueMetadata,
-                new TelemetryValueFormatter(valueMetadata, this.formatters)
+                new TelemetryValueFormatter(valueMetadata, this.getFormatService())
             );
         }
 
@@ -438,11 +447,9 @@ define([
      * @returns {Format}
      */
     TelemetryAPI.prototype.getFormatter = function (key) {
-        if (this.formatters.has(key)) {
-            return this.formatters.get(key);
-        } else {
-            throw new Error(`Unknown type ${key}`);
-        }
+        const formatMap = this.getFormatService().formatMap;
+
+        return formatMap[key];
     };
 
     /**
@@ -469,7 +476,12 @@ define([
      * @param {Format} format the
      */
     TelemetryAPI.prototype.addFormat = function (format) {
-        this.formatters.set(format.key, format);
+        this.openmct.legacyExtension('formats', {
+            key: format.key,
+            implementation: function () {
+                return format;
+            }
+        });
     };
 
     /**

src/api/telemetry/TelemetryValueFormatter.js

@@ -28,7 +28,8 @@ define([
     printj
 ) {
 
-    function TelemetryValueFormatter(valueMetadata, formatters) {
+    // TODO: needs reference to formatService;
+    function TelemetryValueFormatter(valueMetadata, formatService) {
         const numberFormatter = {
             parse: function (x) {
                 return Number(x);
@@ -42,7 +43,13 @@ define([
         };
 
         this.valueMetadata = valueMetadata;
-        this.formatter = formatters.get(valueMetadata.format) || numberFormatter;
+        try {
+            this.formatter = formatService
+                .getFormat(valueMetadata.format, valueMetadata);
+        } catch (e) {
+            // TODO: Better formatting
+            this.formatter = numberFormatter;
+        }
 
         if (valueMetadata.format === 'enum') {
             this.formatter = {};

src/installDefaultBundles.js

@@ -90,7 +90,6 @@ define([
     '../platform/framework/src/load/Bundle',
     '../platform/identity/bundle',
     '../platform/persistence/aggregator/bundle',
-    '../platform/persistence/couch/bundle',
     '../platform/persistence/elastic/bundle',
     '../platform/persistence/local/bundle',
     '../platform/persistence/queue/bundle',

src/plugins/LADTable/LADTableSetViewProvider.js

@@ -43,12 +43,16 @@ export default function LADTableSetViewProvider(openmct) {
                         components: {
                             LadTableSet: LadTableSet
                         },
+                        data() {
+                            return {
+                                domainObject
+                            };
+                        },
                         provide: {
                             openmct,
-                            domainObject,
                             objectPath
                         },
-                        template: '<lad-table-set></lad-table-set>'
+                        template: '<lad-table-set :domain-object="domainObject"></lad-table-set>'
                     });
                 },
                 destroy: function (element) {

src/plugins/LADTable/components/LADRow.vue

@@ -56,7 +56,7 @@ export default {
             type: Object,
             required: true
         },
-        objectPath: {
+        pathToTable: {
             type: Array,
             required: true
         },
@@ -66,20 +66,19 @@ export default {
         }
     },
     data() {
-        let currentObjectPath = this.objectPath.slice();
-        currentObjectPath.unshift(this.domainObject);
-
         return {
             timestamp: undefined,
             value: '---',
             valueClass: '',
-            currentObjectPath,
             unit: ''
         };
     },
     computed: {
         formattedTimestamp() {
             return this.timestamp !== undefined ? this.getFormattedTimestamp(this.timestamp) : '---';
+        },
+        objectPath() {
+            return [this.domainObject, ...this.pathToTable];
         }
     },
     mounted() {
@@ -182,7 +181,7 @@ export default {
             };
         },
         showContextMenu(event) {
-            let actionCollection = this.openmct.actions.get(this.currentObjectPath, this.getView());
+            let actionCollection = this.openmct.actions.get(this.objectPath, this.getView());
             let allActions = actionCollection.getActionsObject();
             let applicableActions = CONTEXT_MENU_ACTIONS.map(key => allActions[key]);
 

src/plugins/LADTable/components/LADTable.vue

@@ -33,10 +33,10 @@
         </thead>
         <tbody>
             <lad-row
-                v-for="item in items"
-                :key="item.key"
-                :domain-object="item.domainObject"
-                :object-path="objectPath"
+                v-for="ladRow in items"
+                :key="ladRow.key"
+                :domain-object="ladRow.domainObject"
+                :path-to-table="objectPath"
                 :has-units="hasUnits"
             />
         </tbody>

src/plugins/LADTable/components/LadTableSet.vue

@@ -43,9 +43,10 @@
                 </td>
             </tr>
             <lad-row
-                v-for="telemetryObject in ladTelemetryObjects[ladTable.key]"
-                :key="telemetryObject.key"
-                :domain-object="telemetryObject.domainObject"
+                v-for="ladRow in ladTelemetryObjects[ladTable.key]"
+                :key="ladRow.key"
+                :domain-object="ladRow.domainObject"
+                :path-to-table="ladTable.objectPath"
                 :has-units="hasUnits"
             />
         </template>
@@ -60,7 +61,13 @@ export default {
     components: {
         LadRow
     },
-    inject: ['openmct', 'domainObject'],
+    inject: ['openmct', 'objectPath'],
+    props: {
+        domainObject: {
+            type: Object,
+            required: true
+        }
+    },
     data() {
         return {
             ladTableObjects: [],
@@ -106,6 +113,7 @@ export default {
             let ladTable = {};
             ladTable.domainObject = domainObject;
             ladTable.key = this.openmct.objects.makeKeyString(domainObject.identifier);
+            ladTable.objectPath = [domainObject, ...this.objectPath];
 
             this.$set(this.ladTelemetryObjects, ladTable.key, []);
             this.ladTableObjects.push(ladTable);

src/plugins/condition/Condition.js

@@ -82,7 +82,9 @@ export default class Condition extends EventEmitter {
                 if (this.isAnyOrAllTelemetry(criterion)) {
                     criterion.updateResult(datum, this.conditionManager.telemetryObjects);
                 } else {
-                    criterion.updateResult(datum);
+                    if (criterion.usesTelemetry(datum.id)) {
+                        criterion.updateResult(datum);
+                    }
                 }
             });
 
@@ -102,7 +104,7 @@ export default class Condition extends EventEmitter {
 
     isTelemetryUsed(id) {
         return this.criteria.some(criterion => {
-            return this.isAnyOrAllTelemetry(criterion) || criterion.telemetryObjectIdAsString === id;
+            return this.isAnyOrAllTelemetry(criterion) || criterion.usesTelemetry(id);
         });
     }
 
@@ -270,11 +272,11 @@ export default class Condition extends EventEmitter {
         }
     }
 
-    requestLADConditionResult() {
+    requestLADConditionResult(options) {
         let latestTimestamp;
         let criteriaResults = {};
         const criteriaRequests = this.criteria
-            .map(criterion => criterion.requestLAD(this.conditionManager.telemetryObjects));
+            .map(criterion => criterion.requestLAD(this.conditionManager.telemetryObjects, options));
 
         return Promise.all(criteriaRequests)
             .then(results => {

src/plugins/condition/ConditionManager.js

@@ -282,7 +282,7 @@ export default class ConditionManager extends EventEmitter {
         return currentCondition;
     }
 
-    requestLADConditionSetOutput() {
+    requestLADConditionSetOutput(options) {
         if (!this.conditions.length) {
             return Promise.resolve([]);
         }
@@ -291,7 +291,7 @@ export default class ConditionManager extends EventEmitter {
             let latestTimestamp;
             let conditionResults = {};
             const conditionRequests = this.conditions
-                .map(condition => condition.requestLADConditionResult());
+                .map(condition => condition.requestLADConditionResult(options));
 
             return Promise.all(conditionRequests)
                 .then((results) => {

src/plugins/condition/ConditionSetTelemetryProvider.js

@@ -40,10 +40,10 @@ export default class ConditionSetTelemetryProvider {
         return domainObject.type === 'conditionSet';
     }
 
-    request(domainObject) {
+    request(domainObject, options) {
         let conditionManager = this.getConditionManager(domainObject);
 
-        return conditionManager.requestLADConditionSetOutput()
+        return conditionManager.requestLADConditionSetOutput(options)
             .then(latestOutput => {
                 return latestOutput;
             });
@@ -52,7 +52,9 @@ export default class ConditionSetTelemetryProvider {
     subscribe(domainObject, callback) {
         let conditionManager = this.getConditionManager(domainObject);
 
-        conditionManager.on('conditionSetResultUpdated', callback);
+        conditionManager.on('conditionSetResultUpdated', (data) => {
+            callback(data);
+        });
 
         return this.destroyConditionManager.bind(this, this.openmct.objects.makeKeyString(domainObject.identifier));
     }

src/plugins/condition/StyleRuleManager.js

@@ -35,6 +35,7 @@ export default class StyleRuleManager extends EventEmitter {
         if (styleConfiguration) {
             this.initialize(styleConfiguration);
             if (styleConfiguration.conditionSetIdentifier) {
+                this.openmct.time.on("bounds", this.refreshData.bind(this));
                 this.subscribeToConditionSet();
             } else {
                 this.applyStaticStyle();
@@ -83,6 +84,25 @@ export default class StyleRuleManager extends EventEmitter {
         });
     }
 
+    refreshData(bounds, isTick) {
+        if (!isTick) {
+            let options = {
+                start: bounds.start,
+                end: bounds.end,
+                size: 1,
+                strategy: 'latest'
+            };
+            this.openmct.objects.get(this.conditionSetIdentifier).then((conditionSetDomainObject) => {
+                this.openmct.telemetry.request(conditionSetDomainObject, options)
+                    .then(output => {
+                        if (output && output.length) {
+                            this.handleConditionSetResultUpdated(output[0]);
+                        }
+                    });
+            });
+        }
+    }
+
     updateObjectStyleConfig(styleConfiguration) {
         if (!styleConfiguration || !styleConfiguration.conditionSetIdentifier) {
             this.initialize(styleConfiguration || {});
@@ -160,10 +180,14 @@ export default class StyleRuleManager extends EventEmitter {
 
     destroy() {
         if (this.stopProvidingTelemetry) {
+
             this.stopProvidingTelemetry();
             delete this.stopProvidingTelemetry;
         }
 
+        this.openmct.time.off("bounds", this.refreshData);
+        this.openmct.editor.off('isEditing', this.toggleSubscription);
+
         this.conditionSetIdentifier = undefined;
     }
 

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

@@ -344,6 +344,11 @@ export default {
                 const layoutItem = selectionItem[0].context.layoutItem;
                 const isChildItem = selectionItem.length > 1;
 
+                if (!item && !layoutItem) {
+                    // cases where selection is used for table cells
+                    return;
+                }
+
                 if (!isChildItem) {
                     domainObject = item;
                     itemStyle = getApplicableStylesForItem(item);

src/plugins/condition/criterion/AllTelemetryCriterion.js

@@ -147,12 +147,16 @@ export default class AllTelemetryCriterion extends TelemetryCriterion {
         this.result = evaluateResults(Object.values(this.telemetryDataCache), this.telemetry);
     }
 
-    requestLAD(telemetryObjects) {
-        const options = {
+    requestLAD(telemetryObjects, requestOptions) {
+        let options = {
             strategy: 'latest',
             size: 1
         };
 
+        if (requestOptions !== undefined) {
+            options = Object.assign(options, requestOptions);
+        }
+
         if (!this.isValid()) {
             return this.formatData({}, telemetryObjects);
         }

src/plugins/condition/criterion/TelemetryCriterion.js

@@ -58,6 +58,10 @@ export default class TelemetryCriterion extends EventEmitter {
         }
     }
 
+    usesTelemetry(id) {
+        return this.telemetryObjectIdAsString && (this.telemetryObjectIdAsString === id);
+    }
+
     subscribeForStaleData() {
         if (this.stalenessSubscription) {
             this.stalenessSubscription.clear();
@@ -133,12 +137,16 @@ export default class TelemetryCriterion extends EventEmitter {
         }
     }
 
-    requestLAD() {
-        const options = {
+    requestLAD(telemetryObjects, requestOptions) {
+        let options = {
             strategy: 'latest',
             size: 1
         };
 
+        if (requestOptions !== undefined) {
+            options = Object.assign(options, requestOptions);
+        }
+
         if (!this.isValid()) {
             return {
                 id: this.id,

src/plugins/condition/utils/styleUtils.js

@@ -104,7 +104,7 @@ export function getConsolidatedStyleValues(multipleItemStyles) {
     const properties = Object.keys(styleProps);
     properties.forEach((property) => {
         const values = aggregatedStyleValues[property];
-        if (values.length) {
+        if (values && values.length) {
             if (values.every(value => value === values[0])) {
                 styleValues[property] = values[0];
             } else {

src/plugins/devices/plugin.js

@@ -1,31 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-export default function plugin() {
-    return function install(openmct) {
-        openmct.on('start', () => {
-            const body = document.getElementsByTagName('body')[0];
-            body.classList.add('desktop');
-            body.classList.add('portrait');
-        });
-    };
-}

src/plugins/displayLayout/components/SubobjectView.vue

@@ -147,7 +147,7 @@ export default {
             this.mutablePromise.then(() => {
                 this.openmct.objects.destroyMutable(this.domainObject);
             });
-        } else {
+        } else if (this.domainObject.isMutable) {
             this.openmct.objects.destroyMutable(this.domainObject);
         }
     },

src/plugins/displayLayout/components/TelemetryView.vue

@@ -240,7 +240,7 @@ export default {
             this.mutablePromise.then(() => {
                 this.openmct.objects.destroyMutable(this.domainObject);
             });
-        } else {
+        } else if (this.domainObject.isMutable) {
             this.openmct.objects.destroyMutable(this.domainObject);
         }
     },
@@ -269,7 +269,12 @@ export default {
         },
         subscribeToObject() {
             this.subscription = this.openmct.telemetry.subscribe(this.domainObject, function (datum) {
-                if (this.openmct.time.clock() !== undefined) {
+                const key = this.openmct.time.timeSystem().key;
+                const datumTimeStamp = datum[key];
+                if (this.openmct.time.clock() !== undefined
+                    || (datumTimeStamp
+                        && (this.openmct.time.bounds().end >= datumTimeStamp))
+                ) {
                     this.updateView(datum);
                 }
             }.bind(this));

src/plugins/filters/components/FiltersView.vue

@@ -90,14 +90,12 @@ export default {
         this.composition.load();
         this.unobserve = this.openmct.objects.observe(this.providedObject, 'configuration.filters', this.updatePersistedFilters);
         this.unobserveGlobalFilters = this.openmct.objects.observe(this.providedObject, 'configuration.globalFilters', this.updateGlobalFilters);
-        this.unobserveAllMutation = this.openmct.objects.observe(this.providedObject, '*', (mutatedObject) => this.providedObject = mutatedObject);
     },
     beforeDestroy() {
         this.composition.off('add', this.addChildren);
         this.composition.off('remove', this.removeChildren);
         this.unobserve();
         this.unobserveGlobalFilters();
-        this.unobserveAllMutation();
     },
     methods: {
         addChildren(domainObject) {
@@ -158,25 +156,28 @@ export default {
         },
         getGlobalFiltersToRemove(keyString) {
             let filtersToRemove = new Set();
+            const child = this.children[keyString];
+            if (child && child.metadataWithFilters) {
+                const metadataWithFilters = child.metadataWithFilters;
+                metadataWithFilters.forEach(metadatum => {
+                    let keepFilter = false;
+                    Object.keys(this.children).forEach(childKeyString => {
+                        if (childKeyString !== keyString) {
+                            let filterMatched = this.children[childKeyString].metadataWithFilters.some(childMetadatum => childMetadatum.key === metadatum.key);
 
-            this.children[keyString].metadataWithFilters.forEach(metadatum => {
-                let keepFilter = false;
-                Object.keys(this.children).forEach(childKeyString => {
-                    if (childKeyString !== keyString) {
-                        let filterMatched = this.children[childKeyString].metadataWithFilters.some(childMetadatum => childMetadatum.key === metadatum.key);
+                            if (filterMatched) {
+                                keepFilter = true;
 
-                        if (filterMatched) {
-                            keepFilter = true;
-
-                            return;
+                                return;
+                            }
                         }
+                    });
+
+                    if (!keepFilter) {
+                        filtersToRemove.add(metadatum.key);
                     }
                 });
-
-                if (!keepFilter) {
-                    filtersToRemove.add(metadatum.key);
-                }
-            });
+            }
 
             return Array.from(filtersToRemove);
         },

src/plugins/folderView/plugin.js

@@ -29,13 +29,6 @@ define([
 ) {
     return function plugin() {
         return function install(openmct) {
-            openmct.types.addType('folder', {
-                name: "Folder",
-                key: "folder",
-                description: "Create folders to organize other objects or links to objects without the ability to edit it's properties.",
-                cssClass: "icon-folder",
-                creatable: true
-            });
             openmct.objectViews.addProvider(new FolderGridView(openmct));
             openmct.objectViews.addProvider(new FolderListView(openmct));
         };

src/plugins/imagery/components/Compass/Compass.vue

@@ -23,7 +23,7 @@
 <template>
 <div
     class="c-compass"
-    :style="compassDimensionsStyle"
+    :style="`width: ${ sizedImageDimensions.width }px; height: ${ sizedImageDimensions.height }px`"
 >
     <CompassHUD
         v-if="hasCameraFieldOfView"
@@ -32,8 +32,9 @@
         :camera-pan="cameraPan"
     />
     <CompassRose
-        v-if="hasCameraFieldOfView"
+        v-if="true"
         :heading="heading"
+        :sized-image-width="sizedImageDimensions.width"
         :sun-heading="sunHeading"
         :camera-angle-of-view="cameraAngleOfView"
         :camera-pan="cameraPan"
@@ -77,6 +78,20 @@ export default {
         }
     },
     computed: {
+        sizedImageDimensions() {
+            let sizedImageDimensions = {};
+            if ((this.containerWidth / this.containerHeight) > this.naturalAspectRatio) {
+                // container is wider than image
+                sizedImageDimensions.width = this.containerHeight * this.naturalAspectRatio;
+                sizedImageDimensions.height = this.containerHeight;
+            } else {
+                // container is taller than image
+                sizedImageDimensions.width = this.containerWidth;
+                sizedImageDimensions.height = this.containerWidth * this.naturalAspectRatio;
+            }
+
+            return sizedImageDimensions;
+        },
         hasCameraFieldOfView() {
             return this.cameraPan !== undefined && this.cameraAngleOfView > 0;
         },
@@ -94,25 +109,6 @@ export default {
         },
         cameraAngleOfView() {
             return CAMERA_ANGLE_OF_VIEW;
-        },
-        compassDimensionsStyle() {
-            const containerAspectRatio = this.containerWidth / this.containerHeight;
-
-            let width;
-            let height;
-
-            if (containerAspectRatio < this.naturalAspectRatio) {
-                width = '100%';
-                height = `${ this.containerWidth / this.naturalAspectRatio }px`;
-            } else {
-                width = `${ this.containerHeight * this.naturalAspectRatio }px`;
-                height = '100%';
-            }
-
-            return {
-                width: width,
-                height: height
-            };
         }
     },
     methods: {

src/plugins/imagery/components/Compass/CompassRose.vue

@@ -22,129 +22,134 @@
 
 <template>
 <div
-    class="c-direction-rose"
-    @click="toggleLockCompass"
+    class="w-direction-rose"
+    :class="compassRoseSizingClasses"
 >
     <div
-        class="c-nsew"
-        :style="compassRoseStyle"
+        class="c-direction-rose"
+        @click="toggleLockCompass"
     >
-        <svg
-            class="c-nsew__minor-ticks"
-            viewBox="0 0 100 100"
+        <div
+            class="c-nsew"
+            :style="compassRoseStyle"
         >
-            <rect
-                class="c-nsew__tick c-tick-ne"
-                x="49"
-                y="0"
-                width="2"
-                height="5"
-            />
-            <rect
-                class="c-nsew__tick c-tick-se"
-                x="95"
-                y="49"
-                width="5"
-                height="2"
-            />
-            <rect
-                class="c-nsew__tick c-tick-sw"
-                x="49"
-                y="95"
-                width="2"
-                height="5"
-            />
-            <rect
-                class="c-nsew__tick c-tick-nw"
-                x="0"
-                y="49"
-                width="5"
-                height="2"
-            />
+            <svg
+                class="c-nsew__minor-ticks"
+                viewBox="0 0 100 100"
+            >
+                <rect
+                    class="c-nsew__tick c-tick-ne"
+                    x="49"
+                    y="0"
+                    width="2"
+                    height="5"
+                />
+                <rect
+                    class="c-nsew__tick c-tick-se"
+                    x="95"
+                    y="49"
+                    width="5"
+                    height="2"
+                />
+                <rect
+                    class="c-nsew__tick c-tick-sw"
+                    x="49"
+                    y="95"
+                    width="2"
+                    height="5"
+                />
+                <rect
+                    class="c-nsew__tick c-tick-nw"
+                    x="0"
+                    y="49"
+                    width="5"
+                    height="2"
+                />
 
-        </svg>
+            </svg>
 
-        <svg
-            class="c-nsew__ticks"
-            viewBox="0 0 100 100"
-        >
-            <polygon
-                class="c-nsew__tick c-tick-n"
-                points="50,0 57,5 43,5"
-            />
-            <rect
-                class="c-nsew__tick c-tick-e"
-                x="95"
-                y="49"
-                width="5"
-                height="2"
-            />
-            <rect
-                class="c-nsew__tick c-tick-w"
-                x="0"
-                y="49"
-                width="5"
-                height="2"
-            />
-            <rect
-                class="c-nsew__tick c-tick-s"
-                x="49"
-                y="95"
-                width="2"
-                height="5"
-            />
+            <svg
+                class="c-nsew__ticks"
+                viewBox="0 0 100 100"
+            >
+                <polygon
+                    class="c-nsew__tick c-tick-n"
+                    points="50,0 60,10 40,10"
+                />
+                <rect
+                    class="c-nsew__tick c-tick-e"
+                    x="95"
+                    y="49"
+                    width="5"
+                    height="2"
+                />
+                <rect
+                    class="c-nsew__tick c-tick-w"
+                    x="0"
+                    y="49"
+                    width="5"
+                    height="2"
+                />
+                <rect
+                    class="c-nsew__tick c-tick-s"
+                    x="49"
+                    y="95"
+                    width="2"
+                    height="5"
+                />
 
-            <text
-                class="c-nsew__label c-label-n"
-                text-anchor="middle"
-                :transform="northTextTransform"
-            >N</text>
-            <text
-                class="c-nsew__label c-label-e"
-                text-anchor="middle"
-                :transform="eastTextTransform"
-            >E</text>
-            <text
-                class="c-nsew__label c-label-w"
-                text-anchor="middle"
-                :transform="southTextTransform"
-            >W</text>
-            <text
-                class="c-nsew__label c-label-s"
-                text-anchor="middle"
-                :transform="westTextTransform"
-            >S</text>
-        </svg>
-    </div>
-
-    <div
-        v-if="hasHeading"
-        class="c-spacecraft-body"
-        :style="headingStyle"
-    >
-    </div>
-
-    <div
-        v-if="hasSunHeading"
-        class="c-sun"
-        :style="sunHeadingStyle"
-    ></div>
-
-    <div
-        class="c-cam-field"
-        :style="cameraPanStyle"
-    >
-        <div class="cam-field-half cam-field-half-l">
-            <div
-                class="cam-field-area"
-                :style="cameraFOVStyleLeftHalf"
-            ></div>
+                <text
+                    class="c-nsew__label c-label-n"
+                    text-anchor="middle"
+                    :transform="northTextTransform"
+                >N</text>
+                <text
+                    class="c-nsew__label c-label-e"
+                    text-anchor="middle"
+                    :transform="eastTextTransform"
+                >E</text>
+                <text
+                    class="c-nsew__label c-label-w"
+                    text-anchor="middle"
+                    :transform="southTextTransform"
+                >W</text>
+                <text
+                    class="c-nsew__label c-label-s"
+                    text-anchor="middle"
+                    :transform="westTextTransform"
+                >S</text>
+            </svg>
         </div>
-        <div class="cam-field-half cam-field-half-r">
-            <div
-                class="cam-field-area"
-                :style="cameraFOVStyleRightHalf"
-            ></div>
+
+        <div
+            v-if="hasHeading"
+            class="c-spacecraft-body"
+            :style="headingStyle"
+        >
+        </div>
+
+        <div
+            v-if="hasSunHeading"
+            class="c-sun"
+            :style="sunHeadingStyle"
+        ></div>
+
+        <div
+            class="c-cam-field"
+            :style="cameraPanStyle"
+        >
+            <div class="cam-field-half cam-field-half-l">
+                <div
+                    class="cam-field-area"
+                    :style="cameraFOVStyleLeftHalf"
+                ></div>
+            </div>
+            <div class="cam-field-half cam-field-half-r">
+                <div
+                    class="cam-field-area"
+                    :style="cameraFOVStyleRightHalf"
+                ></div>
+            </div>
         </div>
     </div>
 </div>
@@ -155,6 +160,10 @@ import { rotate } from './utils';
 
 export default {
     props: {
+        sizedImageWidth: {
+            type: Number,
+            required: true
+        },
         heading: {
             type: Number,
             required: true
@@ -177,12 +186,24 @@ export default {
         }
     },
     computed: {
-        north() {
-            return this.lockCompass ? rotate(-this.cameraPan) : 0;
+        compassRoseSizingClasses() {
+            let compassRoseSizingClasses = '';
+            if (this.sizedImageWidth < 300) {
+                compassRoseSizingClasses = '--rose-small --rose-min';
+            } else if (this.sizedImageWidth < 500) {
+                compassRoseSizingClasses = '--rose-small';
+            } else if (this.sizedImageWidth > 1000) {
+                compassRoseSizingClasses = '--rose-max';
+            }
+
+            return compassRoseSizingClasses;
         },
         compassRoseStyle() {
             return { transform: `rotate(${ this.north }deg)` };
         },
+        north() {
+            return this.lockCompass ? rotate(-this.cameraPan) : 0;
+        },
         northTextTransform() {
             return this.cardinalPointsTextTransform.north;
         },
@@ -204,10 +225,10 @@ export default {
             const rotation = `rotate(${ -this.north })`;
 
             return {
-                north: `translate(50,15) ${ rotation }`,
-                east: `translate(87,50) ${ rotation }`,
-                south: `translate(13,50) ${ rotation }`,
-                west: `translate(50,87) ${ rotation }`
+                north: `translate(50,23) ${ rotation }`,
+                east: `translate(82,50) ${ rotation }`,
+                south: `translate(18,50) ${ rotation }`,
+                west: `translate(50,82) ${ rotation }`
             };
         },
         hasHeading() {

src/plugins/imagery/components/Compass/compass.scss

@@ -10,6 +10,7 @@ $elemBg: rgba(black, 0.7);
 }
 
 .c-compass {
+    pointer-events: none; // This allows the image element to receive a browser-level context click
     position: absolute;
     left: 50%;
     top: 50%;
@@ -20,195 +21,253 @@ $elemBg: rgba(black, 0.7);
 
 /***************************** COMPASS HUD */
 .c-hud {
-  // To be placed within a imagery view, in the bounding box of the image
-  $m: 1px;
-  $padTB: 2px;
-  $padLR: $padTB;
-  color: $interfaceKeyColor;
-  font-size: 0.8em;
-  position: absolute;
-  top: $m; right: $m; left: $m;
-  height: 18px;
-
-  svg, div {
+    // To be placed within a imagery view, in the bounding box of the image
+    $m: 1px;
+    $padTB: 2px;
+    $padLR: $padTB;
+    color: $interfaceKeyColor;
+    font-size: 0.8em;
     position: absolute;
-  }
+    top: $m;
+    right: $m;
+    left: $m;
+    height: 18px;
 
-  &__display {
-      height: 30px;
-      pointer-events: all;
-      position: absolute;
-      top: 0;
-      right: 0;
-      left: 0;
-  }
+    svg, div {
+        position: absolute;
+    }
 
-  &__range {
-    border: 1px solid $interfaceKeyColor;
-    border-top-color: transparent;
-    position: absolute;
-    top: 50%; right: $padLR; bottom: $padTB; left: $padLR;
-  }
+    &__display {
+        height: 30px;
+        pointer-events: all;
+        position: absolute;
+        top: 0;
+        right: 0;
+        left: 0;
+    }
 
-  [class*="__dir"] {
-    // NSEW
-    display: inline-block;
-    font-weight: bold;
-    text-shadow: 0 1px 2px black;
-    top: 50%;
-    transform: translate(-50%,-50%);
-    z-index: 2;
-  }
+    &__range {
+        border: 1px solid $interfaceKeyColor;
+        border-top-color: transparent;
+        position: absolute;
+        top: 50%;
+        right: $padLR;
+        bottom: $padTB;
+        left: $padLR;
+    }
 
-  [class*="__dir--sub"] {
-    font-weight: normal;
-    opacity: 0.5;
-  }
+    [class*="__dir"] {
+        // NSEW
+        display: inline-block;
+        font-weight: bold;
+        text-shadow: 0 1px 2px black;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        z-index: 2;
+    }
 
-  &__sun {
-    $s: 10px;
-    @include sun('circle farthest-side at bottom');
-    bottom: $padTB + 2px;
-    height: $s; width: $s*2;
-    opacity: 0.8;
-    transform: translateX(-50%);
-    z-index: 1;
-  }
+    [class*="__dir--sub"] {
+        font-weight: normal;
+        opacity: 0.5;
+    }
+
+    &__sun {
+        $s: 10px;
+        @include sun('circle farthest-side at bottom');
+        bottom: $padTB + 2px;
+        height: $s;
+        width: $s*2;
+        opacity: 0.8;
+        transform: translateX(-50%);
+        z-index: 1;
+    }
 
 }
 
 /***************************** COMPASS DIRECTIONS */
 .c-nsew {
-  $color: $interfaceKeyColor;
-  $inset: 7%;
-  $tickHeightPerc: 15%;
-  text-shadow: black 0 0 10px;
-  top: $inset; right: $inset; bottom: $inset; left: $inset;
-  z-index: 3;
+    $color: $interfaceKeyColor;
+    $inset: 5%;
+    $tickHeightPerc: 15%;
+    text-shadow: black 0 0 10px;
+    top: $inset;
+    right: $inset;
+    bottom: $inset;
+    left: $inset;
+    z-index: 3;
 
-  &__tick,
-  &__label {
-    fill: $color;
-  }
+    &__tick,
+    &__label {
+        fill: $color;
+    }
 
-  &__minor-ticks {
-    opacity: 0.5;
-    transform-origin: center;
-    transform: rotate(45deg);
-  }
+    &__minor-ticks {
+        opacity: 0.5;
+        transform-origin: center;
+        transform: rotate(45deg);
+    }
 
-  &__label {
-    dominant-baseline: central;
-    font-size: 0.8em;
-    font-weight: bold;
-  }
+    &__label {
+        dominant-baseline: central;
+        font-size: 1.25em;
+        font-weight: bold;
+    }
 
-  .c-label-n {
-    font-size: 1.1em;
-  }
+    .c-label-n {
+        font-size: 2em;
+    }
 }
 
 /***************************** CAMERA FIELD ANGLE */
 .c-cam-field {
-  $color: white;
-  opacity: 0.2;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 2;
-
-  .cam-field-half {
+    $color: white;
+    opacity: 0.3;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
+    z-index: 2;
 
-    .cam-field-area {
-      background: $color;
-      top: -30%;
-      right: 0;
-      bottom: -30%;
-      left: 0;
-    }
+    .cam-field-half {
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
 
-    // clip-paths overlap a bit to avoid a gap between halves
-    &-l {
-      clip-path: polygon(0 0, 50.5% 0, 50.5% 100%, 0 100%);
-      .cam-field-area {
-        transform-origin: left center;
-      }
-    }
+        .cam-field-area {
+            background: $color;
+            top: -30%;
+            right: 0;
+            bottom: -30%;
+            left: 0;
+        }
 
-    &-r {
-      clip-path: polygon(49.5% 0, 100% 0, 100% 100%, 49.5% 100%);
-      .cam-field-area {
-        transform-origin: right center;
-      }
+        // clip-paths overlap a bit to avoid a gap between halves
+        &-l {
+            clip-path: polygon(0 0, 50.5% 0, 50.5% 100%, 0 100%);
+
+            .cam-field-area {
+                transform-origin: left center;
+            }
+        }
+
+        &-r {
+            clip-path: polygon(49.5% 0, 100% 0, 100% 100%, 49.5% 100%);
+
+            .cam-field-area {
+                transform-origin: right center;
+            }
+        }
     }
-  }
 }
 
 /***************************** SPACECRAFT BODY */
 .c-spacecraft-body {
-  $color: $interfaceKeyColor;
-  $s: 30%;
-  background: $color;
-  border-radius: 3px;
-  height: $s; width: $s;
-  left: 50%; top: 50%;
-  opacity: 0.4;
-  transform-origin: center top;
-
-  &:before {
-    // Direction arrow
-    $color: rgba(black, 0.5);
-    $arwPointerY: 60%;
-    $arwBodyOffset: 25%;
+    $color: $interfaceKeyColor;
+    $s: 30%;
     background: $color;
-    content: '';
-    display: block;
-    position: absolute;
-    top: 10%; right: 20%; bottom: 50%; left: 20%;
-    clip-path: polygon(50% 0, 100% $arwPointerY, 100%-$arwBodyOffset $arwPointerY, 100%-$arwBodyOffset 100%, $arwBodyOffset 100%, $arwBodyOffset $arwPointerY, 0 $arwPointerY);
-  }
+    border-radius: 3px;
+    height: $s;
+    width: $s;
+    left: 50%;
+    top: 50%;
+    opacity: 0.4;
+    transform-origin: center top;
+    transform: translateX(-50%); // center by default, overridden by CompassRose.vue / headingStyle()
+
+    &:before {
+        // Direction arrow
+        $color: rgba(black, 0.5);
+        $arwPointerY: 60%;
+        $arwBodyOffset: 25%;
+        background: $color;
+        content: '';
+        display: block;
+        position: absolute;
+        top: 10%;
+        right: 20%;
+        bottom: 50%;
+        left: 20%;
+        clip-path: polygon(50% 0, 100% $arwPointerY, 100%-$arwBodyOffset $arwPointerY, 100%-$arwBodyOffset 100%, $arwBodyOffset 100%, $arwBodyOffset $arwPointerY, 0 $arwPointerY);
+    }
 }
 
 /***************************** DIRECTION ROSE */
-.c-direction-rose {
-  $d: 100px;
-  $c2: rgba(white, 0.1);
-  background: $elemBg;
-  background-image: radial-gradient(circle closest-side, transparent, transparent 80%, $c2);
-  width: $d;
-  height: $d;
-  transform-origin: 0 0;
-  position: absolute;
-  bottom: 10px; left: 10px;
-  clip-path: circle(50% at 50% 50%);
-  border-radius: 100%;
-
-  svg, div {
+.w-direction-rose {
+    $s: 10%;
+    $m: 2%;
     position: absolute;
-  }
+    bottom: $m;
+    left: $m;
+    width: $s;
+    padding-top: $s;
 
-  // Sun
-  .c-sun {
+    &.--rose-min {
+        $s: 30px;
+        width: $s;
+        padding-top: $s;
+    }
+
+    &.--rose-small {
+        .c-nsew__minor-ticks,
+        .c-tick-w,
+        .c-tick-s,
+        .c-tick-e,
+        .c-label-w,
+        .c-label-s,
+        .c-label-e {
+            display: none;
+        }
+
+        .c-label-n {
+            font-size: 2.5em;
+        }
+    }
+
+    &.--rose-max {
+        $s: 100px;
+        width: $s;
+        padding-top: $s;
+    }
+}
+
+.c-direction-rose {
+    $c2: rgba(white, 0.1);
+    background: $elemBg;
+    background-image: radial-gradient(circle closest-side, transparent, transparent 80%, $c2);
+    transform-origin: 0 0;
+    position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
+    clip-path: circle(50% at 50% 50%);
+    border-radius: 100%;
+    pointer-events: all;
 
-    &:before {
-      $s: 35%;
-      @include sun();
-      content: '';
-      display: block;
-      position: absolute;
-      opacity: 0.7;
-      top: 0; left: 50%;
-      height:$s; width: $s;
-      transform: translate(-50%, -60%);
+    svg, div {
+        position: absolute;
+    }
+
+    // Sun
+    .c-sun {
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+
+        &:before {
+            $s: 35%;
+            @include sun();
+            content: '';
+            display: block;
+            position: absolute;
+            opacity: 0.7;
+            top: 0;
+            left: 50%;
+            height: $s;
+            width: $s;
+            transform: translate(-50%, -60%);
+        }
     }
-  }
 }

src/plugins/imagery/components/ImageryViewLayout.vue

@@ -135,9 +135,14 @@
              :class="{ selected: focusedImageIndex === index && isPaused }"
              @click="setFocusedImage(index, thumbnailClick)"
         >
-            <img class="c-thumb__image"
-                 :src="image.url"
+            <a href=""
+               :download="image.imageDownloadName"
+               @click.prevent
             >
+                <img class="c-thumb__image"
+                     :src="image.url"
+                >
+            </a>
             <div class="c-thumb__timestamp">{{ image.formattedTime }}</div>
         </div>
     </div>
@@ -218,6 +223,9 @@ export default {
         canTrackDuration() {
             return this.openmct.time.clock() && this.timeSystem.isUTCBased;
         },
+        focusedImageDownloadName() {
+            return this.getImageDownloadName(this.focusedImage);
+        },
         isNextDisabled() {
             let disabled = false;
 
@@ -345,6 +353,7 @@ export default {
         this.imageHints = { ...this.metadata.valuesForHints(['image'])[0] };
         this.durationFormatter = this.getFormatter(this.timeSystem.durationFormat || DEFAULT_DURATION_FORMATTER);
         this.imageFormatter = this.openmct.telemetry.getValueFormatter(this.imageHints);
+        this.imageDownloadNameHints = { ...this.metadata.valuesForHints(['imageDownloadName'])[0]};
 
         // related telemetry keys
         this.spacecraftPositionKeys = ['positionX', 'positionY', 'positionZ'];
@@ -532,6 +541,15 @@ export default {
             // Replace ISO "T" with a space to allow wrapping
             return dateTimeStr.replace("T", " ");
         },
+        getImageDownloadName(datum) {
+            let imageDownloadName = '';
+            if (datum) {
+                const key = this.imageDownloadNameHints.key;
+                imageDownloadName = datum[key];
+            }
+
+            return imageDownloadName;
+        },
         parseTime(datum) {
             if (!datum) {
                 return;
@@ -655,6 +673,7 @@ export default {
             image.formattedTime = this.formatTime(datum);
             image.url = this.formatImageUrl(datum);
             image.time = datum[this.timeKey];
+            image.imageDownloadName = this.getImageDownloadName(datum);
 
             this.imageHistory.push(image);
 
@@ -777,6 +796,9 @@ export default {
             this.focusedImageNaturalAspectRatio = undefined;
 
             const img = this.$refs.focusedImage;
+            if (!img) {
+                return;
+            }
 
             // TODO - should probably cache this
             img.addEventListener('load', () => {

src/plugins/interceptors/plugin.js

@@ -3,10 +3,6 @@ import myItemsInterceptor from "./myItemsInterceptor";
 
 export default function plugin() {
     return function install(openmct) {
-        openmct.objects.addRoot({
-            namespace: '',
-            key: 'mine'
-        });
         myItemsInterceptor(openmct);
         missingObjectInterceptor(openmct);
     };

src/plugins/localStorage/LocalStorageObjectProvider.js

@@ -1,41 +0,0 @@
-export default class LocalStorageObjectProvider {
-    constructor({spaceKey = 'mct'}) {
-        this.localStorage = window.localStorage;
-        this.space = this.initializeSpace(spaceKey);
-    }
-    get(identifier) {
-        if (this.getSpaceAsObject()[identifier.key] !== undefined) {
-            const persistedModel = this.getSpaceAsObject()[identifier.key];
-            const domainObject = {
-                identifier,
-                ...persistedModel
-            };
-
-            return Promise.resolve(domainObject);
-        } else {
-            return Promise.resolve(undefined);
-        }
-    }
-    getSpaceAsObject() {
-        return JSON.parse(this.space);
-    }
-    create(model) {
-        return this.setModel(model);
-    }
-    update(model) {
-        return this.setModel(model);
-    }
-    setModel(model) {
-        this.space[model.identifier.key] = JSON.stringify(model);
-        this.persist();
-
-        return Promise.resolve(true);
-    }
-    initializeSpace(spaceKey) {
-        if (this.localStorage[spaceKey] === undefined) {
-            this.localStorage[spaceKey] = JSON.stringify({});
-        }
-
-        return this.localStorage[spaceKey];
-    }
-}

src/plugins/localStorage/plugin.js

@@ -1,29 +0,0 @@
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web 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 Web 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 LocalStorageObjectProvider from './LocalStorageObjectProvider';
-
-export default function (namespace = '', storageSpace = 'mct') {
-    return function (openmct) {
-        openmct.objects.addProvider(namespace, new LocalStorageObjectProvider(storageSpace));
-    };
-}

src/plugins/notebook/components/Notebook.vue

@@ -430,7 +430,7 @@ export default {
                     }
 
                     // check for no entries first
-                    if (entries[section.id]) {
+                    if (entries[section.id] && entries[section.id][page.id]) {
                         const pageEntries = entries[section.id][page.id];
 
                         pageEntries.forEach(entry => {

src/plugins/notebook/components/SearchResults.vue

@@ -22,7 +22,7 @@
 
 <template>
 <div class="c-notebook__search-results">
-    <div class="c-notebook__search-results__header">Search Results</div>
+    <div class="c-notebook__search-results__header">Search Results ({{ results.length }})</div>
     <div class="c-notebook__entries">
         <NotebookEntry v-for="(result, index) in results"
                        :key="index"

src/plugins/persistence/couch/CouchObjectProvider.js

@@ -26,6 +26,7 @@ import CouchObjectQueue from "./CouchObjectQueue";
 const REV = "_rev";
 const ID = "_id";
 const HEARTBEAT = 50000;
+const ALL_DOCS = "_all_docs?include_docs=true";
 
 export default class CouchObjectProvider {
     // options {
@@ -41,6 +42,8 @@ export default class CouchObjectProvider {
         this.objectQueue = {};
         this.observeEnabled = options.disableObserve !== true;
         this.observers = {};
+        this.batchIds = [];
+
         if (this.observeEnabled) {
             this.observeObjectChanges(options.filter);
         }
@@ -67,6 +70,9 @@ export default class CouchObjectProvider {
         // stringify body if needed
         if (fetchOptions.body) {
             fetchOptions.body = JSON.stringify(fetchOptions.body);
+            fetchOptions.headers = {
+                "Content-Type": "application/json"
+            };
         }
 
         return fetch(this.url + '/' + subPath, fetchOptions)
@@ -78,14 +84,18 @@ export default class CouchObjectProvider {
             });
     }
 
-    // Check the response to a create/update/delete request;
-    // track the rev if it's valid, otherwise return false to
-    // indicate that the request failed.
-    // persist any queued objects
-    checkResponse(response, intermediateResponse) {
+    /**
+     * Check the response to a create/update/delete request;
+     * track the rev if it's valid, otherwise return false to
+     * indicate that the request failed.
+     * persist any queued objects
+     * @private
+     */
+    checkResponse(response, intermediateResponse, key) {
         let requestSuccess = false;
         const id = response ? response.id : undefined;
         let rev;
+
         if (response && response.ok) {
             rev = response.rev;
             requestSuccess = true;
@@ -103,9 +113,14 @@ export default class CouchObjectProvider {
             if (this.objectQueue[id].hasNext()) {
                 this.updateQueued(id);
             }
+        } else {
+            this.objectQueue[key].pending = false;
         }
     }
 
+    /**
+     * @private
+     */
     getModel(response) {
         if (response && response.model) {
             let key = response[ID];
@@ -119,8 +134,7 @@ export default class CouchObjectProvider {
             }
 
             //Sometimes CouchDB returns the old rev which fetching the object if there is a document update in progress
-            //Only update the rev if it's the first time we're getting the object from CouchDB. Subsequent revs should only be updated by updates.
-            if (!this.objectQueue[key].pending && !this.objectQueue[key].rev) {
+            if (!this.objectQueue[key].pending) {
                 this.objectQueue[key].updateRevision(response[REV]);
             }
 
@@ -131,10 +145,118 @@ export default class CouchObjectProvider {
     }
 
     get(identifier, abortSignal) {
-        return this.request(identifier.key, "GET", undefined, abortSignal).then(this.getModel.bind(this));
+        this.batchIds.push(identifier.key);
+
+        if (this.bulkPromise === undefined) {
+            this.bulkPromise = this.deferBatchedGet(abortSignal);
+        }
+
+        return this.bulkPromise
+            .then((domainObjectMap) => {
+                return domainObjectMap[identifier.key];
+            });
     }
 
-    async getObjectsByFilter(filter) {
+    /**
+     * @private
+     */
+    deferBatchedGet(abortSignal) {
+        // We until the next event loop cycle to "collect" all of the get
+        // requests triggered in this iteration of the event loop
+
+        return this.waitOneEventCycle().then(() => {
+            let batchIds = this.batchIds;
+
+            this.clearBatch();
+
+            if (batchIds.length === 1) {
+                let objectKey = batchIds[0];
+
+                //If there's only one request, just do a regular get
+                return this.request(objectKey, "GET", undefined, abortSignal)
+                    .then(this.returnAsMap(objectKey));
+            } else {
+                return this.bulkGet(batchIds, abortSignal);
+            }
+        });
+    }
+
+    /**
+     * @private
+     */
+    returnAsMap(objectKey) {
+        return (result) => {
+            let objectMap = {};
+            objectMap[objectKey] = this.getModel(result);
+
+            return objectMap;
+        };
+    }
+
+    /**
+     * @private
+     */
+    clearBatch() {
+        this.batchIds = [];
+        delete this.bulkPromise;
+    }
+
+    /**
+     * @private
+     */
+    waitOneEventCycle() {
+        return new Promise((resolve) => {
+            setTimeout(resolve);
+        });
+    }
+
+    /**
+     * @private
+     */
+    bulkGet(ids, signal) {
+        ids = this.removeDuplicates(ids);
+
+        const query = {
+            'keys': ids
+        };
+
+        return this.request(ALL_DOCS, 'POST', query, signal).then((response) => {
+            if (response && response.rows !== undefined) {
+                return response.rows.reduce((map, row) => {
+                    if (row.doc !== undefined) {
+                        map[row.key] = this.getModel(row.doc);
+                    }
+
+                    return map;
+                }, {});
+            } else {
+                return {};
+            }
+        });
+    }
+
+    /**
+     * @private
+     */
+    removeDuplicates(array) {
+        return Array.from(new Set(array));
+    }
+
+    search(query, abortSignal) {
+        const filter = {
+            "selector": {
+                "model": {
+                    "name": {
+                        "$regex": `(?i)${query}`
+                    }
+                }
+            }
+        };
+
+        return this.getObjectsByFilter(filter, abortSignal);
+    }
+
+    async getObjectsByFilter(filter, abortSignal) {
         let objects = [];
 
         let url = `${this.url}/_find`;
@@ -149,6 +271,7 @@ export default class CouchObjectProvider {
             headers: {
                 "Content-Type": "application/json"
             },
+            signal: abortSignal,
             body
         });
 
@@ -203,6 +326,9 @@ export default class CouchObjectProvider {
         };
     }
 
+    /**
+     * @private
+     */
     abortGetChanges() {
         if (this.controller) {
             this.controller.abort();
@@ -212,6 +338,9 @@ export default class CouchObjectProvider {
         return true;
     }
 
+    /**
+     * @private
+     */
     async observeObjectChanges(filter) {
         let intermediateResponse = this.getIntermediateResponse();
 
@@ -292,6 +421,9 @@ export default class CouchObjectProvider {
 
     }
 
+    /**
+     * @private
+     */
     getIntermediateResponse() {
         let intermediateResponse = {};
         intermediateResponse.promise = new Promise(function (resolve, reject) {
@@ -302,6 +434,9 @@ export default class CouchObjectProvider {
         return intermediateResponse;
     }
 
+    /**
+     * @private
+     */
     enqueueObject(key, model, intermediateResponse) {
         if (this.objectQueue[key]) {
             this.objectQueue[key].enqueue({
@@ -324,19 +459,22 @@ export default class CouchObjectProvider {
         const queued = this.objectQueue[key].dequeue();
         let document = new CouchDocument(key, queued.model);
         this.request(key, "PUT", document).then((response) => {
-            this.checkResponse(response, queued.intermediateResponse);
+            this.checkResponse(response, queued.intermediateResponse, key);
         });
 
         return intermediateResponse.promise;
     }
 
+    /**
+     * @private
+     */
     updateQueued(key) {
         if (!this.objectQueue[key].pending) {
             this.objectQueue[key].pending = true;
             const queued = this.objectQueue[key].dequeue();
             let document = new CouchDocument(key, queued.model, this.objectQueue[key].rev);
             this.request(key, "PUT", document).then((response) => {
-                this.checkResponse(response, queued.intermediateResponse);
+                this.checkResponse(response, queued.intermediateResponse, key);
             });
         }
     }

src/plugins/persistence/couch/pluginSpec.js

@@ -24,7 +24,6 @@ import {
     createOpenMct,
     resetApplicationState, spyOnBuiltins
 } from 'utils/testing';
-import CouchObjectProvider from './CouchObjectProvider';
 
 describe('the plugin', () => {
     let openmct;
@@ -42,7 +41,8 @@ describe('the plugin', () => {
                 namespace: '',
                 key: 'some-value'
             },
-            type: 'mock-type'
+            type: 'mock-type',
+            modified: 0
         };
         options = {
             url: testPath,
@@ -95,6 +95,7 @@ describe('the plugin', () => {
                     return {
                         ok: true,
                         _id: 'some-value',
+                        id: 'some-value',
                         _rev: 1,
                         model: {}
                     };
@@ -104,44 +105,130 @@ describe('the plugin', () => {
         });
 
         it('gets an object', () => {
-            openmct.objects.get(mockDomainObject.identifier).then((result) => {
+            return openmct.objects.get(mockDomainObject.identifier).then((result) => {
                 expect(result.identifier.key).toEqual(mockDomainObject.identifier.key);
             });
         });
 
         it('creates an object', () => {
-            openmct.objects.save(mockDomainObject).then((result) => {
+            return openmct.objects.save(mockDomainObject).then((result) => {
                 expect(provider.create).toHaveBeenCalled();
                 expect(result).toBeTrue();
             });
         });
 
         it('updates an object', () => {
-            openmct.objects.save(mockDomainObject).then((result) => {
+            return openmct.objects.save(mockDomainObject).then((result) => {
                 expect(result).toBeTrue();
                 expect(provider.create).toHaveBeenCalled();
-                openmct.objects.save(mockDomainObject).then((updatedResult) => {
+
+                //Set modified timestamp it detects a change and persists the updated model.
+                mockDomainObject.modified = Date.now();
+
+                return openmct.objects.save(mockDomainObject).then((updatedResult) => {
                     expect(updatedResult).toBeTrue();
                     expect(provider.update).toHaveBeenCalled();
                 });
             });
         });
+    });
+    describe('batches requests', () => {
+        let mockPromise;
+        beforeEach(() => {
+            mockPromise = Promise.resolve({
+                json: () => {
+                    return {
+                        total_rows: 0,
+                        rows: []
+                    };
+                }
+            });
+            fetch.and.returnValue(mockPromise);
+        });
+        it('for multiple simultaneous gets', () => {
+            const objectIds = [
+                {
+                    namespace: '',
+                    key: 'object-1'
+                }, {
+                    namespace: '',
+                    key: 'object-2'
+                }, {
+                    namespace: '',
+                    key: 'object-3'
+                }
+            ];
 
-        it('updates queued objects', () => {
-            let couchProvider = new CouchObjectProvider(openmct, options, '');
-            let intermediateResponse = couchProvider.getIntermediateResponse();
-            spyOn(couchProvider, 'updateQueued');
-            couchProvider.enqueueObject(mockDomainObject.identifier.key, mockDomainObject, intermediateResponse);
-            couchProvider.objectQueue[mockDomainObject.identifier.key].updateRevision(1);
-            couchProvider.update(mockDomainObject);
-            expect(couchProvider.objectQueue[mockDomainObject.identifier.key].hasNext()).toBe(2);
-            couchProvider.checkResponse({
-                ok: true,
-                rev: 2,
-                id: mockDomainObject.identifier.key
-            }, intermediateResponse);
+            const getAllObjects = Promise.all(
+                objectIds.map((identifier) =>
+                    openmct.objects.get(identifier)
+                ));
 
-            expect(couchProvider.updateQueued).toHaveBeenCalledTimes(2);
+            return getAllObjects.then(() => {
+                const requestUrl = fetch.calls.mostRecent().args[0];
+                const requestMethod = fetch.calls.mostRecent().args[1].method;
+
+                expect(fetch).toHaveBeenCalledTimes(1);
+                expect(requestUrl.includes('_all_docs')).toBeTrue();
+                expect(requestMethod).toEqual('POST');
+            });
+        });
+
+        it('but not for single gets', () => {
+            const objectId = {
+                namespace: '',
+                key: 'object-1'
+            };
+
+            const getObject = openmct.objects.get(objectId);
+
+            return getObject.then(() => {
+                const requestUrl = fetch.calls.mostRecent().args[0];
+                const requestMethod = fetch.calls.mostRecent().args[1].method;
+
+                expect(fetch).toHaveBeenCalledTimes(1);
+                expect(requestUrl.endsWith(`${objectId.key}`)).toBeTrue();
+                expect(requestMethod).toEqual('GET');
+            });
         });
     });
+    describe('implements server-side search', () => {
+        let mockPromise;
+        beforeEach(() => {
+            mockPromise = Promise.resolve({
+                body: {
+                    getReader() {
+                        return {
+                            read() {
+                                return Promise.resolve({
+                                    done: true,
+                                    value: undefined
+                                });
+                            }
+                        };
+                    }
+                }
+            });
+            fetch.and.returnValue(mockPromise);
+        });
+
+        it("using Couch's 'find' endpoint", () => {
+            return Promise.all(openmct.objects.search('test')).then(() => {
+                const requestUrl = fetch.calls.mostRecent().args[0];
+
+                expect(fetch).toHaveBeenCalled();
+                expect(requestUrl.endsWith('_find')).toBeTrue();
+            });
+        });
+
+        it("and supports search by object name", () => {
+            return Promise.all(openmct.objects.search('test')).then(() => {
+                const requestPayload = JSON.parse(fetch.calls.mostRecent().args[1].body);
+
+                expect(requestPayload).toBeDefined();
+                expect(requestPayload.selector.model.name.$regex).toEqual('(?i)test');
+            });
+        });
+
+    });
 });

src/plugins/plot/MctPlot.vue

@@ -65,8 +65,7 @@
                 <div ref="chartContainer"
                      class="gl-plot-chart-wrapper"
                 >
-                    <mct-chart :series-config="config"
-                               :rectangles="rectangles"
+                    <mct-chart :rectangles="rectangles"
                                :highlights="highlights"
                                @plotReinitializeCanvas="initCanvas"
                     />
@@ -85,8 +84,8 @@
                         >
                         </button>
                     </div>
-                    <div class="c-button-set c-button-set--strip-h"
-                         :disabled="!plotHistory.length"
+                    <div v-if="plotHistory.length"
+                         class="c-button-set c-button-set--strip-h"
                     >
                         <button class="c-button icon-arrow-left"
                                 title="Restore previous pan/zoom"
@@ -99,6 +98,31 @@
                         >
                         </button>
                     </div>
+                    <div v-if="isRealTime"
+                         class="c-button-set c-button-set--strip-h"
+                    >
+                        <button v-if="!isFrozen"
+                                class="c-button icon-pause"
+                                title="Pause incoming real-time data"
+                                @click="pause()"
+                        >
+                        </button>
+                        <button v-if="isFrozen"
+                                class="c-button icon-arrow-right pause-play is-paused"
+                                title="Resume displaying real-time data"
+                                @click="play()"
+                        >
+                        </button>
+                    </div>
+                    <div v-if="isTimeOutOfSync || isFrozen"
+                         class="c-button-set c-button-set--strip-h"
+                    >
+                        <button class="c-button icon-clock"
+                                title="Synchronize Time Conductor"
+                                @click="showSynchronizeDialog()"
+                        >
+                        </button>
+                    </div>
                 </div>
 
                 <!--Cursor guides-->
@@ -186,10 +210,15 @@ export default {
             xKeyOptions: [],
             config: {},
             pending: 0,
-            loaded: false
+            isRealTime: this.openmct.time.clock() !== undefined,
+            loaded: false,
+            isTimeOutOfSync: false
         };
     },
     computed: {
+        isFrozen() {
+            return this.config.xAxis.get('frozen') === true && this.config.yAxis.get('frozen') === true;
+        },
         plotLegendPositionClass() {
             return `plot-legend-${this.config.legend.get('position')}`;
         },
@@ -227,6 +256,7 @@ export default {
             'configuration.filters',
             this.updateFiltersAndResubscribe
         );
+        this.removeStatusListener = this.openmct.status.observe(this.domainObject.identifier, this.updateStatus);
 
         this.openmct.objectViews.on('clearData', this.clearData);
         this.followTimeConductor();
@@ -243,6 +273,7 @@ export default {
     },
     methods: {
         followTimeConductor() {
+            this.openmct.time.on('clock', this.updateRealTime);
             this.openmct.time.on('bounds', this.updateDisplayBounds);
             this.synchronized(true);
         },
@@ -371,6 +402,9 @@ export default {
             const displayRange = series.getDisplayRange(xKey);
             this.config.xAxis.set('range', displayRange);
         },
+        updateRealTime(clock) {
+            this.isRealTime = clock !== undefined;
+        },
 
         /**
        * Track latest display bounds.  Forces update when not receiving ticks.
@@ -424,13 +458,30 @@ export default {
        * displays can update accordingly.
        */
         synchronized(value) {
+            const isLocalClock = this.openmct.time.clock();
+
             if (typeof value !== 'undefined') {
                 this._synchronized = value;
+                this.isTimeOutOfSync = value !== true;
+
+                const isUnsynced = isLocalClock && !value;
+                this.setStatus(isUnsynced);
             }
 
             return this._synchronized;
         },
 
+        setStatus(isNotInSync) {
+            const outOfSync = isNotInSync === true
+                || this.isTimeOutOfSync === true
+                || this.isFrozen === true;
+            if (outOfSync === true) {
+                this.openmct.status.set(this.domainObject.identifier, 'timeconductor-unsynced');
+            } else {
+                this.openmct.status.set(this.domainObject.identifier, '');
+            }
+        },
+
         initCanvas() {
             if (this.canvas) {
                 this.stopListening(this.canvas);
@@ -723,7 +774,8 @@ export default {
             const ZOOM_AMT = 0.1;
             event.preventDefault();
 
-            if (!this.positionOverPlot) {
+            if (event.wheelDelta === undefined
+                || !this.positionOverPlot) {
                 return;
             }
 
@@ -841,11 +893,13 @@ export default {
         freeze() {
             this.config.yAxis.set('frozen', true);
             this.config.xAxis.set('frozen', true);
+            this.setStatus();
         },
 
         clear() {
             this.config.yAxis.set('frozen', false);
             this.config.xAxis.set('frozen', false);
+            this.setStatus();
             this.plotHistory = [];
             this.userViewportChangeEnd();
         },
@@ -875,6 +929,59 @@ export default {
             this.config.series.models[0].emit('change:yKey', yKey);
         },
 
+        pause() {
+            this.freeze();
+        },
+
+        play() {
+            this.clear();
+        },
+
+        showSynchronizeDialog() {
+            const isLocalClock = this.openmct.time.clock();
+            if (isLocalClock !== undefined) {
+                const message = `
+                This action will change the Time Conductor to Fixed Timespan mode with this plot view's current time bounds.
+                Do you want to continue?
+            `;
+
+                let dialog = this.openmct.overlays.dialog({
+                    title: 'Synchronize Time Conductor',
+                    iconClass: 'alert',
+                    size: 'fit',
+                    message: message,
+                    buttons: [
+                        {
+                            label: 'OK',
+                            callback: () => {
+                                dialog.dismiss();
+                                this.synchronizeTimeConductor();
+                            }
+                        },
+                        {
+                            label: 'Cancel',
+                            callback: () => {
+                                dialog.dismiss();
+                            }
+                        }
+                    ]
+                });
+            } else {
+                this.openmct.notifications.alert('Time conductor bounds have changed.');
+                this.synchronizeTimeConductor();
+            }
+        },
+
+        synchronizeTimeConductor() {
+            this.openmct.time.stopClock();
+            const range = this.config.xAxis.get('displayRange');
+            this.openmct.time.bounds({
+                start: range.min,
+                end: range.max
+            });
+            this.isTimeOutOfSync = false;
+        },
+
         destroy() {
             configStore.deleteStore(this.config.id);
 
@@ -888,8 +995,16 @@ export default {
                 this.filterObserver();
             }
 
+            if (this.removeStatusListener) {
+                this.removeStatusListener();
+            }
+
+            this.openmct.time.off('clock', this.updateRealTime);
             this.openmct.time.off('bounds', this.updateDisplayBounds);
             this.openmct.objectViews.off('clearData', this.clearData);
+        },
+        updateStatus(status) {
+            this.$emit('statusUpdated', status);
         }
     }
 };

src/plugins/plot/Plot.vue

@@ -56,6 +56,7 @@
 
     <div ref="plotContainer"
          class="l-view-section u-style-receiver js-style-receiver"
+         :class="{'s-status-timeconductor-unsynced': status && status === 'timeconductor-unsynced'}"
     >
         <div v-show="!!loading"
              class="c-loading--overlay loading"
@@ -64,6 +65,7 @@
                   :cursor-guide="cursorGuide"
                   :options="options"
                   @loadingUpdated="loadingUpdated"
+                  @statusUpdated="setStatus"
         />
     </div>
 </div>
@@ -94,13 +96,14 @@ export default {
             // hideExportButtons: false
             cursorGuide: false,
             gridLines: !this.options.compact,
-            loading: false
+            loading: false,
+            status: ''
         };
     },
     mounted() {
         eventHelpers.extend(this);
 
-        //this.exportImageService = this.openmct.$injector.get('exportImageService');
+        this.exportImageService = this.openmct.$injector.get('exportImageService');
     },
     beforeDestroy() {
         this.destroy();
@@ -131,6 +134,9 @@ export default {
 
         toggleGridLines() {
             this.gridLines = !this.gridLines;
+        },
+        setStatus(status) {
+            this.status = status;
         }
     }
 };

src/plugins/plot/PlotViewProvider.js

@@ -40,7 +40,7 @@ export default function PlotViewProvider(openmct) {
     }
 
     function isCompactView(objectPath) {
-        return true;
+        return objectPath.find(object => object.type === 'time-strip');
     }
 
     return {
@@ -48,7 +48,7 @@ export default function PlotViewProvider(openmct) {
         name: 'Plot',
         cssClass: 'icon-telemetry',
         canView(domainObject, objectPath) {
-            return isCompactView(objectPath) && hasTelemetry(domainObject, openmct);
+            return hasTelemetry(domainObject, openmct);
         },
 
         view: function (domainObject, objectPath) {

src/plugins/plot/configuration/PlotSeries.js

@@ -403,6 +403,10 @@ export default class PlotSeries extends Model {
      * @public
      */
     updateFiltersAndRefresh(updatedFilters) {
+        if (updatedFilters === undefined) {
+            return;
+        }
+
         let deepCopiedFilters = JSON.parse(JSON.stringify(updatedFilters));
 
         if (this.filters && !_.isEqual(this.filters, deepCopiedFilters)) {

src/plugins/plot/configuration/XAxisModel.js

@@ -71,7 +71,8 @@ export default class XAxisModel extends Model {
     defaults(options) {
         const bounds = options.openmct.time.bounds();
         const timeSystem = options.openmct.time.timeSystem();
-        const format = options.openmct.telemetry.getFormatter(timeSystem.timeFormat);
+        const format = options.openmct.$injector.get('formatService')
+            .getFormat(timeSystem.timeFormat);
 
         return {
             name: timeSystem.name,

src/plugins/plot/configuration/YAxisModel.js

@@ -166,7 +166,6 @@ export default class YAxisModel extends Model {
          * Update yAxis format, values, and label from known series.
          */
     updateFromSeries(series) {
-        this.unset('displayRange');
         const plotModel = this.plot.get('domainObject');
         const label = _.get(plotModel, 'configuration.yAxis.label');
         const sampleSeries = series.first();

src/plugins/plot/inspector/PlotOptions.vue

@@ -0,0 +1,64 @@
+<!--
+ 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.
+-->
+<template>
+<div>
+    <div v-if="canEdit">
+        <plot-options-edit />
+    </div>
+    <div v-else>
+        <plot-options-browse />
+    </div>
+</div>
+</template>
+
+<script>
+import PlotOptionsBrowse from "./PlotOptionsBrowse.vue";
+import PlotOptionsEdit from "./PlotOptionsEdit.vue";
+export default {
+    components: {
+        PlotOptionsBrowse,
+        PlotOptionsEdit
+    },
+    inject: ['openmct', 'domainObject'],
+    data() {
+        return {
+            isEditing: this.openmct.editor.isEditing()
+        };
+    },
+    computed: {
+        canEdit() {
+            return this.isEditing && !this.domainObject.locked;
+        }
+    },
+    mounted() {
+        this.openmct.editor.on('isEditing', this.setEditState);
+    },
+    beforeDestroy() {
+        this.openmct.editor.off('isEditing', this.setEditState);
+    },
+    methods: {
+        setEditState(isEditing) {
+            this.isEditing = isEditing;
+        }
+    }
+};
+</script>

src/plugins/plot/inspector/PlotOptionsBrowse.vue

@@ -0,0 +1,201 @@
+<!--
+ 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.
+-->
+<template>
+<div v-if="loaded"
+     class="js-plot-options-browse"
+>
+    <ul class="c-tree">
+        <h2 title="Plot series display properties in this object">Plot Series</h2>
+        <plot-options-item v-for="series in plotSeries"
+                           :key="series.key"
+                           :series="series"
+        />
+    </ul>
+    <div v-if="plotSeries.length"
+         class="grid-properties"
+    >
+        <ul class="l-inspector-part">
+            <h2 title="Y axis settings for this object">Y Axis</h2>
+            <li class="grid-row">
+                <div class="grid-cell label"
+                     title="Manually override how the Y axis is labeled."
+                >Label</div>
+                <div class="grid-cell value">{{ label ? label : "Not defined" }}</div>
+            </li>
+            <li class="grid-row">
+                <div class="grid-cell label"
+                     title="Automatically scale the Y axis to keep all values in view."
+                >Autoscale</div>
+                <div class="grid-cell value">
+                    {{ autoscale ? "Enabled: " : "Disabled" }}
+                    {{ autoscale ? autoscalePadding : "" }}
+                </div>
+            </li>
+            <li v-if="!autoscale && rangeMin"
+                class="grid-row"
+            >
+                <div class="grid-cell label"
+                     title="Minimum Y axis value."
+                >Minimum value</div>
+                <div class="grid-cell value">{{ rangeMin }}</div>
+            </li>
+            <li v-if="!autoscale && rangeMax"
+                class="grid-row"
+            >
+                <div class="grid-cell label"
+                     title="Maximum Y axis value."
+                >Maximum value</div>
+                <div class="grid-cell value">{{ rangeMax }}</div>
+            </li>
+        </ul>
+        <ul class="l-inspector-part">
+            <h2 title="Legend settings for this object">Legend</h2>
+            <li class="grid-row">
+                <div class="grid-cell label"
+                     title="The position of the legend relative to the plot display area."
+                >Position</div>
+                <div class="grid-cell value capitalize">{{ 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">{{ 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>
+                <div class="grid-cell value">{{ expandByDefault ? "Yes" : "No" }}</div>
+            </li>
+            <li class="grid-row">
+                <div class="grid-cell label"
+                     title="What to display in the legend when it's collapsed."
+                >Show when collapsed:</div>
+                <div class="grid-cell value">{{
+                    valueToShowWhenCollapsed.replace('nearest', '')
+                }}
+                </div>
+            </li>
+            <li class="grid-row">
+                <div class="grid-cell label"
+                     title="What to display in the legend when it's expanded."
+                >Show when expanded:</div>
+                <div class="grid-cell value comma-list">
+                    <span v-if="showTimestampWhenExpanded">Timestamp</span>
+                    <span v-if="showValueWhenExpanded">Value</span>
+                    <span v-if="showMinimumWhenExpanded">Min</span>
+                    <span v-if="showMaximumWhenExpanded">Max</span>
+                    <span v-if="showUnitsWhenExpanded">Units</span>
+                </div>
+            </li>
+        </ul>
+    </div>
+</div>
+</template>
+
+<script>
+import PlotOptionsItem from "./PlotOptionsItem.vue";
+import configStore from "../configuration/configStore";
+import eventHelpers from "../lib/eventHelpers";
+
+export default {
+    components: {
+        PlotOptionsItem
+    },
+    inject: ['openmct', 'domainObject'],
+    data() {
+        return {
+            config: {},
+            label: '',
+            autoscale: '',
+            autoscalePadding: '',
+            rangeMin: '',
+            rangeMax: '',
+            position: '',
+            hideLegendWhenSmall: '',
+            expandByDefault: '',
+            valueToShowWhenCollapsed: '',
+            showTimestampWhenExpanded: '',
+            showValueWhenExpanded: '',
+            showMinimumWhenExpanded: '',
+            showMaximumWhenExpanded: '',
+            showUnitsWhenExpanded: '',
+            loaded: false,
+            plotSeries: []
+        };
+    },
+    mounted() {
+        eventHelpers.extend(this);
+        this.config = this.getConfig();
+        this.registerListeners();
+        this.initConfiguration();
+        this.loaded = true;
+    },
+    beforeDestroy() {
+        this.stopListening();
+    },
+    methods: {
+        initConfiguration() {
+            this.label = this.config.yAxis.get('label');
+            this.autoscale = this.config.yAxis.get('autoscale');
+            this.autoscalePadding = this.config.yAxis.get('autoscalePadding');
+            const range = this.config.yAxis.get('range');
+            if (range) {
+                this.rangeMin = range.min;
+                this.rangeMax = range.max;
+            }
+
+            this.position = this.config.legend.get('position');
+            this.hideLegendWhenSmall = this.config.legend.get('hideLegendWhenSmall');
+            this.expandByDefault = this.config.legend.get('expandByDefault');
+            this.valueToShowWhenCollapsed = this.config.legend.get('valueToShowWhenCollapsed');
+            this.showTimestampWhenExpanded = this.config.legend.get('showTimestampWhenExpanded');
+            this.showValueWhenExpanded = this.config.legend.get('showValueWhenExpanded');
+            this.showMinimumWhenExpanded = this.config.legend.get('showMinimumWhenExpanded');
+            this.showMaximumWhenExpanded = this.config.legend.get('showMaximumWhenExpanded');
+            this.showUnitsWhenExpanded = this.config.legend.get('showUnitsWhenExpanded');
+        },
+        getConfig() {
+            this.configId = this.openmct.objects.makeKeyString(this.domainObject.identifier);
+
+            return configStore.get(this.configId);
+        },
+        registerListeners() {
+            this.config.series.forEach(this.addSeries, this);
+
+            this.listenTo(this.config.series, 'add', this.addSeries, this);
+            this.listenTo(this.config.series, 'remove', this.resetAllSeries, this);
+        },
+
+        addSeries(series, index) {
+            this.$set(this.plotSeries, index, series);
+            this.initConfiguration();
+        },
+
+        resetAllSeries() {
+            this.plotSeries = [];
+            this.config.series.forEach(this.addSeries, this);
+        }
+    }
+};
+</script>

src/plugins/plot/inspector/PlotOptionsEdit.vue

@@ -0,0 +1,100 @@
+<!--
+ 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.
+-->
+<template>
+<div v-if="loaded"
+     class="js-plot-options-edit"
+>
+    <ul class="c-tree">
+        <h2 title="Display properties for this object">Plot Series</h2>
+        <li v-for="series in plotSeries"
+            :key="series.key"
+        >
+            <series-form :series="series" />
+        </li>
+    </ul>
+    <y-axis-form v-if="plotSeries.length"
+                 class="grid-properties"
+                 :y-axis="config.yAxis"
+    />
+    <ul class="l-inspector-part">
+        <h2 title="Legend options">Legend</h2>
+        <legend-form v-if="plotSeries.length"
+                     class="grid-properties"
+                     :legend="config.legend"
+        />
+    </ul>
+</div>
+</template>
+<script>
+import SeriesForm from "./forms/SeriesForm.vue";
+import YAxisForm from "./forms/YAxisForm.vue";
+import LegendForm from "./forms/LegendForm.vue";
+import eventHelpers from "../lib/eventHelpers";
+import configStore from "../configuration/configStore";
+
+export default {
+    components: {
+        LegendForm,
+        SeriesForm,
+        YAxisForm
+    },
+    inject: ['openmct', 'domainObject'],
+    data() {
+        return {
+            config: {},
+            plotSeries: [],
+            loaded: false
+        };
+    },
+    mounted() {
+        eventHelpers.extend(this);
+        this.config = this.getConfig();
+        this.registerListeners();
+        this.loaded = true;
+    },
+    beforeDestroy() {
+        this.stopListening();
+    },
+    methods: {
+        getConfig() {
+            this.configId = this.openmct.objects.makeKeyString(this.domainObject.identifier);
+
+            return configStore.get(this.configId);
+        },
+        registerListeners() {
+            this.config.series.forEach(this.addSeries, this);
+
+            this.listenTo(this.config.series, 'add', this.addSeries, this);
+            this.listenTo(this.config.series, 'remove', this.resetAllSeries, this);
+        },
+
+        addSeries(series, index) {
+            this.$set(this.plotSeries, index, series);
+        },
+
+        resetAllSeries() {
+            this.plotSeries = [];
+            this.config.series.forEach(this.addSeries, this);
+        }
+    }
+};
+</script>

src/plugins/plot/inspector/PlotOptionsItem.vue

@@ -0,0 +1,160 @@
+<template>
+<ul>
+    <li class="c-tree__item menus-to-left"
+        :class="isAliasClass"
+    >
+        <span class="c-disclosure-triangle is-enabled flex-elem"
+              :class="expandedCssClass"
+              @click="toggleExpanded"
+        >
+        </span>
+        <div class="c-object-label"
+             :class="statusClass"
+        >
+            <div class="c-object-label__type-icon"
+                 :class="getSeriesClass"
+            >
+                <span class="is-status__indicator"
+                      title="This item is missing or suspect"
+                ></span>
+            </div>
+            <div class="c-object-label__name">{{ series.domainObject.name }}</div>
+        </div>
+    </li>
+    <li v-show="expanded"
+        class="c-tree__item menus-to-left"
+    >
+        <ul class="grid-properties js-plot-options-browse-properties">
+            <li class="grid-row">
+                <div class="grid-cell label"
+                     title="The field to be plotted as a value for this series."
+                >Value</div>
+                <div class="grid-cell value">
+                    {{ yKey }}
+                </div>
+            </li>
+            <li class="grid-row">
+                <div class="grid-cell label"
+                     title="The rendering method to join lines for this series."
+                >Line Method</div>
+                <div class="grid-cell value">{{ {
+                    'none': 'None',
+                    'linear': 'Linear interpolation',
+                    'stepAfter': 'Step After'
+                }[interpolate] }}
+                </div>
+            </li>
+            <li class="grid-row">
+                <div class="grid-cell label"
+                     title="Whether markers are displayed, and their size."
+                >Markers</div>
+                <div class="grid-cell value">
+                    {{ markerOptionsDisplayText }}
+                </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">
+                    {{ alarmMarkers ? "Enabled" : "Disabled" }}
+                </div>
+            </li>
+            <li class="grid-row">
+                <div class="grid-cell label"
+                     title="The plot line and marker color for this series."
+                >Color</div>
+                <div class="grid-cell value">
+                    <span class="c-color-swatch"
+                          :style="{
+                              'background': seriesHexColor
+                          }"
+                    >
+                    </span>
+                </div>
+            </li>
+        </ul>
+    </li>
+</ul>
+</template>
+
+<script>
+export default {
+    inject: ['openmct', 'domainObject', 'path'],
+    props: {
+        series: {
+            type: Object,
+            default() {
+                return {};
+            }
+        }
+    },
+    data() {
+        return {
+            expanded: false
+        };
+    },
+    computed: {
+        isAliasClass() {
+            let cssClass = '';
+            const domainObjectPath = [this.series.domainObject, ...this.path];
+            if (this.openmct.objects.isObjectPathToALink(this.series.domainObject, domainObjectPath)) {
+                cssClass = 'is-alias';
+            }
+
+            return cssClass;
+        },
+        getSeriesClass() {
+            let cssClass = '';
+            let type = this.openmct.types.get(this.series.domainObject.type);
+            if (type.definition.cssClass) {
+                cssClass = `${cssClass} ${type.definition.cssClass}`;
+            }
+
+            return cssClass;
+        },
+        expandedCssClass() {
+            if (this.expanded === true) {
+                return 'c-disclosure-triangle--expanded';
+            }
+
+            return '';
+        },
+        statusClass() {
+            return (this.status) ? `is-status--${this.status}` : '';
+        },
+        yKey() {
+            return this.series.get('yKey');
+        },
+        interpolate() {
+            return this.series.get('interpolate');
+        },
+        markerOptionsDisplayText() {
+            return this.series.markerOptionsDisplayText();
+        },
+        alarmMarkers() {
+            return this.series.get('alarmMarkers');
+        },
+        seriesHexColor() {
+            return this.series.get('color').asHexString();
+        }
+    },
+    mounted() {
+        this.status = this.openmct.status.get(this.series.domainObject.identifier);
+        this.removeStatusListener = this.openmct.status.observe(this.series.domainObject.identifier, this.setStatus);
+    },
+    beforeDestroy() {
+        if (this.removeStatusListener) {
+            this.removeStatusListener();
+        }
+    },
+    methods: {
+        toggleExpanded() {
+            this.expanded = !this.expanded;
+        },
+        setStatus(status) {
+            this.status = status;
+        }
+    }
+};
+</script>

src/plugins/plot/inspector/PlotsInspectorViewProvider.js

@@ -0,0 +1,56 @@
+
+import PlotOptions from "./PlotOptions.vue";
+import Vue from 'vue';
+
+export default function PlotsInspectorViewProvider(openmct) {
+    return {
+        key: 'plots-inspector',
+        name: 'Plots Inspector View',
+        canView: function (selection) {
+            if (selection.length === 0 || selection[0].length === 0) {
+                return false;
+            }
+
+            let object = selection[0][0].context.item;
+
+            return object
+                && object.type === 'telemetry.plot.overlay';
+        },
+        view: function (selection) {
+            let component;
+            let objectPath;
+
+            if (selection.length) {
+                objectPath = selection[0].map((selectionItem) => {
+                    return selectionItem.context.item;
+                });
+            }
+
+            return {
+                show: function (element) {
+                    component = new Vue({
+                        el: element,
+                        components: {
+                            PlotOptions: PlotOptions
+                        },
+                        provide: {
+                            openmct,
+                            domainObject: selection[0][0].context.item,
+                            path: objectPath
+                        },
+                        template: '<plot-options></plot-options>'
+                    });
+                },
+                destroy: function () {
+                    if (component) {
+                        component.$destroy();
+                        component = undefined;
+                    }
+                }
+            };
+        },
+        priority: function () {
+            return 1;
+        }
+    };
+}

src/plugins/plot/inspector/forms/LegendForm.vue

@@ -0,0 +1,207 @@
+<template>
+<div>
+    <li class="grid-row">
+        <div class="grid-cell label"
+             title="The position of the legend relative to the plot display area."
+        >Position</div>
+        <div class="grid-cell value">
+            <select v-model="position"
+                    @change="updateForm('position')"
+            >
+                <option value="top">Top</option>
+                <option value="right">Right</option>
+                <option value="bottom">Bottom</option>
+                <option value="left">Left</option>
+            </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 v-model="hideLegendWhenSmall"
+                                            type="checkbox"
+                                            @change="updateForm('hideLegendWhenSmall')"
+        ></div>
+    </li>
+    <li class="grid-row">
+        <div class="grid-cell label"
+             title="Show the legend expanded by default"
+        >Expand by default</div>
+        <div class="grid-cell value"><input v-model="expandByDefault"
+                                            type="checkbox"
+                                            @change="updateForm('expandByDefault')"
+        ></div>
+    </li>
+    <li class="grid-row">
+        <div class="grid-cell label"
+             title="What to display in the legend when it's collapsed."
+        >When collapsed show</div>
+        <div class="grid-cell value">
+            <select v-model="valueToShowWhenCollapsed"
+                    @change="updateForm('valueToShowWhenCollapsed')"
+            >
+                <option value="none">Nothing</option>
+                <option value="nearestTimestamp">Nearest timestamp</option>
+                <option value="nearestValue">Nearest value</option>
+                <option value="min">Minimum value</option>
+                <option value="max">Maximum value</option>
+                <option value="units">Units</option>
+            </select>
+        </div>
+    </li>
+    <li class="grid-row">
+        <div class="grid-cell label"
+             title="What to display in the legend when it's expanded."
+        >When expanded show</div>
+        <div class="grid-cell value">
+            <ul>
+                <li><input v-model="showTimestampWhenExpanded"
+                           type="checkbox"
+                           @change="updateForm('showTimestampWhenExpanded')"
+                > Nearest timestamp</li>
+                <li><input v-model="showValueWhenExpanded"
+                           type="checkbox"
+                           @change="updateForm('showValueWhenExpanded')"
+                > Nearest value</li>
+                <li><input v-model="showMinimumWhenExpanded"
+                           type="checkbox"
+                           @change="updateForm('showMinimumWhenExpanded')"
+                > Minimum value</li>
+                <li><input v-model="showMaximumWhenExpanded"
+                           type="checkbox"
+                           @change="updateForm('showMaximumWhenExpanded')"
+                > Maximum value</li>
+                <li><input v-model="showUnitsWhenExpanded"
+                           type="checkbox"
+                           @change="updateForm('showUnitsWhenExpanded')"
+                > Units</li>
+            </ul>
+
+        </div>
+    </li>
+</div>
+</template>
+<script>
+import {coerce, objectPath, validate} from "./formUtil";
+import _ from "lodash";
+
+export default {
+    inject: ['openmct', 'domainObject'],
+    props: {
+        legend: {
+            type: Object,
+            default() {
+                return {};
+            }
+        }
+    },
+    data() {
+        return {
+            position: '',
+            hideLegendWhenSmall: '',
+            expandByDefault: '',
+            valueToShowWhenCollapsed: '',
+            showTimestampWhenExpanded: '',
+            showValueWhenExpanded: '',
+            showMinimumWhenExpanded: '',
+            showMaximumWhenExpanded: '',
+            showUnitsWhenExpanded: '',
+            validation: {}
+        };
+    },
+    mounted() {
+        this.initialize();
+        this.initFormValues();
+    },
+    methods: {
+        initialize() {
+            this.fields = [
+                {
+                    modelProp: 'position',
+                    objectPath: 'configuration.legend.position'
+                },
+                {
+                    modelProp: 'hideLegendWhenSmall',
+                    coerce: Boolean,
+                    objectPath: 'configuration.legend.hideLegendWhenSmall'
+                },
+                {
+                    modelProp: 'expandByDefault',
+                    coerce: Boolean,
+                    objectPath: 'configuration.legend.expandByDefault'
+                },
+                {
+                    modelProp: 'valueToShowWhenCollapsed',
+                    objectPath: 'configuration.legend.valueToShowWhenCollapsed'
+                },
+                {
+                    modelProp: 'showValueWhenExpanded',
+                    coerce: Boolean,
+                    objectPath: 'configuration.legend.showValueWhenExpanded'
+                },
+                {
+                    modelProp: 'showTimestampWhenExpanded',
+                    coerce: Boolean,
+                    objectPath: 'configuration.legend.showTimestampWhenExpanded'
+                },
+                {
+                    modelProp: 'showMaximumWhenExpanded',
+                    coerce: Boolean,
+                    objectPath: 'configuration.legend.showMaximumWhenExpanded'
+                },
+                {
+                    modelProp: 'showMinimumWhenExpanded',
+                    coerce: Boolean,
+                    objectPath: 'configuration.legend.showMinimumWhenExpanded'
+                },
+                {
+                    modelProp: 'showUnitsWhenExpanded',
+                    coerce: Boolean,
+                    objectPath: 'configuration.legend.showUnitsWhenExpanded'
+                }
+            ];
+        },
+        initFormValues() {
+            this.position = this.legend.get('position');
+            this.hideLegendWhenSmall = this.legend.get('hideLegendWhenSmall');
+            this.expandByDefault = this.legend.get('expandByDefault');
+            this.valueToShowWhenCollapsed = this.legend.get('valueToShowWhenCollapsed');
+            this.showTimestampWhenExpanded = this.legend.get('showTimestampWhenExpanded');
+            this.showValueWhenExpanded = this.legend.get('showValueWhenExpanded');
+            this.showMinimumWhenExpanded = this.legend.get('showMinimumWhenExpanded');
+            this.showMaximumWhenExpanded = this.legend.get('showMaximumWhenExpanded');
+            this.showUnitsWhenExpanded = this.legend.get('showUnitsWhenExpanded');
+        },
+        updateForm(formKey) {
+            const newVal = this[formKey];
+            const oldVal = this.legend.get(formKey);
+            const formField = this.fields.find((field) => field.modelProp === formKey);
+
+            const path = objectPath(formField.objectPath);
+            const validationResult = validate(newVal, this.legend, formField.validate);
+            if (validationResult === true) {
+                delete this.validation[formKey];
+            } else {
+                this.validation[formKey] = validationResult;
+
+                return;
+            }
+
+            if (!_.isEqual(coerce(newVal, formField.coerce), coerce(oldVal, formField.coerce))) {
+                this.legend.set(formKey, coerce(newVal, formField.coerce));
+                if (path) {
+                    this.openmct.objects.mutate(
+                        this.domainObject,
+                        path(this.domainObject, this.legend),
+                        coerce(newVal, formField.coerce)
+                    );
+                }
+            }
+        },
+        setStatus(status) {
+            this.status = status;
+        }
+    }
+};
+</script>

src/plugins/plot/inspector/forms/SeriesForm.vue

@@ -0,0 +1,347 @@
+<template>
+<ul>
+    <li class="c-tree__item menus-to-left"
+        :class="isAliasCss"
+    >
+        <span class="c-disclosure-triangle is-enabled flex-elem"
+              :class="expandedCssClass"
+              @click="toggleExpanded"
+        >
+        </span>
+        <div :class="objectLabelCss">
+            <div class="c-object-label__type-icon"
+                 :class="[seriesCss]"
+            >
+                <span class="is-status__indicator"
+                      title="This item is missing or suspect"
+                ></span>
+            </div>
+            <div class="c-object-label__name">{{ series.domainObject.name }}</div>
+        </div>
+    </li>
+    <ul v-show="expanded"
+        class="grid-properties js-plot-options-edit-properties"
+    >
+        <li class="grid-row">
+            <!-- Value to be displayed -->
+            <div class="grid-cell label"
+                 title="The field to be plotted as a value for this series."
+            >Value</div>
+            <div class="grid-cell value">
+                <select v-model="yKey"
+                        @change="updateForm('yKey')"
+                >
+                    <option v-for="option in yKeyOptions"
+                            :key="option.value"
+                            :value="option.value"
+                            :selected="option.value == yKey"
+                    >
+                        {{ option.name }}
+                    </option>
+                </select>
+            </div>
+        </li>
+        <li class="grid-row">
+            <div class="grid-cell label"
+                 title="The rendering method to join lines for this series."
+            >Line Method</div>
+            <div class="grid-cell value">
+                <select v-model="interpolate"
+                        @change="updateForm('interpolate')"
+                >
+                    <option value="none">None</option>
+                    <option value="linear">Linear interpolate</option>
+                    <option value="stepAfter">Step after</option>
+                </select>
+            </div>
+        </li>
+        <li class="grid-row">
+            <div class="grid-cell label"
+                 title="Whether markers are displayed."
+            >Markers</div>
+            <div class="grid-cell value">
+                <input v-model="markers"
+                       type="checkbox"
+                       @change="updateForm('markers')"
+                >
+                <select
+                    v-show="markers"
+                    v-model="markerShape"
+                    @change="updateForm('markerShape')"
+                >
+                    <option
+                        v-for="option in markerShapeOptions"
+                        :key="option.value"
+                        :value="option.value"
+                        :selected="option.value == markerShape"
+                    >
+                        {{ option.name }}
+                    </option>
+                </select>
+            </div>
+        </li>
+        <li class="grid-row">
+            <div class="grid-cell label"
+                 title="Display markers visually denoting points in alarm."
+            >Alarm Markers</div>
+            <div class="grid-cell value">
+                <input v-model="alarmMarkers"
+                       type="checkbox"
+                       @change="updateForm('alarmMarkers')"
+                >
+            </div>
+        </li>
+        <li v-show="markers || alarmMarkers"
+            class="grid-row"
+        >
+            <div class="grid-cell label"
+                 title="The size of regular and alarm markers for this series."
+            >Marker Size:</div>
+            <div class="grid-cell value"><input v-model="markerSize"
+                                                class="c-input--flex"
+                                                type="text"
+                                                @change="updateForm('markerSize')"
+            ></div>
+        </li>
+        <li v-show="interpolate !== 'none' || markers"
+            class="grid-row"
+        >
+            <div class="grid-cell label"
+                 title="Manually set the plot line and marker color for this series."
+            >Color</div>
+            <div class="grid-cell value">
+                <div class="c-click-swatch c-click-swatch--menu"
+                     @click="toggleSwatch()"
+                >
+                    <span class="c-color-swatch"
+                          :style="{ background: seriesColorAsHex }"
+                    >
+                    </span>
+                </div>
+                <div class="c-palette c-palette--color">
+                    <div v-show="swatchActive"
+                         class="c-palette__items"
+                    >
+                        <div v-for="(group, index) in colorPalette"
+                             :key="index"
+                             class="u-contents"
+                        >
+                            <div v-for="(color, colorIndex) in group"
+                                 :key="colorIndex"
+                                 class="c-palette__item"
+                                 :class="{ 'selected': series.get('color').equalTo(color) }"
+                                 :style="{ background: color.asHexString() }"
+                                 @click="setColor(color)"
+                            >
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </li>
+    </ul>
+</ul>
+</template>
+
+<script>
+import { MARKER_SHAPES } from "../../draw/MarkerShapes";
+import { objectPath, validate, coerce } from "./formUtil";
+import _ from 'lodash';
+
+export default {
+    inject: ['openmct', 'domainObject', 'path'],
+    props: {
+        series: {
+            type: Object,
+            default() {
+                return {};
+            }
+        }
+    },
+    data() {
+        return {
+            expanded: false,
+            markerShapeOptions: [],
+            yKey: this.series.get('yKey'),
+            yKeyOptions: [],
+            interpolate: this.series.get('interpolate'),
+            markers: this.series.get('markers'),
+            markerShape: this.series.get('markerShape'),
+            alarmMarkers: this.series.get('alarmMarkers'),
+            markerSize: this.series.get('markerSize'),
+            validation: {},
+            swatchActive: false
+        };
+    },
+    computed: {
+        colorPalette() {
+            return this.series.collection.palette.groups();
+        },
+        objectLabelCss() {
+            return this.status ? `c-object-label is-status--${this.status}'` : 'c-object-label';
+        },
+        seriesCss() {
+            let type = this.openmct.types.get(this.series.domainObject.type);
+
+            return type.definition.cssClass ? `c-object-label__type-icon ${type.definition.cssClass}` : `c-object-label__type-icon`;
+        },
+        isAliasCss() {
+            let cssClass = '';
+            const domainObjectPath = [this.series.domainObject, ...this.path];
+            if (this.openmct.objects.isObjectPathToALink(this.series.domainObject, domainObjectPath)) {
+                cssClass = 'is-alias';
+            }
+
+            return cssClass;
+        },
+        expandedCssClass() {
+            return this.expanded ? 'c-disclosure-triangle--expanded' : '';
+        },
+        seriesColorAsHex() {
+            return this.series.get('color').asHexString();
+        }
+    },
+    mounted() {
+        this.initialize();
+
+        this.status = this.openmct.status.get(this.series.domainObject.identifier);
+        this.removeStatusListener = this.openmct.status.observe(this.series.domainObject.identifier, this.setStatus);
+    },
+    beforeDestroy() {
+        if (this.removeStatusListener) {
+            this.removeStatusListener();
+        }
+    },
+    methods: {
+        initialize: function () {
+            this.fields = [
+                {
+                    modelProp: 'yKey',
+                    objectPath: this.dynamicPathForKey('yKey')
+                },
+                {
+                    modelProp: 'interpolate',
+                    objectPath: this.dynamicPathForKey('interpolate')
+                },
+                {
+                    modelProp: 'markers',
+                    objectPath: this.dynamicPathForKey('markers')
+                },
+                {
+                    modelProp: 'markerShape',
+                    objectPath: this.dynamicPathForKey('markerShape')
+                },
+                {
+                    modelProp: 'markerSize',
+                    coerce: Number,
+                    objectPath: this.dynamicPathForKey('markerSize')
+                },
+                {
+                    modelProp: 'alarmMarkers',
+                    coerce: Boolean,
+                    objectPath: this.dynamicPathForKey('alarmMarkers')
+                }
+            ];
+
+            const metadata = this.series.metadata;
+            this.yKeyOptions = metadata
+                .valuesForHints(['range'])
+                .map(function (o) {
+                    return {
+                        name: o.key,
+                        value: o.key
+                    };
+                });
+            this.markerShapeOptions = Object.entries(MARKER_SHAPES)
+                .map(([key, obj]) => {
+                    return {
+                        name: obj.label,
+                        value: key
+                    };
+                });
+        },
+        dynamicPathForKey(key) {
+            return function (object, model) {
+                const modelIdentifier = model.get('identifier');
+                const index = object.configuration.series.findIndex(s => {
+                    return _.isEqual(s.identifier, modelIdentifier);
+                });
+
+                return 'configuration.series[' + index + '].' + key;
+            };
+        },
+        /**
+       * Set the color for the current plot series.  If the new color was
+       * already assigned to a different plot series, then swap the colors.
+       */
+        setColor: function (color) {
+            const oldColor = this.series.get('color');
+            const otherSeriesWithColor = this.series.collection.filter(function (s) {
+                return s.get('color') === color;
+            })[0];
+
+            this.series.set('color', color);
+
+            const getPath = this.dynamicPathForKey('color');
+            const seriesColorPath = getPath(this.domainObject, this.series);
+
+            this.openmct.objects.mutate(
+                this.domainObject,
+                seriesColorPath,
+                color.asHexString()
+            );
+
+            if (otherSeriesWithColor) {
+                otherSeriesWithColor.set('color', oldColor);
+
+                const otherSeriesColorPath = getPath(
+                    this.domainObject,
+                    otherSeriesWithColor
+                );
+
+                this.openmct.objects.mutate(
+                    this.domainObject,
+                    otherSeriesColorPath,
+                    oldColor.asHexString()
+                );
+            }
+        },
+        toggleExpanded() {
+            this.expanded = !this.expanded;
+        },
+        updateForm(formKey) {
+            const newVal = this[formKey];
+            const oldVal = this.series.get(formKey);
+            const formField = this.fields.find((field) => field.modelProp === formKey);
+
+            const path = objectPath(formField.objectPath);
+            const validationResult = validate(newVal, this.series, formField.validate);
+            if (validationResult === true) {
+                delete this.validation[formKey];
+            } else {
+                this.validation[formKey] = validationResult;
+
+                return;
+            }
+
+            if (!_.isEqual(coerce(newVal, formField.coerce), coerce(oldVal, formField.coerce))) {
+                this.series.set(formKey, coerce(newVal, formField.coerce));
+                if (path) {
+                    this.openmct.objects.mutate(
+                        this.domainObject,
+                        path(this.domainObject, this.series),
+                        coerce(newVal, formField.coerce)
+                    );
+                }
+            }
+        },
+        setStatus(status) {
+            this.status = status;
+        },
+        toggleSwatch() {
+            this.swatchActive = !this.swatchActive;
+        }
+    }
+};
+
+</script>

src/plugins/plot/inspector/forms/YAxisForm.vue

@@ -0,0 +1,229 @@
+<template>
+<div>
+    <ul class="l-inspector-part">
+        <h2>Y Axis</h2>
+        <li class="grid-row">
+            <div class="grid-cell label"
+                 title="Manually override how the Y axis is labeled."
+            >Label</div>
+            <div class="grid-cell value"><input v-model="label"
+                                                class="c-input--flex"
+                                                type="text"
+                                                @change="updateForm('label')"
+            ></div>
+        </li>
+    </ul>
+    <ul class="l-inspector-part">
+        <h2>Y Axis Scaling</h2>
+        <li class="grid-row">
+            <div class="grid-cell label"
+                 title="Automatically scale the Y axis to keep all values in view."
+            >Auto scale</div>
+            <div class="grid-cell value"><input v-model="autoscale"
+                                                type="checkbox"
+                                                @change="updateForm('autoscale')"
+            ></div>
+        </li>
+        <li v-show="autoscale"
+            class="grid-row"
+        >
+            <div class="grid-cell label"
+                 title="Percentage of padding above and below plotted min and max values. 0.1, 1.0, etc."
+            >
+                Padding</div>
+            <div class="grid-cell value">
+                <input v-model="autoscalePadding"
+                       class="c-input--flex"
+                       type="text"
+                       @change="updateForm('autoscalePadding')"
+                >
+            </div>
+        </li>
+    </ul>
+    <ul v-show="!autoscale"
+        class="l-inspector-part"
+    >
+        <div v-show="!autoscale && validation.range"
+             class="grid-span-all form-error"
+        >
+            {{ validation.range }}
+        </div>
+        <li class="grid-row force-border">
+            <div class="grid-cell label"
+                 title="Minimum Y axis value."
+            >Minimum Value</div>
+            <div class="grid-cell value">
+                <input v-model="rangeMin"
+                       class="c-input--flex"
+                       type="number"
+                       @change="updateForm('range')"
+                >
+            </div>
+        </li>
+        <li class="grid-row">
+            <div class="grid-cell label"
+                 title="Maximum Y axis value."
+            >Maximum Value</div>
+            <div class="grid-cell value"><input v-model="rangeMax"
+                                                class="c-input--flex"
+                                                type="number"
+                                                @change="updateForm('range')"
+            ></div>
+        </li>
+    </ul>
+</div>
+</template>
+
+<script>
+import { objectPath, validate, coerce } from "./formUtil";
+import _ from "lodash";
+
+export default {
+    inject: ['openmct', 'domainObject'],
+    props: {
+        yAxis: {
+            type: Object,
+            default() {
+                return {};
+            }
+        }
+    },
+    data() {
+        return {
+            label: '',
+            autoscale: '',
+            autoscalePadding: '',
+            rangeMin: '',
+            rangeMax: '',
+            validation: {}
+        };
+    },
+    mounted() {
+        this.initialize();
+        this.initFormValues();
+    },
+    methods: {
+        initialize: function () {
+            this.fields = [
+                {
+                    modelProp: 'label',
+                    objectPath: 'configuration.yAxis.label'
+                },
+                {
+                    modelProp: 'autoscale',
+                    coerce: Boolean,
+                    objectPath: 'configuration.yAxis.autoscale'
+                },
+                {
+                    modelProp: 'autoscalePadding',
+                    coerce: Number,
+                    objectPath: 'configuration.yAxis.autoscalePadding'
+                },
+                {
+                    modelProp: 'range',
+                    objectPath: 'configuration.yAxis.range',
+                    coerce: function coerceRange(range) {
+                        if (!range) {
+                            return {
+                                min: 0,
+                                max: 0
+                            };
+                        }
+
+                        const newRange = {};
+                        if (typeof range.min !== 'undefined' && range.min !== null) {
+                            newRange.min = Number(range.min);
+                        }
+
+                        if (typeof range.max !== 'undefined' && range.max !== null) {
+                            newRange.max = Number(range.max);
+                        }
+
+                        return newRange;
+                    },
+                    validate: function validateRange(range, model) {
+                        if (!range) {
+                            return 'Need range';
+                        }
+
+                        if (range.min === '' || range.min === null || typeof range.min === 'undefined') {
+                            return 'Must specify Minimum';
+                        }
+
+                        if (range.max === '' || range.max === null || typeof range.max === 'undefined') {
+                            return 'Must specify Maximum';
+                        }
+
+                        if (Number.isNaN(Number(range.min))) {
+                            return 'Minimum must be a number.';
+                        }
+
+                        if (Number.isNaN(Number(range.max))) {
+                            return 'Maximum must be a number.';
+                        }
+
+                        if (Number(range.min) > Number(range.max)) {
+                            return 'Minimum must be less than Maximum.';
+                        }
+
+                        if (model.get('autoscale')) {
+                            return false;
+                        }
+
+                        return true;
+                    }
+                }
+            ];
+        },
+        initFormValues() {
+            this.label = this.yAxis.get('label');
+            this.autoscale = this.yAxis.get('autoscale');
+            this.autoscalePadding = this.yAxis.get('autoscalePadding');
+            const range = this.yAxis.get('range');
+            if (!range) {
+                this.rangeMin = undefined;
+                this.rangeMax = undefined;
+            } else {
+                this.rangeMin = range.min;
+                this.rangeMax = range.max;
+            }
+        },
+        updateForm(formKey) {
+            let newVal;
+            if (formKey === 'range') {
+                newVal = {
+                    min: this.rangeMin,
+                    max: this.rangeMax
+                };
+            } else {
+                newVal = this[formKey];
+            }
+
+            const oldVal = this.yAxis.get(formKey);
+            const formField = this.fields.find((field) => field.modelProp === formKey);
+
+            const path = objectPath(formField.objectPath);
+            const validationResult = validate(newVal, this.yAxis, formField.validate);
+            if (validationResult === true) {
+                delete this.validation[formKey];
+            } else {
+                this.validation[formKey] = validationResult;
+
+                return;
+            }
+
+            if (!_.isEqual(coerce(newVal, formField.coerce), coerce(oldVal, formField.coerce))) {
+                this.yAxis.set(formKey, coerce(newVal, formField.coerce));
+                if (path) {
+                    this.openmct.objects.mutate(
+                        this.domainObject,
+                        path(this.domainObject, this.yAxis),
+                        coerce(newVal, formField.coerce)
+                    );
+                }
+            }
+        }
+    }
+};
+
+</script>

src/plugins/plot/inspector/forms/formUtil.js

@@ -0,0 +1,29 @@
+export function coerce(value, coerceFunc) {
+    if (coerceFunc) {
+        return coerceFunc(value);
+    }
+
+    return value;
+}
+
+export function validate(value, model, validateFunc) {
+    if (validateFunc) {
+        return validateFunc(value, model);
+    }
+
+    return true;
+}
+
+export function objectPath(path) {
+    if (path) {
+        if (typeof path !== "function") {
+            const staticObjectPath = path;
+
+            return function (object, model) {
+                return staticObjectPath;
+            };
+        }
+
+        return path;
+    }
+}

src/plugins/plot/overlayPlot/OverlayPlotCompositionPolicy.js

@@ -0,0 +1,29 @@
+export default function OverlayPlotCompositionPolicy(openmct) {
+    function hasNumericTelemetry(domainObject) {
+        const hasTelemetry = openmct.telemetry.isTelemetryObject(domainObject);
+        if (!hasTelemetry) {
+            return false;
+        }
+
+        let metadata = openmct.telemetry.getMetadata(domainObject);
+
+        return metadata.values().length > 0 && hasDomainAndRange(metadata);
+    }
+
+    function hasDomainAndRange(metadata) {
+        return (metadata.valuesForHints(['range']).length > 0
+            && metadata.valuesForHints(['domain']).length > 0);
+    }
+
+    return {
+        allow: function (parent, child) {
+
+            if (parent.type === 'telemetry.plot.overlay'
+                && (hasNumericTelemetry(child) === false)) {
+                return false;
+            }
+
+            return true;
+        }
+    };
+}

src/plugins/plot/overlayPlot/OverlayPlotViewProvider.js

@@ -20,7 +20,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import Plot from '../single/Plot.vue';
+import Plot from '../Plot.vue';
 import Vue from 'vue';
 
 export default function OverlayPlotViewProvider(openmct) {
@@ -33,11 +33,11 @@ export default function OverlayPlotViewProvider(openmct) {
         name: 'Overlay Plot',
         cssClass: 'icon-telemetry',
         canView(domainObject, objectPath) {
-            return isCompactView(objectPath) && domainObject.type === 'telemetry.plot.overlay';
+            return domainObject.type === 'telemetry.plot.overlay';
         },
 
         canEdit(domainObject, objectPath) {
-            return isCompactView(objectPath) && domainObject.type === 'telemetry.plot.overlay';
+            return domainObject.type === 'telemetry.plot.overlay';
         },
 
         view: function (domainObject, objectPath) {

src/plugins/plot/plugin.js

@@ -20,262 +20,52 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define([
-    "./src/chart/MCTChartDirective",
-    "./src/plot/MCTPlotDirective",
-    './src/plot/MCTTicksDirective',
-    "./src/telemetry/MCTOverlayPlot",
-    "./src/telemetry/PlotController",
-    "./src/telemetry/StackedPlotController",
-    "./src/inspector/PlotInspector",
-    "./src/inspector/PlotOptionsController",
-    "./src/inspector/PlotLegendFormController",
-    "./src/inspector/PlotYAxisFormController",
-    "./src/inspector/PlotSeriesFormController",
-    "./src/inspector/HideElementPoolDirective",
-    "./src/services/ExportImageService",
-    './src/PlotViewPolicy',
-    "./res/templates/plot-options.html",
-    "./res/templates/plot-options-browse.html",
-    "./res/templates/plot-options-edit.html",
-    "./res/templates/stacked-plot.html",
-    "./res/templates/plot.html"
-], function (
-    MCTChartDirective,
-    MCTPlotDirective,
-    MCTTicksDirective,
-    MCTOverlayPlot,
-    PlotController,
-    StackedPlotController,
-    PlotInspector,
-    PlotOptionsController,
-    PlotLegendFormController,
-    PlotYAxisFormController,
-    PlotSeriesFormController,
-    HideElementPool,
-    ExportImageService,
-    PlotViewPolicy,
-    plotOptionsTemplate,
-    plotOptionsBrowseTemplate,
-    plotOptionsEditTemplate,
-    StackedPlotTemplate,
-    PlotTemplate
-) {
+import PlotViewProvider from './PlotViewProvider';
+import OverlayPlotViewProvider from './overlayPlot/OverlayPlotViewProvider';
+import StackedPlotViewProvider from './stackedPlot/StackedPlotViewProvider';
+import PlotsInspectorViewProvider from './inspector/PlotsInspectorViewProvider';
+import OverlayPlotCompositionPolicy from './overlayPlot/OverlayPlotCompositionPolicy';
+import StackedPlotCompositionPolicy from './stackedPlot/StackedPlotCompositionPolicy';
 
-    let installed = false;
+export default function () {
+    return function install(openmct) {
 
-    function PlotPlugin() {
-        return function install(openmct) {
-            if (installed) {
-                return;
-            }
+        openmct.types.addType('telemetry.plot.overlay', {
+            key: "telemetry.plot.overlay",
+            name: "Overlay Plot",
+            cssClass: "icon-plot-overlay",
+            description: "Combine multiple telemetry elements and view them together as a plot with common X and Y axes. Can be added to Display Layouts.",
+            creatable: "true",
+            initialize: function (domainObject) {
+                domainObject.composition = [];
+                domainObject.configuration = {
+                    series: [],
+                    yAxis: {},
+                    xAxis: {}
+                };
+            },
+            priority: 891
+        });
 
-            installed = true;
+        openmct.types.addType('telemetry.plot.stacked', {
+            key: "telemetry.plot.stacked",
+            name: "Stacked Plot",
+            cssClass: "icon-plot-stacked",
+            description: "Combine multiple telemetry elements and view them together as a plot with a common X axis and individual Y axes. Can be added to Display Layouts.",
+            creatable: true,
+            initialize: function (domainObject) {
+                domainObject.composition = [];
+                domainObject.configuration = {};
+            },
+            priority: 890
+        });
 
-            openmct.legacyRegistry.register("openmct/plot", {
-                "name": "Plot view for telemetry, reborn",
-                "extensions": {
-                    "policies": [
-                        {
-                            "category": "view",
-                            "implementation": PlotViewPolicy,
-                            "depends": [
-                                "openmct"
-                            ]
-                        }
-                    ],
-                    "views": [
-                        // {
-                        //     "name": "Plot",
-                        //     "key": "plot-single",
-                        //     "cssClass": "icon-telemetry",
-                        //     "template": PlotTemplate,
-                        //     "needs": [
-                        //         "telemetry"
-                        //     ],
-                        //     "delegation": false,
-                        //     "priority": "mandatory"
-                        // },
-                        // {
-                        //     "name": "Overlay Plot",
-                        //     "key": "overlayPlot",
-                        //     "cssClass": "icon-plot-overlay",
-                        //     "type": "telemetry.plot.overlay",
-                        //     "template": PlotTemplate,
-                        //     "editable": true
-                        // },
-                        // {
-                        //     "name": "Stacked Plot",
-                        //     "key": "stackedPlot",
-                        //     "cssClass": "icon-plot-stacked",
-                        //     "type": "telemetry.plot.stacked",
-                        //     "template": StackedPlotTemplate,
-                        //     "editable": true
-                        // }
-                    ],
-                    "directives": [
-                        {
-                            "key": "mctTicks",
-                            "implementation": MCTTicksDirective,
-                            "depends": []
-                        },
-                        {
-                            "key": "mctChart",
-                            "implementation": MCTChartDirective,
-                            "depends": [
-                                "$interval",
-                                "$log"
-                            ]
-                        },
-                        {
-                            "key": "mctPlot",
-                            "implementation": MCTPlotDirective,
-                            "depends": [],
-                            "templateUrl": "templates/mct-plot.html"
-                        },
-                        {
-                            "key": "mctOverlayPlot",
-                            "implementation": MCTOverlayPlot,
-                            "depends": []
-                        },
-                        {
-                            "key": "hideElementPool",
-                            "implementation": HideElementPool,
-                            "depends": []
-                        }
-                    ],
-                    "controllers": [
-                        {
-                            "key": "PlotController",
-                            "implementation": PlotController,
-                            "depends": [
-                                "$scope",
-                                "$element",
-                                "formatService",
-                                "openmct",
-                                "objectService",
-                                "exportImageService"
-                            ]
-                        },
-                        {
-                            "key": "StackedPlotController",
-                            "implementation": StackedPlotController,
-                            "depends": [
-                                "$scope",
-                                "openmct",
-                                "objectService",
-                                "$element",
-                                "exportImageService"
-                            ]
-                        },
-                        {
-                            "key": "PlotOptionsController",
-                            "implementation": PlotOptionsController,
-                            "depends": [
-                                "$scope",
-                                "openmct",
-                                "$timeout"
-                            ]
-                        },
-                        {
-                            key: "PlotLegendFormController",
-                            implementation: PlotLegendFormController,
-                            depends: [
-                                "$scope",
-                                "openmct",
-                                "$attrs"
-                            ]
-                        },
-                        {
-                            key: "PlotYAxisFormController",
-                            implementation: PlotYAxisFormController,
-                            depends: [
-                                "$scope",
-                                "openmct",
-                                "$attrs"
-                            ]
-                        },
-                        {
-                            key: "PlotSeriesFormController",
-                            implementation: PlotSeriesFormController,
-                            depends: [
-                                "$scope",
-                                "openmct",
-                                "$attrs"
-                            ]
-                        }
-                    ],
-                    "services": [
-                        {
-                            "key": "exportImageService",
-                            "implementation": ExportImageService,
-                            "depends": [
-                                "dialogService"
-                            ]
-                        }
-                    ],
-                    "types": [
-                        {
-                            "key": "telemetry.plot.overlay",
-                            "name": "Overlay Plot",
-                            "cssClass": "icon-plot-overlay",
-                            "description": "Combine multiple telemetry elements and view them together as a plot with common X and Y axes. Can be added to Display Layouts.",
-                            "features": "creation",
-                            "contains": [
-                                {
-                                    "has": "telemetry"
-                                }
-                            ],
-                            "model": {
-                                composition: [],
-                                configuration: {
-                                    series: [],
-                                    yAxis: {},
-                                    xAxis: {}
-                                }
-                            },
-                            "properties": [],
-                            "inspector": "plot-options",
-                            "priority": 891
-                        },
-                        {
-                            "key": "telemetry.plot.stacked",
-                            "name": "Stacked Plot",
-                            "cssClass": "icon-plot-stacked",
-                            "description": "Combine multiple telemetry elements and view them together as a plot with a common X axis and individual Y axes. Can be added to Display Layouts.",
-                            "features": "creation",
-                            "contains": [
-                                "telemetry.plot.overlay",
-                                {"has": "telemetry"}
-                            ],
-                            "model": {
-                                "composition": [],
-                                "configuration": {}
-                            },
-                            "properties": [],
-                            "priority": 890
-                        }
-                    ],
-                    "representations": [
-                        {
-                            "key": "plot-options",
-                            "template": plotOptionsTemplate
-                        },
-                        {
-                            "key": "plot-options-browse",
-                            "template": plotOptionsBrowseTemplate
-                        },
-                        {
-                            "key": "plot-options-edit",
-                            "template": plotOptionsEditTemplate
-                        }
-                    ]
-                }
-            });
+        openmct.objectViews.addProvider(new StackedPlotViewProvider(openmct));
+        openmct.objectViews.addProvider(new OverlayPlotViewProvider(openmct));
+        openmct.objectViews.addProvider(new PlotViewProvider(openmct));
+        openmct.inspectorViews.addProvider(new PlotsInspectorViewProvider(openmct));
+        openmct.composition.addPolicy(new OverlayPlotCompositionPolicy(openmct).allow);
+        openmct.composition.addPolicy(new StackedPlotCompositionPolicy(openmct).allow);
+    };
+}
 
-            openmct.legacyRegistry.enable("openmct/plot");
-        };
-    }
-
-    return PlotPlugin;
-});

src/plugins/plot/pluginSpec.js

@@ -23,9 +23,11 @@
 import {createMouseEvent, createOpenMct, resetApplicationState, spyOnBuiltins} from "utils/testing";
 import PlotVuePlugin from "./plugin";
 import Vue from "vue";
-import StackedPlot from "../stackedPlot/StackedPlot.vue";
-import configStore from "@/plugins/plot/vue/single/configuration/configStore";
+import StackedPlot from "./stackedPlot/StackedPlot.vue";
+import configStore from "./configuration/configStore";
 import EventEmitter from "EventEmitter";
+import PlotOptions from "./inspector/PlotOptions.vue";
+import PlotConfigurationModel from "./configuration/PlotConfigurationModel";
 
 describe("the plugin", function () {
     let element;
@@ -174,6 +176,35 @@ describe("the plugin", function () {
             expect(plotView).toBeDefined();
         });
 
+        it('provides an inspector view for overlay plots', () => {
+            let selection = [
+                [
+                    {
+                        context: {
+                            item: {
+                                id: "test-object",
+                                type: "telemetry.plot.overlay",
+                                telemetry: {
+                                    values: [{
+                                        key: "some-key"
+                                    }]
+                                }
+                            }
+                        }
+                    },
+                    {
+                        context: {
+                            item: {
+                                type: 'time-strip'
+                            }
+                        }
+                    }
+                ]
+            ];
+            const plotInspectorView = openmct.inspectorViews.get(selection);
+            expect(plotInspectorView.length).toEqual(1);
+        });
+
         it("provides a stacked plot view for objects with telemetry", () => {
             const testTelemetryObject = {
                 id: "test-object",
@@ -282,6 +313,46 @@ describe("the plugin", function () {
             expect(options[0].value).toBe("Some attribute");
             expect(options[1].value).toBe("Another attribute");
         });
+
+        it('hides the pause and play controls', () => {
+            let pauseEl = element.querySelectorAll(".c-button-set .icon-pause");
+            let playEl = element.querySelectorAll(".c-button-set .icon-arrow-right");
+            expect(pauseEl.length).toBe(0);
+            expect(playEl.length).toBe(0);
+        });
+
+        describe('pause and play controls', () => {
+            beforeEach(() => {
+                openmct.time.clock('local', {
+                    start: -1000,
+                    end: 100
+                });
+
+                return Vue.nextTick();
+            });
+
+            it('shows the pause controls', (done) => {
+                Vue.nextTick(() => {
+                    let pauseEl = element.querySelectorAll(".c-button-set .icon-pause");
+                    expect(pauseEl.length).toBe(1);
+                    done();
+                });
+
+            });
+
+            it('shows the play control if plot is paused', (done) => {
+                let pauseEl = element.querySelector(".c-button-set .icon-pause");
+                const clickEvent = createMouseEvent("click");
+
+                pauseEl.dispatchEvent(clickEvent);
+                Vue.nextTick(() => {
+                    let playEl = element.querySelectorAll(".c-button-set .is-paused");
+                    expect(playEl.length).toBe(1);
+                    done();
+                });
+
+            });
+        });
     });
 
     describe("The stacked plot view", () => {
@@ -578,4 +649,218 @@ describe("the plugin", function () {
         });
     });
 
+    describe('the inspector view', () => {
+        let component;
+        let viewComponentObject;
+        let mockComposition;
+        let testTelemetryObject;
+        let selection;
+        let config;
+        beforeEach((done) => {
+            testTelemetryObject = {
+                identifier: {
+                    namespace: "",
+                    key: "test-object"
+                },
+                type: "test-object",
+                name: "Test Object",
+                telemetry: {
+                    values: [{
+                        key: "utc",
+                        format: "utc",
+                        name: "Time",
+                        hints: {
+                            domain: 1
+                        }
+                    }, {
+                        key: "some-key",
+                        name: "Some attribute",
+                        hints: {
+                            range: 1
+                        }
+                    }, {
+                        key: "some-other-key",
+                        name: "Another attribute",
+                        hints: {
+                            range: 2
+                        }
+                    }]
+                }
+            };
+
+            selection = [
+                [
+                    {
+                        context: {
+                            item: {
+                                id: "test-object",
+                                identifier: {
+                                    key: "test-object",
+                                    namespace: ''
+                                },
+                                type: "telemetry.plot.overlay",
+                                configuration: {
+                                    series: [
+                                        {
+                                            identifier: {
+                                                key: "test-object",
+                                                namespace: ''
+                                            }
+                                        }
+                                    ]
+                                },
+                                composition: []
+                            }
+                        }
+                    },
+                    {
+                        context: {
+                            item: {
+                                type: 'time-strip',
+                                identifier: {
+                                    key: 'some-other-key',
+                                    namespace: ''
+                                }
+                            }
+                        }
+                    }
+                ]
+            ];
+
+            mockComposition = new EventEmitter();
+            mockComposition.load = () => {
+                mockComposition.emit('add', testTelemetryObject);
+
+                return [testTelemetryObject];
+            };
+
+            spyOn(openmct.composition, 'get').and.returnValue(mockComposition);
+
+            const configId = openmct.objects.makeKeyString(selection[0][0].context.item.identifier);
+            config = new PlotConfigurationModel({
+                id: configId,
+                domainObject: selection[0][0].context.item,
+                openmct: openmct
+            });
+            configStore.add(configId, config);
+
+            let viewContainer = document.createElement('div');
+            child.append(viewContainer);
+            component = new Vue({
+                el: viewContainer,
+                components: {
+                    PlotOptions
+                },
+                provide: {
+                    openmct: openmct,
+                    domainObject: selection[0][0].context.item,
+                    path: [selection[0][0].context.item, selection[0][1].context.item]
+                },
+                template: '<plot-options/>'
+            });
+
+            Vue.nextTick(() => {
+                viewComponentObject = component.$root.$children[0];
+                done();
+            });
+        });
+
+        describe('in view only mode', () => {
+            let browseOptionsEl;
+            let editOptionsEl;
+            beforeEach(() => {
+                browseOptionsEl = viewComponentObject.$el.querySelector('.js-plot-options-browse');
+                editOptionsEl = viewComponentObject.$el.querySelector('.js-plot-options-edit');
+            });
+
+            it('does not show the edit options', () => {
+                expect(editOptionsEl).toBeNull();
+            });
+
+            it('shows the name', () => {
+                const seriesEl = browseOptionsEl.querySelector('.c-object-label__name');
+                expect(seriesEl.innerHTML).toEqual(testTelemetryObject.name);
+            });
+
+            it('shows in collapsed mode', () => {
+                const seriesEl = browseOptionsEl.querySelectorAll('.c-disclosure-triangle--expanded');
+                expect(seriesEl.length).toEqual(0);
+            });
+
+            it('shows in expanded mode', () => {
+                let expandControl = browseOptionsEl.querySelector(".c-disclosure-triangle");
+                const clickEvent = createMouseEvent("click");
+                expandControl.dispatchEvent(clickEvent);
+
+                const plotOptionsProperties = browseOptionsEl.querySelectorAll('.js-plot-options-browse-properties .grid-row');
+                expect(plotOptionsProperties.length).toEqual(5);
+            });
+        });
+
+        describe('in edit mode', () => {
+            let editOptionsEl;
+            let browseOptionsEl;
+
+            beforeEach((done) => {
+                viewComponentObject.setEditState(true);
+                Vue.nextTick(() => {
+                    editOptionsEl = viewComponentObject.$el.querySelector('.js-plot-options-edit');
+                    browseOptionsEl = viewComponentObject.$el.querySelector('.js-plot-options-browse');
+                    done();
+                });
+            });
+
+            it('does not show the browse options', () => {
+                expect(browseOptionsEl).toBeNull();
+            });
+
+            it('shows the name', () => {
+                const seriesEl = editOptionsEl.querySelector('.c-object-label__name');
+                expect(seriesEl.innerHTML).toEqual(testTelemetryObject.name);
+            });
+
+            it('shows in collapsed mode', () => {
+                const seriesEl = editOptionsEl.querySelectorAll('.c-disclosure-triangle--expanded');
+                expect(seriesEl.length).toEqual(0);
+            });
+
+            it('shows in collapsed mode', () => {
+                const seriesEl = editOptionsEl.querySelectorAll('.c-disclosure-triangle--expanded');
+                expect(seriesEl.length).toEqual(0);
+            });
+
+            it('renders expanded', () => {
+                const expandControl = editOptionsEl.querySelector(".c-disclosure-triangle");
+                const clickEvent = createMouseEvent("click");
+                expandControl.dispatchEvent(clickEvent);
+
+                const plotOptionsProperties = editOptionsEl.querySelectorAll(".js-plot-options-edit-properties .grid-row");
+                expect(plotOptionsProperties.length).toEqual(6);
+            });
+
+            it('shows yKeyOptions', () => {
+                const expandControl = editOptionsEl.querySelector(".c-disclosure-triangle");
+                const clickEvent = createMouseEvent("click");
+                expandControl.dispatchEvent(clickEvent);
+
+                const plotOptionsProperties = editOptionsEl.querySelectorAll(".js-plot-options-edit-properties .grid-row");
+
+                const yKeySelection = plotOptionsProperties[0].querySelector('select');
+                const options = Array.from(yKeySelection.options).map((option) => {
+                    return option.value;
+                });
+                expect(options).toEqual([testTelemetryObject.telemetry.values[1].key, testTelemetryObject.telemetry.values[2].key]);
+            });
+
+            it('shows yAxis options', () => {
+                const expandControl = editOptionsEl.querySelector(".c-disclosure-triangle");
+                const clickEvent = createMouseEvent("click");
+                expandControl.dispatchEvent(clickEvent);
+
+                const yAxisProperties = editOptionsEl.querySelectorAll("div.grid-properties:first-of-type .l-inspector-part");
+                expect(yAxisProperties.length).toEqual(3);
+            });
+        });
+    });
+
 });

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

@@ -1,279 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2021, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<div 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')
-        }"
-    >
-        <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 }">
-
-            <!-- 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>
-                <div class="plot-legend-item"
-                     ng-class="{
-                        'is-status--missing': series.domainObject.status === 'missing'
-                    }"
-                     ng-repeat="series in series track by $index"
-                >
-                    <div class="plot-series-swatch-and-name">
-                        <span class="plot-series-color-swatch"
-                              ng-style="{ 'background-color': series.get('color').asHexString() }">
-                        </span>
-                        <span class="is-status__indicator" title="This item is missing or suspect"></span>
-                        <span class="plot-series-name">{{ series.nameWithUnit() }}</span>
-                    </div>
-                    <div class="plot-series-value hover-value-enabled value-to-display-{{ legend.get('valueToShowWhenCollapsed') }} {{ series.closest.mctLimitState.cssClass }}"
-                         ng-class="{ 'cursor-hover': (legend.get('valueToShowWhenCollapsed').indexOf('nearest') != -1) }"
-                         ng-show="!!highlights.length && legend.get('valueToShowWhenCollapsed') !== 'none'">
-                        {{ legend.get('valueToShowWhenCollapsed') === 'nearestValue' ?
-                            series.formatY(series.closest) :
-                            legend.get('valueToShowWhenCollapsed') === 'nearestTimestamp' ?
-                                 series.closest && series.formatX(series.closest) :
-                                 series.formatY(series.get('stats')[legend.get('valueToShowWhenCollapsed') + 'Point']);
-                        }}
-                    </div>
-                </div>
-            </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>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th ng-if="legend.get('showTimestampWhenExpanded')">
-                                Timestamp
-                            </th>
-                            <th ng-if="legend.get('showValueWhenExpanded')">
-                                Value
-                            </th>
-                            <th ng-if="legend.get('showUnitsWhenExpanded')">
-                                Unit
-                            </th>
-                            <th ng-if="legend.get('showMinimumWhenExpanded')"
-                                class="mobile-hide">
-                                Min
-                            </th>
-                            <th ng-if="legend.get('showMaximumWhenExpanded')"
-                                class="mobile-hide">
-                                Max
-                            </th>
-                        </tr>
-                    </thead>
-                    <tr ng-repeat="series in series"
-                        class="plot-legend-item"
-                        ng-class="{
-                            'is-status--missing': series.domainObject.status === 'missing'
-                        }"
-                    >
-                        <td class="plot-series-swatch-and-name">
-                            <span class="plot-series-color-swatch"
-                                  ng-style="{ 'background-color': series.get('color').asHexString() }">
-                            </span>
-                            <span class="is-status__indicator" title="This item is missing or suspect"></span>
-                            <span class="plot-series-name">{{ series.get('name') }}</span>
-                        </td>
-
-                        <td ng-if="legend.get('showTimestampWhenExpanded')">
-                            <span class="plot-series-value cursor-hover hover-value-enabled">
-                                {{ series.closest && series.formatX(series.closest) }}
-                            </span>
-                        </td>
-                        <td ng-if="legend.get('showValueWhenExpanded')">
-                            <span class="plot-series-value cursor-hover hover-value-enabled"
-                                  ng-class="series.closest.mctLimitState.cssClass">
-                                {{ series.formatY(series.closest) }}
-                            </span>
-                        </td>
-                        <td ng-if="legend.get('showUnitsWhenExpanded')">
-                            <span class="plot-series-value cursor-hover hover-value-enabled">
-                                {{ series.get('unit') }}
-                            </span>
-                        </td>
-                        <td ng-if="legend.get('showMinimumWhenExpanded')"
-                            class="mobile-hide">
-                            <span class="plot-series-value">
-                                {{ series.formatY(series.get('stats').minPoint) }}
-                            </span>
-                        </td>
-                        <td ng-if="legend.get('showMaximumWhenExpanded')"
-                            class="mobile-hide">
-                            <span class="plot-series-value">
-                                {{ series.formatY(series.get('stats').maxPoint) }}
-                            </span>
-                        </td>
-                    </tr>
-                </table>
-            </div>
-        </div>
-    </div>
-
-    <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'
-             }">
-
-            <div class="gl-plot-label gl-plot-y-label"
-                ng-class="{'icon-gear': (yKeyOptions.length > 1 && series.length === 1)}"
-                >{{yAxis.get('label')}}
-            </div>
-
-            <select  class="gl-plot-y-label__select local-controls--hidden"
-                     ng-if="yKeyOptions.length > 1 && series.length === 1"
-                     ng-model="yAxisLabel" ng-change="plot.toggleYAxisLabel(yAxisLabel, yKeyOptions, series[0])">
-                <option ng-repeat="option in yKeyOptions"
-                        value="{{option.name}}"
-                        ng-selected="option.name === yAxisLabel">
-                    {{option.name}}
-                </option>
-            </select>
-
-            <mct-ticks axis="yAxis">
-                <div ng-repeat="tick in ticks track by tick.value"
-                     class="gl-plot-tick gl-plot-y-tick-label"
-                     ng-style="{ top: (100 * (max - tick.value) / interval) + '%' }"
-                     title="{{:: tick.fullText || tick.text }}"
-                     style="margin-top: -0.50em; direction: ltr;">
-                    <span>{{:: tick.text}}</span>
-                </div>
-            </mct-ticks>
-        </div>
-        <div class="gl-plot-wrapper-display-area-and-x-axis"
-             ng-style="{
-                 left: (tickWidth + 20) + 'px'
-             }">
-
-            <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"
-                         ng-style="{
-                             right: (100 * (max - tick.value) / interval) + '%',
-                             height: '100%'
-                         }"
-                         ng-show="plot.gridLines"
-                    >
-                    </div>
-                </mct-ticks>
-
-                <mct-ticks axis="yAxis">
-                    <div class="gl-plot-hash hash-h"
-                          ng-repeat="tick in ticks track by tick.value"
-                          ng-style="{ bottom: (100 * (tick.value - min) / interval) + '%', width: '100%' }"
-                          ng-show="plot.gridLines"
-                    >
-                    </div>
-                </mct-ticks>
-
-                <mct-chart config="config"
-                           series="series"
-                           rectangles="rectangles"
-                           highlights="highlights"
-                           the-x-axis="xAxis"
-                           the-y-axis="yAxis">
-                </mct-chart>
-
-                <div class="gl-plot__local-controls h-local-controls h-local-controls--overlay-content c-local-controls--show-on-hover">
-                    <div class="c-button-set c-button-set--strip-h">
-                        <button class="c-button icon-minus"
-                                ng-click="plot.zoom('out', 0.2)"
-                                title="Zoom out">
-                        </button>
-                        <button class="c-button icon-plus"
-                                ng-click="plot.zoom('in', 0.2)"
-                                title="Zoom in">
-                        </button>
-                    </div>
-                    <div class="c-button-set c-button-set--strip-h"
-                         ng-disabled="!plotHistory.length">
-                        <button class="c-button icon-arrow-left"
-                                ng-click="plot.back()"
-                                title="Restore previous pan/zoom">
-                        </button>
-                        <button class="c-button icon-reset"
-                                ng-click="plot.clear()"
-                                title="Reset pan/zoom">
-                        </button>
-                    </div>
-                </div>
-
-                <!--Cursor guides-->
-                <div class="c-cursor-guide--v js-cursor-guide--v"
-                    ng-show="plot.cursorGuide">
-                </div>
-                <div class="c-cursor-guide--h js-cursor-guide--h"
-                    ng-show="plot.cursorGuide">
-                </div>
-            </div>
-
-            <div class="gl-plot-axis-area gl-plot-x has-local-controls">
-                <mct-ticks axis="xAxis">
-                     <div ng-repeat="tick in ticks track by tick.text"
-                          class="gl-plot-tick gl-plot-x-tick-label"
-                          ng-style="{
-                              left: (100 * (tick.value - min) / interval) + '%'
-                          }"
-                          ng-title=":: tick.fullText || tick.text">
-                         {{:: tick.text }}
-                     </div>
-                </mct-ticks>
-
-                <div
-                    class="gl-plot-label gl-plot-x-label"
-                    ng-class="{'icon-gear': isEnabledXKeyToggle()}"
-                >
-                    {{ 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>
-    </div>
-
-</div>

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

@@ -1,148 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2021, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<div ng-controller="PlotOptionsController">
-    <ul class="c-tree">
-        <h2 title="Plot series display properties in this object">Plot Series</h2>
-        <li ng-repeat="series in config.series.models">
-            <div class="c-tree__item menus-to-left">
-                <span class='c-disclosure-triangle is-enabled flex-elem'
-                      ng-class="{ 'c-disclosure-triangle--expanded': series.expanded }"
-                      ng-click="series.expanded = !series.expanded">
-                </span>
-                <mct-representation
-                        class="rep-object-label c-tree__item__label"
-                        key="'label'"
-                        mct-object="series.oldObject">
-                </mct-representation>
-            </div>
-            <ul class="grid-properties" ng-show="series.expanded">
-                <li class="grid-row">
-                    <div class="grid-cell label"
-                         title="The field to be plotted as a value for this series.">Value</div>
-                    <div class="grid-cell value">
-                        {{series.get('yKey')}}
-                    </div>
-                </li>
-                <li class="grid-row">
-                    <div class="grid-cell label"
-                         title="The rendering method to join lines for this series.">Line Method</div>
-                    <div class="grid-cell value">{{ {
-                        'none': 'None',
-                        'linear': 'Linear interpolation',
-                        'stepAfter': 'Step After'
-                        }[series.get('interpolate')] }}
-                    </div>
-                </li>
-                <li class="grid-row">
-                    <div class="grid-cell label"
-                         title="Whether markers are displayed, and their size.">Markers</div>
-                    <div class="grid-cell value">
-                        {{ series.markerOptionsDisplayText() }}
-                    </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">
-                        {{series.get('alarmMarkers') ? "Enabled" : "Disabled"}}
-                    </div>
-                </li>
-                <li class="grid-row">
-                    <div class="grid-cell label"
-                         title="The plot line and marker color for this series.">Color</div>
-                    <div class="grid-cell value">
-                         <span class="c-color-swatch"
-                                  ng-style="{
-                                  'background': series.get('color').asHexString()
-                               }">
-                         </span>
-                    </div>
-                </li>
-            </ul>
-        </li><!-- end repeat -->
-    </ul>
-    <div class="grid-properties">
-        <ul class="l-inspector-part">
-            <h2 title="Y axis settings for this object">Y Axis</h2>
-            <li class="grid-row">
-                <div class="grid-cell label"
-                     title="Manually override how the Y axis is labeled.">Label</div>
-                <div class="grid-cell value">{{ config.yAxis.get('label') ? config.yAxis.get('label') : "Not defined" }}</div>
-            </li>
-            <li class="grid-row">
-                <div class="grid-cell label"
-                     title="Automatically scale the Y axis to keep all values in view.">Autoscale</div>
-                <div class="grid-cell value">
-                    {{ config.yAxis.get('autoscale') ? "Enabled: " : "Disabled" }}
-                    {{ config.yAxis.get('autoscale') ? (config.yAxis.get('autoscalePadding')) : ""}}
-                </div>
-            </li>
-            <li class="grid-row" ng-if="!form.yAxis.autoscale">
-                <div class="grid-cell label"
-                     title="Minimum Y axis value.">Minimum value</div>
-                <div class="grid-cell value">{{ config.yAxis.get('range').min }}</div>
-            </li>
-            <li class="grid-row" ng-if="!form.yAxis.autoscale">
-                <div class="grid-cell label"
-                     title="Maximum Y axis value.">Maximum value</div>
-                <div class="grid-cell value">{{ config.yAxis.get('range').max }}</div>
-            </li>
-        </ul>
-        <ul class="l-inspector-part">
-            <h2 title="Legend settings for this object">Legend</h2>
-            <li class="grid-row">
-                <div class="grid-cell label"
-                     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>
-                <div class="grid-cell value">{{ config.legend.get('expandByDefault') ? "Yes" : "No" }}</div>
-            </li>
-            <li class="grid-row">
-                <div class="grid-cell label"
-                     title="What to display in the legend when it's collapsed.">Show when collapsed:</div>
-                <div class="grid-cell value">{{
-                    config.legend.get('valueToShowWhenCollapsed').replace('nearest', '')
-                    }}
-                </div>
-            </li>
-            <li class="grid-row">
-                <div class="grid-cell label"
-                     title="What to display in the legend when it's expanded.">Show when expanded:</div>
-                <div class="grid-cell value comma-list">
-                    <span ng-if="config.legend.get('showTimestampWhenExpanded')">Timestamp</span>
-                    <span ng-if="config.legend.get('showValueWhenExpanded')">Value</span>
-                    <span ng-if="config.legend.get('showMinimumWhenExpanded')">Min</span>
-                    <span ng-if="config.legend.get('showMaximumWhenExpanded')">Max</span>
-                    <span ng-if="config.legend.get('showUnitsWhenExpanded')">Units</span>
-                </div>
-            </li>
-        </ul>
-    </div>
-</div>