Skip to content

Commit

Permalink
WIP clinvar submission improvements (#286).
Browse files Browse the repository at this point in the history
  • Loading branch information
@holtgrewe
holtgrewe committed Jan 26, 2022
1 parent 55bc81d commit bd159df
Show file tree
Hide file tree
Showing 2 changed files with 110 additions and 61 deletions.
153 changes: 97 additions & 56 deletions varfish/vueapp/src/components/SubmissionList.vue
View file
Expand Up @@ -17,9 +17,9 @@
v-for="item in submissionList"
:key="item.sodar_uuid"
:class="{ active: (item === currentSubmission) }"
@click="onListItemClicked(item.sodar_uuid)"
>
{{ getSubmissionLabel(item) }}
<span v-if="getSubmissionIndividualsCount(item) > 0" class="small">({{ getSubmissionIndividualsLabel(item) }})</span>
<i v-if="item._isInvalid" class="iconify text-warning" data-icon="bi:exclamation-circle"></i>
<div class="pull-right">
<i class="fa fa-chevron-right"></i>
Expand All @@ -41,60 +41,75 @@

<b-modal id="modal-add-submission" size="lg" scrollable title="Add Submission to Submission List" hide-footer>
<p>
Create a new submission by selecting one of the variants below or
<b-button size="sm" variant="primary" @click="onCreateEmptySubmissionClicked()">
<i class="iconify" data-icon="fa-solid:fa-asterisk"></i>
create empty.
</b-button>
Create new submissions by selecting from the variants below and clicking <b-badge variant="primary"><i class="iconify" data-icon="fa-solid:plus"></i></b-badge>.
If you select no variant, a blank submission will be created.
</p>
<ul class="list-group mb-3">
<li
class="list-group-item list-group-item-action list-group-item-dark"
>
<b>Filters:</b>

<span
:class="{ 'cursor-pointer ml-2 badge badge-light': !modalIncludeAll, 'cursor-pointer ml-2 badge badge-success': modalIncludeAll }"
@click="toggleData('modalIncludeAll')"
>
all: <i :class="{ 'fa fa-check-circle': modalIncludeAll, 'fa fa-times-circle': !modalIncludeAll }"></i>
</span>
<span
:class="{ 'cursor-pointer ml-1 badge badge-light': !modalIncludeComments, 'cursor-pointer ml-1 badge badge-success': modalIncludeComments }"
@click="toggleData('modalIncludeComments')"
>
comments <i :class="{ 'fa fa-check-circle': modalIncludeComments, 'fa fa-times-circle': !modalIncludeComments }"></i>
</span>
<span
:class="{ 'cursor-pointer ml-1 badge badge-light': !modalIncludeCandidates, 'cursor-pointer ml-1 badge badge-success': modalIncludeCandidates }"
@click="toggleData('modalIncludeCandidates')"
>
candidates <i :class="{ 'fa fa-check-circle': modalIncludeCandidates, 'fa fa-times-circle': !modalIncludeCandidates }"></i>
</span>
<span
:class="{ 'cursor-pointer ml-1 badge badge-light': !modalIncludeFinalCausatives, 'cursor-pointer ml-1 badge badge-success': modalIncludeFinalCausatives }"
@click="toggleData('modalIncludeFinalCausatives')"
>
causative <i :class="{ 'fa fa-check-circle': modalIncludeFinalCausatives, 'fa fa-times-circle': !modalIncludeFinalCausatives }"></i>
</span>
<span
:class="{ 'cursor-pointer ml-1 badge badge-light': !modalIncludeAcmg3, 'cursor-pointer ml-1 badge badge-success': modalIncludeAcmg3 }"
@click="toggleData('modalIncludeAcmg3')"
>
VUCS3 <i :class="{ 'fa fa-check-circle': modalIncludeAcmg3, 'fa fa-times-circle': !modalIncludeAcmg3 }"></i>
</span>
<span
:class="{ 'cursor-pointer ml-1 badge badge-light': !modalIncludeAcmg4, 'cursor-pointer ml-1 badge badge-success': modalIncludeAcmg4 }"
@click="toggleData('modalIncludeAcmg4')"
>
LP4 <i :class="{ 'fa fa-check-circle': modalIncludeAcmg4, 'fa fa-times-circle': !modalIncludeAcmg4 }"></i>
</span>
<span
:class="{ 'cursor-pointer ml-1 badge badge-light': !modalIncludeAcmg5, 'cursor-pointer ml-1 badge badge-success': modalIncludeAcmg5 }"
@click="toggleData('modalIncludeAcmg5')"
>
P5 <i :class="{ 'fa fa-check-circle': modalIncludeAcmg5, 'fa fa-times-circle': !modalIncludeAcmg5 }"></i>
</span>
<div class="form-inline">
<div class="form-group">
<span
:class="{ 'cursor-pointer badge badge-light': !modalIncludeAll, 'cursor-pointer ml-2 badge badge-success': modalIncludeAll }"
@click="toggleData('modalIncludeAll')"
>
all: <i :class="{ 'fa fa-check-circle': modalIncludeAll, 'fa fa-times-circle': !modalIncludeAll }"></i>
</span>
<span
:class="{ 'cursor-pointer ml-1 badge badge-light': !modalIncludeComments, 'cursor-pointer ml-1 badge badge-success': modalIncludeComments }"
@click="toggleData('modalIncludeComments')"
>
<i class="iconify" data-icon="fa-solid:comment"></i>&nbsp;&nbsp;
<i :class="{ 'fa fa-check-circle': modalIncludeComments, 'fa fa-times-circle': !modalIncludeComments }"></i>
</span>
<span
:class="{ 'cursor-pointer ml-1 badge badge-light': !modalIncludeCandidates, 'cursor-pointer ml-1 badge badge-success': modalIncludeCandidates }"
@click="toggleData('modalIncludeCandidates')"
>
<i class="iconify" data-icon="fa-solid:heart"></i>&nbsp;&nbsp;
<i :class="{ 'fa fa-check-circle': modalIncludeCandidates, 'fa fa-times-circle': !modalIncludeCandidates }"></i>
</span>
<span
:class="{ 'cursor-pointer ml-1 badge badge-light': !modalIncludeFinalCausatives, 'cursor-pointer ml-1 badge badge-success': modalIncludeFinalCausatives }"
@click="toggleData('modalIncludeFinalCausatives')"
>
<i class="iconify" data-icon="fa-solid:flag-checkered"></i>&nbsp;&nbsp;
<i :class="{ 'fa fa-check-circle': modalIncludeFinalCausatives, 'fa fa-times-circle': !modalIncludeFinalCausatives }"></i>
</span>
<span
:class="{ 'cursor-pointer ml-1 badge badge-light': !modalIncludeAcmg3, 'cursor-pointer ml-1 badge badge-success': modalIncludeAcmg3 }"
@click="toggleData('modalIncludeAcmg3')"
>
VUCS3 <i :class="{ 'fa fa-check-circle': modalIncludeAcmg3, 'fa fa-times-circle': !modalIncludeAcmg3 }"></i>
</span>
<span
:class="{ 'cursor-pointer ml-1 badge badge-light': !modalIncludeAcmg4, 'cursor-pointer ml-1 badge badge-success': modalIncludeAcmg4 }"
@click="toggleData('modalIncludeAcmg4')"
>
LP4 <i :class="{ 'fa fa-check-circle': modalIncludeAcmg4, 'fa fa-times-circle': !modalIncludeAcmg4 }"></i>
</span>
<span
:class="{ 'cursor-pointer ml-1 badge badge-light': !modalIncludeAcmg5, 'cursor-pointer ml-1 badge badge-success': modalIncludeAcmg5 }"
@click="toggleData('modalIncludeAcmg5')"
>
P5 <i :class="{ 'fa fa-check-circle': modalIncludeAcmg5, 'fa fa-times-circle': !modalIncludeAcmg5 }"></i>
</span>
</div>
<div class="form-group ml-3">
<b-form-input v-model="individualFilter" placeholder="Sample ID" size="sm"></b-form-input>
</div>
<div class="form-group ml-3">
<b-form-checkbox v-model="onlyAddAffected">
affecteds only
</b-form-checkbox>
</div>
<div class="form-group ml-3">
<b-button @click="onCreateSubmissionClicked()" size="sm" variant="primary">
<i class="iconify" data-icon="fa-solid:plus"></i>
</b-button>
</div>
</div>
</li>
<li
class="list-group-item list-group-item-action"
Expand All @@ -103,10 +118,12 @@
@click="onCreateSubmissionClicked(item)"
>
<h5>
{{ getVariantLabel(item) }}
<small v-if="getVariantExtraLabel(item)">
{{ getVariantExtraLabel(item) }}
</small>
<b-checkbox>
{{ getVariantLabel(item) }}
<small v-if="getVariantExtraLabel(item)">
{{ getVariantExtraLabel(item) }}
</small>
</b-checkbox>
</h5>
<small>
<span
Expand Down Expand Up @@ -154,7 +171,7 @@
class="list-group-item list-group-item-action text-muted font-italic text-center"
v-if="modalUserAnnotations.length === 0"
>
There is no user annotation for variants in this project.
There is no matching user annotation for variants in this project.
</li>
</ul>
</b-modal>
Expand All @@ -177,12 +194,15 @@ export default {
modalIncludeFinalCausatives: true,
modalIncludeAcmg3: false,
modalIncludeAcmg4: true,
modalIncludeAcmg5: true
modalIncludeAcmg5: true,
individualFilter: '',
onlyAddAffected: true
}
},
computed: {
...mapState({
individuals: state => state.clinvarExport.individuals,
submissionIndividuals: state => state.clinvarExport.submissionIndividuals,
submissions: state => state.clinvarExport.submissions,
currentSubmissionSet: state => state.clinvarExport.currentSubmissionSet,
currentSubmission: state => state.clinvarExport.currentSubmission,
Expand Down Expand Up @@ -216,6 +236,11 @@ export default {
return { ...smallVar, flags, rating, comments }
})
.filter(smallVar => {
if (this.individualFilter) {
if (!smallVar.caseNames.some(s => s.includes(this.individualFilter))) {
return false
}
}
if (this.modalIncludeAll) {
return true
} else if (this.modalIncludeComments && smallVar.comments.length > 0) {
Expand Down Expand Up @@ -252,6 +277,20 @@ export default {
getSubmissionLabel,
validConfirmed,
getSubmissionIndividualsCount (item) {
return item.submission_individuals.length
},
getSubmissionIndividualsLabel (item) {
console.log(item.submission_individuals)
console.log(this.submissionIndividuals)
let names = item.submission_individuals.map(
uuid => this.individuals[this.submissionIndividuals[uuid].individual].name.replace(/-N.-DNA.-....$/, '')
)
if (names.length > 2) {
names = names.slice(0, 2) + ['...']
}
return names.join(', ')
},
getVariantLabel (item) {
return `${item.refseq_gene_symbol}:${item.refseq_hgvs_p || '<none>'}`
},
Expand All @@ -274,11 +313,13 @@ export default {
}
},
// XXX
onListItemClicked (item) {
this.validConfirmed(() => {
this.selectCurrentSubmission(item)
})
},
// XXX
onCreateEmptySubmissionClicked () {
this.createSubmissionInCurrentSubmissionSet({
smallVariant: null,
Expand Down
18 changes: 13 additions & 5 deletions varfish/vueapp/src/store/modules/clinvarExport.js
View file
Expand Up @@ -103,10 +103,17 @@ const actions = {
* Changes will be committed through `wizardSave`.
*/
createNewSubmissionSet ({ state, commit }) {
const titles = Object.values(state.submissionSets).map(submissionSet => submissionSet.title)
let title = 'New Submission Set'
let i = 2
while (titles.includes(title)) {
title = 'New Submission Set #' + i
i += 1
}
const submissionSet = {
sodar_uuid: uuidv4(),
date_modified: new Date().toLocaleString(),
title: 'New Submission',
title: title,
state: 'draft',
sort_order: Object.keys(state.submissionSets).length,
submitter: null,
Expand All @@ -117,6 +124,7 @@ const actions = {

commit('ADD_SUBMISSION_SET', submissionSet)
commit('SET_CURRENT_SUBMISSION_SET', submissionSet.sodar_uuid)
commit('SET_WIZARD_STATE', WizardState.submissionSet)
commit('SET_APP_STATE', AppState.add)
},
/**
Expand Down Expand Up @@ -867,8 +875,8 @@ const mutations = {
phenotypes: JSON.parse(JSON.stringify(state.individuals[individual.sodar_uuid].phenotype_terms)),
variant_zygosity: variantZygosity,
variant_allele_count: variantAlleleCount,
variant_origin: 'not provided',
source: 'not provided',
variant_origin: 'germline',
source: 'clinical testing',
tissue: 'Blood',
citations: []
}
Expand Down Expand Up @@ -898,8 +906,8 @@ const mutations = {
phenotypes: JSON.parse(JSON.stringify(individual.phenotype_terms || [])),
variant_allele_count: variantAlleleCount,
variant_zygosity: variantZygosity,
variant_origin: 'not provided',
source: 'not provided',
variant_origin: 'germline',
source: 'clinical testing',
tissue: 'Blood',
citations: []
}
Expand Down

0 comments on commit bd159df

Please sign in to comment.