fix: Add type definitions (#68) (#71)

frontend/src/components/VariantDetails/AcmgRating.vue

@@ -3,6 +3,7 @@ import { computed, onMounted, ref, watch } from 'vue'
 
 import { StoreState } from '@/stores/misc'
 import { useVariantAcmgRatingStore } from '@/stores/variantAcmgRating'
+import { type SmallVariant } from '@/stores/variantInfo'
 import {
   AcmgCriteria,
   StateSource,
@@ -15,7 +16,7 @@ import {
 } from '@/lib/acmgSeqVar'
 
 const props = defineProps({
-  smallVariant: Object
+  smallVariant: Object as () => SmallVariant | undefined
 })
 
 const acmgRatingStore = useVariantAcmgRatingStore()

frontend/src/components/VariantDetails/BeaconNetwork.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { ref } from 'vue'
+import { type SmallVariant } from '@/stores/variantInfo'
 
 const props = defineProps({
-  smallVariant: Object
+  smallVariant: Object as () => SmallVariant | undefined
 })
 
 const beaconAddress = ref('')

frontend/src/components/VariantDetails/FreqsAutosomal.vue

@@ -2,9 +2,10 @@
 import { computed, ref } from 'vue'
 
 import { roundIt, separateIt as sep } from '@/lib/utils'
+import { type SmallVariant } from '@/stores/variantInfo'
 
 const props = defineProps<{
-  smallVar: any
+  smallVar: SmallVariant
   varAnnos: any
   dataset: string
 }>()

frontend/src/components/VariantDetails/FreqsMitochondrial.vue

@@ -2,9 +2,10 @@
 import { computed } from 'vue'
 
 import { roundIt, isVariantMtHomopolymer } from '@/lib/utils'
+import { type SmallVariant } from '@/stores/variantInfo'
 
 const props = defineProps<{
-  smallVar: any
+  smallVar: SmallVariant
   varAnnos: any
 }>()
 

frontend/src/components/VariantDetails/VariantFreqs.vue

@@ -3,9 +3,10 @@ import { isVariantMt } from '@/lib/utils'
 
 import VariantDetailsFreqsAutosomal from '@/components/VariantDetails/FreqsAutosomal.vue'
 import VariantDetailsFreqsMitochondrial from '@/components/VariantDetails/FreqsMitochondrial.vue'
+import { type SmallVariant } from '@/stores/variantInfo'
 
 const props = defineProps<{
-  smallVar: any
+  smallVar: SmallVariant
   varAnnos: any
 }>()
 

frontend/src/components/VariantDetails/VariantTools.vue

@@ -4,9 +4,10 @@ import { computed } from 'vue'
 import { roundIt } from '@/lib/utils'
 
 import ScoreDisplay from '@/components/VariantDetails/ScoreDisplay.vue'
+import { type SmallVariant } from '@/stores/variantInfo'
 
 export interface Props {
-  smallVar: any
+  smallVar: SmallVariant | null
   varAnnos: any
 }
 
@@ -197,11 +198,11 @@ const varsomeLinkout = computed((): string => {
 })
 
 const jumpToLocus = async () => {
-  const chrPrefixed = props.smallVar.chromosome.startsWith('chr')
-    ? props.smallVar.chromosome
-    : `chr${props.smallVar.chromosome}`
+  const chrPrefixed = props.smallVar?.chromosome.startsWith('chr')
+    ? props.smallVar?.chromosome
+    : `chr${props.smallVar?.chromosome}`
   await fetch(
-    `http://127.0.0.1:60151/goto?locus=${chrPrefixed}:${props.smallVar.start}-${props.smallVar.end}`
+    `http://127.0.0.1:60151/goto?locus=${chrPrefixed}:${props.smallVar?.start}-${props.smallVar?.end}`
   ).catch((e) => {
     const msg = "Couldn't connect to IGV. Please make sure IGV is running and try again."
     alert(msg)

frontend/src/components/VariantDetails/VariantValidator.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { API_BASE_PREFIX } from '@/api/common'
+import { type SmallVariant } from '@/stores/variantInfo'
 
 const API_BASE_URL = API_BASE_PREFIX
 
@@ -12,7 +13,7 @@ enum VariantValidatorStates {
 }
 
 const props = defineProps<{
-  smallVariant?: any
+  smallVariant?: SmallVariant
 }>()
 
 const variantValidatorState = ref<VariantValidatorStates>(VariantValidatorStates.Initial)
@@ -23,9 +24,9 @@ const queryVariantValidatorApi = async () => {
   variantValidatorState.value = VariantValidatorStates.Running
   const url =
     API_BASE_URL +
-    `variantvalidator/${props.smallVariant.release}/` +
-    `${props.smallVariant.chromosome}-${props.smallVariant.start}-` +
-    `${props.smallVariant.reference}-${props.smallVariant.alternative}` +
+    `variantvalidator/${props.smallVariant?.release}/` +
+    `${props.smallVariant?.chromosome}-${props.smallVariant?.start}-` +
+    `${props.smallVariant?.reference}-${props.smallVariant?.alternative}` +
     `/all?content-type=application%2Fjson`
   const res = await fetch(url)
   if (res.ok) {

frontend/src/router/index.ts

@@ -8,6 +8,7 @@ import GeneDetailView from '@/views/GeneDetailView.vue'
 import VariantDetailView from '@/views/VariantDetailView.vue'
 import GenesListView from '@/views/GenesListView.vue'
 import ACMGCriteriaDocs from '@/views/ACMGCriteriaDocs.vue'
+import PathNotFound from '@/views/PathNotFound.vue'
 
 const routes = [
   {
@@ -50,6 +51,11 @@ const routes = [
     path: '/acmg-docs',
     name: 'acmg-docs',
     component: ACMGCriteriaDocs
+  },
+  {
+    path: '/:pathMatch(.*)*',
+    name: 'not-found',
+    component: PathNotFound
   }
 ]
 

frontend/src/stores/genesList.ts

@@ -30,7 +30,7 @@ export const useGenesListStore = defineStore('genesList', () => {
   }
 
   const checkResultsMatch = async () => {
-    if (query.value === null) {
+    if (query.value === null || genesList.value === null) {
       return null
     }
     const queryArray = query.value.split('&')

frontend/src/stores/variantAcmgRating.ts

@@ -7,12 +7,10 @@ import { ref } from 'vue'
 import { StoreState } from '@/stores/misc'
 import { API_BASE_PREFIX } from '@/api/common'
 import { MultiSourceAcmgCriteriaState, StateSource, AcmgCriteria, Presence } from '@/lib/acmgSeqVar'
+import { type SmallVariant } from './variantInfo'
 
 const API_BASE_URL = API_BASE_PREFIX
 
-/** Alias definition of SmallVariant type; to be defined later. */
-type SmallVariant = any
-
 export const useVariantAcmgRatingStore = defineStore('variantAcmgRating', () => {
   /** The current store state. */
   const storeState = ref<StoreState>(StoreState.Initial)

frontend/src/stores/variantInfo.ts

@@ -12,11 +12,16 @@ import { MehariClient } from '@/api/mehari'
 import { infoFromQuery } from '@/lib/utils'
 import { StoreState } from '@/stores/misc'
 
-type SmallVariant = any
-type GeneInfo = any
-type GeneClinvarInfo = any
-type VarAnnos = any
-type TxCsq = any
+/** Alias definition of SmallVariant type. */
+export type SmallVariant = {
+  release: string
+  chromosome: string
+  start: string
+  end: string
+  reference: string
+  alternative: string
+  hgnc_id?: string
+}
 
 export const useVariantInfoStore = defineStore('variantInfo', () => {
   /** The current store state. */
@@ -29,16 +34,16 @@ export const useVariantInfoStore = defineStore('variantInfo', () => {
   const smallVariant = ref<SmallVariant | null>(null)
 
   /** Variant-related information from annonars. */
-  const varAnnos = ref<VarAnnos | null>(null)
+  const varAnnos = ref<any | null>(null)
 
   /** ClinVar gene-related information from annoars. */
-  const geneClinvar = ref<GeneClinvarInfo | null>(null)
+  const geneClinvar = ref<any | null>(null)
 
   /** Information about related gene. */
-  const geneInfo = ref<GeneInfo | null>(null)
+  const geneInfo = ref<any | null>(null)
 
   /** Transcript consequence information from mehari. */
-  const txCsq = ref<TxCsq | null>(null)
+  const txCsq = ref<any | null>(null)
 
   function clearData() {
     storeState.value = StoreState.Initial

frontend/src/views/PathNotFound.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { defineComponent } from 'vue'
+
+defineComponent({
+  name: 'PathNotFound'
+})
+</script>
+
+<template>
+  <div class="not-found">
+    <h1>404 - Page Not Found</h1>
+    <p>Oops! The page you are looking for does not exist.</p>
+    <router-link to="/">Go back to the home page</router-link>
+  </div>
+</template>
+
+<style scoped>
+.not-found {
+  text-align: center;
+  margin-top: 100px;
+  font-size: 24px;
+}
+</style>

frontend/src/views/VariantDetailView.vue

@@ -4,6 +4,7 @@ import { useRoute, useRouter } from 'vue-router'
 
 import { useVariantInfoStore } from '@/stores/variantInfo'
 import { StoreState } from '@/stores/misc'
+import { type SmallVariant } from '@/stores/variantInfo'
 
 import AcmgRating from '@/components/VariantDetails/AcmgRating.vue'
 import HeaderDetailPage from '@/components/HeaderDetailPage.vue'
@@ -121,7 +122,7 @@ const genomeReleaseRef = ref(props.genomeRelease)
         <div id="beacon-network" class="variant-item">
           <h2>Beacon Network</h2>
           <v-divider />
-          <BeaconNetwork :small-variant="variantInfoStore.smallVariant" />
+          <BeaconNetwork :small-variant="variantInfoStore.smallVariant || undefined" />
         </div>
 
         <div id="clinvar" class="variant-item">
@@ -134,7 +135,7 @@ const genomeReleaseRef = ref(props.genomeRelease)
           <h2>Population Frequencies</h2>
           <v-divider />
           <VariantDetailsFreqs
-            :small-var="variantInfoStore.smallVariant"
+            :small-var="variantInfoStore.smallVariant as SmallVariant"
             :var-annos="variantInfoStore.varAnnos"
           />
         </div>
@@ -151,7 +152,7 @@ const genomeReleaseRef = ref(props.genomeRelease)
         <div id="acmg-rating" class="variant-item">
           <h2>ACMG Rating</h2>
           <v-divider />
-          <AcmgRating :small-variant="variantInfoStore.smallVariant" />
+          <AcmgRating :small-variant="variantInfoStore.smallVariant || undefined" />
         </div>
 
         <div id="tx-csq" class="variant-item">
@@ -169,7 +170,9 @@ const genomeReleaseRef = ref(props.genomeRelease)
         <div id="variant-validator" class="variant-item">
           <h2>Variant Validator</h2>
           <v-divider />
-          <VariantDetailsVariantValidator :small-variant="variantInfoStore.smallVariant" />
+          <VariantDetailsVariantValidator
+            :small-variant="variantInfoStore.smallVariant || undefined"
+          />
         </div>
       </div>
 

frontend/src/views/__tests__/PathNotFound.spec.ts

@@ -0,0 +1,47 @@
+import { describe, expect, it, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { createRouter, createWebHistory } from 'vue-router'
+import { routes } from '@/router'
+
+import { createVuetify } from 'vuetify'
+import * as components from 'vuetify/components'
+import * as directives from 'vuetify/directives'
+
+import PathNotFound from '../PathNotFound.vue'
+
+const vuetify = createVuetify({
+  components,
+  directives
+})
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: routes
+})
+// Mock router push
+router.push = vi.fn()
+
+const makeWrapper = () => {
+  return mount(
+    {
+      template: '<v-app><PathNotFound /></v-app>'
+    },
+    {
+      global: {
+        plugins: [vuetify, router],
+        components: {
+          PathNotFound
+        }
+      }
+    }
+  )
+}
+describe.concurrent('PathNotFound', async () => {
+  it('renders the main content', () => {
+    const wrapper = makeWrapper()
+
+    const mainContent = wrapper.find('.not-found')
+    expect(mainContent.exists()).toBe(true)
+    expect(mainContent.html()).toMatch('404 - Page Not Found')
+  })
+})