Updated bundle.

client/bundle.js

@@ -188,7 +188,7 @@ eval("\n/**\n * Copyright 2016-2018 Iker Hurtado\n *\n * Licensed under the Apac
   \***************************************/
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
-eval("\n/**\n * Copyright 2016-2018 Iker Hurtado\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n */\n\n /*\n  This file create and holds the application data models.\n  It stores the data loaded from the backend (immutable).\n  In addition it creates app life-time entities for convenience\n */\nlet util = __webpack_require__(/*! ../common/util.js */ \"./src/common/util.js\");\n\nlet materialData;\nlet groups;\nlet calcsInGroups;\nlet calcs;\nlet representatives;\nlet idealizedStructure;\nlet calcMap = new Map();\nlet ready = false;\nlet hasThermal;\nlet hasElecStructure;\n\nfunction setMaterialData(dataFromAPI){\n  materialData = dataFromAPI;\n}\n\nfunction getMaterialData(){\n  return materialData;\n}\n\nfunction setIdealizedStructure(structure){\n  idealizedStructure = structure;\n}\n\nfunction getIdealizedStructure(){\n  return idealizedStructure;\n}\n\nfunction setCalculations(calcsFromAPI){\n\n  // Clean up null values already here.\n  calcs = calcsFromAPI.results;\n  calcs.forEach(function(calc, index) {\n    let functional_type = util.getDefault(calc.functional_type);\n    let core_electron_treatment = util.getDefault(calc.core_electron_treatment);\n    this[index].functional_type = functional_type;\n    this[index].core_electron_treatment = core_electron_treatment;\n  }, calcs);\n\n  representatives = calcsFromAPI.representatives;\n  for (let i = 0; i < calcs.length; i++) {\n    calcMap.set(calcs[i].calc_id, calcs[i]);\n  }\n\n  // Check what type of information is available\n  let calcWithBS = representatives.electronic_band_structure;\n  let calcWithDOS = representatives.electronic_dos;\n  let calcWithHeat = representatives.thermodynamical_properties;\n  hasElecStructure = (calcWithBS !== undefined || calcWithDOS !== undefined);\n  hasThermal = calcWithHeat !== undefined;\n}\n\nfunction getRepresentatives() {\n  return representatives;\n}\n\nfunction getCalculations(){\n  return calcs;\n}\n\nfunction getCalc(calcId){\n  return calcMap.get(calcId);\n}\n\n/**\n * Stores the group information from API into an easily accessible format.\n */\nfunction setGroups(groupsFromAPI) {\n  let mapEos = new Map(Object.entries(groupsFromAPI.groups_eos));\n  let mapPar = new Map(Object.entries(groupsFromAPI.groups_par));\n  groups = new Map();\n  groups.set(\"eos\", mapEos);\n  groups.set(\"par\", mapPar);\n  calcsInGroups = new Set();\n  mapEos.forEach((calculations, group_id) => {\n    calculations.forEach(calcsInGroups.add, calcsInGroups);\n  });\n}\n\nfunction getGroups() {\n  return groups;\n}\n\nfunction getGroupType(leafId) {\n  return leafId.substring(0, 3);\n}\n\nfunction isGroup(leafId) {\n  return (leafId.substring(0,4) === 'eos/' || leafId.substring(0,4) === 'par/');\n}\n\nfunction getReprCalc(leafId){\n  // For groups, the first calculation is the representative.\n  if (isGroup(leafId)) {\n    let type = getGroupType(leafId);\n    let groupId = getGroupId(leafId);\n    return groups.get(type).get(groupId)[0];\n  }\n  else return leafId;\n}\n\nfunction getGroupId(leafId) {\n  return leafId.substring(4);\n}\n\nfunction isReady(matId) {\n  if (materialData !== undefined) {\n    if (idealizedStructure !== undefined) {\n      if (calcs !== undefined) {\n        if (groups !== undefined) {\n          if (matId === materialData.material_id) {\n            return true;\n          }\n        }\n      }\n    }\n  }\n  return false;\n}\n\nfunction clear() {\n  materialData = undefined;\n  calcs = undefined;\n  groups = undefined;\n  idealizedStructure = undefined;\n}\n\nfunction isInAnyGroup(calcId){\n  return calcsInGroups.has(calcId);\n}\n\nfunction isInAnyNotDisabledGroup(calcId) {\n  return calcsInGroups.has(calcId);\n}\n\nfunction getGroupLeafId(calcId){\n  let leafId = null;\n  groups.forEach( (groupData, groupId) => {\n    if (groupData.calculation_set.has(calcId)) leafId = groupId;//return true;\n  });\n  return leafId;\n}\n\nfunction hasThermalData(bool) {\n  return hasThermal;\n}\n\nfunction hasElecStructureData(bool){\n  return hasElecStructure;\n}\n\n\n// EXPORTS\nmodule.exports = {\n  getRepresentatives,\n  setMaterialData,\n  getMaterialData,\n  getCalculations,\n  setCalculations,\n  getCalc,\n  getGroups,\n  setGroups,\n  getGroupId,\n  isGroup,\n  getGroupType,\n  getReprCalc,\n  isInAnyGroup,\n  isInAnyNotDisabledGroup,\n  getGroupLeafId,\n  isReady,\n  clear,\n  setIdealizedStructure,\n  getIdealizedStructure,\n  hasThermalData,\n  hasElecStructureData\n};\n\n\n//# sourceURL=webpack:///./src/material-mod/DataStore.js?");
+eval("\n/**\n * Copyright 2016-2018 Iker Hurtado\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n */\n\n /*\n  This file create and holds the application data models.\n  It stores the data loaded from the backend (immutable).\n  In addition it creates app life-time entities for convenience\n */\nlet util = __webpack_require__(/*! ../common/util.js */ \"./src/common/util.js\");\n\nlet materialData;\nlet groups;\nlet calcsInGroups;\nlet calcs;\nlet representatives;\nlet idealizedStructure;\nlet calcMap = new Map();\nlet ready = false;\nlet hasThermal;\nlet hasElecStructure;\nlet missing = false;\n\nfunction setMaterialData(dataFromAPI){\n  materialData = dataFromAPI;\n}\n\nfunction getMaterialData(){\n  return materialData;\n}\n\nfunction setMissing(value) {\n  missing = value;\n}\n\nfunction getMissing() {\n  return missing;\n}\n\nfunction setIdealizedStructure(structure){\n  idealizedStructure = structure;\n}\n\nfunction getIdealizedStructure(){\n  return idealizedStructure;\n}\n\nfunction setCalculations(calcsFromAPI){\n\n  // Clean up null values already here.\n  calcs = calcsFromAPI.results;\n  calcs.forEach(function(calc, index) {\n    let functional_type = util.getDefault(calc.functional_type);\n    let core_electron_treatment = util.getDefault(calc.core_electron_treatment);\n    this[index].functional_type = functional_type;\n    this[index].core_electron_treatment = core_electron_treatment;\n  }, calcs);\n\n  representatives = calcsFromAPI.representatives;\n  for (let i = 0; i < calcs.length; i++) {\n    calcMap.set(calcs[i].calc_id, calcs[i]);\n  }\n\n  // Check what type of information is available\n  let calcWithBS = representatives.electronic_band_structure;\n  let calcWithDOS = representatives.electronic_dos;\n  let calcWithHeat = representatives.thermodynamical_properties;\n  hasElecStructure = (calcWithBS !== undefined || calcWithDOS !== undefined);\n  hasThermal = calcWithHeat !== undefined;\n}\n\nfunction getRepresentatives() {\n  return representatives;\n}\n\nfunction getCalculations(){\n  return calcs;\n}\n\nfunction getCalc(calcId){\n  return calcMap.get(calcId);\n}\n\n/**\n * Stores the group information from API into an easily accessible format.\n */\nfunction setGroups(groupsFromAPI) {\n  let mapEos = new Map(Object.entries(groupsFromAPI.groups_eos));\n  let mapPar = new Map(Object.entries(groupsFromAPI.groups_par));\n  groups = new Map();\n  groups.set(\"eos\", mapEos);\n  groups.set(\"par\", mapPar);\n  calcsInGroups = new Set();\n  mapEos.forEach((calculations, group_id) => {\n    calculations.forEach(calcsInGroups.add, calcsInGroups);\n  });\n}\n\nfunction getGroups() {\n  return groups;\n}\n\nfunction getGroupType(leafId) {\n  return leafId.substring(0, 3);\n}\n\nfunction isGroup(leafId) {\n  return (leafId.substring(0,4) === 'eos/' || leafId.substring(0,4) === 'par/');\n}\n\nfunction getReprCalc(leafId){\n  // For groups, the first calculation is the representative.\n  if (isGroup(leafId)) {\n    let type = getGroupType(leafId);\n    let groupId = getGroupId(leafId);\n    return groups.get(type).get(groupId)[0];\n  }\n  else return leafId;\n}\n\nfunction getGroupId(leafId) {\n  return leafId.substring(4);\n}\n\nfunction isReady(matId) {\n  if (materialData !== undefined) {\n    if (missing && matId == materialData.material_id) {\n      return true;\n    }\n    if (idealizedStructure !== undefined) {\n      if (calcs !== undefined) {\n        if (groups !== undefined) {\n          if (matId === materialData.material_id) {\n            return true;\n          }\n        }\n      }\n    }\n  }\n  return false;\n}\n\nfunction clear() {\n  materialData = undefined;\n  calcs = undefined;\n  groups = undefined;\n  idealizedStructure = undefined;\n  missing = false;\n}\n\nfunction isInAnyGroup(calcId){\n  return calcsInGroups.has(calcId);\n}\n\nfunction isInAnyNotDisabledGroup(calcId) {\n  return calcsInGroups.has(calcId);\n}\n\nfunction getGroupLeafId(calcId){\n  let leafId = null;\n  groups.forEach( (groupData, groupId) => {\n    if (groupData.calculation_set.has(calcId)) leafId = groupId;//return true;\n  });\n  return leafId;\n}\n\nfunction hasThermalData(bool) {\n  return hasThermal;\n}\n\nfunction hasElecStructureData(bool){\n  return hasElecStructure;\n}\n\n\n// EXPORTS\nmodule.exports = {\n  getRepresentatives,\n  setMaterialData,\n  getMaterialData,\n  getCalculations,\n  setCalculations,\n  getCalc,\n  getGroups,\n  setGroups,\n  getGroupId,\n  isGroup,\n  getGroupType,\n  getReprCalc,\n  isInAnyGroup,\n  isInAnyNotDisabledGroup,\n  getGroupLeafId,\n  isReady,\n  setMissing,\n  getMissing,\n  clear,\n  setIdealizedStructure,\n  getIdealizedStructure,\n  hasThermalData,\n  hasElecStructureData\n};\n\n\n//# sourceURL=webpack:///./src/material-mod/DataStore.js?");
 
 /***/ }),
 
