blank iplot in Jupyter Notebooks

[michaelsweeney]

I've been having a persistent but intermittent issue with iplot in Juypyter notebooks where the plots are blank, but space is taken up in the Jupyter notebook output for them. It seems to happen most often in notebooks with large amounts of data and frequent replotting within the notebook.

it seems like there at least a few other people with the same issue, across multiple versions of both Jupyter Notebooks and Plotly, but I haven't seen a definitive solution or explanation other than restarting computer/notebook, which does not always work in my case.

For what it's worth, in my current Jupyter notebook I'm plotting a simple scatter plot and getting a blank layout:

xs = [0, 1, 2, 3, 4]
ys = [4, 3, 2, 1, 0]
trace = go.Scatter(
    x = xs,
    y = ys,
    mode = 'markers'
)
data = [trace]
py.iplot(data)

And here is the JS console output:

main.min.js:33264 actions jupyter-notebook:find-and-replace does not exist, still binding it in case it will be defined later...
MenuBar.bind_events @ main.min.js:33264
main.min.js:12429 load_extensions Arguments(2)
main.min.js:12406 Loading extension: export_embedded/main
:8888/nbextensions/export_embedded/main.js?v=20190304112619:22 Notebook version 5.1.0 or higher required for this extension
main.min.js:24777 Session: kernel_created (f1932fce-d600-4f9e-a9d9-f8b88e8ba223)
main.min.js:23933 Starting WebSockets: ws://localhost:8888/api/kernels/6fbd3818-f86b-4d80-92dd-34b08ff15ea0
:8888/static/plotly.js?v=20190304112619:1 Failed to load resource: the server responded with a status of 404 (Not Found)
require.js:140 Uncaught Error: Script error for "plotly"
http://requirejs.org/docs/errors.html#scripterror
    at makeError (require.js:165)
    at HTMLScriptElement.onScriptError (require.js:1732)
main.min.js:12406 Loading extension: jupyter-js-widgets/extension
main.min.js:23577 Kernel: kernel_connected (6fbd3818-f86b-4d80-92dd-34b08ff15ea0)
main.min.js:23577 Kernel: kernel_ready (6fbd3818-f86b-4d80-92dd-34b08ff15ea0)
2Belmont%20HVAC%20Vis.ipynb:1 Uncaught TypeError: Cannot read property 'Plots' of undefined
    at eval (eval at globalEval (main.min.js:4), <anonymous>:1:61)

[nicolaskruchten]

Aha ok I'm not the only one seeing this after all @jonmmease :)

I'm also struggling to replicate it reliably though... Any insights you might have @michaelsweeney about how to trigger it would be super helpful in tracking it down.

[michaelsweeney]

yea, the only thing that seems to trigger it is when i'm plotting a lot of high-data-point plots and re-plotting them frequently throughout the day. And once the issue happens it seems to stay for some amount of time, even if I restart my computer, clear cache, restart Notebook, etc.

One thing to note is that py.plot does work in this case and I can view the html file of the figure in a separate tab with no problem.

Other than that, I haven't really identified any particular moment that causes it, but it does seem to happen at the exact moment that I call over my boss to show him the amazing plot I just made :-) maybe Plotly can smell fear?

[nicolaskruchten]

I think your last comment got cut off there :)

[nicolaskruchten]

What I've found is that if I "restart and clear output" then the problem persists BUT if I then refresh the page altogether it jolts out of the problematic state.

[michaelsweeney]

interesting, i don't believe that was working for me, i may not have tried literally 'refreshing' the notebook but only closing and reopening in a new instance of chrome. i'll give it a shot next time the problem comes up and report back.

[jonmmease]

Thanks for the report and info @michaelsweeney. I haven't been able to reproduce it yet, but here are some working notes:

This line is particularly suspicious

:8888/static/plotly.js?v=20190304112619:1 Failed to load resource: the server responded with a status of 404 (Not Found)

The plotly.js bundle is not served from the notebook server as a static resource in the classic notebook. So the requirejs system on the frontend shouldn't be looking there.

The init_notebook_mode() logic is responsible registering the location of the plotly.js bundle for use in the notebook

plotly.py/plotly/offline/offline.py

Lines 268 to 303 in b3dbceb

	if connected:
	# Inject plotly.js into the output cell
	script_inject = (
	'{win_config}'
	'{mathjax_config}'
	'<script>'
	'requirejs.config({{'
	'paths: {{ '
	# Note we omit the extension .js because require will include it.
	'\'plotly\': [\'https://cdn.plot.ly/plotly-latest.min\']}},'
	'}});'
	'if(!window._Plotly) {{'
	'require([\'plotly\'],'
	'function(plotly) {{window._Plotly=plotly;}});'
	'}}'
	'</script>'
	).format(win_config=_window_plotly_config,
	mathjax_config=_mathjax_config)
	else:
	# Inject plotly.js into the output cell
	script_inject = (
	'{win_config}'
	'{mathjax_config}'
	'<script type=\'text/javascript\'>'
	'if(!window._Plotly){{'
	'define(\'plotly\', function(require, exports, module) {{'
	'{script}'
	'}});'
	'require([\'plotly\'], function(Plotly) {{'
	'window._Plotly = Plotly;'
	'}});'
	'}}'
	'</script>'
	'').format(script=get_plotlyjs(),
	win_config=_window_plotly_config,
	mathjax_config=_mathjax_config)

If I force iplot to execute without running init_notebook_mode(),

import plotly
from plotly.offline import iplot
plotly.offline.offline.__PLOTLY_OFFLINE_INITIALIZED = True
...
iplot(data)

I get blank space where the plot should be and this JavaScript console error

Error: Script error for "plotly"
http://requirejs.org/docs/errors.html#scripterror require.js:168:17

    makeError http://localhost:8888/static/components/requirejs/require.js?v=951f856e81496aaeec2e71a1c2c0d51f:168 onScriptError http://localhost:8888/static/components/requirejs/require.js?v=951f856e81496aaeec2e71a1c2c0d51f:1735

So in my mind the puzzle here is, what is causing require to look for plotly.js as a static resource?

[jonmmease]

@michaelsweeney @nicolaskruchten

The next time you get stuck in this state, could you try running the following in the browser JavaScript console and report the output?

require(["plotly"], function(Plotly) {console.log(Plotly)})

When things are working correctly I get an output like

require(["plotly"], function(Plotly) {console.log(Plotly)})
function localRequire()
Object { version: "1.44.3", register: register(), plot: plot(), newPlot: newPlot(), restyle: F(), relayout: q(), redraw: redraw(), update: J(), react: react(), extendTraces: t(), … }

Based on the error message above, when in the bad state I'm expecting this to 404.

Update 1: Also, please check the value of

window._Plotly

in the JavaScript console. When things are working, this should return something like

Object { version: "1.44.3", register: register(), plot: plot(), newPlot: newPlot(), restyle: F(), relayout: q(), redraw: redraw(), update: J(), react: react(), extendTraces: t(), … }

Update 2: If it turns out that require(["plotly"], function(Plotly) {console.log(Plotly)}) results in an error but window._Plotly still returns the plotly.js library successfully then I think I can update the iplot logic to work around the requirejs error.

[michaelsweeney]

Ok, here's what I get during the error:

Console Input:
require(["plotly"], function(Plotly) {console.log(Plotly)})

Console Output:

