MDCMigration: Update mat-slider in RangeInputComponent

tensorflow · Oct 23, 2023 · 26a84b1 · 26a84b1
1 parent 7f7d140
commit 26a84b1
Show file tree

Hide file tree

Showing 7 changed files with 104 additions and 787 deletions.
diff --git a/tensorboard/webapp/widgets/data_table/filter_dialog_test.ts b/tensorboard/webapp/widgets/data_table/filter_dialog_test.ts
@@ -65,8 +65,8 @@ describe('filter dialog', () => {
     );
     expect(rangeInput).toBeTruthy();
     const [lower, upper, ...rest] = rangeInput.queryAll(By.css('input'));
-    // There should only be two input fields.
-    expect(rest.length).toEqual(0);
+    // There should two other input fields: one for each thumb in the slider.
+    expect(rest.length).toEqual(2);
     expect(lower.nativeElement.value).toEqual('7');
     expect(upper.nativeElement.value).toEqual('18');
   });

diff --git a/tensorboard/webapp/widgets/range_input/BUILD b/tensorboard/webapp/widgets/range_input/BUILD
@@ -28,6 +28,7 @@ tf_ng_module(
         "//tensorboard/webapp/angular:expect_angular_legacy_material_slider",
         "@npm//@angular/common",
         "@npm//@angular/core",
+        "@npm//@angular/forms",
         "@npm//rxjs",
     ],
 )
@@ -47,9 +48,10 @@ tf_ts_library(
         ":range_input",
         ":types",
         "//tensorboard/webapp/angular:expect_angular_core_testing",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_slider",
+        "//tensorboard/webapp/angular:expect_angular_material_slider",
         "//tensorboard/webapp/angular:expect_angular_platform_browser_animations",
         "@npm//@angular/core",
+        "@npm//@angular/forms",
         "@npm//@angular/platform-browser",
         "@npm//@types/jasmine",
     ],

diff --git a/tensorboard/webapp/widgets/range_input/range_input_component.ng.html b/tensorboard/webapp/widgets/range_input/range_input_component.ng.html
@@ -25,41 +25,19 @@
   class="upper-input"
   type="number"
   [disabled]="!enabled"
-  [value]="upperValue !== null ? upperValue : ''"
+  [value]="upperValue"
   (change)="handleInputChange($event, Position.RIGHT)"
 />
 
-<mat-slider
-  class="single-slider"
-  *ngIf="upperValue === null; else range"
-  [disabled]="!enabled"
-  color="primary"
-  [min]="min"
-  [max]="max"
-  [step]="1"
-  [value]="lowerValue"
-  (input)="handleSingleSliderChange($event.value)"
-></mat-slider>
-
-<ng-template #range>
-  <span *ngIf="min !== max" class="container" #container>
-    <span class="slider-track"></span>
-    <span
-      class="slider-track-fill"
-      [style.left]="getThumbPosition(lowerValue)"
-      [style.width]="getTrackWidth()"
-    ></span>
-    <span
-      class="thumb"
-      (mousedown)="handleMouseDown($event, Position.LEFT)"
-      [style.left]="getThumbPosition(lowerValue)"
-      [class.active]="isThumbActive(Position.LEFT)"
-    ></span>
-    <span
-      class="thumb"
-      (mousedown)="handleMouseDown($event, Position.RIGHT)"
-      [style.left]="getThumbPosition(upperValue)"
-      [class.active]="isThumbActive(Position.RIGHT)"
-    ></span>
-  </span>
-</ng-template>
+<mat-slider class="slider" [min]="min" [max]="max" [step]="calculateStepSize()">
+  <input
+    matSliderStartThumb
+    (valueChange)="startThumbDrag($event)"
+    [(ngModel)]="lowerValue"
+  />
+  <input
+    matSliderEndThumb
+    (valueChange)="endThumbDrag($event)"
+    [(ngModel)]="upperValue"
+  />
+</mat-slider>
diff --git a/tensorboard/webapp/widgets/range_input/range_input_component.scss b/tensorboard/webapp/widgets/range_input/range_input_component.scss
@@ -15,9 +15,6 @@ limitations under the License.
 @use '@angular/material' as mat;
 @import 'tensorboard/webapp/theme/tb_theme';
 
-// Keep this in sync with range_input_component.ts's `THUMB_SIZE_PX`.
-$_thumb-size: 12px;
-
 :host {
   box-sizing: border-box;
   display: inline-grid;
@@ -28,7 +25,6 @@ $_thumb-size: 12px;
   grid-template-columns: 1fr 1fr;
   font-size: 0;
   min-width: 100px;
-  padding: $_thumb-size * 0.5;
 }
 
 input {
@@ -49,71 +45,6 @@ input {
   justify-self: flex-end;
 }
 
-.single-slider {
-  grid-area: slider;
-  padding: 0px;
-  ::ng-deep .mat-slider-wrapper {
-    top: 5px;
-    left: 0px;
-    right: 0px;
-  }
-}
-::ng-deep .single-slider.mat-slider-horizontal {
-  height: 12px;
-}
-
-.container {
+.slider {
   grid-area: slider;
-  align-items: center;
-  box-sizing: border-box;
-  display: inline-flex;
-  height: $_thumb-size;
-  justify-content: center;
-  position: relative;
-  width: 100%;
-}
-
-.slider-track {
-  @include tb-theme-foreground-prop(background, slider-off);
-  height: 2px;
-  width: 100%;
-}
-
-.slider-track-fill {
-  position: absolute;
-  height: 2px;
-}
-
-.thumb {
-  @include tb-theme-foreground-prop(box-sadhow, slider-off, 0 0 0 1px);
-  border-radius: 100%;
-  display: inline-block;
-  height: $_thumb-size;
-  margin-left: -$_thumb-size * 0.5;
-  position: absolute;
-  top: 0;
-  transform-origin: center;
-  transition: transform 0.3s ease;
-  width: $_thumb-size;
-  will-change: transform;
-
-  &:hover {
-    cursor: grab;
-  }
-  &:active {
-    cursor: grabbing;
-  }
-}
-
-.thumb.active {
-  transform: scale(1.2);
-}
-
-.slider-track-fill,
-.thumb {
-  background: mat.get-color-from-palette($tb-primary);
-
-  @include tb-dark-theme {
-    background: mat.get-color-from-palette($tb-dark-primary);
-  }
 }