save and display the PCA correlation circle

Former-commit-id: 42b2da5f48c598d4075607c9a59ae18ff65df1be

ippisite/ippidb/management/commands/pca.py

 import glob
 import json
+import io
+import base64
 
 from django.core.management import BaseCommand, CommandError
 from django.forms.models import model_to_dict 
@@ -51,6 +53,7 @@ class Command(BaseCommand):
         x = StandardScaler().fit_transform(x)
         pca = PCA(n_components=2)
         principal_components = pca.fit_transform(x)
+        # compute correlation circle
         variance_ratio = pd.Series(pca.explained_variance_ratio_)
         coef = np.transpose(pca.components_)
         cols = ['PC-'+str(x) for x in range(len(variance_ratio))]
@@ -69,13 +72,17 @@ class Command(BaseCommand):
         plt.ylabel("PC-1 (%s%%)" % str(variance_ratio[1])[:4].lstrip("0."))
         plt.xlim((-1,1))
         plt.ylim((-1,1))
-        plt.title("Circle of Correlations") 
-        plt.savefig('foo2.png')
+        my_string_io_bytes = io.BytesIO()
+        plt.savefig(my_string_io_bytes, format='png')
+        my_string_io_bytes.seek(0)
+        # figdata_png is the correlation circle figure, base 64-encoded
+        figdata_png = base64.b64encode(my_string_io_bytes.read())
         principal_df = pd.DataFrame(data = principal_components , columns = ['x', 'y'])
         final_df = pd.concat([principal_df, df[['family','id']]], axis = 1)
         for index, row in final_df.iterrows():
             pca_data.append({'x': row.x, 'y': row.y, 'id': row.id, 'family_name': row.family})
-        pca_json = json.dumps(pca_data, separators=(',',':'))
+        pca_data_cc = {'data': pca_data, 'correlation_circle': figdata_png.decode("utf-8")}
+        pca_json = json.dumps(pca_data_cc, separators=(',',':'))
         new = PcaBiplotData()
         new.pca_biplot_data = pca_json
         new.save()

ippisite/ippidb/templates/compound_card.html

@@ -158,6 +158,7 @@
             </div>
             </div>
             </div>
+          <div class="row">
             <div class="card col-sm-12 col-md-6">
               <h5 class="card-header">PCA : iPPI-DB chemical space</h5>
               <div class="card-body">
@@ -166,9 +167,16 @@
               <script>
                 drawCompoundsBiplotChart('pca_biplot', {{ compound.id }}, '{{ compound.best_pXC50_activity_ppi_family|default_if_none:"No target family identified" }}', {{ pca_biplot_data | safe }}, 'physicochemistry');
               </script>
+              </div>
             </div>
+            <div class="card col-sm-12 col-md-6">
+              <h5 class="card-header">PCA : Correlation circle</h5>
+              <div class="card-body">
+              <img src="data:image/png;base64,{{ pca_biplot_cc }}"\>
+              </div>
             </div>
           </div>
+          </div>
           <div class="tab-pane fade" id="pharmacology" role="tabpanel" aria-labelledby="pharmacology-tab">
              <div class="card col-sm-12 col-md-12">
               <h5 class="card-header">Efficiencies: iPPI-DB biplot LE versus LLE</h5>

ippisite/ippidb/views.py

-import ippidb
+import json
 
 from django.shortcuts import render
 from django.http import HttpResponseRedirect, Http404
 from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger
 from formtools.wizard.views import SessionWizardView, NamedUrlSessionWizardView
+
+import ippidb
 from .forms import IdForm, BibliographyForm, PDBForm, ProteinForm, ComplexCompositionForm, ComplexCompositionFormSet, ProteinDomainComplexTypeForm, ProteinDomainComplexForm, PpiForm, PpiComplexForm, PpiAndComplexForm, ProteinFormSet,TestsForm, CompoundForm, CompoundFormSet
 from .models import Protein, Bibliography, ProteinDomainComplex, ProteinDomainBoundComplex, RefCompoundBiblio, TestActivityDescription, Compound, Ppi, Disease, Taxonomy, LeLleBiplotData, PcaBiplotData
 from .ws import get_pdb_uniprot_mapping
@@ -238,5 +240,7 @@ def compound_card(request, compound_id):
     except Compound.DoesNotExist:
         raise Http404("No compound data for %s:%s" % (compound_id))
     le_lle_biplot_data = LeLleBiplotData.objects.get().le_lle_biplot_data 
-    pca_biplot_data = PcaBiplotData.objects.get().pca_biplot_data 
-    return render(request, 'compound_card.html', {'compound': compound, 'le_lle_biplot_data': le_lle_biplot_data, 'pca_biplot_data': pca_biplot_data}) 
+    pca_biplot = json.loads(PcaBiplotData.objects.get().pca_biplot_data)
+    pca_biplot_data = json.dumps(pca_biplot['data'])
+    pca_biplot_cc = pca_biplot['correlation_circle']
+    return render(request, 'compound_card.html', {'compound': compound, 'le_lle_biplot_data': le_lle_biplot_data, 'pca_biplot_data': pca_biplot_data, 'pca_biplot_cc': pca_biplot_cc})