compound_list.html 20.8 KB
Newer Older
Hervé  MENAGER's avatar
Hervé MENAGER committed
1
{% extends "base.html" %}
2
{% load customtags %}
Hervé  MENAGER's avatar
Hervé MENAGER committed
3
    
4
{% block title %}compounds list{% endblock %}
Hervé  MENAGER's avatar
Hervé MENAGER committed
5

6
7
8
9
{% block extra_js %}
<script src="/static/marvinjs-18/js/util.js"></script>
<script src="/static/marvinjs-18/js/marvinjslauncher.js"></script>
<script src="/static/marvinjs-18/gui/lib/promise-1.0.0.min.js"></script>
10
11
<script src="/static/js/ippidb-compoundws.js"></script>
<script src="/static/js/ippidb-marvinjsmodal.js"></script>
12
13
{% endblock %}

Hervé  MENAGER's avatar
Hervé MENAGER committed
14
{% block content %}
15
<div class="inner-wrap">
Rachel TORCHET's avatar
Rachel TORCHET committed
16
17
    <nav class="breadcrumb breadNav" role="navigation">
        <div class="breadNav-label">You are here</div>
18
        <div aria-labelledby="breadcrumb-label">
19
            {% block breadcrumb %} <a href="/compounds/" class="breadNav-link"> > Query compounds</a>{% endblock %} 
20
21
22
        </div>
    </nav>
</div>
Hervé  MENAGER's avatar
Hervé MENAGER committed
23
24
25

<div class="container-fluid">
<div class="row flex-xl-nowrap">
26

27
<main class="col-12" role="main">
28
29
    <form class="container-fluid">
        <div class="m-2 d-flex justify-content-between">
30
31
            <span class="border border-primary rounded p-1 m-1">
                <div class="dropdown btn-group" style="display: inline-flex;">
32
                    <i class="icon icon-common icon-search mr-2 ml-1" style="font-size: 1.75rem; vertical-align: middle" title="Text search"></i>                                
33
                    <input id="q" value="{{ q | default_if_none:"" }}" class="form-control" type="search" placeholder="Type search text here" onchange="modifyUrl('q',$('#q').val());">
34
35
36
37
38
39
40
41
42
                </div>            
            </span>
            <span class="border border-primary rounded p-1 m-1">
                <i class="icon icon-conceptual icon-chemical" style="font-size: 1.75rem; vertical-align: middle" title="Compound filters"></i>
                <div class="dropdown btn-group">
                    <button class="btn btn-primary dropdown-toggle" type="button" id="pcpropMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Physico-Chemical properties
                    </button>
                    <div class="dropdown-menu" aria-labelledby="pcpropMenuButton">
43
                        {% include "modal_open_button.html" with label="H donors" param_name="nb_donor_h" %}
44
45
                        {% include "modal_open_button.html" with label="H acceptors" param_name="nb_acceptor_h" %}
                        {% include "modal_open_button.html" with label="TPSA" param_name="tpsa" %}
46
                        {% include "modal_open_button.html" with label="Nb rotatable bonds" param_name="nb_rotatable_bonds" %}
47
48
                        {% include "modal_open_button.html" with label="Molecular weight" param_name="molecular_weight" %}        
                        {% include "modal_open_button.html" with label="AlogP" param_name="a_log_p" %}
49
50
                        {% include "modal_open_button.html" with label="Nb aromatic SSSR" param_name="nb_aromatic_sssr" %}
                        {% include "modal_open_button.html" with label="Nb chiral centers" param_name="nb_chiral_centers" %}
51
                        {% include "modal_open_button.html" with label="Fsp3" param_name="fsp3" %}
52
53
54
55
56
57
58
59
60
61
62
63
64
65
                    </div>
                </div>
                <div class="dropdown btn-group" style="display: inline-flex;">
                    <button class="btn btn-primary dropdown-toggle" type="button" id="crMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Chemistry Rules
                    </button>
                    <div class="dropdown-menu" aria-labelledby="crMenuButton">
                    </div>
                </div>
                <div class="dropdown btn-group" style="display: inline-flex;">
                    <button class="btn btn-primary dropdown-toggle" type="button" id="aeMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Activity and Efficiencies
                    </button>
                    <div class="dropdown-menu" aria-labelledby="aeMenuButton">
