From 6b4d9bf1267ccf268d131aaba642841d106e993e Mon Sep 17 00:00:00 2001
From: Pablo Gamito <pablogamito@google.com>
Date: Mon, 6 Mar 2023 12:59:46 +0000
Subject: [PATCH] Make sure expanded timeline selected entries are in sync

Test: npm run test:all

Fixes: 263334911
Change-Id: I2cdcf0db7ff769c84907e128ddadf40e48b235f8
---
 .../timeline/expanded_timeline_component.ts     | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/tools/winscope/src/app/components/timeline/expanded_timeline_component.ts b/tools/winscope/src/app/components/timeline/expanded_timeline_component.ts
index c0c500032..2199df70b 100644
--- a/tools/winscope/src/app/components/timeline/expanded_timeline_component.ts
+++ b/tools/winscope/src/app/components/timeline/expanded_timeline_component.ts
@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import { KeyValue } from '@angular/common';
 import {
   Component,
   ElementRef,
@@ -28,25 +29,23 @@ import {
 import {TimelineData} from 'app/timeline_data';
 import {TRACE_INFO} from 'app/trace_info';
 import {Timestamp} from 'trace/timestamp';
+import { TraceType } from 'trace/trace_type';
 import {SingleTimelineComponent} from './single_timeline_component';
 
 @Component({
   selector: 'expanded-timeline',
   template: `
     <div id="expanded-timeline-wrapper" #expandedTimelineWrapper>
-      <div *ngFor="let timeline of this.data | keyvalue" class="timeline">
+      <div *ngFor="let timeline of this.data | keyvalue; trackBy: getTimelineTrackByValue" class="timeline">
         <div class="icon-wrapper">
           <mat-icon class="icon" [style]="{color: TRACE_INFO[timeline.key].color}">
             {{ TRACE_INFO[timeline.key].icon }}
           </mat-icon>
         </div>
-        <!-- TODO: Timestamp variables are passed to single-timeline, but single-timeline takes bigint parameters. Why the heck is this working??? -->
         <single-timeline
           [color]="TRACE_INFO[timeline.key].color"
           [entries]="timeline.value"
-          [selected]="
-            timelineData.getCurrentTimestampFor(timeline.key)?.timestamp?.getValueNs() ?? undefined
-          "
+          [selected]="selectedTimestampFor(timeline.key)"
           [start]="start"
           [end]="end"
           (onTimestampChanged)="onTimestampChanged.emit($event)"
@@ -174,6 +173,14 @@ export class ExpandedTimelineComponent {
     this.resizeCanvases();
   }
 
+  public selectedTimestampFor(traceType: TraceType): bigint|undefined {
+    return this.timelineData.getCurrentTimestampFor(traceType)?.getValueNs() ?? undefined
+  }
+
+  getTimelineTrackByValue = (index: number, value: KeyValue<TraceType, Timestamp[]>) => {
+    return this.selectedTimestampFor(value.key)
+  }
+
   private resizeCanvases() {
     // Reset any size before computing new size to avoid it interfering with size computations.
     // Needs to be done together because otherwise the sizes of each timeline will interfere with