From 65222bdf24ce2ef8b8431c71b2c3f332c3174817 Mon Sep 17 00:00:00 2001
From: Anthony Simard <oddant1@hotmail.com>
Date: Tue, 5 Mar 2024 13:35:29 -0700
Subject: [PATCH] Sort correctly in viz by ensuring we have ints (#305)

---
 .../sample-frequency-detail.html              | 28 +++++++++++++------
 q2_feature_table/tests/test_summarize.py      |  1 -
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/q2_feature_table/_summarize/summarize_assets/sample-frequency-detail.html b/q2_feature_table/_summarize/summarize_assets/sample-frequency-detail.html
index 38ee188..420fe0b 100644
--- a/q2_feature_table/_summarize/summarize_assets/sample-frequency-detail.html
+++ b/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 %}
diff --git a/q2_feature_table/tests/test_summarize.py b/q2_feature_table/tests/test_summarize.py
index fbae99d..71c27ee 100644
--- a/q2_feature_table/tests/test_summarize.py
+++ b/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>')