66
67
68
                        {% include "modal_open_button.html" with label="Best Activity" param_name="best_activity" %}
                        {% include "modal_open_button.html" with label="LE" param_name="le" %}
                        {% include "modal_open_button.html" with label="LLE" param_name="lle" %}
69
70
71
72
73
74
75
76
77
78
                    </div>
                </div>
                <div class="dropdown btn-group" style="display: inline-flex;">
                    <button class="btn btn-primary dropdown-toggle" type="button" id="mmoaMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Molecular Mechanism of Action
                    </button>
                    <div class="dropdown-menu" aria-labelledby="mmoaMenuButton">
                    </div>
                </div>
                <div class="dropdown btn-group" style="display: inline-flex;">
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
                    <button class="btn btn-primary dropdown-toggle" type="button" id="elMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        External Links
                    </button>
                    <div class="dropdown-menu" aria-labelledby="elMenuButton">
                        <label class="dropdown-item" onclick="toggleCheckBox('pubchem_id')">
                            <input type="checkbox" id="pubchem_id" {% if pubchem_id %}checked{% endif %}/> in PubChem
                        </label>
                        <label class="dropdown-item" onclick="toggleCheckBox('chembl_id')">
                            <input type="checkbox" id="chembl_id"  {% if chembl_id %}checked{% endif %}/> in ChEMBL
                        </label>
                        <label class="dropdown-item" onclick="toggleCheckBox('chemspider_id')">
                            <input type="checkbox" id="chemspider_id" {% if chemspider_id %}checked{% endif %}/> in ChemSpider
                        </label>                                            
                    </div>
                </div>            
        <span class="border border-primary rounded p-1 m-1">
95
96
97
98
99
100
                <i class="icon icon-conceptual icon-structures-3d"  style="font-size: 1.75rem; vertical-align: middle" title="PPI target filters"></i>
                <div class="dropdown btn-group" style="display: inline-flex;">
                        <button class="btn btn-primary dropdown-toggle" type="button" id="ptfMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            PPI target filters
                        </button>
                        <div class="dropdown-menu" aria-labelledby="ptfMenuButton">
101
102
103
104
105
106
                            {% include "modal_open_button.html" with label="Bound complex" param_name="boundcomplex" %}
                            {% include "modal_open_button.html" with label="PPI Family" param_name="family" %}
                            {% include "modal_open_button.html" with label="Organism" param_name="taxonomy" %}
                            {% include "modal_open_button.html" with label="Disease" param_name="disease" %}
                            {% include "modal_open_button.html" with label="PPI" param_name="ppi" %}
                            {% include "modal_open_button.html" with label="Chemical similarity" param_name="marvin"  %}
107
108
109
110
111
112
113
114
115
116
117
                        </div>
                    </div>            
            </span>

            <span class="border border-primary rounded p-1 m-1">
                    <i class="icon icon-common icon-flask" style="font-size: 1.75rem; vertical-align: middle" title="Affinity assay filters"></i>
                    <div class="dropdown btn-group" style="display: inline-flex;">
                            <button class="btn btn-primary dropdown-toggle" type="button" id="aaMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Affinity assays
                            </button>
                            <div class="dropdown-menu" aria-labelledby="aaMenuButton">
118
                                    {% include "modal_open_button.html" with label="Publications" param_name="pubs" %}
119
120
121
122
123
                            </div>
                        </div>            
            </span>
    

124
        </div>
125
126

        <div class="m-2 d-flex justify-content-between">
127
            <span>{{ paginator.count }} compounds</span>
128
            {% if selected_family or selected_ppi or selected_disease or selected_taxonomy or selected_boundcomplex or molecular_weight or a_log_p or nb_donor_h or nb_acceptor_h or tpsa or nb_rotatable_bonds or nb_aromatic_sssr or nb_chiral_centers or fsp3 or pubs or similar_to or best_activity or le or lle %}
129
130
            <span>
                &nbsp;-&nbsp;filters:&nbsp;
131
132
                {% if selected_family %}
                    {% for selected in selected_family %}
133
134
135
                        {% include "selected_badge.html" with param_name="family" selected=selected %}
                    {% endfor %}
                {% endif %}
