From 3ad64f08c509bfa30324f4e830fe186e77d9fc93 Mon Sep 17 00:00:00 2001 From: Shefali Date: Wed, 5 Mar 2025 12:33:17 -0800 Subject: [PATCH] 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 --- .../events/components/EventTimelineView.vue | 42 ++++++------------- src/plugins/timeline/ExtendedLinesBus.js | 4 +- src/plugins/timeline/ExtendedLinesOverlay.vue | 2 +- src/plugins/timeline/TimelineObjectView.vue | 14 +------ src/plugins/timeline/TimelineViewLayout.vue | 17 +++++++- 5 files changed, 32 insertions(+), 47 deletions(-) diff --git a/src/plugins/events/components/EventTimelineView.vue b/src/plugins/events/components/EventTimelineView.vue index ce330d85d7..c0cef69b4e 100644 --- a/src/plugins/events/components/EventTimelineView.vue +++ b/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, - height: 0, - eventHistory: [], - timeSystem: timeSystem, - extendLines: false, - titleKey: null, - tooltip: null, - selectedEvent: null + eventHistory: [] }; }, 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']; diff --git a/src/plugins/timeline/ExtendedLinesBus.js b/src/plugins/timeline/ExtendedLinesBus.js index 56f7071985..a575050913 100644 --- a/src/plugins/timeline/ExtendedLinesBus.js +++ b/src/plugins/timeline/ExtendedLinesBus.js @@ -22,8 +22,8 @@ import { EventEmitter } from 'eventemitter3'; export default class ExtendedLinesBus extends EventEmitter { - updateExtendedLines(keyString, lineData) { - this.emit('update-extended-lines', { lineData, keyString }); + updateExtendedLines(keyString, lines) { + this.emit('update-extended-lines', { lines, keyString }); } disableExtendEventLines(keyString) { this.emit('disable-extended-lines', keyString); diff --git a/src/plugins/timeline/ExtendedLinesOverlay.vue b/src/plugins/timeline/ExtendedLinesOverlay.vue index 8492c509cd..27daa8219e 100644 --- a/src/plugins/timeline/ExtendedLinesOverlay.vue +++ b/src/plugins/timeline/ExtendedLinesOverlay.vue @@ -29,7 +29,7 @@
@@ -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(), diff --git a/src/plugins/timeline/TimelineViewLayout.vue b/src/plugins/timeline/TimelineViewLayout.vue index 3d67cf74ea..350a377115 100644 --- a/src/plugins/timeline/TimelineViewLayout.vue +++ b/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)