Usage questions about nglview: Please ask here first [5]

[hainm]

For any questions relating to how/why/ ... Or anything you don't know where to ask.
For bug, suggestion or anything you want to ask separately, please open separate issue

Previous Q&As

Or click the Q&A label.

[lan496]

Shape does not appear in even-numbered displays

When I add a shape to NGLWidget, it appears at first. However, it sometimes does not appear in code blocks (see the below screenshot). Is it expected behavior?

Apologies in advance if this is an already-answered question in previous Q&As.

Screenshot

Code

import nglview
from ase import Atoms
print(nglview.__version__)
positions=[(0, 0, 0), (4, 0, 0)]
co = Atoms('H2', positions)
view = nglview.show_ase(co)
view.shape.add_cylinder(positions[0], positions[1], [1, 0, 0], 0.1)
print(view._ngl_component_names)
view  # first

print(view._ngl_component_names)
view  # second: cylinder disapears

print(view._ngl_component_names)
view  # third: cylinder shows again

[samuelflores]

What if I want to extract the positions from the atoms? Let's say I know the chain ID, residue numbers, and atom names, and want to use this to retrieve the coordinates of those two atoms, and then create the line?

[hainm]

hi @lan496: I think it's a bug in nglview. I've opened a new issue to keep track #1003. Thank you for reporting.

[hjuinj]

hi, I have been searching for how to depict bond orders in nglview and so far without success, what would I need to do to get the double bond to show up in this example?

from rdkit import Chem
from rdkit.Chem import AllChem
mol = Chem.AddHs(Chem.MolFromSmiles("C=C"))
AllChem.EmbedMolecule(mol)
view = nv.show_rdkit(mol)
view

[hainm]

hi, I have been searching for how to depict bond orders in nglview and so far without success, what would I need to do to get the double bond to show up in this example?

from rdkit import Chem
from rdkit.Chem import AllChem
mol = Chem.AddHs(Chem.MolFromSmiles("C=C"))
AllChem.EmbedMolecule(mol)
view = nv.show_rdkit(mol)
view

hi @hjuinj Please see one solution in here (but I am not sure if that helps): #948 (comment)

[hjuinj]

thanks, seems to work in my case, does this mean double triple bond depiction is not officially support within nglview right now?

[hainm]

On Tue, Nov 23, 2021 at 3:55 AM hjuinj ***@***.***> wrote: thanks, seems to work in my case, does this mean double triple bond depiction is not officially support within nglview right now?

I am not sure about that for NGL. Maybe.

[luigibonati]

Hi @hainm, thanks for the great work here!
I was wondering whether it is possible to apply a distance-based selection, as illustrated here for NGL: https://nglviewer.org/ngl/api/manual/example/snippets.html#distance-based-selection

thank you!
Best,
Luigi

[hainm]

hi @luigibonati

Hi @hainm, thanks for the great work here! I was wondering whether it is possible to apply a distance-based selection, as illustrated here for NGL: https://nglviewer.org/ngl/api/manual/example/snippets.html#distance-based-selection

thank you! Best, Luigi

hi @luigibonati: Yes, you can do that by writing a custom JS code:

code = """

var o = this.stage.compList[0];
var selection = new NGL.Selection( "RET" );
var radius = 5;
var atomSet = o.structure.getAtomSetWithinSelection( selection, radius );
// expand selection to complete groups
var atomSet2 = o.structure.getAtomSetWithinGroup( atomSet );
o.addRepresentation( "licorice", { sele: atomSet2.toSeleString() } );
o.addRepresentation( "cartoon" );
o.autoView();

"""

view._execute_js_code(code)

[luigibonati]

thank you!

[khoroshyy]

Hi
Is it possible to show a viewer and an image in the output of a single cell?
Thanks.
Petro.

[hainm]

Hi Is it possible to show a viewer and an image in the output of a single cell? Thanks. Petro.

hi @khoroshyy

Yes, you can use ipywidges's AppLayout (or others) to insert the view in one box and your image (Using ipywidgets.Image) in another box.

https://ipywidgets.readthedocs.io/en/latest/examples/Layout%20Templates.html#AppLayout

[garboit]

Hello,

first of all, awesome project!

Now to my question: Is it possible to make a shape assume a different position in each frame?

[hainm]

Hello,

first of all, awesome project!

Now to my question: Is it possible to make a shape assume a different position in each frame?

