Ensures update immediately after pending event dialog close

PiperOrigin-RevId: 812628933

Author: hoonji

src/app/components/chat/chat.component.ts

@@ -66,7 +66,6 @@ import {AudioPlayerComponent} from '../audio-player/audio-player.component';
 import {ChatPanelComponent} from '../chat-panel/chat-panel.component';
 import {EditJsonDialogComponent} from '../edit-json-dialog/edit-json-dialog.component';
 import {EvalTabComponent} from '../eval-tab/eval-tab.component';
-import {EventTabComponent} from '../event-tab/event-tab.component';
 import {PendingEventDialogComponent} from '../pending-event-dialog/pending-event-dialog.component';
 import {DeleteSessionDialogComponent, DeleteSessionDialogData,} from '../session-tab/delete-session-dialog/delete-session-dialog.component';
 import {SessionTabComponent} from '../session-tab/session-tab.component';
@@ -147,7 +146,6 @@ const BIDI_STREAMING_RESTART_WARNING =
 export class ChatComponent implements OnInit, AfterViewInit, OnDestroy {
   chatPanel = viewChild.required(ChatPanelComponent);
   sideDrawer = viewChild.required<MatDrawer>('sideDrawer');
-  eventTabComponent = viewChild.required(EventTabComponent);
   sessionTab = viewChild(SessionTabComponent);
   evalTab = viewChild(EvalTabComponent);
   private scrollContainer = viewChild.required<ElementRef>('autoScroll');
@@ -898,6 +896,7 @@ export class ChatComponent implements OnInit, AfterViewInit, OnDestroy {
       if (t) {
         this.removeFinishedLongRunningEvents(t.events);
         this.processRunSseResponse(t.response);
+        this.changeDetectorRef.detectChanges();
       }
     });
   }
@@ -1155,6 +1154,7 @@ export class ChatComponent implements OnInit, AfterViewInit, OnDestroy {
     });
 
     this.bottomPanelVisible = false;
