Persist the TBP view with url deep link auto update

- update side nav selection to url with deep link
- update tool specific query params to url, eg. Graph Viewer - opName

PiperOrigin-RevId: 703316721

frontend/app/common/interfaces/navigation_event.ts

@@ -4,5 +4,5 @@ export declare interface NavigationEvent {
   tag?: string;
   host?: string;
   // Graph Viewer crosslink params
-  paramsOpName?: string;
+  opName?: string;
 }

frontend/app/components/graph_viewer/BUILD

@@ -27,6 +27,7 @@ xprof_ng_module(
         "@org_xprof//frontend/app/components/diagnostics_view",
         "@org_xprof//frontend/app/components/graph_viewer/graph_config",
         "@org_xprof//frontend/app/pipes",
+        "@org_xprof//frontend/app/services/communication_service",
         "@org_xprof//frontend/app/services/data_service",
         "@org_xprof//frontend/app/store",
     ],

frontend/app/components/graph_viewer/graph_viewer.ts

@@ -7,6 +7,7 @@ import {Diagnostics} from 'org_xprof/frontend/app/common/interfaces/diagnostics'
 import {GraphConfigInput, GraphViewerQueryParams} from 'org_xprof/frontend/app/common/interfaces/graph_viewer';
 import {NavigationEvent} from 'org_xprof/frontend/app/common/interfaces/navigation_event';
 import {GraphConfig} from 'org_xprof/frontend/app/components/graph_viewer/graph_config/graph_config';
+import {CommunicationService, type ToolQueryParams} from 'org_xprof/frontend/app/services/communication_service/communication_service';
 import {setCurrentToolStateAction} from 'org_xprof/frontend/app/store/actions';
 import {ReplaySubject} from 'rxjs';
 import {takeUntil} from 'rxjs/operators';
