compound_card.html 15.4 KB
Newer Older
1
2
3
4
5
6
7
{% extends "base.html" %}

    
{% block title %}compound detail{% endblock %}

{% block content %}
{% include "kekule_display.html" %}
8
9

<div class="container-fluid">
10
11
12
<div class="row flex-xl-nowrap">
    <h1 class="page-title">Compound {{ compound.id }}</h1>
</div>
13
<div class="row flex-xl-nowrap">
14
    <div class="col-3">
15
16
17
18
19
        <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>
20
        </div>
21
22
23
24
25
        <div class="card text-center">
          <div class="card-body">
          {% include "pubchem_img.html" %}
          </div>
        </div>
26
27
    </div>
    <div class="col-9">
28
29
        <div class="tab-content" id="tabContent">
          <div class="tab-pane fade show active" id="compound" role="tabpanel" aria-labelledby="compound-tab">
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
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
            <div class="card">
               <div class="card-body">
               <ul class="list-group">
                   <li class="list-group-item">Common name: {{ compound.common_name }}</li>
                   <li class="list-group-item">Canonical SMILES: {{ compound.canonical_smile }}</li>
                   <li class="list-group-item">IUPAC name: {{ compound.iupac_name }}</li>
                   <li class="list-group-item">Aromatic ratio: {{ compound.aromatic_ratio }}</li>
                   <li class="list-group-item">Balaban index: {{ compound.balaban_index }}</li>
                   <li class="list-group-item">Fsp3: {{ compound.fsp3 }}</li>
                   <li class="list-group-item">GC molar refractivity: {{ compound.gc_molar_refractivity }}</li>
                   <li class="list-group-item" title="Partition coefficient octanol-1/water, with pKa information">LogD: {{ compound.log_d }}</li>
                   <li class="list-group-item" title="Partition coefficient octanol-1/water">ALogP: {{ compound.a_log_p }}</li>
                   <li class="list-group-item" title="computed with VdW radii">Mean atom volume: {{ compound.mean_atom_vol_vdw }}</li>
                   <li class="list-group-item">Molecular weight: {{ compound.molecular_weight }}</li>
                   <li class="list-group-item">Number of hydrogen bond acceptors: {{ compound.nb_acceptor_h }}</li>
                   <li class="list-group-item">Number of aliphatics amines: {{ compound.nb_aliphatic_amines }}</li>
                   <li class="list-group-item">Number of aromatic bonds: {{ compound.nb_aromatic_bonds }}</li>
                   <li class="list-group-item">Number of aromatic ethers: {{ compound.nb_aromatic_ether }}</li>
                   <li class="list-group-item" title="Smallest Set of System Rings">Number of aromatic SSSRs: {{ compound.nb_aromatic_sssr }}</li>
                   <li class="list-group-item">Number of atoms: {{ compound.nb_atom }}</li>
                   <li class="list-group-item">Number of non hydrogen atoms: {{ compound.nb_atom_non_h }}</li>
                   <li class="list-group-item">Number of benzene-like rings: {{ compound.nb_benzene_like_rings }}</li>
                   <li class="list-group-item">Number of bonds: {{ compound.nb_bonds }}</li>
                   <li class="list-group-item">Number of bonds not involving a hydrogen: {{ compound.nb_bonds_non_h }}</li>
                   <li class="list-group-item">Number of Bromine atoms: {{ compound.nb_br }}</li>
                   <li class="list-group-item">Number of Carbon atoms: {{ compound.nb_c }}</li>
                   <li class="list-group-item">Number of chiral centers: {{ compound.nb_chiral_centers }}</li>
                   <li class="list-group-item">Number of circuits: {{ compound.nb_circuits }}</li>
                   <li class="list-group-item">Number of Chlorine atoms: {{ compound.nb_cl }}</li>
                   <li class="list-group-item">Number of sp2-hybridized carbon atoms: {{ compound.nb_csp2 }}</li>
                   <li class="list-group-item">Number of sp3-hybridized carbon atoms: {{ compound.nb_csp3 }}</li>
                   <li class="list-group-item">Number of hydrogen bond donors: {{ compound.nb_donor_h }}</li>
                   <li class="list-group-item">Number of double bonds: {{ compound.nb_double_bonds }}</li>
                   <li class="list-group-item">Number of Fluorine atoms: {{ compound.nb_f }}</li>
                   <li class="list-group-item">Number of Iodine atoms: {{ compound.nb_i }}</li>
                   <li class="list-group-item">Number of multiple bonds: {{ compound.nb_multiple_bonds }}</li>
                   <li class="list-group-item">Number of Nitrogen atoms: {{ compound.nb_n }}</li>
                   <li class="list-group-item">Number of Oxygen atoms: {{ compound.nb_o }}</li>
                   <li class="list-group-item">Number of rings: {{ compound.nb_rings }}</li>
                   <li class="list-group-item">Number of rotatable bonds: {{ compound.nb_rotatable_bonds }}</li>
                   <li class="list-group-item">Randic index: {{ compound.randic_index }}</li>
                   <li class="list-group-item" title="radial distribution function weighted by the atomic masses at 7Å">RDF070m: {{ compound.rdf070m }}</li>
                   <li class="list-group-item">Fraction of rotatable bonds: {{ compound.rotatable_bond_fraction }}</li>
                   <li class="list-group-item">Sum of atomic polarizabilities: {{ compound.sum_atom_polar }}</li>
                   <li class="list-group-item">Sum of atom volumes computed with VdW radii: {{ compound.sum_atom_vol_vdw }}</li>
                   <li class="list-group-item" title="Topological Polar Surface Area">TPSA: {{ compound.tpsa }}</li>
                   <li class="list-group-item">Unsaturation index: {{ compound.ui }}</li>
                   <li class="list-group-item">Wiener index: {{ compound.wiener_index }}</li>
               </ul>
               {% include "compound_db_links.html" %}
               </div>
            </div>
          </div>
