Merge pull request #584 from zsloan/feature/add_scroller_gsearch

Feature/add scroller gsearch

3 files changed, 112 insertions, 92 deletions

diff --git a/wqflask/wqflask/gsearch.py b/wqflask/wqflask/gsearch.py
index 8f66f7e9..2516e4fb 100644
--- a/wqflask/wqflask/gsearch.py
+++ b/wqflask/wqflask/gsearch.py
@@ -92,19 +92,30 @@ class GSearch:
                     if (line[8] != "NULL" and line[8] != "") and (line[9] != 0):
                         this_trait['location_repr'] = 'Chr%s: %.6f' % (
                             line[8], float(line[9]))
-                    try:
-                        this_trait['mean'] = '%.3f' % line[10]
-                    except:
-                        this_trait['mean'] = "N/A"
+
                     this_trait['LRS_score_repr'] = "N/A"
+                    this_trait['additive'] = "N/A"
+                    this_trait['mean'] = "N/A"
+
                     if line[11] != "" and line[11] != None:
-                        this_trait['LRS_score_repr'] = '%3.1f' % line[11]
+                        this_trait['LRS_score_repr'] = f"{line[11]:.3f}"
+                    if line[14] != "" and line[14] != None:
+                        this_trait['additive'] = f"{line[14]:.3f}"
+                    if line[10] != "" and line[10] != None:
+                        this_trait['mean'] = f"{line[10]:.3f}"
+
+                    locus_chr = line[16]
+                    locus_mb = line[17]
+
+                    max_lrs_text = "N/A"
+                    if locus_chr and locus_mb:
+                        max_lrs_text = f"Chr{locus_chr}: {locus_mb}"
+                    this_trait['max_lrs_text'] = max_lrs_text
+
                     this_trait['additive'] = "N/A"
                     if line[14] != "" and line[14] != None:
                         this_trait['additive'] = '%.3f' % line[14]
                     this_trait['dataset_id'] = line[15]
-                    this_trait['locus_chr'] = line[16]
-                    this_trait['locus_mb'] = line[17]
 
                     dataset_ob = SimpleNamespace(
                         id=this_trait["dataset_id"], type="ProbeSet", species=this_trait["species"])
@@ -120,11 +131,6 @@ class GSearch:
                         if permissions['data'] == 'no-access':
                             continue
 
-                    max_lrs_text = "N/A"
-                    if this_trait['locus_chr'] and this_trait['locus_mb']:
-                        max_lrs_text = f"Chr{str(this_trait['locus_chr'])}: {str(this_trait['locus_mb'])}"
-                    this_trait['max_lrs_text'] = max_lrs_text
-
                     trait_list.append(this_trait)
 
             self.trait_count = len(trait_list)
@@ -230,32 +236,41 @@ class GSearch:
                             'utf-8', 'replace')
                     else:
                         this_trait['description'] = "N/A"
-                    if line[13] != None and line[13] != "":
-                        this_trait['mean'] = f"{line[13]:.3f}"
-                    else:
-                        this_trait['mean'] = "N/A"
                     this_trait['dataset_id'] = line[14]
-                    this_trait['locus_chr'] = line[15]
-                    this_trait['locus_mb'] = line[16]
+
+                    this_trait['LRS_score_repr'] = "N/A"
+                    this_trait['additive'] = "N/A"
+                    this_trait['mean'] = "N/A"
+
+                    if line[10] != "" and line[10] != None:
+                        this_trait['LRS_score_repr'] = f"{line[10]:.3f}"
+                        # Some Max LRS values in the DB are wrongly listed as 0.000, but shouldn't be displayed
+                        if this_trait['LRS_score_repr'] == "0.000":
+                            this_trait['LRS_score_repr'] = "N/A"
+                    if line[11] != "" and line[11] != None:
+                        this_trait['additive'] = f"{line[11]:.3f}"
+                    if line[13] != "" and line[13] != None:
+                        this_trait['mean'] = f"{line[13]:.3f}"
+
+                    locus_chr = line[15]
+                    locus_mb = line[16]
+
+                    max_lrs_text = "N/A"
+                    if locus_chr and locus_mb:
+                        max_lrs_text = f"Chr{locus_chr}: {locus_mb}"
+                    this_trait['max_lrs_text'] = max_lrs_text
+
                     this_trait['authors'] = line[7]
                     this_trait['year'] = line[8]
