clean slider range button

GlobalFishingWatch · Jul 25, 2024 · 247273e · 247273e
1 parent 414af23
commit 247273e
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 2 deletions.
diff --git a/apps/fishing-map/features/workspace/common/LayerSchemaFilter.tsx b/apps/fishing-map/features/workspace/common/LayerSchemaFilter.tsx
@@ -156,7 +156,11 @@ const getRangeBySchema = (schemaFilter: SchemaFilter): number[] => {
   const minValue = rangeValues[0] < min ? min : rangeValues[0]
   const maxValue =
     rangeValues[rangeValues.length - 1] > max ? max : rangeValues[rangeValues.length - 1]
-  return [minValue, maxValue]
+  const supportsRounding = Math.abs(maxValue - minValue) > 1
+  return [
+    supportsRounding ? getSchemaValueRounded(minValue) : minValue,
+    supportsRounding ? getSchemaValueRounded(maxValue) : maxValue,
+  ]
 }
 
 function LayerSchemaFilter({
@@ -218,6 +222,7 @@ function LayerSchemaFilter({
           className={cx(styles.multiSelect, styles.range)}
           initialRange={values}
           histogram={id === 'radiance'}
+          onCleanClick={() => onClean(id)}
           label={getLabelWithUnit(label, unit)}
           config={getSliderConfigBySchema(schemaFilter)}
           onChange={onSliderChange}

diff --git a/libs/ui-components/src/slider-range/SliderRange.tsx b/libs/ui-components/src/slider-range/SliderRange.tsx
@@ -4,6 +4,7 @@ import { Range, getTrackBackground } from 'react-range'
 import { InputText } from '../input-text'
 import { SliderThumbsSize, formatSliderNumber } from '../slider'
 import styles from '../slider/slider.module.css'
+import { IconButton } from '../icon-button'
 
 export type SliderRangeValues = number[]
 type SliderRangeConfig = {
@@ -18,6 +19,7 @@ interface SliderRangeProps {
   range?: SliderRangeValues
   config: SliderRangeConfig
   onChange: (range: SliderRangeValues) => void
+  onCleanClick?: (e: React.MouseEvent) => void
   className?: string
   //static for now for the VIIRS release
   histogram?: boolean
@@ -62,6 +64,7 @@ export function SliderRange(props: SliderRangeProps) {
     label,
     config = {},
     onChange,
+    onCleanClick,
     className,
     histogram,
     thumbsSize = 'default',
@@ -127,9 +130,17 @@ export function SliderRange(props: SliderRangeProps) {
     [internalValues, max, min]
   )
 
+  const areDefaultValues = internalValues[0] === min && internalValues[1] === max
   return (
     <div className={className}>
-      <label>{label}</label>
+      {label && (
+        <label className={styles.label}>
+          {label}
+          {onCleanClick && !areDefaultValues && (
+            <IconButton size="small" icon="delete" onClick={onCleanClick} />
+          )}
+        </label>
+      )}
       <div className={styles.container}>
         {histogram && (
           <svg

diff --git a/libs/ui-components/src/slider/slider.module.css b/libs/ui-components/src/slider/slider.module.css
@@ -5,6 +5,13 @@
   position: relative;
 }
 
+.label {
+  min-height: 2.8rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
 .histogram {
   position: absolute;
   bottom: 50%;