From 0dfdbcbb83ffe9b349c870d02a5812bcb296a74b Mon Sep 17 00:00:00 2001
From: zsloan
Date: Fri, 4 Dec 2020 14:57:02 -0600
Subject: Added option to toggle columns on show_trait page, including case
 attribute columns

---
 wqflask/wqflask/templates/show_trait.html          | 27 +++++++++++++++++++
 .../wqflask/templates/show_trait_edit_data.html    | 30 ++++++++++++++++++++++
 2 files changed, 57 insertions(+)

diff --git a/wqflask/wqflask/templates/show_trait.html b/wqflask/wqflask/templates/show_trait.html
index 7b74a3f6..3923ad2f 100644
--- a/wqflask/wqflask/templates/show_trait.html
+++ b/wqflask/wqflask/templates/show_trait.html
@@ -221,6 +221,33 @@
                   primary_table.search($(this).val()).draw();
                 } );
 
+                $('.toggle-vis').on('click', function (e) {
+                    e.preventDefault();
+
+                    function toggle_column(column) {
+                        //ZS: Toggle column visibility
+                        column.visible( ! column.visible() );
+                        if (column.visible()){
+                            $(this).removeClass("active");
+                        } else {
+                            $(this).addClass("active");
+                        }
+                    }
+
+                    // Get the column API object
+                    var target_cols = $(this).attr('data-column').split(",")
+                    for (let i = 0; i < target_cols.length; i++){
+                        console.log("THE COL:", target_cols[i])
+                        var column = primary_table.column( target_cols[i] );
+                        toggle_column(column);
+
+                        {% if sample_groups|length != 1 %}
+                        var column2 = other_table.column( target_cols[i] );
+                        toggle_column(column2);
+                        {% endif %}
+                    }
+                } );
+
                 {% if sample_groups|length != 1 %}
                 $('#other_searchbox').on( 'keyup', function () {
                   other_table.search($(this).val()).draw();
diff --git a/wqflask/wqflask/templates/show_trait_edit_data.html b/wqflask/wqflask/templates/show_trait_edit_data.html
index 2e730248..4ad11a5e 100644
--- a/wqflask/wqflask/templates/show_trait_edit_data.html
+++ b/wqflask/wqflask/templates/show_trait_edit_data.html
@@ -1,6 +1,36 @@
 <div>
     {% for sample_type in sample_groups %}
       <div class="sample-table-container">
+        {% if loop.index == 1 %}
+        <b>Show/Hide Columns:</b>
+        <br>
+        <button class="toggle-vis" data-column="1">ID</button>
+        <button class="toggle-vis" data-column="2">Sample</button>
+        <button class="toggle-vis" data-column="3">Value</button>
+        {% if sample_groups[0].se_exists %}
+        <button class="toggle-vis" data-column="4,5">SE</button>
+        {% if has_num_cases %}
+        <button class="toggle-vis" data-column="6">N</button>
+        {% set attr_start_pos = 7 %}
+        {% else %}
+        {% set attr_start_pos = 6 %}
+        {% endif %}
+        {% else %}
+        {% if has_num_cases %}
+        <button class="toggle-vis" data-column="4">N</button>
+        {% set attr_start_pos = 5 %}
+        {% else %}
+        {% set attr_start_pos = 4 %}
+        {% endif %}
+        {% endif %}
+        {% if sample_groups[0].attributes %}
+        {% for attribute in sample_groups[0].attributes %}
+        <button class="toggle-vis" data-column="{{ loop.index + attr_start_pos - 1 }}">{{ sample_groups[0].attributes[attribute].name }}</button>
+        {% endfor %}
+        {% endif %}
+        <br>
+        <br>
+        {% endif %}
         <div class="sample-table-search-container">
           <input type="text" id="{{ sample_type.sample_group_type }}_searchbox" class="form-control sample-table-search" placeholder="Search This Table For ...">
         </div>
-- 
cgit v1.2.3