path: root/wqflask/wqflask/templates/correlation_page.html

{% extends "base.html" %}
{% block css %}
    <link rel="stylesheet" type="text/css" href="/static/new/packages/tabulator/css/tabulator.css" />
    <link rel="stylesheet" type="text/css" href="/static/new/packages/DataTables/css/jquery.dataTables.css" />
    <link rel="stylesheet" type="text/css" href="/static/new/packages/DataTables/extensions/buttons.bootstrap.css" />
{% endblock %}
{% block content %}
    
    {{ header("Correlation", 'Trait: {} Dataset: {}'.format(this_trait.name, dataset.name)) }}

    <div class="container">
        <div class="page-header">
            <h1>Correlation Table</h1>
        </div>

        <p>Values of record {{ this_trait.name }} in the <a href="http://genenetwork.org/webqtl/main.py?FormID=sharinginfo&GN_AccessionId={{ dataset.group.accession_id }}">{{ dataset.fullname }}</a>
        dataset were compared to all records in the <a href="http://genenetwork.org/webqtl/main.py?FormID=sharinginfo&GN_AccessionId={{ target_dataset.group.accession_id }}">{{ target_dataset.fullname }}</a>
        dataset. The top {{ return_number }} correlations ranked by the {{ formatted_corr_type }} are displayed.
        You can resort this list by clicking the headers. Select the Record ID to open the trait data
        and analysis page.
        </p>    

        <div>
          <form id="correlation_form" action="/corr_matrix" method="post">
            {% if uc %}
            <input type="hidden" name="uc_id" id="uc_id" value="{{ uc.id }}" />
            {% endif %}
            <input type="hidden" name="trait_list" id="trait_list" value= "" >

                <button id="corr_matrix" class="btn btn-primary submit_special" data-url="/corr_matrix" title="Correlation Matrix" >
                    Correlation Matrix
                </button>

                <button id="network_graph" class="btn btn-primary submit_special" data-url="/network_graph" title="Network Graph" >
                    Network Graph
                </button>

                <button id="wgcna_setup" class="btn btn-primary submit_special" data-url="/wgcna_setup" title="WGCNA Analysis" >
                    WGCNA Analysis
                </button>

                <button id="ctl_setup" class="btn btn-primary submit_special" data-url="/ctl_setup" title="CTL Analysis" >
                    CTL Analysis
                </button>

                <button id="heatmap" class="btn btn-primary submit_special" data-url="/heatmap" title="Heatmap" >
                    Heatmap
                </button>
          </form>
        </div>
        <div>
        <br />
        <button class="btn btn-default" id="select_all"><span class="glyphicon glyphicon-ok"></span> Select All</button>
        <button class="btn btn-default" id="deselect_all"><span class="glyphicon glyphicon-remove"></span> Deselect All</button>
        <button class="btn btn-default" id="invert"><span class="glyphicon glyphicon-resize-vertical"></span> Invert</button>
        <button class="btn btn-default" id="add" disabled><span class="glyphicon glyphicon-plus-sign"></span> Add</button>
        <button id="redraw" class="btn btn-default">Reset Columns</button>
        <input type="text" id="searchbox" class="form-control" style="width: 200px; display: inline;" placeholder="Search This Table For ...">
        <input type="text" id="select_top" class="form-control" style="width: 200px; display: inline;" placeholder="Select Top ...">
        <br />
        <br />
        </div>

        <div style="width: {% if target_dataset.type == "ProbeSet" %}1600px{% elif target_dataset.type == "Publish" %}1400px{% else %}800px{% endif %};">
            <table id="trait_table" class="display dataTable nowrap" style="font-size: 12px; float: left;">
                <thead>
                    <tr>
                        <th></th>
                    {% for header in target_dataset.header_fields %}
                        {% if header == 'Year' %}
                        <th>{{header}}</th>
                        {% elif header == 'Max LRS' %}
                        <th>Max LRS</th>
                        {% elif header == 'Max LRS Location' %}
                        <th>{{header}}</th>
                        {% elif header == 'Location' %}
                        <th>{{header}}</th>
                        {% elif header == 'Mean' %}
                        <th>{{header}}</th>
                        {% elif header == 'Additive Effect' %}
                        <th>Additive Effect</th>
                        {% elif header == 'Index' %}
                        <th>{{header}}</th>
                        {% elif header == 'N' %}
                        <th>{{header}}</th>
                        {% else %}
                        <th>{{header}}</th>
                        {% endif %}
                    {% endfor %}
                    {% if target_dataset.type == "ProbeSet" %}
                        {% if corr_method == 'pearson' %}
                        <th>Sample r</th>
                        <th>N</th>
                        <th>Sample p(r)</th>
                        <th>Lit r</th>
                        <th>Tissue r</th>
                        <th>Tissue p(r)</th>
                        {% else %}
                        <th>Sample rho</th>
                        <th>N</th>
                        <th>Sample p(rho)</th>
                        <th>Lit r</th>
                        <th>Tissue rho</th>
                        <th>Tissue p(rho)</th>
                        {% endif %}
                    {% elif target_dataset.type == "Publish" %}
                        {% if corr_method == 'pearson' %}
                        <th>Sample r</th>
                        <th>&nbsp;&nbsp;N</th>
                        <th>Sample p(r)</th>
                        {% else %}
                        <th>Sample rho</th>
                        <th>&nbsp;&nbsp;N</th>
                        <th>Sample p(rho)</th>
                        {% endif %}
                    {% elif target_dataset.type == "Geno" %}
                        {% if corr_method == 'pearson' %}
                        <th>Sample r</th>
                        <th>N</th>
                        <th>Sample p(r)</th>
                        {% else %}
                        <th>Sample rho</th>
                        <th>N</th>
                        <th>Sample p(rho)</th>
                        {% endif %}
                    {% endif %}
                    </tr>
                </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 style="padding-left: 8px; padding-right: 0px; padding-top: 4px; align: center;">{{ loop.index }}</td>
                        <td>
                            <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>{{ trait.symbol }}</td>
                        <td>{{ trait.description_display }}</TD>
                        <td style="white-space: nowrap;">{{ trait.location_repr }}</td>
                        <td align="right">{{ '%0.3f' % trait.mean|float }}</td>
                        <td align="right">{% if trait.LRS_score_repr != "N/A" %}{{ '%0.1f' % trait.LRS_score_repr|float }}{% else %}N/A{% endif %}</td>
                        <td align="right">{{ trait.LRS_location_repr }}</td>
                        <td align="right">{% if trait.additive != "" %}{{ '%0.3f' % trait.additive|float }}{% else %}N/A{% endif %}</td>
                        <td align="right"><a target="_blank" href="corr_scatter_plot?dataset_1={{dataset.name}}&dataset_2={{trait.dataset.name}}&trait_1={{this_trait.name}}&trait_2={{trait.name}}">{{'%0.3f'|format(trait.sample_r)}}</a></td>
                        <td align="right">{{ trait.num_overlap }}</td>
                        <td align="right">{{'%0.3e'|format(trait.sample_p)}}</td>
                        {% if trait.lit_corr == "" or trait.lit_corr == 0.000 %}
                        <td align="right">--</td>
                        {% else %}
                        <td align="right">{{'%0.3f'|format(trait.lit_corr)}}</td>
                        {% endif %}
                        {% if trait.tissue_corr == "" or trait.tissue_corr == 0.000 %}
                        <td align="right">--</td>
                        <td align="right">--</td>
                        {% else %}
                        <td align="right">{{'%0.3f'|format(trait.tissue_corr)}}</td>
                        <td align="right">{{'%0.3e'|format(trait.tissue_pvalue)}}</td>
                        {% endif %}
                      {% elif target_dataset.type == "Publish" %}
                        <td>{{ trait.description_display }}</td>
                        <td>{{ trait.authors }}</td>
                        <td>
                            <a href="{{ trait.pubmed_link }}">
                                {{ trait.pubmed_text }}
                            </a>
                        </td>
                        <td align="right">{{ trait.LRS_score_repr }}</td>
                        <td align="right">{{ trait.LRS_location_repr }}</td>
                        <td align="right">{% if trait.additive != "" %}{{ '%0.3f' % trait.additive|float }}{% else %}N/A{% endif %}</td>
                        <td align="right"><a target="_blank" href="corr_scatter_plot?dataset_1={{dataset.name}}&dataset_2={{trait.dataset.name}}&trait_1={{this_trait.name}}&trait_2={{trait.name}}">{{'%0.3f'|format(trait.sample_r)}}</a></td>
                        <td align="right">{{ trait.num_overlap }}</td>
                        <td align="right">{{'%0.3e'|format(trait.sample_p)}}</td>
                      {% elif target_dataset.type == "Geno" %}
                        <td align="right">{{ trait.location_repr }}</TD>
                        <td align="right"><a target="_blank" href="corr_scatter_plot?dataset_1={{dataset.name}}&dataset_2={{trait.dataset.name}}&trait_1={{this_trait.name}}&trait_2={{trait.name}}">{{'%0.3f'|format(trait.sample_r)}}</a></td>
                        <td align="right">{{ trait.num_overlap }}</td>
                        <td align="right">{{'%0.3e'|format(trait.sample_p)}}</td>
                      {% endif %}
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
{% endblock %}

