Fix the composition ids to be openmct identifiers (not keystrings) on load.

Track the domainobject name nested within a treeitem node

.circleci/config.yml

@@ -242,10 +242,6 @@ workflows:
           name: e2e-stable
           node-version: lts/hydrogen
           suite: stable
-      - perf-test:
-          node-version: lts/hydrogen
-      - visual-test:
-          node-version: lts/hydrogen
 
   the-nightly: #These jobs do not run on PRs, but against master at night
     jobs:

.eslintrc.js

@@ -28,6 +28,8 @@ module.exports = {
     }
   },
   rules: {
+    'vue/no-v-for-template-key': 'off',
+    'vue/no-v-for-template-key-on-child': 'error',
     'prettier/prettier': 'error',
     'you-dont-need-lodash-underscore/omit': 'off',
     'you-dont-need-lodash-underscore/throttle': 'off',

.github/workflows/e2e-couchdb.yml

@@ -1,21 +1,43 @@
 name: 'e2e-couchdb'
 on:
+  push:
+    branches: master
   workflow_dispatch:
   pull_request:
     types:
       - labeled
       - opened
+  schedule:
+    - cron: '0 0 * * *'
 jobs:
   e2e-couchdb:
-    if: ${{ github.event.label.name == 'pr:e2e:couchdb' }} || ${{ github.event.action == 'opened' }}
+    if: contains(github.event.pull_request.labels.*.name, 'pr:e2e:couchdb') || github.event_name == 'schedule' || github.event_name == 'workflow_dispatch' || github.event.action == 'opened'
     runs-on: ubuntu-latest
+    timeout-minutes: 60
     steps:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: 'lts/gallium'
+          node-version: 'lts/hydrogen'
+
+      - name: Cache NPM dependencies
+        uses: actions/cache@v3
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+      
+      - run: npm install --cache ~/.npm --prefer-offline --no-audit --progress=false
+
+      - name: Login to DockerHub
+        uses: docker/login-action@v2 
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+      
       - run: npx playwright@1.32.3 install
-      - run: npm install
+
       - name: Start CouchDB Docker Container and Init with Setup Scripts
         run: |
           export $(cat src/plugins/persistence/couch/.env.ci | xargs)
@@ -23,26 +45,32 @@ jobs:
           sleep 3
           bash src/plugins/persistence/couch/setup-couchdb.sh
           bash src/plugins/persistence/couch/replace-localstorage-with-couchdb-indexhtml.sh
+
       - name: Run CouchDB Tests and publish to deploysentinel
         env:
           DEPLOYSENTINEL_API_KEY: ${{ secrets.DEPLOYSENTINEL_API_KEY }}
+          COMMIT_INFO_SHA: ${{github.event.pull_request.head.sha }}
         run: npm run test:e2e:couchdb
+
       - name: Publish Results to Codecov.io
         env:
           SUPER_SECRET: ${{ secrets.CODECOV_TOKEN }}
         run: npm run cov:e2e:full:publish
+
       - name: Archive test results
         if: success() || failure()
         uses: actions/upload-artifact@v3
         with:
           path: test-results
+
       - name: Archive html test results
         if: success() || failure()
         uses: actions/upload-artifact@v3
         with:
           path: html-test-results
+
       - name: Remove pr:e2e:couchdb label (if present)
-        if: ${{ contains(github.event.pull_request.labels.*.name, 'pr:e2e:couchdb') }}
+        if: always()
         uses: actions/github-script@v6
         with:
           script: |
@@ -56,5 +84,5 @@ jobs:
                 name: labelToRemove
               });
             } catch (error) {
-              core.warning(`Failed to remove 'pr:e2e:couchdb' label: ${error.message}`);
+              core.warning(`Failed to remove ' + labelToRemove + ' label: ${error.message}`);
             }

.github/workflows/e2e-pr.yml

@@ -1,37 +1,41 @@
 name: 'e2e-pr'
 on:
+  push:
+    branches: master
   workflow_dispatch:
   pull_request:
     types:
       - labeled
       - opened
+  schedule:
+    - cron: '0 0 * * *'
 jobs:
   e2e-full:
-    if: ${{ github.event.label.name == 'pr:e2e' }}
+    if: contains(github.event.pull_request.labels.*.name, 'pr:e2e') || github.event_name == 'schedule' || github.event_name == 'workflow_dispatch'
     runs-on: ${{ matrix.os }}
+    timeout-minutes: 60
     strategy:
       matrix:
         os:
           - ubuntu-latest
           - windows-latest
     steps:
-      - name: Trigger Success
-        uses: actions/github-script@v6
-        with:
-          script: |
-            github.rest.issues.createComment({
-              issue_number: context.issue.number,
-              owner: "nasa",
-              repo: "openmct",
-              body: 'Started e2e Run. Follow along: https://github.com/nasa/openmct/actions/runs/' + context.runId
-            })
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: '16'
+          node-version: 'lts/hydrogen'
+      
+      - name: Cache NPM dependencies
+        uses: actions/cache@v3
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+            
       - run: npx playwright@1.32.3 install
       - run: npx playwright install chrome-beta
-      - run: npm install
+      - run: npm install --cache ~/.npm --prefer-offline --no-audit --progress=false
       - run: npm run test:e2e:full -- --max-failures=40
       - run: npm run cov:e2e:report || true
       - shell: bash
@@ -44,30 +48,9 @@ jobs:
         uses: actions/upload-artifact@v3
         with:
           path: test-results
-      - name: Test success
-        if: ${{ success() }}
-        uses: actions/github-script@v6
-        with:
-          script: |
-            github.rest.issues.createComment({
-              issue_number: context.issue.number,
-              owner: "nasa",
-              repo: "openmct",
-              body: 'Success ✅ ! Build artifacts are here: https://github.com/nasa/openmct/actions/runs/' + context.runId
-            })
-      - name: Test failure
-        if: ${{ failure() }}
-        uses: actions/github-script@v6
-        with:
-          script: |
-            github.rest.issues.createComment({
-              issue_number: context.issue.number,
-              owner: "nasa",
-              repo: "openmct",
-              body: 'Failure ❌ ! Build artifacts are here: https://github.com/nasa/openmct/actions/runs/' + context.runId
-            })
+
       - name: Remove pr:e2e label (if present)
-        if: ${{ contains(github.event.pull_request.labels.*.name, 'pr:e2e') }}
+        if: always()
         uses: actions/github-script@v6
         with:
           script: |
@@ -81,5 +64,5 @@ jobs:
                 name: labelToRemove
               });
             } catch (error) {
-              core.warning(`Failed to remove 'pr:e2e' label: ${error.message}`);
-            }
+              core.warning(`Failed to remove ' + labelToRemove + ' label: ${error.message}`);
+            }

.github/workflows/npm-prerelease.yml

@@ -14,7 +14,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: lts/hydrogen
       - run: npm install
       - run: |
           echo "//registry.npmjs.org/:_authToken=$NODE_AUTH_TOKEN" >> ~/.npmrc
@@ -29,7 +29,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: lts/hydrogen
           registry-url: https://registry.npmjs.org/
       - run: npm install
       - run: npm publish --access=public --tag unstable

.github/workflows/pr-platform.yml

@@ -1,13 +1,19 @@
 name: 'pr-platform'
 on:
+  push:
+    branches: master
   workflow_dispatch:
   pull_request:
-    types: [labeled]
-
+    types:
+      - labeled
+      - opened
+  schedule:
+    - cron: '0 0 * * *'
 jobs:
-  e2e-full:
-    if: ${{ github.event.label.name == 'pr:platform' }}
+  pr-platform:
+    if: contains(github.event.pull_request.labels.*.name, 'pr:platform') || github.event_name == 'schedule' || github.event_name == 'workflow_dispatch'
     runs-on: ${{ matrix.os }}
+    timeout-minutes: 60
     strategy:
       fail-fast: false
       matrix:
@@ -16,18 +22,49 @@ jobs:
           - macos-latest
           - windows-latest
         node_version:
-          - 16
-          - 18
+          - lts/gallium
+          - lts/hydrogen
         architecture:
           - x64
+    
     name: Node ${{ matrix.node_version }} - ${{ matrix.architecture }} on ${{ matrix.os }}
     steps:
       - uses: actions/checkout@v3
+      
       - name: Setup node
         uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node_version }}
           architecture: ${{ matrix.architecture }}
-      - run: npm install
+
+      - name: Cache NPM dependencies
+        uses: actions/cache@v3
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-${{ matrix.node_version }}-${{ hashFiles('**/package.json') }}
+          restore-keys: |
+            ${{ runner.os }}-${{ matrix.node_version }}-
+
+      - run: npm install --cache ~/.npm --prefer-offline --no-audit --progress=false
+      
       - run: npm test
+      
       - run: npm run lint -- --quiet
+      
+      - name: Remove pr:platform label (if present)
+        if: always()
+        uses: actions/github-script@v6
+        with:
+          script: |
+            const { owner, repo, number } = context.issue;
+            const labelToRemove = 'pr:platform';
+            try {
+              await github.rest.issues.removeLabel({
+                owner,
+                repo,
+                issue_number: number,
+                name: labelToRemove
+              });
+            } catch (error) {
+              core.warning(`Failed to remove ' + labelToRemove + ' label: ${error.message}`);
+            }

.prettierrc

@@ -1,5 +1,6 @@
 {
   "trailingComma": "none",
   "singleQuote": true,
-  "printWidth": 100
+  "printWidth": 100,
+  "endOfLine": "auto"
 }

.webpack/webpack.common.js

