Fixed issue where columns sorted by inner text (text inside link tags)

didn't sort all rows when a table is paginated and has more than one
page

* wqflask/wqflask/static/new/javascript/search_results.js - Added
"extract_inner_text" function for getting the inner text from a string
containing HTML in order to avoid using DataTables' orderDataType (which
can only fetch values directly from the DOM, which is why sorting wasn't
working with multiple pages), and also included this function in the
"natural-minus-na" data type (so columns can be sorted that contain both
HTML/links and N/A values)
* wqflask/wqflask/templates/collections/view.html - Changed record column
to use "natural-minus-na" sort method in order to fix the inner-text
sorting issue + added sorting to the checkbox column (in the same way as
it already works in the search result page)
* wqflask/wqflask/templates/search_results_page.html - Replaced the
columns that used orderDataType with using the updated
"natural-minus-na" data type
* wqflask/wqflask/templates/correlation_page.html - Fixed issue where
N/As in the Year column (for phenotype correlations) were still displayed as links

4 files changed, 20 insertions, 17 deletions

diff --git a/wqflask/wqflask/static/new/javascript/search_results.js b/wqflask/wqflask/static/new/javascript/search_results.js
index 61134a88..86660126 100644
--- a/wqflask/wqflask/static/new/javascript/search_results.js
+++ b/wqflask/wqflask/static/new/javascript/search_results.js
@@ -261,6 +261,12 @@ $(function() {
 
   let na_equivalent_vals = ["N/A", "--", ""]; //ZS: Since there are multiple values that should be treated the same as N/A
 
+  function extract_inner_text(the_string){
+    var span = document.createElement('span');
+    span.innerHTML = the_string;
+    return span.textContent || span.innerText;
+  }
+
   function sort_NAs(a, b, sort_function){
     if ( na_equivalent_vals.includes(a) && na_equivalent_vals.includes(b)) {
       return 0;
@@ -276,10 +282,10 @@ $(function() {
 
   $.extend( $.fn.dataTableExt.oSort, {
     "natural-minus-na-asc": function (a, b) {
-      return sort_NAs(a, b, naturalAsc)
+      return sort_NAs(extract_inner_text(a), extract_inner_text(b), naturalAsc)
     },
     "natural-minus-na-desc": function (a, b) {
-      return sort_NAs(a, b, naturalDesc)
+      return sort_NAs(extract_inner_text(a), extract_inner_text(b), naturalDesc)
     }
   });
 
diff --git a/wqflask/wqflask/templates/collections/view.html b/wqflask/wqflask/templates/collections/view.html
index ca8aece3..bc487a59 100644
--- a/wqflask/wqflask/templates/collections/view.html
+++ b/wqflask/wqflask/templates/collections/view.html
@@ -164,13 +164,13 @@
 {% block js %}
     <script language="javascript" type="text/javascript" src="/static/new/js_external/jszip.min.js"></script>
     <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='js_alt/md5.min.js') }}"></script>
-    <script type="text/javascript" src="/static/new/javascript/search_results.js"></script>
     <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTables/js/jquery.dataTables.min.js') }}"></script>
     <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTablesExtensions/plugins/sorting/natural.js') }}"></script>
     <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTablesExtensions/colResize/dataTables.colResize.js') }}"></script>
     <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTablesExtensions/colReorder/js/dataTables.colReorder.js') }}"></script>
     <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTablesExtensions/buttons/js/dataTables.buttons.min.js') }}"></script>
     <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTablesExtensions/buttons/js/buttons.colVis.min.js') }}"></script>
+    <script type="text/javascript" src="/static/new/javascript/search_results.js"></script>
 
 
     <script language="javascript" type="text/javascript">
@@ -185,10 +185,14 @@
             console.time("Creating table");
             $('#trait_table').dataTable( {
                 "columns": [
-                    { "type": "natural", "width": 10 },
+                    {
+                        "orderDataType": "dom-checkbox",
+                        "orderSequence": [ "desc", "asc"],
+                        "width": 10
+                    },
                     { "type": "natural", "width": 50 },
                     { "type": "natural" },
-                    { "type": "natural", "width": 120 },
+                    { 'type': "natural-minus-na", "width": 120 },
                     { "type": "natural" },
                     { "type": "natural"  },
                     { "type": "natural", "width": 130 },
@@ -197,10 +201,6 @@
                     { "type": "natural", "width": 130 },
                     { "type": "natural" }
                 ],
-                "columnDefs": [ {
-                    "targets": 0,
-                    "orderable": false
-                } ],
                 "order": [[1, "asc" ]],
                 buttons: [
                     {
diff --git a/wqflask/wqflask/templates/correlation_page.html b/wqflask/wqflask/templates/correlation_page.html
index e597bea9..03d93f14 100644
--- a/wqflask/wqflask/templates/correlation_page.html
+++ b/wqflask/wqflask/templates/correlation_page.html
@@ -175,9 +175,13 @@
                         <TD data-export="N/A">N/A</TD>
                         {% endif %}
                         <td data-export="{{ trait.pubmed_text }}">
+                            {% if trait.pubmed_text != "N/A" %}
                             <a href="{{ trait.pubmed_link }}">
                                 {{ trait.pubmed_text }}
                             </a>
+                            {% else %}
+                            {{ trait.pubmed_text }}
+                            {% endif %}
                         </td>
                         <td data-export="{{ '%0.3f'|format(trait.sample_r) }}" align="right"><a target="_blank" href="corr_scatter_plot?dataset_1={{dataset.name}}&dataset_2={{trait.dataset.name}}&trait_1={{this_trait.name}}&trait_2={{trait.name}}">{{ '%0.3f'|format(trait.sample_r) }}</a></td>
                         <td data-export="{{ trait.num_overlap }}" align="right">{{ trait.num_overlap }}</td>
diff --git a/wqflask/wqflask/templates/search_result_page.html b/wqflask/wqflask/templates/search_result_page.html
index 487c6980..e2e1aa46 100644
--- a/wqflask/wqflask/templates/search_result_page.html
+++ b/wqflask/wqflask/templates/search_result_page.html
@@ -274,10 +274,9 @@
                     },
                     {
                       'title': "Record",
-                      'type': "natural",
+                      'type': "natural-minus-na",
                       'data': null,
                       'width': "60px",
-                      'orderDataType': "dom-inner-text",
                       'render': function(data, type, row, meta) {
                         return '<a target="_blank" href="/show_trait?trait_id=' + data.name + '&dataset=' + data.dataset + '">' + data.display_name + '</a>'
                       }
@@ -367,17 +366,11 @@
                           author_string = data.authors
                         }
                         return author_string
-                        // try {
-                        //   return decodeURIComponent(escape(author_string))
-                        // } catch(err){
-                        //   return author_string
-                        // }
                       }
                     },
                     {
                       'title': "Year",
                       'type': "natural-minus-na",
-                      'orderDataType': "dom-inner-text",
                       'data': null,
                       'width': "80px",
                       'render': function(data, type, row, meta) {