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 <simplyrender@gmail.com>
Co-authored-by: Andrew Henry <akhenry@gmail.com>

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

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()
+    ]);
+}

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",

src/plugins/plot/MctPlot.vue

@@ -87,6 +87,7 @@
                         :highlights="highlights"
                         :show-limit-line-labels="showLimitLineLabels"
                         @plotReinitializeCanvas="initCanvas"
+                        @chartLoaded="initialize"
                     />
                 </div>
 
@@ -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);

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();

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

src/plugins/plot/legend/PlotLegendItemCollapsed.vue

@@ -54,8 +54,10 @@
 <script>
 
 import {getLimitClass} from "@/plugins/plot/chart/limitUtil";
+import eventHelpers from "../lib/eventHelpers";
 
 export default {
+    inject: ['openmct', 'domainObject'],
     props: {
         valueToShowWhenCollapsed: {
             type: String,
@@ -103,8 +105,18 @@ export default {
         }
     },
     mounted() {
+        eventHelpers.extend(this);
+        this.listenTo(this.seriesObject, 'change:color', (newColor) => {
+            this.updateColor(newColor);
+        }, this);
+        this.listenTo(this.seriesObject, 'change:name', () => {
+            this.updateName();
+        }, this);
         this.initialize();
     },
+    beforeDestroy() {
+        this.stopListening();
+    },
     methods: {
         initialize(highlightedObject) {
             const seriesObject = highlightedObject ? highlightedObject.series : this.seriesObject;
@@ -130,6 +142,12 @@ export default {
                 this.formattedYValueFromStats = '';
             }
         },
+        updateColor(newColor) {
+            this.colorAsHexString = newColor.asHexString();
+        },
+        updateName() {
+            this.nameWithUnit = this.seriesObject.nameWithUnit();
+        },
         toggleHover(hover) {
             this.hover = hover;
             this.$emit('legendHoverChanged', {

src/plugins/plot/legend/PlotLegendItemExpanded.vue

@@ -80,8 +80,10 @@
 
 <script>
 import {getLimitClass} from "@/plugins/plot/chart/limitUtil";
+import eventHelpers from "@/plugins/plot/lib/eventHelpers";
 
 export default {
+    inject: ['openmct', 'domainObject'],
     props: {
         seriesObject: {
             type: Object,
@@ -140,8 +142,18 @@ export default {
         }
     },
     mounted() {
+        eventHelpers.extend(this);
+        this.listenTo(this.seriesObject, 'change:color', (newColor) => {
+            this.updateColor(newColor);
+        }, this);
+        this.listenTo(this.seriesObject, 'change:name', () => {
+            this.updateName();
+        }, this);
         this.initialize();
     },
+    beforeDestroy() {
+        this.stopListening();
+    },
     methods: {
         initialize(highlightedObject) {
             const seriesObject = highlightedObject ? highlightedObject.series : this.seriesObject;
@@ -170,6 +182,12 @@ export default {
                 this.formattedMaxY = '';
             }
         },
+        updateColor(newColor) {
+            this.colorAsHexString = newColor.asHexString();
+        },
+        updateName(newName) {
+            this.nameWithUnit = this.seriesObject.nameWithUnit();
+        },
         toggleHover(hover) {
             this.hover = hover;
             this.$emit('legendHoverChanged', {