Merge pull request #838 from genenetwork/feature/refactor-gnqa-ui

Feature/refactor gnqa UI

4 files changed, 121 insertions, 74 deletions

diff --git a/gn2/wqflask/templates/gnqa.html b/gn2/wqflask/templates/gnqa.html
index 31a04aac..1268ef39 100644
--- a/gn2/wqflask/templates/gnqa.html
+++ b/gn2/wqflask/templates/gnqa.html
@@ -30,6 +30,12 @@
      font-size: 14px;
  }
 
+ .search-hist-btn{
+     background-color:transparent;
+     color:#3071a9;
+     border:none     
+ }
+
  .search-header sup {
      top: -2em;
  }
@@ -80,44 +86,17 @@
 {% endblock %}
 
 {% block search %}{% endblock %}
-
-<div class="modal fade  bd-example-modal-lg " id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
-    <div class="modal-dialog modal-lg" role="document" >
-	<div class="modal-content">
-            <div class="modal-header">
-		<h2 class="modal-title" id="exampleModalLabel">Your Search History</h2>
-
-            </div>
-            <div class="modal-body">
-		<div>
-                    {% if prev_queries %}
-                    <div>
-			{% for search in prev_queries[:8] %}
-			<div class="search-hist-btn" style="display:flex;justify-content: space-between;align-items: center;">
-                            <form  class="search-hist-btn-form" method="GET" data-link="{{search}}">
-				<a  class="search-hist-btn-link" data-link="{{search}}">{{search}}</a>
-                            </form>
-			</div>
-			{% endfor %}
-                    </div>
-                    {% endif %}
-		</div>
-            </div>
-            <div class="modal-footer">
-		<button type="button" class="btn btn-danger " style="color:white" >Delete All</button>
-		<button type="button" class="btn btn-primary" data-dismiss="modal" style="color:white">Cancel</button>
-            </div>
-	</div>
-    </div>
-</div>
-
 {% block content %} <!-- Start of body -->
 <section class="container-fluid">
     <header class="row">
 	<h1 class="col-sm-12 text-center search-header">
 	    AI Search
 	    <small>
-		<sup><a href="#">[Search History]</a></sup>
+	      <sup>
+		<button class="search-hist-btn" hx-get="/gnqna/hist/" hx-target="#swap" hx-swap="innerHTML" >
+		  [Search History]
+		</button>
+	      </sup>
 	    </small>
 	</h1>
     </header>
@@ -142,7 +121,7 @@
 		       value=''
 		name="querygnqa"
 		       hx-post="/gnqna"
-		hx-target="#swap
+		hx-target="#swap"
 		hx-swap="innerHTML"
 		hx-indicator="#indicator"
 	    />
@@ -161,8 +140,6 @@
 
 	</div>
     </article>
-
-
 </section>
 
 {% endblock %}
diff --git a/gn2/wqflask/templates/gnqa_answer.html b/gn2/wqflask/templates/gnqa_answer.html
index 6759ef72..bde39329 100644
--- a/gn2/wqflask/templates/gnqa_answer.html
+++ b/gn2/wqflask/templates/gnqa_answer.html
@@ -5,16 +5,19 @@
 	    <mark style="font-family: 'Linux Libertine','Georgia','Times','Source Serif Pro',serif;"><b><i>{{ query }}</i></b></mark><br/>
 	    {{ answer }}
 	</p>
-	<div class="rating row" data-doc-id="{{query}}" data-task-id="{{task_id['task_id']}}">
-	    <button class="btn btn-success" data-toggle="tooltip" data-placement="top" title="Vote Up"><i class="fa fa-thumbs-up fa-sm fa-1x" aria-hidden="true"></i></button>
-            <button class="btn btn-danger" data-toggle="tooltip" data-placement="top" title="Vote Down"><i class="fa fa-thumbs-down fa-sm fa-1x" aria-hidden="true"></i></button>
+	<div class="rating row" data-doc-id="{{query}}" data-task-id="{{task_id['task_id']}}"
+	      hx-vals='{"query": "{{query}}","answer":"{{answer}}"}'
+	     >
+	    <button class="btn btn-success" data-toggle="tooltip" data-placement="top" title="Vote Up" hx-post="/gnqna/rating/{{task_id['task_id']}}/1" hx-target="#rate" hx-swap="innerHTML" hx-trigger="click"><i class="fa fa-thumbs-up fa-sm fa-1x" aria-hidden="true"></i></button>
+            <button class="btn btn-danger" data-toggle="tooltip" data-placement="top" title="Vote Down" hx-post="/gnqna/rating/{{task_id['task_id']}}/-1" hx-target="#rate" hx-swap="innerHTML" hx-trigger="click"><i class="fa fa-thumbs-down fa-sm fa-1x" aria-hidden="true"></i></button>
+	    <sub id="rate" class="text-info">	    
+	     </sub>
 	</div>
     </div>
     <div class="row container">
 	<details open>
 	    <summary><h3 style="font-family: 'Linux Libertine','Georgia','Times','Source Serif Pro',serif;">References</h3></summary>
 	    {% if references %}
