oauth2: update UI and js to display initial search results.

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("&nbsp;");
+	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>
+		&nbsp;
+		There are no phenotype traits to select from.
+	    </font></b><br />
 	  </td>
 	</tr>
+	{%endfor%}
     </table>
   </div>