ProSeqViewer 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
<head><linkrel="stylesheet" type="text/css" href="sqv.css"><scriptsrc="sqv-bundle.js"></script></head>Alternatively, import from GitHub
<head><linkrel="stylesheet" type="text/css" href="https://rawgithub.com/BioComputingUP/ProSeqViewer/master/dist/assets/proseqviewer.css"><scriptsrc="https://rawgithub.com/BioComputingUP/ProSeqViewer/master/dist/sqv-bundle.js"></script></head>Add component
<body><divid="psv"></div></body>Create an instance
<head><!--Put this block at the end of your head section--><script>constsequences=[{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 iconsconsticons=[{sequenceId: 1,start: 2,end: 2,icon: 'lollipop'},{sequenceId: 1,start: 13,end: 13,icon: 'lollipop'}]// Options and configurationconstoptions={chunkSize: 0,sequenceColor: 'clustal',lateralIndexes: false};// Initialize the viewerconstpsv=newProSeqViewer('psv');// Generate the HTMLpsv.draw({sequences, options, icons});</script></head>Install ProSeqViewer from npm
npm install proseqviewer
Add ProSeqViewer CSS to your angular.json file
{
styles: ["./node_modules/proseqviewer/dist/assets/proseqviewer.css"]
}Import in your component
import{ProSeqViewer}from'proseqviewer/dist';Add component to your page
<divid="psv"></div>Create an instance in your component
// Input sequencesconstsequences=[{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 iconsconsticons=[{sequenceId: 1,start: 2,end: 2,icon: 'lollipop'},{sequenceId: 1,start: 13,end: 13,icon: 'lollipop'}]// Options and configurationconstoptions={chunkSize: 0,sequenceColor: 'clustal',lateralIndexes: false};// Initialize the viewerconstpsv=newProSeqViewer('psv');// Generate the HTMLpsv.draw({sequences, options, icons});If you are a developer you can update the GitHub and NPM repo with these commands
nvm use
npm install
npm run buildall
npm publishThis 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.