Vue component for displaying an overview of a multiple sequence alignment
npm install vue-msa-overviewVue component for displaying an overview of a multiple sequence alignment.
npm install --save vue-msa-overview
~~~~
import { MsaOverview } from 'vue-msa-overview';
~~~~
~~~~
~~~~
seqs must be an array of this type :
~~~~
[
{seq:"ACGT"},
{seq:"ATGC"}
]
~~~~
### Letter colors
By default, letters are colored according to the color code of Clustal for nucleotides. This is equivalent to:
~~~~
~~~~
To color according to amino acids:
~~~~
~~~~
### With a predefined selection
~~~~
~~~~
selection must be an object of this type :
~~~~
{ startSeq: 3, endSeq: 5, startPos: 2, endPos: 4 }
~~~~
startSeq, endSeq : indices for the sequences
startPos, endPos : indices for the column
All indices start by 0.
An event is emitted with the indices of sequences and columns selected by hand.
#### Format
~~~~
~~~~
~~~
metadata :[
{
label: "Metadata 1",
categories : [
{
label: "cat 1",
style: {fill: 'red', 'fill-opacity':0.3},
regions:
[
{
id:"seq1",
ranges: [[4,10], [14,25]]
},
{
id:"seq2",
ranges: [[3,10], [14,25]]
}
]
},
{
label: "cat 2",
style: {fill: 'green'},
regions:
[
{
id:"seq1",
ranges: [[10,13], [26,50]]
},
{
id:"seq2",
ranges: [[11, 13]]
}
]
}
]
},
]
~~~
id:'_all' will apply the metadata on all the sequences. If style.color is not defined, the color is black. If style[fill-opacity] is not defined, the opacity is 0.3.
Msa-overview has three layers or masks. Each one is displayed by default
#### Hide letter colors
~~~~
~~~~
#### Hide metadata
~~~~
~~~~
#### Hide Selection
~~~~
~~~~
vue-msa-overview allows to display tracks above the alignment.
Be careful, the positions are 1-based and not 0-based.
~~~~
~~~~
You have to respect this format (example):
~~~~
tracks: [
{
features: [
{
positions: [
[1, 20],
[109, 234]
],
type: 'label1',
color: 'green'
},
{
positions: [[21, 108]],
type: 'label2',
color: 'pink',
'fill-opacity': 0.9
}
],
trackLabel: 'track1'
},
{
features: [
{
positions: [
[5, 15],
[109, 234]
],
type: 'label1',
color: 'blue'
},
{
positions: [
[50, 65],
[16, 20]
],
type: 'label2',
color: 'red'
}
],
trackLabel: 'track2'
}
]
~~~~
If color is not defined, the color will be black. If fill-opacity is not defined, the opacity is 0.3.
If you want to hide tracks:
~~~~
~~~~
Accept only nucleic acids A, C, G, T or U and "."
* Ludovic Cottret
* Erika Sallet
* Sébastien Carrère
* Ludovic Legrand
* Jérôme Gouzy
ludovic.cottret@inra.fr