feat: adding SeqvarBeaconNetworkCard (#54)

src/components/SeqvarBeaconNetworkCard/SeqvarBeaconNetworkCard.spec.ts

@@ -0,0 +1,64 @@
+import { describe, expect, it } from 'vitest'
+import { VBtn } from 'vuetify/components'
+
+import type { Seqvar } from '../../lib/genomicVars'
+import { setupMountedComponents } from '../../lib/testUtils'
+import SeqvarBeaconNetworkCard from './SeqvarBeaconNetworkCard.vue'
+
+// Sequence Variant in BRCA1
+const seqvarBrca1: Seqvar = {
+  genomeBuild: 'grch37',
+  chrom: '17',
+  pos: 41215920,
+  del: 'G',
+  ins: 'T',
+  userRepr: 'grch37-17-41215920-G-T'
+}
+
+describe.concurrent('SeqvarBeaconNetworkCard.vue', async () => {
+  it('renders the card without iframe', async () => {
+    // arrange:
+    const { wrapper } = await setupMountedComponents(
+      { component: SeqvarBeaconNetworkCard },
+      {
+        props: {
+          seqvar: seqvarBrca1
+        }
+      }
+    )
+
+    // act: nothing
+
+    // assert:
+    // look for the search button
+    expect(wrapper.text()).toContain('Query Beacon')
+    const refreshButton = wrapper.findComponent(VBtn)
+    expect(refreshButton.exists()).toBe(true)
+    // no iframe yet
+    expect(wrapper.html()).not.toContain('<iframe')
+  })
+
+  it('correctly loads the iframe on click', async () => {
+    // arrange:
+    const { wrapper } = await setupMountedComponents(
+      { component: SeqvarBeaconNetworkCard },
+      {
+        props: {
+          seqvar: seqvarBrca1
+        }
+      }
+    )
+
+    // act:
+    const refreshButton = wrapper.findComponent(VBtn)
+    await refreshButton.trigger('click')
+    await wrapper.vm.$nextTick()
+
+    // assert:
+    // look for the search button
+    expect(wrapper.text()).not.toContain('Query Beacon')
+    expect(refreshButton.exists()).not.toBe(true)
+    // iframe after click
+    expect(wrapper.html()).toContain('<iframe')
+  })
+})

src/components/SeqvarBeaconNetworkCard/SeqvarBeaconNetworkCard.stories.ts

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+import { SeqvarImpl } from '../../lib/genomicVars'
+import SeqvarBeaconNetworkCard from './SeqvarBeaconNetworkCard.vue'
+
+const seqvarBrca1 = new SeqvarImpl('grch37', '18', 41215920, 'G', 'T')
+
+const meta = {
+  title: 'Seqvar/SeqvarBeaconNetworkCard',
+  component: SeqvarBeaconNetworkCard,
+  tags: ['autodocs'],
+  argTypes: {
+    seqvar: { control: { type: 'object' } }
+  },
+  args: { seqvar: seqvarBrca1 }
+} satisfies Meta<typeof SeqvarBeaconNetworkCard>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const BRCA1: Story = {
+  args: {
+    seqvar: seqvarBrca1
+  }
+}

src/components/SeqvarBeaconNetworkCard/SeqvarBeaconNetworkCard.vue

@@ -0,0 +1,64 @@
+<!--
+This component allows to trigger a query to the Beacon Network for a given variant.
+
+The query is performed using the `<iframe>` feature of `beacon-network.org`.
+-->
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import { type Seqvar } from '../../lib/genomicVars'
+import DocsLink from '../DocsLink/DocsLink.vue'
+
+/** This component's props. */
+const props = defineProps<{
+  /** Sequence variant to show the card for */
+  seqvar?: Seqvar
+}>()
+
+/** The beacon iframe address; when set the iframe is loaded. */
+const beaconAddress = ref<string>('')
+
+/** Update `beaconAddress.value` to the URL indicated by `props.seqvar`. */
+const loadBeacon = () => {
+  if (!props.seqvar) {
+    return
+  }
+  beaconAddress.value =
+    'https://beacon-network.org:443/#/widget?rs=' +
+    props.seqvar.genomeBuild +
+    '&chrom=' +
+    props.seqvar.chrom +
+    '&pos=' +
+    props.seqvar.pos +
+    '&ref=' +
+    props.seqvar.del +
+    '&allele=' +
+    props.seqvar.ins
+}
+</script>
+
+<template>
+  <v-card>
+    <v-card-title class="pb-0 pr-2">
+      Beacon Network
+      <DocsLink anchor="variant-tools" />
+    </v-card-title>
+    <v-card-subtitle class="text-overline">
+      Lookup Variant in GA4GH Beacon Network
+    </v-card-subtitle>
+    <v-card-text v-if="beaconAddress">
+      <iframe
+        ref="beaconFrame"
+        :src="beaconAddress"
+        style="width: 100%; height: 300px; overflow: auto; border: 0"
+        vspace="0"
+        hspace="0"
+      />
+    </v-card-text>
+    <v-card-text v-else>
+      <v-btn prepend-icon="mdi-cloud-search" variant="tonal" rounded="sm" @click="loadBeacon()">
+        Query Beacon Network
+      </v-btn>
+    </v-card-text>
+  </v-card>
+</template>