vscode generates empty image

sodiumnitrate commented 11 months ago

I'm using vscode to edit .ipynb files. I'm also using pyenv to manage my python versions. I'm using 3.11.2, and have set my jupyter notebook kernel accordingly. I have:

import nglview as nv
import ipywidgets

view = nv.show_pdbid("3pqr")
view

but only a thin white image with no apparent content shows up. I verify I'm using the correct python version within the notebook:

import sys
print(sys.version)
import os
print(os.system("pyenv which python"))

which outputs

3.11.2 (main, Mar  5 2023, 23:08:47) [Clang 13.1.6 (clang-1316.0.21.2.5)]
[/Users/iremaltan/.pyenv/versions/3.11.2/bin/python](https://file+.vscode-resource.vscode-cdn.net/Users/iremaltan/.pyenv/versions/3.11.2/bin/python)

I get no image when I use jupyter notebook either. Note that I had to add a kernel manually in /Users/iremaltan/Library/Jupyter/kernels to be able to use the same python version. Thus, when I try to run

jupyter-nbextension enable --py --sys-prefix nglview

it looks for a python 3.9 and spits out No module named 'nglview'. What do I do?

Version report

python -c 'import nglview; print(nglview.__version__)'
3.0.8

python -c 'import ipywidgets; print(ipywidgets.__version__)'
8.1.1

hainm commented 11 months ago

I am not sure if nglview supports VSCode.

t looks for a python 3.9 and spits out No module named 'nglview'

Because you have not installed nglview for python 3.9 yet? You can try python3 -m jupyter notebook, assuming that python3 is the 3.11.2 version that you installed nglview to.

sodiumnitrate commented 11 months ago

Thank you for that. I know it's not installed in 3.9, and I use the 3.11.2 kernel which can load the module. I had to downgrade notebook to a lower version as described here, and then run

jupyter nbextensions_configurator enable --user
jupyter nbextension enable --py --sys-prefix widgetsnbextension
jupyter nbextension enable --py --sys-prefix nglview

It now creates a big enough window as a display area, but does not display any protein. I even tried creating a simple html file and viewing that -- I can see the stage but no protein. I'm not sure if I'm doing something obviously wrong, but here's the html:

<!DOCTYPE html>
<html>
    <head>
        <title>test</title>
    </head>
    <body>
        <script src="https://cdn.rawgit.com/arose/ngl/v2.0.0-dev.31/dist/ngl.js"></script>
        <script>
            var stage;
            document.addEventListener("DOMContentLoaded", function () {
              stage = new NGL.Stage("viewport");
              stage.loadFile("rcsb://1crn", {defaultRepresentation: true});
            });
          </script>
          <div id="viewport" style="width:800px; height:800px;"></div>
</body>
</html>

It just renders an 800x800 black box with no protein. This is similar to what I see in jupyter (a white box version anyway). Tried both firefox, safari, and chrome, but just a black box. I can see the example codepen, just not anything local.

hainm commented 11 months ago

I don't really know how to debug then. It's very straight forward to use nglview nowadays. Basically, you just need to do pip install nglview or conda install nglview -c conda-forge without any enable step in notebook or lab.

sodiumnitrate commented 11 months ago

Update: both jupyter notebook and vscode can load local files, but not fetch them from pdb using show_pdbid. The html version works when I change the file address to "rcsb://1crn.pdb". Not sure if this is the intended behavior.

hainm commented 11 months ago

That show_pdbid issue should be fixed in https://github.com/nglviewer/nglview/pull/1086

hainm commented 1 day ago

Latest, v3.1.4, is supposed to work with VSCode.

nglviewer / nglview

vscode generates empty image #1091