Fine running hlo op profile UI

- Added tooltip to the "Group by Category" and "Order by wasted time" toggles, so users will know what the action means - Updated controller's label and tooltip, basically group them into 2 category: data display rule, data generation rule. - Added tooltip to explain the definition/meanings of metrics on the op table header (Wasted, HBM fraction, name, flops bandwidth util, hbm bandwidth util) - adjusted the op table style (convert header and cell styles into the hlo op common stylesheet to make a single source and dedup) - other nit code cleanups (remove trivial redundant typings, variable renaming..etc) PiperOrigin-RevId: 569344945
tensorflow · Oct 3, 2023 · 2b7c984 · 2b7c984
1 parent 3338633
commit 2b7c984
Show file tree

Hide file tree

Showing 10 changed files with 164 additions and 165 deletions.
diff --git a/frontend/app/components/op_profile/op_profile.ng.html b/frontend/app/components/op_profile/op_profile.ng.html
@@ -21,47 +21,50 @@
     </div>
   </div>
   <div class="control-container">
-    <div class="control" [hidden]="!hasTwoProfiles">
-      <div class="control-title">By category</div>
-      <mat-slide-toggle [checked]="isByCategory" (toggleChange)="updateToggle()"></mat-slide-toggle>
+    <div class="control" [hidden]="!hasMultiModules">
+      <div class="control-title">Group by Category</div>
+      <mat-slide-toggle [checked]="isByCategory" (toggleChange)="updateToggle()" matTooltip="Group by xla module by default."></mat-slide-toggle>
     </div>
     <div class="control">
-      <div class="control-title">Exclude Idle</div>
-      <mat-slide-toggle [checked]="excludeIdle" (toggleChange)="updateExcludeIdle()"></mat-slide-toggle>
-    </div>
-    <div class="ops-control">
-      <div class="ops-control-title">
-        Show top&nbsp;
-        <mat-form-field class="children-count-input" appearance="outline">
-          <mat-label>#</mat-label>
-          <input
-                 matInput
-                 type="number"
-                 matTooltip="10 ~ 100 with increment of 10, numbers will be rounded"
-                 [min]="10"
-                 [max]="100"
-                 [step]="10"
-                 [value]="childrenCount"
-                 (change)="updateChildrenCount($event.target.value)" />
-        </mat-form-field>
-        &nbsp;ops
+      <div class="control-title">
+        Order by wasted time
+        <mat-icon
+          class="tooltip-icon"
+          matTooltip="Wasted time is defined by RuntimeFraction *(1 - max(FlopsUtilization, MemoryBandwidthUtilization))."
+          matTooltipPosition="above">
+          info
+        </mat-icon>
       </div>
+      <mat-slide-toggle [checked]="byWasted" (toggleChange)="updateByWasted()" matTooltip="Order by Time% by default."></mat-slide-toggle>
     </div>
     <div class="control">
-      <div class="control-title">Sort by wasted time
+      <div class="control-title">Top 90%
         <mat-icon
-                  class="tooltip-icon"
-                  matTooltip="Wasted time is defined by RuntimeFraction *
-                              (1 - max(FlopsUtilization, MemoryBandwidthUtilization))."
-                  matTooltipPosition="above">
-              info
+          class="tooltip-icon"
+          matTooltip="Ops will be capped by the limit."
+          matTooltipPosition="above">
+          info
         </mat-icon>
       </div>
-      <mat-slide-toggle [checked]="byWasted" (toggleChange)="updateByWasted()"></mat-slide-toggle>
+      <mat-slide-toggle [checked]="showP90" (toggleChange)="updateShowP90()"></mat-slide-toggle>
     </div>
     <div class="control">
-      <div class="control-title">Top 90%</div>
-      <mat-slide-toggle [checked]="showP90" (toggleChange)="updateShowP90()"></mat-slide-toggle>
+      <div class="control-title">Exclude Idle</div>
+      <mat-slide-toggle [checked]="excludeIdle" (toggleChange)="updateExcludeIdle()"></mat-slide-toggle>
+    </div>
+    <div class="control">
+      <mat-form-field class="children-count-input" appearance="outline">
+        <mat-label>Ops Limit</mat-label>
+        <input
+              matInput
+              type="number"
+              [min]="10"
+              [max]="100"
+              [step]="10"
+              [value]="childrenCount"
+              matTooltip="Number of ops to show per layer. 10 ~ 100 with increment of 10."
+              (change)="updateChildrenCount($event.target.value)" />
+      </mat-form-field>
     </div>
   </div>
 </div>

