From ef3c2b10bf5f338281700bdcf715dac40617eec0 Mon Sep 17 00:00:00 2001
From: Shefali <simplyrender@gmail.com>
Date: Fri, 23 Jun 2023 14:06:06 -0700
Subject: [PATCH 1/6] New option to show/hide stacked plot aggregate legend -
 defaulted to not show. Use the Plot component in the StackedPlotItem
 component for simplicity and show/hide sub-legends as needed.

---
 src/plugins/plot/MctPlot.vue                  |   3 +-
 src/plugins/plot/Plot.vue                     |  72 +++++++-
 src/plugins/plot/chart/MctChart.vue           |   6 +-
 src/plugins/plot/configuration/LegendModel.js |   3 +-
 .../plot/inspector/PlotOptionsBrowse.vue      |   8 +
 .../plot/inspector/forms/LegendForm.vue       |  27 ++-
 .../plot/legend/PlotLegendItemCollapsed.vue   |  11 +-
 src/plugins/plot/stackedPlot/StackedPlot.vue  |  19 ++-
 .../plot/stackedPlot/StackedPlotItem.vue      | 160 ++++--------------
 9 files changed, 164 insertions(+), 145 deletions(-)

diff --git a/src/plugins/plot/MctPlot.vue b/src/plugins/plot/MctPlot.vue
index 899af22c72b..cb23e0c505d 100644
--- a/src/plugins/plot/MctPlot.vue
+++ b/src/plugins/plot/MctPlot.vue
@@ -77,6 +77,7 @@
             <mct-chart
               :rectangles="rectangles"
               :highlights="highlights"
+              :show-limit-line-labels="limitLineLabels"
               :annotated-points="annotatedPoints"
               :annotation-selections="annotationSelections"
               :hidden-y-axis-ids="hiddenYAxisIds"
