feat: updates and story for StrucvarsToolCard (#43)

src/components/StrucvarToolsCard/StrucvarToolsCard.spec.ts

@@ -21,8 +21,7 @@ describe.concurrent('StrucvarToolsCard.vue', async () => {
       { component: StrucvarToolsCard },
       {
         props: {
-          strucvar: structuredClone(strucvarInfo),
-          genomeBuild: 'grch37'
+          strucvar: structuredClone(strucvarInfo)
         }
       }
     )

src/components/StrucvarToolsCard/StrucvarToolsCard.stories.ts

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+import { Strucvar } from '../../lib/genomicVars'
+import StrucvarToolsCard from './StrucvarToolsCard.vue'
+
+// We define the fixtures inline here as they are small.
+const delBrca1: Strucvar = {
+  svType: 'DEL',
+  genomeBuild: 'grch37',
+  chrom: '17',
+  start: 41176312,
+  stop: 41277500,
+  userRepr: 'DEL:chr17:41176312:41277500'
+}
+
+const meta = {
+  title: 'Strucvar/StrucvarToolsCard',
+  component: StrucvarToolsCard,
+  tags: ['autodocs'],
+  argTypes: {
+    strucvar: { control: { type: 'object' } }
+  },
+  args: {
+    strucvar: delBrca1
+  }
+} satisfies Meta<typeof StrucvarToolsCard>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const DelBRCA1: Story = {
+  args: {
+    strucvar: delBrca1
+  }
+}

src/components/StrucvarToolsCard/StrucvarToolsCard.vue

@@ -1,27 +1,19 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-import type { GenomeBuild } from '../../lib/genomeBuilds'
 import { type Strucvar } from '../../lib/genomicVars'
 import DocsLink from '../DocsLink/DocsLink.vue'
 
-/** Type for this component's props. */
-export interface Props {
-  genomeBuild?: GenomeBuild
-  // eslint-disable-next-line vue/require-default-prop
+/** The component's props. */
+const props = defineProps<{
   strucvar?: Strucvar
-}
-
-/** The component's props, fallback for genome build is GRCh37. */
-const props = withDefaults(defineProps<Props>(), {
-  genomeBuild: 'grch37'
-})
+}>()
 
 const ucscLinkout = computed((): string => {
   if (!props.strucvar) {
     return '#'
   }
-  const db = props.genomeBuild === 'grch37' ? 'hg19' : 'hg38'
+  const db = props.strucvar?.genomeBuild === 'grch37' ? 'hg19' : 'hg38'
   return (
     `https://genome-euro.ucsc.edu/cgi-bin/hgTracks?db=${db}&position=` +
     `${props.strucvar.chrom}:${props.strucvar.start}-` +
@@ -34,9 +26,9 @@ const ensemblLinkout = computed((): string => {
     return '#'
   }
   const loc = `${props.strucvar.chrom}:${props.strucvar.start}-${props.strucvar.stop}`
-  if (props.genomeBuild === 'grch37') {
+  if (props.strucvar?.genomeBuild === 'grch37') {
     return `https://grch37.ensembl.org/Homo_sapiens/Location/View?r=${loc}`
-  } else if (props.genomeBuild === 'grch38') {
+  } else if (props.strucvar?.genomeBuild === 'grch38') {
     return `https://ensembl.org/Homo_sapiens/Location/View?r=${loc}`
   }
   return '#'
@@ -46,7 +38,7 @@ const dgvLinkout = computed((): string => {
   if (!props.strucvar) {
     return '#'
   }
-  const db = props.genomeBuild === 'grch37' ? 'hg19' : 'hg38'
+  const db = props.strucvar?.genomeBuild === 'grch37' ? 'hg19' : 'hg38'
   return (
     `http://dgv.tcag.ca/gb2/gbrowse/dgv2_${db}/?name=${props.strucvar.chrom}:` +
     `${props.strucvar.start}-${props.strucvar.stop};search=Search`
@@ -57,7 +49,7 @@ const gnomadLinkout = computed((): string => {
   if (!props.strucvar) {
     return '#'
   }
-  const dataset = props.genomeBuild === 'grch37' ? 'gnomad_r2_1' : 'gnomad_r3'
+  const dataset = props.strucvar?.genomeBuild === 'grch37' ? 'gnomad_r2_1' : 'gnomad_r3'
   return (
     `https://gnomad.broadinstitute.org/region/${props.strucvar.chrom}:` +
     `${props.strucvar.start}-${props.strucvar.stop}?dataset=${dataset}`
@@ -68,7 +60,7 @@ const varsomeLinkout = computed((): string => {
   if (!props.strucvar) {
     return '#'
   }
-  const urlRelease = props.genomeBuild === 'grch37' ? 'hg19' : 'hg38'
+  const urlRelease = props.strucvar?.genomeBuild === 'grch37' ? 'hg19' : 'hg38'
   const chrom = props.strucvar.chrom.startsWith('chr')
     ? props.strucvar.chrom
     : `chr${props.strucvar.chrom}`
@@ -80,7 +72,7 @@ const franklinLinkout = computed((): string => {
     return '#'
   }
   const { chrom, start, stop, svType } = props.strucvar
-  const urlRelease = props.genomeBuild === 'grch37' ? 'hg19' : 'hg38'
+  const urlRelease = props.strucvar?.genomeBuild === 'grch37' ? 'hg19' : 'hg38'
   return `https://franklin.genoox.com/clinical-db/variant/sv/chr${chrom}-${start}-${stop}-${svType}-${urlRelease}`
 })