cherry-pick(#6208): Fix plot composition (#6206)

* Fixed composition

* Remove unnecessary guard code

* Removing deprecated code

* Use valid key for stacked plot v-for

* Fixed object API specs to expect old values as well as new values in mutation callbacks

* Fixed existing tests

* Added E2E test

* Fixed linting error

---------

Co-authored-by: Shefali Joshi <simplyrender@gmail.com>

e2e/appActions.js

@@ -144,7 +144,9 @@ async function createNotification(page, createNotificationOptions) {
  * @param {string} name
  */
 async function expandTreePaneItemByName(page, name) {
-    const treePane = page.locator('#tree-pane');
+    const treePane = page.getByRole('tree', {
+        name: 'Main Tree'
+    });
     const treeItem = treePane.locator(`role=treeitem[expanded=false][name=/${name}/]`);
     const expandTriangle = treeItem.locator('.c-disclosure-triangle');
     await expandTriangle.click();
@@ -218,6 +220,24 @@ async function openObjectTreeContextMenu(page, url) {
     });
 }
 
+/**
+ * Expands the entire object tree (every expandable tree item).
+ * @param {import('@playwright/test').Page} page
+ * @param {"Main Tree" | "Create Modal Tree"} [treeName="Main Tree"]
+ */
+async function expandEntireTree(page, treeName = "Main Tree") {
+    const treeLocator = page.getByRole('tree', {
+        name: treeName
+    });
+    const collapsedTreeItems = treeLocator.getByRole('treeitem', {
+        expanded: false
+    }).locator('span.c-disclosure-triangle.is-enabled');
+
+    while (await collapsedTreeItems.count() > 0) {
+        await collapsedTreeItems.nth(0).click();
+    }
+}
+
 /**
  * Gets the UUID of the currently focused object by parsing the current URL
  * and returning the last UUID in the path.
@@ -362,6 +382,7 @@ module.exports = {
     createDomainObjectWithDefaults,
     createNotification,
     expandTreePaneItemByName,
+    expandEntireTree,
     createPlanFromJSON,
     openObjectTreeContextMenu,
     getHashUrlToDomainObject,

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

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

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

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

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

@@ -32,8 +32,7 @@ test.describe('Display Layout', () => {
 
         // Create Sine Wave Generator
         sineWaveObject = await createDomainObjectWithDefaults(page, {
-            type: 'Sine Wave Generator',
-            name: "Test Sine Wave Generator"
+            type: 'Sine Wave Generator'
         });
     });
     test('alpha-numeric widget telemetry value exactly matches latest telemetry value received in real time', async ({ page }) => {
@@ -48,7 +47,9 @@ test.describe('Display Layout', () => {
         // Expand the 'My Items' folder in the left tree
         await page.locator('.c-tree__item__view-control.c-disclosure-triangle').click();
         // Add the Sine Wave Generator to the Display Layout and save changes
-        const treePane = page.locator('#tree-pane');
+        const treePane = page.getByRole('tree', {
+            name: 'Main Tree'
+        });
         const sineWaveGeneratorTreeItem = treePane.getByRole('treeitem', {
             name: new RegExp(sineWaveObject.name)
         });
@@ -80,7 +81,9 @@ test.describe('Display Layout', () => {
         // Expand the 'My Items' folder in the left tree
         await page.locator('.c-tree__item__view-control.c-disclosure-triangle').click();
         // Add the Sine Wave Generator to the Display Layout and save changes
-        const treePane = page.locator('#tree-pane');
+        const treePane = page.getByRole('tree', {
+            name: 'Main Tree'
+        });
         const sineWaveGeneratorTreeItem = treePane.getByRole('treeitem', {
             name: new RegExp(sineWaveObject.name)
         });
@@ -116,7 +119,9 @@ test.describe('Display Layout', () => {
         // Expand the 'My Items' folder in the left tree
         await page.locator('.c-tree__item__view-control.c-disclosure-triangle').click();
         // Add the Sine Wave Generator to the Display Layout and save changes
-        const treePane = page.locator('#tree-pane');
+        const treePane = page.getByRole('tree', {
+            name: 'Main Tree'
+        });
         const sineWaveGeneratorTreeItem = treePane.getByRole('treeitem', {
             name: new RegExp(sineWaveObject.name)
         });
@@ -131,7 +136,7 @@ test.describe('Display Layout', () => {
         await page.locator('.c-tree__item.is-navigated-object .c-disclosure-triangle').click();
 
         // Bring up context menu and remove
-        await page.locator('.c-tree__item.is-alias .c-tree__item__name:text("Test Sine Wave Generator")').first().click({ button: 'right' });
+        await sineWaveGeneratorTreeItem.nth(1).click({ button: 'right' });
         await page.locator('li[role="menuitem"]:has-text("Remove")').click();
         await page.locator('button:has-text("OK")').click();
 
@@ -146,8 +151,7 @@ test.describe('Display Layout', () => {
         });
         // Create a Display Layout
         const displayLayout = await createDomainObjectWithDefaults(page, {
-            type: 'Display Layout',
-            name: "Test Display Layout"
+            type: 'Display Layout'
         });
         // Edit Display Layout
         await page.locator('[title="Edit"]').click();
@@ -155,7 +159,9 @@ test.describe('Display Layout', () => {
         // Expand the 'My Items' folder in the left tree
         await page.locator('.c-tree__item__view-control.c-disclosure-triangle').click();
         // Add the Sine Wave Generator to the Display Layout and save changes
-        const treePane = page.locator('#tree-pane');
+        const treePane = page.getByRole('tree', {
+            name: 'Main Tree'
+        });
         const sineWaveGeneratorTreeItem = treePane.getByRole('treeitem', {
             name: new RegExp(sineWaveObject.name)
         });
@@ -173,7 +179,7 @@ test.describe('Display Layout', () => {
         await page.goto(sineWaveObject.url);
 
         // Bring up context menu and remove
-        await page.locator('.c-tree__item.is-alias .c-tree__item__name:text("Test Sine Wave Generator")').click({ button: 'right' });
+        await sineWaveGeneratorTreeItem.first().click({ button: 'right' });
         await page.locator('li[role="menuitem"]:has-text("Remove")').click();
         await page.locator('button:has-text("OK")').click();
 

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

@@ -25,26 +25,33 @@ const { createDomainObjectWithDefaults } = require('../../../../appActions');
 
 test.describe('Flexible Layout', () => {
     let sineWaveObject;
+    let clockObject;
     test.beforeEach(async ({ page }) => {
         await page.goto('./', { waitUntil: 'networkidle' });
 
         // Create Sine Wave Generator
         sineWaveObject = await createDomainObjectWithDefaults(page, {
-            type: 'Sine Wave Generator',
-            name: "Test Sine Wave Generator"
+            type: 'Sine Wave Generator'
         });
 
         // Create Clock Object
-        await createDomainObjectWithDefaults(page, {
-            type: 'Clock',
-            name: "Test Clock"
+        clockObject = await createDomainObjectWithDefaults(page, {
+            type: 'Clock'
         });
     });
     test('panes have the appropriate draggable attribute while in Edit and Browse modes', async ({ page }) => {
+        const treePane = page.getByRole('tree', {
+            name: 'Main Tree'
+        });
+        const sineWaveGeneratorTreeItem = treePane.getByRole('treeitem', {
+            name: new RegExp(sineWaveObject.name)
+        });
+        const clockTreeItem = treePane.getByRole('treeitem', {
+            name: new RegExp(clockObject.name)
+        });
         // Create a Flexible Layout
         await createDomainObjectWithDefaults(page, {
-            type: 'Flexible Layout',
-            name: "Test Flexible Layout"
+            type: 'Flexible Layout'
         });
         // Edit Flexible Layout
         await page.locator('[title="Edit"]').click();
@@ -52,8 +59,8 @@ test.describe('Flexible Layout', () => {
         // Expand the 'My Items' folder in the left tree
         await page.locator('.c-tree__item__view-control.c-disclosure-triangle').first().click();
         // Add the Sine Wave Generator and Clock to the Flexible Layout
-        await page.dragAndDrop('text=Test Sine Wave Generator', '.c-fl__container.is-empty');
-        await page.dragAndDrop('text=Test Clock', '.c-fl__container.is-empty');
+        await sineWaveGeneratorTreeItem.dragTo(page.locator('.c-fl__container.is-empty').first());
+        await clockTreeItem.dragTo(page.locator('.c-fl__container.is-empty'));
         // Check that panes can be dragged while Flexible Layout is in Edit mode
         let dragWrapper = page.locator('.c-fl-container__frames-holder .c-fl-frame__drag-wrapper').first();
         await expect(dragWrapper).toHaveAttribute('draggable', 'true');
@@ -65,10 +72,15 @@ test.describe('Flexible Layout', () => {
         await expect(dragWrapper).toHaveAttribute('draggable', 'false');
     });
     test('items in a flexible layout can be removed with object tree context menu when viewing the flexible layout', async ({ page }) => {
+        const treePane = page.getByRole('tree', {
+            name: 'Main Tree'
+        });
+        const sineWaveGeneratorTreeItem = treePane.getByRole('treeitem', {
+            name: new RegExp(sineWaveObject.name)
+        });
         // Create a Display Layout
         await createDomainObjectWithDefaults(page, {
-            type: 'Flexible Layout',
-            name: "Test Flexible Layout"
+            type: 'Flexible Layout'
         });
         // Edit Flexible Layout
         await page.locator('[title="Edit"]').click();
@@ -76,7 +88,7 @@ test.describe('Flexible Layout', () => {
         // Expand the 'My Items' folder in the left tree
         await page.locator('.c-tree__item__view-control.c-disclosure-triangle').first().click();
         // Add the Sine Wave Generator to the Flexible Layout and save changes
-        await page.dragAndDrop('text=Test Sine Wave Generator', '.c-fl__container.is-empty');
+        await sineWaveGeneratorTreeItem.dragTo(page.locator('.c-fl__container.is-empty').first());
         await page.locator('button[title="Save"]').click();
         await page.locator('text=Save and Finish Editing').click();
 
@@ -86,7 +98,7 @@ test.describe('Flexible Layout', () => {
         await page.locator('.c-tree__item.is-navigated-object .c-disclosure-triangle').click();
 
         // Bring up context menu and remove
-        await page.locator('.c-tree__item.is-alias .c-tree__item__name:text("Test Sine Wave Generator")').first().click({ button: 'right' });
+        await sineWaveGeneratorTreeItem.first().click({ button: 'right' });
         await page.locator('li[role="menuitem"]:has-text("Remove")').click();
         await page.locator('button:has-text("OK")').click();
 
@@ -98,10 +110,16 @@ test.describe('Flexible Layout', () => {
             type: 'issue',
             description: 'https://github.com/nasa/openmct/issues/3117'
         });
+        const treePane = page.getByRole('tree', {
+            name: 'Main Tree'
+        });
+        const sineWaveGeneratorTreeItem = treePane.getByRole('treeitem', {
+            name: new RegExp(sineWaveObject.name)
+        });
+
         // Create a Flexible Layout
         const flexibleLayout = await createDomainObjectWithDefaults(page, {
-            type: 'Flexible Layout',
-            name: "Test Flexible Layout"
+            type: 'Flexible Layout'
         });
         // Edit Flexible Layout
         await page.locator('[title="Edit"]').click();
@@ -109,7 +127,7 @@ test.describe('Flexible Layout', () => {
         // Expand the 'My Items' folder in the left tree
         await page.locator('.c-tree__item__view-control.c-disclosure-triangle').click();
         // Add the Sine Wave Generator to the Flexible Layout and save changes
-        await page.dragAndDrop('text=Test Sine Wave Generator', '.c-fl__container.is-empty');
+        await sineWaveGeneratorTreeItem.dragTo(page.locator('.c-fl__container.is-empty').first());
         await page.locator('button[title="Save"]').click();
         await page.locator('text=Save and Finish Editing').click();
 
@@ -122,7 +140,7 @@ test.describe('Flexible Layout', () => {
         await page.goto(sineWaveObject.url);
 
         // Bring up context menu and remove
-        await page.locator('.c-tree__item.is-alias .c-tree__item__name:text("Test Sine Wave Generator")').click({ button: 'right' });
+        await sineWaveGeneratorTreeItem.first().click({ button: 'right' });
         await page.locator('li[role="menuitem"]:has-text("Remove")').click();
         await page.locator('button:has-text("OK")').click();
 

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

@@ -198,7 +198,9 @@ test.describe('Tagging in Notebooks @addInit', () => {
             page.click('.c-disclosure-triangle')
         ]);
 
-        const treePane = page.locator('#tree-pane');
+        const treePane = page.getByRole('tree', {
+            name: 'Main Tree'
+        });
         // Click Clock
         await treePane.getByRole('treeitem', {
             name: clock.name

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

@@ -0,0 +1,79 @@
+/*****************************************************************************
+ * 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', () => {
+
+    test('Using the remove action removes the correct plot', async ({ page }) => {
+        await page.goto('/', { waitUntil: 'networkidle' });
+        const overlayPlot = await createDomainObjectWithDefaults(page, {
+            type: "Overlay Plot"
+        });
+
+        await createDomainObjectWithDefaults(page, {
+            type: "Sine Wave Generator",
+            name: 'swg a',
+            parent: overlayPlot.uuid
+        });
+        await createDomainObjectWithDefaults(page, {
+            type: "Sine Wave Generator",
+            name: 'swg b',
+            parent: overlayPlot.uuid
+        });
+        await createDomainObjectWithDefaults(page, {
+            type: "Sine Wave Generator",
+            name: 'swg c',
+            parent: overlayPlot.uuid
+        });
+        await page.goto(overlayPlot.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 page.locator('.js-elements-pool__tree >> text=swg b').click({ button: 'right' });
+        await page.locator('li[role="menuitem"]:has-text("Remove")').click();
+        await page.locator('.js-overlay .js-overlay__button >> text=OK').click();
+
+        // Wait until the number of elements in the elements pool has changed, and then confirm that the correct children were retained
+        // await page.waitForFunction(() => {
+        //     return Array.from(document.querySelectorAll('.js-elements-pool__tree .js-elements-pool__item')).length === 2;
+        // });
+        // Wait until there are only two items in the elements pool (ie the remove action has completed)
+        await expect(page.locator('.js-elements-pool__tree .js-elements-pool__item')).toHaveCount(2);
+
+        // Confirm that the elements pool contains the items we expect
+        await expect(page.locator('.js-elements-pool__tree >> text=swg a')).toHaveCount(1);
+        await expect(page.locator('.js-elements-pool__tree >> text=swg b')).toHaveCount(0);
+        await expect(page.locator('.js-elements-pool__tree >> text=swg c')).toHaveCount(1);
+    });
+});

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

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

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

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

src/api/composition/CompositionAPISpec.js

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

src/api/composition/CompositionProvider.js

@@ -224,7 +224,7 @@ export default class CompositionProvider {
       * @private
       * @param {DomainObject} oldDomainObject
       */
-    #onMutation(oldDomainObject) {
+    #onMutation(newDomainObject, oldDomainObject) {
         const id = objectUtils.makeKeyString(oldDomainObject.identifier);
         const listeners = this.#listeningTo[id];
 
@@ -232,8 +232,8 @@ export default class CompositionProvider {
             return;
         }
 
-        const oldComposition = listeners.composition.map(objectUtils.makeKeyString);
-        const newComposition = oldDomainObject.composition.map(objectUtils.makeKeyString);
+        const oldComposition = oldDomainObject.composition.map(objectUtils.makeKeyString);
+        const newComposition = newDomainObject.composition.map(objectUtils.makeKeyString);
 
         const added = _.difference(newComposition, oldComposition).map(objectUtils.parseKeyString);
         const removed = _.difference(oldComposition, newComposition).map(objectUtils.parseKeyString);
@@ -248,8 +248,6 @@ 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,8 +99,7 @@ export default class DefaultCompositionProvider extends CompositionProvider {
             objectListeners = this.listeningTo[keyString] = {
                 add: [],
                 remove: [],
-                reorder: [],
-                composition: [].slice.apply(domainObject.composition)
+                reorder: []
             };
         }
 
@@ -172,8 +171,9 @@ export default class DefaultCompositionProvider extends CompositionProvider {
      */
     add(parent, childId) {
         if (!this.includes(parent, childId)) {
-            parent.composition.push(childId);
-            this.publicAPI.objects.mutate(parent, 'composition', parent.composition);
+            const composition = structuredClone(parent.composition);
+            composition.push(childId);
+            this.publicAPI.objects.mutate(parent, 'composition', composition);
         }
     }
 

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

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

src/api/objects/MutableDomainObject.js

@@ -75,21 +75,23 @@ class MutableDomainObject {
         return eventOff;
     }
     $set(path, value) {
+        const oldModel = structuredClone(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);
+        this._globalEventEmitter.emit(ANY_OBJECT_EVENT, this, oldModel);
         //Emit wildcard event, with path so that callback knows what changed
-        this._globalEventEmitter.emit(qualifiedEventName(this, '*'), this, path, value);
+        this._globalEventEmitter.emit(qualifiedEventName(this, '*'), this, path, value, oldModel, oldValue);
 
         //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));
+            this._globalEventEmitter.emit(qualifiedEventName(this, parentPropertyPath), _.get(this, parentPropertyPath), _.get(oldModel, parentPropertyPath));
         }
 
         //TODO: Emit events for listeners of child properties when parent changes.
@@ -124,7 +126,7 @@ class MutableDomainObject {
         Object.assign(mutable, object);
 
         mutable.$observe('$_synchronize_model', (updatedObject) => {
-            let clone = JSON.parse(JSON.stringify(updatedObject));
+            let clone = structuredClone(updatedObject);
             utils.refresh(mutable, clone);
         });
 

src/api/objects/ObjectAPI.js

@@ -648,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');
+                    expect(mutationCallback).toHaveBeenCalledWith('some-new-value', 'other-attribute-value');
                     unlisten();
                 });
             });
