From 500e3bc583bf0f54e80053d2fe0a60132f271df9 Mon Sep 17 00:00:00 2001 From: Alize Nguyen Date: Tue, 13 Sep 2022 17:10:21 -0500 Subject: [PATCH] Fix legend color to be in sync with plot color on change (#5371) * Update name and color for legend when series changes Co-authored-by: Joshi Co-authored-by: Andrew Henry --- .../plugins/plot/autoscale.e2e.spec.js | 4 +- ... autoscale-canvas-panned-chrome-linux.png} | Bin ... autoscale-canvas-prepan-chrome-linux.png} | Bin .../plugins/plot/plotLegendSwatch.e2e.spec.js | 110 ++++++++++++++++++ package.json | 2 +- src/plugins/plot/MctPlot.vue | 6 +- src/plugins/plot/chart/MctChart.vue | 1 + src/plugins/plot/configuration/PlotSeries.js | 16 +++ .../plot/legend/PlotLegendItemCollapsed.vue | 18 +++ .../plot/legend/PlotLegendItemExpanded.vue | 18 +++ 10 files changed, 167 insertions(+), 8 deletions(-) rename e2e/tests/functional/plugins/plot/autoscale.e2e.spec.js-snapshots/{autoscale-canvas-panned-chrome-linux => autoscale-canvas-panned-chrome-linux.png} (100%) rename e2e/tests/functional/plugins/plot/autoscale.e2e.spec.js-snapshots/{autoscale-canvas-prepan-chrome-linux => autoscale-canvas-prepan-chrome-linux.png} (100%) create mode 100644 e2e/tests/functional/plugins/plot/plotLegendSwatch.e2e.spec.js diff --git a/e2e/tests/functional/plugins/plot/autoscale.e2e.spec.js b/e2e/tests/functional/plugins/plot/autoscale.e2e.spec.js index 643880056d..81640b95c1 100644 --- a/e2e/tests/functional/plugins/plot/autoscale.e2e.spec.js +++ b/e2e/tests/functional/plugins/plot/autoscale.e2e.spec.js @@ -56,7 +56,7 @@ test.describe('ExportAsJSON', () => { await canvas.hover({trial: true}); - expect(await canvas.screenshot()).toMatchSnapshot('autoscale-canvas-prepan'); + expect(await canvas.screenshot()).toMatchSnapshot('autoscale-canvas-prepan.png', { animations: 'disabled' }); //Alt Drag Start await page.keyboard.down('Alt'); @@ -80,7 +80,7 @@ test.describe('ExportAsJSON', () => { await canvas.hover({trial: true}); - expect(await canvas.screenshot()).toMatchSnapshot('autoscale-canvas-panned'); + expect(await canvas.screenshot()).toMatchSnapshot('autoscale-canvas-panned.png', { animations: 'disabled' }); }); }); diff --git a/e2e/tests/functional/plugins/plot/autoscale.e2e.spec.js-snapshots/autoscale-canvas-panned-chrome-linux b/e2e/tests/functional/plugins/plot/autoscale.e2e.spec.js-snapshots/autoscale-canvas-panned-chrome-linux.png similarity index 100% rename from e2e/tests/functional/plugins/plot/autoscale.e2e.spec.js-snapshots/autoscale-canvas-panned-chrome-linux rename to e2e/tests/functional/plugins/plot/autoscale.e2e.spec.js-snapshots/autoscale-canvas-panned-chrome-linux.png diff --git a/e2e/tests/functional/plugins/plot/autoscale.e2e.spec.js-snapshots/autoscale-canvas-prepan-chrome-linux b/e2e/tests/functional/plugins/plot/autoscale.e2e.spec.js-snapshots/autoscale-canvas-prepan-chrome-linux.png similarity index 100% rename from e2e/tests/functional/plugins/plot/autoscale.e2e.spec.js-snapshots/autoscale-canvas-prepan-chrome-linux rename to e2e/tests/functional/plugins/plot/autoscale.e2e.spec.js-snapshots/autoscale-canvas-prepan-chrome-linux.png diff --git a/e2e/tests/functional/plugins/plot/plotLegendSwatch.e2e.spec.js b/e2e/tests/functional/plugins/plot/plotLegendSwatch.e2e.spec.js new file mode 100644 index 0000000000..25a5e348d7 --- /dev/null +++ b/e2e/tests/functional/plugins/plot/plotLegendSwatch.e2e.spec.js @@ -0,0 +1,110 @@ +/***************************************************************************** + * 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'); + +test.describe('Legend color in sync with plot color', () => { + test('Testing', async ({ page }) => { + await makeOverlayPlot(page); + + // navigate to plot series color palette + await page.click('.l-browse-bar__actions__edit'); + await page.locator('li.c-tree__item.menus-to-left .c-disclosure-triangle').click(); + await page.locator('.c-click-swatch--menu').click(); + await page.locator('.c-palette__item[style="background: rgb(255, 166, 61);"]').click(); + + // gets color for swatch located in legend + const element = await page.waitForSelector('.plot-series-color-swatch'); + const color = await element.evaluate((el) => { + return window.getComputedStyle(el).getPropertyValue('background-color'); + }); + + expect(color).toBe('rgb(255, 166, 61)'); + }); +}); + +async function saveOverlayPlot(page) { + // save overlay plot + 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' }); +} + +async function makeOverlayPlot(page) { + // fresh page with time range from 2022-03-29 22:00:00.000Z to 2022-03-29 22:00:30.000Z + await page.goto('/', { waitUntil: 'networkidle' }); + + // create overlay plot + + await page.locator('button.c-create-button').click(); + await page.locator('li:has-text("Overlay Plot")').click(); + await Promise.all([ + page.waitForNavigation({ waitUntil: 'networkidle'}), + page.locator('text=OK').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'}); + + // save the overlay plot + + await saveOverlayPlot(page); + + // create a sinewave generator + + await page.locator('button.c-create-button').click(); + await page.locator('li:has-text("Sine Wave Generator")').click(); + + // Click OK to make generator + + await Promise.all([ + page.waitForNavigation({ waitUntil: 'networkidle'}), + page.locator('text=OK').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'}); + + // click on overlay plot + + await page.locator('text=Open MCT My Items >> span').nth(3).click(); + await Promise.all([ + page.waitForNavigation(), + page.locator('text=Unnamed Overlay Plot').first().click() + ]); +} diff --git a/package.json b/package.json index 4ece065b96..a781c0a9d4 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "openmct", - "version": "2.0.8", + "version": "2.1.0-SNAPSHOT", "description": "The Open MCT core platform", "devDependencies": { "@babel/eslint-parser": "7.18.9", diff --git a/src/plugins/plot/MctPlot.vue b/src/plugins/plot/MctPlot.vue index 81ee4e5dcf..cf2e6dfb2e 100644 --- a/src/plugins/plot/MctPlot.vue +++ b/src/plugins/plot/MctPlot.vue @@ -87,6 +87,7 @@ :highlights="highlights" :show-limit-line-labels="showLimitLineLabels" @plotReinitializeCanvas="initCanvas" + @chartLoaded="initialize" /> @@ -359,11 +360,6 @@ export default { this.setTimeContext(); this.loaded = true; - - //We're referencing the canvas elements from the mct-chart in the initialize method. - // So we need $nextTick to ensure the component is fully mounted before we can initialize stuff. - this.$nextTick(this.initialize); - }, beforeDestroy() { document.removeEventListener('keydown', this.handleKeyDown); diff --git a/src/plugins/plot/chart/MctChart.vue b/src/plugins/plot/chart/MctChart.vue index 2ec6d74f5d..2f53255a1f 100644 --- a/src/plugins/plot/chart/MctChart.vue +++ b/src/plugins/plot/chart/MctChart.vue @@ -115,6 +115,7 @@ export default { this.listenTo(this.config.yAxis, 'change', this.updateLimitsAndDraw); this.listenTo(this.config.xAxis, 'change', this.updateLimitsAndDraw); this.config.series.forEach(this.onSeriesAdd, this); + this.$emit('chartLoaded'); }, beforeDestroy() { this.destroy(); diff --git a/src/plugins/plot/configuration/PlotSeries.js b/src/plugins/plot/configuration/PlotSeries.js index 1c537186ea..5e3c8cc43c 100644 --- a/src/plugins/plot/configuration/PlotSeries.js +++ b/src/plugins/plot/configuration/PlotSeries.js @@ -126,10 +126,15 @@ export default class PlotSeries extends Model { */ destroy() { super.destroy(); + this.openmct.time.off('bounds', this.updateLimits); if (this.unsubscribe) { this.unsubscribe(); } + + if (this.removeMutationListener) { + this.removeMutationListener(); + } } /** @@ -157,6 +162,11 @@ export default class PlotSeries extends Model { }); this.openmct.time.on('bounds', this.updateLimits); + this.removeMutationListener = this.openmct.objects.observe( + this.domainObject, + 'name', + this.updateName.bind(this) + ); } /** @@ -225,6 +235,12 @@ export default class PlotSeries extends Model { }); /* eslint-enable you-dont-need-lodash-underscore/concat */ } + + updateName(name) { + if (name !== this.get('name')) { + this.set('name', name); + } + } /** * Update x formatter on x change. */ diff --git a/src/plugins/plot/legend/PlotLegendItemCollapsed.vue b/src/plugins/plot/legend/PlotLegendItemCollapsed.vue index 3c9c60ca8b..20cd87e0af 100644 --- a/src/plugins/plot/legend/PlotLegendItemCollapsed.vue +++ b/src/plugins/plot/legend/PlotLegendItemCollapsed.vue @@ -54,8 +54,10 @@