From 2bcffaaa643c5d0eb2d1071a96771aae56633521 Mon Sep 17 00:00:00 2001
From: Yin Zhang <yinzz@google.com>
Date: Thu, 14 Sep 2023 19:35:37 -0700
Subject: [PATCH] Migration to use the new MDC-based Angular Components.
 Components migrated: core, autocomplete, form-field, input, select

PiperOrigin-RevId: 565544760
---
 frontend/app/common/angular/BUILD                |  8 ++++----
 .../capture_profile/capture_profile_dialog/BUILD |  6 +++---
 .../capture_profile_dialog.ng.html               |  6 +++---
 .../capture_profile_dialog_module.ts             | 12 ++++++------
 frontend/app/components/chart/table/BUILD        |  6 +++---
 .../app/components/chart/table/table.ng.html     |  2 +-
 .../app/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 ++++++------
 .../app/components/controls/string_filter/BUILD  |  4 ++--
 .../controls/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 +-
 .../components/graph_viewer/graph_config/BUILD   |  8 ++++----
 .../graph_config/graph_config.ng.html            |  4 ++--
 .../graph_viewer/graph_config/graph_config.scss  |  4 ----
 .../graph_config/graph_config_module.ts          | 16 ++++++++--------
 .../components/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_profile/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/memory_profile_summary/BUILD  |  2 +-
 .../memory_profile/memory_timeline_graph/BUILD   |  2 +-
 .../memory_viewer/buffer_details/BUILD           |  2 +-
 frontend/app/components/op_profile/BUILD         |  4 ++--
 .../op_profile/op_details/op_details.scss        |  3 ++-
 .../app/components/op_profile/op_profile.ng.html | 15 ++++-----------
 .../components/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 +-
 .../components/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 +++---
 frontend/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                             |  7 ++++++-
 53 files changed, 160 insertions(+), 152 deletions(-)

diff --git a/frontend/app/common/angular/BUILD b/frontend/app/common/angular/BUILD
index 94f467f0..e39a0808 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",
@@ -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/capture_profile_dialog/BUILD b/frontend/app/components/capture_profile/capture_profile_dialog/BUILD
index 84d09e68..3c1d471d 100644
--- a/frontend/app/components/capture_profile/capture_profile_dialog/BUILD
+++ b/frontend/app/components/capture_profile/capture_profile_dialog/BUILD
@@ -20,12 +20,12 @@ xprof_ng_module(
         "@npm//@angular/platform-browser",
         "@org_xprof//frontend/app/common/angular:angular_material_button",
         "@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_form_field",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_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 ecd13e0a..13b49293 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_module.ts b/frontend/app/components/capture_profile/capture_profile_dialog/capture_profile_dialog_module.ts
index cfa0c951..a8651940 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
@@ -4,10 +4,10 @@ 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 {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';
 
@@ -23,10 +23,10 @@ import {CaptureProfileDialog} from './capture_profile_dialog';
     MatButtonModule,
     MatLegacyDialogModule,
     MatExpansionModule,
-    MatLegacyFormFieldModule,
-    MatLegacyInputModule,
+    MatFormFieldModule,
+    MatInputModule,
     MatLegacyRadioModule,
-    MatLegacySelectModule,
+    MatSelectModule,
     MatLegacyTooltipModule,
   ],
   exports: [CaptureProfileDialog]
diff --git a/frontend/app/components/chart/table/BUILD b/frontend/app/components/chart/table/BUILD
index e63d7910..c119dd83 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 190c310f..1e84654b 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 cdf63d87..e6d310ca 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 712eb048..a66af002 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 d2b878a9..93d23713 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 d9c62eba..c503f65c 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 dfec1b4d..25992b4f 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 6e673fed..d454a4f2 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 ae2a78cc..48aad8e9 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 c97cc4a6..a53a7816 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 552e60f9..2a9f19a6 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 4d67e0bf..63201ee1 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_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_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_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 284a99eb..c7bd2fa1 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 e7894593..f95e8683 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 84c72161..34cc6681 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
@@ -4,10 +4,10 @@ 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 {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';
 
@@ -19,11 +19,11 @@ import {GraphConfig} from './graph_config';
     FormsModule,
     MatButtonModule,
     MatLegacyCheckboxModule,
-    MatLegacyFormFieldModule,
+    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 33de1392..ce7fe987 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 71f23736..65866d35 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 80fe213b..ab6355c8 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 c5dd757f..2fbea08e 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 5b27fe33..6ce0ea9d 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 258db015..fc3efa28 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 b03d42b8..db0971f1 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 aab29844..5dbd902c 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 350fa28f..29c0edb2 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 925b3770..42b640d1 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 31ef4a5d..1e3a0d9c 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 f87f52b4..2f68bd07 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 a892502e..ffa9bece 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 44aaef21..f097c502 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/op_profile/BUILD b/frontend/app/components/op_profile/BUILD
index 9a40cdac..01ad7982 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 500945b3..e57b89f3 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 e7618aaf..4ad127a5 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 5b538a7f..53a3288b 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 a060da08..2a2bd19d 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 91175116..d81754af 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 106fd508..817c96c1 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 cb0e0090..3aee8c54 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 ef0714af..62c5055c 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 39059259..c6a21519 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 b0452f14..09bf07e4 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 10e34ced..7cbdfa08 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 f4a26ecb..21496bd4 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 bf658d14..edb94607 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 78942ab2..3855f480 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 414767bc..589afe84 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 556c3fa2..fb458eb1 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 23a6d33b..ec6557b3 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 59b51035..81d3c6a6 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 234b9bbb..9ca8ef4e 100644
--- a/frontend/styles.scss
+++ b/frontend/styles.scss
@@ -29,6 +29,11 @@ $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.select-theme($theme);
 
 html, body {
   height: 100%;
@@ -104,7 +109,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;
 }