5834 stacked plot removing objects from a stacked plot will not remove them from the legend (#6022)

* Add listeners to remove stacked plot series and make keys unique

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

src/plugins/plot/MctPlot.vue

@@ -353,10 +353,8 @@ export default {
         this.config = this.getConfig();
         this.legend = this.config.legend;
 
-        if (this.isNestedWithinAStackedPlot) {
+        const configId = this.openmct.objects.makeKeyString(this.domainObject.identifier);
-            const configId = this.openmct.objects.makeKeyString(this.domainObject.identifier);
+        this.$emit('configLoaded', configId);
-            this.$emit('configLoaded', configId);
-        }
 
         this.listenTo(this.config.series, 'add', this.addSeries, this);
         this.listenTo(this.config.series, 'remove', this.removeSeries, this);

src/plugins/plot/inspector/PlotOptions.vue

@@ -38,7 +38,7 @@ export default {
         PlotOptionsBrowse,
         PlotOptionsEdit
     },
-    inject: ['openmct', 'domainObject'],
+    inject: ['openmct', 'domainObject', 'path'],
     data() {
         return {
             isEditing: this.openmct.editor.isEditing()

src/plugins/plot/legend/PlotLegend.vue

@@ -50,7 +50,7 @@
             ></div>
             <plot-legend-item-collapsed
                 v-for="(seriesObject, seriesIndex) in series"
-                :key="`seriesObject.keyString-${seriesIndex}`"
+                :key="`${seriesObject.keyString}-${seriesIndex}`"
                 :highlights="highlights"
                 :value-to-show-when-collapsed="legend.get('valueToShowWhenCollapsed')"
                 :series-object="seriesObject"
@@ -96,7 +96,7 @@
                 <tbody>
                     <plot-legend-item-expanded
                         v-for="(seriesObject, seriesIndex) in series"
-                        :key="`seriesObject.keyString-${seriesIndex}`"
+                        :key="`${seriesObject.keyString}-${seriesIndex}-expanded`"
                         :series-object="seriesObject"
                         :highlights="highlights"
                         :legend="legend"

src/plugins/plot/stackedPlot/StackedPlot.vue

@@ -124,6 +124,7 @@ export default {
 
         const configId = this.openmct.objects.makeKeyString(this.domainObject.identifier);
         this.config = this.getConfig(configId);
+
         this.legend = this.config.legend;
 
         this.loaded = true;
@@ -142,6 +143,7 @@ export default {
                     id: configId,
                     domainObject: this.domainObject,
                     openmct: this.openmct,
+                    palette: this.colorPalette,
                     callback: (data) => {
                         this.data = data;
                     }
@@ -183,6 +185,10 @@ export default {
                 this.domainObject.configuration.series.splice(configIndex, 1);
             }
 
+            this.removeSeries({
+                keyString: id
+            });
+
             const childObj = this.compositionObjects.filter((c) => {
                 const identifier = this.openmct.objects.makeKeyString(c.identifier);
 
@@ -244,18 +250,29 @@ export default {
             this.highlights = data;
         },
         registerSeriesListeners(configId) {
-            this.seriesConfig[configId] = this.getConfig(configId);
+            const config = this.getConfig(configId);
-            this.listenTo(this.seriesConfig[configId].series, 'add', this.addSeries, this);
+            this.seriesConfig[configId] = config;
-            this.listenTo(this.seriesConfig[configId].series, 'remove', this.removeSeries, this);
+            const childObject = config.get('domainObject');
 
-            this.seriesConfig[configId].series.models.forEach(this.addSeries, this);
+            //TODO differentiate between objects with composition and those without
+            if (childObject.type === 'telemetry.plot.overlay') {
+                this.listenTo(config.series, 'add', this.addSeries, this);
+                this.listenTo(config.series, 'remove', this.removeSeries, this);
+            }
+
+            config.series.models.forEach(this.addSeries, this);
         },
         addSeries(series) {
-            const index = this.seriesModels.length;
+            const childObject = series.domainObject;
-            this.$set(this.seriesModels, index, series);
+            //don't add the series if it can have child series this will happen in registerSeriesListeners
+            if (childObject.type !== 'telemetry.plot.overlay') {
+                const index = this.seriesModels.length;
+                this.$set(this.seriesModels, index, series);
+            }
+
         },
         removeSeries(plotSeries) {
-            const index = this.seriesModels.findIndex(seriesModel => this.openmct.objects.areIdsEqual(seriesModel.identifier, plotSeries.identifier));
+            const index = this.seriesModels.findIndex(seriesModel => seriesModel.keyString === plotSeries.keyString);
             if (index > -1) {
                 this.$delete(this.seriesModels, index);
             }

src/plugins/plot/stackedPlot/StackedPlotItem.vue

@@ -133,6 +133,7 @@ export default {
 
             //If this object is not persistable, then package it with it's parent
             const object = this.getPlotObject();
+
             const getProps = this.getProps;
             const isMissing = openmct.objects.isMissing(object);
             let viewContainer = document.createElement('div');
@@ -160,7 +161,7 @@ export default {
                         onGridLinesChange,
                         setStatus,
                         isMissing,
-                        loading: true
+                        loading: false
                     };
                 },
                 methods: {