Fixed some issues with global search result tables, including:

- Wrong digits for mean expression and additive effect
- Bad loooking width on some columns, like Max LRS Location
- Janky functionality for column resizing and drag-and-dropping (just disabled these functions)
- Geno and Pheno global search tables weren't built in the same way, so now they are

I also fixed the sorting to always put N/A's at the bottom of the table by editing naturalSort.js

4 files changed, 124 insertions, 167 deletions

diff --git a/wqflask/wqflask/static/new/packages/DataTables/js/dataTables.naturalSort.js b/wqflask/wqflask/static/new/packages/DataTables/js/dataTables.naturalSort.js
index c9e26682..0198fd48 100755
--- a/wqflask/wqflask/static/new/packages/DataTables/js/dataTables.naturalSort.js
+++ b/wqflask/wqflask/static/new/packages/DataTables/js/dataTables.naturalSort.js
@@ -1,56 +1,68 @@
-(function() {

- 

-/*

- * Natural Sort algorithm for Javascript - Version 0.7 - Released under MIT license

- * Author: Jim Palmer (based on chunking idea from Dave Koelle)

- * Contributors: Mike Grier (mgrier.com), Clint Priest, Kyle Adams, guillermo

- * See: http://js-naturalsort.googlecode.com/svn/trunk/naturalSort.js

- */

-function naturalSort (a, b) {

-    var re = /(^-?[0-9]+(\.?[0-9]*)[df]?e?[0-9]?$|^0x[0-9a-f]+$|[0-9]+)/gi,

-        sre = /(^[ ]*|[ ]*$)/g,

-        dre = /(^([\w ]+,?[\w ]+)?[\w ]+,?[\w ]+\d+:\d+(:\d+)?[\w ]?|^\d{1,4}[\/\-]\d{1,4}[\/\-]\d{1,4}|^\w+, \w+ \d+, \d{4})/,

-        hre = /^0x[0-9a-f]+$/i,

-        ore = /^0/,

-        // convert all to strings and trim()

-        x = a.toString().replace(sre, '') || '',

-        y = b.toString().replace(sre, '') || '',

-        // chunk/tokenize

-        xN = x.replace(re, '\0$1\0').replace(/\0$/,'').replace(/^\0/,'').split('\0'),

-        yN = y.replace(re, '\0$1\0').replace(/\0$/,'').replace(/^\0/,'').split('\0'),

-        // numeric, hex or date detection

-        xD = parseInt(x.match(hre)) || (xN.length != 1 && x.match(dre) && Date.parse(x)),

-        yD = parseInt(y.match(hre)) || xD && y.match(dre) && Date.parse(y) || null;

-    // first try and sort Hex codes or Dates

-    if (yD)

-        if ( xD < yD ) return -1;

-        else if ( xD > yD )  return 1;

-    // natural sorting through split numeric strings and default strings

-    for(var cLoc=0, numS=Math.max(xN.length, yN.length); cLoc < numS; cLoc++) {

-        // find floats not starting with '0', string or 0 if not defined (Clint Priest)

-        var oFxNcL = !(xN[cLoc] || '').match(ore) && parseFloat(xN[cLoc]) || xN[cLoc] || 0;

-        var oFyNcL = !(yN[cLoc] || '').match(ore) && parseFloat(yN[cLoc]) || yN[cLoc] || 0;

-        // handle numeric vs string comparison - number < string - (Kyle Adams)

-        if (isNaN(oFxNcL) !== isNaN(oFyNcL)) return (isNaN(oFxNcL)) ? 1 : -1;

-        // rely on string comparison if different types - i.e. '02' < 2 != '02' < '2'

-        else if (typeof oFxNcL !== typeof oFyNcL) {

-            oFxNcL += '';

-            oFyNcL += '';

-        }

-        if (oFxNcL < oFyNcL) return -1;

-        if (oFxNcL > oFyNcL) return 1;

-    }

-    return 0;

-}

- 

-jQuery.extend( jQuery.fn.dataTableExt.oSort, {

-    "natural-asc": function ( a, b ) {

-        return naturalSort(a,b);

-    },

- 

-    "natural-desc": function ( a, b ) {

-        return naturalSort(a,b) * -1;

-    }

-} );

- 

+(function() {
+ 
+/*
+ * Natural Sort algorithm for Javascript - Version 0.7 - Released under MIT license
+ * Author: Jim Palmer (based on chunking idea from Dave Koelle)
+ * Contributors: Mike Grier (mgrier.com), Clint Priest, Kyle Adams, guillermo
+ * See: http://js-naturalsort.googlecode.com/svn/trunk/naturalSort.js
+ */
+function naturalSort (a, b) {
+    var re = /(^-?[0-9]+(\.?[0-9]*)[df]?e?[0-9]?$|^0x[0-9a-f]+$|[0-9]+)/gi,
+        sre = /(^[ ]*|[ ]*$)/g,
+        dre = /(^([\w ]+,?[\w ]+)?[\w ]+,?[\w ]+\d+:\d+(:\d+)?[\w ]?|^\d{1,4}[\/\-]\d{1,4}[\/\-]\d{1,4}|^\w+, \w+ \d+, \d{4})/,
+        hre = /^0x[0-9a-f]+$/i,
+        ore = /^0/,
+        // convert all to strings and trim()
+        x = a.toString().replace(sre, '') || '',
+        y = b.toString().replace(sre, '') || '',
+        // chunk/tokenize
+        xN = x.replace(re, '\0$1\0').replace(/\0$/,'').replace(/^\0/,'').split('\0'),
+        yN = y.replace(re, '\0$1\0').replace(/\0$/,'').replace(/^\0/,'').split('\0'),
+        // numeric, hex or date detection
+        xD = parseInt(x.match(hre)) || (xN.length != 1 && x.match(dre) && Date.parse(x)),
+        yD = parseInt(y.match(hre)) || xD && y.match(dre) && Date.parse(y) || null;
+
+    // first try and sort Hex codes or Dates
+    if (yD)
+        if ( xD < yD ) return -1;
+        else if ( xD > yD )  return 1;
+
+    // natural sorting through split numeric strings and default strings
+    for(var cLoc=0, numS=Math.max(xN.length, yN.length); cLoc < numS; cLoc++) {
+        // find floats not starting with '0', string or 0 if not defined (Clint Priest)
+        var oFxNcL = !(xN[cLoc] || '').match(ore) && parseFloat(xN[cLoc]) || xN[cLoc] || 0;
+        var oFyNcL = !(yN[cLoc] || '').match(ore) && parseFloat(yN[cLoc]) || yN[cLoc] || 0;
+        // handle numeric vs string comparison - number < string - (Kyle Adams)
+        if (isNaN(oFxNcL) !== isNaN(oFyNcL)) return (isNaN(oFxNcL)) ? 1 : -1;
+        // rely on string comparison if different types - i.e. '02' < 2 != '02' < '2'
+        else if (typeof oFxNcL !== typeof oFyNcL) {
+            oFxNcL += '';
+            oFyNcL += '';
+        }
+        if (oFxNcL < oFyNcL) return -1;
+        if (oFxNcL > oFyNcL) return 1;
+    }
+
+    return 0;
+}
+ 
+jQuery.extend( jQuery.fn.dataTableExt.oSort, {
+    "natural-asc": function ( a, b ) {
+        // first check if null or n/a
+        if (a == "N/A" || a == "NA") return 1;
+        else if (b == "N/A" || b == "NA") return -1;
+        else {
+            return naturalSort(a,b);
+        }
+    },
+ 
+    "natural-desc": function ( a, b ) {
+        if (a == "N/A" || a == "NA") return 1;
+        else if (b == "N/A" || b == "NA") return -1;
+        else {
+            return naturalSort(a,b) * -1;
+        }
+    }
+} );
+ 
 }());
\ No newline at end of file
diff --git a/wqflask/wqflask/templates/gsearch_gene.html b/wqflask/wqflask/templates/gsearch_gene.html
index 37e26817..ff4254aa 100755
--- a/wqflask/wqflask/templates/gsearch_gene.html
+++ b/wqflask/wqflask/templates/gsearch_gene.html
@@ -38,7 +38,7 @@
                     <th>Description</th> 
                     <th>Location</th>
                     <th>Mean</th>
-                    <th>Max<br>LRS<a href="http://genenetwork.org/glossary.html#L" target="_blank"><sup style="color:#f00"> ?</sup></a></th>
+                    <th>Max&nbsp;&nbsp;<br>LRS<a href="http://genenetwork.org/glossary.html#L" target="_blank"><sup style="color:#f00"> ?</sup></a></th>
                     <th>Max LRS Location</th>
                     <th>Additive<br>Effect<a href="http://genenetwork.org/glossary.html#A" target="_blank"><sup style="color:#f00"> ?</sup></a></th>
                   </tr>
@@ -55,11 +55,11 @@
                     <td><a href="{{ url_for('show_trait_page', trait_id = this_trait.name, dataset = this_trait.dataset.name)}}">{{ this_trait.name }}</a></td>
                     <td>{{ this_trait.symbol }}</td>
                     <td>{{ this_trait.description_display }}</td>
-                    <td>{{ this_trait.location_repr }}</td>
-                    <td>{{ this_trait.mean }}</td>
-                    <td>{{ this_trait.LRS_score_repr }}</td>
-                    <td>{{ this_trait.LRS_location_repr }}</td>
-                    <td>{{ this_trait.additive }}</td>
+                    <td align="right">{{ this_trait.location_repr }}</td>
+                    <td align="right">{{ '%0.3f' % this_trait.mean|float }}</td>
+                    <td align="right">{{ '%0.1f' % this_trait.LRS_score_repr|float }}</td>
+                    <td align="right">{{ this_trait.LRS_location_repr }}</td>
+                    <td align="right">{{ '%0.3f' % this_trait.additive|float }}</td>
                   </tr>
                   {% endfor %}
               </table>
@@ -100,42 +100,6 @@
             }
             return parseFloat(x);
         }
