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

4
5
6
{% block title %}compound detail{% endblock %}

{% block content %}
7
8
9
10
11
12
13
14
15
16
17
18
19
<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>
20
</div>
21
22
23
24
25
26
<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 %}
27
    </div>
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
  </nav>
  <div class="container-fluid inner-wrap">
    <div class="row flex-xl-nowrap {% if compound.is_validated is False %}bg-warning{% endif %}">
      <h1 class="page-title">Compound {{ compound.id }}</h1>
      {% if compound.is_validated is False %}
      <h3 class="ml-2 font-italic">This compound has not been validated by a curator yet, data might be incomplete or
        inaccurate</h3>
      {% endif %}
    </div>
    <div class="row">
      <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 %}
43
44
            </div>
          </div>
45
46
47
48
49
50
51
52
53
54
55
56
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
116
117
118
119
120
121
122
        </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">
                  <thead>
                    <tr>
                      <th scope="col" class="card_title">Descriptor</th>
                      <th scope="col" class="card_title">Lipinski's RO5</th>
                      <th scope="col" class="card_title">Veber</th>
                      <th scope="col" class="card_title">Pfizer's 3/75</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <th scope="row">Global</th>
                      <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 class="text-center {% status_class compound.lipinsky_mw %}"
                        title="Molecular weight <= 500g/mol">
                        {% if compound.molecular_weight is not None %}
                        {{ compound.molecular_weight }} g/mol
                        {% else %}
                        not available
                        {% endif %}
                      </td>
                      <td class="table-light"></td>
                      <td class="table-light"></td>
                    </tr>
                    <tr>
                      <th scope="row">HBA</th>
                      <td class="text-center {% status_class compound.lipinsky_hba %}" title="HBA <= 10">
                        {{ compound.nb_acceptor_h | default_if_none:"not available" }}</td>
                      <td class="table-light"></td>
                      <td class="table-light"></td>
                    </tr>
                    <tr>
                      <th scope="row">HBD</th>
                      <td class="text-center {% status_class compound.lipinsky_hbd %}" title="HBD <= 5">
                        {{ compound.nb_donor_h | default_if_none:"not available" }}</td>
                      <td class="table-light"></td>
                      <td class="table-light"></td>
                    </tr>
                    <tr>
                      <th scope="row">HBA + HBD</th>
                      <td class="table-light"></td>
                      <td class="text-center {% status_class compound.veber_hba_hbd %}" title="HBD + HBA <= 12">
                        {{ compound.hba_hbd | default_if_none:"not available" }}</td>
                      <td class="table-light"></td>
                    </tr>
                    <tr>
                      <th scope="row">AlogP</th>
                      <td class="text-center {% status_class compound.lipinsky_a_log_p %}" title="AlogP <= 5">
                        {{ compound.a_log_p  | default_if_none:"not available" }}</td>
                      <td class="table-light"></td>
                      <td class="text-center {% status_class compound.pfizer_a_log_p %}" title="AlogP <= 3">
                        {{ compound.a_log_p  | default_if_none:"not available" }}</td>
                    </tr>
                    <tr>
                      <th scope="row">TPSA</th>
                      <td class="table-light"></td>
                      <td class="text-center {% status_class compound.veber_tpsa %}" title="TPSA <= 140">
                        {{ compound.tpsa | default_if_none:"not available" }}</td>
                      <td class="text-center default_if_none:" not available" }}</td> </tr> <tr>
                      <th scope="row">RB</th>
                      <td class="table-light"></td>
                      <td class="text-center {% status_class compound.veber_rb %}" title="RB <= 10">
                        {{ compound.nb_rotatable_bonds | default_if_none:"not available"}}</td>
                      <td class="table-light"></td>
                    </tr>
                  </tbody>
                </table>
123
              </div>
124
            </div>
125
126
127
128
129
130
131
132
133
134
135
136
            <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 %}
                <canvas id="radar"></canvas>
                <script>
                  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 }});          
                </script>
                {% else %}
                <p class="text-secondary">Compound properties unavailable</p>
                {% endif %}
              </div>
137
            </div>
138
139
140
141
142
          </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">
143

144
145
146
147
                <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>
148
              </div>
149
            </div>
150
151
152
153
            <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" \>
154
              </div>
155
            </div>
156
          </div>
157
158
159
160
161
162
163
164
165
166
167
        </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>
              </div>
168
            </div>
169
170
171
172
173
          </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;">
174
                <div class="col-md-4">
175
176
                  <h6 class="card_title">Bibliographic ressources</h6>
                  <p>{{ compound.biblio_refs.count }}</p>
177
178
                </div>
                <div class="col-md-4">
179
180
                  <h6 class="card_title">Biochemical tests</h6>
                  <p>{{ compound.bioch_tests_count }}</p>
181
182
                </div>
                <div class="col-md-4">
183
184
                  <h6 class="card_title">Cellular tests</h6>
                  <p>{{ compound.cell_tests_count }}</p>
185
186
187
                </div>
              </div>
            </div>
188
          </div>
189
190
191
192
193
194
          <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;">
195
                    <tr>
196
197
198
199
200
201
202
203
204
                      <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>
205
206
                    </tr>
                  </thead>
207
208
209
210
211
212
213
214
215
                  <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 %}
216
                      {% endfor %}
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
                      <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 }}"
                          target="_blank">{{ car.test_activity_description.protein_domain_bound_complex.protein.uniprot_id }}</a>
                      </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>
                    </tr>
                    {% endfor %}
232
                  </tbody>
233
234
235
                </table>
              </div>
            </div>
236
          </div>
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263

        </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>
264
        </div>
265
266
      </div>

267
    </div>
268
269
270
271
272
  </div>
  <script>
    var showTab = function (hash) {
      window.location.hash = hash;
      window.scrollTo(0, 0);
273
    };
274
275
276
    $('a.second_nav').on('shown.bs.tab', function (e) {
      showTab(e.target.hash);
      drawSmiles();
277
    });
278
    $(document).ready(function () {
279
      var tabHash = document.location.hash;
280
281
282
283
      console.log("tab:", tabHash);
      if ($(tabHash).length == 0) {
        tabHash = $('.second_nav.active').attr('href');
        console.log("tab:", tabHash);
284
        showTab(tabHash);
285
      }
286
      $('[href="' + tabHash + '"]').tab('show');
287
    });
288
289
  </script>
  {% endblock %}