Viztein is a React library component for visualizing proteins and other macromolecules. The code is a light wrapper around NGL which uses WebGL for rendering graphics.

$ npm install viztein@0.1.7 

import Viztein from 'viztein'; class Example extends React.Component { render() { return ( <Viztein data={{ filename: "https://files.rcsb.org/download/4hhb.pdb" }} /> ); } }; 

JSFiddle

Default with Custom Viewport Style

Ball and Stick

Ball and Stick Custom Ratio

Custom Color

# latest stable $ npm install viztein 

The macromolecule source and display config data.

Requires a filename key which can be a file path or url path to the source data. Supported file types are mmCIF, PDB, PQR, GRO, SDF, MOL2, and MMTF. A config key can also be passed in to change the display options. Each config option contains a type and input. The type is the name of the NGL function to use and the input are the arguments to pass in. A list of display functions is found in the NGL molecular display documentation.

data Prop Example:

{ filename: 'https://files.rcsb.org/download/4hhb.pdb', config: [ { type: 'addRepresentation', input: ['ball+stick', { color: 'orange' }] } ] } 

Id of the div element to render the graphic inside. When rendering multiple Viztein components on the same page, pass in an unique viewportId prop to each Viztein component.

viewportId Default

'viztein-viewport' 

CSS style of the viewport.

viewportStyle Default

{ backgroundColor: 'black', width: '500px', height: '500px' } 

$ git clone https://github.com/mcmenemy/viztein.git $ cd viztein $ npm install $ npm start