mearge
This commit is contained in:
leejisun9
282
pages/test/test02.vue
Normal file
282
pages/test/test02.vue
Normal file
@@ -0,0 +1,282 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<main role="main" class="container-fluid">
|
||||
<div style="padding-top: 64px">
|
||||
<div>
|
||||
<ul
|
||||
class="navbar-nav mr-auto"
|
||||
style="list-style:none; padding-left:0; margin:0;"
|
||||
>
|
||||
<li
|
||||
class="nav-item dropdown"
|
||||
style="position: relative; display: inline-block;"
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
id="igv-example-api-dropdown"
|
||||
@click.prevent="toggleDropdown"
|
||||
aria-haspopup="true"
|
||||
:aria-expanded="isDropdownOpen.toString()"
|
||||
style="color: black; cursor: pointer; user-select: none;"
|
||||
>Tracks</a
|
||||
>
|
||||
<ul
|
||||
v-show="isDropdownOpen"
|
||||
class="dropdown-menu"
|
||||
style="width:350px; position: absolute; top: 100%; left: 0; background: white; border: 1px solid #ccc; box-shadow: 0 2px 5px rgba(0,0,0,0.15); padding: 5px 0; margin: 0; list-style:none; z-index: 1000;"
|
||||
>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
@click.prevent="loadCopyNumberTrack"
|
||||
style="display:block; padding: 8px 20px; color: black; text-decoration: none;"
|
||||
>Copy Number</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
@click.prevent="loadDbSnpTrack"
|
||||
style="display:block; padding: 8px 20px; color: black; text-decoration: none;"
|
||||
>dbSNP 137 (bed tabix)</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
@click.prevent="loadBigWigTrack"
|
||||
style="display:block; padding: 8px 20px; color: black; text-decoration: none;"
|
||||
>Encode bigwig</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
@click.prevent="loadBamTrack"
|
||||
style="display:block; padding: 8px 20px; color: black; text-decoration: none;"
|
||||
>1KG Bam (HG02450)</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- 탭 콘텐츠 -->
|
||||
<div class="tab-content" id="viewerTabContent">
|
||||
<div
|
||||
class="tab-pane fade show active"
|
||||
id="igv-viewer"
|
||||
role="tabpanel"
|
||||
>
|
||||
<div style="padding-top: 20px">
|
||||
이 예제는 드롭다운 메뉴에서 동적으로 트랙을 추가하는 igv.js API의
|
||||
사용을 보여줍니다.
|
||||
위의 메뉴에서 'CopyNumber'를 선택하면 다음과 같은 호출이 실행됩니다.
|
||||
<p>
|
||||
<pre>
|
||||
igv.browser.loadTrack({
|
||||
url: 'https://s3.amazonaws.com/igv.org.demo/GBM-TP.seg.gz',
|
||||
name: 'GBM Copy # (TCGA Broad GDAC)'});
|
||||
</pre>
|
||||
</p>
|
||||
자세한 내용은
|
||||
<a href="https://github.com/igvteam/igv.js/wiki">개발자 위키</a>를
|
||||
참조하세요.
|
||||
</div>
|
||||
<div id="igvDiv" style="padding-top: 20px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "App",
|
||||
data() {
|
||||
return {
|
||||
browser: null,
|
||||
isDropdownOpen: false,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
// 외부 클릭시 드롭다운 닫기
|
||||
document.addEventListener("click", this.handleClickOutside);
|
||||
this.initializeIGV();
|
||||
},
|
||||
beforeUnmount() {
|
||||
document.removeEventListener("click", this.handleClickOutside);
|
||||
},
|
||||
methods: {
|
||||
toggleDropdown() {
|
||||
this.isDropdownOpen = !this.isDropdownOpen;
|
||||
},
|
||||
closeDropdown() {
|
||||
this.isDropdownOpen = false;
|
||||
},
|
||||
handleClickOutside(event) {
|
||||
const dropdown = this.$el.querySelector("#igv-example-api-dropdown");
|
||||
const menu = this.$el.querySelector(".dropdown-menu");
|
||||
if (
|
||||
dropdown &&
|
||||
menu &&
|
||||
!dropdown.contains(event.target) &&
|
||||
!menu.contains(event.target)
|
||||
) {
|
||||
this.closeDropdown();
|
||||
}
|
||||
},
|
||||
|
||||
async initializeIGV() {
|
||||
await this.waitForIGV();
|
||||
await this.$nextTick();
|
||||
|
||||
const igvDiv = document.getElementById("igvDiv");
|
||||
if (!igvDiv) {
|
||||
console.error("❌ #igvDiv가 존재하지 않습니다.");
|
||||
return;
|
||||
}
|
||||
|
||||
const options = {
|
||||
locus: "chr1:155,160,475-155,184,282",
|
||||
genome: "hg19",
|
||||
};
|
||||
|
||||
try {
|
||||
this.browser = await igv.createBrowser(igvDiv, options);
|
||||
window.igv = { browser: this.browser };
|
||||
this.addBaseClickEvent();
|
||||
this.browser.on("locuschange", this.addBaseClickEvent);
|
||||
this.browser.on("trackclick", this.addBaseClickEvent);
|
||||
} catch (error) {
|
||||
console.error("IGV 브라우저 생성 중 오류:", error);
|
||||
}
|
||||
},
|
||||
waitForIGV() {
|
||||
return new Promise((resolve) => {
|
||||
const checkIGV = () => {
|
||||
if (typeof igv !== "undefined") {
|
||||
resolve();
|
||||
} else {
|
||||
setTimeout(checkIGV, 100);
|
||||
}
|
||||
};
|
||||
checkIGV();
|
||||
});
|
||||
},
|
||||
addBaseClickEvent() {
|
||||
setTimeout(() => {
|
||||
const texts = document.querySelectorAll("#igvDiv text");
|
||||
texts.forEach((text) => {
|
||||
const base = text.textContent;
|
||||
if (["A", "T", "C", "G"].includes(base)) {
|
||||
text.style.cursor = "pointer";
|
||||
text.onclick = () => {
|
||||
text.textContent = this.getComplement(text.textContent);
|
||||
};
|
||||
}
|
||||
});
|
||||
}, 300);
|
||||
},
|
||||
getComplement(base) {
|
||||
switch (base) {
|
||||
case "A":
|
||||
return "T";
|
||||
case "T":
|
||||
return "A";
|
||||
case "C":
|
||||
return "G";
|
||||
case "G":
|
||||
return "C";
|
||||
default:
|
||||
return base;
|
||||
}
|
||||
},
|
||||
loadCopyNumberTrack() {
|
||||
if (this.browser) {
|
||||
this.browser.loadTrackList = this.browser.loadTrackList.bind(this.browser);
|
||||
this.browser.loadTrackList([
|
||||
{
|
||||
url: "https://s3.amazonaws.com/igv.org.demo/GBM-TP.seg.gz",
|
||||
indexed: false,
|
||||
isLog: true,
|
||||
name: "GBM Copy # (TCGA Broad GDAC)",
|
||||
},
|
||||
]);
|
||||
}
|
||||
this.closeDropdown();
|
||||
},
|
||||
loadDbSnpTrack() {
|
||||
if (this.browser) {
|
||||
this.browser.loadTrackList = this.browser.loadTrackList.bind(this.browser);
|
||||
this.browser.loadTrackList([
|
||||
{
|
||||
type: "annotation",
|
||||
format: "bed",
|
||||
url: "https://data.broadinstitute.org/igvdata/annotations/hg19/dbSnp/snp137.hg19.bed.gz",
|
||||
indexURL:
|
||||
"https://data.broadinstitute.org/igvdata/annotations/hg19/dbSnp/snp137.hg19.bed.gz.tbi",
|
||||
visibilityWindow: 200000,
|
||||
name: "dbSNP 137",
|
||||
},
|
||||
]);
|
||||
}
|
||||
this.closeDropdown();
|
||||
},
|
||||
loadBigWigTrack() {
|
||||
if (this.browser) {
|
||||
this.browser.loadTrackList = this.browser.loadTrackList.bind(this.browser);
|
||||
this.browser.loadTrackList([
|
||||
{
|
||||
type: "wig",
|
||||
format: "bigwig",
|
||||
url: "https://s3.amazonaws.com/igv.broadinstitute.org/data/hg19/encode/wgEncodeBroadHistoneGm12878H3k4me3StdSig.bigWig",
|
||||
name: "Gm12878H3k4me3",
|
||||
},
|
||||
]);
|
||||
}
|
||||
this.closeDropdown();
|
||||
},
|
||||
loadBamTrack() {
|
||||
if (this.browser) {
|
||||
this.browser.loadTrackList = this.browser.loadTrackList.bind(this.browser);
|
||||
this.browser.loadTrackList([
|
||||
{
|
||||
type: "alignment",
|
||||
format: "bam",
|
||||
url: "https://1000genomes.s3.amazonaws.com/phase3/data/HG02450/alignment/HG02450.mapped.ILLUMINA.bwa.ACB.low_coverage.20120522.bam",
|
||||
indexURL:
|
||||
"https://1000genomes.s3.amazonaws.com/phase3/data/HG02450/alignment/HG02450.mapped.ILLUMINA.bwa.ACB.low_coverage.20120522.bam.bai",
|
||||
name: "HG02450",
|
||||
},
|
||||
]);
|
||||
}
|
||||
this.closeDropdown();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#app {
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
pre {
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.nav-tabs {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
padding-top: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user