diff --git a/ippisite/ippidb/templates/compound_card.html b/ippisite/ippidb/templates/compound_card.html index 600478448175c2668edb7c66f8cce9575da8a4bd..38e825fa662f0805fb3d66e704425f87bf415789 100644 --- a/ippisite/ippidb/templates/compound_card.html +++ b/ippisite/ippidb/templates/compound_card.html @@ -12,11 +12,11 @@ </div> <div class="row flex-xl-nowrap"> <div class="col-3"> - <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist"> - <a class="nav-link active" id="v-pills-compound-tab" data-toggle="pill" href="#v-pills-compound" role="tab" aria-controls="v-pills-compound" aria-expanded="true">Compound</a> - <a class="nav-link" id="v-pills-physicochemistry-tab" data-toggle="pill" href="#v-pills-physicochemistry" role="tab" aria-controls="v-pills-physicochemistry" aria-expanded="true">Physicochemistry</a> - <a class="nav-link" id="v-pills-pharmacology-tab" data-toggle="pill" href="#v-pills-pharmacology" role="tab" aria-controls="v-pills-pharmacology" aria-expanded="true">Pharmacology</a> - <a class="nav-link" id="v-pills-drugsimilarity-tab" data-toggle="pill" href="#v-pills-drugsimilarity" role="tab" aria-controls="v-pills-drugsimilarity" aria-expanded="true">Drug similarity</a> + <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> </div> <div class="card text-center"> <div class="card-body"> @@ -25,8 +25,8 @@ </div> </div> <div class="col-9"> - <div class="tab-content" id="v-pills-tabContent"> - <div class="tab-pane fade show active" id="v-pills-compound" role="tabpanel" aria-labelledby="v-pills-compound-tab"> + <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"> <ul class="list-group"> @@ -80,7 +80,7 @@ </div> </div> </div> - <div class="tab-pane fade" id="v-pills-physicochemistry" role="tabpanel" aria-labelledby="v-pills-physicochemistry-tab"> + <div class="tab-pane fade" id="physicochemistry" role="tabpanel" aria-labelledby="physicochemistry-tab"> <div class="row"> <div class="card col-sm-12 col-md-6"> <h5 class="card-header">Physicochemical filters</h5> @@ -159,13 +159,13 @@ </div> </div> </div> - <div class="tab-pane fade" id="v-pills-pharmacology" role="tabpanel" aria-labelledby="v-pills-pharmacology-tab"> + <div class="tab-pane fade" id="pharmacology" role="tabpanel" aria-labelledby="pharmacology-tab"> <div class="card col-sm-12 col-md-12"> <h5 class="card-header">Efficiencies: iPPI-DB biplot LE versus LLE</h5> <div class="card-body"> <canvas id="le_lle_biplot"></canvas> <script> - drawLeLleBiplotChart('le_lle_biplot', {{ compound.id }}, '{{ compound.best_pXC50_activity_ppi_name|default_if_none:"No target family identified" }}', {{ biplot_data | safe }}, 'v-pills-pharmacology'); + drawLeLleBiplotChart('le_lle_biplot', {{ compound.id }}, '{{ compound.best_pXC50_activity_ppi_name|default_if_none:"No target family identified" }}', {{ biplot_data | safe }}, 'pharmacology'); </script> </div> </div> @@ -221,23 +221,27 @@ </div> </div> - <div class="tab-pane fade" id="v-pills-drugsimilarity" role="tabpanel" aria-labelledby="v-pills-drugsimilarity-tab"> + <div class="tab-pane fade" id="drugsimilarity" role="tabpanel" aria-labelledby="drugsimilarity-tab"> </div> </div> </div> </div> </div> <script> + 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); + }); $(document).ready(function(){ var tabHash = document.location.hash; - if(!$(tabHash)){ - tabHash = '#' + $('.nav-link.active')[0].attr('id'); + if($(tabHash).length==0){ + tabHash = $('.nav-link.active').attr('href'); + showTab(tabHash); } $('[href="'+tabHash+'"]').tab('show'); }); - $('a.nav-link').on('shown.bs.tab', function (e) { - window.location.hash = e.target.hash; - window.scrollTo(0, 0); - }); </script> {% endblock %}