-            
-        jQuery.fn.dataTableExt.oSort['cust-txt-asc'] = function (a, b) {
-            var x = getValue(a);
-            var y = getValue(b); 
-            
-            if (x == 'N/A' || x == '') {
-                return 1;
-            }
-            else if (y == 'N/A' || y == '') {
-                return -1;
-            }
-            else {
-                return ((x < y) ? -1 : ((x > y) ? 1 : 0));
-            }
-        };
-
-        jQuery.fn.dataTableExt.oSort['cust-txt-asc'] = function (a, b) {
-            var x = getValue(a);
-            var y = getValue(b); 
-            
-            if (x == 'N/A' || x == '') {
-                return 1;
-            }
-            else if (y == 'N/A' || y == '') {
-                return -1;
-            }
-            else {
-                return ((x < y) ? -1 : ((x > y) ? 1 : 0));
-            }
-        };
-  
-        jQuery.fn.dataTableExt.oSort['cust-txt-desc'] = function (a, b) {
-            var x = getValue(a);
-            var y = getValue(b);
-            return ((x < y) ? 1 : ((x > y) ? -1 : 0));
-        };
 
         $.fn.dataTable.ext.order['dom-checkbox'] = function  ( settings, col )
         {
@@ -167,25 +131,27 @@
                     }
                 ],
                 "columns": [
-                    { "data": "checkbox", "orderable" : false },
-                    { "data": "index", "orderable" : true },
-                    { "data": "species", "orderable" : true },
-                    { "data": "group", "orderable" : true },
-                    { "data": "tissue", "orderable" : true },
-                    { "data": "dataset", "orderable" : true },
-                    { "data": "record", "orderable" : true },
-                    { "data": "symbol", "orderable" : true },
-                    { "data": "description", "orderable" : true },
-                    { "data": "location", "orderable" : true },
-                    { "data": "mean", "orderable" : true },
-                    { "data": "max_lrs", "orderable" : true },
-                    { "data": "max_lrs_location", "orderable" : true },
-                    { "data": "additive_effect", "orderable" : true }
+                    { "type": "natural" },
+                    { "type": "natural" },
+                    { "type": "natural" },
+                    { "type": "natural", "width": "8%"  },
+                    { "type": "natural" },
+                    { "type": "natural" },
+                    { "type": "natural" },
+                    { "type": "natural" },
+                    { "type": "natural" },
+                    { "type": "natural", "width": "8%" },
+                    { "type": "natural" },
+                    { "type": "natural", "width": "5%" },
+                    { "type": "natural", "width": "8%" },
+                    { "type": "natural" }
                 ],
