Commit 93e0b18f authored by Hervé  MENAGER's avatar Hervé MENAGER
Browse files

add radar chart for compound descriptors to the compound page


Former-commit-id: 96b10e7bcfd6bf7bae944b6daaff470f465ef4b6
parent 7dc8390e
This diff is collapsed.
......@@ -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>
......
......@@ -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>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment