https://github.com/biocomputingup/proseqviewer
Visualize sequence and multiple sequence alignment (MSA)
https://github.com/biocomputingup/proseqviewer
bioinformatics javascript sequence-viewer typescript
Last synced: 12 months ago
JSON representation
Visualize sequence and multiple sequence alignment (MSA)
- Host: GitHub
- URL: https://github.com/biocomputingup/proseqviewer
- Owner: BioComputingUP
- License: gpl-2.0
- Created: 2020-12-14T12:53:39.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-05-30T15:25:35.000Z (about 4 years ago)
- Last Synced: 2025-06-23T08:07:24.916Z (12 months ago)
- Topics: bioinformatics, javascript, sequence-viewer, typescript
- Language: TypeScript
- Homepage:
- Size: 2.14 MB
- Stars: 15
- Watchers: 6
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: changelog
- License: LICENSE
Awesome Lists containing this project
README
# ProSeqViewer
ProSeqViewer is a [TypeScript](https://www.typescriptlang.org/) library to visualize annotation
on single sequences and multiple sequence alignments.
ProSeqViewer can be integrated in both modern and dynamic frameworks like [Angular](https://angular.io/)
as well as in static HTML websites. It is used by [MobiDB](http://mobidb.bio.unipd.it/),
[DisProt](http://www.disprot.org/), [RepeatsDB](http://repeatsdb.bio.unipd.it/)
### ProSeqViewer features
* 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
## Links
* [ProSeqViewer library GitHub repository](https://github.com/BioComputingUP/ProSeqViewer)
* [Documentation website](https://biocomputingup.github.io/ProSeqViewer-documentation/)
* [NPM package](https://www.npmjs.com/package/proseqviewer)
## Getting started
### JavaScript installation
Import the JavaScript bundle and CSS from local files
```html
```
Alternatively, import from GitHub
```html
```
Add component
```html
```
Create an instance
```html
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});
```
### Angular installation
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});
```
## Developers
If you are a developer you can update the GitHub and NPM repo with these commands
```bash
nvm use
npm install
npm run buildall
npm publish
```
## License
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.