log clock offsets

API.md

@@ -595,17 +595,9 @@ section.
 
 #### Limit Evaluators **draft**
 
-Limit evaluators allow a telemetry integrator to define which limits exist for a 
-telemetry endpoint and how limits should be applied to telemetry from a given domain object.
-
-A limit evaluator can implement the `evalute` method which is used to define how limits
-should be applied to telemetry and the `getLimits` method which is used to specify 
-what the limit values are for different limit levels.
-
-Limit levels can be mapped to one of 5 colors for visualization: 
-`purple`, `red`, `orange`, `yellow` and `cyan`.
-
-For an example of a limit evaluator, take a look at `examples/generator/SinewaveLimitProvider.js`.
+Limit evaluators allow a telemetry integrator to define how limits should be 
+applied to telemetry from a given domain object.  For an example of a limit 
+evaluator, take a look at `examples/generator/SinewaveLimitProvider.js`.
 
 ### Telemetry Consumer APIs **draft**
 

README.md

@@ -1,11 +1,9 @@
-# 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 [![license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](http://www.apache.org/licenses/LICENSE-2.0)
 
 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.
 
 Please visit our [Official Site](https://nasa.github.io/openmct/) and [Getting Started Guide](https://nasa.github.io/openmct/getting-started/)
 
-Once you've created something amazing with Open MCT, showcase your work in our GitHub Discussions [Show and Tell](https://github.com/nasa/openmct/discussions/categories/show-and-tell) section. We love seeing unique and wonderful implementations of Open MCT!
-
 ## See Open MCT in Action
 
 Try Open MCT now with our [live demo](https://openmct-demo.herokuapp.com/).

example/generator/SinewaveLimitProvider.js

@@ -26,26 +26,14 @@ define([
 
 ) {
 
-    var PURPLE = {
-            sin: 2.2,
-            cos: 2.2
-        },
-        RED = {
+    var RED = {
             sin: 0.9,
             cos: 0.9
         },
-        ORANGE = {
-            sin: 0.7,
-            cos: 0.7
-        },
         YELLOW = {
             sin: 0.5,
             cos: 0.5
         },
-        CYAN = {
-            sin: 0.45,
-            cos: 0.45
-        },
         LIMITS = {
             rh: {
                 cssClass: "is-limit--upr is-limit--red",
@@ -106,66 +94,32 @@ define([
     };
 
     SinewaveLimitProvider.prototype.getLimits = function (domainObject) {
-
         return {
             limits: function () {
-                return Promise.resolve({
-                    WATCH: {
-                        low: {
-                            color: "cyan",
-                            sin: -CYAN.sin,
-                            cos: -CYAN.cos
-                        },
-                        high: {
-                            color: "cyan",
-                            ...CYAN
-                        }
-                    },
+                return {
                     WARNING: {
                         low: {
-                            color: "yellow",
+                            cssClass: "is-limit--lwr is-limit--yellow",
                             sin: -YELLOW.sin,
                             cos: -YELLOW.cos
                         },
                         high: {
-                            color: "yellow",
+                            cssClass: "is-limit--upr is-limit--yellow",
                             ...YELLOW
                         }
                     },
                     DISTRESS: {
                         low: {
-                            color: "orange",
-                            sin: -ORANGE.sin,
-                            cos: -ORANGE.cos
-                        },
-                        high: {
-                            color: "orange",
-                            ...ORANGE
-                        }
-                    },
-                    CRITICAL: {
-                        low: {
-                            color: "red",
+                            cssClass: "is-limit--lwr is-limit--red",
                             sin: -RED.sin,
                             cos: -RED.cos
                         },
                         high: {
-                            color: "red",
+                            cssClass: "is-limit--upr is-limit--red",
                             ...RED
                         }
-                    },
-                    SEVERE: {
-                        low: {
-                            color: "purple",
-                            sin: -PURPLE.sin,
-                            cos: -PURPLE.cos
-                        },
-                        high: {
-                            color: "purple",
-                            ...PURPLE
-                        }
                     }
-                });
+                };
             }
         };
     };

package.json

@@ -41,10 +41,10 @@
     "jsdoc": "^3.3.2",
     "karma": "5.1.1",
     "karma-chrome-launcher": "3.1.0",
+    "karma-firefox-launcher": "1.3.0",
     "karma-cli": "2.0.0",
     "karma-coverage": "2.0.3",
     "karma-coverage-istanbul-reporter": "3.0.3",
-    "karma-firefox-launcher": "1.3.0",
     "karma-html-reporter": "0.2.7",
     "karma-jasmine": "3.3.1",
     "karma-sourcemap-loader": "0.3.7",
@@ -60,7 +60,7 @@
     "moment-timezone": "0.5.28",
     "node-bourbon": "^4.2.3",
     "node-sass": "^4.14.1",
-    "painterro": "^1.2.56",
+    "painterro": "^1.0.35",
     "printj": "^1.2.1",
     "raw-loader": "^0.5.1",
     "request": "^2.69.0",

platform/commonUI/browse/bundle.js

@@ -24,6 +24,7 @@ define([
     "./src/navigation/NavigationService",
     "./src/navigation/NavigateAction",
     "./src/navigation/OrphanNavigationHandler",
+    "./src/windowing/NewTabAction",
     "./res/templates/browse.html",
     "./res/templates/browse-object.html",
     "./res/templates/browse/object-header.html",
@@ -36,6 +37,7 @@ define([
     NavigationService,
     NavigateAction,
     OrphanNavigationHandler,
+    NewTabAction,
     browseTemplate,
     browseObjectTemplate,
     objectHeaderTemplate,
@@ -126,6 +128,23 @@ define([
                         "depends": [
                             "navigationService"
                         ]
+                    },
+                    {
+                        "key": "window",
+                        "name": "Open In New Tab",
+                        "implementation": NewTabAction,
+                        "description": "Open in a new browser tab",
+                        "category": [
+                            "view-control",
+                            "contextual"
+                        ],
+                        "depends": [
+                            "urlService",
+                            "$window"
+                        ],
+                        "group": "windowing",
+                        "priority": 10,
+                        "cssClass": "icon-new-window"
                     }
                 ],
                 "runs": [

platform/commonUI/browse/src/windowing/NewTabAction.js

@@ -21,39 +21,38 @@
  *****************************************************************************/
 
 /**
- * Module defining url handling.
+ * Module defining NewTabAction (Originally NewWindowAction). Created by vwoeltje on 11/18/14.
  */
+define(
+    [],
+    function () {
+        /**
+         * The new tab action allows a domain object to be opened
+         * into a new browser tab.
+         * @memberof platform/commonUI/browse
+         * @constructor
+         * @implements {Action}
+         */
+        function NewTabAction(urlService, $window, context) {
+            context = context || {};
 
-export function paramsToArray(openmct) {
-    // parse urParams from an object to an array.
-    let urlParams = openmct.router.getParams();
-    let newTabParams = [];
-    for (let key in urlParams) {
-        if ({}.hasOwnProperty.call(urlParams, key)) {
-            let param = `${key}=${urlParams[key]}`;
-            newTabParams.push(param);
+            this.urlService = urlService;
+            this.open = function () {
+                arguments[0] += "&hideTree=true&hideInspector=true";
+                $window.open.apply($window, arguments);
+            };
+
+            // Choose the object to be opened into a new tab
+            this.domainObject = context.selectedObject || context.domainObject;
         }
+
+        NewTabAction.prototype.perform = function () {
+            this.open(
+                this.urlService.urlForNewTab("browse", this.domainObject),
+                "_blank"
+            );
+        };
+
+        return NewTabAction;
     }
-
-    return newTabParams;
-}
-
-export function identifierToString(openmct, objectPath) {
-    let identifier = '#/browse/' + objectPath.map(function (o) {
-        return o && openmct.objects.makeKeyString(o.identifier);
-    })
-        .reverse()
-        .join('/');
-
-    return identifier;
-}
-
-export default function objectPathToUrl(openmct, objectPath) {
-    let url = identifierToString(openmct, objectPath);
-    let urlParams = paramsToArray(openmct);
-    if (urlParams.length) {
-        url += '?' + urlParams.join('&');
-    }
-
-    return url;
-}
+);

platform/commonUI/browse/test/windowing/NewTabActionSpec.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/windowing/NewTabAction"],
+    function (NewTabAction) {
+
+        describe("The new tab action", function () {
+            var actionSelected,
+                actionCurrent,
+                mockWindow,
+                mockContextCurrent,
+                mockContextSelected,
+                mockUrlService;
+
+            beforeEach(function () {
+                mockWindow = jasmine.createSpyObj("$window", ["open", "location"]);
+
+                // Context if the current object is selected
+                // For example, when the top right new tab
+                // button is clicked, the user is using the
+                // current domainObject
+                mockContextCurrent = jasmine.createSpyObj("context", ["domainObject"]);
+
+                // Context if the selected object is selected
+                // For example, when an object in the left
+                // tree is opened in a new tab using the
+                // context menu
+                mockContextSelected = jasmine.createSpyObj("context", ["selectedObject",
+                    "domainObject"]);
+
+                // Mocks the urlService used to make the new tab's url from a
+                // domainObject and mode
+                mockUrlService = jasmine.createSpyObj("urlService", ["urlForNewTab"]);
+
+                // Action done using the current context or mockContextCurrent
+                actionCurrent = new NewTabAction(mockUrlService, mockWindow,
+                    mockContextCurrent);
+
+                // Action done using the selected context or mockContextSelected
+                actionSelected = new NewTabAction(mockUrlService, mockWindow,
+                    mockContextSelected);
+
+            });
+
+            it("new tab with current url is opened", function () {
+                actionCurrent.perform();
+            });
+
+            it("new tab with a selected url is opened", function () {
+                actionSelected.perform();
+            });
+
+        });
+    }
+);

src/MCT.js

@@ -274,7 +274,6 @@ define([
         this.install(ImageryPlugin.default());
         this.install(this.plugins.FlexibleLayout());
         this.install(this.plugins.GoToOriginalAction());
-        this.install(this.plugins.OpenInNewTabAction());
         this.install(this.plugins.ImportExport());
         this.install(this.plugins.WebPage());
         this.install(this.plugins.Condition());

src/adapter/services/ExportImageService.js

@@ -48,12 +48,12 @@ define(
          * Converts an HTML element into a PNG or JPG Blob.
          * @private
          * @param {node} element that will be converted to an image
-         * @param {object} options Image options.
+         * @param {string} type of image to convert the element to.
          * @returns {promise}
          */
-        ExportImageService.prototype.renderElement = function (element, {imageType, className, thumbnailSize}) {
-            const self = this;
+        ExportImageService.prototype.renderElement = function (element, imageType, className) {
             const dialogService = this.dialogService;
+
             const dialog = dialogService.showBlockingMessage({
                 title: "Capturing...",
                 hint: "Capturing an image",
@@ -90,16 +90,7 @@ define(
                 dialog.dismiss();
 
                 return new Promise(function (resolve, reject) {
-                    if (thumbnailSize) {
-                        const thumbnail = self.getThumbnail(canvas, mimeType, thumbnailSize);
-
-                        return canvas.toBlob(blob => resolve({
-                            blob,
-                            thumbnail
-                        }), mimeType);
-                    }
-
-                    return canvas.toBlob(blob => resolve({ blob }), mimeType);
+                    return canvas.toBlob(resolve, mimeType);
                 });
             }, function (error) {
                 console.log('error capturing image', error);
@@ -118,17 +109,6 @@ define(
             });
         };
 
-        ExportImageService.prototype.getThumbnail = function (canvas, mimeType, size) {
-            const thumbnailCanvas = document.createElement('canvas');
-            thumbnailCanvas.setAttribute('width', size.width);
-            thumbnailCanvas.setAttribute('height', size.height);
-            const ctx = thumbnailCanvas.getContext('2d');
-            ctx.globalCompositeOperation = "copy";
-            ctx.drawImage(canvas, 0, 0, canvas.width, canvas.height, 0, 0, size.width, size.height);
-
-            return thumbnailCanvas.toDataURL(mimeType);
-        };
-
         /**
          * Takes a screenshot of a DOM node and exports to JPG.
          * @param {node} element to be exported
@@ -139,13 +119,9 @@ define(
         ExportImageService.prototype.exportJPG = function (element, filename, className) {
             const processedFilename = replaceDotsWithUnderscores(filename);
 
-            return this.renderElement(element, {
-                imageType: 'jpg',
-                className
-            })
-                .then(function (img) {
-                    saveAs(img.blob, processedFilename);
-                });
+            return this.renderElement(element, "jpg", className).then(function (img) {
+                saveAs(img, processedFilename);
+            });
         };
 
         /**
@@ -158,13 +134,9 @@ define(
         ExportImageService.prototype.exportPNG = function (element, filename, className) {
             const processedFilename = replaceDotsWithUnderscores(filename);
 
-            return this.renderElement(element, {
-                imageType: 'png',
-                className
-            })
-                .then(function (img) {
-                    saveAs(img.blob, processedFilename);
-                });
+            return this.renderElement(element, "png", className).then(function (img) {
+                saveAs(img, processedFilename);
+            });
         };
 
         /**
@@ -174,12 +146,8 @@ define(
          * @returns {promise}
          */
 
-        ExportImageService.prototype.exportPNGtoSRC = function (element, options) {
-
-            return this.renderElement(element, {
-                imageType: 'png',
-                ...options
-            });
+        ExportImageService.prototype.exportPNGtoSRC = function (element, className) {
+            return this.renderElement(element, "png", className);
         };
 
         function replaceDotsWithUnderscores(filename) {

src/api/objects/ObjectAPI.js

@@ -45,8 +45,6 @@ function ObjectAPI(typeRegistry, openmct) {
     this.rootProvider = new RootObjectProvider(this.rootRegistry);
     this.cache = {};
     this.interceptorRegistry = new InterceptorRegistry();
-
-    this.SYNCHRONIZED_OBJECT_TYPES = ['notebook', 'plan'];
 }
 
 /**
@@ -406,16 +404,11 @@ ObjectAPI.prototype._toMutable = function (object) {
     let provider = this.getProvider(identifier);
 
     if (provider !== undefined
-        && provider.observe !== undefined
-        && this.SYNCHRONIZED_OBJECT_TYPES.includes(object.type)) {
+        && provider.observe !== undefined) {
         let unobserve = provider.observe(identifier, (updatedModel) => {
-            if (updatedModel.persisted > mutableObject.modified) {
-                //Don't replace with a stale model. This can happen on slow connections when multiple mutations happen
-                //in rapid succession and intermediate persistence states are returned by the observe function.
-                mutableObject.$refresh(updatedModel);
-            }
+            mutableObject.$refresh(updatedModel);
         });
-        mutableObject.$on('$_destroy', () => {
+        mutableObject.$on('$destroy', () => {
             unobserve();
         });
     }

src/api/objects/ObjectAPISpec.js

@@ -163,22 +163,14 @@ describe("The Object API", () => {
                     key: 'test-key'
                 },
                 name: 'test object',
-                type: 'notebook',
                 otherAttribute: 'other-attribute-value',
-                modified: 0,
-                persisted: 0,
                 objectAttribute: {
                     embeddedObject: {
                         embeddedKey: 'embedded-value'
                     }
                 }
             };
-            updatedTestObject = Object.assign({
-                otherAttribute: 'changed-attribute-value'
-            }, testObject);
-            updatedTestObject.modified = 1;
-            updatedTestObject.persisted = 1;
-
+            updatedTestObject = Object.assign({otherAttribute: 'changed-attribute-value'}, testObject);
             mockProvider = jasmine.createSpyObj("mock provider", [
                 "get",
                 "create",
@@ -190,8 +182,6 @@ describe("The Object API", () => {
             mockProvider.observeObjectChanges.and.callFake(() => {
                 callbacks[0](updatedTestObject);
                 callbacks.splice(0, 1);
-
-                return () => {};
             });
             mockProvider.observe.and.callFake((id, callback) => {
                 if (callbacks.length === 0) {
@@ -199,8 +189,6 @@ describe("The Object API", () => {
                 } else {
                     callbacks[0] = callback;
                 }
-
-                return () => {};
             });
 
             objectAPI.addProvider(TEST_NAMESPACE, mockProvider);

src/api/telemetry/TelemetryAPI.js

@@ -567,24 +567,21 @@ define([
      * @method limits returns a limits object of
      * type {
      *          level1: {
-     *              low: { key1: value1, key2: value2, color: <supportedColor> },
-     *              high: { key1: value1, key2: value2, color: <supportedColor> }
+     *              low: { key1: value1, key2: value2 },
+     *              high: { key1: value1, key2: value2 }
      *          },
      *          level2: {
      *              low: { key1: value1, key2: value2 },
      *              high: { key1: value1, key2: value2 }
      *          }
      *       }
-     *  supported colors are purple, red, orange, yellow and cyan
      * @memberof module:openmct.TelemetryAPI~TelemetryProvider#
      */
     TelemetryAPI.prototype.getLimits = function (domainObject) {
         const provider = this.findLimitEvaluator(domainObject);
         if (!provider || !provider.getLimits) {
             return {
-                limits: function () {
-                    return Promise.resolve(undefined);
-                }
+                limits: function () {}
             };
         }
 

src/api/time/TimeAPI.js

@@ -328,6 +328,8 @@ define(['EventEmitter'], function (EventEmitter) {
      * using current offsets.
      */
     TimeAPI.prototype.tick = function (timestamp) {
+        // this updates bounds at real time - henry
+        console.log('timestamp', timestamp);
         const newBounds = {
             start: timestamp + this.offsets.start,
             end: timestamp + this.offsets.end
@@ -420,6 +422,7 @@ define(['EventEmitter'], function (EventEmitter) {
      * @returns {ClockOffsets}
      */
     TimeAPI.prototype.clockOffsets = function (offsets) {
+        console.log('clock offset', offsets);
         if (arguments.length > 0) {
 
             const validationResult = this.validateOffsets(offsets);
@@ -430,6 +433,8 @@ define(['EventEmitter'], function (EventEmitter) {
             this.offsets = offsets;
 
             const currentValue = this.activeClock.currentValue();
+            // maybe current value is missing for lmst - henry
+            console.log('curr value', currentValue);
             const newBounds = {
                 start: currentValue + offsets.start,
                 end: currentValue + offsets.end

src/plugins/condition/StyleRuleManager.js

@@ -27,17 +27,15 @@ export default class StyleRuleManager extends EventEmitter {
         super();
         this.openmct = openmct;
         this.callback = callback;
-        this.refreshData = this.refreshData.bind(this);
-        this.toggleSubscription = this.toggleSubscription.bind(this);
         if (suppressSubscriptionOnEdit) {
-            this.openmct.editor.on('isEditing', this.toggleSubscription);
+            this.openmct.editor.on('isEditing', this.toggleSubscription.bind(this));
             this.isEditing = this.openmct.editor.editing;
         }
 
         if (styleConfiguration) {
             this.initialize(styleConfiguration);
             if (styleConfiguration.conditionSetIdentifier) {
-                this.openmct.time.on("bounds", this.refreshData);
+                this.openmct.time.on("bounds", this.refreshData.bind(this));
                 this.subscribeToConditionSet();
             } else {
                 this.applyStaticStyle();

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

@@ -21,10 +21,6 @@
         margin-left: $interiorMargin;
     }
 
-    &__value {
-        @include isLimit();
-    }
-
     .c-frame & {
         @include abs();
         border: 1px solid transparent;

src/plugins/imagery/ImageryConfigurationViewProvider.js

@@ -0,0 +1,80 @@
+/*****************************************************************************
+ * 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 Vue from 'vue';
+import ImageryOptions from './components/ImageryOptions.vue';
+
+export default function ImageryConfigurationViewProvider(openmct) {
+
+    return {
+        key: 'imagery-inspector',
+        name: 'Imagery Inspector View',
+        canView: function (selection) {
+            console.log('here');
+            // if (selection.length === 0 || selection[0].length === 0) {
+            //     return false;
+            // }
+
+            // let object = selection[0][0].context.item;
+            return true;
+            // return object
+            //     && object.type === 'telemetry.plot.overlay';
+        },
+        view: function (selection) {
+            let component;
+            let objectPath;
+            console.log('selec', selection);
+            if (selection.length) {
+                objectPath = selection[0].map((selectionItem) => {
+                    return selectionItem.context.item;
+                });
+            }
+
+            return {
+                show: function (element) {
+                    component = new Vue({
+                        el: element,
+                        components: {
+                            ImageryOptions: ImageryOptions
+                        },
+                        provide: {
+                            openmct,
+                            domainObject: selection[0][0].context.item,
+                            path: objectPath
+                        },
+                        template: '<imagery-options></imagery-options>'
+                    });
+                },
+                destroy: function () {
+                    if (component) {
+                        component.$destroy();
+                        component = undefined;
+                    }
+                }
+            };
+        },
+        priority: function () {
+            return 1;
+        }
+    };
+}
+

src/plugins/imagery/components/ImageryOptions.vue

@@ -0,0 +1,14 @@
+<template>
+<div>new Imagery config options</div>
+</template>
+
+<script>
+
+export default {
+    data() {
+    },
+    mounted() {
+        console.log('imagery config');
+    }
+};
+</script>

src/plugins/imagery/plugin.js

@@ -21,10 +21,13 @@
  *****************************************************************************/
 
 import ImageryViewProvider from './ImageryViewProvider';
+import ImageryConfigurationViewProvider from './ImageryConfigurationViewProvider';
 
 export default function () {
     return function install(openmct) {
         openmct.objectViews.addProvider(new ImageryViewProvider(openmct));
+        // for inspector view config
+        openmct.objectViews.addProvider(new ImageryConfigurationViewProvider(openmct));
     };
 }
 

src/plugins/notebook/components/Notebook.vue

@@ -31,7 +31,7 @@
     </div>
     <SearchResults v-if="search.length"
                    ref="searchResults"
-                   :domain-object="domainObject"
+                   :domain-object="internalDomainObject"
                    :results="searchResults"
                    @changeSectionPage="changeSelectedSection"
                    @updateEntries="updateEntries"
@@ -43,18 +43,15 @@
                  class="c-notebook__nav c-sidebar c-drawer c-drawer--align-left"
                  :class="[{'is-expanded': showNav}, {'c-drawer--push': !sidebarCoversEntries}, {'c-drawer--overlays': sidebarCoversEntries}]"
                  :default-page-id="defaultPageId"
-                 :selected-page-id="selectedPageId"
                  :default-section-id="defaultSectionId"
-                 :selected-section-id="selectedSectionId"
-                 :domain-object="domainObject"
-                 :page-title="domainObject.configuration.pageTitle"
-                 :section-title="domainObject.configuration.sectionTitle"
+                 :domain-object="internalDomainObject"
+                 :page-title="internalDomainObject.configuration.pageTitle"
+                 :section-title="internalDomainObject.configuration.sectionTitle"
                  :sections="sections"
+                 :selected-section="selectedSection"
                  :sidebar-covers-entries="sidebarCoversEntries"
                  @pagesChanged="pagesChanged"
-                 @selectPage="selectPage"
                  @sectionsChanged="sectionsChanged"
-                 @selectSection="selectSection"
                  @toggleNav="toggleNav"
         />
         <div class="c-notebook__page-view">
@@ -64,10 +61,10 @@
                 ></button>
                 <div class="c-notebook__page-view__path c-path">
                     <span class="c-notebook__path__section c-path__item">
-                        {{ selectedSection ? selectedSection.name : '' }}
+                        {{ getSelectedSection() ? getSelectedSection().name : '' }}
                     </span>
                     <span class="c-notebook__path__page c-path__item">
-                        {{ selectedPage ? selectedPage.name : '' }}
+                        {{ getSelectedPage() ? getSelectedPage().name : '' }}
                     </span>
                 </div>
                 <div class="c-notebook__page-view__controls">
@@ -118,9 +115,9 @@
                 <NotebookEntry v-for="entry in filteredAndSortedEntries"
                                :key="entry.id"
                                :entry="entry"
-                               :domain-object="domainObject"
-                               :selected-page="selectedPage"
-                               :selected-section="selectedSection"
+                               :domain-object="internalDomainObject"
+                               :selected-page="getSelectedPage()"
+                               :selected-section="getSelectedSection()"
                                :read-only="false"
                                @deleteEntry="deleteEntry"
                                @updateEntry="updateEntry"
@@ -155,19 +152,14 @@ export default {
         SearchResults,
         Sidebar
     },
-    inject: ['openmct', 'snapshotContainer'],
-    props: {
-        domainObject: {
-            type: Object,
-            required: true
-        }
-    },
+    inject: ['openmct', 'domainObject', 'snapshotContainer'],
     data() {
         return {
-            selectedSectionId: this.getDefaultSectionId(),
-            selectedPageId: this.getDefaultPageId(),
+            defaultPageId: getDefaultNotebook() ? getDefaultNotebook().page.id : '',
+            defaultSectionId: getDefaultNotebook() ? getDefaultNotebook().section.id : '',
             defaultSort: this.domainObject.configuration.defaultSort,
             focusEntryId: null,
+            internalDomainObject: this.domainObject,
             search: '',
             searchResults: [],
             showTime: 0,
@@ -176,15 +168,9 @@ export default {
         };
     },
     computed: {
-        defaultPageId() {
-            return this.getDefaultPageId();
-        },
-        defaultSectionId() {
-            return this.getDefaultSectionId();
-        },
         filteredAndSortedEntries() {
             const filterTime = Date.now();
-            const pageEntries = getNotebookEntries(this.domainObject, this.selectedSection, this.selectedPage) || [];
+            const pageEntries = getNotebookEntries(this.internalDomainObject, this.selectedSection, this.selectedPage) || [];
 
             const hours = parseInt(this.showTime, 10);
             const filteredPageEntriesByTime = hours
@@ -199,28 +185,22 @@ export default {
             return this.getPages() || [];
         },
         sections() {
-            return this.getSections();
+            return this.internalDomainObject.configuration.sections || [];
         },
         selectedPage() {
             const pages = this.getPages();
-            const selectedPage = pages.find(page => page.id === this.selectedPageId);
-
-            if (selectedPage) {
-                return selectedPage;
+            if (!pages) {
+                return {};
             }
 
-            if (!selectedPage && !pages.length) {
-                return undefined;
-            }
-
-            return pages[0];
+            return pages.find(page => page.isSelected);
         },
         selectedSection() {
             if (!this.sections.length) {
-                return null;
+                return {};
             }
 
-            return this.sections.find(section => section.id === this.selectedSectionId);
+            return this.sections.find(section => section.isSelected);
         }
     },
     watch: {
@@ -230,14 +210,16 @@ export default {
     },
     beforeMount() {
         this.getSearchResults = debounce(this.getSearchResults, 500);
-        this.syncUrlWithPageAndSection = debounce(this.syncUrlWithPageAndSection, 100);
     },
     mounted() {
+        this.unlisten = this.openmct.objects.observe(this.internalDomainObject, '*', this.updateInternalDomainObject);
         this.formatSidebar();
-        this.setSectionAndPageFromUrl();
 
         window.addEventListener('orientationchange', this.formatSidebar);
-        window.addEventListener('hashchange', this.setSectionAndPageFromUrl);
+        window.addEventListener("hashchange", this.navigateToSectionPage, false);
+        this.openmct.router.on('change:params', this.changeSectionPage);
+
+        this.navigateToSectionPage();
     },
     beforeDestroy() {
         if (this.unlisten) {
@@ -245,7 +227,8 @@ export default {
         }
 
         window.removeEventListener('orientationchange', this.formatSidebar);
-        window.removeEventListener('hashchange', this.setSectionAndPageFromUrl);
+        window.removeEventListener("hashchange", this.navigateToSectionPage);
+        this.openmct.router.off('change:params', this.changeSectionPage);
     },
     updated: function () {
         this.$nextTick(() => {
@@ -301,21 +284,14 @@ export default {
             this.sectionsChanged({ sections });
             this.resetSearch();
         },
-        setSectionAndPageFromUrl() {
-            let sectionId = this.getSectionIdFromUrl() || this.selectedSectionId;
-            let pageId = this.getPageIdFromUrl() || this.selectedPageId;
-
-            this.selectSection(sectionId);
-            this.selectPage(pageId);
-        },
         createNotebookStorageObject() {
             const notebookMeta = {
-                name: this.domainObject.name,
-                identifier: this.domainObject.identifier,
+                name: this.internalDomainObject.name,
+                identifier: this.internalDomainObject.identifier,
                 link: this.getLinktoNotebook()
             };
-            const page = this.selectedPage;
-            const section = this.selectedSection;
+            const page = this.getSelectedPage();
+            const section = this.getSelectedSection();
 
             return {
                 notebookMeta,
@@ -324,7 +300,8 @@ export default {
             };
         },
         deleteEntry(entryId) {
-            const entryPos = getEntryPosById(entryId, this.domainObject, this.selectedSection, this.selectedPage);
+            const self = this;
+            const entryPos = getEntryPosById(entryId, this.internalDomainObject, this.selectedSection, this.selectedPage);
             if (entryPos === -1) {
                 this.openmct.notifications.alert('Warning: unable to delete entry');
                 console.error(`unable to delete entry ${entryId} from section ${this.selectedSection}, page ${this.selectedPage}`);
@@ -340,9 +317,9 @@ export default {
                         label: "Ok",
                         emphasis: true,
                         callback: () => {
-                            const entries = getNotebookEntries(this.domainObject, this.selectedSection, this.selectedPage);
+                            const entries = getNotebookEntries(self.internalDomainObject, self.selectedSection, self.selectedPage);
                             entries.splice(entryPos, 1);
-                            this.updateEntries(entries);
+                            self.updateEntries(entries);
                             dialog.dismiss();
                         }
                     },
@@ -418,37 +395,6 @@ export default {
             const sidebarCoversEntries = (isPhone || (isTablet && isPortrait) || isInLayout);
             this.sidebarCoversEntries = sidebarCoversEntries;
         },
-        getDefaultPageId() {
-            let defaultPageId;
-
-            if (this.isDefaultNotebook()) {
-                defaultPageId = getDefaultNotebook().page.id;
-            } else {
-                const firstSection = this.getSections()[0];
-                defaultPageId = firstSection && firstSection.pages[0].id;
-            }
-
-            return defaultPageId;
-        },
-        isDefaultNotebook() {
-            const defaultNotebook = getDefaultNotebook();
-            const defaultNotebookIdentifier = defaultNotebook && defaultNotebook.notebookMeta.identifier;
-
-            return defaultNotebookIdentifier !== null
-                && this.openmct.objects.areIdsEqual(defaultNotebookIdentifier, this.domainObject.identifier);
-        },
-        getDefaultSectionId() {
-            let defaultSectionId;
-
-            if (this.isDefaultNotebook()) {
-                defaultSectionId = getDefaultNotebook().section.id;
-            } else {
-                const firstSection = this.getSections()[0];
-                defaultSectionId = firstSection && firstSection.id;
-            }
-
-            return defaultSectionId;
-        },
         getDefaultNotebookObject() {
             const oldNotebookStorage = getDefaultNotebook();
             if (!oldNotebookStorage) {
@@ -477,17 +423,14 @@ export default {
         getSection(id) {
             return this.sections.find(s => s.id === id);
         },
-        getSections() {
-            return this.domainObject.configuration.sections || [];
-        },
         getSearchResults() {
             if (!this.search.length) {
                 return [];
             }
 
             const output = [];
-            const sections = this.domainObject.configuration.sections;
-            const entries = this.domainObject.configuration.entries;
+            const sections = this.internalDomainObject.configuration.sections;
+            const entries = this.internalDomainObject.configuration.entries;
             const searchTextLower = this.search.toLowerCase();
             const originalSearchText = this.search;
             let sectionTrackPageHit;
@@ -566,25 +509,77 @@ export default {
             this.searchResults = output;
         },
         getPages() {
-            const selectedSection = this.selectedSection;
+            const selectedSection = this.getSelectedSection();
             if (!selectedSection || !selectedSection.pages.length) {
                 return [];
             }
 
             return selectedSection.pages;
         },
+        getSelectedPage() {
+            const pages = this.getPages();
+            if (!pages) {
+                return null;
+            }
+
+            const selectedPage = pages.find(page => page.isSelected);
+            if (selectedPage) {
+                return selectedPage;
+            }
+
+            if (!selectedPage && !pages.length) {
+                return null;
+            }
+
+            pages[0].isSelected = true;
+
+            return pages[0];
+        },
+        getSelectedSection() {
+            if (!this.sections.length) {
+                return null;
+            }
+
+            return this.sections.find(section => section.isSelected);
+        },
+        navigateToSectionPage() {
+            let { pageId, sectionId } = this.openmct.router.getParams();
+
+            if (!pageId || !sectionId) {
+                sectionId = this.selectedSection.id;
+                pageId = this.selectedPage.id;
+            }
+
+            const sections = this.sections.map(s => {
+                s.isSelected = false;
+                if (s.id === sectionId) {
+                    s.isSelected = true;
+                    s.pages.forEach(p => p.isSelected = (p.id === pageId));
+                }
+
+                return s;
+            });
+
+            const selectedSectionId = this.selectedSection && this.selectedSection.id;
+            const selectedPageId = this.selectedPage && this.selectedPage.id;
+            if (selectedPageId === pageId && selectedSectionId === sectionId) {
+                return;
+            }
+
+            this.sectionsChanged({ sections });
+        },
         newEntry(embed = null) {
             this.resetSearch();
             const notebookStorage = this.createNotebookStorageObject();
             this.updateDefaultNotebook(notebookStorage);
-            const id = addNotebookEntry(this.openmct, this.domainObject, notebookStorage, embed);
+            const id = addNotebookEntry(this.openmct, this.internalDomainObject, notebookStorage, embed);
             this.focusEntryId = id;
         },
         orientationChange() {
             this.formatSidebar();
         },
         pagesChanged({ pages = [], id = null}) {
-            const selectedSection = this.selectedSection;
+            const selectedSection = this.getSelectedSection();
             if (!selectedSection) {
                 return;
             }
@@ -599,6 +594,7 @@ export default {
             });
 
             this.sectionsChanged({ sections });
+            this.updateDefaultNotebookPage(pages, id);
         },
         removeDefaultClass(domainObject) {
             if (!domainObject) {
@@ -617,10 +613,10 @@ export default {
         async updateDefaultNotebook(notebookStorage) {
             const defaultNotebookObject = await this.getDefaultNotebookObject();
             if (!defaultNotebookObject) {
-                setDefaultNotebook(this.openmct, notebookStorage, this.domainObject);
+                setDefaultNotebook(this.openmct, notebookStorage, this.internalDomainObject);
             } else if (objectUtils.makeKeyString(defaultNotebookObject.identifier) !== objectUtils.makeKeyString(notebookStorage.notebookMeta.identifier)) {
                 this.removeDefaultClass(defaultNotebookObject);
-                setDefaultNotebook(this.openmct, notebookStorage, this.domainObject);
+                setDefaultNotebook(this.openmct, notebookStorage, this.internalDomainObject);
             }
 
             if (this.defaultSectionId && this.defaultSectionId.length === 0 || this.defaultSectionId !== notebookStorage.section.id) {
@@ -640,7 +636,7 @@ export default {
 
             const notebookStorage = getDefaultNotebook();
             if (!notebookStorage
-                    || notebookStorage.notebookMeta.identifier.key !== this.domainObject.identifier.key) {
+                    || notebookStorage.notebookMeta.identifier.key !== this.internalDomainObject.identifier.key) {
                 return;
             }
 
@@ -649,7 +645,7 @@ export default {
             if (!page && defaultNotebookPage.id === id) {
                 this.defaultSectionId = null;
                 this.defaultPageId = null;
-                this.removeDefaultClass(this.domainObject);
+                this.removeDefaultClass(this.internalDomainObject);
                 clearDefaultNotebook();
 
                 return;
@@ -668,7 +664,7 @@ export default {
 
             const notebookStorage = getDefaultNotebook();
             if (!notebookStorage
-                    || notebookStorage.notebookMeta.identifier.key !== this.domainObject.identifier.key) {
+                    || notebookStorage.notebookMeta.identifier.key !== this.internalDomainObject.identifier.key) {
                 return;
             }
 
@@ -677,7 +673,7 @@ export default {
             if (!section && defaultNotebookSection.id === id) {
                 this.defaultSectionId = null;
                 this.defaultPageId = null;
-                this.removeDefaultClass(this.domainObject);
+                this.removeDefaultClass(this.internalDomainObject);
                 clearDefaultNotebook();
 
                 return;
@@ -690,46 +686,50 @@ export default {
             setDefaultNotebookSection(section);
         },
         updateEntry(entry) {
-            const entries = getNotebookEntries(this.domainObject, this.selectedSection, this.selectedPage);
-            const entryPos = getEntryPosById(entry.id, this.domainObject, this.selectedSection, this.selectedPage);
+            const entries = getNotebookEntries(this.internalDomainObject, this.selectedSection, this.selectedPage);
+            const entryPos = getEntryPosById(entry.id, this.internalDomainObject, this.selectedSection, this.selectedPage);
             entries[entryPos] = entry;
 
             this.updateEntries(entries);
         },
         updateEntries(entries) {
-            const configuration = this.domainObject.configuration;
+            const configuration = this.internalDomainObject.configuration;
             const notebookEntries = configuration.entries || {};
             notebookEntries[this.selectedSection.id][this.selectedPage.id] = entries;
 
-            mutateObject(this.openmct, this.domainObject, 'configuration.entries', notebookEntries);
+            mutateObject(this.openmct, this.internalDomainObject, 'configuration.entries', notebookEntries);
         },
-        getPageIdFromUrl() {
-            return this.openmct.router.getParams().pageId;
+        updateInternalDomainObject(domainObject) {
+            this.internalDomainObject = domainObject;
         },
-        getSectionIdFromUrl() {
-            return this.openmct.router.getParams().sectionId;
-        },
-        syncUrlWithPageAndSection() {
+        updateParams(sections) {
+            const selectedSection = sections.find(s => s.isSelected);
+            if (!selectedSection) {
+                return;
+            }
+
+            const selectedPage = selectedSection.pages.find(p => p.isSelected);
+            if (!selectedPage) {
+                return;
+            }
+
+            const sectionId = selectedSection.id;
+            const pageId = selectedPage.id;
+
+            if (!sectionId || !pageId) {
+                return;
+            }
+
             this.openmct.router.updateParams({
-                pageId: this.selectedPageId,
-                sectionId: this.selectedSectionId
+                sectionId,
+                pageId
             });
         },
         sectionsChanged({ sections, id = null }) {
-            mutateObject(this.openmct, this.domainObject, 'configuration.sections', sections);
+            mutateObject(this.openmct, this.internalDomainObject, 'configuration.sections', sections);
+
+            this.updateParams(sections);
             this.updateDefaultNotebookSection(sections, id);
-        },
-        selectPage(pageId) {
-            this.selectedPageId = pageId;
-            this.syncUrlWithPageAndSection();
-        },
-        selectSection(sectionId) {
-            this.selectedSectionId = sectionId;
-
-            const defaultPageId = this.selectedSection.pages[0].id;
-            this.selectPage(defaultPageId);
-
-            this.syncUrlWithPageAndSection();
         }
     }
 };

src/plugins/notebook/components/NotebookEmbed.vue

@@ -4,7 +4,7 @@
          class="c-ne__embed__snap-thumb"
          @click="openSnapshot()"
     >
-        <img :src="thumbnailImage">
+        <img :src="embed.snapshot.src">
     </div>
     <div class="c-ne__embed__info">
         <div class="c-ne__embed__name">
@@ -25,14 +25,11 @@
 
 <script>
 import Moment from 'moment';
+import PopupMenu from './PopupMenu.vue';
 import PreviewAction from '../../../ui/preview/PreviewAction';
 import RemoveDialog from '../utils/removeDialog';
 import PainterroInstance from '../utils/painterroInstance';
 import SnapshotTemplate from './snapshot-template.html';
-
-import { updateNotebookImageDomainObject } from '../utils/notebook-image';
-
-import PopupMenu from './PopupMenu.vue';
 import Vue from 'vue';
 
 export default {
@@ -62,11 +59,6 @@ export default {
     computed: {
         createdOn() {
             return this.formatTime(this.embed.createdOn, 'YYYY-MM-DD HH:mm:ss');
-        },
-        thumbnailImage() {
-            return this.embed.snapshot.thumbnailImage
-                ? this.embed.snapshot.thumbnailImage.src
-                : this.embed.snapshot.src;
         }
     },
     mounted() {
@@ -93,7 +85,7 @@ export default {
                 template: '<div id="snap-annotation"></div>'
             }).$mount();
 
-            const painterroInstance = new PainterroInstance(annotateVue.$el);
+            const painterroInstance = new PainterroInstance(annotateVue.$el, this.updateSnapshot);
             const annotateOverlay = this.openmct.overlays.overlay({
                 element: annotateVue.$el,
                 size: 'large',
@@ -110,12 +102,10 @@ export default {
                     {
                         label: 'Save',
                         callback: () => {
-                            painterroInstance.save((snapshotObject) => {
-                                annotateOverlay.dismiss();
-                                this.snapshotOverlay.dismiss();
-                                this.updateSnapshot(snapshotObject);
-                                this.openSnapshotOverlay(snapshotObject.fullSizeImage.src);
-                            });
+                            painterroInstance.save();
+                            annotateOverlay.dismiss();
+                            this.snapshotOverlay.dismiss();
+                            this.openSnapshot();
                         }
                     }
                 ],
@@ -125,19 +115,7 @@ export default {
             });
 
             painterroInstance.intialize();
-
-            const fullSizeImageObjectIdentifier = this.embed.snapshot.fullSizeImageObjectIdentifier;
-            if (!fullSizeImageObjectIdentifier) {
-                // legacy image data stored in embed
-                painterroInstance.show(this.embed.snapshot.src);
-
-                return;
-            }
-
-            this.openmct.objects.get(fullSizeImageObjectIdentifier)
-                .then(object => {
-                    painterroInstance.show(object.configuration.fullSizeImageURL);
-                });
+            painterroInstance.show(this.embed.snapshot.src);
         },
         changeLocation() {
             const hash = this.embed.historicLink;
@@ -181,29 +159,12 @@ export default {
             removeDialog.show();
         },
         openSnapshot() {
-            const fullSizeImageObjectIdentifier = this.embed.snapshot.fullSizeImageObjectIdentifier;
-            if (!fullSizeImageObjectIdentifier) {
-                // legacy image data stored in embed
-                this.openSnapshotOverlay(this.embed.snapshot.src);
-
-                return;
-            }
-
-            this.openmct.objects.get(fullSizeImageObjectIdentifier)
-                .then(object => {
-                    this.openSnapshotOverlay(object.configuration.fullSizeImageURL);
-                });
-        },
-        openSnapshotOverlay(src) {
             const self = this;
-
             this.snapshot = new Vue({
                 data: () => {
                     return {
                         createdOn: this.createdOn,
-                        name: this.embed.name,
-                        cssClass: this.embed.cssClass,
-                        src
+                        embed: this.embed
                     };
                 },
                 methods: {
@@ -256,9 +217,7 @@ export default {
             this.$emit('updateEmbed', embed);
         },
         updateSnapshot(snapshotObject) {
-            this.embed.snapshot.thumbnailImage = snapshotObject.thumbnailImage;
-
-            updateNotebookImageDomainObject(this.openmct, this.embed.snapshot.fullSizeImageObjectIdentifier, snapshotObject.fullSizeImage);
+            this.embed.snapshot = snapshotObject;
             this.updateEmbed(this.embed);
         }
     }

src/plugins/notebook/components/NotebookEntry.vue

@@ -62,6 +62,7 @@
                 <NotebookEmbed v-for="embed in entry.embeds"
                                :key="embed.id"
                                :embed="embed"
+                               :entry="entry"
                                @removeEmbed="removeEmbed"
                                @updateEmbed="updateEmbed"
                 />
@@ -253,7 +254,6 @@ export default {
         },
         removeEmbed(id) {
             const embedPosition = this.findPositionInArray(this.entry.embeds, id);
-            // TODO: remove notebook snapshot object using object remove API
             this.entry.embeds.splice(embedPosition, 1);
 
             this.$emit('updateEntry', this.entry);

src/plugins/notebook/components/PageCollection.vue

@@ -6,7 +6,6 @@
     >
         <Page ref="pageComponent"
               :default-page-id="defaultPageId"
-              :selected-page-id="selectedPageId"
               :page="page"
               :page-title="pageTitle"
               @deletePage="deletePage"
@@ -34,13 +33,11 @@ export default {
                 return '';
             }
         },
-        selectedPageId: {
-            type: String,
-            required: true
-        },
         domainObject: {
             type: Object,
-            required: true
+            default() {
+                return {};
+            }
         },
         pages: {
             type: Array,
@@ -69,17 +66,7 @@ export default {
             }
         }
     },
-    watch: {
-        pages() {
-            if (!this.containsPage(this.selectedPageId)) {
-                this.selectPage(this.pages[0].id);
-            }
-        }
-    },
     methods: {
-        containsPage(pageId) {
-            return this.pages.some(page => page.id === pageId);
-        },
         deletePage(id) {
             const selectedSection = this.sections.find(s => s.isSelected);
             const page = this.pages.find(p => p.id === id);
@@ -91,29 +78,37 @@ export default {
             const isPageSelected = selectedPage && selectedPage.id === id;
             const isPageDefault = defaultpage && defaultpage.id === id;
             const pages = this.pages.filter(s => s.id !== id);
-            let selectedPageId;
 
             if (isPageSelected && defaultpage) {
                 pages.forEach(s => {
                     s.isSelected = false;
                     if (defaultpage && defaultpage.id === s.id) {
-                        selectedPageId = s.id;
+                        s.isSelected = true;
                     }
                 });
             }
 
             if (pages.length && isPageSelected && (!defaultpage || isPageDefault)) {
-                selectedPageId = pages[0].id;
+                pages[0].isSelected = true;
             }
 
             this.$emit('updatePage', {
                 pages,
                 id
             });
-            this.$emit('selectPage', selectedPageId);
         },
         selectPage(id) {
-            this.$emit('selectPage', id);
+            const pages = this.pages.map(page => {
+                const isSelected = page.id === id;
+                page.isSelected = isSelected;
+
+                return page;
+            });
+
+            this.$emit('updatePage', {
+                pages,
+                id
+            });
 
             // Add test here for whether or not to toggle the nav
             if (this.sidebarCoversEntries) {

src/plugins/notebook/components/PageComponent.vue

@@ -1,6 +1,6 @@
 <template>
 <div class="c-list__item js-list__item"
-     :class="[{ 'is-selected': isSelected, 'is-notebook-default' : (defaultPageId === page.id) }]"
+     :class="[{ 'is-selected': page.isSelected, 'is-notebook-default' : (defaultPageId === page.id) }]"
      :data-id="page.id"
      @click="selectPage"
 >
@@ -29,10 +29,6 @@ export default {
                 return '';
             }
         },
-        selectedPageId: {
-            type: String,
-            required: true
-        },
         page: {
             type: Object,
             required: true
@@ -50,11 +46,6 @@ export default {
             removeActionString: `Delete ${this.pageTitle}`
         };
     },
-    computed: {
-        isSelected() {
-            return this.selectedPageId === this.page.id;
-        }
-    },
     watch: {
         page(newPage) {
             this.toggleContentEditable(newPage);
@@ -82,7 +73,7 @@ export default {
             this.$emit('deletePage', this.page.id);
         },
         getRemoveDialog() {
-            const message = 'Other users may be editing entries in this page, and deleting it is permanent. Do you want to continue?';
+            const message = 'This action will delete this page and all of its entries. Do you want to continue?';
             const options = {
                 name: this.removeActionString,
                 callback: this.deletePage.bind(this),

src/plugins/notebook/components/SectionCollection.vue

@@ -4,14 +4,13 @@
         :key="section.id"
         class="c-list__item-h"
     >
-        <NotebookSection ref="sectionComponent"
-                         :default-section-id="defaultSectionId"
-                         :selected-section-id="selectedSectionId"
-                         :section="section"
-                         :section-title="sectionTitle"
-                         @deleteSection="deleteSection"
-                         @renameSection="updateSection"
-                         @selectSection="selectSection"
+        <sectionComponent ref="sectionComponent"
+                          :default-section-id="defaultSectionId"
+                          :section="section"
+                          :section-title="sectionTitle"
+                          @deleteSection="deleteSection"
+                          @renameSection="updateSection"
+                          @selectSection="selectSection"
         />
     </li>
 </ul>
@@ -20,11 +19,11 @@
 <script>
 import { deleteNotebookEntries } from '../utils/notebook-entries';
 import { getDefaultNotebook } from '../utils/notebook-storage';
-import SectionComponent from './SectionComponent.vue';
+import sectionComponent from './SectionComponent.vue';
 
 export default {
     components: {
-        NotebookSection: SectionComponent
+        sectionComponent
     },
     inject: ['openmct'],
     props: {
@@ -34,10 +33,6 @@ export default {
                 return '';
             }
         },
-        selectedSectionId: {
-            type: String,
-            required: true
-        },
         domainObject: {
             type: Object,
             default() {
@@ -58,22 +53,12 @@ export default {
             }
         }
     },
-    watch: {
-        sections() {
-            if (!this.containsSection(this.selectedSectionId)) {
-                this.selectSection(this.sections[0].id);
-            }
-        }
-    },
     methods: {
-        containsSection(sectionId) {
-            return this.sections.some(section => section.id === sectionId);
-        },
         deleteSection(id) {
             const section = this.sections.find(s => s.id === id);
             deleteNotebookEntries(this.openmct, this.domainObject, section);
 
-            const selectedSection = this.sections.find(s => s.id === this.selectedSectionId);
+            const selectedSection = this.sections.find(s => s.isSelected);
             const defaultNotebook = getDefaultNotebook();
             const defaultSection = defaultNotebook && defaultNotebook.section;
             const isSectionSelected = selectedSection && selectedSection.id === id;
@@ -98,8 +83,18 @@ export default {
                 id
             });
         },
-        selectSection(id) {
-            this.$emit('selectSection', id);
+        selectSection(id, newSections) {
+            const currentSections = newSections || this.sections;
+            const sections = currentSections.map(section => {
+                const isSelected = section.id === id;
+                section.isSelected = isSelected;
+
+                return section;
+            });
+            this.$emit('updateSection', {
+                sections,
+                id
+            });
         },
         updateSection(newSection) {
             const id = newSection.id;

src/plugins/notebook/components/SectionComponent.vue

@@ -1,6 +1,6 @@
 <template>
 <div class="c-list__item js-list__item"
-     :class="[{ 'is-selected': isSelected, 'is-notebook-default' : (defaultSectionId === section.id) }]"
+     :class="[{ 'is-selected': section.isSelected, 'is-notebook-default' : (defaultSectionId === section.id) }]"
      :data-id="section.id"
      @click="selectSection"
 >
@@ -13,6 +13,9 @@
 </div>
 </template>
 
+<style lang="scss">
+</style>
+
 <script>
 import PopupMenu from './PopupMenu.vue';
 import RemoveDialog from '../utils/removeDialog';
@@ -29,10 +32,6 @@ export default {
                 return '';
             }
         },
-        selectedSectionId: {
-            type: String,
-            required: true
-        },
         section: {
             type: Object,
             required: true
@@ -50,11 +49,6 @@ export default {
             removeActionString: `Delete ${this.sectionTitle}`
         };
     },
-    computed: {
-        isSelected() {
-            return this.selectedSectionId === this.section.id;
-        }
-    },
     watch: {
         section(newSection) {
             this.toggleContentEditable(newSection);
@@ -82,7 +76,7 @@ export default {
             this.$emit('deleteSection', this.section.id);
         },
         getRemoveDialog() {
-            const message = 'Other users may be editing entries in this section, and deleting it is permanent. Do you want to continue?';
+            const message = 'This action will delete this section and all of its pages and entries. Do you want to continue?';
             const options = {
                 name: this.removeActionString,
                 callback: this.deleteSection.bind(this),

src/plugins/notebook/components/Sidebar.vue

@@ -1,6 +1,6 @@
 <template>
 <div class="c-sidebar c-drawer c-drawer--align-left">
-    <div class="c-sidebar__pane js-sidebar-sections">
+    <div class="c-sidebar__pane">
         <div class="c-sidebar__header-w">
             <div class="c-sidebar__header">
                 <span class="c-sidebar__header-label">{{ sectionTitle }}</span>
@@ -15,16 +15,14 @@
             </button>
             <SectionCollection class="c-sidebar__contents"
                                :default-section-id="defaultSectionId"
-                               :selected-section-id="selectedSectionId"
                                :domain-object="domainObject"
                                :sections="sections"
                                :section-title="sectionTitle"
                                @updateSection="sectionsChanged"
-                               @selectSection="selectSection"
             />
         </div>
     </div>
-    <div class="c-sidebar__pane js-sidebar-pages">
+    <div class="c-sidebar__pane">
         <div class="c-sidebar__header-w">
             <div class="c-sidebar__header">
                 <span class="c-sidebar__header-label">{{ pageTitle }}</span>
@@ -44,7 +42,6 @@
             <PageCollection ref="pageCollection"
                             class="c-sidebar__contents"
                             :default-page-id="defaultPageId"
-                            :selected-page-id="selectedPageId"
                             :domain-object="domainObject"
                             :pages="pages"
                             :sections="sections"
@@ -52,7 +49,6 @@
                             :page-title="pageTitle"
                             @toggleNav="toggleNav"
                             @updatePage="pagesChanged"
-                            @selectPage="selectPage"
             />
         </div>
     </div>
@@ -77,24 +73,12 @@ export default {
                 return '';
             }
         },
-        selectedPageId: {
-            type: String,
-            default() {
-                return '';
-            }
-        },
         defaultSectionId: {
             type: String,
             default() {
                 return '';
             }
         },
-        selectedSectionId: {
-            type: String,
-            default() {
-                return '';
-            }
-        },
         domainObject: {
             type: Object,
             default() {
@@ -129,7 +113,7 @@ export default {
     },
     computed: {
         pages() {
-            const selectedSection = this.sections.find(section => section.id === this.selectedSectionId);
+            const selectedSection = this.sections.find(section => section.isSelected);
 
             return selectedSection && selectedSection.pages || [];
         }
@@ -160,7 +144,6 @@ export default {
                 pages,
                 id: newPage.id
             });
-            this.$emit('selectPage', newPage.id);
         },
         addSection() {
             const newSection = this.createNewSection();
@@ -170,8 +153,6 @@ export default {
                 sections,
                 id: newSection.id
             });
-
-            this.$emit('selectSection', newSection.id);
         },
         addNewPage(page) {
             const pages = this.pages.map(p => {
@@ -227,12 +208,6 @@ export default {
                 id
             });
         },
-        selectPage(pageId) {
-            this.$emit('selectPage', pageId);
-        },
-        selectSection(sectionId) {
-            this.$emit('selectSection', sectionId);
-        },
         sectionsChanged({ sections, id }) {
             this.$emit('sectionsChanged', {
                 sections,

src/plugins/notebook/components/snapshot-template.html

@@ -4,9 +4,9 @@
         <div class="l-browse-bar__start">
             <div class="l-browse-bar__object-name--w">
                 <span class="c-object-label l-browse-bar__object-name"
-                    v-bind:class="cssClass"
+                    v-bind:class="embed.cssClass"
                 >
-                    <span class="c-object-label__name">{{ name }}</span>
+                    <span class="c-object-label__name">{{ embed.name }}</span>
                 </span>
             </div>
         </div>
@@ -40,7 +40,7 @@
     <div
         ref="snapshot-image"
         class="c-notebook-snapshot__image"
-        :style="{ backgroundImage: 'url(' + src + ')' }"
+        :style="{ backgroundImage: 'url(' + embed.snapshot.src + ')' }"
     >
     </div>
 </div>

src/plugins/notebook/notebook-constants.js

@@ -1,4 +1,3 @@
-export const NOTEBOOK_TYPE = 'notebook';
 export const EVENT_SNAPSHOTS_UPDATED = 'SNAPSHOTS_UPDATED';
 export const NOTEBOOK_DEFAULT = 'DEFAULT';
 export const NOTEBOOK_SNAPSHOT = 'SNAPSHOT';

src/plugins/notebook/plugin.js

@@ -2,20 +2,18 @@ import CopyToNotebookAction from './actions/CopyToNotebookAction';
 import Notebook from './components/Notebook.vue';
 import NotebookSnapshotIndicator from './components/NotebookSnapshotIndicator.vue';
 import SnapshotContainer from './snapshot-container';
-
-import { notebookImageMigration } from '../notebook/utils/notebook-migration';
-import { NOTEBOOK_TYPE } from './notebook-constants';
-
 import Vue from 'vue';
 
+let installed = false;
+
 export default function NotebookPlugin() {
     return function install(openmct) {
-        if (openmct._NOTEBOOK_PLUGIN_INSTALLED) {
+        if (installed) {
             return;
-        } else {
-            openmct._NOTEBOOK_PLUGIN_INSTALLED = true;
         }
 
+        installed = true;
+
         openmct.actions.register(new CopyToNotebookAction(openmct));
 
         const notebookType = {
@@ -86,20 +84,7 @@ export default function NotebookPlugin() {
                 }
             ]
         };
-        openmct.types.addType(NOTEBOOK_TYPE, notebookType);
-
-        const notebookSnapshotImageType = {
-            name: 'Notebook Snapshot Image Storage',
-            description: 'Notebook Snapshot Image Storage object',
-            creatable: false,
-            initialize: domainObject => {
-                domainObject.configuration = {
-                    fullSizeImageURL: undefined,
-                    thumbnailImageURL: undefined
-                };
-            }
-        };
-        openmct.types.addType('notebookSnapshotImage', notebookSnapshotImageType);
+        openmct.types.addType('notebook', notebookType);
 
         const snapshotContainer = new SnapshotContainer(openmct);
         const notebookSnapshotIndicator = new Vue ({
@@ -138,14 +123,10 @@ export default function NotebookPlugin() {
                             },
                             provide: {
                                 openmct,
+                                domainObject,
                                 snapshotContainer
                             },
-                            data() {
-                                return {
-                                    domainObject
-                                };
-                            },
-                            template: '<Notebook :domain-object="domainObject"></Notebook>'
+                            template: '<Notebook></Notebook>'
                         });
                     },
                     destroy() {
@@ -154,16 +135,5 @@ export default function NotebookPlugin() {
                 };
             }
         });
-
-        openmct.objects.addGetInterceptor({
-            appliesTo: (identifier, domainObject) => {
-                return domainObject && domainObject.type === 'notebook';
-            },
-            invoke: (identifier, domainObject) => {
-                notebookImageMigration(openmct, domainObject);
-
-                return domainObject;
-            }
-        });
     };
 }

src/plugins/notebook/pluginSpec.js

@@ -21,32 +21,29 @@
  *****************************************************************************/
 
 import { createOpenMct, createMouseEvent, resetApplicationState } from 'utils/testing';
-import notebookPlugin from './plugin';
+import NotebookPlugin from './plugin';
 import Vue from 'vue';
 
+let openmct;
+let notebookDefinition;
+let notebookPlugin;
+let element;
+let child;
+let appHolder;
+
+const notebookDomainObject = {
+    identifier: {
+        key: 'notebook',
+        namespace: ''
+    },
+    type: 'notebook'
+};
+
 describe("Notebook plugin:", () => {
-    let openmct;
-    let notebookDefinition;
-    let element;
-    let child;
-    let appHolder;
-    let objectProviderObserver;
-
-    let notebookDomainObject;
-
-    beforeEach((done) => {
-        notebookDomainObject = {
-            identifier: {
-                key: 'notebook',
-                namespace: 'test-namespace'
-            },
-            type: 'notebook'
-        };
-
+    beforeAll(done => {
         appHolder = document.createElement('div');
         appHolder.style.width = '640px';
         appHolder.style.height = '480px';
-        document.body.appendChild(appHolder);
 
         openmct = createOpenMct();
 
@@ -54,16 +51,19 @@ describe("Notebook plugin:", () => {
         child = document.createElement('div');
         element.appendChild(child);
 
-        openmct.install(notebookPlugin());
+        notebookPlugin = new NotebookPlugin();
+        openmct.install(notebookPlugin);
 
         notebookDefinition = openmct.types.get('notebook').definition;
         notebookDefinition.initialize(notebookDomainObject);
 
         openmct.on('start', done);
         openmct.start(appHolder);
+
+        document.body.append(appHolder);
     });
 
-    afterEach(() => {
+    afterAll(() => {
         appHolder.remove();
 
         return resetApplicationState(openmct);
@@ -80,96 +80,39 @@ describe("Notebook plugin:", () => {
     describe("Notebook view:", () => {
         let notebookViewProvider;
         let notebookView;
-        let notebookViewObject;
-        let mutableNotebookObject;
 
         beforeEach(() => {
-            notebookViewObject = {
+            const notebookViewObject = {
                 ...notebookDomainObject,
                 id: "test-object",
                 name: 'Notebook',
                 configuration: {
                     defaultSort: 'oldest',
-                    entries: {
-                        "test-section-1": {
-                            "test-page-1": [{
-                                "id": "entry-0",
-                                "createdOn": 0,
-                                "text": "First Test Entry",
-                                "embeds": []
-                            }, {
-                                "id": "entry-1",
-                                "createdOn": 0,
-                                "text": "Second Test Entry",
-                                "embeds": []
-                            }]
-                        }
-                    },
+                    entries: {},
                     pageTitle: 'Page',
-                    sections: [{
-                        "id": "test-section-1",
-                        "isDefault": false,
-                        "isSelected": false,
-                        "name": "Test Section",
-                        "pages": [{
-                            "id": "test-page-1",
-                            "isDefault": false,
-                            "isSelected": false,
-                            "name": "Test Page 1",
-                            "pageTitle": "Page"
-                        }, {
-                            "id": "test-page-2",
-                            "isDefault": false,
-                            "isSelected": false,
-                            "name": "Test Page 2",
-                            "pageTitle": "Page"
-                        }]
-                    }, {
-                        "id": "test-section-2",
-                        "isDefault": false,
-                        "isSelected": false,
-                        "name": "Test Section 2",
-                        "pages": [{
-                            "id": "test-page-3",
-                            "isDefault": false,
-                            "isSelected": false,
-                            "name": "Test Page 3",
-                            "pageTitle": "Page"
-                        }]
-                    }],
+                    sections: [],
                     sectionTitle: 'Section',
                     type: 'General'
                 }
             };
-            const testObjectProvider = jasmine.createSpyObj('testObjectProvider', [
-                'get',
-                'create',
-                'update',
-                'observe'
-            ]);
 
-            const applicableViews = openmct.objectViews.get(notebookViewObject, [notebookViewObject]);
-            notebookViewProvider = applicableViews.find(viewProvider => viewProvider.key === 'notebook-vue');
+            const notebookObject = {
+                name: 'Notebook View',
+                key: 'notebook-vue',
+                creatable: true
+            };
 
-            testObjectProvider.get.and.returnValue(Promise.resolve(notebookViewObject));
-            openmct.objects.addProvider('test-namespace', testObjectProvider);
-            testObjectProvider.observe.and.returnValue(() => {});
+            const applicableViews = openmct.objectViews.get(notebookViewObject, []);
+            notebookViewProvider = applicableViews.find(viewProvider => viewProvider.key === notebookObject.key);
+            notebookView = notebookViewProvider.view(notebookViewObject);
 
-            return openmct.objects.getMutable(notebookViewObject.identifier).then((mutableObject) => {
-                mutableNotebookObject = mutableObject;
-                objectProviderObserver = testObjectProvider.observe.calls.mostRecent().args[1];
-
-                notebookView = notebookViewProvider.view(mutableNotebookObject);
-                notebookView.show(child);
-
-                return Vue.nextTick();
-            });
+            notebookView.show(child);
 
+            return Vue.nextTick();
         });
 
         afterEach(() => {
             notebookView.destroy();
-            openmct.objects.destroyMutable(mutableNotebookObject);
         });
 
         it("provides notebook view", () => {
@@ -190,114 +133,6 @@ describe("Notebook plugin:", () => {
 
             expect(hasMajorElements).toBe(true);
         });
-
-        it("renders a row for each entry", () => {
-            const notebookEntryElements = element.querySelectorAll('.c-notebook__entry');
-            const firstEntryText = getEntryText(0);
-            expect(notebookEntryElements.length).toBe(2);
-            expect(firstEntryText.innerText).toBe('First Test Entry');
-        });
-
-        describe("synchronization", () => {
-
-            it("updates an entry when another user modifies it", () => {
-                expect(getEntryText(0).innerText).toBe("First Test Entry");
-                notebookViewObject.configuration.entries["test-section-1"]["test-page-1"][0].text = "Modified entry text";
-                objectProviderObserver(notebookViewObject);
-
-                return Vue.nextTick().then(() => {
-                    expect(getEntryText(0).innerText).toBe("Modified entry text");
-                });
-            });
-
-            it("shows new entry when another user adds one", () => {
-                expect(allNotebookEntryElements().length).toBe(2);
-                notebookViewObject.configuration.entries["test-section-1"]["test-page-1"].push({
-                    "id": "entry-3",
-                    "createdOn": 0,
-                    "text": "Third Test Entry",
-                    "embeds": []
-                });
-                objectProviderObserver(notebookViewObject);
-
-                return Vue.nextTick().then(() => {
-                    expect(allNotebookEntryElements().length).toBe(3);
-                });
-            });
-            it("removes an entry when another user removes one", () => {
-                expect(allNotebookEntryElements().length).toBe(2);
-                let entries = notebookViewObject.configuration.entries["test-section-1"]["test-page-1"];
-                notebookViewObject.configuration.entries["test-section-1"]["test-page-1"] = entries.splice(0, 1);
-                objectProviderObserver(notebookViewObject);
-
-                return Vue.nextTick().then(() => {
-                    expect(allNotebookEntryElements().length).toBe(1);
-                });
-            });
-
-            it("updates the notebook when a user adds a page", () => {
-                const newPage = {
-                    "id": "test-page-4",
-                    "isDefault": false,
-                    "isSelected": false,
-                    "name": "Test Page 4",
-                    "pageTitle": "Page"
-                };
-
-                expect(allNotebookPageElements().length).toBe(2);
-                notebookViewObject.configuration.sections[0].pages.push(newPage);
-                objectProviderObserver(notebookViewObject);
-
-                return Vue.nextTick().then(() => {
-                    expect(allNotebookPageElements().length).toBe(3);
-                });
-
-            });
-
-            it("updates the notebook when a user removes a page", () => {
-                expect(allNotebookPageElements().length).toBe(2);
-                notebookViewObject.configuration.sections[0].pages.splice(0, 1);
-                objectProviderObserver(notebookViewObject);
-
-                return Vue.nextTick().then(() => {
-                    expect(allNotebookPageElements().length).toBe(1);
-                });
-            });
-
-            it("updates the notebook when a user adds a section", () => {
-                const newSection = {
-                    "id": "test-section-3",
-                    "isDefault": false,
-                    "isSelected": false,
-                    "name": "Test Section 3",
-                    "pages": [{
-                        "id": "test-page-4",
-                        "isDefault": false,
-                        "isSelected": false,
-                        "name": "Test Page 4",
-                        "pageTitle": "Page"
-                    }]
-                };
-
-                expect(allNotebookSectionElements().length).toBe(2);
-                notebookViewObject.configuration.sections.push(newSection);
-                objectProviderObserver(notebookViewObject);
-
-                return Vue.nextTick().then(() => {
-                    expect(allNotebookSectionElements().length).toBe(3);
-                });
-            });
-
-            it("updates the notebook when a user removes a section", () => {
-                expect(allNotebookSectionElements().length).toBe(2);
-                notebookViewObject.configuration.sections.splice(0, 1);
-                objectProviderObserver(notebookViewObject);
-
-                return Vue.nextTick().then(() => {
-                    expect(allNotebookSectionElements().length).toBe(1);
-                });
-            });
-        });
     });
 
     describe("Notebook Snapshots view:", () => {
@@ -312,22 +147,16 @@ describe("Notebook plugin:", () => {
             button.dispatchEvent(clickEvent);
         }
 
-        beforeEach(() => {
+        beforeAll(() => {
             snapshotIndicator = openmct.indicators.indicatorObjects
                 .find(indicator => indicator.key === 'notebook-snapshot-indicator').element;
 
             element.append(snapshotIndicator);
 
-            return Vue.nextTick().then(() => {
-                drawerElement = document.querySelector('.l-shell__drawer');
-            });
+            return Vue.nextTick();
         });
 
-        afterEach(() => {
-            if (drawerElement) {
-                drawerElement.classList.remove('is-expanded');
-            }
-
+        afterAll(() => {
             snapshotIndicator.remove();
             snapshotIndicator = undefined;
 
@@ -337,6 +166,16 @@ describe("Notebook plugin:", () => {
             }
         });
 
+        beforeEach(() => {
+            drawerElement = document.querySelector('.l-shell__drawer');
+        });
+
+        afterEach(() => {
+            if (drawerElement) {
+                drawerElement.classList.remove('is-expanded');
+            }
+        });
+
         it("has Snapshots indicator", () => {
             const hasSnapshotIndicator = snapshotIndicator !== null && snapshotIndicator !== undefined;
             expect(hasSnapshotIndicator).toBe(true);
@@ -380,20 +219,4 @@ describe("Notebook plugin:", () => {
             expect(snapshotsText).toBe('Notebook Snapshots');
         });
     });
-
-    function getEntryText(entryNumber) {
-        return element.querySelectorAll('.c-notebook__entry .c-ne__text')[entryNumber];
-    }
-
-    function allNotebookEntryElements() {
-        return element.querySelectorAll('.c-notebook__entry');
-    }
-
-    function allNotebookSectionElements() {
-        return element.querySelectorAll('.js-sidebar-sections .js-list__item');
-    }
-
-    function allNotebookPageElements() {
-        return element.querySelectorAll('.js-sidebar-pages .js-list__item');
-    }
 });

src/plugins/notebook/snapshot.js

@@ -1,8 +1,6 @@
 import { addNotebookEntry, createNewEmbed } from './utils/notebook-entries';
 import { getDefaultNotebook, getDefaultNotebookLink, setDefaultNotebook } from './utils/notebook-storage';
 import { NOTEBOOK_DEFAULT } from '@/plugins/notebook/notebook-constants';
-import { createNotebookImageDomainObject, DEFAULT_SIZE } from './utils/notebook-image';
-
 import SnapshotContainer from './snapshot-container';
 
 export default class Snapshot {
@@ -16,17 +14,12 @@ export default class Snapshot {
 
     capture(snapshotMeta, notebookType, domElement) {
         const exportImageService = this.openmct.$injector.get('exportImageService');
-
-        const options = {
-            className: 's-status-taking-snapshot',
-            thumbnailSize: DEFAULT_SIZE
-        };
-        exportImageService.exportPNGtoSRC(domElement, options)
-            .then(function ({blob, thumbnail}) {
+        exportImageService.exportPNGtoSRC(domElement, 's-status-taking-snapshot')
+            .then(function (blob) {
                 const reader = new window.FileReader();
                 reader.readAsDataURL(blob);
                 reader.onloadend = function () {
-                    this._saveSnapShot(notebookType, reader.result, thumbnail, snapshotMeta);
+                    this._saveSnapShot(notebookType, reader.result, snapshotMeta);
                 }.bind(this);
             }.bind(this));
     }
@@ -34,23 +27,16 @@ export default class Snapshot {
     /**
      * @private
      */
-    _saveSnapShot(notebookType, fullSizeImageURL, thumbnailImageURL, snapshotMeta) {
-        createNotebookImageDomainObject(this.openmct, fullSizeImageURL)
-            .then(object => {
-                const thumbnailImage = { src: thumbnailImageURL || '' };
-                const snapshot = {
-                    fullSizeImageObjectIdentifier: object.identifier,
-                    thumbnailImage
-                };
-                const embed = createNewEmbed(snapshotMeta, snapshot);
-                if (notebookType === NOTEBOOK_DEFAULT) {
-                    this._saveToDefaultNoteBook(embed);
+    _saveSnapShot(notebookType, imageUrl, snapshotMeta) {
+        const snapshot = imageUrl ? { src: imageUrl } : '';
+        const embed = createNewEmbed(snapshotMeta, snapshot);
+        if (notebookType === NOTEBOOK_DEFAULT) {
+            this._saveToDefaultNoteBook(embed);
 
-                    return;
-                }
+            return;
+        }
 
-                this._saveToNotebookSnapshots(embed);
-            });
+        this._saveToNotebookSnapshots(embed);
     }
 
     /**

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

@@ -1,78 +0,0 @@
-import uuid from 'uuid';
-
-export const DEFAULT_SIZE = {
-    width: 30,
-    height: 30
-};
-
-export function createNotebookImageDomainObject(openmct, fullSizeImageURL) {
-    const identifier = {
-        key: uuid(),
-        namespace: ''
-    };
-    const viewType = 'notebookSnapshotImage';
-
-    const object = {
-        name: 'Notebook Snapshot Image',
-        type: viewType,
-        identifier,
-        configuration: {
-            fullSizeImageURL
-        }
-    };
-
-    return new Promise((resolve, reject) => {
-        openmct.objects.save(object)
-            .then(result => {
-                if (result) {
-                    resolve(object);
-                }
-
-                reject();
-            })
-            .catch(e => {
-                console.error(e);
-                reject();
-            });
-    });
-}
-
-export function getThumbnailURLFromCanvas(canvas, size = DEFAULT_SIZE) {
-    const thumbnailCanvas = document.createElement('canvas');
-    thumbnailCanvas.setAttribute('width', size.width);
-    thumbnailCanvas.setAttribute('height', size.height);
-    const ctx = thumbnailCanvas.getContext('2d');
-    ctx.globalCompositeOperation = "copy";
-    ctx.drawImage(canvas, 0, 0, canvas.width, canvas.height, 0, 0, size.width, size.height);
-
-    return thumbnailCanvas.toDataURL('image/png');
-}
-
-export function getThumbnailURLFromimageUrl(imageUrl, size = DEFAULT_SIZE) {
-    return new Promise(resolve => {
-        const image = new Image();
-
-        const canvas = document.createElement('canvas');
-        canvas.width = size.width;
-        canvas.height = size.height;
-
-        image.onload = function () {
-            canvas.getContext('2d')
-                .drawImage(image, 0, 0, size.width, size.height);
-
-            resolve(canvas.toDataURL('image/png'));
-        };
-
-        image.src = imageUrl;
-    });
-}
-
-export function updateNotebookImageDomainObject(openmct, identifier, fullSizeImage) {
-    openmct.objects.get(identifier)
-        .then(domainObject => {
-            const configuration = domainObject.configuration;
-            configuration.fullSizeImageURL = fullSizeImage.src;
-
-            openmct.objects.mutate(domainObject, 'configuration', configuration);
-        });
-}

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

@@ -1,43 +0,0 @@
-import { createNotebookImageDomainObject, getThumbnailURLFromimageUrl } from './notebook-image';
-import { mutateObject } from './notebook-entries';
-
-export function notebookImageMigration(openmct, domainObject) {
-    const configuration = domainObject.configuration;
-    const notebookEntries = configuration.entries;
-
-    const imageMigrationVer = configuration.imageMigrationVer;
-    if (imageMigrationVer && imageMigrationVer === 'v1') {
-        return;
-    }
-
-    configuration.imageMigrationVer = 'v1';
-
-    // to avoid muliple notebookImageMigration calls updating images.
-    mutateObject(openmct, domainObject, 'configuration', configuration);
-
-    configuration.sections.forEach(section => {
-        const sectionId = section.id;
-        section.pages.forEach(page => {
-            const pageId = page.id;
-            const notebookSection = notebookEntries && notebookEntries[sectionId] || {};
-            const pageEntries = notebookSection && notebookSection[pageId] || [];
-            pageEntries.forEach(entry => {
-                entry.embeds.forEach(async (embed) => {
-                    const snapshot = embed.snapshot;
-                    const fullSizeImageURL = snapshot.src;
-                    if (fullSizeImageURL) {
-                        const thumbnailImageURL = await getThumbnailURLFromimageUrl(fullSizeImageURL);
-                        const notebookImageDomainObject = await createNotebookImageDomainObject(openmct, fullSizeImageURL);
-
-                        embed.snapshot = {
-                            fullSizeImageObjectIdentifier: notebookImageDomainObject.identifier,
-                            thumbnailImage: { src: thumbnailImageURL || '' }
-                        };
-
-                        mutateObject(openmct, domainObject, 'configuration.entries', notebookEntries);
-                    }
-                });
-            });
-        });
-    });
-}

src/plugins/notebook/utils/painterroInstance.js

@@ -1,5 +1,4 @@
 import Painterro from 'painterro';
-import { getThumbnailURLFromimageUrl } from './notebook-image';
 
 const DEFAULT_CONFIG = {
     activeColor: '#ff0000',
@@ -26,11 +25,11 @@ const DEFAULT_CONFIG = {
 };
 
 export default class PainterroInstance {
-    constructor(element) {
+    constructor(element, saveCallback) {
         this.elementId = element.id;
         this.isSave = false;
-        this.painterroInstance = undefined;
-        this.saveCallback = undefined;
+        this.painterroInstance = null;
+        this.saveCallback = saveCallback;
     }
 
     dismiss() {
@@ -47,41 +46,31 @@ export default class PainterroInstance {
         this.painterro = Painterro(this.config);
     }
 
-    save(callback) {
-        this.saveCallback = callback;
+    save() {
         this.isSave = true;
         this.painterroInstance.save();
     }
 
     saveHandler(image, done) {
         if (this.isSave) {
+            const self = this;
             const url = image.asBlob();
-
             const reader = new window.FileReader();
             reader.readAsDataURL(url);
-            reader.onloadend = async () => {
-                const fullSizeImageURL = reader.result;
-                const thumbnailURL = await getThumbnailURLFromimageUrl(fullSizeImageURL);
+            reader.onloadend = () => {
+                const snapshot = reader.result;
                 const snapshotObject = {
-                    fullSizeImage: {
-                        src: fullSizeImageURL,
-                        type: url.type,
-                        size: url.size,
-                        modified: Date.now()
-                    },
-                    thumbnailImage: {
-                        src: thumbnailURL,
-                        modified: Date.now()
-                    }
+                    src: snapshot,
+                    type: url.type,
+                    size: url.size,
+                    modified: Date.now()
                 };
 
-                this.saveCallback(snapshotObject);
-
-                done(true);
+                self.saveCallback(snapshotObject);
             };
-        } else {
-            done(true);
         }
+
+        done(true);
     }
 
     show(src) {

src/plugins/openInNewTabAction/openInNewTabAction.js

@@ -1,38 +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 objectPathToUrl from '/src/tools/url';
-export default class OpenInNewTab {
-    constructor(openmct) {
-        this.name = 'Open In New Tab';
-        this.key = 'newTab';
-        this.description = 'Open in a new browser tab';
-        this.group = "windowing";
-        this.priority = 10;
-        this.cssClass = "icon-new-window";
-
-        this._openmct = openmct;
-    }
-    invoke(objectPath) {
-        let url = objectPathToUrl(this._openmct, objectPath);
-        window.open(url);
-    }
-}

src/plugins/openInNewTabAction/plugin.js

@@ -1,28 +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 OpenInNewTabAction from './openInNewTabAction';
-
-export default function () {
-    return function (openmct) {
-        openmct.actions.register(new OpenInNewTabAction(openmct));
-    };
-}

src/plugins/openInNewTabAction/pluginSpec.js

@@ -1,75 +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,
-    spyOnBuiltins
-} from 'utils/testing';
-
-describe("the plugin", () => {
-    let openmct;
-    let openInNewTabAction;
-    let mockObjectPath;
-
-    beforeEach((done) => {
-        openmct = createOpenMct();
-
-        openmct.on('start', done);
-        openmct.startHeadless();
-
-        openInNewTabAction = openmct.actions._allActions.newTab;
-    });
-
-    afterEach(() => {
-        return resetApplicationState(openmct);
-    });
-
-    it('installs the open in new tab action', () => {
-        expect(openInNewTabAction).toBeDefined();
-    });
-
-    describe('when invoked', () => {
-
-        beforeEach(async () => {
-            mockObjectPath = [{
-                name: 'mock folder',
-                type: 'folder',
-                identifier: {
-                    key: 'mock-folder',
-                    namespace: ''
-                }
-            }];
-            spyOn(openmct.objects, 'get').and.returnValue(Promise.resolve({
-                identifier: {
-                    namespace: '',
-                    key: 'test'
-                }
-            }));
-            spyOnBuiltins(['open']);
-            await openInNewTabAction.invoke(mockObjectPath);
-        });
-
-        it('it opens in a new tab', () => {
-            expect(window.open).toHaveBeenCalled();
-        });
-    });
-});

src/plugins/persistence/couch/CouchObjectProvider.js

@@ -22,7 +22,6 @@
 
 import CouchDocument from "./CouchDocument";
 import CouchObjectQueue from "./CouchObjectQueue";
-import { NOTEBOOK_TYPE } from '../../notebook/notebook-constants.js';
 
 const REV = "_rev";
 const ID = "_id";
@@ -30,14 +29,24 @@ const HEARTBEAT = 50000;
 const ALL_DOCS = "_all_docs?include_docs=true";
 
 export default class CouchObjectProvider {
+    // options {
+    //      url: couchdb url,
+    //      disableObserve: disable auto feed from couchdb to keep objects in sync,
+    //      filter: selector to find objects to sync in couchdb
+    //      }
     constructor(openmct, options, namespace) {
         options = this._normalize(options);
         this.openmct = openmct;
         this.url = options.url;
         this.namespace = namespace;
         this.objectQueue = {};
+        this.observeEnabled = options.disableObserve !== true;
         this.observers = {};
         this.batchIds = [];
+
+        if (this.observeEnabled) {
+            this.observeObjectChanges(options.filter);
+        }
     }
 
     //backwards compatibility, options used to be a url. Now it's an object
@@ -124,12 +133,8 @@ export default class CouchObjectProvider {
                 this.objectQueue[key] = new CouchObjectQueue(undefined, response[REV]);
             }
 
-            if (object.type === NOTEBOOK_TYPE) {
-                //Temporary measure until object sync is supported for all object types
-                //Always update notebook revision number because we have realtime sync, so always assume it's the latest.
-                this.objectQueue[key].updateRevision(response[REV]);
-            } else if (!this.objectQueue[key].pending) {
-                //Sometimes CouchDB returns the old rev which fetching the object if there is a document update in progress
+            //Sometimes CouchDB returns the old rev which fetching the object if there is a document update in progress
+            if (!this.objectQueue[key].pending) {
                 this.objectQueue[key].updateRevision(response[REV]);
             }
 
@@ -308,63 +313,49 @@ export default class CouchObjectProvider {
     }
 
     observe(identifier, callback) {
+        if (!this.observeEnabled) {
+            return;
+        }
+
         const keyString = this.openmct.objects.makeKeyString(identifier);
         this.observers[keyString] = this.observers[keyString] || [];
         this.observers[keyString].push(callback);
 
-        if (!this.isObservingObjectChanges()) {
-            this.observeObjectChanges();
-        }
-
         return () => {
             this.observers[keyString] = this.observers[keyString].filter(observer => observer !== callback);
-            if (this.observers[keyString].length === 0) {
-                delete this.observers[keyString];
-                if (Object.keys(this.observers).length === 0) {
-                    this.stopObservingObjectChanges();
-                }
-            }
         };
     }
 
-    isObservingObjectChanges() {
-        return this.stopObservingObjectChanges !== undefined;
-    }
-
     /**
      * @private
      */
-    async observeObjectChanges() {
+    abortGetChanges() {
+        if (this.controller) {
+            this.controller.abort();
+            this.controller = undefined;
+        }
+
+        return true;
+    }
+
+    /**
+     * @private
+     */
+    async observeObjectChanges(filter) {
+        let intermediateResponse = this.getIntermediateResponse();
+
+        if (!this.observeEnabled) {
+            intermediateResponse.reject('Observe for changes is disabled');
+        }
+
         const controller = new AbortController();
         const signal = controller.signal;
-        let filter = {selector: {}};
 
-        if (this.openmct.objects.SYNCHRONIZED_OBJECT_TYPES.length > 1) {
-            filter.selector.$or = this.openmct.objects.SYNCHRONIZED_OBJECT_TYPES
-                .map(type => {
-                    return {
-                        'model': {
-                            type
-                        }
-                    };
-                });
-        } else {
-            filter.selector.model = {
-                type: this.openmct.objects.SYNCHRONIZED_OBJECT_TYPES[0]
-            };
+        if (this.controller) {
+            this.abortGetChanges();
         }
 
-        let error = false;
-
-        if (typeof this.stopObservingObjectChanges === 'function') {
-            this.stopObservingObjectChanges();
-        }
-
-        this.stopObservingObjectChanges = () => {
-            controller.abort();
-            delete this.stopObservingObjectChanges;
-        };
-
+        this.controller = controller;
         // 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
         let url = `${this.url}/_changes?feed=continuous&style=main_only&heartbeat=${HEARTBEAT}`;
@@ -383,20 +374,14 @@ export default class CouchObjectProvider {
             },
             body
         });
+        const reader = response.body.getReader();
+        let completed = false;
 
-        let reader;
-
-        if (response.body === undefined) {
-            error = true;
-        } else {
-            reader = response.body.getReader();
-        }
-
-        while (!error) {
+        while (!completed) {
             const {done, value} = await reader.read();
             //done is true when we lose connection with the provider
             if (done) {
-                error = true;
+                completed = true;
             }
 
             if (value) {
@@ -429,9 +414,11 @@ export default class CouchObjectProvider {
 
         }
 
-        if (error && Object.keys(this.observers).length > 0) {
-            this.observeObjectChanges();
-        }
+        //We're done receiving from the provider. No more chunks.
+        intermediateResponse.resolve(true);
+
+        return intermediateResponse.promise;
+
     }
 
     /**

src/plugins/persistence/couch/pluginSpec.js

@@ -27,6 +27,8 @@ import {
 
 describe('the plugin', () => {
     let openmct;
+    let element;
+    let child;
     let provider;
     let testPath = '/test/db';
     let options;
@@ -34,8 +36,6 @@ describe('the plugin', () => {
     let mockDomainObject;
 
     beforeEach((done) => {
-        spyOnBuiltins(['fetch'], window);
-
         mockDomainObject = {
             identifier: {
                 namespace: '',
@@ -51,6 +51,8 @@ describe('the plugin', () => {
         };
         openmct = createOpenMct(false);
 
+        spyOnBuiltins(['fetch'], window);
+
         openmct.$injector = jasmine.createSpyObj('$injector', ['get']);
         mockIdentifierService = jasmine.createSpyObj(
             'identifierService',
@@ -68,6 +70,10 @@ describe('the plugin', () => {
 
         openmct.types.addType('mock-type', {creatable: true});
 
+        element = document.createElement('div');
+        child = document.createElement('div');
+        element.appendChild(child);
+
         openmct.on('start', done);
         openmct.startHeadless();
 

src/plugins/plot/MctPlot.vue

@@ -74,9 +74,7 @@
                 </div>
 
                 <div class="gl-plot__local-controls h-local-controls h-local-controls--overlay-content c-local-controls--show-on-hover">
-                    <div v-if="!options.compact"
-                         class="c-button-set c-button-set--strip-h js-zoom"
-                    >
+                    <div class="c-button-set c-button-set--strip-h">
                         <button class="c-button icon-minus"
                                 title="Zoom out"
                                 @click="zoom('out', 0.2)"
@@ -88,8 +86,8 @@
                         >
                         </button>
                     </div>
-                    <div v-if="plotHistory.length && !options.compact"
-                         class="c-button-set c-button-set--strip-h js-pan"
+                    <div v-if="plotHistory.length"
+                         class="c-button-set c-button-set--strip-h"
                     >
                         <button class="c-button icon-arrow-left"
                                 title="Restore previous pan/zoom"
@@ -103,7 +101,7 @@
                         </button>
                     </div>
                     <div v-if="isRealTime"
-                         class="c-button-set c-button-set--strip-h js-pause"
+                         class="c-button-set c-button-set--strip-h"
                     >
                         <button v-if="!isFrozen"
                                 class="c-button icon-pause"
@@ -495,12 +493,10 @@ export default {
 
             this.canvas = this.$refs.chartContainer.querySelectorAll('canvas')[1];
 
-            if (!this.options.compact) {
-                this.listenTo(this.canvas, 'mousemove', this.trackMousePosition, this);
-                this.listenTo(this.canvas, 'mouseleave', this.untrackMousePosition, this);
-                this.listenTo(this.canvas, 'mousedown', this.onMouseDown, this);
-                this.listenTo(this.canvas, 'wheel', this.wheelZoom, this);
-            }
+            this.listenTo(this.canvas, 'mousemove', this.trackMousePosition, this);
+            this.listenTo(this.canvas, 'mouseleave', this.untrackMousePosition, this);
+            this.listenTo(this.canvas, 'mousedown', this.onMouseDown, this);
+            this.listenTo(this.canvas, 'wheel', this.wheelZoom, this);
         },
 
         initialize() {
@@ -518,7 +514,12 @@ export default {
             this.chartElementBounds = undefined;
             this.tickUpdate = false;
 
-            this.initCanvas();
+            this.canvas = this.$refs.chartContainer.querySelectorAll('canvas')[1];
+
+            this.listenTo(this.canvas, 'mousemove', this.trackMousePosition, this);
+            this.listenTo(this.canvas, 'mouseleave', this.untrackMousePosition, this);
+            this.listenTo(this.canvas, 'mousedown', this.onMouseDown, this);
+            this.listenTo(this.canvas, 'wheel', this.wheelZoom, this);
 
             this.config.yAxisLabel = this.config.yAxis.get('label');
 

src/plugins/plot/chart/LimitLabel.vue

@@ -1,23 +1,17 @@
 <template>
-<div class="c-plot-limit"
+<div class="plot-series-limit-label"
      :style="styleObj"
-     :class="limitClass"
+     :class="limit.cssClass"
 >
-    <div class="c-plot-limit__label">
-        <span class="c-plot-limit__direction-icon"></span>
-        <span class="c-plot-limit__severity-icon"></span>
-        <span class="c-plot-limit__limit-value">{{ limit.value }}</span>
-        <span class="c-plot-limit__series-color-swatch"
-              :style="{ 'background-color': limit.seriesColor }"
-        ></span>
-        <span class="c-plot-limit__series-name">{{ limit.name }}</span>
-    </div>
+    <span class="plot-series-limit-value">{{ limit.value }}</span>
+    <span class="plot-series-color-swatch"
+          :style="{ 'background-color': limit.color }"
+    ></span>
+    <span class="plot-series-name">{{ limit.name }}</span>
 </div>
 </template>
 
 <script>
-import { getLimitClass } from "./limitUtil";
-
 export default {
     props: {
         limit: {
@@ -37,14 +31,15 @@ export default {
     },
     computed: {
         styleObj() {
-            const top = `${this.point.top}px`;
+            const top = `${this.point.top - 10}px`;
+            const left = `${this.point.left + 5}px`;
 
             return {
-                'top': top
+                'position': 'absolute',
+                'top': top,
+                'left': left,
+                'color': '#fff'
             };
-        },
-        limitClass() {
-            return getLimitClass(this.limit, 'c-plot-limit--');
         }
     }
 };

src/plugins/plot/chart/LimitLine.vue

@@ -1,13 +1,10 @@
 <template>
-<div :style="styleObj"
-     class="c-plot-limit-line js-limit-line"
-     :class="limitClass"
-></div>
+<hr :style="styleObj"
+    :class="cssWithoutUprLwr"
+>
 </template>
 
 <script>
-import { getLimitClass } from "./limitUtil";
-
 export default {
     props: {
         point: {
@@ -17,23 +14,30 @@ export default {
                 return {};
             }
         },
-        limit: {
-            type: Object,
+        cssClass: {
+            type: String,
             default() {
-                return {};
+                return '';
             }
         }
     },
     computed: {
         styleObj() {
             const top = `${this.point.top}px`;
+            const left = `${this.point.left}px`;
 
             return {
-                'top': top
+                'position': 'absolute',
+                'width': '100%',
+                'top': top,
+                'left': left
             };
         },
-        limitClass() {
-            return getLimitClass(this.limit, 'c-plot-limit-line--');
+        cssWithoutUprLwr() {
+            let cssClass = this.cssClass.replace(/is-limit--upr/gi, 'is-limit--line');
+            cssClass = cssClass.replace(/is-limit--lwr/gi, 'is-limit--line');
+
+            return cssClass;
         }
     }
 };

src/plugins/plot/chart/MCTChartAlarmLineSet.js

@@ -32,7 +32,6 @@ export default class MCTChartAlarmLineSet {
 
         eventHelpers.extend(this);
         this.listenTo(series, 'limitBounds', this.updateBounds, this);
-        this.listenTo(series, 'limits', this.getLimitPoints, this);
         this.listenTo(series, 'change:xKey', this.getLimitPoints, this);
 
         if (series.limits) {
@@ -70,28 +69,26 @@ export default class MCTChartAlarmLineSet {
         Object.keys(series.limits).forEach((key) => {
             const limitForLevel = series.limits[key];
             if (limitForLevel.high) {
+                const point = this.makePoint(Object.assign({ [xKey]: this.bounds.start }, limitForLevel.high), series);
                 this.limits.push({
                     seriesKey: series.keyString,
-                    level: key.toLowerCase(),
-                    name: this.name(),
-                    seriesColor: series.get('color').asHexString(),
-                    point: this.makePoint(Object.assign({ [xKey]: this.bounds.start }, limitForLevel.high), series),
                     value: series.getYVal(limitForLevel.high),
-                    color: limitForLevel.high.color,
-                    isUpper: true
+                    color: this.color().asHexString(),
+                    name: this.name(),
+                    point,
+                    cssClass: limitForLevel.high.cssClass
                 });
             }
 
             if (limitForLevel.low) {
+                const point = this.makePoint(Object.assign({ [xKey]: this.bounds.start }, limitForLevel.low), series);
                 this.limits.push({
                     seriesKey: series.keyString,
-                    level: key.toLowerCase(),
-                    name: this.name(),
-                    seriesColor: series.get('color').asHexString(),
-                    point: this.makePoint(Object.assign({ [xKey]: this.bounds.start }, limitForLevel.low), series),
                     value: series.getYVal(limitForLevel.low),
-                    color: limitForLevel.low.color,
-                    isUpper: false
+                    color: this.color().asHexString(),
+                    name: this.name(),
+                    point,
+                    cssClass: limitForLevel.low.cssClass
                 });
             }
         }, this);

src/plugins/plot/chart/MctChart.vue

@@ -46,7 +46,6 @@ import Vue from 'vue';
 
 const MARKER_SIZE = 6.0;
 const HIGHLIGHT_SIZE = MARKER_SIZE * 2.0;
-const CLEARANCE = 15;
 
 export default {
     inject: ['openmct', 'domainObject'],
@@ -473,15 +472,13 @@ export default {
                 }
 
                 Array.from(this.$refs.limitArea.children).forEach((el) => el.remove());
-                let limitPointOverlap = [];
+
                 this.limitLines.forEach((limitLine) => {
                     let limitContainerEl = this.$refs.limitArea;
                     limitLine.limits.forEach((limit) => {
                         const showLabels = this.showLabels(limit.seriesKey);
                         if (showLabels) {
-                            const overlap = this.getLimitOverlap(limit, limitPointOverlap);
-                            limitPointOverlap.push(overlap);
-                            let limitLabelEl = this.getLimitLabel(limit, overlap);
+                            let limitLabelEl = this.getLimitLabel(limit);
                             limitContainerEl.appendChild(limitLabelEl);
                         }
 
@@ -505,41 +502,14 @@ export default {
             const component = new LimitLineClass({
                 propsData: {
                     point,
-                    limit
+                    cssClass: limit.cssClass
                 }
             });
             component.$mount();
 
             return component.$el;
         },
-        getLimitOverlap(limit, overlapMap) {
-            //calculate if limit lines are too close to each other
-            let limitTop = this.drawAPI.y(limit.point.y);
-            const needsVerticalAdjustment = limitTop - CLEARANCE <= 0;
-            let needsHorizontalAdjustment = false;
-            overlapMap.forEach(value => {
-                let diffTop;
-                if (limitTop > value.overlapTop) {
-                    diffTop = limitTop - value.overlapTop;
-                } else {
-                    diffTop = value.overlapTop - limitTop;
-                }
-
-                //need to compare +ves to +ves and -ves to -ves
-                if (!needsHorizontalAdjustment
-                    && Math.abs(diffTop) <= CLEARANCE
-                    && value.needsHorizontalAdjustment !== true) {
-                    needsHorizontalAdjustment = true;
-                }
-            });
-
-            return {
-                needsHorizontalAdjustment,
-                needsVerticalAdjustment,
-                overlapTop: limitTop
-            };
-        },
-        getLimitLabel(limit, overlap) {
+        getLimitLabel(limit) {
             let point = {
                 left: 0,
                 top: this.drawAPI.y(limit.point.y)
@@ -547,7 +517,7 @@ export default {
             let LimitLabelClass = Vue.extend(LimitLabel);
             const component = new LimitLabelClass({
                 propsData: {
-                    limit: Object.assign({}, overlap, limit),
+                    limit,
                     point
                 }
             });

src/plugins/plot/chart/limitUtil.js

@@ -1,32 +0,0 @@
-export function getLimitClass(limit, prefix) {
-    let cssClass = '';
-    //If color exists then use it, fall back to the cssClass
-    if (limit.color) {
-        cssClass = `${cssClass} ${prefix}${limit.color}`;
-    } else if (limit.cssClass) {
-        cssClass = `${cssClass}${limit.cssClass}`;
-    }
-
-    // If we applied the cssClass then skip these classes
-    if (limit.cssClass === undefined) {
-        if (limit.isUpper) {
-            cssClass = `${cssClass} ${prefix}upr`;
-        } else {
-            cssClass = `${cssClass} ${prefix}lwr`;
-        }
-
-        if (limit.level) {
-            cssClass = `${cssClass} ${prefix}${limit.level}`;
-        }
-
-        if (limit.needsHorizontalAdjustment) {
-            cssClass = `${cssClass} --align-label-right`;
-        }
-
-        if (limit.needsVerticalAdjustment) {
-            cssClass = `${cssClass} --align-label-below`;
-        }
-    }
-
-    return cssClass;
-}

src/plugins/plot/configuration/PlotSeries.js

@@ -117,17 +117,7 @@ export default class PlotSeries extends Model {
         this.keyString = this.openmct.objects.makeKeyString(this.domainObject.identifier);
         this.limitEvaluator = this.openmct.telemetry.limitEvaluator(options.domainObject);
         this.limitDefinition = this.openmct.telemetry.limitDefinition(options.domainObject);
-        this.limits = [];
-        this.limitDefinition.limits().then(response => {
-            this.limits = [];
-
-            if (response) {
-                this.limits = response;
-            }
-
-            this.emit('limits', this);
-
-        });
+        this.limits = this.limitDefinition.limits();
         this.openmct.time.on('bounds', this.updateLimits);
         this.on('destroy', this.onDestroy, this);
     }

src/plugins/plot/legend/PlotLegendItemCollapsed.vue

@@ -49,8 +49,6 @@
 </template>
 <script>
 
-import {getLimitClass} from "@/plugins/plot/chart/limitUtil";
-
 export default {
     props: {
         valueToShowWhenCollapsed: {
@@ -112,7 +110,7 @@ export default {
             if (closest) {
                 this.formattedYValue = seriesObject.formatY(closest);
                 this.formattedXValue = seriesObject.formatX(closest);
-                this.mctLimitStateClass = closest.mctLimitState ? getLimitClass(closest.mctLimitState, 'c-plot-limit--') : '';
+                this.mctLimitStateClass = closest.mctLimitState ? `${closest.mctLimitState.cssClass}` : '';
             } else {
                 this.formattedYValue = '';
                 this.formattedXValue = '';

src/plugins/plot/legend/PlotLegendItemExpanded.vue

@@ -74,8 +74,6 @@
 </template>
 
 <script>
-import {getLimitClass} from "@/plugins/plot/chart/limitUtil";
-
 export default {
     props: {
         seriesObject: {
@@ -149,7 +147,7 @@ export default {
             if (closest) {
                 this.formattedYValue = seriesObject.formatY(closest);
                 this.formattedXValue = seriesObject.formatX(closest);
-                this.mctLimitStateClass = seriesObject.closest.mctLimitState ? getLimitClass(seriesObject.closest.mctLimitState, 'c-plot-limit--') : '';
+                this.mctLimitStateClass = seriesObject.closest.mctLimitState ? seriesObject.closest.mctLimitState.cssClass : '';
             } else {
                 this.formattedYValue = '';
                 this.formattedXValue = '';

src/plugins/plot/lib/ColorHelper.js

@@ -21,36 +21,36 @@
  *****************************************************************************/
 
 export const COLOR_PALETTE = [
-    [0x00, 0x37, 0xFF],
-    [0xF0, 0x60, 0x00],
-    [0x00, 0x70, 0x40],
-    [0xFB, 0x49, 0x49],
-    [0xC8, 0x00, 0xCF],
-    [0x55, 0x77, 0xF2],
-    [0xFF, 0xA6, 0x3D],
-    [0x05, 0xA3, 0x00],
-    [0xF0, 0x00, 0x6C],
-    [0x77, 0x17, 0x7A],
-    [0x23, 0xA9, 0xDB],
-    [0xFA, 0xF0, 0x6F],
-    [0x4E, 0xF0, 0x48],
-    [0xAD, 0x50, 0x72],
-    [0x94, 0x25, 0xEA],
-    [0x21, 0x87, 0x82],
-    [0x8F, 0x6E, 0x47],
-    [0xf0, 0x59, 0xcb],
-    [0x34, 0xB6, 0x7D],
-    [0x6A, 0x36, 0xFF],
-    [0x56, 0xF0, 0xE8],
-    [0xA1, 0x8C, 0x1C],
-    [0xCB, 0xE1, 0x44],
-    [0xFF, 0x84, 0x9E],
-    [0xB7, 0x79, 0xE7],
-    [0x8C, 0xC9, 0xFD],
-    [0xDB, 0xAA, 0x6E],
-    [0xB8, 0xDF, 0x97],
-    [0xFF, 0xBC, 0xDA],
-    [0xD3, 0xB6, 0xDE]
+    [0x20, 0xB2, 0xAA],
+    [0x9A, 0xCD, 0x32],
+    [0xFF, 0x8C, 0x00],
+    [0xD2, 0xB4, 0x8C],
+    [0x40, 0xE0, 0xD0],
+    [0x41, 0x69, 0xFF],
+    [0xFF, 0xD7, 0x00],
+    [0x6A, 0x5A, 0xCD],
+    [0xEE, 0x82, 0xEE],
+    [0xCC, 0x99, 0x66],
+    [0x99, 0xCC, 0xCC],
+    [0x66, 0xCC, 0x33],
+    [0xFF, 0xCC, 0x00],
+    [0xFF, 0x66, 0x33],
+    [0xCC, 0x66, 0xFF],
+    [0xFF, 0x00, 0x66],
+    [0xFF, 0xFF, 0x00],
+    [0x80, 0x00, 0x80],
+    [0x00, 0x86, 0x8B],
+    [0x00, 0x8A, 0x00],
+    [0xFF, 0x00, 0x00],
+    [0x00, 0x00, 0xFF],
+    [0xF5, 0xDE, 0xB3],
+    [0xBC, 0x8F, 0x8F],
+    [0x46, 0x82, 0xB4],
+    [0xFF, 0xAF, 0xAF],
+    [0x43, 0xCD, 0x80],
+    [0xCD, 0xC1, 0xC5],
+    [0xA0, 0x52, 0x2D],
+    [0x64, 0x95, 0xED]
 ];
 
 export function isDefaultColor(color) {

src/plugins/plot/pluginSpec.js

@@ -97,7 +97,7 @@ describe("the plugin", function () {
         telemetrylimitProvider.supportsLimits.and.returnValue(true);
         telemetrylimitProvider.getLimits.and.returnValue({
             limits: function () {
-                return Promise.resolve({
+                return {
                     WARNING: {
                         low: {
                             cssClass: "is-limit--lwr is-limit--yellow",
@@ -118,7 +118,7 @@ describe("the plugin", function () {
                             'some-key': 0.9
                         }
                     }
-                });
+                };
             }
         });
         telemetrylimitProvider.getLimitEvaluator.and.returnValue({
@@ -403,25 +403,6 @@ describe("the plugin", function () {
 
             });
         });
-
-        describe('controls in time strip view', () => {
-
-            it('zoom controls are hidden', () => {
-                let pauseEl = element.querySelectorAll(".c-button-set .js-zoom");
-                expect(pauseEl.length).toBe(0);
-            });
-
-            it('pan controls are hidden', () => {
-                let pauseEl = element.querySelectorAll(".c-button-set .js-pan");
-                expect(pauseEl.length).toBe(0);
-            });
-
-            it('pause/play controls are hidden', () => {
-                let pauseEl = element.querySelectorAll(".c-button-set .js-pause");
-                expect(pauseEl.length).toBe(0);
-            });
-
-        });
     });
 
     describe("The stacked plot view", () => {
@@ -728,7 +709,7 @@ describe("the plugin", function () {
                 config.series.models[0].set('limitLines', true);
 
                 Vue.nextTick(() => {
-                    let limitEl = element.querySelectorAll(".js-limit-area .js-limit-line");
+                    let limitEl = element.querySelectorAll(".js-limit-area hr");
                     expect(limitEl.length).toBe(4);
                     done();
                 });

src/plugins/plugins.js

@@ -46,7 +46,6 @@ define([
     './filters/plugin',
     './objectMigration/plugin',
     './goToOriginalAction/plugin',
-    './openInNewTabAction/plugin',
     './clearData/plugin',
     './webPage/plugin',
     './condition/plugin',
@@ -92,7 +91,6 @@ define([
     Filters,
     ObjectMigration,
     GoToOriginalAction,
-    OpenInNewTabAction,
     ClearData,
     WebPagePlugin,
     ConditionPlugin,
@@ -192,7 +190,6 @@ define([
     plugins.Filters = Filters;
     plugins.ObjectMigration = ObjectMigration.default;
     plugins.GoToOriginalAction = GoToOriginalAction.default;
-    plugins.OpenInNewTabAction = OpenInNewTabAction.default;
     plugins.ClearData = ClearData;
     plugins.WebPage = WebPagePlugin.default;
     plugins.Espresso = Espresso.default;

src/plugins/telemetryTable/components/table.scss

@@ -190,11 +190,6 @@
     }
 }
 
-// All tables
-td {
-    @include isLimit();
-}
-
 /******************************* SPECIFIC CASE WRAPPERS */
 .is-editing {
     .c-telemetry-table__headers__labels {

src/plugins/themes/espresso-theme.scss

@@ -10,7 +10,6 @@
 @import "../../styles/glyphs";
 @import "../../styles/global";
 @import "../../styles/status";
-@import "../../styles/limits";
 @import "../../styles/controls";
 @import "../../styles/forms";
 @import "../../styles/table";

src/plugins/themes/maelstrom-theme.scss

@@ -10,7 +10,6 @@
 @import "../../styles/glyphs";
 @import "../../styles/global";
 @import "../../styles/status";
-@import "../../styles/limits";
 @import "../../styles/controls";
 @import "../../styles/forms";
 @import "../../styles/table";

src/plugins/themes/snow-theme.scss

@@ -10,7 +10,6 @@
 @import "../../styles/glyphs";
 @import "../../styles/global";
 @import "../../styles/status";
-@import "../../styles/limits";
 @import "../../styles/controls";
 @import "../../styles/forms";
 @import "../../styles/table";

src/styles/_constants-espresso.scss

@@ -314,21 +314,12 @@ $colorTelemStale: pushBack($colorBodyFg, 20%);
 $styleTelemStale: italic;
 
 // Limits
-$colorLimitYellowBg: #B18B05;
-$colorLimitYellowFg: #FEEEB5;
-$colorLimitYellowIc: #FDC707;
-$colorLimitOrangeBg: #B36B00;
-$colorLimitOrangeFg: #FFE0B2;
-$colorLimitOrangeIc: #ff9900;
+$colorLimitYellowBg: #ac7300;
+$colorLimitYellowFg: #ffe64d;
+$colorLimitYellowIc: #ffb607;
 $colorLimitRedBg: #940000;
 $colorLimitRedFg: #ffa489;
 $colorLimitRedIc: #ff4222;
-$colorLimitPurpleBg: #891BB3;
-$colorLimitPurpleFg: #EDBEFF;
-$colorLimitPurpleIc: #c327ff;
-$colorLimitCyanBg: #4BA6B3;
-$colorLimitCyanFg: #D3FAFF;
-$colorLimitCyanIc: #6BEDFF;
 
 // Bubble colors
 $colorInfoBubbleBg: #dddddd;
@@ -368,7 +359,6 @@ $colorPlotAreaBorder: $colorInteriorBorder;
 $colorPlotLabelFg: pushBack($colorPlotFg, 20%);
 $legendHoverValueBg: rgba($colorBodyFg, 0.2);
 $legendTableHeadBg: $colorTabHeaderBg;
-$colorPlotLimitLineBg: rgba($colorBodyBg, 0.2);
 
 // Tree
 $colorTreeBg: transparent;

src/styles/_constants-maelstrom.scss

@@ -318,21 +318,12 @@ $colorTelemStale: pushBack($colorBodyFg, 20%);
 $styleTelemStale: italic;
 
 // Limits
-$colorLimitYellowBg: #B18B05;
-$colorLimitYellowFg: #FEEEB5;
-$colorLimitYellowIc: #FDC707;
-$colorLimitOrangeBg: #B36B00;
-$colorLimitOrangeFg: #FFE0B2;
-$colorLimitOrangeIc: #ff9900;
+$colorLimitYellowBg: #ac7300;
+$colorLimitYellowFg: #ffe64d;
+$colorLimitYellowIc: #ffb607;
 $colorLimitRedBg: #940000;
 $colorLimitRedFg: #ffa489;
 $colorLimitRedIc: #ff4222;
-$colorLimitPurpleBg: #891BB3;
-$colorLimitPurpleFg: #EDBEFF;
-$colorLimitPurpleIc: #c327ff;
-$colorLimitCyanBg: #4BA6B3;
-$colorLimitCyanFg: #D3FAFF;
-$colorLimitCyanIc: #6BEDFF;
 
 // Bubble colors
 $colorInfoBubbleBg: #dddddd;
@@ -372,7 +363,6 @@ $colorPlotAreaBorder: $colorInteriorBorder;
 $colorPlotLabelFg: pushBack($colorPlotFg, 20%);
 $legendHoverValueBg: rgba($colorBodyFg, 0.2);
 $legendTableHeadBg: rgba($colorBodyFg, 0.15);
-$colorPlotLimitLineBg: rgba($colorBodyBg, 0.2);
 
 // Tree
 $colorTreeBg: transparent;

src/styles/_constants-snow.scss

@@ -317,18 +317,9 @@ $styleTelemStale: italic;
 $colorLimitYellowBg: #ffe64d;
 $colorLimitYellowFg: #7f4f20;
 $colorLimitYellowIc: #e7a115;
-$colorLimitOrangeBg: #B36B00;
-$colorLimitOrangeFg: #FFE0B2;
-$colorLimitOrangeIc: #ff9900;
 $colorLimitRedBg: #ff0000;
 $colorLimitRedFg: #fff;
 $colorLimitRedIc: #ffa99a;
-$colorLimitPurpleBg: #891BB3;
-$colorLimitPurpleFg: #EDBEFF;
-$colorLimitPurpleIc: #c327ff;
-$colorLimitCyanBg: #4BA6B3;
-$colorLimitCyanFg: #D3FAFF;
-$colorLimitCyanIc: #1795c0;
 
 // Bubble colors
 $colorInfoBubbleBg: $colorMenuBg;
@@ -368,7 +359,6 @@ $colorPlotAreaBorder: $colorInteriorBorder;
 $colorPlotLabelFg: pushBack($colorPlotFg, 20%);
 $legendHoverValueBg: rgba($colorBodyFg, 0.2);
 $legendTableHeadBg: rgba($colorBodyFg, 0.15);
-$colorPlotLimitLineBg: rgba($colorBodyBg, 0.4);
 
 // Tree
 $colorTreeBg: transparent;

src/styles/_legacy-plots.scss

@@ -136,7 +136,6 @@ mct-plot {
         left: nth($plotDisplayArea, 4);
 
         .gl-plot-display-area {
-            overflow: hidden;
             position: absolute;
             top: 0;
             right: 0;
@@ -539,9 +538,12 @@ mct-plot {
     }
 
     .plot-series-color-swatch {
-        @include colorSwatch();
+        border-radius: 30%; //$smallCr;
+        border: 1px solid $colorBodyBg;
         display: inline-block;
         flex: 0 0 auto;
+        height: $plotSwatchD;
+        width: $plotSwatchD;
     }
     .plot-series-name {
         display: inline;
@@ -550,7 +552,6 @@ mct-plot {
 
     .plot-series-value {
         @include ellipsize();
-        @include isLimit();
     }
 }
 

src/styles/_limits.scss

@@ -1,270 +0,0 @@
-$plotLimitLineSize: 1px;
-$plotLimitDashWidthOffset: 10px;
-$lineBlocker: $colorPlotLimitLineBg;
-$plotLimitDashWidthSeverity: 50px;
-$plotLimitDashWidthCritical: $plotLimitDashWidthSeverity - $plotLimitDashWidthOffset;
-$plotLimitDashWidthDistress: $plotLimitDashWidthCritical - $plotLimitDashWidthOffset;
-$plotLimitDashWidthWarning: $plotLimitDashWidthDistress - $plotLimitDashWidthOffset;
-$plotLimitDashWidthWatch: $plotLimitDashWidthWarning - $plotLimitDashWidthOffset;
-
-@mixin plotLimitLine($c, $breakPerc) {
-    background: $lineBlocker linear-gradient(
-                    90deg,
-                    $c $breakPerc,
-                    transparent $breakPerc,
-                    transparent 100%
-    ) repeat-x;
-}
-
-@mixin plotLimitDirectionGradient($c, $deg: 0deg) {
-    background: linear-gradient(
-                    $deg,
-                    $c,
-                    transparent
-    )
-}
-
-@mixin plotLimitLineUpper($c) {
-    $breakPerc: 80%;
-    @include plotLimitLine($c: $c, $breakPerc: $breakPerc);
-}
-
-@mixin plotLimitLineLower($c) {
-    $breakPerc: 30%;
-    @include plotLimitLine($c: $c, $breakPerc: $breakPerc);
-}
-
-.c-plot-limit-line {
-    box-shadow: $lineBlocker 0 0 0 2px;
-    height: $plotLimitLineSize;
-    width: 100%;
-    position: absolute;
-    z-index: 1;
-
-    // Colors and directions
-    &--purple.c-plot-limit-line--upr {
-        @include plotLimitLineUpper($colorLimitPurpleIc);
-    }
-
-    &--purple.c-plot-limit-line--lwr {
-        @include plotLimitLineLower($colorLimitPurpleIc);
-    }
-
-    &--red.c-plot-limit-line--upr {
-        @include plotLimitLineUpper($colorLimitRedIc);
-    }
-
-    &--red.c-plot-limit-line--lwr {
-        @include plotLimitLineLower($colorLimitRedIc);
-    }
-
-    &--orange.c-plot-limit-line--upr {
-        @include plotLimitLineUpper($colorLimitOrangeIc);
-    }
-
-    &--orange.c-plot-limit-line--lwr {
-        @include plotLimitLineLower($colorLimitOrangeIc);
-    }
-
-    &--yellow.c-plot-limit-line--upr {
-        @include plotLimitLineUpper($colorLimitYellowIc);
-    }
-
-    &--yellow.c-plot-limit-line--lwr {
-        @include plotLimitLineLower($colorLimitYellowIc);
-    }
-
-    &--cyan.c-plot-limit-line--upr {
-        @include plotLimitLineUpper($colorLimitCyanIc);
-    }
-
-    &--cyan.c-plot-limit-line--lwr {
-        @include plotLimitLineLower($colorLimitCyanIc);
-    }
-
-    // Severities
-    &--severe {
-        background-size: $plotLimitDashWidthSeverity 100% !important;
-    }
-
-    &--critical {
-        background-size: $plotLimitDashWidthCritical 100% !important;
-    }
-
-    &--distress {
-        background-size: $plotLimitDashWidthDistress 100% !important;
-    }
-
-    &--warning {
-        background-size: $plotLimitDashWidthWarning 100% !important;
-    }
-
-    &--watch {
-        background-size: $plotLimitDashWidthWatch 100% !important;
-    }
-}
-
-.c-plot-limit {
-    // Holds both label and directional gradient
-    $labelCr: $basicCr;
-    display: flex;
-    position: absolute;
-    width: 100%;
-    z-index: 0;
-
-    &__label {
-        border-width: 1px 1px 0 0;
-        border-style: solid;
-        border-radius: 0 $labelCr 0 0;
-        display: flex;
-        flex: 0 0 auto;
-        align-items: center;
-        padding: 2px 4px;
-        transform: translateY(-100%);
-
-        > * + * {
-            margin-left: $interiorMarginSm;
-        }
-    }
-
-    &.--align-label-right {
-        justify-content: flex-end;
-        .c-plot-limit__label {
-            border-radius: $labelCr 0 0 0;
-            border-width: 1px 0 0 1px;
-        }
-    }
-
-    &.--align-label-below {
-        .c-plot-limit__label {
-            border-radius: 0 0 $labelCr 0;
-            border-width: 0 1px 1px 0;
-            transform: translateY(0);
-        }
-        &.--align-label-right {
-            .c-plot-limit__label {
-                border-radius: 0 0 0 $labelCr;
-                border-width: 0 0 1px 1px;
-            }
-        }
-    }
-
-    [class*='icon'] {
-        &:before {
-            display: block;
-            font-family: symbolsfont;
-            font-size: 0.9em;
-        }
-    }
-
-    &__series-color-swatch {
-        @include colorSwatch();
-        display: block;
-        flex: 0 0 auto;
-    }
-
-    &:before {
-        // Direction gradient
-        content: "";
-        display: block;
-        position: absolute;
-        left: 0;
-        right: 0;
-        height: 100%;
-        opacity: 0.2;
-    }
-
-    &--upr:before {
-        transform: translateY(-100%);
-    }
-
-    &--lwr:before {
-        transform: scaleY(-1); // This inverts the gradient direction
-    }
-
-    // Label styling
-    &--purple [class*='label'] {
-        background-color: $colorLimitPurpleBg;
-        border-color: $colorLimitPurpleIc;
-        color: $colorLimitPurpleFg;
-    }
-
-    &--red [class*='label'] {
-        background-color: $colorLimitRedBg;
-        border-color: $colorLimitRedIc;
-        color: $colorLimitRedFg;
-    }
-
-    &--orange [class*='label'] {
-        background-color: $colorLimitOrangeBg;
-        border-color: $colorLimitOrangeIc;
-        color: $colorLimitOrangeFg;
-    }
-
-    &--yellow [class*='label'] {
-        background-color: $colorLimitYellowBg;
-        border-color: $colorLimitYellowIc;
-        color: $colorLimitYellowFg;
-    }
-
-    &--cyan [class*='label'] {
-        background-color: $colorLimitCyanBg;
-        border-color: $colorLimitCyanIc;
-        color: $colorLimitCyanFg;
-    }
-
-    // Directional gradients
-    &--purple:before {
-        @include plotLimitDirectionGradient($c: $colorLimitPurpleIc);
-    }
-
-    &--red:before {
-        @include plotLimitDirectionGradient($c: $colorLimitRedIc);
-    }
-
-    &--orange:before {
-        @include plotLimitDirectionGradient($c: $colorLimitOrangeIc);
-    }
-
-    &--yellow:before {
-        @include plotLimitDirectionGradient($c: $colorLimitYellowIc);
-    }
-
-    &--cyan:before {
-        @include plotLimitDirectionGradient($c: $colorLimitCyanIc);
-    }
-}
-
-// Severity icons
-.c-plot-limit__label .c-plot-limit__severity-icon:before {
-    .c-plot-limit--severe & {
-        content: $glyph-icon-alert-triangle;
-    }
-
-    .c-plot-limit--critical & {
-        content: $glyph-icon-alert-rect;
-    }
-
-    .c-plot-limit--distress & {
-        content: $glyph-icon-bell;
-    }
-
-    .c-plot-limit--warning & {
-        content: $glyph-icon-asterisk;
-    }
-
-    .c-plot-limit--watch & {
-        content: $glyph-icon-eye-open;
-    }
-}
-
-// Direction icons
-.c-plot-limit__label .c-plot-limit__direction-icon:before {
-    .c-plot-limit--upr & {
-        content: $glyph-icon-arrow-up;
-    }
-
-    .c-plot-limit--lwr & {
-        content: $glyph-icon-arrow-down;
-    }
-}

src/styles/_mixins.scss

@@ -151,25 +151,6 @@
     }
 }
 
-@mixin isLimit() {
-    &[class*='is-limit'] {
-        &:before {
-            display: inline-block;
-            font-family: symbolsfont;
-            margin-right: $interiorMarginSm;
-        }
-    }
-
-    &.is-limit--lwr:before { content: $glyph-icon-arrow-down; }
-    &.is-limit--upr:before { content: $glyph-icon-arrow-up; }
-
-    &.is-limit--purple { background: $colorLimitPurpleBg !important; color: $colorLimitPurpleFg !important; }
-    &.is-limit--red { background: $colorLimitRedBg !important; color: $colorLimitRedFg !important; }
-    &.is-limit--orange { background: $colorLimitOrangeBg !important; color: $colorLimitOrangeFg !important; }
-    &.is-limit--yellow { background: $colorLimitYellowBg !important; color: $colorLimitYellowFg !important; }
-    &.is-limit--cyan { background: $colorLimitCyanBg !important; color: $colorLimitCyanFg !important; }
-}
-
 @mixin bgDiagonalStripes($c: yellow, $a: 0.1, $d: 40px) {
     background-image: linear-gradient(-45deg,
         rgba($c, $a) 25%, transparent 25%,
@@ -241,13 +222,6 @@
     background-size: $bgSize;
 }
 
-@mixin colorSwatch() {
-    border-radius: 30%;
-    border: 1px solid $colorBodyBg;
-    height: $plotSwatchD;
-    width: $plotSwatchD;
-}
-
 @mixin noColor() {
     // A "no fill/stroke" selection option. Used in palettes.
     $c: red;

src/styles/_status.scss

@@ -65,6 +65,15 @@
     }
 }
 
+@mixin andUprLwr {
+    &.is-limit--upr:before { content: $glyph-icon-arrow-up !important; }
+    &.is-limit--lwr:before { content: $glyph-icon-arrow-down !important; }
+}
+
+@mixin andLine {
+    &.is-limit--line:before { content: '' !important; }
+}
+
 @mixin uIndicator($bg, $fg, $glyph) {
     background: $bg;
     color: $fg;
@@ -86,9 +95,26 @@
         display: inline-block;
         padding: 2px $interiorMargin;
     }
+
 }
 
 /*************************************************** STYLES */
+*:not(tr) {
+    &.is-limit--yellow {
+        @include statusStyle($colorLimitYellowBg, $colorLimitYellowFg, true);
+        @include statusIcon($colorLimitYellowIc, $glyph-icon-alert-rect);
+        @include andUprLwr();
+        @include andLine();
+    }
+
+    &.is-limit--red {
+        @include statusStyle($colorLimitRedBg, $colorLimitRedFg, true);
+        @include statusIcon($colorLimitRedIc, $glyph-icon-alert-triangle);
+        @include andUprLwr();
+        @include andLine();
+    }
+}
+
 tr {
     &.is-limit--yellow {
         @include statusStyle($colorLimitYellowBg, $colorLimitYellowFg);

src/ui/inspector/InspectorStylesSpec.js

@@ -1,218 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2020, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-import {
-    createOpenMct,
-    resetApplicationState
-} from 'utils/testing';
-import {
-    mockLocalStorage
-} from 'utils/testing/mockLocalStorage';
-import {
-    mockTelemetryTableSelection,
-    mockMultiSelectionSameStyles,
-    mockMultiSelectionMixedStyles,
-    mockMultiSelectionNonSpecificStyles,
-    mockStyle
-} from './InspectorStylesSpecMocks';
-import Vue from 'vue';
-import StylesView from '@/plugins/condition/components/inspector/StylesView.vue';
-import SavedStylesView from '@/ui/inspector/styles/SavedStylesView.vue';
-import stylesManager from '@/ui/inspector/styles/StylesManager';
-
-describe("the inspector", () => {
-    let openmct;
-    let selection;
-    let stylesViewComponent;
-    let savedStylesViewComponent;
-
-    mockLocalStorage();
-
-    beforeEach((done) => {
-        openmct = createOpenMct();
-        openmct.on('start', done);
-        openmct.startHeadless();
-    });
-
-    afterEach(() => {
-        return resetApplicationState(openmct);
-    });
-
-    it("should allow a style to be saved", () => {
-        selection = mockTelemetryTableSelection;
-        stylesViewComponent = createViewComponent(StylesView, selection, openmct);
-        savedStylesViewComponent = createViewComponent(SavedStylesView, selection, openmct);
-
-        expect(savedStylesViewComponent.$children[0].savedStyles.length).toBe(0);
-
-        stylesViewComponent.$children[0].saveStyle(mockStyle);
-
-        expect(savedStylesViewComponent.$children[0].savedStyles.length).toBe(1);
-    });
-
-    it("should display all saved styles", () => {
-        selection = mockTelemetryTableSelection;
-        stylesViewComponent = createViewComponent(StylesView, selection, openmct);
-        savedStylesViewComponent = createViewComponent(SavedStylesView, selection, openmct);
-
-        expect(savedStylesViewComponent.$children[0].$children.length).toBe(0);
-        stylesViewComponent.$children[0].saveStyle(mockStyle);
-
-        stylesViewComponent.$nextTick().then(() => {
-            expect(savedStylesViewComponent.$children[0].$children.length).toBe(1);
-        });
-    });
-
-    it("should allow a saved style to be applied", () => {
-        spyOn(openmct.editor, 'isEditing').and.returnValue(true);
-
-        selection = mockTelemetryTableSelection;
-        stylesViewComponent = createViewComponent(StylesView, selection, openmct);
-        savedStylesViewComponent = createViewComponent(SavedStylesView, selection, openmct);
-
-        stylesViewComponent.$children[0].saveStyle(mockStyle);
-
-        stylesViewComponent.$nextTick().then(() => {
-            const styleSelectorComponent = savedStylesViewComponent.$children[0].$children[0];
-
-            styleSelectorComponent.selectStyle();
-
-            savedStylesViewComponent.$nextTick().then(() => {
-                const styleEditorComponentIndex = stylesViewComponent.$children[0].$children.length - 1;
-                const styleEditorComponent = stylesViewComponent.$children[0].$children[styleEditorComponentIndex];
-                const styles = styleEditorComponent.$children.filter(component => component.options.value === mockStyle.color);
-
-                expect(styles.length).toBe(3);
-            });
-        });
-    });
-
-    it("should allow a saved style to be deleted", () => {
-        selection = mockTelemetryTableSelection;
-        stylesViewComponent = createViewComponent(StylesView, selection, openmct);
-        savedStylesViewComponent = createViewComponent(SavedStylesView, selection, openmct);
-
-        stylesViewComponent.$children[0].saveStyle(mockStyle);
-
-        expect(savedStylesViewComponent.$children[0].savedStyles.length).toBe(1);
-
-        savedStylesViewComponent.$children[0].deleteStyle(0);
-
-        expect(savedStylesViewComponent.$children[0].savedStyles.length).toBe(0);
-    });
-
-    it("should prevent a style from being saved when the number of saved styles is at the limit", () => {
-        spyOn(SavedStylesView.methods, 'showLimitReachedDialog').and.callThrough();
-
-        selection = mockTelemetryTableSelection;
-        stylesViewComponent = createViewComponent(StylesView, selection, openmct);
-        savedStylesViewComponent = createViewComponent(SavedStylesView, selection, openmct);
-
-        for (let i = 1; i <= 20; i++) {
-            stylesViewComponent.$children[0].saveStyle(mockStyle);
-        }
-
-        expect(SavedStylesView.methods.showLimitReachedDialog).not.toHaveBeenCalled();
-        expect(savedStylesViewComponent.$children[0].savedStyles.length).toBe(20);
-
-        stylesViewComponent.$children[0].saveStyle(mockStyle);
-
-        expect(SavedStylesView.methods.showLimitReachedDialog).toHaveBeenCalled();
-        expect(savedStylesViewComponent.$children[0].savedStyles.length).toBe(20);
-    });
-
-    it("should allow styles from multi-selections to be saved", () => {
-        spyOn(openmct.editor, 'isEditing').and.returnValue(true);
-
-        selection = mockMultiSelectionSameStyles;
-        stylesViewComponent = createViewComponent(StylesView, selection, openmct);
-        savedStylesViewComponent = createViewComponent(SavedStylesView, selection, openmct);
-
-        stylesViewComponent.$nextTick().then(() => {
-            const styleEditorComponentIndex = stylesViewComponent.$children[0].$children.length - 1;
-            const styleEditorComponent = stylesViewComponent.$children[0].$children[styleEditorComponentIndex];
-            const saveStyleButtonIndex = styleEditorComponent.$children.length - 1;
-            const saveStyleButton = styleEditorComponent.$children[saveStyleButtonIndex];
-
-            expect(saveStyleButton.$listeners.click).not.toBe(undefined);
-
-            saveStyleButton.$listeners.click();
-
-            expect(savedStylesViewComponent.$children[0].savedStyles.length).toBe(1);
-        });
-    });
-
-    it("should prevent mixed styles from being saved", () => {
-        spyOn(openmct.editor, 'isEditing').and.returnValue(true);
-
-        selection = mockMultiSelectionMixedStyles;
-        stylesViewComponent = createViewComponent(StylesView, selection, openmct);
-        savedStylesViewComponent = createViewComponent(SavedStylesView, selection, openmct);
-
-        stylesViewComponent.$nextTick().then(() => {
-            const styleEditorComponentIndex = stylesViewComponent.$children[0].$children.length - 1;
-            const styleEditorComponent = stylesViewComponent.$children[0].$children[styleEditorComponentIndex];
-            const saveStyleButtonIndex = styleEditorComponent.$children.length - 1;
-            const saveStyleButton = styleEditorComponent.$children[saveStyleButtonIndex];
-
-            expect(saveStyleButton.$listeners.click).toBe(undefined);
-        });
-    });
-
-    it("should prevent non-specific styles from being saved", () => {
-        spyOn(openmct.editor, 'isEditing').and.returnValue(true);
-
-        selection = mockMultiSelectionNonSpecificStyles;
-        stylesViewComponent = createViewComponent(StylesView, selection, openmct);
-        savedStylesViewComponent = createViewComponent(SavedStylesView, selection, openmct);
-
-        stylesViewComponent.$nextTick().then(() => {
-            const styleEditorComponentIndex = stylesViewComponent.$children[0].$children.length - 1;
-            const styleEditorComponent = stylesViewComponent.$children[0].$children[styleEditorComponentIndex];
-            const saveStyleButtonIndex = styleEditorComponent.$children.length - 1;
-            const saveStyleButton = styleEditorComponent.$children[saveStyleButtonIndex];
-
-            expect(saveStyleButton.$listeners.click).toBe(undefined);
-        });
-    });
-
-    function createViewComponent(component) {
-        const element = document.createElement('div');
-        const child = document.createElement('div');
-        element.appendChild(child);
-
-        const config = {
-            provide: {
-                openmct,
-                selection,
-                stylesManager
-            },
-            el: element,
-            components: {},
-            template: `<${component.name} />`
-        };
-
-        config.components[component.name] = component;
-
-        return new Vue(config).$mount();
-    }
-});

src/ui/inspector/InspectorStylesSpecMocks.js

@@ -1,204 +0,0 @@
-export const mockTelemetryTableSelection = [
-    [{
-        context: {
-            item: {
-                configuration: {},
-                type: 'table',
-                identifier: {
-                    key: 'mock-telemetry-table-1',
-                    namespace: ''
-                }
-            }
-        }
-    }]
-];
-
-export const mockStyle = {
-    backgroundColor: '#ff0000',
-    border: '#ff0000',
-    color: '#ff0000'
-};
-
-const mockDisplayLayoutPath = {
-    context: {
-        item: {
-            identifier: {
-                key: "6af3200d-928b-4ff0-8ed0-b94a0e6752d1",
-                namespace: ""
-            },
-            type: "layout",
-            configuration: {
-                items: [
-                    {
-                        id: "dd3202e5-40d0-4112-8951-00f0f1ed6a29",
-                        type: "text-view",
-                        fontSize: "default",
-                        font: "default"
-                    },
-                    {
-                        id: "b522d636-90b2-4f5f-9588-2a0345c30f87",
-                        type: "text-view",
-                        fontSize: "default",
-                        font: "default"
-                    },
-                    {
-                        id: "537b7596-b442-44fe-b464-07f56bdc67c8",
-                        type: "text-view",
-                        fontSize: "default",
-                        font: "default"
-                    },
-                    {
-                        id: "3f17162f-a822-4e39-8332-6aa39b79d022",
-                        type: "text-view",
-                        fontSize: "default",
-                        font: "default"
-                    },
-                    {
-                        id: "c1c5acd8-a14b-450c-8c94-ce0075dd9912",
-                        type: "text-view",
-                        fontSize: "8",
-                        font: "monospace-bold"
-                    }
-                ],
-                objectStyles: {
-                    "dd3202e5-40d0-4112-8951-00f0f1ed6a29": {
-                        staticStyle: {
-                            style: {
-                                backgroundColor: "#0000ff",
-                                border: "1px solid #0000ff"
-                            }
-                        }
-                    },
-                    "b522d636-90b2-4f5f-9588-2a0345c30f87": {
-                        staticStyle: {
-                            style: {
-                                backgroundColor: "#ff0000",
-                                border: "1px solid #ff0000"
-                            }
-                        }
-                    },
-                    "537b7596-b442-44fe-b464-07f56bdc67c8": {
-                        staticStyle: {
-                            style: {
-                                backgroundColor: "#ff0000",
-                                border: "1px solid #ff0000"
-                            }
-                        }
-                    },
-                    "3f17162f-a822-4e39-8332-6aa39b79d022": {
-                        staticStyle: {
-                            style: {
-                                backgroundColor: "#0000ff",
-                                border: "1px solid #0000ff",
-                                color: "#0000ff"
-                            }
-                        }
-                    },
-                    "c1c5acd8-a14b-450c-8c94-ce0075dd9912": {
-                        staticStyle: {
-                            style: {
-                                backgroundColor: "#0000ff",
-                                border: "1px solid #0000ff",
-                                color: "#0000ff"
-                            }
-                        }
-                    }
-                }
-            }
-        },
-        supportsMultiSelect: true
-    }
-};
-
-const mockTextBox1Path = {
-    context: {
-        index: 0,
-        layoutItem: {
-            id: "dd3202e5-40d0-4112-8951-00f0f1ed6a29",
-            type: "text-view",
-            fontSize: "default",
-            font: "default"
-        }
-    }
-};
-
-const mockTextBox2Path = {
-    context: {
-        index: 1,
-        layoutItem: {
-            id: "b522d636-90b2-4f5f-9588-2a0345c30f87",
-            type: "text-view",
-            fontSize: "default",
-            font: "default"
-        }
-    }
-};
-
-const mockTextBox3Path = {
-    context: {
-        index: 2,
-        layoutItem: {
-            id: "537b7596-b442-44fe-b464-07f56bdc67c8",
-            type: "text-view",
-            fontSize: "default",
-            font: "default"
-        }
-    }
-};
-
-const mockTextBox4Path = {
-    context: {
-        index: 3,
-        layoutItem: {
-            id: "3f17162f-a822-4e39-8332-6aa39b79d022",
-            type: "text-view",
-            fontSize: "default",
-            font: "default"
-        }
-    }
-};
-
-const mockTextBox5Path = {
-    context: {
-        index: 4,
-        layoutItem: {
-            id: "c1c5acd8-a14b-450c-8c94-ce0075dd9912",
-            type: "text-view",
-            fontSize: "8",
-            font: "default-bold"
-        }
-    }
-};
-
-export const mockMultiSelectionSameStyles = [
-    [
-        mockTextBox2Path,
-        mockDisplayLayoutPath
-    ],
-    [
-        mockTextBox3Path,
-        mockDisplayLayoutPath
-    ]
-];
-
-export const mockMultiSelectionMixedStyles = [
-    [
-        mockTextBox1Path,
-        mockDisplayLayoutPath
-    ],
-    [
-        mockTextBox2Path,
-        mockDisplayLayoutPath
-    ]
-];
-
-export const mockMultiSelectionNonSpecificStyles = [
-    [
-        mockTextBox4Path,
-        mockDisplayLayoutPath
-    ],
-    [
-        mockTextBox5Path,
-        mockDisplayLayoutPath
-    ]
-];

src/ui/mixins/object-link.js

@@ -1,5 +1,3 @@
-import objectPathToUrl from '/src/tools/url';
-
 export default {
     inject: ['openmct'],
     props: {
@@ -20,9 +18,10 @@ export default {
                 return '#' + this.navigateToPath;
             }
 
-            let url = objectPathToUrl(this.openmct, this.objectPath);
-
-            return url;
+            return '#/browse/' + this.objectPath
+                .map(o => o && this.openmct.objects.makeKeyString(o.identifier))
+                .reverse()
+                .join('/');
         }
     }
 };

src/utils/testing.js

@@ -21,7 +21,6 @@
  *****************************************************************************/
 
 import MCT from 'MCT';
-
 let nativeFunctions = [];
 let mockObjects = setMockObjects();
 

src/utils/testing/mockLocalStorage.js

@@ -1,33 +0,0 @@
-export function mockLocalStorage() {
-    let store;
-
-    beforeEach(() => {
-        spyOn(Storage.prototype, 'getItem').and.callFake(getItem);
-        spyOn(Storage.prototype, 'setItem').and.callFake(setItem);
-        spyOn(Storage.prototype, 'removeItem').and.callFake(removeItem);
-        spyOn(Storage.prototype, 'clear').and.callFake(clear);
-
-        store = {};
-
-        function getItem(key) {
-            return store[key];
-        }
-
-        function setItem(key, value) {
-            store[key] = typeof value === 'string' ? value : JSON.stringify(value);
-        }
-
-        function removeItem(key) {
-            store[key] = undefined;
-            delete store[key];
-        }
-
-        function clear() {
-            store = {};
-        }
-    });
-
-    afterEach(() => {
-        store = undefined;
-    });
-}