higlass-labeled-annotation
Version:
Labeled Annotation Track for HiGlass
68 lines (67 loc) • 2.79 kB
HTML
<head> <meta charset=utf-8> <meta name=viewport content="width=device-width,initial-scale=1"> <title>HiGlass</title> <style type=text/css>body,html{background:#000}</style> <link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css> <link rel=stylesheet href=hglib.css> <script src=https://cdnjs.cloudflare.com/ajax/libs/react/15.6.2/react.min.js></script> <script src=https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.2/react-dom.min.js></script> <script src=https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.6.2/pixi.min.js></script> <script src=https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.32.0/react-bootstrap.min.js></script> </head> <body> <div style=height:50px /> <div id=demo style=position:absolute;left:1rem;top:1rem;bottom:1rem;right:1rem> </div> <script type="text/javascript" src="higlass-labeled-annotation.min.js"></script></body> <script src=higlass-image.js></script> <script src=hglib.js></script> <script> const testViewConfig = {
editable: true,
zoomFixed: false,
trackSourceServers: ['http://higlass.io/api/v1'],
exportViewUrl: 'http://higlass.io/api/v1/viewconfs/',
views: [
{
initialXDomain: [0, 454330],
initialYDomain: [0, 149278],
tracks: {
center: [
{
type: 'image-tiles',
server: 'http://localhost:8001/api/v1/',
tilesetUid: 'gigapan-66020',
options: {
name: 'Gigapan Image 66020',
},
},
{
type: 'labeled-annotations',
options: {
regions: [
[
454330 * 0.03, 454330 * 0.11,
149278 * 0.1, 149278 * 0.3,
'rgba(0, 0, 0, 0)',
'fuchsia',
10, 10, 'Check'
],
[
454330 * 0.73, 454330 * 0.755,
149278 * 0.15, 149278 * 0.22,
'rgba(0, 0, 0, 0)',
'orange',
10, 10, 'This'
],
[
454330 * 0.23, 454330 * 0.28,
149278 * 0.725, 149278 * 0.875,
'rgba(0, 0, 0, 0)',
'MediumSeaGreen',
10, 10, 'Out'
]
]
},
},
],
},
layout: {
w: 12,
h: 12,
x: 0,
y: 0,
moved: false,
static: false,
},
},
],
zoomLocks: { locksByViewUid: {}, locksDict: {} },
locationLocks: { locksByViewUid: {}, locksDict: {} },
};
window.hglib.createHgComponent(
document.getElementById('demo'),
testViewConfig,
{ bounded: true, isDarkTheme: true },
); </script>