Clear selected filters code

DataBiosphere · Nov 14, 2024 · d9e2bcf · d9e2bcf
1 parent 2260bfc
commit d9e2bcf
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 20 deletions.
diff --git a/src/components/data_search/DatasetFilterList.jsx b/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 { Typography } from '@mui/material';
+import { Button, Typography } from '@mui/material'
 import { Checkbox } from '@mui/material';
 import { flatten, uniq, compact, capitalize, orderBy } from 'lodash';
 
@@ -43,17 +43,22 @@ export const FilterItemList = (props) => {
 };
 
 export const DatasetFilterList = (props) => {
-  const { datasets, filters, filterHandler, isFiltered } = props;
+  const { datasets, filters, 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 dacFilters = orderBy(uniq(compact(datasets.map((dataset) => dataset.dac?.dacName))), (dac) => dac.toLowerCase(), 'asc');
 
   return (
     <Box sx={{ bgcolor: 'background.paper' }}>
-      <Typography variant="h5" gutterBottom component="div" sx={{ fontFamily: 'Montserrat', fontWeight: '600' }}>
-        Filters
-      </Typography>
+      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+        <Typography variant="h5" gutterBottom component="div" sx={{ fontFamily: 'Montserrat', fontWeight: '600' }}>
+          Filters
+        </Typography>
+        <Button onClick={onClear}>
+          Clear Filters
+        </Button>
+      </Box>
       <Divider />
       <FilterItemHeader title="Access Type" />
       <FilterItemList

diff --git a/src/components/data_search/DatasetSearchTable.jsx b/src/components/data_search/DatasetSearchTable.jsx
@@ -42,7 +42,7 @@ const defaultFilters = {
 export const DatasetSearchTable = (props) => {
   const { datasets, history, icon, title } = props;
   const [exportableDatasets, setExportableDatasets] = useState({});
-  const [filters, setFilters] = useState(defaultFilters);
+  const [filters, setFilters] = useState(_.clone(defaultFilters));
   const [filtered, setFiltered] = useState([]);
   const [selected, setSelected] = useState([]);
   const [selectedTable, setSelectedTable] = useState(datasetSearchTableTabs.study);
@@ -167,8 +167,20 @@ export const DatasetSearchTable = (props) => {
     };
   };
 
+  const search = (searchFilters) => {
+    const fullQuery = assembleFullQuery(searchFilters);
+    try {
+      DataSet.searchDatasetIndex(fullQuery).then((filteredDatasets) => {
+        var newFiltered = datasets.filter(value => filteredDatasets.some(item => _.isEqual(item, value)));
+        setFiltered(newFiltered);
+      });
+    } catch (error) {
+      Notifications.showError({ text: 'Failed to load Elasticsearch index' });
+    }
+  }
+
   const filterHandler = (event, data, category, filter) => {
-    var newFilters = defaultFilters;
+    var newFilters = _.clone(filters);
     if (category === 'search') {
       newFilters[category] = [];
       setSearchTerm(filter);
@@ -180,18 +192,7 @@ export const DatasetSearchTable = (props) => {
     }
     setFilters(newFilters);
 
-    const fullQuery = assembleFullQuery(newFilters);
-    const doSearch = async () => {
-      try {
-        await DataSet.searchDatasetIndex(fullQuery).then((filteredDatasets) => {
-          var newFiltered = datasets.filter(value => filteredDatasets.some(item => _.isEqual(item, value)));
-          setFiltered(newFiltered);
-        });
-      } catch (error) {
-        Notifications.showError({ text: 'Failed to load Elasticsearch index' });
-      }
-    };
-    doSearch();
+    search(newFilters);
   };
   const applyForAccess = async () => {
     try {
@@ -270,7 +271,11 @@ 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}/>
+            <DatasetFilterList datasets={datasets} filters={filters} filterHandler={filterHandler} isFiltered={isFiltered} onClear={() => {
+              const newFilters = { ...defaultFilters, search: filters.search }
+              setFilters(newFilters)
+              search(newFilters);
+            }}/>
           </Box>
           <Box sx={{width: '85%', padding: '0 1em'}}>
             {(() => {