Skip to content

Commit

Permalink
Merge branch 'ui-v2' of https://github.com/IGS/gEAR into ui-v2
Browse files Browse the repository at this point in the history
  • Loading branch information
@adkinsrs
adkinsrs committed Aug 9, 2024
2 parents 3c2a2e7 + 8421ed8 commit 3f36673
Show file tree
Hide file tree
Showing 4 changed files with 197 additions and 140 deletions.
13 changes: 8 additions & 5 deletions www/js/expression.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,11 @@ let svg_scoring_method = 'gene';
let datasetShareId = null;
let layoutShareId = null;

// Plugins can add functions to this which are called after a gene selection change is made
let geneChangeCallbacks = [];

/*
TODOs:
- hide the annotation panel when multi-gene searches are displayed
- check if the user has a stored default profile and select that one if none were passed (index page too)
- If I clear the gene symbol search, then click, the gene symbol is not updated and passes validation below - SAdkins
- Page currently doesn't seem to be submitting history events
- Entire annotation section should be collapsible, leaving only gene name and product
- Scrolling of datasets in collection should still show gene list
- When changing genes the tiles need to show 'loading' states before redrawing
- When changing scopes the tiles need to show 'loading' states before redrawing
Expand Down Expand Up @@ -471,6 +469,11 @@ const selectGeneResult = (gene_symbol) => {
if (tilegrid) {
tilegrid.renderDisplays(currently_selected_gene_symbol, is_multigene, svg_scoring_method);
}

// call any callbacks that have been added (usually by plugins)
for (const callback of geneChangeCallbacks) {
callback();
}
}

/**
Expand Down
31 changes: 11 additions & 20 deletions www/plugins/deafness_gene_annotation/expression.css
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,14 @@
div#deafness_links_c img:hover {
cursor: pointer;
div.deafness-dropdown-header {
font-weight: bold;
}
div#deafness_links_c img {
height: 24px;
width: 24px;
div.deafness-dropdown-subheader {
font-weight: italic;

}
div#deafness_popover_c,
div#deafness_popover_templates_c {
display: none;
}
ul#deafness_popover_phenotypes,
ul#deafness_popover_links {
list-style: none;
margin-left: 5px;
padding-left: 0;
}
.deafness_resource_link_i {
list-style: none;
}
.deafness_resource_link_i a {
padding-left: 10px;
div.dm-deafness .dropdown-content {
width: 25vw;
}
span.deafness-item-link {
font-size: 90%;
padding-left: 1em;
}
132 changes: 90 additions & 42 deletions www/plugins/deafness_gene_annotation/expression.html
View file
Original file line number Diff line number Diff line change
@@ -1,49 +1,97 @@
<div class="column is-5 mb-0 pb-0">
<h4 class="mb-1">Deafness Gene Annotation</h4>
<div class="tags are-small">
<span class="tag is-rounded">Mouse</span>
<span class="tag is-rounded">Human</span>
<span class="tag is-rounded">DFNA54</span>
</div>
</div>
<div>

<div class="dropdown is-right">
<div class="dropdown-trigger">
<button id="btn-deafness-gene-mouse" class="button is-rounded is-small btn-dm"
aria-haspopup="true" aria-controls="dropdown-menu"
data-tooltip="Click for mouse deafness genes">
<span class="icon is-small">
<img id="img-deafness-gene-mouse" src="./img/icons/org-1-outline-64.svg" />
</span>
</button>
</div>
<div class="dropdown-menu dm-deafness" role="menu">
<div class="dropdown-content">
<div class="dropdown-item">
<div class="deafness-dropdown-header">Deafness gene info</div>
<hr class="mt-2 mb-2" />
<div class="deafness-dropdown-subheader">Phenotypes</div>
</div>
<div id="dm-deafness-gene-mouse-phenotypes" class="dm-deafness-phenotypes pl-4 pr-4"></div>
<div class="dropdown-item mt-3">
<div class="deafness-dropdown-subheader">Deafness resource links</div>
</div>
<div id="dm-deafness-gene-mouse-links" class="dm-deafness-links"></div>
</div>
</div>
</div>

<div class="dropdown is-right">
<div class="dropdown-trigger">
<button id="btn-deafness-gene-human" class="button is-rounded is-small btn-dm"
aria-haspopup="true" aria-controls="dropdown-menu"
data-tooltip="Click for human deafness genes">
<span class="icon is-small">
<img id="img-deafness-gene-human" src="./img/icons/org-2-outline-64.svg" />
</span>
</button>
</div>
<div class="dropdown-menu dm-deafness" role="menu">
<div class="dropdown-content">
<div class="dropdown-item">
<div class="deafness-dropdown-header">Deafness gene info</div>
<hr class="mt-2 mb-2" />
<div class="deafness-dropdown-subheader">Phenotypes</div>
</div>
<div id="dm-deafness-gene-human-phenotypes" class="dm-deafness-phenotypes pl-4 pr-4"></div>
<div class="dropdown-item mt-3">
<div class="deafness-dropdown-subheader">Deafness resource links</div>
</div>
<div id="dm-deafness-gene-human-links" class="dm-deafness-links"></div>
</div>
</div>
</div>

<div class="dropdown is-right">
<div class="dropdown-trigger">
<button id="btn-deafness-gene-human-putative" class="button is-rounded is-small btn-dm"
aria-haspopup="true" aria-controls="dropdown-menu"
data-tooltip="Click for human (putative) deafness genes">
<span class="icon is-small">
<img id="img-deafness-gene-human-putative" src="./img/icons/org-2-unknown-outline-64.svg" />
</span>
</button>
</div>
<div class="dropdown-menu dm-deafness" role="menu">
<div class="dropdown-content">
<div class="dropdown-item">
<div class="deafness-dropdown-header">Deafness gene info</div>
<hr class="mt-2 mb-2" />
<div class="deafness-dropdown-subheader">Locus</div>
</div>
<div id="dm-deafness-gene-human-putative-loci" class="dm-deafness-phenotypes pl-4 pr-4"></div>
<div class="dropdown-item mt-3">
<div class="deafness-dropdown-subheader">Deafness resource links</div>
</div>
<div id="dm-deafness-gene-human-putative-links" class="dm-deafness-links"></div>
</div>
</div>
</div>

<!--
<div id='deafness_annotation_plugin_c'>
<h4>Deafness gene annotation</h4>
<div id="deafness_links_c">
<button id="deafness_gene_mouse" class="icon-deafness-gene"
data-title="No data available" data-popover=''>
<img src="./img/icons/org-1-outline-64.svg" alt="Mouse" />
</button>
<button id="deafness_gene_human" class="icon-deafness-gene"
data-title="No data available" data-popover=''>
<img src="./img/icons/org-2-outline-64.svg" alt="Human" />
</button>
<button id="deafness_gene_human_putative" class="icon-deafness-gene"
data-title="No data available" data-popover=''>
<img src="./img/icons/org-2-unknown-outline-64.svg" alt="Human" />
</button>
</div>
<!-- Don't use single quotes below here -->

<!--
<div id="deafness_popover_c">
<h4>Phenotypes</h4>
<ul id="deafness_popover_phenotypes">No data available</ul>
<h4>Deafness resource links</h4>
<ul id="deafness_popover_links"></ul>
</div>
<div id="deafness_popover_templates_c">
<template id="tmpl_deafness_phenotypes">
<li class="deafness_phenotype_i">{{:#data}}</li>
</template>
<template id="tmpl_deafness_resource_links">
<li class="deafness_resource_link_i"><i class="fa fa-external-link"></i><a href="{{:url}}" target="_blank">{{:label}}</a></li>
</template>
<template id="tmpl-deafness-phenotype">
<span class="tag is-light"></span>
</template>
<template id="tmpl-deafness-resource-link">
<span class="icon-text dropdown-item deafness-item-link">
<span class="icon">
<i class="mdi mdi-open-in-new"></i>
</span>
<span>
<a href="" target="_blank"></a>
</span>
</span>
</template>
</div>
</div>
-->
161 changes: 88 additions & 73 deletions www/plugins/deafness_gene_annotation/expression.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,96 +3,110 @@ let omim_data;
let hl_data;
let mgi_data;

function deafness_plugin_gene_change() {
const gene_symbol = SELECTED_GENE.text().toLowerCase();

// disable button#deafness_gene_mouse, button#deafness_gene_human, button#deafness_gene_human_putative
document.getElementById("deafness_gene_mouse").disabled = true;
document.getElementById("deafness_gene_human").disabled = true;
document.getElementById("deafness_gene_human_putative").disabled = true;
function add_dga_button_listeners() {
document.querySelectorAll('.btn-dm').forEach(item => {
item.addEventListener('click', event => {
let dm = item.closest('.dropdown');

if (dm.classList.contains('is-active')) {
dm.classList.remove('is-active');
} else {
dm.classList.add('is-active');
}

// reset all
document.querySelector('#deafness_gene_mouse img').setAttribute('src', './img/icons/org-1-outline-64.svg');
document.querySelector('#deafness_gene_human img').setAttribute('src', './img/icons/org-2-outline-64.svg');
document.querySelector('#deafness_gene_human_putative img').setAttribute('src', './img/icons/org-2-unknown-outline-64.svg');
document.querySelector('#deafness_gene_mouse').setAttribute('data-title', 'No data available');
document.querySelector('#deafness_gene_human').setAttribute('data-title', 'No data available');
document.querySelector('#deafness_gene_human_putative').setAttribute('data-title', 'No data available');
document.querySelector('#deafness_popover_phenotypes').innerHTML = 'No data available';
document.querySelectorAll('.btn-dm').forEach(btn => {
if (btn !== item) {
dm = btn.closest('.dropdown');
dm.classList.remove('is-active');
}
});
});
});
}

let mouse_deafness_links = [];

if (mgi_data.hasOwnProperty(gene_symbol)) {
mouse_deafness_links = mouse_deafness_links.concat(mgi_data[gene_symbol]['links']);
document.querySelector('#deafness_gene_mouse').setAttribute('data-title', 'Click for links and phenotypes');
function deafness_plugin_gene_change() {
const gene_symbol = currently_selected_gene_symbol.toLowerCase();

document.querySelector('#deafness_popover_phenotypes').innerHTML = '';
// remove the active class from all dropdowns
document.querySelectorAll('.dropdown').forEach(item => {
item.classList.remove('is-active');
});

for (link of mouse_deafness_links) {
// Disable the buttons (do we really need to?)
document.getElementById("btn-deafness-gene-mouse").disabled = true;
document.getElementById("btn-deafness-gene-human").disabled = true;
document.getElementById("btn-deafness-gene-human-putative").disabled = true;

}
// Reset the images to the outline states
document.getElementById("img-deafness-gene-mouse").src = "./img/icons/org-1-outline-64.svg";
document.getElementById("img-deafness-gene-human").src = "./img/icons/org-2-outline-64.svg";
document.getElementById("img-deafness-gene-human-putative").src = "./img/icons/org-2-unknown-outline-64.svg";

const phenotypes_tmpl = $.templates("#tmpl_deafness_phenotypes");
const phenotypes_html = phenotypes_tmpl.render(mgi_data[gene_symbol]['phenotypes']);
$("#deafness_popover_phenotypes").html(phenotypes_html);
// Clear any existing lists
for (const list of document.querySelectorAll(".dm-deafness-phenotypes")) {
list.innerHTML = "";
}

if (impc_data.hasOwnProperty(gene_symbol)) {
$('#deafness_gene_mouse').attr('data-title', impc_data[gene_symbol]['on_hover']);
mouse_deafness_links = mouse_deafness_links.concat(impc_data[gene_symbol]['links']);
for (const list of document.querySelectorAll(".dm-deafness-links")) {
list.innerHTML = "";
}

if (mouse_deafness_links.length > 0) {
$("button#deafness_gene_mouse").attr("disabled", false);
$('#deafness_gene_mouse img').attr('src', './img/icons/org-1-dark-64.svg');
var links_tmpl = $.templates("#tmpl_deafness_resource_links");
var links_html = links_tmpl.render(mouse_deafness_links);
$("#deafness_popover_links").html(links_html);
const phenotype_template = document.getElementById('tmpl-deafness-phenotype');
const link_template = document.getElementById('tmpl-deafness-resource-link');

$('#deafness_gene_mouse').attr("data-popover", $("#deafness_popover_c").html())
}
if (mgi_data.hasOwnProperty(gene_symbol)) {
for (const phenotype of mgi_data[gene_symbol]['phenotypes']) {
const span = phenotype_template.content.cloneNode(true);
span.querySelector('span').innerHTML = phenotype;
document.getElementById('dm-deafness-gene-mouse-phenotypes').appendChild(span);
}

// this is here after mouse so that the phenotypes don't carry over to other organisms
$('#deafness_popover_phenotypes').html('No data available');
for (const link of mgi_data[gene_symbol]['links']) {
const a = link_template.content.cloneNode(true);
a.querySelector('a').innerHTML = link['label'];
a.querySelector('a').href = link['url'];
document.getElementById('dm-deafness-gene-mouse-links').appendChild(a);
}

document.getElementById("img-deafness-gene-mouse").src = "./img/icons/org-1-dark-64.svg";
document.getElementById("btn-deafness-gene-mouse").disabled = false;
}

if (omim_data.hasOwnProperty(gene_symbol)) {
$("button#deafness_gene_human").attr("disabled", false);
$('#deafness_gene_human img').attr('src', './img/icons/org-2-dark-64.svg');
$('#deafness_gene_human').attr('data-title',
omim_data[gene_symbol]['phenotypes'].join(' - '));

var links_tmpl = $.templates("#tmpl_deafness_resource_links");
var links_html = links_tmpl.render(omim_data[gene_symbol]['links']);
$("#deafness_popover_links").html(links_html);
$('#deafness_gene_human').attr("data-popover", $("#deafness_popover_c").html())
for (const phenotype of omim_data[gene_symbol]['phenotypes']) {
const span = phenotype_template.content.cloneNode(true);
span.querySelector('span').innerHTML = phenotype;
document.getElementById('dm-deafness-gene-human-phenotypes').appendChild(span);
}

for (const link of omim_data[gene_symbol]['links']) {
const a = link_template.content.cloneNode(true);
a.querySelector('a').innerHTML = link['label'];
a.querySelector('a').href = link['url'];
document.getElementById('dm-deafness-gene-human-links').appendChild(a);
}

document.getElementById("img-deafness-gene-human").src = "./img/icons/org-2-dark-64.svg";
document.getElementById("btn-deafness-gene-human").disabled = false;
}

if (hl_data.hasOwnProperty(gene_symbol)) {
$("button#deafness_gene_human_putative").attr("disabled", false);
$('#deafness_gene_human_putative img').attr('src', './img/icons/org-2-unknown-dark-64.svg');
$('#deafness_gene_human_putative').attr('data-title',
hl_data[gene_symbol]['locus']);

var links_tmpl = $.templates("#tmpl_deafness_resource_links");
var links_html = links_tmpl.render(hl_data[gene_symbol]['links']);
$("#deafness_popover_links").html(links_html);
$('#deafness_gene_human_putative').attr("data-popover", $("#deafness_popover_c").html())
}
const locus = hl_data[gene_symbol]['locus'];
const span = phenotype_template.content.cloneNode(true);
span.querySelector('span').innerHTML = locus;
document.getElementById('dm-deafness-gene-human-putative-loci').appendChild(span);

for (const link of hl_data[gene_symbol]['links']) {
const a = link_template.content.cloneNode(true);
a.querySelector('a').innerHTML = link['label'];
a.querySelector('a').href = link['url'];
document.getElementById('dm-deafness-gene-human-putative-links').appendChild(a);
}

$('button.icon-deafness-gene').each(function() {
$(this).popover("dispose").popover({
content : $(this).attr("data-popover"),
placement : 'auto',
title : 'Deafness gene info',
trigger: 'focus',
html: true
}).tooltip("dispose").tooltip({
placement : 'top',
title : $(this).attr("data-title")
}).on('show.bs.popover', function() {
$(this).tooltip('hide')
})
});
document.getElementById("img-deafness-gene-human-putative").src = "./img/icons/org-2-dark-64.svg";
document.getElementById("btn-deafness-gene-human-putative").disabled = false;
}
}


Expand Down Expand Up @@ -184,5 +198,6 @@ fetch("./plugins/deafness_gene_annotation/mgi_data.json")
.catch(function(err) {
console.error('Fetch Error :-S', err);
});

//search_result_postselection_functions.push(deafness_plugin_gene_change);

geneChangeCallbacks.push(deafness_plugin_gene_change);
add_dga_button_listeners();

0 comments on commit 3f36673

Please sign in to comment.