vh_detail.html 9.35 KB
Newer Older
1
2
3
{% extends "viralhostrangedb/base.html" %}
{%load sstatic%}
{%load i18n%}
Bryan  BRANCOTTE's avatar
Bryan BRANCOTTE committed
4
{%load crispy_forms_tags%}
5
6
7
8
{%load viralhostrange_tags%}

{% block title %}{{object|class_verbose_name}}{% endblock %}
{% block page_title %}
9
10
11
12
13
{{object|class_verbose_name}}
<span id="detailed_name">
    <span>{{object.name}}</span>{%if object.identifier%}<span class="identifier"> ({{object.identifier}}) </span>{%endif%}
</span>
{%if object.identifier%}
14
<small><a
15
16
target="_blank"
href="{{object.get_ncbi_link}}"
17
18
title="{% trans 'Open in the NCBI'%}">
<i class="fa fa-external-link"></i></a></small>
19
{%endif%}
20
21
{% endblock %}

22
{% block page_title_right %}
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<div>
    <div class="btn-group" role="group">
        <div class="btn-group" role="group">
            <a class="dropdown btn btn-outline-primary dropdown-toggle" href="#" role="button" id="dropdownMenuExport"
               data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="fa fa-share-alt"></i>
            </a>

            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuExport">
                <button class="dropdown-item" type="button"
                        onclick="$('#clipboard_input').val(window.location).show().select(); document.execCommand('copy');$('#clipboard_input').hide();return false;"
                >
                    <i class="fa fa-clipboard"></i>
                    <input type="text" value="Hello World" id="clipboard_input" style="display:none;"/>
                    {%trans "Copy link into clipboard" %}<!-- {%trans "(recommended)" %}-->
                </button>
39
40
41
42
43
44
                <button class="dropdown-item" type="button"
                        onclick="$('#form_filter').submit()"
                >
                    <i class="fa fa-download"></i>
                    {%trans "Download displayed data in a spreadsheet" %}
                </button>
45
46
47
48
49
50
                <button class="dropdown-item" type="button"
                   onclick="grid_host2png('file-name.png');"
                >
                    <i class="fa fa-image"></i>
                    {%trans "Download displayed data as a figure" %}
                </button>
51
52
            </div>
        </div>
53
54
55
56
    </div>
</div>
{% endblock %}

57
58
59
60
61
62
63
64
65
66
67
{% block extra_css %}
{{block.super}}
<link rel="stylesheet" href="{% sstatic '/css/browse.css' %}"/>
<link rel="stylesheet" href="{% url 'viralhostrangedb:custom_css' slug='0' %}" id="schema-0"/>
<link rel="stylesheet" href="{% url 'viralhostrangedb:custom_css' slug='1' %}" id="schema-1"/>
<link rel="stylesheet" href="{% url 'viralhostrangedb:custom_css' slug='2' %}" id="schema-2"/>
{% endblock %}

{% block extra_js %}
<script type="text/javascript">
var get_detail_api_url = "{{get_detail_api_url}}";
68
var get_detail_url = "{{get_detail_url}}";
69
70
71
var get_data_source_detail_api_url = "{% url 'viralhostrangedb:data-source-detail' pk='000000' %}";
var custom_css = "{% url 'viralhostrangedb:custom_css' slug="" %}";
var get_responses = "{% url 'viralhostrangedb-api:responses' %}?{{object|class_verbose_name|lower}}={{object.id}}";
72
var get_infection_ratios = "{% url 'viralhostrangedb-api:infection-ratio-detail' slug=object|class_verbose_name|lower slug_pk=object.id %}";
73
var row_pks=[{% for d in data_sources%}{%if not forloop.first%},{%endif%}{{d.pk}}{%endfor%}];
74
var get_virus_url = "{% url 'viralhostrangedb:virus-detail' pk='000000' %}";
75
76
77
78
79
80
81
{%if focus_is_on_first_level_of_data %}
var update_response = "{% url 'viralhostrangedb:response-update' ds_pk='000000' virus_pk=object.id host_pk='111111' %}";
var focus_is_on_first_level_of_data=true;
{%else%}
var update_response = "{% url 'viralhostrangedb:response-update' ds_pk='000000' virus_pk='111111' host_pk=object.id %}";
var focus_is_on_first_level_of_data=false;
{%endif%}
82
83
var in_row_kind="{{in_row_kind}}";
var detailed_kind="{{detailed_kind}}";
84
85
</script>
{{block.super}}
86
<script type="text/javascript" src="{% sstatic '/js/browse-sort.js' %}"></script>
87
<script type="text/javascript" src="{% sstatic '/js/virus_or_host_detail.js' %}"></script>
88
89
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.js"></script>
<script type="text/javascript" src="{% sstatic '/js/html2png.js' %}"></script>
90
91
92
{% endblock %}

{% block content%}
93
<form method="GET" id="form_filter" class="mb-4 col-12" action="{{download_url}}">{% csrf_token %}
94
95
96
97
98
99
    <div class="row">
        <div class="col-12 text-right">
            <a href="#advanced_holder" class="btn btn-outline-secondary btn-default float-left collapsed" data-toggle="collapse">
                <i class="fa fa-chevron-down collapse-indicator"></i>
                {% trans "Advanced options"%}<span class="counter"></span>
            </a>
Bryan  BRANCOTTE's avatar
Bryan BRANCOTTE committed
100
            <span class="border-secondary text-secondary btn-like float-left use-global-scheme">
101
                {%trans "Legend:" %} {%for response in schema%}
Bryan  BRANCOTTE's avatar
Bryan BRANCOTTE committed
102
                <span class="badge-legend schema-{{response.value|floatformat}}">{{response.value|floatformat}}: {{response.name}}</span>
103
104
                {%endfor%}
            </span>
105
106
        </div>
        <div class="col-12">
107
108
109
            <div class="collapse card mt-4" id="advanced_holder">
                <nav class="card-header">
                    <div class="nav nav-tabs card-header-tabs" id="nav-tab" role="tablist">
110
                        <a class="nav-item nav-link text-primary"
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
                           onclick="toggle_pin_advanced_holder()"
                           role="tab" aria-controls="nav-contact" aria-selected="false">
                            <i class="fa fa-unlock not-pinned"></i>
                            <i class="fa fa-lock pinned"></i>
                        </a>
                        {% for id_fam, fam in form.advanced_option_families.items %}
                        <a class="nav-item nav-link {% if id_fam == '1' %}active{%endif%}"
                           id="nav-advanced-option-fam-{{ id_fam }}"
                           data-toggle="tab"
                           href="#tab-advanced-option-fam-{{ id_fam }}"
                           role="tab" aria-controls="nav-contact" aria-selected="false">
                            {{fam}}<span class="counter"></span>
                        </a>
                        {%endfor%}
                    </div>
                </nav>
                <div class="tab-content pt-2 card-body" id="nav-tabContent">
                    {% for id_fam, fam in form.advanced_option_families.items %}
                    <div class="tab-pane card-body fade {% if id_fam == '1' %}show active{%endif%}"
                         id="tab-advanced-option-fam-{{ id_fam }}"
                         role="tabpanel"
                         aria-labelledby="nav-advanced-option-fam-{{ id_fam }}">
Bryan  BRANCOTTE's avatar
Bryan BRANCOTTE committed
133
134
                        <div class="row">
                            {% for field in form.visible_fields %}
Bryan  BRANCOTTE's avatar
Bryan BRANCOTTE committed
135
136
                            {% if field|get_in_widget:'data-advanced-option-family' == id_fam %}
                            <div class="col-12 col-xl-4 col-md-6 {{field|get_in_widget:'data-container-additional-class'}}">
Bryan  BRANCOTTE's avatar
Bryan BRANCOTTE committed
137
138
139
140
                                {{ field|as_crispy_field }}
                            </div>
                            {% endif%}
                            {% endfor %}
141
142
                        </div>
                    </div>
143
                    {%endfor%}
144
145
146
147
                </div>
            </div>
        </div>
    </div>
148
</form>
149
150
<div class="mb-4 col-12">
    <div id="grid_container" class="freeze-row-header-v3 freeze-col-header-v3">
151
        <table id="grid_host" class="grid_host table table-stretched">
152
153
            <thead>
            <tr>
154
                <th class="splitter splitter-lg">
155
                    <div>
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
                        <span class="bottom rows">{{in_row_kind}}
                            <button class="btn btn-xs sorter"
                                    style="display:none;"
                                    onclick="toggle_sort_rows()"
                                    title="{% trans 'Sort viruses on their infection ratio' %}"
                            >
                            <i class="fa fa-sort-amount-asc small asc" style="display:none;"></i>
                            <i class="fa fa-sort-amount-desc small desc"></i>
                            </button></span>
                        <span class="right cols">
                            <button class="btn btn-xs sorter"
                                    style="display:none;"
                                    onclick="toggle_sort_cols()"
                                    title="{% trans 'Sort hosts on their infection ratio' %}"
                            >
                            <i class="fa fa-sort-amount-asc small asc fa-rotate-270" style="display:none;"></i>
                            <i class="fa fa-sort-amount-desc small desc fa-rotate-270"></i>
                            </button>
                            {%trans "Data source"%}
                        </span>
176
177
                    </div>
                </th>
178
179
180
                {% for d in data_sources%}
                    <th data-col="{{d.pk}}">
                        <a target="_blank" href="{%url 'viralhostrangedb:data-source-detail' pk=d.pk %}">
181
                            <span>{{d.name}}</span>
182
                        </a>
183
                        <span class="ratio"></span>
184
185
                    </th>
                {% endfor%}
186
187
188
189
190
191
192
193
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</div>
{% endblock content%}