Skip to content

Commit 5715607

Browse files
zzzariescopybara-github
zzzaries
authored and
copybara-github
committed
Extends stack-trace-snippet components to source mapper components.
PiperOrigin-RevId: 819957751
1 parent 3fa0faa commit 5715607

16 files changed

+446
-18
lines changed

‎frontend/app/components/op_profile/BUILD‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,11 +61,12 @@ xprof_ng_module(
6161
"@org_xprof//frontend/app/common/angular:angular_material_sidenav",
6262
"@org_xprof//frontend/app/common/angular:angular_material_slide_toggle",
6363
"@org_xprof//frontend/app/common/angular:angular_material_tooltip",
64+
"@org_xprof//frontend/app/common/constants",
6465
"@org_xprof//frontend/app/common/interfaces",
6566
"@org_xprof//frontend/app/common/interfaces:op_profile_proto_defs",
6667
"@org_xprof//frontend/app/common/utils",
6768
"@org_xprof//frontend/app/components/op_profile/op_table",
68-
"@org_xprof//frontend/app/components/stack_trace_snippet",
69+
"@org_xprof//frontend/app/components/source_mapper",
6970
"@org_xprof//frontend/app/services/data_service_v2:data_service_v2_interface",
7071
"@org_xprof//frontend/app/services/source_code_service:source_code_service_interface",
7172
"@org_xprof//frontend/app/store",

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<op-profile-base [opProfileData]="opProfileData" (groupByChange)="onGroupByChange($event)">
1+
<op-profile-base [sessionId]="sessionId" [opProfileData]="opProfileData" (groupByChange)="onGroupByChange($event)">
22
<op-details opDetails
33
[sessionId]="sessionId"
44
[moduleList]="moduleList">

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

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -114,9 +114,12 @@
114114
</op-table>
115115
</as-split-area>
116116
<as-split-area [size]="20" *ngIf="sourceCodeServiceIsAvailable && showStackTrace">
117-
<stack-trace-snippet
118-
[sourceFileAndLineNumber]="sourceFileAndLineNumber"
119-
[stackTrace]="stackTrace" />
117+
<source-mapper
118+
[sourceFileAndLineNumber]="sourceFileAndLineNumber"
119+
[stackTrace]="stackTrace"
120+
[sessionId]="sessionId"
121+
[programId]="focusedOpProgramId"
122+
[opName]="focusedOpName"/>
120123
</as-split-area>
121124
</as-split>
122125
</mat-sidenav-content>

‎frontend/app/components/op_profile/op_profile_base.ts‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {Component, inject, Injector, Input, OnDestroy, OnInit, Output, EventEmitter, SimpleChanges} from '@angular/core';
1+
import {Component, EventEmitter, inject, Injector, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges} from '@angular/core';
22
import {Params} from '@angular/router';
33
import {Store} from '@ngrx/store';
44
import {type OpProfileProto} from 'org_xprof/frontend/app/common/interfaces/data_table';
@@ -23,7 +23,7 @@ const GROUP_BY_RULES = ['program', 'category', 'provenance'];
2323
templateUrl: './op_profile_base.ng.html',
2424
styleUrls: ['./op_profile_common.scss']
2525
})
26-
export class OpProfileBase implements OnDestroy, OnInit {
26+
export class OpProfileBase implements OnDestroy, OnInit, OnChanges {
2727
/** Handles on-destroy Subject, used to unsubscribe. */
2828
private readonly destroyed = new ReplaySubject<void>(1);
2929
private readonly injector = inject(Injector);
@@ -42,9 +42,12 @@ export class OpProfileBase implements OnDestroy, OnInit {
4242
sourceCodeServiceIsAvailable = false;
4343
sourceFileAndLineNumber = '';
4444
stackTrace = '';
45+
focusedOpProgramId = '';
46+
focusedOpName = '';
4547
showStackTrace = false;
4648
useUncappedFlops = false;
4749

50+
@Input() sessionId = '';
4851
@Input() opProfileData: OpProfileProto|null = null;
4952
@Output() readonly groupByChange = new EventEmitter<string>();
5053

@@ -80,10 +83,14 @@ export class OpProfileBase implements OnDestroy, OnInit {
8083
});
8184
}
8285

86+
// Update state for source info given the active node selection in the
87+
// underneath table.
8388
private updateActiveNode(node: Node|null) {
8489
this.sourceFileAndLineNumber = `${node?.xla?.sourceInfo?.fileName || ''}:${
8590
node?.xla?.sourceInfo?.lineNumber || -1}`;
8691
this.stackTrace = node?.xla?.sourceInfo?.stackFrame || '';
92+
this.focusedOpProgramId = node?.xla?.programId || '';
93+
this.focusedOpName = node?.name || '';
8794
}
8895

8996
ngOnChanges(changes: SimpleChanges) {

‎frontend/app/components/op_profile/op_profile_base_module.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {MatSidenavModule} from '@angular/material/sidenav';
88
import {MatSlideToggleModule} from '@angular/material/slide-toggle';
99
import {MatTooltipModule} from '@angular/material/tooltip';
1010
import {AngularSplitModule} from 'angular-split';
11-
import {StackTraceSnippetModule} from 'org_xprof/frontend/app/components/stack_trace_snippet/stack_trace_snippet_module';
11+
import {SourceMapperModule} from 'org_xprof/frontend/app/components/source_mapper/source_mapper_module';
1212

1313
import {OpProfileBase} from './op_profile_base';
1414
import {OpTableModule} from './op_table/op_table_module';
@@ -27,7 +27,7 @@ import {OpTableModule} from './op_table/op_table_module';
2727
MatTooltipModule,
2828
MatSidenavModule,
2929
CommonModule,
30-
StackTraceSnippetModule,
30+
SourceMapperModule,
3131
],
3232
exports: [OpProfileBase]
3333
})

‎frontend/app/components/source_mapper/BUILD‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
2+
load("//defs:defs.bzl", "xprof_ng_module")
3+
4+
package(default_visibility = ["//frontend:internal"])
5+
6+
xprof_ng_module(
7+
name = "source_mapper",
8+
srcs = [
9+
"source_mapper.ts",
10+
"source_mapper_module.ts",
11+
],
12+
assets = [
13+
":source_mapper_css",
14+
"source_mapper.ng.html",
15+
],
16+
deps = [
17+
"@npm//@angular/core",
18+
"@npm//@angular/forms",
19+
"@npm//rxjs",
20+
"@org_xprof//frontend/app/common/angular:angular_material_expansion",
21+
"@org_xprof//frontend/app/common/angular:angular_material_form_field",
22+
"@org_xprof//frontend/app/common/angular:angular_material_icon",
23+
"@org_xprof//frontend/app/common/angular:angular_material_progress_bar",
24+
"@org_xprof//frontend/app/common/angular:angular_material_select",
25+
"@org_xprof//frontend/app/common/angular:angular_material_tooltip",
26+
"@org_xprof//frontend/app/common/constants",
27+
"@org_xprof//frontend/app/components/stack_trace_snippet",
28+
"@org_xprof//frontend/app/components/stack_trace_snippet:message",
29+
"@org_xprof//frontend/app/services/data_service_v2:data_service_v2_interface",
30+
"@org_xprof//frontend/app/services/source_code_service:source_code_service_interface",
31+
],
32+
)
33+
34+
sass_binary(
35+
name = "source_mapper_css",
36+
src = "source_mapper.scss",
37+
# stack = True,
38+
sourcemap = False,
39+
deps = ["@org_xprof//frontend/app/styles:common"],
40+
)

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

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
<div class="source-mapper">
2+
<div class="stack-trace-snippet-container">
3+
<mat-form-field class="source-file-select" (click)="$event.stopPropagation()" appearance="outline">
4+
<mat-label>Source File</mat-label>
5+
<mat-select [(ngModel)]="selectedSourceFileName">
6+
<mat-option *ngFor="let fileName of sourceFileNames" [value]="fileName">
7+
{{fileName}}
8+
</mat-option>
9+
</mat-select>
10+
</mat-form-field>
11+
<stack-trace-snippet
12+
[sourceFileAndLineNumber]="sourceFileAndLineNumber"
13+
[stackTrace]="stackTrace"
14+
[sourceContextWindow]="sourceContextWindow"
15+
/>
16+
</div>
17+
18+
<div class="ir-text-container">
19+
<mat-form-field class="ir-type-select" (click)="$event.stopPropagation()" appearance="outline">
20+
<mat-label>Compiler Pass</mat-label>
21+
<mat-select [(ngModel)]="selectedCompilerPass">
22+
<mat-option *ngFor="let pass of compilerPasses" [value]="pass">
23+
{{pass}}
24+
</mat-option>
25+
</mat-select>
26+
</mat-form-field>
27+
<ng-container *ngIf="programId && programId !== '0'; else noProgramId">
28+
<mat-expansion-panel class="ir-text-panel" [expanded]="true">
29+
<mat-expansion-panel-header class="ir-text-header">
30+
<mat-panel-title>
31+
<div class="ir-text-header-title">
32+
Program ID:{{programId}}
33+
</div>
34+
<mat-progress-bar *ngIf="!loaded" mode="indeterminate" class="ir-text-progress-bar"></mat-progress-bar>
35+
<a
36+
*ngIf="irTextLink"
37+
[href]="irTextLink"
38+
target="_blank"
39+
class="external-link-icon"
40+
(click)="$event.stopPropagation()"
41+
[matTooltip]="irTextLinkTooltip">
42+
<mat-icon>open_in_new</mat-icon>
43+
</a>
44+
</mat-panel-title>
45+
</mat-expansion-panel-header>
46+
47+
<div *ngIf="loaded" class="ir-text-content">
48+
<table>
49+
<thead>
50+
<tr>
51+
<th><pre class="line-number"></pre></th>
52+
<th><pre class="line-content"></pre></th>
53+
</tr>
54+
</thead>
55+
<tbody>
56+
<ng-container *ngIf="irText && irText.length > 0; else noLines">
57+
<tr
58+
*ngFor="let line of irTextLinesForDisplay; let lineIndex = index; trackBy: trackByIndex"
59+
[class.line-selected]="isFocusLine(line)">
60+
<td><pre class="line-number"><code>{{ lineIndex }}</code></pre></td>
61+
<td><pre class="line-content"><code [innerHTML]="line"></code></pre></td>
62+
</tr>
63+
</ng-container>
64+
65+
<ng-template #noLines>
66+
<tr>
67+
<td colspan="2">There are no lines to display.</td>
68+
</tr>
69+
</ng-template>
70+
</tbody>
71+
</table>
72+
</div>
73+
74+
<div *ngIf="!loaded">Loading...</div>
75+
</mat-expansion-panel>
76+
</ng-container>
77+
</div>
78+
</div>
79+
80+
<ng-template #noProgramId>
81+
<message
82+
title="IR Text Not Found"
83+
content="Please select an HLO operation with program ID info.">
84+
</message>
85+
</ng-template>

