feat: keep scroll position after viewing variant details (#1273)

svs/vueapp/src/components/SvFilterApp.vue

@@ -34,6 +34,9 @@ const caseDetailsStore = useCaseDetailsStore()
 const svResultSetStore = useSvResultSetStore()
 
 const showDetails = async (event) => {
+  svQueryStore.lastPosition = document.querySelector(
+    'div#sodar-app-container',
+  ).scrollTop
   router.push({
     name: 'strucvar-details',
     params: {

svs/vueapp/src/components/SvFilterResultsTable.vue

@@ -11,6 +11,7 @@ import { useCaseDetailsStore } from '@cases/stores/caseDetails'
 import { useSvResultSetStore } from '@svs/stores/svResultSet'
 import { useSvFlagsStore, emptyFlagsTemplate } from '@svs/stores/strucvarFlags'
 import { useSvCommentsStore } from '@svs/stores/svComments'
+import { useSvQueryStore } from '@svs/stores/svQuery'
 import { formatLargeInt, displayName } from '@varfish/helpers'
 
 const MAX_GENES = 20
@@ -27,11 +28,19 @@ const showVariantDetails = (sodarUuid, section) => {
   })
 }
 
+const scrollToLastPosition = () => {
+  if (svQueryStore.lastPosition) {
+    document.querySelector('div#sodar-app-container').scrollTop =
+      svQueryStore.lastPosition
+  }
+}
+
 // Initialize stores
 const caseDetailsStore = useCaseDetailsStore()
 const svResultSetStore = useSvResultSetStore()
 const svFlagsStore = useSvFlagsStore()
 const svCommentsStore = useSvCommentsStore()
+const svQueryStore = useSvQueryStore()
 
 // Headers for the table.
 const _popWidth = 75
@@ -310,6 +319,7 @@ const appContext = JSON.parse(
 onBeforeMount(async () => {
   if (svResultSetStore.resultSetUuid) {
     await loadFromServer()
+    scrollToLastPosition()
   }
 })
 
@@ -331,9 +341,10 @@ watch(
 
 watch(
   () => svResultSetStore.resultSetUuid,
-  (_newValue, _oldValue) => {
+  async (_newValue, _oldValue) => {
     if (_newValue) {
-      loadFromServer()
+      await loadFromServer()
+      scrollToLastPosition()
     }
   },
   { deep: true },

svs/vueapp/src/stores/svQuery.js

@@ -146,6 +146,9 @@ export const useSvQueryStore = defineStore('svQuery', () => {
   /** Query logs as fetched from API. */
   const queryLogs = ref(null)
 
+  /** Last position on filter page */
+  const lastPosition = ref(null)
+
   /** Quick presets as loaded from API. */
   const quickPresets = ref(null)
   /** Per-category presets. */
@@ -393,6 +396,7 @@ export const useSvQueryStore = defineStore('svQuery', () => {
     queryState.value = QueryStates.None.value
     queryStateMsg.value = null
     queryLogs.value = null
+    lastPosition.value = null
     quickPresets.value = null
     categoryPresets.value = {
       inheritance: null,
@@ -423,6 +427,7 @@ export const useSvQueryStore = defineStore('svQuery', () => {
     queryState,
     queryStateMsg,
     queryLogs,
+    lastPosition,
     quickPresets,
     categoryPresets,
     initializeRes,

variants/vueapp/src/components/FilterApp.vue

@@ -36,6 +36,10 @@ const caseDetailsStore = useCaseDetailsStore()
 const variantResultSetStore = useVariantResultSetStore()
 
 const showDetails = async (event) => {
+  variantQueryStore.lastPosition = document.querySelector(
+    'div#sodar-app-container',
+  ).scrollTop
+  // TODO store y position in store
   router.push({
     name: 'seqvar-details',
     params: {

variants/vueapp/src/components/FilterResultsTable.vue

@@ -18,6 +18,7 @@ import { useVariantFlagsStore } from '@variants/stores/variantFlags'
 import { useVariantCommentsStore } from '@variants/stores/variantComments'
 import { useVariantAcmgRatingStore } from '@variants/stores/variantAcmgRating'
 import { useVariantResultSetStore } from '@variants/stores/variantResultSet'
+import { useVariantQueryStore } from '@variants/stores/variantQuery'
 import { copy } from '@variants/helpers'
 import {
   DisplayConstraints,
@@ -54,6 +55,7 @@ const flagsStore = useVariantFlagsStore()
 const commentsStore = useVariantCommentsStore()
 const acmgRatingStore = useVariantAcmgRatingStore()
 const variantResultSetStore = useVariantResultSetStore()
+const variantQueryStore = useVariantQueryStore()
 
 /** The details columns to show. */
 const displayDetails = computed({
@@ -521,6 +523,13 @@ const extraAnnoFields = computed(
   () => variantResultSetStore.extraAnnoFields ?? [],
 )
 
+const scrollToLastPosition = () => {
+  if (variantQueryStore.lastPosition) {
+    document.querySelector('div#sodar-app-container').scrollTop =
+      variantQueryStore.lastPosition
+  }
+}
+
 /** Update display when pagination or sorting changed. */
 watch(
   [
@@ -541,14 +550,16 @@ watch(
 onBeforeMount(async () => {
   if (variantResultSetStore.resultSetUuid) {
     await loadFromServer()
+    scrollToLastPosition()
   }
 })
 
 watch(
   () => variantResultSetStore.resultSetUuid,
-  (_newValue, _oldValue) => {
+  async (_newValue, _oldValue) => {
     if (_newValue) {
-      loadFromServer()
+      await loadFromServer()
+      scrollToLastPosition()
     }
   },
   { deep: true },

variants/vueapp/src/stores/variantQuery.js

@@ -249,6 +249,9 @@ export const useVariantQueryStore = defineStore('variantQuery', () => {
   /** Query logs as fetched from API. */
   const queryLogs = ref(null)
 
+  /** Last position on filter page */
+  const lastPosition = ref(null)
+
   /** Quick presets as loaded from API. */
   const quickPresets = ref(null)
   /** Per-category presets. */
@@ -630,6 +633,7 @@ export const useVariantQueryStore = defineStore('variantQuery', () => {
     exportJobUuidXlsx.value = null
     extraAnnoFields.value = null
     hpoNames.value = []
+    lastPosition.value = null
     queryState.value = QueryStates.Initial.value
     queryStateMsg.value = null
     queryLogs.value = null
@@ -670,6 +674,7 @@ export const useVariantQueryStore = defineStore('variantQuery', () => {
     categoryPresets,
     extraAnnoFields,
     hpoNames,
+    lastPosition,
     initializeRes,
     // functions
     initialize,