Clean up gnqa answer page.

Signed-off-by: Munyoki Kilyungi <me@bonfacemunyoki.com>
Co-authored-by: Alexander Kabui <alexanderkabua@gmail.com>

2 files changed, 77 insertions, 303 deletions

diff --git a/gn2/wqflask/templates/gnqa.html b/gn2/wqflask/templates/gnqa.html
index 1c373289..1b08deb2 100644
--- a/gn2/wqflask/templates/gnqa.html
+++ b/gn2/wqflask/templates/gnqa.html
@@ -56,7 +56,9 @@
  #gnqna_search_home {
      field-sizing: normal;
  }
-
+ .answers {
+     width: 75%;
+ }
 </style>
 {% endblock %}
 
@@ -103,6 +105,7 @@
 	</h1>
     </header>
     <form class="col-sm-12" id="gnqna_search_home"
+	  hx-history="true"
 	  hx-post="/gnqna"
 	  hx-target=".gnqa-copy"
 	  hx-swap="outerHTML"
diff --git a/gn2/wqflask/templates/gnqa_answer.html b/gn2/wqflask/templates/gnqa_answer.html
index beaf8e99..50c7ff53 100644
--- a/gn2/wqflask/templates/gnqa_answer.html
+++ b/gn2/wqflask/templates/gnqa_answer.html
@@ -1,320 +1,91 @@
-{% extends "base.html" %}
-{% block title %}GNQNA{% endblock %}
-
-{% block css %}
-<link rel="stylesheet" type="text/css" href="/static/new/css/markdown.css" />
-<style type="text/css">
- #loader {
-     display: none;
-     position: fixed;
-     top: 0;
-     left: 0;
-     right: 0;
-     bottom: 0;
-     width: 100%;
-     background: rgba(0,0,0,0.75) url("/static/gif/loader.gif") no-repeat center center;
-     z-index: 10000;
- }
-
- .btn{
-     cursor: pointer;
-     outline: 0;
-     color: #AAA;
-
- }
-
- .btn:focus {
-     outline: none;
- }
-
-
- .blue-btn{
-     color: blue;
- }
-
- .red-btn{
-     color: red;
- }
- .panel-heading {
-     padding: 0;
-     border:0;
- }
- .panel-title a, .panel-title a:active {
-     display:block;
-     padding:15px;
-     color:#555;
-     font-weight:bold;
-     text-decoration:none;
-     border: none;
-
-     outline: none;
- }
-
- .panel-heading  a:before {
-     font-family: 'Glyphicons Halflings';
-     content: "\e114";
-     float: right;
-     transition: all 0.5s;
- }
-
- .panel-heading.active a:before {
-     -webkit-transform: rotate(180deg);
-     -moz-transform: rotate(180deg);
-     transform: rotate(180deg);
- }
-
-</style>
-{% endblock %}
-
-{% block content %} <!-- Start of body -->
-
-<div style="min-height: 100vh;width: 100vw; margin-bottom: 10px;">
-    <div id="loader"></div>
-    <div style="margin:10px; border:1px solid #ccc;padding: 15px;">
-	<div >
-	    <h1 id="gnqa_query" style="font-weight: bolder">{{query}}<h1>
-	</div>
-
-	<div style="width:90vw;overflow-wrap: normal; margin-top: 5px;">
-	    <p id="gnqa_answer">{{answer}} <p>
-	</div>
-
-	<div>
-            <div class="rating" style="margin-right:30px;padding:8px;text-align: right;" data-doc-id="{{query}}" data-task-id="{{task_id['task_id']}}">
-
-                <button class="btn" id="green" data-toggle="tooltip" data-placement="top" title="rate this answer +1 "><i class="fa fa-thumbs-up fa-lg fa-2x" aria-hidden="true"></i></button>
-                <button class="btn" id="red" data-toggle="tooltip" data-placement="top" title="rate this answer -1"><i class="fa fa-thumbs-down fa-lg fa-2x" aria-hidden="true"></i></button>
-
-            </div>
-
+<section class="container-fluid answers">
+    <h1 class="row text-left">
+	{{ query }}
+    </h1>
+    <div class="row">
+	<p class="col-sm-12 lead">{{ answer }}</p>
+	<div class="rating col-sm-3 col-offset-3" 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-lg fa-2x" 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-lg fa-2x" aria-hidden="true"></i></button>
 	</div>
     </div>