+                    this_trait['pubmed_text'] = "N/A"
+                    this_trait['pubmed_link'] = "N/A"
                     if this_trait['year'].isdigit():
                         this_trait['pubmed_text'] = this_trait['year']
-                    else:
-                        this_trait['pubmed_text'] = "N/A"
                     if line[9] != "" and line[9] != None:
                         this_trait['pubmed_link'] = webqtlConfig.PUBMEDLINK_URL % line[8]
-                    else:
-                        this_trait['pubmed_link'] = "N/A"
                         if line[12]:
                             this_trait['display_name'] = line[12] + \
                                 "_" + str(this_trait['name'])
-                    this_trait['LRS_score_repr'] = "N/A"
-                    if line[10] != "" and line[10] != None:
-                        this_trait['LRS_score_repr'] = '%3.1f' % line[10]
-                    this_trait['additive'] = "N/A"
-                    if line[11] != "" and line[11] != None:
-                        this_trait['additive'] = '%.3f' % line[11]
 
                     dataset_ob = SimpleNamespace(id=this_trait["dataset_id"], type="Publish", species=this_trait["species"])
                     permissions = check_resource_availability(dataset_ob, this_trait['name'])
@@ -266,14 +281,6 @@ class GSearch:
                         if permissions['data'] == 'no-access':
                             continue
 
-                    this_trait['max_lrs_text'] = "N/A"
-                    if this_trait['dataset'] == this_trait['group'] + "Publish":
-                        try:
-                            if this_trait['locus_chr'] and this_trait['locus_mb']:
-                                this_trait['max_lrs_text'] = f"Chr{str(this_trait['locus_chr'])}: {str(this_trait['locus_mb'])}"
-                        except:
-                            this_trait['max_lrs_text'] = "N/A"
-
                     trait_list.append(this_trait)
 
             self.trait_count = len(trait_list)
diff --git a/wqflask/wqflask/templates/gsearch_gene.html b/wqflask/wqflask/templates/gsearch_gene.html
index 48953d98..8ff36c1b 100644
--- a/wqflask/wqflask/templates/gsearch_gene.html
+++ b/wqflask/wqflask/templates/gsearch_gene.html
@@ -7,7 +7,7 @@
 {% block content %}
 <!-- Start of body -->
 
-    <div class="container" style="width: 2000px;">
+    <div class="container">
 
         <h3>GN searched for the term(s) <b>"{{ terms }}"</b> in 754 datasets and 39,765,944 traits across 10 species<br/>
             and found <b>{{ trait_count }}</b> results that match your query.<br/>
@@ -31,7 +31,7 @@
             </form>
             <br />
             <br />
-            <div style="width: 100%;">
+            <div style="min-width: 2000px; width: 100%;">
               <table id="trait_table" class="table-hover table-striped cell-border" style="float: left;">
                 <tbody>
                   <td colspan="100%" align="center"><br><b><font size="15">Loading...</font></b><br></td>
@@ -48,6 +48,7 @@
 {% block js %}
     <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='js_alt/md5.min.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/scroller/js/dataTables.scroller.min.js') }}"></script>
     <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='jszip/jszip.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/colReorder/js/dataTables.colReorder.js') }}"></script>
@@ -66,6 +67,10 @@
       };
     </script>
 
+    <script type='text/javascript'>
+      var trait_list = {{ trait_list|safe }};
+    </script>
+
     <script type="text/javascript" charset="utf-8">
         $(document).ready( function () {
             
@@ -102,7 +107,6 @@
                 }
             }
 
-            console.time("Creating table");
             $('#trait_table').DataTable( {
                 'drawCallback': function( settings ) {
                      $('#trait_table tr').click(function(event) {
@@ -150,10 +154,12 @@
                     $('td', row).eq(12).attr('data-export', $('td', row).eq(12).text());
                     $('td', row).eq(13).attr('data-export', $('td', row).eq(13).text());
                 },
+                'data': trait_list,
                 'columns': [
-                    { 
-                      'data': null,
+                    {
                       'orderDataType': "dom-checkbox",
+                      'width': "25px",
+                      'data': null,
                       'render': function(data, type, row, meta) {
                         return '<input type="checkbox" name="searchResult" class="trait_checkbox checkbox" value="' + data.hmac + '">'
                       }
@@ -161,45 +167,53 @@
                     {
                       'title': "Index",
                       'type': "natural", 
+                      'width': "30px",
                       'data': "index"
                     },
                     { 
                       'title': "Record",
                       'type': "natural", 
-                      'data': null,
                       'orderDataType': "dom-inner-text",
+                      'width': "60px",
+                      'data': null,
                       'render': function(data, type, row, meta) {
                         return '<a target="_blank" href="/show_trait?trait_id=' + data.name + '&dataset=' + data.dataset + '">' + data.name + '</a>'
                       }
                     },
                     { 
                       'title': "Species",
-                      'type': "natural", 
+                      'type': "natural",
+                      'width': "60px",
                       'data': "species"
                     },
                     { 
                       'title': "Group",
                       'type': "natural",
+                      'width': "150px",
                       'data': "group"
                     },
                     { 
                       'title': "Tissue",
                       'type': "natural",
+                      'width': "150px",
                       'data': "tissue"
                     },
                     { 
                       'title': "Dataset",
                       'type': "natural",
+                      'width': "300px",
                       'data': "dataset_fullname"
                     },
                     { 
                       'title': "Symbol",
                       'type': "natural",
+                      'width': "60px",
                       'data': "symbol"
                     },
                     { 
                       'title': "Description",
                       'type': "natural",
+                      'width': "300px",
                       'data': null,
                       'render': function(data, type, row, meta) {
                         try {
@@ -212,25 +226,27 @@
                     { 
                       'title': "Location",
                       'type': "natural-minus-na",
-                      'width': "100px",
+                      'width': "125px",
                       'data': "location_repr"
                     },
                     {
                       'title': "Mean",
                       'type': "natural-minus-na",
-                      'data': "mean",
-                      'orderSequence': [ "desc", "asc"]
+                      'orderSequence': [ "desc", "asc"],
+                      'width': "30px",
+                      'data': "mean"
                     },
                     { 
                       'title': "Max<br>LRS<a href=\"{{ url_for('glossary_blueprint.glossary') }}#LRS\" target=\"_blank\" style=\"color: white;\"><sup>?</sup></a>",
                       'type': "natural-minus-na",
+                      'width': "60px",
                       'data': "LRS_score_repr",
                       'orderSequence': [ "desc", "asc"]
                     },
                     { 
-                      'title': "Max LRS<br>Location",
+                      'title': "Max LRS Location",
                       'type': "natural-minus-na",
-                      'width': "100px",
+                      'width': "125px",
                       'data': "max_lrs_text"
                     },
                     { 
@@ -241,20 +257,18 @@
                       'orderSequence': [ "desc", "asc"]
                     }
                 ],
-                'order': [[1, "asc" ]],
-                'sDom': "pitirp",
-                'autoWidth': true,
-                'deferRender': false,
-                'paging': true,
-                'orderClasses': true,
+                "order": [[1, "asc" ]],
+                'sDom': "iti",
+                "autoWidth": true,
+                "bSortClasses": false,
                 'processing': true,
-                'iDisplayLength': 100,
-                'bServerSide': true,
-                'sAjaxSource': '/gsearch_table'+getParams(window.location.href),
-                'language': {
-                  'loadingRecords': '&nbsp;',
-                  'processing': 'Loading...'
-                }
+                {% if trait_count > 20 %}
+                "scrollY": "100vh",
+                "scroller":  true,
+                "scrollCollapse": true
+                {% else %}
+                "iDisplayLength": -1
+                {% endif %}
             } );
 
             $('#trait_table').append(
@@ -277,9 +291,6 @@
                 '</tr>' + 
               '</tfoot>'
             );
-
-            console.timeEnd("Creating table");
-
         });
         
     </script>
diff --git a/wqflask/wqflask/templates/gsearch_pheno.html b/wqflask/wqflask/templates/gsearch_pheno.html
index af9740ae..5f1465d7 100644
--- a/wqflask/wqflask/templates/gsearch_pheno.html
+++ b/wqflask/wqflask/templates/gsearch_pheno.html
@@ -48,6 +48,7 @@
 {% block js %}
     <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='js_alt/md5.min.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/scroller/js/dataTables.scroller.min.js') }}"></script>
     <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='jszip/jszip.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/colReorder/js/dataTables.colReorder.js') }}"></script>
@@ -66,6 +67,10 @@
       };
     </script>
 
+    <script type='text/javascript'>
+      var trait_list = {{ trait_list|safe }};
+    </script>
+
     <script type="text/javascript" charset="utf-8">
         $(document).ready( function () {
 
@@ -102,7 +107,6 @@
                 }
             }
 
