diff --git a/cases/vueapp/src/components/CaseDetail/Content.vue b/cases/vueapp/src/components/CaseDetail/Content.vue
index 54e1e4be9..13528ce19 100644
--- a/cases/vueapp/src/components/CaseDetail/Content.vue
+++ b/cases/vueapp/src/components/CaseDetail/Content.vue
@@ -8,7 +8,6 @@ import PaneAnnotations from '@cases/components/CaseDetail/PaneAnnotations.vue'
import { useRouter } from 'vue-router'
import { useCaseDetailsStore } from '@cases/stores/caseDetails'
import { useCaseQcStore } from '@cases_qc/stores/caseQc'
-import GenomeBrowser from '@svs/components/GenomeBrowser.vue'
const router = useRouter()
@@ -38,7 +37,6 @@ const Tabs = Object.freeze({
overview: 'overview',
qc: 'qc',
annotation: 'annotation',
- browser: 'browser',
})
const caseDetailsStore = useCaseDetailsStore()
@@ -113,18 +111,6 @@ const updateCurrentTab = (newValue) => {
-
-
-
-
- Browser
-
-
diff --git a/cases/vueapp/src/components/CaseDetail/PaneAnnotations.vue b/cases/vueapp/src/components/CaseDetail/PaneAnnotations.vue
index 0cadeeee1..1bf4c61fa 100644
--- a/cases/vueapp/src/components/CaseDetail/PaneAnnotations.vue
+++ b/cases/vueapp/src/components/CaseDetail/PaneAnnotations.vue
@@ -18,7 +18,7 @@ const showSmallVariantDetails = async (event) => {
const showStructuralVariantDetails = async (event) => {
router.push({
- name: 'sv-details',
+ name: 'strucvar-details',
params: {
row: event.svresultrow,
selectedSection: event.selectedSection ?? null,
diff --git a/cases/vueapp/src/plugins/reevFrontend.ts b/cases/vueapp/src/plugins/reevFrontend.ts
index 36b2049dc..e3491ec9e 100644
--- a/cases/vueapp/src/plugins/reevFrontend.ts
+++ b/cases/vueapp/src/plugins/reevFrontend.ts
@@ -4,7 +4,7 @@ export function setupBackendUrls() {
urlConfig.baseUrlAnnonars = '/proxy/varfish/annonars'
urlConfig.baseUrlMehari = '/proxy/varfish/mehari'
urlConfig.baseUrlViguno = '/proxy/varfish/viguno'
- urlConfig.baseUrlNginx = '/proxy/varfish/nginx'
+ urlConfig.baseUrlNginx = '/proxy/varfish/nginx/'
urlConfig.baseUrlPubtator = '/proxy/remote/pubtator3-api'
urlConfig.baseUrlVariantValidator = '/proxy/variantvalidator'
diff --git a/cases/vueapp/src/router/index.ts b/cases/vueapp/src/router/index.ts
index 24259d379..fdffde6b9 100644
--- a/cases/vueapp/src/router/index.ts
+++ b/cases/vueapp/src/router/index.ts
@@ -1,6 +1,6 @@
import CaseDetailApp from '@cases/components/CaseDetailApp.vue'
import CaseListApp from '@cases/components/CaseListApp.vue'
-import SvDetails from '@svs/components/SvDetails.vue'
+import StrucvarDetails from '@svs/views/StrucvarDetails/StrucvarDetails.vue'
import SvFilterApp from '@svs/components/SvFilterApp.vue'
import { useHistoryStore } from '@varfish/stores/history'
import FilterApp from '@variants/components/FilterApp.vue'
@@ -110,12 +110,12 @@ const routes: RouteRecordRaw[] = [
}),
},
{
- name: 'sv-details',
- path: '/svs/details/:row/:selectedSection?',
- component: SvDetails,
+ name: 'strucvar-details',
+ path: '/strucvar/details/:row/:selectedSection?',
+ component: StrucvarDetails,
props: (route: RouteLocationNormalized) => ({
resultRowUuid: route.params.row,
- selectedSection: route.params.selectedSection || 'genes',
+ selectedSection: route.params.selectedSection || 'top',
}),
},
]
@@ -135,7 +135,7 @@ export const router = createRouter({
savedPosition: null | _ScrollPositionNormalized,
) {
if (
- ['seqvar-details', 'sv-details'].includes(String(to.name)) &&
+ ['seqvar-details', 'strucvar-details'].includes(String(to.name)) &&
to.params.selectedSection
) {
const res = { el: `#${to.params.selectedSection}` }
diff --git a/cases/vueapp/tests/unit/cases/CaseDetail/Content.spec.js b/cases/vueapp/tests/unit/cases/CaseDetail/Content.spec.js
index c5a25e5a0..18df269b1 100644
--- a/cases/vueapp/tests/unit/cases/CaseDetail/Content.spec.js
+++ b/cases/vueapp/tests/unit/cases/CaseDetail/Content.spec.js
@@ -33,8 +33,7 @@ describe('CaseDetailContent.vue', () => {
expect(wrapper.html()).matches(/ {
@@ -45,8 +44,7 @@ describe('CaseDetailContent.vue', () => {
expect(wrapper.html()).matches(/ {
@@ -57,9 +55,8 @@ describe('CaseDetailContent.vue', () => {
expect(wrapper.html()).matches(/ {
// expect(wrapper.html()).not.matches(/ {
@@ -84,9 +80,8 @@ describe('CaseDetailContent.vue', () => {
expect(wrapper.html()).matches(/ {
expect(wrapper.html()).matches(/ {
@@ -120,7 +114,7 @@ describe('CaseDetailContent.vue', () => {
expect(wrapper.html()).not.matches(/ {
// expect(wrapper.html()).not.matches(/ {
- const wrapper = makeWrapper(CaseDetailContent, {
- caseDetails: caseDetailsStoreData,
- })
-
- expect(wrapper.html()).matches(/ {
- return {
- name: title,
- sourceType: 'annotation',
- format: 'bed',
- visibilityWindow,
- displayMode: 'SQUISHED',
- url: `/proxy/varfish/nginx/grch37/${token}.bed.gz`,
- indexURL: `/proxy/varfish/nginx/grch37/${token}.bed.gz.tbi`,
- color: 'black',
- }
-})
-export const publicTracks = [
- duplicationTrack,
- repeatsTrack,
- altTrack,
- fixTrack,
- hescTadTrack,
- curatedMmsTrack,
- // clinvarTrack,
-].concat(bgDbTracks)
-
-export const genCaseTrack = (caseUuid) => ({
- order: -1,
- height: '200',
- name: 'Case SVs',
- sourceType: 'custom',
- visibilityWindow,
- source: {
- url: `/svs/ajax/fetch-variants/${caseUuid}/?chromosome=$CHR&start=$START&end=$END`,
- method: 'GET',
- contentType: 'application/json',
- mappings: {
- chr: 'chromosome',
- },
- queryable: true,
- },
- format: 'annotation',
- colorBy: 'sv_type',
- colorTable: {
- DEL: 'red',
- DUP: 'green',
- INV: 'blue',
- '*': 'black',
- },
-})
diff --git a/svs/vueapp/src/components/GenomeBrowser.vue b/svs/vueapp/src/components/GenomeBrowser.vue
deleted file mode 100644
index bcf077e50..000000000
--- a/svs/vueapp/src/components/GenomeBrowser.vue
+++ /dev/null
@@ -1,113 +0,0 @@
-
-
-
-
-
diff --git a/svs/vueapp/src/components/StrucvarDetailsHeader/StrucvarDetailsHeader.vue b/svs/vueapp/src/components/StrucvarDetailsHeader/StrucvarDetailsHeader.vue
new file mode 100644
index 000000000..e8032b59d
--- /dev/null
+++ b/svs/vueapp/src/components/StrucvarDetailsHeader/StrucvarDetailsHeader.vue
@@ -0,0 +1,27 @@
+
+
+
+
+
+ Structural Variant Details
+
+ {{ strucvar?.userRepr }}
+
+
+
+
+
+
+
diff --git a/svs/vueapp/src/components/StrucvarDetailsNavi/StrucvarDetailsNavi.vue b/svs/vueapp/src/components/StrucvarDetailsNavi/StrucvarDetailsNavi.vue
new file mode 100644
index 000000000..6f4e6c0a8
--- /dev/null
+++ b/svs/vueapp/src/components/StrucvarDetailsNavi/StrucvarDetailsNavi.vue
@@ -0,0 +1,158 @@
+
+
+
+
+
+
+
+ Back
+
+
+
+
+
+
+ Jump in Local IGV
+
+
+
+
+
+ {{ section.title }}
+
+
+
+
+
+
+ Gene
+
+ {{ selectedGeneInfo?.hgnc?.symbol || selectedGeneInfo?.hgnc?.agr }}
+
+
+
+
+
+
+ {{ section.title }}
+
+
+
+
+
+
+
+
+ Variant Details
+
+
+
+
+
+
+ {{ section.title }}
+
+
+
+
+
diff --git a/svs/vueapp/src/components/StrucvarDetailsNavi/constants.ts b/svs/vueapp/src/components/StrucvarDetailsNavi/constants.ts
new file mode 100644
index 000000000..232bd9ac1
--- /dev/null
+++ b/svs/vueapp/src/components/StrucvarDetailsNavi/constants.ts
@@ -0,0 +1,22 @@
+import { NavItem } from './types'
+
+/** Sections in the navigation. */
+export const SECTIONS: { [key: string]: NavItem[] } = {
+ TOP: [{ id: 'gene-list', title: 'List' }],
+ GENE: [
+ { id: 'gene-overview', title: 'Overview' },
+ { id: 'gene-pathogenicity', title: 'Pathogenicity' },
+ { id: 'gene-conditions', title: 'Conditions' },
+ { id: 'gene-expression', title: 'Expression' },
+ { id: 'gene-clinvar', title: 'ClinVar' },
+ { id: 'gene-literature', title: 'Literature' },
+ ],
+ STRUCVAR: [
+ { id: 'strucvar-calldetails', title: 'Call Details' },
+ { id: 'strucvar-clinvar', title: 'ClinVar' },
+ { id: 'strucvar-tools', title: 'Tools' },
+ { id: 'strucvar-flags', title: 'Flags' },
+ { id: 'strucvar-comments', title: 'Comments' },
+ { id: 'strucvar-genomebrowser', title: 'Genome Browser' },
+ ],
+}
diff --git a/svs/vueapp/src/components/StrucvarDetailsNavi/lib.ts b/svs/vueapp/src/components/StrucvarDetailsNavi/lib.ts
new file mode 100644
index 000000000..97a76aacc
--- /dev/null
+++ b/svs/vueapp/src/components/StrucvarDetailsNavi/lib.ts
@@ -0,0 +1,27 @@
+import { Strucvar } from '@bihealth/reev-frontend-lib/lib/genomicVars'
+
+/**
+ * Jump to the locus in the local IGV.
+ */
+export const jumpToLocus = async (strucvar?: Strucvar) => {
+ if (strucvar === undefined) {
+ return
+ }
+ let url: string
+ if (strucvar.svType === 'BND' || strucvar.svType === 'INS') {
+ url =
+ `http://127.0.0.1:60151/goto?locus=chr${strucvar.chrom.replace('chr', '')}:` +
+ `${strucvar.start ?? 1}-${(strucvar.start ?? 1) + 1}`
+ } else {
+ url =
+ `http://127.0.0.1:60151/goto?locus=chr${strucvar.chrom.replace('chr', '')}:` +
+ `${strucvar.start ?? 1}-${strucvar.stop ?? strucvar.start ?? 1}`
+ }
+ // NB: we allow the call to fetch here as it goes to local IGV.
+ await fetch(url).catch((e) => {
+ const msg =
+ "Couldn't connect to IGV. Please make sure IGV is running and try again."
+ alert(msg)
+ console.error(msg, e)
+ })
+}
diff --git a/svs/vueapp/src/components/StrucvarDetailsNavi/types.ts b/svs/vueapp/src/components/StrucvarDetailsNavi/types.ts
new file mode 100644
index 000000000..696ad62ea
--- /dev/null
+++ b/svs/vueapp/src/components/StrucvarDetailsNavi/types.ts
@@ -0,0 +1,4 @@
+export interface NavItem {
+ id: string
+ title: string
+}
diff --git a/svs/vueapp/src/components/StrucvarGenotypeCallCard/StrucvarGenotypeCallCard.vue b/svs/vueapp/src/components/StrucvarGenotypeCallCard/StrucvarGenotypeCallCard.vue
new file mode 100644
index 000000000..500a44b65
--- /dev/null
+++ b/svs/vueapp/src/components/StrucvarGenotypeCallCard/StrucvarGenotypeCallCard.vue
@@ -0,0 +1,77 @@
+
+
+
+
+
+
+
+
+
+ Genotype Info
+
+
+
+
+ Detailed Information on Genotype Calls
+
+
+
+
+
+ Sample |
+
+
+ {{ displayName(sample) }}
+ |
+
+
+
+
+
+
+ {{ GT_FIELD_MAP[key]?.label ?? GT_FIELD_MAP[key]?.name ?? key }}
+ |
+
+ {{ (GT_FIELD_MAP[key]?.fmt ?? identity)(genotype[key]) }}
+ |
+
+
+
+
+
+
+
diff --git a/svs/vueapp/src/components/StrucvarGenotypeCallCard/constants.ts b/svs/vueapp/src/components/StrucvarGenotypeCallCard/constants.ts
new file mode 100644
index 000000000..63861abe4
--- /dev/null
+++ b/svs/vueapp/src/components/StrucvarGenotypeCallCard/constants.ts
@@ -0,0 +1,33 @@
+import { GenotypeFieldDescription } from './types'
+
+export const GT_FIELD_DESCRIPTIONS: GenotypeFieldDescription[] = [
+ { name: 'copy_number', label: 'copy number' },
+ { name: 'quality', label: 'genotype quality' },
+ { name: 'genotype', label: 'genotype call' },
+ { name: 'paired_end_cov', label: 'total read pairs' },
+ { name: 'paired_end_var', label: 'variant read pairs' },
+ { name: 'split_read_cov', label: 'total split-reads' },
+ { name: 'split_read_var', label: 'variant split reads' },
+ { name: 'point_count', label: 'number of bins/targets' },
+ { name: 'average_normalized_cov', label: 'average normalized coverage' },
+ { name: 'average_mapping_quality', label: 'average mapping quality' },
+ {
+ name: 'matched_gt_criteria',
+ label: 'matched genotype criteria',
+ fmt: (val: string | string[]) => {
+ if (Array.isArray(val)) {
+ return val.join(', ')
+ } else {
+ return val
+ }
+ },
+ },
+ { name: 'effective_genotype', label: 'effective genotype' },
+] as const
+
+export const GET_FIELD_MAP: { [key: string]: GenotypeFieldDescription } =
+ Object.fromEntries(GT_FIELD_DESCRIPTIONS.map((desc) => [desc.name, desc]))
+
+export const identity = (x: T): T => {
+ return x
+}
diff --git a/svs/vueapp/src/components/StrucvarGenotypeCallCard/types.ts b/svs/vueapp/src/components/StrucvarGenotypeCallCard/types.ts
new file mode 100644
index 000000000..18ad85d59
--- /dev/null
+++ b/svs/vueapp/src/components/StrucvarGenotypeCallCard/types.ts
@@ -0,0 +1,19 @@
+/** Information about a genotype call for one sample. */
+export type CallInfo = { [key: string]: string | string[] }
+
+/** Result row payload. */
+export interface Payload {
+ call_info: { [key: string]: CallInfo }
+}
+
+/** Result row, as needed for the StrucvarGenotypeCallCard. */
+export interface ResultRow {
+ payload: Payload
+}
+
+/** Type for genotype field description. */
+export interface GenotypeFieldDescription {
+ name: string
+ label?: string
+ fmt?: (values: string | string[]) => string
+}
diff --git a/svs/vueapp/src/components/SvDetails.fields.ts b/svs/vueapp/src/components/SvDetails.fields.ts
deleted file mode 100644
index 51e041a51..000000000
--- a/svs/vueapp/src/components/SvDetails.fields.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-export type NavItem = {
- name: string
- title: string
-}
-
-export const allNavItems: NavItem[] = [
- {
- name: 'genes',
- title: 'Genes',
- },
- {
- name: 'clinvar',
- title: 'ClinVar',
- },
- {
- name: 'call-details',
- title: 'Call / Genotype',
- },
- {
- name: 'comments',
- title: 'Comments',
- },
- {
- name: 'flags',
- title: 'Flags',
- },
- {
- name: 'genome-browser',
- title: 'Genome Browser',
- },
-]
diff --git a/svs/vueapp/src/components/SvDetails.vue b/svs/vueapp/src/components/SvDetails.vue
deleted file mode 100644
index d815d7c59..000000000
--- a/svs/vueapp/src/components/SvDetails.vue
+++ /dev/null
@@ -1,268 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Precise coordinates:
- {{ svLocus(svDetailsStore.currentSvRecord) }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/svs/vueapp/src/components/SvDetails/Clinvar.vue b/svs/vueapp/src/components/SvDetails/Clinvar.vue
deleted file mode 100644
index 9085bcb61..000000000
--- a/svs/vueapp/src/components/SvDetails/Clinvar.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-
-
-
-
-
-
- The following overlapping SVs are flagged as (likely) pathogenic in
- ClinVar.
-
-
-
-
-
-
- SV has not been annotated with (likely) pathogenic ClinVar SV records.
-
-
-
-
diff --git a/svs/vueapp/src/components/SvDetails/Genes.vue b/svs/vueapp/src/components/SvDetails/Genes.vue
deleted file mode 100644
index 7ac6e498c..000000000
--- a/svs/vueapp/src/components/SvDetails/Genes.vue
+++ /dev/null
@@ -1,334 +0,0 @@
-
-
-
-
-
-
-
-
- No genes available.
-
-
-
-
-
- {{ geneInfo.dbnsfp?.gene_name }}
-
-
-
-
-
-
- ,
-
- {{ disease.label }}
-
-
-
- —
-
-
-
-
-
- ,
-
- {{ disease.label }}
-
-
-
- —
-
-
-
-
-
-
- —
-
-
-
-
-
-
- —
-
-
-
-
-
-
- —
-
-
-
-
-
-
- —
-
-
-
-
-
-
- —
-
-
-
-
-
-
- —
-
-
-
-
- {{
- clingen.haplo_summary
- }}
-
- —
-
-
-
-
- {{
- clingen.triplo_summary
- }}
-
- —
-
-
-
-
-
-
- Gene Details: {{ currentGeneInfos.hgnc.symbol }}
-
-
-
-
- Select gene in table above to see details.
-
-
-
diff --git a/svs/vueapp/src/components/SvDetails/GenotypeCall.vue b/svs/vueapp/src/components/SvDetails/GenotypeCall.vue
deleted file mode 100644
index 7a86eb9ff..000000000
--- a/svs/vueapp/src/components/SvDetails/GenotypeCall.vue
+++ /dev/null
@@ -1,74 +0,0 @@
-
-
-
-
-
-
-
- Sample |
-
-
-
- {{ displayName(sample) }}
- |
-
-
-
-
-
- {{ GT_FIELDS[key]?.label ?? key }} |
-
- {{ (GT_FIELDS[key]?.fmt ?? identity)(genotype[key]) }}
- |
-
-
-
-
-
diff --git a/svs/vueapp/src/components/SvDetails/Header.vue b/svs/vueapp/src/components/SvDetails/Header.vue
deleted file mode 100644
index 58d36c9a5..000000000
--- a/svs/vueapp/src/components/SvDetails/Header.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-
-
-
-
-
- SV Details for
-
- {{ svLabel }}
-
-
- ...
-
-
-
-
-
-
-
-
-
-
-
diff --git a/svs/vueapp/src/components/SvFilterApp.vue b/svs/vueapp/src/components/SvFilterApp.vue
index 87f3d4831..755cde9f7 100644
--- a/svs/vueapp/src/components/SvFilterApp.vue
+++ b/svs/vueapp/src/components/SvFilterApp.vue
@@ -35,7 +35,7 @@ const svResultSetStore = useSvResultSetStore()
const showDetails = async (event) => {
router.push({
- name: 'sv-details',
+ name: 'strucvar-details',
params: {
row: event.svresultrow,
selectedSection: event.selectedSection ?? null,
diff --git a/svs/vueapp/src/views/StrucvarDetails/StrucvarDetails.vue b/svs/vueapp/src/views/StrucvarDetails/StrucvarDetails.vue
new file mode 100644
index 000000000..153397dc2
--- /dev/null
+++ b/svs/vueapp/src/views/StrucvarDetails/StrucvarDetails.vue
@@ -0,0 +1,300 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ No Gene
+
+
+
+ Gene
+
+ {{ selectedGeneInfo?.hgnc!.symbol }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Structural Variant Details
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/svs/vueapp/src/views/StrucvarDetails/lib.ts b/svs/vueapp/src/views/StrucvarDetails/lib.ts
new file mode 100644
index 000000000..30d3fbad3
--- /dev/null
+++ b/svs/vueapp/src/views/StrucvarDetails/lib.ts
@@ -0,0 +1,31 @@
+import { Strucvar } from '@bihealth/reev-frontend-lib/lib/genomicVars'
+
+// Pretty display of coordinates.
+export const svLocus = (strucvar?: Strucvar): string | undefined => {
+ if (strucvar === undefined) {
+ return undefined
+ }
+
+ let locus: string = ''
+ switch (strucvar.svType) {
+ case 'INS':
+ locus = `${strucvar.chrom}:${strucvar.start}-${strucvar.start}`
+ break
+ case 'DEL':
+ case 'DUP':
+ case 'INV':
+ locus = `${strucvar.chrom}:${strucvar.start - 1000}-${strucvar.stop + 1000}`
+ break
+ case 'BND':
+ locus = `${strucvar.chrom}:${strucvar.start - 1000}-${strucvar.start + 1000}`
+ break
+ }
+ if (locus === '') {
+ return undefined
+ }
+
+ if (strucvar.genomeBuild === 'grch38') {
+ locus = `chr${locus}`
+ }
+ return locus
+}
diff --git a/varfish/vueapp/ext/reev-frontend-lib b/varfish/vueapp/ext/reev-frontend-lib
index c6267b24c..4f349ce26 160000
--- a/varfish/vueapp/ext/reev-frontend-lib
+++ b/varfish/vueapp/ext/reev-frontend-lib
@@ -1 +1 @@
-Subproject commit c6267b24cf038ccce28376f8ea3bc60342d1b44b
+Subproject commit 4f349ce26eebc877fa875fb60bb17c07418aa59b
diff --git a/variants/vueapp/src/components/SeqvarDetailsNavi/constants.ts b/variants/vueapp/src/components/SeqvarDetailsNavi/constants.ts
index cf5fe16ba..f03978213 100644
--- a/variants/vueapp/src/components/SeqvarDetailsNavi/constants.ts
+++ b/variants/vueapp/src/components/SeqvarDetailsNavi/constants.ts
@@ -1,7 +1,7 @@
-import { Section } from './types'
+import { NavItem } from './types'
/** Sections in the navigation. */
-export const SECTIONS: { [key: string]: Section[] } = {
+export const SECTIONS: { [key: string]: NavItem[] } = {
GENE: [
{ id: 'gene-overview', title: 'Overview' },
{ id: 'gene-pathogenicity', title: 'Pathogenicity' },
@@ -11,6 +11,7 @@ export const SECTIONS: { [key: string]: Section[] } = {
{ id: 'gene-literature', title: 'Literature' },
],
SEQVAR: [
+ { id: 'seqvar-calldetails', title: 'Call Details' },
{ id: 'seqvar-csq', title: 'Consequences' },
{ id: 'seqvar-clinvar', title: 'ClinVar' },
{ id: 'seqvar-scores', title: 'Scores' },
diff --git a/variants/vueapp/src/components/SeqvarDetailsNavi/types.ts b/variants/vueapp/src/components/SeqvarDetailsNavi/types.ts
index 83f92a732..696ad62ea 100644
--- a/variants/vueapp/src/components/SeqvarDetailsNavi/types.ts
+++ b/variants/vueapp/src/components/SeqvarDetailsNavi/types.ts
@@ -1,5 +1,4 @@
-/** Data type for `SECTIONS` below. */
-export interface Section {
+export interface NavItem {
id: string
title: string
}
diff --git a/variants/vueapp/src/components/VariantDetails/CallDetails.stories.js b/variants/vueapp/src/components/SeqvarGenotypeCallCard/SeqvarGenotypeCallCard.stories.js
similarity index 69%
rename from variants/vueapp/src/components/VariantDetails/CallDetails.stories.js
rename to variants/vueapp/src/components/SeqvarGenotypeCallCard/SeqvarGenotypeCallCard.stories.js
index 11d5ec7e2..7c3da4d00 100644
--- a/variants/vueapp/src/components/VariantDetails/CallDetails.stories.js
+++ b/variants/vueapp/src/components/SeqvarGenotypeCallCard/SeqvarGenotypeCallCard.stories.js
@@ -1,19 +1,19 @@
-import VariantDetailsCallDetails from '@variants/components/VariantDetails/CallDetails.vue'
+import SeqvarGenotypeCallCard from '@variants/components/SeqvarGenotypeCallCard/SeqvarGenotypeCallCard.vue'
import trioCaseData from '@variantsTest/data/case-trio.json'
import trioVariantsData from '@variantsTest/data/variants-trio.json'
export default {
title: 'Variants / Small Variant Details Calls',
- component: VariantDetailsCallDetails,
+ component: SeqvarGenotypeCallCard,
}
const Template = (args) => ({
- components: { VariantDetailsCallDetails },
+ components: { SeqvarGenotypeCallCard },
setup() {
return { args }
},
template:
- '',
diff --git a/variants/vueapp/src/components/SeqvarGenotypeCallCard/SeqvarGenotypeCallCard.vue b/variants/vueapp/src/components/SeqvarGenotypeCallCard/SeqvarGenotypeCallCard.vue
new file mode 100644
index 000000000..56cab247a
--- /dev/null
+++ b/variants/vueapp/src/components/SeqvarGenotypeCallCard/SeqvarGenotypeCallCard.vue
@@ -0,0 +1,96 @@
+
+
+
+
+
+
+
+
+
+ Genotype Info
+
+
+
+
+ Detailed Information on Genotype Calls
+
+
+
+
+
+ Sample |
+
+
+ {{ displayName(sample) }}
+ |
+
+
+
+
+
+ Genotype |
+
+ {{ genotype.gt }}
+ |
+
+
+ Coverage (DP) |
+
+ {{ genotype.dp ?? 'N/A' }}
+ |
+
+
+ Coverage (AD) |
+
+ {{ genotype.ad ?? 'N/A' }}
+ |
+
+
+ Allelic Balance |
+
+
+
+
+ |
+
+
+
+
+
+
+
diff --git a/variants/vueapp/src/components/SeqvarGenotypeCallCard/lib.ts b/variants/vueapp/src/components/SeqvarGenotypeCallCard/lib.ts
new file mode 100644
index 000000000..27e9bc92e
--- /dev/null
+++ b/variants/vueapp/src/components/SeqvarGenotypeCallCard/lib.ts
@@ -0,0 +1,9 @@
+import { GenotypeValue } from './types'
+
+export const allelicBalance = (value?: GenotypeValue) => {
+ if (!value || !value?.dp || !value?.ad) {
+ return 0.0
+ } else {
+ return value.ad / value.dp
+ }
+}
diff --git a/variants/vueapp/src/components/SeqvarGenotypeCallCard/types.ts b/variants/vueapp/src/components/SeqvarGenotypeCallCard/types.ts
new file mode 100644
index 000000000..58d2fe3eb
--- /dev/null
+++ b/variants/vueapp/src/components/SeqvarGenotypeCallCard/types.ts
@@ -0,0 +1,16 @@
+export interface GenotypeValue {
+ gt: string
+ dp?: number
+ ad?: number
+ gq?: number
+}
+
+export type Genotype = { [key: string]: GenotypeValue }
+
+export interface Payload {
+ genotype: Genotype
+}
+
+export interface ResultRow {
+ payload: Payload
+}
diff --git a/variants/vueapp/src/components/VariantDetails/CallDetails.vue b/variants/vueapp/src/components/VariantDetails/CallDetails.vue
deleted file mode 100644
index 08bc01e48..000000000
--- a/variants/vueapp/src/components/VariantDetails/CallDetails.vue
+++ /dev/null
@@ -1,162 +0,0 @@
-
-
-
-
-
-
-
- Sample |
-
- {{ displayName(member.name) }}
- |
-
-
-
-
- Genotype |
-
-
-
-
-
-
- gt
-
-
- {{ props.smallVariant.genotype[member.name].gt }}
-
- |
-
-
- Coverage (DP) |
-
-
-
- |
-
-
- dp
- |
-
-
- .
- |
-
- {{ props.smallVariant.genotype[member.name].dp }}
- |
-
-
-
-
- Alt. Depth (AD) |
-
-
-
- |
-
-
- ad
- |
-
-
- .
- |
-
- {{ props.smallVariant.genotype[member.name].ad }}
- |
-
-
-
-
- Allelic Balance |
-
-
-
- |
-
- {{
- allelicBalance(
- props.smallVariant.genotype[member.name],
- ).toFixed(2)
- }}
- |
-
-
-
-
-
- No genotype information available.
-
-
-
diff --git a/variants/vueapp/src/views/SeqvarDetails/SeqvarDetails.vue b/variants/vueapp/src/views/SeqvarDetails/SeqvarDetails.vue
index 9d07b454a..03bb2e99f 100644
--- a/variants/vueapp/src/views/SeqvarDetails/SeqvarDetails.vue
+++ b/variants/vueapp/src/views/SeqvarDetails/SeqvarDetails.vue
@@ -7,7 +7,7 @@
*
* Also used in the case details view for displyaing all user-annotated variants.
*
- * See `SvDetails` for a peer app for structural variants
+ * See `StrucvarDetails` for a peer app for structural variants
*/
import { computed, onMounted } from 'vue'
@@ -23,6 +23,7 @@ import { useVariantResultSetStore } from '@variants/stores/variantResultSet'
import CommentsCard from '@varfish/components/CommentsCard/CommentsCard.vue'
import FlagsCard from '@varfish/components/FlagsCard/FlagsCard.vue'
+import SeqvarGenotypeCallCard from '@variants/components/SeqvarGenotypeCallCard/SeqvarGenotypeCallCard.vue'
import SeqvarDetailsHeader from '@variants/components/SeqvarDetailsHeader/SeqvarDetailsHeader.vue'
import SeqvarDetailsNavi from '@variants/components/SeqvarDetailsNavi/SeqvarDetailsNavi.vue'
import AcmgRatingCard from '@variants/components/AcmgRatingCard/AcmgRatingCard.vue'
@@ -190,9 +191,7 @@ onMounted(() => {
-
-
-
+