Merge branch '7936-add-discrete-event-visualization' into issue/7957-adjustable-swimlane-size

example/eventGenerator/EventMetadataProvider.js

@@ -43,6 +43,8 @@ class EventMetadataProvider {
             name: 'Message',
             format: 'string',
             hints: {
+              // this is used in the EventTimelineView to provide a title for the event
+              // label can be changed to other properties for the title (e.g., the `name` property)
               label: 0
             }
           }

src/plugins/events/components/EventInspectorView.vue

@@ -21,20 +21,18 @@
 -->
 
 <template>
-  <div class="c-timelist-properties">
-    <div class="c-inspect-properties">
-      <ul class="c-inspect-properties__section">
-        <div class="c-inspect-properties_header" title="'Details'">Details</div>
-        <li
-          v-for="[key, value] in Object.entries(event)"
-          :key="key"
-          class="c-inspect-properties__row"
-        >
-          <span class="c-inspect-properties__label">{{ key }}</span>
-          <span class="c-inspect-properties__value">{{ value }}</span>
-        </li>
-      </ul>
-    </div>
+  <div class="c-inspect-properties">
+    <ul class="c-inspect-properties__section">
+      <div class="c-inspect-properties_header" title="'Details'">Details</div>
+      <li
+        v-for="[key, value] in Object.entries(event)"
+        :key="key"
+        class="c-inspect-properties__row"
+      >
+        <span class="c-inspect-properties__label">{{ key }}</span>
+        <span class="c-inspect-properties__value">{{ value }}</span>
+      </li>
+    </ul>
   </div>
 </template>
 

src/plugins/events/components/EventTimelineView.vue

@@ -79,13 +79,19 @@ export default {
   },
   computed: {
     alignmentStyle() {
-      let leftOffset = 0;
-      const rightOffset = this.alignmentData.rightWidth ? AXES_PADDING : 0;
+      let leftMargin = 0;
+      let rightMargin = 0;
       if (this.alignmentData.leftWidth) {
-        leftOffset = this.alignmentData.multiple ? 2 * AXES_PADDING : AXES_PADDING;
+        const leftOffset = this.alignmentData.multiple ? 2 * AXES_PADDING : AXES_PADDING;
+        leftMargin = `${this.alignmentData.leftWidth + leftOffset}px`;
       }
+
+      if (this.alignmentData.rightWidth) {
+        rightMargin = `${this.alignmentData.rightWidth + AXES_PADDING}px`;
+      }
+
       return {
-        margin: `0 ${this.alignmentData.rightWidth + rightOffset}px 0 ${this.alignmentData.leftWidth + leftOffset}px`
+        margin: `0 ${rightMargin} 0 ${leftMargin}`
       };
     }
   },
