From 7a1646add6b48ff65881a9253c3346c39fb3715d Mon Sep 17 00:00:00 2001
From: Alexander_Kabui
Date: Mon, 18 Mar 2024 17:49:09 +0300
Subject: linnkify abstract and references

---
 gn2/wqflask/templates/gnqa_answer.html  | 44 +++++++++++++++++++++++++----
 gn2/wqflask/templates/pubmed_modal.html | 49 ++++++++++++++++++++++++++++-----
 2 files changed, 81 insertions(+), 12 deletions(-)

diff --git a/gn2/wqflask/templates/gnqa_answer.html b/gn2/wqflask/templates/gnqa_answer.html
index f8010931..fea487b9 100644
--- a/gn2/wqflask/templates/gnqa_answer.html
+++ b/gn2/wqflask/templates/gnqa_answer.html
@@ -134,7 +134,7 @@ outline: none;
         <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 Search</b></span>
+          <span><b>See PubMed Info</b></span>
       </button>        
   </div>
 
@@ -146,7 +146,7 @@ outline: none;
        
         {% endif %}
         
-            <p>{{reference.comboTxt}}</p>
+            <p class="node-references">{{reference.comboTxt}}</p>
             <div class="rating" style="margin-right:20px;padding:5px;text-align: right;" data-doc-id="{{reference.doc_id}}" data-task-id="{{task_id['task_id']}}">
 
                  <button class="btn" id="green" data-toggle="tooltip" data-placement="top" title="rate this reference +1 "><i class="fa fa-thumbs-up fa-lg" aria-hidden="true"></i></button>
@@ -184,7 +184,7 @@ outline: none;
      <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 Search</b></span>
+      <span><b>See PubMed Info</b></span>
       </button>        
   </div>
 
@@ -201,7 +201,7 @@ outline: none;
    
 
         
-            <p>{{reference.comboTxt}}</p>
+            <p class="node-references">{{reference.comboTxt}}</p>
             <div class="rating" style="margin-right:20px;padding:5px;text-align: right;" data-doc-id="{{reference.doc_id}}" data-task-id="{{task_id['task_id']}}">
 
                  <button class="btn" id="green" data-toggle="tooltip" data-placement="top" title="rate this reference +1 "><i class="fa fa-thumbs-up fa-lg" aria-hidden="true"></i></button>
@@ -243,7 +243,6 @@ $('.panel-collapse').on('show.bs.collapse', function () {
 
      document.addEventListener('DOMContentLoaded', function() {
       const GN_SERVER_URL = {{gn_server_url|tojson}}
-      console.log(GN_SERVER_URL)
         $('#globalsearchform').hide()
         $('#gnqna_search_home').show()
          $('footer').hide()
@@ -296,5 +295,40 @@ if(likeBtn.hasClass("blue")){
  })
 </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">
+
+
+const nodeLinkify = (node_list)=>{
+node_list.forEach((node)=>{
+    node.innerHTML = linkifyHtml(node.innerHTML, {
+        target:{
+            url:"_blank",
+            email:null
+        }
+    })
+})
+}
+    
+    nodeLinkify(document.querySelectorAll(".pubmed-abstract"))
+
+    nodeLinkify(document.querySelectorAll(".node-references"))
+
+var coll = document.getElementsByClassName("collapsible-btn");
+for (var i = 0; i < coll.length; i++) {
+  coll[i].addEventListener("click", function() {
+
+    this.classList.toggle("active-btn");
+  });
+}
+
+
+
+</script>
+
 {% endblock %}
 
diff --git a/gn2/wqflask/templates/pubmed_modal.html b/gn2/wqflask/templates/pubmed_modal.html
index 96047e9f..f1bb05cb 100644
--- a/gn2/wqflask/templates/pubmed_modal.html
+++ b/gn2/wqflask/templates/pubmed_modal.html
@@ -1,5 +1,27 @@
 
+<style type="text/css">
+	
+	 .collapsible-btn:after {
+  content: '\02795'; /* Unicode character for "plus" sign (+) */
+  font-size: 13px;
+  color: white;
+  float: right;
+  margin-left: 5px;
+}
 
+.active-btn, .collapsible-btn:hover {
+  background-color: #ccc;
+}
+
+
+
+.active-btn:after {
+  content: "\2796"; /* Unicode character for "minus" sign (-) */
+}
+
+
+
+</style>
 <div>
             <div class="modal fade  bd-pubmed-modal-lg-{{reference.doc_id}} " id="pubmedModal-{{reference.doc_id}}" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel-{{reference.doc_id}}" aria-hidden="true">
   <div class="modal-dialog modal-lg" role="document" >
@@ -11,8 +33,21 @@
         <h2 class="modal-title" id="pubmedModalLabel-{{reference.doc_id}}" style="font-weight: bold">{{reference.pubmed[0].get('title')}}</h2>
         </div>
          
-        <div style="color:#0071bc; padding-top: 15px;">
-            {{reference.pubmed[0].get('authors')}}
+
+
+        <div>
+        	<p style="margin: 12px;">
+        <span><b>Authors:</b></span>
+		  <button class="btn btn-primary collapsible-btn" type="button" data-toggle="collapse" data-target="#collapseExample-{{reference.doc_id}}" aria-expanded="false" aria-controls="collapseExample-{{reference.doc_id}}" style="color:white;">
+		    Expand
+		  </button>
+		</p>
+		<div class="collapse" id="collapseExample-{{reference.doc_id}}">
+		        <div style="color:#0071bc; padding: 15px;" class="card card-body">
+		            {{reference.pubmed[0].get('authors')}}
+		        </div>
+		</div>
+
         </div>
 
         <h3 style="font-weight: bold;"> PMID:{{reference.pubmed[0].get('pub_id')}}</h3>
@@ -22,16 +57,15 @@
          <h3 style="font-weight:bold"> 
             Abstract 
          </h3>
-   <div style="font-size:1.7rem;padding: 0 2rem;margin: 0 auto;">
+   <div style="font-size:1.7rem;padding: 0 2rem;margin: 0 auto;" class="pubmed-abstract">
         <div >{{reference.pubmed[0].get('abstract')|safe}}
 
         </div>           
-       
-   </div>
-            
+      
+   </div> 
       </div>
       <div class="modal-footer" style="font-weight:bold;text-decoration: underline;">
-        <a href="{{reference.pubmed[0].get('source')}}" target="_blank" style="float:left;">See full Article Pubmed</a>
+        <a href="{{reference.pubmed[0].get('source')}}" target="_blank" style="float:left;">See full Article on Pubmed</a>
      </div>
     </div>
   </div>
@@ -41,3 +75,4 @@
 
 
 
+
-- 
cgit v1.2.3