Skip to content

Instantly share code, notes, and snippets.

@zocean

zocean/gist:900c48436e9548916505ae3087f760aa

Last active May 5, 2021 19:50
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/900c48436e9548916505ae3087f760aa to your computer and use it in GitHub Desktop.
Save zocean/900c48436e9548916505ae3087f760aa to your computer and use it in GitHub Desktop.
Download ZIP
link Nucleome Browser with HiGlass beta version
Raw
gistfile1.txt
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://unpkg.com/higlass@1.11.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.11.7/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>
<body>
<h2 style="text-align:center">Link Nucleome Browser with HiGlass</h1>
<h3 style="text-align:center">To view your own session: upload a HiGlass JSON config file</h3>
<div style="position: relative; display: flex;justify-content: center; margin:20px 0">
<input type="file" id="selectFiles" value="Import"/>
<label>Choose a genome assembly</label>
<select name="genome" id="genome">
<option value="hg38" selected="selected">hg38</option>
<option value="hg19">hg19</option>
<option value="mm10">mm10</option>
</select>
</div>
<div style="text-align:center;">
<button id="import" style="position: relative;">Load viewconfig</button>
</div>
<div style="display: flex; align-items: center; justify-content: center;margin:20px 0;">
<textarea id="result" style="display: block; width: 95vw; height: 100px;"></textarea>
</div>
<div>
<div id="development-demo" style="width: 99vw; height: 99vw;background-color: white;position:absolute"></div>
</div>
<div id="out"></div>
</body>
<script>
// Connect to nb-dispatch
var nb_hub = nb.dispatch('update', 'brush');
nb_hub.connect(function (d) {
});
// Pre-load an existing HiGlass session
var container = document.getElementById('development-demo');
const hgApi = hglib.viewer(
container,
'https://higlass.io/api/v1/viewconfs/?d=T6BMovEFTdqfo9tj7NTwKw',
//'https://higlass.4dnucleome.org/api/v1/viewconfs/?d=ZIvQ5_HkQdOfSVHU__o1kQ',
{
bounded: true,
globalMousePosition: true,
sizeMode: 'default',
}
);
// directly call
setTimeout(draw, 1000, hgApi, 'aa', 'https://nbchromsizes.s3.amazonaws.com/4DNFI823LSII.chrom.sizes');
//
window.addEventListener('resize', function(event) {
setTimeout(draw, 1000, hgApi, 'aa', 'https://nbchromsizes.s3.amazonaws.com/4DNFI823LSII.chrom.sizes');
}, true);
// Draw function
function draw(hgApi, viewID, genomeSize) {
var chromInfo = hglib.ChromosomeInfo(genomeSize)
var center = d3.select('.center-track');
svgWidth = center.node().clientWidth;
svgHeight = center.node().clientHeight;
center.selectAll('svg').remove();
svg = center.append("svg")
.attr('width', svgWidth+'px')
.attr('height', svgHeight+'px')
.append("g")
//
hglib
// Pass in the URL of your chrom sizes
.ChromosomeInfo(genomeSize)
// Now we can use the chromInfo object to convert
.then(chromInfo => {
nb_hub.on('update', function (d) {
//console.log(d);
hgApi.zoomTo(
viewID,
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++) {
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
// When a user load a JSON file
document.getElementById('import').onclick = function () {
var files = document.getElementById('selectFiles').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;
var viewID = viewConfig.views[0].uid;
//console.log(viewID);
const hgApi = hglib.viewer(
container,
viewConfig,
{
bounded: true,
globalMousePosition: true,
sizeMode: 'default',
}
);
// get the right genome assmbly
var genome = document.getElementById("genome")
var genomeSize = 'https://nbchromsizes.s3.amazonaws.com/4DNFI823LSII.chrom.sizes';
if (genome.value == 'mm10') {
genomeSize = 'https://nbchromsizes.s3.amazonaws.com/4DNFI3UBJ3HZ.chrom.sizes';
} else if (genome.value == 'hg19') {
genomeSize = 'https://nbchromsizes.s3.amazonaws.com/4DNFI823LSII.chrom.sizes'
}
else {
genomeSize = 'https://nbchromsizes.s3.amazonaws.com/4DNFI823LSII.chrom.sizes';
}
draw(hgApi, viewID, genomeSize);
//
window.addEventListener('resize', function(event) {
setTimeout(draw, 1000, hgApi, viewID, genomeSize);
}, true);
//
};
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