🔥 Fix highlight on bulk (#5698)

Author: damianpumar

argilla-frontend/components/features/annotation/container/fields/RecordFields.vue

@@ -17,7 +17,7 @@
     >
       <SpanAnnotationTextField
         v-if="hasSpanQuestion(name)"
-        :id="`${id}-${record.id}-span-field`"
+        :id="`${id}-${record.id}`"
         :name="name"
         :title="title"
         :fieldText="content"
@@ -26,7 +26,7 @@
       />
       <TextField
         v-else-if="isTextType"
-        :name="name"
+        :id="`${id}-${record.id}`"
         :title="title"
         :fieldText="content"
         :useMarkdown="settings.use_markdown"
@@ -35,7 +35,7 @@
       />
       <ChatField
         v-else-if="isChatType"
-        :name="name"
+        :id="`${id}-${record.id}`"
         :title="title"
         :useMarkdown="settings.use_markdown"
         :content="content"

argilla-frontend/components/features/annotation/container/fields/chat-field/ChatField.vue

@@ -2,7 +2,7 @@
   <div class="chat" :key="title">
     <span class="chat__title" v-text="title" />
     <div
-      :id="`fields-content-${name}`"
+      :id="`fields-content-${id}`"
       class="chat__wrapper"
       :class="checkIfAreLessThanTwoRoles ? '--simple' : '--multiple'"
     >
@@ -32,8 +32,8 @@
           >
             <MarkdownRenderer v-if="useMarkdown" :markdown="text" />
             <span v-else v-html="text" /><template>
-              <style :key="name" scoped>
-                ::highlight(search-text-highlight-{{name}}) {
+              <style :key="id" scoped>
+                ::highlight(search-text-highlight-{{id}}) {
                   color: #ff675f;
                 }
               </style>
@@ -47,9 +47,10 @@
 
 <script>
 import { useChatFieldViewModel } from "./useChatFieldViewModel";
+
 export default {
   props: {
-    name: {
+    id: {
       type: String,
       required: true,
     },

argilla-frontend/components/features/annotation/container/fields/chat-field/useChatFieldViewModel.ts

@@ -2,10 +2,10 @@ import { onMounted, watch } from "vue-demi";
 import { useSearchTextHighlight } from "../useSearchTextHighlight";
 
 export const useChatFieldViewModel = (props: {
-  name: string;
+  id: string;
   searchText: string;
 }) => {
-  const { highlightText } = useSearchTextHighlight(props.name);
+  const { highlightText } = useSearchTextHighlight(props.id);
 
   watch(
     () => props.searchText,

argilla-frontend/components/features/annotation/container/fields/span-annotation/SpanAnnotationTextField.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="text_field_component"
-    :key="name"
+    :key="id"
     @mouseenter.stop="mouseEnter = true"
     @mouseleave.stop="mouseEnter = false"
     aria-label="Data Record Field"
@@ -35,7 +35,7 @@
       </BaseActionTooltip>
     </div>
     <div
-      :id="`fields-content-${name}`"
+      :id="`fields-content-${id}`"
       class="text_field_component__area --body1"
       :aria-label="'Data entry for Field: ' + title"
     >
@@ -97,7 +97,7 @@
             [data-theme="dark"] .span-annotation__field--overlapped::highlight(hl-{{id}}-hover) {
               background: {{color.palette.veryDark}};
             }
-            ::highlight(search-text-highlight-{{name}}) {
+            ::highlight(search-text-highlight-{{id}}) {
               color: #ff675f;
             }
           </style>
@@ -110,16 +110,11 @@
 <script>
 import { useSpanAnnotationTextFieldViewModel } from "./useSpanAnnotationTextFieldViewModel";
 export default {
-  name: "SpanAnnotationTextField",
   props: {
     id: {
       type: String,
       required: true,
     },
-    name: {
-      type: String,
-      required: true,
-    },
     title: {
       type: String,
       required: true,

argilla-frontend/components/features/annotation/container/fields/span-annotation/useSpanAnnotationTextFieldViewModel.ts

@@ -9,13 +9,12 @@ import { SpanQuestionAnswer } from "~/v1/domain/entities/question/QuestionAnswer
 import { SpanAnswer } from "~/v1/domain/entities/IAnswer";
 
 export const useSpanAnnotationTextFieldViewModel = (props: {
-  name: string;
   spanQuestion: Question;
   id: string;
   searchText: string;
 }) => {
-  const { name, spanQuestion, id } = props;
-  const searchTextHighlight = useSearchTextHighlight(name);
+  const { spanQuestion, id } = props;
+  const searchTextHighlight = useSearchTextHighlight(id);
   const spanAnnotationSupported = ref(true);
   const answer = spanQuestion.answer as SpanQuestionAnswer;
   const initialConfiguration = {

argilla-frontend/components/features/annotation/container/fields/text-field/TextField.vue

@@ -16,13 +16,13 @@
         </BaseButton>
       </BaseActionTooltip>
     </div>
-    <div :id="`fields-content-${name}`" class="content-area --body1">
+    <div :id="`fields-content-${id}`" class="content-area --body1">
       <MarkdownRenderer v-if="useMarkdown" :markdown="fieldText" />
       <Sandbox v-else-if="isHTML" :content="fieldText" />
       <div v-else :class="classes" v-html="fieldText" />
       <template>
-        <style :key="name" scoped>
-          ::highlight(search-text-highlight-{{name}}) {
+        <style :key="id" scoped>
+          ::highlight(search-text-highlight-{{id}}) {
             color: #ff675f;
           }
         </style>
@@ -36,7 +36,7 @@ import { useTextFieldViewModel } from "./useTextFieldViewModel";
 
 export default {
   props: {
-    name: {
+    id: {
       type: String,
       required: true,
     },

argilla-frontend/components/features/annotation/container/fields/text-field/useTextFieldViewModel.ts

@@ -2,10 +2,10 @@ import { onMounted, watch } from "vue-demi";
 import { useSearchTextHighlight } from "../useSearchTextHighlight";
 
 export const useTextFieldViewModel = (props: {
-  name: string;
+  id: string;
   searchText: string;
 }) => {
-  const { highlightText } = useSearchTextHighlight(props.name);
+  const { highlightText } = useSearchTextHighlight(props.id);
 
   watch(
     () => props.searchText,