From 8903802498ce9c19eee81b69c21f8274361da8c4 Mon Sep 17 00:00:00 2001
From: leire <leire@recogn.ai>
Date: Tue, 12 Mar 2024 11:55:59 +0100
Subject: [PATCH] include suggestion score  in fields entities

---
 .../components/EntityComponent.vue            | 28 +++++++++++++++++--
 .../useSpanAnnotationTextFieldViewModel.ts    |  2 +-
 2 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/frontend/components/feedback-task/container/fields/span-annotation/components/EntityComponent.vue b/frontend/components/feedback-task/container/fields/span-annotation/components/EntityComponent.vue
index cfdd2bc9f2..91a6376fd9 100644
--- a/frontend/components/feedback-task/container/fields/span-annotation/components/EntityComponent.vue
+++ b/frontend/components/feedback-task/container/fields/span-annotation/components/EntityComponent.vue
@@ -10,7 +10,16 @@
       :class="!singleOption ? 'span-entity--clickable' : 'span-entity'"
       v-if="!visibleDropdown"
     >
-      <span class="span-entity__text">{{ selectedOption.text }}</span>
+      <span class="span-entity__text">
+        <svgicon
+          class="span-entity__suggestion"
+          name="suggestion"
+          width="12"
+          height="12"
+          v-if="suggestion.score"
+        />{{ selectedOption.text }}
+        <template v-if="suggestion.score">{{ suggestionScore }}</template></span
+      >
       <BaseButton
         class="span-entity__close-button"
         @click="removeSelectedOption"
@@ -39,6 +48,7 @@
 
 <script>
 import "assets/icons/close";
+import "assets/icons/suggestion";
 
 export default {
   name: "EntityComponent",
@@ -78,6 +88,9 @@ export default {
     singleOption() {
       return this.options.length === 1;
     },
+    suggestionScore() {
+      return this.suggestion.score.toFixed(2);
+    },
   },
   methods: {
     selectOption(option) {
@@ -150,14 +163,19 @@ export default {
     line-height: 1.2;
     @include font-size(11px);
   }
+  &__suggestion {
+    margin-top: 1px;
+    min-width: 8px;
+  }
   &__text {
+    display: flex;
+    gap: 4px;
     min-width: 10px;
     max-width: v-bind("entityPosition.width");
-    @include truncate;
+    @include truncate(auto);
   }
   &:hover {
     position: relative;
-    max-width: none;
     z-index: 1;
     background: v-bind("selectedOption.color");
     transition: background 0.3s;
@@ -165,6 +183,10 @@ export default {
     > button {
       opacity: 1;
     }
+
+    .span-entity__text {
+      max-width: none;
+    }
   }
   &__close-button {
     opacity: 0;
diff --git a/frontend/components/feedback-task/container/fields/span-annotation/useSpanAnnotationTextFieldViewModel.ts b/frontend/components/feedback-task/container/fields/span-annotation/useSpanAnnotationTextFieldViewModel.ts
index 4ffb2aded7..7e63f4b681 100644
--- a/frontend/components/feedback-task/container/fields/span-annotation/useSpanAnnotationTextFieldViewModel.ts
+++ b/frontend/components/feedback-task/container/fields/span-annotation/useSpanAnnotationTextFieldViewModel.ts
@@ -33,7 +33,7 @@ export const useSpanAnnotationTextFieldViewModel = ({
   ) => {
     const EntityComponentReference = Vue.extend(EntityComponent);
     const entity = answer.options.find((e) => e.id === span.entity.id);
-    const suggestion = spanQuestion.suggestion.getSuggestion({
+    const suggestion = spanQuestion.suggestion?.getSuggestion({
       start: span.from,
       end: span.to,
       label: entity?.value,