Allow downloads of VA-Spec objects from variant pages

src/components/screens/ScoreSetView.vue

@@ -560,10 +560,10 @@ export default {
       return options
     },
     annotatedVariantDownloadOptions: function () {
-      const annotatatedVariantOptions = []
+      const annotatedVariantOptions = []
 
       if (this.item?.scoreCalibrations) {
-        annotatatedVariantOptions.push({
+        annotatedVariantOptions.push({
           label: 'Pathogenicity Evidence Line',
           command: () => {
             this.streamVariantAnnotations('pathogenicity-evidence-line')
@@ -572,22 +572,22 @@ export default {
       }
 
       if (this.item?.scoreCalibrations) {
-        annotatatedVariantOptions.push({
+        annotatedVariantOptions.push({
           label: 'Functional Impact Statement',
           command: () => {
             this.streamVariantAnnotations('functional-impact-statement')
           }
         })
       }
 
-      annotatatedVariantOptions.push({
+      annotatedVariantOptions.push({
         label: 'Functional Impact Study Result',
         command: () => {
           this.streamVariantAnnotations('functional-study-result')
         }
       })
 
-      return annotatatedVariantOptions
+      return annotatedVariantOptions
     },
     hideStartAndStopLoss: function () {
       // In clinical mode, when the target is not endogenously edited (so it has a target sequence), omit start- and

src/components/screens/VariantScreen.vue

@@ -1,17 +1,23 @@
 <template>
   <DefaultLayout>
-    <h1 v-if="alleleTitle && variants.length > 1" class="mavedb-variant-title">Variant: {{ alleleTitle }}</h1>
+    <div class="variant-header-row">
+      <h1 v-if="alleleTitle && variants.length > 1" class="mavedb-variant-title">Variant: {{ alleleTitle }}</h1>
+      <div class="variant-header-download-btn-wrapper">
+        <SplitButton
+          :button-props="{class: 'p-button-sm'}"
+          label="Download annotations for selected variant"
+          :menu-button-props="{class: 'p-button-sm'}"
+          :model="annotatedVariantDownloadOptions"
+          @click="annotatedVariantDownloadOptions[0].command"
+        ></SplitButton>
+      </div>
+    </div>
     <ErrorView v-if="variantsStatus == 'Error'" />
     <PageLoading v-else-if="variantsStatus == 'Loading'" />
     <Message v-else-if="variants.length == 0">No variants found in MaveDB</Message>
     <div v-else :class="singleOrMultipleVariantsClassName">
-      <TabView class="mavedb-variants-tabview" :lazy="true">
-        <TabPanel
-          v-for="(variant, variantIndex) in variants"
-          :key="variant.content.urn"
-          v-model:active-index="activeVariantIndex"
-          :header="variant.content.url"
-        >
+      <TabView v-model:active-index="activeVariantIndex" class="mavedb-variants-tabview" :lazy="true">
+        <TabPanel v-for="(variant, variantIndex) in variants" :key="variant.content.urn" :header="variant.content.url">
           <template #header>
             <div v-if="variants.length > 1">
               <div class="mavedb-variants-tabview-header-text" style="color: #000; font-weight: bold">
@@ -51,6 +57,7 @@
 
 <script lang="ts">
 import axios from 'axios'
+import SplitButton from 'primevue/splitbutton'
 import Button from 'primevue/button'
 import Message from 'primevue/message'
 import TabPanel from 'primevue/tabpanel'
@@ -66,7 +73,17 @@ import config from '@/config'
 
 export default defineComponent({
   name: 'VariantMeasurementScreen',
-  components: {Button, DefaultLayout, ErrorView, Message, PageLoading, TabPanel, TabView, VariantMeasurementView},
+  components: {
+    Button,
+    DefaultLayout,
+    ErrorView,
+    Message,
+    PageLoading,
+    TabPanel,
+    TabView,
+    SplitButton,
+    VariantMeasurementView
+  },
 
   props: {
     clingenAlleleId: {
@@ -87,13 +104,22 @@ export default defineComponent({
   }),
 
   computed: {
+    activeVariant: function () {
+      return this.variants[this.activeVariantIndex]?.content
+    },
     alleleTitle: function () {
       if (this.clingenAlleleName) {
         return this.clingenAlleleName
       }
       if (this.variants.length == 1) {
         return this.variantName(this.variants[0])
       }
+      const names = this.variants
+        .map((v) => this.variantName(v.content))
+        .filter((name) => name != null && name !== undefined)
+      if (names.length > 0 && names.every((n) => n === names[0])) {
+        return names[0]
+      }
       return undefined
     },
     clingenAlleleName: function () {
@@ -107,6 +133,35 @@ export default defineComponent({
       } else {
         return 'mavedb-no-variants'
       }
+    },
+    annotatedVariantDownloadOptions: function () {
+      const annotatedVariantOptions = []
+      if (this.activeVariant?.scoreSet?.scoreCalibrations) {
+        annotatedVariantOptions.push({
+          label: 'Pathogenicity evidence line',
+          command: () => {
+            this.fetchVariantAnnotations('clinical-evidence')
+          }
+        })
+      }
+
+      if (this.activeVariant?.scoreSet?.scoreCalibrations) {
+        annotatedVariantOptions.push({
+          label: 'Functional impact statement',
+          command: () => {
+            this.fetchVariantAnnotations('functional-impact')
+          }
+        })
+      }
+
+      annotatedVariantOptions.push({
+        label: 'Functional impact study result',
+        command: () => {
+          this.fetchVariantAnnotations('study-result')
+        }
+      })
+
+      return annotatedVariantOptions
     }
   },
 
@@ -172,8 +227,6 @@ export default defineComponent({
             type: 'associatedNucleotide'
           }))
           this.variants = [...nucleotideVariants, ...proteinVariants, ...associatedNucleotideVariants]
-          console.log('Variants:')
-          console.log(this.variants)
         } else if (this.clingenAlleleId.startsWith('PA')) {
           // do this separately because we want protein to show up first if protein page
           const proteinVariants = (response.data[0]?.exactMatch?.variantEffectMeasurements || []).map((entry: any) => ({
@@ -196,6 +249,57 @@ export default defineComponent({
       }
     },
 
+    fetchVariantAnnotations: async function (annotationType: string) {
+      if (!this.activeVariant?.urn) {
+        return null
+      }
+
+      try {
+        const response = await axios.get(
+          `${config.apiBaseUrl}/mapped-variants/${encodeURIComponent(this.activeVariant.urn)}/va/${annotationType}`,
+          {
+            responseType: 'json'
+          }
+        )
+
+        //convert object to Json.
+        const file = JSON.stringify(response.data)
+        const anchor = document.createElement('a')
+
+        anchor.href = 'data:text/json;charset=utf-8,' + encodeURIComponent(file)
+        anchor.target = '_blank'
+
+        //file default name
+        anchor.download = this.activeVariant.urn + '_' + annotationType + '.json'
+        anchor.click()
+      } catch (error) {
+        let serverMessage = ''
+        if (error && error.response && error.response.data) {
+          if (typeof error.response.data === 'string') {
+            serverMessage = error.response.data
+          } else if (error.response.data.detail) {
+            serverMessage = error.response.data.detail
+          } else {
+            serverMessage = JSON.stringify(error.response.data)
+          }
+        } else if (error && error.message) {
+          serverMessage = error.message
+        } else {
+          serverMessage = 'Unknown error.'
+        }
+        console.log(
+          `Error while fetching variant annotations of type "${annotationType}" for variant "${this.activeVariant.urn}"`,
+          error
+        )
+        this.$toast?.add({
+          severity: 'error',
+          summary: 'Download failed',
+          detail: `Could not fetch variant annotation: ${serverMessage}`,
+          life: 4000
+        })
+      }
+    },
+
     variantName: function (variant: any) {
       return (
         this.currentMappedVariant(variant)?.postMapped?.expressions?.[0]?.value ||
@@ -210,6 +314,16 @@ export default defineComponent({
 </script>
 
 <style scoped>
+.variant-header-row {
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+.variant-header-download-btn-wrapper {
+  margin-left: auto;
+}
 .mavedb-single-variant:deep(.p-tabview-nav-container) {
   display: none;
 }