compound_card.html 15.3 KB
Newer Older
1
{% extends "base.html" %}
2
{% load customtags %}
3

4
5
6
7
8
{% block extra_js %}
<script src="/static/chartjs/Chart.bundle.js"></script>
<script src="/static/js/ippidb-charts.js" type="text/javascript"></script>
{% endblock %}

9
10
11
{% block title %}compound detail{% endblock %}

{% block content %}
12
13
14
15
16
17
18
19
20
21
22
23
24
<div id="mainnav">
  <nav class="secondary-nav">
    <div class="inner-wrap nav flex-column nav-pills" style="display: inline;" id="tab" role="tablist">
      <a class="second_nav active" id="compound-tab" data-toggle="pill" href="#compound" role="tab"
        aria-controls="compound" aria-expanded="true">Compound</a>
      <a class="second_nav " id="physicochemistry-tab" data-toggle="pill" href="#physicochemistry" role="tab"
        aria-controls="physicochemistry" aria-expanded="true">Physicochemistry</a>
      <a class="second_nav " id="pharmacology-tab" data-toggle="pill" href="#pharmacology" role="tab"
        aria-controls="pharmacology" aria-expanded="true">Pharmacology</a>
      <a class="second_nav " id="drugsimilarity-tab" data-toggle="pill" href="#drugsimilarity" role="tab"
        aria-controls="drugsimilarity" aria-expanded="true">Drug similarity</a>
    </div>
  </nav>
25
</div>
26
27
28
29
30
31
<div class="inner-wrap">
  <nav class="breadcrumb breadNav" role="navigation">
    <div class="breadNav-label">You are here</div>
    <div aria-labelledby="breadNav-label">
      {% block breadcrumb %} <a href="/compounds/" class="breadNav-link">Query compounds</a> > Compound
      {{ compound.id }}{% endblock %}
32
    </div>
33
  </nav>
34
  <div class="container-fluid inner-wrap compound_header_title" id="compound_header_title">
35
    <div class="row {% if compound.is_validated is False %}bg_warning{% endif %}">
36
      {% include "compound_smiles_draw.html" with id=compound.id smile=compound.canonical_smile width=250 height=250%}
37
      <div style="display: flex;
38
      align-items: center;">
39
        {% if compound.is_validated is False %}
40
41
42
43
         <h1 class="page-title-warning" style="margin: 0;">Compound {{ compound.id }} - This compound has not been validated by a curator yet, data might be incomplete or
          inaccurate</h1>
          {% else %}
          <h1 class="page-title" style="margin: 0;">Compound {{ compound.id }}</h1>
44
45
        {% endif %}
      </div>
46
    </div>
47
48
49
50
  </div>
  <div class="top">

  </div>
51
  <div class="row" style="display: inline-block;height:auto; margin-right: 15px; margin-left: 15px;">
52
53
54
55
56
    <div class="tab-content" id="tabContent">
      <div class="tab-pane fade show active" id="compound" role="tabpanel" aria-labelledby="compound-tab">
        <div class="card">
          <div class="card-body">
            {% include "compound_l_item.html" with compound=compound show_detail=True %}
57
          </div>
58
        </div>
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
      </div>
      <div class="tab-pane fade" id="physicochemistry" role="tabpanel" aria-labelledby="physicochemistry-tab">
        <div class="row d-flex justify-content-center">
          <div class="col-sm-12 col-md-9" style="margin: 10px;">
            <h5 class="card_title">Physicochemical filters</h5>
            <div>
              <table class="table table-sm col-sm-12 col-md-6 card_border" style="text-align: center;">
                <thead>
                  <tr>
                    <th scope="col" class="card_title col_width"></th>
                    <th scope="col" class="card_title col_width">Descriptor</th>
                    <th scope="col" class="card_title col_width">Lipinski's RO5</th>
                    <th scope="col" class="card_title col_width">Veber</th>
                    <th scope="col" class="card_title col_width">Pfizer's 3/75</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <th scope="row">Compliance</th>
                    <td></td>
                    <td class="{% status_class compound.lipinsky %}" title="at least 3 criteria ok"></td>
                    <td class="{% status_class compound.veber %}" title="RB and HBA+HBD or TPSA ok"></td>
                    <td class="{% status_class compound.pfizer %}" title="AlogP and TPSA ok"></td>
                  </tr>
                  <tr>
                    <th scope="row">MW</th>
                    <td>{% if compound.molecular_weight is not None %}
                      {{ compound.molecular_weight }} g/mol
                      {% else %}
                      not available
                      {% endif %}</td>
                    <td class="text-center {% status_class compound.lipinsky_mw %}"
                      title="Molecular weight <= 500g/mol">
                      
                    </td>
                    <td class="table-light"></td>
                    <td class="table-light"></td>
                  </tr>
                  <tr>
                    <th scope="row">HBA</th>
                    <td>
                      {{ compound.nb_acceptor_h | default_if_none:"not available" }}</td>
                    <td class="text-center {% status_class compound.lipinsky_hba %}" title="HBA <= 10"></td>
                    <td class="table-light"></td>
                    <td class="table-light"></td>
                  </tr>
                  <tr>
                    <th scope="row">HBD</th>
                    <td>
                      {{ compound.nb_donor_h | default_if_none:"not available" }}</td>
                    <td class="text-center {% status_class compound.lipinsky_hbd %}" title="HBD <= 5"></td>
                    <td class="table-light"></td>
                    <td class="table-light"></td>
                  </tr>
                  <tr>
                    <th scope="row">HBA + HBD</th>
                    <td>{{ compound.hba_hbd | default_if_none:"not available" }}</td>
                    <td class="table-light"></td>
                    <td class="text-center {% status_class compound.veber_hba_hbd %}" title="HBD + HBA <= 12">
