Misc memory leak fixes (#7224)

* fix(leak): remove font listeners

* fix(leak): release componentInstance

* fix(perf): remove unused emit

* fix(perf): only emit if tickWidth changes

* fix: warnings and undefined keys

* fix: remove unused bind

* fix: restore MctTicks component

src/plugins/LADTable/LADTableView.js

@@ -79,5 +79,6 @@ export default class LADTableView {
     if (this._destroy) {
       this._destroy();
     }
+    this.component = null;
   }
 }

src/plugins/condition/ConditionSetViewProvider.js

@@ -85,6 +85,7 @@ export default class ConditionSetViewProvider {
         if (_destroy) {
           _destroy();
         }
+        component = null;
       }
     };
   }

src/plugins/displayLayout/plugin.js

@@ -99,7 +99,7 @@ class DisplayLayoutView {
   destroy() {
     if (this._destroy) {
       this._destroy();
-      this.component = undefined;
+      this.component = null;
     }
   }
 }

src/plugins/plot/MctPlot.vue

@@ -53,13 +53,13 @@
             ></span>
           </div>
 
-          <mct-ticks
+          <MctTicks
             v-show="gridLines && !options.compact"
             :axis-type="'xAxis'"
             :position="'right'"
           />
 
-          <mct-ticks
+          <MctTicks
             v-for="(yAxis, index) in yAxesIds"
             v-show="gridLines"
             :key="`yAxis-gridlines-${index}`"

src/plugins/plot/MctTicks.vue

@@ -273,12 +273,14 @@ export default {
             )
           );
 
-          this.tickWidth = tickWidth;
-          this.$emit('plot-tick-width', {
-            width: tickWidth,
-            yAxisId: this.axisType === 'yAxis' ? this.axisId : ''
-          });
-          this.shouldCheckWidth = false;
+          if (this.tickWidth !== tickWidth) {
+            this.tickWidth = tickWidth;
+            this.$emit('plot-tick-width', {
+              width: tickWidth,
+              yAxisId: this.axisType === 'yAxis' ? this.axisId : ''
+            });
+            this.shouldCheckWidth = false;
+          }
         }
       }
 

src/plugins/plot/axis/XAxis.vue

@@ -22,7 +22,7 @@
 
 <template>
   <div v-if="loaded" class="gl-plot-axis-area gl-plot-x has-local-controls">
-    <mct-ticks :axis-type="'xAxis'" :position="'left'" @plot-tick-width="onTickWidthChange" />
+    <MctTicks :axis-type="'xAxis'" :position="'left'" />
 
     <div class="gl-plot-label gl-plot-x-label" :class="{ 'icon-gear': isEnabledXKeyToggle() }">
       {{ xAxisLabel }}
@@ -59,7 +59,6 @@ export default {
       }
     }
   },
-  emits: ['plot-x-tick-width'],
   data() {
     return {
       selectedXKeyOptionKey: '',
@@ -137,9 +136,6 @@ export default {
       this.xAxisLabel = this.xAxis.get('label');
       this.selectedXKeyOptionKey =
         this.xKeyOptions.length > 0 ? this.getXKeyOption(xAxisKey).key : xAxisKey;
-    },
-    onTickWidthChange(width) {
-      this.$emit('plot-x-tick-width', width);
     }
   }
 };

src/plugins/plot/axis/YAxis.vue

@@ -60,7 +60,7 @@
       </option>
     </select>
 
-    <mct-ticks
+    <MctTicks
       :axis-id="id"
       :axis-type="'yAxis'"
       class="gl-plot-ticks"

src/plugins/plot/inspector/PlotOptionsBrowse.vue

@@ -23,7 +23,7 @@
   <div v-if="loaded" class="js-plot-options-browse">
     <ul v-if="!isStackedPlotObject" class="c-tree" aria-label="Plot Series Properties">
       <h2 class="--first" title="Plot series display properties in this object">Plot Series</h2>
-      <plot-options-item v-for="series in plotSeries" :key="series.key" :series="series" />
+      <PlotOptionsItem v-for="series in plotSeries" :key="series.keyString" :series="series" />
     </ul>
     <div v-if="plotSeries.length && !isStackedPlotObject" class="grid-properties">
       <ul

src/plugins/plot/inspector/PlotOptionsEdit.vue

@@ -23,7 +23,7 @@
   <div v-if="loaded" class="js-plot-options-edit">
     <ul v-if="!isStackedPlotObject" class="c-tree" aria-label="Plot Series Properties">
       <h2 class="--first" title="Display properties for this object">Plot Series</h2>
-      <li v-for="series in plotSeries" :key="series.key">
+      <li v-for="series in plotSeries" :key="series.keyString">
         <series-form :series="series" @series-updated="updateSeriesConfigForObject" />
       </li>
     </ul>

src/plugins/plot/inspector/PlotOptionsItem.vue

@@ -184,7 +184,7 @@ export default {
       return this.series.get('color').asHexString();
     }
   },
-  mounted() {
+  created() {
     this.status = this.openmct.status.get(this.series.domainObject.identifier);
     this.removeStatusListener = this.openmct.status.observe(
       this.series.domainObject.identifier,

src/plugins/plot/inspector/forms/SeriesForm.vue

@@ -191,7 +191,7 @@ export default {
       return this.series.get('color').asHexString();
     }
   },
-  mounted() {
+  created() {
     this.initialize();
 
     this.status = this.openmct.status.get(this.series.domainObject.identifier);
@@ -206,7 +206,7 @@ export default {
     }
   },
   methods: {
-    initialize: function () {
+    initialize() {
       this.fields = [
         {
           modelProp: 'yKey',

src/plugins/plot/stackedPlot/mixins/objectStyles-mixin.js

@@ -39,6 +39,10 @@ export default {
       this.stopListeningStyles();
     }
 
+    if (this.stopListeningFontStyles) {
+      this.stopListeningFontStyles();
+    }
+
     if (this.styleRuleManager) {
       this.styleRuleManager.destroy();
     }

src/plugins/tabs/tabs.js

@@ -82,6 +82,7 @@ export default class Tabs {
         if (this.destroy) {
           this.destroy();
         }
+        component = null;
       }
     };
   }

src/plugins/telemetryTable/TelemetryTableView.js

@@ -63,6 +63,7 @@ export default class TelemetryTableView {
     if (this._destroy) {
       this._destroy();
     }
+    this.component = null;
   }
 
   show(element, editMode, { renderWhenVisible }) {

src/plugins/viewLargeAction/viewLargeAction.js

@@ -99,7 +99,10 @@ export default class ViewLargeAction {
       }
     );
     this.preview = vNode.componentInstance;
-    this.destroy = destroy;
+    this.destroy = () => {
+      destroy();
+      this.preview = null;
+    };
 
     return this.preview.$el;
   }