From eeb8e9704bff41158f867a2b270500f547332385 Mon Sep 17 00:00:00 2001 From: Scott Bell Date: Tue, 6 Feb 2024 08:16:31 +0100 Subject: [PATCH] Ensure previews work for plots (#7459) * fix large view in tree * remove existing view concept * fix plots in overlays * remove debug and actually remove overlays when dismissed * add test * improve tests * move test --- .../plugins/plot/previews.e2e.spec.js | 88 +++++++++++++++++++ src/api/overlays/Overlay.js | 1 + src/plugins/plot/chart/MctChart.vue | 37 +++++--- src/plugins/plot/draw/DrawWebGL.js | 4 +- src/ui/components/ObjectFrame.vue | 1 + src/ui/preview/PreviewAction.js | 7 +- src/utils/visibility/VisibilityObserver.js | 14 ++- 7 files changed, 133 insertions(+), 19 deletions(-) create mode 100644 e2e/tests/functional/plugins/plot/previews.e2e.spec.js diff --git a/e2e/tests/functional/plugins/plot/previews.e2e.spec.js b/e2e/tests/functional/plugins/plot/previews.e2e.spec.js new file mode 100644 index 0000000000..fc7f11a5a7 --- /dev/null +++ b/e2e/tests/functional/plugins/plot/previews.e2e.spec.js @@ -0,0 +1,88 @@ +/***************************************************************************** + * Open MCT, Copyright (c) 2014-2024, United States Government + * as represented by the Administrator of the National Aeronautics and Space + * Administration. All rights reserved. + * + * Open MCT is licensed under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * http://www.apache.org/licenses/LICENSE-2.0. + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations + * under the License. + * + * Open MCT includes source code licensed under additional open source + * licenses. See the Open Source Licenses file (LICENSES.md) included with + * this source code distribution or the Licensing information page available + * at runtime from the About dialog for additional information. + *****************************************************************************/ + +import { createDomainObjectWithDefaults } from '../../../../appActions.js'; +import { expect, test } from '../../../../pluginFixtures.js'; + +test.describe('Plots work in Previews', () => { + test('We can preview plot in display layouts', async ({ page, openmctConfig }) => { + const { myItemsFolderName } = openmctConfig; + await page.goto('./', { waitUntil: 'domcontentloaded' }); + // Create a Sinewave Generator + const sineWaveObject = await createDomainObjectWithDefaults(page, { + type: 'Sine Wave Generator' + }); + // Create a Display Layout + await createDomainObjectWithDefaults(page, { + type: 'Display Layout', + name: 'Test Display Layout' + }); + // Edit Display Layout + await page.getByLabel('Edit Object').click(); + + // Expand the 'My Items' folder in the left tree + await page.getByLabel(`Expand ${myItemsFolderName} folder`).click(); + // Add the Sine Wave Generator to the Display Layout and save changes + const treePane = page.getByRole('tree', { + name: 'Main Tree' + }); + const sineWaveGeneratorTreeItem = treePane.getByRole('treeitem', { + name: new RegExp(sineWaveObject.name) + }); + const layoutGridHolder = page.getByLabel('Test Display Layout Layout Grid'); + await sineWaveGeneratorTreeItem.dragTo(layoutGridHolder); + await page.getByLabel('Save').click(); + await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click(); + + // right click on the plot and select view large + await page.getByLabel('Sine', { exact: true }).click({ button: 'right' }); + await page.getByLabel('View Historical Data').click(); + await expect(page.getByLabel('Preview Container').getByLabel('Plot Canvas')).toBeVisible(); + await page.getByLabel('Close').click(); + await page.getByLabel('Expand Test Display Layout layout').click(); + + // change to a plot and ensure embiggen works + await page.getByLabel('Edit Object').click(); + await page.getByLabel('Move Sub-object Frame').click(); + await page.getByText('View type').click(); + await page.getByText('Overlay Plot').click(); + await page.getByLabel('Save').click(); + await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click(); + await expect( + page.getByLabel('Test Display Layout Layout', { exact: true }).getByLabel('Plot Canvas') + ).toBeVisible(); + await expect(page.getByLabel('Preview Container')).toBeHidden(); + await page.getByLabel('Large View').click(); + await expect(page.getByLabel('Preview Container').getByLabel('Plot Canvas')).toBeVisible(); + await page.getByLabel('Close').click(); + + // get last sinewave tree item (in the display layout) + await page + .getByRole('treeitem', { name: /Sine Wave Generator/ }) + .locator('a') + .last() + .click({ button: 'right' }); + await page.getByLabel('View', { exact: true }).click(); + await expect(page.getByLabel('Preview Container').getByLabel('Plot Canvas')).toBeVisible(); + await page.getByLabel('Close').click(); + }); +}); diff --git a/src/api/overlays/Overlay.js b/src/api/overlays/Overlay.js index 33b4e7935c..8bdfc83835 100644 --- a/src/api/overlays/Overlay.js +++ b/src/api/overlays/Overlay.js @@ -61,6 +61,7 @@ class Overlay extends EventEmitter { dismiss() { this.emit('destroy'); this.destroy(); + this.container.remove(); } //Ensures that any callers are notified that the overlay is dismissed diff --git a/src/plugins/plot/chart/MctChart.vue b/src/plugins/plot/chart/MctChart.vue index 0a54de5ade..31a7518d4f 100644 --- a/src/plugins/plot/chart/MctChart.vue +++ b/src/plugins/plot/chart/MctChart.vue @@ -22,8 +22,20 @@