Change mapping results table (minus Interval Analyst) to use new create_datatable.js code and load table from JSON row data

1 files changed, 130 insertions, 99 deletions

diff --git a/wqflask/wqflask/templates/mapping_results.html b/wqflask/wqflask/templates/mapping_results.html
index 29e9002d..55d18cba 100644
--- a/wqflask/wqflask/templates/mapping_results.html
+++ b/wqflask/wqflask/templates/mapping_results.html
@@ -65,7 +65,7 @@
         <input type="hidden" name="form_url" value="/run_mapping">
         
         <div class="container" style="width: 1200px; float: left;">
-          <div class="col-xs-4">
+          <div class="col-xs-4" style="word-wrap: normal;">
               <h2>Map Viewer: Whole Genome</h2><br>
               <b>Population:</b> {{ dataset.group.species|capitalize }} {{ dataset.group.name }}<br>
               <b>Database:</b> {{ dataset.fullname }}<br>
@@ -258,63 +258,10 @@
         <button class="btn btn-default export_mapping_results" >Download <span class="glyphicon glyphicon-download"></span></button>
         <br />
         <br />
-          <div id="table_container" style="width:{% if 'additive' in trimmed_markers[0] %}600{% else %}550{% endif %}px;">
-            <table id="trait_table" class="table-hover table-striped cell-border dataTable no-footer">
-              <thead>
-                <tr>
-                  <th></th>
-                  <th>Row</th>
-                  <th>Marker</th>
-                  {% if LRS_LOD == "-logP" %}
-                  <th><div style="text-align: right;">–logP</div></th>
-                  {% else %}
-                  <th><div style="text-align: right;">{{ LRS_LOD }}</div></th>
-                  {% endif %}
-                  <th><div style="text-align: right;">Position ({% if plotScale == "physic" %}Mb{% else %}cM{% endif %})</div></th>
-                  {% if 'additive' in trimmed_markers[0] %}
-                  <th><div style="text-align: right;">Add Eff</div></th>
-                  {% endif %}
-                  {% if 'dominance' in trimmed_markers[0] and dataset.group.genetic_type != "riset" %}
-                  <th><div style="text-align: right;">Dom Eff</div></th>
-                  {% endif %}
-                </tr>
-              </thead>
+          <div id="trait_table_container" style="width:{% if 'additive' in trimmed_markers[0] %}600{% else %}550{% endif %}px;">
+            <table class="table-hover table-striped cell-border no-footer" id='trait_table' style="float: left;">
               <tbody>
-                {% for marker in trimmed_markers %}
-                <tr>
-                  <td align="center" style="padding: 1px 0px 1px 0px;">
-                    <input type="checkbox" name="selectCheck"
-                           class="checkbox trait_checkbox"
-                           value="{{ data_hmac('{}:{}Geno'.format(marker.name, dataset.group.name)) }}">
-                  </td>
-                  <td align="right">{{ loop.index }}</td>
-                  <td>{% if geno_db_exists == "True" %}<a href="/show_trait?trait_id={{ marker.name }}&dataset={{ dataset.group.name }}Geno">{{ marker.name }}</a>{% else %}{{ marker.name }}{% endif %}</td>
-                  {% if LRS_LOD == "LOD" or LRS_LOD == "-logP" %}
-                  {% if 'lod_score' in marker %}
-                  <td align="right">{{ '%0.2f' | format(marker.lod_score|float) }}</td>
-                  {% else %}
-                  <td align="right">{{ '%0.2f' | format(marker.lrs_value|float / 4.61) }}</td>
-                  {% endif %}
-                  {% else %}
-                  {% if 'lod_score' in marker %}
-                  <td align="right">{{ '%0.2f' | format(marker.lod_score|float * 4.61) }}</td>
-                  {% else %}
-                  <td align="right">{{ '%0.2f' | format(marker.lrs_value|float) }}</td>
-                  {% endif %}
-                  {% endif %}
-                  <td align="right">{{ marker.display_pos }}</td>
-                  {% if 'additive' in marker %}
-                  {% if geno_db_exists == "True" %}
-                  <td align="right"><a target"_blank" href="corr_scatter_plot?method=pearson&dataset_1={{ dataset.group.name }}Geno&dataset_2={{ dataset.name }}&trait_1={{ marker.name }}&trait_2={{ this_trait.name }}">{{ '%0.3f' | format(marker.additive|float) }}</a></td>
-                  {% else %}
-                  <td align="right">{{ '%0.3f' | format(marker.additive|float) }}</td>
-                  {% endif %}
-                  {% endif %}
-                  {% if 'dominance' in marker and dataset.group.genetic_type != "riset" %}
-                  <td align="right">{{ '%0.2f' | format(marker.dominance|float) }}</td>
-                  {% endif %}
-                </tr>
-                {% endfor %}
+               <td colspan="100%" align="center"><br><b><font size="15">Loading...</font></b><br></td>
               </tbody>
             </table>
           </div>
