Skip to content

Commit

Permalink
feat: seqvar quality, clinvar & locus filters (#1856)
Browse files Browse the repository at this point in the history
  • Loading branch information
Gregoor authored Aug 2, 2024
1 parent 44edb7e commit cf00085
Show file tree
Hide file tree
Showing 44 changed files with 1,353 additions and 980 deletions.
2 changes: 1 addition & 1 deletion frontend/.storybook/preview.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { type App } from 'vue'
import { registerPlugins } from './plugins'
import { withVuetifyTheme } from './withVuetifyTheme.decorator'

initializeMSW()
initializeMSW({ onUnhandledRequest: 'bypass' })

export const pinia = createPinia()

Expand Down
20 changes: 20 additions & 0 deletions frontend/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@
"luxon": "^3.4.4",
"pinia": "^2.1.7",
"plotly.js-dist": "^2.33.0",
"remeda": "^2.6.0",
"snakecase": "^1.0.0",
"sort-by-typescript": "^1.2.5",
"sortablejs": "^1.15.2",
Expand Down Expand Up @@ -135,4 +136,4 @@
".storybook/public"
]
}
}
}
84 changes: 30 additions & 54 deletions frontend/src/cases/styles/main.scss
Original file line number Diff line number Diff line change
@@ -1,68 +1,44 @@
@use 'vuetify';

@font-face {
font-family: 'Segoe UI';
src:
local('Segoe UI Light'),
url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.woff2)
format('woff2'),
url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.woff)
format('woff'),
url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.ttf)
format('truetype');
font-weight: 100;
}

@font-face {
font-family: 'Segoe UI';
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src:
local('Segoe UI Semilight'),
url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.woff2)
format('woff2'),
url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.woff)
format('woff'),
url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.ttf)
format('truetype');
font-weight: 200;
local('Open Sans Bold'),
local('OpenSans-Bold'),
url(https://themes.googleusercontent.com/static/fonts/opensans/v6/k3k702ZOKiLJc3WVjuplzJ1r3JsPcQLi8jytr04NNhU.woff)
format('woff');
}

@font-face {
font-family: 'Segoe UI';
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
src:
local('Segoe UI'),
url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.woff2)
format('woff2'),
url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.woff)
format('woff'),
url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.ttf)
format('truetype');
font-weight: 400;
local('Open Sans Light'),
local('OpenSans-Light'),
url(https://themes.googleusercontent.com/static/fonts/opensans/v6/DXI1ORHCpsQm3Vp6mXoaTZ1r3JsPcQLi8jytr04NNhU.woff)
format('woff');
}

@font-face {
font-family: 'Segoe UI';
font-family: 'Open Sans';
font-style: normal;
font-weight: 800;
src:
local('Segoe UI Bold'),
url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.woff2)
format('woff2'),
url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.woff)
format('woff'),
url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.ttf)
format('truetype');
font-weight: 600;
local('Open Sans Extrabold'),
local('OpenSans-Extrabold'),
url(https://themes.googleusercontent.com/static/fonts/opensans/v6/EInbV5DfGHOiMmvb1Xr-hp1r3JsPcQLi8jytr04NNhU.woff)
format('woff');
}

@font-face {
font-family: 'Segoe UI';
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src:
local('Segoe UI Semibold'),
url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.woff2)
format('woff2'),
url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.woff)
format('woff'),
url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.ttf)
format('truetype');
font-weight: 700;
local('Open Sans'),
local('OpenSans'),
url(https://themes.googleusercontent.com/static/fonts/opensans/v6/K88pR3goAWT7BTt32Z01mz8E0i7KZn-EPnyo3HZu7kw.woff)
format('woff');
}

:root {
Expand All @@ -71,7 +47,7 @@
}

.group-title {
font-family: 'Segoe UI';
font-family: 'Open Sans';
font-size: 10px;
font-style: normal;
font-weight: 600;
Expand All @@ -81,7 +57,7 @@

.ui-control-text {
color: var(--v-theme-ui-control-text, #242424);
font-family: 'Segoe UI';
font-family: 'Open Sans';
font-size: 14px;
font-style: normal;
font-weight: 400;
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/seqvars/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -55,11 +55,11 @@ watch(
() => refreshStores(),
)
const presets = computed(() =>
const presetDetails = computed(() =>
[...seqvarsPresetsStore.presetSetVersions.values()].at(0),
)
</script>

<template>
<SeqvarsFiltration v-if="presets" :presets="presets" />
<SeqvarsFiltration v-if="presetDetails" :preset-details="presetDetails" />
</template>
54 changes: 54 additions & 0 deletions frontend/src/seqvars/components/ClinvarControls.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
<script setup lang="ts">
import { Query } from '@/seqvars/types'
import { ClinvarGermlineAggregateDescriptionList } from '@varfish-org/varfish-api/lib'
import { toggleArrayElement } from './utils'
const model = defineModel<Query>({ required: true })
const GERMLINE_FIELDS = [
'pathogenic',
'likely_pathogenic',
'uncertain_significance',
'likely_benign',
'benign',
] satisfies ClinvarGermlineAggregateDescriptionList[number][]
const capitalize = (s: string) => s && s[0].toUpperCase() + s.slice(1)
</script>

<template>
<v-checkbox
v-model="model.clinvar.clinvar_presence_required"
label="Require ClinVar assessment"
:hide-details="true"
density="compact"
/>

<div style="padding-left: 16px">
<v-checkbox
v-for="field in GERMLINE_FIELDS"
:key="field"
:label="capitalize(field.split('_').join(' '))"
:model-value="
model.clinvar.clinvar_germline_aggregate_description?.includes(field)
"
:hide-details="true"
density="compact"
@update:model-value="
toggleArrayElement(
model.clinvar.clinvar_germline_aggregate_description,
field,
)
"
/>

<v-checkbox
v-model="model.clinvar.allow_conflicting_interpretations"
label="Allow conflicting interpretations"
:hide-details="true"
density="compact"
style="margin-top: 8px"
/>
</div>
</template>
Loading

0 comments on commit cf00085

Please sign in to comment.