compound_list.html 10.6 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
       {% include "multiselection_button.html" with label="PPI Family" param_name="family" %}
31
32
33
34
       {% include "multiselection_button.html" with label="PPI" param_name="ppi" %}
       {% include "multiselection_button.html" with label="Disease" param_name="disease" %}
       {% include "multiselection_button.html" with label="Organism" param_name="taxonomy" %}
       {% include "multiselection_button.html" with label="Bound complex" param_name="boundcomplex" %}
35
       {% include "slider_button.html" with label="Molecular weight" param_name="molecular_weight" %}
36
       {% include "slider_button.html" with label="AlogP" param_name="a_log_p" %}
37
       {% include "slider_button.html" with label="H donors" param_name="nb_donor_h" %}
38
       {% include "slider_button.html" with label="Publications" param_name="pubs" %}
39
       {% include "marvinjs_button.html" %}
40
        </div>
41
        <div class="m-2 d-flex ">
42
            <span>{{ paginator.count }} compounds</span>
43
            {% 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 pubs or similar_to %}
44
45
            <span>
                &nbsp;-&nbsp;filters:&nbsp;
46
47
                {% if selected_family %}
                    {% for selected in selected_family %}
48
49
50
                        {% include "selected_badge.html" with param_name="family" selected=selected %}
                    {% endfor %}
                {% endif %}
51
52
                {% if selected_ppi %}
                    {% for selected in selected_ppi %}
53
                        {% include "selected_badge.html" with param_name="ppi" selected=selected %}
54
55
                    {% endfor %}
                {% endif %}
56
57
                {% if selected_disease %}
                    {% for selected in selected_disease %}
58
                        {% include "selected_badge.html" with param_name="disease" selected=selected %}
59
60
                    {% endfor %}
                {% endif %}
61
62
                {% if selected_taxonomy %}
                    {% for selected in selected_taxonomy %}
63
                        {% include "selected_badge.html" with param_name="taxonomy" selected=selected %}
64
65
                    {% endfor %}
                {% endif %}
66
67
                {% if selected_boundcomplex %}
                    {% for selected in selected_boundcomplex %}
68
                        {% include "selected_badge.html" with param_name="boundcomplex" selected=selected %}
69
70
                    {% endfor %}
                {% endif %}
71
72
                {% 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" %}
73
                {% endif %}
74
75
                {% 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" %}
76
                {% endif %}
77
78
                {% 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" %}
79
                {% endif %}
80
81
                {% 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" %}
82
                {% endif %}
83
                {% if similar_to %}
84
                    {% include "similarity_badge.html" with param_name="similar_to" param_value=similar_to_query param_label="Similar to " %}
85
                {% endif %}
86
            </span>
87
            {% endif %}
88
89
90
91
92
93
94
95
96
            <div class="btn-group m-1 ml-auto">
                <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>
97
            </div>
98
99
100
101
102
103
104
105
106
107
108
            <span class="btn-group m-1">
                <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>
109
110
        </div>
    </form>
111
{% if page_obj %}
112
    <div class="container-fluid">
113
    {% if display == 'v' %}
114
        <div class="d-flex flex-wrap m-2 justify-content-around">
115
        {% for compound in page_obj %}
116
117
            {% include "compound_v_item.html" with compound=compound %}
        {% endfor %}
118
        </div>
119
    {% elif display == 'l'%}
120
        {% for compound in page_obj %}
121
            {% include "compound_l_item.html" with compound=compound %}
122
123
        {% endfor %}
    {% else %}
124
        {% include "compound_t_list.html" with compounds=page_obj %}
125
    {% endif %}
126
    </div>
Hervé  MENAGER's avatar
Hervé MENAGER committed
127
{% else %}
128
    <p>Nothing found there!</p>
Hervé  MENAGER's avatar
Hervé MENAGER committed
129
130
131
132
133
{% endif %}					
                    </main>
</div>
</div>

134
135
<nav class="d-flex">
  <ul class="pagination pagination-sm ml-auto">
136
    {% if page_obj.has_previous %}
Hervé  MENAGER's avatar
Hervé MENAGER committed
137
    <li class="page-item">
138
      <a class="page-link" href="?{% url_replace request 'page' page_obj.previous_page_number  %}" aria-label="Previous">
139
140
141
        <span aria-hidden="true">&laquo;</span>
        <span class="sr-only">Previous</span>
      </a>
Hervé  MENAGER's avatar
Hervé MENAGER committed
142
143
144
145
    </li>
    {% endif %}

    <li class="page-item disabled">
146
     <span class="page-link">Page {{ page_obj.number }} of {{ paginator.num_pages }}.</span>
Hervé  MENAGER's avatar
Hervé MENAGER committed
147
148
    </li>

149
    {% if page_obj.has_next %}
Hervé  MENAGER's avatar
Hervé MENAGER committed
150
    <li class="page-item">
151
      <a class="page-link" href="?{% url_replace request 'page' page_obj.next_page_number  %}" aria-label="Next">
152
153
154
        <span aria-hidden="true">&raquo;</span>
        <span class="sr-only">Next</span>
      </a>
Hervé  MENAGER's avatar
Hervé MENAGER committed
155
156
    </li>
    {% endif %}
157
158
159

    <li class="page-item ml-3">
      <div class="input-group input-group-sm">
160
        <input id="pageNumber" type="number" min="1" max="{{ paginator.num_pages }}" step="1" placeholder="page #" style="width: 4em;" aria-label="Page number">
161
162
163
164
165
166
        <div class="input-group-append">
          <button class="btn btn-outline-primary" type="button" onclick="modifyUrl('page',$('#pageNumber').val())">Go</button>
        </div>
      </div>
    </li>

Hervé  MENAGER's avatar
Hervé MENAGER committed
167
168
  </ul>
</nav>
169

170
171
172
173
174
  {% 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 %}
175
176
177
178
  {% 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'%}
  {% 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'%}
179
  {% include "marvinjs_modal.html" with smiles=similar_to_query fingerprint=similar_to_fingerprint %}
180

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