-
 	    <ul class="list-unstyled">
 		{% for reference in references %}
 		<li>
@@ -32,15 +35,18 @@
 			    <div id="collapse{{reference.doc_id}}" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading{{reference.doc_id}}">
 				<div class="panel-body">
 				    <p class="node-references">{{ reference.comboTxt }}</p>
-				    <div style="margin: 5px;color:#3071a9;cursor: pointer;" >
+				    <div>
 					{% if reference.pubmed %}
-					<details>
-					    <summary>See PubMed Info</summary>
-					    <h4 style="font-family: 'Linux Libertine','Georgia','Times','Source Serif Pro',serif;">{{ reference.pubmed[0].get('title') }}</h4>
-					    <p><b>Authors: {{ reference.pubmed[0].get('authors') }}</b></p>
-					    <p><b>PMID: {{ reference.pubmed[0].get('pub_id') }}</b></p>
-					    <p><b>Abstract: </b> {{ reference.pubmed[0].get('abstract')|safe }}</p>
-					    <p><i><a href="{{reference.pubmed[0].get('source')}}" target="_blank" style="float:left;">See full Article on Pubmed</a></i></p>
+					<details open>
+					  <summary>See PubMed Info</summary>
+					  <div style="font-family: 'Linux Libertine','Georgia','Times','Source Serif Pro',serif;margin-top:1.4em">
+					    <h3><b>{{ reference.pubmed[0].get('title') }}:</b></h3>			
+					    <p><b>Authors:</b><span class="text-muted">{{ reference.pubmed[0].get('authors') }}</span></p>
+					    <p><b>PMID: <span class="text-info">{{ reference.pubmed[0].get('pub_id') }}</span></b></p>
+					    <p><b>Abstract: </b></p>
+					    <p>{{ reference.pubmed[0].get('abstract')|safe }}</p>
+					    <p><a href="{{reference.pubmed[0].get('source')}}" target="_blank">See full Article on Pubmed</a></p>
+					  </div>
 					</details>
 					{% endif %}
 				    </div>
@@ -54,26 +60,24 @@
 					</a>
 				    </h4>
 				</div>
-
 				<div id="collapse{{reference.doc_id}}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading{{reference.doc_id}}">
-
 				    <div class="panel-body">
-
-
+					<p class="node-references">{{reference.comboTxt}}</p>
+				    <div>
 					{% if reference.pubmed %}
-
-
-					<div style="margin: 5px;color:#3071a9;cursor: pointer;" >
-
-					    <button type="button"  data-toggle="modal" data-target=".bd-pubmed-modal-lg-{{reference.doc_id}}" style="border:none;text-decoration:underline;outline: none;padding:5px;margin-left:25px;background: transparent;">
-						<span><b>See PubMed Info</b></span>
-					    </button>
-					</div>
-
+					<details >
+					  <summary>See PubMed Info</summary>
+					  <div style="font-family: 'Linux Libertine','Georgia','Times','Source Serif Pro',serif;margin-top:1.4em">
+					    <h3><b>{{ reference.pubmed[0].get('title') }}:</b></h3>			
+					    <p><b>Authors:</b><span class="text-muted">{{ reference.pubmed[0].get('authors') }}</span></p>
+					    <p><b>PMID: <span class="text-info">{{ reference.pubmed[0].get('pub_id') }}</span></b></p>
+					    <p><b>Abstract: </b></p>
+					    <p>{{ reference.pubmed[0].get('abstract')|safe }}</p>
+					    <p><a href="{{reference.pubmed[0].get('source')}}" target="_blank" style="float:left;">See full Article on Pubmed</a></p>
+					  </div>
+					</details>
 					{% endif %}
-
-					<p class="node-references">{{reference.comboTxt}}</p>
-
+				    </div>					
 				    </div>
 				</div>
 				{% endif %}
@@ -82,11 +86,9 @@
 		</li>
 		{% endfor %}
 	    </ul>
-
 	    {% else %}
 	    <p><i>No references available.</i></p>
 	    {% endif %}
 	</details>
-
 		    </div>
 </section>
