diff options
4 files changed, 115 insertions, 25 deletions
diff --git a/wqflask/wqflask/oauth2/data.py b/wqflask/wqflask/oauth2/data.py index c3d426cf..5026a6d1 100644 --- a/wqflask/wqflask/oauth2/data.py +++ b/wqflask/wqflask/oauth2/data.py @@ -65,7 +65,7 @@ def __search_genotypes__(query, template, **kwargs): def __search_phenotypes__(query, template, **kwargs): page = int(request.args.get("page", 1)) - per_page = int(request.args.get("per_page", 500)) + per_page = int(request.args.get("per_page", 50)) selected_traits = request.form.getlist("selected_traits") def __search_error__(error): raise Exception(error) diff --git a/wqflask/wqflask/static/new/javascript/auth/search.js b/wqflask/wqflask/static/new/javascript/auth/search.js index cd86a9df..4e79bfd4 100644 --- a/wqflask/wqflask/static/new/javascript/auth/search.js +++ b/wqflask/wqflask/static/new/javascript/auth/search.js @@ -138,13 +138,14 @@ function debounce(func, delay=500) { * @param {Dataset Object} A JSON.stringify-able object * @param {String} The name to assign the checkbox */ -function build_checkbox(data_object, checkbox_name, checkbox_aux_classes="") { +function build_checkbox(data_object, checkbox_name, checkbox_aux_classes="", checked=false) { cell = $("<td>"); check = $( '<input type="checkbox" class="checkbox" ' + - 'name="' + checkbox_name + '" checked="checked">'); + 'name="' + checkbox_name + '">'); check.val(JSON.stringify(data_object)); - auxilliary_classes = checkbox_aux_class.trim(); + check.prop("checked", checked); + auxilliary_classes = checkbox_aux_classes.trim(); if(Boolean(auxilliary_classes)) { check.attr("class", check.attr("class") + " " + auxilliary_classes.trim()); @@ -154,7 +155,7 @@ function build_checkbox(data_object, checkbox_name, checkbox_aux_classes="") { } function link_checkbox(dataset) { - return build_checkbox(dataset, "selected", "checkbox-selected"); + return build_checkbox(dataset, "selected", "checkbox-selected", true); } function search_checkbox(dataset) { diff --git a/wqflask/wqflask/static/new/javascript/auth/search_phenotypes.js b/wqflask/wqflask/static/new/javascript/auth/search_phenotypes.js index b172ffd1..61e71771 100644 --- a/wqflask/wqflask/static/new/javascript/auth/search_phenotypes.js +++ b/wqflask/wqflask/static/new/javascript/auth/search_phenotypes.js @@ -2,11 +2,14 @@ * Global variables: Bad idea - figure out how to pass them down a call stack. */ search_table = new TableDataSource( - "#tbl-phenotypes", "data-traits", - function(trait) {build_checkbox(trait, "search_traits")}); + "#tbl-phenotypes", "data-traits", (trait) => { + return build_checkbox(trait, "search_traits", "checkbox-search"); + }); link_table = new TableDataSource( - "#tbl-link-phenotypes", "data-traits", - function(trait) {build_checkbox(trait, "selected")}); + "#tbl-link-phenotypes", "data-traits", (trait) => { + return build_checkbox( + trait, "selected", "checkbox-selected", checked=true); + }); /** * Toggle the state for the "Link Traits" button @@ -14,7 +17,7 @@ link_table = new TableDataSource( function toggle_link_button() { num_groups = $("#frm-link-phenotypes select option").length - 1; num_selected = JSON.parse( - $("#tbl-link-phenotypes").attr("data-datasets")).length; + $("#tbl-link-phenotypes").attr("data-traits")).length; if(num_groups > 0 && num_selected > 0) { $("#frm-link-phenotypes input[type='submit']").prop("disabled", false); } else { @@ -31,10 +34,54 @@ function default_error_fn(jqXHR, textStatus, errorThrown) { console.debug("ERROR:", errorThrown); } +function render_pheno_table(table_data_source) { + table_id = table_data_source.table_id.selector; + data_attr_name = table_data_source.data_attribute_name; + $(table_id + " tbody tr").remove(); + table_data = JSON.parse($(table_id).attr(data_attr_name)); + if(table_data.length < 1) { + row = $("<tr>") + cell = $('<td colspan="100%" align="center">'); + cell.append( + $('<span class="glyphicon glyphicon-info-sign text-info">')); + cell.append(" "); + cell.append("No phenotype traits to select from."); + row.append(cell); + $(table_id + " tbody").append(row); + } + table_data.forEach(function(trait) { + row = $("<tr>") + row.append(table_data_source.checkbox_creation_function(trait)); + row.append(table_cell(trait.name)); + row.append(table_cell(trait.group)); + row.append(table_cell(trait.dataset)); + row.append(table_cell(trait.dataset_fullname)); + row.append(table_cell(trait.description)); + row.append(table_cell(trait.authors.join(", "))); + row.append(table_cell( + '<a href="' + trait.pubmed_link + + '" title="Pubmed link for trait ' + trait.name + '.">' + + trait.year + "</a>")); + row.append(table_cell("Chr:" + trait.geno_chr + "@" + trait.geno_mb)); + row.append(table_cell(trait.lrs)); + row.append(table_cell(trait.additive)); + $(table_id + " tbody").append(row); + }); +} + function display_search_results(data, textStatus, jqXHR) { - $("#tbl-phenotypes").attr( - "data-traits", JSON.stringify(data.search_results)); - render_table(search_table); + if(data.status == "queued" || data.status == "started") { + setTimeout(() => { + fetch_search_results(data.job_id, display_search_results); + }, 250); + return; + } + if(data.status == "completed") { + $("#tbl-phenotypes").attr( + "data-traits", JSON.stringify(data.search_results)); + render_pheno_table(search_table); + } + $("#txt-search").prop("disabled", false); } /** @@ -43,6 +90,7 @@ function display_search_results(data, textStatus, jqXHR) { */ function fetch_search_results(job_id, success, error=default_error_fn) { endpoint = $("#frm-search-traits").attr("data-search-results-endpoint"); + $("#txt-search").prop("disabled", true); $.ajax( endpoint, { @@ -104,11 +152,9 @@ $(document).ready(function() { } }); - setTimeout( - function() { - fetch_search_results( - $("#tbl-phenotypes").attr("data-initial-job-id"), - display_search_results) - }, - 500); + setTimeout(() => { + fetch_search_results( + $("#tbl-phenotypes").attr("data-initial-job-id"), + display_search_results); + }, 500); }); diff --git a/wqflask/wqflask/templates/oauth2/data-list-phenotype.html b/wqflask/wqflask/templates/oauth2/data-list-phenotype.html index e6998d28..6afabdf8 100644 --- a/wqflask/wqflask/templates/oauth2/data-list-phenotype.html +++ b/wqflask/wqflask/templates/oauth2/data-list-phenotype.html @@ -80,7 +80,7 @@ </legend> {%endif%} <input type="hidden" value="{{species_name}}" name="species" - id="txt-species" /> + id="txt-species-name" /> <input type="hidden" value="{{dataset_type}}" name="dataset_type" id="txt-dataset-type" /> <input type="hidden" value="{{per_page}}" name="per_page" @@ -100,14 +100,57 @@ <div class="row"> <table id="tbl-phenotypes" class="table-hover table-striped cell-border dataTable no-footer" - data-traits="[]" - data-initial-job-id={{search_results.job_id}}> + data-traits="{{traits | tojson}}" + data-initial-job-id={{search_results.job_id}} + data-initial-search-res={{search_results | tojson}}> + <thead> + <tr> + <th>Select</th> + <th>Name</th> + <th>Group</th> + <th>Dataset</th> + <th>Dataset Fullname</th> + <th>Description</th> + <th>Authors</th> + <th>Year</th> + <th>Location</th> + <th>LRS</th> + <th>Additive</th> + </tr> + </thead> <tbody> + {%for trait in traits%} + <tr> + <th> + <input type="checkbox" class="checkbox checkbox-search" + name="search_traits" value="{{trait | tojson}}" /> + </th> + <th>{{trait.name}}</th> + <th>{{trait.group}}</th> + <th>{{trait.dataset}}</th> + <th>{{trait.dataset_fullname}}</th> + <th>{{trait.description}}</th> + <th>{{trait.authors | join(" ")}}</th> + <th> + <a href="{{trait.pubmed_linj}}" title="Pubmed link for trait"> + {{trait.year}} + </a> + </th> + <th>CHR{{trait.geno_chr}}@{{trait.geno_mb}}</th> + <th>{{trait.lrs}}</th> + <th>{{trait.additive}}</th> + </tr> + {%else%} <tr> - <td colspan="100%" align="center"> - <br><b><font size="15">Loading...</font></b><br> + <td colspan="100%" align="center" style="text-align: center;"> + <br/><b><font size="4"> + <span class="glyphicon glyphicon-info-sign text-info"></span> + + There are no phenotype traits to select from. + </font></b><br /> </td> </tr> + {%endfor%} </table> </div> |