Merge branch 'testing' of github.com:genenetwork/genenetwork2 into testing

1 files changed, 315 insertions, 203 deletions

diff --git a/wqflask/wqflask/templates/correlation_page.html b/wqflask/wqflask/templates/correlation_page.html
index bc0b592c..6419b185 100644
--- a/wqflask/wqflask/templates/correlation_page.html
+++ b/wqflask/wqflask/templates/correlation_page.html
@@ -2,9 +2,11 @@
 {% block title %}Correlation Results{% endblock %}
 {% block css %}
     <link rel="stylesheet" type="text/css" href="{{ url_for('css', filename='DataTables/css/jquery.dataTables.css') }}" />
-    <link rel="stylesheet" type="text/css" href="/static/new/css/show_trait.css" />
     <link rel="stylesheet" type="text/css" href="{{ url_for('js', filename='DataTablesExtensions/buttonsBootstrap/css/buttons.bootstrap.css') }}" />
     <link rel="stylesheet" type="text/css" href="{{ url_for('js', filename='DataTablesExtensions/buttonStyles/css/buttons.dataTables.min.css') }}">
+    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
+    <link rel="stylesheet" type="text/css" href="/static/new/css/trait_list.css" />
+    <link rel="stylesheet" type="text/css" href="/static/new/css/show_trait.css" />
 {% endblock %}
 {% block content %}
     <div class="container" style="min-width: 1250px;">
@@ -112,10 +114,38 @@
             </div>
             {% endif %}
         </div>
-        <div style="margin-bottom: 5px;">
-            <b>Show/Hide Columns:</b>
+        <div class="show-hide-container">
+          <b>Show/Hide Columns:</b>
+          <br>
+          <button class="toggle-vis" data-column="1">Index</button>
+          <button class="toggle-vis" data-column="2">Record</button>
+          {% if target_dataset.type == 'ProbeSet' %}
+          <button class="toggle-vis" data-column="3">Symbol</button>
+          <button class="toggle-vis" data-column="4">Description</button>
+          <button class="toggle-vis" data-column="5">Location</button>
+          <button class="toggle-vis" data-column="6">Mean</button>
+          <button class="toggle-vis" data-column="7">High P</button>
+          <button class="toggle-vis" data-column="8">Peak Location</button>
+          <button class="toggle-vis" data-column="9">Effect Size</button>
+          {% elif target_dataset.type == 'Publish' %}
+          <button class="toggle-vis" data-column="3">Abbreviation</button>
+          <button class="toggle-vis" data-column="4">Description</button>
+          <button class="toggle-vis" data-column="5">Authors</button>
+          <button class="toggle-vis" data-column="6">Year</button>
+          <button class="toggle-vis" data-column="7">Sample {% if corr_method == 'pearson' %}r{% else %}rho{% endif %}</button>
+          <button class="toggle-vis" data-column="8">N</button>
+          <button class="toggle-vis" data-column="9">Sample p({% if corr_method == 'pearson' %}r{% else %}rho{% endif %})</button>
+          <button class="toggle-vis" data-column="10">High P</button>
+          <button class="toggle-vis" data-column="11">Peak Location</button>
+          <button class="toggle-vis" data-column="12">Effect Size</button>
+          {% else %}
+          <button class="toggle-vis" data-column="3">Location</button>
+          <button class="toggle-vis" data-column="4">Sample {% if corr_method == 'pearson' %}r{% else %}rho{% endif %}</button>
+          <button class="toggle-vis" data-column="5">N</button>
+          <button class="toggle-vis" data-column="6">Sample p({% if corr_method == 'pearson' %}r{% else %}rho{% endif %})</button>
+          {% endif %}
         </div>
-        <div style="width: 100%; min-width: {% if target_dataset.type == "ProbeSet" %}1700px{% elif target_dataset.type == "Publish" %}1600px{% else %}600px{% endif %};">
+        <div style="width: 100%; {% if target_dataset.type == "ProbeSet" %}min-width: 1700px;{% elif target_dataset.type == "Publish" %}min-width: 1600px;{% else %}width: 650px;{% endif %}">
             <table id="trait_table" class="table-hover table-striped cell-border" style="float: left;">
                 <thead>
                     <tr>
