Fix timezone of displayed dates PoonLab#106

Author: horaciobam

index.html

@@ -89,6 +89,7 @@ <h3>Near real-time visualization of SARS-CoV-2 genomic variation</h3>
     <script src="js/jquery.js"></script>
     <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
     <script src="js/d3.js"></script>
+    <script src="js/utils.js"></script>
     <script src="js/beadplot.js"></script>
     <script src="js/phylo.js"></script>
     <script src="js/drawtree.js"></script>

js/beadplot.js

@@ -337,8 +337,7 @@ function beadplot(cid) {
 
         tooltipText += region_to_string(table(d.region));
         tooltipText += `<br><b>Unique collection dates:</b> ${d.numBeads}<br>`;
-        let formatDate = d3.timeFormat("%Y-%m-%d");
-        tooltipText += `<br><b>Collection dates:</b><br>${formatDate(new Date(d.x1))} / ${formatDate(new Date(d.x2))}<br>`;
+        tooltipText += `<br><b>Collection dates:</b><br>${formatDate(d.x1)} / ${formatDate(d.x2)}<br>`;
 
         // Tooltip appears 10 pixels left of the cursor
         bTooltip.html(tooltipText)
@@ -400,8 +399,7 @@ function beadplot(cid) {
         let tooltipText = `<b>Parent:</b> ${d.parent}<br><b>Child:</b> ${d.child}<br>`;
         tooltipText += `<b>Genomic distance:</b> ${d.dist}<br><br>`;
 
-        let formatDate = d3.timeFormat("%Y-%m-%d");
-        tooltipText += `<b>Collection date:</b> ${formatDate(new Date(d.x2))}`;
+        tooltipText += `<b>Collection date:</b> ${formatDate(d.x2)}`;
 
         // Tooltip appears 10 pixels left of the cursor
         bTooltip.html(tooltipText)
@@ -448,8 +446,7 @@ function beadplot(cid) {
         }
 
         tooltipText += region_to_string(table(d.region));
-        let formatDate = d3.timeFormat("%Y-%m-%d");
-        tooltipText += `<br><b>Collection date:</b> ${formatDate(new Date(d.x))}<br>`;
+        tooltipText += `<br><b>Collection date:</b> ${formatDate(d.x)}<br>`;
 
         // Tooltip appears 10 pixels left of the cursor
         bTooltip.html(tooltipText)
@@ -517,7 +514,6 @@ function region_to_string(my_regions) {
  */
 function gen_details_table(obj) {
   var details = [];
-  let formatDate = d3.timeFormat("%Y-%m-%d");
 
   // Check for a list of samples
   if (Array.isArray(obj)) {
@@ -527,7 +523,7 @@ function gen_details_table(obj) {
 
       // "zip" the sequence details of each sample
       for (let i = 0; i < obj[j].accessions.length; i++) {
-        let sample_details = [obj[j].accessions[i], obj[j].labels[i], formatDate(new Date(obj[j].x))];
+        let sample_details = [obj[j].accessions[i], obj[j].labels[i], formatDate(obj[j].x)];
         details.push(sample_details);
       }
     }
@@ -536,7 +532,7 @@ function gen_details_table(obj) {
   else {
     // "zip" the sequence details of each sample
     for (let i = 0; i < obj.accessions.length; i++) {
-      let sample_details = [obj.accessions[i], obj.labels[i], formatDate(new Date(obj.x))];
+      let sample_details = [obj.accessions[i], obj.labels[i], formatDate(obj.x)];
       details.push(sample_details);
     }
   }

js/drawtree.js

@@ -52,14 +52,6 @@ function create_clusterH(obj, obj_2) {
       .raise();
 }
 
-/**
- * Returns true if the string is an accession number
- */
-function is_accn(string) {
-  const accn_pat = /^EPI_ISL_[0-9]+$/i;  // case-insensitive
-  return accn_pat.test(string);
-}
-
 /**
  * Rectangular layout of tree, update nodes in place with x,y coordinates
  * @param {object} root
@@ -255,8 +247,7 @@ function draw_clusters(tips) {
       let ctooltipText = `<b>Mean pairwise distance:</b> ${d.pdist}<br><b>Mean root distance:</b> ${d.rdist}<br><br>`;
       ctooltipText += region_to_string(d.allregions);
       ctooltipText += `<br><b>Number of variants:</b> ${d.varcount}<br>`;
-      const formatDate = d3.timeFormat("%Y-%m-%d");
-      ctooltipText += `<br><b>Collection dates:</b><br>${formatDate(new Date(d.first_date))} / ${formatDate(new Date(d.last_date))}<br>`;
+      ctooltipText += `<br><b>Collection dates:</b><br>${formatDate(d.first_date)} / ${formatDate(d.last_date)}<br>`;
 
       cTooltip.html(ctooltipText)
           .style("left", (d3.event.pageX + 10) + "px")    // Tooltip appears 10 pixels left of the cursor
@@ -284,7 +275,7 @@ function draw_clusters(tips) {
 
       beadplot(d.cluster_idx);
 
-      if (is_accn($('#search-input').val())) {
+      if (isAccn($('#search-input').val())) {
         $('#search-input').val('');
       }
 

js/search.js

@@ -242,7 +242,7 @@ function search(beaddata) {
   const points = find_beads_points(beaddata)
     .filter(point => point.labels.some(label => label.includes(query)));
   // TODO: Make select_bead_by_* use find_beads_points result
-  is_accn(query) ? select_bead_by_accession(query) : select_beads_by_substring(query);
+  isAccn(query) ? select_bead_by_accession(query) : select_beads_by_substring(query);
   const stats = search_stats.update({
     query,
     current_point: 1,

js/utils.js

@@ -0,0 +1,18 @@
+// Utility functions accesible to all scripts
+
+/**
+ * Returns true if the string is an accession number
+ */
+function isAccn(string) {
+  const accn_pat = /^EPI_ISL_[0-9]+$/i;  // case-insensitive
+  return accn_pat.test(string);
+}
+
+/**
+ * Returns a string in an ISO8601 format
+ *
+ * @param {Date} date: The date to be formated
+ */
+function formatDate(date) {
+  return d3.utcFormat("%Y-%m-%d")(date);
+}