Sort correctly in viz by ensuring we have ints

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

@@ -179,14 +179,20 @@ <h3>Plot Controls</h3>
   // 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) {
-    var temp = sampleFrequency[a] - sampleFrequency[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;
     // if two samples have the same number of features then we
     // determine the order using the sample ID alphabetical order
-    if (temp == 0){
+    if (diff == 0){
       return b.localeCompare(a);
     }
 
-  return temp;
+    return diff;
   });
 
   sortedSampleIDs.forEach(function(element) {
@@ -199,26 +205,28 @@ <h3>Plot Controls</h3>
   });
 
 
-  function updateTableandText(val) {
+  function updateTableandText(samplingDepth) {
     var retainedSampleCount = 0;
 
     // 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)
 
-      if (Number(row.cells[1].innerHTML) < val) {
+      if (sampleFrequency < samplingDepth) {
         row.className = "danger";
       } else {
         row.className = "";
         retainedSampleCount += 1;
       }
     }
-    if (val == 0){
+    if (samplingDepth == 0){
 
     textField.innerHTML = defaultDescription;
 
     }
     else{
-      var retainedFeatureCount = retainedSampleCount * val;
+      var retainedFeatureCount = retainedSampleCount * samplingDepth;
       textField.innerHTML = "Retained " + retainedFeatureCount.toLocaleString('en')
                                         + " (" + (retainedFeatureCount/totalFrequencies*100).toFixed(2) + "%) features in "
                                         + retainedSampleCount + " (" + (retainedSampleCount/sampleCount*100).toFixed(2)
@@ -245,7 +253,6 @@ <h3>Plot Controls</h3>
   function sliderHelperFunction(val){
     updateBoxVal(val);
     updateTableandText(val);
-
   }
 
 
@@ -262,6 +269,11 @@ <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 %}

q2_feature_table/tests/test_summarize.py

@@ -388,7 +388,6 @@ def test_basic(self):
             sample_frequency_fp = os.path.join(output_dir,
                                                'sample-frequency-detail.html')
             self.assertTrue(os.path.exists(sample_frequency_fp))
-
             rx = (r'<script id="table-data" type="application/json">' +
                   r'\n.*[^}]*.*\n</script>')