Vuenomics Visualization Components

This is a compilation of visualization components made in Vue and D3 designed to display genomics data in a reactive way.

Recommended IDE Setup

VSCode + Volar (and disable Vetur).

Components install

npm install @lipme/vuenomics-visualization-components

import { Axis, GffViewer, CovViewer, BamViewer } from 'lipme/vuenomics-visualization-components'

Settings Prop

each component has a settings prop that can be used to change the width, height, marginLeft and marginRight of the component

type={
 width: number
  height: number
  marginLeft: number
  marginRight: number
}

!!!!width and margins must be the same on each component!!!

Axis component

use Axis component to display the axis of the charts

<Axis :domain="[regionStart, RegionEnd]">
//add your component here
</Axis>

it also tie togther the different components to have the same scale

GffViewer

to View your genes based on gff3 convention you can use GffViewer like this.

<GffViewer :data="GenesListe" :color-liste="color">
    </GffViewer>

where GenesListe is an array of Gff3 extended with an attribute place, that represents in which level on the graphics the gene is displayed

color list contains the colors of gene structure and to mark certains mRna, by either Ontology_term, functional_class or product like this

const COLORS = {
  mRNA: {
    Ontology_term: {
      Plastid: {
        color: 'yellow',
        match: 'GO:0009536'
      },
      Nucleus: {
        color: 'blue',
        match: 'GO:0005634'
      },
      'Protein binding': {
        color: 'brown',
        match: 'GO:0005515'
      },
      'Cell periphery': {
        color: 'grey',
        match: 'GO:0071944'
      },
      'Cellular process': {
        color: 'black',
        match: 'GO:0009987'
      },
      'Plasma Membrane': {
        color: 'black',
        match: 'GO:0005886'
      }
    }
  },
  type: {
    mRNA: 'LightSalmon',
    unknown: 'red',
    tRNA: 'green',
    rRNA: 'red',
    ncRNA: 'blue',
    utr: 'purple'
  }
}

CovViewer component

cov viewer show coverage of BAMs

<CovViewer :data="covData"></CovViewer>

Where covData is a an array of objects containing the start,end and value of the coverage in each region ther musn't be a gap between the end of an object and the start of the following one

const covData = [
  {
    start: 6260108,
    end: 6260152,
    score: 33
  },
  {
    start: 6260152,
    end: 6260153,
    score: 32
  },
  {
    start: 6260153,
    end: 6260155,
    score: 33
  }
  //...
]

BamViewer

BamViewer take actual Bam's,inserts and mismatch as inputs independantly.(inserts and mismatchs are Optional)

<BamViewer
  :data="{
    bams: mockbam,
    indels: mockInserts,
    mismatchs: mockMismatch
  }"
>
      </BamViewer>

For the bams you need to have start,end,place(to place the bam in a certain level) and strand(can be 1|-1) each attribute is a numeric exemple

[
  {
    "place": 31,
    "start": 6289985,
    "end": 6311269,
    "strand": 1
  },
  {
    "place": 32,
    "start": 6290075,
    "end": 6306374,
    "strand": 1
  },
  {
    "place": 33,
    "start": 6295685,
    "end": 6307041,
    "strand": -1
  }
]

indels and mismatch contain the fields of bams with additional fields like operation, which is a character and must be "x" for mismatch and 'I' or 'D' for indels. They also have the fields index and until:

1. index + start sets the position.
2. until - index sets the width of the component.

mismatch also has another field called val(string) which is the mismatch value. this highly expiremantale and can change

Indels Example

[
  {
    "place": 0,
    "start": 6387199,
    "end": 6401538,
    "strand": -1,
    "MD": "",
    "cigar": "",
    "index": 7767,
    "until": 7768,
    "operation": "D"
  },
  {
    "place": 0,
    "start": 6387199,
    "end": 6401538,
    "strand": -1,
    "MD": "",
    "cigar": "",
    "index": 12146,
    "until": 12147,
    "operation": "D"
  },
  {
    "place": 0,
    "start": 6387199,
    "end": 6401538,
    "strand": -1,
    "MD": "",
    "cigar": "",
    "index": 13613,
    "until": 13614,
    "operation": "D"
  },
  {
    "place": 0,
    "start": 6401939,
    "end": 6414260,
    "strand": 1,
    "MD": "",
    "cigar": "",
    "index": 10451,
    "until": 10451,
    "operation": "I"
  }
]

Mismatch Example

[
  {
    "place": 19,
    "start": 6409968,
    "end": 6422287,
    "strand": 1,
    "index": 2985,
    "until": 2986,
    "val": "T",
    "operation": "X"
  },
  {
    "place": 19,
    "start": 6409968,
    "end": 6422287,
    "strand": 1,
    "index": 3261,
    "until": 3262,
    "val": "A",
    "operation": "X"
  },
  {
    "place": 19,
    "start": 6409968,
    "end": 6422287,
    "strand": 1,
    "index": 3562,
    "until": 3563,
    "val": "C",
    "operation": "X"
  }
]

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Type-Check, Compile and Minify for Production

npm run build