@@ -264,7 +264,7 @@ eval("\n/**\n * Copyright 2016-2018 Iker Hurtado\n *\n * Licensed under the Apac
   \*****************************************/
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
-eval("/**\n * Copyright 2016-2018 Iker Hurtado\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n */\n\n\n /*\n  This file implements the Material Module of the application.\n  It's a UI component container that displays the selected material information.\n  It's complex because of the amount and diversity of material info available.\n\n  In this file other two inner components of the module are implemented\n  (by convenience):\n  StructureViewerWrapper and DropDown (used exclusively in StructureViewerWrapper)\n */\n\n\nlet svg = __webpack_require__(/*! ../common/SVG.js */ \"./src/common/SVG.js\");\nlet util = __webpack_require__(/*! ../common/util.js */ \"./src/common/util.js\");\nlet NavTree = __webpack_require__(/*! ./NavTree.js */ \"./src/material-mod/NavTree.js\");\nlet Overview = __webpack_require__(/*! ./Overview.view.js */ \"./src/material-mod/Overview.view.js\");\nlet StructureDetails = __webpack_require__(/*! ./StructureDetails.view.js */ \"./src/material-mod/StructureDetails.view.js\");\nlet ElectronicStructDetails = __webpack_require__(/*! ./ElectronicStructDetails.view.js */ \"./src/material-mod/ElectronicStructDetails.view.js\");\nlet MethodologyDetails = __webpack_require__(/*! ./MethodologyDetails.view.js */ \"./src/material-mod/MethodologyDetails.view.js\");\nlet ThermalPropsDetails = __webpack_require__(/*! ./ThermalPropsDetails.view.js */ \"./src/material-mod/ThermalPropsDetails.view.js\");\nlet ElasticConstDetails = __webpack_require__(/*! ./ElasticConstDetails.view.js */ \"./src/material-mod/ElasticConstDetails.view.js\");\nlet DataStore = __webpack_require__(/*! ./DataStore.js */ \"./src/material-mod/DataStore.js\");\nlet LoadingPopup = __webpack_require__(/*! ../common/LoadingPopup.js */ \"./src/common/LoadingPopup.js\");\n\n\n// Store the default marked tree leafs\nlet markedTreeLeafs = { eStruct: null, thermalProps: null };\n\nclass MaterialMod {\n\n  constructor(){\n    this.element = document.createElement('div');\n    this.element.setAttribute(\"id\",'material-module');\n\n    this.overview = new Overview();\n    this.overview.attachAndSetEvents(this.element);\n\n    this.structureViewer = new StructureViewerWrapper(this.overview.vizBox);\n\n    this.structureDetails = new StructureDetails();\n    this.structureDetails.attachAndSetEvents(this.element);\n\n    this.electronicStructDetails = new ElectronicStructDetails();\n    this.electronicStructDetails.attachAndSetEvents(this.element);\n\n    this.methodologyDetails = new MethodologyDetails();\n    this.methodologyDetails.attachAndSetEvents(this.element);\n\n    this.thermalDetails = new ThermalPropsDetails();\n    this.thermalDetails.attachAndSetEvents(this.element);\n\n    this.elasticDetails = new ElasticConstDetails();\n    this.elasticDetails.attachAndSetEvents(this.element);\n\n    this.currentDetailView = null;\n  }\n\n  setMaterialView(data) {\n    this._loadMaterial(data.material_id, data.view);\n  }\n\n  getCurrentPageStatus(){\n\n    let tempeStructCalcs = null;\n    if (this.currentDetailView === null){\n      tempeStructCalcs = this.overview.getEStructChosenCalcs();\n    }\n\n    return {\n      pageId: this.currentDetailViewId,\n      eStructCalcs: tempeStructCalcs\n    };\n  }\n\n  _setView(view) {\n    // Hide the current view\n    if (this.currentDetailView === null) {\n      this.overview.element.style.display = 'none';\n    } else {\n      this.currentDetailView.element.style.display = 'none';\n    }\n\n    if (typeof view === 'undefined') { // Overview view\n      this.currentDetailView = null;\n      this.currentDetailViewId = null;\n      this.overview.setVisible();\n    } else {\n      this.currentDetailViewId = view;\n      this._setDetailView(util.MAT_VIEW[view]);\n    }\n  }\n\n  _setCellViewer(hostElement) {\n    this.structureViewer.changeHostElement(hostElement);\n  }\n\n  _setDetailView(view) {\n\n    // Set active view\n    if (view === util.MAT_VIEW.structure){\n      this.currentDetailView = this.structureDetails;\n    } else if (view === util.MAT_VIEW.electronicstruct) {\n      this.currentDetailView = this.electronicStructDetails;\n    } else if (view === util.MAT_VIEW.methodology) {\n      this.currentDetailView = this.methodologyDetails;\n    } else  if (view === util.MAT_VIEW.thermalprops) {\n      this.currentDetailView = this.thermalDetails;\n    } /* To be implemented\n    else{ // Elastic constants\n      this.currentDetailView = this.elasticDetails;\n      this.navTree.showCalcsGraphDataAvalability(false);\n      this.navTree.setHeight(600);\n      this.navTree.setMarkedLeafIfNoneMarked(null);\n    }*/\n    \n    // Show the view\n    this.currentDetailView.setVisible();\n  }\n\n  /**\n   * Called upon loading the overview page for a specific material.\n   */\n  _loadMaterial(matId, view) {\n\n    // Set to loading mode\n    this._setView(view);\n\n    let show = () => {\n      let materialData = DataStore.getMaterialData();\n      let idealizedStructure = DataStore.getIdealizedStructure();\n      // Cell viewer needs to be set only after page is visible so that it is\n      // resized correctly.\n      if (this.currentDetailView !== null) {\n        this.currentDetailView.load();\n        if (view === util.MAT_VIEW.structure) {\n          this._setCellViewer(this.structureDetails.vizBox);\n        }\n        if (view === util.MAT_VIEW.methodology) {\n          this.methodologyDetails.updateSelection();\n        }\n      } else {\n        document.querySelector('title').innerHTML =\n          'NOMAD Encyclopedia - '+util.getMaterialTitle(materialData, false);\n        this.overview.setMaterialData();\n        let name = (materialData.material_name === null ? materialData.formula : materialData.material_name);\n        this.overview.setCalcsData(markedTreeLeafs);\n        this._setCellViewer(this.overview.vizBox);\n      }\n    };\n    let isReady = () => {\n      let ready = DataStore.isReady(matId);\n      if (ready) {\n        show();\n      }\n      return ready;\n    };\n\n    // If material is already loaded, nothing fetched.\n    if (!isReady()) {\n      DataStore.clear();\n      LoadingPopup.reset();\n      this.structureViewer.axisCheckbox.checked = true;\n      this.structureViewer.bondsCheckbox.checked = true;\n      document.getElementById('methodology-ov').style.visibility = 'hidden';\n      document.getElementById('structure-ov').style.visibility = 'hidden';\n      document.getElementById('e-structure-ov').style.display = 'none';\n      document.getElementById('e-structure-ov').style.visibility = 'hidden';\n      document.getElementById('thermal-props-ov').style.visibility = 'hidden';\n\n      // Request basic material data\n      LoadingPopup.show(\"load_basic\");\n      util.serverReq(util.getMaterialURL(matId), e1 => {\n        let materialData = JSON.parse(e1.target.response);\n        DataStore.setMaterialData(materialData);\n        util.materialId = materialData.material_id;\n        isReady();\n        LoadingPopup.hide(\"load_basic\");\n      });\n\n      // Request basic details for all calculations related to this material\n      LoadingPopup.show(\"load_calculations\");\n      util.serverReq(util.getMaterialXsURL('calculations', matId), e4 => {\n        let calculations = JSON.parse(e4.target.response);\n        let representatives = calculations.representatives;\n        let idealId = representatives.idealized_structure;\n        DataStore.setCalculations(calculations);\n\n        // Get the idealized structure\n        //util.serverReq(util.getMaterialXsURL('idealized_structure', matId), e2 => {\n        let query = JSON.stringify({properties: [\"idealized_structure\"]});\n        LoadingPopup.show(\"load_idealized\");\n        util.serverReqPOST(util.getMaterialCalcURL(matId, idealId), query, e2 => {\n          let struct = JSON.parse(e2.target.response).idealized_structure;\n          DataStore.setIdealizedStructure(struct);\n          this.structureViewer.load(struct);\n          document.getElementById('structure-ov').style.visibility = 'visible';\n          document.getElementById('methodology-ov').style.visibility = 'visible';\n          isReady();\n          LoadingPopup.hide(\"load_idealized\");\n        });\n        LoadingPopup.hide(\"load_calculations\");\n      });\n\n      // Request groups\n      LoadingPopup.show(\"load_groups\");\n      util.serverReq(util.getMaterialXsURL('groups', matId), e5 => {\n        let groups = JSON.parse(e5.target.response);\n        DataStore.setGroups(groups);\n        isReady();\n        LoadingPopup.hide(\"load_groups\");\n      });\n    }\n\n  };\n} // class MaterialMod\n\n\n// Wrapper the structure viewer to be properly integrated\n// on the UI components showing it\nclass StructureViewerWrapper {\n\n  constructor(hostElement){\n    this.hostElement = hostElement;\n\n    let options = {\n      view: {\n        autoResize: false,\n        autoFit: true,\n        fitMargin: 0.5,\n      },\n      structure: {\n        createLegend: false,\n        showLegend: false,\n        radiusScale: 0.7,\n        bondScale: 1.5,\n        showCopies: true,\n        viewCenter: \"COP\",\n      }\n    };\n    this.viewer = new matviewer.StructureViewer(hostElement, options);\n\n    this.legendElement = document.createElement('div');\n    this.legendElement.setAttribute('class', 'element-labels');\n    this.legendElement.setAttribute('style', 'position: absolute; bottom: 50px; right: 0');\n    this.hostElement.appendChild(this.legendElement);\n\n    this.footerElement = document.createElement('div');\n    this.footerElement.setAttribute('class', 'structure-viewer-legend');\n    this.hostElement.appendChild(this.footerElement);\n    this.footerElement.innerHTML = `\n\n    <div style=\"float: left; padding-right: 12px\" >\n      <input type=\"checkbox\" class=\"show-axis\" checked> Show axis\n    </div>\n\n    <div style=\"float: left; padding-right: 18px\" >\n      <input type=\"checkbox\" class=\"show-bonds\" checked> Show bonds\n    </div>\n\n    <div style=\"float: left; position:relative;\" >\n      <img class=\"view-reset\" style=\"cursor: pointer;\" height=\"18px\"\n        src=\"${util.IMAGE_DIR}reset.svg\" />\n      <div class=\"view-reset-tooltip\" > Reset view </div>\n    </div>\n\n    <div class=\"vr-download\" style=\"float: right\"> </div>\n\n    <div style=\"clear: both;\"></div>\n    `;\n\n    this.axisCheckbox = this.footerElement.querySelector('.show-axis');\n    this.axisCheckbox.addEventListener('click', e => {\n      this.viewer.toggleLatticeParameters(this.axisCheckbox.checked);\n    });\n\n    this.bondsCheckbox = this.footerElement.querySelector('.show-bonds');\n    this.bondsCheckbox.addEventListener('click', e => {\n      this.viewer.toggleBonds(this.bondsCheckbox.checked);\n    });\n\n    this.labelsContainer = this.hostElement.querySelector('.element-labels');\n\n    //this.vrLinksContainer = this.footerElement.querySelector('.vr-download');\n    //this.vrDropDown = new DropDown();\n    //this.vrLinksContainer.appendChild(this.vrDropDown.element);\n\n    let resetButton = this.hostElement.querySelector('.view-reset');\n    resetButton.addEventListener('click', e =>  this.viewer.controls.reset() );\n\n    resetButton.addEventListener('mouseover', e => {\n      this.hostElement.querySelector('.view-reset-tooltip').style.display = 'block';\n    });\n    resetButton.addEventListener('mouseout', e => {\n      this.hostElement.querySelector('.view-reset-tooltip').style.display = 'none';\n    });\n  }\n\n  load(data) {\n    data = this.getCellDataForViewer(data);\n    this.viewer.load(data);\n    this.createElementLegend();\n  }\n\n  resizeCanvasToHostElement() {\n    this.viewer.resizeCanvasToHostElement();\n  }\n\n  setMaterialId(id){\n    //this.vrDropDown.setMaterialId(id);\n  }\n\n  changeHostElement(hostElement) {\n    if (this.hostElement !== hostElement){\n      this.hostElement.removeChild(this.legendElement);\n      this.hostElement.removeChild(this.footerElement);\n      this.hostElement = hostElement;\n      this.viewer.changeHostElement(hostElement);\n      this.hostElement.appendChild(this.legendElement);\n      this.hostElement.appendChild(this.footerElement);\n    }\n    this.viewer.resizeCanvasToHostElement();\n    this.viewer.fitToCanvas();\n    this.viewer.render();\n  }\n\n  getCellDataForViewer(struct){\n    let cellData = {};\n    cellData.pbc = struct.periodicity;\n    cellData.chemicalSymbols = struct.atom_labels;\n\n    // Convert to angstrom\n    cellData.cell = util.convert2d(struct.lattice_vectors, 1e10);\n    cellData.scaledPositions = struct.atom_positions;\n\n    return cellData;\n  }\n\n\n  createElementLegend() {\n    // Empty the old legend\n    this.labelsContainer.innerHTML = '';\n\n    // Create a list of elements\n    let elements = this.viewer.elements;\n    let elementArray = [];\n    for (let property in elements) {\n      if (elements.hasOwnProperty(property))\n        elementArray.push([property, elements[property][0], elements[property][1]]);\n    }\n\n    // Sort by name\n    elementArray.sort(function (a, b) {\n      if (a[0] < b[0]) return -1;\n      if (a[0] > b[0]) return 1;\n      return 0;\n    });\n\n    let svgElement = document.createElementNS(\"http://www.w3.org/2000/svg\", \"svg\");\n    svgElement.setAttribute(\"width\", 50);\n    svgElement.setAttribute(\"height\", elementArray.length*25);\n\n    this.labelsContainer.appendChild(svgElement);\n\n    for (let i = 0; i < elementArray.length; ++i) {\n      let elementName = elementArray[i][0];\n      let elementColor = elementArray[i][1].toString(16);\n      let nZeros = 6 - elementColor.length;\n      let prefix = \"#\" + Array(nZeros + 1).join(\"0\");\n      elementColor = prefix + elementColor;\n      svg.addCircle(svgElement, 10, 25*i+12, 8,  elementColor, \"#777\", 1);\n      svg.addText(svgElement,  24, 25*i+18, elementName, 'start', 'structure-viewer-legend-labels');\n    }\n  }\n} // class StructureViewerWrapper\n\n\n// used exclusively in StructureViewerWrapper\nclass DropDown {\n\n  constructor(materialId){\n    this.folded = true;\n    this.element = document.createElement('div');\n    //this.element.className = className;\n\n    this.element.innerHTML+=`\n      <div >\n        <span style=\" vertical-align: 30%; \">Virtual Reality files</span>\n        <img style=\"cursor: pointer\" src=\"${util.IMAGE_DIR}folded.png\" />\n      </div>\n\n      <div class=\"vr-download-panel\" style=\"position: relative; display: none\">\n\n      </div>\n    `;\n\n    // Focus related properties (in order to hide the box when the user click out)\n    this.element.tabIndex = '0'; // enabled the support of focusing\n    this.element.style.outline = 'none'; // The outline is not shown when it gains the focus\n\n    this.foldingPanel = this.element.querySelector('.vr-download-panel');\n    this.foldBtn = this.element.querySelector('img');\n\n    this.foldBtn.addEventListener('click', e => {\n      this.folded = !this.folded;\n      this.foldBtn.src = (this.folded ? util.IMAGE_DIR+'folded.png' :\n        util.IMAGE_DIR+'unfolded.png');\n      //this.foldBtn.className = (this.folded ? 'on' : 'off');\n      this.foldingPanel.style.display = (this.folded ? 'none' : 'block');\n    });\n\n    this.element.addEventListener('blur' , e => {\n      setTimeout(() => {\n        this.folded = true;\n        this.foldBtn.src = util.IMAGE_DIR+'folded.png';\n        this.foldingPanel.style.display = 'none';\n      }, 300);\n    });\n\n      //this.cellViewer.toggleLatticeParameters(false);\n  }\n\n  setMaterialId(id){\n    this.foldingPanel.innerHTML = `\n    <div class=\"vr-download-panel-unfolded\" style=\"width: 210px;\">\n      <div style=\"padding: 5px; \">\n        <a href=\"http://nomad.srv.lrz.de/cgi-bin/NOMAD/material?${id}\">Get VR file</a>\n      </div>\n      <br>\n      <div style=\"padding-bottom: 5px; \">Visualization tools for specific devices:</div>\n\n      <div style=\"padding: 5px; \">\n        <a href=\"http://nomad.srv.lrz.de/NOMAD/NOMADViveT-Setup.exe\">HTC Vive</a>\n      </div>\n      <!--\n      <div style=\"padding: 5px; \">\n        <a href=\"http://nomad.srv.lrz.de/NOMAD/NOMADGearvrT.apk\">Samsung GearVR</a>\n      </div>\n      -->\n      <div style=\"padding: 5px; \">\n        <a target=\"_blank\" href=\"https://play.google.com/store/apps/details?id=com.lrz.nomadvr\">Google Cardboard</a>\n      </div>\n\n    </div>\n    `;\n  }\n\n} // class DropDown\n\n\n// EXPORTS\nmodule.exports = MaterialMod;\n\n\n//# sourceURL=webpack:///./src/material-mod/MaterialMod.js?");
+eval("/**\n * Copyright 2016-2018 Iker Hurtado\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n */\n\n\n /*\n  This file implements the Material Module of the application.\n  It's a UI component container that displays the selected material information.\n  It's complex because of the amount and diversity of material info available.\n\n  In this file other two inner components of the module are implemented\n  (by convenience):\n  StructureViewerWrapper and DropDown (used exclusively in StructureViewerWrapper)\n */\n\n\nlet svg = __webpack_require__(/*! ../common/SVG.js */ \"./src/common/SVG.js\");\nlet util = __webpack_require__(/*! ../common/util.js */ \"./src/common/util.js\");\nlet NavTree = __webpack_require__(/*! ./NavTree.js */ \"./src/material-mod/NavTree.js\");\nlet Overview = __webpack_require__(/*! ./Overview.view.js */ \"./src/material-mod/Overview.view.js\");\nlet StructureDetails = __webpack_require__(/*! ./StructureDetails.view.js */ \"./src/material-mod/StructureDetails.view.js\");\nlet ElectronicStructDetails = __webpack_require__(/*! ./ElectronicStructDetails.view.js */ \"./src/material-mod/ElectronicStructDetails.view.js\");\nlet MethodologyDetails = __webpack_require__(/*! ./MethodologyDetails.view.js */ \"./src/material-mod/MethodologyDetails.view.js\");\nlet ThermalPropsDetails = __webpack_require__(/*! ./ThermalPropsDetails.view.js */ \"./src/material-mod/ThermalPropsDetails.view.js\");\nlet ElasticConstDetails = __webpack_require__(/*! ./ElasticConstDetails.view.js */ \"./src/material-mod/ElasticConstDetails.view.js\");\nlet DataStore = __webpack_require__(/*! ./DataStore.js */ \"./src/material-mod/DataStore.js\");\nlet LoadingPopup = __webpack_require__(/*! ../common/LoadingPopup.js */ \"./src/common/LoadingPopup.js\");\n\n\n// Store the default marked tree leafs\nlet markedTreeLeafs = { eStruct: null, thermalProps: null };\n\nclass MaterialMod {\n\n  constructor(){\n    this.element = document.createElement('div');\n    this.element.setAttribute(\"id\",'material-module');\n    this.missingPrompt = document.createElement('div');\n    this.missingPrompt.id = \"missing-prompt\";\n    this.element.appendChild(this.missingPrompt)\n\n    this.overview = new Overview();\n    this.overview.attachAndSetEvents(this.element);\n\n    this.structureViewer = new StructureViewerWrapper(this.overview.vizBox);\n\n    this.structureDetails = new StructureDetails();\n    this.structureDetails.attachAndSetEvents(this.element);\n\n    this.electronicStructDetails = new ElectronicStructDetails();\n    this.electronicStructDetails.attachAndSetEvents(this.element);\n\n    this.methodologyDetails = new MethodologyDetails();\n    this.methodologyDetails.attachAndSetEvents(this.element);\n\n    this.thermalDetails = new ThermalPropsDetails();\n    this.thermalDetails.attachAndSetEvents(this.element);\n\n    this.elasticDetails = new ElasticConstDetails();\n    this.elasticDetails.attachAndSetEvents(this.element);\n\n    this.currentDetailView = null;\n  }\n\n  setMaterialView(data) {\n    this._loadMaterial(data.material_id, data.view);\n  }\n\n  getCurrentPageStatus(){\n\n    let tempeStructCalcs = null;\n    if (this.currentDetailView === null){\n      tempeStructCalcs = this.overview.getEStructChosenCalcs();\n    }\n\n    return {\n      pageId: this.currentDetailViewId,\n      eStructCalcs: tempeStructCalcs\n    };\n  }\n\n  _setView(view) {\n    // Hide the current view\n    if (this.currentDetailView === null) {\n      this.overview.element.style.display = 'none';\n    } else {\n      this.currentDetailView.element.style.display = 'none';\n    }\n\n    if (typeof view === 'undefined') { // Overview view\n      this.currentDetailView = null;\n      this.currentDetailViewId = null;\n      this.overview.setVisible();\n    } else {\n      this.currentDetailViewId = view;\n      this._setDetailView(util.MAT_VIEW[view]);\n    }\n  }\n\n  _setCellViewer(hostElement) {\n    this.structureViewer.changeHostElement(hostElement);\n  }\n\n  _setDetailView(view) {\n\n    // Set active view\n    if (view === util.MAT_VIEW.structure){\n      this.currentDetailView = this.structureDetails;\n    } else if (view === util.MAT_VIEW.electronicstruct) {\n      this.currentDetailView = this.electronicStructDetails;\n    } else if (view === util.MAT_VIEW.methodology) {\n      this.currentDetailView = this.methodologyDetails;\n    } else  if (view === util.MAT_VIEW.thermalprops) {\n      this.currentDetailView = this.thermalDetails;\n    } /* To be implemented\n    else{ // Elastic constants\n      this.currentDetailView = this.elasticDetails;\n      this.navTree.showCalcsGraphDataAvalability(false);\n      this.navTree.setHeight(600);\n      this.navTree.setMarkedLeafIfNoneMarked(null);\n    }*/\n    \n    // Show the view\n    this.currentDetailView.setVisible();\n  }\n\n  /**\n   * Called upon loading the overview page for a specific material.\n   */\n  _loadMaterial(matId, view) {\n    let show = () => {\n      // Show error message if resource not found\n      const missingPrompt = document.getElementById(\"missing-prompt\");\n      if (DataStore.getMissing()) {\n        // Hide the current view\n        if (this.currentDetailView === null) {\n          this.overview.element.style.display = 'none';\n        } else {\n          this.currentDetailView.element.style.display = 'none';\n        }\n        const msg = `\n          Could not find information for material with identifier ${matId}.\n          Either the material does not exist or is not yet visible in the Encyclopedia.\n        `;\n        missingPrompt.textContent = msg;\n        missingPrompt.style.display = \"block\";\n      } else {\n        missingPrompt.style.display = \"none\";\n        this._setView(view);\n        let materialData = DataStore.getMaterialData();\n        let idealizedStructure = DataStore.getIdealizedStructure();\n        // Cell viewer needs to be set only after page is visible so that it is\n        // resized correctly.\n        if (this.currentDetailView !== null) {\n          this.currentDetailView.load();\n          if (view === util.MAT_VIEW.structure) {\n            this._setCellViewer(this.structureDetails.vizBox);\n          }\n          if (view === util.MAT_VIEW.methodology) {\n            this.methodologyDetails.updateSelection();\n          }\n        } else {\n          document.querySelector('title').innerHTML =\n            'NOMAD Encyclopedia - '+util.getMaterialTitle(materialData, false);\n          this.overview.setMaterialData();\n          let name = (materialData.material_name === null ? materialData.formula : materialData.material_name);\n          this.overview.setCalcsData(markedTreeLeafs);\n          this._setCellViewer(this.overview.vizBox);\n        }\n      }\n    };\n    let isReady = () => {\n      let ready = DataStore.isReady(matId);\n      if (ready) {\n        show();\n      }\n      return ready;\n    };\n\n    // If material is already loaded, nothing fetched.\n    if (!isReady()) {\n      DataStore.clear();\n      this.overview.clearCalcsData();\n      LoadingPopup.reset();\n      this.structureViewer.axisCheckbox.checked = true;\n      this.structureViewer.bondsCheckbox.checked = true;\n      document.getElementById('methodology-ov').style.visibility = 'hidden';\n      document.getElementById('structure-ov').style.visibility = 'hidden';\n      document.getElementById('e-structure-ov').style.display = 'none';\n      document.getElementById('e-structure-ov').style.visibility = 'hidden';\n      document.getElementById('thermal-props-ov').style.visibility = 'hidden';\n\n      // Request basic material data\n      LoadingPopup.show(\"load_basic\");\n      util.serverReq(util.getMaterialURL(matId), e1 => {\n        // Check for error\n        let stat = e1.target.status;\n        if (stat >= 400 && stat < 500) {\n          DataStore.setMissing(true);\n          DataStore.setMaterialData({material_id: matId});\n        } else {\n          let materialData = JSON.parse(e1.target.response);\n          DataStore.setMaterialData(materialData);\n          util.materialId = materialData.material_id;\n        }\n        isReady();\n        LoadingPopup.hide(\"load_basic\");\n      });\n\n      // Request basic details for all calculations related to this material\n      LoadingPopup.show(\"load_calculations\");\n      util.serverReq(util.getMaterialXsURL('calculations', matId), e4 => {\n        // Check for error\n        let stat = e4.target.status;\n        if (stat >= 400 && stat < 500) {\n          DataStore.setMissing(true);\n        } else {\n          let calculations = JSON.parse(e4.target.response);\n          let representatives = calculations.representatives;\n          let idealId = representatives.idealized_structure;\n          DataStore.setCalculations(calculations);\n\n          // Get the idealized structure\n          //util.serverReq(util.getMaterialXsURL('idealized_structure', matId), e2 => {\n          let query = JSON.stringify({properties: [\"idealized_structure\"]});\n          LoadingPopup.show(\"load_idealized\");\n          util.serverReqPOST(util.getMaterialCalcURL(matId, idealId), query, e2 => {\n            // Check for error\n            let stat = e2.target.status;\n            if (stat >= 400 && stat < 500) {\n              DataStore.setMissing(true);\n            } else {\n              let struct = JSON.parse(e2.target.response).idealized_structure;\n              DataStore.setIdealizedStructure(struct);\n              this.structureViewer.load(struct);\n              document.getElementById('structure-ov').style.visibility = 'visible';\n              document.getElementById('methodology-ov').style.visibility = 'visible';\n            }\n            isReady();\n            LoadingPopup.hide(\"load_idealized\");\n          });\n        }\n        LoadingPopup.hide(\"load_calculations\");\n      });\n\n      // Request groups\n      LoadingPopup.show(\"load_groups\");\n      util.serverReq(util.getMaterialXsURL('groups', matId), e5 => {\n        // Check for error\n        let stat = e5.target.status;\n        if (stat >= 400 && stat < 500) {\n          DataStore.setMissing(true);\n        } else {\n          let groups = JSON.parse(e5.target.response);\n          DataStore.setGroups(groups);\n        }\n        isReady();\n        LoadingPopup.hide(\"load_groups\");\n      });\n    }\n\n  };\n} // class MaterialMod\n\n\n// Wrapper the structure viewer to be properly integrated\n// on the UI components showing it\nclass StructureViewerWrapper {\n\n  constructor(hostElement){\n    this.hostElement = hostElement;\n\n    let options = {\n      view: {\n        autoResize: false,\n        autoFit: true,\n        fitMargin: 0.5,\n      },\n      structure: {\n        createLegend: false,\n        showLegend: false,\n        radiusScale: 0.7,\n        bondScale: 1.5,\n        showCopies: true,\n        viewCenter: \"COP\",\n      }\n    };\n    this.viewer = new matviewer.StructureViewer(hostElement, options);\n\n    this.legendElement = document.createElement('div');\n    this.legendElement.setAttribute('class', 'element-labels');\n    this.legendElement.setAttribute('style', 'position: absolute; bottom: 50px; right: 0');\n    this.hostElement.appendChild(this.legendElement);\n\n    this.footerElement = document.createElement('div');\n    this.footerElement.setAttribute('class', 'structure-viewer-legend');\n    this.hostElement.appendChild(this.footerElement);\n    this.footerElement.innerHTML = `\n\n    <div style=\"float: left; padding-right: 12px\" >\n      <input type=\"checkbox\" class=\"show-axis\" checked> Show axis\n    </div>\n\n    <div style=\"float: left; padding-right: 18px\" >\n      <input type=\"checkbox\" class=\"show-bonds\" checked> Show bonds\n    </div>\n\n    <div style=\"float: left; position:relative;\" >\n      <img class=\"view-reset\" style=\"cursor: pointer;\" height=\"18px\"\n        src=\"${util.IMAGE_DIR}reset.svg\" />\n      <div class=\"view-reset-tooltip\" > Reset view </div>\n    </div>\n\n    <div class=\"vr-download\" style=\"float: right\"> </div>\n\n    <div style=\"clear: both;\"></div>\n    `;\n\n    this.axisCheckbox = this.footerElement.querySelector('.show-axis');\n    this.axisCheckbox.addEventListener('click', e => {\n      this.viewer.toggleLatticeParameters(this.axisCheckbox.checked);\n    });\n\n    this.bondsCheckbox = this.footerElement.querySelector('.show-bonds');\n    this.bondsCheckbox.addEventListener('click', e => {\n      this.viewer.toggleBonds(this.bondsCheckbox.checked);\n    });\n\n    this.labelsContainer = this.hostElement.querySelector('.element-labels');\n\n    //this.vrLinksContainer = this.footerElement.querySelector('.vr-download');\n    //this.vrDropDown = new DropDown();\n    //this.vrLinksContainer.appendChild(this.vrDropDown.element);\n\n    let resetButton = this.hostElement.querySelector('.view-reset');\n    resetButton.addEventListener('click', e =>  this.viewer.controls.reset() );\n\n    resetButton.addEventListener('mouseover', e => {\n      this.hostElement.querySelector('.view-reset-tooltip').style.display = 'block';\n    });\n    resetButton.addEventListener('mouseout', e => {\n      this.hostElement.querySelector('.view-reset-tooltip').style.display = 'none';\n    });\n  }\n\n  load(data) {\n    data = this.getCellDataForViewer(data);\n    this.viewer.load(data);\n    this.createElementLegend();\n  }\n\n  resizeCanvasToHostElement() {\n    this.viewer.resizeCanvasToHostElement();\n  }\n\n  setMaterialId(id){\n    //this.vrDropDown.setMaterialId(id);\n  }\n\n  changeHostElement(hostElement) {\n    if (this.hostElement !== hostElement){\n      this.hostElement.removeChild(this.legendElement);\n      this.hostElement.removeChild(this.footerElement);\n      this.hostElement = hostElement;\n      this.viewer.changeHostElement(hostElement);\n      this.hostElement.appendChild(this.legendElement);\n      this.hostElement.appendChild(this.footerElement);\n    }\n    this.viewer.resizeCanvasToHostElement();\n    this.viewer.fitToCanvas();\n    this.viewer.render();\n  }\n\n  getCellDataForViewer(struct){\n    let cellData = {};\n    cellData.pbc = struct.periodicity;\n    cellData.chemicalSymbols = struct.atom_labels;\n\n    // Convert to angstrom\n    cellData.cell = util.convert2d(struct.lattice_vectors, 1e10);\n    cellData.scaledPositions = struct.atom_positions;\n\n    return cellData;\n  }\n\n\n  createElementLegend() {\n    // Empty the old legend\n    this.labelsContainer.innerHTML = '';\n\n    // Create a list of elements\n    let elements = this.viewer.elements;\n    let elementArray = [];\n    for (let property in elements) {\n      if (elements.hasOwnProperty(property))\n        elementArray.push([property, elements[property][0], elements[property][1]]);\n    }\n\n    // Sort by name\n    elementArray.sort(function (a, b) {\n      if (a[0] < b[0]) return -1;\n      if (a[0] > b[0]) return 1;\n      return 0;\n    });\n\n    let svgElement = document.createElementNS(\"http://www.w3.org/2000/svg\", \"svg\");\n    svgElement.setAttribute(\"width\", 50);\n    svgElement.setAttribute(\"height\", elementArray.length*25);\n\n    this.labelsContainer.appendChild(svgElement);\n\n    for (let i = 0; i < elementArray.length; ++i) {\n      let elementName = elementArray[i][0];\n      let elementColor = elementArray[i][1].toString(16);\n      let nZeros = 6 - elementColor.length;\n      let prefix = \"#\" + Array(nZeros + 1).join(\"0\");\n      elementColor = prefix + elementColor;\n      svg.addCircle(svgElement, 10, 25*i+12, 8,  elementColor, \"#777\", 1);\n      svg.addText(svgElement,  24, 25*i+18, elementName, 'start', 'structure-viewer-legend-labels');\n    }\n  }\n} // class StructureViewerWrapper\n\n\n// used exclusively in StructureViewerWrapper\nclass DropDown {\n\n  constructor(materialId){\n    this.folded = true;\n    this.element = document.createElement('div');\n    //this.element.className = className;\n\n    this.element.innerHTML+=`\n      <div >\n        <span style=\" vertical-align: 30%; \">Virtual Reality files</span>\n        <img style=\"cursor: pointer\" src=\"${util.IMAGE_DIR}folded.png\" />\n      </div>\n\n      <div class=\"vr-download-panel\" style=\"position: relative; display: none\">\n\n      </div>\n    `;\n\n    // Focus related properties (in order to hide the box when the user click out)\n    this.element.tabIndex = '0'; // enabled the support of focusing\n    this.element.style.outline = 'none'; // The outline is not shown when it gains the focus\n\n    this.foldingPanel = this.element.querySelector('.vr-download-panel');\n    this.foldBtn = this.element.querySelector('img');\n\n    this.foldBtn.addEventListener('click', e => {\n      this.folded = !this.folded;\n      this.foldBtn.src = (this.folded ? util.IMAGE_DIR+'folded.png' :\n        util.IMAGE_DIR+'unfolded.png');\n      //this.foldBtn.className = (this.folded ? 'on' : 'off');\n      this.foldingPanel.style.display = (this.folded ? 'none' : 'block');\n    });\n\n    this.element.addEventListener('blur' , e => {\n      setTimeout(() => {\n        this.folded = true;\n        this.foldBtn.src = util.IMAGE_DIR+'folded.png';\n        this.foldingPanel.style.display = 'none';\n      }, 300);\n    });\n\n      //this.cellViewer.toggleLatticeParameters(false);\n  }\n\n  setMaterialId(id){\n    this.foldingPanel.innerHTML = `\n    <div class=\"vr-download-panel-unfolded\" style=\"width: 210px;\">\n      <div style=\"padding: 5px; \">\n        <a href=\"http://nomad.srv.lrz.de/cgi-bin/NOMAD/material?${id}\">Get VR file</a>\n      </div>\n      <br>\n      <div style=\"padding-bottom: 5px; \">Visualization tools for specific devices:</div>\n\n      <div style=\"padding: 5px; \">\n        <a href=\"http://nomad.srv.lrz.de/NOMAD/NOMADViveT-Setup.exe\">HTC Vive</a>\n      </div>\n      <!--\n      <div style=\"padding: 5px; \">\n        <a href=\"http://nomad.srv.lrz.de/NOMAD/NOMADGearvrT.apk\">Samsung GearVR</a>\n      </div>\n      -->\n      <div style=\"padding: 5px; \">\n        <a target=\"_blank\" href=\"https://play.google.com/store/apps/details?id=com.lrz.nomadvr\">Google Cardboard</a>\n      </div>\n\n    </div>\n    `;\n  }\n\n} // class DropDown\n\n\n// EXPORTS\nmodule.exports = MaterialMod;\n\n\n//# sourceURL=webpack:///./src/material-mod/MaterialMod.js?");
 
 /***/ }),
 
