higlass-scalable-insets
Version:
Scalable Insets track for highlighting and exploring annotations in HiGlass
199 lines (192 loc) • 8.06 kB
HTML
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="author" content="Fritz Lekschas">
<meta name="description" content="A new technique for interactively exploring and navigating large numbers of annotations in images.">
<meta name="keywords" content="HiGlass, Plugin Tracks, Insets, Images, Gigapixel Images, Photos, Exploration, Navigation, Guidance, Multiscale, 2D, Visualization">
<!-- Schema.org markup for Google+ -->
<meta itemprop="name" content="HiGlass Scalable Insets for Images">
<meta itemprop="description" content="A new technique for interactively exploring and navigating large numbers of annotations in images.">
<meta itemprop="image" content="http://scalable-insets.lekschas.de/images/teaser-image.jpg">
<!-- Twitter Card data -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@flekschas">
<meta name="twitter:title" content="HiGlass Scalable Insets for Images">
<meta name="twitter:description" content="A new technique for interactively exploring and navigating large numbers of annotations in images.">
<meta name="twitter:creator" content="@flekschas">
<!-- Twitter summary card with large image must be at least 280x150px -->
<meta name="twitter:image:src" content="http://scalable-insets.lekschas.de/images/teaser-image.jpg">
<!-- Open Graph -->
<meta property="og:title" content="HiGlass Scalable Insets for Images" />
<meta property="og:description" content="A new technique for interactively exploring and navigating large numbers of annotations in images." />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://github.com/flekschas/higlass-scalable-insets" />
<meta property="og:image" content="http://scalable-insets.lekschas.de/images/teaser-image.jpg" />
<title>HiGlass Scalable Insets for Images</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
<link rel="stylesheet" href="hglib.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="style-dark.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.2/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.8.2/pixi.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.32.1/react-bootstrap.min.js"></script>
</head>
<body>
<header id="topbar" tabindex="0">
<div id="title-wrapper" class="flex-c flex-jc-sb">
<h1 id="title">Scalable Insets</h1>
<ul class="flex-c menu">
<a href="/" class="no-select active">Image</a>
<a href="/map.html" class="no-select">Map</a>
</ul>
</div>
<section id="description">
<p>
A new technique for interactively exploring and navigating large numbers of annotations in <a href="/">gigapixel images</a>, <a href="/map.html">geographic maps</a>, and genome interaction matrices. <em class="more">More</em>
</p>
<div id="description-more">
<p>
This example shows the beautiful gigapixel image of Rio de Janeiro taken by <a href="https://www.visgraf.impa.br/riohk/info/people/index.html" target="_blank">The Rio—Hong Kong Connection</a> and features a set of user-generated annotations. The popularity of annotations is visually encoded as the frame width of insets.
</p>
<div id="links" class="flex-c flex-jc-sb">
<a href="https://www.youtube.com/watch?v=7Bn4mNLl3WQ" target="_blank">Video</a>
<a href="https://github.com/flekschas/higlass-scalable-insets" target="_blank">Source code</a>
<a href="http://scalable-insets.lekschas.de/" target="_blank">More info</a>
</div>
</div>
</section>
</header>
<div id="demo"></div>
<script src="higlass-image.js"></script>
<script type="text/javascript" src="higlass-scalable-insets.min.js"></script></body>
<script src="hglib.js"></script>
<script>
const viewConfig = {
editable: false,
zoomFixed: false,
trackSourceServers: ['http://higlass.io/api/v1'],
exportViewUrl: 'http://higlass.io/api/v1/viewconfs/',
views: [
{
uid: 'aa',
initialXDomain: [0, 454330],
initialYDomain: [0, 149278],
genomePositionSearchBoxVisible: true,
tracks: {
center: [
{
uid: 'c1',
type: 'combined',
options: {},
contents: [
{
uid: 'imtiles',
type: 'image-tiles',
server: 'https://vcg-higlass.rc.fas.harvard.edu/api/v1/',
tilesetUid: 'rio-hk',
},
{
server: 'http://localhost:8001/api/v1/',
tilesetUid: 'gigapan-66020-preloaded-snapshots',
// server: 'https://vcg-higlass.rc.fas.harvard.edu/api/v1',
// tilesetUid: 'rio-hk-anno-preloaded',
uid: 'annotations',
type: '2d-annotations',
options: {
coords: 'pixel',
labelColor: 'pink',
labelPosition: 'hidden',
rectangleDomainFillColor: 'white',
rectangleDomainFillOpacity: 0,
rectangleDomainStrokeColor: 'white',
rectangleDomainOpacity: 1,
rectanlgeMinSize: 1,
},
},
{
server: 'http://localhost:8001/api/v1/',
tilesetUid: 'gigapan-66020-preloaded-snapshots',
// server: 'https://vcg-higlass.rc.fas.harvard.edu/api/v1/',
// tilesetUid: 'rio-hk-anno-preloaded',
uid: 'insets',
type: 'insets',
dataType: 'image',
options: {
minSize: 32,
maxSize: 72,
sizeStepSize: 2,
scale: 1,
scaleSizeBy: 'size',
scaleBorderBy: 'importance',
additionalZoom: 1,
onClickScale: 3,
fill: 'white',
fillOpacity: 1,
borderColor: 'white',
borderWidth: 2,
borderOpacity: 1,
borderRadius: 4,
leaderLineColor: 'white',
leaderLineWidth: 3,
leaderLineOpacity: 1,
leaderLineFading: {
0: 1,
0.35: 0.33,
0.65: 0.33,
1: 1,
},
leaderLineStubWidthMin: 2,
leaderLineStubWidthMax: 4,
leaderLineStubLength: 12,
leaderLineDynamic: true,
leaderLineDynamicMinDist: 24,
leaderLineDynamicMaxDist: 120,
selectColor: 'red',
dropDistance: 1,
dropBlur: 3,
dropOpacity: 0.8,
opacity: 1,
loadHiResOnScaleUp: true,
},
},
],
},
],
},
metaTracks: [
{
uid: 'c2a',
type: 'annotations-to-insets',
insetsTrack: 'insets',
options: {
annotationTracks: [
'annotations',
],
insetThreshold: 16,
disableClustering: true,
},
},
],
layout: {
w: 12,
h: 12,
x: 0,
y: 0,
i: 'aa',
moved: false,
static: false,
},
},
],
};
window.hglib.createHgComponent(
document.getElementById('demo'),
viewConfig,
{
bounded: true, isDarkTheme: true, horizontalMargin: 0, verticalMargin: 0,
},
);
</script>
</html>