Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

ngl

arose12.4kMIT2.4.0TypeScript support: included

Scalable molecular graphics for the web

molecular graphics, molecular structure, chemical structure, science

readme

License Changelog npm version Build Status Standard Gitter Code Quality: Javascript Total Alerts

NGL Viewer is a web application for molecular visualization. WebGL is employed to display molecules like proteins and DNA/RNA with a variety of representations.

See it in action:

Integration with python and R:

Documentation:

Features

  • Molecular structures (mmCIF, PDB, PQR, GRO, SDF, MOL2, MMTF)
  • Density volumes (MRC/MAP/CCP4, DX/DXBIN, CUBE, BRIX/DSN6, XPLOR/CNS)
  • User interaction (mouse picking, selection language, animation, image export)
  • Coordinate trajectories (DCD & PSF, NCTRAJ & PRMTOP, TRR/XTC & TOP, remote access via MDSrv)
  • Embeddable (single file, API)

Usage

Since the NGL Viewer is a set of static files to be viewed in a web-browser there is not much of an installation needed. For development purposes it will be helpful to clone this repository and serve it locally (see below). When embedding the NGL Viewer as a library it is sufficient to include the self contained build dist/ngl.js. A full web application including a GUI can be found in the examples directory.

To install the current release from npm do npm install ngl.

Acknowledgments

This project would not be possible without many fine open-source projects. Especially the three.js project provides a great foundation.

  • three.js
    • NGL relies on the three.js library to interface WebGL
    • NGL's GUI is based on the three.js editor UI
  • sprintf.js - for formatting text
  • jsfeat - the SVD code for the superposition method is from jsfeat
  • ESDoc - for documentation
  • Vitest - for unit testing
  • Chroma.js - for color handling
  • FlexiColorPicker - for color picking
  • Virtual DOM List
  • Font Awesome - for icons
  • JS Signals
  • tether.js
  • pako - zlib port
  • Open Source PyMOL - screen aligned cylinder shader
  • VTK Quadric shader code from the PointSprite Plugin - quadric surface center calculation
  • HyperBalls - hyperball stick shader - Chavent, M., Vanel, A., Tek, A., Levy, B., Robert, S., Raffin, B., & Baaden, M. (2011). GPU-accelerated atom and dynamic bond visualization using hyperballs: a unified algorithm for balls, sticks, and hyperboloids. Journal of Computational Chemistry, 32(13), 2924–35. doi:10.1002/jcc.21861
  • Mol* - for parsing CIF and binaryCIF files - David Sehnal, Sebastian Bittrich, Mandar Deshpande, Radka Svobodová, Karel Berka, Václav Bazgier, Sameer Velankar, Stephen K Burley, Jaroslav Koča, Alexander S Rose: Mol* Viewer: modern web app for 3D visualization and analysis of large biomolecular structures, Nucleic Acids Research, 2021. doi:10.1093/nar/gkab31.

Funding sources:

  • RCSB PDB funding by a grant [DBI-1338415; PI: SK Burley] from the NSF, the NIH, and the US DoE
  • NCI/NIH award number U01 CA198942
  • DFG Projekt HI 1502

Cite

When using NGL please cite:

  • AS Rose, AR Bradley, Y Valasatava, JM Duarte, A Prlić and PW Rose. NGL viewer: web-based molecular graphics for large complexes. Bioinformatics: bty419, 2018. doi:10.1093/bioinformatics/bty419
  • AS Rose and PW Hildebrand. NGL Viewer: a web application for molecular visualization. Nucl Acids Res (1 July 2015) 43 (W1): W576-W579 first published online April 29, 2015. doi:10.1093/nar/gkv402

changelog

Change Log

All notable changes to this project will be documented in this file, following the suggestions of Keep a CHANGELOG. This project adheres to Semantic Versioning.

[v2.4.0]

  • Summary of changes from v2.3.0

    Added

    • Reinstated the PLY parser

      Changed

    • Default to bcif format instead of mmtf in RCSB and PDBe data providers

[v2.3.0]

  • Summary of changes from v2.2.2

    Added

    • Support binary CIF files
    • Parse connectivity from PDBe updated mmCif format
    • PDBe as new datasource

      Changed

    • RCSB provider now defaults to binary CIF download instead of deprecated MMTF format
    • Upgrade Three.js dependency to v0.158. Upgrade dependencies to resolve issues reported by npm audit
    • Dev: replace Jest test runner with Vitest

      Removed

    • .PLY parser has been removed due its reliance on primitives unavailable in newest Three.js versions

