Skip to content

Commit

Permalink
WV-2775: Layer Threshold Combined Slider (#4553)
Browse files Browse the repository at this point in the history
* Converted to double-slider

* Removed unecessary componentDidUpdate

* Simplified avg setState

* Changes from feedback
  • Loading branch information
christof-wittreich authored Aug 10, 2023
1 parent b0b66ce commit a3e5c18
Showing 2 changed files with 104 additions and 29 deletions.
73 changes: 46 additions & 27 deletions web/js/components/layer/settings/palette-threshold.js
Original file line number Diff line number Diff line change
@@ -6,6 +6,9 @@ import {
checkTemperatureUnitConversion, convertPaletteValue,
} from '../../../modules/settings/util';

const sliderWidth = 264;
const thumbsize = 22;

class PaletteThreshold extends React.Component {
constructor(props) {
super(props);
@@ -14,6 +17,7 @@ class PaletteThreshold extends React.Component {
start,
end,
squashed,
avg: Math.round((start + end) / 2),
};
this.debounceSetRange = lodashDebounce(props.setRange, 300);
this.updateSquash = this.updateSquash.bind(this);
@@ -53,20 +57,24 @@ class PaletteThreshold extends React.Component {
const newEnd = parseInt(thresholdArray[1], 10);
const startRef = legend.refs[newStart];
const endRef = legend.refs[newEnd];
const newAvg = Math.round((newStart + newEnd) / 2);

// Update local state on every range-selector change but debounce threshold model update
if (newStart !== start && newEnd !== end) {
this.setState({
start: newStart,
end: newEnd,
avg: newAvg,
});
} else if (newStart !== start) {
this.setState({
start: newStart,
avg: newAvg,
});
} else if (newEnd !== end) {
this.setState({
end: newEnd,
avg: newAvg,
});
} else {
return;
@@ -100,11 +108,12 @@ class PaletteThreshold extends React.Component {

render() {
const {
start, end, squashed,
start, end, squashed, avg,
} = this.state;
const {
index, min, max, legend, globalTemperatureUnit,
} = this.props;

const units = legend.units || '';
const { needsConversion, legendTempUnit } = checkTemperatureUnitConversion(units, globalTemperatureUnit);
let startLabel = start === 0 && legend.minLabel
@@ -124,8 +133,22 @@ class PaletteThreshold extends React.Component {
endLabel += ` ${units}`;
}

const startPercent = ((start - min) / (max - min)) * 100;
const endPercent = ((end - min) / (max - min)) * 100;
const minWidth = thumbsize + ((avg - min) / (max - min)) * (sliderWidth - (2 * thumbsize));
const maxWidth = thumbsize + ((max - avg) / (max - min)) * (sliderWidth - (2 * thumbsize));
const minPercent = ((start - min) / (avg - min)) * 100;
const maxPercent = ((end - avg) / (max - avg)) * 100;
const styles = {
min: {
width: minWidth,
left: 0,
'--min-range-percent': `${minPercent}%`,
},
max: {
width: maxWidth,
left: minWidth,
'--max-range-percent': `${maxPercent}%`,
},
};

return (
<div className="layer-threshold-select settings-component">
@@ -145,30 +168,26 @@ class PaletteThreshold extends React.Component {
id={`wv-layer-options-threshold${index}`}
className="wv-layer-options-threshold"
>
<div className="flex align-items-center">
<span className="me-2">MIN:</span>
<input
type="range"
className="form-range start-range palette-threshold-range"
value={start}
min={min}
max={max}
onChange={(e) => this.updateStartThreshold(parseInt(e.target.value, 10))}
style={{ '--value-percent': `${startPercent}%` }}
/>
</div>
<div className="flex align-items-center mt-2">
<span className="me-2">MAX:</span>
<input
type="range"
className="form-range end-range palette-threshold-range"
value={end}
min={min}
max={max}
onChange={(e) => this.updateEndThreshold(parseInt(e.target.value, 10))}
style={{ '--value-percent': `${endPercent}%` }}
/>
</div>
<input
className="double-range form-range start-range palette-threshold-range"
style={styles.min}
name="min"
type="range"
min={min}
max={avg}
value={start}
onChange={(e) => this.updateStartThreshold(Math.ceil(parseFloat(e.target.value, 10)))}
/>
<input
className="double-range form-range end-range palette-threshold-range"
style={styles.max}
name="max"
type="range"
min={avg}
max={max}
value={end}
onChange={(e) => this.updateEndThreshold(Math.ceil(parseFloat(e.target.value, 10)))}
/>
<div className="wv-label mt-3">
<span className="wv-label-range-min wv-label-range">
{startLabel}
60 changes: 58 additions & 2 deletions web/scss/components/range.scss
Original file line number Diff line number Diff line change
@@ -50,7 +50,7 @@
);
}

&::-moz-range-progress {
&:not(.double-range)::-moz-range-progress {
height: 4px;
background-color: $wv-dark-blue;
}
@@ -102,4 +102,60 @@
.palette-threshold-range {
width: 85% ;
padding-top: 8px;
}
}

.double-range {
&.start-range::-webkit-slider-runnable-track {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
background: linear-gradient(
to right,
#ccc 0%,
#ccc var(--min-range-percent),
#ABE2FB var(--min-range-percent),
#ABE2FB 100%
);
}

&.start-range::-moz-range-track {
height: 4px;
border: solid 1px #ccc;
border-right: none;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
background: linear-gradient(
to right,
#ccc 0%,
#ccc var(--min-range-percent),
$wv-dark-blue var(--min-range-percent),
$wv-dark-blue 100%
);
}

&.end-range::-webkit-slider-runnable-track {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
background: linear-gradient(
to right,
#ABE2FB 0%,
#ABE2FB var(--max-range-percent),
#ccc var(--max-range-percent),
#ccc 100%
);
}

&.end-range::-moz-range-track {
height: 4px;
border: solid 1px #ccc;
border-left: none;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
background: linear-gradient(
to right,
$wv-dark-blue 0%,
$wv-dark-blue var(--max-range-percent),
#ccc var(--max-range-percent),
#ccc 100%
);
}
}

0 comments on commit a3e5c18

Please sign in to comment.