Merge branch 'master' into fix-move-action

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

@@ -235,12 +235,6 @@ async function expandEntireTree(page, treeName = "Main Tree") {
 
     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);
     }
 }
 

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/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/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

@@ -231,25 +231,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,54 +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();
+        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();
     });
 });

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/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}')`);
-    });
-});

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];
     }
 }

package.json

@@ -21,7 +21,7 @@
     "d3-scale": "3.3.0",
     "d3-selection": "3.0.0",
     "eslint": "8.32.0",
-    "eslint-plugin-compat": "4.1.1",
+    "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/CompositionProvider.js

@@ -224,7 +224,7 @@ export default class CompositionProvider {
       * @private
       * @param {DomainObject} oldDomainObject
       */
-    #onMutation(newDomainObject, oldDomainObject) {
+    #onMutation(oldDomainObject) {
         const id = objectUtils.makeKeyString(oldDomainObject.identifier);
         const listeners = this.#listeningTo[id];
 
@@ -232,8 +232,8 @@ export default class CompositionProvider {
             return;
         }
 
-        const oldComposition = oldDomainObject.composition.map(objectUtils.makeKeyString);
-        const newComposition = newDomainObject.composition.map(objectUtils.makeKeyString);
+        const oldComposition = listeners.composition.map(objectUtils.makeKeyString);
+        const newComposition = oldDomainObject.composition.map(objectUtils.makeKeyString);
 
         const added = _.difference(newComposition, oldComposition).map(objectUtils.parseKeyString);
         const removed = _.difference(oldComposition, newComposition).map(objectUtils.parseKeyString);
@@ -248,6 +248,8 @@ export default class CompositionProvider {
             };
         }
 
+        listeners.composition = newComposition.map(objectUtils.parseKeyString);
+
         added.forEach(function (addedChild) {
             listeners.add.forEach(notify(addedChild));
         });

src/api/composition/DefaultCompositionProvider.js

@@ -99,7 +99,8 @@ export default class DefaultCompositionProvider extends CompositionProvider {
             objectListeners = this.listeningTo[keyString] = {
                 add: [],
                 remove: [],
-                reorder: []
+                reorder: [],
+                composition: [].slice.apply(domainObject.composition)
             };
         }
 
