From c6b72f8016a7afc86c2749b185cf37ae3f80d7e8 Mon Sep 17 00:00:00 2001
From: gromdimon <grom.dima.grom@gmail.com>
Date: Wed, 4 Oct 2023 12:57:12 +0200
Subject: [PATCH] feat: Retrieval of affected genes in SV from mehari

---
 frontend/src/api/__tests__/mehari.spec.ts     |  13 +-
 frontend/src/api/mehari.ts                    |  18 +-
 .../components/SvDetails/SvDetailsClinvar.vue |   1 +
 frontend/src/components/SvDetails/SvGenes.vue | 193 ++++++------------
 frontend/src/main.ts                          |   8 +-
 .../src/stores/__tests__/variantInfo.spec.ts  |   2 +-
 frontend/src/stores/svInfo.ts                 |  38 ++--
 frontend/src/stores/variantInfo.ts            |   2 +-
 frontend/src/views/SvDetailView.vue           |  14 +-
 9 files changed, 133 insertions(+), 156 deletions(-)

diff --git a/frontend/src/api/__tests__/mehari.spec.ts b/frontend/src/api/__tests__/mehari.spec.ts
index c54ba8a2..71e37c3f 100644
--- a/frontend/src/api/__tests__/mehari.spec.ts
+++ b/frontend/src/api/__tests__/mehari.spec.ts
@@ -16,7 +16,14 @@ describe.concurrent('Mehari Client', () => {
     fetchMocker.mockResponseOnce(JSON.stringify(BRCA1TxInfo))
 
     const client = new MehariClient()
-    const result = await client.retrieveTxCsq('grch37', 'chr17', 43044295, 'A', 'G', 'HGNC:1100')
+    const result = await client.retrieveSeqvarsCsq(
+      'grch37',
+      'chr17',
+      43044295,
+      'A',
+      'G',
+      'HGNC:1100'
+    )
     expect(JSON.stringify(result)).toEqual(JSON.stringify(BRCA1TxInfo))
   })
 
@@ -24,7 +31,7 @@ describe.concurrent('Mehari Client', () => {
     fetchMocker.mockResponseOnce(JSON.stringify(BRCA1TxInfo))
 
     const client = new MehariClient()
-    const result = await client.retrieveTxCsq('grch37', 'chr17', 43044295, 'A', 'G')
+    const result = await client.retrieveSeqvarsCsq('grch37', 'chr17', 43044295, 'A', 'G')
     expect(JSON.stringify(result)).toEqual(JSON.stringify(BRCA1TxInfo))
   })
 
@@ -37,7 +44,7 @@ describe.concurrent('Mehari Client', () => {
     })
 
     const client = new MehariClient()
-    const result = await client.retrieveTxCsq('grch37', 'chr17', 43044295, 'A', 'T')
+    const result = await client.retrieveSeqvarsCsq('grch37', 'chr17', 43044295, 'A', 'T')
     expect(JSON.stringify(result)).toEqual(JSON.stringify({ status: 400 }))
   })
 })
diff --git a/frontend/src/api/mehari.ts b/frontend/src/api/mehari.ts
index 3bb6a04a..349086d8 100644
--- a/frontend/src/api/mehari.ts
+++ b/frontend/src/api/mehari.ts
@@ -11,7 +11,7 @@ export class MehariClient {
     this.csrfToken = csrfToken ?? null
   }
 
-  async retrieveTxCsq(
+  async retrieveSeqvarsCsq(
     genomeRelease: string,
     chromosome: string,
     pos: number,
@@ -30,4 +30,20 @@ export class MehariClient {
     })
     return await response.json()
   }
+
+  async retrieveStrucvarsCsq(
+    genomeRelease: string,
+    chromosome: string,
+    start: number,
+    stop: number,
+    sv_type: string
+  ): Promise<any> {
+    const url =
+      `${this.apiBaseUrl}strucvars/csq?genome_release=${genomeRelease}&` +
+      `chromosome=${chromosome}&start=${start}&stop=${stop}&sv_type=${sv_type}`
+    const response = await fetch(url, {
+      method: 'GET'
+    })
+    return await response.json()
+  }
 }
