From f15205c92537ea1826bc67848ecc7eb08da90395 Mon Sep 17 00:00:00 2001
From: Manuel Holtgrewe <manuel.holtgrewe@bih-charite.de>
Date: Tue, 22 Oct 2024 14:46:47 +0200
Subject: [PATCH] feat: store collapsible state in local storage (#2043)
 (#2047)

---
 .../QueryEditor/EffectsControls.vue           |  6 ++-
 .../QueryEditor/GenotypeControls.vue          |  6 +++
 .../QueryEditor/PathogenicityPrioControls.vue |  7 ++-
 .../QueryEditor/PhenotypePrioControls.vue     |  5 ++
 .../QueryEditor/PredefinedQueryList.vue       |  7 ++-
 .../components/QueryEditor/QueryEditor.vue    | 27 ++++++++++
 .../components/QueryEditor/QueryList.vue      |  7 ++-
 .../seqvars/components/QueryEditor/groups.ts  |  3 +-
 .../QueryEditor/ui/CollapsibleGroup.vue       | 53 ++++++++++++++++---
 9 files changed, 110 insertions(+), 11 deletions(-)

diff --git a/frontend/src/seqvars/components/QueryEditor/EffectsControls.vue b/frontend/src/seqvars/components/QueryEditor/EffectsControls.vue
index 5d15851da..7beee8b5b 100644
--- a/frontend/src/seqvars/components/QueryEditor/EffectsControls.vue
+++ b/frontend/src/seqvars/components/QueryEditor/EffectsControls.vue
@@ -205,7 +205,11 @@ const maxExonDistance = computed<number | null | undefined>({
       />
     </div>
 
-    <CollapsibleGroup v-model:is-open="detailsOpen" title="Customize effects">
+    <CollapsibleGroup
+      v-model="detailsOpen"
+      title="Customize effects"
+      storage-name="effects-details"
+    >
       <div style="display: flex; flex-direction: column; gap: 8px">
         <div v-for="(choices, title) in CUSTOMIZATION">
           <div class="text-body-2">{{ title }}</div>
diff --git a/frontend/src/seqvars/components/QueryEditor/GenotypeControls.vue b/frontend/src/seqvars/components/QueryEditor/GenotypeControls.vue
index 136c04997..33670e90d 100644
--- a/frontend/src/seqvars/components/QueryEditor/GenotypeControls.vue
+++ b/frontend/src/seqvars/components/QueryEditor/GenotypeControls.vue
@@ -5,6 +5,7 @@ import {
   SeqvarsQueryDetailsRequest,
   SeqvarsSampleGenotypePydantic,
 } from '@varfish-org/varfish-api/lib'
+import { ref } from 'vue'
 
 import { PedigreeObj } from '@/cases/stores/caseDetails'
 import CollapsibleGroup from '@/seqvars/components/QueryEditor/ui/CollapsibleGroup.vue'
@@ -191,11 +192,15 @@ const coerceRecessiveMarkers = <T extends SeqvarsQueryDetails>(
 
   return newData
 }
+
+/** Whether the recessive mode collapsible group is opend. */
+const collapsibleGroupOpen = ref<boolean>(true)
 </script>
 
 <template>
   <div class="w-100 d-flex flex-column ga-2">
     <CollapsibleGroup
+      v-model="collapsibleGroupOpen"
       title="Recessive Mode"
       :hints-enabled="hintsEnabled"
       hint="To find biallelic variants beyond homozygous ones in the index, you can use one of the recessive modes."
@@ -205,6 +210,7 @@ const coerceRecessiveMarkers = <T extends SeqvarsQueryDetails>(
             item.value === seqvarsQuery.settings.genotype.recessive_mode,
         )?.title ?? 'NONE'
       "
+      storage-name="genotype-recessive-mode"
     >
       <template #default>
         <Item
diff --git a/frontend/src/seqvars/components/QueryEditor/PathogenicityPrioControls.vue b/frontend/src/seqvars/components/QueryEditor/PathogenicityPrioControls.vue
index f8a2e0b1e..6edc03577 100644
--- a/frontend/src/seqvars/components/QueryEditor/PathogenicityPrioControls.vue
+++ b/frontend/src/seqvars/components/QueryEditor/PathogenicityPrioControls.vue
@@ -76,6 +76,9 @@ const applyMutation = async (
     },
   })
 }
+
+/** Whether the recessive mode collapsible group is opend. */
+const collapsibleGroupOpen = ref<boolean>(true)
 </script>
 
 <template>
@@ -97,7 +100,9 @@ const applyMutation = async (
 
   <CollapsibleGroup
     v-model:is-open="detailsOpen"
-    title="Phenotype similarity algorithm"
+    v-model="collapsibleGroupOpen"
+    title="Pathogenicity scores priorization"
+    storage-name="pathogenicity-scores"
   >
     <template #summary>
       {{ modelValue.settings.variantprio.services?.[0]?.name }}
diff --git a/frontend/src/seqvars/components/QueryEditor/PhenotypePrioControls.vue b/frontend/src/seqvars/components/QueryEditor/PhenotypePrioControls.vue
index 55f901f7d..48208f6fc 100644
--- a/frontend/src/seqvars/components/QueryEditor/PhenotypePrioControls.vue
+++ b/frontend/src/seqvars/components/QueryEditor/PhenotypePrioControls.vue
@@ -98,6 +98,9 @@ const applyMutation = async (
     },
   })
 }
