include suggestion score in fields entities

argilla-io · Mar 12, 2024 · 8903802 · 8903802
1 parent 0b8d029
commit 8903802
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 4 deletions.
diff --git a/.../components/feedback-task/container/fields/span-annotation/components/EntityComponent.vue b/.../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,21 +163,30 @@ 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;
 
     > button {
       opacity: 1;
     }
+
+    .span-entity__text {
+      max-width: none;
+    }
   }
   &__close-button {
     opacity: 0;

diff --git a/...nts/feedback-task/container/fields/span-annotation/useSpanAnnotationTextFieldViewModel.ts b/...nts/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,