diff --git a/frontend/src/components/SvDetails/SvDetailsClinvar.vue b/frontend/src/components/SvDetails/SvDetailsClinvar.vue
index b9a0c111..895dba4b 100644
--- a/frontend/src/components/SvDetails/SvDetailsClinvar.vue
+++ b/frontend/src/components/SvDetails/SvDetailsClinvar.vue
@@ -11,6 +11,7 @@ const vcvUrl = (vcv: string): string => {
 
 <template>
   <div>
+    {{ svInfoStore.currentSvRecord }}
     <template v-if="svInfoStore.currentSvRecord?.payload?.clinvar_ovl_vcvs?.length">
       <p>The following overlapping SVs are flagged as (likely) pathogenic in ClinVar.</p>
 
diff --git a/frontend/src/components/SvDetails/SvGenes.vue b/frontend/src/components/SvDetails/SvGenes.vue
index 8294d760..54a0a050 100644
--- a/frontend/src/components/SvDetails/SvGenes.vue
+++ b/frontend/src/components/SvDetails/SvGenes.vue
@@ -1,12 +1,8 @@
 <script setup lang="ts">
 import { type ComputedRef, type Ref, computed, ref } from 'vue'
-import EasyDataTable from 'vue3-easy-data-table'
-import type { ClickRowArgument, Header } from 'vue3-easy-data-table'
-import 'vue3-easy-data-table/dist/style.css'
 
 import VariantDetailsGene from '@/components/VariantDetails/VariantGene.vue'
 import { roundIt } from '@/lib/utils'
-import { useSvInfoStore } from '@/stores/svInfo'
 
 /** `GeneInfo` is a type alias for easier future interface definition. */
 type GeneInfo = any
@@ -16,136 +12,77 @@ const props = defineProps<{
 }>()
 
 const currentGeneInfos: Ref<any> = ref(null)
+const itemsPerPage = ref(10)
 
-const headers: Header[] = [
+const headers = [
   {
-    text: 'symbol',
-    value: 'dbnsfp.gene_name',
+    title: 'symbol',
+    key: 'dbnsfp.gene_name',
     width: 150,
     sortable: true
   },
   {
-    text: 'name',
-    value: 'dbnsfp.gene_full_name',
+    title: 'name',
+    key: 'dbnsfp.gene_full_name',
     width: 200
   },
   {
-    text: 'OMIM',
-    value: 'omim',
+    title: 'OMIM',
+    key: 'omim',
     sortable: true
   },
   {
-    text: 'Orphanet',
-    value: 'orpha',
+    title: 'Orphanet',
+    key: 'orpha',
     sortable: true
   },
   {
-    text: 'pLI',
-    value: 'gnomad_constraints.pli',
+    title: 'pLI',
+    key: 'gnomad_constraints.pli',
     width: 50,
     sortable: true
   },
   {
-    text: 'o/e LoF (upper)',
-    value: 'gnomad_constraints.oe_lof_upper',
+    title: 'o/e LoF (upper)',
+    key: 'gnomad_constraints.oe_lof_upper',
     width: 100,
     sortable: true
   },
   {
-    text: 'P(HI)',
+    title: 'P(HI)',
     width: 50,
-    value: 'dbnsfp.haploinsufficiency'
+    key: 'dbnsfp.haploinsufficiency'
   },
   {
-    text: 'sHet',
+    title: 'sHet',
     width: 100,
-    value: 'shet.s_het',
+    key: 'shet.s_het',
     sortable: true
   },
   {
-    text: 'pHaplo',
+    title: 'pHaplo',
     width: 100,
-    value: 'rcnv.p_haplo',
+    key: 'rcnv.p_haplo',
     sortable: true
   },
   {
-    text: 'pTriplo',
+    title: 'pTriplo',
     width: 100,
-    value: 'rcnv.p_triplo',
+    key: 'rcnv.p_triplo',
     sortable: true
   },
   {
-    text: 'CG haploin.',
+    title: 'CG haploin.',
     width: 100,
-    value: 'clingen.haplo_summary'
+    key: 'clingen.haplo_summary'
   },
   {
-    text: 'CG triploin.',
+    title: 'CG triploin.',
     width: 100,
-    value: 'clingen.triplo_summary'
+    key: 'clingen.triplo_summary'
   }
 ]
 
-/** The SV details store. */
-const svInfoStore = useSvInfoStore()
-
-/** Helper type for `resultsInfos`. */
-type ResultsInfo = {
-  isDiseaseGene: boolean
-  txEffect?: string
-}
-
-/**
- * Compute mapping from HGNC gene ID to transcript effect and disease gene property
- * so we can display the same information as in the SV results table.
- */
-const resultsInfos: ComputedRef<Map<string, ResultsInfo>> = computed(() => {
-  const result = new Map()
-  for (const txEffect of svInfoStore.currentSvRecord?.payload?.tx_effects ?? []) {
-    const value: ResultsInfo = {
-      isDiseaseGene: txEffect.gene.is_disease_gene,
-      txEffect: txEffect.transcript_effects[0]
-    }
-    result.set(txEffect.gene.hgnc_id, value)
-  }
-  return result
-})
-
-/** Compute geneInfo's class. */
-const geneInfoClass = (geneInfo: any): string | null => {
-  let resultsInfo = resultsInfos.value.get(geneInfo.hgnc.hgnc_id)
-  if (resultsInfo?.isDiseaseGene) {
-    return 'text-danger'
-  } else {
-    return null
-  }
-}
-
-/** Compute geneInfo's badge HTML (if any). */
-const geneInfoBadge = (geneInfo: any): string | null => {
-  const badge = (color: string, title: string, text: string): string => {
-    return `<span class="badge badge-${color}" title="${title}">${text}</span>&nbsp;`
-  }
-
-  let resultsInfo = resultsInfos.value.get(geneInfo.hgnc.hgnc_id)
-  switch (resultsInfo?.txEffect) {
-    case 'transcript_variant':
-      return badge('danger', 'whole transcript is affected', 'tx')
-    case 'exon_variant':
-      return badge('danger', 'exonic for gene', 'ex')
-    case 'splice_region_variant':
-      return badge('danger', 'affects splice region for gene', 'sr')
-    case 'intron_variant':
-      return badge('warning', 'intronic for gene', 'in')
-    case 'upstream_variant':
-      return badge('secondary', 'upstream of gene', 'up')
-    case 'downstream_variant':
-      return badge('secondary', 'downstream of gene gene', 'dw')
-    default:
-      return ''
-  }
-}
-
 /** Compute list of gene infos to protect against empty `props.genesInfos`. */
 const items: ComputedRef<GeneInfo[]> = computed(() => {
   if (props.genesInfos) {
@@ -188,7 +125,8 @@ const items: ComputedRef<GeneInfo[]> = computed(() => {
   }
 })
 
-const onRowClicked = (item: ClickRowArgument) => {
+/** Show gene info on click. */
+const onRowClicked = (event: Event, { item }: { item: GeneInfo }): void => {
   currentGeneInfos.value = item
 }
 </script>
@@ -196,24 +134,19 @@ const onRowClicked = (item: ClickRowArgument) => {
 <template>
   <div>
     <div>
-      <EasyDataTable
+      <v-data-table
+        v-model:items-per-page="itemsPerPage"
         :headers="headers"
         :items="items"
         :loading="!items"
         buttons-pagination
         show-index
-        @click-row="onRowClicked"
+        item-key="gene_name"
+        @click:row="onRowClicked"
       >
-        <template v-slot:[`item-dbnsfp.gene_name`]="geneInfo">
-          <span v-html="geneInfoBadge(geneInfo)" />
-          <span :class="geneInfoClass(geneInfo)">
-            {{ geneInfo.dbnsfp?.gene_name }}
-          </span>
-        </template>
-
-        <template v-slot:[`item-omim`]="{ omim }">
-          <template v-if="omim?.omim_diseases?.length">
-            <template v-for="(disease, idx) in omim?.omim_diseases" :key="idx">
+        <template v-slot:[`item.omim`]="{ value }">
+          <template v-if="value?.omim_diseases?.length">
+            <template v-for="(disease, idx) in value?.omim_diseases" :key="idx">
               <template v-if="idx > 0">, </template>
               <a
                 :href="`https://www.omim.org/entry/${disease.omim_id.replace('OMIM:', '')}`"
@@ -226,9 +159,9 @@ const onRowClicked = (item: ClickRowArgument) => {
           <template v-else> &mdash; </template>
         </template>
 
-        <template v-slot:[`item-orpha`]="{ orpha }">
-          <template v-if="orpha?.orpha_diseases?.length">
-            <template v-for="(disease, idx) in orpha?.orpha_diseases" :key="idx">
+        <template v-slot:[`item.orpha`]="{ value }">
+          <template v-if="value?.orpha_diseases?.length">
+            <template v-for="(disease, idx) in value?.orpha_diseases" :key="idx">
               <template v-if="idx > 0">, </template>
               <a
                 :href="`https://www.orpha.net/consor/cgi-bin/OC_Exp.php?Expert=${disease.orpha_id.replace(
@@ -244,62 +177,62 @@ const onRowClicked = (item: ClickRowArgument) => {
           <template v-else> &mdash; </template>
         </template>
 
-        <template v-slot:[`item-gnomad_constraints.pli`]="{ gnomad_constraints }">
-          <template v-if="gnomad_constraints">
-            <span v-html="roundIt(gnomad_constraints.pli, 3)" />
+        <template v-slot:[`item.gnomad_constraints.pli`]="{ value }">
+          <template v-if="value">
+            <span v-html="roundIt(value, 3)" />
           </template>
           <template v-else> &mdash; </template>
         </template>
 
-        <template v-slot:[`item-gnomad_constraints.oe_lof_upper`]="{ gnomad_constraints }">
-          <template v-if="gnomad_constraints">
-            <span v-html="roundIt(gnomad_constraints.oe_lof_upper, 3)" />
+        <template v-slot:[`item.gnomad_constraints.oe_lof_upper`]="{ value }">
+          <template v-if="value">
+            <span v-html="roundIt(value, 3)" />
           </template>
           <template v-else> &mdash; </template>
         </template>
 
-        <template v-slot:[`item-dbnsfp.haploinsufficiency`]="{ dbnsfp }">
-          <template v-if="dbnsfp?.haploinsufficiency">
-            <span v-html="roundIt(dbnsfp.haploinsufficiency, 3)" />
+        <template v-slot:[`item.dbnsfp.haploinsufficiency`]="{ value }">
+          <template v-if="value">
+            <span v-html="roundIt(value, 3)" />
           </template>
           <template v-else> &mdash; </template>
         </template>
 
-        <template v-slot:[`item-shet.s_het`]="{ shet }">
-          <template v-if="shet?.s_het">
-            <span v-html="roundIt(shet.s_het, 3)" />
+        <template v-slot:[`item.shet.s_het`]="{ value }">
+          <template v-if="value">
+            <span v-html="roundIt(value, 3)" />
           </template>
           <template v-else> &mdash; </template>
         </template>
 
-        <template v-slot:[`item-rcnv.p_haplo`]="{ rcnv }">
-          <template v-if="rcnv?.p_haplo">
-            <span v-html="roundIt(rcnv.p_haplo, 3)" />
+        <template v-slot:[`item.rcnv.p_haplo`]="{ value }">
+          <template v-if="value">
+            <span v-html="roundIt(value, 3)"></span>
           </template>
           <template v-else> &mdash; </template>
         </template>
 
-        <template v-slot:[`item-rcnv.p_triplo`]="{ rcnv }">
-          <template v-if="rcnv?.p_triplo">
-            <span v-html="roundIt(rcnv.p_triplo, 3)" />
+        <template v-slot:[`item.rcnv.p_triplo`]="{ value }">
+          <template v-if="value">
+            <span v-html="roundIt(value, 3)" />
           </template>
           <template v-else> &mdash; </template>
         </template>
 
-        <template v-slot:[`item-clingen.haplo_summary`]="{ clingen }">
-          <template v-if="clingen?.haplo_summary">
-            <abbr :title="clingen.haplo_label">{{ clingen.haplo_summary }}</abbr>
+        <template v-slot:[`item.clingen.haplo_summary`]="{ value }">
+          <template v-if="value">
+            <abbr :title="value">{{ value }}</abbr>
           </template>
           <template v-else> &mdash; </template>
         </template>
 
-        <template v-slot:[`item-clingen.triplo_summary`]="{ clingen }">
-          <template v-if="clingen?.triplo_summary">
-            <abbr :title="clingen.triplo_label">{{ clingen.triplo_summary }}</abbr>
+        <template v-slot:[`item.clingen.triplo_summary`]="{ value }">
+          <template v-if="value">
+            <abbr :title="value">{{ value }}</abbr>
           </template>
           <template v-else> &mdash; </template>
         </template>
-      </EasyDataTable>
+      </v-data-table>
     </div>
 
     <div v-if="currentGeneInfos">
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index dbf5711f..93a5104b 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -5,6 +5,7 @@ import { createVuetify } from 'vuetify'
 import { md3 } from 'vuetify/blueprints'
 import * as components from 'vuetify/components'
 import * as directives from 'vuetify/directives'
+import { VDataTable, VDataTableServer, VDataTableVirtual } from 'vuetify/labs/components'
 import 'vuetify/styles'
 
 import App from '@/App.vue'
@@ -32,7 +33,12 @@ const LightTheme = {
 
 const vuetify = createVuetify({
   blueprint: md3,
-  components,
+  components: {
+    ...components,
+    VDataTable,
+    VDataTableServer,
+    VDataTableVirtual
+  },
   directives,
   theme: {
     defaultTheme: 'LightTheme',
diff --git a/frontend/src/stores/__tests__/variantInfo.spec.ts b/frontend/src/stores/__tests__/variantInfo.spec.ts
index 1a08670a..63da8ce1 100644
--- a/frontend/src/stores/__tests__/variantInfo.spec.ts
+++ b/frontend/src/stores/__tests__/variantInfo.spec.ts
@@ -136,7 +136,7 @@ describe.concurrent('geneInfo Store', () => {
     expect(store.txCsq).toBe(null)
   })
 
-  it('should fail to load data with invalid retrieveTxCsq response', async () => {
+  it('should fail to load data with invalid retrieveSeqvarsCsq response', async () => {
     // Disable error logging
     vi.spyOn(console, 'error').mockImplementation(() => {})
     const store = useVariantInfoStore()
diff --git a/frontend/src/stores/svInfo.ts b/frontend/src/stores/svInfo.ts
index 092d65b4..55ff906a 100644
--- a/frontend/src/stores/svInfo.ts
+++ b/frontend/src/stores/svInfo.ts
@@ -7,6 +7,7 @@ import { defineStore } from 'pinia'
 import { ref } from 'vue'
 
 import { AnnonarsClient } from '@/api/annonars'
+import { MehariClient } from '@/api/mehari'
 import { infoFromSvQuery } from '@/lib/utils'
 import { StoreState } from '@/stores/misc'
 
@@ -48,28 +49,37 @@ export const useSvInfoStore = defineStore('svInfo', () => {
     storeState.value = StoreState.Loading
     try {
       const { sv_type, chromosome, start, end } = infoFromSvQuery(variantQuery)
-      // Fetch new details
       const annonarsClient = new AnnonarsClient()
-      const hgncIds = []
-      hgncIds.push('HGNC:1100')
-      hgncIds.push('HGNC:1101')
-      hgncIds.push('HGNC:1102')
-      // for (const txEffect of svRecord.payload.tx_effects) {
-      //   if (txEffect.gene.hgnc_id) {
-      //     hgncIds.push(txEffect.gene.hgnc_id)
-      //   }
-      // }
-      if (hgncIds.length) {
-        genesInfos.value = await annonarsClient.fetchGeneInfos(hgncIds)
-      }
+      const mehariClient = new MehariClient()
 
+      // Fetch SV record
+      const svRecord = await mehariClient.retrieveStrucvarsCsq(
+        genomeRelease,
+        chromosome,
+        start,
+        end,
+        sv_type
+      )
       currentSvRecord.value = {
         sv_type: sv_type,
         chromosome: chromosome,
         start: start,
         end: end,
-        release: genomeRelease
+        release: genomeRelease,
+        result: svRecord.result
       }
+
+      // Fetch gene infos
+      const hgncIds = []
+      for (const txEffect of svRecord.result) {
+        if (txEffect.hgnc_id) {
+          hgncIds.push(txEffect.hgnc_id)
+        }
+      }
+      if (hgncIds.length) {
+        genesInfos.value = await annonarsClient.fetchGeneInfos(hgncIds)
+      }
+
       storeState.value = StoreState.Active
       svTerm.value = variantQuery
     } catch (e) {
diff --git a/frontend/src/stores/variantInfo.ts b/frontend/src/stores/variantInfo.ts
index 3f6ef642..e860c0db 100644
--- a/frontend/src/stores/variantInfo.ts
+++ b/frontend/src/stores/variantInfo.ts
@@ -88,7 +88,7 @@ export const useVariantInfoStore = defineStore('variantInfo', () => {
         varAnnos.value = variantData.result
       }
 
-      const txCsqData = await mehariClient.retrieveTxCsq(
+      const txCsqData = await mehariClient.retrieveSeqvarsCsq(
         genomeRelease,
         chromosome,
         pos,
diff --git a/frontend/src/views/SvDetailView.vue b/frontend/src/views/SvDetailView.vue
index 230c1abd..69d3dfa7 100644
--- a/frontend/src/views/SvDetailView.vue
+++ b/frontend/src/views/SvDetailView.vue
@@ -114,11 +114,13 @@ const genomeReleaseRef = ref(props.genomeRelease)
           <v-divider />
           <SvDetailsGenes :genes-infos="svInfoStore.genesInfos" />
         </div>
+
         <div id="clinvar" class="sv-item">
           <h2>ClinVar</h2>
           <v-divider />
           <SvDetailsClinvar />
         </div>
+
         <div id="call-details" class="sv-item">
           <h2>Genotype Call</h2>
           <v-divider />
@@ -126,11 +128,7 @@ const genomeReleaseRef = ref(props.genomeRelease)
           <code> {{ svLocus(svInfoStore.currentSvRecord) }} </code>
           <SvDetailsGenotypeCall :current-sv-record="svInfoStore.currentSvRecord" />
         </div>
-        <div id="acmg" class="sv-item">
-          <h2>ACMG</h2>
-          <v-divider />
-          <!-- <CNVAcmgRating /> -->
-        </div>
+
         <div id="genome-browser" class="sv-item">
           <h2>Genome Browser</h2>
           <v-divider />
@@ -139,6 +137,12 @@ const genomeReleaseRef = ref(props.genomeRelease)
             :locus="svLocus(svInfoStore.currentSvRecord) as string"
           />
         </div>
+
+        <div id="acmg" class="sv-item">
+          <h2>ACMG</h2>
+          <v-divider />
+          <!-- <CNVAcmgRating /> -->
+        </div>
       </div>
 
       <div v-else>