@@ -130,9 +136,8 @@ export default {
     this.resize = _.debounce(this.resize, 400);
     this.eventStripResizeObserver = new ResizeObserver(this.resize);
     this.eventStripResizeObserver.observe(this.$refs.events);
-
-    this.extendedLinesBus.on('disable-extended-lines', this.disableExtendEventLines);
-    this.extendedLinesBus.on('enable-extended-lines', this.enableExtendEventLines);
+    this.extendedLinesBus.addEventListener('disable-extended-lines', this.disableExtendEventLines);
+    this.extendedLinesBus.addEventListener('enable-extended-lines', this.enableExtendEventLines);
   },
   beforeUnmount() {
     if (this.eventStripResizeObserver) {
@@ -147,9 +152,11 @@ export default {
       this.destroyEventContainer();
     }
 
-    this.extendedLinesBus.off('disable-extended-lines', this.disableExtendEventLines);
-    this.extendedLinesBus.off('enable-extended-lines', this.enableExtendEventLines);
-    this.extendedLinesBus.off('event-hovered', this.checkIfOurEvent);
+    this.extendedLinesBus.removeEventListener(
+      'disable-extended-lines',
+      this.disableExtendEventLines
+    );
+    this.extendedLinesBus.removeEventListener('enable-extended-lines', this.enableExtendEventLines);
   },
   methods: {
     setTimeContext() {
@@ -158,16 +165,17 @@ export default {
       this.timeContext.on('timeSystem', this.setScaleAndPlotEvents);
       this.timeContext.on('boundsChanged', this.updateViewBounds);
     },
-    enableExtendEventLines(keyStringToEnable) {
+    enableExtendEventLines(event) {
+      const keyStringToEnable = event.detail;
       if (this.keyString === keyStringToEnable) {
         this.extendLines = true;
         this.emitExtendedLines();
       }
     },
-    disableExtendEventLines(keyStringToDisable) {
+    disableExtendEventLines(event) {
+      const keyStringToDisable = event.detail;
       if (this.keyString === keyStringToDisable) {
         this.extendLines = false;
-        // emit an empty array to clear the lines
         this.emitExtendedLines();
       }
     },
@@ -190,16 +198,15 @@ export default {
       }
     },
     getClientWidth() {
-      let clientWidth = this.$refs.events.clientWidth;
-
+      // Try to use the component’s own element first
+      let clientWidth = this.$refs.events?.clientWidth;
       if (!clientWidth) {
-        //this is a hack - need a better way to find the parent of this component
-        const parent = this.openmct.layout.$refs.browseObject.$el;
+        // Fallback: use the actual container element (the immediate parent)
+        const parent = this.$el.parentElement;
         if (parent) {
           clientWidth = parent.getBoundingClientRect().width;
         }
       }
-
       return clientWidth;
     },
     updateViewBounds(bounds, isTick) {

src/plugins/timeline/ExtendedLinesBus.js

@@ -20,18 +20,36 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import { EventEmitter } from 'eventemitter3';
-export default class ExtendedLinesBus extends EventEmitter {
+export default class ExtendedLinesBus extends EventTarget {
   updateExtendedLines(keyString, lines) {
-    this.emit('update-extended-lines', { lines, keyString });
+    this.dispatchEvent(
+      new CustomEvent('update-extended-lines', {
+        detail: { keyString, lines }
+      })
+    );
   }
+
   disableExtendEventLines(keyString) {
-    this.emit('disable-extended-lines', keyString);
+    this.dispatchEvent(
+      new CustomEvent('disable-extended-lines', {
+        detail: keyString
+      })
+    );
   }
+
   enableExtendEventLines(keyString) {
-    this.emit('enable-extended-lines', keyString);
+    this.dispatchEvent(
+      new CustomEvent('enable-extended-lines', {
+        detail: keyString
+      })
+    );
   }
+
   updateHoverExtendEventLine(keyString, id) {
-    this.emit('update-extended-hover', { id, keyString });
+    this.dispatchEvent(
+      new CustomEvent('update-extended-hover', {
+        detail: { keyString, id }
+      })
+    );
   }
 }

src/plugins/timeline/TimelineViewLayout.vue

@@ -224,16 +224,16 @@ export default {
     this.stopFollowingTimeContext();
     this.handleContentResize.cancel();
     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);
+    this.extendedLinesBus.removeEventListener('update-extended-lines', this.updateExtendedLines);
+    this.extendedLinesBus.removeEventListener('update-extended-hover', this.updateExtendedHover);
   },
   async mounted() {
     this.items = [];
     this.setTimeContext();
 
-    this.extendedLinesBus.on('update-extended-lines', this.updateExtendedLines);
-    this.extendedLinesBus.on('update-extended-hover', this.updateExtendedHover);
+    this.extendedLinesBus.addEventListener('update-extended-lines', this.updateExtendedLines);
+    this.extendedLinesBus.addEventListener('update-extended-hover', this.updateExtendedHover);
     this.openmct.selection.on('change', this.checkForLineSelection);
 
     if (this.composition) {
@@ -384,10 +384,12 @@ export default {
         this.timeContext.off('clockChanged', this.updateViewBounds);
       }
     },
-    updateExtendedLines({ keyString, lines }) {
+    updateExtendedLines(event) {
+      const { keyString, lines } = event.detail;
       this.extendedLinesPerKey[keyString] = lines;
     },
-    updateExtendedHover({ keyString, id }) {
+    updateExtendedHover(event) {
+      const { keyString, id } = event.detail;
       this.extendedLineHover = { keyString, id };
     },
     checkForLineSelection(selection) {

src/ui/components/TimeSystemAxis.vue

@@ -81,6 +81,7 @@ export default {
     const svgHeight = ref(0);
     const axisTransform = ref(`translate(0,${TIME_AXIS_LINE_Y})`);
     const alignmentOffset = ref(0);
+    const leftAlignmentOffset = ref(0);
     const alignmentStyle = ref({ margin: `0 0 0 0` });
     const nowMarkerStyle = reactive({
       height: '0px',
@@ -104,6 +105,7 @@ export default {
       svgHeight,
       axisTransform,
       alignmentOffset,
+      leftAlignmentOffset,
       alignmentStyle,
       nowMarkerStyle,
       openmct

src/ui/router/Browse.js

@@ -96,7 +96,7 @@ class Browse {
       this.#unobserve();
       this.#unobserve = undefined;
     }
-
+    path = decodeURIComponent(path);
     if (!Array.isArray(path)) {
       path = path.split('/');
     }