Skip to content
GitLab
Commit cde0f4e0 authored by Markus Scheidgen's avatar Markus Scheidgen
Browse files

First implementation of similarity in GUI.

parent a22dc0b9
Hide whitespace changes
Inline Side-by-side
.gitignore 0 → 100644
View file @ cde0f4e0
enc-gui.iml
client/bundle.js
View file @ cde0f4e0
......@@ -153,11 +153,11 @@ if (document.location.href.indexOf('nomad-coe.eu') > 0){//
path = 'api/v1.0/';
}
// Case 3: testing-staging environment and local installations (docker containers) of full Encyclopedia stack
else if (document.location.href.indexOf('gui') > 0){
API_HOST= '/'; // USER_COOKIE_DOMAIN = 'localhost' and path = 'v1.0/';
if (document.location.href.indexOf('staging') > 0) // testing-staging server
USER_COOKIE_DOMAIN = '.mpg.de';
}
// else if (document.location.href.indexOf('gui') > 0){
// API_HOST= '/'; // USER_COOKIE_DOMAIN = 'localhost' and path = 'v1.0/';
// if (document.location.href.indexOf('staging') > 0) // testing-staging server
// USER_COOKIE_DOMAIN = '.mpg.de';
// }
let API_BASE_URL = API_HOST + path;
//console.log('API host: ',API_HOST,' USER_COOKIE_DOMAIN: ',USER_COOKIE_DOMAIN);
......@@ -4416,6 +4416,7 @@ let DOSPlotter = __webpack_require__(10);
let HeatCapPlotter = __webpack_require__(11);
let MaterialMod = __webpack_require__(9);
let DataStore = __webpack_require__(1);
let SimilarityFinder = __webpack_require__(37).SimilarityFinder;
const ELEMENT_INCLUDED_MSG = 'ELEMENT ALREADY INCLUDED';
......@@ -4535,9 +4536,13 @@ 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;
......@@ -4545,11 +4550,11 @@ class Overview {
<svg width="15px" height="10px"> <polyline points="0,5 15,5" class="plotSpin2"/></svg>
Spin <span style='font-size: 1.1em'>⇩</span>
</div>
</div>
<!--
<div class="footer">
<b>Band gap</b>: <span class="e-struct-field" ></span>
</div>
-->
......@@ -4696,6 +4701,15 @@ class Overview {
'space-group.value:'+data.space_group_number);
}
if (data.similarity) {
if (!this.similarityFinder) {
this.similarityFinder = new SimilarityFinder({left: 40, right: 16, top: 0, bottom: 30});
const similarityFinderContainer = this.element.querySelector('.similarity-finder');
this.similarityFinder.setSimilarityData(data.similarity);
similarityFinderContainer.appendChild(this.similarityFinder.element);
}
}
}
......@@ -9576,5 +9590,92 @@ class MaxMinSlider{
*/
/***/ }),
/* 37 */
/***/ (function(module, exports, __webpack_require__) {
let util = __webpack_require__(0);
class SimilarityFinder {
constructor() {
this.folded = true;
this.element = document.createElement('div');
//this.element.className = className;
this.element.innerHTML+=`
<div >
<span style=" vertical-align: 30%; ">Similar materials</span>
<img style="cursor: pointer" src="${util.IMAGE_DIR}folded.png" />
</div>
<div class="vr-download-panel" style="position: relative; display: none">
</div>
`;
// Focus related properties (in order to hide the box when the user click out)
this.element.tabIndex = '0'; // enabled the support of focusing
this.element.style.outline = 'none'; // The outline is not shown when it gains the focus
this.foldingPanel = this.element.querySelector('.vr-download-panel');
this.foldBtn = this.element.querySelector('img');
this.foldBtn.addEventListener('click', e => {
this.folded = !this.folded;
this.foldBtn.src = (this.folded ? util.IMAGE_DIR+'folded.png' :
util.IMAGE_DIR+'unfolded.png');
//this.foldBtn.className = (this.folded ? 'on' : 'off');
this.foldingPanel.style.display = (this.folded ? 'none' : 'block');
});
this.element.addEventListener('blur' , e => {
setTimeout(() => {
this.folded = true;
this.foldBtn.src = util.IMAGE_DIR+'folded.png';
this.foldingPanel.style.display = 'none';
}, 100);
});
//this.cellViewer.toggleLatticeParameters(false);
}
setSimilarityData(similarityData) {
const dataAsArray = Object.keys(similarityData).map(function(key) {
return {
data: similarityData[key],
key: key
}
})
dataAsArray.sort(function(a, b) {
if (a.data.Tc < b.data.Tc) {
return 1
} else if (a.data.Tc > b.data.Tc) {
return -1
} else {
return 0
}
})
const container = document.createElement('div')
container.class='vr-download-panel-unfolded'
container.style='width: 210px;'
this.foldingPanel.appendChild(container)
dataAsArray.forEach(function(item) {
const material_id = item.key.split(':')[0]
const element = document.createElement('div')
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>`
container.appendChild(element)
})
}
} // class DropDown
module.exports = { SimilarityFinder };
/***/ })
/******/ ]);
\ No newline at end of file
client/src/common/util.js
View file @ cde0f4e0
......@@ -83,11 +83,11 @@ if (document.location.href.indexOf('nomad-coe.eu') > 0){//
path = 'api/v1.0/';
}
// Case 3: testing-staging environment and local installations (docker containers) of full Encyclopedia stack
else if (document.location.href.indexOf('gui') > 0){
API_HOST= '/'; // USER_COOKIE_DOMAIN = 'localhost' and path = 'v1.0/';
if (document.location.href.indexOf('staging') > 0) // testing-staging server
USER_COOKIE_DOMAIN = '.mpg.de';
}
// else if (document.location.href.indexOf('gui') > 0){
// API_HOST= '/'; // USER_COOKIE_DOMAIN = 'localhost' and path = 'v1.0/';
// if (document.location.href.indexOf('staging') > 0) // testing-staging server
// USER_COOKIE_DOMAIN = '.mpg.de';
// }
let API_BASE_URL = API_HOST + path;
//console.log('API host: ',API_HOST,' USER_COOKIE_DOMAIN: ',USER_COOKIE_DOMAIN);
......
client/src/material-mod/Overview.view.js
View file @ cde0f4e0
......@@ -33,6 +33,7 @@ let DOSPlotter = require('./DOSPlotter.js');
let HeatCapPlotter = require('./HeatCapPlotter.js');
let MaterialMod = require('./MaterialMod.js');
let DataStore = require('./DataStore.js');
let SimilarityFinder = require('./Similarity.js').SimilarityFinder;
const ELEMENT_INCLUDED_MSG = 'ELEMENT ALREADY INCLUDED';
......@@ -152,9 +153,13 @@ 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;
......@@ -162,11 +167,11 @@ class Overview {
<svg width="15px" height="10px"> <polyline points="0,5 15,5" class="plotSpin2"/></svg>
Spin <span style='font-size: 1.1em'>⇩</span>
</div>
</div>
<!--
<div class="footer">
<b>Band gap</b>: <span class="e-struct-field" ></span>
</div>
-->
......@@ -313,6 +318,15 @@ class Overview {
'space-group.value:'+data.space_group_number);
}
if (data.similarity) {
if (!this.similarityFinder) {
this.similarityFinder = new SimilarityFinder({left: 40, right: 16, top: 0, bottom: 30});
const similarityFinderContainer = this.element.querySelector('.similarity-finder');
this.similarityFinder.setSimilarityData(data.similarity);
similarityFinderContainer.appendChild(this.similarityFinder.element);
}
}
}
......
client/src/material-mod/Similarity.js 0 → 100644
View file @ cde0f4e0
let util = require('../common/util.js');
class SimilarityFinder {
constructor() {
this.folded = true;
this.element = document.createElement('div');
//this.element.className = className;
this.element.innerHTML+=`
<div >
<span style=" vertical-align: 30%; ">Similar materials</span>
<img style="cursor: pointer" src="${util.IMAGE_DIR}folded.png" />
</div>
<div class="vr-download-panel" style="position: relative; display: none">
</div>
`;
// Focus related properties (in order to hide the box when the user click out)
this.element.tabIndex = '0'; // enabled the support of focusing
this.element.style.outline = 'none'; // The outline is not shown when it gains the focus
this.foldingPanel = this.element.querySelector('.vr-download-panel');
this.foldBtn = this.element.querySelector('img');
this.foldBtn.addEventListener('click', e => {
this.folded = !this.folded;
this.foldBtn.src = (this.folded ? util.IMAGE_DIR+'folded.png' :
util.IMAGE_DIR+'unfolded.png');
//this.foldBtn.className = (this.folded ? 'on' : 'off');
this.foldingPanel.style.display = (this.folded ? 'none' : 'block');
});
this.element.addEventListener('blur' , e => {
setTimeout(() => {
this.folded = true;
this.foldBtn.src = util.IMAGE_DIR+'folded.png';
this.foldingPanel.style.display = 'none';
}, 100);
});
//this.cellViewer.toggleLatticeParameters(false);
}
setSimilarityData(similarityData) {
const dataAsArray = Object.keys(similarityData).map(function(key) {
return {
data: similarityData[key],
key: key
}
})
dataAsArray.sort(function(a, b) {
if (a.data.Tc < b.data.Tc) {
return 1
} else if (a.data.Tc > b.data.Tc) {
return -1
} else {
return 0
}
})
const container = document.createElement('div')
container.class='vr-download-panel-unfolded'
container.style='width: 210px;'
this.foldingPanel.appendChild(container)
dataAsArray.forEach(function(item) {
const material_id = item.key.split(':')[0]
const element = document.createElement('div')
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>`
container.appendChild(element)
})
}
} // class DropDown
module.exports = { SimilarityFinder };
\ No newline at end of file
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