fix: Present Clinvar information (#124) (#134)

bihealth · Oct 16, 2023 · 11bfc24 · 11bfc24
1 parent 3251722
commit 11bfc24
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 32 deletions.
diff --git a/frontend/src/components/VariantDetails/ClinVar.vue b/frontend/src/components/VariantDetails/ClinVar.vue
@@ -4,12 +4,12 @@ const props = defineProps({
 })
 
 const interpretations = [
-  'N/A',
-  'Benign',
-  'Likely benign',
-  'Uncertain signifiance',
-  'Likely pathogenic',
-  'Pathogenic'
+  'pathogenic', // 0
+  'likely pathogenic', // 1
+  'uncertain signifiance', // 2
+  'likely benign', // 3
+  'benign', // 4
+  'other'
 ]
 </script>
 
@@ -20,19 +20,15 @@ const interpretations = [
     NCBI ClinVar will display the most current data that may differ from our "frozen" copy.
   </div>
   <v-divider />
-  <div v-if="props.clinvar?.vcv">
+  <div v-if="props.clinvar?.rcv">
     <div>
       <strong>Interpretation: </strong>
-      {{
-        props.clinvar.summary_clinvar_pathogenicity
-          .map((num: any) => interpretations[num])
-          .join(', ')
-      }}
+      {{ interpretations[props.clinvar.clinical_significance] }}
     </div>
     <div>
       <strong>Review Status: </strong>
       <div v-for="i of [1, 2, 3, 4, 5]" :key="i" style="display: inline">
-        <div v-if="i <= props.clinvar.summary_clinvar_gold_stars" style="display: inline">
+        <div v-if="i <= props.clinvar.review_status" style="display: inline">
           <v-icon>mdi-star</v-icon>
         </div>
         <div v-else style="display: inline">
@@ -42,12 +38,9 @@ const interpretations = [
     </div>
     <div>
       <strong>Accession: </strong>
-      <a
-        :href="`https://www.ncbi.nlm.nih.gov/props.clinvar/?term=${props.clinvar.vcv}`"
-        target="_blank"
-      >
+      <a :href="`https://www.ncbi.nlm.nih.gov/clinvar/${props.clinvar.rcv}/`" target="_blank">
         <v-icon>mdi-launch</v-icon>
-        {{ props.clinvar.vcv }}
+        {{ props.clinvar.rcv }}
       </a>
     </div>
   </div>

diff --git a/frontend/src/components/__tests__/VariantDetails/ClinVar.spec.ts b/frontend/src/components/__tests__/VariantDetails/ClinVar.spec.ts
@@ -4,17 +4,15 @@ import ClinVar from '@/components/VariantDetails/ClinVar.vue'
 import { setupMountedComponents } from '@/lib/test-utils'
 
 const clinVarInfo = {
-  release: 'GRCh37',
+  release: 'GRCh38',
   chromosome: '17',
-  start: 41197708,
-  end: 41197708,
-  reference: 'T',
-  alternative: 'G',
-  vcv: 'VCV000041833',
-  summary_clinvar_pathogenicity: [4],
-  summary_clinvar_gold_stars: 0,
-  summary_paranoid_pathogenicity: [4],
-  summary_paranoid_gold_stars: 0
+  start: 43063903,
+  stop: 43063903,
+  reference: 'G',
+  alternative: 'T',
+  rcv: 'RCV003149709',
+  clinical_significance: 0,
+  review_status: 3
 }
 
 describe.concurrent('ClinVar', async () => {
@@ -28,14 +26,14 @@ describe.concurrent('ClinVar', async () => {
       }
     )
     expect(wrapper.text()).toContain('Note that REEV is using a local copy of Clinvar')
-    expect(wrapper.text()).toContain('VCV000041833')
+    expect(wrapper.text()).toContain('RCV003149709')
     const starsOutline = wrapper.findAll('.mdi-star-outline')
-    expect(starsOutline.length).toBe(5)
+    expect(starsOutline.length).toBe(2)
   })
 
   it('renders the ClinVar info with stars', async () => {
     const clinVarInfoStars = structuredClone(clinVarInfo)
-    clinVarInfoStars.summary_clinvar_gold_stars = 3
+    clinVarInfoStars.clinical_significance = 3
     const { wrapper } = setupMountedComponents(
       { component: ClinVar, template: false },
       {
@@ -45,7 +43,7 @@ describe.concurrent('ClinVar', async () => {
       }
     )
     expect(wrapper.text()).toContain('Note that REEV is using a local copy of Clinvar')
-    expect(wrapper.text()).toContain('VCV000041833')
+    expect(wrapper.text()).toContain('RCV003149709')
     const stars = wrapper.findAll('.mdi-star-outline')
     expect(stars.length).toBe(2)
     const starsOutline = wrapper.findAll('.mdi-star-outline')