Restyled the composition search.

client/css/styles.css

@@ -377,8 +377,8 @@ div.title span.unfolded::before{
 
 .search-filter-side{
   background-color: white;/* background-color: #DDD;*/
-  width: 220px;
-  padding:   16px;
+  width: 260px;
+  /*padding:   16px;*/
 }
 
 
@@ -386,10 +386,12 @@ div.title span.unfolded::before{
   transition: opacity 0.8s;
 }
 
-.search-box{
+.search-box {
   width: 742px;
   display: flex;
   justify-content: center; /*space-between;*/
+  align-items: flex-start; /*space-between;*/
+  /*justify-content: center; [>space-between;<]*/
 }
 .search-query-wrapper{
   position: relative;
@@ -397,6 +399,10 @@ div.title span.unfolded::before{
   background-color: white;
   border: 2px solid  #E56400;
   padding: 8px 6px;
+  overflow-y: hidden;
+  overflow-x: hidden;
+  box-sizing: border-box;
+  min-height: 50px;
 }
 
 .clean-btn{
@@ -409,29 +415,33 @@ div.title span.unfolded::before{
   color: #E56400;
 }
 
-.search-btn{
-  /*width: 94px;*/
+.search-btn {
   display: block;
-  flex-grow: 1;
   background-color: #E56400;
   color: white;
-  padding: 16px;
+  padding: 10px;
+  flex: 0 0 100px;
+  box-sizing: border-box;
+  height: 50px;
 }
 
 
 .search-query-symbol{
-  font-size: 1.3em;
+  font-size: 1.0em;
   font-weight: bold;
 }
 
 .add-buttons{
   display: inline-block;
   width: 100%;
-  margin: 20px 0 0;
+  margin: 0px 0 0;
+  background-color: #CFCFCF;
 }
 
+.bool-buttons {
+  color: #555;
+}
 .bool-buttons button{
-  color: #777;
   border: 1px solid #777;
   background-color: #EEE;
   text-align: center;
@@ -447,13 +457,13 @@ div.title span.unfolded::before{
   width: 140px;
   padding: 15px 20px;
   font-size: .9em;
-  color: #666;
+  color: #555;
   text-align: center;
 }
 
-.tab-buttons button:last-child {
-  border-right: none;
-}
+/*.tab-buttons button:last-child {*/
+  /*border-right: none;*/
+/*}*/
 
 .tab-buttons button#add-tab-selected{
   background-color: #DDD;
@@ -484,6 +494,11 @@ div.title span.unfolded::before{
   border-bottom: 25px solid #DDD;
 }
 
+.add-panel {
+  padding: 20px 10px;
+  background-color: #DDD;
+}
+
 .add-panel button{
   background-color: #EEE;
   color: #777;
@@ -498,12 +513,12 @@ div.title span.unfolded::before{
 
 /*  Formula and Material name boxes */
 
-.FormulaBox,.MaterialNameBox{
+.FormulaBox,
+.MaterialNameBox{
   display: flex;
   justify-content: center;
   text-align: left;
   background-color: #DDD;
-  padding: 20px 0;
 }
 
 .FormulaBox input, .MaterialNameBox input{
@@ -517,7 +532,7 @@ div.title span.unfolded::before{
   width: 100%;
 }
 
-.FormulaBox input{
+.FormulaBox input[type=text]{
   box-sizing: border-box;
   width: 580px;
 }
@@ -630,8 +645,7 @@ div.title span.unfolded::before{
 
 /* equivalent to view-box */
 .filter-section-box{
-  margin-bottom: 30px;
-  /*background-color: white;*/
+  margin-bottom: 20px;
 }
 .filter-section-box input[type="text"]{
   box-sizing: border-box;
@@ -641,16 +655,18 @@ div.title span.unfolded::before{
 }
 
 .filter-section-title{
+  display: flex;
+  align-items: center;
+  justify-content: center;
   color: white; padding: 10px 0;
   font-size: 12pt;
-  text-align: center;
   background-color: #E56400;
+  padding: 10px;
 }
 
-.filter-quantity-box{
+.filter-quantity-box {
   margin-bottom: 12px;
-  padding: 0px 0px 4px 4px ;
-  
+  padding: 5px 15px;
 }
 
 .filter-quantity-box > * {
@@ -710,7 +726,8 @@ background-image: -webkit-linear-gradient(top, #777, #AAA, #777);
 #searchbar #searchline{ text-align: center; }
 
 .search-option {
-  padding: 10px 0px;
+  padding-top: 10px;
+  padding-bottom: 0;
   font-size: 0.85em;
 }
 
@@ -759,9 +776,7 @@ img.remove-label{ cursor: pointer; }
 
 
 #elementable{width:690px;  position: relative;
-  padding: 0 26px;
   margin: 0 auto 0;
-  background-color: #DDD;
 }
 
 .element-info{position: absolute;
@@ -780,8 +795,8 @@ img.remove-label{ cursor: pointer; }
 }
 
 #elementable table#pt-main{
-  padding-top: 20px;
-  color: #333; border: 0;
+  color: #333;
+  border: 0;
 }
 
 #elementable table#pt-laac{
@@ -1416,6 +1431,20 @@ text.structure-viewer-legend-labels{
   visibility: visible;
 }
 
+.composition {
+}
+
+#composition-title {
+  box-sizing: border-box;
+  height: 50px;
+  width: 120px;
+}
+
+.restricted-search-option {
+  margin-top: -20px;
+  margin-bottom: 10px;
+}
+
 /*
 .tooltip {
     visibility: hidden;

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

@@ -240,6 +240,11 @@ class ElemenTable{
     </div>`;//'<div id="group-selectors">';
 
 
+    tempHtml += `<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>`;
     tempHtml+= '</div>'; // ptWrapper
 
     this.element.innerHTML= tempHtml;

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

@@ -109,9 +109,31 @@ class FilterPanel {
     this.fields.push(functionalTypeField)
     methodGroupBox.append(functionalTypeField.element);
     const codeField = new AutocompleteField('Code', 'code_name');
-    this.fields.push(codeField)
+    this.fields.push(codeField);
     methodGroupBox.append(codeField.element);
 
+    // Restricted search checkbox: cannot be set as innerHTML
+    const container = document.createElement('div');
+    container.className = "filter-quantity-box";
+    const a = document.createElement('div');
+    a.className = "perm-tooltip search-option restricted-search-option";
+    const b = document.createElement('input');
+    b.id = "restricted-search";
+    b.name = "restricted-search";
+    b.type = "checkbox";
+    const c = document.createElement('label');
+    c["for"] = "restricted-search";
+    c.className = "perm-tooltip";
+    c.textContent = "Restrict to individual calculations";
+    const d = document.createElement('span');
+    d.className = "tooltiptext";
+    d.textContent = "If selected, the query will return materials that have individual calculations simultaneously matching your methodology and properties criteria."
+    a.append(b);
+    a.append(c);
+    a.append(d);
+    container.append(a);
+    this.element.append(container);
+
     InfoSys.addToInfoSystem(this.element);
 
     // The value change event in fields is handled at container level (event delegation pattern) 
@@ -132,8 +154,7 @@ class FilterPanel {
   createPropsGroupBox(title){
     const element = document.createElement('div');
     element.className = 'filter-section-box';
-    element.innerHTML = '<div class="filter-section-title">'+title+'</div>';
-    
+    element.innerHTML = '<div class="filter-section-title"><div>'+title+'</div></div>';
     return element;
   }
 
@@ -144,14 +165,16 @@ class FilterPanel {
 
     this.fields.forEach( field => {
       const values = field.getValues();
-      if (Array.isArray(values)){
+      console.log("===============")
+      console.log(values)
+      if (Array.isArray(values) && values.length > 0){
         values.forEach( value => filterMap.set(value.fieldId, value.value))
-      }else{
-        if (values && values.value.length > 0) 
-          filterMap.set(values.fieldId, values.value)
+      } else if (values && values.value && values.value.length > 0) {
+        filterMap.set(values.fieldId, values.value);
       }
     });
-    //console.log('FilterPanel getValues:', filterMap);
+    console.log("FILTERMAP")
+    console.log(filterMap)
     return filterMap;
   }
 

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

@@ -95,8 +95,9 @@ class MaterialList {
     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');
+    //let restrictedEl = document.getElementById('restricted-search');
+    //reqJson.search_by.restricted = (restrictedEl.checked ? '1' : '0');
+    reqJson.search_by.restricted = '0';
     console.log('SEARCHING: ', reqJson );
 
     document.querySelector('#syntax-error').style.visibility = 'hidden';

client/src/search-mod/NewSearchMod.js

@@ -57,28 +57,18 @@ class NewSearchMod {
       <div class="search-filter-side">
       </div>
       <div class="search-main-side">
-        <div class="search-box-placeholder" > </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>
-        <div class="add-buttons" >
-          <div class="tab-buttons" style="width: 70%; display: inline-block">
-            <button class="element-add-btn" id="add-tab-selected">Element<img class="search-fold-icon" src="img/unfolded.png"></button><button class="formula-add-btn">Formula<img class="search-fold-icon" src="img/unfolded.png"></button><button class="name-add-btn">Name<img class="search-fold-icon" src="img/unfolded.png"></button>
-          </div>
-          <div class="bool-buttons" style="width: 28%; display: inline-block" >
-            OR <span id="and-or-switch" ></span> AND
-            <button class="not-button">NOT</button>
-            <button class="open-parentheses" >(</button>
-            <button class="close-parentheses">)</button>
+        <div class="composition">
+          <div class="search-box-placeholder" > </div>
+          <div class="add-buttons" >
+            <div class="tab-buttons" style="width: 70%; display: inline-block">
+              <button class="element-add-btn" id="add-tab-selected">Element<img class="search-fold-icon" src="img/unfolded.png"></button><button class="formula-add-btn">Formula<img class="search-fold-icon" src="img/unfolded.png"></button><button class="name-add-btn">Name<img class="search-fold-icon" src="img/unfolded.png"></button>
+            </div>
+            <div class="bool-buttons" style="width: 28%; display: inline-block" >
+              OR <span id="and-or-switch" ></span> AND
+              <button class="not-button">NOT</button>
+              <button class="open-parentheses" >(</button>
+              <button class="close-parentheses">)</button>
+            </div>
           </div>
         </div>
         <div class="add-box">
@@ -114,14 +104,6 @@ class NewSearchMod {
     this.searchBox.setSearchQueryChangeListener( () => {
       REACTIVE_SEARCH_RIGHT ? this.sendQuery() : INVALIDATE_RESULTS && this.materialList.invalidateSearch();
     }); 
-    this.allowOtherElementsCheckbox = this.element.querySelector('#allow-other-elements');
-    this.allowOtherElementsCheckbox.addEventListener( 'change', e => {
-      REACTIVE_SEARCH_RIGHT ? this.sendQuery() : INVALIDATE_RESULTS && this.materialList.invalidateSearch();
-    }); 
-    this.restrictedCheckbox = this.element.querySelector('#restricted-search');
-    this.restrictedCheckbox.addEventListener( 'change', e => {
-      REACTIVE_SEARCH_RIGHT ? this.sendQuery() : INVALIDATE_RESULTS && 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 */
@@ -143,7 +125,7 @@ class NewSearchMod {
 
     this.addPanel= this.element.querySelector('.add-panel');
 
-    let andOrSwitch = new SwitchComponent(util.IMAGE_DIR+'switch');
+    let andOrSwitch = new SwitchComponent(util.IMAGE_DIR+'switch_new');
     this.element.querySelector('#and-or-switch').appendChild(andOrSwitch.element);
     andOrSwitch.setListener( e => {
       this.searchBox.setBoolOperator( e ? 'AND' : 'OR');
@@ -163,7 +145,7 @@ class NewSearchMod {
       this.searchBox.addParentheses(false);
     });
 
-    this.elementTable= new ElementTable();
+    this.elementTable = new ElementTable();
     this.elementTable.setClickListener(elementArray => {
       this.searchBox.addElements(elementArray);
       this.addMatNameButton.disabled = true; // Not always necessary but it simplifies the code
@@ -204,6 +186,10 @@ class NewSearchMod {
 
     this.addPanel.appendChild(this.elementTable.element);
 
+    this.allowOtherElementsCheckbox = this.element.querySelector('#allow-other-elements');
+    this.allowOtherElementsCheckbox.addEventListener( 'change', e => {
+      REACTIVE_SEARCH_RIGHT ? this.sendQuery() : INVALIDATE_RESULTS && this.materialList.invalidateSearch();
+    }); 
     this._events();
   }
 
@@ -284,7 +270,9 @@ class NewSearchMod {
   sendQuery() {
     
     //**** The optimade query must be formed from the search box and the properties selected
-    const searchBoxOptimadeQuery = this.searchBox.getOptimadeQuery(this.allowOtherElementsCheckbox.checked);
+    const allowOtherElements = document.getElementById('allow-other-elements').checked;
+    console.log(allowOtherElements)
+    const searchBoxOptimadeQuery = this.searchBox.getOptimadeQuery(allowOtherElements);
     const propsOptimadeQuery = getOptimadeQueryFromProps(this.filterPanel.getValues());
     const sep = (searchBoxOptimadeQuery !== '' && propsOptimadeQuery !== '' ? ' AND ' : '');
     //console.log(searchBoxOptimadeQuery)
@@ -508,8 +496,17 @@ class FormulaBox {
     this.element.className = 'FormulaBox';// this.element.setAttribute("id",'formula-box');
     this.element.innerHTML=
     `
-      <input type="text" placeholder="Add formula to the search query above">
-      <button class="adding-formula-btn" disabled> Add to query </button>
+      <div style="display: flex; flex-direction: column">
+        <div style="display: flex; flex-direction: row">
+          <input type="text" placeholder="Add formula to the search query above">
+          <button class="adding-formula-btn" disabled> Add to query </button>
+        </div>
+        <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>
     `;
     this.formulaTextField = this.element.querySelector('input');
     this.formulaButton = this.element.querySelector('.adding-formula-btn');

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

@@ -31,8 +31,6 @@ let Formula = require('./Formula.js');
 //// local utility functions
 function getTagHtml(tag, isFormula){
   return `<span class="search-label" data-el="${tag}" >
-            <img src="img/tag.svg" height="16px" class="remove-label"
-              style="vertical-align: bottom"/>
           ${isFormula ? util.getSubscriptedFormula(tag) : tag}
           <img src="img/cross.svg" height="6px" class="remove-label"
             style="vertical-align: middle; padding: 4px 3px 6px 5px;" />
@@ -64,13 +62,15 @@ class SearchBox{
     this.element.className = 'search-box';
     
     this.element.innerHTML  =  ` 
-      <button class="search-btn">Composition</button>
+      <div id="composition-title" class="filter-section-title" style>
+        <div>Composition</div>
+      </div>
       <div class="search-query-wrapper" >
         <div id="syntax-error">
           <div>Invalid query syntax</div>
         </div>
         <div class="search-query-box" style="float: left;"></div>
-        <button class="clean-btn" style="float: right;">Clear all</button>
+        <button class="clean-btn" style="float: right;">Clear</button>
       </div>
       <!-- this button should be out of the search box because its functionality
            is not part of the search box, it's general for the search module