From 9d770cd85bb80869fd35a843e1fa3eabbc90ad35 Mon Sep 17 00:00:00 2001 From: Frederick Muriuki Muriithi Date: Tue, 18 Apr 2023 14:01:38 +0300 Subject: oauth2: update UI and js to display initial search results. --- wqflask/wqflask/oauth2/data.py | 2 +- .../wqflask/static/new/javascript/auth/search.js | 9 +-- .../new/javascript/auth/search_phenotypes.js | 76 +++++++++++++++++----- .../templates/oauth2/data-list-phenotype.html | 53 +++++++++++++-- 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 = $(""); check = $( ''); + '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 = $("") + cell = $(''); + cell.append( + $('')); + cell.append(" "); + cell.append("No phenotype traits to select from."); + row.append(cell); + $(table_id + " tbody").append(row); + } + table_data.forEach(function(trait) { + row = $("") + 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( + '' + + trait.year + "")); + 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 @@ {%endif%} + id="txt-species-name" /> + data-traits="{{traits | tojson}}" + data-initial-job-id={{search_results.job_id}} + data-initial-search-res={{search_results | tojson}}> + + + + + + + + + + + + + + + + {%for trait in traits%} + + + + + + + + + + + + + + {%else%} - + {%endfor%} -- cgit v1.2.3