revamp on op_profile tool, no functional change.

PiperOrigin-RevId: 732212351

frontend/app/components/op_profile/BUILD

@@ -11,7 +11,7 @@ xprof_ng_module(
         "op_profile_module.ts",
     ],
     assets = [
-        ":op_profile_css",
+        ":op_profile_common_css",
         "op_profile.ng.html",
     ],
     # strict_templates = False,
@@ -21,40 +21,52 @@ xprof_ng_module(
         "@npm//@angular/router",
         "@npm//@ngrx/store",
         "@npm//rxjs",
-        "@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_input",
-        "@org_xprof//frontend/app/common/angular:angular_material_slide_toggle",
-        "@org_xprof//frontend/app/common/angular:angular_material_tooltip",
         "@org_xprof//frontend/app/common/interfaces",
-        "@org_xprof//frontend/app/components/op_profile/op_table",
+        "@org_xprof//frontend/app/common/utils",
+        "@org_xprof//frontend/app/components/op_profile/op_details",
         "@org_xprof//frontend/app/services/data_service",
         "@org_xprof//frontend/app/store",
     ],
 )
 
-ts_library(
+xprof_ng_module(
     name = "op_profile_base",
     srcs = [
         "op_profile_base.ts",
-        "op_profile_data.ts",
+        "op_profile_base_module.ts",
+    ],
+    assets = [
+        "op_profile_base.ng.html",
+        ":op_profile_common_css",
     ],
     deps = [
+        ":op_profile_data",
+        "@npm//@angular/core",
+        "@npm//@angular/router",
         "@npm//@ngrx/store",
+        "@npm//rxjs",
+        "@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_input",
+        "@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/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/services/data_service_v2:data_service_v2_interface",
         "@org_xprof//frontend/app/store",
     ],
 )
 
 sass_binary(
-    name = "op_profile_css",
-    src = "op_profile.scss",
+    name = "op_profile_common_css",
+    src = "op_profile_common.scss",
     # stack = False,
     sourcemap = False,
     deps = [
-        ":op_profile_common",
+        "@org_xprof//frontend/app/styles:common",
     ],
 )
 
@@ -65,3 +77,14 @@ sass_library(
         "@org_xprof//frontend/app/styles:common",
     ],
 )
+
+ts_library(
+    name = "op_profile_data",
+    srcs = [
+        "op_profile_data.ts",
+    ],
+    deps = [
+        "@org_xprof//frontend/app/common/interfaces:op_profile_proto_defs",
+        "@org_xprof//frontend/app/common/utils",
+    ],
+)

frontend/app/components/op_profile/op_details/BUILD

@@ -26,6 +26,7 @@ xprof_ng_module(
         "@org_xprof//frontend/app/common/interfaces:op_profile_proto_defs",
         "@org_xprof//frontend/app/common/utils",
         "@org_xprof//frontend/app/services/communication_service",
+        "@org_xprof//frontend/app/services/data_service_v2:data_service_v2_interface",
         "@org_xprof//frontend/app/store",
     ],
 )

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

@@ -12,7 +12,7 @@
       </div>
       <div class="info-content">
         <div class="info" id="graph-viewer-link" [hidden]="!hasValidGraphViewerLink()">
-          <a [href]="getGraphViewerLink()" target="_blank" style="text-decoration:none;">
+          <a [href]="getGraphViewerLinkWrapper()" target="_blank" style="text-decoration:none;">
             <button
               mat-stroked-button
               extended
@@ -25,7 +25,7 @@
             </button>
           </a>
         </div>
-        <div class="info" id="graph-viewer-link" [hidden]="isOss || !isCustomCall">
+        <div class="info" id="custom-call-text-link" [hidden]="isOss || !isCustomCall">
           <a [href]="getCustomCallTextLink()" target="_blank" style="text-decoration:none;">
             <button
               mat-stroked-button
@@ -152,8 +152,9 @@
           <div class="title"> Hardware Computation Size:</div>
           <code class="expression">{{computationPrimitiveSize}}</code>
         </div>
