From 98d07c29e2d355d488c982e70808e7a60d0b6159 Mon Sep 17 00:00:00 2001
From: Yin Zhang <yinzz@google.com>
Date: Wed, 13 Sep 2023 16:24:36 -0700
Subject: [PATCH] Migration to use the new MDC-based Angular Components.
 Components migrated: dialog

PiperOrigin-RevId: 565193300
---
 frontend/app/common/angular/BUILD             | 12 +++++------
 frontend/app/components/capture_profile/BUILD |  2 +-
 .../capture_profile/capture_profile.ts        |  4 ++--
 .../capture_profile_dialog/BUILD              |  8 ++++----
 .../capture_profile_dialog.ng.html            |  6 +++---
 .../capture_profile_dialog.ts                 |  4 ++--
 .../capture_profile_dialog_module.ts          | 16 +++++++--------
 .../capture_profile/capture_profile_module.ts |  4 ++--
 frontend/app/components/chart/table/BUILD     |  6 +++---
 .../app/components/chart/table/table.ng.html  |  2 +-
 .../components/chart/table/table_module.ts    | 12 +++++------
 .../components/controls/category_filter/BUILD |  6 +++---
 .../category_filter/category_filter.ng.html   |  2 +-
 .../category_filter/category_filter_module.ts | 12 +++++------
 .../components/controls/string_filter/BUILD   |  4 ++--
 .../string_filter/string_filter.ng.html       |  4 ++--
 .../controls/string_filter/string_filter.scss |  9 ++++++++-
 .../string_filter/string_filter_module.ts     |  8 ++++----
 frontend/app/components/graph_viewer/BUILD    |  2 +-
 .../graph_viewer/graph_config/BUILD           | 10 +++++-----
 .../graph_config/graph_config.ng.html         |  4 ++--
 .../graph_config/graph_config.scss            |  4 ----
 .../graph_config/graph_config_module.ts       | 20 +++++++++----------
 .../graph_viewer/graph_viewer.ng.html         |  2 +-
 .../components/graph_viewer/graph_viewer.scss | 14 ++++++-------
 .../graph_viewer/graph_viewer_module.ts       |  4 ++--
 .../kernel_stats/kernel_stats_table/BUILD     |  4 ++--
 .../kernel_stats_table_module.ts              |  8 ++++----
 frontend/app/components/memory_profile/BUILD  |  4 ++--
 .../memory_breakdown_table/BUILD              |  4 ++--
 .../memory_breakdown_table_module.ts          |  8 ++++----
 .../memory_profile/memory_profile.ng.html     |  2 +-
 .../memory_profile/memory_profile_common.scss |  2 +-
 .../memory_profile/memory_profile_module.ts   |  8 ++++----
 .../memory_profile_summary/BUILD              |  2 +-
 .../memory_timeline_graph/BUILD               |  2 +-
 .../memory_viewer/buffer_details/BUILD        |  2 +-
 .../memory_viewer/memory_viewer_main/BUILD    |  2 +-
 .../memory_viewer_main_module.ts              |  4 ++--
 frontend/app/components/op_profile/BUILD      |  4 ++--
 .../op_profile/op_details/op_details.scss     |  3 ++-
 .../components/op_profile/op_profile.ng.html  | 15 ++++----------
 .../op_profile/op_profile_module.ts           |  8 ++++----
 .../overview/performance_summary/BUILD        |  2 +-
 .../overview/recommendation_result_view/BUILD |  2 +-
 .../overview/run_environment_view/BUILD       |  2 +-
 .../components/overview/step_time_graph/BUILD |  2 +-
 .../pod_viewer/pod_viewer_details/BUILD       |  2 +-
 .../pod_viewer/topology_graph/BUILD           |  4 ++--
 .../topology_graph/topology_graph.ng.html     |  3 ++-
 .../topology_graph/topology_graph_module.ts   |  8 ++++----
 frontend/app/components/sidenav/BUILD         |  6 +++---
 .../app/components/sidenav/sidenav.ng.html    |  6 +++---
 .../app/components/sidenav/sidenav_module.ts  | 12 +++++------
 .../tensorflow_stats/stats_table/BUILD        |  4 ++--
 .../stats_table/stats_table.ng.html           | 12 +++++------
 .../stats_table/stats_table_module.ts         |  8 ++++----
 frontend/app/styles/common.scss               |  5 +++++
 frontend/styles.scss                          |  9 ++++++++-
 59 files changed, 180 insertions(+), 170 deletions(-)

