From b88eb7fcbd24462efb34fd3e30bfb64483223935 Mon Sep 17 00:00:00 2001
From: zsloan
Date: Thu, 15 Dec 2016 21:01:30 +0000
Subject: Changed table appearance

Updated dataset_menu_structure.json
---
 .../new/javascript/dataset_menu_structure.json     | 90 +++++++++++-----------
 .../packages/DataTables/css/jquery.dataTables.css  | 12 ++-
 wqflask/wqflask/templates/collections/list.html    | 23 +++---
 wqflask/wqflask/templates/collections/view.html    | 59 ++++++++------
 wqflask/wqflask/templates/search_result_page.html  | 46 +++++++----
 5 files changed, 131 insertions(+), 99 deletions(-)

diff --git a/wqflask/wqflask/static/new/javascript/dataset_menu_structure.json b/wqflask/wqflask/static/new/javascript/dataset_menu_structure.json
index dc0af7d0..2f332a4a 100644
--- a/wqflask/wqflask/static/new/javascript/dataset_menu_structure.json
+++ b/wqflask/wqflask/static/new/javascript/dataset_menu_structure.json
@@ -1339,15 +1339,15 @@
                   "HLC_0311",
                   "GSE9588 Human Liver Normal (Mar11) Both Sexes"
                ],
-               [
-                  "383",
-                  "HLCM_0311",
-                  "GSE9588 Human Liver Normal (Mar11) Males"
-               ],
                [
                   "384",
                   "HLCF_0311",
                   "GSE9588 Human Liver Normal (Mar11) Females"
+               ],
+               [
+                  "383",
+                  "HLCM_0311",
+                  "GSE9588 Human Liver Normal (Mar11) Males"
                ]
             ],
             "Phenotypes": [
@@ -1726,6 +1726,11 @@
                ]
             ],
             "Striatum mRNA": [
+               [
+                  "85",
+                  "SA_M2_0905_P",
+                  "OHSU/VA B6D2F2 Striatum M430v2 (Sep05) PDNN"
+               ],
                [
                   "84",
                   "SA_M2_0905_R",
@@ -1735,26 +1740,21 @@
                   "83",
                   "SA_M2_0905_M",
                   "OHSU/VA B6D2F2 Striatum M430v2 (Sep05) MAS5"
-               ],
-               [
-                  "85",
-                  "SA_M2_0905_P",
-                  "OHSU/VA B6D2F2 Striatum M430v2 (Sep05) PDNN"
                ]
             ]
          },
          "BHF2": {
             "Adipose mRNA": [
-               [
-                  "196",
-                  "UCLA_BHF2_ADIPOSE_MALE",
-                  "UCLA BHF2 Adipose Male mlratio"
-               ],
                [
                   "197",
                   "UCLA_BHF2_ADIPOSE_FEMALE",
                   "UCLA BHF2 Adipose Female mlratio"
                ],
+               [
+                  "196",
+                  "UCLA_BHF2_ADIPOSE_MALE",
+                  "UCLA BHF2 Adipose Male mlratio"
+               ],
                [
                   "165",
                   "UCLA_BHF2_ADIPOSE_0605",
@@ -1762,16 +1762,16 @@
                ]
             ],
             "Brain mRNA": [
-               [
-                  "198",
-                  "UCLA_BHF2_BRAIN_MALE",
-                  "UCLA BHF2 Brain Male mlratio"
-               ],
                [
                   "199",
                   "UCLA_BHF2_BRAIN_FEMALE",
                   "UCLA BHF2 Brain Female mlratio"
                ],
+               [
+                  "198",
+                  "UCLA_BHF2_BRAIN_MALE",
+                  "UCLA BHF2 Brain Male mlratio"
+               ],
                [
                   "166",
                   "UCLA_BHF2_BRAIN_0605",
@@ -1786,16 +1786,16 @@
                ]
             ],
             "Liver mRNA": [
-               [
-                  "200",
-                  "UCLA_BHF2_LIVER_MALE",
-                  "UCLA BHF2 Liver Male mlratio"
-               ],
                [
                   "201",
                   "UCLA_BHF2_LIVER_FEMALE",
                   "UCLA BHF2 Liver Female mlratio"
                ],
+               [
+                  "200",
+                  "UCLA_BHF2_LIVER_MALE",
+                  "UCLA BHF2 Liver Male mlratio"
+               ],
                [
                   "167",
                   "UCLA_BHF2_LIVER_0605",
@@ -1999,6 +1999,11 @@
                   "BR_U_1105_P",
                   "UTHSC Brain mRNA U74Av2 (Nov05) PDNN"
                ],
+               [
+                  "81",
+                  "BR_U_0805_P",
+                  "UTHSC Brain mRNA U74Av2 (Aug05) PDNN"
+               ],
                [
                   "80",
                   "BR_U_0805_M",
@@ -2009,11 +2014,6 @@
                   "BR_U_0805_R",
                   "UTHSC Brain mRNA U74Av2 (Aug05) RMA"
                ],
-               [
-                  "81",
-                  "BR_U_0805_P",
-                  "UTHSC Brain mRNA U74Av2 (Aug05) PDNN"
-               ],
                [
                   "42",
                   "CB_M_0204_P",
@@ -2545,15 +2545,15 @@
                   "HQFNeoc_0208_RankInv",
                   "HQF BXD Neocortex ILM6v1.1 (Feb08) RankInv"
                ],
-               [
-                  "274",
-                  "DevNeocortex_ILM6.2P3RInv_1110",
-                  "BIDMC/UTHSC Dev Neocortex P3 ILMv6.2 (Nov10) RankInv"
-               ],
                [
                   "275",
                   "DevNeocortex_ILM6.2P14RInv_1110",
                   "BIDMC/UTHSC Dev Neocortex P14 ILMv6.2 (Nov10) RankInv"
+               ],
+               [
+                  "274",
+                  "DevNeocortex_ILM6.2P3RInv_1110",
+                  "BIDMC/UTHSC Dev Neocortex P3 ILMv6.2 (Nov10) RankInv"
                ]
             ],
             "Nucleus Accumbens mRNA": [
@@ -2760,6 +2760,11 @@
                ]
             ],
             "Ventral Tegmental Area mRNA": [
+               [
+                  "230",
+                  "VCUEtvsSal_0609_R",
+                  "VCU BXD VTA Et vs Sal M430 2.0 (Jun09) RMA"
+               ],
                [
                   "229",
                   "VCUEtOH_0609_R",
@@ -2769,11 +2774,6 @@
                   "228",
                   "VCUSal_0609_R",
                   "VCU BXD VTA Sal M430 2.0 (Jun09) RMA"
-               ],
-               [
-                  "230",
-                  "VCUEtvsSal_0609_R",
-                  "VCU BXD VTA Et vs Sal M430 2.0 (Jun09) RMA"
                ]
             ]
          },
