From 3bc5e361d135777c1c4cfc2cef5b6aca7a6fa984 Mon Sep 17 00:00:00 2001
From: zsloan
Date: Fri, 3 Jun 2016 23:04:48 +0000
Subject: Made a bunch of changes to correlation and search result tables
 (mainly the former) and made all tables a little more compact by lessenning
 the padding

---
 .../packages/DataTables/css/jquery.dataTables.css  |   4 +-
 .../DataTables/js/dataTables.naturalSort.js        |   8 +-
 wqflask/wqflask/templates/correlation_page.html    | 252 +++++++++++----------
 wqflask/wqflask/templates/search_result_page.html  |   2 +
 4 files changed, 145 insertions(+), 121 deletions(-)

diff --git a/wqflask/wqflask/static/new/packages/DataTables/css/jquery.dataTables.css b/wqflask/wqflask/static/new/packages/DataTables/css/jquery.dataTables.css
index 931ec6b3..6540d01f 100755
--- a/wqflask/wqflask/static/new/packages/DataTables/css/jquery.dataTables.css
+++ b/wqflask/wqflask/static/new/packages/DataTables/css/jquery.dataTables.css
@@ -20,7 +20,7 @@ table.dataTable tfoot th {
 }
 table.dataTable thead th,
 table.dataTable thead td {
-  padding: 10px 18px;
+  padding: 10px 18px 10px 0px;
   border-bottom: 1px solid #111;
 }
 table.dataTable thead th:active,
