From 39ab81c3d0352deb1bc2156cd2e0a20086aaab1c Mon Sep 17 00:00:00 2001
From: Jesse Mazzella <ozyx@users.noreply.github.com>
Date: Mon, 4 Mar 2024 18:07:44 -0800
Subject: [PATCH] fix(overlay plot): legend updates correctly when removing
 element via remove action (#7531)

* fix: remove duplicate listeners
* fix: if no series found, don't splice
* test(e2e): update legend a11y and add test
---
 .../plugins/plot/overlayPlot.e2e.spec.js      | 21 +++++++++++++++++++
 src/plugins/plot/legend/PlotLegend.vue        | 11 ----------
 .../plot/legend/PlotLegendItemCollapsed.vue   | 12 +++++++----
 3 files changed, 29 insertions(+), 15 deletions(-)

diff --git a/e2e/tests/functional/plugins/plot/overlayPlot.e2e.spec.js b/e2e/tests/functional/plugins/plot/overlayPlot.e2e.spec.js
index 6f0745e34f..114d8beb79 100644
--- a/e2e/tests/functional/plugins/plot/overlayPlot.e2e.spec.js
+++ b/e2e/tests/functional/plugins/plot/overlayPlot.e2e.spec.js
@@ -356,6 +356,10 @@ test.describe('Overlay Plot', () => {
       type: 'Sine Wave Generator',
       parent: overlayPlot.uuid
     });
+    const swgB = await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      parent: overlayPlot.uuid
+    });
 
     await page.goto(overlayPlot.url);
     // Wait for plot series data to load and be drawn
@@ -370,6 +374,23 @@ test.describe('Overlay Plot', () => {
     await page.getByRole('menuitem', { name: 'Remove' }).click();
     await page.getByRole('button', { name: 'OK', exact: true }).click();
     await expect(swgAElementsPoolItem).toBeHidden();
+
+    await page.getByRole('button', { name: 'Save' }).click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/7530'
+    });
+    await test.step('Verify that the legend is correct after removing a series', async () => {
+      await page.getByLabel('Plot Canvas').hover();
+      await page.mouse.move(50, 0, {
+        steps: 10
+      });
+      await expect(page.getByLabel('Plot Legend Item')).toHaveCount(1);
+      await expect(page.getByLabel(`Plot Legend Item for ${swgA.name}`)).toBeHidden();
+      await expect(page.getByLabel(`Plot Legend Item for ${swgB.name}`)).toBeVisible();
+    });
   });
 });
 
diff --git a/src/plugins/plot/legend/PlotLegend.vue b/src/plugins/plot/legend/PlotLegend.vue
index e87325170e..9eaeeceab8 100644
--- a/src/plugins/plot/legend/PlotLegend.vue
+++ b/src/plugins/plot/legend/PlotLegend.vue
@@ -165,7 +165,6 @@ export default {
       this.registerListeners(this.config);
     }
     this.listenTo(this.config.legend, 'change:expandByDefault', this.changeExpandDefault, this);
-    this.initialize();
   },
   mounted() {
     this.loaded = true;
@@ -182,16 +181,6 @@ export default {
     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);
-      }
-    },
     changeExpandDefault() {
       this.isLegendExpanded = this.config.legend.model.expandByDefault;
       this.legend.set('expanded', this.isLegendExpanded);
diff --git a/src/plugins/plot/legend/PlotLegendItemCollapsed.vue b/src/plugins/plot/legend/PlotLegendItemCollapsed.vue
index e45dbe0ba4..9e659566b8 100644
--- a/src/plugins/plot/legend/PlotLegendItemCollapsed.vue
+++ b/src/plugins/plot/legend/PlotLegendItemCollapsed.vue
@@ -22,7 +22,7 @@
 <template>
   <div
     class="plot-legend-item"
-    :aria-label="`Plot Legend Item for ${domainObject?.name}`"
+    :aria-label="`Plot Legend Item for ${seriesName}`"
     :class="{
       'is-stale': isStale,
       'is-status--missing': isMissing
@@ -36,9 +36,8 @@
       @mouseover.ctrl="showToolTip"
       @mouseleave="hideToolTip"
     >
-      <span class="plot-series-color-swatch" :style="{ 'background-color': colorAsHexString }">
-      </span>
-      <span class="is-status__indicator" title="This item is missing or suspect"></span>
+      <span class="plot-series-color-swatch" :style="{ 'background-color': colorAsHexString }" />
+      <span class="is-status__indicator" title="This item is missing or suspect" />
       <span class="plot-series-name">{{ nameWithUnit }}</span>
     </div>
     <div
@@ -89,6 +88,7 @@ export default {
       isMissing: false,
       colorAsHexString: '',
       nameWithUnit: '',
+      seriesName: '',
       formattedYValue: '',
       formattedXValue: '',
       mctLimitStateClass: '',
@@ -206,6 +206,9 @@ export default {
       const seriesIndexToRemove = this.seriesModels.findIndex(
         (series) => series.keyString === seriesToRemove.keyString
       );
+      if (seriesIndexToRemove === -1) {
+        return;
+      }
       this.seriesModels.splice(seriesIndexToRemove, 1);
     },
     getSeries(keyStringToFind) {
@@ -220,6 +223,7 @@ export default {
 
       this.isMissing = seriesObject.domainObject.status === 'missing';
       this.colorAsHexString = seriesObject.get('color').asHexString();
+      this.seriesName = seriesObject.domainObject.name;
       this.nameWithUnit = seriesObject.nameWithUnit();
 
       const closest = seriesObject.closest;