Extends stack-trace-snippet components to source mapper components.

frontend/app/components/op_profile/BUILD

@@ -61,11 +61,12 @@ xprof_ng_module(
         "@org_xprof//frontend/app/common/angular:angular_material_sidenav",
         "@org_xprof//frontend/app/common/angular:angular_material_slide_toggle",
         "@org_xprof//frontend/app/common/angular:angular_material_tooltip",
+        "@org_xprof//frontend/app/common/constants",
         "@org_xprof//frontend/app/common/interfaces",
         "@org_xprof//frontend/app/common/interfaces:op_profile_proto_defs",
         "@org_xprof//frontend/app/common/utils",
         "@org_xprof//frontend/app/components/op_profile/op_table",
-        "@org_xprof//frontend/app/components/stack_trace_snippet",
+        "@org_xprof//frontend/app/components/source_mapper",
         "@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/op_profile/op_profile.ng.html

@@ -1,4 +1,4 @@
-<op-profile-base [opProfileData]="opProfileData" (groupByChange)="onGroupByChange($event)">
+<op-profile-base [sessionId]="sessionId" [opProfileData]="opProfileData" (groupByChange)="onGroupByChange($event)">
   <op-details opDetails
     [sessionId]="sessionId"
     [moduleList]="moduleList">

frontend/app/components/op_profile/op_profile_base.ng.html

@@ -114,9 +114,12 @@
     </op-table>
     </as-split-area>
     <as-split-area [size]="20" *ngIf="sourceCodeServiceIsAvailable && showStackTrace">
-      <stack-trace-snippet
-          [sourceFileAndLineNumber]="sourceFileAndLineNumber"
-          [stackTrace]="stackTrace" />
+      <source-mapper
+        [sourceFileAndLineNumber]="sourceFileAndLineNumber"
+        [stackTrace]="stackTrace"
+        [sessionId]="sessionId"
+        [programId]="focusedOpProgramId"
+        [opName]="focusedOpName"/>
     </as-split-area>
     </as-split>
   </mat-sidenav-content>

frontend/app/components/op_profile/op_profile_base.ts

@@ -1,4 +1,4 @@
-import {Component, inject, Injector, Input, OnDestroy, OnInit, Output, EventEmitter, SimpleChanges} from '@angular/core';
+import {Component, EventEmitter, inject, Injector, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges} from '@angular/core';
 import {Params} from '@angular/router';
 import {Store} from '@ngrx/store';
 import {type OpProfileProto} from 'org_xprof/frontend/app/common/interfaces/data_table';
@@ -23,7 +23,7 @@ const GROUP_BY_RULES = ['program', 'category', 'provenance'];
   templateUrl: './op_profile_base.ng.html',
   styleUrls: ['./op_profile_common.scss']
 })
-export class OpProfileBase implements OnDestroy, OnInit {
+export class OpProfileBase implements OnDestroy, OnInit, OnChanges {
   /** Handles on-destroy Subject, used to unsubscribe. */
   private readonly destroyed = new ReplaySubject<void>(1);
   private readonly injector = inject(Injector);
@@ -42,9 +42,12 @@ export class OpProfileBase implements OnDestroy, OnInit {
   sourceCodeServiceIsAvailable = false;
   sourceFileAndLineNumber = '';
   stackTrace = '';
+  focusedOpProgramId = '';
+  focusedOpName = '';
   showStackTrace = false;
   useUncappedFlops = false;
 
+  @Input() sessionId = '';
   @Input() opProfileData: OpProfileProto|null = null;
   @Output() readonly groupByChange = new EventEmitter<string>();
 
@@ -80,10 +83,14 @@ export class OpProfileBase implements OnDestroy, OnInit {
         });
   }
 
+  // Update state for source info given the active node selection in the
+  // underneath table.
   private updateActiveNode(node: Node|null) {
     this.sourceFileAndLineNumber = `${node?.xla?.sourceInfo?.fileName || ''}:${
         node?.xla?.sourceInfo?.lineNumber || -1}`;
     this.stackTrace = node?.xla?.sourceInfo?.stackFrame || '';
+    this.focusedOpProgramId = node?.xla?.programId || '';
+    this.focusedOpName = node?.name || '';
   }
 
   ngOnChanges(changes: SimpleChanges) {

frontend/app/components/op_profile/op_profile_base_module.ts

@@ -8,7 +8,7 @@ import {MatSidenavModule} from '@angular/material/sidenav';
 import {MatSlideToggleModule} from '@angular/material/slide-toggle';
 import {MatTooltipModule} from '@angular/material/tooltip';
 import {AngularSplitModule} from 'angular-split';
-import {StackTraceSnippetModule} from 'org_xprof/frontend/app/components/stack_trace_snippet/stack_trace_snippet_module';
+import {SourceMapperModule} from 'org_xprof/frontend/app/components/source_mapper/source_mapper_module';
 
 import {OpProfileBase} from './op_profile_base';
 import {OpTableModule} from './op_table/op_table_module';
@@ -27,7 +27,7 @@ import {OpTableModule} from './op_table/op_table_module';
     MatTooltipModule,
     MatSidenavModule,
     CommonModule,
-    StackTraceSnippetModule,
+    SourceMapperModule,
   ],
   exports: [OpProfileBase]
 })

frontend/app/components/source_mapper/BUILD

@@ -0,0 +1,40 @@
+load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
+load("//defs:defs.bzl", "xprof_ng_module")
+
+package(default_visibility = ["//frontend:internal"])
+
+xprof_ng_module(
+    name = "source_mapper",
+    srcs = [
+        "source_mapper.ts",
+        "source_mapper_module.ts",
+    ],
+    assets = [
+        ":source_mapper_css",
+        "source_mapper.ng.html",
+    ],
+    deps = [
+        "@npm//@angular/core",
+        "@npm//@angular/forms",
+        "@npm//rxjs",
+        "@org_xprof//frontend/app/common/angular:angular_material_expansion",
+        "@org_xprof//frontend/app/common/angular:angular_material_form_field",
+        "@org_xprof//frontend/app/common/angular:angular_material_icon",
+        "@org_xprof//frontend/app/common/angular:angular_material_progress_bar",
+        "@org_xprof//frontend/app/common/angular:angular_material_select",
+        "@org_xprof//frontend/app/common/angular:angular_material_tooltip",
+        "@org_xprof//frontend/app/common/constants",
+        "@org_xprof//frontend/app/components/stack_trace_snippet",
+        "@org_xprof//frontend/app/components/stack_trace_snippet:message",
+        "@org_xprof//frontend/app/services/data_service_v2:data_service_v2_interface",
+        "@org_xprof//frontend/app/services/source_code_service:source_code_service_interface",
+    ],
+)
+
+sass_binary(
+    name = "source_mapper_css",
+    src = "source_mapper.scss",
+    # stack = True,
+    sourcemap = False,
+    deps = ["@org_xprof//frontend/app/styles:common"],
+)

frontend/app/components/source_mapper/source_mapper.ng.html

