jupyter-book / thebe

Turn static HTML pages into live documents with Jupyter kernels.
https://thebe.readthedocs.io
BSD 3-Clause "New" or "Revised" License
392 stars 68 forks source link

Bokeh Support #112

Open lukasheinrich opened 5 years ago

lukasheinrich commented 5 years ago

Hi, as an alternative to #111 it might be easier (I'm unsure) to support bokeh.

I tried forking launching a kernel based on the https://github.com/bokeh/bokeh-notebooks binder but get: JavaScript output is disabled in JupyterLab

screenshot

which I don't fully understand, since trying to render things in JupyterLab (by replacing /tree with /lab) in that binder works.

I tried forking it and explicitly adding the bokeh jupyterlab extension to the postBuild which successfully builds

https://github.com/lukasheinrich/bokeh-notebooks/blob/master/postBuild

but I still see the same message (jupyter labextension list seems to confirm the extension works)

I see the example with ipyleaflet, which surely uses some javascript, but I don't know which piece I'm missing.

screenshot

basnijholt commented 5 years ago

I was about to open an issue and then I found this.

We use thebelab in the Adaptive documentation and use holoviews plots. They too (since they depend on bokeh) do not work.

See my minimal example: cat holoviews.html

<!-- Configure and load Thebe !-->
<script type="text/x-thebe-config">
  {
    requestKernel: true,
    binderOptions: {
      repo: "python-adaptive/adaptive",
    },
  }
</script>
<script src="https://unpkg.com/thebelab@0.4.0/lib/index.js"></script>

<button id="activateButton"  style="width: 150px; height: 75px; font-size: 1.5em;">Activate</button>
<script>
var bootstrapThebe = function() {
    thebelab.bootstrap();
}

document.querySelector("#activateButton").addEventListener('click', bootstrapThebe)
</script>

<pre data-executable="true" data-language="python">
import holoviews as hv
import numpy as np
hv.notebook_extension('bokeh')

xs = np.linspace(-1, 1)
ys = xs**2

hv.Curve((xs, ys))
</pre>
celine168 commented 3 years ago

This is just a mind dump of things I've been investigating.

I just noticed that the error message seems to come from the source code here: https://github.com/jupyterlab/jupyterlab/blob/master/packages/rendermime/src/widgets.ts#L415

However, I'm not sure at all how or where the render function is being called.

Bokeh.io imports 4 scripts into JupyterLab, but adding them directly to the HTML page doesn't work (I wasn't expecting them to though since we are calling output_notebook). However, I think importing one of them allows the bokeh icon to appear when it says "Loading BokehJS", but I don't think it's an overall solution to solve the underlying problem.

<script src="https://cdn.bokeh.org/bokeh/release/bokeh-2.2.3.min.js"></script>
<script src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.2.3.min.js"></script>
<script src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.2.3.min.js"></script>
<script src="https://cdn.bokeh.org/bokeh/release/bokeh-gl-2.2.3.min.js"></script>