remove is selected, add hover event for extended liens

src/plugins/events/components/EventTimelineView.vue

@@ -39,7 +39,6 @@ const PADDING = 1;
 const CONTAINER_CLASS = 'c-events-tsv__container';
 const NO_ITEMS_CLASS = 'c-events-tsv__no-items';
 const EVENT_WRAPPER_CLASS = 'c-events-tsv__event-wrapper';
-const EVENT_SELECTED_CLASS = 'is-selected';
 const ID_PREFIX = 'wrapper-';
 const AXES_PADDING = 20;
 
@@ -117,9 +116,6 @@ export default {
     this.unlisten = this.openmct.objects.observe(this.domainObject, '*', this.observeForChanges);
     this.extendedLinesBus.on('disable-extended-lines', this.disableExtendEventLines);
     this.extendedLinesBus.on('enable-extended-lines', this.enableExtendEventLines);
-    this.extendedLinesBus.on('event-clicked', this.checkIfOurEvent);
-
-    document.addEventListener('click', this.checkIfOutsideClick);
   },
   beforeUnmount() {
     if (this.eventStripResizeObserver) {
@@ -136,9 +132,7 @@ export default {
 
     this.extendedLinesBus.off('disable-extended-lines', this.disableExtendEventLines);
     this.extendedLinesBus.off('enable-extended-lines', this.enableExtendEventLines);
-    this.extendedLinesBus.off('event-clicked', this.checkIfOurEvent);
-
-    document.removeEventListener('click', this.checkIfOutsideClick);
+    this.extendedLinesBus.off('event-hovered', this.checkIfOurEvent);
   },
   methods: {
     setTimeContext() {
@@ -366,10 +360,10 @@ export default {
     updateExistingEventWrapper(existingEventWrapper, event) {
       existingEventWrapper.style.left = `${this.xScale(event.time)}px`;
     },
-    createPathSelection() {
+    createPathSelection(eventWrapper) {
       const selection = [];
       selection.unshift({
-        element: this.$el,
+        element: eventWrapper,
         context: {
           item: this.domainObject
         }
@@ -385,13 +379,13 @@ export default {
 
       return selection;
     },
-    createSelectionForInspector(event) {
+    createSelectionForInspector(event, eventWrapper) {
       const eventContext = {
         type: 'time-strip-event-selection',
         event
       };
 
-      const selection = this.createPathSelection();
+      const selection = this.createPathSelection(eventWrapper);
       if (
         selection.length &&
         this.openmct.objects.areIdsEqual(
@@ -405,7 +399,7 @@ export default {
         };
       } else {
         selection.unshift({
-          element: this.$el,
+          element: eventWrapper,
           context: {
             item: this.domainObject,
             ...eventContext
@@ -427,9 +421,11 @@ export default {
         eventWrapper.ariaLabel = textToShow;
         eventWrapper.addEventListener('mouseover', () => {
           this.showToolTip(textToShow, eventTickElement);
+          this.extendedLinesBus.updateHoverExtendEventLine(this.keyString, event.time);
         });
         eventWrapper.addEventListener('mouseleave', () => {
           this.tooltip?.destroy();
+          this.extendedLinesBus.updateHoverExtendEventLine(this.keyString, null);
         });
       }
       eventWrapper.appendChild(eventTickElement);
@@ -442,9 +438,7 @@ export default {
 
       eventWrapper.addEventListener('click', (mouseEvent) => {
         mouseEvent.stopPropagation();
-        this.createSelectionForInspector(event);
-        this.toggleEventSelection(eventTickElement);
-        this.extendedLinesBus.eventClicked(this.keyString);
+        this.createSelectionForInspector(event, eventWrapper);
       });
 
       return eventWrapper;
@@ -453,7 +447,7 @@ export default {
       if (this.extendLines) {
         const lines = this.eventHistory
           .filter((e) => this.isEventInBounds(e))
-          .map((e) => ({ x: this.xScale(e.time), limitClass: e.limitClass }));
+          .map((e) => ({ x: this.xScale(e.time), limitClass: e.limitClass, id: e.time }));
         this.extendedLinesBus.emit('update-extended-lines', {
           lines,
           keyString: this.keyString
@@ -472,27 +466,6 @@ export default {
         parentElement: referenceElement,
         cssClasses: ['c-timeline-event-tooltip']
       });
-    },
-    checkIfOurEvent(keyString) {
-      if (this.keyString !== keyString) {
-        this.selectedEvent?.classList.remove(EVENT_SELECTED_CLASS);
-        this.selectedEvent = null;
-      }
-    },
-    toggleEventSelection(clickedEvent) {
-      this.selectedEvent?.classList.remove(EVENT_SELECTED_CLASS);
-      clickedEvent.classList.add(EVENT_SELECTED_CLASS);
-      this.selectedEvent = clickedEvent;
-    },
-    checkIfOutsideClick(event) {
-      if (
-        this.selectedEvent &&
-        !this.selectedEvent.contains(event.target) &&
-        !this.$refs.events.contains(event.target)
-      ) {
-        this.selectedEvent.classList.remove(EVENT_SELECTED_CLASS);
-        this.selectedEvent = null;
-      }
     }
   }
 };

src/plugins/timeline/ExtendedLinesBus.js

@@ -31,7 +31,7 @@ export default class ExtendedLinesBus extends EventEmitter {
   enableExtendEventLines(keyString) {
     this.emit('enable-extended-lines', keyString);
   }
-  eventClicked(keyString) {
-    this.emit('event-clicked', keyString);
+  updateHoverExtendEventLine(keyString, id) {
+    this.emit('update-extended-hover', { id, keyString });
   }
 }

src/plugins/timeline/ExtendedLinesOverlay.vue

@@ -28,12 +28,17 @@
     >
       <div
         v-for="(line, index) in lines"
+        :id="line.id"
         :key="index"
         class="c-timeline__extended-line"
-        :class="[line.limitClass, { 'c-timeline__extended-line-hovered': isHovered(key, index) }]"
+        :class="[
+          line.limitClass,
+          {
+            'c-timeline__extended-line-hovered':
+              hoveredLineId && hoveredKeyString === key && line.id === hoveredLineId
+          }
+        ]"
         :style="{ left: `${line.x + leftOffset}px`, height: `${height}px` }"
-        @mouseover="startingHover(key, index)"
-        @mouseleave="startingHover(null, null)"
       ></div>
     </div>
   </div>
@@ -54,26 +59,18 @@ export default {
     leftOffset: {
       type: Number,
       default: 0
+    },
+    extendedLineHover: {
+      type: Object,
+      required: true
     }
   },
-  data() {
-    return {
-      hoveredLine: {
-        key: null,
-        index: null
-      }
-    };
-  },
-  methods: {
-    startingHover(key, index) {
-      if (key === null && index === null) {
-        this.hoveredLine = { key: null, index: null };
-      } else {
-        this.hoveredLine = { key, index };
-      }
+  computed: {
+    hoveredLineId() {
+      return this.extendedLineHover.id || null;
     },
-    isHovered(key, index) {
-      return this.hoveredLine.key === key && this.hoveredLine.index === index;
+    hoveredKeyString() {
+      return this.extendedLineHover.keyString || null;
     }
   }
 };

src/plugins/timeline/TimelineViewLayout.vue

@@ -50,6 +50,7 @@
       :extended-lines-per-key="extendedLinesPerKey"
       :height="height"
       :left-offset="extendedLinesLeftOffset"
+      :extended-line-hover="extendedLineHover"
     />
   </div>
 </template>
@@ -103,6 +104,7 @@ export default {
       useIndependentTime: this.domainObject.configuration.useIndependentTime === true,
       timeOptions: this.domainObject.configuration.timeOptions,
       extendedLinesPerKey: {},
+      extendedLineHover: {},
       extendedLinesLeftOffset: 0
     };
   },
@@ -123,12 +125,14 @@ export default {
     this.handleContentResize.cancel();
     this.contentResizeObserver.disconnect();
     this.extendedLinesBus.off('update-extended-lines', this.updateExtendedLines);
+    this.extendedLinesBus.off('update-extended-hover', this.updateExtendedHover);
   },
   mounted() {
     this.items = [];
     this.setTimeContext();
 
     this.extendedLinesBus.on('update-extended-lines', this.updateExtendedLines);
+    this.extendedLinesBus.on('update-extended-hover', this.updateExtendedHover);
 
     if (this.composition) {
       this.composition.on('add', this.addItem);
@@ -254,6 +258,9 @@ export default {
     updateExtendedLines({ keyString, lines }) {
       this.extendedLinesPerKey[keyString] = lines;
     },
+    updateExtendedHover({ keyString, id }) {
+      this.extendedLineHover = { keyString, id };
+    },
     calculateExtendedLinesLeftOffset() {
       const swimLaneOffset = this.calculateSwimlaneOffset();
       this.extendedLinesLeftOffset = this.alignmentData.leftWidth + swimLaneOffset;

src/plugins/timeline/timeline.scss

@@ -57,8 +57,4 @@
         width: $eventLineW;
         background-color: $colorEventLineExtended;
     }
-
-    &__extended-line-hovered {
-      background-color: green;
-    }
 }