Merge branch 'master' into stackplots-destroy

Merge'n master

.circleci/config.yml

@@ -13,27 +13,24 @@ jobs:
         type: string
       browser:
         type: string
+      always-pass:
+        type: boolean  
     executor: linux
     steps:
       - checkout
       - restore_cache:
           key: deps-{{ .Branch }}--<< parameters.node-version >>--{{ checksum "package.json" }}
       - node/install:
-          install-npm: false
           node-version: << parameters.node-version >>
-      - run: npm install
-      - when:
+      - node/install-packages:
+          override-ci-command: npm install
+      - when: # Just to save time until caching saves the browser bin
           condition:
             equal: [ "FirefoxESR", <<parameters.browser>> ]
           steps:
             - browser-tools/install-firefox:
-                version: "91.2.0esr" #https://archive.mozilla.org/pub/firefox/releases/          
-      - when:
-          condition:
-            equal: [ "Firefox", <<parameters.browser>> ]
-          steps:
-            - browser-tools/install-firefox
-      - when:
+                version: "78.11.0esr" #https://archive.mozilla.org/pub/firefox/releases/          
+      - when: # Just to save time until caching saves the browser bin
           condition:
             equal: [ "ChromeHeadless", <<parameters.browser>> ]
           steps:
@@ -45,53 +42,47 @@ jobs:
             - ~/.npm
             - ~/.cache
             - node_modules
-      - when:
-          condition:
-            equal: [ "", <<parameters.browser>> ] #Only run linting when browsers are not running to save time
-          steps:
-            - run: npm run lint
-      - when:
-          condition: << parameters.browser >> #Truthy evaluation to only run when browser is specified
-          steps:
-            - run: npm run test:coverage -- --browsers=<<parameters.browser>>
-            - store_test_results:
-                path: dist/reports/tests/
-            - store_artifacts:
-                path: dist/reports/
+      - run: npm run lint
+      - run: npm run test:coverage -- --browsers=<<parameters.browser>> || <<parameters.always-pass>>
+      - store_test_results:
+          path: dist/reports/tests/
+      - store_artifacts:
+          path: dist/reports/
 workflows:
   matrix-tests:
     jobs:
       - test:
-          post-steps:
-            - run:
-                command:
-                  curl -Os https://uploader.codecov.io/latest/linux/codecov;chmod +x codecov;./codecov              
           name: node10-chrome
           node-version: lts/dubnium
           browser: ChromeHeadless
+          always-pass: false
       - test:
-          name: node12-build-only
+          name: node12-firefoxESR-build-only
           node-version: lts/erbium
-          browser: "" #Skip testing
-      - test: 
-          name: node14-build-only
+          browser: FirefoxESR
+          always-pass: true
+      - test:
+          name: node14-chrome-build-only
           node-version: lts/fermium
-          browser: "" #Skip testing
-
+          browser: ChromeHeadless
+          always-pass: true
   nightly:
     jobs:
       - test:
           name: node10-chrome-nightly
           node-version: lts/dubnium
           browser: ChromeHeadless
+          always-pass: false
       - test:
           name: node12-firefoxESR-nightly
           node-version: lts/erbium
           browser: FirefoxESR
+          always-pass: false
       - test:
-          name: node14-firefox-nightly
+          name: node14-chrome-nightly
           node-version: lts/fermium
-          browser: Firefox
+          browser: ChromeHeadless
+          always-pass: false
     triggers:
       - schedule:
           cron: "0 0 * * *"

.github/dependabot.yml

@@ -1,23 +0,0 @@
-
-version: 2
-updates:
-  - package-ecosystem: "npm"
-    directory: "/"
-    schedule:
-      interval: "daily"  
-    open-pull-requests-limit: 2
-    labels:
-      - "type:maintenance"
-      - "dependencies"
-    allow:
-      - dependency-name: "eslint*"
-      - dependency-name: "karma*"
-      - dependency-name: "jasmine*"
-
-  - package-ecosystem: "github-actions"
-    directory: "/"
-    schedule:
-      interval: "daily"    
-    labels:
-      - "type:maintenance"
-      - "dependencies"

.github/workflows/codeql-analysis.yml

@@ -4,14 +4,6 @@ name: "CodeQL"
 on:
   push:
     branches: [ master ]
-  pull_request:
-    branches: [ master ]
-    paths-ignore:
-      - '**/*Spec.js'
-      - '**/*.md'
-      - '**/*.txt'
-      - '**/*.yml'
-      - '**/*.yaml'
   schedule:
     - cron: '28 21 * * 3'
 

.gitignore

@@ -44,6 +44,3 @@ report.*.json
 .lighthouseci
 
 package-lock.json
-
-#codecov artifacts
-codecov

README.md

@@ -1,4 +1,4 @@
-# Open MCT [![license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](http://www.apache.org/licenses/LICENSE-2.0) [![Language grade: JavaScript](https://img.shields.io/lgtm/grade/javascript/g/nasa/openmct.svg?logo=lgtm&logoWidth=18)](https://lgtm.com/projects/g/nasa/openmct/context:javascript) [![codecov](https://codecov.io/gh/nasa/openmct/branch/master/graph/badge.svg?token=7DQIipp3ej)](https://codecov.io/gh/nasa/openmct)
+# Open MCT [![license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](http://www.apache.org/licenses/LICENSE-2.0) [![Language grade: JavaScript](https://img.shields.io/lgtm/grade/javascript/g/nasa/openmct.svg?logo=lgtm&logoWidth=18)](https://lgtm.com/projects/g/nasa/openmct/context:javascript)
 
 Open MCT (Open Mission Control Technologies) is a next-generation mission control framework for visualization of data on desktop and mobile devices. It is developed at NASA's Ames Research Center, and is being used by NASA for data analysis of spacecraft missions, as well as planning and operation of experimental rover systems. As a generalizable and open source framework, Open MCT could be used as the basis for building applications for planning, operation, and analysis of any systems producing telemetry data.
 
@@ -85,8 +85,6 @@ naming convention is otherwise the same.)
 When `npm test` is run, test results will be written as HTML to
 `dist/reports/tests/`. Code coverage information is written to `dist/reports/coverage`.
 
-Code Coverage Reports are available from [codecov.io](https://app.codecov.io/gh/nasa/openmct/)
-
 # Glossary
 
 Certain terms are used throughout Open MCT with consistent meanings

codecov.yml

@@ -1,15 +0,0 @@
-codecov:
-  require_ci_to_pass: true
-
-status:
-  project:
-    default:
-      informational: true
-  patch:
-    default:
-      informational: true
-
-comment:
-  layout: "reach,diff,flags,files,footer"
-  behavior: default
-  require_changes: false

example/generator/GeneratorMetadataProvider.js

@@ -118,6 +118,100 @@ define([
                     }
                 }
             ]
+        },
+        'example.spectral-generator': {
+            values: [
+                {
+                    key: "name",
+                    name: "Name",
+                    format: "string"
+                },
+                {
+                    key: "utc",
+                    name: "Time",
+                    format: "utc",
+                    hints: {
+                        domain: 1
+                    }
+                },
+                {
+                    key: "wavelength",
+                    name: "Wavelength",
+                    unit: "Hz",
+                    formatString: '%0.2f',
+                    hints: {
+                        domain: 2,
+                        spectralAttribute: true
+                    }
+                },
+                {
+                    key: "cos",
+                    name: "Cosine",
+                    unit: "deg",
+                    formatString: '%0.2f',
+                    hints: {
+                        range: 2,
+                        spectralAttribute: true
+                    }
+                }
+            ]
+        },
+        'example.spectral-aggregate-generator': {
+            values: [
+                {
+                    key: "name",
+                    name: "Name",
+                    format: "string"
+                },
+                {
+                    key: "utc",
+                    name: "Time",
+                    format: "utc",
+                    hints: {
+                        domain: 1
+                    }
+                },
+                {
+                    key: "ch1",
+                    name: "Channel 1",
+                    format: "string",
+                    hints: {
+                        range: 1
+                    }
+                },
+                {
+                    key: "ch2",
+                    name: "Channel 2",
+                    format: "string",
+                    hints: {
+                        range: 2
+                    }
+                },
+                {
+                    key: "ch3",
+                    name: "Channel 3",
+                    format: "string",
+                    hints: {
+                        range: 3
+                    }
+                },
+                {
+                    key: "ch4",
+                    name: "Channel 4",
+                    format: "string",
+                    hints: {
+                        range: 4
+                    }
+                },
+                {
+                    key: "ch5",
+                    name: "Channel 5",
+                    format: "string",
+                    hints: {
+                        range: 5
+                    }
+                }
+            ]
         }
     };
 

example/generator/SpectralAggregateGeneratorProvider.js

@@ -0,0 +1,86 @@
+/*****************************************************************************
+ * 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 (
+
+) {
+
+    function SpectralAggregateGeneratorProvider() {
+
+    }
+
+    function pointForTimestamp(timestamp, count, name) {
+        return {
+            name: name,
+            utc: String(Math.floor(timestamp / count) * count),
+            ch1: String(Math.floor(timestamp / count) % 1),
+            ch2: String(Math.floor(timestamp / count) % 2),
+            ch3: String(Math.floor(timestamp / count) % 3),
+            ch4: String(Math.floor(timestamp / count) % 4),
+            ch5: String(Math.floor(timestamp / count) % 5)
+        };
+    }
+
+    SpectralAggregateGeneratorProvider.prototype.supportsSubscribe = function (domainObject) {
+        return domainObject.type === 'example.spectral-aggregate-generator';
+    };
+
+    SpectralAggregateGeneratorProvider.prototype.subscribe = function (domainObject, callback) {
+        var count = 5000;
+
+        var interval = setInterval(function () {
+            var now = Date.now();
+            var datum = pointForTimestamp(now, count, domainObject.name);
+            callback(datum);
+        }, count);
+
+        return function () {
+            clearInterval(interval);
+        };
+    };
+
+    SpectralAggregateGeneratorProvider.prototype.supportsRequest = function (domainObject, options) {
+        return domainObject.type === 'example.spectral-aggregate-generator';
+    };
+
+    SpectralAggregateGeneratorProvider.prototype.request = function (domainObject, options) {
+        var start = options.start;
+        var end = Math.min(Date.now(), options.end); // no future values
+        var count = 5000;
+        if (options.strategy === 'latest' || options.size === 1) {
+            start = end;
+        }
+
+        var data = [];
+        while (start <= end && data.length < 5000) {
+            data.push(pointForTimestamp(start, count, domainObject.name));
+            start += count;
+        }
+
+        return Promise.resolve(data);
+    };
+
+    return SpectralAggregateGeneratorProvider;
+
+});

example/generator/SpectralGeneratorProvider.js

@@ -0,0 +1,102 @@
+/*****************************************************************************
+ * 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([
+    './WorkerInterface'
+], function (
+    WorkerInterface
+) {
+
+    var REQUEST_DEFAULTS = {
+        amplitude: 1,
+        wavelength: 1,
+        period: 10,
+        offset: 0,
+        dataRateInHz: 1,
+        randomness: 0,
+        phase: 0
+    };
+
+    function SpectralGeneratorProvider() {
+        this.workerInterface = new WorkerInterface();
+    }
+
+    SpectralGeneratorProvider.prototype.canProvideTelemetry = function (domainObject) {
+        return domainObject.type === 'example.spectral-generator';
+    };
+
+    SpectralGeneratorProvider.prototype.supportsRequest =
+        SpectralGeneratorProvider.prototype.supportsSubscribe =
+            SpectralGeneratorProvider.prototype.canProvideTelemetry;
+
+    SpectralGeneratorProvider.prototype.makeWorkerRequest = function (domainObject, request = {}) {
+        var props = [
+            'amplitude',
+            'wavelength',
+            'period',
+            'offset',
+            'dataRateInHz',
+            'phase',
+            'randomness'
+        ];
+
+        var workerRequest = {};
+
+        props.forEach(function (prop) {
+            if (domainObject.telemetry && Object.prototype.hasOwnProperty.call(domainObject.telemetry, prop)) {
+                workerRequest[prop] = domainObject.telemetry[prop];
+            }
+
+            if (request && Object.prototype.hasOwnProperty.call(request, prop)) {
+                workerRequest[prop] = request[prop];
+            }
+
+            if (!Object.prototype.hasOwnProperty.call(workerRequest, prop)) {
+                workerRequest[prop] = REQUEST_DEFAULTS[prop];
+            }
+
+            workerRequest[prop] = Number(workerRequest[prop]);
+        });
+
+        workerRequest.name = domainObject.name;
+
+        return workerRequest;
+    };
+
+    SpectralGeneratorProvider.prototype.request = function (domainObject, request) {
+        var workerRequest = this.makeWorkerRequest(domainObject, request);
+        workerRequest.start = request.start;
+        workerRequest.end = request.end;
+        workerRequest.spectra = true;
+
+        return this.workerInterface.request(workerRequest);
+    };
+
+    SpectralGeneratorProvider.prototype.subscribe = function (domainObject, callback) {
+        var workerRequest = this.makeWorkerRequest(domainObject, {});
+        workerRequest.spectra = true;
+
+        return this.workerInterface.subscribe(workerRequest, callback);
+    };
+
+    return SpectralGeneratorProvider;
+});

example/generator/plugin.js

@@ -24,11 +24,15 @@ define([
     "./GeneratorProvider",
     "./SinewaveLimitProvider",
     "./StateGeneratorProvider",
+    "./SpectralGeneratorProvider",
+    "./SpectralAggregateGeneratorProvider",
     "./GeneratorMetadataProvider"
 ], function (
     GeneratorProvider,
     SinewaveLimitProvider,
     StateGeneratorProvider,
+    SpectralGeneratorProvider,
+    SpectralAggregateGeneratorProvider,
     GeneratorMetadataProvider
 ) {
 
@@ -61,6 +65,37 @@ define([
 
         openmct.telemetry.addProvider(new StateGeneratorProvider());
 
+        openmct.types.addType("example.spectral-generator", {
+            name: "Spectral Generator",
+            description: "For development use. Generates example streaming telemetry data using a simple sine wave algorithm.",
+            cssClass: "icon-generator-telemetry",
+            creatable: true,
+            initialize: function (object) {
+                object.telemetry = {
+                    period: 10,
+                    amplitude: 1,
+                    wavelength: 1,
+                    frequency: 1,
+                    offset: 0,
+                    dataRateInHz: 1,
+                    phase: 0,
+                    randomness: 0
+                };
+            }
+        });
+        openmct.telemetry.addProvider(new SpectralGeneratorProvider());
+
+        openmct.types.addType("example.spectral-aggregate-generator", {
+            name: "Spectral Aggregate Generator",
+            description: "For development use. Generates example streaming telemetry data using a simple state algorithm.",
+            cssClass: "icon-generator-telemetry",
+            creatable: true,
+            initialize: function (object) {
+                object.telemetry = {};
+            }
+        });
+        openmct.telemetry.addProvider(new SpectralAggregateGeneratorProvider());
+
         openmct.types.addType("generator", {
             name: "Sine Wave Generator",
             description: "For development use. Generates example streaming telemetry data using a simple sine wave algorithm.",

karma.conf.js

@@ -25,7 +25,7 @@
 const devMode = process.env.NODE_ENV !== 'production';
 const browsers = [process.env.NODE_ENV === 'debug' ? 'ChromeDebugging' : 'ChromeHeadless'];
 const coverageEnabled = process.env.COVERAGE === 'true';
-const reporters = ['spec', 'junit'];
+const reporters = ['spec', 'html', 'junit'];
 
 if (coverageEnabled) {
     reporters.push('coverage-istanbul');
@@ -78,11 +78,11 @@ module.exports = (config) => {
         logLevel: config.LOG_INFO,
         autoWatch: true,
         // HTML test reporting.
-        // htmlReporter: {
-        //    outputDir: "dist/reports/tests",
-        //    preserveDescribeNesting: true,
-        //    foldAll: false
-        // },
+        htmlReporter: {
+            outputDir: "dist/reports/tests",
+            preserveDescribeNesting: true,
+            foldAll: false
+        },
         junitReporter: {
             outputDir: "dist/reports/tests",
             outputFile: "test-results.xml",
@@ -93,7 +93,7 @@ module.exports = (config) => {
             dir: process.env.CIRCLE_ARTIFACTS
                 ? process.env.CIRCLE_ARTIFACTS + '/coverage'
                 : "dist/reports/coverage",
-            reports: ['lcovonly', 'text-summary'],
+            reports: ['html', 'lcovonly', 'text-summary'],
             thresholds: {
                 global: {
                     lines: 66

package.json

@@ -1,9 +1,8 @@
 {
   "name": "openmct",
-  "version": "1.8.1-SNAPSHOT",
+  "version": "1.7.8-SNAPSHOT",
   "description": "The Open MCT core platform",
   "devDependencies": {
-    "@braintree/sanitize-url": "^5.0.2",
     "angular": ">=1.8.0",
     "angular-route": "1.4.14",
     "babel-eslint": "10.0.3",
@@ -38,6 +37,7 @@
     "karma-coverage": "2.0.3",
     "karma-coverage-istanbul-reporter": "3.0.3",
     "karma-firefox-launcher": "2.1.1",
+    "karma-html-reporter": "0.2.7",
     "karma-jasmine": "4.0.1",
     "karma-junit-reporter": "2.0.1",
     "karma-sourcemap-loader": "0.3.8",

platform/commonUI/edit/bundle.js

@@ -34,6 +34,9 @@ define([
     "./src/policies/EditPersistableObjectsPolicy",
     "./src/representers/EditRepresenter",
     "./src/capabilities/EditorCapability",
+    "./src/capabilities/TransactionCapabilityDecorator",
+    "./src/services/TransactionManager",
+    "./src/services/TransactionService",
     "./src/creation/CreateMenuController",
     "./src/creation/LocatorController",
     "./src/creation/CreationPolicy",
@@ -60,6 +63,9 @@ define([
     EditPersistableObjectsPolicy,
     EditRepresenter,
     EditorCapability,
+    TransactionCapabilityDecorator,
+    TransactionManager,
+    TransactionService,
     CreateMenuController,
     LocatorController,
     CreationPolicy,
@@ -257,6 +263,26 @@ define([
                     }
                 ],
                 "components": [
+                    {
+                        "type": "decorator",
+                        "provides": "capabilityService",
+                        "implementation": TransactionCapabilityDecorator,
+                        "depends": [
+                            "$q",
+                            "transactionManager"
+                        ],
+                        "priority": "fallback"
+                    },
+                    {
+                        "type": "provider",
+                        "provides": "transactionService",
+                        "implementation": TransactionService,
+                        "depends": [
+                            "$q",
+                            "$log",
+                            "cacheService"
+                        ]
+                    },
                     {
                         "key": "CreateActionProvider",
                         "provides": "actionService",
@@ -294,6 +320,7 @@ define([
                         "description": "Provides transactional editing capabilities",
                         "implementation": EditorCapability,
                         "depends": [
+                            "transactionService",
                             "openmct"
                         ]
                     }
@@ -304,6 +331,15 @@ define([
                         "template": locatorTemplate
                     }
                 ],
+                "services": [
+                    {
+                        "key": "transactionManager",
+                        "implementation": TransactionManager,
+                        "depends": [
+                            "transactionService"
+                        ]
+                    }
+                ],
                 "runs": [
                     {
                         depends: [

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

@@ -96,7 +96,8 @@ function (
     SaveAsAction.prototype.save = function () {
         var self = this,
             domainObject = this.domainObject,
-            dialog = new SaveInProgressDialog(this.dialogService);
+            dialog = new SaveInProgressDialog(this.dialogService),
+            toUndirty = [];
 
         function doWizardSave(parent) {
             var wizard = self.createWizard(parent);
@@ -131,14 +132,11 @@ function (
             return fetchObject(object.getModel().location);
         }
 
-        function saveObject(object) {
-            //persist the object, which adds it to the transaction and then call editor.save
-            return object.getCapability("persistence").persist()
-                .then(() => {
-                    return self.openmct.editor.save().then(() => {
-                        return object;
-                    });
-                });
+        function saveObject(parent) {
+            return self.openmct.editor.save().then(() => {
+                // Force mutation for search indexing
+                return parent;
+            });
         }
 
         function addSavedObjectToParent(parent) {
@@ -152,6 +150,17 @@ function (
                 });
         }
 
+        function undirty(object) {
+            return object.getCapability('persistence').refresh();
+        }
+
+        function undirtyOriginals(object) {
+            return Promise.all(toUndirty.map(undirty))
+                .then(() => {
+                    return object;
+                });
+        }
+
         function indexForSearch(addedObject) {
             addedObject.useCapability('mutation', (model) => {
                 return model;
@@ -178,9 +187,10 @@ function (
         return getParent(domainObject)
             .then(doWizardSave)
             .then(showBlockingDialog)
-            .then(saveObject)
             .then(getParent)
+            .then(saveObject)
             .then(addSavedObjectToParent)
+            .then(undirtyOriginals)
             .then((addedObject) => {
                 return fetchObject(addedObject.getId());
             })

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

@@ -30,17 +30,32 @@ define(
          * Once initiated, any persist operations will be queued pending a
          * subsequent call to [.save()](@link #save) or [.finish()](@link
          * #finish).
+         * @param transactionService
          * @param domainObject
          * @constructor
          */
         function EditorCapability(
+            transactionService,
             openmct,
             domainObject
         ) {
+            this.transactionService = transactionService;
             this.openmct = openmct;
             this.domainObject = domainObject;
         }
 
+        /**
+         * Initiate an editing session. This will start a transaction during
+         * which any persist operations will be deferred until either save()
+         * or finish() are called.
+         */
+        EditorCapability.prototype.edit = function () {
+            if (!this.openmct.editor.isEditing()) {
+                this.openmct.editor.edit();
+                this.domainObject.getCapability('status').set('editing', true);
+            }
+        };
+
         /**
          * Determines whether this object, or any of its ancestors are
          * currently being edited.
@@ -59,6 +74,34 @@ define(
             return this.openmct.editor.isEditing();
         };
 
+        /**
+         * Save any unsaved changes from this editing session. This will
+         * end the current transaction and continue with a new one.
+         * @returns {*}
+         */
+        EditorCapability.prototype.save = function () {
+            return Promise.resolve();
+        };
+
+        EditorCapability.prototype.invoke = EditorCapability.prototype.edit;
+
+        /**
+         * Finish the current editing session. This will discard any pending
+         * persist operations
+         * @returns {*}
+         */
+        EditorCapability.prototype.finish = function () {
+            return Promise.resolve();
+        };
+
+        /**
+         * @returns {boolean} true if there have been any domain model
+         * modifications since the last persist, false otherwise.
+         */
+        EditorCapability.prototype.dirty = function () {
+            return this.transactionService.size() > 0;
+        };
+
         return EditorCapability;
     }
 );

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

@@ -0,0 +1,75 @@
+/*****************************************************************************
+ * 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(
+    ['./TransactionalPersistenceCapability'],
+    function (TransactionalPersistenceCapability) {
+
+        /**
+         * Wraps the [PersistenceCapability]{@link PersistenceCapability} with
+         * transactional capabilities.
+         * @param $q
+         * @param transactionService
+         * @param capabilityService
+         * @see TransactionalPersistenceCapability
+         * @constructor
+         */
+        function TransactionCapabilityDecorator(
+            $q,
+            transactionService,
+            capabilityService
+        ) {
+            this.capabilityService = capabilityService;
+            this.transactionService = transactionService;
+            this.$q = $q;
+        }
+
+        /**
+         * Decorate PersistenceCapability to queue persistence calls when a
+         * transaction is in progress.
+         */
+        TransactionCapabilityDecorator.prototype.getCapabilities = function () {
+            var self = this,
+                capabilities = this.capabilityService.getCapabilities
+                    .apply(this.capabilityService, arguments),
+                persistenceCapability = capabilities.persistence;
+
+            capabilities.persistence = function (domainObject) {
+                var original =
+                    (typeof persistenceCapability === 'function')
+                        ? persistenceCapability(domainObject)
+                        : persistenceCapability;
+
+                return new TransactionalPersistenceCapability(
+                    self.$q,
+                    self.transactionService,
+                    original,
+                    domainObject
+                );
+            };
+
+            return capabilities;
+        };
+
+        return TransactionCapabilityDecorator;
+    }
+);

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

@@ -0,0 +1,91 @@
+/*****************************************************************************
+ * 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 () {
+
+        /**
+         * Wraps persistence capability to enable transactions. Transactions
+         * will cause persist calls not to be invoked immediately, but
+         * rather queued until [EditorCapability.save()]{@link EditorCapability#save}
+         * or [EditorCapability.cancel()]{@link EditorCapability#cancel} are
+         * called.
+         * @memberof platform/commonUI/edit/capabilities
+         * @param $q
+         * @param transactionManager
+         * @param persistenceCapability
+         * @param domainObject
+         * @constructor
+         */
+        function TransactionalPersistenceCapability(
+            $q,
+            transactionManager,
+            persistenceCapability,
+            domainObject
+        ) {
+            this.transactionManager = transactionManager;
+            this.persistenceCapability = persistenceCapability;
+            this.domainObject = domainObject;
+            this.$q = $q;
+        }
+
+        /**
+         * The wrapped persist function. If a transaction is active, persist
+         * will be queued until the transaction is committed or cancelled.
+         * @returns {*}
+         */
+        TransactionalPersistenceCapability.prototype.persist = function () {
+            var wrappedPersistence = this.persistenceCapability;
+
+            if (this.transactionManager.isActive()) {
+                this.transactionManager.addToTransaction(
+                    this.domainObject.getId(),
+                    wrappedPersistence.persist.bind(wrappedPersistence),
+                    wrappedPersistence.refresh.bind(wrappedPersistence)
+                );
+
+                //Need to return a promise from this function
+                return this.$q.when(true);
+            } else {
+                return this.persistenceCapability.persist();
+            }
+        };
+
+        TransactionalPersistenceCapability.prototype.refresh = function () {
+            this.transactionManager
+                .clearTransactionsFor(this.domainObject.getId());
+
+            return this.persistenceCapability.refresh();
+        };
+
+        TransactionalPersistenceCapability.prototype.getSpace = function () {
+            return this.persistenceCapability.getSpace();
+        };
+
+        TransactionalPersistenceCapability.prototype.persisted = function () {
+            return this.persistenceCapability.persisted();
+        };
+
+        return TransactionalPersistenceCapability;
+    }
+);

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

