Revert source mapper changes for Hlo stats and roofline model.

PiperOrigin-RevId: 839088687

Author: muditgokhale2

frontend/app/common/utils/BUILD

@@ -25,11 +25,3 @@ ts_library(
         "@org_xprof//frontend/app/store",
     ],
 )
-
-ts_library(
-    name = "source_info_utils",
-    srcs = [
-        "source_info_utils.ts",
-    ],
-    deps = ["@npm//safevalues"],
-)

frontend/app/common/utils/source_info_utils.ts

@@ -20,7 +20,6 @@ xprof_ng_module(
         "@npm//@angular/router",
         "@npm//@ngrx/store",
         "@npm//rxjs",
-        "@npm//safevalues",
         "@org_xprof//frontend/app/common/angular:angular_material_divider",
         "@org_xprof//frontend/app/common/angular:angular_material_expansion",
         "@org_xprof//frontend/app/common/angular:angular_material_form_field",
@@ -33,18 +32,16 @@ xprof_ng_module(
         "@org_xprof//frontend/app/common/interfaces",
         "@org_xprof//frontend/app/common/interfaces:chart",
         "@org_xprof//frontend/app/common/utils",
-        "@org_xprof//frontend/app/common/utils:source_info_utils",
         "@org_xprof//frontend/app/components/chart",
         "@org_xprof//frontend/app/components/chart:chart_options",
         "@org_xprof//frontend/app/components/chart:data_processor",
         "@org_xprof//frontend/app/components/chart:default_data_provider",
         "@org_xprof//frontend/app/components/chart/dashboard",
-        "@org_xprof//frontend/app/components/chart/table",
         "@org_xprof//frontend/app/components/controls/category_filter",
         "@org_xprof//frontend/app/components/controls/export_as_csv",
         "@org_xprof//frontend/app/components/controls/string_filter",
         "@org_xprof//frontend/app/components/framework_op_stats/flop_rate_chart",
-        "@org_xprof//frontend/app/components/source_mapper",
+        "@org_xprof//frontend/app/components/stack_trace_snippet",
         "@org_xprof//frontend/app/services/data_service_v2:data_service_v2_interface",
         "@org_xprof//frontend/app/services/source_code_service:source_code_service_interface",
         "@org_xprof//frontend/app/store",

frontend/app/components/hlo_stats/BUILD

@@ -122,11 +122,7 @@
   </chart>
 </div>
 
-<source-mapper
+<stack-trace-snippet
     [sourceFileAndLineNumber]="sourceFileAndLineNumber"
     [stackTrace]="stackTrace"
-    [sessionId]="sessionId"
-    [programId]="selectedProgramId"
-    [opName]="selectedOpName"
-    [opCategory]="selectedOpCategory"
     *ngIf="sourceCodeServiceIsAvailable && showStackTrace"/>

frontend/app/components/hlo_stats/hlo_stats.ng.html

@@ -1,12 +1,11 @@
-import {AfterViewInit, Component, inject, Injector, NgZone, OnDestroy, ViewChild} from '@angular/core';
+import {Component, ElementRef, inject, Injector, NgZone, OnDestroy, Renderer2, ViewChild} from '@angular/core';
 import {FormControl} from '@angular/forms';
 import {ActivatedRoute, Params} from '@angular/router';
 import {Store} from '@ngrx/store';
 import {Throbber} from 'org_xprof/frontend/app/common/classes/throbber';
 import {OpType} from 'org_xprof/frontend/app/common/constants/enums';
 import {ChartDataInfo} from 'org_xprof/frontend/app/common/interfaces/chart';
 import {SimpleDataTable} from 'org_xprof/frontend/app/common/interfaces/data_table';
-import {parseSourceInfo} from 'org_xprof/frontend/app/common/utils/source_info_utils';
 import {setLoadingState} from 'org_xprof/frontend/app/common/utils/utils';
 import {CategoryTableDataProcessor} from 'org_xprof/frontend/app/components/chart/category_table_data_processor';
 import {Chart} from 'org_xprof/frontend/app/components/chart/chart';
@@ -41,14 +40,10 @@ const TOTAL_TIME_ID = 'total_time';
   templateUrl: './hlo_stats.ng.html',
   styleUrls: ['./hlo_stats.css'],
 })
