Added option for restricting search to indidivual calculations.

client/css/styles.css

@@ -33,6 +33,34 @@
 
 #tooltip-triangle{  line-height: 5px; }
 
+.perm-tooltip {
+  position: relative;
+  display: inline-block;
+}
+
+.perm-tooltip .tooltiptext {
+  visibility: hidden;
+  background-color: #EEE; color: #555;
+  width: 400px;
+  padding: 10px 20px;
+  font-size: 14px;
+  line-height: 1.5;
+  text-align: left;
+  border: 1px solid #D9D9D9;
+
+  /* Position the tooltip */
+  position: absolute;
+  left: 50%;
+  top: 100%;
+  transform: translate(-50%, 0);
+
+  z-index: 1;
+}
+
+.perm-tooltip:hover .tooltiptext {
+  visibility: visible;
+}
+
 #loading-popup{
   z-index: 500;
   padding: 40px 80px;

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

@@ -124,6 +124,9 @@ class MaterialList {
     this.searchJson.search_by.page = this.page;
     this.searchJson.search_by.after = this.afters.get(this.page);
     this.searchJson.search_by.per_page = 10;
+    let restricted = document.getElementById('restrict-checkbox').checked;
+    this.searchJson.search_by.restricted = restricted;
+
     let postQuery = JSON.stringify(this.searchJson);
   
     // Hide or show previous page button on first page

client/src/search-mod/SearchMod.js

@@ -74,19 +74,24 @@ class SearchMod {
       </div>
 
 
-      <div class="add-buttons" >
-        <div  class="tab-buttons" style="width: 70%; display: inline-block">
+      <div class="add-buttons" style="display: flex">
+        <div class="tab-buttons" style="width: 75%">
           <button class="element-add-btn" id="add-tab-selected">Element</button>
           <button class="formula-add-btn" style="padding: 10px 20px;" >Formula/Material</button>
           <button class="props-add-btn" >Properties</button>
         </div>
-        <div class="bool-buttons" style="width: 28%; display: inline-block" >
+        <div class="bool-buttons" style="width: 20%; display: flex; flex-direction: column">
+          <label class="perm-tooltip">Restrict to individual calculations
+            <input type="checkbox" name="check" id="restrict-checkbox">
+            <span class="tooltiptext">Select to restrict the query to individual calculations. If not selected, the query will combine results from several different calculations.</span>
+          </label>
+        </div>
+        <!--<div class="bool-buttons" style="width: 28%; display: inline-block" >
           <button  disabled >AND</button>
           <button  disabled >OR</button>
           <button  disabled >NOT</button>
           <button  disabled >(</button> <button  disabled >)</button>
-          <!--<input type="checkbox" name="and-or" class="not-symbol-btn" />NOT-->
-        </div>
+        </div> -->
       </div>