UI plumbing to add a new button to hlo op profile for viewing reg utilization

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

@@ -39,6 +39,20 @@
             </button>
           </a>
         </div>
+        <div class="info" id="custom-call-regviz-link" [hidden]="!isValidCustomCall">
+          <a [href]="getCustomCallRegvizLink()" target="_blank" style="text-decoration:none;">
+            <button
+              mat-stroked-button
+              extended
+              type="button"
+              color="primary"
+              appearance="fill"
+              aria-label="go to regviz"
+              i18n-aria-label="A button to corresponding regviz page">
+             > Regviz
+            </button>
+          </a>
+        </div>
         <div class="info" [hidden]="!avgTime">
           <div class="title">Total Time Avg:</div>
           <code class="expression">{{avgTime}}</code>

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

@@ -160,6 +160,18 @@ export class OpDetails {
     return '';
   }
 
+  getCustomCallRegvizLink() {
+    if (this.selectedModuleName) {
+      return this.dataService.getCustomCallRegvizLink(
+          this.sessionId, this.selectedModuleName, this.selectedOpName, '');
+    }
+    if (this.programId) {
+      return this.dataService.getCustomCallRegvizLink(
+          this.sessionId, '', this.selectedOpName, this.programId);
+    }
+    return '';
+  }
+
   dimensionColor(dimension?: Node.XLAInstruction.LayoutAnalysis.Dimension):
       string {
     if (!dimension || !dimension.alignment) {

frontend/app/services/data_service_v2/data_service_v2.ts

@@ -318,6 +318,21 @@ export class DataServiceV2 implements DataServiceV2Interface {
     return '';
   }
 
+  getCustomCallRegvizLink(
+      sessionId: string,
+      moduleName: string,
+      opName: string,
+      programId = '',
+  ) {
+    if (moduleName && opName) {
+      // TODO(xprof): Add program id support in 3p frontend.
+      return `${window.parent.location.origin}/${
+          DATA_API}?tag=graph_viewer&module_name=${moduleName}&node_name=${
+          opName}&run=${sessionId}&type=custom_call&regviz=true#profile`;
+    }
+    return '';
+  }
+
   getCustomCallText(
       sessionId: string, moduleName: string, opName: string,
       programId: string): Observable<string> {

frontend/app/services/data_service_v2/data_service_v2_interface.ts

@@ -88,6 +88,13 @@ export interface DataServiceV2Interface {
       programId: string,
       ): string;
 
+  getCustomCallRegvizLink(
+      sessionId: string,
+      moduleName: string,
+      opName: string,
+      programId: string,
+      ): string;
+
   getCustomCallText(
       sessionId: string, moduleName: string, opName: string,
       programId: string): Observable<string>;