IGV.js | 载入自己下载的gtf文件

1.安装 htslib-1.20

https://www.htslib.org/doc/tabix.html

@J3$ cd ~/Downloads/
$ wget https://github.com/samtools/htslib/releases/download/1.20/htslib-1.20.tar.bz2
$ tar jxvf htslib-1.20.tar.bz2

编译安装:
$ cd htslib-1.20/
$ ./configure --prefix=/home/wangjl/soft/htslib-1.20/
$ make -j16
$ make install

配置路径:
$ vim ~/.bashrc
export PATH=$PATH:/home/wangjl/soft/htslib-1.20/bin

测试:
$ source ~/.bashrc
$ which bgzip
~/soft/htslib-1.20/bin/bgzip
$ which tabix 
~/soft/htslib-1.20/bin/tabix

2. 生成fa和gtf的索引文件fa.fai, gtf.gz.tbi

$ cd /data/wangjl/scPolyA-seq2/ref/hg38/gencode/
$ (grep ^"#" GRCh38.p13.gtf; grep -v ^"#" GRCh38.p13.gtf | sort  -t $'\t' -k1,1V -k4,4n -k5,5n) | bgzip  > GRCh38.p13.sorted.gtf.gz

$ tabix -p gff GRCh38.p13.sorted.gtf.gz

$ samtools faidx input_ref.fa  #生成 input_ref.fa.fai

$ ls -lth
-rw-r--r--. 1 wangjl jinlab 370K Jul 24 20:03 GRCh38.p13.sorted.gtf.gz.tbi
-rw-r--r--. 1 wangjl jinlab  36M Jul 24 20:00 GRCh38.p13.sorted.gtf.gz
-rw-r--r--. 1 wangjl jinlab 905M May  1  2023 GRCh38.p13.gtf

-rw-r--r--. 1 wangjl jinlab  22K May  8  2023 GRCh38.p13.genome.fa.fai
-rw-r--r--. 1 wangjl jinlab 3.1G May  1  2023 GRCh38.p13.genome.fa

3.在IGV.js中引用资源

其他资源使用默认的,我已下载到服务器本地。

// refer in local: gencode
var hg38_local_gencode={
	"id": "hg38",
	"name": "Human (GRCh38/hg38)",
	"fastaURL": "ref/hg38/gencode/GRCh38.p13.genome.fa", //?someRandomSeed=0
	"indexURL": "ref/hg38/gencode/GRCh38.p13.genome.fa.fai",
	"cytobandURL": "ref/hg38/cytoBandIdeo.txt.gz",
	"aliasURL": "ref/hg38/hg38_alias.tab",
	
	"tracks": [
	  {
		"name": "GRCh38",
		"format": "gtf",
        "type": "annotation",
		"id": "hg38_genes",

		"url": "ref/hg38/gencode/GRCh38.p13.sorted.gtf.gz",
		"indexURL": "ref/hg38/gencode/GRCh38.p13.sorted.gtf.gz.tbi",

		"visibilityWindow": -1,
        //"visibilityWindow": 10000000, // 轨道的可见窗口大小
		"supportsWholeGenome": false,
		"removable": false,
		"order": 1000000,

		"height":250,   //height of ref track
		"infoURL": "https://www.ncbi.nlm.nih.gov/gene/?term=$$"  //links to ncbi gene
	  }
	],
	"chromosomeOrder": "chr1, chr2, chr3, chr4, chr5, chr6, chr7, chr8, chr9, chr10, chr11, chr12, chr13, chr14, chr15, chr16, chr17, chr18, chr19, chr20, chr21, chr22, chrX, chrY"
}


var options =
{
	//genome: "hg38",
	//init screen
	"locus": "chr21:45,512,381-45,521,866",
	
	reference:hg38_local_gencode,
	tracks: []
};

测试结果

  • 上图:IGV默认的基因组注释文件ref/hg38/ncbiRefSeq.txt.gz
  • 下图:我们导入的基因组注释文件 ref/hg38/gencode/GRCh38.p13.sorted.gtf.gz

两者在同一个地方还是有一些差异的:下图甚至多出一个转录本。
在这里插入图片描述
不过,不能评价哪个注释更可靠。毕竟都是知名学术机构发布的。

建议在一个项目中,使用最新的基因组注释文件,且

  • 固定使用同一个机构、同一个版本号的gtf文件,
  • 保证gtf和fa配对。
### 如何下载和安装 igv.js 库 #### 下载 igv.js igv.js 是一个开源的 JavaScript 库,可以从其官方 GitHub 仓库下载。以下是获取 igv.js 的方法: 1. 访问 igv.js 的官方 GitHub 仓库:[https://github.com/igvteam/igv.js](https://github.com/igvteam/igv.js)。 2. 在仓库页面中,点击右侧的“Code”按钮,选择“Download ZIP”以下载整个项目的压缩文件[^1]。 3. 如果需要特定版本的 igv.js,可以在仓库的 Releases 页面找到并下载所需的版本。 #### 安装 igv.js igv.js 可以通过以下几种方式安装: 1. **使用 CDN 引入** 如果只需要快速引入 igv.js,可以通过 CDN 链接加载库文件。例如,在 HTML 文件中添加以下代码: ```html <script src="https://igv.org/web/release/2.0.1/dist/igv.min.js"></script> ``` 这种方式适合简单的项目或测试环境[^1]。 2. **通过 npm 安装** 对于基于 Node.js 的项目,可以使用 npm 包管理器安装 igv.js: ```bash npm install igv ``` 安装完成后,可以在项目中通过以下方式引入 igv.js: ```javascript const igv = require('igv'); // 或者在 ES6 模块中 import * as igv from 'igv'; ``` 3. **本地引入** 如果下载igv.js 的压缩包,可以将其解压并将 `dist` 目录中的 `igv.min.js` 文件复制到项目目录中。然后在 HTML 文件中通过相对路径引入: ```html <script src="path/to/igv.min.js"></script> ``` #### 完全本地化运行 为了实现完全本地化运行(不依赖外网),需要额外下载相关资源并修改配置文件。具体步骤如下: 1. 下载 `genomes.json` 文件及其引用的基因组数据,并将其存储在本地服务器中[^3]。 2. 修改 igv.js 的源代码,将默认的 `genomes.json` 路径更改为本地路径。例如: ```javascript igv.createBrowser(document.getElementById("igv-div"), { genomes: "path/to/local/genomes.json" }); ``` 3. 如果需要支持基因名称搜索功能,还需进一步修改 igv.js 的源代码以适配本地数据库[^3]。 #### 示例代码 以下是一个简单的示例,展示如何在网页中使用 igv.js 加载 BAM 文件: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>IGV.js Example</title> <script src="https://igv.org/web/release/2.0.1/dist/igv.min.js"></script> </head> <body> <div id="igv-div" style="width: 800px; height: 600px;"></div> <script> igv.createBrowser(document.getElementById("igv-div"), { reference: { id: "hg19", fastaURL: "http://localhost:8000/hg19.fa", cytobandURL: "http://localhost:8000/cytoBand.txt" } }).then(function (browser) { browser.loadTrack({ type: "bam", url: "http://localhost:8000/sample.bam", indexURL: "http://localhost:8000/sample.bam.bai" }).then(function () { browser.search("chr1:1000000-1001000"); }); }); </script> </body> </html> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值