Plotly doesnt render

[nite]

Hi - I've just installed a fresh lab, fresh plotly extension, and for the following in a python3 notebook I get x & y axis, but no heatmap (renders fine in jupyter notebook). Any ideas?

Extension installed with: jupyter labextension install @jupyterlab/plotly-extension

Test code:

from plotly.graph_objs import *
import plotly.graph_objs as go

py.init_notebook_mode()

trace = go.Heatmap(z=[[1, 20, 30],
                      [20, 1, 60],
                      [30, 60, 1]])
data = [trace]
py.iplot(data, filename='basic-heatmap')```

[dhirschfeld]

I think this is what I'm seeing in #22

[gnestor]

Thanks for catching this! There are a couple things going on that I observe:

• Heatmaps only render in the classic notebook using plotly.offline.init_notebook_mode and plotly.offline.iplot.
  • init_notebook_mode displays some text/html which embeds some JS into the page which requires Plotly using RequireJS. jupyterlab_plotly (the current Plotly renderer extension for the classic notebook) does this too, however plotly.py uses plotly.js 1.16.2 while jupyterlab_plotly uses plotly.js@^1.22.0.
  • init_notebook_mode will not work in jupyterlab because jupyterlab doesn't use RequireJS
  • iplot and jupyterlab_plotly's Plotly method are pretty much the same and essentially call IPython.display.display with a mime bundle that contains a Plotly mime type key and Plotly figure value.
• If I upgrade plotly.py to the latest at 2.0.15 (with plotly.js 1.30.0), heatmaps don't render anymore! When I downgrade to plotly.py 1.12.9 (with plotly.js 1.16.2), it renders fine.
• I tried modifying jupyterlab_plotly to use the same version of plotly.js as plotly.py (1.16.2) but now I'm getting different errors when trying to render a plot (TypeError: Cannot read property 'selectAll' of undefined).

The question is: what is it about using plotly.py's init_notebook_mode and iplot that allows heatmaps to render?

[omerbenamram]

Hi guys, I've encountered a very similar issue in an application I am working on.
If I understand correctly - all of these issues are related to plotly being modularized:
plotly/plotly.js#202

It seems that in the source code for the plotly loader https://github.com/jupyterlab/jupyter-renderers/blob/master/packages/plotly-extension/src/index.tsx

Plotly is imported via import * as Plotly from 'plotly.js/lib/core';
This will only load the default line charts, and coerce every other type of chart to line.

Try adding the following code (to support bar charts for example) - this fixed the issue for me:

import * as Plotly from "plotly.js/src/core";
import Bar from "plotly.js/lib/bar"

Plotly.register([Bar]);

Cheers!

[gnestor]

@omerbenamram Thanks so much for chiming in here! This indeed is the culprit! The issue is that labextensions currently don't have any control over the webpack config used to build jupyterlab and it appears that some of these plotly submodules require ify-loader to be bundled using webpack. That's why simply importing plotly.js/lib/core was working because it didn't include those submodules. I messed around with this and concluded that the best solution is to just add the plotly.js browser script into the page when the extension is loaded.

If and when jupyterlab offers custom webpack config to extensions, we can switch back to the plotly.js npm module 👌