fixed positioning and info system display for similar materials

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

@@ -156,17 +156,23 @@ class Overview {
 
 
         <div style="clear: both;"></div>
-          <div class="spin-legend" style="font-size: 0.9em; padding: 6px 30px 10px; display: block">
+        <table style="width: 100%">
+        <tr>
+          <td 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 style="float: right; width: 60%;  " class="similarity-finder">
-              <div style="clear: both;"></div>
+          </td>
+          <td class = "similarity-data-field">
+          <div style="float: right; padding: 6px 60px 10px 30px; " class="similarity-finder">
           </div>
+          </td>
+          </tr>
+          </table>
         </div>
-        </div>
+        <div style="clear: both;"></div>
         <!--
         <div class="footer">
 
@@ -208,7 +214,6 @@ class Overview {
     this.structTypeField= this.element.querySelector('.structure-type-field');
     this.structTypeValue= this.element.querySelector('.structure-type-value');
     //this.band_gap = this.element.getElementsByClassName('e-struct-field')[0];
-
     //fields= this.element.getElementsByClassName('method-field');
     this.functional= this.element.querySelector('.functional-field');//fields[0];
     this.code= this.element.querySelector('.code-field');//fields[1];
@@ -324,6 +329,9 @@ class Overview {
         this.similarityFinder.setSimilarityData(data.similarity);
         similarityFinderContainer.appendChild(this.similarityFinder.element);
       }
+      this.similartyDataField = this.element.querySelector('.similarity-data-field');
+      InfoSys.addToInfoSystem(this.similartyDataField)
+
     }
   }
 

client/src/material-mod/Similarity.js

@@ -7,11 +7,11 @@ class SimilarityFinder {
     this.element = document.createElement('div');
     //this.element.className = className;
 
+    this.element.style = "float : right;"
+
     this.element.innerHTML+=`
-      <div >
-        <span style=" vertical-align: 30%;" info-sys-data="space-group">Similar materials</span>
+        <span style=" vertical-align: 30%;" info-sys-data="similar-materials">Similar materials</span>
         <img style="cursor: pointer" src="${util.IMAGE_DIR}folded.png" />
-      </div>
 
       <div class="vr-download-panel" style="position: relative; display: none">
 
@@ -65,7 +65,7 @@ class SimilarityFinder {
 
     const container = document.createElement('table')
     container.setAttribute('class','similar-materials-panel-unfolded')
-    container.style='width: 250px;'
+    container.style='width: 200px;'
     this.foldingPanel.appendChild(container)
     const sim_table_header = document.createElement('tr')
     sim_table_header.style = "padding: 5px; "