Merge branch 'master' of github.com:genenetwork/genenetwork2

10 files changed, 164 insertions, 99 deletions

diff --git a/wqflask/base/data_set.py b/wqflask/base/data_set.py
index 7f08135f..4959457a 100644
--- a/wqflask/base/data_set.py
+++ b/wqflask/base/data_set.py
@@ -893,7 +893,7 @@ class GenotypeDataSet(DataSet):
     def retrieve_sample_data(self, trait):
         query = """
                     SELECT
-                            Strain.Name, GenoData.value, GenoSE.error, GenoData.Id, Sample.Name2
+                            Strain.Name, GenoData.value, GenoSE.error, GenoData.Id, Strain.Name2
                     FROM
                             (GenoData, GenoFreeze, Strain, Geno, GenoXRef)
                     left join GenoSE on
diff --git a/wqflask/runserver.py b/wqflask/runserver.py
index a6ae28af..50805643 100644
--- a/wqflask/runserver.py
+++ b/wqflask/runserver.py
@@ -11,6 +11,9 @@ import logging
 import utility.logger
 logger = utility.logger.getLogger(__name__ )
 
+import signal
+signal.signal(signal.SIGPIPE, signal.SIG_DFL)
+
 BLUE  = '\033[94m'
 GREEN = '\033[92m'
 BOLD  = '\033[1m'
diff --git a/wqflask/wqflask/collect.py b/wqflask/wqflask/collect.py
index 478dbcaa..2f6c3a96 100644
--- a/wqflask/wqflask/collect.py
+++ b/wqflask/wqflask/collect.py
@@ -335,12 +335,19 @@ def delete_collection():
     print("params:", params)
     if g.user_session.logged_in:
         uc_id = params['uc_id']
-        uc = model.UserCollection.query.get(uc_id)
-        # Todo: For now having the id is good enough since it's so unique
-        # But might want to check ownership in the future
-        collection_name = uc.name
-        db_session.delete(uc)
-        db_session.commit()
+        if len(uc_id.split(":")) > 1:
+            for this_uc_id in uc_id.split(":"):
+                uc = model.UserCollection.query.get(this_uc_id)
+                collection_name = uc.name
+                db_session.delete(uc)
+                db_session.commit()
+        else:
+            uc = model.UserCollection.query.get(uc_id)
+            # Todo: For now having the id is good enough since it's so unique
+            # But might want to check ownership in the future
+            collection_name = uc.name
+            db_session.delete(uc)
+            db_session.commit()
     else:
         collection_name = params['collection_name']
         user_manager.AnonUser().delete_collection(collection_name)
diff --git a/wqflask/wqflask/static/new/images/question_mark.jpg b/wqflask/wqflask/static/new/images/question_mark.jpg
new file mode 100644
index 00000000..82df7e81
--- /dev/null
+++ b/wqflask/wqflask/static/new/images/question_mark.jpg
diff --git a/wqflask/wqflask/static/new/javascript/bar_chart.js b/wqflask/wqflask/static/new/javascript/bar_chart.js
index 7ec35148..d8540580 100644
--- a/wqflask/wqflask/static/new/javascript/bar_chart.js
+++ b/wqflask/wqflask/static/new/javascript/bar_chart.js
@@ -253,6 +253,17 @@
             })())
           ]);
           console.log("values: ", values);
+
+          decimal_exists = "False";
+          for(i=0; i < values.length; i++){
+              if (values[i]['y'] % 1 != 0){
+                  decimal_exists = "True";
+                  break;
+              }
+          }
+          if (decimal_exists == "False"){
+              _this.chart.yAxis.tickFormat(d3.format('d'))
+          }
           d3.select("#bar_chart_container svg").datum([
             {
               values: values
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 40e58ac8..ab7420a6 100644
--- a/wqflask/wqflask/static/new/packages/DataTables/css/jquery.dataTables.css
+++ b/wqflask/wqflask/static/new/packages/DataTables/css/jquery.dataTables.css
@@ -14,6 +14,9 @@ table.dataTable {
    * Body styles
    */
 }
+td.highlight {
+    background-color: whitesmoke !important;
+}
 table.dataTable thead th,
 table.dataTable tfoot th {
   font-weight: bold;
@@ -25,8 +28,8 @@ table.dataTable thead td {
   background-color: #ffffff;
   border-collapse: collapse;
   border-bottom: #cccccc 2px solid;
-  padding: 0;
-  //padding: 10px 18px 10px 0px;
+  //padding: 0;
+  padding: 10px 18px 4px 10px;
   //border-bottom: 1px solid #111;
 }
 table.dataTable thead th:active,
@@ -39,8 +42,8 @@ table.dataTable tfoot td {
   color: #000000;
   background-color: #ffffff;
   border-collapse: collapse;
-  padding: 0;
-  //padding: 10px 18px 6px 18px;
+  //padding: 0;
+  padding: 10px 18px 6px 18px;
   //border-top: 1px solid #111;
 }
 table.dataTable thead .sorting,
@@ -76,12 +79,12 @@ table.dataTable tbody tr {
   background-color: #ffffff;
 }
 table.dataTable tbody tr.selected {
-  background-color: #ffff99;
+  background-color: #abb9d3;
 }
 table.dataTable tbody th,
 table.dataTable tbody td {
   font: 12px Arial, Sans-serif;
-  padding: 4px 16px 4px 0px;
+  padding: 8px 20px 6px 10px;
 }
 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/templates/collections/list.html b/wqflask/wqflask/templates/collections/list.html
index 6dc52c4d..b1284895 100644
--- a/wqflask/wqflask/templates/collections/list.html
+++ b/wqflask/wqflask/templates/collections/list.html
@@ -25,11 +25,21 @@
             <h1>Your Collections</h1>
             {% endif %}
         </div>
-
+        <div>
+          <form id="collections_form" action="/delete" method="post">
+            <input type="hidden" name="uc_id" id="uc_id" value="" />
+          </form>
+            <button class="btn btn-default" id="select_all"><span class="glyphicon glyphicon-ok"></span> Select All</button>
+            <button class="btn btn-default" id="deselect_all"><span class="glyphicon glyphicon-remove"></span> Deselect All</button>
+            <button class="btn btn-default" id="invert"><span class="glyphicon glyphicon-resize-vertical"></span> Invert</button>
+            <button class="btn btn-danger" id="remove_collections" data-url="/collections/delete">Remove Collections</button> 
+        </div>
+        <br>
         <div id="collections_list" style="width:50%;">
-        <table class="table table-hover table-striped" id='trait_table'>
+        <table class="display dataTable nowrap" id='trait_table'>
             <thead>
                 <tr>
+                    <th></th>
                     <th>Index</th>
                     <th>Name</th>
                     <th>Created</th>
@@ -41,7 +51,8 @@
             <tbody>
             {% for uc in collections %}
                 <tr class="collection_line">
-                    <td>{{ loop.index }}
+                    <td style="padding-left: 8px; padding-right: 0px; padding-top: 4px; align: center;"><INPUT TYPE="checkbox" NAME="collection" class="checkbox trait_checkbox" VALUE="{{ uc.id }}"></td>
+                    <td align="right">{{ loop.index }}
                     {% if g.user_session.user_ob %}
                     <td><a class="collection_name" href="{{ url_for('view_collection', uc_id=uc.id) }}">{{ uc.name }}</a></td>
                     {% else %}
@@ -64,6 +75,7 @@
 
 {% block js %}
     <script type="text/javascript" src="/static/packages/smart-time-ago/lib/timeago.js"></script>
+    <script type="text/javascript" src="/static/new/javascript/search_results.js"></script>
     <script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/js/jquery.dataTables.min.js"></script>
     <script language="javascript" type="text/javascript" src="https://cdn.datatables.net/buttons/1.0.0/js/dataTables.buttons.min.js"></script>
     <script language="javascript" type="text/javascript" src="https://cdn.datatables.net/buttons/1.0.0/js/buttons.html5.min.js"></script>
@@ -72,24 +84,31 @@
     <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>
     {% if "color_by_trait" in params %}
     <script type="text/javascript" src="/static/new/javascript/get_traits_from_collection.js"></script>
     {% endif %}
     <script>
             $('#trait_table').dataTable( {
+                "drawCallback": function( settings ) {
+                     $('#trait_table tr').click(function(event) {
+                         if (event.target.type !== 'checkbox') {
+                             $(':checkbox', this).trigger('click');
+                         }
+                     });
+                },
                 "columns": [
-                    { "type": "natural",
-                      "width": "10%"  },
-                    { "type": "natural" },
-                    { "type": "natural",
-                      "width": "25%"  },
-                    { "type": "natural",
-                      "width": "25%"  },
-                    { "type": "natural",
-                      "width": "10%"  }
+                    { "type": "natural", "width": "3%" },
+                    { "type": "natural", "width": "8%" },
+                    { "type": "natural", "width": "20%" },
+                    { "type": "natural", "width": "25%" },
+                    { "type": "natural", "width": "25%" },
+                    { "type": "natural", "width": "15%" }
                 ],
+                "columnDefs": [ {
+                    "targets": 0,
+                    "orderable": false
+                } ],
+                "order": [[1, "asc" ]],
                 "sDom": "RZtr",
                 "iDisplayLength": -1,
                 "autoWidth": true,
@@ -97,8 +116,26 @@
                 "bSortClasses": false,
                 "scrollY": "600px",
                 "scrollCollapse": true,
-                "paging": false
+                "paging": false,
+                "orderClasses": true
             } );
 
+            submit_special = function(url) {
+                $("#collections_form").attr("action", url);
+                return $("#collections_form").submit();
+            };
+
+            $("#remove_collections").on("click", function() {
+                url = $(this).data("url")
+                collections = []
+                $(".trait_checkbox:checked").each(function() {
+                    collections.push($(this).val());
+                });
+                collections_string = collections.join(":")
+                $("input[name=uc_id]").val(collections_string)
+                return submit_special(url)
+            });
+
+
     </script>
 {% endblock %}
diff --git a/wqflask/wqflask/templates/collections/view.html b/wqflask/wqflask/templates/collections/view.html
index 9d03e6d7..cae03b4a 100644
--- a/wqflask/wqflask/templates/collections/view.html
+++ b/wqflask/wqflask/templates/collections/view.html
@@ -2,8 +2,7 @@
 {% block title %}View Collection{% endblock %}
 {% block css %}
     <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 rel="stylesheet" type="text/css" href="/static/new/packages/DataTables/extensions/buttons.dataTables.css">
 {% endblock %}
 {% block content %}
 <!-- Start of body -->
@@ -29,43 +28,41 @@
             {% for this_trait in trait_obs %}
                 {{ this_trait.name }}:{{ this_trait.dataset.name }},
             {% endfor %}" >
-            <div class="col-xs-3 controls">
+
                 <button id="delete" class="btn btn-danger submit_special" data-url="/collections/delete" title="Delete this collection" >
                 Delete this collection
                 </button>
-            </div>
-            <div class="col-xs-2 controls">
+
+
                 <button id="corr_matrix" class="btn btn-primary submit_special" data-url="/corr_matrix" title="Correlation Matrix" >
                     Correlation Matrix
                 </button>
-            </div>
-            <div class="col-xs-2 controls">
+
+
                 <button id="network_graph" class="btn btn-primary submit_special" data-url="/network_graph" title="Network Graph" >
                     Network Graph
                 </button>
-            </div>
-            <div class="col-xs-2 controls">
+
+
                 <button id="wgcna_setup" class="btn btn-primary submit_special" data-url="/wgcna_setup" title="WGCNA Analysis" >
                     WGCNA Analysis
                 </button>
-            </div>
-            <div class="col-xs-2 controls">
+
+
                 <button id="ctl_setup" class="btn btn-primary submit_special" data-url="/ctl_setup" title="CTL Analysis" >
                     CTL Analysis
                 </button>
-            </div>
-            <div class="col-xs-1 controls">
+
+
                 <button id="heatmap" class="btn btn-primary submit_special" data-url="/heatmap" title="Heatmap" >
                     Heatmap
                 </button>
-            </div>
+
           </form>
         </div>
 
         <div>
             <br />
-            <br />
-            <br />
             <button class="btn btn-default" id="select_all"><span class="glyphicon glyphicon-ok"></span> Select All</button>
             <button class="btn btn-default" id="deselect_all"><span class="glyphicon glyphicon-remove"></span> Deselect All</button>
             <button class="btn btn-default" id="invert"><span class="glyphicon glyphicon-resize-vertical"></span> Invert</button>
@@ -80,7 +77,7 @@
             </form>
             <br />
             <div>
-                <table class="table table-hover table-striped nowrap" id='trait_table' style="float: left;">
+                <table class="display dataTable nowrap" id='trait_table' style="float: left;">
                     <thead>
                         <tr>
                             <th></th>
@@ -90,9 +87,9 @@
                             <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">Max LRS <a href="http://genenetwork.org//glossary.html#L" target="_blank"><img style="width: 15px; height: 15px;" src="/static/new/images/question_mark.jpg"></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>
+                            <th data-export="Additive Effect">Additive Effect <a href="http://genenetwork.org//glossary.html#A" target="_blank"><img style="width: 15px; height: 15px;" src="/static/new/images/question_mark.jpg"></a></th>
                         </tr>
                     </thead>
 
@@ -141,8 +138,8 @@
     <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="/static/new/packages/DataTables/extensions/dataTables.buttons.min.js"></script>
+    <script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/extensions/buttons.colVis.min.js"></script>
 
 
     <script language="javascript" type="text/javascript">
@@ -157,40 +154,45 @@
             console.time("Creating table");
             $('#trait_table').dataTable( {
                 "createdRow": function ( row, data, index ) {
+                    $('td', row).eq(0).attr('style', 'padding-left: 8px; padding-right: 0px; padding-top: 4px; align: center;');
                     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", "width": "2%" },
+                    { "type": "natural", "width": "5%" },
+                    { "type": "natural", "width": "12%" },
+                    { "type": "natural", "width": "12%" },
+                    { "type": "natural"  },
+                    { "type": "natural", "width": "12%" },
                     { "type": "natural", "width": "5%" },
-                    { "type": "natural" },
-                    { "type": "natural" },
-                    { "type": "natural",
-                      "width": "30%"  },
-                    { "type": "natural",
-                      "width": "10%"  },
-                    { "type": "cust-txt" },
-                    { "type": "natural",
-                      "width": "6%"  },
-                    { "type": "natural",
-                      "width": "10%"  },
-                    { "type": "natural",
-                      "width": "8%"  }
+                    { "type": "natural", "width": "5%" },
+                    { "type": "natural", "width": "12%" },
+                    { "type": "natural", "width": "8%" }
                 ],
                 "columnDefs": [ {
                     "targets": 0,
                     "orderable": false
                 } ],
-                "sDom": "ZRtr",
+                "order": [[1, "asc" ]],
+                buttons: [
+                    {
+                        extend: 'columnsToggle',
+                        columns: ':not(:first-child)',
+                        postfixButtons: [ 'colvisRestore' ]
+                    }
+                ],
+                "sDom": "BZRtr",
                 "iDisplayLength": -1,
-                "autoWidth": true,
+                "autoWidth": false,
                 "bDeferRender": true,
                 "bSortClasses": false,
                 "scrollY": "600px",
                 "scrollCollapse": true,
-                "paging": false
+                "paging": false,
+                "orderClasses": true
             } );
             console.timeEnd("Creating table");
 
diff --git a/wqflask/wqflask/templates/correlation_page.html b/wqflask/wqflask/templates/correlation_page.html
index 3bde7dc7..f5fe2120 100644
--- a/wqflask/wqflask/templates/correlation_page.html
+++ b/wqflask/wqflask/templates/correlation_page.html
@@ -104,7 +104,7 @@
                         <td>
                             <a href="{{ url_for('show_trait_page',
                                     trait_id = trait.name,
-                                    dataset = dataset.name
+                                    dataset = trait.dataset.name
                                     )}}">
                                 {{ trait.name }}
                             </a>
diff --git a/wqflask/wqflask/templates/search_result_page.html b/wqflask/wqflask/templates/search_result_page.html
index 718b31d3..93e24cc7 100644
--- a/wqflask/wqflask/templates/search_result_page.html
+++ b/wqflask/wqflask/templates/search_result_page.html
@@ -77,16 +77,16 @@
           {% endif %}
 -->
 
-          <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;">
+          <div id="table_container" style="width: {% if dataset.type == 'ProbeSet' %}1300{% elif dataset.type == 'Publish' %}1300{% elif dataset.type == 'Geno' %}400{% endif %}px;">
+            <table class="display dataTable nowrap" id='trait_table' style="float: left;">
                 <thead>
                     <tr>
                         <th></th>
                     {% for header in header_fields %}
                         {% if header == 'Max LRS' %}
-                        <th data-export="Max LRS">Max LRS</th>
+                        <th data-export="Max LRS">Max LRS <a href="http://genenetwork.org//glossary.html#LRS" target="_blank"><img style="width: 15px; height: 15px;" src="/static/new/images/question_mark.jpg"></a></th>
                         {% elif header == 'Additive Effect' %}
-                        <th data-export="Additive Effect">Additive <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"><img style="width: 15px; height: 15px;" src="/static/new/images/question_mark.jpg"></a></th>
                         {% else %}
                         <th data-export="{{header}}">{{header}}</th>
                         {% endif %}
@@ -99,9 +99,9 @@
                         <th></th>
                     {% for header in header_fields %}
                         {% if header == 'Max LRS' %}
-                        <th data-export="Max LRS">Max LRS</th>
+                        <th data-export="Max LRS">Max LRS <a href="http://genenetwork.org//glossary.html#LRS" target="_blank"><img style="width: 15px; height: 15px;" src="/static/new/images/question_mark.jpg"></a></th>
                         {% elif header == 'Additive Effect' %}
-                        <th data-export="Additive Effect">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"><img style="width: 15px; height: 15px;" src="/static/new/images/question_mark.jpg"></a></th>
                         {% else %}
                         <th data-export="{{header}}">{{header}}</th>
                         {% endif %}
@@ -122,13 +122,13 @@
 
 {% block js %}
     <script language="javascript" type="text/javascript" src="/static/new/javascript/search_results.js"></script>
-    
-    <script language="javascript" type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>   
+
+    <script language="javascript" type="text/javascript" src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.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.buttons.min.js"></script>
     <script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/extensions/buttons.colVis.min.js"></script>
-	
+
     <script type='text/javascript'>
         var json_trait_list = {{ json_trait_list|safe }};
     </script>
@@ -172,6 +172,7 @@
             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
+
             $('#trait_table').DataTable( {
                 "drawCallback": function( settings ) {
                      $('#trait_table tr').click(function(event) {
@@ -182,8 +183,7 @@
                      $('.trait_checkbox:checkbox').on("change", change_buttons);
                 },
                 "createdRow": function ( row, data, index ) {
-                    $('td', row).eq(0).attr('style', 'padding-right: 0px;');
-                    $('td', row).eq(0).attr('align', 'center');
+                    $('td', row).eq(0).attr('style', 'padding-left: 8px; padding-right: 0px; padding-top: 4px; align: center;');
                     $('td', row).eq(1).attr('align', 'right');
                     $('td', row).eq(1).attr('data-export', index+1);
                     $('td', row).eq(2).attr('data-export', $('td', row).eq(2).text());
@@ -207,15 +207,15 @@
                 "data": json_trait_list,
                 "columns": [
                     { "type": "natural", "width": "2%" },
-                    { "type": "natural", "width": "4%" },
+                    { "type": "natural", "width": "5%" },
                     { "type": "natural", "width": "12%" },
                     { "type": "natural", "width": "12%" },
-                    { "type": "natural", "width": "25%" },
+                    { "type": "natural" },
                     { "type": "natural", "width": "11%" },
+                    { "type": "natural", "width": "4%" },
                     { "type": "natural", "width": "5%" },
-                    { "type": "natural", "width": "6%" },
                     { "type": "natural", "width": "11%" },
-                    { "type": "natural", "width": "6%" }
+                    { "type": "natural", "width": "5%" }
                 ],
                 "columnDefs": [ {
                     "targets": 0,
@@ -224,8 +224,7 @@
                 "order": [[1, "asc" ]],
                 buttons: [
                     {
-                        extend: 'colvis',
-                        text: 'Show or Hide Columns',
+                        extend: 'columnsToggle',
                         columns: ':not(:first-child)',
                         postfixButtons: [ 'colvisRestore' ]
                     }
@@ -238,7 +237,8 @@
                 "scrollY": "600px",
                 "scrollCollapse": false,
                 "scroller": true,
-                "paging": false
+                "paging": false,
+                "orderClasses": true
             } );
 
             {% elif dataset.type == 'Publish' %}
@@ -252,6 +252,7 @@
                      $('.trait_checkbox:checkbox').on("change", change_buttons);
                 },
                 "createdRow": function ( row, data, index ) {
+                    $('td', row).eq(0).attr('style', 'padding-left: 8px; padding-right: 0px; padding-top: 4px; align: center;');
                     $('td', row).eq(1).attr('align', 'right');
                     $('td', row).eq(1).attr('data-export', index+1);
                     $('td', row).eq(2).attr('data-export', $('td', row).eq(2).text());
@@ -281,12 +282,12 @@
                     { "type": "natural", "width": "2%" },
                     { "type": "natural", "width": "5%" },
                     { "type": "natural", "width": "6%" },
+                    { "type": "natural" },
                     { "type": "natural", "width": "30%" },
-                    { "type": "natural", "width": "25%" },
                     { "type": "natural", "width": "5%" },
                     { "type": "natural", "width": "6%" },
                     { "type": "natural", "width": "10%" },
-                    { "type": "natural", "width": "9%" }
+                    { "type": "natural", "width": "8%" }
                 ],
                 "columnDefs": [ {
                     "targets": 0,
@@ -295,8 +296,7 @@
                 "order": [[1, "asc" ]],
                 buttons: [
                     {
-                        extend: 'colvis',
-                        text: 'Show or Hide Columns',
+                        extend: 'columnsToggle',
                         columns: ':not(:first-child)',
                         postfixButtons: [ 'colvisRestore' ]
                     }
@@ -306,10 +306,10 @@
                 "autoWidth": false,
                 "deferRender": true,
                 "bSortClasses": false,
-                "scrollY": "600px",
-                "scrollCollapse": true,
-                "scroller": true,
-                "paging": false
+                "scrollCollapse": false,
+                "scroller": false,
+                "paging": false,
+                "orderClasses": true
             } );
             {% elif dataset.type == 'Geno' %}
             $('#trait_table').DataTable( {
@@ -322,6 +322,7 @@
                      $('.trait_checkbox:checkbox').on("change", change_buttons);
                 },
                 "createdRow": function ( row, data, index ) {
+                    $('td', row).eq(0).attr('style', 'padding-left: 8px; padding-right: 0px; padding-top: 4px; align: center;');
                     $('td', row).eq(1).attr('align', 'right');
                     $('td', row).eq(1).attr('data-export', index+1);
                     $('td', row).eq(2).attr('data-export', $('td', row).eq(2).text());
@@ -329,10 +330,10 @@
                 },
                 "data": json_trait_list,
                 "columns": [
-                    { "type": "natural", "width": "8%" },
+                    { "type": "natural", "width": "5%" },
                     { "type": "natural", "width": "12%" },
-                    { "type": "natural", "width": "40%" },
-                    { "type": "natural", "width": "40%"}
+                    { "type": "natural" },
+                    { "type": "natural", "width": "30%"}
                 ],
                 "columnDefs": [ {
                     "targets": 0,
@@ -341,8 +342,7 @@
                 "order": [[1, "asc" ]],
                 buttons: [
                     {
-                        extend: 'colvis',
-                        text: 'Show or Hide Columns',
+                        extend: 'columnsToggle',
                         columns: ':not(:first-child)',
                         postfixButtons: [ 'colvisRestore' ]
                     }
@@ -355,9 +355,11 @@
                 "scrollY": "600px",
                 "scrollCollapse": true,
                 "scroller": true,
-                "paging": false
+                "paging": false,
+                "orderClasses": true
             } );
             {% endif %}
+
             console.timeEnd("Creating table");
             
             var table = $('#trait_table').DataTable();