Qgrid install breaks bqplot in jupyterlab

[timkpaine]

bootstrap 0e08c6e8d1d771f76828:103 GET http://localhost:8888/nullnbextensions/qgrid/0.bundle.js net::ERR_ABORTED
requireEnsure @ bootstrap 0e08c6e8d1d771f76828:103
(anonymous) @ plugin.js:95
exports @ plugin.js:94
WidgetManager.loadClass @ manager.js:143
(anonymous) @ manager-base.js:262
step @ manager-base.js:42
(anonymous) @ manager-base.js:23
(anonymous) @ manager-base.js:17
__awaiter @ manager-base.js:13
ManagerBase._make_model @ manager-base.js:256
(anonymous) @ manager-base.js:246
step @ manager-base.js:42
(anonymous) @ manager-base.js:23
(anonymous) @ manager-base.js:17
__awaiter @ manager-base.js:13
ManagerBase.new_model @ manager-base.js:232
ManagerBase.handle_comm_open @ manager-base.js:144
(anonymous) @ manager.js:82
(anonymous) @ default.js:901
Promise resolved (async)
DefaultKernel._handleCommOpen @ default.js:897
DefaultKernel._onWSMessage @ default.js:729
_ws.onmessage @ default.js:653
manager-base.js:272 Could not instantiate widget
(anonymous) @ manager-base.js:272
step @ manager-base.js:42
(anonymous) @ manager-base.js:23
rejected @ manager-base.js:15
Promise rejected (async)
step @ manager-base.js:16
(anonymous) @ manager-base.js:17
__awaiter @ manager-base.js:13
ManagerBase._make_model @ manager-base.js:256
(anonymous) @ manager-base.js:246
step @ manager-base.js:42
(anonymous) @ manager-base.js:23
(anonymous) @ manager-base.js:17
__awaiter @ manager-base.js:13
ManagerBase.new_model @ manager-base.js:232
ManagerBase.handle_comm_open @ manager-base.js:144
(anonymous) @ manager.js:82
(anonymous) @ default.js:901
Promise resolved (async)
DefaultKernel._handleCommOpen @ default.js:897
DefaultKernel._onWSMessage @ default.js:729
_ws.onmessage @ default.js:653
renderer.js:84 Error displaying widget
renderer.js:85 Error: Loading chunk 0 failed.
at HTMLScriptElement.onScriptComplete (bootstrap 0e08c6e8d1d771f76828:98)
utils.js:119 Error: Could not create a model.
at promiseRejection (utils.js:119)
at
promiseRejection @ utils.js:119
Promise rejected (async)
ManagerBase.handle_comm_open @ manager-base.js:149
(anonymous) @ manager.js:82
(anonymous) @ default.js:901
Promise resolved (async)
DefaultKernel._handleCommOpen @ default.js:897
DefaultKernel._onWSMessage @ default.js:729
_ws.onmessage @ default.js:653
bootstrap 0e08c6e8d1d771f76828:98 Uncaught (in promise) Error: Loading chunk 0 failed.
at HTMLScriptElement.onScriptComplete (bootstrap 0e08c6e8d1d771f76828:98)
onScriptComplete @ bootstrap 0e08c6e8d1d771f76828:98
Promise rejected (async)
ManagerBase.register_model @ manager-base.js:208
(anonymous) @ manager-base.js:247
step @ manager-base.js:42
(anonymous) @ manager-base.js:23
(anonymous) @ manager-base.js:17
__awaiter @ manager-base.js:13
ManagerBase.new_model @ manager-base.js:232
ManagerBase.handle_comm_open @ manager-base.js:144
(anonymous) @ manager.js:82
(anonymous) @ default.js:901
Promise resolved (async)
DefaultKernel._handleCommOpen @ default.js:897
DefaultKernel._onWSMessage @ default.js:729
_ws.onmessage @ default.js:653
bootstrap 0e08c6e8d1d771f76828:98 Uncaught (in promise) Error: Loading chunk 0 failed.
at HTMLScriptElement.onScriptComplete (bootstrap 0e08c6e8d1d771f76828:98)
onScriptComplete @ bootstrap 0e08c6e8d1d771f76828:98
Promise rejected (async)
ManagerBase.handle_comm_open @ manager-base.js:149
(anonymous) @ manager.js:82
(anonymous) @ default.js:901
Promise resolved (async)
DefaultKernel._handleCommOpen @ default.js:897
DefaultKernel._onWSMessage @ default.js:729
_ws.onmessage @ default.js:653

[timkpaine]

bqplot/bqplot#587

[jasongrout]

That URL: http://localhost:8888/nullnbextensions/qgrid/0.bundle.js has a null in it that probably shouldn't be there. Do you have a set of instructions to reproduce this with a clean conda environment?

[timkpaine]

pip install bqlot qgid==1.0.0b10
jupyter labextension install bqplot
jupyter labextension install qgrid@1.0.0-beta.10

Strangely, using the qgrid extension doesn't trigger that error. Only when you try to use bqplot does it try to fetch that url

[TimShawver]

Hmm, I haven't been able to reproduce this yet. I just tested with the following versions and everything seems to be working:

# Relevant pip packages (get this info with 'pip freeze')
bqplot==0.10.2
jupyterlab==0.30.5
notebook==5.2.2
qgrid==1.0.0b10

# Installed jupyter lab extensions (get this info with 'jupyter labextension list')
@jupyter-widgets/jupyterlab-manager v0.31.3
bqplot v0.3.2
qgrid v1.0.0-beta.10 

Did you try going through the installation steps again in a new virtual env? Might be worth giving that a shot if you haven't yet.

If that doesn't work could you give me the versions of the various packages that you're using, as I did above? Could you also please include the type of OS you're on and the python version you're using as well? Thanks.

[timkpaine]

@jupyter-widgets/jupyterlab-manager
        @jupyter-widgets/jupyterlab-manager v0.31.3  enabled  OK
@jupyterlab/plotly-extension
        @jupyterlab/plotly-extension v0.13.0  enabled  OK
bqplot
        bqplot v0.3.1  enabled  OK
jupyterlab_bokeh
        jupyterlab_bokeh v0.1.0  enabled  OK
qgrid
        qgrid v1.0.0-beta.10  enabled  OK


bqplot==0.10.0
jupyterlab==0.30.6
qgrid==1.0.0b10
bokeh==0.12.10

[timkpaine]

@jasongrout I get 2 bundles too which is weird

                           0.bundle.js     281 kB       0  [emitted]  [big]  @jupyter-widgets/controls
                           1.bundle.js     890 kB       1  [emitted]  [big]
                        main.bundle.js    12.5 MB       2  [emitted]  [big]  main

[timkpaine]

updated to qgrid 1.0.0 and still occurring

[TimShawver]

OK, I tried reproducing again using the same versions of the various packages that you're using and I still couldn't reproduce it.

Did you try creating a new virtualenv and installing just qgrid and bqplot to confirm that none of the other packages that you have installed are related? My experience with widgets in general has been that starting from scratch with a new virtual env can clear up lots of problems.

Also where exactly are you seeing the error you pasted? Is it when you run jupyter labextension install qgrid@1.0.0 or when you attempt to execute a qgrid cell in the notebook?

[timkpaine]

it pops up when you go to use bqplot
after installing both (which works just fine), try to do:

import bqplot.pyplot as plt
plt.plot([1,2], [3,4])
plt.show()

[timkpaine]

python3 -m virtualenv venv
cd venv
. bin/activate
pip3 install jupyterlab bqplot qgrid
jupyter labextension install @jupyter-widgets/jupyterlab-manager
jupyter labextension install qgrid
jupyter labextension install bqplot
jupyter lab

import qgrid
import bqplot.pyplot as plt
import pandas as pd

qgrid.show_grid(pd.DataFrame())

plt.plot([1,2],[3,4])
plt.show()

[TimShawver]

Gotcha, yep I'm seeing the same behavior. qgrid always works even if bqplot is installed but bqplot always stops working as soon as qgrid is installed (and installation order doesn't matter). @jasongrout do you have any thoughts on this? I'm afraid I don't know the internals of the jupyterlab widget machinery well enough to diagnose this.

In qgrid I attempted to copy what bqplot was doing in terms of the labextension installation:
https://github.com/quantopian/qgrid/blob/master/js/src/jupyterlab-plugin.js
https://github.com/quantopian/qgrid/blob/master/js/package.json#L49

One thing that looked strange to me while testing this is when I installed bqplot and qgrid was already installed, I'd see log output looks the same as when I install qgrid's webpack:

That could be expected behavior, just figured I'd mention it in case it's relevant.

[timkpaine]

They're very complimentary packages so hopefully we can get to the bottom of this. I've been on holiday but now I'll try to dig a bit.

[jasongrout]

I think the problem is this line:

qgrid/js/src/index.js

Line 8 in 84e94f7

__webpack_public_path__ = document.querySelector('body').getAttribute('data-base-url') + 'nbextensions/qgrid/';

That's messing up the jupyterlab webpack machinery. Instead, you should set up the URLs for the classic notebook extension like bqplot does: https://github.com/bloomberg/bqplot/blob/master/js/src/extension.js

[jasongrout]

It looks like you already have a corresponding extension.js. It may be enough to just remove the webpack line above. Do you know why it is there?

[jasongrout]

Of course, I could have read the comment above it:

qgrid/js/src/index.js

Lines 5 to 7 in 84e94f7

	// Some static assets may be required by the custom widget javascript. The base
	// url for the notebook is not known at build time and is therefore computed
	// dynamically.

Do you know if the line is needed after all? It may be best to put that line in a file that is only used in the classic notebook extension bundle, but not in the jlab code.

[TimShawver]

It looks like this came from the widget-cookiecutter repository which I used to get started on this version of qgrid: https://github.com/jupyter-widgets/widget-cookiecutter/blob/master/%7B%7Bcookiecutter.github_project_name%7D%7D/js/lib/index.js#L8

[TimShawver]

So I don't really know if it's needed, was just attempting to follow convention. I can try deleting it and see if that fixes things.

[jasongrout]

Hmmm, maybe we need to update the cookie cutter...

[TimShawver]

That worked @jasongrout, thanks for the help!

@timkpaine I've uploaded a beta version to pypi and npm with the fix and confirmed that it works. Install as follows:

pip install qgrid==1.0.1b0
jupyter labextension install qgrid@1.0.1-beta.0

I haven't uploaded conda packages for this version yet...hopefully will do an official release soon so I'm going to wait until I do the official release (since the conda build is painfully manual at the moment).

[timkpaine]

@TimShawver awesome, will test in a bit

[timkpaine]

@TimShawver confirmed working for me

[TimShawver]

This fix was included in version 1.0.1 which has now been released. Thanks again for reporting this.