correct a bit the tab code and hashes

- jump to active hash if none defined
- readable hashes (remove the v-pills part)


Former-commit-id: 8ce1a2cbe377942ef4f7cf2e87c398c98add6c7a

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 %}