GeLoc/test.html at master · SouthGreenPlatform/GeLoc · 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
<!DOCTYPE html>
<html>
<head>
  <title>Brush | Ideogram</title>
  <style>
    body {font: 14px Arial; line-height: 19.6px; padding: 0 15px;}
    a, a:visited {text-decoration: none;}
    a:hover {text-decoration: underline;}
    a, a:hover, a:visited, a:active {color: #0366d6;}
  </style>
<script src="https://cdn.jsdelivr.net/npm/ideogram@1.21.0/dist/js/ideogram.min.js"></script>

<link rel="icon" type="image/x-icon" href="img/ideogram_favicon.ico">
</head>
<body>
  <h1>Brush | Ideogram</h1>
  <a href="/ideogram">Overview</a> |
  <a href="layout-tabs">Previous</a> |
  <a href="ploidy-basic">Next</a> |
  <a href="https://github.com/eweitz/ideogram/blob/gh-pages/brush.html" target="_blank">Source</a>
  <br/><br/>
  <div>
    Selected region on human chromosome 1:
    <div><span id="from"></span>-<span id="to"></span>
      (extent: <span id="extent"></span> base pairs)
    </div>
  </div>
  <div class="ideogram-container">
    <!-- The ideogram goes here. -->
  </div>
  <script type="text/javascript">

  function writeSelectedRange() {
    var r = ideogram.selectedRegion,
        from = r.from.toLocaleString(), // Adds thousands-separator
        to = r.to.toLocaleString(),
        extent = r.extent.toLocaleString();

    document.getElementById('from').innerHTML = from;
    document.getElementById('to').innerHTML = to;
    document.getElementById('extent').innerHTML = extent;
  }

  var config = {
    container: '.ideogram-container',
    organism: 'oryza-sativa',
    dataDir: './data/bands/native/',
    chromosome: '2',
    brush: 'chr2:10484-1196550',
    annotationsPath: 'http://dev.visusnp.southgreen.fr/geloc/data/annotations/nip.json',
    chrHeight: 800,
    orientation: 'horizontal',
    onBrushMove: writeSelectedRange,
    onLoad: writeSelectedRange
  };

  var ideogram = new Ideogram(config);
  </script>
</body>
</html>