Notebook

🧪 Panel Chemistry - NGL Viewer¶

The Panel Chemistry NGLViewer allows you to use the powerful JS NGL Viewer using Python 🐍 and HoloViz Panel ❤️.

JSME Editor App

When using NGL please cite

AS Rose, AR Bradley, Y Valasatava, JM Duarte, A Prlić and PW Rose. Web-based molecular graphics for large complexes. ACM Proceedings of the 21st International Conference on Web3D Technology (Web3D '16): 185-186, 2016. doi:10.1145/2945292.2945324.
AS Rose and PW Hildebrand. NGL Viewer: a web application for molecular visualization. Nucl Acids Res (1 July 2015) 43 (W1): W576-W579 first published online April 29, 2015. doi:10.1093/nar/gkv402.

Parameters:¶

object (str): The object to display. For example
- An url like 'rcsb://3dqb.pdb' or 'rcsb://1NKT'.
- A non-url like '1NKT'. This will automatically be loaded as 'rcsb://1NKT'.
- A blob. This requires the extension parameter to be set to the relevant extension.
extension (str): One of '', 'pdb', 'cif', 'csv', 'ent', 'gro', 'json', 'mcif', 'mmcif', 'mmtf', 'mol2', 'msgpack', 'netcdf', 'parm7', 'pqr', 'prmtop', 'psf', 'sd', 'sdf', 'top', 'txt', 'xml'. Default is '', i.e. the blob object is loaded as a url or non-url.
representation (str): A display representation. One of 'axes', 'backbone', 'ball+stick', 'cartoon', 'helixorient', 'hyperball', 'label', 'licorice', 'line', 'point', 'ribbon', 'rocket', 'rope', 'spacefill', 'surface', 'trace', 'unitcell'. Default is 'ball+stick'.
color_scheme (str): A predefined or 'custom' color scheme. One of 'atomindex', 'bfactor', 'chainid', 'chainindex', 'chainname', 'custom', 'densityfit', 'electrostatic', 'element', 'entityindex', 'entitytype', 'geoquality', 'hydrophobicity', 'modelindex', 'moleculetype', 'occupancy', 'random', 'residueindex', 'resname', 'sstruc', 'uniform', 'value', 'volume'. If 'custom' is specified you need to set the 'custom_color_scheme' parameter. Default color_scheme is 'element'.
custom_color_scheme A custom color scheme. See http://nglviewer.org/ngl/api/manual/coloring.html#custom-coloring.
effect (str): One of '', 'spin' or 'rock'. Default is '', i.e. no effect

For layout and styling related parameters see the Panel Customization Guide.

Example¶

In [ ]:

import panel as pn 
from panel_chemistry.pane import NGLViewer # panel_chemistry needs to be imported before you run pn.extension()
from panel_chemistry.pane.ngl_viewer import EXTENSIONS
pn.extension("ngl_viewer", sizing_mode="stretch_width")

In [ ]:

viewer = NGLViewer(object="1CRN", background="#F7F7F7", min_height=700, sizing_mode="stretch_both")

In [ ]:

settings = pn.Param(
    viewer,
    parameters=["object","extension","representation","color_scheme","custom_color_scheme","effect",],
    name="&#9881;&#65039; Settings"
)

In [ ]:

file_input = pn.widgets.FileInput(accept=','.join('.' + s for s in EXTENSIONS[1:]))

def filename_callback(target, event):
    target.extension = event.new.split('.')[1]

def value_callback(target, event):
    target.object = event.new.decode('utf-8')

file_input.link(viewer, callbacks={'value': value_callback, 'filename': filename_callback})

header = pn.widgets.StaticText(value='<b>{0}</b>'.format("&#128190; File Input"))
file_column = pn.layout.Column(header, file_input)

In [ ]:

layout = pn.Param(
    viewer,
    parameters=["sizing_mode", "width", "height", "background"],
    name="&#128208; Layout"
)

In [ ]:

pn.Row(
    viewer,
    pn.WidgetBox(settings, layout, width=300, sizing_mode="fixed",),
)

App¶

In [ ]:

accent="#D2386C"

In [ ]:

pn.template.FastListTemplate(
    site="Panel Chemistry", site_url="./",
    title="NGLViewer", 
    sidebar=[file_column, settings, layout],
    main=[viewer],
    accent_base_color=accent, header_background=accent,
).servable();

Serve the app via panel serve NGLViewer.ipynb and check it out at http://localhost:5006/NGLViewer.

If you add the flag --autoreload you will get automatic reloading when ever you save the file.

You can also use the Panel Jupyter Preview to serve the app in a seperate window in Jupyter Lab.