@@ -297,7 +297,7 @@ eval("\n/**\n * Copyright 2016-2018 Iker Hurtado\n *\n * Licensed under the Apac
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
 "use strict";
-eval("\n/**\n * Copyright 2016-2018 Iker Hurtado\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n */\n\n\n /*\n  This file implements the Overview view component in the  Material Module.\n */\n\n\n\n\nlet util = __webpack_require__(/*! ../common/util.js */ \"./src/common/util.js\");\nlet InfoSys = __webpack_require__(/*! ../common/InfoSys.js */ \"./src/common/InfoSys.js\");\nlet LoadingPopup = __webpack_require__(/*! ../common/LoadingPopup.js */ \"./src/common/LoadingPopup.js\");\n\nlet BSPlotter = __webpack_require__(/*! ./BSPlotter.js */ \"./src/material-mod/BSPlotter.js\");\nlet DOSPlotter = __webpack_require__(/*! ./DOSPlotter.js */ \"./src/material-mod/DOSPlotter.js\");\nlet HeatCapPlotter = __webpack_require__(/*! ./HeatCapPlotter.js */ \"./src/material-mod/HeatCapPlotter.js\");\nlet MaterialMod = __webpack_require__(/*! ./MaterialMod.js */ \"./src/material-mod/MaterialMod.js\");\nlet DataStore = __webpack_require__(/*! ./DataStore.js */ \"./src/material-mod/DataStore.js\");\nlet SimilarityFinder = __webpack_require__(/*! ./Similarity.js */ \"./src/material-mod/Similarity.js\").SimilarityFinder;\n\nconst ELEMENT_INCLUDED_MSG = 'ELEMENT ALREADY INCLUDED';\n\n\nclass Overview {\n\n  constructor() {\n\n    this.element = document.createElement('div');\n    this.element.setAttribute('id','overview');\n    this.materialId;\n    let bsLoaded = false;\n    let phononLoaded = false;\n    let dosLoaded = false;\n    this.calcMaterialId = null;\n    this.element.innerHTML=`\n\n    <div class=\"material-title\">\n    </div>\n\n    <div style=\"float: left; width: 40%;\">\n\n      <div id=\"structure-ov\" class=\"view-box\">\n        <div class=\"title\">Structure\n          <img style=\"float: right\" class=\"to-detail\" src=\"img/more.svg\" />\n          <div style=\"clear: both;\"></div>\n        </div>\n\n        <div class=\"viz-box-container\" style=\"height: 260px; position: relative\">\n          <div class=\"viz-box\" style=\"height: 90%\"></div>\n        </div>\n\n        <div class=\"footer\">\n          <div ><b><span>Material type</span></b>:\n            <span class=\"material-type-field\" ></span>\n          </div>\n          <div class=\"space-group-field\" style=\"display: none\">\n            <b><span info-sys-data=\"space-group\">Space group</span></b>:\n            <span class=\"space-group-value\" ></span>\n          </div>\n          <div class=\"structure-type-field\" style=\"display: none\">\n            <b><span info-sys-data=\"structure-type\">Structure type</span></b>:\n            <span class=\"structure-type-value\" ></span>\n          </div>\n        </div>\n      </div>\n\n\n<!-- ***** Elastic Constants Box\n\n      <div id=\"elastic-ov\" class=\"view-box\">\n        <div class=\"title\">Elastic constants\n          <img style=\"float: right\" class=\"to-detail\" src=\"img/more.svg\" />\n          <div style=\"clear: both;\"></div>\n        </div>\n\n        <div class=\"info-fields\">\n          Not analyzed yet\n        </div>\n\n      </div>\n-->\n\n\n      <div id=\"methodology-ov\" class=\"view-box\">\n        <div class=\"title\">Methodology\n          <img style=\"float: right\" class=\"to-detail\" src=\"img/more.svg\" />\n          <div style=\"clear: both;\"></div>\n        </div>\n\n        <div class=\"info-fields\">\n\n          <div class=\"info-fields-label\" > Available calculations </div>\n\n          <div style=\"float: left; width: 45%\" >\n            <b><span info-sys-data=\"functional-type\">Functional</span></b>\n            <div class=\"functional-field\" > </div>\n          </div>\n          <div style=\"float: right; width: 45%\" >\n            <b><span info-sys-data=\"code-name\">Code</span></b>\n            <div class=\"code-field\"> </div>\n           </div>\n           <div style=\"clear: both;\"></div>\n        </div>\n\n      </div>\n\n    </div>\n\n    <div style=\"float: right; width: 60%;\">\n\n      <div id=\"e-structure-ov\" class=\"view-box\" style=\"display: block\">\n        <div class=\"title\">Electronic structure\n          <img style=\"float: right\" class=\"to-detail\" src=\"img/more.svg\" />\n          <div style=\"clear: both;\"></div>\n        </div>\n\n        <div > <!-- style=\"margin: 12% 0; \" -->\n\n        <div style=\"float: left; width: 60%;  \">\n        <div style=\"padding: 20px 0 20px 30px\">\n          <div  class=\"info-fields-label\">\n            <span info-sys-data=\"band-structure\">Band structure</span>\n          </div>\n          <div>\n              <div id=\"band-plotter\" >  </div>\n          </div>\n\n          <div class=\"footer-bs-calc\"></div>\n        </div>\n        </div>\n\n        <div style=\"float: left; width: 40%;  \">\n          <div style=\"padding: 20px 30px 20px 40px\">\n            <div class=\"info-fields-label\">\n              <span info-sys-data=\"DOS\">DOS</span>\n            </div>\n\n            <div>\n                <div id=\"dos-plotter\" >  </div>\n            </div>\n            <div class=\"footer-dos-calc\"></div>\n          </div>\n        </div>\n\n\n\n        <div style=\"clear: both;\"></div>\n        <table style=\"width: 100%\">\n        <tr>\n          <td class=\"spin-legend\" style=\"font-size: 0.9em; padding: 6px 30px 10px; display: none;\">\n            <svg width=\"15px\" height=\"10px\"> <polyline points=\"0,5 15,5\" class=\"plotSpin1\"/></svg>\n              Spin <span style='font-size: 1.1em'>⇧</span>  &nbsp;&nbsp;&nbsp;\n\n              <svg width=\"15px\" height=\"10px\"> <polyline points=\"0,5 15,5\" class=\"plotSpin2\"/></svg>\n              Spin <span style='font-size: 1.1em'>⇩</span>\n          </td>\n          <td class = \"similarity-data-field\">\n          <div style=\"float: right; padding: 0px 50px 10px 0px; margin-top: 1px;\" class=\"similarity-finder\">\n          </div>\n          </td>\n          </tr>\n          </table>\n        </div>\n        <div style=\"clear: both;\"></div>\n        <!--\n        <div class=\"footer\">\n\n          <b>Band gap</b>: <span class=\"e-struct-field\" ></span>\n        </div>\n        -->\n      </div>\n\n      <div id=\"thermal-props-ov\" class=\"view-box\" style=\"visibility: hidden\">\n        <div class=\"title\">Vibrational and thermal properties\n          <img style=\"float: right\" class=\"to-detail thermal-props\" src=\"img/more.svg\" />\n          <div style=\"clear: both;\"></div>\n        </div>\n\n        <div style=\"padding: 36px; \">\n          <div class=\"info-fields-label\">\n            <span info-sys-data=\"heat-capacity-cv\">Specific heat</span>\n          </div>\n\n\n          <div>\n              <div id=\"heat-plotter\" >  </div>\n          </div>\n          <div class=\"footer-heat-calc\" style=\"text-align: center\"></div>\n        </div>\n\n      </div>\n\n    </div>\n\n    <div style=\"clear: both;\"></div>\n    `;\n\n    this.materialTitle= this.element.getElementsByClassName('material-title')[0];\n\n    this.systemType= this.element.querySelector('.material-type-field');\n    this.spaceGroupField = this.element.querySelector('.space-group-field');\n    this.spaceGroupValue = this.element.querySelector('.space-group-value');\n    this.structTypeField= this.element.querySelector('.structure-type-field');\n    this.structTypeValue= this.element.querySelector('.structure-type-value');\n    //this.band_gap = this.element.getElementsByClassName('e-struct-field')[0];\n    //fields= this.element.getElementsByClassName('method-field');\n    this.functional= this.element.querySelector('.functional-field');//fields[0];\n    this.code= this.element.querySelector('.code-field');//fields[1];\n\n    let fields= this.element.getElementsByClassName('to-detail');\n    this.structureDetailBtn= fields[0];\n    this.electronicStructDetailBtn= fields[2];\n    this.methodologyDetailBtn= fields[1];\n    this.thermalDetailBtn= fields[3];\n/*\n    this.elasticDetailBtn= fields[1];\n    this.methodologyDetailBtn= fields[2];\n    this.electronicStructDetailBtn= fields[3];\n    this.thermalDetailBtn= fields[4];\n    */\n\n    this.vizBox = this.element.getElementsByClassName('viz-box')[0];\n    this.bandPlotter= null;\n    this.bsCalcIdBox = this.element.getElementsByClassName('footer-bs-calc')[0];\n    this.dosPlotter= null;\n    this.dosCalcIdBox = this.element.getElementsByClassName('footer-dos-calc')[0];\n    this.heatPlotter= null;\n    this.heatCalcIdBox = this.element.querySelector('.footer-heat-calc');\n\n    this.spinLegend = this.element.querySelector('.spin-legend');\n\n    // For static ones\n    InfoSys.addToInfoSystem(this.element);\n\n    // Store the state of the calcs chosen on the Elec. Structure box\n    this.eStructCalcs = { bs: null, dos: null};\n  }\n\n\n  attachAndSetEvents(element){\n    element.appendChild(this.element);\n    this._events();\n  }\n\n\n  _events() {\n\n    this.structureDetailBtn.addEventListener( \"click\", (e) => {\n      util.setBrowserHashPath('material', this.materialId+'/'+util.MAT_VIEW.structure);\n    });\n\n    this.electronicStructDetailBtn.addEventListener( \"click\", (e) => {\n      util.setBrowserHashPath('material', this.materialId+'/'+util.MAT_VIEW.electronicstruct);\n    });\n\n    this.methodologyDetailBtn.addEventListener( \"click\", (e) => {\n      util.setBrowserHashPath('material', this.materialId+'/'+util.MAT_VIEW.methodology);\n    });\n\n    this.thermalDetailBtn.addEventListener( \"click\", (e) => {\n      util.setBrowserHashPath('material', this.materialId+'/'+util.MAT_VIEW.thermalprops);\n    });\n\n/*\n    this.elasticDetailBtn.addEventListener( \"click\", (e) => {\n      util.setBrowserHashPath('material', this.materialId+'/'+util.MAT_VIEW.elasticconst);\n    });\n*/\n\n\n    //******* Optimize, genralize:\n    //this.element.querySelectorAll('.to-detail+.'+detailsId).addEventListener( \"click\", (e) => {\n    // util.setBrowserHashPath('material', this.materialId+'/'+detailsId);\n  }\n\n\n  getEStructChosenCalcs(){\n    return this.eStructCalcs;\n  }\n\n\n  setDetailViewsListener(listener){\n    this.detailViewsListener= listener;\n  }\n\n  setVisible() {\n    this.element.style.display = 'block';\n  }\n\n\n  setMaterialData() {\n\n    let data = DataStore.getMaterialData();\n    this.materialTitle.innerHTML= util.getMaterialTitle(data);\n    this.materialId = data.material_id;\n\n    let isBulk = (data.material_type === 'bulk');\n    this.systemType.textContent= data.material_type;\n    this.structTypeField.style.display =\n      (isBulk && data.structure_type !== null ? 'block' : 'none');\n    this.spaceGroupField.style.display = (isBulk ? 'block' : 'none');\n\n    if (isBulk){\n      this.structTypeValue.textContent= data.structure_type;\n      this.spaceGroupValue.textContent = data.space_group_number+\n        ' ('+data.space_group_international_short_symbol+')';\n      InfoSys.addElementToInfoSystem(this.spaceGroupValue,\n        'space-group.value:'+data.space_group_number);\n    }\n\n    if (this.similarityFinder) {\n      this.similarityFinder.element.remove();\n    }\n\n    if (data.similarity) {\n      this.similarityFinder = new SimilarityFinder({left: 40, right: 16, top: 0, bottom: 30});\n\n      const similarityFinderContainer = this.element.querySelector('.similarity-finder');\n      this.similarityFinder.setSimilarityData(data.similarity);\n      similarityFinderContainer.appendChild(this.similarityFinder.element);\n      this.similartyDataField = this.element.querySelector('.similarity-data-field');\n      InfoSys.addToInfoSystem(this.similartyDataField);\n    }\n  }\n\n  isLoaded(hasBs, hasDOS, hasPhonon) {\n    let materialData = DataStore.getMaterialData();\n    let material_id = materialData.material_id;\n    if (this.calcMaterialId === material_id) {\n      if (hasBs && !this.bsLoaded) {\n        return false;\n      }\n      if (hasDOS && !this.dosLoaded) {\n        return false;\n      }\n      if (hasPhonon && !this.phononLoaded) {\n        return false;\n      }\n      return true;\n    }\n    return false;\n  }\n\n  setCalcsData(markedTreeLeafs) {\n    let matData = DataStore.getMaterialData();\n    let calcs = DataStore.getCalculations();\n    let functionalMap = new Map();\n    let codeMap = new Map();\n\n    // Get the representative calculations from the material data returned\n    let calcWithBS = DataStore.getCalc(DataStore.getRepresentatives().electronic_band_structure);\n    let calcWithDOS = DataStore.getCalc(DataStore.getRepresentatives().electronic_dos);\n    let calcWithHeat = DataStore.getCalc(DataStore.getRepresentatives().thermodynamical_properties);\n\n    if (this.isLoaded(calcWithBS !== undefined, calcWithDOS !== undefined, calcWithHeat !== undefined)) {\n      return;\n    }\n    this.calcMaterialId = matData.material_id;\n    this.bsLoaded = false;\n    this.dosLoaded = false;\n    this.phononLoaded = false;\n\n    // Gather how many calculations there are for each functional and code\n    for (let i = 0; i < calcs.length; i++) {\n      if (functionalMap.has(calcs[i].functional_type)) {\n        let num = functionalMap.get(calcs[i].functional_type);\n        functionalMap.set(calcs[i].functional_type, ++num);\n      } else {\n        functionalMap.set(calcs[i].functional_type, 1);\n      }\n\n      let codeNameTrimed= calcs[i].code_name.trim();\n      if (codeMap.has(codeNameTrimed)) {\n        let num= codeMap.get(codeNameTrimed);\n        codeMap.set(codeNameTrimed, ++num);\n      } else {\n        codeMap.set(codeNameTrimed, 1);\n      }\n    }\n\n    if (calcWithBS !== undefined)  this.eStructCalcs.bs = calcWithBS.calc_id;\n    if (calcWithDOS !== undefined)  this.eStructCalcs.dos = calcWithDOS.calc_id;\n\n    let tempCalcId = null;\n    if (calcWithBS !== undefined)  tempCalcId = calcWithBS.calc_id;\n    else if (calcWithDOS !== undefined)  tempCalcId = calcWithDOS.calc_id;\n\n    if (tempCalcId === null) {\n      markedTreeLeafs.eStruct = null; // no graph data\n    } else\n      markedTreeLeafs.eStruct = +tempCalcId;\n\n    if (calcWithHeat === undefined) {\n      markedTreeLeafs.thermalProps = null;\n    } else {\n      markedTreeLeafs.thermalProps = +calcWithHeat.calc_id;\n    }\n\n    // Add list of functionals\n    this.functional.textContent = \"\";\n    let container = document.createElement(\"div\");\n    functionalMap.forEach((number, functional) => {\n      let span = document.createElement(\"span\");\n      span.setAttribute(\"info-sys-data\", \"functional-type.value:\" + util.getDefault(functional));\n      span.textContent = number + ' ' + util.getDefault(functional);\n      container.appendChild(span);\n      let linebreak = document.createElement(\"br\");\n      container.appendChild(linebreak);\n    });\n    this.functional.append(container);\n    InfoSys.addToInfoSystem(this.functional);\n\n    // Add list of codes\n    this.code.textContent = \"\";\n    let container2 = document.createElement(\"div\");\n    codeMap.forEach((number, codeName) => {\n      let span = document.createElement(\"span\");\n      span.setAttribute(\"info-sys-data\", \"code-name.value:\" + codeName);\n      span.textContent = number + ' ' + codeName;\n      container2.appendChild(span);\n      let linebreak = document.createElement(\"br\");\n      container2.appendChild(linebreak);\n    });\n    this.code.append(container2);\n    InfoSys.addToInfoSystem(this.code);\n\n    if (DataStore.hasElecStructureData()) {\n      document.getElementById('e-structure-ov').style.display = 'block';\n      let isReady = () => {\n        if (this.dosLoaded && this.bsLoaded) {\n          document.getElementById('e-structure-ov').style.visibility = 'visible';\n        }\n      };\n\n      if (this.bandPlotter === null){\n        this.bandPlotter= new BSPlotter();\n        this.bandPlotter.attach(document.getElementById('band-plotter'),undefined,316);\n      }\n      if (this.dosPlotter === null){\n        this.dosPlotter= new DOSPlotter({left: 40, right: 20, top: 0, bottom: 30});\n        this.dosPlotter.attach(document.getElementById('dos-plotter'),undefined,317);\n      }\n\n      if (calcWithBS === undefined){\n        this.bandPlotter.setNoData();\n        this.bsCalcIdBox.innerHTML = '';\n        this.bsLoaded = true;\n      } else {\n        let url = util.getMaterialCalcURL(this.materialId, calcWithBS.calc_id);\n        LoadingPopup.show(\"overview_electronic_band_structure\");\n        let query = JSON.stringify({properties: [\"electronic_band_structure\"]});\n        util.serverReqPOST(url, query, e => {\n          if (e.target.status === 200){\n            let bandStructData = JSON.parse(e.target.response).electronic_band_structure;\n            this.bandPlotter.setBandStructureData(bandStructData);\n            this.bsCalcIdBox.innerHTML = 'From calculation <b>' + util.getShortCode(calcWithBS.calc_id)+\n              '</b><br><span style=\"font-size: 0.8em\">('+calcWithBS.functional_type+' - '+calcWithBS.code_name+')</span>';\n            if (bandStructData.section_k_band_segment[0].band_energies.length === 2)\n              this.spinLegend.style.display = 'block';\n          } else {\n            this.bandPlotter.setNoData();\n          }\n          this.bsLoaded = true;\n          isReady();\n          LoadingPopup.hide(\"overview_electronic_band_structure\");\n        });\n      }\n\n      if (calcWithDOS === undefined){\n        this.dosPlotter.setNoData();\n        this.dosCalcIdBox.innerHTML = '';\n        this.dosLoaded = true;\n      } else {\n        let url = util.getMaterialCalcURL(this.materialId, calcWithDOS.calc_id);\n        LoadingPopup.show(\"overview_electronic_dos\");\n        let query = JSON.stringify({properties: [\"electronic_dos\"]});\n        util.serverReqPOST(url, query, e => {\n          if (e.target.status === 200){\n            let dosData= JSON.parse(e.target.response).electronic_dos;\n            this.dosPlotter.setPoints(dosData, calcWithDOS);\n            this.dosCalcIdBox.innerHTML = 'From calculation <b>'+util.getShortCode(calcWithDOS.calc_id)+\n            '</b><br><span style=\"font-size: 0.8em\">('+calcWithDOS.functional_type+' - '+calcWithDOS.code_name+')</span>';\n            if (dosData.dos_values.length === 2)\n              this.spinLegend.style.display = 'block';\n          } else {\n            this.dosPlotter.setNoData();\n          }\n          this.dosLoaded = true;\n          isReady();\n          LoadingPopup.hide(\"overview_electronic_dos\");\n        });\n      }\n    }\n\n    if (!DataStore.hasThermalData()) {\n      document.getElementById('thermal-props-ov').style.display = 'none';\n    } else {\n      document.getElementById('thermal-props-ov').style.display = 'block';\n\n      if (this.heatPlotter === null){\n        this.heatPlotter= new HeatCapPlotter();\n        this.heatPlotter.attach(document.getElementById('heat-plotter'),undefined,317);\n      }\n\n      if (calcWithHeat === undefined){\n        this.heatPlotter.setNoData();\n        this.heatCalcIdBox.innerHTML = '';\n      } else {\n        let url = util.getMaterialCalcURL(this.materialId, calcWithHeat.calc_id);\n        LoadingPopup.show();\n        let query = JSON.stringify({properties: [\"thermodynamical_properties\"]});\n        util.serverReqPOST(url, query, e => {\n          if (e.target.status === 200) {\n            let response = JSON.parse(e.target.response);\n            let thermoProp = response.thermodynamical_properties;\n            let t = thermoProp.thermodynamical_property_temperature;\n            this.heatPlotter.setData(t, thermoProp.specific_heat_capacity);\n            this.heatCalcIdBox.innerHTML = 'From calculation <b>'+util.getShortCode(calcWithHeat.calc_id)+'</b>'+\n            '</b> <span style=\"font-size: 0.8em\">('+calcWithHeat.functional_type+' - '+calcWithHeat.code_name+')</span>';\n            this.phononLoaded = true;\n            document.getElementById('thermal-props-ov').style.visibility = 'visible';\n          }\n          LoadingPopup.hide();\n        });\n      }\n    }\n  }\n}\n\n// EXPORTS\nmodule.exports = Overview;\n\n\n//# sourceURL=webpack:///./src/material-mod/Overview.view.js?");
+eval("\n/**\n * Copyright 2016-2018 Iker Hurtado\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n */\n\n\n /*\n  This file implements the Overview view component in the  Material Module.\n */\n\n\n\n\nlet util = __webpack_require__(/*! ../common/util.js */ \"./src/common/util.js\");\nlet InfoSys = __webpack_require__(/*! ../common/InfoSys.js */ \"./src/common/InfoSys.js\");\nlet LoadingPopup = __webpack_require__(/*! ../common/LoadingPopup.js */ \"./src/common/LoadingPopup.js\");\n\nlet BSPlotter = __webpack_require__(/*! ./BSPlotter.js */ \"./src/material-mod/BSPlotter.js\");\nlet DOSPlotter = __webpack_require__(/*! ./DOSPlotter.js */ \"./src/material-mod/DOSPlotter.js\");\nlet HeatCapPlotter = __webpack_require__(/*! ./HeatCapPlotter.js */ \"./src/material-mod/HeatCapPlotter.js\");\nlet MaterialMod = __webpack_require__(/*! ./MaterialMod.js */ \"./src/material-mod/MaterialMod.js\");\nlet DataStore = __webpack_require__(/*! ./DataStore.js */ \"./src/material-mod/DataStore.js\");\nlet SimilarityFinder = __webpack_require__(/*! ./Similarity.js */ \"./src/material-mod/Similarity.js\").SimilarityFinder;\n\nconst ELEMENT_INCLUDED_MSG = 'ELEMENT ALREADY INCLUDED';\n\n\nclass Overview {\n\n  constructor() {\n\n    this.element = document.createElement('div');\n    this.element.setAttribute('id','overview');\n    this.materialId;\n    let bsLoaded = false;\n    let phononLoaded = false;\n    let dosLoaded = false;\n    this.calcMaterialId = null;\n    this.element.innerHTML=`\n\n    <div class=\"material-title\">\n    </div>\n\n    <div style=\"float: left; width: 40%;\">\n\n      <div id=\"structure-ov\" class=\"view-box\">\n        <div class=\"title\">Structure\n          <img style=\"float: right\" class=\"to-detail\" src=\"img/more.svg\" />\n          <div style=\"clear: both;\"></div>\n        </div>\n\n        <div class=\"viz-box-container\" style=\"height: 260px; position: relative\">\n          <div class=\"viz-box\" style=\"height: 90%\"></div>\n        </div>\n\n        <div class=\"footer\">\n          <div ><b><span>Material type</span></b>:\n            <span class=\"material-type-field\" ></span>\n          </div>\n          <div class=\"space-group-field\" style=\"display: none\">\n            <b><span info-sys-data=\"space-group\">Space group</span></b>:\n            <span class=\"space-group-value\" ></span>\n          </div>\n          <div class=\"structure-type-field\" style=\"display: none\">\n            <b><span info-sys-data=\"structure-type\">Structure type</span></b>:\n            <span class=\"structure-type-value\" ></span>\n          </div>\n        </div>\n      </div>\n\n\n<!-- ***** Elastic Constants Box\n\n      <div id=\"elastic-ov\" class=\"view-box\">\n        <div class=\"title\">Elastic constants\n          <img style=\"float: right\" class=\"to-detail\" src=\"img/more.svg\" />\n          <div style=\"clear: both;\"></div>\n        </div>\n\n        <div class=\"info-fields\">\n          Not analyzed yet\n        </div>\n\n      </div>\n-->\n\n\n      <div id=\"methodology-ov\" class=\"view-box\">\n        <div class=\"title\">Methodology\n          <img style=\"float: right\" class=\"to-detail\" src=\"img/more.svg\" />\n          <div style=\"clear: both;\"></div>\n        </div>\n\n        <div class=\"info-fields\">\n\n          <div class=\"info-fields-label\" > Available calculations </div>\n\n          <div style=\"float: left; width: 45%\" >\n            <b><span info-sys-data=\"functional-type\">Functional</span></b>\n            <div class=\"functional-field\" > </div>\n          </div>\n          <div style=\"float: right; width: 45%\" >\n            <b><span info-sys-data=\"code-name\">Code</span></b>\n            <div class=\"code-field\"> </div>\n           </div>\n           <div style=\"clear: both;\"></div>\n        </div>\n\n      </div>\n\n    </div>\n\n    <div style=\"float: right; width: 60%;\">\n\n      <div id=\"e-structure-ov\" class=\"view-box\" style=\"display: block\">\n        <div class=\"title\">Electronic structure\n          <img style=\"float: right\" class=\"to-detail\" src=\"img/more.svg\" />\n          <div style=\"clear: both;\"></div>\n        </div>\n\n        <div > <!-- style=\"margin: 12% 0; \" -->\n\n        <div style=\"float: left; width: 60%;  \">\n        <div style=\"padding: 20px 0 20px 30px\">\n          <div  class=\"info-fields-label\">\n            <span info-sys-data=\"band-structure\">Band structure</span>\n          </div>\n          <div>\n              <div id=\"band-plotter\" >  </div>\n          </div>\n\n          <div class=\"footer-bs-calc\"></div>\n        </div>\n        </div>\n\n        <div style=\"float: left; width: 40%;  \">\n          <div style=\"padding: 20px 30px 20px 40px\">\n            <div class=\"info-fields-label\">\n              <span info-sys-data=\"DOS\">DOS</span>\n            </div>\n\n            <div>\n                <div id=\"dos-plotter\" >  </div>\n            </div>\n            <div class=\"footer-dos-calc\"></div>\n          </div>\n        </div>\n\n\n\n        <div style=\"clear: both;\"></div>\n        <table style=\"width: 100%\">\n        <tr>\n          <td class=\"spin-legend\" style=\"font-size: 0.9em; padding: 6px 30px 10px; display: none;\">\n            <svg width=\"15px\" height=\"10px\"> <polyline points=\"0,5 15,5\" class=\"plotSpin1\"/></svg>\n              Spin <span style='font-size: 1.1em'>⇧</span>  &nbsp;&nbsp;&nbsp;\n\n              <svg width=\"15px\" height=\"10px\"> <polyline points=\"0,5 15,5\" class=\"plotSpin2\"/></svg>\n              Spin <span style='font-size: 1.1em'>⇩</span>\n          </td>\n          <td class = \"similarity-data-field\">\n          <div style=\"float: right; padding: 0px 50px 10px 0px; margin-top: 1px;\" class=\"similarity-finder\">\n          </div>\n          </td>\n          </tr>\n          </table>\n        </div>\n        <div style=\"clear: both;\"></div>\n        <!--\n        <div class=\"footer\">\n\n          <b>Band gap</b>: <span class=\"e-struct-field\" ></span>\n        </div>\n        -->\n      </div>\n\n      <div id=\"thermal-props-ov\" class=\"view-box\" style=\"visibility: hidden\">\n        <div class=\"title\">Vibrational and thermal properties\n          <img style=\"float: right\" class=\"to-detail thermal-props\" src=\"img/more.svg\" />\n          <div style=\"clear: both;\"></div>\n        </div>\n\n        <div style=\"padding: 36px; \">\n          <div class=\"info-fields-label\">\n            <span info-sys-data=\"heat-capacity-cv\">Specific heat</span>\n          </div>\n\n\n          <div>\n              <div id=\"heat-plotter\" >  </div>\n          </div>\n          <div class=\"footer-heat-calc\" style=\"text-align: center\"></div>\n        </div>\n\n      </div>\n\n    </div>\n\n    <div style=\"clear: both;\"></div>\n    `;\n\n    this.materialTitle= this.element.getElementsByClassName('material-title')[0];\n\n    this.systemType= this.element.querySelector('.material-type-field');\n    this.spaceGroupField = this.element.querySelector('.space-group-field');\n    this.spaceGroupValue = this.element.querySelector('.space-group-value');\n    this.structTypeField= this.element.querySelector('.structure-type-field');\n    this.structTypeValue= this.element.querySelector('.structure-type-value');\n    //this.band_gap = this.element.getElementsByClassName('e-struct-field')[0];\n    //fields= this.element.getElementsByClassName('method-field');\n    this.functional= this.element.querySelector('.functional-field');//fields[0];\n    this.code= this.element.querySelector('.code-field');//fields[1];\n\n    let fields= this.element.getElementsByClassName('to-detail');\n    this.structureDetailBtn= fields[0];\n    this.electronicStructDetailBtn= fields[2];\n    this.methodologyDetailBtn= fields[1];\n    this.thermalDetailBtn= fields[3];\n/*\n    this.elasticDetailBtn= fields[1];\n    this.methodologyDetailBtn= fields[2];\n    this.electronicStructDetailBtn= fields[3];\n    this.thermalDetailBtn= fields[4];\n    */\n\n    this.vizBox = this.element.getElementsByClassName('viz-box')[0];\n    this.bandPlotter= null;\n    this.bsCalcIdBox = this.element.getElementsByClassName('footer-bs-calc')[0];\n    this.dosPlotter= null;\n    this.dosCalcIdBox = this.element.getElementsByClassName('footer-dos-calc')[0];\n    this.heatPlotter= null;\n    this.heatCalcIdBox = this.element.querySelector('.footer-heat-calc');\n\n    this.spinLegend = this.element.querySelector('.spin-legend');\n\n    // For static ones\n    InfoSys.addToInfoSystem(this.element);\n\n    // Store the state of the calcs chosen on the Elec. Structure box\n    this.eStructCalcs = { bs: null, dos: null};\n  }\n\n\n  attachAndSetEvents(element){\n    element.appendChild(this.element);\n    this._events();\n  }\n\n\n  _events() {\n\n    this.structureDetailBtn.addEventListener( \"click\", (e) => {\n      util.setBrowserHashPath('material', this.materialId+'/'+util.MAT_VIEW.structure);\n    });\n\n    this.electronicStructDetailBtn.addEventListener( \"click\", (e) => {\n      util.setBrowserHashPath('material', this.materialId+'/'+util.MAT_VIEW.electronicstruct);\n    });\n\n    this.methodologyDetailBtn.addEventListener( \"click\", (e) => {\n      util.setBrowserHashPath('material', this.materialId+'/'+util.MAT_VIEW.methodology);\n    });\n\n    this.thermalDetailBtn.addEventListener( \"click\", (e) => {\n      util.setBrowserHashPath('material', this.materialId+'/'+util.MAT_VIEW.thermalprops);\n    });\n\n/*\n    this.elasticDetailBtn.addEventListener( \"click\", (e) => {\n      util.setBrowserHashPath('material', this.materialId+'/'+util.MAT_VIEW.elasticconst);\n    });\n*/\n\n\n    //******* Optimize, genralize:\n    //this.element.querySelectorAll('.to-detail+.'+detailsId).addEventListener( \"click\", (e) => {\n    // util.setBrowserHashPath('material', this.materialId+'/'+detailsId);\n  }\n\n\n  getEStructChosenCalcs(){\n    return this.eStructCalcs;\n  }\n\n\n  setDetailViewsListener(listener){\n    this.detailViewsListener= listener;\n  }\n\n  setVisible() {\n    this.element.style.display = 'block';\n  }\n\n\n  setMaterialData() {\n\n    let data = DataStore.getMaterialData();\n    this.materialTitle.innerHTML= util.getMaterialTitle(data);\n    this.materialId = data.material_id;\n\n    let isBulk = (data.material_type === 'bulk');\n    this.systemType.textContent= data.material_type;\n    this.structTypeField.style.display =\n      (isBulk && data.structure_type !== null ? 'block' : 'none');\n    this.spaceGroupField.style.display = (isBulk ? 'block' : 'none');\n\n    if (isBulk){\n      this.structTypeValue.textContent= data.structure_type;\n      this.spaceGroupValue.textContent = data.space_group_number+\n        ' ('+data.space_group_international_short_symbol+')';\n      InfoSys.addElementToInfoSystem(this.spaceGroupValue,\n        'space-group.value:'+data.space_group_number);\n    }\n\n    if (this.similarityFinder) {\n      this.similarityFinder.element.remove();\n    }\n\n    if (data.similarity) {\n      this.similarityFinder = new SimilarityFinder({left: 40, right: 16, top: 0, bottom: 30});\n\n      const similarityFinderContainer = this.element.querySelector('.similarity-finder');\n      this.similarityFinder.setSimilarityData(data.similarity);\n      similarityFinderContainer.appendChild(this.similarityFinder.element);\n      this.similartyDataField = this.element.querySelector('.similarity-data-field');\n      InfoSys.addToInfoSystem(this.similartyDataField);\n    }\n  }\n\n  isLoaded(hasBs, hasDOS, hasPhonon) {\n    let materialData = DataStore.getMaterialData();\n    let material_id = materialData.material_id;\n    if (this.calcMaterialId === material_id) {\n      if (hasBs && !this.bsLoaded) {\n        return false;\n      }\n      if (hasDOS && !this.dosLoaded) {\n        return false;\n      }\n      if (hasPhonon && !this.phononLoaded) {\n        return false;\n      }\n      return true;\n    }\n    return false;\n  }\n\n  clearCalcsData() {\n    this.materialId = null;\n    this.calcMaterialId = null;\n    let bsLoaded = false;\n    let phononLoaded = false;\n    let dosLoaded = false;\n  }\n\n  setCalcsData(markedTreeLeafs) {\n    let matData = DataStore.getMaterialData();\n    let calcs = DataStore.getCalculations();\n    let functionalMap = new Map();\n    let codeMap = new Map();\n\n    // Get the representative calculations from the material data returned\n    let calcWithBS = DataStore.getCalc(DataStore.getRepresentatives().electronic_band_structure);\n    let calcWithDOS = DataStore.getCalc(DataStore.getRepresentatives().electronic_dos);\n    let calcWithHeat = DataStore.getCalc(DataStore.getRepresentatives().thermodynamical_properties);\n\n    if (this.isLoaded(calcWithBS !== undefined, calcWithDOS !== undefined, calcWithHeat !== undefined)) {\n      return;\n    }\n    this.calcMaterialId = matData.material_id;\n    this.bsLoaded = false;\n    this.dosLoaded = false;\n    this.phononLoaded = false;\n\n    // Gather how many calculations there are for each functional and code\n    for (let i = 0; i < calcs.length; i++) {\n      if (functionalMap.has(calcs[i].functional_type)) {\n        let num = functionalMap.get(calcs[i].functional_type);\n        functionalMap.set(calcs[i].functional_type, ++num);\n      } else {\n        functionalMap.set(calcs[i].functional_type, 1);\n      }\n\n      let codeNameTrimed= calcs[i].code_name.trim();\n      if (codeMap.has(codeNameTrimed)) {\n        let num= codeMap.get(codeNameTrimed);\n        codeMap.set(codeNameTrimed, ++num);\n      } else {\n        codeMap.set(codeNameTrimed, 1);\n      }\n    }\n\n    if (calcWithBS !== undefined)  this.eStructCalcs.bs = calcWithBS.calc_id;\n    if (calcWithDOS !== undefined)  this.eStructCalcs.dos = calcWithDOS.calc_id;\n\n    let tempCalcId = null;\n    if (calcWithBS !== undefined)  tempCalcId = calcWithBS.calc_id;\n    else if (calcWithDOS !== undefined)  tempCalcId = calcWithDOS.calc_id;\n\n    if (tempCalcId === null) {\n      markedTreeLeafs.eStruct = null; // no graph data\n    } else\n      markedTreeLeafs.eStruct = +tempCalcId;\n\n    if (calcWithHeat === undefined) {\n      markedTreeLeafs.thermalProps = null;\n    } else {\n      markedTreeLeafs.thermalProps = +calcWithHeat.calc_id;\n    }\n\n    // Add list of functionals\n    this.functional.textContent = \"\";\n    let container = document.createElement(\"div\");\n    functionalMap.forEach((number, functional) => {\n      let span = document.createElement(\"span\");\n      span.setAttribute(\"info-sys-data\", \"functional-type.value:\" + util.getDefault(functional));\n      span.textContent = number + ' ' + util.getDefault(functional);\n      container.appendChild(span);\n      let linebreak = document.createElement(\"br\");\n      container.appendChild(linebreak);\n    });\n    this.functional.append(container);\n    InfoSys.addToInfoSystem(this.functional);\n\n    // Add list of codes\n    this.code.textContent = \"\";\n    let container2 = document.createElement(\"div\");\n    codeMap.forEach((number, codeName) => {\n      let span = document.createElement(\"span\");\n      span.setAttribute(\"info-sys-data\", \"code-name.value:\" + codeName);\n      span.textContent = number + ' ' + codeName;\n      container2.appendChild(span);\n      let linebreak = document.createElement(\"br\");\n      container2.appendChild(linebreak);\n    });\n    this.code.append(container2);\n    InfoSys.addToInfoSystem(this.code);\n\n    if (DataStore.hasElecStructureData()) {\n      document.getElementById('e-structure-ov').style.display = 'block';\n      let isReady = () => {\n        if (this.dosLoaded && this.bsLoaded) {\n          document.getElementById('e-structure-ov').style.visibility = 'visible';\n        }\n      };\n\n      if (this.bandPlotter === null){\n        this.bandPlotter= new BSPlotter();\n        this.bandPlotter.attach(document.getElementById('band-plotter'),undefined,316);\n      }\n      if (this.dosPlotter === null){\n        this.dosPlotter= new DOSPlotter({left: 40, right: 20, top: 0, bottom: 30});\n        this.dosPlotter.attach(document.getElementById('dos-plotter'),undefined,317);\n      }\n\n      if (calcWithBS === undefined){\n        this.bandPlotter.setNoData();\n        this.bsCalcIdBox.innerHTML = '';\n        this.bsLoaded = true;\n      } else {\n        let url = util.getMaterialCalcURL(this.materialId, calcWithBS.calc_id);\n        LoadingPopup.show(\"overview_electronic_band_structure\");\n        let query = JSON.stringify({properties: [\"electronic_band_structure\"]});\n        util.serverReqPOST(url, query, e => {\n          if (e.target.status === 200){\n            let bandStructData = JSON.parse(e.target.response).electronic_band_structure;\n            this.bandPlotter.setBandStructureData(bandStructData);\n            this.bsCalcIdBox.innerHTML = 'From calculation <b>' + util.getShortCode(calcWithBS.calc_id)+\n              '</b><br><span style=\"font-size: 0.8em\">('+calcWithBS.functional_type+' - '+calcWithBS.code_name+')</span>';\n            if (bandStructData.section_k_band_segment[0].band_energies.length === 2)\n              this.spinLegend.style.display = 'block';\n          } else {\n            this.bandPlotter.setNoData();\n          }\n          this.bsLoaded = true;\n          isReady();\n          LoadingPopup.hide(\"overview_electronic_band_structure\");\n        });\n      }\n\n      if (calcWithDOS === undefined){\n        this.dosPlotter.setNoData();\n        this.dosCalcIdBox.innerHTML = '';\n        this.dosLoaded = true;\n      } else {\n        let url = util.getMaterialCalcURL(this.materialId, calcWithDOS.calc_id);\n        LoadingPopup.show(\"overview_electronic_dos\");\n        let query = JSON.stringify({properties: [\"electronic_dos\"]});\n        util.serverReqPOST(url, query, e => {\n          if (e.target.status === 200){\n            let dosData= JSON.parse(e.target.response).electronic_dos;\n            this.dosPlotter.setPoints(dosData, calcWithDOS);\n            this.dosCalcIdBox.innerHTML = 'From calculation <b>'+util.getShortCode(calcWithDOS.calc_id)+\n            '</b><br><span style=\"font-size: 0.8em\">('+calcWithDOS.functional_type+' - '+calcWithDOS.code_name+')</span>';\n            if (dosData.dos_values.length === 2)\n              this.spinLegend.style.display = 'block';\n          } else {\n            this.dosPlotter.setNoData();\n          }\n          this.dosLoaded = true;\n          isReady();\n          LoadingPopup.hide(\"overview_electronic_dos\");\n        });\n      }\n    }\n\n    if (!DataStore.hasThermalData()) {\n      document.getElementById('thermal-props-ov').style.display = 'none';\n    } else {\n      document.getElementById('thermal-props-ov').style.display = 'block';\n\n      if (this.heatPlotter === null){\n        this.heatPlotter= new HeatCapPlotter();\n        this.heatPlotter.attach(document.getElementById('heat-plotter'),undefined,317);\n      }\n\n      if (calcWithHeat === undefined){\n        this.heatPlotter.setNoData();\n        this.heatCalcIdBox.innerHTML = '';\n      } else {\n        let url = util.getMaterialCalcURL(this.materialId, calcWithHeat.calc_id);\n        LoadingPopup.show();\n        let query = JSON.stringify({properties: [\"thermodynamical_properties\"]});\n        util.serverReqPOST(url, query, e => {\n          if (e.target.status === 200) {\n            let response = JSON.parse(e.target.response);\n            let thermoProp = response.thermodynamical_properties;\n            let t = thermoProp.thermodynamical_property_temperature;\n            this.heatPlotter.setData(t, thermoProp.specific_heat_capacity);\n            this.heatCalcIdBox.innerHTML = 'From calculation <b>'+util.getShortCode(calcWithHeat.calc_id)+'</b>'+\n            '</b> <span style=\"font-size: 0.8em\">('+calcWithHeat.functional_type+' - '+calcWithHeat.code_name+')</span>';\n            this.phononLoaded = true;\n            document.getElementById('thermal-props-ov').style.visibility = 'visible';\n          }\n          LoadingPopup.hide();\n        });\n      }\n    }\n  }\n}\n\n// EXPORTS\nmodule.exports = Overview;\n\n\n//# sourceURL=webpack:///./src/material-mod/Overview.view.js?");
 
 /***/ }),
 
