A set of reusable widgets have been developed that can be embedded in any web environment, from a React \cite{interfaces}, Angular \cite{framework} or Vue \cite{vuejs} based single page web application, a JupyterLab extension, or a static HTML page. They were developed in the TypeScript language using the Stencil library \cite{stencil}. Once they have been transpiled into JavaScript they become standard web components that can be used just like any other HTML tag such as a <div/>
or a <img/>
.
The core widgets are exposed using the <oc-molecule-moljs/>
and <oc-molecule-vtkjs/>
tags. The widgets have a common interface and can be used interchangeably. They take Chemical JSON as input, and a set of parameters can be used to tweak the visualization (such as the isosurface value, the active normal mode, or the molecule representation type). They render a three dimensional representation of the molecule that the user can interact with using the mouse or touch-based interaction, such as the 3Dmol.js based widget shown in Fig. \ref{674871}. The difference between them is that <oc-molecule-moljs/>
uses 3Dmol.js \cite{Rego2015} to render the 3D scene, while <oc-molecule-vtkjs/>
uses vtk.js \cite{vtkjs}.
The major features of the widgets are the display of the molecular structure and connectivity, animation of normal modes, and the display of isosurface data from a cube of data (typically molecular orbital data from a quantum chemical calculation). The vtk.js based widget can display the crystal unit cell and offers volume rendering of cube data, shown in Fig. \ref{607756}, in addition to isosurface rendering.
The <oc-molecule/>
tag wraps the core <oc-molecule-moljs/>
and <oc-molecule-vtkjs/>
and adds a menu so that the user can easily change the visualization parameters. The menu (click on the three dots in the right top corner of the figure) offers:
- Structure representation (ball and stick, Van der Waals. or custom)
- Select the rendering library to use (3Dmol.js or vtk.js)
- Selection of the active normal mode for vibrational mode visualization
- Selection of the isosurface value for molecular orbital visualization
- Selection of the color map used by the volume renderer
- Modification of the opacity function used by the volume renderer