kuroの覚え書き

96の個人的覚え書き

localStrageを使って設定値をブラウザに記憶

Programing Flask javascript

どんどんとプログラムはjavascriptの深みにハマっていっているが、現状、折角選んでロードしたtrackが検索をしなおすとすっかり消えて、また選び直さなければならないという若干面倒な仕様になっている。これをjavascriptのWEBストレージ機能でなんとかしようと言う話。

<form name="chbox">
<p>default IGV tracks</p>
<input type="checkbox" id="RefGene_V19" value="0">RefGene V19
<input type="checkbox" id="Gencode_V24" value="0">Gencode V24<br>
<input type="checkbox" id="NA12877" value="0">NA12877
<input type="checkbox" id="NA12878" value="0">NA12878
<input type="checkbox" id="NA12889" value="0">NA12889
<input type="checkbox" id="NA12890" value="0">NA12890
<input type="checkbox" id="NA12891" value="0">NA12891
<input type="checkbox" id="NA12892" value="0">NA12892<br>
<input type="checkbox" id="1000genome_phase3" value="0">1000genome (phase3)
<input type="checkbox" id="dbSNP_150" value="0">dbSNP 150
<input type="checkbox" id="dbSNP_137" value="0">dbSNP 137<br>
<input type="button" value="save" onclick="defTracks.save();">
<input type="button" value="load" onclick="defTracks.load();" />

</form>

こういうフォームをhtmlに入れてやり、

  <script>
    var defTracks = function(){

    var DefTracks = function(){};
    DefTracks.prototype = {

    save : function(){

    var elements = document.getElementsByTagName("input");
    for(var i=0; i<elements.length; i++){
    var type = elements[i].type;
    var key = elements[i].id;
    if(type == "text"){
    localStorage[key] = elements[i].value;
    }else if(type == "checkbox"){
    localStorage[key] = elements[i].checked;
    }
    }
    },
    load : function(){
    var elements = document.getElementsByTagName("input");
    for(var i=0; i<elements.length; i++){
    var type = elements[i].type;
    var key = elements[i].id;
    if(type == "text"){
    elements[i].value = localStorage[key];
    }else if(type == "checkbox"){
    elements[i].checked = localStorage[key] == "true" ? true : false;
    }
    }

    },
    };

    return new DefTracks();
    }();
    window.onload = function(){ defTracks.load() }
    </script>

こんな感じにスクリプトを足してやると、

こんな画面が追加され、チェックボックスに適宜チェックを入れてsaveボタンを押しておくと、リロードかけても選んだチェックボックスが維持されるというわけ。
これで各チェックボックスのIDのbooleanを読み取って、表示項目を選択しておこうというわけだな


最初ページを開いたら自動でデフォルト設定したTrackもロードできないかと色々やってみたが、なにやらタイミングなど微妙なことがあるらしく、うまくできない。そもそもonLoadでやるのは速度的に厳しいかもしれないとおもったので、ポタン一発まとめてロード、というスタイルに変えてみた。

<script>
function addTracks(){
defTracks.save();
removeAllTracks();
if (localStorage.getItem('NA12877') == 'true'){
  igv.browser.loadTrack({
    sourceType: 'gcs',
    type: 'bam',
    url: 'gs://genomics-public-data/platinum-genomes/bam/NA12877_S1.bam',
    autoHeight: true,
    viewAsPairs: true,
    name: 'NA12877',
    visibilityWindow: 100000,
    displayMode: 'EXPANDED',
    order: 3})
};
if (localStorage.getItem('NA12878') == 'true'){
  igv.browser.loadTrack({
    sourceType: 'gcs',
    type: 'bam',
    url: 'gs://genomics-public-data/platinum-genomes/bam/NA12878_S1.bam',
    autoHeight: true,
    viewAsPairs: true,
    name: 'NA12878',
    visibilityWindow: 100000,
    displayMode: 'EXPANDED',
    order: 3})
};
if (localStorage.getItem('NA12889') == 'true'){
  igv.browser.loadTrack({
    sourceType: 'gcs',
    type: 'bam',
    url: 'gs://genomics-public-data/platinum-genomes/bam/NA12889_S1.bam',
    autoHeight: true,
    viewAsPairs: true,
    name: 'NA12889',
    visibilityWindow: 100000,
    displayMode: 'EXPANDED',
    order: 3})
};
if (localStorage.getItem('NA12890') == 'true'){
  igv.browser.loadTrack({
    sourceType: 'gcs',
    type: 'bam',
    url: 'gs://genomics-public-data/platinum-genomes/bam/NA12890_S1.bam',
    autoHeight: true,
    viewAsPairs: true,
    name: 'NA12890',
    visibilityWindow: 100000,
    displayMode: 'EXPANDED',
    order: 3})
};
if (localStorage.getItem('NA12891') == 'true'){
  igv.browser.loadTrack({
    sourceType: 'gcs',
    type: 'bam',
    url: 'gs://genomics-public-data/platinum-genomes/bam/NA12891_S1.bam',
    autoHeight: true,
    viewAsPairs: true,
    name: 'NA12891',
    visibilityWindow: 100000,
    displayMode: 'EXPANDED',
    order: 3})
};
if (localStorage.getItem('NA12892') == 'true'){
  igv.browser.loadTrack({
    sourceType: 'gcs',
    type: 'bam',
    url: 'gs://genomics-public-data/platinum-genomes/bam/NA12892_S1.bam',
    autoHeight: true,
    viewAsPairs: true,
    name: 'NA12892',
    visibilityWindow: 100000,
    displayMode: 'EXPANDED',
    order: 3})
};
if (localStorage.getItem('g1000_p3') == 'true'){
  igv.browser.loadTrack({
    name: '1000g Phase 3 WGS variants',
    format: 'vcf',
    url: 'https://s3.amazonaws.com/1000genomes/release/20130502/ALL.wgs.phase3_shapeit2_mvncall_integrated_v5b.20130502.sites.vcf.gz',
    indexURL:  'https://s3.amazonaws.com/1000genomes/release/20130502/ALL.wgs.phase3_shapeit2_mvncall_integrated_v5b.20130502.sites.vcf.gz.tbi',
    type: 'variant',
    visibilityWindow: 100000,
    order: 3})
};
if (localStorage.getItem('dbSNP_150') == 'true'){
  igv.browser.loadTrack({
    name: 'dbSNP150',
    format: 'vcf',
    url: '/static/vcf/All_20170710.vcf.gz',
    indexURL: '/static/vcf/All_20170710.vcf.gz.tbi',
    visibilityWindow: 1000,
    order: 3})
};
if (localStorage.getItem('dbSNP_137') == 'true'){
  igv.browser.loadTrack({
    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,
    label: 'dbSNP 137',
    order: 3})
};

if (localStorage.getItem('Gencode_V24') == 'true'){
  igv.browser.loadTrack({
    url: 'https://s3.amazonaws.com/igv.broadinstitute.org/annotations/hg19/genes/gencode.v24lift37.annotation.sorted.gtf.gz',
    indexURL: 'https://s3.amazonaws.com/igv.broadinstitute.org/annotations/hg19/genes/gencode.v24lift37.annotation.sorted.gtf.gz.tbi',
    name: 'Gencode v24',
    type: 'annotation',
    format: 'gtf',
    visibilityWindow: 300000000,
    displayMode: 'EXPANDED',
    order: 3})
};
}
</script>

スクリプトとしてはこんな感じで用意し

<input class="deftracks" type="button" value="load Tracks" onclick="addTracks();">

ここで読み込むことになる。

localStorageの方も

document.getElementsByTabName

だと他のwtformのほうのコードも拾ってしまってややこしい、というか、思った動作を阻害するので

document.getElementsByClassName("deftracks")

と変えて、

<input class="deftracks" ....

という風にinputタグの方にClass nameを与えておいた。

こんな感じにload Tracksというボタンをポチッとすればチェックを入れたトラックが一気にロードされるようになった。