83
          <div class="tab-pane fade" id="physicochemistry" role="tabpanel" aria-labelledby="physicochemistry-tab">
84
            <div class="row">
85
86
87
88
            <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">
89
90
91
92
93
94
95
96
97
98
99
              <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>
100
101
102
                  <td class="{% if compound.lipinsky_global %}table-success{% else %}table-danger{% endif %}" title="at least 3 criteria ok"></td>
                  <td class="{% if compound.veber_global %}table-success{% else %}table-danger{% endif %}" title="RB and HBA+HBD or TPSA ok"></td>
                  <td class="{% if compound.pfizer_global %}table-success{% else %}table-danger{% endif %}" title="AlogP and TPSA ok"></td>
103
104
105
                </tr>
                <tr>
                  <th scope="row">MW</th>
106
107
108
                  <td class="text-right {% if compound.lipinsky_mw %}table-success{% else %}table-danger{% endif %}" title="Molecular weight <= 500g/mol">{{ compound.molecular_weight }}g/mol</td>
                  <td class="table-light"></td>
                  <td class="table-light"></td>
109
110
111
                </tr>
                <tr>
                  <th scope="row">HBA</th>
112
113
114
                  <td class="text-right {% if compound.lipinsky_hba %}table-success{% else %}table-danger{% endif %}" title="HBA <= 10">{{ compound.nb_acceptor_h  }}</td>
                  <td class="table-light"></td>
                  <td class="table-light"></td>
115
116
117
                </tr>
                <tr>
                  <th scope="row">HBD</th>
118
119
120
                  <td class="text-right {% if compound.lipinsky_hbd %}table-success{% else %}table-danger{% endif %}" title="HBD <= 5">{{ compound.nb_donor_h  }}</td>
                  <td class="table-light"></td>
                  <td class="table-light"></td>
121
122
123
                </tr>
                <tr>
                  <th scope="row">HBA + HBD</th>
124
125
126
                  <td class="table-light"></td>
                  <td class="text-right {% if compound.veber_hba_hbd %}table-success{% else %}table-danger{% endif %}" title="HBD + HBA <= 12">{{ compound.hba_hbd }}</td>
                  <td class="table-light"></td>
127
128
129
                </tr>
                <tr>
                  <th scope="row">AlogP</th>
