trigger off selection for extended line hilight

src/plugins/timeline/ExtendedLinesOverlay.vue

@@ -34,7 +34,9 @@
         :class="[
           line.limitClass,
           {
-            '--hilite': hoveredLineId && hoveredKeyString === key && line.id === hoveredLineId
+            '--hilite':
+              (hoveredLineId && hoveredKeyString === key && line.id === hoveredLineId) ||
+              (selectedLineId && selectedKeyString === key && line.id === selectedLineId)
           }
         ]"
         :style="{ left: `${line.x + leftOffset}px`, height: `${height}px` }"
@@ -62,6 +64,10 @@ export default {
     extendedLineHover: {
       type: Object,
       required: true
+    },
+    extendedLineSelection: {
+      type: Object,
+      required: true
     }
   },
   computed: {
@@ -70,6 +76,12 @@ export default {
     },
     hoveredKeyString() {
       return this.extendedLineHover.keyString || null;
+    },
+    selectedLineId() {
+      return this.extendedLineSelection.id || null;
+    },
+    selectedKeyString() {
+      return this.extendedLineSelection.keyString || null;
     }
   }
 };

src/plugins/timeline/TimelineViewLayout.vue

@@ -51,6 +51,7 @@
       :height="height"
       :left-offset="extendedLinesLeftOffset"
       :extended-line-hover="extendedLineHover"
+      :extended-line-selection="extendedLineSelection"
     />
   </div>
 </template>
@@ -105,6 +106,7 @@ export default {
       timeOptions: this.domainObject.configuration.timeOptions,
       extendedLinesPerKey: {},
       extendedLineHover: {},
+      extendedLineSelection: {},
       extendedLinesLeftOffset: 0
     };
   },
@@ -126,6 +128,7 @@ export default {
     this.contentResizeObserver.disconnect();
     this.extendedLinesBus.off('update-extended-lines', this.updateExtendedLines);
     this.extendedLinesBus.off('update-extended-hover', this.updateExtendedHover);
+    this.openmct.selection.off('change', this.checkForLineSelection);
   },
   mounted() {
     this.items = [];
@@ -133,6 +136,7 @@ export default {
 
     this.extendedLinesBus.on('update-extended-lines', this.updateExtendedLines);
     this.extendedLinesBus.on('update-extended-hover', this.updateExtendedHover);
+    this.openmct.selection.on('change', this.checkForLineSelection);
 
     if (this.composition) {
       this.composition.on('add', this.addItem);
@@ -261,6 +265,18 @@ export default {
     updateExtendedHover({ keyString, id }) {
       this.extendedLineHover = { keyString, id };
     },
+    checkForLineSelection(selection) {
+      const selectionContext = selection?.[0]?.[0]?.context;
+      const eventType = selectionContext?.type;
+      if (eventType === 'time-strip-event-selection') {
+        const event = selectionContext.event;
+        const selectedObject = selectionContext.item;
+        const keyString = this.openmct.objects.makeKeyString(selectedObject.identifier);
+        this.extendedLineSelection = { keyString, id: event?.time };
+      } else {
+        this.extendedLineSelection = {};
+      }
+    },
     calculateExtendedLinesLeftOffset() {
       const swimLaneOffset = this.calculateSwimlaneOffset();
       this.extendedLinesLeftOffset = this.alignmentData.leftWidth + swimLaneOffset;