From d1f793cdc212c436a70b251c36c0d4ad9ab6dab0 Mon Sep 17 00:00:00 2001 From: Oliver Stolpe Date: Thu, 21 Mar 2024 17:11:13 +0100 Subject: [PATCH] feat: keep table after viewing variant details and going back to the variant table (#1273) (#1464) --- svs/vueapp/src/components/SvFilterApp.vue | 3 +++ .../src/components/SvFilterResultsTable.vue | 15 +++++++++++++-- svs/vueapp/src/stores/svQuery.js | 5 +++++ variants/vueapp/src/components/FilterApp.vue | 4 ++++ .../vueapp/src/components/FilterResultsTable.vue | 15 +++++++++++++-- variants/vueapp/src/stores/variantQuery.js | 5 +++++ 6 files changed, 43 insertions(+), 4 deletions(-) diff --git a/svs/vueapp/src/components/SvFilterApp.vue b/svs/vueapp/src/components/SvFilterApp.vue index c24871283..1335d128d 100644 --- a/svs/vueapp/src/components/SvFilterApp.vue +++ b/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: { diff --git a/svs/vueapp/src/components/SvFilterResultsTable.vue b/svs/vueapp/src/components/SvFilterResultsTable.vue index a79db6fdf..03d774c27 100644 --- a/svs/vueapp/src/components/SvFilterResultsTable.vue +++ b/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 }, diff --git a/svs/vueapp/src/stores/svQuery.js b/svs/vueapp/src/stores/svQuery.js index 360730596..424cd85cc 100644 --- a/svs/vueapp/src/stores/svQuery.js +++ b/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, diff --git a/variants/vueapp/src/components/FilterApp.vue b/variants/vueapp/src/components/FilterApp.vue index c76055332..ce4c7c8f5 100644 --- a/variants/vueapp/src/components/FilterApp.vue +++ b/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: { diff --git a/variants/vueapp/src/components/FilterResultsTable.vue b/variants/vueapp/src/components/FilterResultsTable.vue index c58748266..6e7ea8257 100644 --- a/variants/vueapp/src/components/FilterResultsTable.vue +++ b/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 }, diff --git a/variants/vueapp/src/stores/variantQuery.js b/variants/vueapp/src/stores/variantQuery.js index c8d6a3f19..7b8fc8a36 100644 --- a/variants/vueapp/src/stores/variantQuery.js +++ b/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,