oauth2: data: setup search as user types

Filter out data as the user types, with a short delay to prevent
searching on each and every character.

2 files changed, 97 insertions, 48 deletions

diff --git a/wqflask/wqflask/oauth2/data.py b/wqflask/wqflask/oauth2/data.py
index 432ca3b9..73ed171b 100644
--- a/wqflask/wqflask/oauth2/data.py
+++ b/wqflask/wqflask/oauth2/data.py
@@ -1,6 +1,9 @@
 """Handle linking data to groups."""
+from urllib.parse import urljoin
+
 from flask import (
-    flash, request, url_for, redirect, Response, Blueprint, render_template)
+    flash, request, url_for, redirect, Response, Blueprint, render_template,
+    current_app as app)
 
 from .request_utils import process_error
 from .client import oauth2_get, oauth2_post
@@ -26,11 +29,13 @@ def list_data_by_species_and_dataset(
     roles = oauth2_get("oauth2/user/roles").either(
         lambda err: {"roles_error": process_error(err)},
         lambda roles: {"roles": roles})
+    query = request.args.get("query", "")
     per_page = int(request.args.get("per_page", 500))
-    traits = oauth2_get(
-        (f"search/?type={dataset_type}&per_page={per_page}&query="
-         f"species:{species_name}")).either(
-             lambda err: {"traits_error": process_error(er)},
+    search_uri = (f"search/?type={dataset_type}&per_page={per_page}&query="
+                  f"species:{species_name}") + (
+                      f" AND ({query})" if bool(query) else "")
+    traits = oauth2_get(search_uri).either(
+             lambda err: {"traits_error": process_error(err)},
              lambda trts: {"traits": tuple({
                  "index": idx, **trait
              } for idx, trait in enumerate(trts, start=1))})
@@ -38,7 +43,7 @@ def list_data_by_species_and_dataset(
     return __render_template__(
         templates[dataset_type], **roles, **traits, species_name=species_name,
         dataset_type=dataset_type, per_page=per_page,
-        query=request.args.get("query", ""))
+        query=query, search_endpoint=urljoin(app.config["GN_SERVER_URL"], "search/"))
 
 @data.route("/list", methods=["GET", "POST"])
 def list_data():
diff --git a/wqflask/wqflask/templates/oauth2/data-list-phenotype.html b/wqflask/wqflask/templates/oauth2/data-list-phenotype.html
index 3c58f275..5212a146 100644
--- a/wqflask/wqflask/templates/oauth2/data-list-phenotype.html
+++ b/wqflask/wqflask/templates/oauth2/data-list-phenotype.html
@@ -24,9 +24,10 @@
   </div>
 
   <div class="row">
-    <form id="frm-select-datatype"
+    <form id="frm-search-traits"
 	  action="#"
 	  method="POST">
+      {{search_endpoint}}
       {%if dataset_type == "mrna"%}
       <legend>mRNA: Search</legend>
       {%else%}
@@ -34,16 +35,20 @@
 	{{dataset_type}}: Search
       </legend>
       {%endif%}
-      <input type="hidden" value="{{species_name}}" name="species" />
-      <input type="hidden" value="{{dataset_type}}" name="dataset_type" />
-      <input type="hidden" value="{{per_page}}" name="per_page" />
+      <input type="hidden" value="{{species_name}}" name="species"
+	     id="txt-species" />
+      <input type="hidden" value="{{dataset_type}}" name="dataset_type"
+	     id="txt-dataset-type"  />
+      <input type="hidden" value="{{per_page}}" name="per_page"
+	     id="txt-per-page"  />
 
       <div class="form-group">
 	<label for="txt-query">Search</label>
 	<div class="input-group">
-	  <span class="input-group-addon">species:{{species_name}}</span>
+	  <span class="input-group-addon">species:{{species_name}} AND (</span>
 	  <input type="text" id="txt-query" name="query" class="form-control"
 		 value="{{query}}"/>
+	  <span class="input-group-addon">)</span>
 	</div>
       </div>
     </form>
@@ -83,42 +88,81 @@
 	src="/static/new/javascript/create_datatable.js"></script>
 
 <script language="javascript" type="text/javascript">
-  var traits = {{traits | list | tojson}};
-  create_table(
-      tableId="tbl-phenotypes", tableData=traits,
-      columnDefs=[
-	  {"data": null, "render": function(data) {
-	      return (
-		  '<input type="checkbox" name="pheno_traits" ' +
-		      'class="checkbox" value="' +
-		      data.dataset + '::' + data.name +
-		      '" />');
-	  }},
-	  {"title": "Index", "data": "index"},
-	  {"title": "Dataset", "data": "dataset_fullname"},
-	  {"title": "Group", "data": "group"},
-	  {"title": "Record", "data": null, "render": function(data) {
-	      return (
-		  '<a target="_blank" href="/show_trait?trait_id=' +
-		      data.name + '&dataset=' + data.dataset +
-		      '">' + data.name + "</a>");
-	  }},
-	  {"title": "Description", "data": "description"},
-	  {"title": "Authors", "data": "authors"},
-	  {"title": "Year", "data": null, render: function(data) {
-	      return (
-		  '<a target="_blank" href="' + data.pubmed_link +
-		      '" >' + data.year + '</a>');
-	  }},
-	  {"title": "LRS", "data": null, "render": function(data) {
-	      console.debug(data);
-	      return data.lrs ? data.lrs.toFixed(4) : "N/A";
-	  }},
-	  {"title": "Peak Location", "data": null, "render": function(data) {
-	      return 'Chr' + data.geno_chr + ': ' + data.geno_mb;
-	  }},
-	  {"title": "Additive Effects", "data": null, "render": function(data) {
-	      return data.additive ? data.additive.toFixed(4) : "N/A";
-	  }}]);
+  function init_table(traits) {
+      create_table(
+	  tableId="tbl-phenotypes", tableData=traits,
+	  columnDefs=[
+	      {"data": null, "render": function(data) {
+		  return (
+		      '<input type="checkbox" name="pheno_traits" ' +
+			  'class="checkbox" value="' +
+			  data.dataset + '::' + data.name +
+			  '" />');
+	      }},
+	      {"title": "Index", "data": "index"},
+	      {"title": "Dataset", "data": "dataset_fullname"},
+	      {"title": "Group", "data": "group"},
+	      {"title": "Record", "data": null, "render": function(data) {
+		  return (
+		      '<a target="_blank" href="/show_trait?trait_id=' +
+			  data.name + '&dataset=' + data.dataset +
+			  '">' + data.name + "</a>");
+	      }},
+	      {"title": "Description", "data": "description"},
+	      {"title": "Authors", "data": "authors"},
+	      {"title": "Year", "data": null, render: function(data) {
+		  return (
+		      '<a target="_blank" href="' + data.pubmed_link +
+			  '" >' + data.year + '</a>');
+	      }},
+	      {"title": "LRS", "data": null, "render": function(data) {
+		  return data.lrs ? data.lrs.toFixed(4) : "N/A";
+	      }},
+	      {"title": "Peak Location", "data": null, "render": function(data) {
+		  return 'Chr' + data.geno_chr + ': ' + data.geno_mb;
+	      }},
+	      {"title": "Additive Effects", "data": null, "render": function(data) {
+		  return data.additive ? data.additive.toFixed(4) : "N/A";
+	      }}]);
+  }
+
+  function add_index(item, index) {
+      return {"index": index, ...item};
+  }
+
+  function do_search() {
+      /*vent.preventDefault();*/
+      user_query = $("#txt-query").val();
+      dataset_type = $("#txt-dataset-type").val();
+      per_page = $("#txt-per-page").val();
+      species = $("#txt-species").val();
+      query = "species:" + species;
+      if (user_query.length > 2) {
+	  query = query + " AND (" + user_query + ")";
+      }
+      $.get(
+	  ("{{search_endpoint}}?" + "type=" + dataset_type + "&" + "per_page=" +
+	   per_page + "&query=" + query),
+	  function (data, status) {
+	      init_table(data.map(add_index));
+	  });
+  }
+
+  function debounced_search() {
+      var timeout;
+      return function search(event) {
+	  clearTimeout(timeout);
+	  timeout = setTimeout(do_search, 500);
+      };
+  }
+
+  $(document).ready(function() {
+      $("#frm-search-traits").submit(function(event) {
+	  event.preventDefault();
+	  return false;
+      });
+      $("#txt-query").keyup(debounced_search())
+      init_table({{traits | list | tojson}});
+  });
 </script>
 {%endblock%}