From f27ce871ee039ec207d648d33015c80d8b98cb98 Mon Sep 17 00:00:00 2001
From: malkja <orlin.malkja@sub.uni-goettingen.de>
Date: Fri, 26 Jul 2024 12:08:36 +0200
Subject: [PATCH 01/15] feat: add a top row for 'witness', 'entry' and update
 the styling of the variant item

---
 src/components/annotations/AnnotationVariantItem.vue | 8 ++++----
 src/components/annotations/AnnotationsList.vue       | 4 ++++
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/annotations/AnnotationVariantItem.vue b/src/components/annotations/AnnotationVariantItem.vue
index 5cdfa992..316843f7 100644
--- a/src/components/annotations/AnnotationVariantItem.vue
+++ b/src/components/annotations/AnnotationVariantItem.vue
@@ -1,8 +1,8 @@
 <template>
-    <div v-for="(variant, i) in annotation.body.value" :key="i"  class="t-items-center t-flex">
-          <span v-if="variant.witness" v-html="variant.witness" class="t-mr-7"/>
-          <span v-else  class="t-mr-7"> - </span>
-          <span v-html="variant.entry"/>
+    <div v-for="(variant, i) in annotation.body.value" :key="i"  class="t-items-center t-flex t-justify-around">
+          <span v-if="variant.witness" v-html="variant.witness" class=""/>
+          <span v-else class="" > - </span>
+          <span v-html="variant.entry" class=""/>
     </div>
 </template>
 
diff --git a/src/components/annotations/AnnotationsList.vue b/src/components/annotations/AnnotationsList.vue
index e121347c..ad8d453f 100644
--- a/src/components/annotations/AnnotationsList.vue
+++ b/src/components/annotations/AnnotationsList.vue
@@ -1,5 +1,9 @@
 <template>
   <div class="annotations-list t-overflow-auto">
+    <div class="t-items-center t-flex t-justify-around"> 
+      <span class="t-font-bold">Witness</span>
+      <span class="t-font-bold">Entry</span>
+   </div>
     <div
       v-for="annotation in configuredAnnotations"
       :key="annotation.id"

From 31e33bbd978e171b744ddfead993832422c95ccb Mon Sep 17 00:00:00 2001
From: malkja <orlin.malkja@sub.uni-goettingen.de>
Date: Fri, 26 Jul 2024 13:30:54 +0200
Subject: [PATCH 02/15] fix: show the row: 'witness', 'entry' only for the
 Variants tab

---
 src/components/annotations/AnnotationsList.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/annotations/AnnotationsList.vue b/src/components/annotations/AnnotationsList.vue
index ad8d453f..d4f29c65 100644
--- a/src/components/annotations/AnnotationsList.vue
+++ b/src/components/annotations/AnnotationsList.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="annotations-list t-overflow-auto">
-    <div class="t-items-center t-flex t-justify-around"> 
+    <div v-if="isVariantsTabOpened()" class="t-items-center t-flex t-justify-around"> 
       <span class="t-font-bold">Witness</span>
       <span class="t-font-bold">Entry</span>
    </div>
@@ -80,6 +80,10 @@ function isVariant(annotation) {
   return annotation.body['x-content-type'] === 'Variant';
 }
 
+function isVariantsTabOpened() {
+  return props.configuredAnnotations[0].body['x-content-type'] === 'Variant';
+}
+
 </script>
 
 

From 1ec66d101c90d6c6866ea2522e4bdd4af6a21858 Mon Sep 17 00:00:00 2001
From: malkja <orlin.malkja@sub.uni-goettingen.de>
Date: Fri, 26 Jul 2024 14:18:51 +0200
Subject: [PATCH 03/15] feat: add a box to the witness of the variant item

---
 src/components/annotations/AnnotationVariantItem.vue | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/annotations/AnnotationVariantItem.vue b/src/components/annotations/AnnotationVariantItem.vue
index 316843f7..b615ef92 100644
--- a/src/components/annotations/AnnotationVariantItem.vue
+++ b/src/components/annotations/AnnotationVariantItem.vue
@@ -1,7 +1,9 @@
 <template>
-    <div v-for="(variant, i) in annotation.body.value" :key="i"  class="t-items-center t-flex t-justify-around">
-          <span v-if="variant.witness" v-html="variant.witness" class=""/>
-          <span v-else class="" > - </span>
+    <div v-for="(variant, i) in annotation.body.value" :key="i"  class="t-items-center t-flex t-justify-around t-mb-1">
+          <div class="t-rounded t-box-border t-w-150 t-h-8 t-border-2 t-p-1 t-bg-zinc-200">
+            <span v-if="variant.witness" v-html="variant.witness"/>
+            <span v-else  > - </span>
+          </div>
           <span v-html="variant.entry" class=""/>
     </div>
 </template>

From 20bb37567f6e80a9ccdda7fd18b43ec60949d095 Mon Sep 17 00:00:00 2001
From: malkja <orlin.malkja@sub.uni-goettingen.de>
Date: Fri, 26 Jul 2024 16:49:46 +0200
Subject: [PATCH 04/15] feat: show and hide the witnesses when
 clicking/unclicking the annotation or the annotated text

---
 src/stores/annotations.ts |  6 ++++++
 src/utils/annotations.js  | 27 +++++++++++++++++++++++++++
 2 files changed, 33 insertions(+)

diff --git a/src/stores/annotations.ts b/src/stores/annotations.ts
index 8a026748..2409658c 100644
--- a/src/stores/annotations.ts
+++ b/src/stores/annotations.ts
@@ -62,6 +62,9 @@ export const useAnnotationsStore = defineStore('annotations', () => {
         if (elements.length > 0) {
           const target: HTMLElement = elements[0];
           Utils.addIcon(target, newActiveAnnotation, iconName);
+          if (newActiveAnnotation.body['x-content-type'] === 'Variant') {
+            Utils.addWitness(target, newActiveAnnotation);
+          }
           scrollIntoViewIfNeeded(target, target.closest('.panel-body'));
         }
     };
@@ -131,8 +134,10 @@ export const useAnnotationsStore = defineStore('annotations', () => {
       
         const selector = AnnotationUtils.generateTargetSelector(removeAnnotation);
         if (selector) {
+          console.log('selector', selector)
           AnnotationUtils.highlightTargets(selector, { operation: 'DEC' });
           AnnotationUtils.removeIcon(removeAnnotation);
+          AnnotationUtils.removeWitness(selector)
         }
       };
 
@@ -146,6 +151,7 @@ export const useAnnotationsStore = defineStore('annotations', () => {
             if (selector) {
               AnnotationUtils.highlightTargets(selector, { level: -1 });
               AnnotationUtils.removeIcon(annotation);
+              //AnnotationUtils.removeWitness(selector)
             }
           });
         }
diff --git a/src/utils/annotations.js b/src/utils/annotations.js
index 634b12d4..e6e3f434 100644
--- a/src/utils/annotations.js
+++ b/src/utils/annotations.js
@@ -233,6 +233,33 @@ export function removeIcon(annotation) {
   }
 }
 
