diff options
Diffstat (limited to 'gn2/wqflask/templates/collections/view.html')
| -rw-r--r-- | gn2/wqflask/templates/collections/view.html | 483 |
1 files changed, 483 insertions, 0 deletions
diff --git a/gn2/wqflask/templates/collections/view.html b/gn2/wqflask/templates/collections/view.html new file mode 100644 index 00000000..c850e163 --- /dev/null +++ b/gn2/wqflask/templates/collections/view.html @@ -0,0 +1,483 @@ +{% extends "base.html" %} +{% block title %}View Collection{% endblock %} +{% block css %} + <link rel="stylesheet" type="text/css" href="{{ url_for('css', filename='DataTables/css/jquery.dataTables.css') }}" /> + <link rel="stylesheet" type="text/css" href="{{ url_for('js', filename='DataTablesExtensions/buttonStyles/css/buttons.dataTables.min.css') }}"> + <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" /> + <link rel="stylesheet" type="text/css" href="/static/new/css/show_trait.css" /> + <link rel="stylesheet" type="text/css" href="/static/new/css/trait_list.css" /> +{% endblock %} +{% block content %} +<!-- Start of body --> + + <div class="container"> + {{flash_me()}} + <h1> + <span id="collection_name">{{ uc.name }}</span> + <form id="frm-change-collection-name" + method="POST" + action="{{url_for('change_collection_name')}}" + style="display:inline;"> + <input type="hidden" name="collection_id" value="{{uc.id}}" /> + <input type="text" + name="new_collection_name" + style="font-size: 20px; display: none; width: 500px;" + class="form-control" + placeholder="{{ uc.name }}" /> + </form> + <button class="btn btn-default" style="display: inline;" id="change_collection_name">Change Collection Name</button> + <button class="btn btn-default" style="display: inline;" id="make_default">Make Default</button> + </h1> + <h3>This collection has {{ '{}'.format(numify(trait_obs|count, "record", "records")) }}</h3> + + <div class="tool-button-container"> + <form id="collection_form" action="/loading" method="post"> + <input type="hidden" name="uc_id" id="uc_id" value="{{ uc.id }}" /> + <input type="hidden" name="collection_name" id="collection_name" value="{{ uc.name }}" /> + <input type="hidden" name="tool_used" value="" /> + <input type="hidden" name="form_url" value="" /> + <input type="hidden" name="trait_list" id="trait_list" value= " + {% for this_trait in trait_obs %} + {{ this_trait.name }}:{{ this_trait.dataset.name }}:{{ data_hmac('{}:{}'.format(this_trait.name, this_trait.dataset.name)) }}, + {% endfor %}" > + + {% include 'tool_buttons.html' %} + + </form> + </div> + <div style="display: flex;"> + <form id="heatmaps_form"> + <button id="clustered-heatmap" + class="btn btn-primary" + data-url="{{heatmap_data_url}}" + title="Generate heatmap from this collection" style="margin-top: 10px; margin-bottom: 10px;"> + Generate Heatmap + </button> + <br> + <div id="heatmap-options" style="display: none;"> + <div style="margin-bottom: 10px;"> + <b>Heatmap Orientation: </b> + <br> + Vertical + <input id="heatmap-orient-vertical" + type="radio" + name="vertical" + value="true" checked="checked"/> + Horizontal + <input id="heatmap-orient-horizontal" + type="radio" + name="vertical" + value="false" /> + </div> + <div style="margin-bottom: 10px;"> + <button id="clear-heatmap" + class="btn btn-danger" + title="Clear Heatmap"> + Clear Heatmap + </button> + </div> + </div> + </form> + + </div> + + <div> + <div id="clustered-heatmap-image-area"></div> + <br /> + <div class="collection-table-options"> + <form id="export_form" method="POST" action="/export_traits_csv"> + <button class="btn btn-default" id="select_all" type="button"><span class="glyphicon glyphicon-ok"></span> Select All</button> + <button class="btn btn-default" id="invert" type="button"><span class="glyphicon glyphicon-ok"></span> Invert</button> + <button class="btn btn-success" id="add" type="button" disabled><i class="icon-plus-sign"></i> Copy</button> + <input type="hidden" name="database_name" id="database_name" value="None"> + <input type="hidden" name="export_data" id="export_data" value=""> + <input type="hidden" name="file_name" id="file_name" value="collection_table"> + <input type="hidden" name="collection_name_export" value="{{ uc.name }}"> + <input type="hidden" name="user_email_export" value="{% if g.user_session.user_email %}{{ g.user_session.user_email }}{% else %}N/A{% endif %}"> + <button class="btn btn-default" id="export_traits">Download</button> + <button class="btn btn-default" id="export_collection">Export Collection</button> + <input type="text" id="searchbox" class="form-control" style="width: 200px; display: inline; padding-bottom: 9px;" placeholder="Search Table For ..."> + <input type="text" id="select_top" class="form-control" style="width: 200px; display: inline; padding-bottom: 9px;" placeholder="Select Top ..."> + <button class="btn btn-default" id="deselect_all" type="button"><span class="glyphicon glyphicon-remove"></span> Deselect</button> + <button id="remove" class="btn btn-danger" data-url="/collections/remove" type="button" disabled><i class="icon-minus-sign"></i> Remove</button> + </form> + </div> + <div style="margin-top: 10px; margin-bottom: 5px;" class="show-hide-container"> + <b>Show/Hide Columns: </b> + <button class="toggle-vis" data-column="1">Index</button> + <button class="toggle-vis" data-column="2">Dataset</button> + <button class="toggle-vis" data-column="3">Record</button> + <button class="toggle-vis" data-column="4">Symbol</button> + <button class="toggle-vis" data-column="5">Description</button> + <button class="toggle-vis" data-column="6">Location</button> + <button class="toggle-vis" data-column="7">Mean</button> + <button class="toggle-vis" data-column="8">Peak -logP</button> + <button class="toggle-vis" data-column="9">Peak Location</button> + <button class="toggle-vis" data-column="10">Effect Size</button> + </div> + <div id="trait_table_container" style="width: 2000px; min-width: 1500px;"> + <table class="table-hover table-striped cell-border" id='trait_table' style="float: left;"> + <tbody> + <td colspan="100%" align="center"><br><b><font size="15">Loading...</font></b><br></td> + </tbody> + </table> + </div> + <br /> + </div> + </div> + +<!-- End of body --> + +{% endblock %} + +{% block js %} + <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='jszip/jszip.min.js') }}"></script> + <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='js_alt/md5.min.js') }}"></script> + <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTables/js/jquery.dataTables.min.js') }}"></script> + <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTablesExtensions/scroller/js/dataTables.scroller.min.js') }}"></script> + <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTablesExtensions/plugins/sorting/natural.js') }}"></script> + <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTablesExtensions/buttons/js/dataTables.buttons.min.js') }}"></script> + <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTablesExtensions/buttons/js/buttons.colVis.min.js') }}"></script> + <script type="text/javascript" src="/static/new/javascript/search_results.js"></script> + <script type="text/javascript" src="/static/new/javascript/table_functions.js"></script> + <script type="text/javascript" src="/static/new/javascript/create_datatable.js"></script> + + <script type="text/javascript" src="{{ url_for('js', filename='plotly/plotly.min.js') }}"></script> + + <script type="text/javascript" + src="/static/new/javascript/partial_correlations.js"></script> + <script type='text/javascript'> + var traitsJson = {{ traits_json|safe }}; + </script> + <script language="javascript" type="text/javascript"> + $(document).ready( function () { + + tableId = "trait_table" + + columnDefs = [ + { + 'data': null, + 'width': "5px", + 'orderDataType': "dom-checkbox", + 'targets': 0, + 'render': function(data) { + return '<input type="checkbox" name="searchResult" class="checkbox trait_checkbox" value="' + data.hmac + '" data-trait-info="' + data.trait_info_str + '">' + } + }, + { + 'title': "Index", + 'type': "natural", + 'width': "35px", + 'searchable': false, + 'orderable': false, + 'targets': 1, + 'render': function(data, type, row, meta) { + return meta.row + } + }, + { + 'title': "Dataset", + 'type': "natural", + 'targets': 2, + 'data': "dataset" + }, + { + 'title': "Record", + 'type': "natural-minus-na", + 'width': "120px", + 'targets': 3, + 'data': null, + 'render': function(data) { + return '<a target="_blank" href="/show_trait?trait_id=' + data.name + '&dataset=' + data.dataset + '">' + data.display_name + '</a>' + } + }, + { + 'title': "Symbol", + 'type': "natural", + 'targets': 4, + 'data': null, + 'render': function(data) { + if (Object.hasOwn(data, 'symbol')){ + return data.symbol + } else if (Object.hasOwn(data, 'name')){ + return data.name + } else { + return "N/A" + } + } + }, + { + 'title': "Description", + 'type': "natural", + 'targets': 5, + 'data': null, + 'render': function(data) { + if (Object.hasOwn(data, 'description')){ + try { + return decodeURIComponent(escape(data.description)) + } catch(err){ + return escape(data.description) + } + } else if (Object.hasOwn(data, 'location')){ + return data.location + } else if (Object.hasOwn(data, 'name')){ + return data.name + } else { + return "N/A" + } + } + }, + { + 'title': "<div style='text-align: right;'>Location</div>", + 'type': "natural-minus-na", + 'width': "125px", + 'targets': 6, + 'data': null, + 'render': function(data) { + if (Object.hasOwn(data, 'location')){ + return data.location + } else { + return "N/A" + } + } + }, + { + 'title': "<div style='text-align: right;'>Mean</div>", + 'type': "natural-minus-na", + 'width': "60px", + 'data': null, + 'targets': 7, + 'orderSequence': [ "desc", "asc"], + 'render': function(data) { + if (Object.hasOwn(data, 'mean')){ + if (data.mean != 'N/A'){ + return data.mean.toFixed(3) + } else { + return "N/A" + } + } else { + return "N/A" + } + } + }, + { + 'title': "<div style='text-align: right; padding-right: 10px;'>Peak</div> <div style='text-align: right;'>-logP <a href=\"{{ url_for('glossary_blueprint.glossary') }}#LRS\" target=\"_blank\" style=\"color: white;\"><sup style='color: #FF0000;'><i>?</i></sup></a></div>", + 'type': "natural-minus-na", + 'data': null, + 'width': "60px", + 'targets': 8, + 'orderSequence': [ "desc", "asc"], + 'render': function(data) { + if (Object.hasOwn(data, 'lrs_score')){ + return (data.lrs_score / 4.61).toFixed(3) + } else { + return "N/A" + } + } + }, + { + 'title': "<div style='text-align: right;'>Peak Location</div>", + 'type': "natural-minus-na", + 'data': null, + 'width': "125px", + 'targets': 9, + 'render': function(data) { + if (Object.hasOwn(data, 'lrs_location')){ + return data.lrs_location + } else { + return "N/A" + } + } + }, + { + 'title': "<div style='text-align: right; padding-right: 10px;'>Effect</div> <div style='text-align: right;'>Size <a href=\"{{ url_for('glossary_blueprint.glossary') }}#A\" target=\"_blank\" style=\"color: white;\"><sup style='color: #FF0000;'><i>?</i></sup></a></div>", + 'type': "natural-minus-na", + 'data': null, + 'width': "85px", + 'targets': 10, + 'orderSequence': [ "desc", "asc"], + 'render': function(data) { + if (Object.hasOwn(data, 'additive')){ + if (data.additive != "") { + return data.additive.toFixed(3) + } else { + return "N/A" + } + } else { + return "N/A" + } + } + } + ] + + 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('title', $('td', row).eq(3).text()); + $('td', row).eq(3).attr('data-export', $('td', row).eq(3).text()); + $('td', row).eq(4).attr('title', $('td', row).eq(4).text()); + $('td', row).eq(4).attr('data-export', $('td', row).eq(4).text()); + $('td', row).eq(5).attr('data-export', $('td', row).eq(5).text()); + if ($('td', row).eq(5).text().length > 500) { + $('td', row).eq(5).text($('td', row).eq(5).text().substring(0, 500)); + $('td', row).eq(5).text($('td', row).eq(5).text() + '...') + } + $('td', row).slice(6,11).attr("align", "right"); + $('td', row).eq(6).attr('data-export', $('td', row).eq(6).text()); + $('td', row).eq(7).attr('data-export', $('td', row).eq(7).text()); + $('td', row).eq(8).attr('data-export', $('td', row).eq(8).text()); + $('td', row).eq(9).attr('data-export', $('td', row).eq(9).text()); + $('td', row).eq(10).attr('data-export', $('td', row).eq(9).text()); + }, + "order": [[1, "asc" ]], + {% if traits_json|length > 20 %} + "scroller": true + {% else %} + "scroller": false + {% endif %} + } + + create_table(tableId, traitsJson, columnDefs, tableSettings) + + submit_special = function(url) { + $("#collection_form").attr("action", url); + $("#collection_form").attr('target', '_blank').submit(); + return false; + }; + + $("#delete").on("click", function() { + url = $(this).data("url") + $("#collection_form").attr("action", url); + return $("#collection_form").removeAttr('target').submit(); + }); + + $("#remove").on("click", function() { + url = $(this).data("url") + traits = $("#trait_table input:checked").map(function() { + return $(this).val(); + }).get(); + $("#trait_list").val(traits) + $("#collection_form").attr("action", url); + return $("#collection_form").removeAttr('target').submit(); + }); + + $("#change_collection_name").on("click", function() { + if ($('input[name=new_collection_name]').css('display') == 'none') { + $('input[name=new_collection_name]').css('display', 'inline'); + $('#collection_name').css('display', 'none'); + } else { + new_name = $('input[name=new_collection_name]').val(); + $('#frm-change-collection-name').submit(); + console.debug("We really should not get here, but, whatever..."); + $('input[name=new_collection_name]').css('display', 'none'); + $('input[name=collection_name]').val(new_name); + $('#collection_name').text(new_name) + $('#collection_name').css('display', 'inline'); + } + }); + + make_default = function() { + alert("The current collection is now your default collection.") + let uc_id = $('#uc_id').val(); + $.cookie('default_collection', uc_id, { + expires: 365, + path: '/' + }); + + let default_collection_id = $.cookie('default_collection'); + }; + + $("#make_default").on("click", function(){ + make_default(); + }); + + $("#heatmaps_form").submit(function(e) { + e.preventDefault(); + }); + + function clear_heatmap_area() { + area = document.getElementById("clustered-heatmap-image-area"); + area.querySelectorAll("*").forEach(function(child) { + child.remove(); + }); + } + + function generate_progress_indicator() { + count = 0; + default_message = "Computing" + return function() { + message = default_message; + if(count >= 10) { + count = 0; + } + for(i = 0; i < count; i++) { + message = message + " ."; + } + clear_heatmap_area(); + $("#clustered-heatmap-image-area").append( + '<div class="alert alert-info"' + + ' style="font-weigh: bold; font-size: 150%;">' + + message + '</div>'); + count = count + 1; + }; + } + + function display_clustered_heatmap(heatmap_data) { + clear_heatmap_area(); + image_area = document.getElementById("clustered-heatmap-image-area") + Plotly.newPlot(image_area, heatmap_data) + } + + function process_clustered_heatmap_error(xhr, status, error) { + clear_heatmap_area() + $("#clustered-heatmap-image-area").append( + $( + '<div class="alert alert-danger">ERROR: ' + + xhr.responseJSON.message + + '</div>')); + } + + $("#clustered-heatmap").on("click", function() { + clear_heatmap_area(); + $("#heatmap-options").show(); + intv = window.setInterval(generate_progress_indicator(), 300); + vert_element = document.getElementById("heatmap-orient-vertical"); + vert_true = vert_element == null ? false : vert_element.checked; + heatmap_url = $(this).attr("data-url") + traits = $(".trait_checkbox:checked").map(function() { + return this.value + }).get(); + $.ajax({ + type: "POST", + url: heatmap_url, + contentType: "application/json", + data: JSON.stringify({ + "traits_names": traits, + "vertical": vert_true + }), + dataType: "JSON", + success: function(data, status, xhr) { + window.clearInterval(intv); + display_clustered_heatmap(data); + }, + error: function(xhr, status, error) { + window.clearInterval(intv); + process_clustered_heatmap_error(xhr, status, error); + } + }); + }); + + $("#clear-heatmap").on("click", function() { + clear_heatmap_area(); + $("#heatmap-options").hide(); + }); + + }); + </script> + + +{% endblock %} + |