diff --git a/frontend/app/components/op_profile/op_profile_base.ts b/frontend/app/components/op_profile/op_profile_base.ts
@@ -8,18 +8,13 @@ export class OpProfileBase {
   profile: ProfileOrNull = null;
   rootNode?: Node;
   data = new OpProfileData();
-  hasTwoProfiles: boolean = false;
-  isByCategory: boolean = false;
-  excludeIdle: boolean = true;
-  byWasted: boolean = false;
-  showP90: boolean = false;
-  childrenCount: number = 10;
-  deviceType: string = 'TPU';
-
-  private hasMultipleProfiles(): boolean {
-    return !!this.profile && !!this.profile.byCategory &&
-        !!this.profile.byProgram;
-  }
+  hasMultiModules = false;
+  isByCategory = false;
+  excludeIdle = true;
+  byWasted = false;
+  showP90 = false;
+  childrenCount = 10;
+  deviceType = 'TPU';
 
   private updateRoot() {
     if (!this.profile) {
@@ -28,15 +23,15 @@ export class OpProfileBase {
     }
 
     if (this.excludeIdle) {
-      if (!this.hasTwoProfiles) {
+      if (!this.hasMultiModules) {
         this.rootNode = this.profile.byCategoryExcludeIdle ||
             this.profile.byProgramExcludeIdle;
       } else {
         this.rootNode = this.isByCategory ? this.profile.byCategoryExcludeIdle :
                                             this.profile.byProgramExcludeIdle;
       }
     } else {
-      if (!this.hasTwoProfiles) {
+      if (!this.hasMultiModules) {
         this.rootNode = this.profile.byCategory || this.profile.byProgram;
       } else {
         this.rootNode = this.isByCategory ? this.profile.byCategory :
@@ -49,7 +44,8 @@ export class OpProfileBase {
 
   parseData(data: ProfileOrNull) {
     this.profile = data;
-    this.hasTwoProfiles = this.hasMultipleProfiles();
+    this.hasMultiModules =
+        !!this.profile && !!this.profile.byCategory && !!this.profile.byProgram;
     this.isByCategory = false;
     this.childrenCount = 10;
     this.updateRoot();

diff --git a/frontend/app/components/op_profile/op_profile_common.scss b/frontend/app/components/op_profile/op_profile_common.scss
@@ -20,7 +20,7 @@
 }
 
 .control {
-  margin-right: 80px;
+  margin-right: 40px;
 }
 
 .ops-control {
@@ -52,3 +52,81 @@
   vertical-align: bottom;
   cursor: pointer;
 }
+
+.time-header,
+.wasted-header,
+.hbmFraction-header,
+.name-header,
+.provenance-header,
+.utilization-hader,
+.hbmUtilization-header,
+.utilization-header,
+.hbmUtilization-header,
+.time,
+.wasted,
+.hbmFraction,
+.name,
+.provenance,
+.utilization,
+.hbmUtilization,
+.utilization,
+.hbmUtilization {
+  line-height: 20px;
+  width: 6%;
+  min-width: 60px;
+  text-align: center;
+}
+
+.time,
+.wasted,
+.hbmFraction,
+.name,
+.provenance,
+.utilization,
+.hbmUtilization {
+  font-size: smaller;
+}
+
+.name-header,
+.name {
+  display: inline-block;
+  width: 30%;
+  padding-left: 2em;
+  // Set word-break rule to make the arrow stick with text on narrow screen
+  word-break: break-all;
+}
+
+.name {
+  text-align: left;
+}
+
+.provenance-header,
+.provenance {
+  width: 20%;
+}
+
+.utilization-header,
+.utilization,
+.hbmUtilization-header,
+.hbmUtilization {
+  width: 60px;
+}
+
+.utilization-header,
+.hbmUtilization-header {
+  width: 76px; // 60px + circle 16px
+}
+
+.flame-color-circle,
+.hbm-flame-color-circle {
+  margin: 10px 20px 10px 10px;
+  width: 16px;
+  height: 16px;
+  border-radius: 8px;
+  text-align: left;
+}
+
+.disclosure {
+  display: inline-block;
+  width: 1em;
+}
diff --git a/frontend/app/components/op_profile/op_table/BUILD b/frontend/app/components/op_profile/op_table/BUILD
@@ -17,6 +17,7 @@ xprof_ng_module(
         "@npm//@angular/common",
         "@npm//@angular/core",
         "@npm//@ngrx/store",
+        "@org_xprof//frontend/app/common/angular:angular_material_tooltip",
         "@org_xprof//frontend/app/common/interfaces:op_profile_proto_defs",
         "@org_xprof//frontend/app/components/op_profile/op_table_entry",
         "@org_xprof//frontend/app/store",
@@ -27,4 +28,7 @@ sass_binary(
     name = "op_table_css",
     src = "op_table.scss",
     sourcemap = False,
+    deps = [
+        "@org_xprof//frontend/app/components/op_profile:op_profile_common",
+    ],
 )
diff --git a/frontend/app/components/op_profile/op_table/op_table.ng.html b/frontend/app/components/op_profile/op_table/op_table.ng.html
@@ -1,13 +1,13 @@
 <div class="header">
-  <span class="time">Time %</span>
-  <span class="wasted">Wasted %</span>
-  <span class="hbmFraction">HBM %</span>
-  <span class="name">Name</span>
-  <span class="provenance">TensorFlow Op</span>
-  <span class="utilization">FLOPS</span>
-  <span class="flame-color-circle"></span>
-  <span class="hbmUtilization">HBM</span>
-  <span class="hbm-flame-color-circle"></span>
+  <span class="time-header" matTooltip="Total percentage of the time spent by all the operations in that xla module or category.">Time %</span>
+  <span class="wasted-header" matTooltip="Wasted time is defined by RuntimeFraction *(1 - max(FlopsUtilization, MemoryBandwidthUtilization)).">Wasted %</span>
+  <span class="hbmFraction-header" matTooltip="HBM fraction is the raw hbm bytes accessed percentage of the xla module or category.">HBM %</span>
+  <span class="name-header" matTooltip="Name of the xla module, op category, or ops.">Name</span>
+  <span class="provenance-header" matTooltip="TensorFlow op name associated with the HLO operation.">TensorFlow Op</span>
+  <span class="utilization-header" matTooltip="FLOPS bandwidth utilization normalized to the xla module or category scale.">FLOPS</span>
+  <span class="flame-color-circle-header"></span>
+  <span class="hbmUtilization-header" matTooltip="HBM memory bandwidth utilization.">HBM</span>
+  <span class="hbm-flame-color-circle-header"></span>
 </div>
 
 <op-table-entry

diff --git a/frontend/app/components/op_profile/op_table/op_table.scss b/frontend/app/components/op_profile/op_table/op_table.scss
@@ -1,5 +1,7 @@
 /** CSS for an op talbe view component. */
 
+@import 'frontend/app/components/op_profile/op_profile_common';
+
 .header {
   display: flex;
   align-items: center;
@@ -17,31 +19,3 @@
   flex-shrink: 0;
   box-sizing: border-box;
 }
-
-.time {
-  padding-left: 20px !important;
-  width: 80px;
-}
-
-.wasted, .utilization {
-  width: 60px;
-}
-
-.name {
-  display: inline-block;
-  min-width: 40%;
-  padding-left: 2em !important;
-}
-
-.provenance {
-  flex: 1 1 0 !important;
-}
-
-.utilization {
-  text-align: right;
-}
-
-.flame-color-circle {
-  margin: 0 20px 0 10px;
-  width: 16px;
-}
diff --git a/frontend/app/components/op_profile/op_table/op_table_module.ts b/frontend/app/components/op_profile/op_table/op_table_module.ts
@@ -1,12 +1,13 @@
 import {NgModule} from '@angular/core';
 import {OpTableEntryModule} from 'org_xprof/frontend/app/components/op_profile/op_table_entry/op_table_entry_module';
+import {MatTooltipModule} from '@angular/material/tooltip';
 
 import {OpTable} from './op_table';
 
 /** An op table view module. */
 @NgModule({
   declarations: [OpTable],
-  imports: [OpTableEntryModule],
+  imports: [OpTableEntryModule, MatTooltipModule],
   exports: [OpTable]
 })
 export class OpTableModule {

diff --git a/frontend/app/components/op_profile/op_table_entry/BUILD b/frontend/app/components/op_profile/op_table_entry/BUILD
@@ -28,6 +28,6 @@ sass_binary(
     src = "op_table_entry.scss",
     sourcemap = False,
     deps = [
-        "@org_xprof//frontend/app/styles:common",
+        "@org_xprof//frontend/app/components/op_profile:op_profile_common",
     ],
 )