Gene list widget: search capability now functional

IGS · Jan 9, 2024 · d4b742f · d4b742f
1 parent 54ae2ed
commit d4b742f
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 1 deletion.
diff --git a/www/index.html b/www/index.html
@@ -176,7 +176,7 @@ <h3 class="mt-6 mb-3">
                                 <div class="dropdown-item">
                                   <div class="field">
                                     <p class="control has-icons-left">
-                                      <input class="input" type="input" placeholder="Search and select a Gene List">
+                                      <input class="input" type="input" id="dropdown-gene-list-search-input" placeholder="Search and select a Gene List">
                                       <span class="icon is-small is-left">
                                         <i class="mdi mdi-magnify"></i>
                                       </span>

diff --git a/www/js/index.js b/www/js/index.js
@@ -79,10 +79,54 @@ document.addEventListener('DOMContentLoaded', () => {
             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 = '';
+
         // and finally the related gene lists and genes
         selected_carts = {};
         selected_genes = [];
     });
+
+    // 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 fetchGeneCartData = async () => {
@@ -202,6 +246,7 @@ const setActiveGeneCart = (cart_row, mode) => {
 const setActiveGeneCartCategory = (category) => {
     // clear the gene list
     document.querySelector('#dropdown-content-genes').innerHTML = '';
+    document.querySelector('#dropdown-gene-list-search-input').value = '';
 
     const gene_list_item_template = document.querySelector('#tmpl-gene-list-item');
     let data = null;