higlass
Version:
HiGlass Hi-C / genomic / large data viewer
441 lines (412 loc) • 13.8 kB
HTML
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>HiGlass</title>
<style type="text/css">
.canvasjs-chart-credit {
display:none;
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="../hglib.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.5.2/pixi.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.31.0/react-bootstrap.min.js"></script>
</head>
<body >
<div style=" display: flex; height: 100% ">
<div style="width: 50%">
<h3>List of SVs</h3>
<ul id="sv-list">
</ul>
</div>
<div
style="width: 50%; height: 100vh"
id="development-demo">
</div>
</div>
</body>
<script src='../hglib.js'>
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<script>
var testViewConfig =
{
"editable": true,
"trackSourceServers": [
"http://higlass.io/api/v1"
],
"exportViewUrl": "http://higlass.io/api/v1/viewconfs",
"views": [
{
"chromInfoPath": "//s3.amazonaws.com/pkerp/data/hg19/chromSizes.tsv",
"uid": "view1",
"initialXDomain": [
1330023197.368114,
1970568035.463622
],
"initialYDomain": [
1841506758.8480794,
2409912566.633802
],
"tracks": {
"top": [
{
"name": "Chromosome Axis",
"created": "2017-06-06T17:03:01.273116Z",
"server": "http://higlass.io/api/v1",
"tilesetUid": "N12wVGG9SPiTkk03yUayUw",
"uid": "d8kUTi64S0-8vsW7Y7YX4w",
"type": "horizontal-chromosome-labels",
"options": {},
"width": 515,
"height": 30,
"position": "top"
}
],
"left": [
{
"name": "Chromosome Axis",
"created": "2017-06-06T17:03:01.273116Z",
"server": "http://higlass.io/api/v1",
"tilesetUid": "N12wVGG9SPiTkk03yUayUw",
"uid": "ECU4soplRO-PnCB-RGHTLw",
"type": "vertical-chromosome-labels",
"options": {},
"width": 20,
"height": 457,
"position": "left"
}
],
"center": [
{
"uid": "Ihzcos--SWij8O7wPpjI5A",
"type": "combined",
"contents": [
{
"name": "Rao et al. (2014) K562 MboI (allreps) 1kb",
"created": "2017-02-03T03:32:35.710182Z",
"server": "http://higlass.io/api/v1",
"tilesetUid": "QvdMEvccQuOxKTEjrVL3wA",
"uid": "V4GTUC_jTGiqp5B5q3VI3g",
"type": "heatmap",
"options": {
"labelPosition": "bottomRight",
"colorRange": [
"white",
"rgba(245,166,35,1.0)",
"rgba(208,2,27,1.0)",
"black"
],
"maxZoom": null,
"colorbarPosition": "topRight",
"trackBorderWidth": 0,
"trackBorderColor": "black",
"heatmapValueScaling": "log",
"name": "Rao et al. (2014) K562 MboI (allreps) 1kb",
"scaleStartPercent": "0.00000",
"scaleEndPercent": "1.00000"
},
"width": 515,
"height": 457,
"transforms": [
{
"name": "ICE",
"value": "weight"
}
],
"position": "center"
},
{
"name": "K562_regions.tsv.multires.db",
"server": "http://test1.resgen.io/api/v1",
"tilesetUid": "WvGX-d_iTxWFiP47H2qQtQ",
"uid": "W8E0HpZdRF6tk-IUT5W7Lw",
"type": "2d-rectangle-domains",
"height": 457,
"position": "center",
"options": {
"minSquareSize": 5,
"labelColor": "black",
"labelPosition": "hidden",
"trackBorderWidth": 0,
"trackBorderColor": "black",
"rectangleDomainFillColor": "grey",
"rectangleDomainStrokeColor": "black",
"rectangleDomainOpacity": 0.6,
"name": "K562_regions.tsv.multires.db"
},
"width": 515
},
{
"name": "Chromosome Grid",
"created": "2017-06-06T17:03:01.273116Z",
"server": "http://higlass.io/api/v1",
"tilesetUid": "N12wVGG9SPiTkk03yUayUw",
"uid": "bWJ0d3_LSQGgDg67g64SgA",
"type": "2d-chromosome-grid",
"options": {
"lineStrokeWidth": 1,
"lineStrokeColor": "grey"
},
"width": 20,
"height": 20,
"position": "center"
}
],
"position": "center",
"options": {},
"width": 515,
"height": 457
}
],
"bottom": [],
"right": [],
"whole": []
},
"layout": {
"w": 12,
"h": 7,
"x": 0,
"y": 0,
"i": "view1",
"moved": false,
"static": false
},
"genomePositionSearchBoxVisible": true,
"genomePositionSearchBox": {
"autocompleteServer": "http://higlass.io/api/v1",
"chromInfoServer": "http://higlass.io/api/v1",
"visible": true,
"chromInfoId": "hg19",
"autocompleteId": "OHJakQICQD6gTD7skx4EWA"
}
},
{
"chromInfoPath": "//s3.amazonaws.com/pkerp/data/hg19/chromSizes.tsv",
"uid": "YFsuh_3LSouL-_GaY9d7Xg",
"initialXDomain": [
-458058948.1763164,
3509921751.782502
],
"initialYDomain": [
-237553139.73315394,
3283548180.424477
],
"tracks": {
"top": [
{
"name": "Chromosome Axis",
"created": "2017-06-06T17:03:01.273116Z",
"server": "http://higlass.io/api/v1",
"tilesetUid": "N12wVGG9SPiTkk03yUayUw",
"uid": "AhtKA-llRZuJ6kNW8h6g3g",
"type": "horizontal-chromosome-labels",
"options": {},
"width": 515,
"height": 30,
"position": "top"
}
],
"left": [
{
"name": "Chromosome Axis",
"created": "2017-06-06T17:03:01.273116Z",
"server": "http://higlass.io/api/v1",
"tilesetUid": "N12wVGG9SPiTkk03yUayUw",
"uid": "XoDgys-mS-mG9GUUd3iQhA",
"type": "vertical-chromosome-labels",
"options": {},
"width": 20,
"height": 457,
"position": "left"
}
],
"center": [
{
"uid": "Ihzcos--SWij8O7wPpjI5A",
"type": "combined",
"contents": [
{
"name": "Rao et al. (2014) K562 MboI (allreps) 1kb",
"created": "2017-02-03T03:32:35.710182Z",
"server": "http://higlass.io/api/v1",
"tilesetUid": "QvdMEvccQuOxKTEjrVL3wA",
"uid": "V4GTUC_jTGiqp5B5q3VI3g",
"type": "heatmap",
"options": {
"labelPosition": "bottomRight",
"colorRange": [
"white",
"rgba(245,166,35,1.0)",
"rgba(208,2,27,1.0)",
"black"
],
"maxZoom": null,
"colorbarPosition": "topRight",
"trackBorderWidth": 0,
"trackBorderColor": "black",
"heatmapValueScaling": "log",
"name": "Rao et al. (2014) K562 MboI (allreps) 1kb",
"scaleStartPercent": "0.00000",
"scaleEndPercent": "1.00000"
},
"width": 515,
"height": 457,
"transforms": [
{
"name": "ICE",
"value": "weight"
}
],
"position": "center"
},
{
"uid": "QcfbDgBSQlKNEnGoTmOWNw",
"type": "viewport-projection-center",
"fromViewUid": "view1",
"options": {
"projectionFillColor": "#777",
"projectionStrokeColor": "#777",
"projectionFillOpacity": 0.3,
"projectionStrokeOpacity": 0.7,
"strokeWidth": 13
},
"name": "Viewport Projection",
"position": "center",
"width": 515,
"height": 457
},
{
"name": "Chromosome Grid",
"created": "2017-06-06T17:03:01.273116Z",
"server": "http://higlass.io/api/v1",
"tilesetUid": "N12wVGG9SPiTkk03yUayUw",
"uid": "XbYPwIByR5-XhhaFZBuIfg",
"type": "2d-chromosome-grid",
"options": {
"lineStrokeWidth": 1,
"lineStrokeColor": "grey"
},
"position": "center"
}
],
"position": "center",
"options": {},
"width": 515,
"height": 457
}
],
"bottom": [],
"right": [],
"whole": []
},
"layout": {
"w": 12,
"h": 7,
"x": 0,
"y": 7,
"i": "YFsuh_3LSouL-_GaY9d7Xg",
"moved": false,
"static": false
},
"genomePositionSearchBoxVisible": true,
"genomePositionSearchBox": {
"autocompleteServer": "http://higlass.io/api/v1",
"chromInfoServer": "http://higlass.io/api/v1",
"visible": true,
"chromInfoId": "hg19",
"autocompleteId": "OHJakQICQD6gTD7skx4EWA"
}
}
],
"zoomLocks": {
"locksByViewUid": {},
"locksDict": {}
},
"locationLocks": {
"locksByViewUid": {},
"locksDict": {}
},
"valueScaleLocks": {
"locksByViewUid": {},
"locksDict": {}
}
}
window.higlassApi;
hglib.createHgComponent(
document.getElementById('development-demo'),
testViewConfig,
{ bounded: true },
function (api) {
window.hgApi = api;
}
);
hglib.ChromosomeInfo(testViewConfig.views[0].chromInfoPath, function(chromInfo) {
d3.tsv('data/K562_integratedBPs.txt', function(error, data) {
var svs = d3.select('#sv-list')
.selectAll('li')
.data(data)
.enter()
.append('li')
.append('a')
.text(function(d) {
return d.chrom1 + " " + d.region1 + " " + d.chrom2 + " " + d.region2;
})
.style('cursor', 'pointer')
.on('click', function(d) {
var chrom1 = d.chrom1;
var region1Parts = d.region1.split('_');
var from1 = +region1Parts[0];
var to1 = +region1Parts[1];
var region2Parts = d.region2.split('_');
var chrom2 = d.chrom2;
var from2 = +region2Parts[0];
var to2 = +region2Parts[1];
var width = (to1 - from1);
var padding = 40*width;
window.hgApi.goTo('view1',
chrom1, from1 - padding, to1 + padding,
chrom2, from2 - padding, to2 + padding,
true, 2000);
});
window.hgApi.on('location', function(data) {
const fromX = chromInfo.chrPositions[data[0]].pos + data[1];
const toX = chromInfo.chrPositions[data[2]].pos + data[3];
const fromY = chromInfo.chrPositions[data[4]].pos + data[5];
const toY = chromInfo.chrPositions[data[6]].pos + data[7];
svs.style('background', 'transparent');
const visibleSvs = svs.filter(function(d) {
const region1Parts = d.region1.split('_')
const region2Parts = d.region2.split('_');
const x1 = chromInfo.chrPositions[d.chrom1].pos + +region1Parts[0];
const x2 = chromInfo.chrPositions[d.chrom1].pos + +region1Parts[1];
const y1 = chromInfo.chrPositions[d.chrom2].pos + +region2Parts[0];
const y2 = chromInfo.chrPositions[d.chrom2].pos + +region2Parts[1];
//console.log('fromX:', fromX, fromY, toX, toY);
//console.log('region:', x1, y1, x2, y2);
if (fromX < x1 && x2 < toX) {
if (fromY < y1 && y2 < toY) {
return true;
}
}
return false;
});
visibleSvs.style('background', 'yellow');
//console.log('data:', data);
}, 'view1');
;
});
});
</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-77756807-1', 'auto');
ga('send', 'pageview');
</script>
</html>