feat: Implementation of search for general entries (#20) (#37)

backend/app/main.py

@@ -101,6 +101,30 @@ async def version():
     return Response(content=version)
 
 
+# Register app for returning proxy for variantvalidator.org.
+@app.get("/variantvalidator/{path:path}")
+async def variantvalidator(request: Request, path: str):
+    """Implement reverse proxy for variantvalidator.org."""
+    url = request.url
+    # Change grch to GRCh and chr to nothing in path
+    path = path.replace("grch", "GRCh").replace("chr", "")
+    backend_url = "https://rest.variantvalidator.org/VariantValidator/variantvalidator/" + path
+
+    backend_url = backend_url + (f"?{url.query}" if url.query else "")
+    backend_req = client.build_request(
+        method=request.method,
+        url=backend_url,
+        content=await request.body(),
+    )
+    backend_resp = await client.send(backend_req, stream=True)
+    return StreamingResponse(
+        backend_resp.aiter_raw(),
+        status_code=backend_resp.status_code,
+        headers=backend_resp.headers,
+        background=BackgroundTask(backend_resp.aclose),
+    )
+
+
 # Register route for favicon.
 @app.get("/favicon.ico")
 async def favicon():

frontend/package.json

@@ -42,6 +42,7 @@
     "prettier": "^3.0.2",
     "typescript": "~5.2.2",
     "vite": "^4.3.9",
+    "vite-plugin-vuetify": "^1.0.2",
     "vitest": "^0.32.4",
     "vitest-fetch-mock": "^0.2.2",
     "vue-cli-plugin-vuetify": "~2.5.8",

frontend/src/api/__tests__/utils.spec.ts

@@ -36,11 +36,11 @@ describe('roundIt method', () => {
 
 describe('search method', () => {
   it('should return route location if match', () => {
-    const result = search('BRCA1', 'ghcr37')
+    const result = search('HGNC:1100', 'ghcr37')
     expect(result).toEqual({
       name: 'gene',
       params: {
-        searchTerm: 'BRCA1',
+        searchTerm: 'HGNC:1100',
         genomeRelease: 'ghcr37'
       }
     })

frontend/src/api/annonars.ts

@@ -40,4 +40,11 @@ export class AnnonarsClient {
     })
     return await response.json()
   }
+
+  async fetchGenes(query: string): Promise<any> {
+    const response = await fetch(`${this.apiBaseUrl}genes/search?${query}`, {
+      method: 'GET'
+    })
+    return await response.json()
+  }
 }

frontend/src/api/utils.ts

@@ -83,11 +83,13 @@ export const isVariantMtHomopolymer = (smallVar: any): any => {
  * the correct page.
  *
  * @param searchTerm The search term to use.
+ * @param genomeRelease The genome release to use.
  */
 export const search = (searchTerm: string, genomeRelease: string) => {
   interface RouteLocationFragment {
     name: string
     params?: any
+    query?: any
   }
 
   type RouteLoctionBuilder = () => RouteLocationFragment
@@ -96,24 +98,34 @@ export const search = (searchTerm: string, genomeRelease: string) => {
   // first match.
   const SEARCH_REGEXPS: [RegExp, RouteLoctionBuilder][] = [
     [
-      /^chr\d+:\d+:[A-Z]:[A-Z]$/,
+      /^HGNC:\d+$/,
       (): RouteLocationFragment => ({
-        name: 'variant',
+        name: 'gene',
         params: {
           searchTerm: searchTerm,
           genomeRelease: genomeRelease
         }
       })
     ],
     [
-      /^.*$/,
+      /^chr\d+:\d+:[A-Z]:[A-Z]$/,
       (): RouteLocationFragment => ({
-        name: 'gene',
+        name: 'variant',
         params: {
           searchTerm: searchTerm,
           genomeRelease: genomeRelease
         }
       })
+    ],
+    [
+      /^.*$/,
+      (): RouteLocationFragment => ({
+        name: 'genes',
+        query: {
+          q: searchTerm,
+          fields: 'hgnc_id,ensembl_gene_id,ncbi_gene_id,symbol'
+        }
+      })
     ]
   ]
 

frontend/src/components/HeaderDefault.vue

@@ -22,7 +22,7 @@ onMounted(() => {
           alt="logo"
           width="70"
         />
-        Explanation and Evaluation of Variants
+        REEV: Explanation and Evaluation of Variants
       </router-link>
     </v-toolbar-title>
     <v-spacer></v-spacer>

frontend/src/components/HeaderDetailPage.vue

@@ -1,19 +1,31 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { watch, ref } from 'vue'
 import { useRouter } from 'vue-router'
+
 import SearchBar from '@/components/SearchBar.vue'
 import { search } from '@/api/utils'
+
 export interface Props {
   searchTerm?: string
   genomeRelease?: string
 }
+
 const props = withDefaults(defineProps<Props>(), {
   searchTerm: '',
   genomeRelease: 'grch37'
 })
+
 const router = useRouter()
+
 const searchTermRef = ref(props.searchTerm)
 const genomeReleaseRef = ref(props.genomeRelease)
+
+/**
+ * Perform a search based on the current search term and genome release.
+ *
+ * If a route is found for the search term then redirect to that route.
+ * Otherwise log an error.
+ */
 const performSearch = async () => {
   const routeLocation: any = search(searchTermRef.value, genomeReleaseRef.value)
   if (routeLocation) {
@@ -22,6 +34,12 @@ const performSearch = async () => {
     console.error(`no route found for ${searchTermRef.value}`)
   }
 }
+
+const updateTerms = async () => {
+  searchTermRef.value = props.searchTerm
+}
+
+watch(() => props.searchTerm, updateTerms)
 </script>
 
 <template>

frontend/src/components/VariantDetails/BeaconNetwork.vue

@@ -30,7 +30,7 @@ const loadBeacon = () => {
     Query Beacon -----|>
     <v-btn prepend-icon="mdi-refresh" style="float: right" @click="loadBeacon()"> Load </v-btn>
   </h3>
-  <div class="card-body">
+  <div>
     <iframe
       v-if="beaconAddress"
       ref="beaconFrame"