IPython widgets don't work in offline mode

[jackparmer]

Hey @yankev -

This is another good one to lick while waiting on:
#406

Related discussion:
http://community.plot.ly/t/possible-to-update-the-data-for-a-scatter-in-offline-mode-in-a-python-notebook/414

http://community.plot.ly/t/click-events-in-python-offline-mode/298

Currently IPython widgets only work through Plotly iframes using the postMessage API:
https://github.com/plotly/postMessage-API
http://moderndata.plot.ly/widgets-in-ipython-notebook-and-plotly/

cc @chriddyp

[jdfreder]

So I just started looking into this, and I stumbled across this in the offline mode code:

# ipython's includes `require` as a global, which
# conflicts with plotly.js. so, unrequire it.
'require=requirejs=define=undefined;' +

It's inhibiting my ability to use requirejs to fetch the widget javascript. I'd like to look into alternative solutions. I see the plotly.min.js file sitting in the offline folder, but it looks like it gets built elsewhere and placed there by hand. Is it the build output from plotly.js? I think if we webpack it differently (just a guess, not a guarantee), we should be able to avoid nulling require/requirejs/define.

Once we get that figured out, we can dynamically load the widgets and comm code from the notebook. However, I should warn that using the widgets only here means the plots will not persist to the notebook json in the same way the HTML does now. IOW nbconvert --to html doesn't include widgets. Since plotly plots seems to only use the widgets for custom messages (from my reading of the code, am I right?) and none of the state machinery, it probably makes more sense to use comms and continue to use display HTML as it is. With the comms we can easily relay the JS events to the backend, we just have to be careful about cleanup when the plots are cleared.

If we were interested in updating the plot data in real time from Python, I'd suggest using a widget implementation.

[jackparmer]

Is it the build output from plotly.js?

Right, its the build output from plotly.js

I think if we webpack it differently (just a guess, not a guarantee)...

Here is how we use webpack now:
https://plot.ly/javascript/modularizing-monolithic-javascript-projects/

Since plotly plots seems to only use the widgets for custom messages (from my reading of the code, am I right?)

Right!

cc @chriddyp and @theengineear if they want to weigh in

[chriddyp]

hey @jdfreder - that's right, the global require causes some issues in include plotly.min.js.
I just tried it again with the latest plotly.min.js bundle from the CDN:

source notebook: http://nbviewer.jupyter.org/gist/chriddyp/01a318827b1b73791bd1

I'm not familiar enough with plotly.js to know why the global require breaks the import, but I bet @etpinard or @mdtusz have a good answer and know what it would take to get this to work.

[etpinard]

See #373

The requirements are described in the last comment

[IsaKiko]

I've tried to use plot.ly and D3 in one notebook and plot.ly deleting the require statement broke it

sooo...
here's a workaround:

Before importing plot.ly, save the following three temporary in window (not pretty, but works):

%%javascript
window.require_temp = window.require;
window.requirejs_temp = window.requirejs;
window.define_temp = window.define;

Once plot.ly is imported, get them back:

%%javascript
window.require = window.require_temp;
window.requirejs = window.requirejs_temp;
window.define = window.define_temp;

Not pretty, but it worked for me... until I restarted the notebook.

All output needs to be cleared before the notebook is saved. Otherwise, it will try to render plots, loading plotly and deleting the 'require' library upon re-opening it ¯_(ツ)_/¯

[jonmmease]

This has been possible since 3.0.0 using FigureWidget