136
137
                {% if selected_ppi %}
                    {% for selected in selected_ppi %}
138
                        {% include "selected_badge.html" with param_name="ppi" selected=selected %}
139
140
                    {% endfor %}
                {% endif %}
141
142
                {% if selected_disease %}
                    {% for selected in selected_disease %}
143
                        {% include "selected_badge.html" with param_name="disease" selected=selected %}
144
145
                    {% endfor %}
                {% endif %}
146
147
                {% if selected_taxonomy %}
                    {% for selected in selected_taxonomy %}
148
                        {% include "selected_badge.html" with param_name="taxonomy" selected=selected %}
149
150
                    {% endfor %}
                {% endif %}
151
152
                {% if selected_boundcomplex %}
                    {% for selected in selected_boundcomplex %}
153
                        {% include "selected_badge.html" with param_name="boundcomplex" selected=selected %}
154
155
                    {% endfor %}
                {% endif %}
156
157
                {% if molecular_weight %}
                    {% include "slider_badge.html" with param_name="molecular_weight" param_value_min=molecular_weight_value_min param_value_max=molecular_weight_value_max param_label="MW cutoff" %}
158
                {% endif %}
159
160
                {% if a_log_p %}
                    {% include "slider_badge.html" with param_name="a_log_p" param_value_min=a_log_p_value_min param_value_max=a_log_p_value_max param_label="AlogP cutoff" %}
161
                {% endif %}
162
163
                {% if nb_donor_h %}
                    {% include "slider_badge.html" with param_name="nb_donor_h" param_value_min=nb_donor_h_value_min param_value_max=nb_donor_h_value_max param_label="H donors" %}
164
                {% endif %}
165
166
167
168
169
170
                {% if nb_acceptor_h %}
                    {% include "slider_badge.html" with param_name="nb_acceptor_h" param_value_min=nb_acceptor_h_value_min param_value_max=nb_acceptor_h_value_max param_label="H acceptors" %}
                {% endif %}
                {% if tpsa %}
                    {% include "slider_badge.html" with param_name="tpsa" param_value_min=tpsa_value_min param_value_max=tpsa_value_max param_label="TPSA" %}
                {% endif %}
171
172
                {% if nb_aromatic_sssr %}
                    {% include "slider_badge.html" with param_name="nb_aromatic_sssr" param_value_min=nb_aromatic_sssr_value_min param_value_max=nb_aromatic_sssr_value_max param_label="Nb aromatic SSSR" %}
173
                {% endif %}
174
175
176
                {% if nb_chiral_centers %}
                    {% include "slider_badge.html" with param_name="nb_chiral_centers" param_value_min=nb_chiral_centers_value_min param_value_max=nb_chiral_centers_value_max param_label="Nb chiral centers" %}
                {% endif %}
177
178
179
                {% if fsp3 %}
                    {% include "slider_badge.html" with param_name="fsp3" param_value_min=fsp3_value_min param_value_max=fsp3_value_max param_label="Fsp3" %}
                {% endif %}
180
181
                {% if pubs %}
                    {% include "slider_badge.html" with param_name="pubs" param_value_min=pubs_value_min param_value_max=pubs_value_max param_label="Publications" %}
182
                {% endif %}
183
                {% if similar_to %}
184
                    {% include "similarity_badge.html" with param_name="similar_to" param_value=similar_to_query param_label="Similar to " %}
185
                {% endif %}
186
187
                {% if best_activity %}
                    {% include "slider_badge.html" with param_name="best_activity" param_value_min=best_activity_value_min param_value_max=best_activity_value_max param_label="Best Act." %}
188
                {% endif %}
189
190
                {% if le %}
                    {% include "slider_badge.html" with param_name="le" param_value_min=le_value_min param_value_max=le_value_max param_label="LE" %}
191
                {% endif %}
192
193
                {% if lle %}
                    {% include "slider_badge.html" with param_name="lle" param_value_min=lle_value_min param_value_max=lle_value_max param_label="LLE" %}
194
                {% endif %}
195
            </span>
196
            {% endif %}
197
198
199
200
            <div class="m-1 ml-auto">
                {% include "compound_list_pagination.html" %}
            </div>
            <div class="btn-group btn-group-sm ml-1">
