refactor LE-LLE biplot into a js function

Former-commit-id: 696b9a6cfa986c9919cca972761c7284cfd23440

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>
 

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>