Merge /home/zas1024/gene

6 files changed, 424 insertions, 206 deletions

diff --git a/wqflask/wqflask/templates/collections/list.html b/wqflask/wqflask/templates/collections/list.html
index f14c0921..a00878a0 100755
--- a/wqflask/wqflask/templates/collections/list.html
+++ b/wqflask/wqflask/templates/collections/list.html
@@ -1,5 +1,12 @@
 {% extends "base.html" %}
 {% block title %}Your Collections{% 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="//cdn.datatables.net/fixedheader/2.1.2/css/dataTables.fixedHeader.css" >
+    <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/fixedcolumns/3.0.4/css/dataTables.fixedColumns.css">
+{% endblock %}
 {% block content %}
 <!-- Start of body -->
     {{ header("Your Collections",
@@ -11,8 +18,8 @@
             <h1>Collections owned by {{ g.user_session.user_ob.full_name }}</h1>
         </div>
 
-        <div class="bs-docs-example" id="collections_list">
-        <table class="table table-hover" id='trait_table'>
+        <div id="collections_list">
+        <table class="table table-hover table-striped" id='trait_table'>
             <thead>
                 <tr>
                     <th>Index</th>
@@ -49,7 +56,33 @@
 
 {% block js %}
     <script type="text/javascript" src="/static/packages/smart-time-ago/lib/timeago.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="/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/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>
-        $('body').timeago();
+            $('#trait_table').dataTable( {
+                "sDom": "Ztir",
+                "iDisplayLength": -1,
+                "autoWidth": true,
+                "bLengthChange": true,
+                "bDeferRender": true,
+                "bSortClasses": false,
+                "scrollY": "600px",
+                "scrollX": true,
+                "scrollCollapse": true,
+                "colResize": {
+                    "tableWidthFixed": false
+                },
+                "paging": false
+            } );
+
+            var table = $('#trait_table').DataTable();
+            //new $.fn.dataTable.FixedHeader( table );
+            new $.fn.dataTable.FixedColumns( table );
+
     </script>
 {% endblock %}
diff --git a/wqflask/wqflask/templates/collections/view.html b/wqflask/wqflask/templates/collections/view.html
index 053861ae..49df6af5 100755
--- a/wqflask/wqflask/templates/collections/view.html
+++ b/wqflask/wqflask/templates/collections/view.html
@@ -4,6 +4,8 @@
     <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="//cdn.datatables.net/fixedheader/2.1.2/css/dataTables.fixedHeader.css" >
+    <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/fixedcolumns/3.0.4/css/dataTables.fixedColumns.css">
 {% endblock %}
 {% block content %}
 <!-- Start of body -->
@@ -102,7 +104,7 @@
                     <TD>{{ this_trait.additive }}</TD>
 
                 </TR>
-            {% endfor %}
+                {% endfor %}
             </tbody>
 
         </table>
@@ -118,8 +120,13 @@
     <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="/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/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">
         $(document).ready( function () {
 
@@ -131,36 +138,39 @@
 
             console.time("Creating table");
             $('#trait_table').dataTable( {
-                "aoColumns": [
-                    { "bSortable": false },
-                    { "sType": "natural" },
-                    { "sType": "natural",
-                      "sWidth": "35%"  },
-                    { "sType": "natural",
-                      "sWidth": "15%"  },
-                    { "sType": "cust-txt" },
-                    { "sType": "natural",
-                      "sWidth": "12%"  },
-                    { "sType": "natural",
-                      "sWidth": "15%"  },
-                    { "sType": "cust-txt" }
-                ],
                 "columns": [
-                    { "width": "50%" },
-                    null,
-                    null,
-                    null,
-                    null,
-                    null
+                    { "type": "natural" },
+                    { "type": "natural" },
+                    { "type": "natural",
+                      "width": "35%"  },
+                    { "type": "natural",
+                      "width": "15%"  },
+                    { "type": "cust-txt" },
+                    { "type": "natural",
+                      "width": "12%"  },
+                    { "type": "natural",
+                      "width": "15%"  },
+                    { "type": "natural" }
                 ],
-                "sDom": "tir",
+                "sDom": "Ztir",
                 "iDisplayLength": -1,
                 "autoWidth": true,
                 "bLengthChange": true,
                 "bDeferRender": true,
-                "bSortClasses": false
+                "bSortClasses": false,
+                "scrollY": "600px",
+                "scrollX": true,
+                "scrollCollapse": true,
+                "colResize": {
+                    "tableWidthFixed": false
+                },
+                "paging": false
             } );
             console.timeEnd("Creating table");
+
+            var table = $('#trait_table').DataTable();
+            new $.fn.dataTable.FixedColumns( table );
+
         });
         
     </script>
diff --git a/wqflask/wqflask/templates/correlation_page.html b/wqflask/wqflask/templates/correlation_page.html
index 445ad428..d53f930d 100755
--- a/wqflask/wqflask/templates/correlation_page.html
+++ b/wqflask/wqflask/templates/correlation_page.html
@@ -3,6 +3,8 @@
     <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">
 {% endblock %}
 {% block content %}
     
@@ -21,17 +23,19 @@
         </p>    
 
         <div>
-            <table id="corr_results" class="table table-hover table-striped table-bordered">
+            <table id="corr_results" class="table table-hover table-striped">
                 <thead>
                     <tr>
-                    {% if target_dataset.type == 'ProbeSet' %}
-                        <th>Trait</th>
-                        <th>Symbol</th>
-                        <th>Description</th>
-                        <th>Location</th>
-                        <th>Mean Expr</th>
-                        <th>Max LRS</th>
-                        <th>Max LRS Location</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>
+                        {% 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>
+                        {% else %}
+                        <th>{{header}}</th>
+                        {% endif %}
+                    {% endfor %}
+                        {% if target_dataset.type == "ProbeSet" %}
                         {% if corr_method == 'pearson' %}
                         <th>Sample r</th>
                         <th>N Cases</th>
@@ -48,10 +52,6 @@
                         <th>Tissue p(rho)</th>
                         {% endif %}
                     {% elif target_dataset.type == "Publish" %}
-                        <th>Record ID</th>
-                        <th>Phenotype</th>
-                        <th>Authors</th>
-                        <th>Year</th>
                         {% if corr_method == 'pearson' %}
                         <th>Sample r</th>
                         <th>N Cases</th>
@@ -62,8 +62,6 @@
                         <th>Sample p(rho)</th>
                         {% endif %}
                     {% elif target_dataset.type == "Geno" %}
-                        <th>Record ID</th>
-                        <th>Location</th>
                         {% if corr_method == 'pearson' %}
                         <th>Sample r</th>
                         <th>N Cases</th>
@@ -76,54 +74,64 @@
                     {% endif %}
                     </tr>
                 </thead>
+
                 <tbody>
                 {% for trait in correlation_results %}
                     <tr>
-                    {% if target_dataset.type == 'ProbeSet' %}
-                        <td><a href="/show_trait?trait_id={{trait.name}}&amp;dataset={{trait.dataset.name}}">{{ trait.name }}</a></td>
-                        <td>{{ trait.symbol }}</td>
-                        <td>{{ trait.description }} <br><br> <b>Aliases</b>: {{ trait.alias }}</td>
-                        <td>Chr{{ trait.chr }}: {{'%0.6f'|format(trait.mb) if trait.mb != None }}</td>
-                        <td>{{'%0.3f'|format(trait.mean)}}</td>
-                        {% if trait.lrs == "" or trait.lrs == 0.000 %}
-                        <td>--</td>
-                        {% else %}
-                        <td>{{'%0.3f'|format(trait.lrs)}}</td>
-                        {% endif %}
-                        {% if trait.locus_mb == "" %}
-                        <td>--</td>
-                        {% else %}
-                        <td>Chr{{ trait.locus_chr if trait.locus_chr != None }}: {{'%0.3f'|format(trait.locus_mb)}}</td>
-                        {% endif %}
-                        <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>{{ loop.index }}
+                            <INPUT TYPE="checkbox" NAME="result_trait" class="checkbox trait_checkbox"
+                                   VALUE="{{ data_hmac('{}:{}'.format(trait.name, target_dataset.name)) }}">
+                        </TD>
+                        <TD>
+                            <a href="{{ url_for('show_trait_page',
+                                    trait_id = trait.name,
+                                    dataset = dataset.name
+                                    )}}">
+                                {{ trait.name }}
+                            </a>
+                        </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>
                         {% if trait.lit_corr == "" or trait.lit_corr == 0.000 %}
-                        <td>--</td>
+                        <TD>--</TD>
                         {% else %}
-                        <td>{{'%0.3f'|format(trait.lit_corr)}}</td>
+                        <TD>{{'%0.3f'|format(trait.lit_corr)}}</TD>
                         {% endif %}
                         {% if trait.tissue_corr == "" or trait.tissue_corr == 0.000 %}
-                        <td>--</td>
+                        <TD>--</TD>
                         {% else %}
-                        <td>{{'%0.3f'|format(trait.tissue_corr)}}</td>
+                        <TD>{{'%0.3f'|format(trait.tissue_corr)}}</TD>
                         {% endif %}
-                        <td>{{'%0.3e'|format(trait.tissue_pvalue)}}</td>
-                    {% elif target_dataset.type == "Publish" %}
-                        <td><a href="/show_trait?trait_id={{trait.name}}&amp;dataset={{trait.dataset.name}}">{{ trait.name }}</a></td>
-                        <td>{{ trait.post_publication_description }}</td>
-                        <td>{{ trait.authors }}</td>
-                        <td>{{ trait.year }}</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>
-                    {% elif target_dataset.type == "Geno" %}
-                        <td><a href="/show_trait?trait_id={{trait.name}}&amp;dataset={{trait.dataset.name}}">{{ trait.name }}</a></td>
-                        <td>Chr{{ trait.chr }}: {{'%0.6f'|format(trait.mb) }}</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>
-                    {% endif %}
+                        <TD>{{'%0.3e'|format(trait.tissue_pvalue)}}</TD>
+                      {% elif target_dataset.type == "Publish" %}
+                        <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>
+                      {% 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>
+                      {% endif %}
                     </tr>
                 {% endfor %}
                 </tbody>
@@ -133,35 +141,161 @@
 {% endblock %}
 
 {% block js %}  
-    <script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/js/jquery.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="/static/new/packages/DataTables/js/jquery.dataTables.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) {
+            if (x.indexOf('input') >= 0) {
+                if ($(x).val() == 'x') {
+                    return 0;
+                }
+                else {
+                   return parseFloat($(x).val());
+                }
+            }
+            else if (isNaN(x)) {
+                return x;
+            }
+            return parseFloat(x);
+        }
+            
+        jQuery.fn.dataTableExt.oSort['numeric-html-asc']  = function(a,b) {
+            a = Math.abs(parseFloat($(a).text()));
+            b = Math.abs(parseFloat($(b).text()));
+            return ((a < b) ? -1 : ((a > b) ?  1 : 0));
+        };
+
+        jQuery.fn.dataTableExt.oSort['numeric-html-desc']  = function(a,b) {
+            a = Math.abs(parseFloat($(a).text()));
+            b = Math.abs(parseFloat($(b).text()));
+            return ((a < b) ? 1 : ((a > b) ?  -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));
+        };
+
+
         $(document).ready( function () {
+            
+            $('#corr_results tr').click(function(event) {
+                if (event.target.type !== 'checkbox') {
+                    $(':checkbox', this).trigger('click');
+                }
+            });
+
             console.time("Creating table");
+
+            {% if target_dataset.type == "ProbeSet" %}
             $('#corr_results').dataTable( {
-                //"sDom": "<<'span3'l><'span3'T><'span4'f>'row-fluid'r>t<'row-fluid'<'span6'i><'span6'p>>",
-                "sDom": "lTftipr",
-                "oTableTools": {
-                    "aButtons": [
-                        "copy",
-                        "print",
-                        {
-                            "sExtends":    "collection",
-                            "sButtonText": 'Save <span class="caret" />',
-                            "aButtons":    [ "csv", "xls", "pdf" ]
-                        }
-                    ],
-                    "sSwfPath": "/static/packages/TableTools/media/swf/copy_csv_xls_pdf.swf"
+                "columns": [
+                    { "type": "natural" },
+                    { "type": "natural" },
+                    { "type": "natural" },
+                    { "type": "natural" },
+                    { "type": "natural" },
+                    { "type": "natural" },
+                    { "type": "natural" },
+                    { "type": "natural" },
+                    { "type": "natural" },
+                    { "type": "numeric-html" },
+                    { "type": "natural" },
+                    { "type": "natural" },
+                    { "type": "natural" },
+                    { "type": "natural" },
+                    { "type": "natural" }
+                ],
+                "sDom": "RJtir",
+                "iDisplayLength": -1,
+                "autoWidth": true,
+                "bLengthChange": true,
+                "bDeferRender": true,
+                "bSortClasses": false,
+                "scrollY": "700px",
+                "scrollCollapse": false,
+                "colResize": {
+                    "tableWidthFixed": false
                 },
-                "iDisplayLength": 50,
+                "paging": false
+            } );
+            {% elif target_dataset.type == "Publish" %}
+            $('#corr_results').dataTable( {
+                "aoColumns": [
+                    { "type": "natural" },
+                    { "type": "natural" },
+                    { "type": "natural" },
+                    { "type": "natural" },
+                    { "type": "natural" },
+                    { "type": "natural" },
+                    { "type": "natural" },
+                    { "type": "natural" },
+                    { "type": "numeric-html" },
+                    { "type": "natural" },
+                    { "type": "natural" }
+                ],
+                "sDom": "RJtir",
+                "iDisplayLength": -1,
+                "autoWidth": true,
                 "bLengthChange": true,
                 "bDeferRender": true,
-                "bSortClasses": false
+                "bSortClasses": false,
+                "scrollY": "700px",
+                "scrollCollapse": false,
+                "colResize": {
+                    "tableWidthFixed": false
+                },
+                "paging": false
             } );
+            {% elif target_dataset.type == "Geno" %}
+            $('#corr_results').dataTable( {
+                "columns": [
+                    { "type": "natural" },
+                    { "type": "natural" },
+                    { "type": "natural" },
+                    { "type": "numeric-html" },
+                    { "type": "natural" },
+                    { "type": "natural" }
+                ],
+                "sDom": "RJtir",
+                "iDisplayLength": -1,
+                "autoWidth": true,
+                "bLengthChange": true,
+                "bDeferRender": true,
+                "bSortClasses": false,
+                "scrollY": "700px",
+                "scrollCollapse": false,
+                "colResize": {
+                    "tableWidthFixed": false
+                },
+                "paging": false
+            } );
+            {% endif %}
             console.timeEnd("Creating table");
+
         });
     </script>
 {% endblock %}
diff --git a/wqflask/wqflask/templates/search_result_page.html b/wqflask/wqflask/templates/search_result_page.html
index cc1a6a88..7c8bdb1b 100755
--- a/wqflask/wqflask/templates/search_result_page.html
+++ b/wqflask/wqflask/templates/search_result_page.html
@@ -4,6 +4,8 @@
     <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/dataTables.fixedHeader.css" >
+    <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/fixedcolumns/3.0.4/css/dataTables.fixedColumns.css">
 {% endblock %}
 {% block content %}
 <!-- Start of body -->
@@ -45,7 +47,7 @@
             <button class="btn btn-primary"><span class="glyphicon glyphicon-download"></span> Download Table</button>
             <br />
             <br />
-            <table class="table table-hover table-striped" id='trait_table'>
+            <table class="table table-hover table-striped" id='trait_table' {% if dataset.type == 'Geno' %}width="400px"{% endif %} style="float: left;">
                 <thead>
                     <tr>
                     {% for header in header_fields %}
@@ -116,14 +118,13 @@
     
     <script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/js/jquery.dataTables.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/new/packages/DataTables/extensions/dataTables.fixedHeader.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/DT_bootstrap/DT_bootstrap.js"></script>
     <script language="javascript" type="text/javascript" src="/static/packages/TableTools/media/js/TableTools.min.js"></script>
 	
-    <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">
-    <script src="//cdn.datatables.net/fixedheader/2.1.2/js/dataTables.fixedHeader.min.js"></script>
-    <script src="//cdn.datatables.net/fixedcolumns/3.0.4/js/dataTables.fixedColumns.min.js"></script>
-	
     <script type="text/javascript" charset="utf-8">
         function getValue(x) {
             if (x.indexOf('input') >= 0) {
@@ -172,59 +173,83 @@
 
             console.time("Creating table");
             {% if dataset.type == 'ProbeSet' %}
-            $('#trait_table').dataTable( {
-                "aoColumns": [
-                    { "bSortable": true, "sType": "natural" },
-                    { "sType": "natural" },
-                    { "sType": "natural" },
-                    { "sType": "natural", "sWidth": "35%"},
-                    { "sType": "natural", "sWidth": "15%"},
-                    { "sType": "natural" },
-                    { "sType": "natural", "sWidth": "8%"},
-                    { "sType": "natural", "sWidth": "15%"},
-                    { "sType": "natural", "sWidth": "7%"}
+            $('#trait_table').DataTable( {
+                "columns": [
+                    { "type": "natural" },
+                    { "type": "natural" },
+                    { "type": "natural" },
+                    { "type": "natural" },
+                    { "type": "natural" },
+                    { "type": "natural" },
+                    { "type": "natural" },
+                    { "type": "natural" },
+                    { "type": "natural" }
                 ],
-                "sDom": "tir",
+                "sDom": "RJtir",
                 "iDisplayLength": -1,
                 "autoWidth": true,
                 "bLengthChange": true,
                 "bDeferRender": true,
                 "bSortClasses": false,
-                "scrollY": "300px",
-                "scrollX": "100%",
-                "scrollCollapse": true,
+                "scrollY": "700px",
+                "scrollCollapse": false,
+                "colResize": {
+                    "tableWidthFixed": false,
+                },
                 "paging": false
             } );
             {% elif dataset.type == 'Publish' %}
-            $('#trait_table').dataTable( {
-                "aoColumns": [
-                    { "bSortable": true, "sType": "natural" },
-                    { "sType": "natural" },
-                    { "sType": "natural", "sWidth": "35%"  },
-                    { "sType": "natural", "sWidth": "20%"  },
-                    { "sType": "natural" },
-                    { "sType": "cust-txt" },
-                    { "sType": "natural" },
-                    { "sType": "cust-txt" }
+            $('#trait_table').DataTable( {
+                "columns": [
+                    { "type": "natural" },
+                    { "type": "natural" },
+                    { "type": "natural" },
+                    { "type": "natural" },
+                    { "type": "natural" },
+                    { "type": "natural" },
+                    { "type": "natural", "width": "15%"},
+                    { "type": "natural" }
                 ],
-                "sDom": "tir",
+                "sDom": "RJtir",
                 "iDisplayLength": -1,
                 "autoWidth": true,
                 "bLengthChange": true,
                 "bDeferRender": true,
                 "bSortClasses": false,
-                "scrollY": "300px",
-                "scrollX": "100%",
-                "scrollCollapse": true,
+                "scrollY": "700px",
+                "scrollCollapse": false,
+                "colResize": {
+                    "tableWidthFixed": false,
+                },
+                "paging": false
+            } );
+            {% elif dataset.type == 'Geno' %}
+            $('#trait_table').DataTable( {
+                "columns": [
+                    { "type": "natural" },
+                    { "type": "natural" },
+                    { "type": "natural", "width": "40%"}
+                ],
+                "sDom": "RJtir",
+                "iDisplayLength": -1,
+                "autoWidth": true,
+                "bLengthChange": true,
+                "bDeferRender": true,
+                "bSortClasses": false,
+                "scrollY": "700px",
+                "scrollCollapse": false,
+                "colResize": {
+                    "tableWidthFixed": false,
+                },
                 "paging": false
             } );
             {% endif %}
             console.timeEnd("Creating table");
-
-            var table = $('#trait_table').DataTable();
-            new $.fn.dataTable.FixedHeader( table );
-            new $.fn.dataTable.FixedColumns( table );
          
+            //var table = $('#trait_table').DataTable();
+            //new $.fn.dataTable.FixedHeader( table );
+            //new $.fn.dataTable.FixedColumns( table );
+
         });
     </script>
 {% endblock %}
diff --git a/wqflask/wqflask/templates/show_trait.html b/wqflask/wqflask/templates/show_trait.html
index cdde5d9d..b4d6b85b 100755
--- a/wqflask/wqflask/templates/show_trait.html
+++ b/wqflask/wqflask/templates/show_trait.html
@@ -13,6 +13,8 @@
     <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/dataTables.fixedHeader.css" >
+    <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/fixedcolumns/3.0.4/css/dataTables.fixedColumns.css">
 
 {% endblock %}
 {% block content %} <!-- Start of body -->
@@ -146,6 +148,10 @@
     <script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/js/jquery.dataTables.min.js"></script>
     <script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/js/dataTables.scientific.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/new/packages/DataTables/extensions/dataTables.fixedHeader.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/DT_bootstrap/DT_bootstrap.js"></script>
     <script language="javascript" type="text/javascript" src="/static/packages/TableTools/media/js/TableTools.min.js"></script>
     <script type="text/javascript" charset="utf-8">
@@ -195,68 +201,79 @@
                 });
 
                 console.time("Creating table");
-                
-                {% if sample_groups[0].se_exists() %}
-                    $('#samples_primary, #samples_other').find("tr.outlier").css('background-color', 'yellow')
-                    $('#samples_primary, #samples_other').dataTable( {
-                        //"sDom": "<<'span3'l><'span3'T><'span4'f>'row-fluid'r>t<'row-fluid'<'span6'i><'span6'p>>",
-                        "aoColumns": [
-                            { "sType": "natural" },
-                            null,
-                            { "sType": "cust-txt" },
-                            { "bSortable": false },
-                            { "sType": "cust-txt" }
+
+                $('#samples_primary, #samples_other').find("tr.outlier").css('background-color', 'yellow')
+                {% if sample_groups[0].se_exists() %} 
+                $('#samples_primary, #samples_other').DataTable( {
+                    "columns": [
+                        { "type": "natural" },
+                        { "type": "natural" },
+                        { "type": "cust-txt" },
+                        { "bSortable": false },
+                        { "type": "cust-txt" }
+                        ],
+                    "sDom": "RJtir",
+                    "oTableTools": {
+                        "aButtons": [
+                            "copy",
+                            "print",
+                            {
+                                "sExtends":    "collection",
+                                "sButtonText": 'Save <span class="caret" />',
+                                "aButtons":    [ "csv", "xls", "pdf" ]
+                            }
                         ],
-                        "sDom": "ftr",
-                        "oTableTools": {
-                            "aButtons": [
-                                "copy",
-                                "print",
-                                {
-                                    "sExtends":    "collection",
-                                    "sButtonText": 'Save <span class="caret" />',
-                                    "aButtons":    [ "csv", "xls", "pdf" ]
-                                }
-                            ],
-                            "sSwfPath": "/static/packages/TableTools/media/swf/copy_csv_xls_pdf.swf"
-                        },
-                        "bPaginate": false,
-                        "bLengthChange": true,
-                        "bDeferRender": true,
-                        "bSortClasses": false
-                    } );
-                    console.timeEnd("Creating table");
+                        "sSwfPath": "/static/packages/TableTools/media/swf/copy_csv_xls_pdf.swf"
+                    },
+                    "iDisplayLength": -1,
+                    "autoWidth": true,
+                    "bLengthChange": true,
+                    "bDeferRender": true,
+                    "bSortClasses": false,
+                    "scrollY": "600px",
+                    "scrollCollapse": false,
+                    "colResize": {
+                        "tableWidthFixed": false
+                    },
+                    "paging": false
+                } );
+                console.timeEnd("Creating table");
 
                 {% else %}
-        
-            
-                    console.time("Creating table");
+                console.time("Creating table");
                     
-                    $('#samples_primary, #samples_other').dataTable( {
-                        //"sDom": "<<'span3'l><'span3'T><'span4'f>'row-fluid'r>t<'row-fluid'<'span6'i><'span6'p>>",
-                        "aoColumns": [
-                            { "sType": "natural" },
-                            null,
-                            { "sType": "cust-txt" }
+                $('#samples_primary, #samples_other').DataTable( {
+                    "columns": [
+                        { "type": "natural" },
+                        null,
+                        { "type": "cust-txt" }
+                    ],
+                    "sDom": "RJtir",
+                    "oTableTools": {
+                        "aButtons": [
+                            "copy",
+                            "print",
+                            {
+                                "sExtends":    "collection",
+                                "sButtonText": 'Save <span class="caret" />',
+                                "aButtons":    [ "csv", "xls", "pdf" ]
+                            }
                         ],
-                        "sDom": "ftr",
-                        "oTableTools": {
-                            "aButtons": [
-                                "copy",
-                                "print",
-                                {
-                                    "sExtends":    "collection",
-                                    "sButtonText": 'Save <span class="caret" />',
-                                    "aButtons":    [ "csv", "xls", "pdf" ]
-                                }
-                            ],
-                            "sSwfPath": "/static/packages/TableTools/media/swf/copy_csv_xls_pdf.swf"
-                        },
-                        "bPaginate": false,
-                        "bLengthChange": true,
-                        "bDeferRender": true,
-                        "bSortClasses": false
-                    } );
+                        "sSwfPath": "/static/packages/TableTools/media/swf/copy_csv_xls_pdf.swf"
+                    },
+                    "iDisplayLength": -1,
+                    "autoWidth": true,
+                    "bLengthChange": true,
+                    "bDeferRender": true,
+                    "bSortClasses": false,
+                    "scrollY": "600px",
+                    "scrollX": true,
+                    "scrollCollapse": false,
+                    "colResize": {
+                        "tableWidthFixed": false
+                    },
+                    "paging": false
+                } );
                 {% endif %}
             });
     </script>
diff --git a/wqflask/wqflask/templates/show_trait_edit_data.html b/wqflask/wqflask/templates/show_trait_edit_data.html
index a02dc409..8c919ee0 100755
--- a/wqflask/wqflask/templates/show_trait_edit_data.html
+++ b/wqflask/wqflask/templates/show_trait_edit_data.html
@@ -73,26 +73,25 @@
     <br>
 
 
-    <div id="edit_sample_lists">
+    <!--<div id="edit_sample_lists">-->
     {% for sample_type in sample_groups %}
-        <div class="sample_group">
+        <!--<div class="sample_group">-->
             <h3>{{ sample_type.header }}</h3>
 
-            <table cellpadding="0" cellspacing="0" border="0" class="table table-hover table-striped table-bordered"
-                   id="samples_{{ sample_type.sample_group_type }}">
+            <table class="table table-hover table-striped" id="samples_{{ sample_type.sample_group_type }}" style="float: left;">
                 <thead>
                     <tr>
-                        <td>Index</td>
-                        <td>Sample</td>
-                        <td>Value</td>
+                        <th>Index</td>
+                        <th>Sample</td>
+                        <th>Value</td>
                         {% if sample_type.se_exists() %}
-                        <td>&nbsp;</td>
-                        <td>SE</td>
+                        <th>&nbsp;</td>
+                        <th>SE</td>
                         {% endif %}
                         {% for attribute in sample_type.attributes|sort() %}
-                        <td>
+                        <th>
                             {{ sample_type.attributes[attribute].name }}
-                        </td>
+                        </th>
                         {% endfor %}
                     </tr>
                 </thead>
@@ -148,9 +147,9 @@
                     {% endfor %}
                 </tbody>
             </table>
-        </div>
+        <!--</div>-->
         {% endfor %}
-    </div>
+    <!--</div>-->
 
 
     <input type="hidden" name="Default_Name">