-export class HloStats extends Dashboard implements OnDestroy, AfterViewInit {
+export class HloStats extends Dashboard implements OnDestroy {
   tool = 'hlo_op_stats';
   sessionId = '';
   host = '';
-  // Info for selected op.
-  selectedProgramId = '';
-  selectedOpName = '';
-  selectedOpCategory = '';
   private readonly injector = inject(Injector);
   private readonly dataService: DataServiceV2Interface =
       inject(DATA_SERVICE_INTERFACE_TOKEN);
@@ -116,8 +111,15 @@ export class HloStats extends Dashboard implements OnDestroy, AfterViewInit {
   tableColumnsControl = new FormControl<number[]>([]);
   tableColumns: Array<{index: number; label: string}> = [];
 
+  // We add a listener to `chart` and manipulate multiple elements of
+  // `chartElement`. Knowing that `Chart.elementRef` is private, we use
+  // `ViewChild` twice to access both. See `addSourceInfoClickListener` for
+  // more details.
   @ViewChild('table', {read: Chart, static: false})
-  tableRef: Chart|undefined = undefined;
+  chartRef: Chart|undefined = undefined;
+  @ViewChild('table', {read: ElementRef, static: false})
+  chartElementRef: ElementRef|undefined = undefined;
+  private readonly renderer: Renderer2 = inject(Renderer2);
   sourceFileAndLineNumber = '';
   stackTrace = '';
   showStackTrace = false;
@@ -144,6 +146,9 @@ export class HloStats extends Dashboard implements OnDestroy, AfterViewInit {
         this.injector.get(SOURCE_CODE_SERVICE_INTERFACE_TOKEN, null);
     this.sourceCodeServiceIsAvailable =
         sourceCodeService?.isAvailable() === true;
+    if (this.sourceCodeServiceIsAvailable) {
+      this.addSourceInfoClickListener();
+    }
   }
 
   processQuery(params: Params) {
@@ -225,63 +230,48 @@ export class HloStats extends Dashboard implements OnDestroy, AfterViewInit {
     return updatedData;
   }
 
-  ngAfterViewInit() {
-    if (this.sourceCodeServiceIsAvailable) {
-      this.addTableRowSelectListener();
-    }
-  }
-
-  private addTableRowSelectListener() {
-    const chart = this.tableRef?.chart;
-    if (!chart) {
+  /**
+   * Adds a click listener to the source info cells.
+   *
+   * If "Show Source Code" is checked, then whenever user clicks on the source
+   * info cell, we show snippets of source code around the stack trace.
+   *
+   * Unfortunately, `google.visualization.Table` does not provide any API to
+   * listen to click events on *cells*. So we manually add the click listener
+   * to the items in this table (see
+   * https://developers.google.com/chart/interactive/docs/gallery/table#events
+   * as a reference).
+   *
+   * Unfortunately, `google.visualization.Table` does not provide enough
+   * extension points to add interactive elements to cells. Therefore, we go
+   * to the native elements of the table and add the click listener to the
+   * cells with class `source-info-cell`.
+   */
+  private addSourceInfoClickListener() {
+    const chart = this.chartRef?.chart;
+    const chartElement = this.chartElementRef?.nativeElement;
+    if (!chart || !chartElement) {
+      // TODO: b/429036372 - Using setTimeout to detect change is inefficient.
       setTimeout(() => {
-        this.addTableRowSelectListener();
+        this.addSourceInfoClickListener();
       }, 100);
       return;
     }
-    google.visualization.events.addListener(chart, 'select', () => {
-      this.zone.run(() => {
-        const selection = chart.getSelection();
-        if (selection && selection.length > 0 && selection[0].row != null) {
-          const rowIndex = selection[0].row;
-          const rowData: Array<string|number|boolean|Date|null|undefined> = [];
-          if (this.dataView) {
-            for (let i = 0; i < this.dataView.getNumberOfColumns(); i++) {
-              rowData.push(this.dataView.getValue(rowIndex, i));
-            }
-            this.handleRowSelection(rowIndex, rowData);
+    google.visualization.events.addListener(chart, 'ready', () => {
+      this.renderer.listen(chartElement, 'click', (event: Event) => {
+        const target = event.target;
+        if (target instanceof HTMLElement) {
+          if (target.classList.contains('source-info-cell')) {
+            this.zone.run(() => {
+              this.sourceFileAndLineNumber = target.textContent || '';
+              this.stackTrace = target.getAttribute('title') || '';
+            });
           }
         }
       });
     });
   }
 
-  handleRowSelection(
-      rowIndex: number,
-      rowData: Array<string|number|boolean|Date|null|undefined>) {
-    if (!this.dataView || !this.dataTable) return;
-    const programId =
-        (rowData[this.dataTable.getColumnIndex(PROGRAM_ID)] as string ||
-         '').trim();
-    const opName =
-        (rowData[this.dataTable.getColumnIndex(OP_NAME_ID)] as string ||
-         '').trim();
-    const opCategory =
-        (rowData[this.dataTable.getColumnIndex(OP_CATEGORY_ID)] as string ||
-         '').trim();
-    const sourceInfoHtmlString =
-        (rowData[this.dataTable.getColumnIndex(SOURCE_INFO_ID)] as string ||
-         '').trim();
-    this.selectedProgramId = programId;
-    this.selectedOpName = opName;
-    this.selectedOpCategory = opCategory;
-
-    const {sourceFileAndLineNumber, stackTrace} =
-        parseSourceInfo(sourceInfoHtmlString);
-    this.sourceFileAndLineNumber = sourceFileAndLineNumber;
-    this.stackTrace = stackTrace;
-  }
-
   toggleShowStackTrace() {
     this.showStackTrace = !this.showStackTrace;
   }
@@ -301,7 +291,6 @@ export class HloStats extends Dashboard implements OnDestroy, AfterViewInit {
   }
 
   override updateView() {
-    super.updateView();
     this.dataInfoForTable = {
       ...this.dataInfoForTable,
       filters: this.getFilters(),

frontend/app/components/hlo_stats/hlo_stats.ts

@@ -13,7 +13,7 @@ import {CategoryFilterModule} from 'org_xprof/frontend/app/components/controls/c
 import {ExportAsCsvModule} from 'org_xprof/frontend/app/components/controls/export_as_csv/export_as_csv_module';
 import {StringFilterModule} from 'org_xprof/frontend/app/components/controls/string_filter/string_filter_module';
 import {FlopRateChartModule} from 'org_xprof/frontend/app/components/framework_op_stats/flop_rate_chart/flop_rate_chart_module';
-import {SourceMapperModule} from 'org_xprof/frontend/app/components/source_mapper/source_mapper_module';
+import {StackTraceSnippetModule} from 'org_xprof/frontend/app/components/stack_trace_snippet/stack_trace_snippet_module';
 
 import {HloStats} from './hlo_stats';
 
@@ -36,7 +36,7 @@ import {HloStats} from './hlo_stats';
     ReactiveFormsModule,
     MatIconModule,
     MatSlideToggleModule,
-    SourceMapperModule,
+    StackTraceSnippetModule,
   ],
   exports: [HloStats],
 })

frontend/app/components/hlo_stats/hlo_stats_module.ts

@@ -16,13 +16,11 @@ xprof_ng_module(
     # strict_templates = False,
     deps = [
         "@npm//@angular/core",
-        "@npm//safevalues",
         "@org_xprof//frontend/app/common/angular:angular_material_icon",
         "@org_xprof//frontend/app/common/angular:angular_material_slide_toggle",
         "@org_xprof//frontend/app/common/constants:roofline_model_constants",
         "@org_xprof//frontend/app/common/interfaces",
         "@org_xprof//frontend/app/common/interfaces:chart",
-        "@org_xprof//frontend/app/common/utils:source_info_utils",
         "@org_xprof//frontend/app/components/chart",
         "@org_xprof//frontend/app/components/chart:chart_options",
         "@org_xprof//frontend/app/components/chart:data_processor",
@@ -31,7 +29,7 @@ xprof_ng_module(
         "@org_xprof//frontend/app/components/chart/table",
         "@org_xprof//frontend/app/components/controls/category_filter",
         "@org_xprof//frontend/app/components/controls/string_filter",
-        "@org_xprof//frontend/app/components/source_mapper",
+        "@org_xprof//frontend/app/components/stack_trace_snippet",
         "@org_xprof//frontend/app/services/source_code_service:source_code_service_interface",
     ],
 )

frontend/app/components/hlo_stats/stack_trace_utils.ts

@@ -24,11 +24,7 @@
 </div>
 <table #table [dataView]="dataView" [showRowNumber]="true"></table>
 
-<source-mapper
+<stack-trace-snippet
     [sourceFileAndLineNumber]="sourceFileAndLineNumber"
     [stackTrace]="stackTrace"
-    [sessionId]="sessionId"
-    [programId]="selectedProgramId"
-    [opName]="selectedOpName"
-    [opCategory]="selectedOpCategory"
     *ngIf="sourceCodeServiceIsAvailable && showStackTrace"/>