compound_card.html 14.2 KB
Newer Older
1
{% extends "base.html" %}
2
{% load customtags %}
3
4
5
6
    
{% block title %}compound detail{% endblock %}

{% block content %}
Hervé  MENAGER's avatar
Hervé MENAGER committed
7
8
9
<div class="inner-wrap">
    <nav class="breadcrumb breadNav" role="navigation">
        <div class="breadNav-label">You are here</div>
10
11
        <div aria-labelledby="breadNav-label">
          {% block breadcrumb %} <a href="/compounds/" class="breadNav-link">Query compounds</a> > Compound {{ compound.id }}{% endblock %}
Hervé  MENAGER's avatar
Hervé MENAGER committed
12
13
        </div>
    </nav>
14
15
  </div>
  
16
<div class="container-fluid">
17
<div class="row flex-xl-nowrap {% if compound.is_validated is False %}bg-warning{% endif %}">
18
    <h1 class="page-title">Compound {{ compound.id }}</h1>
19
20
21
    {% 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 %}
22
</div>
23
<div class="row flex-xl-nowrap">
24
    <div class="col-3">
25
26
27
28
29
        <div class="nav flex-column nav-pills" id="tab" role="tablist">
          <a class="nav-link active" id="compound-tab" data-toggle="pill" href="#compound" role="tab" aria-controls="compound" aria-expanded="true">Compound</a>
          <a class="nav-link" id="physicochemistry-tab" data-toggle="pill" href="#physicochemistry" role="tab" aria-controls="physicochemistry" aria-expanded="true">Physicochemistry</a>
          <a class="nav-link" id="pharmacology-tab" data-toggle="pill" href="#pharmacology" role="tab" aria-controls="pharmacology" aria-expanded="true">Pharmacology</a>
          <a class="nav-link" id="drugsimilarity-tab" data-toggle="pill" href="#drugsimilarity" role="tab" aria-controls="drugsimilarity" aria-expanded="true">Drug similarity</a>
30
        </div>
31
32
        <div class="card text-center">
          <div class="card-body">
33
            {% include "compound_smiles_draw.html" with id=compound.id smile=compound.canonical_smile %}
34
35
          </div>
        </div>
36
37
    </div>
    <div class="col-9">
38
39
        <div class="tab-content" id="tabContent">
          <div class="tab-pane fade show active" id="compound" role="tabpanel" aria-labelledby="compound-tab">
40
41
            <div class="card">
               <div class="card-body">
42
43
                {% include "compound_l_item.html" with compound=compound show_detail=True %}
              </div>
44
45
            </div>
          </div>
46
          <div class="tab-pane fade" id="physicochemistry" role="tabpanel" aria-labelledby="physicochemistry-tab">
47
            <div class="row">
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
              <div class="card col-sm-12 col-md-6">
                <h5 class="card-header">Physicochemical filters</h5>
                <div class="card-body">
                  <table class="table table-sm col-sm-12 col-md-6">
                    <thead>
                      <tr>
                        <th class="col-sm-3" scope="col">Descriptor</th>
                        <th class="col-sm-3" scope="col">Lipinski's RO5</th>
                        <th class="col-sm-3" scope="col">Veber</th>
                        <th class="col-sm-3" scope="col">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>
69
70
71
72
73
74
75
                        <td class="text-right {% 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>
76
77
78
79
80
                        <td class="table-light"></td>
                        <td class="table-light"></td>
                      </tr>
                      <tr>
                        <th scope="row">HBA</th>
81
                        <td class="text-right {% status_class compound.lipinsky_hba %}" title="HBA <= 10">{{ compound.nb_acceptor_h | default_if_none:"not available" }}</td>
82
83
84
85
86
                        <td class="table-light"></td>
                        <td class="table-light"></td>
                      </tr>
                      <tr>
                        <th scope="row">HBD</th>
87
                        <td class="text-right {% status_class compound.lipinsky_hbd %}" title="HBD <= 5">{{ compound.nb_donor_h | default_if_none:"not available" }}</td>
88
89
90
91
92
93
                        <td class="table-light"></td>
                        <td class="table-light"></td>
                      </tr>
                      <tr>
                        <th scope="row">HBA + HBD</th>
                        <td class="table-light"></td>
94
                        <td class="text-right {% status_class compound.veber_hba_hbd %}" title="HBD + HBA <= 12">{{ compound.hba_hbd | default_if_none:"not available" }}</td>
95
96
97
98
                        <td class="table-light"></td>
                      </tr>
                      <tr>
                        <th scope="row">AlogP</th>
99
                        <td class="text-right {% status_class compound.lipinsky_a_log_p %}" title="AlogP <= 5">{{ compound.a_log_p  | default_if_none:"not available" }}</td>
100
                        <td class="table-light"></td>
101
                        <td class="text-right {% status_class compound.pfizer_a_log_p %}" title="AlogP <= 3">{{ compound.a_log_p  | default_if_none:"not available" }}</td>
102
103
104
105
                      </tr>
                      <tr>
                        <th scope="row">TPSA</th>
                        <td class="table-light"></td>
106
107
                        <td class="text-right {% status_class compound.veber_tpsa %}" title="TPSA <= 140">{{ compound.tpsa | default_if_none:"not available" }}</td>
                        <td class="text-right {% status_class compound.pfizer_tpsa %}" title="TPSA >= 75">{{ compound.tpsa | default_if_none:"not available" }}</td>
108
109
110
111
                      </tr>
                      <tr>
                        <th scope="row">RB</th>
                        <td class="table-light"></td>
112
                        <td class="text-right {% status_class compound.veber_rb %}" title="RB <= 10">{{ compound.nb_rotatable_bonds | default_if_none:"not available"}}</td>
