✨ Add text search fod fields

frontend/components/feedback-task/container/fields/Record.vue

@@ -13,7 +13,11 @@
         @on-select-record="onSelectedRecord"
       />
       <div class="record__content">
-        <RecordFields :record="record" :fields="record.fields" />
+        <RecordFields
+          :record="record"
+          :fields="record.fields"
+          :recordCriteria="recordCriteria"
+        />
       </div>
     </div>
   </div>

frontend/components/feedback-task/container/fields/RecordFields.vue

@@ -8,13 +8,14 @@
         :title="title"
         :fieldText="content"
         :spanQuestion="getSpanQuestion(name)"
+        :searchText="recordCriteria.committed.searchText"
       />
       <TextFieldComponent
         v-else
         :title="title"
         :fieldText="content"
         :useMarkdown="settings.use_markdown"
-        :stringToHighlight="searchValue"
+        :searchText="recordCriteria.committed.searchText"
       />
     </div>
   </div>
@@ -29,6 +30,10 @@ export default {
       type: Array,
       required: true,
     },
+    recordCriteria: {
+      type: Object,
+      required: true,
+    },
   },
   methods: {
     getSpanQuestion(fieldName) {
@@ -42,9 +47,6 @@ export default {
     spanQuestions() {
       return this.record?.questions.filter((q) => q.isSpanType);
     },
-    searchValue() {
-      return this.$route.query?._search ?? "";
-    },
   },
 };
 </script>

frontend/components/feedback-task/container/fields/span-annotation/SpanAnnotationTextField.component.vue

@@ -21,7 +21,7 @@
         </BaseButton>
       </BaseActionTooltip>
     </div>
-    <div class="text_field_component__area --body1">
+    <div id="fields-content" class="text_field_component__area --body1">
       <p
         :class="[
           allowOverlapping
@@ -101,6 +101,10 @@ export default {
       type: Object,
       required: true,
     },
+    searchText: {
+      type: String,
+      default: "",
+    },
   },
   data() {
     return {
@@ -271,4 +275,7 @@ export default {
   top: 0;
   left: 0;
 }
+::highlight(search-text-highlight) {
+  color: $highlight;
+}
 </style>

frontend/components/feedback-task/container/fields/span-annotation/components/highlighting.ts

@@ -26,7 +26,7 @@ declare namespace CSS {
   const highlights: {
     set(className: string, highlight: Highlight): void;
     delete(className: string): void;
-    clear(): void;
+    entries(): [string, Highlight][];
   };
 }
 
@@ -310,7 +310,10 @@ export class Highlighting {
       highlights[className].push(range);
     }
 
-    CSS.highlights.clear();
+    const entityCssKey = this.styles.entityCssKey;
+    CSS.highlights.entries().forEach(([key]) => {
+      if (key.startsWith(entityCssKey)) CSS.highlights.delete(key);
+    });
 
     for (const [entity, selections] of Object.entries(highlights)) {
       CSS.highlights.set(entity, new Highlight(...selections.flat()));

frontend/components/feedback-task/container/fields/span-annotation/useSpanAnnotationTextFieldViewModel.ts

@@ -1,5 +1,6 @@
 import Vue from "vue";
 import { onMounted, onUnmounted, ref, watch } from "vue-demi";
+import { useSearchTextHighlight } from "../useSearchTextHighlight";
 import { Highlighting, LoadedSpan, Position } from "./components/highlighting";
 import EntityComponent from "./components/EntityComponent.vue";
 import { Entity, Span } from "./components/span-selection";
@@ -10,10 +11,13 @@ import { SpanAnswer } from "~/v1/domain/entities/IAnswer";
 export const useSpanAnnotationTextFieldViewModel = ({
   spanQuestion,
   id,
+  searchText,
 }: {
   spanQuestion: Question;
   id: string;
+  searchText: string;
 }) => {
+  const searchTextHighlight = useSearchTextHighlight();
   const spanAnnotationSupported = ref(true);
   const answer = spanQuestion.answer as SpanQuestionAnswer;
   const initialConfiguration = {
@@ -136,6 +140,14 @@ export const useSpanAnnotationTextFieldViewModel = ({
     }
   );
 
+  watch(
+    () => searchText,
+    (newValue) => {
+      const fieldContent = document.getElementById("fields-content");
+      searchTextHighlight.highlightText(fieldContent, newValue);
+    }
+  );
+
   onMounted(() => {
     const spans = convertResponseToSpans(spanQuestion.answer.valuesAnswered);
 
@@ -144,6 +156,9 @@ export const useSpanAnnotationTextFieldViewModel = ({
     } catch {
       spanAnnotationSupported.value = false;
     }
+
+    const fieldContent = document.getElementById("fields-content");
+    searchTextHighlight.highlightText(fieldContent, searchText);
   });
 
   onUnmounted(() => {

frontend/components/feedback-task/container/fields/text-field/TextField.component.vue

@@ -16,23 +16,24 @@
         </BaseButton>
       </BaseActionTooltip>
     </div>
-    <div class="content-area --body1">
-      <div :class="classes" v-if="!useMarkdown" v-html="text" />
-      <RenderMarkdownBaseComponent v-else :markdown="text" />
+    <div id="fields-content" class="content-area --body1">
+      <div :class="classes" v-if="!useMarkdown" v-html="fieldText" />
+      <RenderMarkdownBaseComponent v-else :markdown="fieldText" />
     </div>
   </div>
 </template>
 
 <script>
 import { useTextFieldViewModel } from "./useTextFieldViewModel";
+
 export default {
   name: "TextFieldComponent",
   props: {
     title: {
       type: String,
       required: true,
     },
-    stringToHighlight: {
+    searchText: {
       type: String,
       default: "",
     },
@@ -47,7 +48,7 @@ export default {
   },
   computed: {
     classes() {
-      return this.$language.isRTL(this.text) ? "--rtl" : "--ltr";
+      return this.$language.isRTL(this.fieldText) ? "--rtl" : "--ltr";
     },
   },
   setup(props) {
@@ -103,4 +104,8 @@ export default {
 .fade-leave-to {
   opacity: 0;
 }
+
+::highlight(search-text-highlight) {
+  color: $highlight;
+}
 </style>