When using CIF data with dash-bio’s NglMoleculeViewer, nothing displays in the viewer on load. But when I hover over the viewer, hold shift and scroll up (by a minimal amount), the intended image suddenly appears. Shift+scroll controls the “clipping layer”, allowing one to view the image clipped at different depths. It’s almost as though this clipping layer initialises too close to the camera or behind it, obscuring the structure until the user moves the clipping layer forwards slightly.
Environment: Windows 11, Python 3.11.8, dash 2.18.2, dash-bio 1.0.2 (I checked, dash versions as old as 2.8 have the issue, as well as dash-bio 0.5+, the version NglMoleculeViewer was implemented).
A minimal example is below.
from dash import Dash, html, Output, Input
import dash_bio
cif_text = """data_example
_cell_length_a 1
_cell_length_b 1
_cell_length_c 1
_cell_angle_alpha 90.0
_cell_angle_beta 90.0
_cell_angle_gamma 90.0
loop_
_symmetry_equiv_pos_site_id
_symmetry_equiv_pos_as_xyz
1 'x, y, z'
loop_
_atom_site_label
_atom_site_type_symbol
_atom_site_fract_x
_atom_site_fract_y
_atom_site_fract_z
C0 C 0 0 0"""
app = Dash(__name__)
app.layout = html.Div(
children=[
html.Div(id="dummy", children=[]),
dash_bio.NglMoleculeViewer(id="ngl-molecule")
]
)
@app.callback(
Output("ngl-molecule", 'data'),
Input("dummy", "children")
)
def return_molecule(_):
return [{
"ext": "cif",
"chosen": {"atoms": "", "residues": ""},
"config": {"type": "text/plain", "input": cif_text},
}]
if __name__ == "__main__":
app.run(debug=False)
On load, before changing clipping with shift-scroll:
After shift scroll (this is intended on load):
Any help or explanation of my (or someone else’s) error would be appreciated.