add radar chart for compound descriptors to the compound page

Former-commit-id: 96b10e7bcfd6bf7bae944b6daaff470f465ef4b6

ippisite/ippidb/templates/base.html

@@ -13,6 +13,7 @@
         <script src="/static/bootstrap/js/bootstrap.min.js"></script>
         <script src="/static/typeahead/typeahead.bundle.min.js"></script>
         <script defer src="/static/font-awesome/js/fontawesome-all.min.js"></script>
+        <script src="/static/chartjs/Chart.bundle.js"></script>
 
         <script src="/static/js/ippidb.js" type="text/javascript"></script>
 
@@ -63,6 +64,35 @@
                 });
                 $('#'+idSearch).on('typeahead:select', onSelect);
             };
+            var drawCompoundDescriptorRadarChart = function(canvasId, mw, alogP, hbd, hba, tpsa, rb, ar, fsp3, rs){
+               var radarChartData = {
+                   "labels":["MW","ALogP","HBD","HBA","TPSA","RB","Ar","Fsp3","R/S"],
+                   "datasets":[
+                       {"label":"Descriptor's threshold",
+                        "data":[500/1200,(5+3)/15,5/15,10/15,140/250,10/20,4/10,1-(0.4/1),1-(1/10)],
+                        "fill":true,
+                        "backgroundColor":"rgba(54, 162, 235, 0.2)",
+                        "borderColor":"rgb(54, 162, 235)",
+                        "pointBackgroundColor":"rgb(54, 162, 235)",
+                        "pointBorderColor":"#fff",
+                        "pointHoverBackgroundColor":"#fff",
+                        "pointHoverBorderColor":"rgb(54, 162, 235)"},
+                       {"label":"Descriptor's value for the compound",
+                        "data":[mw/1200,(alogP+3)/15,hbd/15,hba/15,tpsa/250,rb/20,ar/10,1-(fsp3/1),1-(rs/10)],
+                        "fill":true,
+                        "backgroundColor":"rgba(255, 99, 132, 0.2)",
+                        "borderColor":"rgb(255, 99, 132)",
+                        "pointBackgroundColor":"rgb(255, 99, 132)",
+                        "pointBorderColor":"#fff",
+                        "pointHoverBackgroundColor":"#fff",
+                        "pointHoverBorderColor":"rgb(255, 99, 132)"}],
+                   "options":{"elements":{"line":{"tension":0,"borderWidth":3}}}
+               };
+               var myRadar = new Chart(document.getElementById(canvasId).getContext("2d"),
+                                       {type: 'radar',
+                                        data: radarChartData,
+                                        options: { scaleLineWidth : 1, pointLabelFontFamily : "'Helvetica Neue'", pointLabelFontSize : 12, scaleOverride : true, scaleSteps : 5, scaleStepWidth : 0.2}});
+            }; 
         </script>
 
     </head>

ippisite/ippidb/templates/compound_card.html

@@ -16,8 +16,9 @@
     <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">Pharmocology</a>
-          <a class="nav-link" id="v-pills-pharmacokinetics-tab" data-toggle="pill" href="#v-pills-pharmacokinetics" role="tab" aria-controls="v-pills-pharmacokinetics" aria-expanded="true">Pharmacokinetics</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>
     </div>
     <div class="col-9">
@@ -77,7 +78,7 @@
                </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="v-pills-physicochemistry" role="tabpanel" aria-labelledby="v-pills-physicochemistry-tab">
             <div class="row">
             <table class="table table-sm col-sm-12">
               <thead>
@@ -140,8 +141,17 @@
               </tbody>
             </table>
             </div>
+            <div>
+              <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 }});             
+                        
+              </script>
+            </div>
+          </div>
+          <div class="tab-pane fade" id="v-pills-pharmacology" role="tabpanel" aria-labelledby="v-pills-pharmacology-tab">
           </div>
-          <div class="tab-pane fade" id="v-pills-pharmacokinetics" role="tabpanel" aria-labelledby="v-pills-pharmacokinetics-tab">
+          <div class="tab-pane fade" id="v-pills-drugsimilarity" role="tabpanel" aria-labelledby="v-pills-drugsimilarity-tab">
           </div>
         </div>
     </div>