fix: Non existing variants are not handled gracefully (#109)

frontend/src/components/VariantDetails/VariationLandscape.vue

@@ -46,6 +46,9 @@ const convertClinvarSignificance = (input: number): number => {
 }
 
 const vegaData = computed(() => {
+  if (!props.clinvar) {
+    return []
+  }
   let clinvarInfo = []
   for (const item of props.clinvar.variants ?? []) {
     if (item.genome_release.toLowerCase() == props.genomeRelease) {

frontend/src/lib/utils.ts

@@ -130,7 +130,7 @@ export const search = async (searchTerm: string, genomeRelease: string) => {
       })
     ],
     [
-      /^chr\d+:\d+:[A-Z]+:[A-Z]+$/,
+      /^chr\d+:\d+:[ACGT]{1,50}:[ACGT]{1,50}$/,
       (): RouteLocationFragment => ({
         name: 'variant',
         params: {

frontend/src/stores/__tests__/variantInfo.spec.ts

@@ -101,7 +101,7 @@ describe.concurrent('geneInfo Store', () => {
     expect(store.txCsq).toBe(null)
   })
 
-  it('should fail to load data with invalid fetchVariantInfo response', async () => {
+  it('should handle loading data with invalid fetchVariantInfo response', async () => {
     // Disable error logging
     vi.spyOn(console, 'error').mockImplementation(() => {})
     const store = useVariantInfoStore()
@@ -123,20 +123,29 @@ describe.concurrent('geneInfo Store', () => {
 
     await store.loadData('chr17:43044295:G:A', 'grch37')
 
-    expect(console.error).toHaveBeenCalled()
-    expect(console.error).toHaveBeenCalledWith(
-      'There was an error loading the variant data.',
-      new Error('No variant data found.')
+    expect(store.storeState).toBe(StoreState.Active)
+    expect(store.variantTerm).toBe('chr17:43044295:G:A')
+    expect(store.smallVariant).toStrictEqual({
+      alternative: 'A',
+      chromosome: 'chr17',
+      end: '43044295',
+      hgnc_id: 'HGNC:1100',
+      reference: 'G',
+      release: 'grch37',
+      start: '43044295'
+    })
+    expect(store.varAnnos).toStrictEqual({
+      cadd: null,
+      dbnsfp: null,
+      dbscsnv: null
+    })
+    expect(store.geneInfo).toStrictEqual(
+      JSON.parse(JSON.stringify(BRCA1GeneInfo)).genes['HGNC:1100']
     )
-    expect(store.storeState).toBe(StoreState.Error)
-    expect(store.variantTerm).toBe(null)
-    expect(store.smallVariant).toBe(null)
-    expect(store.varAnnos).toBe(null)
-    expect(store.geneInfo).toBe(null)
-    expect(store.txCsq).toBe(null)
+    expect(store.txCsq).toStrictEqual(JSON.parse(JSON.stringify(BRCA1TxInfo)).result)
   })
 
-  it('should fail to load data with invalid retrieveSeqvarsCsq response', async () => {
+  it('should handle loading data with invalid retrieveSeqvarsCsq response', async () => {
     // Disable error logging
     vi.spyOn(console, 'error').mockImplementation(() => {})
     const store = useVariantInfoStore()
@@ -156,17 +165,21 @@ describe.concurrent('geneInfo Store', () => {
 
     await store.loadData('chr17:43044295:G:A', 'grch37')
 
-    expect(console.error).toHaveBeenCalled()
-    expect(console.error).toHaveBeenCalledWith(
-      'There was an error loading the variant data.',
-      new Error('No transcript consequence data found.')
-    )
-    expect(store.storeState).toBe(StoreState.Error)
-    expect(store.variantTerm).toBe(null)
-    expect(store.smallVariant).toBe(null)
-    expect(store.varAnnos).toBe(null)
-    expect(store.geneInfo).toBe(null)
-    expect(store.txCsq).toBe(null)
+    expect(store.storeState).toBe(StoreState.Active)
+    expect(store.variantTerm).toBe('chr17:43044295:G:A')
+
+    expect(store.smallVariant).toStrictEqual({
+      alternative: 'A',
+      chromosome: 'chr17',
+      end: '43044295',
+      hgnc_id: '',
+      reference: 'G',
+      release: 'grch37',
+      start: '43044295'
+    })
+    expect(store.varAnnos).toStrictEqual(BRCA1VariantInfo.result)
+    expect(store.geneInfo).toEqual(null)
+    expect(store.txCsq).toStrictEqual([])
   })
 
   it('should fail to load data with invalid fetchGeneInfo response', async () => {

frontend/src/stores/variantInfo.ts

@@ -70,6 +70,7 @@ export const useVariantInfoStore = defineStore('variantInfo', () => {
 
       const annonarsClient = new AnnonarsClient()
       const mehariClient = new MehariClient()
+      let hgnc_id = ''
 
       const variantData = await annonarsClient.fetchVariantInfo(
         genomeRelease,
@@ -78,15 +79,7 @@ export const useVariantInfoStore = defineStore('variantInfo', () => {
         reference,
         alternative
       )
-      if (
-        variantData.result.cadd === null &&
-        variantData.result.dbnsfp === null &&
-        variantData.result.dbscsnv === null
-      ) {
-        throw new Error('No variant data found.')
-      } else {
-        varAnnos.value = variantData.result
-      }
+      varAnnos.value = variantData.result
 
       const txCsqData = await mehariClient.retrieveSeqvarsCsq(
         genomeRelease,
@@ -95,25 +88,25 @@ export const useVariantInfoStore = defineStore('variantInfo', () => {
         reference,
         alternative
       )
+
       if (txCsqData.result.length === 0) {
-        throw new Error('No transcript consequence data found.')
+        txCsq.value = txCsqData.result
       } else {
+        hgnc_id = txCsqData.result[0]['gene_id']
+        const geneData = await annonarsClient.fetchGeneInfo(hgnc_id)
+        if (geneData?.genes === null) {
+          throw new Error('No gene data found.')
+        }
+        geneInfo.value = geneData['genes'][hgnc_id]
+
+        const geneClinvarData = await annonarsClient.fetchGeneClinvarInfo(hgnc_id)
+        if (geneClinvarData?.genes === null) {
+          throw new Error('No gene clinvar data found.')
+        }
+        geneClinvar.value = geneClinvarData['genes'][hgnc_id]
         txCsq.value = txCsqData.result
       }
 
-      const hgncId: string = txCsqData.result[0]['gene_id']
-      const geneData = await annonarsClient.fetchGeneInfo(hgncId)
-      if (geneData?.genes === null) {
-        throw new Error('No gene data found.')
-      }
-      geneInfo.value = geneData['genes'][hgncId]
-
-      const geneClinvarData = await annonarsClient.fetchGeneClinvarInfo(hgncId)
-      if (geneClinvarData?.genes === null) {
-        throw new Error('No gene clinvar data found.')
-      }
-      geneClinvar.value = geneClinvarData['genes'][hgncId]
-
       variantTerm.value = variantQuery
       smallVariant.value = {
         release: genomeRelease,
@@ -122,7 +115,7 @@ export const useVariantInfoStore = defineStore('variantInfo', () => {
         end: (Number(pos) + reference.length - 1).toString(),
         reference: reference,
         alternative: alternative,
-        hgnc_id: hgncId
+        hgnc_id: hgnc_id
       }
       storeState.value = StoreState.Active
     } catch (e) {

frontend/src/views/VariantDetailView.vue

@@ -100,7 +100,7 @@ const genomeReleaseRef = ref(props.genomeRelease)
   <v-layout>
     <v-main style="min-height: 300px">
       <div v-if="variantInfoStore.storeState == StoreState.Active" class="variant-info">
-        <div id="gene" class="variant-item">
+        <div v-if="variantInfoStore.geneInfo !== null" id="gene" class="variant-item">
           <h2>Gene</h2>
           <h3>
             Link to
@@ -119,8 +119,16 @@ const genomeReleaseRef = ref(props.genomeRelease)
           <v-divider />
           <VariantDetailsGene :gene="variantInfoStore.geneInfo" />
         </div>
+        <div v-else id="gene" class="variant-item">
+          <h2>Gene</h2>
+          <h3>No gene information available</h3>
+        </div>
 
-        <div id="variation-landscape" class="variant-item">
+        <div
+          v-if="variantInfoStore.geneInfo !== null"
+          id="variation-landscape"
+          class="variant-item"
+        >
           <h2>Gene-wide Variation landscape</h2>
           <v-divider />
           <VariationLandscape
@@ -129,6 +137,10 @@ const genomeReleaseRef = ref(props.genomeRelease)
             :gene-symbol="variantInfoStore.varAnnos?.cadd?.GeneName"
           />
         </div>
+        <div v-else id="variation-landscape" class="variant-item">
+          <h2>Gene-wide Variation landscape</h2>
+          <h3>No gene information available</h3>
+        </div>
 
         <div id="beacon-network" class="variant-item">
           <h2>Beacon Network</h2>
@@ -166,17 +178,29 @@ const genomeReleaseRef = ref(props.genomeRelease)
           <AcmgRating :small-variant="variantInfoStore.smallVariant || undefined" />
         </div>
 
-        <div id="tx-csq" class="variant-item">
+        <div v-if="variantInfoStore.txCsq?.length !== 0" id="tx-csq" class="variant-item">
           <h2>Consequences</h2>
           <v-divider />
           <VariantDetailsTxCsq :tx-csq="variantInfoStore.txCsq" />
         </div>
+        <div v-else id="tx-csq" class="variant-item">
+          <h2>Consequences</h2>
+          <h3>No consequence information available</h3>
+        </div>
 
-        <div id="conservation" class="variant-item">
+        <div
+          v-if="variantInfoStore.varAnnos?.ucsc_conservation?.length !== 0"
+          id="conservation"
+          class="variant-item"
+        >
           <h2>Conservation</h2>
           <v-divider />
           <VariantDetailsConservation :var-annos="variantInfoStore.varAnnos" />
         </div>
+        <div v-else id="conservation" class="variant-item">
+          <h2>Conservation</h2>
+          <h3>No conservation information available</h3>
+        </div>
 
         <div id="variant-validator" class="variant-item">
           <h2>Variant Validator</h2>

frontend/vitest.config.ts

@@ -9,8 +9,10 @@ export default mergeConfig(
   defineConfig({
     test: {
       setupFiles: ['./src/vitest.setup.ts'],
-      deps: {
-        inline: ['vuetify', 'vitest-canvas-mock']
+      server: {
+        deps: {
+          inline: ['vuetify', 'vitest-canvas-mock']
+        }
       },
       coverage: {
         provider: 'istanbul'