Finish code walkthrough

catching any errors from a user canceling from dialog (#3968)
Fix navigation errors (#3970)
Only add listeners to observables on creation
Do not double destroy mutable objects
Disallow pause and play in time strip view for plots. (#3972)
Update version

Co-authored-by: Jamie V <jamie.j.vigliotta@nasa.gov>
Co-authored-by: Andrew Henry <akhenry@gmail.com>

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,43 @@
+<!--- This is for filing bugs. If you have a general question, please -->
+<!--- visit https://github.com/nasa/openmct/discussions -->
+
+---
+name: Bug Report
+about: File a Bug !
+
+---
+<!--- Focus on user impact in the title. Use the Summary Field to -->
+<!--- describe the problem technically. -->
+
+#### Summary
+<!--- A description of the issue encountered. When possible, a description -->
+<!--- of the impact of the issue. What use case does it impede?-->
+
+#### Expected vs Current Behavior
+<!--- Tell us what should have happened -->
+
+#### Impact Check List
+<!--- Please select from the following options -->
+
+- [ ] Data loss or misrepresented data?
+- [ ] Regression? Did this used to work or has it always been broken?
+- [ ] Is there a workaround available?
+- [ ] Does this impact a critical component?
+- [ ] Is this just a visual bug?
+
+#### Steps to Reproduce
+<!--- Provide a link to a live example, or an unambiguous set of steps to -->
+<!--- reproduce this bug. Include code to reproduce, if relevant -->
+1.
+2.
+3.
+4.
+
+#### Environment
+* Open MCT Version: <!--- date of build, version, or SHA -->
+* Deployment Type: <!--- npm dev? VIPER Dev? openmct-yams? -->
+* OS:
+* Browser:
+
+#### Additional Information
+<!--- Include any screenshots, gifs, or logs which will expedite triage -->

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1 @@
+blank_issues_enabled: false

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,23 @@
+<!--- This is for filing enhancements or features. If you have a general -->
+<!--- question, please visit https://github.com/nasa/openmct/discussions -->
+
+---
+name: Feature Request
+about: Suggest an idea for this project
+
+---
+
+<!--
+Thank you for suggesting an idea to make Open MCT better.
+
+Please fill in as much of the template below as you're able.
+-->
+
+**Is your feature request related to a problem? Please describe.**
+<!-- Please describe the problem you are trying to solve. -->
+
+**Describe the solution you'd like**
+<!--- Please describe the desired behavior. -->
+
+**Describe alternatives you've considered**
+<!--- Please describe alternative solutions or features you have considered. -->

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,12 @@
+### All Submissions:
+
+* [ ] Have you followed the guidelines in our [Contributing document](https://github.com/nasa/openmct/blob/master/CONTRIBUTING.md)?
+* [ ] Have you checked to ensure there aren't other open [Pull Requests](https://github.com/nasa/openmct/pulls) for the same update/change?
+
+### Author Checklist
+
+* [ ] Changes address original issue?
+* [ ] Unit tests included and/or updated with changes?
+* [ ] Command line build passes?
+* [ ] Has this been smoke tested?
+* [ ] Testing instructions included in associated issue?

.github/workflows/lighthouse.yml

@@ -0,0 +1,18 @@
+name: lighthouse
+on:
+  workflow_dispatch:
+    inputs: 
+      version:
+        description: 'Which branch do you want to test?' # Limited to branch for now
+        required: false
+        default: 'master' 
+jobs:
+  lighthouse:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          ref: ${{ github.event.inputs.version }}
+      - uses: actions/setup-node@v1
+      - run: npm install && npm install -g @lhci/cli #Don't want to include this in our deps
+      - run: lhci autorun

.gitignore

@@ -40,4 +40,7 @@ npm-debug.log
 # karma reports
 report.*.json
 
+# Lighthouse reports
+.lighthouseci
+
 package-lock.json

API.md

@@ -423,7 +423,7 @@ attribute      | type   | flags    | notes
 
 ###### Value Hints
 
-Each telemetry value description has an object defining hints.  Keys in this this object represent the hint itself, and the value represents the weight of that hint.  A lower weight means the hint has a higher priority.  For example, multiple values could be hinted for use as the y-axis of a plot (raw, engineering), but the highest priority would be the default choice.  Likewise, a table will use hints to determine the default order of columns.
+Each telemetry value description has an object defining hints.  Keys in this object represent the hint itself, and the value represents the weight of that hint.  A lower weight means the hint has a higher priority.  For example, multiple values could be hinted for use as the y-axis of a plot (raw, engineering), but the highest priority would be the default choice.  Likewise, a table will use hints to determine the default order of columns.
 
 Known hints:
 
@@ -595,9 +595,17 @@ section.
 
 #### Limit Evaluators **draft**
 
-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`.
+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`.
 
 ### Telemetry Consumer APIs **draft**
 

CONTRIBUTING.md

@@ -10,7 +10,7 @@ accept changes from external contributors.
 
 The short version:
 
-1. Write your contribution.
+1. Write your contribution or describe your idea in the form of an [GitHub issue](https://github.com/nasa/openmct/issues/new/choose) or [Starting a GitHub Discussion](https://github.com/nasa/openmct/discussions)
 2. Make sure your contribution meets code, test, and commit message
    standards as described below.
 3. Submit a pull request from a topic branch back to `master`. Include a check
@@ -18,6 +18,7 @@ The short version:
    for review.)
 4. Respond to any discussion. When the reviewer decides it's ready, they
    will merge back `master` and fill out their own check list.
+5. If you are a first-time contributor, please see [this discussion](https://github.com/nasa/openmct/discussions/3821) for further information.   
 
 ## Contribution Process
 
@@ -115,7 +116,7 @@ the pull request containing the reviewer checklist (from below) and complete
 the merge back to the master branch.
 
 Additionally:
-* Every pull request must link to the issue that it addresses. Eg. “Addresses #1234” or “Closes #1234”. This is the responsibility of the pull request’s __author__. If no issue exists, create one.
+* Every pull request must link to the issue that it addresses. Eg. “Addresses #1234” or “Closes #1234”. This is the responsibility of the pull request’s __author__. If no issue exists, [create one](https://github.com/nasa/openmct/issues/new/choose).
 * Every __author__ must include testing instructions. These instructions should identify the areas of code affected, and some minimal test steps. If addressing a bug, reproduction steps should be included, if they were not included in the original issue. If reproduction steps were included on the original issue, and are sufficient, refer to them.
 * A pull request that closes an issue should say so in the description. Including the text “Closes #1234” will cause the linked issue to be automatically closed when the pull request is merged. This is the responsibility of the pull request’s __author__.
 * When a pull request is merged, and the corresponding issue closed, the __reviewer__ must add the tag “unverified” to the original issue. This will indicate that although the issue is closed, it has not been tested yet.
@@ -296,23 +297,12 @@ these standards.
 
 Issues are tracked at https://github.com/nasa/openmct/issues.
 
-Issues should include:
-
-* A short description of the issue encountered.
-* A longer-form description of the issue encountered. When possible, steps to
-  reproduce the issue.
-* When possible, a description of the impact of the issue. What use case does
-  it impede?
-* An assessment of the severity of the issue.
-
 Issue severity is categorized as follows (in ascending order):
 
-* _Trivial_: Minimal impact on the usefulness and functionality of the
-  software; a "nice-to-have."
-* _(Unspecified)_: Major loss of functionality or impairment of use.
-* _Critical_: Large-scale loss of functionality or impairment of use,
-  such that remaining utility becomes marginal.
-* _Blocker_: Harmful or otherwise unacceptable behavior. Must fix.
+* _Trivial_: Minimal impact on the usefulness and functionality of the software; a "nice-to-have." Visual impact without functional impact,
+* _Medium_: Some impairment of use, but simple workarounds exist
+* _Critical_: Significant loss of functionality or impairment of use. Display of telemetry data is not affected though.
+* _Blocker_: Major functionality is impaired or lost, threatening mission success. Display of telemetry data is impaired or blocked by the bug, which could lead to loss of situational awareness.
 
 ## Check Lists
 
@@ -322,16 +312,19 @@ checklist).
 
 ### Author Checklist
 
-1. Changes address original issue?
-2. Unit tests included and/or updated with changes?
-3. Command line build passes?
-4. Changes have been smoke-tested?
-5. Testing instructions included?
+[Within PR Template](.github/PULL_REQUEST_TEMPLATE.md)
 
 ### Reviewer Checklist
 
-1. Changes appear to address issue?
-2. Appropriate unit tests included?
-3. Code style and in-line documentation are appropriate?
-4. Commit messages meet standards?
-5. Has associated issue been labelled `unverified`? (only applicable if this PR closes the issue)
+* [ ] Changes appear to address issue?
+* [ ] Appropriate unit tests included?
+* [ ] Code style and in-line documentation are appropriate?
+* [ ] Commit messages meet standards?
+* [ ] Has associated issue been labelled `unverified`? (only applicable if this PR closes the issue)
+* [ ] Has associated issue been labelled `bug`? (only applicable if this PR is for a bug fix)
+* [ ] List of Acceptance Tests Performed.
+
+Write out a small list of tests performed with just enough detail for another developer on the team 
+to execute. 
+
+i.e. ```When Clicking on Add button, new `object` appears in dropdown.```

README.md

@@ -1,9 +1,11 @@
-# Open MCT [![license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](http://www.apache.org/licenses/LICENSE-2.0)
+# Open MCT [![license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](http://www.apache.org/licenses/LICENSE-2.0) [![Language grade: JavaScript](https://img.shields.io/lgtm/grade/javascript/g/nasa/openmct.svg?logo=lgtm&logoWidth=18)](https://lgtm.com/projects/g/nasa/openmct/context:javascript)
 
 Open MCT (Open Mission Control Technologies) is a next-generation mission control framework for visualization of data on desktop and mobile devices. It is developed at NASA's Ames Research Center, and is being used by NASA for data analysis of spacecraft missions, as well as planning and operation of experimental rover systems. As a generalizable and open source framework, Open MCT could be used as the basis for building applications for planning, operation, and analysis of any systems producing telemetry data.
 
 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/).
@@ -44,7 +46,7 @@ The clearest examples for developing Open MCT plugins are in the
 our documentation.
 
 We want Open MCT to be as easy to use, install, run, and develop for as
-possible, and your feedback will help us get there! Feedback can be provided via [GitHub issues](https://github.com/nasa/openmct/issues), or by emailing us at [arc-dl-openmct@mail.nasa.gov](mailto:arc-dl-openmct@mail.nasa.gov).
+possible, and your feedback will help us get there! Feedback can be provided via [GitHub issues](https://github.com/nasa/openmct/issues/new/choose), [Starting a GitHub Discussion](https://github.com/nasa/openmct/discussions), or by emailing us at [arc-dl-openmct@mail.nasa.gov](mailto:arc-dl-openmct@mail.nasa.gov).
 
 ## Building Applications With Open MCT
 

docs/src/process/cycle.md

@@ -73,11 +73,11 @@ acceptance testing (e.g. by resolving any blockers found); any
 resources not needed for this effort should be used to begin work
 for the subsequent sprint.
 
-| Week  | Mon                       | Tue    | Wed | Thu                          | Fri         |
-|:-----:|:-------------------------:|:------:|:---:|:----------------------------:|:-----------:|
-| __1__ | Sprint plan               | Tag-up |     |                              |             |
-| __2__ |                           | Tag-up |     |                              | Code freeze |
-| __3__ | Per-sprint testing        | Triage |     | _Per-sprint testing*_        | Ship        |
+| Week  | Mon                       | Tue    | Wed | Thu                          | Fri                                   |
+|:-----:|:-------------------------:|:------:|:---:|:----------------------------:|:-------------------------------------:|
+| __1__ | Sprint plan               | Tag-up |     |                              |                                       |
+| __2__ |                           | Tag-up |     |                              | Code freeze  and sprint branch        |
+| __3__ | Per-sprint testing        | Triage |     | _Per-sprint testing*_        | Ship and merge sprint branch to master|
 
 * If necessary.
 
@@ -105,14 +105,20 @@ emphasis on testing.
     that team may begin work for that sprint during the
     third week, since testing and blocker resolution is unlikely
     to require all available resources.
+  * Testing success criteria identified per issue (where necessary). This could be in the form of acceptance tests on the issue or detailing performance tests, for example.
 * __Tag-up.__ Check in and status update among development team.
   May amend plan for sprint as-needed.
 * __Code freeze.__ Any new work from this sprint
   (features, bug fixes, enhancements) must be integrated by the
-  end of the second week of the sprint. After code freeze
-  (and until the end of the sprint) the only changes that should be
-  merged into the master branch should directly address issues
-  needed to pass acceptance testing.
+  end of the second week of the sprint. After code freeze, a sprint
+  branch will be created (and until the end of the sprint) the only 
+  changes that should be merged into the sprint branch should 
+  directly address issues needed to pass acceptance testing.
+  During this time, any other feature development will continue to
+  be merged into the master branch for the next sprint.
+* __Sprint branch merge to master.__ After acceptance testing, the sprint branch
+  will be merged back to the master branch. Any code conflicts that 
+  arise will be resolved by the team.
 * [__Per-release Testing.__](testing/plan.md#per-release-testing)
   Structured testing with predefined
   success criteria. No release should ship without passing
@@ -126,8 +132,8 @@ emphasis on testing.
   * [__Testathon.__](testing/plan.md#user-testing)
     Multi-user testing, involving as many users as
     is feasible, plus development team. Open-ended; should verify
-    completed work from this sprint, test exploratorily for
-    regressions, et cetera.
+    completed work from this sprint using the sprint branch, test 
+    exploratorily for regressions, et cetera.
   * [__Long-Duration Test.__](testing/plan.md#long-duration-testing) A
     test to verify that the software remains
     stable after running for longer durations. May include some
@@ -143,7 +149,7 @@ emphasis on testing.
   Subset of Pre-release Testing
   which should be performed before shipping at the end of any
   sprint. Time is allocated for a second round of
-  Pre-release Testing if the first round is not passed.
+  Pre-release Testing if the first round is not passed. Smoke tests collected from issues/PRs
 * __Triage.__ Team reviews issues from acceptance testing and uses
   success criteria to determine whether or not they should block
   release, then formulates a plan to address these issues before

docs/src/process/testing/plan.md

@@ -19,7 +19,7 @@ Testing for Open MCT includes:
 
 Manual, non-rigorous testing of the software and/or specific features
 of interest. Verifies that the software runs and that basic functionality
-is present.
+is present. The outcome of Smoke Testing should be a simplified list of Acceptance Tests which could be executed by another team member with sufficient context.
 
 ### Unit Testing
 
@@ -49,7 +49,7 @@ User testing will focus on the following activities:
 * General "trying to break things."
 
 During user testing, users will
-[report issues](https://github.com/nasa/openmctweb/blob/master/CONTRIBUTING.md#issue-reporting)
+[report issues](https://github.com/nasa/openmct/issues/new/choose)
 as they are encountered.
 
 Desired outcomes of user testing are:
@@ -71,7 +71,7 @@ usage. After twenty-four hours, the software is evaluated for:
   at the start of the test? Is it as responsive?
 
 Any defects or unexpected behavior identified during testing should be
-[reported as issues](https://github.com/nasa/openmctweb/blob/master/CONTRIBUTING.md#issue-reporting)
+[reported as issues](https://github.com/nasa/openmct/issues/new/choose)
 and reviewed for severity.
 
 ## Test Performance

docs/src/process/version.md

@@ -92,8 +92,8 @@ should update (or delegate the task of updating) Open MCT version
 numbers by the following process:
 
 1. Update version number in `package.json`
-  1. Create a new branch off the `master` branch.
-  2. Remove `-SNAPSHOT` suffix from the version in `package.json`.
+  1. Checkout branch created for the last sprint that has been successfully tested.
+  2. Remove a `-SNAPSHOT` suffix from the version in `package.json`.
   3. Verify that resulting version number meets semantic versioning
      requirements relative to previous stable version. Increment the 
      version number if necessary.
@@ -131,7 +131,8 @@ numbers by the following process:
   3. In `package.json` change package to be public (private: false)
   4. Test the package before publishing by doing `npm publish --dry-run` 
      if necessary.
-  5. Publish the package to the npmjs registry (e.g. `npm publish --access public`)
+  5. Publish the package to the npmjs registry (e.g. `npm publish --access public`) 
+     NOTE: Use the `--tag unstable` flag to the npm publishj if this is a prerelease.
   6. Confirm the package has been published (e.g. `https://www.npmjs.com/package/openmct`)
 5. Update snapshot status in `package.json`
   1. Create a new branch off the `master` branch.

example/generator/SinewaveLimitProvider.js

@@ -26,14 +26,26 @@ define([
 
 ) {
 
-    var RED = {
+    var PURPLE = {
+            sin: 2.2,
+            cos: 2.2
+        },
+        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",
@@ -93,5 +105,70 @@ 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
+                        }
+                    },
+                    WARNING: {
+                        low: {
+                            color: "yellow",
+                            sin: -YELLOW.sin,
+                            cos: -YELLOW.cos
+                        },
+                        high: {
+                            color: "yellow",
+                            ...YELLOW
+                        }
+                    },
+                    DISTRESS: {
+                        low: {
+                            color: "orange",
+                            sin: -ORANGE.sin,
+                            cos: -ORANGE.cos
+                        },
+                        high: {
+                            color: "orange",
+                            ...ORANGE
+                        }
+                    },
+                    CRITICAL: {
+                        low: {
+                            color: "red",
+                            sin: -RED.sin,
+                            cos: -RED.cos
+                        },
+                        high: {
+                            color: "red",
+                            ...RED
+                        }
+                    },
+                    SEVERE: {
+                        low: {
+                            color: "purple",
+                            sin: -PURPLE.sin,
+                            cos: -PURPLE.cos
+                        },
+                        high: {
+                            color: "purple",
+                            ...PURPLE
+                        }
+                    }
+                });
+            }
+        };
+    };
+
     return SinewaveLimitProvider;
 });

index.html

@@ -194,6 +194,7 @@
             ['table', 'telemetry.plot.overlay', 'telemetry.plot.stacked'],
             {indicator: true}
         ));
+        //openmct.install(openmct.plugins.CodeWalkthrough);
         openmct.start();
     </script>
 </html>

karma.conf.js

@@ -78,6 +78,7 @@ module.exports = (config) => {
             preserveDescribeNesting: true,
             foldAll: false
         },
+        browserConsoleLogOptions: { level: "error",  format: "%b %T: %m",  terminal: true },
         coverageIstanbulReporter: {
             fixWebpackSourcePaths: true,
             dir: process.env.CIRCLE_ARTIFACTS ?

lighthouserc.yml

@@ -0,0 +1,96 @@
+---
+ci:
+  collect:
+    urls:
+    - http://localhost/
+    numberOfRuns: 5
+    settings:
+      onlyCategories:
+      - performance
+      - best-practices
+  upload:
+    target: temporary-public-storage
+  assert:
+    preset: lighthouse:recommended
+    assertions:
+      ### Applicable assertions
+      bootup-time:
+      - warn
+      - minScore: 0.88 #Original value was calculated at 0.88
+      dom-size: 
+      - error
+      - maxNumericValue: 200 #Original value was calculated at 188
+      first-contentful-paint:
+      - error
+      - minScore: 0.07 #Original value was calculated at 0.08
+      mainthread-work-breakdown:
+      - warn
+      - minScore: 0.8 #Original value was calculated at 0.8
+      unused-javascript:
+      - warn
+      - maxLength: 1
+      - error
+      - maxNumericValue: 2000 #Original value was calculated at 1855
+      unused-css-rules: warn
+      installable-manifest: warn
+      service-worker: warn
+      ### Disabled seo, accessibility, and pwa assertions, below
+      categories:seo: 'off'
+      categories:accessibility: 'off'
+      categories:pwa: 'off'
+      accesskeys: 'off'
+      apple-touch-icon: 'off'
+      aria-allowed-attr: 'off'
+      aria-command-name: 'off'
+      aria-hidden-body: 'off'
+      aria-hidden-focus: 'off'
+      aria-input-field-name: 'off'
+      aria-meter-name: 'off'
+      aria-progressbar-name: 'off'
+      aria-required-attr: 'off'
+      aria-required-children: 'off'
+      aria-required-parent: 'off'
+      aria-roles: 'off'
+      aria-toggle-field-name: 'off'
+      aria-tooltip-name: 'off'
+      aria-treeitem-name: 'off'
+      aria-valid-attr: 'off'
+      aria-valid-attr-value: 'off'
+      button-name: 'off'
+      bypass: 'off'
+      canonical: 'off'
+      color-contrast: 'off'
+      content-width: 'off'
+      crawlable-anchors: 'off'
+      csp-xss: 'off'
+      font-display: 'off'
+      font-size: 'off'
+      maskable-icon: 'off'
+      heading-order: 'off'
+      hreflang: 'off'
+      html-has-lang: 'off'
+      html-lang-valid: 'off'
+      http-status-code: 'off'
+      image-alt: 'off'
+      input-image-alt: 'off'
+      is-crawlable: 'off'
+      label: 'off'
+      link-name: 'off'
+      link-text: 'off'
+      list: 'off'
+      listitem: 'off'
+      meta-description: 'off'
+      meta-refresh: 'off'
+      meta-viewport: 'off'
+      object-alt: 'off'
+      plugins: 'off'
+      robots-txt: 'off'
+      splash-screen: 'off'
+      tabindex: 'off'
+      tap-targets: 'off'
+      td-headers-attr: 'off'
+      th-has-data-cells: 'off'
+      themed-omnibox: 'off'
+      valid-lang: 'off'
+      video-caption: 'off'
+      viewport: 'off'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "openmct",
-  "version": "1.7.1-SNAPSHOT",
+  "version": "1.7.4",
   "description": "The Open MCT core platform",
   "dependencies": {},
   "devDependencies": {
@@ -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.0.35",
+    "painterro": "^1.2.56",
     "printj": "^1.2.1",
     "raw-loader": "^0.5.1",
     "request": "^2.69.0",
@@ -78,7 +78,8 @@
     "zepto": "^1.2.0"
   },
   "scripts": {
-    "clean": "rm -rf ./dist",
+    "clean": "rm -rf ./dist /node_modules; rm package-lock.json",
+    "clean-test-lint": "npm run clean; npm install ; npm run test; npm run lint",
     "start": "node app.js",
     "lint": "eslint platform example src --ext .js,.vue openmct.js",
     "lint:fix": "eslint platform example src --ext .js,.vue openmct.js --fix",

platform/commonUI/browse/bundle.js

@@ -24,7 +24,6 @@ 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",
@@ -37,7 +36,6 @@ define([
     NavigationService,
     NavigateAction,
     OrphanNavigationHandler,
-    NewTabAction,
     browseTemplate,
     browseObjectTemplate,
     objectHeaderTemplate,
@@ -128,23 +126,6 @@ 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/test/windowing/NewTabActionSpec.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.
- *****************************************************************************/
-
-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();
-            });
-
-        });
-    }
-);

platform/commonUI/edit/src/creation/CreateAction.js

@@ -86,7 +86,7 @@ define(
                         })
                         .join('/');
 
-                window.location.href = url;
+                openmct.router.navigate(url);
 
                 if (isFirstViewEditable(object.useCapability('adapter'), objectPath)) {
                     openmct.editor.edit();

platform/features/clock/bundle.js

@@ -23,13 +23,11 @@
 define([
     "moment-timezone",
     "./src/indicators/ClockIndicator",
-    "./src/indicators/FollowIndicator",
     "./src/services/TickerService",
     "./src/services/TimerService",
     "./src/controllers/ClockController",
     "./src/controllers/TimerController",
     "./src/controllers/RefreshingController",
-    "./src/actions/FollowTimerAction",
     "./src/actions/StartTimerAction",
     "./src/actions/RestartTimerAction",
     "./src/actions/StopTimerAction",
@@ -39,13 +37,11 @@ define([
 ], function (
     MomentTimezone,
     ClockIndicator,
-    FollowIndicator,
     TickerService,
     TimerService,
     ClockController,
     TimerController,
     RefreshingController,
-    FollowTimerAction,
     StartTimerAction,
     RestartTimerAction,
     StopTimerAction,
@@ -144,15 +140,6 @@ define([
                     }
                 ],
                 "actions": [
-                    {
-                        "key": "timer.follow",
-                        "implementation": FollowTimerAction,
-                        "depends": ["timerService"],
-                        "category": "contextual",
-                        "name": "Follow Timer",
-                        "cssClass": "icon-clock",
-                        "priority": "optional"
-                    },
                     {
                         "key": "timer.start",
                         "implementation": StartTimerAction,
@@ -299,10 +286,7 @@ define([
                         }
                     }
                 ],
-                "runs": [{
-                    "implementation": FollowIndicator,
-                    "depends": ["openmct", "timerService"]
-                }],
+                "runs": [],
                 "licenses": [
                     {
                         "name": "moment-duration-format",

platform/features/clock/test/actions/FollowTimerActionSpec.js

@@ -1,89 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2009-2016, 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/actions/FollowTimerAction"
-], function (FollowTimerAction) {
-    var TIMER_SERVICE_METHODS =
-        ['setTimer', 'getTimer', 'clearTimer', 'on', 'off'];
-
-    describe("The Follow Timer action", function () {
-        var testContext;
-        var testModel;
-        var testAdaptedObject;
-
-        beforeEach(function () {
-            testModel = {};
-            testContext = {
-                domainObject: jasmine.createSpyObj('domainObject', [
-                    'getModel',
-                    'useCapability'
-                ])
-            };
-            testAdaptedObject = { foo: 'bar' };
-            testContext.domainObject.getModel.and.returnValue(testModel);
-            testContext.domainObject.useCapability.and.callFake(function (c) {
-                return c === 'adapter' && testAdaptedObject;
-            });
-        });
-
-        it("is applicable to timers", function () {
-            testModel.type = "timer";
-            expect(FollowTimerAction.appliesTo(testContext)).toBe(true);
-        });
-
-        it("is inapplicable to non-timers", function () {
-            testModel.type = "folder";
-            expect(FollowTimerAction.appliesTo(testContext)).toBe(false);
-        });
-
-        describe("when instantiated", function () {
-            var mockTimerService;
-            var action;
-
-            beforeEach(function () {
-                mockTimerService = jasmine.createSpyObj(
-                    'timerService',
-                    TIMER_SERVICE_METHODS
-                );
-                action = new FollowTimerAction(mockTimerService, testContext);
-            });
-
-            it("does not interact with the timer service", function () {
-                TIMER_SERVICE_METHODS.forEach(function (method) {
-                    expect(mockTimerService[method]).not.toHaveBeenCalled();
-                });
-            });
-
-            describe("and performed", function () {
-                beforeEach(function () {
-                    action.perform();
-                });
-
-                it("sets the active timer", function () {
-                    expect(mockTimerService.setTimer)
-                        .toHaveBeenCalledWith(testAdaptedObject);
-                });
-            });
-        });
-    });
-});

platform/features/clock/test/indicators/FollowIndicatorSpec.js

@@ -1,96 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2009-2018, 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/indicators/FollowIndicator",
-    "../../src/services/TimerService",
-    "../../../../../src/MCT",
-    'zepto'
-], function (
-    FollowIndicator,
-    TimerService,
-    MCT,
-    $
-) {
-    xdescribe("The timer-following indicator", function () {
-        var timerService;
-        var openmct;
-
-        beforeEach(function () {
-            openmct = new MCT();
-            timerService = new TimerService(openmct);
-            spyOn(openmct.indicators, "add");
-        });
-
-        it("adds an indicator when installed", function () {
-            FollowIndicator(openmct, timerService);
-            expect(openmct.indicators.add).toHaveBeenCalled();
-        });
-
-        it("indicates that no timer is being followed", function () {
-            FollowIndicator(openmct, timerService);
-            var simpleIndicator = openmct.indicators.add.calls.mostRecent().args[0];
-            var element = simpleIndicator.element;
-            var text = $('.indicator-text', element).text().trim();
-            expect(text).toEqual('No timer being followed');
-        });
-
-        describe("when a timer is set", function () {
-            var testObject;
-            var simpleIndicator;
-
-            beforeEach(function () {
-                testObject = {
-                    identifier: {
-                        namespace: 'namespace',
-                        key: 'key'
-                    },
-                    name: "some timer!"
-                };
-                timerService.setTimer(testObject);
-                FollowIndicator(openmct, timerService);
-                simpleIndicator = openmct.indicators.add.calls.mostRecent().args[0];
-            });
-
-            it("displays the timer's name", function () {
-                var element = simpleIndicator.element;
-                var text = $('.indicator-text', element).text().trim();
-                expect(text).toEqual('Following timer ' + testObject.name);
-            });
-
-            it("displays the timer's name when it changes", function () {
-                var secondTimer = {
-                    identifier: {
-                        namespace: 'namespace',
-                        key: 'key2'
-                    },
-                    name: "Some other timer"
-                };
-                var element = simpleIndicator.element;
-                timerService.setTimer(secondTimer);
-                var text = $('.indicator-text', element).text().trim();
-                expect(text).toEqual('Following timer ' + secondTimer.name);
-            });
-
-        });
-    });
-});

src/MCT.js

@@ -252,7 +252,7 @@ define([
 
         this.status = new api.StatusAPI(this);
 
-        this.router = new ApplicationRouter();
+        this.router = new ApplicationRouter(this);
 
         this.branding = BrandingAPI.default;
 
@@ -274,6 +274,7 @@ 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/runs/LegacyTelemetryProvider.js

@@ -161,6 +161,22 @@ define([
             evaluate: function (datum, property) {
                 return limitEvaluator.evaluate(datum, property && property.key);
             }
+
+        };
+    };
+
+    LegacyTelemetryProvider.prototype.getLimits = function (domainObject) {
+        const oldObject = this.instantiate(
+            utils.toOldFormat(domainObject),
+            utils.makeKeyString(domainObject.identifier)
+        );
+        const limitEvaluator = oldObject.getCapability("limit");
+
+        return {
+            limits: function () {
+                return limitEvaluator.limits();
+            }
+
         };
     };
 

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 {string} type of image to convert the element to.
+         * @param {object} options Image options.
          * @returns {promise}
          */
-        ExportImageService.prototype.renderElement = function (element, imageType, className) {
+        ExportImageService.prototype.renderElement = function (element, {imageType, className, thumbnailSize}) {
+            const self = this;
             const dialogService = this.dialogService;
-
             const dialog = dialogService.showBlockingMessage({
                 title: "Capturing...",
                 hint: "Capturing an image",
@@ -90,7 +90,16 @@ define(
                 dialog.dismiss();
 
                 return new Promise(function (resolve, reject) {
-                    return canvas.toBlob(resolve, mimeType);
+                    if (thumbnailSize) {
+                        const thumbnail = self.getThumbnail(canvas, mimeType, thumbnailSize);
+
+                        return canvas.toBlob(blob => resolve({
+                            blob,
+                            thumbnail
+                        }), mimeType);
+                    }
+
+                    return canvas.toBlob(blob => resolve({ blob }), mimeType);
                 });
             }, function (error) {
                 console.log('error capturing image', error);
@@ -109,6 +118,17 @@ 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
@@ -119,9 +139,13 @@ define(
         ExportImageService.prototype.exportJPG = function (element, filename, className) {
             const processedFilename = replaceDotsWithUnderscores(filename);
 
-            return this.renderElement(element, "jpg", className).then(function (img) {
-                saveAs(img, processedFilename);
-            });
+            return this.renderElement(element, {
+                imageType: 'jpg',
+                className
+            })
+                .then(function (img) {
+                    saveAs(img.blob, processedFilename);
+                });
         };
 
         /**
@@ -134,9 +158,13 @@ define(
         ExportImageService.prototype.exportPNG = function (element, filename, className) {
             const processedFilename = replaceDotsWithUnderscores(filename);
 
-            return this.renderElement(element, "png", className).then(function (img) {
-                saveAs(img, processedFilename);
-            });
+            return this.renderElement(element, {
+                imageType: 'png',
+                className
+            })
+                .then(function (img) {
+                    saveAs(img.blob, processedFilename);
+                });
         };
 
         /**
@@ -146,8 +174,12 @@ define(
          * @returns {promise}
          */
 
-        ExportImageService.prototype.exportPNGtoSRC = function (element, className) {
-            return this.renderElement(element, "png", className);
+        ExportImageService.prototype.exportPNGtoSRC = function (element, options) {
+
+            return this.renderElement(element, {
+                imageType: 'png',
+                ...options
+            });
         };
 
         function replaceDotsWithUnderscores(filename) {

src/api/actions/ActionCollectionSpec.js

@@ -119,7 +119,8 @@ describe('The ActionCollection', () => {
 
     afterEach(() => {
         actionCollection.destroy();
-        resetApplicationState(openmct);
+
+        return resetApplicationState(openmct);
     });
 
     describe("disable method invoked with action keys", () => {

src/api/actions/ActionsAPISpec.js

@@ -99,7 +99,7 @@ describe('The Actions API', () => {
     });
 
     afterEach(() => {
-        resetApplicationState(openmct);
+        return resetApplicationState(openmct);
     });
 
     describe("register method", () => {

src/api/composition/CompositionCollection.js

@@ -215,12 +215,12 @@ define([
      * @memberof {module:openmct.CompositionCollection#}
      * @name load
      */
-    CompositionCollection.prototype.load = function () {
+    CompositionCollection.prototype.load = function (abortSignal) {
         this.cleanUpMutables();
 
         return this.provider.load(this.domainObject)
             .then(function (children) {
-                return Promise.all(children.map((c) => this.publicAPI.objects.get(c)));
+                return Promise.all(children.map((c) => this.publicAPI.objects.get(c, abortSignal)));
             }.bind(this))
             .then(function (childObjects) {
                 childObjects.forEach(c => this.add(c, true));

src/api/menu/MenuAPISpec.js

@@ -76,7 +76,7 @@ describe ('The Menu API', () => {
     });
 
     afterEach(() => {
-        resetApplicationState(openmct);
+        return resetApplicationState(openmct);
     });
 
     describe("showMenu method", () => {

src/api/objects/ObjectAPI.js

@@ -45,6 +45,8 @@ function ObjectAPI(typeRegistry, openmct) {
     this.rootProvider = new RootObjectProvider(this.rootRegistry);
     this.cache = {};
     this.interceptorRegistry = new InterceptorRegistry();
+
+    this.SYNCHRONIZED_OBJECT_TYPES = ['notebook', 'plan'];
 }
 
 /**
@@ -397,20 +399,25 @@ ObjectAPI.prototype._toMutable = function (object) {
         mutableObject = object;
     } else {
         mutableObject = MutableDomainObject.createMutable(object, this.eventEmitter);
-    }
 
-    // Check if provider supports realtime updates
-    let identifier = utils.parseKeyString(mutableObject.identifier);
-    let provider = this.getProvider(identifier);
+        // Check if provider supports realtime updates
+        let identifier = utils.parseKeyString(mutableObject.identifier);
+        let provider = this.getProvider(identifier);
 
-    if (provider !== undefined
-        && provider.observe !== undefined) {
-        let unobserve = provider.observe(identifier, (updatedModel) => {
-            mutableObject.$refresh(updatedModel);
-        });
-        mutableObject.$on('$destroy', () => {
-            unobserve();
-        });
+        if (provider !== undefined
+            && provider.observe !== undefined
+            && this.SYNCHRONIZED_OBJECT_TYPES.includes(object.type)) {
+            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.$on('$_destroy', () => {
+                unobserve();
+            });
+        }
     }
 
     return mutableObject;

src/api/objects/ObjectAPISpec.js

@@ -163,14 +163,22 @@ 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 = Object.assign({
+                otherAttribute: 'changed-attribute-value'
+            }, testObject);
+            updatedTestObject.modified = 1;
+            updatedTestObject.persisted = 1;
+
             mockProvider = jasmine.createSpyObj("mock provider", [
                 "get",
                 "create",
@@ -182,6 +190,8 @@ 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) {
@@ -189,6 +199,8 @@ describe("The Object API", () => {
                 } else {
                     callbacks[0] = callback;
                 }
+
+                return () => {};
             });
 
             objectAPI.addProvider(TEST_NAMESPACE, mockProvider);

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

@@ -21,8 +21,7 @@
 
     &__outer {
         @include abs();
-        background: $overlayColorBg;
-        color: $overlayColorFg;
+        background: $colorBodyBg;
         display: flex;
         flex-direction: column;
         padding: $overlayInnerMargin;
@@ -30,7 +29,6 @@
 
     &__close-button {
         $p: $interiorMargin + 2px;
-        color: $overlayColorFg;
         font-size: 1.5em;
         position: absolute;
         top: $p; right: $p;
@@ -82,11 +80,6 @@
         }
     }
 
-    .c-button,
-    .c-click-icon {
-        filter: $overlayBrightnessAdjust;
-    }
-
     .c-object-label__name {
         filter: $objectLabelNameFilter;
     }
@@ -103,6 +96,7 @@ body.desktop {
     }
 
     // Overlay types, styling for desktop. Appended to .l-overlay-wrapper element.
+    .l-overlay-large,
     .l-overlay-small,
     .l-overlay-fit {
         .c-overlay__outer {
@@ -124,12 +118,8 @@ body.desktop {
         $tbPad: floor($pad * 0.8);
         $lrPad: $pad;
         .c-overlay {
-            &__blocker {
-                display: none;
-            }
-
             &__outer {
-                @include overlaySizing($overlayOuterMarginFullscreen);
+                @include overlaySizing($overlayOuterMarginLarge);
                 padding: $tbPad $lrPad;
             }
 

src/api/status/StatusAPISpec.js

@@ -22,7 +22,7 @@ describe("The Status API", () => {
     });
 
     afterEach(() => {
-        resetApplicationState(openmct);
+        return resetApplicationState(openmct);
     });
 
     describe("set function", () => {

src/api/telemetry/TelemetryAPI.js

@@ -504,6 +504,26 @@ define([
         return this.getLimitEvaluator(domainObject);
     };
 
+    /**
+     * Get a limits for this domain object.
+     * Limits help you display limits and alarms of
+     * telemetry for display purposes without having to interact directly
+     * with the Limit API.
+     *
+     * This method is optional.
+     * If a provider does not implement this method, it is presumed
+     * that no limits are defined for this domain object's telemetry.
+     *
+     * @param {module:openmct.DomainObject} domainObject the domain
+     *        object for which to get limits
+     * @returns {module:openmct.TelemetryAPI~LimitEvaluator}
+     * @method limits
+     * @memberof module:openmct.TelemetryAPI~TelemetryProvider#
+     */
+    TelemetryAPI.prototype.limitDefinition = function (domainObject) {
+        return this.getLimits(domainObject);
+    };
+
     /**
      * Get a limit evaluator for this domain object.
      * Limit Evaluators help you evaluate limit and alarm status of individual
@@ -531,5 +551,45 @@ define([
         return provider.getLimitEvaluator(domainObject);
     };
 
+    /**
+     * Get a limit definitions for this domain object.
+     * Limit Definitions help you indicate limits and alarms of
+     * telemetry for display purposes without having to interact directly
+     * with the Limit API.
+     *
+     * This method is optional.
+     * If a provider does not implement this method, it is presumed
+     * that no limits are defined for this domain object's telemetry.
+     *
+     * @param {module:openmct.DomainObject} domainObject the domain
+     *        object for which to display limits
+     * @returns {module:openmct.TelemetryAPI~LimitEvaluator}
+     * @method limits returns a limits object of
+     * type {
+     *          level1: {
+     *              low: { key1: value1, key2: value2, color: <supportedColor> },
+     *              high: { key1: value1, key2: value2, color: <supportedColor> }
+     *          },
+     *          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);
+                }
+            };
+        }
+
+        return provider.getLimits(domainObject);
+    };
+
     return TelemetryAPI;
 });

src/plugins/CouchDBSearchFolder/pluginSpec.js

@@ -73,7 +73,7 @@ describe('the plugin', function () {
     });
 
     it('provides a folder to hold plans', () => {
-        openmct.objects.get(identifier).then((object) => {
+        return openmct.objects.get(identifier).then((object) => {
             expect(object).toEqual({
                 identifier,
                 type: 'folder',
@@ -83,7 +83,7 @@ describe('the plugin', function () {
     });
 
     it('provides composition for couch search folders', () => {
-        composition.load().then((objects) => {
+        return composition.load().then((objects) => {
             expect(objects.length).toEqual(2);
         });
     });

src/plugins/LADTable/LADTableSetViewProvider.js

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

src/plugins/LADTable/plugin.js

@@ -30,7 +30,7 @@ export default function plugin() {
         openmct.objectViews.addProvider(new LADTableSetViewProvider(openmct));
 
         openmct.types.addType('LadTable', {
-            name: "LAD Table",
+            name: "Latest Data Table",
             creatable: true,
             description: "A Latest Available Data tabular view in which each row displays the values for one or more contained telemetry objects.",
             cssClass: 'icon-tabular-lad',

src/plugins/LADTable/pluginSpec.js

@@ -67,10 +67,6 @@ describe("The LAD Table", () => {
 
     // this setups up the app
     beforeEach((done) => {
-        const appHolder = document.createElement('div');
-        appHolder.style.width = '640px';
-        appHolder.style.height = '480px';
-
         openmct = createOpenMct();
 
         parent = document.createElement('div');
@@ -90,7 +86,7 @@ describe("The LAD Table", () => {
         });
 
         openmct.on('start', done);
-        openmct.startHeadless(appHolder);
+        openmct.startHeadless();
     });
 
     afterEach(() => {
@@ -113,7 +109,8 @@ describe("The LAD Table", () => {
 
         beforeEach(() => {
             ladTableCompositionCollection = openmct.composition.get(mockObj.ladTable);
-            ladTableCompositionCollection.load();
+
+            return ladTableCompositionCollection.load();
         });
 
         it("should accept telemetry producing objects", () => {
@@ -192,8 +189,6 @@ describe("The LAD Table", () => {
 
             await Promise.all([telemetryRequestPromise, telemetryObjectPromise, anotherTelemetryObjectPromise]);
             await Vue.nextTick();
-
-            return;
         });
 
         it("should show one row per object in the composition", () => {
@@ -242,13 +237,6 @@ describe("The LAD Table Set", () => {
     let ladPlugin;
     let parent;
     let child;
-    let telemetryCount = 3;
-    let timeFormat = 'utc';
-
-    let mockTelemetry = getMockTelemetry({
-        count: telemetryCount,
-        format: timeFormat
-    });
 
     let mockObj = getMockObjects({
         objectKeyStrings: ['ladTable', 'ladTableSet', 'telemetry']
@@ -264,38 +252,36 @@ describe("The LAD Table Set", () => {
     mockObj.ladTableSet.composition.push(mockObj.ladTable.identifier);
 
     beforeEach((done) => {
-        const appHolder = document.createElement('div');
-
-        appHolder.style.width = '640px';
-        appHolder.style.height = '480px';
-
         openmct = createOpenMct();
 
         parent = document.createElement('div');
         child = document.createElement('div');
         parent.appendChild(child);
 
-        spyOn(openmct.telemetry, 'request').and.returnValue(Promise.resolve([]));
-
         ladPlugin = new LadPlugin();
         openmct.install(ladPlugin);
 
-        spyOn(openmct.objects, 'get').and.returnValue(Promise.resolve({}));
-
         openmct.time.bounds({
             start: bounds.start,
             end: bounds.end
         });
 
         openmct.on('start', done);
-        openmct.start(appHolder);
+        openmct.startHeadless();
     });
 
     afterEach(() => {
+        openmct.time.timeSystem('utc', {
+            start: 0,
+            end: 1
+        });
+
         return resetApplicationState(openmct);
     });
 
     it("should provide a lad table set view only for lad table set objects", () => {
+        spyOn(openmct.objects, 'get').and.returnValue(Promise.resolve({}));
+
         let applicableViews = openmct.objectViews.get(mockObj.ladTableSet, []);
 
         let ladTableSetView = applicableViews.find(
@@ -310,8 +296,11 @@ describe("The LAD Table Set", () => {
         let ladTableSetCompositionCollection;
 
         beforeEach(() => {
+            spyOn(openmct.objects, 'get').and.returnValue(Promise.resolve({}));
+
             ladTableSetCompositionCollection = openmct.composition.get(mockObj.ladTableSet);
-            ladTableSetCompositionCollection.load();
+
+            return ladTableSetCompositionCollection.load();
         });
 
         it("should accept lad table objects", () => {
@@ -349,41 +338,17 @@ describe("The LAD Table Set", () => {
         otherObj.ladTable.composition.push(mockObj.telemetry.identifier);
         mockObj.ladTableSet.composition.push(otherObj.ladTable.identifier);
 
-        beforeEach(async () => {
-            let telemetryRequestResolve;
-            let ladObjectResolve;
-            let anotherLadObjectResolve;
+        beforeEach(() => {
+            spyOn(openmct.telemetry, 'request').and.returnValue(Promise.resolve([]));
 
-            let telemetryRequestPromise = new Promise((resolve) => {
-                telemetryRequestResolve = resolve;
-            });
-
-            let ladObjectPromise = new Promise((resolve) => {
-                ladObjectResolve = resolve;
-            });
-
-            let anotherLadObjectPromise = new Promise((resolve) => {
-                anotherLadObjectResolve = resolve;
-            });
-
-            openmct.telemetry.request.and.callFake(() => {
-                telemetryRequestResolve(mockTelemetry);
-
-                return telemetryRequestPromise;
-            });
-
-            openmct.objects.get.and.callFake((obj) => {
+            spyOn(openmct.objects, 'get').and.callFake((obj) => {
                 if (obj.key === 'lad-object') {
-                    ladObjectResolve(mockObj.ladObject);
-
-                    return ladObjectPromise;
+                    return Promise.resolve(mockObj.ladTable);
                 } else if (obj.key === 'another-lad-object') {
-                    anotherLadObjectResolve(otherObj.ladObject);
-
-                    return anotherLadObjectPromise;
+                    return Promise.resolve(otherObj.ladTable);
+                } else if (obj.key === 'telemetry-object') {
+                    return Promise.resolve(mockObj.telemetry);
                 }
-
-                return Promise.resolve({});
             });
 
             openmct.time.bounds({
@@ -394,20 +359,19 @@ describe("The LAD Table Set", () => {
             applicableViews = openmct.objectViews.get(mockObj.ladTableSet, []);
             ladTableSetViewProvider = applicableViews.find((viewProvider) => viewProvider.key === ladTableSetKey);
             ladTableSetView = ladTableSetViewProvider.view(mockObj.ladTableSet, [mockObj.ladTableSet]);
-            ladTableSetView.show(child, true);
+            ladTableSetView.show(child);
 
-            await Promise.all([telemetryRequestPromise, ladObjectPromise, anotherLadObjectPromise]);
-            await Vue.nextTick();
-
-            return;
+            return Vue.nextTick();
         });
 
         it("should show one row per lad table object in the composition", () => {
-            const rowCount = parent.querySelectorAll(LAD_SET_TABLE_HEADERS).length;
+            const ladTableSetCompositionCollection = openmct.composition.get(mockObj.ladTableSet);
 
-            expect(rowCount).toBe(mockObj.ladTableSet.composition.length);
-            pending();
+            return ladTableSetCompositionCollection.load().then(() => {
+                const rowCount = parent.querySelectorAll(LAD_SET_TABLE_HEADERS).length;
+
+                expect(rowCount).toBe(mockObj.ladTableSet.composition.length);
+            });
         });
     });
 });
-

src/plugins/URLIndicatorPlugin/URLIndicatorSpec.js

@@ -22,12 +22,14 @@
 
 define(
     [
+        "utils/testing",
         "./URLIndicator",
         "./URLIndicatorPlugin",
         "../../MCT",
         "zepto"
     ],
     function (
+        testingUtils,
         URLIndicator,
         URLIndicatorPlugin,
         MCT,
@@ -44,7 +46,7 @@ define(
 
             beforeEach(function () {
                 jasmine.clock().install();
-                openmct = new MCT();
+                openmct = new testingUtils.createOpenMct();
                 spyOn(openmct.indicators, 'add');
                 spyOn($, 'ajax');
                 $.ajax.and.callFake(function (options) {
@@ -55,6 +57,8 @@ define(
             afterEach(function () {
                 $.ajax = defaultAjaxFunction;
                 jasmine.clock().uninstall();
+
+                return testingUtils.resetApplicationState(openmct);
             });
 
             describe("on initialization", function () {

src/plugins/URLTimeSettingsSynchronizer/URLTimeSettingsSynchronizer.js

@@ -19,10 +19,6 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-import {
-    getAllSearchParams,
-    setAllSearchParams
-} from 'utils/openmctLocation';
 
 const TIME_EVENTS = ['timeSystem', 'clock', 'clockOffsets'];
 const SEARCH_MODE = 'tc.mode';
@@ -49,9 +45,8 @@ export default class URLTimeSettingsSynchronizer {
     }
 
     initialize() {
-        this.updateTimeSettings();
+        this.openmct.router.on('change:params', this.updateTimeSettings);
 
-        window.addEventListener('hashchange', this.updateTimeSettings);
         TIME_EVENTS.forEach(event => {
             this.openmct.time.on(event, this.setUrlFromTimeApi);
         });
@@ -59,7 +54,8 @@ export default class URLTimeSettingsSynchronizer {
     }
 
     destroy() {
-        window.removeEventListener('hashchange', this.updateTimeSettings);
+        this.openmct.router.off('change:params', this.updateTimeSettings);
+
         this.openmct.off('start', this.initialize);
         this.openmct.off('destroy', this.destroy);
 
@@ -70,22 +66,18 @@ export default class URLTimeSettingsSynchronizer {
     }
 
     updateTimeSettings() {
-        // Prevent from triggering self
-        if (!this.isUrlUpdateInProgress) {
-            let timeParameters = this.parseParametersFromUrl();
+        let timeParameters = this.parseParametersFromUrl();
 
-            if (this.areTimeParametersValid(timeParameters)) {
-                this.setTimeApiFromUrl(timeParameters);
-            } else {
-                this.setUrlFromTimeApi();
-            }
+        if (this.areTimeParametersValid(timeParameters)) {
+            this.setTimeApiFromUrl(timeParameters);
+            this.openmct.router.setLocationFromUrl();
         } else {
-            this.isUrlUpdateInProgress = false;
+            this.setUrlFromTimeApi();
         }
     }
 
     parseParametersFromUrl() {
-        let searchParams = getAllSearchParams();
+        let searchParams = this.openmct.router.getAllSearchParams();
 
         let mode = searchParams.get(SEARCH_MODE);
         let timeSystem = searchParams.get(SEARCH_TIME_SYSTEM);
@@ -148,7 +140,7 @@ export default class URLTimeSettingsSynchronizer {
     }
 
     setUrlFromTimeApi() {
-        let searchParams = getAllSearchParams();
+        let searchParams = this.openmct.router.getAllSearchParams();
         let clock = this.openmct.time.clock();
         let bounds = this.openmct.time.bounds();
         let clockOffsets = this.openmct.time.clockOffsets();
@@ -176,8 +168,7 @@ export default class URLTimeSettingsSynchronizer {
         }
 
         searchParams.set(SEARCH_TIME_SYSTEM, this.openmct.time.timeSystem().key);
-        this.isUrlUpdateInProgress = true;
-        setAllSearchParams(searchParams);
+        this.openmct.router.setAllSearchParams(searchParams);
     }
 
     areTimeParametersValid(timeParameters) {

src/plugins/URLTimeSettingsSynchronizer/pluginSpec.js

@@ -25,306 +25,118 @@ import {
 } from 'utils/testing';
 
 describe("The URLTimeSettingsSynchronizer", () => {
+    let appHolder;
     let openmct;
-    let testClock;
+    let resolveFunction;
+    let oldHash;
 
     beforeEach((done) => {
         openmct = createOpenMct();
+        openmct.install(openmct.plugins.MyItems());
         openmct.install(openmct.plugins.LocalTimeSystem());
-        testClock = jasmine.createSpyObj("testClock", ["start", "stop", "tick", "currentValue", "on", "off"]);
-        testClock.key = "test-clock";
-        testClock.currentValue.and.returnValue(0);
-
-        openmct.time.addClock(testClock);
+        openmct.install(openmct.plugins.UTCTimeSystem());
 
         openmct.on('start', done);
-        openmct.startHeadless();
+
+        appHolder = document.createElement("div");
+        openmct.start(appHolder);
     });
 
-    afterEach(() => resetApplicationState(openmct));
+    afterEach(() => {
+        openmct.time.stopClock();
+        openmct.router.removeListener('change:hash', resolveFunction);
 
-    describe("realtime mode", () => {
-        it("when the clock is set via the time API, it is immediately reflected in the URL", () => {
-            //Test expected initial conditions
+        appHolder = undefined;
+        openmct = undefined;
+        resolveFunction = undefined;
+
+        return resetApplicationState(openmct);
+    });
+
+    it("initial clock is set to fixed is reflected in URL", (done) => {
+        resolveFunction = () => {
+            oldHash = window.location.hash;
             expect(window.location.hash.includes('tc.mode=fixed')).toBe(true);
 
+            openmct.router.removeListener('change:hash', resolveFunction);
+            done();
+        };
+
+        openmct.router.on('change:hash', resolveFunction);
+    });
+
+    it("when the clock is set via the time API, it is reflected in the URL", (done) => {
+        let success;
+
+        resolveFunction = () => {
             openmct.time.clock('local', {
-                start: -1000,
-                end: 100
-            });
-
-            expect(window.location.hash.includes('tc.mode=local')).toBe(true);
-
-            //Test that expected initial conditions are no longer true
-            expect(window.location.hash.includes('tc.mode=fixed')).toBe(false);
-        });
-        it("when offsets are set via the time API, they are immediately reflected in the URL", () => {
-            //Test expected initial conditions
-            expect(window.location.hash.includes('tc.startDelta')).toBe(false);
-            expect(window.location.hash.includes('tc.endDelta')).toBe(false);
-
-            openmct.time.clock('local', {
-                start: -1000,
-                end: 100
-            });
-            expect(window.location.hash.includes('tc.startDelta=1000')).toBe(true);
-            expect(window.location.hash.includes('tc.endDelta=100')).toBe(true);
-
-            openmct.time.clockOffsets({
                 start: -2000,
                 end: 200
             });
-            expect(window.location.hash.includes('tc.startDelta=2000')).toBe(true);
-            expect(window.location.hash.includes('tc.endDelta=200')).toBe(true);
 
-            //Test that expected initial conditions are no longer true
-            expect(window.location.hash.includes('tc.mode=fixed')).toBe(false);
-        });
-        describe("when set in the url", () => {
-            it("will change from fixed to realtime mode when the mode changes", () => {
-                expectLocationToBeInFixedMode();
+            const hasStartDelta = window.location.hash.includes('tc.startDelta=2000');
+            const hasEndDelta = window.location.hash.includes('tc.endDelta=200');
+            const hasLocalClock = window.location.hash.includes('tc.mode=local');
+            success = hasStartDelta && hasEndDelta && hasLocalClock;
+            if (success) {
+                expect(success).toBe(true);
 
-                return switchToRealtimeMode().then(() => {
-                    let clock = openmct.time.clock();
+                openmct.router.removeListener('change:hash', resolveFunction);
+                done();
+            }
+        };
 
-                    expect(clock).toBeDefined();
-                    expect(clock.key).toBe('local');
-                });
-            });
-            it("the clock is correctly set in the API from the URL parameters", () => {
-                return switchToRealtimeMode().then(() => {
-                    let resolveFunction;
-
-                    return new Promise((resolve) => {
-                        resolveFunction = resolve;
-
-                        //The 'hashchange' event appears to be asynchronous, so we need to wait until a clock change has been
-                        //detected in the API.
-                        openmct.time.on('clock', resolveFunction);
-                        let hash = window.location.hash;
-                        hash = hash.replace('tc.mode=local', 'tc.mode=test-clock');
-                        window.location.hash = hash;
-                    }).then(() => {
-                        let clock = openmct.time.clock();
-                        expect(clock).toBeDefined();
-                        expect(clock.key).toBe('test-clock');
-                        openmct.time.off('clock', resolveFunction);
-                    });
-                });
-            });
-            it("the clock offsets are correctly set in the API from the URL parameters", () => {
-                return switchToRealtimeMode().then(() => {
-                    let resolveFunction;
-
-                    return new Promise((resolve) => {
-                        resolveFunction = resolve;
-                        //The 'hashchange' event appears to be asynchronous, so we need to wait until a clock change has been
-                        //detected in the API.
-                        openmct.time.on('clockOffsets', resolveFunction);
-                        let hash = window.location.hash;
-                        hash = hash.replace('tc.startDelta=1000', 'tc.startDelta=2000');
-                        hash = hash.replace('tc.endDelta=100', 'tc.endDelta=200');
-                        window.location.hash = hash;
-                    }).then(() => {
-                        let clockOffsets = openmct.time.clockOffsets();
-                        expect(clockOffsets).toBeDefined();
-                        expect(clockOffsets.start).toBe(-2000);
-                        expect(clockOffsets.end).toBe(200);
-                        openmct.time.off('clockOffsets', resolveFunction);
-                    });
-                });
-            });
-            it("the time system is correctly set in the API from the URL parameters", () => {
-                return switchToRealtimeMode().then(() => {
-                    let resolveFunction;
-
-                    return new Promise((resolve) => {
-                        resolveFunction = resolve;
-
-                        //The 'hashchange' event appears to be asynchronous, so we need to wait until a clock change has been
-                        //detected in the API.
-                        openmct.time.on('timeSystem', resolveFunction);
-                        let hash = window.location.hash;
-                        hash = hash.replace('tc.timeSystem=utc', 'tc.timeSystem=local');
-                        window.location.hash = hash;
-                    }).then(() => {
-                        let timeSystem = openmct.time.timeSystem();
-                        expect(timeSystem).toBeDefined();
-                        expect(timeSystem.key).toBe('local');
-                        openmct.time.off('timeSystem', resolveFunction);
-                    });
-                });
-            });
-        });
-    });
-    describe("fixed timespan mode", () => {
-        beforeEach(() => {
-            openmct.time.stopClock();
-            openmct.time.timeSystem('utc', {
-                start: 0,
-                end: 1
-            });
-        });
-
-        it("when bounds are set via the time API, they are immediately reflected in the URL", () => {
-            //Test expected initial conditions
-            expect(window.location.hash.includes('tc.startBound=0')).toBe(true);
-            expect(window.location.hash.includes('tc.endBound=1')).toBe(true);
-
-            openmct.time.bounds({
-                start: 10,
-                end: 20
-            });
-
-            expect(window.location.hash.includes('tc.startBound=10')).toBe(true);
-            expect(window.location.hash.includes('tc.endBound=20')).toBe(true);
-
-            //Test that expected initial conditions are no longer true
-            expect(window.location.hash.includes('tc.startBound=0')).toBe(false);
-            expect(window.location.hash.includes('tc.endBound=1')).toBe(false);
-        });
-
-        it("when time system is set via the time API, it is immediately reflected in the URL", () => {
-            //Test expected initial conditions
-            expect(window.location.hash.includes('tc.timeSystem=utc')).toBe(true);
-
-            openmct.time.timeSystem('local', {
-                start: 20,
-                end: 30
-            });
-
-            expect(window.location.hash.includes('tc.timeSystem=local')).toBe(true);
-
-            //Test that expected initial conditions are no longer true
-            expect(window.location.hash.includes('tc.timeSystem=utc')).toBe(false);
-        });
-        describe("when set in the url", () => {
-            it("time system changes are reflected in the API", () => {
-                let resolveFunction;
-
-                return new Promise((resolve) => {
-                    let timeSystem = openmct.time.timeSystem();
-                    resolveFunction = resolve;
-
-                    expect(timeSystem.key).toBe('utc');
-                    window.location.hash = window.location.hash.replace('tc.timeSystem=utc', 'tc.timeSystem=local');
-
-                    openmct.time.on('timeSystem', resolveFunction);
-                }).then(() => {
-                    let timeSystem = openmct.time.timeSystem();
-                    expect(timeSystem.key).toBe('local');
-
-                    openmct.time.off('timeSystem', resolveFunction);
-                });
-            });
-            it("mode can be changed from realtime to fixed", () => {
-                return switchToRealtimeMode().then(() => {
-                    expectLocationToBeInRealtimeMode();
-
-                    expect(openmct.time.clock()).toBeDefined();
-                }).then(switchToFixedMode).then(() => {
-                    let clock = openmct.time.clock();
-                    expect(clock).not.toBeDefined();
-                });
-            });
-            it("bounds are correctly set in the API from the URL parameters", () => {
-                let resolveFunction;
-
-                expectLocationToBeInFixedMode();
-
-                return new Promise((resolve) => {
-                    resolveFunction = resolve;
-                    openmct.time.on('bounds', resolveFunction);
-                    let hash = window.location.hash;
-                    hash = hash.replace('tc.startBound=0', 'tc.startBound=222')
-                        .replace('tc.endBound=1', 'tc.endBound=333');
-                    window.location.hash = hash;
-                }).then(() => {
-                    let bounds = openmct.time.bounds();
-
-                    expect(bounds).toBeDefined();
-                    expect(bounds.start).toBe(222);
-                    expect(bounds.end).toBe(333);
-                });
-            });
-            it("bounds are correctly set in the API from the URL parameters where only the end bound changes", () => {
-                let resolveFunction;
-
-                expectLocationToBeInFixedMode();
-
-                return new Promise((resolve) => {
-                    resolveFunction = resolve;
-                    openmct.time.on('bounds', resolveFunction);
-                    let hash = window.location.hash;
-                    hash = hash.replace('tc.endBound=1', 'tc.endBound=333');
-                    window.location.hash = hash;
-                }).then(() => {
-                    let bounds = openmct.time.bounds();
-
-                    expect(bounds).toBeDefined();
-                    expect(bounds.start).toBe(0);
-                    expect(bounds.end).toBe(333);
-                });
-            });
-        });
+        openmct.router.on('change:hash', resolveFunction);
     });
 
-    function setRealtimeLocationParameters() {
-        let hash = window.location.hash.toString()
-            .replace('tc.mode=fixed', 'tc.mode=local')
-            .replace('tc.startBound=0', 'tc.startDelta=1000')
-            .replace('tc.endBound=1', 'tc.endDelta=100');
+    it("when the clock mode is set to local, it is reflected in the URL", (done) => {
+        let success;
 
-        window.location.hash = hash;
-    }
+        resolveFunction = () => {
+            let hash = window.location.hash;
+            hash = hash.replace('tc.mode=fixed', 'tc.mode=local');
+            window.location.hash = hash;
 
-    function setFixedLocationParameters() {
-        let hash = window.location.hash.toString()
-            .replace('tc.mode=local', 'tc.mode=fixed')
-            .replace('tc.timeSystem=utc', 'tc.timeSystem=local')
-            .replace('tc.startDelta=1000', 'tc.startBound=50')
-            .replace('tc.endDelta=100', 'tc.endBound=60');
+            success = window.location.hash.includes('tc.mode=local');
+            if (success) {
+                expect(success).toBe(true);
+                done();
+            }
+        };
 
-        window.location.hash = hash;
-    }
+        openmct.router.on('change:hash', resolveFunction);
+    });
 
-    function switchToRealtimeMode() {
-        let resolveFunction;
+    it("when the clock mode is set to local, it is reflected in the URL", (done) => {
+        let success;
 
-        return new Promise((resolve) => {
-            resolveFunction = resolve;
-            openmct.time.on('clock', resolveFunction);
-            setRealtimeLocationParameters();
-        }).then(() => {
-            openmct.time.off('clock', resolveFunction);
-        });
-    }
+        resolveFunction = () => {
+            let hash = window.location.hash;
 
-    function switchToFixedMode() {
-        let resolveFunction;
+            hash = hash.replace('tc.mode=fixed', 'tc.mode=local');
+            window.location.hash = hash;
+            success = window.location.hash.includes('tc.mode=local');
+            if (success) {
+                expect(success).toBe(true);
+                done();
+            }
+        };
 
-        return new Promise((resolve) => {
-            resolveFunction = resolve;
-            //The 'hashchange' event appears to be asynchronous, so we need to wait until a clock change has been
-            //detected in the API.
-            openmct.time.on('clock', resolveFunction);
-            setFixedLocationParameters();
-        }).then(() => {
-            openmct.time.off('clock', resolveFunction);
-        });
-    }
+        openmct.router.on('change:hash', resolveFunction);
+    });
 
-    function expectLocationToBeInRealtimeMode() {
-        expect(window.location.hash.includes('tc.mode=local')).toBe(true);
-        expect(window.location.hash.includes('tc.startDelta=1000')).toBe(true);
-        expect(window.location.hash.includes('tc.endDelta=100')).toBe(true);
-        expect(window.location.hash.includes('tc.mode=fixed')).toBe(false);
-    }
+    it("reset hash", (done) => {
+        let success;
 
-    function expectLocationToBeInFixedMode() {
-        expect(window.location.hash.includes('tc.mode=fixed')).toBe(true);
-        expect(window.location.hash.includes('tc.startBound=0')).toBe(true);
-        expect(window.location.hash.includes('tc.endBound=1')).toBe(true);
-        expect(window.location.hash.includes('tc.mode=local')).toBe(false);
-    }
+        window.location.hash = oldHash;
+        resolveFunction = () => {
+            success = window.location.hash === oldHash;
+            if (success) {
+                expect(success).toBe(true);
+                done();
+            }
+        };
+
+        openmct.router.on('change:hash', resolveFunction);
+    });
 });

src/plugins/autoflow/AutoflowTabularPluginSpec.js

@@ -28,8 +28,10 @@ import {
     resetApplicationState,
     spyOnBuiltins
 } from 'utils/testing';
+import Vue from 'vue';
 
-describe("AutoflowTabularPlugin", () => {
+// TODO lots of its without expects
+xdescribe("AutoflowTabularPlugin", () => {
     let testType;
     let testObject;
     let mockmct;
@@ -51,7 +53,7 @@ describe("AutoflowTabularPlugin", () => {
     });
 
     afterEach(() => {
-        resetApplicationState(mockmct);
+        return resetApplicationState(mockmct);
     });
 
     it("installs a view provider", () => {
@@ -101,7 +103,7 @@ describe("AutoflowTabularPlugin", () => {
                 });
             }
 
-            beforeEach((done) => {
+            beforeEach(() => {
                 callbacks = {};
 
                 spyOnBuiltins(['requestAnimationFrame']);
@@ -180,7 +182,7 @@ describe("AutoflowTabularPlugin", () => {
                 view = provider.view(testObject);
                 view.show(testContainer);
 
-                return done();
+                return Vue.nextTick();
             });
 
             afterEach(() => {

src/plugins/codeWalkthrough/plugin.js

@@ -0,0 +1,63 @@
+export default function install(openmct) {
+    openmct.objectViews.addProvider({
+        name: "Data Table",
+        key: "data-table",
+        cssClass: "icon-packet",
+        description: "Tabular view of telemetry",
+        canView(domainObject) {
+            return true;
+        },
+        view(domainObject) {
+            return {
+                async show(element) {
+                    let telemetryMetadata = openmct.telemetry.getMetadata(domainObject).values();
+                    let table = document.createElement('table');
+                    let tableHead = document.createElement('thead');
+                    let tableBody = document.createElement('tbody');
+                    let tableHeadRow = document.createElement('tr');
+
+                    tableHead.appendChild(tableHeadRow);
+                    table.appendChild(tableHead);
+                    table.appendChild(tableBody);
+                    element.appendChild(table);
+
+                    telemetryMetadata.forEach(metadatum => {
+                        let tableHeadCell = document.createElement('td');
+                        tableHeadRow.appendChild(tableHeadCell);
+
+                        tableHeadCell.innerText = metadatum.name;
+                    });
+
+                    async function requestTelemetry() {
+                        let telemetry = await openmct.telemetry.request(domainObject);
+                        telemetry.forEach((datum) => {
+                            let dataRow = document.createElement('tr');
+                            telemetryMetadata.forEach(metadatum => {
+                                let dataCell = document.createElement('td');
+                                let formatter = openmct.telemetry.getValueFormatter(metadatum);
+
+                                let telemetryValue = formatter.format(datum[metadatum.key]);
+                                dataCell.innerText = telemetryValue;
+                                dataRow.appendChild(dataCell);
+                            });
+                            tableBody.appendChild(dataRow);
+                        });
+                    }
+
+                    openmct.time.on('bounds', () => {
+                        tableBody.innerHTML = '';
+                        requestTelemetry();
+                    });
+
+                    requestTelemetry();
+
+                    // openmct.telemetry.subscribe(domainObject, (datum) => {
+                    //     element.innerText = JSON.stringify(datum);
+                    // });
+                },
+                destroy() {
+                }
+            };
+        }
+    });
+}

src/plugins/condition/StyleRuleManager.js

@@ -27,15 +27,17 @@ 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.bind(this));
+            this.openmct.editor.on('isEditing', this.toggleSubscription);
             this.isEditing = this.openmct.editor.editing;
         }
 
         if (styleConfiguration) {
             this.initialize(styleConfiguration);
             if (styleConfiguration.conditionSetIdentifier) {
-                this.openmct.time.on("bounds", this.refreshData.bind(this));
+                this.openmct.time.on("bounds", this.refreshData);
                 this.subscribeToConditionSet();
             } else {
                 this.applyStaticStyle();

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

@@ -52,7 +52,6 @@
         <div class="c-inspect-styles__content c-inspect-styles__condition-set">
             <a v-if="conditionSetDomainObject"
                class="c-object-label icon-conditional"
-               :href="navigateToPath"
                @click="navigateOrPreview"
             >
                 <span class="c-object-label__name">{{ conditionSetDomainObject.name }}</span>
@@ -286,6 +285,8 @@ export default {
             if (this.openmct.editor.isEditing()) {
                 event.preventDefault();
                 this.previewAction.invoke(this.objectPath);
+            } else {
+                this.openmct.router.navigate(this.navigateToPath);
             }
         },
         removeConditionSet() {

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

@@ -66,7 +66,6 @@
         <div class="c-inspect-styles__content c-inspect-styles__condition-set">
             <a v-if="conditionSetDomainObject"
                class="c-object-label"
-               :href="navigateToPath"
                @click="navigateOrPreview"
             >
                 <span class="c-object-label__type-icon icon-conditional"></span>
@@ -309,6 +308,8 @@ export default {
             if (this.openmct.editor.isEditing()) {
                 event.preventDefault();
                 this.previewAction.invoke(this.objectPath);
+            } else {
+                this.openmct.router.navigate(this.navigateToPath);
             }
         },
         isItemType(type, item) {

src/plugins/defaultRootName/pluginSpec.js

@@ -46,7 +46,7 @@ xdescribe("the plugin", () => {
     });
 
     afterEach(() => {
-        resetApplicationState(openmct);
+        return resetApplicationState(openmct);
     });
 
     it('installs the new folder action', () => {

src/plugins/displayLayout/DisplayLayoutToolbar.js

@@ -235,7 +235,7 @@ define(['lodash'], function (_) {
                                 message: `Warning! This action will remove this item from the Display Layout. Do you want to continue?`,
                                 buttons: [
                                     {
-                                        label: 'Ok',
+                                        label: 'OK',
                                         emphasis: 'true',
                                         callback: function () {
                                             removeItem(getAllTypes(selection));

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

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

src/plugins/duplicate/DuplicateAction.js

@@ -37,7 +37,15 @@ export default class DuplicateAction {
         let duplicationTask = new DuplicateTask(this.openmct);
         let originalObject = objectPath[0];
         let parent = objectPath[1];
-        let userInput = await this.getUserInput(originalObject, parent);
+        let userInput;
+
+        try {
+            userInput = await this.getUserInput(originalObject, parent);
+        } catch (error) {
+            // user most likely canceled
+            return;
+        }
+
         let newParent = userInput.location;
         let inNavigationPath = this.inNavigationPath(originalObject);
 
@@ -71,7 +79,8 @@ export default class DuplicateAction {
 
     updateNameCheck(object, name) {
         if (object.name !== name) {
-            this.openmct.objects.mutate(object, 'name', name);
+            object.name = name;
+            this.openmct.objects.save(object);
         }
     }
 
@@ -95,7 +104,7 @@ export default class DuplicateAction {
                             cssClass: "l-input-lg"
                         },
                         {
-                            name: "location",
+                            name: "Location",
                             cssClass: "grows",
                             control: "locator",
                             validate: this.validate(object, parent),

src/plugins/duplicate/pluginSpec.js

@@ -112,7 +112,7 @@ describe("The Duplicate Action plugin", () => {
     });
 
     afterEach(() => {
-        resetApplicationState(openmct);
+        return resetApplicationState(openmct);
     });
 
     it("should be defined", () => {
@@ -121,10 +121,9 @@ describe("The Duplicate Action plugin", () => {
 
     describe("when moving an object to a new parent", () => {
 
-        beforeEach(async (done) => {
+        beforeEach(async () => {
             duplicateTask = new DuplicateTask(openmct);
             await duplicateTask.duplicate(parentObject, anotherParentObject);
-            done();
         });
 
         it("the duplicate child object's name (when not changing) should be the same as the original object", async () => {
@@ -143,15 +142,15 @@ describe("The Duplicate Action plugin", () => {
     });
 
     describe("when a new name is provided for the duplicated object", () => {
-        const NEW_NAME = 'New Name';
+        it("the name is updated", () => {
+            const NEW_NAME = 'New Name';
+            let childName;
 
-        beforeEach(() => {
             duplicateTask = new DuplicateAction(openmct);
             duplicateTask.updateNameCheck(parentObject, NEW_NAME);
-        });
 
-        it("the name is updated", () => {
-            let childName = parentObject.name;
+            childName = parentObject.name;
+
             expect(childName).toEqual(NEW_NAME);
         });
     });

src/plugins/flexibleLayout/toolbarProvider.js

@@ -97,7 +97,7 @@ function ToolbarProvider(openmct) {
                             message: `This action will remove this frame from this Flexible Layout. Do you want to continue?`,
                             buttons: [
                                 {
-                                    label: 'Ok',
+                                    label: 'OK',
                                     emphasis: 'true',
                                     callback: function () {
                                         deleteFrameAction(primary.context.frameId);
@@ -162,7 +162,7 @@ function ToolbarProvider(openmct) {
                             message: 'This action will permanently delete this container from this Flexible Layout',
                             buttons: [
                                 {
-                                    label: 'Ok',
+                                    label: 'OK',
                                     emphasis: 'true',
                                     callback: function () {
                                         removeContainer(containerId);

src/plugins/folderView/components/GridItem.vue

@@ -5,7 +5,7 @@
         'is-alias': item.isAlias === true,
         'c-grid-item--unknown': item.type.cssClass === undefined || item.type.cssClass.indexOf('unknown') !== -1
     }, statusClass]"
-    :href="objectLink"
+    @click="navigate"
 >
     <div
         class="c-grid-item__type-icon"
@@ -49,11 +49,17 @@ import statusListener from './status-listener';
 
 export default {
     mixins: [contextMenuGesture, objectLink, statusListener],
+    inject: ['openmct'],
     props: {
         item: {
             type: Object,
             required: true
         }
+    },
+    methods: {
+        navigate() {
+            this.openmct.router.navigate(this.objectLink);
+        }
     }
 };
 </script>

src/plugins/folderView/components/ListItem.vue

@@ -11,7 +11,7 @@
             ref="objectLink"
             class="c-object-label"
             :class="[statusClass]"
-            :href="objectLink"
+            @click="navigate"
         >
             <div
                 class="c-object-label__type-icon c-list-item__name__type-icon"
@@ -45,6 +45,7 @@ import statusListener from './status-listener';
 
 export default {
     mixins: [contextMenuGesture, objectLink, statusListener],
+    inject: ['openmct'],
     props: {
         item: {
             type: Object,
@@ -56,7 +57,7 @@ export default {
             return moment(timestamp).format(format);
         },
         navigate() {
-            this.$refs.objectLink.click();
+            this.openmct.router.navigate(this.objectLink);
         }
     }
 };

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

@@ -19,6 +19,15 @@
             margin: 0 $interiorMargin $interiorMargin 0;
         }
     }
+
+    body.mobile & {
+        flex: 1 0 auto;
+    }
+
+    [class*='l-overlay'] & {
+        // When this view is in an overlay, prevent navigation
+        pointer-events: none;
+    }
 }
 
 /******************************* GRID ITEMS */

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

@@ -22,4 +22,9 @@
             @include isAlias();
         }
     }
+
+    [class*='l-overlay'] & {
+        // When this view is in an overlay, prevent navigation
+        pointer-events: none;
+    }
 }

src/plugins/goToOriginalAction/goToOriginalAction.js

@@ -41,7 +41,7 @@ export default class GoToOriginalAction {
                     .slice(1)
                     .join('/');
 
-                window.location.href = url;
+                this._openmct.router.navigate(url);
             });
     }
     appliesTo(objectPath) {

src/plugins/goToOriginalAction/pluginSpec.js

@@ -24,10 +24,15 @@ import {
     resetApplicationState
 } from 'utils/testing';
 
-describe("the plugin", () => {
+describe("the goToOriginalAction plugin", () => {
     let openmct;
-    let goToFolderAction;
+    let goToOriginalAction;
+    let mockRootFolder;
+    let mockSubFolder;
+    let mockSubSubFolder;
+    let mockObject;
     let mockObjectPath;
+    let hash;
 
     beforeEach((done) => {
         openmct = createOpenMct();
@@ -35,7 +40,7 @@ describe("the plugin", () => {
         openmct.on('start', done);
         openmct.startHeadless();
 
-        goToFolderAction = openmct.actions._allActions.goToOriginal;
+        goToOriginalAction = openmct.actions._allActions.goToOriginal;
     });
 
     afterEach(() => {
@@ -43,31 +48,153 @@ describe("the plugin", () => {
     });
 
     it('installs the go to folder action', () => {
-        expect(goToFolderAction).toBeDefined();
+        expect(goToOriginalAction).toBeDefined();
     });
 
     describe('when invoked', () => {
-
         beforeEach(() => {
-            mockObjectPath = [{
-                name: 'mock folder',
-                type: 'folder',
-                identifier: {
-                    key: 'mock-folder',
-                    namespace: ''
-                }
-            }];
-            spyOn(openmct.objects, 'get').and.returnValue(Promise.resolve({
-                identifier: {
-                    namespace: '',
-                    key: 'test'
-                }
-            }));
-            goToFolderAction.invoke(mockObjectPath);
+            mockRootFolder = getMockObject('mock-root');
+            mockSubFolder = getMockObject('mock-sub');
+            mockSubSubFolder = getMockObject('mock-sub-sub');
+            mockObject = getMockObject('mock-table');
+
+            mockObjectPath = [
+                mockObject,
+                mockSubSubFolder,
+                mockSubFolder,
+                mockRootFolder
+            ];
+
+            spyOn(openmct.objects, 'get').and.callFake(identifier => {
+                const mockedObject = getMockObject(identifier);
+
+                return Promise.resolve(mockedObject);
+            });
+
+            spyOn(openmct.router, 'navigate').and.callFake(navigateTo => {
+                hash = navigateTo;
+            });
+
+            return goToOriginalAction.invoke(mockObjectPath);
         });
 
         it('goes to the original location', () => {
-            expect(window.location.href).toContain('context.html#/browse/?tc.mode=fixed&tc.startBound=0&tc.endBound=1&tc.timeSystem=utc');
+            const originalLocationHash = '#/browse/mock-root/mock-table';
+
+            return waitForNavigation(() => {
+                return hash === originalLocationHash;
+            }).then(() => {
+                expect(hash).toEqual(originalLocationHash);
+            });
         });
     });
+
+    function waitForNavigation(navigated) {
+        return new Promise((resolve, reject) => {
+            const start = Date.now();
+
+            checkNavigated();
+
+            function checkNavigated() {
+                const elapsed = Date.now() - start;
+
+                if (navigated()) {
+                    resolve();
+                } else if (elapsed >= jasmine.DEFAULT_TIMEOUT_INTERVAL - 1000) {
+                    reject("didn't navigate in time");
+                } else {
+                    setTimeout(checkNavigated);
+                }
+            }
+        });
+    }
+
+    function getMockObject(key) {
+        const id = typeof key === 'string' ? key : key.key;
+
+        const mockMCTObjects = {
+            "ROOT": {
+                "composition": [
+                    {
+                        "namespace": "",
+                        "key": "mock-root"
+                    }
+                ],
+                "identifier": {
+                    "namespace": "",
+                    "key": "mock-root"
+                }
+            },
+            "mock-root": {
+                "composition": [
+                    {
+                        "namespace": "",
+                        "key": "mock-sub"
+                    },
+                    {
+                        "namespace": "",
+                        "key": "mock-table"
+                    }
+                ],
+                "name": "root",
+                "type": "folder",
+                "id": "mock-root",
+                "location": "ROOT",
+                "identifier": {
+                    "namespace": "",
+                    "key": "mock-root"
+                }
+            },
+            "mock-sub": {
+                "composition": [
+                    {
+                        "namespace": "",
+                        "key": "mock-sub-sub"
+                    },
+                    {
+                        "namespace": "",
+                        "key": "mock-table"
+                    }
+                ],
+                "name": "sub",
+                "type": "folder",
+                "location": "mock-root",
+                "identifier": {
+                    "namespace": "",
+                    "key": "mock-sub"
+                }
+            },
+            "mock-table": {
+                "composition": [],
+                "configuration": {
+                    "columnWidths": {},
+                    "hiddenColumns": {}
+                },
+                "name": "table",
+                "type": "table",
+                "location": "mock-root",
+                "identifier": {
+                    "namespace": "",
+                    "key": "mock-table"
+                }
+            },
+            "mock-sub-sub": {
+                "composition": [
+                    {
+                        "namespace": "",
+                        "key": "mock-table"
+                    }
+                ],
+                "name": "sub sub",
+                "type": "folder",
+                "location": "mock-sub",
+                "identifier": {
+                    "namespace": "",
+                    "key": "mock-sub-sub"
+                }
+            }
+        };
+
+        return mockMCTObjects[id];
+    }
 });

src/plugins/imagery/ImageryViewProvider.js

@@ -62,6 +62,9 @@ export default function ImageryViewProvider(openmct) {
                 destroy: function () {
                     component.$destroy();
                     component = undefined;
+                },
+                _getInstance: function () {
+                    return component;
                 }
             };
         }

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

@@ -32,7 +32,7 @@
         :camera-pan="cameraPan"
     />
     <CompassRose
-        v-if="true"
+        v-if="hasCameraFieldOfView"
         :heading="heading"
         :sized-image-width="sizedImageDimensions.width"
         :sun-heading="sunHeading"

src/plugins/imagery/components/ImageryViewLayout.vue

@@ -124,27 +124,40 @@
         </div>
     </div>
     <div
-        ref="thumbsWrapper"
         class="c-imagery__thumbs-wrapper"
-        :class="{'is-paused': isPaused}"
-        @scroll="handleScroll"
+        :class="[
+            { 'is-paused': isPaused },
+            { 'is-autoscroll-off': !resizingWindow && !autoScroll && !isPaused }
+        ]"
     >
-        <div v-for="(image, index) in imageHistory"
-             :key="image.url + image.time"
-             class="c-imagery__thumb c-thumb"
-             :class="{ selected: focusedImageIndex === index && isPaused }"
-             @click="setFocusedImage(index, thumbnailClick)"
+        <div
+            ref="thumbsWrapper"
+            class="c-imagery__thumbs-scroll-area"
+            @scroll="handleScroll"
         >
-            <a href=""
-               :download="image.imageDownloadName"
-               @click.prevent
+            <div v-for="(image, index) in imageHistory"
+                 :key="image.url + image.time"
+                 class="c-imagery__thumb c-thumb"
+                 :class="{ selected: focusedImageIndex === index && isPaused }"
+                 @click="setFocusedImage(index, thumbnailClick)"
             >
-                <img class="c-thumb__image"
-                     :src="image.url"
+                <a href=""
+                   :download="image.imageDownloadName"
+                   @click.prevent
                 >
-            </a>
-            <div class="c-thumb__timestamp">{{ image.formattedTime }}</div>
+                    <img class="c-thumb__image"
+                         :src="image.url"
+                    >
+                </a>
+                <div class="c-thumb__timestamp">{{ image.formattedTime }}</div>
+            </div>
         </div>
+
+        <button
+            class="c-imagery__auto-scroll-resume-button c-icon-button icon-play"
+            title="Resume automatic scrolling of image thumbnails"
+            @click="scrollToRight('reset')"
+        ></button>
     </div>
 </div>
 </template>
@@ -171,6 +184,8 @@ const TWENTYFOUR_HOURS = EIGHT_HOURS * 3;
 const ARROW_RIGHT = 39;
 const ARROW_LEFT = 37;
 
+const SCROLL_LATENCY = 250;
+
 export default {
     components: {
         Compass
@@ -204,7 +219,8 @@ export default {
             focusedImageNaturalAspectRatio: undefined,
             imageContainerWidth: undefined,
             imageContainerHeight: undefined,
-            lockCompass: true
+            lockCompass: true,
+            resizingWindow: false
         };
     },
     computed: {
@@ -380,9 +396,13 @@ export default {
 
         this.imageContainerResizeObserver = new ResizeObserver(this.resizeImageContainer);
         this.imageContainerResizeObserver.observe(this.$refs.focusedImage);
-    },
-    updated() {
-        this.scrollToRight();
+
+        // For adjusting scroll bar size and position when resizing thumbs wrapper
+        this.handleScroll = _.debounce(this.handleScroll, SCROLL_LATENCY);
+        this.handleThumbWindowResizeEnded = _.debounce(this.handleThumbWindowResizeEnded, SCROLL_LATENCY);
+
+        this.thumbWrapperResizeObserver = new ResizeObserver(this.handleThumbWindowResizeStart);
+        this.thumbWrapperResizeObserver.observe(this.$refs.thumbsWrapper);
     },
     beforeDestroy() {
         if (this.unsubscribe) {
@@ -390,7 +410,13 @@ export default {
             delete this.unsubscribe;
         }
 
-        this.imageContainerResizeObserver.disconnect();
+        if (this.imageContainerResizeObserver) {
+            this.imageContainerResizeObserver.disconnect();
+        }
+
+        if (this.thumbWrapperResizeObserver) {
+            this.thumbWrapperResizeObserver.disconnect();
+        }
 
         if (this.relatedTelemetry.hasRelatedTelemetry) {
             this.relatedTelemetry.destroy();
@@ -559,17 +585,15 @@ export default {
         },
         handleScroll() {
             const thumbsWrapper = this.$refs.thumbsWrapper;
-            if (!thumbsWrapper) {
+            if (!thumbsWrapper || this.resizingWindow) {
                 return;
             }
 
-            const { scrollLeft, scrollWidth, clientWidth, scrollTop, scrollHeight, clientHeight } = thumbsWrapper;
-            const disableScroll = (scrollWidth - scrollLeft) > 2 * clientWidth
-                    || (scrollHeight - scrollTop) > 2 * clientHeight;
+            const { scrollLeft, scrollWidth, clientWidth } = thumbsWrapper;
+            const disableScroll = scrollWidth > Math.ceil(scrollLeft + clientWidth);
             this.autoScroll = !disableScroll;
         },
         paused(state, type) {
-
             this.isPaused = state;
 
             if (type === 'button') {
@@ -582,6 +606,7 @@ export default {
             }
 
             this.autoScroll = true;
+            this.scrollToRight();
         },
         scrollToFocused() {
             const thumbsWrapper = this.$refs.thumbsWrapper;
@@ -598,8 +623,8 @@ export default {
                 });
             }
         },
-        scrollToRight() {
-            if (this.isPaused || !this.$refs.thumbsWrapper || !this.autoScroll) {
+        scrollToRight(type) {
+            if (type !== 'reset' && (this.isPaused || !this.$refs.thumbsWrapper || !this.autoScroll)) {
                 return;
             }
 
@@ -608,7 +633,9 @@ export default {
                 return;
             }
 
-            setTimeout(() => this.$refs.thumbsWrapper.scrollLeft = scrollWidth, 0);
+            this.$nextTick(() => {
+                this.$refs.thumbsWrapper.scrollLeft = scrollWidth;
+            });
         },
         setFocusedImage(index, thumbnailClick = false) {
             if (this.isPaused && !thumbnailClick) {
@@ -676,9 +703,9 @@ export default {
             image.imageDownloadName = this.getImageDownloadName(datum);
 
             this.imageHistory.push(image);
-
             if (setFocused) {
                 this.setFocusedImage(this.imageHistory.length - 1);
+                this.scrollToRight();
             }
         },
         getFormatter(key) {
@@ -702,7 +729,7 @@ export default {
             window.clearInterval(this.durationTracker);
         },
         updateDuration() {
-            let currentTime = this.openmct.time.clock().currentValue();
+            let currentTime = this.openmct.time.clock() && this.openmct.time.clock().currentValue();
             this.numericDuration = currentTime - this.parsedSelectedTime;
         },
         resetAgeCSS() {
@@ -814,6 +841,24 @@ export default {
                 this.imageContainerHeight = this.$refs.focusedImage.clientHeight;
             }
         },
+        handleThumbWindowResizeStart() {
+            if (!this.autoScroll) {
+                return;
+            }
+
+            // To hide resume button while scrolling
+            this.resizingWindow = true;
+            this.handleThumbWindowResizeEnded();
+        },
+        handleThumbWindowResizeEnded() {
+            if (!this.isPaused) {
+                this.scrollToRight('reset');
+            }
+
+            this.$nextTick(() => {
+                this.resizingWindow = false;
+            });
+        },
         toggleLockCompass() {
             this.lockCompass = !this.lockCompass;
         }

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

@@ -93,24 +93,43 @@
     }
 
     &__thumbs-wrapper {
-        flex: 0 0 auto;
+        display: flex; // Uses row layout
+
+        &.is-autoscroll-off {
+            background: $colorInteriorBorder;
+            [class*='__auto-scroll-resume-button'] {
+                display: block;
+            }
+        }
+
+        &.is-paused {
+            background: rgba($colorPausedBg, 0.4);
+        }
+    }
+
+    &__thumbs-scroll-area {
+        flex: 0 1 auto;
         display: flex;
         flex-direction: row;
         height: 135px;
         overflow-x: auto;
         overflow-y: hidden;
+        margin-bottom: 1px;
         padding-bottom: $interiorMarginSm;
 
-        &.is-paused {
-            background: rgba($colorPausedBg, 0.4);
-        }
-
         .c-thumb:last-child {
             // Hilite the lastest thumb
             background: $colorBodyFg;
             color: $colorBodyBg;
         }
     }
+
+    &__auto-scroll-resume-button {
+        display: none; // Set to block when __thumbs-wrapper has .is-autoscroll-off
+        flex: 0 0 auto;
+        font-size: 0.8em;
+        margin: $interiorMarginSm;
+    }
 }
 
 /*************************************** THUMBS */
@@ -142,7 +161,7 @@
 
 .l-layout,
 .c-fl {
-    .c-imagery__thumbs-wrapper {
+    .c-imagery__thumbs-scroll-area {
         //  When Imagery is in a layout, hide the thumbs area
         display: none;
     }

src/plugins/imagery/pluginSpec.js

@@ -19,7 +19,7 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-import ImageryPlugin from './plugin.js';
+
 import Vue from 'vue';
 import {
     createOpenMct,
@@ -89,15 +89,12 @@ describe("The Imagery View Layout", () => {
     const START = Date.now();
     const COUNT = 10;
 
+    let resolveFunction;
+
     let openmct;
-    let imageryPlugin;
+    let appHolder;
     let parent;
     let child;
-    let timeFormat = 'utc';
-    let bounds = {
-        start: START - TEN_MINUTES,
-        end: START
-    };
     let imageTelemetry = generateTelemetry(START - TEN_MINUTES, COUNT);
     let imageryObject = {
         identifier: {
@@ -199,38 +196,40 @@ describe("The Imagery View Layout", () => {
 
     // this setups up the app
     beforeEach((done) => {
-        const appHolder = document.createElement('div');
+        appHolder = document.createElement('div');
         appHolder.style.width = '640px';
         appHolder.style.height = '480px';
 
         openmct = createOpenMct();
 
+        openmct.install(openmct.plugins.MyItems());
+        openmct.install(openmct.plugins.LocalTimeSystem());
+        openmct.install(openmct.plugins.UTCTimeSystem());
+
         parent = document.createElement('div');
         child = document.createElement('div');
         parent.appendChild(child);
 
+        // document.querySelector('body').append(parent);
+
         spyOn(window, 'ResizeObserver').and.returnValue({
             observe() {},
             disconnect() {}
         });
 
         spyOn(openmct.telemetry, 'request').and.returnValue(Promise.resolve([]));
-
-        imageryPlugin = new ImageryPlugin();
-        openmct.install(imageryPlugin);
-
         spyOn(openmct.objects, 'get').and.returnValue(Promise.resolve({}));
 
-        openmct.time.timeSystem(timeFormat, {
-            start: 0,
-            end: 4
-        });
-
         openmct.on('start', done);
-        openmct.startHeadless(appHolder);
+        openmct.start(appHolder);
     });
 
     afterEach(() => {
+        openmct.time.timeSystem('utc', {
+            start: 0,
+            end: 1
+        });
+
         return resetApplicationState(openmct);
     });
 
@@ -248,7 +247,7 @@ describe("The Imagery View Layout", () => {
         let imageryViewProvider;
         let imageryView;
 
-        beforeEach(async (done) => {
+        beforeEach(async () => {
             let telemetryRequestResolve;
             let telemetryRequestPromise = new Promise((resolve) => {
                 telemetryRequestResolve = resolve;
@@ -260,23 +259,18 @@ describe("The Imagery View Layout", () => {
                 return telemetryRequestPromise;
             });
 
-            openmct.time.clock('local', {
-                start: bounds.start,
-                end: bounds.end + 100
-            });
-
             applicableViews = openmct.objectViews.get(imageryObject, []);
             imageryViewProvider = applicableViews.find(viewProvider => viewProvider.key === imageryKey);
             imageryView = imageryViewProvider.view(imageryObject);
             imageryView.show(child);
 
             await telemetryRequestPromise;
-            await Vue.nextTick();
-
-            return done();
         });
 
         afterEach(() => {
+            openmct.time.stopClock();
+            openmct.router.removeListener('change:hash', resolveFunction);
+
             imageryView.destroy();
         });
 
@@ -286,43 +280,44 @@ describe("The Imagery View Layout", () => {
             expect(imageInfo.url.indexOf(imageTelemetry[COUNT - 1].timeId)).not.toEqual(-1);
         });
 
-        it("should show the clicked thumbnail as the main image", async () => {
+        it("should show the clicked thumbnail as the main image", (done) => {
             const target = imageTelemetry[5].url;
             parent.querySelectorAll(`img[src='${target}']`)[0].click();
-            await Vue.nextTick();
-            const imageInfo = getImageInfo(parent);
+            Vue.nextTick(() => {
+                const imageInfo = getImageInfo(parent);
 
-            expect(imageInfo.url.indexOf(imageTelemetry[5].timeId)).not.toEqual(-1);
-        });
-
-        it("should show that an image is new", async (done) => {
-            await Vue.nextTick();
-
-            // used in code, need to wait to the 500ms here too
-            setTimeout(() => {
-                const imageIsNew = isNew(parent);
-
-                expect(imageIsNew).toBeTrue();
+                expect(imageInfo.url.indexOf(imageTelemetry[5].timeId)).not.toEqual(-1);
                 done();
-            }, REFRESH_CSS_MS);
+            });
         });
 
-        it("should show that an image is not new", async (done) => {
+        xit("should show that an image is new", (done) => {
+            Vue.nextTick(() => {
+                // used in code, need to wait to the 500ms here too
+                setTimeout(() => {
+                    const imageIsNew = isNew(parent);
+                    expect(imageIsNew).toBeTrue();
+                    done();
+                }, REFRESH_CSS_MS);
+            });
+        });
+
+        xit("should show that an image is not new", (done) => {
             const target = imageTelemetry[2].url;
             parent.querySelectorAll(`img[src='${target}']`)[0].click();
 
-            await Vue.nextTick();
+            Vue.nextTick(() => {
+                // used in code, need to wait to the 500ms here too
+                setTimeout(() => {
+                    const imageIsNew = isNew(parent);
 
-            // used in code, need to wait to the 500ms here too
-            setTimeout(() => {
-                const imageIsNew = isNew(parent);
-
-                expect(imageIsNew).toBeFalse();
-                done();
-            }, REFRESH_CSS_MS);
+                    expect(imageIsNew).toBeFalse();
+                    done();
+                }, REFRESH_CSS_MS);
+            });
         });
 
-        it("should navigate via arrow keys", async () => {
+        it("should navigate via arrow keys", (done) => {
             let keyOpts = {
                 element: parent.querySelector('.c-imagery'),
                 key: 'ArrowLeft',
@@ -332,14 +327,15 @@ describe("The Imagery View Layout", () => {
 
             simulateKeyEvent(keyOpts);
 
-            await Vue.nextTick();
+            Vue.nextTick(() => {
+                const imageInfo = getImageInfo(parent);
 
-            const imageInfo = getImageInfo(parent);
-
-            expect(imageInfo.url.indexOf(imageTelemetry[COUNT - 2].timeId)).not.toEqual(-1);
+                expect(imageInfo.url.indexOf(imageTelemetry[COUNT - 2].timeId)).not.toEqual(-1);
+                done();
+            });
         });
 
-        it("should navigate via numerous arrow keys", async () => {
+        it("should navigate via numerous arrow keys", (done) => {
             let element = parent.querySelector('.c-imagery');
             let type = 'keyup';
             let leftKeyOpts = {
@@ -362,12 +358,28 @@ describe("The Imagery View Layout", () => {
             // right once
             simulateKeyEvent(rightKeyOpts);
 
-            await Vue.nextTick();
+            Vue.nextTick(() => {
+                const imageInfo = getImageInfo(parent);
 
-            const imageInfo = getImageInfo(parent);
-
-            expect(imageInfo.url.indexOf(imageTelemetry[COUNT - 3].timeId)).not.toEqual(-1);
+                expect(imageInfo.url.indexOf(imageTelemetry[COUNT - 3].timeId)).not.toEqual(-1);
+                done();
+            });
         });
+        it ('shows an auto scroll button when scroll to left', async () => {
+            // to mock what a scroll would do
+            imageryView._getInstance().$refs.ImageryLayout.autoScroll = false;
+            await Vue.nextTick();
+            let autoScrollButton = parent.querySelector('.c-imagery__auto-scroll-resume-button');
+            expect(autoScrollButton).toBeTruthy();
+        });
+        it ('scrollToRight is called when clicking on auto scroll button', async () => {
+            // use spyon to spy the scroll function
+            spyOn(imageryView._getInstance().$refs.ImageryLayout, 'scrollToRight');
+            imageryView._getInstance().$refs.ImageryLayout.autoScroll = false;
+            await Vue.nextTick();
+            parent.querySelector('.c-imagery__auto-scroll-resume-button').click();
+            expect(imageryView._getInstance().$refs.ImageryLayout.scrollToRight).toHaveBeenCalledWith('reset');
 
+        });
     });
 });

src/plugins/interceptors/pluginSpec.js

@@ -30,10 +30,6 @@ describe('the plugin', function () {
     const TEST_NAMESPACE = 'test';
 
     beforeEach((done) => {
-        const appHolder = document.createElement('div');
-        appHolder.style.width = '640px';
-        appHolder.style.height = '480px';
-
         openmct = createOpenMct();
         openmct.install(new InterceptorPlugin(openmct));
 
@@ -46,7 +42,7 @@ describe('the plugin', function () {
         element.appendChild(child);
 
         openmct.on('start', done);
-        openmct.startHeadless(appHolder);
+        openmct.startHeadless();
     });
 
     afterEach(() => {
@@ -55,6 +51,7 @@ describe('the plugin', function () {
 
     describe('the missingObjectInterceptor', () => {
         let mockProvider;
+
         beforeEach(() => {
             mockProvider = jasmine.createSpyObj("mock provider", [
                 "get"
@@ -63,27 +60,28 @@ describe('the plugin', function () {
             openmct.objects.addProvider(TEST_NAMESPACE, mockProvider);
         });
 
-        it('returns missing objects', (done) => {
+        it('returns missing objects', () => {
             const identifier = {
                 namespace: TEST_NAMESPACE,
                 key: 'hello'
             };
-            openmct.objects.get(identifier).then((testObject) => {
+
+            return openmct.objects.get(identifier).then((testObject) => {
                 expect(testObject).toEqual({
                     identifier,
                     type: 'unknown',
                     name: 'Missing: test:hello'
                 });
-                done();
             });
         });
 
-        it('returns the My items object if not found', (done) => {
+        it('returns the My items object if not found', () => {
             const identifier = {
                 namespace: TEST_NAMESPACE,
                 key: 'mine'
             };
-            openmct.objects.get(identifier).then((testObject) => {
+
+            return openmct.objects.get(identifier).then((testObject) => {
                 expect(testObject).toEqual({
                     identifier,
                     "name": "My Items",
@@ -91,7 +89,6 @@ describe('the plugin', function () {
                     "composition": [],
                     "location": "ROOT"
                 });
-                done();
             });
         });
 

src/plugins/localTimeSystem/pluginSpec.js

@@ -55,7 +55,7 @@ describe("The local time", () => {
         beforeEach(() => {
             localTimeSystem = openmct.time.timeSystem(LOCAL_SYSTEM_KEY, {
                 start: 0,
-                end: 4
+                end: 1
             });
         });
 

src/plugins/move/MoveAction.js

@@ -37,7 +37,14 @@ export default class MoveAction {
         let oldParent = objectPath[1];
         let dialogService = this.openmct.$injector.get('dialogService');
         let dialogForm = this.getDialogForm(object, oldParent);
-        let userInput = await dialogService.getUserInput(dialogForm, { name: object.name });
+        let userInput;
+
+        try {
+            userInput = await dialogService.getUserInput(dialogForm, { name: object.name });
+        } catch (err) {
+            // user canceled, most likely
+            return;
+        }
 
         // if we need to update name
         if (object.name !== userInput.name) {
@@ -104,13 +111,13 @@ export default class MoveAction {
                         {
                             key: "name",
                             control: "textfield",
-                            name: "Folder Name",
+                            name: "Name",
                             pattern: "\\S+",
                             required: true,
                             cssClass: "l-input-lg"
                         },
                         {
-                            name: "location",
+                            name: "Location",
                             control: "locator",
                             validate: this.validate(object, parent),
                             key: 'location'

src/plugins/move/pluginSpec.js

@@ -19,8 +19,6 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-import MoveActionPlugin from './plugin.js';
-import MoveAction from './MoveAction.js';
 import {
     createOpenMct,
     resetApplicationState,
@@ -37,10 +35,6 @@ describe("The Move Action plugin", () => {
 
     // this setups up the app
     beforeEach((done) => {
-        const appHolder = document.createElement('div');
-        appHolder.style.width = '640px';
-        appHolder.style.height = '480px';
-
         openmct = createOpenMct();
 
         childObject = getMockObjects({
@@ -73,25 +67,23 @@ describe("The Move Action plugin", () => {
             }
         }).folder;
 
-        // already installed by default, but never hurts, just adds to context menu
-        openmct.install(MoveActionPlugin());
-
         openmct.on('start', done);
-        openmct.startHeadless(appHolder);
+        openmct.startHeadless();
+
+        moveAction = openmct.actions._allActions.move;
     });
 
     afterEach(() => {
-        resetApplicationState(openmct);
+        return resetApplicationState(openmct);
     });
 
     it("should be defined", () => {
-        expect(MoveActionPlugin).toBeDefined();
+        expect(moveAction).toBeDefined();
     });
 
     describe("when moving an object to a new parent and removing from the old parent", () => {
 
         beforeEach(() => {
-            moveAction = new MoveAction(openmct);
             moveAction.addToNewParent(childObject, anotherParentObject);
             moveAction.removeFromOldParent(parentObject, childObject);
         });

src/plugins/newFolderAction/pluginSpec.js

@@ -79,7 +79,7 @@ describe("the plugin", () => {
             spyOn(compositionAPI, 'get').and.returnValue(mockComposition);
             spyOn(openmct.objects, 'save').and.returnValue(Promise.resolve(true));
 
-            newFolderAction.invoke(mockObjectPath);
+            return newFolderAction.invoke(mockObjectPath);
         });
 
         it('gets user input for folder name', () => {

src/plugins/notebook/components/Notebook.vue

@@ -31,7 +31,7 @@
     </div>
     <SearchResults v-if="search.length"
                    ref="searchResults"
-                   :domain-object="internalDomainObject"
+                   :domain-object="domainObject"
                    :results="searchResults"
                    @changeSectionPage="changeSelectedSection"
                    @updateEntries="updateEntries"
@@ -43,15 +43,18 @@
                  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"
-                 :domain-object="internalDomainObject"
-                 :page-title="internalDomainObject.configuration.pageTitle"
-                 :section-title="internalDomainObject.configuration.sectionTitle"
+                 :selected-section-id="selectedSectionId"
+                 :domain-object="domainObject"
+                 :page-title="domainObject.configuration.pageTitle"
+                 :section-title="domainObject.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">
@@ -61,10 +64,10 @@
                 ></button>
                 <div class="c-notebook__page-view__path c-path">
                     <span class="c-notebook__path__section c-path__item">
-                        {{ getSelectedSection() ? getSelectedSection().name : '' }}
+                        {{ selectedSection ? selectedSection.name : '' }}
                     </span>
                     <span class="c-notebook__path__page c-path__item">
-                        {{ getSelectedPage() ? getSelectedPage().name : '' }}
+                        {{ selectedPage ? selectedPage.name : '' }}
                     </span>
                 </div>
                 <div class="c-notebook__page-view__controls">
@@ -115,9 +118,9 @@
                 <NotebookEntry v-for="entry in filteredAndSortedEntries"
                                :key="entry.id"
                                :entry="entry"
-                               :domain-object="internalDomainObject"
-                               :selected-page="getSelectedPage()"
-                               :selected-section="getSelectedSection()"
+                               :domain-object="domainObject"
+                               :selected-page="selectedPage"
+                               :selected-section="selectedSection"
                                :read-only="false"
                                @deleteEntry="deleteEntry"
                                @updateEntry="updateEntry"
@@ -135,6 +138,7 @@ import SearchResults from './SearchResults.vue';
 import Sidebar from './Sidebar.vue';
 import { clearDefaultNotebook, getDefaultNotebook, setDefaultNotebook, setDefaultNotebookSection, setDefaultNotebookPage } from '../utils/notebook-storage';
 import { addNotebookEntry, createNewEmbed, getEntryPosById, getNotebookEntries, mutateObject } from '../utils/notebook-entries';
+import { NOTEBOOK_VIEW_TYPE } from '../notebook-constants';
 import objectUtils from 'objectUtils';
 
 import { debounce } from 'lodash';
@@ -151,14 +155,19 @@ export default {
         SearchResults,
         Sidebar
     },
-    inject: ['openmct', 'domainObject', 'snapshotContainer'],
+    inject: ['openmct', 'snapshotContainer'],
+    props: {
+        domainObject: {
+            type: Object,
+            required: true
+        }
+    },
     data() {
         return {
-            defaultPageId: getDefaultNotebook() ? getDefaultNotebook().page.id : '',
-            defaultSectionId: getDefaultNotebook() ? getDefaultNotebook().section.id : '',
+            selectedSectionId: this.getDefaultSectionId(),
+            selectedPageId: this.getDefaultPageId(),
             defaultSort: this.domainObject.configuration.defaultSort,
             focusEntryId: null,
-            internalDomainObject: this.domainObject,
             search: '',
             searchResults: [],
             showTime: 0,
@@ -167,9 +176,15 @@ export default {
         };
     },
     computed: {
+        defaultPageId() {
+            return this.getDefaultPageId();
+        },
+        defaultSectionId() {
+            return this.getDefaultSectionId();
+        },
         filteredAndSortedEntries() {
             const filterTime = Date.now();
-            const pageEntries = getNotebookEntries(this.internalDomainObject, this.selectedSection, this.selectedPage) || [];
+            const pageEntries = getNotebookEntries(this.domainObject, this.selectedSection, this.selectedPage) || [];
 
             const hours = parseInt(this.showTime, 10);
             const filteredPageEntriesByTime = hours
@@ -184,22 +199,28 @@ export default {
             return this.getPages() || [];
         },
         sections() {
-            return this.internalDomainObject.configuration.sections || [];
+            return this.getSections();
         },
         selectedPage() {
             const pages = this.getPages();
-            if (!pages) {
-                return null;
+            const selectedPage = pages.find(page => page.id === this.selectedPageId);
+
+            if (selectedPage) {
+                return selectedPage;
             }
 
-            return pages.find(page => page.isSelected);
+            if (!selectedPage && !pages.length) {
+                return undefined;
+            }
+
+            return pages[0];
         },
         selectedSection() {
             if (!this.sections.length) {
                 return null;
             }
 
-            return this.sections.find(section => section.isSelected);
+            return this.sections.find(section => section.id === this.selectedSectionId);
         }
     },
     watch: {
@@ -209,15 +230,14 @@ 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.navigateToSectionPage, false);
-
-        this.navigateToSectionPage();
+        window.addEventListener('hashchange', this.setSectionAndPageFromUrl);
     },
     beforeDestroy() {
         if (this.unlisten) {
@@ -225,7 +245,7 @@ export default {
         }
 
         window.removeEventListener('orientationchange', this.formatSidebar);
-        window.removeEventListener("hashchange", this.navigateToSectionPage);
+        window.removeEventListener('hashchange', this.setSectionAndPageFromUrl);
     },
     updated: function () {
         this.$nextTick(() => {
@@ -233,6 +253,28 @@ export default {
         });
     },
     methods: {
+        changeSectionPage(newParams, oldParams, changedParams) {
+            if (newParams.view !== NOTEBOOK_VIEW_TYPE) {
+                return;
+            }
+
+            let pageId = newParams.pageId;
+            let sectionId = newParams.sectionId;
+
+            if (!pageId && !sectionId) {
+                return;
+            }
+
+            this.sections.forEach(section => {
+                section.isSelected = Boolean(section.id === sectionId);
+
+                if (section.isSelected) {
+                    section.pages.forEach(page => {
+                        page.isSelected = Boolean(page.id === pageId);
+                    });
+                }
+            });
+        },
         changeSelectedSection({ sectionId, pageId }) {
             const sections = this.sections.map(s => {
                 s.isSelected = false;
@@ -259,14 +301,21 @@ 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.internalDomainObject.name,
-                identifier: this.internalDomainObject.identifier,
+                name: this.domainObject.name,
+                identifier: this.domainObject.identifier,
                 link: this.getLinktoNotebook()
             };
-            const page = this.getSelectedPage();
-            const section = this.getSelectedSection();
+            const page = this.selectedPage;
+            const section = this.selectedSection;
 
             return {
                 notebookMeta,
@@ -275,8 +324,7 @@ export default {
             };
         },
         deleteEntry(entryId) {
-            const self = this;
-            const entryPos = getEntryPosById(entryId, this.internalDomainObject, this.selectedSection, this.selectedPage);
+            const entryPos = getEntryPosById(entryId, this.domainObject, 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}`);
@@ -292,9 +340,9 @@ export default {
                         label: "Ok",
                         emphasis: true,
                         callback: () => {
-                            const entries = getNotebookEntries(self.internalDomainObject, self.selectedSection, self.selectedPage);
+                            const entries = getNotebookEntries(this.domainObject, this.selectedSection, this.selectedPage);
                             entries.splice(entryPos, 1);
-                            self.updateEntries(entries);
+                            this.updateEntries(entries);
                             dialog.dismiss();
                         }
                     },
@@ -370,6 +418,37 @@ 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) {
@@ -398,14 +477,17 @@ 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.internalDomainObject.configuration.sections;
-            const entries = this.internalDomainObject.configuration.entries;
+            const sections = this.domainObject.configuration.sections;
+            const entries = this.domainObject.configuration.entries;
             const searchTextLower = this.search.toLowerCase();
             const originalSearchText = this.search;
             let sectionTrackPageHit;
@@ -484,75 +566,25 @@ export default {
             this.searchResults = output;
         },
         getPages() {
-            const selectedSection = this.getSelectedSection();
+            const selectedSection = this.selectedSection;
             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() {
-            const { pageId, sectionId } = this.openmct.router.getParams();
-            if (!pageId || !sectionId) {
-                return;
-            }
-
-            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.internalDomainObject, notebookStorage, embed);
+            const id = addNotebookEntry(this.openmct, this.domainObject, notebookStorage, embed);
             this.focusEntryId = id;
         },
         orientationChange() {
             this.formatSidebar();
         },
         pagesChanged({ pages = [], id = null}) {
-            const selectedSection = this.getSelectedSection();
+            const selectedSection = this.selectedSection;
             if (!selectedSection) {
                 return;
             }
@@ -567,7 +599,6 @@ export default {
             });
 
             this.sectionsChanged({ sections });
-            this.updateDefaultNotebookPage(pages, id);
         },
         removeDefaultClass(domainObject) {
             if (!domainObject) {
@@ -586,10 +617,10 @@ export default {
         async updateDefaultNotebook(notebookStorage) {
             const defaultNotebookObject = await this.getDefaultNotebookObject();
             if (!defaultNotebookObject) {
-                setDefaultNotebook(this.openmct, notebookStorage, this.internalDomainObject);
+                setDefaultNotebook(this.openmct, notebookStorage, this.domainObject);
             } else if (objectUtils.makeKeyString(defaultNotebookObject.identifier) !== objectUtils.makeKeyString(notebookStorage.notebookMeta.identifier)) {
                 this.removeDefaultClass(defaultNotebookObject);
-                setDefaultNotebook(this.openmct, notebookStorage, this.internalDomainObject);
+                setDefaultNotebook(this.openmct, notebookStorage, this.domainObject);
             }
 
             if (this.defaultSectionId && this.defaultSectionId.length === 0 || this.defaultSectionId !== notebookStorage.section.id) {
@@ -609,7 +640,7 @@ export default {
 
             const notebookStorage = getDefaultNotebook();
             if (!notebookStorage
-                    || notebookStorage.notebookMeta.identifier.key !== this.internalDomainObject.identifier.key) {
+                    || notebookStorage.notebookMeta.identifier.key !== this.domainObject.identifier.key) {
                 return;
             }
 
@@ -618,7 +649,7 @@ export default {
             if (!page && defaultNotebookPage.id === id) {
                 this.defaultSectionId = null;
                 this.defaultPageId = null;
-                this.removeDefaultClass(this.internalDomainObject);
+                this.removeDefaultClass(this.domainObject);
                 clearDefaultNotebook();
 
                 return;
@@ -637,7 +668,7 @@ export default {
 
             const notebookStorage = getDefaultNotebook();
             if (!notebookStorage
-                    || notebookStorage.notebookMeta.identifier.key !== this.internalDomainObject.identifier.key) {
+                    || notebookStorage.notebookMeta.identifier.key !== this.domainObject.identifier.key) {
                 return;
             }
 
@@ -646,7 +677,7 @@ export default {
             if (!section && defaultNotebookSection.id === id) {
                 this.defaultSectionId = null;
                 this.defaultPageId = null;
-                this.removeDefaultClass(this.internalDomainObject);
+                this.removeDefaultClass(this.domainObject);
                 clearDefaultNotebook();
 
                 return;
@@ -659,50 +690,46 @@ export default {
             setDefaultNotebookSection(section);
         },
         updateEntry(entry) {
-            const entries = getNotebookEntries(this.internalDomainObject, this.selectedSection, this.selectedPage);
-            const entryPos = getEntryPosById(entry.id, this.internalDomainObject, this.selectedSection, this.selectedPage);
+            const entries = getNotebookEntries(this.domainObject, this.selectedSection, this.selectedPage);
+            const entryPos = getEntryPosById(entry.id, this.domainObject, this.selectedSection, this.selectedPage);
             entries[entryPos] = entry;
 
             this.updateEntries(entries);
         },
         updateEntries(entries) {
-            const configuration = this.internalDomainObject.configuration;
+            const configuration = this.domainObject.configuration;
             const notebookEntries = configuration.entries || {};
             notebookEntries[this.selectedSection.id][this.selectedPage.id] = entries;
 
-            mutateObject(this.openmct, this.internalDomainObject, 'configuration.entries', notebookEntries);
+            mutateObject(this.openmct, this.domainObject, 'configuration.entries', notebookEntries);
         },
-        updateInternalDomainObject(domainObject) {
-            this.internalDomainObject = domainObject;
+        getPageIdFromUrl() {
+            return this.openmct.router.getParams().pageId;
         },
-        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;
-            }
-
+        getSectionIdFromUrl() {
+            return this.openmct.router.getParams().sectionId;
+        },
+        syncUrlWithPageAndSection() {
             this.openmct.router.updateParams({
-                sectionId,
-                pageId
+                pageId: this.selectedPageId,
+                sectionId: this.selectedSectionId
             });
         },
         sectionsChanged({ sections, id = null }) {
-            mutateObject(this.openmct, this.internalDomainObject, 'configuration.sections', sections);
-
-            this.updateParams(sections);
+            mutateObject(this.openmct, this.domainObject, 'configuration.sections', 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="embed.snapshot.src">
+        <img :src="thumbnailImage">
     </div>
     <div class="c-ne__embed__info">
         <div class="c-ne__embed__name">
@@ -25,11 +25,14 @@
 
 <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 {
@@ -59,6 +62,11 @@ 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() {
@@ -85,7 +93,7 @@ export default {
                 template: '<div id="snap-annotation"></div>'
             }).$mount();
 
-            const painterroInstance = new PainterroInstance(annotateVue.$el, this.updateSnapshot);
+            const painterroInstance = new PainterroInstance(annotateVue.$el);
             const annotateOverlay = this.openmct.overlays.overlay({
                 element: annotateVue.$el,
                 size: 'large',
@@ -102,10 +110,12 @@ export default {
                     {
                         label: 'Save',
                         callback: () => {
-                            painterroInstance.save();
-                            annotateOverlay.dismiss();
-                            this.snapshotOverlay.dismiss();
-                            this.openSnapshot();
+                            painterroInstance.save((snapshotObject) => {
+                                annotateOverlay.dismiss();
+                                this.snapshotOverlay.dismiss();
+                                this.updateSnapshot(snapshotObject);
+                                this.openSnapshotOverlay(snapshotObject.fullSizeImage.src);
+                            });
                         }
                     }
                 ],
@@ -115,7 +125,19 @@ export default {
             });
 
             painterroInstance.intialize();
-            painterroInstance.show(this.embed.snapshot.src);
+
+            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);
+                });
         },
         changeLocation() {
             const hash = this.embed.historicLink;
@@ -145,7 +167,7 @@ export default {
 
             const relativeHash = hash.slice(hash.indexOf('#'));
             const url = new URL(relativeHash, `${location.protocol}//${location.host}${location.pathname}`);
-            window.location.hash = url.hash;
+            this.openmct.router.navigate(url.hash);
         },
         formatTime(unixTime, timeFormat) {
             return Moment.utc(unixTime).format(timeFormat);
@@ -159,12 +181,29 @@ 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,
-                        embed: this.embed
+                        name: this.embed.name,
+                        cssClass: this.embed.cssClass,
+                        src
                     };
                 },
                 methods: {
@@ -217,7 +256,9 @@ export default {
             this.$emit('updateEmbed', embed);
         },
         updateSnapshot(snapshotObject) {
-            this.embed.snapshot = snapshotObject;
+            this.embed.snapshot.thumbnailImage = snapshotObject.thumbnailImage;
+
+            updateNotebookImageDomainObject(this.openmct, this.embed.snapshot.fullSizeImageObjectIdentifier, snapshotObject.fullSizeImage);
             this.updateEmbed(this.embed);
         }
     }

src/plugins/notebook/components/NotebookEntry.vue

@@ -62,7 +62,6 @@
                 <NotebookEmbed v-for="embed in entry.embeds"
                                :key="embed.id"
                                :embed="embed"
-                               :entry="entry"
                                @removeEmbed="removeEmbed"
                                @updateEmbed="updateEmbed"
                 />
@@ -254,6 +253,7 @@ 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,6 +6,7 @@
     >
         <Page ref="pageComponent"
               :default-page-id="defaultPageId"
+              :selected-page-id="selectedPageId"
               :page="page"
               :page-title="pageTitle"
               @deletePage="deletePage"
@@ -33,11 +34,13 @@ export default {
                 return '';
             }
         },
+        selectedPageId: {
+            type: String,
+            required: true
+        },
         domainObject: {
             type: Object,
-            default() {
-                return {};
-            }
+            required: true
         },
         pages: {
             type: Array,
@@ -66,7 +69,17 @@ 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);
@@ -78,37 +91,29 @@ 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) {
-                        s.isSelected = true;
+                        selectedPageId = s.id;
                     }
                 });
             }
 
             if (pages.length && isPageSelected && (!defaultpage || isPageDefault)) {
-                pages[0].isSelected = true;
+                selectedPageId = pages[0].id;
             }
 
             this.$emit('updatePage', {
                 pages,
                 id
             });
+            this.$emit('selectPage', selectedPageId);
         },
         selectPage(id) {
-            const pages = this.pages.map(page => {
-                const isSelected = page.id === id;
-                page.isSelected = isSelected;
-
-                return page;
-            });
-
-            this.$emit('updatePage', {
-                pages,
-                id
-            });
+            this.$emit('selectPage', 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': page.isSelected, 'is-notebook-default' : (defaultPageId === page.id) }]"
+     :class="[{ 'is-selected': isSelected, 'is-notebook-default' : (defaultPageId === page.id) }]"
      :data-id="page.id"
      @click="selectPage"
 >
@@ -29,6 +29,10 @@ export default {
                 return '';
             }
         },
+        selectedPageId: {
+            type: String,
+            required: true
+        },
         page: {
             type: Object,
             required: true
@@ -46,6 +50,11 @@ export default {
             removeActionString: `Delete ${this.pageTitle}`
         };
     },
+    computed: {
+        isSelected() {
+            return this.selectedPageId === this.page.id;
+        }
+    },
     watch: {
         page(newPage) {
             this.toggleContentEditable(newPage);
@@ -73,7 +82,7 @@ export default {
             this.$emit('deletePage', this.page.id);
         },
         getRemoveDialog() {
-            const message = 'This action will delete this page and all of its entries. Do you want to continue?';
+            const message = 'Other users may be editing entries in this page, and deleting it is permanent. Do you want to continue?';
             const options = {
                 name: this.removeActionString,
                 callback: this.deletePage.bind(this),

src/plugins/notebook/components/SectionCollection.vue

@@ -4,13 +4,14 @@
         :key="section.id"
         class="c-list__item-h"
     >
-        <sectionComponent ref="sectionComponent"
-                          :default-section-id="defaultSectionId"
-                          :section="section"
-                          :section-title="sectionTitle"
-                          @deleteSection="deleteSection"
-                          @renameSection="updateSection"
-                          @selectSection="selectSection"
+        <NotebookSection ref="sectionComponent"
+                         :default-section-id="defaultSectionId"
+                         :selected-section-id="selectedSectionId"
+                         :section="section"
+                         :section-title="sectionTitle"
+                         @deleteSection="deleteSection"
+                         @renameSection="updateSection"
+                         @selectSection="selectSection"
         />
     </li>
 </ul>
@@ -19,11 +20,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: {
-        sectionComponent
+        NotebookSection: SectionComponent
     },
     inject: ['openmct'],
     props: {
@@ -33,6 +34,10 @@ export default {
                 return '';
             }
         },
+        selectedSectionId: {
+            type: String,
+            required: true
+        },
         domainObject: {
             type: Object,
             default() {
@@ -53,12 +58,22 @@ 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.isSelected);
+            const selectedSection = this.sections.find(s => s.id === this.selectedSectionId);
             const defaultNotebook = getDefaultNotebook();
             const defaultSection = defaultNotebook && defaultNotebook.section;
             const isSectionSelected = selectedSection && selectedSection.id === id;
@@ -83,18 +98,8 @@ export default {
                 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
-            });
+        selectSection(id) {
+            this.$emit('selectSection', 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': section.isSelected, 'is-notebook-default' : (defaultSectionId === section.id) }]"
+     :class="[{ 'is-selected': isSelected, 'is-notebook-default' : (defaultSectionId === section.id) }]"
      :data-id="section.id"
      @click="selectSection"
 >
@@ -13,9 +13,6 @@
 </div>
 </template>
 
-<style lang="scss">
-</style>
-
 <script>
 import PopupMenu from './PopupMenu.vue';
 import RemoveDialog from '../utils/removeDialog';
@@ -32,6 +29,10 @@ export default {
                 return '';
             }
         },
+        selectedSectionId: {
+            type: String,
+            required: true
+        },
         section: {
             type: Object,
             required: true
@@ -49,6 +50,11 @@ export default {
             removeActionString: `Delete ${this.sectionTitle}`
         };
     },
+    computed: {
+        isSelected() {
+            return this.selectedSectionId === this.section.id;
+        }
+    },
     watch: {
         section(newSection) {
             this.toggleContentEditable(newSection);
@@ -76,7 +82,7 @@ export default {
             this.$emit('deleteSection', this.section.id);
         },
         getRemoveDialog() {
-            const message = 'This action will delete this section and all of its pages and entries. Do you want to continue?';
+            const message = 'Other users may be editing entries in this section, and deleting it is permanent. 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">
+    <div class="c-sidebar__pane js-sidebar-sections">
         <div class="c-sidebar__header-w">
             <div class="c-sidebar__header">
                 <span class="c-sidebar__header-label">{{ sectionTitle }}</span>
@@ -15,14 +15,16 @@
             </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">
+    <div class="c-sidebar__pane js-sidebar-pages">
         <div class="c-sidebar__header-w">
             <div class="c-sidebar__header">
                 <span class="c-sidebar__header-label">{{ pageTitle }}</span>
@@ -42,6 +44,7 @@
             <PageCollection ref="pageCollection"
                             class="c-sidebar__contents"
                             :default-page-id="defaultPageId"
+                            :selected-page-id="selectedPageId"
                             :domain-object="domainObject"
                             :pages="pages"
                             :sections="sections"
@@ -49,6 +52,7 @@
                             :page-title="pageTitle"
                             @toggleNav="toggleNav"
                             @updatePage="pagesChanged"
+                            @selectPage="selectPage"
             />
         </div>
     </div>
@@ -73,12 +77,24 @@ export default {
                 return '';
             }
         },
+        selectedPageId: {
+            type: String,
+            default() {
+                return '';
+            }
+        },
         defaultSectionId: {
             type: String,
             default() {
                 return '';
             }
         },
+        selectedSectionId: {
+            type: String,
+            default() {
+                return '';
+            }
+        },
         domainObject: {
             type: Object,
             default() {
@@ -111,13 +127,9 @@ export default {
             }
         }
     },
-    data() {
-        return {
-        };
-    },
     computed: {
         pages() {
-            const selectedSection = this.sections.find(section => section.isSelected);
+            const selectedSection = this.sections.find(section => section.id === this.selectedSectionId);
 
             return selectedSection && selectedSection.pages || [];
         }
@@ -148,6 +160,7 @@ export default {
                 pages,
                 id: newPage.id
             });
+            this.$emit('selectPage', newPage.id);
         },
         addSection() {
             const newSection = this.createNewSection();
@@ -157,6 +170,8 @@ export default {
                 sections,
                 id: newSection.id
             });
+
+            this.$emit('selectSection', newSection.id);
         },
         addNewPage(page) {
             const pages = this.pages.map(p => {
@@ -212,6 +227,12 @@ 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="embed.cssClass"
+                    v-bind:class="cssClass"
                 >
-                    <span class="c-object-label__name">{{ embed.name }}</span>
+                    <span class="c-object-label__name">{{ name }}</span>
                 </span>
             </div>
         </div>
@@ -40,7 +40,7 @@
     <div
         ref="snapshot-image"
         class="c-notebook-snapshot__image"
-        :style="{ backgroundImage: 'url(' + embed.snapshot.src + ')' }"
+        :style="{ backgroundImage: 'url(' + src + ')' }"
     >
     </div>
 </div>

src/plugins/notebook/notebook-constants.js

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

src/plugins/notebook/plugin.js

@@ -2,18 +2,20 @@ import CopyToNotebookAction from './actions/CopyToNotebookAction';
 import Notebook from './components/Notebook.vue';
 import NotebookSnapshotIndicator from './components/NotebookSnapshotIndicator.vue';
 import SnapshotContainer from './snapshot-container';
-import Vue from 'vue';
 
-let installed = false;
+import { notebookImageMigration } from '../notebook/utils/notebook-migration';
+import { NOTEBOOK_TYPE } from './notebook-constants';
+
+import Vue from 'vue';
 
 export default function NotebookPlugin() {
     return function install(openmct) {
-        if (installed) {
+        if (openmct._NOTEBOOK_PLUGIN_INSTALLED) {
             return;
+        } else {
+            openmct._NOTEBOOK_PLUGIN_INSTALLED = true;
         }
 
-        installed = true;
-
         openmct.actions.register(new CopyToNotebookAction(openmct));
 
         const notebookType = {
@@ -84,7 +86,20 @@ export default function NotebookPlugin() {
                 }
             ]
         };
-        openmct.types.addType('notebook', notebookType);
+        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);
 
         const snapshotContainer = new SnapshotContainer(openmct);
         const notebookSnapshotIndicator = new Vue ({
@@ -123,10 +138,14 @@ export default function NotebookPlugin() {
                             },
                             provide: {
                                 openmct,
-                                domainObject,
                                 snapshotContainer
                             },
-                            template: '<Notebook></Notebook>'
+                            data() {
+                                return {
+                                    domainObject
+                                };
+                            },
+                            template: '<Notebook :domain-object="domainObject"></Notebook>'
                         });
                     },
                     destroy() {
@@ -135,5 +154,16 @@ 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,29 +21,32 @@
  *****************************************************************************/
 
 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:", () => {
-    beforeAll(done => {
+    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'
+        };
+
         appHolder = document.createElement('div');
         appHolder.style.width = '640px';
         appHolder.style.height = '480px';
+        document.body.appendChild(appHolder);
 
         openmct = createOpenMct();
 
@@ -51,21 +54,19 @@ describe("Notebook plugin:", () => {
         child = document.createElement('div');
         element.appendChild(child);
 
-        notebookPlugin = new NotebookPlugin();
-        openmct.install(notebookPlugin);
+        openmct.install(notebookPlugin());
 
         notebookDefinition = openmct.types.get('notebook').definition;
         notebookDefinition.initialize(notebookDomainObject);
 
         openmct.on('start', done);
         openmct.start(appHolder);
-
-        document.body.append(appHolder);
     });
 
-    afterAll(() => {
+    afterEach(() => {
         appHolder.remove();
-        resetApplicationState(openmct);
+
+        return resetApplicationState(openmct);
     });
 
     it("has type as Notebook", () => {
@@ -79,39 +80,96 @@ describe("Notebook plugin:", () => {
     describe("Notebook view:", () => {
         let notebookViewProvider;
         let notebookView;
+        let notebookViewObject;
+        let mutableNotebookObject;
 
         beforeEach(() => {
-            const notebookViewObject = {
+            notebookViewObject = {
                 ...notebookDomainObject,
                 id: "test-object",
                 name: 'Notebook',
                 configuration: {
                     defaultSort: 'oldest',
-                    entries: {},
+                    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": []
+                            }]
+                        }
+                    },
                     pageTitle: 'Page',
-                    sections: [],
+                    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"
+                        }]
+                    }],
                     sectionTitle: 'Section',
                     type: 'General'
                 }
             };
+            const testObjectProvider = jasmine.createSpyObj('testObjectProvider', [
+                'get',
+                'create',
+                'update',
+                'observe'
+            ]);
 
-            const notebookObject = {
-                name: 'Notebook View',
-                key: 'notebook-vue',
-                creatable: true
-            };
+            const applicableViews = openmct.objectViews.get(notebookViewObject, [notebookViewObject]);
+            notebookViewProvider = applicableViews.find(viewProvider => viewProvider.key === 'notebook-vue');
 
-            const applicableViews = openmct.objectViews.get(notebookViewObject, []);
-            notebookViewProvider = applicableViews.find(viewProvider => viewProvider.key === notebookObject.key);
-            notebookView = notebookViewProvider.view(notebookViewObject);
+            testObjectProvider.get.and.returnValue(Promise.resolve(notebookViewObject));
+            openmct.objects.addProvider('test-namespace', testObjectProvider);
+            testObjectProvider.observe.and.returnValue(() => {});
 
-            notebookView.show(child);
+            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();
+            });
 
-            return Vue.nextTick();
         });
 
         afterEach(() => {
             notebookView.destroy();
+            openmct.objects.destroyMutable(mutableNotebookObject);
         });
 
         it("provides notebook view", () => {
@@ -132,6 +190,114 @@ 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:", () => {
@@ -146,16 +312,22 @@ describe("Notebook plugin:", () => {
             button.dispatchEvent(clickEvent);
         }
 
-        beforeAll(() => {
+        beforeEach(() => {
             snapshotIndicator = openmct.indicators.indicatorObjects
                 .find(indicator => indicator.key === 'notebook-snapshot-indicator').element;
 
             element.append(snapshotIndicator);
 
-            return Vue.nextTick();
+            return Vue.nextTick().then(() => {
+                drawerElement = document.querySelector('.l-shell__drawer');
+            });
         });
 
-        afterAll(() => {
+        afterEach(() => {
+            if (drawerElement) {
+                drawerElement.classList.remove('is-expanded');
+            }
+
             snapshotIndicator.remove();
             snapshotIndicator = undefined;
 
@@ -165,16 +337,6 @@ 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);
@@ -218,4 +380,20 @@ 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,6 +1,8 @@
 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 {
@@ -14,12 +16,17 @@ export default class Snapshot {
 
     capture(snapshotMeta, notebookType, domElement) {
         const exportImageService = this.openmct.$injector.get('exportImageService');
-        exportImageService.exportPNGtoSRC(domElement, 's-status-taking-snapshot')
-            .then(function (blob) {
+
+        const options = {
+            className: 's-status-taking-snapshot',
+            thumbnailSize: DEFAULT_SIZE
+        };
+        exportImageService.exportPNGtoSRC(domElement, options)
+            .then(function ({blob, thumbnail}) {
                 const reader = new window.FileReader();
                 reader.readAsDataURL(blob);
                 reader.onloadend = function () {
-                    this._saveSnapShot(notebookType, reader.result, snapshotMeta);
+                    this._saveSnapShot(notebookType, reader.result, thumbnail, snapshotMeta);
                 }.bind(this);
             }.bind(this));
     }
@@ -27,16 +34,23 @@ export default class Snapshot {
     /**
      * @private
      */
-    _saveSnapShot(notebookType, imageUrl, snapshotMeta) {
-        const snapshot = imageUrl ? { src: imageUrl } : '';
-        const embed = createNewEmbed(snapshotMeta, snapshot);
-        if (notebookType === NOTEBOOK_DEFAULT) {
-            this._saveToDefaultNoteBook(embed);
+    _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);
 
-            return;
-        }
+                    return;
+                }
 
-        this._saveToNotebookSnapshots(embed);
+                this._saveToNotebookSnapshots(embed);
+            });
     }
 
     /**

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

@@ -112,7 +112,7 @@ let openmct;
 let mockIdentifierService;
 
 describe('Notebook Entries:', () => {
-    beforeEach(done => {
+    beforeEach(() => {
         openmct = createOpenMct();
         openmct.$injector = jasmine.createSpyObj('$injector', ['get']);
         mockIdentifierService = jasmine.createSpyObj(
@@ -134,13 +134,12 @@ describe('Notebook Entries:', () => {
             'update'
         ]));
         window.localStorage.setItem('notebook-storage', null);
-
-        done();
     });
 
     afterEach(() => {
         notebookDomainObject.configuration.entries[selectedSection.id][selectedPage.id] = [];
-        resetApplicationState(openmct);
+
+        return resetApplicationState(openmct);
     });
 
     it('getNotebookEntries has no entries', () => {
@@ -149,12 +148,11 @@ describe('Notebook Entries:', () => {
         expect(entries.length).toEqual(0);
     });
 
-    it('addNotebookEntry adds entry', (done) => {
+    it('addNotebookEntry adds entry', () => {
         const unlisten = openmct.objects.observe(notebookDomainObject, '*', (object) => {
             const entries = NotebookEntries.getNotebookEntries(notebookDomainObject, selectedSection, selectedPage);
 
             expect(entries.length).toEqual(1);
-            done();
             unlisten();
         });
 

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

@@ -0,0 +1,78 @@
+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

@@ -0,0 +1,43 @@
+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/notebook-storageSpec.js

@@ -60,7 +60,7 @@ let openmct;
 let mockIdentifierService;
 
 describe('Notebook Storage:', () => {
-    beforeEach((done) => {
+    beforeEach(() => {
         openmct = createOpenMct();
         openmct.$injector = jasmine.createSpyObj('$injector', ['get']);
         mockIdentifierService = jasmine.createSpyObj(
@@ -79,11 +79,10 @@ describe('Notebook Storage:', () => {
             'create',
             'update'
         ]));
-        done();
     });
 
     afterEach(() => {
-        resetApplicationState(openmct);
+        return resetApplicationState(openmct);
     });
 
     it('has empty local Storage', () => {

src/plugins/notebook/utils/painterroInstance.js

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

src/plugins/openInNewTabAction/openInNewTabAction.js

@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2009-2016, United States Government
+ * Open MCT, Copyright (c) 2014-2021, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -19,38 +19,20 @@
  * 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";
 
-define(
-    [],
-    function () {
-
-        /**
-         * Designates a specific timer for following. Timelines, for example,
-         * use the actively followed timer to display a time-of-interest line
-         * and interpret time conductor bounds in the Timeline's relative
-         * time frame.
-         *
-         * @implements {Action}
-         * @memberof platform/features/clock
-         * @constructor
-         * @param {ActionContext} context the context for this action
-         */
-        function FollowTimerAction(timerService, context) {
-            var domainObject =
-                context.domainObject
-                && context.domainObject.useCapability('adapter');
-            this.perform =
-                timerService.setTimer.bind(timerService, domainObject);
-        }
-
-        FollowTimerAction.appliesTo = function (context) {
-            var model =
-                (context.domainObject && context.domainObject.getModel())
-                || {};
-
-            return model.type === 'timer';
-        };
-
-        return FollowTimerAction;
+        this._openmct = openmct;
     }
-);
+    invoke(objectPath) {
+        let url = objectPathToUrl(this._openmct, objectPath);
+        window.open(url);
+    }
+}

src/plugins/openInNewTabAction/plugin.js

@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2009-2018, United States Government
+ * Open MCT, Copyright (c) 2014-2021, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -19,33 +19,10 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+import OpenInNewTabAction from './openInNewTabAction';
 
-define([], function () {
-
-    /**
-     * Indicator that displays the active timer, as well as its
-     * current state.
-     * @memberof platform/features/clock
-     */
-    return function installFollowIndicator(openmct, timerService) {
-        var indicator = openmct.indicators.simpleIndicator();
-        var timer = timerService.getTimer();
-        setIndicatorStatus(timer);
-
-        function setIndicatorStatus(newTimer) {
-            if (newTimer !== undefined) {
-                indicator.iconClass('icon-timer');
-                indicator.statusClass('s-status-on');
-                indicator.text('Following timer ' + newTimer.name);
-            } else {
-                indicator.iconClass('icon-timer');
-                indicator.statusClass('s-status-disabled');
-                indicator.text('No timer being followed');
-            }
-        }
-
-        timerService.on('change', setIndicatorStatus);
-
-        openmct.indicators.add(indicator);
+export default function () {
+    return function (openmct) {
+        openmct.actions.register(new OpenInNewTabAction(openmct));
     };
-});
+}

src/plugins/openInNewTabAction/pluginSpec.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.
+ *****************************************************************************/
+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,6 +22,7 @@
 
 import CouchDocument from "./CouchDocument";
 import CouchObjectQueue from "./CouchObjectQueue";
+import { NOTEBOOK_TYPE } from '../../notebook/notebook-constants.js';
 
 const REV = "_rev";
 const ID = "_id";
@@ -29,24 +30,14 @@ 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
@@ -133,8 +124,12 @@ export default class CouchObjectProvider {
                 this.objectQueue[key] = new CouchObjectQueue(undefined, response[REV]);
             }
 
-            //Sometimes CouchDB returns the old rev which fetching the object if there is a document update in progress
-            if (!this.objectQueue[key].pending) {
+            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
                 this.objectQueue[key].updateRevision(response[REV]);
             }
 
@@ -313,49 +308,63 @@ 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();
+                }
+            }
         };
     }
 
-    /**
-     * @private
-     */
-    abortGetChanges() {
-        if (this.controller) {
-            this.controller.abort();
-            this.controller = undefined;
-        }
-
-        return true;
+    isObservingObjectChanges() {
+        return this.stopObservingObjectChanges !== undefined;
     }
 
     /**
      * @private
      */
-    async observeObjectChanges(filter) {
-        let intermediateResponse = this.getIntermediateResponse();
-
-        if (!this.observeEnabled) {
-            intermediateResponse.reject('Observe for changes is disabled');
-        }
-
+    async observeObjectChanges() {
         const controller = new AbortController();
         const signal = controller.signal;
+        let filter = {selector: {}};
 
-        if (this.controller) {
-            this.abortGetChanges();
+        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]
+            };
         }
 
-        this.controller = controller;
+        let error = false;
+
+        if (typeof this.stopObservingObjectChanges === 'function') {
+            this.stopObservingObjectChanges();
+        }
+
+        this.stopObservingObjectChanges = () => {
+            controller.abort();
+            delete this.stopObservingObjectChanges;
+        };
+
         // 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}`;
@@ -374,14 +383,20 @@ export default class CouchObjectProvider {
             },
             body
         });
-        const reader = response.body.getReader();
-        let completed = false;
 
-        while (!completed) {
+        let reader;
+
+        if (response.body === undefined) {
+            error = true;
+        } else {
+            reader = response.body.getReader();
+        }
+
+        while (!error) {
             const {done, value} = await reader.read();
             //done is true when we lose connection with the provider
             if (done) {
-                completed = true;
+                error = true;
             }
 
             if (value) {
@@ -414,11 +429,9 @@ export default class CouchObjectProvider {
 
         }
 
-        //We're done receiving from the provider. No more chunks.
-        intermediateResponse.resolve(true);
-
-        return intermediateResponse.promise;
-
+        if (error && Object.keys(this.observers).length > 0) {
+            this.observeObjectChanges();
+        }
     }
 
     /**

src/plugins/persistence/couch/pluginSpec.js

@@ -27,8 +27,6 @@ import {
 
 describe('the plugin', () => {
     let openmct;
-    let element;
-    let child;
     let provider;
     let testPath = '/test/db';
     let options;
@@ -36,6 +34,8 @@ describe('the plugin', () => {
     let mockDomainObject;
 
     beforeEach((done) => {
+        spyOnBuiltins(['fetch'], window);
+
         mockDomainObject = {
             identifier: {
                 namespace: '',
@@ -51,8 +51,6 @@ describe('the plugin', () => {
         };
         openmct = createOpenMct(false);
 
-        spyOnBuiltins(['fetch'], window);
-
         openmct.$injector = jasmine.createSpyObj('$injector', ['get']);
         mockIdentifierService = jasmine.createSpyObj(
             'identifierService',
@@ -70,10 +68,6 @@ 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();
 
@@ -117,7 +111,7 @@ describe('the plugin', () => {
             });
         });
 
-        it('updates an object', () => {
+        it('updates an object', (done) => {
             return openmct.objects.save(mockDomainObject).then((result) => {
                 expect(result).toBeTrue();
                 expect(provider.create).toHaveBeenCalled();
@@ -128,6 +122,7 @@ describe('the plugin', () => {
                 return openmct.objects.save(mockDomainObject).then((updatedResult) => {
                     expect(updatedResult).toBeTrue();
                     expect(provider.update).toHaveBeenCalled();
+                    done();
                 });
             });
         });

src/plugins/plan/Plan.vue

@@ -1,3 +1,25 @@
+<!--
+ Open MCT, Copyright (c) 2014-2020, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
 <template>
 <div ref="plan"
      class="c-plan c-timeline-holder"
@@ -28,7 +50,6 @@ import SwimLane from "@/ui/components/swim-lane/SwimLane.vue";
 import { getValidatedPlan } from "./util";
 import Vue from "vue";
 
-//TODO: UI direction needed for the following property values
 const PADDING = 1;
 const OUTER_TEXT_PADDING = 12;
 const INNER_TEXT_PADDING = 17;
@@ -281,7 +302,9 @@ export default {
                                 exceeds: {
                                     start: this.xScale(this.viewBounds.start) > this.xScale(activity.start),
                                     end: this.xScale(this.viewBounds.end) < this.xScale(activity.end)
-                                }
+                                },
+                                start: activity.start,
+                                end: activity.end
                             },
                             textLines: textLines,
                             textStart: textStart,
@@ -339,6 +362,9 @@ export default {
                 components: {
                     SwimLane
                 },
+                provide: {
+                    openmct: this.openmct
+                },
                 data() {
                     return {
                         heading,
@@ -376,7 +402,6 @@ export default {
                 activityRows.forEach((row) => {
                     const items = activitiesByRow[row];
                     items.forEach(item => {
-                    //TODO: Don't draw the left-border of the rectangle if the activity started before viewBounds.start
                         this.plotActivity(item, parseInt(row, 10), groupSVG);
                     });
                 });
@@ -399,6 +424,9 @@ export default {
                 element.setAttributeNS(null, key, attributes[key]);
             });
         },
+        getNSAttributesForElement(element, attribute) {
+            return element.getAttributeNS(null, attribute);
+        },
         // Experimental for now - unused
         addForeignElement(svgElement, label, x, y) {
             let foreign = document.createElementNS('http://www.w3.org/2000/svg', "foreignObject");
@@ -443,6 +471,10 @@ export default {
                 fill: activity.color
             });
 
+            rectElement.addEventListener('click', (event) => {
+                this.setSelectionForActivity(event.currentTarget, activity, event.metaKey);
+            });
+
             svgElement.appendChild(rectElement);
 
             item.textLines.forEach((line, index) => {
@@ -456,6 +488,9 @@ export default {
 
                 const textNode = document.createTextNode(line);
                 textElement.appendChild(textNode);
+                textElement.addEventListener('click', (event) => {
+                    this.setSelectionForActivity(event.currentTarget, activity, event.metaKey);
+                });
                 svgElement.appendChild(textElement);
             });
             // this.addForeignElement(svgElement, activity.name, item.textStart, item.textY - LINE_HEIGHT);
@@ -482,6 +517,22 @@ export default {
             const cBrightness = ((hR * 299) + (hG * 587) + (hB * 114)) / 1000;
 
             return cBrightness > cThreshold ? "#000000" : "#ffffff";
+        },
+        setSelectionForActivity(element, activity, multiSelect) {
+            this.openmct.selection.select([{
+                element: element,
+                context: {
+                    type: 'activity',
+                    activity: activity
+                }
+            }, {
+                element: this.openmct.layout.$refs.browseObject.$el,
+                context: {
+                    item: this.domainObject,
+                    supportsMultiSelect: true
+                }
+            }], multiSelect);
+            event.stopPropagation();
         }
     }
 };

src/plugins/plan/inspector/ActivityProperty.vue

@@ -0,0 +1,52 @@
+<!--
+ Open MCT, Copyright (c) 2014-2020, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+<li class="c-inspect-properties__row">
+    <div class="c-inspect-properties__label">
+        {{ label }}
+    </div>
+    <div class="c-inspect-properties__value">
+        {{ value }}
+    </div>
+</li>
+</template>
+
+<script>
+
+export default {
+    props: {
+        label: {
+            type: String,
+            default() {
+                return '';
+            }
+        },
+        value: {
+            type: String,
+            default() {
+                return '';
+            }
+        }
+    }
+};
+</script>

src/plugins/plan/inspector/PlanActivitiesView.vue

@@ -0,0 +1,206 @@
+<!--
+ 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.
+-->
+<template>
+<div class="c-inspector__properties c-inspect-properties">
+    <plan-activity-view v-for="activity in activities"
+                        :key="activity.id"
+                        :activity="activity"
+                        :heading="heading"
+    />
+</div>
+</template>
+
+<script>
+import PlanActivityView from "./PlanActivityView.vue";
+import { getPreciseDuration } from "utils/duration";
+import uuid from 'uuid';
+
+const propertyLabels = {
+    'start': 'Start DateTime',
+    'end': 'End DateTime',
+    'duration': 'Duration',
+    'earliestStart': 'Earliest Start',
+    'latestEnd': 'Latest End',
+    'gap': 'Gap',
+    'overlap': 'Overlap',
+    'totalTime': 'Total Time'
+};
+
+export default {
+    components: {
+        PlanActivityView
+    },
+    inject: ['openmct', 'selection'],
+    data() {
+        return {
+            name: '',
+            activities: [],
+            heading: ''
+        };
+    },
+    mounted() {
+        this.setFormatters();
+        this.getPlanData(this.selection);
+        this.getActivities();
+        this.openmct.selection.on('change', this.updateSelection);
+        this.openmct.time.on('timeSystem', this.setFormatters);
+    },
+    beforeDestroy() {
+        this.openmct.selection.off('change', this.updateSelection);
+        this.openmct.time.off('timeSystem', this.setFormatters);
+    },
+    methods: {
+        setFormatters() {
+            let timeSystem = this.openmct.time.timeSystem();
+            this.timeFormatter = this.openmct.telemetry.getValueFormatter({
+                format: timeSystem.timeFormat
+            }).formatter;
+        },
+        updateSelection(newSelection) {
+            this.getPlanData(newSelection);
+            this.getActivities();
+        },
+        getPlanData(selection) {
+            this.selectedActivities = [];
+            selection.forEach((selectionItem) => {
+                if (selectionItem[0].context.type === 'activity') {
+                    const activity = selectionItem[0].context.activity;
+                    if (activity) {
+                        this.selectedActivities.push(activity);
+                    }
+                }
+            });
+        },
+        getActivities() {
+            if (this.selectedActivities.length <= 1) {
+                this.heading = 'Time';
+                this.setSingleActivityProperties();
+            } else {
+                this.heading = 'Convex Hull';
+                this.setMultipleActivityProperties();
+            }
+        },
+        setSingleActivityProperties() {
+            this.activities.splice(0);
+            this.selectedActivities.forEach((selectedActivity, index) => {
+                const activity = {
+                    id: uuid(),
+                    start: {
+                        label: propertyLabels.start,
+                        value: this.formatTime(selectedActivity.start)
+                    },
+                    end: {
+                        label: propertyLabels.end,
+                        value: this.formatTime(selectedActivity.end)
+                    },
+                    duration: {
+                        label: propertyLabels.duration,
+                        value: this.formatDuration(selectedActivity.end - selectedActivity.start)
+                    }
+                };
+                this.$set(this.activities, index, activity);
+            });
+        },
+        sortFn(a, b) {
+            const numA = parseInt(a.start, 10);
+            const numB = parseInt(b.start, 10);
+            if (numA > numB) {
+                return 1;
+            }
+
+            if (numA < numB) {
+                return -1;
+            }
+
+            return 0;
+        },
+        setMultipleActivityProperties() {
+            this.activities.splice(0);
+
+            let earliestStart;
+            let latestEnd;
+            let gap;
+            let overlap;
+
+            //Sort by start time
+            let selectedActivities = this.selectedActivities.sort(this.sortFn);
+            selectedActivities.forEach((selectedActivity, index) => {
+                if (selectedActivities.length === 2 && index > 0) {
+                    const previous = selectedActivities[index - 1];
+                    //they're on different rows so there must be overlap
+                    if (previous.end > selectedActivity.start) {
+                        overlap = previous.end - selectedActivity.start;
+                    } else if (previous.end < selectedActivity.start) {
+                        gap = selectedActivity.start - previous.end;
+                    }
+                }
+
+                if (index > 0) {
+                    earliestStart = Math.min(earliestStart, selectedActivity.start);
+                    latestEnd = Math.max(latestEnd, selectedActivity.end);
+                } else {
+                    earliestStart = selectedActivity.start;
+                    latestEnd = selectedActivity.end;
+                }
+            });
+            let totalTime = latestEnd - earliestStart;
+
+            const activity = {
+                id: uuid(),
+                'earliestStart': {
+                    label: propertyLabels.earliestStart,
+                    value: this.formatTime(earliestStart)
+                },
+                'latestEnd': {
+                    label: propertyLabels.latestEnd,
+                    value: this.formatTime(latestEnd)
+                }
+            };
+
+            if (gap) {
+                activity.gap = {
+                    label: propertyLabels.gap,
+                    value: this.formatDuration(gap)
+                };
+            } else if (overlap) {
+                activity.overlap = {
+                    label: propertyLabels.overlap,
+                    value: this.formatDuration(overlap)
+                };
+            }
+
+            activity.totalTime = {
+                label: propertyLabels.totalTime,
+                value: this.formatDuration(totalTime)
+            };
+
+            this.$set(this.activities, 0, activity);
+        },
+        formatDuration(duration) {
+            return getPreciseDuration(duration);
+        },
+        formatTime(time) {
+            return this.timeFormatter.format(time);
+        }
+    }
+};
+</script>

src/plugins/plan/inspector/PlanActivityView.vue

@@ -0,0 +1,84 @@
+<!--
+ Open MCT, Copyright (c) 2014-2020, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+<div v-if="timeProperties.length"
+     class="u-contents"
+>
+    <div class="c-inspect-properties__header">
+        {{ heading }}
+    </div>
+    <ul v-for="timeProperty in timeProperties"
+        :key="timeProperty.id"
+        class="c-inspect-properties__section"
+    >
+        <activity-property :label="timeProperty.label"
+                           :value="timeProperty.value"
+        />
+    </ul>
+</div>
+</template>
+
+<script>
+import ActivityProperty from './ActivityProperty.vue';
+import uuid from 'uuid';
+
+export default {
+    components: {
+        ActivityProperty
+    },
+    props: {
+        activity: {
+            type: Object,
+            required: true
+        },
+        heading: {
+            type: String,
+            required: true
+        }
+    },
+    data() {
+        return {
+            timeProperties: []
+        };
+    },
+    mounted() {
+        this.setProperties();
+    },
+    methods: {
+        setProperties() {
+            Object.keys(this.activity).forEach((key) => {
+                if (this.activity[key].label) {
+                    const label = this.activity[key].label;
+                    const value = String(this.activity[key].value);
+
+                    this.$set(this.timeProperties, this.timeProperties.length, {
+                        id: uuid(),
+                        label,
+                        value
+                    });
+                }
+            });
+        }
+    }
+};
+</script>

src/plugins/plan/inspector/PlanInspectorViewProvider.js

@@ -0,0 +1,69 @@
+/*****************************************************************************
+ * 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 PlanActivitiesView from "./PlanActivitiesView.vue";
+import Vue from 'vue';
+
+export default function PlanInspectorViewProvider(openmct) {
+    return {
+        key: 'plan-inspector',
+        name: 'Plan Inspector View',
+        canView: function (selection) {
+            if (selection.length === 0 || selection[0].length === 0) {
+                return false;
+            }
+
+            let context = selection[0][0].context;
+
+            return context
+                && context.type === 'activity';
+        },
+        view: function (selection) {
+            let component;
+
+            return {
+                show: function (element) {
+                    component = new Vue({
+                        el: element,
+                        components: {
+                            PlanActivitiesView: PlanActivitiesView
+                        },
+                        provide: {
+                            openmct,
+                            selection: selection
+                        },
+                        template: '<plan-activities-view></plan-activities-view>'
+                    });
+                },
+                destroy: function () {
+                    if (component) {
+                        component.$destroy();
+                        component = undefined;
+                    }
+                }
+            };
+        },
+        priority: function () {
+            return 1;
+        }
+    };
+}

src/plugins/plan/plan.scss

@@ -1,3 +1,25 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+
 .c-plan {
   svg {
     text-rendering: geometricPrecision;

src/plugins/plan/plugin.js

@@ -21,6 +21,7 @@
  *****************************************************************************/
 
 import PlanViewProvider from './PlanViewProvider';
+import PlanInspectorViewProvider from "./inspector/PlanInspectorViewProvider";
 
 export default function () {
     return function install(openmct) {
@@ -44,6 +45,7 @@ export default function () {
             }
         });
         openmct.objectViews.addProvider(new PlanViewProvider(openmct));
+        openmct.inspectorViews.addProvider(new PlanInspectorViewProvider(openmct));
     };
 }
 

src/plugins/plan/pluginSpec.js

@@ -29,9 +29,10 @@ describe('the plugin', function () {
     let element;
     let child;
     let openmct;
+    let appHolder;
 
     beforeEach((done) => {
-        const appHolder = document.createElement('div');
+        appHolder = document.createElement('div');
         appHolder.style.width = '640px';
         appHolder.style.height = '480px';
 
@@ -103,7 +104,7 @@ describe('the plugin', function () {
         ];
         let planView;
 
-        beforeEach((done) => {
+        beforeEach(() => {
             planDomainObject = {
                 identifier: {
                     key: 'test-object',
@@ -140,9 +141,7 @@ describe('the plugin', function () {
             let view = planView.view(planDomainObject, mockObjectPath);
             view.show(child, true);
 
-            return Vue.nextTick().then(() => {
-                done();
-            });
+            return Vue.nextTick();
         });
 
         it('loads activities into the view', () => {