add hovered effect for extended lines

src/plugins/events/components/EventTimelineView.vue

@@ -295,7 +295,11 @@ export default {
                 isNested: true
               };
             },
-            template: `<swim-lane :is-nested="isNested" :hide-label="true"><template v-slot:object><div class="c-events-tsv-container"></div></template></swim-lane>`
+            template: `<swim-lane :is-nested="isNested" :hide-label="true">
+                        <template v-slot:object>
+                          <div class="c-events-tsv-container"/>
+                        </template>
+                       </swim-lane>`
           },
           {
             app: this.openmct.app
@@ -411,7 +415,6 @@ export default {
       eventWrapper.setAttribute('id', id);
       eventWrapper.classList.add(EVENT_WRAPPER_CLASS);
       eventWrapper.style.left = `${this.xScale(event.time) + this.alignmentData.leftWidth + AXES_PADDING}px`;
-
       const eventTickElement = document.createElement('div');
       eventTickElement.classList.add('c-events-tsv__event-handle');
       eventTickElement.style.width = '2px';

src/plugins/timeline/ExtendedLinesOverlay.vue

@@ -27,8 +27,10 @@
         v-for="(line, index) in lines"
         :key="index"
         class="extended-line"
-        :class="line.limitClass"
+        :class="[line.limitClass, { 'extended-line-hovered': isHovered(key, index) }]"
         :style="{ left: `${line.x + leftOffset}px`, height: `${height}px` }"
+        @mouseover="startingHover(key, index)"
+        @mouseleave="startingHover(null, null)"
       ></div>
     </div>
   </div>
@@ -50,25 +52,26 @@ export default {
       type: Number,
       default: 0
     }
+  },
+  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 };
+      }
+    },
+    isHovered(key, index) {
+      return this.hoveredLine.key === key && this.hoveredLine.index === index;
+    }
   }
 };
 </script>
-
-<style scoped>
-.extended-lines-overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  z-index: 10;
-}
-
-.extended-line {
-  position: absolute;
-  top: 0;
-  width: 2px;
-  background-color: blue;
-}
-</style>

src/plugins/timeline/timeline.scss

@@ -11,8 +11,14 @@
   position: absolute;
   top: 0;
   left: 0;
-  pointer-events: none; /* Allows clicks to pass through */
+  z-index: 10;
-  z-index: 10; /* Ensure it sits atop swimlanes */
+}
+
+.extended-lines-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10;
 }
 
 .extended-line {
@@ -21,3 +27,8 @@
   width: 2px;
   background-color: $colorBodyFg; /* Use desired color */
 }
+
+
+.extended-line-hovered {
+  background-color: green;
+}