@@ -425,7 +425,7 @@ eval("let util = __webpack_require__(/*! ../common/util.js */ \"./src/common/uti
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
 "use strict";
-eval("\n/**\n * Copyright 2016-2018 Iker Hurtado\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n */\n\n\n /*\n   This component implements the list of materials found in the search\n */\n\n\n\nlet util = __webpack_require__(/*! ../common/util.js */ \"./src/common/util.js\");\nlet InfoSys = __webpack_require__(/*! ../common/InfoSys.js */ \"./src/common/InfoSys.js\");\nlet LoadingPopup = __webpack_require__(/*! ../common/LoadingPopup.js */ \"./src/common/LoadingPopup.js\");\n\n//const RESULTS_PER_PAGE = 20;\n\n\nclass MaterialList {\n\n  constructor(){\n    this.element = document.createElement('div');\n    this.element.className = 'MaterialList';\n\n    // state \n    this.visible = false;\n    this.noResults = true;\n    this.matMap = new Map();\n    //this.currentSystemType = 'bulk';\n    this.optimadeQuery = null;\n    this.newestQuery = null;\n    \n    this.noResultsBox = document.createElement('div');\n    this.noResultsBox.style = 'text-align: center; font-weight: bold'\n    this.noResultsBox.innerHTML = 'NO RESULTS FOUND';\n    this.element.append(this.noResultsBox);\n\n    this.matListWrapper = document.createElement('div');\n    this.element.append(this.matListWrapper);\n    this.pagControl = new PaginationControl();\n    this.matListWrapper.append(this.pagControl.element);\n    this.pagControl.setPrevPageListener( page => {\n      this._search(page);\n    });\n    this.pagControl.setNextPageListener( page => {\n      this._search(page);\n    })\n\n    this.matListContainer = new MatListContainer();\n    this.matListWrapper.append(this.matListContainer.element);\n  }\n\n\n  attachAndSetEvents(element){\n    element.appendChild(this.element);\n    this._render();\n  }\n\n\n  invalidateSearch(){\n    this.visible = false;\n    this._render();\n  }\n\n\n  initSearch(optimadeQuery){\n    this.optimadeQuery = optimadeQuery;\n    this._search();\n  }\n\n  _search(page){\n    //this.resultsContainer.style.visibility = 'hidden';\n    this.matMap.clear();\n\n    LoadingPopup.show();\n\n    let reqJson = {\n      query: this.optimadeQuery,\n      search_by: {}\n    };\n    if (page) reqJson.search_by = { page: page}\n\n    // Add the restricted option from the checkbox\n    let restrictedEl = document.getElementById('restricted-search');\n    reqJson.search_by.restricted = (restrictedEl.checked ? '1' : '0');\n    console.log('SEARCHING: ', reqJson );\n    const timestamp = Date.now();\n    this.newestQuery = timestamp;\n\n    document.querySelector('#syntax-error').style.visibility = 'hidden';\n    fetch(util.getSearchURL(), {\n      method: 'POST',\n      headers: {'Content-Type': 'application/json;charset=utf-8'},\n      body: JSON.stringify(reqJson)\n    })\n      .then( resp => resp.json() )\n      .then( result => {\n        console.log('GETTING: ', result);\n\n        // If a newer query has been sent, ignore the results of an old query.\n        if (this.newestQuery === timestamp) {\n          // Update state\n          this.noResults = (result.results.length === 0); \n          this._setMatList(result.results);\n          this.pagControl.set(result.pages);\n          \n          this.visible = true;\n          this._render();\n        }\n      })\n      .catch(error => {\n        console.log(\"Error\")\n        document.querySelector('#syntax-error').style.visibility = 'visible';\n      })\n      .finally(() => {\n        LoadingPopup.hide();\n      });\n    \n  \n/*\n    oReq.addEventListener(\"error\", e => { // Not valid query\n      console.log('Search ERROR - Not valid query ');\n      this.total_results= 0;\n      this.setData([]);\n      this._updateUI();\n      this.resultsContainer.style.visibility = 'visible';\n      LoadingPopup.hide();\n    });\n*/\n  }\n\n\n  _render(){\n    this.element.style.display = this.visible ? '' : 'none';\n    if (this.visible) {\n      this.noResultsBox.style.display = this.noResults ? '' : 'none';\n      this.matListWrapper.style.display = this.noResults ? 'none' : '';\n      this.matListContainer.updateList(this.matMap);\n      //document.querySelector('.user-msg-box').innerHTML = this.noResults ? 'No search results' : 'See result list below';\n    } else {\n      //document.querySelector('.user-msg-box').innerHTML = '';\n    }\n  }\n\n\n  _setMatList(matList){\n\n    if (matList.length > 0){\n        matList.forEach( mat => {\n\n          if (this.matMap.has(mat.formula_reduced)){\n            let matArray = this.matMap.get(mat.formula_reduced);\n            matArray.push(mat);\n          }else\n            this.matMap.set(mat.formula_reduced, [mat]);\n        });\n\n    }else this.matMap.clear(); // Right query - results not found\n  }\n\n}\n\n\n\nclass PaginationControl{\n\n  constructor(){\n    this.element = document.createElement('div');\n    //this.element.className = 'pag-header';\n    this.element.innerHTML = `\n      <div class=\"results-total\" >Results</div>\n\n      <div class=\"pag-header\" >\n        <span class=\"prevButton\">\n          <img src=\"img/prev.svg\" style=\"display: inline;\" width=\"7px\"/> &nbsp; prev\n        </span>   &nbsp;&nbsp;\n        <span class=\"page\"> X </span> &nbsp;&nbsp;\n        <span class=\"nextButton\"> next &nbsp;\n          <img src=\"img/next.svg\" width=\"7px\" />\n        </span>\n      </div>\n    `;\n\n    this.titleBox = this.element.querySelector('.results-total');\n\n    this.prevButton = this.element.querySelector('.prevButton');\n    this.pageElement = this.element.querySelector('.page'); \n    this.nextButton = this.element.querySelector('.nextButton');\n\n    this.prevButton.addEventListener('click', e =>  {\n      if (this.pagesData.page === 1) return;\n      this.prevPageListener(this.pagesData.page-1);\n    });\n\n    this.nextButton.addEventListener('click', e => {\n      console.log('nextButton')\n      if (this.pagesData.page === this.pagesData.pages) return;\n      this.nextPageListener(this.pagesData.page+1);\n    });\n\n    this.pagesData;\n\n  }\n\n\n  set(pagesData){\n    this.pagesData = pagesData;\n    this.titleBox.innerHTML= 'Results (total: '+pagesData.total+')';\n    this.pageElement.innerHTML= 'page '+pagesData.page+' / '+pagesData.pages;\n  }\n\n\n  setPrevPageListener(listener){\n    this.prevPageListener = listener;\n  }\n\n\n  setNextPageListener(listener){\n    this.nextPageListener = listener;\n  }\n}\n\n\n\nclass MatListContainer{\n\n  constructor(){\n    this.element = document.createElement('div');\n    this.element.className = 'mat-list-container';\n    this.element.innerHTML = `\n      <table>\n          <thead> <tr>\n            <th style=\"width: 24%;\"></th>\n            <th style=\"width: 16%;\">\n              <span info-sys-data=\"space-group\">Space group</span>\n            </th>\n            <th style=\"width: 20%;\">\n              <span >Space gr. int. symbol</span>\n            </th>\n\n            <th style=\"width: 22%;\">\n              <span info-sys-data=\"structure-type\">Structure type</span>\n            </th>\n            <th style=\"width: 18%;\">Nº calculations</th>\n          </tr> </thead>\n\n          <tbody> </tbody> \n      </table>\n    `;\n\n    this.tbody = this.element.querySelector('tbody');\n\n    this.tbody.addEventListener('click', e => {\n\n      let materialRow = event.target.closest('tr.mat-row');\n\n      if (materialRow) \n        util.setBrowserHashPath('material', materialRow.getAttribute('data-mat-id'));\n\n      e.stopPropagation();\n    });\n\n  }\n\n\n  updateList(matMap){\n    //console.log('matMap', matMap);\n    if (matMap.size === 0){ this.tbody.innerHTML = ''; return }\n\n    let html = ''\n    matMap.forEach( (mats, formula) => {\n\n      let rFormula = util.getSubscriptedFormula(formula);\n      html+= '<tr> <td class=\"formula\" colspan=\"5\"><b>'+rFormula+'</b>';\n      if ( mats.length > 1)\n        html += '<span style=\"font-size: 0.86em;\"> ('+mats.length+' structures)</span>';\n      html += '</td></tr>';\n\n      mats.forEach( mat => {\n        let label = (mat.material_name ? mat.material_name : rFormula);\n        //console.log(\"MATERIAL \", mat.formula, mat.material_name, rFormula, label);\n        html +=\n          `<tr class=\"mat-row\" data-mat-id=\"${mat.material_id}\">\n            <td  > ${label} [${mat.formula}] </td>\n            <td style=\"text-align:center\" >\n              ${mat.space_group_number ? mat.space_group_number : '' }\n            </td>\n            <td>\n              ${mat.space_group_international_short_symbol ? \n                mat.space_group_international_short_symbol : '' }\n            </td>\n\n            <td> ${mat.structure_type ? mat.structure_type : '' } </td>\n            <td style=\"text-align:center\" > ${mat.n_calculations ? mat.n_calculations : ''} </td>\n          </tr>`;\n      });\n    });\n\n    this.tbody.innerHTML = html;\n\n    InfoSys.addToInfoSystem(this.element);\n  }\n\n\n}\n\n\nmodule.exports = MaterialList;\n\n\n//# sourceURL=webpack:///./src/search-mod/MaterialList.view.js?");
+eval("\n/**\n * Copyright 2016-2018 Iker Hurtado\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n */\n\n\n /*\n   This component implements the list of materials found in the search\n */\n\n\n\nlet util = __webpack_require__(/*! ../common/util.js */ \"./src/common/util.js\");\nlet InfoSys = __webpack_require__(/*! ../common/InfoSys.js */ \"./src/common/InfoSys.js\");\nlet LoadingPopup = __webpack_require__(/*! ../common/LoadingPopup.js */ \"./src/common/LoadingPopup.js\");\n\n//const RESULTS_PER_PAGE = 20;\n\n\nclass MaterialList {\n\n  constructor(){\n    this.element = document.createElement('div');\n    this.element.className = 'MaterialList';\n\n    // state \n    this.visible = false;\n    this.noResults = true;\n    this.matMap = new Map();\n    //this.currentSystemType = 'bulk';\n    this.optimadeQuery = null;\n    this.newestQuery = null;\n    \n    this.noResultsBox = document.createElement('div');\n    this.noResultsBox.style = 'text-align: center; font-weight: bold'\n    this.noResultsBox.innerHTML = 'NO RESULTS FOUND';\n    this.element.append(this.noResultsBox);\n\n    this.matListWrapper = document.createElement('div');\n    this.element.append(this.matListWrapper);\n    this.pagControl = new PaginationControl();\n    this.matListWrapper.append(this.pagControl.element);\n    this.pagControl.setPrevPageListener( page => {\n      this._search(page);\n    });\n    this.pagControl.setNextPageListener( page => {\n      this._search(page);\n    })\n\n    this.matListContainer = new MatListContainer();\n    this.matListWrapper.append(this.matListContainer.element);\n  }\n\n\n  attachAndSetEvents(element){\n    element.appendChild(this.element);\n    this._render();\n  }\n\n\n  invalidateSearch(){\n    this.visible = false;\n    this._render();\n  }\n\n\n  initSearch(optimadeQuery){\n    this.optimadeQuery = optimadeQuery;\n    this._search();\n  }\n\n  _search(page){\n    //this.resultsContainer.style.visibility = 'hidden';\n    this.matMap.clear();\n\n    LoadingPopup.show();\n\n    let reqJson = {\n      query: this.optimadeQuery,\n      search_by: {}\n    };\n    if (page) reqJson.search_by = { page: page}\n\n    // Add the restricted option from the checkbox\n    let restrictedEl = document.getElementById('restricted-search');\n    reqJson.search_by.restricted = (restrictedEl.checked ? '1' : '0');\n    console.log('SEARCHING: ', reqJson );\n    const timestamp = Date.now();\n    this.newestQuery = timestamp;\n\n    document.querySelector('#syntax-error').style.visibility = 'hidden';\n    fetch(util.getSearchURL(), {\n      method: 'POST',\n      headers: {'Content-Type': 'application/json;charset=utf-8'},\n      body: JSON.stringify(reqJson)\n    })\n      .then( resp => resp.json() )\n      .then( result => {\n        console.log('GETTING: ', result);\n\n        // If a newer query has been sent, ignore the results of an old query.\n        if (this.newestQuery === timestamp) {\n          // Update state\n          this.noResults = (result.results.length === 0); \n          this._setMatList(result.results);\n          this.pagControl.set(result.pages);\n          \n          this.visible = true;\n          this._render();\n        }\n      })\n      .catch(error => {\n        console.log(\"Error\")\n        document.querySelector('#syntax-error').style.visibility = 'visible';\n      })\n      .finally(() => {\n        LoadingPopup.hide();\n      });\n    \n  \n/*\n    oReq.addEventListener(\"error\", e => { // Not valid query\n      console.log('Search ERROR - Not valid query ');\n      this.total_results= 0;\n      this.setData([]);\n      this._updateUI();\n      this.resultsContainer.style.visibility = 'visible';\n      LoadingPopup.hide();\n    });\n*/\n  }\n\n\n  _render(){\n    this.element.style.display = this.visible ? '' : 'none';\n    if (this.visible) {\n      this.noResultsBox.style.display = this.noResults ? '' : 'none';\n      this.matListWrapper.style.display = this.noResults ? 'none' : '';\n      this.matListContainer.updateList(this.matMap);\n      //document.querySelector('.user-msg-box').innerHTML = this.noResults ? 'No search results' : 'See result list below';\n    } else {\n      //document.querySelector('.user-msg-box').innerHTML = '';\n    }\n  }\n\n\n  _setMatList(matList){\n\n    if (matList.length > 0){\n        matList.forEach( mat => {\n\n          if (this.matMap.has(mat.formula_reduced)){\n            let matArray = this.matMap.get(mat.formula_reduced);\n            matArray.push(mat);\n          }else\n            this.matMap.set(mat.formula_reduced, [mat]);\n        });\n\n    }else this.matMap.clear(); // Right query - results not found\n  }\n\n}\n\n\n\nclass PaginationControl{\n\n  constructor(){\n    this.element = document.createElement('div');\n    //this.element.className = 'pag-header';\n    this.element.innerHTML = `\n      <div class=\"results-total\" >Results</div>\n\n      <div class=\"pag-header\" >\n        <span class=\"prevButton\">\n          <img src=\"img/prev.svg\" style=\"display: inline;\" width=\"7px\"/> &nbsp; prev\n        </span>   &nbsp;&nbsp;\n        <span class=\"page\"> X </span> &nbsp;&nbsp;\n        <span class=\"nextButton\"> next &nbsp;\n          <img src=\"img/next.svg\" width=\"7px\" />\n        </span>\n      </div>\n    `;\n\n    this.titleBox = this.element.querySelector('.results-total');\n\n    this.prevButton = this.element.querySelector('.prevButton');\n    this.pageElement = this.element.querySelector('.page'); \n    this.nextButton = this.element.querySelector('.nextButton');\n\n    this.prevButton.addEventListener('click', e =>  {\n      if (this.pagesData.page === 1) return;\n      this.prevPageListener(this.pagesData.page-1);\n    });\n\n    this.nextButton.addEventListener('click', e => {\n      console.log('nextButton')\n      if (this.pagesData.page === this.pagesData.pages) return;\n      this.nextPageListener(this.pagesData.page+1);\n    });\n\n    this.pagesData;\n\n  }\n\n\n  set(pagesData){\n    this.pagesData = pagesData;\n    this.titleBox.innerHTML= 'Results (total: '+pagesData.total+')';\n    this.pageElement.innerHTML= 'page '+pagesData.page+' / '+pagesData.pages;\n  }\n\n\n  setPrevPageListener(listener){\n    this.prevPageListener = listener;\n  }\n\n\n  setNextPageListener(listener){\n    this.nextPageListener = listener;\n  }\n}\n\n\n\nclass MatListContainer{\n\n  constructor(){\n    this.element = document.createElement('div');\n    this.element.className = 'mat-list-container';\n    this.element.innerHTML = `\n      <table>\n          <thead> <tr>\n            <th style=\"width: 24%;\"></th>\n            <th style=\"width: 16%;\">\n              <span info-sys-data=\"space-group\">Space group</span>\n            </th>\n            <th style=\"width: 20%;\">\n              <span >Space gr. int. symbol</span>\n            </th>\n\n            <th style=\"width: 22%;\">\n              <span info-sys-data=\"structure-type\">Structure type</span>\n            </th>\n            <th style=\"width: 18%;\">Nº calculations</th>\n          </tr> </thead>\n\n          <tbody> </tbody> \n      </table>\n    `;\n\n    this.tbody = this.element.querySelector('tbody');\n\n    this.tbody.addEventListener('click', e => {\n\n      let materialRow = event.target.closest('tr.mat-row');\n\n      if (materialRow) \n        util.setBrowserHashPath('material', materialRow.getAttribute('data-mat-id'));\n\n      e.stopPropagation();\n    });\n\n  }\n\n\n  updateList(matMap){\n    //console.log('matMap', matMap);\n    if (matMap.size === 0){ this.tbody.innerHTML = ''; return }\n\n    let html = ''\n    matMap.forEach( (mats, formula) => {\n\n      let rFormula = util.getSubscriptedFormula(formula);\n      html+= '<tr> <td class=\"formula\" colspan=\"5\"><b>'+rFormula+'</b>';\n      if ( mats.length > 1)\n        html += '<span style=\"font-size: 0.86em;\"> ('+mats.length+' structures)</span>';\n      html += '</td></tr>';\n\n      mats.forEach( mat => {\n        let label = (mat.material_name ? mat.material_name : rFormula);\n        //console.log(\"MATERIAL \", mat.formula, mat.material_name, rFormula, label);\n        html +=\n          `<tr class=\"mat-row\" data-mat-id=\"${mat.material_id}\">\n            <td  > ${label} [${mat.formula}] </td>\n            <td style=\"text-align:center\" >\n              ${mat.space_group_number ? mat.space_group_number : '' }\n            </td>\n            <td>\n              ${mat.space_group_international_short_symbol ? \n                mat.space_group_international_short_symbol : '' }\n            </td>\n            <td> ${mat.structure_type ? mat.structure_type : '' } </td>\n            <td style=\"text-align:center\" > ${mat.n_calculations ? mat.n_calculations : ''} </td>\n          </tr>`;\n      });\n    });\n\n    this.tbody.innerHTML = html;\n\n    InfoSys.addToInfoSystem(this.element);\n  }\n\n\n}\n\n\nmodule.exports = MaterialList;\n\n\n//# sourceURL=webpack:///./src/search-mod/MaterialList.view.js?");
 
 /***/ }),