IGV.jsに読み込んだTrackをonclickでクリアする

<script type="text/javascript">
var removeTrackByName = function (trackName) {
    for (var i = 0, l = igv.browser.trackViews.length; i < l; i++) {
        var trackView = igv.browser.trackViews[i];
        if (trackView.track.name === trackName) {
            igv.browser.removeTrack(trackView.track);
            return;
        }
    }
};
</script>

こいつをhtml内に仕込む。
そのうえで

<a href="javascript:void(0)" onclick="removeTrackByName('DRR006760..bam')">Clear Tracks</a>

ここからクリックすればすでに読み込まれているDRR006760.bamのTrackが消える。
もともと読み込んでないときは何もおこらない。
ただし、複数の関数をonclickに仕込もうとすると、何もおこらないに引きずられて他の関数も沈黙するので要注意。

一番上にゲノムのポジション、次にDNA配列情報、その下にBamで一番下に遺伝子情報が表示されているわけだが、bamを読み込むときに標準ではその時表示されていたbamはそのままに、次に読み込んだbamが並べられてしまう。

実際のところ同じポジションの違う実験間の比較をしたいわけではないのでこれでは無駄に同じ内容のトラックが並んでしまい、意味がないわけで、クリックする度に書き換えていってもらうほうがいいのだね。

そのためにonclickでトラックを消す機能を盛り込みたいのだがこれが結構難しく、実装まで時間を要した。最終的に採用した方法はbase.htmlに

</script>
<script type="text/javascript">
var removeAllTracks = function () {
    for (var i = 2, l = igv.browser.trackViews.length; i < l; i++) {
        var trackView = igv.browser.trackViews[i].track;
            igv.browser.removeTrack(trackView);
            return;
        }
    };
</script>

こういうスクリプトを書いておき、読み込ませる側のリンクは

<a href="#"
              onclick='removeAllTracks();
                igv.browser.search("chr{{ samp.pos }}");
                igv.browser.loadTrack({ type: "alignment",
                sourceType: "file",
                url: "/static/exome/bam/{{ samp.Bam_file }}",
                indexURL: "/static/exome/bam/{{ samp.Bam_file }}.bai",
                name: "{{ samp.Bam_file }}",
                autoHeight: "true"})'>{{ samp.pos }}</a>

こんな感じ。
スクリプトでi = 2にして上2つのトラックは消さず、その下のトラックを消す仕様としたところがミソ。

追記

<script type="text/javascript">
var removeBamTracks = function () {
        var trackView = igv.browser.trackViews[2].track;
            igv.browser.removeTrack(trackView);
            return;
};
</script>

こう書いたほうが無駄がない。