Merge branch 'master' into vue-3

Bumps [eslint-plugin-vue](https://github.com/vuejs/eslint-plugin-vue) from 9.6.0 to 9.7.0.
- [Release notes](https://github.com/vuejs/eslint-plugin-vue/releases)
- [Commits](https://github.com/vuejs/eslint-plugin-vue/compare/v9.6.0...v9.7.0)

---
updated-dependencies:
- dependency-name: eslint-plugin-vue
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

.github/codeql/codeql-config.yml

@@ -0,0 +1 @@
+name: 'Custom CodeQL config'

.github/dependabot.yml

@@ -13,14 +13,14 @@ updates:
       - "pr:daveit"
       - "pr:platform"
     ignore:
-        #We have to source the container which is not detected by Dependabot
-      - dependency-name: "@playwright/test"
-        #Lots of noise in these type patch releases.
-      - dependency-name: "@babel/eslint-parser"
+      - dependency-name: "@playwright/test" #We have to source the playwright container which is not detected by Dependabot
+      - dependency-name: "playwright-core" #We have to source the playwright container which is not detected by Dependabot
+      - dependency-name: "@babel/eslint-parser" #Lots of noise in these type patch releases.
+        update-types: ["version-update:semver-patch"] 
+      - dependency-name: "eslint-plugin-vue" #Lots of noise in these type patch releases.  
         update-types: ["version-update:semver-patch"]
-      - dependency-name: "eslint-plugin-vue"
+      - dependency-name: "babel-loader"
         update-types: ["version-update:semver-patch"]
-
   - package-ecosystem: "github-actions"
     directory: "/"
     schedule:

.github/workflows/codeql-analysis.yml

@@ -1,11 +1,10 @@
-
-name: "CodeQL"
+name: 'CodeQL'
 
 on:
   push:
-    branches: [ master ]
+    branches: [master, 'release/*']
   pull_request:
-    branches: [ master ]
+    branches: [master, 'release/*']
     paths-ignore:
       - '**/*Spec.js'
       - '**/*.md'
@@ -27,17 +26,19 @@ jobs:
       security-events: write
 
     steps:
-    - name: Checkout repository
-      uses: actions/checkout@v3
+      - name: Checkout repository
+        uses: actions/checkout@v3
 
-    # Initializes the CodeQL tools for scanning.
-    - name: Initialize CodeQL
-      uses: github/codeql-action/init@v2
-      with:
-        languages: javascript
+      # Initializes the CodeQL tools for scanning.
+      - name: Initialize CodeQL
+        uses: github/codeql-action/init@v2
+        with:
+          config-file: ./.github/codeql/codeql-config.yml
+          languages: javascript
+          queries: security-and-quality
 
-    - name: Autobuild
-      uses: github/codeql-action/autobuild@v2
+      - name: Autobuild
+        uses: github/codeql-action/autobuild@v2
 
-    - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v2
+      - name: Perform CodeQL Analysis
+        uses: github/codeql-action/analyze@v2

.github/workflows/lighthouse.yml

@@ -1,98 +0,0 @@
-name: lighthouse
-on:
-  workflow_dispatch:
-    inputs: 
-      version:
-        description: 'Which branch do you want to test?' # Limited to branch for now
-        required: false
-        default: 'master'
-  pull_request:
-    types: 
-      - labeled
-jobs:
-  lighthouse-pr:
-    if: ${{ github.event.label.name == 'pr:lighthouse' }}
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout Master for Baseline
-        uses: actions/checkout@v3
-        with:
-          ref: master #explicitly checkout master for baseline
-      - name: Install Node 16
-        uses: actions/setup-node@v3
-        with:
-          node-version: '16'
-      - name: Cache node modules
-        uses: actions/cache@v2
-        env:
-          cache-name: cache-node-modules
-        with:
-          path: ~/.npm
-          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package.json') }}
-          restore-keys: |
-            ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package.json') }}
-      - name: npm install with lighthouse cli 
-        run: npm install && npm install -g @lhci/cli
-      - name: Run lhci against master to generate baseline and ignore exit codes
-        run: lhci autorun || true
-      - name: Perform clean checkout of PR
-        uses: actions/checkout@v3
-        with:
-          clean: true
-      - name: Install Node version which is compatible with PR
-        uses: actions/setup-node@v3
-      - name: npm install with lighthouse cli 
-        run: npm install && npm install -g @lhci/cli
-      - name: Run lhci with PR
-        run: lhci autorun
-        env:
-          LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
-  lighthouse-nightly:
-    if: ${{ github.event.schedule }}
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - name: Install Node 16
-        uses: actions/setup-node@v3
-        with:
-          node-version: '16'
-      - name: Cache node modules
-        uses: actions/cache@v2
-        env:
-          cache-name: cache-node-modules
-        with:
-          path: ~/.npm
-          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package.json') }}
-          restore-keys: |
-            ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package.json') }}
-      - name: npm install with lighthouse cli 
-        run: npm install && npm install -g @lhci/cli
-      - name: Run lhci against master to generate baseline
-        run: lhci autorun
-        env:
-          LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
-  lighthouse-dispatch:
-    if: ${{ github.event.workflow_dispatch }}
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-        with:
-          ref: ${{ github.event.inputs.version }}
-      - name: Install Node 14
-        uses: actions/setup-node@v3
-        with:
-          node-version: '16'
-      - name: Cache node modules
-        uses: actions/cache@v3
-        env:
-          cache-name: cache-node-modules
-        with:
-          path: ~/.npm
-          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package.json') }}
-          restore-keys: |
-            ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package.json') }}
-      - name: npm install with lighthouse cli 
-        run: npm install && npm install -g @lhci/cli
-      - name: Run lhci against master to generate baseline
-        run: lhci autorun
-        

README.md

@@ -100,7 +100,7 @@ To run the performance tests:
 The test suite is configured to all tests localed in `e2e/tests/` ending in `*.e2e.spec.js`. For more about the e2e test suite, please see the [README](./e2e/README.md)
 
 ### Security Tests
-Each commit is analyzed for known security vulnerabilities using [CodeQL](https://codeql.github.com/docs/codeql-language-guides/codeql-library-for-javascript/) and our overall security report is available on [LGTM](https://lgtm.com/projects/g/nasa/openmct/)
+Each commit is analyzed for known security vulnerabilities using [CodeQL](https://codeql.github.com/docs/codeql-language-guides/codeql-library-for-javascript/) and our overall security report is available on [LGTM](https://lgtm.com/projects/g/nasa/openmct/). The list of CWE coverage items is avaiable in the [CodeQL docs](https://codeql.github.com/codeql-query-help/javascript-cwe/). The CodeQL workflow is specified in the [CodeQL analysis file](./.github/workflows/codeql-analysis.yml) and the custom [CodeQL config](./.github/codeql/codeql-config.yml).
 
 ### Test Reporting and Code Coverage
 

e2e/appActions.js

@@ -225,15 +225,14 @@ async function getHashUrlToDomainObject(page, uuid) {
 }
 
 /**
- * Utilizes the OpenMCT API to detect if the given object has an active transaction (is in Edit mode).
+ * Utilizes the OpenMCT API to detect if the UI is in Edit mode.
  * @private
  * @param {import('@playwright/test').Page} page
- * @param {string | import('../src/api/objects/ObjectAPI').Identifier} identifier
- * @return {Promise<boolean>} true if the object has an active transaction, false otherwise
+ * @return {Promise<boolean>} true if the Open MCT is in Edit Mode
  */
 async function _isInEditMode(page, identifier) {
     // eslint-disable-next-line no-return-await
-    return await page.evaluate((objectIdentifier) => window.openmct.objects.isTransactionActive(objectIdentifier), identifier);
+    return await page.evaluate(() => window.openmct.editor.isEditing());
 }
 
 /**

e2e/tests/functional/plugins/notebook/notebookWithCouchDB.e2e.spec.js

@@ -27,7 +27,7 @@ This test suite is dedicated to tests which verify the basic operations surround
 const { test, expect } = require('../../../../baseFixtures');
 const { createDomainObjectWithDefaults } = require('../../../../appActions');
 
-test.describe('Notebook Network Request Inspection @couchdb', () => {
+test.describe('Notebook Tests with CouchDB @couchdb', () => {
     let testNotebook;
     test.beforeEach(async ({ page }) => {
         //Navigate to baseURL
@@ -221,6 +221,45 @@ test.describe('Notebook Network Request Inspection @couchdb', () => {
 
         expect(filterNonFetchRequests(addingNotebookElementsRequests).length).toBeLessThanOrEqual(4);
     });
+
+    test('Search tests', async ({ page }) => {
+        test.info().annotations.push({
+            type: 'issue',
+            description: 'https://github.com/akhenry/openmct-yamcs/issues/69'
+        });
+        await page.locator('text=To start a new entry, click here or drag and drop any object').click();
+        await page.locator('[aria-label="Notebook Entry Input"]').click();
+        await page.locator('[aria-label="Notebook Entry Input"]').fill(`First Entry`);
+        await page.locator('[aria-label="Notebook Entry Input"]').press('Enter');
+
+        // Add three tags
+        await page.hover(`button:has-text("Add Tag")`);
+        await page.locator(`button:has-text("Add Tag")`).click();
+        await page.locator('[placeholder="Type to select tag"]').click();
+        await page.locator('[aria-label="Autocomplete Options"] >> text=Science').click();
+        await page.waitForSelector('[aria-label="Tag"]:has-text("Science")');
+
+        await page.hover(`button:has-text("Add Tag")`);
+        await page.locator(`button:has-text("Add Tag")`).click();
+        await page.locator('[placeholder="Type to select tag"]').click();
+        await page.locator('[aria-label="Autocomplete Options"] >> text=Drilling').click();
+        await page.waitForSelector('[aria-label="Tag"]:has-text("Drilling")');
+
+        await page.hover(`button:has-text("Add Tag")`);
+        await page.locator(`button:has-text("Add Tag")`).click();
+        await page.locator('[placeholder="Type to select tag"]').click();
+        await page.locator('[aria-label="Autocomplete Options"] >> text=Driving').click();
+        await page.waitForSelector('[aria-label="Tag"]:has-text("Driving")');
+
+        await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').click();
+        await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').fill('Sc');
+        await expect(page.locator('[aria-label="Search Result"]').first()).toContainText("Science");
+        await expect(page.locator('[aria-label="Search Result"]').first()).not.toContainText("Driving");
+
+        await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').click();
+        await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').fill('Xq');
+        await expect(page.locator('text=No results found')).toBeVisible();
+    });
 });
 
 // Try to reduce indeterminism of browser requests by only returning fetch requests.

e2e/tests/functional/plugins/notebook/tags.e2e.spec.js

@@ -39,7 +39,7 @@ async function createNotebookAndEntry(page, iterations = 1) {
     createDomainObjectWithDefaults(page, { type: 'Notebook' });
 
     for (let iteration = 0; iteration < iterations; iteration++) {
-        // Click text=To start a new entry, click here or drag and drop any object
+        // Create an entry
         await page.locator('text=To start a new entry, click here or drag and drop any object').click();
         const entryLocator = `[aria-label="Notebook Entry Input"] >> nth = ${iteration}`;
         await page.locator(entryLocator).click();
@@ -116,7 +116,7 @@ test.describe('Tagging in Notebooks @addInit', () => {
 
         await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').click();
         await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').fill('Xq');
-        await expect(page.locator('[aria-label="Search Result"]')).toBeHidden();
+        await expect(page.locator('text=No results found')).toBeVisible();
     });
 
     test('Can delete tags', async ({ page }) => {
@@ -133,6 +133,27 @@ test.describe('Tagging in Notebooks @addInit', () => {
         await expect(page.locator('[aria-label="Search Result"]')).not.toContainText("Driving");
     });
 
+    test('Can delete entries without tags', async ({ page }) => {
+        test.info().annotations.push({
+            type: 'issue',
+            description: 'https://github.com/nasa/openmct/issues/5823'
+        });
+
+        await createNotebookEntryAndTags(page);
+
+        await page.locator('text=To start a new entry, click here or drag and drop any object').click();
+        const entryLocator = `[aria-label="Notebook Entry Input"] >> nth = 1`;
+        await page.locator(entryLocator).click();
+        await page.locator(entryLocator).fill(`An entry without tags`);
+        await page.locator('[aria-label="Notebook Entry Input"] >> nth=1').press('Enter');
+
+        await page.hover('[aria-label="Notebook Entry Input"] >> nth=1');
+        await page.locator('button[title="Delete this entry"]').last().click();
+        await expect(page.locator('text=This action will permanently delete this entry. Do you wish to continue?')).toBeVisible();
+        await page.locator('button:has-text("Ok")').click();
+        await expect(page.locator('text=This action will permanently delete this entry. Do you wish to continue?')).toBeHidden();
+    });
+
     test('Can delete objects with tags and neither return in search', async ({ page }) => {
         await createNotebookEntryAndTags(page);
         // Delete Notebook

openmct.js

@@ -30,8 +30,53 @@ if (document.currentScript) {
     }
 }
 
+/**
+ * @typedef {object} BuildInfo
+ * @property {string} version
+ * @property {string} buildDate
+ * @property {string} revision
+ * @property {string} branch
+ */
+
+/**
+ * @typedef {object} OpenMCT
+ * @property {BuildInfo} buildInfo
+ * @property {*} selection
+ * @property {import('./src/api/time/TimeAPI').default} time
+ * @property {import('./src/api/composition/CompositionAPI').default} composition
+ * @property {*} objectViews
+ * @property {*} inspectorViews
+ * @property {*} propertyEditors
+ * @property {*} toolbars
+ * @property {*} types
+ * @property {import('./src/api/objects/ObjectAPI').default} objects
+ * @property {import('./src/api/telemetry/TelemetryAPI').default} telemetry
+ * @property {import('./src/api/indicators/IndicatorAPI').default} indicators
+ * @property {import('./src/api/user/UserAPI').default} user
+ * @property {import('./src/api/notifications/NotificationAPI').default} notifications
+ * @property {import('./src/api/Editor').default} editor
+ * @property {import('./src/api/overlays/OverlayAPI')} overlays
+ * @property {import('./src/api/menu/MenuAPI').default} menus
+ * @property {import('./src/api/actions/ActionsAPI').default} actions
+ * @property {import('./src/api/status/StatusAPI').default} status
+ * @property {*} priority
+ * @property {import('./src/ui/router/ApplicationRouter')} router
+ * @property {import('./src/api/faultmanagement/FaultManagementAPI').default} faults
+ * @property {import('./src/api/forms/FormsAPI').default} forms
+ * @property {import('./src/api/Branding').default} branding
+ * @property {import('./src/api/annotation/AnnotationAPI').default} annotation
+ * @property {{(plugin: OpenMCTPlugin) => void}} install
+ * @property {{() => string}} getAssetPath
+ * @property {{(domElement: HTMLElement, isHeadlessMode: boolean) => void}} start
+ * @property {{() => void}} startHeadless
+ * @property {{() => void}} destroy
+ * @property {OpenMCTPlugin[]} plugins
+ * @property {OpenMCTComponent[]} components
+ */
+
 const MCT = require('./src/MCT');
 
+/** @type {OpenMCT} */
 const openmct = new MCT();
 
 module.exports = openmct;

package.json

@@ -1,19 +1,16 @@
 {
   "name": "openmct",
-  "version": "2.1.1-SNAPSHOT",
+  "version": "2.1.3-SNAPSHOT",
   "description": "The Open MCT core platform",
   "devDependencies": {
     "@babel/eslint-parser": "7.18.9",
     "@braintree/sanitize-url": "6.0.0",
-    "@percy/cli": "1.10.3",
+    "@percy/cli": "1.11.0",
     "@percy/playwright": "1.0.4",
     "@playwright/test": "1.25.2",
-    "@types/eventemitter3": "^1.0.0",
-    "@types/jasmine": "^4.0.1",
-    "@types/karma": "^6.3.2",
-    "@types/lodash": "^4.14.178",
-    "@types/mocha": "^9.1.0",
-    "babel-loader": "8.2.5",
+    "@types/jasmine": "4.3.0",
+    "@types/lodash": "4.14.186",
+    "babel-loader": "9.0.0",
     "babel-plugin-istanbul": "6.1.1",
     "codecov": "3.8.3",
     "comma-separated-values": "3.6.4",
@@ -22,10 +19,10 @@
     "d3-axis": "3.0.0",
     "d3-scale": "3.3.0",
     "d3-selection": "3.0.0",
-    "eslint": "8.24.0",
+    "eslint": "8.26.0",
     "eslint-plugin-compat": "4.0.2",
     "eslint-plugin-playwright": "0.11.2",
-    "eslint-plugin-vue": "9.3.0",
+    "eslint-plugin-vue": "9.7.0",
     "eslint-plugin-you-dont-need-lodash-underscore": "6.12.0",
     "eventemitter3": "1.2.0",
     "file-saver": "2.0.5",
@@ -51,20 +48,22 @@
     "moment-timezone": "0.5.37",
     "nyc": "15.1.0",
     "painterro": "1.2.78",
-    "playwright-core": "1.26.1",
+    "playwright-core": "1.25.2",
     "plotly.js-basic-dist": "2.14.0",
     "plotly.js-gl2d-dist": "2.14.0",
     "printj": "1.3.1",
     "resolve-url-loader": "5.0.0",
     "sass": "1.55.0",
     "sass-loader": "13.0.2",
-    "sinon": "14.0.0",
+    "sinon": "14.0.1",
     "style-loader": "^3.3.1",
+    "typescript": "4.8.4",
     "uuid": "9.0.0",
-    "vue": "2.6.14",
+    "vue": "^3.1.0",
+    "@vue/compat": "^3.1.0",
     "vue-eslint-parser": "9.1.0",
-    "vue-loader": "15.9.8",
-    "vue-template-compiler": "2.6.14",
+    "vue-loader": "^16.0.0",
+    "@vue/compiler-sfc": "^3.1.0",
     "webpack": "5.74.0",
     "webpack-cli": "4.10.0",
     "webpack-dev-server": "4.11.1",
@@ -99,7 +98,7 @@
     "cov:e2e:full:publish": "codecov --disable=gcov -f ./coverage/e2e/lcov.info -F e2e-full",
     "cov:e2e:stable:publish": "codecov --disable=gcov -f ./coverage/e2e/lcov.info -F e2e-stable",
     "cov:unit:publish": "codecov --disable=gcov -f ./coverage/unit/lcov.info -F unit",
-    "prepare": "npm run build:prod"
+    "prepare": "npm run build:prod && npx tsc"
   },
   "repository": {
     "type": "git",

src/MCT.js

@@ -19,7 +19,7 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-
+/* eslint-disable no-undef */
 define([
     'EventEmitter',
     './api/api',
@@ -81,13 +81,11 @@ define([
     /**
      * The Open MCT application. This may be configured by installing plugins
      * or registering extensions before the application is started.
-     * @class MCT
+     * @constructor
      * @memberof module:openmct
-     * @augments {EventEmitter}
      */
     function MCT() {
         EventEmitter.call(this);
-        /* eslint-disable no-undef */
         this.buildInfo = {
             version: __OPENMCT_VERSION__,
             buildDate: __OPENMCT_BUILD_DATE__,
@@ -101,7 +99,7 @@ define([
             * Tracks current selection state of the application.
             * @private
             */
-            ['selection', () => new Selection(this)],
+            ['selection', () => new Selection.default(this)],
 
             /**
              * MCT's time conductor, which may be used to synchronize view contents
@@ -125,7 +123,7 @@ define([
              * @memberof module:openmct.MCT#
              * @name composition
              */
-            ['composition', () => new api.CompositionAPI(this)],
+            ['composition', () => new api.CompositionAPI.default(this)],
 
             /**
              * Registry for views of domain objects which should appear in the

src/api/Branding.js

@@ -23,8 +23,7 @@
 let brandingOptions = {};
 
 /**
- * @typedef {Object} BrandingOptions
- * @memberOf openmct/branding
+ * @typedef {object} BrandingOptions
  * @property {string} smallLogoImage URL to the image to use as the applications logo.
  * This logo will appear on every screen and when clicked will launch the about dialog.
  * @property {string} aboutHtml Custom content for the about screen. When defined the

src/api/Editor.js

@@ -63,10 +63,9 @@ export default class Editor extends EventEmitter {
             .then(() => {
                 this.editing = false;
                 this.emit('isEditing', false);
+                this.openmct.objects.endTransaction();
             }).catch(error => {
                 throw error;
-            }).finally(() => {
-                this.openmct.objects.endTransaction();
             });
     }
 

src/api/EditorSpec.js

@@ -0,0 +1,80 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2022, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import {
+    createOpenMct, resetApplicationState
+} from '../utils/testing';
+
+describe('The Editor API', () => {
+    let openmct;
+
+    beforeEach((done) => {
+        openmct = createOpenMct();
+        openmct.on('start', done);
+
+        spyOn(openmct.objects, 'endTransaction');
+
+        openmct.startHeadless();
+    });
+
+    afterEach(() => {
+        return resetApplicationState(openmct);
+    });
+
+    it('opens a transaction on edit', () => {
+        expect(
+            openmct.objects.isTransactionActive()
+        ).toBeFalse();
+        openmct.editor.edit();
+        expect(
+            openmct.objects.isTransactionActive()
+        ).toBeTrue();
+    });
+
+    it('closes an open transaction on successful save', async () => {
+        spyOn(openmct.objects, 'getActiveTransaction')
+            .and.returnValue({
+                commit: () => Promise.resolve(true)
+            });
+
+        openmct.editor.edit();
+        await openmct.editor.save();
+
+        expect(
+            openmct.objects.endTransaction
+        ).toHaveBeenCalled();
+    });
+
+    it('does not close an open transaction on failed save', async () => {
+        spyOn(openmct.objects, 'getActiveTransaction')
+            .and.returnValue({
+                commit: () => Promise.reject()
+            });
+
+        openmct.editor.edit();
+        await openmct.editor.save().catch(() => {});
+
+        expect(
+            openmct.objects.endTransaction
+        ).not.toHaveBeenCalled();
+    });
+});

src/api/annotation/AnnotationAPI.js

@@ -346,6 +346,10 @@ export default class AnnotationAPI extends EventEmitter {
     */
     async searchForTags(query, abortController) {
         const matchingTagKeys = this.#getMatchingTags(query);
+        if (!matchingTagKeys.length) {
+            return [];
+        }
+
         const searchResults = (await Promise.all(this.openmct.objects.search(matchingTagKeys, abortController, this.openmct.objects.SEARCH_TYPES.TAGS))).flat();
         const filteredDeletedResults = searchResults.filter((result) => {
             return !(result._deleted);

src/api/annotation/AnnotationAPISpec.js

@@ -94,7 +94,6 @@ describe("The Annotation API", () => {
         openmct.startHeadless();
     });
     afterEach(async () => {
-        openmct.objects.providers = {};
         await resetApplicationState(openmct);
     });
     it("is defined", () => {
@@ -185,5 +184,10 @@ describe("The Annotation API", () => {
             expect(results).toBeDefined();
             expect(results.length).toEqual(1);
         });
+        it("returns no tags for empty search", async () => {
+            const results = await openmct.annotation.searchForTags('q');
+            expect(results).toBeDefined();
+            expect(results.length).toEqual(0);
+        });
     });
 });

src/api/api.js

@@ -37,7 +37,9 @@ define([
     './types/TypeRegistry',
     './user/UserAPI',
     './annotation/AnnotationAPI'
-], function (
+],
+
+function (
     ActionsAPI,
     CompositionAPI,
     EditorAPI,

src/api/composition/CompositionAPI.js

@@ -20,34 +20,41 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define([
-    'lodash',
-    'EventEmitter',
-    './DefaultCompositionProvider',
-    './CompositionCollection'
-], function (
-    _,
-    EventEmitter,
-    DefaultCompositionProvider,
-    CompositionCollection
-) {
+import DefaultCompositionProvider from './DefaultCompositionProvider';
+import CompositionCollection from './CompositionCollection';
+
+/**
+ * @typedef {import('./CompositionProvider').default} CompositionProvider
+ */
+
+/**
+ * @typedef {import('../objects/ObjectAPI').DomainObject} DomainObject
+ */
+
+/**
+ * @typedef {import('../../../openmct').OpenMCT} OpenMCT
+ */
+
+/**
+ * An interface for interacting with the composition of domain objects.
+ * The composition of a domain object is the list of other domain objects
+ * it "contains" (for instance, that should be displayed beneath it
+ * in the tree.)
+ * @constructor
+ */
+export default class CompositionAPI {
     /**
-     * An interface for interacting with the composition of domain objects.
-     * The composition of a domain object is the list of other domain objects
-     * it "contains" (for instance, that should be displayed beneath it
-     * in the tree.)
-     *
-     * @interface CompositionAPI
-     * @returns {module:openmct.CompositionCollection}
-     * @memberof module:openmct
+     * @param {OpenMCT} publicAPI
      */
-    function CompositionAPI(publicAPI) {
+    constructor(publicAPI) {
+        /** @type {CompositionProvider[]} */
         this.registry = [];
+        /** @type {CompositionPolicy[]} */
         this.policies = [];
         this.addProvider(new DefaultCompositionProvider(publicAPI, this));
+        /** @type {OpenMCT} */
         this.publicAPI = publicAPI;
     }
-
     /**
      * Add a composition provider.
      *
@@ -55,21 +62,19 @@ define([
      * behavior for certain domain objects.
      *
      * @method addProvider
-     * @param {module:openmct.CompositionProvider} provider the provider to add
-     * @memberof module:openmct.CompositionAPI#
+     * @param {CompositionProvider} provider the provider to add
      */
-    CompositionAPI.prototype.addProvider = function (provider) {
+    addProvider(provider) {
         this.registry.unshift(provider);
-    };
-
+    }
     /**
      * Retrieve the composition (if any) of this domain object.
      *
      * @method get
-     * @returns {module:openmct.CompositionCollection}
-     * @memberof module:openmct.CompositionAPI#
+     * @param {DomainObject} domainObject
+     * @returns {CompositionCollection}
      */
-    CompositionAPI.prototype.get = function (domainObject) {
+    get(domainObject) {
         const provider = this.registry.find(p => {
             return p.appliesTo(domainObject);
         });
@@ -79,8 +84,7 @@ define([
         }
 
         return new CompositionCollection(domainObject, provider, this.publicAPI);
-    };
-
+    }
     /**
      * A composition policy is a function which either allows or disallows
      * placing one object in another's composition.
@@ -90,52 +94,51 @@ define([
      * generally be written to return true in the default case.
      *
      * @callback CompositionPolicy
-     * @memberof module:openmct.CompositionAPI~
-     * @param {module:openmct.DomainObject} containingObject the object which
+     * @param {DomainObject} containingObject the object which
      *        would act as a container
-     * @param {module:openmct.DomainObject} containedObject the object which
+     * @param {DomainObject} containedObject the object which
      *        would be contained
      * @returns {boolean} false if this composition should be disallowed
      */
-
     /**
      * Add a composition policy. Composition policies may disallow domain
      * objects from containing other domain objects.
      *
      * @method addPolicy
-     * @param {module:openmct.CompositionAPI~CompositionPolicy} policy
+     * @param {CompositionPolicy} policy
      *        the policy to add
-     * @memberof module:openmct.CompositionAPI#
      */
-    CompositionAPI.prototype.addPolicy = function (policy) {
+    addPolicy(policy) {
         this.policies.push(policy);
-    };
-
+    }
     /**
      * Check whether or not a domain object is allowed to contain another
      * domain object.
      *
      * @private
      * @method checkPolicy
-     * @param {module:openmct.DomainObject} containingObject the object which
+     * @param {DomainObject} container the object which
      *        would act as a container
-     * @param {module:openmct.DomainObject} containedObject the object which
+     * @param {DomainObject} containee the object which
      *        would be contained
      * @returns {boolean} false if this composition should be disallowed
-
-     * @param {module:openmct.CompositionAPI~CompositionPolicy} policy
+     * @param {CompositionPolicy} policy
      *        the policy to add
-     * @memberof module:openmct.CompositionAPI#
      */
-    CompositionAPI.prototype.checkPolicy = function (container, containee) {
+    checkPolicy(container, containee) {
         return this.policies.every(function (policy) {
             return policy(container, containee);
         });
-    };
+    }
 
-    CompositionAPI.prototype.supportsComposition = function (domainObject) {
+    /**
+     * Check whether or not a domainObject supports composition
+     *
+     * @param {DomainObject} domainObject
+     * @returns {boolean} true if the domainObject supports composition
+     */
+    supportsComposition(domainObject) {
         return this.get(domainObject) !== undefined;
-    };
+    }
+}
 
-    return CompositionAPI;
-});

src/api/composition/CompositionAPISpec.js

@@ -1,325 +1,319 @@
-define([
-    './CompositionAPI',
-    './CompositionCollection'
-], function (
-    CompositionAPI,
-    CompositionCollection
-) {
+import CompositionAPI from './CompositionAPI';
+import CompositionCollection from './CompositionCollection';
 
-    describe('The Composition API', function () {
-        let publicAPI;
-        let compositionAPI;
-        let topicService;
-        let mutationTopic;
+describe('The Composition API', function () {
+    let publicAPI;
+    let compositionAPI;
+    let topicService;
+    let mutationTopic;
+
+    beforeEach(function () {
+
+        mutationTopic = jasmine.createSpyObj('mutationTopic', [
+            'listen'
+        ]);
+        topicService = jasmine.createSpy('topicService');
+        topicService.and.returnValue(mutationTopic);
+        publicAPI = {};
+        publicAPI.objects = jasmine.createSpyObj('ObjectAPI', [
+            'get',
+            'mutate',
+            'observe',
+            'areIdsEqual'
+        ]);
+
+        publicAPI.objects.areIdsEqual.and.callFake(function (id1, id2) {
+            return id1.namespace === id2.namespace && id1.key === id2.key;
+        });
+
+        publicAPI.composition = jasmine.createSpyObj('CompositionAPI', [
+            'checkPolicy'
+        ]);
+        publicAPI.composition.checkPolicy.and.returnValue(true);
+
+        publicAPI.objects.eventEmitter = jasmine.createSpyObj('eventemitter', [
+            'on'
+        ]);
+        publicAPI.objects.get.and.callFake(function (identifier) {
+            return Promise.resolve({identifier: identifier});
+        });
+        publicAPI.$injector = jasmine.createSpyObj('$injector', [
+            'get'
+        ]);
+        publicAPI.$injector.get.and.returnValue(topicService);
+        compositionAPI = new CompositionAPI(publicAPI);
+    });
+
+    it('returns falsy if an object does not support composition', function () {
+        expect(compositionAPI.get({})).toBeFalsy();
+    });
+
+    describe('default composition', function () {
+        let domainObject;
+        let composition;
 
         beforeEach(function () {
-
-            mutationTopic = jasmine.createSpyObj('mutationTopic', [
-                'listen'
-            ]);
-            topicService = jasmine.createSpy('topicService');
-            topicService.and.returnValue(mutationTopic);
-            publicAPI = {};
-            publicAPI.objects = jasmine.createSpyObj('ObjectAPI', [
-                'get',
-                'mutate',
-                'observe',
-                'areIdsEqual'
-            ]);
-
-            publicAPI.objects.areIdsEqual.and.callFake(function (id1, id2) {
-                return id1.namespace === id2.namespace && id1.key === id2.key;
-            });
-
-            publicAPI.composition = jasmine.createSpyObj('CompositionAPI', [
-                'checkPolicy'
-            ]);
-            publicAPI.composition.checkPolicy.and.returnValue(true);
-
-            publicAPI.objects.eventEmitter = jasmine.createSpyObj('eventemitter', [
-                'on'
-            ]);
-            publicAPI.objects.get.and.callFake(function (identifier) {
-                return Promise.resolve({identifier: identifier});
-            });
-            publicAPI.$injector = jasmine.createSpyObj('$injector', [
-                'get'
-            ]);
-            publicAPI.$injector.get.and.returnValue(topicService);
-            compositionAPI = new CompositionAPI(publicAPI);
+            domainObject = {
+                name: 'test folder',
+                identifier: {
+                    namespace: 'test',
+                    key: '1'
+                },
+                composition: [
+                    {
+                        namespace: 'test',
+                        key: 'a'
+                    },
+                    {
+                        namespace: 'test',
+                        key: 'b'
+                    },
+                    {
+                        namespace: 'test',
+                        key: 'c'
+                    }
+                ]
+            };
+            composition = compositionAPI.get(domainObject);
         });
 
-        it('returns falsy if an object does not support composition', function () {
-            expect(compositionAPI.get({})).toBeFalsy();
+        it('returns composition collection', function () {
+            expect(composition).toBeDefined();
+            expect(composition).toEqual(jasmine.any(CompositionCollection));
         });
 
-        describe('default composition', function () {
-            let domainObject;
-            let composition;
+        it('correctly reflects composability', function () {
+            expect(compositionAPI.supportsComposition(domainObject)).toBe(true);
+            delete domainObject.composition;
+            expect(compositionAPI.supportsComposition(domainObject)).toBe(false);
+        });
 
-            beforeEach(function () {
-                domainObject = {
-                    name: 'test folder',
+        it('loads composition from domain object', function () {
+            const listener = jasmine.createSpy('addListener');
+            composition.on('add', listener);
+
+            return composition.load().then(function () {
+                expect(listener.calls.count()).toBe(3);
+                expect(listener).toHaveBeenCalledWith({
                     identifier: {
                         namespace: 'test',
-                        key: '1'
-                    },
-                    composition: [
-                        {
-                            namespace: 'test',
-                            key: 'a'
-                        },
-                        {
-                            namespace: 'test',
-                            key: 'b'
-                        },
-                        {
-                            namespace: 'test',
-                            key: 'c'
-                        }
-                    ]
-                };
-                composition = compositionAPI.get(domainObject);
-            });
-
-            it('returns composition collection', function () {
-                expect(composition).toBeDefined();
-                expect(composition).toEqual(jasmine.any(CompositionCollection));
-            });
-
-            it('correctly reflects composability', function () {
-                expect(compositionAPI.supportsComposition(domainObject)).toBe(true);
-                delete domainObject.composition;
-                expect(compositionAPI.supportsComposition(domainObject)).toBe(false);
-            });
-
-            it('loads composition from domain object', function () {
-                const listener = jasmine.createSpy('addListener');
-                composition.on('add', listener);
-
-                return composition.load().then(function () {
-                    expect(listener.calls.count()).toBe(3);
-                    expect(listener).toHaveBeenCalledWith({
-                        identifier: {
-                            namespace: 'test',
-                            key: 'a'
-                        }
-                    });
+                        key: 'a'
+                    }
                 });
             });
-            describe('supports reordering of composition', function () {
-                let listener;
-                beforeEach(function () {
-                    listener = jasmine.createSpy('reorderListener');
-                    composition.on('reorder', listener);
+        });
+        describe('supports reordering of composition', function () {
+            let listener;
+            beforeEach(function () {
+                listener = jasmine.createSpy('reorderListener');
+                composition.on('reorder', listener);
 
-                    return composition.load();
-                });
-                it('', function () {
-                    composition.reorder(1, 0);
-                    let newComposition =
+                return composition.load();
+            });
+            it('', function () {
+                composition.reorder(1, 0);
+                let newComposition =
                         publicAPI.objects.mutate.calls.mostRecent().args[2];
-                    let reorderPlan = listener.calls.mostRecent().args[0][0];
+                let reorderPlan = listener.calls.mostRecent().args[0][0];
 
-                    expect(reorderPlan.oldIndex).toBe(1);
-                    expect(reorderPlan.newIndex).toBe(0);
-                    expect(newComposition[0].key).toEqual('b');
-                    expect(newComposition[1].key).toEqual('a');
-                    expect(newComposition[2].key).toEqual('c');
-                });
-                it('', function () {
-                    composition.reorder(0, 2);
-                    let newComposition =
+                expect(reorderPlan.oldIndex).toBe(1);
+                expect(reorderPlan.newIndex).toBe(0);
+                expect(newComposition[0].key).toEqual('b');
+                expect(newComposition[1].key).toEqual('a');
+                expect(newComposition[2].key).toEqual('c');
+            });
+            it('', function () {
+                composition.reorder(0, 2);
+                let newComposition =
                         publicAPI.objects.mutate.calls.mostRecent().args[2];
-                    let reorderPlan = listener.calls.mostRecent().args[0][0];
+                let reorderPlan = listener.calls.mostRecent().args[0][0];
 
-                    expect(reorderPlan.oldIndex).toBe(0);
-                    expect(reorderPlan.newIndex).toBe(2);
-                    expect(newComposition[0].key).toEqual('b');
-                    expect(newComposition[1].key).toEqual('c');
-                    expect(newComposition[2].key).toEqual('a');
+                expect(reorderPlan.oldIndex).toBe(0);
+                expect(reorderPlan.newIndex).toBe(2);
+                expect(newComposition[0].key).toEqual('b');
+                expect(newComposition[1].key).toEqual('c');
+                expect(newComposition[2].key).toEqual('a');
+            });
+        });
+        it('supports adding an object to composition', function () {
+            let addListener = jasmine.createSpy('addListener');
+            let mockChildObject = {
+                identifier: {
+                    key: 'mock-key',
+                    namespace: ''
+                }
+            };
+            composition.on('add', addListener);
+            composition.add(mockChildObject);
+
+            expect(domainObject.composition.length).toBe(4);
+            expect(domainObject.composition[3]).toEqual(mockChildObject.identifier);
+        });
+    });
+
+    describe('static custom composition', function () {
+        let customProvider;
+        let domainObject;
+        let composition;
+
+        beforeEach(function () {
+            // A simple custom provider, returns the same composition for
+            // all objects of a given type.
+            customProvider = {
+                appliesTo: function (object) {
+                    return object.type === 'custom-object-type';
+                },
+                load: function (object) {
+                    return Promise.resolve([
+                        {
+                            namespace: 'custom',
+                            key: 'thing'
+                        }
+                    ]);
+                },
+                add: jasmine.createSpy('add'),
+                remove: jasmine.createSpy('remove')
+            };
+            domainObject = {
+                identifier: {
+                    namespace: 'test',
+                    key: '1'
+                },
+                type: 'custom-object-type'
+            };
+            compositionAPI.addProvider(customProvider);
+            composition = compositionAPI.get(domainObject);
+        });
+
+        it('supports listening and loading', function () {
+            const addListener = jasmine.createSpy('addListener');
+            composition.on('add', addListener);
+
+            return composition.load().then(function (children) {
+                let listenObject;
+                const loadedObject = children[0];
+
+                expect(addListener).toHaveBeenCalled();
+
+                listenObject = addListener.calls.mostRecent().args[0];
+                expect(listenObject).toEqual(loadedObject);
+                expect(loadedObject).toEqual({
+                    identifier: {
+                        namespace: 'custom',
+                        key: 'thing'
+                    }
                 });
             });
-            it('supports adding an object to composition', function () {
-                let addListener = jasmine.createSpy('addListener');
-                let mockChildObject = {
+        });
+        describe('Calling add or remove', function () {
+            let mockChildObject;
+
+            beforeEach(function () {
+                mockChildObject = {
                     identifier: {
                         key: 'mock-key',
                         namespace: ''
                     }
                 };
-                composition.on('add', addListener);
                 composition.add(mockChildObject);
-
-                expect(domainObject.composition.length).toBe(4);
-                expect(domainObject.composition[3]).toEqual(mockChildObject.identifier);
-            });
-        });
-
-        describe('static custom composition', function () {
-            let customProvider;
-            let domainObject;
-            let composition;
-
-            beforeEach(function () {
-                // A simple custom provider, returns the same composition for
-                // all objects of a given type.
-                customProvider = {
-                    appliesTo: function (object) {
-                        return object.type === 'custom-object-type';
-                    },
-                    load: function (object) {
-                        return Promise.resolve([
-                            {
-                                namespace: 'custom',
-                                key: 'thing'
-                            }
-                        ]);
-                    },
-                    add: jasmine.createSpy('add'),
-                    remove: jasmine.createSpy('remove')
-                };
-                domainObject = {
-                    identifier: {
-                        namespace: 'test',
-                        key: '1'
-                    },
-                    type: 'custom-object-type'
-                };
-                compositionAPI.addProvider(customProvider);
-                composition = compositionAPI.get(domainObject);
             });
 
-            it('supports listening and loading', function () {
-                const addListener = jasmine.createSpy('addListener');
-                composition.on('add', addListener);
-
-                return composition.load().then(function (children) {
-                    let listenObject;
-                    const loadedObject = children[0];
-
-                    expect(addListener).toHaveBeenCalled();
-
-                    listenObject = addListener.calls.mostRecent().args[0];
-                    expect(listenObject).toEqual(loadedObject);
-                    expect(loadedObject).toEqual({
-                        identifier: {
-                            namespace: 'custom',
-                            key: 'thing'
-                        }
-                    });
-                });
-            });
-            describe('Calling add or remove', function () {
-                let mockChildObject;
-
-                beforeEach(function () {
-                    mockChildObject = {
-                        identifier: {
-                            key: 'mock-key',
-                            namespace: ''
-                        }
-                    };
-                    composition.add(mockChildObject);
-                });
-
-                it('calls add on the provider', function () {
-                    expect(customProvider.add).toHaveBeenCalledWith(domainObject, mockChildObject.identifier);
-                });
-
-                it('calls remove on the provider', function () {
-                    composition.remove(mockChildObject);
-                    expect(customProvider.remove).toHaveBeenCalledWith(domainObject, mockChildObject.identifier);
-                });
-            });
-        });
-
-        describe('dynamic custom composition', function () {
-            let customProvider;
-            let domainObject;
-            let composition;
-
-            beforeEach(function () {
-                // A dynamic provider, loads an empty composition and exposes
-                // listener functions.
-                customProvider = jasmine.createSpyObj('dynamicProvider', [
-                    'appliesTo',
-                    'load',
-                    'on',
-                    'off'
-                ]);
-
-                customProvider.appliesTo.and.returnValue('true');
-                customProvider.load.and.returnValue(Promise.resolve([]));
-
-                domainObject = {
-                    identifier: {
-                        namespace: 'test',
-                        key: '1'
-                    },
-                    type: 'custom-object-type'
-                };
-                compositionAPI.addProvider(customProvider);
-                composition = compositionAPI.get(domainObject);
+            it('calls add on the provider', function () {
+                expect(customProvider.add).toHaveBeenCalledWith(domainObject, mockChildObject.identifier);
             });
 
-            it('supports listening and loading', function () {
-                const addListener = jasmine.createSpy('addListener');
-                const removeListener = jasmine.createSpy('removeListener');
-                const addPromise = new Promise(function (resolve) {
-                    addListener.and.callFake(resolve);
-                });
-                const removePromise = new Promise(function (resolve) {
-                    removeListener.and.callFake(resolve);
-                });
-
-                composition.on('add', addListener);
-                composition.on('remove', removeListener);
-
-                expect(customProvider.on).toHaveBeenCalledWith(
-                    domainObject,
-                    'add',
-                    jasmine.any(Function),
-                    jasmine.any(CompositionCollection)
-                );
-                expect(customProvider.on).toHaveBeenCalledWith(
-                    domainObject,
-                    'remove',
-                    jasmine.any(Function),
-                    jasmine.any(CompositionCollection)
-                );
-                const add = customProvider.on.calls.all()[0].args[2];
-                const remove = customProvider.on.calls.all()[1].args[2];
-
-                return composition.load()
-                    .then(function () {
-                        expect(addListener).not.toHaveBeenCalled();
-                        expect(removeListener).not.toHaveBeenCalled();
-                        add({
-                            namespace: 'custom',
-                            key: 'thing'
-                        });
-
-                        return addPromise;
-                    }).then(function () {
-                        expect(addListener).toHaveBeenCalledWith({
-                            identifier: {
-                                namespace: 'custom',
-                                key: 'thing'
-                            }
-                        });
-                        remove(addListener.calls.mostRecent().args[0]);
-
-                        return removePromise;
-                    }).then(function () {
-                        expect(removeListener).toHaveBeenCalledWith({
-                            identifier: {
-                                namespace: 'custom',
-                                key: 'thing'
-                            }
-                        });
-                    });
+            it('calls remove on the provider', function () {
+                composition.remove(mockChildObject);
+                expect(customProvider.remove).toHaveBeenCalledWith(domainObject, mockChildObject.identifier);
             });
         });
     });
+
+    describe('dynamic custom composition', function () {
+        let customProvider;
+        let domainObject;
+        let composition;
+
+        beforeEach(function () {
+            // A dynamic provider, loads an empty composition and exposes
+            // listener functions.
+            customProvider = jasmine.createSpyObj('dynamicProvider', [
+                'appliesTo',
+                'load',
+                'on',
+                'off'
+            ]);
+
+            customProvider.appliesTo.and.returnValue('true');
+            customProvider.load.and.returnValue(Promise.resolve([]));
+
+            domainObject = {
+                identifier: {
+                    namespace: 'test',
+                    key: '1'
+                },
+                type: 'custom-object-type'
+            };
+            compositionAPI.addProvider(customProvider);
+            composition = compositionAPI.get(domainObject);
+        });
+
+        it('supports listening and loading', function () {
+            const addListener = jasmine.createSpy('addListener');
+            const removeListener = jasmine.createSpy('removeListener');
+            const addPromise = new Promise(function (resolve) {
+                addListener.and.callFake(resolve);
+            });
+            const removePromise = new Promise(function (resolve) {
+                removeListener.and.callFake(resolve);
+            });
+
+            composition.on('add', addListener);
+            composition.on('remove', removeListener);
+
+            expect(customProvider.on).toHaveBeenCalledWith(
+                domainObject,
+                'add',
+                jasmine.any(Function),
+                jasmine.any(CompositionCollection)
+            );
+            expect(customProvider.on).toHaveBeenCalledWith(
+                domainObject,
+                'remove',
+                jasmine.any(Function),
+                jasmine.any(CompositionCollection)
+            );
+            const add = customProvider.on.calls.all()[0].args[2];
+            const remove = customProvider.on.calls.all()[1].args[2];
+
+            return composition.load()
+                .then(function () {
+                    expect(addListener).not.toHaveBeenCalled();
+                    expect(removeListener).not.toHaveBeenCalled();
+                    add({
+                        namespace: 'custom',
+                        key: 'thing'
+                    });
+
+                    return addPromise;
+                }).then(function () {
+                    expect(addListener).toHaveBeenCalledWith({
+                        identifier: {
+                            namespace: 'custom',
+                            key: 'thing'
+                        }
+                    });
+                    remove(addListener.calls.mostRecent().args[0]);
+
+                    return removePromise;
+                }).then(function () {
+                    expect(removeListener).toHaveBeenCalledWith({
+                        identifier: {
+                            namespace: 'custom',
+                            key: 'thing'
+                        }
+                    });
+                });
+        });
+    });
 });

src/api/composition/CompositionCollection.js

@@ -20,75 +20,98 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define([
-    'lodash'
-], function (
-    _
-) {
+/**
+ * @typedef {import('../objects/ObjectAPI').DomainObject} DomainObject
+ */
+
+/**
+ * @typedef {import('./CompositionAPI').default} CompositionAPI
+ */
+
+/**
+ * @typedef {import('../../../openmct').OpenMCT} OpenMCT
+ */
+
+/**
+ * @typedef {object} ListenerMap
+ * @property {Array.<any>} add
+ * @property {Array.<any>} remove
+ * @property {Array.<any>} load
+ * @property {Array.<any>} reorder
+ */
+
+/**
+ * A CompositionCollection represents the list of domain objects contained
+ * by another domain object. It provides methods for loading this
+ * list asynchronously, modifying this list, and listening for changes to
+ * this list.
+ *
+ * Usage:
+ * ```javascript
+ *  var myViewComposition = MCT.composition.get(myViewObject);
+ *  myViewComposition.on('add', addObjectToView);
+ *  myViewComposition.on('remove', removeObjectFromView);
+ *  myViewComposition.load(); // will trigger `add` for all loaded objects.
+ *  ```
+ */
+export default class CompositionCollection {
+    domainObject;
+    #provider;
+    #publicAPI;
+    #listeners;
+    #mutables;
     /**
-     * A CompositionCollection represents the list of domain objects contained
-     * by another domain object. It provides methods for loading this
-     * list asynchronously, modifying this list, and listening for changes to
-     * this list.
-     *
-     * Usage:
-     * ```javascript
-     *  var myViewComposition = MCT.composition.get(myViewObject);
-     *  myViewComposition.on('add', addObjectToView);
-     *  myViewComposition.on('remove', removeObjectFromView);
-     *  myViewComposition.load(); // will trigger `add` for all loaded objects.
-     *  ```
-     *
-     * @interface CompositionCollection
-     * @param {module:openmct.DomainObject} domainObject the domain object
+     * @constructor
+     * @param {DomainObject} domainObject the domain object
      *        whose composition will be contained
-     * @param {module:openmct.CompositionProvider} provider the provider
+     * @param {import('./CompositionProvider').default} provider the provider
      *        to use to retrieve other domain objects
-     * @param {module:openmct.CompositionAPI} api the composition API, for
+     * @param {OpenMCT} publicAPI the composition API, for
      *        policy checks
-     * @memberof module:openmct
      */
-    function CompositionCollection(domainObject, provider, publicAPI) {
+    constructor(domainObject, provider, publicAPI) {
         this.domainObject = domainObject;
-        this.provider = provider;
-        this.publicAPI = publicAPI;
-        this.listeners = {
+        /** @type {import('./CompositionProvider').default} */
+        this.#provider = provider;
+        /** @type {OpenMCT} */
+        this.#publicAPI = publicAPI;
+        /** @type {ListenerMap} */
+        this.#listeners = {
             add: [],
             remove: [],
             load: [],
             reorder: []
         };
-        this.onProviderAdd = this.onProviderAdd.bind(this);
-        this.onProviderRemove = this.onProviderRemove.bind(this);
-        this.mutables = {};
+        this.onProviderAdd = this.#onProviderAdd.bind(this);
+        this.onProviderRemove = this.#onProviderRemove.bind(this);
+        this.#mutables = {};
 
         if (this.domainObject.isMutable) {
             this.returnMutables = true;
             let unobserve = this.domainObject.$on('$_destroy', () => {
-                Object.values(this.mutables).forEach(mutable => {
-                    this.publicAPI.objects.destroyMutable(mutable);
+                Object.values(this.#mutables).forEach(mutable => {
+                    this.#publicAPI.objects.destroyMutable(mutable);
                 });
                 unobserve();
             });
         }
     }
-
     /**
      * Listen for changes to this composition.  Supports 'add', 'remove', and
      * 'load' events.
      *
-     * @param event event to listen for, either 'add', 'remove' or 'load'.
-     * @param callback to trigger when event occurs.
-     * @param [context] context to use when invoking callback, optional.
+     * @param {string} event event to listen for, either 'add', 'remove' or 'load'.
+     * @param {(...args: any[]) => void} callback to trigger when event occurs.
+     * @param {any} [context] to use when invoking callback, optional.
      */
-    CompositionCollection.prototype.on = function (event, callback, context) {
-        if (!this.listeners[event]) {
+    on(event, callback, context) {
+        if (!this.#listeners[event]) {
             throw new Error('Event not supported by composition: ' + event);
         }
 
-        if (this.provider.on && this.provider.off) {
+        if (this.#provider.on && this.#provider.off) {
             if (event === 'add') {
-                this.provider.on(
+                this.#provider.on(
                     this.domainObject,
                     'add',
                     this.onProviderAdd,
@@ -97,7 +120,7 @@ define([
             }
 
             if (event === 'remove') {
-                this.provider.on(
+                this.#provider.on(
                     this.domainObject,
                     'remove',
                     this.onProviderRemove,
@@ -106,36 +129,34 @@ define([
             }
 
             if (event === 'reorder') {
-                this.provider.on(
+                this.#provider.on(
                     this.domainObject,
                     'reorder',
-                    this.onProviderReorder,
+                    this.#onProviderReorder,
                     this
                 );
             }
         }
 
-        this.listeners[event].push({
+        this.#listeners[event].push({
             callback: callback,
             context: context
         });
-    };
-
+    }
     /**
      * Remove a listener.  Must be called with same exact parameters as
      * `off`.
      *
-     * @param event
-     * @param callback
-     * @param [context]
+     * @param {string} event
+     * @param {(...args: any[]) => void} callback
+     * @param {any} [context]
      */
-
-    CompositionCollection.prototype.off = function (event, callback, context) {
-        if (!this.listeners[event]) {
+    off(event, callback, context) {
+        if (!this.#listeners[event]) {
             throw new Error('Event not supported by composition: ' + event);
         }
 
-        const index = this.listeners[event].findIndex(l => {
+        const index = this.#listeners[event].findIndex(l => {
             return l.callback === callback && l.context === context;
         });
 
@@ -143,125 +164,116 @@ define([
             throw new Error('Tried to remove a listener that does not exist');
         }
 
-        this.listeners[event].splice(index, 1);
-        if (this.listeners[event].length === 0) {
+        this.#listeners[event].splice(index, 1);
+        if (this.#listeners[event].length === 0) {
             this._destroy();
 
             // Remove provider listener if this is the last callback to
             // be removed.
-            if (this.provider.off && this.provider.on) {
+            if (this.#provider.off && this.#provider.on) {
                 if (event === 'add') {
-                    this.provider.off(
+                    this.#provider.off(
                         this.domainObject,
                         'add',
                         this.onProviderAdd,
                         this
                     );
                 } else if (event === 'remove') {
-                    this.provider.off(
+                    this.#provider.off(
                         this.domainObject,
                         'remove',
                         this.onProviderRemove,
                         this
                     );
                 } else if (event === 'reorder') {
-                    this.provider.off(
+                    this.#provider.off(
                         this.domainObject,
                         'reorder',
-                        this.onProviderReorder,
+                        this.#onProviderReorder,
                         this
                     );
                 }
             }
         }
-    };
-
+    }
     /**
      * Add a domain object to this composition.
      *
      * A call to [load]{@link module:openmct.CompositionCollection#load}
      * must have resolved before using this method.
      *
-     * @param {module:openmct.DomainObject} child the domain object to add
-     * @param {boolean} skipMutate true if the underlying provider should
-     *        not be updated
-     * @memberof module:openmct.CompositionCollection#
-     * @name add
+     * **TODO:** Remove `skipMutate` parameter.
+     *
+     * @param {DomainObject} child the domain object to add
+     * @param {boolean} skipMutate
+     * **Intended for internal use ONLY.**
+     * true if the underlying provider should not be updated.
      */
-    CompositionCollection.prototype.add = function (child, skipMutate) {
+    add(child, skipMutate) {
         if (!skipMutate) {
-            if (!this.publicAPI.composition.checkPolicy(this.domainObject, child)) {
+            if (!this.#publicAPI.composition.checkPolicy(this.domainObject, child)) {
                 throw `Object of type ${child.type} cannot be added to object of type ${this.domainObject.type}`;
             }
 
-            this.provider.add(this.domainObject, child.identifier);
+            this.#provider.add(this.domainObject, child.identifier);
         } else {
-            if (this.returnMutables && this.publicAPI.objects.supportsMutation(child.identifier)) {
-                let keyString = this.publicAPI.objects.makeKeyString(child.identifier);
+            if (this.returnMutables && this.#publicAPI.objects.supportsMutation(child.identifier)) {
+                let keyString = this.#publicAPI.objects.makeKeyString(child.identifier);
 
-                child = this.publicAPI.objects.toMutable(child);
-                this.mutables[keyString] = child;
+                child = this.#publicAPI.objects.toMutable(child);
+                this.#mutables[keyString] = child;
             }
 
-            this.emit('add', child);
+            this.#emit('add', child);
         }
-    };
-
+    }
     /**
      * Load the domain objects in this composition.
      *
-     * @returns {Promise.<Array.<module:openmct.DomainObject>>} a promise for
+     * @param {AbortSignal} abortSignal
+     * @returns {Promise.<Array.<DomainObject>>} a promise for
      *          the domain objects in this composition
      * @memberof {module:openmct.CompositionCollection#}
      * @name load
      */
-    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, abortSignal)));
-            }.bind(this))
-            .then(function (childObjects) {
-                childObjects.forEach(c => this.add(c, true));
-
-                return childObjects;
-            }.bind(this))
-            .then(function (children) {
-                this.emit('load');
-
-                return children;
-            }.bind(this));
-    };
+    async load(abortSignal) {
+        this.#cleanUpMutables();
+        const children = await this.#provider.load(this.domainObject);
+        const childObjects = await Promise.all(children.map((c) => this.#publicAPI.objects.get(c, abortSignal)));
+        childObjects.forEach(c => this.add(c, true));
+        this.#emit('load');
 
+        return childObjects;
+    }
     /**
      * Remove a domain object from this composition.
      *
      * A call to [load]{@link module:openmct.CompositionCollection#load}
      * must have resolved before using this method.
      *
-     * @param {module:openmct.DomainObject} child the domain object to remove
-     * @param {boolean} skipMutate true if the underlying provider should
-     *        not be updated
-     * @memberof module:openmct.CompositionCollection#
+     * **TODO:** Remove `skipMutate` parameter.
+     *
+     * @param {DomainObject} child the domain object to remove
+     * @param {boolean} skipMutate
+     * **Intended for internal use ONLY.**
+     * true if the underlying provider should not be updated.
      * @name remove
      */
-    CompositionCollection.prototype.remove = function (child, skipMutate) {
+    remove(child, skipMutate) {
         if (!skipMutate) {
-            this.provider.remove(this.domainObject, child.identifier);
+            this.#provider.remove(this.domainObject, child.identifier);
         } else {
             if (this.returnMutables) {
-                let keyString = this.publicAPI.objects.makeKeyString(child);
-                if (this.mutables[keyString] !== undefined && this.mutables[keyString].isMutable) {
-                    this.publicAPI.objects.destroyMutable(this.mutables[keyString]);
-                    delete this.mutables[keyString];
+                let keyString = this.#publicAPI.objects.makeKeyString(child);
+                if (this.#mutables[keyString] !== undefined && this.#mutables[keyString].isMutable) {
+                    this.#publicAPI.objects.destroyMutable(this.#mutables[keyString]);
+                    delete this.#mutables[keyString];
                 }
             }
 
-            this.emit('remove', child);
+            this.#emit('remove', child);
         }
-    };
-
+    }
     /**
      * Reorder the domain objects in this composition.
      *
@@ -270,67 +282,75 @@ define([
      *
      * @param {number} oldIndex
      * @param {number} newIndex
-     * @memberof module:openmct.CompositionCollection#
      * @name remove
      */
-    CompositionCollection.prototype.reorder = function (oldIndex, newIndex, skipMutate) {
-        this.provider.reorder(this.domainObject, oldIndex, newIndex);
-    };
-
+    reorder(oldIndex, newIndex, _skipMutate) {
+        this.#provider.reorder(this.domainObject, oldIndex, newIndex);
+    }
     /**
-     * Handle reorder from provider.
-     * @private
+     * Destroy mutationListener
      */
-    CompositionCollection.prototype.onProviderReorder = function (reorderMap) {
-        this.emit('reorder', reorderMap);
-    };
-
-    /**
-     * Handle adds from provider.
-     * @private
-     */
-    CompositionCollection.prototype.onProviderAdd = function (childId) {
-        return this.publicAPI.objects.get(childId).then(function (child) {
-            this.add(child, true);
-
-            return child;
-        }.bind(this));
-    };
-
-    /**
-     * Handle removal from provider.
-     * @private
-     */
-    CompositionCollection.prototype.onProviderRemove = function (child) {
-        this.remove(child, true);
-    };
-
-    CompositionCollection.prototype._destroy = function () {
+    _destroy() {
         if (this.mutationListener) {
             this.mutationListener();
             delete this.mutationListener;
         }
-    };
+    }
+    /**
+     * Handle reorder from provider.
+     * @private
+     * @param {object} reorderMap
+     */
+    #onProviderReorder(reorderMap) {
+        this.#emit('reorder', reorderMap);
+    }
+
+    /**
+     * Handle adds from provider.
+     * @private
+     * @param {import('../objects/ObjectAPI').Identifier} childId
+     * @returns {DomainObject}
+     */
+    #onProviderAdd(childId) {
+        return this.#publicAPI.objects.get(childId).then(function (child) {
+            this.add(child, true);
+
+            return child;
+        }.bind(this));
+    }
+
+    /**
+     * Handle removal from provider.
+     * @param {DomainObject} child
+     */
+    #onProviderRemove(child) {
+        this.remove(child, true);
+    }
 
     /**
      * Emit events.
+     *
      * @private
+     * @param {string} event
+     * @param {...args.<any>} payload
      */
-    CompositionCollection.prototype.emit = function (event, ...payload) {
-        this.listeners[event].forEach(function (l) {
+    #emit(event, ...payload) {
+        this.#listeners[event].forEach(function (l) {
             if (l.context) {
                 l.callback.apply(l.context, payload);
             } else {
                 l.callback(...payload);
             }
         });
-    };
+    }
 
-    CompositionCollection.prototype.cleanUpMutables = function () {
-        Object.values(this.mutables).forEach(mutable => {
-            this.publicAPI.objects.destroyMutable(mutable);
+    /**
+     * Destroy all mutables.
+     * @private
+     */
+    #cleanUpMutables() {
+        Object.values(this.#mutables).forEach(mutable => {
+            this.#publicAPI.objects.destroyMutable(mutable);
         });
-    };
-
-    return CompositionCollection;
-});
+    }
+}

src/api/composition/CompositionProvider.js

@@ -0,0 +1,262 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2022, 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 _ from 'lodash';
+import objectUtils from "../objects/object-utils";
+
+/**
+  * @typedef {import('../objects/ObjectAPI').DomainObject} DomainObject
+  */
+
+/**
+  * @typedef {import('../objects/ObjectAPI').Identifier} Identifier
+  */
+
+/**
+  * @typedef {import('./CompositionAPI').default} CompositionAPI
+  */
+
+/**
+  * @typedef {import('../../../openmct').OpenMCT} OpenMCT
+  */
+
+/**
+  * A CompositionProvider provides the underlying implementation of
+  * composition-related behavior for certain types of domain object.
+  *
+  * By default, a composition provider will not support composition
+  * modification.  You can add support for mutation of composition by
+  * defining `add` and/or `remove` methods.
+  *
+  * If the composition of an object can change over time-- perhaps via
+  * server updates or mutation via the add/remove methods, then one must
+  * trigger events as necessary.
+  *
+  */
+export default class CompositionProvider {
+    #publicAPI;
+    #listeningTo;
+
+    /**
+      * @param {OpenMCT} publicAPI
+      * @param {CompositionAPI} compositionAPI
+      */
+    constructor(publicAPI, compositionAPI) {
+        this.#publicAPI = publicAPI;
+        this.#listeningTo = {};
+
+        compositionAPI.addPolicy(this.#cannotContainItself.bind(this));
+        compositionAPI.addPolicy(this.#supportsComposition.bind(this));
+    }
+
+    get listeningTo() {
+        return this.#listeningTo;
+    }
+
+    get establishTopicListener() {
+        return this.#establishTopicListener.bind(this);
+    }
+
+    get publicAPI() {
+        return this.#publicAPI;
+    }
+
+    /**
+      * Check if this provider should be used to load composition for a
+      * particular domain object.
+      * @method appliesTo
+      * @param {import('../objects/ObjectAPI').DomainObject} domainObject the domain object
+      *        to check
+      * @returns {boolean} true if this provider can provide composition for a given domain object
+      */
+    appliesTo(domainObject) {
+        throw new Error("This method must be implemented by a subclass.");
+    }
+    /**
+      * Load any domain objects contained in the composition of this domain
+      * object.
+      * @param {DomainObject} domainObject the domain object
+      *        for which to load composition
+      * @returns {Promise<Identifier[]>} a promise for
+      *          the Identifiers in this composition
+      * @method load
+      */
+    load(domainObject) {
+        throw new Error("This method must be implemented by a subclass.");
+    }
+    /**
+      * Attach listeners for changes to the composition of a given domain object.
+      * Supports `add` and `remove` events.
+      *
+      * @param {DomainObject} domainObject to listen to
+      * @param {string} event the event to bind to, either `add` or `remove`.
+      * @param {Function} callback callback to invoke when event is triggered.
+      * @param {any} [context] to use when invoking callback.
+      */
+    on(domainObject,
+        event,
+        callback,
+        context) {
+        throw new Error("This method must be implemented by a subclass.");
+    }
+    /**
+      * Remove a listener that was previously added for a given domain object.
+      * event name, callback, and context must be the same as when the listener
+      * was originally attached.
+      *
+      * @param {DomainObject} domainObject to remove listener for
+      * @param {string} event event to stop listening to: `add` or `remove`.
+      * @param {Function} callback callback to remove.
+      * @param {any} context of callback to remove.
+      */
+    off(domainObject,
+        event,
+        callback,
+        context) {
+        throw new Error("This method must be implemented by a subclass.");
+    }
+    /**
+      * Remove a domain object from another domain object's composition.
+      *
+      * This method is optional; if not present, adding to a domain object's
+      * composition using this provider will be disallowed.
+      *
+      * @param {DomainObject} domainObject the domain object
+      *        which should have its composition modified
+      * @param {Identifier} childId the domain object to remove
+      * @method remove
+      */
+    remove(domainObject, childId) {
+        throw new Error("This method must be implemented by a subclass.");
+    }
+    /**
+      * Add a domain object to another domain object's composition.
+      *
+      * This method is optional; if not present, adding to a domain object's
+      * composition using this provider will be disallowed.
+      *
+      * @param {DomainObject} parent the domain object
+      *        which should have its composition modified
+      * @param {Identifier} childId the domain object to add
+      * @method add
+      */
+    add(parent, childId) {
+        throw new Error("This method must be implemented by a subclass.");
+    }
+
+    /**
+      * @param {DomainObject} parent
+      * @param {Identifier} childId
+      * @returns {boolean}
+      */
+    includes(parent, childId) {
+        throw new Error("This method must be implemented by a subclass.");
+    }
+
+    /**
+      * @param {DomainObject} domainObject
+      * @param {number} oldIndex
+      * @param {number} newIndex
+      * @returns
+      */
+    reorder(domainObject, oldIndex, newIndex) {
+        throw new Error("This method must be implemented by a subclass.");
+    }
+
+    /**
+      * Listens on general mutation topic, using injector to fetch to avoid
+      * circular dependencies.
+      * @private
+      */
+    #establishTopicListener() {
+        if (this.topicListener) {
+            return;
+        }
+
+        this.#publicAPI.objects.eventEmitter.on('mutation', this.#onMutation.bind(this));
+        this.topicListener = () => {
+            this.#publicAPI.objects.eventEmitter.off('mutation', this.#onMutation.bind(this));
+        };
+    }
+
+    /**
+      * @private
+      * @param {DomainObject} parent
+      * @param {DomainObject} child
+      * @returns {boolean}
+      */
+    #cannotContainItself(parent, child) {
+        return !(parent.identifier.namespace === child.identifier.namespace
+               && parent.identifier.key === child.identifier.key);
+    }
+
+    /**
+      * @private
+      * @param {DomainObject} parent
+      * @returns {boolean}
+      */
+    #supportsComposition(parent, _child) {
+        return this.#publicAPI.composition.supportsComposition(parent);
+    }
+
+    /**
+      * Handles mutation events.  If there are active listeners for the mutated
+      * object, detects changes to composition and triggers necessary events.
+      *
+      * @private
+      * @param {DomainObject} oldDomainObject
+      */
+    #onMutation(oldDomainObject) {
+        const id = objectUtils.makeKeyString(oldDomainObject.identifier);
+        const listeners = this.#listeningTo[id];
+
+        if (!listeners) {
+            return;
+        }
+
+        const oldComposition = listeners.composition.map(objectUtils.makeKeyString);
+        const newComposition = oldDomainObject.composition.map(objectUtils.makeKeyString);
+
+        const added = _.difference(newComposition, oldComposition).map(objectUtils.parseKeyString);
+        const removed = _.difference(oldComposition, newComposition).map(objectUtils.parseKeyString);
+
+        function notify(value) {
+            return function (listener) {
+                if (listener.context) {
+                    listener.callback.call(listener.context, value);
+                } else {
+                    listener.callback(value);
+                }
+            };
+        }
+
+        listeners.composition = newComposition.map(objectUtils.parseKeyString);
+
+        added.forEach(function (addedChild) {
+            listeners.add.forEach(notify(addedChild));
+        });
+
+        removed.forEach(function (removedChild) {
+            listeners.remove.forEach(notify(removedChild));
+        });
+    }
+}
+

src/api/composition/DefaultCompositionProvider.js

@@ -19,102 +19,79 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+import objectUtils from "../objects/object-utils";
+import CompositionProvider from './CompositionProvider';
 
-define([
-    'lodash',
-    'objectUtils'
-], function (
-    _,
-    objectUtils
-) {
-    /**
-     * A CompositionProvider provides the underlying implementation of
-     * composition-related behavior for certain types of domain object.
-     *
-     * By default, a composition provider will not support composition
-     * modification.  You can add support for mutation of composition by
-     * defining `add` and/or `remove` methods.
-     *
-     * If the composition of an object can change over time-- perhaps via
-     * server updates or mutation via the add/remove methods, then one must
-     * trigger events as necessary.
-     *
-     * @interface CompositionProvider
-     * @memberof module:openmct
-     */
+/**
+ * @typedef {import('../objects/ObjectAPI').DomainObject} DomainObject
+ */
 
-    function DefaultCompositionProvider(publicAPI, compositionAPI) {
-        this.publicAPI = publicAPI;
-        this.listeningTo = {};
-        this.onMutation = this.onMutation.bind(this);
+/**
+ * @typedef {import('../objects/ObjectAPI').Identifier} Identifier
+ */
 
-        this.cannotContainItself = this.cannotContainItself.bind(this);
-        this.supportsComposition = this.supportsComposition.bind(this);
+/**
+ * @typedef {import('./CompositionAPI').default} CompositionAPI
+ */
 
-        compositionAPI.addPolicy(this.cannotContainItself);
-        compositionAPI.addPolicy(this.supportsComposition);
-    }
-
-    /**
-     * @private
-     */
-    DefaultCompositionProvider.prototype.cannotContainItself = function (parent, child) {
-        return !(parent.identifier.namespace === child.identifier.namespace
-            && parent.identifier.key === child.identifier.key);
-    };
-
-    /**
-     * @private
-     */
-    DefaultCompositionProvider.prototype.supportsComposition = function (parent, child) {
-        return this.publicAPI.composition.supportsComposition(parent);
-    };
+/**
+ * @typedef {import('../../../openmct').OpenMCT} OpenMCT
+ */
 
+/**
+ * A CompositionProvider provides the underlying implementation of
+ * composition-related behavior for certain types of domain object.
+ *
+ * By default, a composition provider will not support composition
+ * modification.  You can add support for mutation of composition by
+ * defining `add` and/or `remove` methods.
+ *
+ * If the composition of an object can change over time-- perhaps via
+ * server updates or mutation via the add/remove methods, then one must
+ * trigger events as necessary.
+ * @extends CompositionProvider
+ */
+export default class DefaultCompositionProvider extends CompositionProvider {
     /**
      * Check if this provider should be used to load composition for a
      * particular domain object.
-     * @param {module:openmct.DomainObject} domainObject the domain object
+     * @override
+     * @param {DomainObject} domainObject the domain object
      *        to check
-     * @returns {boolean} true if this provider can provide
-     *          composition for a given domain object
-     * @memberof module:openmct.CompositionProvider#
-     * @method appliesTo
+     * @returns {boolean} true if this provider can provide composition for a given domain object
      */
-    DefaultCompositionProvider.prototype.appliesTo = function (domainObject) {
+    appliesTo(domainObject) {
         return Boolean(domainObject.composition);
-    };
-
+    }
     /**
      * Load any domain objects contained in the composition of this domain
      * object.
-     * @param {module:openmct.DomainObject} domainObject the domain object
+     * @override
+     * @param {DomainObject} domainObject the domain object
      *        for which to load composition
-     * @returns {Promise.<Array.<module:openmct.Identifier>>} a promise for
+     * @returns {Promise<Identifier[]>} a promise for
      *          the Identifiers in this composition
-     * @memberof module:openmct.CompositionProvider#
-     * @method load
      */
-    DefaultCompositionProvider.prototype.load = function (domainObject) {
+    load(domainObject) {
         return Promise.all(domainObject.composition);
-    };
-
+    }
     /**
      * Attach listeners for changes to the composition of a given domain object.
      * Supports `add` and `remove` events.
      *
-     * @param {module:openmct.DomainObject} domainObject to listen to
-     * @param String event the event to bind to, either `add` or `remove`.
-     * @param Function callback callback to invoke when event is triggered.
-     * @param [context] context to use when invoking callback.
+     * @override
+     * @param {DomainObject} domainObject to listen to
+     * @param {string} event the event to bind to, either `add` or `remove`.
+     * @param {Function} callback callback to invoke when event is triggered.
+     * @param {any} [context] to use when invoking callback.
      */
-    DefaultCompositionProvider.prototype.on = function (
-        domainObject,
+    on(domainObject,
         event,
         callback,
-        context
-    ) {
+        context) {
         this.establishTopicListener();
 
+        /** @type {string} */
         const keyString = objectUtils.makeKeyString(domainObject.identifier);
         let objectListeners = this.listeningTo[keyString];
 
@@ -131,24 +108,24 @@ define([
             callback: callback,
             context: context
         });
-    };
-
+    }
     /**
      * Remove a listener that was previously added for a given domain object.
      * event name, callback, and context must be the same as when the listener
      * was originally attached.
      *
-     * @param {module:openmct.DomainObject} domainObject to remove listener for
-     * @param String event event to stop listening to: `add` or `remove`.
-     * @param Function callback callback to remove.
-     * @param [context] context of callback to remove.
+     * @override
+     * @param {DomainObject} domainObject to remove listener for
+     * @param {string} event event to stop listening to: `add` or `remove`.
+     * @param {Function} callback callback to remove.
+     * @param {any} context of callback to remove.
      */
-    DefaultCompositionProvider.prototype.off = function (
-        domainObject,
+    off(domainObject,
         event,
         callback,
-        context
-    ) {
+        context) {
+
+        /** @type {string} */
         const keyString = objectUtils.makeKeyString(domainObject.identifier);
         const objectListeners = this.listeningTo[keyString];
 
@@ -160,57 +137,64 @@ define([
         if (!objectListeners.add.length && !objectListeners.remove.length && !objectListeners.reorder.length) {
             delete this.listeningTo[keyString];
         }
-    };
-
+    }
     /**
      * Remove a domain object from another domain object's composition.
      *
      * This method is optional; if not present, adding to a domain object's
      * composition using this provider will be disallowed.
      *
-     * @param {module:openmct.DomainObject} domainObject the domain object
+     * @override
+     * @param {DomainObject} domainObject the domain object
      *        which should have its composition modified
-     * @param {module:openmct.DomainObject} child the domain object to remove
-     * @memberof module:openmct.CompositionProvider#
+     * @param {Identifier} childId the domain object to remove
      * @method remove
      */
-    DefaultCompositionProvider.prototype.remove = function (domainObject, childId) {
+    remove(domainObject, childId) {
         let composition = domainObject.composition.filter(function (child) {
             return !(childId.namespace === child.namespace
-                && childId.key === child.key);
+                      && childId.key === child.key);
         });
 
         this.publicAPI.objects.mutate(domainObject, 'composition', composition);
-    };
-
+    }
     /**
      * Add a domain object to another domain object's composition.
      *
      * This method is optional; if not present, adding to a domain object's
      * composition using this provider will be disallowed.
      *
-     * @param {module:openmct.DomainObject} domainObject the domain object
+     * @override
+     * @param {DomainObject} parent the domain object
      *        which should have its composition modified
-     * @param {module:openmct.DomainObject} child the domain object to add
-     * @memberof module:openmct.CompositionProvider#
+     * @param {Identifier} childId the domain object to add
      * @method add
      */
-    DefaultCompositionProvider.prototype.add = function (parent, childId) {
+    add(parent, childId) {
         if (!this.includes(parent, childId)) {
             parent.composition.push(childId);
             this.publicAPI.objects.mutate(parent, 'composition', parent.composition);
         }
-    };
+    }
 
     /**
-     * @private
+     * @override
+     * @param {DomainObject} parent
+     * @param {Identifier} childId
+     * @returns {boolean}
      */
-    DefaultCompositionProvider.prototype.includes = function (parent, childId) {
-        return parent.composition.some(composee =>
-            this.publicAPI.objects.areIdsEqual(composee, childId));
-    };
+    includes(parent, childId) {
+        return parent.composition.some(composee => this.publicAPI.objects.areIdsEqual(composee, childId));
+    }
 
-    DefaultCompositionProvider.prototype.reorder = function (domainObject, oldIndex, newIndex) {
+    /**
+     * @override
+     * @param {DomainObject} domainObject
+     * @param {number} oldIndex
+     * @param {number} newIndex
+     * @returns
+     */
+    reorder(domainObject, oldIndex, newIndex) {
         let newComposition = domainObject.composition.slice();
         let removeId = oldIndex > newIndex ? oldIndex + 1 : oldIndex;
         let insertPosition = oldIndex < newIndex ? newIndex + 1 : newIndex;
@@ -241,6 +225,7 @@ define([
 
         this.publicAPI.objects.mutate(domainObject, 'composition', newComposition);
 
+        /** @type {string} */
         let id = objectUtils.makeKeyString(domainObject.identifier);
         const listeners = this.listeningTo[id];
 
@@ -257,66 +242,5 @@ define([
                 listener.callback(reorderPlan);
             }
         }
-    };
-
-    /**
-     * Listens on general mutation topic, using injector to fetch to avoid
-     * circular dependencies.
-     *
-     * @private
-     */
-    DefaultCompositionProvider.prototype.establishTopicListener = function () {
-        if (this.topicListener) {
-            return;
-        }
-
-        this.publicAPI.objects.eventEmitter.on('mutation', this.onMutation);
-        this.topicListener = () => {
-            this.publicAPI.objects.eventEmitter.off('mutation', this.onMutation);
-        };
-    };
-
-    /**
-     * Handles mutation events.  If there are active listeners for the mutated
-     * object, detects changes to composition and triggers necessary events.
-     *
-     * @private
-     */
-    DefaultCompositionProvider.prototype.onMutation = function (oldDomainObject) {
-        const id = objectUtils.makeKeyString(oldDomainObject.identifier);
-        const listeners = this.listeningTo[id];
-
-        if (!listeners) {
-            return;
-        }
-
-        const oldComposition = listeners.composition.map(objectUtils.makeKeyString);
-        const newComposition = oldDomainObject.composition.map(objectUtils.makeKeyString);
-
-        const added = _.difference(newComposition, oldComposition).map(objectUtils.parseKeyString);
-        const removed = _.difference(oldComposition, newComposition).map(objectUtils.parseKeyString);
-
-        function notify(value) {
-            return function (listener) {
-                if (listener.context) {
-                    listener.callback.call(listener.context, value);
-                } else {
-                    listener.callback(value);
-                }
-            };
-        }
-
-        listeners.composition = newComposition.map(objectUtils.parseKeyString);
-
-        added.forEach(function (addedChild) {
-            listeners.add.forEach(notify(addedChild));
-        });
-
-        removed.forEach(function (removedChild) {
-            listeners.remove.forEach(notify(removedChild));
-        });
-
-    };
-
-    return DefaultCompositionProvider;
-});
+    }
+}

src/api/objects/ObjectAPI.js

@@ -33,7 +33,7 @@ import InMemorySearchProvider from './InMemorySearchProvider';
 /**
  * Uniquely identifies a domain object.
  *
- * @typedef Identifier
+ * @typedef {object} Identifier
  * @property {string} namespace the namespace to/from which this domain
  *           object should be loaded/stored.
  * @property {string} key a unique identifier for the domain object
@@ -50,8 +50,8 @@ import InMemorySearchProvider from './InMemorySearchProvider';
  * A few common properties are defined for domain objects. Beyond these,
  * individual types of domain objects may add more as they see fit.
  *
- * @typedef DomainObject
- * @property {module:openmct.ObjectAPI~Identifier} identifier a key/namespace pair which
+ * @typedef {object} DomainObject
+ * @property {Identifier} identifier a key/namespace pair which
  *           uniquely identifies this domain object
  * @property {string} type the type of domain object
  * @property {string} name the human-readable name for this domain object
@@ -59,19 +59,19 @@ import InMemorySearchProvider from './InMemorySearchProvider';
  *           object
  * @property {number} [modified] the time, in milliseconds since the UNIX
  *           epoch, at which this domain object was last modified
- * @property {module:openmct.ObjectAPI~Identifier[]} [composition] if
+ * @property {Identifier[]} [composition] if
  *           present, this will be used by the default composition provider
  *           to load domain objects
- * @memberof module:openmct
+ * @memberof module:openmct.ObjectAPI~
  */
 
 /**
-    * @readonly
-    * @enum {String} SEARCH_TYPES
-    * @property {String} OBJECTS Search for objects
-    * @property {String} ANNOTATIONS Search for annotations
-    * @property {String} TAGS Search for tags
-*/
+  * @readonly
+  * @enum {string} SEARCH_TYPES
+  * @property {string} OBJECTS Search for objects
+  * @property {string} ANNOTATIONS Search for annotations
+  * @property {string} TAGS Search for tags
+  */
 
 /**
  * Utilities for loading, saving, and manipulating domain objects.
@@ -96,7 +96,7 @@ export default class ObjectAPI {
         this.cache = {};
         this.interceptorRegistry = new InterceptorRegistry();
 
-        this.SYNCHRONIZED_OBJECT_TYPES = ['notebook', 'plan', 'annotation'];
+        this.SYNCHRONIZED_OBJECT_TYPES = ['notebook', 'restricted-notebook', 'plan', 'annotation'];
 
         this.errors = {
             Conflict: ConflictError
@@ -204,13 +204,13 @@ export default class ObjectAPI {
         }
 
         identifier = utils.parseKeyString(identifier);
-        let dirtyObject;
-        if (this.isTransactionActive()) {
-            dirtyObject = this.transaction.getDirtyObject(identifier);
-        }
 
-        if (dirtyObject) {
-            return Promise.resolve(dirtyObject);
+        if (this.isTransactionActive()) {
+            let dirtyObject = this.transaction.getDirtyObject(identifier);
+
+            if (dirtyObject) {
+                return Promise.resolve(dirtyObject);
+            }
         }
 
         const provider = this.getProvider(identifier);
@@ -354,10 +354,8 @@ export default class ObjectAPI {
      * @returns {Promise} a promise which will resolve when the domain object
      *          has been saved, or be rejected if it cannot be saved
      */
-    save(domainObject) {
-        let provider = this.getProvider(domainObject.identifier);
-        let savedResolve;
-        let savedReject;
+    async save(domainObject) {
+        const provider = this.getProvider(domainObject.identifier);
         let result;
 
         if (!this.isPersistable(domainObject.identifier)) {
@@ -366,27 +364,37 @@ export default class ObjectAPI {
             result = Promise.resolve(true);
         } else {
             const persistedTime = Date.now();
-            if (domainObject.persisted === undefined) {
-                result = new Promise((resolve, reject) => {
-                    savedResolve = resolve;
-                    savedReject = reject;
-                });
-                domainObject.persisted = persistedTime;
-                const newObjectPromise = provider.create(domainObject);
-                if (newObjectPromise) {
-                    newObjectPromise.then(response => {
-                        this.mutate(domainObject, 'persisted', persistedTime);
-                        savedResolve(response);
-                    }).catch((error) => {
-                        savedReject(error);
-                    });
-                } else {
-                    result = Promise.reject(`[ObjectAPI][save] Object provider returned ${newObjectPromise} when creating new object.`);
-                }
+            const username = await this.#getCurrentUsername();
+            const isNewObject = domainObject.persisted === undefined;
+            let savedResolve;
+            let savedReject;
+            let savedObjectPromise;
+
+            result = new Promise((resolve, reject) => {
+                savedResolve = resolve;
+                savedReject = reject;
+            });
+
+            this.#mutate(domainObject, 'persisted', persistedTime);
+            this.#mutate(domainObject, 'modifiedBy', username);
+
+            if (isNewObject) {
+                this.#mutate(domainObject, 'created', persistedTime);
+                this.#mutate(domainObject, 'createdBy', username);
+
+                savedObjectPromise = provider.create(domainObject);
             } else {
-                domainObject.persisted = persistedTime;
-                this.mutate(domainObject, 'persisted', persistedTime);
-                result = provider.update(domainObject);
+                savedObjectPromise = provider.update(domainObject);
+            }
+
+            if (savedObjectPromise) {
+                savedObjectPromise.then(response => {
+                    savedResolve(response);
+                }).catch((error) => {
+                    savedReject(error);
+                });
+            } else {
+                result = Promise.reject(`[ObjectAPI][save] Object provider returned ${savedObjectPromise} when ${isNewObject ? 'creating new' : 'updating'} object.`);
             }
         }
 
@@ -399,8 +407,21 @@ export default class ObjectAPI {
         });
     }
 
+    async #getCurrentUsername() {
+        const user = await this.openmct.user.getCurrentUser();
+        let username;
+
+        if (user !== undefined) {
+            username = user.getName();
+        }
+
+        return username;
+    }
+
     /**
      * After entering into edit mode, creates a new instance of Transaction to keep track of changes in Objects
+     *
+     * @returns {Transaction} a new Transaction that was just created
      */
     startTransaction() {
         if (this.isTransactionActive()) {
@@ -408,6 +429,8 @@ export default class ObjectAPI {
         }
 
         this.transaction = new Transaction(this);
+
+        return this.transaction;
     }
 
     /**
@@ -480,14 +503,16 @@ export default class ObjectAPI {
     }
 
     /**
-     * Modify a domain object.
+     * Modify a domain object. Internal to ObjectAPI, won't call save after.
+     * @private
+     *
      * @param {module:openmct.DomainObject} object the object to mutate
      * @param {string} path the property to modify
      * @param {*} value the new value for this property
      * @method mutate
      * @memberof module:openmct.ObjectAPI#
      */
-    mutate(domainObject, path, value) {
+    #mutate(domainObject, path, value) {
         if (!this.supportsMutation(domainObject.identifier)) {
             throw `Error: Attempted to mutate immutable object ${domainObject.name}`;
         }
@@ -508,6 +533,18 @@ export default class ObjectAPI {
             //Destroy temporary mutable object
             this.destroyMutable(mutableDomainObject);
         }
+    }
+
+    /**
+     * Modify a domain object and save.
+     * @param {module:openmct.DomainObject} object the object to mutate
+     * @param {string} path the property to modify
+     * @param {*} value the new value for this property
+     * @method mutate
+     * @memberof module:openmct.ObjectAPI#
+     */
+    mutate(domainObject, path, value) {
+        this.#mutate(domainObject, path, value);
 
         if (this.isTransactionActive()) {
             this.transaction.add(domainObject);
@@ -684,7 +721,7 @@ export default class ObjectAPI {
     }
 
     isTransactionActive() {
-        return Boolean(this.transaction && this.openmct.editor.isEditing());
+        return this.transaction !== undefined && this.transaction !== null;
     }
 
     #hasAlreadyBeenPersisted(domainObject) {

src/api/objects/ObjectAPISpec.js

@@ -8,13 +8,27 @@ describe("The Object API", () => {
     let mockDomainObject;
     const TEST_NAMESPACE = "test-namespace";
     const TEST_KEY = "test-key";
+    const USERNAME = 'Joan Q Public';
     const FIFTEEN_MINUTES = 15 * 60 * 1000;
 
     beforeEach((done) => {
         typeRegistry = jasmine.createSpyObj('typeRegistry', [
             'get'
         ]);
+        const userProvider = {
+            isLoggedIn() {
+                return true;
+            },
+            getCurrentUser() {
+                return Promise.resolve({
+                    getName() {
+                        return USERNAME;
+                    }
+                });
+            }
+        };
         openmct = createOpenMct();
+        openmct.user.setProvider(userProvider);
         objectAPI = openmct.objects;
 
         openmct.editor = {};
@@ -63,19 +77,34 @@ describe("The Object API", () => {
                 mockProvider.update.and.returnValue(Promise.resolve(true));
                 objectAPI.addProvider(TEST_NAMESPACE, mockProvider);
             });
-            it("Calls 'create' on provider if object is new", () => {
-                objectAPI.save(mockDomainObject);
+            it("Adds a 'created' timestamp to new objects", async () => {
+                await objectAPI.save(mockDomainObject);
+                expect(mockDomainObject.created).not.toBeUndefined();
+            });
+            it("Calls 'create' on provider if object is new", async () => {
+                await objectAPI.save(mockDomainObject);
                 expect(mockProvider.create).toHaveBeenCalled();
                 expect(mockProvider.update).not.toHaveBeenCalled();
             });
-            it("Calls 'update' on provider if object is not new", () => {
+            it("Calls 'update' on provider if object is not new", async () => {
                 mockDomainObject.persisted = Date.now() - FIFTEEN_MINUTES;
                 mockDomainObject.modified = Date.now();
 
-                objectAPI.save(mockDomainObject);
+                await objectAPI.save(mockDomainObject);
                 expect(mockProvider.create).not.toHaveBeenCalled();
                 expect(mockProvider.update).toHaveBeenCalled();
             });
+            it("Sets the current user for 'createdBy' on new objects", async () => {
+                await objectAPI.save(mockDomainObject);
+                expect(mockDomainObject.createdBy).toBe(USERNAME);
+            });
+            it("Sets the current user for 'modifedBy' on existing objects", async () => {
+                mockDomainObject.persisted = Date.now() - FIFTEEN_MINUTES;
+                mockDomainObject.modified = Date.now();
+
+                await objectAPI.save(mockDomainObject);
+                expect(mockDomainObject.modifiedBy).toBe(USERNAME);
+            });
 
             it("Does not persist if the object is unchanged", () => {
                 mockDomainObject.persisted =

src/api/telemetry/TelemetryAPI.js

@@ -27,7 +27,6 @@ import TelemetryMetadataManager from './TelemetryMetadataManager';
 import TelemetryValueFormatter from './TelemetryValueFormatter';
 import DefaultMetadataProvider from './DefaultMetadataProvider';
 import objectUtils from 'objectUtils';
-import _ from 'lodash';
 
 export default class TelemetryAPI {
 
@@ -73,7 +72,7 @@ export default class TelemetryAPI {
      * @returns {boolean} true if the object is a telemetry object.
      */
     isTelemetryObject(domainObject) {
-        return Boolean(this.findMetadataProvider(domainObject));
+        return Boolean(this.#findMetadataProvider(domainObject));
     }
 
     /**
@@ -87,7 +86,7 @@ export default class TelemetryAPI {
      * @memberof module:openmct.TelemetryAPI~TelemetryProvider#
      */
     canProvideTelemetry(domainObject) {
-        return Boolean(this.findSubscriptionProvider(domainObject))
+        return Boolean(this.#findSubscriptionProvider(domainObject))
                 || Boolean(this.findRequestProvider(domainObject));
     }
 
@@ -120,7 +119,7 @@ export default class TelemetryAPI {
     /**
      * @private
      */
-    findSubscriptionProvider() {
+    #findSubscriptionProvider() {
         const args = Array.prototype.slice.apply(arguments);
         function supportsDomainObject(provider) {
             return provider.supportsSubscribe.apply(provider, args);
@@ -130,9 +129,10 @@ export default class TelemetryAPI {
     }
 
     /**
-     * @private
+     * Returns a telemetry request provider that supports
+     * a given domain object and options.
      */
-    findRequestProvider(domainObject) {
+    findRequestProvider() {
         const args = Array.prototype.slice.apply(arguments);
         function supportsDomainObject(provider) {
             return provider.supportsRequest.apply(provider, args);
@@ -144,7 +144,7 @@ export default class TelemetryAPI {
     /**
      * @private
      */
-    findMetadataProvider(domainObject) {
+    #findMetadataProvider(domainObject) {
         return this.metadataProviders.filter(function (p) {
             return p.supportsMetadata(domainObject);
         })[0];
@@ -153,7 +153,7 @@ export default class TelemetryAPI {
     /**
      * @private
      */
-    findLimitEvaluator(domainObject) {
+    #findLimitEvaluator(domainObject) {
         return this.limitProviders.filter(function (p) {
             return p.supportsLimits(domainObject);
         })[0];
@@ -161,6 +161,7 @@ export default class TelemetryAPI {
 
     /**
      * @private
+     * Though used in TelemetryCollection as well
      */
     standardizeRequestOptions(options) {
         if (!Object.prototype.hasOwnProperty.call(options, 'start')) {
@@ -174,6 +175,10 @@ export default class TelemetryAPI {
         if (!Object.prototype.hasOwnProperty.call(options, 'domain')) {
             options.domain = this.openmct.time.timeSystem().key;
         }
+
+        if (!Object.prototype.hasOwnProperty.call(options, 'timeContext')) {
+            options.timeContext = this.openmct.time;
+        }
     }
 
     /**
@@ -241,7 +246,7 @@ export default class TelemetryAPI {
     /**
      * Request historical telemetry for a domain object.
      * The `options` argument allows you to specify filters
-     * (start, end, etc.), sort order, and strategies for retrieving
+     * (start, end, etc.), sort order, time context, and strategies for retrieving
      * telemetry (aggregation, latest available, etc.).
      *
      * @method request
@@ -255,7 +260,7 @@ export default class TelemetryAPI {
      */
     async request(domainObject) {
         if (this.noRequestProviderForAllObjects) {
-            return Promise.resolve([]);
+            return [];
         }
 
         if (arguments.length === 1) {
@@ -273,22 +278,24 @@ export default class TelemetryAPI {
         if (!provider) {
             this.requestAbortControllers.delete(abortController);
 
-            return this.handleMissingRequestProvider(domainObject);
+            return this.#handleMissingRequestProvider(domainObject);
         }
 
         arguments[1] = await this.applyRequestInterceptors(domainObject, arguments[1]);
+        try {
+            const telemetry = await provider.request(...arguments);
 
-        return provider.request.apply(provider, arguments)
-            .catch((rejected) => {
-                if (rejected.name !== 'AbortError') {
-                    this.openmct.notifications.error('Error requesting telemetry data, see console for details');
-                    console.error(rejected);
-                }
+            return telemetry;
+        } catch (error) {
+            if (error.name !== 'AbortError') {
+                this.openmct.notifications.error('Error requesting telemetry data, see console for details');
+                console.error(error);
+            }
 
-                return Promise.reject(rejected);
-            }).finally(() => {
-                this.requestAbortControllers.delete(abortController);
-            });
+            throw new Error(error);
+        } finally {
+            this.requestAbortControllers.delete(abortController);
+        }
     }
 
     /**
@@ -306,7 +313,7 @@ export default class TelemetryAPI {
      *          the subscription
      */
     subscribe(domainObject, callback, options) {
-        const provider = this.findSubscriptionProvider(domainObject);
+        const provider = this.#findSubscriptionProvider(domainObject);
 
         if (!this.subscribeCache) {
             this.subscribeCache = {};
@@ -353,7 +360,7 @@ export default class TelemetryAPI {
      */
     getMetadata(domainObject) {
         if (!this.metadataCache.has(domainObject)) {
-            const metadataProvider = this.findMetadataProvider(domainObject);
+            const metadataProvider = this.#findMetadataProvider(domainObject);
             if (!metadataProvider) {
                 return;
             }
@@ -369,33 +376,6 @@ export default class TelemetryAPI {
         return this.metadataCache.get(domainObject);
     }
 
-    /**
-     * Return an array of valueMetadatas that are common to all supplied
-     * telemetry objects and match the requested hints.
-     *
-     */
-    commonValuesForHints(metadatas, hints) {
-        const options = metadatas.map(function (metadata) {
-            const values = metadata.valuesForHints(hints);
-
-            return _.keyBy(values, 'key');
-        }).reduce(function (a, b) {
-            const results = {};
-            Object.keys(a).forEach(function (key) {
-                if (Object.prototype.hasOwnProperty.call(b, key)) {
-                    results[key] = a[key];
-                }
-            });
-
-            return results;
-        });
-        const sortKeys = hints.map(function (h) {
-            return 'hints.' + h;
-        });
-
-        return _.sortBy(options, sortKeys);
-    }
-
     /**
      * Get a value formatter for a given valueMetadata.
      *
@@ -450,7 +430,7 @@ export default class TelemetryAPI {
      *
      * @returns Promise
      */
-    handleMissingRequestProvider(domainObject) {
+    #handleMissingRequestProvider(domainObject) {
         this.noRequestProviderForAllObjects = this.requestProviders.every(requestProvider => {
             const supportsRequest = requestProvider.supportsRequest.apply(requestProvider, arguments);
             const hasRequestProvider = Object.prototype.hasOwnProperty.call(requestProvider, 'request') && typeof requestProvider.request === 'function';
@@ -540,7 +520,7 @@ export default class TelemetryAPI {
      * @memberof module:openmct.TelemetryAPI~TelemetryProvider#
      */
     getLimitEvaluator(domainObject) {
-        const provider = this.findLimitEvaluator(domainObject);
+        const provider = this.#findLimitEvaluator(domainObject);
         if (!provider) {
             return {
                 evaluate: function () {}
@@ -578,7 +558,7 @@ export default class TelemetryAPI {
      * @memberof module:openmct.TelemetryAPI~TelemetryProvider#
      */
     getLimits(domainObject) {
-        const provider = this.findLimitEvaluator(domainObject);
+        const provider = this.#findLimitEvaluator(domainObject);
         if (!provider || !provider.getLimits) {
             return {
                 limits: function () {

src/api/telemetry/TelemetryAPISpec.js

@@ -23,11 +23,11 @@ import { createOpenMct, resetApplicationState } from 'utils/testing';
 import TelemetryAPI from './TelemetryAPI';
 import TelemetryCollection from './TelemetryCollection';
 
-describe('Telemetry API', function () {
+describe('Telemetry API', () => {
     let openmct;
     let telemetryAPI;
 
-    beforeEach(function () {
+    beforeEach(() => {
         openmct = {
             time: jasmine.createSpyObj('timeAPI', [
                 'timeSystem',
@@ -47,11 +47,11 @@ describe('Telemetry API', function () {
 
     });
 
-    describe('telemetry providers', function () {
+    describe('telemetry providers', () => {
         let telemetryProvider;
         let domainObject;
 
-        beforeEach(function () {
+        beforeEach(() => {
             telemetryProvider = jasmine.createSpyObj('telemetryProvider', [
                 'supportsSubscribe',
                 'subscribe',
@@ -73,19 +73,16 @@ describe('Telemetry API', function () {
             };
         });
 
-        it('provides consistent results without providers', function (done) {
+        it('provides consistent results without providers', async () => {
             const unsubscribe = telemetryAPI.subscribe(domainObject);
 
             expect(unsubscribe).toEqual(jasmine.any(Function));
 
-            telemetryAPI.request(domainObject)
-                .then((data) => {
-                    expect(data).toEqual([]);
-                })
-                .finally(done);
+            const data = await telemetryAPI.request(domainObject);
+            expect(data).toEqual([]);
         });
 
-        it('skips providers that do not match', function (done) {
+        it('skips providers that do not match', async () => {
             telemetryProvider.supportsSubscribe.and.returnValue(false);
             telemetryProvider.supportsRequest.and.returnValue(false);
             telemetryProvider.request.and.returnValue(Promise.resolve([]));
@@ -98,14 +95,13 @@ describe('Telemetry API', function () {
             expect(telemetryProvider.subscribe).not.toHaveBeenCalled();
             expect(unsubscribe).toEqual(jasmine.any(Function));
 
-            telemetryAPI.request(domainObject).then((response) => {
-                expect(telemetryProvider.supportsRequest)
-                    .toHaveBeenCalledWith(domainObject, jasmine.any(Object));
-                expect(telemetryProvider.request).not.toHaveBeenCalled();
-            }).finally(done);
+            await telemetryAPI.request(domainObject);
+            expect(telemetryProvider.supportsRequest)
+                .toHaveBeenCalledWith(domainObject, jasmine.any(Object));
+            expect(telemetryProvider.request).not.toHaveBeenCalled();
         });
 
-        it('sends subscribe calls to matching providers', function () {
+        it('sends subscribe calls to matching providers', () => {
             const unsubFunc = jasmine.createSpy('unsubscribe');
             telemetryProvider.subscribe.and.returnValue(unsubFunc);
             telemetryProvider.supportsSubscribe.and.returnValue(true);
@@ -133,7 +129,7 @@ describe('Telemetry API', function () {
             expect(callback).not.toHaveBeenCalledWith('otherValue');
         });
 
-        it('subscribes once per object', function () {
+        it('subscribes once per object', () => {
             const unsubFunc = jasmine.createSpy('unsubscribe');
             telemetryProvider.subscribe.and.returnValue(unsubFunc);
             telemetryProvider.supportsSubscribe.and.returnValue(true);
@@ -164,7 +160,7 @@ describe('Telemetry API', function () {
             expect(callbacktwo).not.toHaveBeenCalledWith('anotherValue');
         });
 
-        it('only deletes subscription cache when there are no more subscribers', function () {
+        it('only deletes subscription cache when there are no more subscribers', () => {
             const unsubFunc = jasmine.createSpy('unsubscribe');
             telemetryProvider.subscribe.and.returnValue(unsubFunc);
             telemetryProvider.supportsSubscribe.and.returnValue(true);
@@ -187,7 +183,7 @@ describe('Telemetry API', function () {
             unsubscribeThree();
         });
 
-        it('does subscribe/unsubscribe', function () {
+        it('does subscribe/unsubscribe', () => {
             const unsubFunc = jasmine.createSpy('unsubscribe');
             telemetryProvider.subscribe.and.returnValue(unsubFunc);
             telemetryProvider.supportsSubscribe.and.returnValue(true);
@@ -203,7 +199,7 @@ describe('Telemetry API', function () {
             unsubscribe();
         });
 
-        it('subscribes for different object', function () {
+        it('subscribes for different object', () => {
             const unsubFuncs = [];
             const notifiers = [];
             telemetryProvider.supportsSubscribe.and.returnValue(true);
@@ -243,120 +239,120 @@ describe('Telemetry API', function () {
             expect(unsubFuncs[1]).toHaveBeenCalled();
         });
 
-        it('sends requests to matching providers', function (done) {
+        it('sends requests to matching providers', async () => {
             const telemPromise = Promise.resolve([]);
             telemetryProvider.supportsRequest.and.returnValue(true);
             telemetryProvider.request.and.returnValue(telemPromise);
             telemetryAPI.addProvider(telemetryProvider);
 
-            telemetryAPI.request(domainObject).then(() => {
-                expect(telemetryProvider.supportsRequest).toHaveBeenCalledWith(
-                    domainObject,
-                    jasmine.any(Object)
-                );
-                expect(telemetryProvider.request).toHaveBeenCalledWith(
-                    domainObject,
-                    jasmine.any(Object)
-                );
-            }).finally(done);
+            await telemetryAPI.request(domainObject);
+            expect(telemetryProvider.supportsRequest).toHaveBeenCalledWith(
+                domainObject,
+                jasmine.any(Object)
+            );
+            expect(telemetryProvider.request).toHaveBeenCalledWith(
+                domainObject,
+                jasmine.any(Object)
+            );
         });
 
-        it('generates default request options', function (done) {
+        it('generates default request options', async () => {
             telemetryProvider.supportsRequest.and.returnValue(true);
             telemetryProvider.request.and.returnValue(Promise.resolve([]));
             telemetryAPI.addProvider(telemetryProvider);
 
-            telemetryAPI.request(domainObject).then(() => {
-                const { signal } = new AbortController();
-                expect(telemetryProvider.supportsRequest).toHaveBeenCalledWith(
-                    jasmine.any(Object),
-                    {
-                        signal,
-                        start: 0,
-                        end: 1,
-                        domain: 'system'
-                    }
-                );
+            await telemetryAPI.request(domainObject);
+            const { signal } = new AbortController();
+            expect(telemetryProvider.supportsRequest).toHaveBeenCalledWith(
+                jasmine.any(Object),
+                {
+                    signal,
+                    start: 0,
+                    end: 1,
+                    domain: 'system',
+                    timeContext: jasmine.any(Object)
+                }
+            );
 
-                expect(telemetryProvider.request).toHaveBeenCalledWith(
-                    jasmine.any(Object),
-                    {
-                        signal,
-                        start: 0,
-                        end: 1,
-                        domain: 'system'
-                    }
-                );
+            expect(telemetryProvider.request).toHaveBeenCalledWith(
+                jasmine.any(Object),
+                {
+                    signal,
+                    start: 0,
+                    end: 1,
+                    domain: 'system',
+                    timeContext: jasmine.any(Object)
+                }
+            );
 
-                telemetryProvider.supportsRequest.calls.reset();
-                telemetryProvider.request.calls.reset();
+            telemetryProvider.supportsRequest.calls.reset();
+            telemetryProvider.request.calls.reset();
 
-                telemetryAPI.request(domainObject, {}).then(() => {
-                    expect(telemetryProvider.supportsRequest).toHaveBeenCalledWith(
-                        jasmine.any(Object),
-                        {
-                            signal,
-                            start: 0,
-                            end: 1,
-                            domain: 'system'
-                        }
-                    );
-
-                    expect(telemetryProvider.request).toHaveBeenCalledWith(
-                        jasmine.any(Object),
-                        {
-                            signal,
-                            start: 0,
-                            end: 1,
-                            domain: 'system'
-                        }
-                    );
-                });
-            }).finally(done);
+            await telemetryAPI.request(domainObject, {});
+            expect(telemetryProvider.supportsRequest).toHaveBeenCalledWith(
+                jasmine.any(Object),
+                {
+                    signal,
+                    start: 0,
+                    end: 1,
+                    domain: 'system',
+                    timeContext: jasmine.any(Object)
+                }
+            );
 
+            expect(telemetryProvider.request).toHaveBeenCalledWith(
+                jasmine.any(Object),
+                {
+                    signal,
+                    start: 0,
+                    end: 1,
+                    domain: 'system',
+                    timeContext: jasmine.any(Object)
+                }
+            );
         });
 
-        it('do not overwrite existing request options', function (done) {
+        it('do not overwrite existing request options', async () => {
             telemetryProvider.supportsRequest.and.returnValue(true);
             telemetryProvider.request.and.returnValue(Promise.resolve([]));
             telemetryAPI.addProvider(telemetryProvider);
 
-            telemetryAPI.request(domainObject, {
+            await telemetryAPI.request(domainObject, {
                 start: 20,
                 end: 30,
                 domain: 'someDomain'
-            }).then(() => {
-                const { signal } = new AbortController();
-                expect(telemetryProvider.supportsRequest).toHaveBeenCalledWith(
-                    jasmine.any(Object),
-                    {
-                        start: 20,
-                        end: 30,
-                        domain: 'someDomain',
-                        signal
-                    }
-                );
+            });
+            const { signal } = new AbortController();
+            expect(telemetryProvider.supportsRequest).toHaveBeenCalledWith(
+                jasmine.any(Object),
+                {
+                    start: 20,
+                    end: 30,
+                    domain: 'someDomain',
+                    signal,
+                    timeContext: jasmine.any(Object)
+                }
+            );
 
-                expect(telemetryProvider.request).toHaveBeenCalledWith(
-                    jasmine.any(Object),
-                    {
-                        start: 20,
-                        end: 30,
-                        domain: 'someDomain',
-                        signal
-                    }
-                );
-
-            }).finally(done);
+            expect(telemetryProvider.request).toHaveBeenCalledWith(
+                jasmine.any(Object),
+                {
+                    start: 20,
+                    end: 30,
+                    domain: 'someDomain',
+                    signal,
+                    timeContext: jasmine.any(Object)
+                }
+            );
         });
     });
 
-    describe('metadata', function () {
+    describe('metadata', () => {
         let mockMetadata = {};
         let mockObjectType = {
             definition: {}
         };
-        beforeEach(function () {
+        beforeEach(() => {
             telemetryAPI.addProvider({
                 key: 'mockMetadataProvider',
                 supportsMetadata() {
@@ -369,7 +365,7 @@ describe('Telemetry API', function () {
             openmct.types.get.and.returnValue(mockObjectType);
         });
 
-        it('respects explicit priority', function () {
+        it('respects explicit priority', () => {
             mockMetadata.values = [
                 {
                     key: "name",
@@ -408,7 +404,7 @@ describe('Telemetry API', function () {
                 expect(value.hints.priority).toBe(index + 1);
             });
         });
-        it('if no explicit priority, defaults to order defined', function () {
+        it('if no explicit priority, defaults to order defined', () => {
             mockMetadata.values = [
                 {
                     key: "name",
@@ -435,7 +431,7 @@ describe('Telemetry API', function () {
                 expect(value.key).toBe(mockMetadata.values[index].key);
             });
         });
-        it('respects domain priority', function () {
+        it('respects domain priority', () => {
             mockMetadata.values = [
                 {
                     key: "name",
@@ -477,7 +473,7 @@ describe('Telemetry API', function () {
             expect(values[0].key).toBe('timestamp-local');
             expect(values[1].key).toBe('timestamp-utc');
         });
-        it('respects range priority', function () {
+        it('respects range priority', () => {
             mockMetadata.values = [
                 {
                     key: "name",
@@ -519,7 +515,7 @@ describe('Telemetry API', function () {
             expect(values[0].key).toBe('cos');
             expect(values[1].key).toBe('sin');
         });
-        it('respects priority and domain ordering', function () {
+        it('respects priority and domain ordering', () => {
             mockMetadata.values = [
                 {
                     key: "id",
@@ -588,7 +584,7 @@ describe('Telemetry API', function () {
             definition: {}
         };
 
-        beforeEach(function () {
+        beforeEach(() => {
             openmct.telemetry = telemetryAPI;
             telemetryAPI.addProvider({
                 key: 'mockMetadataProvider',
@@ -644,16 +640,14 @@ describe('Telemetery', () => {
         return resetApplicationState(openmct);
     });
 
-    it('should not abort request without navigation', function (done) {
+    it('should not abort request without navigation', async () => {
         telemetryAPI.addProvider(telemetryProvider);
 
-        telemetryAPI.request({}).finally(() => {
-            expect(watchedSignal.aborted).toBe(false);
-            done();
-        });
+        await telemetryAPI.request({});
+        expect(watchedSignal.aborted).toBe(false);
     });
 
-    it('should abort request on navigation', function (done) {
+    it('should abort request on navigation', (done) => {
         telemetryAPI.addProvider(telemetryProvider);
 
         telemetryAPI.request({}).finally(() => {

src/api/time/TimeAPISpec.js

@@ -229,6 +229,25 @@ describe("The Time API", function () {
             expect(api.clock()).toBeUndefined();
         });
 
+        it('Provides a default time context', () => {
+            const timeContext = api.getContextForView([]);
+            expect(timeContext).not.toBe(null);
+        });
+
+        it("Without a clock, is in fixed time mode", () => {
+            const timeContext = api.getContextForView([]);
+            expect(timeContext.isRealTime()).toBe(false);
+        });
+
+        it("Provided a clock, is in real-time mode", () => {
+            const timeContext = api.getContextForView([]);
+            timeContext.clock('mts', {
+                start: 0,
+                end: 1
+            });
+            expect(timeContext.isRealTime()).toBe(true);
+        });
+
     });
 
     it("on tick, observes offsets, and indicates tick in bounds callback", function () {

src/api/time/TimeContext.js

@@ -362,6 +362,18 @@ class TimeContext extends EventEmitter {
         this.boundsVal = newBounds;
         this.emit('bounds', this.boundsVal, true);
     }
+
+    /**
+     * Checks if this time context is in real-time mode or not.
+     * @returns {boolean} true if this context is in real-time mode, false if not
+    */
+    isRealTime() {
+        if (this.clock()) {
+            return true;
+        }
+
+        return false;
+    }
 }
 
 export default TimeContext;

src/plugins/LADTable/components/LADRow.vue

@@ -114,6 +114,8 @@ export default {
         this.formats = this.openmct.telemetry.getFormatMap(this.metadata);
         this.keyString = this.openmct.objects.makeKeyString(this.domainObject.identifier);
 
+        this.timeContext = this.openmct.time.getContextForView(this.objectPath);
+
         this.limitEvaluator = this.openmct
             .telemetry
             .limitEvaluator(this.domainObject);
@@ -134,7 +136,8 @@ export default {
 
         this.telemetryCollection = this.openmct.telemetry.requestCollection(this.domainObject, {
             size: 1,
-            strategy: 'latest'
+            strategy: 'latest',
+            timeContext: this.timeContext
         });
         this.telemetryCollection.on('add', this.setLatestValues);
         this.telemetryCollection.on('clear', this.resetValues);

src/plugins/LADTable/components/LadTableSet.vue

@@ -33,9 +33,9 @@
     <tbody>
         <template
             v-for="ladTable in ladTableObjects"
+            :key="ladTable.key"
         >
             <tr
-                :key="ladTable.key"
                 class="c-table__group-header js-lad-table-set__table-headers"
             >
                 <td colspan="10">

src/plugins/conditionWidget/components/condition-widget.scss

@@ -30,6 +30,12 @@
     padding: $interiorMarginLg $interiorMarginLg * 2;
 }
 
+.c-condition-widget__label {
+    padding: $interiorMargin;
+    text-align: center;
+    white-space: normal;
+}
+
 a.c-condition-widget {
     // Widget is conditionally made into a <a> when URL property has been defined
     cursor: pointer !important;

src/plugins/displayLayout/components/TelemetryView.vue

@@ -282,12 +282,15 @@ export default {
             this.limitEvaluator = this.openmct.telemetry.limitEvaluator(this.domainObject);
             this.formats = this.openmct.telemetry.getFormatMap(this.metadata);
 
+            this.timeContext = this.openmct.time.getContextForView(this.objectPath);
+
             const valueMetadata = this.metadata ? this.metadata.value(this.item.value) : {};
             this.customStringformatter = this.openmct.telemetry.customStringFormatter(valueMetadata, this.item.format);
 
             this.telemetryCollection = this.openmct.telemetry.requestCollection(this.domainObject, {
                 size: 1,
-                strategy: 'latest'
+                strategy: 'latest',
+                timeContext: this.timeContext
             });
             this.telemetryCollection.on('add', this.setLatestValues);
             this.telemetryCollection.on('clear', this.refreshData);

src/plugins/flexibleLayout/components/container.vue

@@ -45,9 +45,9 @@
     <div class="c-fl-container__frames-holder">
         <template
             v-for="(frame, i) in frames"
+            :key="frame.id"
         >
             <frame-component
-                :key="frame.id"
                 class="c-fl-container__frame"
                 :frame="frame"
                 :index="i"
@@ -57,7 +57,6 @@
             />
 
             <drop-hint
-                :key="'hint-' + i"
                 class="c-fl-frame__drop-hint"
                 :index="i"
                 :allow-drop="allowDrop"
@@ -66,7 +65,6 @@
 
             <resize-handle
                 v-if="(i !== frames.length - 1)"
-                :key="'handle-' + i"
                 :index="i"
                 :orientation="rowsLayout ? 'horizontal' : 'vertical'"
                 :is-editing="isEditing"

src/plugins/flexibleLayout/components/flexibleLayout.vue

@@ -40,10 +40,12 @@
             'c-fl--rows': rowsLayout === true
         }"
     >
-        <template v-for="(container, index) in containers">
+        <template 
+            v-for="(container, index) in containers"
+            :key="`component-${container.id}`"
+        >
             <drop-hint
                 v-if="index === 0 && containers.length > 1"
-                :key="`hint-top-${container.id}`"
                 class="c-fl-frame__drop-hint"
                 :index="-1"
                 :allow-drop="allowContainerDrop"
@@ -51,7 +53,6 @@
             />
 
             <container-component
-                :key="`component-${container.id}`"
                 class="c-fl__container"
                 :index="index"
                 :container="container"
@@ -77,7 +78,6 @@
 
             <drop-hint
                 v-if="containers.length > 1"
-                :key="`hint-bottom-${container.id}`"
                 class="c-fl-frame__drop-hint"
                 :index="index"
                 :allow-drop="allowContainerDrop"

src/plugins/formActions/CreateAction.js

@@ -107,7 +107,7 @@ export default class CreateAction extends PropertiesAction {
         }
 
         const url = '#/browse/' + objectPath
-            .map(object => object && this.openmct.objects.makeKeyString(object.identifier.key))
+            .map(object => object && this.openmct.objects.makeKeyString(object.identifier))
             .reverse()
             .join('/');
 

src/plugins/imagery/components/ImageryTimeView.vue

@@ -256,7 +256,7 @@ export default {
                             isNested: true
                         };
                     },
-                    template: `<swim-lane :is-nested="isNested" :hide-label="true"><template slot="object"><div class="c-imagery-tsv-container"></div></template></swim-lane>`
+                    template: `<swim-lane :is-nested="isNested" :hide-label="true"><slot name="object"><div class="c-imagery-tsv-container"></div></slot></swim-lane>`
                 });
 
                 this.$refs.imageryHolder.appendChild(component.$mount().$el);

src/plugins/imagery/components/ImageryView.vue

@@ -174,7 +174,7 @@
                 :active="focusedImageIndex === index"
                 :selected="focusedImageIndex === index && isPaused"
                 :real-time="!isFixed"
-                @click.native="thumbnailClicked(index)"
+                @click="thumbnailClicked(index)"
             />
         </div>
 

src/plugins/notebook/components/Notebook.vue

@@ -515,7 +515,9 @@ export default {
             });
         },
         removeAnnotations(entryId) {
-            this.openmct.annotation.deleteAnnotations(this.notebookAnnotations[entryId]);
+            if (this.notebookAnnotations[entryId]) {
+                this.openmct.annotation.deleteAnnotations(this.notebookAnnotations[entryId]);
+            }
         },
         checkEntryPos(entry) {
             const entryPos = getEntryPosById(entry.id, this.domainObject, this.selectedSection, this.selectedPage);

src/plugins/persistence/couch/CouchChangesFeed.js

@@ -2,6 +2,9 @@
     const connections = [];
     let connected = false;
     let couchEventSource;
+    let changesFeedUrl;
+    const keepAliveTime = 20 * 1000;
+    let keepAliveTimer;
     const controller = new AbortController();
 
     self.onconnect = function (e) {
@@ -35,7 +38,8 @@
                     return;
                 }
 
-                self.listenForChanges(event.data.url);
+                changesFeedUrl = event.data.url;
+                self.listenForChanges();
             }
         };
 
@@ -63,17 +67,28 @@
         });
     };
 
-    self.listenForChanges = function (url) {
-        console.debug('⇿ Opening CouchDB change feed connection ⇿');
+    self.listenForChanges = function () {
+        if (keepAliveTimer) {
+            clearTimeout(keepAliveTimer);
+        }
 
-        couchEventSource = new EventSource(url);
-        couchEventSource.onerror = self.onerror;
-        couchEventSource.onopen = self.onopen;
+        /**
+         * Once the connection has been opened, poll every 20 seconds to see if the EventSource has closed unexpectedly.
+         * If it has, attempt to reconnect.
+         */
+        keepAliveTimer = setTimeout(self.listenForChanges, keepAliveTime);
 
-        // start listening for events
-        couchEventSource.addEventListener('message', self.onCouchMessage);
-        connected = true;
-        console.debug('⇿ Opened connection ⇿');
+        if (!couchEventSource || couchEventSource.readyState === EventSource.CLOSED) {
+            console.debug('⇿ Opening CouchDB change feed connection ⇿');
+            couchEventSource = new EventSource(changesFeedUrl);
+            couchEventSource.onerror = self.onerror;
+            couchEventSource.onopen = self.onopen;
+
+            // start listening for events
+            couchEventSource.addEventListener('message', self.onCouchMessage);
+            connected = true;
+            console.debug('⇿ Opened connection ⇿');
+        }
     };
 
     self.updateCouchStateIndicator = function () {

src/plugins/persistence/couch/CouchSearchProvider.js

@@ -90,6 +90,10 @@ class CouchSearchProvider {
     }
 
     searchForTags(tagsArray, abortSignal) {
+        if (!tagsArray || !tagsArray.length) {
+            return [];
+        }
+
         const filter = {
             "selector": {
                 "$and": [

src/plugins/plan/Plan.vue

@@ -27,7 +27,7 @@
 >
     <template v-if="viewBounds && !options.compact">
         <swim-lane>
-            <template slot="label">{{ timeSystem.name }}</template>
+            <slot name="label">{{ timeSystem.name }}</slot>
             <timeline-axis
                 slot="object"
                 :bounds="viewBounds"
@@ -129,11 +129,13 @@ export default {
 
             this.timeContext.on("timeSystem", this.setScaleAndPlotActivities);
             this.timeContext.on("bounds", this.updateViewBounds);
+            this.timeContext.on("clock", this.updateBounds);
         },
         stopFollowingTimeContext() {
             if (this.timeContext) {
                 this.timeContext.off("timeSystem", this.setScaleAndPlotActivities);
                 this.timeContext.off("bounds", this.updateViewBounds);
+                this.timeContext.off("clock", this.updateBounds);
             }
         },
         observeForChanges(mutatedObject) {
@@ -142,10 +144,15 @@ export default {
         },
         resize() {
             let clientWidth = this.getClientWidth();
+            let clientHeight = this.getClientHeight();
             if (clientWidth !== this.width) {
                 this.setDimensions();
                 this.updateViewBounds();
             }
+
+            if (clientHeight !== this.height) {
+                this.setDimensions();
+            }
         },
         getClientWidth() {
             let clientWidth = this.$refs.plan.clientWidth;
@@ -160,9 +167,27 @@ export default {
 
             return clientWidth - 200;
         },
+        getClientHeight() {
+            let clientHeight = this.$refs.plan.clientHeight;
+
+            if (!clientHeight) {
+            //this is a hack - need a better way to find the parent of this component
+                let parent = this.openmct.layout.$refs.browseObject.$el;
+                if (parent) {
+                    clientHeight = parent.getBoundingClientRect().height;
+                }
+            }
+
+            return clientHeight;
+        },
         getPlanData(domainObject) {
             this.planData = getValidatedData(domainObject);
         },
+        updateBounds(clock) {
+            if (clock === undefined) {
+                this.viewBounds = Object.create(this.timeContext.bounds());
+            }
+        },
         updateViewBounds(bounds) {
             if (bounds) {
                 this.viewBounds = Object.create(bounds);
@@ -191,10 +216,8 @@ export default {
             activities.forEach(activity => activity.remove());
         },
         setDimensions() {
-            const planHolder = this.$refs.plan;
             this.width = this.getClientWidth();
-
-            this.height = Math.round(planHolder.getBoundingClientRect().height);
+            this.height = this.getClientHeight();
         },
         setScale(timeSystem) {
             if (!this.width) {
@@ -395,7 +418,7 @@ export default {
                         width: svgWidth
                     };
                 },
-                template: `<swim-lane :is-nested="isNested" :status="status"><template slot="label">{{heading}}</template><template slot="object"><svg :height="height" :width="width"></svg></template></swim-lane>`
+                template: `<swim-lane :is-nested="isNested" :status="status"><slot name="label">{{heading}}</template><template slot="object"><svg :height="height" :width="width"></svg></slot></swim-lane>`
             });
 
             this.$refs.planHolder.appendChild(component.$mount().$el);

src/plugins/plan/README.md

@@ -0,0 +1,117 @@
+# Plan view and domain objects
+Plans provide a view for a list of activities grouped by categories.
+
+## Plan category and activity JSON format
+The JSON format for a plan consists of categories/groups and a list of activities for each category.
+Activity properties include:
+* name: Name of the activity
+* start: Timestamps in milliseconds
+* end: Timestamps in milliseconds
+* type: Matches the name of the category it is in
+* color: Background color for the activity
+* textColor: Color of the name text for the activity
+* The format of the json file is as follows:
+
+```json
+{
+    "TEST_GROUP": [{
+    "name": "Event 1 with a really long name",
+    "start": 1665323197000,
+    "end": 1665344921000,
+    "type": "TEST_GROUP",
+    "color": "orange",
+    "textColor": "white"
+    }],
+    "GROUP_2": [{
+    "name": "Event 2",
+    "start": 1665409597000,
+    "end": 1665456252000,
+    "type": "GROUP_2",
+    "color": "red",
+    "textColor": "white"
+    }]
+}
+```
+
+## Plans using JSON file uploads
+Plan domain objects can be created by uploading a JSON file with the format above to render categories and activities.
+
+## Using Domain Objects directly
+If uploading a JSON is not desired, it is possible to visualize domain objects of type 'plan'.
+The standard model is as follows: 
+```javascript
+{
+    identifier: {
+        namespace: ""
+        key: "test-plan"
+    }
+    name:"A plan object",
+    type:"plan",
+    location:"ROOT",
+    selectFile: {
+        body: {
+            SOME_CATEGORY: [{
+                    name: "An activity",
+                    start: 1665323197000,
+                    end: 1665323197100,
+                    type: "SOME_CATEGORY"
+                }
+            ],
+            ANOTHER_CATEGORY: [{
+                    name: "An activity",
+                    start: 1665323197000,
+                    end: 1665323197100,
+                    type: "ANOTHER_CATEGORY"
+                }
+            ]
+        }
+    }
+}
+```
+
+If your data has non-standard keys for `start, end, type and activities` properties, use the `sourceMap` property mapping.
+```javascript
+{
+    identifier: {
+        namespace: ""
+        key: "another-test-plan"
+    }
+    name:"Another plan object",
+    type:"plan",
+    location:"ROOT",
+    sourceMap: {
+        start: 'start_time',
+        end: 'end_time',
+        activities: 'items',
+        groupId: 'category'
+    },
+    selectFile: {
+        body: {
+            items: [
+                {
+                    name: "An activity",
+                    start_time: 1665323197000,
+                    end_time: 1665323197100,
+                    category: "SOME_CATEGORY"
+                },
+                {
+                    name: "Another activity",
+                    start_time: 1665323198000,
+                    end_time: 1665323198100,
+                    category: "ANOTHER_CATEGORY"
+                }
+            ]
+        }
+    }
+}
+```
+
+## Rendering categories and activities:
+The algorithm to render categories and activities on a canvas is as follows:
+* Each category gets a swimlane.
+* Activities within a category are rendered within it's swimlane.
+* Render each activity on a given row if it's duration+label do not overlap (start/end times) with an existing activity on that row.
+* Move to the next available row within a swimlane if there is overlap
+* Labels for a given activity will be rendered within it's duration slot if it fits in that rectangular space.
+* Labels that do not fit within an activity's duration slot are rendered outside, to the right of the duration slot.
+

src/plugins/plan/pluginSpec.js

@@ -264,7 +264,7 @@ describe('the plugin', function () {
         it('provides an inspector view with the version information if available', () => {
             componentObject = component.$root.$children[0];
             const propertiesEls = componentObject.$el.querySelectorAll('.c-inspect-properties__row');
-            expect(propertiesEls.length).toEqual(4);
+            expect(propertiesEls.length).toEqual(6);
             const found = Array.from(propertiesEls).some((propertyEl) => {
                 return (propertyEl.children[0].innerHTML.trim() === 'Version'
                     && propertyEl.children[1].innerHTML.trim() === 'v1');

src/plugins/plot/MctPlot.vue

@@ -442,7 +442,8 @@ export default {
             });
         },
 
-        removeSeries(plotSeries) {
+        removeSeries(plotSeries, index) {
+            this.seriesModels.splice(index, 1);
             this.checkSameRangeValue();
             this.stopListening(plotSeries);
         },

src/plugins/plot/chart/MctChart.vue

@@ -382,7 +382,7 @@ export default {
         makeLimitLines(series) {
             this.clearLimitLines(series);
 
-            if (!series.get('limitLines')) {
+            if (!series || !series.get('limitLines')) {
                 return;
             }
 

src/plugins/plot/configuration/Collection.js

@@ -102,8 +102,8 @@ export default class Collection extends Model {
             throw new Error('model not found in collection.');
         }
 
-        this.emit('remove', model, index);
         this.models.splice(index, 1);
+        this.emit('remove', model, index);
     }
 
     destroy(model) {

src/plugins/plot/configuration/PlotSeries.js

@@ -151,16 +151,6 @@ export default class PlotSeries extends Model {
         this.limitEvaluator = this.openmct.telemetry.limitEvaluator(options.domainObject);
         this.limitDefinition = this.openmct.telemetry.limitDefinition(options.domainObject);
         this.limits = [];
-        this.limitDefinition.limits().then(response => {
-            this.limits = [];
-
-            if (response) {
-                this.limits = response;
-            }
-
-            this.emit('limits', this);
-
-        });
         this.openmct.time.on('bounds', this.updateLimits);
         this.removeMutationListener = this.openmct.objects.observe(
             this.domainObject,
@@ -176,15 +166,6 @@ export default class PlotSeries extends Model {
         this.emit('limitBounds', bounds);
     }
 
-    locateOldObject(oldStyleParent) {
-        return oldStyleParent.useCapability('composition')
-            .then(function (children) {
-                this.oldObject = children
-                    .filter(function (child) {
-                        return child.getId() === this.keyString;
-                    }, this)[0];
-            }.bind(this));
-    }
     /**
      * Fetch historical data and establish a realtime subscription.  Returns
      * a promise that is resolved when all connections have been successfully
@@ -192,7 +173,7 @@ export default class PlotSeries extends Model {
      *
      * @returns {Promise}
      */
-    fetch(options) {
+    async fetch(options) {
         let strategy;
 
         if (this.model.interpolate !== 'none') {
@@ -217,23 +198,19 @@ export default class PlotSeries extends Model {
                 );
         }
 
-        /* eslint-disable you-dont-need-lodash-underscore/concat */
-        return this.openmct
-            .telemetry
-            .request(this.domainObject, options)
-            .then((points) => {
-                const data = this.getSeriesData();
-                const newPoints = _(data)
-                    .concat(points)
-                    .sortBy(this.getXVal)
-                    .uniq(true, point => [this.getXVal(point), this.getYVal(point)].join())
-                    .value();
-                this.reset(newPoints);
-            })
-            .catch((error) => {
-                console.warn('Error fetching data', error);
-            });
-        /* eslint-enable you-dont-need-lodash-underscore/concat */
+        try {
+            const points = await this.openmct.telemetry.request(this.domainObject, options);
+            const data = this.getSeriesData();
+            // eslint-disable-next-line you-dont-need-lodash-underscore/concat
+            const newPoints = _(data)
+                .concat(points)
+                .sortBy(this.getXVal)
+                .uniq(true, point => [this.getXVal(point), this.getYVal(point)].join())
+                .value();
+            this.reset(newPoints);
+        } catch (error) {
+            console.warn('Error fetching data', error);
+        }
     }
 
     updateName(name) {
@@ -334,16 +311,19 @@ export default class PlotSeries extends Model {
      * Override this to implement plot series loading functionality.  Must return
      * a promise that is resolved when loading is completed.
      *
-     * @private
      * @returns {Promise}
      */
-    load(options) {
-        return this.fetch(options)
-            .then(function (res) {
-                this.emit('load');
+    async load(options) {
+        await this.fetch(options);
+        this.emit('load');
+        const limitsResponse = await this.limitDefinition.limits();
+        this.limits = [];
+        if (limitsResponse) {
+            this.limits = limitsResponse;
+        }
 
-                return res;
-            }.bind(this));
+        this.emit('limits', this);
+        this.emit('change:limitLines', this);
     }
 
     /**

src/plugins/remove/RemoveAction.js

@@ -19,8 +19,12 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+
 export default class RemoveAction {
+    #transaction;
+
     constructor(openmct) {
+
         this.name = 'Remove';
         this.key = 'remove';
         this.description = 'Remove this object from its containing object.';
@@ -29,17 +33,25 @@ export default class RemoveAction {
         this.priority = 1;
 
         this.openmct = openmct;
+
+        this.removeFromComposition = this.removeFromComposition.bind(this); // for access to private transaction variable
     }
 
-    invoke(objectPath) {
+    async invoke(objectPath) {
         let object = objectPath[0];
         let parent = objectPath[1];
-        this.showConfirmDialog(object).then(() => {
-            this.removeFromComposition(parent, object);
-            if (this.inNavigationPath(object)) {
-                this.navigateTo(objectPath.slice(1));
-            }
-        }).catch(() => {});
+
+        try {
+            await this.showConfirmDialog(object);
+        } catch (error) {
+            return; // form canceled, exit invoke
+        }
+
+        await this.removeFromComposition(parent, object);
+
+        if (this.inNavigationPath(object)) {
+            this.navigateTo(objectPath.slice(1));
+        }
     }
 
     showConfirmDialog(object) {
@@ -81,20 +93,21 @@ export default class RemoveAction {
         this.openmct.router.navigate('#/browse/' + urlPath);
     }
 
-    removeFromComposition(parent, child) {
-        let composition = parent.composition.filter(id =>
-            !this.openmct.objects.areIdsEqual(id, child.identifier)
-        );
+    async removeFromComposition(parent, child) {
+        this.startTransaction();
 
-        this.openmct.objects.mutate(parent, 'composition', composition);
+        const composition = this.openmct.composition.get(parent);
+        composition.remove(child);
+
+        if (!this.isAlias(child, parent)) {
+            this.openmct.objects.mutate(child, 'location', null);
+        }
 
         if (this.inNavigationPath(child) && this.openmct.editor.isEditing()) {
             this.openmct.editor.save();
         }
 
-        if (!this.isAlias(child, parent)) {
-            this.openmct.objects.mutate(child, 'location', null);
-        }
+        await this.saveTransaction();
     }
 
     isAlias(child, parent) {
@@ -132,4 +145,23 @@ export default class RemoveAction {
             && parentType.definition.creatable
             && Array.isArray(parent.composition);
     }
+
+    startTransaction() {
+        if (!this.openmct.objects.isTransactionActive()) {
+            this.#transaction = this.openmct.objects.startTransaction();
+        }
+    }
+
+    saveTransaction() {
+        if (!this.#transaction) {
+            return;
+        }
+
+        return this.#transaction.commit()
+            .catch(error => {
+                throw error;
+            }).finally(() => {
+                this.openmct.objects.endTransaction();
+            });
+    }
 }

src/plugins/telemetryTable/components/table.vue

@@ -257,11 +257,11 @@
                 @change-height="setRowHeight"
             />
             <tr>
-                <template v-for="(title, key) in headers">
-                    <th
-                        :key="key"
-                        :style="{ width: configuredColumnWidths[key] + 'px', 'max-width': configuredColumnWidths[key] + 'px'}"
-                    >
+                <template
+                    v-for="(title, key) in headers"
+                    :key="key"
+                >
+                    <th :style="{ width: configuredColumnWidths[key] + 'px', 'max-width': configuredColumnWidths[key] + 'px'}">
                         {{ title }}
                     </th>
                 </template>

src/plugins/timeConductor/ConductorHistory.vue

@@ -26,6 +26,7 @@
 >
     <div class="c-menu-button c-ctrl-wrapper c-ctrl-wrapper--menus-left">
         <button
+            aria-label="Time Conductor History"
             class="c-button--menu c-history-button icon-history"
             @click.prevent.stop="showHistoryMenu"
         >

src/plugins/timeConductor/ConductorInputsRealtime.vue

@@ -14,7 +14,7 @@
             :bottom="keyString !== undefined"
             :type="'start'"
             :offset="offsets.start"
-            @focus.native="$event.target.select()"
+            @focus="$event.target.select()"
             @hide="hideAllTimePopups"
             @update="timePopUpdate"
         />
@@ -54,7 +54,7 @@
             :bottom="keyString !== undefined"
             :type="'end'"
             :offset="offsets.end"
-            @focus.native="$event.target.select()"
+            @focus="$event.target.select()"
             @hide="hideAllTimePopups"
             @update="timePopUpdate"
         />

src/plugins/timeline/TimelineViewLayout.vue

@@ -124,12 +124,10 @@ export default {
             };
 
             this.items.push(item);
-            this.updateContentHeight();
         },
         removeItem(identifier) {
             let index = this.items.findIndex(item => this.openmct.objects.areIdsEqual(identifier, item.domainObject.identifier));
             this.items.splice(index, 1);
-            this.updateContentHeight();
         },
         reorder(reorderPlan) {
             let oldItems = this.items.slice();
@@ -138,7 +136,23 @@ export default {
             });
         },
         updateContentHeight() {
-            this.height = Math.round(this.$refs.contentHolder.getBoundingClientRect().height);
+            const clientHeight = this.getClientHeight();
+            if (this.height !== clientHeight) {
+                this.height = clientHeight;
+            }
+        },
+        getClientHeight() {
+            let clientHeight = this.$refs.contentHolder.getBoundingClientRect().height;
+
+            if (!clientHeight) {
+            //this is a hack - need a better way to find the parent of this component
+                let parent = this.openmct.layout.$refs.browseObject.$el;
+                if (parent) {
+                    clientHeight = parent.getBoundingClientRect().height;
+                }
+            }
+
+            return clientHeight;
         },
         getTimeSystems() {
             const timeSystems = this.openmct.time.getAllTimeSystems();
@@ -155,7 +169,9 @@ export default {
             //TODO: Some kind of translation via an offset? of current bounds to target timeSystem
             return currentBounds;
         },
-        updateViewBounds(bounds) {
+        updateViewBounds() {
+            const bounds = this.timeContext.bounds();
+            this.updateContentHeight();
             let currentTimeSystem = this.timeSystems.find(item => item.timeSystem.key === this.openmct.time.timeSystem().key);
             if (currentTimeSystem) {
                 currentTimeSystem.bounds = bounds;
@@ -166,12 +182,14 @@ export default {
 
             this.timeContext = this.openmct.time.getContextForView(this.objectPath);
             this.getTimeSystems();
-            this.updateViewBounds(this.timeContext.bounds());
+            this.updateViewBounds();
             this.timeContext.on('bounds', this.updateViewBounds);
+            this.timeContext.on('clock', this.updateViewBounds);
         },
         stopFollowingTimeContext() {
             if (this.timeContext) {
                 this.timeContext.off('bounds', this.updateViewBounds);
+                this.timeContext.off('clock', this.updateViewBounds);
             }
         }
     }

src/plugins/timeline/pluginSpec.js

@@ -27,6 +27,7 @@ import EventEmitter from "EventEmitter";
 
 describe('the plugin', function () {
     let objectDef;
+    let appHolder;
     let element;
     let child;
     let openmct;
@@ -92,6 +93,10 @@ describe('the plugin', function () {
     };
 
     beforeEach((done) => {
+        appHolder = document.createElement('div');
+        appHolder.style.width = '640px';
+        appHolder.style.height = '480px';
+
         mockObjectPath = [
             {
                 name: 'mock folder',
@@ -133,7 +138,7 @@ describe('the plugin', function () {
         element.appendChild(child);
 
         openmct.on('start', done);
-        openmct.startHeadless();
+        openmct.start(appHolder);
     });
 
     afterEach(() => {
@@ -167,7 +172,7 @@ describe('the plugin', function () {
 
             const applicableViews = openmct.objectViews.get(testViewObject, mockObjectPath);
             timelineView = applicableViews.find((viewProvider) => viewProvider.key === 'time-strip.view');
-            let view = timelineView.view(testViewObject, element);
+            let view = timelineView.view(testViewObject, mockObjectPath);
             view.show(child, true);
 
             return Vue.nextTick();
@@ -245,7 +250,7 @@ describe('the plugin', function () {
         beforeEach(done => {
             const applicableViews = openmct.objectViews.get(testViewObject, mockObjectPath);
             timelineView = applicableViews.find((viewProvider) => viewProvider.key === 'time-strip.view');
-            let view = timelineView.view(testViewObject, element);
+            let view = timelineView.view(testViewObject, mockObjectPath);
             view.show(child, true);
 
             Vue.nextTick(done);
@@ -281,7 +286,7 @@ describe('the plugin', function () {
         beforeEach((done) => {
             const applicableViews = openmct.objectViews.get(testViewObject2, mockObjectPath);
             timelineView = applicableViews.find((viewProvider) => viewProvider.key === 'time-strip.view');
-            let view = timelineView.view(testViewObject2, element);
+            let view = timelineView.view(testViewObject2, mockObjectPath);
             view.show(child, true);
 
             Vue.nextTick(done);

src/selection/Selection.js

@@ -20,250 +20,225 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define(
-    [
-        'EventEmitter',
-        'lodash'
-    ],
-    function (
-        EventEmitter,
-        _
-    ) {
-        /**
-         * Manages selection state for Open MCT
-         * @private
-         */
-        function Selection(openmct) {
-            EventEmitter.call(this);
+import EventEmitter from 'EventEmitter';
+import _ from 'lodash';
 
-            this.openmct = openmct;
-            this.selected = [];
+/**
+ * Manages selection state for Open MCT
+ * @private
+ */
+export default class Selection extends EventEmitter {
+    constructor(openmct) {
+        super();
+
+        this.openmct = openmct;
+        this.selected = [];
+    }
+    /**
+     * Gets the selected object.
+     * @public
+     */
+    get() {
+        return this.selected;
+    }
+    /**
+     * Selects the selectable object and emits the 'change' event.
+     *
+     * @param {object} selectable an object with element and context properties
+     * @param {Boolean} isMultiSelectEvent flag indication shift key is pressed or not
+     * @private
+     */
+    select(selectable, isMultiSelectEvent) {
+        if (!Array.isArray(selectable)) {
+            selectable = [selectable];
         }
 
-        Selection.prototype = Object.create(EventEmitter.prototype);
+        let multiSelect = isMultiSelectEvent
+            && this.parentSupportsMultiSelect(selectable)
+            && this.isPeer(selectable)
+            && !this.selectionContainsParent(selectable);
 
-        /**
-         * Gets the selected object.
-         * @public
-         */
-        Selection.prototype.get = function () {
-            return this.selected;
-        };
+        if (multiSelect) {
+            this.handleMultiSelect(selectable);
+        } else {
+            this.handleSingleSelect(selectable);
+        }
+    }
+    /**
+             * @private
+             */
+    handleMultiSelect(selectable) {
+        if (this.elementSelected(selectable)) {
+            this.remove(selectable);
+        } else {
+            this.addSelectionAttributes(selectable);
+            this.selected.push(selectable);
+        }
 
-        /**
-         * Selects the selectable object and emits the 'change' event.
-         *
-         * @param {object} selectable an object with element and context properties
-         * @param {Boolean} isMultiSelectEvent flag indication shift key is pressed or not
-         * @private
-         */
-        Selection.prototype.select = function (selectable, isMultiSelectEvent) {
-            if (!Array.isArray(selectable)) {
-                selectable = [selectable];
-            }
-
-            let multiSelect = isMultiSelectEvent
-                && this.parentSupportsMultiSelect(selectable)
-                && this.isPeer(selectable)
-                && !this.selectionContainsParent(selectable);
-
-            if (multiSelect) {
-                this.handleMultiSelect(selectable);
-            } else {
-                this.handleSingleSelect(selectable);
-            }
-        };
-
-        /**
-         * @private
-         */
-        Selection.prototype.handleMultiSelect = function (selectable) {
-            if (this.elementSelected(selectable)) {
-                this.remove(selectable);
-            } else {
-                this.addSelectionAttributes(selectable);
-                this.selected.push(selectable);
-            }
+        this.emit('change', this.selected);
+    }
+    /**
+             * @private
+             */
+    handleSingleSelect(selectable) {
+        if (!_.isEqual([selectable], this.selected)) {
+            this.setSelectionStyles(selectable);
+            this.selected = [selectable];
 
             this.emit('change', this.selected);
+        }
+    }
+    /**
+             * @private
+             */
+    elementSelected(selectable) {
+        return this.selected.some(selectionPath => _.isEqual(selectionPath, selectable));
+    }
+    /**
+     * @private
+     */
+    remove(selectable) {
+        this.selected = this.selected.filter(selectionPath => !_.isEqual(selectionPath, selectable));
+
+        if (this.selected.length === 0) {
+            this.removeSelectionAttributes(selectable);
+            selectable[1].element.click(); // Select the parent if there is no selection.
+        } else {
+            this.removeSelectionAttributes(selectable, true);
+        }
+    }
+    /**
+     * @private
+     */
+    setSelectionStyles(selectable) {
+        this.selected.forEach(selectionPath => this.removeSelectionAttributes(selectionPath));
+        this.addSelectionAttributes(selectable);
+    }
+    removeSelectionAttributes(selectionPath, keepParentStyle) {
+        if (selectionPath[0] && selectionPath[0].element) {
+            selectionPath[0].element.removeAttribute('s-selected');
+        }
+
+        if (selectionPath[1] && selectionPath[1].element && !keepParentStyle) {
+            selectionPath[1].element.removeAttribute('s-selected-parent');
+        }
+    }
+    /**
+     * Adds selection attributes to the selected element and its parent.
+     * @private
+     */
+    addSelectionAttributes(selectable) {
+        if (selectable[0] && selectable[0].element) {
+            selectable[0].element.setAttribute('s-selected', "");
+        }
+
+        if (selectable[1] && selectable[1].element) {
+            selectable[1].element.setAttribute('s-selected-parent', "");
+        }
+    }
+    /**
+     * @private
+     */
+    parentSupportsMultiSelect(selectable) {
+        return selectable[1] && selectable[1].context.supportsMultiSelect;
+    }
+    /**
+     * @private
+     */
+    selectionContainsParent(selectable) {
+        return this.selected.some(selectionPath => _.isEqual(selectionPath[0], selectable[1]));
+    }
+    /**
+     * @private
+     */
+    isPeer(selectable) {
+        return this.selected.some(selectionPath => _.isEqual(selectionPath[1], selectable[1]));
+    }
+    /**
+     * @private
+     */
+    isSelectable(element) {
+        if (!element) {
+            return false;
+        }
+
+        return Boolean(element.closest('[data-selectable]'));
+    }
+    /**
+     * @private
+     */
+    capture(selectable) {
+        let capturingContainsSelectable = this.capturing && this.capturing.includes(selectable);
+
+        if (!this.capturing || capturingContainsSelectable) {
+            this.capturing = [];
+        }
+
+        this.capturing.push(selectable);
+    }
+    /**
+     * @private
+     */
+    selectCapture(selectable, event) {
+        if (!this.capturing) {
+            return;
+        }
+
+        let reversedCapturing = this.capturing.reverse();
+        delete this.capturing;
+        this.select(reversedCapturing, event.shiftKey);
+    }
+    /**
+     * Attaches the click handlers to the element.
+     *
+     * @param element an html element
+     * @param context object which defines item or other arbitrary properties.
+     * e.g. {
+     *          item: domainObject,
+     *          elementProxy: element,
+     *          controller: fixedController
+     *       }
+     * @param select a flag to select the element if true
+     * @returns a function that removes the click handlers from the element
+     * @public
+     */
+    selectable(element, context, select) {
+        if (!this.isSelectable(element)) {
+            return () => { };
+        }
+
+        let selectable = {
+            context: context,
+            element: element
         };
 
-        /**
-         * @private
-         */
-        Selection.prototype.handleSingleSelect = function (selectable) {
-            if (!_.isEqual([selectable], this.selected)) {
-                this.setSelectionStyles(selectable);
-                this.selected = [selectable];
+        const capture = this.capture.bind(this, selectable);
+        const selectCapture = this.selectCapture.bind(this, selectable);
+        let removeMutable = false;
 
-                this.emit('change', this.selected);
+        element.addEventListener('click', capture, true);
+        element.addEventListener('click', selectCapture);
+
+        if (context.item && context.item.isMutable !== true) {
+            removeMutable = true;
+            context.item = this.openmct.objects.toMutable(context.item);
+        }
+
+        if (select) {
+            if (typeof select === 'object') {
+                element.dispatchEvent(select);
+            } else if (typeof select === 'boolean') {
+                element.click();
             }
-        };
+        }
 
-        /**
-         * @private
-         */
-        Selection.prototype.elementSelected = function (selectable) {
-            return this.selected.some(selectionPath => _.isEqual(selectionPath, selectable));
-        };
+        return (function () {
+            element.removeEventListener('click', capture, true);
+            element.removeEventListener('click', selectCapture);
 
-        /**
-         * @private
-         */
-        Selection.prototype.remove = function (selectable) {
-            this.selected = this.selected.filter(selectionPath => !_.isEqual(selectionPath, selectable));
-
-            if (this.selected.length === 0) {
-                this.removeSelectionAttributes(selectable);
-                selectable[1].element.click(); // Select the parent if there is no selection.
-            } else {
-                this.removeSelectionAttributes(selectable, true);
+            if (context.item !== undefined && context.item.isMutable && removeMutable === true) {
+                this.openmct.objects.destroyMutable(context.item);
             }
-        };
-
-        /**
-         * @private
-         */
-        Selection.prototype.setSelectionStyles = function (selectable) {
-            this.selected.forEach(selectionPath => this.removeSelectionAttributes(selectionPath));
-            this.addSelectionAttributes(selectable);
-        };
-
-        Selection.prototype.removeSelectionAttributes = function (selectionPath, keepParentStyle) {
-            if (selectionPath[0] && selectionPath[0].element) {
-                selectionPath[0].element.removeAttribute('s-selected');
-            }
-
-            if (selectionPath[1] && selectionPath[1].element && !keepParentStyle) {
-                selectionPath[1].element.removeAttribute('s-selected-parent');
-            }
-        };
-
-        /*
-        * Adds selection attributes to the selected element and its parent.
-        * @private
-        */
-        Selection.prototype.addSelectionAttributes = function (selectable) {
-            if (selectable[0] && selectable[0].element) {
-                selectable[0].element.setAttribute('s-selected', "");
-            }
-
-            if (selectable[1] && selectable[1].element) {
-                selectable[1].element.setAttribute('s-selected-parent', "");
-            }
-        };
-
-        /**
-         * @private
-         */
-        Selection.prototype.parentSupportsMultiSelect = function (selectable) {
-            return selectable[1] && selectable[1].context.supportsMultiSelect;
-        };
-
-        /**
-         * @private
-         */
-        Selection.prototype.selectionContainsParent = function (selectable) {
-            return this.selected.some(selectionPath => _.isEqual(selectionPath[0], selectable[1]));
-        };
-
-        /**
-         * @private
-         */
-        Selection.prototype.isPeer = function (selectable) {
-            return this.selected.some(selectionPath => _.isEqual(selectionPath[1], selectable[1]));
-        };
-
-        /**
-         * @private
-         */
-        Selection.prototype.isSelectable = function (element) {
-            if (!element) {
-                return false;
-            }
-
-            return Boolean(element.closest('[data-selectable]'));
-        };
-
-        /**
-         * @private
-         */
-        Selection.prototype.capture = function (selectable) {
-            let capturingContainsSelectable = this.capturing && this.capturing.includes(selectable);
-
-            if (!this.capturing || capturingContainsSelectable) {
-                this.capturing = [];
-            }
-
-            this.capturing.push(selectable);
-        };
-
-        /**
-         * @private
-         */
-        Selection.prototype.selectCapture = function (selectable, event) {
-            if (!this.capturing) {
-                return;
-            }
-
-            let reversedCapturing = this.capturing.reverse();
-            delete this.capturing;
-            this.select(reversedCapturing, event.shiftKey);
-        };
-
-        /**
-         * Attaches the click handlers to the element.
-         *
-         * @param element an html element
-         * @param context object which defines item or other arbitrary properties.
-         * e.g. {
-         *          item: domainObject,
-         *          elementProxy: element,
-         *          controller: fixedController
-         *       }
-         * @param select a flag to select the element if true
-         * @returns a function that removes the click handlers from the element
-         * @public
-         */
-        Selection.prototype.selectable = function (element, context, select) {
-            if (!this.isSelectable(element)) {
-                return () => {};
-            }
-
-            let selectable = {
-                context: context,
-                element: element
-            };
-
-            const capture = this.capture.bind(this, selectable);
-            const selectCapture = this.selectCapture.bind(this, selectable);
-            let removeMutable = false;
-
-            element.addEventListener('click', capture, true);
-            element.addEventListener('click', selectCapture);
-
-            if (context.item && context.item.isMutable !== true) {
-                removeMutable = true;
-                context.item = this.openmct.objects.toMutable(context.item);
-            }
-
-            if (select) {
-                if (typeof select === 'object') {
-                    element.dispatchEvent(select);
-                } else if (typeof select === 'boolean') {
-                    element.click();
-                }
-            }
-
-            return (function () {
-                element.removeEventListener('click', capture, true);
-                element.removeEventListener('click', selectCapture);
-
-                if (context.item !== undefined && context.item.isMutable && removeMutable === true) {
-                    this.openmct.objects.destroyMutable(context.item);
-                }
-            }).bind(this);
-        };
-
-        return Selection;
-    });
+        }).bind(this);
+    }
+}

src/ui/components/TimeSystemAxis.vue

@@ -94,15 +94,13 @@ export default {
             if (this.openmct.time.clock() === undefined) {
                 let nowMarker = document.querySelector('.nowMarker');
                 if (nowMarker) {
-                    nowMarker.parentNode.removeChild(nowMarker);
+                    nowMarker.classList.add('hidden');
                 }
             } else {
                 let nowMarker = document.querySelector('.nowMarker');
                 if (nowMarker) {
-                    const svgEl = d3Selection.select(this.svgElement).node();
-                    let height = svgEl.style('height').replace('px', '');
-                    height = Number(height) + this.contentHeight;
-                    nowMarker.style.height = height + 'px';
+                    nowMarker.classList.remove('hidden');
+                    nowMarker.style.height = this.contentHeight + 'px';
                     const now = this.xScale(Date.now());
                     nowMarker.style.left = now + this.offset + 'px';
                 }

src/ui/components/search.vue

@@ -5,10 +5,10 @@
 >
     <input
         class="c-search__input"
+        v-bind="$attrs"
         aria-label="Search Input"
         tabindex="10000"
         type="search"
-        v-bind="$attrs"
         :value="value"
         v-on="inputListeners"
     >

src/ui/components/tags/TagEditor.vue

@@ -145,10 +145,10 @@ export default {
             const annotationsToDelete = this.annotations.filter((annotation) => {
                 return annotation.tags.includes(tagToRemove);
             });
-            const result = await this.openmct.annotation.deleteAnnotations(annotationsToDelete);
-            this.$emit('tags-updated', annotationsToDelete);
-
-            return result;
+            if (annotationsToDelete) {
+                await this.openmct.annotation.deleteAnnotations(annotationsToDelete);
+                this.$emit('tags-updated', annotationsToDelete);
+            }
         },
         async tagAdded(newTag) {
             // Either undelete an annotation, or create one (1) new annotation

src/ui/components/timesystem-axis.scss

@@ -32,6 +32,10 @@
         z-index: 10;
         background: gray;
 
+        &.hidden {
+            display: none;
+        }
+
         & .icon-arrow-down {
             font-size: large;
             position: absolute;

src/ui/inspector/ElementItem.vue

@@ -33,7 +33,8 @@
         class="c-tree__item c-elements-pool__item"
         :class="{
             'is-context-clicked': contextClickActive,
-            'hover': hover
+            'hover': hover,
+            'is-alias': isAlias
         }"
     >
         <span
@@ -55,6 +56,7 @@ export default {
     components: {
         ObjectLabel
     },
+    inject: ['openmct'],
     props: {
         index: {
             type: Number,
@@ -82,9 +84,12 @@ export default {
         }
     },
     data() {
+        const isAlias = this.elementObject.location !== this.openmct.objects.makeKeyString(this.parentObject.identifier);
+
         return {
             contextClickActive: false,
-            hover: false
+            hover: false,
+            isAlias
         };
     },
     methods: {

src/ui/inspector/InspectorDetailsSpec.js

@@ -38,6 +38,8 @@ describe('the inspector', () => {
         folderItem = {
             name: 'folder',
             type: 'folder',
+            createdBy: 'John Q',
+            modifiedBy: 'Public',
             id: 'mock-folder-key',
             identifier: {
                 namespace: '',
@@ -74,6 +76,8 @@ describe('the inspector', () => {
         const [
             title,
             type,
+            createdBy,
+            modifiedBy,
             notes,
             timestamp
         ] = details;
@@ -87,6 +91,14 @@ describe('the inspector', () => {
             .toEqual('Type');
         expect(type.value.toLowerCase())
             .toEqual(folderItem.type);
+        expect(createdBy.name)
+            .toEqual('Created By');
+        expect(createdBy.value)
+            .toEqual(folderItem.createdBy);
+        expect(modifiedBy.name)
+            .toEqual('Modified By');
+        expect(modifiedBy.value)
+            .toEqual(folderItem.modifiedBy);
         expect(notes.value)
             .toEqual('This object should have some notes');
 

src/ui/inspector/details/Properties.vue

@@ -90,10 +90,13 @@ export default {
                 return;
             }
 
+            const UNKNOWN_USER = 'Unknown';
             const title = this.domainObject.name;
             const typeName = this.type ? this.type.definition.name : `Unknown: ${this.domainObject.type}`;
-            const timestampLabel = this.domainObject.modified ? 'Modified' : 'Created';
-            const timestamp = this.domainObject.modified ? this.domainObject.modified : this.domainObject.created;
+            const createdTimestamp = this.domainObject.created;
+            const createdBy = this.domainObject.createdBy ? this.domainObject.createdBy : UNKNOWN_USER;
+            const modifiedBy = this.domainObject.modifiedBy ? this.domainObject.modifiedBy : UNKNOWN_USER;
+            const modifiedTimestamp = this.domainObject.modified ? this.domainObject.modified : this.domainObject.created;
             const notes = this.domainObject.notes;
             const version = this.domainObject.version;
 
@@ -105,6 +108,14 @@ export default {
                 {
                     name: 'Type',
                     value: typeName
+                },
+                {
+                    name: 'Created By',
+                    value: createdBy
+                },
+                {
+                    name: 'Modified By',
+                    value: modifiedBy
                 }
             ];
 
@@ -115,15 +126,28 @@ export default {
                 });
             }
 
-            if (timestamp !== undefined) {
-                const formattedTimestamp = Moment.utc(timestamp)
+            if (createdTimestamp !== undefined) {
+                const formattedCreatedTimestamp = Moment.utc(createdTimestamp)
                     .format('YYYY-MM-DD[\n]HH:mm:ss')
                     + ' UTC';
 
                 details.push(
                     {
-                        name: timestampLabel,
-                        value: formattedTimestamp
+                        name: 'Created',
+                        value: formattedCreatedTimestamp
+                    }
+                );
+            }
+
+            if (modifiedTimestamp !== undefined) {
+                const formattedModifiedTimestamp = Moment.utc(modifiedTimestamp)
+                    .format('YYYY-MM-DD[\n]HH:mm:ss')
+                    + ' UTC';
+
+                details.push(
+                    {
+                        name: 'Modified',
+                        value: formattedModifiedTimestamp
                     }
                 );
             }

src/ui/inspector/elements.scss

@@ -8,6 +8,15 @@
         margin-top: $interiorMargin;
     }
 
+    &__item {
+        &.is-alias {
+            // Object is an alias to an original.
+            [class*='__type-icon'] {
+                @include isAlias();
+            }
+        }
+    }
+
     &__search {
         flex: 0 0 auto;
     }

src/ui/layout/search/GrandSearchSpec.js

@@ -232,6 +232,8 @@ describe("GrandSearch", () => {
     it("should render an object search result if new object added", async () => {
         const composition = openmct.composition.get(mockFolderObject);
         composition.add(mockNewObject);
+        // after adding, need to wait a beat for the folder to be indexed
+        await Vue.nextTick();
         await grandSearchComponent.$children[0].searchEverything('apple');
         await Vue.nextTick();
         const searchResults = document.querySelectorAll('[aria-label="New Apple Test Folder folder result"]');
@@ -271,6 +273,13 @@ describe("GrandSearch", () => {
         expect(annotationResults[1].innerText).toContain('Driving');
     });
 
+    it("should render no annotation search results if no match", async () => {
+        await grandSearchComponent.$children[0].searchEverything('Qbert');
+        await Vue.nextTick();
+        const annotationResults = document.querySelectorAll('[aria-label="Search Result"]');
+        expect(annotationResults.length).toBe(0);
+    });
+
     it("should preview object search results in edit mode if object clicked", async () => {
         await grandSearchComponent.$children[0].searchEverything('Folder');
         grandSearchComponent._provided.openmct.router.path = [mockDisplayLayout];

src/ui/layout/search/SearchResultsDropDown.vue

@@ -41,7 +41,7 @@
                     :key="openmct.objects.makeKeyString(objectResult.identifier)"
                     :result="objectResult"
                     @preview-changed="previewChanged"
-                    @click.native="selectedResult"
+                    @click="selectedResult"
                 />
             </div>
             <div
@@ -53,7 +53,7 @@
                     v-for="(annotationResult) in annotationResults"
                     :key="openmct.objects.makeKeyString(annotationResult.identifier)"
                     :result="annotationResult"
-                    @click.native="selectedResult"
+                    @click="selectedResult"
                 />
             </div>
             <div

src/ui/toolbar/components/toolbar-input.vue

@@ -7,10 +7,10 @@
         <div class="c-labeled-input__label">{{ options.label }}</div>
     </label>
     <input
+        v-bind="options.attrs"
         :id="uid"
         :type="options.type"
         :value="options.value"
-        v-bind="options.attrs"
     >
 </div>
 </template>

src/utils/testing.js

@@ -128,7 +128,7 @@ export function simulateKeyEvent(opts) {
 }
 
 function clearBuiltinSpy(funcDefinition) {
-    funcDefinition.object[funcDefinition.functionName] = funcDefinition.nativeFunction;
+    funcDefinition.object[funcDefinition.functionName] = funcDefinitionFunction;
 }
 
 export function getLatestTelemetry(telemetry = [], opts = {}) {

tsconfig.json

@@ -7,19 +7,27 @@
         "baseUrl": "./",
         "allowJs": true,
         "checkJs": false,
+        "declaration": true,
+        "emitDeclarationOnly": true,
+        "declarationMap": true,
         "strict": true,
         "esModuleInterop": true,
         "noImplicitOverride": true,
         "module": "esnext",
         "moduleResolution": "node",
         "outDir": "dist",
+        "skipLibCheck": true,
         "paths": {
             // matches the alias in webpack config, so that types for those imports are visible.
             "@/*": ["src/*"]
         }
     },
+    "include": [
+      "src/api/**/*.js"  
+    ],
     "exclude": [
         "node_modules",
-        "dist"
+        "dist",
+        "**/*Spec.js"
     ]
 }

webpack.common.js

@@ -37,7 +37,7 @@ const config = {
         couchDBChangesFeed: './src/plugins/persistence/couch/CouchChangesFeed.js',
         inMemorySearchWorker: './src/api/objects/InMemorySearchWorker.js',
         espressoTheme: './src/plugins/themes/espresso-theme.scss',
-        snowTheme: './src/plugins/themes/snow-theme.scss',
+        snowTheme: './src/plugins/themes/snow-theme.scss'
     },
     output: {
         globalObject: 'this',
@@ -65,7 +65,8 @@ const config = {
             "MCT": path.join(__dirname, "src/MCT"),
             "testUtils": path.join(__dirname, "src/utils/testUtils.js"),
             "objectUtils": path.join(__dirname, "src/api/objects/object-utils.js"),
-            "utils": path.join(__dirname, "src/utils")
+            "utils": path.join(__dirname, "src/utils"),
+            "vue": "@vue/compat"
         }
     },
     plugins: [
@@ -119,7 +120,15 @@ const config = {
             },
             {
                 test: /\.vue$/,
-                use: 'vue-loader'
+                loader: 'vue-loader',
+                options: {
+                    hotReload: false,
+                    compilerOptions: {
+                        compatConfig: {
+                            MODE: 3
+                        }
+                    }
+                }
             },
             {
                 test: /\.html$/,
@@ -148,6 +157,9 @@ const config = {
             }
         ]
     },
+    externals: {
+        "vue": "Vue"
+    },
     stats: 'errors-warnings',
     performance: {
         // We should eventually consider chunking to decrease

webpack.dev.js

@@ -24,11 +24,12 @@ module.exports = merge(common, {
             '**/.*' // dotfiles and dotfolders
         ]
     },
-    resolve: {
-        alias: {
-            "vue": path.join(__dirname, "node_modules/vue/dist/vue.js")
-        }
-    },
+    // resolve: {
+    //     alias: {
+    //         // "vue": path.join(__dirname, "node_modules/vue/dist/vue.js")
+    //         "vue": "@vue/compat"
+    //     }
+    // },
     plugins: [
         new webpack.DefinePlugin({
             __OPENMCT_ROOT_RELATIVE__: '"dist/"'

webpack.prod.js

@@ -12,11 +12,11 @@ const webpack = require('webpack');
 
 module.exports = merge(common, {
     mode: 'production',
-    resolve: {
-        alias: {
-            "vue": path.join(__dirname, "node_modules/vue/dist/vue.min.js")
-        }
-    },
+    // resolve: {
+        // alias: {
+            // "vue": path.join(__dirname, "node_modules/vue/dist/vue.min.js")
+        // }
+    // },
     plugins: [
         new webpack.DefinePlugin({
             __OPENMCT_ROOT_RELATIVE__: '""'