Viztein

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.

Quickstart

$ 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

Examples

Default with Custom Viewport Style

Ball and Stick

Ball and Stick Custom Ratio

Custom Color

Installation

NPM

# latest stable
$ npm install viztein

Component Properties

Data (Object) Required

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' }]
    }
  ]
}

ViewportId (string) optional

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'

ViewportStyle (object) optional

CSS style of the viewport.

viewportStyle Default

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

Dev Build

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