From 39e6d9c90c6669fbf063e89f24f705a4ebdb15dc Mon Sep 17 00:00:00 2001
From: Shefali Joshi <simplyrender@gmail.com>
Date: Fri, 17 Jun 2022 07:20:18 -0700
Subject: [PATCH] Dont' mutate a stacked plot unless its user initiated (#5357)

---
 .../plot/inspector/PlotOptionsEdit.vue        | 25 ++++++---
 .../plot/inspector/forms/YAxisForm.vue        |  3 +-
 src/plugins/plot/stackedPlot/StackedPlot.vue  | 12 -----
 .../plot/stackedPlot/StackedPlotItem.vue      | 52 +++++++++++--------
 4 files changed, 49 insertions(+), 43 deletions(-)

diff --git a/src/plugins/plot/inspector/PlotOptionsEdit.vue b/src/plugins/plot/inspector/PlotOptionsEdit.vue
index 234e30332e..9151784d57 100644
--- a/src/plugins/plot/inspector/PlotOptionsEdit.vue
+++ b/src/plugins/plot/inspector/PlotOptionsEdit.vue
@@ -64,6 +64,7 @@ import YAxisForm from "./forms/YAxisForm.vue";
 import LegendForm from "./forms/LegendForm.vue";
 import eventHelpers from "../lib/eventHelpers";
 import configStore from "../configuration/ConfigStore";
+import _ from "lodash";
 
 export default {
     components: {
@@ -125,15 +126,25 @@ export default {
             });
             if (index < 0) {
                 index = stackedPlotObject.configuration.series.length;
+                const configPath = `configuration.series[${index}]`;
+                let newConfig = {
+                    identifier: config.identifier
+                };
+                _.set(newConfig, `${config.path}`, config.value);
+                this.openmct.objects.mutate(
+                    stackedPlotObject,
+                    configPath,
+                    newConfig
+                );
+            } else {
+                const configPath = `configuration.series[${index}].${config.path}`;
+                this.openmct.objects.mutate(
+                    stackedPlotObject,
+                    configPath,
+                    config.value
+                );
             }
 
-            const configPath = `configuration.series[${index}].${config.path}`;
-            this.openmct.objects.mutate(
-                stackedPlotObject,
-                configPath,
-                config.value
-            );
-
         }
     }
 };
diff --git a/src/plugins/plot/inspector/forms/YAxisForm.vue b/src/plugins/plot/inspector/forms/YAxisForm.vue
index c0dc5ec57a..d852e5b8ba 100644
--- a/src/plugins/plot/inspector/forms/YAxisForm.vue
+++ b/src/plugins/plot/inspector/forms/YAxisForm.vue
@@ -227,8 +227,9 @@ export default {
 
             const path = objectPath(formField.objectPath);
             if (!_.isEqual(newVal, oldVal)) {
-                // TODO: Why do we mutate yAxis twice, once directly, once via objects.mutate? Or are they different objects?
+                // We mutate the model for the plots first PlotConfigurationModel - this triggers changes that affects the plot behavior
                 this.yAxis.set(formKey, newVal);
+                // Then we mutate the domain object configuration to persist the settings
                 if (path) {
                     if (!this.domainObject.configuration || !this.domainObject.configuration.series) {
                         this.$emit('seriesUpdated', {
diff --git a/src/plugins/plot/stackedPlot/StackedPlot.vue b/src/plugins/plot/stackedPlot/StackedPlot.vue
index da207d1500..4827449207 100644
--- a/src/plugins/plot/stackedPlot/StackedPlot.vue
+++ b/src/plugins/plot/stackedPlot/StackedPlot.vue
@@ -167,18 +167,6 @@ export default {
             const id = this.openmct.objects.makeKeyString(child.identifier);
 
             this.$set(this.tickWidthMap, id, 0);
-            const persistedConfig = this.domainObject.configuration.series && this.domainObject.configuration.series.find((seriesConfig) => {
-                return this.openmct.objects.areIdsEqual(seriesConfig.identifier, child.identifier);
-            });
-            if (persistedConfig === undefined) {
-                this.openmct.objects.mutate(
-                    this.domainObject,
-                    'configuration.series[' + this.compositionObjects.length + ']',
-                    {
-                        identifier: child.identifier
-                    }
-                );
-            }
 
             this.compositionObjects.push(child);
         },
diff --git a/src/plugins/plot/stackedPlot/StackedPlotItem.vue b/src/plugins/plot/stackedPlot/StackedPlotItem.vue
index 50c17ca05f..a3b7f67e94 100644
--- a/src/plugins/plot/stackedPlot/StackedPlotItem.vue
+++ b/src/plugins/plot/stackedPlot/StackedPlotItem.vue
@@ -223,33 +223,39 @@ export default {
                 const configId = this.openmct.objects.makeKeyString(this.childObject.identifier);
                 let config = configStore.get(configId);
                 if (!config) {
-                    const persistedConfig = this.domainObject.configuration.series.find((seriesConfig) => {
+                    let persistedSeriesConfig = this.domainObject.configuration.series.find((seriesConfig) => {
                         return this.openmct.objects.areIdsEqual(seriesConfig.identifier, this.childObject.identifier);
                     });
-                    if (persistedConfig) {
-                        config = new PlotConfigurationModel({
-                            id: configId,
-                            domainObject: {
-                                ...this.childObject,
-                                configuration: {
-                                    series: [
-                                        {
-                                            identifier: this.childObject.identifier,
-                                            ...persistedConfig.series
-                                        }
-                                    ],
-                                    yAxis: persistedConfig.yAxis
 
-                                }
-                            },
-                            openmct: this.openmct,
-                            palette: this.colorPalette,
-                            callback: (data) => {
-                                this.data = data;
-                            }
-                        });
-                        configStore.add(configId, config);
+                    if (!persistedSeriesConfig) {
+                        persistedSeriesConfig = {
+                            series: {},
+                            yAxis: {}
+                        };
                     }
+
+                    config = new PlotConfigurationModel({
+                        id: configId,
+                        domainObject: {
+                            ...this.childObject,
+                            configuration: {
+                                series: [
+                                    {
+                                        identifier: this.childObject.identifier,
+                                        ...persistedSeriesConfig.series
+                                    }
+                                ],
+                                yAxis: persistedSeriesConfig.yAxis
+
+                            }
+                        },
+                        openmct: this.openmct,
+                        palette: this.colorPalette,
+                        callback: (data) => {
+                            this.data = data;
+                        }
+                    });
+                    configStore.add(configId, config);
                 }
 
                 return this.childObject;