From c291a82b0127048d3aa969f82d42d29acb142ea2 Mon Sep 17 00:00:00 2001
From: zsloan
Date: Wed, 30 Sep 2020 14:59:30 -0500
Subject: 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
---
 wqflask/wqflask/static/new/javascript/search_results.js | 10 ++++++++--
 wqflask/wqflask/templates/collections/view.html         | 14 +++++++-------
 wqflask/wqflask/templates/correlation_page.html         |  4 ++++
 wqflask/wqflask/templates/search_result_page.html       |  9 +--------
 4 files changed, 20 insertions(+), 17 deletions(-)

(limited to 'wqflask')

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) {
-- 
cgit v1.2.3