[v2.2.2]

  • Summary of changes from v2.2.0

    Changed

    • Fix coreCif (elements with charges), mmCif (handle chem_comp block) files parsing
    • Fix Colormaker class after v2.2.0 change in bundling

[v2.2.0]

  • Summary of changes from v2.1.1

    Added

    • Pymol mouse bindings: add focus scroll #992

      Changed

    • Remove support for Internet Explorer #993
    • Add inferBonds loading parameter #977

[v2.1.1]

  • Summary of changes from v2.0.0

    Changed

    • Inline getAllowedContour result #988
    • Fix calculate chain names #979
    • Fix pdbwriter model format #984
    • Reworked structure.refreshed signal and logic on updates #942
    • Housekeeping for github actions #976
    • Fix CL1 atom type guess #959
    • Typescript delarations #958
    • Fix pdbqt #957
    • molfile v3000 #955
    • Fix typing of CylinderBuffer #906
    • Fix sdf atom names #949
    • Fix unecessary structure disposal #941
    • Housekeeping #929

[v2.0.0]

  • Stable release

    Added

  • Alphafold Datasource (@fredricj)

    Changed

  • Enable three.js treeshaking in build config (@milot-mirdita)
  • Stable angle calculation in dihedral histrogram representation
  • Fix atom name writing in PdbWriter

[v.2.0.0.dev.40]

Added

  • color management
  • Export many more types (representations, params)
  • support coloring atoms or bonds by external data

Changed

  • default surface type is 'av'
  • numerous Typescript fixes, typos etc
  • build system fixes and dependency updates
  • fix CylinderImpostor bugs

[v.2.0.0.dev.39]

Added

  • allow writing of partial PDB structure
  • more typescript declarations
  • CallbackTrajectory class and example

Changed

  • catch errors thrown from sprintfjs in label format

[v.2.0.0.dev.38]

Added

  • contour option for volume surfaces (electron density maps)
  • buble, for transpiling some ES2015 features (e.g. classes, arrow functions, ...)
  • volume slice representation including interpolation support
  • xplor/cns volume file parser
  • colorVolume parameter for surface representation of volume data
  • voxelSize parameter for volume file parser
  • support for non orthogonal cell in cube file parser
  • dsn6/brix volume file parser
  • psf topology/structure file parser
  • wwPDB validation report xml parser, representation and colorschemes
  • support for picking Shape objects, Volume slices, Contact bonds
  • scroll mouse behavior to change far/near clipping and fog
  • label primitive for Shape class
  • support for reversing color schemes with colorReverse parameter
  • independent component movement via .setPosition, .setRotation, .setScale, .setTransform
  • bonded and ring selection language keywords
  • resname list to selection language, [ALA,GLU]

Changed

  • renamed volume parameter in molecular surface representation to colorVolume
  • renamed colormaker classes from colorMaker to colormaker, i.e. removed camel case
  • renamed ColormakerRegistry.getTypes to .getSchemes
  • colormaker subclasses now auto-register with ColormakerRegistry
  • refactored buffer classes to use a data object as input
  • refactored picking to be more general
  • replaced PickingData with PickingProxy
  • updated three.js to r85
  • updated chroma.js to 1.3.3
  • replaced utils/bitset with utils/bitarray
  • tweaked aminoacid keywords in selection language to follow rasmol/jmol, vmd

Removed

  • stage/component.centerView method, use .autoView instead
  • GidPool, picking handled by Picker objects
  • deprecated use of # for element selection, use _ instead

v0.9.3 - 2016-10-14

Changed

  • increased light distance from camera, to fix unlit rendering
  • remove double quotes from atomnames in chemComp cif parser

v0.9.2 - 2016-10-06

Changed

  • fix, moved polyfills back inside the bundle

v0.9.1 - 2016-10-06

Changed

  • removed (wrongly added) ngl2.js from dist folder
  • fixed chemComp cif parser not passing chainid

v0.9.0 - 2016-10-05