@@ -376,59 +323,143 @@
     <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='purescript-genome-browser/js/purescript-genetics-browser.js') }}"></script>
 
     <script>
-        js_data = {{ js_data | safe }}
+        var js_data = {{ js_data | safe }};
+        var markersJson = {{ trimmed_markers|safe }};
     </script>
 
     <script language="javascript" type="text/javascript" src="/static/new/javascript/search_results.js"></script>
+    <script language="javascript" type="text/javascript" src="/static/new/javascript/table_functions.js"></script>
+    <script language="javascript" type="text/javascript" src="/static/new/javascript/create_datatable.js"></script>
     {% if mapping_method == "gemma" or mapping_method == "reaper" %}
     <script language="javascript" type="text/javascript" src="/static/new/javascript/init_genome_browser.js"></script>
     {% endif %}
 
     <script type="text/javascript" charset="utf-8">
         $(document).ready( function () {
-            console.time("Creating table");
-
             {% if selectedChr == -1 %}
-            $('#trait_table').DataTable( {
-                "drawCallback": function( settings ) {
-                  $('#trait_table tr').off().on("click", function(event) {
-                    if (event.target.type !== 'checkbox' && event.target.tagName.toLowerCase() !== 'a') {
-                      var obj =$(this).find('input');
-                      obj.prop('checked', !obj.is(':checked'));
-                    }
-                    if ($(this).hasClass("selected") && event.target.tagName.toLowerCase() !== 'a'){
-                      $(this).removeClass("selected")
-                    } else if (event.target.tagName.toLowerCase() !== 'a') {
-                      $(this).addClass("selected")
-                    }
+            tableId = "trait_table"
+
+            columnDefs = [
+              {
+                'data': null,
+                'width': "5px",
+                'orderDataType': "dom-checkbox",
+                'targets': 0,
+                'render': function(data, type, row, meta) {
+                  return '<input type="checkbox" name="selectCheck" class="checkbox trait_checkbox" value="'+ data.hmac + '">'
+                }
+              },
+              {
+                'title': "Row",
+                'type': "natural",
+                'width': "35px",
+                'searchable': false,
+                'orderable': false,
+                'targets': 1,
+                'render': function(data, type, row, meta) {
+                    return meta.row
+                }
+              },
+              {
+                'title': "Marker",
+                'type': "natural",
+                'width': "20%",
+                'targets': 2,
+                {% if geno_db_exists == "True" %}
+                'data': null,
+                'render': function(data, type, row, meta) {
+                  return '<a target="_blank" href="/show_trait?trait_id=' + data.name + '&dataset={{ dataset.group.name }}Geno">' + data.name + '</a>'
+                }
+                {% else %}
+                'data': "name"
+                {% endif %}
+              },
+              {
+                'title': "<div style='text-align: right;'>{{ LRS_LOD }}</div>",
+                'type': "natural",
+                'width': "60px",
+                'targets': 3,
+                'orderSequence': [ "desc", "asc"],
+                'data': null,
+                'render': function(data, type, row, meta) {
+                  {% if (LRS_LOD == "LOD") or (LRS_LOD == "-logP") %}
+                  if ('lod_score' in data){
+                    return String(parseFloat(data.lod_score).toFixed(2))
+                  } else {
+                    return String((parseFloat(data.lrs_value) / 4.61).toFixed(2))
+                  }
+                  {% else %}
+                  if ('lod_score' in data){
+                    return String((parseFloat(data.lod_score) * 4.61).toFixed(2))
+                  } else {
+                    return String(parseFloat(data.lrs_value).toFixed(2))
+                  }
+                  {% endif %}
+                }
+              },
+              {
+                'title': "<div style='text-align: right;'>Position ({% if plotScale == 'physic' %}Mb{% else %}cM{% endif %})</div>",
+                'type': 'natural',
+                'targets': 4,
+                'data': "display_pos"
+              },
+              {% if 'additive' in trimmed_markers[0] %}
+              {
+                'title': "<div style='text-align: right;'>Add Eff</div>",
+                'type': "natural",
+                'targets': 5,
+                'data': null,
+                'render': function(data, type, row, meta) {
+                  {% if geno_db_exists == "True" %}
+                  return '<a target"_blank" href="corr_scatter_plot?method=pearson&dataset_1={{ dataset.group.name }}Geno&dataset_2={{ dataset.name }}&trait_1=' + data.name + '&trait_2={{ this_trait.name }}">' + String(parseFloat(data.additive).toFixed(3)) + '</a>'
+                  {% else %}
+                  return String(parseFloat(data.additive).toFixed(3))
+                  {% endif %}
+                }
+              },
+              {% endif %}
+              {% if ('dominance' in trimmed_markers[0]) and (dataset.group.genetic_type != "riset") %}
+              {
+                'title': "<div style='text-align: right;'>Add Eff</div>",
+                'type': "natural",
+                'targets': {% if ('additive' in trimmed_markers[0]) %}6{% else %}5{% endif %},
+                'data': null,
+                'render': function(data, type, row, meta) {
+                  return String(parseFloat(data.dominance).toFixed(2))
+                }
+              }
+              {% endif %}
+            ]
+
+            tableSettings = {
+              "createdRow": function ( row, data, index ) {
+                $('td', row).eq(0).attr("style", "text-align: center; padding: 0px 10px 2px 10px;");
+                $('td', row).eq(1).attr("align", "right");
+                $('td', row).eq(1).attr('data-export', index+1);
+                $('td', row).eq(2).attr('data-export', $('td', row).eq(2).text());
+                $('td', row).eq(3).attr("align", "right");
+                $('td', row).eq(3).attr('data-export', $('td', row).eq(3).text());
+                $('td', row).eq(4).attr("align", "right");
+                $('td', row).eq(4).attr('data-export', $('td', row).eq(4).text());
+                {% if 'additive' in trimmed_markers[0] %}
+                $('td', row).eq(5).attr("align", "right");
+                $('td', row).eq(5).attr('data-export', $('td', row).eq(5).text());
+                {% endif %}
+                {% if 'dominance' in trimmed_markers[0] %}
+                $('td', row).eq(6).attr("align", "right");
+                $('td', row).eq(6).attr('data-export', $('td', row).eq(6).text());
+                {% endif %}
+              },
+              "language": {
+                "info": "Showing from _START_ to _END_ of " + js_data.total_markers + " records",
+              },
+              "order": [[1, "asc" ]],
+              "scrollY": "1000px",
+              "scroller": true
+            }
+
+            create_table(tableId, markersJson, columnDefs, tableSettings)
 
-                    {% if geno_db_exists == "True" %}change_buttons(check_node=1){% endif %}
-                  });
-                },
-                "columns": [
-                    { "type": "natural", "width": "5%" },
-                    { "type": "natural", "width": "8%" },
-                    { "type": "natural", "width": "20%" },
-                    { "type": "natural" },
-                    { "type": "natural" }{% if 'additive' in qtlresults[0] %},
-                    { "type": "natural" }{% endif %}{% if 'dominance' in qtlresults[0] and dataset.group.genetic_type != "riset" %},
-                    { "type": "natural" }{% endif %}
-                ],
-                "columnDefs": [ {
-                    "targets": 0,
-                    "orderable": false
-                } ],
-                "language": {
-                  "info": "Showing from _START_ to _END_ of " + js_data.total_markers + " records",
-                },
-                "order": [[1, "asc" ]],
-                "sDom": "itir",
-                "autoWidth": true,
-                "bSortClasses": false,
-                "scrollY": "100vh",
-                "scroller":  true,
-                "scrollCollapse": true
-            } );
             {% elif selectedChr != -1 and plotScale =="physic" and (dataset.group.species == 'mouse' or dataset.group.species == 'rat') %}
             $('#trait_table').dataTable( {
               "drawCallback": function( settings ) {