hi @garboit: This feature is not supported (nglviewer/ngl#376)

[garboit]

Thank you!

For anyone else, who is wondering how to do this, here is a small example:

view._js('''
var shape = new NGL.Shape("my_shape")
shape.addSphere( [ 0, 0, 4 ], [ 1, 0, 0 ], 1.5);
var sphereBuffer = new NGL.SphereBuffer({
  position: new Float32Array([ 0, 0, 0, 4, 0, 0 ]),
  color: new Float32Array([ 1, 0, 0, 1, 1, 0 ]),
  radius: new Float32Array([ 1, 1.2 ]),
})
shape.addBuffer(sphereBuffer)
globalThis.sphereBuffer = sphereBuffer;

var shapeComp = this.stage.addComponentFromObject(shape)
shapeComp.addRepresentation("buffer")
shapeComp.autoView()
''')

def on_frame_change(change):
    frame = change['new']
    view._js(f'''
    globalThis.sphereBuffer.setAttributes({{
        position: new Float32Array([ 0, 0, 0, {frame}, 0, 0 ])
      }})
    this.stage.viewer.requestRender()
    ''')
view.observe(on_frame_change, names=['frame'])

Now I just need to figure out how to add and change the tooltip/hover text of the individual shapes...

[hai-schrodinger]

Nice example. Thank you.

[martin-schlipf]

Hi, I noticed that nglview doesn't store the widget state when executed through nbconvert. Is there a way to make this work?

[hainm]

nglview requires browser to render the 3D image, so you have to execute the notebook with the browser.
Is nglview the problem or is it a general issue for ipywidgets-based packages?

[martin-schlipf]

I cannot comment if that issue also exists for other packages, because I haven't tried it. While I understand that one can only look at the figure in a browser, I currently do not grasp why the figure data is not produced by the automatic execution.
My understanding of nglview is that it prepares a set of commands for the underlying NGL library. This set of commands should not require the browser or am I missing something?

[hainm]

This set of commands should not require the browser or am I missing something?

no, they do not require browser, but NGL does for rendering.

[martin-schlipf]

Okay let me rephrase my question. Say I take the notebook you showed above, when I follow the procedure you outline above, I can open the notebook again after closing it and it will show the figure again.
However if I run it via the command line

jupyter nbconvert --execute --to notebook --output notebook-executed.ipynb notebook.ipynb

and then open the notebook-executed.ipynb the figure is not shown. Is this supposed to work?

[hainm]

No, that won't work as I explained above.

[martin-schlipf]

Okay, I will need to find a different solution then.

…

On Thu, Feb 17, 2022 at 4:12 PM Hai Nguyen ***@***.***> wrote: No, that won't work as I explained above. — Reply to this email directly, view it on GitHub <#1002 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AF67WIMBIQYP2RKBQERBXYLU3UF7PANCNFSM5GOTBSNQ> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>. You are receiving this because you were mentioned.Message ID: ***@***.***>

-- Dr. Martin Schlipf Brünner Straße 10/62 1210 Wien

[ssharlin]

I have a question about .cif files. I wanted to get a crystal structure that fills the entire unit cell, but nglview only shows a single unit.

If I use it via ASE, it shows how I want but any idea how to do that directly? Cause I want to customize the style, and overlay other images to it.

[hainm]

@ssharlin Please try to use the option assembly

view = nv.show_file('your', default=False)
view.center()
view.add_lines(assembly=...)

[Nosslin-S]

Hi !
Thanks for the great work!

I was experimenting with @garboit solution to have moving shapes.
However, I noticed that if I added a trajectory after declaring the shapes, the trajectory would simply not move.
I tried different options with the representations, but could not come up with a solution.
Here is a simple example :
Working

Not working

Here is the minimal example code :

# Working
from ase.io.trajectory import Trajectory
from ase import Atoms
import nglview as nv

traj=[Atoms('C2',[[0,0,0],[1,0,0]]), Atoms('C2',[[0,0,0],[2,0,0]]), Atoms('C2',[[0,0,0],[3,0,0]])]
traj_=[Atoms('C2',[[0,0,1],[1,0,1]]), Atoms('C2',[[0,0,1],[2,0,1]]), Atoms('C2',[[0,0,1],[3,0,1]])]
traj_w=Trajectory('traj.traj','w')
for atom in traj_:
    traj_w.write(atom)
traj2=Trajectory('traj.traj','r')

view = nv.show_asetraj(traj)
view.add_trajectory(traj2) # <-------------------

view._js('''
var shape = new NGL.Shape("my_shape")
var arrowBuffer = new NGL.ArrowBuffer({
    position1: new Float32Array([1,0,0,0,0,0]),
    position2: new Float32Array([1,2,0,0,2,0]),
    color: new Float32Array([ 0, 1, 0, 0,1,0 ]),
    radius: new Float32Array([ 0.2, 0.2 ]),
})
shape.addBuffer(arrowBuffer)
globalThis.arrowBuffer = arrowBuffer;
var shapeComp = this.stage.addComponentFromObject(shape)
shapeComp.addRepresentation("buffer")
shapeComp.autoView()
''')

view

With the trajectory declared after the shapes:

# Not working
from ase.io.trajectory import Trajectory
from ase import Atoms
import nglview as nv

traj=[Atoms('C2',[[0,0,0],[1,0,0]]), Atoms('C2',[[0,0,0],[2,0,0]]), Atoms('C2',[[0,0,0],[3,0,0]])]
traj_=[Atoms('C2',[[0,0,1],[1,0,1]]), Atoms('C2',[[0,0,1],[2,0,1]]), Atoms('C2',[[0,0,1],[3,0,1]])]
traj_w=Trajectory('traj.traj','w')
for atom in traj_:
    traj_w.write(atom)
traj2=Trajectory('traj.traj','r')

view = nv.show_asetraj(traj)

view._js('''
var shape = new NGL.Shape("my_shape")
var arrowBuffer = new NGL.ArrowBuffer({
    position1: new Float32Array([1,0,0,0,0,0]),
    position2: new Float32Array([1,2,0,0,2,0]),
    color: new Float32Array([ 0, 1, 0, 0,1,0 ]),
    radius: new Float32Array([ 0.2, 0.2 ]),
})
shape.addBuffer(arrowBuffer)
globalThis.arrowBuffer = arrowBuffer;
var shapeComp = this.stage.addComponentFromObject(shape)
shapeComp.addRepresentation("buffer")
shapeComp.autoView()
''')

view.add_trajectory(traj2) # <-------------------

view

[hainm]

Dear Nosslin-S, I noted your bug report.

[hainm]

tracked here: #1022

[nffaruk]

Hi, I'm having issues with the MovieMaker with nglview 3.0.3 on python 3.7.11. I get just a black frame output for in_memory=True for both .gif and .mp4 output. However, if download the rendered images with view.download_image and create the clip from those using moviepy (as shown here), it works.

Also, I am wondering how to download/upload rendered images to the remote kernel side instead of downloading to browser side. Thank you.

[hainm]

Can you show exact command? Thanks.

…

On Sat, May 7, 2022 at 2:27 AM Nabil Faruk ***@***.***> wrote: Hi, I'm having issues with the MovieMaker with nglview 3.0.3 on python 3.7.11. I get just a black frame output for in_memory=True for both .gif and .mp4 output. However, if download the rendered images with view.download_image and create the clip from those using moviepy (as shown here <https://ambermd.org/tutorials/analysis/tutorial_notebooks/nglview_movie/index.html>, it works. Also, I am wondering how to download/upload rendered images to the remote kernel side instead of downloading to browser side. Thank you. — Reply to this email directly, view it on GitHub <#1002 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABB645JTJKQSVQ2JENZMBJTVIYELJANCNFSM5GOTBSNQ> . You are receiving this because you commented.Message ID: ***@***.***>

[nffaruk]

When I do it the recommended way in the readme:

from nglview.contrib.movie import MovieMaker
movie = MovieMaker(view, fps=10, in_memory=True, output='bR_helix_restr.mp4')
movie.make()

I get a file that just displays black (same for .gif)

But if I render and save the images first using

from time import sleep

for frame in range(traj.n_frames):
    # set frame to update coordinates
    view.frame = frame
    # make sure to let NGL spending enough time to update coordinates
    sleep(0.5)
    view.download_image(filename='temp_{}.png'.format(frame))
    # make sure to let NGL spending enough time to render before going to next frame
    sleep(2.0)

And then compose and encode with moviepy using

import moviepy.editor as mpy

img_fn = "/home/nffaruk/Desktop/nglview_mov/temp_{}.png"
img_list = [img_fn.format(i) for i in range(traj.n_frames)]
clip = mpy.ImageSequenceClip(img_list, fps=10)
clip.write_videofile("/home/nffaruk/Desktop/nglview_mov/bR_helix_restr.mp4", fps=10)

I get a usable video

[hainm]

Dear @nffaruk

I am able to reproduce the "black frame" issue. Will investigate this further. Thanks for reporting.

[hainm]

tracked here: #1021

[matteoferla]

Thank you @hainm for this great widget.

I wrote a blog post describing how to show neighbours (neighbors) using the snippet from the NGL js manual in nglview. I am using the private method _js (which wraps the send command of DOMwidget) to do this: as it is a non-standard usage as it has been suggested that I ought to check with you in the offchance my dissemination of a way to use this private method is not welcome.

Thanks

[hainm]

hi @matteoferla: That's the best way to go, currently.

[matteoferla]

Hello,

Beyond the google.colab.output.enable_custom_widget_manager() is there any other thing one needs to do for Colab? I ask because if I run the following no representation changes are seen, while I can add components happily:

!pip install nglview
from google.colab import output
output.enable_custom_widget_manager()
from IPython.display import display
import ipywidgets as widgets
import requests
import nglview as nv

view = nv.NGLWidget()
caffeine_block = requests.get('https://www.ebi.ac.uk/chembl/api/data/molecule/CHEMBL113.sdf').text
comp = view.add_component(caffeine_block, ext='sdf')
# adding `time.sleep(1)` here is useless
comp.clear_representations()
comp.add_ball_and_stick(colorValue='brown')
view

• displaying a second time will have fixed the issue most times (so wrapping it in an output widget and clearing it kind of does work)
• It is not an async issue as adding sleep does nothing.
• my Jupyter and colab run 3.0.3 (according to nv._version.get_versions()['version'])
• It does happen in Jupyter notebook but very rarely and only for the update command in a busy view —but it may be mistaking ball+stick with hyperball etc.. The above will work fine even with an added update line

comp.update_ball_and_stick(colorValue='#e97451')   # burnt sienna to be fancy

• In the JS console, The following error happens in widget initialisation:

output_binary.js?vrz=colab-20220608-060045-RC00_453648962:105 Uncaught (in promise) ie {message: 'Widget nglview-js-widgets NGLModel is not supported', stack: 'CustomError: Widget nglview-js-widgets NGLModel is…vrz=colab-20220608-060045-RC00_453648962:101:954)'}

But the widget is made fine. Then on component addition this happens:

manager.min.js:1655 Could not create a view for model id 5940e60ca8384104b287106ee46294f9
manager.min.js:1655 Error: Could not create child view
    at manager.min.js:1655:5152
    at async Promise.all (35yv38sdpnv-496ff2e9c6d22116-0-colab.googleusercontent.com/index 1)

And line 212 of the widget does not log to console the words repr.parametersChanged.

So is this just a product of a missing step or bad import order —like from rdkit import IPythonConsole annoyingly fixes rdkit rendering when rdkit is imported by a module as opposed to by the namespace?

[hainm]

@matteoferla I think it's a bug in google colab:
basically I've tried the simple command to print out the number of views in the frontend. It's two, although I only display the view once.
I guess the commands you run still had effect in one of the view but that view is overlapped by another view having the default representation.

[hainm]

Your post actually reminds me about the old case I asked google's developer but have not got the reply:

#995 (comment)

[hainm]

And here is another report from user: MobleyLab/drug-computing#101 (comment)

[hainm]

I file a case here: googlecolab/colabtools#2853

[matteoferla]

Thank you so much for looking into this. Colab is definitely bizarre.
I probably should have said that Colab runs Python 3.7 and IPython 7 as opposed to 8, which does cause some issues. But majorly it runs each output cell sandboxes in an iframe.

[ruslankhayrut]

Hello,

I have the following simple task: save a rendered NGLView frame into a .png file and then read the file.

Following this manual I can successfully save an image and open it manually from file explorer. However, in my flow I need to open in using Python and use in downstream jobs right after it was saved. I have the following snippet in my Jupyter Notebook:

import nglview as nv
import ipywidgets as w
import time
import threading

from pathlib import Path

view = nv.demo()
view

def save_image(view):
    img = view.render_image()
    
    while not img.value:
        time.sleep(0.1)
    
    with open("img.png", "wb") as f:
        f.write(img.value)

Path("img.png").unlink(missing_ok=True)

thread = threading.Thread(target=save_image, args=(view, ), daemon=False)
thread.start()

open("img.png", "rb").read()

open("img.png", "rb").read()

The problem is that executing cell#2 I get FileNotFoundError. I found out that file is read by open before it's written in save_image function. If I then execute cell#3 manually - it works fine, file exists and not empty. However, if I execute all 3 cells at once (using re-run button in the notebook) - I get the exception. Seems like the image is rendered only when main thread finishes its job.

Adding thread.join() leads to infinite loop (i.e. the image is never rendered). Trying to await for image to be rendered with while-loop and sleep after the thread was started is also not working.

How can I make an image to be rendered and saved before reading the file?

python-3.8.10; nglview-3.0.3; OS - Win, MacOS

[hainm]

Seems like the image is rendered only when main thread finishes its job.

hi @ruslankhayrut, you're right. The main thread send a request to JavaScript client to render the image, we can not "wait" in the main thread because it will block your code. That's why we need to create another thread and run save_image to wait for the image creation there. The simple thing to do is to put your code inside the save_image (rename if needed).

def save_image(view):
    img = view.render_image()
    
    while not img.value:
        time.sleep(0.1)
    # insert your code here to do something with img.value
    # You don’t need to save to disk and read the value again

[ruslankhayrut]

@hainm thank you

[meneshail]

Hi,

I wonder how could I select multiple discontinue residues by index when using nv.color.ColormakerRegistry.add_selection_scheme? The comma-separated selection language doesn't seem to work here.

For example, this will work just fine:

my_color_scheme = [['blue', '1-10']]

nv.color.ColormakerRegistry.add_selection_scheme(
    "test", my_color_scheme
)

v = nv.demo()
v.clear()
v.add_cartoon(color = 'test')
v

Also this:

my_color_scheme = [['blue', '1'],
 ['blue', '2'],
 ['blue', '3'],
 ['blue', '4'],
 ['blue', '5'],
 ['blue', '6'],
 ['blue', '7'],
 ['blue', '8'],
 ['blue', '9'],
 ['blue', '10']]

nv.color.ColormakerRegistry.add_selection_scheme(
    "test", my_color_scheme
)

v = nv.demo()
v.clear()
v.add_cartoon(color = 'test')
v

But not this:

my_color_scheme = [['blue', '1,2,3,4,5,6,7,8,9,10']]

nv.color.ColormakerRegistry.add_selection_scheme(
    "test", my_color_scheme
)

v = nv.demo()
v.clear()
v.add_cartoon(color = 'test')
v

Do you have any idea about this?

Thanks

[YoelShoshan]

@hainm Hi!

I would love to visualize two mdtraj trajectories in the same widget, is that possible ?
I found this issue which seems related - #9
but the API changed so I could not use it.

Is it possible ? and if so, how ?
Thanks :)

