feat: Switch to vuetify cards for ui (#165) (#171)

bihealth · Oct 23, 2023 · a7e2853 · a7e2853
1 parent 74096b9
commit a7e2853
Show file tree

Hide file tree

Showing 62 changed files with 2,571 additions and 2,137 deletions.
diff --git a/frontend/src/assets/__tests__/BRCA1ClinVar.json b/frontend/src/assets/__tests__/BRCA1ClinVar.json
diff --git a/frontend/src/assets/__tests__/BRCA1GeneInfo.json b/frontend/src/assets/__tests__/BRCA1GeneInfo.json
diff --git a/frontend/src/assets/__tests__/BRCA1Transcripts.json b/frontend/src/assets/__tests__/BRCA1Transcripts.json
diff --git a/frontend/src/components/GeneDetails/AlternativeIdentifiers.vue b/frontend/src/components/GeneDetails/AlternativeIdentifiers.vue
@@ -0,0 +1,84 @@
+<script setup lang="ts">
+export interface Props {
+  hgnc: any
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  hgnc: null
+})
+</script>
+<template>
+  <v-card>
+    <v-card-title>Alternative Identifiers</v-card-title>
+    <v-divider></v-divider>
+    <v-card-text>
+      <div>
+        <strong> ENSEMBL: </strong>
+        <a
+          :href="`https://www.ensembl.org/Homo_sapiens/Gene/Summary?g=${props.hgnc?.ensembl_gene_id}`"
+          target="_blank"
+        >
+          <v-icon>mdi-launch</v-icon>
+          {{ props.hgnc?.ensembl_gene_id }}
+        </a>
+      </div>
+      <div>
+        <strong> HGNC: </strong>
+        <a
+          :href="`https://www.genenames.org/data/gene-symbol-report/#!/hgnc_id/${props.hgnc?.hgnc_id}`"
+          target="_blank"
+        >
+          <v-icon>mdi-launch</v-icon>
+          {{ props.hgnc?.hgnc_id }}
+        </a>
+      </div>
+      <div v-if="props.hgnc?.mgd_id?.length">
+        <strong>MGI: </strong>
+        <template v-for="(mgd_id, index) in props.hgnc.mgd_id" :key="mgd_id">
+          <template v-if="index > 0">, </template>
+          <a :href="`https://www.informatics.jax.org/marker/${mgd_id}`" target="_blank">
+            <v-icon>mdi-launch</v-icon>
+            {{ mgd_id }}
+          </a>
+        </template>
+      </div>
+      <span v-else> No MGI </span>
+      <div v-if="props.hgnc?.pubmed_id?.length">
+        <strong>Primary PMID: </strong>
+        <template v-for="(pmid, index) in props.hgnc.pubmed_id" :key="pmid">
+          <template v-if="index > 0">, </template>
+          <a :href="`https://pubmed.ncbi.nlm.nih.gov/${pmid}/`" target="_blank">
+            <v-icon>mdi-launch</v-icon>
+            {{ pmid }}
+          </a>
+        </template>
+      </div>
+      <div v-else>No primary PMID</div>
+      <div v-if="props.hgnc?.refseq_accession?.length">
+        <strong> RefSeq: </strong>
+        <template v-for="(accession, index) in props.hgnc.refseq_accession" :key="index">
+          <template v-if="index > 0">, </template>
+          <a
+            :href="`https://www.ncbi.nlm.nih.gov/nuccore/?term=${accession}+AND+srcdb_refseq[PROP]`"
+            target="_blank"
+          >
+            <v-icon>mdi-launch</v-icon>
+            {{ accession }}
+          </a>
+        </template>
+      </div>
+      <div v-else>No RefSeq</div>
+      <div v-if="props.hgnc?.uniprot_ids?.length">
+        <strong> UniProt: </strong>
+        <template v-for="(uniprotid, index) in props.hgnc.uniprot_ids" :key="index">
+          <template v-if="index > 0">, </template>
+          <a :href="`https://www.uniprot.org/uniprotkb/${uniprotid}/entry`" target="_blank">
+            <v-icon>mdi-launch</v-icon>
+            {{ uniprotid }}
+          </a>
+        </template>
+      </div>
+      <div v-else>No UniProt</div>
+    </v-card-text>
+  </v-card>
+</template>
diff --git a/frontend/src/components/ClinVarFreqPlot.vue → ...omponents/GeneDetails/ClinVarFreqPlot.vue b/frontend/src/components/ClinVarFreqPlot.vue → ...omponents/GeneDetails/ClinVarFreqPlot.vue
@@ -119,17 +119,24 @@ const vegaEncoding = {
 </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 as any"
-      :encoding="vegaEncoding"
-      :mark="false"
-      :layer="vegaLayer"
-      :height="300"
-      renderer="svg"
-    />
-  </figure>
+  <v-card v-if="props.perFreqCounts?.length">
+    <v-card-title>ClinVar By Frequency</v-card-title>
+    <v-divider />
+    <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 as any"
+        :encoding="vegaEncoding"
+        :mark="false"
+        :layer="vegaLayer"
+        :height="300"
+        renderer="svg"
+      />
+    </figure>
+  </v-card>
+  <v-card v-else>
+    <v-card-text class="text-muted text-center font-italic">No ClinVar data for gene.</v-card-text>
+  </v-card>
 </template>
diff --git a/frontend/src/components/GeneDetails/ClinvarImpact.vue b/frontend/src/components/GeneDetails/ClinvarImpact.vue
@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+export interface Props {
+  geneClinvar: any
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  geneClinvar: null
+})
+
+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 = [
+  'benign', // 0
+  'likely benign', // 1
+  'uncertain signifiance', // 2
+  'likely pathogenic', // 3
+  'pathogenic' // 4
+]
+
+const clinsigColor = ['#5d9936', '#a3f56c', '#f5c964', '#f59f9f', '#b05454']
+
+const perImpactCounts = computed(() => {
+  const result = []
+  const sum = {
+    impact: variantImpactLabels.length - 1,
+    counts: [0, 0, 0, 0, 0]
+  }
+
+  if (props.geneClinvar?.per_impact_counts) {
+    for (const perImpactCount of props.geneClinvar.per_impact_counts) {
+      result.push(perImpactCount)
+      for (let i = 0; i < sum.counts.length; ++i) {
+        sum.counts[i] += perImpactCount.counts[i]
+      }
+    }
+    result.push(sum)
+  }
+  return result
+})
+</script>
+
+<template>
+  <v-card id="clinvar-impact" class="gene-item">
+    <v-card-title>ClinVar By Impact</v-card-title>
+    <v-divider />
+    <v-card-text v-if="props.geneClinvar?.per_impact_counts?.length">
+      <table>
+        <tr>
+          <thead>
+            <th>impact</th>
+            <th v-for="i in [0, 1, 2, 3, 4]" :key="i">
+              {{ clinsigLabels[i] }}
+            </th>
+            <th>total</th>
+          </thead>
+          <tbody>
+            <tr v-for="row in perImpactCounts" :key="row">
+              <td
+                :class="{
+                  'font-weight-bolder': variantImpactLabels[row.impact] == 'overall'
+                }"
+              >
+                {{ variantImpactLabels[row.impact] }}
+              </td>
+              <td
+                class="text-right"
+                :class="{
+                  'font-weight-bolder': variantImpactLabels[row.impact] == 'overall'
+                }"
+                v-for="(count, idx) in row.counts"
+                :style="`background-color: ${clinsigColor[idx]}`"
+                :key="idx"
+              >
+                {{ count }}
+              </td>
+              <td
+                class="text-right"
+                :class="{
+                  'font-weight-bolder': variantImpactLabels[row.impact] == 'overall'
+                }"
+              >
+                {{ row.counts.reduce((a: any, b: any) => a + b, 0) }}
+              </td>
+            </tr>
+          </tbody>
+        </tr>
+      </table>
+    </v-card-text>
+    <v-card-text v-else class="text-center font-italic">No ClinVar data for gene.</v-card-text>
+  </v-card>
+</template>
diff --git a/frontend/src/components/GeneDetails/ConstraintsCard.vue b/frontend/src/components/GeneDetails/ConstraintsCard.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { roundIt } from '@/lib/utils'
+
+export interface Props {
+  gnomadConstraints: any
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  gnomadConstraints: null
+})
+</script>
+<template>
+  <v-card id="constraints-scores" class="gene-item">
+    <v-card-title>Constraints/Scores</v-card-title>
+    <v-card-subtitle>gnomAD</v-card-subtitle>
+    <v-divider></v-divider>
+    <v-card-text>
+      <v-table style="width: 100%">
+        <thead>
+          <tr>
+            <th>Category</th>
+            <th>SNVs exp.</th>
+            <th>SNVs obs.</th>
+            <th>Constraint metrics</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>Synonymous</td>
+            <td v-html="roundIt(props.gnomadConstraints?.exp_syn, 1)"></td>
+            <td v-html="roundIt(props.gnomadConstraints?.obs_syn, 1)"></td>
+            <td>
+              Z =
+              <span v-html="roundIt(props.gnomadConstraints?.syn_z)" /><br />
+              o/e =
+              <span v-html="roundIt(props.gnomadConstraints?.oe_syn)" />
+              (<span v-html="roundIt(props.gnomadConstraints?.oe_syn_lower)" />
+              -
+              <span v-html="roundIt(props.gnomadConstraints?.oe_syn_upper)" />)
+            </td>
+          </tr>
+          <tr>
+            <td>Missense</td>
+            <td v-html="roundIt(props.gnomadConstraints?.exp_mis, 1)"></td>
+            <td v-html="roundIt(props.gnomadConstraints?.obs_mis, 1)"></td>
+            <td>
+              Z =
+              <span v-html="roundIt(props.gnomadConstraints?.mis_z)" /><br />
+              o/e =
+              <span v-html="roundIt(props.gnomadConstraints?.oe_mis)" />
+              (<span v-html="roundIt(props.gnomadConstraints?.oe_mis_lower)" />
+              -
+              <span v-html="roundIt(props.gnomadConstraints?.oe_mis_upper)" />)
+            </td>
+          </tr>
+          <tr>
+            <td>pLoF</td>
+            <td v-html="roundIt(props.gnomadConstraints?.exp_lof, 1)"></td>
+            <td v-html="roundIt(props.gnomadConstraints?.obs_lof, 1)"></td>
+            <td>
+              pLI =
+              <span v-html="roundIt(props.gnomadConstraints?.pli)" /><br />
+              o/e =
+              <span v-html="roundIt(props.gnomadConstraints?.oe_lof)" />
+              (<span v-html="roundIt(props.gnomadConstraints?.oe_lof_lower)" />
+              -
+              <mark v-html="roundIt(props.gnomadConstraints?.oe_lof_upper, 2, 'LOEUF')" />)
+            </td>
+          </tr>
+        </tbody>
+      </v-table>
+    </v-card-text>
+  </v-card>
+</template>
diff --git a/frontend/src/components/GeneDetails/DiseaseAnnotation.vue b/frontend/src/components/GeneDetails/DiseaseAnnotation.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+export interface Props {
+  dbnsfp: any
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  dbnsfp: null
+})
+</script>
+
+<template>
+  <v-card>
+    <v-card-title>Disease Annotation</v-card-title>
+    <v-divider></v-divider>
+    <v-card-text>
+      <v-table>
+        <thead>
+          <tr>
+            <th>Orphanet Disorders</th>
+            <th>OMIM Diseases</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <th>
+              <div v-if="props.dbnsfp?.orphanet_disorder?.length">
+                {{ props.dbnsfp.orphanet_disorder.join(', ') }}
+              </div>
+              <div v-else>No Orphanet disorders annotated in dbNSFP.</div>
+            </th>
+            <th>
+              <div v-if="props.dbnsfp?.mim_disease?.length">
+                {{ props.dbnsfp.mim_disease.join(', ') }}
+              </div>
+              <div v-else>No OMIM diseases annotated in dbNSFP.</div>
+            </th>
+          </tr>
+        </tbody>
+      </v-table></v-card-text
+    >
+  </v-card>
+</template>