@@ -171,9 +172,8 @@ 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);
         }
     }
 

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/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/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,43 +93,18 @@ describe("The Independent Time API", function () {
     });
 
     it("follows a parent time context given the objectPath", () => {
-        api.getContextForView([{
+        let timeContext = api.getContextForView([{
             identifier: {
                 namespace: '',
                 key: 'blah'
             }
+        }, {
+            identifier: {
+                namespace: '',
+                key: domainObjectKey
+            }
         }]);
         let destroyTimeContext = api.addIndependentContext('blah', independentBounds);
-        let timeContext = api.getContextForView([{
-            identifier: {
-                namespace: '',
-                key: domainObjectKey
-            }
-        }, {
-            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", () => {
-        let timeContext = api.getContextForView([{
-            identifier: {
-                namespace: '',
-                key: domainObjectKey
-            }
-        }, {
-            identifier: {
-                namespace: '',
-                key: 'blah'
-            }
-        }]);
-        expect(timeContext.bounds()).toEqual(bounds);
-        let destroyTimeContext = api.addIndependentContext(domainObjectKey, independentBounds);
         expect(timeContext.bounds()).toEqual(independentBounds);
         destroyTimeContext();
         expect(timeContext.bounds()).toEqual(bounds);

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/CompassRose.vue

@@ -107,53 +107,48 @@
                         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 cams that gimbal. -->
-                        <path
-                            class="cr-vrover__body"
-                            :style="camGimbalAngleStyle"
-                            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>
-
-                    <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>
 
@@ -310,7 +305,7 @@ export default {
             return { transform: `translate(${translateX}%, ${translateY}%) rotate(${rotation}deg) scale(${scale})` };
         },
         camGimbalAngleStyle() {
-            const rotation = rotate(this.heading);
+            const rotation = rotate(this.north, this.heading);
 
             return {
                 transform: `rotate(${ rotation }deg)`
@@ -337,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;
         },

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

@@ -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>
@@ -99,7 +99,7 @@
                 </div>
             </template>
 
-            <div class="c-ne__tags c-tag-holder">
+            <div>
                 <div
                     v-for="(tag, index) in entryTags"
                     :key="index"
@@ -235,8 +235,7 @@ export default {
         return {
             editMode: false,
             canEdit: true,
-            enableEmbedsWrapperScroll: false,
-            urlWhitelist: null
+            enableEmbedsWrapperScroll: false
         };
     },
     computed: {
@@ -251,7 +250,7 @@ export default {
             let text = sanitizeHtml(this.entry.text, SANITIZATION_SCHEMA);
 
             if (this.editMode || !this.urlWhitelist) {
-                return { innerText: text };
+                return text;
             }
 
             text = text.replace(URL_REGEX, (match) => {
@@ -269,7 +268,7 @@ export default {
                 return result;
             });
 
-            return { innerHTML: text };
+            return text;
         },
         isSelectedEntry() {
             return this.selectedEntryId === this.entry.id;
@@ -457,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');
@@ -473,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/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/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'],
@@ -173,16 +138,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 +162,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 +191,14 @@ 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);
+            // TODO: Which other changes is the listener below reacting to?
+            this.listenTo(series, 'change', this.scheduleDraw);
             this.listenTo(series, 'add', this.onAddPoint);
             this.makeChartElement(series);
             this.makeLimitLines(series);
@@ -570,21 +531,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();

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,11 +219,9 @@ 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';
@@ -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/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

@@ -405,18 +405,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 +437,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) => {

src/ui/components/tags/TagSelection.vue

@@ -21,8 +21,8 @@
  *****************************************************************************/
 
 <template>
-<div class="w-tag-wrapper">
-    <template v-if="newTag">
+<div class="c-tag__parent">
+    <div class="c-tag_selection">
         <AutoCompleteField
             v-if="newTag"
             ref="tagSelection"
@@ -31,11 +31,9 @@
             class="c-tag-selection"
             :item-css-class="'icon-circle'"
             @onChange="tagSelected"
-            @autoCompleteBlur="autoCompleteBlur"
         />
-    </template>
-    <template v-else>
         <div
+            v-else
             class="c-tag"
             :class="{'c-tag-edit': !readOnly}"
             :style="{ background: selectedBackgroundColor, color: selectedForegroundColor }"
@@ -50,7 +48,7 @@
                 @click="removeTag"
             ></button>
         </div>
-    </template>
+    </div>
 </div>
 </template>
 
@@ -159,9 +157,6 @@ export default {
             if (tagAdded) {
                 this.$emit('tagAdded', tagAdded.id);
             }
-        },
-        autoCompleteBlur() {
-            this.$emit('tagBlurred');
         }
     }
 };

src/ui/components/tags/tags.scss

@@ -1,30 +1,19 @@
-@mixin tagHolder() {
-  align-items: center;
-  display: flex;
-  flex-wrap: wrap;
-
-  > * {
-    $m: $interiorMarginSm;
-
-    margin: 0 $m $m 0;
-  }
-}
-
-
 /******************************* TAGS */
 .c-tag {
-  border-radius: $tagBorderRadius;
+  border-radius: 10px; //TODO: convert to theme constant
   display: inline-flex;
-  overflow: hidden;
-  padding: 1px 6px; //TODO: convert to theme constant
-  transition: $transIn;
+  padding: 1px 10px; //TODO: convert to theme constant
+
+  > * + * {
+    margin-left: $interiorMargin;
+  }
 
   &__remove-btn {
     color: inherit !important;
+    display: none;
     opacity: 0;
-    padding: 0; // Overrides default <button> padding
-    position: absolute;
-    right: 2px;
+    overflow: hidden;
+    padding: 1px !important;
     transition: $transIn;
     width: 0;
 
@@ -39,47 +28,28 @@
   }
 }
 
-.c-tag-holder {
-  @include tagHolder;
-}
-
-.w-tag-wrapper {
-    $m: $interiorMarginSm;
-
-    margin: 0 $m $m 0;
-}
-
-/******************************* TAGS IN INSPECTOR / TAG SELECTION & APPLICATION */
+/******************************* TAG EDITOR */
 .c-tag-applier {
-  $tagApplierPadding: 3px 6px;
-  @include tagHolder;
-  grid-column: 1 / 3;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
 
-  &__tags {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
+  > * + * {
+    margin-left: $interiorMargin;
   }
 
   &__add-btn {
-    border-radius: $tagBorderRadius;
-    padding: 3px 10px 3px 4px;
-
     &:before { font-size: 0.9em; }
   }
 
   .c-tag {
     flex-direction: row;
     align-items: center;
-    padding: $tagApplierPadding;
+    padding-right: 3px !important;
 
-    > * + * { margin-left: $interiorMarginSm; }
-  }
-
-  .c-tag-selection {
-    .c-input--autocomplete__input {
-      min-height: auto !important;
-      padding: $tagApplierPadding;
+    &__remove-btn {
+      display: block;
     }
   }
 }
@@ -92,18 +62,10 @@
 .has-tag-applier {
   // Apply this class to all components that should trigger tag removal btn on hover
    &:hover {
-     .c-tag {
-       padding-right: 17px !important;
-       transition: $transOut;
-     }
-
      .c-tag__remove-btn {
-       //display: block;
-       //margin-left: $interiorMarginSm;
-       width: 1em;
-       opacity: 0.8;
+       width: 1.1em;
+       opacity: 0.7;
        transition: $transOut;
-       //transition-delay: 250ms;
      }
    }
  }

src/ui/inspector/ElementItem.vue

@@ -30,7 +30,7 @@
     @drop="emitDropEvent"
 >
     <div
-        class="c-tree__item c-elements-pool__item js-elements-pool__item"
+        class="c-tree__item c-elements-pool__item"
         :class="{
             'is-context-clicked': contextClickActive,
             'hover': hover,

src/ui/inspector/Inspector.vue

@@ -109,8 +109,6 @@ import StylesInspectorView from "@/ui/inspector/styles/StylesInspectorView.vue";
 import SavedStylesInspectorView from "@/ui/inspector/styles/SavedStylesInspectorView.vue";
 import AnnotationsInspectorView from "./annotations/AnnotationsInspectorView.vue";
 
-const OVERLAY_PLOT_TYPE = "telemetry.plot.overlay";
-
 export default {
     components: {
         StylesInspectorView,
@@ -191,12 +189,12 @@ export default {
         },
         refreshComposition(selection) {
             if (selection.length > 0 && selection[0].length > 0) {
-                const parentObject = selection[0][0].context.item;
+                let parentObject = selection[0][0].context.item;
 
                 this.hasComposition = Boolean(
                     parentObject && this.openmct.composition.get(parentObject)
                 );
-                this.isOverlayPlot = parentObject?.type === OVERLAY_PLOT_TYPE;
+                this.isOverlayPlot = selection[0][0].context.item.type === 'telemetry.plot.overlay';
             }
         },
         refreshTabs(selection) {

src/ui/inspector/InspectorViews.vue

@@ -21,7 +21,7 @@
  *****************************************************************************/
 
 <template>
-<div aria-label="Inspector Views"></div>
+<div></div>
 </template>
 
 <script>

src/ui/inspector/PlotElementsPool.vue

@@ -34,7 +34,7 @@
         <ul
             v-if="hasElements"
             id="inspector-elements-tree"
-            class="c-tree c-elements-pool__tree js-elements-pool__tree"
+            class="c-tree c-elements-pool__tree"
         >
             <div class="c-elements-pool__instructions"> Select and drag an element to move it into a different axis. </div>
             <element-item-group
@@ -145,7 +145,7 @@ export default {
 
             this.unlistenComposition();
 
-            if (this.parentObject && this.parentObject.type === 'telemetry.plot.overlay') {
+            if (this.parentObject) {
                 this.setYAxisIds();
                 this.composition = this.openmct.composition.get(this.parentObject);
 
@@ -175,7 +175,6 @@ export default {
         setYAxisIds() {
             const configId = this.openmct.objects.makeKeyString(this.parentObject.identifier);
             this.config = configStore.get(configId);
-            this.yAxes = [];
             this.yAxes.push({
                 id: this.config.yAxis.id,
                 elements: this.parentObject.configuration.series.filter(

src/ui/inspector/annotations/AnnotationEditor.vue

@@ -0,0 +1,83 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+
+<template>
+<div class="c-annotation__row">
+    <textarea
+        v-model="contentModel"
+        class="c-annotation__text_area"
+        type="text"
+    ></textarea>
+    <div>
+        <span>{{ modifiedOnDate }}</span>
+        <span>{{ modifiedOnTime }}</span>
+    </div>
+</div>
+</template>
+
+<script>
+import Moment from 'moment';
+
+export default {
+    inject: ['openmct'],
+    props: {
+        annotation: {
+            type: Object,
+            default() {
+                return {};
+            }
+        }
+    },
+    data() {
+        return {
+        };
+    },
+    computed: {
+        contentModel: {
+            get() {
+                return this.annotation.contentText;
+            },
+            set(contentText) {
+                console.debug(`Set tag called with ${contentText}`);
+            }
+        },
+        modifiedOnDate() {
+            return this.formatTime(this.annotation.modified, 'YYYY-MM-DD');
+        },
+        modifiedOnTime() {
+            return this.formatTime(this.annotation.modified, 'HH:mm:ss');
+        }
+    },
+    mounted() {
+    },
+    methods: {
+        getAvailableTagByID(tagID) {
+            return this.openmct.annotation.getAvailableTags().find(tag => {
+                return tag.id === tagID;
+            });
+        },
+        formatTime(unixTime, timeFormat) {
+            return Moment.utc(unixTime).format(timeFormat);
+        }
+    }
+};
+</script>

src/ui/inspector/annotations/AnnotationsInspectorView.vue

@@ -22,7 +22,7 @@
 
 <template>
 <div
-    class="c-inspector__properties c-inspect-properties"
+    class="c-inspector__properties c-inspect-properties has-tag-applier"
     aria-label="Tags Inspector"
 >
     <div
@@ -111,31 +111,25 @@ export default {
             return this?.selection?.[0]?.[0]?.context?.item;
         },
         targetDetails() {
-            return this?.selection?.[0]?.[0]?.context?.targetDetails ?? {};
+            return this?.selection?.[0]?.[1]?.context?.targetDetails ?? {};
         },
         shouldShowTagsEditor() {
-            const showingTagsEditor = Object.keys(this.targetDetails).length > 0;
-
-            if (showingTagsEditor) {
-                return true;
-            }
-
-            return false;
+            return Object.keys(this.targetDetails).length > 0;
         },
         targetDomainObjects() {
-            return this?.selection?.[0]?.[0]?.context?.targetDomainObjects ?? {};
+            return this?.selection?.[0]?.[1]?.context?.targetDomainObjects ?? {};
         },
         selectedAnnotations() {
-            return this?.selection?.[0]?.[0]?.context?.annotations;
+            return this?.selection?.[0]?.[1]?.context?.annotations;
         },
         annotationType() {
-            return this?.selection?.[0]?.[0]?.context?.annotationType;
+            return this?.selection?.[0]?.[1]?.context?.annotationType;
         },
         annotationFilter() {
-            return this?.selection?.[0]?.[0]?.context?.annotationFilter;
+            return this?.selection?.[0]?.[1]?.context?.annotationFilter;
         },
         onAnnotationChange() {
-            return this?.selection?.[0]?.[0]?.context?.onAnnotationChange;
+            return this?.selection?.[0]?.[1]?.context?.onAnnotationChange;
         }
     },
     async mounted() {

src/ui/inspector/annotations/annotation-inspector.scss

@@ -0,0 +1,18 @@
+.c-inspect-annotations {
+    > * + * {
+        margin-top: $interiorMargin;
+    }
+
+    &__content{
+        > * + * {
+            margin-top: $interiorMargin;
+        }
+    }
+
+    &__content {
+        display: flex;
+        flex-direction: column;
+    }
+}
+
+

src/ui/layout/CreateButton.vue

@@ -14,6 +14,7 @@
 
 <script>
 import CreateAction from '@/plugins/formActions/CreateAction';
+import objectUtils from 'objectUtils';
 
 export default {
     inject: ['openmct'],
@@ -73,9 +74,23 @@ export default {
             this.openmct.menus.showSuperMenu(x, y, this.sortedItems, menuOptions);
         },
         create(key) {
-            const createAction = new CreateAction(this.openmct, key, this.openmct.router.path[0]);
+            // Hack for support.  TODO: rewrite create action.
+            // 1. Get contextual object from navigation
+            // 2. Get legacy type from legacy api
+            // 3. Instantiate create action with type, parent, context
+            // 4. perform action.
+            return this.openmct.objects.get(this.openmct.router.path[0].identifier)
+                .then((currentObject) => {
+                    const createAction = new CreateAction(this.openmct, key, currentObject);
 
-            createAction.invoke();
+                    createAction.invoke();
+                });
+        },
+        convertToLegacy(domainObject) {
+            let keyString = objectUtils.makeKeyString(domainObject.identifier);
+            let oldModel = objectUtils.toOldFormat(domainObject);
+
+            return this.openmct.$injector.get('instantiate')(oldModel, keyString);
         }
     }
 };

src/ui/layout/RecentObjectsList.vue

@@ -4,7 +4,6 @@
 >
     <ul
         class="c-tree-and-search__tree c-tree c-tree__scrollable"
-        aria-label="Recent Objects"
     >
         <recent-objects-list-item
             v-for="(recentObject) in recentObjects"

src/ui/layout/RecentObjectsListItem.vue

@@ -54,7 +54,6 @@
     <div class="c-recentobjects-listitem__target-button">
         <button
             class="c-icon-button icon-target"
-            :aria-label="`Open and scroll to ${domainObject.name}`"
             @click="openAndScrollTo(navigationPath)"
         ></button>
     </div>

src/ui/layout/mct-tree.vue

@@ -315,7 +315,7 @@ export default {
             }
         },
         targetedPathAnimationEnd() {
-            this.targetedPath = null;
+            this.targetedPath = undefined;
         },
         treeItemSelection(item) {
             this.selectedItem = item;

src/ui/layout/recent-objects.scss

@@ -90,6 +90,7 @@
             }
           }
       }
+
   }
 
   &__tags {
@@ -102,7 +103,7 @@
 
   &__title {
       border-radius: $basicCr;
-      color: $colorItemTreeFg;
+      color: pullForward($colorBodyFg, 30%);
       cursor: pointer;
       padding: $interiorMarginSm;
 

src/ui/layout/search/AnnotationSearchResult.vue

@@ -150,11 +150,16 @@ export default {
             });
             const selection =
                     [
+                        {
+                            element: this.openmct.layout.$refs.browseObject.$el,
+                            context: {
+                                item: this.result
+                            }
+                        },
                         {
                             element: this.$el,
                             context: {
-                                item: this.result.targetModels[0],
-                                type: 'plot-annotation-search-result',
+                                type: 'plot-points-selection',
                                 targetDetails,
                                 targetDomainObjects,
                                 annotations: [this.result],

src/ui/layout/search/GrandSearchSpec.js

@@ -29,7 +29,7 @@ import GrandSearch from './GrandSearch.vue';
 import ExampleTagsPlugin from '../../../../example/exampleTags/plugin';
 import DisplayLayoutPlugin from '../../../plugins/displayLayout/plugin';
 
-xdescribe("GrandSearch", () => {
+describe("GrandSearch", () => {
     let openmct;
     let grandSearchComponent;
     let viewContainer;

src/ui/layout/tree-item.vue

@@ -62,7 +62,7 @@ export default {
         },
         targetedPath: {
             type: String,
-            default: null
+            required: true
         },
         selectedItem: {
             type: Object,

src/ui/router/ApplicationRouterSpec.js

@@ -6,7 +6,7 @@ let child;
 let appHolder;
 let resolveFunction;
 
-xdescribe('Application router utility functions', () => {
+describe('Application router utility functions', () => {
     beforeEach(done => {
         appHolder = document.createElement('div');
         appHolder.style.width = '640px';