Merge pull request #413 from VariantEffect/release-2025.2.1

bencap · web-flow · commit 14c5519176ac · 2025-06-23T17:53:20.000-07:00
Release 2025.2.1
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mavedb-ui",
-  "version": "2025.2.0",
+  "version": "2025.2.1",
   "private": true,
   "scripts": {
     "build": "vite build --mode=${MODE=live}",
diff --git a/src/components/screens/SearchVariantsScreen.vue b/src/components/screens/SearchVariantsScreen.vue
@@ -8,7 +8,7 @@
         <div class="flex flex-wrap justify-content-center gap-3">
           <IconField iconPosition="left">
             <InputIcon class="pi pi-search"></InputIcon>
-            <InputText v-model="searchText" ref="searchTextInput" type="search" class="p-inputtext-sm" placeholder="HGVS string" style="width: 500px;" />
+            <InputText v-model="searchText" @keyup.enter="hgvsSearch" ref="searchTextInput" type="search" class="p-inputtext-sm" placeholder="HGVS string" style="width: 500px;" />
           </IconField>
           <Button class="p-button-plain" @click="hgvsSearch">Search</Button>
         </div>
@@ -41,7 +41,7 @@
             <div class="variant-search-result">
               <div v-if="allele.variants.length > 0" class="variant-search-result-button">
                 <router-link :to="`/variants/${allele.clingenAlleleId}`">
-                  <Button label="View in MaveMD" icon="pi pi-eye" />
+                  <Button label="View in MaveDB Clinical View" icon="pi pi-eye" />
                 </router-link>
               </div>
               <div class="variant-search-result-content">
@@ -113,6 +113,8 @@ import InputText from 'primevue/inputtext'
 import Button from 'primevue/button'
 import Message from 'primevue/message'
 import {defineComponent} from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useToast } from 'primevue/usetoast'
 // import {debounce} from 'vue-debounce'
 
 import config from '@/config'
@@ -124,6 +126,12 @@ const SCORE_SETS_TO_SHOW = 5
 export default defineComponent({
   name: 'SearchVariantsScreen',
   components: {Card, Column, DataTable, DefaultLayout, Dropdown, EntityLink, IconField, InputIcon, InputText, Button, Message},
+  setup() {
+    const route = useRoute()
+    const router = useRouter()
+    const toast = useToast()
+    return { route, router, toast }
+  },
 
   data: function() {
     return {
@@ -175,6 +183,46 @@ export default defineComponent({
         }
       }
     },
+    '$route.query.search': {
+      immediate: true,
+      handler(newVal) {
+        if (typeof newVal === 'string') {
+          this.searchText = newVal
+        } else if (!newVal) {
+          this.searchText = ''
+        }
+      }
+    },
+    '$route.query.gene': {
+      immediate: true,
+      handler(newVal) {
+        this.inputGene = typeof newVal === 'string' ? newVal : ''
+      }
+    },
+    '$route.query.variantType': {
+      immediate: true,
+      handler(newVal) {
+        this.inputVariantType = typeof newVal === 'string' ? newVal : ''
+      }
+    },
+    '$route.query.variantPosition': {
+      immediate: true,
+      handler(newVal) {
+        this.inputVariantPosition = typeof newVal === 'string' ? newVal : ''
+      }
+    },
+    '$route.query.refAllele': {
+      immediate: true,
+      handler(newVal) {
+        this.inputReferenceAllele = typeof newVal === 'string' ? newVal : ''
+      }
+    },
+    '$route.query.altAllele': {
+      immediate: true,
+      handler(newVal) {
+        this.inputAlternateAllele = typeof newVal === 'string' ? newVal : ''
+      }
+    },
   },
 
   computed: {
@@ -196,6 +244,11 @@ export default defineComponent({
 
   methods: {
     hgvsSearch: async function() {
+      // Remove fuzzy search params from the URL
+      const { gene, variantType, variantPosition, refAllele, altAllele, ...rest } = this.route.query;
+      this.router.replace({
+        query: { ...rest, search: this.searchText || undefined }
+      })
       this.alleles = []
       this.loading = true;
       if (this.searchText !== null && this.searchText !== '') {
@@ -249,10 +302,16 @@ export default defineComponent({
           break
         }
         this.alleles.push(newAllele)
-      } catch (error) {
+      } catch (error: any) {
         // NOTE: not resetting alleles here, because any error will have occurred before pushing to alleles.
         // don't want to reset alleles because this function may be called in a loop to process several hgvs strings.
         console.log("Error while loading search results", error)
+        this.toast.add({
+          severity: 'error',
+          summary: error.response.data?.errorType && error.response.data?.description ? `${error.response.data?.errorType}: ${error.response.data?.description}` : 'Error fetching results',
+          detail: error.response.data?.message || 'Invalid HGVS string provided.',
+          life: 10000,
+        })
       }
     },
     searchVariants: async function() {
@@ -265,21 +324,38 @@ export default defineComponent({
               clingenAlleleIds: [allele.clingenAlleleId]
             }
           )
-          if (response.data !== null && response.data.length > 0) {
-            allele.variants = response.data[0]
+
+          allele.variants = response.data[0]
+          allele.variantsStatus = 'Loaded'
+        } catch (error: any) {
+          allele.variants = []
+          console.log("Error while loading MaveDB search results for variant", error)
+          if (error.response?.status === 404) {
             allele.variantsStatus = 'Loaded'
+            this.toast.add({ severity: 'info', summary: 'No results found', detail: 'No variants match the provided search criteria.', life: 10000 })
+          } else if (error.response?.status >= 500) {
+            allele.variantsStatus = 'Error'
+            this.toast.add({ severity: 'error', summary: 'Server Error', detail: 'The server encountered an unexpected error. Please try again later.', life: 10000 })
           } else {
-            allele.variants = []
-            allele.variantsStatus = 'Loaded'
+            allele.variantsStatus = 'Error'
+            this.toast.add({ severity: 'error', summary: 'Error fetching results', detail: 'An error occurred while fetching MaveDB variants.', life: 10000 })
           }
-        } catch (error) {
-          allele.variants = []
-          allele.variantsStatus = 'Error'
-          console.log("Error while loading MaveDB search results for variant", error)
         }
       }
     },
     fuzzySearch: async function() {
+      // Remove HGVS search param from the URL
+      const { search, ...rest } = this.route.query;
+      this.router.replace({
+        query: {
+          ...rest,
+          gene: this.inputGene || undefined,
+          variantType: this.inputVariantType || undefined,
+          variantPosition: this.inputVariantPosition || undefined,
+          refAllele: this.inputReferenceAllele || undefined,
+          altAllele: this.inputAlternateAllele || undefined
+        }
+      })
       this.alleles = []
       this.loading = true;
       await this.fetchFuzzySearchResults()
@@ -351,13 +427,40 @@ export default defineComponent({
           for (const hgvsString of hgvsStrings) {
             await this.fetchHgvsSearchResults(hgvsString.hgvsString, hgvsString.maneStatus)
           }
-        } catch (error) {
+        } catch (error: any) {
           this.alleles = []
           console.log("Error while loading search results", error)
+          this.toast.add({
+            severity: 'error',
+            summary: error.response.data?.errorType && error.response.data?.description ? `${error.response.data?.errorType}: ${error.response.data?.description}` : 'Error fetching results',
+            detail: error.response.data?.message || 'Invalid HGVS string provided.',
+            life: 10000,
+          })
         }
       }
     }
+  },
+
+  mounted() {
+    // If HGVS search param is present, run HGVS search
+    if (this.route.query.search && String(this.route.query.search).trim() !== '') {
+      this.hgvsSearchVisible = true;
+      this.fuzzySearchVisible = false;
+      this.hgvsSearch();
+    } else if (
+      this.route.query.gene ||
+      this.route.query.variantType ||
+      this.route.query.variantPosition ||
+      this.route.query.refAllele ||
+      this.route.query.altAllele
+    ) {
+      // If any fuzzy search param is present, run fuzzy search
+      this.hgvsSearchVisible = false;
+      this.fuzzySearchVisible = true;
+      this.fuzzySearch();
+    }
   }
+
 })
 
 </script>
diff --git a/src/components/screens/SearchView.vue b/src/components/screens/SearchView.vue
@@ -60,6 +60,7 @@ import { paths, components } from '@/schema/openapi'
 
 import type {LocationQueryValue} from "vue-router";
 import { textForTargetGeneCategory } from '@/lib/target-genes'
+import { routeToVariantSearchIfVariantIsSearchable } from '@/lib/search'
 
 type ShortScoreSet = components['schemas']['ShortScoreSet']
 type ShortTargetGene = components['schemas']['ShortTargetGene']
@@ -316,6 +317,12 @@ export default defineComponent({
       this.debouncedSearchFunction()
     },
     search: async function() {
+      // TODO#410 Because of the debounced search, this is super aggressive and will send the user to the variant search page as they are
+      // typing. I'm not sure that is the best user experience, but it seems unlikely people will actually be typing an HGVS string.
+      if (routeToVariantSearchIfVariantIsSearchable(this.searchText)) {
+        return
+      }
+
       this.$router.push({query: {
         ...(this.searchText && this.searchText.length > 0) ? {search: this.searchText} : {},
         ...(this.filterTargetNames.length > 0) ? {'target-name': this.filterTargetNames} : {},
diff --git a/src/lib/mave-hgvs.ts b/src/lib/mave-hgvs.ts
@@ -122,3 +122,13 @@ export function preferredVariantLabel(variant: SimpleMaveVariant): VariantLabel
     return {mavedb_label: variant.accession}
   }
 }
+
+
+/**
+ * Regular expression for parsing a generic HGVS style variant.
+ *
+ * This should be used only for deciding whether a string is a valid HGVS variant, not for parsing it.
+ * It matches a string that starts with an identifier (e.g., "NM_001301717.2") followed by a colon and a description.
+ * The description can be anything (which isn't technically correct), including spaces and special characters.
+ */
+export const genericVariant = /^(?<identifier>[A-z_0-9.]+):(?<description>.*)$/gm
diff --git a/src/lib/search.ts b/src/lib/search.ts
@@ -0,0 +1,59 @@
+import router from '@/router'
+import { genericVariant } from "./mave-hgvs"
+
+export function routeToVariantSearchIfVariantIsSearchable(searchText: string | null | undefined): boolean {
+    if (!searchText || searchText.trim() === '') {
+        return false
+    }
+
+    searchText = searchText.trim()
+    const hgvsMatches = genericVariant.exec(searchText)
+    if (hgvsMatches && hgvsMatches.groups) {
+        const identifier = hgvsMatches.groups.identifier
+        const description = hgvsMatches.groups.description
+
+        // Regex for RefSeq/Ensembl transcript IDs
+        const transcriptRegex = /^(N[CMPR]_|X[MR]_|ENST|ENSMUST|ENSMUST|XM_|XR_)[0-9]+(\.[0-9]+)?$/gm
+        if (transcriptRegex.test(identifier)) {
+            // Transcript: treat as normal HGVS
+            console.log(`Routing to search-variants with HGVS: ${hgvsMatches[0]}`)
+            router.push({ name: 'search-variants', query: { search: hgvsMatches[0] } })
+        } else {
+            // Assume identifier is an HGNC gene symbol, parse description for fuzzy search
+            // Example: BRCA1:c.123A>G or BRCA1:p.Arg123Gly
+            let gene = identifier
+            let variantType = ''
+            let variantPosition = ''
+            let refAllele = ''
+            let altAllele = ''
+
+            // Try to parse c. or p. notation
+            const fuzzyMatch = /^(c\.|p\.)?([A-Za-z]+)?([0-9]+)([A-Za-z*-]+)?(?:>([A-Za-z*-]+))?$/gm.exec(description)
+            if (fuzzyMatch) {
+                variantType = fuzzyMatch[1] || ''
+                if (variantType === 'c.') {
+                    variantPosition = fuzzyMatch[3] || ''
+                    refAllele = fuzzyMatch[4] || ''
+                    altAllele = fuzzyMatch[5] || ''
+                } else if (variantType === 'p.') {
+                    refAllele = fuzzyMatch[2] || ''
+                    variantPosition = fuzzyMatch[3] || ''
+                    altAllele = fuzzyMatch[4] || ''
+                }
+            }
+
+            router.push({
+                name: 'search-variants',
+                query: {
+                    gene,
+                    variantType,
+                    variantPosition,
+                    refAllele,
+                    altAllele
+                }
+            })
+        }
+        return true
+    }
+    return false
+}

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "mavedb-ui",`
`3`		`- "version": "2025.2.0",`
	`3`	`+ "version": "2025.2.1",`
`4`	`4`	`"private": true,`
`5`	`5`	`"scripts": {`
`6`	`6`	`"build": "vite build --mode=${MODE=live}",`
Original file line number	Diff line number	Diff line change
`@@ -122,3 +122,13 @@ export function preferredVariantLabel(variant: SimpleMaveVariant): VariantLabel`
`122`	`122`	`return {mavedb_label: variant.accession}`
`123`	`123`	`}`
`124`	`124`	`}`
	`125`	`+`
	`126`	`+`
	`127`	`+/**`
	`128`	`+ * Regular expression for parsing a generic HGVS style variant.`
	`129`	`+ *`
	`130`	`+ * This should be used only for deciding whether a string is a valid HGVS variant, not for parsing it.`
	`131`	`+ * It matches a string that starts with an identifier (e.g., "NM_001301717.2") followed by a colon and a description.`
	`132`	`+ * The description can be anything (which isn't technically correct), including spaces and special characters.`
	`133`	`+ */`
	`134`	`+export const genericVariant = /^(?<identifier>[A-z_0-9.]+):(?<description>.*)$/gm`