Bug in Variants apparatus: update variants list according to witnesses selection after disabling single select mode

src/components/annotations/variants/VariantsTopBar.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import {useAnnotationsStore} from "@/stores/annotations";
-import {computed, reactive, ref, watch} from "vue";
+import {computed, ref, watch} from "vue";
 import colors from "tailwindcss/colors";
 import BaseDialog from "@/components/base/BaseDialog.vue";
 import ActiveVariantsDetails from "@/components/annotations/variants/ActiveVariantsDetails.vue";
@@ -11,15 +11,16 @@ import BaseCheckbox from "@/components/base/BaseCheckbox.vue";
 const annotationsStore = useAnnotationsStore()
 
 const witnesses = computed(() => annotationsStore.witnesses)
-const amountActiveWitnesses = computed(() => Object.keys(activeWitnessesIds).filter(key => !!(activeWitnessesIds[key])).length)
-const activeWitnessesIds = reactive({})
+const amountActiveWitnesses = computed(() => Object.keys(annotationsStore.activeWitnessesIds).filter(key => !!(annotationsStore.activeWitnessesIds[key])).length)
 const witnessesDetailsDialogOpen = ref(false);
 const showWitnessesDropdown = ref(false);
 const variantsDetailsDialogOpen = ref(false);
 
 watch(witnesses, (value) => {
+  let activeWitnessesIds = annotationsStore.activeWitnessesIds
   if(value?.length > 0) {
    value.forEach(witness => activeWitnessesIds[witness.idno] = true);
+   annotationsStore.setActiveWitnessesIds(activeWitnessesIds)
   }
 },
   { immediate: true }
@@ -28,8 +29,10 @@ function getWitnessColor(witness: string) {
   return annotationsStore.variantItemsColors[witness];
 }
 function toggleWitness(witness: Witness, isActive: boolean) {
+  let activeWitnessesIds = annotationsStore.activeWitnessesIds
   activeWitnessesIds[witness.idno] = isActive
   annotationsStore.filterAnnotationsByWitnesses(Object.keys(activeWitnessesIds).filter(key => !!(activeWitnessesIds[key])))
+  annotationsStore.setActiveWitnessesIds(activeWitnessesIds)
 }
 </script>
 
@@ -53,7 +56,7 @@ function toggleWitness(witness: Witness, isActive: boolean) {
           >
             <BaseCheckbox
               :id="`witness-toggle-${i}`"
-              :model-value="activeWitnessesIds[witness.idno]"
+              :model-value="annotationsStore.activeWitnessesIds[witness.idno]"
               @update:model-value="toggleWitness(witness, $event)"
             />
             <label

src/stores/annotations.ts

@@ -1,5 +1,5 @@
 import {defineStore} from 'pinia'
-import { ref } from 'vue';
+import { ref, reactive } from 'vue';
 
 import * as AnnotationUtils from '@/utils/annotations';
 import {request} from '@/utils/http';
@@ -23,6 +23,8 @@ export const useAnnotationsStore = defineStore('annotations', () => {
   const visibleAnnotations = ref<Annotation[]>([])
   const isLoading = ref<boolean>(false);
   const isSingleSelectMode = ref<boolean>(false)
+  let activeWitnessesIds = reactive({})
+
 
 
   const setActiveAnnotations = (annotations: ActiveAnnotation) => {
@@ -33,6 +35,10 @@ export const useAnnotationsStore = defineStore('annotations', () => {
     visibleAnnotations.value = payload
   }
 
+  function setActiveWitnessesIds(payload) {
+    activeWitnessesIds = payload
+  }
+
   function updateAnnotationLoading(payload: boolean) {
     isLoading.value = payload;
   }
@@ -41,6 +47,20 @@ export const useAnnotationsStore = defineStore('annotations', () => {
     variantItemsColors.value = payload
   }
 
+  function getVariantsOfSelectedWitnesses(): Annotation[] {
+    let list = []
+    if (filteredAnnotations.value.length === 0) return []
+    if (Object.keys(activeWitnessesIds).length === 0) return []
+
+    filteredAnnotations.value.forEach((annotation) => {
+      const witness = annotation.body.value.witness
+      if (activeWitnessesIds[witness] === true) {
+        list.push(annotation)
+      }
+    })
+    return list
+  }
+
   const addActiveAnnotation = (id: string) => {
     const annotationStore = useAnnotationsStore()
     const newActiveAnnotation: Annotation = annotations.value.find((annotation) => annotation.id === id);
@@ -462,7 +482,7 @@ export const useAnnotationsStore = defineStore('annotations', () => {
 
   const disableSingleSelectMode = () => {
     resetAnnotations()
-    visibleAnnotations.value = filteredAnnotations.value
+    visibleAnnotations.value = getVariantsOfSelectedWitnesses()
     highlightTargetsLevel0();
     isSingleSelectMode.value = false
   }
@@ -476,10 +496,12 @@ export const useAnnotationsStore = defineStore('annotations', () => {
     visibleAnnotations,
     isLoading,
     isSingleSelectMode,
-    variantItemsColors,  // states
+    variantItemsColors,  
+    activeWitnessesIds, // states
     setActiveAnnotations,
     setVisibleAnnotations,
-    setVariantItemsColors,  // functions
+    setVariantItemsColors,
+    setActiveWitnessesIds,  // functions
     addActiveAnnotation,
     selectFilteredAnnotations,
     addHighlightAttributesToText,

tests/cypress/e2e/variants.cy.js

@@ -554,9 +554,31 @@ const selectors = {
               cy
               .get(selectors.list)
               .should('be.visible')
-              .children()
-              .should("have.length", 13)      // we have 11 variant items as in the normal mode - no single select mode
+              .find('div[data-annotation-id]')
+              .should("have.length", 11)      // we have 11 variant items as in the normal mode - no single select mode
             })
           })
+
+          it('should show only the variants items according to witnesses drop down selection after disabling single select mode', () => {
+            cy.get(selectors.list)
+              .clickWitnessItem('4 Witnesses selected', 'Cod. Arab. 236')
+              .parent().parent()
+              .contains('DFM 614').click()
+
+            cy.get(selectors.panel4)
+              .contains('2 Witnesses selected')
+              .click({force: true})
+
+            cy
+              .clickSingleSelectButton()  
+            cy
+              .clickSingleSelectButton()
+            cy
+              .get(selectors.list)
+              .should('be.visible')
+              .find('div[data-annotation-id]')
+              .should("have.length", 6)   
+
+          })
       })
   });