201
202
203
204
205
206
207
208
                <button class="btn btn-secondary dropdown-toggle" type="button" id="sortMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <i class="fas fa-sort-amount-down" title="sort by"></i>
                </button>
                <div class="dropdown-menu" aria-labelledby="sortMenuButto">
                    {% for sort_by_value, sort_by_entry in sort_by_options.items %}
                            <a class="dropdown-item {% if sort_by_value == sort_by %}active{% endif %}" href="#" onclick="modifyUrl('sort_by','{{ sort_by_value }}')">{{ sort_by_entry.name }} ({{ sort_by_entry.order }})</a>
                    {% endfor %}
                </div>
209
            </div>
210
            <span class="btn-group btn-group-sm ml-1 pb-0">
211
212
213
214
215
216
217
218
219
220
                <a class="btn btn-default btn-outline-primary {% if display == 'v' %}active{% endif %}" href="#" {% if display != 'v' %}onclick="modifyUrl('display', 'v')"{% endif %}>
                    <i class="fa fa-th" title="Thumbnails"></i>
                </a>
                <a class="btn btn-default btn-outline-primary {% if display == 'l' %}active{% endif %}" href="#" {% if display != 'l' %}onclick="modifyUrl('display', 'l')"{% endif %}>
                    <i class="fa fa-bars" title="List"></i>
                </a>
                <a class="btn btn-default btn-outline-primary {% if display == 't' %}active{% endif %}" href="#" {% if display != 't' %}onclick="modifyUrl('display', 't')"{% endif %}>
                    <i class="fa fa-table" title="Table"></i>
                </a>
            </span>
221
222
        </div>
    </form>
223
{% if page_obj %}
224
    <div class="container-fluid">
225
    {% if display == 'v' %}
226
        <div class="d-flex flex-wrap m-2 justify-content-between">
227
        {% for compound in page_obj %}
228
229
            {% include "compound_v_item.html" with compound=compound %}
        {% endfor %}
230
        </div>
231
    {% elif display == 'l'%}
232
        {% for compound in page_obj %}
233
            {% include "compound_l_item.html" with compound=compound %}
234
235
        {% endfor %}
    {% else %}
236
        {% include "compound_t_list.html" with compounds=page_obj %}
237
    {% endif %}
238
    </div>
Hervé  MENAGER's avatar
Hervé MENAGER committed
239
{% else %}
240
    <p>Nothing found there!</p>
Hervé  MENAGER's avatar
Hervé MENAGER committed
241
242
243
244
245
{% endif %}					
                    </main>
</div>
</div>

246
  {% include "compound_list_pagination.html" %}
247

248
249
250
251
252
  {% include "multiselection_modal.html" with label="PPI Family" selected_list=selected_family unselected_list=family param_name="family" all_param_name="family_all" all_param_value=family_all %}
  {% include "multiselection_modal.html" with label="PPI" selected_list=selected_ppi unselected_list=ppi param_name="ppi" all_param_name="ppi_all" all_param_value=ppi_all %}
  {% include "multiselection_modal.html" with label="Disease" selected_list=selected_disease unselected_list=disease param_name="disease" all_param_name="disease_all" all_param_value=disease_all %}
  {% include "multiselection_modal.html" with label="Organism" selected_list=selected_taxonomy unselected_list=taxonomy param_name="taxonomy" all_param_name="taxonomy_all" all_param_value=taxonomy_all %}
  {% include "multiselection_modal.html" with label="Bound complex" selected_list=selected_boundcomplex unselected_list=boundcomplex param_name="boundcomplex" all_param_name="boundcomplex_all" all_param_value=boundcomplex_all %}
