nglview not working with vscode-jupyter

[gcrth]

Related issue nglviewer/nglview#1085.

pip install nglview==3.1.0

import nglview
view = nglview.show_pdbid("3pqr")  # load "3pqr" from RCSB PDB and display viewer widget
view

The example above works in jupyter notebook, but it does not work in vscode. Changing version of nglview and ipywidgets does not fix the problem.

The important part of the log is

Failed to load model class 'ColormakerRegistryModel' from module 'nglview-js-widgets'
Error: No version of module nglview-js-widgets is registered

nglview-js-widgets is in the cdn https://cdn.jsdelivr.net/npm/nglview-js-widgets/.
jupyter.widgetScriptSources has been configured per https://github.com/microsoft/vscode-jupyter/wiki/IPyWidget-Support-in-VS-Code-Python.
It seems that something goes wrong when loading the module.

[nightroxide]

Same issue for me

[DonJayamanne]

There seems to be some change in nglview that seems to be causing this issue in VS code.
Sorry for the trouble, will try to get to the bottom of this.
Please can you try installing an older version of nglview and see if that makes a difference.
You might need to re-load VS Code after doing that.

[4doom4]

@DonJayamanne I tried it with 2.7.7 and get the same outcome. Maybe this trace helps (is from 3.1.2 nglview though)

Failed to load model class 'ColormakerRegistryModel' from module 'nglview-js-widgets'
Error: No version of module nglview-js-widgets is registered
    at ph.loadClass (https://file+.vscode-resource.vscode-cdn.net/Users/xxxxx/.vscode/extensions/ms-toolsai.jupyter-renderers-1.0.18/out/node_modules/%40vscode/jupyter-ipywidgets8/dist/ipywidgets.js:2:4099813)
    at ph.loadClass (https://file+.vscode-resource.vscode-cdn.net/Users/xxxxx/.vscode/extensions/ms-toolsai.jupyter-renderers-1.0.18/out/node_modules/%40vscode/jupyter-ipywidgets8/dist/ipywidgets.js:2:4403287)
    at ph.loadModelClass (https://file+.vscode-resource.vscode-cdn.net/Users/xxxxx/.vscode/extensions/ms-toolsai.jupyter-renderers-1.0.18/out/node_modules/%40vscode/jupyter-ipywidgets8/dist/ipywidgets.js:2:4097773)
    at ph._make_model (https://file+.vscode-resource.vscode-cdn.net/Users/xxxxx/.vscode/extensions/ms-toolsai.jupyter-renderers-1.0.18/out/node_modules/%40vscode/jupyter-ipywidgets8/dist/ipywidgets.js:2:4094616)
    at ph.new_model (https://file+.vscode-resource.vscode-cdn.net/Users/xxxxx/.vscode/extensions/ms-toolsai.jupyter-renderers-1.0.18/out/node_modules/%40vscode/jupyter-ipywidgets8/dist/ipywidgets.js:2:4092246)
    at ph.handle_comm_open (https://file+.vscode-resource.vscode-cdn.net/Users/xxxxx/.vscode/extensions/ms-toolsai.jupyter-renderers-1.0.18/out/node_modules/%40vscode/jupyter-ipywidgets8/dist/ipywidgets.js:2:4091039)
    at https://file+.vscode-resource.vscode-cdn.net/Users/xxxxx/.vscode/extensions/ms-toolsai.jupyter-renderers-1.0.18/out/node_modules/%40vscode/jupyter-ipywidgets8/dist/ipywidgets.js:2:4402511
    at n._handleCommOpen (https://file+.vscode-resource.vscode-cdn.net/Users/xxxxx/.vscode/extensions/ms-toolsai.jupyter-2024.5.0-darwin-arm64/dist/webviews/webview-side/ipywidgetsKernel/ipywidgetsKernel.js:3:80955)
    at async n._handleMessage (https://file+.vscode-resource.vscode-cdn.net/Users/xxxxx/.vscode/extensions/ms-toolsai.jupyter-2024.5.0-darwin-arm64/dist/webviews/webview-side/ipywidgetsKernel/ipywidgetsKernel.js:3:82830)

[LuhuanWu]

same issue here

[laisFK]

Helo, I have the same problem in VSC, please someone found a solution? Thanks

[4doom4]

There seems to be some change in nglview that seems to be causing this issue in VS code. Sorry for the trouble, will try to get to the bottom of this. Please can you try installing an older version of nglview and see if that makes a difference. You might need to re-load VS Code after doing that.

@DonJayamanne I tried many different versions and got version 3.0.8 (installed via conda conda-forge::nglview=3.0.8) to work with VScode on linux version 1.91.1

Hope this helps

[DonJayamanne]

This seems to be caused by some upstream issue in nglview, I haven't had a chance to identify the root cause as of yet.

[hainm]

There is a change in NGL (which is being used by nglview) in the way it is packaged. The change happened after nglview 3.8. But nglview works fine with notebook (using lab) and lab.

[DonJayamanne]

@hainm its still failing at my end in Jupyter lab
This is with the latest version of nglview

[hainm]

Can you please try install nglview via conda/mamba from conda-forget channel?

I am surprised that it doesn't work for you since I tried myself before publishing the package. Cheers