Bug Fix:Always fire rangeValueChanged event when thumb is dragged

tensorflow · Nov 10, 2023 · fb3265b · fb3265b
1 parent a3fea2a
commit fb3265b
Showing 3 changed files with 11 additions and 31 deletions.
diff --git a/tensorboard/webapp/widgets/range_input/range_input_component.ng.html b/tensorboard/webapp/widgets/range_input/range_input_component.ng.html
@@ -32,12 +32,12 @@
 <mat-slider class="slider" [min]="min" [max]="max" [step]="calculateStepSize()">
   <input
     matSliderStartThumb
-    (valueChange)="startThumbDrag($event)"
+    (valueChange)="thumbDrag()"
     [(ngModel)]="lowerValue"
   />
   <input
     matSliderEndThumb
-    (valueChange)="endThumbDrag($event)"
+    (valueChange)="thumbDrag()"
     [(ngModel)]="upperValue"
   />
 </mat-slider>
diff --git a/tensorboard/webapp/widgets/range_input/range_input_component.ts b/tensorboard/webapp/widgets/range_input/range_input_component.ts
@@ -113,18 +113,12 @@ export class RangeInputComponent {
 
   readonly Position = Position;
 
-  startThumbDrag(value: number) {
-    this.maybeNotifyNextRangeValues(
-      [value, this.upperValue],
-      RangeInputSource.SLIDER
-    );
-  }
-
-  endThumbDrag(value: number) {
-    this.maybeNotifyNextRangeValues(
-      [this.lowerValue, value],
-      RangeInputSource.SLIDER
-    );
+  thumbDrag() {
+    this.rangeValuesChanged.emit({
+      lowerValue: this.lowerValue,
+      upperValue: this.upperValue,
+      source: RangeInputSource.SLIDER,
+    });
   }
 
   calculateStepSize() {

diff --git a/tensorboard/webapp/widgets/range_input/range_input_test.ts b/tensorboard/webapp/widgets/range_input/range_input_test.ts
@@ -120,7 +120,7 @@ describe('range input test', () => {
       );
     });
 
-    it('dispatches actions when making range step change', () => {
+    it('dispatches actions when slider emits valueChange event', () => {
       const {fixture, onRangeValuesChanged} = createComponent({
         lowerValue: -1,
         upperValue: 1,
@@ -130,9 +130,9 @@ describe('range input test', () => {
         By.css('mat-slider input')
       )[0];
 
-      sliderThumb.triggerEventHandler('valueChange', -4);
+      sliderThumb.triggerEventHandler('valueChange');
       expect(onRangeValuesChanged).toHaveBeenCalledWith({
-        lowerValue: -4,
+        lowerValue: -1,
         upperValue: 1,
         source: RangeInputSource.SLIDER,
       });
@@ -152,20 +152,6 @@ describe('range input test', () => {
         '0.5'
       );
     });
-
-    it('does not trigger change when value does not change', () => {
-      const {fixture, onRangeValuesChanged} = createComponent({
-        lowerValue: -5,
-        upperValue: 1,
-        tickCount: 10,
-      });
-      const sliderThumb = fixture.debugElement.queryAll(
-        By.css('mat-slider input')
-      )[0];
-
-      sliderThumb.triggerEventHandler('valueChange', -5);
-      expect(onRangeValuesChanged).not.toHaveBeenCalled();
-    });
   });
 
   describe('input control', () => {