Skip to content

Commit

Permalink
feat: additional Jump to IGV button (#297) (#299)
Browse files Browse the repository at this point in the history
  • Loading branch information
gromdimon authored Dec 15, 2023
1 parent a61b57e commit 38c5668
Show file tree
Hide file tree
Showing 2 changed files with 56 additions and 0 deletions.
29 changes: 29 additions & 0 deletions frontend/src/views/SeqvarDetailsView.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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 }">
Expand Down
27 changes: 27 additions & 0 deletions frontend/src/views/StrucvarDetailsView.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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`"
Expand Down

0 comments on commit 38c5668

Please sign in to comment.