chore: upgrade argilla-frontend folder with latests changes from fron…

…tend folder at develop branch

argilla-frontend/README.md

@@ -53,9 +53,7 @@ https://github.com/argilla-io/argilla/assets/1107111/49e28d64-9799-4cac-be49-19d
 
 ## 🚀 Quickstart
 
-Argilla is an open-source data curation platform for LLMs. Using Argilla, everyone can build robust language models
-through faster data curation using both human and machine feedback. We provide support for each step in the MLOps cycle,
-from data labeling to model monitoring.
+Argilla is an open-source data curation platform for LLMs. Using Argilla, everyone can build robust language models through faster data curation using both human and machine feedback. We provide support for each step in the MLOps cycle, from data labeling to model monitoring.
 
 There are different options to get started:
 
@@ -67,12 +65,6 @@ There are different options to get started:
 
 ## 🖥️ FRONTEND
 
-- Before running Argilla frontend server, you need to install Node version 18:
-
-```bash
-brew install node@18
-```
-
 <h3>💣 Install dependencies</h3>
 
 ```bash
@@ -97,33 +89,17 @@ npm run generate
 
 ## 📏 Principles
 
-- **Open**: Argilla is free, open-source, and 100% compatible with major NLP libraries (Hugging Face transformers,
-  spaCy, Stanford Stanza, Flair, etc.). In fact, you can **use and combine your preferred libraries** without
-  implementing any specific interface.
+- **Open**: Argilla is free, open-source, and 100% compatible with major NLP libraries (Hugging Face transformers, spaCy, Stanford Stanza, Flair, etc.). In fact, you can **use and combine your preferred libraries** without implementing any specific interface.
 
-- **End-to-end**: Most annotation tools treat data collection as a one-off activity at the beginning of each project. In
-  real-world projects, data collection is a key activity of the iterative process of ML model development. Once a model
-  goes into production, you want to monitor and analyze its predictions and collect more data to improve your model over
-  time. Argilla is designed to close this gap, enabling you to **iterate as much as you need**.
+- **End-to-end**: Most annotation tools treat data collection as a one-off activity at the beginning of each project. In real-world projects, data collection is a key activity of the iterative process of ML model development. Once a model goes into production, you want to monitor and analyze its predictions and collect more data to improve your model over time. Argilla is designed to close this gap, enabling you to **iterate as much as you need**.
 
-- **User and Developer Experience**: The key to sustainable NLP solutions are to make it easier for everyone to
-  contribute to projects. _Domain experts_ should feel comfortable interpreting and annotating data. _Data scientists_
-  should feel free to experiment and iterate. _Engineers_ should feel in control of data pipelines. Argilla optimizes
-  the experience for these core users to **make your teams more productive**.
+- **User and Developer Experience**: The key to sustainable NLP solutions are to make it easier for everyone to contribute to projects. _Domain experts_ should feel comfortable interpreting and annotating data. _Data scientists_ should feel free to experiment and iterate. _Engineers_ should feel in control of data pipelines. Argilla optimizes the experience for these core users to **make your teams more productive**.
 
-- **Beyond hand-labeling**: Classical hand-labeling workflows are costly and inefficient, but having humans in the loop
-  is essential. Easily combine hand-labeling with active learning, bulk-labeling, zero-shot models, and weak supervision
-  in **novel** data annotation workflows\*\*.
+- **Beyond hand-labeling**: Classical hand-labeling workflows are costly and inefficient, but having humans in the loop is essential. Easily combine hand-labeling with active learning, bulk-labeling, zero-shot models, and weak supervision in **novel** data annotation workflows\*\*.
 
 ## 🫱🏾‍🫲🏼 Contribute
 
-We love contributors and have launched
-a [collaboration with JustDiggit](https://argilla.io/blog/introducing-argilla-community-growers) to hand out our very
-own bunds and help the re-greening of sub-Saharan Africa. To help our community with the creation of contributions, we
-have created our [developer](https://docs.argilla.io/en/latest/community/developer_docs.html)
-and [contributor](https://docs.argilla.io/en/latest/community/contributing.html) docs. Additionally, you can
-always [schedule a meeting](https://calendly.com/argilla-office-hours/30min) with our Developer Advocacy team so they
-can get you up to speed.
+We love contributors and have launched a [collaboration with JustDiggit](https://argilla.io/blog/introducing-argilla-community-growers) to hand out our very own bunds and help the re-greening of sub-Saharan Africa. To help our community with the creation of contributions, we have created our [developer](https://docs.argilla.io/en/latest/community/developer_docs.html) and [contributor](https://docs.argilla.io/en/latest/community/contributing.html) docs. Additionally, you can always [schedule a meeting](https://calendly.com/argilla-office-hours/30min) with our Developer Advocacy team so they can get you up to speed.
 
 ## 🥇 Contributors
 
@@ -135,5 +111,4 @@ can get you up to speed.
 
 ## 🗺️ Roadmap
 
-We continuously work on updating [our plans and our roadmap](https://github.com/orgs/argilla-io/projects/10/views/1) and
-we love to discuss those with our community. Feel encouraged to participate.
+We continuously work on updating [our plans and our roadmap](https://github.com/orgs/argilla-io/projects/10/views/1) and we love to discuss those with our community. Feel encouraged to participate.

argilla-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>

argilla-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>

argilla-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
@@ -36,8 +36,6 @@
         @mousedown="onMouseDown"
         @mouseup="onMouseUp"
         @mousemove="onMouseMove"
-        @keydown="onKeyDown"
-        @keyup="onKeyUp"
       />
       <SpanAnnotationCursor
         v-if="hasSelectedEntity"
@@ -101,6 +99,10 @@ export default {
       type: Object,
       required: true,
     },
+    searchText: {
+      type: String,
+      default: "",
+    },
   },
   data() {
     return {
@@ -177,16 +179,24 @@ export default {
       }, 500);
     },
     onKeyDown(event) {
-      if (!this.spanQuestion.settings.allow_character_annotation) return;
-
       this.keyPressing(event, true);
     },
     onKeyUp(event) {
-      if (!this.spanQuestion.settings.allow_character_annotation) return;
-
       this.keyPressing(event, false);
     },
   },
+  mounted() {
+    if (!this.spanQuestion.settings.allow_character_annotation) return;
+
+    document.addEventListener("keydown", this.onKeyDown);
+    document.addEventListener("keyup", this.onKeyUp);
+  },
+  beforeDestroy() {
+    if (!this.spanQuestion.settings.allow_character_annotation) return;
+
+    document.removeEventListener("keydown", this.onKeyDown);
+    document.removeEventListener("keyup", this.onKeyUp);
+  },
   setup(props) {
     return useSpanAnnotationTextFieldViewModel(props);
   },
@@ -271,4 +281,7 @@ export default {
   top: 0;
   left: 0;
 }
+::highlight(search-text-highlight) {
+  color: $highlight;
+}
 </style>

argilla-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()));

argilla-frontend/components/feedback-task/container/fields/span-annotation/components/span-selection.test.ts

@@ -55,6 +55,10 @@ const DUMMY_TEXT = `What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the
       Cicero are also reproduced in their exact original form, accompanied by
       English versions from the 1914 translation by H. Rackham.`;
 
+const ISSUES = {
+  NOT_SELECTING_WHOLE_WORD: "Apple10dollars",
+};
+
 type TestSelection = {
   from: number;
   to: number;
@@ -66,7 +70,10 @@ const node = {
   textContent: DUMMY_TEXT,
 } as HTMLElement;
 
-const createTextSelection = (selection: TestSelection): TextSelection => {
+const createTextSelection = (
+  selection: TestSelection,
+  nodeSelecting: HTMLElement = node
+): TextSelection => {
   return {
     from: selection.from,
     to: selection.to,
@@ -75,15 +82,16 @@ const createTextSelection = (selection: TestSelection): TextSelection => {
       id: selection.entity,
     },
     node: {
-      element: node,
+      element: nodeSelecting,
       id: "node-id",
-      text: DUMMY_TEXT,
+      text: nodeSelecting.textContent,
     },
   };
 };
 
 const createSpan = (
-  selection: TestSelection & { level?: number }
+  selection: TestSelection & { level?: number },
+  nodeSelecting: HTMLElement = node
 ): OverlappedSpan => {
   const level = selection.level || 1;
 
@@ -95,7 +103,7 @@ const createSpan = (
       id: selection.entity,
     },
     node: {
-      element: node,
+      element: nodeSelecting,
       id: "node-id",
     },
     overlap: {
@@ -490,6 +498,39 @@ describe("Span Selection", () => {
         expect(spanSelection.spans).toEqual([]);
       });
     });
+
+    describe("Unexpected issues", () => {
+      test("should select whole word", () => {
+        const node = {
+          textContent: ISSUES.NOT_SELECTING_WHOLE_WORD,
+        } as HTMLElement;
+
+        const spanSelection = new SpanSelection();
+        const textSelection = createTextSelection(
+          {
+            from: 0,
+            to: 5,
+            text: "Apple",
+            entity: "TOKEN",
+          },
+          node
+        );
+
+        const expectedSpan = createSpan(
+          {
+            from: 0,
+            to: 14,
+            text: ISSUES.NOT_SELECTING_WHOLE_WORD,
+            entity: "TOKEN",
+          },
+          node
+        );
+
+        spanSelection.addSpan(textSelection);
+
+        expect(spanSelection.spans[0]).toEqual(expectedSpan);
+      });
+    });
   });
 
   describe("loadSpans", () => {

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

@@ -220,7 +220,7 @@ export class SpanSelection {
       if (
         this.isEmpty(nextCharacter) ||
         this.isSymbol(nextCharacter) ||
-        selection.to === selection.node.text.length - 1
+        selection.to === selection.node.text.length
       ) {
         break;
       }

argilla-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(() => {