Ported plotting from plotly to bokeh passing only json from backend to frontend

Author: hatsy

.gitignore

@@ -9,3 +9,4 @@ ghostdriver.log
 *.swo
 __pycache__/
 node_modules/
+*.pyc

cesium_app/handlers/plot_features.py

@@ -4,20 +4,8 @@
 
 
 class PlotFeaturesHandler(BaseHandler):
-    def _get_featureset(self, featureset_id):
-        try:
-            f = Featureset.get(Featureset.id == featureset_id)
-        except Featureset.DoesNotExist:
-            raise AccessError('No such feature set')
-
-        if not f.is_owned_by(self.get_username()):
-            raise AccessError('No such feature set')
-
-        return f
-
-    def get(self, featureset_id=None):
-        fset = self._get_featureset(featureset_id)
-        features_to_plot = sorted(fset.features_list)[0:4]
-        data, layout = plot.feature_scatterplot(fset.file.uri, features_to_plot)
-
-        self.success({'data': data, 'layout': layout})
+    def get(self, featureset_id):
+        fset = Featureset.get_if_owned(featureset_id, self.get_username())
+        features_to_plot = sorted(fset.features_list)[0:4]  # TODO from form
+        docs_json, render_items = plot.feature_scatterplot(fset.file.uri, features_to_plot)
+        self.success({'docs_json': docs_json, 'render_items': render_items})

cesium_app/models.py

@@ -158,6 +158,18 @@ class Featureset(BaseModel):
     def is_owned_by(self, username):
         return self.project.is_owned_by(username)
 
+    @staticmethod
+    def get_if_owned(fset_id, username):
+        try:
+            f = Featureset.get(Featureset.id == fset_id)
+        except Featureset.DoesNotExist:
+            raise AccessError('No such feature set')
+
+        if not f.is_owned_by(username):
+            raise AccessError('No such feature set')
+
+        return f
+
 
 class Model(BaseModel):
     """ORM model of the Model table"""

cesium_app/plot.py

@@ -1,12 +1,12 @@
+from itertools import cycle, islice
 import numpy as np
-import pandas as pd
-from sklearn.metrics import confusion_matrix
-import plotly
-import plotly.offline as py
-from plotly.tools import FigureFactory as FF
-
 from cesium import featurize
-from .config import cfg
+from bokeh.plotting import figure
+from bokeh.layouts import gridplot
+from bokeh.palettes import PuBu as palette
+from bokeh.core.json_encoder import serialize_json
+from bokeh.document import Document
+from bokeh.util.serialization import make_id
 
 
 def feature_scatterplot(fset_path, features_to_plot):
@@ -21,42 +21,56 @@ def feature_scatterplot(fset_path, features_to_plot):
 
     Returns
     -------
