compound_card.html 15.6 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" style="margin-bottom: 18px; border-radius: 3px; box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.2);">
35
    <div class="row" style="display: flex;">
36
      {% include "compound_smiles_draw.html" with id=compound.id smile=compound.canonical_smile width=150 height=150%}
37
38
39
40
41
42
43
      <div class="{% if compound.is_validated is False %}bg_warning{% endif %}" style="margin: auto;">
        <h1 class="page-title">Compound {{ compound.id }}</h1>
        {% if compound.is_validated is False %}
        <h3 class="ml-2">This compound has not been validated by a curator yet, data might be incomplete or
          inaccurate</h3>
        {% endif %}
      </div>
44
    </div>
45
46
47
48
49
50
51
52
53
54
  </div>
  <div class="top">

  </div>
  <div class="row" style="display: inline-block;height:auto;">
    <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 %}
55
          </div>
56
        </div>
57
58
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
      </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">
116
                      </td>
117
118
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
                    <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>
144
            </div>
145
146
147
148
            <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 %}
149
                <canvas id="radar" data-radarh="500px" data-radarw="500px"></canvas>
150
                <script>
151
152
153
                  $('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 }});          
                  });
154
155
156
157
158
                </script>
                {% else %}
                <p class="text-secondary">Compound properties unavailable</p>
                {% endif %}
              </div>
159
            </div>
160
          </div>
161
162
163
164
165
        </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">
166

167
168
169
170
              <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>
171
            </div>
172
173
174
175
176
          </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" \>
177
            </div>
178
          </div>
179
        </div>
180
181
182
183
184
185
186
187
188
189
      </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>
190
            </div>
191
          </div>
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
        </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>
208
209
              </div>
            </div>
210
          </div>
211
        </div>
212
213
214
215
216
217
          <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;">
218
                    <tr>
219
220
221
222
223
224
225
226
227
                      <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>
228
229
                    </tr>
                  </thead>
230
231
232
233
234
235
236
237
238
                  <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 %}
239
                      {% endfor %}
240
241
242
243
244
245
                      <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 }}"
246
                          target="_blank">{{ car.test_activity_description.protein_domain_partner_complex.protein.uniprot_id }}</a>
247
248
249
250
251
252
                      </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>
253
                    </tr>
254
                  {% endfor %}
255
                </tbody>
256
              </table>
257
            </div>
258
          </div>
259
260
        </div>

261
262
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
      </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>
288
    </div>
289

290
  </div>
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
</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>
<script>
  $("#compound_header_title").on("scroll", function (e) {
    console.log("scroll");
    if (this.scrollTop > 300) {

      $("#compound_header_title").addClass("fix-compound_2D");
    } else {
      $("#compound_header_title").removeClass("fix-compound_2D");
    }

  });
</script>
{% endblock %}