fix: variant icons leads to wrong postion on variant details page (#1315

) (#1465)
varfish-org · Mar 22, 2024 · 9d3d83b · 9d3d83b
1 parent d1f793c
commit 9d3d83b
Show file tree

Hide file tree

Showing 7 changed files with 99 additions and 46 deletions.
diff --git a/cases/vueapp/src/router/index.ts b/cases/vueapp/src/router/index.ts
@@ -134,16 +134,7 @@ export const router = createRouter({
     _from: RouteLocationNormalizedLoaded,
     savedPosition: null | _ScrollPositionNormalized,
   ) {
-    if (
-      ['seqvar-details', 'strucvar-details'].includes(String(to.name)) &&
-      to.params.selectedSection
-    ) {
-      const res = { el: `#${to.params.selectedSection}` }
-      document.querySelector(res.el)?.scrollIntoView()
-      return res
-    } else {
-      return savedPosition || { left: 0, top: 0 }
-    }
+    return savedPosition || { left: 0, top: 0 }
   },
 })
 

diff --git a/svs/vueapp/src/components/SvFilterResultsTable.vue b/svs/vueapp/src/components/SvFilterResultsTable.vue
@@ -24,7 +24,7 @@ const router = useRouter()
 const showVariantDetails = (sodarUuid, section) => {
   emit('variantSelected', {
     svresultrow: sodarUuid,
-    selectedSection: section ?? 'genes',
+    selectedSection: section ?? 'gene-overview',
   })
 }
 
