From dda93f270c75910f5ba061000bdcf1db468121a5 Mon Sep 17 00:00:00 2001 From: "Hurtado, Iker (ikerh)" <iker.hurtado@bsc.es> Date: Tue, 5 Sep 2017 18:13:46 +0200 Subject: [PATCH] Bugfixing and 1D systems search enabled --- client/bundle-es5.js | 15 ++++----- client/bundle.js | 35 ++++++++++++++------- client/index.html | 3 +- client/src/common/util.js | 9 ++++-- client/src/material-mod/MaterialMod.js | 25 +++++++++------ client/src/search-mod/PropertiesBox.view.js | 1 + 6 files changed, 56 insertions(+), 32 deletions(-) diff --git a/client/bundle-es5.js b/client/bundle-es5.js index 4c306b61..e1302af6 100644 --- a/client/bundle-es5.js +++ b/client/bundle-es5.js @@ -68,7 +68,7 @@ return fArray;}function getCellDataForViewer(matData){var cellData={};cellData.n return html; }*/function m2Angstrom(dist){return(dist/1e-10).toFixed(3)+' Å';}function getLatticeAnglesValues(calcs,twoD){var lattParams=[0.0,0.0,0.0];calcs.forEach(function(calc){if(calc.lattice_parameters!==undefined&&calc.lattice_parameters!==null){var tempLattParams=getNumberArray(calc.lattice_parameters);lattParams[0]+=tempLattParams[3];lattParams[1]+=tempLattParams[4];lattParams[2]+=tempLattParams[5];}});if(twoD)return"\n\t <div>α = "+rad2degree(lattParams[0]/calcs.size)+"</div>";else return"\n\t <div>α = "+rad2degree(lattParams[0]/calcs.size)+"</div>\n\t <div>β = "+rad2degree(lattParams[1]/calcs.size)+"</div>\n\t <div>γ = "+rad2degree(lattParams[2]/calcs.size)+"</div>\n\t ";}function rad2degree(angle){return(angle*(180/Math.PI)).toFixed(0)+'°';}function m3ToAngstrom3(vol){return(vol/1e-30).toFixed(3)+' Å<sup>3</sup>';}function getAverage(array){var sum=0;for(var i=0;i<array.length;i++){sum+=array[i];}return sum/array.length;}function getQuantityStatsMap(calcs){var quantities=['volume','atomic_density','mass_density','lattice_a','lattice_b','lattice_c'];var labels=['Volume (ų)','Atomic density (Å⁻³)','Mass density (kg/m³)','a (Å)','b (Å)','c (Å)'];var quantitiesMap=new Map();if(calcs.values().next().value.cell_volume===null){// not bulk type volume of a calc null -quantities=['lattice_a','lattice_b','lattice_c'];labels=['a (Å)','b (Å)','c (Å)'];}quantities.forEach(function(quantity,index){var array=[];calcs.forEach(function(calc){var value=void 0;if(quantity==='volume')value=calc.cell_volume/1e-30;else if(quantity==='atomic_density')value=calc.atomic_density*1e-30;else if(quantity==='mass_density')value=calc.mass_density;else if(quantity.indexOf('lattice')>=0){var tempLattParams=getNumberArray(calc.lattice_parameters);if(quantity==='lattice_a')value=tempLattParams[0]/1e-10;else if(quantity==='lattice_b')value=tempLattParams[1]/1e-10;else if(quantity==='lattice_c')value=tempLattParams[2]/1e-10;}array.push(value);});var stats={};stats.data=array;stats.min=Math.min.apply(null,array);stats.max=Math.max.apply(null,array);stats.equal=stats.min===stats.max;var lls=labels[index].split(':');stats.label=lls[0];if(lls.length===2)stats.units=lls[1];else stats.units='';var decimals=3;if(quantity==='mass_density')decimals=1;stats.html=getAverage(stats.data).toFixed(decimals)+' <span style="font-size: 0.9em">['+stats.min.toFixed(decimals)+' , '+stats.max.toFixed(decimals)+']</span>';quantitiesMap.set(quantity,stats);});return quantitiesMap;}function toAngstromMinus3(density){return(density*1e-30).toFixed(3)+' Å<sup>-3</sup>';}function getMaterialTitleHTML(data){var title=getSubscriptedFormula(data.formula_reduced);if(data.space_group!==null)title+=' - space group '+data.space_group;//return '<span style="font-size: 0.9em">'+title+' </span>'; +quantities=['lattice_a','lattice_b','lattice_c'];labels=['a (Å)','b (Å)','c (Å)'];}quantities.forEach(function(quantity,index){var array=[];calcs.forEach(function(calc){var value=void 0;if(quantity==='volume')value=calc.cell_volume/1e-30;else if(quantity==='atomic_density')value=calc.atomic_density*1e-30;else if(quantity==='mass_density')value=calc.mass_density;else if(quantity.indexOf('lattice')>=0){var tempLattParams=getNumberArray(calc.lattice_parameters);if(quantity==='lattice_a')value=tempLattParams[0]/1e-10;else if(quantity==='lattice_b')value=tempLattParams[1]/1e-10;else if(quantity==='lattice_c')value=tempLattParams[2]/1e-10;}array.push(value);});var stats={};stats.data=array;stats.min=Math.min.apply(null,array);stats.max=Math.max.apply(null,array);stats.equal=stats.min===stats.max;var lls=labels[index].split(':');stats.label=lls[0];if(lls.length===2)stats.units=lls[1];else stats.units='';var decimals=3;if(quantity==='mass_density')decimals=1;stats.html=getAverage(stats.data).toFixed(decimals)+' <span style="font-size: 0.9em">['+stats.min.toFixed(decimals)+' , '+stats.max.toFixed(decimals)+']</span>';quantitiesMap.set(quantity,stats);});return quantitiesMap;}function toAngstromMinus3(density){return(density*1e-30).toFixed(3)+' Å<sup>-3</sup>';}function getMaterialTitle(data,html){var title=void 0;title=getSubscriptedFormula(data.formula_reduced);if(html!==undefined&&html===false)title=data.formula_reduced;if(data.space_group!==null)title+=' - space group '+data.space_group;//return '<span style="font-size: 0.9em">'+title+' </span>'; return title;}function getMinMaxHTML(calcs,prop){var propArray=[];calcs.forEach(function(calc){propArray.push(calc[prop]);});return'('+Math.min.apply(null,propArray)+' ... '+Math.max.apply(null,propArray)+')';}function generateDiagramSteps(maxVal){var d=4;// generates 0 and 4 more points var exp=-Math.floor(Math.log(maxVal/d)*Math.LOG10E);var factor=Math.pow(10,exp);//100; //console.log('util.generateDiagramSteps ',exp, maxVal/d, factor); @@ -90,7 +90,7 @@ exp=exp<0?0:exp;return[stepArray,exp];}/* } */module.exports={searchResults:searchResults,materialId:materialId,AUTH_REQUEST_HEADER_VALUE:AUTH_REQUEST_HEADER_VALUE,MAT_VIEW:MAT_VIEW,IMAGE_DIR:IMAGE_DIR,ELEMENTS:ELEMENTS,serverReq:serverReq,serverReqPOST:serverReqPOST,getSearchURL:getSearchURL,getSuggestionURL:getSuggestionURL,getMaterialURL:getMaterialURL,getMaterialCalcURL:getMaterialCalcURL,getMaterialXsURL:getMaterialXsURL,getCalcEnergiesURL:getCalcEnergiesURL,setBrowserHashPath:setBrowserHashPath,loadLib:loadLib,getNumberArray:getNumberArray,getCellDataForViewer:getCellDataForViewer,//FERMI_SURFACE_URL: FERMI_SURFACE_URL, BAND_STRUCT_EXAMPLE_URL:BAND_STRUCT_EXAMPLE_URL,J2eV:J2eV,eV2J:eV2J,//getBandGapStatsValue: getBandGapStatsValue, -m2Angstrom:m2Angstrom,getLatticeAnglesValues:getLatticeAnglesValues,rad2degree:rad2degree,m3ToAngstrom3:m3ToAngstrom3,getQuantityStatsMap:getQuantityStatsMap,toAngstromMinus3:toAngstromMinus3,getMaterialTitle:getMaterialTitleHTML,getMinMaxHTML:getMinMaxHTML,getSubscriptedFormula:getSubscriptedFormula,getAverage:getAverage,generateDiagramSteps:generateDiagramSteps};},/* 2 *//***/function(module,exports){var materialData=void 0;function setMaterialData(dataFromAPI){materialData=dataFromAPI;}function getMaterialData(){return materialData;}var calcs=void 0;var calcMap=new Map();function setCalculations(calcsFromAPI){calcs=calcsFromAPI;for(var i=0;i<calcs.length;i++){calcMap.set(calcs[i].id,calcs[i]);}}function getCalculations(){return calcs;}function getCalc(calcId){return calcMap.get(calcId);}var groups=void 0;function processCalcGroups(groupsFromAPI){var methodCalcsMap=new Map();groupsFromAPI.forEach(function(group,i){if(group.group_type!=='method'){var calcsMins=void 0;if(methodCalcsMap.has(group.method_hash)){calcsMins=methodCalcsMap.get(group.method_hash);}else{calcsMins={'ids':[],'minEnergies':[]};methodCalcsMap.set(group.method_hash,calcsMins);}calcsMins.ids.push(group.representative_calculation_id);calcsMins.minEnergies.push(group.energy_minimum);}});//console.log('methodCalcsMap', methodCalcsMap); +m2Angstrom:m2Angstrom,getLatticeAnglesValues:getLatticeAnglesValues,rad2degree:rad2degree,m3ToAngstrom3:m3ToAngstrom3,getQuantityStatsMap:getQuantityStatsMap,toAngstromMinus3:toAngstromMinus3,getMaterialTitle:getMaterialTitle,getMinMaxHTML:getMinMaxHTML,getSubscriptedFormula:getSubscriptedFormula,getAverage:getAverage,generateDiagramSteps:generateDiagramSteps};},/* 2 *//***/function(module,exports){var materialData=void 0;function setMaterialData(dataFromAPI){materialData=dataFromAPI;}function getMaterialData(){return materialData;}var calcs=void 0;var calcMap=new Map();function setCalculations(calcsFromAPI){calcs=calcsFromAPI;for(var i=0;i<calcs.length;i++){calcMap.set(calcs[i].id,calcs[i]);}}function getCalculations(){return calcs;}function getCalc(calcId){return calcMap.get(calcId);}var groups=void 0;function processCalcGroups(groupsFromAPI){var methodCalcsMap=new Map();groupsFromAPI.forEach(function(group,i){if(group.group_type!=='method'){var calcsMins=void 0;if(methodCalcsMap.has(group.method_hash)){calcsMins=methodCalcsMap.get(group.method_hash);}else{calcsMins={'ids':[],'minEnergies':[]};methodCalcsMap.set(group.method_hash,calcsMins);}calcsMins.ids.push(group.representative_calculation_id);calcsMins.minEnergies.push(group.energy_minimum);}});//console.log('methodCalcsMap', methodCalcsMap); var methodRepresentativeMap=new Map();methodCalcsMap.forEach(function(calcsData,methodHash){var minVal=Math.min.apply(null,calcsData.minEnergies);var index=calcsData.minEnergies.indexOf(minVal);methodRepresentativeMap.set(methodHash,calcsData.ids[index]);});//console.log('methodRepresentativeMap', methodRepresentativeMap); var calcsInGroups=new Map();groupsFromAPI.forEach(function(group,i){//console.log('GR', group.group_type, group.nr_of_calculations, group.representative_calculation_id); if(group.group_type!=='method'){(function(){var groupData={'calcs':new Set(),'method_representative':methodRepresentativeMap.get(group.method_hash)};calcsInGroups.set(getGroupTypeCode(group)+group.representative_calculation_id,groupData);//let calcSet = new Set(); // The representative is (not?) in the set @@ -131,11 +131,12 @@ var markedTreeLeafs={eStruct:null,thermalProps:null};var MaterialMod=function(){ // Structure detail section init this.structureDetails=new StructureDetails();this.structureDetails.attachAndSetEvents(this.element);// Electronic structure detail section init this.electronicStructDetails=new ElectronicStructDetails();this.electronicStructDetails.attachAndSetEvents(this.element);// Methodology detail section init -this.methodologyDetails=new MethodologyDetails();this.methodologyDetails.attachAndSetEvents(this.element);this.thermalDetails=new ThermalPropsDetails();this.thermalDetails.attachAndSetEvents(this.element);this.elasticDetails=new ElasticConstDetails();this.elasticDetails.attachAndSetEvents(this.element);this.currentDetailView=null;}_createClass(MaterialMod,[{key:"setMaterialView",value:function setMaterialView(data){if(materialData===null||materialData.id!==parseInt(data.id)){this._loadMaterial(data.id,data.view);}else this._setView(data.view);}},{key:"_setView",value:function _setView(view){//console.log('FFFFF setMaterialView: '+view); +this.methodologyDetails=new MethodologyDetails();this.methodologyDetails.attachAndSetEvents(this.element);this.thermalDetails=new ThermalPropsDetails();this.thermalDetails.attachAndSetEvents(this.element);this.elasticDetails=new ElasticConstDetails();this.elasticDetails.attachAndSetEvents(this.element);this.currentDetailView=null;}_createClass(MaterialMod,[{key:"setMaterialView",value:function setMaterialView(data){if(materialData===null||materialData.id!==parseInt(data.id)){this._loadMaterial(data.id,data.view);}else{this._setView(data.view);document.querySelector('title').innerHTML='NOMAD Encyclopedia - '+util.getMaterialTitle(DataStore.getMaterialData(),false);}}},{key:"_setView",value:function _setView(view){//console.log('FFFFF setMaterialView: '+view); // Hide the current view if(this.currentDetailView===null)this.overview.element.style.display='none';else this.currentDetailView.element.style.display='none';if(typeof view==='undefined'){// Overview view this.currentDetailView=null;this.overview.setVisible();//this.overview.element.style.display= 'block'; -this.navTree.setLeafMarkedListener(undefined);this._setCellViewer(this.overview.vizBox);}else this._setDetailView(util.MAT_VIEW[view]);}},{key:"_setCellViewer",value:function _setCellViewer(hostElement){if(this.structureViewer===null){this.structureViewer=new StructureViewerWrapper(hostElement);//CellViewer(hostElement);// +this.navTree.setLeafMarkedListener(undefined);this._setCellViewer(this.overview.vizBox);}else this._setDetailView(util.MAT_VIEW[view]);}},{key:"_setCellViewer",value:function _setCellViewer(hostElement){//console.log('_setCellViewer', this.structureViewer,materialData); +if(this.structureViewer===null){this.structureViewer=new StructureViewerWrapper(hostElement);//CellViewer(hostElement);// if(materialData!==null){// Case: landing at e. structure details page this.structureViewer.load(util.getCellDataForViewer(materialData));this.structureViewer.setMaterialId(materialData.id);}}else this.structureViewer.changeHostElement(hostElement);}},{key:"_setDetailView",value:function _setDetailView(view){var _this=this;// console.log('FFFFF _setDetailView: '+view); if(view===util.MAT_VIEW.structure){this.currentDetailView=this.structureDetails;this.navTree.showCalcsGraphDataAvalability(false);this.navTree.setHeight(250);this.navTree.setMarkedLeafIfNoneMarked(null);// Set the first leaf marked @@ -150,10 +151,10 @@ this.currentDetailView=this.thermalDetails;this.navTree.showCalcsGraphDataAvalab }*/this.currentDetailView.setVisible();//this.currentDetailView.element.style.display= 'block'; if(view===util.MAT_VIEW.structure)this._setCellViewer(this.structureDetails.vizBox);//this.currentDetailView.setMaterialData(materialData); //// WHY DOES It do always? this.currentDetailView.attachNavTree(this.navTree);this.currentDetailView.updateSelection(this.navTree.getTreeSelectedCalcs());this.currentDetailView.updateMarkedLeaf(this.navTree.getMarkedLeaf());this.navTree.setTreeSelectionListener(function(leafIds){_this.currentDetailView.updateSelection(leafIds);});this.navTree.setLeafMarkedListener(function(leafId){_this.currentDetailView.updateMarkedLeaf(leafId);});}},{key:"_loadMaterial",value:function _loadMaterial(matId,view){var _this2=this;this.overview.element.style.visibility='hidden';LoadingPopup.show();util.serverReq(util.getMaterialURL(matId),function(e1){materialData=JSON.parse(e1.target.response);util.materialId=materialData.id;if(e1.target.status===200){util.serverReq(util.getMaterialXsURL('elements',matId),function(e2){materialData.elements=JSON.parse(e2.target.response).results;util.serverReq(util.getMaterialXsURL('cells',matId),function(e3){var cells=JSON.parse(e3.target.response).results;if(!cells[0].is_primitive)materialData.cell=cells[0];else materialData.cell=cells[1];DataStore.setMaterialData(materialData);//console.log("CELLS: "+JSON.stringify(materialData.cell)); -document.querySelector('title').innerHTML='NOMAD Encyclopedia - Material '+util.getMaterialTitle(materialData);_this2.overview.setMaterialData();_this2.structureDetails.setMaterialData();_this2.electronicStructDetails.setMaterialData();_this2.methodologyDetails.setMaterialData();_this2.thermalDetails.setMaterialData();_this2.elasticDetails.setMaterialData();//console.log("MATDATA LOADED: "); +document.querySelector('title').innerHTML='NOMAD Encyclopedia - '+util.getMaterialTitle(materialData,false);_this2.overview.setMaterialData();_this2.structureDetails.setMaterialData();_this2.electronicStructDetails.setMaterialData();_this2.methodologyDetails.setMaterialData();_this2.thermalDetails.setMaterialData();_this2.elasticDetails.setMaterialData();//console.log("MATDATA LOADED: "); if(_this2.structureViewer!==null)_this2.structureViewer.load(util.getCellDataForViewer(materialData));util.serverReq(util.getMaterialXsURL('calculations',matId),function(e4){DataStore.setCalculations(JSON.parse(e4.target.response).results);util.serverReq(util.getMaterialXsURL('groups',matId),function(e5){DataStore.setGroups(JSON.parse(e5.target.response).groups);var name=materialData.material_name===null?materialData.formula:materialData.material_name;_this2.navTree.build(name);_this2.overview.setCalcsData(markedTreeLeafs);_this2.navTree.selectAll();//console.log('MaterialMod - thermalPropsDetailsTreeLeaf: ', markedTreeLeafs.thermalProps); _this2._setView(view);_this2.overview.element.style.visibility='visible';LoadingPopup.hide();});});});});}else{// Error - First request -}});}}]);return MaterialMod;}();var StructureViewerWrapper=function(){function StructureViewerWrapper(hostElement){var _this3=this;_classCallCheck(this,StructureViewerWrapper);this.hostElement=hostElement;this.viewer=new StructureViewer(hostElement);this.legendElement=document.createElement('div');this.legendElement.setAttribute('class','element-labels');this.legendElement.setAttribute('style','position: absolute; bottom: 50px; right: 0');this.hostElement.appendChild(this.legendElement);this.footerElement=document.createElement('div');this.footerElement.setAttribute('class','structure-viewer-legend');this.hostElement.appendChild(this.footerElement);this.footerElement.innerHTML="\n\n\t <div style=\"float: left; padding-right: 10px\" >\n\t <input type=\"checkbox\" class=\"show-axis\" checked> Show axis\n\t </div>\n\n\t <div style=\"float: left; padding-right: 20px\" >\n\t <input type=\"checkbox\" class=\"show-bonds\" checked> Show bonds\n\t </div>\n\n\t <div class=\"vr-download\" style=\"float: right\"> </div>\n\n\t <div style=\"float: right; padding-right: 20px\" >\n\t <button class=\"view-reset\"> RESET</button>\n\t </div>\n\n\n\t <div style=\"clear: both;\"></div>\n\t ";var axisCheckbox=this.footerElement.querySelector('.show-axis');axisCheckbox.addEventListener('click',function(e){_this3.viewer.toggleLatticeParameters(axisCheckbox.checked);});var bondsCheckbox=this.footerElement.querySelector('.show-bonds');bondsCheckbox.addEventListener('click',function(e){_this3.viewer.toggleBonds(bondsCheckbox.checked);});this.labelsContainer=this.hostElement.querySelector('.element-labels');this.vrLinksContainer=this.footerElement.querySelector('.vr-download');this.vrDropDown=new DropDown();this.vrLinksContainer.appendChild(this.vrDropDown.element);var resetButton=this.hostElement.querySelector('.view-reset');resetButton.addEventListener('click',function(e){_this3.viewer.reset();});}_createClass(StructureViewerWrapper,[{key:"load",value:function load(data){this.viewer.load(data);this.createElementLegend();}},{key:"setMaterialId",value:function setMaterialId(id){this.vrDropDown.setMaterialId(id);}},{key:"changeHostElement",value:function changeHostElement(hostElement){this.hostElement.removeChild(this.legendElement);this.hostElement.removeChild(this.footerElement);this.hostElement=hostElement;this.viewer.changeHostElement(hostElement);this.hostElement.appendChild(this.legendElement);this.hostElement.appendChild(this.footerElement);}},{key:"createElementLegend",value:function createElementLegend(){// Empty the old legend +}});}}]);return MaterialMod;}();var StructureViewerWrapper=function(){function StructureViewerWrapper(hostElement){var _this3=this;_classCallCheck(this,StructureViewerWrapper);this.hostElement=hostElement;this.viewer=new StructureViewer(hostElement);this.legendElement=document.createElement('div');this.legendElement.setAttribute('class','element-labels');this.legendElement.setAttribute('style','position: absolute; bottom: 50px; right: 0');this.hostElement.appendChild(this.legendElement);this.footerElement=document.createElement('div');this.footerElement.setAttribute('class','structure-viewer-legend');this.hostElement.appendChild(this.footerElement);this.footerElement.innerHTML="\n\n\t <div style=\"float: left; padding-right: 10px\" >\n\t <input type=\"checkbox\" class=\"show-axis\" checked> Show axis\n\t </div>\n\n\t <div style=\"float: left; padding-right: 20px\" >\n\t <input type=\"checkbox\" class=\"show-bonds\" checked> Show bonds\n\t </div>\n\n\t <div class=\"vr-download\" style=\"float: right\"> </div>\n\n\t <div style=\"float: right; padding-right: 20px\" >\n\t <button class=\"view-reset\"> RESET</button>\n\t </div>\n\n\n\t <div style=\"clear: both;\"></div>\n\t ";var axisCheckbox=this.footerElement.querySelector('.show-axis');axisCheckbox.addEventListener('click',function(e){_this3.viewer.toggleLatticeParameters(axisCheckbox.checked);});var bondsCheckbox=this.footerElement.querySelector('.show-bonds');bondsCheckbox.addEventListener('click',function(e){_this3.viewer.toggleBonds(bondsCheckbox.checked);});this.labelsContainer=this.hostElement.querySelector('.element-labels');this.vrLinksContainer=this.footerElement.querySelector('.vr-download');this.vrDropDown=new DropDown();this.vrLinksContainer.appendChild(this.vrDropDown.element);var resetButton=this.hostElement.querySelector('.view-reset');resetButton.addEventListener('click',function(e){_this3.viewer.reset();});}_createClass(StructureViewerWrapper,[{key:"load",value:function load(data){this.viewer.load(data);this.createElementLegend();}},{key:"setMaterialId",value:function setMaterialId(id){this.vrDropDown.setMaterialId(id);}},{key:"changeHostElement",value:function changeHostElement(hostElement){if(this.hostElement!==hostElement){this.hostElement.removeChild(this.legendElement);this.hostElement.removeChild(this.footerElement);this.hostElement=hostElement;this.viewer.changeHostElement(hostElement);this.hostElement.appendChild(this.legendElement);this.hostElement.appendChild(this.footerElement);}}},{key:"createElementLegend",value:function createElementLegend(){// Empty the old legend this.labelsContainer.innerHTML='';var elements=this.viewer.elements;// Create a list of elements var elementArray=[];for(var property in elements){if(elements.hasOwnProperty(property))elementArray.push([property,elements[property][0],elements[property][1]]);}// Sort by name elementArray.sort(function(a,b){if(a[0]<b[0])return-1;if(a[0]>b[0])return 1;return 0;});var svgElement=document.createElementNS("http://www.w3.org/2000/svg","svg");svgElement.setAttribute("width",50);svgElement.setAttribute("height",elementArray.length*25);this.labelsContainer.appendChild(svgElement);for(var i=0;i<elementArray.length;++i){var elementName=elementArray[i][0];//let elementColor = "#" + elementArray[i][1].toString(16); Lauri's bugfixing feb-2017 @@ -874,7 +875,7 @@ this.resultsContainer.innerHTML=html;InfoSys.addToInfoSystem(this.resultsContain } - */var PropertiesBox=function(){function PropertiesBox(){_classCallCheck(this,PropertiesBox);this.element=document.createElement('div');this.element.setAttribute("id",'search-properties-box');this.element.innerHTML="\n\t <div class=\"props-box-tabs-wrapper\" style=\"float: left; width: 25%; \">\n\n\t <div class=\"properties-box-tabs\" >\n\t <div data-tab=\"structure\" class=\"props-tab-selected\" >Structure </div>\n\t <div data-tab=\"results\">Properties </div>\n\t <div data-tab=\"method\">Method </div>\n\t <!-- <div class=\"contributors-tab\">Contributors </div> -->\n\t </div>\n\n\t </div>\n\n\t <div class=\"properties-box-panel\" style=\"float: left;width: 75%;height: 100%\">\n\n\t <div class=\"props-tab-panel-wrapper\" style=\"height: 86%\" >\n\n\t <div class=\"structure-panel props-tab-panel\" style=\"display: block\">\n\n\n\t <div style=\"float: left; width: 47%;\">\n\n\t <div class=\"field\">\n\t <div class=\"field-title\"><span info-sys-data=\"space-group\">Space group number</span></div>\n\t <input type=\"text\" class=\"space-group-field\">\n\t </div>\n\n\t <div class=\"field\">\n\t <div class=\"field-title\">System type</div>\n\t <input type=\"checkbox\" class=\"system-type-field\" value=\"bulk\"> Bulk<br>\n\t <input type=\"checkbox\" class=\"system-type-field\" value=\"2D\"> 2D<br>\n\t </div>\n\n\t <div class=\"field\">\n\t <div class=\"field-title\"><span info-sys-data=\"mass-density\">Mass density</span> <span style=\"font-weight: normal;\">(kg/m<sup>3</sup>)</span></div>\n\t <!-- <div class=\"test-slider\"> </div> -->\n\n\t Min: <input type=\"text\" class=\"mass-density-min-field\"> \n\t Max: <input type=\"text\" class=\"mass-density-max-field\">\n\n\t </div>\n\n\t </div>\n\n\t <div style=\"float: left; width: 5%;\"></div>\n\n\t <div style=\"float: right; width: 47%;\">\n\n\t <div class=\"field\">\n\t <div class=\"field-title\"><span info-sys-data=\"structure-type\">Structure type</span></div>\n\t <select class=\"structure-type-field\" style=\"max-width: 174px\">\n\t <option></option>\n\t </select>\n\t </div>\n\n\t <div class=\"field\">\n\t <div class=\"field-title\"><span info-sys-data=\"crystal-system\">Crystal system</span></div>\n\t <input type=\"checkbox\" class=\"crystal-system-field\" value=\"cubic\">\n\t <span info-sys-data=\"crystal-system.value:cubic\">Cubic</span><br>\n\t <input type=\"checkbox\" class=\"crystal-system-field\" value=\"hexagonal\">\n\t <span info-sys-data=\"crystal-system.value:hexagonal\">Hexagonal</span><br>\n\t <input type=\"checkbox\" class=\"crystal-system-field\" value=\"trigonal\">\n\t <span info-sys-data=\"crystal-system.value:trigonal\">Trigonal</span><br>\n\t <input type=\"checkbox\" class=\"crystal-system-field\" value=\"tetragonal\">\n\t <span info-sys-data=\"crystal-system.value:tetragonal\">Tetragonal</span><br>\n\t <input type=\"checkbox\" class=\"crystal-system-field\" value=\"orthorhombic\">\n\t <span info-sys-data=\"crystal-system.value:orthorhombic\">Orthorhombic</span><br>\n\t <input type=\"checkbox\" class=\"crystal-system-field\" value=\"monoclinic\">\n\t <span info-sys-data=\"crystal-system.value:monoclinic\">Monoclinic</span><br>\n\t <input type=\"checkbox\" class=\"crystal-system-field\" value=\"triclinic\">\n\t <span info-sys-data=\"crystal-system.value:triclinic\">Triclinic</span><br>\n\t </div>\n\n\t </div>\n\t <div style=\"clear: both;\"></div>\n\t </div>\n\n\t <div class=\"results-panel props-tab-panel\" >\n\t <div style=\"float: left; width: 47%;\">\n\n\t <div class=\"field\">\n\t <div class=\"field-title\"><span info-sys-data=\"band-gap\">Band gap</span> <span style=\"font-weight: normal;\">(eV)</span></div>\n\t Min: <input type=\"text\" class=\"band-gap-min-field\"> \n\t Max: <input type=\"text\" class=\"band-gap-max-field\">\n\t <!--\n\t <input type=\"range\" class=\"band-gap-slider\" min=\"5\" max=\"200\" step=\"5\" value=\"100\"/>\n\t <input type=\"range\" class=\"band-gap-slider\" min=\"5\" max=\"200\" step=\"5\" value=\"100\"/>\n\t -->\n\t </div>\n\n\t </div>\n\n\t <div style=\"float: left; width: 5%;\"> </div>\n\n\t <div style=\"float: right; width: 47%;\">\n\t <div class=\"field\" style=\"padding-top: 28px;\">\n\t <input type=\"radio\" name=\"band-gap-type\" value=\"d\"> Direct<br>\n\t <input type=\"radio\" name=\"band-gap-type\" value=\"i\"> Indirect<br>\n\t <input type=\"radio\" name=\"band-gap-type\" value=\"d/i\" checked> Both<br>\n\t </div>\n\n\n\t </div>\n\t <div style=\"clear: both;\"></div>\n\n\t <div class=\"field\" style=\"background-color: #CCC; padding: 10px;\">\n\t <div style=\"font-weight: bold; padding-bottom: 6px\" >Results containing...</div>\n\t <div style=\"float: left; width: 47%;\">\n\t <input type=\"checkbox\" class=\"has-band-structure-field\" value=\"Band structure\">\n\t <span info-sys-data=\"has-band-structure\">Band structure</span><br>\n\t <input type=\"checkbox\" class=\"has-dos-field\" value=\"DOS\">\n\t <span info-sys-data=\"has-dos\">DOS</span><br>\n\t <input type=\"checkbox\" class=\"has-fermi-surface-field\" value=\"Fermi surface\">\n\t <span info-sys-data=\"has-fermi-surface\">Fermi surface</span><br>\n\t </div>\n\t <div style=\"float: right; width: 47%;\">\n\t <input type=\"checkbox\" class=\"has-thermal-properties-field\" value=\"Thermal properties\">\n\t <span info-sys-data=\"has-thermal-properties\">Thermal properties</span>\n\t <br>\n\t <!-- <input type=\"checkbox\" class=\"results-containing-field\" value=\"EOS\" disabled>Equation of state<br>-->\n\t </div>\n\t <div style=\"clear: both;\"></div>\n\t </div>\n\n\t </div>\n\n\t <div class=\"method-panel props-tab-panel\" >\n\t <div style=\"float: left; width: 47%;\">\n\n\t <div class=\"field\">\n\t <div class=\"field-title\"><span info-sys-data=\"functional-type\">Functional type</span></div>\n\t <input type=\"checkbox\" class=\"functional-type-field\" value=\"LDA\">\n\t <span info-sys-data=\"functional-type.value:LDA\">LDA</span><br>\n\t <input type=\"checkbox\" class=\"functional-type-field\" value=\"GGA\">\n\t <span info-sys-data=\"functional-type.value:GGA\">GGA</span><br>\n\t <input type=\"checkbox\" class=\"functional-type-field\" value=\"meta-GGA\">\n\t <span info-sys-data=\"functional-type.value:meta-GGA\">meta-GGA</span><br>\n\t <input type=\"checkbox\" class=\"functional-type-field\" value=\"hybrid-GGA\">\n\t <span info-sys-data=\"functional-type.value:hybrid-GGA\">hybrid-GGA</span><br>\n\t <input type=\"checkbox\" class=\"functional-type-field\" value=\"hybrid-meta-GGA\">\n\t <span info-sys-data=\"functional-type.value:hybrid-meta-GGA\">hybrid-meta-GGA</span><br>\n\t <input type=\"checkbox\" class=\"functional-type-field\" value=\"HF\">\n\t <span info-sys-data=\"functional-type.value:HF\">HF</span><br>\n\t <input type=\"checkbox\" class=\"functional-type-field\" value=\"GW\">\n\t <span info-sys-data=\"functional-type.value:GW\">GW</span><br>\n\t </div>\n\n\t <div class=\"field\">\n\t <div class=\"field-title\"><span info-sys-data=\"code-name\">Code name</span></div>\n\t <select class=\"code-name-field\" >\n\t <option></option>\n\t </select>\n\t <!--\n\t <input type=\"checkbox\" class=\"code-name-field\" value=\"VASP\">VASP<br>\n\t <input type=\"checkbox\" class=\"code-name-field\" value=\"quantum-espresso\">Quantum Espresso<br>\n\t <input type=\"checkbox\" class=\"code-name-field\" value=\"FHI-aims\">FHI-aims<br>\n\t <input type=\"checkbox\" class=\"code-name-field\" value=\"exciting\">exciting<br>\n\t -->\n\t </div>\n\n\t </div>\n\n\t <div style=\"float: left; width: 5%;\"> </div>\n\n\t <div style=\"float: right; width: 47%;\">\n\t <div class=\"field\">\n\t <div class=\"field-title\"><span info-sys-data=\"basis-set-type\">Basis set</span></div>\n\t <input type=\"checkbox\" class=\"basis-set-type-field\" value=\"numeric AOs\">\n\t <span info-sys-data=\"basis-set-type.value:numeric AOs\">Numeric AOs</span><br>\n\t <input type=\"checkbox\" class=\"basis-set-type-field\" value=\"gaussians\">\n\t <span info-sys-data=\"basis-set-type.value:gaussians\">Gaussians</span><br>\n\t <input type=\"checkbox\" class=\"basis-set-type-field\" value=\"(L)APW+lo\">\n\t <span info-sys-data=\"basis-set-type.value:(L)APW+lo\">(L)APW+lo</span><br>\n\t <input type=\"checkbox\" class=\"basis-set-type-field\" value=\"plane waves\">\n\t <span info-sys-data=\"basis-set-type.value:plane waves\">Plane waves</span><br>\n\t </div>\n\t </div>\n\n\t <div style=\"clear: both;\"></div>\n\t </div>\n\n\t </div>\n\n\n\t <div class=\"properties-box-enter-button\" style=\"height: 14%\">\n\t <button disabled>Add to query</button>\n\t </div>\n\n\t </div>\n\n\t <div style=\"clear: both;\"></div>\n\t ";this.tabsElement=this.element.querySelector('.properties-box-tabs');this.tabSelected=this.element.querySelector('[data-tab="structure"]');this.tabPanelSelected=this.element.querySelector('.structure-panel');this.addButton=this.element.querySelector('.properties-box-enter-button button');var codeNameSelect=this.element.querySelector('.code-name-field');var r=util.serverReq(util.getSuggestionURL('code_name'),function(){//console.log('CODES', r.response); + */var PropertiesBox=function(){function PropertiesBox(){_classCallCheck(this,PropertiesBox);this.element=document.createElement('div');this.element.setAttribute("id",'search-properties-box');this.element.innerHTML="\n\t <div class=\"props-box-tabs-wrapper\" style=\"float: left; width: 25%; \">\n\n\t <div class=\"properties-box-tabs\" >\n\t <div data-tab=\"structure\" class=\"props-tab-selected\" >Structure </div>\n\t <div data-tab=\"results\">Properties </div>\n\t <div data-tab=\"method\">Method </div>\n\t <!-- <div class=\"contributors-tab\">Contributors </div> -->\n\t </div>\n\n\t </div>\n\n\t <div class=\"properties-box-panel\" style=\"float: left;width: 75%;height: 100%\">\n\n\t <div class=\"props-tab-panel-wrapper\" style=\"height: 86%\" >\n\n\t <div class=\"structure-panel props-tab-panel\" style=\"display: block\">\n\n\n\t <div style=\"float: left; width: 47%;\">\n\n\t <div class=\"field\">\n\t <div class=\"field-title\"><span info-sys-data=\"space-group\">Space group number</span></div>\n\t <input type=\"text\" class=\"space-group-field\">\n\t </div>\n\n\t <div class=\"field\">\n\t <div class=\"field-title\">System type</div>\n\t <input type=\"checkbox\" class=\"system-type-field\" value=\"bulk\"> Bulk<br>\n\t <input type=\"checkbox\" class=\"system-type-field\" value=\"2D\"> 2D<br>\n\t <input type=\"checkbox\" class=\"system-type-field\" value=\"1D\"> 1D<br>\n\t </div>\n\n\t <div class=\"field\">\n\t <div class=\"field-title\"><span info-sys-data=\"mass-density\">Mass density</span> <span style=\"font-weight: normal;\">(kg/m<sup>3</sup>)</span></div>\n\t <!-- <div class=\"test-slider\"> </div> -->\n\n\t Min: <input type=\"text\" class=\"mass-density-min-field\"> \n\t Max: <input type=\"text\" class=\"mass-density-max-field\">\n\n\t </div>\n\n\t </div>\n\n\t <div style=\"float: left; width: 5%;\"></div>\n\n\t <div style=\"float: right; width: 47%;\">\n\n\t <div class=\"field\">\n\t <div class=\"field-title\"><span info-sys-data=\"structure-type\">Structure type</span></div>\n\t <select class=\"structure-type-field\" style=\"max-width: 174px\">\n\t <option></option>\n\t </select>\n\t </div>\n\n\t <div class=\"field\">\n\t <div class=\"field-title\"><span info-sys-data=\"crystal-system\">Crystal system</span></div>\n\t <input type=\"checkbox\" class=\"crystal-system-field\" value=\"cubic\">\n\t <span info-sys-data=\"crystal-system.value:cubic\">Cubic</span><br>\n\t <input type=\"checkbox\" class=\"crystal-system-field\" value=\"hexagonal\">\n\t <span info-sys-data=\"crystal-system.value:hexagonal\">Hexagonal</span><br>\n\t <input type=\"checkbox\" class=\"crystal-system-field\" value=\"trigonal\">\n\t <span info-sys-data=\"crystal-system.value:trigonal\">Trigonal</span><br>\n\t <input type=\"checkbox\" class=\"crystal-system-field\" value=\"tetragonal\">\n\t <span info-sys-data=\"crystal-system.value:tetragonal\">Tetragonal</span><br>\n\t <input type=\"checkbox\" class=\"crystal-system-field\" value=\"orthorhombic\">\n\t <span info-sys-data=\"crystal-system.value:orthorhombic\">Orthorhombic</span><br>\n\t <input type=\"checkbox\" class=\"crystal-system-field\" value=\"monoclinic\">\n\t <span info-sys-data=\"crystal-system.value:monoclinic\">Monoclinic</span><br>\n\t <input type=\"checkbox\" class=\"crystal-system-field\" value=\"triclinic\">\n\t <span info-sys-data=\"crystal-system.value:triclinic\">Triclinic</span><br>\n\t </div>\n\n\t </div>\n\t <div style=\"clear: both;\"></div>\n\t </div>\n\n\t <div class=\"results-panel props-tab-panel\" >\n\t <div style=\"float: left; width: 47%;\">\n\n\t <div class=\"field\">\n\t <div class=\"field-title\"><span info-sys-data=\"band-gap\">Band gap</span> <span style=\"font-weight: normal;\">(eV)</span></div>\n\t Min: <input type=\"text\" class=\"band-gap-min-field\"> \n\t Max: <input type=\"text\" class=\"band-gap-max-field\">\n\t <!--\n\t <input type=\"range\" class=\"band-gap-slider\" min=\"5\" max=\"200\" step=\"5\" value=\"100\"/>\n\t <input type=\"range\" class=\"band-gap-slider\" min=\"5\" max=\"200\" step=\"5\" value=\"100\"/>\n\t -->\n\t </div>\n\n\t </div>\n\n\t <div style=\"float: left; width: 5%;\"> </div>\n\n\t <div style=\"float: right; width: 47%;\">\n\t <div class=\"field\" style=\"padding-top: 28px;\">\n\t <input type=\"radio\" name=\"band-gap-type\" value=\"d\"> Direct<br>\n\t <input type=\"radio\" name=\"band-gap-type\" value=\"i\"> Indirect<br>\n\t <input type=\"radio\" name=\"band-gap-type\" value=\"d/i\" checked> Both<br>\n\t </div>\n\n\n\t </div>\n\t <div style=\"clear: both;\"></div>\n\n\t <div class=\"field\" style=\"background-color: #CCC; padding: 10px;\">\n\t <div style=\"font-weight: bold; padding-bottom: 6px\" >Results containing...</div>\n\t <div style=\"float: left; width: 47%;\">\n\t <input type=\"checkbox\" class=\"has-band-structure-field\" value=\"Band structure\">\n\t <span info-sys-data=\"has-band-structure\">Band structure</span><br>\n\t <input type=\"checkbox\" class=\"has-dos-field\" value=\"DOS\">\n\t <span info-sys-data=\"has-dos\">DOS</span><br>\n\t <input type=\"checkbox\" class=\"has-fermi-surface-field\" value=\"Fermi surface\">\n\t <span info-sys-data=\"has-fermi-surface\">Fermi surface</span><br>\n\t </div>\n\t <div style=\"float: right; width: 47%;\">\n\t <input type=\"checkbox\" class=\"has-thermal-properties-field\" value=\"Thermal properties\">\n\t <span info-sys-data=\"has-thermal-properties\">Thermal properties</span>\n\t <br>\n\t <!-- <input type=\"checkbox\" class=\"results-containing-field\" value=\"EOS\" disabled>Equation of state<br>-->\n\t </div>\n\t <div style=\"clear: both;\"></div>\n\t </div>\n\n\t </div>\n\n\t <div class=\"method-panel props-tab-panel\" >\n\t <div style=\"float: left; width: 47%;\">\n\n\t <div class=\"field\">\n\t <div class=\"field-title\"><span info-sys-data=\"functional-type\">Functional type</span></div>\n\t <input type=\"checkbox\" class=\"functional-type-field\" value=\"LDA\">\n\t <span info-sys-data=\"functional-type.value:LDA\">LDA</span><br>\n\t <input type=\"checkbox\" class=\"functional-type-field\" value=\"GGA\">\n\t <span info-sys-data=\"functional-type.value:GGA\">GGA</span><br>\n\t <input type=\"checkbox\" class=\"functional-type-field\" value=\"meta-GGA\">\n\t <span info-sys-data=\"functional-type.value:meta-GGA\">meta-GGA</span><br>\n\t <input type=\"checkbox\" class=\"functional-type-field\" value=\"hybrid-GGA\">\n\t <span info-sys-data=\"functional-type.value:hybrid-GGA\">hybrid-GGA</span><br>\n\t <input type=\"checkbox\" class=\"functional-type-field\" value=\"hybrid-meta-GGA\">\n\t <span info-sys-data=\"functional-type.value:hybrid-meta-GGA\">hybrid-meta-GGA</span><br>\n\t <input type=\"checkbox\" class=\"functional-type-field\" value=\"HF\">\n\t <span info-sys-data=\"functional-type.value:HF\">HF</span><br>\n\t <input type=\"checkbox\" class=\"functional-type-field\" value=\"GW\">\n\t <span info-sys-data=\"functional-type.value:GW\">GW</span><br>\n\t </div>\n\n\t <div class=\"field\">\n\t <div class=\"field-title\"><span info-sys-data=\"code-name\">Code name</span></div>\n\t <select class=\"code-name-field\" >\n\t <option></option>\n\t </select>\n\t <!--\n\t <input type=\"checkbox\" class=\"code-name-field\" value=\"VASP\">VASP<br>\n\t <input type=\"checkbox\" class=\"code-name-field\" value=\"quantum-espresso\">Quantum Espresso<br>\n\t <input type=\"checkbox\" class=\"code-name-field\" value=\"FHI-aims\">FHI-aims<br>\n\t <input type=\"checkbox\" class=\"code-name-field\" value=\"exciting\">exciting<br>\n\t -->\n\t </div>\n\n\t </div>\n\n\t <div style=\"float: left; width: 5%;\"> </div>\n\n\t <div style=\"float: right; width: 47%;\">\n\t <div class=\"field\">\n\t <div class=\"field-title\"><span info-sys-data=\"basis-set-type\">Basis set</span></div>\n\t <input type=\"checkbox\" class=\"basis-set-type-field\" value=\"numeric AOs\">\n\t <span info-sys-data=\"basis-set-type.value:numeric AOs\">Numeric AOs</span><br>\n\t <input type=\"checkbox\" class=\"basis-set-type-field\" value=\"gaussians\">\n\t <span info-sys-data=\"basis-set-type.value:gaussians\">Gaussians</span><br>\n\t <input type=\"checkbox\" class=\"basis-set-type-field\" value=\"(L)APW+lo\">\n\t <span info-sys-data=\"basis-set-type.value:(L)APW+lo\">(L)APW+lo</span><br>\n\t <input type=\"checkbox\" class=\"basis-set-type-field\" value=\"plane waves\">\n\t <span info-sys-data=\"basis-set-type.value:plane waves\">Plane waves</span><br>\n\t </div>\n\t </div>\n\n\t <div style=\"clear: both;\"></div>\n\t </div>\n\n\t </div>\n\n\n\t <div class=\"properties-box-enter-button\" style=\"height: 14%\">\n\t <button disabled>Add to query</button>\n\t </div>\n\n\t </div>\n\n\t <div style=\"clear: both;\"></div>\n\t ";this.tabsElement=this.element.querySelector('.properties-box-tabs');this.tabSelected=this.element.querySelector('[data-tab="structure"]');this.tabPanelSelected=this.element.querySelector('.structure-panel');this.addButton=this.element.querySelector('.properties-box-enter-button button');var codeNameSelect=this.element.querySelector('.code-name-field');var r=util.serverReq(util.getSuggestionURL('code_name'),function(){//console.log('CODES', r.response); JSON.parse(r.response).code_name.forEach(function(codeName){codeNameSelect.innerHTML+='<option>'+codeName+'</option>';});});var structureTypeSelect=this.element.querySelector('.structure-type-field');var r1=util.serverReq(util.getSuggestionURL('structure_type'),function(){JSON.parse(r1.response).structure_type.forEach(function(structureType){structureTypeSelect.innerHTML+='<option>'+structureType+'</option>';});});InfoSys.addToInfoSystem(this.element);/* this.testSlider = this.element.querySelector('.test-slider'); console.log("TAB: ",this.testSlider); diff --git a/client/bundle.js b/client/bundle.js index 934353f4..aa5b4b54 100644 --- a/client/bundle.js +++ b/client/bundle.js @@ -499,8 +499,11 @@ } - function getMaterialTitleHTML(data){ - let title = getSubscriptedFormula(data.formula_reduced); + function getMaterialTitle(data, html){ + let title; + title = getSubscriptedFormula(data.formula_reduced); + if (html !== undefined && html ===false) title = data.formula_reduced; + if (data.space_group !== null) title += ' - space group '+data.space_group; //return '<span style="font-size: 0.9em">'+title+' </span>'; return title; @@ -586,7 +589,7 @@ m3ToAngstrom3: m3ToAngstrom3, getQuantityStatsMap: getQuantityStatsMap, toAngstromMinus3, - getMaterialTitle: getMaterialTitleHTML, + getMaterialTitle, getMinMaxHTML: getMinMaxHTML, getSubscriptedFormula: getSubscriptedFormula, getAverage, @@ -963,8 +966,12 @@ setMaterialView(data){ if (materialData === null || materialData.id !== parseInt(data.id) ){ this._loadMaterial(data.id, data.view); - }else + }else{ this._setView(data.view); + document.querySelector('title').innerHTML = 'NOMAD Encyclopedia - '+ + util.getMaterialTitle(DataStore.getMaterialData(), false); + } + } @@ -988,6 +995,7 @@ _setCellViewer(hostElement){ + //console.log('_setCellViewer', this.structureViewer,materialData); if (this.structureViewer === null){ this.structureViewer = new StructureViewerWrapper(hostElement);//CellViewer(hostElement);// if (materialData !== null){ // Case: landing at e. structure details page @@ -996,6 +1004,7 @@ } }else this.structureViewer.changeHostElement(hostElement); + } @@ -1076,7 +1085,7 @@ DataStore.setMaterialData(materialData); //console.log("CELLS: "+JSON.stringify(materialData.cell)); document.querySelector('title').innerHTML = - 'NOMAD Encyclopedia - Material '+util.getMaterialTitle(materialData); + 'NOMAD Encyclopedia - '+util.getMaterialTitle(materialData, false); this.overview.setMaterialData(); this.structureDetails.setMaterialData(); this.electronicStructDetails.setMaterialData(); @@ -1183,13 +1192,14 @@ } changeHostElement(hostElement){ - this.hostElement.removeChild(this.legendElement); - this.hostElement.removeChild(this.footerElement); - this.hostElement = hostElement; - this.viewer.changeHostElement(hostElement); - this.hostElement.appendChild(this.legendElement); - this.hostElement.appendChild(this.footerElement); - + if (this.hostElement !== hostElement){ + this.hostElement.removeChild(this.legendElement); + this.hostElement.removeChild(this.footerElement); + this.hostElement = hostElement; + this.viewer.changeHostElement(hostElement); + this.hostElement.appendChild(this.legendElement); + this.hostElement.appendChild(this.footerElement); + } } @@ -7480,6 +7490,7 @@ <div class="field-title">System type</div> <input type="checkbox" class="system-type-field" value="bulk"> Bulk<br> <input type="checkbox" class="system-type-field" value="2D"> 2D<br> + <input type="checkbox" class="system-type-field" value="1D"> 1D<br> </div> <div class="field"> diff --git a/client/index.html b/client/index.html index a597884e..73c21b27 100644 --- a/client/index.html +++ b/client/index.html @@ -52,7 +52,8 @@ </div> <div style="float: right; width: 16%;text-align: right; padding-top:5px; "> - <span style="vertical-align: middle;"> User </span> + <span style="vertical-align: middle;"> + Guest <a href="" target="_blank">(login)</a> </span> <img src="img/user.png" /> </div> diff --git a/client/src/common/util.js b/client/src/common/util.js index 5b8ae048..7fb224d4 100644 --- a/client/src/common/util.js +++ b/client/src/common/util.js @@ -282,8 +282,11 @@ function toAngstromMinus3(density){ } -function getMaterialTitleHTML(data){ - let title = getSubscriptedFormula(data.formula_reduced); +function getMaterialTitle(data, html){ + let title; + title = getSubscriptedFormula(data.formula_reduced); + if (html !== undefined && html ===false) title = data.formula_reduced; + if (data.space_group !== null) title += ' - space group '+data.space_group; //return '<span style="font-size: 0.9em">'+title+' </span>'; return title; @@ -369,7 +372,7 @@ module.exports = { m3ToAngstrom3: m3ToAngstrom3, getQuantityStatsMap: getQuantityStatsMap, toAngstromMinus3, - getMaterialTitle: getMaterialTitleHTML, + getMaterialTitle, getMinMaxHTML: getMinMaxHTML, getSubscriptedFormula: getSubscriptedFormula, getAverage, diff --git a/client/src/material-mod/MaterialMod.js b/client/src/material-mod/MaterialMod.js index bfd9f4fc..4398885c 100644 --- a/client/src/material-mod/MaterialMod.js +++ b/client/src/material-mod/MaterialMod.js @@ -58,8 +58,12 @@ class MaterialMod{ setMaterialView(data){ if (materialData === null || materialData.id !== parseInt(data.id) ){ this._loadMaterial(data.id, data.view); - }else + }else{ this._setView(data.view); + document.querySelector('title').innerHTML = 'NOMAD Encyclopedia - '+ + util.getMaterialTitle(DataStore.getMaterialData(), false); + } + } @@ -83,6 +87,7 @@ class MaterialMod{ _setCellViewer(hostElement){ + //console.log('_setCellViewer', this.structureViewer,materialData); if (this.structureViewer === null){ this.structureViewer = new StructureViewerWrapper(hostElement);//CellViewer(hostElement);// if (materialData !== null){ // Case: landing at e. structure details page @@ -91,6 +96,7 @@ class MaterialMod{ } }else this.structureViewer.changeHostElement(hostElement); + } @@ -171,7 +177,7 @@ class MaterialMod{ DataStore.setMaterialData(materialData); //console.log("CELLS: "+JSON.stringify(materialData.cell)); document.querySelector('title').innerHTML = - 'NOMAD Encyclopedia - Material '+util.getMaterialTitle(materialData); + 'NOMAD Encyclopedia - '+util.getMaterialTitle(materialData, false); this.overview.setMaterialData(); this.structureDetails.setMaterialData(); this.electronicStructDetails.setMaterialData(); @@ -278,13 +284,14 @@ class StructureViewerWrapper{ } changeHostElement(hostElement){ - this.hostElement.removeChild(this.legendElement); - this.hostElement.removeChild(this.footerElement); - this.hostElement = hostElement; - this.viewer.changeHostElement(hostElement); - this.hostElement.appendChild(this.legendElement); - this.hostElement.appendChild(this.footerElement); - + if (this.hostElement !== hostElement){ + this.hostElement.removeChild(this.legendElement); + this.hostElement.removeChild(this.footerElement); + this.hostElement = hostElement; + this.viewer.changeHostElement(hostElement); + this.hostElement.appendChild(this.legendElement); + this.hostElement.appendChild(this.footerElement); + } } diff --git a/client/src/search-mod/PropertiesBox.view.js b/client/src/search-mod/PropertiesBox.view.js index fc01fb21..7b9887eb 100644 --- a/client/src/search-mod/PropertiesBox.view.js +++ b/client/src/search-mod/PropertiesBox.view.js @@ -145,6 +145,7 @@ class PropertiesBox { <div class="field-title">System type</div> <input type="checkbox" class="system-type-field" value="bulk"> Bulk<br> <input type="checkbox" class="system-type-field" value="2D"> 2D<br> + <input type="checkbox" class="system-type-field" value="1D"> 1D<br> </div> <div class="field"> -- GitLab