‎frontend/app/components/source_mapper/source_mapper.scss‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
@import 'frontend/app/styles/common';
2+
3+
.source-mapper .text-ir-header {
4+
padding: 2px 5px;
5+
background-color: #ccc;
6+
border-radius: 0;
7+
min-height: 20px;
8+
max-height: 20px;
9+
font-family: $code-font-family;
10+
white-space: nowrap;
11+
}
12+
13+
.source-mapper .text-ir-header-title{
14+
display: flex;
15+
align-items: center;
16+
gap: 10px;
17+
}
18+
19+
.ir-text-content .line-number {
20+
flex-shrink: 0; // Don't let it shrink
21+
padding: 0 5px; // Horizontal padding
22+
text-align: right; // Align numbers to the right
23+
color: #636d83; // A slightly lighter gray than the code text
24+
user-select: none; // Prevent selection of line numbers
25+
font-size: 0.9em;
26+
}
27+
28+
.ir-text-content .line-content {
29+
padding: 0 0 0 2px; // Distance between the line number and the text
30+
margin: 0;
31+
}
32+
33+
.source-mapper {
34+
display: flex;
35+
flex-direction: row;
36+
gap: 10px;
37+
}
38+
39+
.ir-text-container {
40+
width: 50%;
41+
}
42+
43+
.stack-trace-snippet-container {
44+
width: 50%;
45+
}
46+
47+
.ir-text-header:not(.mat-expanded):hover {
48+
background-color: #ccc;
49+
}
50+
51+
.ir-text-header {
52+
padding: 2px 5px;
53+
background-color: #ccc;
54+
border-radius: 0;
55+
min-height: 20px;
56+
max-height: 20px;
57+
font-family: $code-font-family;
58+
white-space: nowrap;
59+
}
60+
61+
.ir-text-header .external-link-icon {
62+
margin-left: auto; // Icon to the right
63+
color: #0000008f; // Darker than its backgrond
64+
padding: 0;
65+
}
66+
67+
.source-file-select, .ir-type-select {
68+
width: 100%;
69+
}
70+
71+
:host ::ng-deep .ir-text-panel .mat-expansion-panel-body {
72+
padding: 0 0 0 2px; // Distance between the panel and the content start
73+
margin: 0;
74+
white-space: nowrap;
75+
overflow-x: auto; // Horizontal scroll if needed
76+
}
77+
78+
.ir-text-content .line-selected {
79+
background-color: #fff6e6;
80+
}
81+
82+
mat-progress-bar {
83+
width: 80px; // Example fixed width
84+
flex-shrink: 0; // Prevent it from shrinking too much
85+
}

0 commit comments

Comments
 (0)