overview page frontend code cleanup 1: performance_summary

PiperOrigin-RevId: 570555423
tensorflow · Oct 4, 2023 · b68d688 · b68d688
1 parent 206f547
commit b68d688
Show file tree

Hide file tree

Showing 12 changed files with 334 additions and 365 deletions.
diff --git a/frontend/app/common/interfaces/data_table.ts b/frontend/app/common/interfaces/data_table.ts
@@ -41,7 +41,7 @@ declare interface EmptyProperty {}
 
 /** The base interface for a genreal property object. */
 declare interface GeneralProperty {
-  [name: string]: string;
+  [key: string]: string;
 }
 
 /** The base interface for data table without perperty. */
@@ -61,27 +61,6 @@ export declare interface GeneralDataTable {
 /** The data table type for data table without perperty or null. */
 export type SimpleDataTableOrNull = SimpleDataTable|null;
 
-/* tslint:disable enforce-name-casing */
-/** The base interface for a property of general analysis. */
-declare interface GeneralAnalysisProperty {
-  device_idle_time_percent?: string;
-  device_duty_cycle_percent?: string;
-  flop_rate_utilization_relative_to_roofline?: string;
-  host_idle_time_percent?: string;
-  memory_bw_utilization_relative_to_hw_limit?: string;
-  mxu_utilization_percent?: string;
-  host_tf_op_percent?: string;
-  device_tf_op_percent?: string;
-  host_op_time_eager_percent?: string;
-  device_op_time_eager_percent?: string;
-  device_compute_16bit_percent?: string;
-  device_compute_32bit_percent?: string;
-  remark_color?: string;
-  remark_text?: string;
-  power_metrics?: string;
-}
-/* tslint:enable */
-
 /* tslint:disable enforce-name-casing */
 /** The base interface for properties of meta host-op table. */
 declare interface MetaHostOpTableProperty {
@@ -123,56 +102,25 @@ export type HostOpTableOrNull = HostOpTable|null;
 export declare interface GeneralAnalysis {
   cols?: DataTableColumn[];
   rows?: DataTableRow[];
-  p?: GeneralAnalysisProperty;
+  // Make the property k-v pair more general, note:
+  // (1) value is always string
+  // (2) Frontend should be responsible of correct key reference
+  // and always have a default value fallback
+  p?: GeneralProperty;
 }
 
 /** The data table type for a general analysis or null. */
 export type GeneralAnalysisOrNull = GeneralAnalysis|null;
 
-/* tslint:disable enforce-name-casing */
-/** The base interface for a property of input pipeline analysis. */
-export declare interface InputPipelineAnalysisProperty {
-  hardware_type?: string;
-  steptime_ms_average?: string;
-  steptime_ms_standard_deviation?: string;
-  steptime_ms_minimum?: string;
-  steptime_ms_maximum?: string;
-  infeed_percent_average?: string;
-  infeed_percent_standard_deviation?: string;
-  infeed_percent_minimum?: string;
-  infeed_percent_maximum?: string;
-  idle_ms_average?: string;
-  input_ms_average?: string;
-  compute_ms_average?: string;
-  input_conclusion?: string;
-  output_conclusion?: string;
-  summary_nextstep?: string;
-  other_time_ms_avg?: string;
-  other_time_ms_sdv?: string;
-  compile_time_ms_avg?: string;
-  compile_time_ms_sdv?: string;
-  outfeed_time_ms_avg?: string;
-  outfeed_time_ms_sdv?: string;
-  infeed_time_ms_avg?: string;
-  infeed_time_ms_sdv?: string;
-  kernel_launch_time_ms_avg?: string;
-  kernel_launch_time_ms_sdv?: string;
-  host_compute_time_ms_avg?: string;
-  host_compute_time_ms_sdv?: string;
-  device_collectives_time_ms_avg?: string;
-  device_collectives_time_ms_sdv?: string;
-  device_to_device_time_ms_avg?: string;
-  device_to_device_time_ms_sdv?: string;
-  device_compute_time_ms_avg?: string;
-  device_compute_time_ms_sdv?: string;
-}
-/* tslint:enable */
-
 /** The base interface for an input pipeline analysis. */
 export declare interface InputPipelineAnalysis {
   cols?: DataTableColumn[];
   rows?: DataTableRow[];
-  p?: InputPipelineAnalysisProperty;
+  // Make the property k-v pair more general, note:
+  // (1) value is always string
+  // (2) Frontend should be responsible of correct key reference
+  // and always have a default value fallback
+  p?: GeneralProperty;
 }
 
 /** The data table type for an input pipeline analysis or null. */
@@ -197,6 +145,7 @@ declare interface RunEnvironmentProperty {
   device_core_count?: string;
   device_type?: string;
   is_training?: string;
+  tpu_core_count?: string;
 }
 /* tslint:enable */
 

diff --git a/frontend/app/common/interfaces/summary_info.ts b/frontend/app/common/interfaces/summary_info.ts
@@ -1,10 +1,43 @@
+import {DataTableCell} from './data_table';
+
 /** The base interface for a information of performance summary view. */
 export interface SummaryInfo {
-  type?: string;
+  level?: number;  // Top level metric is level 1, use to control styles
   title: string;
   descriptions?: string[];
   tooltip?: string;
   value?: string;
   valueColor?: string;
   propertyValues?: string[];
+  // Nested child metrics info
+  childrenInfo?: SummaryInfo[];
+}
+
+/** freeform k-v pair property interface */
+export interface GeneralProps {
+  [key: string]: string;
+}
+
+/**
+ * Interface for performance summary configuration object.
+ * Will be translated into SummaryInfo object.
+ */
+export interface SummaryInfoConfig {
+  title: string;
+  tooltip?: string;
+  // goodMetric equals true means the higher the better
+  goodMetric?: boolean;
+  description?: string;
+  valueKey?: string;
+  sdvKey?: string;
+  childrenInfoConfig?: SummaryInfoConfig[];
+  // custom callback to read value
+  // valueKey and getValue are mutual exclusive
+  getValue?: (arg: DataTableCell[]) => string;
+  // custom callback function to get a nested metrics list
+  getChildValues?: (arg: GeneralProps|DataTableCell[]) => string[];
+  unit?: string;
+  valueColor?: string;
+  trainingOnly?: boolean;
+  inferenceOnly?: boolean;
 }
diff --git a/frontend/app/components/input_pipeline/analysis_summary/analysis_summary.ts b/frontend/app/components/input_pipeline/analysis_summary/analysis_summary.ts
@@ -14,9 +14,9 @@ export class AnalysisSummary {
   set deviceAnalysis(analysis: InputPipelineDeviceAnalysis|null) {
     analysis = analysis || {};
     analysis.p = analysis.p || {};
-    this.inputConclusion = analysis.p.input_conclusion || '';
+    this.inputConclusion = analysis.p['input_conclusion'] || '';
     this.summaryNextstep =
-      this.replaceSectionName(analysis.p.summary_nextstep || '');
+        this.replaceSectionName(analysis.p['summary_nextstep'] || '');
     this.summaryColor = 'green';
     if (this.inputConclusion.includes('HIGHLY')) {
       this.summaryColor = 'red';

diff --git a/.../app/components/input_pipeline/device_side_analysis_detail/device_side_analysis_detail.ts b/.../app/components/input_pipeline/device_side_analysis_detail/device_side_analysis_detail.ts
@@ -70,18 +70,19 @@ export class DeviceSideAnalysisDetail implements OnChanges {
     if (!analysis.rows || analysis.rows.length === 0) {
       return;
     }
-    this.isTpu = (analysis.p.hardware_type || 'TPU') === 'TPU';
-    this.steptimeMsMetrics.average = analysis.p.steptime_ms_average || '';
-    this.steptimeMsMetrics.max = analysis.p.steptime_ms_maximum || '';
-    this.steptimeMsMetrics.min = analysis.p.steptime_ms_minimum || '';
+    this.isTpu = (analysis.p['hardware_type'] || 'TPU') === 'TPU';
+    this.steptimeMsMetrics.average = analysis.p['steptime_ms_average'] || '';
+    this.steptimeMsMetrics.max = analysis.p['steptime_ms_maximum'] || '';
+    this.steptimeMsMetrics.min = analysis.p['steptime_ms_minimum'] || '';
     this.steptimeMsMetrics.stddev =
-        analysis.p.steptime_ms_standard_deviation || '';
+        analysis.p['steptime_ms_standard_deviation'] || '';
 
-    this.infeedPercentMetrics.average = analysis.p.infeed_percent_average || '';
-    this.infeedPercentMetrics.max = analysis.p.infeed_percent_maximum || '';
-    this.infeedPercentMetrics.min = analysis.p.infeed_percent_minimum || '';
+    this.infeedPercentMetrics.average =
+        analysis.p['infeed_percent_average'] || '';
+    this.infeedPercentMetrics.max = analysis.p['infeed_percent_maximum'] || '';
+    this.infeedPercentMetrics.min = analysis.p['infeed_percent_minimum'] || '';
     this.infeedPercentMetrics.stddev =
-        analysis.p.infeed_percent_standard_deviation || '';
+        analysis.p['infeed_percent_standard_deviation'] || '';
   }
 
   /** The default column ids. */

diff --git a/frontend/app/components/overview/overview.ng.html b/frontend/app/components/overview/overview.ng.html
@@ -16,8 +16,7 @@
     <div class="left-column">
       <performance-summary
           [generalAnalysis]="generalAnalysis"
-          [inputPipelineAnalysis]="inputPipelineAnalysis"
-          [propertyValues]="averageStepTimePropertyValues">
+          [inputPipelineAnalysis]="inputPipelineAnalysis">
       </performance-summary>
       <run-environment-view [runEnvironment]="runEnvironment"></run-environment-view>
     </div>

diff --git a/frontend/app/components/overview/overview.ts b/frontend/app/components/overview/overview.ts
@@ -29,17 +29,6 @@ export class Overview extends OverviewCommon implements OnDestroy {
     });
   }
 
-  parseAverageStepTimeDetail() {
-    const p = ((this.inputPipelineAnalysis || {}).p || {});
-
-    this.averageStepTimePropertyValues.push(
-        `Idle: ${p.idle_ms_average || ''} ms`);
-    this.averageStepTimePropertyValues.push(
-        `Input: ${p.input_ms_average || ''} ms`);
-    this.averageStepTimePropertyValues.push(
-        `Compute: ${p.compute_ms_average || ''} ms`);
-  }
-
   update(event: NavigationEvent) {
     const run = event.run || '';
     const tag = event.tag || 'overview_page';
@@ -64,7 +53,6 @@ export class Overview extends OverviewCommon implements OnDestroy {
 
           /** Transfer data to Overview DataTable type */
           this.parseOverviewData((data || []) as OverviewDataTuple);
-          this.parseAverageStepTimeDetail();
         });
   }
 

diff --git a/frontend/app/components/overview/performance_summary/performance_summary.ng.html b/frontend/app/components/overview/performance_summary/performance_summary.ng.html
@@ -1,39 +1,7 @@
  <mat-card>
   <mat-card-title>{{title}}</mat-card-title>
   <mat-card-content>
-    <ng-template *ngTemplateOutlet="summaryInfo; context: {$implicit: summaryInfoBefore}">
-    </ng-template>
-
-    <div [hidden]="!isTpu">
-      <div class="item-container">
-        <table>
-          <tr>
-            <td>
-              <b>FLOPS Utilization</b>
-              <div class="description">
-                (higher is better,
-                <span
-                  class="flops-utilization-tooltip-target"
-                  [matTooltip]="flopsUtilizationTooltipMessage"
-                  matTooltipPosition="above">
-                  why two numbers?
-                </span>
-                )
-              </div>
-            </td>
-          </tr>
-        </table>
-      </div>
-      <ul>
-        <li class="primary-content">Utilization of TPU Matrix Units: {{mxuUtilizationPercent}}</li>
-        <li class="primary-content">
-          Compared to Program's Optimal FLOPS: {{flopRateUtilizationRelativeToRoofline}}
-          <ng-content></ng-content>
-        </li>
-      </ul>
-    </div>
-
-    <ng-template *ngTemplateOutlet="summaryInfo; context: {$implicit: summaryInfoAfter}">
+    <ng-template *ngTemplateOutlet="summaryInfo; context: {$implicit: summaryInfoCombined}">
     </ng-template>
 
     <div class="item-container">
@@ -47,37 +15,33 @@
   <div *ngFor="let info of infoArray">
     <div class="item-container">
       <table>
+        <!-- Top level metrics row -->
         <tr>
           <td>
-            <div *ngIf="info.type !== 'list'">
-              <ng-template *ngTemplateOutlet="titleAndTooltip; context: {$implicit: info}">
-              </ng-template>
-            </div>
-            <ul *ngIf="info.type === 'list'">
-              <li>
-                <ng-template *ngTemplateOutlet="titleAndTooltip; context: {$implicit: info}">
-                </ng-template>
-              </li>
-            </ul>
-            <div *ngFor="let description of info.descriptions"
-                 [ngClass]="{'item-description': info.type == 'list', 'description': true}">
-              {{description}}
-            </div>
+            <ng-template *ngTemplateOutlet="titleTooltipDescription; context: {$implicit: info}"></ng-template>
           </td>
           <td *ngIf="info.value" class="item-value">
             <div [style.color]="info.valueColor">{{info.value}}</div>
           </td>
         </tr>
+        <!-- Nested child metrics rows -->
+        <tr *ngFor="let cInfo of info.childrenInfo">
+          <td><ng-template *ngTemplateOutlet="titleTooltipDescription; context: {$implicit: cInfo}"></ng-template></td>
+          <td *ngIf="cInfo.value" class="child-item-value primary-content">
+            <div [style.color]="cInfo.valueColor">{{cInfo.value}}</div>
+          </td>
+        </tr>
+        <tr *ngFor="let value of info.propertyValues">
+          <td *ngIf="value" class="primary-content" [innerHtml]="value"></td>
+        </tr>
       </table>
     </div>
-    <ul *ngIf="info.propertyValues?.length">
-      <li class="primary-content" *ngFor="let value of info.propertyValues">{{value}}</li>
-    </ul>
   </div>
 </ng-template>
 
-<ng-template #titleAndTooltip let-info>
-    <b>{{info.title}}</b>
+<ng-template #titleTooltipDescription let-info>
+    <b *ngIf="info.level === 1">{{info.title}}</b>
+    <span *ngIf="info.level !== 1" class="primary-content">{{info.title}}</span>
     <span *ngIf="info.tooltip" class="tooltip-icon-container">
       <mat-icon
         class="tooltip-icon"
@@ -86,4 +50,8 @@
         info
       </mat-icon>
     </span>
+    <div *ngFor="let description of info.descriptions"
+        [ngClass]="{'description': true}">
+    <span [innerHtml]="description"></span>
+    </div>
 </ng-template>
diff --git a/frontend/app/components/overview/performance_summary/performance_summary.scss b/frontend/app/components/overview/performance_summary/performance_summary.scss
@@ -49,14 +49,20 @@ table ul {
   padding: 0;
 }
 
-.item-value {
+.item-value,
+.child-item-value {
   padding-left: 8px;
   min-width: 80px;
   width: 20%;
   font-size: 18px;
   font-weight: 500;
 }
 
+.child-item-value {
+  font-size: 16px;
+  font-weight: unset;
+}
+
 .item-description {
   margin-left: 20px;
 }