Commit c0614540 authored by Martin Kuban's avatar Martin Kuban Committed by Markus Scheidgen
Browse files

gui update for correct display of most similar materials

parent cde0f4e0
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -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;
......
......@@ -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">
<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">
......
......@@ -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,20 +61,26 @@ 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
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment