igv-vue

Usage

import VIgv from '@/index'

Vue.use(VIgv, {
	reference: {
		'id': 'hg38',
		'name': 'Human (GRCh38/hg38)',
		'fastaURL': 'http://localhost:5000/hg38.fa',
		'indexURL': 'http://localhost:5000/hg38.fa.fai',
		'cytobandURL': 'http://localhost:5000/cytoBandIdeo.txt',
		'tracks': [
			{
				'name': 'Refseq Genes',
				'url': 'http://localhost:5000/refGene.txt.gz',
				'order': 1000000,
				'indexed': false
			}
		]
	},
	locus: 'chr1:1-2',
	showCenterGuide: true,
	baseUrl: 'http://localhost:5000'
})

<template>
<div>
    <button @click="show = !show">toggle</button>
    <button @click="$igv.browser('two').search('chr1:102987575-102987633')">search</button>
    <button @click="$igv.destroy('two')">destroy</button>
	<igv-modal id='modalIgv' v-model="show" @ready="loadTracks"/>
</div>
</template>

<script>
export default {
	data() {
		return {
			show: false
		}
	},
	methods: {
		async loadTracks(id) {
			await this.$igv.loadBed(id, '/OTOgenics_V4_Covered_liftOver_hg19_hg38_Padded.sorted.bed.gz', '/OTOgenics_V4_Covered_liftOver_hg19_hg38_Padded.sorted.bed.gz.tbi')
			await this.$igv.loadBam(id, '/P02912-1.bam', '/P02912-1.bam.bai')
			this.$igv.search(id, 'chr1:169,468,400-169,468,450')
		}
	}
}
</script>