From 2c89a56e266bb38b800fdd6eb68e63090fc290c8 Mon Sep 17 00:00:00 2001
From: Beate Quednau <beate@firma-pflaum.de>
Date: Wed, 8 Feb 2023 13:29:10 +0100
Subject: [PATCH] Rename search store, refactoring

---
 .../components/navigation/search/Search.js    |  6 +-
 .../src/components/searchModal/FormData.js    |  4 +-
 .../src/components/searchModal/SearchModal.js | 66 ++++++++---------
 .../searchModal/forms/AdvancedSearchForm.js   | 60 ++++++++-------
 .../searchModal/forms/KetcherRailsForm.js     | 73 ++++++++++---------
 .../searchModal/forms/SearchResult.js         | 36 ++++-----
 .../forms/SearchResultTabContent.js           | 14 ++--
 app/packs/src/stores/mobx/RootStore.jsx       |  6 +-
 ...SearchResultsStore.jsx => SearchStore.jsx} | 31 +++++++-
 9 files changed, 160 insertions(+), 136 deletions(-)
 rename app/packs/src/stores/mobx/{SearchResultsStore.jsx => SearchStore.jsx} (84%)

diff --git a/app/packs/src/components/navigation/search/Search.js b/app/packs/src/components/navigation/search/Search.js
index c53d9020c2..72e0ab16ed 100644
--- a/app/packs/src/components/navigation/search/Search.js
+++ b/app/packs/src/components/navigation/search/Search.js
@@ -221,7 +221,7 @@ export default class Search extends React.Component {
         <Button bsStyle={customClass ? null : 'primary'} className={customClass} onClick={() => this.showStructureEditor()}>
           <Glyphicon glyph="pencil" id="AutoCompletedrawAddon" />
         </Button>
-        <Button bsStyle={customClass ? null : 'info'} className={customClass} onClick={() => this.context.searchResults.showSearchModal()}>
+        <Button bsStyle={customClass ? null : 'info'} className={customClass} onClick={() => this.context.search.showSearchModal()}>
           <i className="fa fa-search" />
         </Button>
         <Button bsStyle={customClass ? null : 'danger'} className={customClass} onClick={this.handleClearSearchSelection}>
@@ -317,9 +317,7 @@ export default class Search extends React.Component {
           />
         </div>
         <div className="search-modal-draw">
-          <SearchModal
-            isPublic={this.props.isPublic}
-          />
+          <SearchModal />
         </div>
         <div className="search-autocomplete">
           <AutoCompleteInput
diff --git a/app/packs/src/components/searchModal/FormData.js b/app/packs/src/components/searchModal/FormData.js
index d4bf58ca45..e60ae63f1c 100644
--- a/app/packs/src/components/searchModal/FormData.js
+++ b/app/packs/src/components/searchModal/FormData.js
@@ -4,15 +4,13 @@ export default FormData = {
       id: 0,
       value: 'advanced',
       label: 'Advanced Search',
-      component: 'advanced',
-      component_path: './forms/AdvancedSearchForm'
+      component: 'advanced'
     },
     {
       id: 1,
       value: 'ketcher',
       label: 'ketcher-rails',
       component: 'ketcher',
-      component_path: './forms/KetcherRailsForm',
       structure: {
         path: 'ketcher',
         setMolfileInFrame: false,
diff --git a/app/packs/src/components/searchModal/SearchModal.js b/app/packs/src/components/searchModal/SearchModal.js
index 825fdaedbc..4ce91f331b 100644
--- a/app/packs/src/components/searchModal/SearchModal.js
+++ b/app/packs/src/components/searchModal/SearchModal.js
@@ -1,4 +1,4 @@
-import React, { useState, Suspense, useEffect, useContext } from 'react';
+import React, { useState, Suspense, useContext } from 'react';
 import PropTypes from 'prop-types';
 import { Button, ButtonToolbar, Modal, FormGroup } from 'react-bootstrap';
 import Draggable from "react-draggable";
@@ -7,7 +7,6 @@ import UserStore from 'src/stores/alt/stores/UserStore';
 import { observer } from 'mobx-react';
 import { StoreContext } from 'src/stores/mobx/RootStore';
 
-import FormData from './FormData';
 import AdvancedSearchForm from './forms/AdvancedSearchForm';
 import KetcherRailsForm from './forms/KetcherRailsForm';
 import NoFormSelected from './forms/NoFormSelected';
@@ -18,17 +17,24 @@ const Components = {
   empty: NoFormSelected
 }
 
-const SearchModal = ({ isPublic }) => {
-  const [selectedOption, setSelectedOption] = useState(FormData.forms[0]);
-  const [minimizeModal, setMinimizeModal] = useState(true);
-  const searchResultsStore = useContext(StoreContext).searchResults;
+const SearchModal = () => {
+  const searchStore = useContext(StoreContext).search;
+
+  const FormData = [
+    {
+      value: 'advanced',
+      label: 'Advanced Search'
+    },
+    {
+      value: 'ketcher',
+      label: 'ketcher-rails'
+    }
+  ]
 
   const FormComponent = (block) => {
-    if (typeof Components[block.component] !== "undefined") {
-      return React.createElement(Components[block.component], {
-        key: block.value,
-        handleCancel: handleCancel,
-        isPublic: isPublic
+    if (typeof Components[block.value] !== "undefined") {
+      return React.createElement(Components[block.value], {
+        key: block.value
       });
     }
     return React.createElement(Components['empty'], {
@@ -38,7 +44,7 @@ const SearchModal = ({ isPublic }) => {
 
   const SearchPulldown = (props) => {
     const { onChange, selected } = props;
-    const formOptions = FormData.forms.map((option) => option);
+    const formOptions = FormData.map((option) => option);
 
     return (
       <FormGroup>
@@ -60,29 +66,19 @@ const SearchModal = ({ isPublic }) => {
     );
   }
 
-  const handleCancel = () => {
-    searchResultsStore.hideSearchModal();
-    searchResultsStore.hideSearchResults();
-    searchResultsStore.clearSearchResults();
-  }
-
-  const handleMinimize = () => {
-    setMinimizeModal(current => !current)
-  }
-
-  const handleSearchPulldownSelection = (e) => {
-    setSelectedOption(FormData.forms[e.id]);
-    searchResultsStore.clearSearchResults();
-    setMinimizeModal(true);
-  }
+  //const handleCancel = () => {
+  //  searchStore.hideSearchModal();
+  //  searchStore.hideSearchResults();
+  //  searchStore.clearSearchResults();
+  //}
 
-  let minimizedClass = minimizeModal ? '' : ' minimized';
+  let minimizedClass = searchStore.searchModalMinimized ? ' minimized' : '';
 
   return (
     <Draggable handle=".handle">
       <Modal
-        show={searchResultsStore.searchModalVisible}
-        onHide={handleCancel}
+        show={searchStore.searchModalVisible}
+        onHide={() => searchStore.handleCancel()}
         backdrop={false}
         dialogas="full-search"
         dialogClassName="searching"
@@ -96,18 +92,20 @@ const SearchModal = ({ isPublic }) => {
           </div>
           <div className="col-md-3 col-sm-5">
             <SearchPulldown
-              onChange={handleSearchPulldownSelection}
-              selected={selectedOption}
+              onChange={(e) => searchStore.changeSearchModalSelectedForm(e)}
+              selected={searchStore.searchModalSelectedForm}
             />
           </div>
           <div className="col-md-1 col-sm-1">
-            <i className="fa fa-window-minimize window-minimize" onClick={handleMinimize} />
+            <i
+              className="fa fa-window-minimize window-minimize"
+              onClick={() => searchStore.toggleSearchModalMinimized()} />
           </div>
         </Modal.Header>
         <Modal.Body>
           <React.Suspense fallback={<Spinner />}>
             <div className={`form-container${minimizedClass}`}>
-              {FormComponent(selectedOption)}
+              {FormComponent(searchStore.searchModalSelectedForm)}
             </div>
           </React.Suspense>
         </Modal.Body>
diff --git a/app/packs/src/components/searchModal/forms/AdvancedSearchForm.js b/app/packs/src/components/searchModal/forms/AdvancedSearchForm.js
index 2a77877fee..ac5df10553 100644
--- a/app/packs/src/components/searchModal/forms/AdvancedSearchForm.js
+++ b/app/packs/src/components/searchModal/forms/AdvancedSearchForm.js
@@ -8,7 +8,7 @@ import SearchResult from './SearchResult';
 import { observer } from 'mobx-react';
 import { StoreContext } from 'src/stores/mobx/RootStore';
 
-const AdvancedSearchForm = ({ handleCancel }) => {
+const AdvancedSearchForm = () => {
   const defaultSelections = [{
     link: '',
     match: '=',
@@ -21,7 +21,7 @@ const AdvancedSearchForm = ({ handleCancel }) => {
   }];
 
   const [selectedOptions, setSelectedOptions] = useState(defaultSelections);
-  const searchResultsStore = useContext(StoreContext).searchResults;
+  const searchStore = useContext(StoreContext).search;
 
   useEffect(() => {
     const length = selectedOptions.length - 1;
@@ -42,8 +42,8 @@ const AdvancedSearchForm = ({ handleCancel }) => {
       return (f.field && f.link && f.value) ||
         (id == 0 && f.field && f.value)
     });
-    searchResultsStore.changeSearchFilter(filteredOptions);
-    const storedFilter = searchResultsStore.searchFilters;
+    searchStore.changeSearchFilter(filteredOptions);
+    const storedFilter = searchStore.searchFilters;
     return storedFilter.length == 0 ? [] : storedFilter[0].filters;
   }
 
@@ -52,10 +52,11 @@ const AdvancedSearchForm = ({ handleCancel }) => {
     const { currentCollection } = uiState;
     const collectionId = currentCollection ? currentCollection.id : null;
     const filters = filterSelectedOptions();
+    searchStore.changeErrorMessage("Please fill out all needed fields");
 
     if (filters.length > 0) {
-      searchResultsStore.showSearchResults();
-      searchResultsStore.changeErrorMessage("");
+      searchStore.showSearchResults();
+      searchStore.changeErrorMessage("");
 
       const selection = {
         elementType: 'all',
@@ -64,40 +65,38 @@ const AdvancedSearchForm = ({ handleCancel }) => {
         page_size: uiState.number_of_results
       };
 
-      searchResultsStore.loadSearchResults({
+      searchStore.loadSearchResults({
         selection,
          collectionId: collectionId,
          isSync: uiState.isSync,
       });
-      searchResultsStore.clearSearchAndTabResults();
+      searchStore.clearSearchAndTabResults();
       searchValuesByFilters();
-    } else {
-      searchResultsStore.changeErrorMessage("Please fill out all needed fields");
     }
   }
 
   const handleClear = () => {
-    searchResultsStore.clearSearchResults();
+    searchStore.clearSearchResults();
     setSelectedOptions(defaultSelections);
   }
 
   const showErrorMessage = () => {
-    if (searchResultsStore.error_message) {
-      return <Alert bsStyle="danger">{searchResultsStore.error_message}</Alert>;
+    if (searchStore.error_message) {
+      return <Alert bsStyle="danger">{searchStore.error_message}</Alert>;
     }
   }
 
   const searchValuesByFilters = () => {
-    const storedFilter = searchResultsStore.searchFilters;
+    const storedFilter = searchStore.searchFilters;
     const filters = storedFilter.length == 0 ? [] : storedFilter[0].filters;
     let searchValues = [];
 
-    if (searchResultsStore.searchResultVisible && filters.length > 0) {
+    if (searchStore.searchResultVisible && filters.length > 0) {
       filters.map((val, i) => {
         searchValues.push([val.link, val.field.label, val.match, val.value].join(" "));
       });
     }
-    searchResultsStore.changeSearchValues(searchValues);
+    searchStore.changeSearchValues(searchValues);
   }
 
   const renderDynamicRow = () => {
@@ -142,21 +141,21 @@ const AdvancedSearchForm = ({ handleCancel }) => {
   }
 
   const togglePanel = () => () => {
-    if (searchResultsStore.searchResultsCount > 0) {
-      searchResultsStore.toggleSearch();
-      searchResultsStore.toggleSearchResults();
-      searchResultsStore.clearTabCurrentPage();
+    if (searchStore.searchResultsCount > 0) {
+      searchStore.toggleSearch();
+      searchStore.toggleSearchResults();
+      searchStore.clearTabCurrentPage();
     }
   }
 
   let defaultClassName = 'collapsible-search-result';
-  let invisibleClassName = searchResultsStore.search_result_panel_visible ? '' : ' inactive';
-  let inactiveSearchClass = !searchResultsStore.searchVisible ? 'inactive' : '';
-  let inactiveResultClass = !searchResultsStore.searchResultVisible? 'inactive' : '';
-  let searchIcon = `fa fa-chevron-${searchResultsStore.search_icon} icon-right`;
-  let resultIcon = `fa fa-chevron-${searchResultsStore.result_icon} icon-right`;
-  let searchTitle = searchResultsStore.searchVisible ? 'Search' : 'Refine search';
-  let resultTitle = searchResultsStore.searchResultVisible ? 'Result' : 'Back to result';
+  let invisibleClassName = searchStore.search_result_panel_visible ? '' : ' inactive';
+  let inactiveSearchClass = !searchStore.searchVisible ? 'inactive' : '';
+  let inactiveResultClass = !searchStore.searchResultVisible? 'inactive' : '';
+  let searchIcon = `fa fa-chevron-${searchStore.search_icon} icon-right`;
+  let resultIcon = `fa fa-chevron-${searchStore.result_icon} icon-right`;
+  let searchTitle = searchStore.searchVisible ? 'Search' : 'Refine search';
+  let resultTitle = searchStore.searchResultVisible ? 'Result' : 'Back to result';
 
   return (
     <>
@@ -164,7 +163,7 @@ const AdvancedSearchForm = ({ handleCancel }) => {
         id="collapsible-search"
         className={defaultClassName}
         onToggle={togglePanel()}
-        expanded={searchResultsStore.searchVisible}
+        expanded={searchStore.searchVisible}
       >
         <Panel.Heading className={inactiveSearchClass}>
           <Panel.Title toggle>
@@ -187,7 +186,7 @@ const AdvancedSearchForm = ({ handleCancel }) => {
               </div>
             </div>
             <ButtonToolbar>
-              <Button bsStyle="warning" onClick={handleCancel}>
+              <Button bsStyle="warning" onClick={() => searchStore.handleCancel()}>
                 Cancel
               </Button>
               <Button bsStyle="primary" onClick={handleSave} style={{ marginRight: '20px' }} >
@@ -201,7 +200,7 @@ const AdvancedSearchForm = ({ handleCancel }) => {
         id="collapsible-result"
         className={defaultClassName + invisibleClassName}
         onToggle={togglePanel()}
-        expanded={searchResultsStore.searchResultVisible}
+        expanded={searchStore.searchResultVisible}
       >
         <Panel.Heading className={inactiveResultClass}>
           <Panel.Title toggle>
@@ -212,7 +211,6 @@ const AdvancedSearchForm = ({ handleCancel }) => {
         <Panel.Collapse>
           <Panel.Body style={{minHeight: '120px'}}>
             <SearchResult
-              handleCancel={handleCancel}
               handleClear={handleClear}
             />
           </Panel.Body>
diff --git a/app/packs/src/components/searchModal/forms/KetcherRailsForm.js b/app/packs/src/components/searchModal/forms/KetcherRailsForm.js
index 184b383018..7d1ad8c599 100644
--- a/app/packs/src/components/searchModal/forms/KetcherRailsForm.js
+++ b/app/packs/src/components/searchModal/forms/KetcherRailsForm.js
@@ -4,13 +4,23 @@ import ElementActions from 'src/stores/alt/actions/ElementActions';
 import UIActions from 'src/stores/alt/actions/UIActions';
 import UIStore from 'src/stores/alt/stores/UIStore';
 import StructureEditor from 'src/models/StructureEditor';
-import FormData from 'src/components/searchModal/FormData';
 import SearchResult from './SearchResult';
 import { observer } from 'mobx-react';
 import { StoreContext } from 'src/stores/mobx/RootStore';
 
-const KetcherRailsform = ({ handleCancel, isPublic }) => {
-  const editor = new StructureEditor({ ...FormData.forms[1], id: 'ketcher' });
+const KetcherRailsform = () => {
+  const ketcherStructure = {
+    structure: {
+      path: 'ketcher',
+      setMolfileInFrame: false,
+      setMfFuncName: 'setMolecule',
+      getMfFuncName: 'getMolfile',
+      getMfWithCallback: false,
+      getSVGFuncName: 'getSVG',
+      getSVGWithCallback: false
+    }
+  }
+  const editor = new StructureEditor({ ...ketcherStructure, id: 'ketcher' });
 
   const defaultValues = [{
     elementType: 'all',
@@ -19,17 +29,17 @@ const KetcherRailsform = ({ handleCancel, isPublic }) => {
     tanimotoThreshold: 0.7 
   }];
   const [changedValues, setChangedValues] = useState(defaultValues);
-  const searchResultsStore = useContext(StoreContext).searchResults;
+  const searchStore = useContext(StoreContext).search;
  
   const handleSearchTypeChange = (e) => {
-    changedValues[0]['searchType'] = e.target.value;
+    changedValues[0].searchType = e.target.value;
     setChangedValues((a) => [...a]);
   }
 
   const handleTanimotoChange = (e) => {
     const val = e.target && e.target.value;
     if (!isNaN(val - val)) {
-      changedValues[0]['tanimotoThreshold'] = e.target.value;
+      changedValues[0].tanimotoThreshold = e.target.value;
       setChangedValues((a) => [...a]);
     }
   }
@@ -42,18 +52,17 @@ const KetcherRailsform = ({ handleCancel, isPublic }) => {
 
   const handleStructureEditorSave = (molfile) => {
     if (molfile) {
-      changedValues[0]['queryMolfile'] = molfile;
+      changedValues[0].queryMolfile = molfile;
       setChangedValues((a) => [...a]);
     }
+    searchStore.changeErrorMessage("Please fill out all needed fields");
     //// Check if blank molfile
     const molfileLines = molfile.match(/[^\r\n]+/g);
     //// If the first character ~ num of atoms is 0, we will not search
     if (molfileLines[1].trim()[0] != 0) {
-      searchResultsStore.showSearchResults();
-      searchResultsStore.changeErrorMessage("");
+      searchStore.showSearchResults();
+      searchStore.changeErrorMessage("");
       structureSearch(molfile);
-    } else {
-      searchResultsStore.changeErrorMessage("Please fill out all needed fields");
     }
   }
 
@@ -62,7 +71,6 @@ const KetcherRailsform = ({ handleCancel, isPublic }) => {
     const { currentCollection } = uiState;
     const collectionId = currentCollection ? currentCollection.id : null;
     const isSync = currentCollection ? currentCollection.is_sync_to_me : false;
-    const isPublic = isPublic;
     let tanimoto = changedValues[0].tanimotoThreshold;
     if (tanimoto <= 0 || tanimoto > 1) { tanimoto = 0.3; }
 
@@ -75,45 +83,45 @@ const KetcherRailsform = ({ handleCancel, isPublic }) => {
       search_by_method: 'structure',
       structure_search: true
     };
-    searchResultsStore.loadSearchResults({
-      selection, collectionId, isSync, isPublic
+    searchStore.loadSearchResults({
+      selection, collectionId, isSync
     });
-    searchResultsStore.clearSearchAndTabResults();
+    searchStore.clearSearchAndTabResults();
     searchValuesByMolfile();
   }
 
   const handleClear = () => {
-    searchResultsStore.clearSearchResults();
+    searchStore.clearSearchResults();
     setChangedValues(defaultValues);
     const iframe = document.querySelector('#ketcher').contentWindow;
     iframe.document.querySelector('#new').click();
   }
 
   const showErrorMessage = () => {
-    if (searchResultsStore.error_message) {
-      return <Alert bsStyle="danger">{searchResultsStore.error_message}</Alert>;
+    if (searchStore.error_message) {
+      return <Alert bsStyle="danger">{searchStore.error_message}</Alert>;
     }
   }
 
   const searchValuesByMolfile = () => {
-    searchResultsStore.changeSearchValues([changedValues[0]['queryMolfile']]);
+    searchStore.changeSearchValues([changedValues[0].queryMolfile]);
   }
 
   const togglePanel = () => () => {
-    if (searchResultsStore.searchResultsCount > 0) {
-      searchResultsStore.toggleSearch();
-      searchResultsStore.toggleSearchResults();
+    if (searchStore.searchResultsCount > 0) {
+      searchStore.toggleSearch();
+      searchStore.toggleSearchResults();
     }
   }
 
   let defaultClassName = 'collapsible-search-result';
-  let invisibleClassName = searchResultsStore.search_result_panel_visible ? '' : ' inactive';
-  let inactiveSearchClass = !searchResultsStore.searchVisible ? 'inactive' : '';
-  let inactiveResultClass = !searchResultsStore.searchResultVisible? 'inactive' : '';
-  let searchIcon = `fa fa-chevron-${searchResultsStore.search_icon} icon-right`;
-  let resultIcon = `fa fa-chevron-${searchResultsStore.result_icon} icon-right`;
-  let searchTitle = searchResultsStore.searchVisible ? 'Search' : 'Refine search';
-  let resultTitle = searchResultsStore.searchResultVisible ? 'Result' : 'Back to result';
+  let invisibleClassName = searchStore.search_result_panel_visible ? '' : ' inactive';
+  let inactiveSearchClass = !searchStore.searchVisible ? 'inactive' : '';
+  let inactiveResultClass = !searchStore.searchResultVisible? 'inactive' : '';
+  let searchIcon = `fa fa-chevron-${searchStore.search_icon} icon-right`;
+  let resultIcon = `fa fa-chevron-${searchStore.result_icon} icon-right`;
+  let searchTitle = searchStore.searchVisible ? 'Search' : 'Refine search';
+  let resultTitle = searchStore.searchResultVisible ? 'Result' : 'Back to result';
 
   return (
     <>
@@ -121,7 +129,7 @@ const KetcherRailsform = ({ handleCancel, isPublic }) => {
         id="collapsible-search"
         className={defaultClassName}
         onToggle={togglePanel()}
-        expanded={searchResultsStore.searchVisible}
+        expanded={searchStore.searchVisible}
       >
         <Panel.Heading className={inactiveSearchClass}>
           <Panel.Title toggle>
@@ -144,7 +152,7 @@ const KetcherRailsform = ({ handleCancel, isPublic }) => {
               <Row style={{ marginTop: '20px' }}>
                 <Col sm={4} md={3}>
                   <ButtonToolbar>
-                    <Button bsStyle="warning" onClick={handleCancel}>
+                    <Button bsStyle="warning" onClick={() => searchStore.handleCancel()}>
                       Cancel
                     </Button>
                     <Button bsStyle="primary" onClick={handleSave} style={{ marginRight: '20px' }} >
@@ -188,7 +196,7 @@ const KetcherRailsform = ({ handleCancel, isPublic }) => {
         id="collapsible-result"
         className={defaultClassName + invisibleClassName}
         onToggle={togglePanel()}
-        expanded={searchResultsStore.searchResultVisible}
+        expanded={searchStore.searchResultVisible}
       >
         <Panel.Heading className={inactiveResultClass}>
           <Panel.Title toggle>
@@ -199,7 +207,6 @@ const KetcherRailsform = ({ handleCancel, isPublic }) => {
         <Panel.Collapse>
           <Panel.Body style={{minHeight: '120px'}}>
             <SearchResult
-              handleCancel={handleCancel}
               handleClear={handleClear}
             />
           </Panel.Body>
diff --git a/app/packs/src/components/searchModal/forms/SearchResult.js b/app/packs/src/components/searchModal/forms/SearchResult.js
index e5f4cd8999..65dfd05109 100644
--- a/app/packs/src/components/searchModal/forms/SearchResult.js
+++ b/app/packs/src/components/searchModal/forms/SearchResult.js
@@ -7,9 +7,9 @@ import { StoreContext } from 'src/stores/mobx/RootStore';
 import UserStore from 'src/stores/alt/stores/UserStore';
 import SearchResultTabContent from './SearchResultTabContent';
 
-const SearchResult = ({ handleCancel, handleClear }) => {
-  const searchResultsStore = useContext(StoreContext).searchResults;
-  const results = searchResultsStore.searchResultValues;
+const SearchResult = ({ handleClear }) => {
+  const searchStore = useContext(StoreContext).search;
+  const results = searchStore.searchResultValues;
   const userState = UserStore.getState();
   const profile = userState.profile || {};
   const genericElements = userState.genericEls || [];
@@ -22,20 +22,22 @@ const SearchResult = ({ handleCancel, handleClear }) => {
       const visible = [];
 
       Object.entries(profile.data.layout).filter((value) => {
-        return value[0] != 'research_plan';
-      }).map((value, i) => {
+        return value[0] != 'research_plan' && value[1] > 0;
+      })
+      .sort((a,b) => a[1] - b[1])
+      .map((value, i) => {
         let tab = results.find(val => val.id.indexOf(value[0]) !== -1);
         let totalElements = tab === undefined ? 0 : tab.results.total_elements;
         if (value[1] > 0) {
           visible.push({ key: value[0], index: i, totalElements: totalElements });
         }
       });
-      setVisibleTabs(visible.sort((a,b) => a.index - b.index));
+      setVisibleTabs(visible);
       let activeTab = visible.find((v) => { return v.totalElements != 0 });
       activeTab = activeTab !== undefined ? activeTab.index : 0;
       setCurrentTabIndex(activeTab);
     }
-  }, []);
+  }, [results]);
 
   const handleTabSelect = (e) => {
     setCurrentTabIndex(e);
@@ -45,13 +47,13 @@ const SearchResult = ({ handleCancel, handleClear }) => {
     const preparedResult = prepareResultForDispatch();
     UIActions.setSearchById(preparedResult);
     ElementActions.dispatchSearchResult(preparedResult);
-    handleCancel();
+    searchStore.handleCancel();
   }
 
   const prepareResultForDispatch = () => {
     let resultObject = {};
     results.map((val, i) => {
-      let firstElements = searchResultsStore.tabSearchResultValues.find(tab => tab.id == `${val.id}-1`);
+      let firstElements = searchStore.tabSearchResultValues.find(tab => tab.id == `${val.id}-1`);
       resultObject[val.id] = {
         elements: firstElements.results.elements,
         ids: val.results.ids,
@@ -65,17 +67,17 @@ const SearchResult = ({ handleCancel, handleClear }) => {
   }
 
   const SearchValuesList = () => {
-    if (searchResultsStore.searchResultVisible && searchResultsStore.searchValues.length > 0) {
+    if (searchStore.searchResultVisible && searchStore.searchValues.length > 0) {
        return (
          <div style={{ position: 'relative' }}>
            <h4>Your Search</h4>
            {
-             searchResultsStore.searchValues.map((val, i) => {
+             searchStore.searchValues.map((val, i) => {
                return <div key={i}>{val}</div>
              })
            }
            {
-             searchResultsStore.searchResultsCount > 0 ? null : (
+             searchStore.searchResultsCount > 0 ? null : (
                <div className="search-spinner"><i className="fa fa-spinner fa-pulse fa-4x fa-fw" /></div>
              )
            }
@@ -87,7 +89,7 @@ const SearchResult = ({ handleCancel, handleClear }) => {
   }
 
   const ResultsCount = () => {
-    if (searchResultsStore.searchResultsCount === 0) { return null }
+    if (searchStore.searchResultsCount === 0) { return null }
 
     const counts = results.map((val) => {
       return val.results.total_elements;
@@ -100,7 +102,7 @@ const SearchResult = ({ handleCancel, handleClear }) => {
   }
 
   const searchResultNavItem = (list, tabResult) => {
-    if (searchResultsStore.searchResultsCount === 0) { return null }
+    if (searchStore.searchResultsCount === 0) { return null }
 
     const elnElements = ['sample', 'reaction', 'screen', 'wellplate'];
     let iconClass = `icon-${list.key}`;
@@ -133,7 +135,7 @@ const SearchResult = ({ handleCancel, handleClear }) => {
   }
 
   const SearchResultTabContainer = () => {
-    if (searchResultsStore.searchResultsCount === 0) { return null }
+    if (searchStore.searchResultsCount === 0) { return null }
 
     const navItems = [];
     const tabContents = [];
@@ -179,11 +181,11 @@ const SearchResult = ({ handleCancel, handleClear }) => {
   }
 
   const ResultButtons = () => {
-    if (searchResultsStore.searchResultsCount === 0) { return null }
+    if (searchStore.searchResultsCount === 0) { return null }
 
     return (
       <ButtonToolbar className="result-button-toolbar">
-        <Button bsStyle="warning" onClick={handleCancel}>
+        <Button bsStyle="warning" onClick={() => searchStore.handleCancel()}>
           Cancel
         </Button>
         <Button bsStyle="info" onClick={handleClear}>
diff --git a/app/packs/src/components/searchModal/forms/SearchResultTabContent.js b/app/packs/src/components/searchModal/forms/SearchResultTabContent.js
index 1e1cbfec2b..6ea720feab 100644
--- a/app/packs/src/components/searchModal/forms/SearchResultTabContent.js
+++ b/app/packs/src/components/searchModal/forms/SearchResultTabContent.js
@@ -6,20 +6,20 @@ import { StoreContext } from 'src/stores/mobx/RootStore';
 import SampleName from 'src/components/common/SampleName';
 
 const SearchResultTabContent = ({ list, tabResult }) => {
-  const searchResultsStore = useContext(StoreContext).searchResults;
-  let currentPage = searchResultsStore.tab_current_page[list.index];
+  const searchStore = useContext(StoreContext).search;
+  let currentPage = searchStore.tab_current_page[list.index];
   let currentPageNumber = currentPage === undefined ? 1 : currentPage[list.key];
 
   useEffect(() => {
     if (currentPage === undefined) {
-      searchResultsStore.changeTabCurrentPage(list.key, 1, list.index);
+      searchStore.changeTabCurrentPage(list.key, 1, list.index);
     }
   }, []);
 
   const handlePaginationSelect = (index, ids, key) => {
-    searchResultsStore.changeTabCurrentPage(key, index, list.index);
+    searchStore.changeTabCurrentPage(key, index, list.index);
 
-    const search_result = searchResultsStore.tabSearchResultValues.find(val => val.id == `${key}s-${index}`);
+    const search_result = searchStore.tabSearchResultValues.find(val => val.id == `${key}s-${index}`);
     if (search_result === undefined) {
       searchByIds(index, ids, key);
     }
@@ -41,7 +41,7 @@ const SearchResultTabContent = ({ list, tabResult }) => {
       search_by_method: 'search_by_ids'
     };
 
-    searchResultsStore.loadSearchResultTab({
+    searchStore.loadSearchResultTab({
       selection,
       collectionId: collectionId,
       isSync: isSync,
@@ -99,7 +99,7 @@ const SearchResultTabContent = ({ list, tabResult }) => {
 
   const tabContentList = () => {
     let contentList = <div key={list.index} className="search-result-tab-content-list">No results</div>;
-    let resultsByPage = searchResultsStore.tabSearchResultValues.find(val => val.id == `${list.key}s-${currentPageNumber}`);
+    let resultsByPage = searchStore.tabSearchResultValues.find(val => val.id == `${list.key}s-${currentPageNumber}`);
     let tabResultByPage = resultsByPage != undefined ? resultsByPage.results : { elements: [] };
 
     if (tabResultByPage.elements.length > 0) {
diff --git a/app/packs/src/stores/mobx/RootStore.jsx b/app/packs/src/stores/mobx/RootStore.jsx
index 8e3df87f86..af60fd6913 100644
--- a/app/packs/src/stores/mobx/RootStore.jsx
+++ b/app/packs/src/stores/mobx/RootStore.jsx
@@ -2,17 +2,17 @@ import React from 'react';
 import { types } from 'mobx-state-tree';
 import { MeasurementsStore } from 'src/stores/mobx/MeasurementsStore';
 import { SampleTasksStore } from 'src/stores/mobx/SampleTasksStore';
-import { SearchResultsStore } from 'src/stores/mobx/SearchResultsStore';
+import { SearchStore } from 'src/stores/mobx/SearchStore';
 
 export const RootStore = types
   .model({
     measurementsStore: types.optional(MeasurementsStore, { measurements: {}, sampleHeaders: {} }),
     sampleTasksStore: types.optional(SampleTasksStore, {}),
-    searchResultsStore: types.optional(SearchResultsStore, {})
+    searchStore: types.optional(SearchStore, {})
   })
   .views(self => ({
     get measurements() { return self.measurementsStore },
     get sampleTasks() { return self.sampleTasksStore },
-    get searchResults() { return self.searchResultsStore }
+    get search() { return self.searchStore }
   }));
 export const StoreContext = React.createContext(RootStore.create({}));
diff --git a/app/packs/src/stores/mobx/SearchResultsStore.jsx b/app/packs/src/stores/mobx/SearchStore.jsx
similarity index 84%
rename from app/packs/src/stores/mobx/SearchResultsStore.jsx
rename to app/packs/src/stores/mobx/SearchStore.jsx
index 5776d593f3..fd1444cc87 100644
--- a/app/packs/src/stores/mobx/SearchResultsStore.jsx
+++ b/app/packs/src/stores/mobx/SearchStore.jsx
@@ -1,5 +1,5 @@
 import { keys, values } from 'mobx';
-import { flow, types, getSnapshot } from 'mobx-state-tree';
+import { flow, types } from 'mobx-state-tree';
 
 import SearchFetcher from 'src/fetchers/SearchFetcher';
 
@@ -13,9 +13,16 @@ const SearchFilter = types.model({
   filters: types.maybeNull(types.frozen([]))
 });
 
-export const SearchResultsStore = types
+const advancedSearch = {
+  value: 'advanced',
+  label: 'Advanced Search'
+}
+
+export const SearchStore = types
   .model({
     search_modal_visible: types.optional(types.boolean, false),
+    search_modal_minimized: types.optional(types.boolean, false),
+    search_modal_selected_form: types.optional(types.frozen({}), advancedSearch),
     search_results: types.map(SearchResult),
     tab_search_results: types.map(SearchResult),
     search_result_panel_visible: types.optional(types.boolean, false),
@@ -55,7 +62,6 @@ export const SearchResultsStore = types
       Object.entries(result).forEach(([key, value]) => {
         self.addSearchResult(key, value, [])
       });
-      console.log('tabs', getSnapshot(self.tab_search_results))
     }),
     showSearchModal() {
       self.search_modal_visible = true;
@@ -63,6 +69,17 @@ export const SearchResultsStore = types
     hideSearchModal() {
       self.search_modal_visible = false;
     },
+    showMinimizedSearchModal() {
+      self.search_modal_minimized = false;
+    },
+    toggleSearchModalMinimized() {
+      self.search_modal_minimized = !self.search_modal_minimized;
+    },
+    changeSearchModalSelectedForm(value) {
+      self.search_modal_selected_form = value;
+      self.clearSearchResults();
+      self.showMinimizedSearchModal();
+    },
     addSearchResult(key, result, ids) {
       let tabSearchResult = SearchResult.create({
         id: `${key}-${result.page || 1}`,
@@ -114,7 +131,6 @@ export const SearchResultsStore = types
       let filter = SearchFilter.create({ id: 'filter', filters: filtered_options });
       self.search_filters.clear();
       self.search_filters.set(filter.id, filter);
-      console.log('filter', filtered_options, getSnapshot(self.search_filters));
     },
     changeSearchValues(values) {
       self.search_values.clear();
@@ -128,10 +144,17 @@ export const SearchResultsStore = types
     },
     clearTabCurrentPage() {
       self.tab_current_page.splice(0, self.tab_current_page.length);
+    },
+    handleCancel() {
+      self.hideSearchModal();
+      self.hideSearchResults();
+      self.clearSearchResults();
     }
   }))
   .views(self => ({
     get searchModalVisible() { return self.search_modal_visible },
+    get searchModalMinimized() { return self.search_modal_minimized },
+    get searchModalSelectedForm() { return self.search_modal_selected_form },
     get searchResultsCount() { return keys(self.search_results).length },
     get searchResultValues() { return values(self.search_results) },
     get tabSearchResultValues() { return values(self.tab_search_results) },