1.1.9 • Published 2 years ago

proseqviewer v1.1.9

Weekly downloads
-
License
ISC
Repository
github
Last release
2 years ago

ProSeqViewer

ProSeqViewer is a TypeScript library to visualize annotation on single sequences and multiple sequence alignments.

ProSeqViewer

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

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

Getting started

JavaScript installation

Import the JavaScript bundle and CSS from local files

<head>
    <link rel="stylesheet" type="text/css" href="sqv.css">
    <script src="sqv-bundle.js"></script>
</head>

Alternatively, import from GitHub

<head>
    <link rel="stylesheet" type="text/css" href="https://rawgithub.com/BioComputingUP/ProSeqViewer/master/dist/assets/proseqviewer.css">
    <script src="https://rawgithub.com/BioComputingUP/ProSeqViewer/master/dist/sqv-bundle.js"></script>
</head>

Add component

<body>
    <div id="psv"></div>
</body>

Create an instance

<head>
    <!--Put this block at the end of your head section-->
    <script>
        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});
    </script>
</head>

Angular installation

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

 <div id="psv"></div>

Create an instance in your component

// 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

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.

@infinitebrahmanuniverse/nolb-pros@everything-registry/sub-chunk-2484
1.1.9

2 years ago

1.1.8

2 years ago

1.1.7

3 years ago

1.1.6

3 years ago

1.1.5

3 years ago

1.1.4

3 years ago

1.1.3

3 years ago

1.1.2

3 years ago

1.1.1

3 years ago

1.1.0

3 years ago

1.0.91

3 years ago

1.0.90

3 years ago

1.0.95

3 years ago

1.0.94

3 years ago

1.0.93

3 years ago

1.0.92

3 years ago

1.0.97

3 years ago

1.0.96

3 years ago

1.0.88

3 years ago

1.0.87

3 years ago

1.0.86

3 years ago

1.0.85

3 years ago

1.0.84

3 years ago

1.0.80

3 years ago

1.0.83

3 years ago

1.0.82

3 years ago

1.0.81

3 years ago

1.0.79

3 years ago

1.0.78

3 years ago

1.0.77

3 years ago

1.0.76

3 years ago

1.0.75

3 years ago

1.0.74

3 years ago

1.0.73

3 years ago

1.0.72

3 years ago

1.0.71

3 years ago

1.0.70

3 years ago

1.0.69

3 years ago

1.0.66

3 years ago

1.0.68

3 years ago

1.0.67

3 years ago

1.0.62

3 years ago

1.0.65

3 years ago

1.0.64

3 years ago

1.0.63

3 years ago

1.0.61

3 years ago

1.0.60

3 years ago

1.0.55

3 years ago

1.0.59

3 years ago

1.0.58

3 years ago

1.0.57

3 years ago

1.0.54

3 years ago

1.0.53

3 years ago

1.0.52

3 years ago

1.0.51

3 years ago

1.0.50

3 years ago

1.0.49

3 years ago

1.0.48

3 years ago

1.0.47

3 years ago

1.0.46

3 years ago

1.0.45

3 years ago

1.0.44

3 years ago

1.0.43

3 years ago

1.0.42

3 years ago