-
-    <div>
-
-
-	<div class="container" style="min-width:85vw;overflow-y: auto;min-height: 100vh;">
-            <h4> <a href="#" style="font-weight: bold;">References</a></h4>
-            {% if references %}
-            <ul id="gnqa_ref">
-
-		{% for reference in references %}
-
-		<li id="gnqa_ref_item">
-		    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
-			<!--panel starts here -->
-			<div class="panel panel-default">
-			    {% if loop.first %}
-
-			    <div class="panel-heading active" role="tab" id="heading{{reference.doc_id}}">
-				<h4 class="panel-title">
-
-				    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse{{reference.doc_id}}" aria-expanded="true" aria-controls="collapse{{reference.doc_id}}">
-					<h2 style="font-weight:bold;">{{ reference.bibInfo }} </h2>
-				    </a>
-				</h4>
-			    </div>
-
-
-			    <div id="collapse{{reference.doc_id}}" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading{{reference.doc_id}}">
-				<div class="panel-body">
-
-				    <div>
-				    </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>
-
-
-				    <div>
-					{% include 'pubmed_modal.html' %}
-				    </div>
-
-
-				    {% endif %}
-
-				    <p class="node-references">{{reference.comboTxt}}</p>
-
-
+    <div class="row container">
+	<h1>References</h1>
+	{% if references %}
+
+	<ul class="list-unstyled">
+	    {% for reference in references %}
+	    <li>
+                <div class="panel-group" role="tablist" aria-multiselectable="true">
+		    <div class="panel panel-default">
+			{% if loop.first %}
+			<div class="panel-heading active" role="tab" id="heading{{ reference.doc_id }}">
+			    <h4 class="panel-title">
+
+				<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse{{ reference.doc_id }}" aria-expanded="true" aria-controls="collapse{{reference.doc_id}}">
+				    <h2>{{ reference.bibInfo }} </h2>
+				</a>
+			    </h4>
+			</div>
+			<div id="collapse{{reference.doc_id}}" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading{{reference.doc_id}}">
+			    <div class="panel-body">
+				<div>
 				</div>
