From 6c83a00c24ed606cc6a93d80811e37fc3727f58b Mon Sep 17 00:00:00 2001
From: Manuel Holtgrewe <manuel.holtgrewe@bih-charite.de>
Date: Wed, 13 Sep 2023 14:40:13 +0200
Subject: [PATCH] feat: display ClinVar and GTEx values for each gene (#672,
 #68) (#1129)

---
 varfish/vueapp/src/varfish/api/annonars.ts    |  45 ++++
 .../src/varfish/components/VegaPlot.vue       |  13 +-
 .../vueapp/src/components/VariantDetails.vue  |   1 +
 .../src/components/VariantDetails/Clinvar.vue |  47 ++---
 .../VariantDetails/ClinvarFreqPlot.vue        | 137 +++++++++++++
 .../src/components/VariantDetails/Gene.vue    | 154 +++++++++++++-
 .../VariantDetails/GtexGenePlot.vue           | 192 ++++++++++++++++++
 variants/vueapp/src/stores/variantDetails.ts  |   8 +
 8 files changed, 560 insertions(+), 37 deletions(-)
 create mode 100644 variants/vueapp/src/components/VariantDetails/ClinvarFreqPlot.vue
 create mode 100644 variants/vueapp/src/components/VariantDetails/GtexGenePlot.vue

diff --git a/varfish/vueapp/src/varfish/api/annonars.ts b/varfish/vueapp/src/varfish/api/annonars.ts
index 0421b487b..0fba7da21 100644
--- a/varfish/vueapp/src/varfish/api/annonars.ts
+++ b/varfish/vueapp/src/varfish/api/annonars.ts
@@ -59,6 +59,51 @@ export class AnnonarsApiClient {
     return result
   }
 
+  /**
+   * Retrieve clinvar-gene information via annonars REST API.
+   *
+   * @param hgncIds Array of HGNC IDs to use, e.g., `["HGNC:26467"]`.
+   * @param chunkSize How many IDs to send in one request.
+   * @returns Promise with an array of gene information objects.
+   */
+  async retrieveGeneClinvarInfos(
+    hgncIds: Array<string>,
+    chunkSize?: number,
+  ): Promise<Array<any>> {
+    const hgncIdChunks = chunks(hgncIds, chunkSize ?? this.defaultChunkSize)
+
+    const promises = hgncIdChunks.map((chunk) => {
+      const url = `${this.baseUrl}/genes/clinvar?hgnc_id=${chunk.join(',')}`
+
+      const headers = {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+      }
+      if (this.csrfToken) {
+        headers['X-CSRFToken'] = this.csrfToken
+      }
+
+      return fetch(url, {
+        method: 'GET',
+        credentials: 'same-origin',
+        headers,
+      })
+    })
+
+    const responses = await Promise.all(promises)
+    const results = await Promise.all(
+      responses.map((response) => response.json()),
+    )
+
+    const result = []
+    results.forEach((chunk) => {
+      for (const value of Object.values(chunk.genes)) {
+        result.push(value)
+      }
+    })
+    return result
+  }
+
   /**
    * Retrieve variant information via annonars REST API.
    */
diff --git a/varfish/vueapp/src/varfish/components/VegaPlot.vue b/varfish/vueapp/src/varfish/components/VegaPlot.vue
index 4ada4fb1f..9e1be07b4 100644
--- a/varfish/vueapp/src/varfish/components/VegaPlot.vue
+++ b/varfish/vueapp/src/varfish/components/VegaPlot.vue
@@ -20,6 +20,7 @@ const props = defineProps({
   },
   encoding: Object,
   params: Object,
+  layer: Object,
   width: {
     type: [Number, String],
     default: 300,
@@ -29,7 +30,7 @@ const props = defineProps({
     default: 300,
   },
   mark: {
-    type: Object,
+    type: [Boolean, Object],
     default: { type: 'bar' },
   },
   renderer: {
@@ -46,7 +47,7 @@ const vegaViewRef = ref(null)
 
 /** The vega specification. */
 const vegaLiteSpec = computed(() => {
-  return {
+  const res = {
     $schema: 'https://vega.github.io/schema/vega-lite/v5.json',
     width: props.width,
     height: props.height,
@@ -56,10 +57,16 @@ const vegaLiteSpec = computed(() => {
       values: props.dataValues,
       name: props.dataName,
     },
-    mark: props.mark,
     encoding: props.encoding,
     transform: props.transform,
   }
+  if (props.mark !== undefined && props.mark !== null && props.mark !== false) {
+    res.mark = props.mark
+  }
+  if (props.layer !== undefined && props.layer !== null) {
+    res.layer = props.layer
+  }
+  return res
 })
 
 /** Make component reactive to props.data changes. */
diff --git a/variants/vueapp/src/components/VariantDetails.vue b/variants/vueapp/src/components/VariantDetails.vue
index ab8922693..2c672ac9b 100644
--- a/variants/vueapp/src/components/VariantDetails.vue
+++ b/variants/vueapp/src/components/VariantDetails.vue
@@ -188,6 +188,7 @@ onMounted(() => {
             <SimpleCard id="gene" title="Gene">
               <VariantDetailsGene
                 :gene="variantDetailsStore.gene"
+                :geneClinvar="variantDetailsStore.geneClinvar"
                 :small-var="variantDetailsStore.smallVariant"
                 :hgmd-pro-enabled="queryStore.hgmdProEnabled"
                 :hgmd-pro-prefix="queryStore.hgmdProPrefix"
diff --git a/variants/vueapp/src/components/VariantDetails/Clinvar.vue b/variants/vueapp/src/components/VariantDetails/Clinvar.vue
index ec048043f..b5f15d614 100644
--- a/variants/vueapp/src/components/VariantDetails/Clinvar.vue
+++ b/variants/vueapp/src/components/VariantDetails/Clinvar.vue
@@ -6,22 +6,26 @@ import { useVariantDetailsStore } from '@variants/stores/variantDetails'
 const variantDetailsStore = useVariantDetailsStore()
 const clinvar = computed(() => variantDetailsStore?.varAnnos?.clinvar)
 
-const interpretations = [
-  'N/A',
-  'Benign',
-  'Likely benign',
-  'Uncertain signifiance',
-  'Likely pathogenic',
-  'Pathogenic',
+const clinicalSignificanceLabel = [
+  'pathogenic', // 0
+  'likely pathogenic', // 1
+  'uncertain signifiance', // 2
+  'likely benign', // 3
+  'benign', // 4
+  'other',
 ]
 
-const reviewStatus = (goldStars: number): string => {
-  const res = []
-  for (let i = 1; i <= 5; i++) {
-    res.push()
-  }
-  return res.join('')
-}
+const reviewStatusLabel = [
+  'no assertion provided', // 0
+  'no assertion criteria provided', // 1
+  'criteria provided, conflicting interpretations', // 2
+  'criteria provided, single submitter', // 3
+  'criteria provided, multiple submitters, no conflicts', // 4
+  'reviewed by expert panel', // 5
+  'practice guideline', // 6
+]
+
+const reviewStatusStars = [0, 0, 0, 1, 2, 3, 4]
 </script>
 
 <template>
@@ -32,30 +36,27 @@ const reviewStatus = (goldStars: number): string => {
       information. The link-outs to NCBI ClinVar will display the most current
       data that may differ from our "frozen" copy.
     </div>
-    <div v-if="clinvar?.vcv">
+    <div v-if="clinvar?.rcv">
       <div>
         <strong>Interpretation: </strong>
-        {{
-          clinvar.summary_clinvar_pathogenicity
-            .map((num) => interpretations[num])
-            .join(', ')
-        }}
+        {{ clinicalSignificanceLabel[clinvar.clinical_significance] }}
       </div>
       <div>
         <strong>Review Status: </strong>
         <template v-for="i of [1, 2, 3, 4, 5]">
-          <i-mdi-star v-if="i <= clinvar.summary_clinvar_gold_stars" />
+          <i-mdi-star v-if="i <= reviewStatusStars[clinvar.review_status]" />
           <i-mdi-star-outline v-else />
         </template>
+        {{ reviewStatusLabel[clinvar.review_status] }}
       </div>
       <div>
         <strong>Accession: </strong>
         <a
-          :href="`https://www.ncbi.nlm.nih.gov/clinvar/?term=${clinvar.vcv}`"
+          :href="`https://www.ncbi.nlm.nih.gov/clinvar/${clinvar.rcv}/`"
           target="_blank"
         >
           <i-mdi-launch />
-          {{ clinvar.vcv }}
+          {{ clinvar.rcv }}
         </a>
       </div>
     </div>
diff --git a/variants/vueapp/src/components/VariantDetails/ClinvarFreqPlot.vue b/variants/vueapp/src/components/VariantDetails/ClinvarFreqPlot.vue
new file mode 100644
index 000000000..4889b260b
--- /dev/null
+++ b/variants/vueapp/src/components/VariantDetails/ClinvarFreqPlot.vue
@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import * as vega from 'vega'
+import { computed, ref } from 'vue'
+
+import VegaPlot from '@varfish/components/VegaPlot.vue'
+
+const coarseClinsigLabels = ['benign', 'uncertain', 'pathogenic']
+
+const bucketLabels = [
+  'no frequency',
+  '<0.00001',
+  '<0.00025',
+  '<0.0005',
+  '<0.0001',
+  '<0.00025',
+  '<0.0005',
+  '<0.001',
+  '<0.0025',
+  '<0.005',
+  '<0.01',
+  '<0.025',
+  '<0.05',
+  '<0.1',
+  '<0.25',
+  '<0.5',
+  '<1.0',
+]
+
+export interface CountsRecord {
+  /** Coarse clinical significance ID */
+  coarse_clinsig: number
+  /** Counts per bucket */
+  counts: number[]
+}
+
+export interface Props {
+  /** Gene symbol */
+  geneSymbol: string
+  /** Expression records */
+  perFreqCounts: CountsRecord[]
+}
+
+const props = withDefaults(defineProps<Props>(), {})
+
+const vegaData = computed(() => {
+  const values = []
+  for (const record of props?.perFreqCounts || []) {
+    for (let i = 0; i < record.counts.length; i++) {
+      if (record.counts[i] > 0) {
+        values.push({
+          coarseClinsig: coarseClinsigLabels[record.coarse_clinsig],
+          coarseClinsigNo: record.coarse_clinsig,
+          freqBucket: bucketLabels[i],
+          freqBucketNo: i,
+          value: record.counts[i],
+        })
+      }
+    }
+  }
+  if (values.length) {
+    return values
+  } else {
+    return null
+  }
+})
+
+const vegaLayer = [
+  {
+    mark: { type: 'bar', tooltip: true },
+  },
+  {
+    mark: {
+      type: 'text',
+      align: 'center',
+      baseline: 'middle',
+      dy: -10,
+    },
+    encoding: {
+      text: { field: 'value', type: 'quantitative', fontSize: 8 },
+    },
+  },
+]
+
+const vegaEncoding = {
+  x: {
+    field: 'freqBucket',
+    title: 'population frequency',
+    type: 'nominal',
+    sort: bucketLabels,
+    axis: { labelAngle: 45 },
+  },
+  y: {
+    field: 'value',
+    scale: { type: 'log' },
+    title: 'variant count',
+    axis: {
+      grid: false,
+      tickExtra: false,
+    },
+  },
+  xOffset: {
+    field: 'coarseClinsig',
+    type: 'nominal',
+    sort: coarseClinsigLabels,
+  },
+  color: {
+    field: 'coarseClinsig',
+    title: 'clinical sig.',
+    type: 'nominal',
+    sort: coarseClinsigLabels,
+    scale: {
+      domain: coarseClinsigLabels,
+      range: ['#5d9936', '#f5c964', '#b05454'],
+    },
+  },
+}
+
+/** Ref to the VegaPlot (for testing). */
+const vegaPlotRef = ref(null)
+</script>
+
+<template>
+  <figure class="figure border rounded pl-2 pt-2 mr-3 w-100 col">
+    <figcaption class="figure-caption text-center">
+      Population frequency of ClinVar variants
+    </figcaption>
+    <VegaPlot
+      :data-values="vegaData"
+      :encoding="vegaEncoding"
+      :mark="false"
+      :layer="vegaLayer"
+      :width="800"
+      :height="300"
+      renderer="svg"
+    />
+  </figure>
+</template>
diff --git a/variants/vueapp/src/components/VariantDetails/Gene.vue b/variants/vueapp/src/components/VariantDetails/Gene.vue
index 305e649ce..e06603d94 100644
--- a/variants/vueapp/src/components/VariantDetails/Gene.vue
+++ b/variants/vueapp/src/components/VariantDetails/Gene.vue
@@ -7,12 +7,16 @@
 import { computed } from 'vue'
 
 import { stopWords } from '@variants/components/Gene.fields'
+import GtexGenePlot from '@variants/components/VariantDetails/GtexGenePlot.vue'
+import ClinvarFreqPlot from '@variants/components/VariantDetails/ClinvarFreqPlot.vue'
 import { useVariantQueryStore } from '@variants/stores/variantQuery'
 import { roundIt } from '@varfish/moreUtils'
 
 export interface Props {
   /** Gene information from annonars. */
   gene: any
+  /** Clinvar-Gene information from annonars. */
+  geneClinvar: any
   /** Small variant information record (used for UMD linkout). */
   smallVar?: any
   /** Whether HGMD Pro display is enabled. */
@@ -27,6 +31,35 @@ const props = withDefaults(defineProps<Props>(), {
   hgmdProPrefix: '',
 })
 
+const variantImpactLabels = [
+  "3' UTR",
+  "5' UTR",
+  'downstream',
+  'frameshift',
+  'inframe indel',
+  'start lost',
+  'intron',
+  'missense',
+  'non-coding',
+  'stop gained',
+  'no alteration',
+  'splice acceptor',
+  'splice donor',
+  'stop lost',
+  'synonymous',
+  'upstream gene',
+]
+
+const clinsigLabels = [
+  'pathogenic',
+  'likely pathogenic',
+  'uncertain significance',
+  'likely benign',
+  'benign',
+]
+
+const clinsigColor = ['#b05454', '#f59f9f', '#f5c964', '#a3f56c', '#5d9936']
+
 const variantQueryStore = useVariantQueryStore()
 
 const linkOutPubMedHpoTerms = computed((): string | null => {
@@ -46,8 +79,8 @@ const linkOutPubMedHpoTerms = computed((): string | null => {
 </script>
 
 <template>
-  <div class="row row-cols-3 pr-2 pt-2" style="font-size: 90%">
-    <div class="col mb-2 pl-2 pr-0">
+  <div class="row pr-2 pt-2" style="font-size: 90%">
+    <div class="col-3 mb-2 pl-2 pr-0">
       <div class="card h-100">
         <div class="card-header pl-2 pt-1 pb-1 pr-2">
           <span class="font-weight-bolder" style="font-size: 120%"> HGNC </span>
@@ -77,7 +110,7 @@ const linkOutPubMedHpoTerms = computed((): string | null => {
       </div>
     </div>
 
-    <div class="col mb-2 pl-2 pr-0" v-if="gene?.gnomad_constraints">
+    <div class="col-3 mb-2 pl-2 pr-0" v-if="gene?.gnomad_constraints">
       <div class="card h-100">
         <div class="card-header pl-2 pt-1 pb-1 pr-2">
           <span class="font-weight-bolder" style="font-size: 120%">
@@ -234,7 +267,7 @@ const linkOutPubMedHpoTerms = computed((): string | null => {
       </div>
     </div>
 
-    <div class="col mb-2 pl-2 pr-0">
+    <div class="col-3 mb-2 pl-2 pr-0">
       <div class="card h-100">
         <div class="card-header pl-2 pt-1 pb-1 pr-2">
           <span class="font-weight-bolder" style="font-size: 120%">
@@ -253,7 +286,7 @@ const linkOutPubMedHpoTerms = computed((): string | null => {
       </div>
     </div>
 
-    <div class="col mb-2 pl-2 pr-0">
+    <div class="col-3 mb-2 pl-2 pr-0">
       <div class="card h-100">
         <div class="card-header pl-2 pt-1 pb-1 pr-2">
           <span class="font-weight-bolder" style="font-size: 120%">
@@ -340,7 +373,7 @@ const linkOutPubMedHpoTerms = computed((): string | null => {
       </div>
     </div>
 
-    <div class="col mb-2 pl-2 pr-0">
+    <div class="col-3 mb-2 pl-2 pr-0">
       <div class="card h-100">
         <div class="card-header pl-2 pt-1 pb-1 pr-2">
           <span class="font-weight-bolder" style="font-size: 120%">
@@ -515,7 +548,7 @@ const linkOutPubMedHpoTerms = computed((): string | null => {
       </div>
     </div>
 
-    <div class="col mb-2 pl-2 pr-0">
+    <div class="col-3 mb-2 pl-2 pr-0">
       <div class="card h-100">
         <div class="card-header pl-2 pt-1 pb-1 pr-2">
           <span class="font-weight-bolder" style="font-size: 120%">
@@ -560,7 +593,7 @@ const linkOutPubMedHpoTerms = computed((): string | null => {
       </div>
     </div>
 
-    <div class="col mb-2 pl-2 pr-0">
+    <div class="col-3 mb-2 pl-2 pr-0">
       <div class="card h-100">
         <div class="card-header pl-2 pt-1 pb-1 pr-2">
           <span class="font-weight-bolder" style="font-size: 120%">
@@ -670,7 +703,7 @@ const linkOutPubMedHpoTerms = computed((): string | null => {
         </div>
       </div>
     </div>
-    <div class="col mb-2 pl-2 pr-0">
+    <div class="col-3 mb-2 pl-2 pr-0">
       <div class="card h-100">
         <div class="card-header pl-2 pt-1 pb-1 pr-2">
           <span class="font-weight-bolder" style="font-size: 120%">
@@ -697,7 +730,7 @@ const linkOutPubMedHpoTerms = computed((): string | null => {
       </div>
     </div>
 
-    <div class="col mb-2 pl-2 pr-0">
+    <div class="col-3 mb-2 pl-2 pr-0">
       <div class="card h-100">
         <div class="card-header pl-2 pt-1 pb-1 pr-2">
           <span class="font-weight-bolder" style="font-size: 120%">
@@ -733,7 +766,7 @@ const linkOutPubMedHpoTerms = computed((): string | null => {
       </div>
     </div>
 
-    <div class="col mb-2 pl-2 pr-0">
+    <div class="col-3 mb-2 pl-2 pr-0">
       <div class="card h-100">
         <div class="card-header pl-2 pt-1 pb-1 pr-2">
           <span class="font-weight-bolder" style="font-size: 120%">
@@ -762,6 +795,105 @@ const linkOutPubMedHpoTerms = computed((): string | null => {
         </div>
       </div>
     </div>
+
+    <div class="col-6 mb-2 pl-2 pr-0">
+      <div class="card h-100">
+        <div class="card-header pl-2 pt-1 pb-1 pr-2">
+          <span class="font-weight-bolder" style="font-size: 120%">
+            ClinVar By Impact
+          </span>
+        </div>
+        <div
+          class="card-body pb-2 pt-2"
+          v-if="geneClinvar?.per_impact_counts?.length"
+        >
+          <table class="table table-sm">
+            <tr>
+              <thead>
+                <th>impact</th>
+                <th v-for="i in [0, 1, 2, 3, 4]">
+                  {{ clinsigLabels[i] }}
+                </th>
+                <th>total</th>
+              </thead>
+              <tbody>
+                <tr v-for="row in geneClinvar?.per_impact_counts ?? []">
+                  <td>
+                    {{ variantImpactLabels[row.impact] }}
+                  </td>
+                  <td
+                    v-for="(count, idx) in row.counts"
+                    class="text-right"
+                    :style="`background-color: ${clinsigColor[idx]}`"
+                  >
+                    {{ count }}
+                  </td>
+                  <td class="text-right">
+                    {{ row.counts.reduce((a, b) => a + b, 0) }}
+                  </td>
+                </tr>
+              </tbody>
+            </tr>
+          </table>
+        </div>
+        <div v-else class="text-muted text-center font-italic">
+          No ClinVar data for gene.
+        </div>
+      </div>
+    </div>
+
+    <div class="col-8 mb-2 pl-2 pr-0">
+      <div class="card h-100">
+        <div class="card-header pl-2 pt-1 pb-1 pr-2">
+          <span class="font-weight-bolder" style="font-size: 120%">
+            ClinVar By Frequency
+          </span>
+        </div>
+        <div
+          class="card-body pb-2 pt-2"
+          v-if="geneClinvar?.per_impact_counts?.length"
+        >
+          <ClinvarFreqPlot
+            :gene-symbol="gene?.hgnc?.symbol"
+            :per-freq-counts="geneClinvar?.per_freq_counts"
+          />
+        </div>
+        <div v-else class="text-muted text-center font-italic">
+          No ClinVar data for gene.
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="row">
+    <div class="col mb-2 pl-2 pr-0 cols-12">
+      <div class="card h-100">
+        <div class="card-header pl-2 pt-1 pb-1 pr-2">
+          <span class="font-weight-bolder" style="font-size: 120%">
+            GTEx Expression
+          </span>
+          <small>
+            <a
+              :href="`https://gtexportal.org/home/gene/${gene?.gtex.ensembl_gene_id}`"
+              target="_blank"
+              v-if="gene?.gtex"
+            >
+              <i-mdi-launch />
+              GTEx Portal
+            </a>
+          </small>
+        </div>
+        <div class="card-body pb-2 pt-2 row" v-if="gene?.gtex">
+          <GtexGenePlot
+            :gene-symbol="gene?.hgnc?.symbol"
+            :expression-records="gene.gtex.records"
+          />
+        </div>
+        <div v-else class="text-muted text-center font-italic">
+          No GTEx data available for gene.
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
diff --git a/variants/vueapp/src/components/VariantDetails/GtexGenePlot.vue b/variants/vueapp/src/components/VariantDetails/GtexGenePlot.vue
new file mode 100644
index 000000000..be25a1a86
--- /dev/null
+++ b/variants/vueapp/src/components/VariantDetails/GtexGenePlot.vue
@@ -0,0 +1,192 @@
+<script setup lang="ts">
+import * as vega from 'vega'
+import { computed, ref } from 'vue'
+
+import VegaPlot from '@varfish/components/VegaPlot.vue'
+
+export interface ExpressionRecord {
+  /** Tissue id */
+  tissue: number
+  /** Detailed tissue id */
+  tissue_detailed: number
+  /** TPM quantiles (0, 0.25, 0.5, 0.75, 1.0) */
+  tpms: number[]
+}
+
+export interface Props {
+  /** Gene symbol */
+  geneSymbol: string
+  /** Expression records */
+  expressionRecords: ExpressionRecord[]
+}
+
+const props = withDefaults(defineProps<Props>(), {})
+
+const tissueLabels = [
+  'Adipose Tissue',
+  'Adrenal Gland',
+  'Bladder',
+  'Blood',
+  'Blood Vessel',
+  'Bone Marrow',
+  'Brain',
+  'Breast',
+  'Cervix Uteri',
+  'Colon',
+  'Esophagus',
+  'Fallopian Tube',
+  'Heart',
+  'Kidney',
+  'Liver',
+  'Lung',
+  'Muscle',
+  'Nerve',
+  'Ovary',
+  'Pancreas',
+  'Pituitary',
+  'Prostate',
+  'Salivary Gland',
+  'Skin',
+  'Small Intestine',
+  'Spleen',
+  'Stomach',
+  'Testis',
+  'Thyroid',
+  'Uterus',
+  'Vagina',
+]
+
+const tissueDetailedLabels = [
+  'Adipose - Subcutaneous',
+  'Adipose - Visceral (Omentum)',
+  'Adrenal Gland',
+  'Artery - Aorta',
+  'Artery - Coronary',
+  'Artery - Tibial',
+  'Bladder',
+  'Brain - Amygdala',
+  'Brain - Anterior cingulate cortex (BA24)',
+  'Brain - Caudate (basal ganglia)',
+  'Brain - Cerebellar Hemisphere',
+  'Brain - Cerebellum',
+  'Brain - Cortex',
+  'Brain - Frontal Cortex (BA9)',
+  'Brain - Hippocampus',
+  'Brain - Hypothalamus',
+  'Brain - Nucleus accumbens (basal ganglia)',
+  'Brain - Putamen (basal ganglia)',
+  'Brain - Spinal cord (cervical c-1)',
+  'Brain - Substantia nigra',
+  'Breast - Mammary Tissue',
+  'Cells - Cultured fibroblasts',
+  'Cells - EBV-transformed lymphocytes',
+  'Cells - Leukemia cell line (CML)',
+  'Cervix - Ectocervix',
+  'Cervix - Endocervix',
+  'Colon - Sigmoid',
+  'Colon - Transverse',
+  'Esophagus - Gastroesophageal Junction',
+  'Esophagus - Mucosa',
+  'Esophagus - Muscularis',
+  'Fallopian Tube',
+  'Heart - Atrial Appendage',
+  'Heart - Left Ventricle',
+  'Kidney - Cortex',
+  'Kidney - Medulla',
+  'Liver',
+  'Lung',
+  'Minor Salivary Gland',
+  'Muscle - Skeletal',
+  'Nerve - Tibial',
+  'Ovary',
+  'Pancreas',
+  'Pituitary',
+  'Prostate',
+  'Salivary Gland',
+  'Skin - Not Sun Exposed (Suprapubic)',
+  'Skin - Sun Exposed (Lower leg)',
+  'Small Intestine - Terminal Ileum',
+  'Spleen',
+  'Stomach',
+  'Testis',
+  'Thyroid',
+  'Uterus',
+  'Vagina',
+  'Whole Blood',
+]
+
+const vegaData = computed(() => {
+  return props?.expressionRecords?.map((record) => ({
+    tissue: tissueLabels[record.tissue],
+    tissueDetailed: tissueDetailedLabels[record.tissue_detailed],
+    lower: record.tpms[0],
+    q1: record.tpms[1],
+    median: record.tpms[2],
+    q3: record.tpms[3],
+    upper: record.tpms[4],
+  }))
+})
+
+const vegaEncoding = {
+  x: {
+    field: 'tissueDetailed',
+    type: 'nominal',
+    title: null,
+    axis: { labelAngle: 45 },
+  },
+}
+
+const vegaLayer = [
+  {
+    mark: { type: 'rule', tooltip: { content: 'data' } },
+    encoding: {
+      y: {
+        field: 'lower',
+        type: 'quantitative',
+        scale: { zero: false },
+        title: 'TPM',
+      },
+      y2: { field: 'upper' },
+    },
+  },
+  {
+    mark: { type: 'bar', size: 14, tooltip: { content: 'data' } },
+    encoding: {
+      y: { field: 'q1', type: 'quantitative' },
+      y2: { field: 'q3' },
+      color: { field: 'tissue', type: 'nominal', legend: null },
+    },
+  },
+  {
+    mark: {
+      type: 'tick',
+      color: 'white',
+      size: 14,
+      tooltip: { content: 'data' },
+    },
+    encoding: {
+      y: { field: 'median', type: 'quantitative' },
+    },
+  },
+]
+
+/** Ref to the VegaPlot (for testing). */
+const vegaPlotRef = ref(null)
+</script>
+
+<template>
+  <figure class="figure border rounded pl-2 pt-2 mr-3 w-100 col">
+    <figcaption class="figure-caption text-center">
+      Bulk tissue gene expression for gene {{ props.geneSymbol }}
+    </figcaption>
+    <VegaPlot
+      :data-values="vegaData"
+      :encoding="vegaEncoding"
+      :layer="vegaLayer"
+      :mark="false"
+      :width="1000"
+      :height="300"
+      renderer="svg"
+    />
+  </figure>
+</template>
diff --git a/variants/vueapp/src/stores/variantDetails.ts b/variants/vueapp/src/stores/variantDetails.ts
index d2f0fb484..fc84b9be4 100644
--- a/variants/vueapp/src/stores/variantDetails.ts
+++ b/variants/vueapp/src/stores/variantDetails.ts
@@ -8,6 +8,7 @@ import { useCaseDetailsStore } from '@cases/stores/caseDetails'
 
 type SmallVariant = any
 type GeneInfos = any
+type GeneClinvarInfos = any
 type VarAnnos = any
 type TxCsq = any
 
@@ -34,6 +35,8 @@ export const useVariantDetailsStore = defineStore('variantDetails', () => {
   const smallVariant = ref<SmallVariant | null>(null)
   /** Gene-related information from annonars. */
   const gene = ref<GeneInfos | null>(null)
+  /** ClinVar gene-related information from annoars. */
+  const geneClinvar = ref<GeneClinvarInfos | null>(null)
   /** Variant-related information from annonars. */
   const varAnnos = ref<VarAnnos | null>(null)
   /** Transcript consequence information from mehari. */
@@ -96,6 +99,7 @@ export const useVariantDetailsStore = defineStore('variantDetails', () => {
     // Clear old store contents
     smallVariant.value = null
     gene.value = null
+    geneClinvar.value = null
     varAnnos.value = null
     txCsq.value = null
 
@@ -108,6 +112,9 @@ export const useVariantDetailsStore = defineStore('variantDetails', () => {
       annonarsClient.retrieveGeneInfos([hgncId]).then((result) => {
         gene.value = result[0]
       }),
+      annonarsClient.retrieveGeneClinvarInfos([hgncId]).then((result) => {
+        geneClinvar.value = result[0]
+      }),
       annonarsClient
         .retrieveVariantAnnos(
           smallVariant$.release.toLowerCase(),
@@ -143,6 +150,7 @@ export const useVariantDetailsStore = defineStore('variantDetails', () => {
     caseUuid,
     storeState,
     gene,
+    geneClinvar,
     varAnnos,
     txCsq,
     smallVariant,