diff --git a/frontend/app/common/angular/BUILD b/frontend/app/common/angular/BUILD
index 94f467f02..6aff7eb8e 100644
--- a/frontend/app/common/angular/BUILD
+++ b/frontend/app/common/angular/BUILD
@@ -35,7 +35,7 @@ ts_library(
 )
 
 ts_library(
-    name = "angular_material_legacy_form_field",
+    name = "angular_material_form_field",
     srcs = [],
     deps = [
         "@npm//@angular/material",
@@ -51,7 +51,7 @@ ts_library(
 )
 
 ts_library(
-    name = "angular_material_legacy_input",
+    name = "angular_material_input",
     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",
@@ -163,7 +163,7 @@ ts_library(
 )
 
 ts_library(
-    name = "angular_material_legacy_core",
+    name = "angular_material_core",
     srcs = [],
     deps = [
         "@npm//@angular/material",
@@ -171,7 +171,7 @@ ts_library(
 )
 
 ts_library(
-    name = "angular_material_legacy_select",
+    name = "angular_material_select",
     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<boolean>;
 
   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 84d09e687..23e02ffe6 100644
--- a/frontend/app/components/capture_profile/capture_profile_dialog/BUILD
+++ b/frontend/app/components/capture_profile/capture_profile_dialog/BUILD
@@ -19,13 +19,13 @@ 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_legacy_dialog",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_form_field",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_input",
+        "@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_radio",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_select",
         "@org_xprof//frontend/app/common/angular:angular_material_legacy_tooltip",
+        "@org_xprof//frontend/app/common/angular:angular_material_select",
         "@org_xprof//frontend/app/common/interfaces",
     ],
 )
diff --git a/frontend/app/components/capture_profile/capture_profile_dialog/capture_profile_dialog.ng.html b/frontend/app/components/capture_profile/capture_profile_dialog/capture_profile_dialog.ng.html
index ecd13e0ae..13b492930 100644
--- a/frontend/app/components/capture_profile/capture_profile_dialog/capture_profile_dialog.ng.html
+++ b/frontend/app/components/capture_profile/capture_profile_dialog/capture_profile_dialog.ng.html
@@ -39,7 +39,7 @@
   </div>
 
   <div>
-    <mat-form-field>
+    <mat-form-field appearance="outline">
       <mat-label>Host Trace (TraceMe) Level</mat-label>
       <mat-select
         matTooltip="{{ hostTracerTooltip }}"
@@ -55,7 +55,7 @@
   </div>
 
   <div>
-    <mat-form-field>
+    <mat-form-field appearance="outline">
       <mat-label>Device Trace Level</mat-label>
       <mat-select [(ngModel)]="deviceTracerLevel">
         <mat-option value="0">disable</mat-option>
@@ -65,7 +65,7 @@
   </div>
 
   <div>
-    <mat-form-field>
+    <mat-form-field appearance="outline">
       <mat-label>Python Trace Level</mat-label>
       <mat-select [(ngModel)]="pythonTracerLevel">
         <mat-option value="0">disable</mat-option>
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<CaptureProfileDialog>) {}
+                  MatDialogRef<CaptureProfileDialog>) {}
 
   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 cfa0c9512..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,11 +3,11 @@ 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 {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field';
-import {MatLegacyInputModule} from '@angular/material/legacy-input';
+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';
-import {MatLegacySelectModule} from '@angular/material/legacy-select';
+import {MatSelectModule} from '@angular/material/select';
 import {MatLegacyTooltipModule} from '@angular/material/legacy-tooltip';
 import {BrowserModule} from '@angular/platform-browser';
 
@@ -21,12 +21,12 @@ import {CaptureProfileDialog} from './capture_profile_dialog';
     CommonModule,
     FormsModule,
     MatButtonModule,
-    MatLegacyDialogModule,
+    MatDialogModule,
     MatExpansionModule,
-    MatLegacyFormFieldModule,
-    MatLegacyInputModule,
+    MatFormFieldModule,
+    MatInputModule,
     MatLegacyRadioModule,
-    MatLegacySelectModule,
+    MatSelectModule,
     MatLegacyTooltipModule,
   ],
   exports: [CaptureProfileDialog]
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/chart/table/BUILD b/frontend/app/components/chart/table/BUILD
index e63d79102..c119dd83c 100644
--- a/frontend/app/components/chart/table/BUILD
+++ b/frontend/app/components/chart/table/BUILD
@@ -16,9 +16,9 @@ xprof_ng_module(
     deps = [
         "@npm//@angular/core",
         "@npm//@types/google.visualization",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_core",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_form_field",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_select",
+        "@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_select",
     ],
 )
 
diff --git a/frontend/app/components/chart/table/table.ng.html b/frontend/app/components/chart/table/table.ng.html
index 190c310fa..1e84654b1 100644
--- a/frontend/app/components/chart/table/table.ng.html
+++ b/frontend/app/components/chart/table/table.ng.html
@@ -1,5 +1,5 @@
 <div [style.height]="height">
-  <mat-form-field *ngIf="displayPageSizeSelector()">
+  <mat-form-field *ngIf="displayPageSizeSelector()" appearance="outline">
     <mat-label>Rows per Page: </mat-label>
     <mat-select (selectionChange)="drawTable()" [(value)]="pageSize">
       <mat-option *ngFor="let option of pageSizeOptions" [value]="option">{{option}}</mat-option>
diff --git a/frontend/app/components/chart/table/table_module.ts b/frontend/app/components/chart/table/table_module.ts
index cdf63d878..e6d310ca5 100644
--- a/frontend/app/components/chart/table/table_module.ts
+++ b/frontend/app/components/chart/table/table_module.ts
@@ -1,8 +1,8 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {MatLegacyOptionModule} from '@angular/material/legacy-core';
-import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field';
-import {MatLegacySelectModule} from '@angular/material/legacy-select';
+import {MatOptionModule} from '@angular/material/core';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatSelectModule} from '@angular/material/select';
 
 import {Table} from './table';
 
@@ -11,9 +11,9 @@ import {Table} from './table';
   declarations: [Table],
   imports: [
     CommonModule,
-    MatLegacyOptionModule,
-    MatLegacySelectModule,
-    MatLegacyFormFieldModule,
+    MatOptionModule,
+    MatSelectModule,
+    MatFormFieldModule,
   ],
   exports: [Table],
 })
diff --git a/frontend/app/components/controls/category_filter/BUILD b/frontend/app/components/controls/category_filter/BUILD
index 712eb0489..a66af0024 100644
--- a/frontend/app/components/controls/category_filter/BUILD
+++ b/frontend/app/components/controls/category_filter/BUILD
@@ -17,9 +17,9 @@ xprof_ng_module(
         "@npm//@angular/common",
         "@npm//@angular/core",
         "@npm//@types/google.visualization",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_core",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_form_field",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_select",
+        "@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_select",
     ],
 )
 
diff --git a/frontend/app/components/controls/category_filter/category_filter.ng.html b/frontend/app/components/controls/category_filter/category_filter.ng.html
index d2b878a97..93d23713f 100644
--- a/frontend/app/components/controls/category_filter/category_filter.ng.html
+++ b/frontend/app/components/controls/category_filter/category_filter.ng.html
@@ -1,4 +1,4 @@
-<mat-form-field class="control" *ngIf="columnLabel">
+<mat-form-field class="control" *ngIf="columnLabel" appearance="outline">
   <mat-label>{{columnLabel}}</mat-label>
   <mat-select (selectionChange)="updateFilter()" [(value)]="value">
     <mat-option *ngFor="let option of options" [value]="option">{{option}}</mat-option>
