ProtVista PDB

Important: Version 4.0.0 is the final release of ProtVista PDB. This package is no longer under active development.

For future development and sequence feature visualisation, users should use Nightingale.

PDB ProtVista is the PDBe implementation of the sequence feature viewer ProtVista (Nightingale).

It provides a reusable web component for displaying sequence features and structural annotations from PDBe and related resources.

Publication

PDB ProtVista: A reusable and open-source sequence feature viewer

Mandar Deshpande, Mihaly Varadi, Typhaine Paysan-Lafosse, Sreenath Nair, Damiano Piovesan, Saqib Mir, Aleksandras Gutmanas, Silvio C. E. Tosatto, Sameer Velankar

22 July 2022, bioRxiv
https://doi.org/10.1101/2022.07.22.500790

For detailed documentation and examples, see the PDBe ProtVista Wiki.

Getting started

Install dependencies

npm install

Run locally

Start the Vite development server:

npm run dev

The development server runs on:

http://localhost:1339

Vite will automatically reload the page when source files change.

Build

Create the production library bundles:

npm run build

The generated files are written to dist/ and include:

protvista-pdb-<version>.min.mjs
protvista-pdb-<version>.min.js
protvista-pdb-<version>.min.css

The .mjs file is the ES module build and the .js file is the UMD build.

Preview the production build

npm run preview

The preview server runs on port 1339.

Usage

Import the component:

import "protvista-pdb";

Then use the web component in your HTML:

<protvista-pdb accession="P24666"></protvista-pdb>

Styles

The bundled stylesheet is also exported by the package:

import "protvista-pdb/style.css";

Examples

UniProt accession

<protvista-pdb accession="P24666"></protvista-pdb>

PDB entry and entity

<protvista-pdb
  entry-id="1trn"
  entity-id="1"
></protvista-pdb>

Ligand

<protvista-pdb ligand-id="STI"></protvista-pdb>

Selected API tracks

<protvista-pdb
  accession="P01178"
  api-names="unipdb,secondary_structure_variation,ligand_sites,interface_residues,annotations,rsa_distribution"
  always-expanded="rsa_distribution"
></protvista-pdb>

Development

The project uses:

• Vite for development and library builds
• Lit for web components
• Nightingale components for sequence visualisation
• D3 for data visualisation

Available npm scripts:

npm run dev      # Start the development server
npm run build    # Build the distributable library
npm run preview  # Preview the production build

License

Apache-2.0