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

    
{% 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
18
19
<div class="row flex-xl-nowrap">
    <h1 class="page-title">Compound {{ compound.id }}</h1>
</div>
20
<div class="row flex-xl-nowrap">
21
    <div class="col-3">
22
23
24
25
26
        <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>
27
        </div>
28
29
        <div class="card text-center">
          <div class="card-body">
30
            {% include "compound_smiles_draw.html" with id=compound.id smile=compound.canonical_smile %}
31
32
          </div>
        </div>
33
34
    </div>
    <div class="col-9">
35
36
        <div class="tab-content" id="tabContent">
          <div class="tab-pane fade show active" id="compound" role="tabpanel" aria-labelledby="compound-tab">
37
38
            <div class="card">
               <div class="card-body">
39
40
                {% include "compound_l_item.html" with compound=compound show_detail=True %}
              </div>
41
42
            </div>
          </div>
43
          <div class="tab-pane fade" id="physicochemistry" role="tabpanel" aria-labelledby="physicochemistry-tab">
44
            <div class="row">
45
46
47
48
            <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">
49
50
51
52
53
54
55
56
57
58
59
              <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>
60
61
62
                  <td class="{% if compound.lipinsky %}table-success{% else %}table-danger{% endif %}" title="at least 3 criteria ok"></td>
                  <td class="{% if compound.veber %}table-success{% else %}table-danger{% endif %}" title="RB and HBA+HBD or TPSA ok"></td>
                  <td class="{% if compound.pfizer %}table-success{% else %}table-danger{% endif %}" title="AlogP and TPSA ok"></td>
63
64
65
                </tr>
                <tr>
                  <th scope="row">MW</th>
66
67
68
                  <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>
69
70
71
                </tr>
                <tr>
                  <th scope="row">HBA</th>
72
73
74
                  <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>
75
76
77
                </tr>
                <tr>
                  <th scope="row">HBD</th>
78
79
80
                  <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>
81
82
83
                </tr>
                <tr>
                  <th scope="row">HBA + HBD</th>
84
85
86
                  <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>
87
88
89
                </tr>
                <tr>
                  <th scope="row">AlogP</th>
90
91
92
                  <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>
93
94
95
                </tr>
                <tr>
                  <th scope="row">TPSA</th>
96
97
                  <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>
98
                  <td class="text-right {% if compound.pfizer_tpsa %}table-success{% else %}table-danger{% endif %}" title="TPSA >= 75">{{ compound.tpsa  }}</td>
99
100
101
                </tr>
                <tr>
                  <th scope="row">RB</th>
102
103
104
                  <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>
105
106
107
108
                </tr>
              </tbody>
            </table>
            </div>
109
110
111
112
113
          </div>
            <div class="card col-sm-12 col-md-6">
              <h5 class="card-header">Radar chart</h5>
              <div class="card-body">

114
115
              <canvas id="radar"></canvas>
              <script>
116
              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 }});          
117
118
              </script>
            </div>
119
120
            </div>
            </div>
121
          <div class="row">
122
123
124
125
            <div class="card col-sm-12 col-md-6">
              <h5 class="card-header">PCA : iPPI-DB chemical space</h5>
              <div class="card-body">

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