In-browser dockviz with NGL & RDKitJS

This tool is a protein & docked ligand visualiser using NGL and RDKitJS, which allows pdb/sdf upload while staying localised to your browser to maintain confidentiality.

Visualising modelled small molecule poses in their putative binding pocket is a professional necessity (for me), and happens to be a personal hobby too (see dockviz1, and dockviz2. This makes 3). But I always wanted a visualiser that has all these features:

• can load up in seconds, installation-free
• is open source + free
• has high quality rendering with non-covalent interactions
• accepts industry standard formats (SDFs for ligands)
• parses multi-molecule files and allows ligand choice
• is accessible to med-chem experts unfamiliar with compchemistry
• and MOST importantly: server-free so that confidential structures can be viewed by anyone

Molstar has most of these features, except for the key function (combining two separate structures), which appears to require rebuilding and hosting as an app (e.g.). The precursor to Molstar, NGL, has a concatStructures function, so let's start there.

I'm not a frontend dev, so the result isn't pretty - except where it counts! NGL does a nice job of rendering ligands in a protein pocket, including the surrounding residues and non-covalent interactions calculated on the fly. RDKitJS helps out substantially by providing 2D images and molecular properties. It's still far from a full-featured SBDD tool, but it's great for having a quick look at a series of compounds.

Hopefully it's self explanatory, but to use it: upload a pdb file of the protein in the pdb box, and an SDF of ligands in the SDF box. Click "Prepare SDF" to parse it and load it up into the Molecule Bar with RDKitJS. You can select which molecule to render in this bar with the Prev and Next buttons, then click "Render in NGL" to show the selected molecule from the Molecule Bar in the main NGL window. You can quickly flip through the molecules to make a selection, and click Render to display that one in 3D.

Lastly, on confidentiality: all the data and compute are located in your own browser, and no data is uploaded to someone else's computer. Of course, to verify this, just read the source - it's a single HTML file!