-                "sDom": "RZBtir",
+                "order": [[1, "asc" ]],
+                "sDom": "Btir",
                 "autoWidth": false,
+                "bDeferRender": true,
                 "scrollY": "800px",
-                "bDeferRender": true
+                "scrollCollapse": false
             } );
 
             console.timeEnd("Creating table");
diff --git a/wqflask/wqflask/templates/gsearch_pheno.html b/wqflask/wqflask/templates/gsearch_pheno.html
index 3c9f6841..b1f86adc 100755
--- a/wqflask/wqflask/templates/gsearch_pheno.html
+++ b/wqflask/wqflask/templates/gsearch_pheno.html
@@ -25,10 +25,11 @@
             <input type="text" id="select_top" class="form-control" style="width: 200px; display: inline;" placeholder="Select Top ...">
             <br />
             <br />
-            <table class="table table-hover table-striped" id='trait_table'  style="float: left;">
+            <div style="width: 1500px;">
+            <table width="1500px" id="trait_table" class="table table-hover table-striped">
                 <thead>
                     <tr>
-                        <th style="width: 30px;"></th>
+                        <th></th>
                         <th>Index</th>
                         <th>Species</th>
                         <th>Group</th>
@@ -44,21 +45,22 @@
                 <tbody>
                  {% for this_trait in trait_list %}
                     <TR id="trait:{{ this_trait.name }}:{{ this_trait.dataset.name }}">
