gui update for correct display of most similar materials

client/css/styles.css

@@ -914,6 +914,14 @@ navTreeWrapper
   background-color: white; z-index: 10;
 }
 
+.similar-materials-panel-unfolded{
+  text-align: left;
+  border: 1px solid #DDD;
+  padding: 10px 12px;
+  border-radius: 4px;
+  position: absolute; top:0; left:0;
+  background-color: white; z-index: 10;
+}
 .view-reset-tooltip{
   position:absolute;
   display: none;

client/src/material-mod/Overview.view.js

@@ -153,22 +153,20 @@ class Overview {
           </div>
         </div>
 
-        <div style="clear: both;"></div>
-        <div style="float: left; width: 60%;  " class="similarity-finder">
-
-        </div>
 
 
         <div style="clear: both;"></div>
-        <div class="spin-legend" style="font-size: 0.9em; padding: 6px 30px 10px; display: none">
-          <svg width="15px" height="10px"> <polyline points="0,5 15,5" class="plotSpin1"/></svg>
-          Spin <span style='font-size: 1.1em'>⇧</span>  &nbsp;&nbsp;&nbsp;
-
-          <svg width="15px" height="10px"> <polyline points="0,5 15,5" class="plotSpin2"/></svg>
-          Spin <span style='font-size: 1.1em'>⇩</span>
+          <div class="spin-legend" style="font-size: 0.9em; padding: 6px 30px 10px; display: block">
+            <svg width="15px" height="10px"> <polyline points="0,5 15,5" class="plotSpin1"/></svg>
+              Spin <span style='font-size: 1.1em'>⇧</span>  &nbsp;&nbsp;&nbsp;
+
+              <svg width="15px" height="10px"> <polyline points="0,5 15,5" class="plotSpin2"/></svg>
+              Spin <span style='font-size: 1.1em'>⇩</span>
+              <div style="float: right; width: 60%;  " class="similarity-finder">
+              <div style="clear: both;"></div>
+          </div>
         </div>
         </div>
-
         <!--
         <div class="footer">
 

client/src/material-mod/Similarity.js

@@ -9,7 +9,7 @@ class SimilarityFinder {
 
     this.element.innerHTML+=`
       <div >
-        <span style=" vertical-align: 30%; ">Similar materials</span>
+        <span style=" vertical-align: 30%;" info-sys-data="space-group">Similar materials</span>
         <img style="cursor: pointer" src="${util.IMAGE_DIR}folded.png" />
       </div>
 
@@ -61,22 +61,28 @@ class SimilarityFinder {
       }
     })
 
-    const container = document.createElement('div')
-    container.class='vr-download-panel-unfolded'
-    container.style='width: 210px;'
+    const slicedData = dataAsArray.slice(0,5)
+
+    const container = document.createElement('table')
+    container.setAttribute('class','similar-materials-panel-unfolded')
+    container.style='width: 250px;'
     this.foldingPanel.appendChild(container)
+    const sim_table_header = document.createElement('tr')
+    sim_table_header.style = "padding: 5px; "
+    sim_table_header.innerHTML = `<th style = "text-align: left;">Formula (Space group)</th><th>:</th><th style = "text-align: left;">Tc</th>`
+    container.appendChild(sim_table_header)
 
-    dataAsArray.forEach(function(item) {
+    slicedData.forEach(function(item) {
       const material_id = item.key.split(':')[0]
-      const element = document.createElement('div')
+      const element = document.createElement('tr')
       element.style = "padding: 5px; "
       const url = `${window.location.toString().replace(/#.*$/, "")}#/material/${material_id}`
-      console.log(url)
-      element.innerHTML = `<a href="${url}" target="_${material_id}">${item.data.formula}(${item.data.space_group_number}): ${item.data.Tc}</a>`
+      element.innerHTML = `<td><a href="${url}" target="_${material_id}">${item.data.formula} (${item.data.space_group_number})</a></td><td>:</td> <td>${item.data.Tc.toPrecision(3)}</td>`
       container.appendChild(element)
     })
+
   }
 
 } // class DropDown
 
-module.exports = { SimilarityFinder };
\ No newline at end of file
+module.exports = { SimilarityFinder };