Dataset collection widget now 80% mostly working.

www/include/dataset-collection-selector/dataset-collection-selector.html

@@ -3,10 +3,13 @@
 
     - dataset_collection_data: The output of the apiCallsMixin.fetchDatasetCollections() call, which needs to 
       happen in the login UI handler of the page.
+    - dataset_collection_label_index: A map of dataset collection share ids to their labels.
+    - selected_dc_share_id: The selected dataset collection share id the user selected.
 
     Requirements for importing this component:
 
-    - 
+    - There are no other elements on the page with ID: 'dropdown-dc'
+    - apiCallsMixin.fetchDatasetCollections() must be called in the login UI handler of the page.
 
 -->
 

www/include/dataset-collection-selector/dataset-collection-selector.js

@@ -1,11 +1,9 @@
-
 let dataset_collection_data = null;
+let dataset_collection_label_index = {};
 
+let selected_dc_share_id = null;
 
 document.addEventListener('DOMContentLoaded', () => {
-
-    //fetchDatasetCollections();
-
     // Add event listeners to the gene list category selectors
     const categorySelectors = document.querySelectorAll('#dropdown-content-dc-category .ul-li');
     categorySelectors.forEach((element) => {
@@ -23,71 +21,34 @@ document.addEventListener('DOMContentLoaded', () => {
         });
     });
 
-    // Add event listeners to the gene list selectors even if they don't exist yet
+    // Add event listeners to the DC 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')) {
+        if (event.target.classList.contains('dropdown-dc-item') ||
+            event.target.classList.contains('dc-item-label') || 
+            event.target.classList.contains('dc-item-tag')) {
 
-            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');
-        }
-    });
+            // uncheck all the existing rows
+            const rows = document.querySelectorAll('.dropdown-dc-item');
+            rows.forEach((row) => {
+                row.classList.remove('is-selected');
+            });
 
-    // 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);
-            }
+            const dc_share_id = row_div.dataset.shareId;
 
             row_div.classList.toggle('is-selected');
-            row_div.querySelector('i.toggler').classList.toggle('mdi-plus');
-            row_div.querySelector('i.toggler').classList.toggle('mdi-minus');
+
+            document.querySelector('#dropdown-dc-selector-label').innerHTML = dataset_collection_label_index[dc_share_id];
+            document.querySelector('#dropdown-dc').classList.remove('is-active');
         }
     });
 
     // 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-dc-cancel').addEventListener('click', (event) => {
+        document.querySelector('#dropdown-dc').classList.remove('is-active');
     });
 
-    // Minor key strokes after user types more than 2 characters in the dropdown-gene-list-search-input box
+    // Monitor 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;
 
@@ -129,14 +90,22 @@ document.addEventListener('DOMContentLoaded', () => {
 });
 
 const fetchDatasetCollections = async () => {
-    console.log("Fetching dataset collections");
-    console.log(CURRENT_USER);
-
     try {
         dataset_collection_data = await apiCallsMixin.fetchDatasetCollections();
-        console.log(dataset_collection_data);
         document.querySelector('#dropdown-dc').classList.remove('is-loading');
         document.querySelector('#dropdown-dc').classList.remove('is-disabled');
+
+        // build a label index for the dataset collections
+        for (const category in dataset_collection_data) {
+            // This data structure has mixed types - we only care about the arrayed categories
+            if (!Array.isArray(dataset_collection_data[category])) {continue}
+
+            for (const entry of dataset_collection_data[category]) {
+                dataset_collection_label_index[entry.share_id] = entry.label;
+            }
+        }
+
+
     } catch (error) {
         console.error(error);
     }
@@ -187,7 +156,7 @@ const setActiveDCCategory = (category) => {
         if (entry.folder_label) {
             tag_element.textContent = entry.folder_label;
         } else {
-            // delete this element
+            // we don't need the tag at all if there's no content for it
             tag_element.remove();
         }
 

www/js/index.js

@@ -144,8 +144,6 @@ document.addEventListener('DOMContentLoaded', () => {
 });
 
 const fetchGeneCartData = async () => {
-    console.log("Fetching gene cart data");
-    console.log(CURRENT_USER);
     try {
         gene_cart_data = await apiCallsMixin.fetchGeneCarts('unweighted-list');
         document.querySelector('#dropdown-gene-lists').classList.remove('is-loading');