Added

  • lazy representation parameter that only builds & updates the representation when visible
  • chainname based color scheme
  • BondHash class to quickly get atoms connected to an atom
  • SpatialHash class to quickly get neighboring atoms/points
  • XmlParser parameter to use the browser's DOMParser
  • attachment (top, middle, bottom; left, center, right) for LabelRepresentation/TextBuffer
  • border color and width for LabelRepresentation/TextBuffer
  • colored background rectangle for LabelRepresentation/TextBuffer
  • "offset" style rendering of double/triple bonds (@fredludlow)
  • PubchemDatasource to load cid as sdf, pubchem://16490
  • basic entity support (type, description, chain mapping; mmcif, mmtf)
  • entitytype, moleculetype, chainid, polymer color schemes
  • ShaderRegistry, DecompressorRegistry
  • box display for "axes" representation

Changed

  • ResidueindexColorMaker colorscale domain on a per chain basis
  • ChainindexColorMaker colorscale domain on a per model basis
  • Fixed, initial parameters for a Buffer not taken into account
  • ignore bonds that are defined multiple times in PDB parser
  • updated mmtf lib to v1.0
  • use npm as the build system
  • complete list of ion and saccharide group names

Removed

  • gulp as the build system

v0.8 - 2016-07-22

Added

  • gulp build scripts
  • mmtf v0.2 support
  • support for rendering double/triple bonds, enable via multipleBond Representation parameter (@fredludlow, @arose)
  • stage.clicked signal (renamed from .onPicking)
  • stage.hovered signal
  • parsing of "chem comp" cif files
  • experimental "axes" representation showing the principal axes of an atom selection
  • added cone, arrow & ellipsoid buffers
  • added Shape class as a simple way to add custom shapes to the scene

Changed

  • reorganized everything to use es6 modules
  • read bondOrder from 'pdbx_value_order' in mmcif files
  • interpret 'CONECT 1529 1528 1528' as double bond in pdb files
  • side Buffer/Representation parameter changed: THREE.FrontSide => "front", THREE.BackSide => "back", THREE.DoubleSide => "double"
  • support for negative resno values in selections: "-5:A", "-12--8", "-12-0"
  • use chemical component type (available in mmtf) for determining molecule type
  • .get/setOrientation return/argument changed
  • enable SDF font as the default TextBuffer class only on Chrome
  • support for building using three-jsnext
  • renamed radiusSegments parameter to radialSegments
  • WebWorkers (for building surfaces) no longer need to load the main script file
  • NGL.GET renamed to NGL.getQuery

Removed

  • python-based build scripts
  • closure-compiler
  • stage.signals.onPicking (renamed to .clicked)
  • stage.signals.atom/bond/volume/nothingPicked, use .clicked instead
  • NGL.mainScriptFilePath no longer needed
  • NGL.useWorker, use "useWorker" representation parameter

v0.7.1a - 2016-06-02

Changed

  • fixed version in builds

v0.7.1 - 2016-06-02

Added

  • orthographic camera mode
  • backgroundColor parameter for Stage
  • x/y/z offset parameters for labels (TextBuffer)
  • OX1 atoms are recognized as part of the protein backbone
  • stage.makeImage now increments the task counter
  • added .isIdentity method to test if an Assembly is an identity transformation over all chains
  • embedded-dev build target (@sbliven)
  • support for responseType = "json" to efficiently load json data

Changed

  • there is no longer a fake unitcell created when no space group information is available
  • the query string is removed from urls before the determining file info (e.g. name, extension)
  • fixed labelText param not working in LabelRepresentation
  • enable SDF font as the default only on Chrome (fixes labels not shown on some OS/Browser)
  • ignore 'given' ncs operators
  • ensure that resname is upper case

Removed

  • stage.setTheme removed (use new backgroundColor parameter), themes now part of GUI code
  • NGL.Preferences is now part of the GUI code and removed from NGL.Stage. Setting overwritePreferences: true when instantiating an NGL.Stage object is not necessary anymore.
  • removed .requestVisibility method and signal (too GUI specific, if needed, should be handled there)

v0.7 - 2016-05-08

