Code constant and mechanism to switch between reactive/non-reactive search

In the non-reactive way the search results are invalidated when any property, the search query or the allow-other-elements checkbox is changed

client/src/search-mod/AutocompleteMultiselectTextfield.js

@@ -71,6 +71,7 @@ class AutocompleteMultiselectTextfield {
     this.selectedItemsBox.addEventListener("click", e => {
       let itemLabel = event.target.closest('span'); 
       this._removeSelectedValue(itemLabel.dataset.value);
+      //itemLabel.dispatchEvent(new Event('change'));
     });
 
     // Handle the item selection on the dropdown

client/src/search-mod/FilterPanel.view.js

@@ -130,7 +130,6 @@ class FilterPanel {
 
     this.fields.forEach( field => {
       const values = field.getValues();
-      console.log('FilterPanel field:',field, values);
       if (Array.isArray(values)){
         values.forEach( value => filterMap.set(value.fieldId, value.value))
       }else{
@@ -138,8 +137,7 @@ class FilterPanel {
           filterMap.set(values.fieldId, values.value)
       }
     });
-    console.log('FilterPanel getValues:', filterMap);
-    
+    //console.log('FilterPanel getValues:', filterMap);
     return filterMap;
   }
 

client/src/search-mod/MaterialList.view.js

@@ -68,10 +68,11 @@ class MaterialList {
     this._render();
   }
 
-/*
+
   invalidateSearch(){
-    this._hide();
-  }*/
+    this.visible = false;
+    this._render();
+  }
 
 
   initSearch(optimadeQuery){

client/src/search-mod/NewSearchMod.js

@@ -35,6 +35,7 @@ let FilterPanel = require('./FilterPanel.view.js');
 let SwitchComponent = require('../common/SwitchComponent.js');
 
 
+const REACTIVE_SEARCH = true;
 
 function replaceDashes(s){
   return s.split('-').join('_');
@@ -132,16 +133,15 @@ class NewSearchMod {
       this.elementTable.deselectAllElements();
     });
 
-    /*
+    
     this.searchBox.setSearchQueryChangeListener( () => {
-      this.sendQuery();
-    }); */
+      REACTIVE_SEARCH ? this.sendQuery() : this.materialList.invalidateSearch();
+    }); 
 
     this.allowOtherElementsCheckbox = this.element.querySelector('#allow-other-elements');
-    /*
     this.allowOtherElementsCheckbox.addEventListener( 'change', e => {
-      this.sendQuery();
-    }); */
+      REACTIVE_SEARCH ? this.sendQuery() : this.materialList.invalidateSearch();
+    }); 
 
     /* This button could be out of the search box because its functionality
        is not part of it. It can also be removed eventually, if considered not necessary */
@@ -214,11 +214,10 @@ class NewSearchMod {
     this.filterPanel = new FilterPanel();
     this.filterSidePanel.appendChild(this.filterPanel.element);
 
-/*
     this.filterPanel.setPropsChangeListener( propsMap => {
-      console.log('filterPanel.change Event propsMap: ', propsMap);
-      this.sendQuery();
-    })*/
+      //console.log('filterPanel.change Event propsMap: ', propsMap);
+      REACTIVE_SEARCH ? this.sendQuery() : this.materialList.invalidateSearch();
+    })
 
     this.materialList= new MaterialList();
     this.resultsPage = this.element.querySelector('.results-panel');