From 781c57bf5b306ebe0a9e9144d31a4eeeea730820 Mon Sep 17 00:00:00 2001 From: Joshua Orvis Date: Mon, 8 Jan 2024 11:53:54 -0600 Subject: [PATCH 1/6] Removing individual genes from selected lists is now supported --- www/js/index.js | 31 ++++--------------------------- 1 file changed, 4 insertions(+), 27 deletions(-) diff --git a/www/js/index.js b/www/js/index.js index 418e1113..f1b24dee 100644 --- a/www/js/index.js +++ b/www/js/index.js @@ -1,6 +1,6 @@ let gene_cart_data = null; -// For carts, key is share_id, value is array of genes individually selected +// For carts, key is share_id, value is array of genes symbol strings let selected_carts = {}; let selected_genes = []; @@ -47,21 +47,13 @@ document.addEventListener('DOMContentLoaded', () => { const row_div = event.target.closest('div'); const gene_symbol = row_div.querySelector('.gene-item-label').textContent; - console.log("Gene symbol is: " + gene_symbol); - console.log("Selected genes is:"); - console.log(selected_genes); if (selected_genes.includes(gene_symbol)) { - console.log("Removing gene from list"); selected_genes = selected_genes.filter((gene) => gene !== gene_symbol); } else { - console.log("Adding gene to list"); selected_genes.push(gene_symbol); } - console.log("Selected genes is now:"); - console.log(selected_genes); - row_div.classList.toggle('is-selected'); row_div.querySelector('i.toggler').classList.toggle('mdi-plus'); row_div.querySelector('i.toggler').classList.toggle('mdi-minus'); @@ -134,8 +126,10 @@ const setActiveGeneCart = (cart_row, mode) => { // if adding or removing, update the inventory if (mode === 'add') { selected_carts[cart_row.dataset.shareId] = genes; + selected_genes = [...new Set([...selected_genes, ...genes])]; } else if (mode === 'remove') { delete selected_carts[cart_row.dataset.shareId]; + selected_genes = selected_genes.filter((gene) => !genes.includes(gene)); } // now handle the coloring, icons and selection box based on the mode @@ -152,28 +146,11 @@ const setActiveGeneCart = (cart_row, mode) => { } else if (mode === 'view') { // do nothing } - - // process the gene list panel now - const gene_list = document.querySelector('#dropdown-content-genes'); - - // build a list of selected genes. this is detailed since multiple selected carts can have the same gene - let currently_selected_genes = []; - - for (const cart of Object.values(selected_carts)) { - for (const gene of cart) { - if (!currently_selected_genes.includes(gene)) { - currently_selected_genes.push(gene); - } - } - } - - // merge the currently selected genes with the genes in the gene list to create unique list - currently_selected_genes = [...new Set([...currently_selected_genes, ...selected_genes])]; for (const gene_div of document.querySelectorAll('.dropdown-gene-item')) { let gene_symbol = gene_div.querySelector('.gene-item-label').textContent; - if (currently_selected_genes.includes(gene_symbol)) { + if (selected_genes.includes(gene_symbol)) { gene_div.classList.add('is-selected'); gene_div.querySelector('i.toggler').classList.remove('mdi-plus'); gene_div.querySelector('i.toggler').classList.add('mdi-minus'); From 3a19ccd62ad82c7002f6bf38e27061442adcb5db Mon Sep 17 00:00:00 2001 From: Joshua Orvis Date: Mon, 8 Jan 2024 13:10:01 -0600 Subject: [PATCH 2/6] Gene list widget: entire lists now removable --- www/js/index.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/www/js/index.js b/www/js/index.js index f1b24dee..7e68b375 100644 --- a/www/js/index.js +++ b/www/js/index.js @@ -37,6 +37,9 @@ document.addEventListener('DOMContentLoaded', () => { } else if (event.target.classList.contains('dropdown-gene-list-item-add')) { const row_div = event.target.closest('div'); setActiveGeneCart(row_div, 'add'); + } else if (event.target.classList.contains('dropdown-gene-list-item-remove')) { + const row_div = event.target.closest('div'); + setActiveGeneCart(row_div, 'remove'); } }); @@ -135,12 +138,16 @@ const setActiveGeneCart = (cart_row, mode) => { // now handle the coloring, icons and selection box based on the mode if (mode === 'add') { cart_row.querySelector('i.toggler').classList.remove('mdi-plus'); - cart_row.querySelector('i.toggler').classList.add('mdi-minus'); + cart_row.querySelector('i.toggler').classList.add('mdi-minus') + cart_row.querySelector('i.toggler').classList.remove('dropdown-gene-list-item-add'); + cart_row.querySelector('i.toggler').classList.add('dropdown-gene-list-item-remove'); cart_row.classList.add('is-selected'); } else if (mode === 'remove') { cart_row.querySelector('i.toggler').classList.remove('mdi-minus'); cart_row.querySelector('i.toggler').classList.add('mdi-plus'); + cart_row.querySelector('i.toggler').classList.add('dropdown-gene-list-item-add'); + cart_row.querySelector('i.toggler').classList.remove('dropdown-gene-list-item-remove'); cart_row.classList.remove('is-selected'); } else if (mode === 'view') { From 708c3eac94189308bac4d8d287e954dad80d6793 Mon Sep 17 00:00:00 2001 From: Joshua Orvis Date: Mon, 8 Jan 2024 16:39:54 -0600 Subject: [PATCH 3/6] Selected gene lists now are summarized in panel at bottom of control --- www/js/index.js | 25 +++++++++++++++++++++++-- 1 file changed, 23 insertions(+), 2 deletions(-) diff --git a/www/js/index.js b/www/js/index.js index 7e68b375..2663a535 100644 --- a/www/js/index.js +++ b/www/js/index.js @@ -1,4 +1,5 @@ let gene_cart_data = null; +let gene_cart_label_index = {}; // For carts, key is share_id, value is array of genes symbol strings let selected_carts = {}; @@ -67,10 +68,16 @@ document.addEventListener('DOMContentLoaded', () => { const fetchGeneCartData = async () => { try { gene_cart_data = await apiCallsMixin.fetchGeneCarts('unweighted-list'); - console.log(gene_cart_data); - document.querySelector('#dropdown-gene-lists').classList.remove('is-loading'); document.querySelector('#dropdown-gene-lists').classList.remove('is-disabled'); + + // Build the gene cart label index for ease of use + for (const cart_type in gene_cart_data) { + for (const cart of gene_cart_data[cart_type]) { + gene_cart_label_index[cart.share_id] = cart.label; + } + } + } catch (error) { console.error(error); } @@ -167,6 +174,9 @@ const setActiveGeneCart = (cart_row, mode) => { gene_div.querySelector('i.toggler').classList.add('mdi-plus'); } } + + // update the panel of selected items + updateGeneListSelectionPanel(); } const setActiveGeneCartCategory = (category) => { @@ -212,6 +222,17 @@ const setActiveGeneCartCategory = (category) => { } } +const updateGeneListSelectionPanel = () => { + selection_box = document.querySelector('#gene-select-dropdown-dynamic-selections'); + + // first empty it out, then populate it + selection_box.innerHTML = ''; + + for (const cart_share_id in selected_carts) { + selection_box.innerHTML += `${gene_cart_label_index[cart_share_id]}`; + } +} + const handlePageSpecificLoginUIUpdates = async (event) => { if (CURRENT_USER.session_id) { populateUserHistoryTable(); From f067f038d043da420889af1f7e80e5719bd74e4d Mon Sep 17 00:00:00 2001 From: Joshua Orvis Date: Mon, 8 Jan 2024 20:48:54 -0600 Subject: [PATCH 4/6] Gene list panel: Added functional reset button --- www/index.html | 5 +++-- www/js/index.js | 20 ++++++++++++++++++++ 2 files changed, 23 insertions(+), 2 deletions(-) diff --git a/www/index.html b/www/index.html index 5120b20e..90d0c381 100644 --- a/www/index.html +++ b/www/index.html @@ -242,7 +242,8 @@

