Added better handling of missing material information.

client/css/styles.css

@@ -1224,6 +1224,14 @@ text.structure-viewer-legend-labels{
 		font-size: 16px;
 }
 
+#missing-prompt{
+  margin-top: 0.5rem;
+  background-color: #E56400;
+  color: white;
+  padding: 16px;
+  display: none;
+}
+
 /*
 .tooltip {
     visibility: hidden;

client/src/material-mod/DataStore.js

@@ -33,6 +33,7 @@ let calcMap = new Map();
 let ready = false;
 let hasThermal;
 let hasElecStructure;
+let missing = false;
 
 function setMaterialData(dataFromAPI){
   materialData = dataFromAPI;
@@ -42,6 +43,14 @@ function getMaterialData(){
   return materialData;
 }
 
+function setMissing(value) {
+  missing = value;
+}
+
+function getMissing() {
+  return missing;
+}
+
 function setIdealizedStructure(structure){
   idealizedStructure = structure;
 }
@@ -129,6 +138,9 @@ function getGroupId(leafId) {
 
 function isReady(matId) {
   if (materialData !== undefined) {
+    if (missing && matId == materialData.material_id) {
+      return true;
+    }
     if (idealizedStructure !== undefined) {
       if (calcs !== undefined) {
         if (groups !== undefined) {
@@ -147,6 +159,7 @@ function clear() {
   calcs = undefined;
   groups = undefined;
   idealizedStructure = undefined;
+  missing = false;
 }
 
 function isInAnyGroup(calcId){
@@ -192,6 +205,8 @@ module.exports = {
   isInAnyNotDisabledGroup,
   getGroupLeafId,
   isReady,
+  setMissing,
+  getMissing,
   clear,
   setIdealizedStructure,
   getIdealizedStructure,

client/src/material-mod/MaterialMod.js

@@ -48,6 +48,9 @@ class MaterialMod {
   constructor(){
     this.element = document.createElement('div');
     this.element.setAttribute("id",'material-module');
+    this.missingPrompt = document.createElement('div');
+    this.missingPrompt.id = "missing-prompt";
+    this.element.appendChild(this.missingPrompt)
 
     this.overview = new Overview();
     this.overview.attachAndSetEvents(this.element);
@@ -138,30 +141,45 @@ class MaterialMod {
    * Called upon loading the overview page for a specific material.
    */
   _loadMaterial(matId, view) {
-
-    // Set to loading mode
-    this._setView(view);
-
     let show = () => {
-      let materialData = DataStore.getMaterialData();
-      let idealizedStructure = DataStore.getIdealizedStructure();
-      // Cell viewer needs to be set only after page is visible so that it is
-      // resized correctly.
-      if (this.currentDetailView !== null) {
-        this.currentDetailView.load();
-        if (view === util.MAT_VIEW.structure) {
-          this._setCellViewer(this.structureDetails.vizBox);
-        }
-        if (view === util.MAT_VIEW.methodology) {
-          this.methodologyDetails.updateSelection();
+      // Show error message if resource not found
+      const missingPrompt = document.getElementById("missing-prompt");
+      if (DataStore.getMissing()) {
+        // Hide the current view
+        if (this.currentDetailView === null) {
+          this.overview.element.style.display = 'none';
+        } else {
+          this.currentDetailView.element.style.display = 'none';
         }
+        const msg = `
+          Could not find information for material with identifier ${matId}.
+          Either the material does not exist or is not yet visible in the Encyclopedia.
+        `;
+        missingPrompt.textContent = msg;
+        missingPrompt.style.display = "block";
       } else {
-        document.querySelector('title').innerHTML =
-          'NOMAD Encyclopedia - '+util.getMaterialTitle(materialData, false);
-        this.overview.setMaterialData();
-        let name = (materialData.material_name === null ? materialData.formula : materialData.material_name);
-        this.overview.setCalcsData(markedTreeLeafs);
-        this._setCellViewer(this.overview.vizBox);
+        missingPrompt.style.display = "none";
+        this._setView(view);
+        let materialData = DataStore.getMaterialData();
+        let idealizedStructure = DataStore.getIdealizedStructure();
+        // Cell viewer needs to be set only after page is visible so that it is
+        // resized correctly.
+        if (this.currentDetailView !== null) {
+          this.currentDetailView.load();
+          if (view === util.MAT_VIEW.structure) {
+            this._setCellViewer(this.structureDetails.vizBox);
+          }
+          if (view === util.MAT_VIEW.methodology) {
+            this.methodologyDetails.updateSelection();
+          }
+        } else {
+          document.querySelector('title').innerHTML =
+            'NOMAD Encyclopedia - '+util.getMaterialTitle(materialData, false);
+          this.overview.setMaterialData();
+          let name = (materialData.material_name === null ? materialData.formula : materialData.material_name);
+          this.overview.setCalcsData(markedTreeLeafs);
+          this._setCellViewer(this.overview.vizBox);
+        }
       }
     };
     let isReady = () => {
@@ -175,6 +193,7 @@ class MaterialMod {
     // If material is already loaded, nothing fetched.
     if (!isReady()) {
       DataStore.clear();
+      this.overview.clearCalcsData();
       LoadingPopup.reset();
       this.structureViewer.axisCheckbox.checked = true;
       this.structureViewer.bondsCheckbox.checked = true;
@@ -187,9 +206,16 @@ class MaterialMod {
       // Request basic material data
       LoadingPopup.show("load_basic");
       util.serverReq(util.getMaterialURL(matId), e1 => {
-        let materialData = JSON.parse(e1.target.response);
-        DataStore.setMaterialData(materialData);
-        util.materialId = materialData.material_id;
+        // Check for error
+        let stat = e1.target.status;
+        if (stat >= 400 && stat < 500) {
+          DataStore.setMissing(true);
+          DataStore.setMaterialData({material_id: matId});
+        } else {
+          let materialData = JSON.parse(e1.target.response);
+          DataStore.setMaterialData(materialData);
+          util.materialId = materialData.material_id;
+        }
         isReady();
         LoadingPopup.hide("load_basic");
       });
@@ -197,32 +223,50 @@ class MaterialMod {
       // Request basic details for all calculations related to this material
       LoadingPopup.show("load_calculations");
       util.serverReq(util.getMaterialXsURL('calculations', matId), e4 => {
-        let calculations = JSON.parse(e4.target.response);
-        let representatives = calculations.representatives;
-        let idealId = representatives.idealized_structure;
-        DataStore.setCalculations(calculations);
-
-        // Get the idealized structure
-        //util.serverReq(util.getMaterialXsURL('idealized_structure', matId), e2 => {
-        let query = JSON.stringify({properties: ["idealized_structure"]});
-        LoadingPopup.show("load_idealized");
-        util.serverReqPOST(util.getMaterialCalcURL(matId, idealId), query, e2 => {
-          let struct = JSON.parse(e2.target.response).idealized_structure;
-          DataStore.setIdealizedStructure(struct);
-          this.structureViewer.load(struct);
-          document.getElementById('structure-ov').style.visibility = 'visible';
-          document.getElementById('methodology-ov').style.visibility = 'visible';
-          isReady();
-          LoadingPopup.hide("load_idealized");
-        });
+        // Check for error
+        let stat = e4.target.status;
+        if (stat >= 400 && stat < 500) {
+          DataStore.setMissing(true);
+        } else {
+          let calculations = JSON.parse(e4.target.response);
+          let representatives = calculations.representatives;
+          let idealId = representatives.idealized_structure;
+          DataStore.setCalculations(calculations);
+
+          // Get the idealized structure
+          //util.serverReq(util.getMaterialXsURL('idealized_structure', matId), e2 => {
+          let query = JSON.stringify({properties: ["idealized_structure"]});
+          LoadingPopup.show("load_idealized");
+          util.serverReqPOST(util.getMaterialCalcURL(matId, idealId), query, e2 => {
+            // Check for error
+            let stat = e2.target.status;
+            if (stat >= 400 && stat < 500) {
+              DataStore.setMissing(true);
+            } else {
+              let struct = JSON.parse(e2.target.response).idealized_structure;
+              DataStore.setIdealizedStructure(struct);
+              this.structureViewer.load(struct);
+              document.getElementById('structure-ov').style.visibility = 'visible';
+              document.getElementById('methodology-ov').style.visibility = 'visible';
+            }
+            isReady();
+            LoadingPopup.hide("load_idealized");
+          });
+        }
         LoadingPopup.hide("load_calculations");
       });
 
       // Request groups
       LoadingPopup.show("load_groups");
       util.serverReq(util.getMaterialXsURL('groups', matId), e5 => {
-        let groups = JSON.parse(e5.target.response);
-        DataStore.setGroups(groups);
+        // Check for error
+        let stat = e5.target.status;
+        if (stat >= 400 && stat < 500) {
+          DataStore.setMissing(true);
+        } else {
+          let groups = JSON.parse(e5.target.response);
+          DataStore.setGroups(groups);
+        }
         isReady();
         LoadingPopup.hide("load_groups");
       });

client/src/material-mod/Overview.view.js

@@ -358,6 +358,14 @@ class Overview {
     return false;
   }
 
+  clearCalcsData() {
+    this.materialId = null;
+    this.calcMaterialId = null;
+    let bsLoaded = false;
+    let phononLoaded = false;
+    let dosLoaded = false;
+  }
+
   setCalcsData(markedTreeLeafs) {
     let matData = DataStore.getMaterialData();
     let calcs = DataStore.getCalculations();