HTMoL

HTMoL Features

Full-stack solution:

Easy to install on an internet server to deploy structural and molecular dynamics data

Easy to embed in any web page with only one line of code, the browser and the GPU will do the rest

Parses atomic coordinates in PDB format

Parses popular MD trajectory formats (Gromacs XTC, Charmm DCD)

Full and flexible control through a single configuration file

Molecular representation control through a command set

Use as a GUI to access MD data located at an HPC cluster

Works in WordPress

Developed with standards in mind:

HTMoL Installation

> git clone https://github.com/tripplab/HTMoL.git

> npm i htmol

> node BinServer.js
	
> HTMoL 3.5.4: BinServer started on port NodePort
	

> netstat -npl | grep node
	
> tcp6 0 0 :::NodePort :::* LISTEN JobID/nodejs
	

> nc -vz WebIP NodePort
	
> Connection to WebIP NodePort port [tcp/*] succeeded!
	

<iframe
 src="http://WebIP/HTMoL/HTMol.html"
 class="HTMoL"
 scrolling="no"
 width="600"
 height="500" ></iframe>

HTMoL Documentation

Parameters and Variables

HTMoL can be further configured in the local/config.js file. The following variables can be set [default value]:

• Trajectory control
autoplay [true] How to start the MD visualization: (true|false).
• Molecular representations
RepresentacionInicial ['SpheresBonds'] Equivalent to CPK. Do not change the representation here, use the 'show' command below.
radius [0.01] SpheresBonds radius.
SphereResolution [5] value has to be >3, use 5 for low resolution, 16 for high resolution. This has an impact in GPU performance.
AxisBool [false] Draw Axis (X red, Y green, Z blue) and Box (yellow): (true|false). To draw the Simulation Box, the dimensions need to be specified with the command CRYST1 in the PDB file.
commandsDefault Define a combination of representations, views and zoom level (see Commands Section below). The example shown here uses the following commands: "select 1-9;show VDW;color 1.0,0.0,1.0;select 3540-3549;show VDW;color 1.0,1.0,0.0;select 0:TRP:0;show VDW;color atom;select none;view BackView;zoom 3;"
• Trajectory information
tinit [0] MD start time in picoseconds.
md_dt [0.002] MD timestep in picoseconds.
nstxtcout [10000] Output frequency saved in trajectory file.
MDTitle ["MD Title"] Provide a title for the MD.
MDdescription [" <p>Summary: </p> <p>PDB ID: <a href='https://www.rcsb.org/pdb/explore/explore.do?structureId=PDBID' target='_blank'>PDBID</a></p> <p>Simulation: </p> <p>Published in Journal Volume:Pages (Year) DOI: <a href='http://dx.doi.org/my_doi' target='_blank'>my_doi</a></p> "] Provide the Summary, PDB ID, Simulation details, Publication link, etc. Each section should be inside a <p></p> block. HTML code allowed.
• Optimization
LineW [2] Width of bonds
LigthPWR [0.5] Intensity of lighting
mxSize [20999999] maximum trajectory file size in bytes. 20999999 is about 20 Mb
NoPaso [100] number of atoms to process in block in the GPU, value has to be <200 due to JavaScript float arrays capacity. Float32Array is used for vertex, and Uint16Array for index

Commands

HTMoL has a set of commands implemented to control how the molecular system and trajectory are visualized ("select value; show value; color value; view value; zoom value;"). This structured language can be used in the commandsDefault parameter defined in the local/config.js file.

• select [none] A range of atoms by PDB index or defined as atom_type:residue_type:chain. Here are some examples:
• select 3-6 Selects atoms with index 3 through 6 in the PDB file
• select 0:0:0 Selects all atoms
• select 0:0:1 Selects all atoms of the first chain
• select 0:0:A Selects all atoms of the chain with label "A"
• select 0:3:2 Selects all atoms of the third residue in the second chain
• select 0:THR:0 Selects all residues of type "THR" in all chains
• select C:ALA:B Selects the atom type "C" of residues type "ALA" of chain with label "B"
• select 4-23,N:GLY:3 Selects atoms with index 4 through 23 in the PDB file, and atoms type "N" of residues type "GLY" of third chain
• show [cpk] Options: vdw, cpk (set radius=0.3), lines, trace.
• color [atom] Options: atom, red, white, green, blue, magenta, yellow. Advanced: it can also be defined by setting the RGB values of the desired color. Each of the three components has to be comma separated and be in the (0.0-1.0) range.
• view [FrontView] Options: FrontView, LeftView, RightView, UpView, DownView. Advanced: a "Custom" view can be defined at the js/ButtonsFunctions.js file in the UserSetView function.
• zoom [0] Positive integer to zoom in, negative integer to zoom out.

MD Trajectory

You may remove explicit solvent (e. g. water) and cut the trajectory file to the relevant part of the simulation where the specific events or process take place for visual clarity, decrease storage file size, and increase transfer speed.

Also, some times it is helpful to remove high-frequency movements with a low-pass filter. However, the final trajectory file should not be used for analysis but for visualization purposes only.

As a good practice, always provide the MD description and simulation details.

Frequently Asked Questions

Is HTMoL free?

HTMoL is a free application for academic use. This includes research and teaching purposes. It is distributed with an Open Source License Agreement.

Where do I get the source code?

You can always find the latest version of HTMoL in GitHub.

How does the GUI work?

The main Menu gives access to several functionalities grouped in five categories: Files, Representations, Tools, and Views (A1). The principal info-bar indicates when the data files are being transferred, if there is a communication error, or the progress of the MD trajectory in frames, percentage, and time lapsed in pico-seconds when played (A2). The trajectory controls allow the user to play, pause, or move one frame forward or backward (A3). The secondary bar gives information on the loaded molecular structure (name and number of atoms) and trajectory data (name and number of frames), B1,2. Different molecules in the system are identified by a distinctive ChainID label, which are displayed (B3). These labels function as a switch to turn on (white label) or off (red label) the display of the corresponding molecule.

The user can rotate the view at any time by click-and-drag with the mouse anywhere inside the application's viewport (C1). Clicking on an atom will show related information (atom's number, type, name, and X-Y-Z coordinates, and molecule's name and number) in the principal info-bar. If the simulation box is defined in the coordinates file, the computational cell can be displayed (yellow lines) along with the coordinates system (X in red, Y in green, and Z in blue lines), through the Menu-Tools-Axis\&SimBox function (C2,3). HTMoL uses a perspective camera to display the system (D1). The user can zoom the view in or out through the corresponding control buttons (D2).


The back-end-user (server admin) can provide information on the molecular system and the MD simulation protocol details. These are defined in the back-end's configuration file. The front-end-user can access the information set without disrupting the display view by clicking on the MD-button. A modal-window will show all the information set in the configuration file under the MDTitle and MDdescription parameters (A1). A common action is to measure the distance between two atoms or the angle defined by three atoms. HTMoL provides this function through the Menu-Tools-Measures (A2). Once selected, the front-end-user can click on two atoms to display the distance, or three atoms to display the angle. The selected atoms will be highlighted in green (B1,2). The measured value will be displayed and updated on every MD frame as the trajectory is played.

HTMoL implements a non-deterministic finite automaton to make atom selections by a set of commands parsed through a syntactic analyzer. The selection can then be modified by a variety of visualization options through the back-end's configuration file, the Console on the Tools menu (A3), or directly on the Representations menu. These include different geometries (e. g. line or Bond, ball+stick or CPK, spacefill or VDW, and back-bone trace) and different color schemes (name or RGB values). A command set is defined in HTMoL. Hence, the back-end-user can set-up a stage which accents or highlights an important region or molecule in the system for the front-end-user to appreciate by just opening the application and playing the MD trajectory. Likewise, the front-end-user can also modify and interact with the molecular system through the Console interface when the application is on Full-window mode (C1). The Console interface is disabled when the applications is embedded on a webpage because the viewport size restrictions would make it impractical to use.

Can I contribute?

Sure! we always welcome new contributors for developing additional functionalities. If you are interested in contributing to the HTMoL project in any way (e.g. improving or extending code/capabilities/features, documenting, etc.) please let us know.

How do I properly cite HTMoL?

Proper citation is essential to continued funding for HTMoL development, as it is the primary way in which we demonstrate the value of our software to the scientific community.

Electronic documents shall include a direct link to the official HTMoL page. Printed documents shall include a reference to the published paper (bibtex, endnote, ris):

M. Carrillo-Tripp*, L. Alvarez-Rivera, O. I. Lara-Ramírez, F. J. Becerra-Toledo, A. Vega-Ramírez, E. Quijas-Valades, E. González-Zavala, J. C. González-Vázquez, J. García-Vieyra, N. B. Santoyo-Rivera, A. Meneses-Viveros and S. V. Chapa-Vergara.
HTMoL: full-stack solution for remote access, visualization, and analysis of Molecular Dynamics trajectory data.
J Comput Aided Mol Des (2018). DOI 10.1007/s10822-018-0141-y

Thank you for your attention to these details.

I have read all the documentation and I still have a question

Please let us know what's the problem you're having.

Benchmarking

HTMoL Examples

Amphotericin B (AmB) dimer, monomer 1 labeled as chain A, and monomer 2 labeled as chain B.
VDW representation. Solvent not shown.
Low-pass filtered XTC trajectory for smooth movement (visualization purposes only).

commandsDefault="select 0:0:A;show VDW;
select 0:0:B;show VDW;color atom;zoom 4;"

Lysozyme with disulfide bridges shown.
CPK representation. Solvent not shown. Unfiltered XTC trajectory.

commandsDefault="show cpk;select S:0:0;
show VDW;color atom;zoom 4;"

Three anesthetic molecules interacting with a DPPC bilayer, monomers individually labeled as chanis 1, 2, and 3.
Phospholipid molecules labeled as chain D. Ions Na and Cl labeled as chains E and F.
VDW and line representations. Simulation Box shown. Solvent not shown. Low-pass filtered XTC trajectory. Custom view.

commandsDefault="select 45-66;show VDW;
color red;select 23-44;show VDW;color green;
select 1-22;show VDW;color white;select 0:0:E;
show VDW;color yellow; select 0:0:F;show VDW;
color 0.6,0.4,0.0;zoom -10;view Custom;"

Same protein shown in the intro but in backbone representation.
Solvent not shown. Simulation Box shown. Low-pass filtered XTC trajectory.

commandsDefault="show trace;view UpView;
zoom -6;"

NaCl in water (chains B,C, and A respectively).
Low-pass filtered XTC trajectory.

commandsDefault="show cpk;select 0:1:A;
color yellow;select 0:0:B;show VDW;
color 0.59,0.23,0.93;select 0:0:C;
show VDW;color green;zoom 6;"

DPPC bilayer with cholesterol (chain A). Phospholipid molecules labeled as chain B.
VDW and line representations. Simulation Box shown. Solvent not shown. Low-pass filtered DCD trajectory.

commandsDefault="select 0:0:A;show VDW;
color atom;zoom 2;"