From 38c5668385a1bf596ec94132525e8e0dfdb2d65c Mon Sep 17 00:00:00 2001
From: Dzmitry Hramyka <grom.dima.grom@gmail.com>
Date: Fri, 15 Dec 2023 15:01:51 +0100
Subject: [PATCH] feat: additional `Jump to IGV` button (#297) (#299)

---
 frontend/src/views/SeqvarDetailsView.vue   | 29 ++++++++++++++++++++++
 frontend/src/views/StrucvarDetailsView.vue | 27 ++++++++++++++++++++
 2 files changed, 56 insertions(+)

diff --git a/frontend/src/views/SeqvarDetailsView.vue b/frontend/src/views/SeqvarDetailsView.vue
index d4a76112..0ed5bce4 100644
--- a/frontend/src/views/SeqvarDetailsView.vue
+++ b/frontend/src/views/SeqvarDetailsView.vue
@@ -190,6 +190,24 @@ const loadDataToStore = async () => {
   await scrollToSection(route)
 }
 
+/**
+ * Jump to the locus in the local IGV.
+ */
+const jumpToLocus = async () => {
+  const chrPrefixed = seqvarInfoStore.seqvar?.chrom.startsWith('chr')
+    ? seqvarInfoStore.seqvar?.chrom
+    : `chr${seqvarInfoStore.seqvar?.chrom}`
+  await fetch(
+    `http://127.0.0.1:60151/goto?locus=${chrPrefixed}:${seqvarInfoStore.seqvar?.pos}-${
+      (seqvarInfoStore.seqvar?.pos ?? 0) + (seqvarInfoStore.seqvar?.del?.length ?? 0)
+    }`
+  ).catch((e) => {
+    const msg = "Couldn't connect to IGV. Please make sure IGV is running and try again."
+    alert(msg)
+    console.error(msg, e)
+  })
+}
+
 // When the component is mounted or the search term is changed through
 // the router then we need to fetch the variant information from the backend
 // through the store.
@@ -240,6 +258,17 @@ const SECTIONS: { [key: string]: Section[] } = {
               <v-list v-model:opened="openedSection" density="compact" rounded="lg">
                 <BookmarkListItem :id="idForBookmark" type="seqvar" />
 
+                <!-- Jump to IGV -->
+                <v-btn
+                  color=""
+                  variant="outlined"
+                  class="ma-2"
+                  prepend-icon="mdi-launch"
+                  @click.prevent="jumpToLocus()"
+                >
+                  Jump in Local IGV
+                </v-btn>
+
                 <template v-if="geneInfoStore.hgncId?.length">
                   <v-list-group value="gene">
                     <template #activator="{ props: vProps }">
diff --git a/frontend/src/views/StrucvarDetailsView.vue b/frontend/src/views/StrucvarDetailsView.vue
index 89ab70ba..34613fe0 100644
--- a/frontend/src/views/StrucvarDetailsView.vue
+++ b/frontend/src/views/StrucvarDetailsView.vue
@@ -213,6 +213,22 @@ const svLocus = (strucvar: Strucvar | undefined): string | undefined => {
   return locus
 }
 
+/**
+ * Jump to the locus in the local IGV.
+ */
+const jumpToLocus = async () => {
+  const chrPrefixed = strucvar.value?.chrom.startsWith('chr')
+    ? strucvar.value?.chrom
+    : `chr${strucvar.value?.chrom}`
+  await fetch(
+    `http://127.0.0.1:60151/goto?locus=${chrPrefixed}:${strucvar.value?.start}-${strucvar.value?.stop}`
+  ).catch((e) => {
+    const msg = "Couldn't connect to IGV. Please make sure IGV is running and try again."
+    alert(msg)
+    console.error(msg, e)
+  })
+}
+
 // When the component is mounted or the search term is changed through
 // the router then we need to fetch the variant information from the backend
 // through the store.
@@ -272,6 +288,17 @@ const SECTIONS: { [key: string]: Section[] } = {
               <v-list v-model:opened="openedSection" density="compact" rounded="lg">
                 <BookmarkListItem :id="idForBookmark" type="strucvar" />
 
+                <!-- Jump to IGV -->
+                <v-btn
+                  variant="outlined"
+                  color=""
+                  class="ma-2"
+                  prepend-icon="mdi-launch"
+                  @click.prevent="jumpToLocus()"
+                >
+                  Jump in Local IGV
+                </v-btn>
+
                 <v-list-item
                   v-for="section in SECTIONS.TOP"
                   :id="`${section.id}-nav`"