Genes

- +
+
@@ -273,7 +274,7 @@

Genes

diff --git a/www/js/index.js b/www/js/index.js index 2663a535..08995db0 100644 --- a/www/js/index.js +++ b/www/js/index.js @@ -63,6 +63,26 @@ document.addEventListener('DOMContentLoaded', () => { row_div.querySelector('i.toggler').classList.toggle('mdi-minus'); } }); + + // Add a click listener to the dropdown-gene-list-cancel button + document.querySelector('#dropdown-gene-list-cancel').addEventListener('click', (event) => { + // clear gene lists and gene list areas + document.querySelector('#dropdown-content-gene-lists').innerHTML = ''; + document.querySelector('#dropdown-content-genes').innerHTML = ''; + + // reset the label container + document.querySelector('#gene-select-dropdown-dynamic-selections').innerHTML = ''; + + const categorySelectors = document.querySelectorAll('#dropdown-content-gene-list-category .ul-li'); + categorySelectors.forEach((element) => { + element.classList.remove('is-selected'); + element.classList.add('is-clickable'); + }); + + // and finally the related gene lists and genes + selected_carts = {}; + selected_genes = []; + }); }); const fetchGeneCartData = async () => { From 54ae2ed0c149b72057898418c1626e891d200c8c Mon Sep 17 00:00:00 2001 From: Joshua Orvis Date: Mon, 8 Jan 2024 21:24:16 -0600 Subject: [PATCH 5/6] Minor: removed unused auto-generated ID from dropdown menu --- www/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/www/index.html b/www/index.html index 90d0c381..4ea6b63d 100644 --- a/www/index.html +++ b/www/index.html @@ -171,12 +171,12 @@

-