vue-msa-overview

Synopsis

Vue component for displaying an overview of a multiple sequence alignment.

Installation

npm install --save vue-msa-overview

Usage

import { MsaOverview } from 'vue-msa-overview';

<msa-overview :seqs="seqs">

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:

<msa-overview :seqs="seqs" :color-style="nt">

To color according to amino acids:

<msa-overview :seqs="seqs" :color-style="aa">

### With a predefined selection

<msa-overview :seqs="seqs" :selection="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.

Metadata

Format

<msa-overview :seqs="seqs" :metadata="metadata">

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.

Display the different layers

Msa-overview has three layers or masks. Each one is displayed by default

Hide letter colors

<msa-overview :seqs="seqs" :display-letters-mask="false">

Hide metadata

<msa-overview :seqs="seqs" :display-metadata-mask="false">

Hide Selection

<msa-overview :seqs="seqs" :display-selection-mask="false">

Display tracks

vue-msa-overview allows to display tracks above the alignment. Be careful, the positions are 1-based and not 0-based.

<msa-overview :seqs="seqs" :tracks="tracks">

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:

<msa-overview :seqs="seqs" :tracks="tracks" :display-tracks="false">

Troubleshootings

Accept only nucleic acids A, C, G, T or U and "."

Contributors

LIPM Bioinfo Team

• Ludovic Cottret
• Erika Sallet
• Sébastien Carrère
• Ludovic Legrand
• Jérôme Gouzy

Contact

[email protected]