{% block js %}  
    <script type="text/javascript" src="/static/new/javascript/search_results.js"></script>

    <script language="javascript" type="text/javascript" src="/static/new/js_external/jszip.min.js"></script>
    <script language="javascript" type="text/javascript" src="/static/packages/underscore/underscore-min.js"></script>

    <script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/js/jquery.dataTables.js"></script>
    <script language="javascript" type="text/javascript" src="https://cdn.datatables.net/buttons/1.0.0/js/dataTables.buttons.min.js"></script>
    <script language="javascript" type="text/javascript" src="https://cdn.datatables.net/buttons/1.0.0/js/buttons.html5.min.js"></script>
    <script language="javascript" type="text/javascript" src="https://cdn.datatables.net/buttons/1.0.0/js/buttons.bootstrap.min.js"></script>
    <script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/js/dataTables.naturalSort.js"></script>

    <script type="text/javascript" charset="utf-8">
        function getValue(x) {
            if (x.indexOf('input') >= 0) {
                if ($(x).val() == 'x') {
                    return 0;
                }
                else {
                   return parseFloat($(x).val());
                }
            }
            else if (isNaN(x)) {
                return x;
            }
            return parseFloat(x);
        }


        jQuery.fn.dataTableExt.oSort['numeric-html-asc']  = function(a,b) {
            a = Math.abs(parseFloat($(a).text()));
            b = Math.abs(parseFloat($(b).text()));
            return ((a < b) ? -1 : ((a > b) ?  1 : 0));
        };

        jQuery.fn.dataTableExt.oSort['numeric-html-desc']  = function(a,b) {
            a = Math.abs(parseFloat($(a).text()));
            b = Math.abs(parseFloat($(b).text()));
            return ((a < b) ? 1 : ((a > b) ?  -1 : 0));
        };

        jQuery.fn.dataTableExt.oSort['cust-txt-asc'] = function (a, b) {
            var x = getValue(a);
            var y = getValue(b); 
            
            if (x == 'N/A' || x == '') {
                return 1;
            }
            else if (y == 'N/A' || y == '') {
                return -1;
            }
            else {
                return ((x < y) ? -1 : ((x > y) ? 1 : 0));
            }
        };
            
        jQuery.fn.dataTableExt.oSort['cust-txt-desc'] = function (a, b) {
            var x = getValue(a);
            var y = getValue(b);
            return ((x < y) ? 1 : ((x > y) ? -1 : 0));
        };


        jQuery.fn.dataTableExt.oSort['scientific-asc'] = function ( a, b ) {
                var x = parseFloat(a);
                var y = parseFloat(b);
                return ((x < y) ? -1 : ((x > y) ? 1 : 0));
        };

        jQuery.fn.dataTableExt.oSort['scientific-desc'] = function ( a, b ) {
                var x = parseFloat(a);
                var y = parseFloat(b);
                return ((x < y) ? 1 : ((x > y) ? -1 : 0));
        };


        $(document).ready( function () {
            
            var table_json = {{ json_results | safe }}

            $('#trait_table tr').click(function(event) {
                if (event.target.type !== 'checkbox') {
                    $(':checkbox', this).trigger('click');
                }
            });

            function change_buttons() {
                buttons = ["#add", "#remove"];
                num_checked = $('.trait_checkbox:checked').length;
                if (num_checked === 0) {
                    for (_i = 0, _len = buttons.length; _i < _len; _i++) {
                        button = buttons[_i];
                        $(button).prop("disabled", true);
                    }
                } else {
                    for (_j = 0, _len2 = buttons.length; _j < _len2; _j++) {
                        button = buttons[_j];
                        $(button).prop("disabled", false);
                    }
                }
                         //});
                if ($(this).is(":checked")) {
                    if (!$(this).closest('tr').hasClass('selected')) {
                        $(this).closest('tr').addClass('selected')
                    }
                }
                else {
                    if ($(this).closest('tr').hasClass('selected')) {
                        $(this).closest('tr').removeClass('selected')
                    }
                }
            }

            console.time("Creating table");

            {% if target_dataset.type == "ProbeSet" %}
            $('#trait_table').dataTable( {
                "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: 'csvHtml5',
                       text: 'Download CSV',
                       title: 'correlation_results',
                       fieldBoundary: '"',
                       exportOptions: {
                           columns: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
                       }
                    }
                ],
                "columnDefs": [ {
                    "targets": 0,
                    "orderable": false
                } ],
                "columns": [
                    { "type": "natural" },
                    { "type": "natural" },
                    { "type": "natural" },
                    { "type": "natural" },
                    { "type": "natural", "width": "15%" },
                    { "type": "natural" },
                    { "type": "natural" },
                    { "type": "natural" },
                    { "type": "natural" },
                    { "type": "natural" },
                    { "type": "natural" },
                    { "type": "natural" },
                    { "type": "scientific" },
                    { "type": "natural" },
                    { "type": "natural" },
                    { "type": "scientific" }
                ],
                "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() + '...')
                    }
                },
                "order": [[12, "asc" ]],
                "sDom": "BRZtir",
                "iDisplayLength": -1,
                "autoWidth": false,
                "deferRender": true,
                "bSortClasses": false,
                "scrollY": "800px",
                "scrollCollapse": false,
                "scroller": true,
                "paging": false,
                "orderClasses": true
            } );

            var table = $('#trait_table').DataTable();

            {% elif target_dataset.type == "Publish" %}
            $('#trait_table').dataTable( {
                "paging": false,
                "buttons": [
                    {
                       extend: 'csvHtml5',
                       text: 'Download CSV',
                       title: 'correlation_results',
                       fieldBoundary: '"',
                       exportOptions: {
                           columns: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
                       }
                    }
                ],
                "columnDefs": [ 
                    { "targets": 0, "orderable": false }
                ],  
                "columns": [
                    { "type": "natural" },
                    { "type": "natural" },
                    { "type": "natural" },
                    { "type": "natural", "width": "20%" },
                    { "type": "natural", "width": "12%" },
                    { "type": "natural" },
                    { "type": "natural" },
                    { "type": "natural" },
                    { "type": "natural" },
                    { "type": "numeric-html" },
                    { "type": "natural" },
                    { "type": "scientific" }
                ],
                "createdRow": function ( row, data, index ) {
                    $('td', row).eq(3).attr('title', $('td', row).eq(3).text());
                    if ($('td', row).eq(3).text().length > 50) {
                        $('td', row).eq(3).text($('td', row).eq(3).text().substring(0, 50));
                        $('td', row).eq(3).text($('td', row).eq(3).text() + '...')
                    }
                    $('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() + '...')
                    }
                },
                "order": [[11, "asc" ]],
                "sDom": "Btir",
                "autoWidth": false,
                "bDeferRender": true,
                "scrollY": "800px",
                "scrollCollapse": false
            } );
            {% elif target_dataset.type == "Geno" %}
            $('#trait_table').dataTable( {
                "paging": false,
                "buttons": [
                    {
                       extend: 'csvHtml5',
                       text: 'Download CSV',
                       title: 'correlation_results',
                       fieldBoundary: '"',
                       exportOptions: {
                           columns: [1, 2, 3, 4, 5, 6]
                       }
                    }
                ],
                "columnDefs": [ 
                    { "targets": 0, "orderable": false }
                ],  
                "columns": [
                    { "type": "natural" },
                    { "type": "natural" },
                    { "type": "natural" },
                    { "type": "natural" },
                    { "type": "numeric-html" },
                    { "type": "natural" },
                    { "type": "scientific" }
                ],
                "order": [[6, "asc" ]],
                "sDom": "Btir",
                "autoWidth": false,
                "bDeferRender": true,
                "scrollY": "800px",
                "scrollCollapse": false
            } );
            {% endif %}
            console.timeEnd("Creating table");

            submit_special = function(url) {
                $("#correlation_form").attr("action", url);
                return $("#correlation_form").submit();
            };

            $("#delete").on("click", function() {
                url = $(this).data("url")
                return submit_special(url)
            });

            $("#corr_matrix").on("click", function() {
                traits = $("#trait_table input:checked").map(function() {
                    return $(this).val();
                }).get();
                $("#trait_list").val(traits)
                console.log($("#trait_list").val(traits))
                url = $(this).data("url")
                //return submit_special(url)
            });
            $("#network_graph").on("click", function() {
                traits = $("#trait_table input:checked").map(function() {
                    return $(this).val();
                }).get();
                $("#trait_list").val(traits)
                url = $(this).data("url")
                return submit_special(url)
            });
            $("#wgcna_setup").on("click", function() {
                traits = $("#trait_table input:checked").map(function() {
                    return $(this).val();
                }).get();
                $("#trait_list").val(traits)
                url = $(this).data("url")
                return submit_special(url)
            });
            $("#ctl_setup").on("click", function() {
                traits = $("#trait_table input:checked").map(function() {
                    return $(this).val();
                }).get();
                $("#trait_list").val(traits)
                url = $(this).data("url")
                return submit_special(url)
            });
            $("#heatmap").on("click", function() {
                traits = $("#trait_table input:checked").map(function() {
                    return $(this).val();
                }).get();
                $("#trait_list").val(traits)
                url = $(this).data("url")
                return submit_special(url)
            });

        });
    </script>
{% endblock %}