diff --git a/frontend/app/components/controls/category_filter/category_filter_module.ts b/frontend/app/components/controls/category_filter/category_filter_module.ts
index d9c62ebaf..c503f65c2 100644
--- a/frontend/app/components/controls/category_filter/category_filter_module.ts
+++ b/frontend/app/components/controls/category_filter/category_filter_module.ts
@@ -1,8 +1,8 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {MatLegacyOptionModule} from '@angular/material/legacy-core';
-import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field';
-import {MatLegacySelectModule} from '@angular/material/legacy-select';
+import {MatOptionModule} from '@angular/material/core';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatSelectModule} from '@angular/material/select';
 
 import {CategoryFilter} from './category_filter';
 
@@ -11,9 +11,9 @@ import {CategoryFilter} from './category_filter';
   declarations: [CategoryFilter],
   imports: [
     CommonModule,
-    MatLegacyOptionModule,
-    MatLegacyFormFieldModule,
-    MatLegacySelectModule,
+    MatOptionModule,
+    MatFormFieldModule,
+    MatSelectModule,
   ],
   exports: [CategoryFilter],
 })
diff --git a/frontend/app/components/controls/string_filter/BUILD b/frontend/app/components/controls/string_filter/BUILD
index dfec1b4dd..25992b4fe 100644
--- a/frontend/app/components/controls/string_filter/BUILD
+++ b/frontend/app/components/controls/string_filter/BUILD
@@ -17,9 +17,9 @@ xprof_ng_module(
         "@npm//@angular/common",
         "@npm//@angular/core",
         "@npm//@types/google.visualization",
+        "@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_legacy_form_field",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_input",
+        "@org_xprof//frontend/app/common/angular:angular_material_input",
     ],
 )
 
diff --git a/frontend/app/components/controls/string_filter/string_filter.ng.html b/frontend/app/components/controls/string_filter/string_filter.ng.html
index 6e673feda..d454a4f28 100644
--- a/frontend/app/components/controls/string_filter/string_filter.ng.html
+++ b/frontend/app/components/controls/string_filter/string_filter.ng.html
@@ -1,7 +1,7 @@
-<mat-form-field class="input-control" *ngIf="columnLabel">
+<mat-form-field class="control" *ngIf="columnLabel" style="margin-right:8px;">
+  <mat-label>{{columnLabel}}</mat-label>
   <input
     matInput
-    [placeholder]="columnLabel"
     [value]="value"
     (input)="value = $event.target.value; updateFilter()"
   />
diff --git a/frontend/app/components/controls/string_filter/string_filter.scss b/frontend/app/components/controls/string_filter/string_filter.scss
index ae2a78ccb..48aad8e9f 100644
--- a/frontend/app/components/controls/string_filter/string_filter.scss
+++ b/frontend/app/components/controls/string_filter/string_filter.scss
@@ -1,4 +1,4 @@
-/** CSS for a stats table component. */
+/** CSS for string filter component. */
 
 @import 'frontend/app/styles/common';
 
@@ -6,3 +6,10 @@ mat-icon {
   color: $button-focus-color;
   vertical-align: bottom;
 }
+
+// This control class never works for unknown reason
+// added inline style instead
+.control {
+  width: 240px;
+  margin-right: 8px;
+}
diff --git a/frontend/app/components/controls/string_filter/string_filter_module.ts b/frontend/app/components/controls/string_filter/string_filter_module.ts
index c97cc4a68..a53a78168 100644
--- a/frontend/app/components/controls/string_filter/string_filter_module.ts
+++ b/frontend/app/components/controls/string_filter/string_filter_module.ts
@@ -1,8 +1,8 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {MatIconModule} from '@angular/material/icon';
-import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field';
-import {MatLegacyInputModule} from '@angular/material/legacy-input';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatInputModule} from '@angular/material/input';
 
 import {StringFilter} from './string_filter';
 
@@ -11,9 +11,9 @@ import {StringFilter} from './string_filter';
   declarations: [StringFilter],
   imports: [
     CommonModule,
-    MatLegacyFormFieldModule,
+    MatFormFieldModule,
     MatIconModule,
-    MatLegacyInputModule,
+    MatInputModule,
   ],
   exports: [StringFilter],
 })
diff --git a/frontend/app/components/graph_viewer/BUILD b/frontend/app/components/graph_viewer/BUILD
index 552e60f9c..2a9f19a66 100644
--- a/frontend/app/components/graph_viewer/BUILD
+++ b/frontend/app/components/graph_viewer/BUILD
@@ -19,7 +19,7 @@ xprof_ng_module(
         "@npm//@angular/router",
         "@npm//@ngrx/store",
         "@npm//rxjs",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_core",
+        "@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_sidenav",
         "@org_xprof//frontend/app/common/constants",
diff --git a/frontend/app/components/graph_viewer/graph_config/BUILD b/frontend/app/components/graph_viewer/graph_config/BUILD
index 4d67e0bff..26d9d5555 100644
--- a/frontend/app/components/graph_viewer/graph_config/BUILD
+++ b/frontend/app/components/graph_viewer/graph_config/BUILD
@@ -19,13 +19,13 @@ 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_legacy_checkbox",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_core",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_form_field",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_input",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_select",
+        "@org_xprof//frontend/app/common/angular:angular_material_input",
         "@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",
         "@org_xprof//frontend/app/common/interfaces",
     ],
diff --git a/frontend/app/components/graph_viewer/graph_config/graph_config.ng.html b/frontend/app/components/graph_viewer/graph_config/graph_config.ng.html
index 284a99eb0..c7bd2fa1f 100644
--- a/frontend/app/components/graph_viewer/graph_config/graph_config.ng.html
+++ b/frontend/app/components/graph_viewer/graph_config/graph_config.ng.html
@@ -1,11 +1,11 @@
-<div class="item-container">
+<div class="form-container">
   <form (ngSubmit)="onSubmit()">
     <div class="row" *ngIf="!isHloOssTool" id="xla-module-list-header">
       <div [ngClass]="{ 'mat-subheading-2': true }">
         XLA Modules ({{ moduleList.length }})
       </div>
     </div>
-    <mat-form-field class="full-width" *ngIf="!isHloOssTool" id="xla-module-list-selector">
+    <mat-form-field class="full-width" *ngIf="!isHloOssTool" id="xla-module-list-selector" appearance="outline">
       <mat-select
         name="selectedModule"
         panelClass="panel-override"
