From 0815e0b854aa066cc69208b9bf3a3d26dc2b6159 Mon Sep 17 00:00:00 2001 From: Yin Zhang Date: Wed, 13 Sep 2023 16:31:43 -0700 Subject: [PATCH] Migration to use the new MDC-based Angular Components. Components migrated: snack-bar PiperOrigin-RevId: 565194998 --- frontend/app/common/angular/BUILD | 4 +- frontend/app/components/capture_profile/BUILD | 2 +- .../capture_profile/capture_profile.ts | 4 +- .../capture_profile/capture_profile_module.ts | 4 +- frontend/app/components/op_profile/BUILD | 1 - .../op_profile/op_profile_module.ts | 6 +- frontend/app/components/pod_viewer/BUILD | 2 +- .../components/pod_viewer/pod_viewer.ng.html | 3 +- .../pod_viewer/pod_viewer_module.ts | 4 +- .../pod_viewer/topology_graph/BUILD | 2 +- .../topology_graph/topology_graph.ng.html | 4 +- .../topology_graph/topology_graph_module.ts | 4 +- frontend/app/components/range_slider/BUILD | 29 ------ .../app/components/range_slider/README.md | 16 ---- .../range_slider/range_slider.ng.html | 17 ---- .../components/range_slider/range_slider.scss | 43 --------- .../components/range_slider/range_slider.ts | 90 ------------------- .../range_slider/range_slider_module.ts | 13 --- frontend/styles.scss | 2 + 19 files changed, 19 insertions(+), 231 deletions(-) delete mode 100644 frontend/app/components/range_slider/BUILD delete mode 100644 frontend/app/components/range_slider/README.md delete mode 100644 frontend/app/components/range_slider/range_slider.ng.html delete mode 100644 frontend/app/components/range_slider/range_slider.scss delete mode 100644 frontend/app/components/range_slider/range_slider.ts delete mode 100644 frontend/app/components/range_slider/range_slider_module.ts diff --git a/frontend/app/common/angular/BUILD b/frontend/app/common/angular/BUILD index 5440319f8..3385ea71b 100644 --- a/frontend/app/common/angular/BUILD +++ b/frontend/app/common/angular/BUILD @@ -123,7 +123,7 @@ ts_library( ) ts_library( - name = "angular_material_legacy_snack_bar", + name = "angular_material_snack_bar", srcs = [], deps = [ "@npm//@angular/material", @@ -147,7 +147,7 @@ ts_library( ) ts_library( - name = "angular_material_legacy_slider", + name = "angular_material_slider", srcs = [], deps = [ "@npm//@angular/material", diff --git a/frontend/app/components/capture_profile/BUILD b/frontend/app/components/capture_profile/BUILD index 889a13065..7d2691659 100644 --- a/frontend/app/components/capture_profile/BUILD +++ b/frontend/app/components/capture_profile/BUILD @@ -21,8 +21,8 @@ xprof_ng_module( "@npm//rxjs", "@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_legacy_snack_bar", "@org_xprof//frontend/app/common/angular:angular_material_progress_spinner", + "@org_xprof//frontend/app/common/angular:angular_material_snack_bar", "@org_xprof//frontend/app/common/interfaces", "@org_xprof//frontend/app/components/capture_profile/capture_profile_dialog", "@org_xprof//frontend/app/services/data_service", diff --git a/frontend/app/components/capture_profile/capture_profile.ts b/frontend/app/components/capture_profile/capture_profile.ts index 4132cbf5a..e54bb6c98 100644 --- a/frontend/app/components/capture_profile/capture_profile.ts +++ b/frontend/app/components/capture_profile/capture_profile.ts @@ -1,6 +1,6 @@ import {Component, OnDestroy} from '@angular/core'; import {MatDialog} from '@angular/material/dialog'; -import {MatLegacySnackBar} from '@angular/material/legacy-snack-bar'; +import {MatSnackBar} from '@angular/material/snack-bar'; import {Store} from '@ngrx/store'; import {CaptureProfileOptions, CaptureProfileResponse} from 'org_xprof/frontend/app/common/interfaces/capture_profile'; import {DataService} from 'org_xprof/frontend/app/services/data_service/data_service'; @@ -28,7 +28,7 @@ export class CaptureProfile implements OnDestroy { constructor( private readonly dialog: MatDialog, - private readonly snackBar: MatLegacySnackBar, + private readonly snackBar: MatSnackBar, private readonly dataService: DataService, private readonly store: Store<{}>) { this.capturingProfile = this.store.select(getCapturingProfileState); diff --git a/frontend/app/components/capture_profile/capture_profile_module.ts b/frontend/app/components/capture_profile/capture_profile_module.ts index 8c0882ba0..e58eba36c 100644 --- a/frontend/app/components/capture_profile/capture_profile_module.ts +++ b/frontend/app/components/capture_profile/capture_profile_module.ts @@ -3,7 +3,7 @@ import {NgModule} from '@angular/core'; import {MatButtonModule} from '@angular/material/button'; import {MatDialogModule} from '@angular/material/dialog'; import {MatProgressSpinnerModule} from '@angular/material/progress-spinner'; -import {MatLegacySnackBarModule} from '@angular/material/legacy-snack-bar'; +import {MatSnackBarModule} from '@angular/material/snack-bar'; import {CaptureProfile} from './capture_profile'; import {CaptureProfileDialog} from './capture_profile_dialog/capture_profile_dialog'; @@ -18,7 +18,7 @@ import {CaptureProfileDialogModule} from './capture_profile_dialog/capture_profi MatDialogModule, MatProgressSpinnerModule, CaptureProfileDialogModule, - MatLegacySnackBarModule, + MatSnackBarModule, ], exports: [CaptureProfile], entryComponents: [CaptureProfileDialog], diff --git a/frontend/app/components/op_profile/BUILD b/frontend/app/components/op_profile/BUILD index 6877e33b9..d9df6e699 100644 --- a/frontend/app/components/op_profile/BUILD +++ b/frontend/app/components/op_profile/BUILD @@ -23,7 +23,6 @@ xprof_ng_module( "@org_xprof//frontend/app/common/angular:angular_material_form_field", "@org_xprof//frontend/app/common/angular:angular_material_icon", "@org_xprof//frontend/app/common/angular:angular_material_input", - "@org_xprof//frontend/app/common/angular:angular_material_legacy_slider", "@org_xprof//frontend/app/common/angular:angular_material_legacy_tooltip", "@org_xprof//frontend/app/common/angular:angular_material_slide_toggle", "@org_xprof//frontend/app/common/interfaces", diff --git a/frontend/app/components/op_profile/op_profile_module.ts b/frontend/app/components/op_profile/op_profile_module.ts index 6aae79e6b..9ae0080a1 100644 --- a/frontend/app/components/op_profile/op_profile_module.ts +++ b/frontend/app/components/op_profile/op_profile_module.ts @@ -1,10 +1,9 @@ import {NgModule} from '@angular/core'; -import {MatIconModule} from '@angular/material/icon'; import {MatFormFieldModule} from '@angular/material/form-field'; +import {MatIconModule} from '@angular/material/icon'; import {MatInputModule} from '@angular/material/input'; -import {MatSlideToggleModule} from '@angular/material/slide-toggle'; -import {MatLegacySliderModule} from '@angular/material/legacy-slider'; import {MatLegacyTooltipModule} from '@angular/material/legacy-tooltip'; +import {MatSlideToggleModule} from '@angular/material/slide-toggle'; import {OpProfile} from './op_profile'; import {OpTableModule} from './op_table/op_table_module'; @@ -15,7 +14,6 @@ import {OpTableModule} from './op_table/op_table_module'; imports: [ MatFormFieldModule, MatInputModule, - MatLegacySliderModule, MatSlideToggleModule, OpTableModule, MatIconModule, diff --git a/frontend/app/components/pod_viewer/BUILD b/frontend/app/components/pod_viewer/BUILD index d651f6b94..af43744a1 100644 --- a/frontend/app/components/pod_viewer/BUILD +++ b/frontend/app/components/pod_viewer/BUILD @@ -20,7 +20,7 @@ xprof_ng_module( "@npm//@ngrx/store", "@npm//rxjs", "@org_xprof//frontend/app/common/angular:angular_material_divider", - "@org_xprof//frontend/app/common/angular:angular_material_legacy_slider", + "@org_xprof//frontend/app/common/angular:angular_material_slider", "@org_xprof//frontend/app/common/constants", "@org_xprof//frontend/app/common/interfaces", "@org_xprof//frontend/app/common/utils", diff --git a/frontend/app/components/pod_viewer/pod_viewer.ng.html b/frontend/app/components/pod_viewer/pod_viewer.ng.html index fdbf19a80..c29399760 100644 --- a/frontend/app/components/pod_viewer/pod_viewer.ng.html +++ b/frontend/app/components/pod_viewer/pod_viewer.ng.html @@ -6,8 +6,7 @@ + [step]="1" #ngSlider>
diff --git a/frontend/app/components/pod_viewer/pod_viewer_module.ts b/frontend/app/components/pod_viewer/pod_viewer_module.ts index 05bbad5eb..147349a99 100644 --- a/frontend/app/components/pod_viewer/pod_viewer_module.ts +++ b/frontend/app/components/pod_viewer/pod_viewer_module.ts @@ -1,7 +1,7 @@ import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; import {MatDividerModule} from '@angular/material/divider'; -import {MatLegacySliderModule} from '@angular/material/legacy-slider'; +import {MatSliderModule} from '@angular/material/slider'; import {DiagnosticsViewModule} from 'org_xprof/frontend/app/components/diagnostics_view/diagnostics_view_module'; import {PodViewer} from './pod_viewer'; @@ -15,7 +15,7 @@ import {TopologyGraphModule} from './topology_graph/topology_graph_module'; CommonModule, DiagnosticsViewModule, MatDividerModule, - MatLegacySliderModule, + MatSliderModule, StackBarChartModule, TopologyGraphModule, ], diff --git a/frontend/app/components/pod_viewer/topology_graph/BUILD b/frontend/app/components/pod_viewer/topology_graph/BUILD index 164fc1adf..d263e6da8 100644 --- a/frontend/app/components/pod_viewer/topology_graph/BUILD +++ b/frontend/app/components/pod_viewer/topology_graph/BUILD @@ -22,8 +22,8 @@ xprof_ng_module( "@org_xprof//frontend/app/common/angular:angular_material_form_field", "@org_xprof//frontend/app/common/angular:angular_material_icon", "@org_xprof//frontend/app/common/angular:angular_material_input", - "@org_xprof//frontend/app/common/angular:angular_material_legacy_slider", "@org_xprof//frontend/app/common/angular:angular_material_menu", + "@org_xprof//frontend/app/common/angular:angular_material_slider", "@org_xprof//frontend/app/common/constants", "@org_xprof//frontend/app/common/interfaces", "@org_xprof//frontend/app/common/utils", diff --git a/frontend/app/components/pod_viewer/topology_graph/topology_graph.ng.html b/frontend/app/components/pod_viewer/topology_graph/topology_graph.ng.html index 09bf07e47..389e530f7 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 @@ -25,9 +25,7 @@ + [step]="1" #ngSlider> Channel id 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 c58edea49..60bc36adb 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 @@ -5,7 +5,7 @@ import {MatButtonModule} from '@angular/material/button'; import {MatFormFieldModule} from '@angular/material/form-field'; import {MatInputModule} from '@angular/material/input'; import {MatMenuModule} from '@angular/material/menu'; -import {MatLegacySliderModule} from '@angular/material/legacy-slider'; +import {MatSliderModule} from '@angular/material/slider'; import {TopologyGraph} from './topology_graph'; @@ -19,7 +19,7 @@ import {TopologyGraph} from './topology_graph'; MatIconModule, MatInputModule, MatMenuModule, - MatLegacySliderModule, + MatSliderModule, ], exports: [TopologyGraph] }) diff --git a/frontend/app/components/range_slider/BUILD b/frontend/app/components/range_slider/BUILD deleted file mode 100644 index e594d073e..000000000 --- a/frontend/app/components/range_slider/BUILD +++ /dev/null @@ -1,29 +0,0 @@ -load("//defs:defs.bzl", "xprof_ng_module") -load("@io_bazel_rules_sass//:defs.bzl", "sass_binary") - -package(default_visibility = ["//frontend:internal"]) - -xprof_ng_module( - name = "range_slider", - srcs = [ - "range_slider.ts", - "range_slider_module.ts", - ], - assets = [ - ":range_slider_css", - "range_slider.ng.html", - ], - deps = [ - "@npm//@angular/core", - "@org_xprof//frontend/app/common/angular:angular_material_legacy_slider", - ], -) - -sass_binary( - name = "range_slider_css", - src = "range_slider.scss", - sourcemap = False, - deps = [ - "@org_xprof//frontend/app/styles:common", - ], -) diff --git a/frontend/app/components/range_slider/README.md b/frontend/app/components/range_slider/README.md deleted file mode 100644 index 69e2ef5f4..000000000 --- a/frontend/app/components/range_slider/README.md +++ /dev/null @@ -1,16 +0,0 @@ -# Range Slider - allows for the selection of a range from a slider via mouse, touch, or keyboard. - -## Selecting a range -By default the minimum value of the slider is 0, the maximum value is 100, and the thumb moves in increments of 1. These values can be changed by setting the `min`, `max`, and `step` attributes respectively. The initial range's row is set to the minimum value and range's high is set to the maximum value unless otherwise specifiled. -``` - -``` - -## Handling an event -Whenever the range value changes, a change event is emitted. Events have low and high values. -``` - - -handleEvent(low: number, high: number) {...} -``` diff --git a/frontend/app/components/range_slider/range_slider.ng.html b/frontend/app/components/range_slider/range_slider.ng.html deleted file mode 100644 index 7255ea2d6..000000000 --- a/frontend/app/components/range_slider/range_slider.ng.html +++ /dev/null @@ -1,17 +0,0 @@ -
- - - - -
-
-
-
diff --git a/frontend/app/components/range_slider/range_slider.scss b/frontend/app/components/range_slider/range_slider.scss deleted file mode 100644 index a7529f31f..000000000 --- a/frontend/app/components/range_slider/range_slider.scss +++ /dev/null @@ -1,43 +0,0 @@ -/** CSS for a range slider component. */ - -@import 'frontend/app/styles/common'; - -:host { - display: inline-block; - height: 48px; - min-width: 128px; -} - -.range-slider-wrapper { - position: relative; - height: 48px; -} - -.range { - display: inline-block; - position: absolute; - width: calc(100% - 16px); - min-width: 112px; - padding: 8px; - vertical-align: middle; -} - -.range-bar { - position: absolute; - height: 2px; - top: 23px; - left: 28px; - right: 48px; - background-color: #e8710a; -} - -mat-slider { - position: absolute; - width: 100%; -} - -::ng-deep mat-slider .mat-slider-track-fill, -::ng-deep mat-slider .mat-slider-track-background { - /* stylelint-disable-next-line declaration-no-important */ - background-color: #dbdbdb !important; -} diff --git a/frontend/app/components/range_slider/range_slider.ts b/frontend/app/components/range_slider/range_slider.ts deleted file mode 100644 index c5a676689..000000000 --- a/frontend/app/components/range_slider/range_slider.ts +++ /dev/null @@ -1,90 +0,0 @@ -import {Component, ElementRef, EventEmitter, HostListener, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild} from '@angular/core'; - -/** The base interface for range value. */ -export interface RangeValue { - low: number; - high: number; -} - -const PADDING = 8; - -/** A range slider component. */ -@Component({ - selector: 'range-slider', - templateUrl: './range_slider.ng.html', - styleUrls: ['./range_slider.scss'] -}) -export class RangeSlider implements OnInit, OnChanges { - /** The maximum value that the slider can have. */ - @Input() max = 100; - - /** The minimum value that the slider can have. */ - @Input() min = 0; - - /** The values at which the thumb will snap. */ - @Input() step = 1; - - /** Range value of the slider. */ - @Input() rangeValue: RangeValue = {low: 0, high: 100}; - - /** Event emitted when the slider value has changed. */ - @Output() change = new EventEmitter(); - - @ViewChild('range', {static: true}) rangeRef!: ElementRef; - - @ViewChild('rangeBar', {static: true}) rangeBarRef!: ElementRef; - - firstSliderValue = 0; - secondSliderValue = 100; - - ngOnInit() { - this.onResize(); - } - - ngOnChanges(changes: SimpleChanges) { - this.firstSliderValue = Math.min(this.rangeValue.low, this.rangeValue.high); - this.secondSliderValue = - Math.max(this.rangeValue.low, this.rangeValue.high); - this.updateValues(); - } - - @HostListener('window:resize') - onResize() { - this.updateRangeBar(); - } - - updateFirstSliderValue(value: number) { - this.firstSliderValue = value || 0; - this.updateValues(); - } - - updateSecondSliderValue(value: number) { - this.secondSliderValue = value || 0; - this.updateValues(); - } - - updateValues() { - this.rangeValue.low = - Math.min(this.firstSliderValue, this.secondSliderValue); - this.rangeValue.high = - Math.max(this.firstSliderValue, this.secondSliderValue); - this.updateRangeBar(); - this.change.emit(this.rangeValue); - } - - updateRangeBar() { - const rangeWidth = this.rangeRef.nativeElement.clientWidth - PADDING * 2; - const left = Math.max( - 0, - rangeWidth * (this.rangeValue.low - this.min) / - (this.max - this.min)) + - PADDING; - const right = Math.max( - 0, - rangeWidth * (this.max - this.rangeValue.high) / - (this.max - this.min)) + - PADDING; - this.rangeBarRef.nativeElement.style.left = String(left) + 'px'; - this.rangeBarRef.nativeElement.style.right = String(right) + 'px'; - } -} diff --git a/frontend/app/components/range_slider/range_slider_module.ts b/frontend/app/components/range_slider/range_slider_module.ts deleted file mode 100644 index 6d8cf0c35..000000000 --- a/frontend/app/components/range_slider/range_slider_module.ts +++ /dev/null @@ -1,13 +0,0 @@ -import {NgModule} from '@angular/core'; -import {MatLegacySliderModule} from '@angular/material/legacy-slider'; - -import {RangeSlider} from './range_slider'; - -/** A range slider component module. */ -@NgModule({ - declarations: [RangeSlider], - imports: [MatLegacySliderModule], - exports: [RangeSlider] -}) -export class RangeSliderModule { -} diff --git a/frontend/styles.scss b/frontend/styles.scss index 90e8b8484..92239fe53 100644 --- a/frontend/styles.scss +++ b/frontend/styles.scss @@ -41,6 +41,8 @@ $theme: mat.define-light-theme( @include mat.progress-bar-theme($theme); @include mat.slide-toggle-theme(map-merge($theme, (density: -5))); @include mat.radio-theme($theme); +@include mat.snack-bar-theme($theme); +@include mat.slider-theme($theme); html, body { height: 100%;