From 56853bd0fa5f5a5f35577785e0e5ab37efdf6ed8 Mon Sep 17 00:00:00 2001
From: orlinmalkja <54899269+orlinmalkja@users.noreply.github.com>
Date: Mon, 4 Nov 2024 10:55:55 +0100
Subject: [PATCH 1/4] feat: add info message in Single Select Mode (#515)

* feat: add info message in Single Select Mode

* test: refine checking that no annotations list is displayed

* test: rename the data-cy value of Message box

* test: add the function checkNoAnnotationsAvailable()

* chore: change text in i18n files

---------

Co-authored-by: orlinmalkja <orlin.malkja@sub.uni-goettingen.de>
---
 src/components/MessageBox.vue                 |  2 +-
 .../annotations/variants/VariantsList.vue     | 29 ++++++++++++++++---
 src/i18n/de/index.js                          |  3 +-
 src/i18n/en/index.js                          |  3 +-
 tests/cypress/e2e/variants.cy.js              |  7 ++---
 5 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/src/components/MessageBox.vue b/src/components/MessageBox.vue
index a691d6fc..3a332096 100644
--- a/src/components/MessageBox.vue
+++ b/src/components/MessageBox.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div data-cy="message-box">
     <div class="t-flex t-items-center t-justify-center">
       <BaseIcon
         :class="`t-text-${color}`"
diff --git a/src/components/annotations/variants/VariantsList.vue b/src/components/annotations/variants/VariantsList.vue
index 28ecb486..3878280d 100644
--- a/src/components/annotations/variants/VariantsList.vue
+++ b/src/components/annotations/variants/VariantsList.vue
@@ -18,8 +18,8 @@
   </div>
   <MessageBox
     v-else
-    :message="$t('no_annotations_in_view')"
-    :title="$t('no_annotations_available')"
+    :message="getVariantsListInfoMessage()"
+    :title="getVariantsListInfoTitle()"
     type="info"
   />
 </template>
@@ -28,13 +28,16 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import VariantItem from "@/components/annotations/variants/VariantItem.vue";
-import {useAnnotationsStore} from "@/stores/annotations";
+import { useAnnotationsStore } from "@/stores/annotations";
 import MessageBox from "@/components/MessageBox.vue";
 import * as Utils from '@/utils/annotations'
+import i18n from '@/i18n'
+import { useConfigStore } from '@/stores/config';
 
 const annotationStore = useAnnotationsStore();
+const configStore = useConfigStore()
 
-
+const lang = computed<string>(() => configStore.config.lang)
 const activeAnnotations = computed<ActiveAnnotation>(() => annotationStore.activeAnnotations);
 const visibleAnnotations = computed<Annotation[]>(() => annotationStore.visibleAnnotations);
 
@@ -63,6 +66,24 @@ function getWitnessColor(witness: string) {
   return annotationStore.variantItemsColors[witness];
 }
 
+function getVariantsListInfoMessage(): string {
+  if (annotationStore.filteredAnnotations.length === 0) {
+    return i18n[lang.value]['no_annotations_in_view']
+  }
+  if (annotationStore.isSingleSelectMode) {
+    return i18n[lang.value]['single_select_mode_info_message']
+  }
+}
+
+function getVariantsListInfoTitle(): string {
+  if (annotationStore.filteredAnnotations.length === 0) {
+    return i18n[lang.value]['no_annotations_available']
+  }
+  if (annotationStore.isSingleSelectMode) {
+    return i18n[lang.value]['single_select_mode']
+  }
+}
+
 
 function showLineSeparator(visibleAnnotations, i) {
   if (visibleAnnotations[i+1]) {
diff --git a/src/i18n/de/index.js b/src/i18n/de/index.js
index 8ed784dd..e622bd2b 100644
--- a/src/i18n/de/index.js
+++ b/src/i18n/de/index.js
@@ -117,5 +117,6 @@ export default {
   witnesses_details: 'Infos zu Textzeugen',
   variants_details: 'Infos zu Varianten',
   witnesses_selected: 'Textzeugen ausgewählt',
-  single_select_mode: 'Single Select Mode'
+  single_select_mode: 'Single Select Mode',
+  single_select_mode_info_message: 'Bitte wählen Sie Varianten aus dem Text.'
 };
diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index 5746e0af..f26b0049 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -123,5 +123,6 @@ export default {
   witnesses_details: 'Witnesses Details',
   variants_details: 'Variants Details',
   witnesses_selected: 'Witnesses selected',
-  single_select_mode: 'Single Select Mode'
+  single_select_mode: 'Single Select Mode',
+  single_select_mode_info_message: 'Please select variant items from the text.'
 };
diff --git a/tests/cypress/e2e/variants.cy.js b/tests/cypress/e2e/variants.cy.js
index 715e3c26..abe2f645 100644
--- a/tests/cypress/e2e/variants.cy.js
+++ b/tests/cypress/e2e/variants.cy.js
@@ -57,10 +57,7 @@ const selectors = {
     cy
       .get('.panels-wrapper .panel:nth-child(4) .panel-body')
       .find('div[id="pv_id_6_2_content"]')
-      .children().eq(0)
-      .children().eq(1)   // annotation content
-      .children().eq(0).should('not.have.class', 'annotations-list')
-      .find('span').contains('No Annotations available')
+      .find('div[data-cy="message-box"]')
   })
 
   describe('VariantsAnnotation', () => {
@@ -562,4 +559,4 @@ const selectors = {
             })
           })
       })