[hainm]

Hi, Please try `view.add_trajectory(traj)`

…

Message ID: <nglviewer/nglview/repo-discussions/1002/comments/4729393@ github.com>

[AAriam]

Hi @hainm!

is there a way to directly add volumetric data as a surface?
One can add volumetric data from a file (e.g. .CCP4) using the add_component method, but what if I want to add the same data directly, e.g. from a numpy array, without having to convert it to some map file format?
Thanks a lot in advance!

[hainm]

Hi @hainm!

is there a way to directly add volumetric data as a surface? One can add volumetric data from a file (e.g. .CCP4) using the add_component method, but what if I want to add the same data directly, e.g. from a numpy array, without having to convert it to some map file format? Thanks a lot in advance!

hi @Armin-Ariamajd (sorry for my late reply): You have to create a file that nglview/ngl supports. I don't think it supports adding data directly yet.

[HouckMaurits]

Hi hainm!

I am plotting cyrstal structures using nglview. In the ball and stick representation it does not alway plot the bonds I want. Some plotted bonds are too long and other short ones are not displayed. What is the bond plotting algorithm? Is there a way we could supply a minimum and maximum bond length to the bond length algorithm?

Perhaps even better for crystal structures, bonds are always between anions and cations. Could the algorithm use this information as well? I know that pymatgen has NearNeighbors local environment strategies, such as the class CrystalNN where cation_anion can be supplied as boolean to indicate that bonds form between cations and anions.

