TypeScript library to visualize annotation on single sequences and multiple sequence alignments
npm install proseqviewerProSeqViewer is a TypeScript library to visualize annotation
on single sequences and multiple sequence alignments.
ProSeqViewer can be integrated in both modern and dynamic frameworks like Angular
as well as in static HTML websites. It is used by MobiDB,
DisProt, RepeatsDB
* Generates pure HTML, compatible with any browser and operating system
* Easy to install
* Lightweight
* Zero dependencies
* Fast, able to render large alignments
* Interactive, capture mouse selections and clicks
* Responsive, dynamically adapt to window changes
Import the JavaScript bundle and CSS from local files
``html`
Alternatively, import from GitHub
`html`
Add component
`html`
Create an instance
`html`
Install ProSeqViewer from npm
`
npm install proseqviewer
Add ProSeqViewer CSS to your angular.json file
`json`
{
styles: ["./node_modules/proseqviewer/dist/assets/proseqviewer.css"]
}
Import in your component
`typescript`
import {ProSeqViewer} from 'proseqviewer/dist';
Add component to your page
`html`
Create an instance in your component
`typescript
// Input sequences
const sequences = [
{sequence: 'TLRAIENFYISNNKISDIPEFVR', id: 1, label: 'ASPA_ECOLI/13-156'},
{sequence: 'TLRASENFPITGYKIHEE..MIN', id: 2, label: 'ASPA_BACSU/16-156'},
{sequence: 'GTKFPRRIIWS............', id: 3, label: 'FUMC_SACS2/1-124'}
]
// Input icons
const icons = [
{sequenceId: 1, start: 2, end: 2, icon: 'lollipop'},
{sequenceId: 1, start: 13, end: 13, icon: 'lollipop'}
]
// Options and configuration
const options = {
chunkSize: 0,
sequenceColor: 'clustal',
lateralIndexes: false
};
// Initialize the viewer
const psv = new ProSeqViewer('psv');
// Generate the HTML
psv.draw({sequences, options, icons});
`
bash
nvm use
npm install
npm run buildall
npm publish
``This program is free software; you can redistribute it and/or modify it under the terms of the CC-BY
License as published by the Creative Commons.