Skip to content

Commit

Permalink
Merge RecommendatationResultView with its common class
Browse files Browse the repository at this point in the history
PiperOrigin-RevId: 720756330
  • Loading branch information
zzzaries authored and copybara-github committed Jan 29, 2025
1 parent 0584655 commit 4ba98fb
Show file tree
Hide file tree
Showing 20 changed files with 363 additions and 241 deletions.
14 changes: 14 additions & 0 deletions frontend/app/common/utils/utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -398,3 +398,17 @@ export function addDataToDataInfo(dataInfo: ChartDataInfo, data: any) {
data: isOneOfDataTableUnion ? (data as DataTableUnion) : null,
};
}

/**
* Returns the string value of a column in a gviz.DataTableRow
*/
export function getStringColumnValue(
row: google.visualization.DataObjectCell[],
columnIndex: number,
): string {
row = row || [];
if (columnIndex < 0 || columnIndex >= row.length) {
return '';
}
return String((row[columnIndex] || {}).v || '');
}
38 changes: 31 additions & 7 deletions frontend/app/components/overview_page/BUILD
Original file line number Diff line number Diff line change
Expand Up @@ -4,21 +4,18 @@ load("//defs:defs.bzl", "xprof_ng_module")
package(default_visibility = ["//frontend:internal"])

