hyperlink-based tab navigation for the compound card, first draft

Former-commit-id: 6e2693ace25440b4b5d051bbcc45a8c40446883e

ippisite/ippidb/templates/base.html

@@ -93,7 +93,7 @@
                                         data: radarChartData,
                                         options: { scaleLineWidth : 1, pointLabelFontFamily : "'Helvetica Neue'", pointLabelFontSize : 12, scaleOverride : true, scaleSteps : 5, scaleStepWidth : 0.2}});
             };
-            var drawLeLleBiplotChart = function(canvasId, compoundId, compoundFamily, plotData){
+            var drawLeLleBiplotChart = function(canvasId, compoundId, compoundFamily, plotData, tabHash){
                 var currentCompoundData = [];
                 var currentFamilyData = [];
                 var otherFamiliesData = [];
@@ -150,7 +150,7 @@
                     var datasetIndex = activePoints[0]._datasetIndex;
                     var selectedIndex = activePoints[0]._index;
                     var id = scatterChart.data.datasets[datasetIndex].data[selectedIndex].id;
-                    window.location = '/compound/'+id;
+                    window.location = '/compound/' + id + '#' + tabHash;
                 };
             }; 
         </script>

ippisite/ippidb/templates/compound_card.html

@@ -153,8 +153,7 @@
 
               <canvas id="radar"></canvas>
               <script>
-              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 }});             
-                        
+              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 }});          
               </script>
             </div>
             </div>
@@ -166,7 +165,7 @@
               <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 }})
+                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');
               </script>
             </div>
             </div>
@@ -228,4 +227,17 @@
     </div>
 	</div>
 </div>
+<script>
+    $(document).ready(function(){
+      var tabHash = document.location.hash;
+      if(!$(tabHash)){
+        tabHash = '#' + $('.nav-link.active')[0].attr('id');
+      }
+      $('[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 %}