higlass
Version:
HiGlass Hi-C / genomic / large data viewer
272 lines (265 loc) • 8.76 kB
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>HiGlass</title>
<style type="text/css">
#demo {
position: absolute;
left: 1rem;
top: 1rem;
bottom: 1rem;
right: 1rem;
overflow: hidden;
}
</style>
<script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/pixi.js@6/dist/browser/pixi.min.js"></script>
<script src="./hglib.min.js"></script>
</head>
<body>
<div id="demo"></div>
</body>
<script type="module">
const viewConfig = {
zoomFixed: false,
views: [
{
layout: {
w: 12,
h: 7,
x: 0,
y: 0
},
uid: 'aa',
initialYDomain: [
2534823997.9776945,
2547598956.834603
],
initialXDomain: [
2521015726.4619913,
2558682921.8435397
],
tracks: {
left: [],
top: [
{
uid: 'genes',
tilesetUid: 'OHJakQICQD6gTD7skx4EWA',
server: 'http://higlass.io/api/v1',
type: 'horizontal-gene-annotations',
height: 48,
options: {
labelColor: 'black',
plusStrandColor: 'black',
labelPosition: 'hidden',
minusStrandColor: 'black',
fontSize: 11,
trackBorderWidth: 0,
trackBorderColor: 'black',
showMousePosition: true,
mousePositionColor: '#000000',
geneAnnotationHeight: 10,
geneLabelPosition: 'outside',
geneStrandSpacing: 4
},
},
{
uid: 'line1',
tilesetUid: 'PjIJKXGbSNCalUZO21e_HQ',
height: 20,
server: 'http://higlass.io/api/v1',
type: 'horizontal-line',
options: {
valueScaling: 'linear',
lineStrokeWidth: 2,
lineStrokeColor: '#4a35fc',
labelPosition: 'topLeft',
labelColor: 'black',
axisPositionHorizontal: 'right',
trackBorderWidth: 0,
trackBorderColor: 'black',
labelTextOpacity: 0.4,
showMousePosition: true,
mousePositionColor: '#000000',
showTooltip: false
}
},
{
uid: 'line2',
tilesetUid: 'PdAaSdibTLK34hCw7ubqKA',
height: 20,
server: 'http://higlass.io/api/v1',
type: 'horizontal-line',
options: {
valueScaling: 'linear',
lineStrokeWidth: 2,
lineStrokeColor: '#d104fa',
labelPosition: 'topLeft',
labelColor: 'black',
axisPositionHorizontal: 'right',
trackBorderWidth: 0,
trackBorderColor: 'black',
labelTextOpacity: 0.4,
showMousePosition: true,
mousePositionColor: '#000000',
showTooltip: false
},
},
{
uid: 'line3',
tilesetUid: 'e0DYtZBSTqiMLHoaimsSpg',
height: 20,
server: 'http://higlass.io/api/v1',
type: 'horizontal-line',
options: {
valueScaling: 'linear',
lineStrokeWidth: 2,
lineStrokeColor: '#ff0000',
labelPosition: 'topLeft',
labelColor: 'black',
axisPositionHorizontal: 'right',
trackBorderWidth: 0,
trackBorderColor: 'black',
labelTextOpacity: 0.4,
showMousePosition: true,
mousePositionColor: '#000000',
showTooltip: false
},
},
{
uid: 'line4',
tilesetUid: 'cE0nGyd0Q_yVYSyBUe89Ww',
height: 20,
server: 'http://higlass.io/api/v1',
type: 'horizontal-line',
options: {
valueScaling: 'linear',
lineStrokeWidth: 2,
lineStrokeColor: 'orange',
labelPosition: 'topLeft',
labelColor: 'black',
axisPositionHorizontal: 'right',
trackBorderWidth: 0,
trackBorderColor: 'black',
labelTextOpacity: 0.4,
showMousePosition: true,
mousePositionColor: '#000000',
showTooltip: false
},
},
{
uid: 'chroms',
height: 18,
chromInfoPath: '//s3.amazonaws.com/pkerp/data/hg19/chromSizes.tsv',
type: 'horizontal-chromosome-labels',
options: {
color: '#777777',
stroke: '#FFFFFF',
fontSize: 11,
fontIsLeftAligned: true,
showMousePosition: true,
mousePositionColor: '#000000'
},
}
],
right: [],
center: [
{
uid: 'center',
type: 'combined',
contents: [
{
server: 'http://higlass.io/api/v1',
tilesetUid: 'dVBREuC2SvO01uXYMUh2aQ',
type: 'heatmap',
uid: 'Yqetzqw6Qfy-hREAJhAXEA',
options: {
backgroundColor: '#eeeeee',
labelPosition: 'topLeft',
labelTextOpacity: 0.4,
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',
showMousePosition: true,
mousePositionColor: '#000000',
showTooltip: true,
scaleStartPercent: '0.00000',
scaleEndPercent: '1.00000',
showMousePositionGlobally: true,
},
}
],
}
],
bottom: [],
whole: [],
gallery: []
},
chromInfoPath: '//s3.amazonaws.com/pkerp/data/hg19/chromSizes.tsv',
genomePositionSearchBox: {
visible: true,
chromInfoServer: 'http://higlass.io/api/v1',
chromInfoId: 'hg19',
autocompleteServer: 'http://higlass.io/api/v1',
autocompleteId: 'OHJakQICQD6gTD7skx4EWA'
}
}
],
editable: true,
viewEditable: true,
tracksEditable: true,
exportViewUrl: '/api/v1/viewconfs',
zoomLocks: {
locksByViewUid: {},
locksDict: {}
},
trackSourceServers: [
'http://higlass.io/api/v1'
],
locationLocks: {
locksByViewUid: {
aa: 'PkNgAl3mSIqttnSsCewngw',
ewZvJwlDSei_dbpIAkGMlg: 'PkNgAl3mSIqttnSsCewngw'
},
locksDict: {
PkNgAl3mSIqttnSsCewngw: {
aa: [
1550000000,
1550000000,
3380588.876772046
],
ewZvJwlDSei_dbpIAkGMlg: [
1550000000.0000002,
1549999999.9999993,
3380588.876772046
],
uid: 'PkNgAl3mSIqttnSsCewngw'
}
}
},
valueScaleLocks: {
locksByViewUid: {},
locksDict: {}
}
};
const hgApi = window.hgApi = await hglib.viewer(
document.getElementById('demo'),
viewConfig,
{ bounded: true },
);
hgApi.on('viewConfig', () => {
console.log('View Config changed');
});
</script>
</html>