diff --git a/docs/dev_frontend.rst b/docs/dev_frontend.rst index 5e780081..2b943613 100644 --- a/docs/dev_frontend.rst +++ b/docs/dev_frontend.rst @@ -18,6 +18,13 @@ Import order should be (and is also enforced by prettier): Overall, restrict relative include order for tests to include code to be tested with ``../``. +----- +Types +----- + +- For the Vue reactive stores, explicitely specify the type in the creating function, e.g., `ref` or `ref`. +- In many places in the UI, using `undefined` is more appropriate than `null` as this is the value before the data is loaded from the backend. + -------------- Test Structure -------------- @@ -29,6 +36,7 @@ Consider the following structure, an example is given below. - put larger fixture data into ``.json`` files within the ``__tests__`` folders (will go to LFS by our ``.gitattributes`` configuration) - define the tests - use assemble, act, assert structure e.g., `as described here `__ + - guard assertions are OK - use ``describe.concurrent`` to describe the tests, usually one block per ``.spec.ts`` file - use ``it`` to define the tests - use ``async () => { ... }`` only when necessary, e.g., for ``await nextTick()`` @@ -37,3 +45,10 @@ Consider the following structure, an example is given below. .. literalinclude:: ../frontend/src/components/__tests__/UserProfileButton.spec.ts :language: typescript +Note that there is a separation between views and components (cf. https://stackoverflow.com/a/50866150/84349) that is also reflected in the tests. + +- The main purpose of views is to handle the routing. +- The actual work happens in components. + +In tests, we thus use stubbed out of nested components in views but not components. +This keeps the load time acceptable while testing the components in isolation. diff --git a/frontend/src/api/intervar.ts b/frontend/src/api/intervar.ts new file mode 100644 index 00000000..bcdd726b --- /dev/null +++ b/frontend/src/api/intervar.ts @@ -0,0 +1,33 @@ +import { API_INTERNAL_BASE_PREFIX } from '@/api/common' +import type { Seqvar } from '@/lib/genomicVars' +import type { AcmgRatingBackend } from '@/stores/seqVarAcmgRating' + +const API_BASE_URL = `${API_INTERNAL_BASE_PREFIX}/` + +export class InterVarClient { + private apiBaseUrl: string + private csrfToken: string | null + + constructor(apiBaseUrl?: string, csrfToken?: string) { + this.apiBaseUrl = apiBaseUrl ?? API_BASE_URL + this.csrfToken = csrfToken ?? null + } + + /** + * Fetch ACMG rating from InterVar via proxy. + */ + async fetchAcmgRating(seqvar: Seqvar): Promise { + const { genomeBuild, chrom, pos, del, ins } = seqvar + const release = genomeBuild === 'grch37' ? 'hg19' : 'hg38' + const url = + `${API_BASE_URL}remote/acmg/?release=${release}&chromosome=${chrom}` + + `&position=${pos}&reference=${del}&alternative=${ins}` + const response = await fetch(url, { method: 'GET' }) + + if (!response.ok) { + throw new Error(`Failed to fetch ACMG rating for ${seqvar.userRepr}`) + } + + return await response.json() + } +} diff --git a/frontend/src/components/SeqvarDetails/BeaconNetworkCard.vue b/frontend/src/components/SeqvarDetails/BeaconNetworkCard.vue index 28730e37..9267705e 100644 --- a/frontend/src/components/SeqvarDetails/BeaconNetworkCard.vue +++ b/frontend/src/components/SeqvarDetails/BeaconNetworkCard.vue @@ -1,17 +1,26 @@ +