@@ -3051,6 +3051,11 @@
                ]
             ],
             "Hippocampus mRNA": [
+               [
+                  "213",
+                  "Illum_LXS_Hipp_NOS_1008",
+                  "Hippocampus Illumina NOS (Oct08) RankInv beta"
+               ],
                [
                   "219",
                   "Illum_LXS_Hipp_NON_1008",
@@ -3071,11 +3076,6 @@
                   "Illum_LXS_Hipp_RSS_1008",
                   "Hippocampus Illumina RSS (Oct08) RankInv beta"
                ],
-               [
-                  "213",
-                  "Illum_LXS_Hipp_NOS_1008",
-                  "Hippocampus Illumina NOS (Oct08) RankInv beta"
-               ],
                [
                   "143",
                   "Illum_LXS_Hipp_loess0807",
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 be82d5df..6e0e7348 100644
--- 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 {
-  font: bold 12px/18px Arial, Sans-serif;
+  font: bold 12px/20px Arial, Sans-serif;
   color: #000000;
   background-color: #ffffff;
   border-collapse: collapse;
@@ -35,8 +35,13 @@ table.dataTable thead td:active {
 }
 table.dataTable tfoot th,
 table.dataTable tfoot td {
-  padding: 10px 18px 6px 18px;
-  border-top: 1px solid #111;
+  font: bold 12px/20px Arial, Sans-serif;
+  color: #000000;
+  background-color: #ffffff;
+  border-collapse: collapse;
+  padding: 0;
+  //padding: 10px 18px 6px 18px;
+  //border-top: 1px solid #111;
 }
 table.dataTable thead .sorting,
 table.dataTable thead .sorting_asc,
@@ -75,6 +80,7 @@ table.dataTable tbody tr.selected {
 }
 table.dataTable tbody th,
 table.dataTable tbody td {
+  font: 12px Arial, Sans-serif;
   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 {
diff --git a/wqflask/wqflask/templates/collections/list.html b/wqflask/wqflask/templates/collections/list.html
index e38b32a0..6dc52c4d 100644
--- a/wqflask/wqflask/templates/collections/list.html
+++ b/wqflask/wqflask/templates/collections/list.html
@@ -26,7 +26,7 @@
             {% endif %}
         </div>
 
-        <div id="collections_list" style="width:75%;">
+        <div id="collections_list" style="width:50%;">
         <table class="table table-hover table-striped" id='trait_table'>
             <thead>
                 <tr>
@@ -49,7 +49,7 @@
                     {% endif %}
                     <td>{{ timeago(uc.created_timestamp.isoformat() + "Z") }}</td>
                     <td>{{ timeago(uc.changed_timestamp.isoformat() + "Z") }}</td>
-                    <td>{{ uc.num_members }}</td>
+                    <td align="right">{{ uc.num_members }}</td>
                 </tr>
             {% endfor %}
             </tbody>
@@ -79,15 +79,18 @@
     {% endif %}
     <script>
             $('#trait_table').dataTable( {
-                "buttons": [
-                    {
-                       extend: 'csvHtml5',
-                       text: 'Download CSV',
-                       title: 'collection_list',
-                       fieldBoundary: '"'
-                    }
+                "columns": [
+                    { "type": "natural",
+                      "width": "10%"  },
+                    { "type": "natural" },
+                    { "type": "natural",
+                      "width": "25%"  },
+                    { "type": "natural",
+                      "width": "25%"  },
+                    { "type": "natural",
+                      "width": "10%"  }
                 ],
-                "sDom": "RZBtir",
+                "sDom": "RZtr",
                 "iDisplayLength": -1,
                 "autoWidth": true,
                 "bDeferRender": true,
diff --git a/wqflask/wqflask/templates/collections/view.html b/wqflask/wqflask/templates/collections/view.html
index 801266d3..9d03e6d7 100644
--- a/wqflask/wqflask/templates/collections/view.html
+++ b/wqflask/wqflask/templates/collections/view.html
@@ -79,20 +79,20 @@
               <button class="btn btn-default" id="export_traits">Download CSV</button>
             </form>
             <br />
-            <div style="background-color: #eeeeee; border: 1px solid black;">
-                <table id="trait_table" class="table table-hover table-striped">
+            <div>
+                <table class="table table-hover table-striped nowrap" id='trait_table' style="float: left;">
                     <thead>
                         <tr>
-                            <th style="background-color: #eeeeee;"></th>
-                            <th data-export="Index" style="background-color: #eeeeee;">Index</th>
-                            <th data-export="Dataset" style="background-color: #eeeeee;">Dataset</th>
-                            <th data-export="Record" style="background-color: #eeeeee;">Record</th>
-                            <th data-export="Description" style="background-color: #eeeeee;">Description</th>
-                            <th data-export="Location" style="background-color: #eeeeee;">Location</th>
-                            <th data-export="Mean" style="background-color: #eeeeee;">Mean</th>
-                            <th data-export="Max LRS" style="background-color: #eeeeee;">Max LRS<a href="http://genenetwork.org//glossary.html#L" target="_blank"><sup style="color:#f00">  ?</sup></a></th>
-                            <th data-export="Max LRS Location" style="background-color: #eeeeee;">Max LRS Location</th>
-                            <th data-export="Additive Effect" style="background-color: #eeeeee;">Additive Effect<a href="http://genenetwork.org//glossary.html#A" target="_blank"><sup style="color:#f00">  ?</sup></a></th>
+                            <th></th>
+                            <th data-export="Index">Index</th>
+                            <th data-export="Dataset">Dataset</th>
+                            <th data-export="Record">Record</th>
+                            <th data-export="Description">Description</th>
+                            <th data-export="Location">Location</th>
+                            <th data-export="Mean">Mean</th>
+                            <th data-export="Max LRS">Max LRS<a href="http://genenetwork.org//glossary.html#L" target="_blank"><sup style="color:#f00">  ?</sup></a></th>
+                            <th data-export="Max LRS Location">Max LRS Location</th>
+                            <th data-export="Additive Effect">Additive Effect<a href="http://genenetwork.org//glossary.html#A" target="_blank"><sup style="color:#f00">  ?</sup></a></th>
                         </tr>
                     </thead>
 
@@ -103,7 +103,7 @@
                                 <INPUT TYPE="checkbox" NAME="searchResult" class="checkbox trait_checkbox"
                                        VALUE="{{ data_hmac('{}:{}'.format(this_trait.name, this_trait.dataset.name)) }}">
                             </TD>
-                            <TD data-export="{{ loop.index }}">{{ loop.index }}</TD>
+                            <TD data-export="{{ loop.index }}" align="right">{{ loop.index }}</TD>
                             <TD data-export="{{ this_trait.dataset.name }}">{{ this_trait.dataset.name }}</TD>
                             <TD data-export="{{ this_trait.name }}">
                                 <a href="{{ url_for('show_trait_page',
@@ -113,12 +113,12 @@
                                     {{ this_trait.name }}
                                 </a>
                             </TD>
-                            <TD data-export="{{ this_trait.description_display }}">{{ this_trait.description_display }}</TD>
+                            <TD title="{{ this_trait.description_display }}" data-export="{{ this_trait.description_display }}">{{ this_trait.description_display }}</TD>
                             <TD data-export="{{ this_trait.location_repr }}">{{ this_trait.location_repr }}</TD>
-                            <TD data-export="{{ this_trait.mean }}">{{ '%0.3f' % this_trait.mean|float }}</TD>
-                            <TD data-export="{{ this_trait.LRS_score_repr }}">{{ '%0.3f' % this_trait.LRS_score_repr|float }}</TD>
+                            <TD data-export="{{ this_trait.mean }}" align="right">{{ '%0.3f' % this_trait.mean|float }}</TD>
+                            <TD data-export="{{ this_trait.LRS_score_repr }}" align="right">{{ '%0.3f' % this_trait.LRS_score_repr|float }}</TD>
                             <TD data-export="{{ this_trait.LRS_location_repr }}">{{ this_trait.LRS_location_repr }}</TD>
-                            <TD data-export="{{ this_trait.additive }}">{{ '%0.3f' % this_trait.additive|float }}</TD>
+                            <TD data-export="{{ this_trait.additive }}" align="right">{{ '%0.3f' % this_trait.additive|float }}</TD>
 
                         </TR>
                     {% endfor %}
@@ -156,23 +156,34 @@
 
             console.time("Creating table");
             $('#trait_table').dataTable( {
+                "createdRow": function ( row, data, index ) {
+                    if ($('td', row).eq(4).text().length > 50) {
+                        $('td', row).eq(4).text($('td', row).eq(4).text().substring(0, 50));
+                        $('td', row).eq(4).text($('td', row).eq(4).text() + '...')
+                    }
+                },
                 "columns": [
                     { "type": "natural" },
-                    { "type": "natural" },
+                    { "type": "natural", "width": "5%" },
                     { "type": "natural" },
                     { "type": "natural" },
                     { "type": "natural",
-                      "width": "35%"  },
+                      "width": "30%"  },
                     { "type": "natural",
-                      "width": "15%"  },
+                      "width": "10%"  },
                     { "type": "cust-txt" },
                     { "type": "natural",
-                      "width": "9%"  },
+                      "width": "6%"  },
+                    { "type": "natural",
+                      "width": "10%"  },
                     { "type": "natural",
-                      "width": "15%"  },
-                    { "type": "natural" }
+                      "width": "8%"  }
                 ],
-                "sDom": "ZRtir",
+                "columnDefs": [ {
+                    "targets": 0,
+                    "orderable": false
+                } ],
+                "sDom": "ZRtr",
                 "iDisplayLength": -1,
                 "autoWidth": true,
                 "bDeferRender": true,
diff --git a/wqflask/wqflask/templates/search_result_page.html b/wqflask/wqflask/templates/search_result_page.html
index 5d0c38a3..f7b450c1 100644
--- a/wqflask/wqflask/templates/search_result_page.html
+++ b/wqflask/wqflask/templates/search_result_page.html
@@ -76,18 +76,18 @@
           {% endif %}
 -->
 
-          <div id="table_container" style="background-color: #eeeeee; border: 1px solid black; width: {% if dataset.type == 'ProbeSet' %}1300{% elif dataset.type == 'Publish' %}1200{% elif dataset.type == 'Geno' %}500{% endif %}px;">
+          <div id="table_container" style="width: {% if dataset.type == 'ProbeSet' %}1300{% elif dataset.type == 'Publish' %}1200{% elif dataset.type == 'Geno' %}500{% endif %}px;">
             <table class="table table-hover table-striped nowrap" id='trait_table' style="float: left;">
                 <thead>
                     <tr>
-                        <th style="background-color: #eeeeee;"></th>
+                        <th></th>
                     {% for header in header_fields %}
                         {% if header == 'Max LRS' %}
-                        <th data-export="Max LRS" style="background-color: #eeeeee; text-align: right;">Max LRS</th>
+                        <th data-export="Max LRS">Max LRS</th>
                         {% elif header == 'Additive Effect' %}
-                        <th data-export="Additive Effect" style="background-color: #eeeeee; text-align: right;">Additive Effect<a href="http://genenetwork.org//glossary.html#A" target="_blank"><sup style="color:#f00"> ?</sup></a></th>
+                        <th data-export="Additive Effect">Additive Effect<a href="http://genenetwork.org//glossary.html#A" target="_blank"><sup style="color:#f00"> ?</sup></a></th>
                         {% else %}
-                        <th data-export="{{header}}" style="background-color: #eeeeee;">{{header}}</th>
+                        <th data-export="{{header}}">{{header}}</th>
                         {% endif %}
                     {% endfor %}
                     </tr>
@@ -95,14 +95,14 @@
                 {% if trait_list|length > 20 %}
                 <tfoot>
                     <tr>
-                        <th style="width: 30px;"></th>
+                        <th></th>
                     {% for header in header_fields %}
                         {% if header == 'Max LRS' %}
-                        <th style="text-align: right;">Max<br>LRS</th>
+                        <th data-export="Max LRS">Max LRS</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 data-export="Additive Effect">Additive Effect<a href="http://genenetwork.org//glossary.html#A" target="_blank"><sup style="color:#f00"> ?</sup></a></th>
                         {% else %}
-                        <th>{{header}}</th>
+                        <th data-export="{{header}}">{{header}}</th>
                         {% endif %}
                     {% endfor %}
                     </tr>
@@ -205,16 +205,20 @@
                 "data": json_trait_list,
                 "columns": [
                     { "type": "natural" },
-                    { "type": "natural" },
+                    { "type": "natural", "width": "4%" },
                     { "type": "natural" },
                     { "type": "natural" },
                     { "type": "natural", "width": "30%" },
-                    { "type": "natural", "width": "15%" },
-                    { "type": "natural" },
+                    { "type": "natural", "width": "10%" },
                     { "type": "natural" },
-                    { "type": "natural", "width": "15%" },
+                    { "type": "natural", "width": "6%" },
+                    { "type": "natural", "width": "12%" },
                     { "type": "natural" }
                 ],
+                "columnDefs": [ {
+                    "targets": 0,
+                    "orderable": false
+                } ],
                 "order": [[1, "asc" ]],
                 "sDom": "RZtir",
                 "iDisplayLength": -1,
@@ -260,17 +264,21 @@
                 "data": json_trait_list,
                 "columns": [
                     { "type": "natural" },
+                    { "type": "natural", "width": "5%" },
                     { "type": "natural" },
                     { "type": "natural" },
                     { "type": "natural" },
                     { "type": "natural" },
+                    { "type": "natural", "width": "6%" },
                     { "type": "natural" },
-                    { "type": "natural" },
-                    { "type": "natural" },
-                    { "type": "natural" }
+                    { "type": "natural", "width": "9%" }
                 ],
+                "columnDefs": [ {
+                    "targets": 0,
+                    "orderable": false
+                } ],
                 "order": [[1, "asc" ]],
-                "sDom": "RZtir",
+                "sDom": "RZtr",
                 "iDisplayLength": -1,
                 "autoWidth": false,
                 "deferRender": true,
@@ -303,6 +311,10 @@
                     { "type": "natural" },
                     { "type": "natural", "width": "40%"}
                 ],
+                "columnDefs": [ {
+                    "targets": 0,
+                    "orderable": false
+                } ],
                 "order": [[1, "asc" ]],
                 "sDom": "RZtir",
                 "iDisplayLength": -1,
-- 
cgit v1.2.3