- #1563 - all the UI and infrastructure and search by shortcode and compound id is done

Author: boriskovar-m2ms

js/components/common/Components/SearchField/index.js

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { makeStyles, TextField, InputAdornment } from '@material-ui/core';
+import { makeStyles, TextField, InputAdornment, IconButton } from '@material-ui/core';
 import { Search } from '@material-ui/icons';
 import classNames from 'classnames';
 import { debounce } from 'lodash';
@@ -31,9 +31,18 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
-const SearchField = ({ className, id, placeholder, size, onChange, disabled, searchString }) => {
+const SearchField = ({
+  className,
+  id,
+  placeholder,
+  size,
+  onChange,
+  disabled,
+  searchString,
+  searchIconAction = null
+}) => {
   const classes = useStyles();
-  let value = searchString ??  '';
+  let value = searchString ?? '';
 
   const debounced = useMemo(
     () =>
@@ -57,7 +66,17 @@ const SearchField = ({ className, id, placeholder, size, onChange, disabled, sea
       InputProps={{
         startAdornment: (
           <InputAdornment position="start">
-            <Search color="inherit" />
+            {searchIconAction ? (
+              <IconButton
+                color="inherit"
+                sx={{ pointerEvents: 'auto', cursor: 'pointer' }}
+                onClick={() => searchIconAction(true)}
+              >
+                <Search color="inherit" />
+              </IconButton>
+            ) : (
+              <Search color="inherit" />
+            )}
           </InputAdornment>
         ),
         className: classes.input

js/components/preview/molecule/moleculeList.js

@@ -45,7 +45,8 @@ import {
   withDisabledMoleculesNglControlButtons,
   removeSelectedTypesInHitNavigator,
   selectAllHits,
-  autoHideTagEditorDialogsOnScroll
+  autoHideTagEditorDialogsOnScroll,
+  searchForObservations
 } from './redux/dispatchActions';
 import { DEFAULT_FILTER, PREDEFINED_FILTERS } from '../../../reducers/selection/constants';
 import { Edit, FilterList } from '@material-ui/icons';
@@ -288,6 +289,8 @@ export const MoleculeList = memo(({ hideProjects }) => {
 
   const object_selection = useSelector(state => state.selectionReducers.mol_group_selection);
 
+  const searchSettings = useSelector(state => state.selectionReducers.searchSettings);
+
   const all_mol_lists = useSelector(state => state.apiReducers.all_mol_lists);
   const directDisplay = useSelector(state => state.apiReducers.direct_access);
   const directAccessProcessed = useSelector(state => state.apiReducers.direct_access_processed);
@@ -321,17 +324,13 @@ export const MoleculeList = memo(({ hideProjects }) => {
     }, [object_selection]);*/
 
   let joinedMoleculeLists = useMemo(() => {
-    // const searchedString = currentActionList.find(action => action.type === 'SEARCH_STRING_HIT_NAVIGATOR');
     if (searchString) {
-      return allMoleculesList.filter(molecule => molecule.code.toLowerCase().includes(searchString.toLowerCase()));
-      // } else if (searchedString) {
-      //   return getJoinedMoleculeList.filter(molecule =>
-      //     molecule.protein_code.toLowerCase().includes(searchedString.searchStringHitNavigator.toLowerCase())
-      //   );
+      // return allMoleculesList.filter(molecule => molecule.code.toLowerCase().includes(searchString.toLowerCase()));
+      return dispatch(searchForObservations(searchString, allMoleculesList, searchSettings));
     } else {
       return getJoinedMoleculeList;
     }
-  }, [getJoinedMoleculeList, allMoleculesList, searchString]);
+  }, [searchString, dispatch, allMoleculesList, searchSettings, getJoinedMoleculeList]);
 
   const addSelectedMoleculesFromUnselectedSites = useCallback(
     (joinedMoleculeLists, list) => {
@@ -849,40 +848,7 @@ export const MoleculeList = memo(({ hideProjects }) => {
 
   const openGlobalTagEditor = () => {};
 
-  // let filterSearchString = '';
-  // const getSearchedString = () => {
-  //   filterSearchString = currentActionList.find(action => action.type === 'SEARCH_STRING_HIT_NAVIGATOR');
-  // };
-  // getSearchedString();
-
-  // useEffect(() => {
-  //   if (filterSearchString?.searchStringHitNavigator !== '') {
-  //     setSearchString(filterSearchString.searchStringHitNavigator);
-  //   }
-  // }, [filterSearchString]);
-
   const actions = [
-    /* do not disable filter by itself if it does not have any result */
-    /*<FormControl className={classes.formControl} disabled={({predefinedFilter} === 'none' && !joinedMoleculeListsCopy.length) || sortDialogOpen}>
-      <Select
-        className={classes.select}
-        value={predefinedFilter}
-        onChange={changePredefinedFilter}
-        inputProps={{
-          name: 'predefined',
-          id: 'predefined-label-placeholder',
-          classes: { icon: classes.selectIcon }
-        }}
-        displayEmpty
-        name="predefined"
-      >
-        {Object.keys(PREDEFINED_FILTERS).map(preFilterKey => (
-          <MenuItem key={`Predefined-filter-${preFilterKey}`} value={preFilterKey}>
-            {PREDEFINED_FILTERS[preFilterKey].name}
-          </MenuItem>
-        ))}
-      </Select>
-    </FormControl>,*/
     <SearchField
       className={classes.search}
       id="search-hit-navigator"

js/components/preview/molecule/observationCmpList.js

@@ -49,7 +49,8 @@ import {
   removeSelectedTypesInHitNavigator,
   selectAllHits,
   autoHideTagEditorDialogsOnScroll,
-  selectAllVisibleObservations
+  selectAllVisibleObservations,
+  searchForObservations
 } from './redux/dispatchActions';
 import { DEFAULT_FILTER, PREDEFINED_FILTERS } from '../../../reducers/selection/constants';
 import { Edit, FilterList } from '@material-ui/icons';
@@ -64,7 +65,8 @@ import {
   setOpenObservationsDialog,
   setLHSCompoundsInitialized,
   setPoseIdForObservationsDialog,
-  setObservationDialogAction
+  setObservationDialogAction,
+  setSearchSettingsDialogOpen
 } from '../../../reducers/selection/actions';
 import { initializeFilter } from '../../../reducers/selection/dispatchActions';
 import * as listType from '../../../constants/listTypes';
@@ -88,6 +90,7 @@ import { DJANGO_CONTEXT } from '../../../utils/djangoContext';
 import ObservationCmpView from './observationCmpView';
 import { ObservationsDialog } from './observationsDialog';
 import { useScrollToSelectedPose } from './useScrollToSelectedPose';
+import { SearchSettingsDialog } from './searchSettingsDialog';
 
 const useStyles = makeStyles(theme => ({
   container: {
@@ -277,7 +280,6 @@ export const ObservationCmpList = memo(({ hideProjects }) => {
   const moleculesPerPage = 30;
   const [currentPage, setCurrentPage] = useState(0);
   const searchString = useSelector(state => state.previewReducers.molecule.searchStringLHS);
-  // const [searchString, setSearchString] = useState(null);
   const [sortDialogAnchorEl, setSortDialogAnchorEl] = useState(null);
   const oldUrl = useRef('');
   const setOldUrl = url => {
@@ -327,6 +329,9 @@ export const ObservationCmpList = memo(({ hideProjects }) => {
 
   const proteinsHasLoaded = useSelector(state => state.nglReducers.proteinsHasLoaded);
 
+  const searchSettingsDialogOpen = useSelector(state => state.selectionReducers.searchSettingsDialogOpen);
+  const searchSettings = useSelector(state => state.selectionReducers.searchSettings);
+
   const [predefinedFilter, setPredefinedFilter] = useState(filter !== undefined ? filter.predefined : DEFAULT_FILTER);
 
   const [ascending, setAscending] = useState(true);
@@ -467,17 +472,12 @@ export const ObservationCmpList = memo(({ hideProjects }) => {
     }, [object_selection]);*/
 
   let joinedMoleculeLists = useMemo(() => {
-    // const searchedString = currentActionList.find(action => action.type === 'SEARCH_STRING_HIT_NAVIGATOR');
     if (searchString) {
-      return allMoleculesList.filter(molecule => molecule.code.toLowerCase().includes(searchString.toLowerCase()));
-      // } else if (searchedString) {
-      //   return getJoinedMoleculeList.filter(molecule =>
-      //     molecule.protein_code.toLowerCase().includes(searchedString.searchStringHitNavigator.toLowerCase())
-      //   );
+      return dispatch(searchForObservations(searchString, allMoleculesList, searchSettings));
     } else {
       return getJoinedMoleculeList;
     }
-  }, [getJoinedMoleculeList, allMoleculesList, searchString]);
+  }, [searchString, dispatch, allMoleculesList, getJoinedMoleculeList, searchSettings]);
 
   const addSelectedMoleculesFromUnselectedSites = useCallback(
     (joinedMoleculeLists, list) => {
@@ -1014,6 +1014,10 @@ export const ObservationCmpList = memo(({ hideProjects }) => {
     return molecules;
   };
 
+  const openSearchSettingsDialog = open => {
+    dispatch(setSearchSettingsDialogOpen(open));
+  };
+
   const actions = [
     <SearchField
       className={classes.search}
@@ -1026,6 +1030,7 @@ export const ObservationCmpList = memo(({ hideProjects }) => {
       // searchString={filterSearchString?.searchStringHitNavigator ?? ''}
       searchString={searchString ?? ''}
       placeholder="Search"
+      searchIconAction={openSearchSettingsDialog}
     />,
 
     <IconButton
@@ -1118,6 +1123,9 @@ export const ObservationCmpList = memo(({ hideProjects }) => {
           setIsOpenLPCAlert(false);
         }}
       />
+      {searchSettingsDialogOpen && (
+        <SearchSettingsDialog openDialog={searchSettingsDialogOpen} setOpenDialog={openSearchSettingsDialog} />
+      )}
       {isObservationDialogOpen && (
         <ObservationsDialog open={isObservationDialogOpen} anchorEl={tagEditorAnchorEl} ref={tagEditorRef} />
       )}