From 9957da3abeabbe68bb1d77358cbec1dd5274b938 Mon Sep 17 00:00:00 2001
From: Frederick Muriuki Muriithi
Date: Sat, 25 Mar 2023 14:57:15 +0300
Subject: oauth2: Add UI to use to link data

---
 wqflask/wqflask/oauth2/data.py                     | 12 ++-
 .../templates/oauth2/data-list-phenotype.html      | 99 +++++++++++++++++++---
 wqflask/wqflask/templates/oauth2/data-list.html    |  5 +-
 3 files changed, 99 insertions(+), 17 deletions(-)

diff --git a/wqflask/wqflask/oauth2/data.py b/wqflask/wqflask/oauth2/data.py
index 73ed171b..963ab547 100644
--- a/wqflask/wqflask/oauth2/data.py
+++ b/wqflask/wqflask/oauth2/data.py
@@ -39,11 +39,17 @@ def list_data_by_species_and_dataset(
              lambda trts: {"traits": tuple({
                  "index": idx, **trait
              } for idx, trait in enumerate(trts, start=1))})
+    groups = oauth2_get("oauth2/group/list").either(
+        lambda err: {"groups_error": process_error(err)},
+        lambda grps: {"groups": grps})
+
+    selected_traits = request.form.getlist("selected_traits")
 
     return __render_template__(
-        templates[dataset_type], **roles, **traits, species_name=species_name,
-        dataset_type=dataset_type, per_page=per_page,
-        query=query, search_endpoint=urljoin(app.config["GN_SERVER_URL"], "search/"))
+        templates[dataset_type], **roles, **traits, **groups,
+        species_name=species_name, dataset_type=dataset_type, per_page=per_page,
+        query=query, selected_traits=selected_traits,
+        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 5212a146..0e94bcfa 100644
--- a/wqflask/wqflask/templates/oauth2/data-list-phenotype.html
+++ b/wqflask/wqflask/templates/oauth2/data-list-phenotype.html
@@ -24,10 +24,49 @@
   </div>
 
   <div class="row">
+    <form id="frm-link-items">
+      <legend style="text-transform: capitalize;">
+	{{dataset_type}}: Link Traits to Group
+      </legend>
+
+      <div class="form-group">
+	<label for="select-group">Group</label>
+	<select id="select-group" name="group_id" required="required"
+		class="form-control">
+	  <option value="">Select group</option>
+	  {%for group in groups%}
+	  <option value="{{group.group_id}}">{{group.group_name}}</option>
+	  {%endfor%}
+	</select>
+      </div>
+
+      <table id="tbl-link-phenotypes" class="table-hover table-striped cell-border">
+	<tbody>
+	  <tr>
+	    <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 selected phenotypes to link to the group.
+	      </font></b><br />
+	    </td>
+	  </tr>
+      </table>
+
+      {%if groups | length > 0%}
+      <input type="submit" value="Link Selected" class="btn btn-primary" />
+      {%else%}
+      <input type="submit" value="No group to link to" class="btn btn-warning"
+	     disabled="disabled" />
+      {%endif%}
+    </form>
+  </div>
+
+  <div class="row">
+    <span id="search-messages" class="alert-danger" style="display:none"></span>
     <form id="frm-search-traits"
 	  action="#"
 	  method="POST">
-      {{search_endpoint}}
       {%if dataset_type == "mrna"%}
       <legend>mRNA: Search</legend>
       {%else%}
@@ -88,15 +127,17 @@
 	src="/static/new/javascript/create_datatable.js"></script>
 
 <script language="javascript" type="text/javascript">
-  function init_table(traits) {
+  function init_table(table_id, traits) {
       create_table(
-	  tableId="tbl-phenotypes", tableData=traits,
+	  tableId=table_id, tableData=traits,
 	  columnDefs=[
 	      {"data": null, "render": function(data) {
 		  return (
-		      '<input type="checkbox" name="pheno_traits" ' +
+		      '<input type="checkbox" ' +
+			  (table_id == 'tbltbl-phenotypes' ?
+			   'name="pheno_traits" ': 'name="selected_traits" ') +
 			  'class="checkbox" value="' +
-			  data.dataset + '::' + data.name +
+			  data.name + ':' + data.dataset +
 			  '" />');
 	      }},
 	      {"title": "Index", "data": "index"},
@@ -123,7 +164,16 @@
 	      }},
 	      {"title": "Additive Effects", "data": null, "render": function(data) {
 		  return data.additive ? data.additive.toFixed(4) : "N/A";
-	      }}]);
+	      }}],
+	  customSettings = {
+	      "scrollY": "40vh",
+	      "language": {
+		  "emptyTable": "No traits to display!",
+		  "info": "Showing _START_ to _END_ of _TOTAL_ entries",
+		  "infoEmpty": "No entries to show",
+		  "loadingRecords": "Loading entries ..."
+	      }
+	  });
   }
 
   function add_index(item, index) {
@@ -140,11 +190,28 @@
       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));
+      $("#search-messages").html("");
+      $("#search-messages").attr("style", "display:none;");
+      $.ajax(
+	  "{{search_endpoint}}",
+	  {
+	      "method": "GET",
+	      "data": {
+		  "type": dataset_type,
+		  "per_page": per_page,
+		  "query": query
+	      },
+	      "error": function(jqXHR, textStatus, errorThrown) {
+		  msg_elt = $("#search-messages")
+		  console.debug(jqXHR)
+		  $("#search-messages").html(
+		      "<strong>" + textStatus + "</strong>: Search for '" +
+		      user_query + "' failed! Try a different search.");
+		  $("#search-messages").attr("style", "display: block;");
+	      },
+	      "success": function (data, textStatus, jqXHR) {
+		  init_table("tbl-phenotypes", data.map(add_index));
+	      }
 	  });
   }
 
@@ -156,13 +223,21 @@
       };
   }
 
+  function sanitised_table_data(data) {
+      if(data && data.length > 0) {
+	  return data
+      }
+      return null
+  }
+
   $(document).ready(function() {
       $("#frm-search-traits").submit(function(event) {
 	  event.preventDefault();
 	  return false;
       });
       $("#txt-query").keyup(debounced_search())
-      init_table({{traits | list | tojson}});
+      init_table("tbl-phenotypes", {{traits | list | tojson}});
+      init_table("tbl-link-phenotypes", {{selected_traits | list | tojson}});
   });
 </script>
 {%endblock%}
diff --git a/wqflask/wqflask/templates/oauth2/data-list.html b/wqflask/wqflask/templates/oauth2/data-list.html
index 4e0cf5ae..b7c526c6 100644
--- a/wqflask/wqflask/templates/oauth2/data-list.html
+++ b/wqflask/wqflask/templates/oauth2/data-list.html
@@ -23,7 +23,8 @@
       {%else%}
       <div class="form-group">
 	<label for="select-species">Species</label>
-	<select id="select-species" name="species_name" required="required">
+	<select id="select-species" name="species_name" required="required"
+		class="form-control">
 	  <option value="">Select Species</option>
 	  {%for spc in species%}
 	  <option value="{{spc.Name}}">
@@ -36,7 +37,7 @@
       <div class="form-group">
 	<label for="select-dataset-type">Dataset/Trait Type</label>
 	<select id="select-dataset-type" name="dataset_type"
-		required="required">
+		required="required" class="form-control">
 	  <option value="">Select dataset type</option>
 	  <option value="mrna">mRNA Assay (ProbeSet) Dataset</option>
 	  <option value="genotype">Genotype Dataset</option>
-- 
cgit v1.2.3