Fixing issue with multiple added variants (#283)

HISTORY.rst

@@ -38,6 +38,8 @@ End-User Summary
 - Improving performance of project overview (#303)
 - Improving performance of case listing (#304)
 - Adding shortcut buttons to phenotype annotation (#289)
+- Fixing issue with multiple added variants (#283)
+- Implementing several usability improvements for clinvar submission editor (#286).
 
 Full Change List
 ================
@@ -77,6 +79,8 @@ Full Change List
 - Improving performance of project overview (#303)
 - Improving performance of case listing (#304)
 - Adding shortcut buttons to phenotype annotation (#289)
+- Fixing issue with multiple added variants (#283)
+- Implementing several usability improvements for clinvar submission editor (#286).
 
 -------
 v0.23.9

varfish/vueapp/src/components/SubmissionList.vue

@@ -20,9 +20,10 @@
                 @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>
+                <span class="iconify" data-icon="fa-solid:chevron-right"></span>
               </div>
             </b-list-group-item>
           </draggable>
@@ -41,68 +42,89 @@
 
     <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"
+          :class="{
+            'list-group-item x-not-active': !isVariantSelected(item),
+            'list-group-item x-active': isVariantSelected(item),
+          }"
           v-for="item in modalUserAnnotations"
           :key="item.sodar_uuid"
-          @click="onCreateSubmissionClicked(item)"
+          @click="onVariantClicked(item)"
+          @mousedown.prevent=""
         >
           <h5>
+            <i class="iconify x-active-show text-primary" data-icon="bi:check-square-fill"></i>
+            <i class="iconify x-active-hide text-muted" data-icon="bi:square"></i>
             {{ getVariantLabel(item) }}
             <small v-if="getVariantExtraLabel(item)">
               {{ getVariantExtraLabel(item) }}
@@ -116,7 +138,8 @@
               }"
               :title="`${item.comments.length} user comments`"
             >
-              <i class="fa fa-comment-o"></i> {{ item.comments.length }}
+              <i class="iconify" data-icon="fa-regular:comment"></i>
+              {{ item.comments.length }}
             </span>
             |
             <span
@@ -154,7 +177,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>
@@ -165,7 +188,7 @@
 import { mapActions, mapState } from 'vuex'
 import draggable from 'vuedraggable'
 import SubmissionEditor from './SubmissionEditor'
-import { getSubmissionLabel, validConfirmed } from '@/helpers'
+import { isDiseaseTerm, getSubmissionLabel, validConfirmed, removeItemAll, HPO_INHERITANCE_MODE, HPO_AGE_OF_ONSET } from '@/helpers'
 
 export default {
   components: { draggable, SubmissionEditor },
@@ -177,12 +200,16 @@ export default {
       modalIncludeFinalCausatives: true,
       modalIncludeAcmg3: false,
       modalIncludeAcmg4: true,
-      modalIncludeAcmg5: true
+      modalIncludeAcmg5: true,
+      individualFilter: '',
+      onlyAddAffected: true,
+      selectedSmallVariants: []
     }
   },
   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,
@@ -216,6 +243,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) {
@@ -252,6 +284,25 @@ export default {
     getSubmissionLabel,
     validConfirmed,
 
+    getSubmissionIndividualsCount (item) {
+      return item.submission_individuals.length
+    },
+    getSubmissionIndividualsLabel (item) {
+      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(', ')
+    },
+    isVariantSelected (item) {
+      const variantDesc = this.getVariantDesc(item)
+      return this.selectedSmallVariants.includes(variantDesc)
+    },
+    getVariantDesc (item) {
+      return `${item.release}-${item.chromosome}-${item.start}-${item.reference}-${item.alternative}`
+    },
     getVariantLabel (item) {
       return `${item.refseq_gene_symbol}:${item.refseq_hgvs_p || '<none>'}`
     },
@@ -279,19 +330,34 @@ export default {
         this.selectCurrentSubmission(item)
       })
     },
-    onCreateEmptySubmissionClicked () {
-      this.createSubmissionInCurrentSubmissionSet({
-        smallVariant: null,
-        submission: this.getEmptySubmissionData(),
-        individualUuids: []
-      })
-      this.$bvModal.hide('modal-add-submission')
+    onVariantClicked (smallVariant) {
+      const variantDesc = this.getVariantDesc(smallVariant)
+      if (this.selectedSmallVariants.includes(variantDesc)) {
+        removeItemAll(this.selectedSmallVariants, variantDesc)
+      } else {
+        this.selectedSmallVariants.push(variantDesc)
+      }
     },
     /**
      * Clicked on an existing small variant with user annotation.
      */
-    onCreateSubmissionClicked (smallVariant) {
-      this.createSubmissionInCurrentSubmissionSet(this.getSubmissionData(smallVariant))
+    onCreateSubmissionClicked () {
+      if (!this.selectedSmallVariants.length) {
+        this.createSubmissionInCurrentSubmissionSet({
+          smallVariant: null,
+          submission: this.getEmptySubmissionData(),
+          individualUuids: []
+        })
+      } else {
+        for (let i = 0; i < this.modalUserAnnotations.length; ++i) {
+          const smallVariant = this.modalUserAnnotations[i]
+          const variantDesc = this.getVariantDesc(smallVariant)
+          if (this.selectedSmallVariants.includes(variantDesc)) {
+            this.createSubmissionInCurrentSubmissionSet(this.getSubmissionData(smallVariant))
+          }
+        }
+        this.selectedSmallVariants = []
+      }
       this.$bvModal.hide('modal-add-submission')
     },
     onAddSubmissionClicked () {
@@ -305,10 +371,14 @@ export default {
      */
     getSubmissionData (smallVariant) {
       // Get individuals that carry the variants.
+      const affectedNames = Object.values(this.individuals)
+        .filter(indiv => indiv.affected === 'yes')
+        .map(indiv => indiv.name)
       const carrierNames = Object.entries(smallVariant.genotype)
         .filter(kv => {
+          const name = kv[0]
           const value = kv[1]
-          return value.gt && value.gt.includes('1')
+          return value.gt && value.gt.includes('1') && (!this.onlyAddAffected || affectedNames.includes(name))
         })
         .map(kv => kv[0])
       const individualUuids = Object.entries(this.individuals)
@@ -327,15 +397,36 @@ export default {
       const variantGene = [smallVariant.refseq_gene_symbol]
       const variantHgvs = [smallVariant.refseq_hgvs_p || 'p.?']
 
+      let ageOfOnset = ''
+      let inheritance = ''
+      const diseases = []
+      for (const individualUuid of individualUuids) {
+        const individual = this.individuals[individualUuid]
+        if (individual.phenotype_terms) {
+          // eslint-disable-next-line camelcase
+          for (let { term_id, term_name } of individual.phenotype_terms) {
+            // eslint-disable-next-line camelcase
+            term_name = term_name.split(';')[0].trim()
+            inheritance = inheritance || HPO_INHERITANCE_MODE.get(term_id) || ''
+            ageOfOnset = ageOfOnset || HPO_AGE_OF_ONSET.get(term_id) || ''
+            // eslint-disable-next-line camelcase
+            if (isDiseaseTerm(term_id) && !diseases.some(x => x.term_id === term_id)) {
+              diseases.push({ term_id, term_name })
+            }
+          }
+        }
+      }
+
       const submission = {
         record_status: 'novel',
         release_status: 'public',
         significance_status: 'criteria provided, single submitter',
         significance_description: significanceDescription,
         significance_last_evaluation: (new Date()).toISOString().substr(0, 10),
         assertion_method: Object.values(this.assertionMethods)[0].sodar_uuid,
-        age_of_onset: '',
-        inheritance: '',
+        age_of_onset: ageOfOnset,
+        diseases: diseases,
+        inheritance: inheritance,
         variant_type: 'Variation',
         variant_assembly: smallVariant.release,
         variant_chromosome: smallVariant.chromosome,
@@ -398,4 +489,12 @@ export default {
 .cursor-pointer {
   cursor: pointer;
 }
+
+.x-not-active .x-active-show {
+  display: none;
+}
+
+.x-active .x-active-hide {
+  display: none;
+}
 </style>