-                        <TD><INPUT TYPE="checkbox" NAME="searchResult" class="checkbox trait_checkbox" style="transform: scale(1.5);" VALUE="{{ data_hmac('{}:{}'.format(this_trait.name, this_trait.dataset.name)) }}"></TD>
-                        <TD>{{ loop.index }}</TD>
-                        <TD>{{ this_trait.dataset.group.species }}</TD>
-                        <TD>{{ this_trait.dataset.group.name }}</TD>
-                        <TD><a href="{{ url_for('show_trait_page', trait_id = this_trait.name, dataset = this_trait.dataset.name)}}">{{ this_trait.name }}</a></TD>
-                        <TD>{{ this_trait.description_display }}</TD>
-                        <TD>{{ this_trait.authors }}</TD>
-                        <TD><a href="{{ this_trait.pubmed_link }}">{{ this_trait.pubmed_text }}</a></TD>
-                        <TD>{{ this_trait.LRS_score_repr }}</TD>
-                        <TD>{{ this_trait.LRS_location_repr }}</TD>
-                        <TD>{{ '%0.3f' % this_trait.additive|float }}</TD>
+                        <td><INPUT TYPE="checkbox" NAME="searchResult" class="checkbox trait_checkbox" style="transform: scale(1.5);" VALUE="{{ data_hmac('{}:{}'.format(this_trait.name, this_trait.dataset.name)) }}"></td>
+                        <td>{{ loop.index }}</td>
+                        <td>{{ this_trait.dataset.group.species }}</td>
+                        <td>{{ this_trait.dataset.group.name }}</td>
+                        <td><a href="{{ url_for('show_trait_page', trait_id = this_trait.name, dataset = this_trait.dataset.name)}}">{{ this_trait.name }}</a></td>
+                        <td>{{ this_trait.description_display }}</td>
+                        <td>{{ this_trait.authors }}</td>
+                        <td><a href="{{ this_trait.pubmed_link }}">{{ this_trait.pubmed_text }}</a></td>
+                        <td align="right">{{ '%0.1f' % this_trait.LRS_score_repr|float }}</td>
+                        <td align="right">{{ this_trait.LRS_location_repr }}</td>
+                        <td align="right">{{ '%0.3f' % this_trait.additive|float }}</td>
                     </TR>
                 {% endfor %}
                 </tbody>
             </table>
