diff --git a/frontend/app/app.ng.html b/frontend/app/app.ng.html index b505a9f34..8b4596bf0 100644 --- a/frontend/app/app.ng.html +++ b/frontend/app/app.ng.html @@ -10,7 +10,7 @@
-
Loading data
+
Initializing runs and tools...
diff --git a/frontend/app/common/interfaces/navigation_event.ts b/frontend/app/common/interfaces/navigation_event.ts index 35f639f18..329b18769 100644 --- a/frontend/app/common/interfaces/navigation_event.ts +++ b/frontend/app/common/interfaces/navigation_event.ts @@ -5,4 +5,6 @@ export declare interface NavigationEvent { host?: string; // Graph Viewer crosslink params opName?: string; + // Navigation controlling params + firstLoad?: boolean; } diff --git a/frontend/app/components/inference_profile/inference_profile.ts b/frontend/app/components/inference_profile/inference_profile.ts index 2f0e9eadb..a512ee151 100644 --- a/frontend/app/components/inference_profile/inference_profile.ts +++ b/frontend/app/components/inference_profile/inference_profile.ts @@ -132,12 +132,6 @@ export class InferenceProfile implements OnDestroy { i++; } } - console.log('allRequestTables', this.allRequestTables); - console.log('allRequestProperties', this.allRequestProperties); - console.log('allBatchTables', this.allBatchTables); - console.log('allBatchProperties', this.allBatchProperties); - console.log('allTensorPatternTables', this.allTensorPatternTables); - console.log('allTensorPatternProperties', this.allTensorPatternProperties); return true; } diff --git a/frontend/app/components/main_page/main_page.ts b/frontend/app/components/main_page/main_page.ts index 45a49df4a..0c22a891f 100644 --- a/frontend/app/components/main_page/main_page.ts +++ b/frontend/app/components/main_page/main_page.ts @@ -1,5 +1,6 @@ import {Component, OnDestroy} from '@angular/core'; import {Store} from '@ngrx/store'; +import {NavigationEvent} from 'org_xprof/frontend/app/common/interfaces/navigation_event'; import {CommunicationService} from 'org_xprof/frontend/app/services/communication_service/communication_service'; import {getLoadingState} from 'org_xprof/frontend/app/store/selectors'; import {LoadingState} from 'org_xprof/frontend/app/store/state'; @@ -32,9 +33,20 @@ export class MainPage implements OnDestroy { this.loading = loadingState.loading; this.loadingMessage = loadingState.message; }); - this.communicationService.navigationReady.subscribe(() => { - this.navigationReady = true; - }); + this.communicationService.navigationReady.subscribe( + (navigationEvent: NavigationEvent) => { + this.navigationReady = true; + // TODO(fe-unification): Remove this constraint once the sidepanel + // content of the 3 tools are moved out from sidenav with consolidated + // templates. + const toolsWithSideNav = + ['op_profile', 'memory_viewer', 'pod_viewer']; + this.isSideNavOpen = + (navigationEvent.firstLoad || + toolsWithSideNav + .filter(tool => navigationEvent?.tag?.startsWith(tool)) + .length > 0); + }); } ngOnDestroy() { diff --git a/frontend/app/components/sidenav/sidenav.ts b/frontend/app/components/sidenav/sidenav.ts index 9097e3170..c7ea99983 100644 --- a/frontend/app/components/sidenav/sidenav.ts +++ b/frontend/app/components/sidenav/sidenav.ts @@ -31,7 +31,7 @@ export class SideNav implements OnInit, OnDestroy { selectedRunInternal = ''; selectedTagInternal = ''; selectedHostInternal = ''; - navigationParams: {[key: string]: string} = {}; + navigationParams: {[key: string]: string|boolean} = {}; constructor( private readonly router: Router, @@ -53,10 +53,6 @@ export class SideNav implements OnInit, OnDestroy { this.selectedRunInternal = run; } }); - this.communicationService.navigationChange.subscribe( - (navigationEvent: NavigationEvent) => { - this.onUpdateRoute(navigationEvent); - }); this.communicationService.toolQueryParamsChange.subscribe( (queryParams: ToolQueryParams) => { this.navigationParams = { @@ -97,17 +93,25 @@ export class SideNav implements OnInit, OnDestroy { this.hosts[0] || ''; } + // Initial page load with url params navigateWithUrl() { const params = new URLSearchParams(window.parent.location.search); - const navigationEvent: NavigationEvent = { - run: params.get('run') || '', - tag: params.get('tool') || '', - host: params.get('host') || '', - }; - if (params.has('opName')) { - navigationEvent.opName = params.get('opName') || ''; + const run = params.get('run') || ''; + const tag = params.get('tool') || ''; + const host = params.get('host') || ''; + const opName = params.get('opName') || ''; + this.navigationParams['firstLoad'] = true; + if (opName) { + this.navigationParams['opName'] = opName; } - this.onUpdateRoute(navigationEvent); + if (this.selectedRunInternal === run && this.selectedTagInternal === tag && + this.selectedHostInternal === host) { + return; + } + this.selectedRunInternal = run; + this.selectedTagInternal = tag; + this.selectedHostInternal = host; + this.update(); } ngOnInit() { @@ -222,30 +226,16 @@ export class SideNav implements OnInit, OnDestroy { } navigateTools() { - this.communicationService.onNavigateReady(); const navigationEvent = this.getNavigationEvent(); + this.communicationService.onNavigateReady(navigationEvent); this.router.navigate([ this.selectedTag || 'empty', navigationEvent, ]); + delete this.navigationParams['firstLoad']; this.updateUrlHistory(); } - onUpdateRoute(event: NavigationEvent) { - const {run = '', tag = '', host = ''} = event; - this.selectedRunInternal = run; - this.selectedTagInternal = tag; - this.selectedHostInternal = host; - this.navigationParams = { - ...this.navigationParams, - ...event, - }; - delete this.navigationParams['run']; - delete this.navigationParams['tag']; - delete this.navigationParams['host']; - this.update(); - } - update() { this.afterUpdateRun(); } diff --git a/frontend/app/services/communication_service/communication_service.ts b/frontend/app/services/communication_service/communication_service.ts index f21b66063..4a15f5582 100644 --- a/frontend/app/services/communication_service/communication_service.ts +++ b/frontend/app/services/communication_service/communication_service.ts @@ -14,17 +14,13 @@ export type ToolQueryParams = NavigationEvent; */ @Injectable({providedIn: 'root'}) 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) { - this.navigationChange.emit(navigationEvent); - } - - onNavigateReady() { - this.navigationReady.emit({}); + // Show a navigating status when populating navigation chains + // eg. tools for selected run + onNavigateReady(navigationEvent: NavigationEvent) { + this.navigationReady.emit(navigationEvent); } onToolQueryParamsChange(queryParams: ToolQueryParams) {