@@ -231,7 +232,7 @@ export default {
     limitLineLabels: {
       type: Object,
       default() {
-        return {};
+        return undefined;
       }
     },
     colorPalette: {
diff --git a/src/plugins/plot/Plot.vue b/src/plugins/plot/Plot.vue
index 49605adec80..cd16c9ce6a3 100644
--- a/src/plugins/plot/Plot.vue
+++ b/src/plugins/plot/Plot.vue
@@ -33,18 +33,23 @@
       />
       <mct-plot
         :class="[plotLegendExpandedStateClass, plotLegendPositionClass]"
-        :init-grid-lines="gridLines"
+        :init-grid-lines="gridLinesProp"
         :init-cursor-guide="cursorGuide"
         :options="options"
-        :limit-line-labels="limitLineLabels"
+        :limit-line-labels="limitLineLabelsProp"
+        :parent-y-tick-width="parentYTickWidth"
+        :color-palette="colorPalette"
         @loadingUpdated="loadingUpdated"
         @statusUpdated="setStatus"
         @configLoaded="updateReady"
         @lockHighlightPoint="lockHighlightPointUpdated"
         @highlights="highlightsUpdated"
+        @plotYTickWidth="onYTickWidthChange"
+        @cursorGuide="onCursorGuideChange"
+        @gridLines="onGridLinesChange"
       >
         <plot-legend
-          v-if="configReady"
+          v-if="configReady && hideLegend === false"
           :cursor-locked="lockHighlightPoint"
           :highlights="highlights"
           @legendHoverChanged="legendHoverChanged"
@@ -79,14 +84,52 @@ export default {
           compact: false
         };
       }
+    },
+    gridLines: {
+      type: Boolean,
+      default() {
+        return true;
+      }
+    },
+    cursorGuide: {
+      type: Boolean,
+      default() {
+        return false;
+      }
+    },
+    parentLimitLineLabels: {
+      type: Object,
+      default() {
+        return undefined;
+      }
+    },
+    colorPalette: {
+      type: Object,
+      default() {
+        return undefined;
+      }
+    },
+    parentYTickWidth: {
+      type: Object,
+      default() {
+        return {
+          leftTickWidth: 0,
+          rightTickWidth: 0,
+          hasMultipleLeftAxes: false
+        };
+      }
+    },
+    hideLegend: {
+      type: Boolean,
+      default() {
+        return false;
+      }
     }
   },
   data() {
     return {
       //Don't think we need this as it appears to be stacked plot specific
       // hideExportButtons: false
-      cursorGuide: false,
-      gridLines: !this.options.compact,
       loading: false,
       status: '',
       staleObjects: [],
@@ -99,6 +142,12 @@ export default {
     };
   },
   computed: {
+    limitLineLabelsProp() {
+      return this.parentLimitLineLabels ?? this.limitLineLabels;
+    },
+    gridLinesProp() {
+      return this.gridLines ?? !this.options.compact;
+    },
     staleClass() {
       if (this.staleObjects.length !== 0) {
         return 'is-stale';
@@ -188,6 +237,7 @@ export default {
     },
     loadingUpdated(loading) {
       this.loading = loading;
+      this.$emit('loadingUpdated', ...arguments);
     },
     destroy() {
       if (this.stalenessSubscription) {
@@ -223,9 +273,11 @@ export default {
     },
     lockHighlightPointUpdated(data) {
       this.lockHighlightPoint = data;
+      this.$emit('lockHighlightPoint', ...arguments);
     },
     highlightsUpdated(data) {
       this.highlights = data;
+      this.$emit('highlights', ...arguments);
     },
     legendHoverChanged(data) {
       this.limitLineLabels = data;
@@ -238,6 +290,16 @@ export default {
     },
     updateReady(ready) {
       this.configReady = ready;
+      this.$emit('configLoaded', ...arguments);
+    },
+    onYTickWidthChange() {
+      this.$emit('plotYTickWidth', ...arguments);
+    },
+    onCursorGuideChange() {
+      this.$emit('cursorGuide', ...arguments);
+    },
+    onGridLinesChange() {
+      this.$emit('gridLines', ...arguments);
     }
   }
 };
diff --git a/src/plugins/plot/chart/MctChart.vue b/src/plugins/plot/chart/MctChart.vue
index a4bc9332fbf..9809a0d6bd5 100644
--- a/src/plugins/plot/chart/MctChart.vue
+++ b/src/plugins/plot/chart/MctChart.vue
@@ -114,7 +114,7 @@ export default {
     showLimitLineLabels: {
       type: Object,
       default() {
-        return {};
+        return undefined;
       }
     },
     hiddenYAxisIds: {
@@ -725,7 +725,9 @@ export default {
       });
     },
     showLabels(seriesKey) {
-      return this.showLimitLineLabels.seriesKey && this.showLimitLineLabels.seriesKey === seriesKey;
+      return (
+        this.showLimitLineLabels?.seriesKey && this.showLimitLineLabels.seriesKey === seriesKey
+      );
     },
     getLimitElement(limit) {
       let point = {
diff --git a/src/plugins/plot/configuration/LegendModel.js b/src/plugins/plot/configuration/LegendModel.js
index d8da5a500c2..149769439b9 100644
--- a/src/plugins/plot/configuration/LegendModel.js
+++ b/src/plugins/plot/configuration/LegendModel.js
@@ -55,7 +55,8 @@ export default class LegendModel extends Model {
       showValueWhenExpanded: true,
       showMaximumWhenExpanded: true,
       showMinimumWhenExpanded: true,
-      showUnitsWhenExpanded: true
+      showUnitsWhenExpanded: true,
+      showLegendsForChildren: true
     };
   }
 }
diff --git a/src/plugins/plot/inspector/PlotOptionsBrowse.vue b/src/plugins/plot/inspector/PlotOptionsBrowse.vue
index 2ef301e2569..f03b3854a8a 100644
--- a/src/plugins/plot/inspector/PlotOptionsBrowse.vue
+++ b/src/plugins/plot/inspector/PlotOptionsBrowse.vue
@@ -73,6 +73,12 @@
     <div v-if="isStackedPlotObject || !isNestedWithinAStackedPlot" class="grid-properties">
       <ul class="l-inspector-part js-legend-properties">
         <h2 class="--first" title="Legend settings for this object">Legend</h2>
+        <li v-if="isStackedPlotObject" class="grid-row">
+          <div class="grid-cell label" title="Display legends per sub plot.">
+            Show legend per plot
+          </div>
+          <div class="grid-cell value">{{ showLegendsForChildren ? 'Yes' : 'No' }}</div>
+        </li>
         <li class="grid-row">
           <div
             class="grid-cell label"
@@ -139,6 +145,7 @@ export default {
       showMinimumWhenExpanded: '',
       showMaximumWhenExpanded: '',
       showUnitsWhenExpanded: '',
+      showLegendsForChildren: '',
       loaded: false,
       plotSeries: [],
       yAxes: []
@@ -218,6 +225,7 @@ export default {
         this.showMinimumWhenExpanded = this.config.legend.get('showMinimumWhenExpanded');
         this.showMaximumWhenExpanded = this.config.legend.get('showMaximumWhenExpanded');
         this.showUnitsWhenExpanded = this.config.legend.get('showUnitsWhenExpanded');
+        this.showLegendsForChildren = this.config.legend.get('showLegendsForChildren');
       }
     },
     getConfig() {
diff --git a/src/plugins/plot/inspector/forms/LegendForm.vue b/src/plugins/plot/inspector/forms/LegendForm.vue
index 5c72b1a382e..d30a5018320 100644
--- a/src/plugins/plot/inspector/forms/LegendForm.vue
+++ b/src/plugins/plot/inspector/forms/LegendForm.vue
@@ -21,6 +21,16 @@
 -->
 <template>
   <div>
+    <li v-if="isStackedPlotObject" class="grid-row">
+      <div class="grid-cell label" title="Display legends per sub plot.">Show legend per plot</div>
+      <div class="grid-cell value">
+        <input
+          v-model="showLegendsForChildren"
+          type="checkbox"
+          @change="updateForm('showLegendsForChildren')"
+        />
+      </div>
+    </li>
     <li class="grid-row">
       <div
         class="grid-cell label"
@@ -128,7 +138,7 @@ import { coerce, objectPath, validate } from './formUtil';
 import _ from 'lodash';
 
 export default {
-  inject: ['openmct', 'domainObject'],
+  inject: ['openmct', 'domainObject', 'path'],
   props: {
     legend: {
       type: Object,
@@ -148,9 +158,18 @@ export default {
       showMinimumWhenExpanded: '',
       showMaximumWhenExpanded: '',
       showUnitsWhenExpanded: '',
+      showLegendsForChildren: '',
       validation: {}
     };
   },
+  computed: {
+    isStackedPlotObject() {
+      return this.path.find(
+        (pathObject, pathObjIndex) =>
+          pathObjIndex === 0 && pathObject?.type === 'telemetry.plot.stacked'
+      );
+    }
+  },
   mounted() {
     this.initialize();
     this.initFormValues();
@@ -200,6 +219,11 @@ export default {
           modelProp: 'showUnitsWhenExpanded',
           coerce: Boolean,
           objectPath: 'configuration.legend.showUnitsWhenExpanded'
+        },
+        {
+          modelProp: 'showLegendsForChildren',
+          coerce: Boolean,
+          objectPath: 'configuration.legend.showLegendsForChildren'
         }
       ];
     },
@@ -213,6 +237,7 @@ export default {
       this.showMinimumWhenExpanded = this.legend.get('showMinimumWhenExpanded');
       this.showMaximumWhenExpanded = this.legend.get('showMaximumWhenExpanded');
       this.showUnitsWhenExpanded = this.legend.get('showUnitsWhenExpanded');
+      this.showLegendsForChildren = this.legend.get('showLegendsForChildren');
     },
     updateForm(formKey) {
       const newVal = this[formKey];
diff --git a/src/plugins/plot/legend/PlotLegendItemCollapsed.vue b/src/plugins/plot/legend/PlotLegendItemCollapsed.vue
index f87c24976b7..26072b81951 100644
--- a/src/plugins/plot/legend/PlotLegendItemCollapsed.vue
+++ b/src/plugins/plot/legend/PlotLegendItemCollapsed.vue
@@ -181,9 +181,14 @@ export default {
     },
     toggleHover(hover) {
       this.hover = hover;
-      this.$emit('legendHoverChanged', {
-        seriesKey: this.hover ? this.seriesObject.keyString : ''
-      });
+      this.$emit(
+        'legendHoverChanged',
+        this.hover
+          ? {
+              seriesKey: this.seriesObject.keyString
+            }
+          : undefined
+      );
     }
   }
 };
diff --git a/src/plugins/plot/stackedPlot/StackedPlot.vue b/src/plugins/plot/stackedPlot/StackedPlot.vue
index c57cfa91eb8..78c80eef7bc 100644
--- a/src/plugins/plot/stackedPlot/StackedPlot.vue
+++ b/src/plugins/plot/stackedPlot/StackedPlot.vue
@@ -27,7 +27,7 @@
     :class="[plotLegendExpandedStateClass, plotLegendPositionClass]"
   >
     <plot-legend
-      v-if="compositionObjectsConfigLoaded"
+      v-if="compositionObjectsConfigLoaded && showLegendsForChildren === false"
       :cursor-locked="!!lockHighlightPoint"
       :highlights="highlights"
       @legendHoverChanged="legendHoverChanged"
@@ -46,6 +46,7 @@
         :cursor-guide="cursorGuide"
         :show-limit-line-labels="showLimitLineLabels"
         :parent-y-tick-width="maxTickWidth"
+        :hide-legend="showLegendsForChildren === false"
         @plotYTickWidth="onYTickWidthChange"
         @loadingUpdated="loadingUpdated"
         @cursorGuide="onCursorGuideChange"
@@ -66,6 +67,7 @@ import ColorPalette from '@/ui/color/ColorPalette';
 import PlotLegend from '../legend/PlotLegend.vue';
 import StackedPlotItem from './StackedPlotItem.vue';
 import ImageExporter from '../../../exporters/ImageExporter';
+import eventHelpers from '../lib/eventHelpers';
 
 export default {
   components: {
@@ -96,6 +98,7 @@ export default {
       colorPalette: new ColorPalette(),
       compositionObjectsConfigLoaded: false,
       position: 'top',
+      showLegendsForChildren: true,
       expanded: false
     };
   },
@@ -137,6 +140,7 @@ export default {
     this.destroy();
   },
   mounted() {
+    eventHelpers.extend(this);
     //We only need to initialize the stacked plot config for legend properties
     const configId = this.openmct.objects.makeKeyString(this.domainObject.identifier);
     this.config = this.getConfig(configId);
@@ -183,11 +187,21 @@ export default {
 
           return this.configLoaded[id] === true;
         });
+      if (this.compositionObjectsConfigLoaded) {
+        this.listenTo(
+          this.config.legend,
+          'change:showLegendsForChildren',
+          this.updateShowLegendsForChildren,
+          this
+        );
+      }
     },
     destroy() {
       this.composition.off('add', this.addChild);
       this.composition.off('remove', this.removeChild);
       this.composition.off('reorder', this.compositionReorder);
+
+      this.stopListening();
     },
 
     addChild(child) {
@@ -305,6 +319,9 @@ export default {
     updatePosition(position) {
       this.position = position;
     },
+    updateShowLegendsForChildren(showLegendsForChildren) {
+      this.showLegendsForChildren = showLegendsForChildren;
+    },
     updateReady(ready) {
       this.configReady = ready;
     },
diff --git a/src/plugins/plot/stackedPlot/StackedPlotItem.vue b/src/plugins/plot/stackedPlot/StackedPlotItem.vue
index 19c6bca6ff5..a160fc1e928 100644
--- a/src/plugins/plot/stackedPlot/StackedPlotItem.vue
+++ b/src/plugins/plot/stackedPlot/StackedPlotItem.vue
@@ -23,17 +23,14 @@
   <div :aria-label="`Stacked Plot Item ${childObject.name}`"></div>
 </template>
 <script>
-import MctPlot from '../MctPlot.vue';
 import Vue from 'vue';
 import conditionalStylesMixin from './mixins/objectStyles-mixin';
-import stalenessMixin from '@/ui/mixins/staleness-mixin';
-import StalenessUtils from '@/utils/staleness';
 import configStore from '@/plugins/plot/configuration/ConfigStore';
 import PlotConfigurationModel from '@/plugins/plot/configuration/PlotConfigurationModel';
-import ProgressBar from '../../../ui/components/ProgressBar.vue';
+import Plot from '../Plot.vue';
 
 export default {
-  mixins: [conditionalStylesMixin, stalenessMixin],
+  mixins: [conditionalStylesMixin],
   inject: ['openmct', 'domainObject', 'path'],
   props: {
     childObject: {
@@ -63,7 +60,7 @@ export default {
     showLimitLineLabels: {
       type: Object,
       default() {
-        return {};
+        return undefined;
       }
     },
     colorPalette: {
@@ -81,13 +78,14 @@ export default {
           hasMultipleLeftAxes: false
         };
       }
+    },
+    hideLegend: {
+      type: Boolean,
+      default() {
+        return false;
+      }
     }
   },
-  data() {
-    return {
-      staleObjects: []
-    };
-  },
   watch: {
     gridLines(newGridLines) {
       this.updateComponentProp('gridLines', newGridLines);
@@ -104,13 +102,11 @@ export default {
       },
       deep: true
     },
-    staleObjects() {
-      this.isStale = this.staleObjects.length > 0;
-      this.updateComponentProp('isStale', this.isStale);
+    hideLegend(newHideLegend) {
+      this.updateComponentProp('hideLegend', newHideLegend);
     }
   },
   mounted() {
-    this.stalenessSubscription = {};
     this.updateView();
     this.isEditing = this.openmct.editor.isEditing();
     this.openmct.editor.on('isEditing', this.setEditState);
@@ -125,8 +121,6 @@ export default {
     if (this.component) {
       this.component.$destroy();
     }
-
-    this.destroyStalenessListeners();
   },
   methods: {
     setEditState(isEditing) {
@@ -147,10 +141,6 @@ export default {
       }
     },
     updateView() {
-      this.isStale = false;
-
-      this.destroyStalenessListeners();
-
       if (this.component) {
         this.component.$destroy();
         this.component = null;
@@ -163,7 +153,6 @@ export default {
       const onConfigLoaded = this.onConfigLoaded;
       const onCursorGuideChange = this.onCursorGuideChange;
       const onGridLinesChange = this.onGridLinesChange;
-      const setStatus = this.setStatus;
 
       const openmct = this.openmct;
       const path = this.path;
@@ -175,25 +164,10 @@ export default {
       const isMissing = openmct.objects.isMissing(object);
       let viewContainer = document.createElement('div');
       this.$el.append(viewContainer);
-
-      if (this.openmct.telemetry.isTelemetryObject(object)) {
-        this.subscribeToStaleness(object, (isStale) => {
-          this.updateComponentProp('isStale', isStale);
-        });
-      } else {
-        // possibly overlay or other composition based plot
-        this.composition = this.openmct.composition.get(object);
-
-        this.composition.on('add', this.watchStaleness);
-        this.composition.on('remove', this.unwatchStaleness);
-        this.composition.load();
-      }
-
       this.component = new Vue({
         el: viewContainer,
         components: {
-          MctPlot,
-          ProgressBar
+          Plot
         },
         provide: {
           openmct,
@@ -209,7 +183,6 @@ export default {
             onConfigLoaded,
             onCursorGuideChange,
             onGridLinesChange,
-            setStatus,
             isMissing,
             loading: false
           };
@@ -220,83 +193,27 @@ export default {
           }
         },
         template: `
-                  <div v-if="!isMissing" ref="plotWrapper"
-                      class="l-view-section u-style-receiver js-style-receiver"
-                      :class="{'s-status-timeconductor-unsynced': status && status === 'timeconductor-unsynced', 'is-stale': isStale}">
-                      <progress-bar
-                          v-show="loading !== false"
-                          class="c-telemetry-table__progress-bar"
-                          :model="{progressPerc: undefined}" />
-                      <mct-plot
-                          :init-grid-lines="gridLines"
-                          :init-cursor-guide="cursorGuide"
-                          :parent-y-tick-width="parentYTickWidth"
-                          :limit-line-labels="limitLineLabels"
-                          :color-palette="colorPalette"
-                          :options="options"
-                          @plotYTickWidth="onYTickWidthChange"
-                          @lockHighlightPoint="onLockHighlightPointUpdated"
-                          @highlights="onHighlightsUpdated"
-                          @configLoaded="onConfigLoaded"
-                          @cursorGuide="onCursorGuideChange"
-                          @gridLines="onGridLinesChange"
-                          @statusUpdated="setStatus"
-                          @loadingUpdated="loadingUpdated"/>
-                  </div>`
+                  <Plot ref="plotComponent" v-if="!isMissing"
+                      :init-grid-lines="gridLines"
+                      :hide-legend="hideLegend"
+                      :init-cursor-guide="cursorGuide"
+                      :parent-limit-line-labels="limitLineLabels"
+                      :options="options"
+                      :parent-y-tick-width="parentYTickWidth"
+                      :color-palette="colorPalette"
+                      @loadingUpdated="loadingUpdated"
+                      @configLoaded="onConfigLoaded"
+                      @lockHighlightPoint="onLockHighlightPointUpdated"
+                      @highlights="onHighlightsUpdated"
+                      @plotYTickWidth="onYTickWidthChange"
+                      @cursorGuide="onCursorGuideChange"
+                      @gridLines="onGridLinesChange"/>`
       });
 
       if (this.isEditing) {
         this.setSelection();
       }
     },
-    watchStaleness(domainObject) {
-      const keyString = this.openmct.objects.makeKeyString(domainObject.identifier);
-      this.stalenessSubscription[keyString] = {};
-      this.stalenessSubscription[keyString].stalenessUtils = new StalenessUtils(
-        this.openmct,
-        domainObject
-      );
-
-      this.openmct.telemetry.isStale(domainObject).then((stalenessResponse) => {
-        if (stalenessResponse !== undefined) {
-          this.handleStaleness(keyString, stalenessResponse);
-        }
-      });
-      const stalenessSubscription = this.openmct.telemetry.subscribeToStaleness(
-        domainObject,
-        (stalenessResponse) => {
-          this.handleStaleness(keyString, stalenessResponse);
-        }
-      );
-
-      this.stalenessSubscription[keyString].unsubscribe = stalenessSubscription;
-    },
-    unwatchStaleness(domainObject) {
-      const SKIP_CHECK = true;
-      const keyString = this.openmct.objects.makeKeyString(domainObject.identifier);
-
-      this.stalenessSubscription[keyString].unsubscribe();
-      this.stalenessSubscription[keyString].stalenessUtils.destroy();
-      this.handleStaleness(keyString, { isStale: false }, SKIP_CHECK);
-
-      delete this.stalenessSubscription[keyString];
-    },
-    handleStaleness(keyString, stalenessResponse, skipCheck = false) {
-      if (
-        skipCheck ||
-        this.stalenessSubscription[keyString].stalenessUtils.shouldUpdateStaleness(
-          stalenessResponse
-        )
-      ) {
-        const index = this.staleObjects.indexOf(keyString);
-        const foundStaleObject = index > -1;
-        if (stalenessResponse.isStale && !foundStaleObject) {
-          this.staleObjects.push(keyString);
-        } else if (!stalenessResponse.isStale && foundStaleObject) {
-          this.staleObjects.splice(index, 1);
-        }
-      }
-    },
     onLockHighlightPointUpdated() {
       this.$emit('lockHighlightPoint', ...arguments);
     },
@@ -315,10 +232,6 @@ export default {
     onGridLinesChange() {
       this.$emit('gridLines', ...arguments);
     },
-    setStatus(status) {
-      this.status = status;
-      this.updateComponentProp('status', status);
-    },
     setSelection() {
       let childContext = {};
       childContext.item = this.childObject;
@@ -331,14 +244,13 @@ export default {
     },
     getProps() {
       return {
+        hideLegend: this.hideLegend,
         limitLineLabels: this.showLimitLineLabels,
         gridLines: this.gridLines,
         cursorGuide: this.cursorGuide,
         parentYTickWidth: this.parentYTickWidth,
         options: this.options,
-        status: this.status,
-        colorPalette: this.colorPalette,
-        isStale: this.isStale
+        colorPalette: this.colorPalette
       };
     },
     getPlotObject() {
@@ -398,20 +310,6 @@ export default {
 
         return this.childObject;
       }
-    },
-    destroyStalenessListeners() {
-      this.triggerUnsubscribeFromStaleness();
-
-      if (this.composition) {
-        this.composition.off('add', this.watchStaleness);
-        this.composition.off('remove', this.unwatchStaleness);
-        this.composition = null;
-      }
-
-      Object.values(this.stalenessSubscription).forEach((stalenessSubscription) => {
-        stalenessSubscription.unsubscribe();
-        stalenessSubscription.stalenessUtils.destroy();
-      });
     }
   }
 };

From c60990fc468c5d607747cf736cc33146e7e1d538 Mon Sep 17 00:00:00 2001
From: Shefali <simplyrender@gmail.com>
Date: Tue, 27 Jun 2023 07:47:25 -0700
Subject: [PATCH 2/6] Fix position and expanded classes when children are
 showing their legends

---
 src/plugins/plot/stackedPlot/StackedPlot.vue | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/plugins/plot/stackedPlot/StackedPlot.vue b/src/plugins/plot/stackedPlot/StackedPlot.vue
index 78c80eef7bc..05a51549447 100644
--- a/src/plugins/plot/stackedPlot/StackedPlot.vue
+++ b/src/plugins/plot/stackedPlot/StackedPlot.vue
@@ -104,14 +104,22 @@ export default {
   },
   computed: {
     plotLegendPositionClass() {
+      if (this.showLegendsForChildren) {
+        return '';
+      }
+
       return `plot-legend-${this.position}`;
     },
     plotLegendExpandedStateClass() {
-      if (this.expanded) {
-        return 'plot-legend-expanded';
-      } else {
-        return 'plot-legend-collapsed';
+      let legendExpandedStateClass = '';
+
+      if (this.showLegendsForChildren !== true && this.expanded) {
+        legendExpandedStateClass = 'plot-legend-expanded';
+      } else if (this.showLegendsForChildren !== true && !this.expanded) {
+        legendExpandedStateClass = 'plot-legend-collapsed';
       }
+
+      return legendExpandedStateClass;
     },
     /**
      * Returns the maximum width of the left and right y axes ticks of this stacked plots children

From 13206fa9b835ab6f8bbe49ddb9d6852a50310d6f Mon Sep 17 00:00:00 2001
From: Shefali <simplyrender@gmail.com>
Date: Wed, 28 Jun 2023 18:19:13 -0700
Subject: [PATCH 3/6] Fix broken tests and ensure gridlines and cursorguides
 work.

---
 src/plugins/plot/Plot.vue                        |  8 ++++++++
 src/plugins/plot/stackedPlot/StackedPlotItem.vue |  4 ++--
 src/plugins/plot/stackedPlot/pluginSpec.js       | 15 ++++++++-------
 3 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/plugins/plot/Plot.vue b/src/plugins/plot/Plot.vue
index cd16c9ce6a3..824200e608d 100644
--- a/src/plugins/plot/Plot.vue
+++ b/src/plugins/plot/Plot.vue
@@ -166,6 +166,14 @@ export default {
       }
     }
   },
+  watch: {
+    gridLines(newGridLines) {
+      this.gridLines = newGridLines;
+    },
+    cursorGuide(newCursorGuide) {
+      this.cursorGuide = newCursorGuide;
+    }
+  },
   mounted() {
     eventHelpers.extend(this);
     this.imageExporter = new ImageExporter(this.openmct);
diff --git a/src/plugins/plot/stackedPlot/StackedPlotItem.vue b/src/plugins/plot/stackedPlot/StackedPlotItem.vue
index a160fc1e928..7f26dc20914 100644
--- a/src/plugins/plot/stackedPlot/StackedPlotItem.vue
+++ b/src/plugins/plot/stackedPlot/StackedPlotItem.vue
@@ -194,9 +194,9 @@ export default {
         },
         template: `
                   <Plot ref="plotComponent" v-if="!isMissing"
-                      :init-grid-lines="gridLines"
+                      :grid-lines="gridLines"
                       :hide-legend="hideLegend"
-                      :init-cursor-guide="cursorGuide"
+                      :cursor-guide="cursorGuide"
                       :parent-limit-line-labels="limitLineLabels"
                       :options="options"
                       :parent-y-tick-width="parentYTickWidth"
diff --git a/src/plugins/plot/stackedPlot/pluginSpec.js b/src/plugins/plot/stackedPlot/pluginSpec.js
index d6e5da4a69d..7689508783e 100644
--- a/src/plugins/plot/stackedPlot/pluginSpec.js
+++ b/src/plugins/plot/stackedPlot/pluginSpec.js
@@ -490,12 +490,12 @@ describe('the plugin', function () {
         max: 10
       });
       Vue.nextTick(() => {
-        expect(plotViewComponentObject.$children[0].component.$children[1].xScale.domain()).toEqual(
-          {
-            min: 0,
-            max: 10
-          }
-        );
+        expect(
+          plotViewComponentObject.$children[0].component.$children[0].$children[1].xScale.domain()
+        ).toEqual({
+          min: 0,
+          max: 10
+        });
         done();
       });
     });
@@ -509,7 +509,8 @@ describe('the plugin', function () {
         });
       });
       Vue.nextTick(() => {
-        const yAxesScales = plotViewComponentObject.$children[0].component.$children[1].yScale;
+        const yAxesScales =
+          plotViewComponentObject.$children[0].component.$children[0].$children[1].yScale;
         yAxesScales.forEach((yAxisScale) => {
           expect(yAxisScale.scale.domain()).toEqual({
             min: 10,

From 37e69d24f07d121e567894d5c70093d46b7b0d8d Mon Sep 17 00:00:00 2001
From: Shefali <simplyrender@gmail.com>
Date: Thu, 29 Jun 2023 07:30:47 -0700
Subject: [PATCH 4/6] Adds e2e test for new legend configuration for stacked
 plot

---
 .../plugins/plot/stackedPlot.e2e.spec.js      | 47 ++++++++++++++++++-
 .../plot/inspector/PlotOptionsEdit.vue        |  6 ++-
 src/plugins/plot/stackedPlot/StackedPlot.vue  |  2 +
 3 files changed, 53 insertions(+), 2 deletions(-)

diff --git a/e2e/tests/functional/plugins/plot/stackedPlot.e2e.spec.js b/e2e/tests/functional/plugins/plot/stackedPlot.e2e.spec.js
index c2e46566d4d..8d83e62c39c 100644
--- a/e2e/tests/functional/plugins/plot/stackedPlot.e2e.spec.js
+++ b/e2e/tests/functional/plugins/plot/stackedPlot.e2e.spec.js
@@ -26,7 +26,11 @@ necessarily be used for reference when writing new tests in this area.
 */
 
 const { test, expect } = require('../../../../pluginFixtures');
-const { createDomainObjectWithDefaults, selectInspectorTab } = require('../../../../appActions');
+const {
+  createDomainObjectWithDefaults,
+  selectInspectorTab,
+  waitForPlotsToRender
+} = require('../../../../appActions');
 
 test.describe('Stacked Plot', () => {
   let stackedPlot;
@@ -227,4 +231,45 @@ test.describe('Stacked Plot', () => {
       page.locator('[aria-label="Plot Series Properties"] .c-object-label')
     ).toContainText(swgC.name);
   });
+
+  test('the legend toggles between aggregate and per child', async ({ page }) => {
+    await page.goto(stackedPlot.url);
+
+    // Go into edit mode
+    await page.click('button[title="Edit"]');
+
+    await selectInspectorTab(page, 'Config');
+
+    let legendProperties = await page.locator('[aria-label="Legend Properties"]');
+    await legendProperties.locator('[title="Display legends per sub plot."]~div input').uncheck();
+
+    await assertAggregateLegendIsVisible(page);
+
+    // Save (exit edit mode)
+    await page.locator('button[title="Save"]').click();
+    await page.locator('li[title="Save and Finish Editing"]').click();
+
+    await assertAggregateLegendIsVisible(page);
+
+    await page.reload();
+
+    await assertAggregateLegendIsVisible(page);
+  });
 });
+
+/**
+ * Asserts that aggregate stacked plot legend is visible
+ * @param {import('@playwright/test').Page} page
+ */
+async function assertAggregateLegendIsVisible(page) {
+  // Wait for plot series data to load
+  await waitForPlotsToRender(page);
+  // Wait for plot legend to be shown
+  await page.waitForSelector('.js-stacked-plot-legend', { state: 'attached' });
+  // There should be 3 legend items
+  expect(
+    await page
+      .locator('.js-stacked-plot-legend .c-plot-legend__wrapper div.plot-legend-item')
+      .count()
+  ).toBe(3);
+}
diff --git a/src/plugins/plot/inspector/PlotOptionsEdit.vue b/src/plugins/plot/inspector/PlotOptionsEdit.vue
index 83d16391ba2..7cd875a00c2 100644
--- a/src/plugins/plot/inspector/PlotOptionsEdit.vue
+++ b/src/plugins/plot/inspector/PlotOptionsEdit.vue
@@ -35,7 +35,11 @@
       :y-axis="config.yAxis"
       @seriesUpdated="updateSeriesConfigForObject"
     />
-    <ul v-if="isStackedPlotObject || !isStackedPlotNestedObject" class="l-inspector-part">
+    <ul
+      v-if="isStackedPlotObject || !isStackedPlotNestedObject"
+      class="l-inspector-part"
+      aria-label="Legend Properties"
+    >
       <h2 class="--first" title="Legend options">Legend</h2>
       <legend-form class="grid-properties" :legend="config.legend" />
     </ul>
diff --git a/src/plugins/plot/stackedPlot/StackedPlot.vue b/src/plugins/plot/stackedPlot/StackedPlot.vue
index 05a51549447..3a98098e52b 100644
--- a/src/plugins/plot/stackedPlot/StackedPlot.vue
+++ b/src/plugins/plot/stackedPlot/StackedPlot.vue
@@ -30,6 +30,7 @@
       v-if="compositionObjectsConfigLoaded && showLegendsForChildren === false"
       :cursor-locked="!!lockHighlightPoint"
       :highlights="highlights"
+      class="js-stacked-plot-legend"
       @legendHoverChanged="legendHoverChanged"
       @expanded="updateExpanded"
       @position="updatePosition"
@@ -152,6 +153,7 @@ export default {
     //We only need to initialize the stacked plot config for legend properties
     const configId = this.openmct.objects.makeKeyString(this.domainObject.identifier);
     this.config = this.getConfig(configId);
+    this.showLegendsForChildren = this.config.legend.get('showLegendsForChildren');
 
     this.loaded = true;
     this.imageExporter = new ImageExporter(this.openmct);

From 85371afeb28591a80db2d1fb410a32a0bec864e0 Mon Sep 17 00:00:00 2001
From: Shefali <simplyrender@gmail.com>
Date: Fri, 7 Jul 2023 11:57:02 -0700
Subject: [PATCH 5/6] Address review comments - Remove commented out code,
 optimize property lookup, fix bug with staleness

---
 src/plugins/plot/Plot.vue                     |   2 -
 src/plugins/plot/chart/MctChart.vue           |   4 +-
 .../plot/stackedPlot/StackedPlotItem.vue      | 100 +++++++++++++++++-
 3 files changed, 99 insertions(+), 7 deletions(-)

diff --git a/src/plugins/plot/Plot.vue b/src/plugins/plot/Plot.vue
index 824200e608d..11621b3a36b 100644
--- a/src/plugins/plot/Plot.vue
+++ b/src/plugins/plot/Plot.vue
@@ -128,8 +128,6 @@ export default {
   },
   data() {
     return {
-      //Don't think we need this as it appears to be stacked plot specific
-      // hideExportButtons: false
       loading: false,
       status: '',
       staleObjects: [],
diff --git a/src/plugins/plot/chart/MctChart.vue b/src/plugins/plot/chart/MctChart.vue
index 9809a0d6bd5..cb60d4fa22d 100644
--- a/src/plugins/plot/chart/MctChart.vue
+++ b/src/plugins/plot/chart/MctChart.vue
@@ -725,9 +725,7 @@ export default {
       });
     },
     showLabels(seriesKey) {
-      return (
-        this.showLimitLineLabels?.seriesKey && this.showLimitLineLabels.seriesKey === seriesKey
-      );
+      return this.showLimitLineLabels?.seriesKey === seriesKey;
     },
     getLimitElement(limit) {
       let point = {
diff --git a/src/plugins/plot/stackedPlot/StackedPlotItem.vue b/src/plugins/plot/stackedPlot/StackedPlotItem.vue
index 7f26dc20914..842859d5060 100644
--- a/src/plugins/plot/stackedPlot/StackedPlotItem.vue
+++ b/src/plugins/plot/stackedPlot/StackedPlotItem.vue
@@ -25,12 +25,14 @@
 <script>
 import Vue from 'vue';
 import conditionalStylesMixin from './mixins/objectStyles-mixin';
+import stalenessMixin from '@/ui/mixins/staleness-mixin';
+import StalenessUtils from '@/utils/staleness';
 import configStore from '@/plugins/plot/configuration/ConfigStore';
 import PlotConfigurationModel from '@/plugins/plot/configuration/PlotConfigurationModel';
 import Plot from '../Plot.vue';
 
 export default {
-  mixins: [conditionalStylesMixin],
+  mixins: [conditionalStylesMixin, stalenessMixin],
   inject: ['openmct', 'domainObject', 'path'],
   props: {
     childObject: {
@@ -86,6 +88,11 @@ export default {
       }
     }
   },
+  data() {
+    return {
+      staleObjects: []
+    };
+  },
   watch: {
     gridLines(newGridLines) {
       this.updateComponentProp('gridLines', newGridLines);
@@ -104,9 +111,14 @@ export default {
     },
     hideLegend(newHideLegend) {
       this.updateComponentProp('hideLegend', newHideLegend);
+    },
+    staleObjects() {
+      this.isStale = this.staleObjects.length > 0;
+      this.updateComponentProp('isStale', this.isStale);
     }
   },
   mounted() {
+    this.stalenessSubscription = {};
     this.updateView();
     this.isEditing = this.openmct.editor.isEditing();
     this.openmct.editor.on('isEditing', this.setEditState);
@@ -121,6 +133,8 @@ export default {
     if (this.component) {
       this.component.$destroy();
     }
+
+    this.destroyStalenessListeners();
   },
   methods: {
     setEditState(isEditing) {
@@ -141,6 +155,10 @@ export default {
       }
     },
     updateView() {
+      this.isStale = false;
+
+      this.destroyStalenessListeners();
+
       if (this.component) {
         this.component.$destroy();
         this.component = null;
@@ -164,6 +182,20 @@ export default {
       const isMissing = openmct.objects.isMissing(object);
       let viewContainer = document.createElement('div');
       this.$el.append(viewContainer);
+
+      if (this.openmct.telemetry.isTelemetryObject(object)) {
+        this.subscribeToStaleness(object, (isStale) => {
+          this.updateComponentProp('isStale', isStale);
+        });
+      } else {
+        // possibly overlay or other composition based plot
+        this.composition = this.openmct.composition.get(object);
+
+        this.composition.on('add', this.watchStaleness);
+        this.composition.on('remove', this.unwatchStaleness);
+        this.composition.load();
+      }
+
       this.component = new Vue({
         el: viewContainer,
         components: {
@@ -194,6 +226,7 @@ export default {
         },
         template: `
                   <Plot ref="plotComponent" v-if="!isMissing"
+                      :class="{'is-stale': isStale}"
                       :grid-lines="gridLines"
                       :hide-legend="hideLegend"
                       :cursor-guide="cursorGuide"
@@ -214,6 +247,54 @@ export default {
         this.setSelection();
       }
     },
+    watchStaleness(domainObject) {
+      const keyString = this.openmct.objects.makeKeyString(domainObject.identifier);
+      this.stalenessSubscription[keyString] = {};
+      this.stalenessSubscription[keyString].stalenessUtils = new StalenessUtils(
+        this.openmct,
+        domainObject
+      );
+
+      this.openmct.telemetry.isStale(domainObject).then((stalenessResponse) => {
+        if (stalenessResponse !== undefined) {
+          this.handleStaleness(keyString, stalenessResponse);
+        }
+      });
+      const stalenessSubscription = this.openmct.telemetry.subscribeToStaleness(
+        domainObject,
+        (stalenessResponse) => {
+          this.handleStaleness(keyString, stalenessResponse);
+        }
+      );
+
+      this.stalenessSubscription[keyString].unsubscribe = stalenessSubscription;
+    },
+    unwatchStaleness(domainObject) {
+      const SKIP_CHECK = true;
+      const keyString = this.openmct.objects.makeKeyString(domainObject.identifier);
+
+      this.stalenessSubscription[keyString].unsubscribe();
+      this.stalenessSubscription[keyString].stalenessUtils.destroy();
+      this.handleStaleness(keyString, { isStale: false }, SKIP_CHECK);
+
+      delete this.stalenessSubscription[keyString];
+    },
+    handleStaleness(keyString, stalenessResponse, skipCheck = false) {
+      if (
+        skipCheck ||
+        this.stalenessSubscription[keyString].stalenessUtils.shouldUpdateStaleness(
+          stalenessResponse
+        )
+      ) {
+        const index = this.staleObjects.indexOf(keyString);
+        const foundStaleObject = index > -1;
+        if (stalenessResponse.isStale && !foundStaleObject) {
+          this.staleObjects.push(keyString);
+        } else if (!stalenessResponse.isStale && foundStaleObject) {
+          this.staleObjects.splice(index, 1);
+        }
+      }
+    },
     onLockHighlightPointUpdated() {
       this.$emit('lockHighlightPoint', ...arguments);
     },
@@ -250,7 +331,8 @@ export default {
         cursorGuide: this.cursorGuide,
         parentYTickWidth: this.parentYTickWidth,
         options: this.options,
-        colorPalette: this.colorPalette
+        colorPalette: this.colorPalette,
+        isStale: this.isStale
       };
     },
     getPlotObject() {
@@ -310,6 +392,20 @@ export default {
 
         return this.childObject;
       }
+    },
+    destroyStalenessListeners() {
+      this.triggerUnsubscribeFromStaleness();
+
+      if (this.composition) {
+        this.composition.off('add', this.watchStaleness);
+        this.composition.off('remove', this.unwatchStaleness);
+        this.composition = null;
+      }
+
+      Object.values(this.stalenessSubscription).forEach((stalenessSubscription) => {
+        stalenessSubscription.unsubscribe();
+        stalenessSubscription.stalenessUtils.destroy();
+      });
     }
   }
 };

From 39a5f376929cfd25b5d9a2fc59feda76bb12dfaf Mon Sep 17 00:00:00 2001
From: Shefali <simplyrender@gmail.com>
Date: Tue, 11 Jul 2023 11:39:42 -0700
Subject: [PATCH 6/6] Remove the isStale icon in the legend when a plot is
 inside a stacked plot.

---
 src/styles/_legacy-plots.scss | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/styles/_legacy-plots.scss b/src/styles/_legacy-plots.scss
index 99334e5f8f9..5d5391159a8 100644
--- a/src/styles/_legacy-plots.scss
+++ b/src/styles/_legacy-plots.scss
@@ -93,10 +93,6 @@ mct-plot {
     min-height: $plotMinH;
     overflow: hidden;
 
-    .is-stale {
-      @include isStaleHolder();
-    }
-
     &[s-selected] {
       .is-editing & {
         border: $editMarqueeBorder;