First version of dataset-collection-selector widget. Has display func…

…tionality of most categories
IGS · Jan 11, 2024 · 0419077 · 0419077
1 parent d92948f
commit 0419077
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 34 deletions.
diff --git a/www/include/dataset-collection-selector/dataset-collection-selector.html b/www/include/dataset-collection-selector/dataset-collection-selector.html
@@ -1,7 +1,8 @@
 <!--
     This creates the following top-level variables:
 
-    - dataset_collection_data: The output of the apiCallsMixin.fetchDatasetCollections() call
+    - dataset_collection_data: The output of the apiCallsMixin.fetchDatasetCollections() call, which needs to 
+      happen in the login UI handler of the page.
 
     Requirements for importing this component:
 
@@ -39,24 +40,24 @@
             <div class="column is-one-half is-scrollable">
               <h3>Category</h3>
               <div id="dropdown-content-dc-category" class="ul-replacement">
-                <div class="ul-li is-clickable" data-category="favorites">
+                <div class="ul-li is-clickable" data-category="domain">
                   Site-curated
                   <span class="icon is-pulled-right"><i class="mdi mdi-18px mdi-chevron-right"></i></span>
                 </div>
-                <div class="ul-li is-clickable" data-category="recent">
+                <div class="ul-li is-clickable" data-category="user">
                   Yours
                   <span class="icon is-pulled-right"><i class="mdi mdi-18px mdi-chevron-right"></i></span>
                 </div>
-                <div class="ul-li is-clickable" data-category="saved">
+                <div class="ul-li is-clickable" data-category="recent">
                   Recently viewed
                   <span class="icon is-pulled-right"><i class="mdi mdi-18px mdi-chevron-right"></i></span>
                 </div>
-                <div class="ul-li is-clickable" data-category="saved">
-                  Group shared
+                <div class="ul-li is-clickable" data-category="group">
+                  From your groups
                   <span class="icon is-pulled-right"><i class="mdi mdi-18px mdi-chevron-right"></i></span>
                 </div>
                 <div class="ul-li is-clickable" data-category="shared">
-                  Other shared
+                  Others shared with you
                   <span class="icon is-pulled-right"><i class="mdi mdi-18px mdi-chevron-right"></i></span>
                 </div>
               </div>
@@ -66,15 +67,24 @@ <h3>Dataset Collection</h3>
               <div id="dropdown-content-dc" class="ul-replacement"></div>
             </div>
             <template id="tmpl-dc">
-              <div class="ul-li dropdown-dc-item">
-                <span class="icon is-pulled-left">
-                  <i class="mdi mdi-18px toggler mdi-plus is-clickable mr-2 dc-item-add"></i>
-                </span>
-                <span class="gene-item-label"></span>
+              <div class="ul-li dropdown-dc-item is-clickable pl-3">
+                <span class="dc-item-tag tag is-info is-light"></span>
+                <span class="dc-item-label"></span>
               </div>
             </template>
           </div>
         </div>
+        <div class="dropdown-item">
+          <hr class="dropdown-divider mb-0 pb-0">
+        </div>
+        <div class="dropdown-item">
+          <div class="columns">
+            <div class="column is-10">&nbsp;</div>
+            <div class="column is-2">
+              <button id="dropdown-dc-cancel" class="button is-secondary is-rounded is-small">Cancel</button>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </div>
diff --git a/www/include/dataset-collection-selector/dataset-collection-selector.js b/www/include/dataset-collection-selector/dataset-collection-selector.js
@@ -3,14 +3,15 @@ let dataset_collection_data = null;
 
 
 document.addEventListener('DOMContentLoaded', () => {
-    fetchDatasetCollections();
+
+    //fetchDatasetCollections();
 
     // Add event listeners to the gene list category selectors
-    const categorySelectors = document.querySelectorAll('#dropdown-content-gene-list-category .ul-li');
+    const categorySelectors = document.querySelectorAll('#dropdown-content-dc-category .ul-li');
     categorySelectors.forEach((element) => {
         element.addEventListener('click', (event) => {
             const category = event.target.dataset.category;
-            setActiveGeneCartCategory(category);
+            setActiveDCCategory(category);
 
             categorySelectors.forEach((element) => {
                 element.classList.remove('is-selected');
@@ -86,21 +87,6 @@ document.addEventListener('DOMContentLoaded', () => {
         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;
@@ -143,12 +129,68 @@ document.addEventListener('DOMContentLoaded', () => {
 });
 
 const fetchDatasetCollections = async () => {
+    console.log("Fetching dataset collections");
+    console.log(CURRENT_USER);
+
     try {
-        const data = await apiCallsMixin.fetchDatasetCollections();
-        dataset_collection_data = data;
+        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');
     } catch (error) {
         console.error(error);
     }
+}
+
+const setActiveDCCategory = (category) => {
+    // clear the gene list
+    document.querySelector('#dropdown-content-dc').innerHTML = '';
+    document.querySelector('#dropdown-dc-search-input').value = '';
+
+    const dc_item_template = document.querySelector('#tmpl-dc');
+    let data = null;
+
+    document.querySelector('#dropdown-content-dc').innerHTML = '';
+
+    switch (category) {
+        case 'domain':
+            data = dataset_collection_data.domain_layouts;
+            break;
+        case 'user':
+            data = dataset_collection_data.user_layouts;
+            break;
+        case 'recent':
+            //data = dataset_collection_data.recent_layouts;
+            break;
+        case 'group':
+            data = dataset_collection_data.group_layouts;
+            break;
+        case 'shared':
+            data = dataset_collection_data.shared_layouts;
+            break;
+    }
+
+    // sort the data by label before iterating
+    data.sort((a, b) => {
+        if (a.label < b.label) {return -1}
+        if (a.label > b.label) {return 1}
+        return 0;
+    });
+
+    for (const entry of data) {
+        const row = dc_item_template.content.cloneNode(true);
+        row.querySelector('.dc-item-label').textContent = entry.label;
+        row.querySelector('.ul-li').dataset.shareId = entry.share_id;
+
+        let tag_element = row.querySelector('.ul-li .dc-item-tag');
+
+        if (entry.folder_label) {
+            tag_element.textContent = entry.folder_label;
+        } else {
+            // delete this element
+            tag_element.remove();
+        }
+
+        document.querySelector('#dropdown-content-dc').appendChild(row);
+    }
 }
diff --git a/www/index.html b/www/index.html
@@ -236,6 +236,9 @@ <h3>Genes</h3>
                                     </template>
                                   </div>
                                 </div>
+                                <div class="dropdown-item">
+                                <hr class="dropdown-divider mb-0 pb-0">
+                                </div>
                                 <div class="dropdown-item">
                                   <div class="columns">
                                     <div class="column is-10">

diff --git a/www/js/index.js b/www/js/index.js
@@ -6,8 +6,6 @@ let selected_carts = {};
 let selected_genes = [];
 
 document.addEventListener('DOMContentLoaded', () => {
-    fetchGeneCartData();
-
     // Add event listeners to the gene list category selectors
     const categorySelectors = document.querySelectorAll('#dropdown-content-gene-list-category .ul-li');
     categorySelectors.forEach((element) => {
@@ -147,6 +145,7 @@ 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');
@@ -319,4 +318,7 @@ const handlePageSpecificLoginUIUpdates = async (event) => {
     if (CURRENT_USER.session_id) {
         populateUserHistoryTable();
     }
+
+    fetchGeneCartData();
+    fetchDatasetCollections();
 }