JavaScript
Tabulator

2.タブ区切りのファイルをtabulator で表示する

テーブルの表示項目・表示方法を変更する

1.タブ区切りのファイルをtabulator で表示するに変更を加える

コラムの定義部を変更して表示項目を変更する

  • idを追加する

gene_columnsの定義部分のみを示す

        // コラムの定義
        var gene_columns = [
            {title: "id", field: "id"},
            {title: "GeneID", field: "GeneID"},
            {title: "Symbol", field: "Symbol"},
            {title: "RSG", field: "RSG"},
            {title: "LRG", field: "LRG"},
            {title: "RNA", field: "RNA"},
            {title: "t", field: "t"},
            {title: "Protein", field: "Protein"},
            {title: "p", field: "p"},
            {title: "Category", field: "Category"}
        ];

idフィールドが追加される
Screen Shot 2017-12-21 at 08.00.55.png

visible: boolean を利用した表示非表示の指定

項目を非表示にする

  • visible: false で非表示に
        // コラムの定義
        var gene_columns = [
            {title: "id", field: "id", visible: false},
            {title: "GeneID", field: "GeneID", visible: false},
            {title: "Symbol", field: "Symbol"},
            {title: "RSG", field: "RSG"},
            {title: "LRG", field: "LRG"},
            {title: "RNA", field: "RNA"},
            {title: "t", field: "t"},
            {title: "Protein", field: "Protein"},
            {title: "p", field: "p"},
            {title: "Category", field: "Category"}
        ];

idとGeneIDのカラムが非表示となる
Screen Shot 2017-12-19 at 17.17.41.png

formatter: を利用してセルの表示をカスタマイズ

SymbolのコラムからNCBIのGeneにリンクを貼ってみる
例 A1CFと表示されている部分に
https://www.ncbi.nlm.nih.gov/gene/29974 のリンクを適用する
最後の数字はGeneIDを指定

  • セルの文字列を変更するためformatter: にカスタマイズした関数を渡す
    • cell, formatterParams を受けて表示文字列を返す関数を作成
    • ncbiLinkByGeneSymbolFormatter(cell, formatterParams)
      • cellには該当するセルのデータが入っている(ここではSymbol)
      • 同じ行の他のセル(GeneIDが欲しい)のデータを参照するために、cell.getData()を利用
    • getNcbiLinkByGeneId(geneId, geneSymbol)
      • リンク用の文字列を組み立て
    function ncbiLinkByGeneSymbolFormatter(cell, formatterParams) {
        var geneSymbol = cell.getValue();
        var geneId = cell.getData().GeneID;
        return getNcbiLinkByGeneId(geneId, geneSymbol);
    }
    function getNcbiLinkByGeneId(geneId, geneSymbol) {
        // Create ncbi link
        return '<a target="_blank" href="https://www.ncbi.nlm.nih.gov/gene/' + geneId + '">' + geneSymbol + "</a>";
    }

gene_columnsの定義部分を変更して、フォーマッターを設定する

        // コラムの定義
        var gene_columns = [
            {title: "id", field: "id", visible: false},
            {title: "GeneID", field: "GeneID", visible: false},
            {title: "Symbol", field: "Symbol", formatter: ncbiLinkByGeneSymbolFormatter},
            {title: "RSG", field: "RSG"},
            {title: "LRG", field: "LRG"},
            {title: "RNA", field: "RNA"},
            {title: "t", field: "t"},
            {title: "Protein", field: "Protein"},
            {title: "p", field: "p"},
            {title: "Category", field: "Category"},
        ];

リンクをクリックすると別タブでNCBIの該当するgeneのページが表示される
Screen Shot 2017-12-21 at 08.03.15.png

今回はここまで:smiley: