diff --git a/src/plugins/events/components/EventTimelineView.vue b/src/plugins/events/components/EventTimelineView.vue
index c1b49f9fc6..52c6757262 100644
--- a/src/plugins/events/components/EventTimelineView.vue
+++ b/src/plugins/events/components/EventTimelineView.vue
@@ -295,7 +295,11 @@ export default {
isNested: true
};
},
- template: ``
+ template: `
+
+
+
+ `
},
{
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';
diff --git a/src/plugins/timeline/ExtendedLinesOverlay.vue b/src/plugins/timeline/ExtendedLinesOverlay.vue
index ef6e94fbf7..cfd8abc2a6 100644
--- a/src/plugins/timeline/ExtendedLinesOverlay.vue
+++ b/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)"
>
@@ -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;
+ }
}
};
-
-
diff --git a/src/plugins/timeline/timeline.scss b/src/plugins/timeline/timeline.scss
index 02ab4518e4..71bc0ccebe 100644
--- a/src/plugins/timeline/timeline.scss
+++ b/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; /* Ensure it sits atop swimlanes */
+ z-index: 10;
+}
+
+.extended-lines-overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 10;
}
.extended-line {
@@ -20,4 +26,9 @@
top: 0;
width: 2px;
background-color: $colorBodyFg; /* Use desired color */
+}
+
+
+.extended-line-hovered {
+ background-color: green;
}
\ No newline at end of file