@@ -445,21 +445,21 @@ watch(
           <i-fa-solid-search
             class="text-muted"
             role="button"
-            @click.prevent="showVariantDetails(sodar_uuid, 'genes')"
+            @click.prevent="showVariantDetails(sodar_uuid, 'strucvar-genes')"
           />
           <i-fa-solid-bookmark
             v-if="svFlagsStore.getFlags({ chromosome, start, end, sv_type })"
             class="text-muted"
             title="flags & bookmarks"
             role="button"
-            @click="showVariantDetails(sodar_uuid, 'flags')"
+            @click="showVariantDetails(sodar_uuid, 'strucvar-flags')"
           />
           <i-fa-regular-bookmark
             v-else
             class="text-muted icon-inactive"
             title="flags & bookmarks"
             role="button"
-            @click="showVariantDetails(sodar_uuid, 'flags')"
+            @click="showVariantDetails(sodar_uuid, 'strucvar-flags')"
           />
           <!-- comments -->
           <i-fa-solid-comment
@@ -468,13 +468,13 @@ watch(
             "
             class="text-muted ml-1"
             role="button"
-            @click="showVariantDetails(sodar_uuid, 'comments')"
+            @click="showVariantDetails(sodar_uuid, 'strucvar-comments')"
           />
           <i-fa-regular-comment
             v-else
             class="text-muted icon-inactive ml-1"
             role="button"
-            @click="showVariantDetails(sodar_uuid, 'comments')"
+            @click="showVariantDetails(sodar_uuid, 'strucvar-comments')"
           />
           <!-- tool -->
           <span :title="payload.caller">
@@ -495,7 +495,7 @@ watch(
       >
         <div
           role="button"
-          @click="showVariantDetails(sodar_uuid, 'genome-browser')"
+          @click="showVariantDetails(sodar_uuid, 'strucvar-genomebrowser')"
         >
           chr{{ chromosome }}:{{ formatLargeInt(start) }}
           <span
@@ -524,7 +524,7 @@ watch(
       >
         <div
           role="button"
-          @click="showVariantDetails(sodar_uuid, 'call-details')"
+          @click="showVariantDetails(sodar_uuid, 'strucvar-calldetails')"
         >
           <template v-if="tx_effects.length || showTadGenes(tad_genes)">
             <template v-for="(item, index) in tx_effects.slice(0, MAX_GENES)">
@@ -681,7 +681,7 @@ watch(
         <div
           class="text-right text-nowrap space"
           role="button"
-          @click="showVariantDetails(sodar_uuid, 'genome-browser')"
+          @click="showVariantDetails(sodar_uuid, 'strucvar-genomebrowser')"
         >
           {{ formatLargeInt(payload.sv_length) }}
           <span class="text-muted">bp</span>

diff --git a/svs/vueapp/src/views/StrucvarDetails/StrucvarDetails.vue b/svs/vueapp/src/views/StrucvarDetails/StrucvarDetails.vue
@@ -43,7 +43,9 @@ import StrucvarClinvarCard from '@bihealth/reev-frontend-lib/components/Strucvar
 import StrucvarToolsCard from '@bihealth/reev-frontend-lib/components/StrucvarToolsCard/StrucvarToolsCard.vue'
 import GenomeBrowserCard from '@bihealth/reev-frontend-lib/components/GenomeBrowserCard/GenomeBrowserCard.vue'
 import { useCaseDetailsStore } from '@cases/stores/caseDetails'
-import CaseDetailApp from '@cases/components/CaseDetailApp.vue'
+import { State } from '@varfish/storeUtils'
+import { StoreState } from '@bihealth/reev-frontend-lib/stores'
+import { usePubtatorStore } from '@bihealth/reev-frontend-lib/stores/pubtator'
 
 const props = defineProps<{
   /** UUID of the result row to display. */
@@ -75,6 +77,8 @@ const svDetailsStore = useSvDetailsStore()
 const svFlagsStore = useSvFlagsStore()
 /** Management of strucvar comments. */
 const svCommentsStore = useSvCommentsStore()
+/** Management of PubTator store. */
+const pubtatorStore = usePubtatorStore()
 
 /** Component state; HGNC identifier of selected gene. */
 const selectedGeneHgncId = ref<string | undefined>(undefined)
@@ -157,16 +161,40 @@ const refreshStores = async () => {
 /** Watch change in properties to reload data. */
 watch(
   () => [props.resultRowUuid, props.selectedSection],
+  async () => {
+    await refreshStores()
+  },
+)
+
+watch(
+  () => [
+    svResultSetStore.storeState.state,
+    pubtatorStore.storeState,
+    geneInfoStore.storeState,
+    strucvarInfoStore.storeState,
+    svCommentsStore.storeState,
+    svDetailsStore.storeState,
+  ],
   () => {
-    refreshStores()
+    if (
+      svResultSetStore.storeState.state === State.Active &&
+      pubtatorStore.storeState === StoreState.Active &&
+      geneInfoStore.storeState === StoreState.Active &&
+      strucvarInfoStore.storeState === StoreState.Active &&
+      svCommentsStore.storeState.state === State.Active &&
+      svDetailsStore.storeState.state === State.Active
+    ) {
+      setTimeout(() => {
+        document.querySelector(`#${props.selectedSection}`)?.scrollIntoView()
+      }, 500)
+    }
   },
 )
 
 /** When mounted, scroll to the selected element if any.
  */
-onMounted(() => {
-  refreshStores()
-  document.querySelector(`#${props.selectedSection}`)?.scrollIntoView()
+onMounted(async () => {
+  await refreshStores()
 })
 
 // Watch changes of selected HGNC ID and load gene.

diff --git a/variants/vueapp/src/components/FilterApp.vue b/variants/vueapp/src/components/FilterApp.vue
@@ -39,7 +39,6 @@ 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
@@ -420,7 +420,7 @@ const getClinvarSignificanceBadge = (patho) => {
 const showVariantDetails = (sodarUuid, section) => {
   emit('variantSelected', {
     smallvariantresultrow: sodarUuid,
-    selectedSection: section ?? 'gene',
+    selectedSection: section ?? 'gene-overview',
   })
 }
 
@@ -634,34 +634,34 @@ watch(
               class="text-muted ml-1"
               title="flags & bookmarks"
               role="button"
-              @click="showVariantDetails(sodar_uuid, 'flags')"
+              @click="showVariantDetails(sodar_uuid, 'seqvar-flags')"
             />
             <i-fa-regular-bookmark
               v-else
               class="text-muted ml-1"
               title="flags & bookmarks"
               role="button"
-              @click="showVariantDetails(sodar_uuid, 'flags')"
+              @click="showVariantDetails(sodar_uuid, 'seqvar-flags')"
             />
 
             <i-fa-solid-comment
               v-if="hasComments(payload)"
               class="text-muted ml-1"
               role="button"
-              @click="showVariantDetails(sodar_uuid, 'comments')"
+              @click="showVariantDetails(sodar_uuid, 'seqvar-comments')"
             />
             <i-fa-regular-comment
               v-else
               class="text-muted ml-1"
               role="button"
-              @click="showVariantDetails(sodar_uuid, 'comments')"
+              @click="showVariantDetails(sodar_uuid, 'seqvar-comments')"
             />
 
             <span
               title="ACMG rating"
               :class="getAcmgBadgeClasses(getAcmgRating(payload))"
               role="button"
-              @click="showVariantDetails(sodar_uuid, 'acmg-rating')"
+              @click="showVariantDetails(sodar_uuid, 'seqvar-acmg')"
               >{{ getAcmgRating(payload) || '-' }}</span
             >
 
@@ -679,7 +679,7 @@ watch(
 
             <span
               role="button"
-              @click="showVariantDetails(sodar_uuid, 'clinvar')"
+              @click="showVariantDetails(sodar_uuid, 'seqvar-clinvar')"
             >
               <i-fa-regular-hospital
                 v-if="payload.in_clinvar && payload.summary_pathogenicity_label"
@@ -710,23 +710,23 @@ watch(
         <template #item-position="{ sodar_uuid, position }">
           <div
             role="button"
-            @click="showVariantDetails(sodar_uuid, 'variant-tools')"
+            @click="showVariantDetails(sodar_uuid, 'seqvar-tools')"
           >
             {{ position }}
           </div>
         </template>
         <template #item-reference="{ sodar_uuid, reference }">
           <div
             role="button"
-            @click="showVariantDetails(sodar_uuid, 'variant-tools')"
+            @click="showVariantDetails(sodar_uuid, 'seqvar-tools')"
           >
             <span :title="reference">{{ truncateText(reference, 5) }}</span>
           </div>
         </template>
         <template #item-alternative="{ sodar_uuid, alternative }">
           <div
             role="button"
-            @click="showVariantDetails(sodar_uuid, 'variant-tools')"
+            @click="showVariantDetails(sodar_uuid, 'seqvar-tools')"
           >
             <span :title="alternative">{{ truncateText(alternative, 5) }}</span>
           </div>
@@ -758,7 +758,10 @@ watch(
           <span v-else class="badge badge-light">-</span>
         </template>
         <template #item-frequency="{ sodar_uuid, payload }">
-          <div role="button" @click="showVariantDetails(sodar_uuid, 'freqs')">
+          <div
+            role="button"
+            @click="showVariantDetails(sodar_uuid, 'seqvar-freqs')"
+          >
             <abbr
               v-if="displayAmbiguousFrequencyWarning(payload)?.length"
               :title="displayAmbiguousFrequencyWarningMsg(payload)"
@@ -772,14 +775,17 @@ watch(
           </div>
         </template>
         <template #item-homozygous="{ sodar_uuid, payload }">
-          <div role="button" @click="showVariantDetails(sodar_uuid, 'freqs')">
+          <div
+            role="button"
+            @click="showVariantDetails(sodar_uuid, 'seqvar-freqs')"
+          >
             {{ displayHomozygousContent(payload) }}
           </div>
         </template>
         <template #item-constraints="{ payload }">
           <div
             role="button"
-            @click.prevent="showVariantDetails(sodar_uuid, 'gene')"
+            @click.prevent="showVariantDetails(sodar_uuid, 'gene-overview')"
           >
             {{ displayConstraintsContent(payload) }}
           </div>
@@ -789,7 +795,7 @@ watch(
             class="user-select-none"
             href="#"
             role="button"
-            @click.prevent="showVariantDetails(sodar_uuid, 'gene')"
+            @click.prevent="showVariantDetails(sodar_uuid, 'gene-overview')"
           >
             {{ getSymbol(payload) }}
           </span>
@@ -827,7 +833,7 @@ watch(
           <span
             :title="`${effectSummary(payload)} [${payload.effect.join(', ')}]`"
             role="button"
-            @click="showVariantDetails(sodar_uuid, 'tx-csq')"
+            @click="showVariantDetails(sodar_uuid, 'seqvar-csq')"
           >
             {{ truncateText(effectSummary(payload), 12) }}
           </span>

diff --git a/variants/vueapp/src/stores/variantDetails.ts b/variants/vueapp/src/stores/variantDetails.ts
@@ -144,6 +144,7 @@ export const useVariantDetailsStore = defineStore('variantDetails', () => {
         }),
     ])
 
+    storeState.state = State.Active
     smallVariant.value = smallVariant$
   }
 

diff --git a/variants/vueapp/src/views/SeqvarDetails/SeqvarDetails.vue b/variants/vueapp/src/views/SeqvarDetails/SeqvarDetails.vue
@@ -44,6 +44,9 @@ import SeqvarToolsCard from '@bihealth/reev-frontend-lib/components/SeqvarToolsC
 import SeqvarScoresCard from '@bihealth/reev-frontend-lib/components/SeqvarScoresCard/SeqvarScoresCard.vue'
 import SeqvarVariantValidatorCard from '@bihealth/reev-frontend-lib/components/SeqvarVariantValidatorCard/SeqvarVariantValidatorCard.vue'
 import { useCaseDetailsStore } from '@cases/stores/caseDetails'
+import { State } from '@varfish/storeUtils'
+import { usePubtatorStore } from '@bihealth/reev-frontend-lib/stores/pubtator'
+import { StoreState } from '@bihealth/reev-frontend-lib/stores'
 
 /** This component's props. */
 const props = defineProps<{
@@ -73,6 +76,7 @@ const variantDetailsStore = useVariantDetailsStore()
 const variantFlagsStore = useVariantFlagsStore()
 const variantCommentsStore = useVariantCommentsStore()
 const variantAcmgRatingStore = useVariantAcmgRatingStore()
+const pubtatorStore = usePubtatorStore()
 
 /** Currently displayed Seqvar. */
 const seqvar = computed<Seqvar | undefined>(() => {
@@ -146,23 +150,47 @@ const refreshStores = async () => {
       ])
     }
   }
-
-  document.querySelector(`#${props.selectedSection}`)?.scrollIntoView()
 }
 
 /** Watch change in properties to reload data. */
 watch(
   () => [props.resultRowUuid, props.selectedSection],
+  async () => {
+    await refreshStores()
+  },
+)
+
+watch(
+  () => [
+    variantResultSetStore.storeState.state,
+    pubtatorStore.storeState,
+    geneInfoStore.storeState,
+    seqvarInfoStore.storeState,
+    variantAcmgRatingStore.storeState,
+    variantCommentsStore.storeState,
+    variantDetailsStore.storeState,
+  ],
   () => {
-    refreshStores()
+    if (
+      variantResultSetStore.storeState.state === State.Active &&
+      pubtatorStore.storeState === StoreState.Active &&
+      geneInfoStore.storeState === StoreState.Active &&
+      seqvarInfoStore.storeState === StoreState.Active &&
+      variantAcmgRatingStore.storeState.state === State.Active &&
+      variantCommentsStore.storeState.state === State.Active &&
+      variantDetailsStore.storeState.state === State.Active
+    ) {
+      setTimeout(() => {
+        document.querySelector(`#${props.selectedSection}`)?.scrollIntoView()
+      }, 500)
+    }
   },
 )
 
 /** When mounted, scroll to the selected element if any.
  */
-onMounted(() => {
-  refreshStores()
-  document.querySelector(`#${props.selectedSection}`)?.scrollIntoView()
+onMounted(async () => {
+  await refreshStores()
 })
 </script>