From f4ec613a25cba3fc5716101ff88eab86f20368e8 Mon Sep 17 00:00:00 2001 From: Joshua Orvis Date: Fri, 9 Aug 2024 00:48:46 -0500 Subject: [PATCH 1/5] Deafness gene annotation framework now restored, initially with mouse annotation --- www/js/expression.js | 13 +-- .../deafness_gene_annotation/expression.css | 31 +++---- .../deafness_gene_annotation/expression.html | 84 ++++++++++--------- .../deafness_gene_annotation/expression.js | 77 +++++++++++------ 4 files changed, 117 insertions(+), 88 deletions(-) diff --git a/www/js/expression.js b/www/js/expression.js index 6331a11e..19dbcacc 100644 --- a/www/js/expression.js +++ b/www/js/expression.js @@ -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 @@ -448,6 +446,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(); + } } /** diff --git a/www/plugins/deafness_gene_annotation/expression.css b/www/plugins/deafness_gene_annotation/expression.css index 638ee471..f4ab0a46 100644 --- a/www/plugins/deafness_gene_annotation/expression.css +++ b/www/plugins/deafness_gene_annotation/expression.css @@ -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: 20vw; } +span.deafness-item-link { + font-size: 90%; + padding-left: 1em; +} \ No newline at end of file diff --git a/www/plugins/deafness_gene_annotation/expression.html b/www/plugins/deafness_gene_annotation/expression.html index 0ed5c9b0..422a674d 100644 --- a/www/plugins/deafness_gene_annotation/expression.html +++ b/www/plugins/deafness_gene_annotation/expression.html @@ -1,49 +1,55 @@

Deafness Gene Annotation

-
- Mouse - Human - DFNA54 -
-
- - - - - diff --git a/www/plugins/deafness_gene_annotation/expression.js b/www/plugins/deafness_gene_annotation/expression.js index 48ae7394..3eccbec9 100644 --- a/www/plugins/deafness_gene_annotation/expression.js +++ b/www/plugins/deafness_gene_annotation/expression.js @@ -3,39 +3,67 @@ let omim_data; let hl_data; let mgi_data; +function add_dga_button_listeners() { + document.querySelectorAll('.btn-dm').forEach(item => { + item.addEventListener('click', event => { + const dm = item.closest('.dropdown'); + + if (dm.classList.contains('is-active')) { + dm.classList.remove('is-active'); + } else { + dm.classList.add('is-active'); + } + }); + }); +} + + function deafness_plugin_gene_change() { - const gene_symbol = SELECTED_GENE.text().toLowerCase(); + const gene_symbol = currently_selected_gene_symbol.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; + // remove the active class from all dropdowns + document.querySelectorAll('.dropdown').forEach(item => { + item.classList.remove('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'; + // 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; - let mouse_deafness_links = []; + // 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"; - 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'); + // Clear any existing lists + document.querySelector(".dm-deafness-phenotypes").innerHTML = ""; + document.querySelector(".dm-deafness-links").innerHTML = ""; - document.querySelector('#deafness_popover_phenotypes').innerHTML = ''; + const phenotype_template = document.getElementById('tmpl-deafness-phenotype'); + const link_template = document.getElementById('tmpl-deafness-resource-link'); - for (link of mouse_deafness_links) { + 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); + } + 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); } - const phenotypes_tmpl = $.templates("#tmpl_deafness_phenotypes"); - const phenotypes_html = phenotypes_tmpl.render(mgi_data[gene_symbol]['phenotypes']); - $("#deafness_popover_phenotypes").html(phenotypes_html); + document.getElementById("img-deafness-gene-mouse").src = "./img/icons/org-1-dark-64.svg"; + document.getElementById("btn-deafness-gene-mouse").disabled = false; } + + return; + + if (impc_data.hasOwnProperty(gene_symbol)) { $('#deafness_gene_mouse').attr('data-title', impc_data[gene_symbol]['on_hover']); @@ -184,5 +212,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); +geneChangeCallbacks.push(add_dga_button_listeners); From cf6c36f46015fbe84eff4bff310e56f63731c21c Mon Sep 17 00:00:00 2001 From: Joshua Orvis Date: Fri, 9 Aug 2024 10:29:18 -0500 Subject: [PATCH 2/5] Finished restoring deafness gene plugin functionality (issue #748) --- .../deafness_gene_annotation/expression.css | 2 +- .../deafness_gene_annotation/expression.html | 88 ++++++++++++++----- .../deafness_gene_annotation/expression.js | 81 ++++++++--------- 3 files changed, 105 insertions(+), 66 deletions(-) diff --git a/www/plugins/deafness_gene_annotation/expression.css b/www/plugins/deafness_gene_annotation/expression.css index f4ab0a46..86b05755 100644 --- a/www/plugins/deafness_gene_annotation/expression.css +++ b/www/plugins/deafness_gene_annotation/expression.css @@ -6,7 +6,7 @@ div.deafness-dropdown-subheader { } div.dm-deafness .dropdown-content { - width: 20vw; + width: 25vw; } span.deafness-item-link { font-size: 90%; diff --git a/www/plugins/deafness_gene_annotation/expression.html b/www/plugins/deafness_gene_annotation/expression.html index 422a674d..7b6a248f 100644 --- a/www/plugins/deafness_gene_annotation/expression.html +++ b/www/plugins/deafness_gene_annotation/expression.html @@ -4,7 +4,9 @@

Deafness Gene Annotation

-
- - - - - - diff --git a/www/plugins/deafness_gene_annotation/expression.js b/www/plugins/deafness_gene_annotation/expression.js index 3eccbec9..d58c7771 100644 --- a/www/plugins/deafness_gene_annotation/expression.js +++ b/www/plugins/deafness_gene_annotation/expression.js @@ -6,13 +6,20 @@ let mgi_data; function add_dga_button_listeners() { document.querySelectorAll('.btn-dm').forEach(item => { item.addEventListener('click', event => { - const dm = item.closest('.dropdown'); + let dm = item.closest('.dropdown'); if (dm.classList.contains('is-active')) { dm.classList.remove('is-active'); } else { dm.classList.add('is-active'); } + + document.querySelectorAll('.btn-dm').forEach(btn => { + if (btn !== item) { + dm = btn.closest('.dropdown'); + dm.classList.remove('is-active'); + } + }); }); }); } @@ -60,40 +67,45 @@ function deafness_plugin_gene_change() { document.getElementById("img-deafness-gene-mouse").src = "./img/icons/org-1-dark-64.svg"; document.getElementById("btn-deafness-gene-mouse").disabled = false; } - - return; - - - 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']); - } + if (omim_data.hasOwnProperty(gene_symbol)) { + 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); + } - 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); + 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); + } - $('#deafness_gene_mouse').attr("data-popover", $("#deafness_popover_c").html()) + document.getElementById("img-deafness-gene-human").src = "./img/icons/org-2-dark-64.svg"; + document.getElementById("btn-deafness-gene-human").disabled = false; } - // this is here after mouse so that the phenotypes don't carry over to other organisms - $('#deafness_popover_phenotypes').html('No data available'); + if (hl_data.hasOwnProperty(gene_symbol)) { + 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); - 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(' - ')); + 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); + } - 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()) + document.getElementById("img-deafness-gene-human-putative").src = "./img/icons/org-2-dark-64.svg"; + document.getElementById("btn-deafness-gene-human-putative").disabled = false; } + + return; + + if (hl_data.hasOwnProperty(gene_symbol)) { $("button#deafness_gene_human_putative").attr("disabled", false); @@ -106,21 +118,6 @@ function deafness_plugin_gene_change() { $("#deafness_popover_links").html(links_html); $('#deafness_gene_human_putative').attr("data-popover", $("#deafness_popover_c").html()) } - - $('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') - }) - }); } From 4f2118da9bca45c2b36acbb65638c44d043336b2 Mon Sep 17 00:00:00 2001 From: Joshua Orvis Date: Fri, 9 Aug 2024 10:38:37 -0500 Subject: [PATCH 3/5] Fixed issue where changing genes wasn't clearing all phenotype/links --- www/plugins/deafness_gene_annotation/expression.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/www/plugins/deafness_gene_annotation/expression.js b/www/plugins/deafness_gene_annotation/expression.js index d58c7771..82d7e98a 100644 --- a/www/plugins/deafness_gene_annotation/expression.js +++ b/www/plugins/deafness_gene_annotation/expression.js @@ -9,8 +9,10 @@ function add_dga_button_listeners() { let dm = item.closest('.dropdown'); if (dm.classList.contains('is-active')) { + console.log("removing active class"); dm.classList.remove('is-active'); } else { + console.log("adding active class"); dm.classList.add('is-active'); } @@ -44,8 +46,13 @@ function deafness_plugin_gene_change() { document.getElementById("img-deafness-gene-human-putative").src = "./img/icons/org-2-unknown-outline-64.svg"; // Clear any existing lists - document.querySelector(".dm-deafness-phenotypes").innerHTML = ""; - document.querySelector(".dm-deafness-links").innerHTML = ""; + for (const list of document.querySelectorAll(".dm-deafness-phenotypes")) { + list.innerHTML = ""; + } + + for (const list of document.querySelectorAll(".dm-deafness-links")) { + list.innerHTML = ""; + } const phenotype_template = document.getElementById('tmpl-deafness-phenotype'); const link_template = document.getElementById('tmpl-deafness-resource-link'); From 94c7be67d1677f207392063fc6c859c2be959496 Mon Sep 17 00:00:00 2001 From: Joshua Orvis Date: Fri, 9 Aug 2024 10:39:23 -0500 Subject: [PATCH 4/5] Removed older/commented code block --- .../deafness_gene_annotation/expression.js | 16 ---------------- 1 file changed, 16 deletions(-) diff --git a/www/plugins/deafness_gene_annotation/expression.js b/www/plugins/deafness_gene_annotation/expression.js index 82d7e98a..acd6ad49 100644 --- a/www/plugins/deafness_gene_annotation/expression.js +++ b/www/plugins/deafness_gene_annotation/expression.js @@ -109,22 +109,6 @@ function deafness_plugin_gene_change() { document.getElementById("img-deafness-gene-human-putative").src = "./img/icons/org-2-dark-64.svg"; document.getElementById("btn-deafness-gene-human-putative").disabled = false; } - - return; - - - - 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()) - } } From 8421ed8ddb1a718ec0a0a777e65e2b23e6f3d1e3 Mon Sep 17 00:00:00 2001 From: Joshua Orvis Date: Fri, 9 Aug 2024 10:48:08 -0500 Subject: [PATCH 5/5] Fixed issue where click events were being re-registered when the gene changed --- www/plugins/deafness_gene_annotation/expression.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/www/plugins/deafness_gene_annotation/expression.js b/www/plugins/deafness_gene_annotation/expression.js index acd6ad49..88392816 100644 --- a/www/plugins/deafness_gene_annotation/expression.js +++ b/www/plugins/deafness_gene_annotation/expression.js @@ -9,10 +9,8 @@ function add_dga_button_listeners() { let dm = item.closest('.dropdown'); if (dm.classList.contains('is-active')) { - console.log("removing active class"); dm.classList.remove('is-active'); } else { - console.log("adding active class"); dm.classList.add('is-active'); } @@ -202,4 +200,4 @@ fetch("./plugins/deafness_gene_annotation/mgi_data.json") }); geneChangeCallbacks.push(deafness_plugin_gene_change); -geneChangeCallbacks.push(add_dga_button_listeners); +add_dga_button_listeners();