@@ -0,0 +1,85 @@
+<div class="source-mapper">
+  <div class="stack-trace-snippet-container">
+    <mat-form-field class="source-file-select" (click)="$event.stopPropagation()" appearance="outline">
+      <mat-label>Source File</mat-label>
+      <mat-select [(ngModel)]="selectedSourceFileName">
+        <mat-option *ngFor="let fileName of sourceFileNames" [value]="fileName">
+          {{fileName}}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+    <stack-trace-snippet
+      [sourceFileAndLineNumber]="sourceFileAndLineNumber"
+      [stackTrace]="stackTrace"
+      [sourceContextWindow]="sourceContextWindow"
+    />
+  </div>
+
+  <div class="ir-text-container">
+    <mat-form-field class="ir-type-select" (click)="$event.stopPropagation()" appearance="outline">
+      <mat-label>Compiler Pass</mat-label>
+      <mat-select [(ngModel)]="selectedCompilerPass">
+        <mat-option *ngFor="let pass of compilerPasses" [value]="pass">
+          {{pass}}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+    <ng-container *ngIf="programId && programId !== '0'; else noProgramId">
+      <mat-expansion-panel class="ir-text-panel" [expanded]="true">
+        <mat-expansion-panel-header class="ir-text-header">
+          <mat-panel-title>
+            <div class="ir-text-header-title">
+              Program ID:{{programId}}
+            </div>
+            <mat-progress-bar *ngIf="!loaded" mode="indeterminate" class="ir-text-progress-bar"></mat-progress-bar>
+            <a
+                *ngIf="irTextLink"
+                [href]="irTextLink"
+                target="_blank"
+                class="external-link-icon"
+                (click)="$event.stopPropagation()"
+                [matTooltip]="irTextLinkTooltip">
+              <mat-icon>open_in_new</mat-icon>
+            </a>
+          </mat-panel-title>
+        </mat-expansion-panel-header>
+
+        <div *ngIf="loaded" class="ir-text-content">
+            <table>
+              <thead>
+                <tr>
+                  <th><pre class="line-number"></pre></th>
+                  <th><pre class="line-content"></pre></th>
+                </tr>
+              </thead>
+            <tbody>
+              <ng-container *ngIf="irText && irText.length > 0; else noLines">
+                <tr
+                  *ngFor="let line of irTextLinesForDisplay; let lineIndex = index; trackBy: trackByIndex"
+                  [class.line-selected]="isFocusLine(line)">
+                  <td><pre class="line-number"><code>{{ lineIndex }}</code></pre></td>
+                  <td><pre class="line-content"><code [innerHTML]="line"></code></pre></td>
+                </tr>
+              </ng-container>
+
+              <ng-template #noLines>
+                <tr>
+                  <td colspan="2">There are no lines to display.</td>
+                </tr>
+              </ng-template>
+            </tbody>
+          </table>
+        </div>
+
+        <div *ngIf="!loaded">Loading...</div>
+      </mat-expansion-panel>
+    </ng-container>
+  </div>
+</div>
+
+<ng-template #noProgramId>
+  <message
+    title="IR Text Not Found"
+    content="Please select an HLO operation with program ID info.">
+  </message>
+</ng-template>

frontend/app/components/source_mapper/source_mapper.scss

@@ -0,0 +1,85 @@
+@import 'frontend/app/styles/common';
+
+.source-mapper .text-ir-header {
+  padding: 2px 5px;
+  background-color: #ccc;
+  border-radius: 0;
+  min-height: 20px;
+  max-height: 20px;
+  font-family: $code-font-family;
+  white-space: nowrap;
+}
+
+.source-mapper .text-ir-header-title{
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.ir-text-content .line-number {
+  flex-shrink: 0; // Don't let it shrink
+  padding: 0 5px; // Horizontal padding
+  text-align: right; // Align numbers to the right
+  color: #636d83; // A slightly lighter gray than the code text
+  user-select: none; // Prevent selection of line numbers
+  font-size: 0.9em;
+}
+
+.ir-text-content .line-content {
+  padding: 0 0 0 2px; // Distance between the line number and the text
+  margin: 0;
+}
+
+.source-mapper {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+}
+
+.ir-text-container {
+  width: 50%;
+}
+
+.stack-trace-snippet-container {
+  width: 50%;
+}
+
+.ir-text-header:not(.mat-expanded):hover {
+  background-color: #ccc;
+}
+
+.ir-text-header {
+  padding: 2px 5px;
+  background-color: #ccc;
+  border-radius: 0;
+  min-height: 20px;
+  max-height: 20px;
+  font-family: $code-font-family;
+  white-space: nowrap;
+}
+
+.ir-text-header .external-link-icon {
+  margin-left: auto; // Icon to the right
+  color: #0000008f; // Darker than its backgrond
+  padding: 0;
+}
+
+.source-file-select, .ir-type-select {
+  width: 100%;
+}
+
+:host ::ng-deep .ir-text-panel .mat-expansion-panel-body {
+  padding: 0 0 0 2px; // Distance between the panel and the content start
+  margin: 0;
+  white-space: nowrap;
+  overflow-x: auto; // Horizontal scroll if needed
+}
+
+.ir-text-content .line-selected {
+  background-color: #fff6e6;
+}
+
+mat-progress-bar {
+  width: 80px; // Example fixed width
+  flex-shrink: 0; // Prevent it from shrinking too much
+}