feat: store collapsible state in local storage (#2043) (#2047)

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>

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

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 }}

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 }}

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

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) {

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)"

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,

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,34 +21,66 @@ 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',
   },
 )
 
 /** This component's events. */
 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,15 +114,19 @@ 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>
         </div>
       </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%">