xprof_ng_module(
name = "overview_page",
name = "overview_page_base",
srcs = [
"overview_page.ts",
"overview_page_common.ts",
"overview_page_module.ts",
"overview_page_base_module.ts",
],
assets = [
":overview_page_css",
"overview_page.ng.html",
"overview_page_base.ng.html",
],
# strict_templates = False,
deps = [
"@npm//@angular/common",
"@npm//@angular/core",
"@npm//@angular/router",
"@npm//@ngrx/store",
"@npm//@types/google.visualization",
"@npm//rxjs",
Expand All @@ -28,7 +25,6 @@ xprof_ng_module(
"@org_xprof//frontend/app/components/overview_page/inference_latency_chart",
"@org_xprof//frontend/app/components/overview_page/normalized_accelerator_performance_view",
"@org_xprof//frontend/app/components/overview_page/performance_summary",
"@org_xprof//frontend/app/components/overview_page/recommendation_result_view",
"@org_xprof//frontend/app/components/overview_page/run_environment_view",
"@org_xprof//frontend/app/components/overview_page/step_time_graph",
"@org_xprof//frontend/app/components/overview_page/top_ops_table",
Expand All @@ -37,6 +33,34 @@ xprof_ng_module(
],
)

xprof_ng_module(
name = "overview_page",
srcs = [
"overview_page.ts",
"overview_page_common.ts",
"overview_page_module.ts",
],
assets = [
":overview_page_css",
"overview_page.ng.html",
],
# strict_templates = False,
deps = [
":overview_page_base",
"@npm//@angular/common",
"@npm//@angular/core",
"@npm//@angular/router",
"@npm//@ngrx/store",
"@npm//@types/google.visualization",
"@npm//rxjs",
"@org_xprof//frontend/app/common/interfaces",
"@org_xprof//frontend/app/common/utils",
"@org_xprof//frontend/app/components/overview_page/recommendation_result_view",
"@org_xprof//frontend/app/services/data_service",
"@org_xprof//frontend/app/store",
],
)

sass_binary(
name = "overview_page_css",
src = "overview_page.scss",
Expand Down
64 changes: 15 additions & 49 deletions frontend/app/components/overview_page/overview_page.ng.html
Original file line number Diff line number Diff line change
@@ -1,49 +1,15 @@
<!--
The Overview Page is a view within the tf-profile-dashboard.
It is the first page that users would look at in order to understand
the overall performance of their TPU workloads. The page has five
sections of results:
(1) Performance summary
(2) Step-time graph
(3) Top 10 TensorFlow Operations executed on TPU
(4) Run environment
(5) Recommendation for next steps
-->

<div>
<diagnostics-view [diagnostics]="diagnostics"></diagnostics-view>
<div class="container">
<div class="left-column">
<performance-summary
[generalAnalysis]="generalAnalysis"
[inputPipelineAnalysis]="inputPipelineAnalysis"
[inferenceLatencyData]="inferenceLatencyData"
[isInference]="hasInferenceLatencyData()">
</performance-summary>
<run-environment-view [runEnvironment]="runEnvironment">
<div profileDetail>
<p [hidden]="!profileStartTime">
<span class="key-label">Profile start time (local)</span>:
<span>{{profileStartTime}}</span>
</p>
</div>
</run-environment-view>
</div>

<div class="right-column">
<step-time-graph id="step-time-graph" [inputPipelineAnalysis]="inputPipelineAnalysis" *ngIf="inputPipelineAnalysis?.rows?.length"></step-time-graph>
<inference-latency-chart
[inferenceLatencyData]="inferenceLatencyData" *ngIf="hasInferenceLatencyData()">
</inference-latency-chart>
<recommendation-result-view [recommendationResult]="recommendationResult">
</recommendation-result-view>
</div>

<div class="full-column">
<top-ops-table
[generalAnalysis]="generalAnalysis"
[inputPipelineAnalysis]="inputPipelineAnalysis">
</top-ops-table>
</div>
</div>
</div>
<overview-page-base
[diagnostics]="diagnostics"
[generalAnalysis]="generalAnalysis"
[inputPipelineAnalysis]="inputPipelineAnalysis"
[recommendationResult]="recommendationResult"
[runEnvironment]="runEnvironment"
[inferenceLatencyData]="inferenceLatencyData"
>
<recommendation-result-view
recommendationResultView
[isOss]="true"
[statementInfo]="recommendationStatementInfo"
[recommendationResult]="recommendationResult">
</recommendation-result-view>
</overview-page-base>
17 changes: 17 additions & 0 deletions frontend/app/components/overview_page/overview_page.scss
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@

:host {
display: block;
padding-top: 10px;
}

.container {
Expand Down Expand Up @@ -41,3 +42,19 @@
width: 100%;
}
}

.key-label {
font-weight: 500;
}

.value-label {
word-break: break-all;
}

.job-information-level1 {
padding-left: 20px;
}

.job-information-level2 {
padding-left: 40px;
}
60 changes: 28 additions & 32 deletions frontend/app/components/overview_page/overview_page.ts
Original file line number Diff line number Diff line change
@@ -1,71 +1,67 @@
import {Component, OnDestroy} from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import {ActivatedRoute, Params} from '@angular/router';
import {Store} from '@ngrx/store';
import {OverviewPageDataTuple} from 'org_xprof/frontend/app/common/interfaces/data_table';
import {NavigationEvent} from 'org_xprof/frontend/app/common/interfaces/navigation_event';
import {setLoadingState} from 'org_xprof/frontend/app/common/utils/utils';
import {DataService} from 'org_xprof/frontend/app/services/data_service/data_service';
import {setLoadingStateAction} from 'org_xprof/frontend/app/store/actions';
import {ReplaySubject} from 'rxjs';
import {takeUntil} from 'rxjs/operators';

import {OverviewPageCommon} from './overview_page_common';

const RECOMMENDATION_STATEMENT_INFO = [
{id: 'outside_compilation_statement_html'},
{id: 'eager_statement_html'},
{id: 'tf_function_statement_html'},
{id: 'statement'},
{id: 'device_collectives_statement'},
{id: 'kernel_launch_statement'},
{id: 'all_other_statement'},
{id: 'precision_statement'},
];

/** An overview page component. */
@Component({
standalone: false,
selector: 'overview_page',
templateUrl: './overview_page.ng.html',
styleUrls: ['./overview_page.css']
})
export class OverviewPage extends OverviewPageCommon implements OnDestroy {
run = '';
tag = '';
host = '';
recommendationStatementInfo = RECOMMENDATION_STATEMENT_INFO;
/** Handles on-destroy Subject, used to unsubscribe. */
private readonly destroyed = new ReplaySubject<void>(1);

profileStartTime = '';

constructor(
route: ActivatedRoute, private readonly dataService: DataService,
private readonly store: Store<{}>) {
super();
route.params.pipe(takeUntil(this.destroyed)).subscribe((params) => {
this.update(params as NavigationEvent);
this.processQuery(params);
this.update();
});
}

update(event: NavigationEvent) {
const run = event.run || '';
const tag = event.tag || 'overview_page';
const host = event.host || '';
processQuery(params: Params) {
this.host = params['host'];
this.run = params['run'];
this.tag = params['tag'] || 'overview_page';
}

this.store.dispatch(setLoadingStateAction({
loadingState: {
loading: true,
message: 'Loading data',
}
}));
update() {
setLoadingState(true, this.store, 'Loading overview data');

this.dataService.getData(run, tag, host)
this.dataService.getData(this.run, this.tag, this.host)
.pipe(takeUntil(this.destroyed))
.subscribe((data) => {
this.store.dispatch(setLoadingStateAction({
loadingState: {
loading: false,
message: '',
}
}));

setLoadingState(false, this.store);
/** Transfer data to Overview Page DataTable type */
this.parseOverviewPageData((data || []) as OverviewPageDataTuple);
this.parseRunEnvironmentDetail();
});
}

parseRunEnvironmentDetail() {
const runEnvironmentProp: Record<string, string> =
(this.runEnvironment || {}).p || {};
this.profileStartTime = runEnvironmentProp['profile_start_time'] || '';
}

ngOnDestroy() {
// Unsubscribes all pending subscriptions.
this.destroyed.next();
Expand Down
58 changes: 58 additions & 0 deletions frontend/app/components/overview_page/overview_page_base.ng.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
<!--
The Overview Page is a view within the tf-profile-dashboard.
It is the first page that users would look at in order to understand
the overall performance of their TPU workloads. The page is divided into the left and right section:
Left section:
(1) Performance summary
(2) Run environment
Right section:
(1) Step-time graph for training / inference
(2) Top 10 TensorFlow Operations executed on TPU
(3) Recommendation for next steps
-->

<div>
<diagnostics-view [diagnostics]="diagnostics"></diagnostics-view>
<div class="container">
<div class="left-column">
<performance-summary
[isInference]="isInference || hasInferenceLatencyData"
[generalAnalysis]="generalAnalysis"
[inputPipelineAnalysis]="inputPipelineAnalysis"
[inferenceLatencyData]="inferenceLatencyData"
[class]="darkTheme ? 'dark-theme' : ''">
</performance-summary>
<ng-content select="[normalizedAcceleratorPerformanceView]"></ng-content>
<run-environment-view [runEnvironment]="runEnvironment" [class]="darkTheme ? 'dark-theme' : ''">
<ng-content taskCount select="[taskCount]"></ng-content>
<ng-content jobInformation select="[jobInformation]"></ng-content>
</run-environment-view>
</div>

<div class="right-column">
<ng-content select="[stepTimeGraphView]"></ng-content>
<step-time-graph
stepTimeGraphView
*ngIf="hasStepTimeGraphData"
id="step-time-graph"
[columnIds]="stepTimeGraphColumnIds"
[inputPipelineAnalysis]="inputPipelineAnalysis"
[class]="darkTheme ? 'dark-theme' : ''">
</step-time-graph>
<inference-latency-chart
*ngIf="hasInferenceLatencyData"
[inferenceLatencyData]="inferenceLatencyData"
[class]="darkTheme ? 'dark-theme' : ''">
</inference-latency-chart>
<top-ops-table
[initiallyExpanded]="false"
[generalAnalysis]="generalAnalysis"
[inputPipelineAnalysis]="inputPipelineAnalysis"
[class]="darkTheme ? 'dark-theme' : ''">
</top-ops-table>
<ng-content select="[recommendationResultView]"></ng-content>
<ng-content select="[sblView]"></ng-content>
<ng-content select="[tfDataView]"></ng-content>
</div>
</div>
</div>
58 changes: 58 additions & 0 deletions frontend/app/components/overview_page/overview_page_base_module.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
import {CommonModule} from '@angular/common';
import {Component, Input, NgModule} from '@angular/core';
import {type GeneralAnalysis, type InputPipelineAnalysis, type RecommendationResult, type RunEnvironment, type SimpleDataTable} from 'org_xprof/frontend/app/common/interfaces/data_table';
import {type Diagnostics} from 'org_xprof/frontend/app/common/interfaces/diagnostics';
import {DiagnosticsViewModule} from 'org_xprof/frontend/app/components/diagnostics_view/diagnostics_view_module';
import {InferenceLatencyChartModule} from 'org_xprof/frontend/app/components/overview_page/inference_latency_chart/inference_latency_chart_module';
import {NormalizedAcceleratorPerformanceViewModule} from 'org_xprof/frontend/app/components/overview_page/normalized_accelerator_performance_view/normalized_accelerator_performance_view_module';
import {PerformanceSummaryModule} from 'org_xprof/frontend/app/components/overview_page/performance_summary/performance_summary_module';
import {RunEnvironmentViewModule} from 'org_xprof/frontend/app/components/overview_page/run_environment_view/run_environment_view_module';
import {StepTimeGraphModule} from 'org_xprof/frontend/app/components/overview_page/step_time_graph/step_time_graph_module';
import {TopOpsTableModule} from 'org_xprof/frontend/app/components/overview_page/top_ops_table/top_ops_table_module';

/** A base overview page component. */
@Component({
standalone: false,
selector: 'overview-page-base',
templateUrl: './overview_page_base.ng.html',
styleUrls: ['./overview_page.css']
})
export class OverviewPageBase {
@Input() darkTheme = false;
/** Whether the it's an inference profile. */
@Input() isInference = false;
@Input() diagnostics: Diagnostics|null = null;
@Input() generalAnalysis: GeneralAnalysis|null = null;
@Input() inputPipelineAnalysis: InputPipelineAnalysis|null = null;
@Input() recommendationResult: RecommendationResult|null = null;
@Input() runEnvironment: RunEnvironment|null = null;
@Input() inferenceLatencyData: SimpleDataTable|null = null;
@Input() stepTimeGraphColumnIds: string[]|null = null;

get hasInferenceLatencyData(): boolean {
// Assumption: is inference session if hasInferenceLatencyData is not empty
return !!this.inferenceLatencyData?.rows?.length;
}

get hasStepTimeGraphData(): boolean {
return !!this.inputPipelineAnalysis?.rows?.length;
}
}

/** An overview page base module. */
@NgModule({
declarations: [OverviewPageBase],
imports: [
CommonModule,
DiagnosticsViewModule,
PerformanceSummaryModule,
RunEnvironmentViewModule,
StepTimeGraphModule,
TopOpsTableModule,
NormalizedAcceleratorPerformanceViewModule,
InferenceLatencyChartModule,
],
exports: [OverviewPageBase]
})
export class OverviewPageBaseModule {
}
Loading

0 comments on commit 4ba98fb

Please sign in to comment.