-    (fig.data, fig.layout)
-        Returns (fig.data, fig.layout) where `fig` is an instance of
-        `plotly.tools.FigureFactory`.
+    (str, str)
+        Returns (script, div) tags for the desired plot as output by
+        `bokeh.embed.components`.
     """
     fset, data = featurize.load_featureset(fset_path)
-    fset = fset[features_to_plot]
+    X = fset[features_to_plot]
+    if 'target' in fset and fset.target.values.dtype != np.float:
+        y = fset.target.values
+        labels = np.unique(y)
+    else:
+        y = [None] * len(X)
+        labels = [None]
 
-    if 'label' in data:
-        fset['label'] = data['label']
-        index = 'label'
+    if len(labels) in palette:
+        colors = palette[len(labels)]
     else:
-        index = None
-
-    # TODO replace 'trace {i}' with class labels
-    fig = FF.create_scatterplotmatrix(fset, diag='box', index=index,
-                                      height=800, width=800)
-
-    py.plot(fig, auto_open=False, output_type='div')
-
-    return fig.data, fig.layout
-
-
-#def prediction_heatmap(pred_path):
-#    with xr.open_dataset(pred_path) as pset:
-#        pred_df = pd.DataFrame(pset.prediction.values, index=pset.name,
-#                               columns=pset.class_label.values)
-#    pred_labels = pred_df.idxmax(axis=1)
-#    C = confusion_matrix(pset.label, pred_labels)
-#    row_sums = C.sum(axis=1)
-#    C = C / row_sums[:, np.newaxis]
-#    fig = FF.create_annotated_heatmap(C, x=[str(el) for el in
-#                                            pset.class_label.values],
-#                                      y=[str(el) for el in
-#                                         pset.class_label.values],
-#                                      colorscale='Viridis')
-#
-#    py.plot(fig, auto_open=False, output_type='div')
-#
-#    return fig.data, fig.layout
+        all_colors = sorted(palette.items(), key=lambda x: x[0],
+                            reverse=True)[0][1]
+        colors = list(islice(cycle(all_colors), len(labels)))
+
+    plots = np.array([[figure(width=300, height=200)
+                       for j in range(len(features_to_plot))]
+                      for i in range(len(features_to_plot))])
+    for (i, j), p in np.ndenumerate(plots):
+        for l, c in zip(labels, colors):
+            if l is not None:
+                inds = np.where(y == l)[0]
+            else:
+                inds = np.arange(len(X))
+            p.circle(X.values[inds, i], X.values[inds, j], color=c,
+                     legend=(l if (i == j and l is not None) else None))
+            p.legend.location = 'bottom_right'
+            p.legend.label_text_font_size = '6pt'
+            p.legend.spacing = 0
+            p.legend.padding = 0
+            p.xaxis.axis_label = features_to_plot[i]
+            p.yaxis.axis_label = features_to_plot[j]
+
+    plot = gridplot(plots.tolist(), ncol=len(features_to_plot), mergetools=True)
+
+    # Convert plot to json objects necessary for rendering with bokeh on the
+    # frontend
+    render_items = [{'docid':plot._id, 'elementid':make_id()}]
+
+    doc = Document()
+    doc.add_root(plot)
+    docs_json_inner = doc.to_json()
+    docs_json = {render_items[0]['docid']:docs_json_inner}
+
+    docs_json = serialize_json(docs_json)
+    render_items = serialize_json(render_items)
+
+    return docs_json, render_items

public/index.html

@@ -5,6 +5,17 @@
     <title>Cesium</title>
     <link rel="stylesheet" href="css/base.css" />
     <link rel="icon" type="image/png" href="favicon.png"/>
+
+    <!-- Bokeh -->
+    <link
+    href="http://cdn.pydata.org/bokeh/release/bokeh-0.12.5.min.css"
+  rel="stylesheet" type="text/css">
+    <link
+    href="http://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.5.min.css"
+    rel="stylesheet" type="text/css">
+    <script src="http://cdn.pydata.org/bokeh/release/bokeh-0.12.5.min.js"></script>
+    <script src="http://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.5.min.js"></script>
+
     <link href='https://fonts.googleapis.com/css?family=Fira+Sans:400,700' rel='stylesheet' type='text/css'>
   </head>
   <body>

public/scripts/Plot.jsx

@@ -1,8 +1,22 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import Plotly from './custom-plotly';
 import { showNotification } from './Notifications';
 
+function bokeh_render_plot(node, docs_json, render_items) {
+  // Create bokeh div element
+  var bokeh_div = document.createElement("div");
+  var inner_div = document.createElement("div");
+  bokeh_div.setAttribute("class", "bk-root" );
+  inner_div.setAttribute("class", "bk-plotdiv");
+  inner_div.setAttribute("id", render_items[0].elementid);
+  bokeh_div.appendChild(inner_div);
+  node.appendChild(bokeh_div);
+
+  // Generate plot
+  Bokeh.safely(function() {
+    Bokeh.embed.embed_items(docs_json, render_items);
+  });
+}
 
 class Plot extends Component {
   constructor(props) {
@@ -32,16 +46,17 @@ class Plot extends Component {
     if (!plotData) {
       return <b>Please wait while we load your plotting data...</b>;
     }
-
-    let { data, layout } = plotData;
+    var docs_json = JSON.parse(plotData.docs_json);
+    var render_items = JSON.parse(plotData.render_items);
 
     return (
       plotData &&
         <div
           ref={
             (node) => {
-              node && Plotly.plot(node, data, layout);
-            }}
+              node && bokeh_render_plot(node, docs_json, render_items)
+              }
+            }
         />
     );
   }

public/scripts/custom-plotly.js

@@ -12,3 +12,4 @@ distributed>=1.14.3
 selenium
 pytest
 joblib>=0.11
+bokeh==0.12.5