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)+' &#197;';}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>&alpha; = "+rad2degree(lattParams[0]/calcs.size)+"</div>";else return"\n\t    <div>&alpha; = "+rad2degree(lattParams[0]/calcs.size)+"</div>\n\t    <div>&beta; = "+rad2degree(lattParams[1]/calcs.size)+"</div>\n\t    <div>&gamma; = "+rad2degree(lattParams[2]/calcs.size)+"</div>\n\t  ";}function rad2degree(angle){return(angle*(180/Math.PI)).toFixed(0)+'&deg;';}function m3ToAngstrom3(vol){return(vol/1e-30).toFixed(3)+' &#197;<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)+' &nbsp; <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)+' &#197;<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)+' &nbsp; <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)+' &#197;<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\">&nbsp;&nbsp;\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\">&nbsp;&nbsp;\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\">&nbsp;&nbsp;\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\">&nbsp;&nbsp;\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&nbsp;&nbsp;&nbsp;&nbsp; </span>
+        <span style="vertical-align: middle;">
+          Guest <a href=""  target="_blank">(login)</a> &nbsp;&nbsp;</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