Fixup result filter slider (#2318)

* combine min max, low high into ranges * further renames
e-valuation · Dec 2, 2024 · 6d42d18 · 6d42d18
1 parent 437babc
commit 6d42d18
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 33 deletions.
diff --git a/evap/static/ts/src/datagrid.ts b/evap/static/ts/src/datagrid.ts
@@ -431,10 +431,10 @@ export class ResultGrid extends DataGrid {
         }
 
         for (const [name, { slider }] of this.filterSliders.entries()) {
-            this.state.rangeFilter.set(name, slider.range);
+            this.state.rangeFilter.set(name, slider.value);
 
             slider.onRangeChange = () => {
-                this.state.rangeFilter.set(name, slider.range);
+                this.state.rangeFilter.set(name, slider.value);
                 this.filterRows();
                 this.renderToDOM();
             };
@@ -521,7 +521,7 @@ export class ResultGrid extends DataGrid {
         for (const [name, { slider }] of this.filterSliders.entries()) {
             const filterRange = this.state.rangeFilter.get(name);
             if (filterRange !== undefined) {
-                slider.range = filterRange;
+                slider.value = filterRange;
             } else {
                 slider.reset();
             }

diff --git a/evap/static/ts/src/slider.ts b/evap/static/ts/src/slider.ts
@@ -15,10 +15,8 @@ export class RangeSlider {
     private readonly maxLabel: HTMLSpanElement;
     private readonly minLabel: HTMLSpanElement;
     private readonly rangeLabel: HTMLSpanElement;
-    private readonly min = 0;
-    private max = 0;
-    private low = 0;
-    private high = 0;
+    private allowed: Range = { low: 0, high: 0 };
+    private _value: Range = { low: 0, high: 0 };
 
     private debounceTimeout?: number;
 
@@ -30,28 +28,27 @@ export class RangeSlider {
         this.maxLabel = selectOrError<HTMLSpanElement>(".text-end", this.rangeSlider);
         this.rangeLabel = selectOrError<HTMLSpanElement>(".range-values", this.rangeSlider);
 
-        const setRangeFromSlider = (): void => {
-            this.range = { low: parseFloat(this.lowSlider.value), high: parseFloat(this.highSlider.value) };
+        const setValueFromNestedElements = (): void => {
+            this.value = { low: parseFloat(this.lowSlider.value), high: parseFloat(this.highSlider.value) };
         };
 
-        this.lowSlider.addEventListener("input", setRangeFromSlider);
-        this.highSlider.addEventListener("input", setRangeFromSlider);
+        this.lowSlider.addEventListener("input", setValueFromNestedElements);
+        this.highSlider.addEventListener("input", setValueFromNestedElements);
     }
 
-    public get range(): Range {
-        return { low: this.low, high: this.high };
+    public get value(): Range {
+        return this._value;
     }
 
-    public set range(range: Range) {
-        this.low = range.low;
-        this.high = range.high;
+    public set value(value: Range) {
+        this._value = value;
 
-        this.lowSlider.value = this.low.toString();
-        this.highSlider.value = this.high.toString();
-        if (this.low > this.high) {
-            [this.low, this.high] = [this.high, this.low];
+        this.lowSlider.value = this.value.low.toString();
+        this.highSlider.value = this.value.high.toString();
+        if (this.value.low > this.value.high) {
+            [this.value.low, this.value.high] = [this.value.high, this.value.low];
         }
-        this.rangeLabel.innerText = `${this.low} – ${this.high}`;
+        this.rangeLabel.innerText = `${this.value.low} – ${this.value.high}`;
 
         // debounce on range change callback
         if (this.debounceTimeout !== undefined) {
@@ -65,25 +62,25 @@ export class RangeSlider {
     public onRangeChange(): void {}
 
     public includeValues(values: number[]): void {
-        assert(Math.min(...values) >= this.min);
+        assert(Math.min(...values) >= this.allowed.low);
         const max = Math.max(...values);
-        if (max > this.max) {
-            this.max = max;
-            this.updateLimits();
+        if (max > this.allowed.high) {
+            this.allowed.high = max;
+            this.updateNestedElements();
             this.reset();
         }
     }
 
     public reset(): void {
-        this.range = { low: this.min, high: this.max };
+        this.value = { low: this.allowed.low, high: this.allowed.high };
     }
 
-    private updateLimits(): void {
-        this.lowSlider.min = this.min.toString();
-        this.lowSlider.max = this.max.toString();
-        this.highSlider.min = this.min.toString();
-        this.highSlider.max = this.max.toString();
-        this.minLabel.innerText = this.min.toString();
-        this.maxLabel.innerText = this.max.toString();
+    private updateNestedElements(): void {
+        this.lowSlider.min = this.allowed.low.toString();
+        this.lowSlider.max = this.allowed.high.toString();
+        this.highSlider.min = this.allowed.low.toString();
+        this.highSlider.max = this.allowed.high.toString();
+        this.minLabel.innerText = this.allowed.low.toString();
+        this.maxLabel.innerText = this.allowed.high.toString();
     }
 }