[Telemetry Tables] Ability to hide manually added Name column (#8042)

* add name header so it shows in hide columns options

.circleci/config.yml

@@ -5,11 +5,11 @@ orbs:
 executors:
   pw-focal-development:
     docker:
-      - image: mcr.microsoft.com/playwright:v1.45.2-focal
+      - image: mcr.microsoft.com/playwright:v1.48.1-focal
     environment:
       NODE_ENV: development # Needed to ensure 'dist' folder created and devDependencies installed
-      PERCY_POSTINSTALL_BROWSER: "true" # Needed to store the percy browser in cache deps
-      PERCY_LOGLEVEL: "debug" # Enable DEBUG level logging for Percy (Issue: https://github.com/nasa/openmct/issues/5742)
+      PERCY_POSTINSTALL_BROWSER: 'true' # Needed to store the percy browser in cache deps
+      PERCY_LOGLEVEL: 'debug' # Enable DEBUG level logging for Percy (Issue: https://github.com/nasa/openmct/issues/5742)
       PERCY_PARALLEL_TOTAL: 2
   ubuntu:
     machine:
@@ -17,7 +17,7 @@ executors:
       docker_layer_caching: true
 commands:
   build_and_install:
-    description: "All steps used to build and install."
+    description: 'All steps used to build and install.'
     parameters:
       node-version:
         type: string
@@ -27,7 +27,7 @@ commands:
           node-version: << parameters.node-version >>
       - node/install-packages
   generate_and_store_version_and_filesystem_artifacts:
-    description: "Track important packages and files"
+    description: 'Track important packages and files'
     steps:
       - run: |
           [[ $EUID -ne 0 ]] && (sudo mkdir -p /tmp/artifacts && sudo chmod 777 /tmp/artifacts) || (mkdir -p /tmp/artifacts && chmod 777 /tmp/artifacts)
@@ -37,14 +37,45 @@ commands:
           ls -latR >> /tmp/artifacts/dir.txt
       - store_artifacts:
           path: /tmp/artifacts/
+  download_verify_codecov_cli:
+    description: 'Download and verify Codecov CLI'
+    steps:
+      - run:
+          name: Download and verify Codecov CLI
+          command: |
+            # Download Codecov CLI
+            curl -Os https://cli.codecov.io/latest/linux/codecov
+
+            # Import Codecov's GPG key
+            curl https://keybase.io/codecovsecurity/pgp_keys.asc | gpg --no-default-keyring --keyring trustedkeys.gpg --import
+
+            # Download and verify the SHA256SUM and its signature
+            curl -Os https://cli.codecov.io/latest/linux/codecov.SHA256SUM
+            curl -Os https://cli.codecov.io/latest/linux/codecov.SHA256SUM.sig
+            gpgv codecov.SHA256SUM.sig codecov.SHA256SUM
+
+            # Verify the checksum
+            shasum -a 256 -c codecov.SHA256SUM
+
+            # Make the codecov executable
+            [[ $EUID -ne 0 ]] && sudo chmod +x codecov || chmod +x codecov
+            ./codecov --help
   generate_e2e_code_cov_report:
-    description: "Generate e2e code coverage artifacts and publish to codecov.io. Needed to that we can ignore the exit code status of the npm run test"
+    description: 'Generate e2e code coverage artifacts and publish to codecov.io. Needed to that we can ignore the exit code status of the npm run test'
     parameters:
       suite:
         type: string
     steps:
       - run: npm run cov:e2e:report || true
-      - run: npm run cov:e2e:<<parameters.suite>>:publish
+      - download_verify_codecov_cli
+      - run:
+          name: Upload coverage report to Codecov
+          command: |
+            ./codecov --verbose upload-process --disable-search \
+              -t $CODECOV_TOKEN \
+              -n 'e2e-<<parameters.suite>>'-${CIRCLE_WORKFLOW_ID} \
+              -F e2e-<<parameters.suite>> \
+              -f ./coverage/e2e/lcov.info
 jobs:
   npm-audit:
     parameters:
@@ -81,7 +112,15 @@ jobs:
             mkdir -p dist/reports/tests/
             TESTFILES=$(circleci tests glob "src/**/*Spec.js")
             echo "$TESTFILES" | circleci tests run --command="xargs npm run test" --verbose
-      - run: npm run cov:unit:publish
+      - download_verify_codecov_cli
+      - run:
+          name: Upload coverage report to Codecov
+          command: |
+            ./codecov --verbose upload-process --disable-search \
+              -t $CODECOV_TOKEN \
+              -n 'unit-test'-${CIRCLE_WORKFLOW_ID} \
+              -F unit \
+              -f ./coverage/unit/lcov.info
       - store_test_results:
           path: dist/reports/tests/
       - store_artifacts:
@@ -96,13 +135,13 @@ jobs:
       suite: #ci or full
         type: string
     executor: pw-focal-development
-    parallelism: 7
+    parallelism: 8
     steps:
       - build_and_install:
           node-version: lts/hydrogen
       - when: #Only install chrome-beta when running the 'full' suite to save $$$
           condition:
-            equal: ["full", <<parameters.suite>>]
+            equal: ['full', <<parameters.suite>>]
           steps:
             - run: npx playwright install chrome-beta
       - run:
@@ -159,7 +198,7 @@ jobs:
     steps:
       - build_and_install:
           node-version: lts/hydrogen
-      - run: npx playwright@1.45.2 install #Necessary for bare ubuntu machine
+      - run: npx playwright@1.48.1 install #Necessary for bare ubuntu machine
       - run: |
           export $(cat src/plugins/persistence/couch/.env.ci | xargs)
           docker compose -f src/plugins/persistence/couch/couchdb-compose.yaml up --detach
@@ -247,8 +286,8 @@ workflows:
   overall-circleci-commit-status: #These jobs run on every commit
     jobs:
       - lint:
-          name: node20-lint
-          node-version: lts/iron
+          name: node22-lint
+          node-version: '22'
       - unit-test:
           name: node18-chrome
           node-version: lts/hydrogen
@@ -265,8 +304,8 @@ workflows:
   the-nightly: #These jobs do not run on PRs, but against master at night
     jobs:
       - unit-test:
-          name: node20-chrome-nightly
-          node-version: lts/iron
+          name: node22-chrome-nightly
+          node-version: '22'
       - unit-test:
           name: node18-chrome
           node-version: lts/hydrogen
@@ -284,7 +323,7 @@ workflows:
       - e2e-couchdb
     triggers:
       - schedule:
-          cron: "0 0 * * *"
+          cron: '0 0 * * *'
           filters:
             branches:
               only:

.cspell.json

@@ -483,7 +483,9 @@
     "countup",
     "darkmatter",
     "Undeletes",
-    "SSSZ"
+    "SSSZ",
+    "pageerror",
+    "annotatable"
   ],
   "dictionaries": ["npm", "softwareTerms", "node", "html", "css", "bash", "en_US", "en-gb", "misc"],
   "ignorePaths": [

.github/workflows/e2e-couchdb.yml

@@ -37,7 +37,7 @@ jobs:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
 
-      - run: npx playwright@1.45.2 install
+      - run: npx playwright@1.48.1 install
 
       - name: Start CouchDB Docker Container and Init with Setup Scripts
         run: |
@@ -52,22 +52,33 @@ jobs:
           COMMIT_INFO_SHA: ${{github.event.pull_request.head.sha }}
         run: npm run test:e2e:couchdb
 
+      - name: Generate Code Coverage Report
+        run: npm run cov:e2e:report
+
       - name: Publish Results to Codecov.io
-        env:
-          SUPER_SECRET: ${{ secrets.CODECOV_TOKEN }}
-        run: npm run cov:e2e:full:publish
+        uses: codecov/codecov-action@v5
+        with:
+          token: ${{ secrets.CODECOV_TOKEN }}
+          files: ./coverage/e2e/lcov.info
+          flags: e2e-full
+          fail_ci_if_error: true
+          verbose: true
 
       - name: Archive test results
         if: success() || failure()
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
+          name: e2e-couchdb-test-results
           path: test-results
+          overwrite: true
 
       - name: Archive html test results
         if: success() || failure()
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
+          name: e2e-couchdb-html-test-results
           path: html-test-results
+          overwrite: true
 
       - name: Remove pr:e2e:couchdb label (if present)
         if: always()

.github/workflows/e2e-flakefinder.yml

@@ -30,7 +30,7 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-node-
 
-      - run: npx playwright@1.45.2 install
+      - run: npx playwright@1.48.1 install
       - run: npm ci --no-audit --progress=false
 
       - name: Run E2E Tests (Repeated 10 Times)
@@ -38,9 +38,11 @@ jobs:
 
       - name: Archive test results
         if: success() || failure()
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
+          name: e2e-flakefinder-test-results
           path: test-results
+          overwrite: true
 
       - name: Remove pr:e2e:flakefinder label (if present)
         if: always()

.github/workflows/e2e-perf.yml

@@ -28,16 +28,18 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-node-
 
-      - run: npx playwright@1.45.2 install
+      - run: npx playwright@1.48.1 install
       - run: npm ci --no-audit --progress=false
       - run: npm run test:perf:localhost
       - run: npm run test:perf:contract
       - run: npm run test:perf:memory
       - name: Archive test results
         if: success() || failure()
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
+          name: e2e-perf-test-results
           path: test-results
+          overwrite: true
 
       - name: Remove pr:e2e:perf label (if present)
         if: always()

.github/workflows/e2e-pr.yml

@@ -33,7 +33,7 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-node-
 
-      - run: npx playwright@1.45.2 install
+      - run: npx playwright@1.47.2 install
       - run: npx playwright install chrome-beta
       - run: npm ci --no-audit --progress=false
       - run: npm run test:e2e:full -- --max-failures=40
@@ -45,9 +45,11 @@ jobs:
           npm run cov:e2e:full:publish
       - name: Archive test results
         if: success() || failure()
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
+          name: e2e-pr-test-results
           path: test-results
+          overwrite: true
 
       - name: Remove pr:e2e label (if present)
         if: always()

API.md

@@ -31,6 +31,10 @@
         - [`latest` request strategy](#latest-request-strategy)
         - [`minmax` request strategy](#minmax-request-strategy)
       - [Telemetry Formats](#telemetry-formats)
+        - [Built-in Formats](#built-in-formats)
+          - [**Number Format (default):**](#number-format-default)
+          - [**String Format**](#string-format)
+          - [**Enum Format**](#enum-format)
         - [Registering Formats](#registering-formats)
       - [Telemetry Data](#telemetry-data)
         - [Telemetry Datums](#telemetry-datums)
@@ -59,6 +63,12 @@
     - [Custom Indicators](#custom-indicators)
   - [Priority API](#priority-api)
     - [Priority Types](#priority-types)
+  - [User API](#user-api)
+    - [Example](#example)
+  - [Visibility-Based Rendering in View Providers](#visibility-based-rendering-in-view-providers)
+    - [Overview](#overview)
+    - [Implementing Visibility-Based Rendering](#implementing-visibility-based-rendering)
+    - [Example](#example-1)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
@@ -1301,9 +1311,11 @@ Open MCT provides some built-in priority values that can be used in the applicat
 
 Currently, the Open MCT Priority API provides (type: numeric value):
 
+- HIGHEST: Infinity
 - HIGH: 1000
 - Default: 0
 - LOW: -1000
+- LOWEST: -Infinity
 
 View provider Example:
 

codecov.yml

@@ -1,6 +1,10 @@
 codecov:
   require_ci_to_pass: false #This setting will update the bot regardless of whether or not tests pass
 
+# Disabling annotations for now. They are incorrectly labelling lines as lacking coverage when they are in fact covered by tests.
+github_checks:
+  annotations: false
+
 coverage:
   status:
     project:

e2e/.eslintrc.cjs

@@ -2,7 +2,6 @@
 module.exports = {
   extends: ['plugin:playwright/recommended'],
   rules: {
-    'playwright/max-nested-describe': ['error', { max: 1 }],
     'playwright/expect-expect': 'off'
   },
   overrides: [
@@ -27,6 +26,12 @@ module.exports = {
       rules: {
         'playwright/no-raw-locators': 'off'
       }
+    },
+    {
+      files: ['**/*.visual.spec.js'],
+      rules: {
+        'playwright/no-networkidle': 'off' //https://github.com/nasa/openmct/issues/7549
+      }
     }
   ]
 };

e2e/README.md

@@ -469,6 +469,7 @@ By adhering to this principle, we can create tests that are both robust and refl
     //Select from object
     await percySnapshot(page, `object selected (theme: ${theme})`)
     ```
+8. **Use `networkidle` to wait for network requests to complete**: This is necessary to ensure that all network requests have completed before taking a snapshot. This ensures that icons are loaded and other assets are available. https://github.com/nasa/openmct/issues/7549
 
 #### How to write a great network test
 

e2e/appActions.js

@@ -68,7 +68,11 @@ import { v4 as genUuid } from 'uuid';
  * @param {string | import('../src/api/objects/ObjectAPI').Identifier} [options.parent='mine'] - The Identifier or uuid of the parent object. Defaults to 'mine' folder
  * @returns {Promise<CreatedObjectInfo>} An object containing information about the newly created domain object.
  */
-async function createDomainObjectWithDefaults(page, { type, name, parent = 'mine' }) {
+async function createDomainObjectWithDefaults(
+  page,
+  { type, name, parent = 'mine' },
+  additionalOptions = {}
+) {
   if (!name) {
     name = `${type}:${genUuid()}`;
   }
@@ -89,6 +93,13 @@ async function createDomainObjectWithDefaults(page, { type, name, parent = 'mine
   await page.getByLabel('Title', { exact: true }).fill('');
   await page.getByLabel('Title', { exact: true }).fill(name);
 
+  if (additionalOptions) {
+    for (const [key, value] of Object.entries(additionalOptions)) {
+      // eslint-disable-next-line playwright/no-raw-locators
+      await page.locator(`#form-${key}`).fill(value);
+    }
+  }
+
   if (page.testNotes) {
     // Fill the "Notes" section with information about the
     // currently running test and its project.
@@ -105,7 +116,7 @@ async function createDomainObjectWithDefaults(page, { type, name, parent = 'mine
 
   if (await _isInEditMode(page, uuid)) {
     // Save (exit edit mode)
-    await page.getByRole('button', { name: 'Save' }).click();
+    await page.getByRole('button', { name: 'Save', exact: true }).click();
     await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
   }
 
@@ -227,6 +238,37 @@ async function createExampleTelemetryObject(page, parent = 'mine') {
   };
 }
 
+/**
+ * Create a Stable State Telemetry Object (State Generator) for use in visual tests
+ * and tests against plotting telemetry (e.g. logPlot tests). This will change state every 2 seconds.
+ * @param {import('@playwright/test').Page} page
+ * @param {string | import('../src/api/objects/ObjectAPI').Identifier} [parent] the uuid or identifier of the parent object. Defaults to 'mine'
+ * @returns {Promise<CreatedObjectInfo>} An object containing information about the telemetry object.
+ */
+async function createStableStateTelemetry(page, parent = 'mine') {
+  const parentUrl = await getHashUrlToDomainObject(page, parent);
+
+  await page.goto(`${parentUrl}`);
+  const createdObject = await createDomainObjectWithDefaults(page, {
+    type: 'State Generator',
+    name: 'Stable State Generator'
+  });
+  // edit the state generator to have a 1 second update rate
+  await page.getByLabel('More actions').click();
+  await page.getByRole('menuitem', { name: 'Edit Properties...' }).click();
+  await page.getByLabel('State Duration (seconds)', { exact: true }).fill('2');
+  await page.getByLabel('Save').click();
+  // Wait until the URL is updated
+  const uuid = await getFocusedObjectUuid(page);
+  const url = await getHashUrlToDomainObject(page, uuid);
+
+  return {
+    name: createdObject.name,
+    uuid,
+    url
+  };
+}
+
 /**
  * Navigates directly to a given object url, in fixed time mode, with the given start and end bounds. Note: does not set
  * default view type.
@@ -479,6 +521,10 @@ async function setTimeConductorBounds(page, { submitChanges = true, ...bounds })
   // Open the time conductor popup
   await page.getByRole('button', { name: 'Time Conductor Mode', exact: true }).click();
 
+  // FIXME: https://github.com/nasa/openmct/pull/7818
+  // eslint-disable-next-line playwright/no-wait-for-timeout
+  await page.waitForTimeout(500);
+
   if (startDate) {
     await page.getByLabel('Start date').fill(startDate);
   }
@@ -629,15 +675,51 @@ async function getCanvasPixels(page, canvasSelector) {
   );
 }
 
+/**
+ * Search for telemetry and link it to an object. objectName should come from the domainObject.name function.
+ * @param {import('@playwright/test').Page} page
+ * @param {string} parameterName
+ * @param {string} objectName
+ */
+async function linkParameterToObject(page, parameterName, objectName) {
+  await page.getByRole('searchbox', { name: 'Search Input' }).click();
+  await page.getByRole('searchbox', { name: 'Search Input' }).fill(parameterName);
+  await page.getByLabel('Object Results').getByText(parameterName).click();
+  await page.getByLabel('More actions').click();
+  await page.getByLabel('Create Link').click();
+  await page.getByLabel('Modal Overlay').getByLabel('Search Input').click();
+  await page.getByLabel('Modal Overlay').getByLabel('Search Input').fill(objectName);
+  await page.getByLabel('Modal Overlay').getByLabel(`Navigate to ${objectName}`).click();
+  await page.getByLabel('Save').click();
+}
+
+/**
+ * Rename the currently viewed `domainObject` from the browse bar.
+ *
+ * @param {import('@playwright/test').Page} page
+ * @param {string} newName
+ */
+async function renameCurrentObjectFromBrowseBar(page, newName) {
+  const nameInput = page.getByLabel('Browse bar object name');
+  await nameInput.click();
+  await nameInput.fill('');
+  await nameInput.fill(newName);
+  // Click the browse bar container to save changes
+  await page.getByLabel('Browse bar', { exact: true }).click();
+}
+
 export {
   createDomainObjectWithDefaults,
   createExampleTelemetryObject,
   createNotification,
   createPlanFromJSON,
+  createStableStateTelemetry,
   expandEntireTree,
   getCanvasPixels,
+  linkParameterToObject,
   navigateToObjectWithFixedTimeBounds,
   navigateToObjectWithRealTime,
+  renameCurrentObjectFromBrowseBar,
   setEndOffset,
   setFixedIndependentTimeConductorBounds,
   setFixedTimeMode,

e2e/baseFixtures.js

@@ -103,25 +103,40 @@ const extendedTest = test.extend({
    * Default: `true`
    */
   failOnConsoleError: [true, { option: true }],
+  ignore404s: [[], { option: true }],
   /**
    * Extends the base page class to enable console log error detection.
    * @see {@link https://github.com/microsoft/playwright/discussions/11690 Github Discussion}
    */
-  page: async ({ page, failOnConsoleError }, use) => {
+  page: async ({ page, failOnConsoleError, ignore404s }, use) => {
     // Capture any console errors during test execution
-    const messages = [];
+    let messages = [];
     page.on('console', (msg) => messages.push(msg));
 
     await use(page);
 
+    if (ignore404s.length > 0) {
+      messages = messages.filter((msg) => {
+        let keep = true;
+
+        if (msg.text().match(/404 \((Object )?Not Found\)/) !== null) {
+          keep = ignore404s.every((ignoreRule) => {
+            return msg.location().url.match(ignoreRule) === null;
+          });
+        }
+
+        return keep;
+      });
+    }
+
     // Assert against console errors during teardown
     if (failOnConsoleError) {
-      messages.forEach((msg) =>
+      messages.forEach((msg) => {
         // eslint-disable-next-line playwright/no-standalone-expect
         expect
           .soft(msg.type(), `Console error detected: ${_consoleMessageToString(msg)}`)
-          .not.toEqual('error')
-      );
+          .not.toEqual('error');
+      });
     }
   }
 });

e2e/helper/faultUtils.js

@@ -25,6 +25,7 @@ import { expect } from '../pluginFixtures.js';
 
 /**
  * @param {import('@playwright/test').Page} page
+ * @returns {Promise<void>}
  */
 export async function navigateToFaultManagementWithExample(page) {
   await page.addInitScript({
@@ -36,6 +37,7 @@ export async function navigateToFaultManagementWithExample(page) {
 
 /**
  * @param {import('@playwright/test').Page} page
+ * @returns {Promise<void>}
  */
 export async function navigateToFaultManagementWithStaticExample(page) {
   await page.addInitScript({
@@ -47,6 +49,7 @@ export async function navigateToFaultManagementWithStaticExample(page) {
 
 /**
  * @param {import('@playwright/test').Page} page
+ * @returns {Promise<void>}
  */
 export async function navigateToFaultManagementWithoutExample(page) {
   await page.addInitScript({
@@ -58,6 +61,7 @@ export async function navigateToFaultManagementWithoutExample(page) {
 
 /**
  * @param {import('@playwright/test').Page} page
+ * @returns {Promise<void>}
  */
 async function navigateToFaultItemInTree(page) {
   await page.goto('./', { waitUntil: 'domcontentloaded' });
@@ -77,6 +81,8 @@ async function navigateToFaultItemInTree(page) {
 
 /**
  * @param {import('@playwright/test').Page} page
+ * @param {number} rowNumber
+ * @returns {Promise<void>}
  */
 export async function acknowledgeFault(page, rowNumber) {
   await openFaultRowMenu(page, rowNumber);
@@ -86,6 +92,8 @@ export async function acknowledgeFault(page, rowNumber) {
 
 /**
  * @param {import('@playwright/test').Page} page
+ * @param {...number} nums
+ * @returns {Promise<void>}
  */
 export async function shelveMultipleFaults(page, ...nums) {
   const selectRows = nums.map((num) => {
@@ -99,6 +107,8 @@ export async function shelveMultipleFaults(page, ...nums) {
 
 /**
  * @param {import('@playwright/test').Page} page
+ * @param {...number} nums
+ * @returns {Promise<void>}
  */
 export async function acknowledgeMultipleFaults(page, ...nums) {
   const selectRows = nums.map((num) => {
@@ -106,50 +116,43 @@ export async function acknowledgeMultipleFaults(page, ...nums) {
   });
   await Promise.all(selectRows);
 
-  await page.locator('button:has-text("Acknowledge")').click();
+  await page.getByLabel('Acknowledge selected faults').click();
   await page.getByLabel('Save').click();
 }
 
 /**
  * @param {import('@playwright/test').Page} page
+ * @param {number} rowNumber
+ * @returns {Promise<void>}
  */
 export async function shelveFault(page, rowNumber) {
   await openFaultRowMenu(page, rowNumber);
-  await page.locator('.c-menu >> text="Shelve"').click();
-  // Click [aria-label="Save"]
+  await page.getByLabel('Shelve', { exact: true }).click();
   await page.getByLabel('Save').click();
 }
 
 /**
  * @param {import('@playwright/test').Page} page
- */
-export async function changeViewTo(page, view) {
-  await page.locator('.c-fault-mgmt__search-row select').first().selectOption(view);
-}
-
-/**
- * @param {import('@playwright/test').Page} page
+ * @param {'severity' | 'newest-first' | 'oldest-first'} sort
+ * @returns {Promise<void>}
  */
 export async function sortFaultsBy(page, sort) {
-  await page.locator('.c-fault-mgmt__list-header-sortButton select').selectOption(sort);
+  await page.getByTitle('Sort By').getByRole('combobox').selectOption(sort);
 }
 
 /**
  * @param {import('@playwright/test').Page} page
+ * @param {'acknowledged' | 'shelved' | 'standard view'} view
+ * @returns {Promise<void>}
  */
-export async function enterSearchTerm(page, term) {
-  await page.locator('.c-fault-mgmt-search [aria-label="Search Input"]').fill(term);
-}
-
-/**
- * @param {import('@playwright/test').Page} page
- */
-export async function clearSearch(page) {
-  await enterSearchTerm(page, '');
+export async function changeViewTo(page, view) {
+  await page.getByTitle('View Filter').getByRole('combobox').selectOption(view);
 }
 
 /**
  * @param {import('@playwright/test').Page} page
+ * @param {number} rowNumber
+ * @returns {Promise<void>}
  */
 export async function selectFaultItem(page, rowNumber) {
   await page
@@ -165,71 +168,37 @@ export async function selectFaultItem(page, rowNumber) {
 
 /**
  * @param {import('@playwright/test').Page} page
- */
-export async function getHighestSeverity(page) {
-  const criticalCount = await page.locator('[title=CRITICAL]').count();
-  const warningCount = await page.locator('[title=WARNING]').count();
-
-  if (criticalCount > 0) {
-    return 'CRITICAL';
-  } else if (warningCount > 0) {
-    return 'WARNING';
-  }
-
-  return 'WATCH';
-}
-
-/**
- * @param {import('@playwright/test').Page} page
- */
-export async function getLowestSeverity(page) {
-  const warningCount = await page.locator('[title=WARNING]').count();
-  const watchCount = await page.locator('[title=WATCH]').count();
-
-  if (watchCount > 0) {
-    return 'WATCH';
-  } else if (warningCount > 0) {
-    return 'WARNING';
-  }
-
-  return 'CRITICAL';
-}
-
-/**
- * @param {import('@playwright/test').Page} page
- */
-export async function getFaultResultCount(page) {
-  const count = await page.locator('.c-faults-list-view-item-body > .c-fault-mgmt__list').count();
-
-  return count;
-}
-
-/**
- * @param {import('@playwright/test').Page} page
+ * @param {number} rowNumber
+ * @returns {import('@playwright/test').Locator}
  */
 export function getFault(page, rowNumber) {
-  const fault = page.locator(
-    `.c-faults-list-view-item-body > .c-fault-mgmt__list >> nth=${rowNumber - 1}`
-  );
+  const fault = page.getByLabel('Fault triggered at').nth(rowNumber - 1);
 
   return fault;
 }
 
 /**
  * @param {import('@playwright/test').Page} page
+ * @param {string} name
+ * @returns {import('@playwright/test').Locator}
  */
 export function getFaultByName(page, name) {
-  const fault = page.locator(`.c-fault-mgmt__list-faultname:has-text("${name}")`);
+  const fault = page.getByLabel('Fault triggered at').filter({
+    hasText: name
+  });
 
   return fault;
 }
 
 /**
  * @param {import('@playwright/test').Page} page
+ * @param {number} rowNumber
+ * @returns {Promise<string>}
  */
 export async function getFaultName(page, rowNumber) {
   const faultName = await page
-    .locator(`.c-fault-mgmt__list-faultname >> nth=${rowNumber - 1}`)
+    .getByLabel('Fault name', { exact: true })
+    .nth(rowNumber - 1)
     .textContent();
 
   return faultName;
@@ -237,21 +206,13 @@ export async function getFaultName(page, rowNumber) {
 
 /**
  * @param {import('@playwright/test').Page} page
- */
-export async function getFaultSeverity(page, rowNumber) {
-  const faultSeverity = await page
-    .locator(`.c-faults-list-view-item-body .c-fault-mgmt__list-severity >> nth=${rowNumber - 1}`)
-    .getAttribute('title');
-
-  return faultSeverity;
-}
-
-/**
- * @param {import('@playwright/test').Page} page
+ * @param {number} rowNumber
+ * @returns {Promise<string>}
  */
 export async function getFaultNamespace(page, rowNumber) {
   const faultNamespace = await page
-    .locator(`.c-fault-mgmt__list-path >> nth=${rowNumber - 1}`)
+    .getByLabel('Fault namespace')
+    .nth(rowNumber - 1)
     .textContent();
 
   return faultNamespace;
@@ -259,10 +220,13 @@ export async function getFaultNamespace(page, rowNumber) {
 
 /**
  * @param {import('@playwright/test').Page} page
+ * @param {number} rowNumber
+ * @returns {Promise<string>}
  */
 export async function getFaultTriggerTime(page, rowNumber) {
   const faultTriggerTime = await page
-    .locator(`.c-fault-mgmt__list-trigTime >> nth=${rowNumber - 1} >> .c-fault-mgmt-item__value`)
+    .getByLabel('Last Trigger Time')
+    .nth(rowNumber - 1)
     .textContent();
 
   return faultTriggerTime.toString().trim();
@@ -270,11 +234,14 @@ export async function getFaultTriggerTime(page, rowNumber) {
 
 /**
  * @param {import('@playwright/test').Page} page
+ * @param {number} rowNumber
+ * @returns {Promise<void>}
  */
 export async function openFaultRowMenu(page, rowNumber) {
   // select
   await page
-    .getByLabel('Disposition actions')
+    .getByLabel('Fault triggered at')
     .nth(rowNumber - 1)
+    .getByLabel('Disposition Actions')
     .click();
 }

e2e/helper/imageryUtils.js

@@ -0,0 +1,33 @@
+import { createDomainObjectWithDefaults } from '../appActions.js';
+import { expect } from '../pluginFixtures.js';
+
+const IMAGE_LOAD_DELAY = 5 * 1000;
+const FIVE_MINUTES = 1000 * 60 * 5;
+const THIRTY_SECONDS = 1000 * 30;
+const MOUSE_WHEEL_DELTA_Y = 120;
+
+/**
+ * @param {import('@playwright/test').Page} page
+ */
+async function createImageryViewWithShortDelay(page, { name, parent }) {
+  await createDomainObjectWithDefaults(page, {
+    name,
+    type: 'Example Imagery',
+    parent
+  });
+
+  await expect(page.locator('.l-browse-bar__object-name')).toContainText('Unnamed Example Imagery');
+  await page.getByLabel('More actions').click();
+  await page.getByLabel('Edit Properties').click();
+  // Clear and set Image load delay to minimum value
+  await page.locator('input[type="number"]').fill(`${IMAGE_LOAD_DELAY}`);
+  await page.getByLabel('Save').click();
+}
+
+export {
+  createImageryViewWithShortDelay,
+  FIVE_MINUTES,
+  IMAGE_LOAD_DELAY,
+  MOUSE_WHEEL_DELTA_Y,
+  THIRTY_SECONDS
+};

e2e/helper/planningUtils.js

@@ -129,6 +129,7 @@ export async function setBoundsToSpanAllActivities(page, planJson, planObjectUrl
  */
 export function getEarliestStartTime(planJson) {
   const activities = Object.values(planJson).flat();
+
   return Math.min(...activities.map((activity) => activity.start));
 }
 
@@ -139,6 +140,7 @@ export function getEarliestStartTime(planJson) {
  */
 export function getLatestEndTime(planJson) {
   const activities = Object.values(planJson).flat();
+
   return Math.max(...activities.map((activity) => activity.end));
 }
 
@@ -151,6 +153,7 @@ export function getFirstActivity(planJson) {
   const groups = Object.keys(planJson);
   const firstGroupKey = groups[0];
   const firstGroupItems = planJson[firstGroupKey];
+
   return firstGroupItems[0];
 }
 
@@ -221,7 +224,7 @@ export async function createTimelistWithPlanAndSetActivityInProgress(page, planJ
   await page.getByRole('button', { name: 'Edit Object' }).click();
 
   // Find the display properties section in the inspector
-  await page.getByRole('tab', { name: 'View Properties' }).click();
+  await page.getByRole('tab', { name: 'Config' }).click();
   // Switch to expanded view and save the setting
   await page.getByLabel('Display Style').selectOption({ label: 'Expanded' });
 

e2e/helper/plotTagsUtils.js

@@ -76,6 +76,7 @@ export async function createTags({ page, canvas, xEnd = 700, yEnd = 520 }) {
 export async function testTelemetryItem(page, telemetryItem) {
   // Check that telemetry item also received the tag
   await page.goto(telemetryItem.url);
+  await page.getByRole('tab', { name: 'Annotations' }).click();
 
   await expect(page.getByText('No tags to display for this item')).toBeVisible();
 
@@ -93,6 +94,7 @@ export async function testTelemetryItem(page, telemetryItem) {
       y: 100
     }
   });
+  await page.getByRole('tab', { name: 'Annotations' }).click();
 
   await expect(page.getByText('Science')).toBeVisible();
   await expect(page.getByText('Driving')).toBeHidden();
@@ -107,6 +109,8 @@ export async function basicTagsTests(page) {
   // Search for Driving
   await page.getByRole('searchbox', { name: 'Search Input' }).click();
 
+  await page.getByRole('tab', { name: 'Annotations' }).click();
+
   // Clicking elsewhere should cause annotation selection to be cleared
   await expect(page.getByText('No tags to display for this item')).toBeVisible();
   //
@@ -119,6 +123,8 @@ export async function basicTagsTests(page) {
     .first()
     .click();
 
+  await page.getByRole('tab', { name: 'Annotations' }).click();
+
   // Delete Driving Tag
   await page.hover('[aria-label="Tag"]:has-text("Driving")');
   await page.locator('[aria-label="Remove tag Driving"]').click();
@@ -155,6 +161,8 @@ export async function basicTagsTests(page) {
     }
   });
 
+  await page.getByRole('tab', { name: 'Annotations' }).click();
+
   //Expect Science to be visible but Driving to be hidden
   await expect(page.getByText('Science')).toBeVisible();
   await expect(page.getByText('Driving')).toBeHidden();
@@ -170,7 +178,7 @@ export async function basicTagsTests(page) {
   });
 
   // Add Driving Tag again
-  await page.getByText('Annotations').click();
+  await page.getByRole('tab', { name: 'Annotations' }).click();
   await page.getByRole('button', { name: /Add Tag/ }).click();
   await page.getByPlaceholder('Type to select tag').click();
   await page.getByText('Driving').click();

e2e/package.json

@@ -1,6 +1,6 @@
 {
   "name": "openmct-e2e",
-  "version": "4.0.0-next",
+  "version": "4.1.0-next",
   "description": "The Open MCT e2e framework",
   "type": "module",
   "module": "index.js",
@@ -16,7 +16,7 @@
   "devDependencies": {
     "@percy/cli": "1.27.4",
     "@percy/playwright": "1.0.4",
-    "@playwright/test": "1.45.2",
+    "@playwright/test": "1.48.1",
     "@axe-core/playwright": "4.8.5"
   },
   "author": {

e2e/tests/framework/appActions.e2e.spec.js

@@ -26,8 +26,10 @@ import {
   createExampleTelemetryObject,
   createNotification,
   createPlanFromJSON,
+  createStableStateTelemetry,
   expandEntireTree,
   getCanvasPixels,
+  linkParameterToObject,
   navigateToObjectWithFixedTimeBounds,
   navigateToObjectWithRealTime,
   setEndOffset,
@@ -339,4 +341,23 @@ test.describe('AppActions @framework', () => {
     // Expect this step to fail
     await waitForPlotsToRender(page, { timeout: 1000 });
   });
+  test('createStableStateTelemetry', async ({ page }) => {
+    const stableStateTelemetry = await createStableStateTelemetry(page);
+    expect(stableStateTelemetry.name).toBe('Stable State Generator');
+    expect(stableStateTelemetry.url).toBe(`./#/browse/mine/${stableStateTelemetry.uuid}`);
+    expect(stableStateTelemetry.uuid).toBeDefined();
+  });
+  test('linkParameterToObject', async ({ page }) => {
+    const displayLayout = await createDomainObjectWithDefaults(page, {
+      type: 'Display Layout',
+      name: 'Test Display Layout'
+    });
+    const exampleTelemetry = await createExampleTelemetryObject(page);
+
+    await linkParameterToObject(page, exampleTelemetry.name, displayLayout.name);
+    await page.goto(displayLayout.url);
+    await expect(page.getByRole('main').getByText('Test Display Layout')).toBeVisible();
+    await expandEntireTree(page);
+    await expect(page.getByLabel('Navigate to VIPER Rover').first()).toBeVisible();
+  });
 });

e2e/tests/framework/generateLocalStorageData.e2e.spec.js

@@ -286,6 +286,55 @@ test.describe('Generate Visual Test Data @localStorage @generatedata @clock', ()
   });
 });
 
+test.describe('Generate Conditional Styling Data @localStorage @generatedata', () => {
+  test('Generate basic condition set', async ({ page, context }) => {
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+    // Create a Condition Set
+    const conditionSet = await createDomainObjectWithDefaults(page, {
+      type: 'Condition Set',
+      name: 'Test Condition Set'
+    });
+
+    // Create a Telemetry Object (Sine Wave Generator)
+    const swg = await createExampleTelemetryObject(page, conditionSet.uuid);
+
+    // Edit the Telemetry Object to have a 10hz data rate (Gotta go fast!)
+    await page.goto(swg.url);
+    await page.getByLabel('More actions').click();
+    await page.getByRole('menuitem', { name: 'Edit Properties...' }).click();
+    await page.getByLabel('Period', { exact: true }).fill('5');
+    await page.getByLabel('Save').click();
+
+    // Edit the Condition Set
+    await page.goto(conditionSet.url);
+    await page.getByLabel('Edit Object').click();
+
+    // Add a Condition to the Condition Set
+    await page.getByLabel('Add Condition').click();
+    await page.getByLabel('Condition Name Input').first().fill('Test Condition');
+    await page.getByLabel('Condition Output Type').first().selectOption('String');
+    await page.getByLabel('Condition Output String').first().fill('Test Condition Met');
+
+    // Condition: True if sine value > 0 (half the time)
+    await page.getByLabel('Criterion Telemetry Selection').selectOption(swg.name);
+    await page.getByLabel('Criterion Metadata Selection').selectOption('Sine');
+    await page.getByLabel('Criterion Comparison Selection').selectOption('is greater than');
+    await page.getByLabel('Criterion Input').first().fill('0');
+
+    // Rename default condition
+    await page.getByLabel('Condition Output String').nth(1).fill('Test Condition Unmet');
+    await page.getByLabel('Save').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
+    // Save localStorage for future test execution
+    await context.storageState({
+      path: fileURLToPath(
+        new URL('../../../e2e/test-data/condition_set_storage.json', import.meta.url)
+      )
+    });
+  });
+});
+
 test.describe('Validate Overlay Plot with Telemetry Object @localStorage @generatedata', () => {
   test.use({
     storageState: fileURLToPath(

e2e/tests/functional/example/eventWithAcknowledgeGenerator.e2e.spec.js

@@ -0,0 +1,67 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, 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 { createDomainObjectWithDefaults, setRealTimeMode } from '../../../appActions.js';
+import { MISSION_TIME } from '../../../constants.js';
+import { expect, test } from '../../../pluginFixtures.js';
+
+const TELEMETRY_RATE = 2500;
+
+test.describe('Example Event Generator Acknowledge with Controlled Clock @clock', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.clock.install({ time: MISSION_TIME });
+    await page.clock.resume();
+
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    await setRealTimeMode(page);
+
+    await createDomainObjectWithDefaults(page, {
+      type: 'Event Message Generator with Acknowledge'
+    });
+  });
+
+  test('Rows are updatable in place', async ({ page }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/7938'
+    });
+
+    await test.step('First telemetry datum gets added as new row', async () => {
+      await page.clock.fastForward(TELEMETRY_RATE);
+      const rows = page.getByLabel('table content').getByLabel('Table Row');
+      const acknowledgeCell = rows.first().getByLabel('acknowledge table cell');
+
+      await expect(rows).toHaveCount(1);
+      await expect(acknowledgeCell).not.toHaveAttribute('title', 'OK');
+    });
+
+    await test.step('Incoming Telemetry datum matching an existing rows in place update key has data merged to existing row', async () => {
+      await page.clock.fastForward(TELEMETRY_RATE * 2);
+      const rows = page.getByLabel('table content').getByLabel('Table Row');
+      const acknowledgeCell = rows.first().getByLabel('acknowledge table cell');
+
+      await expect(rows).toHaveCount(1);
+      await expect(acknowledgeCell).toHaveAttribute('title', 'OK');
+    });
+  });
+});

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

@@ -132,7 +132,7 @@ test("View a timelist in expanded view, verify all the activities are displayed
     await page.getByRole('button', { name: 'Edit Object' }).click();
 
     // Find the display properties section in the inspector
-    await page.getByRole('tab', { name: 'View Properties' }).click();
+    await page.getByRole('tab', { name: 'Config' }).click();
     // Switch to expanded view and save the setting
     await page.getByLabel('Display Style').selectOption({ label: 'Expanded' });
 

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

@@ -54,8 +54,7 @@ const examplePlanSmall1 = JSON.parse(
 const TIME_TO_FROM_COLUMN = 2;
 const HEADER_ROW = 0;
 const NUM_COLUMNS = 5;
-const FULL_CIRCLE_PATH =
-  'M3.061616997868383e-15,-50A50,50,0,1,1,-3.061616997868383e-15,50A50,50,0,1,1,3.061616997868383e-15,-50Z';
+const FULL_CIRCLE_PATH = 'M0,-50A50,50,0,1,1,0,50A50,50,0,1,1,0,-50Z';
 
 /**
  * The regular expression used to parse the countdown string.

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

@@ -24,7 +24,9 @@ import {
   createDomainObjectWithDefaults,
   createPlanFromJSON,
   navigateToObjectWithFixedTimeBounds,
-  setFixedIndependentTimeConductorBounds
+  setFixedIndependentTimeConductorBounds,
+  setFixedTimeMode,
+  setTimeConductorBounds
 } from '../../../appActions.js';
 import { expect, test } from '../../../pluginFixtures.js';
 
@@ -74,21 +76,14 @@ const testPlan = {
 };
 
 test.describe('Time Strip', () => {
-  test('Create two Time Strips, add a single Plan to both, and verify they can have separate Independent Time Contexts', async ({
-    page
-  }) => {
-    test.info().annotations.push({
-      type: 'issue',
-      description: 'https://github.com/nasa/openmct/issues/5627'
-    });
-
-    // Constant locators
-    const activityBounds = page.locator('.activity-bounds');
+  let timestrip;
+  let plan;
 
+  test.beforeEach(async ({ page }) => {
     // Goto baseURL
     await page.goto('./', { waitUntil: 'domcontentloaded' });
 
-    const timestrip = await test.step('Create a Time Strip', async () => {
+    timestrip = await test.step('Create a Time Strip', async () => {
       const createdTimeStrip = await createDomainObjectWithDefaults(page, { type: 'Time Strip' });
       const objectName = await page.locator('.l-browse-bar__object-name').innerText();
       expect(objectName).toBe(createdTimeStrip.name);
@@ -96,7 +91,7 @@ test.describe('Time Strip', () => {
       return createdTimeStrip;
     });
 
-    const plan = await test.step('Create a Plan and add it to the timestrip', async () => {
+    plan = await test.step('Create a Plan and add it to the timestrip', async () => {
       const createdPlan = await createPlanFromJSON(page, {
         name: 'Test Plan',
         json: testPlan
@@ -110,6 +105,22 @@ test.describe('Time Strip', () => {
         .dragTo(page.getByLabel('Object View'));
       await page.getByLabel('Save').click();
       await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
+      return createdPlan;
+    });
+  });
+  test('Create two Time Strips, add a single Plan to both, and verify they can have separate Independent Time Contexts', async ({
+    page
+  }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/5627'
+    });
+
+    // Constant locators
+    const activityBounds = page.locator('.activity-bounds');
+
+    await test.step('Set time strip to fixed timespan mode and verify activities', async () => {
       const startBound = testPlan.TEST_GROUP[0].start;
       const endBound = testPlan.TEST_GROUP[testPlan.TEST_GROUP.length - 1].end;
 
@@ -119,8 +130,6 @@ test.describe('Time Strip', () => {
       // Verify all events are displayed
       const eventCount = await page.locator('.activity-bounds').count();
       expect(eventCount).toEqual(testPlan.TEST_GROUP.length);
-
-      return createdPlan;
     });
 
     await test.step('TimeStrip can use the Independent Time Conductor', async () => {
@@ -177,4 +186,48 @@ test.describe('Time Strip', () => {
       expect(await activityBounds.count()).toEqual(1);
     });
   });
+
+  test('Time strip now line', async ({ page }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/7817'
+    });
+
+    await test.step('Is displayed in realtime mode', async () => {
+      await expect(page.getByLabel('Now Marker')).toBeVisible();
+    });
+
+    await test.step('Is hidden when out of bounds of the time axis', async () => {
+      // Switch to fixed timespan mode
+      await setFixedTimeMode(page);
+      // Get the end bounds
+      const endBounds = await page.getByLabel('End bounds').textContent();
+
+      // Add 2 minutes to end bound datetime and use it as the new end time
+      let endTimeStamp = new Date(endBounds);
+      endTimeStamp.setUTCMinutes(endTimeStamp.getUTCMinutes() + 2);
+      const endDate = endTimeStamp.toISOString().split('T')[0];
+      const milliseconds = endTimeStamp.getMilliseconds();
+      const endTime = endTimeStamp.toISOString().split('T')[1].replace(`.${milliseconds}Z`, '');
+
+      // Subtract 1 minute from the end bound and use it as the new start time
+      let startTimeStamp = new Date(endBounds);
+      startTimeStamp.setUTCMinutes(startTimeStamp.getUTCMinutes() + 1);
+      const startDate = startTimeStamp.toISOString().split('T')[0];
+      const startMilliseconds = startTimeStamp.getMilliseconds();
+      const startTime = startTimeStamp
+        .toISOString()
+        .split('T')[1]
+        .replace(`.${startMilliseconds}Z`, '');
+      // Set fixed timespan mode to the future so that "now" is out of bounds.
+      await setTimeConductorBounds(page, {
+        startDate,
+        endDate,
+        startTime,
+        endTime
+      });
+
+      await expect(page.getByLabel('Now Marker')).toBeHidden();
+    });
+  });
 });

e2e/tests/functional/plugins/conditionSet/conditionSetOperations.e2e.spec.js

@@ -27,7 +27,8 @@ demonstrate some playwright for test developers. This pattern should not be re-u
 
 import {
   createDomainObjectWithDefaults,
-  createExampleTelemetryObject
+  createExampleTelemetryObject,
+  setRealTimeMode
 } from '../../../../appActions.js';
 import { expect, test } from '../../../../pluginFixtures.js';
 
@@ -116,7 +117,7 @@ test.describe('Basic Condition Set Use', () => {
     await page.getByLabel('Conditions View').click();
     await expect(page.getByText('Current Output')).toBeVisible();
   });
-  test('ConditionSet has correct outputs when telemetry is and is not available', async ({
+  test('ConditionSet produces an output when telemetry is available, and does not when it is not', async ({
     page
   }) => {
     const exampleTelemetry = await createExampleTelemetryObject(page);
@@ -281,12 +282,142 @@ test.describe('Basic Condition Set Use', () => {
     await page.goto(exampleTelemetry.url);
   });
 
+  test('Short circuit evaluation does not cause incorrect evaluation https://github.com/nasa/openmct/issues/7992', async ({
+    page
+  }) => {
+    await setRealTimeMode(page);
+    await page.getByLabel('Create', { exact: true }).click();
+    await page.getByLabel('State Generator').click();
+    await page.getByLabel('Title', { exact: true }).fill('P1');
+    await page.getByLabel('State Duration (seconds)').fill('1');
+    await page.getByLabel('Save').click();
+    await page.getByLabel('Create', { exact: true }).click();
+    await page.getByLabel('State Generator').click();
+    await page.getByLabel('Title', { exact: true }).fill('P2');
+    await page.getByLabel('State Duration (seconds)', { exact: true }).fill('1');
+    await page.getByRole('treeitem', { name: 'Test Condition Set' }).click();
+    await page.getByLabel('Save').click();
+    await page.getByLabel('Expand My Items folder').click();
+    await page.getByRole('treeitem', { name: 'Test Condition Set' }).click();
+    await page.getByLabel('Edit Object').click();
+    await page.getByLabel('Add Condition').click();
+    await page.getByLabel('Condition Name Input').first().fill('P1 IS ON AND P2 IS ON');
+    await page.getByLabel('Criterion Telemetry Selection').selectOption({ label: 'P1' });
+    await page.getByLabel('Criterion Metadata Selection').selectOption('value');
+    await page.getByLabel('Criterion Comparison Selection').selectOption('equalTo');
+    await page.getByLabel('Criterion Input').fill('1');
+    await page.getByLabel('Add Criteria - Enabled').click();
+    await page.getByLabel('Criterion Telemetry Selection').nth(1).selectOption({ label: 'P2' });
+    await page.getByLabel('Criterion Metadata Selection').nth(1).selectOption('value');
+    await page.getByLabel('Criterion Comparison Selection').nth(1).selectOption('equalTo');
+    await page.getByLabel('Criterion Input').nth(1).fill('1');
+    await page.getByLabel('Add Condition').click();
+    await page.getByLabel('Condition Name Input').first().fill('P1 IS OFF OR P2 IS OFF');
+    await page.getByLabel('Condition Trigger').first().selectOption('any');
+    await page.getByLabel('Criterion Telemetry Selection').first().selectOption({ label: 'P1' });
+    await page.getByLabel('Criterion Metadata Selection').first().selectOption('value');
+    await page.getByLabel('Criterion Comparison Selection').first().selectOption('equalTo');
+    await page.getByLabel('Criterion Input').first().fill('0');
+    await page.getByLabel('Add Criteria - Enabled').first().click();
+    await page.getByLabel('Criterion Telemetry Selection').nth(1).selectOption({ label: 'P2' });
+    await page.getByLabel('Criterion Metadata Selection').nth(1).selectOption('value');
+    await page.getByLabel('Criterion Comparison Selection').nth(1).selectOption('equalTo');
+    await page.getByLabel('Criterion Input').nth(1).fill('0');
+    await page.getByLabel('Condition Name Input').first().dblclick();
+    await page.getByLabel('Save').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+    await page.getByLabel('Edit Object').click();
+
+    /**
+     * Create default conditions for test. Start with invalid values to put condition set into
+     * "default" state
+     */
+    await page.getByLabel('Test Data Telemetry Selection').selectOption({ label: 'P1' });
+    await page.getByLabel('Test Data Metadata Selection').selectOption({ label: 'Value' });
+    await page.getByLabel('Test Data Input').fill('3');
+    await page.getByLabel('Add Test Datum').click();
+    await page.getByLabel('Test Data Telemetry Selection').nth(1).selectOption({ label: 'P2' });
+    await page.getByLabel('Test Data Metadata Selection').nth(1).selectOption({ label: 'Value' });
+    await page.getByLabel('Test Data Input').nth(1).fill('3');
+    await page.getByLabel('Apply Test Data').nth(1).click();
+
+    let activeCondition = page.getByLabel('Active Condition Set Condition');
+    let activeConditionName = activeCondition.getByLabel('Condition Name Label');
+
+    await expect(activeConditionName).toHaveText('Default');
+
+    /**
+     * Set P1 to 0
+     */
+    await page.getByLabel('Test Data Input').nth(0).fill('0');
+
+    activeCondition = page.getByLabel('Active Condition Set Condition');
+    activeConditionName = activeCondition.getByLabel('Condition Name Label');
+
+    await expect(activeConditionName).toHaveText('P1 IS OFF OR P2 IS OFF');
+
+    /**
+     * Set P2 to 1
+     */
+    await page.getByLabel('Test Data Input').nth(1).fill('1');
+
+    activeCondition = page.getByLabel('Active Condition Set Condition');
+    activeConditionName = activeCondition.getByLabel('Condition Name Label');
+
+    await expect(activeConditionName).toHaveText('P1 IS OFF OR P2 IS OFF');
+
+    /**
+     * Set P1 to 1
+     */
+    await page.getByLabel('Test Data Input').nth(0).fill('1');
+
+    activeCondition = page.getByLabel('Active Condition Set Condition');
+    activeConditionName = activeCondition.getByLabel('Condition Name Label');
+
+    await expect(activeConditionName).toHaveText('P1 IS ON AND P2 IS ON');
+  });
+
   test.fixme('Ensure condition sets work with telemetry like operator status', ({ page }) => {
     test.info().annotations.push({
       type: 'issue',
       description: 'https://github.com/nasa/openmct/issues/7484'
     });
   });
+
+  test('ConditionSet has add criteria button enabled/disabled when composition is and is not available', async ({
+    page
+  }) => {
+    const exampleTelemetry = await createExampleTelemetryObject(page);
+
+    await page.getByLabel('Show selected item in tree').click();
+    await page.goto(conditionSet.url);
+    // Change the object to edit mode
+    await page.getByLabel('Edit Object').click();
+
+    // Create a condition
+    await page.locator('#addCondition').click();
+    await page.locator('#conditionCollection').getByRole('textbox').nth(0).fill('First Condition');
+
+    // Validate that the add criteria button is disabled
+    await expect(page.getByLabel('Add Criteria - Disabled')).toHaveAttribute('disabled');
+
+    // Add Telemetry to ConditionSet
+    const sineWaveGeneratorTreeItem = page
+      .getByRole('tree', {
+        name: 'Main Tree'
+      })
+      .getByRole('treeitem', {
+        name: exampleTelemetry.name
+      });
+    const conditionCollection = page.locator('#conditionCollection');
+    await sineWaveGeneratorTreeItem.dragTo(conditionCollection);
+
+    // Validate that the add criteria button is enabled and adds a new criterion
+    await expect(page.getByLabel('Add Criteria - Enabled')).not.toHaveAttribute('disabled');
+    await page.getByLabel('Add Criteria - Enabled').click();
+    const numOfUnnamedCriteria = await page.getByLabel('Criterion Telemetry Selection').count();
+    expect(numOfUnnamedCriteria).toEqual(2);
+  });
 });
 
 test.describe('Condition Set Composition', () => {

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

@@ -236,7 +236,7 @@ test.describe('Display Layout', () => {
       name: new RegExp(sineWaveObject.name)
     });
     await sineWaveGeneratorTreeItem.dragTo(page.getByLabel('Layout Grid'));
-    await page.locator('button[title="Save"]').click();
+    await page.getByLabel('Save', { exact: true }).click();
     await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
 
     // Subscribe to the Sine Wave Generator data
@@ -278,7 +278,7 @@ test.describe('Display Layout', () => {
       name: new RegExp(sineWaveObject.name)
     });
     await sineWaveGeneratorTreeItem.dragTo(page.getByLabel('Layout Grid'));
-    await page.locator('button[title="Save"]').click();
+    await page.getByLabel('Save', { exact: true }).click();
     await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
 
     // Subscribe to the Sine Wave Generator data
@@ -317,7 +317,7 @@ test.describe('Display Layout', () => {
       name: new RegExp(sineWaveObject.name)
     });
     await sineWaveGeneratorTreeItem.dragTo(page.getByLabel('Layout Grid'));
-    await page.locator('button[title="Save"]').click();
+    await page.getByLabel('Save', { exact: true }).click();
     await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
 
     expect.soft(await page.locator('.l-layout .l-layout__frame').count()).toEqual(1);
@@ -358,7 +358,7 @@ test.describe('Display Layout', () => {
       name: new RegExp(sineWaveObject.name)
     });
     await sineWaveGeneratorTreeItem.dragTo(page.getByLabel('Layout Grid'));
-    await page.locator('button[title="Save"]').click();
+    await page.getByLabel('Save', { exact: true }).click();
     await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
 
     expect.soft(await page.locator('.l-layout .l-layout__frame').count()).toEqual(1);
@@ -413,7 +413,7 @@ test.describe('Display Layout', () => {
     await page.locator('div[title="Resize object width"] > input').click();
     await page.locator('div[title="Resize object width"] > input').fill('70');
 
-    await page.locator('button[title="Save"]').click();
+    await page.getByLabel('Save', { exact: true }).click();
     await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
 
     const startDate = '2021-12-30 01:01:00.000Z';
@@ -473,7 +473,7 @@ test.describe('Display Layout', () => {
     await page.getByText('View type').click();
     await page.getByText('Overlay Plot').click();
 
-    await page.getByLabel('Save').click();
+    await page.getByLabel('Save', { exact: true }).click();
     await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
 
     // Time to inspect some network traffic
@@ -507,8 +507,140 @@ test.describe('Display Layout', () => {
     // In real time mode, we don't fetch annotations at all
     await expect.poll(() => networkRequests, { timeout: 10000 }).toHaveLength(0);
   });
+
+  test('Same objects with different request options have unique subscriptions', async ({
+    page
+  }) => {
+    // Expand My Items
+    await page.getByLabel('Expand My Items folder').click();
+
+    // Create a Display Layout
+    const displayLayout = await createDomainObjectWithDefaults(page, {
+      type: 'Display Layout',
+      name: 'Test Display'
     });
 
+    // Create a State Generator, set to higher frequency updates
+    const stateGenerator = await createDomainObjectWithDefaults(page, {
+      type: 'State Generator',
+      name: 'State Generator'
+    });
+    const stateGeneratorTreeItem = page.getByRole('treeitem', {
+      name: stateGenerator.name
+    });
+    await stateGeneratorTreeItem.click({ button: 'right' });
+    await page.getByLabel('Edit Properties...').click();
+    await page.getByLabel('State Duration (seconds)', { exact: true }).fill('0.1');
+    await page.getByLabel('Save', { exact: true }).click();
+
+    // Create a Table for filtering ON values
+    const tableFilterOnValue = await createDomainObjectWithDefaults(page, {
+      type: 'Telemetry Table',
+      name: 'Table Filter On Value'
+    });
+    const tableFilterOnTreeItem = page.getByRole('treeitem', {
+      name: tableFilterOnValue.name
+    });
+
+    // Create a Table for filtering OFF values
+    const tableFilterOffValue = await createDomainObjectWithDefaults(page, {
+      type: 'Telemetry Table',
+      name: 'Table Filter Off Value'
+    });
+    const tableFilterOffTreeItem = page.getByRole('treeitem', {
+      name: tableFilterOffValue.name
+    });
+
+    // Navigate to ON filtering table and add state generator and setup filters
+    await page.goto(tableFilterOnValue.url);
+    await stateGeneratorTreeItem.dragTo(page.getByLabel('Object View'));
+    await selectFilterOption(page, '1');
+    await page.getByLabel('Save', { exact: true }).click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
+    // Navigate to OFF filtering table and add state generator and setup filters
+    await page.goto(tableFilterOffValue.url);
+    await stateGeneratorTreeItem.dragTo(page.getByLabel('Object View'));
+    await selectFilterOption(page, '0');
+    await page.getByLabel('Save', { exact: true }).click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
+    // Navigate to the display layout and edit it
+    await page.goto(displayLayout.url);
+
+    // Add the tables to the display layout
+    await page.getByLabel('Edit Object').click();
+    await tableFilterOffTreeItem.dragTo(page.getByLabel('Layout Grid'), {
+      targetPosition: { x: 10, y: 300 }
+    });
+    await page.locator('.c-frame-edit > div:nth-child(4)').dragTo(page.getByLabel('Layout Grid'), {
+      targetPosition: { x: 400, y: 500 },
+      // eslint-disable-next-line playwright/no-force-option
+      force: true
+    });
+    await tableFilterOnTreeItem.dragTo(page.getByLabel('Layout Grid'), {
+      targetPosition: { x: 10, y: 100 }
+    });
+    await page.locator('.c-frame-edit > div:nth-child(4)').dragTo(page.getByLabel('Layout Grid'), {
+      targetPosition: { x: 400, y: 300 },
+      // eslint-disable-next-line playwright/no-force-option
+      force: true
+    });
+    await page.getByLabel('Save', { exact: true }).click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
+    // Get the tables so we can verify filtering is working as expected
+    const tableFilterOn = page.getByLabel(`${tableFilterOnValue.name} Frame`, {
+      exact: true
+    });
+    const tableFilterOff = page.getByLabel(`${tableFilterOffValue.name} Frame`, {
+      exact: true
+    });
+
+    // Verify filtering is working correctly
+
+    // Check that no filtered values appear for at least 2 seconds
+    const VERIFICATION_TIME = 2000; // 2 seconds
+    const CHECK_INTERVAL = 100; // Check every 100ms
+
+    // Create a promise that will check for filtered values periodically
+    const checkForCorrectValues = new Promise((resolve, reject) => {
+      const interval = setInterval(async () => {
+        const offCount = await tableFilterOn.locator('td[title="OFF"]').count();
+        const onCount = await tableFilterOff.locator('td[title="ON"]').count();
+        if (offCount > 0 || onCount > 0) {
+          clearInterval(interval);
+          reject(
+            new Error(
+              `Found ${offCount} OFF and ${onCount} ON values when expecting 0 OFF and 0 ON`
+            )
+          );
+        }
+      }, CHECK_INTERVAL);
+
+      // After VERIFICATION_TIME, if no filtered values were found, resolve successfully
+      setTimeout(() => {
+        clearInterval(interval);
+        resolve();
+      }, VERIFICATION_TIME);
+    });
+
+    await expect(checkForCorrectValues).resolves.toBeUndefined();
+  });
+});
+
+async function selectFilterOption(page, filterOption) {
+  await page.getByRole('tab', { name: 'Filters' }).click();
+  await page
+    .getByLabel('Inspector Views')
+    .locator('li')
+    .filter({ hasText: 'State Generator' })
+    .locator('span')
+    .click();
+  await page.getByRole('switch').click();
+  await page.selectOption('select[name="setSelectionThreshold"]', filterOption);
+}
+
 async function addAndRemoveDrawingObjectAndAssert(page, layoutObject, DISPLAY_LAYOUT_NAME) {
   await expect(page.getByLabel(layoutObject, { exact: true })).toHaveCount(0);
   await addLayoutObject(page, DISPLAY_LAYOUT_NAME, layoutObject);

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

@@ -24,19 +24,13 @@ import {
   acknowledgeFault,
   acknowledgeMultipleFaults,
   changeViewTo,
-  clearSearch,
-  enterSearchTerm,
   getFault,
   getFaultByName,
   getFaultName,
   getFaultNamespace,
-  getFaultResultCount,
-  getFaultSeverity,
   getFaultTriggerTime,
-  getHighestSeverity,
-  getLowestSeverity,
-  navigateToFaultManagementWithExample,
   navigateToFaultManagementWithoutExample,
+  navigateToFaultManagementWithStaticExample,
   selectFaultItem,
   shelveFault,
   shelveMultipleFaults,
@@ -46,7 +40,7 @@ import { expect, test } from '../../../../pluginFixtures.js';
 
 test.describe('The Fault Management Plugin using example faults', () => {
   test.beforeEach(async ({ page }) => {
-    await navigateToFaultManagementWithExample(page);
+    await navigateToFaultManagementWithStaticExample(page);
   });
 
   test('Shows a criticality icon for every fault', async ({ page }) => {
@@ -56,7 +50,7 @@ test.describe('The Fault Management Plugin using example faults', () => {
     expect(faultCount).toEqual(criticalityIconCount);
   });
 
-  test('When selecting a fault, it has an "is-selected" class and it\'s information shows in the inspector', async ({
+  test('When selecting a fault, it has an "is-selected" class and its information shows in the inspector', async ({
     page
   }) => {
     await selectFaultItem(page, 1);
@@ -67,9 +61,7 @@ test.describe('The Fault Management Plugin using example faults', () => {
       .getByLabel('Source inspector properties')
       .getByLabel('inspector property value');
 
-    await expect(
-      page.locator('.c-faults-list-view-item-body > .c-fault-mgmt__list').first()
-    ).toHaveClass(/is-selected/);
+    await expect(page.getByLabel('Fault triggered at').first()).toHaveClass(/is-selected/);
     await expect(inspectorFaultName).toHaveCount(1);
   });
 
@@ -79,23 +71,18 @@ test.describe('The Fault Management Plugin using example faults', () => {
     await selectFaultItem(page, 1);
     await selectFaultItem(page, 2);
 
-    const selectedRows = page.locator(
-      '.c-fault-mgmt__list.is-selected .c-fault-mgmt__list-faultname'
-    );
-    expect(await selectedRows.count()).toEqual(2);
+    const selectedRows = page.getByRole('checkbox', { checked: true });
+    await expect(selectedRows).toHaveCount(2);
 
     await page.getByRole('tab', { name: 'Config' }).click();
     const firstSelectedFaultName = await selectedRows.nth(0).textContent();
     const secondSelectedFaultName = await selectedRows.nth(1).textContent();
-    const firstNameInInspectorCount = await page
-      .locator(`.c-inspector__properties >> :text("${firstSelectedFaultName}")`)
-      .count();
-    const secondNameInInspectorCount = await page
-      .locator(`.c-inspector__properties >> :text("${secondSelectedFaultName}")`)
-      .count();
-
-    expect(firstNameInInspectorCount).toEqual(0);
-    expect(secondNameInInspectorCount).toEqual(0);
+    await expect(
+      page.locator(`.c-inspector__properties >> :text("${firstSelectedFaultName}")`)
+    ).toHaveCount(0);
+    await expect(
+      page.locator(`.c-inspector__properties >> :text("${secondSelectedFaultName}")`)
+    ).toHaveCount(0);
   });
 
   test('Allows you to shelve a fault', async ({ page }) => {
@@ -186,44 +173,60 @@ test.describe('The Fault Management Plugin using example faults', () => {
     const faultFiveTriggerTime = await getFaultTriggerTime(page, 5);
 
     // should be all faults (5)
-    let faultResultCount = await getFaultResultCount(page);
-    expect(faultResultCount).toEqual(5);
+    await expect(page.getByLabel('Fault triggered at')).toHaveCount(5);
 
     // search namespace
-    await enterSearchTerm(page, faultThreeNamespace);
+    await page
+      .getByLabel('Fault Management Object View')
+      .getByLabel('Search Input')
+      .fill(faultThreeNamespace);
 
-    faultResultCount = await getFaultResultCount(page);
-    expect(faultResultCount).toEqual(1);
+    await expect(page.getByLabel('Fault triggered at')).toHaveCount(1);
     expect(await getFaultNamespace(page, 1)).toEqual(faultThreeNamespace);
 
     // all faults
-    await clearSearch(page);
-    faultResultCount = await getFaultResultCount(page);
-    expect(faultResultCount).toEqual(5);
+    await page.getByLabel('Fault Management Object View').getByLabel('Search Input').fill('');
+    await expect(page.getByLabel('Fault triggered at')).toHaveCount(5);
 
     // search name
-    await enterSearchTerm(page, faultTwoName);
+    await page
+      .getByLabel('Fault Management Object View')
+      .getByLabel('Search Input')
+      .fill(faultTwoName);
 
-    faultResultCount = await getFaultResultCount(page);
-    expect(faultResultCount).toEqual(1);
+    await expect(page.getByLabel('Fault triggered at')).toHaveCount(1);
     expect(await getFaultName(page, 1)).toEqual(faultTwoName);
 
     // all faults
-    await clearSearch(page);
-    faultResultCount = await getFaultResultCount(page);
-    expect(faultResultCount).toEqual(5);
+    await page.getByLabel('Fault Management Object View').getByLabel('Search Input').fill('');
+    await expect(page.getByLabel('Fault triggered at')).toHaveCount(5);
 
     // search triggerTime
-    await enterSearchTerm(page, faultFiveTriggerTime);
+    await page
+      .getByLabel('Fault Management Object View')
+      .getByLabel('Search Input')
+      .fill(faultFiveTriggerTime);
 
-    faultResultCount = await getFaultResultCount(page);
-    expect(faultResultCount).toEqual(1);
+    await expect(page.getByLabel('Fault triggered at')).toHaveCount(1);
     expect(await getFaultTriggerTime(page, 1)).toEqual(faultFiveTriggerTime);
   });
 
   test('Allows you to sort faults', async ({ page }) => {
-    const highestSeverity = await getHighestSeverity(page);
-    const lowestSeverity = await getLowestSeverity(page);
+    /**
+     * Compares two severity levels and returns a number indicating their relative order.
+     *
+     * @param {'CRITICAL' | 'WARNING' | 'WATCH'} severity1 - The first severity level to compare.
+     * @param {'CRITICAL' | 'WARNING' | 'WATCH'} severity2 - The second severity level to compare.
+     * @returns {number} - A negative number if severity1 is less severe than severity2,
+     *                     a positive number if severity1 is more severe than severity2,
+     *                     or 0 if they are equally severe.
+     */
+    // eslint-disable-next-line func-style
+    const compareSeverity = (severity1, severity2) => {
+      const severityOrder = ['WATCH', 'WARNING', 'CRITICAL'];
+      return severityOrder.indexOf(severity1) - severityOrder.indexOf(severity2);
+    };
+
     const faultOneName = 'Example Fault 1';
     const faultFiveName = 'Example Fault 5';
     let firstFaultName = await getFaultName(page, 1);
@@ -237,10 +240,19 @@ test.describe('The Fault Management Plugin using example faults', () => {
 
     await sortFaultsBy(page, 'severity');
 
-    const sortedHighestSeverity = await getFaultSeverity(page, 1);
-    const sortedLowestSeverity = await getFaultSeverity(page, 5);
-    expect(sortedHighestSeverity).toEqual(highestSeverity);
-    expect(sortedLowestSeverity).toEqual(lowestSeverity);
+    const firstFaultSeverityLabel = await page
+      .getByLabel('Severity:')
+      .first()
+      .getAttribute('aria-label');
+    const firstFaultSeverity = firstFaultSeverityLabel.split(' ').slice(1).join(' ');
+
+    const lastFaultSeverityLabel = await page
+      .getByLabel('Severity:')
+      .last()
+      .getAttribute('aria-label');
+    const lastFaultSeverity = lastFaultSeverityLabel.split(' ').slice(1).join(' ');
+
+    expect(compareSeverity(firstFaultSeverity, lastFaultSeverity)).toBeGreaterThan(0);
   });
 });
 
@@ -250,24 +262,18 @@ test.describe('The Fault Management Plugin without using example faults', () =>
   });
 
   test('Shows no faults when no faults are provided', async ({ page }) => {
-    const faultCount = await page.locator('c-fault-mgmt__list').count();
-
-    expect(faultCount).toEqual(0);
+    await expect(page.getByLabel('Fault triggered at')).toHaveCount(0);
 
     await changeViewTo(page, 'acknowledged');
-    const acknowledgedCount = await page.locator('c-fault-mgmt__list').count();
-    expect(acknowledgedCount).toEqual(0);
+    await expect(page.getByLabel('Fault triggered at')).toHaveCount(0);
 
     await changeViewTo(page, 'shelved');
-    const shelvedCount = await page.locator('c-fault-mgmt__list').count();
-    expect(shelvedCount).toEqual(0);
+    await expect(page.getByLabel('Fault triggered at')).toHaveCount(0);
   });
 
   test('Will return no faults when searching', async ({ page }) => {
-    await enterSearchTerm(page, 'fault');
+    await page.getByLabel('Fault Management Object View').getByLabel('Search Input').fill('fault');
 
-    const faultCount = await page.locator('c-fault-mgmt__list').count();
-
-    expect(faultCount).toEqual(0);
+    await expect(page.getByLabel('Fault triggered at')).toHaveCount(0);
   });
 });

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

@@ -28,7 +28,9 @@ import { v4 as uuid } from 'uuid';
 
 import {
   createDomainObjectWithDefaults,
-  createExampleTelemetryObject
+  createExampleTelemetryObject,
+  setRealTimeMode,
+  setStartOffset
 } from '../../../../appActions.js';
 import { expect, test } from '../../../../pluginFixtures.js';
 
@@ -166,6 +168,57 @@ test.describe('Gauge', () => {
     );
   });
 
+  test('Gauge does not break when an object is missing', async ({ page }) => {
+    // Set up error listeners
+    const pageErrors = [];
+
+    // Listen for uncaught exceptions
+    page.on('pageerror', (err) => {
+      pageErrors.push(err.message);
+    });
+
+    await setRealTimeMode(page);
+
+    // Create a Gauge
+    const gauge = await createDomainObjectWithDefaults(page, {
+      type: 'Gauge',
+      name: 'Gauge with missing object'
+    });
+
+    // Create a Sine Wave Generator in the Gauge with a loading delay
+    const missingSWG = await createExampleTelemetryObject(page, gauge.uuid);
+
+    // Remove the object from local storage
+    await page.evaluate(
+      ([missingObject]) => {
+        const mct = localStorage.getItem('mct');
+        const mctObjects = JSON.parse(mct);
+        delete mctObjects[missingObject.uuid];
+        localStorage.setItem('mct', JSON.stringify(mctObjects));
+      },
+      [missingSWG]
+    );
+
+    // Verify start bounds
+    await expect(page.getByLabel('Start offset: 00:30:00')).toBeVisible();
+
+    // Nav to the Gauge
+    await page.goto(gauge.url, { waitUntil: 'domcontentloaded' });
+
+    // adjust time bounds and ensure they are updated
+    await setStartOffset(page, {
+      startHours: '00',
+      startMins: '45',
+      startSecs: '00'
+    });
+
+    // Verify start bounds changed
+    await expect(page.getByLabel('Start offset: 00:45:00')).toBeVisible();
+
+    // // Verify no errors were thrown
+    expect(pageErrors).toHaveLength(0);
+  });
+
   test('Gauge enforces composition policy', async ({ page }) => {
     // Create a Gauge
     await createDomainObjectWithDefaults(page, {

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

@@ -30,16 +30,19 @@ import {
   navigateToObjectWithRealTime,
   setRealTimeMode
 } from '../../../../appActions.js';
-import { MISSION_TIME } from '../../../../constants.js';
+import {
+  createImageryViewWithShortDelay,
+  FIVE_MINUTES,
+  IMAGE_LOAD_DELAY,
+  MOUSE_WHEEL_DELTA_Y,
+  THIRTY_SECONDS
+} from '../../../../helper/imageryUtils.js';
 import { expect, test } from '../../../../pluginFixtures.js';
+
 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/;
-const IMAGE_LOAD_DELAY = 5 * 1000;
-const MOUSE_WHEEL_DELTA_Y = 120;
-const FIVE_MINUTES = 1000 * 60 * 5;
-const THIRTY_SECONDS = 1000 * 30;
 
 //The following block of tests verifies the basic functionality of example imagery and serves as a template for Imagery objects embedded in other objects.
 test.describe('Example Imagery Object', () => {
@@ -93,9 +96,6 @@ test.describe('Example Imagery Object', () => {
     expect(newPage.url()).toContain('.jpg');
   });
 
-  // this requires CORS to be enabled in some fashion
-  test.fixme('Can right click on image and save it as a file', async ({ page }) => {});
-
   test('Can adjust image brightness/contrast by dragging the sliders', async ({
     page,
     browserName
@@ -357,15 +357,10 @@ test.describe('Example Imagery Object', () => {
   });
 });
 
-test.describe('Example Imagery in Display Layout @clock', () => {
+test.describe('Example Imagery in Display Layout', () => {
   let displayLayout;
 
   test.beforeEach(async ({ page }) => {
-    // We mock the clock so that we don't need to wait for time driven events
-    // to verify functionality.
-    await page.clock.install({ time: MISSION_TIME });
-    await page.clock.resume();
-
     // Go to baseURL
     await page.goto('./', { waitUntil: 'domcontentloaded' });
 
@@ -428,12 +423,7 @@ test.describe('Example Imagery in Display Layout @clock', () => {
     await expect.soft(pausePlayButton).toHaveClass(/is-paused/);
   });
 
-  test('Imagery View operations @clock', async ({ page }) => {
-    test.info().annotations.push({
-      type: 'issue',
-      description: 'https://github.com/nasa/openmct/issues/5265'
-    });
-
+  test('Imagery View operations', async ({ page }) => {
     // Edit mode
     await page.getByLabel('Edit Object').click();
 
@@ -526,14 +516,9 @@ test.describe('Example Imagery in Display Layout @clock', () => {
   });
 });
 
-test.describe('Example Imagery in Flexible layout @clock', () => {
+test.describe('Example Imagery in Flexible layout', () => {
   let flexibleLayout;
   test.beforeEach(async ({ page }) => {
-    // We mock the clock so that we don't need to wait for time driven events
-    // to verify functionality.
-    await page.clock.install({ time: MISSION_TIME });
-    await page.clock.resume();
-
     await page.goto('./', { waitUntil: 'domcontentloaded' });
 
     flexibleLayout = await createDomainObjectWithDefaults(page, { type: 'Flexible Layout' });
@@ -562,7 +547,7 @@ test.describe('Example Imagery in Flexible layout @clock', () => {
     await page.getByRole('button', { name: 'Close' }).click();
   });
 
-  test('Imagery View operations @clock', async ({ page, browserName }) => {
+  test('Imagery View operations', async ({ page, browserName }) => {
     test.fixme(browserName === 'firefox', 'This test needs to be updated to work with firefox');
     test.info().annotations.push({
       type: 'issue',
@@ -573,14 +558,10 @@ test.describe('Example Imagery in Flexible layout @clock', () => {
   });
 });
 
-test.describe('Example Imagery in Tabs View @clock', () => {
+test.describe('Example Imagery in Tabs View', () => {
   let tabsView;
-  test.beforeEach(async ({ page }) => {
-    // We mock the clock so that we don't need to wait for time driven events
-    // to verify functionality.
-    await page.clock.install({ time: MISSION_TIME });
-    await page.clock.resume();
 
+  test.beforeEach(async ({ page }) => {
     await page.goto('./', { waitUntil: 'domcontentloaded' });
 
     tabsView = await createDomainObjectWithDefaults(page, { type: 'Tabs View' });
@@ -607,7 +588,8 @@ test.describe('Example Imagery in Tabs View @clock', () => {
     // Wait for image thumbnail auto-scroll to complete
     await expect(page.getByLabel('Image Thumbnail from').last()).toBeInViewport();
   });
-  test('Imagery View operations @clock', async ({ page }) => {
+
+  test('Imagery View operations', async ({ page }) => {
     await performImageryViewOperationsAndAssert(page, tabsView);
   });
 });
@@ -668,16 +650,19 @@ test.describe('Example Imagery in Time Strip', () => {
  * 3. Can pan the image using the pan hotkey + mouse drag
  * 4. Clicking on the left arrow button pauses imagery and moves to the previous image
  * 5. Imagery is updated as new images stream in, regardless of pause status
- * 6. Old images are discarded when new images stream in
- * 7. Image brightness/contrast can be adjusted by dragging the sliders
+ * 6. Old images are discarded when their timestamps fall out of bounds
+ * 7. Multiple images can be discarded when their timestamps fall out of bounds
+ * 8. Image brightness/contrast can be adjusted by dragging the sliders
  * @param {import('@playwright/test').Page} page
  */
 async function performImageryViewOperationsAndAssert(page, layoutObject) {
-  // Verify that imagery thumbnails use a thumbnail url
+  await test.step('Verify that imagery thumbnails use a thumbnail url', async () => {
     const thumbnailImages = page.getByLabel('Image thumbnail from').locator('.c-thumb__image');
     const mainImage = page.locator('.c-imagery__main-image__image');
     await expect(thumbnailImages.first()).toHaveAttribute('src', thumbnailUrlParamsRegexp);
     await expect(mainImage).not.toHaveAttribute('src', thumbnailUrlParamsRegexp);
+  });
+
   // Click previous image button
   const previousImageButton = page.getByLabel('Previous image');
   await expect(previousImageButton).toBeVisible();
@@ -736,19 +721,6 @@ async function performImageryViewOperationsAndAssert(page, layoutObject) {
   // Unpause imagery
   await page.locator('.pause-play').click();
 
-  // verify that old images are discarded
-  const lastImageInBounds = page.getByLabel('Image thumbnail from').first();
-  const lastImageTimestamp = await lastImageInBounds.getAttribute('title');
-  expect(lastImageTimestamp).not.toBeNull();
-
-  // go forward in time to ensure old images are discarded
-  await page.clock.fastForward(IMAGE_LOAD_DELAY);
-  await page.clock.resume();
-  await expect(page.getByLabel(lastImageTimestamp)).toBeHidden();
-
-  //Get background-image url from background-image css prop
-  await assertBackgroundImageUrlFromBackgroundCss(page);
-
   // Open the image filter menu
   await page.locator('[role=toolbar] button[title="Brightness and contrast"]').click();
 
@@ -815,24 +787,6 @@ async function assertBackgroundImageBrightness(page, expected) {
   expect(actual).toBe(expected);
 }
 
-/**
- * @param {import('@playwright/test').Page} page
- */
-async function assertBackgroundImageUrlFromBackgroundCss(page) {
-  const backgroundImage = page.getByLabel('Focused Image Element');
-  const backgroundImageUrl = await backgroundImage.evaluate((el) => {
-    return window
-      .getComputedStyle(el)
-      .getPropertyValue('background-image')
-      .match(/url\(([^)]+)\)/)[1];
-  });
-
-  // go forward in time to ensure old images are discarded
-  await page.clock.fastForward(IMAGE_LOAD_DELAY);
-  await page.clock.resume();
-  await expect(backgroundImage).not.toHaveJSProperty('background-image', backgroundImageUrl);
-}
-
 /**
  * @param {import('@playwright/test').Page} page
  */
@@ -918,14 +872,17 @@ async function mouseZoomOnImageAndAssert(page, factor = 2) {
  * @param {import('@playwright/test').Page} page
  */
 async function buttonZoomOnImageAndAssert(page) {
+  await test.step('Can zoom using buttons', async () => {
     // Lock the zoom and pan so it doesn't reset if a new image comes in
     await page.getByLabel('Focused Image Element').hover({ trial: true });
     const lockButton = page.getByRole('button', {
       name: 'Lock current zoom and pan across all images'
     });
-  if (!(await lockButton.isVisible())) {
-    await page.getByLabel('Focused Image Element').hover({ trial: true });
-  }
+
+    await lockButton.isVisible();
+    // if (!(await lockButton.isVisible())) {
+    //   await page.getByLabel('Focused Image Element').hover({ trial: true });
+    // }
     await lockButton.click();
 
     await expect(page.getByLabel('Focused Image Element')).toHaveJSProperty(
@@ -974,6 +931,7 @@ async function buttonZoomOnImageAndAssert(page) {
 
     const finalBoundingBox = await page.getByLabel('Focused Image Element').boundingBox();
     expect(finalBoundingBox).toEqual(initialBoundingBox);
+  });
 }
 
 /**
@@ -1035,24 +993,6 @@ async function resetImageryPanAndZoom(page) {
   await expect(page.locator('.c-thumb__viewable-area')).toBeHidden();
 }
 
-/**
- * @param {import('@playwright/test').Page} page
- */
-async function createImageryViewWithShortDelay(page, { name, parent }) {
-  await createDomainObjectWithDefaults(page, {
-    name,
-    type: 'Example Imagery',
-    parent
-  });
-
-  await expect(page.locator('.l-browse-bar__object-name')).toContainText('Unnamed Example Imagery');
-  await page.getByLabel('More actions').click();
-  await page.getByLabel('Edit Properties').click();
-  // Clear and set Image load delay to minimum value
-  await page.locator('input[type="number"]').fill(`${IMAGE_LOAD_DELAY}`);
-  await page.getByLabel('Save').click();
-}
-
 /**
  * @param {import('@playwright/test').Page} page
  */

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

@@ -0,0 +1,489 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, 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 testing how imagery functions over time.
+It only assumes that example imagery is present.
+It uses https://playwright.dev/docs/clock to have control over time
+*/
+
+import {
+  createDomainObjectWithDefaults,
+  navigateToObjectWithRealTime,
+  setRealTimeMode,
+  setStartOffset
+} from '../../../../appActions.js';
+import { MISSION_TIME } from '../../../../constants.js';
+import {
+  createImageryViewWithShortDelay,
+  FIVE_MINUTES,
+  IMAGE_LOAD_DELAY,
+  THIRTY_SECONDS
+} from '../../../../helper/imageryUtils.js';
+import { expect, test } from '../../../../pluginFixtures.js';
+
+test.describe('Example Imagery Object with Controlled Clock @clock', () => {
+  test.beforeEach(async ({ page }) => {
+    // We mock the clock so that we don't need to wait for time driven events
+    // to verify functionality.
+    await page.clock.install({ time: MISSION_TIME });
+    await page.clock.resume();
+
+    //Go to baseURL
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    // Create a default 'Example Imagery' object
+    // Click the Create button
+    await page.getByRole('button', { name: 'Create' }).click();
+
+    // Click text=Example Imagery
+    await page.getByRole('menuitem', { name: 'Example Imagery' }).click();
+
+    // Clear and set Image load delay to minimum value
+    await page.locator('input[type="number"]').clear();
+    await page.locator('input[type="number"]').fill(`${IMAGE_LOAD_DELAY}`);
+
+    await page.getByLabel('Save').click();
+
+    // Verify that the created object is focused
+    await expect(page.locator('.l-browse-bar__object-name')).toContainText(
+      'Unnamed Example Imagery'
+    );
+    await page.getByLabel('Focused Image Element').hover({ trial: true });
+
+    // set realtime mode
+    await setRealTimeMode(page);
+    await setStartOffset(page, { startMins: '05' });
+  });
+
+  test('Imagery Time Bounding', async ({ page }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/5265'
+    });
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/7825'
+    });
+
+    // verify that old images are discarded
+    const lastImageInBounds = page.getByLabel('Image thumbnail from').first();
+    const lastImageTimestamp = await lastImageInBounds.getAttribute('title');
+    expect(lastImageTimestamp).not.toBeNull();
+
+    // go forward in time to ensure old images are discarded
+    await page.clock.fastForward(IMAGE_LOAD_DELAY);
+    await page.clock.resume();
+    await expect(page.getByLabel(lastImageTimestamp)).toBeHidden();
+
+    // go way forward in time to ensure multiple images are discarded
+    const IMAGES_TO_DISCARD_COUNT = 5;
+
+    const lastImageToDiscard = page
+      .getByLabel('Image thumbnail from')
+      .nth(IMAGES_TO_DISCARD_COUNT - 1);
+    const lastImageToDiscardTimestamp = await lastImageToDiscard.getAttribute('title');
+    expect(lastImageToDiscardTimestamp).not.toBeNull();
+
+    const imageAfterLastImageToDiscard = page
+      .getByLabel('Image thumbnail from')
+      .nth(IMAGES_TO_DISCARD_COUNT);
+    const imageAfterLastImageToDiscardTimestamp =
+      await imageAfterLastImageToDiscard.getAttribute('title');
+    expect(imageAfterLastImageToDiscardTimestamp).not.toBeNull();
+
+    await page.clock.fastForward(IMAGE_LOAD_DELAY * IMAGES_TO_DISCARD_COUNT);
+    await page.clock.resume();
+
+    await expect(page.getByLabel(lastImageToDiscardTimestamp)).toBeHidden();
+    await expect(page.getByLabel(imageAfterLastImageToDiscardTimestamp)).toBeVisible();
+  });
+
+  test('Get background-image url from background-image css prop', async ({ page }) => {
+    await assertBackgroundImageUrlFromBackgroundCss(page);
+  });
+});
+
+test.describe('Example Imagery in Display Layout with Controlled Clock @clock', () => {
+  let displayLayout;
+
+  test.beforeEach(async ({ page }) => {
+    // We mock the clock so that we don't need to wait for time driven events
+    // to verify functionality.
+    await page.clock.install({ time: MISSION_TIME });
+    await page.clock.resume();
+
+    // Go to baseURL
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    displayLayout = await createDomainObjectWithDefaults(page, { type: 'Display Layout' });
+
+    // Create Example Imagery inside Display Layout
+    await createImageryViewWithShortDelay(page, {
+      name: 'Unnamed Example Imagery',
+      parent: displayLayout.uuid
+    });
+
+    // set realtime mode
+    await navigateToObjectWithRealTime(
+      page,
+      displayLayout.url,
+      `${FIVE_MINUTES}`,
+      `${THIRTY_SECONDS}`
+    );
+  });
+
+  test('Imagery Time Bounding', async ({ page }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/5265'
+    });
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/7825'
+    });
+
+    // Edit mode
+    await page.getByLabel('Edit Object').click();
+
+    // Click on example imagery to expose toolbar
+    await page.locator('.c-so-view__header').click();
+
+    // Adjust object height
+    await page.locator('div[title="Resize object height"] > input').click();
+    await page.locator('div[title="Resize object height"] > input').fill('50');
+
+    // Adjust object width
+    await page.locator('div[title="Resize object width"] > input').click();
+    await page.locator('div[title="Resize object width"] > input').fill('50');
+
+    await expect(page.getByLabel('Image Thumbnail from').last()).toBeInViewport();
+
+    // verify that old images are discarded
+    const lastImageInBounds = page.getByLabel('Image thumbnail from').first();
+    const lastImageTimestamp = await lastImageInBounds.getAttribute('title');
+    expect(lastImageTimestamp).not.toBeNull();
+
+    // go forward in time to ensure old images are discarded
+    await page.clock.fastForward(IMAGE_LOAD_DELAY);
+    await page.clock.resume();
+    await expect(page.getByLabel(lastImageTimestamp)).toBeHidden();
+
+    // go way forward in time to ensure multiple images are discarded
+    const IMAGES_TO_DISCARD_COUNT = 5;
+
+    const lastImageToDiscard = page
+      .getByLabel('Image thumbnail from')
+      .nth(IMAGES_TO_DISCARD_COUNT - 1);
+    const lastImageToDiscardTimestamp = await lastImageToDiscard.getAttribute('title');
+    expect(lastImageToDiscardTimestamp).not.toBeNull();
+
+    const imageAfterLastImageToDiscard = page
+      .getByLabel('Image thumbnail from')
+      .nth(IMAGES_TO_DISCARD_COUNT);
+    const imageAfterLastImageToDiscardTimestamp =
+      await imageAfterLastImageToDiscard.getAttribute('title');
+    expect(imageAfterLastImageToDiscardTimestamp).not.toBeNull();
+
+    await page.clock.fastForward(IMAGE_LOAD_DELAY * IMAGES_TO_DISCARD_COUNT);
+    await page.clock.resume();
+
+    await expect(page.getByLabel(lastImageToDiscardTimestamp)).toBeHidden();
+    await expect(page.getByLabel(imageAfterLastImageToDiscardTimestamp)).toBeVisible();
+  });
+
+  test('Get background-image url from background-image css prop @clock', async ({ page }) => {
+    await assertBackgroundImageUrlFromBackgroundCss(page);
+  });
+});
+
+test.describe('Example Imagery in Flexible layout with Controlled Clock @clock', () => {
+  let flexibleLayout;
+
+  test.beforeEach(async ({ page }) => {
+    // We mock the clock so that we don't need to wait for time driven events
+    // to verify functionality.
+    await page.clock.install({ time: MISSION_TIME });
+    await page.clock.resume();
+
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    flexibleLayout = await createDomainObjectWithDefaults(page, { type: 'Flexible Layout' });
+
+    // Create Example Imagery inside the Flexible Layout
+    await createImageryViewWithShortDelay(page, {
+      name: 'Unnamed Example Imagery',
+      parent: flexibleLayout.uuid
+    });
+
+    // set realtime mode
+    await navigateToObjectWithRealTime(
+      page,
+      flexibleLayout.url,
+      `${FIVE_MINUTES}`,
+      `${THIRTY_SECONDS}`
+    );
+
+    // Wait for image thumbnail auto-scroll to complete
+    await expect(page.getByLabel('Image Thumbnail from').last()).toBeInViewport();
+  });
+
+  test('Imagery Time Bounding @clock', async ({ page, browserName }) => {
+    test.fixme(browserName === 'firefox', 'This test needs to be updated to work with firefox');
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/5326'
+    });
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/7825'
+    });
+
+    // verify that old images are discarded
+    const lastImageInBounds = page.getByLabel('Image thumbnail from').first();
+    const lastImageTimestamp = await lastImageInBounds.getAttribute('title');
+    expect(lastImageTimestamp).not.toBeNull();
+
+    // go forward in time to ensure old images are discarded
+    await page.clock.fastForward(IMAGE_LOAD_DELAY);
+    await page.clock.resume();
+    await expect(page.getByLabel(lastImageTimestamp)).toBeHidden();
+
+    // go way forward in time to ensure multiple images are discarded
+    const IMAGES_TO_DISCARD_COUNT = 5;
+
+    const lastImageToDiscard = page
+      .getByLabel('Image thumbnail from')
+      .nth(IMAGES_TO_DISCARD_COUNT - 1);
+    const lastImageToDiscardTimestamp = await lastImageToDiscard.getAttribute('title');
+    expect(lastImageToDiscardTimestamp).not.toBeNull();
+
+    const imageAfterLastImageToDiscard = page
+      .getByLabel('Image thumbnail from')
+      .nth(IMAGES_TO_DISCARD_COUNT);
+    const imageAfterLastImageToDiscardTimestamp =
+      await imageAfterLastImageToDiscard.getAttribute('title');
+    expect(imageAfterLastImageToDiscardTimestamp).not.toBeNull();
+
+    await page.clock.fastForward(IMAGE_LOAD_DELAY * IMAGES_TO_DISCARD_COUNT);
+    await page.clock.resume();
+
+    await expect(page.getByLabel(lastImageToDiscardTimestamp)).toBeHidden();
+    await expect(page.getByLabel(imageAfterLastImageToDiscardTimestamp)).toBeVisible();
+  });
+
+  test('Get background-image url from background-image css prop @clock', async ({ page }) => {
+    await assertBackgroundImageUrlFromBackgroundCss(page);
+  });
+});
+
+test.describe('Example Imagery in Tabs View with Controlled Clock @clock', () => {
+  let timeStripObject;
+
+  test.beforeEach(async ({ page }) => {
+    // We mock the clock so that we don't need to wait for time driven events
+    // to verify functionality.
+    await page.clock.install({ time: MISSION_TIME });
+    await page.clock.resume();
+
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    timeStripObject = await createDomainObjectWithDefaults(page, { type: 'Tabs View' });
+    await page.goto(timeStripObject.url);
+
+    /* Create Example Imagery with minimum Image Load Delay */
+    // Click the Create button
+    await page.getByRole('button', { name: 'Create' }).click();
+
+    // Click text=Example Imagery
+    await page.getByRole('menuitem', { name: 'Example Imagery' }).click();
+
+    // Clear and set Image load delay to minimum value
+    await page.locator('input[type="number"]').clear();
+    await page.locator('input[type="number"]').fill(`${IMAGE_LOAD_DELAY}`);
+
+    await page.getByLabel('Save').click();
+
+    await expect(page.locator('.l-browse-bar__object-name')).toContainText(
+      'Unnamed Example Imagery'
+    );
+
+    // set realtime mode
+    await navigateToObjectWithRealTime(
+      page,
+      timeStripObject.url,
+      `${FIVE_MINUTES}`,
+      `${THIRTY_SECONDS}`
+    );
+
+    // Wait for image thumbnail auto-scroll to complete
+    await expect(page.getByLabel('Image Thumbnail from').last()).toBeInViewport();
+  });
+
+  test('Imagery Time Bounding @clock', async ({ page }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/5265'
+    });
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/7825'
+    });
+
+    // verify that old images are discarded
+    const lastImageInBounds = page.getByLabel('Image thumbnail from').first();
+    const lastImageTimestamp = await lastImageInBounds.getAttribute('title');
+    expect(lastImageTimestamp).not.toBeNull();
+
+    // go forward in time to ensure old images are discarded
+    await page.clock.fastForward(IMAGE_LOAD_DELAY);
+    await page.clock.resume();
+    await expect(page.getByLabel(lastImageTimestamp)).toBeHidden();
+
+    // go way forward in time to ensure multiple images are discarded
+    const IMAGES_TO_DISCARD_COUNT = 5;
+
+    const lastImageToDiscard = page
+      .getByLabel('Image thumbnail from')
+      .nth(IMAGES_TO_DISCARD_COUNT - 1);
+    const lastImageToDiscardTimestamp = await lastImageToDiscard.getAttribute('title');
+    expect(lastImageToDiscardTimestamp).not.toBeNull();
+
+    const imageAfterLastImageToDiscard = page
+      .getByLabel('Image thumbnail from')
+      .nth(IMAGES_TO_DISCARD_COUNT);
+    const imageAfterLastImageToDiscardTimestamp =
+      await imageAfterLastImageToDiscard.getAttribute('title');
+    expect(imageAfterLastImageToDiscardTimestamp).not.toBeNull();
+
+    await page.clock.fastForward(IMAGE_LOAD_DELAY * IMAGES_TO_DISCARD_COUNT);
+    await page.clock.resume();
+
+    await expect(page.getByLabel(lastImageToDiscardTimestamp)).toBeHidden();
+    await expect(page.getByLabel(imageAfterLastImageToDiscardTimestamp)).toBeVisible();
+  });
+
+  test('Get background-image url from background-image css prop @clock', async ({ page }) => {
+    await assertBackgroundImageUrlFromBackgroundCss(page);
+  });
+});
+
+test.describe('Example Imagery in Time Strip with Controlled Clock @clock', () => {
+  let timeStripObject;
+
+  test.beforeEach(async ({ page }) => {
+    // We mock the clock so that we don't need to wait for time driven events
+    // to verify functionality.
+    await page.clock.install({ time: MISSION_TIME });
+    await page.clock.resume();
+
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    timeStripObject = await createDomainObjectWithDefaults(page, { type: 'Time Strip' });
+    await page.goto(timeStripObject.url);
+
+    /* Create Example Imagery with minimum Image Load Delay */
+    // Click the Create button
+    await page.getByRole('button', { name: 'Create' }).click();
+
+    // Click text=Example Imagery
+    await page.getByRole('menuitem', { name: 'Example Imagery' }).click();
+
+    // Clear and set Image load delay to minimum value
+    await page.locator('input[type="number"]').clear();
+    await page.locator('input[type="number"]').fill(`${IMAGE_LOAD_DELAY}`);
+
+    await page.getByLabel('Save').click();
+
+    await expect(page.locator('.l-browse-bar__object-name')).toContainText(
+      'Unnamed Example Imagery'
+    );
+
+    // set realtime mode
+    await navigateToObjectWithRealTime(
+      page,
+      timeStripObject.url,
+      `${FIVE_MINUTES}`,
+      `${THIRTY_SECONDS}`
+    );
+
+    // Wait for image thumbnail auto-scroll to complete
+    await expect(page.getByLabel('wrapper-').last()).toBeInViewport();
+  });
+
+  test('Imagery Time Bounding @clock', async ({ page }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/5265'
+    });
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/7825'
+    });
+
+    // verify that old images are discarded
+    const lastImageInBounds = page.getByLabel('wrapper-').first();
+    const lastImageTimestamp = await lastImageInBounds.getAttribute('aria-label');
+    expect(lastImageTimestamp).not.toBeNull();
+
+    // go forward in time to ensure old images are discarded
+    await page.clock.fastForward(IMAGE_LOAD_DELAY);
+    await page.clock.resume();
+    await expect(page.getByLabel(lastImageTimestamp)).toBeHidden();
+
+    // go way forward in time to ensure multiple images are discarded
+    const IMAGES_TO_DISCARD_COUNT = 5;
+
+    const lastImageToDiscard = page.getByLabel('wrapper-').nth(IMAGES_TO_DISCARD_COUNT - 1);
+    const lastImageToDiscardTimestamp = await lastImageToDiscard.getAttribute('aria-label');
+    expect(lastImageToDiscardTimestamp).not.toBeNull();
+
+    const imageAfterLastImageToDiscard = page.getByLabel('wrapper-').nth(IMAGES_TO_DISCARD_COUNT);
+    const imageAfterLastImageToDiscardTimestamp =
+      await imageAfterLastImageToDiscard.getAttribute('aria-label');
+    expect(imageAfterLastImageToDiscardTimestamp).not.toBeNull();
+
+    await page.clock.fastForward(IMAGE_LOAD_DELAY * IMAGES_TO_DISCARD_COUNT);
+    await page.clock.resume();
+
+    await expect(page.getByLabel(lastImageToDiscardTimestamp)).toBeHidden();
+    await expect(page.getByLabel(imageAfterLastImageToDiscardTimestamp)).toBeVisible();
+  });
+});
+
+/**
+ * @param {import('@playwright/test').Page} page
+ */
+async function assertBackgroundImageUrlFromBackgroundCss(page) {
+  const backgroundImage = page.getByLabel('Focused Image Element');
+  const backgroundImageUrl = await backgroundImage.evaluate((el) => {
+    return window
+      .getComputedStyle(el)
+      .getPropertyValue('background-image')
+      .match(/url\(([^)]+)\)/)[1];
+  });
+
+  // go forward in time to ensure old images are discarded
+  await page.clock.fastForward(IMAGE_LOAD_DELAY);
+  await page.clock.resume();
+  await expect(backgroundImage).not.toHaveJSProperty('background-image', backgroundImageUrl);
+}

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

@@ -0,0 +1,93 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, 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 verifies modifying the image location of the example imagery object.
+ */
+
+import { createDomainObjectWithDefaults } from '../../../../appActions.js';
+import { expect, test } from '../../../../pluginFixtures.js';
+
+test.describe('Example Imagery Object Custom Images', () => {
+  let exampleImagery;
+  test.beforeEach(async ({ page }) => {
+    //Go to baseURL
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    // Create a default 'Example Imagery' object
+    exampleImagery = await createDomainObjectWithDefaults(page, {
+      name: 'Example Imagery',
+      type: 'Example Imagery'
+    });
+
+    // Verify that the created object is focused
+    await expect(page.locator('.l-browse-bar__object-name')).toContainText(exampleImagery.name);
+    await page.getByLabel('Focused Image Element').hover({ trial: true });
+
+    // Wait for image thumbnail auto-scroll to complete
+    await expect(page.getByLabel('Image Thumbnail from').last()).toBeInViewport();
+  });
+  // this requires CORS to be enabled in some fashion
+  test.fixme('Can right click on image and save it as a file', async ({ page }) => {});
+  test('Can provide a custom image location for the example imagery object', async ({ page }) => {
+    // Modify Example Imagery to create a really stable image which will never let us down
+    await page.getByRole('button', { name: 'More actions' }).click();
+    await page.getByRole('menuitem', { name: 'Edit Properties...' }).click();
+    await page
+      .locator('#imageLocation-textarea')
+      .fill(
+        'https://raw.githubusercontent.com/nasa/openmct/554f77c42fec81cf0f63e62b278012cb08d82af9/e2e/test-data/rick.jpg,https://raw.githubusercontent.com/nasa/openmct/554f77c42fec81cf0f63e62b278012cb08d82af9/e2e/test-data/rick.jpg'
+      );
+    await page.getByRole('button', { name: 'Save' }).click();
+    await page.reload({ waitUntil: 'domcontentloaded' });
+
+    // Wait for the thumbnails to finish their scroll animation
+    // (Wait until the rightmost thumbnail is in view)
+    await expect(page.getByLabel('Image Thumbnail from').last()).toBeInViewport();
+
+    await expect(page.getByLabel('Image Wrapper')).toBeVisible();
+  });
+  test.fixme('Can provide a custom image with spaces in name', async ({ page }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/7903'
+    });
+    await page.goto(exampleImagery.url, { waitUntil: 'domcontentloaded' });
+
+    // Modify Example Imagery to create a really stable image which will never let us down
+    await page.getByRole('button', { name: 'More actions' }).click();
+    await page.getByRole('menuitem', { name: 'Edit Properties...' }).click();
+    await page
+      .locator('#imageLocation-textarea')
+      .fill(
+        'https://raw.githubusercontent.com/nasa/openmct/d8c64f183400afb70137221fc1a035e091bea912/e2e/test-data/rick%20space%20roll.jpg'
+      );
+    await page.getByRole('button', { name: 'Save' }).click();
+    await page.reload({ waitUntil: 'domcontentloaded' });
+
+    // Wait for the thumbnails to finish their scroll animation
+    // (Wait until the rightmost thumbnail is in view)
+    await expect(page.getByLabel('Image Thumbnail from').last()).toBeInViewport();
+
+    await expect(page.getByLabel('Image Wrapper')).toBeVisible();
+  });
+});

e2e/tests/functional/plugins/inspectorDataVisualization/numericData.e2e.spec.js

@@ -54,8 +54,8 @@ test.describe('Testing numeric data with inspector data visualization (i.e., dat
 
     await page.goto(exampleDataVisualizationSource.url);
 
-    await page.getByRole('tab', { name: 'Data Visualization' }).click();
     await page.getByRole('cell', { name: /First Sine Wave Generator/ }).click();
+    await page.getByRole('tab', { name: 'Data Visualization' }).click();
     await expect(page.getByText('Numeric Data')).toBeVisible();
     await expect(
       page.locator('span.plot-series-name', { hasText: 'First Sine Wave Generator Hz' })
@@ -63,6 +63,7 @@ test.describe('Testing numeric data with inspector data visualization (i.e., dat
     await expect(page.locator('.js-series-data-loaded')).toBeVisible();
 
     await page.getByRole('cell', { name: /Second Sine Wave Generator/ }).click();
+    await page.getByRole('tab', { name: 'Data Visualization' }).click();
     await expect(page.getByText('Numeric Data')).toBeVisible();
     await expect(
       page.locator('span.plot-series-name', { hasText: 'Second Sine Wave Generator Hz' })
@@ -77,6 +78,8 @@ test.describe('Testing numeric data with inspector data visualization (i.e., dat
     // ensure our new tab's title is correct
     const newPage = await pagePromise;
     await newPage.waitForLoadState();
+    await page.getByRole('tab', { name: 'Data Visualization' }).click();
+
     // expect new tab title to contain 'Second Sine Wave Generator'
     await expect(newPage).toHaveTitle('Second Sine Wave Generator');
 

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

@@ -53,7 +53,6 @@ test.describe('Testing LAD table configuration', () => {
   test('in edit mode, LAD Tables provide ability to hide columns', async ({ page }) => {
     // Edit LAD table
     await page.getByLabel('Edit Object').click();
-    await page.getByRole('tab', { name: 'LAD Table Configuration' }).click();
 
     // make sure headers are visible initially
     await expect(page.getByRole('columnheader', { name: 'Timestamp', exact: true })).toBeVisible();
@@ -114,7 +113,6 @@ test.describe('Testing LAD table configuration', () => {
 
     // Edit LAD table
     await page.getByLabel('Edit Object').click();
-    await page.getByRole('tab', { name: 'LAD Table Configuration' }).click();
 
     // show timestamp column
     await page.getByLabel('Timestamp', { exact: true }).check();
@@ -142,7 +140,6 @@ test.describe('Testing LAD table configuration', () => {
 
     // Edit LAD table
     await page.getByLabel('Edit Object').click();
-    await page.getByRole('tab', { name: 'LAD Table Configuration' }).click();
 
     // show units, type, and WATCH columns
     await page.getByLabel('Units').check();
@@ -182,7 +179,6 @@ test.describe('Testing LAD table configuration', () => {
 
     // Edit LAD table
     await page.getByLabel('Edit Object').click();
-    await page.getByRole('tab', { name: 'LAD Table Configuration' }).click();
 
     // make sure Sine Wave headers are visible initially too
     await expect(page.getByRole('columnheader', { name: 'Timestamp', exact: true })).toBeVisible();

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

@@ -26,7 +26,10 @@ This test suite is dedicated to tests which verify the basic operations surround
 
 import { fileURLToPath } from 'url';
 
-import { createDomainObjectWithDefaults } from '../../../../appActions.js';
+import {
+  createDomainObjectWithDefaults,
+  renameCurrentObjectFromBrowseBar
+} from '../../../../appActions.js';
 import { copy, paste, selectAll } from '../../../../helper/hotkeys/hotkeys.js';
 import * as nbUtils from '../../../../helper/notebookUtils.js';
 import { expect, streamToString, test } from '../../../../pluginFixtures.js';
@@ -596,4 +599,61 @@ test.describe('Notebook entry tests', () => {
     await expect(await page.locator(`text="${TEST_TEXT.repeat(1)}"`).count()).toEqual(1);
     await expect(await page.locator(`text="${TEST_TEXT.repeat(2)}"`).count()).toEqual(0);
   });
+
+  test('When changing the name of a notebook in the browse bar, new notebook changes are not lost', async ({
+    page
+  }) => {
+    const TEST_TEXT = 'Do not lose me!';
+    const FIRST_NEW_NAME = 'New Name';
+    const SECOND_NEW_NAME = 'Second New Name';
+
+    await page.goto(notebookObject.url);
+
+    await page.getByLabel('Expand My Items folder').click();
+
+    await renameCurrentObjectFromBrowseBar(page, FIRST_NEW_NAME);
+
+    // verify the name change in tree and browse bar
+    await verifyNameChange(page, FIRST_NEW_NAME);
+
+    // enter one entry
+    await enterAndCommitTextEntry(page, TEST_TEXT);
+
+    // verify the entry is present
+    await expect(await page.locator(`text="${TEST_TEXT}"`).count()).toEqual(1);
+
+    // change the name
+    await renameCurrentObjectFromBrowseBar(page, SECOND_NEW_NAME);
+
+    // verify the name change in tree and browse bar
+    await verifyNameChange(page, SECOND_NEW_NAME);
+
+    // verify the entry is still present
+    await expect(await page.locator(`text="${TEST_TEXT}"`).count()).toEqual(1);
   });
+});
+
+/**
+ * Enter text into the last notebook entry and commit it.
+ *
+ * @param {import('@playwright/test').Page} page
+ * @param {string} text
+ */
+async function enterAndCommitTextEntry(page, text) {
+  await nbUtils.addNotebookEntry(page);
+  await nbUtils.enterTextInLastEntry(page, text);
+  await nbUtils.commitEntry(page);
+}
+
+/**
+ * Verify the name change in the tree and browse bar.
+ *
+ * @param {import('@playwright/test').Page} page
+ * @param {string} newName
+ */
+async function verifyNameChange(page, newName) {
+  await expect(
+    page.getByRole('treeitem').locator('.is-navigated-object .c-tree__item__name')
+  ).toHaveText(newName);
+  await expect(page.getByLabel('Browse bar object name')).toHaveText(newName);
+}

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

@@ -65,9 +65,11 @@ test.describe('Tagging in Notebooks @addInit', () => {
   });
   test('Can add tags with blank entry', async ({ page }) => {
     await createDomainObjectWithDefaults(page, { type: 'Notebook' });
-    await page.getByRole('tab', { name: 'Annotations' }).click();
 
     await enterTextEntry(page, '');
+
+    await page.getByRole('tab', { name: 'Annotations' }).click();
+
     await page.hover(`button:has-text("Add Tag")`);
     await page.locator(`button:has-text("Add Tag")`).click();
 

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

@@ -47,8 +47,6 @@ test.describe('Notebook Tests with CouchDB @couchdb @network', () => {
   });
 
   test('Inspect Notebook Entry Network Requests', async ({ page }) => {
-    //Ensure we're on the annotations Tab in the inspector
-    await page.getByText('Annotations').click();
     // Expand sidebar
     await page.locator('.c-notebook__toggle-nav-button').click();
 
@@ -86,6 +84,9 @@ test.describe('Notebook Tests with CouchDB @couchdb @network', () => {
     await page.waitForLoadState('networkidle');
     expect(notebookElementsRequests.length).toBeLessThanOrEqual(2);
 
+    //Ensure we're on the annotations Tab in the inspector
+    await page.getByText('Annotations').click();
+
     // Add some tags
     // Network Requests are for each tag creation are:
     // 1) Getting the original path of the parent object
@@ -180,8 +181,8 @@ test.describe('Notebook Tests with CouchDB @couchdb @network', () => {
       type: 'issue',
       description: 'https://github.com/akhenry/openmct-yamcs/issues/69'
     });
-    await page.getByText('Annotations').click();
     await nbUtils.enterTextEntry(page, 'First Entry');
+    await page.getByText('Annotations').click();
 
     // Add three tags
     await addTagAndAwaitNetwork(page, 'Science');

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

@@ -0,0 +1,72 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, 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 { expect, test } from '../../../../pluginFixtures.js';
+
+test.describe('The performance indicator', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+    await page.evaluate(() => {
+      const openmct = window.openmct;
+      openmct.install(openmct.plugins.PerformanceIndicator());
+    });
+  });
+
+  test('can be installed', ({ page }) => {
+    const performanceIndicator = page.getByTitle('Performance Indicator');
+    expect(performanceIndicator).toBeDefined();
+  });
+
+  test('Shows a numerical FPS value', async ({ page }) => {
+    // Frames Per Second. We need to wait at least 1 second to get a value.
+    // eslint-disable-next-line playwright/no-wait-for-timeout
+    await page.waitForTimeout(1000);
+    await expect(page.getByTitle('Performance Indicator')).toHaveText(/\d\d? fps/);
+  });
+
+  test('Supports showing optional extended performance information in an overlay for debugging', async ({
+    page
+  }) => {
+    const performanceMeasurementLabel = 'Some measurement';
+    const performanceMeasurementValue = 'Some value';
+
+    await page.evaluate(
+      ({ performanceMeasurementLabel: label, performanceMeasurementValue: value }) => {
+        const openmct = window.openmct;
+        openmct.performance.measurements.set(label, value);
+      },
+      { performanceMeasurementLabel, performanceMeasurementValue }
+    );
+    const performanceIndicator = page.getByTitle('Performance Indicator');
+    await performanceIndicator.click();
+    //Performance overlay is a crude debugging tool, it's evaluated once per second.
+    // eslint-disable-next-line playwright/no-wait-for-timeout
+    await page.waitForTimeout(1000);
+    const performanceOverlay = page.getByTitle('Performance Overlay');
+    await expect(performanceOverlay).toBeVisible();
+    await expect(performanceOverlay).toHaveText(new RegExp(`${performanceMeasurementLabel}.*`));
+    await expect(performanceOverlay).toHaveText(new RegExp(`.*${performanceMeasurementValue}`));
+
+    //Confirm that it disappears if we click on it again.
+    await performanceIndicator.click();
+    await expect(performanceOverlay).toBeHidden();
+  });
+});

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

@@ -100,6 +100,9 @@ test.describe('Overlay Plot', () => {
     await page.getByLabel('Expand By Default').check();
     await page.getByLabel('Save').click();
     await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
+    await page.getByRole('tab', { name: 'Config' }).click();
+
     // Assert that the legend is now open
     await expect(page.getByLabel('Plot Legend Collapsed')).toBeHidden();
     await expect(page.getByLabel('Plot Legend Expanded')).toBeVisible();
@@ -111,6 +114,9 @@ test.describe('Overlay Plot', () => {
 
     // Assert that the legend is expanded on page load
     await page.reload();
+
+    await page.getByRole('tab', { name: 'Config' }).click();
+
     await expect(page.getByLabel('Plot Legend Collapsed')).toBeHidden();
     await expect(page.getByLabel('Plot Legend Expanded')).toBeVisible();
     await expect(page.getByRole('cell', { name: 'Name' })).toBeVisible();

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

@@ -108,4 +108,42 @@ test.describe('Plot Controls', () => {
     // Expect before and after plot points to match
     await expect(plotPixelSizeAtPause).toEqual(plotPixelSizeAfterWait);
   });
+
+  /*
+  Test to verify that switching a plot's time context from global to
+  its own independent time context and then back to global context works correctly.
+
+  After switching from fixed time mode (ITC) to real time mode (global context),
+  the pause control for the plot should be available, indicating that it is following the right context.
+  */
+  test('Plots follow the right time context', async ({ page }) => {
+    // Set global time conductor to real-time mode
+    await setRealTimeMode(page);
+
+    // hover over plot for plot controls
+    await page.getByLabel('Plot Canvas').hover();
+    // Ensure pause control is visible since global time conductor is in Real time mode.
+    await expect(page.getByTitle('Pause incoming real-time data')).toBeVisible();
+
+    // Toggle independent time conductor ON
+    await page.getByLabel('Enable Independent Time Conductor').click();
+
+    // Bring up the independent time conductor popup and switch to fixed time mode
+    await page.getByLabel('Independent Time Conductor Settings').click();
+    await page.getByLabel('Independent Time Conductor Mode Menu').click();
+    await page.getByRole('menuitem', { name: /Fixed Timespan/ }).click();
+
+    // hover over plot for plot controls
+    await page.getByLabel('Plot Canvas').hover();
+    // Ensure pause control is no longer visible since the plot is following the independent time context
+    await expect(page.getByTitle('Pause incoming real-time data')).toBeHidden();
+
+    // Toggle independent time conductor OFF - Note that the global time conductor is still in Real time mode
+    await page.getByLabel('Disable Independent Time Conductor').click();
+
+    // hover over plot for plot controls
+    await page.getByLabel('Plot Canvas').hover();
+    // Ensure pause control is visible since the global time conductor is in real time mode
+    await expect(page.getByTitle('Pause incoming real-time data')).toBeVisible();
+  });
 });

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

@@ -0,0 +1,58 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2025, 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 testing the rendering and interaction of plots.
+ *
+ */
+
+import { createDomainObjectWithDefaults } from '../../../../appActions.js';
+import { expect, test } from '../../../../pluginFixtures.js';
+
+test.describe('Plot Controls in compact mode', () => {
+  let timeStrip;
+
+  test.beforeEach(async ({ page }) => {
+    // Open a browser, navigate to the main page, and wait until all networkevents to resolve
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+    timeStrip = await createDomainObjectWithDefaults(page, {
+      type: 'Time Strip'
+    });
+
+    // Create an overlay plot with a sine wave generator
+    await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      parent: timeStrip.uuid
+    });
+    await page.goto(`${timeStrip.url}`);
+  });
+
+  test('Plots show cursor guides', async ({ page }) => {
+    // hover over plot for plot controls
+    await page.getByLabel('Plot Canvas').hover();
+    // click on cursor guides control
+    await page.getByTitle('Toggle cursor guides').click();
+    await page.getByLabel('Plot Canvas').hover();
+    await expect(page.getByLabel('Vertical cursor guide')).toBeVisible();
+    await expect(page.getByLabel('Horizontal cursor guide')).toBeVisible();
+  });
+});

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

@@ -0,0 +1,244 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, 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.
+ *****************************************************************************/
+
+/*
+Tests to verify log plot functionality when objects are missing
+*/
+
+import { createDomainObjectWithDefaults } from '../../../../appActions.js';
+import { expect, test } from '../../../../pluginFixtures.js';
+
+const SWG_NAME = 'Sine Wave Generator';
+const OVERLAY_PLOT_NAME = 'Overlay Plot';
+const STACKED_PLOT_NAME = 'Stacked Plot';
+
+test.describe('For a default Plot View, Plot View Action:', () => {
+  let download;
+
+  test.beforeEach(async ({ page }) => {
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    const plot = await createDomainObjectWithDefaults(page, {
+      type: SWG_NAME,
+      name: SWG_NAME
+    });
+
+    await page.goto(plot.url);
+
+    // Set up dialog handler before clicking the export button
+    await page.getByLabel('More actions').click();
+  });
+
+  test.afterEach(async ({ page }) => {
+    if (download) {
+      await download.cancel();
+    }
+  });
+
+  test('Export as PNG, will suggest the correct default filename', async ({ page }) => {
+    // Start waiting for download before clicking. Note no await.
+    const downloadPromise = page.waitForEvent('download');
+
+    // trigger the download
+    await page.getByLabel('Export as PNG').click();
+
+    download = await downloadPromise;
+
+    // Verify the filename contains the expected pattern
+    expect(download.suggestedFilename()).toBe(`${SWG_NAME} - plot.png`);
+  });
+
+  test('Export as JPG, will suggest the correct default filename', async ({ page }) => {
+    // Start waiting for download before clicking. Note no await.
+    const downloadPromise = page.waitForEvent('download');
+
+    // trigger the download
+    await page.getByLabel('Export as JPG').click();
+
+    download = await downloadPromise;
+
+    // Verify the filename contains the expected pattern
+    expect(download.suggestedFilename()).toBe(`${SWG_NAME} - plot.jpeg`);
+  });
+});
+
+test.describe('For an Overlay Plot View, Plot View Action:', () => {
+  let download;
+
+  test.beforeEach(async ({ page }) => {
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    const overlayPlot = await createDomainObjectWithDefaults(page, {
+      type: OVERLAY_PLOT_NAME,
+      name: OVERLAY_PLOT_NAME
+    });
+
+    await createDomainObjectWithDefaults(page, {
+      type: SWG_NAME,
+      name: SWG_NAME,
+      parent: overlayPlot.uuid
+    });
+
+    await page.goto(overlayPlot.url);
+
+    // Set up dialog handler before clicking the export button
+    await page.getByLabel('More actions').click();
+  });
+
+  test.afterEach(async ({ page }) => {
+    if (download) {
+      await download.cancel();
+    }
+  });
+
+  test('Export as PNG, will suggest the correct default filename', async ({ page }) => {
+    // Start waiting for download before clicking. Note no await.
+    const downloadPromise = page.waitForEvent('download');
+
+    // trigger the download
+    await page.getByLabel('Export as PNG').click();
+
+    download = await downloadPromise;
+
+    // Verify the filename contains the expected pattern
+    expect(download.suggestedFilename()).toBe(`${OVERLAY_PLOT_NAME} - plot.png`);
+  });
+
+  test('Export as JPG, will suggest the correct default filename', async ({ page }) => {
+    // Start waiting for download before clicking. Note no await.
+    const downloadPromise = page.waitForEvent('download');
+
+    // trigger the download
+    await page.getByLabel('Export as JPG').click();
+
+    download = await downloadPromise;
+
+    // Verify the filename contains the expected pattern
+    expect(download.suggestedFilename()).toBe(`${OVERLAY_PLOT_NAME} - plot.jpeg`);
+  });
+});
+
+test.describe('For a Stacked Plot View, Plot View Action:', () => {
+  let download;
+
+  test.beforeEach(async ({ page }) => {
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    const stackedPlot = await createDomainObjectWithDefaults(page, {
+      type: STACKED_PLOT_NAME,
+      name: STACKED_PLOT_NAME
+    });
+
+    await createDomainObjectWithDefaults(page, {
+      type: SWG_NAME,
+      name: SWG_NAME,
+      parent: stackedPlot.uuid
+    });
+
+    await page.goto(stackedPlot.url);
+
+    // Set up dialog handler before clicking the export button
+    await page.getByLabel('More actions').click();
+  });
+
+  test.afterEach(async ({ page }) => {
+    if (download) {
+      await download.cancel();
+    }
+  });
+
+  test('Export as PNG, will suggest the correct default filename', async ({ page }) => {
+    // Start waiting for download before clicking. Note no await.
+    const downloadPromise = page.waitForEvent('download');
+
+    // trigger the download
+    await page.getByLabel('Export as PNG').click();
+
+    download = await downloadPromise;
+
+    // Verify the filename contains the expected pattern
+    expect(download.suggestedFilename()).toBe(`${STACKED_PLOT_NAME} - stacked-plot.png`);
+  });
+
+  test('Export as JPG, will suggest the correct default filename', async ({ page }) => {
+    // Start waiting for download before clicking. Note no await.
+    const downloadPromise = page.waitForEvent('download');
+
+    // trigger the download
+    await page.getByLabel('Export as JPG').click();
+
+    download = await downloadPromise;
+
+    // Verify the filename contains the expected pattern
+    expect(download.suggestedFilename()).toBe(`${STACKED_PLOT_NAME} - stacked-plot.jpeg`);
+  });
+});
+
+test.describe('Plot View Action:', () => {
+  let download;
+
+  test.beforeEach(async ({ page }) => {
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    const plot = await createDomainObjectWithDefaults(page, {
+      type: SWG_NAME,
+      name: `!@#${SWG_NAME}!@#><`
+    });
+
+    await page.goto(plot.url);
+
+    // Set up dialog handler before clicking the export button
+    await page.getByLabel('More actions').click();
+  });
+
+  test.afterEach(async ({ page }) => {
+    if (download) {
+      await download.cancel();
+    }
+  });
+
+  test('Export as PNG saved filenames will not include invalid characters', async ({ page }) => {
+    // Start waiting for download before clicking. Note no await.
+    const downloadPromise = page.waitForEvent('download');
+
+    // trigger the download
+    await page.getByLabel('Export as PNG').click();
+
+    download = await downloadPromise;
+
+    // Verify the filename contains the expected pattern
+    expect(download.suggestedFilename()).toBe(`${SWG_NAME} - plot.png`);
+  });
+
+  test('Export as JPG saved filenames will not include invalid characters', async ({ page }) => {
+    // Start waiting for download before clicking. Note no await.
+    const downloadPromise = page.waitForEvent('download');
+
+    // trigger the download
+    await page.getByLabel('Export as JPG').click();
+
+    download = await downloadPromise;
+
+    // Verify the filename contains the expected pattern
+    expect(download.suggestedFilename()).toBe(`${SWG_NAME} - plot.jpeg`);
+  });
+});

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

@@ -50,7 +50,7 @@ test.describe('Plots work in Previews', () => {
     });
     const layoutGridHolder = page.getByLabel('Test Display Layout Layout Grid');
     await sineWaveGeneratorTreeItem.dragTo(layoutGridHolder);
-    await page.getByLabel('Save').click();
+    await page.getByLabel('Save', { exact: true }).click();
     await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
 
     // right click on the plot and select view large
@@ -67,7 +67,7 @@ test.describe('Plots work in Previews', () => {
     await page.getByLabel('Move Sub-object Frame').click();
     await page.getByText('View type').click();
     await page.getByText('Overlay Plot').click();
-    await page.getByLabel('Save').click();
+    await page.getByLabel('Save', { exact: true }).click();
     await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
     await expect(
       page.getByLabel('Test Display Layout Layout', { exact: true }).getByLabel('Plot Canvas')

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

@@ -152,14 +152,14 @@ test.describe('Stacked Plot', () => {
   }) => {
     await page.goto(stackedPlot.url);
 
-    await page.getByRole('tab', { name: 'Config' }).click();
-
     // Click on the 1st plot
     await page
       .getByLabel('Stacked Plot Item Sine Wave Generator A')
       .getByLabel('Plot Canvas')
       .click();
 
+    await page.getByRole('tab', { name: 'Config' }).click();
+
     // Assert that the inspector shows the Y Axis properties for swgA
     await expect(page.getByRole('heading', { name: 'Plot Series' })).toBeVisible();
     await expect(page.getByRole('heading', { name: 'Y Axis' })).toBeVisible();
@@ -172,6 +172,9 @@ test.describe('Stacked Plot', () => {
       .getByLabel('Stacked Plot Item Sine Wave Generator B')
       .getByLabel('Plot Canvas')
       .click();
+
+    await page.getByRole('tab', { name: 'Config' }).click();
+
     // Assert that the inspector shows the Y Axis properties for swgB
     await expect(page.getByRole('heading', { name: 'Plot Series' })).toBeVisible();
     await expect(page.getByRole('heading', { name: 'Y Axis' })).toBeVisible();
@@ -184,6 +187,9 @@ test.describe('Stacked Plot', () => {
       .getByLabel('Stacked Plot Item Sine Wave Generator C')
       .getByLabel('Plot Canvas')
       .click();
+
+    await page.getByRole('tab', { name: 'Config' }).click();
+
     // Assert that the inspector shows the Y Axis properties for swgB
     await expect(page.getByRole('heading', { name: 'Plot Series' })).toBeVisible();
     await expect(page.getByRole('heading', { name: 'Y Axis' })).toBeVisible();
@@ -194,7 +200,7 @@ test.describe('Stacked Plot', () => {
     // Go into edit mode
     await page.getByLabel('Edit Object').click();
 
-    await page.getByRole('tab', { name: 'Config' }).click();
+    // await page.getByRole('tab', { name: 'Config' }).click();
 
     // Click on the 1st plot
     await page.getByLabel('Stacked Plot Item Sine Wave Generator A').click();
@@ -233,11 +239,11 @@ test.describe('Stacked Plot', () => {
     // Go into edit mode
     await page.getByLabel('Edit Object').click();
 
-    await page.getByRole('tab', { name: 'Config' }).click();
-
     // Click on canvas for the 1st plot
     await page.getByLabel(`Stacked Plot Item ${swgA.name}`).click();
 
+    await page.getByRole('tab', { name: 'Config' }).click();
+
     // Expand config for the series
     await page.getByLabel('Expand Sine Wave Generator A Plot Series Options').click();
 
@@ -255,6 +261,8 @@ test.describe('Stacked Plot', () => {
     // Click on canvas for the 1st plot
     await page.getByLabel(`Stacked Plot Item ${swgA.name}`).click();
 
+    await page.getByRole('tab', { name: 'Config' }).click();
+
     // Expand config for the series
     await page.getByLabel('Expand Sine Wave Generator A Plot Series Options').click();
 

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

@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2023, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *

e2e/tests/functional/plugins/styling/conditionSetStyling.e2e.spec.js

@@ -0,0 +1,163 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, 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 verify the basic operations surrounding conditionSets and styling
+*/
+
+import {
+  createDomainObjectWithDefaults,
+  linkParameterToObject,
+  setRealTimeMode
+} from '../../../../appActions.js';
+import { MISSION_TIME } from '../../../../constants.js';
+import { expect, test } from '../../../../pluginFixtures.js';
+
+test.describe('Conditionally Styling, using a Condition Set', () => {
+  let stateGenerator;
+  let conditionSet;
+  let displayLayout;
+  const STATE_CHANGE_INTERVAL = '1';
+
+  test.beforeEach(async ({ page }) => {
+    // Install the clock and set the time to the mission time such that the state generator will be controllable
+    await page.clock.install({ time: MISSION_TIME });
+    await page.clock.resume();
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+    // Create Condition Set, State Generator, and Display Layout
+    conditionSet = await createDomainObjectWithDefaults(page, {
+      type: 'Condition Set',
+      name: 'Test Condition Set'
+    });
+    stateGenerator = await createDomainObjectWithDefaults(page, {
+      type: 'State Generator',
+      name: 'One Second State Generator'
+    });
+    // edit the state generator to have a 1 second update rate
+    await page.getByTitle('More actions').click();
+    await page.getByRole('menuitem', { name: 'Edit Properties...' }).click();
+    await page.getByLabel('State Duration (seconds)', { exact: true }).fill(STATE_CHANGE_INTERVAL);
+    await page.getByLabel('Save').click();
+
+    displayLayout = await createDomainObjectWithDefaults(page, {
+      type: 'Display Layout',
+      name: 'Test Display Layout'
+    });
+  });
+
+  test('Conditional styling, using a Condition Set, will style correctly based on the output @clock', async ({
+    page
+  }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/7840'
+    });
+
+    // set up the condition set to use the state generator
+    await page.goto(conditionSet.url, { waitUntil: 'domcontentloaded' });
+
+    // Add the State Generator to the Condition Set by dragging from the main tree
+    await page.getByLabel('Show selected item in tree').click();
+    await page
+      .getByRole('tree', {
+        name: 'Main Tree'
+      })
+      .getByRole('treeitem', {
+        name: stateGenerator.name
+      })
+      .dragTo(page.locator('#conditionCollection'));
+
+    // Add the state generator to the first criterion such that there is a condition named 'OFF' when the state generator is off
+    await page.getByLabel('Add Condition').click();
+    await page
+      .getByLabel('Criterion Telemetry Selection')
+      .selectOption({ label: stateGenerator.name });
+    await page.getByLabel('Criterion Metadata Selection').selectOption({ label: 'State' });
+    await page.getByLabel('Criterion Comparison Selection').selectOption({ label: 'is' });
+    await page.getByLabel('Condition Name Input').first().fill('OFF');
+    await page.getByLabel('Save').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
+    await linkParameterToObject(page, stateGenerator.name, displayLayout.name);
+
+    //Add a box to the display layout
+    await page.goto(displayLayout.url, { waitUntil: 'domcontentloaded' });
+    await page.getByLabel('Edit Object').click();
+
+    //Add a box to the display layout and move it to the right
+    //TEMP: Click the layout such that the state generator is deselected
+    await page.getByLabel('Test Display Layout Layout Grid').locator('div').nth(1).click();
+    await page.getByLabel('Add Drawing Object').click();
+    await page.getByText('Box').click();
+    await page.getByLabel('X:').click();
+    await page.getByLabel('X:').fill('10');
+    await page.getByLabel('X:').press('Enter');
+
+    // set up conditional styling such that the box is red when the state generator condition is 'OFF'
+    await page.getByRole('tab', { name: 'Styles' }).click();
+    await page.getByRole('button', { name: 'Use Conditional Styling...' }).click();
+    await page.getByLabel('Modal Overlay').getByLabel('Expand My Items folder').click();
+    await page.getByLabel('Modal Overlay').getByLabel(`Preview ${conditionSet.name}`).click();
+    await page.getByText('Ok').click();
+    await page.getByLabel('Set background color').first().click();
+    await page.getByLabel('#ff0000').click();
+    await page.getByLabel('Save', { exact: true }).click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
+    await setRealTimeMode(page);
+
+    //Pause at a time when the state generator is 'OFF' which is 20 minutes in the future
+    await page.clock.pauseAt(new Date(MISSION_TIME + 1200000));
+
+    const redBG = 'background-color: rgb(255, 0, 0);';
+    const defaultBG = 'background-color: rgb(102, 102, 102);';
+    const textElement = page.getByLabel('Alpha-numeric telemetry value').locator('div:first-child');
+    const styledElement = page.getByLabel('Box', { exact: true });
+
+    await page.clock.resume();
+
+    // Check if the style is red when text is 'OFF'
+    await expect(textElement).toHaveText('OFF');
+    await waitForStyleChange(styledElement, redBG);
+
+    // Fast forward to the next state change
+    await page.clock.fastForward(STATE_CHANGE_INTERVAL * 1000);
+
+    // Check if the style is not red when text is 'ON'
+    await expect(textElement).toHaveText('ON');
+    await waitForStyleChange(styledElement, defaultBG);
+  });
+});
+
+/**
+ * Wait for the style of an element to change to the expected style.
+ * @param {import('@playwright/test').Locator} element - The element to check.
+ * @param {string} expectedStyle - The expected style to wait for.
+ * @param {number} timeout - The timeout in milliseconds.
+ */
+async function waitForStyleChange(element, expectedStyle, timeout = 0) {
+  await expect(async () => {
+    const style = await element.getAttribute('style');
+
+    // eslint-disable-next-line playwright/prefer-web-first-assertions
+    expect(style).toBe(expectedStyle);
+  }).toPass({ timeout: 1000 }); // timeout allows for the style to be applied
+}

e2e/tests/functional/plugins/styling/conditional/displayLayoutConditionalStyling.e2e.spec.js

@@ -0,0 +1,114 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, 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 { fileURLToPath } from 'url';
+
+import {
+  createDomainObjectWithDefaults,
+  navigateToObjectWithRealTime
+} from '../../../../../appActions.js';
+import { expect, test } from '../../../../../pluginFixtures.js';
+
+const TINY_IMAGE_BASE64 =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIAQMAAAD+wSzIAAAABlBMVEX///+/v7+jQ3Y5AAAADklEQVQI12P4AIX8EAgALgAD/aNpbtEAAAAASUVORK5CYII';
+
+test.describe('Display Layout Conditional Styling', () => {
+  test.use({
+    storageState: fileURLToPath(
+      new URL('../../../../../test-data/condition_set_storage.json', import.meta.url)
+    )
+  });
+
+  let displayLayout;
+  test.beforeEach(async ({ page }) => {
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+    displayLayout = await createDomainObjectWithDefaults(page, {
+      type: 'Display Layout',
+      name: 'Test Display Layout'
+    });
+  });
+
+  test('Image Drawing Object can have visibility toggled conditionally', async ({ page }) => {
+    await page.getByLabel('Edit Object').click();
+
+    // Add Image Drawing Object to the layout
+    await page.getByLabel('Add Drawing Object').click();
+    await page.getByLabel('Image').click();
+    await page.getByLabel('Image URL').fill(TINY_IMAGE_BASE64);
+    await page.getByText('Ok').click();
+
+    // Use the "Test Condition Set" for conditional styling on the image
+    await page.getByRole('tab', { name: 'Styles' }).click();
+    await page.getByRole('button', { name: 'Use Conditional Styling...' }).click();
+    await page.getByLabel('Modal Overlay').getByLabel('Expand My Items folder').click();
+    await page.getByLabel('Modal Overlay').getByLabel('Preview Test Condition Set').click();
+    await page.getByText('Ok').click();
+
+    // Set the image to be hidden when the condition is met
+    await page.getByTitle('Visible').first().click();
+    await page.getByLabel('Save Style').first().click();
+    await page.getByLabel('Save', { exact: true }).click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
+    // Switch to real-time mode and verify that the image toggles visibility
+    await navigateToObjectWithRealTime(page, displayLayout.url);
+    await expect(page.getByLabel('Image View')).toBeVisible();
+    await expect(page.getByLabel('Image View')).toBeHidden();
+
+    // Reload the page and verify that the image toggles visibility
+    await page.reload({ waitUntil: 'domcontentloaded' });
+    await expect(page.getByLabel('Image View')).toBeVisible();
+    await expect(page.getByLabel('Image View')).toBeHidden();
+  });
+
+  test('Alphanumeric object can have visibility toggled conditionally', async ({ page }) => {
+    await page.getByLabel('Edit Object').click();
+
+    // Add Alphanumeric Object to the layout
+    await page.getByLabel('Expand My Items folder').click();
+    await page.getByLabel('Expand Test Condition Set').click();
+    await page.getByLabel('Preview VIPER Rover Heading').dragTo(page.getByLabel('Layout Grid'));
+
+    // Use the "Test Condition Set" for conditional styling on the alphanumeric
+    await page.getByRole('tab', { name: 'Styles' }).click();
+    await page.getByRole('button', { name: 'Use Conditional Styling...' }).click();
+    await page.getByLabel('Modal Overlay').getByLabel('Expand My Items folder').click();
+    await page.getByLabel('Modal Overlay').getByLabel('Preview Test Condition Set').click();
+    await page.getByText('Ok').click();
+
+    // Set the alphanumeric to be hidden when the condition is met
+    await page.getByTitle('Visible').first().click();
+    await page.getByLabel('Save Style').first().click();
+    await page.getByLabel('Save', { exact: true }).click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
+    // Switch to real-time mode and verify that the image toggles visibility
+    await navigateToObjectWithRealTime(page, displayLayout.url);
+    await expect(page.getByLabel('Alpha-numeric telemetry', { exact: true })).toBeVisible();
+    await expect(page.getByLabel('Alpha-numeric telemetry', { exact: true })).toBeHidden();
+
+    // Reload the page and verify that the alphanumeric toggles visibility
+    await page.reload({ waitUntil: 'domcontentloaded' });
+    await expect(page.getByLabel('Alpha-numeric telemetry', { exact: true })).toBeVisible();
+    await expect(page.getByLabel('Alpha-numeric telemetry', { exact: true })).toBeHidden();
+  });
+});

e2e/tests/functional/plugins/styling/stackedPlotStyling.e2e.spec.js

@@ -45,6 +45,8 @@ const setFontFamily = '"Andale Mono", sans-serif';
 
 test.describe('Stacked Plot styling', () => {
   let stackedPlot;
+  let overlayPlot1;
+  let overlayPlot2;
   test.beforeEach(async ({ page }) => {
     await page.goto('./', { waitUntil: 'domcontentloaded' });
 
@@ -54,17 +56,30 @@ test.describe('Stacked Plot styling', () => {
       name: 'StackedPlot1'
     });
 
+    // create two overlay plots
+    overlayPlot1 = await createDomainObjectWithDefaults(page, {
+      type: 'Overlay Plot',
+      name: 'Overlay Plot 1',
+      parent: stackedPlot.uuid
+    });
+
+    overlayPlot2 = await createDomainObjectWithDefaults(page, {
+      type: 'Overlay Plot',
+      name: 'Overlay Plot 2',
+      parent: stackedPlot.uuid
+    });
+
     // Create two SWGs and attach them to the Stacked Plot
     await createDomainObjectWithDefaults(page, {
       type: 'Sine Wave Generator',
       name: 'Sine Wave Generator 1',
-      parent: stackedPlot.uuid
+      parent: overlayPlot1.uuid
     });
 
     await createDomainObjectWithDefaults(page, {
       type: 'Sine Wave Generator',
       name: 'Sine Wave Generator 2',
-      parent: stackedPlot.uuid
+      parent: overlayPlot2.uuid
     });
   });
 
@@ -138,21 +153,21 @@ test.describe('Stacked Plot styling', () => {
       NO_STYLE_RGBA,
       NO_STYLE_RGBA,
       hexToRGB(setTextColor),
-      page.getByLabel('Stacked Plot Item Sine Wave Generator 1')
+      page.getByLabel('Stacked Plot Item Overlay Plot 1')
     );
 
     await checkStyles(
       NO_STYLE_RGBA,
       NO_STYLE_RGBA,
       hexToRGB(setTextColor),
-      page.getByLabel('Stacked Plot Item Sine Wave Generator 2')
+      page.getByLabel('Stacked Plot Item Overlay Plot 2')
     );
 
     await checkFontStyles(
       setFontSize,
       setFontWeight,
       setFontFamily,
-      page.getByLabel('Stacked Plot Item Sine Wave Generator 1')
+      page.getByLabel('Stacked Plot Item Overlay Plot 1')
     );
   });
 
@@ -169,19 +184,19 @@ test.describe('Stacked Plot styling', () => {
 
     await page.getByRole('tab', { name: 'Styles' }).click();
 
-    //Check default styles for SWG1 and SWG2
+    //Check default styles for overlayPlot1 and overlayPlot2
     await checkStyles(
       NO_STYLE_RGBA,
       NO_STYLE_RGBA,
       hexToRGB(defaultTextColor),
-      page.getByLabel('Stacked Plot Item Sine Wave Generator 1')
+      page.getByLabel('Stacked Plot Item Overlay Plot 1')
     );
 
     await checkStyles(
       NO_STYLE_RGBA,
       NO_STYLE_RGBA,
       hexToRGB(defaultTextColor),
-      page.getByLabel('Stacked Plot Item Sine Wave Generator 2')
+      page.getByLabel('Stacked Plot Item Overlay Plot 2')
     );
 
     // Set styles using setStyles function on StackedPlot1 but not StackedPlot2
@@ -190,11 +205,11 @@ test.describe('Stacked Plot styling', () => {
       setBorderColor,
       setBackgroundColor,
       setTextColor,
-      page.getByLabel('Stacked Plot Item Sine Wave Generator 1')
+      page.getByLabel('Stacked Plot Item Overlay Plot 1')
     );
 
     //Set Font Styles on SWG1 but not SWG2
-    await page.getByLabel('Stacked Plot Item Sine Wave Generator 1').click();
+    await page.getByLabel('Stacked Plot Item Overlay Plot 1').click();
     //Set Font Size to 72
     await page.getByLabel('Set Font Size').click();
     await page.getByRole('menuitem', { name: '72px' }).click();

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

@@ -117,7 +117,8 @@ test.describe('Telemetry Table', () => {
 
     endTimeStamp.setUTCMinutes(endTimeStamp.getUTCMinutes() - 5);
     const endDate = endTimeStamp.toISOString().split('T')[0];
-    const endTime = endTimeStamp.toISOString().split('T')[1];
+    const milliseconds = endTimeStamp.getMilliseconds();
+    const endTime = endTimeStamp.toISOString().split('T')[1].replace(`.${milliseconds}Z`, '');
 
     await setTimeConductorBounds(page, { endDate, endTime });
 

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

@@ -24,65 +24,210 @@ import {
   setEndOffset,
   setFixedTimeMode,
   setRealTimeMode,
-  setStartOffset,
-  setTimeConductorBounds
+  setStartOffset
 } from '../../../../appActions.js';
 import { expect, test } from '../../../../pluginFixtures.js';
 
 test.describe('Time conductor operations', () => {
-  test('validate start time does not exceed end time', async ({ page }) => {
+  const DAY = '2024-01-01';
+  const DAY_AFTER = '2024-01-02';
+  const ONE_O_CLOCK = '01:00:00';
+  const TWO_O_CLOCK = '02:00:00';
+
+  test.beforeEach(async ({ page }) => {
     // Go to baseURL
     await page.goto('./', { waitUntil: 'domcontentloaded' });
-    const year = new Date().getFullYear();
+  });
 
-    // Set initial valid time bounds
-    const startDate = `${year}-01-01`;
-    const startTime = '01:00:00';
-    const endDate = `${year}-01-01`;
-    const endTime = '02:00:00';
-    await setTimeConductorBounds(page, { startDate, startTime, endDate, endTime });
+  test('validate date and time inputs are validated on input event', async ({ page }) => {
+    const submitButtonLocator = page.getByLabel('Submit time bounds');
 
     // Open the time conductor popup
     await page.getByRole('button', { name: 'Time Conductor Mode', exact: true }).click();
 
-    // Test invalid start date
-    const invalidStartDate = `${year}-01-02`;
+    await test.step('invalid start date disables submit button', async () => {
+      const initialStartDate = await page.getByLabel('Start date').inputValue();
+      const invalidStartDate = `${initialStartDate.substring(0, 5)}${initialStartDate.substring(6)}`;
+
       await page.getByLabel('Start date').fill(invalidStartDate);
-    await expect(page.getByLabel('Submit time bounds')).toBeDisabled();
-    await page.getByLabel('Start date').fill(startDate);
-    await expect(page.getByLabel('Submit time bounds')).toBeEnabled();
+      await expect(submitButtonLocator).toBeDisabled();
+      await page.getByLabel('Start date').fill(initialStartDate);
+      await expect(submitButtonLocator).toBeEnabled();
+    });
 
-    // Test invalid end date
-    const invalidEndDate = `${year - 1}-12-31`;
-    await page.getByLabel('End date').fill(invalidEndDate);
-    await expect(page.getByLabel('Submit time bounds')).toBeDisabled();
-    await page.getByLabel('End date').fill(endDate);
-    await expect(page.getByLabel('Submit time bounds')).toBeEnabled();
+    await test.step('invalid start time disables submit button', async () => {
+      const initialStartTime = await page.getByLabel('Start time').inputValue();
+      const invalidStartTime = `${initialStartTime.substring(0, 5)}${initialStartTime.substring(6)}`;
 
-    // Test invalid start time
-    const invalidStartTime = '42:00:00';
       await page.getByLabel('Start time').fill(invalidStartTime);
-    await expect(page.getByLabel('Submit time bounds')).toBeDisabled();
-    await page.getByLabel('Start time').fill(startTime);
-    await expect(page.getByLabel('Submit time bounds')).toBeEnabled();
+      await expect(submitButtonLocator).toBeDisabled();
+      await page.getByLabel('Start time').fill(initialStartTime);
+      await expect(submitButtonLocator).toBeEnabled();
+    });
+
+    await test.step('disable/enable submit button also works with multiple invalid inputs', async () => {
+      const initialEndDate = await page.getByLabel('End date').inputValue();
+      const invalidEndDate = `${initialEndDate.substring(0, 5)}${initialEndDate.substring(6)}`;
+      const initialStartTime = await page.getByLabel('Start time').inputValue();
+      const invalidStartTime = `${initialStartTime.substring(0, 5)}${initialStartTime.substring(6)}`;
+
+      await page.getByLabel('Start time').fill(invalidStartTime);
+      await expect(submitButtonLocator).toBeDisabled();
+      await page.getByLabel('End date').fill(invalidEndDate);
+      await expect(submitButtonLocator).toBeDisabled();
+      await page.getByLabel('End date').fill(initialEndDate);
+      await expect(submitButtonLocator).toBeDisabled();
+      await page.getByLabel('Start time').fill(initialStartTime);
+      await expect(submitButtonLocator).toBeEnabled();
+    });
+  });
+
+  test('validate date and time inputs validation is reported on change event', async ({ page }) => {
+    // Open the time conductor popup
+    await page.getByRole('button', { name: 'Time Conductor Mode', exact: true }).click();
+
+    await test.step('invalid start date is reported on change event, not on input event', async () => {
+      const initialStartDate = await page.getByLabel('Start date').inputValue();
+      const invalidStartDate = `${initialStartDate.substring(0, 5)}${initialStartDate.substring(6)}`;
+
+      await page.getByLabel('Start date').fill(invalidStartDate);
+      await expect(page.getByLabel('Start date')).not.toHaveAttribute('title', 'Invalid Date');
+      await page.getByLabel('Start date').press('Tab');
+      await expect(page.getByLabel('Start date')).toHaveAttribute('title', 'Invalid Date');
+      await page.getByLabel('Start date').fill(initialStartDate);
+      await expect(page.getByLabel('Start date')).not.toHaveAttribute('title', 'Invalid Date');
+    });
+
+    await test.step('invalid start time is reported on change event, not on input event', async () => {
+      const initialStartTime = await page.getByLabel('Start time').inputValue();
+      const invalidStartTime = `${initialStartTime.substring(0, 5)}${initialStartTime.substring(6)}`;
+
+      await page.getByLabel('Start time').fill(invalidStartTime);
+      await expect(page.getByLabel('Start time')).not.toHaveAttribute('title', 'Invalid Time');
+      await page.getByLabel('Start time').press('Tab');
+      await expect(page.getByLabel('Start time')).toHaveAttribute('title', 'Invalid Time');
+      await page.getByLabel('Start time').fill(initialStartTime);
+      await expect(page.getByLabel('Start time')).not.toHaveAttribute('title', 'Invalid Time');
+    });
+
+    await test.step('invalid end date is reported on change event, not on input event', async () => {
+      const initialEndDate = await page.getByLabel('End date').inputValue();
+      const invalidEndDate = `${initialEndDate.substring(0, 5)}${initialEndDate.substring(6)}`;
+
+      await page.getByLabel('End date').fill(invalidEndDate);
+      await expect(page.getByLabel('End date')).not.toHaveAttribute('title', 'Invalid Date');
+      await page.getByLabel('End date').press('Tab');
+      await expect(page.getByLabel('End date')).toHaveAttribute('title', 'Invalid Date');
+      await page.getByLabel('End date').fill(initialEndDate);
+      await expect(page.getByLabel('End date')).not.toHaveAttribute('title', 'Invalid Date');
+    });
+
+    await test.step('invalid end time is reported on change event, not on input event', async () => {
+      const initialEndTime = await page.getByLabel('End time').inputValue();
+      const invalidEndTime = `${initialEndTime.substring(0, 5)}${initialEndTime.substring(6)}`;
 
-    // Test invalid end time
-    const invalidEndTime = '43:00:00';
       await page.getByLabel('End time').fill(invalidEndTime);
-    await expect(page.getByLabel('Submit time bounds')).toBeDisabled();
-    await page.getByLabel('End time').fill(endTime);
-    await expect(page.getByLabel('Submit time bounds')).toBeEnabled();
+      await expect(page.getByLabel('End time')).not.toHaveAttribute('title', 'Invalid Time');
+      await page.getByLabel('End time').press('Tab');
+      await expect(page.getByLabel('End time')).toHaveAttribute('title', 'Invalid Time');
+      await page.getByLabel('End time').fill(initialEndTime);
+      await expect(page.getByLabel('End time')).not.toHaveAttribute('title', 'Invalid Time');
+    });
+  });
 
-    // Submit valid time bounds
+  test('validate start time does not exceed end time on submit', async ({ page }) => {
+    // Open the time conductor popup
+    await page.getByRole('button', { name: 'Time Conductor Mode', exact: true }).click();
+
+    // FIXME: https://github.com/nasa/openmct/pull/7818
+    // eslint-disable-next-line playwright/no-wait-for-timeout
+    await page.waitForTimeout(500);
+
+    await page.getByLabel('Start date').fill(DAY);
+    await page.getByLabel('Start time').fill(TWO_O_CLOCK);
+    await page.getByLabel('End date').fill(DAY);
+    await page.getByLabel('End time').fill(ONE_O_CLOCK);
     await page.getByLabel('Submit time bounds').click();
 
-    // Verify the submitted time bounds
-    await expect(page.getByLabel('Start bounds')).toHaveText(
-      new RegExp(`${startDate} ${startTime}.000Z`)
+    await expect(page.getByLabel('Start date')).toHaveAttribute(
+      'title',
+      'Specified start date exceeds end bound'
     );
-    await expect(page.getByLabel('End bounds')).toHaveText(
-      new RegExp(`${endDate} ${endTime}.000Z`)
+    await expect(page.getByLabel('Start bounds')).not.toHaveText(`${DAY} ${TWO_O_CLOCK}.000Z`);
+    await expect(page.getByLabel('End bounds')).not.toHaveText(`${DAY} ${ONE_O_CLOCK}.000Z`);
+
+    await page.getByLabel('Start date').fill(DAY);
+    await page.getByLabel('Start time').fill(ONE_O_CLOCK);
+    await page.getByLabel('End date').fill(DAY);
+    await page.getByLabel('End time').fill(TWO_O_CLOCK);
+    await page.getByLabel('Submit time bounds').click();
+
+    await expect(page.getByLabel('Start bounds')).toHaveText(`${DAY} ${ONE_O_CLOCK}.000Z`);
+    await expect(page.getByLabel('End bounds')).toHaveText(`${DAY} ${TWO_O_CLOCK}.000Z`);
+  });
+
+  test('validate start datetime does not exceed end datetime on submit', async ({ page }) => {
+    // Open the time conductor popup
+    await page.getByRole('button', { name: 'Time Conductor Mode', exact: true }).click();
+
+    // FIXME: https://github.com/nasa/openmct/pull/7818
+    // eslint-disable-next-line playwright/no-wait-for-timeout
+    await page.waitForTimeout(500);
+
+    await page.getByLabel('Start date').fill(DAY_AFTER);
+    await page.getByLabel('Start time').fill(ONE_O_CLOCK);
+    await page.getByLabel('End date').fill(DAY);
+    await page.getByLabel('End time').fill(ONE_O_CLOCK);
+    await page.getByLabel('Submit time bounds').click();
+
+    await expect(page.getByLabel('Start date')).toHaveAttribute(
+      'title',
+      'Specified start date exceeds end bound'
     );
+    await expect(page.getByLabel('Start bounds')).not.toHaveText(
+      `${DAY_AFTER} ${ONE_O_CLOCK}.000Z`
+    );
+    await expect(page.getByLabel('End bounds')).not.toHaveText(`${DAY} ${ONE_O_CLOCK}.000Z`);
+
+    await page.getByLabel('Start date').fill(DAY);
+    await page.getByLabel('Start time').fill(ONE_O_CLOCK);
+    await page.getByLabel('End date').fill(DAY_AFTER);
+    await page.getByLabel('End time').fill(ONE_O_CLOCK);
+    await page.getByLabel('Submit time bounds').click();
+
+    await expect(page.getByLabel('Start bounds')).toHaveText(`${DAY} ${ONE_O_CLOCK}.000Z`);
+    await expect(page.getByLabel('End bounds')).toHaveText(`${DAY_AFTER} ${ONE_O_CLOCK}.000Z`);
+  });
+
+  test('cancelling form does not set bounds', async ({ page }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/7791'
+    });
+
+    // Open the time conductor popup
+    await page.getByRole('button', { name: 'Time Conductor Mode', exact: true }).click();
+
+    await page.getByLabel('Start date').fill(DAY);
+    await page.getByLabel('Start time').fill(ONE_O_CLOCK);
+    await page.getByLabel('End date').fill(DAY_AFTER);
+    await page.getByLabel('End time').fill(ONE_O_CLOCK);
+    await page.getByLabel('Discard changes and close time popup').click();
+
+    await expect(page.getByLabel('Start bounds')).not.toHaveText(`${DAY} ${ONE_O_CLOCK}.000Z`);
+    await expect(page.getByLabel('End bounds')).not.toHaveText(`${DAY_AFTER} ${ONE_O_CLOCK}.000Z`);
+
+    // Open the time conductor popup
+    await page.getByRole('button', { name: 'Time Conductor Mode', exact: true }).click();
+
+    await page.getByLabel('Start date').fill(DAY);
+    await page.getByLabel('Start time').fill(ONE_O_CLOCK);
+    await page.getByLabel('End date').fill(DAY_AFTER);
+    await page.getByLabel('End time').fill(ONE_O_CLOCK);
+    await page.getByLabel('Submit time bounds').click();
+
+    await expect(page.getByLabel('Start bounds')).toHaveText(`${DAY} ${ONE_O_CLOCK}.000Z`);
+    await expect(page.getByLabel('End bounds')).toHaveText(`${DAY_AFTER} ${ONE_O_CLOCK}.000Z`);
   });
 });
 
@@ -131,77 +276,6 @@ test.describe('Global Time Conductor', () => {
     await expect(page.getByLabel('End offset: 01:30:31')).toBeVisible();
   });
 
-  test('Input field validation: fixed time mode', async ({ page }) => {
-    test.info().annotations.push({
-      type: 'issue',
-      description: 'https://github.com/nasa/openmct/issues/7791'
-    });
-    // Switch to fixed time mode
-    await setFixedTimeMode(page);
-
-    // Define valid time bounds for testing
-    const validBounds = {
-      startDate: '2024-04-20',
-      startTime: '00:04:20',
-      endDate: '2024-04-20',
-      endTime: '16:04:20'
-    };
-    // Set valid time conductor bounds ✌️
-    await setTimeConductorBounds(page, validBounds);
-
-    // Verify that the time bounds are set correctly
-    await expect(page.getByLabel(`Start bounds: 2024-04-20 00:04:20.000Z`)).toBeVisible();
-    await expect(page.getByLabel(`End bounds: 2024-04-20 16:04:20.000Z`)).toBeVisible();
-
-    // Open the Time Conductor Mode popup
-    await page.getByLabel('Time Conductor Mode').click();
-
-    // Test invalid start date
-    const invalidStartDate = '2024-04-21';
-    await page.getByLabel('Start date').fill(invalidStartDate);
-    await expect(page.getByLabel('Submit time bounds')).toBeDisabled();
-    await page.getByLabel('Start date').fill(validBounds.startDate);
-    await expect(page.getByLabel('Submit time bounds')).toBeEnabled();
-
-    // Test invalid end date
-    const invalidEndDate = '2024-04-19';
-    await page.getByLabel('End date').fill(invalidEndDate);
-    await expect(page.getByLabel('Submit time bounds')).toBeDisabled();
-    await page.getByLabel('End date').fill(validBounds.endDate);
-    await expect(page.getByLabel('Submit time bounds')).toBeEnabled();
-
-    // Test invalid start time
-    const invalidStartTime = '16:04:21';
-    await page.getByLabel('Start time').fill(invalidStartTime);
-    await expect(page.getByLabel('Submit time bounds')).toBeDisabled();
-    await page.getByLabel('Start time').fill(validBounds.startTime);
-    await expect(page.getByLabel('Submit time bounds')).toBeEnabled();
-
-    // Test invalid end time
-    const invalidEndTime = '00:04:19';
-    await page.getByLabel('End time').fill(invalidEndTime);
-    await expect(page.getByLabel('Submit time bounds')).toBeDisabled();
-    await page.getByLabel('End time').fill(validBounds.endTime);
-    await expect(page.getByLabel('Submit time bounds')).toBeEnabled();
-
-    // Verify that the time bounds remain unchanged after invalid inputs
-    await expect(page.getByLabel(`Start bounds: 2024-04-20 00:04:20.000Z`)).toBeVisible();
-    await expect(page.getByLabel(`End bounds: 2024-04-20 16:04:20.000Z`)).toBeVisible();
-
-    // Discard changes and verify that bounds remain unchanged
-    await setTimeConductorBounds(page, {
-      startDate: validBounds.startDate,
-      startTime: '04:20:00',
-      endDate: validBounds.endDate,
-      endTime: '04:20:20',
-      submitChanges: false
-    });
-
-    // Verify that the original time bounds are still displayed after discarding changes
-    await expect(page.getByLabel(`Start bounds: 2024-04-20 00:04:20.000Z`)).toBeVisible();
-    await expect(page.getByLabel(`End bounds: 2024-04-20 16:04:20.000Z`)).toBeVisible();
-  });
-
   /**
    * Verify that offsets and url params are preserved when switching
    * between fixed timespan and real-time mode.

e2e/tests/functional/search.e2e.spec.js

@@ -31,6 +31,8 @@ import { expect, test } from '../../pluginFixtures.js';
 test.describe('Grand Search', () => {
   let grandSearchInput;
 
+  test.use({ ignore404s: [/_design\/object_names\/_view\/object_names$/] });
+
   test.beforeEach(async ({ page }) => {
     grandSearchInput = page
       .getByLabel('OpenMCT Search')
@@ -191,7 +193,88 @@ test.describe('Grand Search', () => {
     await expect(searchResults).toContainText(folderName);
   });
 
+  test.describe('Search will test for the presence of the object_names index, and', () => {
+    test('use index if available @couchdb @network', async ({ page }) => {
+      await createObjectsForSearch(page);
+
+      let isObjectNamesViewAvailable = false;
+      let isObjectNamesUsedForSearch = false;
+
+      page.on('request', async (request) => {
+        const isObjectNamesRequest = request.url().endsWith('_view/object_names');
+        const isHeadRequest = request.method().toLowerCase() === 'head';
+
+        if (isObjectNamesRequest && isHeadRequest) {
+          const response = await request.response();
+          isObjectNamesViewAvailable = response.status() === 200;
+        }
+      });
+
+      page.on('request', (request) => {
+        const isObjectNamesRequest = request.url().endsWith('_view/object_names');
+        const isPostRequest = request.method().toLowerCase() === 'post';
+
+        if (isObjectNamesRequest && isPostRequest) {
+          isObjectNamesUsedForSearch = true;
+        }
+      });
+
+      // Full search for object
+      await grandSearchInput.pressSequentially('Clock', { delay: 100 });
+
+      // Wait for search to finish
+      await waitForSearchCompletion(page);
+
+      expect(isObjectNamesViewAvailable).toBe(true);
+      expect(isObjectNamesUsedForSearch).toBe(true);
+    });
+
+    test('fall-back on base index if index not available @couchdb @network', async ({ page }) => {
+      await page.route('**/_view/object_names', (route) => {
+        route.fulfill({
+          status: 404
+        });
+      });
+      await createObjectsForSearch(page);
+
+      let isObjectNamesViewAvailable = false;
+      let isFindUsedForSearch = false;
+
+      page.on('request', async (request) => {
+        const isObjectNamesRequest = request.url().endsWith('_view/object_names');
+        const isHeadRequest = request.method().toLowerCase() === 'head';
+
+        if (isObjectNamesRequest && isHeadRequest) {
+          const response = await request.response();
+          isObjectNamesViewAvailable = response.status() === 200;
+        }
+      });
+
+      page.on('request', (request) => {
+        const isFindRequest = request.url().endsWith('_find');
+        const isPostRequest = request.method().toLowerCase() === 'post';
+
+        if (isFindRequest && isPostRequest) {
+          isFindUsedForSearch = true;
+        }
+      });
+
+      // Full search for object
+      await grandSearchInput.pressSequentially('Clock', { delay: 100 });
+
+      // Wait for search to finish
+      await waitForSearchCompletion(page);
+      console.info(
+        `isObjectNamesViewAvailable: ${isObjectNamesViewAvailable} | isFindUsedForSearch: ${isFindUsedForSearch}`
+      );
+      expect(isObjectNamesViewAvailable).toBe(false);
+      expect(isFindUsedForSearch).toBe(true);
+    });
+  });
+
   test('Search results are debounced @couchdb @network', async ({ page }) => {
+    // Unfortunately 404s are always logged to the JavaScript console and can't be suppressed
+    // A 404 is now thrown when we test for the presence of the object names view used by search.
     test.info().annotations.push({
       type: 'issue',
       description: 'https://github.com/nasa/openmct/issues/6179'
@@ -199,11 +282,17 @@ test.describe('Grand Search', () => {
     await createObjectsForSearch(page);
 
     let networkRequests = [];
+
     page.on('request', (request) => {
-      const searchRequest =
-        request.url().endsWith('_find') || request.url().includes('by_keystring');
-      const fetchRequest = request.resourceType() === 'fetch';
-      if (searchRequest && fetchRequest) {
+      const isSearchRequest =
+        request.url().endsWith('object_names') ||
+        request.url().endsWith('_find') ||
+        request.url().includes('by_keystring');
+      const isFetchRequest = request.resourceType() === 'fetch';
+      // CouchDB search results in a one-time head request to test for the presence of an index.
+      const isHeadRequest = request.method().toLowerCase() === 'head';
+
+      if (isSearchRequest && isFetchRequest && !isHeadRequest) {
         networkRequests.push(request);
       }
     });

e2e/tests/functional/staleness.e2e.spec.js

@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2023, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *

e2e/tests/functional/ui/inspector.e2e.spec.js

@@ -1,3 +1,5 @@
+/* eslint-disable playwright/no-conditional-in-test */
+/* eslint-disable playwright/no-conditional-expect */
 /*****************************************************************************
  * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
@@ -31,6 +33,104 @@ Enim nec dui nunc mattis. Cursus turpis massa tincidunt dui ut. Donec adipiscing
 Proin libero nunc consequat interdum varius sit amet mattis vulputate. Metus dictum at tempor commodo ullamcorper a lacus vestibulum sed. Quisque non tellus orci ac auctor augue mauris. Id ornare arcu odio ut. Rhoncus est pellentesque elit ullamcorper dignissim. Senectus et netus et malesuada fames ac turpis egestas. Volutpat ac tincidunt vitae semper quis lectus nulla. Adipiscing elit duis tristique sollicitudin. Ipsum faucibus vitae aliquet nec ullamcorper sit. Gravida neque convallis a cras semper auctor neque vitae tempus. Porttitor leo a diam sollicitudin tempor id. Dictum non consectetur a erat nam at lectus. At volutpat diam ut venenatis tellus in. Morbi enim nunc faucibus a pellentesque sit amet. Cursus in hac habitasse platea. Sed augue lacus viverra vitae.
 `;
 
+const viewsTabsMatrix = {
+  Clock: {
+    Browse: ['Properties']
+  },
+  'Condition Set': {
+    Browse: ['Properties', 'Elements', 'Annotations'],
+    Edit: ['Elements', 'Properties']
+  },
+  'Condition Widget': {
+    Browse: ['Properties', 'Styles'],
+    Edit: ['Styles', 'Properties']
+  },
+  'Display Layout': {
+    Browse: ['Properties', 'Elements', 'Styles'],
+    Edit: ['Elements', 'Styles', 'Properties']
+  },
+  'Event Message Generator': {
+    Browse: ['Properties']
+  },
+  'Event Message Generator with Acknowledge': {
+    Browse: ['Properties']
+  },
+  'Example Imagery': {
+    Browse: ['Properties', 'Annotations']
+  },
+  'Flexible Layout': {
+    Browse: ['Properties', 'Elements', 'Styles'],
+    Edit: ['Elements', 'Styles', 'Properties']
+  },
+  Folder: {
+    Browse: ['Properties']
+  },
+  'Gantt Chart': {
+    Browse: ['Properties', 'Config', 'Elements'],
+    Edit: ['Config', 'Elements', 'Properties']
+  },
+  Gauge: {
+    Browse: ['Properties', 'Elements', 'Styles'],
+    Edit: ['Elements', 'Styles', 'Properties']
+  },
+  Graph: {
+    Browse: ['Properties', 'Config', 'Elements', 'Styles'],
+    Edit: ['Config', 'Elements', 'Styles', 'Properties']
+  },
+  Hyperlink: {
+    Browse: ['Properties'],
+    required: {
+      url: 'https://www.google.com',
+      displayText: 'Google'
+    }
+  },
+  'LAD Table': {
+    Browse: ['Properties', 'Config', 'Elements', 'Styles'],
+    Edit: ['Config', 'Elements', 'Styles', 'Properties']
+  },
+  'LAD Table Set': {
+    Browse: ['Properties', 'Config', 'Elements', 'Styles'],
+    Edit: ['Config', 'Elements', 'Styles', 'Properties']
+  },
+  Notebook: {
+    Browse: ['Properties']
+  },
+  'Overlay Plot': {
+    Browse: ['Properties', 'Config', 'Annotations', 'Styles'],
+    Edit: ['Config', 'Elements', 'Styles', 'Filters', 'Properties']
+  },
+  'Scatter Plot': {
+    Browse: ['Properties', 'Config', 'Elements', 'Styles'],
+    Edit: ['Config', 'Elements', 'Styles', 'Properties']
+  },
+  'Sine Wave Generator': {
+    Browse: ['Properties', 'Annotations']
+  },
+  'Stacked Plot': {
+    Browse: ['Properties', 'Config', 'Annotations', 'Elements', 'Styles'],
+    Edit: ['Config', 'Elements', 'Styles', 'Properties']
+  },
+  'Tabs View': {
+    Browse: ['Properties', 'Elements', 'Styles'],
+    Edit: ['Elements', 'Styles', 'Properties']
+  },
+  'Telemetry Table': {
+    Browse: ['Properties', 'Config', 'Elements', 'Styles'],
+    Edit: ['Config', 'Elements', 'Styles', 'Filters', 'Properties']
+  },
+  'Time List': {
+    Browse: ['Properties', 'Config', 'Elements'],
+    Edit: ['Config', 'Elements', 'Properties']
+  },
+  'Time Strip': {
+    Browse: ['Properties', 'Elements'],
+    Edit: ['Elements', 'Properties']
+  },
+  Timer: {
+    Browse: ['Properties']
+  }
+};
+
 test.describe('Inspector tests', () => {
   test.beforeEach(async ({ page }) => {
     await page.goto('./', { waitUntil: 'domcontentloaded' });
@@ -72,4 +172,49 @@ test.describe('Inspector tests', () => {
 
     await expect(lastInspectorPropertyValue).toBeInViewport();
   });
+
+  test(`Inspector tabs show the correct tabs per view and mode`, async ({ page }) => {
+    // loop through each view type
+    for (const view of Object.keys(viewsTabsMatrix)) {
+      const viewConfig = viewsTabsMatrix[view];
+      const createOptions = {
+        type: view,
+        name: view
+      };
+
+      // create and navigate to view;
+      const objectInfo = await createDomainObjectWithDefaults(
+        page,
+        createOptions,
+        viewConfig.required ? viewConfig.required : {}
+      );
+      await page.goto(objectInfo.url);
+
+      // verify correct number of tabs for browse mode
+      expect(await page.getByRole('tab').count()).toBe(Object.keys(viewConfig.Browse).length);
+
+      // verify correct order of tabs for browse mode
+      for (const [index, value] of Object.entries(viewConfig.Browse)) {
+        const tab = page.getByRole('tab').nth(index);
+        await expect(tab).toHaveText(value);
+      }
+
+      // enter Edit if necessary
+      if (viewConfig.Edit) {
+        await page.getByLabel('Edit Object').click();
+
+        // verify correct number of tabs for edit mode
+        expect(await page.getByRole('tab').count()).toBe(Object.keys(viewConfig.Edit).length);
+
+        // verify correct order of tabs for edit mode
+        for (const [index, value] of Object.entries(viewConfig.Edit)) {
+          const tab = page.getByRole('tab').nth(index);
+          await expect(tab).toHaveText(value);
+        }
+
+        await page.getByLabel('Save').first().click();
+        await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+      }
+    }
+  });
 });

e2e/tests/functional/userRoles.e2e.spec.js

@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2023, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *

e2e/tests/performance/memory/navigation.memory.perf.spec.js

@@ -213,7 +213,6 @@ test.describe('Navigation memory leak is not detected in', () => {
       page,
       'example-imagery-memory-leak-test'
     );
-
     // If we got here without timing out, then the root view object was garbage collected and no memory leak was detected.
     expect(result).toBe(true);
   });
@@ -317,6 +316,12 @@ test.describe('Navigation memory leak is not detected in', () => {
 
       // Manually invoke the garbage collector once all references are removed.
       window.gc();
+      window.gc();
+      window.gc();
+
+      setTimeout(() => {
+        window.gc();
+      }, 1000);
 
       return gcPromise;
     });

e2e/tests/visual-a11y/components/inspector.visual.spec.js

@@ -40,6 +40,9 @@ test.describe('Visual - Inspector @ally @clock', () => {
   });
 
   test('Inspector from overlay_plot_with_delay_storage @localStorage', async ({ page, theme }) => {
+    // navigate to the plot
+    await page.getByRole('gridcell', { name: 'Overlay Plot with 5s Delay' }).click();
+
     //Expand the Inspector Pane
     await page.getByRole('button', { name: 'Inspect' }).click();
 

e2e/tests/visual-a11y/defaultPlugins.visual.spec.js

@@ -85,16 +85,6 @@ test.describe('Visual - Default @a11y', () => {
     await percySnapshot(page, `Display Layout Create Menu (theme: '${theme}')`);
   });
 
-  test('Visual - Default Gauge', async ({ page, theme }) => {
-    await createDomainObjectWithDefaults(page, {
-      type: 'Gauge',
-      name: 'Default Gauge'
-    });
-
-    // Take a snapshot of the newly created Gauge object
-    await percySnapshot(page, `Default Gauge (theme: '${theme}')`);
-  });
-
   test.afterEach(async ({ page }, testInfo) => {
     await scanForA11yViolations(page, testInfo.title);
   });

e2e/tests/visual-a11y/displayLayout.visual.spec.js

@@ -22,7 +22,11 @@
 
 import percySnapshot from '@percy/playwright';
 
-import { createDomainObjectWithDefaults } from '../../appActions.js';
+import {
+  createDomainObjectWithDefaults,
+  createStableStateTelemetry,
+  linkParameterToObject
+} from '../../appActions.js';
 import { MISSION_TIME, VISUAL_FIXED_URL } from '../../constants.js';
 import { test } from '../../pluginFixtures.js';
 
@@ -47,16 +51,13 @@ test.describe('Visual - Display Layout @clock', () => {
       name: 'Child Right Layout',
       parent: parentLayout.uuid
     });
-    await createDomainObjectWithDefaults(page, {
-      type: 'Sine Wave Generator',
-      name: 'SWG 1',
-      parent: child1Layout.uuid
-    });
-    await createDomainObjectWithDefaults(page, {
-      type: 'Sine Wave Generator',
-      name: 'SWG 2',
-      parent: child2Layout.uuid
-    });
+
+    const stableStateTelemetry = await createStableStateTelemetry(page);
+    await linkParameterToObject(page, stableStateTelemetry.name, child1Layout.name);
+    await linkParameterToObject(page, stableStateTelemetry.name, child2Layout.name);
+
+    // Pause the clock at a time where the telemetry is stable 20 minutes in the future
+    await page.clock.pauseAt(new Date(MISSION_TIME + 1200000));
 
     await page.goto(parentLayout.url, { waitUntil: 'domcontentloaded' });
     await page.getByRole('button', { name: 'Edit Object' }).click();

e2e/tests/visual-a11y/gauge.visual.spec.js

@@ -0,0 +1,81 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, 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 percySnapshot from '@percy/playwright';
+
+import { createDomainObjectWithDefaults } from '../../appActions.js';
+import { scanForA11yViolations, test } from '../../avpFixtures.js';
+import { VISUAL_FIXED_URL } from '../../constants.js';
+
+test.describe('Visual - Gauges', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(VISUAL_FIXED_URL, { waitUntil: 'domcontentloaded' });
+  });
+
+  test('Visual - Default Gauge', async ({ page, theme }) => {
+    await createDomainObjectWithDefaults(page, {
+      type: 'Gauge',
+      name: 'Default Gauge'
+    });
+
+    // Take a snapshot of the newly created Gauge object
+    await percySnapshot(page, `Default Gauge (theme: '${theme}')`);
+  });
+
+  test('Visual - Needle Gauge with State Generator', async ({ page, theme }) => {
+    const needleGauge = await createDomainObjectWithDefaults(page, {
+      type: 'Gauge',
+      name: 'Needle Gauge'
+    });
+
+    //Modify the Gauge to be a Needle Gauge
+    await page.getByLabel('More actions').click();
+    await page.getByLabel('Edit Properties...').click();
+    await page.getByLabel('Gauge type', { exact: true }).selectOption('dial-needle');
+    await page.getByText('Ok').click();
+
+    //Add a State Generator to the Gauge
+    await page.goto(needleGauge.url + '?hideTree=true&hideInspector=true', {
+      waitUntil: 'domcontentloaded'
+    });
+
+    // Take a snapshot of the newly created Gauge object
+    await percySnapshot(page, `Needle Gauge with no telemetry source (theme: '${theme}')`);
+
+    //Add a State Generator to the Gauge. Note this requires that snapshots are taken within 5 seconds
+    await page.getByLabel('Create', { exact: true }).click();
+    await page.getByLabel('State Generator').click();
+    await page.getByLabel('Modal Overlay').getByLabel('Navigate to Needle Gauge').click();
+    await page.getByLabel('Save').click();
+
+    //Add a State Generator to the Gauge
+    await page.goto(needleGauge.url + '?hideTree=true&hideInspector=true', {
+      waitUntil: 'domcontentloaded'
+    });
+
+    // Take a snapshot of the newly created Gauge object
+    await percySnapshot(page, `Needle Gauge with State Generator (theme: '${theme}')`);
+  });
+
+  test.afterEach(async ({ page }, testInfo) => {
+    await scanForA11yViolations(page, testInfo.title);
+  });
+});

e2e/tests/visual-a11y/notebook.visual.spec.js

@@ -98,7 +98,7 @@ test.describe('Visual - Notebook @a11y', () => {
 
     await page.getByLabel('Expand My Items folder').click();
 
-    await page.goto(notebook.url);
+    await page.goto(notebook.url, { waitUntil: 'networkidle' });
 
     await page
       .getByLabel('Navigate to Dropped Overlay Plot')

e2e/tests/visual-a11y/planning-gantt.visual.spec.js

@@ -26,14 +26,25 @@ import fs from 'fs';
 import { createDomainObjectWithDefaults, createPlanFromJSON } from '../../appActions.js';
 import { scanForA11yViolations, test } from '../../avpFixtures.js';
 import { VISUAL_FIXED_URL } from '../../constants.js';
-import { setBoundsToSpanAllActivities, setDraftStatusForPlan } from '../../helper/planningUtils.js';
+import {
+  getFirstActivity,
+  setBoundsToSpanAllActivities,
+  setDraftStatusForPlan
+} from '../../helper/planningUtils.js';
 
 const examplePlanSmall2 = JSON.parse(
   fs.readFileSync(new URL('../../test-data/examplePlans/ExamplePlan_Small2.json', import.meta.url))
 );
 
+const FIRST_ACTIVITY_SMALL_2 = getFirstActivity(examplePlanSmall2);
+
 test.describe('Visual - Gantt Chart @a11y', () => {
   test.beforeEach(async ({ page }) => {
+    // Set the clock to the end of the first activity in the plan
+    // This is so we can see the "now" line in the plan view
+    await page.clock.install({ time: FIRST_ACTIVITY_SMALL_2.end + 10000 });
+    await page.clock.resume();
+
     await page.goto(VISUAL_FIXED_URL, { waitUntil: 'domcontentloaded' });
   });
   test('Gantt Chart View', async ({ page, theme }) => {

e2e/tests/visual-a11y/planning-timestrip.visual.spec.js

@@ -27,14 +27,21 @@ import { createDomainObjectWithDefaults, createPlanFromJSON } from '../../appAct
 import { scanForA11yViolations, test } from '../../avpFixtures.js';
 import { waitForAnimations } from '../../baseFixtures.js';
 import { VISUAL_FIXED_URL } from '../../constants.js';
-import { setBoundsToSpanAllActivities } from '../../helper/planningUtils.js';
+import { getFirstActivity, setBoundsToSpanAllActivities } from '../../helper/planningUtils.js';
 
 const examplePlanSmall2 = JSON.parse(
   fs.readFileSync(new URL('../../test-data/examplePlans/ExamplePlan_Small2.json', import.meta.url))
 );
 
+const FIRST_ACTIVITY_SMALL_2 = getFirstActivity(examplePlanSmall2);
+
 test.describe('Visual - Time Strip @a11y', () => {
   test.beforeEach(async ({ page }) => {
+    // Set the clock to the end of the first activity in the plan
+    // This is so we can see the "now" line in the plan view
+    await page.clock.install({ time: FIRST_ACTIVITY_SMALL_2.end + 10000 });
+    await page.clock.resume();
+
     await page.goto(VISUAL_FIXED_URL, { waitUntil: 'domcontentloaded' });
   });
   test('Time Strip View', async ({ page, theme }) => {

e2e/tests/visual-a11y/planning-view.visual.spec.js

@@ -42,6 +42,7 @@ const examplePlanSmall2 = JSON.parse(
 );
 
 const FIRST_ACTIVITY_SMALL_1 = getFirstActivity(examplePlanSmall1);
+const FIRST_ACTIVITY_SMALL_2 = getFirstActivity(examplePlanSmall2);
 
 test.describe('Visual - Timelist progress bar @clock @a11y', () => {
   test.beforeEach(async ({ page }) => {
@@ -59,6 +60,11 @@ test.describe('Visual - Timelist progress bar @clock @a11y', () => {
 
 test.describe('Visual - Plan View @a11y', () => {
   test.beforeEach(async ({ page }) => {
+    // Set the clock to the end of the first activity in the plan
+    // This is so we can see the "now" line in the plan view
+    await page.clock.install({ time: FIRST_ACTIVITY_SMALL_2.end + 10000 });
+    await page.clock.resume();
+
     await page.goto(VISUAL_FIXED_URL, { waitUntil: 'domcontentloaded' });
   });
 

e2e/tests/visual-a11y/search.visual.spec.js

@@ -53,7 +53,7 @@ test.describe('Grand Search @a11y', () => {
     theme
   }) => {
     // Navigate to display layout
-    await page.goto(displayLayout.url);
+    await page.goto(displayLayout.url, { waitUntil: 'networkidle' });
 
     // Search for the object
     await page.getByRole('searchbox', { name: 'Search Input' }).click();
@@ -83,7 +83,7 @@ test.describe('Grand Search @a11y', () => {
     );
 
     // Save and finish editing the Display Layout
-    await page.getByRole('button', { name: 'Save' }).click();
+    await page.getByRole('button', { name: 'Save', exact: true }).click();
     await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
 
     // Search for the object

e2e/tests/visual-a11y/styling.visual.spec.js

@@ -100,9 +100,12 @@ test.describe('Flexible Layout styling @a11y', () => {
     );
 
     // Save Flexible Layout
-    await page.getByRole('button', { name: 'Save' }).click();
+    await page.getByRole('button', { name: 'Save', exact: true }).click();
     await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
 
+    // Select styles tab
+    await page.getByRole('tab', { name: 'Styles' }).click();
+
     await percySnapshot(
       page,
       `Saved Styled Flex Layout with Styled StackedPlot (theme: '${theme}')`
@@ -124,17 +127,30 @@ test.describe('Stacked Plot styling @a11y', () => {
       name: 'StackedPlot1'
     });
 
-    // Create two SWGs and attach them to the Stacked Plot
+    // Create an overlay plots to hold the SWGs
+    const overlayPlot1 = await createDomainObjectWithDefaults(page, {
+      type: 'Overlay Plot',
+      name: 'Overlay Plot 1',
+      parent: stackedPlot.uuid
+    });
+
+    const overlayPlot2 = await createDomainObjectWithDefaults(page, {
+      type: 'Overlay Plot',
+      name: 'Overlay Plot 2',
+      parent: stackedPlot.uuid
+    });
+
+    // Create two SWGs and attach them to the overlay plots
     await createDomainObjectWithDefaults(page, {
       type: 'Sine Wave Generator',
       name: 'Sine Wave Generator 1',
-      parent: stackedPlot.uuid
+      parent: overlayPlot1.uuid
     });
 
     await createDomainObjectWithDefaults(page, {
       type: 'Sine Wave Generator',
       name: 'Sine Wave Generator 2',
-      parent: stackedPlot.uuid
+      parent: overlayPlot2.uuid
     });
   });
 
@@ -177,7 +193,7 @@ test.describe('Stacked Plot styling @a11y', () => {
       setBorderColor,
       setBackgroundColor,
       setTextColor,
-      page.getByLabel('Stacked Plot Item Sine Wave Generator 1')
+      page.getByLabel('Stacked Plot Item Overlay Plot 1')
     );
 
     await percySnapshot(page, `Edit Mode StackedPlot with Styled SWG (theme: '${theme}')`);

example/eventGenerator/EventMetadataProvider.js

@@ -46,6 +46,24 @@ class EventMetadataProvider {
         ]
       }
     };
+
+    const inPlaceUpdateMetadataValue = {
+      key: 'messageId',
+      name: 'row identifier',
+      format: 'string',
+      useToUpdateInPlace: true
+    };
+    const eventAcknowledgeMetadataValue = {
+      key: 'acknowledge',
+      name: 'Acknowledge',
+      format: 'string'
+    };
+
+    const eventGeneratorWithAcknowledge = structuredClone(this.METADATA_BY_TYPE.eventGenerator);
+    eventGeneratorWithAcknowledge.values.push(inPlaceUpdateMetadataValue);
+    eventGeneratorWithAcknowledge.values.push(eventAcknowledgeMetadataValue);
+
+    this.METADATA_BY_TYPE.eventGeneratorWithAcknowledge = eventGeneratorWithAcknowledge;
   }
 
   supportsMetadata(domainObject) {

example/eventGenerator/EventWithAcknowledgeTelemetryProvider.js

@@ -0,0 +1,70 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, 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.
+ *****************************************************************************/
+
+/**
+ * Module defining EventTelemetryProvider. Created by chacskaylo on 06/18/2015.
+ */
+
+import EventTelemetryProvider from './EventTelemetryProvider.js';
+
+class EventWithAcknowledgeTelemetryProvider extends EventTelemetryProvider {
+  constructor() {
+    super();
+
+    this.unAcknowledgedData = undefined;
+  }
+
+  generateData(firstObservedTime, count, startTime, duration, name) {
+    if (this.unAcknowledgedData === undefined) {
+      const unAcknowledgedData = super.generateData(
+        firstObservedTime,
+        count,
+        startTime,
+        duration,
+        name
+      );
+      unAcknowledgedData.messageId = unAcknowledgedData.message;
+      this.unAcknowledgedData = unAcknowledgedData;
+
+      return this.unAcknowledgedData;
+    } else {
+      const acknowledgedData = {
+        ...this.unAcknowledgedData,
+        acknowledge: 'OK'
+      };
+
+      this.unAcknowledgedData = undefined;
+
+      return acknowledgedData;
+    }
+  }
+
+  supportsRequest(domainObject) {
+    return false;
+  }
+
+  supportsSubscribe(domainObject) {
+    return domainObject.type === 'eventGeneratorWithAcknowledge';
+  }
+}
+
+export default EventWithAcknowledgeTelemetryProvider;

example/eventGenerator/plugin.js

@@ -21,6 +21,7 @@
  *****************************************************************************/
 import EventMetadataProvider from './EventMetadataProvider.js';
 import EventTelemetryProvider from './EventTelemetryProvider.js';
+import EventWithAcknowledgeTelemetryProvider from './EventWithAcknowledgeTelemetryProvider.js';
 
 export default function EventGeneratorPlugin(options) {
   return function install(openmct) {
@@ -38,5 +39,20 @@ export default function EventGeneratorPlugin(options) {
     });
     openmct.telemetry.addProvider(new EventTelemetryProvider());
     openmct.telemetry.addProvider(new EventMetadataProvider());
+
+    openmct.types.addType('eventGeneratorWithAcknowledge', {
+      name: 'Event Message Generator with Acknowledge',
+      description:
+        'For development use. Creates sample event message data stream and updates the event row with an acknowledgement.',
+      cssClass: 'icon-generator-events',
+      creatable: true,
+      initialize: function (object) {
+        object.telemetry = {
+          duration: 2.5
+        };
+      }
+    });
+
+    openmct.telemetry.addProvider(new EventWithAcknowledgeTelemetryProvider());
   };
 }

example/faultManagement/exampleFaultSource.js

@@ -20,6 +20,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
+import { DEFAULT_SHELVE_DURATIONS } from '../../src/api/faultmanagement/FaultManagementAPI.js';
 import { acknowledgeFault, randomFaults, shelveFault } from './utils.js';
 
 export default function (staticFaults = false) {
@@ -56,6 +57,9 @@ export default function (staticFaults = false) {
         return Promise.resolve({
           success: true
         });
+      },
+      getShelveDurations() {
+        return DEFAULT_SHELVE_DURATIONS;
       }
     });
   };

example/faultManagement/utils.js

@@ -1,4 +1,27 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, 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 SEVERITIES = ['WATCH', 'WARNING', 'CRITICAL'];
+const MOONWALK_TIMESTAMP = 14159040000;
 const NAMESPACE = '/Example/fault-';
 const getRandom = {
   severity: () => SEVERITIES[Math.floor(Math.random() * 3)],
@@ -13,7 +36,8 @@ const getRandom = {
 
       val = num;
       severity = SEVERITIES[severityIndex - 1];
-      time = num;
+      // Subtract `num` from the timestamp so that the faults are in order
+      time = MOONWALK_TIMESTAMP - num; // Mon, 21 Jul 1969 02:56:00 GMT 🌔👨‍🚀👨‍🚀👨‍🚀
     }
 
     return {
@@ -43,14 +67,7 @@ const getRandom = {
   }
 };
 
-export function shelveFault(
-  fault,
-  opts = {
-    shelved: true,
-    comment: '',
-    shelveDuration: 90000
-  }
-) {
+export function shelveFault(fault, opts = { shelved: true, comment: '', shelveDuration: 90000 }) {
   fault.shelved = true;
 
   setTimeout(() => {
@@ -65,8 +82,8 @@ export function acknowledgeFault(fault) {
 export function randomFaults(staticFaults, count = 5) {
   let faults = [];
 
-  for (let x = 1, y = count + 1; x < y; x++) {
-    faults.push(getRandom.fault(x, staticFaults));
+  for (let i = 1; i <= count; i++) {
+    faults.push(getRandom.fault(i, staticFaults));
   }
 
   return faults;

example/generator/GeneratorMetadataProvider.js

@@ -108,6 +108,16 @@ const METADATA_BY_TYPE = {
             string: 'ON'
           }
         ],
+        filters: [
+          {
+            singleSelectionThreshold: true,
+            comparator: 'equals',
+            possibleValues: [
+              { label: 'OFF', value: 0 },
+              { label: 'ON', value: 1 }
+            ]
+          }
+        ],
         hints: {
           range: 1
         }

example/generator/StateGeneratorProvider.js

@@ -34,14 +34,16 @@ StateGeneratorProvider.prototype.supportsSubscribe = function (domainObject) {
   return domainObject.type === 'example.state-generator';
 };
 
-StateGeneratorProvider.prototype.subscribe = function (domainObject, callback) {
+StateGeneratorProvider.prototype.subscribe = function (domainObject, callback, options) {
   var duration = domainObject.telemetry.duration * 1000;
 
-  var interval = setInterval(function () {
+  var interval = setInterval(() => {
     var now = Date.now();
     var datum = pointForTimestamp(now, duration, domainObject.name);
+    if (!this.shouldBeFiltered(datum, options)) {
       datum.value = String(datum.value);
       callback(datum);
+    }
   }, duration);
 
   return function () {
@@ -63,9 +65,25 @@ StateGeneratorProvider.prototype.request = function (domainObject, options) {
 
   var data = [];
   while (start <= end && data.length < 5000) {
-    data.push(pointForTimestamp(start, duration, domainObject.name));
+    const point = pointForTimestamp(start, duration, domainObject.name);
+
+    if (!this.shouldBeFiltered(point, options)) {
+      data.push(point);
+    }
     start += duration;
   }
 
   return Promise.resolve(data);
 };
+
+StateGeneratorProvider.prototype.shouldBeFiltered = function (point, options) {
+  const valueToFilter = options?.filters?.state?.equals?.[0];
+
+  if (!valueToFilter) {
+    return false;
+  }
+
+  const { value } = point;
+
+  return value !== Number(valueToFilter);
+};

example/imagery/plugin.js

@@ -20,6 +20,8 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
+import { seededRandom } from 'utils/random.js';
+
 const DEFAULT_IMAGE_SAMPLES = [
   'https://www.nasa.gov/wp-content/uploads/static/history/alsj/a16/AS16-117-18731.jpg',
   'https://www.nasa.gov/wp-content/uploads/static/history/alsj/a16/AS16-117-18732.jpg',
@@ -162,8 +164,8 @@ export default function () {
   };
 }
 
-function getCompassValues(min, max) {
-  return min + Math.random() * (max - min);
+function getCompassValues(min, max, timestamp) {
+  return min + seededRandom(timestamp) * (max - min);
 }
 
 function getImageSamples(configuration) {
@@ -283,9 +285,9 @@ function pointForTimestamp(timestamp, name, imageSamples, delay) {
     utc: Math.floor(timestamp / delay) * delay,
     local: Math.floor(timestamp / delay) * delay,
     url,
-    sunOrientation: getCompassValues(0, 360),
-    cameraAzimuth: getCompassValues(0, 360),
-    heading: getCompassValues(0, 360),
+    sunOrientation: getCompassValues(0, 360, timestamp),
+    cameraAzimuth: getCompassValues(0, 360, timestamp),
+    heading: getCompassValues(0, 360, timestamp),
     transformations: navCamTransformations,
     imageDownloadName
   };

karma.conf.cjs

@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2023, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *

package.json

@@ -1,6 +1,6 @@
 {
   "name": "openmct",
-  "version": "4.0.0",
+  "version": "4.1.0-next",
   "description": "The Open MCT core platform",
   "module": "dist/openmct.js",
   "main": "dist/openmct.js",
@@ -16,26 +16,25 @@
   ],
   "devDependencies": {
     "@babel/eslint-parser": "7.23.3",
-    "@braintree/sanitize-url": "6.0.4",
+    "@braintree/sanitize-url": "7.1.1",
     "@types/d3-axis": "3.0.6",
     "@types/d3-scale": "4.0.8",
     "@types/d3-selection": "3.0.10",
-    "@types/d3-shape": "3.0.0",
+    "@types/d3-shape": "3.1.7",
     "@types/eventemitter3": "1.2.0",
     "@types/jasmine": "5.1.2",
     "@types/lodash": "4.17.0",
     "@vue/compiler-sfc": "3.4.3",
     "babel-loader": "9.1.0",
-    "babel-plugin-istanbul": "6.1.1",
-    "codecov": "3.8.3",
+    "babel-plugin-istanbul": "7.0.0",
     "comma-separated-values": "3.6.4",
-    "copy-webpack-plugin": "12.0.2",
+    "copy-webpack-plugin": "13.0.0",
     "cspell": "7.3.8",
     "css-loader": "6.10.0",
     "d3-axis": "3.0.0",
     "d3-scale": "4.0.2",
     "d3-selection": "3.0.0",
-    "d3-shape": "3.0.0",
+    "d3-shape": "3.2.0",
     "eslint": "8.56.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-compat": "4.2.0",
@@ -52,7 +51,7 @@
     "git-rev-sync": "3.0.2",
     "html2canvas": "1.4.1",
     "imports-loader": "5.0.0",
-    "jasmine-core": "5.1.1",
+    "jasmine-core": "5.6.0",
     "karma": "6.4.2",
     "karma-chrome-launcher": "3.2.0",
     "karma-cli": "2.0.0",
@@ -65,13 +64,14 @@
     "karma-webpack": "5.0.1",
     "location-bar": "3.0.1",
     "lodash": "4.17.21",
-    "marked": "12.0.0",
-    "mini-css-extract-plugin": "2.7.6",
+    "marked": "15.0.7",
+    "mini-css-extract-plugin": "2.9.2",
     "moment": "2.30.1",
     "moment-duration-format": "2.3.2",
     "moment-timezone": "0.5.41",
-    "npm-run-all2": "6.1.2",
-    "nyc": "15.1.0",
+    "nano": "10.1.4",
+    "npm-run-all2": "7.0.2",
+    "nyc": "17.1.0",
     "painterro": "1.2.87",
     "plotly.js-basic-dist-min": "2.29.1",
     "plotly.js-gl2d-dist-min": "2.20.0",
@@ -79,21 +79,21 @@
     "prettier-eslint": "16.3.0",
     "printj": "1.3.1",
     "resolve-url-loader": "5.0.0",
-    "sanitize-html": "2.12.1",
+    "sanitize-html": "2.15.0",
     "sass": "1.71.1",
     "sass-loader": "14.1.1",
-    "style-loader": "3.3.3",
+    "style-loader": "4.0.0",
     "terser-webpack-plugin": "5.3.9",
     "tiny-emitter": "2.1.0",
     "typescript": "5.3.3",
-    "uuid": "9.0.1",
+    "uuid": "11.1.0",
     "vue": "3.4.24",
     "vue-eslint-parser": "9.4.2",
     "vue-loader": "16.8.3",
-    "webpack": "5.90.3",
+    "webpack": "5.98.0",
     "webpack-cli": "5.1.1",
     "webpack-dev-server": "5.0.2",
-    "webpack-merge": "5.10.0"
+    "webpack-merge": "6.0.1"
   },
   "scripts": {
     "clean": "rm -rf ./dist ./node_modules ./coverage ./html-test-results ./e2e/test-results ./.nyc_output ./e2e/.nyc_output",
@@ -128,12 +128,9 @@
     "test:perf:contract": "npm test --workspace e2e -- --config=playwright-performance-dev.config.js",
     "test:perf:localhost": "npm test --workspace e2e -- --config=playwright-performance-prod.config.js --project=chrome",
     "test:perf:memory": "npm test --workspace e2e -- --config=playwright-performance-prod.config.js --project=chrome-memory",
-    "update-about-dialog-copyright": "perl -pi -e 's/20\\d\\d\\-202\\d/2014\\-2023/gm' ./src/ui/layout/AboutDialog.vue",
+    "update-about-dialog-copyright": "perl -pi -e 's/20\\d\\d\\-202\\d/2014\\-2024/gm' ./src/ui/layout/AboutDialog.vue",
     "update-copyright-date": "npm run update-about-dialog-copyright && grep -lr --null --include=*.{js,scss,vue,ts,sh,html,md,frag} 'Copyright (c) 20' . | xargs -r0 perl -pi -e 's/Copyright\\s\\(c\\)\\s20\\d\\d\\-20\\d\\d/Copyright \\(c\\)\\ 2014\\-2024/gm'",
     "cov:e2e:report": "nyc report --reporter=lcovonly --report-dir=./coverage/e2e",
-    "cov:e2e:full:publish": "codecov --disable=gcov -f ./coverage/e2e/lcov.info -F e2e-full",
-    "cov:e2e:ci:publish": "codecov --disable=gcov -f ./coverage/e2e/lcov.info -F e2e-ci",
-    "cov:unit:publish": "codecov --disable=gcov -f ./coverage/unit/lcov.info -F unit",
     "prepare": "npm run build:prod && npx tsc"
   },
   "homepage": "https://nasa.github.io/openmct",
@@ -142,7 +139,7 @@
     "url": "git+https://github.com/nasa/openmct.git"
   },
   "engines": {
-    "node": ">=18.14.2 <22"
+    "node": ">=18.14.2 <23"
   },
   "browserslist": [
     "Firefox ESR",

src/api/annotation/AnnotationAPI.js

@@ -582,4 +582,15 @@ export default class AnnotationAPI extends EventEmitter {
       _.isEqual(targets, otherTargets)
     );
   }
+
+  /**
+   * Checks if the given type is annotatable
+   * @param {string} type The type to check
+   * @returns {boolean} Returns true if the type is annotatable
+   */
+  isAnnotatableType(type) {
+    const types = this.openmct.types.getAllTypes();
+
+    return types[type]?.definition?.annotatable;
+  }
 }

src/api/composition/CompositionCollection.js

@@ -20,6 +20,8 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
+import { isIdentifier } from '../objects/object-utils';
+
 /**
  * @typedef {import('openmct').DomainObject} DomainObject
  */
@@ -209,9 +211,15 @@ export default class CompositionCollection {
     this.#cleanUpMutables();
     const children = await this.#provider.load(this.domainObject);
     const childObjects = await Promise.all(
-      children.map((c) => this.#publicAPI.objects.get(c, abortSignal))
+      children.map((child) => {
+        if (isIdentifier(child)) {
+          return this.#publicAPI.objects.get(child, abortSignal);
+        } else {
+          return Promise.resolve(child);
+        }
+      })
     );
-    childObjects.forEach((c) => this.add(c, true));
+    childObjects.forEach((child) => this.add(child, true));
     this.#emit('load');
 
     return childObjects;

src/api/composition/CompositionProvider.js

@@ -96,8 +96,9 @@ export default class CompositionProvider {
    * object.
    * @param {DomainObject} domainObject the domain object
    *        for which to load composition
-   * @returns {Promise<Identifier[]>} a promise for
-   *          the Identifiers in this composition
+   * @returns {Promise<Identifier[] | DomainObject[]>} a promise for
+   *          the Identifiers or Domain Objects in this composition. If Identifiers are returned,
+   *          they will be automatically resolved to domain objects by the API.
    */
   load(domainObject) {
     throw new Error('This method must be implemented by a subclass.');

src/api/composition/DefaultCompositionProvider.js

@@ -21,7 +21,7 @@
  *****************************************************************************/
 import { toRaw } from 'vue';
 
-import { makeKeyString } from '../objects/object-utils.js';
+import { makeKeyString, parseKeyString } from '../objects/object-utils.js';
 import CompositionProvider from './CompositionProvider.js';
 
 /**
@@ -75,7 +75,11 @@ export default class DefaultCompositionProvider extends CompositionProvider {
    *          the Identifiers in this composition
    */
   load(domainObject) {
-    return Promise.all(domainObject.composition);
+    const identifiers = domainObject.composition
+      .filter((idOrKeystring) => idOrKeystring !== null && idOrKeystring !== undefined)
+      .map((idOrKeystring) => parseKeyString(idOrKeystring));
+
+    return Promise.all(identifiers);
   }
   /**
    * Attach listeners for changes to the composition of a given domain object.

src/api/faultmanagement/FaultManagementAPI.js

@@ -20,6 +20,32 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
+/** @type {ShelveDuration[]} */
+export const DEFAULT_SHELVE_DURATIONS = [
+  {
+    name: '5 Minutes',
+    value: 300000
+  },
+  {
+    name: '10 Minutes',
+    value: 600000
+  },
+  {
+    name: '15 Minutes',
+    value: 900000
+  },
+  {
+    name: 'Unlimited',
+    value: null
+  }
+];
+
+/**
+ * Provides an API for managing faults within Open MCT.
+ * It allows for the addition of a fault provider, checking for provider support, and
+ * performing various operations such as requesting, subscribing to, acknowledging,
+ * and shelving faults.
+ */
 export default class FaultManagementAPI {
   /**
    * @param {import("openmct").OpenMCT} openmct
@@ -29,14 +55,20 @@ export default class FaultManagementAPI {
   }
 
   /**
-   * @param {*} provider
+   * Sets the provider for the Fault Management API.
+   * The provider should implement methods for acknowledging and shelving faults.
+   *
+   * @param {*} provider - The provider to be set.
    */
   addProvider(provider) {
     this.provider = provider;
   }
 
   /**
-   * @returns {boolean}
+   * Checks if the current provider supports fault management actions.
+   * Specifically, it checks if the provider has methods for acknowledging and shelving faults.
+   *
+   * @returns {boolean} - Returns true if the provider supports fault management actions, otherwise false.
    */
   supportsActions() {
     return (
@@ -45,48 +77,82 @@ export default class FaultManagementAPI {
   }
 
   /**
-   * @param {import('openmct').DomainObject} domainObject
-   * @returns {Promise.<FaultAPIResponse[]>}
+   * Requests fault data for a given domain object.
+   * This method checks if the current provider supports the request operation for the given domain object.
+   * If supported, it delegates the request to the provider's request method.
+   * If not supported, it returns a rejected promise.
+   *
+   * @param {import('openmct').DomainObject} domainObject - The domain object for which fault data is requested.
+   * @returns {Promise.<FaultAPIResponse[]>} - A promise that resolves to an array of fault API responses.
    */
   request(domainObject) {
     if (!this.provider?.supportsRequest(domainObject)) {
-      return Promise.reject();
+      return Promise.reject('Provider does not support request operation');
     }
 
     return this.provider.request(domainObject);
   }
 
   /**
-   * @param {import('openmct').DomainObject} domainObject
-   * @param {Function} callback
-   * @returns {Function} unsubscribe
+   * Subscribes to fault data updates for a given domain object.
+   * This method checks if the current provider supports the subscribe operation for the given domain object.
+   * If supported, it delegates the subscription to the provider's subscribe method.
+   * If not supported, it returns a rejected promise.
+   *
+   * @param {import('openmct').DomainObject} domainObject - The domain object for which to subscribe to fault data updates.
+   * @param {Function} callback - The callback function to be called with fault data updates.
+   * @returns {Function} unsubscribe - A function to unsubscribe from the fault data updates.
    */
   subscribe(domainObject, callback) {
     if (!this.provider?.supportsSubscribe(domainObject)) {
-      return Promise.reject();
+      return Promise.reject('Provider does not support subscribe operation');
     }
 
     return this.provider.subscribe(domainObject, callback);
   }
 
   /**
-   * @param {Fault} fault
-   * @param {*} ackData
+   * Acknowledges a fault using the provider's acknowledgeFault method.
+   *
+   * @param {Fault} fault - The fault object to be acknowledged.
+   * @param {*} ackData - Additional data required for acknowledging the fault.
+   * @returns {Promise.<T>} - A promise that resolves when the fault is acknowledged.
    */
   acknowledgeFault(fault, ackData) {
     return this.provider.acknowledgeFault(fault, ackData);
   }
 
   /**
-   * @param {Fault} fault
-   * @param {*} shelveData
-   * @returns {Promise.<T>}
+   * Shelves a fault using the provider's shelveFault method.
+   *
+   * @param {Fault} fault - The fault object to be shelved.
+   * @param {*} shelveData - Additional data required for shelving the fault.
+   * @returns {Promise.<T>} - A promise that resolves when the fault is shelved.
    */
   shelveFault(fault, shelveData) {
     return this.provider.shelveFault(fault, shelveData);
   }
+
+  /**
+   * Retrieves the available shelve durations from the provider, or the default durations if the
+   * provider does not provide any.
+   * @returns {ShelveDuration[] | undefined}
+   */
+  getShelveDurations() {
+    if (!this.provider) {
+      return;
     }
 
+    return this.provider.getShelveDurations?.() ?? DEFAULT_SHELVE_DURATIONS;
+  }
+}
+
+/**
+ * @typedef {Object} ShelveDuration
+ * @property {string} name - The name of the shelve duration
+ * @property {number|null} value - The value of the shelve duration in milliseconds, or null for unlimited
+ */
+
 /**
  * @typedef {Object} TriggerValueInfo
  * @property {number} value

src/api/objects/ObjectAPI.js

@@ -27,6 +27,7 @@ import ConflictError from './ConflictError.js';
 import InMemorySearchProvider from './InMemorySearchProvider.js';
 import InterceptorRegistry from './InterceptorRegistry.js';
 import MutableDomainObject from './MutableDomainObject.js';
+import { isIdentifier, isKeyString } from './object-utils.js';
 import RootObjectProvider from './RootObjectProvider.js';
 import RootRegistry from './RootRegistry.js';
 import Transaction from './Transaction.js';
@@ -742,11 +743,19 @@ export default class ObjectAPI {
    * @param {AbortSignal} abortSignal (optional) signal to abort fetch requests
    * @returns {Promise<Array<DomainObject>>} a promise containing an array of domain objects
    */
-  async getOriginalPath(identifier, path = [], abortSignal = null) {
-    const domainObject = await this.get(identifier, abortSignal);
+  async getOriginalPath(identifierOrObject, path = [], abortSignal = null) {
+    let domainObject;
+
+    if (isKeyString(identifierOrObject) || isIdentifier(identifierOrObject)) {
+      domainObject = await this.get(identifierOrObject, abortSignal);
+    } else {
+      domainObject = identifierOrObject;
+    }
+
     if (!domainObject) {
       return [];
     }
+
     path.push(domainObject);
     const { location } = domainObject;
     if (location && !this.#pathContainsDomainObject(location, path)) {

src/api/priority/PriorityAPI.js

@@ -21,8 +21,11 @@
  *****************************************************************************/
 
 const PRIORITIES = Object.freeze({
+  HIGHEST: Infinity,
   HIGH: 1000,
   DEFAULT: 0,
-  LOW: -1000
+  LOW: -1000,
+  LOWEST: -Infinity
 });
+
 export default PRIORITIES;

src/api/telemetry/BatchingWebSocket.js

@@ -20,25 +20,46 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 import installWorker from './WebSocketWorker.js';
+
 /**
- * Describes the strategy to be used when batching WebSocket messages
- *
- * @typedef BatchingStrategy
- * @property {Function} shouldBatchMessage a function that accepts a single
- * argument - the raw message received from the websocket. Every message
- * received will be evaluated against this function so it should be performant.
- * Note also that this function is executed in a worker, so it must be
- * completely self-contained with no external dependencies. The function
- * should return `true` if the message should be batched, and `false` if not.
- * @property {Function} getBatchIdFromMessage a function that accepts a
- * single argument - the raw message received from the websocket. Only messages
- * where `shouldBatchMessage` has evaluated to true will be passed into this
- * function. The function should return a unique value on which to batch the
- * messages. For example a telemetry, channel, or parameter identifier.
+ * @typedef RequestIdleCallbackOptions
+ * @prop {Number} timeout If the number of milliseconds represented by this
+ * parameter has elapsed and the callback has not already been called, invoke
+ *  the callback.
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback
  */
+
 /**
- * Provides a reliable and convenient WebSocket abstraction layer that handles
- * a lot of boilerplate common to managing WebSocket connections such as:
+ * Mocks requestIdleCallback for Safari using setTimeout. Functionality will be
+ * identical to setTimeout in Safari, which is to fire the callback function
+ * after the provided timeout period.
+ *
+ * In browsers that support requestIdleCallback, this const is just a
+ * pointer to the native function.
+ *
+ * @param {Function} callback a callback to be invoked during the next idle period, or
+ * after the specified timeout
+ * @param {RequestIdleCallbackOptions} options
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback
+ *
+ */
+function requestIdleCallbackPolyfill(callback, options) {
+  return (
+    // eslint-disable-next-line compat/compat
+    window.requestIdleCallback ??
+    ((fn, { timeout }) =>
+      setTimeout(() => {
+        fn({ didTimeout: false });
+      }, timeout))
+  );
+}
+const requestIdleCallback = requestIdleCallbackPolyfill();
+
+const ONE_SECOND = 1000;
+
+/**
+ * Provides a WebSocket abstraction layer that handles a lot of boilerplate common
+ * to managing WebSocket connections such as:
  * - Establishing a WebSocket connection to a server
  * - Reconnecting on error, with a fallback strategy
  * - Queuing messages so that clients can send messages without concern for the current
@@ -49,22 +70,19 @@ import installWorker from './WebSocketWorker.js';
  * and batching of messages without blocking either the UI or server.
  *
  */
-// Shim for Internet Explorer, I mean Safari. It doesn't support requestIdleCallback, but it's in a tech preview, so it will be dropping soon.
-const requestIdleCallback =
-  // eslint-disable-next-line compat/compat
-  window.requestIdleCallback ?? ((fn, { timeout }) => setTimeout(fn, timeout));
-const ONE_SECOND = 1000;
-const FIVE_SECONDS = 5 * ONE_SECOND;
-
 class BatchingWebSocket extends EventTarget {
   #worker;
   #openmct;
   #showingRateLimitNotification;
-  #maxBatchSize;
-  #applicationIsInitializing;
-  #maxBatchWait;
+  #maxBufferSize;
+  #throttleRate;
   #firstBatchReceived;
+  #lastBatchReceived;
+  #peakBufferSize = Number.NEGATIVE_INFINITY;
 
+  /**
+   * @param {import('openmct.js').OpenMCT} openmct
+   */
   constructor(openmct) {
     super();
     // Install worker, register listeners etc.
@@ -74,9 +92,8 @@ class BatchingWebSocket extends EventTarget {
     this.#worker = new Worker(workerUrl);
     this.#openmct = openmct;
     this.#showingRateLimitNotification = false;
-    this.#maxBatchSize = Number.POSITIVE_INFINITY;
-    this.#maxBatchWait = ONE_SECOND;
-    this.#applicationIsInitializing = true;
+    this.#maxBufferSize = Number.POSITIVE_INFINITY;
+    this.#throttleRate = ONE_SECOND;
     this.#firstBatchReceived = false;
 
     const routeMessageToHandler = this.#routeMessageToHandler.bind(this);
@@ -89,20 +106,6 @@ class BatchingWebSocket extends EventTarget {
       },
       { once: true }
     );
-
-    openmct.once('start', () => {
-      // An idle callback is a pretty good indication that a complex display is done loading. At that point set the batch size more conservatively.
-      // Force it after 5 seconds if it hasn't happened yet.
-      requestIdleCallback(
-        () => {
-          this.#applicationIsInitializing = false;
-          this.setMaxBatchSize(this.#maxBatchSize);
-        },
-        {
-          timeout: FIVE_SECONDS
-        }
-      );
-    });
   }
 
   /**
@@ -137,57 +140,48 @@ class BatchingWebSocket extends EventTarget {
   }
 
   /**
-   * Set the strategy used to both decide which raw messages to batch, and how to group
-   * them.
-   * @param {BatchingStrategy} strategy The batching strategy to use when evaluating
-   * raw messages from the WebSocket.
-   */
-  setBatchingStrategy(strategy) {
-    const serializedStrategy = {
-      shouldBatchMessage: strategy.shouldBatchMessage.toString(),
-      getBatchIdFromMessage: strategy.getBatchIdFromMessage.toString()
-    };
-
-    this.#worker.postMessage({
-      type: 'setBatchingStrategy',
-      serializedStrategy
-    });
-  }
-
-  /**
-   * @param {number} maxBatchSize the maximum length of a batch of messages. For example,
-   * the maximum number of telemetry values to batch before dropping them
+   * @param {number} maxBufferSize the maximum length of the receive buffer in characters.
    * Note that this is a fail-safe that is only invoked if performance drops to the
    * point where Open MCT cannot keep up with the amount of telemetry it is receiving.
    * In this event it will sacrifice the oldest telemetry in the batch in favor of the
    * most recent telemetry. The user will be informed that telemetry has been dropped.
    *
-   * This should be set appropriately for the expected data rate. eg. If telemetry
-   * is received at 10Hz for each telemetry point, then a minimal combination of batch
-   * size and rate is 10 and 1000 respectively. Ideally you would add some margin, so
-   * 15 would probably be a better batch size.
+   * This should be set appropriately for the expected data rate. eg. If typical usage
+   * sees 2000 messages arriving at a client per second, with an average message size
+   * of 500 bytes, then 2000 * 500 = 1000000 characters will be right on the limit.
+   * In this scenario, a buffer size of 1500000 character might be more appropriate
+   * to allow some overhead for bursty telemetry, and temporary UI load during page
+   * load.
+   *
+   * The PerformanceIndicator plugin (openmct.plugins.PerformanceIndicator) gives
+   * statistics on buffer utilization. It can be used to scale the buffer appropriately.
    */
-  setMaxBatchSize(maxBatchSize) {
-    this.#maxBatchSize = maxBatchSize;
-    if (!this.#applicationIsInitializing) {
-      this.#sendMaxBatchSizeToWorker(this.#maxBatchSize);
+  setMaxBufferSize(maxBatchSize) {
+    this.#maxBufferSize = maxBatchSize;
+    this.#sendMaxBufferSizeToWorker(this.#maxBufferSize);
   }
+  setThrottleRate(throttleRate) {
+    this.#throttleRate = throttleRate;
+    this.#sendThrottleRateToWorker(this.#throttleRate);
   }
-  setMaxBatchWait(wait) {
-    this.#maxBatchWait = wait;
-    this.#sendBatchWaitToWorker(this.#maxBatchWait);
-  }
-  #sendMaxBatchSizeToWorker(maxBatchSize) {
+  setThrottleMessagePattern(throttleMessagePattern) {
     this.#worker.postMessage({
-      type: 'setMaxBatchSize',
-      maxBatchSize
+      type: 'setThrottleMessagePattern',
+      throttleMessagePattern
     });
   }
 
-  #sendBatchWaitToWorker(maxBatchWait) {
+  #sendMaxBufferSizeToWorker(maxBufferSize) {
     this.#worker.postMessage({
-      type: 'setMaxBatchWait',
-      maxBatchWait
+      type: 'setMaxBufferSize',
+      maxBufferSize
+    });
+  }
+
+  #sendThrottleRateToWorker(throttleRate) {
+    this.#worker.postMessage({
+      type: 'setThrottleRate',
+      throttleRate
     });
   }
 
@@ -203,9 +197,38 @@ class BatchingWebSocket extends EventTarget {
 
   #routeMessageToHandler(message) {
     if (message.data.type === 'batch') {
-      this.start = Date.now();
       const batch = message.data.batch;
-      if (batch.dropped === true && !this.#showingRateLimitNotification) {
+      const now = performance.now();
+
+      let currentBufferLength = message.data.currentBufferLength;
+      let maxBufferSize = message.data.maxBufferSize;
+      let parameterCount = batch.length;
+      if (this.#peakBufferSize < currentBufferLength) {
+        this.#peakBufferSize = currentBufferLength;
+      }
+
+      if (this.#openmct.performance !== undefined) {
+        if (!isNaN(this.#lastBatchReceived)) {
+          const elapsed = (now - this.#lastBatchReceived) / 1000;
+          this.#lastBatchReceived = now;
+          this.#openmct.performance.measurements.set(
+            'Parameters/s',
+            Math.floor(parameterCount / elapsed)
+          );
+        }
+        this.#openmct.performance.measurements.set(
+          'Buff. Util. (bytes)',
+          `${currentBufferLength} / ${maxBufferSize}`
+        );
+        this.#openmct.performance.measurements.set(
+          'Peak Buff. Util. (bytes)',
+          `${this.#peakBufferSize} / ${maxBufferSize}`
+        );
+      }
+
+      this.start = Date.now();
+      const dropped = message.data.dropped;
+      if (dropped === true && !this.#showingRateLimitNotification) {
         const notification = this.#openmct.notifications.alert(
           'Telemetry dropped due to client rate limiting.',
           { hint: 'Refresh individual telemetry views to retrieve dropped telemetry if needed.' }
@@ -240,18 +263,16 @@ class BatchingWebSocket extends EventTarget {
             console.warn(`Event loop is too busy to process batch.`);
             this.#waitUntilIdleAndRequestNextBatch(batch);
           } else {
-            // After ingesting a telemetry batch, wait until the event loop is idle again before
-            // informing the worker we are ready for another batch.
             this.#readyForNextBatch();
           }
         } else {
-          if (waitedFor > ONE_SECOND) {
+          if (waitedFor > this.#throttleRate) {
             console.warn(`Warning, batch processing took ${waitedFor}ms`);
           }
           this.#readyForNextBatch();
         }
       },
-      { timeout: ONE_SECOND }
+      { timeout: this.#throttleRate }
     );
   }
 }

src/api/telemetry/TelemetryAPI.js

@@ -250,6 +250,117 @@ export default class TelemetryAPI {
     return options;
   }
 
+  /**
+   * Sanitizes objects for consistent serialization by:
+   * 1. Removing non-plain objects (class instances) and functions
+   * 2. Sorting object keys alphabetically to ensure consistent ordering
+   */
+  sanitizeForSerialization(key, value) {
+    // Handle null and primitives directly
+    if (value === null || typeof value !== 'object') {
+      return value;
+    }
+
+    // Remove functions and non-plain objects (except arrays)
+    if (
+      typeof value === 'function' ||
+      (Object.getPrototypeOf(value) !== Object.prototype && !Array.isArray(value))
+    ) {
+      return undefined;
+    }
+
+    // For plain objects, just sort the keys
+    if (!Array.isArray(value)) {
+      const sortedObject = {};
+      const sortedKeys = Object.keys(value).sort();
+
+      sortedKeys.forEach((objectKey) => {
+        sortedObject[objectKey] = value[objectKey];
+      });
+
+      return sortedObject;
+    }
+
+    return value;
+  }
+
+  /**
+   * Determines whether a domain object has numeric telemetry data.
+   * A domain object has numeric telemetry if it:
+   * 1. Has a telemetry property
+   * 2. Has telemetry metadata with domain values (like timestamps)
+   * 3. Has range values (measurements) where at least one is numeric
+   *
+   * @method hasNumericTelemetry
+   * @param {import('openmct').DomainObject} domainObject The domain object to check
+   * @returns {boolean} True if the object has numeric telemetry, false otherwise
+   */
+  hasNumericTelemetry(domainObject) {
+    if (!Object.prototype.hasOwnProperty.call(domainObject, 'telemetry')) {
+      return false;
+    }
+
+    const metadata = this.openmct.telemetry.getMetadata(domainObject);
+    const rangeValues = metadata.valuesForHints(['range']);
+    const domains = metadata.valuesForHints(['domain']);
+
+    return (
+      domains.length > 0 &&
+      rangeValues.length > 0 &&
+      !rangeValues.every((value) => value.format === 'string')
+    );
+  }
+
+  /**
+   * Generates a numeric hash value for an options object. The hash is consistent
+   * for equivalent option objects regardless of property order.
+   *
+   * This is used to create compact, unique cache keys for telemetry subscriptions with
+   * different options configurations. The hash function ensures that identical options
+   * objects will always generate the same hash value, while different options objects
+   * (even with small differences) will generate different hash values.
+   *
+   * @private
+   * @param {Object} options The options object to hash
+   * @returns {number} A positive integer hash of the options object
+   */
+  #hashOptions(options) {
+    const sanitizedOptionsString = JSON.stringify(
+      options,
+      this.sanitizeForSerialization.bind(this)
+    );
+
+    let hash = 0;
+    const prime = 31;
+    const modulus = 1e9 + 9; // Large prime number
+
+    for (let i = 0; i < sanitizedOptionsString.length; i++) {
+      const char = sanitizedOptionsString.charCodeAt(i);
+      // Calculate new hash value while keeping numbers manageable
+      hash = Math.floor((hash * prime + char) % modulus);
+    }
+
+    return Math.abs(hash);
+  }
+
+  /**
+   * Generates a unique cache key for a telemetry subscription based on the
+   * domain object identifier and options (which includes strategy).
+   *
+   * Uses a hash of the options object to create compact cache keys while still
+   * ensuring unique keys for different subscription configurations.
+   *
+   * @private
+   * @param {import('openmct').DomainObject} domainObject The domain object being subscribed to
+   * @param {Object} options The subscription options object (including strategy)
+   * @returns {string} A unique key string for caching the subscription
+   */
+  #getSubscriptionCacheKey(domainObject, options) {
+    const keyString = makeKeyString(domainObject.identifier);
+
+    return `${keyString}:${this.#hashOptions(options)}`;
+  }
+
   /**
    * Register a request interceptor that transforms a request via module:openmct.TelemetryAPI.request
    * The request will be modified when it is received and will be returned in it's modified state
@@ -418,16 +529,14 @@ export default class TelemetryAPI {
       this.#subscribeCache = {};
     }
 
-    const keyString = makeKeyString(domainObject.identifier);
     const supportedStrategy = supportsBatching ? requestedStrategy : SUBSCRIBE_STRATEGY.LATEST;
     // Override the requested strategy with the strategy supported by the provider
     const optionsWithSupportedStrategy = {
       ...options,
       strategy: supportedStrategy
     };
-    // If batching is supported, we need to cache a subscription for each strategy -
-    // latest and batched.
-    const cacheKey = `${keyString}:${supportedStrategy}`;
+
+    const cacheKey = this.#getSubscriptionCacheKey(domainObject, optionsWithSupportedStrategy);
     let subscriber = this.#subscribeCache[cacheKey];
 
     if (!subscriber) {

src/api/telemetry/TelemetryCollection.js

@@ -116,8 +116,7 @@ export default class TelemetryCollection extends EventEmitter {
   }
 
   /**
-   * This will start the requests for historical and realtime data,
-   * as well as setting up initial values and watchers
+   * @returns {Array} All bounded telemetry
    */
   getAll() {
     return this.boundedTelemetry;

src/api/telemetry/WebSocketWorker.js

@@ -24,10 +24,6 @@ export default function installWorker() {
   const ONE_SECOND = 1000;
   const FALLBACK_AND_WAIT_MS = [1000, 5000, 5000, 10000, 10000, 30000];
 
-  /**
-   * @typedef {import('./BatchingWebSocket').BatchingStrategy} BatchingStrategy
-   */
-
   /**
    * Provides a WebSocket connection that is resilient to errors and dropouts.
    * On an error or dropout, will automatically reconnect.
@@ -215,17 +211,17 @@ export default function installWorker() {
         case 'message':
           this.#websocket.enqueueMessage(message.data.message);
           break;
-        case 'setBatchingStrategy':
-          this.setBatchingStrategy(message);
-          break;
         case 'readyForNextBatch':
           this.#messageBatcher.readyForNextBatch();
           break;
-        case 'setMaxBatchSize':
-          this.#messageBatcher.setMaxBatchSize(message.data.maxBatchSize);
+        case 'setMaxBufferSize':
+          this.#messageBatcher.setMaxBufferSize(message.data.maxBufferSize);
           break;
-        case 'setMaxBatchWait':
-          this.#messageBatcher.setMaxBatchWait(message.data.maxBatchWait);
+        case 'setThrottleRate':
+          this.#messageBatcher.setThrottleRate(message.data.throttleRate);
+          break;
+        case 'setThrottleMessagePattern':
+          this.#messageBatcher.setThrottleMessagePattern(message.data.throttleMessagePattern);
           break;
         default:
           throw new Error(`Unknown message type: ${type}`);
@@ -238,122 +234,69 @@ export default function installWorker() {
     disconnect() {
       this.#websocket.disconnect();
     }
-    setBatchingStrategy(message) {
-      const { serializedStrategy } = message.data;
-      const batchingStrategy = {
-        // eslint-disable-next-line no-new-func
-        shouldBatchMessage: new Function(`return ${serializedStrategy.shouldBatchMessage}`)(),
-        // eslint-disable-next-line no-new-func
-        getBatchIdFromMessage: new Function(`return ${serializedStrategy.getBatchIdFromMessage}`)()
-        // Will also include maximum batch length here
-      };
-      this.#messageBatcher.setBatchingStrategy(batchingStrategy);
-    }
   }
 
   /**
-   * Received messages from the WebSocket, and passes them along to the
-   * Worker interface and back to the main thread.
+   * Responsible for buffering messages
    */
-  class WebSocketToWorkerMessageBroker {
-    #worker;
-    #messageBatcher;
-
-    constructor(messageBatcher, worker) {
-      this.#messageBatcher = messageBatcher;
-      this.#worker = worker;
-    }
-
-    routeMessageToHandler(data) {
-      if (this.#messageBatcher.shouldBatchMessage(data)) {
-        this.#messageBatcher.addMessageToBatch(data);
-      } else {
-        this.#worker.postMessage({
-          type: 'message',
-          message: data
-        });
-      }
-    }
-  }
-
-  /**
-   * Responsible for batching messages according to the defined batching strategy.
-   */
-  class MessageBatcher {
-    #batch;
-    #batchingStrategy;
-    #hasBatch = false;
-    #maxBatchSize;
+  class MessageBuffer {
+    #buffer;
+    #currentBufferLength;
+    #dropped;
+    #maxBufferSize;
     #readyForNextBatch;
     #worker;
     #throttledSendNextBatch;
+    #throttleMessagePattern;
 
     constructor(worker) {
       // No dropping telemetry unless we're explicitly told to.
-      this.#maxBatchSize = Number.POSITIVE_INFINITY;
+      this.#maxBufferSize = Number.POSITIVE_INFINITY;
       this.#readyForNextBatch = false;
       this.#worker = worker;
       this.#resetBatch();
-      this.setMaxBatchWait(ONE_SECOND);
+      this.setThrottleRate(ONE_SECOND);
     }
     #resetBatch() {
-      this.#batch = {};
-      this.#hasBatch = false;
+      //this.#batch = {};
+      this.#buffer = [];
+      this.#currentBufferLength = 0;
+      this.#dropped = false;
     }
-    /**
-     * @param {BatchingStrategy} strategy
-     */
-    setBatchingStrategy(strategy) {
-      this.#batchingStrategy = strategy;
+
+    addMessageToBuffer(message) {
+      this.#buffer.push(message);
+      this.#currentBufferLength += message.length;
+
+      for (
+        let i = 0;
+        this.#currentBufferLength > this.#maxBufferSize && i < this.#buffer.length;
+        i++
+      ) {
+        const messageToConsider = this.#buffer[i];
+        if (this.#shouldThrottle(messageToConsider)) {
+          this.#buffer.splice(i, 1);
+          this.#currentBufferLength -= messageToConsider.length;
+          this.#dropped = true;
         }
-    /**
-     * Applies the `shouldBatchMessage` function from the supplied batching strategy
-     * to each message to determine if it should be added to a batch. If not batched,
-     * the message is immediately sent over the worker to the main thread.
-     * @param {any} message the message received from the WebSocket. See the WebSocket
-     * documentation for more details -
-     * https://developer.mozilla.org/en-US/docs/Web/API/MessageEvent/data
-     * @returns
-     */
-    shouldBatchMessage(message) {
-      return (
-        this.#batchingStrategy.shouldBatchMessage &&
-        this.#batchingStrategy.shouldBatchMessage(message)
-      );
-    }
-    /**
-     * Adds the given message to a batch. The batch group that the message is added
-     * to will be determined by the value returned by `getBatchIdFromMessage`.
-     * @param {any} message the message received from the WebSocket. See the WebSocket
-     * documentation for more details -
-     * https://developer.mozilla.org/en-US/docs/Web/API/MessageEvent/data
-     */
-    addMessageToBatch(message) {
-      const batchId = this.#batchingStrategy.getBatchIdFromMessage(message);
-      let batch = this.#batch[batchId];
-      if (batch === undefined) {
-        this.#hasBatch = true;
-        batch = this.#batch[batchId] = [message];
-      } else {
-        batch.push(message);
-      }
-      if (batch.length > this.#maxBatchSize) {
-        console.warn(
-          `Exceeded max batch size of ${this.#maxBatchSize} for ${batchId}. Dropping value.`
-        );
-        batch.shift();
-        this.#batch.dropped = true;
       }
 
       if (this.#readyForNextBatch) {
         this.#throttledSendNextBatch();
       }
     }
-    setMaxBatchSize(maxBatchSize) {
-      this.#maxBatchSize = maxBatchSize;
+
+    #shouldThrottle(message) {
+      return (
+        this.#throttleMessagePattern !== undefined && this.#throttleMessagePattern.test(message)
+      );
     }
-    setMaxBatchWait(maxBatchWait) {
-      this.#throttledSendNextBatch = throttle(this.#sendNextBatch.bind(this), maxBatchWait);
+
+    setMaxBufferSize(maxBufferSize) {
+      this.#maxBufferSize = maxBufferSize;
+    }
+    setThrottleRate(throttleRate) {
+      this.#throttledSendNextBatch = throttle(this.#sendNextBatch.bind(this), throttleRate);
     }
     /**
      * Indicates that client code is ready to receive the next batch of
@@ -362,21 +305,33 @@ export default function installWorker() {
      * any new data is available.
      */
     readyForNextBatch() {
-      if (this.#hasBatch) {
+      if (this.#hasData()) {
         this.#throttledSendNextBatch();
       } else {
         this.#readyForNextBatch = true;
       }
     }
     #sendNextBatch() {
-      const batch = this.#batch;
+      const buffer = this.#buffer;
+      const dropped = this.#dropped;
+      const currentBufferLength = this.#currentBufferLength;
+
       this.#resetBatch();
       this.#worker.postMessage({
         type: 'batch',
-        batch
+        dropped,
+        currentBufferLength: currentBufferLength,
+        maxBufferSize: this.#maxBufferSize,
+        batch: buffer
       });
+
       this.#readyForNextBatch = false;
-      this.#hasBatch = false;
+    }
+    #hasData() {
+      return this.#currentBufferLength > 0;
+    }
+    setThrottleMessagePattern(priorityMessagePattern) {
+      this.#throttleMessagePattern = new RegExp(priorityMessagePattern, 'm');
     }
   }
 
@@ -408,15 +363,14 @@ export default function installWorker() {
   }
 
   const websocket = new ResilientWebSocket(self);
-  const messageBatcher = new MessageBatcher(self);
-  const workerBroker = new WorkerToWebSocketMessageBroker(websocket, messageBatcher);
-  const websocketBroker = new WebSocketToWorkerMessageBroker(messageBatcher, self);
+  const messageBuffer = new MessageBuffer(self);
+  const workerBroker = new WorkerToWebSocketMessageBroker(websocket, messageBuffer);
 
   self.addEventListener('message', (message) => {
     workerBroker.routeMessageToHandler(message);
   });
   websocket.registerMessageCallback((data) => {
-    websocketBroker.routeMessageToHandler(data);
+    messageBuffer.addMessageToBuffer(data);
   });
 
   self.websocketInstance = websocket;

src/api/time/IndependentTimeContext.js

@@ -321,17 +321,9 @@ class IndependentTimeContext extends TimeContext {
       return this.upstreamTimeContext.setMode(...arguments);
     }
 
-    if (mode === MODES.realtime) {
-      // TODO: This should probably happen up front in creating an independent time context
-      // TODO: not just in time every time setMode is called
-      if (this.activeClock === undefined) {
-        this.activeClock = this.globalTimeContext.getClock();
-      }
-
-      if (this.activeClock === undefined) {
+    if (mode === MODES.realtime && this.activeClock === undefined) {
       throw `Unknown clock. Has a clock been registered with 'addClock'?`;
     }
-    }
 
     if (mode !== this.mode) {
       this.mode = mode;
@@ -367,6 +359,18 @@ class IndependentTimeContext extends TimeContext {
     }
   }
 
+  /**
+   * @returns {boolean}
+   * @override
+   */
+  isFixed() {
+    if (this.upstreamTimeContext) {
+      return this.upstreamTimeContext.isFixed(...arguments);
+    } else {
+      return super.isFixed(...arguments);
+    }
+  }
+
   /**
    * @returns {number}
    * @override
@@ -408,7 +412,7 @@ class IndependentTimeContext extends TimeContext {
   }
 
   /**
-   * Reset the time context to the global time context
+   * Reset the time context from the global time context
    */
   resetContext() {
     if (this.upstreamTimeContext) {
@@ -436,6 +440,10 @@ class IndependentTimeContext extends TimeContext {
     // Emit bounds so that views that are changing context get the upstream bounds
     this.emit('bounds', this.getBounds());
     this.emit(TIME_CONTEXT_EVENTS.boundsChanged, this.getBounds());
+    // Also emit the mode in case it's different from previous time context
+    if (this.getMode()) {
+      this.emit(TIME_CONTEXT_EVENTS.modeChanged, this.#copy(this.getMode()));
+    }
   }
 
   /**
@@ -510,6 +518,10 @@ class IndependentTimeContext extends TimeContext {
       // Emit bounds so that views that are changing context get the upstream bounds
       this.emit('bounds', this.getBounds());
       this.emit(TIME_CONTEXT_EVENTS.boundsChanged, this.getBounds());
+      // Also emit the mode in case it's different from the global time context
+      if (this.getMode()) {
+        this.emit(TIME_CONTEXT_EVENTS.modeChanged, this.#copy(this.getMode()));
+      }
       // 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);
     }

src/api/time/TimeAPI.js

@@ -23,6 +23,7 @@
 import { FIXED_MODE_KEY, REALTIME_MODE_KEY } from '@/api/time/constants';
 import IndependentTimeContext from '@/api/time/IndependentTimeContext';
 
+import { TIME_CONTEXT_EVENTS } from './constants';
 import GlobalTimeContext from './GlobalTimeContext.js';
 
 /**
@@ -134,30 +135,33 @@ class TimeAPI extends GlobalTimeContext {
 
   /**
    * Get or set an independent time context which follows the TimeAPI timeSystem,
-   * but with different bounds for a given domain object
-   * @param {string} keyString The keyString identifier of the domain object these offsets are set for
-   * @param {TimeConductorBounds | ClockOffsets} boundsOrOffsets either bounds if in fixed mode, or offsets if in realtime mode
-   * @param {string} clockKey the key for the real time clock to use
+   * but with different offsets for a given domain object
+   * @param {string} key The identifier key of the domain object these offsets are set for
+   * @param {ClockOffsets | TimeConductorBounds} value This maintains a sliding time window of a fixed width that automatically updates
+   * @param {key | string} clockKey the real time clock key currently in use
    */
-  addIndependentContext(keyString, boundsOrOffsets, clockKey) {
-    let timeContext = this.getIndependentContext(keyString);
+  addIndependentContext(key, value, clockKey) {
+    let timeContext = this.getIndependentContext(key);
 
-    //stop following upstream time context since the view has it's own
+    //stop following upstream time context since the view has its own
     timeContext.resetContext();
 
     if (clockKey) {
       timeContext.setClock(clockKey);
-      timeContext.setMode(REALTIME_MODE_KEY, boundsOrOffsets);
+      timeContext.setMode(REALTIME_MODE_KEY, value);
     } else {
-      timeContext.setMode(FIXED_MODE_KEY, boundsOrOffsets);
+      timeContext.setMode(FIXED_MODE_KEY, value);
     }
 
+    // Also emit the mode in case it's different from the previous time context
+    timeContext.emit(TIME_CONTEXT_EVENTS.modeChanged, structuredClone(timeContext.getMode()));
+
     // Notify any nested views to update, pass in the viewKey so that particular view can skip getting an upstream context
-    this.emit('refreshContext', keyString);
+    this.emit('refreshContext', key);
 
     return () => {
       //follow any upstream time context
-      this.emit('removeOwnContext', keyString);
+      this.emit('removeOwnContext', key);
     };
   }
 

src/api/time/TimeContext.js

@@ -196,7 +196,7 @@ class TimeContext extends EventEmitter {
     } else if (bounds.start > bounds.end) {
       return {
         valid: false,
-        message: 'Start bound exceeds end bound'
+        message: 'Specified start date exceeds end bound'
       };
     }
 

src/api/types/TypeRegistry.js

@@ -89,6 +89,17 @@ export default class TypeRegistry {
   get(typeKey) {
     return this.types[typeKey] || UNKNOWN_TYPE;
   }
+  /**
+   * List all registered types.
+   * @returns {Type[]} all registered types
+   */
+  getAllTypes() {
+    return this.types;
+  }
+  /**
+   * Import legacy types.
+   * @param {TypeDefinition[]} types the types to import
+   */
   importLegacyTypes(types) {
     types
       .filter((t) => this.get(t.key) === UNKNOWN_TYPE)

src/exporters/ImageExporter.js

@@ -25,10 +25,14 @@
  * Originally created by hudsonfoo on 09/02/16
  */
 
-function replaceDotsWithUnderscores(filename) {
-  const regex = /\./gi;
+function sanitizeFilename(filename) {
+  const replacedPeriods = filename.replace(/\./g, '_');
+  const safeFilename = replacedPeriods.replace(/[^a-zA-Z0-9_\-.\s]/g, '');
 
-  return filename.replace(regex, '_');
+  // Handle leading/trailing spaces and periods
+  const trimmedFilename = safeFilename.trim().replace(/^\.+|\.+$/g, '');
+
+  return trimmedFilename;
 }
 
 import { saveAs } from 'file-saver';
@@ -150,7 +154,7 @@ class ImageExporter {
    * @returns {promise}
    */
   async exportJPG(element, filename, className) {
-    const processedFilename = replaceDotsWithUnderscores(filename);
+    const processedFilename = sanitizeFilename(filename);
 
     const img = await this.renderElement(element, {
       imageType: 'jpg',
@@ -167,7 +171,7 @@ class ImageExporter {
    * @returns {promise}
    */
   async exportPNG(element, filename, className) {
-    const processedFilename = replaceDotsWithUnderscores(filename);
+    const processedFilename = sanitizeFilename(filename);
 
     const img = await this.renderElement(element, {
       imageType: 'png',

src/plugins/CouchDBSearchFolder/plugin.js

@@ -24,6 +24,9 @@ export default function (folderName, couchPlugin, searchFilter) {
             location: 'ROOT'
           });
         }
+      },
+      search() {
+        return Promise.resolve([]);
       }
     });
 
@@ -35,9 +38,17 @@ export default function (folderName, couchPlugin, searchFilter) {
         );
       },
       load() {
-        return couchProvider.getObjectsByFilter(searchFilter).then((objects) => {
-          return objects.map((object) => object.identifier);
-        });
+        let searchResults;
+
+        if (searchFilter.viewName !== undefined) {
+          // Use a view to search, instead of an _all_docs find
+          searchResults = couchProvider.getObjectsByView(searchFilter);
+        } else {
+          // Use the _find endpoint to search _all_docs
+          searchResults = couchProvider.getObjectsByFilter(searchFilter);
+        }
+
+        return searchResults;
       }
     });
   };

src/plugins/LADTable/LADTableConfiguration.js

@@ -41,9 +41,10 @@ export default class LADTableConfiguration extends EventEmitter {
   }
 
   getConfiguration() {
-    const configuration = this.domainObject.configuration || {};
-    configuration.hiddenColumns = configuration.hiddenColumns || {};
+    const configuration = this.domainObject.configuration ?? {};
+    configuration.hiddenColumns = configuration.hiddenColumns ?? {};
     configuration.isFixedLayout = configuration.isFixedLayout ?? true;
+    configuration.objectStyles = configuration.objectStyles ?? {};
 
     return configuration;
   }

src/plugins/LADTable/LADTableConfigurationViewProvider.js

@@ -27,7 +27,7 @@ import LadTableConfiguration from './components/LadTableConfiguration.vue';
 export default function LADTableConfigurationViewProvider(openmct) {
   return {
     key: 'lad-table-configuration',
-    name: 'LAD Table Configuration',
+    name: 'Config',
     canView(selection) {
       if (selection.length !== 1 || selection[0].length === 0) {
         return false;
@@ -61,7 +61,7 @@ export default function LADTableConfigurationViewProvider(openmct) {
           _destroy = destroy;
         },
         priority() {
-          return 1;
+          return openmct.editor.isEditing() ? openmct.priority.HIGH : openmct.priority.DEFAULT;
         },
         destroy() {
           if (_destroy) {

src/plugins/LADTable/components/LadTableConfiguration.vue

@@ -22,7 +22,6 @@
 
 <template>
   <div class="c-inspect-properties">
-    <template v-if="isEditing">
     <div class="c-inspect-properties__header">Table Column Visibility</div>
     <ul class="c-inspect-properties__section">
       <li v-for="(title, key) in headers" :key="key" class="c-inspect-properties__row">
@@ -31,19 +30,16 @@
         </div>
         <div class="c-inspect-properties__value">
           <input
+            v-if="isEditing"
             :id="key + 'ColumnControl'"
             type="checkbox"
             :checked="configuration.hiddenColumns[key] !== true"
             @change="toggleColumn(key)"
           />
+          <span v-if="!isEditing && configuration.hiddenColumns[key] !== true">Visible</span>
         </div>
       </li>
     </ul>
-    </template>
-    <template v-else>
-      <div class="c-inspect-properties__header">LAD Table Configuration</div>
-      <div class="c-inspect-properties__row--span-all">Only available in edit mode.</div>
-    </template>
   </div>
 </template>
 
@@ -62,7 +58,8 @@ export default {
       isEditing: this.openmct.editor.isEditing(),
       configuration: ladTableConfiguration.getConfiguration(),
       items: [],
-      ladTableObjects: []
+      ladTableObjects: [],
+      ladTelemetryObjects: {}
     };
   },
   computed: {
@@ -150,11 +147,14 @@ export default {
       this.ladTableObjects.push(ladTable);
 
       const composition = this.openmct.composition.get(ladTable.domainObject);
-
+      composition.on('add', this.addItem);
+      composition.on('remove', this.removeItem);
       composition.load();
 
       this.compositions.push({
-        composition
+        composition,
+        addCallback: this.addItem,
+        removeCallback: this.removeItem
       });
     },
     removeLadTable(identifier) {

src/plugins/LADTable/plugin.js

@@ -39,6 +39,9 @@ export default function plugin() {
       cssClass: 'icon-tabular-lad',
       initialize(domainObject) {
         domainObject.composition = [];
+        domainObject.configuration = {
+          objectStyles: {}
+        };
       }
     });
 

src/plugins/charts/bar/BarGraphView.vue

@@ -257,7 +257,9 @@ export default {
 
       return {
         end,
-        start
+        start,
+        size: 1,
+        strategy: 'latest'
       };
     },
     loadComposition() {
@@ -330,7 +332,11 @@ export default {
         this.domainObject.configuration.axes.xKey === undefined ||
         this.domainObject.configuration.axes.yKey === undefined
       ) {
-        return;
+        const { xKey, yKey } = this.identifyAxesKeys(axisMetadata);
+        this.openmct.objects.mutate(this.domainObject, 'configuration.axes', {
+          xKey,
+          yKey
+        });
       }
 
       let xValues = [];
@@ -429,6 +435,30 @@ export default {
     subscribeToAll() {
       const telemetryObjects = Object.values(this.telemetryObjects);
       telemetryObjects.forEach(this.subscribeToObject);
+    },
+    identifyAxesKeys(metadata) {
+      const { xAxisMetadata, yAxisMetadata } = metadata;
+
+      let xKey;
+      let yKey;
+
+      // If xAxisMetadata contains array values, use the first one for xKey
+      const arrayValues = xAxisMetadata.filter((metaDatum) => metaDatum.isArrayValue);
+      const nonArrayValues = xAxisMetadata.filter((metaDatum) => !metaDatum.isArrayValue);
+
+      if (arrayValues.length > 0) {
+        xKey = arrayValues[0].key;
+        yKey = arrayValues.length > 1 ? arrayValues[1].key : yAxisMetadata.key;
+      } else if (nonArrayValues.length > 0) {
+        xKey = nonArrayValues[0].key;
+        yKey = 'none';
+      } else {
+        // Fallback if no valid xKey or yKey is found
+        xKey = 'none';
+        yKey = 'none';
+      }
+
+      return { xKey, yKey };
     }
   }
 };

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

@@ -41,7 +41,7 @@ export default function BarGraphInspectorViewProvider(openmct) {
           _destroy = destroy;
         },
         priority: function () {
-          return openmct.priority.HIGH + 1;
+          return openmct.editor.isEditing() ? openmct.priority.HIGH : openmct.priority.DEFAULT;
         },
         destroy: function () {
           if (_destroy) {

src/plugins/charts/scatter/inspector/ScatterPlotInspectorViewProvider.js

@@ -40,7 +40,7 @@ export default function ScatterPlotInspectorViewProvider(openmct) {
           _destroy = destroy;
         },
         priority: function () {
-          return openmct.priority.HIGH + 1;
+          return openmct.editor.isEditing() ? openmct.priority.HIGH : openmct.priority.DEFAULT;
         },
         destroy: function () {
           if (_destroy) {