Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Add "Orthologs" example to home page #162

Merged
merged 6 commits into from
Aug 4, 2019
Merged

Add "Orthologs" example to home page #162

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
0d84264
Link to "Comparative Genomics" in home page, relabel Homology examples
eweitz Aug 4, 2019
050b2b3
Update "Previous" and "Next" links
eweitz Aug 4, 2019
890f294
Remove debugging
eweitz Aug 4, 2019
f5cc7c2
Rename "Comparative Genomics" to "Orthologs"
eweitz Aug 4, 2019
ab39468
Redirect old to new, including parameters
eweitz Aug 4, 2019
e88639f
Fix typo
eweitz Aug 4, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
313 changes: 7 additions & 306 deletions examples/vanilla/comparative-genomics.html
View file
Original file line number Diff line number Diff line change
@@ -1,307 +1,8 @@
<!DOCTYPE html>
<html>
<head>
<title>Comparative genomics | Ideogram</title>
<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;}
label {display: block; margin-bottom: 10px;}
.left-select {position: absolute; left: 150px;}
#status-container {display: inline-block; margin-left: 186px;}
#error-container {color: red;}
#ideogram-container {margin-left: 325px;}
</style>
<script type="text/javascript" src="../../dist/js/ideogram.min.js"></script>
<!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/homology@0.2.0/dist/homology.min.js"></script> -->
<!-- <script type="text/javascript" src="https://eweitz.github.io/homology/dist/homology.min.js"></script> -->
<script type="text/javascript" src="http://localhost/homology/dist/homology.min.js"></script>
<link rel="icon" type="image/x-icon" href="img/ideogram_favicon.ico">
</head>
<body>
<h1>Comparative genomics | Ideogram</h1>
<a href="../">Overview</a> |
<a href="homology-advanced">Previous</a> |
<a href="annotations-basic">Next</a> |
<a href="https://github.com/eweitz/ideogram/blob/gh-pages/homology-interspecies.html" target="_blank">Source</a>
<p>
Compare gene locations across organisms.
</p>
<div style="float: left; width: 200px;">
<label for="gene">Gene: <input id="gene"/></label>
<label for="org">
Source organism:
<select class="left-select org-select" id="org">
<option>Human (Homo sapiens)</option>
<option>Chimpanzee (Pan troglodytes)</option>
<option>Mouse (Mus musculus)</option>
<option>Rat (Rattus norvegicus)</option>
<option>Fly (Drosophila melanogaster)</option>
<option>Thale cress (Arabidopsis thaliana)</option>
<option>Corn (Zea mays)</option>
<option>Rice (Oryza sativa)</option>
</select>
</label>
<label for="org2">
Target organism:
<select class="left-select org-select" id="org2">
<option>Human (Homo sapiens)</option>
<option>Chimpanzee (Pan troglodytes)</option>
<option selected>Mouse (Mus musculus)</option>
<option>Rat (Rattus norvegicus)</option>
<option>Fly (Drosophila melanogaster)</option>
<option>Thale cress (Arabidopsis thaliana)</option>
<option>Corn (Zea mays)</option>
<option>Rice (Oryza sativa)</option>
</select>
</label>
<label for="backend">
Orthology backend:
<select class="left-select backend-select" id="backend">
<option id="oma" selected>OMA Browser</option>
<option id="orthodb">OrthoDB</option>
</select>
</label>
</div>
<div id="ideogram-container"></div>
<div id="status-container"></div>
<script type="text/javascript">

var prevState = {};
var loci1, loci2;

function shouldUpdateState() {
return JSON.stringify(urlParams) !== JSON.stringify(prevState);
}

function updateGeneParams(geneName) {
if (typeof geneName === 'undefined') {
geneName = gene;
}
urlParams['gene'] = geneName;
updateUrl();
}

// Process text input for the "Gene" field.
async function handleGene(event) {
var geneName, loci1, loci2;

// Ignore non-"Enter" keyups
if (event.type === 'keyup' && event.keyCode !== 13) return;

geneName = event.target.value;
updateGeneParams(geneName);

createIdeogram();
}

// Process selections in "Organism" drop-down menus
async function handleOrganism(event) {
var organism =
event.target.value.split('(')[1].split(')')[0]
.replace(' ', '-').toLowerCase();
urlParams[event.target.id] = organism;

updateGeneParams();

createIdeogram();
}

// Process selections in "Orthology source" drop-down menu
async function handleBackend(event) {
var menu = document.querySelector('#backend');

urlParams['backend'] = menu.options[menu.selectedIndex].id;

updateGeneParams();
createIdeogram();
}

// Record app state in URL
function updateUrl() {
var params = Object.keys(urlParams).map(key => {
return key + '=' + urlParams[key];
}).join('&');
history.pushState(null, null, '?' + params);
}

// Set the 'Organism 1' or 'Organism 2' menu using a scientific organism name
function updateOrganismMenu(orgParam, orgValue) {
var selectedOrg = document.querySelector('#' + orgParam + ' option:checked').text;
selectedOrg = selectedOrg.split('(')[1].split(')')[0].toLowerCase();

if (orgValue !== selectedOrg) {
document.querySelectorAll('#' + orgParam + ' option').forEach(option => {
if (option.text.toLowerCase().includes(orgValue)) {
document.querySelector('#' + orgParam).value = option.text;
}
});
}
}

function parseUrlParams() {
var rawParams = document.location.search;
urlParams = {};
var param, key, value;
if (rawParams !== '') {
rawParams = rawParams.split('?')[1].split('&');
rawParams.forEach(rawParam => {
param = rawParam.split('=');
key = param[0];
value = param[1];
urlParams[key] = value;
});
}
}

async function processUrl() {
document.querySelector('#ideogram-container').innerHTML = '';
document.querySelector('#status-container').innerHTML = 'Loading...';
parseUrlParams();

// Set default parameters if none are provided.
if ('org' in urlParams === false) {
urlParams['gene'] = 'MTOR'
urlParams['org'] = 'homo-sapiens';
urlParams['org2'] = 'mus-musculus';
urlParams['backend'] = 'oma';
// urlParams['loci'] = '1:11106531-11262557,4:148448582-148557685';
}

// If "org2" is omitted, set it to the value of "org"
if ('org2' in urlParams === false) {
org2 = urlParams['org'];
urlParams['org2'] = org2;
}

if ('backend' in urlParams === false) {
urlParams['backend'] = 'oma';
}

org1 = urlParams['org'].replace('-', ' ');
org2 = urlParams['org2'].replace('-', ' ');

showBandLabels = 'band-labels' in urlParams;

updateOrganismMenu('org', org1);
updateOrganismMenu('org2', org2);

gene = urlParams['gene'];
document.querySelector('#gene').value = gene;

backend = urlParams['backend'];
document.querySelector('#backend #' + backend).selected = true;

updateGeneParams(gene);

if (shouldUpdateState()) {
try {
[loci1, loci2] = await fetchOrthologs(gene, org1, [org2], backend);
} catch (error) {
document.querySelector('#status-container').innerHTML =
`<span id="error-container">${error}</span>`;
throw error;
}
};
prevState = Object.assign({}, urlParams);

// [loci1, loci2] = urlParams['loci'].split(',');
[loci1Chr, loci1Range] = loci1.split(':');
[loci2Chr, loci2Range] = loci2.split(':');
[loci1Start, loci1Stop] = loci1Range.split('-');
[loci2Start, loci2Stop] = loci2Range.split('-');
}

function onIdeogramLoad() {
var chrs, syntheticRegions, humanTaxid, mouseTaxid;

document.querySelector('#status-container').innerHTML = '';

org1Taxid = ideogram.getTaxid(org1);
org2Taxid = ideogram.getTaxid(org2);

var chrs = ideogram.chromosomes;

if (!chrs.hasOwnProperty(org1Taxid) || !chrs.hasOwnProperty(org2Taxid)) {
document.querySelector('#ideogram-container').innerHTML = '';
document.querySelector('#status-container').innerHTML =
`Orthologous pair found, but cannot be drawn.<br/>
Ortholog in source organism at: ${loci1}<br/>
Ortholog in target organism at: ${loci2}<br/>`;
return;
}

var org1ChrObj = chrs[org1Taxid][loci1Chr],
org2ChrObj = chrs[org2Taxid][loci2Chr],
syntenicRegions = [];

range1 = {
chr: org1ChrObj,
start: loci1Start,
stop: loci1Stop
};

range2 = {
chr: org2ChrObj,
start: loci2Start,
stop: loci2Stop
};

syntenicRegions.push({'r1': range1, 'r2': range2});

ideogram.drawSynteny(syntenicRegions);
}

async function createIdeogram() {

await processUrl();

if (document.querySelector('#error-container') !== null) {
return;
}

if (org1 !== org2) {
// Orthology
organism = [org1, org2];
chromosomesConfig = {};
chromosomesConfig[org1] = [loci1Chr];
chromosomesConfig[org2] = [loci2Chr];
} else {
// Paralogy
organism = org1;
chromosomesConfig = [loci1Chr, loci2Chr];
}

var config = {
container: '#ideogram-container',
organism: organism,
chromosomes: chromosomesConfig,
chrHeight: 400,
chrMargin: 50,
fullChromosomeLabels: true,
perspective: 'comparative',
showBandLabels: showBandLabels,
rotatable: false,
onLoad: onIdeogramLoad
};

delete chrBands;

ideogram = new Ideogram(config);
}

document.querySelector('#gene').addEventListener('blur', handleGene);
document.querySelector('#gene').addEventListener('keyup', handleGene);
document.querySelectorAll('.org-select').forEach(select => {
select.addEventListener('change', handleOrganism);
});
document.querySelectorAll('.backend-select').forEach(select => {
select.addEventListener('change', handleBackend);
});

createIdeogram();

</script>
</body>
</html>
<head>
<script>
var urlParams = window.location.search;
window.location.replace('/ideogram/orthologs' + urlParams);
</script>
</head>
</html>
2 changes: 1 addition & 1 deletion examples/vanilla/eukaryotes.html
View file
Original file line number Diff line number Diff line change
@@ -35,7 +35,7 @@
<h1>Eukaryotes | Ideogram</h1>
<a href="../">Overview</a> |
<a href="mouse">Previous</a> |
<a href="homology-basic">Next</a> |
<a href="comparative-genomics">Next</a> |
<a href="https://github.com/eweitz/ideogram/blob/gh-pages/eukaryotes.html" target="_blank">Source</a>
<p>
Ideogram.js can display the genome of any hundreds of organisms, using data from
2 changes: 1 addition & 1 deletion examples/vanilla/homology-advanced.html
View file
Original file line number Diff line number Diff line change
@@ -15,7 +15,7 @@
<h1>Homology, advanced | Ideogram</h1>
<a href="../">Overview</a> |
<a href="homology-basic">Previous</a> |
<a href="homology-interspecies">Next</a> |
<a href="annotations-basic">Next</a> |
<a href="https://github.com/eweitz/ideogram/blob/gh-pages/homology-advanced.html" target="_blank">Source</a>
<p>
Large-scale insertions, deletions, and inversions are represented below.
4 changes: 2 additions & 2 deletions examples/vanilla/homology-basic.html
View file
Original file line number Diff line number Diff line change
@@ -14,13 +14,13 @@
<body>
<h1>Homology, basic | Ideogram</h1>
<a href="../">Overview</a> |
<a href="eukaryotes">Previous</a> |
<a href="comparative-genomics">Previous</a> |
<a href="homology-advanced">Next</a> |
<a href="https://github.com/eweitz/ideogram/blob/gh-pages/homology-basic.html" target="_blank">Source</a>
<p>
Pseudoautosomal regions (PAR) are the only parts of chromosomes X and Y
that typically undergo genetic recombination. PAR1 and PAR2 are depicted
below.
below. See also <a href="homology-advanced">Compare, structure</a>.
</p>
<script type="text/javascript">

14 changes: 7 additions & 7 deletions examples/vanilla/index.html
View file
Original file line number Diff line number Diff line change
@@ -68,19 +68,19 @@ <h1>Overview | Ideogram</h1>
<div class="card">
<a href="eukaryotes"><img src="img/eukaryotes_ideogram.png"/></a>
<div><a href="eukaryotes">Eukaryotes</a><br/> Genomes for many organisms, using data fetched via API.</div>
</div>
<div class="card">
<a href="comparative-genomics"><img src="img/homology_interspecies_ideogram.png"/></a>
<div><a href="comparative-genomics">Orthologs</a><br/> Search and display similar genes among diverse organisms.</div>
</div>
<div class="card">
<a href="homology-basic"><img src="img/homology_basic_ideogram.png"/></a>
<div><a href="homology-basic">Homology, basic</a><br/> Simple relations between two chromosomes.</div>
<div><a href="homology-basic">Compare, PAR</a><br/> Simple relations between two chromosomes.</div>
</div>
<div class="card">
<a href="homology-advanced"><img src="img/homology_advanced_ideogram.png"/></a>
<div><a href="homology-advanced">Homology, advanced</a><br/> Relations between two chromosomes, using color and opacity.</div>
</div>
<div class="card">
<a href="homology-interspecies"><img src="img/homology_interspecies_ideogram.png"/></a>
<div><a href="homology-interspecies">Homology, interspecies</a><br/> Relations between two chromosomes, each from a different taxon.</div>
</div>
<div><a href="homology-advanced">Compare, structure</a><br/> Relations between two chromosomes, using color and opacity.</div>
</div>
<div class="card">
<a href="annotations-basic"><img src="img/annotations_basic_ideogram.png"/></a>
<div><a href="annotations-basic">Annotations, basic</a><br/> Location of a gene on a chromosome.</div>
Loading