ideogram
Version:
Chromosome visualization for the web
341 lines (299 loc) • 11.9 kB
HTML
<html>
<head>
<title>Related genes | Ideogram</title>
<style>
body {font: 14px Arial; line-height: 19.6px; padding: 0 15px;
/* font-family: 'Montserrat', sans-serif; */
}
a, a:visited {text-decoration: none;}
a:hover {text-decoration: underline;}
a, a:hover, a:visited, a:active {color: #0366d6;}
select, optgroup, option {
float: left;
font-size: 14px;
}
#ideogram-container {z-index: -1}
#search-container {
height: 26px;
float: left;
position: relative;
top: -4px;
margin-left: 10px;
}
#search-genes {
padding-left: 3px;
width: 200px;
height: 20px;
font-size: 14px;
border-radius: 3px;
border: 1px solid #888;
}
#search-button {
height: 23px;
width: 23px;
font-size: 24px;
background: #58F;
color: #FFF;
display: inline-block;
position: relative;
top: 2px;
left: -25px;
border-radius: 3px;
text-align: center;
padding-top: 1px;
cursor: pointer;
}
</style>
<script type="text/javascript" src="../../dist/js/ideogram.min.js"></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Montserrat%3A100%2C100italic%2C200%2C200italic%2C300%2C300italic%2C400%2C400italic%2C500%2C500italic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic%2C900%2C900italic&display=swap&ver=5.7.1" rel="stylesheet">
<link rel="icon" type="image/x-icon" href="img/ideogram_favicon.ico">
</head>
<body>
<h1>Related genes | Ideogram</h1>
<a href="../">Overview</a> |
<a href="annotations-heatmap">Previous</a> |
<a href="differential-expression">Next</a> |
<a href="https://github.com/eweitz/ideogram/blob/gh-pages/related-genes.html" target="_blank">Source</a>
<p>
Find interacting pathway genes and paralogs.
See also <a href="orthologs">Orthologs</a>.
</p>
<div>
<select>
<optgroup label="Model organisms">
<option value="homo-sapiens" selected>Human (Homo sapiens)</option>
<!-- <option value="tupaia-belangeri" selected>Tree shrew (Tupaia belangeri)</option> -->
<option value="mus-musculus">Mouse (Mus musculus)</option>
<option value="rattus-norvegicus">Rat (Rattus norvegicus)</option>
<option value="drosophila-melanogaster">Fly (Drosophila melanogaster)</option>
<option value="caenorhabditis-elegans">Worm (Caenorhabditis elegans)</option>
<option value="danio-rerio">Zebrafish (Danio rerio)</option>
<option value="arabidopsis-thaliana">Thale cress (Arabidopsis thaliana)</option>
<!-- <option value="saccharomyces-cerevisiae">Yeast (Saccharomyces cerevisiae)</option> -->
</optgroup>
<optgroup label="Vertebrates">
<option value="pan-troglodytes">Chimpanzee (Pan troglodytes)</option>
<option value="macaca-mulatta">Macaque (Macaca mulatta)</option>
<option value="macaca-fascicularis">Crab-eating macaque (Macaca fascicularis)</option>
<option value="felis-catus">Cat (Felis catus)</option>
<option value="canis-lupus-familiaris">Dog (Canis lupus familiaris)</option>
<option value="equus-caballus">Horse (Equus caballus)</option>
<option value="bos-taurus">Cow (Bos taurus)</option>
<option value="sus-scrofa">Pig (Sus scrofa)</option>
<!-- <option value="petromyzon-marinus">Lamprey (Petromyzon marinus)</option> -->
</optgroup>
<!--
<optgroup label="Plants">
<option value="zea-mays">Maize (Zea mays)</option>
<option value="oryza-sativa">Rice (Oryza sativa)</option>
<option value="solanum-lycopersicum">Tomato (Solanum lycopersicum)</option>
<option value="musa-acuminata">Banana (Musa acuminata)</option>
<option value="vitis-vinifera">Grape (Vitis vinifera)</option>
<option value="micromonas-commoda">Green algae (Micromonas commoda)</option>
</optgroup>
<optgroup label="Insects">
<option value="anopheles-gambiae">Mosquito (Anopheles gambiae)</option>
</optgroup>
<optgroup label="Protozoa">
<option value="plasmodium-falciparum">Malaria parasite (Plasmodium falciparum)</option>
<option value="leishmania-donovani">Leishmania parasite (Leishmania donovani)</option>
</optgroup>
-->
</select>
</div>
<div style="float: left; width: 350px;">
<label for="search-genes" id="search-container">
<input id="search-genes" autocomplete="off" placeholder="Search gene"/>
<span id="search-button">
<svg width="12" height="13"><g stroke-width="2" stroke="#FFF" fill="none"><path d="M11.29 11.71l-4-4"/><circle cx="5" cy="5" r="4"/></g></svg>
</span>
<div id="examples" style="font-size: 12px"></div>
</label>
</div>
<br/><br/><br/>
<div id="ideogram-container" style="visibility: hidden;"></div>
<script type="text/javascript">
const examplesByOrganism = {
'homo-sapiens': ['RAD51', 'CD4', 'APOE'],
'tupaia-belangeri': ['RAD51', 'CD4', 'APOE'],
'mus-musculus': ['Pten', 'Rad51', 'Sox2'],
'rattus-norvegicus': ['Rad51', 'Pten', 'Sox2'],
'drosophila-melanogaster': ['dpp', 'N', 'Ubx'],
'caenorhabditis-elegans': ['rad-51', 'daf-16', 'hsf-1'],
'saccharomyces-cerevisiae': ['rad51', 'atp6', 'cytb'],
'arabidopsis-thaliana': ['PHYA', 'FLC', 'FT'],
'danio-rerio': ['bmp4', 'myod1', 'cyp1a'],
'pan-troglodytes': ['RAD51', 'CD4', 'APOE'],
'macaca-mulatta': ['RAD51', 'CD4', 'APOE'],
'macaca-fascicularis': ['RAD51', 'CD4', 'APOE'],
'felis-catus': ['OXTR', 'MAPK9', 'FGF5'],
'canis-lupus-familiaris': ['OXTR', 'MAPK9', 'FGF5'],
'equus-caballus': ['RAD51', 'CD4', 'APOE'],
'bos-taurus': ['RAD51', 'CD4', 'APOE'],
'sus-scrofa': ['RAD51', 'CD4', 'APOE'],
'petromyzon-marinus': ['FGB', 'SDS-1', 'CCK'],
'zea-mays': ['aprl6', 'pdi6', 'adh1'],
'oryza-sativa': ['psbA', 'ndhE', 'rps19'],
'anopheles-gambiae': ['ND1', 'CYTB', 'ATP6'],
'plasmodium-falciparum': ['coxIII', 'PFBI', 'PFFE1']
}
const urlParams = parseUrlParams();
const organism = 'org' in urlParams ? urlParams.org : 'homo-sapiens';
document.querySelector(`[value="${organism}"]`).selected = true;
document.querySelector('select').addEventListener('change', handleOrganism);
if ('q' in urlParams) {
document.querySelector('#search-genes').value = urlParams['q'];
}
document.querySelector('#search-button').addEventListener('click', handleSearch);
document.querySelector('#search-genes').addEventListener('keyup', handleSearch);
function parseUrlParams() {
let rawParams = document.location.search;
const 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;
});
}
return urlParams;
}
// Record app state in URL
function updateUrl() {
const params = Object.keys(urlParams).map(key => {
return key + '=' + urlParams[key];
}).join('&');
history.pushState(null, null, '?' + params);
}
function getOrganism() {
const selectedOrg =
document.querySelector('option:checked').text
.split('(')[1].split(')')[0]
.replace(/ /g, '-').toLowerCase();
return selectedOrg;
}
function getGene() {
const searchInput = document.getElementById('search-genes').value.trim();
// Handles e.g. "BRCA1,BRCA2", "BRCA1 BRCA2", and "BRCA1, BRCA2"
const geneSymbols = searchInput.split(/[, ]/).filter(d => d !== '')
const geneSymbol = geneSymbols[0];
return geneSymbol;
}
function updateExamples(organism) {
const rawExamples = examplesByOrganism[organism];
const examples = rawExamples.map(example => {
return `<a href="?q=${example}&org=${organism}">${example}</a>`;
});
const formattedExamples = examples.join(', ');
document.querySelector('#examples').innerHTML =
`Examples: ${formattedExamples}`;
}
async function handleOrganism() {
const newOrganism = getOrganism();
const newGene = getGene();
urlParams.org = newOrganism;
if (typeof newGene === 'undefined') {
document.querySelector('#ideogram-container').style.visibility = 'hidden';
delete urlParams.q;
} else {
urlParams.q = newGene;
}
updateUrl();
updateExamples(newOrganism);
config.organism = urlParams.org;
// const banded = !['homo sapiens', 'mus musculus'].includes(selectedOrg);
// config.showFullyBanded = banded;
delete ideogram;
ideogram = Ideogram.initRelatedGenes(config);
}
function displayError(error) {
document.querySelector('#ideogram-container').innerHTML =
`<div style="color:red; text-align: center;">${error}</div>`;
}
// Process text input for the "Search" field.
async function handleSearch(event) {
// Ignore non-"Enter" keyups
if (event.type === 'keyup' && event.keyCode !== 13) return;
urlParams.org = getOrganism();
urlParams.q = getGene();
updateUrl();
try {
await ideogram.plotRelatedGenes(urlParams.q);
document.querySelector('#ideogram-container').style.visibility = '';
} catch(error) {
displayError(error);
}
}
async function plotGeneFromUrl() {
try {
if ('q' in urlParams) {
await ideogram.plotRelatedGenes(urlParams['q']);
document.querySelector('#ideogram-container').style.visibility = '';
} else {
await ideogram.plotRelatedGenes();
}
} catch(error) {
displayError(error);
}
}
function reportRelatedGenes() {
console.log(this.relatedGenesAnalytics)
}
function onClickAnnot(annot) {
document.querySelector('#search-genes').value = annot.name;
urlParams['q'] = annot.name;
updateUrl();
const selector = '#ideogram-container #_ideogramInnerWrap'
ideogram.plotRelatedGenes(annot.name);
}
function onWillShowAnnotTooltip(annot) {
const ideo = this;
const tooltipAnalytics = ideo.getTooltipAnalytics(annot);
// Reduces analytics noise. Accounts for quick moves from label to
// annot, which flickers tooltip and represents an technical artifact
// that is not worth analyzing.
if (tooltipAnalytics) console.log(tooltipAnalytics);
return annot
}
updateExamples(organism);
config = {
organism: organism,
container: '#ideogram-container',
chrWidth: 9,
chrHeight: 100,
chrLabelSize: 12,
annotationHeight: 7,
// fontFamily: "'Montserrat', sans-serif",
onLoad: plotGeneFromUrl,
onPlotRelatedGenes: reportRelatedGenes,
showParalogNeighborhoods: true,
onClickAnnot
}
// annotsInList = ['CDK9', 'CDK19', 'CDK1'];
// let ideogram = Ideogram.initRelatedGenes(config, annotsInList)
let ideogram;
if ('debug' in urlParams) config.debug = true;
if ('q' in urlParams) {
ideogram = Ideogram.initRelatedGenes(config);
} else {
if ('default-hints' in urlParams) {
config.annotationsPath = urlParams['default-hints'];
}
if ('org' in urlParams) {
if (urlParams.org === 'homo-sapiens') {
ideogram = Ideogram.initGeneHints(config);
} else {
ideogram = Ideogram.initRelatedGenes(config);
}
} else {
ideogram = Ideogram.initGeneHints(config);
}
}
</script>
</body>
</html>