-        <div class="warning" [hidden]="!showUtilizationWarning">
-          <p>Utilization may have been capped at 100% as accurate bandwidth could not be determined.</p><p [hidden]="isOss">See <a href="https://b.corp.google.com/issues/329965643">b/329965643</a></p>
+        <div selector="[utilWarning]" class="warning" [hidden]="!showUtilizationWarning">
+          <p>Utilization may have been capped at 100% as accurate bandwidth could not be determined.</p>
+          <ng-content select="[utilWarningBug]"></ng-content>
         </div>
       </div>
     </mat-card-content>

frontend/app/components/op_profile/op_details/op_details.ts

@@ -1,8 +1,9 @@
-import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {Component, EventEmitter, inject, Input, Output} from '@angular/core';
 import {Store} from '@ngrx/store';
 import {Node} from 'org_xprof/frontend/app/common/interfaces/op_profile.jsonpb_decls';
 import {NavigationEvent} from 'org_xprof/frontend/app/common/interfaces/navigation_event';
 import * as utils from 'org_xprof/frontend/app/common/utils/utils';
+import {DATA_SERVICE_INTERFACE_TOKEN} from 'org_xprof/frontend/app/services/data_service_v2/data_service_v2_interface';
 import {getActiveOpProfileNodeState, getCurrentRun, getOpProfileRootNode, getProfilingGeneralState, getSelectedOpNodeChainState} from 'org_xprof/frontend/app/store/selectors';
 import {ProfilingGeneralState} from 'org_xprof/frontend/app/store/state';
 import {Observable, ReplaySubject} from 'rxjs';
