- Added Show/Hide Columns options and included the trait_list.css file

which including styling for said options
- Changed some column widths to avoid text wrapping

1 files changed, 61 insertions, 12 deletions

diff --git a/wqflask/wqflask/templates/correlation_page.html b/wqflask/wqflask/templates/correlation_page.html
index 6ea86609..3d543c35 100644
--- a/wqflask/wqflask/templates/correlation_page.html
+++ b/wqflask/wqflask/templates/correlation_page.html
@@ -5,6 +5,7 @@
     <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 %}
@@ -113,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>
@@ -350,7 +379,7 @@
                     {
                       'title': "Sample p({% if corr_method == 'pearson' %}r{% else %}rho{% endif %})",
                       'type': "natural-minus-na",
-                      'width': "40px",
+                      'width': "65px",
                       'data': "sample_p",
                       'orderSequence': [ "desc", "asc"]
                     },
@@ -464,7 +493,7 @@
                     {
                       'title': "Sample p({% if corr_method == 'pearson' %}r{% else %}rho{% endif %})",
                       'type': "natural-minus-na",
-                      'width': "40px",
+                      'width': "65px",
                       'data': "sample_p",
                       'orderSequence': [ "desc", "asc"]
                     },
@@ -487,7 +516,7 @@
                       'data': "additive",
                       'width': "85px",
                       'orderSequence': [ "desc", "asc"]
-                    }{% elif dataset.type == 'Geno' %},
+                    }{% elif target_dataset.type == 'Geno' %},
                     {
                       'title': "Location",
                       'type': "natural-minus-na",
@@ -511,7 +540,7 @@
                     {
                       'title': "Sample p({% if corr_method == 'pearson' %}r{% else %}rho{% endif %})",
                       'type': "natural-minus-na",
-                      'width': "40px",
+                      'width': "65px",
                       'data': "sample_p",
                       'orderSequence': [ "desc", "asc"]
                     }{% endif %}
@@ -520,8 +549,12 @@
                     "targets": 0,
                     "orderable": false
                 } ],
+                {% if target_dataset.type == 'Geno' %}
+                "order": [[6, "asc" ]],
+                {% else %}
                 "order": [[9, "asc" ]],
-                "sDom": "Bitir",
+                {% endif %}
+                "sDom": "itir",
                 "autoWidth": true,
                 "bSortClasses": false,
                 "scrollY": "50vh",
@@ -529,16 +562,32 @@
                 "scrollCollapse": true
             }
 
-            the_table = $('#trait_table').DataTable(table_conf);
+            trait_table = $('#trait_table').DataTable(table_conf);
 
-            the_table.on( 'order.dt search.dt draw.dt', function () {
-                the_table.column(1, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
+            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");
+              }
+            } );
+
             submit_special = function(url) {
                 $("#correlation_form").attr("action", url);
                 return $("#correlation_form").submit();
@@ -555,7 +604,7 @@
 
             $("#select_traits").click(function() {
                 console.log("redrawing")
-                the_table.draw();
+                trait_table.draw();
             });
         });
     </script>