@@ -69,7 +69,7 @@ table.dataTable tbody tr.selected {
 }
 table.dataTable tbody th,
 table.dataTable tbody td {
-  padding: 8px 10px;
+  padding: 4px 5px;
 }
 table.dataTable.row-border tbody th, table.dataTable.row-border tbody td, table.dataTable.display tbody th, table.dataTable.display tbody td {
   border-top: 1px solid #ddd;
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 dbb40446..8b7fa8fd 100755
--- a/wqflask/wqflask/static/new/packages/DataTables/js/dataTables.naturalSort.js
+++ b/wqflask/wqflask/static/new/packages/DataTables/js/dataTables.naturalSort.js
@@ -49,16 +49,16 @@ function naturalSort (a, b) {
 jQuery.extend( jQuery.fn.dataTableExt.oSort, {
     "natural-asc": function ( a, b ) {
         // first check if null or n/a
-        if (a == "N/A" || a == "NA" || a == "") return 1;
-        else if (b == "N/A" || b == "NA" || b == "") return -1;
+        if (a == "N/A" || a == "NA" || a == "" || a == "--") return 1;
+        else if (b == "N/A" || b == "NA" || b == "" || b == "--") return -1;
         else {
             return naturalSort(a,b);
         }
     },
  
     "natural-desc": function ( a, b ) {
-        if (a == "N/A" || a == "NA" || a == "") return 1;
-        else if (b == "N/A" || b == "NA" || b == "") return -1;
+        if (a == "N/A" || a == "NA" || a == "" || a == "--") return 1;
+        else if (b == "N/A" || b == "NA" || b == "" || b == "--") return -1;
         else {
             return naturalSort(a,b) * -1;
         }
diff --git a/wqflask/wqflask/templates/correlation_page.html b/wqflask/wqflask/templates/correlation_page.html
index efc94c42..c5b4477b 100755
--- a/wqflask/wqflask/templates/correlation_page.html
+++ b/wqflask/wqflask/templates/correlation_page.html
@@ -3,8 +3,6 @@
     <link rel="stylesheet" type="text/css" href="/static/new/packages/DataTables/css/jquery.dataTables.css" />
     <link rel="stylesheet" type="text/css" href="/static/packages/DT_bootstrap/DT_bootstrap.css" />
     <link rel="stylesheet" type="text/css" href="/static/packages/TableTools/media/css/TableTools.css" />
-    <link href="//cdn.datatables.net/fixedheader/2.1.2/css/dataTables.fixedHeader.css" rel="stylesheet">
-    <link href="//cdn.datatables.net/fixedcolumns/3.0.4/css/dataTables.fixedColumns.css" rel="stylesheet">
     <link rel="stylesheet" type="text/css" href="/static/new/packages/DataTables/extensions/buttons.bootstrap.css" />
 {% endblock %}
 {% block content %}
@@ -34,55 +32,65 @@
         <br />
         <br />
 
-        <div>
-            <table id="trait_table" class="table table-hover table-striped">
+        <div style="width: {% if target_dataset.type == "ProbeSet" %}1600px{% elif target_dataset.type == "Publish" %}1200px{% else %}800px{% endif %}; background-color: #eeeeee; border: 1px solid black;">
+            <table width="1600px" id="trait_table" class="table table-hover table-striped">
                 <thead>
                     <tr>
-                        <th style="width: 30px;"></th>
+                        <th style="width: 30px; background-color: #eeeeee;"></th>
                     {% for header in target_dataset.header_fields %}
-                        {% if header == 'Max LRS' %}
-                        <th style="text-align: right;">Max&nbsp;&nbsp;<br>LRS<a href="http://genenetwork.org//glossary.html#L" target="_blank"><sup style="color:#f00"> ?</sup></a></th>
+                        {% if header == 'Year' %}
+                        <th style="text-align: right; background-color: #eeeeee;">{{header}}</th>
+                        {% elif header == 'Max LRS' %}
+                        <th style="text-align: right; background-color: #eeeeee;">Max&nbsp;&nbsp;<br>LRS<a href="http://genenetwork.org//glossary.html#L" target="_blank"><sup style="color:#f00"> ?</sup></a></th>
+                        {% elif header == 'Max LRS Location' %}
+                        <th style="text-align: right; background-color: #eeeeee;">{{header}}</th>
+                        {% elif header == 'Location' %}
+                        <th style="text-align: right; background-color: #eeeeee;">{{header}}</th>
+                        {% elif header == 'Mean' %}
+                        <th style="text-align: right; background-color: #eeeeee;">{{header}}</th>
                         {% elif header == 'Additive Effect' %}
-                        <th style="text-align: right;">Additive<br>Effect<a href="http://genenetwork.org//glossary.html#A" target="_blank"><sup style="color:#f00"> ?</sup></a></th>
+                        <th style="text-align: right; background-color: #eeeeee;">Add&nbsp;&nbsp;<br>Effect<a href="http://genenetwork.org//glossary.html#A" target="_blank"><sup style="color:#f00"> ?</sup></a></th>
+                        {% elif header == 'Index' %}
+                        <th style="text-align: right; background-color: #eeeeee; padding-left: 0px; margin-left: 0px;">{{header}}</th>
+                        {% elif header == 'N' %}
+                        <th style="text-align: right; background-color: #eeeeee;">{{header}}</th>
                         {% else %}
-                        <th>{{header}}</th>
+                        <th style="background-color: #eeeeee;">{{header}}</th>
                         {% endif %}
                     {% endfor %}
-                        {% if target_dataset.type == "ProbeSet" %}
+                    {% if target_dataset.type == "ProbeSet" %}
                         {% if corr_method == 'pearson' %}
-                        <th>Sample r</th>
-                        <th>N Cases</th>
-                        <th>Sample p(r)</th>
-                        <th>Lit Corr</th>
-                        <th>Tissue r</th>
-                        <th>Tissue p(r)</th>
+                        <th style="text-align: right; background-color: #eeeeee;">Sample r</th>
+                        <th style="text-align: right; background-color: #eeeeee;">&nbsp;&nbsp;N</th>
+                        <th style="text-align: right; background-color: #eeeeee;">Sample p(r)</th>
+                        <th style="text-align: right; background-color: #eeeeee;">Lit r</th>
+                        <th style="text-align: right; background-color: #eeeeee;">Tissue r</th>
                         {% else %}
-                        <th>Sample rho</th>
-                        <th>N Cases</th>
-                        <th>Sample p(rho)</th>
-                        <th>Lit Corr</th>
-                        <th>Tissue rho</th>
-                        <th>Tissue p(rho)</th>
+                        <th style="text-align: right; background-color: #eeeeee;">Sample rho</th>
+                        <th style="text-align: right; background-color: #eeeeee;">N</th>
+                        <th style="text-align: right; background-color: #eeeeee;">Sample p(rho)</th>
+                        <th style="text-align: right; background-color: #eeeeee;">Lit r</th>
+                        <th style="text-align: right; background-color: #eeeeee;">Tissue rho</th>
                         {% endif %}
                     {% elif target_dataset.type == "Publish" %}
                         {% if corr_method == 'pearson' %}
-                        <th>Sample r</th>
-                        <th>N Cases</th>
-                        <th>Sample p(r)</th>
+                        <th style="text-align: right; background-color: #eeeeee;">Sample r</th>
+                        <th style="text-align: right; background-color: #eeeeee;">&nbsp;&nbsp;N</th>
+                        <th style="text-align: right; background-color: #eeeeee;">Sample p(r)</th>
                         {% else %}
-                        <th>Sample rho</th>
-                        <th>N Cases</th>
-                        <th>Sample p(rho)</th>
+                        <th style="text-align: right; background-color: #eeeeee;">Sample rho</th>
+                        <th style="text-align: right; background-color: #eeeeee;">&nbsp;&nbsp;N</th>
+                        <th style="text-align: right; background-color: #eeeeee;">Sample p(rho)</th>
                         {% endif %}
                     {% elif target_dataset.type == "Geno" %}
                         {% if corr_method == 'pearson' %}
-                        <th>Sample r</th>
-                        <th>N Cases</th>
-                        <th>Sample p(r)</th>
+                        <th style="text-align: right; background-color: #eeeeee;">Sample r</th>
+                        <th style="text-align: right; background-color: #eeeeee;">N</th>
+                        <th style="text-align: right; background-color: #eeeeee;">Sample p(r)</th>
                         {% else %}
-                        <th>Sample rho</th>
-                        <th>N Cases</th>
-                        <th>Sample p(rho)</th>
+                        <th style="text-align: right; background-color: #eeeeee;">Sample rho</th>
+                        <th style="text-align: right; background-color: #eeeeee;">N</th>
+                        <th style="text-align: right; background-color: #eeeeee;">Sample p(rho)</th>
                         {% endif %}
                     {% endif %}
                     </tr>
@@ -91,58 +99,56 @@
                 <tbody>
                 {% for trait in correlation_results %}
                     <tr>
-                        <TD><INPUT TYPE="checkbox" NAME="searchResult" class="checkbox trait_checkbox" style="transform: scale(1.5);" VALUE="{{ data_hmac('{}:{}'.format(trait.name, trait.dataset.name)) }}">
-                        </TD>
-                        <TD align="right">{{ loop.index }}</TD>
-                        <TD>
+                        <td>&nbsp;<INPUT TYPE="checkbox" NAME="searchResult" class="checkbox trait_checkbox" style="transform: scale(1.5);" VALUE="{{ data_hmac('{}:{}'.format(trait.name, trait.dataset.name)) }}"></td>
+                        <td align="right">{{ loop.index }}</td>
+                        <td>
                             <a href="{{ url_for('show_trait_page',
                                     trait_id = trait.name,
                                     dataset = dataset.name
                                     )}}">
                                 {{ trait.name }}
                             </a>
-                        </TD>
+                        </td>
                       {% if target_dataset.type == 'ProbeSet' %}
-                        <TD>{{ trait.symbol }}</TD>
-                        <TD>{{ trait.description_display }}</TD>
-                        <TD style="white-space: nowrap;">{{ trait.location_repr }}</TD>
-                        <TD align="right">{{ '%0.3f' % trait.mean|float }}</TD>
-                        <TD align="right">{{ '%0.3f' % trait.LRS_score_repr|float }}</TD>
-                        <TD style="white-space: nowrap;">{{ trait.LRS_location_repr }}</TD>
-                        <TD align="right">{{ '%0.3f' % trait.additive|float }}</TD>
-                        <TD><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>{{ trait.num_overlap }}</TD>
-                        <TD>{{'%0.3e'|format(trait.sample_p)}}</TD>
+                        <td>{{ trait.symbol }}</td>
+                        <td>{{ trait.description_display }}</TD>
+                        <td align="right"style="white-space: nowrap;">{{ trait.location_repr }}</td>
+                        <td align="right">{{ '%0.3f' % trait.mean|float }}</td>
+                        <td align="right" style="padding-right: 15px;">{% if trait.LRS_score_repr != "N/A" %}{{ '%0.1f' % trait.LRS_score_repr|float }}{% else %}N/A{% endif %}</td>
+                        <td align="right" style="padding-right: 15px;">{{ trait.LRS_location_repr }}</td>
+                        <td align="right" style="padding-right: 15px;">{% if trait.additive != "" %}{{ '%0.3f' % trait.additive|float }}{% else %}N/A{% endif %}</td>
+                        <td align="right" style="padding-right: 15px;"><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 align="right" style="padding-right: 15px;">{{ trait.num_overlap }}</td>
+                        <td align="right" style="padding-right: 15px;">{{'%0.3e'|format(trait.sample_p)}}</td>
                         {% if trait.lit_corr == "" or trait.lit_corr == 0.000 %}
-                        <TD>--</TD>
+                        <td align="right" style="padding-right: 15px;">--</td>
                         {% else %}
-                        <TD>{{'%0.3f'|format(trait.lit_corr)}}</TD>
+                        <td align="right" style="padding-right: 15px;">{{'%0.3f'|format(trait.lit_corr)}}</td>
                         {% endif %}
                         {% if trait.tissue_corr == "" or trait.tissue_corr == 0.000 %}
-                        <TD>--</TD>
+                        <td align="right" style="padding-right: 15px;">--</td>
                         {% else %}
-                        <TD>{{'%0.3f'|format(trait.tissue_corr)}}</TD>
+                        <td align="right" style="padding-right: 15px;">{{'%0.3f'|format(trait.tissue_corr)}}</td>
                         {% endif %}
-                        <TD>{{'%0.3e'|format(trait.tissue_pvalue)}}</TD>
                       {% elif target_dataset.type == "Publish" %}
-                        <TD>{{ trait.description_display }}</TD>
-                        <TD>{{ trait.authors }}</TD>
-                        <TD>
+                        <td>{{ trait.description_display }}</td>
+                        <td>{{ trait.authors }}</td>
+                        <td>
                             <a href="{{ trait.pubmed_link }}">
                                 {{ trait.pubmed_text }}
                             </a>
-                        </TD>
-                        <TD>{{ trait.LRS_score_repr }}</TD>
-                        <TD>{{ trait.LRS_location_repr }}</TD>
-                        <TD>{{ '%0.3f' % trait.additive|float }}</TD>
-                        <TD><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>{{ trait.num_overlap }}</TD>
-                        <TD>{{'%0.3e'|format(trait.sample_p)}}</TD>
+                        </td>
+                        <td align="right" style="padding-right: 15px;">{{ trait.LRS_score_repr }}</td>
+                        <td align="right" style="padding-right: 15px;">{{ trait.LRS_location_repr }}</td>
+                        <td align="right" style="padding-right: 15px;">{% if trait.additive != "" %}{{ '%0.3f' % trait.additive|float }}{% else %}N/A{% endif %}</td>
+                        <td align="right" style="padding-right: 15px;"><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 align="right" style="padding-right: 15px;">{{ trait.num_overlap }}</td>
+                        <td align="right" style="padding-right: 15px;">{{'%0.3e'|format(trait.sample_p)}}</td>
                       {% elif target_dataset.type == "Geno" %}
-                        <TD>{{ trait.location_repr }}</TD>
-                        <TD><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>{{ trait.num_overlap }}</TD>
-                        <TD>{{'%0.3e'|format(trait.sample_p)}}</TD>
+                        <td align="right" style="padding-right: 15px;">{{ trait.location_repr }}</TD>
+                        <td align="right" style="padding-right: 15px;"><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 align="right" style="padding-right: 15px;">{{ trait.num_overlap }}</td>
+                        <td align="right" style="padding-right: 15px;">{{'%0.3e'|format(trait.sample_p)}}</td>
                       {% endif %}
                     </tr>
                 {% endfor %}
@@ -161,12 +167,8 @@
     <script language="javascript" type="text/javascript" src="https://cdn.datatables.net/buttons/1.0.0/js/buttons.bootstrap.min.js"></script>
     <script language="javascript" type="text/javascript" src="/static/new/js_external/jszip.min.js"></script>
     <script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/js/dataTables.naturalSort.js"></script>
-    <script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/extensions/dataTables.colResize.js"></script>
-    <script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/extensions/dataTables.colReorder.js"></script>
     <script language="javascript" type="text/javascript" src="/static/packages/DT_bootstrap/DT_bootstrap.js"></script>
     <script language="javascript" type="text/javascript" src="/static/packages/TableTools/media/js/TableTools.min.js"></script>
-    <script language="javascript" type="text/javascript" src="//cdn.datatables.net/fixedheader/2.1.2/js/dataTables.fixedHeader.min.js"></script>
-    <script language="javascript" type="text/javascript" src="//cdn.datatables.net/fixedcolumns/3.0.4/js/dataTables.fixedColumns.min.js"></script>
     <script language="javascript" type="text/javascript" src="/static/packages/underscore/underscore-min.js"></script>
     <script type="text/javascript" charset="utf-8">
         function getValue(x) {
@@ -229,15 +231,28 @@
             console.time("Creating table");
 
             {% if target_dataset.type == "ProbeSet" %}
-
-
             $('#trait_table').dataTable( {
+                "paging": false,
+                "buttons": [
+                    {
+                       extend: 'csvHtml5',
+                       text: 'Download CSV',
+                       title: 'correlation_results',
+                       fieldBoundary: '"',
+                       exportOptions: {
+                           columns: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
+                       }
+                    }
+                ],
+                "columnDefs": [ 
+                    { "targets": 0, "orderable": false }
+                ],  
                 "columns": [
                     { "type": "natural" },
                     { "type": "natural" },
                     { "type": "natural" },
                     { "type": "natural" },
-                    { "type": "natural" },
+                    { "type": "natural", "width": "20%" },
                     { "type": "natural" },
                     { "type": "natural" },
                     { "type": "natural" },
@@ -247,19 +262,14 @@
                     { "type": "natural" },
                     { "type": "natural" },
                     { "type": "natural" },
-                    { "type": "natural" },
                     { "type": "natural" }
                 ],
-                "buttons": [
-                    'csvHtml5'
-                ],
-                "sDom": "RZBtir",
-                "iDisplayLength": -1,
+                "order": [[10, "desc" ]],
+                "sDom": "Btir",
+                "autoWidth": false,
                 "bDeferRender": true,
-                "bSortClasses": false,
-                //"scrollY": "700px",
-                //"scrollCollapse": false,
-                "paging": false
+                "scrollY": "800px",
+                "scrollCollapse": false
             } );
 
             var table = $('#trait_table').DataTable();
@@ -267,12 +277,27 @@
 
             {% elif target_dataset.type == "Publish" %}
             $('#trait_table').dataTable( {
+                "paging": false,
+                "buttons": [
+                    {
+                       extend: 'csvHtml5',
+                       text: 'Download CSV',
+                       title: 'correlation_results',
+                       fieldBoundary: '"',
+                       exportOptions: {
+                           columns: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
+                       }
+                    }
+                ],
+                "columnDefs": [ 
+                    { "targets": 0, "orderable": false }
+                ],  
                 "columns": [
                     { "type": "natural" },
                     { "type": "natural" },
                     { "type": "natural" },
-                    { "type": "natural" },
-                    { "type": "natural" },
+                    { "type": "natural", "width": "25%" },
+                    { "type": "natural", "width": "10%" },
                     { "type": "natural" },
                     { "type": "natural" },
                     { "type": "natural" },
@@ -281,24 +306,30 @@
                     { "type": "natural" },
                     { "type": "natural" }
                 ],
-                "buttons": [
-                    'csvHtml5'
-                ],
-                "sDom": "RZBtir",
-                "iDisplayLength": -1,
-                "autoWidth": true,
-                "bLengthChange": true,
+                "order": [[9, "desc" ]],
+                "sDom": "Btir",
+                "autoWidth": false,
                 "bDeferRender": true,
-                "bSortClasses": false,
-                "scrollY": "700px",
-                "scrollCollapse": false,
-                "colResize": {
-                    "tableWidthFixed": false
-                },
-                "paging": false
+                "scrollY": "800px",
+                "scrollCollapse": false
             } );
             {% elif target_dataset.type == "Geno" %}
             $('#trait_table').dataTable( {
+                "paging": false,
+                "buttons": [
+                    {
+                       extend: 'csvHtml5',
+                       text: 'Download CSV',
+                       title: 'correlation_results',
+                       fieldBoundary: '"',
+                       exportOptions: {
+                           columns: [1, 2, 3, 4, 5, 6]
+                       }
+                    }
+                ],
+                "columnDefs": [ 
+                    { "targets": 0, "orderable": false }
+                ],  
                 "columns": [
                     { "type": "natural" },
                     { "type": "natural" },
@@ -308,21 +339,12 @@
                     { "type": "natural" },
                     { "type": "natural" }
                 ],
-                "buttons": [
-                    'csvHtml5'
-                ],
-                "sDom": "RZBtir",
-                "iDisplayLength": -1,
-                "autoWidth": true,
-                "bLengthChange": true,
+                "order": [[4, "desc" ]],
+                "sDom": "Btir",
+                "autoWidth": false,
                 "bDeferRender": true,
-                "bSortClasses": false,
-                "scrollY": "700px",
-                "scrollCollapse": false,
-                "colResize": {
-                    "tableWidthFixed": false
-                },
-                "paging": false
+                "scrollY": "800px",
+                "scrollCollapse": false
             } );
             {% endif %}
             console.timeEnd("Creating table");
diff --git a/wqflask/wqflask/templates/search_result_page.html b/wqflask/wqflask/templates/search_result_page.html
index 7d25dc61..4b4f3584 100755
--- a/wqflask/wqflask/templates/search_result_page.html
+++ b/wqflask/wqflask/templates/search_result_page.html
@@ -145,6 +145,7 @@
                     </TR>
                 {% endfor %}
                 </tbody>
+                {% if trait_list|length > 20 %}
                 <tfoot>
                     <tr>
                         <th style="width: 30px;"></th>
@@ -159,6 +160,7 @@
                     {% endfor %}
                     </tr>
                 </tfoot>
+                {% endif %}
             </table>
           </div>
         </div>
-- 
cgit v1.2.3