add LE-LLE biplot to compound card computed dynamically

this is obviously too long to compute. these data should be stored
in the DB.


Former-commit-id: 0bfa4d9cab060401b44021ccf4a487b4a08c1bb9

ippisite/ippidb/management/commands/lle_le.py

@@ -11,7 +11,9 @@ class Command(BaseCommand):
 
     def handle(self, *args, **options):
         self.stdout.write(self.style.SUCCESS('Generating the LE vs. LLE biplot...'))
-        df = Compound.objects.all().to_dataframe()
-        df['le']=df[
-        print(df.to_csv())
-        print(df.columns)
+        for comp in Compound.objects.all():
+            print(comp.id, comp.le, comp.lle)
+        #df = Compound.objects.all().to_dataframe()
+        #df['le']=df[
+        #print(df.to_csv())
+        #print(df.columns)

ippisite/ippidb/templates/compound_card.html

@@ -154,6 +154,46 @@
             </div>
           </div>
           <div class="tab-pane fade" id="v-pills-pharmacology" role="tabpanel" aria-labelledby="v-pills-pharmacology-tab">
+             <div class="card col-sm-12 col-md-6">
+              <h5 class="card-header">Efficiencies: iPPI-DB biplot LE versus LLE</h5>
+              <div class="card-body">
+
+              <canvas id="le_lle_biplot"></canvas>
+              <script>
+                var scatterData = {
+                'datasets': [
+                    { label: 'Other PPI families',
+                      borderColor: "rgba(211,211,211, 0.8)",
+                      backgroundColor: "rgba(211,211,211, 0.8)",
+                      data:[
+                        {% for c in all_compounds %}
+                            {x: {{ c.le }}, y: {{ c.lle }}, id: {{ c.id }} },
+                        {% endfor %}
+                        ]
+                    }
+                ]};
+                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;
+                };
+              </script>
+            </div>
+            </div>
           </div>
           <div class="tab-pane fade" id="v-pills-drugsimilarity" role="tabpanel" aria-labelledby="v-pills-drugsimilarity-tab">
           </div>

ippisite/ippidb/views.py

@@ -235,6 +235,7 @@ def compound_list(request):
 def compound_card(request, compound_id):
     try:
         compound = Compound.objects.get(id=int(compound_id))
+        all_compounds = Compound.objects.all()
     except Compound.DoesNotExist:
         raise Http404("No compound data for %s:%s" % (compound_id))
-    return render(request, 'compound_card.html', {'compound': compound}) 
+    return render(request, 'compound_card.html', {'compound': compound, 'all_compounds': all_compounds})