diff --git a/frontend/app/components/graph_viewer/graph_config/graph_config.scss b/frontend/app/components/graph_viewer/graph_config/graph_config.scss
index e7894593d..f95e86839 100644
--- a/frontend/app/components/graph_viewer/graph_config/graph_config.scss
+++ b/frontend/app/components/graph_viewer/graph_config/graph_config.scss
@@ -2,10 +2,6 @@
 
 @import 'frontend/app/styles/common';
 
-.item-container {
-  padding: 20px 20px 0;
-}
-
 .mat-subheading-2 {
   margin-bottom: 0;
 }
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 84c721615..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,11 +3,11 @@ 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 {MatLegacyOptionModule} from '@angular/material/legacy-core';
-import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field';
-import {MatLegacyInputModule} from '@angular/material/legacy-input';
-import {MatLegacySelectModule} from '@angular/material/legacy-select';
+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';
+import {MatSelectModule} from '@angular/material/select';
 import {MatLegacyTooltipModule} from '@angular/material/legacy-tooltip';
 import {MatSidenavModule} from '@angular/material/sidenav';
 
@@ -18,12 +18,12 @@ import {GraphConfig} from './graph_config';
     CommonModule,
     FormsModule,
     MatButtonModule,
-    MatLegacyCheckboxModule,
-    MatLegacyFormFieldModule,
+    MatCheckboxModule,
+    MatFormFieldModule,
     MatIconModule,
-    MatLegacyInputModule,
-    MatLegacyOptionModule,
-    MatLegacySelectModule,
+    MatInputModule,
+    MatOptionModule,
+    MatSelectModule,
     MatSidenavModule,
     MatLegacyTooltipModule,
   ],
diff --git a/frontend/app/components/graph_viewer/graph_viewer.ng.html b/frontend/app/components/graph_viewer/graph_viewer.ng.html
index 33de13925..ce7fe9870 100644
--- a/frontend/app/components/graph_viewer/graph_viewer.ng.html
+++ b/frontend/app/components/graph_viewer/graph_viewer.ng.html
@@ -1,6 +1,6 @@
 <mat-sidenav-container>
   <mat-sidenav mode="side" opened>
-    <div class="row">
+    <div class="item-container">
       <graph-config [initialInputs]="initialParams" [moduleList]="moduleList" [isHloOssTool]="true" (plot)="onPlot()" (update)="onUpdateParam($event)"></graph-config>
     </div>
   </mat-sidenav>
diff --git a/frontend/app/components/graph_viewer/graph_viewer.scss b/frontend/app/components/graph_viewer/graph_viewer.scss
index 71f237361..65866d35c 100644
--- a/frontend/app/components/graph_viewer/graph_viewer.scss
+++ b/frontend/app/components/graph_viewer/graph_viewer.scss
@@ -6,14 +6,14 @@
   padding: 20px 20px 0;
 }
 