ƒ localRequire(deps, callback, errback) {
                    var id, map, requireMod;

                    if (options.enableBuildCallback && callback && isFunction(callback)) {
                      …

Also, confirmed that refreshing the browser works for me. Pretty dumb to not try first before restarting Chrome/Jupyter, but it's good that it at least worked this time.

[jonmmease]

Huh, I don't recognize anything in

ƒ localRequire(deps, callback, errback) {
                    var id, map, requireMod;

                    if (options.enableBuildCallback && callback && isFunction(callback)) {
                      …

Was that the end of the output? What do you get when the notebook is in a working state? Could you also look at window._Plotly when things get stuck again?

[michaelsweeney]

it's working now, and i see the below. and apologies because i'm not very conversant in JS or HTML (dash has been my first attempt at a front-end design) -- how can I look at window.__Plotly?

main.min.js:33264 actions jupyter-notebook:find-and-replace does not exist, still binding it in case it will be defined later...
MenuBar.bind_events @ main.min.js:33264
MenuBar @ main.min.js:33019
(anonymous) @ main.min.js:36509
execCb @ require.js:1690
check @ require.js:865
(anonymous) @ require.js:1140
(anonymous) @ require.js:131
(anonymous) @ require.js:1190
each @ require.js:56
emit @ require.js:1189
check @ require.js:940
enable @ require.js:1177
init @ require.js:783
callGetModule @ require.js:1204
completeLoad @ require.js:1583
onScriptLoad @ require.js:1711
main.min.js:12429 load_extensions Arguments(2)
main.min.js:24777 Session: kernel_created (956a0ddd-cacc-45db-a440-848537c9ad0a)
main.min.js:23933 Starting WebSockets: ws://localhost:8888/api/kernels/5517497a-2946-4cb5-b92e-0952e19bea62
main.min.js:12406 Loading extension: export_embedded/main
:8888/nbextensions/export_embedded/main.js?v=20190305110212:22 Notebook version 5.1.0 or higher required for this extension
main.min.js:23577 Kernel: kernel_connected (5517497a-2946-4cb5-b92e-0952e19bea62)
main.min.js:23577 Kernel: kernel_ready (5517497a-2946-4cb5-b92e-0952e19bea62)
main.min.js:12406 Loading extension: jupyter-js-widgets/extension

[jonmmease]

how can I look at window._Plotly?

If you open the browser developer tools console, you should be able to type in your own command.
Then type in:

>> window._Plotly

And see what the result is. If things aren't working you may see the result as undefined.

[michaelsweeney]

gotcha, thanks.

so when it's working, I see:

window._Plotly
{version: "1.42.5", register: ƒ, plot: ƒ, newPlot: ƒ, restyle: ƒ, …}
Fx: {moduleType: "component", name: "fx", constants: {…}, schema: {…}, attributes: {…}, …}
Icons: {undo: {…}, home: {…}, camera-retro: {…}, zoombox: {…}, pan: {…}, …}
PlotSchema: {IS_SUBPLOT_OBJ: "_isSubplotObj", IS_LINKED_TO_ARRAY: "_isLinkedToArray", DEPRECATED: "_deprecated", UNDERSCORE_ATTRS: Array(4), get: ƒ, …}
Plots: {modules: {…}, allCategories: {…}, allTypes: Array(35), subplotsRegistry: {…}, transformsRegistry: {…}, …}
Queue: {add: ƒ, startSequence: ƒ, stopSequence: ƒ, undo: ƒ, redo: ƒ, …}
Snapshot: {getDelay: ƒ, getRedrawFunc: ƒ, clone: ƒ, toSVG: ƒ, svgToImg: ƒ, …}
addFrames: ƒ (t,e,r)
addTraces: ƒ t(e,n,i)
animate: ƒ (t,e,r)
d3: {version: "3.5.17", ascending: ƒ, descending: ƒ, min: ƒ, max: ƒ, …}
deleteFrames: ƒ (t,e)
deleteTraces: ƒ t(e,n)
downloadImage: ƒ (t,e)
extendTraces: ƒ t(e,n,i,a)
makeTemplate: ƒ (t)
moveTraces: ƒ t(e,n,i)
newPlot: ƒ (t,e,n,i)
plot: ƒ (t,e,i,a)
prependTraces: ƒ t(e,n,i,a)
purge: ƒ (t)
react: ƒ (t,e,n,i)
redraw: ƒ (t)
register: ƒ (t)
relayout: ƒ t(e,r,n)
restyle: ƒ t(e,n,i,a)
setPlotConfig: ƒ (t)
toImage: ƒ (t,e)
update: ƒ t(e,n,i,a)
validate: ƒ (t,e)
validateTemplate: ƒ (t,e)
version: "1.42.5"
__proto__: Object

And when it's not working, I see:

window._Plotly
undefined

[michaelsweeney]

update: refreshing browser no longer works as a work-around for me.