small_example.html 4.2 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33
<!doctype html>

<!-- 
  This file is part of "Vidjil" <http://bioinfo.lille.inria.fr/vidjil>, V(D)J repertoire browsing and analysis
  Copyright (C) 2013, 2014 by Marc Duez <marc.duez@lifl.fr> and the Vidjil Team
  Bonsai bioinformatics at CRIStAL (UMR CNRS 9189, Université Lille) and Inria Lille

  "Vidjil" is free software: you can redistribute it and/or modify
  it under the terms of the GNU General Public License as published by
  the Free Software Foundation, either version 3 of the License, or
  (at your option) any later version.

  "Vidjil" is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  GNU General Public License for more details.

  You should have received a copy of the GNU General Public License
  along with "Vidjil". If not, see <http://www.gnu.org/licenses/>
-->

<html>
    <head>

        <meta charset="utf-8">
        <link id="palette" rel="stylesheet" type="text/css" href="css/light.css" /> 

        <script type="text/javascript"> 
            
            //vidjil file (json format)
            var vidjil_file = {
                "vidjil_json_version": ["2014.09"], 
                "reads": {
34 35 36
                    "segmented": [105, 32],
                    "total": [110, 40],
                    "germline": {"TRG": [100, 30], "IGH": [10, 7]}
37 38 39 40 41 42
                }, 
                "samples": {
                    "timestamp": ["2014-10-20 13:59:02", "2014-10-25 14:00:32"], 
                    "number": 2, 
                    "original_names": ["Diag.fa", "Fu-1.fa"]},
                "clones": [
43 44 45 46
                    { "id" : "clone-001",
                        "sequence" : "AGCTGGACGACTCGGCCCTGTATCTCTGTGCCAGCACCCGAGGGGACAGTAGAAACTAATGAAAAACTGTTTTTTGGCAGT",
                        "name" : "CASTRGDSRN**KTVF TRBV5-4 TRBJ1-4",
                        "reads" : [10, 5],
47
                        "top" : 1,
48 49 50 51 52 53 54
                        "germline" : "TRB",
                        "seg" : { "5" : "TRBV5-4", "3" : "TRBJ1-4" }
                   },
                   { "id" : "clone-002",
                        "sequence" : "GATACAGATCAGATCAGTACAGATACAGATACAGATACA",
                        "name" : "Test 2",
                        "reads" : [20, 20],
55
                        "top" : 2,
56 57 58 59 60 61 62 63 64 65 66 67 68 69
                        "germline" : "TRG"
                   },
                   { "id": "clone-003",
                        "sequence": "CTCATACACCCAGGAGGTGGAGCTGGATATTGATACTACGAAATCTAATTGAAAATGATTCTGGGGTCTATTACTGTGCCACCTGGGCCTTATTATAAGAAACTCTTTGGCAGTGGAAC",
		        "reads" : [ 75, 5],
                        "germline": "TRG",
                        "top": 3,
                        "seg":
                     {
		         "5": "TRGV5*01",  "5start": 0,   "5end": 86,
		         "3": "TRGJ1*02",  "3start": 89,  "3end": 118,
                         "cdr3": { "start": 77, "stop": 104, "seq": "gccacctgggccttattataagaaactc" }
	             }
                    }]
70 71 72 73 74 75 76 77 78 79 80 81
            }
            

            //build the interface using vidjil API
            function main () {
                //override server config
                config = undefined 

                //create model
                m = new Model();
                
                //bind views
82 83 84
                gr = new Graph("div1", m)
                sp1 = new ScatterPlot("div2", m)
                sp2 = new ScatterPlot("div3", m)
85 86 87 88 89

                //load vidjil file (will be simplified soon ..)
                m.parseJsonData(vidjil_file,100)
                m.loadGermline()
                m.initClones()
90 91 92 93 94

                //some interaction
                m.changeColorMethod('V')
                sp1.changeSplitMethod("sequenceLength", "gene_v", "bar")

95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113
            };
        </script>

    </head>


    <body>
        
        <div style="width:100%; height:100%;">
            <div id="div1" style="border:solid; margin-left:20%; width:80%; height:33%;"></div>    
            <div id="div2" style="border:solid; margin-left:10%; width:80%; height:33%;"></div>
            <div id="div3" style="border:solid; width:80%; height:33%;"></div>
        </div>

    </body> 


    <script data-main="js/app.js" src="js/lib/require.js"></script>
</html>