From 5f68523cbc255fca64299ca67731a57a60d7655d Mon Sep 17 00:00:00 2001
From: Riley Jones <78179109+rileyajones@users.noreply.github.com>
Date: Fri, 22 Sep 2023 13:31:45 -0700
Subject: [PATCH] Bug Fix: update the range input widget to only show the
 slider when min and max are different (#6591)

## Motivation for features / changes
When teamfooding the hparams in timeseries feature we discovered that
the interval filter widget doesn't look good when there is only a single
value. This is actually due to the `tb-range-input` widget looking bad
when the min and the max are equal. I'm opting to simply not show the
slider when `min === max`

For Googlers:
https://screenshot.googleplex.com/5rZbjsd6ijp8dkY
---
 .../range_input/range_input_component.ng.html |  2 +-
 .../widgets/range_input/range_input_test.ts   | 39 +++++++++----------
 2 files changed, 19 insertions(+), 22 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
index a12d81e495..3404924459 100644
--- a/tensorboard/webapp/widgets/range_input/range_input_component.ng.html
+++ b/tensorboard/webapp/widgets/range_input/range_input_component.ng.html
@@ -42,7 +42,7 @@
 ></mat-slider>
 
 <ng-template #range>
-  <span class="container" #container>
+  <span *ngIf="min !== max" class="container" #container>
     <span class="slider-track"></span>
     <span
       class="slider-track-fill"
diff --git a/tensorboard/webapp/widgets/range_input/range_input_test.ts b/tensorboard/webapp/widgets/range_input/range_input_test.ts
index ddd94ce940..e2e163c956 100644
--- a/tensorboard/webapp/widgets/range_input/range_input_test.ts
+++ b/tensorboard/webapp/widgets/range_input/range_input_test.ts
@@ -147,6 +147,7 @@ describe('range input test', () => {
         return debugEl.style.left;
       });
     }
+
     describe('single selection', () => {
       it('renders correct slider value', () => {
         const {fixture} = createComponent({lowerValue: 2});
@@ -182,15 +183,26 @@ describe('range input test', () => {
         expect(getRangeThumbsStyleLeft(fixture)).toEqual(['80%', '40%']);
       });
 
-      it('puts thumb at 50% when min === max', () => {
+      it('render slider when min !== max', () => {
         const {fixture} = createComponent({
-          min: 10,
-          max: 10,
-          lowerValue: 10,
-          upperValue: 10,
+          lowerValue: 2,
+          upperValue: 4,
+          min: 3,
+          max: 4,
         });
+        expect(
+          fixture.debugElement.query(By.css('.slider-track'))
+        ).toBeTruthy();
+      });
 
-        expect(getRangeThumbsStyleLeft(fixture)).toEqual(['50%', '50%']);
+      it('does not render slider when min === max', () => {
+        const {fixture} = createComponent({
+          lowerValue: 2,
+          upperValue: 4,
+          min: 3,
+          max: 3,
+        });
+        expect(fixture.debugElement.query(By.css('.slider-track'))).toBeNull();
       });
     });
   });
@@ -463,21 +475,6 @@ describe('range input test', () => {
           source: RangeInputSource.SLIDER,
         });
       });
-
-      it('does not change anything when min === max', () => {
-        const {fixture, onRangeValuesChanged} = createComponent({
-          min: 10,
-          max: 10,
-          lowerValue: 10,
-          upperValue: 10,
-        });
-
-        const [leftThumb] = getThumbsOnRange(fixture);
-        startMovingThumb(leftThumb);
-
-        moveThumb(leftThumb, 250);
-        expect(onRangeValuesChanged).not.toHaveBeenCalled();
-      });
     });
   });