From 3cf40c2077a0de530e378491c1106516dd3f5e0e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Herv=C3=A9=20=20MENAGER?= <herve.menager@pasteur.fr>
Date: Sun, 8 Apr 2018 19:09:58 +0200
Subject: [PATCH] refactor LE-LLE biplot into a js function
Former-commit-id: 696b9a6cfa986c9919cca972761c7284cfd23440
---
ippisite/ippidb/templates/base.html | 51 +++++++++++++++++++
ippisite/ippidb/templates/compound_card.html | 52 +-------------------
2 files changed, 52 insertions(+), 51 deletions(-)
diff --git a/ippisite/ippidb/templates/base.html b/ippisite/ippidb/templates/base.html
index 38de08be..9b018e45 100644
--- a/ippisite/ippidb/templates/base.html
+++ b/ippisite/ippidb/templates/base.html
@@ -92,6 +92,57 @@
{type: 'radar',
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 currentCompoundData = [];
+ var currentFamilyData = [];
+ var otherFamiliesData = [];
+ plotData.forEach((item) => {
+ if(item.id == compoundId){
+ currentCompoundData.push(item);
+ }else if(item.family_name == compoundFamily){
+ currentFamilyData.push(item);
+ }else{
+ otherFamiliesData.push(item)
+ }
+ });
+ var scatterData = {
+ 'datasets': [
+ { label: 'Other PPI families',
+ borderColor: "rgba(211,211,211, 0.5)",
+ backgroundColor: "rgba(211,211,211, 0.5)",
+ data: otherFamiliesData
+ },
+ { label: '{{ compound.best_activity_ppi_name}} family',
+ borderColor: "rgba(54, 162, 235, 1)",
+ backgroundColor: "rgba(54, 162, 235, 0.5)",
+ data: currentFamilyData
+ },
+ { label: 'Compound',
+ borderColor: "rgba(194, 0, 0, 1)",
+ backgroundColor: "rgba(194, 0, 0, 1)",
+ data: currentCompoundData
+ }
+ ]};
+ var ctx = document.getElementById(canvasId).getContext('2d');
+ var scatterChart = new Chart(ctx, {
+ type: 'scatter',
+ data: scatterData,
+ options: {
+ scales: {
+ xAxes: [{
+ type: 'linear',
+ position: 'bottom'
+ }]
+ }
+ }
+ });
+ document.getElementById(canvasId).onclick = function(evt){
+ var activePoints = scatterChart.getElementAtEvent(evt);
+ var selectedIndex = activePoints[0]._index;
+ var id = scatterChart.data.datasets[0].data[selectedIndex].id;
+ window.location = '/compound/'+id;
+ };
};
</script>
diff --git a/ippisite/ippidb/templates/compound_card.html b/ippisite/ippidb/templates/compound_card.html
index 8ba957c4..b0b564a9 100644
--- a/ippisite/ippidb/templates/compound_card.html
+++ b/ippisite/ippidb/templates/compound_card.html
@@ -157,59 +157,9 @@
<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>
- var allData = {{ biplot_data | safe }};
- var currentCompoundData = [];
- var currentFamilyData = [];
- var otherFamiliesData = [];
- allData.forEach((item) => {
- if(item.id == {{ compound.id }}){
- currentCompoundData.push(item);
- }else if(item.family_name == '{{ compound.best_activity_ppi_name}}'){
- currentFamilyData.push(item);
- }else{
- otherFamiliesData.push(item)
- }
- });
- var scatterData = {
- 'datasets': [
- { label: 'Other PPI families',
- borderColor: "rgba(211,211,211, 0.5)",
- backgroundColor: "rgba(211,211,211, 0.5)",
- data: otherFamiliesData
- },
- { label: '{{ compound.best_activity_ppi_name}} family',
- borderColor: "rgba(54, 162, 235, 1)",
- backgroundColor: "rgba(54, 162, 235, 0.5)",
- data: currentFamilyData
- },
- { label: 'Compound',
- borderColor: "rgba(0, 17, 250, 1)",
- backgroundColor: "rgba(0, 17, 250, 0.5)",
- data: currentCompoundData
- }
- ]};
- var ctx = document.getElementById('le_lle_biplot').getContext('2d');
- var scatterChart = new Chart(ctx, {
- type: 'scatter',
- data: scatterData,
- options: {
- scales: {
- xAxes: [{
- type: 'linear',
- position: 'bottom'
- }]
- }
- }
- });
- document.getElementById('le_lle_biplot').onclick = function(evt){
- var activePoints = scatterChart.getElementAtEvent(evt);
- var selectedIndex = activePoints[0]._index;
- var id = scatterChart.data.datasets[0].data[selectedIndex].id;
- window.location = '/compound/'+id;
- };
+ drawLeLleBiplotChart('le_lle_biplot', {{ compound.id }}, '{{ compound.best_activity_ppi_name }}', {{ biplot_data | safe }})
</script>
</div>
</div>
--
GitLab