karyojs/test.html at dev · biowt/karyojs · GitHub

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<html>
<head>

  <!-- Styles -->
  <link rel="stylesheet" type="text/css" href="assets/css/font.css">
  <link rel="stylesheet" type="text/css" href="assets/css/style.css">

  <!-- JavaScript vendor -->
  <script type="text/javascript" src="vendor/jquery/jquery.min.js"></script>
  <script type="text/javascript" src="vendor/svgjs/svg.min.js"></script>

  <!-- Javascript libs -->
  <script type="text/javascript" src="src/karyo.js"></script>
  <script type="text/javascript" src="src/build.js"></script>
  <script type="text/javascript" src="src/size.js"></script>
  <script type="text/javascript" src="src/resize.js"></script>
  <script type="text/javascript" src="src/use.js"></script>
  <script type="text/javascript" src="src/import.js"></script>
  <script type="text/javascript" src="src/callback.js"></script>
  <script type="text/javascript" src="src/utils.js"></script>
  <script type="text/javascript" src="src/navbar.js"></script>
  <script type="text/javascript" src="src/get.js"></script>
  <script type="text/javascript" src="src/select.js"></script>
  <script type="text/javascript" src="src/cursor.js"></script>
  <script type="text/javascript" src="src/foot.js"></script>
  <script type="text/javascript" src="src/options.js"></script>
  <script type="text/javascript" src="src/loading.js"></script>
  <script type="text/javascript" src="src/alert.js"></script>
  <script type="text/javascript" src="src/preview.js"></script>
  <script type="text/javascript" src="src/table.js"></script>
  <script type="text/javascript" src="src/events/mouse.js"></script>
  <script type="text/javascript" src="src/events/mouse-move.js"></script>
  <script type="text/javascript" src="src/events/mouse-up.js"></script>
  <script type="text/javascript" src="src/events/mouse-down.js"></script>
  <script type="text/javascript" src="src/draw/draw.js"></script>
  <script type="text/javascript" src="src/draw/draw-list.js"></script>
  <script type="text/javascript" src="src/draw/draw-detail.js"></script>
  <script type="text/javascript" src="src/plugins/plugins.js"></script>
  <script type="text/javascript" src="src/plugins/genome-maps.js"></script>

  <!-- JavaScript runs -->
  <script type="text/javascript">

    //Initialize the element
    var k = null;

    //When document is ready
    $(document).ready(function(){

      //Create the new Karyo element
      k = new Karyo('karyo_div');

      //Options
      k.Options({
        //previewRegions: true,
        //navbarHeight: 50,
        //navbarShow: true,
        //navbarShowKaryo: true,
        //navbarShowSearch: true,
        //navbarShowTable: true,
        //navbarShowHelp: true,
        //tipShow: true,
        //tipText: 'You can personalize the tip message!',
        //selectMax: -1,
        //selectEnabled: true,
        //showTable: true
      });

      //Use the Human test specie from local
      k.ImportChrs({ fromDB: 'hsapiens/grch38' });

      //Use the human test data
      k.ImportRegions({
        url: 'examples/data.json',
        parser: function(regions)
        {
          //Return the regions
          return regions;
        }
      });

      //Callback for click or select region
      //k.Callback(function(chr, start, end){ )});

      //Callback when user clicks on the Go Back button
      //k.CallbackGoBack(function(){ });

      //Callback when user clicks on the Search button
      //k.CallbackSearch(function(regsel){ });

      //Labels
      k.UseLabel({
        chromosome: function(chr)
        {
          //Get the regions for this chromosome
          var regs = k.GetRegionsByChr(chr);

          //Check if exists
          if(regs) { return '' + regs.length + ' positions'; }

          //Return default
          return '0 positions';
        },
        region: function(chr, region)
        {
          //Return the label
          return '' + region.label + ' reads';
        }
      });

      //Report table
      k.TableOpt({
        colsName: ['Chr','Start','End','Number of reads'],
        //colsAlign: [],
        //openShow: true,
        //openText: 'Open',
        parser: function(chr, region)
        {
          //Return the default row
          return [chr, region.start, region.end, region.label + ' reads'];
        }
      });

    });
  </script>

</head>
<body style="margin: 10px; padding: 0px; background-color: #eaf0f2;">

  <!-- Content div -->
  <div id="karyo_div"></div>

</body>
</html>