-            console.time("Creating table");
             $('#trait_table').DataTable( {
                 'drawCallback': function( settings ) {
                      $('#trait_table tr').click(function(event) {
@@ -138,10 +142,12 @@
                     $('td', row).eq(9).attr('data-export', $('td', row).eq(9).text());
                     $('td', row).eq(10).attr('data-export', $('td', row).eq(10).text());
                 },
+                'data': trait_list,
                 'columns': [
                     {
                       'data': null,
                       'orderDataType': "dom-checkbox",
+                      'width': "25px",
                       'render': function(data, type, row, meta) {
                         return '<input type="checkbox" name="searchResult" class="trait_checkbox checkbox" value="' + data.hmac + '">'
                       }
@@ -149,23 +155,26 @@
                     {
                       'title': "Index",
                       'type': "natural",
+                      'width': "30px",
                       'data': "index"
                     },
                     {
                       'title': "Species",
                       'type': "natural",
+                      'width': "60px",
                       'data': "species"
                     },
                     {
                       'title': "Group",
                       'type': "natural",
-                      'width': "10%",
+                      'width': "100px",
                       'data': "group"
                     },
                     {
                       'title': "Record",
                       'type': "natural",
                       '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>'
@@ -174,7 +183,7 @@
                     {
                       'title': "Description",
                       'type': "natural",
-                      'width': "25%",
+                      'width': "500px",
                       'data': null,
                       'render': function(data, type, row, meta) {
 			                  try {
@@ -187,13 +196,13 @@
                     {
                       'title': "Mean",
                       'type': "natural-minus-na",
-                      'width': "10%",
+                      'width': "30px",
                       'data': "mean"
                     },
                     {
                       'title': "Authors",
                       'type': "natural",
-                      'width': "25%",
+                      'width': "300px",
                       'data': null,
                       'render': function(data, type, row, meta) {
                         author_list = data.authors.split(",")
@@ -202,13 +211,7 @@
                         } else{
                           author_string = data.authors
                         }
-
-			                  try {
-                            return decodeURIComponent(escape(author_string))
-			                  } catch(err) {
-			                      return author_string
-                        }
-
+                        return author_string
                       }
                     },
                     {
@@ -216,6 +219,7 @@
                       'type': "natural-minus-na",
                       'data': null,
                       'orderDataType': "dom-inner-text",
+                      'width': "25px",
                       'render': function(data, type, row, meta) {
                         if (data.pubmed_id != "N/A"){
                           return '<a href="' + data.pubmed_link + '">' + data.pubmed_text + '</a>'
@@ -229,35 +233,35 @@
                       'title': "Max LRS<a href=\"{{ url_for('glossary_blueprint.glossary') }}#LRS\" target=\"_blank\" style=\"color: white;\"><sup>?</sup></a>",
                       'type': "natural-minus-na",
                       'data': "LRS_score_repr",
+                      'width': "60px",
                       'orderSequence': [ "desc", "asc"]
                     },
                     {
                       'title': "Max LRS Location",
                       'type': "natural-minus-na",
-                      'width': "10%",
+                      'width': "125px",
                       'data': "max_lrs_text"
                     },
                     {
                       'title': "Additive Effect<a href=\"{{ url_for('glossary_blueprint.glossary') }}#A\" target=\"_blank\" style=\"color: white;\"><sup>?</sup></a>",
                       'type': "natural-minus-na",
                       'data': "additive",
+                      'width': "60px",
                       'orderSequence': [ "desc", "asc"]
                     }
                 ],
-                'order': [[1, "asc" ]],
-                'sDom': "pitirp",
-                'autoWidth': false,
-                'deferRender': false,
-                'paging': true,
-                'orderClasses': true,
+                "order": [[1, "asc" ]],
+                'sDom': "iti",
+                "autoWidth": true,
+                "bSortClasses": false,
                 'processing': true,
-                'iDisplayLength': 100,
-                'bServerSide': true,
-                'sAjaxSource': '/gsearch_table'+getParams(window.location.href),
-                'language': {
-                  'loadingRecords': '&nbsp;',
-                  'processing': 'Loading...'
-                }
+                {% if trait_count > 20 %}
+                "scrollY": "100vh",
+                "scroller":  true,
+                "scrollCollapse": true
+                {% else %}
+                "iDisplayLength": -1
+                {% endif %}
             } );
 
             $('#trait_table').append(
@@ -277,8 +281,6 @@
                 '</tr>' +
               '</tfoot>'
             );
-
-            console.timeEnd("Creating table");
         });
         
     </script>