130
131
132
                  <td class="text-right {% if compound.lipinsky_a_log_p %}table-success{% else %}table-danger{% endif %}" title="AlogP <= 5">{{ compound.a_log_p  }}</td>
                  <td class="table-light"></td>
                  <td class="text-right {% if compound.pfizer_a_log_p %}table-success{% else %}table-danger{% endif %}" title="AlogP <= 3">{{ compound.a_log_p  }}</td>
133
134
135
                </tr>
                <tr>
                  <th scope="row">TPSA</th>
136
137
138
                  <td class="table-light"></td>
                  <td class="text-right {% if compound.veber_tpsa %}table-success{% else %}table-danger{% endif %}" title="TPSA <= 140">{{ compound.tpsa  }}</td>
                  <td class="text-right {% if compound.pfizer_tpsa %}table-success{% else %}table-danger{% endif %}" title="TPSA <= 75">{{ compound.tpsa  }}</td>
139
140
141
                </tr>
                <tr>
                  <th scope="row">RB</th>
142
143
144
                  <td class="table-light"></td>
                  <td class="text-right {% if compound.veber_rb %}table-success{% else %}table-danger{% endif %}" title="RB <= 10">{{ compound.nb_rotatable_bonds }}</td>
                  <td class="table-light"></td>
145
146
147
148
                </tr>
              </tbody>
            </table>
            </div>
149
150
151
152
153
          </div>
            <div class="card col-sm-12 col-md-6">
              <h5 class="card-header">Radar chart</h5>
              <div class="card-body">

154
155
              <canvas id="radar"></canvas>
              <script>
156
              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 }});          
157
158
              </script>
            </div>
159
160
            </div>
            </div>
161
          </div>
162
          <div class="tab-pane fade" id="pharmacology" role="tabpanel" aria-labelledby="pharmacology-tab">
163
             <div class="card col-sm-12 col-md-12">
164
165
166
167
              <h5 class="card-header">Efficiencies: iPPI-DB biplot LE versus LLE</h5>
              <div class="card-body">
              <canvas id="le_lle_biplot"></canvas>
              <script>
168
                drawLeLleBiplotChart('le_lle_biplot', {{ compound.id }}, '{{ compound.best_pXC50_activity_ppi_family|default_if_none:"No target family identified" }}', {{ biplot_data | safe }}, 'pharmacology');
169
170
171
              </script>
            </div>
            </div>
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
            <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>
                          <th class="col-sm-1" scope="col">Target</th>
                          <th class="col-sm-1" scope="col">Competition</th>
198
199
200
201
                          <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>
202
203
204
205
206
                          <th class="col-sm-1" scope="col">Activity</th>
                        </tr>
                      </thead>
                      <tbody>
                        {% for car in compound.compoundactivityresult_set.all %}
207
                        <tr {% if car.is_best %}class="table-primary"{% endif %}>
208
                          <td>{% include "biblio_simplelink.html" with bibliography=car.test_activity_description.biblio %}</td>
209
210
                          <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>
211
212
                          <td>{{ car.test_activity_description.get_test_type_display }}</td>
                          <td>{{ car.test_activity_description.test_name }}</td>
213
                          <td>{{ car.test_activity_description.cell_line.name }}</td>
214
215
216
217
218
219
220
221
222
                          <td>{{ car.get_activity_type_display }}</td>
                          <td>{{ car.activity|floatformat:2 }}</td>
                        </tr>
                        {% endfor %}
                      </tbody>
                    </table> 
              </div>
            </div>
              
223
          </div>
224
          <div class="tab-pane fade" id="drugsimilarity" role="tabpanel" aria-labelledby="drugsimilarity-tab">
225
226
227
228
229
          </div>
        </div>
    </div>
	</div>
</div>
230
<script>
231
232
233
234
235
236
237
    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);
    });
238
239
    $(document).ready(function(){
      var tabHash = document.location.hash;
240
241
242
      if($(tabHash).length==0){
        tabHash = $('.nav-link.active').attr('href');
        showTab(tabHash);
243
244
245
246
      }
      $('[href="'+tabHash+'"]').tab('show');
    });
</script>
247
{% endblock %}