I am afraid it is not really possible, but something like this would of course be very helpful!
Best,
Maurits

[adamwoolfe]

Hi, I am using NGLview to visualize antibody structure predictions. I would like to highlight the location of specific parts of the antibody sequence (CDRs) by having them in different colors to the rest of the molecule (for example the structure is in red, but I want residues 100-114 to be in blue. Is it possible to do this? Could you provide some code example?

[HouckMaurits]

Perhaps a bit obsolete to mention, but it took me relatively long before I noticed that also the original NGL javascript code, that sits underneath the NGLview python code, can be edited. That helped me for my customization (changing the colors for certain elements by changing "ElementColors"), but perhaps you can do yours in this way too?

The javascript code can be found in a folder like jupyter\nbextensions\nglview-js-widgets\index.js

[hainm]

The javascript code can be found in a folder like jupyter\nbextensions\nglview-js-widgets\index.js

nglview also expose view._js to run JS code directly too. https://projects.volkamerlab.org/teachopencadd/talktorials/T017_advanced_nglview_usage.html

[alsinmr]

Dear Hai,
I would like to encode dynamics data (or any data) onto a ball+stick model via the atom colors and atom radii (AspectRatio). I've been successful in doing this by simply making a separate representation for every atom with the correct color and aspect ratio, but when I run it in Google Colab, only some of the representations actually show (currently using about 250 representations, but maybe 50-100 are actually visible?). I guess maybe it's just too many representations for Colab to handle (e.g. https://githubtocolab.com/alsinmr/pyDR_tutorial/blob/main/ColabNotebooks/Tpl_basicNMR.ipynb ). The same code works perfectly fine on a local Jupyter notebook.

So, I thought things might work better if I were to make a single representation with different atoms radii and colors. I see you have a nice example in Binder ("custom_color.ipynb") to use a function to define the color of each atom. That should already solve half the problem. Can one do something similar for the atom radii?

Thanks for your help,

Albert

[hainm]

@alsinmr I don't understand your question. It seems to me that you only want to color the atom via radius, right?

First, you label the function (JS) and then use that label as color pattern. In above example, bla_bla is the color scheme (function's label) to be used for add_cartoon (or and add_<method>).

[alsinmr]

No– I want to change the atom radii and color to reflect data acquired at different locations in the protein (see attached image). Sorry if I'm missing something obvious, but I don't see how to adjust the individual atom radii via the Python interface. The attached image I made by using a new representation for every atom, but the large number of representations seems to create a problem in Google Colab (no errors produced- it just stops rendering the additional representations at some point). Similarly, I can get the image I want by adding spheres on top of the atoms with the correct color/radius, but again, it fails in Google Colab the same way. So, I was hoping to be able to have only one representation that somehow had different atom radii for each atom (and also different colors, but this part I already get to work via the JS code you gave me).

[hainm]

@alsinmr
um, I don't have an answer directly for your question. But you can write any JS code with

view._js (or `view. _execute_js_code`)

If I were you, I would

• read the NGL repo's code to see how to change the radii in JS: https://github.com/search?q=repo%3Anglviewer%2Fngl%20radius&type=code
• use view._js to execute the JS code
• use add_scheme_func to make a new color scheme for the updated radii (in step 2 above)
• also, you can read the _execute_js_code in here https://projects.volkamerlab.org/teachopencadd/talktorials/T017_advanced_nglview_usage.html#Advanced-usage

[alsinmr]

I have to work on my javascript skills ;-). But, going through the repo, I found the RadiusFactory class lets you set the radii based on bfactor. I'm working via MDAnalysis, so I just set the bfactor (tempfactor) in MDAnalysis, passed the object, and then for params in representations, set radius='bfactor'. Then, I avoided having to do any passing code to JS for the radii.

Umm, unfortunately, the color via the JS code is also unstable in Google Colab. I got everything I wanted into one representation, but the color data is getting lost most of the time in Colab (sometimes, the color comes through, but most of the time it is just a white molecule). See https://githubtocolab.com/alsinmr/pyDR_tutorial/blob/main/ColabNotebooks/Tpl_basicNMR.ipynb for example. Again, works fine locally. Well....I'm not sure what can be done. I guess it's more a Colab problem than an NGLview problem.

Thanks for your help, anyway. I figured out along the way how to embed these plots into a webpage, so that'll be cool in the future (that's also stable– I guess since the JS is running locally).

[hainm]

sure. Cheers @alsinmr.

[marcodigennaro]

Hi, is there any way to show several nglview.widget.NGLWidget side by side in jupyter?

[hainm]

@marcodigennaro Please try this Layout https://ipywidgets.readthedocs.io/en/7.x/examples/Layout%20Templates.html

(or simpler: from ipywidgets import Box, Vbox, Hbox)

[marcodigennaro]

Thank you for the hint @hainm
Here's how I find the solution

import ipywidgets as widgets

# Create widgets
view1 = nv.show_pymatgen(molecule1)
view2 = nv.show_pymatgen(molecule2)

# Adjust layout to center both molecules
view1.layout.width = 'auto'
view2.layout.width = 'auto'

# Create HBox
hbox = widgets.HBox([view1, view2])

# Display the HBox
display(hbox)

[bpuchala]

I'm using ase.visualize.view(atoms, viewer='ngl') and trying to use add_arrow to add Cartesian axes. When I plot some crystal structures the arrows are aligned as I expect, but in some cases they are rotated relative to the atom positions.

It seems like the position arguments are related to the camera orientation and not the Cartesian coordinates. Is that right? Is there an example setting positions using Cartesian coordinates?

[hainm]

@bpuchala I've asked here in NGL: nglviewer/ngl#1018

[bpuchala]

This is an issue with ase automatically rotating the structure when it generates the pdb description that is used to draw the structure.

[hainm]

ha, it's good to know.

[atleast14possums]

Hello, I'm having a problem with getting an actual image to display instead of just a generic thumbnail.

[hainm]

hi, which version is that? (nglview, ipywidgets, notebook/lab).

[atleast14possums]

nglview 3.1.2 ipywidgets 8.1.2 notebook 7.1.3

[hainm]

hi @atleast14possums

I could not reproduce the issue:
Here is exactly what I did

mamba create -n test python=3.11 nglview=3.1.2 ipywidgets=8.1.2 notebook=7.1.3 -c conda-forge
source activate test
python3 -m jupyter notebook

Can you please try to reproduce my steps?

[gcrth]

Hello, I wonder if it is possible to draw a bounding box. It is useful for checking whether the docking site is correctly selected. Thank you very much.

[hainm]

Dear @gcrth

Can you please have a look at this file so you can use view.shape.add_<something> if that helps?
https://github.com/nglviewer/nglview/blob/master/nglview/shape.py

[gcrth]

I think this is what I am looking for. Thank you very much.

[eric-w-lee]

I'm having some issues with empty view objects like #726.

I'm running view = nv.show_mdanalysis(u) in a Jupyter notebook and attempting to use the provided examples to save a rendered image using threading. However, the threads seem to run infinitely, since the view object is always "empty":

This behavior is ALWAYS fixed by running the view code block again manually, or by interrupting the execution of the notebook. Upon further triaging It seems like the only time this behavior occurs is when running the entire notebook - running sections (for example, running up to the selected cell) works fine. Does this indicate that this might be a jupyter notebook/widget problem?

I'm running jupyterlab==4.2.3, MDAnalysis==2.7.0, nglview==3.1.2, notebook==7.2.1.

[eric-w-lee]

I'm also wondering if there's any way to utilize this in a regular .py script. For example, by rendering the image and then saving directly; but it seems like the render relies in the view loading in properly...

[hai-schrodinger]

I'm also wondering if there's any way to utilize this in a regular .py script. For example, by rendering the image and then saving directly; but it seems like the render relies in the view loading in properly...

No, nglview needs web browser for rendering.

[eric-w-lee]

Gotcha - so an automated Jupyter notebook using papermill would not render an image?

[hai-schrodinger]

Gotcha - so an automated Jupyter notebook using papermill would not render an image?

if there is no browser is involved, then it's a No. Cheers.

[mmonajem]

Hi, can anyone help me how can I rotate the structure below so that it faces a specific crystal pole? I want to see the plane.

from pymatgen.core import Structure
import nglview
structure = Structure.from_file('Al.cif')
structure.make_supercell(10)

Create an NGLView object
view_ngl = nglview.show_pymatgen(structure)

view_ngl.add_unitcell()
view_ngl.camera = "perspective"
# Display the structure
view_ngl.display()