-			    </div>
-
-
-
-			    {% else %}
-
-			    <div class="panel-heading" role="tab" id="heading{{reference.doc_id}}">
-				<h4 class="panel-title">
-
-				    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse{{reference.doc_id}}" aria-expanded="false" aria-controls="collapse{{reference.doc_id}}">
-					<h2 style="font-weight:bold;">{{ reference.bibInfo }} </h2>
-				    </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">
-
-
-				    {% 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>
-
-
-
-				    <div>
-					{% include 'pubmed_modal.html' %}
-
-				    </div>
-
-
-
-				    {% endif %}
+				{% if reference.pubmed %}
 
+				<div style="margin: 5px;color:#3071a9;cursor: pointer;" >
 				    <p class="node-references">{{reference.comboTxt}}</p>
-
-				</div>
+				    <details>
+					<summary>See PubMed Info</summary>
+					<h4>{{ 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>
+				{% endif %}
 			    </div>
-			    {% endif %}
-
 			</div>
-
+			{% else %}
+		    <div class="panel-heading" role="tab" id="heading{{reference.doc_id}}">
+			<h4 class="panel-title">
+
+			    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse{{reference.doc_id}}" aria-expanded="false" aria-controls="collapse{{reference.doc_id}}">
+				<h2 style="font-weight:bold;">{{ reference.bibInfo }} </h2>
+			    </a>
+			</h4>
 		    </div>
-		</li>
-                {% endfor %}
-            </ul>
-            {% else %}
-            <p>No references available.</p>
-            {% endif %}
-	</div>
-    </div>
-</div>
-{% endblock %}
-
-{% block js %}
-<script src="{{ url_for('js', filename='jquery/jquery.min.js') }}" type="text/javascript"></script>
-<script src="{{ url_for('js', filename='linkify/linkify.min.js') }}" type="text/javascript"></script>
-<script src="{{ url_for('js', filename='linkify/linkify-html.min.js') }}" type="text/javascript"></script>
-<script type="text/javascript">
- $('.panel-collapse').on('show.bs.collapse', function () {
-     $(this).siblings('.panel-heading').addClass('active');
- });
 
- $('.panel-collapse').on('hide.bs.collapse', function () {
-     $(this).siblings('.panel-heading').removeClass('active');
- });
+		    <div id="collapse{{reference.doc_id}}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading{{reference.doc_id}}">
 
- document.addEventListener('DOMContentLoaded', function() {
-     const GN_SERVER_URL = {{gn_server_url|tojson}}
-     $('#globalsearchform').hide()
-     $('footer').hide()
-     const answer = {{ answer | tojson }};
-     const query = {{query | tojson }}
-     const task_id = {{ task_id | tojson }}["task_id"];
-     async function voteRequest (gn_server_url,task_id,metadata){
-	 try{
-	     const response = await fetch(`/gnqna/rating/${task_id}`,{
-		 method:"POST",
-		 headers: {
-		     'Content-Type': 'application/json'
-		 },
-		 body: JSON.stringify(metadata)
-	     })
-	     if (response.ok){
-		 return {"message":"success",status:0}
-	     }
-	     else {
-		 let {error,error_description} = await response.json()
-		 return  {"message":`HTTP Error:HTTP Response Code: ${response?.status}-reason-${error_description}`,status:1}
-	     }
-	 }
-	 catch (err){
-	     return {"message":err,status:1}}
-     }
-     likeBtn = document.querySelector("#green");
-     dislikeBtn = document.querySelector("#red")
-     likeBtn.addEventListener("click",(event)=>{
-	 if (likeBtn.classList.contains("blue-btn")){
-	     var {caller,weight} = (voteWeight["default"])
-	 }
-	 else {
-	     var {caller,weight} = voteWeight["like"]
+			<div class="panel-body">
 
-	 }
-	 voteRequest(GN_SERVER_URL,task_id,{weight,query,answer}).then(({message,status})=>{
-	     alert(message);
-	     status == 0 ? caller():"";
-	 })
-     })
-     dislikeBtn.addEventListener("click", (event) = {
-	 var {caller,weight} = voteWeight["dislike"]
-	 if (dislikeBtn.classList.contains("red-btn")){
-	     var {caller,weight} = (voteWeight["default"])
-	 }
-	 voteRequest(GN_SERVER_URL,task_id,{weight,query,answer}).then(({message,status})=>{
-	     alert(message)
-	     status == 0 ? caller():""
-     }));
-	 let voteWeight = {
-	     like: {
-		 caller:function(){
-		     dislikeBtn.classList.remove("red-btn")
-		     likeBtn.classList.toggle("blue-btn")
 
-		 },
-		 weight: 1
-	     },
-	     dislike: {
-		 caller:function(){
-		     likeBtn.classList.remove("blue-btn")
-		     dislikeBtn.classList.toggle("red-btn")
-		 },
+			    {% if reference.pubmed %}
 
-		 weight:-1
-	     },
-	     default: {
-		 caller:function() {
-		     likeBtn.classList.remove("blue-btn")
-		     dislikeBtn.classList.remove("red-")
-		 },
-	 }}
-</script>
-<script type="text/javascript">
- function nodeLinkify(node_list) {
-     node_list.forEach((node) => {
-	 node.innerHTML = linkifyHtml(node.innerHTML, {
-	     target:{
-		 url:"_blank",
-		 email:null
-	     }
-	 })
-     })
 
+			    <div style="margin: 5px;color:#3071a9;cursor: pointer;" >
 
-     nodeLinkify(document.querySelectorAll(".pubmed-abstract"))
+				<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>
 
-     nodeLinkify(document.querySelectorAll(".node-references"))
+			    {% endif %}
 
-     var coll = document.getElementsByClassName("collapsible-btn");
-     for (var i = 0; i < coll.length; i++) {
-	 coll[i].addEventListener("click", function() {
+			    <p class="node-references">{{reference.comboTxt}}</p>
 
-	     this.classList.toggle("active-btn");
-	 });
-     }
-</script>
-{% endblock %}
+			</div>
+		    </div>
+		    {% endif %}
+		    </div>
+		</div>
+	    </li>
+	    {% endfor %}
+	</ul>
+
+	{% else %}
+	<p><i>No references available.</i></p>
+	{% endif %}
+    </div>
+</section>