Added restricted search option to the complex search GUI.

client/conf.js

@@ -2,8 +2,6 @@ window.nomadEnv = {
   //apiRoot: "https://nomad-lab.eu/dev/nomad/enc-search/api/encyclopedia/",
   apiRoot: "https://nomad-lab.eu/dev/rae/enc-search/api/encyclopedia/", 
   //apiRoot: "https://nomad-lab.eu/prod/rae/beta/api/encyclopedia/",
-
-  
   //apiRoot: "https://nomad-lab.eu/prod/rae/api/encyclopedia/",
   //apiRoot: "http://localhost:8000/fairdi/nomad/latest/api/encyclopedia/",
   keycloakBase: 'https://nomad-lab.eu/fairdi/keycloak/auth/',

client/css/styles.css

@@ -688,6 +688,16 @@ background-image: -webkit-linear-gradient(top, #777, #AAA, #777);
 
 #searchbar #searchline{ text-align: center; }
 
+.search-option {
+  padding: 10px 0px;
+  font-size: 0.85em;
+}
+
+.search-option>input {
+  margin-top:-0px;
+  vertical-align: middle;
+}
+
 #searchbar input[type=text]{
   padding: 8px 16px; height: 23px; width: 600px;
     background: #FFF; border: 0;

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

@@ -81,16 +81,21 @@ class MaterialList {
     this._search();
   }
 
-
   _search(page){
     //this.resultsContainer.style.visibility = 'hidden';
     this.matMap.clear();
 
     LoadingPopup.show();
 
-    let reqJson = { query: this.optimadeQuery };
+    let reqJson = {
+      query: this.optimadeQuery,
+      search_by: {}
+    };
     if (page) reqJson.search_by = { page: page}
 
+    // Add the restricted option from the checkbox
+    let restrictedEl = document.getElementById('restricted-search');
+    reqJson.search_by.restricted = (restrictedEl.checked ? '1' : '0');
     console.log('SEARCHING: ', reqJson );
 
     fetch(util.getSearchURL(), {

client/src/search-mod/NewSearchMod.js

@@ -70,8 +70,20 @@ class NewSearchMod {
         <!-- <input type="checkbox" id="multiples-of-formula" value="">
           Include multiples of formula
           <br> -->
-        <div style="padding: 5px 0; ">
+        <!--<div style="padding: 5px 0; ">
           <input type="checkbox" id="allow-other-elements" value="" checked>Allow other elements
+        </div>-->
+        <div style="display: flex">
+          <div class="perm-tooltip search-option" style="margin-right: 10px">
+              <input id="allow-other-elements" name="allow-other-elements" type="checkbox" checked>
+              <label for="allow-other-elements" class="perm-tooltip">Allow other elements</label>
+              <span class="tooltiptext">If selected, the returned materials may also contain other elements.</span>
+          </div>
+          <div class="perm-tooltip search-option">
+              <input id="restricted-search" name="restricted-search" type="checkbox" >
+              <label for="restricted-search" class="perm-tooltip">Restrict to individual calculations</label>
+              <span class="tooltiptext">If selected, the query will return materials that have individual calculations matching all your search criteria.</span>
+          </div>
         </div>
 
 
@@ -142,6 +154,10 @@ class NewSearchMod {
     this.allowOtherElementsCheckbox.addEventListener( 'change', e => {
       REACTIVE_SEARCH ? this.sendQuery() : this.materialList.invalidateSearch();
     }); 
+    this.restrictedCheckbox = this.element.querySelector('#restricted-search');
+    this.restrictedCheckbox.addEventListener( 'change', e => {
+      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 */