localStorageで文字列をブラウザに記憶させておけば、直前に行った解析の履歴をとっておくこともできそうなので、やり方を考える。
- bamファイルを表示させるときに表示させたファイル名をlocalStorageで保存。
- 次のbamファイルを開くときに、前回保存したlocalStorageの内容を別の項目にコピーしてからファイルを表示、表示したファイル名を保存。
この繰り返しでいけるはず。なのでbamファイルを表示させるところをこういうふうにしておく。
<li><a href="javascript:void(0)" onclick='igv.browser.search("chr{{ samp.pos }}");
removeBamTracks();
localStorage.setItem("pre_bam1", localStorage.getItem("pre_bam"))
localStorage.setItem("pre_bam", "{{ samp.Bam_file }}");
igv.browser.loadTrack({ type: "alignment",
sourceType: "file",
url: "/static/exome/bam/{{ samp.Bam_file }}.bam",
indexURL: "/static/exome/bam/{{ samp.Bam_file }}.bai",
name: "ID: {{ samp.variant_id }}, {{ samp.SampleName_phenotype }}",
autoHeight: "true",
viewAsPairs: "true",
visibilityWindow: 100000,
order: 2})'>IGV browser</a>
</li>表示をさせるかどうかのチェックボックスはこちら。
<input class="deftracks" type="checkbox" id="history" value="0">previous BAM Track ON<br>
トラックを読み込むスクリプトは
if (localStorage.getItem("history") == "true"){
igv.browser.loadTrack({
sourceType: "file",
type: "alignment",
url: "/static/exome/bam/"+localStorage.getItem('pre_bam1')+".bam",
indexURL: "/static/exome/bam/"+localStorage.getItem('pre_bam1')+".bai",
autoHeight: true,
viewAsPairs: true,
name: localStorage.getItem('pre_bam1')+".bam",
visibilityWindow: 100000,
displayMode: "EXPANDED",
order: 3})
};こんなふうに。
見た目はチェックボックスがこっそりと増えただけ。
次の解析に残したいトラックだけ個別にチェックして残せるようにできればなお便利だろけど、それはIGV自体の機能をバージョンアップさせる必要があって、流石にハードルが高すぎる。
苦肉の策として、ロード履歴を３つまで残し、履歴を選択して再ロードできるようにすることにした。
bamを読み込む度に履歴を１つずつずらしていき
<li><a href="javascript:void(0)" onclick='igv.browser.search("chr{{ samp.pos }}");
removeBamTracks();
localStorage.setItem("pre_bam3", localStorage.getItem("pre_bam2"))
localStorage.setItem("pre_bam2", localStorage.getItem("pre_bam1"))
localStorage.setItem("pre_bam1", localStorage.getItem("pre_bam"))
localStorage.setItem("pre_bam", "{{ samp.Bam_file }}");
igv.browser.loadTrack({ type: "alignment",
sourceType: "file",
url: "/static/exome/bam/{{ samp.Bam_file }}.bam",
indexURL: "/static/exome/bam/{{ samp.Bam_file }}.bai",
name: "ID: {{ samp.variant_id }}, {{ samp.SampleName_phenotype }}",
autoHeight: "true",
viewAsPairs: "true",
visibilityWindow: 100000,
order: 2})'>IGV browser</a>
</li>呼び出したい履歴をこれで設定して...ちょっと整形のためにテーブル導入
<form name="chbox"> <p>default IGV tracks</p> <table> <tr><td>Reference Tracks: </td> <td><input class="deftracks" type="checkbox" id="Gencode_V24" value="0">Gencode V24</td></tr> <tr><td>Controls: </td><td><input class="deftracks" type="checkbox" id="NA12877" value="0">NA12877 <input class="deftracks" type="checkbox" id="NA12878" value="0">NA12878 <input class="deftracks" type="checkbox" id="NA12889" value="0">NA12889 <input class="deftracks" type="checkbox" id="NA12890" value="0">NA12890 <input class="deftracks" type="checkbox" id="NA12891" value="0">NA12891 <input class="deftracks" type="checkbox" id="NA12892" value="0">NA12892</td></tr> <tr><td>SNPs: </td><td><input class="deftracks" type="checkbox" id="g1000_p3" value="0">1000genome (phase3) <input class="deftracks" type="checkbox" id="dbSNP_149" value="0">dbSNP 149 <input class="deftracks" type="checkbox" id="dbSNP_137" value="0">dbSNP 137</td></tr> </table> <table> <tr><td><input class="deftracks" type="checkbox" id="history1" value="0"></td><td id="fnc_hist1">previous BAM Track1 ON </td> <td><input class="deftracks" type="checkbox" id="history2" value="0"></td><td id="fnc_hist2">previous BAM Track2 ON </td> <td><input class="deftracks" type="checkbox" id="history3" value="0"></td><td id="fnc_hist3">previous BAM Track3 ON </td></tr> </table> <input class="deftracks" type="button" value="save" onclick="defTracks.save();"> <input class="deftracks" type="button" value="load setting" onclick="defTracks.load();"> <input class="deftracks" type="button" value="save and load Tracks" onclick="addTracks();"> </form>
ここで呼び出す
if (localStorage.getItem("history1") == "true"){
igv.browser.loadTrack({
sourceType: "file",
type: "alignment",
url: "/static/exome/bam/"+localStorage.getItem('pre_bam1')+".bam",
indexURL: "/static/exome/bam/"+localStorage.getItem('pre_bam1')+".bai",
autoHeight: true,
viewAsPairs: true,
name: localStorage.getItem('pre_bam1')+".bam",
visibilityWindow: 100000,
displayMode: "EXPANDED",
order: 3})
};
if (localStorage.getItem("history2") == "true"){
igv.browser.loadTrack({
sourceType: "file",
type: "alignment",
url: "/static/exome/bam/"+localStorage.getItem('pre_bam2')+".bam",
indexURL: "/static/exome/bam/"+localStorage.getItem('pre_bam2')+".bai",
autoHeight: true,
viewAsPairs: true,
name: localStorage.getItem('pre_bam2')+".bam",
visibilityWindow: 100000,
displayMode: "EXPANDED",
order: 3})
};
if (localStorage.getItem("history3") == "true"){
igv.browser.loadTrack({
sourceType: "file",
type: "alignment",
url: "/static/exome/bam/"+localStorage.getItem('pre_bam3')+".bam",
indexURL: "/static/exome/bam/"+localStorage.getItem('pre_bam3')+".bai",
autoHeight: true,
viewAsPairs: true,
name: localStorage.getItem('pre_bam3')+".bam",
visibilityWindow: 100000,
displayMode: "EXPANDED",
order: 3})
};このままでは履歴に何が残っているのか確認できないので
<script>
var obj1 = document.getElementById("fnc_hist1");
var obj2 = document.getElementById("fnc_hist2");
var obj3 = document.getElementById("fnc_hist3");
//マウスカーソルが乗った時の処理
function fnc1()
{
obj1.innerHTML = "1:"+localStorage.getItem('pre_bam1')+".bam ";
}
function fnc2()
{
obj2.innerHTML = "2:"+localStorage.getItem('pre_bam2')+".bam ";
}
function fnc3()
{
obj3.innerHTML = "3:"+localStorage.getItem('pre_bam3')+".bam";
}
//イベントに関数を指定する
obj1.onmouseover = fnc1;
obj2.onmouseover = fnc2;
obj3.onmouseover = fnc3;
</script>このようにonmouseoverで呼び出すスクリプトを使って、
<td id="fnc_hist1">previous BAM Track1 ON </td>
この部分にマウスを持っていくとbamファイルの名前に置き換えてくれて、何が履歴に残っているのかを教えてくれて、選択しやすいように細工した。
検索をした時は一旦トラックが消えて、履歴のファイル名もリセットされちゃうが
マウスカーソルを持っていくと、中身（下の例では何も履歴が入っていないのでnullになっているが）を表示。
いい感じじゃない？
