More bug fixes

UI:
• Error message will display above whatever is in the body/content of the eFP-Seq Browser instead of replacing it

Bug fix:
• Fixed issue where if the web service returns an error relating to using SAMTools on the BAM files, may cause either continuous loading or failed to load RNA-seq mapping
• Fixed issue where sorting arrows would not appear on Microsoft Edge
• Fixed issue where user cannot download the table as an image on Microsoft Edge
• Fixed misaligned navbar footer

Security:
• Fixed potential client-side cross-site scripting

Documentation:
• Updated installation notes within README

Known issue:
• If the web service timeouts, the eFP-Seq Browser will load continuously
• Loading circle is not centred

.github/workflows/codeql-analysis.yml

@@ -30,7 +30,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        language: [ 'javascript', 'python' ]
+        language: [ 'javascript' ]
         # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ]
         # Learn more:
         # https://docs.github.com/en/free-pro-team@latest/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#changing-the-languages-that-are-analyzed

README.md

@@ -23,14 +23,16 @@ git clone https://github.com/BioAnalyticResource/eFP-Seq-Browser.git
 
 If you wish to modify the code, all .CGI files use [Python 2](https://www.python.org) as well as there are a few [Perl](https://www.perl.org/) scripts. If you are running the primary webservice ([rnaSeqMapCoverage.cgi](cgi-bin/rnaSeqMapCoverage.cgi)) locally, you will also need to install [SAMTools](https://github.com/samtools/samtools) and [bcftools](https://samtools.github.io/bcftools/bcftools.html).
 
-Outside of that, there is nothing to install, just download all the files and open "[index.html](index.html)".
+Outside of that, there is nothing to install, just download all the files and have your server host the [index.html](index.html) file and change all the Python scripts from our server to yours.
 
 ## Known issues
 
 We aim to make the eFP-Seq Browser as perfect as possible but unfortunately, there may be some unforeseen bugs. If you manage to find one that is not here, feel free to create a [bug report](https://github.com/ASully/eFP-Seq-Browser/issues/new?template=bug_report.md) so we can fix it.
+
+Current known issues:
 * The IGB links do not work with Google Drive repositories 
-* Download page as an image does not render SVGs in Microsoft Edge
-* Some sorting arrows may not display in Microsoft Edge
+* If the web service timeouts, the eFP-Seq Browser will load continuously
+* Loading circle is not centred  
 
 ## Contributing
 

cgi-bin/Submission_page/XMLgenerator.js

@@ -465,30 +465,46 @@ function outline_links(bam_name, repo_name) {
   var bam_x = document.getElementById("Entries_all").querySelectorAll(bam_name);
   var i;
   for (i = 0; i < repo_match; i++) {
-    if (x[i].id = "bam_input") {
+    if (x[i].id === "bam_input") {
       if (x[i].value.length > 0) {
-        if (bam_x[i].value == "Google Drive") {
-          if ((x[i].value.includes("drive.google.com/drive/folders/")) == true) {
-            x[i].style.borderColor = null;
-            x[i].style.boxShadow = null;
-          } else if ((x[i].value.includes("drive.google.com/drive/folders/")) == false) {
-            x[i].style.borderColor = "#ff2626";
-            x[i].style.boxShadow = "0 0 10px #ff2626";
-          } else {
-            x[i].style.borderColor = "#ff2626";
-            x[i].style.boxShadow = "0 0 10px #ff2626";
-          };
-        } else if (bam_x[i].value == "Amazon AWS") {
-          if (((x[i].value.includes("amazonaws.com/") || x[i].value.includes("araport.cyverse-cdn.tacc.cloud/")) && (check_amazon_for_bam(x[i].value) == true)) == true) {
-            x[i].style.borderColor = null;
-            x[i].style.boxShadow = null;
-          } else if (((x[i].value.includes("amazonaws.com/") || x[i].value.includes("araport.cyverse-cdn.tacc.cloud/")) && (check_amazon_for_bam(x[i].value) == true)) == false) {
-            x[i].style.borderColor = "#ff2626";
-            x[i].style.boxShadow = "0 0 10px #ff2626";
+        /** Where the BAM file is being hosted */
+        let bamHostType;
+
+        if (bam_x[i] && bam_x[i].value) {
+          bamHostType = bam_x[i].value.trim();
+        };
+
+        /** URL for the hosted BAM file */
+        let urlValue;
+
+        // Convert the 
+        try {
+          urlValue = new URL(x[i].value)
+        } catch {
+          console.error('Unreadable URL presented: ', x[i].value);
+        };
+
+        if (bamHostType && urlValue) {
+          if (bamHostType === 'Amazon AWS') {
+            if (check_amazon_for_bam(x[i].value) && ['s3.amazonaws.com', 'araport.cyverse-cdn.tacc.cloud'].includes(urlValue[host])) {
+              x[i].style.borderColor = null;
+              x[i].style.boxShadow = null;
+            } else {
+              x[i].style.borderColor = "#ff2626";
+              x[i].style.boxShadow = "0 0 10px #ff2626";
+            };
+          } else if (bamHostType === 'Google Drive') {
+            if (['drive.google.com'].includes(urlValue[host])) {
+              x[i].style.borderColor = null;
+              x[i].style.boxShadow = null;
+            } else {
+              x[i].style.borderColor = "#ff2626";
+              x[i].style.boxShadow = "0 0 10px #ff2626";
+            }
           } else {
             x[i].style.borderColor = "#ff2626";
             x[i].style.boxShadow = "0 0 10px #ff2626";
-          };
+          };          
         } else {
           x[i].style.borderColor = "#ff2626";
           x[i].style.boxShadow = "0 0 10px #ff2626";

cgi-bin/core/custom.js

@@ -4,7 +4,7 @@
 //
 //=============================================================================
 /** Current version of eFP-Seq Browser with the following format: [p-public OR d-dev][year - 4 digits][month - 2 digits][day - 2 digits] */
-var version = 'p20210111';
+var version = 'p20210112';
 
 /** Selected RPKM mode */
 var colouring_mode = "abs";
@@ -606,10 +606,10 @@ function variants_radio_options(status) {
  * @param {String} errorMessage The error message that wish to be displayed
  */
 function displayError(errorMessage) {
-  $("#body_of").empty();
+  $("#displayError").empty();
   var append_str = "<p class=\"warning_core\" style=\"text-align:center;\">" + errorMessage + " <br /><br /> PLEASE REFRESH PAGE, RELOAD OR RE-INPUT DATA OR TRY AGAIN AT A LATER TIME </p>";
   console.error('Error in logic:', errorMessage);
-  $("#body_of").append(append_str);
+  $("#displayError").append(append_str);
   $('#locus_button').prop('disabled', true);
   $('#abs_scale_button').prop('disabled', true);
   progress_percent = 100;
@@ -985,7 +985,9 @@ function rnaseq_images(status) {
               document.getElementById(record + '_row').classList.add('mainEntriesError');
             };
 
-            console.error("Unable to create RNA-Seq map coverage data for: Locus - " + locus + " , SRA - " + record + " , dataset - " + base_src);
+            console.error("Unable to create RNA-Seq map coverage data for: Locus - " + locus + ", SRA - " + record + ", dataset - " + base_src);
+          } else {
+            console.log('Error!', response_rnaseq, data)
           };
 
           if (rpkmCount == count_bam_entries_in_xml) {
@@ -1705,13 +1707,13 @@ function clickDetailsTextChange(details_id) {
       document.getElementById(details_id).setAttribute("hidden", true);
       // Non-truncate the details
       var innerDescription = document.getElementById(document.getElementById(details_id).name);
-      innerDescription.innerHTML = innerDescription.getAttribute("name");    
+      innerDescription.textContent = innerDescription.getAttribute("name");    
     } else if (document.getElementById(details_id).innerHTML == lessDetails) {
       var ogID = details_id.substring(0, (details_id.length - 5));
       document.getElementById(ogID).removeAttribute("hidden");
       // Truncate the details
       var innerDescription = document.getElementById(document.getElementById(details_id).name);
-      innerDescription.innerHTML = truncateDescription(innerDescription.getAttribute("name"));
+      innerDescription.textContent = truncateDescription(innerDescription.getAttribute("name"));
     };
   };
 };
@@ -3254,7 +3256,7 @@ function generateShareLink(changeURL = false) {
     window.history.pushState({}, 'Title', window.location.pathname + '?locus=' + locus + '&dataset=' + base_src);
   };
 
-  document.getElementById('shareLinkTextArea').innerHTML = shareLink;
+  document.getElementById('shareLinkTextArea').textContent = shareLink;
 };
 
 var shareLinkInputs = {};
@@ -3271,8 +3273,6 @@ function readShareLink() {
 
   // If exists, continue
   if (query != '') {
-    emptyLanding();
-
     var inputs = query.split('&');
     for (var i = 0; i < inputs.length; i++) {
       var queryInputs = inputs[i].split('=');
@@ -3295,6 +3295,7 @@ function readShareLink() {
 
     // Load new data
     if (locusInput && datasetInput) {
+      emptyLanding();
       progress_percent = 0;
       sraDict = {};
       sraCountDic = {};
@@ -3319,7 +3320,7 @@ function readShareLink() {
  * Copy share link to the user's clipboard
  */
 function copyToClipboard() {
-  if (document.getElementById('shareLinkTextArea') != '') {
+  if (document.getElementById('shareLinkTextArea').trim() !== '') {
     document.getElementById('shareLinkTextArea').select();
     document.execCommand("copy");
   };

cgi-bin/core/style.css

@@ -405,9 +405,8 @@ a {
     position: sticky;
     bottom: 0;
     padding-top: 14px;
-    padding-bottom: 34px;
+    padding-bottom: 14px;
     background: #3d3d3d;
-    margin-left: -10%;
     align-items: center;
 }
 

cgi-bin/rnaSeqMapCoverage.cgi

@@ -433,7 +433,7 @@ def main():
 				if currentTime > (startTime + 300):
 					subprocess.call(["fusermount", "-u", "/mnt/gDrive/" + remoteDrive + "_" + uniqId])
 					subprocess.call(["rm", "-rf", "/mnt/gDrive/" + remoteDrive + "_" + uniqId])
-					dumpError("Mounting timed out", record, locus, base64img, abs_fpkm, r, totalReadsMapped)
+					dumpError("Mounting timed out", locus, record, base64img, abs_fpkm, r, totalReadsMapped)
 
 			# Now make a image using samtools
 			base64img = makeImage(bam_dir, bam_file, "Chr" + chromosome, start, end, record, yscale, hexcode, remoteDrive, bamType)
@@ -448,7 +448,7 @@ def main():
 			if base64img == "FAILED":
 				subprocess.call(["fusermount", "-u", "/mnt/gDrive/" + remoteDrive + "_" + uniqId])
 				subprocess.call(["rm", "-rf", "/mnt/gDrive/" + remoteDrive + "_" + uniqId])
-				dumpError("Failed to get data.", record, locus, base64img, abs_fpkm, r, totalReadsMapped)
+				dumpError("Failed to get data.", locus, record, base64img, abs_fpkm, r, totalReadsMapped)
 
 		elif bamType == "Amazon AWS":
 			# Make S3FS filename here
@@ -535,7 +535,7 @@ def main():
 		try: 
 			lines = subprocess.check_output(['samtools', 'view', bam_file, region], env=my_env)
 		except:
-			dumpError("Unable to retrieve BAM data", record, locus, base64img, abs_fpkm, r, totalReadsMapped)
+			dumpError("Unable to retrieve BAM data", locus, record, base64img, abs_fpkm, r, totalReadsMapped)
 
 		os.chdir("../../../")
 		mapped_reads = lines.lower().count('chr')

index.html

@@ -40,7 +40,7 @@
   <!-- Google APIs-->
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <link rel="stylesheet" href="cgi-bin/core/packages/GoogleMaterial/material.green-pink.min.css">
-  <script defer src="cgi-bin/core/packages/GoogleMaterial/material.min.js"></script>
+  <script async src="cgi-bin/core/packages/GoogleMaterial/material.min.js"></script>
   <!-- END Google APIs-->
   <!-- Global site tag (gtag.js) - Google Analytics -->
   <script async src="https://www.googletagmanager.com/gtag/js?id=UA-38961857-5"></script>
@@ -265,6 +265,8 @@
 
       <!-- Displayed information -->
       <div class="col-9" style="overflow-y: auto; height:100vh; padding: 1px !important;" id="main_content">
+        <div id="displayError"></div>
+
         <!-- Landing page -->
         <div id="landing" style="background-color: white;">
           <div id="landing_body" style="padding: 3%;">