From 16775b8c958ab43ee176cb27656f5e3f71db0d8c Mon Sep 17 00:00:00 2001
From: Thomas Karagianes <tkaragianes@stanford.edu>
Date: Fri, 17 Nov 2023 11:50:01 -0800
Subject: [PATCH 1/2] Segment Lab Explore gallery by experimental phase

---
 src/locales/en.json                        |  1 +
 src/views/labs/LabsExplore/LabsExplore.vue | 51 ++++++++++++++++++++--
 2 files changed, 49 insertions(+), 3 deletions(-)

diff --git a/src/locales/en.json b/src/locales/en.json
index f8ae9ceb..6674140d 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -359,6 +359,7 @@
   "lab-card:status-3": "Synthesizing RNA",
   "lab-card:status-4": "Getting Data",
   "lab-card:status-5": "Results Posted",
+  "lab-card:status-6": "Archived",
   "page:comments-title": "Discussion",
   "page:comments-action": "Comment",
   "page:comments-enter": "Enter your comments here.",
diff --git a/src/views/labs/LabsExplore/LabsExplore.vue b/src/views/labs/LabsExplore/LabsExplore.vue
index 472e712f..7fc0c743 100644
--- a/src/views/labs/LabsExplore/LabsExplore.vue
+++ b/src/views/labs/LabsExplore/LabsExplore.vue
@@ -1,9 +1,14 @@
 <template>
   <EternaPage :title="$t('nav-bar:labs')">
     <Paginator :loading="fetchState.pending" :total="total" :defaultIncrement="increment" @load="$fetch">
-      <Gallery setCur>
-        <LabCard v-for="lab in labs" :key="lab.nid" :lab="lab" />
-      </Gallery>
+      <section class="phase-section" v-for="phase in Object.keys(segmentedLabs)" :key="phase">
+        <h3 class="phase-title" v-b-toggle="`collapse-${phase}`">{{ getPhaseTitle(phase) }}</h3>
+        <b-collapse :id="`collapse-${phase}`" :visible="phase == '1'" class="mt-2">
+          <Gallery setCur>
+            <LabCard v-for="lab in segmentedLabs[phase]" :key="lab.nid" :lab="lab" />
+          </Gallery>
+        </b-collapse>
+      </section>
     </Paginator>
     <template #sidebar="{ isInSidebar }">
       <SearchPanel v-if="isInSidebar" :placeholder="$t('search:labs')" :isInSidebar="isInSidebar" />
@@ -92,5 +97,45 @@
       }
       this.total = +res.num_labs;
     }
+
+    get segmentedLabs(): Record<string, LabCardData[] | []> {
+      const segmentedLabs: Record<string, LabCardData[] | []> = {
+        "1": [],
+        "2": [],
+        "3": [],
+        "4": [],
+        "5": [],
+        "6": [],
+      };
+        
+      this.labs.map((lab) => {
+        // If the lab is older than 2 years old, add to archived labs
+        if (new Date(lab.created).getTime() < (new Date().getTime() - (2 * 365 * 24 * 60 * 60 * 1000))) {
+          segmentedLabs["6"] = [...segmentedLabs["6"], lab];
+        } else if (lab.exp_phase) {
+          // If the lab is less than 2 years old, add to the appropriate phase
+          segmentedLabs[lab.exp_phase] = [...segmentedLabs[lab.exp_phase], lab];
+        } else {
+          // If the lab doesn't have an experimental phase, add to archived labs
+          segmentedLabs["6"] = [...segmentedLabs["6"], lab];
+        }
+        return 0;
+      });
+
+      return segmentedLabs;
+    }
+
+    getPhaseTitle(phase: string) {
+      return this.$t(`lab-card:status-${phase}`);
+    }
   }
 </script>
+
+<style>
+  .phase-section {
+    margin-top: 1rem;
+  }
+  .phase-title {
+    font-size: 1.5rem;
+  }
+</style>

From 9c5e29551c8d0a4758673de8424f94358d0aa150 Mon Sep 17 00:00:00 2001
From: Thomas Karagianes <tkaragianes@stanford.edu>
Date: Fri, 17 Nov 2023 13:52:27 -0800
Subject: [PATCH 2/2] Add collapse chevron icon indicators

---
 src/views/labs/LabsExplore/LabsExplore.vue | 30 +++++++++++++++++++---
 1 file changed, 27 insertions(+), 3 deletions(-)

diff --git a/src/views/labs/LabsExplore/LabsExplore.vue b/src/views/labs/LabsExplore/LabsExplore.vue
index 7fc0c743..3aa11dcb 100644
--- a/src/views/labs/LabsExplore/LabsExplore.vue
+++ b/src/views/labs/LabsExplore/LabsExplore.vue
@@ -2,7 +2,10 @@
   <EternaPage :title="$t('nav-bar:labs')">
     <Paginator :loading="fetchState.pending" :total="total" :defaultIncrement="increment" @load="$fetch">
       <section class="phase-section" v-for="phase in Object.keys(segmentedLabs)" :key="phase">
-        <h3 class="phase-title" v-b-toggle="`collapse-${phase}`">{{ getPhaseTitle(phase) }}</h3>
+        <div class="phase-title" v-b-toggle="`collapse-${phase}`">
+          <h3>{{ getPhaseTitle(phase) }}</h3>
+          <BIconChevronRight></BIconChevronRight>
+        </div>
         <b-collapse :id="`collapse-${phase}`" :visible="phase == '1'" class="mt-2">
           <Gallery setCur>
             <LabCard v-for="lab in segmentedLabs[phase]" :key="lab.nid" :lab="lab" />
@@ -37,6 +40,7 @@
   import FetchMixin from '@/mixins/FetchMixin';
   import PaginationPanel from '@/components/Sidebar/PaginationPanel.vue';
   import Paginator, { PaginatorEvent } from '@/components/PageLayout/Paginator.vue';
+  import { BIconChevronRight } from 'bootstrap-vue';
   import LabsExploreData, { LabCardData } from './types';
   import LabCard from './components/LabCard.vue';
 
@@ -50,6 +54,7 @@
       Preloader,
       PaginationPanel,
       Paginator,
+      BIconChevronRight
     },
   })
   export default class LabsExplore extends Mixins(FetchMixin) {
@@ -131,11 +136,30 @@
   }
 </script>
 
-<style>
+<style lang="scss">
   .phase-section {
     margin-top: 1rem;
+
   }
   .phase-title {
-    font-size: 1.5rem;
+    background-color: #043468;
+    border-radius: 4px;
+    padding: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    h3 {
+      font-size: 1.5rem;
+    }
+    .bi-chevron-right {
+      transition: transform 300ms ease-in-out;
+    }
+  }
+
+  .phase-title.not-collapsed {
+    .bi-chevron-right {
+      transform: rotate(90deg);
+    }
   }
 </style>