Added

  • Store and Proxy classes for memory efficiency
  • MMTF, DXBIN, DCD files format parsers
  • 'unitcell' representation
  • stage.makeImage (returns Promise)
  • take NCS operations into account when creating unitcell & supercell assemblies
  • added multi sample antialias rendering
  • added support for spinning around an axis
  • use bitsets for storing selections of atoms
  • Assembly and AssemblyPart classes
  • stage.toggleFullscreen method
  • read occupancy data when available (mmCIF, pdb, mmtf)
  • occupancy color scheme
  • alternate location support in selections, e.g. %B
  • read insertion codes when available (mmCIF, pdb, mmtf)
  • insertion code support in selections, e.g. ^A
  • numeric residue name support in selections, e.g. [032]
  • Queue class to handle async tasks

Changed

  • fixed transformation matrix in mrc/ccp4 parser
  • optimized near clipping
  • Fiber class remanamed to Polymer
  • more consistent fog
  • use workers more sparsely due to the large overhead of creating them
  • create font SDF on demand, remove asset dependency
  • integrated three.js lighting into custom shaders
  • MIGRATION: chainname read from auth_asym_id instead of from label_asym_id field
  • DOC: clarified apache configuration for deployment
  • FIX: cif parser, ignore non-displayable bonds between symmetry mates
  • FIX: cif parser, struct_conn bonds not added for multiple altloc atoms
  • LIB: updated signals.js
  • LIB: updated promise.js
  • LIB: updated three.js
  • LIB: updated pako.js to pako_inflate.js (no deflation support needed)
  • CODE: support loading of Blob objects in addition to File objects
  • CODE: tweaked DistanceRepresentation visibility params

Removed

  • zip, lzma, bzip2 decompression
  • removed async.js
  • mdsrv related code and documentation
  • stage.exportImage (makes image and triggers download), use stage.makeImage

v0.6 - 2015-10-12

Added

  • MIGRATION: Stage.loadFile signature changed, now returns a Promise and does not accept callbacks
  • MIGRATION: moved trajectory server into its own repository: MDSrv
  • ADD: Support for MOL2 and SDF files
  • ADD: Support for DX files
  • ADD: Support for PQR files
  • ADD: ExampleRegistry singleton
  • ADD: PluginRegistry singleton
  • ADD: Datasource class to use instead of hard-coded paths
  • ADD: GidPool
  • ADD: simple xml parser
  • ADD: APBS plugin to load PQR and DX file, simple GUI
  • ADD: bond and surface picking
  • ADD: User-defined color schemes (API)
  • GUI: VirtualList and VirtualTable
  • GUI: re-sizable sidebar (contents still need to be made responsive)
  • WIP: scripting API

Changed

  • EXAMPLES: general fixes and enhancements
  • DOC: moved installation and development information into the README
  • GUI/DOC: Higher color contrast for GUI and documentation pages
  • CODE: qunit updated
  • CODE: moved logical units of code into their own files
  • CODE: speeded up secondary structure assignment from PDB/mmCIF files; fixed bugs leading to wrong assignment
  • CODE: element color scheme now uses colorValue parameter to color carbon elements
  • CODE: script and assets paths are now configurable
  • CODE: more forgiving pdb parsing wrt to model records
  • CODE: helper function for re-ordering atoms
  • CODE: enhancements to handling Web Workers (WorkerPool, lazy Worker creation)
  • CODE: enhancements to volume triangulation (limit to given box, skip empty parts)
  • CODE: all *Buffer classes now inherit from Buffer and share common code
  • CODE: BufferAttributes can be re-used or grown
  • CODE: moved Buffer-specific code out of Representation class
  • CODE: molecular surface enhancements (color by atom, filter by atom)
  • CODE: nicer clipping of meshes and impostors (unlit interior to make them appear solid)
  • CODE: optimized kdtree building
  • CODE: clearer atomnames handling for fiber creation
  • CODE: Color handling code refactored exposing more parameters
  • CODE: Basic support for async creation of representations (so far used for molecular surfaces and volume triangulation)
  • CODE: chunked data loading and parsing via streamer class
  • CODE: faster autobonding of large residues (e.g. hydrated lipids)
  • CODE: WebWorker support while using development and build files
  • CODE: WebWorker used for decompression, parsing and surface generation
  • FIX: Issue #7
  • FIX: residues at the end of fibers may not require all backbone atoms
  • FIX: standard compatible atom names when writing pdb files
  • FIX: origin coordinates not used/read from mrc header

Removed

  • DEL: removed FragFit plugins

v0.5 - 2015-30-04

Added

  • Initial release