+            </div>
         </div>
     </div>
 
@@ -127,20 +129,7 @@
 
             console.time("Creating table");
             $('#trait_table').DataTable( {
-                "columns": [
-                    { "bSortClasses": false },
-                    { "type": "natural" },
-                    { "type": "natural" },
-                    { "type": "natural" },
-                    { "type": "natural" },
-                    { "type": "natural", "width": "20%"},
-                    { "type": "natural" },
-                    { "type": "natural" },
-                    { "type": "natural" },
-                    { "type": "natural", "width": "12%"},
-                    { "type": "natural" }
-                ],
-                "order": [[ 1, "asc" ]],
+                "paging": false,
                 "buttons": [
                     {
                        extend: 'csvHtml5',
@@ -152,15 +141,25 @@
                        }
                     }
                 ],
-                "sDom": "RZBtir",
+                "columns": [
+                    { "type": "natural" },
+                    { "type": "natural" },
+                    { "type": "natural" },
+                    { "type": "natural" },
+                    { "type": "natural" },
+                    { "type": "natural", "width": "30%"},
+                    { "type": "natural", "width": "25%"},
+                    { "type": "natural" },
+                    { "type": "natural", "width": "8%"},
+                    { "type": "natural", "width": "12%"},
+                    { "type": "natural" }
+                ],
+                "order": [[1, "asc" ]],
+                "sDom": "Btir",
                 "autoWidth": false,
-                "bLengthChange": true,
                 "bDeferRender": true,
-                "scrollCollapse": false,
-                "colResize": {
-                    "tableWidthFixed": false,
-                },
-                "paging": false
+                "scrollY": "800px",
+                "scrollCollapse": false
             } );
             console.timeEnd("Creating table");
         });
diff --git a/wqflask/wqflask/templates/search_result_page.html b/wqflask/wqflask/templates/search_result_page.html
index a4ef68b9..7d852e42 100755
--- a/wqflask/wqflask/templates/search_result_page.html
+++ b/wqflask/wqflask/templates/search_result_page.html
@@ -219,26 +219,6 @@
                 }
             });
 
-/*
-                serverSide: true,
-                ajax: function ( data, callback, settings ) {
-                    var out = [];
- 
-                    for ( var i=data.start, ien=data.start+data.length ; i<ien ; i++ ) {
-                        out.push( [ i+'-1', i+'-2', i+'-3', i+'-4', i+'-5' ] );
-                    }
- 
-                    setTimeout( function () {
-                        callback( {
-                            draw: data.draw,
-                            data: out,
-                            recordsTotal: 5000000,
-                            recordsFiltered: 5000000
-                        } );
-                    }, 50 );
-                },
-*/
-
             console.time("Creating table");
             {% if dataset.type == 'ProbeSet' %}
             //ZS: Need to make sort by symbol, also need to make sure blank symbol fields at the bottom and symbols starting with numbers below letters