[DT-777] Filter by participant count

src/components/data_search/DatasetFilterList.jsx

@@ -6,7 +6,7 @@ import ListItemButton from '@mui/material/ListItemButton';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
 import Divider from '@mui/material/Divider';
-import { Button, Typography } from '@mui/material';
+import { Button, TextField, Typography } from '@mui/material';
 import { Checkbox } from '@mui/material';
 import {flatten, uniq, compact, orderBy} from 'lodash';
 import {getAccessManagementSummary} from '../../types/model';
@@ -21,15 +21,15 @@ export const FilterItemHeader = (props) => {
 };
 
 export const FilterItemList = (props) => {
-  const { category, datasets, filter, filterHandler, isFiltered, filterNameFn, filterDisplayFn } = props;
+  const { category, filter, filterHandler, isFiltered, filterNameFn, filterDisplayFn } = props;
   return (
     <List sx={{ margin: '-0.5em -0.5em' }}>
       {
         filter.map((filter) => {
           const filterName = filterNameFn(filter);
           return (
             <ListItem disablePadding key={filter}>
-              <ListItemButton sx={{ padding: '0' }} onClick={(event) => filterHandler(event, datasets, category, filter)}>
+              <ListItemButton sx={{ padding: '0' }} onClick={() => filterHandler(category, filter)}>
                 <ListItemIcon>
                   <Checkbox checked={isFiltered(filter, category)} />
                 </ListItemIcon>
@@ -45,13 +45,34 @@ export const FilterItemList = (props) => {
   );
 };
 
+export const FilterItemRange = (props) => {
+  const { min, max, minCategory, maxCategory, filterHandler } = props;
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
+      <TextField id='minimum-range-input' size='small' margin='dense' variant='outlined' defaultValue={min}
+        helperText={'minimum'}
+        FormHelperTextProps={{style: { transform: 'scale(1.5)' }}}
+        onChange={(event) => filterHandler(minCategory, event.target.value === '' ? min : event.target.value)}/>
+      <Box padding={'0rem 1rem 1rem'}> - </Box>
+      <TextField id='maximum-range-input' size='small' margin='dense' variant='outlined' defaultValue={max}
+        helperText={'maximum'}
+        FormHelperTextProps={{style: {transform: 'scale(1.5)'}}}
+        onChange={(event) => filterHandler(maxCategory, event.target.value === '' ? max : event.target.value)}
+      />
+    </Box>
+  );
+};
+
 export const DatasetFilterList = (props) => {
-  const { datasets, filters, filterHandler, isFiltered, onClear } = props;
+  const { datasets, filterHandler, isFiltered, onClear } = props;
 
   const accessManagementFilters = uniq(compact(datasets.map((dataset) => dataset.accessManagement)));
   const dataUseFilters = uniq(compact(flatten(datasets.map((dataset) => dataset.dataUse?.primary))).map((dataUse) => dataUse.code));
   const dataTypeFilters = uniq(flatten(datasets.map((dataset) => dataset.study.dataTypes)));
   const dacFilters = orderBy(uniq(compact(datasets.map((dataset) => dataset.dac?.dacName))), (dac) => dac.toLowerCase(), 'asc');
+  // some participantCounts are undefined, so filter them out before calculating min and max
+  const participantCountMax = Math.max(...datasets.filter((dataset) => dataset.participantCount).map((dataset) => dataset.participantCount));
+  const participantCountMin = Math.min(...datasets.filter((dataset) => dataset.participantCount).map((dataset) => dataset.participantCount));
 
   return (
     <Box sx={{ bgcolor: 'background.paper' }}>
@@ -101,15 +122,24 @@ export const DatasetFilterList = (props) => {
         isFiltered={isFiltered}
         filterNameFn={(filter) => filter}
       />
-      <FilterItemHeader title="Data Type" />
+      <FilterItemHeader title='Data Type' />
       <FilterItemList
-        category="dataType"
+        category='dataType'
         datasets={datasets}
         filter={dataTypeFilters}
         filterHandler={filterHandler}
         isFiltered={isFiltered}
         filterNameFn={(filter) => filter}
       />
+      <FilterItemHeader title='Participant Count' />
+      <FilterItemRange
+        min={participantCountMin}
+        max={participantCountMax}
+        minCategory='participantCountMin'
+        maxCategory='participantCountMax'
+        datasets={datasets}
+        filterHandler={filterHandler}
+      />
     </Box>
   );
 };

src/components/data_search/DatasetSearchTable.jsx

@@ -4,7 +4,7 @@ import useOnMount from '@mui/utils/useOnMount';
 import * as React from 'react';
 import { Box, Button } from '@mui/material';
 import { useEffect, useRef, useState } from 'react';
-import { isEmpty } from 'lodash';
+import { isArray, isEmpty } from 'lodash';
 import { TerraDataRepo } from '../../libs/ajax/TerraDataRepo';
 import { DatasetSearchTableDisplay } from './DatasetSearchTableDisplay';
 import { datasetSearchTableTabs } from './DatasetSearchTableConstants';
@@ -37,7 +37,9 @@ const defaultFilters = {
   accessManagement: [],
   dataUse: [],
   dataType: [],
-  dac: []
+  dac: [],
+  participantCountMin: null,
+  participantCountMax: null,
 };
 
 export const DatasetSearchTable = (props) => {
@@ -49,8 +51,21 @@ export const DatasetSearchTable = (props) => {
   const [selectedTable, setSelectedTable] = useState(datasetSearchTableTabs.study);
   const [searchTerm, setSearchTerm] = useState('');
 
-  const isFiltered = (filter, category) => (filters[category]).indexOf(filter) > -1;
-  const numSelectedFilters = (filters) => Object.values(filters).reduce((sum, array) => sum + array.length, 0);
+  const isFilteredArray = (filter, category) => (filters[category]).indexOf(filter) > -1;
+
+  const numSelectedFilters = (filters) => {
+    var sum = 0;
+    for (const category in filters) {
+      if (isArray(filters[category])) {
+        sum += filters[category].length;
+      } else {
+        if (filters[category]) {
+          sum += 1;
+        }
+      }
+    }
+    return sum;
+  };
 
   const getExportableDatasets = async (datasets) => {
     // Note the dataset identifier is in each sub-table row.
@@ -155,6 +170,15 @@ export const DatasetSearchTable = (props) => {
         }
       });
 
+      filterTerms.push({
+        'range': {
+          'participantCount': {
+            'gte': filters.participantCountMin,
+            'lte': filters.participantCountMax,
+          }
+        }
+      });
+
       if (filterTerms.length > 0) {
         filterQuery = [
           {
@@ -179,12 +203,16 @@ export const DatasetSearchTable = (props) => {
     };
   };
 
-  const filterHandler = (event, data, category, filter) => {
+  const filterHandler = (category, filter) => {
     var newFilters = _.clone(filters);
-    if (!isFiltered(filter, category) && filter !== '') {
-      newFilters[category] = filters[category].concat(filter);
+    if (isArray(newFilters[category])) {
+      if (!isFilteredArray(filter, category) && filter !== '') {
+        newFilters[category] = filters[category].concat(filter);
+      } else {
+        newFilters[category] = filters[category].filter((f) => f !== filter);
+      }
     } else {
-      newFilters[category] = filters[category].filter((f) => f !== filter);
+      newFilters[category] = filter;
     }
     setFilters(newFilters);
   };
@@ -280,7 +308,7 @@ export const DatasetSearchTable = (props) => {
         </Box>
         <Box sx={{display: 'flex', flexDirection: 'row', paddingTop: '2em'}}>
           <Box sx={{width: '14%', padding: '0 1em'}}>
-            <DatasetFilterList datasets={datasets} filters={filters} filterHandler={filterHandler} isFiltered={isFiltered} onClear={() => setFilters(defaultFilters)}/>
+            <DatasetFilterList datasets={datasets} filterHandler={filterHandler} isFiltered={isFilteredArray} onClear={() => setFilters(defaultFilters)}/>
           </Box>
           <Box sx={{width: '85%', padding: '0 1em'}}>
             {(() => {