From 17171a7ca277e2ab5b99a21d56257e3972f982b6 Mon Sep 17 00:00:00 2001
From: Dzmitry Hramyka <grom.dima.grom@gmail.com>
Date: Wed, 18 Oct 2023 10:32:41 +0200
Subject: [PATCH] feat: Link-outs in SV detail page (#143) (#155)

---
 frontend/src/components/SvDetails/SvTools.vue | 146 ++++++++++++++++++
 .../__tests__/SvDetails/SvTools.spec.ts       |  62 ++++++++
 frontend/src/views/SvDetailView.vue           |   8 +
 .../src/views/__tests__/SvDetailView.spec.ts  |   3 +
 4 files changed, 219 insertions(+)
 create mode 100644 frontend/src/components/SvDetails/SvTools.vue
 create mode 100644 frontend/src/components/__tests__/SvDetails/SvTools.spec.ts

diff --git a/frontend/src/components/SvDetails/SvTools.vue b/frontend/src/components/SvDetails/SvTools.vue
new file mode 100644
index 00000000..ac341b8f
--- /dev/null
+++ b/frontend/src/components/SvDetails/SvTools.vue
@@ -0,0 +1,146 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { type SvRecord } from '@/stores/svInfo'
+
+export interface Props {
+  svRecord: SvRecord | null
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  svRecord: null
+})
+
+const ucscLinkout = computed((): string => {
+  if (!props.svRecord) {
+    return '#'
+  }
+  const db = props.svRecord.release === 'grch37' ? 'hg19' : 'hg38'
+  return (
+    `https://genome-euro.ucsc.edu/cgi-bin/hgTracks?db=${db}&position=` +
+    `${props.svRecord.chromosome}:${props.svRecord.start}-` +
+    `${props.svRecord.end}`
+  )
+})
+
+const ensemblLinkout = computed((): string => {
+  if (!props.svRecord) {
+    return '#'
+  }
+  const loc = `${props.svRecord.chromosome}:${props.svRecord.start}-${props.svRecord.end}`
+  if (props.svRecord.release === 'grch37') {
+    return `https://grch37.ensembl.org/Homo_sapiens/Location/View?r=${loc}`
+  } else if (props.svRecord.release === 'grch38') {
+    return `https://ensembl.org/Homo_sapiens/Location/View?r=${loc}`
+  }
+  return '#'
+})
+
+const dgvLinkout = computed((): string => {
+  if (!props.svRecord) {
+    return '#'
+  }
+  const db = props.svRecord.release === 'grch37' ? 'hg19' : 'hg38'
+  return (
+    `http://dgv.tcag.ca/gb2/gbrowse/dgv2_${db}/?name=${props.svRecord.chromosome}:` +
+    `${props.svRecord.start}-${props.svRecord.end};search=Search`
+  )
+})
+
+const gnomadLinkout = computed((): string => {
+  if (!props.svRecord) {
+    return '#'
+  }
+  const dataset = props.svRecord.release === 'grch37' ? 'gnomad_r2_1' : 'gnomad_r3'
+  return (
+    `https://gnomad.broadinstitute.org/region/${props.svRecord.chromosome}:` +
+    `${props.svRecord.start}-${props.svRecord.end}?dataset=${dataset}`
+  )
+})
+
+const varsomeLinkout = computed((): string => {
+  if (!props.svRecord) {
+    return '#'
+  }
+  const urlRelease = props.svRecord.release === 'grch37' ? 'hg19' : 'hg38'
+  const chrom = props.svRecord.chromosome.startsWith('chr')
+    ? props.svRecord.chromosome
+    : `chr${props.svRecord.chromosome}`
+  return `https://varsome.com/cnv/${urlRelease}/${chrom}:${props.svRecord.start}:${props.svRecord.end}:${props.svRecord.svType}`
+})
+
+const jumpToLocus = async () => {
+  const chrPrefixed = props.svRecord?.chromosome.startsWith('chr')
+    ? props.svRecord?.chromosome
+    : `chr${props.svRecord?.chromosome}`
+  await fetch(
+    `http://127.0.0.1:60151/goto?locus=${chrPrefixed}:${props.svRecord?.start}-${props.svRecord?.end}`
+  ).catch((e) => {
+    const msg = "Couldn't connect to IGV. Please make sure IGV is running and try again."
+    alert(msg)
+    console.error(msg, e)
+  })
+}
+</script>
+
+<template>
+  <div>
+    <h2>External Resources</h2>
+    <div class="external-resource-item">
+      <a :href="dgvLinkout" target="_blank">
+        <v-icon>mdi-launch</v-icon>
+        DGV
+      </a>
+    </div>
+    <div class="external-resource-item">
+      <a :href="ensemblLinkout" target="_blank">
+        <v-icon>mdi-launch</v-icon>
+        ENSEBML
+      </a>
+    </div>
+    <div class="external-resource-item">
+      <a :href="gnomadLinkout" target="_blank">
+        <v-icon>mdi-launch</v-icon>
+        gnomAD
+      </a>
+    </div>
+    <div class="external-resource-item">
+      <a :href="ucscLinkout" target="_blank">
+        <v-icon>mdi-launch</v-icon>
+        UCSC Genome Browser
+      </a>
+    </div>
+    <div class="external-resource-item">
+      <a :href="varsomeLinkout" target="_blank">
+        <v-icon>mdi-launch</v-icon>
+        varsome
+      </a>
+    </div>
+  </div>
+
+  <v-divider />
+
+  <div>
+    <h2>IGV</h2>
+    <div>
+      <div>
+        <a href="#" target="_blank" @click.prevent="jumpToLocus()">
+          <v-icon>mdi-launch</v-icon>
+          Jump to Location in IGV
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.external-resource-item {
+  float: left;
+  margin-right: 10px;
+}
+
+.external-resource-item:last-child {
+  float: none;
+  margin-right: 0;
+}
+</style>
diff --git a/frontend/src/components/__tests__/SvDetails/SvTools.spec.ts b/frontend/src/components/__tests__/SvDetails/SvTools.spec.ts
new file mode 100644
index 00000000..10f576db
--- /dev/null
+++ b/frontend/src/components/__tests__/SvDetails/SvTools.spec.ts
@@ -0,0 +1,62 @@
+import { describe, expect, it } from 'vitest'
+
+import SvTools from '@/components/SvDetails/SvTools.vue'
+import { setupMountedComponents } from '@/lib/test-utils'
+import { type SvRecord } from '@/stores/svInfo'
+
+const svRecord: SvRecord = {
+  svType: 'DEL',
+  chromosome: 'chr17',
+  start: '41176312',
+  end: '41277500',
+  release: 'grch37',
+  result: [
+    {
+      hgnc_id: 'HGNC:18315',
+      transcript_effects: [
+        'transcript_variant',
+        'exon_variant',
+        'splice_region_variant',
+        'intron_variant',
+        'upstream_variant',
+        'downstream_variant'
+      ]
+    },
+    {
+      hgnc_id: 'HGNC:20691',
+      transcript_effects: ['upstream_variant']
+    },
+    {
+      hgnc_id: 'HGNC:1100',
+      transcript_effects: [
+        'transcript_variant',
+        'exon_variant',
+        'splice_region_variant',
+        'intron_variant',
+        'upstream_variant',
+        'downstream_variant'
+      ]
+    },
+    {
+      hgnc_id: 'HGNC:16919',
+      transcript_effects: ['upstream_variant']
+    }
+  ]
+}
+
+describe.concurrent('SvTools', async () => {
+  it('renders the SvTools content', async () => {
+    const { wrapper } = setupMountedComponents(
+      { component: SvTools, template: false },
+      {
+        props: {
+          svRecord: svRecord
+        }
+      }
+    )
+
+    expect(wrapper.text()).toContain('External Resources')
+    const links = wrapper.findAll('a')
+    expect(links.length).toBe(6)
+  })
+})
diff --git a/frontend/src/views/SvDetailView.vue b/frontend/src/views/SvDetailView.vue
index e6b69026..f4b12f3f 100644
--- a/frontend/src/views/SvDetailView.vue
+++ b/frontend/src/views/SvDetailView.vue
@@ -7,6 +7,7 @@ import HeaderDetailPage from '@/components/HeaderDetailPage.vue'
 import AcmgRating from '@/components/SvDetails/AcmgRating.vue'
 import SvDetailsClinvar from '@/components/SvDetails/SvDetailsClinvar.vue'
 import SvDetailsGenes from '@/components/SvDetails/SvGenes.vue'