@@ -18,6 +19,7 @@ import {takeUntil} from 'rxjs/operators';
 export class OpDetails {
   /** Handles on-destroy Subject, used to unsubscribe. */
   private readonly destroyed = new ReplaySubject<void>(1);
+  private readonly dataService = inject(DATA_SERVICE_INTERFACE_TOKEN);
 
   /** When updating app route to other tools through crosslink */
   @Output() readonly updateRoute = new EventEmitter<NavigationEvent>();
@@ -134,23 +136,14 @@ export class OpDetails {
                                            this.moduleList[0];
   }
 
-  getGraphViewerLink() {
-    if (this.isOss) {
-      const tag = 'graph_viewer';
-      const host = this.getSelectedModuleName();
-      const opName = this.getSelectedOpName();
-      return `${window.parent.location.origin}?tool=${tag}&host=${
-          host}&opName=${opName}&run=${this.currentRun}#profile`;
-    }
-    const aggregatedBy = this.selectedOpNodeChain[0];
-    if (aggregatedBy === 'by_program') {
-      return `/graph_viewer/${this.sessionId}?module_name=${
-          this.getSelectedModuleName()}&node_name=${this.getSelectedOpName()}`;
-    } else if (aggregatedBy === 'by_category') {
-      return `/graph_viewer/${this.sessionId}?module_name=${
-          this.getSelectedModuleName()}&node_name=${this.getSelectedOpName()}`;
-    }
-    return '';
+  getGraphViewerLinkWrapper() {
+    const moduleName = this.getSelectedModuleName();
+    const opName = this.getSelectedOpName();
+    return this.dataService.getGraphViewerLink(
+        this.sessionId,
+        moduleName,
+        opName,
+    );
   }
 
   getCustomCallTextLink() {

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

@@ -1,77 +1,5 @@
-<div class="container" tabindex="0">
-  <div class="mat-headline">
-    <div>
-      Overall {{deviceType}} FLOPS utilization is
-      <span [style.color]="data.flopsColor">{{data.flopsUtilizationPercent}}</span>
-    </div>
-    <div>
-      HBM bandwidth utilization is
-      <span [style.color]="data.bwColors[data.memBwType.MEM_BW_TYPE_HBM_RW]">{{data.bandwidthUtilizationPercents[data.memBwType.MEM_BW_TYPE_HBM_RW]}}</span>
-    </div>
-  </div>
-  <div class="description">
-    <div>
-      Modifying your model's architecture, data dimensions, and improving
-      the efficiency of CPU operations may help reach the {{deviceType}}'s FLOPS
-      potential.
-    </div>
-    <div>
-      "Idle" represents the portion of the total execution time on device
-      that is idle.
-    </div>
-  </div>
-  <div class="control-container">
-    <div class="control" [hidden]="!hasMultiModules">
-      <div class="control-title">Group by Op 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">
-        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">Top 90%
-        <mat-icon
-          class="tooltip-icon"
-          matTooltip="Truncate Ops at 90 percentile of the aggregate root raw time."
-          matTooltipPosition="above">
-          info
-        </mat-icon>
-      </div>
-      <mat-slide-toggle [checked]="showP90" (toggleChange)="updateShowP90()"></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="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>
-
-<op-table
-  [rootNode]="rootNode"
-  [byWasted]="byWasted"
-  [showP90]="showP90"
-  [childrenCount]="childrenCount">
-</op-table>
+<op-profile-base [opProfileData]="opProfileData">
+  <op-details opDetails [isOss]="true">
+    <div utilWarningBug></div>
+  </op-details>
+</op-profile-base>

frontend/app/components/op_profile/op_profile.ts

@@ -1,67 +1,65 @@
 import {Component, OnDestroy} from '@angular/core';
-import {ActivatedRoute} from '@angular/router';
+import {ActivatedRoute, Params} from '@angular/router';
 import {Store} from '@ngrx/store';
 import {OpProfileProto} 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, setOpProfileRootNodeAction, setProfilingDeviceTypeAction} from 'org_xprof/frontend/app/store/actions';
+import {setProfilingDeviceTypeAction} from 'org_xprof/frontend/app/store/actions';
 import {ReplaySubject} from 'rxjs';
 import {takeUntil} from 'rxjs/operators';
 
-import {OpProfileBase} from './op_profile_base';
-
 /** An op profile component. */
 @Component({
   standalone: false,
   selector: 'op-profile',
   templateUrl: './op_profile.ng.html',
-  styleUrls: ['./op_profile.scss']
+  styleUrls: ['./op_profile_common.scss']
 })
-export class OpProfile extends OpProfileBase implements OnDestroy {
+export class OpProfile implements OnDestroy {
   /** Handles on-destroy Subject, used to unsubscribe. */
   private readonly destroyed = new ReplaySubject<void>(1);
 
+  run = '';
+  tag = '';
+  host = '';
+  opProfileData: OpProfileProto|null = null;
+
   constructor(
-      route: ActivatedRoute, private readonly dataService: DataService,
-      private readonly store: Store<{}>) {
-    super();
+      route: ActivatedRoute,
+      private readonly dataService: DataService,
+      private readonly store: Store<{}>,
+  ) {
     route.params.pipe(takeUntil(this.destroyed)).subscribe((params) => {
+      this.processQuery(params);
       this.update(params as NavigationEvent);
     });
   }
 
+  processQuery(params: Params) {
+    this.run = params['run'] || '';
+    this.tag = params['tag'] || 'op-profiler';
+    this.host = params['host'] || '';
+  }
+
   update(event: NavigationEvent) {
-    this.store.dispatch(setLoadingStateAction({
-      loadingState: {
-        loading: true,
-        message: 'Loading data',
-      }
-    }));
+    setLoadingState(true, this.store, 'Loading op profile data');
 
-    this.dataService
-        .getData(event.run || '', event.tag || 'op_profile', event.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, 'Loading op profile data');
           if (data) {
-            const profileProtoData = data as OpProfileProto;
+            this.opProfileData = data as OpProfileProto;
             this.store.dispatch(setProfilingDeviceTypeAction(
-                {deviceType: profileProtoData.deviceType}));
+                {deviceType: this.opProfileData.deviceType}));
           }
-          this.parseData(data as (OpProfileProto | null));
-          this.store.dispatch(
-              setOpProfileRootNodeAction({rootNode: this.rootNode || null}));
         });
   }
 
   ngOnDestroy() {
     // Unsubscribes all pending subscriptions.
-    this.store.dispatch(setOpProfileRootNodeAction({rootNode: undefined}));
+    setLoadingState(false, this.store);
     this.destroyed.next();
     this.destroyed.complete();
   }