Commit bdffb455 authored by Lauri Himanen's avatar Lauri Himanen
Browse files

Refactored similarity loading and display.

parent da7db610
Pipeline #81205 skipped with stage
This source diff could not be displayed because it is too large. You can view the blob instead.
...@@ -3,10 +3,10 @@ window.nomadEnv = { ...@@ -3,10 +3,10 @@ window.nomadEnv = {
//guiRoot: "https://labdev-nomad.esc.rzg.mpg.de/dev/nomad/encyclopedia-api/", //guiRoot: "https://labdev-nomad.esc.rzg.mpg.de/dev/nomad/encyclopedia-api/",
//userCookieDomain: ".esc.rzg.mpg.de", //userCookieDomain: ".esc.rzg.mpg.de",
//userCookieDomain: ".nomad-lab.eu", //userCookieDomain: ".nomad-lab.eu",
apiRoot: "https://nomad-lab.eu/prod/rae/api/encyclopedia/", //apiRoot: "https://nomad-lab.eu/prod/rae/api/encyclopedia/",
//guiRoot: "https://nomad-lab.eu/prod/rae/encyclopedia/", //guiRoot: "https://nomad-lab.eu/prod/rae/encyclopedia/",
guiRoot: "http://localhost:3000/gui/", guiRoot: "http://localhost:3000/gui/",
//apiRoot: "http://localhost:8000/fairdi/nomad/latest/api/encyclopedia/", apiRoot: "http://localhost:8000/fairdi/nomad/latest/api/encyclopedia/",
userCookieDomain: ".localhost", userCookieDomain: ".localhost",
guestUserToken: 'eyJhbGciOiJIUzI1NiIsImlhdCI6MTUyMzg4MDE1OSwiZXhwIjoxNjgxNTYwMTU5fQ.ey'+ guestUserToken: 'eyJhbGciOiJIUzI1NiIsImlhdCI6MTUyMzg4MDE1OSwiZXhwIjoxNjgxNTYwMTU5fQ.ey'+
'JpZCI6ImVuY2d1aSJ9.MsMWQa3IklH7cQTxRaIRSF9q8D_2LD5Fs2-irpWPTp4', 'JpZCI6ImVuY2d1aSJ9.MsMWQa3IklH7cQTxRaIRSF9q8D_2LD5Fs2-irpWPTp4',
......
...@@ -594,7 +594,7 @@ ...@@ -594,7 +594,7 @@
"similar materials": { "similar materials": {
"comment": "", "comment": "",
"link": "https://en.wikipedia.org/wiki/Similarity_search", "link": "https://en.wikipedia.org/wiki/Similarity_search",
"text": "Five materials of the Encyclopedia are shown, that are most similar to the current one in terms of the electronic density of states in the upper valence region. The used fingerprints are based on a modification to those suggested by <a href=\"https://pubs.acs.org/doi/abs/10.1021/cm503507h\" target=\"_blank2\">O. Isayev et al., Chem. Mater. 27 (2015), 735-743</a>. The similarity is measured by the Tanimoto coefficient <i>Tc</i>, which ranges between 0 (not similar) and 1 (identical)." "text": "At most five materials of the Encyclopedia are shown, that are most similar to the current one in terms of the electronic density of states in the upper valence region. The used fingerprints are based on a modification to those suggested by <a href=\"https://pubs.acs.org/doi/abs/10.1021/cm503507h\" target=\"_blank2\">O. Isayev et al., Chem. Mater. 27 (2015), 735-743</a>. The similarity is measured by the Tanimoto coefficient <i>Tc</i>, which ranges between 0 (not similar) and 1 (identical)."
}, },
"smearing kind": { "smearing kind": {
"comment": "specification possible", "comment": "specification possible",
...@@ -649,4 +649,4 @@ ...@@ -649,4 +649,4 @@
"num": "space group" "num": "space group"
} }
} }
} }
\ No newline at end of file
...@@ -172,7 +172,7 @@ class Overview { ...@@ -172,7 +172,7 @@ class Overview {
Spin <span style='font-size: 1.1em'>⇩</span> Spin <span style='font-size: 1.1em'>⇩</span>
</td> </td>
<td class = "similarity-data-field"> <td class = "similarity-data-field">
<div style="float: right; padding: 0px 40px 10px 0px; margin-top: 1px;" class="similarity-finder"> <div style="float: right; padding: 0px 50px 10px 0px; margin-top: 1px;" class="similarity-finder">
</div> </div>
</td> </td>
</tr> </tr>
......
...@@ -5,11 +5,9 @@ class SimilarityFinder { ...@@ -5,11 +5,9 @@ class SimilarityFinder {
constructor() { constructor() {
this.folded = true; this.folded = true;
this.element = document.createElement('span'); this.element = document.createElement('span');
//this.element.className = className;
this.element.setAttribute("info-sys-data","similar-materials")
this.element.style = "float : right; border: 2px solid #DDD; padding: 2px 2px 0px 3px;" this.element.style = "float : right; border: 2px solid #DDD; padding: 2px 2px 0px 3px;"
this.element.innerHTML+=` this.element.innerHTML+=`
<span style=" vertical-align: 30%;" ><b>Similar materials</b></span> <span info-sys-data="similar-materials" style="vertical-align: 30%;">Similar materials</span>
<img style="cursor: pointer" src="${util.IMAGE_DIR}folded.png" /> <img style="cursor: pointer" src="${util.IMAGE_DIR}folded.png" />
<div class="vr-download-panel" style="position: relative; display: none;"> <div class="vr-download-panel" style="position: relative; display: none;">
...@@ -44,23 +42,17 @@ class SimilarityFinder { ...@@ -44,23 +42,17 @@ class SimilarityFinder {
} }
setSimilarityData(similarityData) { setSimilarityData(similarityData) {
const dataAsArray = Object.keys(similarityData).map(function(key) { similarityData.sort(function(a, b) {
return { if (a.value < b.value) {
data: similarityData[key],
key: key
}
})
dataAsArray.sort(function(a, b) {
if (a.data.Tc < b.data.Tc) {
return 1 return 1
} else if (a.data.Tc > b.data.Tc) { } else if (a.value > b.value) {
return -1 return -1
} else { } else {
return 0 return 0
} }
}) })
const slicedData = dataAsArray.slice(0,5) const slicedData = similarityData.slice(0, 5)
const container = document.createElement('table') const container = document.createElement('table')
container.setAttribute('class','similar-materials-panel-unfolded') container.setAttribute('class','similar-materials-panel-unfolded')
...@@ -72,11 +64,10 @@ class SimilarityFinder { ...@@ -72,11 +64,10 @@ class SimilarityFinder {
container.appendChild(sim_table_header) container.appendChild(sim_table_header)
slicedData.forEach(function(item) { slicedData.forEach(function(item) {
const material_id = item.key.split(':')[0]
const element = document.createElement('tr') const element = document.createElement('tr')
element.style = "padding: 5px; font-family: 'Arimo', sans-serif; font-size: 10pt; " element.style = "padding: 5px; font-family: 'Arimo', sans-serif; font-size: 10pt; "
const url = `${window.location.toString().replace(/#.*$/, "")}#/material/${material_id}` const url = `${window.location.toString().replace(/#.*$/, "")}#/material/${item.material_id}`
element.innerHTML = `<td><a href="${url}" target="_${material_id}" style="color:#777; font-family: 'Arimo', sans-serif; font-size: 10pt;">${util.getSubscriptedFormula(item.data.formula)} (${item.data.space_group_number})</a></td><td>:</td> <td>${item.data.Tc.toPrecision(3)}</td>` element.innerHTML = `<td><a href="${url}" target="_${item.material_id}" style="color:#777; font-family: 'Arimo', sans-serif; font-size: 10pt;">${util.getSubscriptedFormula(item.formula)} (${item.space_group_number})</a></td><td>:</td> <td>${item.value.toPrecision(3)}</td>`
container.appendChild(element) container.appendChild(element)
}) })
......
Supports Markdown
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