Initial pass at refactoring composition. Completely broken

README.md

@@ -1,4 +1,4 @@
-# Open MCT [![license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](http://www.apache.org/licenses/LICENSE-2.0) [![codecov](https://codecov.io/gh/nasa/openmct/branch/master/graph/badge.svg?token=7DQIipp3ej)](https://codecov.io/gh/nasa/openmct) [![This project is using Percy.io for visual regression testing.](https://percy.io/static/images/percy-badge.svg)](https://percy.io/b2e34b17/openmct) [![npm version](https://img.shields.io/npm/v/openmct.svg)](https://www.npmjs.com/package/openmct) 
+# Open MCT [![license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](http://www.apache.org/licenses/LICENSE-2.0) [![Language grade: JavaScript](https://img.shields.io/lgtm/grade/javascript/g/nasa/openmct.svg?logo=lgtm&logoWidth=18)](https://lgtm.com/projects/g/nasa/openmct/context:javascript) [![codecov](https://codecov.io/gh/nasa/openmct/branch/master/graph/badge.svg?token=7DQIipp3ej)](https://codecov.io/gh/nasa/openmct) [![This project is using Percy.io for visual regression testing.](https://percy.io/static/images/percy-badge.svg)](https://percy.io/b2e34b17/openmct) [![npm version](https://img.shields.io/npm/v/openmct.svg)](https://www.npmjs.com/package/openmct) 
 
 Open MCT (Open Mission Control Technologies) is a next-generation mission control framework for visualization of data on desktop and mobile devices. It is developed at NASA's Ames Research Center, and is being used by NASA for data analysis of spacecraft missions, as well as planning and operation of experimental rover systems. As a generalizable and open source framework, Open MCT could be used as the basis for building applications for planning, operation, and analysis of any systems producing telemetry data.
 
@@ -98,7 +98,7 @@ To run the performance tests:
 The test suite is configured to all tests localed in `e2e/tests/` ending in `*.e2e.spec.js`. For more about the e2e test suite, please see the [README](./e2e/README.md)
 
 ### Security Tests