+
+/** Whether the recessive mode collapsible group is opend. */
+const collapsibleGroupOpen = ref<boolean>(true)
 </script>
 
 <template>
@@ -119,7 +122,9 @@ const applyMutation = async (
 
   <CollapsibleGroup
     v-model:is-open="detailsOpen"
+    v-model="collapsibleGroupOpen"
     title="Phenotype similarity algorithm"
+    storage-name="phenotype-similarity-algorithm"
   >
     <template #summary>
       {{ selectedAlgo }}
diff --git a/frontend/src/seqvars/components/QueryEditor/PredefinedQueryList.vue b/frontend/src/seqvars/components/QueryEditor/PredefinedQueryList.vue
index 296afe81c..b661d0667 100644
--- a/frontend/src/seqvars/components/QueryEditor/PredefinedQueryList.vue
+++ b/frontend/src/seqvars/components/QueryEditor/PredefinedQueryList.vue
@@ -4,7 +4,7 @@ import {
   SeqvarsQueryDetails,
   SeqvarsQueryPresetsSetVersionDetails,
 } from '@varfish-org/varfish-api/lib'
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 
 import { PedigreeObj } from '@/cases/stores/caseDetails'
 
@@ -47,13 +47,18 @@ const emit = defineEmits<{
   /** Revert modifications. */
   revert: []
 }>()
+
+/** Whether the recessive mode collapsible group is opend. */
+const collapsibleGroupOpen = ref<boolean>(true)
 </script>
 
 <template>
   <CollapsibleGroup
+    v-model="collapsibleGroupOpen"
     title="Predefined Queries"
     :hints-enabled="hintsEnabled"
     hint="Create a new query using the buttons on the right. Selected predefined query settings for custom query."
+    storage-name="predefined-query-list"
   >
     <template #summary>
       <Item
diff --git a/frontend/src/seqvars/components/QueryEditor/QueryEditor.vue b/frontend/src/seqvars/components/QueryEditor/QueryEditor.vue
index 34a0a2350..b7bbfa04c 100644
--- a/frontend/src/seqvars/components/QueryEditor/QueryEditor.vue
+++ b/frontend/src/seqvars/components/QueryEditor/QueryEditor.vue
@@ -34,6 +34,7 @@ import QueryList from '@/seqvars/components/QueryEditor/QueryList.vue'
 import {
   FilterGroup,
   GROUPS,
+  QueryKey,
   createGenotypeFromPreset,
   createQualityFromPreset,
   matchesGenotypePreset,
@@ -533,6 +534,26 @@ watch(
   () => [seqvarQueries.value.values()],
   () => updateSelectedQueryUuid(),
 )
+
+/** Whether the recessive mode collapsible group for genotype is opend. */
+const collapsibleGroupOpenGenotype = ref<boolean>(true)
+/** Whether the recessive mode collapsible group for genotype is opend. */
+const collapsibleGroupOpenColumns = ref<boolean>(true)
+/** Whether the collapsible group for the given ID is opened. */
+const collapsibleGroupOpenGeneric = ref<Record<QueryKey, boolean>>({
+  frequency: true,
+  sodar_uuid: true,
+  date_created: true,
+  date_modified: true,
+  presetssetversion: true,
+  genotype: true,
+  quality: true,
+  consequence: true,
+  locus: true,
+  phenotypeprio: true,
+  variantprio: true,
+  clinvar: true,
+})
 </script>
 
 <template>
@@ -599,6 +620,7 @@ watch(
 
     <template v-if="!!selectedQuery">
       <CollapsibleGroup
+        v-model="collapsibleGroupOpenGenotype"
         title="Genotype"
         :hints-enabled="hintsEnabled"
         hint="For the genotype, you first select whether you want to enable filtering for any of the recessive variant modes.  For the recessive mode, you have to chose the index and parent roles in the pedigree.  If you disable the recessive mode then you can set a filter on the genotypes for each individual."
@@ -615,6 +637,7 @@ watch(
               ]
             : ''
         "
+        storage-name="query-editor-genotype"
         @revert="revertGenotypeToPresets"
       >
         <template
@@ -684,6 +707,7 @@ watch(
       <CollapsibleGroup
         v-for="group in GROUPS"
         :key="group.id"
+        v-model="collapsibleGroupOpenGeneric[group.id]"
         :title="group.title"
         :hint="group.hint"
         :hints-enabled="hintsEnabled"
@@ -700,6 +724,7 @@ watch(
               p.sodar_uuid === selectedQuery?.settings[group.queryPresetKey],
           )?.sodar_uuid !== baselinePredefinedQuery?.[group.id]
         "
+        :storage-name="`query-editor-${group.id}`"
         @revert="() => revertGroupToPresets(group)"
       >
         <template #summary>
@@ -781,6 +806,7 @@ watch(
       </CollapsibleGroup>
 
       <CollapsibleGroup
+        v-model="collapsibleGroupOpenColumns"
         title="Columns"
         hint="Configure columns to show in the query results"
         :hints-enabled="hintsEnabled"
@@ -802,6 +828,7 @@ watch(
               selectedQuery.settings.columnspresets,
             ))
         "
+        storage-name="query-editor-columns"
         @revert="
           async () => {
             if (!!baselinePredefinedQuery?.columns) {
diff --git a/frontend/src/seqvars/components/QueryEditor/QueryList.vue b/frontend/src/seqvars/components/QueryEditor/QueryList.vue
index bd34671bd..2deb3e0e8 100644
--- a/frontend/src/seqvars/components/QueryEditor/QueryList.vue
+++ b/frontend/src/seqvars/components/QueryEditor/QueryList.vue
@@ -5,7 +5,7 @@ import {
   SeqvarsQueryExecution,
   SeqvarsQueryPresetsSetVersionDetails,
 } from '@varfish-org/varfish-api/lib'
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 
 import { PedigreeObj } from '@/cases/stores/caseDetails'
 import { useSeqvarQueryExecutionListQueries } from '@/seqvars/queries/seqvarQueryExecution'
@@ -122,13 +122,18 @@ const queryExecution = (
 const queryExecutionState = (queryUuid: string) => {
   return queryExecution(queryUuid)?.state ?? 'initial'
 }
+
+/** Whether the recessive mode collapsible group is opend. */
+const collapsibleGroupOpen = ref<boolean>(false)
 </script>
 
 <template>
   <CollapsibleGroup
+    v-model="collapsibleGroupOpen"
     title="Queries / Results"
     :hints-enabled="hintsEnabled"
     hint="Here you can find the queries and their results."
+    storage-name="query-list"
   >
     <template
       v-if="!!selectedQueryUuid && queries.has(selectedQueryUuid)"
diff --git a/frontend/src/seqvars/components/QueryEditor/groups.ts b/frontend/src/seqvars/components/QueryEditor/groups.ts
index a0193c103..416f0d4f4 100644
--- a/frontend/src/seqvars/components/QueryEditor/groups.ts
+++ b/frontend/src/seqvars/components/QueryEditor/groups.ts
@@ -39,7 +39,8 @@ type LocalFields<T> = Omit<
   | 'presetssetversion'
 >
 
-type QueryKey = keyof SeqvarsQuerySettingsDetails & keyof SeqvarsPredefinedQuery
+export type QueryKey = keyof SeqvarsQuerySettingsDetails &
+  keyof SeqvarsPredefinedQuery
 
 type GetCompareFields<Id extends keyof SeqvarsQuerySettingsDetails, Preset> = (
   v: LocalFields<SeqvarsQuerySettingsDetails[Id]> & Preset,
diff --git a/frontend/src/seqvars/components/QueryEditor/ui/CollapsibleGroup.vue b/frontend/src/seqvars/components/QueryEditor/ui/CollapsibleGroup.vue
index 63f5b0586..226ec54ba 100644
--- a/frontend/src/seqvars/components/QueryEditor/ui/CollapsibleGroup.vue
+++ b/frontend/src/seqvars/components/QueryEditor/ui/CollapsibleGroup.vue
@@ -1,8 +1,13 @@
 <script setup lang="ts">
+import { useStorage } from '@vueuse/core'
+import { watch } from 'vue'
+
 import HintButton from './HintButton.vue'
 
 const props = withDefaults(
   defineProps<{
+    /** Whether the group is open. */
+    modelValue: boolean
     /** The title to display. */
     title: string
     /** Whether to enable the `[i]` icon with `hint`. */
@@ -16,10 +21,17 @@ const props = withDefaults(
     summary?: string
     /** Whether to display "modified" icon if non-default selection is made. */
     modified?: boolean
+    /** Name for storing the result, if any. */
+    storageName?: string
+    /** Type of the storage. */
+    storageType?: 'local' | 'session'
   }>(),
   {
+    modelValue: true,
     hintsEnabled: false,
     modified: false,
+    storageName: 'default',
+    storageType: 'local',
   },
 )
 
@@ -27,23 +39,48 @@ const props = withDefaults(
 const emit = defineEmits<{
   /** Revert modifications for this item. */
   revert: []
+  /** Update the state. */
+  'update:modelValue': [newValue: boolean]
 }>()
 
-const isOpen = defineModel<boolean>('isOpen', { default: true })
+interface State {
+  isOpen: boolean
+}
+
+const state = useStorage(
+  `collapsible-group-${props.storageName}`,
+  { isOpen: true } as State,
+  props.storageType === 'local' ? localStorage : sessionStorage,
+  { mergeDefaults: true },
+)
+
+const updateValueAndEmit = (newValue: boolean) => {
+  if (newValue !== state.value.isOpen) {
+    state.value.isOpen = newValue
+    emit('update:modelValue', newValue)
+  }
+}
+
+watch(
+  () => props.modelValue,
+  (newValue) => updateValueAndEmit(newValue),
+)
 </script>
 
 <template>
   <details
-    :open="isOpen"
+    :open="state.isOpen"
     @toggle="
       (event: ToggleEvent) => {
-        isOpen = (event.target as HTMLDetailsElement).open
+        if (!!state) {
+          state.isOpen = (event.target as HTMLDetailsElement).open
+        }
       }
     "
   >
     <summary style="display: flex">
       <v-icon
-        :icon="isOpen ? 'mdi-chevron-down' : 'mdi-chevron-right'"
+        :icon="state.isOpen ? 'mdi-chevron-down' : 'mdi-chevron-right'"
         size="small"
         style="opacity: 0.4"
       ></v-icon>
@@ -77,7 +114,7 @@ const isOpen = defineModel<boolean>('isOpen', { default: true })
             </div>
           </slot>
         </div>
-        <div v-if="!isOpen">
+        <div v-if="!state.isOpen">
           <slot name="summary">
             {{ props.summary }}
           </slot>
@@ -85,7 +122,11 @@ const isOpen = defineModel<boolean>('isOpen', { default: true })
       </div>
     </summary>
     <div style="display: flex" :aria-label="props.title">
-      <button type="button" class="side-toggle" @click="isOpen = !isOpen">
+      <button
+        type="button"
+        class="side-toggle"
+        @click="updateValueAndEmit(!state.isOpen)"
+      >
         <div class="indicator"></div>
       </button>
       <div style="width: 100%">