+export function addWitness(element, annotation) {
+
+  const witnessesList = annotation.body.value;
+  let witnessesString = ""
+  
+  witnessesList.forEach((variantItem) => {
+    witnessesString += " " + variantItem.witness;
+  });
+
+  const witnessesHtmlEl = document.createElement("SPAN");
+  //witnessesHtmlEl.classList.add("t-rounded","t-box-border", "t-w-150", "t-h-8", "t-border-2", "t-p-1");
+  witnessesHtmlEl.innerHTML = witnessesString;
+  witnessesHtmlEl.classList.add('witnesses')
+
+  element.prepend(witnessesHtmlEl);
+}
+
+export function removeWitness(selector) {
+  // selector: the selector of the annotated text
+
+  const annotatedHtmlEl = document.getElementById(selector.split('#')[1])
+  const witnessHtmlEl = annotatedHtmlEl.getElementsByClassName('witnesses')[0]
+  if (witnessHtmlEl) {
+    witnessHtmlEl.remove();
+  }
+}
+
 export function getAnnotationListElement(id, container) {
   return [...container.querySelectorAll('.q-item')].find((annotationItem) => {
     if (!annotationItem.hasAttribute('data-annotation-id')) return false;

From b6435988fee0af99488509b3990a70353a39625e Mon Sep 17 00:00:00 2001
From: malkja <orlin.malkja@sub.uni-goettingen.de>
Date: Wed, 31 Jul 2024 10:48:57 +0200
Subject: [PATCH 05/15] feat: remove table like headings, align each variant
 item to the left

---
 src/components/annotations/AnnotationVariantItem.vue | 10 +++++-----
 src/components/annotations/AnnotationsList.vue       |  4 ----
 2 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/src/components/annotations/AnnotationVariantItem.vue b/src/components/annotations/AnnotationVariantItem.vue
index b615ef92..f73f445a 100644
--- a/src/components/annotations/AnnotationVariantItem.vue
+++ b/src/components/annotations/AnnotationVariantItem.vue
@@ -1,10 +1,10 @@
 <template>
-    <div v-for="(variant, i) in annotation.body.value" :key="i"  class="t-items-center t-flex t-justify-around t-mb-1">
-          <div class="t-rounded t-box-border t-w-150 t-h-8 t-border-2 t-p-1 t-bg-zinc-200">
-            <span v-if="variant.witness" v-html="variant.witness"/>
-            <span v-else  > - </span>
+    <div v-for="(variant, i) in annotation.body.value" :key="i"  class="t-items-center t-flex t-mb-1">
+          <div class="t-relative  t-rounded t-box-border t-w-150 t-h-8 t-border-2 t-p-1 t-bg-zinc-200">
+            <span v-if="variant.witness" v-html="variant.witness" class="t-text-sm"/>
+            <span v-else class="t-text-sm"> - </span>
           </div>
-          <span v-html="variant.entry" class=""/>
+          <span v-html="variant.entry" class="t-absolute t-right-[50%]"/>
     </div>
 </template>
 
diff --git a/src/components/annotations/AnnotationsList.vue b/src/components/annotations/AnnotationsList.vue
index d4f29c65..62cdbebf 100644
--- a/src/components/annotations/AnnotationsList.vue
+++ b/src/components/annotations/AnnotationsList.vue
@@ -1,9 +1,5 @@
 <template>
   <div class="annotations-list t-overflow-auto">
-    <div v-if="isVariantsTabOpened()" class="t-items-center t-flex t-justify-around"> 
-      <span class="t-font-bold">Witness</span>
-      <span class="t-font-bold">Entry</span>
-   </div>
     <div
       v-for="annotation in configuredAnnotations"
       :key="annotation.id"

From a4e70c97db6c36798b30559f88be44360b85ba0a Mon Sep 17 00:00:00 2001
From: malkja <orlin.malkja@sub.uni-goettingen.de>
Date: Wed, 31 Jul 2024 11:01:21 +0200
Subject: [PATCH 06/15] feat: style better the "chip"

smaller size of the "chip", more rounded, outlined without a background
---
 src/components/annotations/AnnotationVariantItem.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/annotations/AnnotationVariantItem.vue b/src/components/annotations/AnnotationVariantItem.vue
index f73f445a..a3739534 100644
--- a/src/components/annotations/AnnotationVariantItem.vue
+++ b/src/components/annotations/AnnotationVariantItem.vue
@@ -1,6 +1,6 @@
 <template>
     <div v-for="(variant, i) in annotation.body.value" :key="i"  class="t-items-center t-flex t-mb-1">
-          <div class="t-relative  t-rounded t-box-border t-w-150 t-h-8 t-border-2 t-p-1 t-bg-zinc-200">
+          <div class="t-relative  t-rounded-3xl t-box-border t-w-75 t-h-8 t-border-2 t-p-[2px]">
             <span v-if="variant.witness" v-html="variant.witness" class="t-text-sm"/>
             <span v-else class="t-text-sm"> - </span>
           </div>

From 6664471c81795aa8382500aa45adeb44c630ac3b Mon Sep 17 00:00:00 2001
From: malkja <orlin.malkja@sub.uni-goettingen.de>
Date: Wed, 31 Jul 2024 18:21:41 +0200
Subject: [PATCH 07/15] feat: add border color for each of the different
 'chips'

add border color for each of the different 'chips' and reproduce the same chips design when adding a chip in the text panel
---
 .../annotations/AnnotationVariantItem.vue     | 10 ++-
 src/stores/annotations.ts                     |  3 +-
 src/utils/annotations.js                      | 64 ++++++++++++++-----
 src/utils/color.js                            |  7 ++
 4 files changed, 64 insertions(+), 20 deletions(-)

diff --git a/src/components/annotations/AnnotationVariantItem.vue b/src/components/annotations/AnnotationVariantItem.vue
index a3739534..e727dee8 100644
--- a/src/components/annotations/AnnotationVariantItem.vue
+++ b/src/components/annotations/AnnotationVariantItem.vue
@@ -1,6 +1,6 @@
 <template>
     <div v-for="(variant, i) in annotation.body.value" :key="i"  class="t-items-center t-flex t-mb-1">
-          <div class="t-relative  t-rounded-3xl t-box-border t-w-75 t-h-8 t-border-2 t-p-[2px]">
+          <div class="t-relative  t-rounded-3xl t-box-border t-w-75 t-h-8 t-border-2 t-p-[2px]" :style="{'border-color': getCurrentVariantItemColor(i)}" >
             <span v-if="variant.witness" v-html="variant.witness" class="t-text-sm"/>
             <span v-else class="t-text-sm"> - </span>
           </div>
@@ -11,6 +11,14 @@
 
 
 <script setup lang="ts">
+import  colors from '@/utils/color'
+import AnnotationIcon from './AnnotationIcon.vue';
+
+
+function getCurrentVariantItemColor(index){
+  return colors()[index]
+}
+
 
 export interface Props {
   annotation: Annotation
diff --git a/src/stores/annotations.ts b/src/stores/annotations.ts
index 2409658c..e5f94a53 100644
--- a/src/stores/annotations.ts
+++ b/src/stores/annotations.ts
@@ -137,7 +137,7 @@ export const useAnnotationsStore = defineStore('annotations', () => {
           console.log('selector', selector)
           AnnotationUtils.highlightTargets(selector, { operation: 'DEC' });
           AnnotationUtils.removeIcon(removeAnnotation);
-          AnnotationUtils.removeWitness(selector)
+          AnnotationUtils.removeWitness(selector, removeAnnotation)
         }
       };
 
@@ -151,7 +151,6 @@ export const useAnnotationsStore = defineStore('annotations', () => {
             if (selector) {
               AnnotationUtils.highlightTargets(selector, { level: -1 });
               AnnotationUtils.removeIcon(annotation);
-              //AnnotationUtils.removeWitness(selector)
             }
           });
         }
diff --git a/src/utils/annotations.js b/src/utils/annotations.js
index e6e3f434..8c594e00 100644
--- a/src/utils/annotations.js
+++ b/src/utils/annotations.js
@@ -1,6 +1,7 @@
 import * as Utils from '@/utils/index';
 import { getIcon } from '@/utils/icons';
 import { i18n } from '@/i18n';
+import  colors from '@/utils/color'
 
 // utility functions that we can use as generic way for perform tranformation on annotations.
 
@@ -235,29 +236,58 @@ export function removeIcon(annotation) {
 
 export function addWitness(element, annotation) {
 
-  const witnessesList = annotation.body.value;
-  let witnessesString = ""
-  
-  witnessesList.forEach((variantItem) => {
-    witnessesString += " " + variantItem.witness;
+  const variantItemsList = annotation.body.value;
+  const parentOfElement = element.parentElement;
+  const indexOfElement = [].slice.call(parentOfElement.children).indexOf(element)
+
+  // get the number of variant items for this annotation and create a list of colors for the border color
+  const numberVariantItems = Object.keys(variantItemsList).length
+  const hexaDecimalColors = colors().slice(0, numberVariantItems)
+
+
+  //let prevElement = element;
+  let i = 0;
+  variantItemsList.forEach((variantItem) => {
+    const witHtmlElement = document.createElement("SPAN");
+    witHtmlElement.innerHTML = variantItem.witness;
+    witHtmlElement.classList.add('t-rounded-3xl', 't-box-border', 't-w-75', 't-h-8', 't-border-2', 't-p-[2px]', 't-text-sm', 't-ml-[3px]')
+    witHtmlElement.style.borderColor = hexaDecimalColors[i] //'t-border-'.concat(tailwindClassColors[i],'-600'))
+    i += 1;
+    // get the parent of the element, find its position in the parent div and then append it after it in order to show it after it - the style of the chip should be different from the element
+    //prevElement.after(witnessHtmlElement)
+    //prevElement = witnessHtmlElement
+    parentOfElement.insertBefore(witHtmlElement, parentOfElement.children[indexOfElement]);
   });
-
-  const witnessesHtmlEl = document.createElement("SPAN");
-  //witnessesHtmlEl.classList.add("t-rounded","t-box-border", "t-w-150", "t-h-8", "t-border-2", "t-p-1");
-  witnessesHtmlEl.innerHTML = witnessesString;
-  witnessesHtmlEl.classList.add('witnesses')
-
-  element.prepend(witnessesHtmlEl);
+  //element.after(witnessesHtml)
+ 
 }
 
-export function removeWitness(selector) {
+export function removeWitness(selector, removeAnnotation) {
   // selector: the selector of the annotated text
 
   const annotatedHtmlEl = document.getElementById(selector.split('#')[1])
-  const witnessHtmlEl = annotatedHtmlEl.getElementsByClassName('witnesses')[0]
-  if (witnessHtmlEl) {
-    witnessHtmlEl.remove();
-  }
+  const parentOfAnnotatedEl = annotatedHtmlEl.parentElement;
+  const variantItemsList = removeAnnotation.body.value;
+
+  const witnessesStringArray = getWitnesses(variantItemsList)
+  
+  parentOfAnnotatedEl.querySelectorAll('span').forEach( (element) => {
+    if (witnessesStringArray.includes(element.innerHTML)) {
+      element.remove()
+    }
+  })
+
+}
+
+function getWitnesses(variantItemsList) {
+  const witnessesStringArray = []
+
+  variantItemsList.forEach((variantItem) =>  {
+    const witnessString = variantItem.witness;
+    witnessesStringArray.push(witnessString)
+  });
+
+  return witnessesStringArray
 }
 
 export function getAnnotationListElement(id, container) {
diff --git a/src/utils/color.js b/src/utils/color.js
index f0e47879..6c78c012 100644
--- a/src/utils/color.js
+++ b/src/utils/color.js
@@ -7,3 +7,10 @@ export const getRGBColor = (hex, type) => {
 
   return `--color-${type}: ${r}, ${g}, ${b}; --color-${type}-accent: ${r - 15}, ${g - 15}, ${b - 15};`;
 };
+
+
+export default function colors() {
+  
+  const hexaDecimalColors = ['#FEF08A', '#BEF264', '#A8A29E', '#D8B4FE', '#A8A29E']
+  return hexaDecimalColors;
+}
\ No newline at end of file

From 59b737bd25428e3fd749a25192041571c54d04d1 Mon Sep 17 00:00:00 2001
From: malkja <orlin.malkja@sub.uni-goettingen.de>
Date: Wed, 31 Jul 2024 18:48:41 +0200
Subject: [PATCH 08/15] fix: remove an error in the 'annotations' tests

---
 src/stores/annotations.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/stores/annotations.ts b/src/stores/annotations.ts
index e5f94a53..8a9b2aa1 100644
--- a/src/stores/annotations.ts
+++ b/src/stores/annotations.ts
@@ -7,7 +7,7 @@ import * as AnnotationUtils from '@/utils/annotations';
 import { request } from '@/utils/http';
 import * as Utils from '@/utils';
 import { scrollIntoViewIfNeeded } from '@/utils';
-import { useConfigStore} from '@/stores/config';
+import { useConfigStore } from '@/stores/config';
 
 
 export const useAnnotationsStore = defineStore('annotations', () => {
@@ -134,15 +134,15 @@ export const useAnnotationsStore = defineStore('annotations', () => {
       
         const selector = AnnotationUtils.generateTargetSelector(removeAnnotation);
         if (selector) {
-          console.log('selector', selector)
           AnnotationUtils.highlightTargets(selector, { operation: 'DEC' });
           AnnotationUtils.removeIcon(removeAnnotation);
-          AnnotationUtils.removeWitness(selector, removeAnnotation)
+          if(removeAnnotation.body['x-content-type'] === 'Variant') {
+            AnnotationUtils.removeWitness(selector, removeAnnotation)
+          }
         }
       };
 
     
-    
     const resetAnnotations = () => {      
 
         if (annotations.value !== null) {

From 4e85b24b550e6b6611ccedab81ab65b7dbd24de5 Mon Sep 17 00:00:00 2001
From: malkja <orlin.malkja@sub.uni-goettingen.de>
Date: Thu, 1 Aug 2024 16:54:07 +0200
Subject: [PATCH 09/15] feat: split up the variant items

split up the variant items to make each of them clickable
---
 .../annotations/AnnotationVariantItem.vue     | 15 +++++++++--
 .../annotations/AnnotationsList.vue           | 25 +++++++++----------
 2 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/src/components/annotations/AnnotationVariantItem.vue b/src/components/annotations/AnnotationVariantItem.vue
index e727dee8..235d4a41 100644
--- a/src/components/annotations/AnnotationVariantItem.vue
+++ b/src/components/annotations/AnnotationVariantItem.vue
@@ -1,5 +1,10 @@
 <template>
-    <div v-for="(variant, i) in annotation.body.value" :key="i"  class="t-items-center t-flex t-mb-1">
+    <div v-for="(variant, i) in annotation.body.value" :key="i"  class="t-items-center t-flex t-mb-1"
+    :class="[
+              't-py-2 t-px-3 t-mb-1 t-rounded-md',
+              { 'hover:t-bg-gray-200 dark:hover:t-bg-gray-600 t-cursor-pointer': !isText(annotation) && !isActive(annotation) },
+              { 't-bg-gray-300 dark:t-bg-gray-600 active': isActive(annotation) }]"
+                @click="isText(annotation) ? ()=>{} : toggle(annotation)" :data-annotation-id="annotation.id">
           <div class="t-relative  t-rounded-3xl t-box-border t-w-75 t-h-8 t-border-2 t-p-[2px]" :style="{'border-color': getCurrentVariantItemColor(i)}" >
             <span v-if="variant.witness" v-html="variant.witness" class="t-text-sm"/>
             <span v-else class="t-text-sm"> - </span>
@@ -21,11 +26,17 @@ function getCurrentVariantItemColor(index){
 
 
 export interface Props {
-  annotation: Annotation
+  annotation: Annotation,
+  isText: (annotation: Annotation) => boolean,
+  isActive: (annotation: Annotation) => boolean,
+  toggle: (annotation: Annotation) => void,
 }
 
 const props = withDefaults(defineProps<Props>(), {
   annotation: () => <Annotation>{},
+  isText: () => true,
+  isActive: () => true,
+  toggle: () => null,
 })
 
 </script>
diff --git a/src/components/annotations/AnnotationsList.vue b/src/components/annotations/AnnotationsList.vue
index 62cdbebf..64d90cf7 100644
--- a/src/components/annotations/AnnotationsList.vue
+++ b/src/components/annotations/AnnotationsList.vue
@@ -3,26 +3,21 @@
     <div
       v-for="annotation in configuredAnnotations"
       :key="annotation.id"
-      :data-annotation-id="annotation.id"
-      class="item"
-      :class="[
-        't-py-2 t-px-3 t-mb-1 t-rounded-md',
-        { 'hover:t-bg-gray-200 dark:hover:t-bg-gray-600 t-cursor-pointer': !isText(annotation) && !isActive(annotation) },
-        { 't-bg-gray-300 dark:t-bg-gray-600 active': isActive(annotation) }
-      ]"
-      @click="isText(annotation) ? ()=>{} : toggle(annotation)"
     >
-      
-        <div v-if="!isVariant(annotation)" class="t-flex t-items-center t-space-x-2"> 
+        <div v-if="!isVariant(annotation)" class="t-flex t-items-center t-space-x-2 item" :class="[
+              't-py-2 t-px-3 t-mb-1 t-rounded-md',
+              { 'hover:t-bg-gray-200 dark:hover:t-bg-gray-600 t-cursor-pointer': !isText(annotation) && !isActive(annotation) },
+              { 't-bg-gray-300 dark:t-bg-gray-600 active': isActive(annotation) }]"
+                @click="isText(annotation) ? ()=>{} : toggle(annotation)" :data-annotation-id="annotation.id"> 
           <AnnotationIcon
-          v-if="!isText(annotation)"
-          :name="getIconName(annotation.body['x-content-type'])"
+            v-if="!isText(annotation)"
+            :name="getIconName(annotation.body['x-content-type'])"
           />
           <span  v-html="annotation.body.value"/>
         </div>
 
         <div v-else>
-          <AnnotationVariantItem :annotation="annotation" />
+          <AnnotationVariantItem :annotation="annotation" :isText="isText" :isActive="isActive" :toggle="toggle"/>
         </div>
        
         <!-- eslint-disable -- https://eslint.vuejs.org/rules/no-v-html.html -->
@@ -32,6 +27,7 @@
   </div>
 </template>
 
+
 <script setup lang="ts">
 import { computed } from 'vue';
 import AnnotationIcon from '@/components/annotations/AnnotationIcon.vue';
@@ -68,6 +64,7 @@ function isActive(annotation: Annotation): boolean {
 function isText(annotation: Annotation): boolean {
   return annotationTypesMapping.value[annotation.body['x-content-type']] === 'text';
 }
+
 function getIconName(typeName: string): string {
   return props.types.find(({ name }) => name === typeName)?.icon || 'pencil';
 }
@@ -83,7 +80,9 @@ function isVariantsTabOpened() {
 </script>
 
 
+
 <style lang="scss" scoped>
 
 
+
 </style>
\ No newline at end of file

From a5a0bd2b92c76e925c8562ca8e9cff518a29e99f Mon Sep 17 00:00:00 2001
From: malkja <orlin.malkja@sub.uni-goettingen.de>
Date: Thu, 1 Aug 2024 17:38:55 +0200
Subject: [PATCH 10/15] feat: add the button for variants detail

---
 .../ahiqar-arabic-karshuni-with-variants-local.html  | 12 ++++++------
 src/components/annotations/AnnotationVariantItem.vue | 10 +++++++++-
 src/utils/annotations.js                             |  2 --
 3 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/examples/ahiqar-arabic-karshuni-with-variants-local.html b/examples/ahiqar-arabic-karshuni-with-variants-local.html
index 2f1a7241..13abae1d 100644
--- a/examples/ahiqar-arabic-karshuni-with-variants-local.html
+++ b/examples/ahiqar-arabic-karshuni-with-variants-local.html
@@ -114,19 +114,19 @@
                 "types": [
                   {
                     "name": "Person",
-                    "icon": "biPersonFill"
+                    "icon": "person"
                   },
                   {
                     "name": "Place",
-                    "icon": "biGeoAltFill"
+                    "icon": "marker"
                   },
                   {
                     "name": "Editorial Comment",
-                    "icon": "biChatFill"
+                    "icon": "chat"
                   },
                   {
                     "name": "Reference",
-                    "icon": "biBoxArrowUpRight"
+                    "icon": "externalLink"
                   }
                 ]
               }
@@ -141,7 +141,7 @@
                 "types": [
                   {
                     "name": "Motif",
-                    "icon": "biPenFill"
+                    "icon": "pen"
                   }
                 ]
               }
@@ -156,7 +156,7 @@
                 "types": [
                   {
                     "name": "Variant",
-                    "icon": "biPenFill"
+                    "icon": "pen"
                   }
                 ]
               }
diff --git a/src/components/annotations/AnnotationVariantItem.vue b/src/components/annotations/AnnotationVariantItem.vue
index 235d4a41..df0cd2c2 100644
--- a/src/components/annotations/AnnotationVariantItem.vue
+++ b/src/components/annotations/AnnotationVariantItem.vue
@@ -9,7 +9,11 @@
             <span v-if="variant.witness" v-html="variant.witness" class="t-text-sm"/>
             <span v-else class="t-text-sm"> - </span>
           </div>
-          <span v-html="variant.entry" class="t-absolute t-right-[50%]"/>
+          <span v-html="variant.entry" class="t-absolute t-ml-[150px]"/>
+          <button class="t-bg-blue-500 t-hover:bg-blue-700 t-text-white t-text-sm t-font-bold t-py-1 t-px-2 t-rounded-full t-absolute t-ml-[250px]"
+                @click="openVariantsModel()">
+            Open detail
+          </button>
     </div>
 </template>
 
@@ -24,6 +28,10 @@ function getCurrentVariantItemColor(index){
   return colors()[index]
 }
 
+function openVariantsModel(){
+  console.log('open the variants modal')
+}
+
 
 export interface Props {
   annotation: Annotation,
diff --git a/src/utils/annotations.js b/src/utils/annotations.js
index 8c594e00..6096f8b5 100644
--- a/src/utils/annotations.js
+++ b/src/utils/annotations.js
@@ -244,7 +244,6 @@ export function addWitness(element, annotation) {
   const numberVariantItems = Object.keys(variantItemsList).length
   const hexaDecimalColors = colors().slice(0, numberVariantItems)
 
-
   //let prevElement = element;
   let i = 0;
   variantItemsList.forEach((variantItem) => {
@@ -259,7 +258,6 @@ export function addWitness(element, annotation) {
     parentOfElement.insertBefore(witHtmlElement, parentOfElement.children[indexOfElement]);
   });
   //element.after(witnessesHtml)
- 
 }
 
 export function removeWitness(selector, removeAnnotation) {

From cd03cde6688e150c729dc993a81e1cb1d4609f1d Mon Sep 17 00:00:00 2001
From: malkja <orlin.malkja@sub.uni-goettingen.de>
Date: Thu, 1 Aug 2024 19:09:14 +0200
Subject: [PATCH 11/15] feat: add witnesses on top bar

---
 .../annotations/AnnotationVariantItem.vue     | 13 +++---
 .../annotations/AnnotationsList.vue           | 11 +++++
 src/components/annotations/TopBar.vue         | 40 +++++++++++++++++++
 src/utils/color.js                            |  4 ++
 4 files changed, 60 insertions(+), 8 deletions(-)
 create mode 100644 src/components/annotations/TopBar.vue

diff --git a/src/components/annotations/AnnotationVariantItem.vue b/src/components/annotations/AnnotationVariantItem.vue
index df0cd2c2..c3b0f935 100644
--- a/src/components/annotations/AnnotationVariantItem.vue
+++ b/src/components/annotations/AnnotationVariantItem.vue
@@ -1,17 +1,17 @@
 <template>
     <div v-for="(variant, i) in annotation.body.value" :key="i"  class="t-items-center t-flex t-mb-1"
     :class="[
-              't-py-2 t-px-3 t-mb-1 t-rounded-md',
+              't-relative t-py-2 t-px-3 t-mb-1 t-rounded-md',
               { 'hover:t-bg-gray-200 dark:hover:t-bg-gray-600 t-cursor-pointer': !isText(annotation) && !isActive(annotation) },
               { 't-bg-gray-300 dark:t-bg-gray-600 active': isActive(annotation) }]"
                 @click="isText(annotation) ? ()=>{} : toggle(annotation)" :data-annotation-id="annotation.id">
-          <div class="t-relative  t-rounded-3xl t-box-border t-w-75 t-h-8 t-border-2 t-p-[2px]" :style="{'border-color': getCurrentVariantItemColor(i)}" >
+          <div class="t-relative  t-rounded-3xl t-box-border t-w-75 t-h-8 t-border-2 t-p-[2px]" :style="{'border-color': getItemColorBasedOnIndex(i)}">
             <span v-if="variant.witness" v-html="variant.witness" class="t-text-sm"/>
             <span v-else class="t-text-sm"> - </span>
           </div>
           <span v-html="variant.entry" class="t-absolute t-ml-[150px]"/>
           <button class="t-bg-blue-500 t-hover:bg-blue-700 t-text-white t-text-sm t-font-bold t-py-1 t-px-2 t-rounded-full t-absolute t-ml-[250px]"
-                @click="openVariantsModel()">
+                @click="openVariantsModal()">
             Open detail
           </button>
     </div>
@@ -22,13 +22,10 @@
 <script setup lang="ts">
 import  colors from '@/utils/color'
 import AnnotationIcon from './AnnotationIcon.vue';
+import { getItemColorBasedOnIndex } from '@/utils/color';
 
 
-function getCurrentVariantItemColor(index){
-  return colors()[index]
-}
-
-function openVariantsModel(){
+function openVariantsModal(){
   console.log('open the variants modal')
 }
 
diff --git a/src/components/annotations/AnnotationsList.vue b/src/components/annotations/AnnotationsList.vue
index 64d90cf7..93fe8f91 100644
--- a/src/components/annotations/AnnotationsList.vue
+++ b/src/components/annotations/AnnotationsList.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="annotations-list t-overflow-auto">
+    <TopBar v-if="isVariantsTabOpened()" :variant-annotations="getVariantAnnotations()" />
     <div
       v-for="annotation in configuredAnnotations"
       :key="annotation.id"
@@ -32,6 +33,7 @@
 import { computed } from 'vue';
 import AnnotationIcon from '@/components/annotations/AnnotationIcon.vue';
 import AnnotationVariantItem from '@/components/annotations/AnnotationVariantItem.vue'
+import TopBar from '@/components/annotations/TopBar.vue'
 
 interface AnnotationTypesMapping {
   [key: string]: string | 'annotation'
@@ -77,6 +79,15 @@ function isVariantsTabOpened() {
   return props.configuredAnnotations[0].body['x-content-type'] === 'Variant';
 }
 
+function getVariantAnnotations(): Annotation[]{
+  let variantAnnotations: Annotation[] = []
+  props.configuredAnnotations.forEach((annotation) => {
+    if (isVariant(annotation)) variantAnnotations.push(annotation)
+  })
+
+  return variantAnnotations
+}
+
 </script>
 
 
diff --git a/src/components/annotations/TopBar.vue b/src/components/annotations/TopBar.vue
new file mode 100644
index 00000000..3faa1822
--- /dev/null
+++ b/src/components/annotations/TopBar.vue
@@ -0,0 +1,40 @@
+<template>
+    <div class="t-items-center t-flex t-mb-[30px]">
+        <span v-for="(witness, i) in getWitnesses()" :key="i" class="t-relative  t-rounded-3xl t-box-border t-w-75 t-h-8 t-border-2 t-p-[2px] t-ml-[15px]" :style="{'border-color': getItemColorBasedOnIndex(i)}"> {{ witness }} </span>
+    </div>
+
+</template>
+
+<script setup lang="ts">
+
+import { getItemColorBasedOnIndex } from '@/utils/color'
+
+export interface Props {
+  variantAnnotations: Annotation[]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variantAnnotations: () => <Annotation[]>[],
+})
+
+
+function getWitnesses(): string[] {
+    let witnessesString: string [] = []
+    props.variantAnnotations.forEach((annotation) => {
+      annotation.body.value.forEach((variantItem) => {
+        if (!witnessesString.includes(variantItem.witness.slice(0,4))) {
+            // made the witness much shorter in order to show them all horizontally
+            witnessesString.push(variantItem.witness.slice(0,4))
+        }
+      })
+    })
+    
+    return witnessesString;
+}
+
+</script>
+
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/utils/color.js b/src/utils/color.js
index 6c78c012..6a25a7f6 100644
--- a/src/utils/color.js
+++ b/src/utils/color.js
@@ -13,4 +13,8 @@ export default function colors() {
   
   const hexaDecimalColors = ['#FEF08A', '#BEF264', '#A8A29E', '#D8B4FE', '#A8A29E']
   return hexaDecimalColors;
+}
+
+export function getItemColorBasedOnIndex(index){
+  return colors()[index]
 }
\ No newline at end of file

From d3653e139bf94c7204a75c78fbf5c3f2679fa256 Mon Sep 17 00:00:00 2001
From: malkja <orlin.malkja@sub.uni-goettingen.de>
Date: Fri, 2 Aug 2024 10:24:15 +0200
Subject: [PATCH 12/15] feat: add toggle button in top bar

---
 src/components/annotations/TopBar.vue | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/components/annotations/TopBar.vue b/src/components/annotations/TopBar.vue
index 3faa1822..d4d13bed 100644
--- a/src/components/annotations/TopBar.vue
+++ b/src/components/annotations/TopBar.vue
@@ -1,6 +1,12 @@
 <template>
     <div class="t-items-center t-flex t-mb-[30px]">
         <span v-for="(witness, i) in getWitnesses()" :key="i" class="t-relative  t-rounded-3xl t-box-border t-w-75 t-h-8 t-border-2 t-p-[2px] t-ml-[15px]" :style="{'border-color': getItemColorBasedOnIndex(i)}"> {{ witness }} </span>
+        <div class="t-ml-[70px]">
+          <button class="t-border-[2px] t-rounded-[5px] t-border-sky-400 t-w-[100px] t-bg-sky-200 t-hover:bg-sky-700 t-mr-[2px] t-text-[15px] t-font-bold t-text-sky-500" 
+              @click="handleVariantsClick()"> Variants </button>
+          <button class="t-border-[1px] t-rounded-[5px] t-border-slate-300 t-w-[100px] t-text-[15px] t-text-zinc-500" 
+               @click="handleWitnessesClick()"> Witnesses </button>
+        </div>
     </div>
 
 </template>
@@ -32,6 +38,14 @@ function getWitnesses(): string[] {
     return witnessesString;
 }
 
+function handleVariantsClick() {
+  console.log('clicked the variants button')
+}
+
+function handleWitnessesClick() {
+  console.log('clicked the witnesses button')
+}
+
 </script>
 
 

From 5bcde08ea8496537f722cec60f80012515a9b4c7 Mon Sep 17 00:00:00 2001
From: malkja <orlin.malkja@sub.uni-goettingen.de>
Date: Fri, 2 Aug 2024 12:31:23 +0200
Subject: [PATCH 13/15] feat: toggle the WitChipButton color

---
 src/components/annotations/TopBar.vue         | 15 +++++--
 .../annotations/WitnessChipInTopBar.vue       | 43 +++++++++++++++++++
 2 files changed, 55 insertions(+), 3 deletions(-)
 create mode 100644 src/components/annotations/WitnessChipInTopBar.vue

diff --git a/src/components/annotations/TopBar.vue b/src/components/annotations/TopBar.vue
index d4d13bed..e2ff9d85 100644
--- a/src/components/annotations/TopBar.vue
+++ b/src/components/annotations/TopBar.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="t-items-center t-flex t-mb-[30px]">
-        <span v-for="(witness, i) in getWitnesses()" :key="i" class="t-relative  t-rounded-3xl t-box-border t-w-75 t-h-8 t-border-2 t-p-[2px] t-ml-[15px]" :style="{'border-color': getItemColorBasedOnIndex(i)}"> {{ witness }} </span>
+        <WitnessChipInTopBar v-for="(witness, i) in getWitnesses()" :key="i" :witness="witness" :index="i"/>
         <div class="t-ml-[70px]">
           <button class="t-border-[2px] t-rounded-[5px] t-border-sky-400 t-w-[100px] t-bg-sky-200 t-hover:bg-sky-700 t-mr-[2px] t-text-[15px] t-font-bold t-text-sky-500" 
               @click="handleVariantsClick()"> Variants </button>
@@ -8,12 +8,13 @@
                @click="handleWitnessesClick()"> Witnesses </button>
         </div>
     </div>
-
 </template>
 
 <script setup lang="ts">
-
+import { ref } from 'vue';
 import { getItemColorBasedOnIndex } from '@/utils/color'
+import WitnessChipInTopBar from '@/components/annotations/WitnessChipInTopBar.vue'
+
 
 export interface Props {
   variantAnnotations: Annotation[]
@@ -23,6 +24,7 @@ const props = withDefaults(defineProps<Props>(), {
   variantAnnotations: () => <Annotation[]>[],
 })
 
+const checked = ref(false);
 
 function getWitnesses(): string[] {
     let witnessesString: string [] = []
@@ -46,6 +48,13 @@ function handleWitnessesClick() {
   console.log('clicked the witnesses button')
 }
 
+
+
+function handleSpecificWitnessclick(witness: string) {
+  // i want to differentiate whether it is about showing the variants or hiding them
+  console.log('witness', witness)
+}
+
 </script>
 
 
diff --git a/src/components/annotations/WitnessChipInTopBar.vue b/src/components/annotations/WitnessChipInTopBar.vue
new file mode 100644
index 00000000..59ba859d
--- /dev/null
+++ b/src/components/annotations/WitnessChipInTopBar.vue
@@ -0,0 +1,43 @@
+<template>
+    <button :id="'wit-chip-in-top-bar-'+index.toString()" class="t-relative t-rounded-3xl t-box-border t-bg-neutral-300 t-w-75 t-h-8 t-border-2 t-p-[2px] t-ml-[15px]" 
+           :style="{'border-color': getItemColorBasedOnIndex(index)}"  @click="handleClick()"> {{ props.witness }} </button>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { getItemColorBasedOnIndex } from '@/utils/color';
+
+export interface Props {
+  witness: string,
+  index: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  witness: () => <string>'',
+  index: () => <number>0,
+})
+
+let checked = ref(true);
+
+
+function handleClick() {
+    const witChipButtonEl = document.getElementById("wit-chip-in-top-bar-"+props.index.toString())
+    checked.value = !checked.value
+    // TODO: create another function - toggleButton color(add as argument the 'checked.value')
+    if (checked.value === false) {
+        // change the background color value in the button to white
+        witChipButtonEl.classList.replace("t-bg-neutral-300", "t-bg-white")
+    }
+    else {
+        document.getElementById("wit-chip-in-top-bar-"+props.index.toString()).classList.replace("t-bg-white", "t-bg-neutral-300");
+    }
+
+    // TODO: add a function to: show or hide the variant items which are witnessed from this manuscript
+    // TODO: add a function to: highlight/dehighlight the text passage which is witnessed from this manuscript
+}
+
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file

From 30d8c885839cb60528a5ab9644cea36987d837cf Mon Sep 17 00:00:00 2001
From: malkja <orlin.malkja@sub.uni-goettingen.de>
Date: Fri, 2 Aug 2024 15:40:09 +0200
Subject: [PATCH 14/15] feat: toggle Variant Items when clicking the witness

when clicking on a witness chip in the Top bar we show/hide the variant items which are witnessed by this witness
---
 .../annotations/AnnotationsList.vue           |  2 +-
 src/components/annotations/TopBar.vue         |  2 +-
 .../annotations/WitnessChipInTopBar.vue       | 36 ++++++++++++++++---
 3 files changed, 33 insertions(+), 7 deletions(-)

diff --git a/src/components/annotations/AnnotationsList.vue b/src/components/annotations/AnnotationsList.vue
index 93fe8f91..2783c7bc 100644
--- a/src/components/annotations/AnnotationsList.vue
+++ b/src/components/annotations/AnnotationsList.vue
@@ -17,7 +17,7 @@
           <span  v-html="annotation.body.value"/>
         </div>
 
-        <div v-else>
+        <div v-else class="variants-annotation">
           <AnnotationVariantItem :annotation="annotation" :isText="isText" :isActive="isActive" :toggle="toggle"/>
         </div>
        
diff --git a/src/components/annotations/TopBar.vue b/src/components/annotations/TopBar.vue
index e2ff9d85..f6d7d7df 100644
--- a/src/components/annotations/TopBar.vue
+++ b/src/components/annotations/TopBar.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="t-items-center t-flex t-mb-[30px]">
-        <WitnessChipInTopBar v-for="(witness, i) in getWitnesses()" :key="i" :witness="witness" :index="i"/>
+        <WitnessChipInTopBar v-for="(witness, i) in getWitnesses()" :key="i" :witness="witness" :variantAnnotations="variantAnnotations" :index="i"/>
         <div class="t-ml-[70px]">
           <button class="t-border-[2px] t-rounded-[5px] t-border-sky-400 t-w-[100px] t-bg-sky-200 t-hover:bg-sky-700 t-mr-[2px] t-text-[15px] t-font-bold t-text-sky-500" 
               @click="handleVariantsClick()"> Variants </button>
diff --git a/src/components/annotations/WitnessChipInTopBar.vue b/src/components/annotations/WitnessChipInTopBar.vue
index 59ba859d..3195b836 100644
--- a/src/components/annotations/WitnessChipInTopBar.vue
+++ b/src/components/annotations/WitnessChipInTopBar.vue
@@ -9,11 +9,13 @@ import { getItemColorBasedOnIndex } from '@/utils/color';
 
 export interface Props {
   witness: string,
+  variantAnnotations: Annotation[],
   index: number
 }
 
 const props = withDefaults(defineProps<Props>(), {
   witness: () => <string>'',
+  variantAnnotations: () => <Annotation[]>[],
   index: () => <number>0,
 })
 
@@ -23,19 +25,43 @@ let checked = ref(true);
 function handleClick() {
     const witChipButtonEl = document.getElementById("wit-chip-in-top-bar-"+props.index.toString())
     checked.value = !checked.value
-    // TODO: create another function - toggleButton color(add as argument the 'checked.value')
-    if (checked.value === false) {
+    
+    toggleButtonColor(checked.value, witChipButtonEl)
+    toggleVariantItems(checked.value)
+   //toggleHighlitedText(checked.value)
+
+    // TODO: add a function to: highlight/dehighlight the text passage which is witnessed from this manuscript
+}
+
+function toggleButtonColor(checked: boolean, witChipButtonEl) {
+    if (checked === false) {
         // change the background color value in the button to white
         witChipButtonEl.classList.replace("t-bg-neutral-300", "t-bg-white")
     }
     else {
-        document.getElementById("wit-chip-in-top-bar-"+props.index.toString()).classList.replace("t-bg-white", "t-bg-neutral-300");
+        witChipButtonEl.classList.replace("t-bg-white", "t-bg-neutral-300");
     }
+}
 
-    // TODO: add a function to: show or hide the variant items which are witnessed from this manuscript
-    // TODO: add a function to: highlight/dehighlight the text passage which is witnessed from this manuscript
+function toggleVariantItems(checked: boolean) {
+    const variantsAnnotationsinTab = document.getElementsByClassName('variants-annotation')
+    Array.from(variantsAnnotationsinTab).forEach((variantsAnnotation) => {
+        Array.from(variantsAnnotation.children).forEach((variantItem) => {
+            let spanElement = variantItem.getElementsByTagName("span")[0]
+            if(spanElement.innerHTML.includes(props.witness)) {
+                if (checked) {
+                    variantItem.classList.replace('t-hidden', 't-block')
+                }
+                else {
+                    variantItem.classList.add('t-hidden')
+                }
+            }
+       })
+   })
 }
 
+
+
 </script>
 
 <style scoped>

From ddce07b470cdc438e43bdfe769387d525212e237 Mon Sep 17 00:00:00 2001
From: malkja <orlin.malkja@sub.uni-goettingen.de>
Date: Fri, 2 Aug 2024 16:40:57 +0200
Subject: [PATCH 15/15] feat: toggle the highlighted Text

---
 .../annotations/WitnessChipInTopBar.vue       | 44 +++++++++++++++++--
 1 file changed, 40 insertions(+), 4 deletions(-)

diff --git a/src/components/annotations/WitnessChipInTopBar.vue b/src/components/annotations/WitnessChipInTopBar.vue
index 3195b836..c7bf8a6f 100644
--- a/src/components/annotations/WitnessChipInTopBar.vue
+++ b/src/components/annotations/WitnessChipInTopBar.vue
@@ -25,12 +25,9 @@ let checked = ref(true);
 function handleClick() {
     const witChipButtonEl = document.getElementById("wit-chip-in-top-bar-"+props.index.toString())
     checked.value = !checked.value
-    
     toggleButtonColor(checked.value, witChipButtonEl)
     toggleVariantItems(checked.value)
-   //toggleHighlitedText(checked.value)
-
-    // TODO: add a function to: highlight/dehighlight the text passage which is witnessed from this manuscript
+    toggleHighlightedText(checked.value)
 }
 
 function toggleButtonColor(checked: boolean, witChipButtonEl) {
@@ -61,6 +58,45 @@ function toggleVariantItems(checked: boolean) {
 }
 
 
+function toggleHighlightedText(checked: boolean) {
+
+    
+    // get the selectors on the text for which there is a variant in our witness
+    const selectorsAnnotated: string [] =  getSelectorsAnnotated()
+
+    if (selectorsAnnotated.length > 0) {
+        selectorsAnnotated.forEach((selector) => {
+            const spanElement = document.querySelector(selector)
+            if (checked === true) {
+                spanElement.classList.replace('t-hidden', 't-inline')
+             }
+            else {
+                spanElement.classList.add('t-hidden')
+            }
+            })
+        
+    } 
+}
+
+function getSelectorsAnnotated(): string[] {
+    let selectorsAnnotated: string[] = []
+    props.variantAnnotations.forEach((variantAnnotation) => {
+        if (isWitnessOnThisAnnotation(variantAnnotation) === true) {
+            selectorsAnnotated.push(variantAnnotation.target[0].selector.value)
+        }
+    })
+
+    return selectorsAnnotated
+}
+
+function isWitnessOnThisAnnotation(variantAnnotation): boolean {
+    let isWitnessOnAnnotation = false
+    variantAnnotation.body.value.forEach((variantItem) => {
+        if (variantItem.witness.includes(props.witness)) isWitnessOnAnnotation = true
+    })
+    return isWitnessOnAnnotation
+}
+
 
 </script>