253
254
255
  {% include "slider_modal.html" with label="Molecular Weight" param_name="molecular_weight" param_min=molecular_weight_min param_max=molecular_weight_max param_value=molecular_weight param_value_min=molecular_weight_value_min param_value_max=molecular_weight_value_max step='50' param_label='Select a cutoff value for the molecular weight of the compounds to be selected'%}
  {% include "slider_modal.html" with label="AlogP" param_name="a_log_p" param_min=a_log_p_min param_max=a_log_p_max param_value=a_log_p param_value_min=a_log_p_value_min param_value_max=a_log_p_value_max step='1' param_label='Select a cutoff value for the AlogP of the compounds to be selected'%}
  {% include "slider_modal.html" with label="H donors" param_name="nb_donor_h" param_min=nb_donor_h_min param_max=nb_donor_h_max param_value=nb_donor_h param_value_min=nb_donor_h_value_min param_value_max=nb_donor_h_value_max step='1' param_label='Select a cutoff value for the number of H donors in the compounds to be selected'%}
256
  {% include "slider_modal.html" with label="H acceptors" param_name="nb_acceptor_h" param_min=nb_acceptor_h_min param_max=nb_acceptor_h_max param_value=nb_acceptor_h param_value_min=nb_acceptor_h_value_min param_value_max=nb_acceptor_h_value_max step='1' param_label='Select a cutoff value for the number of H acceptors in the compounds to be selected'%}
257
  {% include "slider_modal.html" with label="TPSA" param_name="tpsa" param_min=tpsa_min param_max=tpsa_max param_value=tpsa param_value_min=tpsa_value_min param_value_max=tpsa_value_max step='50' param_label='Select a cutoff value for the TPSA of the compounds to be selected'%}
258
  {% include "slider_modal.html" with label="Nb rotatable bonds" param_name="nb_rotatable_bonds" param_min=nb_rotatable_bonds_min param_max=nb_rotatable_bonds_max param_value=nb_rotatable_bonds param_value_min=nb_rotatable_bonds_value_min param_value_max=nb_rotatable_bonds_value_max step='1' param_label='Select a cutoff value for the number of rotatable bounds in the compounds to be selected'%}
259
260
  {% include "slider_modal.html" with label="Nb aromatic SSSR" param_name="nb_aromatic_sssr" param_min=nb_aromatic_sssr_min param_max=nb_aromatic_sssr_max param_value=nb_aromatic_sssr param_value_min=nb_aromatic_sssr_value_min param_value_max=nb_aromatic_sssr_value_max step='1' param_label='Select a cutoff value for the number of aromatic SSSR in the compounds to be selected'%}
  {% include "slider_modal.html" with label="Nb chiral centers" param_name="nb_chiral_centers" param_min=nb_chiral_centers_min param_max=nb_chiral_centers_max param_value=nb_chiral_centers param_value_min=nb_chiral_centers_value_min param_value_max=nb_chiral_centers_value_max step='1' param_label='Select a cutoff value for the number of chiral centers in the compounds to be selected'%}
261
  {% include "slider_modal.html" with label="FSP3" param_name="fsp3" param_min=fsp3_min param_max=fsp3_max param_value=fsp3 param_value_min=fsp3_value_min param_value_max=fsp3_value_max step='0.1' param_label='Select a cutoff value for the FSP3 of the compounds to be selected'%}
262
  {% include "slider_modal.html" with label="Publications" param_name="pubs" param_min=pubs_min param_max=pubs_max param_value=pubs param_value_min=pubs_value_min param_value_max=pubs_value_max  step='1' param_label='Select a cutoff value for the number of publications mentioning the compounds to be selected'%}
263
  {% include "marvinjs_modal.html" with smiles=similar_to_query fingerprint=similar_to_fingerprint %}
264
265
266
  {% include "slider_modal.html" with label="Best Activiry" param_name="best_activity" param_min=best_activity_min param_max=best_activity_max param_value=best_activity param_value_min=best_activity_value_min param_value_max=best_activity_value_max step='1' param_label='Select a cutoff value for the best activity of the compounds to be selected'%}
  {% include "slider_modal.html" with label="LE" param_name="le" param_min=le_min param_max=le_max param_value=le param_value_min=le_value_min param_value_max=le_value_max step='0.1' param_label='Select a cutoff value for the LE of the compounds to be selected'%}
  {% include "slider_modal.html" with label="LLE" param_name="lle" param_min=lle_min param_max=lle_max param_value=lle param_value_min=lle_value_min param_value_max=lle_value_max step='1' param_label='Select a cutoff value for the LLE of the compounds to be selected'%}
267

Hervé  MENAGER's avatar
Hervé MENAGER committed
268
{% endblock %}