diff --git a/evap/static/ts/src/datagrid.ts b/evap/static/ts/src/datagrid.ts index 1da6327fb..cdee442d5 100644 --- 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 index bda6f866a..ac905038a 100644 --- 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(".text-end", this.rangeSlider); this.rangeLabel = selectOrError(".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(); } }