aboutsummaryrefslogtreecommitdiff
path: root/gn2/wqflask/templates/collections/view.html
diff options
context:
space:
mode:
Diffstat (limited to 'gn2/wqflask/templates/collections/view.html')
-rw-r--r--gn2/wqflask/templates/collections/view.html483
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>
+ &nbsp;
+ </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:&nbsp;&nbsp;</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 %}
+
generated by cgit v1.2.3 (git 2.44.0) at 2024-10-18 17:18:31 +0000