pass event bus

index.html

@@ -113,7 +113,8 @@
           creatable: true
         })
       );
-      openmct.install(openmct.plugins.Timeline());
+      const timeLinePlugin = openmct.plugins.Timeline();
+      openmct.install(timeLinePlugin);
       openmct.install(openmct.plugins.Hyperlink());
       openmct.install(openmct.plugins.UTCTimeSystem());
       openmct.install(
@@ -234,7 +235,7 @@
       openmct.install(openmct.plugins.Timelist());
       openmct.install(openmct.plugins.BarChart());
       openmct.install(openmct.plugins.ScatterPlot());
-      openmct.install(openmct.plugins.EventTimestripPlugin());
+      openmct.install(openmct.plugins.EventTimestripPlugin(timeLinePlugin.eventBus));
       document.addEventListener('DOMContentLoaded', function () {
         openmct.start();
       });

src/plugins/events/EventTimelineViewProvider.js

@@ -23,7 +23,7 @@ import mount from 'utils/mount';
 
 import EventTimelineView from './components/EventTimelineView.vue';
 
-export default function EventTimestripViewProvider(openmct) {
+export default function EventTimestripViewProvider(openmct, timelineEventBus) {
   const type = 'event.time-line.view';
 
   function hasEventTelemetry(domainObject) {
@@ -65,7 +65,8 @@ export default function EventTimestripViewProvider(openmct) {
               provide: {
                 openmct: openmct,
                 domainObject: domainObject,
-                objectPath: objectPath
+                objectPath: objectPath,
+                timelineEventBus
               },
               template: '<event-timeline-view ref="root"></event-timeline-view>'
             },

src/plugins/events/components/EventTimelineView.vue

@@ -44,7 +44,7 @@ const ID_PREFIX = 'wrapper-';
 
 export default {
   mixins: [eventData],
-  inject: ['openmct', 'domainObject', 'objectPath'],
+  inject: ['openmct', 'domainObject', 'objectPath', 'timelineEventBus'],
   data() {
     const timeSystem = this.openmct.time.getTimeSystem();
     this.metadata = {};
@@ -55,7 +55,7 @@ export default {
       height: 0,
       eventHistory: [],
       timeSystem: timeSystem,
-      overlapping: false
+      extendLines: false
     };
   },
   watch: {
@@ -201,6 +201,9 @@ export default {
           }
         }
       });
+      if (this.extendLines) {
+        this.emitExtendedLines();
+      }
     },
     setDimensions() {
       const eventsHolder = this.$refs.events;
@@ -318,6 +321,10 @@ export default {
         const eventWrapper = this.createEventWrapper(index, item);
         containerElement.appendChild(eventWrapper);
       }
+
+      if (this.extendLines) {
+        this.emitExtendedLines();
+      }
     },
     updateExistingEventWrapper(existingEventWrapper, event) {
       // Update the x co-ordinates of the event wrapper
@@ -397,6 +404,12 @@ export default {
       });
 
       return eventWrapper;
+    },
+    emitExtendedLines() {
+      const lines = this.eventHistory
+        .filter((e) => this.isEventInBounds(e))
+        .map((e) => ({ x: this.xScale(e.time) }));
+      this.timelineEventBus.emit('update-extended-lines', lines);
     }
   }
 };

src/plugins/events/plugin.js

@@ -23,9 +23,9 @@
 import EventInspectorViewProvider from './EventInspectorViewProvider.js';
 import EventTimelineViewProvider from './EventTimelineViewProvider.js';
 
-export default function (options) {
+export default function plugin(timelineEventBus) {
   return function install(openmct) {
-    openmct.objectViews.addProvider(new EventTimelineViewProvider(openmct));
+    openmct.objectViews.addProvider(new EventTimelineViewProvider(openmct, timelineEventBus));
     openmct.inspectorViews.addProvider(new EventInspectorViewProvider(openmct));
   };
 }

src/plugins/timeline/ExtendedLinesBus.js

@@ -0,0 +1,28 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import { EventEmitter } from 'eventemitter3';
+export default class EventBusAPI extends EventEmitter {
+  updateExtendedLine(lineData) {
+    this.emit('update-extended-lines', lineData);
+  }
+}

src/plugins/timeline/ExtendedLinesOverlay.vue

@@ -0,0 +1,67 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <div class="extended-lines-overlay">
+    <div
+      v-for="(line, index) in extendedLines"
+      :key="index"
+      class="extended-line"
+      :style="{ left: `${line.x}px`, height: `${height}px` }"
+    ></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ExtendedLinesOverlay',
+  props: {
+    extendedLines: {
+      type: Array,
+      default: () => []
+    },
+    height: {
+      type: Number,
+      required: true
+    }
+  }
+};
+</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/TimelineViewLayout.vue

