Docking curation in the browser with PDBe-Molstar

The original dockviz proved very useful for me. It used py3Dmol wrapped in streamlit to show the viewer to a user. On the other hand, this meant a no-code wrapper to expose a visualization to the browser (streamlit), where the visualization used a python wrapper (py3Dmol) to expose a javascript library (3dmol.js). That's a bit circuitous. It helped when using python libraries like the RDKit and mdtraj, but starts to get unwieldy - particularly when drawing interactions (e.g. H-bonds, pi-pi stacking) - which required yet another library to calculate interactions, followed by passing the interaction coordinates back to py3Dmol to draw arrows or dotted lines. When chopping and changing between views, this can also get laggy.

I'd like to see if this can be done in a simpler, unified way. Mol* (Molstar), is a powerful javascript library for protein visualization that has all the tools for visualizing interactions baked in. It's also very fast with slick GPU rendering. But! Since it's javascript, for simple python folk like myself it's almost impenetrable. Luckily a helpful developer for the PDBe made a plugin that is comparatively simple to implement. It doesn't even require a local install - the dot js file is available on the www.ebi.ac.uk website, equivalent to a cdn.

The visualization below demonstrates PDBe-Molstar using a structure of the Neurokinin 1 receptor bound to a small molecule (I chose this since it shows a few different types of medicinal chemistry interactions - hbonding, pi-pi stacking, and pi-cation). Click the buttons below to drive the viewing style. The main button to try is the Focus on Ligand button, which automatically shows interaction bonds as well as sidechain and backbone atoms of nearby residues to the ligand.

To see how to achieve this yourself, view the source of this page - it's all pretty basic html and some javascript. The wiki in the PDBe-Molstar repo linked above also has great examples of more buttons. I imagine there's a lot more in there for someone who reads javascript.

Press these buttons to control the visualization:

Visualization:

Bonus: PBDe have a bunch more plugins: see here. Looks like RDKit also has a javascript library (link). No python needed.