@@ -127,77 +157,7 @@
                 </thead>
 
                 <tbody>
-                {% for trait in correlation_results %}
-                    <tr>
-                        <td><INPUT TYPE="checkbox" NAME="searchResult" class="checkbox trait_checkbox" style="padding-right: 0px;" VALUE="{{ data_hmac('{}:{}'.format(trait.name, trait.dataset.name)) }}"></td>
-                        <td data-export="{{ loop.index }}" style="padding-left: 8px; padding-right: 0px; padding-top: 4px; align: right;">{{ loop.index }}</td>
-                        <td data-export="{{ trait.name }}">
-                            <a href="{{ url_for('show_trait_page',
-                                    trait_id = trait.name,
-                                    dataset = trait.dataset.name
-                                    )}}">
-                                {{ trait.name }}
-                            </a>
-                        </td>
-                      {% if target_dataset.type == 'ProbeSet' %}
-                        <td data-export="{{ trait.symbol }}">{{ trait.symbol }}</td>
-                        <td data-export="{{ trait.description_display }}">{{ trait.description_display }}</TD>
-                        <td data-export="{{ trait.location_repr }}" style="white-space: nowrap;">{{ trait.location_repr }}</td>
-                        <td data-export="{{ '%0.3f' % trait.mean|float }}" align="right">{{ '%0.3f' % trait.mean|float }}</td>
-                        <td data-export="{{ '%0.3f'|format(trait.sample_r) }}"" align="right"><a target="_blank" href="corr_scatter_plot?dataset_1={% if dataset.name == 'Temp' %}Temp_{{ dataset.group.name }}{% else %}{{ dataset.name }}{% endif %}&dataset_2={% if trait.dataset.name == 'Temp' %}Temp_{{ trait.dataset.group.name }}{% else %}{{ trait.dataset.name }}{% endif %}&trait_1={{ this_trait.name }}&trait_2={{ trait.name }}">{{ '%0.3f'|format(trait.sample_r) }}</a></td>
-                        <td data-export="{{ trait.num_overlap }}" align="right">{{ trait.num_overlap }}</td>
-                        <td data-export="{{ '%0.3e'|format(trait.sample_p) }}" align="right">{{ '%0.3e'|format(trait.sample_p) }}</td>
-                        {% if trait.lit_corr == "" or trait.lit_corr == 0.000 %}
-                        <td data-export="--" align="right">--</td>
-                        {% else %}
-                        <td data-export="{{ '%0.3f'|format(trait.lit_corr) }}" align="right">{{ '%0.3f'|format(trait.lit_corr) }}</td>
-                        {% endif %}
-                        {% if trait.tissue_corr == "" or trait.tissue_corr == 0.000 %}
-                        <td data-export="--" align="right">--</td>
-                        <td data-export="--" align="right">--</td>
-                        {% else %}
-                        <td data-export="{{ '%0.3f'|format(trait.tissue_corr) }}" align="right">{{ '%0.3f'|format(trait.tissue_corr) }}</td>
-                        <td data-export="{{ '%0.3e'|format(trait.tissue_pvalue) }}" align="right">{{ '%0.3e'|format(trait.tissue_pvalue) }}</td>
-                        {% endif %}
-                        <td data-export={% if trait.LRS_score_repr != "N/A" %}"{{ '%0.1f' % trait.LRS_score_repr|float }}"{% else %}"N/A"{% endif %} align="right">{% if trait.LRS_score_repr != "N/A" %}{{ '%0.1f' % trait.LRS_score_repr|float }}{% else %}N/A{% endif %}</td>
-                        <td data-export="{{ trait.LRS_location_repr }}" align="right">{{ trait.LRS_location_repr }}</td>
-                        <td data-export={% if trait.additive != "" %}"{{ '%0.3f' % trait.additive|float }}"{% else %}"N/A"{% endif %} align="right">{% if trait.additive != "" %}{{ '%0.3f' % trait.additive|float }}{% else %}N/A{% endif %}</td>
-                      {% elif target_dataset.type == "Publish" %}
-                        {% if trait.abbreviation %}
-                        <td title="{{ trait.abbreviation }}" data-export="{{ trait.abbreviation }}">{% if trait.abbreviation|length > 20 %}{{ trait.abbreviation[:20] }}...{% else %}{{ trait.abbreviation }}{% endif %}</td>
-                        {% else %}
-                        <td data-export="N/A">N/A</td>
-                        {% endif %}
-                        <td data-export="{{ trait.description_display }}">{% if trait.description_display|length > 70 %}{{ trait.description_display[:70] }}...{% else %}{{ trait.description_display }}{% endif %}</td>
-                        {% if trait.authors %}
-                        {% set authors_list = trait.authors.split(',') %}
-                        <td data-export="{{ trait.authors }}">{% if authors_list|length > 6 %}{{ authors_list[:6]|join(', ') }}, et al.{% else %}{{ trait.authors }}{% endif %}</td>
-                        {% else %}
-                        <td data-export="N/A">N/A</td>
-                        {% endif %}
-                        <td data-export="{{ trait.pubmed_text }}">
-                            {% if trait.pubmed_text != "N/A" %}
-                            <a href="{{ trait.pubmed_link }}">
-                                {{ trait.pubmed_text }}
-                            </a>
-                            {% else %}
-                            {{ trait.pubmed_text }}
-                            {% endif %}
-                        </td>
-                        <td data-export="{{ '%0.3f'|format(trait.sample_r) }}"" align="right"><a target="_blank" href="corr_scatter_plot?dataset_1={% if dataset.name == 'Temp' %}Temp_{{ dataset.group.name }}{% else %}{{ dataset.name }}{% endif %}&dataset_2={{ trait.dataset.name }}&trait_1={{ this_trait.name }}&trait_2={{ trait.name }}">{{ '%0.3f'|format(trait.sample_r) }}</a></td>
-                        <td data-export="{{ trait.num_overlap }}" align="right">{{ trait.num_overlap }}</td>
-                        <td data-export="{{ '%0.3e'|format(trait.sample_p) }}" align="right">{{ '%0.3e'|format(trait.sample_p) }}</td>
-                        <td data-export="{{ trait.LRS_score_repr }}" align="right">{{ trait.LRS_score_repr }}</td>
-                        <td data-export="{{ trait.LRS_location_repr }}" align="right">{{ trait.LRS_location_repr }}</td>
-                        <td data-export={% if trait.additive != "" %}"{{ '%0.3f' % trait.additive|float }}"{% else %}"N/A"{% endif %} align="right">{% if trait.additive != "" %}{{ '%0.3f' % trait.additive|float }}{% else %}N/A{% endif %}</td>
-                      {% elif target_dataset.type == "Geno" %}
-                        <td data-export="{{ trait.location_repr }}" align="right">{{ trait.location_repr }}</TD>
-                        <td data-export="{{ '%0.3f'|format(trait.sample_r) }}"" align="right"><a target="_blank" href="corr_scatter_plot?dataset_1={% if dataset.name == 'Temp' %}Temp_{{ dataset.group.name }}{% else %}{{ dataset.name }}{% endif %}&dataset_2={{ trait.dataset.name }}&trait_1={{ this_trait.name }}&trait_2={{ trait.name }}">{{ '%0.3f'|format(trait.sample_r) }}</a></td>
-                        <td data-export="{{ trait.num_overlap }}" align="right">{{ trait.num_overlap }}</td>
-                        <td data-export="{{ '%0.3e'|format(trait.sample_p) }}" align="right">{{ '%0.3e'|format(trait.sample_p) }}</td>
-                      {% endif %}
-                    </tr>
-                {% endfor %}
+                    <td colspan="100%" align="center"><br><b><font size="15">Loading...</font></b><br></td>
                 </tbody>
             </table>
         </div>
@@ -215,6 +175,8 @@
     <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTablesExtensions/buttons/js/dataTables.buttons.min.js') }}"></script>
     <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTablesExtensions/buttons/js/buttons.colVis.min.js') }}"></script>
     <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTablesExtensions/plugins/sorting/natural.js') }}"></script>
+    <script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/js/all.min.js"></script>
+    <script language="javascript" type="text/javascript" src="https://cdn.datatables.net/scroller/2.0.2/js/dataTables.scroller.min.js"></script>
 
     <script type="text/javascript" charset="utf-8">
         var table_json = {{ json_results | safe }}
@@ -329,16 +291,7 @@
 
             console.time("Creating table");
 
-            {% if target_dataset.type == "ProbeSet" %}
             table_conf = {
-                "drawCallback": function( settings ) {
-                     $('#trait_table tr').click(function(event) {
-                         if (event.target.type !== 'checkbox') {
-                             $(':checkbox', this).trigger('click');
-                         }
-                     });
-                     $('.trait_checkbox:checkbox').on("change", change_buttons);
-                },
                 buttons: [
                     {
                         extend: 'columnsToggle',
@@ -352,136 +305,295 @@
                         postfixButtons: [ 'colvisRestore' ]
                     }
                 ],
+                "data": table_json,
+                "columns": [
+                    {
+                      'data': null,
+                      'width': "25px",
+                      'orderDataType': "dom-checkbox",
+                      'orderSequence': [ "desc", "asc"],
+                      'render': function(data, type, row, meta) {
+                        return '<input type="checkbox" name="searchResult" class="checkbox trait_checkbox" value="' + data.hmac + '">'
+                      }
+                    },
+                    {
+                      'title': "Index",
+                      'type': "natural",
+                      'width': "30px",
+                      'data': "index"
+                    },
+                    {
+                      'title': "Record",
+                      'type': "natural-minus-na",
+                      'data': null,
+                      'width': "60px",
+                      'render': function(data, type, row, meta) {
+                        return '<a target="_blank" href="/show_trait?trait_id=' + data.trait_id + '&dataset=' + data.dataset + '">' + data.trait_id + '</a>'
+                      }
+                    }{% if target_dataset.type == 'ProbeSet' %},
+                    {
+                      'title': "Symbol",
+                      'type': "natural",
+                      'width': "120px",
+                      'data': "symbol"
+                    },
+                    {
+                      'title': "Description",
+                      'type': "natural",
+                      'data': null,
+                      'render': function(data, type, row, meta) {
+                        try {
+                          return decodeURIComponent(escape(data.description))
+                        } catch(err){
+                          return escape(data.description)
+                        }
+                      }
+                    },
+                    {
+                      'title': "Location",
+                      'type': "natural-minus-na",
+                      'width': "125px",
+                      'data': "location"
+                    },
+                    {
+                      'title': "Mean",
+                      'type': "natural-minus-na",
+                      'width': "40px",
+                      'data': "mean",
+                      'orderSequence': [ "desc", "asc"]
+                    },
+                    {
+                      'title': "Sample {% if corr_method == 'pearson' %}r{% else %}rho{% endif %}",
+                      'type': "natural-minus-na",
+                      'width': "40px",
+                      'data': "sample_r",
+                      'orderSequence': [ "desc", "asc"]
+                    },
+                    {
+                      'title': "N",
+                      'type': "natural-minus-na",
+                      'width': "40px",
+                      'data': "num_overlap",
+                      'orderSequence': [ "desc", "asc"]
+                    },
+                    {
+                      'title': "Sample p({% if corr_method == 'pearson' %}r{% else %}rho{% endif %})",
+                      'type': "natural-minus-na",
+                      'width': "65px",
+                      'data': "sample_p",
+                      'orderSequence': [ "desc", "asc"]
+                    },
+                    {
+                      'title': "Lit {% if corr_method == 'pearson' %}r{% else %}rho{% endif %}",
+                      'type': "natural-minus-na",
+                      'width': "40px",
+                      'data': "lit_corr",
+                      'orderSequence': [ "desc", "asc"]
+                    },
+                    {
+                      'title': "Tissue {% if corr_method == 'pearson' %}r{% else %}rho{% endif %}",
+                      'type': "natural-minus-na",
+                      'width': "40px",
+                      'data': "tissue_corr",
+                      'orderSequence': [ "desc", "asc"]
+                    },
+                    {
+                      'title': "Tissue p({% if corr_method == 'pearson' %}r{% else %}rho{% endif %})",
+                      'type': "natural-minus-na",
+                      'width': "40px",
+                      'data': "tissue_pvalue",
+                      'orderSequence': [ "desc", "asc"]
+                    },
+                    {
+                      'title': "High P<a href=\"http://gn1.genenetwork.org/glossary.html#LRS\" target=\"_blank\" style=\"color: white;\">&nbsp;<i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i></a>",
+                      'type': "natural-minus-na",
+                      'data': "lrs_score",
+                      'width': "60px",
+                      'orderSequence': [ "desc", "asc"]
+                    },
+                    {
+                      'title': "Peak Location",
+                      'type': "natural-minus-na",
+                      'width': "125px",
+                      'data': "lrs_location"
+                    },
+                    {
+                      'title': "Effect Size<a href=\"http://gn1.genenetwork.org/glossary.html#A\" target=\"_blank\" style=\"color: white;\">&nbsp;<i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i></a>",
+                      'type': "natural-minus-na",
+                      'data': "additive",
+                      'width': "85px",
+                      'orderSequence': [ "desc", "asc"]
+                    }{% elif target_dataset.type == 'Publish' %},
+                    {
+                      'title': "Abbreviation",
+                      'type': "natural",
+                      'width': "200px",
+                      'data': null,
+                      'render': function(data, type, row, meta) {
+			                  try {
+                          return decodeURIComponent(escape(data.abbreviation_display))
+			                  } catch(err){
+			                    return data.abbreviation_display
+                        }
+                      }
+                    },
+                    {
+                      'title': "Description",
+                      'type': "natural",
+                      'data': null,
+                      'render': function(data, type, row, meta) {
+			                  try {
+                          return decodeURIComponent(escape(data.description))
+			                  } catch(err){
+			                    return data.description
+                        }
+                      }
+                    },
+                    {
+                      'title': "Authors",
+                      'type': "natural",
+                      'width': "400px",
+                      'data': null,
+                      'render': function(data, type, row, meta) {
+			                  try {
+                          return decodeURIComponent(escape(data.authors_display))
+			                  } catch(err){
+			                    return data.authors_display
+                        }
+                      }
+                    },
+                    {
+                      'title': "Year",
+                      'type': "natural-minus-na",
+                      'data': null,
+                      'width': "80px",
+                      'render': function(data, type, row, meta) {
+                        if (data.pubmed_id != "N/A"){
+                          return '<a href="' + data.pubmed_link + '">' + data.pubmed_text + '</a>'
+                        } else {
+                          return data.pubmed_text
+                        }
+                      },
+                      'orderSequence': [ "desc", "asc"]
+                    },
+                    {
+                      'title': "Sample {% if corr_method == 'pearson' %}r{% else %}rho{% endif %}",
+                      'type': "natural-minus-na",
+                      'width': "40px",
+                      'data': "sample_r",
+                      'orderSequence': [ "desc", "asc"]
+                    },
+                    {
+                      'title': "N",
+                      'type': "natural-minus-na",
+                      'width': "40px",
+                      'data': "num_overlap",
+                      'orderSequence': [ "desc", "asc"]
+                    },
+                    {
+                      'title': "Sample p({% if corr_method == 'pearson' %}r{% else %}rho{% endif %})",
+                      'type': "natural-minus-na",
+                      'width': "65px",
+                      'data': "sample_p",
+                      'orderSequence': [ "desc", "asc"]
+                    },
+                    {
+                      'title': "High P<a href=\"http://gn1.genenetwork.org/glossary.html#LRS\" target=\"_blank\" style=\"color: white;\">&nbsp;<i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i></a>",
+                      'type': "natural-minus-na",
+                      'data': "lrs_score",
+                      'width': "60px",
+                      'orderSequence': [ "desc", "asc"]
+                    },
+                    {
+                      'title': "Peak Location",
+                      'type': "natural-minus-na",
+                      'width': "125px",
+                      'data': "lrs_location"
+                    },
+                    {
+                      'title': "Effect Size<a href=\"http://gn1.genenetwork.org/glossary.html#A\" target=\"_blank\" style=\"color: white;\">&nbsp;<i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i></a>",
+                      'type': "natural-minus-na",
+                      'data': "additive",
+                      'width': "85px",
+                      'orderSequence': [ "desc", "asc"]
+                    }{% elif target_dataset.type == 'Geno' %},
+                    {
+                      'title': "Location",
+                      'type': "natural-minus-na",
+                      'width': "120px",
+                      'data': "location"
+                    }, 
+                    {
+                      'title': "Sample {% if corr_method == 'pearson' %}r{% else %}rho{% endif %}",
+                      'type': "natural-minus-na",
+                      'width': "40px",
+                      'data': "sample_r",
+                      'orderSequence': [ "desc", "asc"]
+                    },
+                    {
+                      'title': "N",
+                      'type': "natural-minus-na",
+                      'width': "40px",
+                      'data': "num_overlap",
+                      'orderSequence': [ "desc", "asc"]
+                    },
+                    {
+                      'title': "Sample p({% if corr_method == 'pearson' %}r{% else %}rho{% endif %})",
+                      'type': "natural-minus-na",
+                      'width': "65px",
+                      'data': "sample_p",
+                      'orderSequence': [ "desc", "asc"]
+                    }{% endif %}
+                ],
                 "columnDefs": [ {
                     "targets": 0,
                     "orderable": false
                 } ],
-                "columns": [
-                    { "type": "natural" },
-                    { "type": "natural" },
-                    { "type": "natural" },
-                    { "type": "natural" },
-                    { "type": "natural", "width": "15%" },
-                    { "type": "natural" },
-                    { "type": "natural" },
-                    { "orderDataType": "dom-innertext", 'orderSequence': [ "desc", "asc"] },
-                    { "type": "natural" },
-                    { "type": "scientific" },
-                    { "type": "natural-minus-na", 'orderSequence': [ "desc", "asc"] },
-                    { "type": "natural-minus-na", 'orderSequence': [ "desc", "asc"] },
-                    { "type": "scientific" },
-                    { "type": "natural-minus-na" },
-                    { "type": "natural-minus-na" },
-                    { "type": "natural-minus-na" }
-                ],
-                "createdRow": function ( row, data, index ) {
-                    $('td', row).eq(4).attr('title', $('td', row).eq(4).text());
-                    if ($('td', row).eq(4).text().length > 40) {
-                        $('td', row).eq(4).text($('td', row).eq(4).text().substring(0, 40));
-                        $('td', row).eq(4).text($('td', row).eq(4).text() + '...')
-                    }
-                },
+                {% if target_dataset.type == 'Geno' %}
+                "order": [[6, "asc" ]],
+                {% else %}
                 "order": [[9, "asc" ]],
-                "sDom": "Btir",
-                "iDisplayLength": -1,
-                "autoWidth": false,
-                "deferRender": true,
+                {% endif %}
+                "sDom": "itir",
+                "autoWidth": true,
                 "bSortClasses": false,
-                "paging": false,
-                "orderClasses": true
+                "scrollY": "50vh",
+                "scroller":  true,
+                "scrollCollapse": true
             }
 
-            {% elif target_dataset.type == "Publish" %}
-            table_conf =  {
-                "drawCallback": function( settings ) {
-                     $('#trait_table tr').click(function(event) {
-                         if (event.target.type !== 'checkbox') {
-                             $(':checkbox', this).trigger('click');
-                         }
-                     });
-                     $('.trait_checkbox:checkbox').on("change", change_buttons);
-                },
-                "buttons": [
-                    {
-                        extend: 'columnsToggle',
-                        columns: function( idx, data, node ) {
-                          if (idx != 0) {
-                            return true;
-                          } else {
-                            return false;
-                          }
-                        },
-                        postfixButtons: [ 'colvisRestore' ]
-                    }
-                ],
-                "columnDefs": [ 
-                    { "targets": 0, "orderable": false }
-                ],  
-                "columns": [
-                    { "type": "natural" },
-                    { "type": "natural" },
-                    { "type": "natural" },
-                    { "type": "natural" },
-                    { "type": "natural", "width": "20%" },
-                    { "type": "natural", "width": "12%" },
-                    { "type": "natural-minus-na" },
-                    { "orderDataType": "dom-innertext", 'orderSequence': [ "desc", "asc"] },
-                    { "type": "natural" },
-                    { "type": "scientific" },
-                    { "type": "natural-minus-na" },
-                    { "type": "natural-minus-na" },
-                    { "type": "natural-minus-na" }
-                ],
-                "order": [[9, "asc" ]],
-                "sDom": "Btir",
-                "iDisplayLength": -1,
-                "autoWidth": false,
-                "deferRender": true,
-                "bSortClasses": false,
-                "paging": false,
-                "orderClasses": true,
-            }
-            {% elif target_dataset.type == "Geno" %}
-            table_conf = {
-                "paging": false,
-                buttons: [
-                    {
-                        extend: 'columnsToggle',
-                        columns: function( idx, data, node ) {
-                          if (idx != 0) {
-                            return true;
-                          } else {
-                            return false;
-                          }
-                        },
-                        postfixButtons: [ 'colvisRestore' ]
-                    }
-                ],
-                "columnDefs": [ 
-                    { "targets": 0, "orderable": false }
-                ],  
-                "columns": [
-                    { "type": "natural" },
-                    { "type": "natural" },
-                    { "type": "natural" },
-                    { "type": "natural" },
-                    { "orderDataType": "dom-innertext", 'orderSequence': [ "desc", "asc"] },
-                    { "type": "natural-minus-na" },
-                    { "type": "scientific" }
-                ],
-                "order": [[6, "asc" ]],
-                "sDom": "Btir",
-                "autoWidth": false,
-                "bDeferRender": true,
-                "scrollY": "800px",
-                "scrollCollapse": false
-            }
-            {% endif %}
+            trait_table = $('#trait_table').DataTable(table_conf);
 
-            the_table = $('#trait_table').DataTable(table_conf);
+            trait_table.on( 'order.dt search.dt draw.dt', function () {
+                trait_table.column(1, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
+                cell.innerHTML = i+1;
+                } );
+            } ).draw();
 
             console.timeEnd("Creating table");
 
+            $('.toggle-vis').on('click', function (e) {
+              e.preventDefault();
+
+              // Get the column API object
+              var column = trait_table.column( $(this).attr('data-column') );
+
+              // Toggle the visibility
+              column.visible( ! column.visible() );
+
+              if (column.visible()){
+                $(this).removeClass("active");
+              } else {
+                $(this).addClass("active");
+              }
+            } );
+
+            $('#redraw').on('click', function (e) {
+              e.preventDefault();
+              trait_table.columns().visible( true );
+              $('.toggle-vis.active').removeClass('active');
+            });
+
             submit_special = function(url) {
                 $("#correlation_form").attr("action", url);
                 return $("#correlation_form").submit();
@@ -498,7 +610,7 @@
 
             $("#select_traits").click(function() {
                 console.log("redrawing")
-                the_table.draw();
+                trait_table.draw();
             });
         });
     </script>