Spaces:
Running
Running
File size: 2,366 Bytes
394073d 09aaa98 394073d 09aaa98 394073d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
import { Slider, Select, NumberInput, Text, Stack } from '@mantine/core'
import classes from './AnalysisOptions.module.css'
export default function AnalysisOptions({ values, onChange }) {
const handleChange = (key, val) => {
onChange(key, val);
};
return (
<Stack gap="md">
<div>
<div className={classes.header}>
<Text size="sm" fw={600} c="dimmed">Max Cloud Cover</Text>
<Text size="sm" fw={700} c="blue">{values.cloudCover}%</Text>
</div>
<Slider
value={values.cloudCover}
onChange={(val) => handleChange('cloudCover', val)}
min={0}
max={100}
step={1}
label={null}
size="sm"
classNames={{ track: classes.sliderTrack, thumb: classes.sliderThumb }}
/>
</div>
<div>
<div className={classes.header}>
<Text size="sm" fw={600} c="dimmed">Analysis Radius</Text>
<Text size="sm" fw={700} c="blue">{values.radius} km</Text>
</div>
<Slider
value={values.radius}
onChange={(val) => handleChange('radius', val)}
min={1}
max={10}
step={1}
label={null}
size="sm"
classNames={{ track: classes.sliderTrack, thumb: classes.sliderThumb }}
/>
</div>
<NumberInput
label="Time Range (days back)"
value={values.daysRange}
onChange={(val) => handleChange('daysRange', val)}
min={1}
max={365}
size="sm"
classNames={{ label: classes.inputLabel, input: classes.inputField }}
/>
<Select
label="Model Version"
allowDeselect={false}
data={[
{ value: 'terramind_v1_tiny_generate', label: 'Terramind v1 Tiny' },
{ value: 'terramind_v1_small_generate', label: 'Terramind v1 Small' },
{ value: 'terramind_v1_base_generate', label: 'Terramind v1 Base' },
{ value: 'terramind_v1_large_generate', label: 'Terramind v1 Large' },
]}
value={values.model}
onChange={(val) => handleChange('model', val)}
size="sm"
classNames={{
label: classes.inputLabel,
input: classes.inputField,
dropdown: classes.inputField,
option: classes.inputField
}}
/>
</Stack>
);
}
|