Skip to content

Instantly share code, notes, and snippets.

@zocean

zocean/index.html

Created May 4, 2021 19:36
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save zocean/99ed9fa9a3fee58c137249aa3751fa9b to your computer and use it in GitHub Desktop.
Save zocean/99ed9fa9a3fee58c137249aa3751fa9b to your computer and use it in GitHub Desktop.
Download ZIP
Drop Higlass viewconffig JSON file
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://unpkg.com/higlass@1.5.7/dist/hglib.css" type="text/css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css">
<script crossorigin src="https://unpkg.com/react@16.6/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16.6/umd/react-dom.production.min.js"></script>
<script crossorigin src="https://unpkg.com/pixi.js@5/dist/pixi.min.js"></script>
<!-- To render HiGlass with the Canvas API include the pixi.js-legacy instead of pixi.js -->
<!-- <script crossorigin src="https://unpkg.com/pixi.js-legacy@5/dist/pixi-legacy.min.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.32.1/react-bootstrap.min.js"></script>
<script src="https://unpkg.com/higlass@1.6/dist/hglib.min.js"></script>
<script src="https://vis.nucleome.org/static/lib/nb-dispatch.min.js"></script>
<script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<input type="file" id="selectFiles" value="Import" /><br />
<button id="import" style="margin:10px 0">Load viewconfig</button>
<textarea id="result" style="display: block; width: 100vw; height: 100px"></textarea>
<body >
<div id="development-demo" style="width: 97vw; height: 97vw;
background-color: white;"></div>
<div id="out"></div>
</body>
<script>
document.getElementById('import').onclick = function () {
var files = document.getElementById('selectFiles').files;
//console.log(files);
if (files.length <= 0) {
return false;
}
var fr = new FileReader();
fr.onload = function (e) {
var viewConfig = JSON.parse(e.target.result);
var formatted = JSON.stringify(viewConfig, null, 2);
document.getElementById('result').value = formatted;
viewID = viewConfig.views[0].uid;
//console.log(viewID);
//
var container = document.getElementById('development-demo');
const hgApi = hglib.viewer(
container,
//'http://higlass.io/api/v1/viewconfs/?d=default',
//'https://higlass.4dnucleome.org/api/v1/viewconfs/?d=ZIvQ5_HkQdOfSVHU__o1kQ',
//'https://higlass.4dnucleome.org/api/v1/viewconfs/?d=ZIvQ5_HkQdOfSVHU__o1kQ',
viewConfig,
{
bounded: true,
globalMousePosition: true,
sizeMode: 'default',
}
);
//
var nb_hub = nb.dispatch('update', 'brush');
nb_hub.connect(function (d) {
//console.log(d)
});
//
const chromInfo = hglib.ChromosomeInfo(
'https://nbchromsizes.s3.amazonaws.com/4DNFI823LSII.chrom.sizes'
);
draw();
//
window.addEventListener('resize', function(event) {
setTimeout(draw, 1000);
}, true);
//
function draw() {
var center = d3.select('.center-track');
//console.log(center.style('width'));
svgWidth = center.node().clientWidth;
svgHeight = center.node().clientHeight;
//console.log(svgWidth)
//var svg = center.selectAll('svg').data([0]);
//console.log(svg);
//svg.enter()
center.selectAll('svg').remove();
svg = center.append("svg")
.attr('width', svgWidth+'px')
.attr('height', svgHeight+'px')
.append("g")
/*
var svg = center
.append('svg')
.attr('width', center.style('width'))
.attr('height', center.style('height'))
.append('g');
svg.selectAll('*').remove();
*/
//var svgWidth = parseInt(center.style('width'), 10);
//var svgHeight = parseInt(center.style('width'), 10);
//
hglib
// Pass in the URL of your chrom sizes
.ChromosomeInfo(
'https://nbchromsizes.s3.amazonaws.com/4DNFI823LSII.chrom.sizes'
)
// Now we can use the chromInfo object to convert
.then(chromInfo => {
nb_hub.on('update', function (d) {
//console.log(d);
hgApi.zoomTo(
viewID,
//'FgIzci9rRIyLLXmAt7zvcQ',
//'aa',
chromInfo.chrToAbs([d[0].chr, d[0].start]),
chromInfo.chrToAbs([d[d.length - 1].chr, d[d.length - 1].end]),
chromInfo.chrToAbs([d[0].chr, d[0].start]),
chromInfo.chrToAbs([d[d.length - 1].chr, d[d.length - 1].end]),
500 // Animation time
);
});
//
nb_hub.on('brush', function (d) {
const viewDomain = hgApi.getLocation(viewID);
const xDomainRef = viewDomain.xDomain[0];
const xDomainRange = viewDomain.xDomain[1] - viewDomain.xDomain[0];
const bin_list = d.map((r, i) => ({
bin_start:
(chromInfo.chrToAbs([r.chr, r.start]) - xDomainRef) /
xDomainRange,
bin_end:
(chromInfo.chrToAbs([r.chr, r.end]) - xDomainRef) / xDomainRange,
}));
const N = bin_list.length;
let bin_pair = [];
/*
for (let i = 0; i < N; i++) {
for (let j = 0; j < N; j++) {
bin_pair.push({
x: bin_list[i].bin_start,
y: bin_list[j].bin_start,
width: bin_list[i].bin_end - bin_list[i].bin_start,
height: bin_list[j].bin_end - bin_list[j].bin_start
})
}
}
*/
for (let i = 0; i < N; i++) {
bin_pair.push({
x: bin_list[i].bin_start * svgWidth,
y: 0,
width: (bin_list[i].bin_end - bin_list[i].bin_start) * svgWidth,
height: svgHeight,
});
}
//
svg.selectAll('*').remove();
svg
.selectAll('rect')
.data(bin_pair)
.enter()
.append('rect')
.attr('x', (d, i) => d.x)
.attr('y', (d, i) => d.y)
.attr('width', (d, i) => d.width)
.attr('height', (d, i) => d.height)
.style('fill', '#636363')
.style('fill-opacity', 0.4)
.style('stroke', '#252525');
//
});
});
} // draw function end
};
fr.readAsText(files.item(0));
};
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment