forked from igvteam/igv.js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsvg-dev.html
129 lines (86 loc) · 3.7 KB
/
svg-dev.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<meta content="" name="description">
<meta content="" name="author">
<link href=../img/favicon.ico rel="shortcut icon">
<title>SVG - Dev</title>
<!-- IGV CSS -->
<link href="css/dev.css" rel="stylesheet" type="text/css"/>
<link href="css/save_to_svg.css" rel="stylesheet" type="text/css"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>
<body>
<h3>Example tracks - click to load</h3>
<div id="trackList"></div>
<div id="igv-centering-container">
<div id='igv-app-container'></div>
</div>
<div id='igv-draw-svg-button-container'>
<button id='igv-draw-svg-button' type="button">
<label>Draw SVG</label>
</button>
</div>
<div id="igv-svg-container">
</div>
</body>
<script type="module">
import igv from "../js/api.js";
import google from "../js/google/googleUtils.js";
(async () => {
await google.loadGoogleProperties("https://s3.amazonaws.com/igv.org.app/web_client_google");
const config =
{
genome: "hg19",
// locus: [ 'egfr', 'myc' ],
locus: "myc",
flanking: 1000,
queryParametersSupported: true,
showAllChromosomes: true,
};
let browser = await igv.createBrowser(document.getElementById('igv-app-container'), config);
await createTrackList(document.getElementById('trackList'), 'testTracks.json', browser);
$('#igv-draw-svg-button').on('click', () => {
browser.renderSVG({$container: $('#igv-svg-container')});
});
})();
function createTrackList(div, file, browser) {
return igv.xhr.loadJson(file)
.then(function (tracks) {
tracks.forEach(function (track) {
var trackDiv, name;
if (track.HEADING) {
div.insertAdjacentHTML("beforeend",
"<div style='cursor:default;background:lightgrey;color:black;margin-left:0; font-weight:bold;font-size: larger'>"
+ track.HEADING + "</div>");
} else {
trackDiv = document.createElement('div');
trackDiv.innerHTML = track.name;
trackDiv.addEventListener('click', function (event) {
// Convert to json to insure we can load json representations (not strictly neccessary).
var json = JSON.stringify(track);
browser.loadTrack(json);
});
div.appendChild(trackDiv);
}
})
return igv.GtexUtils.getTissueInfo("gtex_v7")
})
.then(function (json) {
div.insertAdjacentHTML("beforeend",
"<div style='cursor:default;background:lightgrey;color:black;margin-left:0; font-weight:bold;font-size: larger'>GTEX</div>");
json['tissueInfo'].forEach(function (obj) {
let trackDiv = document.createElement('div');
trackDiv.innerHTML = (obj.tissueSiteDetailId.split('_').join(' '));
trackDiv.addEventListener('click', function (event) {
browser.loadTrack(igv.GtexUtils.trackConfiguration(obj));
});
div.appendChild(trackDiv)
})
});
}
</script>
</html>