+import SvTools from '@/components/SvDetails/SvTools.vue'
 import { StoreState } from '@/stores/misc'
 import { useSvInfoStore } from '@/stores/svInfo'
 import { type SvRecord } from '@/stores/svInfo'
@@ -80,6 +81,7 @@ watch(
 const SECTIONS = [
   { id: 'gene', title: 'Gene' },
   { id: 'clinvar', title: 'ClinVar' },
+  { id: 'sv-tools', title: 'SV Tools' },
   { id: 'acmg', title: 'ACMG' },
   { id: 'genome-browser', title: 'Genome Browser' }
 ]
@@ -120,6 +122,12 @@ const genomeReleaseRef = ref(props.genomeRelease)
           <SvDetailsClinvar />
         </div>
 
+        <div id="sv-tools" class="sv-item">
+          <h2>SV Tools</h2>
+          <v-divider />
+          <SvTools :sv-record="svInfoStore.currentSvRecord" />
+        </div>
+
         <div id="acmg" class="sv-item">
           <h2>ACMG</h2>
           <v-divider />
diff --git a/frontend/src/views/__tests__/SvDetailView.spec.ts b/frontend/src/views/__tests__/SvDetailView.spec.ts
index 8f577693..744f3f53 100644
--- a/frontend/src/views/__tests__/SvDetailView.spec.ts
+++ b/frontend/src/views/__tests__/SvDetailView.spec.ts
@@ -9,6 +9,7 @@ import HeaderDetailPage from '@/components/HeaderDetailPage.vue'
 import AcmgRating from '@/components/SvDetails/AcmgRating.vue'
 import SvDetailsClinvar from '@/components/SvDetails/SvDetailsClinvar.vue'
 import SvGenes from '@/components/SvDetails/SvGenes.vue'
+import SvTools from '@/components/SvDetails/SvTools.vue'
 import { setupMountedComponents } from '@/lib/test-utils'
 import { StoreState } from '@/stores/misc'
 import { useSvInfoStore } from '@/stores/svInfo'
@@ -66,10 +67,12 @@ describe.concurrent('VariantDetailView', async () => {
     const { wrapper } = makeWrapper()
 
     const svGenes = wrapper.findComponent(SvGenes)
+    const svTools = wrapper.findComponent(SvTools)
     const svDetailsClinvar = wrapper.findComponent(SvDetailsClinvar)
     const acmgRating = wrapper.findComponent(AcmgRating)
     const genomeBrowser = wrapper.findComponent(GenomeBrowser)
     expect(svGenes.exists()).toBe(true)
+    expect(svTools.exists()).toBe(true)
     expect(svDetailsClinvar.exists()).toBe(true)
     expect(acmgRating.exists()).toBe(true)
     expect(genomeBrowser.exists()).toBe(true)