Commits (2)
This source diff could not be displayed because it is too large. You can view the blob instead.
window.nomadEnv = {
host: "https://labdev-nomad.esc.rzg.mpg.de/dev/nomad/encyclopedia-api/",
userCookieDomain: ".esc.rzg.mpg.de",
//host: "https://labdev-nomad.esc.rzg.mpg.de/dev/nomad/encyclopedia-api/",
//userCookieDomain: ".esc.rzg.mpg.de",
host: "/",
path: "",
userCookieDomain: ".localhost",
guestUserToken: 'eyJhbGciOiJIUzI1NiIsImlhdCI6MTUyMzg4MDE1OSwiZXhwIjoxNjgxNTYwMTU5fQ.ey'+
'JpZCI6ImVuY2d1aSJ9.MsMWQa3IklH7cQTxRaIRSF9q8D_2LD5Fs2-irpWPTp4'
};
......@@ -67,7 +67,7 @@ let ELEMENTS = [
];
// API URL and user cookie domain configuration
const API_BASE_URL = window.nomadEnv.host + "api/encyclopedia/";
const API_BASE_URL = window.nomadEnv.host + window.nomadEnv.path;
document.querySelector('#guest-user a').href = API_BASE_URL+'saml/?sso2';
......
......@@ -165,8 +165,11 @@ class MaterialMod {
_loadMaterial(matId, view) {
// Set to loading mode
document.getElementById('e-structure-ov').style.display = 'none';
document.getElementById('thermal-props-ov').style.display = 'none';
this.overview.element.style.visibility= 'hidden';
LoadingPopup.show("load_material");
LoadingPopup.show("load_overview");
LoadingPopup.show("load_groups");
// Request basic material data
util.serverReq(util.getMaterialURL(matId), e1 => {
......@@ -188,29 +191,27 @@ class MaterialMod {
util.serverReqPOST(util.getMaterialCalcURL(matId, idealId), query, e2 => {
materialData.idealized_structure = JSON.parse(e2.target.response).idealized_structure;
this.structureViewer.load(materialData.idealized_structure);
this._setView(view);
this.overview.element.style.visibility = 'visible';
// Store data for later use
DataStore.setMaterialData(materialData);
document.querySelector('title').innerHTML =
'NOMAD Encyclopedia - '+util.getMaterialTitle(materialData, false);
this.overview.setMaterialData();
// Get groups
util.serverReq(util.getMaterialXsURL('groups', matId), e5 => {
let groups = JSON.parse(e5.target.response);
DataStore.setGroups(groups);
this.overview.setMaterialData();
let name = (materialData.material_name === null ?
materialData.formula : materialData.material_name);
this.overview.setCalcsData(markedTreeLeafs);
// Show the view
this._setView(view);
this.overview.element.style.visibility = 'visible';
LoadingPopup.hide("load_material");
});
// Show the view
LoadingPopup.hide("load_overview");
let name = (materialData.material_name === null ? materialData.formula : materialData.material_name);
this.overview.setCalcsData(markedTreeLeafs);
});
});
// Get groups
util.serverReq(util.getMaterialXsURL('groups', matId), e5 => {
let groups = JSON.parse(e5.target.response);
DataStore.setGroups(groups);
LoadingPopup.hide("load_groups");
});
};
});
}
......
......@@ -181,59 +181,153 @@ class NavTree {
this.element.innerHTML= '';
this.calcsInGroups = DataStore.getGroups();
function getNodeHTML(level, label, unfolded, counter = 0){
let foldingValue= 'node-'+(unfolded ? 'unfolded' : 'folded');
let counterTag= (counter === 0 ? '' :
'<span class="node-counter">('+counter+')</span>');
return `
<div class="${level}">
<span class="${foldingValue}"></span>
<span class="node-checkbox"></span>
<span class="node-label" >${label}</span>
${counterTag}
</div>
`;
//function getNodeHTML(level, label, unfolded, counter = 0){
//let foldingValue= 'node-'+(unfolded ? 'unfolded' : 'folded');
//let counterTag= (counter === 0 ? '' :
//'<span class="node-counter">('+counter+')</span>');
//return `
//<div class="${level}">
//<span class="${foldingValue}"></span>
//<span class="node-checkbox"></span>
//<span class="node-label" >${label}</span>
//${counterTag}
//</div>
//`;
//}
function getNodeHTML(level, label, unfolded, counter = 0) {
let foldingValue= 'node-' + (unfolded ? 'unfolded' : 'folded');
let container = document.createElement("div");
container.className = level;
let span1 = document.createElement("span");
span1.className = foldingValue;
container.appendChild(span1);
let span2 = document.createElement("span");
span2.className = "node-checkbox";
container.appendChild(span2);
let span3 = document.createElement("span");
span3.className = "node-label";
span3.textContent = label;
container.appendChild(span3);
if (counter !== 0) {
let span0 = document.createElement("span");
span0.className = "node-counter";
span0.textContent = "(" + counter + ")";
container.appendChild(span0);
}
return container;
}
function getCalcGraphInfoAvalabilityHTML(calc){
let html= '';
if (calc.has_band_structure) html += '<span class="tooltip">B<span class="tooltiptext">Band structure</span></span> ';
if (calc.has_dos) html += '<span class="tooltip">D<span class="tooltiptext">Density of states</span></span> ';
if (calc.has_fermi_surface) html += '<span class="tooltip">F<span class="tooltiptext">Fermi surface</span></span>';
if (calc.has_thermal_properties) html += '<span class="tooltip">T<span class="tooltiptext">Phonons</span></span>';
function getCalcHTML(leafId, leafAbbr, calcNumber, isGroup, graphInfoAvailabilityHTML) {
let container = document.createElement("div");
container.className = "calc-l";
container.setAttribute("data-calc-id", leafId);
let span1 = document.createElement("span");
container.appendChild(span1);
let span2 = document.createElement("span");
span2.className = "node-checkbox";
container.appendChild(span2);
let span3 = document.createElement("span");
span3.className = "node-label";
if (isGroup) {
span3.appendChild(calcIcon);
}
span3.textContent = leafAbbr + calcNumber + "\u00A0";
span3.appendChild(graphInfoAvailabilityHTML);
container.appendChild(span3);
let div1 = document.createElement("div");
div1.id = "icon-container";
div1.style.float = "right";
div1.style.padding = "1px 10px 0 0";
div1.style.display = "none";
let img = document.createElement("img");
img.setAttribute("src", util.IMAGE_DIR + "next.png");
div1.appendChild(img);
container.appendChild(div1);
return container;
}
return '&nbsp; <span class="calc-graph-aval">'+html+'</span>';
function getCalcGraphInfoAvalabilityHTML(calc) {
let fragment = document.createElement("div");
fragment.className = "calc-graph-aval";
let container = document.createElement("span");
if (calc.has_band_structure) {
let span1 = document.createElement("span");
span1.className = "tooltip";
span1.textContent = "B";
let span2 = document.createElement("span");
span2.className = "tooltiptext";
span2.textContent = "Band structure";
span1.appendChild(span2);
container.appendChild(span1);
}
if (calc.has_dos) {
let span1 = document.createElement("span");
span1.className = "tooltip";
span1.textContent = "D";
let span2 = document.createElement("span");
span2.className = "tooltiptext";
span2.textContent = "Density of states";
span1.appendChild(span2);
container.appendChild(span1);
}
if (calc.has_fermi_surface) {
let span1 = document.createElement("span");
span1.className = "tooltip";
span1.textContent = "F";
let span2 = document.createElement("span");
span2.className = "tooltiptext";
span2.textContent = "Fermi surface";
span1.appendChild(span2);
container.appendChild(span1);
}
if (calc.has_thermal_properties) {
let span1 = document.createElement("span");
span1.className = "tooltip";
span1.textContent = "T";
let span2 = document.createElement("span");
span2.className = "tooltiptext";
span2.textContent = "Phonons";
span1.appendChild(span2);
container.appendChild(span1);
}
fragment.appendChild(container);
return fragment;
}
// Init map to store calculations data
let calcs = DataStore.getCalculations();
let calcIcon = document.createElement("img");
calcIcon.className = "folder-icon";
calcIcon.src = +util.IMAGE_DIR+"folder.png";
// For the structure view we group calculations
let groups = null;
let tree = buildCalcTree(calcs, this.calcsInGroups, view);
let rootElement= document.createElement('div');
this.element.appendChild(rootElement);
rootElement.innerHTML= getNodeHTML('material-l', materialName, true);
let rootElement = document.createElement('div');
rootElement.appendChild(getNodeHTML('material-l', materialName, true));
let functionalLevelBox= document.createElement('div');
let functionalLevelBox = document.createElement('div');
rootElement.appendChild(functionalLevelBox);
tree.forEach((codeMap, functionalName) => {
functionalLevelBox.innerHTML+= getNodeHTML('functional-l', functionalName, true);
functionalLevelBox.appendChild(getNodeHTML('functional-l', functionalName, true));
let codeLevelBox= document.createElement('div');
functionalLevelBox.appendChild(codeLevelBox);
codeMap.forEach( (calcArray, codeName) => {
codeLevelBox.innerHTML+= getNodeHTML('code-l', codeName, false, calcArray.length);
codeLevelBox.appendChild(getNodeHTML('code-l', codeName, false, calcArray.length));
let calcLevelBox= document.createElement('div');
codeLevelBox.appendChild(calcLevelBox);
calcLevelBox.style.display= 'none';
calcLevelBox.style.display = 'none';
for (var i = 0; i < calcArray.length; i++) {
let leafId = calcArray[i];
let calcIcon = '';
let calcNumber = '';
let leafAbbr = util.getShortCode(leafId);
let isGroup = DataStore.isGroup(leafId);
......@@ -241,7 +335,6 @@ class NavTree {
let groupType = DataStore.getGroupType(leafId);
let groupId = leafId.substring(4);
let calculations;
calcIcon = '<img class="folder-icon" src="'+util.IMAGE_DIR+'folder.png" />';
calculations = this.calcsInGroups.get(groupType).get(groupId);
calcNumber = '('+calculations.length+')';
}
......@@ -249,33 +342,20 @@ class NavTree {
let calc_id = DataStore.getReprCalc(leafId);
let calc = DataStore.getCalc(calc_id);
let graphInfoAvalabilityHTML = getCalcGraphInfoAvalabilityHTML(calc);
calcLevelBox.innerHTML += `
<div class="calc-l" data-calc-id="${leafId}" >
<span></span>
<span class="node-checkbox"></span>
<span class="node-label" >
${calcIcon} ${leafAbbr} ${calcNumber} ${graphInfoAvalabilityHTML}
</span>
<div style="float: right; padding: 1px 10px 0 0; display: none;">
<img src="${util.IMAGE_DIR}next.png" />
</div>
</div>
<div> </div>`;
let calcDiv = getCalcHTML(leafId, leafAbbr, calcNumber, isGroup, graphInfoAvalabilityHTML);
calcLevelBox.appendChild(calcDiv);
calcLevelBox.appendChild(document.createElement("div"));
}
});
});
this.showCalcsGraphDataAvalability(view !== "structure");
this.element.appendChild(rootElement);
this.showCalcsGraphDataAvailability(view !== "structure");
} // build method
selectAll(initMarkedLeafId){
let materialNodeBox= this.element.children[0].children[0];
this._recursiveNodeSelection(materialNodeBox, true);
keepTreeIntegrity(materialNodeBox, true);
// No calc marked
}
getMarkedLeaf(){
......@@ -325,15 +405,15 @@ class NavTree {
if (classString.indexOf('-folded') >= 0) {
dropDowmElement.className= dropDowmElement.className.replace('folded','unfolded');
siblingElement.style.display= 'block';
}else {
} else {
dropDowmElement.className= dropDowmElement.className.replace('unfolded','folded');
siblingElement.style.display= 'none';
siblingElement.style.display = 'none';
}
}
_recursiveNodeSelection(nodeBox, select){
let nodeCheckBox= nodeBox.children[1];
let nodeCheckBox = nodeBox.children[1];
if (select){
nodeBox.className += ' node-selected';
}else{ // deselect
......@@ -398,7 +478,7 @@ class NavTree {
_setMarkedCalc(nodeBox){
if (this.markedNode !== null){
this.markedNode.className= this.markedNode.className.replace('-marked','');
this.markedNode.querySelector('div').style.display = 'none';
this.markedNode.querySelector('#icon-container').style.display = 'none';
let folderIcon = this.markedNode.querySelector('.folder-icon');
if (folderIcon !== null ) folderIcon.src = util.IMAGE_DIR+'folder.png';
}
......@@ -406,7 +486,7 @@ class NavTree {
nodeBox.className += '-marked';
let folderIcon = nodeBox.querySelector('.folder-icon');
if (folderIcon !== null ) folderIcon.src = util.IMAGE_DIR+'folder-sel.png';
nodeBox.querySelector('div').style.display = 'block';
nodeBox.querySelector('#icon-container').style.display = 'block';
this.markedNode= nodeBox;
// The parent tree node is unfolded in order to show the leaf selected
......@@ -420,10 +500,10 @@ class NavTree {
this.leafMarkedListener(nodeBox.getAttribute('data-calc-id'));
}
showCalcsGraphDataAvalability(bool){
showCalcsGraphDataAvailability(bool){
let elements= this.element.getElementsByClassName('calc-graph-aval');
for (var i = 0; i < elements.length; i++)
elements[i].style.display= (bool ? 'inline' : 'none');
elements[i].style.display = (bool ? 'inline' : 'none');
}
setHeight(heightPx){
......
......@@ -391,16 +391,14 @@ class Overview {
if (tempCalcId === null) {
markedTreeLeafs.eStruct = null; // no graph data
} else if (DataStore.isInAnyNotDisabledGroup(tempCalcId)){
markedTreeLeafs.eStruct = DataStore.getGroupLeafId(tempCalcId);
}else
} else
markedTreeLeafs.eStruct = +tempCalcId;
if (calcWithHeat === undefined) markedTreeLeafs.thermalProps = null;
else if (DataStore.isInAnyNotDisabledGroup(calcWithHeat.calc_id)){
markedTreeLeafs.thermalProps = DataStore.getGroupLeafId(calcWithHeat.calc_id);
}else
if (calcWithHeat === undefined) {
markedTreeLeafs.thermalProps = null;
} else {
markedTreeLeafs.thermalProps = +calcWithHeat.calc_id;
}
let functionalHTML= '';
functionalMap.forEach((number,functional) => {
......
......@@ -536,7 +536,6 @@ class TreeLeafViewer {
if (thereIsWyckoffData) {
let wyckoffMap = new Map(); // Map(element, Array of pairArray[w-pos, coor])
console.log(response);
response.wyckoff_sets.forEach(d => {
// Only entries having items in .variables are included
let varsHtml = '';
......