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

[hainm]

@DonJayamanne
I've tried again with my mac:

lab 4.2.4

Exact steps:

mamba create -n test python=3.11 -c conda-forge -y
source activate test
mamba install jupyterlab -c conda-forge -y
mamba install nglview=3.1.2 -c conda-forge -y
jupyter-lab

[MarcSkovMadsen]

There is the same problem for Bokeh/ Panel. See bokeh/jupyter_bokeh#201

[DonJayamanne]

@invemichele You are running into #16008

[samtsevich]

Seems like this issue still there. Any new ideas and/or suggestions on how to fix this in the VS code?

[OWissett]

I am also still experiencing this issue, too!

[nate-russell]

Same issue for me as well.

[RestartDK]

I can confirm when using pip when I downgraded to nglview=3.0.8 it worked locally on my vscode jupyter notebook.

[DonJayamanne]

Closing in favor of upstream issue nglviewer/ngl#1014 & jupyter-widgets/ipywidgets#3878

Work around

Downgrad to nglview=3.0.8

[hai-schrodinger]

@DonJayamanne I don't think two issues you quoted relate to this issue. Nglview is still working fine in jupyterlab. So it makes sense it should work in vscode too?

[hai-schrodinger]

Hi, Yes, it’s coincidence and it might the cause. 3.0.8 works for both vscode and jupyterlab 3.0.10 works for jupyterlab but not for vscode. So it means there is something in vscode that doesn’t follow jupyter (lab) Cheers Hai

…

On Sun, Nov 17, 2024 at 9:08 PM Don Jayamanne ***@***.***> wrote: @hai-schrodinger <https://github.com/hai-schrodinger> nglview doesn't work in VS Code after 3.0.8 as you pointed out. nglviewer/ngl#1014 (comment) <nglviewer/ngl#1014 (comment)> based on my understanding thats the problem, see here (from the above issue) Happy to re-open if you can clarify this comment. Screenshot.2024-11-18.at.13.06.38.png (view on web) <https://github.com/user-attachments/assets/a7809e6c-17b7-483c-8eb6-aa3ba079ef14> — Reply to this email directly, view it on GitHub <#15757 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AISFXNEPJTLTJHB4LUKQI4L2BFDYHAVCNFSM6AAAAABJFJT6X2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDIOBRG44DANBTHA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[DonJayamanne]

vscode. So it means there is something in vscode that doesn’t follow jupyter (lab) Cheers Hai

VS Code doesn't use Jupyter Labs application model for registering of widgets, we still use the architecture that was available in Jupyter Notebooks (hence the directories share/jupyter/nbextensions and share/jupyter/labextensions in a Python environment. Jupyter Lab uses scripts defined in share/jupyter/labextensions).
From what I know both mechanism are still valid and still supported by IPyWidgets.

Onto the problem, I can see there's something clearly wrong in the index.js file generated in the nbextensions/nglview-js-widgets/index.js
Line 16229, colum 4410 ,Lt=new s;
The variable s is not defined hence the JS code in index.js falls over. Resulting in the widgets not getting rendered.

If however you look at the similar code in the labextensions file, you can see that the code is new An and the value for An is defined.

Basically something wrong in the index.js file generated for the nbextensions/nglview-js-widgets/index.js file.

@hai-schrodinger /cc

[hainm]

Thank you. That makes sense. Then I think it’s good to close this. Best

…

On Mon, Nov 18, 2024 at 3:46 AM Don Jayamanne ***@***.***> wrote: vscode. So it means there is something in vscode that doesn’t follow jupyter (lab) Cheers Hai VS Code doesn't use Jupyter Labs new widget model, we still use the widget architecture that was available in Jupyter Notebooks (hence the directories nbextensions and labextensions. Jupyter Lab uses scripts defined in labextensions. I can see there's something cleraly wrong in the index.js file as well in the nbextensions/nglview-js-widgets/index.js Line 16229, colum 4410 ,Lt=new s; The variable s is not defined hence the JS code in index.js falls over. If however you look at the similar code in the labextensions file, you can see that the code is new An and the value for An is defined. Basically something wrong in the index.js file generated for the nbextensions/nglview-js-widgets/index.js file. @hai-schrodinger <https://github.com/hai-schrodinger> /cc — Reply to this email directly, view it on GitHub <#15757 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABB645LL3O6LQT7BDLPNKPD2BGSP5AVCNFSM6AAAAABJFJT6X2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDIOBSGI4TSMRTGE> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[DonJayamanne]

Here's another duplicate issue with the same problem nglviewer/nglview#1106

[hai-schrodinger]

Thanks Don. Does vscode have a plan to use lab instead? (Just curious since I am going to fix nglview anyway, if it’s possible) Hai

…

On Mon, Nov 18, 2024 at 5:38 PM Don Jayamanne ***@***.***> wrote: Here's another duplicate issue with the same problem nglviewer/nglview#1106 <nglviewer/nglview#1106> — Reply to this email directly, view it on GitHub <#15757 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AISFXNDHG5O4IOQS6DDHHAL2BJUAFAVCNFSM6AAAAABJFJT6X2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDIOBUGI4DANJXGI> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[DonJayamanne]

Thanks Don. Does vscode have a plan to use lab instead?

Unfortunately not at this stage, simply because the widgets placed in nbextensions folder is still a supported by IPyWidgets

[DonJayamanne]

I've created an issue to track such a task, but this will not happen in the short term, definitely not in the next few months.
#16233
Primary reason is widgets work well today, with the exception of a few like nglview & perhaps a few others that we/i am not aware of (due to similar reasons, i.e. widgets placed in nbextensions folder are broken)

[hai-schrodinger]

Primary reason is widgets work well today, with the exception of a few like nglview & perhaps a few others that we/i am not aware of (due to similar reasons, i.e. widgets placed in nbextensions folder are broken)

Agree.

[hainm]

Guys,

Please try latest version, v3.1.4
pip3 install nglview==3.1.4
(conda version will be released later via conda-forge)

[hainm]

~Closing in favor of upstream issue nglviewer/ngl#1014

It's indeed an issue with NGL (2.2.2). I have to distribute two versions for nbclassic (and VSCode; use NGL 2.1.1) and for jupyterlab (use NGL 2.2.2).

Thanks @DonJayamanne again for pointing out the right direction. The original issue was out of my sign since I didn't realize that jupyter notebook uses lab under the hood.

[DonJayamanne]

Thanks for looking into this and fixing it