-Each commit is analyzed for known security vulnerabilities using [CodeQL](https://codeql.github.com/docs/codeql-language-guides/codeql-library-for-javascript/). The list of CWE coverage items is avaiable in the [CodeQL docs](https://codeql.github.com/codeql-query-help/javascript-cwe/). The CodeQL workflow is specified in the [CodeQL analysis file](./.github/workflows/codeql-analysis.yml) and the custom [CodeQL config](./.github/codeql/codeql-config.yml).
+Each commit is analyzed for known security vulnerabilities using [CodeQL](https://codeql.github.com/docs/codeql-language-guides/codeql-library-for-javascript/) and our overall security report is available on [LGTM](https://lgtm.com/projects/g/nasa/openmct/). The list of CWE coverage items is avaiable in the [CodeQL docs](https://codeql.github.com/codeql-query-help/javascript-cwe/). The CodeQL workflow is specified in the [CodeQL analysis file](./.github/workflows/codeql-analysis.yml) and the custom [CodeQL config](./.github/codeql/codeql-config.yml).
 
 ### Test Reporting and Code Coverage
 

e2e/README.md

@@ -89,37 +89,17 @@ Read more about [Playwright Snapshots](https://playwright.dev/docs/test-snapshot
 #### Open MCT's implementation
 
 - Our Snapshot tests receive a `@snapshot` tag.
-- Snapshots need to be executed within the official Playwright container to ensure we're using the exact rendering platform in CI and locally. To do a valid comparison locally:
+- Snapshots need to be executed within the official Playwright container to ensure we're using the exact rendering platform in CI and locally.
 
 ```sh
-// Replace {X.X.X} with the current Playwright version 
-// from our package.json or circleCI configuration file
-docker run --rm --network host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v{X.X.X}-focal /bin/bash
+docker run --rm --network host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:[GET THIS VERSION FROM OUR CIRCLECI CONFIG FILE]-focal /bin/bash
 npm install
 npx playwright test --config=e2e/playwright-ci.config.js --project=chrome --grep @snapshot
 ```
 
-### Updating Snapshots
+### (WIP) Updating Snapshots
 
-When the `@snapshot` tests fail, they will need to be evaluated to determine if the failure is an acceptable and desireable or an unintended regression.
-
-To compare a snapshot, run a test and open the html report with the 'Expected' vs 'Actual' screenshot. If the actual screenshot is preferred, then the source-controlled 'Expected' snapshots will need to be updated with the following scripts.
-
-MacOS
-
-```
-npm run test:e2e:updatesnapshots
-```
-
-Linux/CI
-
-```sh
-// Replace {X.X.X} with the current Playwright version 
-// from our package.json or circleCI configuration file
-docker run --rm --network host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v{X.X.X}-focal /bin/bash
-npm install
-npm run test:e2e:updatesnapshots
-```
+When the `@snapshot` tests fail, they will need to be evaluated to see if the failure is an acceptable change or
 
 ## Performance Testing
 

e2e/appActions.js

@@ -144,9 +144,7 @@ async function createNotification(page, createNotificationOptions) {
  * @param {string} name
  */
 async function expandTreePaneItemByName(page, name) {
-    const treePane = page.getByRole('tree', {
-        name: 'Main Tree'
-    });
+    const treePane = page.locator('#tree-pane');
     const treeItem = treePane.locator(`role=treeitem[expanded=false][name=/${name}/]`);
     const expandTriangle = treeItem.locator('.c-disclosure-triangle');
     await expandTriangle.click();
@@ -220,30 +218,6 @@ async function openObjectTreeContextMenu(page, url) {
     });
 }
 
-/**
- * Expands the entire object tree (every expandable tree item).
- * @param {import('@playwright/test').Page} page
- * @param {"Main Tree" | "Create Modal Tree"} [treeName="Main Tree"]
- */
-async function expandEntireTree(page, treeName = "Main Tree") {
-    const treeLocator = page.getByRole('tree', {
-        name: treeName
-    });
-    const collapsedTreeItems = treeLocator.getByRole('treeitem', {
-        expanded: false
-    }).locator('span.c-disclosure-triangle.is-enabled');
-
-    while (await collapsedTreeItems.count() > 0) {
-        await collapsedTreeItems.nth(0).click();
-
-        // FIXME: Replace hard wait with something event-driven.
-        // Without the wait, this fails periodically due to a race condition
-        // with Vue rendering (loop exits prematurely).
-        // eslint-disable-next-line playwright/no-wait-for-timeout
-        await page.waitForTimeout(200);
-    }
-}
-
 /**
  * Gets the UUID of the currently focused object by parsing the current URL
  * and returning the last UUID in the path.
@@ -388,7 +362,6 @@ module.exports = {
     createDomainObjectWithDefaults,
     createNotification,
     expandTreePaneItemByName,
-    expandEntireTree,
     createPlanFromJSON,
     openObjectTreeContextMenu,
     getHashUrlToDomainObject,

e2e/helper/addInitNotebookWithUrls.js

@@ -1,32 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2022, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-// This should be used to install the re-instal default Notebook plugin with a simple url whitelist.
-// e.g.
-// await page.addInitScript({ path: path.join(__dirname, 'addInitNotebookWithUrls.js') });
-const NOTEBOOK_NAME = 'Notebook';
-const URL_WHITELIST = ['google.com'];
-
-document.addEventListener('DOMContentLoaded', () => {
-    const openmct = window.openmct;
-    openmct.install(openmct.plugins.Notebook(NOTEBOOK_NAME, URL_WHITELIST));
-});

e2e/playwright-ci.config.js

@@ -73,7 +73,7 @@ const config = {
             open: 'never',
             outputFolder: '../html-test-results' //Must be in different location due to https://github.com/microsoft/playwright/issues/12840
         }],
-        ['junit', { outputFile: '../test-results/results.xml' }],
+        ['junit', { outputFile: 'test-results/results.xml' }],
         ['github']
     ]
 };

e2e/playwright-performance.config.js

@@ -35,8 +35,8 @@ const config = {
     ],
     reporter: [
         ['list'],
-        ['junit', { outputFile: '../test-results/results.xml' }],
-        ['json', { outputFile: '../test-results/results.json' }]
+        ['junit', { outputFile: 'test-results/results.xml' }],
+        ['json', { outputFile: 'test-results/results.json' }]
     ]
 };
 

e2e/playwright-visual.config.js

@@ -40,7 +40,7 @@ const config = {
     ],
     reporter: [
         ['list'],
-        ['junit', { outputFile: '../test-results/results.xml' }],
+        ['junit', { outputFile: 'test-results/results.xml' }],
         ['html', {
             open: 'on-failure',
             outputFolder: '../html-test-results' //Must be in different location due to https://github.com/microsoft/playwright/issues/12840

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

@@ -21,7 +21,7 @@
  *****************************************************************************/
 
 const { test, expect } = require('../../pluginFixtures.js');
-const { createDomainObjectWithDefaults, createNotification, expandEntireTree } = require('../../appActions.js');
+const { createDomainObjectWithDefaults, createNotification } = require('../../appActions.js');
 
 test.describe('AppActions', () => {
     test('createDomainObjectsWithDefaults', async ({ page }) => {
@@ -109,57 +109,4 @@ test.describe('AppActions', () => {
         await expect(page.locator('.c-message-banner')).toHaveClass(/error/);
         await page.locator('[aria-label="Dismiss"]').click();
     });
-    test('expandEntireTree', async ({ page }) => {
-        await page.goto('./', { waitUntil: 'networkidle' });
-
-        const rootFolder = await createDomainObjectWithDefaults(page, {
-            type: 'Folder'
-        });
-        const folder1 = await createDomainObjectWithDefaults(page, {
-            type: 'Folder',
-            parent: rootFolder.uuid
-        });
-
-        await createDomainObjectWithDefaults(page, {
-            type: 'Clock',
-            parent: folder1.uuid
-        });
-        const folder2 = await createDomainObjectWithDefaults(page, {
-            type: 'Folder',
-            parent: folder1.uuid
-        });
-        await createDomainObjectWithDefaults(page, {
-            type: 'Folder',
-            parent: folder1.uuid
-        });
-        await createDomainObjectWithDefaults(page, {
-            type: 'Display Layout',
-            parent: folder2.uuid
-        });
-        await createDomainObjectWithDefaults(page, {
-            type: 'Folder',
-            parent: folder2.uuid
-        });
-
-        await page.goto('./#/browse/mine');
-        await expandEntireTree(page);
-        const treePane = page.getByRole('tree', {
-            name: "Main Tree"
-        });
-        const treePaneCollapsedItems = treePane.getByRole('treeitem', { expanded: false });
-        expect(await treePaneCollapsedItems.count()).toBe(0);
-
-        await page.goto('./#/browse/mine');
-        //Click the Create button
-        await page.click('button:has-text("Create")');
-
-        // Click the object specified by 'type'
-        await page.click(`li[role='menuitem']:text("Clock")`);
-        await expandEntireTree(page, "Create Modal Tree");
-        const locatorTree = page.getByRole("tree", {
-            name: "Create Modal Tree"
-        });
-        const locatorTreeCollapsedItems = locatorTree.locator('role=treeitem[expanded=false]');
-        expect(await locatorTreeCollapsedItems.count()).toBe(0);
-    });
 });

e2e/tests/functional/moveAndLinkObjects.e2e.spec.js

@@ -52,9 +52,7 @@ test.describe('Move & link item tests', () => {
         // Attempt to move parent to its own grandparent
         await page.locator('button[title="Show selected item in tree"]').click();
 
-        const treePane = page.getByRole('tree', {
-            name: 'Main Tree'
-        });
+        const treePane = page.locator('#tree-pane');
         await treePane.getByRole('treeitem', {
             name: 'Parent Folder'
         }).click({
@@ -65,30 +63,28 @@ test.describe('Move & link item tests', () => {
             name: /Move/
         }).click();
 
-        const createModalTree = page.getByRole('tree', {
-            name: "Create Modal Tree"
-        });
-        const myItemsLocatorTreeItem = createModalTree.getByRole('treeitem', {
+        const locatorTree = page.locator('#locator-tree');
+        const myItemsLocatorTreeItem = locatorTree.getByRole('treeitem', {
             name: myItemsFolderName
         });
         await myItemsLocatorTreeItem.locator('.c-disclosure-triangle').click();
         await myItemsLocatorTreeItem.click();
 
-        const parentFolderLocatorTreeItem = createModalTree.getByRole('treeitem', {
+        const parentFolderLocatorTreeItem = locatorTree.getByRole('treeitem', {
             name: parentFolder.name
         });
         await parentFolderLocatorTreeItem.locator('.c-disclosure-triangle').click();
         await parentFolderLocatorTreeItem.click();
         await expect(page.locator('[aria-label="Save"]')).toBeDisabled();
 
-        const childFolderLocatorTreeItem = createModalTree.getByRole('treeitem', {
+        const childFolderLocatorTreeItem = locatorTree.getByRole('treeitem', {
             name: new RegExp(childFolder.name)
         });
         await childFolderLocatorTreeItem.locator('.c-disclosure-triangle').click();
         await childFolderLocatorTreeItem.click();
         await expect(page.locator('[aria-label="Save"]')).toBeDisabled();
 
-        const grandchildFolderLocatorTreeItem = createModalTree.getByRole('treeitem', {
+        const grandchildFolderLocatorTreeItem = locatorTree.getByRole('treeitem', {
             name: grandchildFolder.name
         });
         await grandchildFolderLocatorTreeItem.locator('.c-disclosure-triangle').click();
@@ -199,9 +195,7 @@ test.describe('Move & link item tests', () => {
         // Attempt to move parent to its own grandparent
         await page.locator('button[title="Show selected item in tree"]').click();
 
-        const treePane = page.getByRole('tree', {
-            name: 'Main Tree'
-        });
+        const treePane = page.locator('#tree-pane');
         await treePane.getByRole('treeitem', {
             name: 'Parent Folder'
         }).click({
@@ -212,30 +206,28 @@ test.describe('Move & link item tests', () => {
             name: /Move/
         }).click();
 
-        const createModalTree = page.getByRole('tree', {
-            name: "Create Modal Tree"
-        });
-        const myItemsLocatorTreeItem = createModalTree.getByRole('treeitem', {
+        const locatorTree = page.locator('#locator-tree');
+        const myItemsLocatorTreeItem = locatorTree.getByRole('treeitem', {
             name: myItemsFolderName
         });
         await myItemsLocatorTreeItem.locator('.c-disclosure-triangle').click();
         await myItemsLocatorTreeItem.click();
 
-        const parentFolderLocatorTreeItem = createModalTree.getByRole('treeitem', {
+        const parentFolderLocatorTreeItem = locatorTree.getByRole('treeitem', {
             name: parentFolder.name
         });
         await parentFolderLocatorTreeItem.locator('.c-disclosure-triangle').click();
         await parentFolderLocatorTreeItem.click();
         await expect(page.locator('[aria-label="Save"]')).toBeDisabled();
 
-        const childFolderLocatorTreeItem = createModalTree.getByRole('treeitem', {
+        const childFolderLocatorTreeItem = locatorTree.getByRole('treeitem', {
             name: new RegExp(childFolder.name)
         });
         await childFolderLocatorTreeItem.locator('.c-disclosure-triangle').click();
         await childFolderLocatorTreeItem.click();
         await expect(page.locator('[aria-label="Save"]')).toBeDisabled();
 
-        const grandchildFolderLocatorTreeItem = createModalTree.getByRole('treeitem', {
+        const grandchildFolderLocatorTreeItem = locatorTree.getByRole('treeitem', {
             name: grandchildFolder.name
         });
         await grandchildFolderLocatorTreeItem.locator('.c-disclosure-triangle').click();

e2e/tests/functional/notification.e2e.spec.js

@@ -24,51 +24,18 @@
 This test suite is dedicated to tests which verify Open MCT's Notification functionality
 */
 
-const { createDomainObjectWithDefaults, createNotification } = require('../../appActions');
+// FIXME: Remove this eslint exception once tests are implemented
+// eslint-disable-next-line no-unused-vars
+const { createDomainObjectWithDefaults } = require('../../appActions');
 const { test, expect } = require('../../pluginFixtures');
 
 test.describe('Notifications List', () => {
-    test('Notifications can be dismissed individually', async ({ page }) => {
-        test.info().annotations.push({
-            type: 'issue',
-            description: 'https://github.com/nasa/openmct/issues/6122'
-        });
-
-        // Go to baseURL
-        await page.goto('./', { waitUntil: 'networkidle' });
-
-        // Create an error notification with the message "Error message"
-        await createNotification(page, {
-            severity: 'error',
-            message: 'Error message'
-        });
-
-        // Create an alert notification with the message "Alert message"
-        await createNotification(page, {
-            severity: 'alert',
-            message: 'Alert message'
-        });
-
-        // Verify that there is a button with aria-label "Review 2 Notifications"
-        expect(await page.locator('button[aria-label="Review 2 Notifications"]').count()).toBe(1);
-
-        // Click on button with aria-label "Review 2 Notifications"
-        await page.click('button[aria-label="Review 2 Notifications"]');
-
-        // Click on button with aria-label="Dismiss notification of Error message"
-        await page.click('button[aria-label="Dismiss notification of Error message"]');
-
-        // Verify there is no a notification (listitem) with the text "Error message" since it was dismissed
-        expect(await page.locator('div[role="dialog"] div[role="listitem"]').innerText()).not.toContain('Error message');
-
-        // Verify there is still a notification (listitem) with the text "Alert message"
-        expect(await page.locator('div[role="dialog"] div[role="listitem"]').innerText()).toContain('Alert message');
-
-        // Click on button with aria-label="Dismiss notification of Alert message"
-        await page.click('button[aria-label="Dismiss notification of Alert message"]');
-
-        // Verify that there is no dialog since the notification overlay was closed automatically after all notifications were dismissed
-        expect(await page.locator('div[role="dialog"]').count()).toBe(0);
+    test.fixme('Notifications can be dismissed individually', async ({ page }) => {
+        // Create some persistent notifications
+        // Verify that they are present in the notifications list
+        // Dismiss one of the notifications
+        // Verify that it is no longer present in the notifications list
+        // Verify that the other notifications are still present in the notifications list
     });
 });
 

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

@@ -47,9 +47,7 @@ test.describe('Display Layout', () => {
         // Expand the 'My Items' folder in the left tree
         await page.locator('.c-tree__item__view-control.c-disclosure-triangle').click();
         // Add the Sine Wave Generator to the Display Layout and save changes
-        const treePane = page.getByRole('tree', {
-            name: 'Main Tree'
-        });
+        const treePane = page.locator('#tree-pane');
         const sineWaveGeneratorTreeItem = treePane.getByRole('treeitem', {
             name: new RegExp(sineWaveObject.name)
         });
@@ -81,9 +79,7 @@ test.describe('Display Layout', () => {
         // Expand the 'My Items' folder in the left tree
         await page.locator('.c-tree__item__view-control.c-disclosure-triangle').click();
         // Add the Sine Wave Generator to the Display Layout and save changes
-        const treePane = page.getByRole('tree', {
-            name: 'Main Tree'
-        });
+        const treePane = page.locator('#tree-pane');
         const sineWaveGeneratorTreeItem = treePane.getByRole('treeitem', {
             name: new RegExp(sineWaveObject.name)
         });
@@ -119,9 +115,7 @@ test.describe('Display Layout', () => {
         // Expand the 'My Items' folder in the left tree
         await page.locator('.c-tree__item__view-control.c-disclosure-triangle').click();
         // Add the Sine Wave Generator to the Display Layout and save changes
-        const treePane = page.getByRole('tree', {
-            name: 'Main Tree'
-        });
+        const treePane = page.locator('#tree-pane');
         const sineWaveGeneratorTreeItem = treePane.getByRole('treeitem', {
             name: new RegExp(sineWaveObject.name)
         });
@@ -159,9 +153,7 @@ test.describe('Display Layout', () => {
         // Expand the 'My Items' folder in the left tree
         await page.locator('.c-tree__item__view-control.c-disclosure-triangle').click();
         // Add the Sine Wave Generator to the Display Layout and save changes
-        const treePane = page.getByRole('tree', {
-            name: 'Main Tree'
-        });
+        const treePane = page.locator('#tree-pane');
         const sineWaveGeneratorTreeItem = treePane.getByRole('treeitem', {
             name: new RegExp(sineWaveObject.name)
         });

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

@@ -40,9 +40,7 @@ test.describe('Flexible Layout', () => {
         });
     });
     test('panes have the appropriate draggable attribute while in Edit and Browse modes', async ({ page }) => {
-        const treePane = page.getByRole('tree', {
-            name: 'Main Tree'
-        });
+        const treePane = page.locator('#tree-pane');
         const sineWaveGeneratorTreeItem = treePane.getByRole('treeitem', {
             name: new RegExp(sineWaveObject.name)
         });
@@ -72,9 +70,7 @@ test.describe('Flexible Layout', () => {
         await expect(dragWrapper).toHaveAttribute('draggable', 'false');
     });
     test('items in a flexible layout can be removed with object tree context menu when viewing the flexible layout', async ({ page }) => {
-        const treePane = page.getByRole('tree', {
-            name: 'Main Tree'
-        });
+        const treePane = page.locator('#tree-pane');
         const sineWaveGeneratorTreeItem = treePane.getByRole('treeitem', {
             name: new RegExp(sineWaveObject.name)
         });
@@ -110,9 +106,7 @@ test.describe('Flexible Layout', () => {
             type: 'issue',
             description: 'https://github.com/nasa/openmct/issues/3117'
         });
-        const treePane = page.getByRole('tree', {
-            name: 'Main Tree'
-        });
+        const treePane = page.locator('#tree-pane');
         const sineWaveGeneratorTreeItem = treePane.getByRole('treeitem', {
             name: new RegExp(sineWaveObject.name)
         });

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

@@ -25,11 +25,8 @@ This test suite is dedicated to tests which verify the basic operations surround
 */
 
 const { test, expect } = require('../../../../pluginFixtures');
-const { createDomainObjectWithDefaults } = require('../../../../appActions');
+const { expandTreePaneItemByName, createDomainObjectWithDefaults } = require('../../../../appActions');
 const nbUtils = require('../../../../helper/notebookUtils');
-const path = require('path');
-
-const NOTEBOOK_NAME = 'Notebook';
 
 test.describe('Notebook CRUD Operations', () => {
     test.fixme('Can create a Notebook Object', async ({ page }) => {
@@ -76,7 +73,8 @@ test.describe('Notebook section tests', () => {
 
         // Create Notebook
         await createDomainObjectWithDefaults(page, {
-            type: NOTEBOOK_NAME
+            type: 'Notebook',
+            name: "Test Notebook"
         });
     });
     test('Default and new sections are automatically named Unnamed Section with Unnamed Page', async ({ page }) => {
@@ -137,7 +135,8 @@ test.describe('Notebook page tests', () => {
 
         // Create Notebook
         await createDomainObjectWithDefaults(page, {
-            type: NOTEBOOK_NAME
+            type: 'Notebook',
+            name: "Test Notebook"
         });
     });
     //Test will need to be implemented after a refactor in #5713
@@ -208,30 +207,24 @@ test.describe('Notebook search tests', () => {
 });
 
 test.describe('Notebook entry tests', () => {
-    // Create Notebook with URL Whitelist
-    let notebookObject;
-    test.beforeEach(async ({ page }) => {
-        // eslint-disable-next-line no-undef
-        await page.addInitScript({ path: path.join(__dirname, '../../../../helper/', 'addInitNotebookWithUrls.js') });
-        await page.goto('./', { waitUntil: 'networkidle' });
-
-        notebookObject = await createDomainObjectWithDefaults(page, {
-            type: NOTEBOOK_NAME
-        });
-    });
     test.fixme('When a new entry is created, it should be focused', async ({ page }) => {});
     test('When an object is dropped into a notebook, a new entry is created and it should be focused @unstable', async ({ page }) => {
+        await page.goto('./#/browse/mine', { waitUntil: 'networkidle' });
+
+        // Create Notebook
+        const notebook = await createDomainObjectWithDefaults(page, {
+            type: 'Notebook',
+            name: "Embed Test Notebook"
+        });
         // Create Overlay Plot
         await createDomainObjectWithDefaults(page, {
-            type: 'Overlay Plot'
+            type: 'Overlay Plot',
+            name: "Dropped Overlay Plot"
         });
 
-        // Navigate to the notebook object
-        await page.goto(notebookObject.url);
-
-        // Reveal the notebook in the tree
-        await page.getByTitle('Show selected item in tree').click();
+        await expandTreePaneItemByName(page, 'My Items');
 
+        await page.goto(notebook.url);
         await page.dragAndDrop('role=treeitem[name=/Dropped Overlay Plot/]', '.c-notebook__drag-area');
 
         const embed = page.locator('.c-ne__embed__link');
@@ -241,16 +234,22 @@ test.describe('Notebook entry tests', () => {
         expect(embedName).toBe('Dropped Overlay Plot');
     });
     test('When an object is dropped into a notebooks existing entry, it should be focused @unstable', async ({ page }) => {
+        await page.goto('./#/browse/mine', { waitUntil: 'networkidle' });
+
+        // Create Notebook
+        const notebook = await createDomainObjectWithDefaults(page, {
+            type: 'Notebook',
+            name: "Embed Test Notebook"
+        });
         // Create Overlay Plot
         await createDomainObjectWithDefaults(page, {
-            type: 'Overlay Plot'
+            type: 'Overlay Plot',
+            name: "Dropped Overlay Plot"
         });
 
-        // Navigate to the notebook object
-        await page.goto(notebookObject.url);
+        await expandTreePaneItemByName(page, 'My Items');
 
-        // Reveal the notebook in the tree
-        await page.getByTitle('Show selected item in tree').click();
+        await page.goto(notebook.url);
 
         await nbUtils.enterTextEntry(page, 'Entry to drop into');
         await page.dragAndDrop('role=treeitem[name=/Dropped Overlay Plot/]', 'text=Entry to drop into');
@@ -264,14 +263,19 @@ test.describe('Notebook entry tests', () => {
     });
     test.fixme('new entries persist through navigation events without save', async ({ page }) => {});
     test.fixme('previous and new entries can be deleted', async ({ page }) => {});
-    test('when a valid link is entered into a notebook entry, it becomes clickable when viewing', async ({ page }) => {
+    test.fixme('when a valid link is entered into a notebook entry, it becomes clickable when viewing', async ({ page }) => {
         const TEST_LINK = 'http://www.google.com';
+        await page.goto('./#/browse/mine', { waitUntil: 'networkidle' });
 
-        // Navigate to the notebook object
-        await page.goto(notebookObject.url);
+        // Create Notebook
+        const notebook = await createDomainObjectWithDefaults(page, {
+            type: 'Notebook',
+            name: "Entry Link Test"
+        });
 
-        // Reveal the notebook in the tree
-        await page.getByTitle('Show selected item in tree').click();
+        await expandTreePaneItemByName(page, 'My Items');
+
+        await page.goto(notebook.url);
 
         await nbUtils.enterTextEntry(page, `This should be a link: ${TEST_LINK} is it?`);
 
@@ -289,14 +293,19 @@ test.describe('Notebook entry tests', () => {
 
         expect(await validLink.count()).toBe(1);
     });
-    test('when an invalid link is entered into a notebook entry, it does not become clickable when viewing', async ({ page }) => {
+    test.fixme('when an invalid link is entered into a notebook entry, it does not become clickable when viewing', async ({ page }) => {
         const TEST_LINK = 'www.google.com';
+        await page.goto('./#/browse/mine', { waitUntil: 'networkidle' });
 
-        // Navigate to the notebook object
-        await page.goto(notebookObject.url);
+        // Create Notebook
+        const notebook = await createDomainObjectWithDefaults(page, {
+            type: 'Notebook',
+            name: "Entry Link Test"
+        });
 
-        // Reveal the notebook in the tree
-        await page.getByTitle('Show selected item in tree').click();
+        await expandTreePaneItemByName(page, 'My Items');
+
+        await page.goto(notebook.url);
 
         await nbUtils.enterTextEntry(page, `This should NOT be a link: ${TEST_LINK} is it?`);
 
@@ -304,70 +313,20 @@ test.describe('Notebook entry tests', () => {
 
         expect(await invalidLink.count()).toBe(0);
     });
-    test('when a link is entered, but it is not in the whitelisted urls, it does not become clickable when viewing', async ({ page }) => {
-        const TEST_LINK = 'http://www.bing.com';
-
-        // Navigate to the notebook object
-        await page.goto(notebookObject.url);
-
-        // Reveal the notebook in the tree
-        await page.getByTitle('Show selected item in tree').click();
-
-        await nbUtils.enterTextEntry(page, `This should NOT be a link: ${TEST_LINK} is it?`);
-
-        const invalidLink = page.locator(`a[href="${TEST_LINK}"]`);
-
-        expect(await invalidLink.count()).toBe(0);
-    });
-    test('when a valid link with a subdomain and a valid domain in the whitelisted urls is entered into a notebook entry, it becomes clickable when viewing', async ({ page }) => {
-        const INVALID_TEST_LINK = 'http://bing.google.com';
-
-        // Navigate to the notebook object
-        await page.goto(notebookObject.url);
-
-        // Reveal the notebook in the tree
-        await page.getByTitle('Show selected item in tree').click();
-
-        await nbUtils.enterTextEntry(page, `This should be a link: ${INVALID_TEST_LINK} is it?`);
-
-        const validLink = page.locator(`a[href="${INVALID_TEST_LINK}"]`);
-
-        expect(await validLink.count()).toBe(1);
-    });
-    test('when a valid secure link is entered into a notebook entry, it becomes clickable when viewing', async ({ page }) => {
-        const TEST_LINK = 'https://www.google.com';
-
-        // Navigate to the notebook object
-        await page.goto(notebookObject.url);
-
-        // Reveal the notebook in the tree
-        await page.getByTitle('Show selected item in tree').click();
-
-        await nbUtils.enterTextEntry(page, `This should be a link: ${TEST_LINK} is it?`);
-
-        const validLink = page.locator(`a[href="${TEST_LINK}"]`);
-
-        // Start waiting for popup before clicking. Note no await.
-        const popupPromise = page.waitForEvent('popup');
-
-        await validLink.click();
-        const popup = await popupPromise;
-
-        // Wait for the popup to load.
-        await popup.waitForLoadState();
-        expect.soft(popup.url()).toContain('www.google.com');
-
-        expect(await validLink.count()).toBe(1);
-    });
-    test('when a nefarious link is entered into a notebook entry, it is sanitized when viewing', async ({ page }) => {
+    test.fixme('when a nefarious link is entered into a notebook entry, it is sanitized when viewing', async ({ page }) => {
         const TEST_LINK = 'http://www.google.com?bad=';
         const TEST_LINK_BAD = `http://www.google.com?bad=<script>alert('gimme your cookies')</script>`;
+        await page.goto('./#/browse/mine', { waitUntil: 'networkidle' });
 
-        // Navigate to the notebook object
-        await page.goto(notebookObject.url);
+        // Create Notebook
+        const notebook = await createDomainObjectWithDefaults(page, {
+            type: 'Notebook',
+            name: "Entry Link Test"
+        });
 
-        // Reveal the notebook in the tree
-        await page.getByTitle('Show selected item in tree').click();
+        await expandTreePaneItemByName(page, 'My Items');
+
+        await page.goto(notebook.url);
 
         await nbUtils.enterTextEntry(page, `This should be a link, BUT not a bad link: ${TEST_LINK_BAD} is it?`);
 

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

@@ -41,7 +41,6 @@ test.describe('Notebook Tests with CouchDB @couchdb', () => {
     });
 
     test('Inspect Notebook Entry Network Requests', async ({ page }) => {
-        await page.getByText('Annotations').click();
         // Expand sidebar
         await page.locator('.c-notebook__toggle-nav-button').click();
 
@@ -163,20 +162,20 @@ test.describe('Notebook Tests with CouchDB @couchdb', () => {
         await page.locator('[aria-label="Notebook Entry Input"] >> nth=2').press('Enter');
 
         // Add three tags
-        await page.hover(`button:has-text("Add Tag")`);
-        await page.locator(`button:has-text("Add Tag")`).click();
+        await page.hover(`button:has-text("Add Tag") >> nth=2`);
+        await page.locator(`button:has-text("Add Tag") >> nth=2`).click();
         await page.locator('[placeholder="Type to select tag"]').click();
         await page.locator('[aria-label="Autocomplete Options"] >> text=Science').click();
         await page.waitForSelector('[aria-label="Tag"]:has-text("Science")');
 
-        await page.hover(`button:has-text("Add Tag")`);
-        await page.locator(`button:has-text("Add Tag")`).click();
+        await page.hover(`button:has-text("Add Tag") >> nth=2`);
+        await page.locator(`button:has-text("Add Tag") >> nth=2`).click();
         await page.locator('[placeholder="Type to select tag"]').click();
         await page.locator('[aria-label="Autocomplete Options"] >> text=Drilling').click();
         await page.waitForSelector('[aria-label="Tag"]:has-text("Drilling")');
 
-        await page.hover(`button:has-text("Add Tag")`);
-        await page.locator(`button:has-text("Add Tag")`).click();
+        await page.hover(`button:has-text("Add Tag") >> nth=2`);
+        await page.locator(`button:has-text("Add Tag") >> nth=2`).click();
         await page.locator('[placeholder="Type to select tag"]').click();
         await page.locator('[aria-label="Autocomplete Options"] >> text=Driving').click();
         await page.waitForSelector('[aria-label="Tag"]:has-text("Driving")');
@@ -232,7 +231,6 @@ test.describe('Notebook Tests with CouchDB @couchdb', () => {
             type: 'issue',
             description: 'https://github.com/akhenry/openmct-yamcs/issues/69'
         });
-        await page.getByText('Annotations').click();
         await page.locator('text=To start a new entry, click here or drag and drop any object').click();
         await page.locator('[aria-label="Notebook Entry Input"]').click();
         await page.locator('[aria-label="Notebook Entry Input"]').fill(`First Entry`);

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

@@ -111,7 +111,7 @@ test.describe('Tagging in Notebooks @addInit', () => {
         await expect(page.locator('[aria-label="Autocomplete Options"]')).not.toContainText("Driving");
         await expect(page.locator('[aria-label="Autocomplete Options"]')).toContainText("Drilling");
     });
-    test('Can search for tags and preview works properly', async ({ page }) => {
+    test('Can search for tags', async ({ page }) => {
         await createNotebookEntryAndTags(page);
         await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').click();
         await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').fill('sc');
@@ -126,19 +126,6 @@ test.describe('Tagging in Notebooks @addInit', () => {
         await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').click();
         await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').fill('Xq');
         await expect(page.locator('text=No results found')).toBeVisible();
-
-        await createDomainObjectWithDefaults(page, {
-            type: 'Display Layout'
-        });
-
-        // Go back into edit mode for the display layout
-        await page.locator('button[title="Edit"]').click();
-
-        await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').click();
-        await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').fill('Sc');
-        await expect(page.locator('[aria-label="Search Result"]')).toContainText("Science");
-        await page.getByText('Entry 0').click();
-        await expect(page.locator('.js-preview-window')).toBeVisible();
     });
 
     test('Can delete tags', async ({ page }) => {
@@ -211,9 +198,7 @@ test.describe('Tagging in Notebooks @addInit', () => {
             page.click('.c-disclosure-triangle')
         ]);
 
-        const treePane = page.getByRole('tree', {
-            name: 'Main Tree'
-        });
+        const treePane = page.locator('#tree-pane');
         // Click Clock
         await treePane.getByRole('treeitem', {
             name: clock.name
@@ -244,25 +229,4 @@ test.describe('Tagging in Notebooks @addInit', () => {
             await expect(page.locator(entryLocator)).toContainText("Driving");
         }
     });
-    test('Can cancel adding a tag', async ({ page }) => {
-        await createNotebookAndEntry(page);
-
-        // Click on Annotations tab
-        await page.locator('.c-inspector__tab', { hasText: "Annotations" }).click();
-
-        // Click on the "Add Tag" button
-        await page.locator('button:has-text("Add Tag")').click();
-
-        // Click inside the AutoComplete field
-        await page.locator('[placeholder="Type to select tag"]').click();
-
-        // Click on the "Tags" header (simulating a click outside the autocomplete)
-        await page.locator('div.c-inspect-properties__header:has-text("Tags")').click();
-
-        // Verify there is a button with text "Add Tag"
-        await expect(page.locator('button:has-text("Add Tag")')).toBeVisible();
-
-        // Verify the AutoComplete field is hidden
-        await expect(page.locator('[placeholder="Type to select tag"]')).toBeHidden();
-    });
 });

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

@@ -32,7 +32,7 @@ test.use({
     }
 });
 
-test.describe('Autoscale', () => {
+test.fixme('ExportAsJSON', () => {
     test('User can set autoscale with a valid range @snapshot', async ({ page, openmctConfig }) => {
         const { myItemsFolderName } = openmctConfig;
 
@@ -47,32 +47,16 @@ test.describe('Autoscale', () => {
 
         await testYTicks(page, ['-1.00', '-0.50', '0.00', '0.50', '1.00']);
 
-        // enter edit mode
-        await page.click('button[title="Edit"]');
-
         await turnOffAutoscale(page);
 
-        await setUserDefinedMinAndMax(page, '-2', '2');
-
-        // save
-        await page.click('button[title="Save"]');
-        await Promise.all([
-            page.locator('li[title = "Save and Finish Editing"]').click(),
-            //Wait for Save Banner to appear
-            page.waitForSelector('.c-message-banner__message')
-        ]);
-        //Wait until Save Banner is gone
-        await page.locator('.c-message-banner__close-button').click();
-        await page.waitForSelector('.c-message-banner__message', { state: 'detached'});
-
-        // Make sure that after turning off autoscale, the user entered range values are reflexted in the ticks.
-        await testYTicks(page, ['-2.00', '-1.50', '-1.00', '-0.50', '0.00', '0.50', '1.00', '1.50', '2.00']);
+        // Make sure that after turning off autoscale, the user selected range values start at the same values the plot had prior.
+        await testYTicks(page, ['-1.00', '-0.50', '0.00', '0.50', '1.00']);
 
         const canvas = page.locator('canvas').nth(1);
 
         await canvas.hover({trial: true});
 
-        expect.soft(await canvas.screenshot()).toMatchSnapshot('autoscale-canvas-prepan.png', { animations: 'disabled' });
+        expect(await canvas.screenshot()).toMatchSnapshot('autoscale-canvas-prepan.png', { animations: 'disabled' });
 
         //Alt Drag Start
         await page.keyboard.down('Alt');
@@ -92,12 +76,11 @@ test.describe('Autoscale', () => {
         await page.keyboard.up('Alt');
 
         // Ensure the drag worked.
-        await testYTicks(page, ['0.00', '0.50', '1.00', '1.50', '2.00', '2.50', '3.00', '3.50']);
+        await testYTicks(page, ['0.00', '0.50', '1.00', '1.50', '2.00']);
 
-        //Wait for canvas to stablize.
         await canvas.hover({trial: true});
 
-        expect.soft(await canvas.screenshot()).toMatchSnapshot('autoscale-canvas-panned.png', { animations: 'disabled' });
+        expect(await canvas.screenshot()).toMatchSnapshot('autoscale-canvas-panned.png', { animations: 'disabled' });
     });
 });
 
@@ -169,25 +152,22 @@ async function createSinewaveOverlayPlot(page, myItemsFolderName) {
  * @param {import('@playwright/test').Page} page
  */
 async function turnOffAutoscale(page) {
+    // enter edit mode
+    await page.locator('text=Unnamed Overlay Plot Snapshot >> button').nth(3).click();
+
     // uncheck autoscale
     await page.getByRole('listitem').filter({ hasText: 'Auto scale' }).getByRole('checkbox').uncheck();
-}
 
-/**
- * @param {import('@playwright/test').Page} page
- * @param {string} min
- * @param {string} max
- */
-async function setUserDefinedMinAndMax(page, min, max) {
-    // set minimum value
-    const minRangeInput = page.getByRole('listitem').filter({ hasText: 'Minimum Value' }).locator('input[type="number"]');
-    await minRangeInput.click();
-    await minRangeInput.fill(min);
-
-    // set maximum value
-    const maxRangeInput = page.getByRole('listitem').filter({ hasText: 'Maximum Value' }).locator('input[type="number"]');
-    await maxRangeInput.click();
-    await maxRangeInput.fill(max);
+    // save
+    await page.locator('text=Snapshot Save and Finish Editing Save and Continue Editing >> button').nth(1).click();
+    await Promise.all([
+        page.locator('text=Save and Finish Editing').click(),
+        //Wait for Save Banner to appear
+        page.waitForSelector('.c-message-banner__message')
+    ]);
+    //Wait until Save Banner is gone
+    await page.locator('.c-message-banner__close-button').click();
+    await page.waitForSelector('.c-message-banner__message', { state: 'detached'});
 }
 
 /**
@@ -199,7 +179,7 @@ async function testYTicks(page, values) {
     let promises = [yTicks.count().then(c => expect(c).toBe(values.length))];
 
     for (let i = 0, l = values.length; i < l; i += 1) {
-        promises.push(expect.soft(yTicks.nth(i)).toHaveText(values[i])); // eslint-disable-line
+        promises.push(expect(yTicks.nth(i)).toHaveText(values[i])); // eslint-disable-line
     }
 
     await Promise.all(promises);

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

@@ -160,16 +160,35 @@ async function testRegularTicks(page) {
  */
 async function testLogTicks(page) {
     const yTicks = await page.locator('.gl-plot-y-tick-label');
-    expect(await yTicks.count()).toBe(9);
+    expect(await yTicks.count()).toBe(28);
     await expect(yTicks.nth(0)).toHaveText('-2.98');
-    await expect(yTicks.nth(1)).toHaveText('-1.51');
-    await expect(yTicks.nth(2)).toHaveText('-0.58');
-    await expect(yTicks.nth(3)).toHaveText('-0.00');
-    await expect(yTicks.nth(4)).toHaveText('0.58');
-    await expect(yTicks.nth(5)).toHaveText('1.51');
-    await expect(yTicks.nth(6)).toHaveText('2.98');
-    await expect(yTicks.nth(7)).toHaveText('5.31');
-    await expect(yTicks.nth(8)).toHaveText('9.00');
+    await expect(yTicks.nth(1)).toHaveText('-2.50');
+    await expect(yTicks.nth(2)).toHaveText('-2.00');
+    await expect(yTicks.nth(3)).toHaveText('-1.51');
+    await expect(yTicks.nth(4)).toHaveText('-1.20');
+    await expect(yTicks.nth(5)).toHaveText('-1.00');
+    await expect(yTicks.nth(6)).toHaveText('-0.80');
+    await expect(yTicks.nth(7)).toHaveText('-0.58');
+    await expect(yTicks.nth(8)).toHaveText('-0.40');
+    await expect(yTicks.nth(9)).toHaveText('-0.20');
+    await expect(yTicks.nth(10)).toHaveText('-0.00');
+    await expect(yTicks.nth(11)).toHaveText('0.20');
+    await expect(yTicks.nth(12)).toHaveText('0.40');
+    await expect(yTicks.nth(13)).toHaveText('0.58');
+    await expect(yTicks.nth(14)).toHaveText('0.80');
+    await expect(yTicks.nth(15)).toHaveText('1.00');
+    await expect(yTicks.nth(16)).toHaveText('1.20');
+    await expect(yTicks.nth(17)).toHaveText('1.51');
+    await expect(yTicks.nth(18)).toHaveText('2.00');
+    await expect(yTicks.nth(19)).toHaveText('2.50');
+    await expect(yTicks.nth(20)).toHaveText('2.98');
+    await expect(yTicks.nth(21)).toHaveText('3.50');
+    await expect(yTicks.nth(22)).toHaveText('4.00');
+    await expect(yTicks.nth(23)).toHaveText('4.50');
+    await expect(yTicks.nth(24)).toHaveText('5.31');
+    await expect(yTicks.nth(25)).toHaveText('7.00');
+    await expect(yTicks.nth(26)).toHaveText('8.00');
+    await expect(yTicks.nth(27)).toHaveText('9.00');
 }
 
 /**

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

@@ -29,11 +29,8 @@ const { test, expect } = require('../../../../pluginFixtures');
 const { createDomainObjectWithDefaults } = require('../../../../appActions');
 
 test.describe('Overlay Plot', () => {
-    test.beforeEach(async ({ page }) => {
-        await page.goto('./', { waitUntil: 'networkidle' });
-    });
-
     test('Plot legend color is in sync with plot series color', async ({ page }) => {
+        await page.goto('/', { waitUntil: 'networkidle' });
         const overlayPlot = await createDomainObjectWithDefaults(page, {
             type: "Overlay Plot"
         });
@@ -59,30 +56,35 @@ test.describe('Overlay Plot', () => {
 
         expect(color).toBe('rgb(255, 166, 61)');
     });
-
     test('The elements pool supports dragging series into multiple y-axis buckets', async ({ page }) => {
+        await page.goto('/', { waitUntil: 'networkidle' });
         const overlayPlot = await createDomainObjectWithDefaults(page, {
             type: "Overlay Plot"
         });
 
-        const swgA = await createDomainObjectWithDefaults(page, {
+        await createDomainObjectWithDefaults(page, {
             type: "Sine Wave Generator",
+            name: 'swg a',
             parent: overlayPlot.uuid
         });
-        const swgB = await createDomainObjectWithDefaults(page, {
+        await createDomainObjectWithDefaults(page, {
             type: "Sine Wave Generator",
+            name: 'swg b',
             parent: overlayPlot.uuid
         });
-        const swgC = await createDomainObjectWithDefaults(page, {
+        await createDomainObjectWithDefaults(page, {
             type: "Sine Wave Generator",
+            name: 'swg c',
             parent: overlayPlot.uuid
         });
-        const swgD = await createDomainObjectWithDefaults(page, {
+        await createDomainObjectWithDefaults(page, {
             type: "Sine Wave Generator",
+            name: 'swg d',
             parent: overlayPlot.uuid
         });
-        const swgE = await createDomainObjectWithDefaults(page, {
+        await createDomainObjectWithDefaults(page, {
             type: "Sine Wave Generator",
+            name: 'swg e',
             parent: overlayPlot.uuid
         });
 
@@ -90,111 +92,33 @@ test.describe('Overlay Plot', () => {
         await page.click('button[title="Edit"]');
 
         // Expand the elements pool vertically
-        await page.locator('.l-pane.l-pane--vertical-handle-before', {
-            hasText: 'Elements'
-        }).locator('.l-pane__handle').hover();
+        await page.locator('.l-pane__handle').nth(2).hover({ trial: true });
         await page.mouse.down();
         await page.mouse.move(0, 100);
         await page.mouse.up();
 
-        const yAxis1PropertyGroup = page.locator('[aria-label="Y Axis Properties"]');
-        const yAxis2PropertyGroup = page.locator('[aria-label="Y Axis 2 Properties"]');
-        const yAxis3PropertyGroup = page.locator('[aria-label="Y Axis 3 Properties"]');
-
-        // Assert that Y Axis 1 property group is visible only
-        await expect(yAxis1PropertyGroup).toBeVisible();
-        await expect(yAxis2PropertyGroup).toBeHidden();
-        await expect(yAxis3PropertyGroup).toBeHidden();
-
         // Drag swg a, c, e into Y Axis 2
-        await page.locator(`#inspector-elements-tree >> text=${swgA.name}`).dragTo(page.locator('[aria-label="Element Item Group Y Axis 2"]'));
-        await page.locator(`#inspector-elements-tree >> text=${swgC.name}`).dragTo(page.locator('[aria-label="Element Item Group Y Axis 2"]'));
-        await page.locator(`#inspector-elements-tree >> text=${swgE.name}`).dragTo(page.locator('[aria-label="Element Item Group Y Axis 2"]'));
+        await page.locator('#inspector-elements-tree >> text=swg a').dragTo(page.locator('[aria-label="Element Item Group Y Axis 2"]'));
+        await page.locator('#inspector-elements-tree >> text=swg c').dragTo(page.locator('[aria-label="Element Item Group Y Axis 2"]'));
+        await page.locator('#inspector-elements-tree >> text=swg e').dragTo(page.locator('[aria-label="Element Item Group Y Axis 2"]'));
 
-        // Assert that Y Axis 1 and Y Axis 2 property groups are visible only
-        await expect(yAxis1PropertyGroup).toBeVisible();
-        await expect(yAxis2PropertyGroup).toBeVisible();
-        await expect(yAxis3PropertyGroup).toBeHidden();
+        // Drag swg b into Y Axis 3
+        await page.locator('#inspector-elements-tree >> text=swg b').dragTo(page.locator('[aria-label="Element Item Group Y Axis 3"]'));
 
         const yAxis1Group = page.getByLabel("Y Axis 1");
         const yAxis2Group = page.getByLabel("Y Axis 2");
         const yAxis3Group = page.getByLabel("Y Axis 3");
 
-        // Drag swg b into Y Axis 3
-        await page.locator(`#inspector-elements-tree >> text=${swgB.name}`).dragTo(page.locator('[aria-label="Element Item Group Y Axis 3"]'));
-
-        // Assert that all Y Axis property groups are visible
-        await expect(yAxis1PropertyGroup).toBeVisible();
-        await expect(yAxis2PropertyGroup).toBeVisible();
-        await expect(yAxis3PropertyGroup).toBeVisible();
-
         // Verify that the elements are in the correct buckets and in the correct order
-        expect(yAxis1Group.getByRole('listitem', { name: swgD.name })).toBeTruthy();
-        expect(yAxis1Group.getByRole('listitem').nth(0).getByText(swgD.name)).toBeTruthy();
-        expect(yAxis2Group.getByRole('listitem', { name: swgE.name })).toBeTruthy();
-        expect(yAxis2Group.getByRole('listitem').nth(0).getByText(swgE.name)).toBeTruthy();
-        expect(yAxis2Group.getByRole('listitem', { name: swgC.name })).toBeTruthy();
-        expect(yAxis2Group.getByRole('listitem').nth(1).getByText(swgC.name)).toBeTruthy();
-        expect(yAxis2Group.getByRole('listitem', { name: swgA.name })).toBeTruthy();
-        expect(yAxis2Group.getByRole('listitem').nth(2).getByText(swgA.name)).toBeTruthy();
-        expect(yAxis3Group.getByRole('listitem', { name: swgB.name })).toBeTruthy();
-        expect(yAxis3Group.getByRole('listitem').nth(0).getByText(swgB.name)).toBeTruthy();
-    });
-
-    test('Clicking on an item in the elements pool brings up the plot preview with data points', async ({ page }) => {
-        const overlayPlot = await createDomainObjectWithDefaults(page, {
-            type: "Overlay Plot"
-        });
-
-        const swgA = await createDomainObjectWithDefaults(page, {
-            type: "Sine Wave Generator",
-            parent: overlayPlot.uuid
-        });
-
-        await page.goto(overlayPlot.url);
-        await page.click('button[title="Edit"]');
-
-        await page.locator(`#inspector-elements-tree >> text=${swgA.name}`).click();
-        await page.locator('.js-overlay canvas').nth(1);
-        const plotPixelSize = await getCanvasPixelsWithData(page);
-        expect(plotPixelSize).toBeGreaterThan(0);
+        expect(yAxis1Group.getByRole('listitem', { name: 'swg d' })).toBeTruthy();
+        expect(yAxis1Group.getByRole('listitem').nth(0).getByText('swg d')).toBeTruthy();
+        expect(yAxis2Group.getByRole('listitem', { name: 'swg e' })).toBeTruthy();
+        expect(yAxis2Group.getByRole('listitem').nth(0).getByText('swg e')).toBeTruthy();
+        expect(yAxis2Group.getByRole('listitem', { name: 'swg c' })).toBeTruthy();
+        expect(yAxis2Group.getByRole('listitem').nth(1).getByText('swg c')).toBeTruthy();
+        expect(yAxis2Group.getByRole('listitem', { name: 'swg a' })).toBeTruthy();
+        expect(yAxis2Group.getByRole('listitem').nth(2).getByText('swg a')).toBeTruthy();
+        expect(yAxis3Group.getByRole('listitem', { name: 'swg b' })).toBeTruthy();
+        expect(yAxis3Group.getByRole('listitem').nth(0).getByText('swg b')).toBeTruthy();
     });
 });
-
-/**
- * @param {import('@playwright/test').Page} page
- */
-async function getCanvasPixelsWithData(page) {
-    const getTelemValuePromise = new Promise(resolve => page.exposeFunction('getCanvasValue', resolve));
-
-    await page.evaluate(() => {
-        // The document canvas is where the plot points and lines are drawn.
-        // The only way to access the canvas is using document (using page.evaluate)
-        let data;
-        let canvas;
-        let ctx;
-        canvas = document.querySelector('.js-overlay canvas');
-        ctx = canvas.getContext('2d');
-        data = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
-        const imageDataValues = Object.values(data);
-        let plotPixels = [];
-        // Each pixel consists of four values within the ImageData.data array. The for loop iterates by multiples of four.
-        // The values associated with each pixel are R (red), G (green), B (blue), and A (alpha), in that order.
-        for (let i = 0; i < imageDataValues.length;) {
-            if (imageDataValues[i] > 0) {
-                plotPixels.push({
-                    startIndex: i,
-                    endIndex: i + 3,
-                    value: `rgb(${imageDataValues[i]}, ${imageDataValues[i + 1]}, ${imageDataValues[i + 2]}, ${imageDataValues[i + 3]})`
-                });
-            }
-
-            i = i + 4;
-
-        }
-
-        window.getCanvasValue(plotPixels.length);
-    });
-
-    return getTelemValuePromise;
-}

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

@@ -1,139 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2022, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/*
-Tests to verify log plot functionality. Note this test suite if very much under active development and should not
-necessarily be used for reference when writing new tests in this area.
-*/
-
-const { test, expect } = require('../../../../pluginFixtures');
-const { createDomainObjectWithDefaults } = require('../../../../appActions');
-
-test.describe('Stacked Plot', () => {
-    let stackedPlot;
-    let swgA;
-    let swgB;
-    let swgC;
-
-    test.beforeEach(async ({ page }) => {
-        //Open a browser, navigate to the main page, and wait until all networkevents to resolve
-        await page.goto('/', { waitUntil: 'networkidle' });
-        stackedPlot = await createDomainObjectWithDefaults(page, {
-            type: "Stacked Plot"
-        });
-
-        swgA = await createDomainObjectWithDefaults(page, {
-            type: "Sine Wave Generator",
-            parent: stackedPlot.uuid
-        });
-        swgB = await createDomainObjectWithDefaults(page, {
-            type: "Sine Wave Generator",
-            parent: stackedPlot.uuid
-        });
-        swgC = await createDomainObjectWithDefaults(page, {
-            type: "Sine Wave Generator",
-            parent: stackedPlot.uuid
-        });
-    });
-
-    test('Using the remove action removes the correct plot', async ({ page }) => {
-        const swgAElementsPoolItem = page.locator('#inspector-elements-tree').locator('.c-object-label', { hasText: swgA.name });
-        const swgBElementsPoolItem = page.locator('#inspector-elements-tree').locator('.c-object-label', { hasText: swgB.name });
-        const swgCElementsPoolItem = page.locator('#inspector-elements-tree').locator('.c-object-label', { hasText: swgC.name });
-
-        await page.goto(stackedPlot.url);
-
-        await page.click('button[title="Edit"]');
-
-        // Expand the elements pool vertically
-        await page.locator('.l-pane__handle').nth(2).hover({ trial: true });
-        await page.mouse.down();
-        await page.mouse.move(0, 100);
-        await page.mouse.up();
-
-        await swgBElementsPoolItem.click({ button: 'right' });
-        await page.getByRole('menuitem').filter({ hasText: /Remove/ }).click();
-        await page.getByRole('button').filter({ hasText: "OK" }).click();
-
-        await expect(page.locator('#inspector-elements-tree .js-elements-pool__item')).toHaveCount(2);
-
-        // Confirm that the elements pool contains the items we expect
-        await expect(swgAElementsPoolItem).toHaveCount(1);
-        await expect(swgBElementsPoolItem).toHaveCount(0);
-        await expect(swgCElementsPoolItem).toHaveCount(1);
-    });
-
-    test('Selecting a child plot while in browse and edit modes shows its properties in the inspector', async ({ page }) => {
-        await page.goto(stackedPlot.url);
-
-        // Click on the 1st plot
-        await page.locator(`[aria-label="Stacked Plot Item ${swgA.name}"] canvas`).nth(1).click();
-
-        // Assert that the inspector shows the Y Axis properties for swgA
-        await expect(page.locator('[aria-label="Plot Series Properties"] >> h2')).toContainText("Plot Series");
-        await expect(page.getByRole('list', { name: "Y Axis Properties" }).locator("h2")).toContainText("Y Axis");
-        await expect(page.locator('[aria-label="Plot Series Properties"] .c-object-label')).toContainText(swgA.name);
-
-        // Click on the 2nd plot
-        await page.locator(`[aria-label="Stacked Plot Item ${swgB.name}"] canvas`).nth(1).click();
-
-        // Assert that the inspector shows the Y Axis properties for swgB
-        await expect(page.locator('[aria-label="Plot Series Properties"] >> h2')).toContainText("Plot Series");
-        await expect(page.getByRole('list', { name: "Y Axis Properties" }).locator("h2")).toContainText("Y Axis");
-        await expect(page.locator('[aria-label="Plot Series Properties"] .c-object-label')).toContainText(swgB.name);
-
-        // Click on the 3rd plot
-        await page.locator(`[aria-label="Stacked Plot Item ${swgC.name}"] canvas`).nth(1).click();
-
-        // Assert that the inspector shows the Y Axis properties for swgC
-        await expect(page.locator('[aria-label="Plot Series Properties"] >> h2')).toContainText("Plot Series");
-        await expect(page.getByRole('list', { name: "Y Axis Properties" }).locator("h2")).toContainText("Y Axis");
-        await expect(page.locator('[aria-label="Plot Series Properties"] .c-object-label')).toContainText(swgC.name);
-
-        // Go into edit mode
-        await page.click('button[title="Edit"]');
-
-        // Click on canvas for the 1st plot
-        await page.locator(`[aria-label="Stacked Plot Item ${swgA.name}"]`).click();
-
-        // Assert that the inspector shows the Y Axis properties for swgA
-        await expect(page.locator('[aria-label="Plot Series Properties"] >> h2')).toContainText("Plot Series");
-        await expect(page.getByRole('list', { name: "Y Axis Properties" }).locator("h2")).toContainText("Y Axis");
-        await expect(page.locator('[aria-label="Plot Series Properties"] .c-object-label')).toContainText(swgA.name);
-
-        //Click on canvas for the 2nd plot
-        await page.locator(`[aria-label="Stacked Plot Item ${swgB.name}"]`).click();
-
-        // Assert that the inspector shows the Y Axis properties for swgB
-        await expect(page.locator('[aria-label="Plot Series Properties"] >> h2')).toContainText("Plot Series");
-        await expect(page.getByRole('list', { name: "Y Axis Properties" }).locator("h2")).toContainText("Y Axis");
-        await expect(page.locator('[aria-label="Plot Series Properties"] .c-object-label')).toContainText(swgB.name);
-
-        //Click on canvas for the 3rd plot
-        await page.locator(`[aria-label="Stacked Plot Item ${swgC.name}"]`).click();
-
-        // Assert that the inspector shows the Y Axis properties for swgC
-        await expect(page.locator('[aria-label="Plot Series Properties"] >> h2')).toContainText("Plot Series");
-        await expect(page.getByRole('list', { name: "Y Axis Properties" }).locator("h2")).toContainText("Y Axis");
-        await expect(page.locator('[aria-label="Plot Series Properties"] .c-object-label')).toContainText(swgC.name);
-    });
-});

e2e/tests/functional/recentObjects.e2e.spec.js

@@ -22,46 +22,37 @@
 
 const { test, expect } = require('../../pluginFixtures.js');
 const { createDomainObjectWithDefaults } = require('../../appActions.js');
-const { waitForAnimations } = require('../../baseFixtures.js');
 
 test.describe('Recent Objects', () => {
-    /** @type {import('@playwright/test').Locator} */
-    let recentObjectsList;
-    /** @type {import('@playwright/test').Locator} */
-    let clock;
-    /** @type {import('@playwright/test').Locator} */
-    let folderA;
-    test.beforeEach(async ({ page }) => {
+    test('Recent Objects CRUD operations', async ({ page }) => {
         await page.goto('./', { waitUntil: 'networkidle' });
 
-        // Set Recent Objects List locator for subsequent tests
-        recentObjectsList = page.getByRole('list', {
-            name: 'Recent Objects'
-        });
-
         // Create a folder and nest a Clock within it
-        folderA = await createDomainObjectWithDefaults(page, {
+        const recentObjectsList = page.locator('[aria-label="Recent Objects"]');
+        const folderA = await createDomainObjectWithDefaults(page, {
             type: 'Folder'
         });
-        clock = await createDomainObjectWithDefaults(page, {
+        const clock = await createDomainObjectWithDefaults(page, {
             type: 'Clock',
             parent: folderA.uuid
         });
 
         // Drag the Recent Objects panel up a bit
-        await page.locator('.l-pane.l-pane--vertical-handle-before', {
-            hasText: 'Recently Viewed'
-        }).locator('.l-pane__handle').hover();
+        await page.locator('div:nth-child(2) > .l-pane__handle').hover();
         await page.mouse.down();
         await page.mouse.move(0, 100);
         await page.mouse.up();
-    });
-    test('Navigated objects show up in recents, object renames and deletions are reflected', async ({ page }) => {
+
         // Verify that both created objects appear in the list and are in the correct order
-        assertInitialRecentObjectsListState();
+        expect(recentObjectsList.getByRole('listitem', { name: clock.name })).toBeTruthy();
+        expect(recentObjectsList.getByRole('listitem', { name: folderA.name })).toBeTruthy();
+        expect(recentObjectsList.getByRole('listitem', { name: clock.name }).locator('a').getByText(folderA.name)).toBeTruthy();
+        expect(recentObjectsList.getByRole('listitem').nth(0).getByText(clock.name)).toBeTruthy();
+        expect(recentObjectsList.getByRole('listitem', { name: clock.name }).locator('a').getByText(folderA.name)).toBeTruthy();
+        expect(recentObjectsList.getByRole('listitem').nth(1).getByText(folderA.name)).toBeTruthy();
 
         // Navigate to the folder by clicking on the main object name in the recent objects list item
-        await page.getByRole('listitem', { name: folderA.name }).getByText(folderA.name).click();
+        await recentObjectsList.getByRole('listitem', { name: folderA.name }).getByText(folderA.name).click();
         await page.waitForURL(`**/${folderA.uuid}?*`);
         expect(recentObjectsList.getByRole('listitem').nth(0).getByText(folderA.name)).toBeTruthy();
 
@@ -72,11 +63,7 @@ test.describe('Recent Objects', () => {
         await page.keyboard.press('Enter');
 
         // Verify rename has been applied in recent objects list item and objects paths
-        expect(await page.getByRole('navigation', {
-            name: clock.name
-        }).locator('a').filter({
-            hasText: folderA.name
-        }).count()).toBeGreaterThan(0);
+        expect(page.getByRole('listitem', { name: clock.name }).locator('a').getByText(folderA.name)).toBeTruthy();
         expect(recentObjectsList.getByRole('listitem', { name: folderA.name })).toBeTruthy();
 
         // Delete
@@ -92,164 +79,7 @@ test.describe('Recent Objects', () => {
         await expect(recentObjectsList.getByRole('listitem', { name: folderA.name })).toBeHidden();
         await expect(recentObjectsList.getByRole('listitem', { name: clock.name })).toBeHidden();
     });
-    test("Clicking on an object in the path of a recent object navigates to the object", async ({ page, openmctConfig }) => {
-        const { myItemsFolderName } = openmctConfig;
-        test.info().annotations.push({
-            type: 'issue',
-            description: 'https://github.com/nasa/openmct/issues/6151'
-        });
-        await page.goto('./#/browse/mine');
-
-        // Navigate to the folder by clicking on its entry in the Clock's breadcrumb
-        const waitForFolderNavigation = page.waitForURL(`**/${folderA.uuid}?*`);
-        await page.getByRole('navigation', {
-            name: clock.name
-        }).locator('a').filter({
-            hasText: folderA.name
-        }).click();
-
-        // Verify that the hash URL updates correctly
-        await waitForFolderNavigation;
-        expect(page.url()).toMatch(new RegExp(`.*${folderA.uuid}?.*`));
-
-        // Navigate to My Items by clicking on its entry in the Clock's breadcrumb
-        const waitForMyItemsNavigation = page.waitForURL(`**/mine?*`);
-        await page.getByRole('navigation', {
-            name: clock.name
-        }).locator('a').filter({
-            hasText: myItemsFolderName
-        }).click();
-
-        // Verify that the hash URL updates correctly
-        await waitForMyItemsNavigation;
-        expect(page.url()).toMatch(new RegExp(`.*mine?.*`));
-    });
-    test("Clicking on the 'target button' scrolls the object into view in the tree and highlights it", async ({ page }) => {
-        const clockTreeItem = page.getByRole('tree', { name: 'Main Tree'}).getByRole('treeitem', { name: clock.name });
-        const folderTreeItem = page.getByRole('tree', { name: 'Main Tree'})
-            .getByRole('treeitem', {
-                name: folderA.name,
-                expanded: true
-            });
-
-        // Click the "Target" button for the Clock which is nested in a folder
-        await page.getByRole('button', { name: `Open and scroll to ${clock.name}`}).click();
-
-        // Assert that the Clock parent folder has expanded and the Clock is visible)
-        await expect(folderTreeItem.locator('.c-disclosure-triangle')).toHaveClass(/--expanded/);
-        await expect(clockTreeItem).toBeVisible();
-
-        // Assert that the Clock treeitem is highlighted
-        await expect(clockTreeItem.locator('.c-tree__item')).toHaveClass(/is-targeted-item/);
-
-        // Wait for highlight animation to end
-        await waitForAnimations(clockTreeItem.locator('.c-tree__item'));
-
-        // Assert that the Clock treeitem is no longer highlighted
-        await expect(clockTreeItem.locator('.c-tree__item')).not.toHaveClass(/is-targeted-item/);
-    });
-    test("Persists on refresh", async ({ page }) => {
-        assertInitialRecentObjectsListState();
-        await page.reload();
-        assertInitialRecentObjectsListState();
-    });
-    test("Displays objects and aliases uniquely", async ({ page }) => {
-        const mainTree = page.getByRole('tree', { name: 'Main Tree'});
-
-        // Navigate to the clock and reveal it in the tree
-        await page.goto(clock.url);
-        await page.getByTitle('Show selected item in tree').click();
-
-        // Right click the clock and create an alias using the "link" context menu action
-        const clockTreeItem = page.getByRole('tree', {
-            name: 'Main Tree'
-        }).getByRole('treeitem', {
-            name: clock.name
-        });
-        await clockTreeItem.click({
-            button: 'right'
-        });
-        await page.getByRole('menuitem', {
-            name: /Create Link/
-        }).click();
-        await page.getByRole('tree', { name: 'Create Modal Tree'}).getByRole('treeitem').first().click();
-        await page.getByRole('button', { name: 'Save' }).click();
-
-        // Click the newly created object alias in the tree
-        await mainTree.getByRole('treeitem', {
-            name: new RegExp(clock.name)
-        }).filter({
-            has: page.locator('.is-alias')
-        }).click();
-
-        // Assert that two recent objects are displayed and one of them is an alias
-        expect(await recentObjectsList.getByRole('listitem', { name: clock.name }).count()).toBe(2);
-        expect(await recentObjectsList.locator('.is-alias').count()).toBe(1);
-
-        // Assert that the alias and the original's breadcrumbs are different
-        const clockBreadcrumbs = recentObjectsList.getByRole('listitem', {name: clock.name}).getByRole('navigation');
-        expect(await clockBreadcrumbs.count()).toBe(2);
-        expect(await clockBreadcrumbs.nth(0).innerText()).not.toEqual(await clockBreadcrumbs.nth(1).innerText());
-    });
-    test("Enforces a limit of 20 recent objects", async ({ page }) => {
-        // Creating 21 objects takes a while, so increase the timeout
-        test.slow();
-
-        // Assert that the list initially contains 3 objects (clock, folder, my items)
-        expect(await recentObjectsList.locator('.c-recentobjects-listitem').count()).toBe(3);
-
-        let lastFolder;
-        let lastClock;
-        // Create 19 more objects (3 in beforeEach() + 18 new = 21 total)
-        for (let i = 0; i < 9; i++) {
-            lastFolder = await createDomainObjectWithDefaults(page, {
-                type: "Folder",
-                parent: lastFolder?.uuid
-            });
-            lastClock = await createDomainObjectWithDefaults(page, {
-                type: "Clock",
-                parent: lastFolder?.uuid
-            });
-        }
-
-        // Assert that the list contains 20 objects
-        expect(await recentObjectsList.locator('.c-recentobjects-listitem').count()).toBe(20);
-
-        // Collapse the tree
-        await page.getByTitle("Collapse all tree items").click();
-        const lastFolderTreeItem = page.getByRole('tree', { name: 'Main Tree'})
-            .getByRole('treeitem', {
-                name: lastFolder.name,
-                expanded: true
-            });
-        const lastClockTreeItem = page.getByRole('tree', { name: 'Main Tree'})
-            .getByRole('treeitem', {
-                name: lastClock.name
-            });
-
-        // Test "Open and Scroll To" in a deeply nested tree, while we're here
-        await page.getByRole('button', { name: `Open and scroll to ${lastClock.name}`}).click();
-
-        // Assert that the Clock parent folder has expanded and the Clock is visible)
-        await expect(lastFolderTreeItem.locator('.c-disclosure-triangle')).toHaveClass(/--expanded/);
-        await expect(lastClockTreeItem).toBeVisible();
-
-        // Assert that the Clock treeitem is highlighted
-        await expect(lastClockTreeItem.locator('.c-tree__item')).toHaveClass(/is-targeted-item/);
-
-        // Wait for highlight animation to end
-        await waitForAnimations(lastClockTreeItem.locator('.c-tree__item'));
-
-        // Assert that the Clock treeitem is no longer highlighted
-        await expect(lastClockTreeItem.locator('.c-tree__item')).not.toHaveClass(/is-targeted-item/);
-    });
-
-    function assertInitialRecentObjectsListState() {
-        expect(recentObjectsList.getByRole('listitem', { name: clock.name })).toBeTruthy();
-        expect(recentObjectsList.getByRole('listitem', { name: folderA.name })).toBeTruthy();
-        expect(recentObjectsList.getByRole('listitem', { name: clock.name }).locator('a').getByText(folderA.name)).toBeTruthy();
-        expect(recentObjectsList.getByRole('listitem').nth(0).getByText(clock.name)).toBeTruthy();
-        expect(recentObjectsList.getByRole('listitem', { name: clock.name }).locator('a').getByText(folderA.name)).toBeTruthy();
-        expect(recentObjectsList.getByRole('listitem').nth(1).getByText(folderA.name)).toBeTruthy();
-    }
+    test.fixme("Clicking on the 'target button' scrolls the object into view in the tree and highlights it");
+    test.fixme("Clicking on an object in the path of a recent object navigates to the object");
+    test.fixme("Tests for context menu actions from recent objects");
 });

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

@@ -28,14 +28,6 @@ const { createDomainObjectWithDefaults } = require('../../appActions');
 const { v4: uuid } = require('uuid');
 
 test.describe('Grand Search', () => {
-    const searchResultSelector = '.c-gsearch-result__title';
-    const searchResultDropDownSelector = '.c-gsearch__results';
-
-    test.beforeEach(async ({ page }) => {
-        // Go to baseURL
-        await page.goto("./", { waitUntil: "networkidle" });
-    });
-
     test('Can search for objects, and subsequent search dropdown behaves properly', async ({ page, openmctConfig }) => {
         const { myItemsFolderName } = openmctConfig;
 
@@ -97,8 +89,15 @@ test.describe('Grand Search', () => {
         await expect(page.locator('[aria-label="Search Result"] >> nth=2')).toContainText(`Clock C ${myItemsFolderName} Red Folder Blue Folder`);
         await expect(page.locator('[aria-label="Search Result"] >> nth=3')).toContainText(`Clock D ${myItemsFolderName} Red Folder Blue Folder`);
     });
+});
+
+test.describe("Search Tests @unstable", () => {
+    const searchResultSelector = '.c-gsearch-result__title';
 
     test('Validate empty search result', async ({ page }) => {
+        // Go to baseURL
+        await page.goto("./", { waitUntil: "networkidle" });
+
         // Invalid search for objects
         await page.type("input[type=search]", 'not found');
 
@@ -106,7 +105,7 @@ test.describe('Grand Search', () => {
         await waitForSearchCompletion(page);
 
         // Get the search results
-        const searchResults = page.locator(searchResultSelector);
+        const searchResults = await page.locator(searchResultSelector);
 
         // Verify that no results are found
         expect(await searchResults.count()).toBe(0);
@@ -116,6 +115,9 @@ test.describe('Grand Search', () => {
     });
 
     test('Validate single object in search result @couchdb', async ({ page }) => {
+        //Go to baseURL
+        await page.goto("./", { waitUntil: "networkidle" });
+
         // Create a folder object
         const folderName = uuid();
         await createDomainObjectWithDefaults(page, {
@@ -137,56 +139,21 @@ test.describe('Grand Search', () => {
         await expect(searchResults).toHaveText(folderName);
     });
 
-    test('Search results are debounced @couchdb', async ({ page }) => {
-        test.info().annotations.push({
-            type: 'issue',
-            description: 'https://github.com/nasa/openmct/issues/6179'
-        });
-        await createObjectsForSearch(page);
-
-        let networkRequests = [];
-        page.on('request', (request) => {
-            const searchRequest = request.url().endsWith('_find');
-            const fetchRequest = request.resourceType() === 'fetch';
-            if (searchRequest && fetchRequest) {
-                networkRequests.push(request);
-            }
-        });
-
-        // Full search for object
-        await page.type("input[type=search]", 'Clock', { delay: 100 });
-
-        // Wait for search to finish
-        await waitForSearchCompletion(page);
-
-        // Network requests for the composite telemetry with multiple items should be:
-        // 1.  batched request for latest telemetry using the bulk API
-        expect(networkRequests.length).toBe(1);
-
-        const searchResultDropDown = await page.locator(searchResultDropDownSelector);
-
-        await expect(searchResultDropDown).toContainText('Clock A');
-    });
-
     test("Validate multiple objects in search results return partial matches", async ({ page }) => {
         test.info().annotations.push({
             type: 'issue',
             description: 'https://github.com/nasa/openmct/issues/4667'
         });
 
+        // Go to baseURL
+        await page.goto("/", { waitUntil: "networkidle" });
+
         // Create folder objects
-        const folderName1 = "e928a26e-e924-4ea0";
+        const folderName = "e928a26e-e924-4ea0";
         const folderName2 = "e928a26e-e924-4001";
 
-        await createDomainObjectWithDefaults(page, {
-            type: 'Folder',
-            name: folderName1
-        });
-
-        await createDomainObjectWithDefaults(page, {
-            type: 'Folder',
-            name: folderName2
-        });
+        await createFolderObject(page, folderName);
+        await createFolderObject(page, folderName2);
 
         // Partial search for objects
         await page.type("input[type=search]", 'e928a26e');
@@ -194,22 +161,36 @@ test.describe('Grand Search', () => {
         // Wait for search to finish
         await waitForSearchCompletion(page);
 
-        const searchResultDropDown = await page.locator(searchResultDropDownSelector);
+        // Get the search results
+        const searchResults = await page.locator(searchResultSelector);
 
         // Verify that the search result/s correctly match the search query
-        await expect(searchResultDropDown).toContainText(folderName1);
-        await expect(searchResultDropDown).toContainText(folderName2);
-
-        // Get the search results
-        const searchResults = page.locator(searchResultSelector);
-        // Verify that two results are found
         expect(await searchResults.count()).toBe(2);
+        await expect(await searchResults.first()).toHaveText(folderName);
+        await expect(await searchResults.last()).toHaveText(folderName2);
     });
 });
 
+async function createFolderObject(page, folderName) {
+    // Open Create menu
+    await page.locator('button:has-text("Create")').click();
+
+    // Select Folder object
+    await page.locator('text=Folder').nth(1).click();
+
+    // Click folder title to enter edit mode
+    await page.locator('text=Properties Title Notes >> input[type="text"]').click();
+
+    // Enter folder name
+    await page.locator('text=Properties Title Notes >> input[type="text"]').fill(folderName);
+
+    // Create folder object
+    await page.locator('button:has-text("OK")').click();
+}
+
 async function waitForSearchCompletion(page) {
     // Wait loading spinner to disappear
-    await page.waitForSelector('.search-finished');
+    await page.waitForSelector('.c-tree-and-search__loading', { state: 'detached' });
 }
 
 /**
@@ -217,6 +198,9 @@ async function waitForSearchCompletion(page) {
   * @param {import('@playwright/test').Page} page
   */
 async function createObjectsForSearch(page) {
+    //Go to baseURL
+    await page.goto('./', { waitUntil: 'networkidle' });
+
     const redFolder = await createDomainObjectWithDefaults(page, {
         type: 'Folder',
         name: 'Red Folder'

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

@@ -116,9 +116,7 @@ async function getAndAssertTreeItems(page, expected) {
  * @param {string} name
  */
 async function expandTreePaneItemByName(page, name) {
-    const treePane = page.getByRole('tree', {
-        name: 'Main Tree'
-    });
+    const treePane = page.locator('#tree-pane');
     const treeItem = treePane.locator(`role=treeitem[expanded=false][name=/${name}/]`);
     const expandTriangle = treeItem.locator('.c-disclosure-triangle');
     await expandTriangle.click();

e2e/tests/visual/addTag.visual.spec.js

@@ -1,68 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2023, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * This test is dedicated to test the blur behavior of the add tag button.
- */
-
-const { test } = require("../../pluginFixtures");
-const percySnapshot = require('@percy/playwright');
-const { createDomainObjectWithDefaults } = require('../../appActions');
-
-test.describe("Visual - Check blur of Add Tag button", () => {
-
-    test.beforeEach(async ({ page }) => {
-        // Open a browser, navigate to the main page, and wait until all network events to resolve
-        await page.goto('./', { waitUntil: 'networkidle' });
-    });
-
-    test("Blur 'Add tag'", async ({ page, theme }) => {
-        createDomainObjectWithDefaults(page, { type: 'Notebook' });
-
-        await page.locator('text=To start a new entry, click here or drag and drop any object').click();
-        const entryLocator = `[aria-label="Notebook Entry Input"] >> nth = 0`;
-        await page.locator(entryLocator).click();
-        await page.locator(entryLocator).fill(`Entry 0`);
-        await page.locator(entryLocator).press('Enter');
-
-        // Click on Annotations tab
-        await page.locator('.c-inspector__tab', { hasText: "Annotations" }).click();
-
-        // Take snapshot of the notebook with the Annotations tab opened
-        await percySnapshot(page, `Notebook Annotation (theme: '${theme}')`);
-
-        // Click on the "Add Tag" button
-        await page.locator('button:has-text("Add Tag")').click();
-
-        // Take snapshot of the notebook with the AutoComplete field visible
-        await percySnapshot(page, `Notebook Add Tag (theme: '${theme}')`);
-
-        // Click inside the AutoComplete field
-        await page.locator('[placeholder="Type to select tag"]').click();
-
-        // Click on the "Tags" header (simulating a click outside the autocomplete field)
-        await page.locator('div.c-inspect-properties__header:has-text("Tags")').click();
-
-        // Take snapshot of the notebook with the AutoComplete field hidden and with the "Add Tag" button visible
-        await percySnapshot(page, `Notebook Annotation de-select blur (theme: '${theme}')`);
-    });
-});

e2e/tests/visual/components/tree.visual.spec.js

@@ -57,7 +57,7 @@ test.describe('Visual - Tree Pane', () => {
             name: 'Z Clock'
         });
 
-        const treePane = "[role=tree][aria-label='Main Tree']";
+        const treePane = "#tree-pane";
 
         await percySnapshot(page, `Tree Pane w/ collapsed tree (theme: ${theme})`, {
             scope: treePane
@@ -94,7 +94,7 @@ test.describe('Visual - Tree Pane', () => {
  * @param {string} name
  */
 async function expandTreePaneItemByName(page, name) {
-    const treePane = page.getByTestId('tree-pane');
+    const treePane = page.locator('#tree-pane');
     const treeItem = treePane.locator(`role=treeitem[expanded=false][name=/${name}/]`);
     const expandTriangle = treeItem.locator('.c-disclosure-triangle');
     await expandTriangle.click();

example/exampleTags/plugin.js

@@ -20,23 +20,11 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 import availableTags from './tags.json';
-
 /**
-@typedef {{
-    namespaceToSaveAnnotations: string
-}} TagsPluginOptions
-*/
-
-/**
- * @typedef {TagsPluginOptions} options
  * @returns {function} The plugin install function
  */
-export default function exampleTagsPlugin(options) {
+export default function exampleTagsPlugin() {
     return function install(openmct) {
-        if (options?.namespaceToSaveAnnotations) {
-            openmct.annotation.setNamespaceToSaveAnnotations(options?.namespaceToSaveAnnotations);
-        }
-
         Object.keys(availableTags.tags).forEach(tagKey => {
             const tagDefinition = availableTags.tags[tagKey];
             openmct.annotation.defineTag(tagKey, tagDefinition);

example/generator/SinewaveStalenessProvider.js

@@ -23,18 +23,14 @@
 import EventEmitter from 'EventEmitter';
 
 export default class SinewaveLimitProvider extends EventEmitter {
-    #openmct;
-    #observingStaleness;
-    #watchingTheClock;
-    #isRealTime;
 
     constructor(openmct) {
         super();
 
-        this.#openmct = openmct;
-        this.#observingStaleness = {};
-        this.#watchingTheClock = false;
-        this.#isRealTime = undefined;
+        this.openmct = openmct;
+        this.observingStaleness = {};
+        this.watchingTheClock = false;
+        this.isRealTime = undefined;
     }
 
     supportsStaleness(domainObject) {
@@ -42,116 +38,114 @@ export default class SinewaveLimitProvider extends EventEmitter {
     }
 
     isStale(domainObject, options) {
-        if (!this.#providingStaleness(domainObject)) {
-            return;
+        if (!this.providingStaleness(domainObject)) {
+            return Promise.resolve({
+                isStale: false,
+                utc: 0
+            });
         }
 
-        const id = this.#getObjectKeyString(domainObject);
+        const id = this.getObjectKeyString(domainObject);
 
-        if (!this.#observerExists(id)) {
-            this.#createObserver(id);
+        if (!this.observerExists(id)) {
+            this.createObserver(id);
         }
 
-        return Promise.resolve({
-            isStale: this.#observingStaleness[id].isStale,
-            utc: Date.now()
-        });
+        return Promise.resolve(this.observingStaleness[id].isStale);
     }
 
     subscribeToStaleness(domainObject, callback) {
-        const id = this.#getObjectKeyString(domainObject);
+        const id = this.getObjectKeyString(domainObject);
 
-        if (this.#isRealTime === undefined) {
-            this.#updateRealTime(this.#openmct.time.clock());
+        if (this.isRealTime === undefined) {
+            this.updateRealTime(this.openmct.time.clock());
         }
 
-        this.#handleClockUpdate();
+        this.handleClockUpdate();
 
-        if (this.#observerExists(id)) {
-            this.#addCallbackToObserver(id, callback);
+        if (this.observerExists(id)) {
+            this.addCallbackToObserver(id, callback);
         } else {
-            this.#createObserver(id, callback);
+            this.createObserver(id, callback);
         }
 
         const intervalId = setInterval(() => {
-            if (this.#providingStaleness(domainObject)) {
-                this.#updateStaleness(id, !this.#observingStaleness[id].isStale);
+            if (this.providingStaleness(domainObject)) {
+                this.updateStaleness(id, !this.observingStaleness[id].isStale);
             }
         }, 10000);
 
         return () => {
             clearInterval(intervalId);
-            this.#updateStaleness(id, false);
-            this.#handleClockUpdate();
-            this.#destroyObserver(id);
+            this.updateStaleness(id, false);
+            this.handleClockUpdate();
+            this.destroyObserver(id);
         };
     }
 
-    #handleClockUpdate() {
-        let observers = Object.values(this.#observingStaleness).length > 0;
+    handleClockUpdate() {
+        let observers = Object.values(this.observingStaleness).length > 0;
 
-        if (observers && !this.#watchingTheClock) {
-            this.#watchingTheClock = true;
-            this.#openmct.time.on('clock', this.#updateRealTime, this);
-        } else if (!observers && this.#watchingTheClock) {
-            this.#watchingTheClock = false;
-            this.#openmct.time.off('clock', this.#updateRealTime, this);
+        if (observers && !this.watchingTheClock) {
+            this.watchingTheClock = true;
+            this.openmct.time.on('clock', this.updateRealTime, this);
+        } else if (!observers && this.watchingTheClock) {
+            this.watchingTheClock = false;
+            this.openmct.time.off('clock', this.updateRealTime, this);
         }
     }
 
-    #updateRealTime(clock) {
-        this.#isRealTime = clock !== undefined;
+    updateRealTime(clock) {
+        this.isRealTime = clock !== undefined;
 
-        if (!this.#isRealTime) {
-            Object.keys(this.#observingStaleness).forEach((id) => {
-                this.#updateStaleness(id, false);
+        if (!this.isRealTime) {
+            Object.keys(this.observingStaleness).forEach((id) => {
+                this.updateStaleness(id, false);
             });
         }
     }
 
-    #updateStaleness(id, isStale) {
-        this.#observingStaleness[id].isStale = isStale;
-        this.#observingStaleness[id].utc = Date.now();
-        this.#observingStaleness[id].callback({
-            isStale: this.#observingStaleness[id].isStale,
-            utc: this.#observingStaleness[id].utc
+    updateStaleness(id, isStale) {
+        this.observingStaleness[id].isStale = isStale;
+        this.observingStaleness[id].utc = Date.now();
+        this.observingStaleness[id].callback({
+            isStale: this.observingStaleness[id].isStale,
+            utc: this.observingStaleness[id].utc
         });
         this.emit('stalenessEvent', {
             id,
-            isStale: this.#observingStaleness[id].isStale
+            isStale: this.observingStaleness[id].isStale
         });
     }
 
-    #createObserver(id, callback) {
-        this.#observingStaleness[id] = {
+    createObserver(id, callback) {
+        this.observingStaleness[id] = {
             isStale: false,
             utc: Date.now()
         };
 
         if (typeof callback === 'function') {
-            this.#addCallbackToObserver(id, callback);
+            this.addCallbackToObserver(id, callback);
         }
     }
 
-    #destroyObserver(id) {
-        if (this.#observingStaleness[id]) {
-            delete this.#observingStaleness[id];
-        }
+    destroyObserver(id) {
+        delete this.observingStaleness[id];
     }
 
-    #providingStaleness(domainObject) {
-        return domainObject.telemetry?.staleness === true && this.#isRealTime;
+    providingStaleness(domainObject) {
+        return domainObject.telemetry?.staleness === true && this.isRealTime;
     }
 
-    #getObjectKeyString(object) {
-        return this.#openmct.objects.makeKeyString(object.identifier);
+    getObjectKeyString(object) {
+        return this.openmct.objects.makeKeyString(object.identifier);
     }
 
-    #addCallbackToObserver(id, callback) {
-        this.#observingStaleness[id].callback = callback;
+    addCallbackToObserver(id, callback) {
+        this.observingStaleness[id].callback = callback;
     }
 
-    #observerExists(id) {
-        return this.#observingStaleness?.[id];
+    observerExists(id) {
+        return this.observingStaleness?.[id];
     }
 }

example/imagery/plugin.js

@@ -275,7 +275,7 @@ function pointForTimestamp(timestamp, name, imageSamples, delay) {
         local: Math.floor(timestamp / delay) * delay,
         url,
         sunOrientation: getCompassValues(0, 360),
-        cameraAzimuth: getCompassValues(0, 360),
+        cameraPan: getCompassValues(0, 360),
         heading: getCompassValues(0, 360),
         transformations: navCamTransformations,
         imageDownloadName

package.json

@@ -1,6 +1,6 @@
 {
   "name": "openmct",
-  "version": "2.2.0-SNAPSHOT",
+  "version": "2.1.6-SNAPSHOT",
   "description": "The Open MCT core platform",
   "devDependencies": {
     "@babel/eslint-parser": "7.18.9",
@@ -20,8 +20,8 @@
     "d3-axis": "3.0.0",
     "d3-scale": "3.3.0",
     "d3-selection": "3.0.0",
-    "eslint": "8.34.0",
-    "eslint-plugin-compat": "4.1.1",
+    "eslint": "8.32.0",
+    "eslint-plugin-compat": "4.0.2",
     "eslint-plugin-playwright": "0.12.0",
     "eslint-plugin-vue": "9.9.0",
     "eslint-plugin-you-dont-need-lodash-underscore": "6.12.0",
@@ -60,7 +60,7 @@
     "sass-loader": "13.2.0",
     "sinon": "15.0.1",
     "style-loader": "^3.3.1",
-    "typescript": "4.9.5",
+    "typescript": "4.9.4",
     "uuid": "9.0.0",
     "vue": "2.6.14",
     "vue-eslint-parser": "9.1.0",

src/api/annotation/AnnotationAPI.js

@@ -84,7 +84,6 @@ export default class AnnotationAPI extends EventEmitter {
         super();
         this.openmct = openmct;
         this.availableTags = {};
-        this.namespaceToSaveAnnotations = '';
 
         this.ANNOTATION_TYPES = ANNOTATION_TYPES;
         this.ANNOTATION_TYPE = ANNOTATION_TYPE;
@@ -140,7 +139,7 @@ export default class AnnotationAPI extends EventEmitter {
         const domainObjectKeyString = this.openmct.objects.makeKeyString(domainObject.identifier);
         const originalPathObjects = await this.openmct.objects.getOriginalPath(domainObjectKeyString);
         const originalContextPath = this.openmct.objects.getRelativePath(originalPathObjects);
-        const namespace = this.namespaceToSaveAnnotations;
+        const namespace = domainObject.identifier.namespace;
         const type = 'annotation';
         const typeDefinition = this.openmct.types.get(type);
         const definition = typeDefinition.definition;
@@ -199,14 +198,6 @@ export default class AnnotationAPI extends EventEmitter {
         this.availableTags[tagKey] = tagsDefinition;
     }
 
-    /**
-    * @method setNamespaceToSaveAnnotations
-    * @param {String} namespace the namespace to save new annotations to
-    */
-    setNamespaceToSaveAnnotations(namespace) {
-        this.namespaceToSaveAnnotations = namespace;
-    }
-
     /**
     * @method isAnnotation
     * @param {DomainObject} domainObject the domainObject in question

src/api/annotation/AnnotationAPISpec.js

@@ -26,7 +26,6 @@ import ExampleTagsPlugin from "../../../example/exampleTags/plugin";
 describe("The Annotation API", () => {
     let openmct;
     let mockObjectProvider;
-    let mockImmutableObjectProvider;
     let mockDomainObject;
     let mockFolderObject;
     let mockAnnotationObject;
@@ -90,23 +89,6 @@ describe("The Annotation API", () => {
         mockObjectProvider.create.and.returnValue(Promise.resolve(true));
         mockObjectProvider.update.and.returnValue(Promise.resolve(true));
 
-        mockImmutableObjectProvider = jasmine.createSpyObj("mock immutable provider", [
-            "get"
-        ]);
-        // eslint-disable-next-line require-await
-        mockImmutableObjectProvider.get = async (identifier) => {
-            if (identifier.key === mockDomainObject.identifier.key) {
-                return mockDomainObject;
-            } else if (identifier.key === mockAnnotationObject.identifier.key) {
-                return mockAnnotationObject;
-            } else if (identifier.key === mockFolderObject.identifier.key) {
-                return mockFolderObject;
-            } else {
-                return null;
-            }
-        };
-
-        openmct.objects.addProvider('immutableProvider', mockImmutableObjectProvider);
         openmct.objects.addProvider('fooNameSpace', mockObjectProvider);
         openmct.on('start', done);
         openmct.startHeadless();
@@ -133,22 +115,6 @@ describe("The Annotation API", () => {
             expect(annotationObject).toBeDefined();
             expect(annotationObject.type).toEqual('annotation');
         });
-        it("can create annotations if domain object is immutable", async () => {
-            mockDomainObject.identifier.namespace = 'immutableProvider';
-            const annotationCreationArguments = {
-                name: 'Test Annotation',
-                domainObject: mockDomainObject,
-                annotationType: openmct.annotation.ANNOTATION_TYPES.NOTEBOOK,
-                tags: ['sometag'],
-                contentText: "fooContext",
-                targetDomainObjects: [mockDomainObject],
-                targets: {'fooTarget': {}}
-            };
-            openmct.annotation.setNamespaceToSaveAnnotations('fooNameSpace');
-            const annotationObject = await openmct.annotation.create(annotationCreationArguments);
-            expect(annotationObject).toBeDefined();
-            expect(annotationObject.type).toEqual('annotation');
-        });
         it("fails if annotation is an unknown type", async () => {
             try {
                 await openmct.annotation.create('Garbage Annotation', mockDomainObject, 'garbageAnnotation', ['sometag'], "fooContext", {'fooTarget': {}});
@@ -156,40 +122,6 @@ describe("The Annotation API", () => {
                 expect(error).toBeDefined();
             }
         });
-        it("fails if annotation if given an immutable namespace to save to", async () => {
-            try {
-                const annotationCreationArguments = {
-                    name: 'Test Annotation',
-                    domainObject: mockDomainObject,
-                    annotationType: openmct.annotation.ANNOTATION_TYPES.NOTEBOOK,
-                    tags: ['sometag'],
-                    contentText: "fooContext",
-                    targetDomainObjects: [mockDomainObject],
-                    targets: {'fooTarget': {}}
-                };
-                openmct.annotation.setNamespaceToSaveAnnotations('nameespaceThatDoesNotExist');
-                await openmct.annotation.create(annotationCreationArguments);
-            } catch (error) {
-                expect(error).toBeDefined();
-            }
-        });
-        it("fails if annotation if given an undefined namespace to save to", async () => {
-            try {
-                const annotationCreationArguments = {
-                    name: 'Test Annotation',
-                    domainObject: mockDomainObject,
-                    annotationType: openmct.annotation.ANNOTATION_TYPES.NOTEBOOK,
-                    tags: ['sometag'],
-                    contentText: "fooContext",
-                    targetDomainObjects: [mockDomainObject],
-                    targets: {'fooTarget': {}}
-                };
-                openmct.annotation.setNamespaceToSaveAnnotations('immutableProvider');
-                await openmct.annotation.create(annotationCreationArguments);
-            } catch (error) {
-                expect(error).toBeDefined();
-            }
-        });
     });
 
     describe("Tagging", () => {
@@ -217,6 +149,13 @@ describe("The Annotation API", () => {
             openmct.annotation.deleteAnnotations([annotationObject]);
             expect(annotationObject._deleted).toBeTrue();
         });
+        it("throws an error if deleting non-existent tag", async () => {
+            const annotationObject = await openmct.annotation.create(tagCreationArguments);
+            expect(annotationObject).toBeDefined();
+            expect(() => {
+                openmct.annotation.removeAnnotationTag(annotationObject, 'ThisTagShouldNotExist');
+            }).toThrow();
+        });
         it("can remove all tags", async () => {
             const annotationObject = await openmct.annotation.create(tagCreationArguments);
             expect(annotationObject).toBeDefined();

src/api/composition/CompositionAPISpec.js

@@ -1,35 +1,47 @@
-import { createOpenMct, resetApplicationState } from '../../utils/testing';
+import CompositionAPI from './CompositionAPI';
 import CompositionCollection from './CompositionCollection';
 
 describe('The Composition API', function () {
     let publicAPI;
     let compositionAPI;
+    let topicService;
+    let mutationTopic;
 
-    beforeEach(function (done) {
-        publicAPI = createOpenMct();
-        compositionAPI = publicAPI.composition;
+    beforeEach(function () {
 
-        const mockObjectProvider = jasmine.createSpyObj("mock provider", [
-            "create",
-            "update",
-            "get"
+        mutationTopic = jasmine.createSpyObj('mutationTopic', [
+            'listen'
+        ]);
+        topicService = jasmine.createSpy('topicService');
+        topicService.and.returnValue(mutationTopic);
+        publicAPI = {};
+        publicAPI.objects = jasmine.createSpyObj('ObjectAPI', [
+            'get',
+            'mutate',
+            'observe',
+            'areIdsEqual'
         ]);
 
-        mockObjectProvider.create.and.returnValue(Promise.resolve(true));
-        mockObjectProvider.update.and.returnValue(Promise.resolve(true));
-        mockObjectProvider.get.and.callFake((identifier) => {
-            return Promise.resolve({identifier});
+        publicAPI.objects.areIdsEqual.and.callFake(function (id1, id2) {
+            return id1.namespace === id2.namespace && id1.key === id2.key;
         });
 
-        publicAPI.objects.addProvider('test', mockObjectProvider);
-        publicAPI.objects.addProvider('custom', mockObjectProvider);
+        publicAPI.composition = jasmine.createSpyObj('CompositionAPI', [
+            'checkPolicy'
+        ]);
+        publicAPI.composition.checkPolicy.and.returnValue(true);
 
-        publicAPI.on('start', done);
-        publicAPI.startHeadless();
-    });
-
-    afterEach(() => {
-        return resetApplicationState(publicAPI);
+        publicAPI.objects.eventEmitter = jasmine.createSpyObj('eventemitter', [
+            'on'
+        ]);
+        publicAPI.objects.get.and.callFake(function (identifier) {
+            return Promise.resolve({identifier: identifier});
+        });
+        publicAPI.$injector = jasmine.createSpyObj('$injector', [
+            'get'
+        ]);
+        publicAPI.$injector.get.and.returnValue(topicService);
+        compositionAPI = new CompositionAPI(publicAPI);
     });
 
     it('returns falsy if an object does not support composition', function () {
@@ -94,9 +106,6 @@ describe('The Composition API', function () {
             let listener;
             beforeEach(function () {
                 listener = jasmine.createSpy('reorderListener');
-                spyOn(publicAPI.objects, 'mutate');
-                publicAPI.objects.mutate.and.callThrough();
-
                 composition.on('reorder', listener);
 
                 return composition.load();
@@ -127,20 +136,18 @@ describe('The Composition API', function () {
             });
         });
         it('supports adding an object to composition', function () {
+            let addListener = jasmine.createSpy('addListener');
             let mockChildObject = {
                 identifier: {
                     key: 'mock-key',
                     namespace: ''
                 }
             };
+            composition.on('add', addListener);
+            composition.add(mockChildObject);
 
-            return new Promise((resolve) => {
-                composition.on('add', resolve);
-                composition.add(mockChildObject);
-            }).then(() => {
-                expect(domainObject.composition.length).toBe(4);
-                expect(domainObject.composition[3]).toEqual(mockChildObject.identifier);
-            });
+            expect(domainObject.composition.length).toBe(4);
+            expect(domainObject.composition[3]).toEqual(mockChildObject.identifier);
         });
     });
 

src/api/composition/CompositionCollection.js

@@ -20,6 +20,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
+import EventEmitter from 'EventEmitter';
 /**
  * @typedef {import('../objects/ObjectAPI').DomainObject} DomainObject
  */
@@ -60,6 +61,10 @@ export default class CompositionCollection {
     #publicAPI;
     #listeners;
     #mutables;
+    #onGlobalAdd;
+    #onGlobalRemove;
+    static #globalEvents = new EventEmitter();
+
     /**
      * @constructor
      * @param {DomainObject} domainObject the domain object
@@ -95,6 +100,21 @@ export default class CompositionCollection {
                 unobserve();
             });
         }
+
+        const keyString = publicAPI.objects.makeKeyString(domainObject.identifier);
+        this.#onGlobalAdd = this._onGlobalAdd.bind(this);
+        this.#onGlobalRemove = this._onGlobalRemove.bind(this);
+
+        CompositionCollection.#globalEvents.on(`add:${keyString}`, this.#onGlobalAdd);
+        CompositionCollection.#globalEvents.on(`remove:${keyString}`, this.#onGlobalRemove);
+    }
+
+    _onGlobalAdd(object) {
+        this.#emit('add', object);
+    }
+
+    _onGlobalRemove(identifier) {
+        this.#emit('remove', identifier);
     }
     /**
      * Listen for changes to this composition.  Supports 'add', 'remove', and
@@ -209,23 +229,21 @@ export default class CompositionCollection {
      * **Intended for internal use ONLY.**
      * true if the underlying provider should not be updated.
      */
-    add(child, skipMutate) {
-        if (!skipMutate) {
-            if (!this.#publicAPI.composition.checkPolicy(this.domainObject, child)) {
-                throw `Object of type ${child.type} cannot be added to object of type ${this.domainObject.type}`;
-            }
-
-            this.#provider.add(this.domainObject, child.identifier);
-        } else {
-            if (this.returnMutables && this.#publicAPI.objects.supportsMutation(child.identifier)) {
-                let keyString = this.#publicAPI.objects.makeKeyString(child.identifier);
-
-                child = this.#publicAPI.objects.toMutable(child);
-                this.#mutables[keyString] = child;
-            }
-
-            this.#emit('add', child);
+    add(child) {
+        if (!this.#publicAPI.composition.checkPolicy(this.domainObject, child)) {
+            throw `Object of type ${child.type} cannot be added to object of type ${this.domainObject.type}`;
         }
+
+        this.#provider.add(this.domainObject, child.identifier);
+        if (this.returnMutables && this.#publicAPI.objects.supportsMutation(child.identifier)) {
+            let keyString = this.#publicAPI.objects.makeKeyString(child.identifier);
+
+            child = this.#publicAPI.objects.toMutable(child);
+            this.#mutables[keyString] = child;
+        }
+
+        // const keyString = this.#publicAPI.objects.makeKeyString(this.domainObject.identifier);
+        // CompositionCollection.#globalEvents.emit(`add:${keyString}`, child);
     }
     /**
      * Load the domain objects in this composition.
@@ -240,7 +258,12 @@ 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)));
-        childObjects.forEach(c => this.add(c, true));
+        childObjects.forEach(c => {
+            this.add(c);
+
+            const keyString = this.#publicAPI.objects.makeKeyString(this.domainObject.identifier);
+            CompositionCollection.#globalEvents.emit(`add:${keyString}`, c);
+        });
         this.#emit('load');
 
         return childObjects;
@@ -259,20 +282,18 @@ export default class CompositionCollection {
      * true if the underlying provider should not be updated.
      * @name remove
      */
-    remove(child, skipMutate) {
-        if (!skipMutate) {
-            this.#provider.remove(this.domainObject, child.identifier);
-        } else {
-            if (this.returnMutables) {
-                let keyString = this.#publicAPI.objects.makeKeyString(child);
-                if (this.#mutables[keyString] !== undefined && this.#mutables[keyString].isMutable) {
-                    this.#publicAPI.objects.destroyMutable(this.#mutables[keyString]);
-                    delete this.#mutables[keyString];
-                }
+    remove(child) {
+        this.#provider.remove(this.domainObject, child.identifier);
+        if (this.returnMutables) {
+            let keyString = this.#publicAPI.objects.makeKeyString(child);
+            if (this.#mutables[keyString] !== undefined && this.#mutables[keyString].isMutable) {
+                this.#publicAPI.objects.destroyMutable(this.#mutables[keyString]);
+                delete this.#mutables[keyString];
             }
-
-            this.#emit('remove', child);
         }
+
+        // const keyString = this.#publicAPI.objects.makeKeyString(this.domainObject.identifier);
+        // CompositionCollection.#globalEvents.emit(`remove:${keyString}`, child.identifier);
     }
     /**
      * Reorder the domain objects in this composition.
@@ -295,6 +316,10 @@ export default class CompositionCollection {
             this.mutationListener();
             delete this.mutationListener;
         }
+
+        const keyString = this.#publicAPI.objects.makeKeyString(this.domainObject.identifier);
+        CompositionCollection.#globalEvents.off(`add:${keyString}`, this.#onGlobalAdd);
+        CompositionCollection.#globalEvents.off(`remove:${keyString}`, this.#onGlobalRemove);
     }
     /**
      * Handle reorder from provider.

src/api/composition/CompositionProvider.js

@@ -71,10 +71,6 @@ export default class CompositionProvider {
         return this.#listeningTo;
     }
 
-    get establishTopicListener() {
-        return this.#establishTopicListener.bind(this);
-    }
-
     get publicAPI() {
         return this.#publicAPI;
     }
@@ -181,22 +177,6 @@ export default class CompositionProvider {
         throw new Error("This method must be implemented by a subclass.");
     }
 
-    /**
-      * Listens on general mutation topic, using injector to fetch to avoid
-      * circular dependencies.
-      * @private
-      */
-    #establishTopicListener() {
-        if (this.topicListener) {
-            return;
-        }
-
-        this.#publicAPI.objects.eventEmitter.on('mutation', this.#onMutation.bind(this));
-        this.topicListener = () => {
-            this.#publicAPI.objects.eventEmitter.off('mutation', this.#onMutation.bind(this));
-        };
-    }
-
     /**
       * @private
       * @param {DomainObject} parent
@@ -216,45 +196,5 @@ export default class CompositionProvider {
     #supportsComposition(parent, _child) {
         return this.#publicAPI.composition.supportsComposition(parent);
     }
-
-    /**
-      * Handles mutation events.  If there are active listeners for the mutated
-      * object, detects changes to composition and triggers necessary events.
-      *
-      * @private
-      * @param {DomainObject} oldDomainObject
-      */
-    #onMutation(newDomainObject, oldDomainObject) {
-        const id = objectUtils.makeKeyString(oldDomainObject.identifier);
-        const listeners = this.#listeningTo[id];
-
-        if (!listeners) {
-            return;
-        }
-
-        const oldComposition = oldDomainObject.composition.map(objectUtils.makeKeyString);
-        const newComposition = newDomainObject.composition.map(objectUtils.makeKeyString);
-
-        const added = _.difference(newComposition, oldComposition).map(objectUtils.parseKeyString);
-        const removed = _.difference(oldComposition, newComposition).map(objectUtils.parseKeyString);
-
-        function notify(value) {
-            return function (listener) {
-                if (listener.context) {
-                    listener.callback.call(listener.context, value);
-                } else {
-                    listener.callback(value);
-                }
-            };
-        }
-
-        added.forEach(function (addedChild) {
-            listeners.add.forEach(notify(addedChild));
-        });
-
-        removed.forEach(function (removedChild) {
-            listeners.remove.forEach(notify(removedChild));
-        });
-    }
 }
 

src/api/composition/DefaultCompositionProvider.js

@@ -89,7 +89,7 @@ export default class DefaultCompositionProvider extends CompositionProvider {
         event,
         callback,
         context) {
-        this.establishTopicListener();
+        //this.establishTopicListener();
 
         /** @type {string} */
         const keyString = objectUtils.makeKeyString(domainObject.identifier);
@@ -99,7 +99,8 @@ export default class DefaultCompositionProvider extends CompositionProvider {
             objectListeners = this.listeningTo[keyString] = {
                 add: [],
                 remove: [],
-                reorder: []
+                reorder: [],
+                composition: [].slice.apply(domainObject.composition)
             };
         }
 
@@ -156,6 +157,8 @@ export default class DefaultCompositionProvider extends CompositionProvider {
         });
 
         this.publicAPI.objects.mutate(domainObject, 'composition', composition);
+
+        this.objectListeners.remove?.forEach(listener => listener.callback.apply(listener.context, childId));
     }
     /**
      * Add a domain object to another domain object's composition.
@@ -171,9 +174,10 @@ export default class DefaultCompositionProvider extends CompositionProvider {
      */
     add(parent, childId) {
         if (!this.includes(parent, childId)) {
-            const composition = structuredClone(parent.composition);
-            composition.push(childId);
-            this.publicAPI.objects.mutate(parent, 'composition', composition);
+            parent.composition.push(childId);
+            this.publicAPI.objects.mutate(parent, 'composition', parent.composition);
+
+            this.objectListeners.add?.forEach(listener => listener.callback.apply(listener.context, childId));
         }
     }
 

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

@@ -42,7 +42,7 @@
         ></div>
     </div>
     <div
-        v-if="!hideOptions && filteredOptions.length > 0"
+        v-if="!hideOptions"
         class="c-menu c-input--autocomplete__options"
         aria-label="Autocomplete Options"
         @blur="hideOptions = true"
@@ -230,10 +230,10 @@ export default {
             this.showFilteredOptions = false;
             this.autocompleteInputElement.select();
 
-            if (!this.hideOptions && this.filteredOptions.length > 0) {
-                this.hideOptions = true;
-            } else {
+            if (this.hideOptions) {
                 this.showOptions();
+            } else {
+                this.hideOptions = true;
             }
 
         },
@@ -242,7 +242,6 @@ export default {
             // dropdown is visible, this will collapse the dropdown.
             const clickedInsideAutocomplete = this.autocompleteInputAndArrow.contains(event.target);
             if (!clickedInsideAutocomplete && !this.hideOptions) {
-                this.$emit('autoCompleteBlur');
                 this.hideOptions = true;
             }
         },

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

@@ -22,6 +22,7 @@
 
 <template>
 <mct-tree
+    id="locator-tree"
     :is-selector-tree="true"
     :initial-selection="model.parent"
     @tree-item-selection="handleItemSelection"

src/api/objects/MutableDomainObject.js

@@ -75,23 +75,21 @@ class MutableDomainObject {
         return eventOff;
     }
     $set(path, value) {
-        const oldModel = JSON.parse(JSON.stringify(this));
-        const oldValue = _.get(oldModel, path);
         MutableDomainObject.mutateObject(this, path, value);
 
         //Emit secret synchronization event first, so that all objects are in sync before subsequent events fired.
         this._globalEventEmitter.emit(qualifiedEventName(this, '$_synchronize_model'), this);
 
         //Emit a general "any object" event
-        this._globalEventEmitter.emit(ANY_OBJECT_EVENT, this, oldModel);
+        this._globalEventEmitter.emit(ANY_OBJECT_EVENT, this);
         //Emit wildcard event, with path so that callback knows what changed
-        this._globalEventEmitter.emit(qualifiedEventName(this, '*'), this, path, value, oldModel, oldValue);
+        this._globalEventEmitter.emit(qualifiedEventName(this, '*'), this, path, value);
 
         //Emit events specific to properties affected
         let parentPropertiesList = path.split('.');
         for (let index = parentPropertiesList.length; index > 0; index--) {
             let parentPropertyPath = parentPropertiesList.slice(0, index).join('.');
-            this._globalEventEmitter.emit(qualifiedEventName(this, parentPropertyPath), _.get(this, parentPropertyPath), _.get(oldModel, parentPropertyPath));
+            this._globalEventEmitter.emit(qualifiedEventName(this, parentPropertyPath), _.get(this, parentPropertyPath));
         }
 
         //TODO: Emit events for listeners of child properties when parent changes.

src/api/objects/ObjectAPI.js

@@ -225,21 +225,24 @@ export default class ObjectAPI {
             throw new Error('Provider does not support get!');
         }
 
-        let objectPromise = provider.get(identifier, abortSignal).then(domainObject => {
+        let objectPromise = provider.get(identifier, abortSignal).then(result => {
             delete this.cache[keystring];
-            domainObject = this.applyGetInterceptors(identifier, domainObject);
 
-            if (this.supportsMutation(identifier)) {
-                const mutableDomainObject = this.toMutable(domainObject);
-                mutableDomainObject.$refresh(domainObject);
-                this.destroyMutable(mutableDomainObject);
+            result = this.applyGetInterceptors(identifier, result);
+            if (result.isMutable) {
+                result.$refresh(result);
+            } else {
+                let mutableDomainObject = this.toMutable(result);
+                mutableDomainObject.$refresh(result);
             }
 
-            return domainObject;
-        }).catch((error) => {
-            console.warn(`Failed to retrieve ${keystring}:`, error);
+            return result;
+        }).catch((result) => {
+            console.warn(`Failed to retrieve ${keystring}:`, result);
+
             delete this.cache[keystring];
-            const result = this.applyGetInterceptors(identifier);
+
+            result = this.applyGetInterceptors(identifier);
 
             return result;
         });
@@ -645,7 +648,7 @@ export default class ObjectAPI {
      * @param {module:openmct.DomainObject} object the object to observe
      * @param {string} path the property to observe
      * @param {Function} callback a callback to invoke when new values for
-     *        this property are observed.
+     *        this property are observed
      * @method observe
      * @memberof module:openmct.ObjectAPI#
      */

src/api/objects/ObjectAPISpec.js

@@ -399,7 +399,7 @@ describe("The Object API", () => {
                     unlisten = objectAPI.observe(mutableSecondInstance, 'otherAttribute', mutationCallback);
                     objectAPI.mutate(mutable, 'otherAttribute', 'some-new-value');
                 }).then(function () {
-                    expect(mutationCallback).toHaveBeenCalledWith('some-new-value', 'other-attribute-value');
+                    expect(mutationCallback).toHaveBeenCalledWith('some-new-value');
                     unlisten();
                 });
             });
@@ -419,20 +419,14 @@ describe("The Object API", () => {
 
                     objectAPI.mutate(mutable, 'objectAttribute.embeddedObject.embeddedKey', 'updated-embedded-value');
                 }).then(function () {
-                    expect(embeddedKeyCallback).toHaveBeenCalledWith('updated-embedded-value', 'embedded-value');
+                    expect(embeddedKeyCallback).toHaveBeenCalledWith('updated-embedded-value');
                     expect(embeddedObjectCallback).toHaveBeenCalledWith({
                         embeddedKey: 'updated-embedded-value'
-                    }, {
-                        embeddedKey: 'embedded-value'
                     });
                     expect(objectAttributeCallback).toHaveBeenCalledWith({
                         embeddedObject: {
                             embeddedKey: 'updated-embedded-value'
                         }
-                    }, {
-                        embeddedObject: {
-                            embeddedKey: 'embedded-value'
-                        }
                     });
 
                     listeners.forEach(listener => listener());

src/api/overlays/components/OverlayComponent.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="c-overlay js-overlay">
+<div class="c-overlay">
     <div
         class="c-overlay__blocker"
         @click="destroy"
@@ -26,7 +26,7 @@
                 v-for="(button, index) in buttons"
                 ref="buttons"
                 :key="index"
-                class="c-button js-overlay__button"
+                class="c-button"
                 tabindex="0"
                 :class="{'c-button--major': focusIndex===index}"
                 @focus="focusIndex=index"

src/api/telemetry/TelemetryCollection.js

@@ -180,7 +180,6 @@ export default class TelemetryCollection extends EventEmitter {
         let beforeStartOfBounds;
         let afterEndOfBounds;
         let added = [];
-        let addedIndices = [];
 
         // loop through, sort and dedupe
         for (let datum of data) {
@@ -213,7 +212,6 @@ export default class TelemetryCollection extends EventEmitter {
                     let index = endIndex || startIndex;
 
                     this.boundedTelemetry.splice(index, 0, datum);
-                    addedIndices.push(index);
                     added.push(datum);
                 }
 
@@ -232,7 +230,7 @@ export default class TelemetryCollection extends EventEmitter {
                     this.emit('add', this.boundedTelemetry);
                 }
             } else {
-                this.emit('add', added, addedIndices);
+                this.emit('add', added);
             }
         }
     }
@@ -332,8 +330,7 @@ export default class TelemetryCollection extends EventEmitter {
                     this.boundedTelemetry = added;
                 }
 
-                // Assumption is that added will be of length 1 here, so just send the last index of the boundedTelemetry in the add event
-                this.emit('add', added, [this.boundedTelemetry.length]);
+                this.emit('add', added);
             }
         } else {
             // user bounds change, reset

src/api/time/IndependentTimeContext.js

@@ -32,18 +32,14 @@ class IndependentTimeContext extends TimeContext {
         this.openmct = openmct;
         this.unlisteners = [];
         this.globalTimeContext = globalTimeContext;
-        // We always start with the global time context.
-        // This upstream context will be undefined when an independent time context is added later.
-        this.upstreamTimeContext = this.globalTimeContext;
+        this.upstreamTimeContext = undefined;
         this.objectPath = objectPath;
         this.refreshContext = this.refreshContext.bind(this);
         this.resetContext = this.resetContext.bind(this);
-        this.removeIndependentContext = this.removeIndependentContext.bind(this);
 
         this.refreshContext();
 
         this.globalTimeContext.on('refreshContext', this.refreshContext);
-        this.globalTimeContext.on('removeOwnContext', this.removeIndependentContext);
     }
 
     bounds(newBounds) {
@@ -206,16 +202,16 @@ class IndependentTimeContext extends TimeContext {
     }
 
     getUpstreamContext() {
-        // If a view has an independent context, don't return an upstream context
-        // Be aware that when a new independent time context is created, we assign the global context as default
-        if (this.hasOwnContext()) {
+        const objectKey = this.openmct.objects.makeKeyString(this.objectPath[this.objectPath.length - 1].identifier);
+        const doesObjectHaveTimeContext = this.globalTimeContext.independentContexts.get(objectKey);
+        if (doesObjectHaveTimeContext) {
             return undefined;
         }
 
         let timeContext = this.globalTimeContext;
         this.objectPath.some((item, index) => {
             const key = this.openmct.objects.makeKeyString(item.identifier);
-            // we're only interested in parents, not self, so index > 0
+            //last index is the view object itself
             const itemContext = this.globalTimeContext.independentContexts.get(key);
             if (index > 0 && itemContext && itemContext.hasOwnContext()) {
                 //upstream time context
@@ -229,43 +225,6 @@ class IndependentTimeContext extends TimeContext {
 
         return timeContext;
     }
-
-    /**
-     * Set the time context of a view to follow any upstream time contexts as necessary (defaulting to the global context)
-     * This needs to be separate from refreshContext
-     */
-    removeIndependentContext(viewKey) {
-        const key = this.openmct.objects.makeKeyString(this.objectPath[0].identifier);
-        if (viewKey && key === viewKey) {
-            //this is necessary as the upstream context gets reassigned after this
-            this.stopFollowingTimeContext();
-
-            let timeContext = this.globalTimeContext;
-
-            this.objectPath.some((item, index) => {
-                const objectKey = this.openmct.objects.makeKeyString(item.identifier);
-                // we're only interested in any parents, not self, so index > 0
-                const itemContext = this.globalTimeContext.independentContexts.get(objectKey);
-                if (index > 0 && itemContext && itemContext.hasOwnContext()) {
-                    //upstream time context
-                    timeContext = itemContext;
-
-                    return true;
-                }
-
-                return false;
-            });
-
-            this.upstreamTimeContext = timeContext;
-
-            this.followTimeContext();
-
-            // Emit bounds so that views that are changing context get the upstream bounds
-            this.emit('bounds', this.bounds());
-            // 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);
-        }
-    }
 }
 
 export default IndependentTimeContext;

src/api/time/TimeAPI.js

@@ -149,7 +149,7 @@ class TimeAPI extends GlobalTimeContext {
 
         return () => {
             //follow any upstream time context
-            this.emit('removeOwnContext', key);
+            this.emit('refreshContext');
         };
     }
 

src/api/time/independentTimeAPISpec.js

@@ -93,82 +93,21 @@ describe("The Independent Time API", function () {
     });
 
     it("follows a parent time context given the objectPath", () => {
-        api.getContextForView([{
-            identifier: {
-                namespace: '',
-                key: 'blah'
-            }
-        }]);
-        let destroyTimeContext = api.addIndependentContext('blah', independentBounds);
         let timeContext = api.getContextForView([{
             identifier: {
                 namespace: '',
-                key: domainObjectKey
+                key: 'blah'
             }
         }, {
-            identifier: {
-                namespace: '',
-                key: 'blah'
-            }
-        }]);
-        expect(timeContext.bounds()).toEqual(independentBounds);
-        destroyTimeContext();
-        expect(timeContext.bounds()).toEqual(bounds);
-    });
-
-    it("uses an object's independent time context if the parent doesn't have one", () => {
-        const domainObjectKey2 = `${domainObjectKey}-2`;
-        const domainObjectKey3 = `${domainObjectKey}-3`;
-        let timeContext = api.getContextForView([{
             identifier: {
                 namespace: '',
                 key: domainObjectKey
             }
         }]);
-        let timeContext2 = api.getContextForView([{
-            identifier: {
-                namespace: '',
-                key: domainObjectKey2
-            }
-        }]);
-        let timeContext3 = api.getContextForView([{
-            identifier: {
-                namespace: '',
-                key: domainObjectKey3
-            }
-        }]);
-        // all bounds follow global time context
-        expect(timeContext.bounds()).toEqual(bounds);
-        expect(timeContext2.bounds()).toEqual(bounds);
-        expect(timeContext3.bounds()).toEqual(bounds);
-        // only first item has own context
-        let destroyTimeContext = api.addIndependentContext(domainObjectKey, independentBounds);
+        let destroyTimeContext = api.addIndependentContext('blah', independentBounds);
         expect(timeContext.bounds()).toEqual(independentBounds);
-        expect(timeContext2.bounds()).toEqual(bounds);
-        expect(timeContext3.bounds()).toEqual(bounds);
-        // first and second item have own context
-        let destroyTimeContext2 = api.addIndependentContext(domainObjectKey2, independentBounds);
-        expect(timeContext.bounds()).toEqual(independentBounds);
-        expect(timeContext2.bounds()).toEqual(independentBounds);
-        expect(timeContext3.bounds()).toEqual(bounds);
-        // all items have own time context
-        let destroyTimeContext3 = api.addIndependentContext(domainObjectKey3, independentBounds);
-        expect(timeContext.bounds()).toEqual(independentBounds);
-        expect(timeContext2.bounds()).toEqual(independentBounds);
-        expect(timeContext3.bounds()).toEqual(independentBounds);
-        //remove own contexts one at a time - should revert to global time context
         destroyTimeContext();
         expect(timeContext.bounds()).toEqual(bounds);
-        expect(timeContext2.bounds()).toEqual(independentBounds);
-        expect(timeContext3.bounds()).toEqual(independentBounds);
-        destroyTimeContext2();
-        expect(timeContext.bounds()).toEqual(bounds);
-        expect(timeContext2.bounds()).toEqual(bounds);
-        expect(timeContext3.bounds()).toEqual(independentBounds);
-        destroyTimeContext3();
-        expect(timeContext.bounds()).toEqual(bounds);
-        expect(timeContext2.bounds()).toEqual(bounds);
-        expect(timeContext3.bounds()).toEqual(bounds);
     });
 
     it("Allows setting of valid bounds", function () {

src/plugins/LADTable/components/LadTableSet.vue

@@ -48,11 +48,11 @@
                 </tr>
                 <lad-row
                     v-for="ladRow in ladTelemetryObjects[ladTable.key]"
-                    :key="combineKeys(ladTable.key, ladRow.key)"
+                    :key="ladRow.key"
                     :domain-object="ladRow.domainObject"
                     :path-to-table="ladTable.objectPath"
                     :has-units="hasUnits"
-                    :is-stale="staleObjects.includes(combineKeys(ladTable.key, ladRow.key))"
+                    :is-stale="staleObjects.includes(ladRow.key)"
                     @rowContextClick="updateViewContext"
                 />
             </template>
@@ -160,18 +160,10 @@ export default {
                 removeCallback
             });
         },
-        combineKeys(ladKey, telemetryObjectKey) {
-            return `${ladKey}-${telemetryObjectKey}`;
-        },
         removeLadTable(identifier) {
             let index = this.ladTableObjects.findIndex(ladTable => this.openmct.objects.makeKeyString(identifier) === ladTable.key);
             let ladTable = this.ladTableObjects[index];
 
-            this.ladTelemetryObjects[ladTable.key].forEach(telemetryObject => {
-                let combinedKey = this.combineKeys(ladTable.key, telemetryObject.key);
-                this.unwatchStaleness(combinedKey);
-            });
-
             this.$delete(this.ladTelemetryObjects, ladTable.key);
             this.ladTableObjects.splice(index, 1);
         },
@@ -186,58 +178,59 @@ export default {
                 let telemetryObject = {};
                 telemetryObject.key = this.openmct.objects.makeKeyString(domainObject.identifier);
                 telemetryObject.domainObject = domainObject;
-                const combinedKey = this.combineKeys(ladTable.key, telemetryObject.key);
 
-                const telemetryObjects = this.ladTelemetryObjects[ladTable.key];
+                let telemetryObjects = this.ladTelemetryObjects[ladTable.key];
                 telemetryObjects.push(telemetryObject);
 
                 this.$set(this.ladTelemetryObjects, ladTable.key, telemetryObjects);
 
-                this.stalenessSubscription[combinedKey] = {};
-                this.stalenessSubscription[combinedKey].stalenessUtils = new StalenessUtils(this.openmct, domainObject);
+                // if tracking already, possibly in another table, return
+                if (this.stalenessSubscription[telemetryObject.key]) {
+                    return;
+                } else {
+                    this.stalenessSubscription[telemetryObject.key] = {};
+                    this.stalenessSubscription[telemetryObject.key].stalenessUtils = new StalenessUtils(this.openmct, domainObject);
+                }
 
                 this.openmct.telemetry.isStale(domainObject).then((stalenessResponse) => {
                     if (stalenessResponse !== undefined) {
-                        this.handleStaleness(combinedKey, stalenessResponse);
+                        this.handleStaleness(telemetryObject.key, stalenessResponse);
                     }
                 });
                 const stalenessSubscription = this.openmct.telemetry.subscribeToStaleness(domainObject, (stalenessResponse) => {
-                    this.handleStaleness(combinedKey, stalenessResponse);
+                    this.handleStaleness(telemetryObject.key, stalenessResponse);
                 });
 
-                this.stalenessSubscription[combinedKey].unsubscribe = stalenessSubscription;
+                this.stalenessSubscription[telemetryObject.key].unsubscribe = stalenessSubscription;
             };
         },
         removeTelemetryObject(ladTable) {
             return (identifier) => {
+                const SKIP_CHECK = true;
                 const keystring = this.openmct.objects.makeKeyString(identifier);
-                const telemetryObjects = this.ladTelemetryObjects[ladTable.key];
-                const combinedKey = this.combineKeys(ladTable.key, keystring);
+                let telemetryObjects = this.ladTelemetryObjects[ladTable.key];
                 let index = telemetryObjects.findIndex(telemetryObject => keystring === telemetryObject.key);
 
-                this.unwatchStaleness(combinedKey);
-
                 telemetryObjects.splice(index, 1);
+
                 this.$set(this.ladTelemetryObjects, ladTable.key, telemetryObjects);
+
+                this.stalenessSubscription[keystring].unsubscribe();
+                this.stalenessSubscription[keystring].stalenessUtils.destroy();
+                this.handleStaleness(keystring, { isStale: false }, SKIP_CHECK);
             };
         },
-        unwatchStaleness(combinedKey) {
-            const SKIP_CHECK = true;
-
-            this.stalenessSubscription[combinedKey].unsubscribe();
-            this.stalenessSubscription[combinedKey].stalenessUtils.destroy();
-            this.handleStaleness(combinedKey, { isStale: false }, SKIP_CHECK);
-
-            delete this.stalenessSubscription[combinedKey];
-        },
-        handleStaleness(combinedKey, stalenessResponse, skipCheck = false) {
-            if (skipCheck || this.stalenessSubscription[combinedKey].stalenessUtils.shouldUpdateStaleness(stalenessResponse)) {
-                const index = this.staleObjects.indexOf(combinedKey);
-                const foundStaleObject = index > -1;
-                if (stalenessResponse.isStale && !foundStaleObject) {
-                    this.staleObjects.push(combinedKey);
-                } else if (!stalenessResponse.isStale && foundStaleObject) {
-                    this.staleObjects.splice(index, 1);
+        handleStaleness(id, stalenessResponse, skipCheck = false) {
+            if (skipCheck || this.stalenessSubscription[id].stalenessUtils.shouldUpdateStaleness(stalenessResponse)) {
+                const index = this.staleObjects.indexOf(id);
+                if (stalenessResponse.isStale) {
+                    if (index === -1) {
+                        this.staleObjects.push(id);
+                    }
+                } else {
+                    if (index !== -1) {
+                        this.staleObjects.splice(index, 1);
+                    }
                 }
             }
         },

src/plugins/URLTimeSettingsSynchronizer/pluginSpec.js

@@ -121,8 +121,7 @@ describe("The URLTimeSettingsSynchronizer", () => {
         openmct.router.on('change:hash', resolveFunction);
     });
 
-    // disabling due to test flakiness
-    xit("reset hash", (done) => {
+    it("reset hash", (done) => {
         window.location.hash = oldHash;
         resolveFunction = () => {
             expect(window.location.hash).toBe(oldHash);

src/plugins/condition/components/ConditionCollection.vue

@@ -232,12 +232,10 @@ export default {
             this.stalenessSubscription[keyString].stalenessUtils = new StalenessUtils(this.openmct, domainObject);
 
             this.openmct.telemetry.isStale(domainObject).then((stalenessResponse) => {
-                if (stalenessResponse !== undefined) {
-                    this.handleStaleness(keyString, stalenessResponse);
-                }
+                this.hanldeStaleness(keyString, stalenessResponse);
             });
             const stalenessSubscription = this.openmct.telemetry.subscribeToStaleness(domainObject, (stalenessResponse) => {
-                this.handleStaleness(keyString, stalenessResponse);
+                this.hanldeStaleness(keyString, stalenessResponse);
             });
 
             this.stalenessSubscription[keyString].unsubscribe = stalenessSubscription;
@@ -261,10 +259,9 @@ export default {
                     keyString,
                     isStale: false
                 });
-                delete this.stalenessSubscription[keyString];
             }
         },
-        handleStaleness(keyString, stalenessResponse) {
+        hanldeStaleness(keyString, stalenessResponse) {
             if (this.stalenessSubscription[keyString].stalenessUtils.shouldUpdateStaleness(stalenessResponse)) {
                 this.emitStaleness({
                     keyString,

src/plugins/condition/criterion/AllTelemetryCriterion.js

@@ -83,11 +83,6 @@ export default class AllTelemetryCriterion extends TelemetryCriterion {
             if (!this.stalenessSubscription[id]) {
                 this.stalenessSubscription[id] = {};
                 this.stalenessSubscription[id].stalenessUtils = new StalenessUtils(this.openmct, telemetryObject);
-                this.openmct.telemetry.isStale(telemetryObject).then((stalenessResponse) => {
-                    if (stalenessResponse !== undefined) {
-                        this.handleStaleTelemetry(id, stalenessResponse);
-                    }
-                });
                 this.stalenessSubscription[id].unsubscribe = this.openmct.telemetry.subscribeToStaleness(
                     telemetryObject,
                     (stalenessResponse) => {

src/plugins/formActions/CreateAction.js

@@ -59,7 +59,7 @@ export default class CreateAction extends PropertiesAction {
             _.set(this.domainObject, key, value);
         });
 
-        const parentDomainObject = this.openmct.objects.toMutable(parentDomainObjectPath[0]);
+        const parentDomainObject = parentDomainObjectPath[0];
 
         this.domainObject.modified = Date.now();
         this.domainObject.location = this.openmct.objects.makeKeyString(parentDomainObject.identifier);
@@ -85,7 +85,6 @@ export default class CreateAction extends PropertiesAction {
             console.error(err);
             this.openmct.notifications.error(`Error saving objects: ${err}`);
         } finally {
-            this.openmct.objects.destroyMutable(parentDomainObject);
             dialog.dismiss();
         }
 
@@ -143,21 +142,18 @@ export default class CreateAction extends PropertiesAction {
             }
         };
 
-        this.domainObject = this.openmct.objects.toMutable(domainObject);
+        this.domainObject = domainObject;
 
         if (definition.initialize) {
-            definition.initialize(this.domainObject);
+            definition.initialize(domainObject);
         }
 
-        const createWizard = new CreateWizard(this.openmct, this.domainObject, this.parentDomainObject);
+        const createWizard = new CreateWizard(this.openmct, domainObject, this.parentDomainObject);
         const formStructure = createWizard.getFormStructure(true);
         formStructure.title = 'Create a New ' + definition.name;
 
         this.openmct.forms.showForm(formStructure)
             .then(this._onSave.bind(this))
-            .catch(this._onCancel.bind(this))
-            .finally(() => {
-                this.openmct.objects.destroyMutable(this.domainObject);
-            });
+            .catch(this._onCancel.bind(this));
     }
 }

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

@@ -26,23 +26,18 @@
     :style="`width: 100%; height: 100%`"
 >
     <CompassHUD
-        :camera-angle-of-view="cameraAngleOfView"
-        :heading="heading"
-        :camera-azimuth="cameraAzimuth"
-        :transformations="transformations"
-        :has-gimble="hasGimble"
-        :normalized-camera-azimuth="normalizedCameraAzimuth"
+        v-if="showCompassHUD"
         :sun-heading="sunHeading"
+        :camera-angle-of-view="cameraAngleOfView"
+        :camera-pan="cameraPan"
     />
     <CompassRose
-        :camera-angle-of-view="cameraAngleOfView"
+        v-if="showCompassRose"
+        :camera-pan="cameraPan"
         :heading="heading"
-        :camera-azimuth="cameraAzimuth"
-        :transformations="transformations"
-        :has-gimble="hasGimble"
-        :normalized-camera-azimuth="normalizedCameraAzimuth"
-        :sun-heading="sunHeading"
         :sized-image-dimensions="sizedImageDimensions"
+        :sun-heading="sunHeading"
+        :transformations="transformations"
     />
 </div>
 </template>
@@ -50,7 +45,6 @@
 <script>
 import CompassHUD from './CompassHUD.vue';
 import CompassRose from './CompassRose.vue';
-import { rotate } from './utils';
 
 export default {
     components: {
@@ -68,14 +62,11 @@ export default {
         }
     },
     computed: {
-        hasGimble() {
-            return this.cameraAzimuth !== undefined;
+        showCompassHUD() {
+            return this.hasCameraPan && this.cameraAngleOfView > 0;
         },
-        // compass ordinal orientation of camera
-        normalizedCameraAzimuth() {
-            return this.hasGimble
-                ? rotate(this.cameraAzimuth)
-                : rotate(this.heading, -this.transformations.rotation || 0);
+        showCompassRose() {
+            return (this.hasCameraPan || this.hasHeading) && this.cameraAngleOfView > 0;
         },
         // horizontal rotation from north in degrees
         heading() {
@@ -89,11 +80,14 @@ export default {
             return this.image.sunOrientation;
         },
         // horizontal rotation from north in degrees
-        cameraAzimuth() {
+        cameraPan() {
             return this.image.cameraPan;
         },
+        hasCameraPan() {
+            return this.cameraPan !== undefined;
+        },
         cameraAngleOfView() {
-            return this.transformations.cameraAngleOfView;
+            return this.transformations?.cameraAngleOfView;
         },
         transformations() {
             return this.image.transformations;

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

@@ -94,33 +94,17 @@ const COMPASS_POINTS = [
 
 export default {
     props: {
-        cameraAngleOfView: {
-            type: Number,
-            required: true
-        },
-        heading: {
-            type: Number,
-            required: true
-        },
-        cameraAzimuth: {
-            type: Number,
-            default: undefined
-        },
-        transformations: {
-            type: Object,
-            required: true
-        },
-        hasGimble: {
-            type: Boolean,
-            required: true
-        },
-        normalizedCameraAzimuth: {
-            type: Number,
-            required: true
-        },
         sunHeading: {
             type: Number,
             default: undefined
+        },
+        cameraAngleOfView: {
+            type: Number,
+            default: undefined
+        },
+        cameraPan: {
+            type: Number,
+            required: true
         }
     },
     computed: {
@@ -146,13 +130,10 @@ export default {
                 left: `${ percentage * 100 }%`
             };
         },
-        cameraRotation() {
-            return this.transformations?.rotation;
-        },
         visibleRange() {
             return [
-                rotate(this.normalizedCameraAzimuth, -this.cameraAngleOfView / 2),
-                rotate(this.normalizedCameraAzimuth, this.cameraAngleOfView / 2)
+                rotate(this.cameraPan, -this.cameraAngleOfView / 2),
+                rotate(this.cameraPan, this.cameraAngleOfView / 2)
             ];
         }
     }

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

@@ -75,6 +75,7 @@
                     :style="sunHeadingStyle"
                 />
 
+                <!-- Camera FOV -->
                 <mask
                     id="mask2"
                     class="c-cr__cam-fov-l-mask"
@@ -106,61 +107,55 @@
                         height="100"
                     />
                 </mask>
+
+                <!-- Equipment (spacecraft) body holder. Transforms relative to the camera position. -->
                 <g
-                    class="c-cr-cam-and-body"
+                    v-if="hasHeading"
+                    class="cr-vrover"
+                    :style="camAngleAndPositionStyle"
+                >
+                    <!-- Equipment body. Rotates relative to the camera gimbal value for cams that gimbal. -->
+                    <path
+                        class="cr-vrover__body"
+                        :style="camGimbalAngleStyle"
+                        fill-rule="evenodd"
+                        clip-rule="evenodd"
+                        d="M5 0C2.23858 0 0 2.23858 0 5V95C0 97.7614 2.23858 100 5 100H95C97.7614 100 100 97.7614 100 95V5C100 2.23858 97.7614 0 95 0H5ZM85 59L50 24L15 59H33V75H67.0455V59H85Z"
+                    />
+                </g>
+
+                <g
+                    class="c-cr__cam-fov"
                     :style="cameraHeadingStyle"
                 >
-                    <!-- Equipment (spacecraft) body holder. Transforms relative to the camera position. -->
-                    <g
-                        v-if="hasHeading"
-                        class="cr-vrover"
-                        :style="camAngleAndPositionStyle"
-                    >
-                        <!-- Equipment body. Rotates relative to the camera pan value for cameras that gimble. -->
-                        <path
-                            class="cr-vrover__body"
-                            :style="gimbledCameraPanStyle"
-                            x
-                            fill-rule="evenodd"
-                            clip-rule="evenodd"
-                            d="M5 0C2.23858 0 0 2.23858 0 5V95C0 97.7614 2.23858 100 5 100H95C97.7614 100 100 97.7614 100 95V5C100 2.23858 97.7614 0 95 0H5ZM85 59L50 24L15 59H33V75H67.0455V59H85Z"
+                    <g mask="url(#mask2)">
+                        <rect
+                            class="c-cr__cam-fov-r"
+                            x="49"
+                            width="51"
+                            height="100"
+                            :style="cameraFOVStyleRightHalf"
                         />
                     </g>
-
-                    <!-- Camera FOV -->
-                    <g
-                        class="c-cr__cam-fov"
-                    >
-                        <g mask="url(#mask2)">
-                            <rect
-                                class="c-cr__cam-fov-r"
-                                x="49"
-                                width="51"
-                                height="100"
-                                :style="cameraFOVStyleRightHalf"
-                            />
-                        </g>
-                        <g mask="url(#mask1)">
-                            <rect
-                                class="c-cr__cam-fov-l"
-                                width="51"
-                                height="100"
-                                :style="cameraFOVStyleLeftHalf"
-                            />
-                        </g>
-                        <polygon
-                            class="c-cr__cam"
-                            points="0,0 100,0 70,40 70,100 30,100 30,40"
+                    <g mask="url(#mask1)">
+                        <rect
+                            class="c-cr__cam-fov-l"
+                            width="51"
+                            height="100"
+                            :style="cameraFOVStyleLeftHalf"
                         />
                     </g>
-
+                    <polygon
+                        class="c-cr__cam"
+                        points="0,0 100,0 70,40 70,100 30,100 30,40"
+                    />
                 </g>
             </g>
 
             <!-- NSEW and ticks -->
             <g
                 class="c-cr__nsew"
-                :style="compassDialStyle"
+                :style="compassRoseStyle"
             >
                 <g class="c-cr__ticks-major">
                     <path d="M50 3L43 10H57L50 3Z" />
@@ -259,32 +254,23 @@ import { throttle } from 'lodash';
 
 export default {
     props: {
-        cameraAngleOfView: {
-            type: Number,
-            required: true
-        },
         heading: {
             type: Number,
-            required: true
+            required: true,
+            default() {
+                return 0;
+            }
         },
-        cameraAzimuth: {
+        sunHeading: {
+            type: Number,
+            default: undefined
+        },
+        cameraPan: {
             type: Number,
             default: undefined
         },
         transformations: {
             type: Object,
-            required: true
-        },
-        hasGimble: {
-            type: Boolean,
-            required: true
-        },
-        normalizedCameraAzimuth: {
-            type: Number,
-            required: true
-        },
-        sunHeading: {
-            type: Number,
             default: undefined
         },
         sizedImageDimensions: {
@@ -298,6 +284,18 @@ export default {
         };
     },
     computed: {
+        cameraHeading() {
+            return this.cameraPan ?? this.heading;
+        },
+        cameraAngleOfView() {
+            const cameraAngleOfView = this.transformations?.cameraAngleOfView;
+
+            if (!cameraAngleOfView) {
+                console.warn('No Camera Angle of View provided');
+            }
+
+            return cameraAngleOfView;
+        },
         camAngleAndPositionStyle() {
             const translateX = this.transformations?.translateX;
             const translateY = this.transformations?.translateY;
@@ -306,22 +304,18 @@ export default {
 
             return { transform: `translate(${translateX}%, ${translateY}%) rotate(${rotation}deg) scale(${scale})` };
         },
-        gimbledCameraPanStyle() {
-            if (!this.hasGimble) {
-                return;
-            }
-
-            const gimbledCameraPan = rotate(this.normalizedCameraAzimuth, -this.heading);
+        camGimbalAngleStyle() {
+            const rotation = rotate(this.north, this.heading);
 
             return {
-                transform: `rotate(${ -gimbledCameraPan }deg)`
+                transform: `rotate(${ rotation }deg)`
             };
         },
-        compassDialStyle() {
+        compassRoseStyle() {
             return { transform: `rotate(${ this.north }deg)` };
         },
         north() {
-            return this.lockCompass ? rotate(-this.normalizedCameraAzimuth) : 0;
+            return this.lockCompass ? rotate(-this.cameraHeading) : 0;
         },
         cardinalTextRotateN() {
             return { transform: `translateY(-27%) rotate(${ -this.north }deg)` };
@@ -338,6 +332,14 @@ export default {
         hasHeading() {
             return this.heading !== undefined;
         },
+        headingStyle() {
+            /* Replaced with computed camGimbalStyle, but left here just in case. */
+            const rotation = rotate(this.north, this.heading);
+
+            return {
+                transform: `rotate(${ rotation }deg)`
+            };
+        },
         hasSunHeading() {
             return this.sunHeading !== undefined;
         },
@@ -349,7 +351,7 @@ export default {
             };
         },
         cameraHeadingStyle() {
-            const rotation = rotate(this.north, this.normalizedCameraAzimuth);
+            const rotation = rotate(this.north, this.cameraHeading);
 
             return {
                 transform: `rotate(${ rotation }deg)`

src/plugins/imagery/components/Compass/pluginSpec.js

@@ -35,15 +35,8 @@ describe("The Compass component", () => {
             roll: 90,
             pitch: 90,
             cameraTilt: 100,
-            cameraAzimuth: 90,
-            sunAngle: 30,
-            transformations: {
-                translateX: 0,
-                translateY: 18,
-                rotation: 0,
-                scale: 0.3,
-                cameraAngleOfView: 70
-            }
+            cameraPan: 90,
+            sunAngle: 30
         };
         let propsData = {
             naturalAspectRatio: 0.9,
@@ -51,7 +44,8 @@ describe("The Compass component", () => {
             sizedImageDimensions: {
                 width: 100,
                 height: 100
-            }
+            },
+            compassRoseSizingClasses: '--rose-small --rose-min'
         };
 
         app = new Vue({
@@ -60,6 +54,7 @@ describe("The Compass component", () => {
                 return propsData;
             },
             template: `<Compass
+                :compass-rose-sizing-classes="compassRoseSizingClasses"
                 :image="image"
                 :natural-aspect-ratio="naturalAspectRatio"
                 :sized-image-dimensions="sizedImageDimensions"
@@ -72,7 +67,7 @@ describe("The Compass component", () => {
         app.$destroy();
     });
 
-    describe("when a heading value and cameraAngleOfView exists on the image", () => {
+    describe("when a heading value exists on the image", () => {
 
         it("should display a compass rose", () => {
             let compassRoseElement = instance.$el.querySelector(COMPASS_ROSE_CLASS

src/plugins/imagery/components/ImageryView.vue

@@ -94,6 +94,7 @@
                 <Compass
                     v-if="shouldDisplayCompass"
                     :image="focusedImage"
+                    :natural-aspect-ratio="focusedImageNaturalAspectRatio"
                     :sized-image-dimensions="sizedImageDimensions"
                 />
             </div>
@@ -170,7 +171,7 @@
         >
             <ImageThumbnail
                 v-for="(image, index) in imageHistory"
-                :key="`${image.thumbnailUrl || image.url}-${image.time}-${index}`"
+                :key="`${image.thumbnailUrl || image.url}${image.time}`"
                 :image="image"
                 :active="focusedImageIndex === index"
                 :selected="focusedImageIndex === index && isPaused"
@@ -429,12 +430,9 @@ export default {
                 && imageHeightAndWidth
                 && this.zoomFactor === 1
                 && this.imagePanned !== true;
-            const hasHeading = this.focusedImage?.heading !== undefined;
-            const hasCameraAngleOfView = this.focusedImage?.transformations?.cameraAngleOfView > 0;
+            const hasCameraConfigurations = this.focusedImage?.transformations !== undefined;
 
-            return display
-                && hasCameraAngleOfView
-                && hasHeading;
+            return display && hasCameraConfigurations;
         },
         isSpacecraftPositionFresh() {
             let isFresh = undefined;
@@ -584,34 +582,11 @@ export default {
             },
             deep: true
         },
-        focusedImage: {
-            handler(newImage, oldImage) {
-                const newTime = newImage?.time;
-                const oldTime = oldImage?.time;
-                const newUrl = newImage?.url;
-                const oldUrl = oldImage?.url;
-
-                // Skip if it's all falsy
-                if (!newTime && !oldTime && !newUrl && !oldUrl) {
-                    return;
-                }
-
-                // Skip if it's the same image
-                if (newTime === oldTime && newUrl === oldUrl) {
-                    return;
-                }
-
-                // Update image duration and reset age CSS
-                this.trackDuration();
-                this.resetAgeCSS();
-
-                // Reset image dimensions and calculate new dimensions
-                // on new image load
-                this.getImageNaturalDimensions();
-
-                // Get the related telemetry for the new image
-                this.updateRelatedTelemetryForFocusedImage();
-            }
+        focusedImageIndex() {
+            this.trackDuration();
+            this.resetAgeCSS();
+            this.updateRelatedTelemetryForFocusedImage();
+            this.getImageNaturalDimensions();
         },
         bounds() {
             this.scrollHandler();
@@ -796,10 +771,6 @@ export default {
             this.layers = layersMetadata;
             if (this.domainObject.configuration) {
                 const persistedLayers = this.domainObject.configuration.layers;
-                if (!persistedLayers) {
-                    return;
-                }
-
                 layersMetadata.forEach((layer) => {
                     const persistedLayer = persistedLayers.find(object => object.name === layer.name);
                     if (persistedLayer) {

src/plugins/imagery/mixins/imageryData.js

@@ -76,14 +76,9 @@ export default {
         this.telemetryCollection.destroy();
     },
     methods: {
-        dataAdded(addedItems, addedItemIndices) {
-            const normalizedDataToAdd = addedItems.map(datum => this.normalizeDatum(datum));
-            let newImageHistory = this.imageHistory.slice();
-            normalizedDataToAdd.forEach(((datum, index) => {
-                newImageHistory.splice(addedItemIndices[index] ?? -1, 0, datum);
-            }));
-            //Assign just once so imageHistory watchers don't get called too often
-            this.imageHistory = newImageHistory;
+        dataAdded(dataToAdd) {
+            const normalizedDataToAdd = dataToAdd.map(datum => this.normalizeDatum(datum));
+            this.imageHistory = this.imageHistory.concat(normalizedDataToAdd);
         },
         dataCleared() {
             this.imageHistory = [];
@@ -158,6 +153,9 @@ export default {
                 return;
             }
 
+            // forcibly reset the imageContainer size to prevent an aspect ratio distortion
+            delete this.imageContainerWidth;
+            delete this.imageContainerHeight;
             this.bounds = bounds; // setting bounds for ImageryView watcher
         },
         timeSystemChange() {

src/plugins/move/MoveAction.js

@@ -84,8 +84,6 @@ export default class MoveAction {
         this.addToNewParent(this.object, parent);
         this.removeFromOldParent(this.object);
 
-        await this.saveTransaction();
-
         if (!inNavigationPath) {
             return;
         }
@@ -104,6 +102,8 @@ export default class MoveAction {
             }
         }
 
+        await this.saveTransaction();
+
         this.navigateTo(newObjectPath);
     }
 

src/plugins/notebook/components/Notebook.vue

@@ -381,7 +381,7 @@ export default {
             });
         },
         updateSelection(selection) {
-            if (selection?.[0]?.[0]?.context?.targetDetails?.entryId === undefined) {
+            if (selection?.[0]?.[1]?.context?.targetDetails?.entryId === undefined) {
                 this.selectedEntryId = '';
             }
         },

src/plugins/notebook/components/NotebookEntry.vue

@@ -64,7 +64,7 @@
                     tabindex="0"
                 >
                     <TextHighlight
-                        :text="formatValidUrls(entry.text)"
+                        :text="entryText"
                         :highlight="highlightText"
                         :highlight-class="'search-highlight'"
                     />
@@ -75,15 +75,15 @@
                     :id="entry.id"
                     class="c-ne__text c-ne__input"
                     aria-label="Notebook Entry Input"
-                    tabindex="-1"
+                    tabindex="0"
                     :contenteditable="canEdit"
-                    v-bind.prop="formattedText"
                     @mouseover="checkEditability($event)"
                     @mouseleave="canEdit = true"
                     @focus="editingEntry()"
                     @blur="updateEntryValue($event)"
                     @keydown.enter.exact.prevent
                     @keyup.enter.exact.prevent="forceBlur($event)"
+                    v-html="formattedText"
                 >
                 </div>
             </template>
@@ -94,12 +94,12 @@
                     class="c-ne__text"
                     contenteditable="false"
                     tabindex="0"
-                    v-bind.prop="formattedText"
+                    v-html="formattedText"
                 >
                 </div>
             </template>
 
-            <div class="c-ne__tags c-tag-holder">
+            <div>
                 <div
                     v-for="(tag, index) in entryTags"
                     :key="index"
@@ -228,17 +228,14 @@ export default {
         },
         selectedEntryId: {
             type: String,
-            default() {
-                return '';
-            }
+            required: true
         }
     },
     data() {
         return {
             editMode: false,
             canEdit: true,
-            enableEmbedsWrapperScroll: false,
-            urlWhitelist: []
+            enableEmbedsWrapperScroll: false
         };
     },
     computed: {
@@ -250,15 +247,28 @@ export default {
         },
         formattedText() {
             // remove ANY tags
-            const text = sanitizeHtml(this.entry.text, SANITIZATION_SCHEMA);
+            let text = sanitizeHtml(this.entry.text, SANITIZATION_SCHEMA);
 
-            if (this.editMode || this.urlWhitelist.length === 0) {
-                return { innerText: text };
+            if (this.editMode || !this.urlWhitelist) {
+                return text;
             }
 
-            const html = this.formatValidUrls(text);
+            text = text.replace(URL_REGEX, (match) => {
+                const url = new URL(match);
+                const domain = url.hostname;
+                let result = match;
+                let isMatch = this.urlWhitelist.find((partialDomain) => {
+                    return domain.endsWith(partialDomain);
+                });
 
-            return { innerHTML: html };
+                if (isMatch) {
+                    result = `<a class="c-hyperlink" target="_blank" href="${match}">${match}</a>`;
+                }
+
+                return result;
+            });
+
+            return text;
         },
         isSelectedEntry() {
             return this.selectedEntryId === this.entry.id;
@@ -344,22 +354,6 @@ export default {
         deleteEntry() {
             this.$emit('deleteEntry', this.entry.id);
         },
-        formatValidUrls(text) {
-            return text.replace(URL_REGEX, (match) => {
-                const url = new URL(match);
-                const domain = url.hostname;
-                let result = match;
-                let isMatch = this.urlWhitelist.find((partialDomain) => {
-                    return domain.endsWith(partialDomain);
-                });
-
-                if (isMatch) {
-                    result = `<a class="c-hyperlink" target="_blank" href="${match}">${match}</a>`;
-                }
-
-                return result;
-            });
-        },
         manageEmbedLayout() {
             if (this.$refs.embeds) {
                 const embedsWrapperLength = this.$refs.embedsWrapper.clientWidth;
@@ -462,7 +456,7 @@ export default {
             this.editMode = false;
             const value = $event.target.innerText;
             if (value !== this.entry.text && value.match(/\S/)) {
-                this.entry.text = sanitizeHtml(value, SANITIZATION_SCHEMA);
+                this.entry.text = value;
                 this.timestampAndUpdate();
             } else {
                 this.$emit('cancelEdit');
@@ -478,11 +472,16 @@ export default {
             targetDomainObjects[keyString] = this.domainObject;
             this.openmct.selection.select(
                 [
+                    {
+                        element: this.openmct.layout.$refs.browseObject.$el,
+                        context: {
+                            item: this.domainObject
+                        }
+                    },
                     {
                         element: event.currentTarget,
                         context: {
                             type: 'notebook-entry-selection',
-                            item: this.domainObject,
                             targetDetails,
                             targetDomainObjects,
                             annotations: this.notebookAnnotations,

src/plugins/notebook/notebook-constants.js

@@ -6,7 +6,8 @@ export const NOTEBOOK_DEFAULT = 'DEFAULT';
 export const NOTEBOOK_SNAPSHOT = 'SNAPSHOT';
 export const NOTEBOOK_VIEW_TYPE = 'notebook-vue';
 export const RESTRICTED_NOTEBOOK_VIEW_TYPE = 'restricted-notebook-vue';
-export const NOTEBOOK_BASE_INSTALLED = '_NOTEBOOK_BASE_FUNCTIONALITY_INSTALLED';
+export const NOTEBOOK_INSTALLED_KEY = '_NOTEBOOK_PLUGIN_INSTALLED';
+export const RESTRICTED_NOTEBOOK_INSTALLED_KEY = '_RESTRICTED_NOTEBOOK_PLUGIN_INSTALLED';
 
 // these only deals with constants, figured this could skip going into a utils file
 export function isNotebookOrAnnotationType(domainObject) {

src/plugins/notebook/plugin.js

@@ -33,7 +33,8 @@ import {
     RESTRICTED_NOTEBOOK_TYPE,
     NOTEBOOK_VIEW_TYPE,
     RESTRICTED_NOTEBOOK_VIEW_TYPE,
-    NOTEBOOK_BASE_INSTALLED
+    NOTEBOOK_INSTALLED_KEY,
+    RESTRICTED_NOTEBOOK_INSTALLED_KEY
 } from './notebook-constants';
 
 import Vue from 'vue';
@@ -62,7 +63,7 @@ function addLegacyNotebookGetInterceptor(openmct) {
 
 function installBaseNotebookFunctionality(openmct) {
     // only need to do this once
-    if (openmct[NOTEBOOK_BASE_INSTALLED]) {
+    if (openmct[NOTEBOOK_INSTALLED_KEY] || openmct[RESTRICTED_NOTEBOOK_INSTALLED_KEY]) {
         return;
     }
 
@@ -100,12 +101,14 @@ function installBaseNotebookFunctionality(openmct) {
     openmct.indicators.add(indicator);
 
     monkeyPatchObjectAPIForNotebooks(openmct);
-
-    openmct[NOTEBOOK_BASE_INSTALLED] = true;
 }
 
 function NotebookPlugin(name = 'Notebook', entryUrlWhitelist = []) {
     return function install(openmct) {
+        if (openmct[NOTEBOOK_INSTALLED_KEY]) {
+            return;
+        }
+
         const icon = 'icon-notebook';
         const description = 'Create and save timestamped notes with embedded object snapshots.';
         const snapshotContainer = getSnapshotContainer(openmct);
@@ -119,11 +122,17 @@ function NotebookPlugin(name = 'Notebook', entryUrlWhitelist = []) {
         openmct.objectViews.addProvider(notebookView, entryUrlWhitelist);
 
         installBaseNotebookFunctionality(openmct);
+
+        openmct[NOTEBOOK_INSTALLED_KEY] = true;
     };
 }
 
 function RestrictedNotebookPlugin(name = 'Notebook Shift Log', entryUrlWhitelist = []) {
     return function install(openmct) {
+        if (openmct[RESTRICTED_NOTEBOOK_INSTALLED_KEY]) {
+            return;
+        }
+
         const icon = 'icon-notebook-shift-log';
         const description = 'Create and save timestamped notes with embedded object snapshots with the ability to commit and lock pages.';
         const snapshotContainer = getSnapshotContainer(openmct);
@@ -135,6 +144,8 @@ function RestrictedNotebookPlugin(name = 'Notebook Shift Log', entryUrlWhitelist
         openmct.objectViews.addProvider(notebookView, entryUrlWhitelist);
 
         installBaseNotebookFunctionality(openmct);
+
+        openmct[RESTRICTED_NOTEBOOK_INSTALLED_KEY] = true;
     };
 }
 

src/plugins/notificationIndicator/components/NotificationsList.vue

@@ -11,8 +11,8 @@
         class="w-messages c-overlay__messages"
     >
         <notification-message
-            v-for="(notification, notificationIndex) in notifications"
-            :key="notificationIndex"
+            v-for="notification in notifications"
+            :key="notification.model.timestamp"
             :close-overlay="closeOverlay"
             :notification="notification"
             :notifications-count="notifications.length"

src/plugins/plan/Plan.vue

@@ -325,7 +325,6 @@ export default {
                         let textLines = this.getActivityDisplayText(this.canvasContext, activity.name, activityNameFitsRect);
                         const textWidth = textStart + this.getTextWidth(textLines[0]) + TEXT_LEFT_PADDING;
 
-                        //We shouldn't need the else block here if we clip text to fit the rectangle
                         if (activityNameFitsRect) {
                             currentRow = this.getRowForActivity(rectX, rectWidth, activitiesByRow);
                         } else {
@@ -366,8 +365,6 @@ export default {
                 };
             });
         },
-        //REDO this to receive the rectangle width as the max width of text (minus padding)
-        // Cut off any text that exceeds this width.
         getActivityDisplayText(context, text, activityNameFitsRect) {
         //TODO: If the activity start is less than viewBounds.start then the text should be cropped on the left/should be off-screen)
             let words = text.split(' ');
@@ -379,7 +376,6 @@ export default {
                 let testLine = line + words[n] + ' ';
                 let metrics = context.measureText(testLine);
                 let testWidth = metrics.width;
-                //We need to go to a new line if the width of our line is > MAX_TEXT_WIDTH
                 if (!activityNameFitsRect && (testWidth > MAX_TEXT_WIDTH && n > 0)) {
                     activityText.push(line);
                     line = words[n] + ' ';

src/plugins/plot/MctPlot.vue

@@ -23,8 +23,16 @@
 <div
     v-if="loaded"
     class="gl-plot"
+    :class="[plotLegendExpandedStateClass, plotLegendPositionClass]"
 >
-    <slot></slot>
+    <plot-legend
+        v-if="!isNestedWithinAStackedPlot"
+        :cursor-locked="!!lockHighlightPoint"
+        :series="seriesModels"
+        :highlights="highlights"
+        :legend="legend"
+        @legendHoverChanged="legendHoverChanged"
+    />
     <div class="plot-wrapper-axis-and-display-area flex-elem grows">
         <div
             v-if="seriesModels.length"
@@ -34,14 +42,13 @@
                 v-for="(yAxis, index) in yAxesIds"
                 :id="yAxis.id"
                 :key="`yAxis-${yAxis.id}-${index}`"
-                :has-multiple-left-axes="hasMultipleLeftAxes"
+                :multiple-left-axes="multipleLeftAxes"
                 :position="yAxis.id > 2 ? 'right' : 'left'"
                 :class="{'plot-yaxis-right': yAxis.id > 2}"
                 :tick-width="yAxis.tickWidth"
-                :used-tick-width="plotFirstLeftTickWidth"
                 :plot-left-tick-width="yAxis.id > 2 ? yAxis.tickWidth: plotLeftTickWidth"
                 @yKeyChanged="setYAxisKey"
-                @plotYTickWidth="onYTickWidthChange"
+                @tickWidthChanged="onTickWidthChange"
                 @toggleAxisVisibility="toggleSeriesForYAxis"
             />
         </div>
@@ -62,6 +69,7 @@
                     v-show="gridLines && !options.compact"
                     :axis-type="'xAxis'"
                     :position="'right'"
+                    @plotTickWidth="onTickWidthChange"
                 />
 
                 <mct-ticks
@@ -71,7 +79,7 @@
                     :axis-type="'yAxis'"
                     :position="'bottom'"
                     :axis-id="yAxis.id"
-                    @plotTickWidth="onYTickWidthChange"
+                    @plotTickWidth="onTickWidthChange"
                 />
 
                 <div
@@ -86,6 +94,7 @@
                         :highlights="highlights"
                         :annotated-points="annotatedPoints"
                         :annotation-selections="annotationSelections"
+                        :show-limit-line-labels="showLimitLineLabels"
                         :hidden-y-axis-ids="hiddenYAxisIds"
                         :annotation-viewing-and-editing-allowed="annotationViewingAndEditingAllowed"
                         @plotReinitializeCanvas="initCanvas"
@@ -208,6 +217,7 @@ import LinearScale from "./LinearScale";
 import PlotConfigurationModel from './configuration/PlotConfigurationModel';
 import configStore from './configuration/ConfigStore';
 
+import PlotLegend from "./legend/PlotLegend.vue";
 import MctTicks from "./MctTicks.vue";
 import MctChart from "./chart/MctChart.vue";
 import XAxis from "./axis/XAxis.vue";
@@ -222,6 +232,7 @@ export default {
     components: {
         XAxis,
         YAxis,
+        PlotLegend,
         MctTicks,
         MctChart
     },
@@ -247,14 +258,10 @@ export default {
                 return false;
             }
         },
-        parentYTickWidth: {
-            type: Object,
+        plotTickWidth: {
+            type: Number,
             default() {
-                return {
-                    leftTickWidth: 0,
-                    rightTickWidth: 0,
-                    hasMultipleLeftAxes: false
-                };
+                return 0;
             }
         },
         limitLineLabels: {
@@ -289,6 +296,7 @@ export default {
             isRealTime: this.openmct.time.clock() !== undefined,
             loaded: false,
             isTimeOutOfSync: false,
+            showLimitLineLabels: this.limitLineLabels,
             isFrozenOnMouseDown: false,
             cursorGuide: this.initCursorGuide,
             gridLines: this.initGridLines,
@@ -300,14 +308,13 @@ export default {
     computed: {
         xAxisStyle() {
             const rightAxis = this.yAxesIds.find(yAxis => yAxis.id > 2);
-            const leftOffset = this.hasMultipleLeftAxes ? 2 * AXES_PADDING : AXES_PADDING;
+            const leftOffset = this.multipleLeftAxes ? 2 * AXES_PADDING : AXES_PADDING;
             let style = {
                 left: `${this.plotLeftTickWidth + leftOffset}px`
             };
-            const parentRightAxisWidth = this.parentYTickWidth.rightTickWidth;
 
-            if (parentRightAxisWidth || rightAxis) {
-                style.right = `${(parentRightAxisWidth || rightAxis.tickWidth) + AXES_PADDING}px`;
+            if (rightAxis) {
+                style.right = `${rightAxis.tickWidth + AXES_PADDING}px`;
             }
 
             return style;
@@ -315,8 +322,8 @@ export default {
         yAxesIds() {
             return this.yAxes.filter(yAxis => yAxis.seriesCount > 0);
         },
-        hasMultipleLeftAxes() {
-            return this.parentYTickWidth.hasMultipleLeftAxes || this.yAxes.filter(yAxis => yAxis.seriesCount > 0 && yAxis.id <= 2).length > 1;
+        multipleLeftAxes() {
+            return this.yAxes.filter(yAxis => yAxis.seriesCount > 0 && yAxis.id <= 2).length > 1;
         },
         isNestedWithinAStackedPlot() {
             const isNavigatedObject = this.openmct.router.isNavigatedObject([this.domainObject].concat(this.path));
@@ -327,13 +334,22 @@ export default {
             return this.config.xAxis.get('frozen') === true && this.config.yAxis.get('frozen') === true;
         },
         annotationViewingAndEditingAllowed() {
-        // only allow annotations viewing/editing if plot is paused or in fixed time mode
+            // only allow annotations viewing/editing if plot is paused or in fixed time mode
             return this.isFrozen || !this.isRealTime;
         },
-        plotFirstLeftTickWidth() {
-            const firstYAxis = this.yAxes.find(yAxis => yAxis.id === 1);
+        plotLegendPositionClass() {
+            return !this.isNestedWithinAStackedPlot ? `plot-legend-${this.config.legend.get('position')}` : '';
+        },
+        plotLegendExpandedStateClass() {
+            if (this.isNestedWithinAStackedPlot) {
+                return '';
+            }
 
-            return firstYAxis ? firstYAxis.tickWidth : 0;
+            if (this.config.legend.get('expanded')) {
+                return 'plot-legend-expanded';
+            } else {
+                return 'plot-legend-collapsed';
+            }
         },
         plotLeftTickWidth() {
             let leftTickWidth = 0;
@@ -344,12 +360,17 @@ export default {
 
                 leftTickWidth = leftTickWidth + yAxis.tickWidth;
             });
-            const parentLeftTickWidth = this.parentYTickWidth.leftTickWidth;
 
-            return parentLeftTickWidth || leftTickWidth;
+            return this.plotTickWidth || leftTickWidth;
         }
     },
     watch: {
+        limitLineLabels: {
+            handler(limitLineLabels) {
+                this.legendHoverChanged(limitLineLabels);
+            },
+            deep: true
+        },
         initGridLines(newGridLines) {
             this.gridLines = newGridLines;
         },
@@ -385,7 +406,8 @@ export default {
             }));
         }
 
-        this.$emit('configLoaded', true);
+        const configId = this.openmct.objects.makeKeyString(this.domainObject.identifier);
+        this.$emit('configLoaded', configId);
 
         this.listenTo(this.config.series, 'add', this.addSeries, this);
         this.listenTo(this.config.series, 'remove', this.removeSeries, this);
@@ -417,20 +439,15 @@ export default {
     methods: {
         updateSelection(selection) {
             const selectionContext = selection?.[0]?.[0]?.context?.item;
-            // on clicking on a search result we highlight the annotation and zoom - we know it's an annotation result when isAnnotationSearchResult === true
-            // We shouldn't zoom when we're selecting existing annotations to view them or creating new annotations.
-            const selectionType = selection?.[0]?.[0]?.context?.type;
-            const validSelectionTypes = ['clicked-on-plot-selection', 'plot-annotation-search-result'];
-            const isAnnotationSearchResult = selectionType === 'plot-annotation-search-result';
-
-            if (!validSelectionTypes.includes(selectionType)) {
-                // wrong type of selection
+            if (!selectionContext
+                || this.openmct.objects.areIdsEqual(selectionContext.identifier, this.domainObject.identifier)) {
+                // Selection changed, but it's us, so ignoring it
                 return;
             }
 
-            if (selectionContext
-                && (!isAnnotationSearchResult)
-                && this.openmct.objects.areIdsEqual(selectionContext.identifier, this.domainObject.identifier)) {
+            const selectionType = selection?.[0]?.[1]?.context?.type;
+            if (selectionType !== 'plot-points-selection') {
+                // wrong type of selection
                 return;
             }
 
@@ -443,18 +460,7 @@ export default {
                 return;
             }
 
-            const selectedAnnotations = selection?.[0]?.[0]?.context?.annotations;
-            //This section is only for the annotations search results entry to displaying annotations
-            if (isAnnotationSearchResult) {
-                this.showAnnotationsFromSearchResults(selectedAnnotations);
-            }
-
-            //This section is common to all entry points for annotation display
-            this.prepareExistingAnnotationSelection(selectedAnnotations);
-        },
-        showAnnotationsFromSearchResults(selectedAnnotations) {
-        //Start section
-
+            const selectedAnnotations = selection?.[0]?.[1]?.context?.annotations;
             if (selectedAnnotations?.length) {
                 // just use first annotation
                 const boundingBoxes = Object.values(selectedAnnotations[0].targets);
@@ -488,9 +494,10 @@ export default {
                     min: minY,
                     max: maxY
                 });
-                //Zoom out just a touch so that the highlighted section for annotations doesn't take over the whole view - which is not a nice look.
                 this.zoom('out', 0.2);
             }
+
+            this.prepareExistingAnnotationSelection(selectedAnnotations);
         },
         handleKeyDown(event) {
             if (event.key === 'Alt') {
@@ -568,14 +575,6 @@ export default {
         updateTicksAndSeriesForYAxis(newAxisId, oldAxisId) {
             this.updateAxisUsageCount(oldAxisId, -1);
             this.updateAxisUsageCount(newAxisId, 1);
-
-            const foundYAxis = this.yAxes.find(yAxis => yAxis.id === oldAxisId);
-            if (foundYAxis.seriesCount === 0) {
-                this.onYTickWidthChange({
-                    width: foundYAxis.tickWidth,
-                    yAxisId: foundYAxis.id
-                });
-            }
         },
 
         updateAxisUsageCount(yAxisId, updateCountBy) {
@@ -689,15 +688,9 @@ export default {
                 series.reset();
             });
         },
-        shareCommonParent(domainObjectToFind) {
-            return false;
-        },
-        compositionPathContainsId(domainObjectToFind) {
-            if (!domainObjectToFind.composition) {
-                return false;
-            }
 
-            return domainObjectToFind.composition.some((compositionIdentifier) => {
+        compositionPathContainsId(domainObjectToClear) {
+            return domainObjectToClear.composition.some((compositionIdentifier) => {
                 return this.openmct.objects.areIdsEqual(compositionIdentifier, this.domainObject.identifier);
             });
         },
@@ -855,7 +848,7 @@ export default {
         gatherNearbyAnnotations() {
             const nearbyAnnotations = [];
             this.config.series.models.forEach(series => {
-                if (series?.closest?.annotationsById) {
+                if (series.closest.annotationsById) {
                     Object.values(series.closest.annotationsById).forEach(closeAnnotation => {
                         const addedAnnotationAlready = nearbyAnnotations.some(annotation => {
                             return _.isEqual(annotation.targets, closeAnnotation.targets)
@@ -953,13 +946,8 @@ export default {
             }
         },
 
-        /**
-       * Aggregate widths of all left and right y axes and send them up to any parent plots
-       * @param {Object} tickWidthWithYAxisId - the width and yAxisId of the tick bar
-       * @param fromDifferentObject
-       */
-        onYTickWidthChange(tickWidthWithYAxisId, fromDifferentObject) {
-            const {width, yAxisId} = tickWidthWithYAxisId;
+        onTickWidthChange(data, fromDifferentObject) {
+            const {width, yAxisId} = data;
             if (yAxisId) {
                 const index = this.yAxes.findIndex(yAxis => yAxis.id === yAxisId);
                 if (fromDifferentObject) {
@@ -968,23 +956,13 @@ export default {
                 } else {
                 // Otherwise, only accept tick with if it's larger.
                     const newWidth = Math.max(width, this.yAxes[index].tickWidth);
-                    if (width !== this.yAxes[index].tickWidth) {
+                    if (newWidth !== this.yAxes[index].tickWidth) {
                         this.yAxes[index].tickWidth = newWidth;
                     }
                 }
 
                 const id = this.openmct.objects.makeKeyString(this.domainObject.identifier);
-                const leftTickWidth = this.yAxes.filter(yAxis => yAxis.id < 3).reduce((previous, current) => {
-                    return previous + current.tickWidth;
-                }, 0);
-                const rightTickWidth = this.yAxes.filter(yAxis => yAxis.id > 2).reduce((previous, current) => {
-                    return previous + current.tickWidth;
-                }, 0);
-                this.$emit('plotYTickWidth', {
-                    hasMultipleLeftAxes: this.hasMultipleLeftAxes,
-                    leftTickWidth,
-                    rightTickWidth
-                }, id);
+                this.$emit('plotTickWidth', this.yAxes[index].tickWidth, id);
             }
         },
 
@@ -1066,6 +1044,8 @@ export default {
 
         highlightValues(point) {
             this.highlightPoint = point;
+            // TODO: used in StackedPlotController
+            this.$emit('plotHighlightUpdate', point);
             if (this.lockHighlightPoint) {
                 return;
             }
@@ -1177,7 +1157,7 @@ export default {
                     endPixels: this.positionOverElement,
                     start: this.positionOverPlot,
                     end: this.positionOverPlot,
-                    color: [1, 1, 1, 0.25]
+                    color: [1, 1, 1, 0.5]
                 };
                 if (annotationEvent) {
                     this.marquee.annotationEvent = true;
@@ -1188,86 +1168,47 @@ export default {
             }
         },
         selectNearbyAnnotations(event) {
-            // need to stop propagation right away to prevent selecting the plot itself
             event.stopPropagation();
 
+            if (!this.annotationViewingAndEditingAllowed || this.annotationSelections.length) {
+                return;
+            }
+
             const nearbyAnnotations = this.gatherNearbyAnnotations();
-
-            if (this.annotationViewingAndEditingAllowed && this.annotationSelections.length) {
-                //no annotations were found, but we are adding some now
-                return;
-            }
-
-            if (this.annotationViewingAndEditingAllowed && nearbyAnnotations.length) {
-                //show annotations if some were found
-                const { targetDomainObjects, targetDetails } = this.prepareExistingAnnotationSelection(nearbyAnnotations);
-                this.selectPlotAnnotations({
-                    targetDetails,
-                    targetDomainObjects,
-                    annotations: nearbyAnnotations
-                });
-
-                return;
-            }
-
-            //Fall through to here if either there is no new selection add tags or no existing annotations were retrieved
-            this.selectPlot();
-        },
-        selectPlot() {
-            // should show plot itself if we didn't find any annotations
-            const selection = this.createPathSelection();
-            this.openmct.selection.select(selection, true);
-        },
-        createPathSelection() {
-            let selection = [];
-            selection.unshift({
-                element: this.$el,
-                context: {
-                    item: this.domainObject
-                }
-            });
-            this.path.forEach((pathObject, index) => {
-                selection.push({
-                    element: this.openmct.layout.$refs.browseObject.$el,
-                    context: {
-                        item: pathObject
-                    }
-                });
-            });
-
-            return selection;
-        },
-        selectPlotAnnotations({targetDetails, targetDomainObjects, annotations}) {
-            const annotationContext = {
-                type: 'clicked-on-plot-selection',
+            const { targetDomainObjects, targetDetails } = this.prepareExistingAnnotationSelection(nearbyAnnotations);
+            this.selectPlotAnnotations({
                 targetDetails,
                 targetDomainObjects,
-                annotations,
-                annotationType: this.openmct.annotation.ANNOTATION_TYPES.PLOT_SPATIAL,
-                onAnnotationChange: this.onAnnotationChange
-            };
-            const selection = this.createPathSelection();
-            if (selection.length && this.openmct.objects.areIdsEqual(selection[0].context.item.identifier, this.domainObject.identifier)) {
-                selection[0].context = {
-                    ...selection[0].context,
-                    ...annotationContext
-                };
-            } else {
-                selection.unshift({
-                    element: this.$el,
-                    context: {
-                        item: this.domainObject,
-                        ...annotationContext
-                    }
-                });
-            }
-
+                annotations: nearbyAnnotations
+            });
+        },
+        selectPlotAnnotations({targetDetails, targetDomainObjects, annotations}) {
+            const selection =
+                    [
+                        {
+                            element: this.openmct.layout.$refs.browseObject.$el,
+                            context: {
+                                item: this.domainObject
+                            }
+                        },
+                        {
+                            element: this.$el,
+                            context: {
+                                type: 'plot-points-selection',
+                                targetDetails,
+                                targetDomainObjects,
+                                annotations,
+                                annotationType: this.openmct.annotation.ANNOTATION_TYPES.PLOT_SPATIAL,
+                                onAnnotationChange: this.onAnnotationChange
+                            }
+                        }
+                    ];
             this.openmct.selection.select(selection, true);
         },
         selectNewPlotAnnotations(boundingBoxPerYAxis, pointsInBox, event) {
             let targetDomainObjects = {};
             let targetDetails = {};
-            let annotations = [];
+            let annotations = {};
             pointsInBox.forEach(pointInBox => {
                 if (pointInBox.length) {
                     const seriesID = pointInBox[0].series.keyString;
@@ -1770,9 +1711,7 @@ export default {
         },
 
         destroy() {
-            if (this.config) {
-                configStore.deleteStore(this.config.id);
-            }
+            configStore.deleteStore(this.config.id);
 
             this.stopListening();
 
@@ -1813,6 +1752,9 @@ export default {
                 this.config.series.models.forEach(this.loadSeriesData, this);
             }
         },
+        legendHoverChanged(data) {
+            this.showLimitLineLabels = data;
+        },
         toggleCursorGuide() {
             this.cursorGuide = !this.cursorGuide;
             this.$emit('cursorGuide', this.cursorGuide);

src/plugins/plot/MctTicks.vue

@@ -86,8 +86,6 @@ import eventHelpers from "./lib/eventHelpers";
 import { ticks, getLogTicks, getFormattedTicks } from "./tickUtils";
 import configStore from "./configuration/ConfigStore";
 
-const SECONDARY_TICK_NUMBER = 2;
-
 export default {
     inject: ['openmct', 'domainObject'],
     props: {
@@ -207,7 +205,7 @@ export default {
             }
 
             if (this.axisType === 'yAxis' && this.axis.get('logMode')) {
-                return getLogTicks(range.min, range.max, number, SECONDARY_TICK_NUMBER);
+                return getLogTicks(range.min, range.max, number, 4);
             } else {
                 return ticks(range.min, range.max, number);
             }

src/plugins/plot/Plot.vue

@@ -36,26 +36,12 @@
             :model="{progressPerc: undefined}"
         />
         <mct-plot
-            :class="[plotLegendExpandedStateClass, plotLegendPositionClass]"
             :init-grid-lines="gridLines"
             :init-cursor-guide="cursorGuide"
             :options="options"
-            :limit-line-labels="limitLineLabels"
             @loadingUpdated="loadingUpdated"
             @statusUpdated="setStatus"
-            @configLoaded="updateReady"
-            @lockHighlightPoint="lockHighlightPointUpdated"
-            @highlights="highlightsUpdated"
-        >
-            <plot-legend
-                v-if="configReady"
-                :cursor-locked="lockHighlightPoint"
-                :highlights="highlights"
-                @legendHoverChanged="legendHoverChanged"
-                @expanded="updateExpanded"
-                @position="updatePosition"
-            />
-        </mct-plot>
+        />
     </div>
 </div>
 </template>
@@ -64,15 +50,13 @@
 import eventHelpers from './lib/eventHelpers';
 import ImageExporter from '../../exporters/ImageExporter';
 import MctPlot from './MctPlot.vue';
-import PlotLegend from "./legend/PlotLegend.vue";
 import ProgressBar from "../../ui/components/ProgressBar.vue";
 import StalenessUtils from '@/utils/staleness';
 
 export default {
     components: {
         MctPlot,
-        ProgressBar,
-        PlotLegend
+        ProgressBar
     },
     inject: ['openmct', 'domainObject', 'path'],
     props: {
@@ -93,13 +77,7 @@ export default {
             gridLines: !this.options.compact,
             loading: false,
             status: '',
-            staleObjects: [],
-            limitLineLabels: undefined,
-            lockHighlightPoint: false,
-            highlights: [],
-            expanded: false,
-            position: undefined,
-            configReady: false
+            staleObjects: []
         };
     },
     computed: {
@@ -109,16 +87,6 @@ export default {
             }
 
             return '';
-        },
-        plotLegendPositionClass() {
-            return this.position ? `plot-legend-${this.position}` : '';
-        },
-        plotLegendExpandedStateClass() {
-            if (this.expanded) {
-                return 'plot-legend-expanded';
-            } else {
-                return 'plot-legend-collapsed';
-            }
         }
     },
     mounted() {
@@ -166,7 +134,6 @@ export default {
             this.stalenessSubscription[keystring].unsubscribe();
             this.stalenessSubscription[keystring].stalenessUtils.destroy();
             this.handleStaleness(keystring, { isStale: false }, SKIP_CHECK);
-            delete this.stalenessSubscription[keystring];
         },
         handleStaleness(id, stalenessResponse, skipCheck = false) {
             if (skipCheck || this.stalenessSubscription[id].stalenessUtils.shouldUpdateStaleness(stalenessResponse, id)) {
@@ -216,24 +183,6 @@ export default {
                 exportPNG: this.exportPNG,
                 exportJPG: this.exportJPG
             };
-        },
-        lockHighlightPointUpdated(data) {
-            this.lockHighlightPoint = data;
-        },
-        highlightsUpdated(data) {
-            this.highlights = data;
-        },
-        legendHoverChanged(data) {
-            this.limitLineLabels = data;
-        },
-        updateExpanded(expanded) {
-            this.expanded = expanded;
-        },
-        updatePosition(position) {
-            this.position = position;
-        },
-        updateReady(ready) {
-            this.configReady = ready;
         }
     }
 };

src/plugins/plot/axis/XAxis.vue

@@ -152,7 +152,7 @@ export default {
             this.selectedXKeyOptionKey = this.xKeyOptions.length > 0 ? this.getXKeyOption(xAxisKey).key : xAxisKey;
         },
         onTickWidthChange(width) {
-            this.$emit('plotXTickWidth', width);
+            this.$emit('tickWidthChanged', width);
         }
     }
 };

src/plugins/plot/axis/YAxis.vue

@@ -101,13 +101,7 @@ export default {
                 return 0;
             }
         },
-        usedTickWidth: {
-            type: Number,
-            default() {
-                return 0;
-            }
-        },
-        hasMultipleLeftAxes: {
+        multipleLeftAxes: {
             type: Boolean,
             default() {
                 return false;
@@ -144,14 +138,14 @@ export default {
             let style = {
                 width: `${this.tickWidth + AXIS_PADDING}px`
             };
-            const multipleAxesPadding = this.hasMultipleLeftAxes ? AXIS_PADDING : 0;
+            const multipleAxesPadding = this.multipleLeftAxes ? AXIS_PADDING : 0;
 
             if (this.position === 'right') {
                 style.left = `-${this.tickWidth + AXIS_PADDING}px`;
             } else {
                 const thisIsTheSecondLeftAxis = (this.id - 1) > 0;
-                if (this.hasMultipleLeftAxes && thisIsTheSecondLeftAxis) {
-                    style.left = `${this.plotLeftTickWidth - this.usedTickWidth - this.tickWidth}px`;
+                if (this.multipleLeftAxes && thisIsTheSecondLeftAxis) {
+                    style.left = 0;
                     style['border-right'] = `1px solid`;
                 } else {
                     style.left = `${ this.plotLeftTickWidth - this.tickWidth + multipleAxesPadding}px`;
@@ -208,7 +202,6 @@ export default {
             }
 
             this.listenTo(series, 'change:yAxisId', this.addOrRemoveSeries.bind(this, series), this);
-            this.listenTo(series, 'change:color', this.updateSeriesColors.bind(this, series), this);
         },
         removeSeries(plotSeries) {
             const seriesIndex = this.seriesModels.findIndex(model => this.openmct.objects.areIdsEqual(model.get('identifier'), plotSeries.get('identifier')));
@@ -223,9 +216,6 @@ export default {
                 return model.get('yKey') === this.seriesModels[0].get('yKey');
             });
             this.singleSeries = this.seriesModels.length === 1;
-            this.updateSeriesColors();
-        },
-        updateSeriesColors() {
             this.seriesColors = this.seriesModels.map(model => {
                 return model.get('color').asHexString();
             });
@@ -262,7 +252,7 @@ export default {
             }
         },
         onTickWidthChange(data) {
-            this.$emit('plotYTickWidth', {
+            this.$emit('tickWidthChanged', {
                 width: data.width,
                 yAxisId: this.id
             });

src/plugins/plot/chart/MCTChartAlarmLineSet.js

@@ -105,9 +105,6 @@ export default class MCTChartAlarmLineSet {
 
     reset() {
         this.limits = [];
-        if (this.series.limits) {
-            this.getLimitPoints(this.series);
-        }
     }
 
     destroy() {

src/plugins/plot/chart/MctChart.vue

@@ -52,41 +52,6 @@ const MARKER_SIZE = 6.0;
 const HIGHLIGHT_SIZE = MARKER_SIZE * 2.0;
 const ANNOTATION_SIZE = MARKER_SIZE * 3.0;
 const CLEARANCE = 15;
-// These attributes are changed in the plot model, but we don't need to react to the changes.
-const NO_HANDLING_NEEDED_ATTRIBUTES = {
-    label: 'label',
-    values: 'values',
-    format: 'format',
-    color: 'color',
-    name: 'name',
-    unit: 'unit'
-};
-// These attributes in turn set one of HANDLED_ATTRIBUTES, so we don't need specific listeners for them - this prevents excessive redraws.
-const IMPLICIT_HANDLED_ATTRIBUTES = {
-    range: 'range',
-    //series stats update y axis stats
-    stats: 'stats',
-    frozen: 'frozen',
-    autoscale: 'autoscale',
-    autoscalePadding: 'autoscalePadding',
-    logMode: 'logMode',
-    yKey: 'yKey'
-};
-// Attribute changes that we are specifically handling with listeners
-const HANDLED_ATTRIBUTES = {
-    //X and Y Axis attributes
-    key: 'key',
-    displayRange: 'displayRange',
-    //series attributes
-    xKey: 'xKey',
-    interpolate: 'interpolate',
-    markers: 'markers',
-    markerShape: 'markerShape',
-    markerSize: 'markerSize',
-    alarmMarkers: 'alarmMarkers',
-    limitLines: 'limitLines',
-    yAxisId: 'yAxisId'
-};
 
 export default {
     inject: ['openmct', 'domainObject', 'path'],
@@ -156,7 +121,6 @@ export default {
         hiddenYAxisIds() {
             this.hiddenYAxisIds.forEach(id => {
                 this.resetYOffsetAndSeriesDataForYAxis(id);
-                this.drawLimitLines();
             });
             this.scheduleDraw();
         }
@@ -173,16 +137,14 @@ export default {
         this.offset = {
             [yAxisId]: {}
         };
-        this.listenTo(this.config.yAxis, `change:${HANDLED_ATTRIBUTES.displayRange}`, this.scheduleDraw);
-        this.listenTo(this.config.yAxis, `change:${HANDLED_ATTRIBUTES.key}`, this.resetYOffsetAndSeriesDataForYAxis.bind(this, yAxisId), this);
-        this.listenTo(this.config.yAxis, 'change', this.redrawIfNotAlreadyHandled);
+        this.listenTo(this.config.yAxis, 'change:key', this.resetYOffsetAndSeriesDataForYAxis.bind(this, yAxisId), this);
+        this.listenTo(this.config.yAxis, 'change', this.updateLimitsAndDraw);
         if (this.config.additionalYAxes.length) {
             this.config.additionalYAxes.forEach(yAxis => {
                 const id = yAxis.get('id');
                 this.offset[id] = {};
-                this.listenTo(yAxis, `change:${HANDLED_ATTRIBUTES.displayRange}`, this.scheduleDraw);
-                this.listenTo(yAxis, `change:${HANDLED_ATTRIBUTES.key}`, this.resetYOffsetAndSeriesDataForYAxis.bind(this, id), this);
-                this.listenTo(yAxis, 'change', this.redrawIfNotAlreadyHandled);
+                this.listenTo(yAxis, 'change', this.updateLimitsAndDraw);
+                this.listenTo(yAxis, 'change:key', this.resetYOffsetAndSeriesDataForYAxis.bind(this, id), this);
             });
         }
 
@@ -199,8 +161,7 @@ export default {
         this.listenTo(this.config.series, 'add', this.onSeriesAdd, this);
         this.listenTo(this.config.series, 'remove', this.onSeriesRemove, this);
 
-        this.listenTo(this.config.xAxis, 'change:displayRange', this.scheduleDraw);
-        this.listenTo(this.config.xAxis, 'change', this.redrawIfNotAlreadyHandled);
+        this.listenTo(this.config.xAxis, 'change', this.updateLimitsAndDraw);
         this.config.series.forEach(this.onSeriesAdd, this);
         this.$emit('chartLoaded');
     },
@@ -229,15 +190,13 @@ export default {
             this.changeLimitLines(mode, o, series);
         },
         onSeriesAdd(series) {
-            this.listenTo(series, `change:${HANDLED_ATTRIBUTES.xKey}`, this.reDraw, this);
-            this.listenTo(series, `change:${HANDLED_ATTRIBUTES.interpolate}`, this.changeInterpolate, this);
-            this.listenTo(series, `change:${HANDLED_ATTRIBUTES.markers}`, this.changeMarkers, this);
-            this.listenTo(series, `change:${HANDLED_ATTRIBUTES.alarmMarkers}`, this.changeAlarmMarkers, this);
-            this.listenTo(series, `change:${HANDLED_ATTRIBUTES.limitLines}`, this.changeLimitLines, this);
-            this.listenTo(series, `change:${HANDLED_ATTRIBUTES.yAxisId}`, this.resetAxisAndRedraw, this);
-            this.listenTo(series, `change:${HANDLED_ATTRIBUTES.markerShape}`, this.scheduleDraw, this);
-            this.listenTo(series, `change:${HANDLED_ATTRIBUTES.markerSize}`, this.scheduleDraw, this);
-            this.listenTo(series, 'change', this.redrawIfNotAlreadyHandled);
+            this.listenTo(series, 'change:xKey', this.reDraw, this);
+            this.listenTo(series, 'change:interpolate', this.changeInterpolate, this);
+            this.listenTo(series, 'change:markers', this.changeMarkers, this);
+            this.listenTo(series, 'change:alarmMarkers', this.changeAlarmMarkers, this);
+            this.listenTo(series, 'change:limitLines', this.changeLimitLines, this);
+            this.listenTo(series, 'change:yAxisId', this.resetAxisAndRedraw, this);
+            this.listenTo(series, 'change', this.scheduleDraw);
             this.listenTo(series, 'add', this.onAddPoint);
             this.makeChartElement(series);
             this.makeLimitLines(series);
@@ -570,21 +529,6 @@ export default {
 
             return true;
         },
-        redrawIfNotAlreadyHandled(attribute, value, oldValue) {
-            if (Object.keys(HANDLED_ATTRIBUTES).includes(attribute) && oldValue) {
-                return;
-            }
-
-            if (Object.keys(IMPLICIT_HANDLED_ATTRIBUTES).includes(attribute) && oldValue) {
-                return;
-            }
-
-            if (Object.keys(NO_HANDLING_NEEDED_ATTRIBUTES).includes(attribute) && oldValue) {
-                return;
-            }
-
-            this.updateLimitsAndDraw();
-        },
         updateLimitsAndDraw() {
             this.drawLimitLines();
             this.scheduleDraw();
@@ -681,13 +625,9 @@ export default {
             alarmSets.forEach(this.drawAlarmPoints, this);
         },
         drawLimitLines() {
-            Array.from(this.$refs.limitArea.children).forEach((el) => el.remove());
             this.config.series.models.forEach(series => {
                 const yAxisId = series.get('yAxisId');
-
-                if (this.hiddenYAxisIds.indexOf(yAxisId) < 0) {
-                    this.drawLimitLinesForSeries(yAxisId, series);
-                }
+                this.drawLimitLinesForSeries(yAxisId, series);
             });
         },
         drawLimitLinesForSeries(yAxisId, series) {
@@ -701,11 +641,12 @@ export default {
                 return;
             }
 
+            Array.from(this.$refs.limitArea.children).forEach((el) => el.remove());
             let limitPointOverlap = [];
             this.limitLines.forEach((limitLine) => {
                 let limitContainerEl = this.$refs.limitArea;
                 limitLine.limits.forEach((limit) => {
-                    if (series.keyString !== limit.seriesKey) {
+                    if (!series.includes(limit.seriesKey)) {
                         return;
                     }
 

src/plugins/plot/configuration/PlotConfigurationModel.js

@@ -68,26 +68,27 @@ export default class PlotConfigurationModel extends Model {
         //Add any axes in addition to the main yAxis above - we must always have at least 1 y-axis
         //Addition axes ids will be the MAIN_Y_AXES_ID + x where x is between 1 and MAX_ADDITIONAL_AXES
         this.additionalYAxes = [];
-        const hasAdditionalAxesConfiguration = Array.isArray(options.model.additionalYAxes);
-
-        for (let yAxisCount = 0; yAxisCount < MAX_ADDITIONAL_AXES; yAxisCount++) {
-            const yAxisId = MAIN_Y_AXES_ID + yAxisCount + 1;
-            const yAxis = hasAdditionalAxesConfiguration && options.model.additionalYAxes.find(additionalYAxis => additionalYAxis?.id === yAxisId);
-            if (yAxis) {
+        if (Array.isArray(options.model.additionalYAxes)) {
+            const maxLength = Math.min(MAX_ADDITIONAL_AXES, options.model.additionalYAxes.length);
+            for (let yAxisCount = 0; yAxisCount < maxLength; yAxisCount++) {
+                const yAxis = options.model.additionalYAxes[yAxisCount];
                 this.additionalYAxes.push(new YAxisModel({
                     model: yAxis,
                     plot: this,
                     openmct: options.openmct,
-                    id: yAxis.id
-                }));
-            } else {
-                this.additionalYAxes.push(new YAxisModel({
-                    plot: this,
-                    openmct: options.openmct,
-                    id: yAxisId
+                    id: yAxis.id || (MAIN_Y_AXES_ID + yAxisCount + 1)
                 }));
             }
         }
+
+        // If the saved options config doesn't include information about all the additional axes, we initialize the remaining here
+        for (let axesCount = this.additionalYAxes.length; axesCount < MAX_ADDITIONAL_AXES; axesCount++) {
+            this.additionalYAxes.push(new YAxisModel({
+                plot: this,
+                openmct: options.openmct,
+                id: MAIN_Y_AXES_ID + axesCount + 1
+            }));
+        }
         // end add additional axes
 
         this.legend = new LegendModel({

src/plugins/plot/configuration/PlotSeries.js

@@ -73,7 +73,7 @@ export default class PlotSeries extends Model {
 
         super(options);
 
-        this.logMode = this.getLogMode(options);
+        this.logMode = options.collection.plot.model.yAxis.logMode;
 
         this.listenTo(this, 'change:xKey', this.onXKeyChange, this);
         this.listenTo(this, 'change:yKey', this.onYKeyChange, this);
@@ -87,17 +87,6 @@ export default class PlotSeries extends Model {
         this.unPlottableValues = [undefined, Infinity, -Infinity];
     }
 
-    getLogMode(options) {
-        const yAxisId = this.get('yAxisId');
-        if (yAxisId === 1) {
-            return options.collection.plot.model.yAxis.logMode;
-        } else {
-            const foundYAxis = options.collection.plot.model.additionalYAxes.find(yAxis => yAxis.id === yAxisId);
-
-            return foundYAxis ? foundYAxis.logMode : false;
-        }
-    }
-
     /**
      * Set defaults for telemetry series.
      * @param {import('./Model').ModelOptions<PlotSeriesModelType, PlotSeriesModelOptions>} options
@@ -252,7 +241,6 @@ export default class PlotSeries extends Model {
         }
 
         const valueMetadata = this.metadata.value(newKey);
-        //TODO: Should we do this even if there is a persisted config?
         if (!this.persistedConfig || !this.persistedConfig.interpolate) {
             if (valueMetadata.format === 'enum') {
                 this.set('interpolate', 'stepAfter');

src/plugins/plot/configuration/SeriesCollection.js

@@ -67,10 +67,6 @@ export default class SeriesCollection extends Collection {
         }, this);
     }
     watchTelemetryContainer(domainObject) {
-        if (domainObject.type === 'telemetry.plot.stacked') {
-            return;
-        }
-
         const composition = this.openmct.composition.get(domainObject);
         this.listenTo(composition, 'add', this.addTelemetryObject, this);
         this.listenTo(composition, 'remove', this.removeTelemetryObject, this);

src/plugins/plot/configuration/YAxisModel.js

@@ -57,14 +57,7 @@ export default class YAxisModel extends Model {
         this.listenTo(this, 'change:logMode', this.onLogModeChange, this);
         this.listenTo(this, 'change:frozen', this.toggleFreeze, this);
         this.listenTo(this, 'change:range', this.updateDisplayRange, this);
-        const range = this.get('range');
-        this.updateDisplayRange(range);
-        //This is an edge case and should not happen
-        const invalidRange = !range || (range?.min === undefined || range?.max === undefined);
-        const invalidAutoScaleOff = (options.model.autoscale === false) && invalidRange;
-        if (invalidAutoScaleOff) {
-            this.set('autoscale', true);
-        }
+        this.updateDisplayRange(this.get('range'));
     }
     /**
      * @param {import('./SeriesCollection').default} seriesCollection
@@ -257,6 +250,23 @@ export default class YAxisModel extends Model {
             }
 
             this.set('displayRange', _range);
+        } else {
+            // Otherwise use the last known displayRange as the initial
+            // values for the user-defined range, so that we don't end up
+            // with any error from an undefined user range.
+
+            const _range = this.get('displayRange');
+
+            if (!_range) {
+                return;
+            }
+
+            if (this.get('logMode')) {
+                _range.min = antisymlog(_range.min, 10);
+                _range.max = antisymlog(_range.max, 10);
+            }
+
+            this.set('range', _range);
         }
     }
 
@@ -277,8 +287,7 @@ export default class YAxisModel extends Model {
         this.resetSeries();
     }
     resetSeries() {
-        const series = this.getSeriesForYAxis(this.seriesCollection);
-        series.forEach((plotSeries) => {
+        this.plot.series.forEach((plotSeries) => {
             plotSeries.logMode = this.get('logMode');
             plotSeries.reset(plotSeries.getSeriesData());
         });
@@ -367,8 +376,11 @@ export default class YAxisModel extends Model {
             autoscale: true,
             logMode: options.model?.logMode ?? false,
             autoscalePadding: 0.1,
-            id: options.id,
-            range: options.model?.range
+            id: options.id
+
+            // 'range' is not specified here, it is undefined at first. When the
+            // user turns off autoscale, the current 'displayRange' is used for
+            // the initial value of 'range'.
         };
     }
 }

src/plugins/plot/inspector/PlotOptionsBrowse.vue

@@ -27,7 +27,6 @@
     <ul
         v-if="!isStackedPlotObject"
         class="c-tree"
-        aria-label="Plot Series Properties"
     >
         <h2 title="Plot series display properties in this object">Plot Series</h2>
         <plot-options-item
@@ -44,7 +43,6 @@
             v-for="(yAxis, index) in yAxesWithSeries"
             :key="`yAxis-${index}`"
             class="l-inspector-part js-yaxis-properties"
-            :aria-label="yAxesWithSeries.length > 1 ? `Y Axis ${yAxis.id} Properties` : 'Y Axis Properties'"
         >
             <h2 title="Y axis settings for this object">Y Axis {{ yAxesWithSeries.length > 1 ? yAxis.id : '' }}</h2>
             <li class="grid-row">
@@ -73,7 +71,7 @@
                 </div>
             </li>
             <li
-                v-if="!yAxis.autoscale && yAxis.rangeMin !== ''"
+                v-if="!yAxis.autoscale && yAxis.rangeMin"
                 class="grid-row"
             >
                 <div
@@ -83,7 +81,7 @@
                 <div class="grid-cell value">{{ yAxis.rangeMin }}</div>
             </li>
             <li
-                v-if="!yAxis.autoscale && yAxis.rangeMax !== ''"
+                v-if="!yAxis.autoscale && yAxis.rangeMax"
                 class="grid-row"
             >
                 <div
@@ -95,7 +93,7 @@
         </ul>
     </div>
     <div
-        v-if="isStackedPlotObject || !isNestedWithinAStackedPlot"
+        v-if="plotSeries.length && (isStackedPlotObject || !isNestedWithinAStackedPlot)"
         class="grid-properties"
     >
         <ul
@@ -192,13 +190,10 @@ export default {
     mounted() {
         eventHelpers.extend(this);
         this.config = this.getConfig();
-        if (!this.isStackedPlotObject) {
-            this.initYAxesConfiguration();
-            this.registerListeners();
-        } else {
-            this.initLegendConfiguration();
-        }
+        this.initYAxesConfiguration();
 
+        this.registerListeners();
+        this.initLegendConfiguration();
         this.loaded = true;
 
     },
@@ -217,8 +212,8 @@ export default {
                     autoscale: this.config.yAxis.get('autoscale'),
                     logMode: this.config.yAxis.get('logMode'),
                     autoscalePadding: this.config.yAxis.get('autoscalePadding'),
-                    rangeMin: range?.min ?? '',
-                    rangeMax: range?.max ?? ''
+                    rangeMin: range ? range.min : '',
+                    rangeMax: range ? range.max : ''
                 });
                 this.config.additionalYAxes.forEach(yAxis => {
                     range = yAxis.get('range');
@@ -230,8 +225,8 @@ export default {
                         autoscale: yAxis.get('autoscale'),
                         logMode: yAxis.get('logMode'),
                         autoscalePadding: yAxis.get('autoscalePadding'),
-                        rangeMin: range?.min ?? '',
-                        rangeMax: range?.max ?? ''
+                        rangeMin: range ? range.min : '',
+                        rangeMax: range ? range.max : ''
                     });
                 });
             }
@@ -250,9 +245,9 @@ export default {
             }
         },
         getConfig() {
-            const configId = this.openmct.objects.makeKeyString(this.domainObject.identifier);
+            this.configId = this.openmct.objects.makeKeyString(this.domainObject.identifier);
 
-            return configStore.get(configId);
+            return configStore.get(this.configId);
         },
         registerListeners() {
             if (this.config) {

src/plugins/plot/inspector/PlotOptionsEdit.vue

@@ -27,7 +27,6 @@
     <ul
         v-if="!isStackedPlotObject"
         class="c-tree"
-        aria-label="Plot Series Properties"
     >
         <h2 title="Display properties for this object">Plot Series</h2>
         <li
@@ -54,6 +53,7 @@
     >
         <h2 title="Legend options">Legend</h2>
         <legend-form
+            v-if="plotSeries.length"
             class="grid-properties"
             :legend="config.legend"
         />
@@ -97,23 +97,20 @@ export default {
     mounted() {
         eventHelpers.extend(this);
         this.config = this.getConfig();
-        if (!this.isStackedPlotObject) {
-            this.yAxes = [{
-                id: this.config.yAxis.id,
-                seriesCount: 0
-            }];
-            if (this.config.additionalYAxes) {
-                this.yAxes = this.yAxes.concat(this.config.additionalYAxes.map(yAxis => {
-                    return {
-                        id: yAxis.id,
-                        seriesCount: 0
-                    };
-                }));
-            }
-
-            this.registerListeners();
+        this.yAxes = [{
+            id: this.config.yAxis.id,
+            seriesCount: 0
+        }];
+        if (this.config.additionalYAxes) {
+            this.yAxes = this.yAxes.concat(this.config.additionalYAxes.map(yAxis => {
+                return {
+                    id: yAxis.id,
+                    seriesCount: 0
+                };
+            }));
         }
 
+        this.registerListeners();
         this.loaded = true;
     },
     beforeDestroy() {
@@ -153,50 +150,23 @@ export default {
 
         addSeries(series, index) {
             const yAxisId = series.get('yAxisId');
-            this.incrementAxisUsageCount(yAxisId);
+            this.updateAxisUsageCount(yAxisId, 1);
             this.$set(this.plotSeries, index, series);
             this.setYAxisLabel(yAxisId);
-
-            if (this.isStackedPlotObject) {
-                return;
-            }
-
-            // If the series moves to a different yAxis, update the seriesCounts for both yAxes
-            // so we can display the configuration options for all used yAxes
-            this.listenTo(series, 'change:yAxisId', (newYAxisId, oldYAxisId) => {
-                this.incrementAxisUsageCount(newYAxisId);
-                this.decrementAxisUsageCount(oldYAxisId);
-            }, this);
         },
 
         removeSeries(series, index) {
             const yAxisId = series.get('yAxisId');
-            this.decrementAxisUsageCount(yAxisId);
+            this.updateAxisUsageCount(yAxisId, -1);
             this.plotSeries.splice(index, 1);
             this.setYAxisLabel(yAxisId);
-
-            if (this.isStackedPlotObject) {
-                return;
-            }
-
-            this.stopListening(series, 'change:yAxisId');
-        },
-
-        incrementAxisUsageCount(yAxisId) {
-            this.updateAxisUsageCount(yAxisId, 1);
-        },
-
-        decrementAxisUsageCount(yAxisId) {
-            this.updateAxisUsageCount(yAxisId, -1);
         },
 
         updateAxisUsageCount(yAxisId, updateCount) {
             const foundYAxis = this.findYAxisForId(yAxisId);
-            if (!foundYAxis) {
-                throw new Error(`yAxis with id ${yAxisId} not found`);
+            if (foundYAxis) {
+                foundYAxis.seriesCount = foundYAxis.seriesCount + updateCount;
             }
-
-            foundYAxis.seriesCount = foundYAxis.seriesCount + updateCount;
         },
 
         updateSeriesConfigForObject(config) {

src/plugins/plot/inspector/PlotsInspectorViewProvider.js

@@ -12,12 +12,11 @@ export default function PlotsInspectorViewProvider(openmct) {
             }
 
             let object = selection[0][0].context.item;
-            let parent = selection[0].length > 1 && selection[0][1].context.item;
 
             const isOverlayPlotObject = object && object.type === 'telemetry.plot.overlay';
-            const isParentStackedPlotObject = parent && parent.type === 'telemetry.plot.stacked';
+            const isStackedPlotObject = object && object.type === 'telemetry.plot.stacked';
 
-            return isOverlayPlotObject || isParentStackedPlotObject;
+            return isStackedPlotObject || isOverlayPlotObject;
         },
         view: function (selection) {
             let component;

src/plugins/plot/inspector/StackedPlotsInspectorViewProvider.js

@@ -12,10 +12,12 @@ export default function StackedPlotsInspectorViewProvider(openmct) {
             }
 
             const object = selection[0][0].context.item;
+            const parent = selection[0].length > 1 && selection[0][1].context.item;
 
-            const isStackedPlotObject = object && object.type === 'telemetry.plot.stacked';
+            const isOverlayPlotObject = object && object.type === 'telemetry.plot.overlay';
+            const isParentStackedPlotObject = parent && parent.type === 'telemetry.plot.stacked';
 
-            return isStackedPlotObject;
+            return !isOverlayPlotObject && isParentStackedPlotObject;
         },
         view: function (selection) {
             let component;

src/plugins/plot/inspector/forms/YAxisForm.vue

@@ -1,9 +1,6 @@
 <template>
 <div v-if="loaded">
-    <ul
-        class="l-inspector-part"
-        :aria-label="id > 1 ? `Y Axis ${id} Properties` : 'Y Axis Properties'"
-    >
+    <ul class="l-inspector-part">
         <h2>Y Axis {{ id > 1 ? id : '' }}</h2>
         <li class="grid-row">
             <div
@@ -81,7 +78,7 @@
             >Minimum Value</div>
             <div class="grid-cell value">
                 <input
-                    v-model.lazy="rangeMin"
+                    v-model="rangeMin"
                     class="c-input--flex"
                     type="number"
                     @change="updateForm('range')"
@@ -94,7 +91,7 @@
                 title="Maximum Y axis value."
             >Maximum Value</div>
             <div class="grid-cell value"><input
-                v-model.lazy="rangeMax"
+                v-model="rangeMax"
                 class="c-input--flex"
                 type="number"
                 @change="updateForm('range')"
@@ -131,12 +128,6 @@ export default {
             loaded: false
         };
     },
-    beforeDestroy() {
-        if (this.autoscale === false && this.validationErrors.range) {
-            this.autoscale = true;
-            this.updateForm('autoscale');
-        }
-    },
     mounted() {
         eventHelpers.extend(this);
         this.getConfig();
@@ -178,9 +169,12 @@ export default {
                     objectPath: `${prefix}.logMode`
                 },
                 range: {
-                    objectPath: `${prefix}.range`,
+                    objectPath: `${prefix}.range'`,
                     coerce: function coerceRange(range) {
-                        const newRange = {};
+                        const newRange = {
+                            min: -1,
+                            max: 1
+                        };
 
                         if (range && typeof range.min !== 'undefined' && range.min !== null) {
                             newRange.min = Number(range.min);
@@ -225,18 +219,16 @@ export default {
             this.autoscale = this.yAxis.get('autoscale');
             this.logMode = this.yAxis.get('logMode');
             this.autoscalePadding = this.yAxis.get('autoscalePadding');
-            const range = this.yAxis.get('range');
-            if (range && range.min !== undefined && range.max !== undefined) {
-                this.rangeMin = range.min;
-                this.rangeMax = range.max;
-            }
+            const range = this.yAxis.get('range') ?? this.yAxis.get('displayRange');
+            this.rangeMin = range?.min;
+            this.rangeMax = range?.max;
         },
         getPrefix() {
             let prefix = 'yAxis';
             if (this.isAdditionalYAxis) {
                 let index = -1;
-                if (this.domainObject?.configuration?.additionalYAxes) {
-                    index = this.domainObject?.configuration?.additionalYAxes.findIndex((yAxis) => {
+                if (this.additionalYAxes) {
+                    index = this.additionalYAxes.findIndex((yAxis) => {
                         return yAxis.id === this.id;
                     });
                 }
@@ -316,15 +308,6 @@ export default {
                             });
                         }
                     }
-
-                    //If autoscale is turned off, we must know what the user defined min and max ranges are
-                    if (formKey === 'autoscale' && this.autoscale === false) {
-                        const rangeFormField = this.fields.range;
-                        this.validationErrors.range = rangeFormField.validate?.({
-                            min: this.rangeMin,
-                            max: this.rangeMax
-                        }, this.yAxis);
-                    }
                 }
             }
         }

src/plugins/plot/legend/PlotLegend.vue

@@ -49,10 +49,10 @@
                 title="Cursor is point locked. Click anywhere in the plot to unlock."
             ></div>
             <plot-legend-item-collapsed
-                v-for="(seriesObject, seriesIndex) in seriesModels"
-                :key="`${seriesObject.keyString}-${seriesIndex}-collapsed`"
+                v-for="(seriesObject, seriesIndex) in series"
+                :key="`${seriesObject.keyString}-${seriesIndex}`"
                 :highlights="highlights"
-                :value-to-show-when-collapsed="valueToShowWhenCollapsed"
+                :value-to-show-when-collapsed="legend.get('valueToShowWhenCollapsed')"
                 :series-object="seriesObject"
                 @legendHoverChanged="legendHoverChanged"
             />
@@ -95,10 +95,11 @@
                 </thead>
                 <tbody>
                     <plot-legend-item-expanded
-                        v-for="(seriesObject, seriesIndex) in seriesModels"
+                        v-for="(seriesObject, seriesIndex) in series"
                         :key="`${seriesObject.keyString}-${seriesIndex}-expanded`"
                         :series-object="seriesObject"
                         :highlights="highlights"
+                        :legend="legend"
                         @legendHoverChanged="legendHoverChanged"
                     />
                 </tbody>
@@ -110,9 +111,6 @@
 <script>
 import PlotLegendItemCollapsed from "./PlotLegendItemCollapsed.vue";
 import PlotLegendItemExpanded from "./PlotLegendItemExpanded.vue";
-import configStore from "../configuration/ConfigStore";
-import eventHelpers from "../lib/eventHelpers";
-
 export default {
     components: {
         PlotLegendItemExpanded,
@@ -126,120 +124,57 @@ export default {
                 return false;
             }
         },
+        series: {
+            type: Array,
+            default() {
+                return [];
+            }
+        },
         highlights: {
             type: Array,
             default() {
                 return [];
             }
+        },
+        legend: {
+            type: Object,
+            default() {
+                return {};
+            }
         }
     },
     data() {
         return {
-            isLegendExpanded: false,
-            seriesModels: [],
-            loaded: false
+            isLegendExpanded: this.legend.get('expanded') === true
         };
     },
     computed: {
         showUnitsWhenExpanded() {
-            return this.loaded && this.legend.get('showUnitsWhenExpanded') === true;
+            return this.legend.get('showUnitsWhenExpanded') === true;
         },
         showMinimumWhenExpanded() {
-            return this.loaded && this.legend.get('showMinimumWhenExpanded') === true;
+            return this.legend.get('showMinimumWhenExpanded') === true;
         },
         showMaximumWhenExpanded() {
-            return this.loaded && this.legend.get('showMaximumWhenExpanded') === true;
+            return this.legend.get('showMaximumWhenExpanded') === true;
         },
         showValueWhenExpanded() {
-            return this.loaded && this.legend.get('showValueWhenExpanded') === true;
+            return this.legend.get('showValueWhenExpanded') === true;
         },
         showTimestampWhenExpanded() {
-            return this.loaded && this.legend.get('showTimestampWhenExpanded') === true;
+            return this.legend.get('showTimestampWhenExpanded') === true;
         },
         isLegendHidden() {
-            return this.loaded && this.legend.get('hideLegendWhenSmall') === true;
-        },
-        valueToShowWhenCollapsed() {
-            return this.loaded && this.legend.get('valueToShowWhenCollapsed');
+            return this.legend.get('hideLegendWhenSmall') === true;
         }
     },
-    mounted() {
-        this.seriesModels = [];
-        eventHelpers.extend(this);
-        this.config = this.getConfig();
-        this.legend = this.config.legend;
-        this.loaded = true;
-        this.isLegendExpanded = this.legend.get('expanded') === true;
-        this.listenTo(this.config.legend, 'change:position', this.updatePosition, this);
-        this.updatePosition();
-
-        this.initialize();
-    },
-    beforeDestroy() {
-        if (this.objectComposition) {
-            this.objectComposition.off('add', this.addTelemetryObject);
-            this.objectComposition.off('remove', this.removeTelemetryObject);
-        }
-
-        this.stopListening();
-    },
     methods: {
-        initialize() {
-            if (this.domainObject.type === 'telemetry.plot.stacked') {
-                this.objectComposition = this.openmct.composition.get(this.domainObject);
-                this.objectComposition.on('add', this.addTelemetryObject);
-                this.objectComposition.on('remove', this.removeTelemetryObject);
-                this.objectComposition.load();
-            } else {
-                this.registerListeners(this.config);
-            }
-        },
-        getConfig() {
-            const configId = this.openmct.objects.makeKeyString(this.domainObject.identifier);
-
-            return configStore.get(configId);
-        },
-        addTelemetryObject(object) {
-            //get the config for each child
-            const configId = this.openmct.objects.makeKeyString(object.identifier);
-            const config = configStore.get(configId);
-            if (config) {
-                this.registerListeners(config);
-            }
-        },
-        removeTelemetryObject(identifier) {
-            const configId = this.openmct.objects.makeKeyString(identifier);
-            const config = configStore.get(configId);
-            if (config) {
-                config.series.forEach(this.removeSeries, this);
-            }
-        },
-        registerListeners(config) {
-        //listen to any changes to the telemetry endpoints that are associated with the child
-            this.listenTo(config.series, 'add', this.addSeries, this);
-            this.listenTo(config.series, 'remove', this.removeSeries, this);
-            config.series.forEach(this.addSeries, this);
-        },
-        addSeries(series) {
-            this.$set(this.seriesModels, this.seriesModels.length, series);
-        },
-
-        removeSeries(plotSeries) {
-            this.stopListening(plotSeries);
-
-            const seriesIndex = this.seriesModels.findIndex(series => series.keyString === plotSeries.keyString);
-            this.seriesModels.splice(seriesIndex, 1);
-        },
         expandLegend() {
             this.isLegendExpanded = !this.isLegendExpanded;
             this.legend.set('expanded', this.isLegendExpanded);
-            this.$emit('expanded', this.isLegendExpanded);
         },
         legendHoverChanged(data) {
             this.$emit('legendHoverChanged', data);
-        },
-        updatePosition() {
-            this.$emit('position', this.legend.get('position'));
         }
     }
 };

src/plugins/plot/legend/PlotLegendItemCollapsed.vue

@@ -57,12 +57,15 @@
 import {getLimitClass} from "@/plugins/plot/chart/limitUtil";
 import eventHelpers from "../lib/eventHelpers";
 import stalenessMixin from '@/ui/mixins/staleness-mixin';
-import configStore from "../configuration/ConfigStore";
 
 export default {
     mixins: [stalenessMixin],
     inject: ['openmct', 'domainObject'],
     props: {
+        valueToShowWhenCollapsed: {
+            type: String,
+            required: true
+        },
         seriesObject: {
             type: Object,
             required: true,
@@ -85,14 +88,10 @@ export default {
             formattedYValue: '',
             formattedXValue: '',
             mctLimitStateClass: '',
-            formattedYValueFromStats: '',
-            loaded: false
+            formattedYValueFromStats: ''
         };
     },
     computed: {
-        valueToShowWhenCollapsed() {
-            return this.loaded ? this.legend.get('valueToShowWhenCollapsed') : [];
-        },
         valueToDisplayWhenCollapsedClass() {
             return `value-to-display-${ this.valueToShowWhenCollapsed }`;
         },
@@ -110,9 +109,6 @@ export default {
     },
     mounted() {
         eventHelpers.extend(this);
-        this.config = this.getConfig();
-        this.legend = this.config.legend;
-        this.loaded = true;
         this.listenTo(this.seriesObject, 'change:color', (newColor) => {
             this.updateColor(newColor);
         }, this);
@@ -126,13 +122,8 @@ export default {
         this.stopListening();
     },
     methods: {
-        getConfig() {
-            const configId = this.openmct.objects.makeKeyString(this.domainObject.identifier);
-
-            return configStore.get(configId);
-        },
         initialize(highlightedObject) {
-            const seriesObject = highlightedObject?.series || this.seriesObject;
+            const seriesObject = highlightedObject ? highlightedObject.series : this.seriesObject;
 
             this.isMissing = seriesObject.domainObject.status === 'missing';
             this.colorAsHexString = seriesObject.get('color').asHexString();

src/plugins/plot/legend/PlotLegendItemExpanded.vue

@@ -83,7 +83,6 @@
 import {getLimitClass} from "@/plugins/plot/chart/limitUtil";
 import eventHelpers from "@/plugins/plot/lib/eventHelpers";
 import stalenessMixin from '@/ui/mixins/staleness-mixin';
-import configStore from "../configuration/ConfigStore";
 
 export default {
     mixins: [stalenessMixin],
@@ -101,6 +100,10 @@ export default {
             default() {
                 return [];
             }
+        },
+        legend: {
+            type: Object,
+            required: true
         }
     },
     data() {
@@ -113,25 +116,24 @@ export default {
             formattedXValue: '',
             formattedMinY: '',
             formattedMaxY: '',
-            mctLimitStateClass: '',
-            loaded: false
+            mctLimitStateClass: ''
         };
     },
     computed: {
         showUnitsWhenExpanded() {
-            return this.loaded && this.legend.get('showUnitsWhenExpanded') === true;
+            return this.legend.get('showUnitsWhenExpanded') === true;
         },
         showMinimumWhenExpanded() {
-            return this.loaded && this.legend.get('showMinimumWhenExpanded') === true;
+            return this.legend.get('showMinimumWhenExpanded') === true;
         },
         showMaximumWhenExpanded() {
-            return this.loaded && this.legend.get('showMaximumWhenExpanded') === true;
+            return this.legend.get('showMaximumWhenExpanded') === true;
         },
         showValueWhenExpanded() {
-            return this.loaded && this.legend.get('showValueWhenExpanded') === true;
+            return this.legend.get('showValueWhenExpanded') === true;
         },
         showTimestampWhenExpanded() {
-            return this.loaded && this.legend.get('showTimestampWhenExpanded') === true;
+            return this.legend.get('showTimestampWhenExpanded') === true;
         }
     },
     watch: {
@@ -144,9 +146,6 @@ export default {
     },
     mounted() {
         eventHelpers.extend(this);
-        this.config = this.getConfig();
-        this.legend = this.config.legend;
-        this.loaded = true;
         this.listenTo(this.seriesObject, 'change:color', (newColor) => {
             this.updateColor(newColor);
         }, this);
@@ -160,13 +159,8 @@ export default {
         this.stopListening();
     },
     methods: {
-        getConfig() {
-            const configId = this.openmct.objects.makeKeyString(this.domainObject.identifier);
-
-            return configStore.get(configId);
-        },
         initialize(highlightedObject) {
-            const seriesObject = highlightedObject?.series || this.seriesObject;
+            const seriesObject = highlightedObject ? highlightedObject.series : this.seriesObject;
 
             this.isMissing = seriesObject.domainObject.status === 'missing';
             this.colorAsHexString = seriesObject.get('color').asHexString();

src/plugins/plot/pluginSpec.js

@@ -28,7 +28,7 @@ import EventEmitter from "EventEmitter";
 import PlotOptions from "./inspector/PlotOptions.vue";
 import PlotConfigurationModel from "./configuration/PlotConfigurationModel";
 
-const TEST_KEY_ID = 'some-other-key';
+const TEST_KEY_ID = 'test-key';
 
 describe("the plugin", function () {
     let element;
@@ -533,30 +533,6 @@ describe("the plugin", function () {
                 expect(openmct.telemetry.request).toHaveBeenCalledTimes(2);
 
             });
-
-            describe('limits', () => {
-
-                it('lines are not displayed by default', () => {
-                    let limitEl = element.querySelectorAll(".js-limit-area .js-limit-line");
-                    expect(limitEl.length).toBe(0);
-                });
-
-                it('lines are displayed when configuration is set to true', (done) => {
-                    const configId = openmct.objects.makeKeyString(testTelemetryObject.identifier);
-                    const config = configStore.get(configId);
-                    config.yAxis.set('displayRange', {
-                        min: 0,
-                        max: 4
-                    });
-                    config.series.models[0].set('limitLines', true);
-
-                    Vue.nextTick(() => {
-                        let limitEl = element.querySelectorAll(".js-limit-area .js-limit-line");
-                        expect(limitEl.length).toBe(4);
-                        done();
-                    });
-                });
-            });
         });
 
         describe('controls in time strip view', () => {
@@ -891,5 +867,24 @@ describe("the plugin", function () {
                 expect(colorSwatch).toBeDefined();
             });
         });
+
+        describe('limits', () => {
+
+            it('lines are not displayed by default', () => {
+                let limitEl = element.querySelectorAll(".js-limit-area .js-limit-line");
+                expect(limitEl.length).toBe(0);
+            });
+
+            xit('lines are displayed when configuration is set to true', (done) => {
+                config.series.models[0].set('limitLines', true);
+
+                Vue.nextTick(() => {
+                    let limitEl = element.querySelectorAll(".js-limit-area .js-limit-line");
+                    expect(limitEl.length).toBe(4);
+                    done();
+                });
+
+            });
+        });
     });
 });

src/plugins/plot/stackedPlot/StackedPlot.vue

@@ -27,34 +27,31 @@
     :class="[plotLegendExpandedStateClass, plotLegendPositionClass]"
 >
     <plot-legend
-        v-if="compositionObjectsConfigLoaded"
         :cursor-locked="!!lockHighlightPoint"
+        :series="seriesModels"
         :highlights="highlights"
+        :legend="legend"
         @legendHoverChanged="legendHoverChanged"
-        @expanded="updateExpanded"
-        @position="updatePosition"
     />
-    <div
-        class="l-view-section"
-    >
+    <div class="l-view-section">
         <stacked-plot-item
-            v-for="objectWrapper in compositionObjects"
-            :key="objectWrapper.keyString"
+            v-for="object in compositionObjects"
+            :key="object.id"
             class="c-plot--stacked-container"
-            :child-object="objectWrapper.object"
+            :child-object="object"
             :options="options"
             :grid-lines="gridLines"
             :color-palette="colorPalette"
             :cursor-guide="cursorGuide"
             :show-limit-line-labels="showLimitLineLabels"
-            :parent-y-tick-width="maxTickWidth"
-            @plotYTickWidth="onYTickWidthChange"
+            :plot-tick-width="maxTickWidth"
+            @plotTickWidth="onTickWidthChange"
             @loadingUpdated="loadingUpdated"
             @cursorGuide="onCursorGuideChange"
             @gridLines="onGridLinesChange"
             @lockHighlightPoint="lockHighlightPointUpdated"
             @highlights="highlightsUpdated"
-            @configLoaded="configLoadedForObject(objectWrapper.keyString)"
+            @configLoaded="registerSeriesListeners"
         />
     </div>
 </div>
@@ -69,13 +66,14 @@ import ColorPalette from "@/ui/color/ColorPalette";
 import PlotLegend from "../legend/PlotLegend.vue";
 import StackedPlotItem from './StackedPlotItem.vue';
 import ImageExporter from '../../../exporters/ImageExporter';
+import eventHelpers from "@/plugins/plot/lib/eventHelpers";
 
 export default {
     components: {
         StackedPlotItem,
         PlotLegend
     },
-    inject: ['openmct', 'domainObject', 'path'],
+    inject: ['openmct', 'domainObject', 'composition', 'path'],
     props: {
         options: {
             type: Object,
@@ -89,59 +87,48 @@ export default {
             hideExportButtons: false,
             cursorGuide: false,
             gridLines: true,
-            configLoaded: {},
+            loading: false,
             compositionObjects: [],
             tickWidthMap: {},
+            legend: {},
             loaded: false,
             lockHighlightPoint: false,
             highlights: [],
+            seriesModels: [],
             showLimitLineLabels: undefined,
-            colorPalette: new ColorPalette(),
-            compositionObjectsConfigLoaded: false,
-            position: 'top',
-            expanded: false
+            colorPalette: new ColorPalette()
         };
     },
     computed: {
         plotLegendPositionClass() {
-            return `plot-legend-${this.position}`;
+            return `plot-legend-${this.config.legend.get('position')}`;
         },
         plotLegendExpandedStateClass() {
-            if (this.expanded) {
+            if (this.config.legend.get('expanded')) {
                 return 'plot-legend-expanded';
             } else {
                 return 'plot-legend-collapsed';
             }
         },
-        /**
-       * Returns the maximum width of the left and right y axes ticks of this stacked plots children
-       * @returns {{rightTickWidth: number, leftTickWidth: number, hasMultipleLeftAxes: boolean}}
-       */
         maxTickWidth() {
-            const tickWidthValues = Object.values(this.tickWidthMap);
-            const maxLeftTickWidth = Math.max(...tickWidthValues.map(tickWidthItem => tickWidthItem.leftTickWidth));
-            const maxRightTickWidth = Math.max(...tickWidthValues.map(tickWidthItem => tickWidthItem.rightTickWidth));
-            const hasMultipleLeftAxes = tickWidthValues.some(tickWidthItem => tickWidthItem.hasMultipleLeftAxes === true);
-
-            return {
-                leftTickWidth: maxLeftTickWidth,
-                rightTickWidth: maxRightTickWidth,
-                hasMultipleLeftAxes
-            };
+            return Math.max(...Object.values(this.tickWidthMap));
         }
     },
     beforeDestroy() {
         this.destroy();
     },
     mounted() {
-        //We only need to initialize the stacked plot config for legend properties
+        eventHelpers.extend(this);
+        this.seriesConfig = {};
+
         const configId = this.openmct.objects.makeKeyString(this.domainObject.identifier);
         this.config = this.getConfig(configId);
 
+        this.legend = this.config.legend;
+
         this.loaded = true;
         this.imageExporter = new ImageExporter(this.openmct);
 
-        this.composition = this.openmct.composition.get(this.domainObject);
         this.composition.on('add', this.addChild);
         this.composition.on('remove', this.removeChild);
         this.composition.on('reorder', this.compositionReorder);
@@ -155,6 +142,7 @@ export default {
                     id: configId,
                     domainObject: this.domainObject,
                     openmct: this.openmct,
+                    palette: this.colorPalette,
                     callback: (data) => {
                         this.data = data;
                     }
@@ -167,19 +155,10 @@ export default {
         loadingUpdated(loaded) {
             this.loading = loaded;
         },
-        configLoadedForObject(childObjIdentifier) {
-            const childObjId = this.openmct.objects.makeKeyString(childObjIdentifier);
-            this.configLoaded[childObjId] = true;
-            this.setConfigLoadedForComposition();
-        },
-        setConfigLoadedForComposition() {
-            this.compositionObjectsConfigLoaded = this.compositionObjects.length && this.compositionObjects.every(childObject => {
-                const id = childObject.keyString;
-
-                return this.configLoaded[id] === true;
-            });
-        },
         destroy() {
+            this.stopListening();
+            configStore.deleteStore(this.config.id);
+
             this.composition.off('add', this.addChild);
             this.composition.off('remove', this.removeChild);
             this.composition.off('reorder', this.compositionReorder);
@@ -188,16 +167,9 @@ export default {
         addChild(child) {
             const id = this.openmct.objects.makeKeyString(child.identifier);
 
-            this.$set(this.tickWidthMap, id, {
-                leftTickWidth: 0,
-                rightTickWidth: 0
-            });
+            this.$set(this.tickWidthMap, id, 0);
 
-            this.compositionObjects.push({
-                object: child,
-                keyString: id
-            });
-            this.setConfigLoadedForComposition();
+            this.compositionObjects.push(child);
         },
 
         removeChild(childIdentifier) {
@@ -205,36 +177,26 @@ export default {
 
             this.$delete(this.tickWidthMap, id);
 
-            const childObj = this.compositionObjects.filter((c) => {
-                const identifier = c.keyString;
-
-                return identifier === id;
-            })[0];
-
-            if (childObj) {
-                if (childObj.object.type !== 'telemetry.plot.overlay') {
-                    const config = this.getConfig(childObj.keyString);
-                    if (config) {
-                        config.series.remove(config.series.at(0));
-                    }
-                }
-            }
-
-            this.compositionObjects = this.compositionObjects.filter((c) => {
-                const identifier = c.keyString;
-
-                return identifier !== id;
-            });
-
             const configIndex = this.domainObject.configuration.series.findIndex((seriesConfig) => {
                 return this.openmct.objects.areIdsEqual(seriesConfig.identifier, childIdentifier);
             });
             if (configIndex > -1) {
-                const cSeries = this.domainObject.configuration.series.slice();
-                this.openmct.objects.mutate(this.domainObject, 'configuration.series', cSeries);
+                this.domainObject.configuration.series.splice(configIndex, 1);
             }
 
-            this.setConfigLoadedForComposition();
+            this.removeSeries({
+                keyString: id
+            });
+
+            const childObj = this.compositionObjects.filter((c) => {
+                const identifier = this.openmct.objects.makeKeyString(c.identifier);
+
+                return identifier === id;
+            })[0];
+            if (childObj) {
+                const index = this.compositionObjects.indexOf(childObj);
+                this.compositionObjects.splice(index, 1);
+            }
         },
 
         compositionReorder(reorderPlan) {
@@ -247,10 +209,7 @@ export default {
 
         resetTelemetryAndTicks(domainObject) {
             this.compositionObjects = [];
-            this.tickWidthMap = {
-                leftTickWidth: 0,
-                rightTickWidth: 0
-            };
+            this.tickWidthMap = {};
         },
 
         exportJPG() {
@@ -273,18 +232,12 @@ export default {
                     this.hideExportButtons = false;
                 }.bind(this));
         },
-        /**
-         * @typedef {Object} PlotYTickData
-         * @property {Number} leftTickWidth the width of the ticks for all the y axes on the left of the plot.
-         * @property {Number} rightTickWidth the width of the ticks for all the y axes on the right of the plot.
-         * @property {Boolean} hasMultipleLeftAxes whether or not there is more than one left y axis.
-         */
-        onYTickWidthChange(data, plotId) {
+        onTickWidthChange(width, plotId) {
             if (!Object.prototype.hasOwnProperty.call(this.tickWidthMap, plotId)) {
                 return;
             }
 
-            this.$set(this.tickWidthMap, plotId, data);
+            this.$set(this.tickWidthMap, plotId, width);
         },
         legendHoverChanged(data) {
             this.showLimitLineLabels = data;
@@ -292,18 +245,39 @@ export default {
         lockHighlightPointUpdated(data) {
             this.lockHighlightPoint = data;
         },
-        updateExpanded(expanded) {
-            this.expanded = expanded;
-        },
-        updatePosition(position) {
-            this.position = position;
-        },
-        updateReady(ready) {
-            this.configReady = ready;
-        },
         highlightsUpdated(data) {
             this.highlights = data;
         },
+        registerSeriesListeners(configId) {
+            const config = this.getConfig(configId);
+            this.seriesConfig[configId] = config;
+            const childObject = config.get('domainObject');
+
+            //TODO differentiate between objects with composition and those without
+            if (childObject.type === 'telemetry.plot.overlay') {
+                this.listenTo(config.series, 'add', this.addSeries, this);
+                this.listenTo(config.series, 'remove', this.removeSeries, this);
+            }
+
+            config.series.models.forEach(this.addSeries, this);
+        },
+        addSeries(series) {
+            const childObject = series.domainObject;
+            //don't add the series if it can have child series this will happen in registerSeriesListeners
+            if (childObject.type !== 'telemetry.plot.overlay') {
+                const index = this.seriesModels.length;
+                this.$set(this.seriesModels, index, series);
+            }
+
+        },
+        removeSeries(plotSeries) {
+            const index = this.seriesModels.findIndex(seriesModel => seriesModel.keyString === plotSeries.keyString);
+            if (index > -1) {
+                this.$delete(this.seriesModels, index);
+            }
+
+            this.stopListening(plotSeries);
+        },
         onCursorGuideChange(cursorGuide) {
             this.cursorGuide = cursorGuide === true;
         },

src/plugins/plot/stackedPlot/StackedPlotItem.vue

@@ -20,9 +20,7 @@
  at runtime from the About dialog for additional information.
 -->
 <template>
-<div
-    :aria-label="`Stacked Plot Item ${childObject.name}`"
-></div>
+<div></div>
 </template>
 <script>
 
@@ -30,7 +28,6 @@ import MctPlot from '../MctPlot.vue';
 import Vue from "vue";
 import conditionalStylesMixin from "./mixins/objectStyles-mixin";
 import stalenessMixin from '@/ui/mixins/staleness-mixin';
-import StalenessUtils from '@/utils/staleness';
 import configStore from "@/plugins/plot/configuration/ConfigStore";
 import PlotConfigurationModel from "@/plugins/plot/configuration/PlotConfigurationModel";
 import ProgressBar from "../../../ui/components/ProgressBar.vue";
@@ -75,22 +72,13 @@ export default {
                 return undefined;
             }
         },
-        parentYTickWidth: {
-            type: Object,
+        plotTickWidth: {
+            type: Number,
             default() {
-                return {
-                    leftTickWidth: 0,
-                    rightTickWidth: 0,
-                    hasMultipleLeftAxes: false
-                };
+                return 0;
             }
         }
     },
-    data() {
-        return {
-            staleObjects: []
-        };
-    },
     watch: {
         gridLines(newGridLines) {
             this.updateComponentProp('gridLines', newGridLines);
@@ -98,29 +86,20 @@ export default {
         cursorGuide(newCursorGuide) {
             this.updateComponentProp('cursorGuide', newCursorGuide);
         },
-        parentYTickWidth(width) {
-            this.updateComponentProp('parentYTickWidth', width);
+        plotTickWidth(width) {
+            this.updateComponentProp('plotTickWidth', width);
         },
         showLimitLineLabels: {
             handler(data) {
                 this.updateComponentProp('limitLineLabels', data);
             },
             deep: true
-        },
-        staleObjects() {
-            this.isStale = this.staleObjects.length > 0;
-            this.updateComponentProp('isStale', this.isStale);
         }
     },
     mounted() {
-        this.stalenessSubscription = {};
         this.updateView();
-        this.isEditing = this.openmct.editor.isEditing();
-        this.openmct.editor.on('isEditing', this.setEditState);
     },
     beforeDestroy() {
-        this.openmct.editor.off('isEditing', this.setEditState);
-
         if (this.removeSelectable) {
             this.removeSelectable();
         }
@@ -128,22 +107,8 @@ export default {
         if (this.component) {
             this.component.$destroy();
         }
-
-        this.destroyStalenessListeners();
     },
     methods: {
-        setEditState(isEditing) {
-            this.isEditing = isEditing;
-
-            if (this.isEditing) {
-                this.setSelection();
-            } else {
-                if (this.removeSelectable) {
-                    this.removeSelectable();
-                }
-            }
-        },
-
         updateComponentProp(prop, value) {
             if (this.component) {
                 this.component[prop] = value;
@@ -152,15 +117,15 @@ export default {
         updateView() {
             this.isStale = false;
 
-            this.destroyStalenessListeners();
+            this.triggerUnsubscribeFromStaleness();
 
             if (this.component) {
                 this.component.$destroy();
-                this.component = null;
+                this.component = undefined;
                 this.$el.innerHTML = '';
             }
 
-            const onYTickWidthChange = this.onYTickWidthChange;
+            const onTickWidthChange = this.onTickWidthChange;
             const onLockHighlightPointUpdated = this.onLockHighlightPointUpdated;
             const onHighlightsUpdated = this.onHighlightsUpdated;
             const onConfigLoaded = this.onConfigLoaded;
@@ -179,18 +144,9 @@ export default {
             let viewContainer = document.createElement('div');
             this.$el.append(viewContainer);
 
-            if (this.openmct.telemetry.isTelemetryObject(object)) {
-                this.subscribeToStaleness(object, (isStale) => {
-                    this.updateComponentProp('isStale', isStale);
-                });
-            } else {
-                // possibly overlay or other composition based plot
-                this.composition = this.openmct.composition.get(object);
-
-                this.composition.on('add', this.watchStaleness);
-                this.composition.on('remove', this.unwatchStaleness);
-                this.composition.load();
-            }
+            this.subscribeToStaleness(object, (isStale) => {
+                this.updateComponentProp('isStale', isStale);
+            });
 
             this.component = new Vue({
                 el: viewContainer,
@@ -206,7 +162,7 @@ export default {
                 data() {
                     return {
                         ...getProps(),
-                        onYTickWidthChange,
+                        onTickWidthChange,
                         onLockHighlightPointUpdated,
                         onHighlightsUpdated,
                         onConfigLoaded,
@@ -222,72 +178,10 @@ export default {
                         this.loading = loaded;
                     }
                 },
-                template: `
-                  <div v-if="!isMissing" ref="plotWrapper"
-                      class="l-view-section u-style-receiver js-style-receiver"
-                      :class="{'s-status-timeconductor-unsynced': status && status === 'timeconductor-unsynced', 'is-stale': isStale}">
-                      <progress-bar
-                          v-show="loading !== false"
-                          class="c-telemetry-table__progress-bar"
-                          :model="{progressPerc: undefined}" />
-                      <mct-plot
-                          :init-grid-lines="gridLines"
-                          :init-cursor-guide="cursorGuide"
-                          :parent-y-tick-width="parentYTickWidth"
-                          :limit-line-labels="limitLineLabels"
-                          :color-palette="colorPalette"
-                          :options="options"
-                          @plotYTickWidth="onYTickWidthChange"
-                          @lockHighlightPoint="onLockHighlightPointUpdated"
-                          @highlights="onHighlightsUpdated"
-                          @configLoaded="onConfigLoaded"
-                          @cursorGuide="onCursorGuideChange"
-                          @gridLines="onGridLinesChange"
-                          @statusUpdated="setStatus"
-                          @loadingUpdated="loadingUpdated"/>
-                  </div>`
+                template: '<div v-if="!isMissing" ref="plotWrapper" class="l-view-section u-style-receiver js-style-receiver" :class="{\'s-status-timeconductor-unsynced\': status && status === \'timeconductor-unsynced\', \'is-stale\': isStale}"><progress-bar v-show="loading !== false" class="c-telemetry-table__progress-bar" :model="{progressPerc: undefined}" /><mct-plot :init-grid-lines="gridLines" :init-cursor-guide="cursorGuide" :plot-tick-width="plotTickWidth" :limit-line-labels="limitLineLabels" :color-palette="colorPalette" :options="options" @plotTickWidth="onTickWidthChange" @lockHighlightPoint="onLockHighlightPointUpdated" @highlights="onHighlightsUpdated" @configLoaded="onConfigLoaded" @cursorGuide="onCursorGuideChange" @gridLines="onGridLinesChange" @statusUpdated="setStatus" @loadingUpdated="loadingUpdated"/></div>'
             });
 
-            if (this.isEditing) {
-                this.setSelection();
-            }
-        },
-        watchStaleness(domainObject) {
-            const keyString = this.openmct.objects.makeKeyString(domainObject.identifier);
-            this.stalenessSubscription[keyString] = {};
-            this.stalenessSubscription[keyString].stalenessUtils = new StalenessUtils(this.openmct, domainObject);
-
-            this.openmct.telemetry.isStale(domainObject).then((stalenessResponse) => {
-                if (stalenessResponse !== undefined) {
-                    this.handleStaleness(keyString, stalenessResponse);
-                }
-            });
-            const stalenessSubscription = this.openmct.telemetry.subscribeToStaleness(domainObject, (stalenessResponse) => {
-                this.handleStaleness(keyString, stalenessResponse);
-            });
-
-            this.stalenessSubscription[keyString].unsubscribe = stalenessSubscription;
-        },
-        unwatchStaleness(domainObject) {
-            const SKIP_CHECK = true;
-            const keyString = this.openmct.objects.makeKeyString(domainObject.identifier);
-
-            this.stalenessSubscription[keyString].unsubscribe();
-            this.stalenessSubscription[keyString].stalenessUtils.destroy();
-            this.handleStaleness(keyString, { isStale: false }, SKIP_CHECK);
-
-            delete this.stalenessSubscription[keyString];
-        },
-        handleStaleness(keyString, stalenessResponse, skipCheck = false) {
-            if (skipCheck || this.stalenessSubscription[keyString].stalenessUtils.shouldUpdateStaleness(stalenessResponse)) {
-                const index = this.staleObjects.indexOf(keyString);
-                const foundStaleObject = index > -1;
-                if (stalenessResponse.isStale && !foundStaleObject) {
-                    this.staleObjects.push(keyString);
-                } else if (!stalenessResponse.isStale && foundStaleObject) {
-                    this.staleObjects.splice(index, 1);
-                }
-            }
+            this.setSelection();
         },
         onLockHighlightPointUpdated() {
             this.$emit('lockHighlightPoint', ...arguments);
@@ -298,8 +192,8 @@ export default {
         onConfigLoaded() {
             this.$emit('configLoaded', ...arguments);
         },
-        onYTickWidthChange() {
-            this.$emit('plotYTickWidth', ...arguments);
+        onTickWidthChange() {
+            this.$emit('plotTickWidth', ...arguments);
         },
         onCursorGuideChange() {
             this.$emit('cursorGuide', ...arguments);
@@ -327,7 +221,7 @@ export default {
                 limitLineLabels: this.showLimitLineLabels,
                 gridLines: this.gridLines,
                 cursorGuide: this.cursorGuide,
-                parentYTickWidth: this.parentYTickWidth,
+                plotTickWidth: this.plotTickWidth,
                 options: this.options,
                 status: this.status,
                 colorPalette: this.colorPalette,
@@ -336,7 +230,7 @@ export default {
         },
         getPlotObject() {
             if (this.childObject.configuration && this.childObject.configuration.series) {
-                //If the object has a configuration (like an overlay plot), allow initialization of the config from it's persisted config
+                //If the object has a configuration, allow initialization of the config from it's persisted config
                 return this.childObject;
             } else {
                 //If object is missing, warn and return object
@@ -387,20 +281,6 @@ export default {
 
                 return this.childObject;
             }
-        },
-        destroyStalenessListeners() {
-            this.triggerUnsubscribeFromStaleness();
-
-            if (this.composition) {
-                this.composition.off('add', this.watchStaleness);
-                this.composition.off('remove', this.unwatchStaleness);
-                this.composition = null;
-            }
-
-            Object.values(this.stalenessSubscription).forEach(stalenessSubscription => {
-                stalenessSubscription.unsubscribe();
-                stalenessSubscription.stalenessUtils.destroy();
-            });
         }
     }
 };

src/plugins/plot/stackedPlot/StackedPlotViewProvider.js

@@ -57,6 +57,7 @@ export default function StackedPlotViewProvider(openmct) {
                         provide: {
                             openmct,
                             domainObject,
+                            composition: openmct.composition.get(domainObject),
                             path: objectPath
                         },
                         data() {

src/plugins/plot/stackedPlot/pluginSpec.js

@@ -173,7 +173,7 @@ describe("the plugin", function () {
         let testTelemetryObject2;
         let config;
         let component;
-        let mockCompositionList = [];
+        let mockComposition;
         let plotViewComponentObject;
 
         afterAll(() => {
@@ -271,34 +271,14 @@ describe("the plugin", function () {
                 }
             };
 
-            stackedPlotObject.composition = [{
-                identifier: testTelemetryObject.identifier
-            }];
+            mockComposition = new EventEmitter();
+            mockComposition.load = () => {
+                mockComposition.emit('add', testTelemetryObject);
 
-            mockCompositionList = [];
-            spyOn(openmct.composition, 'get').and.callFake((domainObject) => {
-                //We need unique compositions here - one for the StackedPlot view and one for the PlotLegend view
-                const numObjects = domainObject.composition.length;
-                const mockComposition = new EventEmitter();
-                mockComposition.load = () => {
-                    if (numObjects === 1) {
-                        mockComposition.emit('add', testTelemetryObject);
+                return [testTelemetryObject];
+            };
 
-                        return [testTelemetryObject];
-                    } else if (numObjects === 2) {
-                        mockComposition.emit('add', testTelemetryObject);
-                        mockComposition.emit('add', testTelemetryObject2);
-
-                        return [testTelemetryObject, testTelemetryObject2];
-                    } else {
-                        return [];
-                    }
-                };
-
-                mockCompositionList.push(mockComposition);
-
-                return mockComposition;
-            });
+            spyOn(openmct.composition, 'get').and.returnValue(mockComposition);
 
             let viewContainer = document.createElement("div");
             child.append(viewContainer);
@@ -310,6 +290,7 @@ describe("the plugin", function () {
                 provide: {
                     openmct: openmct,
                     domainObject: stackedPlotObject,
+                    composition: openmct.composition.get(stackedPlotObject),
                     path: [stackedPlotObject]
                 },
                 template: "<stacked-plot></stacked-plot>"
@@ -340,8 +321,7 @@ describe("the plugin", function () {
             expect(legend.length).toBe(6);
         });
 
-        // disable due to flakiness
-        xit("Renders X-axis ticks for the telemetry object", () => {
+        it("Renders X-axis ticks for the telemetry object", (done) => {
             let xAxisElement = element.querySelectorAll(".gl-plot-axis-area.gl-plot-x .gl-plot-tick-wrapper");
             expect(xAxisElement.length).toBe(1);
 
@@ -349,8 +329,13 @@ describe("the plugin", function () {
                 min: 0,
                 max: 4
             });
-            let ticks = xAxisElement[0].querySelectorAll(".gl-plot-tick");
-            expect(ticks.length).toBe(9);
+
+            Vue.nextTick(() => {
+                let ticks = xAxisElement[0].querySelectorAll(".gl-plot-tick");
+                expect(ticks.length).toBe(9);
+
+                done();
+            });
         });
 
         it("Renders Y-axis ticks for the telemetry object", (done) => {
@@ -416,22 +401,17 @@ describe("the plugin", function () {
         });
 
         it('plots a new series when a new telemetry object is added', (done) => {
-            //setting composition here so that any new triggers to composition.load with correctly load the mockComposition in the beforeEach
-            stackedPlotObject.composition = [testTelemetryObject, testTelemetryObject2];
-            mockCompositionList[0].emit('add', testTelemetryObject2);
-
+            mockComposition.emit('add', testTelemetryObject2);
             Vue.nextTick(() => {
                 let legend = element.querySelectorAll(".plot-wrapper-collapsed-legend .plot-series-name");
                 expect(legend.length).toBe(2);
                 expect(legend[1].innerHTML).toEqual("Test Object2");
                 done();
             });
-
         });
 
         it('removes plots from series when a telemetry object is removed', (done) => {
-            stackedPlotObject.composition = [];
-            mockCompositionList[0].emit('remove', testTelemetryObject.identifier);
+            mockComposition.emit('remove', testTelemetryObject.identifier);
             Vue.nextTick(() => {
                 expect(plotViewComponentObject.compositionObjects.length).toBe(0);
                 done();
@@ -449,6 +429,16 @@ describe("the plugin", function () {
             });
         });
 
+        it("Renders a new series when added to one of the plots", (done) => {
+            mockComposition.emit('add', testTelemetryObject2);
+            Vue.nextTick(() => {
+                let legend = element.querySelectorAll(".plot-wrapper-collapsed-legend .plot-series-name");
+                expect(legend.length).toBe(2);
+                expect(legend[1].innerHTML).toEqual("Test Object2");
+                done();
+            });
+        });
+
         it("Adds a new point to the plot", (done) => {
             let originalLength = config.series.models[0].getSeriesData().length;
             config.series.models[0].add({
@@ -469,7 +459,7 @@ describe("the plugin", function () {
                 max: 10
             });
             Vue.nextTick(() => {
-                expect(plotViewComponentObject.$children[0].component.$children[1].xScale.domain()).toEqual({
+                expect(plotViewComponentObject.$children[1].component.$children[1].xScale.domain()).toEqual({
                     min: 0,
                     max: 10
                 });
@@ -486,7 +476,7 @@ describe("the plugin", function () {
                 });
             });
             Vue.nextTick(() => {
-                const yAxesScales = plotViewComponentObject.$children[0].component.$children[1].yScale;
+                const yAxesScales = plotViewComponentObject.$children[1].component.$children[1].yScale;
                 yAxesScales.forEach((yAxisScale) => {
                     expect(yAxisScale.scale.domain()).toEqual({
                         min: 10,

src/plugins/telemetryTable/TelemetryTable.js

@@ -293,7 +293,6 @@ define([
             this.stalenessSubscription[keyString].unsubscribe();
             this.stalenessSubscription[keyString].stalenessUtils.destroy();
             this.handleStaleness(keyString, { isStale: false }, SKIP_CHECK);
-            delete this.stalenessSubscription[keyString];
         }
 
         clearData() {

src/plugins/timeConductor/independent/IndependentTimeConductor.vue

@@ -227,10 +227,6 @@ export default {
             if (this.isFixed) {
                 offsets = this.timeOptions.fixedOffsets;
             } else {
-                if (this.timeOptions.clockOffsets === undefined) {
-                    this.timeOptions.clockOffsets = this.openmct.time.clockOffsets();
-                }
-
                 offsets = this.timeOptions.clockOffsets;
             }
 

src/styles/_constants-espresso.scss

@@ -390,7 +390,7 @@ $colorItemTreeHoverBg: rgba(#fff, 0.1);
 $colorItemTreeHoverFg: #fff;
 $colorItemTreeIcon: $colorKey; // Used
 $colorItemTreeIconHover: $colorItemTreeIcon; // Used
-$colorItemTreeFg: #ccc;
+$colorItemTreeFg: $colorBodyFg;
 $colorItemTreeSelectedBg: $colorSelectedBg;
 $colorItemTreeSelectedFg: $colorItemTreeHoverFg;
 $filterItemTreeSelected: $filterHov;

src/styles/_constants-maelstrom.scss

@@ -394,7 +394,7 @@ $colorItemTreeHoverBg: rgba(#fff, 0.03);
 $colorItemTreeHoverFg: #fff;
 $colorItemTreeIcon: $colorKey; // Used
 $colorItemTreeIconHover: $colorItemTreeIcon; // Used
-$colorItemTreeFg: $colorA;
+$colorItemTreeFg: $colorBodyFg;
 $colorItemTreeSelectedBg: $colorSelectedBg;
 $colorItemTreeSelectedFg: $colorItemTreeHoverFg;
 $filterItemTreeSelected: $filterHov;

src/styles/_constants.scss

@@ -94,7 +94,7 @@ $messageListIconD: 32px;
 $tableResizeColHitareaD: 6px;
 /*************** Misc */
 $drawingObjBorderW: 3px;
-$tagBorderRadius: 3px;
+
 /************************** MOBILE */
 $mobileMenuIconD: 24px; // Used
 $mobileTreeItemH: 35px; // Used

src/styles/_controls.scss

@@ -270,11 +270,9 @@ button {
     flex: 0 0 auto;
     width: $d;
     position: relative;
-    visibility: hidden;
 
     &.is-enabled {
         cursor: pointer;
-        visibility: visible;
 
         &:hover {
             color: $colorDisclosureCtrlHov;
@@ -405,18 +403,16 @@ textarea {
 
     &--autocomplete {
         &__wrapper {
-            display: flex;
+            display: inline-flex;
             flex-direction: row;
             align-items: center;
-            overflow: hidden;
-            width: 100%;
         }
 
         &__input {
             min-width: 100px;
-            width: 100%;
 
             // Fend off from afford-arrow
+            min-height: 2em;
             padding-right: 2.5em !important;
         }
 
@@ -439,10 +435,7 @@ textarea {
         }
 
         &__afford-arrow {
-            $p: 2px;
             font-size: 0.8em;
-            padding-bottom: $p;
-            padding-top: $p;
             position: absolute;
             right: 2px;
             z-index: 2;

src/styles/_legacy-plots.scss

@@ -664,6 +664,7 @@ mct-plot {
             border-radius: $smallCr;
             display: flex;
             justify-content: stretch;
+            padding: 1px;
 
             .plot-series-swatch-and-name,
             .plot-series-value {

src/styles/vue-styles.scss

@@ -42,6 +42,7 @@
 @import "../ui/inspector/elements.scss";
 @import "../ui/inspector/inspector.scss";
 @import "../ui/inspector/location.scss";
+@import "../ui/inspector/annotations/annotation-inspector.scss";
 @import "../ui/layout/app-logo.scss";
 @import "../ui/layout/create-button.scss";
 @import "../ui/layout/layout.scss";

src/ui/components/ObjectPath.vue

@@ -24,8 +24,6 @@
 <ul
     v-if="orderedPath.length"
     class="c-location"
-    :aria-label="`${domainObject.name}`"
-    role="navigation"
 >
     <li
         v-for="pathObject in orderedPath"
@@ -36,7 +34,6 @@
             :domain-object="pathObject.domainObject"
             :object-path="pathObject.objectPath"
             :read-only="readOnly"
-            :navigate-to-path="navigateToPath(pathObject.objectPath)"
         />
     </li>
 </ul>
@@ -113,18 +110,6 @@ export default {
                 this.orderedPath = pathWithDomainObject.slice(1, pathWithDomainObject.length - 1).reverse();
             }
         }
-    },
-    methods: {
-        /**
-         * Generate the hash url for the given object path, removing the '/ROOT' prefix if present.
-         * @param {import('../../api/objects/ObjectAPI').DomainObject[]} objectPath
-         */
-        navigateToPath(objectPath) {
-            /** @type {String} */
-            const path = `/browse/${this.openmct.objects.getRelativePath(objectPath)}`;
-
-            return path.replace('ROOT/', '');
-        }
     }
 };
 </script>

src/ui/components/tags/TagEditor.vue

@@ -21,17 +21,15 @@
  *****************************************************************************/
 
 <template>
-<div class="c-tag-applier has-tag-applier">
+<div class="c-tag-applier">
     <TagSelection
         v-for="(addedTag, index) in addedTags"
         :key="index"
-        :class="{ 'w-tag-wrapper--tag-selector' : addedTag.newTag }"
         :selected-tag="addedTag.newTag ? null : addedTag"
         :new-tag="addedTag.newTag"
         :added-tags="addedTags"
         @tagRemoved="tagRemoved"
         @tagAdded="tagAdded"
-        @tagBlurred="tagBlurred"
     />
     <button
         v-show="!userAddingTag && !maxTagsAdded"
@@ -166,12 +164,6 @@ export default {
                 }
             }
         },
-        tagBlurred() {
-            // Remove last tag when user clicks outside of TagSelection
-            this.addedTags.pop();
-            // Hide TagSelection and show "Add Tag" button
-            this.userAddingTag = false;
-        },
         async tagAdded(newTag) {
             // Either undelete an annotation, or create one (1) new annotation
             let existingAnnotation = this.annotations.find((annotation) => {