feat: adding StrucvarGeneListCard

.storybook/HomeStorybook.vue

@@ -0,0 +1,3 @@
+<script setup lang="ts"></script>
+
+<template></template>

.storybook/plugins/index.ts

@@ -1,7 +1,8 @@
 import type { App } from 'vue'
 
-import vuetify from './vuetify'
+import { router } from './router'
+import { vuetify } from './vuetify'
 
 export async function registerPlugins(app: App) {
-  app.use(vuetify)
+  app.use(vuetify).use(router)
 }

.storybook/plugins/router.ts

@@ -0,0 +1,21 @@
+import { createRouter, createWebHistory } from 'vue-router'
+
+import HomeStorybook from '../HomeStorybook.vue'
+
+const routes = [
+  {
+    path: '/',
+    name: 'home',
+    component: HomeStorybook
+  },
+  {
+    path: '/gene-details/:gene',
+    name: 'gene-details',
+    component: HomeStorybook
+  }
+]
+
+export const router = createRouter({
+  history: createWebHistory(),
+  routes
+})

.storybook/plugins/vuetify.ts

@@ -27,7 +27,7 @@ const customLightTheme: ThemeDefinition = {
 }
 
 // https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
-export default createVuetify({
+export const vuetify = createVuetify({
   blueprint: md3,
   components: {
     ...components

package.json

@@ -57,6 +57,7 @@
     "vite-plugin-css-injected-by-js": "^3.3.1",
     "vite-plugin-static-copy": "^1.0.1",
     "vue": "^3.4.15",
+    "vue-router": "^4.2.5",
     "vuetify": "^3.5.1"
   },
   "devDependencies": {

src/api/mehari/constants.ts

@@ -0,0 +1,10 @@
+/** Mapping from transcript effect to label. */
+export const TX_EFFECT_LABELS: { [key: string]: string } = {
+  transcript_variant: 'whole tx',
+  exon_variant: 'exonic',
+  splice_region_variant: 'splicing',
+  intron_variant: 'intronic',
+  upstream_variant: 'upstream',
+  downstream_variant: 'downstream',
+  other: 'other'
+}

src/api/mehari/index.ts

@@ -1,2 +1,3 @@
 export * from './types'
 export * from './client'
+export * from './constants'

src/components/StrucvarGeneListCard/GeneDosage.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { ClingenDosageScore } from '../../pbs/annonars/genes/base'
+import { CLINGEN_DOSAGE_COLOR, CLINGEN_DOSAGE_SCORES } from '../GenePathogenicityCard/constants'
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const props = defineProps<{
+  dosage?: ClingenDosageScore
+  geneSymbol?: string
+}>()
+</script>
+
+<template>
+  <template v-if="dosage === ClingenDosageScore.CLINGEN_DOSAGE_SCORE_RECESSIVE">
+    <a
+      :href="`https://search.clinicalgenome.org/kb/gene-dosage/${geneSymbol ?? ''}`"
+      target="_blank"
+    >
+      <v-chip density="compact" rounded="xl" :class="`bg-${CLINGEN_DOSAGE_COLOR[dosage]}`">
+        AR
+      </v-chip>
+      <small class="pl-1"><v-icon>mdi-launch</v-icon></small>
+    </a>
+  </template>
+  <template
+    v-else-if="dosage === undefined || dosage === ClingenDosageScore.CLINGEN_DOSAGE_SCORE_UNKNOWN"
+  >
+    <v-chip density="compact" rounded="xl" :class="`bg-grey-lighten-5`"> N/A </v-chip>
+    <small class="pl-1">
+      <v-icon><!--spacer only--></v-icon>
+    </small>
+  </template>
+  <template v-else>
+    <a
+      :href="`https://search.clinicalgenome.org/kb/gene-dosage/${geneSymbol ?? ''}`"
+      target="_blank"
+    >
+      <v-chip density="compact" rounded="xl" :class="`bg-${CLINGEN_DOSAGE_COLOR[dosage]}`">
+        {{ CLINGEN_DOSAGE_SCORES[dosage] }}
+      </v-chip>
+      <small class="pl-1"><v-icon>mdi-launch</v-icon></small>
+    </a>
+  </template>
+</template>