@@ -419,14 +419,20 @@ describe("The Object API", () => {
 
                     objectAPI.mutate(mutable, 'objectAttribute.embeddedObject.embeddedKey', 'updated-embedded-value');
                 }).then(function () {
-                    expect(embeddedKeyCallback).toHaveBeenCalledWith('updated-embedded-value');
+                    expect(embeddedKeyCallback).toHaveBeenCalledWith('updated-embedded-value', '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">
+<div class="c-overlay js-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"
+                class="c-button js-overlay__button"
                 tabindex="0"
                 :class="{'c-button--major': focusIndex===index}"
                 @focus="focusIndex=index"

src/plugins/formActions/CreateAction.js

@@ -59,7 +59,7 @@ export default class CreateAction extends PropertiesAction {
             _.set(this.domainObject, key, value);
         });
 
-        const parentDomainObject = parentDomainObjectPath[0];
+        const parentDomainObject = this.openmct.objects.toMutable(parentDomainObjectPath[0]);
 
         this.domainObject.modified = Date.now();
         this.domainObject.location = this.openmct.objects.makeKeyString(parentDomainObject.identifier);
@@ -85,6 +85,7 @@ 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();
         }
 
@@ -142,18 +143,21 @@ export default class CreateAction extends PropertiesAction {
             }
         };
 
-        this.domainObject = domainObject;
+        this.domainObject = this.openmct.objects.toMutable(domainObject);
 
         if (definition.initialize) {
-            definition.initialize(domainObject);
+            definition.initialize(this.domainObject);
         }
 
-        const createWizard = new CreateWizard(this.openmct, domainObject, this.parentDomainObject);
+        const createWizard = new CreateWizard(this.openmct, this.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));
+            .catch(this._onCancel.bind(this))
+            .finally(() => {
+                this.openmct.objects.destroyMutable(this.domainObject);
+            });
     }
 }

src/plugins/move/MoveAction.js

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

src/plugins/plot/MctPlot.vue

@@ -820,21 +820,29 @@ export default {
 
         marqueeAnnotations(annotationsToSelect) {
             annotationsToSelect.forEach(annotationToSelect => {
-                const firstTargetKeyString = Object.keys(annotationToSelect.targets)[0];
-                const firstTarget = annotationToSelect.targets[firstTargetKeyString];
-                const rectangle = {
-                    start: {
-                        x: firstTarget.minX,
-                        y: firstTarget.minY
-                    },
-                    end: {
-                        x: firstTarget.maxX,
-                        y: firstTarget.maxY
-                    },
-                    color: [1, 1, 1, 0.10]
-                };
-                this.rectangles.push(rectangle);
+                Object.keys(annotationToSelect.targets).forEach(targetKeyString => {
+                    const target = annotationToSelect.targets[targetKeyString];
+                    const series = this.seriesModels.find(seriesModel => seriesModel.keyString === targetKeyString);
+                    if (!series) {
+                        return;
+                    }
 
+                    const yAxisId = series.get('yAxisId');
+                    const rectangle = {
+                        start: {
+                            x: target.minX,
+                            y: [target.minY],
+                            yAxisIds: [yAxisId]
+                        },
+                        end: {
+                            x: target.maxX,
+                            y: [target.maxY],
+                            yAxisIds: [yAxisId]
+                        },
+                        color: [1, 1, 1, 0.10]
+                    };
+                    this.rectangles.push(rectangle);
+                });
             });
         },
         gatherNearbyAnnotations() {
@@ -1197,20 +1205,16 @@ export default {
                     ];
             this.openmct.selection.select(selection, true);
         },
-        selectNewPlotAnnotations(minX, minY, maxX, maxY, pointsInBox, event) {
-            const boundingBox = {
-                minX,
-                minY,
-                maxX,
-                maxY
-            };
+        selectNewPlotAnnotations(boundingBoxPerYAxis, pointsInBox, event) {
             let targetDomainObjects = {};
             let targetDetails = {};
             let annotations = {};
             pointsInBox.forEach(pointInBox => {
                 if (pointInBox.length) {
                     const seriesID = pointInBox[0].series.keyString;
-                    targetDetails[seriesID] = boundingBox;
+                    const boundingBoxWithId = boundingBoxPerYAxis.find(box => box.id === pointInBox[0].series.get('yAxisId'));
+                    targetDetails[seriesID] = boundingBoxWithId?.boundingBox;
+
                     targetDomainObjects[seriesID] = pointInBox[0].series.domainObject;
                 }
             });
@@ -1225,10 +1229,23 @@ export default {
             rawAnnotations.forEach(rawAnnotation => {
                 if (rawAnnotation.targets) {
                     const targetValues = Object.values(rawAnnotation.targets);
+                    const targetKeys = Object.keys(rawAnnotation.targets);
                     if (targetValues && targetValues.length) {
-                        // just get the first one
-                        const boundingBox = Object.values(targetValues)?.[0];
-                        const pointsInBox = this.getPointsInBox(boundingBox, rawAnnotation);
+                        let boundingBoxPerYAxis = [];
+                        targetValues.forEach((boundingBox, index) => {
+                            const seriesId = targetKeys[index];
+                            const series = this.seriesModels.find(seriesModel => seriesModel.keyString === seriesId);
+                            if (!series) {
+                                return;
+                            }
+
+                            boundingBoxPerYAxis.push({
+                                id: series.get('yAxisId'),
+                                boundingBox
+                            });
+                        });
+
+                        const pointsInBox = this.getPointsInBox(boundingBoxPerYAxis, rawAnnotation);
                         if (pointsInBox && pointsInBox.length) {
                             annotationsByPoints.push(pointsInBox.flat());
                         }
@@ -1238,10 +1255,17 @@ export default {
 
             return annotationsByPoints.flat();
         },
-        getPointsInBox(boundingBox, rawAnnotation) {
+        getPointsInBox(boundingBoxPerYAxis, rawAnnotation) {
             // load series models in KD-Trees
             const seriesKDTrees = [];
             this.seriesModels.forEach(seriesModel => {
+                const boundingBoxWithId = boundingBoxPerYAxis.find(box => box.id === seriesModel.get('yAxisId'));
+                const boundingBox = boundingBoxWithId?.boundingBox;
+                //Series was probably added after the last annotations were saved
+                if (!boundingBox) {
+                    return;
+                }
+
                 const seriesData = seriesModel.getSeriesData();
                 if (seriesData && seriesData.length) {
                     const kdTree = new KDBush(seriesData,
@@ -1283,25 +1307,31 @@ export default {
             return seriesKDTrees;
         },
         endAnnotationMarquee(event) {
-            const minX = Math.min(this.marquee.start.x, this.marquee.end.x);
-            const startMinY = this.marquee.start.y.reduce((previousY, currentY) => {
-                return Math.min(previousY, currentY);
-            }, this.marquee.start.y[0]);
-            const endMinY = this.marquee.end.y.reduce((previousY, currentY) => {
-                return Math.min(previousY, currentY);
-            }, this.marquee.end.y[0]);
-            const minY = Math.min(startMinY, endMinY);
-            const maxX = Math.max(this.marquee.start.x, this.marquee.end.x);
-            const maxY = Math.max(startMinY, endMinY);
-            const boundingBox = {
-                minX,
-                minY,
-                maxX,
-                maxY
-            };
-            const pointsInBox = this.getPointsInBox(boundingBox);
+            const boundingBoxPerYAxis = [];
+            this.yAxisListWithRange.forEach((yAxis, yIndex) => {
+                const minX = Math.min(this.marquee.start.x, this.marquee.end.x);
+                const minY = Math.min(this.marquee.start.y[yIndex], this.marquee.end.y[yIndex]);
+                const maxX = Math.max(this.marquee.start.x, this.marquee.end.x);
+                const maxY = Math.max(this.marquee.start.y[yIndex], this.marquee.end.y[yIndex]);
+                const boundingBox = {
+                    minX,
+                    minY,
+                    maxX,
+                    maxY
+                };
+                boundingBoxPerYAxis.push({
+                    id: yAxis.get('id'),
+                    boundingBox
+                });
+            });
+
+            const pointsInBox = this.getPointsInBox(boundingBoxPerYAxis);
+            if (!pointsInBox) {
+                return;
+            }
+
             this.annotationSelections = pointsInBox.flat();
-            this.selectNewPlotAnnotations(minX, minY, maxX, maxY, pointsInBox, event);
+            this.selectNewPlotAnnotations(boundingBoxPerYAxis, pointsInBox, event);
         },
         endZoomMarquee() {
             const startPixels = this.marquee.startPixels;

src/plugins/plot/chart/MCTChartAlarmLineSet.js

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

src/plugins/plot/chart/MctChart.vue

@@ -121,6 +121,7 @@ export default {
         hiddenYAxisIds() {
             this.hiddenYAxisIds.forEach(id => {
                 this.resetYOffsetAndSeriesDataForYAxis(id);
+                this.drawLimitLines();
             });
             this.scheduleDraw();
         }
@@ -196,15 +197,26 @@ export default {
             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);
         },
         onAddPoint(point, insertIndex, series) {
+            const mainYAxisId = this.config.yAxis.get('id');
+            const seriesYAxisId = series.get('yAxisId');
             const xRange = this.config.xAxis.get('displayRange');
-            //TODO: get the yAxis of this series
-            const yRange = this.config.yAxis.get('displayRange');
+
+            let yRange;
+            if (seriesYAxisId === mainYAxisId) {
+                yRange = this.config.yAxis.get('displayRange');
+            } else {
+                yRange = this.config.additionalYAxes.find(
+                    yAxis => yAxis.get('id') === seriesYAxisId
+                ).get('displayRange');
+            }
+
             const xValue = series.getXVal(point);
             const yValue = series.getYVal(point);
 
@@ -615,9 +627,13 @@ export default {
             alarmSets.forEach(this.drawAlarmPoints, this);
         },
         drawLimitLines() {
+            Array.from(this.$refs.limitArea.children).forEach((el) => el.remove());
             this.config.series.models.forEach(series => {
                 const yAxisId = series.get('yAxisId');
-                this.drawLimitLinesForSeries(yAxisId, series);
+
+                if (this.hiddenYAxisIds.indexOf(yAxisId) < 0) {
+                    this.drawLimitLinesForSeries(yAxisId, series);
+                }
             });
         },
         drawLimitLinesForSeries(yAxisId, series) {
@@ -631,12 +647,11 @@ export default {
                 return;
             }
 
-            Array.from(this.$refs.limitArea.children).forEach((el) => el.remove());
             let limitPointOverlap = [];
             this.limitLines.forEach((limitLine) => {
                 let limitContainerEl = this.$refs.limitArea;
                 limitLine.limits.forEach((limit) => {
-                    if (!series.includes(limit.seriesKey)) {
+                    if (series.keyString !== limit.seriesKey) {
                         return;
                     }
 
@@ -744,6 +759,10 @@ export default {
             }
         },
         annotatedPointWithinRange(annotatedPoint, xRange, yRange) {
+            if (!yRange) {
+                return false;
+            }
+
             const xValue = annotatedPoint.series.getXVal(annotatedPoint.point);
             const yValue = annotatedPoint.series.getYVal(annotatedPoint.point);
 

src/plugins/plot/configuration/PlotConfigurationModel.js

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

src/plugins/plot/configuration/SeriesCollection.js

@@ -56,6 +56,10 @@ export default class SeriesCollection extends Collection {
             const series = this.byIdentifier(seriesConfig.identifier);
             if (series) {
                 series.persistedConfig = seriesConfig;
+                if (!series.persistedConfig.yAxisId) {
+                    return;
+                }
+
                 if (series.get('yAxisId') !== series.persistedConfig.yAxisId) {
                     series.set('yAxisId', series.persistedConfig.yAxisId);
                 }

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

@@ -227,8 +227,8 @@ export default {
             let prefix = 'yAxis';
             if (this.isAdditionalYAxis) {
                 let index = -1;
-                if (this.additionalYAxes) {
-                    index = this.additionalYAxes.findIndex((yAxis) => {
+                if (this.domainObject?.configuration?.additionalYAxes) {
+                    index = this.domainObject?.configuration?.additionalYAxes.findIndex((yAxis) => {
                         return yAxis.id === this.id;
                     });
                 }

src/plugins/plot/pluginSpec.js

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

src/plugins/plot/stackedPlot/StackedPlot.vue

@@ -35,10 +35,10 @@
     />
     <div class="l-view-section">
         <stacked-plot-item
-            v-for="object in compositionObjects"
-            :key="object.id"
+            v-for="objectWrapper in compositionObjects"
+            :key="objectWrapper.keyString"
             class="c-plot--stacked-container"
-            :child-object="object"
+            :child-object="objectWrapper.object"
             :options="options"
             :grid-lines="gridLines"
             :color-palette="colorPalette"
@@ -169,7 +169,10 @@ export default {
 
             this.$set(this.tickWidthMap, id, 0);
 
-            this.compositionObjects.push(child);
+            this.compositionObjects.push({
+                object: child,
+                keyString: id
+            });
         },
 
         removeChild(childIdentifier) {
@@ -180,6 +183,7 @@ export default {
             const configIndex = this.domainObject.configuration.series.findIndex((seriesConfig) => {
                 return this.openmct.objects.areIdsEqual(seriesConfig.identifier, childIdentifier);
             });
+
             if (configIndex > -1) {
                 this.domainObject.configuration.series.splice(configIndex, 1);
             }
@@ -188,15 +192,11 @@ export default {
                 keyString: id
             });
 
-            const childObj = this.compositionObjects.filter((c) => {
-                const identifier = this.openmct.objects.makeKeyString(c.identifier);
+            this.compositionObjects = this.compositionObjects.filter((c) => {
+                const identifier = c.keyString;
 
-                return identifier === id;
-            })[0];
-            if (childObj) {
-                const index = this.compositionObjects.indexOf(childObj);
-                this.compositionObjects.splice(index, 1);
-            }
+                return identifier !== id;
+            });
         },
 
         compositionReorder(reorderPlan) {

src/styles/_controls.scss

@@ -270,9 +270,11 @@ button {
     flex: 0 0 auto;
     width: $d;
     position: relative;
+    visibility: hidden;
 
     &.is-enabled {
         cursor: pointer;
+        visibility: visible;
 
         &:hover {
             color: $colorDisclosureCtrlHov;

src/ui/inspector/ElementItem.vue

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

src/ui/inspector/PlotElementsPool.vue

@@ -34,7 +34,7 @@
         <ul
             v-if="hasElements"
             id="inspector-elements-tree"
-            class="c-tree c-elements-pool__tree"
+            class="c-tree c-elements-pool__tree js-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

src/ui/inspector/elements.scss

@@ -39,7 +39,6 @@
 
     &__group {
         flex: 1 1 auto;
-        overflow: auto;
         margin-top: $interiorMarginLg;
     }
 

src/ui/layout/CreateButton.vue

@@ -14,7 +14,6 @@
 
 <script>
 import CreateAction from '@/plugins/formActions/CreateAction';
-import objectUtils from 'objectUtils';
 
 export default {
     inject: ['openmct'],
@@ -74,23 +73,9 @@ export default {
             this.openmct.menus.showSuperMenu(x, y, this.sortedItems, menuOptions);
         },
         create(key) {
-            // 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);
+            const createAction = new CreateAction(this.openmct, key, this.openmct.router.path[0]);
 
-                    createAction.invoke();
-                });
-        },
-        convertToLegacy(domainObject) {
-            let keyString = objectUtils.makeKeyString(domainObject.identifier);
-            let oldModel = objectUtils.toOldFormat(domainObject);
-
-            return this.openmct.$injector.get('instantiate')(oldModel, keyString);
+            createAction.invoke();
         }
     }
 };

src/ui/layout/Layout.vue

@@ -79,9 +79,7 @@
             <multipane
                 type="vertical"
             >
-                <pane
-                    id="tree-pane"
-                >
+                <pane>
                     <mct-tree
                         ref="mctTree"
                         :sync-tree-navigation="triggerSync"

src/ui/layout/mct-tree.vue

@@ -41,6 +41,7 @@
         ref="mainTree"
         class="c-tree-and-search__tree c-tree"
         role="tree"
+        :aria-label="getAriaLabel"
         aria-expanded="true"
     >
 
@@ -192,6 +193,9 @@ export default {
         focusedItems() {
             return this.activeSearch ? this.searchResultItems : this.treeItems;
         },
+        getAriaLabel() {
+            return this.isSelectorTree ? "Create Modal Tree" : "Main Tree";
+        },
         pageThreshold() {
             return Math.ceil(this.mainTreeHeight / this.itemHeight) + ITEM_BUFFER;
         },

src/ui/layout/recent-objects.scss

@@ -26,7 +26,7 @@
   align-items: flex-start;
 
   > * + * {
-      margin-left: $interiorMargin;
+      margin-left: $interiorMarginSm;
   }
 
   + .c-recentobjects-listitem {
@@ -58,7 +58,7 @@
 
   &__type-icon {
       color: $colorItemTreeIcon;
-      font-size: 2.2em;
+      font-size: 1.25em;
 
       // TEMP: uses object-label component, hide label part
       .c-object-label__name {
@@ -72,6 +72,7 @@
 
   &__body {
       flex: 1 1 auto;
+      padding-top: 2px; // Align with type icon
 
       > * + * {
           margin-top: $interiorMarginSm;