diff --git a/gn2/wqflask/templates/gnqa_search_history.html b/gn2/wqflask/templates/gnqa_search_history.html
new file mode 100644
index 00000000..2c07b8c0
--- /dev/null
+++ b/gn2/wqflask/templates/gnqa_search_history.html
@@ -0,0 +1,42 @@
+<section class="container-fluid  gnqa-copy">
+  <header class="row">
+
+    <div class="panel panel default col-sm-6 col-sm-offset-3">
+      <div class="panel panel-default">
+	<div class="panel-heading">
+	  <div>
+	    <h4 class="text-primary">You search History </h4>
+	  </div>
+	</div>
+      </div>
+    </div>
+  </header>
+  <div class="container row">
+  <div class="panel panel-default col-sm-6 col-sm-offset-3 ">
+    {% for record in prev_queries %}
+    <div class="panel-body">
+      <div class="row">
+	<input name="" type="checkbox" value="" class="col-sm-1">
+	<div class="col-sm-10">
+	  {% for id,val in  record.items() %}
+	    <button
+	      hx-get="/gnqna/hist/search/{{id}}"
+              hx-target="#swap"
+	      hx-swap="innerHTML"
+	      hx-trigger= "click"
+	      data-bs-toggle="tooltip"
+	      data-bs-placement="left"
+	      title="/gnqna/hist/search?{{id}}"
+	      style="background:transparent;border:none;cursor:pointer"
+	      >
+	      <b class="text-info">{{val}} </b>
+	    </button>
+	  {% endfor %}
+	</div>
+      </div>
+      </div>
+     {% endfor %}
+   </div>
+  </div>
+  </div>
+ </section>
diff --git a/gn2/wqflask/views.py b/gn2/wqflask/views.py
index 835a620c..074ccae2 100644
--- a/gn2/wqflask/views.py
+++ b/gn2/wqflask/views.py
@@ -299,28 +299,54 @@ def gnqna():
     return render_template("gnqa.html", prev_queries=prev_queries)
 
 
-@app.route("/gnqna/hist/search/<search_term>", methods=["GET"])
+@app.route("/gnqna/hist/", methods=["GET"])
 @require_oauth2
-def gnqna_hist(search_term):
-    response = monad_requests.get(urljoin(GN3_LOCAL_URL, f"/api/llm/historys/{search_term}")).then(lambda resp: resp).either(
+def get_hist_titles():
+    token = session_info()["user"]["token"].either(
+        lambda err: err, lambda tok: tok["access_token"])
+    response = monad_requests.get(urljoin(GN3_LOCAL_URL,
+                                          "/api/llm/hist/titles"),
+                                  headers={
+        "Authorization": f"Bearer {token}"
+    }
+    ).then(lambda resp: resp).either(
         lambda x:  x.json(), lambda x: x.json())
-    return render_template("gnqa_answer.html", **{"gn_server_url": GN3_LOCAL_URL, **response})
+    return render_template("gnqa_search_history.html", **response)
+
 
+@app.route("/gnqna/hist/search/<search_term>", methods=["GET"])
+@require_oauth2
+def fetch_hist_records(search_term):
+    token = session_info()["user"]["token"].either(
+        lambda err: err, lambda tok: tok["access_token"])
+    response = monad_requests.get(urljoin(GN3_LOCAL_URL,
+                                          f"/api/llm/history/{search_term}"),
+                                  headers={
+        "Authorization": f"Bearer {token}"
+    }
+    ).then(lambda resp: resp).either(
+        lambda x:  x.json(), lambda x: x.json())
+    return render_template("gnqa_answer.html", **response)
 
 
-@app.route("/gnqna/rating/<task_id>",methods=["POST"])
-def gnqna_rating(task_id):
+@app.route("/gnqna/rating/<task_id>/<int(signed=True):weight>",
+           methods=["POST"])
+@require_oauth2
+def gnqna_rating(task_id, weight):
     token = session_info()["user"]["token"].either(
-                lambda err: err, lambda tok: tok["access_token"])
+        lambda err: err, lambda tok: tok["access_token"])
     return monad_requests.post(
         urljoin(GN3_LOCAL_URL,
                 f"/api/llm/rating/{task_id}"),
-        json= request.json,
+        json={**dict(request.form), "weight": weight},
         headers={
             "Authorization": f"Bearer {token}"
         }
     ).then(
-    lambda resp: resp).either(lambda x: (x.json(),x.status_code),lambda x:(x.json(),x.status_code))
+        lambda resp: resp).either(lambda x: (x.json(), x.status_code),
+                                  lambda x: (x.json(), x.status_code))
+
+
 @app.route("/gsearch_updating", methods=('POST',))
 def gsearch_updating():
     result = UpdateGSearch(request.args).__dict__