Refactor code to

1) reduce call to instance method
2) Use existing event line bus functionality
3) move non reactive properties to the created lifecycle hook

src/plugins/events/components/EventTimelineView.vue

@@ -53,19 +53,8 @@ export default {
     return { alignmentData };
   },
   data() {
-    const timeSystem = this.openmct.time.getTimeSystem();
-    this.valueMetadata = {};
-    this.requestCount = 0;
-
     return {
-      viewBounds: null,
+      eventHistory: []
-      height: 0,
-      eventHistory: [],
-      timeSystem: timeSystem,
-      extendLines: false,
-      titleKey: null,
-      tooltip: null,
-      selectedEvent: null
     };
   },
   computed: {
@@ -82,24 +71,26 @@ export default {
   },
   watch: {
     eventHistory: {
-      handler(newHistory, oldHistory) {
+      handler() {
         this.updatePlotEvents();
       },
       deep: true
     },
     alignmentData: {
       handler() {
-        this.updateViewBounds();
+        this.setScaleAndPlotEvents(this.timeSystem);
       },
       deep: true
     }
   },
+  created() {
+    this.valueMetadata = {};
+    this.height = 0;
+    this.timeSystem = this.openmct.time.getTimeSystem();
+    this.extendLines = false;
+  },
   mounted() {
     this.setDimensions();
-
-    this.setScaleAndPlotEvents = this.setScaleAndPlotEvents.bind(this);
-    this.updateViewBounds = this.updateViewBounds.bind(this);
-    this.setTimeContext = this.setTimeContext.bind(this);
     this.setTimeContext();
 
     this.limitEvaluator = this.openmct.telemetry.limitEvaluator(this.domainObject);
@@ -175,7 +166,7 @@ export default {
       const clientWidth = this.getClientWidth();
       if (clientWidth !== this.width) {
         this.setDimensions();
-        this.updateViewBounds();
+        this.setScaleAndPlotEvents(this.timeSystem);
       }
     },
     getClientWidth() {
@@ -446,20 +437,13 @@ export default {
       return eventWrapper;
     },
     emitExtendedLines() {
+      let lines = [];
       if (this.extendLines) {
-        const lines = this.eventHistory
+        lines = this.eventHistory
           .filter((e) => this.isEventInBounds(e))
           .map((e) => ({ x: this.xScale(e.time), limitClass: e.limitClass, id: e.time }));
-        this.extendedLinesBus.emit('update-extended-lines', {
-          lines,
-          keyString: this.keyString
-        });
-      } else {
-        this.extendedLinesBus.emit('update-extended-lines', {
-          lines: [],
-          keyString: this.keyString
-        });
       }
+      this.extendedLinesBus.updateExtendedLines(this.keyString, lines);
     },
     showToolTip(textToShow, referenceElement, event) {
       const aClasses = ['c-events-tooltip'];

src/plugins/timeline/ExtendedLinesBus.js

@@ -22,8 +22,8 @@
 
 import { EventEmitter } from 'eventemitter3';
 export default class ExtendedLinesBus extends EventEmitter {
-  updateExtendedLines(keyString, lineData) {
+  updateExtendedLines(keyString, lines) {
-    this.emit('update-extended-lines', { lineData, keyString });
+    this.emit('update-extended-lines', { lines, keyString });
   }
   disableExtendEventLines(keyString) {
     this.emit('disable-extended-lines', keyString);

src/plugins/timeline/ExtendedLinesOverlay.vue

@@ -29,7 +29,7 @@
       <div
         v-for="(line, index) in lines"
         :id="line.id"
-        :key="index"
+        :key="`${index - line.id}`"
         class="c-timeline__event-line--extended"
         :class="[
           line.limitClass,

src/plugins/timeline/TimelineObjectView.vue

@@ -30,7 +30,7 @@
     :domain-object="item.domainObject"
     :button-title="`Toggle extended event lines overlay for ${item.domainObject.name}`"
     button-icon="icon-arrows-up-down"
-    :hide-button="!hasEventTelemetry()"
+    :hide-button="!item.isEventTelemetry"
     :button-click-on="enableExtendEventLines"
     :button-click-off="disableExtendEventLines"
   >
@@ -147,18 +147,6 @@ export default {
       const keyString = this.openmct.objects.makeKeyString(this.item.domainObject.identifier);
       this.extendedLinesBus.disableExtendEventLines(keyString);
     },
-    hasEventTelemetry() {
-      const metadata = this.openmct.telemetry.getMetadata(this.item.domainObject);
-      if (!metadata) {
-        return false;
-      }
-      const hasDomain = metadata.valuesForHints(['domain']).length > 0;
-      const hasNoRange = !metadata.valuesForHints(['range'])?.length;
-      // for the moment, let's also exclude telemetry with images
-      const hasNoImages = !metadata.valuesForHints(['image']).length;
-
-      return hasDomain && hasNoRange && hasNoImages;
-    },
     setActionCollection(actionCollection) {
       this.openmct.menus.actionsToMenuItems(
         actionCollection.getVisibleActions(),

src/plugins/timeline/TimelineViewLayout.vue

@@ -162,7 +162,7 @@ export default {
       } else if (domainObject.type === 'gantt-chart') {
         rowCount = Object.keys(domainObject.configuration.swimlaneVisibility).length;
       }
-
+      const isEventTelemetry = this.hasEventTelemetry(domainObject);
       let height =
         domainObject.type === 'telemetry.plot.stacked'
           ? `${domainObject.composition.length * PLOT_ITEM_H_PX}px`
@@ -173,11 +173,24 @@ export default {
         type,
         keyString,
         rowCount,
-        height
+        height,
+        isEventTelemetry
       };
 
       this.items.push(item);
     },
+    hasEventTelemetry(domainObject) {
+      const metadata = this.openmct.telemetry.getMetadata(domainObject);
+      if (!metadata) {
+        return false;
+      }
+      const hasDomain = metadata.valuesForHints(['domain']).length > 0;
+      const hasNoRange = !metadata.valuesForHints(['range'])?.length;
+      // for the moment, let's also exclude telemetry with images
+      const hasNoImages = !metadata.valuesForHints(['image']).length;
+
+      return hasDomain && hasNoRange && hasNoImages;
+    },
     removeItem(identifier) {
       let index = this.items.findIndex((item) =>
         this.openmct.objects.areIdsEqual(identifier, item.domainObject.identifier)