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