fix: changed query presets not updated in filter form (#1557)

cases/vueapp/src/components/CaseDetail/CardQueries.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, watch } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 
 import { useCaseListStore } from '@cases/stores/caseList'
 import { useCaseDetailsStore } from '@cases/stores/caseDetails'
@@ -16,25 +16,35 @@ const caseDetailsStore = useCaseDetailsStore()
 const presetSetLoading = ref(false)
 /** The current preset set (if caseDetailsStore.caseObj.presetset !== null / factory presets). */
 const presetSetLabel = ref(null)
+
+const loadCasePresetSetLabel = async (presetSetUuid) => {
+  if (!presetSetUuid) {
+    presetSetLabel.value = null
+    return
+  }
+  const queryPresetsClient = new QueryPresetsClient(caseListStore.csrfToken)
+  presetSetLoading.value = true
+  try {
+    const presetSet = await queryPresetsClient.retrievePresetSet(presetSetUuid)
+    presetSetLabel.value = presetSet.label
+  } catch (err) {
+    console.error('Problem retrieving preset set', err)
+  } finally {
+    presetSetLoading.value = false
+  }
+}
+
 /** Watch change of current case's preset set and load label if necessary. */
 watch(
   () => caseDetailsStore?.caseObj?.presetset,
-  async (newValue, _oldValue) => {
-    if (!newValue) {
-      return // short circuit in case of factory defaults
-    }
-    const queryPresetsClient = new QueryPresetsClient(caseListStore.csrfToken)
-    presetSetLoading.value = true
-    try {
-      const presetSet = await queryPresetsClient.retrievePresetSet(newValue)
-      presetSetLabel.value = presetSet.label
-    } catch (err) {
-      console.error('Problem retrieving preset set', err)
-    } finally {
-      presetSetLoading.value = false
-    }
+  async (newPreset, _oldPreset) => {
+    await loadCasePresetSetLabel(newPreset)
   },
 )
+
+onMounted(async () => {
+  await loadCasePresetSetLabel(caseDetailsStore?.caseObj?.presetset)
+})
 </script>
 
 <template>
@@ -58,23 +68,29 @@ watch(
         </a>
       </div>
     </div>
-    <ul v-if="caseDetailsStore.caseObj" class="list-group list-group-flush">
+    <ul v-if="caseDetailsStore?.caseObj" class="list-group list-group-flush">
       <li class="list-group-item pl-0">
         <div class="row">
           <span class="col-3 text-nowrap font-weight-bold">
             Query Presets
           </span>
-          <span v-if="caseDetailsStore.caseObj.presetset" class="col-3">
-            <template v-if="presetSetLoading">
-              <i-fa-solid-circle-notch v-if="presetSetLoading" class="spin" />
-            </template>
-            <template v-else>
+          <template v-if="presetSetLoading">
+            <i-fa-solid-circle-notch v-if="presetSetLoading" class="spin" />
+          </template>
+          <div v-else class="col-9">
+            <template v-if="presetSetLabel">
               {{ presetSetLabel }}
             </template>
-          </span>
-          <span v-else class="col-3 text-muted font-italic">
-            Factory Defaults
-          </span>
+            <template v-else-if="caseDetailsStore?.projectDefaultPresetSet">
+              Project Default
+              <span class="text-muted"
+                >({{ caseDetailsStore.projectDefaultPresetSet.label }})</span
+              >
+            </template>
+            <span v-else class="text-muted font-italic">
+              Factory Defaults
+            </span>
+          </div>
         </div>
       </li>
     </ul>

cases/vueapp/src/components/CaseDetailApp.vue

@@ -146,20 +146,31 @@ const toastRef = ref(null)
 const handleEditQueryPresetsClicked = async () => {
   const queryPresetsClient = new QueryPresetsClient(caseListStore.csrfToken)
   const allPresets = await queryPresetsClient.listPresetSetAll()
-  const options = [{ value: null, label: 'Factory Presets' }].concat(
+  const projectDefaultPresetSet =
+    await queryPresetsClient.retrieveProjectDefaultPresetSet(
+      appContext.project.sodar_uuid,
+    )
+  caseDetailsStore.projectDefaultPresetSet = projectDefaultPresetSet
+  const defaultLabel = projectDefaultPresetSet
+    ? 'Project Default'
+    : 'Factory Presets'
+  const options = [{ value: null, label: defaultLabel }].concat(
     allPresets.map((p) => ({
       value: p.sodar_uuid,
-      label: p.label,
+      label:
+        p.label +
+        (p.sodar_uuid === projectDefaultPresetSet?.sodar_uuid ? '*' : ''),
     })),
   )
 
   try {
     const presetSetUuid = await modalSelectRef.value.show({
       title: 'Select Query Presets',
-      label: `Query Presets`,
+      label: 'Query Presets',
       helpText:
-        'The selected presets will apply to future queries of this case by all users.',
-      defaultValue: caseDetailsStore.caseObj.presetset ?? null,
+        'The selected presets will apply to future queries of this case by all users. ' +
+        'A custom case preset will override the project default (*).',
+      defaultValue: caseDetailsStore?.caseObj?.presetset ?? null,
       options,
     })
 

cases/vueapp/src/stores/caseDetails.ts

@@ -15,6 +15,7 @@ import { StoreState, State } from '@varfish/storeUtils'
 import { CaseClient } from '@cases/api/caseClient'
 import { useCaseListStore } from '@cases/stores/caseList'
 import { displayName } from '@varfish/helpers'
+import { QueryPresetsClient } from '@variants/api/queryPresetsClient'
 
 /** Alias definition of Case type; to be defined later. */
 export type Case = any
@@ -130,6 +131,8 @@ export const useCaseDetailsStore = defineStore('caseDetails', () => {
 
   const genotypeMapping = ref<GenotypeMapping | null>({})
 
+  const projectDefaultPresetSet = ref<any | null>(null)
+
   /** Promise for initialization of the store. */
   const initializeRes = ref<Promise<any> | null>(null)
 
@@ -177,6 +180,9 @@ export const useCaseDetailsStore = defineStore('caseDetails', () => {
     storeState.serverInteractions += 1
 
     const caseClient = new CaseClient(csrfToken.value ?? 'undefined-csrf-token')
+    const queryPresetsClient = new QueryPresetsClient(
+      csrfToken.value ?? 'csrf-undefined',
+    )
 
     initializeRes.value = Promise.all([
       caseClient.retrieveCase(caseUuid.value).then((res) => {
@@ -224,6 +230,11 @@ export const useCaseDetailsStore = defineStore('caseDetails', () => {
           caseAlignmentStats.value = null
         }
       }),
+      queryPresetsClient
+        .retrieveProjectDefaultPresetSet(projectUuid.value)
+        .then((res) => {
+          projectDefaultPresetSet.value = res
+        }),
     ])
       .then(() => {
         storeState.serverInteractions -= 1
@@ -448,6 +459,7 @@ export const useCaseDetailsStore = defineStore('caseDetails', () => {
     caseAnnotationReleaseInfos,
     caseSvAnnotationReleaseInfos,
     genotypeMapping,
+    projectDefaultPresetSet,
     // functions
     initialize,
     updateCase,

svs/vueapp/src/components/SvFilterApp.vue

@@ -108,6 +108,9 @@ const refreshStores = async () => {
     return
   }
 
+  // Reset all stores to avoid artifacts.
+  svQueryStore.$reset()
+
   await caseDetailsStore.initialize(
     appContext.csrf_token,
     appContext.project?.sodar_uuid,

svs/vueapp/src/components/SvFilterForm/QuickPresets.vue

@@ -22,6 +22,42 @@ const props = defineProps({
 
 /** Internal store of inheritance preset.  If set through here, then it is only applied in the control. */
 const inheritanceRef = ref(null)
+const presetSource = ref(null)
+const presetSetLoading = ref(false)
+const presetSetLabel = ref(null)
+
+const updatePresetSetLoading = async () => {
+  let uuid
+  if (
+    !props.case?.presetset &&
+    svQueryStore?.defaultPresetSetUuid === undefined
+  ) {
+    presetSetLabel.value = 'Factory Defaults'
+    presetSource.value = 'Factory Defaults'
+    return // short circuit in case of factory defaults
+  } else {
+    if (props.case?.presetset) {
+      uuid = caseDetailsStore.caseObj.presetset
+      presetSource.value = 'Individual Case Setting'
+    } else if (svQueryStore?.defaultPresetSetUuid !== undefined) {
+      uuid = svQueryStore.defaultPresetSetUuid
+      presetSource.value = 'Project Default Setting'
+    }
+  }
+  const queryPresetsClient = new QueryPresetsClient(caseDetailsStore.csrfToken)
+  presetSetLoading.value = true
+  await queryPresetsClient
+    .retrievePresetSet(uuid)
+    .then((presetSet) => {
+      presetSetLabel.value = presetSet.label
+    })
+    .catch((err) => {
+      console.error('Problem retrieving preset set', err)
+    })
+    .finally(() => {
+      presetSetLoading.value = false
+    })
+}
 
 /** Refresh qualityRef from actual form values.  Check each for compatibility and pick first matching. */
 const refreshInheritanceRef = () => {
@@ -298,6 +334,7 @@ const refreshAllRefs = () => {
 /** React to store changes by adjusting the selection fields. */
 onMounted(() => {
   svQueryStore.initializeRes.then(() => {
+    updatePresetSetLoading()
     refreshAllRefs()
     svQueryStore.$subscribe((_mutation, _state) => {
       if (!blockRefresh.value) {
@@ -309,6 +346,12 @@ onMounted(() => {
 </script>
 
 <template>
+  <div class="row text-muted small">
+    <span class="mr-2 badge badge-secondary">{{ presetSetLabel }}</span>
+    <template v-if="svQueryStore.filtrationComplexityMode === 'dev'">
+      &mdash;<span class="ml-2">{{ presetSource }}</span>
+    </template>
+  </div>
   <div class="row">
     <div class="col-1 pl-0 pr-0">
       <label

svs/vueapp/src/stores/svQuery.js

@@ -435,5 +435,6 @@ export const useSvQueryStore = defineStore('svQuery', () => {
     initialize,
     submitQuery,
     cancelQuery,
+    $reset,
   }
 })

variants/vueapp/src/components/FilterApp.vue

@@ -110,13 +110,26 @@ const refreshStores = async () => {
     return
   }
 
+  // Reset all stores to avoid artifacts.
+  variantQueryStore.$reset()
+  variantFlagsStore.$reset()
+  variantCommentsStore.$reset()
+  variantAcmgRatingStore.$reset()
+  variantResultSetStore.$reset()
+
   await caseDetailsStore.initialize(
     appContext.csrf_token,
     appContext.project?.sodar_uuid,
     props.caseUuid,
   )
 
   Promise.all([
+    variantQueryStore.initialize(
+      appContext.csrf_token,
+      appContext?.project?.sodar_uuid,
+      props.caseUuid,
+      appContext,
+    ),
     variantFlagsStore.initialize(
       appContext.csrf_token,
       appContext.project?.sodar_uuid,
@@ -132,12 +145,6 @@ const refreshStores = async () => {
       appContext.project?.sodar_uuid,
       caseDetailsStore.caseObj.sodar_uuid,
     ),
-    variantQueryStore.initialize(
-      appContext.csrf_token,
-      appContext?.project?.sodar_uuid,
-      props.caseUuid,
-      appContext,
-    ),
     variantResultSetStore.initialize(appContext.csrf_token),
   ]).then(async () => {
     await variantResultSetStore.loadResultSetViaQuery(

variants/vueapp/src/stores/variantAcmgRating/store.ts

@@ -294,6 +294,7 @@ export const useVariantAcmgRatingStore = defineStore(
       updateAcmgRating,
       deleteAcmgRating,
       getAcmgRating,
+      $reset,
     }
   },
 )

variants/vueapp/src/stores/variantComments.ts

@@ -371,5 +371,6 @@ export const useVariantCommentsStore = defineStore('variantComments', () => {
     updateComment,
     deleteComment,
     hasComments,
+    $reset,
   }
 })

variants/vueapp/src/stores/variantFlags.ts

@@ -425,5 +425,6 @@ export const useVariantFlagsStore = defineStore('variantFlags', () => {
     getFlags,
     flagAsArtifact,
     retrieveProjectWideVariantFlags,
+    $reset,
   }
 })

variants/vueapp/src/stores/variantQuery.js

@@ -103,9 +103,7 @@ const fetchPresets = async (
 
 const fetchProjectDefaultPresetSet = async (csrfToken, projectUuid) => {
   const queryPresetsClient = new QueryPresetsClient(csrfToken)
-  const result =
-    await queryPresetsClient.retrieveProjectDefaultPresetSet(projectUuid)
-  return result.sodar_uuid
+  return await queryPresetsClient.retrieveProjectDefaultPresetSet(projectUuid)
 }
 
 /** Helper that gets the default settings and stores them in querySettingsPresets.value,
@@ -593,9 +591,11 @@ export const useVariantQueryStore = defineStore('variantQuery', () => {
         }),
       // 3. fetch quick presets etc.
       fetchProjectDefaultPresetSet(csrfToken.value, projectUuid.value).then(
-        (presetUuid) => {
-          defaultPresetSetUuid.value = presetUuid
-          fetchPresets(
+        async (result) => {
+          defaultPresetSetUuid.value = result.sodar_uuid
+            ? result.sodar_uuid
+            : null
+          await fetchPresets(
             csrfToken.value,
             caseDetailsStore.caseObj,
             quickPresets,

variants/vueapp/src/stores/variantResultSet.ts

@@ -237,5 +237,6 @@ export const useVariantResultSetStore = defineStore('variantResultSet', () => {
     fetchResultSetViaRow,
     loadResultSetViaQuery,
     loadResultSetViaCase,
+    $reset,
   }
 })