browse.html 9.23 KB
Newer Older
1
2
3
4
5
6
7
8
{% extends "viralhostrangedb/base.html" %}
{% load sstatic%}
{% load crispy_forms_tags %}
{% load static %}
{% load i18n %}
{% load viralhostrange_tags%}

{% block title %}{%trans "Browse"%}{% endblock %}
9
10
11
{% block page_title %}{%trans "Browse"%}{% endblock %}
{% block page_title_right %}
<div class="dropdown">
12
13
14
15
16
    <a class="btn btn-outline-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuExport"
       data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <i class="fa fa-share-alt"></i>
    </a>

17
    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuExport">
18
19
20
21
22
23
24
25
        <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>
        <button class="dropdown-item" type="button"
26
           onclick="trigger_download()"
27
28
29
30
        >
            <i class="fa fa-download"></i>
            {%trans "Download displayed data in a spreadsheet" %}
        </button>
31
32
33
34
35
36
        <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>
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!--        <a class="dropdown-item disabled"-->
<!--           href="{% url 'viralhostrangedb:download_responses' %}"-->
<!--        >-->
<!--            <i class="fa fa-file"></i>-->
<!--            {%trans "Download displayed data as a latex table" %}-->
<!--        </a>-->
<!--        <a class="dropdown-item disabled"-->
<!--           href="{% url 'viralhostrangedb:download_responses' %}"-->
<!--        >-->
<!--            <i class="fa fa-image"></i>-->
<!--            {%trans "Download displayed data as a figure" %}-->
<!--        </a>-->
    </div>
</div>
{% endblock %}
52
53
54
55
56
57
58
59

{% block extra_css %}
{{block.super}}
<link rel="stylesheet" href="{% sstatic '/css/browse.css' %}"/>
{% endblock %}

{% block extra_js %}
<script type="text/javascript">
60
var get_host_api_url = "{% url 'viralhostrangedb-api:host-detail' pk='000000' %}";
61
var get_virus_api_url = "{% url 'viralhostrangedb-api:virus-detail' pk='000000' %}";
62
var get_host_url = "{% url 'viralhostrangedb:host-detail' pk='000000' %}";
63
var get_virus_url = "{% url 'viralhostrangedb:virus-detail' pk='000000' %}";
64
65
var get_virus_list_api_url = "{% url 'viralhostrangedb-api:virus-list' %}";
var get_host_list_api_url = "{% url 'viralhostrangedb-api:host-list' %}";
66
67
var get_data_source_api_url = "{% url 'viralhostrangedb-api:datasource-detail' pk='000000' %}";
var data_source_detail = "{% url 'viralhostrangedb:data-source-detail' pk='000000' %}";
68
69
var infection_ratio_virus = "{% url 'viralhostrangedb-api:aggregated-infection-ratio-list' slug='virus' %}";
var infection_ratio_host = "{% url 'viralhostrangedb-api:aggregated-infection-ratio-list' slug='host' %}";
70
var custom_css = "{% url 'viralhostrangedb:custom_css' slug="" %}";
71
var get_responses = "{% url 'viralhostrangedb-api:responses' %}";
72
var update_response = "{% url 'viralhostrangedb:response-update' ds_pk='000000' virus_pk='111111' host_pk='222222' %}";
73
74
75
76
var mem={};
</script>
{{block.super}}
<script type="text/javascript" src="{% sstatic '/js/browse.js' %}"></script>
77
<script type="text/javascript" src="{% sstatic '/js/browse-sort.js' %}"></script>
78
79
<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>
80
81
82
{% endblock %}

{% block content %}
Bryan  BRANCOTTE's avatar
Bryan BRANCOTTE committed
83
<form method="GET" id="form_filter" action="{% url 'viralhostrangedb:download_responses'%}" data-action="{% url 'viralhostrangedb-api:aggregated-responses' %}" class="col-12 mb-4">{% csrf_token %}
84
    <div class="row">
85
        {% for field in form.visible_fields %}
86
        {% if not field|is_advanced_option %}
87
        <div class="col-12 col-md-4 col-sm-6">
88
            {{ field|as_crispy_field }}
89
        </div>
90
        {% endif%}
91
        {% endfor %}
92
    </div>
93
    <div class="row">
Bryan  BRANCOTTE's avatar
UI fix    
Bryan BRANCOTTE committed
94
        <div class="col-12 text-right">
95
96
            <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>
97
                {% trans "Advanced options"%}<span class="counter"></span>
98
            </a>
Bryan  BRANCOTTE's avatar
Bryan BRANCOTTE committed
99
            <span class="border-secondary text-secondary btn-like float-left use-global-scheme">
100
                {%trans "Legend:" %} {%for response in schema%}
Bryan  BRANCOTTE's avatar
Bryan BRANCOTTE committed
101
                <span class="badge-legend schema-{{response.value|floatformat}}">{{response.value|floatformat}}: {{response.name}}</span>
102
103
                {%endfor%}
            </span>
Bryan  BRANCOTTE's avatar
UI fix    
Bryan BRANCOTTE committed
104
105
106
            <i>*{%trans "relevant_explanation"%}</i>
        </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
                           onclick="toggle_pin_advanced_holder()"
                           role="tab" aria-controls="nav-contact"
                           aria-selected="false"
                           title="{% blocktrans %}advanced option lock pan title{% endblocktrans %} "
                        >
                            <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%}
128
                    </div>
129
130
131
132
133
134
135
136
137
                </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 }}">
                        <div class="row">
                            {% for field in form.visible_fields %}
Bryan  BRANCOTTE's avatar
Bryan BRANCOTTE committed
138
139
                            {% 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'}}">
140
141
142
143
                                {{ field|as_crispy_field }}
                            </div>
                            {% endif%}
                            {% endfor %}
144
145
                        </div>
                    </div>
146
                    {%endfor%}
147
148
                </div>
            </div>
149
150
        </div>
    </div>
151
</form>
152
<div class="col-12 mb-4">
153
    <div id="grid_container" class="freeze-row-header-v3 freeze-col-header-v3">
154
        <div id="grid_container_place_holder">{%trans "grid_container_place_holder_message"%}</div>
155
        <table id="grid_host" class="grid_host table table-stretched">
156
            <thead>
157
158
159
            <tr>
                <th class="splitter">
                    <div>
160
161
                        <span class="bottom virus rows">
                            {%trans "Virus"%}
162
                            <button class="btn btn-xs sorter"
163
164
                                    style="display:none;"
                                    onclick="toggle_sort_rows()"
165
166
167
168
                                    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>
169
170
                            </button></span>
                        <span class="right host cols">
171
                            <button class="btn btn-xs sorter"
172
173
                                    style="display:none;"
                                    onclick="toggle_sort_cols()"
174
175
176
177
178
                                    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>
179
180
                            {%trans "Host"%}
                        </span>
181
182
183
                    </div>
                </th>
            </tr>
184
185
186
187
188
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
189
190
</div>
{%endblock%}