Merge pull request #136 from dms-view/alerts

Alerts
dms-view · May 9, 2020 · 4b2e898 · 4b2e898
2 parents 4663d92 + aaaf072
commit 4b2e898
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -32,6 +32,11 @@ <h4>Instructions:</h4>
 
     <div class="row mb-5 border-top border-bottom pt-3 pb-3">
       <div class="col-8">
+        <div class="alert alert-danger" role="alert" id="dataFormFieldAlert" hidden>
+          <strong>Error reading the data URL!</strong>
+          Please review the URL below or check the contents of the datafile by reviewing the
+          <a href="https://dms-view.github.io/docs/dataupload/" target="_blank">documentation</a>.
+        </div>
         <p><input id="data-url" text="text" class="form-control" placeholder="Data URL (relative or absolute paths allowed)" /></p>
         <p>
           <input type='radio' id="select" name="mode" value="select" checked /> select
@@ -44,6 +49,11 @@ <h4>Instructions:</h4>
         <div id="logo_plot" class="row"></div>
       </div>
       <div class="col-4">
+        <div class="alert alert-danger" role="alert" id="proteinFormFieldAlert" hidden>
+          <strong>Error reading the protein structure URL!</strong>
+          Please review the URL below or check the contents of the protein structure by reviewing the
+          <a href="https://dms-view.github.io/docs/dataupload/" target="_blank">documentation</a>.
+        </div>
         <p><input id="pdb-url" text="text" class="form-control" placeholder="PDB URL" /></p>
         <select name="polymerSelect">
           <option value="cartoon">cartoon</option>
@@ -57,6 +67,11 @@ <h4>Instructions:</h4>
 
     <div id="description" class="row mt-3">
       <div class="col-12">
+        <div class="alert alert-danger" role="alert" id="markdownFormFieldAlert" hidden>
+          <strong>Error reading the description URL!</strong>
+          Please review the URL below or check the contents of the description markdown by reviewing the
+          <a href="https://dms-view.github.io/docs/dataupload/" target="_blank">documentation</a>.
+        </div>
         <p><input id="markdown-url" text="text" class="form-control" placeholder="markdown URL" /></p>
         <div id="markdown-output"></div>
       </div>

diff --git a/main.js b/main.js
@@ -241,14 +241,17 @@ function renderDataUrl (dataUrl, dataFieldId, dataType) {
 
   let dataFunction;
   let renderFunction;
+  let dataAlert;
 
   if (dataType === "markdown") {
     dataFunction = d3.text;
     renderFunction = renderMarkdown;
+    dataAlert = document.getElementById('markdownFormFieldAlert')
   }
   else if (dataType === "csv") {
     dataFunction = d3.csv;
     renderFunction = renderCsv;
+    dataAlert = document.getElementById('dataFormFieldAlert');
   }
   else if (dataType === "pdb") {
     dataFunction = (d) => {
@@ -257,6 +260,7 @@ function renderDataUrl (dataUrl, dataFieldId, dataType) {
       return stage.loadFile(d)
     };
     renderFunction = renderPdb;
+    dataAlert = document.getElementById('proteinFormFieldAlert');
   }
   else {
     console.log("Unsupported data type: " + dataType);
@@ -275,10 +279,14 @@ function renderDataUrl (dataUrl, dataFieldId, dataType) {
 
     // Update the URL.
     updateUrlFromFieldIds([dataFieldId]);
+    // make sure the alert is hidden
+    dataAlert.hidden = true
   }).catch(reason => {
     // Let the user know their URL could not be loaded.
     console.log("Failed to load data: " + reason);
     d3.select("#" + dataFieldId).classed('is-invalid', true);
+    // show the error
+    dataAlert.hidden = false
   });
 }