-.row {
-  display: flex;
-}
-
 mat-sidenav {
-  @include border-right-gray;
   background: transparent;
-  width: 340px;
+  width: 25%;
+  min-width: 350px;
+}
+
+mat-sidenav-content {
+  width: 75%;
 }
 
 mat-sidenav-container {
@@ -25,7 +25,7 @@ iframe {
   top: 0;
   width: 100%;
   height: 100%;
-  box-sizing: border-box;
+  border: none;
 }
 
 mat-progress-bar {
diff --git a/frontend/app/components/graph_viewer/graph_viewer_module.ts b/frontend/app/components/graph_viewer/graph_viewer_module.ts
index 80fe213ba..ab6355c82 100644
--- a/frontend/app/components/graph_viewer/graph_viewer_module.ts
+++ b/frontend/app/components/graph_viewer/graph_viewer_module.ts
@@ -1,6 +1,6 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {MatLegacyOptionModule} from '@angular/material/legacy-core';
+import {MatOptionModule} from '@angular/material/core';
 import {MatLegacyProgressBarModule} from '@angular/material/legacy-progress-bar';
 import {MatSidenavModule} from '@angular/material/sidenav';
 import {DiagnosticsViewModule} from 'org_xprof/frontend/app/components/diagnostics_view/diagnostics_view_module';
@@ -13,7 +13,7 @@ import {GraphViewer} from './graph_viewer';
   imports: [
     CommonModule,
     DiagnosticsViewModule,
-    MatLegacyOptionModule,
+    MatOptionModule,
     MatLegacyProgressBarModule,
     MatSidenavModule,
     PipesModule,
diff --git a/frontend/app/components/kernel_stats/kernel_stats_table/BUILD b/frontend/app/components/kernel_stats/kernel_stats_table/BUILD
index c5dd757f0..2fbea08e6 100644
--- a/frontend/app/components/kernel_stats/kernel_stats_table/BUILD
+++ b/frontend/app/components/kernel_stats/kernel_stats_table/BUILD
@@ -16,9 +16,9 @@ xprof_ng_module(
     deps = [
         "@npm//@angular/core",
         "@npm//@types/google.visualization",
+        "@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_legacy_form_field",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_input",
+        "@org_xprof//frontend/app/common/angular:angular_material_input",
         "@org_xprof//frontend/app/common/interfaces",
     ],
 )
diff --git a/frontend/app/components/kernel_stats/kernel_stats_table/kernel_stats_table_module.ts b/frontend/app/components/kernel_stats/kernel_stats_table/kernel_stats_table_module.ts
index 5b27fe337..6ce0ea9d5 100644
--- a/frontend/app/components/kernel_stats/kernel_stats_table/kernel_stats_table_module.ts
+++ b/frontend/app/components/kernel_stats/kernel_stats_table/kernel_stats_table_module.ts
@@ -1,16 +1,16 @@
 import {NgModule} from '@angular/core';
 import {MatIconModule} from '@angular/material/icon';
-import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field';
-import {MatLegacyInputModule} from '@angular/material/legacy-input';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatInputModule} from '@angular/material/input';
 
 import {KernelStatsTable} from './kernel_stats_table';
 
 @NgModule({
   declarations: [KernelStatsTable],
   imports: [
-    MatLegacyFormFieldModule,
+    MatFormFieldModule,
     MatIconModule,
-    MatLegacyInputModule,
+    MatInputModule,
   ],
   exports: [KernelStatsTable]
 })
diff --git a/frontend/app/components/memory_profile/BUILD b/frontend/app/components/memory_profile/BUILD
index 258db015d..fc3efa286 100644
--- a/frontend/app/components/memory_profile/BUILD
+++ b/frontend/app/components/memory_profile/BUILD
@@ -20,10 +20,10 @@ xprof_ng_module(
         "@npm//@angular/router",
         "@npm//@ngrx/store",
         "@npm//rxjs",
+        "@org_xprof//frontend/app/common/angular:angular_material_core",
         "@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_core",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_select",
+        "@org_xprof//frontend/app/common/angular:angular_material_select",
         "@org_xprof//frontend/app/common/interfaces",
         "@org_xprof//frontend/app/components/memory_profile/memory_breakdown_table",
         "@org_xprof//frontend/app/components/memory_profile/memory_profile_summary",
diff --git a/frontend/app/components/memory_profile/memory_breakdown_table/BUILD b/frontend/app/components/memory_profile/memory_breakdown_table/BUILD
index b03d42b82..db0971f18 100644
--- a/frontend/app/components/memory_profile/memory_breakdown_table/BUILD
+++ b/frontend/app/components/memory_profile/memory_breakdown_table/BUILD
@@ -16,9 +16,9 @@ xprof_ng_module(
     deps = [
         "@npm//@angular/core",
         "@npm//@types/google.visualization",
+        "@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_legacy_form_field",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_input",
+        "@org_xprof//frontend/app/common/angular:angular_material_input",
         "@org_xprof//frontend/app/common/interfaces",
         "@org_xprof//frontend/app/common/interfaces:memory_profile_proto_defs",
         "@org_xprof//frontend/app/common/utils",
diff --git a/frontend/app/components/memory_profile/memory_breakdown_table/memory_breakdown_table_module.ts b/frontend/app/components/memory_profile/memory_breakdown_table/memory_breakdown_table_module.ts
index aab29844a..5dbd902c8 100644
--- a/frontend/app/components/memory_profile/memory_breakdown_table/memory_breakdown_table_module.ts
+++ b/frontend/app/components/memory_profile/memory_breakdown_table/memory_breakdown_table_module.ts
@@ -1,16 +1,16 @@
 import {NgModule} from '@angular/core';
 import {MatIconModule} from '@angular/material/icon';
-import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field';
-import {MatLegacyInputModule} from '@angular/material/legacy-input';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatInputModule} from '@angular/material/input';
 
 import {MemoryBreakdownTable} from './memory_breakdown_table';
 
 @NgModule({
   declarations: [MemoryBreakdownTable],
   imports: [
-    MatLegacyFormFieldModule,
+    MatFormFieldModule,
     MatIconModule,
-    MatLegacyInputModule,
+    MatInputModule,
   ],
   exports: [MemoryBreakdownTable]
 })
diff --git a/frontend/app/components/memory_profile/memory_profile.ng.html b/frontend/app/components/memory_profile/memory_profile.ng.html
index 350fa28f0..29c0edb2f 100644
--- a/frontend/app/components/memory_profile/memory_profile.ng.html
+++ b/frontend/app/components/memory_profile/memory_profile.ng.html
@@ -15,7 +15,7 @@
                   <div class="description">show memory profile for selected device</div>
                 </td>
                 <td class="item-value">
-                  <mat-form-field>
+                  <mat-form-field appearance="outline">
                     <mat-select [(value)]="selectedMemoryId">
                       <mat-option *ngFor="let id of memoryIds" [value]="id">
                         {{ id }}
diff --git a/frontend/app/components/memory_profile/memory_profile_common.scss b/frontend/app/components/memory_profile/memory_profile_common.scss
index 925b37700..42b640d17 100644
--- a/frontend/app/components/memory_profile/memory_profile_common.scss
+++ b/frontend/app/components/memory_profile/memory_profile_common.scss
@@ -62,6 +62,6 @@ mat-form-field {
   margin-bottom: 0;
 }
 
-.mat-form-field {
+.mat-mdc-form-field {
   padding-left: 10px;
 }
diff --git a/frontend/app/components/memory_profile/memory_profile_module.ts b/frontend/app/components/memory_profile/memory_profile_module.ts
index 31ef4a5d0..1e3a0d9cc 100644
--- a/frontend/app/components/memory_profile/memory_profile_module.ts
+++ b/frontend/app/components/memory_profile/memory_profile_module.ts
@@ -2,8 +2,8 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {MatDividerModule} from '@angular/material/divider';
 import {MatIconModule} from '@angular/material/icon';
-import {MatLegacyOptionModule} from '@angular/material/legacy-core';
-import {MatLegacySelectModule} from '@angular/material/legacy-select';
+import {MatOptionModule} from '@angular/material/core';
+import {MatSelectModule} from '@angular/material/select';
 import {MemoryBreakdownTableModule} from 'org_xprof/frontend/app/components/memory_profile/memory_breakdown_table/memory_breakdown_table_module';
 import {MemoryProfileSummaryModule} from 'org_xprof/frontend/app/components/memory_profile/memory_profile_summary/memory_profile_summary_module';
 import {MemoryTimelineGraphModule} from 'org_xprof/frontend/app/components/memory_profile/memory_timeline_graph/memory_timeline_graph_module';
@@ -17,8 +17,8 @@ import {MemoryProfile} from './memory_profile';
     CommonModule,
     MatDividerModule,
     MatIconModule,
-    MatLegacySelectModule,
-    MatLegacyOptionModule,
+    MatSelectModule,
+    MatOptionModule,
     MemoryProfileSummaryModule,
     MemoryTimelineGraphModule,
     MemoryBreakdownTableModule,
diff --git a/frontend/app/components/memory_profile/memory_profile_summary/BUILD b/frontend/app/components/memory_profile/memory_profile_summary/BUILD
index f87f52b4d..2f68bd07a 100644
--- a/frontend/app/components/memory_profile/memory_profile_summary/BUILD
+++ b/frontend/app/components/memory_profile/memory_profile_summary/BUILD
@@ -1,5 +1,5 @@
-load("//defs:defs.bzl", "xprof_ng_module")
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
+load("//defs:defs.bzl", "xprof_ng_module")
 
 package(default_visibility = ["//frontend:internal"])
 
diff --git a/frontend/app/components/memory_profile/memory_timeline_graph/BUILD b/frontend/app/components/memory_profile/memory_timeline_graph/BUILD
index a892502e6..ffa9becee 100644
--- a/frontend/app/components/memory_profile/memory_timeline_graph/BUILD
+++ b/frontend/app/components/memory_profile/memory_timeline_graph/BUILD
@@ -1,5 +1,5 @@
-load("//defs:defs.bzl", "xprof_ng_module")
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
+load("//defs:defs.bzl", "xprof_ng_module")
 
 package(default_visibility = ["//frontend:internal"])
 
diff --git a/frontend/app/components/memory_viewer/buffer_details/BUILD b/frontend/app/components/memory_viewer/buffer_details/BUILD
index 44aaef215..f097c502c 100644
--- a/frontend/app/components/memory_viewer/buffer_details/BUILD
+++ b/frontend/app/components/memory_viewer/buffer_details/BUILD
@@ -1,5 +1,5 @@
-load("//defs:defs.bzl", "xprof_ng_module")
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
+load("//defs:defs.bzl", "xprof_ng_module")
 
 package(default_visibility = ["//frontend:internal"])
 
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/op_profile/BUILD b/frontend/app/components/op_profile/BUILD
index 9a40cdac2..01ad7982b 100644
--- a/frontend/app/components/op_profile/BUILD
+++ b/frontend/app/components/op_profile/BUILD
@@ -20,9 +20,9 @@ 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_legacy_form_field",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_input",
+        "@org_xprof//frontend/app/common/angular:angular_material_input",
         "@org_xprof//frontend/app/common/angular:angular_material_legacy_slide_toggle",
         "@org_xprof//frontend/app/common/angular:angular_material_legacy_slider",
         "@org_xprof//frontend/app/common/angular:angular_material_legacy_tooltip",
diff --git a/frontend/app/components/op_profile/op_details/op_details.scss b/frontend/app/components/op_profile/op_details/op_details.scss
index 500945b3f..e57b89f32 100644
--- a/frontend/app/components/op_profile/op_details/op_details.scss
+++ b/frontend/app/components/op_profile/op_details/op_details.scss
@@ -98,7 +98,8 @@ mat-card {
   display: table-cell;
 }
 
-.size, .size-x {
+.size,
+.size-x {
   text-align: center;
   width: 20%;
 }
diff --git a/frontend/app/components/op_profile/op_profile.ng.html b/frontend/app/components/op_profile/op_profile.ng.html
index e7618aaf2..4ad127a59 100644
--- a/frontend/app/components/op_profile/op_profile.ng.html
+++ b/frontend/app/components/op_profile/op_profile.ng.html
@@ -32,27 +32,20 @@
     <div class="ops-control">
       <div class="ops-control-title">
         Show top&nbsp;
-        <mat-form-field class="children-count-input">
+        <mat-form-field class="children-count-input" appearance="outline">
+          <mat-label>#</mat-label>
           <input
                  matInput
                  type="number"
+                 matTooltip="10 ~ 100 with increment of 10, numbers will be rounded"
                  [min]="10"
                  [max]="100"
                  [step]="10"
                  [value]="childrenCount"
-                 (input)="updateChildrenCount($event.target.value)" />
+                 (change)="updateChildrenCount($event.target.value)" />
         </mat-form-field>
         &nbsp;ops
       </div>
-      <div>
-        <mat-slider
-                    [min]="10"
-                    [max]="100"
-                    [step]="10"
-                    [value]="childrenCount"
-                    (change)="updateChildrenCount($event.value)">
-        </mat-slider>
-      </div>
     </div>
     <div class="control">
       <div class="control-title">Sort by wasted time
diff --git a/frontend/app/components/op_profile/op_profile_module.ts b/frontend/app/components/op_profile/op_profile_module.ts
index 5b538a7fa..53a3288be 100644
--- a/frontend/app/components/op_profile/op_profile_module.ts
+++ b/frontend/app/components/op_profile/op_profile_module.ts
@@ -1,7 +1,7 @@
 import {NgModule} from '@angular/core';
 import {MatIconModule} from '@angular/material/icon';
-import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field';
-import {MatLegacyInputModule} from '@angular/material/legacy-input';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatInputModule} from '@angular/material/input';
 import {MatLegacySlideToggleModule} from '@angular/material/legacy-slide-toggle';
 import {MatLegacySliderModule} from '@angular/material/legacy-slider';
 import {MatLegacyTooltipModule} from '@angular/material/legacy-tooltip';
@@ -13,8 +13,8 @@ import {OpTableModule} from './op_table/op_table_module';
 @NgModule({
   declarations: [OpProfile],
   imports: [
-    MatLegacyFormFieldModule,
-    MatLegacyInputModule,
+    MatFormFieldModule,
+    MatInputModule,
     MatLegacySliderModule,
     MatLegacySlideToggleModule,
     OpTableModule,
diff --git a/frontend/app/components/overview/performance_summary/BUILD b/frontend/app/components/overview/performance_summary/BUILD
index a060da080..2a2bd19dd 100644
--- a/frontend/app/components/overview/performance_summary/BUILD
+++ b/frontend/app/components/overview/performance_summary/BUILD
@@ -1,5 +1,5 @@
-load("//defs:defs.bzl", "xprof_ng_module")
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
+load("//defs:defs.bzl", "xprof_ng_module")
 
 package(default_visibility = ["//frontend:internal"])
 
diff --git a/frontend/app/components/overview/recommendation_result_view/BUILD b/frontend/app/components/overview/recommendation_result_view/BUILD
index 91175116e..d81754afb 100644
--- a/frontend/app/components/overview/recommendation_result_view/BUILD
+++ b/frontend/app/components/overview/recommendation_result_view/BUILD
@@ -1,5 +1,5 @@
-load("//defs:defs.bzl", "xprof_ng_module")
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
+load("//defs:defs.bzl", "xprof_ng_module")
 
 package(default_visibility = ["//frontend:internal"])
 
diff --git a/frontend/app/components/overview/run_environment_view/BUILD b/frontend/app/components/overview/run_environment_view/BUILD
index 106fd5083..817c96c19 100644
--- a/frontend/app/components/overview/run_environment_view/BUILD
+++ b/frontend/app/components/overview/run_environment_view/BUILD
@@ -1,5 +1,5 @@
-load("//defs:defs.bzl", "xprof_ng_module")
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
+load("//defs:defs.bzl", "xprof_ng_module")
 
 package(default_visibility = ["//frontend:internal"])
 
diff --git a/frontend/app/components/overview/step_time_graph/BUILD b/frontend/app/components/overview/step_time_graph/BUILD
index cb0e0090e..3aee8c54e 100644
--- a/frontend/app/components/overview/step_time_graph/BUILD
+++ b/frontend/app/components/overview/step_time_graph/BUILD
@@ -1,5 +1,5 @@
-load("//defs:defs.bzl", "xprof_ng_module")
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
+load("//defs:defs.bzl", "xprof_ng_module")
 
 package(default_visibility = ["//frontend:internal"])
 
diff --git a/frontend/app/components/pod_viewer/pod_viewer_details/BUILD b/frontend/app/components/pod_viewer/pod_viewer_details/BUILD
index ef0714af5..62c5055cd 100644
--- a/frontend/app/components/pod_viewer/pod_viewer_details/BUILD
+++ b/frontend/app/components/pod_viewer/pod_viewer_details/BUILD
@@ -1,5 +1,5 @@
-load("//defs:defs.bzl", "xprof_ng_module")
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
+load("//defs:defs.bzl", "xprof_ng_module")
 
 package(default_visibility = ["//frontend:internal"])
 
diff --git a/frontend/app/components/pod_viewer/topology_graph/BUILD b/frontend/app/components/pod_viewer/topology_graph/BUILD
index 390592597..c6a215198 100644
--- a/frontend/app/components/pod_viewer/topology_graph/BUILD
+++ b/frontend/app/components/pod_viewer/topology_graph/BUILD
@@ -19,9 +19,9 @@ 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_form_field",
         "@org_xprof//frontend/app/common/angular:angular_material_icon",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_form_field",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_input",
+        "@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/constants",
diff --git a/frontend/app/components/pod_viewer/topology_graph/topology_graph.ng.html b/frontend/app/components/pod_viewer/topology_graph/topology_graph.ng.html
index b0452f145..09bf07e47 100644
--- a/frontend/app/components/pod_viewer/topology_graph/topology_graph.ng.html
+++ b/frontend/app/components/pod_viewer/topology_graph/topology_graph.ng.html
@@ -29,7 +29,8 @@
         [value]="selectedChannelIndex"
         (change)="updateChannelIndex($event.value)">
       </mat-slider>
-      <mat-form-field class="channel-input">
+      <mat-form-field class="channel-input" appearance="outline">
+        <mat-label>Channel id</mat-label>
         <input
           matInput
           type="number"
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 10e34ced0..7cbdfa081 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
@@ -2,8 +2,8 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {MatIconModule} from '@angular/material/icon';
 import {MatButtonModule} from '@angular/material/button';
-import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field';
-import {MatLegacyInputModule} from '@angular/material/legacy-input';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatInputModule} from '@angular/material/input';
 import {MatLegacyMenuModule} from '@angular/material/legacy-menu';
 import {MatLegacySliderModule} from '@angular/material/legacy-slider';
 
@@ -15,9 +15,9 @@ import {TopologyGraph} from './topology_graph';
   imports: [
     CommonModule,
     MatButtonModule,
-    MatLegacyFormFieldModule,
+    MatFormFieldModule,
     MatIconModule,
-    MatLegacyInputModule,
+    MatInputModule,
     MatLegacyMenuModule,
     MatLegacySliderModule,
   ],
diff --git a/frontend/app/components/sidenav/BUILD b/frontend/app/components/sidenav/BUILD
index f4a26ecbd..21496bd40 100644
--- a/frontend/app/components/sidenav/BUILD
+++ b/frontend/app/components/sidenav/BUILD
@@ -18,9 +18,9 @@ xprof_ng_module(
         "@npm//@angular/router",
         "@npm//@ngrx/store",
         "@npm//rxjs",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_core",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_form_field",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_select",
+        "@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_select",
         "@org_xprof//frontend/app/common/constants",
         "@org_xprof//frontend/app/common/interfaces",
         "@org_xprof//frontend/app/common/utils",
diff --git a/frontend/app/components/sidenav/sidenav.ng.html b/frontend/app/components/sidenav/sidenav.ng.html
index bf658d149..edb94607c 100644
--- a/frontend/app/components/sidenav/sidenav.ng.html
+++ b/frontend/app/components/sidenav/sidenav.ng.html
@@ -7,7 +7,7 @@
     Runs ({{runs.length}})
   </div>
 
-  <mat-form-field class="full-width">
+  <mat-form-field class="full-width" appearance="outline">
     <mat-select panelClass="panel-override" [(value)]="selectedRun" [disabled]="!runs.length" (selectionChange)="afterUpdateRun()">
       <mat-option *ngFor="let run of runs" [value]="run">
         {{run}}
@@ -21,7 +21,7 @@
     Tools ({{tags.length}})
   </div>
 
-  <mat-form-field class="full-width">
+  <mat-form-field class="full-width" appearance="outline">
     <mat-select panelClass="panel-override" [(value)]="selectedTag" [disabled]="!tags.length" (selectionChange)="afterUpdateTag()">
       <mat-option *ngFor="let tag of tags" [value]="tag">
         {{getDisplayTagName(tag)}}
@@ -35,7 +35,7 @@
     {{hostSelectorDisplayName}}
   </div>
 
-  <mat-form-field class="full-width">
+  <mat-form-field class="full-width" appearance="outline">
     <mat-select panelClass="panel-override" [(value)]="selectedHost" [disabled]="!hosts.length" (selectionChange)="afterUpdateHost()">
       <mat-option *ngFor="let host of hosts" [value]="host">
         {{host}}
diff --git a/frontend/app/components/sidenav/sidenav_module.ts b/frontend/app/components/sidenav/sidenav_module.ts
index 78942ab23..3855f480e 100644
--- a/frontend/app/components/sidenav/sidenav_module.ts
+++ b/frontend/app/components/sidenav/sidenav_module.ts
@@ -1,8 +1,8 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {MatLegacyOptionModule} from '@angular/material/legacy-core';
-import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field';
-import {MatLegacySelectModule} from '@angular/material/legacy-select';
+import {MatOptionModule} from '@angular/material/core';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatSelectModule} from '@angular/material/select';
 import {CaptureProfileModule} from 'org_xprof/frontend/app/components/capture_profile/capture_profile_module';
 import {BufferDetailsModule} from 'org_xprof/frontend/app/components/memory_viewer/buffer_details/buffer_details_module';
 import {OpDetailsModule} from 'org_xprof/frontend/app/components/op_profile/op_details/op_details_module';
@@ -15,9 +15,9 @@ import {SideNav} from './sidenav';
   declarations: [SideNav],
   imports: [
     CommonModule,
-    MatLegacyFormFieldModule,
-    MatLegacySelectModule,
-    MatLegacyOptionModule,
+    MatFormFieldModule,
+    MatSelectModule,
+    MatOptionModule,
     BufferDetailsModule,
     CaptureProfileModule,
     OpDetailsModule,
diff --git a/frontend/app/components/tensorflow_stats/stats_table/BUILD b/frontend/app/components/tensorflow_stats/stats_table/BUILD
index 414767bc7..589afe842 100644
--- a/frontend/app/components/tensorflow_stats/stats_table/BUILD
+++ b/frontend/app/components/tensorflow_stats/stats_table/BUILD
@@ -16,9 +16,9 @@ xprof_ng_module(
     deps = [
         ":stats_table_data_provider",
         "@npm//@angular/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_legacy_form_field",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_input",
+        "@org_xprof//frontend/app/common/angular:angular_material_input",
         "@org_xprof//frontend/app/common/interfaces",
         "@org_xprof//frontend/app/common/interfaces:chart",
         "@org_xprof//frontend/app/components/chart",
diff --git a/frontend/app/components/tensorflow_stats/stats_table/stats_table.ng.html b/frontend/app/components/tensorflow_stats/stats_table/stats_table.ng.html
index 556c3fa29..fb458eb19 100644
--- a/frontend/app/components/tensorflow_stats/stats_table/stats_table.ng.html
+++ b/frontend/app/components/tensorflow_stats/stats_table/stats_table.ng.html
@@ -1,27 +1,27 @@
 <div>
   <div class="mat-headline">TensorFlow operations</div>
   <mat-form-field>
+    <mat-label>Host/device</mat-label>
     <input
            matInput
-           placeholder="Host/device"
            [value]="filterExecutor"
-           (input)="filterExecutor = $event.target.value; updateFilters();">
+           (change)="filterExecutor = $event.target.value; updateFilters();">
     <mat-icon matSuffix>search</mat-icon>
   </mat-form-field>
   <mat-form-field>
+    <mat-label>Type</mat-label>
     <input
            matInput
-           placeholder="Type"
            [value]="filterType"
-           (input)="filterType = $event.target.value; updateFilters();">
+           (change)="filterType = $event.target.value; updateFilters();">
     <mat-icon matSuffix>search</mat-icon>
   </mat-form-field>
   <mat-form-field>
+    <mat-label>Operation</mat-label>
     <input
            matInput
-           placeholder="Operation"
            [value]="filterOperation"
-           (input)="filterOperation = $event.target.value; updateFilters();">
+           (change)="filterOperation = $event.target.value; updateFilters();">
     <mat-icon matSuffix>search</mat-icon>
   </mat-form-field>
 </div>
diff --git a/frontend/app/components/tensorflow_stats/stats_table/stats_table_module.ts b/frontend/app/components/tensorflow_stats/stats_table/stats_table_module.ts
index 23a6d33b4..ec6557b36 100644
--- a/frontend/app/components/tensorflow_stats/stats_table/stats_table_module.ts
+++ b/frontend/app/components/tensorflow_stats/stats_table/stats_table_module.ts
@@ -1,8 +1,8 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {MatIconModule} from '@angular/material/icon';
-import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field';
-import {MatLegacyInputModule} from '@angular/material/legacy-input';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatInputModule} from '@angular/material/input';
 import {ChartModule} from 'org_xprof/frontend/app/components/chart/chart';
 
 import {StatsTable} from './stats_table';
@@ -11,9 +11,9 @@ import {StatsTable} from './stats_table';
   declarations: [StatsTable],
   imports: [
     CommonModule,
-    MatLegacyFormFieldModule,
+    MatFormFieldModule,
     MatIconModule,
-    MatLegacyInputModule,
+    MatInputModule,
     ChartModule,
   ],
   exports: [StatsTable],
diff --git a/frontend/app/styles/common.scss b/frontend/app/styles/common.scss
index 59b510354..81d3c6a6c 100644
--- a/frontend/app/styles/common.scss
+++ b/frontend/app/styles/common.scss
@@ -48,6 +48,11 @@ $dark-theme-card-title-color: #fff;
   padding: 20px 20px 0;
 }
 
+.row {
+  display: flex;
+  align-items: center;
+}
+
 mat-card {
   // MDC mat-card does not have padding by default
   // Add padding to keep style persistent during migration
diff --git a/frontend/styles.scss b/frontend/styles.scss
index 234b9bbb0..3cb1a0e4b 100644
--- a/frontend/styles.scss
+++ b/frontend/styles.scss
@@ -29,6 +29,13 @@ $theme: mat.define-light-theme(
 @include mat.button-theme($theme);
 @include mat.icon-button-theme($theme);
 @include mat.card-theme($theme);
+@include mat.autocomplete-theme($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.dialog-theme($theme);
 
 html, body {
   height: 100%;
@@ -104,7 +111,7 @@ sidenav mat-form-field .mat-select-value {
   color: #777;
 }
 
-op-profile .ops-control .mat-form-field {
+op-profile .ops-control .mat-mdc-form-field {
   text-align: center !important;
 }