Bug select few annotations in one item navigate to another item breaks

src/components/annotations/variants/VariantsView.vue

@@ -2,7 +2,6 @@
 
 import VariantsTopBar from "@/components/annotations/variants/VariantsTopBar.vue";
 import VariantsList from "@/components/annotations/variants/VariantsList.vue";
-import { getItemColorBasedOnIndex } from '@/utils/color';
 import {useAnnotationsStore} from "@/stores/annotations";
 import {computed, onBeforeUnmount, watch} from "vue";
 import {useContentsStore} from "@/stores/contents";
@@ -13,8 +12,6 @@ import { getVariantAnnotations } from '@/utils/annotations'
 const annotationStore = useAnnotationsStore();
 const contentsStore = useContentsStore();
 
-allocateWitnessColorInVariantItem()
-
 const annotations = computed<Annotation[]>(() => annotationStore.annotations);
 const activeContentUrl = computed<string>(() => contentsStore.activeContentUrl);
 
@@ -88,18 +85,6 @@ const unsubscribe = TextEventBus.on('click', ({ target }) => {
 
 onBeforeUnmount(() => unsubscribe())
 
-
-function allocateWitnessColorInVariantItem() {
-  const colors = {}
-  if (!annotationStore.witnesses) return
-  if (annotationStore.witnesses.length === 0) return;
-
-  annotationStore.witnesses.forEach((witness, i) => {
-    colors[witness.idno] = getItemColorBasedOnIndex(i)
-  })
-  annotationStore.setVariantItemsColors(colors)
-  }
-
 </script>
 
 <template>

src/stores/annotations.ts

@@ -9,6 +9,7 @@ import {useConfigStore} from '@/stores/config';
 import TextEventBus from '@/utils/TextEventBus';
 
 import { getVariantAnnotations } from '@/utils/annotations'
+import { allocateWitnessColorInVariantItem } from '@/utils/variants';
 
 
 export const useAnnotationsStore = defineStore('annotations', () => {
@@ -176,7 +177,9 @@ export const useAnnotationsStore = defineStore('annotations', () => {
   const annotationLoaded = ({ items, refs }) => {
     annotations.value = items
     witnesses.value = refs
+
     preprocessVariants()
+    allocateWitnessColorInVariantItem()
 
     updateAnnotationLoading(false)
   };
@@ -215,9 +218,14 @@ export const useAnnotationsStore = defineStore('annotations', () => {
     annotationStore.setActiveAnnotations(activeAnnotationsList)
 
     const selector = AnnotationUtils.generateTargetSelector(removeAnnotation);
-    if (selector) {
+    const textEl = document.querySelector('#text-content')
+    const target = textEl.querySelector(selector)
+
+
+    // when target is null -> we switched to another item - we don't continue and change the level of highlight of the text
+    if (target) {
       if (AnnotationUtils.isVariant(removeAnnotation)) {
-        if (AnnotationUtils.getCurrentLevel(document.querySelector(selector)) > 0
+        if (AnnotationUtils.getCurrentLevel(target) > 0
           && Object.keys(activeAnnotations.value).findIndex(key => {
             const sel = AnnotationUtils.generateTargetSelector(activeAnnotations.value[key])
             return sel === selector

src/utils/variants.js

@@ -0,0 +1,15 @@
+import { useAnnotationsStore } from "@/stores/annotations";
+import { getItemColorBasedOnIndex } from '@/utils/color';
+
+
+export function allocateWitnessColorInVariantItem() {
+    const annotationStore = useAnnotationsStore()
+    const colors = {}
+    if (!annotationStore.witnesses) return
+    if (annotationStore.witnesses.length === 0) return;
+
+    annotationStore.witnesses.forEach((witness, i) => {
+      colors[witness.idno] = getItemColorBasedOnIndex(i)
+    })
+    annotationStore.setVariantItemsColors(colors)
+}

tests/cypress/e2e/variants.cy.js

@@ -84,6 +84,49 @@ const selectors = {
           .should("have.length", 11)
       });
 
+      it('Should switch from an item with no variants to another one with variants and show the list correctly', () => {
+        cy
+          .visit('/ahiqar-arabic-karshuni-local.html?tido=m20_i0_p0.0-1.0-2.0-3.2')
+          .wait(500)
+          .reload()
+          .wait(500)
+          .visit('/ahiqar-arabic-karshuni-local.html?tido=m20_i1_p0.0-1.0-2.0-3.2')
+          .wait(500)
+          .get(selectors.list)
+          .children()
+          .should('have.length', 11)
+        /*
+          this test passes locally, but fails in the github pi
+          cy
+          .visit('/ahiqar-arabic-karshuni-local.html?tido=m20_i0_p0.0-1.0-2.0-3.2')
+          .reload()
+          .get('.header')                                // go to next item
+          .find('button')
+          .contains('Next Sheet')
+          .click()
+        cy.get(selectors.list)
+          .children()
+          .should('have.length', 11)
+          */
+
+      })
+
+      it('Should show the new list of annotations when first selecting a few annotations and then switching the item', () => {
+        cy
+          .get(selectors.list)
+          .children()
+          .eq(0)
+          .click()
+          .next()
+          .click()
+          .get(selectors.panel1)
+          .find('ul[role="tree"]')
+          .find('ul[role="group"]')
+          .find('div').contains('182b')
+          .click()
+          .checkNoAnnotationsAvailable()
+      })
+
       it('select (unselect) a variant item', () => {
         // should select a variant item and add its witness after the highlighted text + the highlighted text should become light blue
         cy