-  });
+  });
\ No newline at end of file

From 26f9ec2d0961ff267cd3eea37906ac6201065423 Mon Sep 17 00:00:00 2001
From: orlinmalkja <orlin.malkja@sub.uni-goettingen.de>
Date: Tue, 5 Nov 2024 13:14:39 +0100
Subject: [PATCH 2/4] fix: make the witnesses wrapper with flex-wrap css prop

---
 src/utils/annotations.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/utils/annotations.js b/src/utils/annotations.js
index 367e750c..c4cc4cad 100644
--- a/src/utils/annotations.js
+++ b/src/utils/annotations.js
@@ -272,7 +272,7 @@ export function addWitness(target, witness, color) {
 
 function createWitnessesWrapper() {
   const el = document.createElement("span");
-  el.classList.add('witnesses')
+  el.classList.add('witnesses', 't-flex', 't-flex-wrap')
 
   return el
 }
@@ -281,7 +281,7 @@ function createWitnessEl(witness, witnessColor) {
   // create an html element of one witness
   const el = document.createElement("span");
   el.innerHTML = witness
-  el.classList.add('t-rounded-3xl', 't-box-border', 't-h-8', 't-py-0.5', 't-px-1.5', 't-text-xs', 't-font-semibold', 't-font-sans', 't-ml-[3px]')
+  el.classList.add('t-rounded-3xl', 't-box-border', 't-py-0.5', 't-px-1.5', 't-text-xs', 't-font-semibold', 't-font-sans', 't-ml-[3px]')
   el.style.background = colors[witnessColor]['100']
   el.style.color = colors[witnessColor]['600']
 

From 272bfa73be678e804188cdc1867b17ec2268f1a3 Mon Sep 17 00:00:00 2001
From: orlinmalkja <orlin.malkja@sub.uni-goettingen.de>
Date: Tue, 5 Nov 2024 14:56:45 +0100
Subject: [PATCH 3/4] fix: use inline-flex for witnesses wrapper to be in text
 flow

---
 src/utils/annotations.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/utils/annotations.js b/src/utils/annotations.js
index c4cc4cad..26da491c 100644
--- a/src/utils/annotations.js
+++ b/src/utils/annotations.js
@@ -272,7 +272,7 @@ export function addWitness(target, witness, color) {
 
 function createWitnessesWrapper() {
   const el = document.createElement("span");
-  el.classList.add('witnesses', 't-flex', 't-flex-wrap')
+  el.classList.add('witnesses', 't-inline-flex', 't-flex-wrap')
 
   return el
 }

From 936c1e8fe3805cbbda4b332937d0749e2147d18f Mon Sep 17 00:00:00 2001
From: orlinmalkja <orlin.malkja@sub.uni-goettingen.de>
Date: Tue, 5 Nov 2024 16:01:04 +0100
Subject: [PATCH 4/4] fix: change the logic of showing the message box in
 annotations list

---
 .../annotations/variants/VariantsList.vue        | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/components/annotations/variants/VariantsList.vue b/src/components/annotations/variants/VariantsList.vue
index 3878280d..d910b26a 100644
--- a/src/components/annotations/variants/VariantsList.vue
+++ b/src/components/annotations/variants/VariantsList.vue
@@ -67,23 +67,21 @@ function getWitnessColor(witness: string) {
 }
 
 function getVariantsListInfoMessage(): string {
-  if (annotationStore.filteredAnnotations.length === 0) {
-    return i18n[lang.value]['no_annotations_in_view']
-  }
-  if (annotationStore.isSingleSelectMode) {
+  if (annotationStore.isSingleSelectMode 
+        && annotationStore.filteredAnnotations.length > 0) {
     return i18n[lang.value]['single_select_mode_info_message']
   }
+  return i18n[lang.value]['no_annotations_in_view']
 }
 
 function getVariantsListInfoTitle(): string {
-  if (annotationStore.filteredAnnotations.length === 0) {
-    return i18n[lang.value]['no_annotations_available']
-  }
-  if (annotationStore.isSingleSelectMode) {
+  if (annotationStore.isSingleSelectMode 
+        && annotationStore.filteredAnnotations.length > 0) {
     return i18n[lang.value]['single_select_mode']
   }
+  return i18n[lang.value]['no_annotations_available']
 }
-
+ 
 
 function showLineSeparator(visibleAnnotations, i) {
   if (visibleAnnotations[i+1]) {