compound_card.html 15.5 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
35
36
37
38
39
40
41
42
43
  <div class="container-fluid inner-wrap compound_header_title" id="compound_header_title" style="width: 50%;">
    <div class="row" style="display: flex;">
      {% include "compound_smiles_draw.html" with id=compound.id smile=compound.canonical_smile %}
      <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
212
213
214
215
216
          <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;">
217
                    <tr>
218
219
220
221
222
223
224
225
226
                      <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>
227
228
                    </tr>
                  </thead>
229
230
231
232
233
234
235
236
237
                  <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 %}
238
                      {% endfor %}
239
240
241
242
243
244
                      <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 }}"
245
                          target="_blank">{{ car.test_activity_description.protein_domain_partner_complex.protein.uniprot_id }}</a>
246
247
248
249
250
251
                      </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>
Rachel TORCHET's avatar
Rachel TORCHET committed
252
                    </tr>              
253
                  {% endfor %}
Rachel TORCHET's avatar
Rachel TORCHET committed
254
                  </tbody>
255
              </table>
256
            </div>
257
          </div>
258
259
        </div>

260
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
      </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>
287
    </div>
288

289
  </div>
290
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
</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 %}