113
114
115
116
117
                        <td class="table-light"></td>
                      </tr>
                    </tbody>
                  </table>
              </div>
118
            </div>
119
120
121
            <div class="card col-sm-12 col-md-6">
              <h5 class="card-header">Radar chart</h5>
              <div class="card-body">
122
              {% if compound.molecular_weight is not None %}
123
124
              <canvas id="radar"></canvas>
              <script>
125
              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 }});          
126
              </script>
127
128
129
              {% else %}
              <p class="text-secondary">Compound properties unavailable</p>
              {% endif %}
130
            </div>
131
132
            </div>
            </div>
133
          <div class="row">
134
135
136
137
            <div class="card col-sm-12 col-md-6">
              <h5 class="card-header">PCA : iPPI-DB chemical space</h5>
              <div class="card-body">

138
              <canvas id="pca_biplot" style="width:600px; height:600px;"></canvas>
139
              <script>
140
                drawCompoundsBiplotChart('pca_biplot', prepareCompoundFamilyBiplotData({{ compound.id }}, '{{ compound.best_activity_ppi_family_name|default_if_none:"No target family identified" }}', {{ pca_biplot_data | safe }}), 'physicochemistry');
141
              </script>
142
              </div>
143
            </div>
144
145
146
            <div class="card col-sm-12 col-md-6">
              <h5 class="card-header">PCA : Correlation circle</h5>
              <div class="card-body">
147
              <img src="data:image/png;base64,{{ pca_biplot_cc }}" style="width: 100%; height:auto"\>
148
              </div>
149
            </div>
150
          </div>
151
          </div>
152
          <div class="tab-pane fade" id="pharmacology" role="tabpanel" aria-labelledby="pharmacology-tab">
153
             <div class="card col-sm-12 col-md-12">
154
155
156
157
              <h5 class="card-header">Efficiencies: iPPI-DB biplot LE versus LLE</h5>
              <div class="card-body">
              <canvas id="le_lle_biplot"></canvas>
              <script>
158
                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');
159
160
161
              </script>
            </div>
            </div>
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
            <div class="card col-sm-12 col-md-12">
              <h5 class="card-header">Summary</h5>
              <div class="card-body row">
                <div class="col-md-4">
                    <h6>Bibliographic ressources</h6>
                    <p>{{ compound.biblio_refs.count }}</p>
                </div>
                <div class="col-md-4">
                    <h6>Biochemical tests</h6>
                    <p>{{ compound.bioch_tests_count }}</p>
                </div>
                <div class="col-md-4">
                    <h6>Cellular tests</h6>
                    <p>{{ compound.cell_tests_count }}</p>
                </div>
              </div>
            </div>
            <div class="card col-sm-12 col-md-12">
              <h5 class="card-header">Pharmacological data</h5>
              <div class="card-body">
                    <table class="table table-sm col-sm-12 col-md-6">
                      <thead>
                        <tr>
                          <th class="col-sm-1" scope="col">Bibliography</th>
186
                          <th scope="col" title="Compound name in publication">Name</th>
187
188
                          <th class="col-sm-1" scope="col">Target</th>
                          <th class="col-sm-1" scope="col">Competition</th>
189
190
191
192
                          <th class="col-sm-1" scope="col">Assay type</th>
                          <th class="col-sm-3" scope="col">Assay name</th>
                          <th class="col-sm-1" scope="col">Cell line</th>
                          <th class="col-sm-3" scope="col">Activity type</th>
193
194
195
196
197
                          <th class="col-sm-1" scope="col">Activity</th>
                        </tr>
                      </thead>
                      <tbody>
                        {% for car in compound.compoundactivityresult_set.all %}
198
                        <tr {% if car.is_best %}class="table-primary"{% endif %}>
199
                          <td>{% include "biblio_simplelink.html" with bibliography=car.test_activity_description.biblio %}</td>
200
201
202
203
204
                          {% for rcb in car.test_activity_description.biblio.refcompoundbiblio_set.all  %}
                            {% if rcb.compound == compound  %}
                              <td>{{ rcb.compound_name }}</td>
                            {% endif %}
                          {% endfor %}
205
206
                          <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>
207
208
                          <td>{{ car.test_activity_description.get_test_type_display }}</td>
                          <td>{{ car.test_activity_description.test_name }}</td>
209
                          <td>{{ car.test_activity_description.cell_line.name }}</td>
210
211
212
213
214
215
216
217
218
                          <td>{{ car.get_activity_type_display }}</td>
                          <td>{{ car.activity|floatformat:2 }}</td>
                        </tr>
                        {% endfor %}
                      </tbody>
                    </table> 
              </div>
            </div>
              
219
          </div>
220
          <div class="tab-pane fade" id="drugsimilarity" role="tabpanel" aria-labelledby="drugsimilarity-tab">
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
              <table class="table table-striped">
                  <thead>
                    <tr>
                      <th title="Tanimoto index">Ta</th>
                      <th>Structure</th>
                      <th>Name</th>
                      <th>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>
241
242
243
244
245
          </div>
        </div>
    </div>
	</div>
</div>
246
<script>
247
248
249
250
251
252
    var showTab = function(hash){
        window.location.hash = hash;
        window.scrollTo(0, 0);
    };
    $('a.nav-link').on('shown.bs.tab', function (e) {
        showTab(e.target.hash);
253
        drawSmiles();
254
    });
255
256
    $(document).ready(function(){
      var tabHash = document.location.hash;
257
258
259
      if($(tabHash).length==0){
        tabHash = $('.nav-link.active').attr('href');
        showTab(tabHash);
260
261
262
263
      }
      $('[href="'+tabHash+'"]').tab('show');
    });
</script>
264
{% endblock %}