118
                      </td>
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
                    <td class="table-light"></td>
                  </tr>
                  <tr>
                    <th scope="row">AlogP</th>
                    <td>{{ compound.a_log_p  | default_if_none:"not available" }}</td>
                    <td class="text-center {% status_class compound.lipinsky_a_log_p %}" title="AlogP <= 5">
                      </td>
                    <td class="table-light"></td>
                    <td class="text-center {% status_class compound.pfizer_a_log_p %}" title="AlogP <= 3">
                    </td>
                  </tr>
                  <tr>
                    <th scope="row">TPSA</th>
                    <td>{{ compound.tpsa | default_if_none:"not available" }}</td>
                    <td class="table-light"></td>
                    <td class="text-center {% status_class compound.veber_tpsa %}" title="TPSA <= 140">
                      </td>
                    <td class="text-center default_if_none:" not available" }}</td> </tr> <tr>
                    <th scope="row">RB</th>
                    <td>{{ compound.nb_rotatable_bonds | default_if_none:"not available"}}</td>
                    <td class="table-light"></td>
                    <td class="text-center {% status_class compound.veber_rb %}" title="RB <= 10">
                      </td>
                    <td class="table-light"></td>
                  </tr>
                </tbody>
              </table>
146
            </div>
147
148
149
150
            <div class="col-sm-12 col-md-9" style="margin: 10px;">
              <h5 class="card_title">Radar chart</h5>
              <div class="card_border">
                {% if compound.molecular_weight is not None %}
151
                <canvas id="radar" data-radarh="500px" data-radarw="500px"></canvas>
152
                <script>
153
154
155
                  $('a.second_nav').on('shown.bs.tab', function (e) {
                    drawCompoundDescriptorRadarChart('radar', {{ compound.molecular_weight }}, {{ compound.a_log_p }}, {{ compound.nb_donor_h }}, {{ compound.nb_acceptor_h }}, {{ compound.tpsa }}, {{ compound.nb_rotatable_bonds }}, {{ compound.nb_benzene_like_rings }}, {{ compound.fsp3 }}, {{ compound.nb_chiral_centers }});          
                  });
156
157
158
159
160
                </script>
                {% else %}
                <p class="text-secondary">Compound properties unavailable</p>
                {% endif %}
              </div>
161
            </div>
162
          </div>
163
164
165
166
167
        </div>
        <div class="row d-flex justify-content-center">
          <div class="col-sm-12 col-md-9" style="margin: 10px;">
            <h5 class="card_title">PCA : iPPI-DB chemical space</h5>
            <div class="card_border">
168

169
170
171
172
              <canvas id="pca_biplot"></canvas>
              <script>
                drawCompoundsBiplotChart('pca_biplot', prepareCompoundFamilyBiplotData({{ compound.id }}, '{{ compound.best_activity_ppi_family_name|default_if_none:"No target family identified" }}', {{ pca_biplot_data | safe }}), 'physicochemistry');
              </script>
173
            </div>
174
175
176
177
178
          </div>
          <div class="col-sm-12 col-md-7" style="margin: 10px;">
            <h5 class="card_title">PCA : Correlation circle</h5>
            <div class="card_border">
              <img src="data:image/png;base64,{{ pca_biplot_cc }}" style="width: 100%; height:auto" \>
179
            </div>
180
          </div>
181
        </div>
182
183
184
185
186
187
188
189
190
191
      </div>
      <div class="tab-pane fade" id="pharmacology" role="tabpanel" aria-labelledby="pharmacology-tab">
        <div class="row d-flex justify-content-center">
          <div class="col-sm-12 col-md-9" style="margin: 10px;">
            <h5 class="card_title">Efficiencies: iPPI-DB biplot LE versus LLE</h5>
            <div class="card_border">
              <canvas id="le_lle_biplot"></canvas>
              <script>
                drawCompoundsBiplotChart('le_lle_biplot', prepareCompoundFamilyBiplotData({{ compound.id }}, '{{ compound.best_activity_ppi_family_name|default_if_none:"No target family identified" }}', {{ le_lle_biplot_data | safe }}), 'pharmacology');
              </script>
192
            </div>
