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 [email protected]

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