Now loads Favorites and Saved Gene Lists

IGS · Jan 2, 2024 · 00afccc · 00afccc
1 parent 67bc193
commit 00afccc
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 28 deletions.
diff --git a/www/css/index.css b/www/css/index.css
@@ -7,7 +7,7 @@ div.dropdown-item h3 {
     font-size: 120%;
 }
 div.dropdown-item div.column.is-scrollable {
-    max-height: 50vh;
+    max-height: 40vh;
     overflow-y: scroll;
 }
 div.ul-li {

diff --git a/www/index.html b/www/index.html
@@ -162,8 +162,8 @@ <h3 class="mt-6 mb-3">
                             </div>
                           </div>
 
-                          <div id="dropdown-gene-lists" class="control dropdown is-clickable is-right is-loading is-disabled mr-0">
-                            <div class="dropdown-trigger">
+                          <div id="dropdown-gene-lists" class="control dropdown is-right is-loading is-disabled mr-0">
+                            <div class="dropdown-trigger is-clickable">
                               <button class="button" aria-haspopup="true" aria-controls="dropdown-menu6">
                                 <span>Quick search using Gene Lists</span>
                                 <span class="icon is-small">
@@ -188,20 +188,20 @@ <h3 class="mt-6 mb-3">
                                   <div class="columns is-mobile">
                                     <div class="column is-one-third is-scrollable">
                                       <h3>Saved Items</h3>
-                                      <div class="ul-replacement">
-                                        <div class="ul-li">
+                                      <div id="dropdown-content-gene-list-category" class="ul-replacement">
+                                        <div class="ul-li is-clickable" data-category="favorites">
                                           Favorites
                                           <span class="icon is-pulled-right"><i class="mdi mdi-18px mdi-chevron-right"></i></span>
                                         </div>
-                                        <div class="ul-li is-selected">
+                                        <div class="ul-li is-clickable" data-category="recent">
                                           Recent
                                           <span class="icon is-pulled-right"><i class="mdi mdi-18px mdi-chevron-right"></i></span>
                                         </div> 
-                                        <div class="ul-li">
+                                        <div class="ul-li is-clickable" data-category="saved">
                                           Saved gene lists
                                           <span class="icon is-pulled-right"><i class="mdi mdi-18px mdi-chevron-right"></i></span>
                                         </div> 
-                                        <div class="ul-li">
+                                        <div class="ul-li is-clickable" data-category="shared">
                                           Shared gene lists
                                           <span class="icon is-pulled-right"><i class="mdi mdi-18px mdi-chevron-right"></i></span>
                                         </div> 

diff --git a/www/js/index.js b/www/js/index.js
@@ -1,30 +1,36 @@
+let gene_cart_data = null;
+
 document.addEventListener('DOMContentLoaded', () => {
-    populateGeneCartDropdown();
-});
+    fetchGeneCartData();
 
-const populateGeneCartDropdown = async () => {
-    let numEntries = 10;
+    // select all #dropdown-content-gene-list-category ul-li elements
+    const categorySelectors = document.querySelectorAll('#dropdown-content-gene-list-category .ul-li');
+
+    categorySelectors.forEach((element) => {
+        console.log("Adding event listener to: " + 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');
+        });
+    });
+});
+
+const fetchGeneCartData = async () => {
     try {
-        const data = await apiCallsMixin.fetchGeneCarts();
-        console.log(data);
-        const template = document.querySelector('#tmpl-gene-list-item');
-
-        for (const entry of data.domain_carts) {
-            const row = template.content.cloneNode(true);
-            row.querySelector('.gene-list-item-label').textContent = entry.label;
-            //document.querySelector('#dropdown-content-gene-lists').appendChild(row);
-            // reduce number of entries by 1
-            if (numEntries > 0) {
-                document.querySelector('#dropdown-content-gene-lists').appendChild(row);
-                numEntries--;
-            }
-        }
+        gene_cart_data = await apiCallsMixin.fetchGeneCarts();
+        console.log(gene_cart_data);
 
-        // remove the 'is-loading' class from the dropdown
         document.querySelector('#dropdown-gene-lists').classList.remove('is-loading');
         document.querySelector('#dropdown-gene-lists').classList.remove('is-disabled');
-
     } catch (error) {
         console.error(error);
     }
@@ -66,6 +72,33 @@ const populateUserHistoryTable = async () => {
     }
 }
 
+const setActiveGeneCartCategory = (category) => {
+    const template = document.querySelector('#tmpl-gene-list-item');
+    let data = null;
+
+    document.querySelector('#dropdown-content-gene-lists').innerHTML = '';
+
+    switch (category) {
+        case 'favorites':
+            data = gene_cart_data.domain_carts;
+            break;
+        case 'recent':
+            break;
+        case 'saved':
+            data = gene_cart_data.user_carts;
+            break;
+        case 'shared':
+            data = gene_cart_data.shared_carts;
+            break;
+    }
+
+    for (const entry of data) {
+        const row = template.content.cloneNode(true);
+        row.querySelector('.gene-list-item-label').textContent = entry.label;
+        document.querySelector('#dropdown-content-gene-lists').appendChild(row);
+    }
+}
+
 const handlePageSpecificLoginUIUpdates = async (event) => {
     if (CURRENT_USER.session_id) {
         populateUserHistoryTable();