Merge pull request #835 from genenetwork/feature/pub-data-ui

add pub data UI

2 files changed, 159 insertions, 6 deletions

diff --git a/gn2/wqflask/templates/gnqa_answer.html b/gn2/wqflask/templates/gnqa_answer.html
index aad804ad..fea487b9 100644
--- a/gn2/wqflask/templates/gnqa_answer.html
+++ b/gn2/wqflask/templates/gnqa_answer.html
@@ -126,8 +126,27 @@ outline: none;
 
         <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>{{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>
@@ -142,9 +161,6 @@ outline: none;
 
 
           {% else %}
-
-
-
           
         <div class="panel-heading" role="tab" id="heading{{reference.doc_id}}">
                  <h4 class="panel-title">
@@ -158,9 +174,34 @@ outline: none;
 
 
     <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 %}
+   
+
         
-            <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>
@@ -202,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()
@@ -255,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
new file mode 100644
index 00000000..f1bb05cb
--- /dev/null
+++ b/gn2/wqflask/templates/pubmed_modal.html
@@ -0,0 +1,78 @@
+
+<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" >
+    <div class="modal-content">
+      <div class="modal-header">
+        
+        <div style='line-height:2.6rem;line-height: 1.4;font-weight: 700;font-family: "Merriweather","Georgia","Cambria","Times New Roman","Times",serif;'>
+            
+        <h2 class="modal-title" id="pubmedModalLabel-{{reference.doc_id}}" style="font-weight: bold">{{reference.pubmed[0].get('title')}}</h2>
+        </div>
+         
+
+
+        <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>
+
+      </div>
+            <div class="modal-body">
+         <h3 style="font-weight:bold"> 
+            Abstract 
+         </h3>
+   <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 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 on Pubmed</a>
+     </div>
+    </div>
+  </div>
+</div>
+</div>
+
+
+
+
+