Format in JS

q2_feature_table/_summarize/_visualizer.py

@@ -168,12 +168,7 @@ def summarize(output_dir: str, table: biom.Table,
     feature_qualitative_data = _compute_qualitative_summary(table)
     sample_frequencies.sort_values(inplace=True, ascending=False)
 
-    sample_frequencies_json = pd.Series(["{:,}".format(int(x)) for x in
-                                         sample_frequencies],
-                                        index=sample_frequencies.index)
-
     feature_frequencies.sort_values(inplace=True, ascending=False)
-
     feature_frequencies = feature_frequencies.astype(int) \
         .apply('{:,}'.format).to_frame('Frequency')
     feature_frequencies['# of Samples Observed In'] = \
@@ -196,7 +191,7 @@ def summarize(output_dir: str, table: biom.Table,
 
     # Create a JSON object containing the Sample Frequencies to build the
     # table in sample-frequency-detail.html
-    sample_frequencies_json = sample_frequencies_json.to_json()
+    sample_frequencies_json = sample_frequencies.to_json()
 
     templates = [index, sample_frequency_template, feature_frequency_template]
     context.update({'frequencies_list':

q2_feature_table/_summarize/summarize_assets/sample-frequency-detail.html

@@ -161,6 +161,8 @@ <h3>Plot Controls</h3>
 </script>
 
 <script type="text/javascript">
+  const formatter = new Intl.NumberFormat({numberingSystem: "latn"})
+
   var totalFrequencies = {{total_frequencies}};
   var sampleCount = {{number_of_samples}};
   var defaultDescription = "Retained " + (totalFrequencies.toLocaleString('en'))
@@ -175,17 +177,11 @@ <h3>Plot Controls</h3>
   // when the viz loads the default description is displayed
   textField.innerHTML = defaultDescription;
 
-  var sampleFrequency = JSON.parse(document.getElementById("table-data").innerHTML);
+  var sampleFrequencies = JSON.parse(document.getElementById("table-data").innerHTML);
   // get object keys and store them in an ascending order based on the key value
   // this order is used to create the table rows
-  sortedSampleIDs = Object.keys(sampleFrequency).sort(function(a, b) {
-    // The values of sampleFrequency are now strings of the form "1,234" as
-    // opposed to the numerical value "1234", so in order to compare these
-    // based on numerical value we get rid of the commas and cast to int in
-    // order to subtract normally
-    const aVal = strToInt(sampleFrequency[a]);
-    const bVal = strToInt(sampleFrequency[b]);
-    const diff = aVal - bVal;
+  sortedSampleIDs = Object.keys(sampleFrequencies).sort(function(a, b) {
+    const diff = sampleFrequencies[a] - sampleFrequencies[b];
     // if two samples have the same number of features then we
     // determine the order using the sample ID alphabetical order
     if (diff == 0){
@@ -197,11 +193,10 @@ <h3>Plot Controls</h3>
 
   sortedSampleIDs.forEach(function(element) {
     var row = tableBody.insertRow(0);
-    var cell1 = row.insertCell(0);
-    var cell2 = row.insertCell(1);
-    cell1.innerHTML = element;
-    cell2.innerHTML = sampleFrequency[element];
-
+    var sampleIDCell = row.insertCell(0);
+    var sampleFrequencyCell = row.insertCell(1);
+    sampleIDCell.innerText = element;
+    sampleFrequencyCell.innerText = formatter.format(sampleFrequencies[element]);
   });
 
 
@@ -210,8 +205,8 @@ <h3>Plot Controls</h3>
 
     // start the counter at 1 to ignore the header row
     for (var i = 1; row = table.rows[i]; i++) {
-      let sampleFrequency = row.cells[1].innerHTML;
-      sampleFrequency = strToInt(sampleFrequency)
+      const sampleID = row.cells[0].innerText;
+      const sampleFrequency = sampleFrequencies[sampleID];
 
       if (sampleFrequency < samplingDepth) {
         row.className = "danger";
@@ -221,18 +216,15 @@ <h3>Plot Controls</h3>
       }
     }
     if (samplingDepth == 0){
-
-    textField.innerHTML = defaultDescription;
-
+      textField.innerHTML = defaultDescription;
     }
     else{
-      var retainedFeatureCount = retainedSampleCount * samplingDepth;
-      textField.innerHTML = "Retained " + retainedFeatureCount.toLocaleString('en')
+      const retainedFeatureCount = retainedSampleCount * samplingDepth;
+      textField.innerHTML = "Retained " + formatter.format(retainedFeatureCount)
                                         + " (" + (retainedFeatureCount/totalFrequencies*100).toFixed(2) + "%) features in "
                                         + retainedSampleCount + " (" + (retainedSampleCount/sampleCount*100).toFixed(2)
                                         +  "%) samples at the specifed sampling depth.";
     }
-
   }
 
 
@@ -269,11 +261,6 @@ <h3>Plot Controls</h3>
     }
     updateSliderVal(val);
   }
-
-  // Parse a string that may contain commas into a base 10 integer
-  function strToInt(val) {
-    return parseInt(val.replaceAll(",", ""), 10);
-  }
 </script>
 
 {% endblock %}