Fix project explorer menu searches

vesta/vesta_ui/src/components/project-explorer/context.tsx

@@ -98,32 +98,36 @@ export function ProjectExplorerContextProvider({projectData, children}:{
   const updateFilterItemSet = React.useCallback(
     (filterItemSet: FilterSet) => {
       setState( (prevState) => ({ ...prevState, filterItemSet }) );
-    }, [ state ]
+    }, [ ]
   )
 
   const updateFilterItems = React.useCallback(
     (filterName: string, filterItems: FilterItem['value'][]|null) => {
-      let newState = { ...state };
-      newState.filterItemSet = {
-        ...state.filterItemSet,
-        [ filterName ]: filterItems
-      }
+      setState(prevState => {
+        let newState = { ...prevState };
+        newState.filterItemSet = {
+          ...prevState.filterItemSet,
+          [ filterName ]: filterItems
+        }
 
-      if (!filterItems || filterItems.length == 0) {
-        delete newState.filterItemSet[filterName];
-      }
-      setState(newState);
-    }, [ state ]
+        if (!filterItems || filterItems.length == 0) {
+          delete newState.filterItemSet[filterName];
+        }
+        return newState
+      });
+    }, []
   );
 
   const clearFilterItems = React.useCallback(
     () => {
-      let newState = { ...state };
-      newState.filterItemSet = {
-        ...defaultProjectExplorerState.filterItemSet
-      }
-      setState(newState);
-    }, [ state ]
+      setState(prevState => {
+        let newState = { ...prevState };
+        newState.filterItemSet = {
+          ...defaultProjectExplorerState.filterItemSet
+        }
+        return newState
+      });
+    }, [ ]
   );
 
   const filteredProjectData = projectData.filter(

vesta/vesta_ui/src/components/project-explorer/filter-list.tsx

@@ -167,12 +167,11 @@ const Filter = ({title, highlight, children}:{
 
 type FilterFunction = (filterItem:FilterItem['value'], project:Project, matchAllFilters:boolean) => boolean;
 
-const BasicFilter = ({title, filter, items, render, id}:{
+const BasicFilter = ({title, filter, items, render}:{
   title: string;
   items: (p:Project) => any;
   filter: FilterFunction,
   render: (params:any) => any;
-  id: (item:FilterItem['value']) => any;
 }) => {
   const {
     state: { projectData, filters, filterItemSet },
@@ -203,8 +202,8 @@ const BasicFilter = ({title, filter, items, render, id}:{
   };
 
   const handleClickRemoveFilterItem = React.useCallback(
-    (filterItem:FilterItem['value']) => {
-      handleChangeFilterItems(filterItems.filter((f:FilterItem['value']) => f !== filterItem))
+    (filterItem:string) => {
+      handleChangeFilterItems(filterItems.filter((f:string) => f !== filterItem))
     }, [filterItemSet]
   );
 
@@ -216,7 +215,7 @@ const BasicFilter = ({title, filter, items, render, id}:{
       icon={searchDarkIcon}
       options={itemNames}
       // @ts-ignore
-      onChange={(_, value:FilterItem['value'][] | null, reason) => {
+      onChange={(_, value:string[] | null, reason) => {
           if (reason === 'removeOption') return;
           handleChangeFilterItems(value);
       }}
@@ -241,10 +240,10 @@ const BasicFilter = ({title, filter, items, render, id}:{
             pt: '16px'
         }}
     >
-        {filterItems.map(((item:FilterItem['value']) => (
+        {filterItems.map(((item:string) => (
             <FilterPill
-                key={id(item)}
-                label={id(item)}
+                key={item}
+                label={item}
                 removeable
                 onClickRemove={() => handleClickRemoveFilterItem(item)}
             />
@@ -305,8 +304,7 @@ const InvestigatorsFilter = () => {
           variant='filled'
         />
       )
-    }
-    id={ (pi:FilterItem['value']) => (pi as PrincipalInvestigator).name }/>
+    } />
 }
 
 const DEFAULT_RANGE=[0,500];
@@ -324,7 +322,6 @@ const DataTypesFilter = () => {
     render={
       projectItems => (params:any) => <Typography variant='pBodyMediumWt' key={params.option}>{params.option}</Typography>
     }
-    id={ (item:FilterItem['value']) => item as ProjectDataType }
   />
 }
 
@@ -342,7 +339,6 @@ const ThemeFilter = () => {
         <Typography variant='pMedium'>{projectItems[params.option].name}</Typography>
       )
     }
-    id={ (item:FilterItem['value']) => (item as ThemeData).name }
   />
 }
 
@@ -403,7 +399,6 @@ const TypeFilter = () => {
         <Typography variant='pMedium'>{params.option}</Typography>
       )
     }
-    id={ (item:FilterItem['value']) => item }
   />
 }
 
@@ -421,7 +416,6 @@ const PhaseFilter = () => {
         <Typography variant='pMedium'>{params.option}</Typography>
       )
     }
-    id={ (item:FilterItem['value']) => item }
   />
 }
 

vesta/vesta_ui/src/components/project-explorer/project-explorer.tsx

@@ -70,9 +70,9 @@ function _ProjectExplorer({ }) {
     }, []);
 
     const handleChangeFilterItems = React.useCallback(
-      ([ filterItem, ...others ]: FilterItem[]) => {
-        if (!(filterItem.type in filterItemSet) || !filterItemSet[filterItem.type].includes(filterItem.value))
-        updateFilterItems(filterItem.type, (filterItemSet[filterItem.type] || []).concat(filterItem.value))
+      (filterItem: FilterItem) => {
+        if (!(filterItem.type in filterItemSet) || !filterItemSet[filterItem.type].includes(filterItem.label))
+        updateFilterItems(filterItem.type, (filterItemSet[filterItem.type] || []).concat(filterItem.label))
         setCurrentPage(0)
       }, [ filterItemSet, updateFilterItems ]
     );
@@ -173,13 +173,13 @@ function _ProjectExplorer({ }) {
                                 />
 
                                 <Autocomplete
-                                    multiple
                                     icon={searchDarkIcon}
                                     placeholder={searchPlaceholder}
                                     options={[...searchOptions].sort((a, b) => a.type.localeCompare(b.type))}
                                     showResultsOnEmpty={false}
                                     // @ts-ignore
                                     inputValue={inputValue}
+                                    value={null}
                                     onInputChange={ (_, value: string, reason) => setInputValue(value) }
                                     onKeyDown={
                                       (e) => {
@@ -193,11 +193,12 @@ function _ProjectExplorer({ }) {
                                       }
                                     }
                                     // @ts-ignore
-                                    onChange={(_, value: FilterItem[], reason) => {
+                                    onChange={(_, value: FilterItem, reason) => {
                                         // disables removing options with backspace
                                         if (reason === 'removeOption') return
 
                                         handleChangeFilterItems(value)
+                                        setInputValue('');
                                     }}
                                     // @ts-ignore
                                     getOptionKey={(option: FilterItem) => option.key}