Closed #977 - Added filter by object diameter

backend/tno/views/occultation.py

@@ -37,6 +37,8 @@ class OccultationFilter(django_filters.FilterSet):
 
     mag_g = django_filters.RangeFilter(field_name="g_star")
 
+    diameter = django_filters.RangeFilter(field_name="diameter")
+
     dynclass = django_filters.CharFilter(field_name="dynclass", lookup_expr="iexact")
 
     base_dynclass = django_filters.CharFilter(

frontend/src/components/MaginitudeDropSelect/index.js

@@ -6,15 +6,24 @@ import MenuItem from '@mui/material/MenuItem'
 
 function MaginitudeDropSelect({ value, onChange, min, max }) {
   const options = Array.from({ length: max - min + 1 }, (_, i) => i + min)
+
+  const handleChange = (e) => {
+    let newValue = e.target.value
+    if (newValue === '') {
+      newValue = undefined
+    }
+    onChange(newValue)
+  }
+
   return (
     <FormControl size='normal' fullWidth>
       <InputLabel id='magnitude-drop-select-label'>Magnitude Drop</InputLabel>
       <Select
         labelId='magnitude-drop-select-label'
         id='magnitude-drop-select'
-        value={value !== undefined ? value : ''}
+        value={value !== undefined ? `${value}` : ''}
         label='Magnitude Drop'
-        onChange={onChange}
+        onChange={handleChange}
       >
         <MenuItem value=''>Empty</MenuItem>
         {options.map((row) => {
@@ -36,7 +45,7 @@ MaginitudeDropSelect.defaultProps = {
 MaginitudeDropSelect.propTypes = {
   min: PropTypes.number,
   max: PropTypes.number,
-  value: PropTypes.number.isRequired,
+  value: PropTypes.number,
   onChange: PropTypes.func.isRequired
 }
 

frontend/src/components/ObjectDiameterFilter/index.js

@@ -0,0 +1,62 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Grid from '@mui/material/Grid'
+import TextField from '@mui/material/TextField'
+
+function ObjectDiameterFilter({ value, onChange }) {
+  const handleChange = (newValue) => {
+    onChange(newValue)
+  }
+  return (
+    <Grid container spacing={2} alignItems='center'>
+      <Grid item xs={12}>
+        <Grid container spacing={2} alignItems='center'>
+          <Grid item xs={12} sm={6}>
+            <TextField
+              type='number'
+              label='Object Diameter Min'
+              variant='outlined'
+              value={value.diameterMin !== undefined ? value.diameterMin : ''}
+              onChange={(event) => {
+                handleChange({
+                  ...value,
+                  diameterMin: event.target.value
+                })
+              }}
+              fullWidth
+            />
+          </Grid>
+          <Grid item xs={12} sm={6}>
+            <TextField
+              type='number'
+              label='Object Diameter Max'
+              variant='outlined'
+              value={value.diameterMax !== undefined ? value.diameterMax : ''}
+              onChange={(event) => {
+                handleChange({
+                  ...value,
+                  diameterMax: event.target.value
+                })
+              }}
+              fullWidth
+            />
+          </Grid>
+        </Grid>
+      </Grid>
+    </Grid>
+  )
+}
+
+ObjectDiameterFilter.defaultProps = {
+  value: {
+    diameter_min: undefined,
+    diameter_max: undefined
+  }
+}
+
+ObjectDiameterFilter.propTypes = {
+  value: PropTypes.object.isRequired,
+  onChange: PropTypes.func.isRequired
+}
+
+export default ObjectDiameterFilter

frontend/src/components/PredictionEventsFilter/index.js

@@ -9,6 +9,7 @@ import FormControlLabel from '@mui/material/FormControlLabel'
 import Switch from '@mui/material/Switch'
 import MaginitudeSelect from '../MaginitudeSelect/index'
 import MaginitudeDropSelect from '../MaginitudeDropSelect/index'
+import ObjectDiameterFilter from '../ObjectDiameterFilter/index'
 import AsteroidSelect from '../AsteroidSelect/AsteroidSelect'
 import GeoFilter from '../GeoFilter/index'
 import { PredictionEventsContext } from '../../contexts/PredictionContext'
@@ -154,16 +155,35 @@ function PredictionEventsFilter() {
           <Grid item xs={12}>
             <Divider />
           </Grid>
-          <Grid item xs={4} container>
+          <Grid item xs={3} container>
             <MaginitudeDropSelect
               value={queryOptions.filters.maginitudeDropMin}
-              onChange={(event) => {
+              onChange={(newValue) => {
                 setQueryOptions((prev) => {
                   return {
                     ...prev,
                     filters: {
                       ...prev.filters,
-                      maginitudeDropMin: event.target.value
+                      maginitudeDropMin: newValue
+                    }
+                  }
+                })
+              }}
+            />
+          </Grid>
+          <Grid item xs={6} container>
+            <ObjectDiameterFilter
+              value={{
+                diameterMin: queryOptions.filters.diameterMin,
+                diameterMax: queryOptions.filters.diameterMax
+              }}
+              onChange={(value) => {
+                setQueryOptions((prev) => {
+                  return {
+                    ...prev,
+                    filters: {
+                      ...prev.filters,
+                      ...value
                     }
                   }
                 })

frontend/src/contexts/PredictionContext.js

@@ -25,7 +25,9 @@ export function PredictionEventsProvider({ children }) {
         solar_time_after: dayjs().set('hour', 18).startOf('hour'),
         solar_time_before: dayjs().set('hour', 6).startOf('hour'),
         nightside: true,
-        maginitudeDropMin: '',
+        maginitudeDropMin: undefined,
+        diameterMin: undefined,
+        diameterMax: undefined,
         geo: false,
         latitude: undefined,
         longitude: undefined,

frontend/src/services/api/Occultation.js

@@ -149,6 +149,16 @@ const parsePredictEventsFilters = (params) => {
     if (filters.maginitudeDropMin !== undefined && filters.maginitudeDropMin !== '') {
       newFilters.magnitude_drop = filters.maginitudeDropMin
     }
+
+    // Filtro por Object Diameter Range min, max
+    if (filters.diameterMin !== undefined && filters.diameterMin !== '') {
+      newFilters.diameter_min = filters.diameterMin
+    }
+
+    if (filters.diameterMax !== undefined && filters.diameterMax !== '') {
+      newFilters.diameter_max = filters.diameterMax
+    }
+
     // Filtro por Local Solar Time
     if (filters.solar_time_enabled === true) {
       if (filters.solar_time_after !== undefined && filters.solar_time_before !== '') {