Is it possible to use PerspectiveWidget in Visual Studio Code (vscode)?

[ceball]

Support Question

When I try to use PerspectiveWidget in vscode, I get "nothing" (no display).

I'm using an environment in which PerspectiveWidget works in jupyter lab, and in which other ipywidgets work in vscode.

Notes:

• I'm not a vscode user, so I don't yet know how to debug! But I thought it might be worthwhile recording my experience so far here.
• I don't think it's common to try to use ipywidgets in vscode yet, but I guess it might become so in the future.
• Maybe it's too soon to look into vscode support? I think jupyter support in vscode is changing (see e.g. https://towardsdatascience.com/vscode-jupyter-notebooks-are-getting-an-upgrade-cc9aaaefc744).

Steps to Reproduce:

1. Install vscode (version details for me listed at the end)
2. python -m pip install perspective-python ipywidgets jupyterlab
3. jupyter labextension install @jupyter-widgets/jupyterlab-manager
4. jupyter labextension install @finos/perspective-jupyterlab
5. Run jupyter lab and create a notebook using the python above, and verify that ipywidgets and PerspectiveWidget work.
6. Run vscode and create a notebook using the kernel above, and find that ipywidgets in general work, but not PerspectiveWidget.

The code I'm using to verify ipywidgets work in general:

import ipywidgets
ipywidgets.FloatSlider()

# requires installing ipympl also
%matplotlib widget
import matplotlib.pyplot as plt
plt.plot([1,2,0]);

And perspective:

import pandas as pd
df = pd.DataFrame([[1,2,3],[4,5,6]],columns=['A','B','C'])
from perspective import PerspectiveWidget
PerspectiveWidget(df)

Working in jupyter lab:

Not working in vscode:

Though other ipywidgets work:

I am using the same python environment in both vscode and jupyter lab. In vscode, for its "how to connect to Jupyter" option, I tried both "default" (allow vscode to start a server) and I tried specifying the same (existing/already running) jupyter server as used above.

Unfortunately I don't (yet) know how to get more details about what is going wrong in vscode.

Environment:

I have only tried one environment.

• linux x64 5.4.0-7642-generic (ubuntu 20.04 lts)
• vscode 1.51.1 (2020-11-10)
• chrome 83.0.4103.122

$ node --version
v15.2.0

$ python --version
Python 3.7.8

$ jupyter labextension list
JupyterLab v2.2.9
Known labextensions:
   app dir: /home/sefkw/mc3/envs/vscp/share/jupyter/lab
        @finos/perspective-jupyterlab v0.5.6  enabled  OK
        @jupyter-widgets/jupyterlab-manager v2.0.0  enabled  OK
        jupyter-matplotlib v0.7.4  enabled  OK

$ pip freeze
argon2-cffi==20.1.0
async-generator==1.10
attrs==20.3.0
backcall==0.2.0
bleach==3.2.1
certifi==2020.11.8
cffi==1.14.3
chardet==3.0.4
cycler==0.10.0
decorator==4.4.2
defusedxml==0.6.0
entrypoints==0.3
future==0.18.2
idna==2.10
importlib-metadata==2.0.0
ipykernel==5.3.4
ipympl==0.5.8
ipython==7.19.0
ipython-genutils==0.2.0
ipywidgets==7.5.1
jedi==0.17.2
Jinja2==2.11.2
json5==0.9.5
jsonschema==3.2.0
jupyter-client==6.1.7
jupyter-core==4.6.3
jupyterlab==2.2.9
jupyterlab-pygments==0.1.2
jupyterlab-server==1.2.0
kiwisolver==1.3.1
MarkupSafe==1.1.1
matplotlib==3.3.3
mistune==0.8.4
nbclient==0.5.1
nbconvert==6.0.7
nbformat==5.0.8
nest-asyncio==1.4.3
notebook==6.1.5
numpy==1.19.4
packaging==20.4
pandas==1.1.4
pandocfilters==1.4.3
parso==0.7.1
perspective-python==0.5.6
pexpect==4.8.0
pickleshare==0.7.5
Pillow==8.0.1
prometheus-client==0.9.0
prompt-toolkit==3.0.8
ptyprocess==0.6.0
pyarrow==0.17.1
pycparser==2.20
Pygments==2.7.2
pyparsing==2.4.7
pyrsistent==0.17.3
python-dateutil==2.8.1
pytz==2020.4
pyzmq==20.0.0
requests==2.25.0
Send2Trash==1.5.0
six==1.15.0
terminado==0.9.1
testpath==0.4.4
tornado==6.1
traitlets==5.0.5
urllib3==1.26.2
wcwidth==0.2.5
webencodings==0.5.1
widgetsnbextension==3.5.1
zipp==3.4.0

[timkpaine]

This will likely work when we support vanilla jupyter notebook, which is actually a very straightforward and easy things to implement it but I stopped doing it since it makes dist annoying: #1063

We can reimplement a more minimal version of that PR and it should allow for non-JupyterLab context.

[timkpaine]

I believe this will work after the latest release is done
#2136

[r3m0t]

@timkpaine I get this message in the Output panel-

17:42:28.125 [debug] VSCodeNotebookController::handleExecution, Class name = Dy, completed in 163ms, has a falsy return value
17:42:28.171 [debug] Widget Message: WidgetManager: Loading class LayoutModel:@jupyter-widgets/base:2.0.0
17:42:28.173 [debug] Widget Message: WidgetManager: Loading class PerspectiveModel:@finos/perspective-jupyterlab:~2.2.1
17:42:28.176 [debug] Widget Message: WidgetManager: failed, Loading class PerspectiveModel:@finos/perspective-jupyterlab:~2.2.1
17:42:28.176 [error] Widget load failure {} {
  className: 'PerspectiveModel',
  moduleName: '@finos/perspective-jupyterlab',
  moduleVersion: '~2.2.1',
  cdnsUsed: false,
  isOnline: true,
  timedout: false,
  error: '{}'
}

[s1lvester]

Hey.

There was a bug in the vscode-jupyter extension that prevented the perspective widget to be loaded. See: microsoft/vscode-jupyter#15406

This is fixed now (v2024.4.0 of the vscode-jupyter extension).

However: This is only the first step. When i Run the "widget-tutorial" here in vscode the perspective widget will now be loaded, unfortunately there seems to be an issue where the output is just never rendered...

15:36:27.425 [info] Cell 3 completed in 0.033s (start: 1715348187391, end: 1715348187424)
15:36:27.425 [debug] Cell 3 executed successfully
15:36:27.430 [debug] Widget Message: Received display data message b420d9a33dbe45748ff6920bb50c507d
15:36:27.449 [debug] Version of IPyWidgets 8 determined after 0s
15:36:27.596 [debug] Widget Message: Waiting for model to be available before rendering it b420d9a33dbe45748ff6920bb50c507d
15:36:27.596 [debug] Widget Message: WidgetManager: Loading class PerspectiveView:@finos/perspective-jupyterlab:~2.10.0
15:36:27.626 [debug] Widget Message: WidgetManager: Loading class LayoutView:@jupyter-widgets/base:2.0.0

Its somewhat amusing to see the tabs rendered without the perspective widgets inside them...

@timkpaine : do you have any idea on how to debug this, or should i raise this issue with the folks at vscode-jupyter again?

[timkpaine]

There's 1 more fix to do, I just need to tweak the CSS rules we use to set min size based on VS Code

[timkpaine]

this was deprecated in 3.*, so reopening