193
          </div>
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
        </div>
        <div class="row d-flex justify-content-center">
          <div class="col-sm-12 col-md-9" style="margin: 10px;">
            <h5 class="card_title">Summary</h5>
            <div class="card_border row" style="text-align: center;">
              <div class="col-md-4">
                <h6 class="card_title">Bibliographic ressources</h6>
                <p>{{ compound.biblio_refs.count }}</p>
              </div>
              <div class="col-md-4">
                <h6 class="card_title">Biochemical tests</h6>
                <p>{{ compound.bioch_tests_count }}</p>
              </div>
              <div class="col-md-4">
                <h6 class="card_title">Cellular tests</h6>
                <p>{{ compound.cell_tests_count }}</p>
210
211
              </div>
            </div>
212
          </div>
213
        </div>
214
215
216
217
218
219
          <div class="row d-flex justify-content-center">
            <div class="col-sm-12 col-md-12" style="margin: 10px;">
              <h5 class="card_title">Pharmacological data</h5>
              <div class="card_border">
                <table class="table table-sm col-sm-12 col-md-12">
                  <thead style="text-align: center;">
220
                    <tr>
221
222
223
224
225
226
227
228
229
                      <th class="card_title" scope="col">Bibliography</th>
                      <th class="card_title" scope="col" title="Compound name in publication">Name</th>
                      <th class="card_title" scope="col">Target</th>
                      <th class="card_title" scope="col">Competition</th>
                      <th class="card_title" scope="col">Assay type</th>
                      <th class="card_title" scope="col">Assay name</th>
                      <th class="card_title" scope="col">Cell line</th>
                      <th class="card_title" scope="col">Activity type</th>
                      <th class="card_title" scope="col">Activity</th>
230
231
                    </tr>
                  </thead>
232
233
234
235
236
237
238
239
240
                  <tbody style="text-align: center;">
                    {% for car in compound.compoundactivityresult_set.all %}
                    <tr {% if car.is_best %}class="table-primary" {% endif %}>
                      <td>{% include "biblio_simplelink.html" with bibliography=car.test_activity_description.biblio %}
                      </td>
                      {% for rcb in car.test_activity_description.biblio.refcompoundbiblio_set.all  %}
                      {% if rcb.compound == compound  %}
                      <td>{{ rcb.compound_name }}</td>
                      {% endif %}
241
                      {% endfor %}
242
243
244
245
246
247
                      <td>{{ car.test_activity_description.protein_domain_bound_complex.name }} <br /><a
                          href="http://www.uniprot.org/uniprot/{{ car.test_activity_description.protein_domain_bound_complex.protein.uniprot_id }}"
                          target="_blank">{{ car.test_activity_description.protein_domain_bound_complex.protein.uniprot_id }}</a>
                      </td>
                      <td>{{ car.test_activity_description.protein_domain_partner_complex.name }} <br /><a
                          href="http://www.uniprot.org/uniprot/{{ car.test_activity_description.protein_domain_partner_complex.protein.uniprot_id }}"
248
                          target="_blank">{{ car.test_activity_description.protein_domain_partner_complex.protein.uniprot_id }}</a>
249
250
251
252
253
254
                      </td>
                      <td>{{ car.test_activity_description.get_test_type_display }}</td>
                      <td>{{ car.test_activity_description.test_name }}</td>
                      <td>{{ car.test_activity_description.cell_line.name }}</td>
                      <td>{{ car.get_activity_type_display }}</td>
                      <td>{{ car.activity|floatformat:2 }}</td>
255
                    </tr>
256
                  {% endfor %}
257
                </tbody>
258
              </table>
259
            </div>
260
          </div>
261
262
        </div>

263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
      </div>
      <div class="tab-pane fade" id="drugsimilarity" role="tabpanel" aria-labelledby="drugsimilarity-tab">
        <table class="table table-striped" style="border:1px solid #E3E3E3;">
          <thead>
            <tr>
              <th title="Tanimoto index" class="table_title">Ta</th>
              <th class="table_title">Structure</th>
              <th class="table_title">Name</th>
              <th class="table_title">Drugbank ID</th>
            </tr>
          </thead>
          <tbody>
            {% for dbct in compound.sorted_similar_drugbank_compounds %}
            <tr>
              <td>{{ dbct.tanimoto }}</td>
              <td>
                {% include "compound_smiles_draw.html" with id=dbct.drugbank_compound.id smile=dbct.drugbank_compound.canonical_smiles %}
              </td>
              <td>{{ dbct.drugbank_compound.common_name }}</td>
              <td><a target="_blank"
                  href="https://www.drugbank.ca/drugs/{{ dbct.drugbank_compound.id }}">{{ dbct.drugbank_compound.id }}</a>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
290
    </div>
291

292
  </div>
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
</div>
<script>
  var showTab = function (hash) {
    window.location.hash = hash;
    window.scrollTo(0, 0);
  };
  $('a.second_nav').on('shown.bs.tab', function (e) {
    showTab(e.target.hash);
    drawSmiles();
  });
  $(document).ready(function () {
    var tabHash = document.location.hash;
    if ($(tabHash).length == 0) {
      tabHash = $('.second_nav.active').attr('href');
      showTab(tabHash);
    }
    $('[href="' + tabHash + '"]').tab('show');
  });
</script>
{% endblock %}