@@ -44,6 +44,8 @@
         :item="item"
       />
     </div>
+
+    <ExtendedLinesOverlay :extended-lines="extendedLines" :height="height" />
   </div>
 </template>
 
@@ -56,6 +58,7 @@ import SwimLane from '@/ui/components/swim-lane/SwimLane.vue';
 import TimelineAxis from '../../ui/components/TimeSystemAxis.vue';
 import { useAlignment } from '../../ui/composables/alignmentContext.js';
 import { getValidatedData, getValidatedGroups } from '../plan/util.js';
+import ExtendedLinesOverlay from './ExtendedLinesOverlay.vue'; // Import the overlay component
 import TimelineObjectView from './TimelineObjectView.vue';
 
 const unknownObjectType = {
@@ -69,9 +72,10 @@ export default {
   components: {
     TimelineObjectView,
     TimelineAxis,
-    SwimLane
+    SwimLane,
+    ExtendedLinesOverlay
   },
-  inject: ['openmct', 'domainObject', 'path', 'composition'],
+  inject: ['openmct', 'domainObject', 'path', 'composition', 'eventsBus'],
   setup() {
     const domainObject = inject('domainObject');
     const path = inject('path');
@@ -89,6 +93,7 @@ export default {
       items: [],
       timeSystems: [],
       height: 0,
+      extendedLines: [],
       useIndependentTime: this.domainObject.configuration.useIndependentTime === true,
       timeOptions: this.domainObject.configuration.timeOptions
     };
@@ -101,11 +106,14 @@ export default {
     this.stopFollowingTimeContext();
     this.handleContentResize.cancel();
     this.contentResizeObserver.disconnect();
+    this.eventsBus.off('update-extended-lines', this.updateExtendedLines);
   },
   mounted() {
     this.items = [];
     this.setTimeContext();
 
+    this.eventsBus.on('update-extended-lines', this.updateExtendedLines);
+
     if (this.composition) {
       this.composition.on('add', this.addItem);
       this.composition.on('remove', this.removeItem);
@@ -222,6 +230,10 @@ export default {
         this.timeContext.off('boundsChanged', this.updateViewBounds);
         this.timeContext.off('clockChanged', this.updateViewBounds);
       }
+    },
+    updateExtendedLines(lines) {
+      console.debug('🗺️ Updating extended lines', lines);
+      this.extendedLines = lines;
     }
   }
 };

src/plugins/timeline/TimelineViewProvider.js

@@ -24,7 +24,7 @@ import mount from 'utils/mount';
 
 import TimelineViewLayout from './TimelineViewLayout.vue';
 
-export default function TimelineViewProvider(openmct) {
+export default function TimelineViewProvider(openmct, eventsBus) {
   return {
     key: 'time-strip.view',
     name: 'TimeStrip',
@@ -52,7 +52,8 @@ export default function TimelineViewProvider(openmct) {
                 openmct,
                 domainObject,
                 path: objectPath,
-                composition: openmct.composition.get(domainObject)
+                composition: openmct.composition.get(domainObject),
+                eventsBus
               },
               template: '<timeline-view-layout></timeline-view-layout>'
             },

src/plugins/timeline/plugin.js

@@ -20,12 +20,17 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
+import ExtendedLinesBus from './ExtendedLinesBus.js';
 import TimelineCompositionPolicy from './TimelineCompositionPolicy.js';
 import timelineInterceptor from './timelineInterceptor.js';
 import TimelineViewProvider from './TimelineViewProvider.js';
 
+const eventsBus = new ExtendedLinesBus();
+
+export { eventsBus };
+
 export default function () {
-  return function install(openmct) {
+  function install(openmct) {
     openmct.types.addType('time-strip', {
       name: 'Time Strip',
       key: 'time-strip',
@@ -43,6 +48,10 @@ export default function () {
     timelineInterceptor(openmct);
     openmct.composition.addPolicy(new TimelineCompositionPolicy(openmct).allow);
 
-    openmct.objectViews.addProvider(new TimelineViewProvider(openmct));
-  };
+    openmct.objectViews.addProvider(new TimelineViewProvider(openmct, eventsBus));
+  }
+
+  install.eventBus = eventsBus;
+
+  return install;
 }

src/plugins/timeline/timeline.scss

@@ -1,7 +1,23 @@
 .c-timeline-holder {
   overflow: hidden;
+  position: relative;
 }
 
 .c-timeline__objects {
   display: contents;
 }
+
+.extended-lines-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none; /* Allows clicks to pass through */
+  z-index: 10; /* Ensure it sits atop swimlanes */
+}
+
+.extended-line {
+  position: absolute;
+  top: 0;
+  width: 2px;
+  background-color: $colorBodyFg; /* Use desired color */
+}