works per swimlane now

example/eventGenerator/EventTelemetryProvider.js

@@ -33,7 +33,8 @@ class EventTelemetryProvider {
 
   generateData(firstObservedTime, count, startTime, duration, name) {
     const millisecondsSinceStart = startTime - firstObservedTime;
-    const utc = startTime + count * duration;
+    const randomFewSeconds = Math.floor(Math.random() * 10000);
+    const utc = startTime + count + randomFewSeconds * duration;
     const ind = count % messages.length;
     const message = messages[ind] + ' - [' + millisecondsSinceStart + ']';
 

src/plugins/timeline/ExtendedLinesOverlay.vue

@@ -22,13 +22,15 @@
 
 <template>
   <div class="extended-lines-overlay">
-    <div
-      v-for="(line, index) in extendedLines"
-      :key="index"
-      class="extended-line"
-      :class="line.limitClass"
-      :style="{ left: `${line.x + leftOffset}px`, height: `${height}px` }"
-    ></div>
+    <div v-for="(lines, key) in extendedLinesPerKey" :key="key" class="extended-line-container">
+      <div
+        v-for="(line, index) in lines"
+        :key="index"
+        class="extended-line"
+        :class="line.limitClass"
+        :style="{ left: `${line.x + leftOffset}px`, height: `${height}px` }"
+      ></div>
+    </div>
   </div>
 </template>
 
@@ -36,9 +38,9 @@
 export default {
   name: 'ExtendedLinesOverlay',
   props: {
-    extendedLines: {
-      type: Array,
-      default: () => []
+    extendedLinesPerKey: {
+      type: Object,
+      required: true
     },
     height: {
       type: Number,

src/plugins/timeline/TimelineViewLayout.vue

@@ -47,7 +47,7 @@
     </div>
 
     <ExtendedLinesOverlay
-      :extended-lines="extendedLines"
+      :extended-lines-per-key="extendedLinesPerKey"
       :height="height"
       :left-offset="extendedLeftOffset"
     />
@@ -102,7 +102,7 @@ export default {
       height: 0,
       useIndependentTime: this.domainObject.configuration.useIndependentTime === true,
       timeOptions: this.domainObject.configuration.timeOptions,
-      extendedLines: [],
+      extendedLinesPerKey: {},
       additionalLeftOffset: 0
     };
   },
@@ -175,6 +175,7 @@ export default {
         this.openmct.objects.areIdsEqual(identifier, item.domainObject.identifier)
       );
       this.items.splice(index, 1);
+      delete this.extendedLinesPerKey[this.openmct.objects.makeKeyString(identifier)];
     },
     reorder(reorderPlan) {
       let oldItems = this.items.slice();
@@ -249,7 +250,7 @@ export default {
       }
     },
     updateExtendedLines({ keyString, lines }) {
-      this.extendedLines = lines;
+      this.extendedLinesPerKey[keyString] = lines;
     },
     calculateAdditionalLeftOffset() {
       const firstSwimLane = this.$el.querySelector('.c-swimlane__lane-object');