1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
|
<section class="container-fluid answers gnqa-copy">
<div class="row container gnqa-answer" style="margin-bottom: 1em">
<p class="row lead">
<mark style="font-family: 'Linux Libertine','Georgia','Times','Source Serif Pro',serif;"><b><i>{{ query }}</i></b></mark><br/>
{{ answer|safe }}
</p>
<div class="rating row" data-doc-id="{{query}}">
<button class="btn" id="upvote" 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" id="downvote" data-toggle="tooltip" data-placement="top" title="Vote Down"><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>
<div class="panel-group" role="tablist" aria-multiselectable="true" style="margin-bottom:0;">
<div class="panel panel-default">
{% if loop.first %}
<div class="panel-heading active" role="tab" id="heading{{ reference.doc_id }}">
<h4 class="panel-title" style="font-family: 'Linux Libertine','Georgia','Times','Source Serif Pro',serif;">
<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}}">
{{ reference.bibInfo }}
</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">
<p class="node-references">{{ reference.comboTxt|safe }}</p>
<div>
{% if reference.pubmed %}
<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>
</div>
{% else %}
<div class="panel-heading" role="tab" id="heading{{reference.doc_id}}">
<h4 class="panel-title" style="font-family: 'Linux Libertine','Georgia','Times','Source Serif Pro',serif;">
<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}}">
{{ reference.bibInfo }}
</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|safe }}</p>
<div>
{% if reference.pubmed %}
<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 %}
</div>
</div>
</div>
{% endif %}
</div>
</div>
</li>
{% endfor %}
</ul>
{% else %}
<p><i>No references available.</i></p>
{% endif %}
</details>
</div>
</section>
{% block js %}
<script>
function updateRatingHandler(target, responseObj, args){
let {status, response} = responseObj.xhr
if (status==200 && args == "upvote"){
htmx.toggleClass(htmx.find('#upvote'), 'btn-success');
htmx.removeClass(htmx.find("#downvote"), "btn-danger");
}
else if(status == 200 && args == "downvote") {
htmx.toggleClass(htmx.find('#downvote'), 'btn-danger');
htmx.removeClass(htmx.find("#upvote"), "btn-success");
}
else {
alert(`Error occurred with status ${status} and Error ${response}` )
}}
var query = {{ query|tojson }};
var answer = {{ answer|tojson }}
var {task_id} = {{ task_id|tojson }}
htmx.on("#upvote", "click", function(evt){
vote_count = htmx.find(".btn-success") ? 0 : 1
htmx.ajax("POST", `/gnqna/rating/${task_id}/${vote_count}`, {target: "#rate", handler: (target,obj)=> updateRatingHandler(target,obj,"upvote"), swap:"innerHTML",values: {'query': query, 'answer': answer}})});
htmx.on("#downvote", "click", function(evt){
vote_count = htmx.find(".btn-danger") ? 0 : -1
htmx.ajax("POST", `/gnqna/rating/${task_id}/${vote_count}`, {target: "#rate",handler: (target,obj)=> updateRatingHandler(target,obj,"downvote") , swap:"innerHTML",values: {'query': query, 'answer': answer}})});
</script>
{% endblock %}
|
