vscode generates empty image

sodiumnitrate commented 7 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 7 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 7 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 7 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 7 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 7 months ago

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

nglviewer / nglview

vscode generates empty image #1091