ideogram
Version:
Chromosome visualization for the web
194 lines (165 loc) • 6.29 kB
HTML
<html>
<head>
<title>Annotations, track filters | Ideogram</title>
<script type="text/javascript" src="../../dist/js/ideogram.min.js"></script>
<link rel="icon" type="image/x-icon" href="img/ideogram_favicon.ico">
<style>
body {font: 14px Arial; line-height: 19.6px; padding: 0 15px;}
a, a:visited {text-decoration: none;}
a:hover {text-decoration: underline;}
a, a:hover, a:visited, a:active {color: #0366d6;}
</style>
<style>
ul {float: left; padding-left: 5px;}
ul#dynamic-tracks {float: left; padding-left: 15px;}
li {list-style: none;}
#filters-container ul {clear: both; margin-right: 15px;}
</style>
</head>
<body>
<h1>Annotations, track filters | Ideogram</h1>
<a href="../">Overview</a> |
<a href="homology-interspecies">Previous</a> |
<a href="annotations-overlaid">Next</a> |
<a href="https://github.com/eweitz/ideogram/blob/gh-pages/annotations-track-filters.html" target="_blank">Source</a>
<p>
Explore track filters and ideogram options with a simulated annotation dataset.
See also <a href="annotations-tracks">Annotations, tracks</a>.
</p>
<div id="filters-container">
<ul id="tracks-to-display">
Tracks to display
<li><label><input id="filter_all" type="checkbox" value="all"/> All</label></li>
<ul id="dynamic-tracks">
</ul>
</ul>
<ul>
Annotations layout
<li><label for="tracks"><input type="radio" id="tracks" name="layout"/>Shape</label></li>
<li><label for="heatmap"><input type="radio" id="heatmap" name="layout" checked/>Heatmap</label></li>
</ul>
<ul>
Geometry
<li><label for="parallel"><input type="radio" id="parallel" name="geometry" checked/>Parallel</label></li>
<li><label for="collinear"><input type="radio" id="collinear" name="geometry"/>Collinear</label></li>
</ul>
</div>
<div id="ideogram-container"></div>
<script type="text/javascript">
var config, ideogram, checkboxes, annotsLayout;
config = {
organism: 'human',
container: '#ideogram-container',
chrHeight: 400,
chrMargin: 4,
rotatable: false,
annotationsLayout: 'heatmap',
annotationsPath: '../../data/annotations/9_tracks_virtual_snvs.json',
onLoadAnnots: createTrackFilters,
annotationsNumTracks: 3,
annotationsDisplayedTracks: [1, 5, 9],
geometry: 'parallel'
// annotationsPath: '../../data/annotations/all_human_genes.json',
// annotationsNumTracks: 2,
// annotationsDisplayedTracks: [1, 2],
};
ideogram = new Ideogram(config);
function createTrackFilters() {
var i, listItems, trackLabels, content, checked;
// Only apply this function once
if (document.querySelector('#filter_1')) return;
listItems = '';
trackLabels = ideogram.rawAnnots.metadata.trackLabels;
for (i = 0; i < trackLabels.length; i++) {
checked = ([0, 4, 8].includes(i)) ? 'checked' : '';
listItems +=
'<li>' +
'<label for="filter_' + (i + 1) + '">' +
'<input type="checkbox" id="filter_' + (i + 1) + '" ' + checked + '/>' +
trackLabels[i] +
'</label>' +
'</li>';
}
document.querySelector('#dynamic-tracks').innerHTML = listItems;
checkboxes = document.querySelectorAll('#dynamic-tracks input');
checkboxes.forEach(function(checkbox) {
checkbox.addEventListener('click', function() {
updateTracks();
});
});
topCheckbox = document.querySelector('#filter_all');
topCheckbox.addEventListener('click', function() {
var lowerCheckboxes = document.querySelectorAll('#dynamic-tracks input');
lowerCheckboxes.forEach(checkbox => checkbox.checked = this.checked);
updateTracks();
});
}
radioButtons = document.querySelectorAll('input[type=radio]');
radioButtons.forEach(function(radioButton) {
radioButton.addEventListener('click', function() {
updateIdeogram();
});
});
function getSelectedTracks() {
var selectedTracks = [];
checkboxes.forEach(function(checkbox) {
var trackIndex = parseInt(checkbox.getAttribute('id').split('_')[1]);
if (checkbox.checked) {
selectedTracks.push(trackIndex);
}
});
return selectedTracks;
}
function checkTracks() {
var selectedTracks = getSelectedTracks();
var geometry = document.querySelector('input[name=geometry]:checked').id;
if (geometry !== 'collinear' && selectedTracks.length > 3) {
document.querySelector('#ideogram-container').innerHTML =
'<div style="position: relative; left: 20px; top: 13px">' +
'Rendering over 3 tracks displays poorly in parallel chromosomes. ' +
'Try selecting "Collinear" geometry.' +
'</div>';
return false;
}
}
function updateTracks() {
var selectedTracks = getSelectedTracks();
if (checkTracks() === false) return;
if (document.querySelector('#_ideogramOuterWrap') === null) {
return updateIdeogram();
}
ideogram.updateDisplayedTracks(selectedTracks);
}
function updateIdeogram() {
var tracks = getSelectedTracks();
var layout = document.querySelector('input[name=layout]:checked').id;
var geometry = document.querySelector('input[name=geometry]:checked').id;
if (layout === 'tracks' && geometry === 'collinear') {
document.querySelector('#ideogram-container').innerHTML =
'<div style="position: relative; left: 20px; top: 13px">' +
'Shape annotation layout is not supported in collinear geometry. ' +
'Try selecting "Heatmap" annotation layout.' +
'</div>';
return;
}
if (checkTracks() === false) return;
config.annotationsDisplayedTracks = tracks;
config.annotationsLayout = layout;
config.geometry = geometry;
if (geometry === 'collinear') {
config.orientation = 'horizontal';
config.chrHeight = 95;
config.annotationHeight = 30;
config.demarcateCollinearChromosomes = false;
} else {
config.orientation = 'vertical';
config.chrHeight = 400;
config.annotationHeight = (layout === 'heatmap' ? 9 : 4);
}
document.querySelector('#ideogram-container').innerHTML = '';
ideogram = new Ideogram(config);
}
</script>
</body>
</html>