@@ -19,10 +19,31 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+define(['./Transaction'], function (Transaction) {
+    /**
+     * A nested transaction is a transaction which takes place in the context
+     * of a larger parent transaction. It becomes part of the parent
+     * transaction when (and only when) committed.
+     * @param parent
+     * @constructor
+     * @extends {platform/commonUI/edit/services.Transaction}
+     * @memberof platform/commonUI/edit/services
+     */
+    function NestedTransaction(parent) {
+        this.parent = parent;
+        Transaction.call(this, parent.$log);
+    }
 
-const PRIORITIES = Object.freeze({
-    HIGH: 1000,
-    DEFAULT: 0,
-    LOW: -1000
+    NestedTransaction.prototype = Object.create(Transaction.prototype);
+
+    NestedTransaction.prototype.commit = function () {
+        this.parent.add(
+            Transaction.prototype.commit.bind(this),
+            Transaction.prototype.cancel.bind(this)
+        );
+
+        return Promise.resolve(true);
+    };
+
+    return NestedTransaction;
 });
-export default PRIORITIES;

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

@@ -0,0 +1,99 @@
+/*****************************************************************************
+ * 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 Transaction represents a set of changes that are intended to
+     * be kept or discarded as a unit.
+     * @param $log Angular's `$log` service, for logging messages
+     * @constructor
+     * @memberof platform/commonUI/edit/services
+     */
+    function Transaction($log) {
+        this.$log = $log;
+        this.callbacks = [];
+    }
+
+    /**
+     * Add a change to the current transaction, as expressed by functions
+     * to either keep or discard the change.
+     * @param {Function} commit called when the transaction is committed
+     * @param {Function} cancel called when the transaction is cancelled
+     * @returns {Function) a function which may be called to remove this
+     *          pair of callbacks from the transaction
+     */
+    Transaction.prototype.add = function (commit, cancel) {
+        var callback = {
+            commit: commit,
+            cancel: cancel
+        };
+        this.callbacks.push(callback);
+
+        return function () {
+            this.callbacks = this.callbacks.filter(function (c) {
+                return c !== callback;
+            });
+        }.bind(this);
+    };
+
+    /**
+     * Get the number of changes in the current transaction.
+     * @returns {number} the size of the current transaction
+     */
+    Transaction.prototype.size = function () {
+        return this.callbacks.length;
+    };
+
+    /**
+     * Keep all changes associated with this transaction.
+     * @method {platform/commonUI/edit/services.Transaction#commit}
+     * @returns {Promise} a promise which will resolve when all callbacks
+     *          have been handled.
+     */
+
+    /**
+     * Discard all changes associated with this transaction.
+     * @method {platform/commonUI/edit/services.Transaction#cancel}
+     * @returns {Promise} a promise which will resolve when all callbacks
+     *          have been handled.
+     */
+
+    ['commit', 'cancel'].forEach(function (method) {
+        Transaction.prototype[method] = function () {
+            var promises = [];
+            var callback;
+
+            while (this.callbacks.length > 0) {
+                callback = this.callbacks.shift();
+                try {
+                    promises.push(callback[method]());
+                } catch (e) {
+                    this.$log
+                        .error("Error trying to " + method + " transaction.");
+                }
+            }
+
+            return Promise.all(promises);
+        };
+    });
+
+    return Transaction;
+});

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

@@ -0,0 +1,119 @@
+/*****************************************************************************
+ * 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 () {
+    /**
+     * Manages transactions to support the TransactionalPersistenceCapability.
+     * This assumes that all commit/cancel callbacks for a given domain
+     * object are equivalent, and only need to be added once to any active
+     * transaction. Violating this assumption may cause unexpected behavior.
+     * @constructor
+     * @memberof platform/commonUI/edit
+     */
+    function TransactionManager(transactionService) {
+        this.transactionService = transactionService;
+        this.clearTransactionFns = {};
+    }
+
+    /**
+     * Check if a transaction is currently active.
+     * @returns {boolean} true if there is a transaction active
+     */
+    TransactionManager.prototype.isActive = function () {
+        return this.transactionService.isActive();
+    };
+
+    /**
+     * Check if callbacks associated with this domain object have already
+     * been added to the active transaction.
+     * @private
+     * @param {string} id the identifier of the domain object to check
+     * @returns {boolean} true if callbacks have been added
+     */
+    TransactionManager.prototype.isScheduled = function (id) {
+        return Boolean(this.clearTransactionFns[id]);
+    };
+
+    /**
+     * Add callbacks associated with this domain object to the active
+     * transaction. Both callbacks are expected to return promises that
+     * resolve when their associated behavior is complete.
+     *
+     * If callbacks associated with this domain object have already been
+     * added to the active transaction, this call will be ignored.
+     *
+     * @param {string} id the identifier of the associated domain object
+     * @param {Function} onCommit behavior to invoke when committing transaction
+     * @param {Function} onCancel behavior to invoke when cancelling transaction
+     */
+    TransactionManager.prototype.addToTransaction = function (
+        id,
+        onCommit,
+        onCancel
+    ) {
+        var release = this.releaseClearFn.bind(this, id);
+
+        function chain(promiseFn, nextFn) {
+            return function () {
+                return promiseFn().then(nextFn);
+            };
+        }
+
+        /**
+         * Clear any existing persistence calls for object with given ID. This ensures only the most recent persistence
+         * call is executed. This should prevent stale objects being persisted and overwriting fresh ones.
+         */
+        if (this.isScheduled(id)) {
+            this.clearTransactionsFor(id);
+        }
+
+        this.clearTransactionFns[id] =
+            this.transactionService.addToTransaction(
+                chain(onCommit, release),
+                chain(onCancel, release)
+            );
+    };
+
+    /**
+     * Remove any callbacks associated with this domain object from the
+     * active transaction.
+     * @param {string} id the identifier for the domain object
+     */
+    TransactionManager.prototype.clearTransactionsFor = function (id) {
+        if (this.isScheduled(id)) {
+            this.clearTransactionFns[id]();
+            this.releaseClearFn(id);
+        }
+    };
+
+    /**
+     * Release the cached "remove from transaction" function that has been
+     * stored in association with this domain object.
+     * @param {string} id the identifier for the domain object
+     * @private
+     */
+    TransactionManager.prototype.releaseClearFn = function (id) {
+        delete this.clearTransactionFns[id];
+    };
+
+    return TransactionManager;
+});

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

@@ -0,0 +1,138 @@
+/*****************************************************************************
+ * 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(
+    ['./Transaction', './NestedTransaction'],
+    function (Transaction, NestedTransaction) {
+        /**
+         * Implements an application-wide transaction state. Once a
+         * transaction is started, calls to
+         * [PersistenceCapability.persist()]{@link PersistenceCapability#persist}
+         * will be deferred until a subsequent call to
+         * [TransactionService.commit]{@link TransactionService#commit} is made.
+         *
+         * @memberof platform/commonUI/edit/services
+         * @param $q
+         * @constructor
+         */
+        function TransactionService($q, $log, cacheService) {
+            this.$q = $q;
+            this.$log = $log;
+            this.cacheService = cacheService;
+            this.transactions = [];
+        }
+
+        /**
+         * Starts a transaction. While a transaction is active all calls to
+         * [PersistenceCapability.persist](@link PersistenceCapability#persist)
+         * will be queued until [commit]{@link #commit} or [cancel]{@link
+         * #cancel} are called
+         */
+        TransactionService.prototype.startTransaction = function () {
+            var transaction = this.isActive()
+                ? new NestedTransaction(this.transactions[0])
+                : new Transaction(this.$log);
+
+            this.transactions.push(transaction);
+        };
+
+        /**
+         * @returns {boolean} If true, indicates that a transaction is in progress
+         */
+        TransactionService.prototype.isActive = function () {
+            return this.transactions.length > 0;
+        };
+
+        /**
+         * Adds provided functions to a queue to be called on
+         * [.commit()]{@link #commit} or
+         * [.cancel()]{@link #commit}
+         * @param onCommit A function to call on commit
+         * @param onCancel A function to call on cancel
+         */
+        TransactionService.prototype.addToTransaction = function (onCommit, onCancel) {
+            if (this.isActive()) {
+                return this.activeTransaction().add(onCommit, onCancel);
+            } else {
+                //Log error because this is a programming error if it occurs.
+                this.$log.error("No transaction in progress");
+            }
+        };
+
+        /**
+         * Get the transaction at the top of the stack.
+         * @private
+         */
+        TransactionService.prototype.activeTransaction = function () {
+            return this.transactions[this.transactions.length - 1];
+        };
+
+        /**
+         * All persist calls deferred since the beginning of the transaction
+         * will be committed.  If this is the last transaction, clears the
+         * cache.
+         *
+         * @returns {Promise} resolved when all persist operations have
+         * completed. Will reject if any commit operations fail
+         */
+        TransactionService.prototype.commit = function () {
+            var transaction = this.transactions.pop();
+            if (!transaction) {
+                return Promise.reject();
+            }
+
+            if (!this.isActive()) {
+                return transaction.commit()
+                    .then(function (r) {
+                        this.cacheService.flush();
+
+                        return r;
+                    }.bind(this));
+            }
+
+            return transaction.commit();
+        };
+
+        /**
+         * Cancel the current transaction, replacing any dirty objects from
+         * persistence. Not a true rollback, as it cannot be used to undo any
+         * persist calls that were successful in the event one of a batch of
+         * persists failing.
+         *
+         * @returns {*}
+         */
+        TransactionService.prototype.cancel = function () {
+            var transaction = this.transactions.pop();
+
+            return transaction ? transaction.cancel() : Promise.reject();
+        };
+
+        /**
+         * Get the size (the number of commit/cancel callbacks) of
+         * the active transaction.
+         * @returns {number} size of the active transaction
+         */
+        TransactionService.prototype.size = function () {
+            return this.isActive() ? this.activeTransaction().size() : 0;
+        };
+
+        return TransactionService;
+    });

platform/commonUI/edit/test/capabilities/EditorCapabilitySpec.js

@@ -0,0 +1,192 @@
+/*****************************************************************************
+ * 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/capabilities/EditorCapability"],
+    function (EditorCapability) {
+
+        xdescribe("The editor capability", function () {
+            var mockDomainObject,
+                capabilities,
+                mockParentObject,
+                mockTransactionService,
+                mockStatusCapability,
+                mockParentStatus,
+                mockContextCapability,
+                capability;
+
+            function fastPromise(val) {
+                return {
+                    then: function (callback) {
+                        return callback(val);
+                    }
+                };
+            }
+
+            beforeEach(function () {
+                mockDomainObject = jasmine.createSpyObj(
+                    "domainObject",
+                    ["getId", "getModel", "hasCapability", "getCapability", "useCapability"]
+                );
+                mockParentObject = jasmine.createSpyObj(
+                    "domainObject",
+                    ["getId", "getModel", "hasCapability", "getCapability", "useCapability"]
+                );
+                mockTransactionService = jasmine.createSpyObj(
+                    "transactionService",
+                    [
+                        "startTransaction",
+                        "size",
+                        "commit",
+                        "cancel"
+                    ]
+                );
+                mockTransactionService.commit.and.returnValue(fastPromise());
+                mockTransactionService.cancel.and.returnValue(fastPromise());
+                mockTransactionService.isActive = jasmine.createSpy('isActive');
+
+                mockStatusCapability = jasmine.createSpyObj(
+                    "statusCapability",
+                    ["get", "set"]
+                );
+                mockParentStatus = jasmine.createSpyObj(
+                    "statusCapability",
+                    ["get", "set"]
+                );
+                mockContextCapability = jasmine.createSpyObj(
+                    "contextCapability",
+                    ["getParent"]
+                );
+                mockContextCapability.getParent.and.returnValue(mockParentObject);
+
+                capabilities = {
+                    context: mockContextCapability,
+                    status: mockStatusCapability
+                };
+
+                mockDomainObject.hasCapability.and.callFake(function (name) {
+                    return capabilities[name] !== undefined;
+                });
+
+                mockDomainObject.getCapability.and.callFake(function (name) {
+                    return capabilities[name];
+                });
+
+                mockParentObject.getCapability.and.returnValue(mockParentStatus);
+                mockParentObject.hasCapability.and.returnValue(false);
+
+                capability = new EditorCapability(
+                    mockTransactionService,
+                    mockDomainObject
+                );
+            });
+
+            it("starts a transaction when edit is invoked", function () {
+                capability.edit();
+                expect(mockTransactionService.startTransaction).toHaveBeenCalled();
+            });
+
+            it("sets editing status on object", function () {
+                capability.edit();
+                expect(mockStatusCapability.set).toHaveBeenCalledWith("editing", true);
+            });
+
+            it("uses editing status to determine editing context root", function () {
+                capability.edit();
+                mockStatusCapability.get.and.returnValue(false);
+                expect(capability.isEditContextRoot()).toBe(false);
+                mockStatusCapability.get.and.returnValue(true);
+                expect(capability.isEditContextRoot()).toBe(true);
+            });
+
+            it("inEditingContext returns true if parent object is being"
+                + " edited", function () {
+                mockStatusCapability.get.and.returnValue(false);
+                mockParentStatus.get.and.returnValue(false);
+                expect(capability.inEditContext()).toBe(false);
+                mockParentStatus.get.and.returnValue(true);
+                expect(capability.inEditContext()).toBe(true);
+            });
+
+            describe("save", function () {
+                beforeEach(function () {
+                    capability.edit();
+                    capability.save();
+                });
+                it("commits the transaction", function () {
+                    expect(mockTransactionService.commit).toHaveBeenCalled();
+                });
+                it("begins a new transaction", function () {
+                    expect(mockTransactionService.startTransaction).toHaveBeenCalled();
+                });
+            });
+
+            describe("finish", function () {
+                beforeEach(function () {
+                    mockTransactionService.isActive.and.returnValue(true);
+                    capability.edit();
+                    capability.finish();
+                });
+                it("cancels the transaction", function () {
+                    expect(mockTransactionService.cancel).toHaveBeenCalled();
+                });
+                it("resets the edit state", function () {
+                    expect(mockStatusCapability.set).toHaveBeenCalledWith('editing', false);
+                });
+            });
+
+            describe("finish", function () {
+                beforeEach(function () {
+                    mockTransactionService.isActive.and.returnValue(false);
+                    capability.edit();
+                });
+
+                it("does not cancel transaction when transaction is not active", function () {
+                    capability.finish();
+                    expect(mockTransactionService.cancel).not.toHaveBeenCalled();
+                });
+
+                it("returns a promise", function () {
+                    expect(capability.finish() instanceof Promise).toBe(true);
+                });
+
+            });
+
+            describe("dirty", function () {
+                var model = {};
+
+                beforeEach(function () {
+                    mockDomainObject.getModel.and.returnValue(model);
+                    capability.edit();
+                    capability.finish();
+                });
+                it("returns true if the object has been modified since it"
+                    + " was last persisted", function () {
+                    mockTransactionService.size.and.returnValue(0);
+                    expect(capability.dirty()).toBe(false);
+                    mockTransactionService.size.and.returnValue(1);
+                    expect(capability.dirty()).toBe(true);
+                });
+            });
+        });
+    }
+);

platform/commonUI/edit/test/capabilities/TransactionCapabilityDecoratorSpec.js

@@ -20,52 +20,35 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-export default class Transaction {
-    constructor(objectAPI) {
-        this.dirtyObjects = new Set();
-        this.objectAPI = objectAPI;
-    }
+define(
+    [
+        "../../src/capabilities/TransactionalPersistenceCapability",
+        "../../src/capabilities/TransactionCapabilityDecorator"
+    ],
+    function (TransactionalPersistenceCapability, TransactionCapabilityDecorator) {
 
-    add(object) {
-        this.dirtyObjects.add(object);
-    }
+        describe("The transaction capability decorator", function () {
+            var mockQ,
+                mockTransactionService,
+                mockCapabilityService,
+                provider;
 
-    cancel() {
-        return this._clear();
-    }
-
-    commit() {
-        const promiseArray = [];
-        const save = this.objectAPI.save.bind(this.objectAPI);
-        this.dirtyObjects.forEach(object => {
-            promiseArray.push(this.createDirtyObjectPromise(object, save));
-        });
-
-        return Promise.all(promiseArray);
-    }
-
-    createDirtyObjectPromise(object, action) {
-        return new Promise((resolve, reject) => {
-            action(object)
-                .then(resolve)
-                .catch(reject)
-                .finally(() => {
-                    this.dirtyObjects.delete(object);
+            beforeEach(function () {
+                mockQ = {};
+                mockTransactionService = {};
+                mockCapabilityService = jasmine.createSpyObj("capabilityService", ["getCapabilities"]);
+                mockCapabilityService.getCapabilities.and.returnValue({
+                    persistence: function () {}
                 });
+
+                provider = new TransactionCapabilityDecorator(mockQ, mockTransactionService, mockCapabilityService);
+
+            });
+            it("decorates the persistence capability", function () {
+                var capabilities = provider.getCapabilities();
+                expect(capabilities.persistence({}) instanceof TransactionalPersistenceCapability).toBe(true);
+            });
+
         });
     }
-
-    start() {
-        this.dirtyObjects = new Set();
-    }
-
-    _clear() {
-        const promiseArray = [];
-        const refresh = this.objectAPI.refresh.bind(this.objectAPI);
-        this.dirtyObjects.forEach(object => {
-            promiseArray.push(this.createDirtyObjectPromise(object, refresh));
-        });
-
-        return Promise.all(promiseArray);
-    }
-}
+);

platform/commonUI/edit/test/capabilities/TransactionalPersistenceCapabilitySpec.js

@@ -0,0 +1,111 @@
+/*****************************************************************************
+ * 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/capabilities/TransactionalPersistenceCapability"
+    ],
+    function (TransactionalPersistenceCapability) {
+
+        function fastPromise(val) {
+            return {
+                then: function (callback) {
+                    return callback(val);
+                }
+            };
+        }
+
+        describe("The transactional persistence decorator", function () {
+            var mockQ,
+                mockTransactionManager,
+                mockPersistence,
+                mockDomainObject,
+                testId,
+                capability;
+
+            beforeEach(function () {
+                testId = "test-id";
+
+                mockQ = jasmine.createSpyObj("$q", ["when"]);
+                mockQ.when.and.callFake(function (val) {
+                    return fastPromise(val);
+                });
+                mockTransactionManager = jasmine.createSpyObj(
+                    "transactionService",
+                    ["isActive", "addToTransaction", "clearTransactionsFor"]
+                );
+                mockPersistence = jasmine.createSpyObj(
+                    "persistenceCapability",
+                    ["persist", "refresh", "getSpace"]
+                );
+                mockPersistence.persist.and.returnValue(fastPromise());
+                mockPersistence.refresh.and.returnValue(fastPromise());
+
+                mockDomainObject = jasmine.createSpyObj(
+                    "domainObject",
+                    ["getModel", "getId"]
+                );
+                mockDomainObject.getModel.and.returnValue({persisted: 1});
+                mockDomainObject.getId.and.returnValue(testId);
+
+                capability = new TransactionalPersistenceCapability(
+                    mockQ,
+                    mockTransactionManager,
+                    mockPersistence,
+                    mockDomainObject
+                );
+            });
+
+            it("if no transaction is active, passes through to persistence"
+                + " provider", function () {
+                mockTransactionManager.isActive.and.returnValue(false);
+                capability.persist();
+                expect(mockPersistence.persist).toHaveBeenCalled();
+            });
+
+            it("if transaction is active, persist and cancel calls are"
+                + " queued", function () {
+                mockTransactionManager.isActive.and.returnValue(true);
+                capability.persist();
+                expect(mockTransactionManager.addToTransaction).toHaveBeenCalled();
+                mockTransactionManager.addToTransaction.calls.mostRecent().args[1]();
+                expect(mockPersistence.persist).toHaveBeenCalled();
+                mockTransactionManager.addToTransaction.calls.mostRecent().args[2]();
+                expect(mockPersistence.refresh).toHaveBeenCalled();
+            });
+
+            it("wraps getSpace", function () {
+                mockPersistence.getSpace.and.returnValue('foo');
+                expect(capability.getSpace()).toEqual('foo');
+            });
+
+            it("clears transactions and delegates refresh calls", function () {
+                capability.refresh();
+                expect(mockTransactionManager.clearTransactionsFor)
+                    .toHaveBeenCalledWith(testId);
+                expect(mockPersistence.refresh)
+                    .toHaveBeenCalled();
+            });
+
+        });
+    }
+);

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

@@ -0,0 +1,75 @@
+/*****************************************************************************
+ * 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/services/NestedTransaction"], function (NestedTransaction) {
+    var TRANSACTION_METHODS = ['add', 'commit', 'cancel', 'size'];
+
+    describe("A NestedTransaction", function () {
+        var mockTransaction,
+            nestedTransaction;
+
+        beforeEach(function () {
+            mockTransaction =
+                jasmine.createSpyObj('transaction', TRANSACTION_METHODS);
+            nestedTransaction = new NestedTransaction(mockTransaction);
+        });
+
+        it("exposes a Transaction's interface", function () {
+            TRANSACTION_METHODS.forEach(function (method) {
+                expect(nestedTransaction[method])
+                    .toEqual(jasmine.any(Function));
+            });
+        });
+
+        describe("when callbacks are added", function () {
+            var mockCommit,
+                mockCancel;
+
+            beforeEach(function () {
+                mockCommit = jasmine.createSpy('commit');
+                mockCancel = jasmine.createSpy('cancel');
+                nestedTransaction.add(mockCommit, mockCancel);
+            });
+
+            it("does not interact with its parent transaction", function () {
+                TRANSACTION_METHODS.forEach(function (method) {
+                    expect(mockTransaction[method])
+                        .not.toHaveBeenCalled();
+                });
+            });
+
+            describe("and the transaction is committed", function () {
+                beforeEach(function () {
+                    nestedTransaction.commit();
+                });
+
+                it("adds to its parent transaction", function () {
+                    expect(mockTransaction.add).toHaveBeenCalledWith(
+                        jasmine.any(Function),
+                        jasmine.any(Function)
+                    );
+                });
+            });
+        });
+    });
+});
+

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

@@ -0,0 +1,141 @@
+/*****************************************************************************
+ * 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/services/TransactionManager"],
+    function (TransactionManager) {
+        describe("TransactionManager", function () {
+            var mockTransactionService,
+                testId,
+                mockOnCommit,
+                mockOnCancel,
+                mockRemoves,
+                mockPromise,
+                manager;
+
+            beforeEach(function () {
+                mockRemoves = [];
+                mockTransactionService = jasmine.createSpyObj(
+                    "transactionService",
+                    ["addToTransaction", "isActive"]
+                );
+                mockOnCommit = jasmine.createSpy('commit');
+                mockOnCancel = jasmine.createSpy('cancel');
+                testId = 'test-id';
+                mockPromise = jasmine.createSpyObj('promise', ['then']);
+
+                mockOnCommit.and.returnValue(mockPromise);
+                mockOnCancel.and.returnValue(mockPromise);
+
+                mockTransactionService.addToTransaction.and.callFake(function () {
+                    var mockRemove =
+                        jasmine.createSpy('remove-' + mockRemoves.length);
+                    mockRemoves.push(mockRemove);
+
+                    return mockRemove;
+                });
+
+                manager = new TransactionManager(mockTransactionService);
+            });
+
+            it("delegates isActive calls", function () {
+                [false, true].forEach(function (state) {
+                    mockTransactionService.isActive.and.returnValue(state);
+                    expect(manager.isActive()).toBe(state);
+                });
+            });
+
+            describe("when addToTransaction is called", function () {
+                beforeEach(function () {
+                    manager.addToTransaction(
+                        testId,
+                        mockOnCommit,
+                        mockOnCancel
+                    );
+                });
+
+                it("adds callbacks to the active transaction", function () {
+                    expect(mockTransactionService.addToTransaction)
+                        .toHaveBeenCalledWith(
+                            jasmine.any(Function),
+                            jasmine.any(Function)
+                        );
+                });
+
+                it("invokes passed-in callbacks from its own callbacks", function () {
+                    expect(mockOnCommit).not.toHaveBeenCalled();
+                    mockTransactionService.addToTransaction
+                        .calls.mostRecent().args[0]();
+                    expect(mockOnCommit).toHaveBeenCalled();
+
+                    expect(mockOnCancel).not.toHaveBeenCalled();
+                    mockTransactionService.addToTransaction
+                        .calls.mostRecent().args[1]();
+                    expect(mockOnCancel).toHaveBeenCalled();
+                });
+
+                describe("Adds callbacks to transaction", function () {
+                    beforeEach(function () {
+                        spyOn(manager, 'clearTransactionsFor');
+                        manager.clearTransactionsFor.and.callThrough();
+                    });
+
+                    it("and clears pending calls if same object", function () {
+                        manager.addToTransaction(
+                            testId,
+                            jasmine.createSpy(),
+                            jasmine.createSpy()
+                        );
+                        expect(manager.clearTransactionsFor).toHaveBeenCalledWith(testId);
+                    });
+
+                    it("and does not clear pending calls if different object", function () {
+                        manager.addToTransaction(
+                            'other-id',
+                            jasmine.createSpy(),
+                            jasmine.createSpy()
+                        );
+                        expect(manager.clearTransactionsFor).not.toHaveBeenCalled();
+                    });
+
+                    afterEach(function () {
+                        expect(mockTransactionService.addToTransaction.calls.count()).toEqual(2);
+                    });
+                });
+
+                it("does not remove callbacks from the transaction", function () {
+                    expect(mockRemoves[0]).not.toHaveBeenCalled();
+                });
+
+                describe("and clearTransactionsFor is subsequently called", function () {
+                    beforeEach(function () {
+                        manager.clearTransactionsFor(testId);
+                    });
+
+                    it("removes callbacks from the transaction", function () {
+                        expect(mockRemoves[0]).toHaveBeenCalled();
+                    });
+                });
+            });
+        });
+    }
+);

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

@@ -0,0 +1,139 @@
+/*****************************************************************************
+ * 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/services/TransactionService"],
+    function (TransactionService) {
+
+        describe("The Transaction Service", function () {
+            var mockQ,
+                mockLog,
+                mockCacheService,
+                transactionService;
+
+            function fastPromise(val) {
+                return {
+                    then: function (callback) {
+                        return fastPromise(callback(val));
+                    }
+                };
+            }
+
+            beforeEach(function () {
+                mockQ = jasmine.createSpyObj("$q", ["all"]);
+                mockCacheService = jasmine.createSpyObj("cacheService", ["flush"]);
+                mockQ.all.and.returnValue(fastPromise());
+                mockLog = jasmine.createSpyObj("$log", ["error"]);
+                transactionService = new TransactionService(mockQ, mockLog, mockCacheService);
+            });
+
+            it("isActive returns true if a transaction is in progress", function () {
+                expect(transactionService.isActive()).toBe(false);
+                transactionService.startTransaction();
+                expect(transactionService.isActive()).toBe(true);
+            });
+
+            it("addToTransaction queues onCommit and onCancel functions", function () {
+                var onCommit = jasmine.createSpy('onCommit'),
+                    onCancel = jasmine.createSpy('onCancel');
+
+                transactionService.startTransaction();
+                transactionService.addToTransaction(onCommit, onCancel);
+                expect(transactionService.size()).toBe(1);
+            });
+
+            it("size function returns size of commit and cancel queues", function () {
+                var onCommit = jasmine.createSpy('onCommit'),
+                    onCancel = jasmine.createSpy('onCancel');
+
+                transactionService.startTransaction();
+                transactionService.addToTransaction(onCommit, onCancel);
+                transactionService.addToTransaction(onCommit, onCancel);
+                transactionService.addToTransaction(onCommit, onCancel);
+                expect(transactionService.size()).toBe(3);
+            });
+
+            describe("commit", function () {
+                var onCommits;
+
+                beforeEach(function () {
+                    onCommits = [0, 1, 2].map(function (val) {
+                        return jasmine.createSpy("onCommit" + val);
+                    });
+
+                    transactionService.startTransaction();
+                    onCommits.forEach(transactionService.addToTransaction.bind(transactionService));
+                });
+
+                it("commit calls all queued commit functions", function () {
+                    expect(transactionService.size()).toBe(3);
+
+                    return transactionService.commit().then(() => {
+                        onCommits.forEach(function (spy) {
+                            expect(spy).toHaveBeenCalled();
+                        });
+                    });
+                });
+
+                it("commit resets active state and clears queues", function () {
+                    return transactionService.commit().then(() => {
+                        expect(transactionService.isActive()).toBe(false);
+                        expect(transactionService.size()).toBe(0);
+                        expect(transactionService.size()).toBe(0);
+                    });
+                });
+
+            });
+
+            describe("cancel", function () {
+                var onCancels;
+
+                beforeEach(function () {
+                    onCancels = [0, 1, 2].map(function (val) {
+                        return jasmine.createSpy("onCancel" + val);
+                    });
+
+                    transactionService.startTransaction();
+                    onCancels.forEach(function (onCancel) {
+                        transactionService.addToTransaction(undefined, onCancel);
+                    });
+                });
+
+                it("cancel calls all queued cancel functions", function () {
+                    expect(transactionService.size()).toBe(3);
+                    transactionService.cancel();
+                    onCancels.forEach(function (spy) {
+                        expect(spy).toHaveBeenCalled();
+                    });
+                });
+
+                it("cancel resets active state and clears queues", function () {
+                    transactionService.cancel();
+                    expect(transactionService.isActive()).toBe(false);
+                    expect(transactionService.size()).toBe(0);
+                });
+
+            });
+
+        });
+    }
+);

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

@@ -0,0 +1,109 @@
+/*****************************************************************************
+ * 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/services/Transaction"],
+    function (Transaction) {
+
+        describe("A Transaction", function () {
+            var mockLog,
+                transaction;
+
+            beforeEach(function () {
+                mockLog = jasmine.createSpyObj(
+                    '$log',
+                    ['warn', 'info', 'error', 'debug']
+                );
+                transaction = new Transaction(mockLog);
+            });
+
+            it("initially has a size of zero", function () {
+                expect(transaction.size()).toEqual(0);
+            });
+
+            describe("when callbacks are added", function () {
+                var mockCommit,
+                    mockCancel,
+                    remove;
+
+                beforeEach(function () {
+                    mockCommit = jasmine.createSpy('commit');
+                    mockCancel = jasmine.createSpy('cancel');
+                    remove = transaction.add(mockCommit, mockCancel);
+                });
+
+                it("reports a new size", function () {
+                    expect(transaction.size()).toEqual(1);
+                });
+
+                it("returns a function to remove those callbacks", function () {
+                    expect(remove).toEqual(jasmine.any(Function));
+                    remove();
+                    expect(transaction.size()).toEqual(0);
+                });
+
+                describe("and the transaction is committed", function () {
+                    beforeEach(function () {
+                        transaction.commit();
+                    });
+
+                    it("triggers the commit callback", function () {
+                        expect(mockCommit).toHaveBeenCalled();
+                    });
+
+                    it("does not trigger the cancel callback", function () {
+                        expect(mockCancel).not.toHaveBeenCalled();
+                    });
+                });
+
+                describe("and the transaction is cancelled", function () {
+                    beforeEach(function () {
+                        transaction.cancel();
+                    });
+
+                    it("triggers the cancel callback", function () {
+                        expect(mockCancel).toHaveBeenCalled();
+                    });
+
+                    it("does not trigger the commit callback", function () {
+                        expect(mockCommit).not.toHaveBeenCalled();
+                    });
+                });
+
+                describe("and an exception is encountered during commit", function () {
+                    beforeEach(function () {
+                        mockCommit.and.callFake(function () {
+                            throw new Error("test error");
+                        });
+                        transaction.commit();
+                    });
+
+                    it("logs an error", function () {
+                        expect(mockLog.error).toHaveBeenCalled();
+                    });
+                });
+            });
+
+        });
+    }
+);
+

platform/core/bundle.js

@@ -45,6 +45,7 @@ define([
     "./src/capabilities/MutationCapability",
     "./src/capabilities/DelegationCapability",
     "./src/capabilities/InstantiationCapability",
+    "./src/runs/TransactingMutationListener",
     "./src/services/Now",
     "./src/services/Throttle",
     "./src/services/Topic",
@@ -74,6 +75,7 @@ define([
     MutationCapability,
     DelegationCapability,
     InstantiationCapability,
+    TransactingMutationListener,
     Now,
     Throttle,
     Topic,
@@ -361,6 +363,12 @@ define([
                         ]
                     }
                 ],
+                "runs": [
+                    {
+                        "implementation": TransactingMutationListener,
+                        "depends": ["topic", "transactionService", "cacheService"]
+                    }
+                ],
                 "constants": [
                     {
                         "key": "PERSISTENCE_SPACE",

platform/core/src/runs/TransactingMutationListener.js

@@ -0,0 +1,55 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+
+define([], function () {
+
+    /**
+     * Listens for mutation on domain objects and triggers persistence when
+     * it occurs.
+     * @param {Topic} topic the `topic` service; used to listen for mutation
+     * @memberof platform/core
+     */
+    function TransactingMutationListener(
+        topic,
+        transactionService,
+        cacheService
+    ) {
+
+        function hasChanged(domainObject) {
+            var model = domainObject.getModel();
+
+            return model.persisted === undefined || model.modified > model.persisted;
+        }
+
+        var mutationTopic = topic('mutation');
+        mutationTopic.listen(function (domainObject) {
+            var persistence = domainObject.getCapability('persistence');
+            cacheService.put(domainObject.getId(), domainObject.getModel());
+
+            if (hasChanged(domainObject)) {
+                persistence.persist();
+            }
+        });
+    }
+
+    return TransactingMutationListener;
+});

platform/core/test/runs/TransactingMutationListenerSpec.js

@@ -0,0 +1,112 @@
+/*****************************************************************************
+ * 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/runs/TransactingMutationListener"],
+    function (TransactingMutationListener) {
+
+        describe("TransactingMutationListener", function () {
+            var mockTopic,
+                mockMutationTopic,
+                mockCacheService,
+                mockTransactionService,
+                mockDomainObject,
+                mockModel,
+                mockPersistence;
+
+            beforeEach(function () {
+                mockTopic = jasmine.createSpy('topic');
+                mockMutationTopic =
+                    jasmine.createSpyObj('mutation', ['listen']);
+                mockCacheService =
+                    jasmine.createSpyObj('cacheService', [
+                        'put'
+                    ]);
+                mockTransactionService =
+                    jasmine.createSpyObj('transactionService', [
+                        'isActive',
+                        'startTransaction',
+                        'commit'
+                    ]);
+                mockDomainObject = jasmine.createSpyObj(
+                    'domainObject',
+                    ['getId', 'getCapability', 'getModel']
+                );
+                mockPersistence = jasmine.createSpyObj(
+                    'persistence',
+                    ['persist', 'refresh', 'persisted']
+                );
+
+                mockTopic.and.callFake(function (t) {
+                    expect(t).toBe('mutation');
+
+                    return mockMutationTopic;
+                });
+
+                mockDomainObject.getId.and.returnValue('mockId');
+                mockDomainObject.getCapability.and.callFake(function (c) {
+                    expect(c).toBe('persistence');
+
+                    return mockPersistence;
+                });
+                mockModel = {};
+                mockDomainObject.getModel.and.returnValue(mockModel);
+
+                mockPersistence.persisted.and.returnValue(true);
+
+                return new TransactingMutationListener(
+                    mockTopic,
+                    mockTransactionService,
+                    mockCacheService
+                );
+            });
+
+            it("listens for mutation", function () {
+                expect(mockMutationTopic.listen)
+                    .toHaveBeenCalledWith(jasmine.any(Function));
+            });
+
+            it("calls persist if the model has changed", function () {
+                mockModel.persisted = Date.now();
+
+                //Mark the model dirty by setting the mutated date later than the last persisted date.
+                mockModel.modified = mockModel.persisted + 1;
+
+                mockMutationTopic.listen.calls.mostRecent()
+                    .args[0](mockDomainObject);
+
+                expect(mockPersistence.persist).toHaveBeenCalled();
+            });
+
+            it("does not call persist if the model has not changed", function () {
+                mockModel.persisted = Date.now();
+
+                mockModel.modified = mockModel.persisted;
+
+                mockMutationTopic.listen.calls.mostRecent()
+                    .args[0](mockDomainObject);
+
+                expect(mockPersistence.persist).not.toHaveBeenCalled();
+            });
+        });
+    }
+);

platform/forms/src/MCTFileInput.js

@@ -44,11 +44,9 @@ define(
                         setText(result.name);
                         scope.ngModel[scope.field] = result;
                         control.$setValidity("file-input", true);
-                        scope.$digest();
                     }, function () {
                         setText('Select File');
                         control.$setValidity("file-input", false);
-                        scope.$digest();
                     });
                 }
 

src/MCT.js

@@ -253,8 +253,6 @@ define([
 
         this.status = new api.StatusAPI(this);
 
-        this.priority = api.PriorityAPI;
-
         this.router = new ApplicationRouter(this);
 
         this.branding = BrandingAPI.default;
@@ -265,7 +263,6 @@ define([
         // Plugins that are installed by default
 
         this.install(this.plugins.Plot());
-        this.install(this.plugins.Chart());
         this.install(this.plugins.TelemetryTable.default());
         this.install(PreviewPlugin.default());
         this.install(LegacyIndicatorsPlugin());

src/adapter/services/MissingModelCompatibilityDecorator.js

@@ -81,8 +81,14 @@ define([
                     return models;
                 }
 
-                //Temporary fix for missing models - don't retry using this.apiFetch
-                return models;
+                return this.apiFetch(missingIds)
+                    .then(function (apiResults) {
+                        Object.keys(apiResults).forEach(function (k) {
+                            models[k] = apiResults[k];
+                        });
+
+                        return models;
+                    });
             }.bind(this));
     };
 

src/api/Editor.js

@@ -34,6 +34,7 @@ export default class Editor extends EventEmitter {
      * Initiate an editing session. This will start a transaction during
      * which any persist operations will be deferred until either save()
      * or finish() are called.
+     * @private
      */
     edit() {
         if (this.editing === true) {
@@ -41,8 +42,8 @@ export default class Editor extends EventEmitter {
         }
 
         this.editing = true;
+        this.getTransactionService().startTransaction();
         this.emit('isEditing', true);
-        this.openmct.objects.startTransaction();
     }
 
     /**
@@ -55,36 +56,41 @@ export default class Editor extends EventEmitter {
     /**
      * Save any unsaved changes from this editing session. This will
      * end the current transaction.
+     *
+     * @private
      */
     save() {
-        const transaction = this.openmct.objects.getActiveTransaction();
+        return this.getTransactionService().commit().then((result) => {
+            this.editing = false;
+            this.emit('isEditing', false);
 
-        return transaction.commit()
-            .then(() => {
-                this.editing = false;
-                this.emit('isEditing', false);
-            }).catch(error => {
-                throw error;
-            }).finally(() => {
-                this.openmct.objects.endTransaction();
-            });
+            return result;
+        }).catch((error) => {
+            throw error;
+        });
     }
 
     /**
      * End the currently active transaction and discard unsaved changes.
+     *
+     * @private
      */
     cancel() {
+        let cancelPromise = this.getTransactionService().cancel();
         this.editing = false;
         this.emit('isEditing', false);
 
-        return new Promise((resolve, reject) => {
-            const transaction = this.openmct.objects.getActiveTransaction();
-            transaction.cancel()
-                .then(resolve)
-                .catch(reject)
-                .finally(() => {
-                    this.openmct.objects.endTransaction();
-                });
-        });
+        return cancelPromise;
+    }
+
+    /**
+     * @private
+     */
+    getTransactionService() {
+        if (!this.transactionService) {
+            this.transactionService = this.openmct.$injector.get('transactionService');
+        }
+
+        return this.transactionService;
     }
 }

src/api/actions/ActionsAPI.js

@@ -110,7 +110,7 @@ class ActionsAPI extends EventEmitter {
         return actionsObject;
     }
 
-    _groupAndSortActions(actionsArray = []) {
+    _groupAndSortActions(actionsArray) {
         if (!Array.isArray(actionsArray) && typeof actionsArray === 'object') {
             actionsArray = Object.keys(actionsArray).map(key => actionsArray[key]);
         }

src/api/api.js

@@ -31,8 +31,7 @@ define([
     './Editor',
     './menu/MenuAPI',
     './actions/ActionsAPI',
-    './status/StatusAPI',
-    './priority/PriorityAPI'
+    './status/StatusAPI'
 ], function (
     TimeAPI,
     ObjectAPI,
@@ -44,8 +43,7 @@ define([
     EditorAPI,
     MenuAPI,
     ActionsAPI,
-    StatusAPI,
-    PriorityAPI
+    StatusAPI
 ) {
     return {
         TimeAPI: TimeAPI.default,
@@ -58,7 +56,6 @@ define([
         EditorAPI: EditorAPI,
         MenuAPI: MenuAPI.default,
         ActionsAPI: ActionsAPI.default,
-        StatusAPI: StatusAPI.default,
-        PriorityAPI: PriorityAPI.default
+        StatusAPI: StatusAPI.default
     };
 });

src/api/indicators/IndicatorAPI.js

@@ -31,22 +31,14 @@ define([
         this.indicatorObjects = [];
     }
 
-    IndicatorAPI.prototype.getIndicatorObjectsByPriority = function () {
-        const sortedIndicators = this.indicatorObjects.sort((a, b) => b.priority - a.priority);
-
-        return sortedIndicators;
-    };
-
     IndicatorAPI.prototype.simpleIndicator = function () {
         return new SimpleIndicator(this.openmct);
     };
 
     /**
      * Accepts an indicator object, which is a simple object
-     * with a two attributes: 'element' which has an HTMLElement
-     * as its value, and 'priority' with an integer that specifies its order in the layout.
-     * The lower the priority, the further to the right the element is placed.
-     * If undefined, the priority will be assigned -1.
+     * with a single attribute, 'element' which has an HTMLElement
+     * as its value.
      *
      * We provide .simpleIndicator() as a convenience function
      * which will create a default Open MCT indicator that can
@@ -55,7 +47,7 @@ define([
      * and dynamic behavior.
      *
      * Eg.
-     * const myIndicator = openmct.indicators.simpleIndicator();
+     * var myIndicator = openmct.indicators.simpleIndicator();
      * openmct.indicators.add(myIndicator);
      *
      * myIndicator.text("Hello World!");
@@ -63,10 +55,6 @@ define([
      *
      */
     IndicatorAPI.prototype.add = function (indicator) {
-        if (!indicator.priority) {
-            indicator.priority = this.openmct.priority.DEFAULT;
-        }
-
         this.indicatorObjects.push(indicator);
     };
 

src/api/indicators/IndicatorAPISpec.js

@@ -19,64 +19,97 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-import { createOpenMct, resetApplicationState } from '../../utils/testing';
-import SimpleIndicator from './SimpleIndicator';
 
-describe("The Indicator API", () => {
-    let openmct;
+define(
+    [
+        "../../MCT",
+        "../../../platform/commonUI/general/src/directives/MCTIndicators"
+    ],
+    function (
+        MCT,
+        MCTIndicators
+    ) {
+        xdescribe("The Indicator API", function () {
+            let openmct;
+            let directive;
+            let holderElement;
 
-    beforeEach(() => {
-        openmct = createOpenMct();
+            beforeEach(function () {
+                openmct = new MCT();
+                directive = new MCTIndicators(openmct);
+                holderElement = document.createElement('div');
+            });
+
+            describe("The simple indicator", function () {
+                let simpleIndicator;
+
+                beforeEach(function () {
+                    simpleIndicator = openmct.indicators.simpleIndicator();
+                    openmct.indicators.add(simpleIndicator);
+                    renderIndicators();
+                });
+
+                it("applies the set icon class", function () {
+                    simpleIndicator.iconClass('testIconClass');
+
+                    expect(getIconElement().classList.contains('testIconClass')).toBe(true);
+
+                    simpleIndicator.iconClass('anotherIconClass');
+                    expect(getIconElement().classList.contains('testIconClass')).toBe(false);
+                    expect(getIconElement().classList.contains('anotherIconClass')).toBe(true);
+                });
+
+                it("applies the set status class", function () {
+                    simpleIndicator.statusClass('testStatusClass');
+
+                    expect(getIconElement().classList.contains('testStatusClass')).toBe(true);
+                    simpleIndicator.statusClass('anotherStatusClass');
+                    expect(getIconElement().classList.contains('testStatusClass')).toBe(false);
+                    expect(getIconElement().classList.contains('anotherStatusClass')).toBe(true);
+                });
+
+                it("displays the set text", function () {
+                    simpleIndicator.text('some test text');
+                    expect(getTextElement().textContent.trim()).toEqual('some test text');
+                });
+
+                it("sets the indicator's title", function () {
+                    simpleIndicator.description('a test description');
+                    expect(getIndicatorElement().getAttribute('title')).toEqual('a test description');
+                });
+
+                it("Hides indicator icon if no text is set", function () {
+                    simpleIndicator.text('');
+                    expect(getIndicatorElement().classList.contains('hidden')).toBe(true);
+                });
+
+                function getIconElement() {
+                    return holderElement.querySelector('.ls-indicator');
+                }
+
+                function getIndicatorElement() {
+                    return holderElement.querySelector('.ls-indicator');
+                }
+
+                function getTextElement() {
+                    return holderElement.querySelector('.indicator-text');
+                }
+            });
+
+            it("Supports registration of a completely custom indicator", function () {
+                const customIndicator = document.createElement('div');
+                customIndicator.classList.add('customIndicator');
+                customIndicator.textContent = 'A custom indicator';
+
+                openmct.indicators.add({element: customIndicator});
+                renderIndicators();
+
+                expect(holderElement.querySelector('.customIndicator').textContent.trim()).toEqual('A custom indicator');
+            });
+
+            function renderIndicators() {
+                directive.link({}, holderElement);
+            }
+
+        });
     });
-
-    afterEach(() => {
-        return resetApplicationState(openmct);
-    });
-
-    function generateIndicator(className, label, priority) {
-        const element = document.createElement('div');
-        element.classList.add(className);
-        const textNode = document.createTextNode(label);
-        element.appendChild(textNode);
-        const testIndicator = {
-            element,
-            priority
-        };
-
-        return testIndicator;
-    }
-
-    it("can register an indicator", () => {
-        const testIndicator = generateIndicator('test-indicator', 'This is a test indicator', 2);
-        openmct.indicators.add(testIndicator);
-        expect(openmct.indicators.indicatorObjects).toBeDefined();
-        // notifier indicator is installed by default
-        expect(openmct.indicators.indicatorObjects.length).toBe(2);
-    });
-
-    it("can order indicators based on priority", () => {
-        const testIndicator1 = generateIndicator('test-indicator-1', 'This is a test indicator', openmct.priority.LOW);
-        openmct.indicators.add(testIndicator1);
-
-        const testIndicator2 = generateIndicator('test-indicator-2', 'This is another test indicator', openmct.priority.DEFAULT);
-        openmct.indicators.add(testIndicator2);
-
-        const testIndicator3 = generateIndicator('test-indicator-3', 'This is yet another test indicator', openmct.priority.LOW);
-        openmct.indicators.add(testIndicator3);
-
-        const testIndicator4 = generateIndicator('test-indicator-4', 'This is yet another test indicator', openmct.priority.HIGH);
-        openmct.indicators.add(testIndicator4);
-
-        expect(openmct.indicators.indicatorObjects.length).toBe(5);
-        const indicatorObjectsByPriority = openmct.indicators.getIndicatorObjectsByPriority();
-        expect(indicatorObjectsByPriority.length).toBe(5);
-        expect(indicatorObjectsByPriority[2].priority).toBe(openmct.priority.DEFAULT);
-    });
-
-    it("the simple indicator can be added", () => {
-        const simpleIndicator = new SimpleIndicator(openmct);
-        openmct.indicators.add(simpleIndicator);
-
-        expect(openmct.indicators.indicatorObjects.length).toBe(2);
-    });
-});

src/api/indicators/SimpleIndicator.js

@@ -27,7 +27,6 @@ define(['zepto', './res/indicator-template.html'],
         function SimpleIndicator(openmct) {
             this.openmct = openmct;
             this.element = $(indicatorTemplate)[0];
-            this.priority = openmct.priority.DEFAULT;
 
             this.textElement = this.element.querySelector('.js-indicator-text');
 

src/api/objects/ConflictError.js

@@ -1,2 +0,0 @@
-export default class ConflictError extends Error {
-}

src/api/objects/MutableDomainObject.js

@@ -129,7 +129,9 @@ class MutableDomainObject {
 
         mutable.$observe('$_synchronize_model', (updatedObject) => {
             let clone = JSON.parse(JSON.stringify(updatedObject));
-            utils.refresh(mutable, clone);
+            let deleted = _.difference(Object.keys(mutable), Object.keys(updatedObject));
+            deleted.forEach((propertyName) => delete mutable[propertyName]);
+            Object.assign(mutable, clone);
         });
 
         return mutable;

src/api/objects/ObjectAPI.js

@@ -26,8 +26,6 @@ import RootRegistry from './RootRegistry';
 import RootObjectProvider from './RootObjectProvider';
 import EventEmitter from 'EventEmitter';
 import InterceptorRegistry from './InterceptorRegistry';
-import Transaction from './Transaction';
-import ConflictError from './ConflictError';
 
 /**
  * Utilities for loading, saving, and manipulating domain objects.
@@ -36,13 +34,12 @@ import ConflictError from './ConflictError';
  */
 
 function ObjectAPI(typeRegistry, openmct) {
-    this.openmct = openmct;
     this.typeRegistry = typeRegistry;
     this.eventEmitter = new EventEmitter();
     this.providers = {};
     this.rootRegistry = new RootRegistry();
     this.injectIdentifierService = function () {
-        this.identifierService = this.openmct.$injector.get("identifierService");
+        this.identifierService = openmct.$injector.get("identifierService");
     };
 
     this.rootProvider = new RootObjectProvider(this.rootRegistry);
@@ -50,10 +47,6 @@ function ObjectAPI(typeRegistry, openmct) {
     this.interceptorRegistry = new InterceptorRegistry();
 
     this.SYNCHRONIZED_OBJECT_TYPES = ['notebook', 'plan'];
-
-    this.errors = {
-        Conflict: ConflictError
-    };
 }
 
 /**
@@ -93,14 +86,6 @@ ObjectAPI.prototype.getProvider = function (identifier) {
     return this.providers[namespace] || this.fallbackProvider;
 };
 
-/**
- * Get an active transaction instance
- * @returns {Transaction} a transaction object
- */
-ObjectAPI.prototype.getActiveTransaction = function () {
-    return this.transaction;
-};
-
 /**
  * Get the root-level object.
  * @returns {Promise.<DomainObject>} a promise for the root object
@@ -196,7 +181,6 @@ ObjectAPI.prototype.get = function (identifier, abortSignal) {
 
     let objectPromise = provider.get(identifier, abortSignal).then(result => {
         delete this.cache[keystring];
-
         result = this.applyGetInterceptors(identifier, result);
         if (result.isMutable) {
             result.$refresh(result);
@@ -205,14 +189,6 @@ ObjectAPI.prototype.get = function (identifier, abortSignal) {
             mutableDomainObject.$refresh(result);
         }
 
-        return result;
-    }).catch((result) => {
-        console.warn(`Failed to retrieve ${keystring}:`, result);
-
-        delete this.cache[keystring];
-
-        result = this.applyGetInterceptors(identifier);
-
         return result;
     });
 
@@ -315,7 +291,6 @@ ObjectAPI.prototype.isPersistable = function (idOrKeyString) {
 ObjectAPI.prototype.save = function (domainObject) {
     let provider = this.getProvider(domainObject.identifier);
     let savedResolve;
-    let savedReject;
     let result;
 
     if (!this.isPersistable(domainObject.identifier)) {
@@ -325,9 +300,8 @@ ObjectAPI.prototype.save = function (domainObject) {
     } else {
         const persistedTime = Date.now();
         if (domainObject.persisted === undefined) {
-            result = new Promise((resolve, reject) => {
+            result = new Promise((resolve) => {
                 savedResolve = resolve;
-                savedReject = reject;
             });
             domainObject.persisted = persistedTime;
             const newObjectPromise = provider.create(domainObject);
@@ -335,8 +309,6 @@ ObjectAPI.prototype.save = function (domainObject) {
                 newObjectPromise.then(response => {
                     this.mutate(domainObject, 'persisted', persistedTime);
                     savedResolve(response);
-                }).catch((error) => {
-                    savedReject(error);
                 });
             } else {
                 result = Promise.reject(`[ObjectAPI][save] Object provider returned ${newObjectPromise} when creating new object.`);
@@ -351,24 +323,6 @@ ObjectAPI.prototype.save = function (domainObject) {
     return result;
 };
 
-/**
- * After entering into edit mode, creates a new instance of Transaction to keep track of changes in Objects
- */
-ObjectAPI.prototype.startTransaction = function () {
-    if (this.isTransactionActive()) {
-        throw new Error("Unable to start new Transaction: Previous Transaction is active");
-    }
-
-    this.transaction = new Transaction(this);
-};
-
-/**
- * Clear instance of Transaction
- */
-ObjectAPI.prototype.endTransaction = function () {
-    this.transaction = null;
-};
-
 /**
  * Add a root-level object.
  * @param {module:openmct.ObjectAPI~Identifier|function} an array of
@@ -458,12 +412,6 @@ ObjectAPI.prototype.mutate = function (domainObject, path, value) {
         //Destroy temporary mutable object
         this.destroyMutable(mutableDomainObject);
     }
-
-    if (this.isTransactionActive()) {
-        this.transaction.add(domainObject);
-    } else {
-        this.save(domainObject);
-    }
 };
 
 /**
@@ -500,23 +448,6 @@ ObjectAPI.prototype._toMutable = function (object) {
     return mutableObject;
 };
 
-/**
- * Updates a domain object based on its latest persisted state. Note that this will mutate the provided object.
- * @param {module:openmct.DomainObject} domainObject an object to refresh from its persistence store
- * @returns {Promise} the provided object, updated to reflect the latest persisted state of the object.
- */
-ObjectAPI.prototype.refresh = async function (domainObject) {
-    const refreshedObject = await this.get(domainObject.identifier);
-
-    if (domainObject.isMutable) {
-        domainObject.$refresh(refreshedObject);
-    } else {
-        utils.refresh(domainObject, refreshedObject);
-    }
-
-    return domainObject;
-};
-
 /**
  * @param module:openmct.ObjectAPI~Identifier identifier An object identifier
  * @returns {boolean} true if the object can be mutated, otherwise returns false
@@ -593,10 +524,6 @@ ObjectAPI.prototype.isObjectPathToALink = function (domainObject, objectPath) {
         && domainObject.location !== this.makeKeyString(objectPath[1].identifier);
 };
 
-ObjectAPI.prototype.isTransactionActive = function () {
-    return Boolean(this.transaction && this.openmct.editor.isEditing());
-};
-
 /**
  * Uniquely identifies a domain object.
  *

src/api/objects/ObjectAPISpec.js

@@ -26,10 +26,6 @@ describe("The Object API", () => {
 
         openmct.$injector.get.and.returnValue(mockIdentifierService);
         objectAPI = new ObjectAPI(typeRegistry, openmct);
-
-        openmct.editor = {};
-        openmct.editor.isEditing = () => false;
-
         mockDomainObject = {
             identifier: {
                 namespace: TEST_NAMESPACE,
@@ -227,28 +223,6 @@ describe("The Object API", () => {
             expect(testObject.name).toBe(MUTATED_NAME);
         });
 
-        it('Provides a way of refreshing an object from the persistence store', () => {
-            const modifiedTestObject = JSON.parse(JSON.stringify(testObject));
-            const OTHER_ATTRIBUTE_VALUE = 'Modified value';
-            const NEW_ATTRIBUTE_VALUE = 'A new attribute';
-            modifiedTestObject.otherAttribute = OTHER_ATTRIBUTE_VALUE;
-            modifiedTestObject.newAttribute = NEW_ATTRIBUTE_VALUE;
-            delete modifiedTestObject.objectAttribute;
-
-            spyOn(objectAPI, 'get');
-            objectAPI.get.and.returnValue(Promise.resolve(modifiedTestObject));
-
-            expect(objectAPI.get).not.toHaveBeenCalled();
-
-            return objectAPI.refresh(testObject).then(() => {
-                expect(objectAPI.get).toHaveBeenCalledWith(testObject.identifier);
-
-                expect(testObject.otherAttribute).toEqual(OTHER_ATTRIBUTE_VALUE);
-                expect(testObject.newAttribute).toEqual(NEW_ATTRIBUTE_VALUE);
-                expect(testObject.objectAttribute).not.toBeDefined();
-            });
-        });
-
         describe ('uses a MutableDomainObject', () => {
             it('and retains properties of original object ', function () {
                 expect(hasOwnProperty(mutable, 'identifier')).toBe(true);

src/api/objects/object-utils.js

@@ -165,19 +165,12 @@ define([
         return identifierEquals(a.identifier, b.identifier);
     }
 
-    function refresh(oldObject, newObject) {
-        let deleted = _.difference(Object.keys(oldObject), Object.keys(newObject));
-        deleted.forEach((propertyName) => delete oldObject[propertyName]);
-        Object.assign(oldObject, newObject);
-    }
-
     return {
         toOldFormat: toOldFormat,
         toNewFormat: toNewFormat,
         makeKeyString: makeKeyString,
         parseKeyString: parseKeyString,
         equals: objectEquals,
-        identifierEquals: identifierEquals,
-        refresh: refresh
+        identifierEquals: identifierEquals
     };
 });

src/api/telemetry/TelemetryAPI.js

@@ -477,10 +477,6 @@ define([
      * @returns {Object<String, {TelemetryValueFormatter}>}
      */
     TelemetryAPI.prototype.getFormatMap = function (metadata) {
-        if (!metadata) {
-            return {};
-        }
-
         if (!this.formatMapCache.has(metadata)) {
             const formatMap = metadata.values().reduce(function (map, valueMetadata) {
                 map[valueMetadata.key] = this.getValueFormatter(valueMetadata);

src/api/telemetry/TelemetryCollection.js

@@ -49,6 +49,7 @@ export class TelemetryCollection extends EventEmitter {
         this.parseTime = undefined;
         this.metadata = this.openmct.telemetry.getMetadata(domainObject);
         this.unsubscribe = undefined;
+        this.historicalProvider = undefined;
         this.options = options;
         this.pageState = undefined;
         this.lastBounds = undefined;
@@ -64,13 +65,13 @@ export class TelemetryCollection extends EventEmitter {
             this._error(ERRORS.LOADED);
         }
 
-        this._setTimeSystem(this.openmct.time.timeSystem());
+        this._timeSystem(this.openmct.time.timeSystem());
         this.lastBounds = this.openmct.time.bounds();
 
         this._watchBounds();
         this._watchTimeSystem();
 
-        this._requestHistoricalTelemetry();
+        this._initiateHistoricalRequests();
         this._initiateSubscriptionTelemetry();
 
         this.loaded = true;
@@ -102,35 +103,36 @@ export class TelemetryCollection extends EventEmitter {
         return this.boundedTelemetry;
     }
 
+    /**
+     * Sets up  the telemetry collection for historical requests,
+     * this uses the "standardizeRequestOptions" from Telemetry API
+     * @private
+     */
+    _initiateHistoricalRequests() {
+        this.openmct.telemetry.standardizeRequestOptions(this.options);
+        this.historicalProvider = this.openmct.telemetry.
+            findRequestProvider(this.domainObject, this.options);
+
+        this._requestHistoricalTelemetry();
+    }
+
     /**
      * If a historical provider exists, then historical requests will be made
      * @private
      */
     async _requestHistoricalTelemetry() {
-        let options = { ...this.options };
-        let historicalProvider;
-
-        this.openmct.telemetry.standardizeRequestOptions(options);
-        historicalProvider = this.openmct.telemetry.
-            findRequestProvider(this.domainObject, options);
-
-        if (!historicalProvider) {
+        if (!this.historicalProvider) {
             return;
         }
 
         let historicalData;
 
-        options.onPartialResponse = this._processNewTelemetry.bind(this);
+        this.options.onPartialResponse = this._processNewTelemetry.bind(this);
 
         try {
-            if (this.requestAbort) {
-                this.requestAbort.abort();
-            }
-
             this.requestAbort = new AbortController();
-            options.signal = this.requestAbort.signal;
-            this.emit('requestStarted');
-            historicalData = await historicalProvider.request(this.domainObject, options);
+            this.options.signal = this.requestAbort.signal;
+            historicalData = await this.historicalProvider.request(this.domainObject, this.options);
         } catch (error) {
             if (error.name !== 'AbortError') {
                 console.error('Error requesting telemetry data...');
@@ -138,7 +140,6 @@ export class TelemetryCollection extends EventEmitter {
             }
         }
 
-        this.emit('requestEnded');
         this.requestAbort = undefined;
 
         this._processNewTelemetry(historicalData);
@@ -172,10 +173,6 @@ export class TelemetryCollection extends EventEmitter {
      * @private
      */
     _processNewTelemetry(telemetryData) {
-        if (telemetryData === undefined) {
-            return;
-        }
-
         let data = Array.isArray(telemetryData) ? telemetryData : [telemetryData];
         let parsedValue;
         let beforeStartOfBounds;
@@ -202,10 +199,9 @@ export class TelemetryCollection extends EventEmitter {
 
                     if (endIndex > startIndex) {
                         let potentialDupes = this.boundedTelemetry.slice(startIndex, endIndex);
+
                         isDuplicate = potentialDupes.some(_.isEqual.bind(undefined, datum));
                     }
-                } else if (startIndex === this.boundedTelemetry.length) {
-                    isDuplicate = _.isEqual(datum, this.boundedTelemetry[this.boundedTelemetry.length - 1]);
                 }
 
                 if (!isDuplicate) {
@@ -321,7 +317,7 @@ export class TelemetryCollection extends EventEmitter {
      * Time System
      * @private
      */
-    _setTimeSystem(timeSystem) {
+    _timeSystem(timeSystem) {
         let domains = this.metadata.valuesForHints(['domain']);
         let domain = domains.find((d) => d.key === timeSystem.key);
 
@@ -337,10 +333,7 @@ export class TelemetryCollection extends EventEmitter {
         this.parseTime = (datum) => {
             return valueFormatter.parse(datum);
         };
-    }
 
-    _setTimeSystemAndFetchData(timeSystem) {
-        this._setTimeSystem(timeSystem);
         this._reset();
     }
 
@@ -377,19 +370,19 @@ export class TelemetryCollection extends EventEmitter {
     }
 
     /**
-     * adds the _setTimeSystemAndFetchData callback to the 'timeSystem' timeAPI listener
+     * adds the _timeSystem callback to the 'timeSystem' timeAPI listener
      * @private
      */
     _watchTimeSystem() {
-        this.openmct.time.on('timeSystem', this._setTimeSystemAndFetchData, this);
+        this.openmct.time.on('timeSystem', this._timeSystem, this);
     }
 
     /**
-     * removes the _setTimeSystemAndFetchData callback from the 'timeSystem' timeAPI listener
+     * removes the _timeSystem callback from the 'timeSystem' timeAPI listener
      * @private
      */
     _unwatchTimeSystem() {
-        this.openmct.time.off('timeSystem', this._setTimeSystemAndFetchData, this);
+        this.openmct.time.off('timeSystem', this._timeSystem, this);
     }
 
     /**

src/api/time/TimeAPI.js

@@ -172,7 +172,7 @@ class TimeAPI extends GlobalTimeContext {
      * @memberof module:openmct.TimeAPI#
      * @method getContextForView
      */
-    getContextForView(objectPath = []) {
+    getContextForView(objectPath) {
         let timeContext = this;
 
         objectPath.forEach(item => {

src/installDefaultBundles.js

@@ -41,6 +41,7 @@ const DEFAULTS = [
     'platform/forms',
     'platform/identity',
     'platform/persistence/aggregator',
+    'platform/persistence/queue',
     'platform/policy',
     'platform/entanglement',
     'platform/search',

src/plugins/CouchDBSearchFolder/plugin.js

@@ -1,4 +1,4 @@
-export default function (folderName, couchPlugin, searchFilter, isEditable = false) {
+export default function (folderName, couchPlugin, searchFilter) {
     return function install(openmct) {
         const couchProvider = couchPlugin.couchProvider;
 
@@ -14,9 +14,8 @@ export default function (folderName, couchPlugin, searchFilter, isEditable = fal
                 } else {
                     return Promise.resolve({
                         identifier,
-                        type: isEditable ? 'folder' : 'noneditable.folder',
-                        name: folderName || "CouchDB Documents",
-                        location: 'ROOT'
+                        type: 'folder',
+                        name: folderName || "CouchDB Documents"
                     });
                 }
             }

src/plugins/CouchDBSearchFolder/pluginSpec.js

@@ -24,8 +24,6 @@ import {createOpenMct, resetApplicationState} from "utils/testing";
 import CouchDBSearchFolderPlugin from './plugin';
 
 describe('the plugin', function () {
-    const FOLDER_TYPE = 'folder';
-    const NONEDITABLE_FOLDER_TYPE = 'noneditable.folder';
     let identifier = {
         namespace: 'couch-search',
         key: "couch-search"
@@ -33,13 +31,12 @@ describe('the plugin', function () {
     let testPath = '/test/db';
     let openmct;
     let composition;
-    let couchPlugin;
 
-    beforeEach(() => {
+    beforeEach((done) => {
 
         openmct = createOpenMct();
 
-        couchPlugin = openmct.plugins.CouchDB(testPath);
+        let couchPlugin = openmct.plugins.CouchDB(testPath);
         openmct.install(couchPlugin);
 
         openmct.install(new CouchDBSearchFolderPlugin('CouchDB Documents', couchPlugin, {
@@ -50,6 +47,11 @@ describe('the plugin', function () {
             }
         }));
 
+        openmct.on('start', done);
+        openmct.startHeadless();
+
+        composition = openmct.composition.get({identifier});
+
         spyOn(couchPlugin.couchProvider, 'getObjectsByFilter').and.returnValue(Promise.resolve([
             {
                 identifier: {
@@ -64,87 +66,26 @@ describe('the plugin', function () {
                 }
             }
         ]));
-
-        spyOn(couchPlugin.couchProvider, "get").and.callFake((id) => {
-            return Promise.resolve({
-                identifier: id
-            });
-        });
-
-        return new Promise((resolve) => {
-            openmct.once('start', resolve);
-            openmct.startHeadless();
-        }).then(() => {
-            composition = openmct.composition.get({identifier});
-        });
     });
 
     afterEach(() => {
         return resetApplicationState(openmct);
     });
 
-    describe('provides', () => {
-        const NAME = 'CouchDB Documents';
-
-        beforeEach((done) => {
-            openmct.install(new CouchDBSearchFolderPlugin(NAME, couchPlugin, {
-                "selector": {
-                    "model": {
-                        "type": "plan"
-                    }
-                }
-            }));
-
-            openmct.on('start', done);
-            openmct.startHeadless();
-
-            composition = openmct.composition.get({identifier});
-        });
-
-        it('a default non-editable folder to hold plans', () => {
-            return openmct.objects.get(identifier).then((object) => {
-                expect(object).toEqual({
-                    identifier,
-                    type: NONEDITABLE_FOLDER_TYPE,
-                    name: NAME,
-                    location: "ROOT"
-                });
-            });
-        });
-
-        it('composition for couch search folders', () => {
-            return composition.load().then((objects) => {
-                expect(objects.length).toEqual(2);
+    it('provides a folder to hold plans', () => {
+        return openmct.objects.get(identifier).then((object) => {
+            expect(object).toEqual({
+                identifier,
+                type: 'folder',
+                name: "CouchDB Documents"
             });
         });
     });
 
-    describe('optionally provides', () => {
-        const EDITABLE = true;
-        const NAME = 'Editable CouchDB Documents';
-
-        beforeEach((done) => {
-            openmct.install(new CouchDBSearchFolderPlugin(NAME, couchPlugin, {
-                "selector": {
-                    "model": {
-                        "type": "plan"
-                    }
-                }
-            }, EDITABLE));
-
-            openmct.on('start', done);
-            openmct.startHeadless();
-        });
-
-        it('an editable folder to hold plans', () => {
-            return openmct.objects.get(identifier).then((object) => {
-                expect(object).toEqual({
-                    identifier,
-                    type: FOLDER_TYPE,
-                    name: NAME,
-                    location: "ROOT"
-                });
-            });
+    it('provides composition for couch search folders', () => {
+        return composition.load().then((objects) => {
+            expect(objects.length).toEqual(2);
         });
     });
+
 });

src/plugins/LADTable/components/LADRow.vue

@@ -96,11 +96,11 @@ export default {
 
         this.timestampKey = this.openmct.time.timeSystem().key;
 
-        this.valueMetadata = this.metadata ? this
+        this.valueMetadata = this
             .metadata
-            .valuesForHints(['range'])[0] : undefined;
+            .valuesForHints(['range'])[0];
 
-        this.valueKey = this.valueMetadata ? this.valueMetadata.key : undefined;
+        this.valueKey = this.valueMetadata.key;
 
         this.unsubscribe = this.openmct
             .telemetry
@@ -151,10 +151,7 @@ export default {
                     size: 1,
                     strategy: 'latest'
                 })
-                .then((array) => this.updateValues(array[array.length - 1]))
-                .catch((error) => {
-                    console.warn('Error fetching data', error);
-                });
+                .then((array) => this.updateValues(array[array.length - 1]));
         },
         updateBounds(bounds, isTick) {
             this.bounds = bounds;

src/plugins/LADTable/components/LADTable.vue

@@ -73,9 +73,8 @@ export default {
         hasUnits() {
             let itemsWithUnits = this.items.filter((item) => {
                 let metadata = this.openmct.telemetry.getMetadata(item.domainObject);
-                const valueMetadatas = metadata ? metadata.valueMetadatas : [];
 
-                return this.metadataHasUnits(valueMetadatas);
+                return this.metadataHasUnits(metadata.valueMetadatas);
 
             });
 

src/plugins/charts/plugin.js

@@ -1,51 +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.
- *****************************************************************************/
-import { BAR_GRAPH_KEY } from './BarGraphConstants';
-import BarGraphViewProvider from './BarGraphViewProvider';
-import BarGraphInspectorViewProvider from './inspector/BarGraphInspectorViewProvider';
-import BarGraphCompositionPolicy from './BarGraphCompositionPolicy';
-
-export default function () {
-    return function install(openmct) {
-        openmct.types.addType(BAR_GRAPH_KEY, {
-            key: BAR_GRAPH_KEY,
-            name: "Bar Graph",
-            cssClass: "icon-bar-chart",
-            description: "View data as a bar graph. Can be added to Display Layouts.",
-            creatable: true,
-            initialize: function (domainObject) {
-                domainObject.composition = [];
-                domainObject.configuration = {
-                    barStyles: { series: {} }
-                };
-            },
-            priority: 891
-        });
-
-        openmct.objectViews.addProvider(new BarGraphViewProvider(openmct));
-
-        openmct.inspectorViews.addProvider(new BarGraphInspectorViewProvider(openmct));
-
-        openmct.composition.addPolicy(new BarGraphCompositionPolicy(openmct).allow);
-    };
-}
-

src/plugins/charts/pluginSpec.js

@@ -1,485 +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.
- *****************************************************************************/
-
-import {createOpenMct, resetApplicationState} from "utils/testing";
-import Vue from "vue";
-import BarGraphPlugin from "./plugin";
-import BarGraph from './BarGraphPlot.vue';
-import EventEmitter from "EventEmitter";
-import { BAR_GRAPH_VIEW, BAR_GRAPH_KEY } from './BarGraphConstants';
-
-describe("the plugin", function () {
-    let element;
-    let child;
-    let openmct;
-    let telemetryPromise;
-    let telemetryPromiseResolve;
-    let mockObjectPath;
-
-    beforeEach((done) => {
-        mockObjectPath = [
-            {
-                name: 'mock folder',
-                type: 'fake-folder',
-                identifier: {
-                    key: 'mock-folder',
-                    namespace: ''
-                }
-            },
-            {
-                name: 'mock parent folder',
-                type: 'time-strip',
-                identifier: {
-                    key: 'mock-parent-folder',
-                    namespace: ''
-                }
-            }
-        ];
-        const testTelemetry = [
-            {
-                'utc': 1,
-                'some-key': 'some-value 1',
-                'some-other-key': 'some-other-value 1'
-            },
-            {
-                'utc': 2,
-                'some-key': 'some-value 2',
-                'some-other-key': 'some-other-value 2'
-            },
-            {
-                'utc': 3,
-                'some-key': 'some-value 3',
-                'some-other-key': 'some-other-value 3'
-            }
-        ];
-
-        openmct = createOpenMct();
-
-        telemetryPromise = new Promise((resolve) => {
-            telemetryPromiseResolve = resolve;
-        });
-
-        spyOn(openmct.telemetry, 'request').and.callFake(() => {
-            telemetryPromiseResolve(testTelemetry);
-
-            return telemetryPromise;
-        });
-
-        openmct.install(new BarGraphPlugin());
-
-        element = document.createElement("div");
-        element.style.width = "640px";
-        element.style.height = "480px";
-        child = document.createElement("div");
-        child.style.width = "640px";
-        child.style.height = "480px";
-        element.appendChild(child);
-        document.body.appendChild(element);
-
-        spyOn(window, 'ResizeObserver').and.returnValue({
-            observe() {},
-            unobserve() {},
-            disconnect() {}
-        });
-
-        openmct.time.timeSystem("utc", {
-            start: 0,
-            end: 4
-        });
-
-        openmct.types.addType("test-object", {
-            creatable: true
-        });
-
-        openmct.on("start", done);
-        openmct.startHeadless();
-    });
-
-    afterEach((done) => {
-        openmct.time.timeSystem('utc', {
-            start: 0,
-            end: 1
-        });
-        resetApplicationState(openmct).then(done).catch(done);
-    });
-
-    describe("The bar graph view", () => {
-        let testDomainObject;
-        let barGraphObject;
-        // eslint-disable-next-line no-unused-vars
-        let component;
-        let mockComposition;
-
-        beforeEach(async () => {
-            const getFunc = openmct.$injector.get;
-            spyOn(openmct.$injector, "get")
-                .withArgs("exportImageService").and.returnValue({
-                    exportPNG: () => {},
-                    exportJPG: () => {}
-                })
-                .and.callFake(getFunc);
-
-            barGraphObject = {
-                identifier: {
-                    namespace: "",
-                    key: "test-plot"
-                },
-                type: "telemetry.plot.bar-graph",
-                name: "Test Bar Graph"
-            };
-
-            testDomainObject = {
-                identifier: {
-                    namespace: "",
-                    key: "test-object"
-                },
-                configuration: {
-                    barStyles: {
-                        series: {}
-                    }
-                },
-                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
-                        }
-                    }]
-                }
-            };
-
-            mockComposition = new EventEmitter();
-            mockComposition.load = () => {
-                mockComposition.emit('add', testDomainObject);
-
-                return [testDomainObject];
-            };
-
-            spyOn(openmct.composition, 'get').and.returnValue(mockComposition);
-
-            let viewContainer = document.createElement("div");
-            child.append(viewContainer);
-            component = new Vue({
-                el: viewContainer,
-                components: {
-                    BarGraph
-                },
-                provide: {
-                    openmct: openmct,
-                    domainObject: barGraphObject,
-                    composition: openmct.composition.get(barGraphObject)
-                },
-                template: "<BarGraph></BarGraph>"
-            });
-
-            await Vue.nextTick();
-        });
-
-        it("provides a bar graph view", () => {
-            const applicableViews = openmct.objectViews.get(barGraphObject, mockObjectPath);
-            const plotViewProvider = applicableViews.find((viewProvider) => viewProvider.key === BAR_GRAPH_VIEW);
-            expect(plotViewProvider).toBeDefined();
-        });
-
-        it("Renders plotly bar graph", () => {
-            let barChartElement = element.querySelectorAll(".plotly");
-            expect(barChartElement.length).toBe(1);
-        });
-
-        it("Handles dots in telemetry id", () => {
-            const dotFullTelemetryObject = {
-                identifier: {
-                    namespace: "someNamespace",
-                    key: "~OpenMCT~outer.test-object.foo.bar"
-                },
-                type: "test-dotful-object",
-                name: "A Dotful Object",
-                telemetry: {
-                    values: [{
-                        key: "utc",
-                        format: "utc",
-                        name: "Time",
-                        hints: {
-                            domain: 1
-                        }
-                    }, {
-                        key: "some-key.foo.name.45",
-                        name: "Some dotful attribute",
-                        hints: {
-                            range: 1
-                        }
-                    }, {
-                        key: "some-other-key.bar.344.rad",
-                        name: "Another dotful attribute",
-                        hints: {
-                            range: 2
-                        }
-                    }]
-                }
-            };
-
-            const applicableViews = openmct.objectViews.get(barGraphObject, mockObjectPath);
-            const plotViewProvider = applicableViews.find((viewProvider) => viewProvider.key === BAR_GRAPH_VIEW);
-            const barGraphView = plotViewProvider.view(testDomainObject, [testDomainObject]);
-            barGraphView.show(child, true);
-            expect(testDomainObject.configuration.barStyles.series["test-object"].name).toEqual("Test Object");
-            mockComposition.emit('add', dotFullTelemetryObject);
-            expect(testDomainObject.configuration.barStyles.series["someNamespace:~OpenMCT~outer.test-object.foo.bar"].name).toEqual("A Dotful Object");
-            barGraphView.destroy();
-        });
-    });
-
-    describe("the bar graph objects", () => {
-        const mockObject = {
-            name: 'A very nice bar graph',
-            key: BAR_GRAPH_KEY,
-            creatable: true
-        };
-
-        it('defines a bar graph object type with the correct key', () => {
-            const objectDef = openmct.types.get(BAR_GRAPH_KEY).definition;
-            expect(objectDef.key).toEqual(mockObject.key);
-        });
-
-        it('is creatable', () => {
-            const objectDef = openmct.types.get(BAR_GRAPH_KEY).definition;
-            expect(objectDef.creatable).toEqual(mockObject.creatable);
-        });
-    });
-
-    describe("The bar graph composition policy", () => {
-
-        it("allows composition for telemetry that contain at least one range", () => {
-            const parent = {
-                "composition": [],
-                "configuration": {},
-                "name": "Some Bar Graph",
-                "type": "telemetry.plot.bar-graph",
-                "location": "mine",
-                "modified": 1631005183584,
-                "persisted": 1631005183502,
-                "identifier": {
-                    "namespace": "",
-                    "key": "b78e7e23-f2b8-4776-b1f0-3ff778f5c8a9"
-                }
-            };
-            const testTelemetryObject = {
-                identifier: {
-                    namespace: "",
-                    key: "test-object"
-                },
-                type: "test-object",
-                name: "Test Object",
-                telemetry: {
-                    values: [{
-                        key: "some-key",
-                        name: "Some attribute",
-                        hints: {
-                            domain: 1
-                        }
-                    }, {
-                        key: "some-other-key",
-                        name: "Another attribute",
-                        hints: {
-                            range: 1
-                        }
-                    }]
-                }
-            };
-            const composition = openmct.composition.get(parent);
-            expect(() => {
-                composition.add(testTelemetryObject);
-            }).not.toThrow();
-            expect(parent.composition.length).toBe(1);
-        });
-
-        it("disallows composition for telemetry that don't contain any range hints", () => {
-            const parent = {
-                "composition": [],
-                "configuration": {},
-                "name": "Some Bar Graph",
-                "type": "telemetry.plot.bar-graph",
-                "location": "mine",
-                "modified": 1631005183584,
-                "persisted": 1631005183502,
-                "identifier": {
-                    "namespace": "",
-                    "key": "b78e7e23-f2b8-4776-b1f0-3ff778f5c8a9"
-                }
-            };
-            const testTelemetryObject = {
-                identifier: {
-                    namespace: "",
-                    key: "test-object"
-                },
-                type: "test-object",
-                name: "Test Object",
-                telemetry: {
-                    values: [{
-                        key: "some-key",
-                        name: "Some attribute"
-                    }, {
-                        key: "some-other-key",
-                        name: "Another attribute"
-                    }]
-                }
-            };
-            const composition = openmct.composition.get(parent);
-            expect(() => {
-                composition.add(testTelemetryObject);
-            }).toThrow();
-            expect(parent.composition.length).toBe(0);
-        });
-    });
-    describe('the inspector view', () => {
-        let mockComposition;
-        let testDomainObject;
-        let selection;
-        let plotInspectorView;
-        let viewContainer;
-        let optionsElement;
-        beforeEach(async () => {
-            testDomainObject = {
-                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.bar-graph",
-                                configuration: {
-                                    barStyles: {
-                                        series: {
-                                            '~Some~foo.bar': {
-                                                name: 'A telemetry object',
-                                                type: 'some-type',
-                                                isAlias: true
-                                            }
-                                        }
-                                    }
-                                },
-                                composition: [
-                                    {
-                                        key: '~Some~foo.bar'
-                                    }
-                                ]
-                            }
-                        }
-                    },
-                    {
-                        context: {
-                            item: {
-                                type: 'time-strip',
-                                identifier: {
-                                    key: 'some-other-key',
-                                    namespace: ''
-                                }
-                            }
-                        }
-                    }
-                ]
-            ];
-
-            mockComposition = new EventEmitter();
-            mockComposition.load = () => {
-                mockComposition.emit('add', testDomainObject);
-
-                return [testDomainObject];
-            };
-
-            spyOn(openmct.composition, 'get').and.returnValue(mockComposition);
-
-            viewContainer = document.createElement('div');
-            child.append(viewContainer);
-
-            const applicableViews = openmct.inspectorViews.get(selection);
-            plotInspectorView = applicableViews[0];
-            plotInspectorView.show(viewContainer);
-
-            await Vue.nextTick();
-            optionsElement = element.querySelector('.c-bar-graph-options');
-        });
-
-        afterEach(() => {
-            plotInspectorView.destroy();
-        });
-
-        it('it renders the options', () => {
-            expect(optionsElement).toBeDefined();
-        });
-
-        it('shows the name', () => {
-            const seriesEl = optionsElement.querySelector('.c-object-label__name');
-            expect(seriesEl.innerHTML).toEqual('A telemetry object');
-        });
-    });
-});

src/plugins/clearData/plugin.js

@@ -47,9 +47,7 @@ define([
                 });
 
                 let indicator = {
-                    element: component.$mount().$el,
-                    key: 'clear-data-indicator',
-                    priority: openmct.priority.DEFAULT
+                    element: component.$mount().$el
                 };
 
                 openmct.indicators.add(indicator);

src/plugins/clearData/test/ClearDataActionSpec.js

@@ -41,9 +41,6 @@ describe('When the Clear Data Plugin is installed,', () => {
     const openmct = {
         objectViews: mockObjectViews,
         indicators: mockIndicatorProvider,
-        priority: {
-            DEFAULT: 0
-        },
         actions: mockActionsProvider,
         install: function (plugin) {
             plugin(this);
@@ -72,13 +69,13 @@ describe('When the Clear Data Plugin is installed,', () => {
     ];
 
     it('Global Clear Indicator is installed', () => {
-        openmct.install(ClearDataActionPlugin(openmct, {indicator: true}));
+        openmct.install(ClearDataActionPlugin([]));
 
         expect(mockIndicatorProvider.add).toHaveBeenCalled();
     });
 
     it('Clear Data context menu action is installed', () => {
-        openmct.install(ClearDataActionPlugin(openmct, []));
+        openmct.install(ClearDataActionPlugin([]));
 
         expect(mockActionsProvider.register).toHaveBeenCalled();
     });

src/plugins/clock/plugin.js

@@ -116,8 +116,7 @@ export default function ClockPlugin(options) {
             });
             const indicator = {
                 element: clockIndicator.$mount().$el,
-                key: 'clock-indicator',
-                priority: openmct.priority.LOW
+                key: 'clock-indicator'
             };
 
             openmct.indicators.add(indicator);

src/plugins/condition/Condition.js

@@ -65,7 +65,7 @@ export default class Condition extends EventEmitter {
         }
 
         this.trigger = conditionConfiguration.configuration.trigger;
-        this.summary = '';
+        this.description = '';
     }
 
     updateResult(datum) {
@@ -134,6 +134,7 @@ export default class Condition extends EventEmitter {
         criterionConfigurations.forEach((criterionConfiguration) => {
             this.addCriterion(criterionConfiguration);
         });
+        this.updateDescription();
     }
 
     updateCriteria(criterionConfigurations) {
@@ -145,6 +146,7 @@ export default class Condition extends EventEmitter {
         this.criteria.forEach((criterion) => {
             criterion.updateTelemetryObjects(this.conditionManager.telemetryObjects);
         });
+        this.updateDescription();
     }
 
     /**
@@ -198,6 +200,7 @@ export default class Condition extends EventEmitter {
             criterion.off('criterionUpdated', (obj) => this.handleCriterionUpdated(obj));
             criterion.off('telemetryIsStale', (obj) => this.handleStaleCriterion(obj));
             this.criteria.splice(found.index, 1, newCriterion);
+            this.updateDescription();
         }
     }
 
@@ -213,6 +216,7 @@ export default class Condition extends EventEmitter {
             });
             criterion.destroy();
             this.criteria.splice(found.index, 1);
+            this.updateDescription();
 
             return true;
         }
@@ -224,6 +228,7 @@ export default class Condition extends EventEmitter {
         let found = this.findCriterion(criterion.id);
         if (found) {
             this.criteria[found.index] = criterion.data;
+            this.updateDescription();
         }
     }
 
@@ -249,7 +254,8 @@ export default class Condition extends EventEmitter {
 
             description = `${description} ${criterion.getDescription()} ${(index < this.criteria.length - 1) ? triggerDescription.conjunction : ''}`;
         });
-        this.summary = description;
+        this.description = description;
+        this.conditionManager.updateConditionDescription(this);
     }
 
     getTriggerDescription() {

src/plugins/condition/ConditionManager.js

@@ -105,14 +105,7 @@ export default class ConditionManager extends EventEmitter {
     }
 
     updateConditionTelemetryObjects() {
-        this.conditions.forEach((condition) => {
-            condition.updateTelemetryObjects();
-            let index = this.conditionSetDomainObject.configuration.conditionCollection.findIndex(item => item.id === condition.id);
-            if (index > -1) {
-                //Only assign the summary, don't mutate the domain object
-                this.conditionSetDomainObject.configuration.conditionCollection[index].summary = this.updateConditionDescription(condition);
-            }
-        });
+        this.conditions.forEach((condition) => condition.updateTelemetryObjects());
     }
 
     removeConditionTelemetryObjects() {
@@ -146,17 +139,10 @@ export default class ConditionManager extends EventEmitter {
         }
     }
 
-    updateConditionDescription(condition) {
-        condition.updateDescription();
-
-        return condition.summary;
-    }
-
     updateCondition(conditionConfiguration) {
         let condition = this.findConditionById(conditionConfiguration.id);
         if (condition) {
             condition.update(conditionConfiguration);
-            conditionConfiguration.summary = this.updateConditionDescription(condition);
         }
 
         let index = this.conditionSetDomainObject.configuration.conditionCollection.findIndex(item => item.id === conditionConfiguration.id);
@@ -166,10 +152,16 @@ export default class ConditionManager extends EventEmitter {
         }
     }
 
+    updateConditionDescription(condition) {
+        const found = this.conditionSetDomainObject.configuration.conditionCollection.find(conditionConfiguration => (conditionConfiguration.id === condition.id));
+        if (found.summary !== condition.description) {
+            found.summary = condition.description;
+            this.persistConditions();
+        }
+    }
+
     initCondition(conditionConfiguration, index) {
         let condition = new Condition(conditionConfiguration, this.openmct, this);
-        conditionConfiguration.summary = this.updateConditionDescription(condition);
-
         if (index !== undefined) {
             this.conditions.splice(index + 1, 0, condition);
         } else {

src/plugins/condition/ConditionSetViewProvider.js

@@ -33,10 +33,8 @@ export default class ConditionSetViewProvider {
         this.cssClass = 'icon-conditional';
     }
 
-    canView(domainObject, objectPath) {
-        const isConditionSet = domainObject.type === 'conditionSet';
-
-        return isConditionSet && this.openmct.router.isNavigatedObject(objectPath);
+    canView(domainObject) {
+        return domainObject.type === 'conditionSet';
     }
 
     canEdit(domainObject) {

src/plugins/condition/components/Criterion.vue

@@ -244,7 +244,7 @@ export default {
                 this.telemetryMetadataOptions = [];
                 telemetryObjects.forEach(telemetryObject => {
                     let telemetryMetadata = this.openmct.telemetry.getMetadata(telemetryObject);
-                    this.addMetaDataOptions(telemetryMetadata ? telemetryMetadata.values() : []);
+                    this.addMetaDataOptions(telemetryMetadata.values());
                 });
                 this.updateOperations();
             }

src/plugins/condition/components/TestData.vue

@@ -192,11 +192,7 @@ export default {
             this.telemetry.forEach((telemetryObject) => {
                 const id = this.openmct.objects.makeKeyString(telemetryObject.identifier);
                 let telemetryMetadata = this.openmct.telemetry.getMetadata(telemetryObject);
-                if (telemetryMetadata) {
-                    this.telemetryMetadataOptions[id] = telemetryMetadata.values().slice();
-                } else {
-                    this.telemetryMetadataOptions[id] = [];
-                }
+                this.telemetryMetadataOptions[id] = telemetryMetadata.values().slice();
             });
         },
         addTestInput(testInput) {

src/plugins/condition/criterion/AllTelemetryCriterion.js

@@ -177,7 +177,7 @@ export default class AllTelemetryCriterion extends TelemetryCriterion {
                 const timeSystem = this.openmct.time.timeSystem();
 
                 telemetryRequestsResults.forEach((results, index) => {
-                    const latestDatum = (Array.isArray(results) && results.length) ? results[results.length - 1] : {};
+                    const latestDatum = results.length ? results[results.length - 1] : {};
                     const datumId = keys[index];
                     const normalizedDatum = this.createNormalizedDatum(latestDatum, telemetryObjects[datumId]);
 

src/plugins/condition/criterion/TelemetryCriterion.js

@@ -167,11 +167,6 @@ export default class TelemetryCriterion extends EventEmitter {
                 id: this.id,
                 data: this.formatData(normalizedDatum)
             };
-        }).catch((error) => {
-            return {
-                id: this.id,
-                data: this.formatData()
-            };
         });
     }
 

src/plugins/condition/pluginSpec.js

@@ -27,7 +27,6 @@ import StylesView from "./components/inspector/StylesView.vue";
 import Vue from 'vue';
 import {getApplicableStylesForItem} from "./utils/styleUtils";
 import ConditionManager from "@/plugins/condition/ConditionManager";
-import StyleRuleManager from "./StyleRuleManager";
 
 describe('the plugin', function () {
     let conditionSetDefinition;
@@ -97,12 +96,8 @@ describe('the plugin', function () {
 
         mockListener = jasmine.createSpy('mockListener');
 
-        openmct.router.isNavigatedObject = jasmine.createSpy().and.returnValue(true);
-
         conditionSetDefinition.initialize(mockConditionSetDomainObject);
 
-        spyOn(openmct.objects, "save").and.returnValue(Promise.resolve(true));
-
         openmct.on('start', done);
         openmct.startHeadless();
     });
@@ -131,6 +126,21 @@ describe('the plugin', function () {
             expect(mockConditionSetDomainObject.composition instanceof Array).toBeTrue();
             expect(mockConditionSetDomainObject.composition.length).toEqual(0);
         });
+
+        it('provides a view', () => {
+            const testViewObject = {
+                id: "test-object",
+                type: "conditionSet",
+                configuration: {
+                    conditionCollection: []
+                }
+            };
+
+            const applicableViews = openmct.objectViews.get(testViewObject, []);
+            let conditionSetView = applicableViews.find((viewProvider) => viewProvider.key === 'conditionSet.view');
+            expect(conditionSetView).toBeDefined();
+        });
+
     });
 
     describe('the condition set usage for multiple display layout items', () => {
@@ -712,124 +722,4 @@ describe('the plugin', function () {
             expect(result[2]).toBeUndefined();
         });
     });
-
-    describe('canView of ConditionSetViewProvider', () => {
-        let conditionSetView;
-        const testViewObject = {
-            id: "test-object",
-            type: "conditionSet",
-            configuration: {
-                conditionCollection: []
-            }
-        };
-
-        beforeEach(() => {
-            const applicableViews = openmct.objectViews.get(testViewObject, []);
-            conditionSetView = applicableViews.find((viewProvider) => viewProvider.key === 'conditionSet.view');
-        });
-
-        it('provides a view', () => {
-            expect(conditionSetView).toBeDefined();
-        });
-
-        it('returns true for type `conditionSet` and is a navigated Object', () => {
-            openmct.router.isNavigatedObject = jasmine.createSpy().and.returnValue(true);
-
-            const isCanView = conditionSetView.canView(testViewObject, []);
-
-            expect(isCanView).toBe(true);
-        });
-
-        it('returns false for type `conditionSet` and is not a navigated Object', () => {
-            openmct.router.isNavigatedObject = jasmine.createSpy().and.returnValue(false);
-
-            const isCanView = conditionSetView.canView(testViewObject, []);
-
-            expect(isCanView).toBe(false);
-        });
-
-        it('returns false for type `notConditionSet` and is a navigated Object', () => {
-            openmct.router.isNavigatedObject = jasmine.createSpy().and.returnValue(true);
-            testViewObject.type = 'notConditionSet';
-            const isCanView = conditionSetView.canView(testViewObject, []);
-
-            expect(isCanView).toBe(false);
-        });
-    });
-
-    describe('The Style Rule Manager', () => {
-        it('should subscribe to the conditionSet after the editor saves', async () => {
-            const stylesObject = {
-                "styles": [
-                    {
-                        "conditionId": "a8bf7d1a-c1bb-4fc7-936a-62056a51b5cd",
-                        "style": {
-                            "backgroundColor": "#38761d",
-                            "border": "",
-                            "color": "#073763",
-                            "isStyleInvisible": ""
-                        }
-                    },
-                    {
-                        "conditionId": "0558fa77-9bdc-4142-9f9a-7a28fe95182e",
-                        "style": {
-                            "backgroundColor": "#980000",
-                            "border": "",
-                            "color": "#ff9900",
-                            "isStyleInvisible": ""
-                        }
-                    }
-                ],
-                "staticStyle": {
-                    "style": {
-                        "backgroundColor": "",
-                        "border": "",
-                        "color": ""
-                    }
-                },
-                "selectedConditionId": "0558fa77-9bdc-4142-9f9a-7a28fe95182e",
-                "defaultConditionId": "0558fa77-9bdc-4142-9f9a-7a28fe95182e",
-                "conditionSetIdentifier": {
-                    "namespace": "",
-                    "key": "035c589c-d98f-429e-8b89-d76bd8d22b29"
-                }
-            };
-            openmct.$injector = jasmine.createSpyObj('$injector', ['get']);
-            // const mockTransactionService = jasmine.createSpyObj(
-            //     'transactionService',
-            //     ['commit']
-            // );
-            openmct.telemetry = jasmine.createSpyObj('telemetry', ['isTelemetryObject', "subscribe", "getMetadata", "getValueFormatter", "request"]);
-            openmct.telemetry.isTelemetryObject.and.returnValue(true);
-            openmct.telemetry.subscribe.and.returnValue(function () {});
-            openmct.telemetry.getValueFormatter.and.returnValue({
-                parse: function (value) {
-                    return value;
-                }
-            });
-            openmct.telemetry.getMetadata.and.returnValue(testTelemetryObject.telemetry);
-            openmct.telemetry.request.and.returnValue(Promise.resolve([]));
-
-            // mockTransactionService.commit = async () => {};
-            const mockIdentifierService = jasmine.createSpyObj(
-                'identifierService',
-                ['parse']
-            );
-            mockIdentifierService.parse.and.returnValue({
-                getSpace: () => {
-                    return '';
-                }
-            });
-
-            openmct.$injector = jasmine.createSpyObj('$injector', ['get']);
-            openmct.$injector.get.withArgs('identifierService').and.returnValue(mockIdentifierService);
-            // .withArgs('transactionService').and.returnValue(mockTransactionService);
-
-            const styleRuleManger = new StyleRuleManager(stylesObject, openmct, null, true);
-            spyOn(styleRuleManger, 'subscribeToConditionSet');
-            openmct.editor.edit();
-            await openmct.editor.save();
-            expect(styleRuleManger.subscribeToConditionSet).toHaveBeenCalledTimes(1);
-        });
-    });
 });

src/plugins/conditionWidget/components/ConditionWidget.vue

@@ -23,7 +23,7 @@
 <template>
 <component :is="urlDefined ? 'a' : 'span'"
            class="c-condition-widget u-style-receiver js-style-receiver"
-           :href="url"
+           :href="urlDefined ? internalDomainObject.url : null"
 >
     <div class="c-condition-widget__label">
         {{ internalDomainObject.label }}
@@ -32,8 +32,6 @@
 </template>
 
 <script>
-const sanitizeUrl = require("@braintree/sanitize-url").sanitizeUrl;
-
 export default {
     inject: ['openmct', 'domainObject'],
     data: function () {
@@ -44,9 +42,6 @@ export default {
     computed: {
         urlDefined() {
             return this.internalDomainObject.url && this.internalDomainObject.url.length > 0;
-        },
-        url() {
-            return this.urlDefined ? sanitizeUrl(this.internalDomainObject.url) : null;
         }
     },
     mounted() {

src/plugins/filters/components/FiltersView.vue

@@ -101,7 +101,7 @@ export default {
         addChildren(domainObject) {
             let keyString = this.openmct.objects.makeKeyString(domainObject.identifier);
             let metadata = this.openmct.telemetry.getMetadata(domainObject);
-            let metadataWithFilters = metadata ? metadata.valueMetadatas.filter(value => value.filters) : [];
+            let metadataWithFilters = metadata.valueMetadatas.filter(value => value.filters);
             let hasFiltersWithKeyString = this.persistedFilters[keyString] !== undefined;
             let mutateFilters = false;
             let childObject = {

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

@@ -3,7 +3,6 @@
     display: flex;
     flex-flow: column nowrap;
     overflow: auto;
-    height: 100%;
 
     &__item {
         flex: 0 0 auto;

src/plugins/hyperlink/HyperlinkLayout.vue

@@ -27,7 +27,7 @@
        'c-hyperlink--button' : isButton
    }"
    :target="domainObject.linkTarget"
-   :href="url"
+   :href="domainObject.url"
 >
     <span class="c-hyperlink__label">{{ domainObject.displayText }}</span>
 </a>
@@ -35,7 +35,6 @@
 </template>
 
 <script>
-const sanitizeUrl = require("@braintree/sanitize-url").sanitizeUrl;
 
 export default {
     inject: ['domainObject'],
@@ -46,9 +45,6 @@ export default {
             }
 
             return true;
-        },
-        url() {
-            return sanitizeUrl(this.domainObject.url);
         }
     }
 };

src/plugins/imagery/ImageryTimestripViewProvider.js

@@ -66,10 +66,6 @@ export default function ImageryTimestripViewProvider(openmct) {
                 destroy: function () {
                     component.$destroy();
                     component = undefined;
-                },
-
-                getComponent() {
-                    return component;
                 }
             };
         }

src/plugins/imagery/ImageryView.js

@@ -10,14 +10,7 @@ export default class ImageryView {
         this.component = undefined;
     }
 
-    show(element, isEditing, viewOptions) {
-        let alternateObjectPath;
-        let indexForFocusedImage;
-        if (viewOptions) {
-            indexForFocusedImage = viewOptions.indexForFocusedImage;
-            alternateObjectPath = viewOptions.objectPath;
-        }
-
+    show(element) {
         this.component = new Vue({
             el: element,
             components: {
@@ -26,15 +19,10 @@ export default class ImageryView {
             provide: {
                 openmct: this.openmct,
                 domainObject: this.domainObject,
-                objectPath: alternateObjectPath || this.objectPath,
+                objectPath: this.objectPath,
                 currentView: this
             },
-            data() {
-                return {
-                    indexForFocusedImage
-                };
-            },
-            template: '<imagery-view :index-for-focused-image="indexForFocusedImage" ref="ImageryContainer"></imagery-view>'
+            template: '<imagery-view ref="ImageryContainer"></imagery-view>'
 
         });
     }

src/plugins/imagery/components/ImageryTimeView.vue

@@ -41,12 +41,7 @@ import _ from "lodash";
 
 const PADDING = 1;
 const ROW_HEIGHT = 100;
-const IMAGE_SIZE = 85;
-const IMAGE_WIDTH_THRESHOLD = 25;
-const CONTAINER_CLASS = 'c-imagery-tsv-container';
-const NO_ITEMS_CLASS = 'c-imagery-tsv__no-items';
-const IMAGE_WRAPPER_CLASS = 'c-imagery-tsv__image-wrapper';
-const ID_PREFIX = 'wrapper-';
+const IMAGE_WIDTH_THRESHOLD = 40;
 
 export default {
     mixins: [imageryData],
@@ -83,13 +78,11 @@ export default {
         this.canvasContext = this.canvas.getContext('2d');
         this.setDimensions();
 
-        this.setScaleAndPlotImagery = this.setScaleAndPlotImagery.bind(this);
-        this.updateViewBounds = this.updateViewBounds.bind(this);
-        this.setTimeContext = this.setTimeContext.bind(this);
-        this.setTimeContext();
-
         this.updateViewBounds();
 
+        this.openmct.time.on("timeSystem", this.setScaleAndPlotImagery);
+        this.openmct.time.on("bounds", this.updateViewBounds);
+
         this.resize = _.debounce(this.resize, 400);
         this.imageryStripResizeObserver = new ResizeObserver(this.resize);
         this.imageryStripResizeObserver.observe(this.$refs.imagery);
@@ -97,36 +90,25 @@ export default {
         this.unlisten = this.openmct.objects.observe(this.domainObject, '*', this.observeForChanges);
     },
     beforeDestroy() {
+        if (this.unsubscribe) {
+            this.unsubscribe();
+            delete this.unsubscribe;
+        }
+
         if (this.imageryStripResizeObserver) {
             this.imageryStripResizeObserver.disconnect();
         }
 
-        this.stopFollowingTimeContext();
+        this.openmct.time.off("timeSystem", this.setScaleAndPlotImagery);
+        this.openmct.time.off("bounds", this.updateViewBounds);
         if (this.unlisten) {
             this.unlisten();
         }
     },
     methods: {
-        setTimeContext() {
-            this.stopFollowingTimeContext();
-            this.timeContext = this.openmct.time.getContextForView(this.objectPath);
-            this.timeContext.on("timeSystem", this.setScaleAndPlotImagery);
-            this.timeContext.on("bounds", this.updateViewBounds);
-            this.timeContext.on("timeContext", this.setTimeContext);
-        },
-        stopFollowingTimeContext() {
-            if (this.timeContext) {
-                this.timeContext.off("timeSystem", this.setScaleAndPlotImagery);
-                this.timeContext.off("bounds", this.updateViewBounds);
-                this.timeContext.off("timeContext", this.setTimeContext);
-            }
-        },
         expand(index) {
             const path = this.objectPath[0];
-            this.previewAction.invoke([path], {
-                indexForFocusedImage: index,
-                objectPath: this.objectPath
-            });
+            this.previewAction.invoke([path]);
         },
         observeForChanges(mutatedObject) {
             this.updateViewBounds();
@@ -152,10 +134,14 @@ export default {
             return clientWidth;
         },
         updateViewBounds(bounds, isTick) {
-            this.viewBounds = this.timeContext.bounds();
+            this.viewBounds = this.openmct.time.bounds();
+            //Add a 50% padding to the end bounds to look ahead
+            let timespan = (this.viewBounds.end - this.viewBounds.start);
+            let padding = timespan / 2;
+            this.viewBounds.end = this.viewBounds.end + padding;
 
             if (this.timeSystem === undefined) {
-                this.timeSystem = this.timeContext.timeSystem();
+                this.timeSystem = this.openmct.time.timeSystem();
             }
 
             this.setScaleAndPlotImagery(this.timeSystem, !isTick);
@@ -186,18 +172,18 @@ export default {
         },
         clearPreviousImagery(clearAllImagery) {
             //TODO: Only clear items that are out of bounds
-            let noItemsEl = this.$el.querySelectorAll(`.${NO_ITEMS_CLASS}`);
+            let noItemsEl = this.$el.querySelectorAll(".c-imagery-tsv__no-items");
             noItemsEl.forEach(item => {
                 item.remove();
             });
-            let imagery = this.$el.querySelectorAll(`.${IMAGE_WRAPPER_CLASS}`);
+            let imagery = this.$el.querySelectorAll(".c-imagery-tsv__image-wrapper");
             imagery.forEach(item => {
                 if (clearAllImagery) {
                     item.remove();
                 } else {
-                    const id = item.getAttributeNS(null, 'id');
+                    const id = this.getNSAttributesForElement(item, 'id');
                     if (id) {
-                        const timestamp = id.replace(ID_PREFIX, '');
+                        const timestamp = id.replace('id-', '');
                         if (!this.isImageryInBounds({
                             time: timestamp
                         })) {
@@ -219,7 +205,7 @@ export default {
             }
 
             if (timeSystem === undefined) {
-                timeSystem = this.timeContext.timeSystem();
+                timeSystem = this.openmct.time.timeSystem();
             }
 
             if (timeSystem.isUTCBased) {
@@ -237,17 +223,19 @@ export default {
             this.xScale.range([PADDING, this.width - PADDING * 2]);
         },
         isImageryInBounds(imageObj) {
-            return (imageObj.time <= this.viewBounds.end) && (imageObj.time >= this.viewBounds.start);
+            return (imageObj.time < this.viewBounds.end) && (imageObj.time > this.viewBounds.start);
         },
         getImageryContainer() {
-            let containerHeight = 100;
-            let containerWidth = this.imageHistory.length ? this.width : 200;
-            let imageryContainer;
+            let svgHeight = 100;
+            let svgWidth = this.imageHistory.length ? this.width : 200;
+            let groupSVG;
 
-            let existingContainer = this.$el.querySelector(`.${CONTAINER_CLASS}`);
-            if (existingContainer) {
-                imageryContainer = existingContainer;
-                imageryContainer.style.maxWidth = `${containerWidth}px`;
+            let existingSVG = this.$el.querySelector(".c-imagery-tsv__contents svg");
+            if (existingSVG) {
+                groupSVG = existingSVG;
+                this.setNSAttributesForElement(groupSVG, {
+                    width: svgWidth
+                });
             } else {
                 let component = new Vue({
                     components: {
@@ -258,20 +246,26 @@ export default {
                     },
                     data() {
                         return {
-                            isNested: true
+                            isNested: true,
+                            height: svgHeight,
+                            width: svgWidth
                         };
                     },
-                    template: `<swim-lane :is-nested="isNested" :hide-label="true"><template slot="object"><div class="c-imagery-tsv-container"></div></template></swim-lane>`
+                    template: `<swim-lane :is-nested="isNested" :hide-label="true"><template slot="object"><svg class="c-imagery-tsv-container" :height="height" :width="width"></svg></template></swim-lane>`
                 });
 
                 this.$refs.imageryHolder.appendChild(component.$mount().$el);
 
-                imageryContainer = component.$el.querySelector(`.${CONTAINER_CLASS}`);
-                imageryContainer.style.maxWidth = `${containerWidth}px`;
-                imageryContainer.style.height = `${containerHeight}px`;
+                groupSVG = component.$el.querySelector('svg');
+
+                groupSVG.addEventListener('mouseout', (event) => {
+                    if (event.target.nodeName === 'svg' || event.target.nodeName === 'use') {
+                        this.removeFromForeground();
+                    }
+                });
             }
 
-            return imageryContainer;
+            return groupSVG;
         },
         isImageryWidthAcceptable() {
             // We're calculating if there is enough space between images to show the thumbnails.
@@ -287,123 +281,194 @@ export default {
             return imageContainerWidth < IMAGE_WIDTH_THRESHOLD;
         },
         drawImagery() {
-            let imageryContainer = this.getImageryContainer();
+            let groupSVG = this.getImageryContainer();
             const showImagePlaceholders = this.isImageryWidthAcceptable();
-            let index = 0;
+
             if (this.imageHistory.length) {
-                this.imageHistory.forEach((currentImageObject) => {
+                this.imageHistory.forEach((currentImageObject, index) => {
                     if (this.isImageryInBounds(currentImageObject)) {
-                        this.plotImagery(currentImageObject, showImagePlaceholders, imageryContainer, index);
-                        index = index + 1;
+                        this.plotImagery(currentImageObject, showImagePlaceholders, groupSVG, index);
                     }
                 });
             } else {
-                this.plotNoItems(imageryContainer);
+                this.plotNoItems(groupSVG);
             }
         },
-        plotNoItems(containerElement) {
-            let textElement = document.createElement('text');
-            textElement.classList.add(NO_ITEMS_CLASS);
+        plotNoItems(svgElement) {
+            let textElement = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+            this.setNSAttributesForElement(textElement, {
+                x: "10",
+                y: "20",
+                class: "c-imagery-tsv__no-items"
+            });
             textElement.innerHTML = 'No images within timeframe';
 
-            containerElement.appendChild(textElement);
+            svgElement.appendChild(textElement);
         },
         setNSAttributesForElement(element, attributes) {
-            if (!element) {
-                return;
-            }
-
             Object.keys(attributes).forEach((key) => {
-                element.setAttributeNS(null, key, attributes[key]);
+                if (key === 'url') {
+                    element.setAttributeNS('http://www.w3.org/1999/xlink', 'href', attributes[key]);
+                } else {
+                    element.setAttributeNS(null, key, attributes[key]);
+                }
             });
         },
-        setStyles(element, styles) {
-            if (!element) {
-                return;
-            }
-
-            Object.keys(styles).forEach((key) => {
-                element.style[key] = styles[key];
-            });
+        getNSAttributesForElement(element, attribute) {
+            return element.getAttributeNS(null, attribute);
         },
         getImageWrapper(item) {
-            const id = `${ID_PREFIX}${item.time}`;
+            const id = `id-${item.time}`;
 
-            return this.$el.querySelector(`.c-imagery-tsv__contents div[id=${id}]`);
+            return this.$el.querySelector(`.c-imagery-tsv__contents g[id=${id}]`);
         },
-        plotImagery(item, showImagePlaceholders, containerElement, index) {
+        plotImagery(item, showImagePlaceholders, svgElement, index) {
+            //TODO: Placeholder image
             let existingImageWrapper = this.getImageWrapper(item);
-            //imageWrapper wraps the vertical tick and the image
+            //imageWrapper wraps the vertical tick rect and the image
             if (existingImageWrapper) {
                 this.updateExistingImageWrapper(existingImageWrapper, item, showImagePlaceholders);
             } else {
-                let imageWrapper = this.createImageWrapper(index, item, showImagePlaceholders);
-                containerElement.appendChild(imageWrapper);
-            }
-        },
-        setImageDisplay(imageElement, showImagePlaceholders) {
-            if (showImagePlaceholders) {
-                imageElement.style.display = 'none';
-            } else {
-                imageElement.style.display = 'block';
+                let imageWrapper = this.createImageWrapper(index, item, showImagePlaceholders, svgElement);
+                svgElement.appendChild(imageWrapper);
             }
         },
         updateExistingImageWrapper(existingImageWrapper, item, showImagePlaceholders) {
-            //Update the x co-ordinates of the image wrapper and the url of image
+            //Update the x co-ordinates of the handle and image elements and the url of image
             //this is to avoid tearing down all elements completely and re-drawing them
             this.setNSAttributesForElement(existingImageWrapper, {
-                'data-show-image-placeholders': showImagePlaceholders
+                showImagePlaceholders
+            });
+            let imageTickElement = existingImageWrapper.querySelector('rect.c-imagery-tsv__image-handle');
+            this.setNSAttributesForElement(imageTickElement, {
+                x: this.xScale(item.time)
             });
-            existingImageWrapper.style.left = `${this.xScale(item.time)}px`;
 
-            let imageElement = existingImageWrapper.querySelector('img');
-            this.setNSAttributesForElement(imageElement, {
-                src: item.url
+            let imageRect = existingImageWrapper.querySelector('rect.c-imagery-tsv__image-placeholder');
+            this.setNSAttributesForElement(imageRect, {
+                x: this.xScale(item.time) + 2
+            });
+
+            let imageElement = existingImageWrapper.querySelector('image');
+            const selector = `href*=${existingImageWrapper.id}`;
+            let hoverEl = this.$el.querySelector(`.c-imagery-tsv__contents use[${selector}]`);
+            const hideImageUrl = (showImagePlaceholders && !hoverEl);
+            this.setNSAttributesForElement(imageElement, {
+                x: this.xScale(item.time) + 2,
+                url: hideImageUrl ? '' : item.url
             });
-            this.setImageDisplay(imageElement, showImagePlaceholders);
         },
-        createImageWrapper(index, item, showImagePlaceholders) {
-            const id = `${ID_PREFIX}${item.time}`;
-            let imageWrapper = document.createElement('div');
-            imageWrapper.classList.add(IMAGE_WRAPPER_CLASS);
-            imageWrapper.style.left = `${this.xScale(item.time)}px`;
+        createImageWrapper(index, item, showImagePlaceholders, svgElement) {
+            const id = `id-${item.time}`;
+            const imgSize = String(ROW_HEIGHT - 15);
+            let imageWrapper = document.createElementNS('http://www.w3.org/2000/svg', 'g');
             this.setNSAttributesForElement(imageWrapper, {
                 id,
-                'data-show-image-placeholders': showImagePlaceholders
+                class: 'c-imagery-tsv__image-wrapper',
+                showImagePlaceholders
+            });
+            //create image tick indicator
+            let imageTickElement = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+            this.setNSAttributesForElement(imageTickElement, {
+                class: 'c-imagery-tsv__image-handle',
+                x: this.xScale(item.time),
+                y: 5,
+                rx: 0,
+                width: 2,
+                height: String(ROW_HEIGHT - 10)
             });
-            //create image vertical tick indicator
-            let imageTickElement = document.createElement('div');
-            imageTickElement.classList.add('c-imagery-tsv__image-handle');
-            imageTickElement.style.width = '2px';
-            imageTickElement.style.height = `${String(ROW_HEIGHT - 10)}px`;
             imageWrapper.appendChild(imageTickElement);
 
-            //create placeholder - this will also hold the actual image
-            let imagePlaceholder = document.createElement('div');
-            imagePlaceholder.classList.add('c-imagery-tsv__image-placeholder');
-            imagePlaceholder.style.width = `${IMAGE_SIZE}px`;
-            imagePlaceholder.style.height = `${IMAGE_SIZE}px`;
-            imageWrapper.appendChild(imagePlaceholder);
-
-            //create image element
-            let imageElement = document.createElement('img');
-            this.setNSAttributesForElement(imageElement, {
-                src: item.url
+            let imageRect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+            this.setNSAttributesForElement(imageRect, {
+                class: 'c-imagery-tsv__image-placeholder',
+                x: this.xScale(item.time) + 2,
+                y: 10,
+                rx: 0,
+                width: imgSize,
+                height: imgSize,
+                mask: `#image-${item.time}`
             });
-            imageElement.style.width = `${IMAGE_SIZE}px`;
-            imageElement.style.height = `${IMAGE_SIZE}px`;
-            this.setImageDisplay(imageElement, showImagePlaceholders);
+            imageWrapper.appendChild(imageRect);
 
-            //handle mousedown event to show the image in a large view
-            imageWrapper.addEventListener('mousedown', (e) => {
+            let imageElement = document.createElementNS('http://www.w3.org/2000/svg', 'image');
+            this.setNSAttributesForElement(imageElement, {
+                id: `image-${item.time}`,
+                x: this.xScale(item.time) + 2,
+                y: 10,
+                rx: 0,
+                width: imgSize,
+                height: imgSize,
+                url: showImagePlaceholders ? '' : item.url
+            });
+            imageWrapper.appendChild(imageElement);
+
+            //TODO: Don't add the hover listener if the width is too small
+            imageWrapper.addEventListener('mouseover', this.bringToForeground.bind(this, svgElement, imageWrapper, index, item.url));
+
+            return imageWrapper;
+        },
+        bringToForeground(svgElement, imageWrapper, index, url, event) {
+            const selector = `href*=${imageWrapper.id}`;
+            let hoverEls = this.$el.querySelectorAll(`.c-imagery-tsv__contents use:not([${selector}])`);
+            if (hoverEls.length > 0) {
+                this.removeFromForeground(hoverEls);
+            }
+
+            hoverEls = this.$el.querySelectorAll(`.c-imagery-tsv__contents use[${selector}]`);
+            if (hoverEls.length) {
+
+                return;
+            }
+
+            let imageElement = imageWrapper.querySelector('image');
+            this.setNSAttributesForElement(imageElement, {
+                url: url,
+                fill: 'none'
+            });
+            let hoverElement = document.createElementNS('http://www.w3.org/2000/svg', 'use');
+            this.setNSAttributesForElement(hoverElement, {
+                class: 'image-highlight',
+                x: 0,
+                href: `#${imageWrapper.id}`
+            });
+            this.setNSAttributesForElement(imageWrapper, {
+                class: 'c-imagery-tsv__image-wrapper is-hovered'
+            });
+            // We're using mousedown here and not 'click' because 'click' doesn't seem to be triggered reliably
+            hoverElement.addEventListener('mousedown', (e) => {
                 if (e.button === 0) {
                     this.expand(index);
                 }
             });
 
-            imagePlaceholder.appendChild(imageElement);
+            svgElement.appendChild(hoverElement);
 
-            return imageWrapper;
+        },
+        removeFromForeground(items) {
+            let hoverEls;
+            if (items) {
+                hoverEls = items;
+            } else {
+                hoverEls = this.$el.querySelectorAll(".c-imagery-tsv__contents use");
+            }
+
+            hoverEls.forEach(item => {
+                let selector = `id*=${this.getNSAttributesForElement(item, 'href').replace('#', '')}`;
+                let imageWrapper = this.$el.querySelector(`.c-imagery-tsv__contents g[${selector}]`);
+                this.setNSAttributesForElement(imageWrapper, {
+                    class: 'c-imagery-tsv__image-wrapper'
+                });
+                let showImagePlaceholders = this.getNSAttributesForElement(imageWrapper, 'showImagePlaceholders');
+                if (showImagePlaceholders === 'true') {
+                    let imageElement = imageWrapper.querySelector('image');
+                    this.setNSAttributesForElement(imageElement, {
+                        url: ''
+                    });
+                }
+
+                item.remove();
+            });
         }
     }
 };

src/plugins/imagery/components/ImageryView.vue

@@ -57,7 +57,7 @@
         </div>
         <div ref="imageBG"
              class="c-imagery__main-image__bg"
-             :class="{'paused unnsynced': isPaused && !isFixed,'stale':false }"
+             :class="{'paused unnsynced': isPaused,'stale':false }"
              @click="expand"
         >
             <div class="image-wrapper"
@@ -122,7 +122,6 @@
             </div>
             <div class="h-local-controls">
                 <button
-                    v-if="!isFixed"
                     class="c-button icon-pause pause-play"
                     :class="{'is-paused': isPaused}"
                     @click="paused(!isPaused, 'button')"
@@ -132,7 +131,7 @@
     </div>
     <div class="c-imagery__thumbs-wrapper"
          :class="[
-             { 'is-paused': isPaused && !isFixed },
+             { 'is-paused': isPaused },
              { 'is-autoscroll-off': !resizingWindow && !autoScroll && !isPaused }
          ]"
     >
@@ -200,14 +199,6 @@ export default {
     },
     mixins: [imageryData],
     inject: ['openmct', 'domainObject', 'objectPath', 'currentView'],
-    props: {
-        indexForFocusedImage: {
-            type: Number,
-            default() {
-                return undefined;
-            }
-        }
-    },
     data() {
         let timeSystem = this.openmct.time.timeSystem();
         this.metadata = {};
@@ -235,8 +226,7 @@ export default {
             imageContainerWidth: undefined,
             imageContainerHeight: undefined,
             lockCompass: true,
-            resizingWindow: false,
-            timeContext: undefined
+            resizingWindow: false
         };
     },
     computed: {
@@ -268,14 +258,7 @@ export default {
             return age < cutoff && !this.refreshCSS;
         },
         canTrackDuration() {
-            let hasClock;
-            if (this.timeContext) {
-                hasClock = this.timeContext.clock();
-            } else {
-                hasClock = this.openmct.time.clock();
-            }
-
-            return hasClock && this.timeSystem.isUTCBased;
+            return this.openmct.time.clock() && this.timeSystem.isUTCBased;
         },
         isNextDisabled() {
             let disabled = false;
@@ -396,28 +379,11 @@ export default {
             }
 
             return sizedImageDimensions;
-        },
-        isFixed() {
-            let clock;
-            if (this.timeContext) {
-                clock = this.timeContext.clock();
-            } else {
-                clock = this.openmct.time.clock();
-            }
-
-            return clock === undefined;
         }
     },
     watch: {
         imageHistorySize(newSize, oldSize) {
-            let imageIndex;
-            if (this.indexForFocusedImage !== undefined) {
-                imageIndex = this.initFocusedImageIndex;
-            } else {
-                imageIndex = newSize - 1;
-            }
-
-            this.setFocusedImage(imageIndex, false);
+            this.setFocusedImage(newSize - 1, false);
             this.scrollToRight();
         },
         focusedImageIndex() {
@@ -428,14 +394,9 @@ export default {
         }
     },
     async mounted() {
-        //We only need to use this till the user focuses an image manually
-        if (this.indexForFocusedImage !== undefined) {
-            this.initFocusedImageIndex = this.indexForFocusedImage;
-            this.isPaused = true;
-        }
-
-        this.setTimeContext = this.setTimeContext.bind(this);
-        this.setTimeContext();
+        //listen
+        this.openmct.time.on('timeSystem', this.trackDuration);
+        this.openmct.time.on('clock', this.trackDuration);
 
         // related telemetry keys
         this.spacecraftPositionKeys = ['positionX', 'positionY', 'positionZ'];
@@ -471,7 +432,8 @@ export default {
 
     },
     beforeDestroy() {
-        this.stopFollowingTimeContext();
+        this.openmct.time.off('timeSystem', this.trackDuration);
+        this.openmct.time.off('clock', this.trackDuration);
 
         if (this.thumbWrapperResizeObserver) {
             this.thumbWrapperResizeObserver.disconnect();
@@ -495,21 +457,6 @@ export default {
         }
     },
     methods: {
-        setTimeContext() {
-            this.stopFollowingTimeContext();
-            this.timeContext = this.openmct.time.getContextForView(this.objectPath);
-            //listen
-            this.timeContext.on('timeSystem', this.trackDuration);
-            this.timeContext.on('clock', this.trackDuration);
-            this.timeContext.on("timeContext", this.setTimeContext);
-        },
-        stopFollowingTimeContext() {
-            if (this.timeContext) {
-                this.timeContext.off("timeSystem", this.trackDuration);
-                this.timeContext.off("clock", this.trackDuration);
-                this.timeContext.off("timeContext", this.setTimeContext);
-            }
-        },
         expand() {
             const actionCollection = this.openmct.actions.getActionsCollection(this.objectPath, this.currentView);
             const visibleActions = actionCollection.getVisibleActions();
@@ -671,12 +618,7 @@ export default {
             });
         },
         setFocusedImage(index, thumbnailClick = false) {
-            if (thumbnailClick) {
-                //We use the props till the user changes what they want to see
-                this.initFocusedImageIndex = undefined;
-            }
-
-            if (this.isPaused && !thumbnailClick && this.initFocusedImageIndex === undefined) {
+            if (this.isPaused && !thumbnailClick) {
                 this.nextImageIndex = index;
                 //this could happen if bounds changes
                 if (this.focusedImageIndex > this.imageHistory.length - 1) {
@@ -707,12 +649,8 @@ export default {
             window.clearInterval(this.durationTracker);
         },
         updateDuration() {
-            let currentTime = this.timeContext.clock() && this.timeContext.clock().currentValue();
-            if (currentTime === undefined) {
-                this.numericDuration = currentTime;
-            } else {
-                this.numericDuration = currentTime - this.parsedSelectedTime;
-            }
+            let currentTime = this.openmct.time.clock() && this.openmct.time.clock().currentValue();
+            this.numericDuration = currentTime - this.parsedSelectedTime;
         },
         resetAgeCSS() {
             this.refreshCSS = true;

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

@@ -315,31 +315,13 @@
 
 /*************************************** IMAGERY IN TIMESTRIP VIEWS */
 .c-imagery-tsv {
-    div.c-imagery-tsv__image-wrapper {
+    g.c-imagery-tsv__image-wrapper {
         cursor: pointer;
-        position: absolute;
-        top: 0;
-        display: flex;
-        z-index: 1;
-        margin-top: 5px;
-
-        img {
-            align-self: flex-end;
-        }
-        &:hover {
-            z-index: 2;
 
+        &.is-hovered {
             filter: brightness(1) contrast(1) !important;
             [class*='__image-handle'] {
-                background-color: $colorBodyFg;
-            }
-
-            //[class*='__image-placeholder'] {
-            //    display: none;
-            //}
-
-            img {
-                display: block !important;
+                fill: $colorBodyFg;
             }
         }
     }
@@ -349,16 +331,14 @@
     }
 
     &__image-handle {
-        background-color: rgba($colorBodyFg, 0.5);
+        fill: rgba($colorBodyFg, 0.5);
     }
 
     &__image-placeholder {
-        background-color: pushBack($colorBodyBg, 0.3);
-        display: block;
-        align-self: flex-end;
+        fill: pushBack($colorBodyBg, 0.3);
     }
 
-    &:hover div.c-imagery-tsv__image-wrapper {
+    &:hover g.c-imagery-tsv__image-wrapper {
         // TODO CH: convert to theme constants
         filter: brightness(0.5) contrast(0.7);
     }

src/plugins/imagery/mixins/imageryData.js

@@ -26,10 +26,8 @@ export default {
     inject: ['openmct', 'domainObject', 'objectPath'],
     mounted() {
         // listen
-        this.boundsChange = this.boundsChange.bind(this);
-        this.timeSystemChange = this.timeSystemChange.bind(this);
-        this.setDataTimeContext = this.setDataTimeContext.bind(this);
-        this.setDataTimeContext();
+        this.openmct.time.on('bounds', this.boundsChange);
+        this.openmct.time.on('timeSystem', this.timeSystemChange);
 
         // set
         this.keyString = this.openmct.objects.makeKeyString(this.domainObject.identifier);
@@ -53,24 +51,10 @@ export default {
             delete this.unsubscribe;
         }
 
-        this.stopFollowingDataTimeContext();
+        this.openmct.time.off('bounds', this.boundsChange);
+        this.openmct.time.off('timeSystem', this.timeSystemChange);
     },
     methods: {
-        setDataTimeContext() {
-            this.stopFollowingDataTimeContext();
-            this.timeContext = this.openmct.time.getContextForView(this.objectPath);
-            this.timeContext.on('bounds', this.boundsChange);
-            this.boundsChange(this.timeContext.bounds());
-            this.timeContext.on('timeSystem', this.timeSystemChange);
-            this.timeContext.on("timeContext", this.setDataTimeContext);
-        },
-        stopFollowingDataTimeContext() {
-            if (this.timeContext) {
-                this.timeContext.off('bounds', this.boundsChange);
-                this.timeContext.off('timeSystem', this.timeSystemChange);
-                this.timeContext.off("timeContext", this.setDataTimeContext);
-            }
-        },
         datumIsNotValid(datum) {
             if (this.imageHistory.length === 0) {
                 return false;
@@ -127,7 +111,7 @@ export default {
             }
         },
         async requestHistory() {
-            let bounds = this.timeContext.bounds();
+            let bounds = this.openmct.time.bounds();
             this.requestCount++;
             const requestId = this.requestCount;
             this.imageHistory = [];
@@ -148,7 +132,7 @@ export default {
             }
         },
         timeSystemChange() {
-            this.timeSystem = this.timeContext.timeSystem();
+            this.timeSystem = this.openmct.time.timeSystem();
             this.timeKey = this.timeSystem.key;
             this.timeFormatter = this.getFormatter(this.timeKey);
             this.durationFormatter = this.getFormatter(this.timeSystem.durationFormat || DEFAULT_DURATION_FORMATTER);
@@ -157,7 +141,7 @@ export default {
             this.unsubscribe = this.openmct.telemetry
                 .subscribe(this.domainObject, (datum) => {
                     let parsedTimestamp = this.parseTime(datum);
-                    let bounds = this.timeContext.bounds();
+                    let bounds = this.openmct.time.bounds();
 
                     if (parsedTimestamp >= bounds.start && parsedTimestamp <= bounds.end) {
                         let image = this.normalizeDatum(datum);
@@ -175,7 +159,7 @@ export default {
             let image = { ...datum };
             image.formattedTime = this.formatTime(datum);
             image.url = this.formatImageUrl(datum);
-            image.time = this.parseTime(image.formattedTime);
+            image.time = datum[this.timeKey];
             image.imageDownloadName = this.getImageDownloadName(datum);
 
             return image;

src/plugins/imagery/pluginSpec.js

@@ -22,7 +22,6 @@
 
 import Vue from 'vue';
 import {
-    createMouseEvent,
     createOpenMct,
     resetApplicationState,
     simulateKeyEvent
@@ -33,6 +32,19 @@ const TEN_MINUTES = ONE_MINUTE * 10;
 const MAIN_IMAGE_CLASS = '.js-imageryView-image';
 const NEW_IMAGE_CLASS = '.c-imagery__age.c-imagery--new';
 const REFRESH_CSS_MS = 500;
+// const TOLERANCE = 0.50;
+
+// function comparisonFunction(valueOne, valueTwo) {
+//     let larger = valueOne;
+//     let smaller = valueTwo;
+//
+//     if (larger < smaller) {
+//         larger = valueTwo;
+//         smaller = valueOne;
+//     }
+//
+//     return (larger - smaller) < TOLERANCE;
+// }
 
 function getImageInfo(doc) {
     let imageElement = doc.querySelectorAll(MAIN_IMAGE_CLASS)[0];
@@ -78,13 +90,11 @@ describe("The Imagery View Layouts", () => {
     const START = Date.now();
     const COUNT = 10;
 
-    // let resolveFunction;
+    let resolveFunction;
     let originalRouterPath;
-    let telemetryPromise;
-    let telemetryPromiseResolve;
-    let cleanupFirst;
 
     let openmct;
+    let appHolder;
     let parent;
     let child;
     let imageTelemetry = generateTelemetry(START - TEN_MINUTES, COUNT);
@@ -188,63 +198,44 @@ describe("The Imagery View Layouts", () => {
 
     // this setups up the app
     beforeEach((done) => {
-        cleanupFirst = [];
+        appHolder = document.createElement('div');
+        appHolder.style.width = '640px';
+        appHolder.style.height = '480px';
 
         openmct = createOpenMct();
-        openmct.time.timeSystem('utc', {
-            start: START - (5 * ONE_MINUTE),
-            end: START + (5 * ONE_MINUTE)
-        });
 
-        telemetryPromise = new Promise((resolve) => {
-            telemetryPromiseResolve = resolve;
-        });
-
-        spyOn(openmct.telemetry, 'request').and.callFake(() => {
-            telemetryPromiseResolve(imageTelemetry);
-
-            return telemetryPromise;
-        });
+        openmct.install(openmct.plugins.MyItems());
+        openmct.install(openmct.plugins.LocalTimeSystem());
+        openmct.install(openmct.plugins.UTCTimeSystem());
 
         parent = document.createElement('div');
-        parent.style.width = '640px';
-        parent.style.height = '480px';
-
         child = document.createElement('div');
-        child.style.width = '640px';
-        child.style.height = '480px';
-
         parent.appendChild(child);
-        document.body.appendChild(parent);
+
+        // document.querySelector('body').append(parent);
 
         spyOn(window, 'ResizeObserver').and.returnValue({
             observe() {},
             disconnect() {}
         });
 
-        //spyOn(openmct.telemetry, 'request').and.returnValue(Promise.resolve([]));
+        spyOn(openmct.telemetry, 'request').and.returnValue(Promise.resolve([]));
         spyOn(openmct.objects, 'get').and.returnValue(Promise.resolve(imageryObject));
 
         originalRouterPath = openmct.router.path;
 
         openmct.on('start', done);
-        openmct.startHeadless();
+        openmct.start(appHolder);
     });
 
-    afterEach((done) => {
+    afterEach(() => {
+        openmct.time.timeSystem('utc', {
+            start: 0,
+            end: 1
+        });
         openmct.router.path = originalRouterPath;
 
-        // Needs to be in a timeout because plots use a bunch of setTimeouts, some of which can resolve during or after
-        // teardown, which causes problems
-        // This is hacky, we should find a better approach here.
-        setTimeout(() => {
-            //Cleanup code that needs to happen before dom elements start being destroyed
-            cleanupFirst.forEach(cleanup => cleanup());
-            cleanupFirst = [];
-            document.body.removeChild(parent);
-
-            resetApplicationState(openmct).then(done).catch(done);
-        });
+        return resetApplicationState(openmct);
     });
 
     it("should provide an imagery time strip view when in a time strip", () => {
@@ -271,7 +262,7 @@ describe("The Imagery View Layouts", () => {
     });
 
     it("should provide an imagery view only for imagery producing objects", () => {
-        let applicableViews = openmct.objectViews.get(imageryObject, [imageryObject]);
+        let applicableViews = openmct.objectViews.get(imageryObject, []);
         let imageryView = applicableViews.find(
             viewProvider => viewProvider.key === imageryKey
         );
@@ -324,53 +315,51 @@ describe("The Imagery View Layouts", () => {
         let imageryViewProvider;
         let imageryView;
 
-        beforeEach(() => {
+        beforeEach(async () => {
+            let telemetryRequestResolve;
+            let telemetryRequestPromise = new Promise((resolve) => {
+                telemetryRequestResolve = resolve;
+            });
 
-            applicableViews = openmct.objectViews.get(imageryObject, [imageryObject]);
+            openmct.telemetry.request.and.callFake(() => {
+                telemetryRequestResolve(imageTelemetry);
+
+                return telemetryRequestPromise;
+            });
+
+            applicableViews = openmct.objectViews.get(imageryObject, []);
             imageryViewProvider = applicableViews.find(viewProvider => viewProvider.key === imageryKey);
-            imageryView = imageryViewProvider.view(imageryObject, [imageryObject]);
+            imageryView = imageryViewProvider.view(imageryObject);
             imageryView.show(child);
 
-            return Vue.nextTick();
+            await telemetryRequestPromise;
         });
 
-        // afterEach(() => {
-        //     openmct.time.stopClock();
-        //     openmct.router.removeListener('change:hash', resolveFunction);
-        //
-        //     imageryView.destroy();
-        // });
+        afterEach(() => {
+            openmct.time.stopClock();
+            openmct.router.removeListener('change:hash', resolveFunction);
 
-        it("on mount should show the the most recent image", (done) => {
-            //Looks like we need Vue.nextTick here so that computed properties settle down
+            imageryView.destroy();
+        });
+
+        it("on mount should show the the most recent image", () => {
+            const imageInfo = getImageInfo(parent);
+
+            expect(imageInfo.url.indexOf(imageTelemetry[COUNT - 1].timeId)).not.toEqual(-1);
+        });
+
+        xit("should show the clicked thumbnail as the main image", (done) => {
+            const target = imageTelemetry[5].url;
+            parent.querySelectorAll(`img[src='${target}']`)[0].click();
             Vue.nextTick(() => {
                 const imageInfo = getImageInfo(parent);
 
-                expect(imageInfo.url.indexOf(imageTelemetry[COUNT - 1].timeId)).not.toEqual(-1);
+                expect(imageInfo.url.indexOf(imageTelemetry[5].timeId)).not.toEqual(-1);
                 done();
             });
         });
 
-        it("should show the clicked thumbnail as the main image", (done) => {
-            //Looks like we need Vue.nextTick here so that computed properties settle down
-            Vue.nextTick(() => {
-                const target = imageTelemetry[5].url;
-                parent.querySelectorAll(`img[src='${target}']`)[0].click();
-                Vue.nextTick(() => {
-                    const imageInfo = getImageInfo(parent);
-
-                    expect(imageInfo.url.indexOf(imageTelemetry[5].timeId)).not.toEqual(-1);
-                    done();
-                });
-            });
-        });
-
         xit("should show that an image is new", (done) => {
-            openmct.time.clock('local', {
-                start: -1000,
-                end: 1000
-            });
-
             Vue.nextTick(() => {
                 // used in code, need to wait to the 500ms here too
                 setTimeout(() => {
@@ -382,161 +371,80 @@ describe("The Imagery View Layouts", () => {
         });
 
         it("should show that an image is not new", (done) => {
+            const target = imageTelemetry[2].url;
+            parent.querySelectorAll(`img[src='${target}']`)[0].click();
+
             Vue.nextTick(() => {
-                const target = imageTelemetry[2].url;
-                parent.querySelectorAll(`img[src='${target}']`)[0].click();
+                const imageIsNew = isNew(parent);
 
-                Vue.nextTick(() => {
-                    const imageIsNew = isNew(parent);
-
-                    expect(imageIsNew).toBeFalse();
-                    done();
-                });
-            });
-        });
-
-        it("should navigate via arrow keys", (done) => {
-            Vue.nextTick(() => {
-                let keyOpts = {
-                    element: parent.querySelector('.c-imagery'),
-                    key: 'ArrowLeft',
-                    keyCode: 37,
-                    type: 'keyup'
-                };
-
-                simulateKeyEvent(keyOpts);
-
-                Vue.nextTick(() => {
-                    const imageInfo = getImageInfo(parent);
-
-                    expect(imageInfo.url.indexOf(imageTelemetry[COUNT - 2].timeId)).not.toEqual(-1);
-                    done();
-                });
-            });
-        });
-
-        it("should navigate via numerous arrow keys", (done) => {
-            Vue.nextTick(() => {
-                let element = parent.querySelector('.c-imagery');
-                let type = 'keyup';
-                let leftKeyOpts = {
-                    element,
-                    type,
-                    key: 'ArrowLeft',
-                    keyCode: 37
-                };
-                let rightKeyOpts = {
-                    element,
-                    type,
-                    key: 'ArrowRight',
-                    keyCode: 39
-                };
-
-                // left thrice
-                simulateKeyEvent(leftKeyOpts);
-                simulateKeyEvent(leftKeyOpts);
-                simulateKeyEvent(leftKeyOpts);
-                // right once
-                simulateKeyEvent(rightKeyOpts);
-
-                Vue.nextTick(() => {
-                    const imageInfo = getImageInfo(parent);
-
-                    expect(imageInfo.url.indexOf(imageTelemetry[COUNT - 3].timeId)).not.toEqual(-1);
-                    done();
-                });
-            });
-        });
-        it ('shows an auto scroll button when scroll to left', (done) => {
-            Vue.nextTick(() => {
-                // to mock what a scroll would do
-                imageryView._getInstance().$refs.ImageryContainer.autoScroll = false;
-                Vue.nextTick(() => {
-                    let autoScrollButton = parent.querySelector('.c-imagery__auto-scroll-resume-button');
-                    expect(autoScrollButton).toBeTruthy();
-                    done();
-                });
-            });
-        });
-        it ('scrollToRight is called when clicking on auto scroll button', (done) => {
-            Vue.nextTick(() => {
-                // use spyon to spy the scroll function
-                spyOn(imageryView._getInstance().$refs.ImageryContainer, 'scrollToRight');
-                imageryView._getInstance().$refs.ImageryContainer.autoScroll = false;
-                Vue.nextTick(() => {
-                    parent.querySelector('.c-imagery__auto-scroll-resume-button').click();
-                    expect(imageryView._getInstance().$refs.ImageryContainer.scrollToRight).toHaveBeenCalledWith('reset');
-                    done();
-                });
-            });
-        });
-    });
-
-    describe("imagery time strip view", () => {
-        let applicableViews;
-        let imageryViewProvider;
-        let imageryView;
-        let componentView;
-
-        beforeEach(() => {
-            openmct.time.timeSystem('utc', {
-                start: START - (5 * ONE_MINUTE),
-                end: START + (5 * ONE_MINUTE)
-            });
-
-            openmct.router.path = [{
-                identifier: {
-                    key: 'test-timestrip',
-                    namespace: ''
-                },
-                type: 'time-strip'
-            }];
-
-            applicableViews = openmct.objectViews.get(imageryObject, [imageryObject, {
-                identifier: {
-                    key: 'test-timestrip',
-                    namespace: ''
-                },
-                type: 'time-strip'
-            }]);
-            imageryViewProvider = applicableViews.find(viewProvider => viewProvider.key === imageryForTimeStripKey);
-            imageryView = imageryViewProvider.view(imageryObject, [imageryObject, {
-                identifier: {
-                    key: 'test-timestrip',
-                    namespace: ''
-                },
-                type: 'time-strip'
-            }]);
-            imageryView.show(child);
-
-            componentView = imageryView.getComponent().$children[0];
-            spyOn(componentView.previewAction, 'invoke').and.callThrough();
-
-            return Vue.nextTick();
-        });
-
-        it("on mount should show imagery within the given bounds", (done) => {
-            Vue.nextTick(() => {
-                const imageElements = parent.querySelectorAll('.c-imagery-tsv__image-wrapper');
-                expect(imageElements.length).toEqual(6);
+                expect(imageIsNew).toBeFalse();
                 done();
             });
         });
 
-        it("should show the clicked thumbnail as the preview image", (done) => {
-            Vue.nextTick(() => {
-                const mouseDownEvent = createMouseEvent("mousedown");
-                let imageWrapper = parent.querySelectorAll(`.c-imagery-tsv__image-wrapper`);
-                imageWrapper[2].dispatchEvent(mouseDownEvent);
+        xit("should navigate via arrow keys", (done) => {
+            let keyOpts = {
+                element: parent.querySelector('.c-imagery'),
+                key: 'ArrowLeft',
+                keyCode: 37,
+                type: 'keyup'
+            };
 
-                Vue.nextTick(() => {
-                    expect(componentView.previewAction.invoke).toHaveBeenCalledWith([componentView.objectPath[0]], {
-                        indexForFocusedImage: 2,
-                        objectPath: componentView.objectPath
-                    });
-                    done();
-                });
+            simulateKeyEvent(keyOpts);
+
+            Vue.nextTick(() => {
+                const imageInfo = getImageInfo(parent);
+
+                expect(imageInfo.url.indexOf(imageTelemetry[COUNT - 2].timeId)).not.toEqual(-1);
+                done();
             });
         });
+
+        it("should navigate via numerous arrow keys", (done) => {
+            let element = parent.querySelector('.c-imagery');
+            let type = 'keyup';
+            let leftKeyOpts = {
+                element,
+                type,
+                key: 'ArrowLeft',
+                keyCode: 37
+            };
+            let rightKeyOpts = {
+                element,
+                type,
+                key: 'ArrowRight',
+                keyCode: 39
+            };
+
+            // left thrice
+            simulateKeyEvent(leftKeyOpts);
+            simulateKeyEvent(leftKeyOpts);
+            simulateKeyEvent(leftKeyOpts);
+            // right once
+            simulateKeyEvent(rightKeyOpts);
+
+            Vue.nextTick(() => {
+                const imageInfo = getImageInfo(parent);
+
+                expect(imageInfo.url.indexOf(imageTelemetry[COUNT - 3].timeId)).not.toEqual(-1);
+                done();
+            });
+        });
+        it ('shows an auto scroll button when scroll to left', async () => {
+            // to mock what a scroll would do
+            imageryView._getInstance().$refs.ImageryContainer.autoScroll = false;
+            await Vue.nextTick();
+            let autoScrollButton = parent.querySelector('.c-imagery__auto-scroll-resume-button');
+            expect(autoScrollButton).toBeTruthy();
+        });
+        it ('scrollToRight is called when clicking on auto scroll button', async () => {
+            // use spyon to spy the scroll function
+            spyOn(imageryView._getInstance().$refs.ImageryContainer, 'scrollToRight');
+            imageryView._getInstance().$refs.ImageryContainer.autoScroll = false;
+            await Vue.nextTick();
+            parent.querySelector('.c-imagery__auto-scroll-resume-button').click();
+            expect(imageryView._getInstance().$refs.ImageryContainer.scrollToRight).toHaveBeenCalledWith('reset');
+
+        });
     });
 });

src/plugins/notebook/components/NotebookEmbed.vue

@@ -180,13 +180,9 @@ export default {
                 this.openmct.notifications.alert(message);
             }
 
-            if (this.openmct.editor.isEditing()) {
-                this.previewEmbed();
-            } else {
-                const relativeHash = hash.slice(hash.indexOf('#'));
-                const url = new URL(relativeHash, `${location.protocol}//${location.host}${location.pathname}`);
-                this.openmct.router.navigate(url.hash);
-            }
+            const relativeHash = hash.slice(hash.indexOf('#'));
+            const url = new URL(relativeHash, `${location.protocol}//${location.host}${location.pathname}`);
+            this.openmct.router.navigate(url.hash);
         },
         formatTime(unixTime, timeFormat) {
             return Moment.utc(unixTime).format(timeFormat);

src/plugins/notebook/monkeyPatchObjectAPIForNotebooks.js

@@ -1,72 +0,0 @@
-import {NOTEBOOK_TYPE} from './notebook-constants';
-
-export default function (openmct) {
-    const apiSave = openmct.objects.save.bind(openmct.objects);
-
-    openmct.objects.save = async (domainObject) => {
-        if (domainObject.type !== NOTEBOOK_TYPE) {
-            return apiSave(domainObject);
-        }
-
-        const localMutable = openmct.objects._toMutable(domainObject);
-        let result;
-
-        try {
-            result = await apiSave(localMutable);
-        } catch (error) {
-            if (error instanceof openmct.objects.errors.Conflict) {
-                result = resolveConflicts(localMutable, openmct);
-            } else {
-                result = Promise.reject(error);
-            }
-        } finally {
-            openmct.objects.destroyMutable(localMutable);
-        }
-
-        return result;
-    };
-}
-
-function resolveConflicts(localMutable, openmct) {
-    return openmct.objects.getMutable(localMutable.identifier).then((remoteMutable) => {
-        const localEntries = localMutable.configuration.entries;
-        remoteMutable.$refresh(remoteMutable);
-        applyLocalEntries(remoteMutable, localEntries);
-
-        openmct.objects.destroyMutable(remoteMutable);
-
-        return true;
-    });
-}
-
-function applyLocalEntries(mutable, entries) {
-    Object.entries(entries).forEach(([sectionKey, pagesInSection]) => {
-        Object.entries(pagesInSection).forEach(([pageKey, localEntries]) => {
-            const remoteEntries = mutable.configuration.entries[sectionKey][pageKey];
-            const mergedEntries = [].concat(remoteEntries);
-            let shouldMutate = false;
-
-            const locallyAddedEntries = _.differenceBy(localEntries, remoteEntries, 'id');
-            const locallyModifiedEntries = _.differenceWith(localEntries, remoteEntries, (localEntry, remoteEntry) => {
-                return localEntry.id === remoteEntry.id && localEntry.text === remoteEntry.text;
-            });
-
-            locallyAddedEntries.forEach((localEntry) => {
-                mergedEntries.push(localEntry);
-                shouldMutate = true;
-            });
-
-            locallyModifiedEntries.forEach((locallyModifiedEntry) => {
-                let mergedEntry = mergedEntries.find(entry => entry.id === locallyModifiedEntry.id);
-                if (mergedEntry !== undefined) {
-                    mergedEntry.text = locallyModifiedEntry.text;
-                    shouldMutate = true;
-                }
-            });
-
-            if (shouldMutate) {
-                mutable.$set(`configuration.entries.${sectionKey}.${pageKey}`, mergedEntries);
-            }
-        });
-    });
-}

src/plugins/notebook/plugin.js

@@ -2,7 +2,6 @@ import CopyToNotebookAction from './actions/CopyToNotebookAction';
 import Notebook from './components/Notebook.vue';
 import NotebookSnapshotIndicator from './components/NotebookSnapshotIndicator.vue';
 import SnapshotContainer from './snapshot-container';
-import monkeyPatchObjectAPIForNotebooks from './monkeyPatchObjectAPIForNotebooks.js';
 
 import { notebookImageMigration } from '../notebook/utils/notebook-migration';
 import { NOTEBOOK_TYPE } from './notebook-constants';
@@ -115,8 +114,7 @@ export default function NotebookPlugin() {
         });
         const indicator = {
             element: notebookSnapshotIndicator.$mount().$el,
-            key: 'notebook-snapshot-indicator',
-            priority: openmct.priority.DEFAULT
+            key: 'notebook-snapshot-indicator'
         };
 
         openmct.indicators.add(indicator);
@@ -167,7 +165,5 @@ export default function NotebookPlugin() {
                 return domainObject;
             }
         });
-
-        monkeyPatchObjectAPIForNotebooks(openmct);
     };
 }

src/plugins/notebook/pluginSpec.js

@@ -148,18 +148,12 @@ describe("Notebook plugin:", () => {
                 'observe'
             ]);
 
-            openmct.editor = {};
-            openmct.editor.isEditing = () => false;
-
             const applicableViews = openmct.objectViews.get(notebookViewObject, [notebookViewObject]);
             notebookViewProvider = applicableViews.find(viewProvider => viewProvider.key === 'notebook-vue');
 
             testObjectProvider.get.and.returnValue(Promise.resolve(notebookViewObject));
-            testObjectProvider.create.and.returnValue(Promise.resolve(notebookViewObject));
             openmct.objects.addProvider('test-namespace', testObjectProvider);
             testObjectProvider.observe.and.returnValue(() => {});
-            testObjectProvider.create.and.returnValue(Promise.resolve(true));
-            testObjectProvider.update.and.returnValue(Promise.resolve(true));
 
             return openmct.objects.getMutable(notebookViewObject.identifier).then((mutableObject) => {
                 mutableNotebookObject = mutableObject;

src/plugins/notebook/snapshot.js

@@ -110,7 +110,8 @@ export default class Snapshot {
         }
 
         return () => {
-            window.location.href = window.location.origin + url;
+            const path = window.location.href.split('#');
+            window.location.href = path[0] + url;
         };
     }
 }

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

@@ -125,7 +125,7 @@ export function addNotebookEntry(openmct, domainObject, notebookStorage, embed =
     const newEntries = addEntryIntoPage(notebookStorage, entries, entry);
 
     addDefaultClass(domainObject, openmct);
-    domainObject.configuration.entries = newEntries;
+    openmct.objects.mutate(domainObject, 'configuration.entries', newEntries);
 
     return id;
 }

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

@@ -44,7 +44,6 @@ const notebookDomainObject = {
         namespace: ''
     },
     type: 'notebook',
-    name: 'Test Notebook',
     configuration: {
         defaultSort: 'oldest',
         entries: notebookEntries,
@@ -119,12 +118,6 @@ describe('Notebook Entries:', () => {
             'create',
             'update'
         ]));
-        openmct.editor = {
-            isEditing: () => false
-        };
-        openmct.objects.isPersistable = () => true;
-        openmct.objects.save = () => Promise.resolve(true);
-
         window.localStorage.setItem('notebook-storage', null);
     });
 

src/plugins/notificationIndicator/plugin.js

@@ -36,8 +36,7 @@ export default function plugin() {
 
         let indicator = {
             key: 'notifications-indicator',
-            element: component.$mount().$el,
-            priority: openmct.priority.DEFAULT
+            element: component.$mount().$el
         };
 
         openmct.indicators.add(indicator);

src/plugins/persistence/couch/CouchChangesFeed.js

@@ -15,16 +15,12 @@
 
         port.onmessage = async function (event) {
             if (event.data.request === 'close') {
-                console.log('Closing connection');
                 connections.splice(event.data.connectionId - 1, 1);
                 if (connections.length <= 0) {
                     // abort any outstanding requests if there's nobody listening to it.
                     controller.abort();
                 }
 
-                console.log('Closed.');
-                connected = false;
-
                 return;
             }
 
@@ -33,10 +29,68 @@
                     return;
                 }
 
-                do {
-                    await self.listenForChanges(event.data.url, event.data.body, port);
-                    // eslint-disable-next-line no-unmodified-loop-condition
-                } while (connected);
+                connected = true;
+
+                let url = event.data.url;
+                let body = event.data.body;
+                let error = false;
+                // feed=continuous maintains an indefinitely open connection with a keep-alive of HEARTBEAT milliseconds until this client closes the connection
+                // style=main_only returns only the current winning revision of the document
+
+                const response = await fetch(url, {
+                    method: 'POST',
+                    headers: {
+                        "Content-Type": 'application/json'
+                    },
+                    signal,
+                    body
+                });
+
+                let reader;
+
+                if (response.body === undefined) {
+                    error = true;
+                } else {
+                    reader = response.body.getReader();
+                }
+
+                while (!error) {
+                    const {done, value} = await reader.read();
+                    //done is true when we lose connection with the provider
+                    if (done) {
+                        error = true;
+                    }
+
+                    if (value) {
+                        let chunk = new Uint8Array(value.length);
+                        chunk.set(value, 0);
+                        const decodedChunk = new TextDecoder("utf-8").decode(chunk).split('\n');
+                        if (decodedChunk.length && decodedChunk[decodedChunk.length - 1] === '') {
+                            decodedChunk.forEach((doc, index) => {
+                                try {
+                                    if (doc) {
+                                        const objectChanges = JSON.parse(doc);
+                                        connections.forEach(function (connection) {
+                                            connection.postMessage({
+                                                objectChanges
+                                            });
+                                        });
+                                    }
+                                } catch (decodeError) {
+                                    //do nothing;
+                                    console.log(decodeError);
+                                }
+                            });
+                        }
+                    }
+
+                }
+
+                if (error) {
+                    port.postMessage({
+                        error
+                    });
+                }
             }
         };
 
@@ -49,64 +103,4 @@
         console.log('Error on feed');
     };
 
-    self.listenForChanges = async function (url, body, port) {
-        connected = true;
-        let error = false;
-        // feed=continuous maintains an indefinitely open connection with a keep-alive of HEARTBEAT milliseconds until this client closes the connection
-        // style=main_only returns only the current winning revision of the document
-
-        console.log('Opening changes feed connection.');
-        const response = await fetch(url, {
-            method: 'POST',
-            headers: {
-                "Content-Type": 'application/json'
-            },
-            signal,
-            body
-        });
-
-        let reader;
-
-        if (response.body === undefined) {
-            error = true;
-        } else {
-            reader = response.body.getReader();
-        }
-
-        while (!error) {
-            const {done, value} = await reader.read();
-            //done is true when we lose connection with the provider
-            if (done) {
-                error = true;
-            }
-
-            if (value) {
-                let chunk = new Uint8Array(value.length);
-                chunk.set(value, 0);
-                const decodedChunk = new TextDecoder("utf-8").decode(chunk).split('\n');
-                console.log('Received chunk');
-                if (decodedChunk.length && decodedChunk[decodedChunk.length - 1] === '') {
-                    decodedChunk.forEach((doc, index) => {
-                        try {
-                            if (doc) {
-                                const objectChanges = JSON.parse(doc);
-                                connections.forEach(function (connection) {
-                                    connection.postMessage({
-                                        objectChanges
-                                    });
-                                });
-                            }
-                        } catch (decodeError) {
-                            //do nothing;
-                            console.log(decodeError);
-                        }
-                    });
-                }
-            }
-
-        }
-
-        console.log('Done reading changes feed');
-    };
-
 }());

src/plugins/persistence/couch/CouchObjectProvider.js

@@ -29,7 +29,7 @@ const ID = "_id";
 const HEARTBEAT = 50000;
 const ALL_DOCS = "_all_docs?include_docs=true";
 
-class CouchObjectProvider {
+export default class CouchObjectProvider {
     constructor(openmct, options, namespace) {
         options = this._normalize(options);
         this.openmct = openmct;
@@ -74,6 +74,13 @@ class CouchObjectProvider {
         if (event.data.type === 'connection') {
             this.changesFeedSharedWorkerConnectionId = event.data.connectionId;
         } else {
+            const error = event.data.error;
+            if (error && Object.keys(this.observers).length > 0) {
+                this.observeObjectChanges();
+
+                return;
+            }
+
             let objectChanges = event.data.objectChanges;
             objectChanges.identifier = {
                 namespace: this.namespace,
@@ -119,12 +126,11 @@ class CouchObjectProvider {
         }
 
         return fetch(this.url + '/' + subPath, fetchOptions)
-            .then((response) => {
-                if (response.status === CouchObjectProvider.HTTP_CONFLICT) {
-                    throw new this.openmct.objects.errors.Conflict(`Conflict persisting ${fetchOptions.body.name}`);
-                }
-
-                return response.json();
+            .then(response => response.json())
+            .then(function (response) {
+                return response;
+            }, function () {
+                return undefined;
             });
     }
 
@@ -555,18 +561,12 @@ class CouchObjectProvider {
         let intermediateResponse = this.getIntermediateResponse();
         const key = model.identifier.key;
         this.enqueueObject(key, model, intermediateResponse);
-        if (!this.objectQueue[key].pending) {
-            this.objectQueue[key].pending = true;
-            const queued = this.objectQueue[key].dequeue();
-            let document = new CouchDocument(key, queued.model);
-            this.request(key, "PUT", document).then((response) => {
-                console.log('create check response', key);
-                this.checkResponse(response, queued.intermediateResponse, key);
-            }).catch(error => {
-                queued.intermediateResponse.reject(error);
-                this.objectQueue[key].pending = false;
-            });
-        }
+        this.objectQueue[key].pending = true;
+        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, key);
+        });
 
         return intermediateResponse.promise;
     }
@@ -581,9 +581,6 @@ class CouchObjectProvider {
             let document = new CouchDocument(key, queued.model, this.objectQueue[key].rev);
             this.request(key, "PUT", document).then((response) => {
                 this.checkResponse(response, queued.intermediateResponse, key);
-            }).catch((error) => {
-                queued.intermediateResponse.reject(error);
-                this.objectQueue[key].pending = false;
             });
         }
     }
@@ -597,7 +594,3 @@ class CouchObjectProvider {
         return intermediateResponse.promise;
     }
 }
-
-CouchObjectProvider.HTTP_CONFLICT = 409;
-
-export default CouchObjectProvider;

src/plugins/persistence/couch/README.md

@@ -1,48 +0,0 @@
-# Introduction
-These instructions are for setting up CouchDB for a **development** environment. For a production environment, we recommend running OpenMCT behind a proxy server (e.g., Nginx or Apache), and securing the CouchDB server properly:
-https://docs.couchdb.org/en/main/intro/security.html
-
-# Installing CouchDB
-## OSX
-1. Install CouchDB using: `brew install couchdb`
-2. Edit `/usr/local/etc/local.ini` and add and admin password:
-  ```
-  [admins]
-  admin = youradminpassword
-  ```
-  And set the server up for single node:
-  ```
-  [couchdb]
-  single_node=true
-  ```
-
-3. Start CouchDB by running: `couchdb`
-4. Add the `_global_changes` database using `curl` (note the `youradminpassword` should be changed to what you set above 👆): `curl -X PUT http://admin:youradminpassword@127.0.0.1:5984/_global_changes`
-## Other Operating Systems
-Follow the installation instructions from the CouchDB installation guide: https://docs.couchdb.org/en/stable/install/index.html
-
-# Configuring OpenMCT
-1. Navigate to http://localhost:5984/_utils
-2. Create a database called `openmct`
-3. In your OpenMCT directory, edit `openmct/index.html`, and comment out:
-```
-openmct.install(openmct.plugins.LocalStorage());
-```
-Add a line to install the CouchDB plugin for OpenMCT:
-```
-openmct.install(openmct.plugins.CouchDB("http://localhost:5984/openmct/"));
-```
-6. Enable cors in CouchDB by editing `/usr/local/etc/local.ini` and add: `
-```
-[chttpd]
-enable_cors = true
-
-[cors]
-origins = http://localhost:8080
-```
-7. Remove permission restrictions in CouchDB from OpenMCT by navigating to http://127.0.0.1:5984/_utils/#/database/openmct/permissions and deleting `_admin` roles for both `Admin` and `Member`.
-8. Start openmct by running `npm start` in the OpenMCT directory.
-9. Navigate to http://localhost:8080/ and create a random object in OpenMCT (e.g., a `Clock`) and save. You may get an error saying that the objects failed to persist. This is a known error that you can ignore, and will only happen the first time you save.
-10. Navigate to: http://127.0.0.1:5984/_utils/#database/openmct/_all_docs
-11. Look at the `JSON` tab and ensure you can see the `Clock` object you created above.
-12. All done! 🏆

src/plugins/plan/PlanViewProvider.js

@@ -25,9 +25,7 @@ import Vue from 'vue';
 
 export default function PlanViewProvider(openmct) {
     function isCompactView(objectPath) {
-        let isChildOfTimeStrip = objectPath.find(object => object.type === 'time-strip');
-
-        return isChildOfTimeStrip && !openmct.router.isNavigatedObject(objectPath);
+        return objectPath.find(object => object.type === 'time-strip') !== undefined;
     }
 
     return {

src/plugins/plan/pluginSpec.js

@@ -30,7 +30,6 @@ describe('the plugin', function () {
     let child;
     let openmct;
     let appHolder;
-    let originalRouterPath;
 
     beforeEach((done) => {
         appHolder = document.createElement('div');
@@ -57,16 +56,11 @@ describe('the plugin', function () {
         child.style.width = '640px';
         child.style.height = '480px';
         element.appendChild(child);
-
-        originalRouterPath = openmct.router.path;
-
         openmct.on('start', done);
         openmct.start(appHolder);
     });
 
     afterEach(() => {
-        openmct.router.path = originalRouterPath;
-
         return resetApplicationState(openmct);
     });
 
@@ -90,9 +84,8 @@ describe('the plugin', function () {
                 id: "test-object",
                 type: "plan"
             };
-            openmct.router.path = [testViewObject];
 
-            const applicableViews = openmct.objectViews.get(testViewObject, [testViewObject]);
+            const applicableViews = openmct.objectViews.get(testViewObject, []);
             let planView = applicableViews.find((viewProvider) => viewProvider.key === 'plan.view');
             expect(planView).toBeDefined();
         });
@@ -149,9 +142,7 @@ describe('the plugin', function () {
                 }
             };
 
-            openmct.router.path = [planDomainObject];
-
-            const applicableViews = openmct.objectViews.get(planDomainObject, [planDomainObject]);
+            const applicableViews = openmct.objectViews.get(planDomainObject, []);
             planView = applicableViews.find((viewProvider) => viewProvider.key === 'plan.view');
             let view = planView.view(planDomainObject, mockObjectPath);
             view.show(child, true);

src/plugins/plot/ColorSwatch.vue

@@ -21,62 +21,72 @@
 -->
 <template>
 <div class="u-contents">
-    <div v-if="canEdit"
-         class="grid-row"
+    <ul v-if="canEdit"
+        class="l-inspector-part"
     >
-        <div class="grid-cell label"
-             :title="editTitle"
-        >{{ shortLabel }}</div>
-        <div class="grid-cell value">
-            <div class="c-click-swatch c-click-swatch--menu"
-                 @click="toggleSwatch()"
-            >
-                <span class="c-color-swatch"
-                      :style="{ background: currentColor }"
+        <h2 v-if="heading"
+            :title="heading"
+        >{{ heading }}</h2>
+        <li class="grid-row">
+            <div class="grid-cell label"
+                 :title="editTitle"
+            >{{ shortLabel }}</div>
+            <div class="grid-cell value">
+                <div class="c-click-swatch c-click-swatch--menu"
+                     @click="toggleSwatch()"
                 >
-                </span>
-            </div>
-            <div class="c-palette c-palette--color">
-                <div v-show="swatchActive"
-                     class="c-palette__items"
-                >
-                    <div v-for="group in colorPaletteGroups"
-                         :key="group.id"
-                         class="u-contents"
+                    <span class="c-color-swatch"
+                          :style="{ background: currentColor }"
                     >
-                        <div v-for="color in group"
-                             :key="color.id"
-                             class="c-palette__item"
-                             :class="{ 'selected': currentColor === color.hexString }"
-                             :style="{ background: color.hexString }"
-                             @click="setColor(color)"
+                    </span>
+                </div>
+                <div class="c-palette c-palette--color">
+                    <div v-show="swatchActive"
+                         class="c-palette__items"
+                    >
+                        <div v-for="group in colorPaletteGroups"
+                             :key="group.id"
+                             class="u-contents"
                         >
+                            <div v-for="color in group"
+                                 :key="color.id"
+                                 class="c-palette__item"
+                                 :class="{ 'selected': currentColor === color.hexString }"
+                                 :style="{ background: color.hexString }"
+                                 @click="setColor(color)"
+                            >
+                            </div>
                         </div>
                     </div>
                 </div>
             </div>
-        </div>
-    </div>
-    <div v-else
-         class="grid-row"
+        </li>
+    </ul>
+    <ul v-else
+        class="l-inspector-part"
     >
-        <div class="grid-cell label"
-             :title="viewTitle"
-        >{{ shortLabel }}</div>
-        <div class="grid-cell value">
-            <span class="c-color-swatch"
-                  :style="{
-                      'background': currentColor
-                  }"
-            >
-            </span>
-        </div>
-    </div>
+        <h2 v-if="heading"
+            :title="heading"
+        >{{ heading }}</h2>
+        <li class="grid-row">
+            <div class="grid-cell label"
+                 :title="viewTitle"
+            >{{ shortLabel }}</div>
+            <div class="grid-cell value">
+                <span class="c-color-swatch"
+                      :style="{
+                          'background': currentColor
+                      }"
+                >
+                </span>
+            </div>
+        </li>
+    </ul>
 </div>
 </template>
 
 <script>
-import ColorPalette from './ColorPalette';
+import ColorPalette from './lib/ColorPalette';
 
 export default {
     inject: ['openmct', 'domainObject'],
@@ -104,6 +114,12 @@ export default {
             default() {
                 return 'Color';
             }
+        },
+        heading: {
+            type: String,
+            default() {
+                return '';
+            }
         }
     },
     data() {

src/plugins/plot/MctPlot.vue

@@ -35,15 +35,12 @@
                 :tick-width="tickWidth"
                 :single-series="seriesModels.length === 1"
                 :series-model="seriesModels[0]"
-                :style="{
-                    left: (plotWidth - tickWidth) + 'px'
-                }"
                 @yKeyChanged="setYAxisKey"
                 @tickWidthChanged="onTickWidthChange"
         />
         <div class="gl-plot-wrapper-display-area-and-x-axis"
              :style="{
-                 left: (plotWidth + 20) + 'px'
+                 left: (tickWidth + 20) + 'px'
              }"
         >
 
@@ -222,8 +219,7 @@ export default {
             isRealTime: this.openmct.time.clock() !== undefined,
             loaded: false,
             isTimeOutOfSync: false,
-            showLimitLineLabels: undefined,
-            isFrozenOnMouseDown: false
+            showLimitLineLabels: undefined
         };
     },
     computed: {
@@ -239,9 +235,11 @@ export default {
             } else {
                 return 'plot-legend-collapsed';
             }
-        },
-        plotWidth() {
-            return this.plotTickWidth || this.tickWidth;
+        }
+    },
+    watch: {
+        plotTickWidth(newTickWidth) {
+            this.onTickWidthChange(newTickWidth, true);
         }
     },
     mounted() {
@@ -338,11 +336,6 @@ export default {
         },
 
         loadSeriesData(series) {
-            //this check ensures that duplicate requests don't happen on load
-            if (!this.timeContext) {
-                return;
-            }
-
             if (this.$parent.$refs.plotWrapper.offsetWidth === 0) {
                 this.scheduleLoad(series);
 
@@ -352,12 +345,9 @@ export default {
             this.offsetWidth = this.$parent.$refs.plotWrapper.offsetWidth;
 
             this.startLoading();
-            const bounds = this.timeContext.bounds();
             const options = {
                 size: this.$parent.$refs.plotWrapper.offsetWidth,
-                domain: this.config.xAxis.get('key'),
-                start: bounds.start,
-                end: bounds.end
+                domain: this.config.xAxis.get('key')
             };
 
             series.load(options)
@@ -366,10 +356,9 @@ export default {
 
         loadMoreData(range, purge) {
             this.config.series.forEach(plotSeries => {
-                this.offsetWidth = this.$parent.$refs.plotWrapper.offsetWidth;
                 this.startLoading();
                 plotSeries.load({
-                    size: this.offsetWidth,
+                    size: this.$parent.$refs.plotWrapper.offsetWidth,
                     start: range.min,
                     end: range.max,
                     domain: this.config.xAxis.get('key')
@@ -604,8 +593,7 @@ export default {
                 }
             }
 
-            const id = this.openmct.objects.makeKeyString(this.domainObject.identifier);
-            this.$emit('plotTickWidth', this.tickWidth, id);
+            this.$emit('plotTickWidth', this.tickWidth);
         },
 
         trackMousePosition(event) {
@@ -698,11 +686,6 @@ export default {
 
             this.listenTo(window, 'mouseup', this.onMouseUp, this);
             this.listenTo(window, 'mousemove', this.trackMousePosition, this);
-
-            // track frozen state on mouseDown to be read on mouseUp
-            const isFrozen = this.config.xAxis.get('frozen') === true && this.config.yAxis.get('frozen') === true;
-            this.isFrozenOnMouseDown = isFrozen;
-
             if (event.altKey) {
                 return this.startPan(event);
             } else {
@@ -723,14 +706,7 @@ export default {
             }
 
             if (this.marquee) {
-                this.endMarquee(event);
-            }
-
-            // resume the plot if no pan, zoom, or drag action is taken
-            // needs to follow endMarquee so that plotHistory is pruned
-            const isAction = Boolean(this.plotHistory.length);
-            if (!isAction && !this.isFrozenOnMouseDown) {
-                return this.play();
+                return this.endMarquee(event);
             }
         },
 

src/plugins/plot/PlotViewProvider.js

@@ -44,9 +44,7 @@ export default function PlotViewProvider(openmct) {
     }
 
     function isCompactView(objectPath) {
-        let isChildOfTimeStrip = objectPath.find(object => object.type === 'time-strip');
-
-        return isChildOfTimeStrip && !openmct.router.isNavigatedObject(objectPath);
+        return objectPath.find(object => object.type === 'time-strip');
     }
 
     return {

src/plugins/plot/barGraph/BarGraphCompositionPolicy.js

@@ -23,26 +23,26 @@
 import { BAR_GRAPH_KEY } from './BarGraphConstants';
 
 export default function BarGraphCompositionPolicy(openmct) {
-    function hasRange(metadata) {
+    function hasAggregateDomainAndRange(metadata) {
         const rangeValues = metadata.valuesForHints(['range']);
 
         return rangeValues.length > 0;
     }
 
     function hasBarGraphTelemetry(domainObject) {
-        if (!openmct.telemetry.isTelemetryObject(domainObject)) {
+        if (!Object.prototype.hasOwnProperty.call(domainObject, 'telemetry')) {
             return false;
         }
 
         let metadata = openmct.telemetry.getMetadata(domainObject);
 
-        return metadata.values().length > 0 && hasRange(metadata);
+        return metadata.values().length > 0 && hasAggregateDomainAndRange(metadata);
     }
 
     return {
         allow: function (parent, child) {
             if ((parent.type === BAR_GRAPH_KEY)
-                && (hasBarGraphTelemetry(child) === false)
+                && ((child.type !== 'telemetry.plot.overlay') && (hasBarGraphTelemetry(child) === false))
             ) {
                 return false;
             }

src/plugins/plot/barGraph/BarGraphCompositionPolicySpec.js

@@ -0,0 +1,346 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+
+import BarGraphCompositionPolicy from "./BarGraphCompositionPolicy";
+import { createOpenMct } from "utils/testing";
+
+describe("The bar graph composition policy", () => {
+    let openmct;
+    const mockMetaDataWithNoRangeHints = {
+        "period": 10,
+        "amplitude": 1,
+        "offset": 0,
+        "dataRateInHz": 1,
+        "phase": 0,
+        "randomness": 0,
+        valuesForHints: () => {
+            return [];
+        },
+        values: [
+            {
+                "key": "name",
+                "name": "Name",
+                "format": "string"
+            },
+            {
+                "key": "utc",
+                "name": "Time",
+                "format": "utc",
+                "hints": {
+                    "domain": 1,
+                    "priority": 1
+                },
+                "source": "utc"
+            }
+        ]
+    };
+    const mockMetaDataWithRangeHints = {
+        "period": 10,
+        "amplitude": 1,
+        "offset": 0,
+        "dataRateInHz": 1,
+        "phase": 0,
+        "randomness": 0,
+        "wavelength": 0,
+        valuesForHints: () => {
+            return [
+                {
+                    "key": "sin",
+                    "name": "Sine",
+                    "unit": "Hz",
+                    "formatString": "%0.2f",
+                    "hints": {
+                        "range": 1,
+                        "priority": 4
+                    },
+                    "source": "sin"
+                },
+                {
+                    "key": "cos",
+                    "name": "Cosine",
+                    "unit": "deg",
+                    "formatString": "%0.2f",
+                    "hints": {
+                        "range": 2,
+                        "priority": 5
+                    },
+                    "source": "cos"
+                }
+            ];
+        },
+        values: [
+            {
+                "key": "name",
+                "name": "Name",
+                "format": "string",
+                "source": "name",
+                "hints": {
+                    "priority": 0
+                }
+            },
+            {
+                "key": "utc",
+                "name": "Time",
+                "format": "utc",
+                "hints": {
+                    "domain": 1,
+                    "priority": 1
+                },
+                "source": "utc"
+            },
+            {
+                "key": "yesterday",
+                "name": "Yesterday",
+                "format": "utc",
+                "hints": {
+                    "domain": 2,
+                    "priority": 2
+                },
+                "source": "yesterday"
+            },
+            {
+                "key": "sin",
+                "name": "Sine",
+                "unit": "Hz",
+                "formatString": "%0.2f",
+                "hints": {
+                    "range": 1,
+                    "spectralAttribute": true
+                },
+                "source": "sin"
+            },
+            {
+                "key": "cos",
+                "name": "Cosine",
+                "unit": "deg",
+                "formatString": "%0.2f",
+                "hints": {
+                    "range": 2,
+                    "priority": 5
+                },
+                "source": "cos"
+            }
+        ]
+    };
+
+    beforeEach(() => {
+        openmct = createOpenMct();
+        const mockTypeDef = {
+            telemetry: mockMetaDataWithRangeHints
+        };
+        const mockTypeService = {
+            getType: () => {
+                return {
+                    typeDef: mockTypeDef
+                };
+            }
+        };
+        openmct.$injector = {
+            get: () => {
+                return mockTypeService;
+            }
+        };
+
+        openmct.telemetry.isTelemetryObject = function (domainObject) {
+            return true;
+        };
+    });
+
+    it("exists", () => {
+        expect(BarGraphCompositionPolicy(openmct).allow).toBeDefined();
+    });
+
+    xit("allow composition for telemetry that provides/supports bar graph meta data", () => {
+        const parent = {
+            "composition": [],
+            "configuration": {},
+            "name": "Some Bar Graph",
+            "type": "telemetry.plot.bar-graph",
+            "location": "mine",
+            "modified": 1631005183584,
+            "persisted": 1631005183502,
+            "identifier": {
+                "namespace": "",
+                "key": "b78e7e23-f2b8-4776-b1f0-3ff778f5c8a9"
+            }
+        };
+        const child = {
+            "telemetry": {
+                "period": 10,
+                "amplitude": 1,
+                "offset": 0,
+                "dataRateInHz": 1,
+                "phase": 0,
+                "randomness": 0
+            },
+            "name": "Unnamed Sine Wave Generator",
+            "type": "generator",
+            "location": "mine",
+            "modified": 1630399715531,
+            "persisted": 1630399715531,
+            "identifier": {
+                "namespace": "",
+                "key": "21d61f2d-6d2d-4bea-8b0a-7f59fd504c6c"
+            }
+        };
+        expect(BarGraphCompositionPolicy(openmct).allow(parent, child)).toEqual(true);
+    });
+
+    it("allows composition for telemetry that contain at least one range", () => {
+        const mockTypeDef = {
+            telemetry: mockMetaDataWithRangeHints
+        };
+        const mockTypeService = {
+            getType: () => {
+                return {
+                    typeDef: mockTypeDef
+                };
+            }
+        };
+        openmct.$injector = {
+            get: () => {
+                return mockTypeService;
+            }
+        };
+        const parent = {
+            "composition": [],
+            "configuration": {},
+            "name": "Some Bar Graph",
+            "type": "telemetry.plot.bar-graph",
+            "location": "mine",
+            "modified": 1631005183584,
+            "persisted": 1631005183502,
+            "identifier": {
+                "namespace": "",
+                "key": "b78e7e23-f2b8-4776-b1f0-3ff778f5c8a9"
+            }
+        };
+        const child = {
+            "telemetry": {
+                "period": 10,
+                "amplitude": 1,
+                "offset": 0,
+                "dataRateInHz": 1,
+                "phase": 0,
+                "randomness": 0
+            },
+            "name": "Unnamed Sine Wave Generator",
+            "type": "generator",
+            "location": "mine",
+            "modified": 1630399715531,
+            "persisted": 1630399715531,
+            "identifier": {
+                "namespace": "",
+                "key": "21d61f2d-6d2d-4bea-8b0a-7f59fd504c6c"
+            }
+        };
+        expect(BarGraphCompositionPolicy(openmct).allow(parent, child)).toEqual(true);
+    });
+
+    it("disallows composition for telemetry that don't contain any range hints", () => {
+        const mockTypeDef = {
+            telemetry: mockMetaDataWithNoRangeHints
+        };
+        const mockTypeService = {
+            getType: () => {
+                return {
+                    typeDef: mockTypeDef
+                };
+            }
+        };
+        openmct.$injector = {
+            get: () => {
+                return mockTypeService;
+            }
+        };
+        const parent = {
+            "composition": [],
+            "configuration": {},
+            "name": "Some Bar Graph",
+            "type": "telemetry.plot.bar-graph",
+            "location": "mine",
+            "modified": 1631005183584,
+            "persisted": 1631005183502,
+            "identifier": {
+                "namespace": "",
+                "key": "b78e7e23-f2b8-4776-b1f0-3ff778f5c8a9"
+            }
+        };
+        const child = {
+            "telemetry": {
+                "period": 10,
+                "amplitude": 1,
+                "offset": 0,
+                "dataRateInHz": 1,
+                "phase": 0,
+                "randomness": 0
+            },
+            "name": "Unnamed Sine Wave Generator",
+            "type": "generator",
+            "location": "mine",
+            "modified": 1630399715531,
+            "persisted": 1630399715531,
+            "identifier": {
+                "namespace": "",
+                "key": "21d61f2d-6d2d-4bea-8b0a-7f59fd504c6c"
+            }
+        };
+        expect(BarGraphCompositionPolicy(openmct).allow(parent, child)).toEqual(false);
+    });
+
+    it("passthrough for composition for non bar graph plots", () => {
+        const parent = {
+            "composition": [],
+            "configuration": {},
+            "name": "Some Stacked Plot",
+            "type": "telemetry.plot.stacked",
+            "location": "mine",
+            "modified": 1631005183584,
+            "persisted": 1631005183502,
+            "identifier": {
+                "namespace": "",
+                "key": "b78e7e23-f2b8-4776-b1f0-3ff778f5c8a9"
+            }
+        };
+        const child = {
+            "telemetry": {
+                "period": 10,
+                "amplitude": 1,
+                "offset": 0,
+                "dataRateInHz": 1,
+                "phase": 0,
+                "randomness": 0
+            },
+            "name": "Unnamed Sine Wave Generator",
+            "type": "generator",
+            "location": "mine",
+            "modified": 1630399715531,
+            "persisted": 1630399715531,
+            "identifier": {
+                "namespace": "",
+                "key": "21d61f2d-6d2d-4bea-8b0a-7f59fd504c6c"
+            }
+        };
+        expect(BarGraphCompositionPolicy(openmct).allow(parent, child)).toEqual(true);
+    });
+});
+

src/plugins/plot/barGraph/BarGraphConstants.js

@@ -1,3 +1,5 @@
 export const BAR_GRAPH_VIEW = 'bar-graph.view';
 export const BAR_GRAPH_KEY = 'telemetry.plot.bar-graph';
 export const BAR_GRAPH_INSPECTOR_KEY = 'telemetry.plot.bar-graph.inspector';
+export const SUBSCRIBE = 'subscribe';
+export const UNSUBSCRIBE = 'unsubscribe';

src/plugins/plot/barGraph/BarGraphPlot.vue

@@ -12,7 +12,6 @@
     </div>
     <div ref="plot"
          class="c-bar-chart"
-         @plotly_relayout="zoom"
     ></div>
     <div v-if="false"
          ref="localControl"
@@ -29,7 +28,8 @@
 </div>
 </template>
 <script>
-import Plotly from 'plotly-basic';
+import Plotly from 'plotly.js-basic-dist';
+import { SUBSCRIBE, UNSUBSCRIBE } from './BarGraphConstants';
 
 const MULTI_AXES_X_PADDING_PERCENT = {
     LEFT: 8,
@@ -79,6 +79,8 @@ export default {
         this.registerListeners();
     },
     beforeDestroy() {
+        this.$refs.plot.removeAllListeners();
+
         if (this.plotResizeObserver) {
             this.plotResizeObserver.unobserve(this.$refs.plotWrapper);
             clearTimeout(this.resizeTimer);
@@ -137,8 +139,8 @@ export default {
         getYAxisMeta() {
             const yAxisMeta = {};
 
-            this.data.forEach(datum => {
-                const yAxisMetadata = datum.yAxisMetadata;
+            this.data.forEach(d => {
+                const yAxisMetadata = d.yAxisMetadata;
                 const range = '1';
                 const side = 'left';
                 const name = '';
@@ -201,6 +203,8 @@ export default {
             return yaxis;
         },
         registerListeners() {
+            this.$refs.plot.on('plotly_relayout', this.zoom);
+
             this.removeBarColorListener = this.openmct.objects.observe(
                 this.domainObject,
                 'configuration.barStyles',
@@ -222,17 +226,17 @@ export default {
             this.updatePlot();
 
             this.isZoomed = false;
-            this.$emit('subscribe');
+            this.$emit(SUBSCRIBE);
         },
         barColorChanged() {
             const colors = [];
             const indices = [];
             this.data.forEach((item, index) => {
                 const key = item.key;
-                const colorExists = this.domainObject.configuration.barStyles.series[key] && this.domainObject.configuration.barStyles.series[key].color;
+                const color = this.domainObject.configuration.barStyles[key] && this.domainObject.configuration.barStyles[key].color;
                 indices.push(index);
-                if (colorExists) {
-                    colors.push(this.domainObject.configuration.barStyles.series[key].color);
+                if (color) {
+                    colors.push();
                 } else {
                     colors.push(item.marker.color);
                 }
@@ -281,7 +285,7 @@ export default {
             }
 
             this.isZoomed = true;
-            this.$emit('unsubscribe');
+            this.$emit(UNSUBSCRIBE);
         }
     }
 };

src/plugins/plot/barGraph/BarGraphView.vue

@@ -25,31 +25,33 @@
           class="c-plot c-bar-chart-view"
           :data="trace"
           :plot-axis-title="plotAxisTitle"
-          @subscribe="subscribeToAll"
-          @unsubscribe="removeAllSubscriptions"
 />
 </template>
 
 <script>
+import * as SPECTRAL_AGGREGATE from './BarGraphConstants';
+import ColorPalette from '../lib/ColorPalette';
 import BarGraph from './BarGraphPlot.vue';
-import _ from 'lodash';
+import Color from "@/plugins/plot/lib/Color";
 
 export default {
     components: {
         BarGraph
     },
-    inject: ['openmct', 'domainObject', 'path'],
+    inject: ['openmct', 'domainObject'],
     data() {
-        this.telemetryObjects = {};
-        this.telemetryObjectFormats = {};
-        this.subscriptions = [];
-        this.composition = {};
-
         return {
+            composition: {},
+            currentDomainObject: this.domainObject,
+            subscriptions: [],
+            telemetryObjects: {},
             trace: []
         };
     },
     computed: {
+        activeClock() {
+            return this.openmct.time.activeClock;
+        },
         plotAxisTitle() {
             const { xAxisMetadata = {}, yAxisMetadata = {} } = this.trace[0] || {};
             const xAxisUnit = xAxisMetadata.units ? `(${xAxisMetadata.units})` : '';
@@ -62,14 +64,24 @@ export default {
         }
     },
     mounted() {
+        this.colorPalette = new ColorPalette();
         this.loadComposition();
 
         this.openmct.time.on('bounds', this.refreshData);
+        this.openmct.time.on('clock', this.clockChanged);
+
+        this.$refs.barGraph.$on(SPECTRAL_AGGREGATE.SUBSCRIBE, this.subscribeToAll);
+        this.$refs.barGraph.$on(SPECTRAL_AGGREGATE.UNSUBSCRIBE, this.removeAllSubscriptions);
+
+        this.unobserve = this.openmct.objects.observe(this.currentDomainObject, '*', this.updateDomainObject);
     },
     beforeDestroy() {
+        this.$refs.barGraph.$off();
         this.openmct.time.off('bounds', this.refreshData);
+        this.openmct.time.off('clock', this.clockChanged);
 
         this.removeAllSubscriptions();
+        this.unobserve();
 
         if (!this.composition) {
             return;
@@ -80,34 +92,35 @@ export default {
     },
     methods: {
         addTelemetryObject(telemetryObject) {
-            // grab information we need from the added telmetry object
             const key = this.openmct.objects.makeKeyString(telemetryObject.identifier);
-            this.telemetryObjects[key] = telemetryObject;
-            const metadata = this.openmct.telemetry.getMetadata(telemetryObject);
-            this.telemetryObjectFormats[key] = this.openmct.telemetry.getFormatMap(metadata);
-            const telemetryObjectPath = [telemetryObject, ...this.path];
-            const telemetryIsAlias = this.openmct.objects.isObjectPathToALink(telemetryObject, telemetryObjectPath);
 
-            // make an update object that's a clone of the existing styles object so we preserve existing choices
-            let stylesUpdate = {};
-            if (this.domainObject.configuration.barStyles.series[key]) {
-                stylesUpdate = _.clone(this.domainObject.configuration.barStyles.series[key]);
+            if (!this.domainObject.configuration.barStyles) {
+                this.domainObject.configuration.barStyles = {};
             }
 
-            stylesUpdate.name = telemetryObject.name;
-            stylesUpdate.type = telemetryObject.type;
-            stylesUpdate.isAlias = telemetryIsAlias;
-
-            // if something has changed, mutate and notify listeners
-            if (!_.isEqual(stylesUpdate, this.domainObject.configuration.barStyles.series[key])) {
+            // check to see if we've set a bar color
+            if (!this.domainObject.configuration.barStyles[key] || !this.domainObject.configuration.barStyles[key].color) {
+                const color = this.colorPalette.getNextColor().asHexString();
+                this.domainObject.configuration.barStyles[key] = {
+                    name: telemetryObject.name,
+                    color
+                };
                 this.openmct.objects.mutate(
                     this.domainObject,
-                    `configuration.barStyles.series["${key}"]`,
-                    stylesUpdate
+                    `configuration.barStyles[${this.key}]`,
+                    this.domainObject.configuration.barStyles[key]
                 );
+            } else {
+                let color = this.domainObject.configuration.barStyles[key].color;
+                if (!(color instanceof Color)) {
+                    color = Color.fromHexString(color);
+                }
+
+                this.colorPalette.remove(color);
             }
 
-            // ask for the current telemetry data, then subcribe for changes
+            this.telemetryObjects[key] = telemetryObject;
+
             this.requestDataFor(telemetryObject);
             this.subscribeToObject(telemetryObject);
         },
@@ -131,12 +144,12 @@ export default {
 
             this.trace = isInTrace ? newTrace : newTrace.concat([trace]);
         },
+        clockChanged() {
+            this.removeAllSubscriptions();
+            this.subscribeToAll();
+        },
         getAxisMetadata(telemetryObject) {
             const metadata = this.openmct.telemetry.getMetadata(telemetryObject);
-            if (!metadata) {
-                return {};
-            }
-
             const yAxisMetadata = metadata.valuesForHints(['range'])[0];
             //Exclude 'name' and 'time' based metadata specifically, from the x-Axis values by using range hints only
             const xAxisMetadata = metadata.valuesForHints(['range']);
@@ -146,19 +159,21 @@ export default {
                 yAxisMetadata
             };
         },
-        getOptions() {
+        getOptions(telemetryObject) {
             const { start, end } = this.openmct.time.bounds();
 
             return {
                 end,
-                start
+                start,
+                startTime: null,
+                spectra: true
             };
         },
         loadComposition() {
-            this.composition = this.openmct.composition.get(this.domainObject);
+            this.composition = this.openmct.composition.get(this.currentDomainObject);
 
             if (!this.composition) {
-                this.addTelemetryObject(this.domainObject);
+                this.addTelemetryObject(this.currentDomainObject);
 
                 return;
             }
@@ -187,34 +202,21 @@ export default {
         removeTelemetryObject(identifier) {
             const key = this.openmct.objects.makeKeyString(identifier);
             delete this.telemetryObjects[key];
-            if (this.telemetryObjectFormats && this.telemetryObjectFormats[key]) {
-                delete this.telemetryObjectFormats[key];
-            }
-
-            if (this.domainObject.configuration.barStyles.series[key]) {
-                delete this.domainObject.configuration.barStyles.series[key];
-                this.openmct.objects.mutate(
-                    this.domainObject,
-                    `configuration.barStyles.series["${key}"]`,
-                    undefined
-                );
+            if (this.domainObject.configuration.barStyles[key]) {
+                delete this.domainObject.configuration.barStyles[key];
             }
 
             this.removeSubscription(key);
 
             this.trace = this.trace.filter(t => t.key !== key);
         },
-        addDataToGraph(telemetryObject, data, axisMetadata) {
+        processData(telemetryObject, data, axisMetadata) {
             const key = this.openmct.objects.makeKeyString(telemetryObject.identifier);
 
             if (data.message) {
                 this.openmct.notifications.alert(data.message);
             }
 
-            if (!this.isDataInTimeRange(data, key)) {
-                return;
-            }
-
             let xValues = [];
             let yValues = [];
 
@@ -222,10 +224,10 @@ export default {
             axisMetadata.xAxisMetadata.forEach((metadata) => {
                 xValues.push(metadata.name);
                 if (data[metadata.key]) {
-                    const formattedValue = this.format(key, metadata.key, data);
-                    yValues.push(formattedValue);
+                    //TODO: Format the data?
+                    yValues.push(data[metadata.key]);
                 } else {
-                    yValues.push(null);
+                    yValues.push('');
                 }
             });
 
@@ -239,43 +241,20 @@ export default {
                 yAxisMetadata: axisMetadata.yAxisMetadata,
                 type: 'bar',
                 marker: {
-                    color: this.domainObject.configuration.barStyles.series[key].color
+                    color: this.domainObject.configuration.barStyles[key].color
                 },
                 hoverinfo: 'skip'
             };
 
             this.addTrace(trace, key);
         },
-        isDataInTimeRange(datum, key) {
-            const timeSystemKey = this.openmct.time.timeSystem().key;
-            let currentTimestamp = this.parse(key, timeSystemKey, datum);
-
-            return currentTimestamp && this.openmct.time.bounds().end >= currentTimestamp;
-        },
-        format(telemetryObjectKey, metadataKey, data) {
-            const formats = this.telemetryObjectFormats[telemetryObjectKey];
-
-            return formats[metadataKey].format(data);
-        },
-        parse(telemetryObjectKey, metadataKey, datum) {
-            if (!datum) {
-                return;
-            }
-
-            const formats = this.telemetryObjectFormats[telemetryObjectKey];
-
-            return formats[metadataKey].parse(datum);
-        },
         requestDataFor(telemetryObject) {
             const axisMetadata = this.getAxisMetadata(telemetryObject);
-            this.openmct.telemetry.request(telemetryObject)
+            this.openmct.telemetry.request(telemetryObject, this.getOptions(telemetryObject))
                 .then(data => {
                     data.forEach((datum) => {
-                        this.addDataToGraph(telemetryObject, datum, axisMetadata);
+                        this.processData(telemetryObject, datum, axisMetadata);
                     });
-                })
-                .catch((error) => {
-                    console.warn(`Error fetching data`, error);
                 });
         },
         subscribeToObject(telemetryObject) {
@@ -283,10 +262,10 @@ export default {
 
             this.removeSubscription(key);
 
-            const options = this.getOptions();
+            const options = this.getOptions(telemetryObject);
             const axisMetadata = this.getAxisMetadata(telemetryObject);
             const unsubscribe = this.openmct.telemetry.subscribe(telemetryObject,
-                data => this.addDataToGraph(telemetryObject, data, axisMetadata)
+                data => this.processData(telemetryObject, data, axisMetadata)
                 , options);
 
             this.subscriptions.push({
@@ -297,6 +276,9 @@ export default {
         subscribeToAll() {
             const telemetryObjects = Object.values(this.telemetryObjects);
             telemetryObjects.forEach(this.subscribeToObject);
+        },
+        updateDomainObject(newDomainObject) {
+            this.currentDomainObject = newDomainObject;
         }
     }
 };

src/plugins/plot/barGraph/BarGraphViewProvider.js

@@ -26,14 +26,12 @@ import Vue from 'vue';
 
 export default function BarGraphViewProvider(openmct) {
     function isCompactView(objectPath) {
-        let isChildOfTimeStrip = objectPath.find(object => object.type === 'time-strip');
-
-        return isChildOfTimeStrip && !openmct.router.isNavigatedObject(objectPath);
+        return objectPath.find(object => object.type === 'time-strip');
     }
 
     return {
         key: BAR_GRAPH_VIEW,
-        name: 'Bar Graph',
+        name: 'Spectral Aggregate Plot',
         cssClass: 'icon-telemetry',
         canView(domainObject, objectPath) {
             return domainObject && domainObject.type === BAR_GRAPH_KEY;
@@ -56,8 +54,7 @@ export default function BarGraphViewProvider(openmct) {
                         },
                         provide: {
                             openmct,
-                            domainObject,
-                            path: objectPath
+                            domainObject
                         },
                         data() {
                             return {

src/plugins/plot/barGraph/inspector/BarGraphInspectorViewProvider.js

@@ -1,6 +1,6 @@
 import { BAR_GRAPH_INSPECTOR_KEY, BAR_GRAPH_KEY } from '../BarGraphConstants';
 import Vue from 'vue';
-import BarGraphOptions from "./BarGraphOptions.vue";
+import Options from "./Options.vue";
 
 export default function BarGraphInspectorViewProvider(openmct) {
     return {
@@ -24,13 +24,13 @@ export default function BarGraphInspectorViewProvider(openmct) {
                     component = new Vue({
                         el: element,
                         components: {
-                            BarGraphOptions
+                            Options
                         },
                         provide: {
                             openmct,
                             domainObject: selection[0][0].context.item
                         },
-                        template: '<bar-graph-options></bar-graph-options>'
+                        template: '<options></options>'
                     });
                 },
                 destroy: function () {