diff options
Diffstat (limited to 'gn2/wqflask/templates/collections')
| -rw-r--r-- | gn2/wqflask/templates/collections/add.html | 86 | ||||
| -rw-r--r-- | gn2/wqflask/templates/collections/add_anonymous.html | 21 | ||||
| -rw-r--r-- | gn2/wqflask/templates/collections/list.html | 189 | ||||
| -rw-r--r-- | gn2/wqflask/templates/collections/not_logged_in.html | 23 | ||||
| -rw-r--r-- | gn2/wqflask/templates/collections/remove.html | 48 | ||||
| -rw-r--r-- | gn2/wqflask/templates/collections/view.html | 483 | ||||
| -rw-r--r-- | gn2/wqflask/templates/collections/view_anonymous.html | 143 |
7 files changed, 993 insertions, 0 deletions
diff --git a/gn2/wqflask/templates/collections/add.html b/gn2/wqflask/templates/collections/add.html new file mode 100644 index 00000000..478c80fb --- /dev/null +++ b/gn2/wqflask/templates/collections/add.html @@ -0,0 +1,86 @@ +<div id="myModal"> + <div class="modal-header"> + <h2>Define or Add to Collection</h2> + <p>You have two choices: Name a new collection + or add to an existing collection.</p> + </div> + <div class="modal-body" style="margin-left: 20px;"> + <form action="/collections/new" + method="POST" + target="_blank" + data-validate="parsley" + id="add_form" + class="form-inline"> + {% if traits is defined %} + <input type="hidden" name="traits" value="{{ traits }}" /> + {% else %} + <input type="hidden" name="hash" value="{{ hash }}" /> + {% endif %} + {% if collections|length > 0 %} + <fieldset> + <legend>1. Add to an existing collection</legend> + <div style="margin-left: 20px;"> + <select name="existing_collection" class="form-control" style="width: 80%;"> + {% for col in collections %} + {% if loop.index == 1 %} + <option value="{{ col.id }}:{{ col.name }}" selected>{{ col.name }}</option> + {% else %} + <option value="{{ col.id }}:{{ col.name }}">{{ col.name }}</option> + {% endif %} + {% endfor %} + </select> + <input type="button" style="display: inline;" id="make_default" value="Make Default"> + <br><br> + <button type="submit" name="add_to_existing" class="btn btn-primary">Add</button> + </div> + </fieldset> + {% endif %} + <hr /> + <fieldset> + <legend>{% if collections|length > 0 %}2. {% else %}{% endif %}Create a new collection</legend> + <div style="margin-left: 20px;"> + <input type="text" name="new_collection" placeholder=" Name of new collection..." + data-trigger="change" data-minlength="5" data-maxlength="50" style="width: 100%"> + <button type="submit" name="create_new" class="btn btn-primary" style="margin-top: 20px;">Create collection</button> + {% if uc is not defined %} + <span class="help-block">This collection will be saved to your computer for a year (or until you clear your cache).</span> + {% endif %} + </div> + </fieldset> + </form> + </div> +</div> + +<script> + $('#add_form').parsley(); + $('#add_form').on('submit', function(){ + parent.jQuery.colorbox.close(); + }); + + make_default = function() { + alert("The current collection is now your default collection.") + let uc_id = $('[name=existing_collection] option:selected').val().split(":")[0] + $.cookie('default_collection', uc_id, { + expires: 365, + path: '/' + }); + + let default_collection_id = $.cookie('default_collection'); + }; + + $("#make_default").on("click", function(){ + make_default(); + }); + + apply_default = function() { + let default_collection_id = $.cookie('default_collection'); + if (default_collection_id) { + let the_option = $('[name=existing_collection] option').filter(function() { + return ($(this).val().split(":")[0] == default_collection_id); + }) + the_option.prop('selected', true); + } + } + + apply_default(); +</script> diff --git a/gn2/wqflask/templates/collections/add_anonymous.html b/gn2/wqflask/templates/collections/add_anonymous.html new file mode 100644 index 00000000..2eb7525f --- /dev/null +++ b/gn2/wqflask/templates/collections/add_anonymous.html @@ -0,0 +1,21 @@ +<div id="myModal"> + <div class="modal-header"> + <h3>Add to collection</h3> + <br /> + <div> + <p>We can add this to a temporary collection for you.</p> + <p>For the most features you'll want to sign in or create an account.</p> + </div> + </div> + <div class="modal-body"> + <form action="/collections/new" data-validate="parsley" id="add_form"> + <input type="hidden" name="traits" value="{{ traits }}" /> + <button type="submit" name="anonymous_add" class="btn btn-large btn-block btn-primary">Continue without signing in</button> + <button type="submit" name="sign_in" class="btn btn-large btn-block">Sign in or create an account</button> + </form> + </div> +</div> + +<script> + $('#add_form').parsley(); +</script> diff --git a/gn2/wqflask/templates/collections/list.html b/gn2/wqflask/templates/collections/list.html new file mode 100644 index 00000000..c553717f --- /dev/null +++ b/gn2/wqflask/templates/collections/list.html @@ -0,0 +1,189 @@ +{% extends "base.html" %} +{%from "oauth2/display_error.html" import display_error%} +{% block title %}Your Collections{% 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/buttonsBootstrap/css/buttons.bootstrap.css') }}" /> + <link rel="stylesheet" type="text/css" href="/static/new/css/show_trait.css" /> +{% endblock %} +{% block content %} +<!-- Start of body --> + <div class="container"> + {{flash_me()}} + + {% if g.user_session.logged_in %} + <h1>Collections owned by {% if g.user_session.user_name %}{{ g.user_session.user_name }}{% else %}{{ g.user_session.user_email }} {% endif %}</h1> + {% else %} + <h1>Your Collections</h1> + {% endif %} + + <div> + <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-danger" id="remove_collections" data-url="/collections/delete">Remove Collections</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> + <form id="collections_form" action="javascript:void(0);" method="post" enctype="multipart/form-data"> + <input type="hidden" name="uc_id" id="uc_id" value="" /> + <div style="margin-top: 10px; display: inline-block;"><button class="btn btn-default" id="import_collection" data-url="/collections/import"> Import Collection</button> <input type="file" name="import_file" id="import_file" size="20" style="display: inline-block;"></input></div> + </form> + </div> + <br> + <div id="collections_list" style="width:50%; margin-top: 10px; margin-bottom: 10px;"> + {%if anon_collections_error is defined%} + {{display_error("Anonymous Collections", anon_collections_error)}} + {%endif%} + {%if anon_collections | length > 0%} + <table class="table-hover table-striped cell-border" id='anon_trait_table' + style="float: left;"> + <caption>Anonymous Collections</caption> + <thead> + <tr> + <th></th> + <th>Index</th> + <th>Name</th> + <th>Created</th> + <th>Last Changed</th> + <th># Records</th> + </tr> + </thead> + + <tbody> + {% for uc in anon_collections %} + <tr class="collection_line"> + <td align="center" style="padding: 0px;"><INPUT TYPE="checkbox" NAME="collection" class="checkbox trait_checkbox" VALUE="{{ uc.id }}"></td> + <td align="right">{{ loop.index }} + <td><a class="collection_name" href="{{ url_for('view_collection', uc_id=uc.id) }}">{{ uc.name }}</a></td> + <td>{{ uc.created_timestamp }}</td> + <td>{{ uc.changed_timestamp }}</td> + <td align="right">{{ uc.num_members }}</td> + </tr> + {% endfor %} + </tbody> + </table> + {%endif%} + {% if collections|length > 0 %} + {% if (anon_collections | length > 0) and (collections | length > 0) %} + <hr /> + {%endif%} + <table class="table-hover table-striped cell-border" id='trait_table' style="float: left;"> + <caption>User Collections</caption> + <thead> + <tr> + <th></th> + <th>Index</th> + <th>Name</th> + <th>Created</th> + <th>Last Changed</th> + <th># Records</th> + </tr> + </thead> + + <tbody> + {% for uc in collections %} + <tr class="collection_line"> + <td align="center" style="padding: 0px;"><INPUT TYPE="checkbox" NAME="collection" class="checkbox trait_checkbox" VALUE="{{ uc.id }}"></td> + <td align="right">{{ loop.index }} + <td><a class="collection_name" href="{{ url_for('view_collection', uc_id=uc.id) }}">{{ uc.name }}</a></td> + <td>{{ uc.created_timestamp }}</td> + <td>{{ uc.changed_timestamp }}</td> + <td align="right">{{ uc.num_members }}</td> + </tr> + {% endfor %} + </tbody> + </table> + {% else %} + You have no collections yet. + {% endif %} + </div> + </div> + +<!-- End of body --> + +{% endblock %} + +{% block js %} + <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='js_alt/timeago.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='jszip/jszip.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 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> + $(document).ready( function () { + tableId = "trait_table"; + + columnDefs = [ + { "type": "natural", "width": "3%", "targets": 0, "orderable": false}, + { "type": "natural", "width": "8%", "targets": 1}, + { "type": "natural", "width": "20%", "targets": 2}, + { "type": "natural", "width": "25%", "targets": 3}, + { "type": "natural", "width": "25%", "targets": 4}, + { "type": "natural", "width": "15%", "targets": 5} + ]; + + create_table("anon_trait_table", [], columnDefs) + create_table(tableId, [], columnDefs) + + submit_special = function(url) { + $("#collections_form").attr("action", url); + return $("#collections_form").submit(); + }; + + add_collection = function(trait_data, textStatus, jqXHR) { + var traits_hash = md5(trait_data.toString()); + + $.ajax({ + type: "POST", + url: "/collections/store_trait_list", + data: { + hash: traits_hash, + traits: trait_data.toString() + } + }); + + return $.colorbox({ + href: "/collections/add?hash=" + traits_hash + }); + } + + $("#import_collection").on("click", function() { + var fd = new FormData(); + var files = $('#import_file')[0].files; + if(files.length > 0){ + fd.append('import_file', files[0]) + $.ajax({ + type: "POST", + url: "/collections/import", + data: fd, + dataType: "json", + contentType: false, + processData: false, + success: add_collection + }); + } else { + alert("No file selected") + } + }); + + + $("#remove_collections").on("click", function() { + url = $(this).data("url") + collections = [] + $(".trait_checkbox:checked").each(function() { + collections.push($(this).val()); + }); + collections_string = collections.join(":") + $("input[name=uc_id]").val(collections_string) + return submit_special(url) + }); + + }); + + </script> +{% endblock %} diff --git a/gn2/wqflask/templates/collections/not_logged_in.html b/gn2/wqflask/templates/collections/not_logged_in.html new file mode 100644 index 00000000..49b0e07d --- /dev/null +++ b/gn2/wqflask/templates/collections/not_logged_in.html @@ -0,0 +1,23 @@ +{% extends "base.html" %} +{% block title %}Your Collections{% endblock %} +{% block content %} +<!-- Start of body --> + {{ header("Not logged in") }} + + + <div id="collections_holder" class="container"> + <div class="page-header"> + <h1>Please log in in order to use this feature.</h1> + </div> + </div> + +<!-- End of body --> + +{% endblock %} + +{% block js %} + <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='js_alt/timeago.min.js') }}"></script> + <script> + $('body').timeago(); + </script> +{% endblock %} diff --git a/gn2/wqflask/templates/collections/remove.html b/gn2/wqflask/templates/collections/remove.html new file mode 100644 index 00000000..faee4f78 --- /dev/null +++ b/gn2/wqflask/templates/collections/remove.html @@ -0,0 +1,48 @@ +<div id="myModal"> + <div class="modal-header"> + <h3>Add to collection</h3> + <p>You have three choices: Use your default collection, create a new named collection, + or add the traits to an existing collection.</p> + </div> + <div class="modal-body"> + <form action="/collections/new" data-validate="parsley" id="add_form"> + <fieldset> + <legend>Use your default collection</legend> + <span class="help-block">Choose this if you're in a hurry or don't plan on using the collection again.</span> + <span class="help-block"><em></em>If you are unsure this is probably the option you want.</em></span> + <button type="submit" name="Default" class="btn">Continue</button> + </fieldset> + <hr /> + + + <input type="hidden" name="traits" value="{{ traits }}" /> + <fieldset> + <legend>Or create a new named collection</legend> + <label>New collection name</label> + <input type="text" name="new_collection" placeholder="Name of new collection..." + data-trigger="change" data-minlength="5" data-maxlength="50"> + <span class="help-block">Type the name of the new collection.</span> + <button type="submit" name="create_new" class="btn">Create and add traits</button> + </fieldset> + + <hr /> + <fieldset> + <legend>Or add to an existing collection</legend> + <label>Existing collection name</label> + + <select name="existing_collection" class="form-control"> + {% for col in user_collections %} + <option value="{{ col.id }}">{{ col.name }}</option> + {% endfor %} + </select> + <br /> + + <button type="submit" name="add_to_existing" class="btn">Add to existing collection</button> + </fieldset> + </form> + </div> +</div> + +<script> + $('#add_form').parsley(); +</script> 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 %} + diff --git a/gn2/wqflask/templates/collections/view_anonymous.html b/gn2/wqflask/templates/collections/view_anonymous.html new file mode 100644 index 00000000..56323e10 --- /dev/null +++ b/gn2/wqflask/templates/collections/view_anonymous.html @@ -0,0 +1,143 @@ +{% extends "base.html" %} +{% block title %}View Collection{% endblock %} +{% block content %} +<!-- Start of body --> + {% if uc %} + {{ header(uc.name, + 'This collection has {}.'.format(numify(trait_obs|count, "record", "records"))) }} + {% else %} + {{ header('Your Collection', + 'This collection has {}.'.format(numify(trait_obs|count, "record", "records"))) }} + {% endif %} + <div class="container"> + <div class="page-header"> + <h1>Your Collection</h1> + {% if uc %} + <h2>{{ uc.name }}</h2> + {% endif %} + + <div class="form-group"> + <form action="/collections/delete" method="post"> + {% if uc %} + <input type="hidden" name="uc_id" id="uc_id" value="{{ uc.id }}" /> + {% endif %} + <div class="col-xs-3 controls"> + <input type="submit" class="btn btn-danger" value="Delete this collection" /> + </div> + </form> + <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= " + {% for this_trait in trait_obs %} + {{ this_trait.name }}:{{ this_trait.dataset.name }}, + {% endfor %}" > + <div class="col-xs-2 controls"> + <input type="submit" class="btn btn-primary" value="Correlation Matrix" /> + </div> + </form> + <form action="/heatmap" 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= " + {% for this_trait in trait_obs %} + {{ this_trait.name }}:{{ this_trait.dataset.name }}, + {% endfor %}" > + <div class="col-xs-2 controls"> + <input type="submit" class="btn btn-primary" value="Heatmap" /> + </div> + </form> + </div> + + <!-- + <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= " + {% for this_trait in trait_obs %} + {{ this_trait.name }}:{{ this_trait.dataset.name }}, + {% endfor %}" > + <input type="submit" + class="btn btn-small" + value="Correlation Matrix" /> + </form> + <form action="/heatmap" 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= " + {% for this_trait in trait_obs %} + {{ this_trait.name }}:{{ this_trait.dataset.name }}, + {% endfor %}" > + <input type="submit" + class="btn btn-small" + value="Heatmap" /> + </form> + --> + </div> + + + + <div class="bs-docs-example"> + <table class="table table-hover" id='trait_table'> + <thead> + <tr> + <th></th> + <th>Record</th> + <th>Description</th> + <th>Location</th> + <th>Mean</th> + <th>Max LRS</th> + <th>Max LRS Location</th> + </tr> + </thead> + + <tbody> + {% for this_trait in trait_obs %} + <TR id="trait:{{ this_trait.name }}:{{ this_trait.dataset.name }}"> + <TD> + <INPUT TYPE="checkbox" NAME="searchResult" class="checkbox trait_checkbox" + VALUE="{{ data_hmac('{}:{}'.format(this_trait.name, this_trait.dataset.name)) }}"> + </TD> + <TD> + <a href="{{ url_for('show_trait_page', + trait_id = this_trait.name, + dataset = this_trait.dataset.name + )}}"> + {{ this_trait.name }} + </a> + </TD> + + <TD>{{ this_trait.description_display }}</TD> + <TD>{{ this_trait.location_repr }}</TD> + <TD>{{ this_trait.mean }}</TD> + <TD>{{ this_trait.LRS_score_repr }}</TD> + <TD>{{ this_trait.LRS_location_repr }}</TD> + + </TR> + {% endfor %} + </tbody> + + </table> + + <br /> + + <button class="btn" id="select_all"><i class="icon-ok"></i> Select All</button> + <button class="btn" id="deselect_all"><i class="icon-remove"></i> Deselect All</button> + <button class="btn" id="invert"><i class="icon-resize-vertical"></i> Invert</button> + <button class="btn" id="add" disabled="disabled"><i class="icon-plus-sign"></i> Add Record to Other Collection</button> + <button class="btn" id="remove" disabled="disabled"><i class="icon-minus-sign"></i> Remove Record</button> + <button class="btn btn-primary pull-right"><i class="icon-download icon-white"></i> Download Table</button> + </div> + </div> + +<!-- End of body --> + +{% endblock %} + +{% block js %} + <script type="text/javascript" src="/static/new/javascript/search_results.js"></script> +{% endblock %} |