From 07c08e4613c0d7f21f0822ae85130af62a4900ac Mon Sep 17 00:00:00 2001 From: Yin Zhang Date: Wed, 13 Sep 2023 16:26:52 -0700 Subject: [PATCH] Migration to use the new MDC-based Angular Components. Components migrated: progress-bar PiperOrigin-RevId: 565193844 --- frontend/app/BUILD | 2 +- frontend/app/app.ng.html | 2 +- frontend/app/app_module.ts | 4 ++-- frontend/app/common/angular/BUILD | 8 ++++---- frontend/app/components/capture_profile/BUILD | 2 +- .../app/components/capture_profile/capture_profile.ts | 4 ++-- .../capture_profile/capture_profile_dialog/BUILD | 2 +- .../capture_profile_dialog/capture_profile_dialog.ts | 4 ++-- .../capture_profile_dialog_module.ts | 4 ++-- .../capture_profile/capture_profile_module.ts | 4 ++-- frontend/app/components/graph_viewer/BUILD | 2 +- .../app/components/graph_viewer/graph_config/BUILD | 2 +- .../graph_viewer/graph_config/graph_config_module.ts | 4 ++-- .../app/components/graph_viewer/graph_viewer.ng.html | 4 ++-- frontend/app/components/graph_viewer/graph_viewer.scss | 2 +- frontend/app/components/graph_viewer/graph_viewer.ts | 10 ++++++++++ .../app/components/graph_viewer/graph_viewer_module.ts | 4 ++-- frontend/app/components/main_page/BUILD | 3 ++- frontend/app/components/main_page/main_page.ng.html | 2 +- frontend/app/components/main_page/main_page_module.ts | 6 ++++-- .../components/memory_viewer/memory_viewer_main/BUILD | 2 +- .../memory_viewer_main/memory_viewer_main_module.ts | 4 ++-- .../app/components/pod_viewer/topology_graph/BUILD | 2 +- .../pod_viewer/topology_graph/topology_graph_module.ts | 4 ++-- frontend/app/components/tensorflow_stats/BUILD | 2 +- .../tensorflow_stats/tensorflow_stats_module.ts | 4 ++-- frontend/styles.scss | 4 ++++ 27 files changed, 57 insertions(+), 40 deletions(-) diff --git a/frontend/app/BUILD b/frontend/app/BUILD index 5dde534ec..1acd4fdd8 100644 --- a/frontend/app/BUILD +++ b/frontend/app/BUILD @@ -19,7 +19,7 @@ xprof_ng_module( "@npm//@ngrx/store", "@npm//rxjs", "@org_xprof//frontend/app/common/angular:angular_common_http", - "@org_xprof//frontend/app/common/angular:angular_material_legacy_progress_bar", + "@org_xprof//frontend/app/common/angular:angular_material_progress_bar", "@org_xprof//frontend/app/common/angular:angular_platform-browser_animation", "@org_xprof//frontend/app/common/constants", "@org_xprof//frontend/app/common/interfaces", diff --git a/frontend/app/app.ng.html b/frontend/app/app.ng.html index 31280bdb4..22f016e55 100644 --- a/frontend/app/app.ng.html +++ b/frontend/app/app.ng.html @@ -9,7 +9,7 @@ -
+
Loading data
diff --git a/frontend/app/app_module.ts b/frontend/app/app_module.ts index 82c132f73..d538d9778 100644 --- a/frontend/app/app_module.ts +++ b/frontend/app/app_module.ts @@ -1,6 +1,6 @@ import {HttpClientModule} from '@angular/common/http'; import {NgModule} from '@angular/core'; -import {MatLegacyProgressBarModule} from '@angular/material/legacy-progress-bar'; +import {MatProgressBarModule} from '@angular/material/progress-bar'; import {BrowserModule} from '@angular/platform-browser'; import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; import {EmptyPageModule} from 'org_xprof/frontend/app/components/empty_page/empty_page_module'; @@ -18,7 +18,7 @@ import {App} from './app'; imports: [ BrowserModule, HttpClientModule, - MatLegacyProgressBarModule, + MatProgressBarModule, EmptyPageModule, MainPageModule, BrowserAnimationsModule, diff --git a/frontend/app/common/angular/BUILD b/frontend/app/common/angular/BUILD index e39a08087..72a23b695 100644 --- a/frontend/app/common/angular/BUILD +++ b/frontend/app/common/angular/BUILD @@ -27,7 +27,7 @@ ts_library( ) ts_library( - name = "angular_material_legacy_progress_bar", + name = "angular_material_progress_bar", srcs = [], deps = [ "@npm//@angular/material", @@ -75,7 +75,7 @@ ts_library( ) ts_library( - name = "angular_material_legacy_menu", + name = "angular_material_menu", srcs = [], deps = [ "@npm//@angular/material", @@ -91,7 +91,7 @@ ts_library( ) ts_library( - name = "angular_material_legacy_checkbox", + name = "angular_material_checkbox", srcs = [], deps = [ "@npm//@angular/material", @@ -99,7 +99,7 @@ ts_library( ) ts_library( - name = "angular_material_legacy_dialog", + name = "angular_material_dialog", srcs = [], deps = [ "@npm//@angular/material", diff --git a/frontend/app/components/capture_profile/BUILD b/frontend/app/components/capture_profile/BUILD index 45d0cde24..8ae1be62c 100644 --- a/frontend/app/components/capture_profile/BUILD +++ b/frontend/app/components/capture_profile/BUILD @@ -20,7 +20,7 @@ xprof_ng_module( "@npm//@ngrx/store", "@npm//rxjs", "@org_xprof//frontend/app/common/angular:angular_material_button", - "@org_xprof//frontend/app/common/angular:angular_material_legacy_dialog", + "@org_xprof//frontend/app/common/angular:angular_material_dialog", "@org_xprof//frontend/app/common/angular:angular_material_legacy_progress_spinner", "@org_xprof//frontend/app/common/angular:angular_material_legacy_snack_bar", "@org_xprof//frontend/app/common/interfaces", diff --git a/frontend/app/components/capture_profile/capture_profile.ts b/frontend/app/components/capture_profile/capture_profile.ts index 7f1cfbc31..4132cbf5a 100644 --- a/frontend/app/components/capture_profile/capture_profile.ts +++ b/frontend/app/components/capture_profile/capture_profile.ts @@ -1,5 +1,5 @@ import {Component, OnDestroy} from '@angular/core'; -import {MatLegacyDialog} from '@angular/material/legacy-dialog'; +import {MatDialog} from '@angular/material/dialog'; import {MatLegacySnackBar} from '@angular/material/legacy-snack-bar'; import {Store} from '@ngrx/store'; import {CaptureProfileOptions, CaptureProfileResponse} from 'org_xprof/frontend/app/common/interfaces/capture_profile'; @@ -27,7 +27,7 @@ export class CaptureProfile implements OnDestroy { capturingProfile: Observable; constructor( - private readonly dialog: MatLegacyDialog, + private readonly dialog: MatDialog, private readonly snackBar: MatLegacySnackBar, private readonly dataService: DataService, private readonly store: Store<{}>) { diff --git a/frontend/app/components/capture_profile/capture_profile_dialog/BUILD b/frontend/app/components/capture_profile/capture_profile_dialog/BUILD index 3c1d471d7..23e02ffe6 100644 --- a/frontend/app/components/capture_profile/capture_profile_dialog/BUILD +++ b/frontend/app/components/capture_profile/capture_profile_dialog/BUILD @@ -19,10 +19,10 @@ xprof_ng_module( "@npm//@angular/forms", "@npm//@angular/platform-browser", "@org_xprof//frontend/app/common/angular:angular_material_button", + "@org_xprof//frontend/app/common/angular:angular_material_dialog", "@org_xprof//frontend/app/common/angular:angular_material_expansion", "@org_xprof//frontend/app/common/angular:angular_material_form_field", "@org_xprof//frontend/app/common/angular:angular_material_input", - "@org_xprof//frontend/app/common/angular:angular_material_legacy_dialog", "@org_xprof//frontend/app/common/angular:angular_material_legacy_radio", "@org_xprof//frontend/app/common/angular:angular_material_legacy_tooltip", "@org_xprof//frontend/app/common/angular:angular_material_select", diff --git a/frontend/app/components/capture_profile/capture_profile_dialog/capture_profile_dialog.ts b/frontend/app/components/capture_profile/capture_profile_dialog/capture_profile_dialog.ts index b8017398e..38e79313b 100644 --- a/frontend/app/components/capture_profile/capture_profile_dialog/capture_profile_dialog.ts +++ b/frontend/app/components/capture_profile/capture_profile_dialog/capture_profile_dialog.ts @@ -1,5 +1,5 @@ import {Component} from '@angular/core'; -import {MatLegacyDialogRef} from '@angular/material/legacy-dialog'; +import {MatDialogRef} from '@angular/material/dialog'; /** A capture profile dialog component. */ @Component({ @@ -25,7 +25,7 @@ export class CaptureProfileDialog { delay = 0; constructor(private readonly dialogRef: - MatLegacyDialogRef) {} + MatDialogRef) {} addressTypeChanged(value: string) { this.isTpuName = value === 'tpu'; diff --git a/frontend/app/components/capture_profile/capture_profile_dialog/capture_profile_dialog_module.ts b/frontend/app/components/capture_profile/capture_profile_dialog/capture_profile_dialog_module.ts index a8651940c..242d32ac2 100644 --- a/frontend/app/components/capture_profile/capture_profile_dialog/capture_profile_dialog_module.ts +++ b/frontend/app/components/capture_profile/capture_profile_dialog/capture_profile_dialog_module.ts @@ -3,7 +3,7 @@ import {NgModule} from '@angular/core'; import {FormsModule} from '@angular/forms'; import {MatExpansionModule} from '@angular/material/expansion'; import {MatButtonModule} from '@angular/material/button'; -import {MatLegacyDialogModule} from '@angular/material/legacy-dialog'; +import {MatDialogModule} from '@angular/material/dialog'; import {MatFormFieldModule} from '@angular/material/form-field'; import {MatInputModule} from '@angular/material/input'; import {MatLegacyRadioModule} from '@angular/material/legacy-radio'; @@ -21,7 +21,7 @@ import {CaptureProfileDialog} from './capture_profile_dialog'; CommonModule, FormsModule, MatButtonModule, - MatLegacyDialogModule, + MatDialogModule, MatExpansionModule, MatFormFieldModule, MatInputModule, diff --git a/frontend/app/components/capture_profile/capture_profile_module.ts b/frontend/app/components/capture_profile/capture_profile_module.ts index 4c0a81be6..2176dcd72 100644 --- a/frontend/app/components/capture_profile/capture_profile_module.ts +++ b/frontend/app/components/capture_profile/capture_profile_module.ts @@ -1,7 +1,7 @@ import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; import {MatButtonModule} from '@angular/material/button'; -import {MatLegacyDialogModule} from '@angular/material/legacy-dialog'; +import {MatDialogModule} from '@angular/material/dialog'; import {MatLegacyProgressSpinnerModule} from '@angular/material/legacy-progress-spinner'; import {MatLegacySnackBarModule} from '@angular/material/legacy-snack-bar'; @@ -15,7 +15,7 @@ import {CaptureProfileDialogModule} from './capture_profile_dialog/capture_profi imports: [ CommonModule, MatButtonModule, - MatLegacyDialogModule, + MatDialogModule, MatLegacyProgressSpinnerModule, CaptureProfileDialogModule, MatLegacySnackBarModule, diff --git a/frontend/app/components/graph_viewer/BUILD b/frontend/app/components/graph_viewer/BUILD index 2a9f19a66..3097a77d9 100644 --- a/frontend/app/components/graph_viewer/BUILD +++ b/frontend/app/components/graph_viewer/BUILD @@ -20,7 +20,7 @@ xprof_ng_module( "@npm//@ngrx/store", "@npm//rxjs", "@org_xprof//frontend/app/common/angular:angular_material_core", - "@org_xprof//frontend/app/common/angular:angular_material_legacy_progress_bar", + "@org_xprof//frontend/app/common/angular:angular_material_progress_bar", "@org_xprof//frontend/app/common/angular:angular_material_sidenav", "@org_xprof//frontend/app/common/constants", "@org_xprof//frontend/app/common/interfaces", diff --git a/frontend/app/components/graph_viewer/graph_config/BUILD b/frontend/app/components/graph_viewer/graph_config/BUILD index 63201ee15..26d9d5555 100644 --- a/frontend/app/components/graph_viewer/graph_config/BUILD +++ b/frontend/app/components/graph_viewer/graph_config/BUILD @@ -19,11 +19,11 @@ xprof_ng_module( "@npm//@angular/forms", "@npm//rxjs", "@org_xprof//frontend/app/common/angular:angular_material_button", + "@org_xprof//frontend/app/common/angular:angular_material_checkbox", "@org_xprof//frontend/app/common/angular:angular_material_core", "@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_legacy_checkbox", "@org_xprof//frontend/app/common/angular:angular_material_legacy_tooltip", "@org_xprof//frontend/app/common/angular:angular_material_select", "@org_xprof//frontend/app/common/angular:angular_material_sidenav", diff --git a/frontend/app/components/graph_viewer/graph_config/graph_config_module.ts b/frontend/app/components/graph_viewer/graph_config/graph_config_module.ts index 34cc6681e..66ee37671 100644 --- a/frontend/app/components/graph_viewer/graph_config/graph_config_module.ts +++ b/frontend/app/components/graph_viewer/graph_config/graph_config_module.ts @@ -3,7 +3,7 @@ import {NgModule} from '@angular/core'; import {FormsModule} from '@angular/forms'; import {MatIconModule} from '@angular/material/icon'; import {MatButtonModule} from '@angular/material/button'; -import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox'; +import {MatCheckboxModule} from '@angular/material/checkbox'; import {MatOptionModule} from '@angular/material/core'; import {MatFormFieldModule} from '@angular/material/form-field'; import {MatInputModule} from '@angular/material/input'; @@ -18,7 +18,7 @@ import {GraphConfig} from './graph_config'; CommonModule, FormsModule, MatButtonModule, - MatLegacyCheckboxModule, + MatCheckboxModule, MatFormFieldModule, MatIconModule, MatInputModule, diff --git a/frontend/app/components/graph_viewer/graph_viewer.ng.html b/frontend/app/components/graph_viewer/graph_viewer.ng.html index ce7fe9870..659286f33 100644 --- a/frontend/app/components/graph_viewer/graph_viewer.ng.html +++ b/frontend/app/components/graph_viewer/graph_viewer.ng.html @@ -6,10 +6,10 @@ -
+
Loading graph viewer data
- + diff --git a/frontend/app/components/graph_viewer/graph_viewer.scss b/frontend/app/components/graph_viewer/graph_viewer.scss index 65866d35c..b84b87548 100644 --- a/frontend/app/components/graph_viewer/graph_viewer.scss +++ b/frontend/app/components/graph_viewer/graph_viewer.scss @@ -41,6 +41,6 @@ mat-progress-bar { .progress-container { position: absolute; width: 100%; - margin: 300 0; + margin: 300px 0; z-index: 1; } diff --git a/frontend/app/components/graph_viewer/graph_viewer.ts b/frontend/app/components/graph_viewer/graph_viewer.ts index ca54aead3..779f56421 100644 --- a/frontend/app/components/graph_viewer/graph_viewer.ts +++ b/frontend/app/components/graph_viewer/graph_viewer.ts @@ -86,8 +86,18 @@ export class GraphViewer implements OnDestroy { return this.opName && this.selectedModule; } + setLoadingStatus(loading: boolean, diagnostics?: Diagnostics) { + this.loading = loading; + this.diagnostics = diagnostics || {...DIAGNOSTICS_DEFAULT}; + } + + onIframeLoaded() { + this.setLoadingStatus(false); + } + onPlot() { if (!this.validToPlot()) return; + this.setLoadingStatus(true); // Update the query parameters in url after form updates const queryParams: GraphViewerQueryParams = { diff --git a/frontend/app/components/graph_viewer/graph_viewer_module.ts b/frontend/app/components/graph_viewer/graph_viewer_module.ts index ab6355c82..3095da1ca 100644 --- a/frontend/app/components/graph_viewer/graph_viewer_module.ts +++ b/frontend/app/components/graph_viewer/graph_viewer_module.ts @@ -1,7 +1,7 @@ import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; import {MatOptionModule} from '@angular/material/core'; -import {MatLegacyProgressBarModule} from '@angular/material/legacy-progress-bar'; +import {MatProgressBarModule} from '@angular/material/progress-bar'; import {MatSidenavModule} from '@angular/material/sidenav'; import {DiagnosticsViewModule} from 'org_xprof/frontend/app/components/diagnostics_view/diagnostics_view_module'; import {GraphConfigModule} from 'org_xprof/frontend/app/components/graph_viewer/graph_config/graph_config_module'; @@ -14,7 +14,7 @@ import {GraphViewer} from './graph_viewer'; CommonModule, DiagnosticsViewModule, MatOptionModule, - MatLegacyProgressBarModule, + MatProgressBarModule, MatSidenavModule, PipesModule, GraphConfigModule, diff --git a/frontend/app/components/main_page/BUILD b/frontend/app/components/main_page/BUILD index 3b324cc1a..b53eae142 100644 --- a/frontend/app/components/main_page/BUILD +++ b/frontend/app/components/main_page/BUILD @@ -14,11 +14,12 @@ xprof_ng_module( "main_page.ng.html", ], deps = [ + "@npm//@angular/common", "@npm//@angular/core", "@npm//@angular/router", "@npm//@ngrx/store", "@npm//rxjs", - "@org_xprof//frontend/app/common/angular:angular_material_legacy_progress_bar", + "@org_xprof//frontend/app/common/angular:angular_material_progress_bar", "@org_xprof//frontend/app/common/angular:angular_material_sidenav", "@org_xprof//frontend/app/common/constants", "@org_xprof//frontend/app/common/interfaces", diff --git a/frontend/app/components/main_page/main_page.ng.html b/frontend/app/components/main_page/main_page.ng.html index 9f16353b2..9892b5500 100644 --- a/frontend/app/components/main_page/main_page.ng.html +++ b/frontend/app/components/main_page/main_page.ng.html @@ -3,7 +3,7 @@ -
+
{{loadingMessage}}
diff --git a/frontend/app/components/main_page/main_page_module.ts b/frontend/app/components/main_page/main_page_module.ts index 8bb411b89..e81fc956e 100644 --- a/frontend/app/components/main_page/main_page_module.ts +++ b/frontend/app/components/main_page/main_page_module.ts @@ -1,5 +1,6 @@ +import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; -import {MatLegacyProgressBarModule} from '@angular/material/legacy-progress-bar'; +import {MatProgressBarModule} from '@angular/material/progress-bar'; import {MatSidenavModule} from '@angular/material/sidenav'; import {RouterModule, Routes} from '@angular/router'; import {DcnCollectiveStats} from 'org_xprof/frontend/app/components/dcn_collective_stats/dcn_collective_stats'; @@ -65,7 +66,8 @@ export const routes: Routes = [ @NgModule({ declarations: [MainPage], imports: [ - MatLegacyProgressBarModule, + CommonModule, + MatProgressBarModule, MatSidenavModule, EmptyPageModule, SideNavModule, diff --git a/frontend/app/components/memory_viewer/memory_viewer_main/BUILD b/frontend/app/components/memory_viewer/memory_viewer_main/BUILD index 05424fa0f..1a97124bf 100644 --- a/frontend/app/components/memory_viewer/memory_viewer_main/BUILD +++ b/frontend/app/components/memory_viewer/memory_viewer_main/BUILD @@ -18,9 +18,9 @@ xprof_ng_module( "@npm//@angular/forms", "@npm//@angular/router", "@npm//@ngrx/store", + "@org_xprof//frontend/app/common/angular:angular_material_checkbox", "@org_xprof//frontend/app/common/angular:angular_material_divider", "@org_xprof//frontend/app/common/angular:angular_material_icon", - "@org_xprof//frontend/app/common/angular:angular_material_legacy_checkbox", "@org_xprof//frontend/app/common/angular:angular_material_legacy_tooltip", "@org_xprof//frontend/app/common/interfaces", "@org_xprof//frontend/app/common/utils", diff --git a/frontend/app/components/memory_viewer/memory_viewer_main/memory_viewer_main_module.ts b/frontend/app/components/memory_viewer/memory_viewer_main/memory_viewer_main_module.ts index 93616f4cb..f057b0fcc 100644 --- a/frontend/app/components/memory_viewer/memory_viewer_main/memory_viewer_main_module.ts +++ b/frontend/app/components/memory_viewer/memory_viewer_main/memory_viewer_main_module.ts @@ -2,7 +2,7 @@ import {NgModule} from '@angular/core'; import {FormsModule} from '@angular/forms'; import {MatDividerModule} from '@angular/material/divider'; import {MatIconModule} from '@angular/material/icon'; -import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox'; +import {MatCheckboxModule} from '@angular/material/checkbox'; import {MatLegacyTooltipModule} from '@angular/material/legacy-tooltip'; import {DiagnosticsViewModule} from 'org_xprof/frontend/app/components/diagnostics_view/diagnostics_view_module'; import {MaxHeapChartModule} from 'org_xprof/frontend/app/components/memory_viewer/max_heap_chart/max_heap_chart_module'; @@ -18,7 +18,7 @@ import {MemoryViewerMain} from './memory_viewer_main'; FormsModule, MatDividerModule, MaxHeapChartModule, - MatLegacyCheckboxModule, + MatCheckboxModule, MatIconModule, MatLegacyTooltipModule, ProgramOrderChartModule, diff --git a/frontend/app/components/pod_viewer/topology_graph/BUILD b/frontend/app/components/pod_viewer/topology_graph/BUILD index c6a215198..164fc1adf 100644 --- a/frontend/app/components/pod_viewer/topology_graph/BUILD +++ b/frontend/app/components/pod_viewer/topology_graph/BUILD @@ -22,8 +22,8 @@ xprof_ng_module( "@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_legacy_menu", "@org_xprof//frontend/app/common/angular:angular_material_legacy_slider", + "@org_xprof//frontend/app/common/angular:angular_material_menu", "@org_xprof//frontend/app/common/constants", "@org_xprof//frontend/app/common/interfaces", "@org_xprof//frontend/app/common/utils", diff --git a/frontend/app/components/pod_viewer/topology_graph/topology_graph_module.ts b/frontend/app/components/pod_viewer/topology_graph/topology_graph_module.ts index 7cbdfa081..c58edea49 100644 --- a/frontend/app/components/pod_viewer/topology_graph/topology_graph_module.ts +++ b/frontend/app/components/pod_viewer/topology_graph/topology_graph_module.ts @@ -4,7 +4,7 @@ import {MatIconModule} from '@angular/material/icon'; import {MatButtonModule} from '@angular/material/button'; import {MatFormFieldModule} from '@angular/material/form-field'; import {MatInputModule} from '@angular/material/input'; -import {MatLegacyMenuModule} from '@angular/material/legacy-menu'; +import {MatMenuModule} from '@angular/material/menu'; import {MatLegacySliderModule} from '@angular/material/legacy-slider'; import {TopologyGraph} from './topology_graph'; @@ -18,7 +18,7 @@ import {TopologyGraph} from './topology_graph'; MatFormFieldModule, MatIconModule, MatInputModule, - MatLegacyMenuModule, + MatMenuModule, MatLegacySliderModule, ], exports: [TopologyGraph] diff --git a/frontend/app/components/tensorflow_stats/BUILD b/frontend/app/components/tensorflow_stats/BUILD index 293d3fb2b..fe7d4e30c 100644 --- a/frontend/app/components/tensorflow_stats/BUILD +++ b/frontend/app/components/tensorflow_stats/BUILD @@ -38,7 +38,7 @@ xprof_ng_module( "@org_xprof//frontend/app/common/angular:angular_material_button", "@org_xprof//frontend/app/common/angular:angular_material_divider", "@org_xprof//frontend/app/common/angular:angular_material_icon", - "@org_xprof//frontend/app/common/angular:angular_material_legacy_menu", + "@org_xprof//frontend/app/common/angular:angular_material_menu", "@org_xprof//frontend/app/common/constants", "@org_xprof//frontend/app/common/interfaces", "@org_xprof//frontend/app/common/interfaces:chart", diff --git a/frontend/app/components/tensorflow_stats/tensorflow_stats_module.ts b/frontend/app/components/tensorflow_stats/tensorflow_stats_module.ts index 7fe602bf6..397c418d0 100644 --- a/frontend/app/components/tensorflow_stats/tensorflow_stats_module.ts +++ b/frontend/app/components/tensorflow_stats/tensorflow_stats_module.ts @@ -3,7 +3,7 @@ import {NgModule} from '@angular/core'; import {MatDividerModule} from '@angular/material/divider'; import {MatIconModule} from '@angular/material/icon'; import {MatButtonModule} from '@angular/material/button'; -import {MatLegacyMenuModule} from '@angular/material/legacy-menu'; +import {MatMenuModule} from '@angular/material/menu'; import {ChartModule} from 'org_xprof/frontend/app/components/chart/chart'; import {ExportAsCsvModule} from 'org_xprof/frontend/app/components/controls/export_as_csv/export_as_csv_module'; import {FlopRateChartModule} from 'org_xprof/frontend/app/components/tensorflow_stats/flop_rate_chart/flop_rate_chart_module'; @@ -21,7 +21,7 @@ import {TensorflowStats} from './tensorflow_stats'; MatButtonModule, MatDividerModule, MatIconModule, - MatLegacyMenuModule, + MatMenuModule, ChartModule, ExportAsCsvModule, FlopRateChartModule, diff --git a/frontend/styles.scss b/frontend/styles.scss index 9ca8ef4e5..cfae63ffc 100644 --- a/frontend/styles.scss +++ b/frontend/styles.scss @@ -33,7 +33,11 @@ $theme: mat.define-light-theme( @include mat.core-theme($theme); @include mat.input-theme($theme); @include mat.form-field-theme($theme); +@include mat.checkbox-theme($theme); @include mat.select-theme($theme); +@include mat.menu-theme($theme); +@include mat.dialog-theme($theme); +@include mat.progress-bar-theme($theme); html, body { height: 100%;