Merge pull request #40 from northwestern-mti/feature/heritability

improve datatables
northwestern-mti · May 4, 2021 · 2e436f4 · 2e436f4
2 parents 390c436 + 00c35f7
commit 2e436f4
Show file tree

Hide file tree

Showing 6 changed files with 122 additions and 14 deletions.
diff --git a/base/static/css/styles.css b/base/static/css/styles.css
@@ -648,3 +648,7 @@ article {
   padding-top: 10px;
   padding-bottom: 10px;
 }
+
+.dataTables-menu-top {
+  padding-bottom: 10px;
+}
diff --git a/base/templates/macros.html b/base/templates/macros.html
@@ -54,4 +54,34 @@
     </tbody>
 </table>
 
-{% endmacro %}
+{% endmacro %}
+
+
+{% macro render_dataTable_top_menu(pages=True, filter=True) %}
+
+<div class="row dataTables-menu-top">
+  <div class="col-md-2">
+    {% if pages %}
+    <form class="form-inline">
+      <div class="form-group" style="text-align:center">
+        <label for="page-length"> Show: </label>
+        <select name="page-length" id="page-length" class="form-control">
+          <option value="5">5</option>
+          <option value="10">10</option>
+          <option value="25" selected>25</option>
+          <option value="100">100</option>
+        </select>
+      </div>
+    </form>
+    {% endif %}
+  </div> {# /col-md-2 #}
+  <div class="col-md-6"></div>
+  <div class="col-md-4">
+    {% if filter %}
+    <input id="filter" type="text" class="form-control pull-right" placeholder="Search">
+    {% endif %}
+  </div> {# /col-md-2 #}
+</div> {# /row #}
+
+
+{% endmacro %}
diff --git a/base/templates/tools/h2_result_list.html b/base/templates/tools/h2_result_list.html
@@ -1,26 +1,50 @@
 {% extends "_layouts/default.html" %}
 
+{% block custom_head %}
+    <link rel="stylesheet" href="//cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" />
+    <script type="text/javascript" src="//cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
+{% endblock %}
+
+{% block style %}
+<style>
+
+table.dataTable thead .sorting_asc {
+  background: url("http://cdn.datatables.net/1.10.0/images/sort_asc.png") no-repeat center left;
+}
+table.dataTable thead .sorting_desc {
+  background: url("http://cdn.datatables.net/1.10.0/images/sort_desc.png") no-repeat center left;
+}
+table.dataTable thead .sorting {
+  background: url("http://cdn.datatables.net/1.10.0/images/sort_both.png") no-repeat center left;
+}
+
+</style>
+{% endblock %}
+
 {% block content %}
 
+{% from "macros.html" import render_dataTable_top_menu %}
+{{ render_dataTable_top_menu() }}
+
 <div class="row">
   <div class="col-md-12">
-
-    <table class='strain-table table-striped table-hover table-compact' style='width:100%'>
-
+    <table id='h2-table' class='strain-table table-striped table-hover table-compact' style='width:100%'>
       <thead>
         <tr class="header">
-          <th><strong> Label </strong></th>
-          <th><strong> Status </strong></th>
-          <th><strong> Created </strong></th>
+          <th class='data-label sorting'><strong> Label </strong></th>
+          <th class='data-trait sorting'><strong> Trait </strong></th>
+          <th class='data-status sorting'><strong> Status </strong></th>
+          <th class='data-date sorting'><strong> Date </strong></th>
         </tr>
       </thead>
 
       <tbody>
         {% for item in items %}
           <tr>
             {% if item %}
-              <td> {{ item.label }} </td>
-              <td>
+              <td class='data-label'> {{ item.label }} </td>
+              <td class='data-trait'> {{ item.trait }} </td>
+              <td class='data-status'>
                 {% if item.status == 'COMPLETE' %}
                 <a href="{{ url_for('heritability.heritability_result', id=item.key.name) }}">
                   {{ item.status }}
@@ -30,7 +54,7 @@
                 {% endif %}
               </td>
             {% endif %}
-            <td> {{ item.created_on|date_format }} </td>
+            <td class='data-date' data-order="{{ item.created_on }}"> {{ item.created_on|date_format }} </td>
           </tr>
         {% endfor %}
       </tbody>
@@ -41,4 +65,38 @@
 </div> <!-- /row -->
 
 
+{% endblock %}
+
+{% block script %}
+
+<script>
+
+  $(document).ready(function(){
+
+    const dTable = $('#h2-table').DataTable( {
+      paging: true,
+      pageLength: 25,
+      aaSorting: [ [3,'desc'] ],
+      aoColumns: [
+        null,
+        null,
+        null,
+        null
+      ],
+      dom:"tipr"
+    });
+
+    $('#filter').keyup(function(){  
+      dTable.search($(this).val()).draw();
+    });
+
+    $('#page-length').change(function(){  
+      dTable.page.len($(this).val()).draw();
+    });
+
+  });
+
+</script>
+
+
 {% endblock %}
diff --git a/base/templates/tools/ip_result_list.html b/base/templates/tools/ip_result_list.html
@@ -23,6 +23,9 @@
 
 {% block content %}
 
+{% from "macros.html" import render_dataTable_top_menu %}
+{{ render_dataTable_top_menu() }}
+
 <div class="row">
   <div class="col-md-12">
     <table id='ip-table' class='strain-table table-striped table-hover table-compact' style='width:100%;table-layout:fixed;'>
@@ -59,7 +62,7 @@
                 {% endif %}
               </td>
             {% endif %}
-            <td class="data-date" data-order="{{ item.created_on }}""> {{ item.created_on|date_format }} </td>
+            <td class="data-date" data-order="{{ item.created_on }}"> {{ item.created_on|date_format }} </td>
           </tr>
         {% endfor %}
       </tbody>
@@ -78,7 +81,7 @@
 
   $(document).ready(function(){
 
-    $('#ip-table').DataTable( {
+    dTable = $('#ip-table').DataTable( {
       paging: true,
       pageLength: 25,
       aaSorting: [ [5,'desc'] ],
@@ -89,8 +92,18 @@
         null,
         null,
         null
-      ]
-    } );
+      ],
+      dom:"tipr"
+    });
+
+    $('#filter').keyup(function(){  
+      dTable.search($(this).val()).draw();
+    });
+
+    $('#page-length').change(function(){  
+      dTable.page.len($(this).val()).draw();
+    });
+
   });
 
 </script>

diff --git a/base/views/tools/heritability.py b/base/views/tools/heritability.py
@@ -92,6 +92,7 @@ def submit_h2():
   data = [x for x in data[1:] if x[0] is not None]
   header = ["AssayNumber", "Strain", "TraitName", "Replicate", "Value"]
   data = pd.DataFrame(data, columns=header)
+  trait = data.values[0][2]
   data = data.to_csv(index=False, sep="\t")
 
   # Generate an ID for the data based on its hash
@@ -105,6 +106,7 @@ def submit_h2():
   hr.data_hash = data_hash
   hr.username = user.name
   hr.status = 'NEW'
+  hr.trait = trait
   hr.save()
 
   # Check whether analysis has previously been run and if so - skip

diff --git a/cloud_functions/heritability_run/invoke.go b/cloud_functions/heritability_run/invoke.go
@@ -41,6 +41,7 @@ type dsInfo struct {
 type dsEntry struct {
 	Username    string         `datastore:"username"`
 	Label       string         `datastore:"label"`
+	Trait       string         `datastore:"trait"`
 	Data_hash   string         `datastore:"data_hash"`
 	Status      string         `datastore:"status"`
 	Status_msg  string         `datastore:"status_msg,noindex"`