@@ -50,6 +51,7 @@ export class GraphViewer implements OnDestroy {
   constructor(
       private readonly route: ActivatedRoute,
       private readonly store: Store<{}>,
+      private readonly communicationService: CommunicationService,
       platformLocation: PlatformLocation,
   ) {
     this.route.params.pipe(takeUntil(this.destroyed)).subscribe((params) => {
@@ -68,14 +70,16 @@ export class GraphViewer implements OnDestroy {
     this.host = event.host || '';
     // host equals to module name for graph viewer
     this.selectedModule = this.host;
-    this.opName = event.paramsOpName || this.opName;
+    this.opName = event.opName || this.opName;
     this.initialParams = this.getParams();
     this.onPlot();
   }
 
   // Function called whenever user click the search graph button
   onSearchGraph(params: Partial<GraphConfigInput>) {
     this.updateParams(params);
+    this.communicationService.onToolQueryParamsChange(
+        this.getParamsForNavigationEvent());
     this.resetPage();
     this.onPlot();
     // Reload iframe to re-inject html body
@@ -84,6 +88,12 @@ export class GraphViewer implements OnDestroy {
     iframe.contentWindow!.location.reload();
   }
 
+  getParamsForNavigationEvent(): ToolQueryParams {
+    return {
+      opName: this.opName,
+    };
+  }
+
   getParams(): GraphConfigInput {
     return {
       selectedModule: this.selectedModule,

frontend/app/components/sidenav/sidenav.ts

@@ -4,7 +4,7 @@ import {Store} from '@ngrx/store';
 import {DEFAULT_HOST, HLO_TOOLS} from 'org_xprof/frontend/app/common/constants/constants';
 import {NavigationEvent} from 'org_xprof/frontend/app/common/interfaces/navigation_event';
 import {RunToolsMap} from 'org_xprof/frontend/app/common/interfaces/tool';
-import {CommunicationService} from 'org_xprof/frontend/app/services/communication_service/communication_service';
+import {CommunicationService, type ToolQueryParams} from 'org_xprof/frontend/app/services/communication_service/communication_service';
 import {DataService} from 'org_xprof/frontend/app/services/data_service/data_service';
 import {setCurrentRunAction, updateRunToolsMapAction} from 'org_xprof/frontend/app/store/actions';
 import {getCurrentRun, getRunToolsMap} from 'org_xprof/frontend/app/store/selectors';
@@ -57,6 +57,14 @@ export class SideNav implements OnInit, OnDestroy {
         (navigationEvent: NavigationEvent) => {
           this.onUpdateRoute(navigationEvent);
         });
+    this.communicationService.toolQueryParamsChange.subscribe(
+        (queryParams: ToolQueryParams) => {
+          this.navigationParams = {
+            ...this.navigationParams,
+            ...queryParams,
+          };
+          this.updateUrlHistory();
+        });
   }
 
   // Getter for the text to display on host selector.
@@ -85,7 +93,6 @@ export class SideNav implements OnInit, OnDestroy {
 
   // Getter for valid host given url router or user selection.
   get selectedHost() {
-    if (this.selectedHostInternal === DEFAULT_HOST) return '';
     return this.hosts.find(host => host === this.selectedHostInternal) ||
         this.hosts[0] || '';
   }
@@ -98,7 +105,7 @@ export class SideNav implements OnInit, OnDestroy {
       host: params.get('host') || '',
     };
     if (params.has('opName')) {
-      navigationEvent.paramsOpName = params.get('opName') || '';
+      navigationEvent.opName = params.get('opName') || '';
     }
     this.onUpdateRoute(navigationEvent);
   }
@@ -200,13 +207,28 @@ export class SideNav implements OnInit, OnDestroy {
     this.navigateTools();
   }
 
+  updateUrlHistory() {
+    const toolQueryParams = Object.keys(this.navigationParams)
+                                .map(key => {
+                                  return `${key}=${this.navigationParams[key]}`;
+                                })
+                                .join('&');
+    const toolQueryParamsString =
+        toolQueryParams.length ? `&${toolQueryParams}` : '';
+    const url = `${window.parent.location.origin}?tool=${
+        this.selectedTag}&host=${this.selectedHost}&run=${this.selectedRun}${
+        toolQueryParamsString}#profile`;
+    window.parent.history.pushState({}, '', url);
+  }
+
   navigateTools() {
     this.communicationService.onNavigateReady();
     const navigationEvent = this.getNavigationEvent();
     this.router.navigate([
       this.selectedTag || 'empty',
       navigationEvent,
     ]);
+    this.updateUrlHistory();
   }
 
   onUpdateRoute(event: NavigationEvent) {

frontend/app/services/communication_service/communication_service.ts

@@ -1,6 +1,12 @@
 import {EventEmitter, Injectable, Output} from '@angular/core';
 import {NavigationEvent} from 'org_xprof/frontend/app/common/interfaces/navigation_event';
 
+/**
+ * The query parameter object for route navigation excluding run, tag, host
+ * for example, opName for Graph Viewer
+ */
+export type ToolQueryParams = NavigationEvent;
+
 /**
  * (OSS) The communication service class that emits events across components
  * Provide the service dependency at the application root level for angular to
@@ -10,6 +16,7 @@ import {NavigationEvent} from 'org_xprof/frontend/app/common/interfaces/navigati
 export class CommunicationService {
   @Output() readonly navigationChange = new EventEmitter();
   @Output() readonly navigationReady = new EventEmitter();
+  @Output() readonly toolQueryParamsChange = new EventEmitter();
 
   // Trigger navigation in sidenav component
   onNavigate(navigationEvent: NavigationEvent) {
@@ -19,4 +26,8 @@ export class CommunicationService {
   onNavigateReady() {
     this.navigationReady.emit({});
   }
+
+  onToolQueryParamsChange(queryParams: ToolQueryParams) {
+    this.toolQueryParamsChange.emit(queryParams);
+  }
 }