+    this.changeDetectorRef.detectChanges();
   }
 
   protected updateWithSelectedEvalCase(evalCase: EvalCase) {

src/app/components/event-tab/event-tab.component.html

@@ -15,7 +15,7 @@
 -->
 
 <div class="events-wrapper">
-  @if (eventsMap.size>0) {
+  @if (eventsMap().size>0) {
     <div class="events-container">
       <div class="event-header">
         @if (!isTraceView()) {
@@ -24,7 +24,7 @@
         @if (isTraceView()) {
           <p>Trace</p>
         }
-        @if (traceData) {
+        @if (traceData()) {
           <mat-button-toggle-group name="fontStyle" aria-label="Font Style" style="scale: 0.8" [(ngModel)]="view">
             <mat-button-toggle value="events">Events</mat-button-toggle>
             <mat-button-toggle value="trace">Trace</mat-button-toggle>
@@ -33,7 +33,7 @@
       </div>
       @if (!isTraceView()) {
         <mat-list class="event-list">
-          @for (jsonData of eventsMap | keyvalue: mapOrderPreservingSort; track jsonData; let i = $index) {
+          @for (jsonData of eventsMap() | keyvalue: mapOrderPreservingSort; track jsonData; let i = $index) {
             <mat-list-item (click)="selectEvent(jsonData.key)">
               <span class="event-index">{{i}}</span>
               <span class="event-title">{{jsonData.value.title}}</span>
@@ -43,17 +43,17 @@
       }
       @if (isTraceView()) {
         <mat-list class="event-list">
-          @for (invoc of invocTraces | keyvalue: mapOrderPreservingSort; track invoc; let i = $index) {
+          @for (invoc of spansByTraceId() | keyvalue: mapOrderPreservingSort; track invoc; let i = $index) {
             <mat-list-item (click)="openDialog(invoc.key)">
               <span class="event-index">{{i}}</span>
-              <span>Invocation {{findInvocIdFromTraceId(invoc.key)}}</span>
+              <span>Invocation {{invoc.value | invocId}}</span>
             </mat-list-item>
           }
         </mat-list>
       }
     </div>
   }
-  @if (eventsMap.size==0) {
+  @if (eventsMap().size==0) {
     <div>
       <p>No conversations</p>
     </div>

src/app/components/event-tab/event-tab.component.ts

@@ -15,14 +15,16 @@
  * limitations under the License.
  */
 
-import {Component, EventEmitter, Input, OnChanges, Output, SimpleChanges} from '@angular/core';
+import {Component, EventEmitter, Input, OnChanges, Output, SimpleChanges, computed, inject, input, signal} from '@angular/core';
 import {MatDialog} from '@angular/material/dialog';
 
+import {Span} from '../../core/models/Trace';
 import {TraceChartComponent} from './trace-chart/trace-chart.component';
 import { MatButtonToggleGroup, MatButtonToggle } from '@angular/material/button-toggle';
 import { FormsModule } from '@angular/forms';
 import { MatList, MatListItem } from '@angular/material/list';
 import { KeyValuePipe } from '@angular/common';
+import {InvocIdPipe} from './invoc-id.pipe';
 
 @Component({
     selector: 'app-event-tab',
@@ -35,29 +37,36 @@ import { KeyValuePipe } from '@angular/common';
         MatList,
         MatListItem,
         KeyValuePipe,
+        InvocIdPipe,
     ],
 })
-export class EventTabComponent implements OnChanges {
-  @Input() eventsMap = new Map<string, any>();
+export class EventTabComponent {
+  readonly eventsMap = input<Map<string, any>>(new Map<string, any>());
+  readonly traceData = input<Span[]>([]);
   @Output() selectedEvent = new EventEmitter<string>();
-  @Input() traceData: any[] = [];
-  llmRequest: any = undefined;
-  llmResponse: any = undefined;
-  llmRequestKey = 'gcp.vertex.agent.llm_request';
-  llmResponseKey = 'gcp.vertex.agent.llm_response';
-  isDetailsPanelOpen = false;
-  view = 'events';
-  invocTraces = new Map<string, any[]>();
+  private readonly dialog = inject(MatDialog);
 
-  constructor(private dialog: MatDialog) {}
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if ('traceData' in changes) {
-      this.prcessTraceDataToInvocTrace();
+  readonly view = signal<string>('events');
+  readonly isTraceView = computed(() => this.view() === 'trace');
+  readonly spansByTraceId = computed(() => {
+    if (!this.traceData || this.traceData.length == 0) {
+      return new Map<string, Span[]>();
     }
-  }
+    return this.traceData().reduce((map, span) => {
+      const key = span.trace_id;
+      const group = map.get(key);
+      if (group) {
+        span.invoc_id = span.attributes?.['gcp.vertex.agent.invocation_id'];
+        group.push(span);
+        group.sort((a: Span, b: Span) => a.start_time - b.start_time);
+      } else {
+        map.set(key, [span]);
+      }
+      return map;
+    }, new Map<string, Span[]>());
+  });
 
-  showJson: boolean[] = Array(this.eventsMap.size).fill(false);
+  showJson: boolean[] = Array(this.eventsMap().size).fill(false);
 
   toggleJson(index: number) {
     this.showJson[index] = !this.showJson[index];
@@ -67,46 +76,24 @@ export class EventTabComponent implements OnChanges {
     this.selectedEvent.emit(key);
   }
 
-  isTraceView() {
-    return this.view == 'trace';
-  }
-
   mapOrderPreservingSort = (a: any, b: any): number => 0;
 
-  prcessTraceDataToInvocTrace() {
-    if (!this.traceData || this.traceData.length == 0) {
-      return;
-    }
-    this.invocTraces = this.traceData.reduce((map, item) => {
-      const key = item.trace_id;
-      const group = map.get(key);
-      if (group) {
-        group.push(item);
-        group.sort((a: any, b: any) => a.start_time - b.start_time);
-      } else {
-        map.set(key, [item]);
-      }
-      return map;
-    }, new Map<string, any[]>());
-  }
-
-  findInvocIdFromTraceId(traceId: string) {
-    const group = this.invocTraces.get(traceId);
-    return group
-        ?.find(
+  findInvocId(spans: Span[]) {
+    return spans
+        .find(
             item => item.attributes !== undefined &&
                 'gcp.vertex.agent.invocation_id' in item.attributes)
-        .attributes['gcp.vertex.agent.invocation_id']
+        ?.attributes['gcp.vertex.agent.invocation_id']
   }
 
   openDialog(traceId: string): void {
+    const spans = this.spansByTraceId().get(traceId);
+    if (!spans) return;
+
     const dialogRef = this.dialog.open(TraceChartComponent, {
       width: 'auto',
       maxWidth: '90vw',
-      data: {
-        spans: this.invocTraces.get(traceId),
-        invocId: this.findInvocIdFromTraceId(traceId)
-      },
+      data: {spans, invocId: this.findInvocId(spans)},
     });
   }
 }

src/app/components/event-tab/invoc-id.pipe.ts

@@ -0,0 +1,36 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ *
+ * 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.
+ */
+
+import {Pipe, PipeTransform} from '@angular/core';
+import {Span} from '../../core/models/Trace';
+
+@Pipe({
+  name: 'invocId',
+  standalone: true,
+})
+export class InvocIdPipe implements PipeTransform {
+  transform(spans: Span[] | undefined | null): string | undefined {
+    if (!spans) {
+      return undefined;
+    }
+    return spans.find(
+      (item) =>
+        item.attributes !== undefined &&
+        'gcp.vertex.agent.invocation_id' in item.attributes,
+    )?.attributes['gcp.vertex.agent.invocation_id'];
+  }
+}

src/app/core/models/Trace.ts

@@ -23,6 +23,7 @@ export interface Span {
   trace_id: string;
   attributes?: any;
   children?: Span[];
+  invoc_id?: string;
   // For backward compatibility.
   'gcp.vertex.agent.llm_request'?: string;
   'gcp.vertex.agent.llm_response'?: string;
@@ -38,4 +39,4 @@ export interface SpanNode extends Span {
 export interface TimeTick {
   position: number;
   label: string;
-}
+}

src/utils/url-util.ts

@@ -41,7 +41,7 @@ export class URLUtil {
   }
 
   static getWSServerUrl(): string {
-    let url = this.getApiServerBaseUrl();
+    let url = URLUtil.getApiServerBaseUrl();
     // For adk web, when the api server is not set, use the current host
     if (!url || url == '') {
       return window.location.host;