From 4a748e8e2e19330331efa9342d6dd9643f27d1ac Mon Sep 17 00:00:00 2001 From: Joshua Orvis Date: Wed, 10 Jan 2024 15:07:04 -0600 Subject: [PATCH 1/2] Added partially-working framework for data collection selection component --- www/css/index.css | 2 - .../dataset-collection-selector.css | 34 ++++ .../dataset-collection-selector.html | 80 +++++++++ .../dataset-collection-selector.js | 154 ++++++++++++++++++ www/index.html | 11 +- www/js/index.js | 24 --- 6 files changed, 272 insertions(+), 33 deletions(-) create mode 100644 www/include/dataset-collection-selector/dataset-collection-selector.css create mode 100644 www/include/dataset-collection-selector/dataset-collection-selector.html create mode 100644 www/include/dataset-collection-selector/dataset-collection-selector.js diff --git a/www/css/index.css b/www/css/index.css index fdd6fee3..97bd8e2b 100644 --- a/www/css/index.css +++ b/www/css/index.css @@ -6,13 +6,11 @@ div.dropdown-menu { width: 55vw; } } - @media (min-width: 1440px) { div.dropdown-menu { width: 50vw; } } - @media (min-width: 1580px) { div.dropdown-menu { width: 45vw; diff --git a/www/include/dataset-collection-selector/dataset-collection-selector.css b/www/include/dataset-collection-selector/dataset-collection-selector.css new file mode 100644 index 00000000..37e76ab5 --- /dev/null +++ b/www/include/dataset-collection-selector/dataset-collection-selector.css @@ -0,0 +1,34 @@ +div.dropdown-menu { + width: 60vw; +} +@media (min-width: 1320px) { + div.dropdown-menu { + width: 55vw; + } +} +@media (min-width: 1440px) { + div.dropdown-menu { + width: 50vw; + } +} +@media (min-width: 1580px) { + div.dropdown-menu { + width: 45vw; + } +} +div.dropdown-item h3 { + font-weight: bold; + font-size: 120%; +} +div.dropdown-item div.column.is-scrollable { + max-height: 40vh; + overflow-y: scroll; +} +div.ul-li { + border-radius: 0.5em; + padding: 0.4em; + margin-bottom: 0.2em; +} +div.ul-li.is-selected { + background-color: #cbcfd6; +} \ No newline at end of file diff --git a/www/include/dataset-collection-selector/dataset-collection-selector.html b/www/include/dataset-collection-selector/dataset-collection-selector.html new file mode 100644 index 00000000..e54ad5c1 --- /dev/null +++ b/www/include/dataset-collection-selector/dataset-collection-selector.html @@ -0,0 +1,80 @@ + + + + + + \ No newline at end of file diff --git a/www/include/dataset-collection-selector/dataset-collection-selector.js b/www/include/dataset-collection-selector/dataset-collection-selector.js new file mode 100644 index 00000000..e6f5339d --- /dev/null +++ b/www/include/dataset-collection-selector/dataset-collection-selector.js @@ -0,0 +1,154 @@ + +let dataset_collection_data = null; + + +document.addEventListener('DOMContentLoaded', () => { + fetchDatasetCollections(); + + // Add event listeners to the gene list category selectors + const categorySelectors = document.querySelectorAll('#dropdown-content-gene-list-category .ul-li'); + categorySelectors.forEach((element) => { + element.addEventListener('click', (event) => { + const category = event.target.dataset.category; + setActiveGeneCartCategory(category); + + categorySelectors.forEach((element) => { + element.classList.remove('is-selected'); + element.classList.add('is-clickable'); + }); + + event.target.classList.add('is-selected'); + event.target.classList.remove('is-clickable'); + }); + }); + + // Add event listeners to the gene list selectors even if they don't exist yet + document.addEventListener('click', (event) => { + // gene-list-item-label & dropdown-gene-list-item-right-selector both should only show the genes + // dropdown-gene-list-item-add should add the entire cartsmpl + + if (event.target.classList.contains('gene-list-item-label') || + event.target.classList.contains('dropdown-gene-list-item-right-selector')) { + + const row_div = event.target.closest('div'); + setActiveGeneCart(row_div, 'view'); + } 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'); + } + }); + + // Add event listeners to the gene selectors even if they don't exist yet + document.addEventListener('click', (event) => { + if (event.target.classList.contains('gene-list-item-add') || + event.target.classList.contains('gene-list-item-remove')) { + + const row_div = event.target.closest('div'); + const gene_symbol = row_div.querySelector('.gene-item-label').textContent; + + if (selected_genes.includes(gene_symbol)) { + selected_genes = selected_genes.filter((gene) => gene !== gene_symbol); + } else { + selected_genes.push(gene_symbol); + } + + row_div.classList.toggle('is-selected'); + row_div.querySelector('i.toggler').classList.toggle('mdi-plus'); + 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'); + }); + + // clear the genes-manually-entered input element + document.querySelector('#genes-manually-entered').value = ''; + document.querySelector('#dropdown-gene-list-search-input').value = ''; + document.querySelector('#dropdown-gene-list-selector-label').innerHTML = 'Quick search using Gene Lists'; + + // and finally the related gene lists and genes + selected_carts = {}; + selected_genes = []; + }); + + document.querySelector('#dropdown-gene-list-proceed').addEventListener('click', (event) => { + const selected_cart_count = Object.keys(selected_carts).length; + + if (selected_cart_count === 1) { + document.querySelector('#dropdown-gene-list-selector-label').innerHTML = gene_cart_label_index[selected_carts[0]]; + } else if (selected_cart_count > 1) { + document.querySelector('#dropdown-gene-list-selector-label').innerHTML = `${selected_cart_count} gene lists selected`; + } else { + // Nothing to do + } + + // close the dropdown + document.querySelector('#dropdown-gene-lists').classList.remove('is-active'); + }); + + // Minor key strokes after user types more than 2 characters in the dropdown-gene-list-search-input box + document.querySelector('#dropdown-gene-list-search-input').addEventListener('keyup', (event) => { + const search_term = event.target.value; + + if (search_term.length <= 2) {return} + + const categorySelectors = document.querySelectorAll('#dropdown-content-gene-list-category .ul-li'); + categorySelectors.forEach((element) => { + element.classList.remove('is-selected'); + element.classList.add('is-clickable'); + }); + + document.querySelector('#dropdown-content-gene-lists').innerHTML = ''; + document.querySelector('#dropdown-content-genes').innerHTML = ''; + const gene_list_item_template = document.querySelector('#tmpl-gene-list-item'); + + for (const cart_type in gene_cart_data) { + for (const cart of gene_cart_data[cart_type]) { + if (cart.label.toLowerCase().includes(search_term.toLowerCase())) { + const row = gene_list_item_template.content.cloneNode(true); + row.querySelector('.gene-list-item-label').textContent = cart.label; + row.querySelector('.ul-li').dataset.genes = cart.genes.join(','); + row.querySelector('.ul-li').dataset.shareId = cart.share_id; + + if (cart.share_id in selected_carts) { + row.querySelector('i.toggler').classList.remove('mdi-plus'); + row.querySelector('i.toggler').classList.add('mdi-minus'); + row.querySelector('.ul-li').classList.add('is-selected'); + } else { + row.querySelector('i.toggler').classList.remove('mdi-minus'); + row.querySelector('i.toggler').classList.add('mdi-plus'); + row.querySelector('.ul-li').classList.remove('is-selected'); + } + + document.querySelector('#dropdown-content-gene-lists').appendChild(row); + } + } + } + }); +}); + +const fetchDatasetCollections = async () => { + try { + const data = await apiCallsMixin.fetchDatasetCollections(); + dataset_collection_data = data; + document.querySelector('#dropdown-dc').classList.remove('is-loading'); + document.querySelector('#dropdown-dc').classList.remove('is-disabled'); + } catch (error) { + console.error(error); + } +} \ No newline at end of file diff --git a/www/index.html b/www/index.html index 5317abb8..46f0a862 100644 --- a/www/index.html +++ b/www/index.html @@ -256,14 +256,11 @@

Genes

IN
-
- -
+ + +
-