fix: fix blipping seqvar ACMG card (#266) (#269)

bihealth · Dec 10, 2023 · aa186c3 · aa186c3
1 parent c2516e0
commit aa186c3
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 18 deletions.
diff --git a/frontend/src/components/SeqvarDetails/ClinsigCard.vue b/frontend/src/components/SeqvarDetails/ClinsigCard.vue
@@ -38,17 +38,21 @@ const emit = defineEmits<{
 /** Store to use for ACMG ratings of sequence variants. */
 const acmgRatingStore = useVariantAcmgRatingStore()
 
+/** Component state: error message to display, if any. */
+const errorMessage = ref<string>('')
 /** Component state: whether to enable summary view. */
-const showTerse = ref(false)
+const showTerse = ref<boolean>(false)
 /** Component state: whether to show failed criteria. */
-const showFailed = ref(false)
+const showFailed = ref<boolean>(false)
 
 /** Helper function to run a function in a try/catch and emit `errorDisplay` otherwise.. */
-const tryCatchEmitErrorDisplay = async (fn: () => Promise<void>) => {
+const tryCatchEmitErrorDisplay = async (fn: () => Promise<any>) => {
   try {
-    await fn()
+    return await fn()
   } catch (err) {
-    emit('errorDisplay', `Ooops, there was an error: ${err}`)
+    const msg = `Ooops, there was an error: ${err}`
+    errorMessage.value = msg
+    emit('errorDisplay', msg)
   }
 }
 
@@ -101,13 +105,19 @@ watch(
   async () => {
     if (
       props.seqvar?.genomeBuild === 'grch37' &&
-      acmgRatingStore.storeState !== StoreState.Loading
+      ![StoreState.Loading, StoreState.Error].includes(acmgRatingStore.storeState)
     ) {
-      await acmgRatingStore.fetchAcmgRating(props.seqvar)
-      if (acmgRatingStore.acmgRatingStatus === false) {
-        refetchAcmgRatingInterVar()
-      } else {
-        refetchAcmgRatingServer()
+      try {
+        await acmgRatingStore.fetchAcmgRating(props.seqvar)
+        if (acmgRatingStore.acmgRatingStatus === false) {
+          refetchAcmgRatingInterVar()
+        } else {
+          refetchAcmgRatingServer()
+        }
+      } catch (err) {
+        const msg = `Ooops, there was an error: ${err}`
+        errorMessage.value = msg
+        emit('errorDisplay', msg)
       }
     }
   }
@@ -134,6 +144,11 @@ onMounted(async () => {
         the moment.
       </div>
     </v-card-text>
+    <v-card-text v-else-if="errorMessage">
+      <v-card>
+        <v-alert type="error"> {{ errorMessage }} </v-alert>
+      </v-card>
+    </v-card-text>
     <v-card-text v-else>
       <!-- Top summary sheet and server storage buttons -->
       <v-row>

diff --git a/frontend/src/stores/variantAcmgRating.ts b/frontend/src/stores/variantAcmgRating.ts
@@ -152,7 +152,7 @@ export const useVariantAcmgRatingStore = defineStore('variantAcmgRating', () =>
       const acmgRatingBackend = await acmgSeqVarClient.fetchAcmgRating(
         seqvar$.chrom + ':' + seqvar$.pos + ':' + seqvar$.del + ':' + seqvar$.ins
       )
-      if (acmgRatingBackend && acmgRatingBackend.detail !== 'ACMG Sequence Variant not found') {
+      if (acmgRatingBackend.acmg_rank?.criterias) {
         acmgRatingStatus.value = true
         // Go through the data and setPresense for each criteria
         for (const criteria of acmgRatingBackend.acmg_rank.criterias) {

diff --git a/frontend/src/views/SeqvarDetailsView.vue b/frontend/src/views/SeqvarDetailsView.vue
@@ -25,7 +25,6 @@ import { scrollToSection } from '@/lib/utils'
 import { useCaseStore } from '@/stores/case'
 import { usegeneInfoStore } from '@/stores/geneInfo'
 import { StoreState } from '@/stores/misc'
-import { useVariantAcmgRatingStore } from '@/stores/variantAcmgRating'
 import { useVariantInfoStore } from '@/stores/variantInfo'
 
 // Define the async components to use in this view.
@@ -92,8 +91,6 @@ const route = useRoute()
 const variantInfoStore = useVariantInfoStore()
 /** Information about the affected gene, used to fetch information on load. */
 const geneInfoStore = usegeneInfoStore()
-/** ACMG criteria store. */
-const acmgRatingStore = useVariantAcmgRatingStore()
 /** Currently active case - for HPO terms. */
 const caseStore = useCaseStore()
 
@@ -177,7 +174,6 @@ const loadDataToStore = async () => {
         return Promise.resolve()
       }
     }),
-    acmgRatingStore.fetchAcmgRating(seqvar.value),
     caseStore.loadCase()
   ])
   // Once all data has been loaded, scroll to the given section.

diff --git a/frontend/src/views/__tests__/GeneDetailView.spec.ts b/frontend/src/views/__tests__/GeneDetailView.spec.ts
@@ -196,6 +196,6 @@ describe.concurrent('GeneDetailView', async () => {
 
     const errorMessage = wrapper.findComponent({ name: 'VAlert' })
     expect(errorMessage.exists()).toBe(true)
-    expect(errorMessage.text()).toContain('FetchError: invalid json response body')
+    expect(errorMessage.text()).toContain('Error:')
   })
 })
diff --git a/frontend/src/views/__tests__/SeqvarDetailsView.spec.ts b/frontend/src/views/__tests__/SeqvarDetailsView.spec.ts
@@ -128,7 +128,7 @@ describe.concurrent('SeqvarDetailsView', async () => {
     const menu = wrapper.findComponent(VMenu)
     expect(logo.exists()).toBe(true)
     expect(menu.exists()).toBe(true)
-  })
+  }, 10000)
 
   it('emits update in header', async () => {
     const { wrapper } = await makeWrapper()