From 343b2f165cfec807119c4fd4f0d6542e6eb70b7b Mon Sep 17 00:00:00 2001
From: Kean Mariotti <keanmariotti@google.com>
Date: Mon, 31 Oct 2022 15:42:24 +0000
Subject: [PATCH] Fix UI change detection after trace collection

CollectTracesComponent used to correctly notify AppComponent through callbacks, but the Angular
change detection was not always triggered (no input change), AppComponent was not updated and the
UI would hang with the message "Loading data..." or would not respond to "Upload new" botton clicks.

This commit solves the issue by manually triggering the Angular change detection through
ChangeDetectorRef#detectChanges().

Fix: b/256602610
Fix: b/256766721
Test: start winscope and collect a trace through ADB proxy
Change-Id: Iddbcc6a29c5d5a502f294b4fc49295dc06c9f00b
---
 .../winscope-ng/src/app/components/app.component.ts | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/tools/winscope-ng/src/app/components/app.component.ts b/tools/winscope-ng/src/app/components/app.component.ts
index 64436cc0f..80ce1827d 100644
--- a/tools/winscope-ng/src/app/components/app.component.ts
+++ b/tools/winscope-ng/src/app/components/app.component.ts
@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Component, Injector, Inject, ViewEncapsulation, Input } from "@angular/core";
+import {Component, Injector, Inject, ViewEncapsulation, Input, ChangeDetectorRef} from "@angular/core";
 import { createCustomElement } from "@angular/elements";
 import { MatSliderChange } from "@angular/material/slider";
 import { TraceCoordinator } from "app/trace_coordinator";
@@ -36,7 +36,7 @@ import { ViewerScreenRecordingComponent } from "viewers/viewer_screen_recording/
       <p id="app-title" class="mat-display-1">Winscope</p>
       <span class="toolbar-wrapper">
         <button *ngIf="dataLoaded" color="primary" mat-stroked-button (click)="toggleTimestamp()">Start/End Timestamp</button>
-        <button *ngIf="dataLoaded" color="primary" mat-stroked-button (click)="clearData()">Upload New</button>
+        <button *ngIf="dataLoaded" color="primary" mat-stroked-button (click)="onUploadNewClick()">Upload New</button>
       </span>
     </mat-toolbar>
 
@@ -127,6 +127,7 @@ import { ViewerScreenRecordingComponent } from "viewers/viewer_screen_recording/
 })
 export class AppComponent {
   title = "winscope-ng";
+  changeDetectorRef: ChangeDetectorRef;
   traceCoordinator: TraceCoordinator;
   states = ProxyState;
   store: PersistentStore = new PersistentStore();
@@ -137,8 +138,10 @@ export class AppComponent {
   @Input() dataLoaded = false;
 
   constructor(
-    @Inject(Injector) injector: Injector
+    @Inject(Injector) injector: Injector,
+    @Inject(ChangeDetectorRef) changeDetectorRef: ChangeDetectorRef
   ) {
+    this.changeDetectorRef = changeDetectorRef;
     this.traceCoordinator = new TraceCoordinator();
 
     if (!customElements.get("viewer-input-method")) {
@@ -183,10 +186,11 @@ export class AppComponent {
     this.notifyCurrentTimestamp();
   }
 
-  public clearData() {
+  public onUploadNewClick() {
     this.dataLoaded = false;
     this.traceCoordinator.clearData();
     proxyClient.adbData = [];
+    this.changeDetectorRef.detectChanges();
   }
 
   public onDataLoadedChange(dataLoaded: boolean) {
@@ -197,6 +201,7 @@ export class AppComponent {
       this.currentTimestampIndex = 0;
       this.notifyCurrentTimestamp();
       this.dataLoaded = dataLoaded;
+      this.changeDetectorRef.detectChanges();
     }
   }