@@ -67,8 +67,8 @@ const config = {
       MCT: path.join(projectRootDir, 'src/MCT'),
       testUtils: path.join(projectRootDir, 'src/utils/testUtils.js'),
       objectUtils: path.join(projectRootDir, 'src/api/objects/object-utils.js'),
-      kdbush: path.join(projectRootDir, 'node_modules/kdbush/kdbush.min.js'),
-      utils: path.join(projectRootDir, 'src/utils')
+      utils: path.join(projectRootDir, 'src/utils'),
+      vue: path.join(projectRootDir, 'node_modules/@vue/compat/dist/vue.esm-bundler.js'),
     }
   },
   plugins: [
@@ -122,7 +122,15 @@ const config = {
       },
       {
         test: /\.vue$/,
-        use: 'vue-loader'
+        loader: 'vue-loader',
+        options: {
+          compilerOptions: {
+            whitespace: 'preserve',
+            compatConfig: {
+              MODE: 2
+            }
+          }
+        }
       },
       {
         test: /\.html$/,

.webpack/webpack.dev.js

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

.webpack/webpack.prod.js

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

API.md

@@ -2,7 +2,7 @@
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 **Table of Contents**
 
-- [Building Applications With Open MCT](#developing-applications-with-open-mct)
+- [Developing Applications With Open MCT](#developing-applications-with-open-mct)
   - [Scope and purpose of this document](#scope-and-purpose-of-this-document)
   - [Building From Source](#building-from-source)
   - [Starting an Open MCT application](#starting-an-open-mct-application)
@@ -26,7 +26,7 @@
           - [Value Hints](#value-hints)
         - [The Time Conductor and Telemetry](#the-time-conductor-and-telemetry)
       - [Telemetry Providers](#telemetry-providers)
-      - [Telemetry Requests and Responses.](#telemetry-requests-and-responses)
+      - [Telemetry Requests and Responses](#telemetry-requests-and-responses)
       - [Request Strategies **draft**](#request-strategies-draft)
         - [`latest` request strategy](#latest-request-strategy)
         - [`minmax` request strategy](#minmax-request-strategy)
@@ -873,6 +873,8 @@ function without any arguments.
 
 #### Stopping an active clock
 
+_As of July 2023, this method will be deprecated. Open MCT will always have a ticking clock._
+
 The `stopClock` method can be used to stop an active clock, and to clear it. It
 will stop the clock from ticking, and set the active clock to `undefined`.
 

e2e/appActions.js

@@ -314,7 +314,9 @@ async function _isInEditMode(page, identifier) {
  */
 async function setTimeConductorMode(page, isFixedTimespan = true) {
   // Click 'mode' button
-  await page.locator('.c-mode-button').click();
+  const timeConductorMode = await page.locator('.c-compact-tc');
+  await timeConductorMode.click();
+  await timeConductorMode.locator('.js-mode-button').click();
 
   // Switch time conductor mode
   if (isFixedTimespan) {
@@ -353,23 +355,23 @@ async function setRealTimeMode(page) {
  * @param {OffsetValues} offset
  * @param {import('@playwright/test').Locator} offsetButton
  */
-async function setTimeConductorOffset(page, { hours, mins, secs }, offsetButton) {
-  await offsetButton.click();
+async function setTimeConductorOffset(page, { hours, mins, secs }) {
+  // await offsetButton.click();
 
   if (hours) {
-    await page.fill('.pr-time-controls__hrs', hours);
+    await page.fill('.pr-time-input__hrs', hours);
   }
 
   if (mins) {
-    await page.fill('.pr-time-controls__mins', mins);
+    await page.fill('.pr-time-input__mins', mins);
   }
 
   if (secs) {
-    await page.fill('.pr-time-controls__secs', secs);
+    await page.fill('.pr-time-input__secs', secs);
   }
 
   // Click the check button
-  await page.locator('.pr-time__buttons .icon-check').click();
+  await page.locator('.pr-time-input--buttons .icon-check').click();
 }
 
 /**
@@ -378,8 +380,10 @@ async function setTimeConductorOffset(page, { hours, mins, secs }, offsetButton)
  * @param {OffsetValues} offset
  */
 async function setStartOffset(page, offset) {
-  const startOffsetButton = page.locator('data-testid=conductor-start-offset-button');
-  await setTimeConductorOffset(page, offset, startOffsetButton);
+  // Click 'mode' button
+  const timeConductorMode = await page.locator('.c-compact-tc');
+  await timeConductorMode.click();
+  await setTimeConductorOffset(page, offset);
 }
 
 /**
@@ -388,8 +392,10 @@ async function setStartOffset(page, offset) {
  * @param {OffsetValues} offset
  */
 async function setEndOffset(page, offset) {
-  const endOffsetButton = page.locator('data-testid=conductor-end-offset-button');
-  await setTimeConductorOffset(page, offset, endOffsetButton);
+  // Click 'mode' button
+  const timeConductorMode = await page.locator('.c-compact-tc');
+  await timeConductorMode.click();
+  await setTimeConductorOffset(page, offset);
 }
 
 /**
@@ -401,14 +407,7 @@ async function setEndOffset(page, offset) {
 async function selectInspectorTab(page, name) {
   const inspectorTabs = page.getByRole('tablist');
   const inspectorTab = inspectorTabs.getByTitle(name);
-  const inspectorTabClass = await inspectorTab.getAttribute('class');
-  const isSelectedInspectorTab = inspectorTabClass.includes('is-current');
-
-  // do not click a tab that is already selected or it will timeout your test
-  // do to a { pointer-events: none; } on selected tabs
-  if (!isSelectedInspectorTab) {
-    await inspectorTab.click();
-  }
+  await inspectorTab.click();
 }
 
 /**

e2e/baseFixtures.js

@@ -29,7 +29,7 @@
  */
 
 const base = require('@playwright/test');
-const { expect } = base;
+const { expect, request } = base;
 const fs = require('fs');
 const path = require('path');
 const { v4: uuid } = require('uuid');
@@ -179,4 +179,5 @@ exports.test = base.test.extend({
 });
 
 exports.expect = expect;
+exports.request = request;
 exports.waitForAnimations = waitForAnimations;

e2e/playwright-ci.config.js

@@ -77,7 +77,6 @@ const config = {
       }
     ],
     ['junit', { outputFile: '../test-results/results.xml' }],
-    ['github'],
     ['@deploysentinel/playwright']
   ]
 };

e2e/pluginFixtures.js

@@ -26,7 +26,7 @@
  * and appActions. These fixtures should be generalized across all plugins.
  */
 
-const { test, expect } = require('./baseFixtures');
+const { test, expect, request } = require('./baseFixtures');
 // const { createDomainObjectWithDefaults } = require('./appActions');
 const path = require('path');
 
@@ -147,6 +147,7 @@ exports.test = test.extend({
   }
 });
 exports.expect = expect;
+exports.request = request;
 
 /**
  * Takes a readable stream and returns a string.

e2e/test-data/VisualTestData_storage.json

@@ -5,18 +5,18 @@
       "origin": "http://localhost:8080",
       "localStorage": [
         {
-          "name": "tcHistory",
-          "value": "{\"utc\":[{\"start\":1658617611983,\"end\":1658619411983}]}"
+          "name": "mct",
+          "value": "{\"mine\":{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"58f55f3a-46d9-4c37-a726-27b5d38b895a\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"modified\":1689710399654,\"created\":1689710398656,\"persisted\":1689710399654},\"58f55f3a-46d9-4c37-a726-27b5d38b895a\":{\"identifier\":{\"key\":\"58f55f3a-46d9-4c37-a726-27b5d38b895a\",\"namespace\":\"\"},\"name\":\"Overlay Plot:b0ba67ab-e383-40c1-a181-82b174e8fdf0\",\"type\":\"telemetry.plot.overlay\",\"composition\":[{\"key\":\"19f2e461-190e-4662-8d62-251e90bb7aac\",\"namespace\":\"\"}],\"configuration\":{\"series\":[{\"identifier\":{\"key\":\"19f2e461-190e-4662-8d62-251e90bb7aac\",\"namespace\":\"\"}}]},\"notes\":\"framework/generateVisualTestData.e2e.spec.js\\nGenerate Visual Test Data @localStorage\\nchrome\",\"modified\":1689710400878,\"location\":\"mine\",\"created\":1689710399651,\"persisted\":1689710400878},\"19f2e461-190e-4662-8d62-251e90bb7aac\":{\"name\":\"Unnamed Sine Wave Generator\",\"type\":\"generator\",\"identifier\":{\"key\":\"19f2e461-190e-4662-8d62-251e90bb7aac\",\"namespace\":\"\"},\"telemetry\":{\"period\":10,\"amplitude\":1,\"offset\":0,\"dataRateInHz\":1,\"phase\":0,\"randomness\":0,\"loadDelay\":\"5000\",\"infinityValues\":false,\"staleness\":false},\"modified\":1689710400433,\"location\":\"58f55f3a-46d9-4c37-a726-27b5d38b895a\",\"created\":1689710400433,\"persisted\":1689710400433}}"
         },
         {
-          "name": "mct",
-          "value": "{\"mine\":{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"7fa5749b-8969-494c-9d85-c272516d333c\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"persisted\":1658619412848,\"modified\":1658619412848},\"7fa5749b-8969-494c-9d85-c272516d333c\":{\"identifier\":{\"key\":\"7fa5749b-8969-494c-9d85-c272516d333c\",\"namespace\":\"\"},\"name\":\"Unnamed Overlay Plot\",\"type\":\"telemetry.plot.overlay\",\"composition\":[{\"key\":\"67cbb9fc-af46-4148-b9e5-aea11179ae4b\",\"namespace\":\"\"}],\"configuration\":{\"series\":[{\"identifier\":{\"key\":\"67cbb9fc-af46-4148-b9e5-aea11179ae4b\",\"namespace\":\"\"}}]},\"modified\":1658619413566,\"location\":\"mine\",\"persisted\":1658619413567},\"67cbb9fc-af46-4148-b9e5-aea11179ae4b\":{\"name\":\"Unnamed Sine Wave Generator\",\"type\":\"generator\",\"identifier\":{\"key\":\"67cbb9fc-af46-4148-b9e5-aea11179ae4b\",\"namespace\":\"\"},\"telemetry\":{\"period\":10,\"amplitude\":1,\"offset\":0,\"dataRateInHz\":1,\"phase\":0,\"randomness\":0,\"loadDelay\":\"5000\"},\"modified\":1658619413552,\"location\":\"7fa5749b-8969-494c-9d85-c272516d333c\",\"persisted\":1658619413552}}"
+          "name": "mct-recent-objects",
+          "value": "[{\"objectPath\":[{\"identifier\":{\"key\":\"58f55f3a-46d9-4c37-a726-27b5d38b895a\",\"namespace\":\"\"},\"name\":\"Overlay Plot:b0ba67ab-e383-40c1-a181-82b174e8fdf0\",\"type\":\"telemetry.plot.overlay\",\"composition\":[{\"key\":\"19f2e461-190e-4662-8d62-251e90bb7aac\",\"namespace\":\"\"}],\"configuration\":{\"series\":[]},\"notes\":\"framework/generateVisualTestData.e2e.spec.js\\nGenerate Visual Test Data @localStorage\\nchrome\",\"modified\":1689710400435,\"location\":\"mine\",\"created\":1689710399651,\"persisted\":1689710400436},{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"58f55f3a-46d9-4c37-a726-27b5d38b895a\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"modified\":1689710399654,\"created\":1689710398656,\"persisted\":1689710399654},{\"identifier\":{\"key\":\"ROOT\",\"namespace\":\"\"},\"name\":\"Open MCT\",\"type\":\"root\",\"composition\":[{\"key\":\"mine\",\"namespace\":\"\"}]}],\"navigationPath\":\"/browse/mine/58f55f3a-46d9-4c37-a726-27b5d38b895a\",\"domainObject\":{\"identifier\":{\"key\":\"58f55f3a-46d9-4c37-a726-27b5d38b895a\",\"namespace\":\"\"},\"name\":\"Overlay Plot:b0ba67ab-e383-40c1-a181-82b174e8fdf0\",\"type\":\"telemetry.plot.overlay\",\"composition\":[{\"key\":\"19f2e461-190e-4662-8d62-251e90bb7aac\",\"namespace\":\"\"}],\"configuration\":{\"series\":[]},\"notes\":\"framework/generateVisualTestData.e2e.spec.js\\nGenerate Visual Test Data @localStorage\\nchrome\",\"modified\":1689710400435,\"location\":\"mine\",\"created\":1689710399651,\"persisted\":1689710400436}},{\"objectPath\":[{\"identifier\":{\"key\":\"19f2e461-190e-4662-8d62-251e90bb7aac\",\"namespace\":\"\"},\"name\":\"Unnamed Sine Wave Generator\",\"type\":\"generator\",\"telemetry\":{\"period\":10,\"amplitude\":1,\"offset\":0,\"dataRateInHz\":1,\"phase\":0,\"randomness\":0,\"loadDelay\":\"5000\",\"infinityValues\":false,\"staleness\":false},\"modified\":1689710400433,\"location\":\"58f55f3a-46d9-4c37-a726-27b5d38b895a\",\"created\":1689710400433,\"persisted\":1689710400433},{\"identifier\":{\"key\":\"58f55f3a-46d9-4c37-a726-27b5d38b895a\",\"namespace\":\"\"},\"name\":\"Overlay Plot:b0ba67ab-e383-40c1-a181-82b174e8fdf0\",\"type\":\"telemetry.plot.overlay\",\"composition\":[{\"key\":\"19f2e461-190e-4662-8d62-251e90bb7aac\",\"namespace\":\"\"}],\"configuration\":{\"series\":[]},\"notes\":\"framework/generateVisualTestData.e2e.spec.js\\nGenerate Visual Test Data @localStorage\\nchrome\",\"modified\":1689710400435,\"location\":\"mine\",\"created\":1689710399651,\"persisted\":1689710400436},{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"58f55f3a-46d9-4c37-a726-27b5d38b895a\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"modified\":1689710399654,\"created\":1689710398656,\"persisted\":1689710399654},{\"identifier\":{\"key\":\"ROOT\",\"namespace\":\"\"},\"name\":\"Open MCT\",\"type\":\"root\",\"composition\":[{\"key\":\"mine\",\"namespace\":\"\"}]}],\"navigationPath\":\"/browse/mine/58f55f3a-46d9-4c37-a726-27b5d38b895a/19f2e461-190e-4662-8d62-251e90bb7aac\",\"domainObject\":{\"identifier\":{\"key\":\"19f2e461-190e-4662-8d62-251e90bb7aac\",\"namespace\":\"\"},\"name\":\"Unnamed Sine Wave Generator\",\"type\":\"generator\",\"telemetry\":{\"period\":10,\"amplitude\":1,\"offset\":0,\"dataRateInHz\":1,\"phase\":0,\"randomness\":0,\"loadDelay\":\"5000\",\"infinityValues\":false,\"staleness\":false},\"modified\":1689710400433,\"location\":\"58f55f3a-46d9-4c37-a726-27b5d38b895a\",\"created\":1689710400433,\"persisted\":1689710400433}},{\"objectPath\":[{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"58f55f3a-46d9-4c37-a726-27b5d38b895a\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"modified\":1689710399654,\"created\":1689710398656,\"persisted\":1689710399654},{\"identifier\":{\"key\":\"ROOT\",\"namespace\":\"\"},\"name\":\"Open MCT\",\"type\":\"root\",\"composition\":[{\"key\":\"mine\",\"namespace\":\"\"}]}],\"navigationPath\":\"/browse/mine\",\"domainObject\":{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"58f55f3a-46d9-4c37-a726-27b5d38b895a\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"modified\":1689710399654,\"created\":1689710398656,\"persisted\":1689710399654}}]"
         },
         {
           "name": "mct-tree-expanded",
-          "value": "[\"/browse/mine\"]"
+          "value": "[]"
         }
       ]
     }
   ]
-}
+}

e2e/test-data/recycled_local_storage.json

@@ -4,19 +4,23 @@
     {
       "origin": "http://localhost:8080",
       "localStorage": [
-        {
-          "name": "tcHistory",
-          "value": "{\"utc\":[{\"start\":1658617494563,\"end\":1658619294563},{\"start\":1658617090044,\"end\":1658618890044},{\"start\":1658616460484,\"end\":1658618260484},{\"start\":1658608882159,\"end\":1658610682159},{\"start\":1654537164464,\"end\":1654538964464},{\"start\":1652301954635,\"end\":1652303754635}]}"
-        },
         {
           "name": "mct",
-          "value": "{\"mine\":{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"f64bea3b-58a7-4586-8c05-8b651e5f0bfd\",\"namespace\":\"\"},{\"key\":\"2d02a680-eb7e-4645-bba2-dd298f76efb8\",\"namespace\":\"\"},{\"key\":\"72a5f66b-39a7-4f62-8c40-4a99a33d6a8e\",\"namespace\":\"\"},{\"key\":\"8e4d20f1-9a04-4de5-8db5-c7e08d27f70d\",\"namespace\":\"\"},{\"key\":\"3e294eae-6124-409b-a870-554d1bdcdd6f\",\"namespace\":\"\"},{\"key\":\"ec24d05d-5df5-4c96-9241-b73636cd19a9\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"persisted\":1658619295366,\"modified\":1658619295366},\"f64bea3b-58a7-4586-8c05-8b651e5f0bfd\":{\"name\":\"Unnamed Condition Set\",\"type\":\"conditionSet\",\"identifier\":{\"key\":\"f64bea3b-58a7-4586-8c05-8b651e5f0bfd\",\"namespace\":\"\"},\"configuration\":{\"conditionTestData\":[],\"conditionCollection\":[{\"isDefault\":true,\"id\":\"73f2d9ae-d1f3-4561-b7fc-ecd5df557249\",\"configuration\":{\"name\":\"Default\",\"output\":\"Default\",\"trigger\":\"all\",\"criteria\":[]},\"summary\":\"Default condition\"}]},\"composition\":[],\"telemetry\":{},\"modified\":1652303755999,\"location\":\"mine\",\"persisted\":1652303756002},\"2d02a680-eb7e-4645-bba2-dd298f76efb8\":{\"name\":\"Unnamed Condition Set\",\"type\":\"conditionSet\",\"identifier\":{\"key\":\"2d02a680-eb7e-4645-bba2-dd298f76efb8\",\"namespace\":\"\"},\"configuration\":{\"conditionTestData\":[],\"conditionCollection\":[{\"isDefault\":true,\"id\":\"4291d80c-303c-4d8d-85e1-10f012b864fb\",\"configuration\":{\"name\":\"Default\",\"output\":\"Default\",\"trigger\":\"all\",\"criteria\":[]},\"summary\":\"Default condition\"}]},\"composition\":[],\"telemetry\":{},\"modified\":1654538965702,\"location\":\"mine\",\"persisted\":1654538965702},\"72a5f66b-39a7-4f62-8c40-4a99a33d6a8e\":{\"name\":\"Unnamed Condition Set\",\"type\":\"conditionSet\",\"identifier\":{\"key\":\"72a5f66b-39a7-4f62-8c40-4a99a33d6a8e\",\"namespace\":\"\"},\"configuration\":{\"conditionTestData\":[],\"conditionCollection\":[{\"isDefault\":true,\"id\":\"2b6bf89f-877b-42b8-acc1-a9a575efdbe1\",\"configuration\":{\"name\":\"Default\",\"output\":\"Default\",\"trigger\":\"all\",\"criteria\":[]},\"summary\":\"Default condition\"}]},\"composition\":[],\"telemetry\":{},\"modified\":1658610682787,\"location\":\"mine\",\"persisted\":1658610682787},\"8e4d20f1-9a04-4de5-8db5-c7e08d27f70d\":{\"name\":\"Unnamed Condition Set\",\"type\":\"conditionSet\",\"identifier\":{\"key\":\"8e4d20f1-9a04-4de5-8db5-c7e08d27f70d\",\"namespace\":\"\"},\"configuration\":{\"conditionTestData\":[],\"conditionCollection\":[{\"isDefault\":true,\"id\":\"b9a9c413-4b94-401d-b0c7-5e404f182616\",\"configuration\":{\"name\":\"Default\",\"output\":\"Default\",\"trigger\":\"all\",\"criteria\":[]},\"summary\":\"Default condition\"}]},\"composition\":[],\"telemetry\":{},\"modified\":1658618261112,\"location\":\"mine\",\"persisted\":1658618261112},\"3e294eae-6124-409b-a870-554d1bdcdd6f\":{\"name\":\"Unnamed Condition Set\",\"type\":\"conditionSet\",\"identifier\":{\"key\":\"3e294eae-6124-409b-a870-554d1bdcdd6f\",\"namespace\":\"\"},\"configuration\":{\"conditionTestData\":[],\"conditionCollection\":[{\"isDefault\":true,\"id\":\"108043b1-9c88-4e1d-8deb-fbf2cdb528f9\",\"configuration\":{\"name\":\"Default\",\"output\":\"Default\",\"trigger\":\"all\",\"criteria\":[]},\"summary\":\"Default condition\"}]},\"composition\":[],\"telemetry\":{},\"modified\":1658618890910,\"location\":\"mine\",\"persisted\":1658618890910},\"ec24d05d-5df5-4c96-9241-b73636cd19a9\":{\"name\":\"Unnamed Condition Set\",\"type\":\"conditionSet\",\"identifier\":{\"key\":\"ec24d05d-5df5-4c96-9241-b73636cd19a9\",\"namespace\":\"\"},\"configuration\":{\"conditionTestData\":[],\"conditionCollection\":[{\"isDefault\":true,\"id\":\"4062bd9b-b788-43dd-ab0a-8fa10a78d4b3\",\"configuration\":{\"name\":\"Default\",\"output\":\"Default\",\"trigger\":\"all\",\"criteria\":[]},\"summary\":\"Default condition\"}]},\"composition\":[],\"telemetry\":{},\"modified\":1658619295363,\"location\":\"mine\",\"persisted\":1658619295363}}"
+          "value": "{\"mine\":{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"f64bea3b-58a7-4586-8c05-8b651e5f0bfd\",\"namespace\":\"\"},{\"key\":\"2d02a680-eb7e-4645-bba2-dd298f76efb8\",\"namespace\":\"\"},{\"key\":\"72a5f66b-39a7-4f62-8c40-4a99a33d6a8e\",\"namespace\":\"\"},{\"key\":\"8e4d20f1-9a04-4de5-8db5-c7e08d27f70d\",\"namespace\":\"\"},{\"key\":\"3e294eae-6124-409b-a870-554d1bdcdd6f\",\"namespace\":\"\"},{\"key\":\"ec24d05d-5df5-4c96-9241-b73636cd19a9\",\"namespace\":\"\"},{\"key\":\"0ec517e8-6c11-4d98-89b5-c300fe61b304\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"persisted\":1689710689554,\"modified\":1689710689554},\"f64bea3b-58a7-4586-8c05-8b651e5f0bfd\":{\"name\":\"Unnamed Condition Set\",\"type\":\"conditionSet\",\"identifier\":{\"key\":\"f64bea3b-58a7-4586-8c05-8b651e5f0bfd\",\"namespace\":\"\"},\"configuration\":{\"conditionTestData\":[],\"conditionCollection\":[{\"isDefault\":true,\"id\":\"73f2d9ae-d1f3-4561-b7fc-ecd5df557249\",\"configuration\":{\"name\":\"Default\",\"output\":\"Default\",\"trigger\":\"all\",\"criteria\":[]},\"summary\":\"Default condition\"}]},\"composition\":[],\"telemetry\":{},\"modified\":1652303755999,\"location\":\"mine\",\"persisted\":1652303756002},\"2d02a680-eb7e-4645-bba2-dd298f76efb8\":{\"name\":\"Unnamed Condition Set\",\"type\":\"conditionSet\",\"identifier\":{\"key\":\"2d02a680-eb7e-4645-bba2-dd298f76efb8\",\"namespace\":\"\"},\"configuration\":{\"conditionTestData\":[],\"conditionCollection\":[{\"isDefault\":true,\"id\":\"4291d80c-303c-4d8d-85e1-10f012b864fb\",\"configuration\":{\"name\":\"Default\",\"output\":\"Default\",\"trigger\":\"all\",\"criteria\":[]},\"summary\":\"Default condition\"}]},\"composition\":[],\"telemetry\":{},\"modified\":1654538965702,\"location\":\"mine\",\"persisted\":1654538965702},\"72a5f66b-39a7-4f62-8c40-4a99a33d6a8e\":{\"name\":\"Unnamed Condition Set\",\"type\":\"conditionSet\",\"identifier\":{\"key\":\"72a5f66b-39a7-4f62-8c40-4a99a33d6a8e\",\"namespace\":\"\"},\"configuration\":{\"conditionTestData\":[],\"conditionCollection\":[{\"isDefault\":true,\"id\":\"2b6bf89f-877b-42b8-acc1-a9a575efdbe1\",\"configuration\":{\"name\":\"Default\",\"output\":\"Default\",\"trigger\":\"all\",\"criteria\":[]},\"summary\":\"Default condition\"}]},\"composition\":[],\"telemetry\":{},\"modified\":1658610682787,\"location\":\"mine\",\"persisted\":1658610682787},\"8e4d20f1-9a04-4de5-8db5-c7e08d27f70d\":{\"name\":\"Unnamed Condition Set\",\"type\":\"conditionSet\",\"identifier\":{\"key\":\"8e4d20f1-9a04-4de5-8db5-c7e08d27f70d\",\"namespace\":\"\"},\"configuration\":{\"conditionTestData\":[],\"conditionCollection\":[{\"isDefault\":true,\"id\":\"b9a9c413-4b94-401d-b0c7-5e404f182616\",\"configuration\":{\"name\":\"Default\",\"output\":\"Default\",\"trigger\":\"all\",\"criteria\":[]},\"summary\":\"Default condition\"}]},\"composition\":[],\"telemetry\":{},\"modified\":1658618261112,\"location\":\"mine\",\"persisted\":1658618261112},\"3e294eae-6124-409b-a870-554d1bdcdd6f\":{\"name\":\"Unnamed Condition Set\",\"type\":\"conditionSet\",\"identifier\":{\"key\":\"3e294eae-6124-409b-a870-554d1bdcdd6f\",\"namespace\":\"\"},\"configuration\":{\"conditionTestData\":[],\"conditionCollection\":[{\"isDefault\":true,\"id\":\"108043b1-9c88-4e1d-8deb-fbf2cdb528f9\",\"configuration\":{\"name\":\"Default\",\"output\":\"Default\",\"trigger\":\"all\",\"criteria\":[]},\"summary\":\"Default condition\"}]},\"composition\":[],\"telemetry\":{},\"modified\":1658618890910,\"location\":\"mine\",\"persisted\":1658618890910},\"ec24d05d-5df5-4c96-9241-b73636cd19a9\":{\"name\":\"Unnamed Condition Set\",\"type\":\"conditionSet\",\"identifier\":{\"key\":\"ec24d05d-5df5-4c96-9241-b73636cd19a9\",\"namespace\":\"\"},\"configuration\":{\"conditionTestData\":[],\"conditionCollection\":[{\"isDefault\":true,\"id\":\"4062bd9b-b788-43dd-ab0a-8fa10a78d4b3\",\"configuration\":{\"name\":\"Default\",\"output\":\"Default\",\"trigger\":\"all\",\"criteria\":[]},\"summary\":\"Default condition\"}]},\"composition\":[],\"telemetry\":{},\"modified\":1658619295363,\"location\":\"mine\",\"persisted\":1658619295363},\"0ec517e8-6c11-4d98-89b5-c300fe61b304\":{\"name\":\"Unnamed Condition Set\",\"type\":\"conditionSet\",\"identifier\":{\"key\":\"0ec517e8-6c11-4d98-89b5-c300fe61b304\",\"namespace\":\"\"},\"configuration\":{\"conditionTestData\":[],\"conditionCollection\":[{\"isDefault\":true,\"id\":\"2f1585da-6f7e-4ccd-8a20-590fdf177b5d\",\"configuration\":{\"name\":\"Default\",\"output\":\"Default\",\"trigger\":\"all\",\"criteria\":[]},\"summary\":\"Default condition\"}]},\"composition\":[],\"telemetry\":{},\"modified\":1689710689550,\"location\":\"mine\",\"created\":1689710689550,\"persisted\":1689710689550}}"
         },
         {
           "name": "mct-tree-expanded",
           "value": "[]"
+        },
+        {
+          "name": "tcHistory",
+          "value": "{\"utc\":[{\"start\":1658617494563,\"end\":1658619294563},{\"start\":1658617090044,\"end\":1658618890044},{\"start\":1658616460484,\"end\":1658618260484},{\"start\":1658608882159,\"end\":1658610682159},{\"start\":1654537164464,\"end\":1654538964464},{\"start\":1652301954635,\"end\":1652303754635}]}"
+        },
+        {
+          "name": "mct-recent-objects",
+          "value": "[{\"objectPath\":[{\"identifier\":{\"key\":\"0ec517e8-6c11-4d98-89b5-c300fe61b304\",\"namespace\":\"\"},\"name\":\"Unnamed Condition Set\",\"type\":\"conditionSet\",\"configuration\":{\"conditionTestData\":[],\"conditionCollection\":[{\"isDefault\":true,\"id\":\"2f1585da-6f7e-4ccd-8a20-590fdf177b5d\",\"configuration\":{\"name\":\"Default\",\"output\":\"Default\",\"trigger\":\"all\",\"criteria\":[]},\"summary\":\"Default condition\"}]},\"composition\":[],\"telemetry\":{},\"modified\":1689710689550,\"location\":\"mine\",\"created\":1689710689550,\"persisted\":1689710689550},{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"f64bea3b-58a7-4586-8c05-8b651e5f0bfd\",\"namespace\":\"\"},{\"key\":\"2d02a680-eb7e-4645-bba2-dd298f76efb8\",\"namespace\":\"\"},{\"key\":\"72a5f66b-39a7-4f62-8c40-4a99a33d6a8e\",\"namespace\":\"\"},{\"key\":\"8e4d20f1-9a04-4de5-8db5-c7e08d27f70d\",\"namespace\":\"\"},{\"key\":\"3e294eae-6124-409b-a870-554d1bdcdd6f\",\"namespace\":\"\"},{\"key\":\"ec24d05d-5df5-4c96-9241-b73636cd19a9\",\"namespace\":\"\"},{\"key\":\"0ec517e8-6c11-4d98-89b5-c300fe61b304\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"persisted\":1689710689554,\"modified\":1689710689554},{\"identifier\":{\"key\":\"ROOT\",\"namespace\":\"\"},\"name\":\"Open MCT\",\"type\":\"root\",\"composition\":[{\"key\":\"mine\",\"namespace\":\"\"}]}],\"navigationPath\":\"/browse/mine/0ec517e8-6c11-4d98-89b5-c300fe61b304\",\"domainObject\":{\"identifier\":{\"key\":\"0ec517e8-6c11-4d98-89b5-c300fe61b304\",\"namespace\":\"\"},\"name\":\"Unnamed Condition Set\",\"type\":\"conditionSet\",\"configuration\":{\"conditionTestData\":[],\"conditionCollection\":[{\"isDefault\":true,\"id\":\"2f1585da-6f7e-4ccd-8a20-590fdf177b5d\",\"configuration\":{\"name\":\"Default\",\"output\":\"Default\",\"trigger\":\"all\",\"criteria\":[]},\"summary\":\"Default condition\"}]},\"composition\":[],\"telemetry\":{},\"modified\":1689710689550,\"location\":\"mine\",\"created\":1689710689550,\"persisted\":1689710689550}},{\"objectPath\":[{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"f64bea3b-58a7-4586-8c05-8b651e5f0bfd\",\"namespace\":\"\"},{\"key\":\"2d02a680-eb7e-4645-bba2-dd298f76efb8\",\"namespace\":\"\"},{\"key\":\"72a5f66b-39a7-4f62-8c40-4a99a33d6a8e\",\"namespace\":\"\"},{\"key\":\"8e4d20f1-9a04-4de5-8db5-c7e08d27f70d\",\"namespace\":\"\"},{\"key\":\"3e294eae-6124-409b-a870-554d1bdcdd6f\",\"namespace\":\"\"},{\"key\":\"ec24d05d-5df5-4c96-9241-b73636cd19a9\",\"namespace\":\"\"},{\"key\":\"0ec517e8-6c11-4d98-89b5-c300fe61b304\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"persisted\":1689710689554,\"modified\":1689710689554},{\"identifier\":{\"key\":\"ROOT\",\"namespace\":\"\"},\"name\":\"Open MCT\",\"type\":\"root\",\"composition\":[{\"key\":\"mine\",\"namespace\":\"\"}]}],\"navigationPath\":\"/browse/mine\",\"domainObject\":{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"f64bea3b-58a7-4586-8c05-8b651e5f0bfd\",\"namespace\":\"\"},{\"key\":\"2d02a680-eb7e-4645-bba2-dd298f76efb8\",\"namespace\":\"\"},{\"key\":\"72a5f66b-39a7-4f62-8c40-4a99a33d6a8e\",\"namespace\":\"\"},{\"key\":\"8e4d20f1-9a04-4de5-8db5-c7e08d27f70d\",\"namespace\":\"\"},{\"key\":\"3e294eae-6124-409b-a870-554d1bdcdd6f\",\"namespace\":\"\"},{\"key\":\"ec24d05d-5df5-4c96-9241-b73636cd19a9\",\"namespace\":\"\"},{\"key\":\"0ec517e8-6c11-4d98-89b5-c300fe61b304\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"persisted\":1689710689554,\"modified\":1689710689554}}]"
         }
       ]
     }
   ]
-}
+}

e2e/tests/framework/baseFixtures.e2e.spec.js

@@ -29,7 +29,8 @@ relates to how we've extended it (i.e. ./e2e/baseFixtures.js) and assumptions ma
 const { test } = require('../../baseFixtures.js');
 
 test.describe('baseFixtures tests', () => {
-  test('Verify that tests fail if console.error is thrown', async ({ page }) => {
+  //Skip this test for now https://github.com/nasa/openmct/issues/6785
+  test.fixme('Verify that tests fail if console.error is thrown', async ({ page }) => {
     test.fail();
     //Go to baseURL
     await page.goto('./', { waitUntil: 'domcontentloaded' });

e2e/tests/functional/forms.e2e.spec.js

@@ -41,7 +41,7 @@ test.describe('Form Validation Behavior', () => {
     await page.goto('./', { waitUntil: 'domcontentloaded' });
 
     await page.click('button:has-text("Create")');
-    await page.click(':nth-match(:text("Folder"), 2)');
+    await page.getByRole('menuitem', { name: ' Folder' }).click();
 
     // Fill in empty string into title and trigger validation with 'Tab'
     await page.click('text=Properties Title Notes >> input[type="text"]');
@@ -192,8 +192,12 @@ test.describe('Persistence operations @couchdb', () => {
     ]);
 
     //Slow down the test a bit
-    await expect(page.getByRole('treeitem', { name: `  ${myItemsFolderName}` })).toBeVisible();
-    await expect(page2.getByRole('treeitem', { name: `  ${myItemsFolderName}` })).toBeVisible();
+    await expect(
+      page.getByRole('button', { name: `Expand ${myItemsFolderName} folder` })
+    ).toBeVisible();
+    await expect(
+      page2.getByRole('button', { name: `Expand ${myItemsFolderName} folder` })
+    ).toBeVisible();
 
     // Both pages: Click the Create button
     await Promise.all([

e2e/tests/functional/planning/timelist.e2e.spec.js

@@ -0,0 +1,122 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2023, 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.
+ *****************************************************************************/
+
+const { test, expect } = require('../../../pluginFixtures');
+const { createDomainObjectWithDefaults, createPlanFromJSON } = require('../../../appActions');
+
+const testPlan = {
+  TEST_GROUP: [
+    {
+      name: 'Past event 1',
+      start: 1660320408000,
+      end: 1660343797000,
+      type: 'TEST-GROUP',
+      color: 'orange',
+      textColor: 'white'
+    },
+    {
+      name: 'Past event 2',
+      start: 1660406808000,
+      end: 1660429160000,
+      type: 'TEST-GROUP',
+      color: 'orange',
+      textColor: 'white'
+    },
+    {
+      name: 'Past event 3',
+      start: 1660493208000,
+      end: 1660503981000,
+      type: 'TEST-GROUP',
+      color: 'orange',
+      textColor: 'white'
+    },
+    {
+      name: 'Past event 4',
+      start: 1660579608000,
+      end: 1660624108000,
+      type: 'TEST-GROUP',
+      color: 'orange',
+      textColor: 'white'
+    },
+    {
+      name: 'Past event 5',
+      start: 1660666008000,
+      end: 1660681529000,
+      type: 'TEST-GROUP',
+      color: 'orange',
+      textColor: 'white'
+    }
+  ]
+};
+
+test.describe('Time List', () => {
+  test('Create a Time List, add a single Plan to it and verify all the activities are displayed with no milliseconds', async ({
+    page
+  }) => {
+    // Goto baseURL
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    const timelist = await test.step('Create a Time List', async () => {
+      const createdTimeList = await createDomainObjectWithDefaults(page, { type: 'Time List' });
+      const objectName = await page.locator('.l-browse-bar__object-name').innerText();
+      expect(objectName).toBe(createdTimeList.name);
+
+      return createdTimeList;
+    });
+
+    await test.step('Create a Plan and add it to the timelist', async () => {
+      const createdPlan = await createPlanFromJSON(page, {
+        name: 'Test Plan',
+        json: testPlan
+      });
+
+      await page.goto(timelist.url);
+      // Expand the tree to show the plan
+      await page.click("button[title='Show selected item in tree']");
+      await page.dragAndDrop(`role=treeitem[name=/${createdPlan.name}/]`, '.c-object-view');
+      await page.click("button[title='Save']");
+      await page.click("li[title='Save and Finish Editing']");
+      const startBound = testPlan.TEST_GROUP[0].start;
+      const endBound = testPlan.TEST_GROUP[testPlan.TEST_GROUP.length - 1].end;
+
+      // Switch to fixed time mode with all plan events within the bounds
+      await page.goto(
+        `${timelist.url}?tc.mode=fixed&tc.startBound=${startBound}&tc.endBound=${endBound}&tc.timeSystem=utc&view=timelist.view`
+      );
+
+      // Verify all events are displayed
+      const eventCount = await page.locator('.js-list-item').count();
+      expect(eventCount).toEqual(testPlan.TEST_GROUP.length);
+    });
+
+    await test.step('Does not show milliseconds in times', async () => {
+      // Get the first activity
+      const row = await page.locator('.js-list-item').first();
+      // Verify that none fo the times have milliseconds displayed.
+      // Example: 2024-11-17T16:00:00Z is correct and 2024-11-17T16:00:00.000Z is wrong
+
+      await expect(row.locator('.--start')).not.toContainText('.');
+      await expect(row.locator('.--end')).not.toContainText('.');
+      await expect(row.locator('.--duration')).not.toContainText('.');
+    });
+  });
+});

e2e/tests/functional/plugins/displayLayout/displayLayout.e2e.spec.js

@@ -205,6 +205,114 @@ test.describe('Display Layout', () => {
 
     expect(await page.locator('.l-layout .l-layout__frame').count()).toEqual(0);
   });
+
+  test('independent time works with display layouts and its children', async ({ page }) => {
+    await setFixedTimeMode(page);
+    // Create Example Imagery
+    const exampleImageryObject = await createDomainObjectWithDefaults(page, {
+      type: 'Example Imagery'
+    });
+    // Create a Display Layout
+    await createDomainObjectWithDefaults(page, {
+      type: 'Display Layout'
+    });
+    // Edit Display Layout
+    await page.locator('[title="Edit"]').click();
+
+    // Expand the 'My Items' folder in the left tree
+    await page.locator('.c-tree__item__view-control.c-disclosure-triangle').click();
+    // Add the Sine Wave Generator to the Display Layout and save changes
+    const treePane = page.getByRole('tree', {
+      name: 'Main Tree'
+    });
+    const exampleImageryTreeItem = treePane.getByRole('treeitem', {
+      name: new RegExp(exampleImageryObject.name)
+    });
+    let layoutGridHolder = page.locator('.l-layout__grid-holder');
+    await exampleImageryTreeItem.dragTo(layoutGridHolder);
+
+    await page.locator('button[title="Save"]').click();
+    await page.locator('text=Save and Finish Editing').click();
+
+    // flip on independent time conductor
+    await page.getByTitle('Enable independent Time Conductor').first().locator('label').click();
+    await page.getByRole('textbox').nth(1).fill('2021-12-30 01:11:00.000Z');
+    await page.getByRole('textbox').nth(0).fill('2021-12-30 01:01:00.000Z');
+    await page.getByRole('textbox').nth(1).click();
+
+    // check image date
+    await expect(page.getByText('2021-12-30 01:11:00.000Z').first()).toBeVisible();
+
+    // flip it off
+    await page.getByTitle('Disable independent Time Conductor').first().locator('label').click();
+    // timestamp shouldn't be in the past anymore
+    await expect(page.getByText('2021-12-30 01:11:00.000Z')).toBeHidden();
+  });
+
+  test('When multiple plots are contained in a layout, we only ask for annotations once @couchdb', async ({
+    page
+  }) => {
+    // Create another Sine Wave Generator
+    const anotherSineWaveObject = await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator'
+    });
+    // Create a Display Layout
+    await createDomainObjectWithDefaults(page, {
+      type: 'Display Layout',
+      name: 'Test Display Layout'
+    });
+    // Edit Display Layout
+    await page.locator('[title="Edit"]').click();
+
+    // Expand the 'My Items' folder in the left tree
+    await page.locator('.c-tree__item__view-control.c-disclosure-triangle').click();
+    // Add the Sine Wave Generator to the Display Layout and save changes
+    const treePane = page.getByRole('tree', {
+      name: 'Main Tree'
+    });
+    const sineWaveGeneratorTreeItem = treePane.getByRole('treeitem', {
+      name: new RegExp(sineWaveObject.name)
+    });
+
+    let layoutGridHolder = page.locator('.l-layout__grid-holder');
+    // eslint-disable-next-line playwright/no-force-option
+    await sineWaveGeneratorTreeItem.dragTo(layoutGridHolder, { force: true });
+
+    await page.getByText('View type').click();
+    await page.getByText('Overlay Plot').click();
+
+    const anotherSineWaveGeneratorTreeItem = treePane.getByRole('treeitem', {
+      name: new RegExp(anotherSineWaveObject.name)
+    });
+    layoutGridHolder = page.locator('.l-layout__grid-holder');
+    // eslint-disable-next-line playwright/no-force-option
+    await anotherSineWaveGeneratorTreeItem.dragTo(layoutGridHolder, { force: true });
+
+    await page.getByText('View type').click();
+    await page.getByText('Overlay Plot').click();
+
+    await page.locator('button[title="Save"]').click();
+    await page.locator('text=Save and Finish Editing').click();
+
+    // Time to inspect some network traffic
+    let networkRequests = [];
+    page.on('request', (request) => {
+      const searchRequest = request.url().endsWith('_find');
+      const fetchRequest = request.resourceType() === 'fetch';
+      if (searchRequest && fetchRequest) {
+        networkRequests.push(request);
+      }
+    });
+
+    await page.reload();
+
+    // wait for annotations requests to be batched and requested
+    await page.waitForLoadState('networkidle');
+
+    // Network requests for the composite telemetry with multiple items should be:
+    // 1.  a single batched request for annotations
+    expect(networkRequests.length).toBe(1);
+  });
 });
 
 /**

e2e/tests/functional/plugins/flexibleLayout/flexibleLayout.e2e.spec.js

@@ -158,4 +158,46 @@ test.describe('Flexible Layout', () => {
     // Verify that the item has been removed from the layout
     expect(await page.locator('.c-fl-container__frame').count()).toEqual(0);
   });
+
+  test('independent time works with flexible layouts and its children', async ({ page }) => {
+    // Create Example Imagery
+    const exampleImageryObject = await createDomainObjectWithDefaults(page, {
+      type: 'Example Imagery'
+    });
+    // Create a Flexible Layout
+    await createDomainObjectWithDefaults(page, {
+      type: 'Flexible Layout'
+    });
+    // Edit Display Layout
+    await page.locator('[title="Edit"]').click();
+
+    // Expand the 'My Items' folder in the left tree
+    await page.locator('.c-tree__item__view-control.c-disclosure-triangle').click();
+    // Add the Sine Wave Generator to the Flexible Layout and save changes
+    const treePane = page.getByRole('tree', {
+      name: 'Main Tree'
+    });
+    const exampleImageryTreeItem = treePane.getByRole('treeitem', {
+      name: new RegExp(exampleImageryObject.name)
+    });
+    // Add the Sine Wave Generator to the Flexible Layout and save changes
+    await exampleImageryTreeItem.dragTo(page.locator('.c-fl__container.is-empty').first());
+
+    await page.locator('button[title="Save"]').click();
+    await page.locator('text=Save and Finish Editing').click();
+
+    // flip on independent time conductor
+    await page.getByTitle('Enable independent Time Conductor').first().locator('label').click();
+    await page.getByRole('textbox').nth(1).fill('2021-12-30 01:11:00.000Z');
+    await page.getByRole('textbox').nth(0).fill('2021-12-30 01:01:00.000Z');
+    await page.getByRole('textbox').nth(1).click();
+
+    // check image date
+    await expect(page.getByText('2021-12-30 01:11:00.000Z').first()).toBeVisible();
+
+    // flip it off
+    await page.getByTitle('Disable independent Time Conductor').first().locator('label').click();
+    // timestamp shouldn't be in the past anymore
+    await expect(page.getByText('2021-12-30 01:11:00.000Z')).toBeHidden();
+  });
 });

e2e/tests/functional/plugins/imagery/exampleImagery.e2e.spec.js

@@ -30,6 +30,7 @@ const { test, expect } = require('../../../../pluginFixtures');
 const { createDomainObjectWithDefaults } = require('../../../../appActions');
 const backgroundImageSelector = '.c-imagery__main-image__background-image';
 const panHotkey = process.platform === 'linux' ? ['Shift', 'Alt'] : ['Alt'];
+const tagHotkey = ['Shift', 'Alt'];
 const expectedAltText = process.platform === 'linux' ? 'Shift+Alt drag to pan' : 'Alt drag to pan';
 const thumbnailUrlParamsRegexp = /\?w=100&h=100/;
 
@@ -44,7 +45,7 @@ test.describe('Example Imagery Object', () => {
 
     // Verify that the created object is focused
     await expect(page.locator('.l-browse-bar__object-name')).toContainText(exampleImagery.name);
-    await page.locator(backgroundImageSelector).hover({ trial: true });
+    await page.locator('.c-imagery__main-image__bg').hover({ trial: true });
   });
 
   test('Can use Mouse Wheel to zoom in and out of latest image', async ({ page }) => {
@@ -69,14 +70,60 @@ test.describe('Example Imagery Object', () => {
     await dragContrastSliderAndAssertFilterValues(page);
   });
 
+  test('Can use independent time conductor to change time', async ({ page }) => {
+    // Test independent fixed time with global fixed time
+    // flip on independent time conductor
+    await page.getByTitle('Enable independent Time Conductor').locator('label').click();
+    await page.getByRole('textbox').nth(1).fill('2021-12-30 01:11:00.000Z');
+    await page.getByRole('textbox').nth(0).fill('2021-12-30 01:01:00.000Z');
+    await page.getByRole('textbox').nth(1).click();
+
+    // check image date
+    await expect(page.getByText('2021-12-30 01:11:00.000Z').first()).toBeVisible();
+
+    // flip it off
+    await page.getByTitle('Disable independent Time Conductor').locator('label').click();
+    // timestamp shouldn't be in the past anymore
+    await expect(page.getByText('2021-12-30 01:11:00.000Z')).toBeHidden();
+
+    // Test independent fixed time with global realtime
+    await page.getByRole('button', { name: /Fixed Timespan/ }).click();
+    await page.getByTestId('conductor-modeOption-realtime').click();
+    await page.getByTitle('Enable independent Time Conductor').locator('label').click();
+    // check image date to be in the past
+    await expect(page.getByText('2021-12-30 01:11:00.000Z').first()).toBeVisible();
+    // flip it off
+    await page.getByTitle('Disable independent Time Conductor').locator('label').click();
+    // timestamp shouldn't be in the past anymore
+    await expect(page.getByText('2021-12-30 01:11:00.000Z')).toBeHidden();
+
+    // Test independent realtime with global realtime
+    await page.getByTitle('Enable independent Time Conductor').locator('label').click();
+    // check image date
+    await expect(page.getByText('2021-12-30 01:11:00.000Z').first()).toBeVisible();
+    // change independent time to realtime
+    await page.getByRole('button', { name: /Fixed Timespan/ }).click();
+    await page.getByRole('menuitem', { name: /Local Clock/ }).click();
+    // timestamp shouldn't be in the past anymore
+    await expect(page.getByText('2021-12-30 01:11:00.000Z')).toBeHidden();
+    // back to the past
+    await page
+      .getByRole('button', { name: /Local Clock/ })
+      .first()
+      .click();
+    await page.getByRole('menuitem', { name: /Fixed Timespan/ }).click();
+    // check image date to be in the past
+    await expect(page.getByText('2021-12-30 01:11:00.000Z').first()).toBeVisible();
+  });
+
   test('Can use alt+drag to move around image once zoomed in', async ({ page }) => {
     const deltaYStep = 100; //equivalent to 1x zoom
 
-    await page.locator(backgroundImageSelector).hover({ trial: true });
+    await page.locator('.c-imagery__main-image__bg').hover({ trial: true });
 
     // zoom in
     await page.mouse.wheel(0, deltaYStep * 2);
-    await page.locator(backgroundImageSelector).hover({ trial: true });
+    await page.locator('.c-imagery__main-image__bg').hover({ trial: true });
     const zoomedBoundingBox = await page.locator(backgroundImageSelector).boundingBox();
     const imageCenterX = zoomedBoundingBox.x + zoomedBoundingBox.width / 2;
     const imageCenterY = zoomedBoundingBox.y + zoomedBoundingBox.height / 2;
@@ -131,6 +178,36 @@ test.describe('Example Imagery Object', () => {
     expect(afterDownPanBoundingBox.y).toBeLessThan(afterUpPanBoundingBox.y);
   });
 
+  test('Can use alt+shift+drag to create a tag', async ({ page }) => {
+    const canvas = page.locator('canvas');
+    await canvas.hover({ trial: true });
+
+    const canvasBoundingBox = await canvas.boundingBox();
+    const canvasCenterX = canvasBoundingBox.x + canvasBoundingBox.width / 2;
+    const canvasCenterY = canvasBoundingBox.y + canvasBoundingBox.height / 2;
+
+    await Promise.all(tagHotkey.map((x) => page.keyboard.down(x)));
+    await page.mouse.down();
+    // steps not working for me here
+    await page.mouse.move(canvasCenterX - 20, canvasCenterY - 20);
+    await page.mouse.move(canvasCenterX - 100, canvasCenterY - 100);
+    await page.mouse.up();
+    await Promise.all(tagHotkey.map((x) => page.keyboard.up(x)));
+
+    //Wait for canvas to stablize.
+    await canvas.hover({ trial: true });
+
+    // add some tags
+    await page.getByText('Annotations').click();
+    await page.getByRole('button', { name: /Add Tag/ }).click();
+    await page.getByPlaceholder('Type to select tag').click();
+    await page.getByText('Driving').click();
+
+    await page.getByRole('button', { name: /Add Tag/ }).click();
+    await page.getByPlaceholder('Type to select tag').click();
+    await page.getByText('Science').click();
+  });
+
   test('Can use + - buttons to zoom on the image @unstable', async ({ page }) => {
     await buttonZoomOnImageAndAssert(page);
   });
@@ -158,11 +235,9 @@ test.describe('Example Imagery Object', () => {
   test('Using the zoom features does not pause telemetry', async ({ page }) => {
     const pausePlayButton = page.locator('.c-button.pause-play');
 
-    // open the time conductor drop down
-    await page.locator('.c-mode-button').click();
+    // switch to realtime
+    await setRealTimeMode(page);
 
-    // Click local clock
-    await page.locator('[data-testid="conductor-modeOption-realtime"]').click();
     await expect.soft(pausePlayButton).not.toHaveClass(/is-paused/);
 
     // Zoom in via button
@@ -185,24 +260,7 @@ test.describe('Example Imagery in Display Layout', () => {
     displayLayout = await createDomainObjectWithDefaults(page, { type: 'Display Layout' });
     await page.goto(displayLayout.url);
 
-    /* Create Sine Wave Generator with minimum Image Load Delay */
-    // Click the Create button
-    await page.click('button:has-text("Create")');
-
-    // Click text=Example Imagery
-    await page.click('li[role="menuitem"]:has-text("Example Imagery")');
-
-    // Clear and set Image load delay to minimum value
-    await page.locator('input[type="number"]').fill('');
-    await page.locator('input[type="number"]').fill('5000');
-
-    // Click text=OK
-    await Promise.all([
-      page.waitForNavigation({ waitUntil: 'networkidle' }),
-      page.click('button:has-text("OK")'),
-      //Wait for Save Banner to appear
-      page.waitForSelector('.c-message-banner__message')
-    ]);
+    await createImageryView(page);
 
     await expect(page.locator('.l-browse-bar__object-name')).toContainText(
       'Unnamed Example Imagery'
@@ -219,11 +277,8 @@ test.describe('Example Imagery in Display Layout', () => {
       description: 'https://github.com/nasa/openmct/issues/3647'
     });
 
-    // Click time conductor mode button
-    await page.locator('.c-mode-button').click();
-
     // set realtime mode
-    await page.locator('[data-testid="conductor-modeOption-realtime"]').click();
+    await setRealTimeMode(page);
 
     // pause/play button
     const pausePlayButton = await page.locator('.c-button.pause-play');
@@ -245,11 +300,8 @@ test.describe('Example Imagery in Display Layout', () => {
       description: 'https://github.com/nasa/openmct/issues/3647'
     });
 
-    // Click time conductor mode button
-    await page.locator('.c-mode-button').click();
-
     // set realtime mode
-    await page.locator('[data-testid="conductor-modeOption-realtime"]').click();
+    await setRealTimeMode(page);
 
     // pause/play button
     const pausePlayButton = await page.locator('.c-button.pause-play');
@@ -315,9 +367,47 @@ test.describe('Example Imagery in Display Layout', () => {
     await page.locator('div[title="Resize object height"] > input').click();
     await page.locator('div[title="Resize object height"] > input').fill('100');
 
-    expect(thumbsWrapperLocator.isVisible()).toBeTruthy();
+    await expect(thumbsWrapperLocator).toBeVisible();
     await expect(thumbsWrapperLocator).not.toHaveClass(/is-small-thumbs/);
   });
+
+  /**
+   * Toggle layer visibility checkbox by clicking on checkbox label
+   * - should toggle checkbox and layer visibility for that image view
+   * - should NOT toggle checkbox and layer visibity for the first image view in display
+   */
+  test('Toggle layer visibility by clicking on label', async ({ page }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/6709'
+    });
+    await createImageryView(page);
+    await page.goto(displayLayout.url);
+
+    const imageElements = page.locator('.c-imagery__main-image-wrapper');
+
+    await expect(imageElements).toHaveCount(2);
+
+    const imageOne = page.locator('.c-imagery__main-image-wrapper').nth(0);
+    const imageTwo = page.locator('.c-imagery__main-image-wrapper').nth(1);
+    const imageOneWrapper = imageOne.locator('.image-wrapper');
+    const imageTwoWrapper = imageTwo.locator('.image-wrapper');
+
+    await imageTwo.hover();
+
+    await imageTwo.locator('button[title="Layers"]').click();
+
+    const imageTwoLayersMenuContent = imageTwo.locator('button[title="Layers"] + div');
+    const imageTwoLayersToggleLabel = imageTwoLayersMenuContent.locator('label').last();
+
+    await imageTwoLayersToggleLabel.click();
+
+    const imageOneLayers = imageOneWrapper.locator('.layer-image');
+    const imageTwoLayers = imageTwoWrapper.locator('.layer-image');
+
+    await expect(imageOneLayers).toHaveCount(0);
+    await expect(imageTwoLayers).toHaveCount(1);
+  });
 });
 
 test.describe('Example Imagery in Flexible layout', () => {
@@ -492,11 +582,8 @@ async function performImageryViewOperationsAndAssert(page) {
   const nextImageButton = page.locator('.c-nav--next');
   await nextImageButton.click();
 
-  // Click time conductor mode button
-  await page.locator('.c-mode-button').click();
-
-  // Select local clock mode
-  await page.locator('[data-testid=conductor-modeOption-realtime]').click();
+  // set realtime mode
+  await setRealTimeMode(page);
 
   // Zoom in on next image
   await mouseZoomOnImageAndAssert(page, 2);
@@ -692,7 +779,6 @@ async function panZoomAndAssertImageProperties(page) {
 async function mouseZoomOnImageAndAssert(page, factor = 2) {
   // Zoom in
   const originalImageDimensions = await page.locator(backgroundImageSelector).boundingBox();
-  await page.locator(backgroundImageSelector).hover({ trial: true });
   const deltaYStep = 100; // equivalent to 1x zoom
   await page.mouse.wheel(0, deltaYStep * factor);
   const zoomedBoundingBox = await page.locator(backgroundImageSelector).boundingBox();
@@ -703,7 +789,7 @@ async function mouseZoomOnImageAndAssert(page, factor = 2) {
   await page.mouse.move(imageCenterX, imageCenterY);
 
   // Wait for zoom animation to finish
-  await page.locator(backgroundImageSelector).hover({ trial: true });
+  await page.locator('.c-imagery__main-image__bg').hover({ trial: true });
   const imageMouseZoomed = await page.locator(backgroundImageSelector).boundingBox();
 
   if (factor > 0) {
@@ -819,3 +905,38 @@ async function resetImageryPanAndZoom(page) {
   await panZoomResetBtn.click();
   await waitForAnimations(backgroundImage);
 }
+
+/**
+ * @param {import('@playwright/test').Page} page
+ */
+async function createImageryView(page) {
+  // Click the Create button
+  await page.click('button:has-text("Create")');
+
+  // Click text=Example Imagery
+  await page.click('li[role="menuitem"]:has-text("Example Imagery")');
+
+  // Clear and set Image load delay to minimum value
+  await page.locator('input[type="number"]').fill('');
+  await page.locator('input[type="number"]').fill('5000');
+
+  // Click text=OK
+  await Promise.all([
+    page.waitForNavigation({ waitUntil: 'networkidle' }),
+    page.click('button:has-text("OK")'),
+    //Wait for Save Banner to appear
+    page.waitForSelector('.c-message-banner__message')
+  ]);
+}
+
+/**
+ * @param {import('@playwright/test').Page} page
+ */
+async function setRealTimeMode(page) {
+  await page.locator('.c-compact-tc').click();
+  await page.waitForSelector('.c-tc-input-popup', { state: 'visible' });
+  // Click mode dropdown
+  await page.getByRole('button', { name: ' Fixed Timespan ' }).click();
+  // Click realtime
+  await page.getByTestId('conductor-modeOption-realtime').click();
+}

e2e/tests/functional/plugins/operatorStatus/operatorStatus.e2e.spec.js

@@ -47,6 +47,11 @@ test.describe('Operator Status', () => {
       path: path.join(__dirname, '../../../../helper/', 'addInitOperatorStatus.js')
     });
     await page.goto('./', { waitUntil: 'domcontentloaded' });
+    await expect(page.getByText('Select Role')).toBeVisible();
+    // set role
+    await page.getByRole('button', { name: 'Select' }).click();
+    // dismiss role confirmation popup
+    await page.getByRole('button', { name: 'Dismiss' }).click();
   });
 
   // verify that operator status is visible

e2e/tests/functional/plugins/plot/stackedPlot.e2e.spec.js

@@ -26,7 +26,11 @@ necessarily be used for reference when writing new tests in this area.
 */
 
 const { test, expect } = require('../../../../pluginFixtures');
-const { createDomainObjectWithDefaults, selectInspectorTab } = require('../../../../appActions');
+const {
+  createDomainObjectWithDefaults,
+  selectInspectorTab,
+  waitForPlotsToRender
+} = require('../../../../appActions');
 
 test.describe('Stacked Plot', () => {
   let stackedPlot;
@@ -227,4 +231,45 @@ test.describe('Stacked Plot', () => {
       page.locator('[aria-label="Plot Series Properties"] .c-object-label')
     ).toContainText(swgC.name);
   });
+
+  test('the legend toggles between aggregate and per child', async ({ page }) => {
+    await page.goto(stackedPlot.url);
+
+    // Go into edit mode
+    await page.click('button[title="Edit"]');
+
+    await selectInspectorTab(page, 'Config');
+
+    let legendProperties = await page.locator('[aria-label="Legend Properties"]');
+    await legendProperties.locator('[title="Display legends per sub plot."]~div input').uncheck();
+
+    await assertAggregateLegendIsVisible(page);
+
+    // Save (exit edit mode)
+    await page.locator('button[title="Save"]').click();
+    await page.locator('li[title="Save and Finish Editing"]').click();
+
+    await assertAggregateLegendIsVisible(page);
+
+    await page.reload();
+
+    await assertAggregateLegendIsVisible(page);
+  });
 });
+
+/**
+ * Asserts that aggregate stacked plot legend is visible
+ * @param {import('@playwright/test').Page} page
+ */
+async function assertAggregateLegendIsVisible(page) {
+  // Wait for plot series data to load
+  await waitForPlotsToRender(page);
+  // Wait for plot legend to be shown
+  await page.waitForSelector('.js-stacked-plot-legend', { state: 'attached' });
+  // There should be 3 legend items
+  expect(
+    await page
+      .locator('.js-stacked-plot-legend .c-plot-legend__wrapper div.plot-legend-item')
+      .count()
+  ).toBe(3);
+}

e2e/tests/functional/tooltips.e2e.spec.js

@@ -0,0 +1,398 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2023, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/*
+This test suite is dedicated to tests which can quickly verify that any openmct installation is
+operable and that any type of testing can proceed.
+
+Ideally, smoke tests should make zero assumptions about how and where they are run. This makes them
+more resilient to change and therefor a better indicator of failure. Smoke tests will also run quickly
+as they cover a very "thin surface" of functionality.
+
+When deciding between authoring new smoke tests or functional tests, ask yourself "would I feel
+comfortable running this test during a live mission?" Avoid creating or deleting Domain Objects.
+Make no assumptions about the order that elements appear in the DOM.
+*/
+
+const { test, expect } = require('../../pluginFixtures');
+const { createDomainObjectWithDefaults, expandEntireTree } = require('../../appActions');
+
+test.describe('Verify tooltips', () => {
+  let folder1;
+  let folder2;
+  let folder3;
+  let sineWaveObject1;
+  let sineWaveObject2;
+  let sineWaveObject3;
+
+  const swg1Path = 'My Items / Folder Foo / SWG 1';
+  const swg2Path = 'My Items / Folder Foo / Folder Bar / SWG 2';
+  const swg3Path = 'My Items / Folder Foo / Folder Bar / Folder Baz / SWG 3';
+
+  test.beforeEach(async ({ page, openmctConfig }) => {
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    folder1 = await createDomainObjectWithDefaults(page, {
+      type: 'Folder',
+      name: 'Folder Foo'
+    });
+    folder2 = await createDomainObjectWithDefaults(page, {
+      type: 'Folder',
+      name: 'Folder Bar',
+      parent: folder1.uuid
+    });
+    folder3 = await createDomainObjectWithDefaults(page, {
+      type: 'Folder',
+      name: 'Folder Baz',
+      parent: folder2.uuid
+    });
+    // Create Sine Wave Generator
+    sineWaveObject1 = await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      name: 'SWG 1',
+      parent: folder1.uuid
+    });
+    sineWaveObject1.path = swg1Path;
+    sineWaveObject2 = await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      name: 'SWG 2',
+      parent: folder2.uuid
+    });
+    sineWaveObject2.path = swg2Path;
+    sineWaveObject3 = await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      name: 'SWG 3',
+      parent: folder3.uuid
+    });
+    sineWaveObject3.path = swg3Path;
+
+    // Expand all folders
+    await expandEntireTree(page);
+  });
+
+  // LAD Tables - DONE
+  // Expanded collapsed plot legend - DONE
+  // Object Labels - DONE
+  // Display Layout headers - DONE
+  // Flexible Layout headers - DONE
+  // Tab View layout headers - DONE
+  // Search - DONE
+  // Gauge -
+  // Notebook Embed - DONE
+  // Telemetry Table -
+  // Timeline Objects
+  // Tree - DONE
+  // Recent Objects
+
+  test('display correct paths for LAD tables', async ({ page, openmctConfig }) => {
+    // Create LAD table
+    await createDomainObjectWithDefaults(page, {
+      type: 'LAD Table',
+      name: 'Test LAD Table'
+    });
+    // Edit LAD table
+    await page.locator('[title="Edit"]').click();
+
+    // Add the Sine Wave Generator to the LAD table and save changes
+    await page.dragAndDrop(`text=${sineWaveObject1.name}`, '.c-lad-table-wrapper');
+    await page.dragAndDrop(`text=${sineWaveObject2.name}`, '.c-lad-table-wrapper');
+    await page.dragAndDrop(`text=${sineWaveObject3.name}`, '.c-lad-table-wrapper');
+    await page.locator('button[title="Save"]').click();
+    await page.locator('text=Save and Finish Editing').click();
+
+    await page.keyboard.down('Control');
+
+    async function getToolTip(object) {
+      await page.locator('.c-create-button').hover();
+      await page.getByRole('cell', { name: object.name }).hover();
+      let tooltipText = await page.locator('.c-tooltip').textContent();
+      return tooltipText.replace('\n', '').trim();
+    }
+
+    expect(await getToolTip(sineWaveObject1)).toBe(sineWaveObject1.path);
+    expect(await getToolTip(sineWaveObject2)).toBe(sineWaveObject2.path);
+    expect(await getToolTip(sineWaveObject3)).toBe(sineWaveObject3.path);
+  });
+
+  test('display correct paths for expanded and collapsed plot legend items', async ({ page }) => {
+    // Create Overlay Plot
+    await createDomainObjectWithDefaults(page, {
+      type: 'Overlay Plot',
+      name: 'Test Overlay Plots'
+    });
+    // Edit Overlay Plot
+    await page.locator('[title="Edit"]').click();
+
+    // Add the Sine Wave Generator to the LAD table and save changes
+    await page.dragAndDrop(`text=${sineWaveObject1.name}`, '.gl-plot');
+    await page.dragAndDrop(`text=${sineWaveObject2.name}`, '.gl-plot');
+    await page.dragAndDrop(`text=${sineWaveObject3.name}`, '.gl-plot');
+    await page.locator('button[title="Save"]').click();
+    await page.locator('text=Save and Finish Editing').click();
+
+    await page.keyboard.down('Control');
+
+    async function getCollapsedLegendToolTip(object) {
+      await page.locator('.c-create-button').hover();
+      await page
+        .locator('.plot-series-name', { has: page.locator(`text="${object.name} Hz"`) })
+        .hover();
+      let tooltipText = await page.locator('.c-tooltip').textContent();
+      return tooltipText.replace('\n', '').trim();
+    }
+
+    async function getExpandedLegendToolTip(object) {
+      await page.locator('.c-create-button').hover();
+      await page
+        .locator('.plot-series-name', { has: page.locator(`text="${object.name}"`) })
+        .hover();
+      let tooltipText = await page.locator('.c-tooltip').textContent();
+      return tooltipText.replace('\n', '').trim();
+    }
+
+    expect(await getCollapsedLegendToolTip(sineWaveObject1)).toBe(sineWaveObject1.path);
+    expect(await getCollapsedLegendToolTip(sineWaveObject2)).toBe(sineWaveObject2.path);
+    expect(await getCollapsedLegendToolTip(sineWaveObject3)).toBe(sineWaveObject3.path);
+
+    await page.keyboard.up('Control');
+    await page.locator('.gl-plot-legend__view-control.c-disclosure-triangle').click();
+    await page.keyboard.down('Control');
+
+    expect(await getExpandedLegendToolTip(sineWaveObject1)).toBe(sineWaveObject1.path);
+    expect(await getExpandedLegendToolTip(sineWaveObject2)).toBe(sineWaveObject2.path);
+    expect(await getExpandedLegendToolTip(sineWaveObject3)).toBe(sineWaveObject3.path);
+  });
+
+  test('display correct paths when hovering over object labels', async ({ page }) => {
+    async function getObjectLabelTooltip(object) {
+      await page
+        .locator('.c-tree__item__name.c-object-label__name', {
+          has: page.locator(`text="${object.name}"`)
+        })
+        .click();
+      await page.keyboard.down('Control');
+      await page
+        .locator('.l-browse-bar__object-name.c-object-label__name', {
+          has: page.locator(`text="${object.name}"`)
+        })
+        .hover();
+      const tooltipText = await page.locator('.c-tooltip').textContent();
+      await page.keyboard.up('Control');
+      return tooltipText.replace('\n', '').trim();
+    }
+
+    expect(await getObjectLabelTooltip(sineWaveObject1)).toBe(sineWaveObject1.path);
+    expect(await getObjectLabelTooltip(sineWaveObject3)).toBe(sineWaveObject3.path);
+  });
+
+  test('display correct paths when hovering over display layout pane headers', async ({ page }) => {
+    // Create Overlay Plot
+    await createDomainObjectWithDefaults(page, {
+      type: 'Overlay Plot',
+      name: 'Test Overlay Plot'
+    });
+    // Edit Overlay Plot
+    await page.locator('[title="Edit"]').click();
+    await page.dragAndDrop(`text=${sineWaveObject1.name}`, '.gl-plot');
+    await page.locator('button[title="Save"]').click();
+    await page.locator('text=Save and Finish Editing').click();
+
+    // Create Stacked Plot
+    await createDomainObjectWithDefaults(page, {
+      type: 'Stacked Plot',
+      name: 'Test Stacked Plot'
+    });
+    // Edit Stacked Plot
+    await page.locator('[title="Edit"]').click();
+    await page.dragAndDrop(`text=${sineWaveObject2.name}`, '.c-plot--stacked.holder');
+    await page.locator('button[title="Save"]').click();
+    await page.locator('text=Save and Finish Editing').click();
+
+    // Create Display Layout
+    await createDomainObjectWithDefaults(page, {
+      type: 'Display Layout',
+      name: 'Test Display Layout'
+    });
+    // Edit Display Layout
+    await page.locator('[title="Edit"]').click();
+
+    await page.dragAndDrop("text='Test Overlay Plot'", '.l-layout__grid-holder', {
+      targetPosition: { x: 0, y: 0 }
+    });
+    await page.dragAndDrop("text='Test Stacked Plot'", '.l-layout__grid-holder', {
+      targetPosition: { x: 0, y: 250 }
+    });
+    await page.dragAndDrop(`text=${sineWaveObject3.name}`, '.l-layout__grid-holder', {
+      targetPosition: { x: 500, y: 200 }
+    });
+    await page.locator('button[title="Save"]').click();
+    await page.locator('text=Save and Finish Editing').click();
+
+    await page.keyboard.down('Control');
+
+    await page.getByText('Test Overlay Plot').nth(2).hover();
+    let tooltipText = await page.locator('.c-tooltip').textContent();
+    tooltipText = tooltipText.replace('\n', '').trim();
+    expect(tooltipText).toBe('My Items / Test Overlay Plot');
+
+    // await page.keyboard.up('Control');
+    // await page.locator('.c-plot-legend__view-control >> nth=0').click();
+    // await page.keyboard.down('Control');
+    // await page.locator('.plot-wrapper-expanded-legend .plot-series-name').first().hover();
+    // tooltipText = await page.locator('.c-tooltip').textContent();
+    // tooltipText = tooltipText.replace('\n', '').trim();
+    // expect(tooltipText).toBe(sineWaveObject1.path);
+
+    await page.getByText('Test Stacked Plot').nth(2).hover();
+    tooltipText = await page.locator('.c-tooltip').textContent();
+    tooltipText = tooltipText.replace('\n', '').trim();
+    expect(tooltipText).toBe('My Items / Test Stacked Plot');
+
+    await page.getByText('SWG 3').nth(2).hover();
+    tooltipText = await page.locator('.c-tooltip').textContent();
+    tooltipText = tooltipText.replace('\n', '').trim();
+    expect(sineWaveObject3.path).toBe(tooltipText);
+  });
+
+  test('display correct paths when hovering over flexible object labels', async ({ page }) => {
+    await createDomainObjectWithDefaults(page, {
+      type: 'Flexible Layout',
+      name: 'Test Flexible Layout'
+    });
+
+    await page.dragAndDrop(`text=${sineWaveObject1.name}`, '.c-fl__container >> nth=0');
+    await page.dragAndDrop(`text=${sineWaveObject3.name}`, '.c-fl__container >> nth=1');
+
+    await page.locator('button[title="Save"]').click();
+    await page.locator('text=Save and Finish Editing').click();
+
+    await page.keyboard.down('Control');
+    await page.getByText('SWG 1').nth(2).hover();
+    let tooltipText = await page.locator('.c-tooltip').textContent();
+    tooltipText = tooltipText.replace('\n', '').trim();
+    expect(tooltipText).toBe(sineWaveObject1.path);
+
+    await page.getByText('SWG 3').nth(2).hover();
+    tooltipText = await page.locator('.c-tooltip').textContent();
+    tooltipText = tooltipText.replace('\n', '').trim();
+    expect(tooltipText).toBe(sineWaveObject3.path);
+  });
+
+  test('display correct paths when hovering over tab view labels', async ({ page }) => {
+    await createDomainObjectWithDefaults(page, {
+      type: 'Tabs View',
+      name: 'Test Tabs View'
+    });
+
+    await page.dragAndDrop(`text=${sineWaveObject1.name}`, '.c-tabs-view__tabs-holder');
+    await page.dragAndDrop(`text=${sineWaveObject3.name}`, '.c-tabs-view__tabs-holder');
+
+    await page.locator('button[title="Save"]').click();
+    await page.locator('text=Save and Finish Editing').click();
+
+    await page.keyboard.down('Control');
+    await page.getByText('SWG 1').nth(2).hover();
+    let tooltipText = await page.locator('.c-tooltip').textContent();
+    tooltipText = tooltipText.replace('\n', '').trim();
+    expect(tooltipText).toBe(sineWaveObject1.path);
+
+    await page.getByText('SWG 3').nth(2).hover();
+    tooltipText = await page.locator('.c-tooltip').textContent();
+    tooltipText = tooltipText.replace('\n', '').trim();
+    expect(tooltipText).toBe(sineWaveObject3.path);
+  });
+
+  test('display correct paths when hovering tree items', async ({ page }) => {
+    await page.keyboard.down('Control');
+    await page.getByText('SWG 1').nth(0).hover();
+    let tooltipText = await page.locator('.c-tooltip').textContent();
+    tooltipText = tooltipText.replace('\n', '').trim();
+    expect(tooltipText).toBe(sineWaveObject1.path);
+
+    await page.getByText('SWG 3').nth(0).hover();
+    tooltipText = await page.locator('.c-tooltip').textContent();
+    tooltipText = tooltipText.replace('\n', '').trim();
+    expect(tooltipText).toBe(sineWaveObject3.path);
+  });
+
+  test('display correct paths when hovering search items', async ({ page }) => {
+    await page.getByRole('searchbox', { name: 'Search Input' }).click();
+    await page.fill('.c-search__input', 'SWG 3');
+
+    await page.keyboard.down('Control');
+    await page.locator('.c-gsearch-result__title').hover();
+    let tooltipText = await page.locator('.c-tooltip').textContent();
+    tooltipText = tooltipText.replace('\n', '').trim();
+    expect(tooltipText).toBe(sineWaveObject3.path);
+  });
+
+  test('display path for source telemetry when hovering over gauge', ({ page }) => {
+    expect(true).toBe(true);
+    // await createDomainObjectWithDefaults(page, {
+    //   type: 'Gauge',
+    //   name: 'Test Gauge'
+    // });
+    // await page.dragAndDrop(`text=${sineWaveObject3.name}`, '.c-gauge__wrapper');
+    // await page.keyboard.down('Control');
+    // await page.locator('.c-gauge__current-value-text-wrapper').hover();
+    // let tooltipText = await page.locator('.c-tooltip').textContent();
+    // tooltipText = tooltipText.replace('\n', '').trim();
+    // expect(tooltipText).toBe(sineWaveObject3.path);
+  });
+
+  test('display tooltip path for notebook embeds', async ({ page }) => {
+    await createDomainObjectWithDefaults(page, {
+      type: 'Notebook',
+      name: 'Test Notebook'
+    });
+
+    await page.dragAndDrop(`text=${sineWaveObject3.name}`, '.c-notebook__drag-area');
+    await page.keyboard.down('Control');
+    await page.locator('.c-ne__embed').hover();
+    let tooltipText = await page.locator('.c-tooltip').textContent();
+    tooltipText = tooltipText.replace('\n', '').trim();
+    expect(tooltipText).toBe(sineWaveObject3.path);
+  });
+
+  // test('display tooltip path for telemetry table names', async ({ page }) => {
+  //   await setEndOffset(page, { secs: '10' });
+  //   await createDomainObjectWithDefaults(page, {
+  //     type: 'Telemetry Table',
+  //     name: 'Test Telemetry Table'
+  //   });
+
+  //   await page.dragAndDrop(`text=${sineWaveObject1.name}`, '.c-telemetry-table');
+  //   await page.dragAndDrop(`text=${sineWaveObject3.name}`, '.c-telemetry-table');
+
+  //   await page.locator('button[title="Save"]').click();
+  //   await page.locator('text=Save and Finish Editing').click();
+
+  //   // .c-telemetry-table__body
+
+  //   await page.keyboard.down('Control');
+
+  //   await page.locator('.noselect > [title="SWG 3"]').first().hover();
+  //   let tooltipText = await page.locator('.c-tooltip').textContent();
+  //   tooltipText = tooltipText.replace('\n', '').trim();
+  //   expect(tooltipText).toBe(sineWaveObject3.path);
+  // });
+});

e2e/tests/functional/tree.e2e.spec.js

@@ -174,6 +174,42 @@ test.describe('Main Tree', () => {
       ]);
     });
   });
+  test('Opening and closing an item before the request has been fulfilled will abort the request @couchdb', async ({
+    page,
+    openmctConfig
+  }) => {
+    const { myItemsFolderName } = openmctConfig;
+    let requestWasAborted = false;
+
+    page.on('requestfailed', (request) => {
+      // check if the request was aborted
+      if (request.failure().errorText === 'net::ERR_ABORTED') {
+        requestWasAborted = true;
+      }
+    });
+
+    await createDomainObjectWithDefaults(page, {
+      type: 'Folder',
+      name: 'Foo'
+    });
+
+    // Intercept and delay request
+    const delayInMs = 500;
+
+    await page.route('**', async (route, request) => {
+      await new Promise((resolve) => setTimeout(resolve, delayInMs));
+      route.continue();
+    });
+
+    // Quickly Expand/close the root folder
+    await page
+      .getByRole('button', {
+        name: `Expand ${myItemsFolderName} folder`
+      })
+      .dblclick({ delay: 400 });
+
+    expect(requestWasAborted).toBe(true);
+  });
 });
 
 /**

example/exampleUser/ExampleUserProvider.js

@@ -63,16 +63,24 @@ const STATUSES = [
  * @implements {StatusUserProvider}
  */
 export default class ExampleUserProvider extends EventEmitter {
-  constructor(openmct, { defaultStatusRole } = { defaultStatusRole: undefined }) {
+  constructor(
+    openmct,
+    { statusRoles } = {
+      statusRoles: []
+    }
+  ) {
     super();
 
     this.openmct = openmct;
     this.user = undefined;
     this.loggedIn = false;
     this.autoLoginUser = undefined;
-    this.status = STATUSES[0];
+    this.statusRoleValues = statusRoles.map((role) => ({
+      role: role,
+      status: STATUSES[0]
+    }));
     this.pollQuestion = undefined;
-    this.defaultStatusRole = defaultStatusRole;
+    this.statusRoles = statusRoles;
 
     this.ExampleUser = createExampleUser(this.openmct.user.User);
     this.loginPromise = undefined;
@@ -94,14 +102,13 @@ export default class ExampleUserProvider extends EventEmitter {
     return this.loginPromise;
   }
 
-  canProvideStatusForRole() {
-    return Promise.resolve(true);
+  canProvideStatusForRole(role) {
+    return this.statusRoles.includes(role);
   }
 
   canSetPollQuestion() {
     return Promise.resolve(true);
   }
-
   hasRole(roleId) {
     if (!this.loggedIn) {
       Promise.resolve(undefined);
@@ -110,16 +117,18 @@ export default class ExampleUserProvider extends EventEmitter {
     return Promise.resolve(this.user.getRoles().includes(roleId));
   }
 
-  getStatusRoleForCurrentUser() {
-    return Promise.resolve(this.defaultStatusRole);
+  getPossibleRoles() {
+    return this.user.getRoles();
   }
 
   getAllStatusRoles() {
-    return Promise.resolve([this.defaultStatusRole]);
+    return Promise.resolve(this.statusRoles);
   }
 
   getStatusForRole(role) {
-    return Promise.resolve(this.status);
+    const statusForRole = this.statusRoleValues.find((statusRole) => statusRole.role === role);
+
+    return Promise.resolve(statusForRole?.status);
   }
 
   async getDefaultStatusForRole(role) {
@@ -130,7 +139,8 @@ export default class ExampleUserProvider extends EventEmitter {
 
   setStatusForRole(role, status) {
     status.timestamp = Date.now();
-    this.status = status;
+    const matchingIndex = this.statusRoleValues.findIndex((statusRole) => statusRole.role === role);
+    this.statusRoleValues[matchingIndex].status = status;
     this.emit('statusChange', {
       role,
       status
@@ -175,7 +185,7 @@ export default class ExampleUserProvider extends EventEmitter {
     // for testing purposes, this will skip the form, this wouldn't be used in
     // a normal authentication process
     if (this.autoLoginUser) {
-      this.user = new this.ExampleUser(id, this.autoLoginUser, ['example-role']);
+      this.user = new this.ExampleUser(id, this.autoLoginUser, ['flight', 'driver', 'observer']);
       this.loggedIn = true;
 
       return Promise.resolve();

example/exampleUser/plugin.js

@@ -21,16 +21,18 @@
  *****************************************************************************/
 
 import ExampleUserProvider from './ExampleUserProvider';
+const AUTO_LOGIN_USER = 'mct-user';
+const STATUS_ROLES = ['flight', 'driver'];
 
 export default function ExampleUserPlugin(
-  { autoLoginUser, defaultStatusRole } = {
-    autoLoginUser: 'guest',
-    defaultStatusRole: 'test-role'
+  { autoLoginUser, statusRoles } = {
+    autoLoginUser: AUTO_LOGIN_USER,
+    statusRoles: STATUS_ROLES
   }
 ) {
   return function install(openmct) {
     const userProvider = new ExampleUserProvider(openmct, {
-      defaultStatusRole
+      statusRoles
     });
 
     if (autoLoginUser !== undefined) {

example/imagery/plugin.js

@@ -156,9 +156,9 @@ export default function () {
       key: 'thumbnail',
       ...formatThumbnail
     });
-    openmct.telemetry.addProvider(getRealtimeProvider());
-    openmct.telemetry.addProvider(getHistoricalProvider());
-    openmct.telemetry.addProvider(getLadProvider());
+    openmct.telemetry.addProvider(getRealtimeProvider(openmct));
+    openmct.telemetry.addProvider(getHistoricalProvider(openmct));
+    openmct.telemetry.addProvider(getLadProvider(openmct));
   };
 }
 
@@ -207,14 +207,14 @@ function getImageLoadDelay(domainObject) {
   return imageLoadDelay;
 }
 
-function getRealtimeProvider() {
+function getRealtimeProvider(openmct) {
   return {
     supportsSubscribe: (domainObject) => domainObject.type === 'example.imagery',
     subscribe: (domainObject, callback) => {
       const delay = getImageLoadDelay(domainObject);
       const interval = setInterval(() => {
         const imageSamples = getImageSamples(domainObject.configuration);
-        const datum = pointForTimestamp(Date.now(), domainObject.name, imageSamples, delay);
+        const datum = pointForTimestamp(openmct.time.now(), domainObject.name, imageSamples, delay);
         callback(datum);
       }, delay);
 
@@ -225,7 +225,7 @@ function getRealtimeProvider() {
   };
 }
 
-function getHistoricalProvider() {
+function getHistoricalProvider(openmct) {
   return {
     supportsRequest: (domainObject, options) => {
       return domainObject.type === 'example.imagery' && options.strategy !== 'latest';
@@ -233,17 +233,12 @@ function getHistoricalProvider() {
     request: (domainObject, options) => {
       const delay = getImageLoadDelay(domainObject);
       let start = options.start;
-      const end = Math.min(options.end, Date.now());
+      const end = Math.min(options.end, openmct.time.now());
       const data = [];
       while (start <= end && data.length < delay) {
-        data.push(
-          pointForTimestamp(
-            start,
-            domainObject.name,
-            getImageSamples(domainObject.configuration),
-            delay
-          )
-        );
+        const imageSamples = getImageSamples(domainObject.configuration);
+        const generatedDataPoint = pointForTimestamp(start, domainObject.name, imageSamples, delay);
+        data.push(generatedDataPoint);
         start += delay;
       }
 
@@ -252,7 +247,7 @@ function getHistoricalProvider() {
   };
 }
 
-function getLadProvider() {
+function getLadProvider(openmct) {
   return {
     supportsRequest: (domainObject, options) => {
       return domainObject.type === 'example.imagery' && options.strategy === 'latest';
@@ -260,7 +255,7 @@ function getLadProvider() {
     request: (domainObject, options) => {
       const delay = getImageLoadDelay(domainObject);
       const datum = pointForTimestamp(
-        Date.now(),
+        openmct.time.now(),
         domainObject.name,
         getImageSamples(domainObject.configuration),
         delay

example/simpleVuePlugin/plugin.js

@@ -24,7 +24,7 @@ function SimpleVuePlugin() {
             container.appendChild(vm.$mount().$el);
           },
           destroy: function (container) {
-            vm.$destroy();
+            //vm.$destroy();
           }
         };
       }

index.html

@@ -92,7 +92,9 @@
       }
     </style>
   </head>
-  <body></body>
+  <body>
+    <div id="app"></div>
+  </body>
   <script>
     const THIRTY_SECONDS = 30 * 1000;
     const ONE_MINUTE = THIRTY_SECONDS * 2;

openmct.js

@@ -56,6 +56,7 @@ if (document.currentScript) {
  * @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/tooltips/ToolTipAPI')} tooltips
  * @property {import('./src/api/menu/MenuAPI').default} menus
  * @property {import('./src/api/actions/ActionsAPI').default} actions
  * @property {import('./src/api/status/StatusAPI').default} status

package.json

@@ -1,35 +1,38 @@
 {
   "name": "openmct",
-  "version": "2.2.4",
+  "version": "3.0.0-SNAPSHOT",
   "description": "The Open MCT core platform",
   "devDependencies": {
-    "@babel/eslint-parser": "7.21.8",
+    "@babel/eslint-parser": "7.22.5",
     "@braintree/sanitize-url": "6.0.2",
     "@deploysentinel/playwright": "0.3.4",
-    "@percy/cli": "1.24.0",
+    "@percy/cli": "1.26.0",
     "@percy/playwright": "1.0.4",
     "@playwright/test": "1.32.3",
     "@types/eventemitter3": "1.2.0",
-    "@types/jasmine": "4.3.1",
+    "@types/jasmine": "4.3.4",
     "@types/lodash": "4.14.192",
+    "@vue/compat": "^3.1.0",
+    "@vue/compiler-sfc": "^3.1.0",
     "babel-loader": "9.1.0",
     "babel-plugin-istanbul": "6.1.1",
     "codecov": "3.8.3",
     "comma-separated-values": "3.6.4",
     "copy-webpack-plugin": "11.0.0",
-    "css-loader": "6.7.3",
+    "css-loader": "6.8.1",
     "d3-axis": "3.0.0",
     "d3-scale": "3.3.0",
     "d3-selection": "3.0.0",
-    "eslint": "8.40.0",
-    "eslint-plugin-compat": "4.1.4",
+    "eslint": "8.43.0",
     "eslint-config-prettier": "8.8.0",
+    "eslint-plugin-compat": "4.1.4",
     "eslint-plugin-playwright": "0.12.0",
     "eslint-plugin-prettier": "4.2.1",
-    "eslint-plugin-vue": "9.13.0",
+    "eslint-plugin-vue": "9.15.0",
     "eslint-plugin-you-dont-need-lodash-underscore": "6.12.0",
     "eventemitter3": "1.2.0",
     "file-saver": "2.0.5",
+    "flatbush": "4.2.0",
     "git-rev-sync": "3.0.2",
     "html2canvas": "1.4.1",
     "imports-loader": "4.0.1",
@@ -44,10 +47,9 @@
     "karma-sourcemap-loader": "0.4.0",
     "karma-spec-reporter": "0.0.36",
     "karma-webpack": "5.0.0",
-    "kdbush": "3.0.0",
     "location-bar": "3.0.1",
     "lodash": "4.17.21",
-    "mini-css-extract-plugin": "2.7.5",
+    "mini-css-extract-plugin": "2.7.6",
     "moment": "2.29.4",
     "moment-duration-format": "2.3.2",
     "moment-timezone": "0.5.41",
@@ -59,21 +61,20 @@
     "prettier": "2.8.7",
     "printj": "1.3.1",
     "resolve-url-loader": "5.0.0",
-    "sanitize-html": "2.10.0",
-    "sass": "1.62.1",
-    "sass-loader": "13.2.2",
+    "sanitize-html": "2.11.0",
+    "sass": "1.63.4",
+    "sass-loader": "13.3.2",
     "sinon": "15.1.0",
-    "style-loader": "3.3.2",
-    "typescript": "5.0.4",
+    "style-loader": "3.3.3",
+    "typescript": "5.1.3",
     "uuid": "9.0.0",
-    "vue": "2.6.14",
-    "vue-eslint-parser": "9.3.0",
-    "vue-loader": "15.9.8",
-    "vue-template-compiler": "2.6.14",
-    "webpack": "5.84.0",
+    "vue": "^3.1.0",
+    "vue-eslint-parser": "9.3.1",
+    "webpack": "5.88.0",
+    "vue-loader": "^16.0.0",
     "webpack-cli": "5.1.1",
-    "webpack-dev-server": "4.13.3",
-    "webpack-merge": "5.8.0"
+    "webpack-dev-server": "4.15.1",
+    "webpack-merge": "5.9.0"
   },
   "scripts": {
     "clean": "rm -rf ./dist ./node_modules ./package-lock.json ./coverage ./html-test-results ./test-results ./.nyc_output ",
@@ -111,7 +112,7 @@
     "url": "https://github.com/nasa/openmct.git"
   },
   "engines": {
-    "node": ">=16.19.1"
+    "node": ">=16.19.1 <20"
   },
   "browserslist": [
     "Firefox ESR",

src/MCT.js

@@ -24,6 +24,7 @@ define([
   'EventEmitter',
   './api/api',
   './api/overlays/OverlayAPI',
+  './api/tooltips/ToolTipAPI',
   './selection/Selection',
   './plugins/plugins',
   './ui/registries/ViewRegistry',
@@ -48,6 +49,7 @@ define([
   EventEmitter,
   api,
   OverlayAPI,
+  ToolTipAPI,
   Selection,
   plugins,
   ViewRegistry,
@@ -94,6 +96,7 @@ define([
     };
 
     this.destroy = this.destroy.bind(this);
+    this.defaultClock = 'local';
     [
       /**
        * Tracks current selection state of the application.
@@ -220,6 +223,8 @@ define([
 
       ['overlays', () => new OverlayAPI.default()],
 
+      ['tooltips', () => new ToolTipAPI.default()],
+
       ['menus', () => new api.MenuAPI(this)],
 
       ['actions', () => new api.ActionsAPI(this)],
@@ -338,7 +343,17 @@ define([
    * @param {HTMLElement} [domElement] the DOM element in which to run
    *        MCT; if undefined, MCT will be run in the body of the document
    */
-  MCT.prototype.start = function (domElement = document.body, isHeadlessMode = false) {
+  MCT.prototype.start = function (
+    domElement = document.body.firstElementChild,
+    isHeadlessMode = false
+  ) {
+    // Create element to mount Layout if it doesn't exist
+    if (domElement === null) {
+      domElement = document.createElement('div');
+      document.body.appendChild(domElement);
+    }
+    domElement.id = 'openmct-app';
+
     if (this.types.get('layout') === undefined) {
       this.install(
         this.plugins.DisplayLayout({
@@ -349,6 +364,10 @@ define([
 
     this.element = domElement;
 
+    if (!this.time.getClock()) {
+      this.time.setClock(this.defaultClock);
+    }
+
     this.router.route(/^\/$/, () => {
       this.router.setPath('/browse/');
     });
@@ -361,25 +380,30 @@ define([
      */
 
     if (!isHeadlessMode) {
-      const appLayout = new Vue({
+      const appLayout = Vue.createApp({
         components: {
           Layout: Layout.default
         },
         provide: {
-          openmct: this
+          openmct: Vue.markRaw(this)
         },
         template: '<Layout ref="layout"></Layout>'
       });
-      domElement.appendChild(appLayout.$mount().$el);
+      const component = appLayout.mount(domElement);
+      component.$nextTick(() => {
+        this.layout = component.$refs.layout;
+        this.app = appLayout;
+        Browse(this);
+        window.addEventListener('beforeunload', this.destroy);
+        this.router.start();
+        this.emit('start');
+      });
+    } else {
+      window.addEventListener('beforeunload', this.destroy);
 
-      this.layout = appLayout.$refs.layout;
-      Browse(this);
+      this.router.start();
+      this.emit('start');
     }
-
-    window.addEventListener('beforeunload', this.destroy);
-
-    this.router.start();
-    this.emit('start');
   };
 
   MCT.prototype.startHeadless = function () {

src/api/annotation/AnnotationAPI.js

@@ -76,6 +76,9 @@ const ANNOTATION_LAST_CREATED = 'annotationLastCreated';
  * @constructor
  */
 export default class AnnotationAPI extends EventEmitter {
+  /** @type {Map<ANNOTATION_TYPES, Array<(a, b) => boolean >>} */
+  #targetComparatorMap;
+
   /**
    * @param {OpenMCT} openmct
    */
@@ -84,6 +87,7 @@ export default class AnnotationAPI extends EventEmitter {
     this.openmct = openmct;
     this.availableTags = {};
     this.namespaceToSaveAnnotations = '';
+    this.#targetComparatorMap = new Map();
 
     this.ANNOTATION_TYPES = ANNOTATION_TYPES;
     this.ANNOTATION_TYPE = ANNOTATION_TYPE;
@@ -246,15 +250,16 @@ export default class AnnotationAPI extends EventEmitter {
   /**
    * @method getAnnotations
    * @param {Identifier} domainObjectIdentifier - The domain object identifier to use to search for annotations. For example, a telemetry object identifier.
+   * @param {AbortSignal} abortSignal - An abort signal to cancel the search
    * @returns {DomainObject[]} Returns an array of annotations that match the search query
    */
-  async getAnnotations(domainObjectIdentifier) {
+  async getAnnotations(domainObjectIdentifier, abortSignal = null) {
     const keyStringQuery = this.openmct.objects.makeKeyString(domainObjectIdentifier);
     const searchResults = (
       await Promise.all(
         this.openmct.objects.search(
           keyStringQuery,
-          null,
+          abortSignal,
           this.openmct.objects.SEARCH_TYPES.ANNOTATIONS
         )
       )
@@ -384,7 +389,8 @@ export default class AnnotationAPI extends EventEmitter {
     const combinedResults = [];
     results.forEach((currentAnnotation) => {
       const existingAnnotation = combinedResults.find((annotationToFind) => {
-        return _.isEqual(currentAnnotation.targets, annotationToFind.targets);
+        const { annotationType, targets } = currentAnnotation;
+        return this.areAnnotationTargetsEqual(annotationType, targets, annotationToFind.targets);
       });
       if (!existingAnnotation) {
         combinedResults.push(currentAnnotation);
@@ -460,4 +466,35 @@ export default class AnnotationAPI extends EventEmitter {
 
     return breakApartSeparateTargets;
   }
+
+  /**
+   * Adds a comparator function for a given annotation type.
+   * The comparator functions will be used to determine if two annotations
+   * have the same target.
+   * @param {ANNOTATION_TYPES} annotationType
+   * @param {(t1, t2) => boolean} comparator
+   */
+  addTargetComparator(annotationType, comparator) {
+    const comparatorList = this.#targetComparatorMap.get(annotationType) ?? [];
+    comparatorList.push(comparator);
+    this.#targetComparatorMap.set(annotationType, comparatorList);
+  }
+
+  /**
+   * Compare two sets of targets to see if they are equal. First checks if
+   * any targets comparators evaluate to true, then falls back to a deep
+   * equality check.
+   * @param {ANNOTATION_TYPES} annotationType
+   * @param {*} targets
+   * @param {*} otherTargets
+   * @returns true if the targets are equal, false otherwise
+   */
+  areAnnotationTargetsEqual(annotationType, targets, otherTargets) {
+    const targetComparatorList = this.#targetComparatorMap.get(annotationType);
+    return (
+      (targetComparatorList?.length &&
+        targetComparatorList.some((targetComparator) => targetComparator(targets, otherTargets))) ||
+      _.isEqual(targets, otherTargets)
+    );
+  }
 }

src/api/annotation/AnnotationAPISpec.js

@@ -265,4 +265,52 @@ describe('The Annotation API', () => {
       expect(results.length).toEqual(0);
     });
   });
+
+  describe('Target Comparators', () => {
+    let targets;
+    let otherTargets;
+    let comparator;
+
+    beforeEach(() => {
+      targets = {
+        fooTarget: {
+          foo: 42
+        }
+      };
+      otherTargets = {
+        fooTarget: {
+          bar: 42
+        }
+      };
+      comparator = (t1, t2) => t1.fooTarget.foo === t2.fooTarget.bar;
+    });
+
+    it('can add a comparator function', () => {
+      const notebookAnnotationType = openmct.annotation.ANNOTATION_TYPES.NOTEBOOK;
+      expect(
+        openmct.annotation.areAnnotationTargetsEqual(notebookAnnotationType, targets, otherTargets)
+      ).toBeFalse(); // without a comparator, these should NOT be equal
+      // Register a comparator function for the notebook annotation type
+      openmct.annotation.addTargetComparator(notebookAnnotationType, comparator);
+      expect(
+        openmct.annotation.areAnnotationTargetsEqual(notebookAnnotationType, targets, otherTargets)
+      ).toBeTrue(); // the comparator should make these equal
+    });
+
+    it('falls back to deep equality check if no comparator functions', () => {
+      const annotationTypeWithoutComparator = openmct.annotation.ANNOTATION_TYPES.GEOSPATIAL;
+      const areEqual = openmct.annotation.areAnnotationTargetsEqual(
+        annotationTypeWithoutComparator,
+        targets,
+        targets
+      );
+      const areNotEqual = openmct.annotation.areAnnotationTargetsEqual(
+        annotationTypeWithoutComparator,
+        targets,
+        otherTargets
+      );
+      expect(areEqual).toBeTrue();
+      expect(areNotEqual).toBeFalse();
+    });
+  });
 });

src/api/composition/DefaultCompositionProvider.js

@@ -21,6 +21,7 @@
  *****************************************************************************/
 import objectUtils from '../objects/object-utils';
 import CompositionProvider from './CompositionProvider';
+import { toRaw } from 'vue';
 
 /**
  * @typedef {import('../objects/ObjectAPI').DomainObject} DomainObject
@@ -73,7 +74,7 @@ export default class DefaultCompositionProvider extends CompositionProvider {
    *          the Identifiers in this composition
    */
   load(domainObject) {
-    return Promise.all(domainObject.composition);
+    return Promise.all(domainObject.composition.map(this.publicAPI.objects.parseKeyString));
   }
   /**
    * Attach listeners for changes to the composition of a given domain object.
@@ -167,7 +168,7 @@ export default class DefaultCompositionProvider extends CompositionProvider {
    */
   add(parent, childId) {
     if (!this.includes(parent, childId)) {
-      const composition = structuredClone(parent.composition);
+      const composition = structuredClone(toRaw(parent.composition));
       composition.push(childId);
       this.publicAPI.objects.mutate(parent, 'composition', composition);
     }

src/api/forms/FormController.js

@@ -10,8 +10,7 @@ import TextAreaField from './components/controls/TextAreaField.vue';
 import TextField from './components/controls/TextField.vue';
 import ToggleSwitchField from './components/controls/ToggleSwitchField.vue';
 
-import Vue from 'vue';
-
+import mount from 'utils/mount';
 export const DEFAULT_CONTROLS_MAP = {
   autocomplete: AutoCompleteField,
   checkbox: CheckBoxField,
@@ -69,31 +68,40 @@ export default class FormControl {
    */
   _getControlViewProvider(control) {
     const self = this;
-    let rowComponent;
+    let _destroy = null;
 
     return {
       show(element, model, onChange) {
-        rowComponent = new Vue({
-          el: element,
-          components: {
-            FormControlComponent: DEFAULT_CONTROLS_MAP[control]
+        const { vNode, destroy } = mount(
+          {
+            el: element,
+            components: {
+              FormControlComponent: DEFAULT_CONTROLS_MAP[control]
+            },
+            provide: {
+              openmct: self.openmct
+            },
+            data() {
+              return {
+                model,
+                onChange
+              };
+            },
+            template: `<FormControlComponent :model="model" @onChange="onChange"></FormControlComponent>`
           },
-          provide: {
-            openmct: self.openmct
-          },
-          data() {
-            return {
-              model,
-              onChange
-            };
-          },
-          template: `<FormControlComponent :model="model" @onChange="onChange"></FormControlComponent>`
-        });
+          {
+            element,
+            app: self.openmct.app
+          }
+        );
+        _destroy = destroy;
 
-        return rowComponent;
+        return vNode;
       },
       destroy() {
-        rowComponent.$destroy();
+        if (_destroy) {
+          _destroy();
+        }
       }
     };
   }

src/api/forms/FormsAPI.js

@@ -23,8 +23,8 @@
 import FormController from './FormController';
 import FormProperties from './components/FormProperties.vue';
 
-import Vue from 'vue';
 import _ from 'lodash';
+import mount from 'utils/mount';
 
 export default class FormsAPI {
   constructor(openmct) {
@@ -156,25 +156,28 @@ export default class FormsAPI {
       formCancel = onFormAction(reject);
     });
 
-    const vm = new Vue({
-      components: { FormProperties },
-      provide: {
-        openmct: self.openmct
+    const { destroy } = mount(
+      {
+        components: { FormProperties },
+        provide: {
+          openmct: self.openmct
+        },
+        data() {
+          return {
+            formStructure,
+            onChange: onFormPropertyChange,
+            onCancel: formCancel,
+            onSave: formSave
+          };
+        },
+        template:
+          '<FormProperties :model="formStructure" @onChange="onChange" @onCancel="onCancel" @onSave="onSave"></FormProperties>'
       },
-      data() {
-        return {
-          formStructure,
-          onChange: onFormPropertyChange,
-          onCancel: formCancel,
-          onSave: formSave
-        };
-      },
-      template:
-        '<FormProperties :model="formStructure" @onChange="onChange" @onCancel="onCancel" @onSave="onSave"></FormProperties>'
-    }).$mount();
-
-    const formElement = vm.$el;
-    element.append(formElement);
+      {
+        element,
+        app: self.openmct.app
+      }
+    );
 
     function onFormPropertyChange(data) {
       if (onChange) {
@@ -195,8 +198,7 @@ export default class FormsAPI {
 
     function onFormAction(callback) {
       return () => {
-        formElement.remove();
-        vm.$destroy();
+        destroy();
 
         if (callback) {
           callback(changes);

src/api/forms/components/FormProperties.vue

@@ -141,7 +141,7 @@ export default {
   },
   methods: {
     onChange(data) {
-      this.$set(this.invalidProperties, data.model.key, data.invalid);
+      this.invalidProperties[data.model.key] = data.invalid;
 
       this.$emit('onChange', data);
     },

src/api/forms/components/FormRow.vue

@@ -26,9 +26,7 @@
       {{ row.name }}
     </div>
     <div class="c-form-row__state-indicator" :class="reqClass"></div>
-    <div v-if="row.control" class="c-form-row__controls">
-      <div ref="rowElement"></div>
-    </div>
+    <div v-if="row.control" ref="rowElement" class="c-form-row__controls"></div>
   </div>
 </template>
 
@@ -91,7 +89,7 @@ export default {
 
     this.formControl.show(this.$refs.rowElement, this.row, this.onChange);
   },
-  destroyed() {
+  unmounted() {
     const destroy = this.formControl.destroy;
     if (destroy) {
       destroy();

src/api/forms/components/controls/AutoCompleteField.vue

@@ -166,7 +166,7 @@ export default {
       this.options = this.model.options;
     }
   },
-  destroyed() {
+  unmounted() {
     document.body.removeEventListener('click', this.handleOutsideClick);
   },
   methods: {

src/api/menu/components/Menu.vue

@@ -20,17 +20,17 @@
  at runtime from the About dialog for additional information.
 -->
 <template>
-  <div class="c-menu" :class="options.menuClass">
+  <div class="c-menu" :class="options.menuClass" :style="styleObject">
     <ul v-if="options.actions.length && options.actions[0].length" role="menu">
-      <template v-for="(actionGroups, index) in options.actions">
-        <div :key="index" role="group">
+      <template v-for="(actionGroups, index) in options.actions" :key="index">
+        <div role="group">
           <li
             v-for="action in actionGroups"
             :key="action.name"
             role="menuitem"
             :class="[action.cssClass, action.isDisabled ? 'disabled' : '']"
             :title="action.description"
-            :data-testid="action.testId || false"
+            :data-testid="action.testId || null"
             @click="action.onItemClicked"
           >
             {{ action.name }}
@@ -42,8 +42,8 @@
             class="c-menu__section-separator"
           ></div>
           <li v-if="actionGroups.length === 0" :key="index">No actions defined.</li>
-        </div></template
-      >
+        </div>
+      </template>
     </ul>
 
     <ul v-else role="menu">
@@ -53,7 +53,7 @@
         role="menuitem"
         :class="[action.cssClass, action.isDisabled ? 'disabled' : '']"
         :title="action.description"
-        :data-testid="action.testId || false"
+        :data-testid="action.testId || null"
         @click="action.onItemClicked"
       >
         {{ action.name }}
@@ -64,7 +64,9 @@
 </template>
 
 <script>
+import popupMenuMixin from '../mixins/popupMenuMixin';
 export default {
+  mixins: [popupMenuMixin],
   inject: ['options']
 };
 </script>

src/api/menu/components/SuperMenu.vue

@@ -20,21 +20,21 @@
  at runtime from the About dialog for additional information.
 -->
 <template>
-  <div class="c-menu" :class="[options.menuClass, 'c-super-menu']">
+  <div class="c-menu" :class="[options.menuClass, 'c-super-menu']" :style="styleObject">
     <ul
       v-if="options.actions.length && options.actions[0].length"
       role="menu"
       class="c-super-menu__menu"
     >
-      <template v-for="(actionGroups, index) in options.actions">
-        <div :key="index" role="group">
+      <template v-for="(actionGroups, index) in options.actions" :key="index">
+        <div role="group">
           <li
             v-for="action in actionGroups"
             :key="action.name"
             role="menuitem"
             :class="[action.cssClass, action.isDisabled ? 'disabled' : '']"
             :title="action.description"
-            :data-testid="action.testId || false"
+            :data-testid="action.testId || null"
             @click="action.onItemClicked"
             @mouseover="toggleItemDescription(action)"
             @mouseleave="toggleItemDescription()"
@@ -59,7 +59,7 @@
         role="menuitem"
         :class="action.cssClass"
         :title="action.description"
-        :data-testid="action.testId || false"
+        :data-testid="action.testId || null"
         @click="action.onItemClicked"
         @mouseover="toggleItemDescription(action)"
         @mouseleave="toggleItemDescription()"
@@ -80,9 +80,10 @@
     </div>
   </div>
 </template>
-
 <script>
+import popupMenuMixin from '../mixins/popupMenuMixin';
 export default {
+  mixins: [popupMenuMixin],
   inject: ['options'],
   data: function () {
     return {

src/api/menu/menu.js

@@ -22,7 +22,8 @@
 import EventEmitter from 'EventEmitter';
 import MenuComponent from './components/Menu.vue';
 import SuperMenuComponent from './components/SuperMenu.vue';
-import Vue from 'vue';
+import { h } from 'vue';
+import mount from 'utils/mount';
 
 export const MENU_PLACEMENT = {
   TOP: 'top',
@@ -52,137 +53,67 @@ class Menu extends EventEmitter {
 
   dismiss() {
     this.emit('destroy');
-    document.body.removeChild(this.component.$el);
+    if (this.destroy) {
+      this.destroy();
+      this.destroy = null;
+    }
     document.removeEventListener('click', this.dismiss);
-    this.component.$destroy();
-  }
-
-  show() {
-    this.component.$mount();
-    document.body.appendChild(this.component.$el);
-
-    let position = this._calculatePopupPosition(this.component.$el);
-
-    this.component.$el.style.left = `${position.x}px`;
-    this.component.$el.style.top = `${position.y}px`;
-
-    document.addEventListener('click', this.dismiss);
   }
 
   showMenu() {
-    this.component = new Vue({
-      components: {
-        MenuComponent
+    if (this.destroy) {
+      return;
+    }
+    const { vNode, destroy } = mount({
+      render() {
+        return h(MenuComponent);
       },
       provide: {
         options: this.options
       },
-      template: '<menu-component />'
+      // TODO: Remove this exception upon full migration to Vue 3
+      // https://v3-migration.vuejs.org/breaking-changes/render-function-api.html#render-function-argument
+      compatConfig: {
+        RENDER_FUNCTION: false
+      }
     });
 
+    this.el = vNode.el;
+    this.destroy = destroy;
+
     this.show();
   }
 
   showSuperMenu() {
-    this.component = new Vue({
-      components: {
-        SuperMenuComponent
+    const { vNode, destroy } = mount({
+      data() {
+        return {
+          top: '0px',
+          left: '0px'
+        };
+      },
+      render() {
+        return h(SuperMenuComponent);
       },
       provide: {
         options: this.options
       },
-      template: '<super-menu-component />'
+      // TODO: Remove this exception upon full migration to Vue 3
+      // https://v3-migration.vuejs.org/breaking-changes/render-function-api.html#render-function-argument
+      compatConfig: {
+        RENDER_FUNCTION: false
+      }
     });
 
+    this.el = vNode.el;
+    this.destroy = destroy;
+
     this.show();
   }
 
-  /**
-   * @private
-   */
-  _calculatePopupPosition(menuElement) {
-    let menuDimensions = menuElement.getBoundingClientRect();
-
-    if (!this.options.placement) {
-      this.options.placement = MENU_PLACEMENT.BOTTOM_RIGHT;
-    }
-
-    const menuPosition = this._getMenuPositionBasedOnPlacement(menuDimensions);
-
-    return this._preventMenuOverflow(menuPosition, menuDimensions);
-  }
-
-  /**
-   * @private
-   */
-  _getMenuPositionBasedOnPlacement(menuDimensions) {
-    let eventPosX = this.options.x;
-    let eventPosY = this.options.y;
-
-    // Adjust popup menu based on placement
-    switch (this.options.placement) {
-      case MENU_PLACEMENT.TOP:
-        eventPosX = this.options.x - Math.floor(menuDimensions.width / 2);
-        eventPosY = this.options.y - menuDimensions.height;
-        break;
-      case MENU_PLACEMENT.BOTTOM:
-        eventPosX = this.options.x - Math.floor(menuDimensions.width / 2);
-        break;
-      case MENU_PLACEMENT.LEFT:
-        eventPosX = this.options.x - menuDimensions.width;
-        eventPosY = this.options.y - Math.floor(menuDimensions.height / 2);
-        break;
-      case MENU_PLACEMENT.RIGHT:
-        eventPosY = this.options.y - Math.floor(menuDimensions.height / 2);
-        break;
-      case MENU_PLACEMENT.TOP_LEFT:
-        eventPosX = this.options.x - menuDimensions.width;
-        eventPosY = this.options.y - menuDimensions.height;
-        break;
-      case MENU_PLACEMENT.TOP_RIGHT:
-        eventPosY = this.options.y - menuDimensions.height;
-        break;
-      case MENU_PLACEMENT.BOTTOM_LEFT:
-        eventPosX = this.options.x - menuDimensions.width;
-        break;
-      case MENU_PLACEMENT.BOTTOM_RIGHT:
-        break;
-    }
-
-    return {
-      x: eventPosX,
-      y: eventPosY
-    };
-  }
-
-  /**
-   * @private
-   */
-  _preventMenuOverflow(menuPosition, menuDimensions) {
-    let { x: eventPosX, y: eventPosY } = menuPosition;
-    let overflowX = eventPosX + menuDimensions.width - document.body.clientWidth;
-    let overflowY = eventPosY + menuDimensions.height - document.body.clientHeight;
-
-    if (overflowX > 0) {
-      eventPosX = eventPosX - overflowX;
-    }
-
-    if (overflowY > 0) {
-      eventPosY = eventPosY - overflowY;
-    }
-
-    if (eventPosX < 0) {
-      eventPosX = 0;
-    }
-
-    if (eventPosY < 0) {
-      eventPosY = 0;
-    }
-
-    return {
-      x: eventPosX,
-      y: eventPosY
-    };
+  show() {
+    document.body.appendChild(this.el);
+    document.addEventListener('click', this.dismiss);
   }
 }
 

src/api/menu/mixins/popupMenuMixin.js

@@ -0,0 +1,111 @@
+import { MENU_PLACEMENT } from '../menu';
+export default {
+  methods: {
+    /**
+     * @private
+     */
+    _calculatePopupPosition(menuElement) {
+      let menuDimensions = menuElement.getBoundingClientRect();
+
+      if (!this.options.placement) {
+        this.options.placement = MENU_PLACEMENT.BOTTOM_RIGHT;
+      }
+
+      const menuPosition = this._getMenuPositionBasedOnPlacement(menuDimensions);
+
+      return this._preventMenuOverflow(menuPosition, menuDimensions);
+    },
+    /**
+     * @private
+     */
+    _getMenuPositionBasedOnPlacement(menuDimensions) {
+      let eventPosX = this.options.x;
+      let eventPosY = this.options.y;
+
+      // Adjust popup menu based on placement
+      switch (this.options.placement) {
+        case MENU_PLACEMENT.TOP:
+          eventPosX = this.options.x - Math.floor(menuDimensions.width / 2);
+          eventPosY = this.options.y - menuDimensions.height;
+          break;
+        case MENU_PLACEMENT.BOTTOM:
+          eventPosX = this.options.x - Math.floor(menuDimensions.width / 2);
+          break;
+        case MENU_PLACEMENT.LEFT:
+          eventPosX = this.options.x - menuDimensions.width;
+          eventPosY = this.options.y - Math.floor(menuDimensions.height / 2);
+          break;
+        case MENU_PLACEMENT.RIGHT:
+          eventPosY = this.options.y - Math.floor(menuDimensions.height / 2);
+          break;
+        case MENU_PLACEMENT.TOP_LEFT:
+          eventPosX = this.options.x - menuDimensions.width;
+          eventPosY = this.options.y - menuDimensions.height;
+          break;
+        case MENU_PLACEMENT.TOP_RIGHT:
+          eventPosY = this.options.y - menuDimensions.height;
+          break;
+        case MENU_PLACEMENT.BOTTOM_LEFT:
+          eventPosX = this.options.x - menuDimensions.width;
+          break;
+        case MENU_PLACEMENT.BOTTOM_RIGHT:
+          break;
+      }
+
+      return {
+        x: eventPosX,
+        y: eventPosY
+      };
+    },
+    /**
+     * @private
+     */
+    _preventMenuOverflow(menuPosition, menuDimensions) {
+      let { x: eventPosX, y: eventPosY } = menuPosition;
+      let overflowX = eventPosX + menuDimensions.width - document.body.clientWidth;
+      let overflowY = eventPosY + menuDimensions.height - document.body.clientHeight;
+
+      if (overflowX > 0) {
+        eventPosX = eventPosX - overflowX;
+      }
+
+      if (overflowY > 0) {
+        eventPosY = eventPosY - overflowY;
+      }
+
+      if (eventPosX < 0) {
+        eventPosX = 0;
+      }
+
+      if (eventPosY < 0) {
+        eventPosY = 0;
+      }
+
+      return {
+        x: eventPosX,
+        y: eventPosY
+      };
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      const position = this._calculatePopupPosition(this.$el);
+      this.top = position.y;
+      this.left = position.x;
+    });
+  },
+  data() {
+    return {
+      top: '0px',
+      left: '0px'
+    };
+  },
+  computed: {
+    styleObject() {
+      return {
+        top: `${this.top}px`,
+        left: `${this.left}px`
+      };
+    }
+  }
+};

src/api/objects/InMemorySearchProvider.js

@@ -159,6 +159,9 @@ class InMemorySearchProvider {
     return pendingQuery.promise;
   }
 
+  /**
+   * @private
+   */
   #localQueryFallBack({ queryId, searchType, query, maxResults }) {
     if (searchType === this.searchTypes.OBJECTS) {
       return this.localSearchForObjects(queryId, query, maxResults);

src/api/objects/MutableDomainObject.js

@@ -96,12 +96,26 @@ class MutableDomainObject {
     //Emit events specific to properties affected
     let parentPropertiesList = path.split('.');
     for (let index = parentPropertiesList.length; index > 0; index--) {
+      let pathToThisProperty = parentPropertiesList.slice(0, index);
       let parentPropertyPath = parentPropertiesList.slice(0, index).join('.');
       this._globalEventEmitter.emit(
         qualifiedEventName(this, parentPropertyPath),
         _.get(this, parentPropertyPath),
         _.get(oldModel, parentPropertyPath)
       );
+
+      const lastPathElement = parentPropertiesList[index - 1];
+      // Also emit an event for the array whose element has changed so developers do not need to listen to every element of the array.
+      if (lastPathElement.endsWith(']')) {
+        const arrayPathElement = lastPathElement.substring(0, lastPathElement.lastIndexOf('['));
+        pathToThisProperty[index - 1] = arrayPathElement;
+        const pathToArrayString = pathToThisProperty.join('.');
+        this._globalEventEmitter.emit(
+          qualifiedEventName(this, pathToArrayString),
+          _.get(this, pathToArrayString),
+          _.get(oldModel, pathToArrayString)
+        );
+      }
     }
 
     //TODO: Emit events for listeners of child properties when parent changes.

src/api/objects/ObjectAPI.js

@@ -242,11 +242,16 @@ export default class ObjectAPI {
         return domainObject;
       })
       .catch((error) => {
-        console.warn(`Failed to retrieve ${keystring}:`, error);
         delete this.cache[keystring];
-        const result = this.applyGetInterceptors(identifier);
 
-        return result;
+        // suppress abort errors
+        if (error.name === 'AbortError') {
+          return;
+        }
+
+        console.warn(`Failed to retrieve ${keystring}:`, error);
+
+        return this.applyGetInterceptors(identifier);
       });
 
     this.cache[keystring] = objectPromise;
@@ -540,6 +545,40 @@ export default class ObjectAPI {
       .join('/');
   }
 
+  /**
+   * Return path of telemetry objects in the object composition
+   * @param {object} identifier the identifier for the domain object to query for
+   * @param {object} [telemetryIdentifier] the specific identifier for the telemetry
+   *  to look for in the composition, uses first object in composition otherwise
+   * @returns {Array} path of telemetry object in object composition
+   */
+  async getTelemetryPath(identifier, telemetryIdentifier) {
+    const objectDetails = await this.get(identifier);
+    const telemetryPath = [];
+    if (objectDetails.composition && !['folder'].includes(objectDetails.type)) {
+      let sourceTelemetry = objectDetails.composition[0];
+      if (telemetryIdentifier) {
+        sourceTelemetry = objectDetails.composition.find(
+          (telemetrySource) =>
+            this.makeKeyString(telemetrySource) === this.makeKeyString(telemetryIdentifier)
+        );
+      }
+      const compositionElement = await this.get(sourceTelemetry);
+      if (!['yamcs.telemetry', 'generator'].includes(compositionElement.type)) {
+        return telemetryPath;
+      }
+      const telemetryKey = compositionElement.identifier.key;
+      const telemetryPathObjects = await this.getOriginalPath(telemetryKey);
+      telemetryPathObjects.forEach((pathObject) => {
+        if (pathObject.type === 'root') {
+          return;
+        }
+        telemetryPath.unshift(pathObject.name);
+      });
+    }
+    return telemetryPath;
+  }
+
   /**
    * Modify a domain object. Internal to ObjectAPI, won't call save after.
    * @private

src/api/objects/ObjectAPISpec.js

@@ -248,10 +248,17 @@ describe('The Object API', () => {
       });
 
       it('displays a notification in the event of an error', () => {
-        mockProvider.get.and.returnValue(Promise.reject());
+        openmct.notifications.warn = jasmine.createSpy('warn');
+        mockProvider.get.and.returnValue(
+          Promise.reject({
+            name: 'Error',
+            status: 404,
+            statusText: 'Not Found'
+          })
+        );
 
         return objectAPI.get(mockDomainObject.identifier).catch(() => {
-          expect(openmct.notifications.error).toHaveBeenCalledWith(
+          expect(openmct.notifications.warn).toHaveBeenCalledWith(
             `Failed to retrieve object ${TEST_NAMESPACE}:${TEST_KEY}`
           );
         });

src/api/overlays/Dialog.js

@@ -1,10 +1,10 @@
 import DialogComponent from './components/DialogComponent.vue';
 import Overlay from './Overlay';
-import Vue from 'vue';
+import mount from 'utils/mount';
 
 class Dialog extends Overlay {
   constructor({ iconClass, message, title, hint, timestamp, ...options }) {
-    let component = new Vue({
+    const { vNode, destroy } = mount({
       components: {
         DialogComponent: DialogComponent
       },
@@ -16,17 +16,17 @@ class Dialog extends Overlay {
         timestamp
       },
       template: '<dialog-component></dialog-component>'
-    }).$mount();
+    });
 
     super({
-      element: component.$el,
+      element: vNode.el,
       size: 'fit',
       dismissable: false,
       ...options
     });
 
     this.once('destroy', () => {
-      component.$destroy();
+      destroy();
     });
   }
 }

src/api/overlays/Overlay.js

@@ -1,6 +1,6 @@
 import OverlayComponent from './components/OverlayComponent.vue';
 import EventEmitter from 'EventEmitter';
-import Vue from 'vue';
+import mount from 'utils/mount';
 
 const cssClasses = {
   large: 'l-overlay-large',
@@ -28,18 +28,25 @@ class Overlay extends EventEmitter {
     this.autoHide = autoHide;
     this.dismissable = dismissable !== false;
 
-    this.component = new Vue({
-      components: {
-        OverlayComponent: OverlayComponent
+    const { destroy } = mount(
+      {
+        components: {
+          OverlayComponent: OverlayComponent
+        },
+        provide: {
+          dismiss: this.notifyAndDismiss.bind(this),
+          element,
+          buttons,
+          dismissable: this.dismissable
+        },
+        template: '<overlay-component></overlay-component>'
       },
-      provide: {
-        dismiss: this.notifyAndDismiss.bind(this),
-        element,
-        buttons,
-        dismissable: this.dismissable
-      },
-      template: '<overlay-component></overlay-component>'
-    });
+      {
+        element: this.container
+      }
+    );
+
+    this.destroy = destroy;
 
     if (onDestroy) {
       this.once('destroy', onDestroy);
@@ -53,7 +60,7 @@ class Overlay extends EventEmitter {
   dismiss() {
     this.emit('destroy');
     document.body.removeChild(this.container);
-    this.component.$destroy();
+    this.destroy();
   }
 
   //Ensures that any callers are notified that the overlay is dismissed
@@ -67,7 +74,6 @@ class Overlay extends EventEmitter {
    **/
   show() {
     document.body.appendChild(this.container);
-    this.container.appendChild(this.component.$mount().$el);
   }
 }
 

src/api/overlays/OverlayAPI.js

@@ -1,6 +1,29 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2023, 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 Overlay from './Overlay';
 import Dialog from './Dialog';
 import ProgressDialog from './ProgressDialog';
+import Selection from './Selection';
 
 /**
  * The OverlayAPI is responsible for pre-pending templates to
@@ -130,6 +153,13 @@ class OverlayAPI {
 
     return progressDialog;
   }
+
+  selection(options) {
+    let selection = new Selection(options);
+    this.showOverlay(selection);
+
+    return selection;
+  }
 }
 
 export default OverlayAPI;

src/api/overlays/ProgressDialog.js

@@ -1,9 +1,8 @@
 import ProgressDialogComponent from './components/ProgressDialogComponent.vue';
 import Overlay from './Overlay';
-import Vue from 'vue';
+import mount from 'utils/mount';
 
 let component;
-
 class ProgressDialog extends Overlay {
   constructor({
     progressPerc,
@@ -15,7 +14,7 @@ class ProgressDialog extends Overlay {
     timestamp,
     ...options
   }) {
-    component = new Vue({
+    const { vNode, destroy } = mount({
       components: {
         ProgressDialogComponent: ProgressDialogComponent
       },
@@ -35,17 +34,18 @@ class ProgressDialog extends Overlay {
         };
       },
       template: '<progress-dialog-component :model="model"></progress-dialog-component>'
-    }).$mount();
+    });
+    component = vNode.componentInstance;
 
     super({
-      element: component.$el,
+      element: vNode.el,
       size: 'fit',
       dismissable: false,
       ...options
     });
 
     this.once('destroy', () => {
-      component.$destroy();
+      destroy();
     });
   }
 

src/api/overlays/Selection.js

@@ -0,0 +1,69 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2023, 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 SelectionComponent from './components/SelectionComponent.vue';
+import Overlay from './Overlay';
+import mount from 'utils/mount';
+
+class Selection extends Overlay {
+  constructor({
+    iconClass,
+    title,
+    message,
+    selectionOptions,
+    onChange,
+    currentSelection,
+    ...options
+  }) {
+    const { vNode, destroy } = mount({
+      components: {
+        SelectionComponent: SelectionComponent
+      },
+      provide: {
+        iconClass,
+        title,
+        message,
+        selectionOptions,
+        onChange,
+        currentSelection
+      },
+      template: '<selection-component></selection-component>'
+    });
+
+    const component = vNode.componentInstance;
+
+    super({
+      element: component.$el,
+      size: 'fit',
+      dismissable: false,
+      onChange,
+      currentSelection,
+      ...options
+    });
+
+    this.once('destroy', () => {
+      destroy();
+    });
+  }
+}
+
+export default Selection;

src/api/overlays/components/SelectionComponent.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="c-message">
+    <!--Uses flex-row -->
+    <div class="c-message__icon" :class="['u-icon-bg-color-' + iconClass]"></div>
+    <div class="c-message__text">
+      <!-- Uses flex-column -->
+      <div v-if="title" class="c-message__title">
+        {{ title }}
+      </div>
+
+      <div v-if="message" class="c-message__action-text">
+        {{ message }}
+      </div>
+      <select @change="onChange">
+        <option
+          v-for="option in selectionOptions"
+          :key="option.key"
+          :value="option.key"
+          :selected="option.key === currentSelection"
+        >
+          {{ option.name }}
+        </option>
+      </select>
+
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  inject: ['iconClass', 'title', 'message', 'selectionOptions', 'currentSelection', 'onChange']
+};
+</script>

src/api/telemetry/TelemetryAPI.js

@@ -28,6 +28,36 @@ import TelemetryValueFormatter from './TelemetryValueFormatter';
 import DefaultMetadataProvider from './DefaultMetadataProvider';
 import objectUtils from 'objectUtils';
 
+/**
+ * @typedef {import('../time/TimeContext').TimeContext} TimeContext
+ */
+
+/**
+ * Describes and bounds requests for telemetry data.
+ *
+ * @typedef TelemetryRequestOptions
+ * @property {String} [sort] the key of the property to sort by. This may
+ *           be prefixed with a "+" or a "-" sign to sort in ascending
+ *           or descending order respectively. If no prefix is present,
+ *           ascending order will be used.
+ * @property {Number} [start] the lower bound for values of the sorting property
+ * @property {Number} [end] the upper bound for values of the sorting property
+ * @property {String} [strategy] symbolic identifier for strategies
+ *           (such as `latest` or `minmax`) which may be recognized by providers;
+ *           these will be tried in order until an appropriate provider
+ *           is found
+ * @property {AbortController} [signal] an AbortController which can be used
+ *           to cancel a telemetry request
+ * @property {String} [domain] the domain key of the request
+ * @property {TimeContext} [timeContext] the time context to use for this request
+ * @memberof module:openmct.TelemetryAPI~
+ */
+
+/**
+ * Utilities for telemetry
+ * @interface TelemetryAPI
+ * @memberof module:openmct
+ */
 export default class TelemetryAPI {
   #isGreedyLAD;
 
@@ -169,25 +199,31 @@ export default class TelemetryAPI {
   }
 
   /**
-   * @private
-   * Though used in TelemetryCollection as well
+   * @param {TelemetryRequestOptions} options options for the telemetry request
+   * @returns {TelemetryRequestOptions} the options, with defaults filled in
    */
-  standardizeRequestOptions(options) {
-    if (!Object.prototype.hasOwnProperty.call(options, 'start')) {
-      options.start = this.openmct.time.bounds().start;
+  standardizeRequestOptions(options = {}) {
+    if (!Object.hasOwn(options, 'start')) {
+      if (options.timeContext?.getBounds()) {
+        options.start = options.timeContext.getBounds().start;
+      } else {
+        options.start = this.openmct.time.getBounds().start;
+      }
     }
 
-    if (!Object.prototype.hasOwnProperty.call(options, 'end')) {
-      options.end = this.openmct.time.bounds().end;
+    if (!Object.hasOwn(options, 'end')) {
+      if (options.timeContext?.getBounds()) {
+        options.end = options.timeContext.getBounds().end;
+      } else {
+        options.end = this.openmct.time.getBounds().end;
+      }
     }
 
-    if (!Object.prototype.hasOwnProperty.call(options, 'domain')) {
-      options.domain = this.openmct.time.timeSystem().key;
+    if (!Object.hasOwn(options, 'domain')) {
+      options.domain = this.openmct.time.getTimeSystem().key;
     }
 
-    if (!Object.prototype.hasOwnProperty.call(options, 'timeContext')) {
-      options.timeContext = this.openmct.time;
-    }
+    return options;
   }
 
   /**
@@ -265,7 +301,7 @@ export default class TelemetryAPI {
    * @memberof module:openmct.TelemetryAPI~TelemetryProvider#
    * @param {module:openmct.DomainObject} domainObject the object
    *        which has associated telemetry
-   * @param {module:openmct.TelemetryAPI~TelemetryRequest} options
+   * @param {TelemetryRequestOptions} options
    *        options for this telemetry collection request
    * @returns {TelemetryCollection} a TelemetryCollection instance
    */
@@ -283,7 +319,7 @@ export default class TelemetryAPI {
    * @memberof module:openmct.TelemetryAPI~TelemetryProvider#
    * @param {module:openmct.DomainObject} domainObject the object
    *        which has associated telemetry
-   * @param {module:openmct.TelemetryAPI~TelemetryRequest} options
+   * @param {TelemetryRequestOptions} options
    *        options for this historical request
    * @returns {Promise.<object[]>} a promise for an array of
    *          telemetry data
@@ -339,6 +375,7 @@ export default class TelemetryAPI {
    * @memberof module:openmct.TelemetryAPI~TelemetryProvider#
    * @param {module:openmct.DomainObject} domainObject the object
    *        which has associated telemetry
+   * @param {TelemetryRequestOptions} options configuration items for subscription
    * @param {Function} callback the callback to invoke with new data, as
    *        it becomes available
    * @returns {Function} a function which may be called to terminate
@@ -448,6 +485,62 @@ export default class TelemetryAPI {
     }.bind(this);
   }
 
+  /**
+   * Subscribe to run-time changes in configured telemetry limits for a specific domain object.
+   * The callback will be called whenever data is received from a
+   * limit provider.
+   *
+   * @method subscribeToLimits
+   * @memberof module:openmct.TelemetryAPI~TelemetryProvider#
+   * @param {module:openmct.DomainObject} domainObject the object
+   *        which has associated limits
+   * @param {Function} callback the callback to invoke with new data, as
+   *        it becomes available
+   * @returns {Function} a function which may be called to terminate
+   *          the subscription
+   */
+  subscribeToLimits(domainObject, callback) {
+    if (domainObject.type === 'unknown') {
+      return () => {};
+    }
+
+    const provider = this.#findLimitEvaluator(domainObject);
+
+    if (!this.limitsSubscribeCache) {
+      this.limitsSubscribeCache = {};
+    }
+
+    const keyString = objectUtils.makeKeyString(domainObject.identifier);
+    let subscriber = this.limitsSubscribeCache[keyString];
+
+    if (!subscriber) {
+      subscriber = this.limitsSubscribeCache[keyString] = {
+        callbacks: [callback]
+      };
+      if (provider && provider.subscribeToLimits) {
+        subscriber.unsubscribe = provider.subscribeToLimits(domainObject, function (value) {
+          subscriber.callbacks.forEach(function (cb) {
+            cb(value);
+          });
+        });
+      } else {
+        subscriber.unsubscribe = function () {};
+      }
+    } else {
+      subscriber.callbacks.push(callback);
+    }
+
+    return function unsubscribe() {
+      subscriber.callbacks = subscriber.callbacks.filter(function (cb) {
+        return cb !== callback;
+      });
+      if (subscriber.callbacks.length === 0) {
+        subscriber.unsubscribe();
+        delete this.limitsSubscribeCache[keyString];
+      }
+    }.bind(this);
+  }
+
   /**
    * Request telemetry staleness for a domain object.
    *
@@ -635,7 +728,7 @@ export default class TelemetryAPI {
    *
    * @param {module:openmct.DomainObject} domainObject the domain
    *        object for which to get limits
-   * @returns {module:openmct.TelemetryAPI~LimitEvaluator}
+   * @returns {LimitsResponseObject}
    * @method limits
    * @memberof module:openmct.TelemetryAPI~TelemetryProvider#
    */
@@ -682,18 +775,8 @@ export default class TelemetryAPI {
    *
    * @param {module:openmct.DomainObject} domainObject the domain
    *        object for which to display limits
-   * @returns {module:openmct.TelemetryAPI~LimitEvaluator}
-   * @method limits returns a limits object of
-   * type {
-   *          level1: {
-   *              low: { key1: value1, key2: value2, color: <supportedColor> },
-   *              high: { key1: value1, key2: value2, color: <supportedColor> }
-   *          },
-   *          level2: {
-   *              low: { key1: value1, key2: value2 },
-   *              high: { key1: value1, key2: value2 }
-   *          }
-   *       }
+   * @returns {LimitsResponseObject}
+   * @method limits returns a limits object of type {LimitsResponseObject}
    *  supported colors are purple, red, orange, yellow and cyan
    * @memberof module:openmct.TelemetryAPI~TelemetryProvider#
    */
@@ -725,7 +808,7 @@ export default class TelemetryAPI {
  * @param {*} datum the telemetry datum to evaluate
  * @param {TelemetryProperty} the property to check for limit violations
  * @memberof module:openmct.TelemetryAPI~LimitEvaluator
- * @returns {module:openmct.TelemetryAPI~LimitViolation} metadata about
+ * @returns {LimitViolation} metadata about
  *          the limit violation, or undefined if a value is within limits
  */
 
@@ -736,6 +819,42 @@ export default class TelemetryAPI {
  * @property {string} cssClass the class (or space-separated classes) to
  *           apply to display elements for values which violate this limit
  * @property {string} name the human-readable name for the limit violation
+ * @property {number} low a lower limit for violation
+ * @property {number} high a higher limit violation
+ */
+
+/**
+ * @typedef {object} LimitsResponseObject
+ * @memberof {module:openmct.TelemetryAPI~}
+ * @property {LimitDefinition} limitLevel the level name and it's limit definition
+ * @example {
+ *  [limitLevel]: {
+ *    low: {
+ *      color: lowColor,
+ *      value: lowValue
+ *    },
+ *    high: {
+ *      color: highColor,
+ *      value: highValue
+ *    }
+ *  }
+ * }
+ */
+
+/**
+ * Limit defined for a telemetry property.
+ * @typedef LimitDefinition
+ * @memberof {module:openmct.TelemetryAPI~}
+ * @property {LimitDefinitionValue} low a lower limit
+ * @property {LimitDefinitionValue} high a higher limit
+ */
+
+/**
+ * Limit definition for a Limit of a telemetry property.
+ * @typedef LimitDefinitionValue
+ * @memberof {module:openmct.TelemetryAPI~}
+ * @property {string} color color to represent this limit
+ * @property {Number} value the limit value
  */
 
 /**

src/api/telemetry/TelemetryAPISpec.js

@@ -29,15 +29,20 @@ describe('Telemetry API', () => {
 
   beforeEach(() => {
     openmct = {
-      time: jasmine.createSpyObj('timeAPI', ['timeSystem', 'bounds']),
+      time: jasmine.createSpyObj('timeAPI', ['timeSystem', 'getTimeSystem', 'bounds', 'getBounds']),
       types: jasmine.createSpyObj('typeRegistry', ['get'])
     };
 
     openmct.time.timeSystem.and.returnValue({ key: 'system' });
+    openmct.time.getTimeSystem.and.returnValue({ key: 'system' });
     openmct.time.bounds.and.returnValue({
       start: 0,
       end: 1
     });
+    openmct.time.getBounds.and.returnValue({
+      start: 0,
+      end: 1
+    });
     telemetryAPI = new TelemetryAPI(openmct);
   });
 
@@ -261,16 +266,14 @@ describe('Telemetry API', () => {
         signal,
         start: 0,
         end: 1,
-        domain: 'system',
-        timeContext: jasmine.any(Object)
+        domain: 'system'
       });
 
       expect(telemetryProvider.request).toHaveBeenCalledWith(jasmine.any(Object), {
         signal,
         start: 0,
         end: 1,
-        domain: 'system',
-        timeContext: jasmine.any(Object)
+        domain: 'system'
       });
 
       telemetryProvider.supportsRequest.calls.reset();
@@ -281,16 +284,14 @@ describe('Telemetry API', () => {
         signal,
         start: 0,
         end: 1,
-        domain: 'system',
-        timeContext: jasmine.any(Object)
+        domain: 'system'
       });
 
       expect(telemetryProvider.request).toHaveBeenCalledWith(jasmine.any(Object), {
         signal,
         start: 0,
         end: 1,
-        domain: 'system',
-        timeContext: jasmine.any(Object)
+        domain: 'system'
       });
     });
 
@@ -309,16 +310,14 @@ describe('Telemetry API', () => {
         start: 20,
         end: 30,
         domain: 'someDomain',
-        signal,
-        timeContext: jasmine.any(Object)
+        signal
       });
 
       expect(telemetryProvider.request).toHaveBeenCalledWith(jasmine.any(Object), {
         start: 20,
         end: 30,
         domain: 'someDomain',
-        signal,
-        timeContext: jasmine.any(Object)
+        signal
       });
     });
   });

src/api/telemetry/TelemetryCollection.js

@@ -23,6 +23,23 @@
 import _ from 'lodash';
 import EventEmitter from 'EventEmitter';
 import { LOADED_ERROR, TIMESYSTEM_KEY_NOTIFICATION, TIMESYSTEM_KEY_WARNING } from './constants';
+import { TIME_CONTEXT_EVENTS } from '../time/constants';
+
+/**
+ * @typedef {import('../objects/ObjectAPI').DomainObject} DomainObject
+ */
+
+/**
+ * @typedef {import('../time/TimeContext').TimeContext} TimeContext
+ */
+
+/**
+ * @typedef {import('./TelemetryAPI').TelemetryRequestOptions} TelemetryRequestOptions
+ */
+
+/**
+ * @typedef {import('../../../openmct').OpenMCT} OpenMCT
+ */
 
 /** Class representing a Telemetry Collection. */
 
@@ -31,10 +48,10 @@ export default class TelemetryCollection extends EventEmitter {
    * Creates a Telemetry Collection
    *
    * @param  {OpenMCT} openmct - Open MCT
-   * @param  {module:openmct.DomainObject} domainObject - Domain Object to use for telemetry collection
-   * @param  {object} options - Any options passed in for request/subscribe
+   * @param  {DomainObject} domainObject - Domain Object to use for telemetry collection
+   * @param  {TelemetryRequestOptions} options - Any options passed in for request/subscribe
    */
-  constructor(openmct, domainObject, options) {
+  constructor(openmct, domainObject, options = {}) {
     super();
 
     this.loaded = false;
@@ -44,8 +61,11 @@ export default class TelemetryCollection extends EventEmitter {
     this.futureBuffer = [];
     this.parseTime = undefined;
     this.metadata = this.openmct.telemetry.getMetadata(domainObject);
-    this.unsubscribe = undefined;
+    if (!Object.hasOwn(options, 'timeContext')) {
+      options.timeContext = this.openmct.time;
+    }
     this.options = options;
+    this.unsubscribe = undefined;
     this.pageState = undefined;
     this.lastBounds = undefined;
     this.requestAbort = undefined;
@@ -62,11 +82,11 @@ export default class TelemetryCollection extends EventEmitter {
       this._error(LOADED_ERROR);
     }
 
-    this._setTimeSystem(this.openmct.time.timeSystem());
-    this.lastBounds = this.openmct.time.bounds();
-
+    this._setTimeSystem(this.options.timeContext.getTimeSystem());
+    this.lastBounds = this.options.timeContext.getBounds();
     this._watchBounds();
     this._watchTimeSystem();
+    this._watchTimeModeChange();
 
     this._requestHistoricalTelemetry();
     this._initiateSubscriptionTelemetry();
@@ -85,6 +105,7 @@ export default class TelemetryCollection extends EventEmitter {
 
     this._unwatchBounds();
     this._unwatchTimeSystem();
+    this._unwatchTimeModeChange();
     if (this.unsubscribe) {
       this.unsubscribe();
     }
@@ -105,11 +126,11 @@ export default class TelemetryCollection extends EventEmitter {
    * @private
    */
   async _requestHistoricalTelemetry() {
-    let options = { ...this.options };
-    let historicalProvider;
-
-    this.openmct.telemetry.standardizeRequestOptions(options);
-    historicalProvider = this.openmct.telemetry.findRequestProvider(this.domainObject, options);
+    let options = this.openmct.telemetry.standardizeRequestOptions({ ...this.options });
+    const historicalProvider = this.openmct.telemetry.findRequestProvider(
+      this.domainObject,
+      options
+    );
 
     if (!historicalProvider) {
       return;
@@ -417,6 +438,10 @@ export default class TelemetryCollection extends EventEmitter {
     this._reset();
   }
 
+  _timeModeChanged() {
+    this._reset();
+  }
+
   /**
    * Reset the telemetry data of the collection, and re-request
    * historical telemetry
@@ -434,19 +459,35 @@ export default class TelemetryCollection extends EventEmitter {
   }
 
   /**
-   * adds the _bounds callback to the 'bounds' timeAPI listener
+   * adds the _bounds callback to the 'boundsChanged' timeAPI listener
    * @private
    */
   _watchBounds() {
-    this.openmct.time.on('bounds', this._bounds, this);
+    this.options.timeContext.on(TIME_CONTEXT_EVENTS.boundsChanged, this._bounds, this);
   }
 
   /**
-   * removes the _bounds callback from the 'bounds' timeAPI listener
+   * removes the _bounds callback from the 'boundsChanged' timeAPI listener
    * @private
    */
   _unwatchBounds() {
-    this.openmct.time.off('bounds', this._bounds, this);
+    this.options.timeContext.off(TIME_CONTEXT_EVENTS.boundsChanged, this._bounds, this);
+  }
+
+  /**
+   * adds the _timeModeChanged callback to the 'modeChanged' timeAPI listener
+   * @private
+   */
+  _watchTimeModeChange() {
+    this.options.timeContext.on(TIME_CONTEXT_EVENTS.modeChanged, this._timeModeChanged, this);
+  }
+
+  /**
+   * removes the _timeModeChanged callback from the 'modeChanged' timeAPI listener
+   * @private
+   */
+  _unwatchTimeModeChange() {
+    this.options.timeContext.off(TIME_CONTEXT_EVENTS.modeChanged, this._timeModeChanged, this);
   }
 
   /**
@@ -454,7 +495,11 @@ export default class TelemetryCollection extends EventEmitter {
    * @private
    */
   _watchTimeSystem() {
-    this.openmct.time.on('timeSystem', this._setTimeSystemAndFetchData, this);
+    this.options.timeContext.on(
+      TIME_CONTEXT_EVENTS.timeSystemChanged,
+      this._setTimeSystemAndFetchData,
+      this
+    );
   }
 
   /**
@@ -462,7 +507,11 @@ export default class TelemetryCollection extends EventEmitter {
    * @private
    */
   _unwatchTimeSystem() {
-    this.openmct.time.off('timeSystem', this._setTimeSystemAndFetchData, this);
+    this.options.timeContext.off(
+      TIME_CONTEXT_EVENTS.timeSystemChanged,
+      this._setTimeSystemAndFetchData,
+      this
+    );
   }
 
   /**

src/api/telemetry/TelemetryMetadataManager.js

@@ -134,6 +134,14 @@ define(['lodash'], function (_) {
     );
   };
 
+  TelemetryMetadataManager.prototype.getUseToUpdateInPlaceValue = function () {
+    return this.valueMetadatas.find(this.isInPlaceUpdateValue);
+  };
+
+  TelemetryMetadataManager.prototype.isInPlaceUpdateValue = function (metadatum) {
+    return metadatum.useToUpdateInPlace === true;
+  };
+
   TelemetryMetadataManager.prototype.getDefaultDisplayValue = function () {
     let valueMetadata = this.valuesForHints(['range'])[0];
 

src/api/time/IndependentTimeContext.js

@@ -20,7 +20,8 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import TimeContext, { TIME_CONTEXT_EVENTS } from './TimeContext';
+import TimeContext from './TimeContext';
+import { MODES, REALTIME_MODE_KEY, TIME_CONTEXT_EVENTS } from './constants';
 
 /**
  * The IndependentTimeContext handles getting and setting time of the openmct application in general.
@@ -46,7 +47,7 @@ class IndependentTimeContext extends TimeContext {
     this.globalTimeContext.on('removeOwnContext', this.removeIndependentContext);
   }
 
-  bounds(newBounds) {
+  bounds() {
     if (this.upstreamTimeContext) {
       return this.upstreamTimeContext.bounds(...arguments);
     } else {
@@ -54,7 +55,23 @@ class IndependentTimeContext extends TimeContext {
     }
   }
 
-  tick(timestamp) {
+  getBounds() {
+    if (this.upstreamTimeContext) {
+      return this.upstreamTimeContext.getBounds();
+    } else {
+      return super.getBounds();
+    }
+  }
+
+  setBounds() {
+    if (this.upstreamTimeContext) {
+      return this.upstreamTimeContext.setBounds(...arguments);
+    } else {
+      return super.setBounds(...arguments);
+    }
+  }
+
+  tick() {
     if (this.upstreamTimeContext) {
       return this.upstreamTimeContext.tick(...arguments);
     } else {
@@ -62,7 +79,7 @@ class IndependentTimeContext extends TimeContext {
     }
   }
 
-  clockOffsets(offsets) {
+  clockOffsets() {
     if (this.upstreamTimeContext) {
       return this.upstreamTimeContext.clockOffsets(...arguments);
     } else {
@@ -70,11 +87,19 @@ class IndependentTimeContext extends TimeContext {
     }
   }
 
-  stopClock() {
+  getClockOffsets() {
     if (this.upstreamTimeContext) {
-      this.upstreamTimeContext.stopClock();
+      return this.upstreamTimeContext.getClockOffsets();
     } else {
-      super.stopClock();
+      return super.getClockOffsets();
+    }
+  }
+
+  setClockOffsets() {
+    if (this.upstreamTimeContext) {
+      return this.upstreamTimeContext.setClockOffsets(...arguments);
+    } else {
+      return super.setClockOffsets(...arguments);
     }
   }
 
@@ -86,10 +111,19 @@ class IndependentTimeContext extends TimeContext {
     return this.globalTimeContext.timeSystem(...arguments);
   }
 
+  /**
+   * Get the time system of the TimeAPI.
+   * @returns {TimeSystem} The currently applied time system
+   * @memberof module:openmct.TimeAPI#
+   * @method getTimeSystem
+   */
+  getTimeSystem() {
+    return this.globalTimeContext.getTimeSystem();
+  }
+
   /**
    * Set the active clock. Tick source will be immediately subscribed to
-   * and ticking will begin. Offsets from 'now' must also be provided. A clock
-   * can be unset by calling {@link stopClock}.
+   * and ticking will begin. Offsets from 'now' must also be provided.
    *
    * @param {Clock || string} keyOrClock The clock to activate, or its key
    * @param {ClockOffsets} offsets on each tick these will be used to calculate
@@ -126,15 +160,19 @@ class IndependentTimeContext extends TimeContext {
       this.activeClock = clock;
 
       /**
-       * The active clock has changed. Clock can be unset by calling {@link stopClock}
+       * The active clock has changed.
        * @event clock
        * @memberof module:openmct.TimeAPI~
        * @property {Clock} clock The newly activated clock, or undefined
        * if the system is no longer following a clock source
        */
       this.emit('clock', this.activeClock);
+      this.emit(TIME_CONTEXT_EVENTS.clockChanged, this.activeClock);
 
       if (this.activeClock !== undefined) {
+        //set the mode here or isRealtime will be false even if we're in clock mode
+        this.setMode(REALTIME_MODE_KEY);
+
         this.clockOffsets(offsets);
         this.activeClock.on('tick', this.tick);
       }
@@ -145,6 +183,122 @@ class IndependentTimeContext extends TimeContext {
     return this.activeClock;
   }
 
+  /**
+   * Get the active clock.
+   * @return {Clock} the currently active clock;
+   */
+  getClock() {
+    if (this.upstreamTimeContext) {
+      return this.upstreamTimeContext.getClock();
+    }
+
+    return this.activeClock;
+  }
+
+  /**
+   * Set the active clock. Tick source will be immediately subscribed to
+   * and the currently ticking will begin.
+   * Offsets from 'now', if provided, will be used to set realtime mode offsets
+   *
+   * @param {Clock || string} keyOrClock The clock to activate, or its key
+   * @fires module:openmct.TimeAPI~clock
+   * @return {Clock} the currently active clock;
+   */
+  setClock(keyOrClock) {
+    if (this.upstreamTimeContext) {
+      return this.upstreamTimeContext.setClock(...arguments);
+    }
+
+    let clock;
+
+    if (typeof keyOrClock === 'string') {
+      clock = this.globalTimeContext.clocks.get(keyOrClock);
+      if (clock === undefined) {
+        throw `Unknown clock ${keyOrClock}. Has it been registered with 'addClock'?`;
+      }
+    } else if (typeof keyOrClock === 'object') {
+      clock = keyOrClock;
+      if (!this.globalTimeContext.clocks.has(clock.key)) {
+        throw `Unknown clock ${keyOrClock.key}. Has it been registered with 'addClock'?`;
+      }
+    }
+
+    const previousClock = this.activeClock;
+    if (previousClock) {
+      previousClock.off('tick', this.tick);
+    }
+
+    this.activeClock = clock;
+    this.activeClock.on('tick', this.tick);
+
+    /**
+     * The active clock has changed.
+     * @event clock
+     * @memberof module:openmct.TimeAPI~
+     * @property {Clock} clock The newly activated clock, or undefined
+     * if the system is no longer following a clock source
+     */
+    this.emit(TIME_CONTEXT_EVENTS.clockChanged, this.activeClock);
+
+    return this.activeClock;
+  }
+
+  /**
+   * Get the current mode.
+   * @return {Mode} the current mode;
+   */
+  getMode() {
+    if (this.upstreamTimeContext) {
+      return this.upstreamTimeContext.getMode();
+    }
+
+    return this.mode;
+  }
+
+  /**
+   * Set the mode to either fixed or realtime.
+   *
+   * @param {Mode} mode The mode to activate
+   * @param {TimeBounds | ClockOffsets} offsetsOrBounds A time window of a fixed width
+   * @fires module:openmct.TimeAPI~clock
+   * @return {Mode} the currently active mode;
+   */
+  setMode(mode, offsetsOrBounds) {
+    if (!mode) {
+      return;
+    }
+
+    if (this.upstreamTimeContext) {
+      return this.upstreamTimeContext.setMode(...arguments);
+    }
+
+    if (mode === MODES.realtime && this.activeClock === undefined) {
+      throw `Unknown clock. Has a clock been registered with 'addClock'?`;
+    }
+
+    if (mode !== this.mode) {
+      this.mode = mode;
+      /**
+       * The active mode has changed.
+       * @event modeChanged
+       * @memberof module:openmct.TimeAPI~
+       * @property {Mode} mode The newly activated mode
+       */
+      this.emit(TIME_CONTEXT_EVENTS.modeChanged, this.#copy(this.mode));
+    }
+
+    //We are also going to set bounds here
+    if (offsetsOrBounds !== undefined) {
+      if (this.mode === REALTIME_MODE_KEY) {
+        this.setClockOffsets(offsetsOrBounds);
+      } else {
+        this.setBounds(offsetsOrBounds);
+      }
+    }
+
+    return this.mode;
+  }
+
   /**
    * Causes this time context to follow another time context (either the global context, or another upstream time context)
    * This allows views to have their own time context which points to the appropriate upstream context as necessary, achieving nesting.
@@ -152,7 +306,7 @@ class IndependentTimeContext extends TimeContext {
   followTimeContext() {
     this.stopFollowingTimeContext();
     if (this.upstreamTimeContext) {
-      TIME_CONTEXT_EVENTS.forEach((eventName) => {
+      Object.values(TIME_CONTEXT_EVENTS).forEach((eventName) => {
         const thisTimeContext = this;
         this.upstreamTimeContext.on(eventName, passthrough);
         this.unlisteners.push(() => {
@@ -197,6 +351,7 @@ class IndependentTimeContext extends TimeContext {
 
     // Emit bounds so that views that are changing context get the upstream bounds
     this.emit('bounds', this.bounds());
+    this.emit(TIME_CONTEXT_EVENTS.boundsChanged, this.getBounds());
   }
 
   hasOwnContext() {
@@ -259,11 +414,16 @@ class IndependentTimeContext extends TimeContext {
       this.followTimeContext();
 
       // Emit bounds so that views that are changing context get the upstream bounds
-      this.emit('bounds', this.bounds());
+      this.emit('bounds', this.getBounds());
+      this.emit(TIME_CONTEXT_EVENTS.boundsChanged, this.getBounds());
       // now that the view's context is set, tell others to check theirs in case they were following this view's context.
       this.globalTimeContext.emit('refreshContext', viewKey);
     }
   }
+
+  #copy(object) {
+    return JSON.parse(JSON.stringify(object));
+  }
 }
 
 export default IndependentTimeContext;

src/api/time/TimeAPI.js

@@ -22,6 +22,7 @@
 
 import GlobalTimeContext from './GlobalTimeContext';
 import IndependentTimeContext from '@/api/time/IndependentTimeContext';
+import { FIXED_MODE_KEY, REALTIME_MODE_KEY } from '@/api/time/constants';
 
 /**
  * The public API for setting and querying the temporal state of the
@@ -134,14 +135,15 @@ class TimeAPI extends GlobalTimeContext {
    */
   addIndependentContext(key, value, clockKey) {
     let timeContext = this.getIndependentContext(key);
+
     //stop following upstream time context since the view has it's own
     timeContext.resetContext();
 
     if (clockKey) {
-      timeContext.clock(clockKey, value);
+      timeContext.setClock(clockKey);
+      timeContext.setMode(REALTIME_MODE_KEY, value);
     } else {
-      timeContext.stopClock();
-      timeContext.bounds(value);
+      timeContext.setMode(FIXED_MODE_KEY, value);
     }
 
     // Notify any nested views to update, pass in the viewKey so that particular view can skip getting an upstream context
@@ -185,6 +187,7 @@ class TimeAPI extends GlobalTimeContext {
     }
 
     let viewTimeContext = this.getIndependentContext(viewKey);
+
     if (!viewTimeContext) {
       // If the context doesn't exist yet, create it.
       viewTimeContext = new IndependentTimeContext(this.openmct, this, objectPath);

src/api/time/TimeAPISpec.js

@@ -87,7 +87,7 @@ describe('The Time API', function () {
     expect(function () {
       api.timeSystem(timeSystem, bounds);
     }).not.toThrow();
-    expect(api.timeSystem()).toBe(timeSystem);
+    expect(api.timeSystem()).toEqual(timeSystem);
   });
 
   it('Disallows setting of time system without bounds', function () {
@@ -110,7 +110,7 @@ describe('The Time API', function () {
     expect(function () {
       api.timeSystem(timeSystemKey);
     }).not.toThrow();
-    expect(api.timeSystem()).toBe(timeSystem);
+    expect(api.timeSystem()).toEqual(timeSystem);
   });
 
   it('Emits an event when time system changes', function () {
@@ -202,12 +202,12 @@ describe('The Time API', function () {
       expect(mockTickSource.off).toHaveBeenCalledWith('tick', jasmine.any(Function));
     });
 
-    it('Allows the active clock to be set and unset', function () {
+    xit('Allows the active clock to be set and unset', function () {
       expect(api.clock()).toBeUndefined();
       api.clock('mts', mockOffsets);
       expect(api.clock()).toBeDefined();
-      api.stopClock();
-      expect(api.clock()).toBeUndefined();
+      // api.stopClock();
+      // expect(api.clock()).toBeUndefined();
     });
 
     it('Provides a default time context', () => {

src/api/time/TimeContext.js

@@ -21,8 +21,7 @@
  *****************************************************************************/
 
 import EventEmitter from 'EventEmitter';
-
-export const TIME_CONTEXT_EVENTS = ['bounds', 'clock', 'timeSystem', 'clockOffsets'];
+import { TIME_CONTEXT_EVENTS, MODES, REALTIME_MODE_KEY, FIXED_MODE_KEY } from './constants';
 
 class TimeContext extends EventEmitter {
   constructor() {
@@ -42,6 +41,7 @@ class TimeContext extends EventEmitter {
 
     this.activeClock = undefined;
     this.offsets = undefined;
+    this.mode = undefined;
 
     this.tick = this.tick.bind(this);
   }
@@ -56,6 +56,8 @@ class TimeContext extends EventEmitter {
    * @method timeSystem
    */
   timeSystem(timeSystemOrKey, bounds) {
+    this.#warnMethodDeprecated('"timeSystem"', '"getTimeSystem" and "setTimeSystem"');
+
     if (arguments.length >= 1) {
       if (arguments.length === 1 && !this.activeClock) {
         throw new Error('Must specify bounds when changing time system without an active clock.');
@@ -91,7 +93,7 @@ class TimeContext extends EventEmitter {
         throw 'Attempt to set invalid time system in Time API. Please provide a previously registered time system object or key';
       }
 
-      this.system = timeSystem;
+      this.system = this.#copy(timeSystem);
 
       /**
        * The time system used by the time
@@ -102,7 +104,10 @@ class TimeContext extends EventEmitter {
        * @property {TimeSystem} The value of the currently applied
        * Time System
        * */
-      this.emit('timeSystem', this.system);
+      const system = this.#copy(this.system);
+      this.emit('timeSystem', system);
+      this.emit(TIME_CONTEXT_EVENTS.timeSystemChanged, system);
+
       if (bounds) {
         this.bounds(bounds);
       }
@@ -163,6 +168,8 @@ class TimeContext extends EventEmitter {
    * @method bounds
    */
   bounds(newBounds) {
+    this.#warnMethodDeprecated('"bounds"', '"getBounds" and "setBounds"');
+
     if (arguments.length > 0) {
       const validationResult = this.validateBounds(newBounds);
       if (validationResult.valid !== true) {
@@ -170,7 +177,7 @@ class TimeContext extends EventEmitter {
       }
 
       //Create a copy to avoid direct mutation of conductor bounds
-      this.boundsVal = JSON.parse(JSON.stringify(newBounds));
+      this.boundsVal = this.#copy(newBounds);
       /**
        * The start time, end time, or both have been updated.
        * @event bounds
@@ -180,10 +187,11 @@ class TimeContext extends EventEmitter {
        * a "tick" event (ie. was an automatic update), false otherwise.
        */
       this.emit('bounds', this.boundsVal, false);
+      this.emit(TIME_CONTEXT_EVENTS.boundsChanged, this.boundsVal, false);
     }
 
     //Return a copy to prevent direct mutation of time conductor bounds.
-    return JSON.parse(JSON.stringify(this.boundsVal));
+    return this.#copy(this.boundsVal);
   }
 
   /**
@@ -248,6 +256,8 @@ class TimeContext extends EventEmitter {
    * @returns {ClockOffsets}
    */
   clockOffsets(offsets) {
+    this.#warnMethodDeprecated('"clockOffsets"', '"getClockOffsets" and "setClockOffsets"');
+
     if (arguments.length > 0) {
       const validationResult = this.validateOffsets(offsets);
       if (validationResult.valid !== true) {
@@ -278,20 +288,19 @@ class TimeContext extends EventEmitter {
   }
 
   /**
-   * Stop the currently active clock from ticking, and unset it. This will
+   * Stop following the currently active clock. This will
    * revert all views to showing a static time frame defined by the current
    * bounds.
    */
   stopClock() {
-    if (this.activeClock) {
-      this.clock(undefined, undefined);
-    }
+    this.#warnMethodDeprecated('"stopClock"');
+
+    this.setMode(FIXED_MODE_KEY);
   }
 
   /**
    * Set the active clock. Tick source will be immediately subscribed to
-   * and ticking will begin. Offsets from 'now' must also be provided. A clock
-   * can be unset by calling {@link stopClock}.
+   * and ticking will begin. Offsets from 'now' must also be provided.
    *
    * @param {Clock || string} keyOrClock The clock to activate, or its key
    * @param {ClockOffsets} offsets on each tick these will be used to calculate
@@ -301,6 +310,8 @@ class TimeContext extends EventEmitter {
    * @return {Clock} the currently active clock;
    */
   clock(keyOrClock, offsets) {
+    this.#warnMethodDeprecated('"clock"', '"getClock" and "setClock"');
+
     if (arguments.length === 2) {
       let clock;
 
@@ -324,15 +335,19 @@ class TimeContext extends EventEmitter {
       this.activeClock = clock;
 
       /**
-       * The active clock has changed. Clock can be unset by calling {@link stopClock}
+       * The active clock has changed.
        * @event clock
        * @memberof module:openmct.TimeAPI~
        * @property {Clock} clock The newly activated clock, or undefined
        * if the system is no longer following a clock source
        */
       this.emit('clock', this.activeClock);
+      this.emit(TIME_CONTEXT_EVENTS.clockChanged, this.activeClock);
 
       if (this.activeClock !== undefined) {
+        //set the mode or isRealtime will be false even though we're in clock mode
+        this.setMode(REALTIME_MODE_KEY);
+
         this.clockOffsets(offsets);
         this.activeClock.on('tick', this.tick);
       }
@@ -340,7 +355,7 @@ class TimeContext extends EventEmitter {
       throw 'When setting the clock, clock offsets must also be provided';
     }
 
-    return this.activeClock;
+    return this.isRealTime() ? this.activeClock : undefined;
   }
 
   /**
@@ -349,29 +364,304 @@ class TimeContext extends EventEmitter {
    * using current offsets.
    */
   tick(timestamp) {
-    if (!this.activeClock) {
-      return;
+    // always emit the timestamp
+    this.emit('tick', timestamp);
+
+    if (this.mode === REALTIME_MODE_KEY) {
+      const newBounds = {
+        start: timestamp + this.offsets.start,
+        end: timestamp + this.offsets.end
+      };
+
+      this.boundsVal = newBounds;
+      // "bounds" will be deprecated in a future release
+      this.emit('bounds', this.boundsVal, true);
+      this.emit(TIME_CONTEXT_EVENTS.boundsChanged, this.boundsVal, true);
     }
-
-    const newBounds = {
-      start: timestamp + this.offsets.start,
-      end: timestamp + this.offsets.end
-    };
-
-    this.boundsVal = newBounds;
-    this.emit('bounds', this.boundsVal, true);
   }
 
   /**
-   * Checks if this time context is in real-time mode or not.
+   * Get the timestamp of the current clock
+   * @returns {number} current timestamp of current clock regardless of mode
+   * @memberof module:openmct.TimeAPI#
+   * @method now
+   */
+
+  now() {
+    return this.activeClock.currentValue();
+  }
+
+  /**
+   * Get the time system of the TimeAPI.
+   * @returns {TimeSystem} The currently applied time system
+   * @memberof module:openmct.TimeAPI#
+   * @method getTimeSystem
+   */
+  getTimeSystem() {
+    return this.system;
+  }
+
+  /**
+   * Set the time system of the TimeAPI.
+   * @param {TimeSystem | string} timeSystemOrKey
+   * @param {module:openmct.TimeAPI~TimeConductorBounds} bounds
+   * @fires module:openmct.TimeAPI~timeSystem
+   * @returns {TimeSystem} The currently applied time system
+   * @memberof module:openmct.TimeAPI#
+   * @method setTimeSystem
+   */
+  setTimeSystem(timeSystemOrKey, bounds) {
+    if (timeSystemOrKey === undefined) {
+      throw 'Please provide a time system';
+    }
+
+    let timeSystem;
+
+    if (typeof timeSystemOrKey === 'string') {
+      timeSystem = this.timeSystems.get(timeSystemOrKey);
+
+      if (timeSystem === undefined) {
+        throw `Unknown time system ${timeSystemOrKey}. Has it been registered with 'addTimeSystem'?`;
+      }
+    } else if (typeof timeSystemOrKey === 'object') {
+      timeSystem = timeSystemOrKey;
+
+      if (!this.timeSystems.has(timeSystem.key)) {
+        throw `Unknown time system ${timeSystemOrKey.key}. Has it been registered with 'addTimeSystem'?`;
+      }
+    } else {
+      throw 'Attempt to set invalid time system in Time API. Please provide a previously registered time system object or key';
+    }
+
+    this.system = this.#copy(timeSystem);
+    /**
+     * The time system used by the time
+     * conductor has changed. A change in Time System will always be
+     * followed by a bounds event specifying new query bounds.
+     *
+     * @event module:openmct.TimeAPI~timeSystem
+     * @property {TimeSystem} The value of the currently applied
+     * Time System
+     * */
+    this.emit(TIME_CONTEXT_EVENTS.timeSystemChanged, this.#copy(this.system));
+    this.emit('timeSystem', this.#copy(this.system));
+
+    if (bounds) {
+      this.setBounds(bounds);
+    }
+  }
+
+  /**
+   * Get the start and end time of the time conductor. Basic validation
+   * of bounds is performed.
+   * @returns {module:openmct.TimeAPI~TimeConductorBounds}
+   * @memberof module:openmct.TimeAPI#
+   * @method bounds
+   */
+  getBounds() {
+    //Return a copy to prevent direct mutation of time conductor bounds.
+    return this.#copy(this.boundsVal);
+  }
+
+  /**
+   * Set the start and end time of the time conductor. Basic validation
+   * of bounds is performed.
+   *
+   * @param {module:openmct.TimeAPI~TimeConductorBounds} newBounds
+   * @throws {Error} Validation error
+   * @fires module:openmct.TimeAPI~bounds
+   * @returns {module:openmct.TimeAPI~TimeConductorBounds}
+   * @memberof module:openmct.TimeAPI#
+   * @method bounds
+   */
+  setBounds(newBounds) {
+    const validationResult = this.validateBounds(newBounds);
+    if (validationResult.valid !== true) {
+      throw new Error(validationResult.message);
+    }
+
+    //Create a copy to avoid direct mutation of conductor bounds
+    this.boundsVal = this.#copy(newBounds);
+    /**
+     * The start time, end time, or both have been updated.
+     * @event bounds
+     * @memberof module:openmct.TimeAPI~
+     * @property {TimeConductorBounds} bounds The newly updated bounds
+     * @property {boolean} [tick] `true` if the bounds update was due to
+     * a "tick" event (i.e. was an automatic update), false otherwise.
+     */
+    this.emit(TIME_CONTEXT_EVENTS.boundsChanged, this.boundsVal, false);
+    this.emit('bounds', this.boundsVal, false);
+  }
+
+  /**
+   * Get the active clock.
+   * @return {Clock} the currently active clock;
+   */
+  getClock() {
+    return this.activeClock;
+  }
+
+  /**
+   * Set the active clock. Tick source will be immediately subscribed to
+   * and the currently ticking will begin.
+   * Offsets from 'now', if provided, will be used to set realtime mode offsets
+   *
+   * @param {Clock || string} keyOrClock The clock to activate, or its key
+   * @fires module:openmct.TimeAPI~clock
+   * @return {Clock} the currently active clock;
+   */
+  setClock(keyOrClock) {
+    let clock;
+
+    if (typeof keyOrClock === 'string') {
+      clock = this.clocks.get(keyOrClock);
+      if (clock === undefined) {
+        throw `Unknown clock ${keyOrClock}. Has it been registered with 'addClock'?`;
+      }
+    } else if (typeof keyOrClock === 'object') {
+      clock = keyOrClock;
+      if (!this.clocks.has(clock.key)) {
+        throw `Unknown clock ${keyOrClock.key}. Has it been registered with 'addClock'?`;
+      }
+    }
+
+    const previousClock = this.activeClock;
+    if (previousClock) {
+      previousClock.off('tick', this.tick);
+    }
+
+    this.activeClock = clock;
+    this.activeClock.on('tick', this.tick);
+
+    /**
+     * The active clock has changed.
+     * @event clock
+     * @memberof module:openmct.TimeAPI~
+     * @property {Clock} clock The newly activated clock, or undefined
+     * if the system is no longer following a clock source
+     */
+    this.emit(TIME_CONTEXT_EVENTS.clockChanged, this.activeClock);
+    this.emit('clock', this.activeClock);
+  }
+
+  /**
+   * Get the current mode.
+   * @return {Mode} the current mode;
+   */
+  getMode() {
+    return this.mode;
+  }
+
+  /**
+   * Set the mode to either fixed or realtime.
+   *
+   * @param {Mode} mode The mode to activate
+   * @param {TimeBounds | ClockOffsets} offsetsOrBounds A time window of a fixed width
+   * @fires module:openmct.TimeAPI~clock
+   * @return {Mode} the currently active mode;
+   */
+  setMode(mode, offsetsOrBounds) {
+    if (!mode) {
+      return;
+    }
+
+    if (mode === MODES.realtime && this.activeClock === undefined) {
+      throw `Unknown clock. Has a clock been registered with 'addClock'?`;
+    }
+
+    if (mode !== this.mode) {
+      this.mode = mode;
+      /**
+       * The active mode has changed.
+       * @event modeChanged
+       * @memberof module:openmct.TimeAPI~
+       * @property {Mode} mode The newly activated mode
+       */
+      this.emit(TIME_CONTEXT_EVENTS.modeChanged, this.#copy(this.mode));
+    }
+
+    if (offsetsOrBounds !== undefined) {
+      if (this.isRealTime()) {
+        this.setClockOffsets(offsetsOrBounds);
+      } else {
+        this.setBounds(offsetsOrBounds);
+      }
+    }
+  }
+
+  /**
+   * Checks if this time context is in realtime mode or not.
    * @returns {boolean} true if this context is in real-time mode, false if not
    */
   isRealTime() {
-    if (this.clock()) {
-      return true;
+    return this.mode === MODES.realtime;
+  }
+
+  /**
+   * Checks if this time context is in fixed mode or not.
+   * @returns {boolean} true if this context is in fixed mode, false if not
+   */
+  isFixed() {
+    return this.mode === MODES.fixed;
+  }
+
+  /**
+   * Get the currently applied clock offsets.
+   * @returns {ClockOffsets}
+   */
+  getClockOffsets() {
+    return this.offsets;
+  }
+
+  /**
+   * Set the currently applied clock offsets. If no parameter is provided,
+   * the current value will be returned. If provided, the new value will be
+   * used as the new clock offsets.
+   * @param {ClockOffsets} offsets
+   * @returns {ClockOffsets}
+   */
+  setClockOffsets(offsets) {
+    const validationResult = this.validateOffsets(offsets);
+    if (validationResult.valid !== true) {
+      throw new Error(validationResult.message);
     }
 
-    return false;
+    this.offsets = this.#copy(offsets);
+
+    const currentValue = this.activeClock.currentValue();
+    const newBounds = {
+      start: currentValue + offsets.start,
+      end: currentValue + offsets.end
+    };
+
+    this.setBounds(newBounds);
+
+    /**
+     * Event that is triggered when clock offsets change.
+     * @event clockOffsets
+     * @memberof module:openmct.TimeAPI~
+     * @property {ClockOffsets} clockOffsets The newly activated clock
+     * offsets.
+     */
+    this.emit(TIME_CONTEXT_EVENTS.clockOffsetsChanged, this.#copy(offsets));
+  }
+
+  #warnMethodDeprecated(method, newMethod) {
+    let message = `[DEPRECATION WARNING]: The ${method} API method is deprecated and will be removed in a future version of Open MCT.`;
+
+    if (newMethod) {
+      message += ` Please use the ${newMethod} API method(s) instead.`;
+    }
+
+    // TODO: add docs and point to them in warning.
+    //  For more information and migration instructions, visit [link to documentation or migration guide].
+
+    console.warn(message);
+  }
+
+  #copy(object) {
+    return JSON.parse(JSON.stringify(object));
   }
 }
 

src/api/time/constants.js

@@ -0,0 +1,22 @@
+export const TIME_CONTEXT_EVENTS = {
+  //old API events - to be deprecated
+  bounds: 'bounds',
+  clock: 'clock',
+  timeSystem: 'timeSystem',
+  clockOffsets: 'clockOffsets',
+  //new API events
+  tick: 'tick',
+  modeChanged: 'modeChanged',
+  boundsChanged: 'boundsChanged',
+  clockChanged: 'clockChanged',
+  timeSystemChanged: 'timeSystemChanged',
+  clockOffsetsChanged: 'clockOffsetsChanged'
+};
+
+export const REALTIME_MODE_KEY = 'realtime';
+export const FIXED_MODE_KEY = 'fixed';
+
+export const MODES = {
+  [FIXED_MODE_KEY]: FIXED_MODE_KEY,
+  [REALTIME_MODE_KEY]: REALTIME_MODE_KEY
+};

src/api/tooltips/ToolTip.js

@@ -0,0 +1,72 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2023, 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 TooltipComponent from './components/TooltipComponent.vue';
+import EventEmitter from 'EventEmitter';
+import mount from 'utils/mount';
+
+class Tooltip extends EventEmitter {
+  constructor(
+    { toolTipText, toolTipLocation, parentElement } = {
+      tooltipText: '',
+      toolTipLocation: 'below',
+      parentElement: null
+    }
+  ) {
+    super();
+
+    const { vNode, destroy } = mount({
+      components: {
+        TooltipComponent: TooltipComponent
+      },
+      provide: {
+        toolTipText,
+        toolTipLocation,
+        parentElement
+      },
+      template: '<tooltip-component toolTipText="toolTipText"></tooltip-component>'
+    });
+
+    this.component = vNode.componentInstance;
+    this._destroy = destroy;
+
+    this.isActive = null;
+  }
+
+  destroy() {
+    if (!this.isActive) {
+      return;
+    }
+    this._destroy();
+    this.isActive = false;
+  }
+
+  /**
+   * @private
+   **/
+  show() {
+    document.body.appendChild(this.component.$el);
+    this.isActive = true;
+  }
+}
+
+export default Tooltip;

src/api/tooltips/ToolTipAPI.js

@@ -0,0 +1,90 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2023, 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 Tooltip from './ToolTip';
+
+/**
+ * @readonly
+ * @enum {String} TooltipLocation
+ * @property {String} ABOVE The string for locating tooltips above an element
+ * @property {String} BELOW The string for locating tooltips below an element
+ * @property {String} RIGHT The pixel-spatial annotation type
+ * @property {String} LEFT The temporal annotation type
+ * @property {String} CENTER The plot-spatial annotation type
+ */
+const TOOLTIP_LOCATIONS = Object.freeze({
+  ABOVE: 'above',
+  BELOW: 'below',
+  RIGHT: 'right',
+  LEFT: 'left',
+  CENTER: 'center'
+});
+
+/**
+ * The TooltipAPI is responsible for adding custom tooltips to
+ * the desired elements on the screen
+ *
+ * @memberof api/tooltips
+ * @constructor
+ */
+
+class TooltipAPI {
+  constructor() {
+    this.activeToolTips = [];
+    this.TOOLTIP_LOCATIONS = TOOLTIP_LOCATIONS;
+  }
+
+  /**
+   * @private for platform-internal use
+   */
+  showTooltip(tooltip) {
+    for (let i = this.activeToolTips.length - 1; i > -1; i--) {
+      this.activeToolTips[i].destroy();
+      this.activeToolTips.splice(i, 1);
+    }
+    this.activeToolTips.push(tooltip);
+
+    tooltip.show();
+  }
+
+  /**
+   * A description of option properties that can be passed into the tooltip
+   * @typedef {Object} TooltipOptions
+   * @property {string} tooltipText text to show in the tooltip
+   * @property {TOOLTIP_LOCATIONS} tooltipLocation location to show the tooltip relative to the parentElement
+   * @property {HTMLElement} parentElement reference to the DOM node we're adding the tooltip to
+   */
+
+  /**
+   * Tooltips take an options object that consists of the string, tooltipLocation, and parentElement
+   * @param {TooltipOptions} options
+   */
+  tooltip(options) {
+    let tooltip = new Tooltip(options);
+
+    this.showTooltip(tooltip);
+
+    return tooltip;
+  }
+}
+
+export default TooltipAPI;

src/api/tooltips/components/TooltipComponent.vue

@@ -0,0 +1,61 @@
+<!--
+Open MCT, Copyright (c) 2014-2023, United States Government
+as represented by the Administrator of the National Aeronautics and Space
+Administration. All rights reserved.
+
+Open MCT is licensed under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+http://www.apache.org/licenses/LICENSE-2.0.
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+License for the specific language governing permissions and limitations
+under the License.
+
+Open MCT includes source code licensed under additional open source
+licenses. See the Open Source Licenses file (LICENSES.md) included with
+this source code distribution or the Licensing information page available
+at runtime from the About dialog for additional information.
+-->
+<template>
+  <div ref="tooltip-wrapper" class="c-menu c-tooltip-wrapper" :style="toolTipLocationStyle">
+    <div class="c-tooltip">
+      {{ toolTipText }}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  inject: ['toolTipText', 'toolTipLocation', 'parentElement'],
+  computed: {
+    toolTipCoordinates() {
+      return this.parentElement.getBoundingClientRect();
+    },
+    toolTipLocationStyle() {
+      const { top, left, height, width } = this.toolTipCoordinates;
+      let toolTipLocationStyle = {};
+
+      if (this.toolTipLocation === 'above') {
+        toolTipLocationStyle = { top: `${top - 5}px`, left: `${left}px` };
+      }
+      if (this.toolTipLocation === 'below') {
+        toolTipLocationStyle = { top: `${top + height}px`, left: `${left}px` };
+      }
+      if (this.toolTipLocation === 'right') {
+        toolTipLocationStyle = { top: `${top}px`, left: `${left + width}px` };
+      }
+      if (this.toolTipLocation === 'left') {
+        toolTipLocationStyle = { top: `${top}px`, left: `${left - width}px` };
+      }
+      if (this.toolTipLocation === 'center') {
+        toolTipLocationStyle = { top: `${top + height / 2}px`, left: `${left + width / 2}px` };
+      }
+
+      return toolTipLocationStyle;
+    }
+  }
+};
+</script>

src/api/tooltips/components/tooltip-component.scss

@@ -0,0 +1,10 @@
+.c-tooltip-wrapper {
+  max-width: 200px;
+  height: auto;
+  width: auto;
+  padding: $interiorMargin;
+}
+
+.c-tooltip {
+  font-style: italic;
+}

src/api/tooltips/tooltipMixins.js

@@ -0,0 +1,72 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2023, 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.
+ *****************************************************************************/
+
+const tooltipHelpers = {
+  methods: {
+    async getTelemetryPathString(telemetryIdentifier) {
+      let telemetryPathString = '';
+      if (!this.domainObject?.identifier) {
+        return;
+      }
+      const telemetryPath = await this.openmct.objects.getTelemetryPath(
+        this.domainObject.identifier,
+        telemetryIdentifier
+      );
+      if (telemetryPath.length) {
+        telemetryPathString = telemetryPath.join(' / ');
+      }
+      return telemetryPathString;
+    },
+    async getObjectPath(objectIdentifier) {
+      if (!objectIdentifier && !this.domainObject) {
+        return;
+      }
+      const domainObjectIdentifier = objectIdentifier || this.domainObject.identifier;
+      const objectPathList = await this.openmct.objects.getOriginalPath(domainObjectIdentifier);
+      objectPathList.pop();
+      return objectPathList
+        .map((pathItem) => pathItem.name)
+        .reverse()
+        .join(' / ');
+    },
+    buildToolTip(tooltipText, tooltipLocation, elementRef) {
+      if (!tooltipText || tooltipText.length < 1) {
+        return;
+      }
+      let parentElement = this.$refs[elementRef];
+      if (Array.isArray(parentElement)) {
+        parentElement = parentElement[0];
+      }
+      this.tooltip = this.openmct.tooltips.tooltip({
+        toolTipText: tooltipText,
+        toolTipLocation: tooltipLocation,
+        parentElement: parentElement
+      });
+    },
+    hideToolTip() {
+      this.tooltip?.destroy();
+      this.tooltip = null;
+    }
+  }
+};
+
+export default tooltipHelpers;

src/api/user/ActiveRoleSynchronizer.js

@@ -0,0 +1,37 @@
+import { ACTIVE_ROLE_BROADCAST_CHANNEL_NAME } from './constants';
+
+class ActiveRoleSynchronizer {
+  #roleChannel;
+
+  constructor(openmct) {
+    this.openmct = openmct;
+    this.#roleChannel = new BroadcastChannel(ACTIVE_ROLE_BROADCAST_CHANNEL_NAME);
+    this.setActiveRoleFromChannelMessage = this.setActiveRoleFromChannelMessage.bind(this);
+
+    this.subscribeToRoleChanges(this.setActiveRoleFromChannelMessage);
+  }
+  subscribeToRoleChanges(callback) {
+    this.#roleChannel.addEventListener('message', callback);
+  }
+  unsubscribeFromRoleChanges(callback) {
+    this.#roleChannel.removeEventListener('message', callback);
+  }
+
+  setActiveRoleFromChannelMessage(event) {
+    const role = event.data;
+    this.openmct.user.setActiveRole(role);
+  }
+  broadcastNewRole(role) {
+    if (!this.#roleChannel.name) {
+      return false;
+    }
+
+    this.#roleChannel.postMessage(role);
+  }
+  destroy() {
+    this.unsubscribeFromRoleChanges(this.setActiveRoleFromChannelMessage);
+    this.#roleChannel.close();
+  }
+}
+
+export default ActiveRoleSynchronizer;

src/api/user/StatusAPI.js

@@ -140,9 +140,9 @@ export default class StatusAPI extends EventEmitter {
     const provider = this.#userAPI.getProvider();
 
     if (provider.canProvideStatusForRole) {
-      return provider.canProvideStatusForRole(role);
+      return Promise.resolve(provider.canProvideStatusForRole(role));
     } else {
-      return false;
+      return Promise.resolve(false);
     }
   }
 
@@ -151,11 +151,16 @@ export default class StatusAPI extends EventEmitter {
    * @param {Status} status The status to set for the provided role
    * @returns {Promise<Boolean>} true if operation was successful, otherwise false.
    */
-  setStatusForRole(role, status) {
+  setStatusForRole(status) {
     const provider = this.#userAPI.getProvider();
 
     if (provider.setStatusForRole) {
-      return provider.setStatusForRole(role, status);
+      const activeRole = this.#userAPI.getActiveRole();
+      if (!provider.canProvideStatusForRole(activeRole)) {
+        return false;
+      }
+
+      return provider.setStatusForRole(activeRole, status);
     } else {
       this.#userAPI.error('User provider does not support setting role status');
     }
@@ -216,21 +221,6 @@ export default class StatusAPI extends EventEmitter {
     }
   }
 
-  /**
-   * The status role of the current user. A user may have multiple roles, but will only have one role
-   * that provides status at any time.
-   * @returns {Promise<import("./UserAPI").Role>} the role for which the current user can provide status.
-   */
-  getStatusRoleForCurrentUser() {
-    const provider = this.#userAPI.getProvider();
-
-    if (provider.getStatusRoleForCurrentUser) {
-      return provider.getStatusRoleForCurrentUser();
-    } else {
-      this.#userAPI.error('User provider cannot provide role status for this user');
-    }
-  }
-
   /**
    * @returns {Promise<Boolean>} true if the configured UserProvider can provide status for the currently logged in user, false otherwise.
    * @see StatusUserProvider
@@ -238,14 +228,13 @@ export default class StatusAPI extends EventEmitter {
   async canProvideStatusForCurrentUser() {
     const provider = this.#userAPI.getProvider();
 
-    if (provider.getStatusRoleForCurrentUser) {
-      const activeStatusRole = await this.#userAPI.getProvider().getStatusRoleForCurrentUser();
-      const canProvideStatus = await this.canProvideStatusForRole(activeStatusRole);
-
-      return canProvideStatus;
-    } else {
+    if (!provider) {
       return false;
     }
+    const activeStatusRole = await this.#userAPI.getActiveRole();
+    const canProvideStatus = await this.canProvideStatusForRole(activeStatusRole);
+
+    return canProvideStatus;
   }
 
   /**

src/api/user/StatusUserProvider.js

@@ -77,5 +77,4 @@ export default class StatusUserProvider extends UserProvider {
   /**
    * @returns {Promise<import("./UserAPI").Role>} the active status role for the currently logged in user
    */
-  async getStatusRoleForCurrentUser() {}
 }

src/api/user/StoragePersistance.js

@@ -0,0 +1,37 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2023, 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 { ACTIVE_ROLE_LOCAL_STORAGE_KEY } from './constants';
+
+class StoragePersistance {
+  getActiveRole() {
+    return localStorage.getItem(ACTIVE_ROLE_LOCAL_STORAGE_KEY);
+  }
+  setActiveRole(role) {
+    return localStorage.setItem(ACTIVE_ROLE_LOCAL_STORAGE_KEY, role);
+  }
+  clearActiveRole() {
+    return localStorage.removeItem(ACTIVE_ROLE_LOCAL_STORAGE_KEY);
+  }
+}
+
+export default new StoragePersistance();

src/api/user/UserAPI.js

@@ -24,6 +24,7 @@ import EventEmitter from 'EventEmitter';
 import { MULTIPLE_PROVIDER_ERROR, NO_PROVIDER_ERROR } from './constants';
 import StatusAPI from './StatusAPI';
 import User from './User';
+import StoragePersistance from './StoragePersistance';
 
 class UserAPI extends EventEmitter {
   /**
@@ -86,6 +87,58 @@ class UserAPI extends EventEmitter {
       return this._provider.getCurrentUser();
     }
   }
+  /**
+   *  If a user provider is set, it will return an array of possible roles
+   *  that can be selected by the current user
+   *  @memberof module:openmct.UserAPI#
+   *  @returns {Array}
+   *  @throws Will throw an error if no user provider is set
+   */
+
+  getPossibleRoles() {
+    if (!this.hasProvider()) {
+      this.error(NO_PROVIDER_ERROR);
+    }
+    return this._provider.getPossibleRoles();
+  }
+  /**
+   * If a user provider is set, it will return the active role or null
+   * @memberof module:openmct.UserAPI#
+   * @returns {string|null}
+   */
+  getActiveRole() {
+    if (!this.hasProvider()) {
+      return null;
+    }
+
+    // get from session storage
+    const sessionStorageValue = StoragePersistance.getActiveRole();
+
+    return sessionStorageValue;
+  }
+  /**
+   * Set the active role in session storage
+   * @memberof module:openmct.UserAPI#
+   * @returns {undefined}
+   */
+  setActiveRole(role) {
+    StoragePersistance.setActiveRole(role);
+    this.emit('roleChanged', role);
+  }
+
+  /**
+   * Will return if a role can provide a operator status response
+   * @memberof module:openmct.UserApi#
+   * @returns {Boolean}
+   */
+  canProvideStatusForRole() {
+    if (!this.hasProvider()) {
+      return null;
+    }
+    const activeRole = this.getActiveRole();
+
+    return this._provider.canProvideStatusForRole?.(activeRole);
+  }
 
   /**
    * If a user provider is set, it will return the user provider's

src/api/user/UserAPISpec.js

@@ -25,7 +25,7 @@ import { MULTIPLE_PROVIDER_ERROR } from './constants';
 import ExampleUserProvider from '../../../example/exampleUser/ExampleUserProvider';
 
 const USERNAME = 'Test User';
-const EXAMPLE_ROLE = 'example-role';
+const EXAMPLE_ROLE = 'flight';
 
 describe('The User API', () => {
   let openmct;

src/api/user/constants.js

@@ -22,3 +22,6 @@
 
 export const MULTIPLE_PROVIDER_ERROR = 'Only one user provider may be set at a time.';
 export const NO_PROVIDER_ERROR = 'No user provider has been set.';
+
+export const ACTIVE_ROLE_LOCAL_STORAGE_KEY = 'ACTIVE_USER_ROLE';
+export const ACTIVE_ROLE_BROADCAST_CHANNEL_NAME = 'ActiveRoleChannel';

src/plugins/CouchDBSearchFolder/plugin.js

@@ -1,21 +1,26 @@
 export default function (folderName, couchPlugin, searchFilter) {
+  const DEFAULT_NAME = 'CouchDB Documents';
+
   return function install(openmct) {
     const couchProvider = couchPlugin.couchProvider;
+    //replace any non-letter/non-number with a hyphen
+    const couchSearchId = (folderName || DEFAULT_NAME).replace(/[^a-zA-Z0-9]/g, '-');
+    const couchSearchName = `couch-search-${couchSearchId}`;
 
     openmct.objects.addRoot({
-      namespace: 'couch-search',
-      key: 'couch-search'
+      namespace: couchSearchName,
+      key: couchSearchName
     });
 
-    openmct.objects.addProvider('couch-search', {
+    openmct.objects.addProvider(couchSearchName, {
       get(identifier) {
-        if (identifier.key !== 'couch-search') {
+        if (identifier.key !== couchSearchName) {
           return undefined;
         } else {
           return Promise.resolve({
             identifier,
             type: 'folder',
-            name: folderName || 'CouchDB Documents',
+            name: folderName || DEFAULT_NAME,
             location: 'ROOT'
           });
         }
@@ -25,8 +30,8 @@ export default function (folderName, couchPlugin, searchFilter) {
     openmct.composition.addProvider({
       appliesTo(domainObject) {
         return (
-          domainObject.identifier.namespace === 'couch-search' &&
-          domainObject.identifier.key === 'couch-search'
+          domainObject.identifier.namespace === couchSearchName &&
+          domainObject.identifier.key === couchSearchName
         );
       },
       load() {

src/plugins/CouchDBSearchFolder/pluginSpec.js

@@ -25,8 +25,8 @@ import CouchDBSearchFolderPlugin from './plugin';
 
 describe('the plugin', function () {
   let identifier = {
-    namespace: 'couch-search',
-    key: 'couch-search'
+    namespace: 'couch-search-CouchDB-Documents',
+    key: 'couch-search-CouchDB-Documents'
   };
   let testPath = '/test/db';
   let openmct;

src/plugins/LADTable/LADTableConfiguration.js

@@ -21,13 +21,16 @@
  *****************************************************************************/
 
 import EventEmitter from 'EventEmitter';
-
+import { markRaw } from 'vue';
 export default class LADTableConfiguration extends EventEmitter {
   constructor(domainObject, openmct) {
     super();
 
     this.domainObject = domainObject;
-    this.openmct = openmct;
+
+    // Prevent Vue from making this a Proxy, otherwise
+    // it cannot access any private methods (like #mutate()).
+    this.openmct = markRaw(openmct);
 
     this.objectMutated = this.objectMutated.bind(this);
     this.unlistenFromMutation = openmct.objects.observe(

src/plugins/LADTable/LADTableConfigurationViewProvider.js

@@ -21,7 +21,7 @@
  *****************************************************************************/
 
 import LADTableConfigurationComponent from './components/LADTableConfiguration.vue';
-import Vue from 'vue';
+import mount from 'utils/mount';
 
 export default function LADTableConfigurationViewProvider(openmct) {
   return {
@@ -37,28 +37,34 @@ export default function LADTableConfigurationViewProvider(openmct) {
       return object?.type === 'LadTable' || object?.type === 'LadTableSet';
     },
     view(selection) {
-      let component;
+      let _destroy = null;
 
       return {
         show(element) {
-          component = new Vue({
-            el: element,
-            components: {
-              LADTableConfiguration: LADTableConfigurationComponent
+          const { destroy } = mount(
+            {
+              el: element,
+              components: {
+                LADTableConfiguration: LADTableConfigurationComponent
+              },
+              provide: {
+                openmct
+              },
+              template: '<LADTableConfiguration />'
             },
-            provide: {
-              openmct
-            },
-            template: '<LADTableConfiguration />'
-          });
+            {
+              app: openmct.app,
+              element
+            }
+          );
+          _destroy = destroy;
         },
         priority() {
           return 1;
         },
         destroy() {
-          if (component) {
-            component.$destroy();
-            component = undefined;
+          if (_destroy) {
+            _destroy();
           }
         }
       };

src/plugins/LADTable/LADTableView.js

@@ -22,38 +22,47 @@
 
 import LadTable from './components/LADTable.vue';
 import LADTableConfiguration from './LADTableConfiguration';
-import Vue from 'vue';
+import mount from 'utils/mount';
 
 export default class LADTableView {
   constructor(openmct, domainObject, objectPath) {
     this.openmct = openmct;
     this.domainObject = domainObject;
     this.objectPath = objectPath;
-    this.component = undefined;
+    this.component = null;
+    this._destroy = null;
   }
 
   show(element) {
     let ladTableConfiguration = new LADTableConfiguration(this.domainObject, this.openmct);
 
-    this.component = new Vue({
-      el: element,
-      components: {
-        LadTable
+    const { vNode, destroy } = mount(
+      {
+        el: element,
+        components: {
+          LadTable
+        },
+        provide: {
+          openmct: this.openmct,
+          currentView: this,
+          ladTableConfiguration
+        },
+        data: () => {
+          return {
+            domainObject: this.domainObject,
+            objectPath: this.objectPath
+          };
+        },
+        template:
+          '<lad-table ref="ladTable" :domain-object="domainObject" :object-path="objectPath"></lad-table>'
       },
-      provide: {
-        openmct: this.openmct,
-        currentView: this,
-        ladTableConfiguration
-      },
-      data: () => {
-        return {
-          domainObject: this.domainObject,
-          objectPath: this.objectPath
-        };
-      },
-      template:
-        '<lad-table ref="ladTable" :domain-object="domainObject" :object-path="objectPath"></lad-table>'
-    });
+      {
+        app: this.openmct.app,
+        element
+      }
+    );
+    this.component = vNode.componentInstance;
+    this._destroy = destroy;
   }
 
   getViewContext() {
@@ -64,8 +73,9 @@ export default class LADTableView {
     return this.component.$refs.ladTable.getViewContext();
   }
 
-  destroy(element) {
-    this.component.$destroy();
-    this.component = undefined;
+  destroy() {
+    if (this._destroy) {
+      this._destroy();
+    }
   }
 }

src/plugins/LADTable/LadTableSetView.js

@@ -22,37 +22,46 @@
 
 import LadTableSet from './components/LadTableSet.vue';
 import LADTableConfiguration from './LADTableConfiguration';
-import Vue from 'vue';
+import mount from 'utils/mount';
 
 export default class LadTableSetView {
   constructor(openmct, domainObject, objectPath) {
     this.openmct = openmct;
     this.domainObject = domainObject;
     this.objectPath = objectPath;
-    this.component = undefined;
+    this._destroy = null;
+    this.component = null;
   }
 
   show(element) {
     let ladTableConfiguration = new LADTableConfiguration(this.domainObject, this.openmct);
 
-    this.component = new Vue({
-      el: element,
-      components: {
-        LadTableSet
+    const { vNode, destroy } = mount(
+      {
+        el: element,
+        components: {
+          LadTableSet
+        },
+        provide: {
+          openmct: this.openmct,
+          objectPath: this.objectPath,
+          currentView: this,
+          ladTableConfiguration
+        },
+        data: () => {
+          return {
+            domainObject: this.domainObject
+          };
+        },
+        template: '<lad-table-set ref="ladTableSet" :domain-object="domainObject"></lad-table-set>'
       },
-      provide: {
-        openmct: this.openmct,
-        objectPath: this.objectPath,
-        currentView: this,
-        ladTableConfiguration
-      },
-      data: () => {
-        return {
-          domainObject: this.domainObject
-        };
-      },
-      template: '<lad-table-set ref="ladTableSet" :domain-object="domainObject"></lad-table-set>'
-    });
+      {
+        app: this.openmct.app,
+        element
+      }
+    );
+    this._destroy = destroy;
+    this.component = vNode.componentInstance;
   }
 
   getViewContext() {
@@ -63,8 +72,9 @@ export default class LadTableSetView {
     return this.component.$refs.ladTableSet.getViewContext();
   }
 
-  destroy(element) {
-    this.component.$destroy();
-    this.component = undefined;
+  destroy() {
+    if (this._destroy) {
+      this._destroy();
+    }
   }
 }

src/plugins/LADTable/components/LADRow.vue

@@ -26,7 +26,14 @@
     @click="clickedRow"
     @contextmenu.prevent="showContextMenu"
   >
-    <td class="js-first-data">{{ domainObject.name }}</td>
+    <td
+      ref="tableCell"
+      class="js-first-data"
+      @mouseover.ctrl="showToolTip"
+      @mouseleave="hideToolTip"
+    >
+      {{ domainObject.name }}
+    </td>
     <td v-if="showTimestamp" class="js-second-data">{{ formattedTimestamp }}</td>
     <td class="js-third-data" :class="valueClasses">{{ value }}</td>
     <td v-if="hasUnits" class="js-units">
@@ -42,8 +49,10 @@ const BLANK_VALUE = '---';
 
 import identifierToString from '/src/tools/url';
 import PreviewAction from '@/ui/preview/PreviewAction.js';
+import tooltipHelpers from '../../../api/tooltips/tooltipMixins';
 
 export default {
+  mixins: [tooltipHelpers],
   inject: ['openmct', 'currentView'],
   props: {
     domainObject: {
@@ -181,7 +190,7 @@ export default {
     this.previewAction = new PreviewAction(this.openmct);
     this.previewAction.on('isVisible', this.togglePreviewState);
   },
-  destroyed() {
+  unmounted() {
     this.openmct.time.off('timeSystem', this.updateTimeSystem);
     this.telemetryCollection.off('add', this.setLatestValues);
     this.telemetryCollection.off('clear', this.resetValues);
@@ -259,6 +268,10 @@ export default {
       return metadata
         .values()
         .find((metadatum) => metadatum.hints.domain === undefined && metadatum.key !== 'name');
+    },
+    async showToolTip() {
+      const { BELOW } = this.openmct.tooltips.TOOLTIP_LOCATIONS;
+      this.buildToolTip(await this.getObjectPath(), BELOW, 'tableCell');
     }
   }
 };

src/plugins/LADTable/components/LADTable.vue

@@ -49,7 +49,7 @@
 </template>
 
 <script>
-import Vue from 'vue';
+import Vue, { toRaw } from 'vue';
 import LadRow from './LADRow.vue';
 import StalenessUtils from '@/utils/staleness';
 
@@ -139,7 +139,7 @@ export default {
     );
     this.initializeViewActions();
   },
-  destroyed() {
+  unmounted() {
     this.ladTableConfiguration.off('change', this.handleConfigurationChange);
 
     this.composition.off('add', this.addItem);
@@ -191,7 +191,7 @@ export default {
     reorder(reorderPlan) {
       const oldItems = this.items.slice();
       reorderPlan.forEach((reorderEvent) => {
-        this.$set(this.items, reorderEvent.newIndex, oldItems[reorderEvent.oldIndex]);
+        this.items[reorderEvent.newIndex] = oldItems[reorderEvent.oldIndex];
       });
     },
     metadataHasUnits(valueMetadatas) {
@@ -230,7 +230,7 @@ export default {
       };
     },
     toggleFixedLayout() {
-      const config = structuredClone(this.configuration);
+      const config = structuredClone(toRaw(this.configuration));
 
       config.isFixedLayout = !this.configuration.isFixedLayout;
       this.ladTableConfiguration.updateConfiguration(config);

src/plugins/LADTable/components/LADTableConfiguration.vue

@@ -87,7 +87,7 @@ export default {
 
     this.composition.load();
   },
-  destroyed() {
+  unmounted() {
     this.ladTableConfiguration.destroy();
     this.openmct.editor.off('isEditing', this.toggleEdit);
 
@@ -126,7 +126,7 @@ export default {
       ladTable.domainObject = domainObject;
       ladTable.key = this.openmct.objects.makeKeyString(domainObject.identifier);
 
-      this.$set(this.ladTelemetryObjects, ladTable.key, []);
+      this.ladTelemetryObjects[ladTable.key] = [];
       this.ladTableObjects.push(ladTable);
 
       const composition = this.openmct.composition.get(ladTable.domainObject);
@@ -165,7 +165,7 @@ export default {
         const telemetryObjects = this.ladTelemetryObjects[ladTable.key];
         telemetryObjects.push(telemetryObject);
 
-        this.$set(this.ladTelemetryObjects, ladTable.key, telemetryObjects);
+        this.ladTelemetryObjects[ladTable.key] = telemetryObjects;
 
         this.shouldShowUnitsCheckbox();
       };
@@ -179,7 +179,7 @@ export default {
         );
 
         telemetryObjects.splice(index, 1);
-        this.$set(this.ladTelemetryObjects, ladTable.key, telemetryObjects);
+        this.ladTelemetryObjects[ladTable.key] = telemetryObjects;
 
         this.shouldShowUnitsCheckbox();
       };
@@ -220,7 +220,7 @@ export default {
       }
 
       if (showUnitsCheckbox && this.headers.units === undefined) {
-        this.$set(this.headers, 'units', 'Units');
+        this.headers.units = 'Units';
       }
 
       if (!showUnitsCheckbox && this.headers?.units) {

src/plugins/LADTable/components/LadTableSet.vue

@@ -33,8 +33,8 @@
         </tr>
       </thead>
       <tbody>
-        <template v-for="ladTable in ladTableObjects">
-          <tr :key="ladTable.key" class="c-table__group-header js-lad-table-set__table-headers">
+        <template v-for="ladTable in ladTableObjects" :key="ladTable.key">
+          <tr class="c-table__group-header js-lad-table-set__table-headers">
             <td colspan="10">
               {{ ladTable.domainObject.name }}
             </td>
@@ -125,7 +125,7 @@ export default {
 
     this.stalenessSubscription = {};
   },
-  destroyed() {
+  unmounted() {
     this.ladTableConfiguration.off('change', this.handleConfigurationChange);
     this.composition.off('add', this.addLadTable);
     this.composition.off('remove', this.removeLadTable);
@@ -147,7 +147,7 @@ export default {
       ladTable.key = this.openmct.objects.makeKeyString(domainObject.identifier);
       ladTable.objectPath = [domainObject, ...this.objectPath];
 
-      this.$set(this.ladTelemetryObjects, ladTable.key, []);
+      this.ladTelemetryObjects[ladTable.key] = [];
       this.ladTableObjects.push(ladTable);
 
       let composition = this.openmct.composition.get(ladTable.domainObject);
@@ -201,7 +201,7 @@ export default {
         const telemetryObjects = this.ladTelemetryObjects[ladTable.key];
         telemetryObjects.push(telemetryObject);
 
-        this.$set(this.ladTelemetryObjects, ladTable.key, telemetryObjects);
+        this.ladTelemetryObjects[ladTable.key] = telemetryObjects;
 
         this.stalenessSubscription[combinedKey] = {};
         this.stalenessSubscription[combinedKey].stalenessUtils = new StalenessUtils(
@@ -236,7 +236,7 @@ export default {
         this.unwatchStaleness(combinedKey);
 
         telemetryObjects.splice(index, 1);
-        this.$set(this.ladTelemetryObjects, ladTable.key, telemetryObjects);
+        this.ladTelemetryObjects[ladTable.key] = telemetryObjects;
       };
     },
     unwatchStaleness(combinedKey) {

src/plugins/LADTable/pluginSpec.js

@@ -264,7 +264,7 @@ describe('The LAD Table', () => {
     });
 
     it('should show the name provided for the the telemetry producing object', () => {
-      const rowName = parent.querySelector(TABLE_BODY_FIRST_ROW_FIRST_DATA).innerText;
+      const rowName = parent.querySelector(TABLE_BODY_FIRST_ROW_FIRST_DATA).innerText.trim();
 
       const expectedName = mockObj.telemetry.name;
       expect(rowName).toBe(expectedName);

src/plugins/URLTimeSettingsSynchronizer/URLTimeSettingsSynchronizer.js

@@ -20,14 +20,20 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-const TIME_EVENTS = ['timeSystem', 'clock', 'clockOffsets'];
+import { FIXED_MODE_KEY, REALTIME_MODE_KEY, TIME_CONTEXT_EVENTS } from '../../api/time/constants';
+
 const SEARCH_MODE = 'tc.mode';
 const SEARCH_TIME_SYSTEM = 'tc.timeSystem';
 const SEARCH_START_BOUND = 'tc.startBound';
 const SEARCH_END_BOUND = 'tc.endBound';
 const SEARCH_START_DELTA = 'tc.startDelta';
 const SEARCH_END_DELTA = 'tc.endDelta';
-const MODE_FIXED = 'fixed';
+const TIME_EVENTS = [
+  TIME_CONTEXT_EVENTS.timeSystemChanged,
+  TIME_CONTEXT_EVENTS.modeChanged,
+  TIME_CONTEXT_EVENTS.clockChanged,
+  TIME_CONTEXT_EVENTS.clockOffsetsChanged
+];
 
 export default class URLTimeSettingsSynchronizer {
   constructor(openmct) {
@@ -67,7 +73,7 @@ export default class URLTimeSettingsSynchronizer {
   }
 
   updateTimeSettings() {
-    let timeParameters = this.parseParametersFromUrl();
+    const timeParameters = this.parseParametersFromUrl();
 
     if (this.areTimeParametersValid(timeParameters)) {
       this.setTimeApiFromUrl(timeParameters);
@@ -78,21 +84,18 @@ export default class URLTimeSettingsSynchronizer {
   }
 
   parseParametersFromUrl() {
-    let searchParams = this.openmct.router.getAllSearchParams();
-
-    let mode = searchParams.get(SEARCH_MODE);
-    let timeSystem = searchParams.get(SEARCH_TIME_SYSTEM);
-
-    let startBound = parseInt(searchParams.get(SEARCH_START_BOUND), 10);
-    let endBound = parseInt(searchParams.get(SEARCH_END_BOUND), 10);
-    let bounds = {
+    const searchParams = this.openmct.router.getAllSearchParams();
+    const mode = searchParams.get(SEARCH_MODE);
+    const timeSystem = searchParams.get(SEARCH_TIME_SYSTEM);
+    const startBound = parseInt(searchParams.get(SEARCH_START_BOUND), 10);
+    const endBound = parseInt(searchParams.get(SEARCH_END_BOUND), 10);
+    const bounds = {
       start: startBound,
       end: endBound
     };
-
-    let startOffset = parseInt(searchParams.get(SEARCH_START_DELTA), 10);
-    let endOffset = parseInt(searchParams.get(SEARCH_END_DELTA), 10);
-    let clockOffsets = {
+    const startOffset = parseInt(searchParams.get(SEARCH_START_DELTA), 10);
+    const endOffset = parseInt(searchParams.get(SEARCH_END_DELTA), 10);
+    const clockOffsets = {
       start: 0 - startOffset,
       end: endOffset
     };
@@ -106,30 +109,35 @@ export default class URLTimeSettingsSynchronizer {
   }
 
   setTimeApiFromUrl(timeParameters) {
-    if (timeParameters.mode === 'fixed') {
-      if (this.openmct.time.timeSystem().key !== timeParameters.timeSystem) {
-        this.openmct.time.timeSystem(timeParameters.timeSystem, timeParameters.bounds);
-      } else if (!this.areStartAndEndEqual(this.openmct.time.bounds(), timeParameters.bounds)) {
-        this.openmct.time.bounds(timeParameters.bounds);
-      }
+    const timeSystem = this.openmct.time.getTimeSystem();
 
-      if (this.openmct.time.clock()) {
-        this.openmct.time.stopClock();
+    if (timeParameters.mode === FIXED_MODE_KEY) {
+      // should update timesystem
+      if (timeSystem.key !== timeParameters.timeSystem) {
+        this.openmct.time.setTimeSystem(timeParameters.timeSystem, timeParameters.bounds);
+      }
+      if (!this.areStartAndEndEqual(this.openmct.time.getBounds(), timeParameters.bounds)) {
+        this.openmct.time.setMode(FIXED_MODE_KEY, timeParameters.bounds);
+      } else {
+        this.openmct.time.setMode(FIXED_MODE_KEY);
       }
     } else {
-      if (!this.openmct.time.clock() || this.openmct.time.clock().key !== timeParameters.mode) {
-        this.openmct.time.clock(timeParameters.mode, timeParameters.clockOffsets);
-      } else if (
-        !this.areStartAndEndEqual(this.openmct.time.clockOffsets(), timeParameters.clockOffsets)
-      ) {
-        this.openmct.time.clockOffsets(timeParameters.clockOffsets);
+      const clock = this.openmct.time.getClock();
+
+      if (clock?.key !== timeParameters.mode) {
+        this.openmct.time.setClock(timeParameters.mode);
       }
 
       if (
-        !this.openmct.time.timeSystem() ||
-        this.openmct.time.timeSystem().key !== timeParameters.timeSystem
+        !this.areStartAndEndEqual(this.openmct.time.getClockOffsets(), timeParameters.clockOffsets)
       ) {
-        this.openmct.time.timeSystem(timeParameters.timeSystem);
+        this.openmct.time.setMode(REALTIME_MODE_KEY, timeParameters.clockOffsets);
+      } else {
+        this.openmct.time.setMode(REALTIME_MODE_KEY);
+      }
+
+      if (timeSystem?.key !== timeParameters.timeSystem) {
+        this.openmct.time.setTimeSystem(timeParameters.timeSystem);
       }
     }
   }
@@ -141,13 +149,14 @@ export default class URLTimeSettingsSynchronizer {
   }
 
   setUrlFromTimeApi() {
-    let searchParams = this.openmct.router.getAllSearchParams();
-    let clock = this.openmct.time.clock();
-    let bounds = this.openmct.time.bounds();
-    let clockOffsets = this.openmct.time.clockOffsets();
+    const searchParams = this.openmct.router.getAllSearchParams();
+    const clock = this.openmct.time.getClock();
+    const mode = this.openmct.time.getMode();
+    const bounds = this.openmct.time.getBounds();
+    const clockOffsets = this.openmct.time.getClockOffsets();
 
-    if (clock === undefined) {
-      searchParams.set(SEARCH_MODE, MODE_FIXED);
+    if (mode === FIXED_MODE_KEY) {
+      searchParams.set(SEARCH_MODE, FIXED_MODE_KEY);
       searchParams.set(SEARCH_START_BOUND, bounds.start);
       searchParams.set(SEARCH_END_BOUND, bounds.end);
 
@@ -168,8 +177,8 @@ export default class URLTimeSettingsSynchronizer {
       searchParams.delete(SEARCH_END_BOUND);
     }
 
-    searchParams.set(SEARCH_TIME_SYSTEM, this.openmct.time.timeSystem().key);
-    this.openmct.router.setAllSearchParams(searchParams);
+    searchParams.set(SEARCH_TIME_SYSTEM, this.openmct.time.getTimeSystem().key);
+    this.openmct.router.updateParams(searchParams);
   }
 
   areTimeParametersValid(timeParameters) {
@@ -179,7 +188,7 @@ export default class URLTimeSettingsSynchronizer {
       this.isModeValid(timeParameters.mode) &&
       this.isTimeSystemValid(timeParameters.timeSystem)
     ) {
-      if (timeParameters.mode === 'fixed') {
+      if (timeParameters.mode === FIXED_MODE_KEY) {
         isValid = this.areStartAndEndValid(timeParameters.bounds);
       } else {
         isValid = this.areStartAndEndValid(timeParameters.clockOffsets);
@@ -203,8 +212,9 @@ export default class URLTimeSettingsSynchronizer {
 
   isTimeSystemValid(timeSystem) {
     let isValid = timeSystem !== undefined;
+
     if (isValid) {
-      let timeSystemObject = this.openmct.time.timeSystems.get(timeSystem);
+      const timeSystemObject = this.openmct.time.timeSystems.get(timeSystem);
       isValid = timeSystemObject !== undefined;
     }
 
@@ -218,18 +228,17 @@ export default class URLTimeSettingsSynchronizer {
       isValid = true;
     }
 
-    if (isValid) {
-      if (mode.toLowerCase() === MODE_FIXED) {
-        isValid = true;
-      } else {
-        isValid = this.openmct.time.clocks.get(mode) !== undefined;
-      }
+    if (
+      isValid &&
+      (mode.toLowerCase() === FIXED_MODE_KEY || this.openmct.time.clocks.get(mode) !== undefined)
+    ) {
+      isValid = true;
     }
 
     return isValid;
   }
 
   areStartAndEndEqual(firstBounds, secondBounds) {
-    return firstBounds.start === secondBounds.start && firstBounds.end === secondBounds.end;
+    return firstBounds?.start === secondBounds.start && firstBounds?.end === secondBounds.end;
   }
 }

src/plugins/URLTimeSettingsSynchronizer/pluginSpec.js

@@ -40,7 +40,6 @@ describe('The URLTimeSettingsSynchronizer', () => {
   });
 
   afterEach(() => {
-    openmct.time.stopClock();
     openmct.router.removeListener('change:hash', resolveFunction);
 
     appHolder = undefined;

src/plugins/autoflow/AutoflowTabularView.js

@@ -84,7 +84,7 @@ define([
         rowCount: 'reflow'
       },
       template: autoflowTemplate,
-      destroyed: function () {
+      unmounted: function () {
         controller.destroy();
 
         if (interval) {
@@ -109,7 +109,7 @@ define([
     });
   }
 
-  AutoflowTabularView.prototype = Object.create(VueView.prototype);
+  AutoflowTabularView.prototype = Object.create(VueView.default.prototype);
 
   return AutoflowTabularView;
 });

src/plugins/autoflow/VueView.js

@@ -20,15 +20,15 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define(['vue'], function (Vue) {
-  function VueView(options) {
-    const vm = new Vue(options);
+import mount from 'utils/mount';
+export default function () {
+  return function VueView(options) {
+    const { vNode, destroy } = mount(options);
+
     this.show = function (container) {
-      container.appendChild(vm.$mount().$el);
+      container.appendChild(vNode.el);
     };
 
-    this.destroy = vm.$destroy.bind(vm);
-  }
-
-  return VueView;
-});
+    this.destroy = destroy;
+  };
+}

src/plugins/charts/bar/BarGraphPlot.vue

@@ -93,7 +93,7 @@ export default {
     });
     this.registerListeners();
   },
-  beforeDestroy() {
+  beforeUnmount() {
     if (this.plotResizeObserver) {
       this.plotResizeObserver.unobserve(this.$refs.plotWrapper);
       clearTimeout(this.resizeTimer);

src/plugins/charts/bar/BarGraphView.vue

@@ -83,7 +83,7 @@ export default {
       this.refreshData
     );
   },
-  beforeDestroy() {
+  beforeUnmount() {
     this.stopFollowingTimeContext();
 
     this.removeAllSubscriptions();

src/plugins/charts/bar/BarGraphViewProvider.js

@@ -22,7 +22,7 @@
 
 import BarGraphView from './BarGraphView.vue';
 import { BAR_GRAPH_KEY, BAR_GRAPH_VIEW } from './BarGraphConstants';
-import Vue from 'vue';
+import mount from 'utils/mount';
 
 export default function BarGraphViewProvider(openmct) {
   function isCompactView(objectPath) {
@@ -44,34 +44,43 @@ export default function BarGraphViewProvider(openmct) {
     },
 
     view: function (domainObject, objectPath) {
-      let component;
+      let _destroy = null;
+      let component = null;
 
       return {
         show: function (element) {
           let isCompact = isCompactView(objectPath);
-          component = new Vue({
-            el: element,
-            components: {
-              BarGraphView
+
+          const { vNode, destroy } = mount(
+            {
+              el: element,
+              components: {
+                BarGraphView
+              },
+              provide: {
+                openmct,
+                domainObject,
+                path: objectPath
+              },
+              data() {
+                return {
+                  options: {
+                    compact: isCompact
+                  }
+                };
+              },
+              template: '<bar-graph-view ref="graphComponent" :options="options"></bar-graph-view>'
             },
-            provide: {
-              openmct,
-              domainObject,
-              path: objectPath
-            },
-            data() {
-              return {
-                options: {
-                  compact: isCompact
-                }
-              };
-            },
-            template: '<bar-graph-view ref="graphComponent" :options="options"></bar-graph-view>'
-          });
+            {
+              app: openmct.app,
+              element
+            }
+          );
+          _destroy = destroy;
+          component = vNode.componentInstance;
         },
         destroy: function () {
-          component.$destroy();
-          component = undefined;
+          _destroy();
         },
         onClearData() {
           component.$refs.graphComponent.refreshData();

src/plugins/charts/bar/inspector/BarGraphInspectorViewProvider.js

@@ -1,6 +1,6 @@
 import { BAR_GRAPH_INSPECTOR_KEY, BAR_GRAPH_KEY } from '../BarGraphConstants';
-import Vue from 'vue';
 import BarGraphOptions from './BarGraphOptions.vue';
+import mount from 'utils/mount';
 
 export default function BarGraphInspectorViewProvider(openmct) {
   return {
@@ -16,29 +16,35 @@ export default function BarGraphInspectorViewProvider(openmct) {
       return object && object.type === BAR_GRAPH_KEY;
     },
     view: function (selection) {
-      let component;
+      let _destroy = null;
 
       return {
         show: function (element) {
-          component = new Vue({
-            el: element,
-            components: {
-              BarGraphOptions
+          const { destroy } = mount(
+            {
+              el: element,
+              components: {
+                BarGraphOptions
+              },
+              provide: {
+                openmct,
+                domainObject: selection[0][0].context.item
+              },
+              template: '<bar-graph-options></bar-graph-options>'
             },
-            provide: {
-              openmct,
-              domainObject: selection[0][0].context.item
-            },
-            template: '<bar-graph-options></bar-graph-options>'
-          });
+            {
+              app: openmct.app,
+              element
+            }
+          );
+          _destroy = destroy;
         },
         priority: function () {
           return openmct.priority.HIGH + 1;
         },
         destroy: function () {
-          if (component) {
-            component.$destroy();
-            component = undefined;
+          if (_destroy) {
+            _destroy();
           }
         }
       };

src/plugins/charts/bar/inspector/BarGraphOptions.vue

@@ -167,7 +167,7 @@ export default {
     this.registerListeners();
     this.composition.load();
   },
-  beforeDestroy() {
+  beforeUnmount() {
     this.openmct.editor.off('isEditing', this.setEditState);
     this.stopListening();
   },
@@ -192,7 +192,7 @@ export default {
       }
     },
     addSeries(series, index) {
-      this.$set(this.plotSeries, this.plotSeries.length, series);
+      this.plotSeries.push(series);
       this.setupOptions();
     },
     removeSeries(seriesIdentifier) {

src/plugins/charts/bar/inspector/SeriesOptions.vue

@@ -115,7 +115,7 @@ export default {
       this.initColorAndName
     );
   },
-  beforeDestroy() {
+  beforeUnmount() {
     if (this.removeBarStylesListener) {
       this.removeBarStylesListener();
     }

src/plugins/charts/scatter/ScatterPlotView.vue

@@ -77,7 +77,7 @@ export default {
       this.reloadTelemetry
     );
   },
-  beforeDestroy() {
+  beforeUnmount() {
     this.stopFollowingTimeContext();
 
     if (!this.composition) {