From 49bfa4bf749893e7203a5284941aad9d7d628d8c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dami=C3=A1n=20Pumar?= <damianpumar@gmail.com>
Date: Tue, 18 Jun 2024 10:57:52 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=AF=20feat/enable=20bulk=20span=20(#49?=
 =?UTF-8?q?86)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../annotation/container/fields/Record.vue    | 29 +++++++++---
 .../SpanAnnotationTextField.vue               |  2 +-
 .../components/highlighting.ts                | 18 +++-----
 .../components/span-selection.test.ts         | 32 ++++++++++++++
 .../components/span-selection.ts              | 30 +++++++++----
 .../useSpanAnnotationTextFieldViewModel.ts    |  8 ++--
 .../container/mode/BulkAnnotation.vue         | 30 ++++++++++++-
 .../questions/form/Questions.component.vue    |  1 -
 .../questions/form/span/SpanComponent.vue     |  4 +-
 argilla-frontend/translation/de.js            |  1 -
 argilla-frontend/translation/en.js            |  1 -
 .../domain/entities/question/Question.test.ts | 17 +++++++
 .../v1/domain/entities/question/Question.ts   | 44 ++++++++++++-------
 .../entities/question/QuestionAnswer.ts       | 14 +++++-
 .../v1/domain/entities/record/Record.ts       | 16 ++++---
 .../get-records-by-criteria-use-case.ts       | 35 ++++++++-------
 16 files changed, 205 insertions(+), 77 deletions(-)

diff --git a/argilla-frontend/components/features/annotation/container/fields/Record.vue b/argilla-frontend/components/features/annotation/container/fields/Record.vue
index 652230fa4e..ec445bb619 100644
--- a/argilla-frontend/components/features/annotation/container/fields/Record.vue
+++ b/argilla-frontend/components/features/annotation/container/fields/Record.vue
@@ -40,16 +40,35 @@ export default {
       type: Array,
     },
   },
-  computed: {
-    searchValue() {
-      return this.$route.query?._search ?? "";
-    },
-  },
   methods: {
     onSelectedRecord(isSelected) {
       this.$emit("on-select-record", isSelected, this.record);
     },
   },
+  computed: {
+    spanQuestionsAnswers() {
+      return this.record.questions
+        .filter((q) => q.isSpanType)
+        .map((q) => ({
+          id: q.id,
+          answer: q.answer.values,
+        }));
+    },
+  },
+  watch: {
+    spanQuestionsAnswers: {
+      deep: true,
+      handler() {
+        if (
+          this.record.questions
+            .filter((q) => q.isSpanType)
+            .some((q) => q.isModified)
+        ) {
+          this.onSelectedRecord(true);
+        }
+      },
+    },
+  },
 };
 </script>
 <style lang="scss" scoped>
diff --git a/argilla-frontend/components/features/annotation/container/fields/span-annotation/SpanAnnotationTextField.vue b/argilla-frontend/components/features/annotation/container/fields/span-annotation/SpanAnnotationTextField.vue
index 98ac0927ce..c70ab99893 100644
--- a/argilla-frontend/components/features/annotation/container/fields/span-annotation/SpanAnnotationTextField.vue
+++ b/argilla-frontend/components/features/annotation/container/fields/span-annotation/SpanAnnotationTextField.vue
@@ -9,7 +9,7 @@
       <span class="text_field_component__title-content" v-text="title" />
       <BaseActionTooltip
         class="text_field_component__tooltip"
-        tooltip="Copied"
+        tooltip="$t('copied')"
         tooltip-position="left"
       >
         <BaseButton
diff --git a/argilla-frontend/components/features/annotation/container/fields/span-annotation/components/highlighting.ts b/argilla-frontend/components/features/annotation/container/fields/span-annotation/components/highlighting.ts
index e96ed2c7f5..fe72233094 100644
--- a/argilla-frontend/components/features/annotation/container/fields/span-annotation/components/highlighting.ts
+++ b/argilla-frontend/components/features/annotation/container/fields/span-annotation/components/highlighting.ts
@@ -91,6 +91,10 @@ export class Highlighting {
     return [...this.spanSelection.spans];
   }
 
+  get nodeSpans() {
+    return this.spans.filter((s) => s.node.id === this.nodeId);
+  }
+
   private get entitySpanContainer() {
     const { spanContainerId } = this.styles;
 
@@ -165,7 +169,7 @@ export class Highlighting {
   }
 
   private updateLineHeight() {
-    const maxOverlappedLevels = this.spans.reduce(
+    const maxOverlappedLevels = this.nodeSpans.reduce(
       (max, span) => Math.max(max, span.overlap.level),
       0
     );
@@ -335,11 +339,7 @@ export class Highlighting {
 
     this.updateLineHeight();
 
-    for (const span of this.spans) {
-      const { node } = span;
-
-      if (node.id !== this.nodeId) continue;
-
+    for (const span of this.nodeSpans) {
       const entityPosition = this.createPosition(span);
 
       const entityElement = this.EntityComponentConstructor(
@@ -414,11 +414,7 @@ export class Highlighting {
   private removeSpan(span: Span) {
     this.spanSelection.removeSpan(span);
 
-    const spans = this.spans;
-
-    this.removeAllHighlights();
-
-    this.loadHighlights(spans);
+    this.applyStyles();
   }
 
   public createRange({ from, to, node }: Span) {
diff --git a/argilla-frontend/components/features/annotation/container/fields/span-annotation/components/span-selection.test.ts b/argilla-frontend/components/features/annotation/container/fields/span-annotation/components/span-selection.test.ts
index 48aa08495b..c7df0bf405 100644
--- a/argilla-frontend/components/features/annotation/container/fields/span-annotation/components/span-selection.test.ts
+++ b/argilla-frontend/components/features/annotation/container/fields/span-annotation/components/span-selection.test.ts
@@ -415,6 +415,38 @@ describe("Span Selection", () => {
 
         expect(spanSelection.spans).toHaveLength(0);
       });
+
+      test("should remove span and re calculate the overlapping", () => {
+        const spanSelection = new SpanSelection();
+        spanSelection.config.allowOverlap = true;
+
+        const textSelection1 = createTextSelection({
+          from: 10,
+          to: 17,
+          text: "rem Ips",
+          entity: "TOKEN",
+        });
+
+        const textSelection2 = createTextSelection({
+          from: 8,
+          to: 19,
+          text: "Lorem Ipsum",
+          entity: "TOKEN-2",
+        });
+
+        spanSelection.addSpan(textSelection1);
+        spanSelection.addSpan(textSelection2);
+
+        expect(spanSelection.spans[0].overlap.level).toBe(1);
+        expect(spanSelection.spans[1].overlap.level).toBe(2);
+
+        spanSelection.removeSpan(spanSelection.spans[0]);
+
+        expect(spanSelection.spans).toHaveLength(1);
+        expect(spanSelection.spans[0].from).toBe(textSelection2.from);
+        expect(spanSelection.spans[0].to).toBe(textSelection2.to);
+        expect(spanSelection.spans[0].overlap.level).toBe(1);
+      });
     });
 
     describe("should replace the entity for the span", () => {
diff --git a/argilla-frontend/components/features/annotation/container/fields/span-annotation/components/span-selection.ts b/argilla-frontend/components/features/annotation/container/fields/span-annotation/components/span-selection.ts
index d5cf1e127d..f0e3843145 100644
--- a/argilla-frontend/components/features/annotation/container/fields/span-annotation/components/span-selection.ts
+++ b/argilla-frontend/components/features/annotation/container/fields/span-annotation/components/span-selection.ts
@@ -123,14 +123,16 @@ export class SpanSelection {
 
     this.completeOutOfBoundaries(selected);
 
-    const overlaps = this.selections.filter((s) => {
-      return (
-        (selected.from <= s.from && selected.to >= s.to) ||
-        (selected.from >= s.from && selected.to <= s.to) ||
-        (selected.from < s.from && selected.to > s.from) ||
-        (selected.from < s.to && selected.to > s.to)
-      );
-    });
+    const overlaps = this.selections
+      .filter((s) => s.node.id === selected.node.id)
+      .filter((s) => {
+        return (
+          (selected.from <= s.from && selected.to >= s.to) ||
+          (selected.from >= s.from && selected.to <= s.to) ||
+          (selected.from < s.from && selected.to > s.from) ||
+          (selected.from < s.to && selected.to > s.to)
+        );
+      });
 
     const maxLevelInOverlaps =
       overlaps.reduce((acc, curr) => Math.max(acc, curr.overlap.level), 0) + 1;
@@ -165,6 +167,18 @@ export class SpanSelection {
   }
 
   removeSpan(span: Span) {
+    this.remove(span);
+
+    const nodeSpans = this.spans.filter((s) => s.node.id === span.node.id);
+
+    nodeSpans.forEach((span) => {
+      this.remove(span);
+    });
+
+    this.loadSpans(nodeSpans);
+  }
+
+  private remove(span: Span) {
     this.selections = this.selections.filter(
       (s) => this.createId(s) !== this.createId(span)
     );
diff --git a/argilla-frontend/components/features/annotation/container/fields/span-annotation/useSpanAnnotationTextFieldViewModel.ts b/argilla-frontend/components/features/annotation/container/fields/span-annotation/useSpanAnnotationTextFieldViewModel.ts
index 0f63d89838..9d3ff107b4 100644
--- a/argilla-frontend/components/features/annotation/container/fields/span-annotation/useSpanAnnotationTextFieldViewModel.ts
+++ b/argilla-frontend/components/features/annotation/container/fields/span-annotation/useSpanAnnotationTextFieldViewModel.ts
@@ -134,11 +134,11 @@ export const useSpanAnnotationTextFieldViewModel = ({
   watch(
     () => highlighting.value.spans,
     (spans) => {
-      const response = convertSpansToResponse(spans);
+      const nodeSpans = spans.filter((s) => s.node.id === id);
 
-      spanQuestion.response({
-        value: response,
-      });
+      const response = convertSpansToResponse(nodeSpans);
+
+      spanQuestion.answer.response({ value: response });
     }
   );
 
diff --git a/argilla-frontend/components/features/annotation/container/mode/BulkAnnotation.vue b/argilla-frontend/components/features/annotation/container/mode/BulkAnnotation.vue
index 2e1cc86f56..c8a5ed17b9 100644
--- a/argilla-frontend/components/features/annotation/container/mode/BulkAnnotation.vue
+++ b/argilla-frontend/components/features/annotation/container/mode/BulkAnnotation.vue
@@ -270,11 +270,19 @@ export default {
     shouldShowModalToConfirm() {
       return this.affectAllRecords && this.numberOfSelectedRecords > 100;
     },
+    spansQuestionsWithSelectedEntities() {
+      return this.record.questions
+        .filter((q) => q.isSpanType)
+        .filter((s) => s.answer.options.some((e) => e.isSelected));
+    },
   },
   methods: {
     onSelectRecord(isSelected, record) {
       if (isSelected) {
-        return this.selectedRecords.push(record);
+        if (!this.selectedRecords.some((r) => r.id === record.id))
+          return this.selectedRecords.push(record);
+
+        return;
       }
 
       this.selectedRecords = this.selectedRecords.filter(
@@ -369,6 +377,26 @@ export default {
     },
   },
   watch: {
+    spansQuestionsWithSelectedEntities: {
+      deep: true,
+      handler() {
+        const spanQuestions = this.recordsOnPage
+          .flatMap((r) => r.questions)
+          .filter((q) => q.isSpanType);
+
+        this.spansQuestionsWithSelectedEntities.forEach((q) => {
+          spanQuestions.forEach((question) => {
+            if (question.id === q.id) {
+              question.answer.options.forEach((option) => {
+                option.isSelected = q.answer.options.some(
+                  (o) => o.isSelected && o.id === option.id
+                );
+              });
+            }
+          });
+        });
+      },
+    },
     "recordCriteria.status"() {
       this.recordCriteria.page.focusMode();
     },
diff --git a/argilla-frontend/components/features/annotation/container/questions/form/Questions.component.vue b/argilla-frontend/components/features/annotation/container/questions/form/Questions.component.vue
index 00ad453ff8..8913203318 100644
--- a/argilla-frontend/components/features/annotation/container/questions/form/Questions.component.vue
+++ b/argilla-frontend/components/features/annotation/container/questions/form/Questions.component.vue
@@ -58,7 +58,6 @@
           ref="span"
           :question="question"
           :isFocused="checkIfQuestionIsFocused(index)"
-          :is-bulk-mode="isBulkMode"
           :enableSpanQuestionShortcutsGlobal="enableSpanQuestionShortcutsGlobal"
           @on-focus="updateQuestionAutofocus(index)"
         />
diff --git a/argilla-frontend/components/features/annotation/container/questions/form/span/SpanComponent.vue b/argilla-frontend/components/features/annotation/container/questions/form/span/SpanComponent.vue
index e84b775524..59176d591a 100644
--- a/argilla-frontend/components/features/annotation/container/questions/form/span/SpanComponent.vue
+++ b/argilla-frontend/components/features/annotation/container/questions/form/span/SpanComponent.vue
@@ -6,7 +6,7 @@
       <span v-text="warningMessage" />
     </div>
     <EntityLabelSelectionComponent
-      v-if="!isBulkMode && supportedSpanAnnotation"
+      v-if="supportedSpanAnnotation"
       v-model="question.answer.options"
       :componentId="question.id"
       :maxOptionsToShowBeforeCollapse="this.question.settings.visible_options"
@@ -51,8 +51,6 @@ export default {
     warningMessage() {
       if (!this.supportedSpanAnnotation) {
         return this.$t("spanAnnotation.notSupported");
-      } else if (this.isBulkMode) {
-        return this.$t("spanAnnotation.bulkMode");
       }
     },
   },
diff --git a/argilla-frontend/translation/de.js b/argilla-frontend/translation/de.js
index 1344a78fa5..099bd2e233 100644
--- a/argilla-frontend/translation/de.js
+++ b/argilla-frontend/translation/de.js
@@ -161,7 +161,6 @@ export default {
   spanAnnotation: {
     shortcutHelper: "Halten Sie 'Shift' gedrückt, um Zeichenebene auszuwählen",
     notSupported: "Bereichsannotation wird von Ihrem Browser nicht unterstützt",
-    bulkMode: "Bereichsannotation wird in der Massenansicht nicht unterstützt",
   },
   login: {
     title: "Anmelden",
diff --git a/argilla-frontend/translation/en.js b/argilla-frontend/translation/en.js
index f226476b28..af12e6df17 100644
--- a/argilla-frontend/translation/en.js
+++ b/argilla-frontend/translation/en.js
@@ -171,7 +171,6 @@ export default {
   spanAnnotation: {
     shortcutHelper: "Hold 'Shift' to select character level",
     notSupported: "Span annotation is not supported for your browser",
-    bulkMode: "Span annotation is not supported in Bulk view",
   },
   login: {
     title: "Sign in",
diff --git a/argilla-frontend/v1/domain/entities/question/Question.test.ts b/argilla-frontend/v1/domain/entities/question/Question.test.ts
index f9ff05162b..2899910c32 100644
--- a/argilla-frontend/v1/domain/entities/question/Question.test.ts
+++ b/argilla-frontend/v1/domain/entities/question/Question.test.ts
@@ -121,6 +121,23 @@ describe("Question", () => {
 
       expect(question.isModified).toBeFalsy();
     });
+
+    test("isModified is false when the question was loaded with response", () => {
+      const question = createTextQuestionMocked();
+
+      question.response({ value: "positive" });
+
+      expect(question.isModified).toBeFalsy();
+    });
+
+    test("isModified is true when the question was loaded with response  and modified after initialization", () => {
+      const question = createTextQuestionMocked();
+      question.response({ value: "positive" });
+
+      question.title = "NEW TITLE";
+
+      expect(question.isModified).toBeTruthy();
+    });
   });
 
   describe("question validation should", () => {
diff --git a/argilla-frontend/v1/domain/entities/question/Question.ts b/argilla-frontend/v1/domain/entities/question/Question.ts
index 8d0e3a9a31..8efcc6a166 100644
--- a/argilla-frontend/v1/domain/entities/question/Question.ts
+++ b/argilla-frontend/v1/domain/entities/question/Question.ts
@@ -18,6 +18,7 @@ interface OriginalQuestion {
   title: string;
   description: string;
   settings: any;
+  answer: QuestionAnswer;
 }
 
 export class Question {
@@ -40,8 +41,6 @@ export class Question {
     this.settings = new QuestionSetting(settings);
 
     this.initialize();
-    this.initializeAnswers();
-    this.initializeOriginal();
   }
 
   private _description: string;
@@ -102,7 +101,8 @@ export class Question {
     return (
       this.title !== this.original.title ||
       this.description !== this.original.description ||
-      !this.settings.isEqual(this.original.settings)
+      !this.settings.isEqual(this.original.settings) ||
+      !this.answer.isEqual(this.original.answer)
     );
   }
 
@@ -140,23 +140,11 @@ export class Question {
     this.answer.clear();
   }
 
-  reloadAnswerFromOptions() {
-    const valuesAnswered = this.answer.valuesAnswered;
-
-    this.initializeAnswers();
-
-    if (valuesAnswered) {
-      this.answer.response({ value: valuesAnswered });
-    }
-  }
-
   restore() {
     this.title = this.original.title;
     this.description = this.original.description;
 
     this.restoreOriginal();
-
-    this.reloadAnswerFromOptions();
   }
 
   update() {
@@ -172,6 +160,8 @@ export class Question {
     if (!answer) return;
 
     this.answer.response(answer);
+
+    this.initializeOriginal();
   }
 
   addSuggestion(suggestion: Suggestion) {
@@ -180,7 +170,7 @@ export class Question {
     this.suggestion = suggestion;
   }
 
-  private createEmptyAnswers(): QuestionAnswer {
+  private createInitialAnswers(): QuestionAnswer {
     if (this.isTextType) {
       return new TextQuestionAnswer(this.type, "");
     }
@@ -245,15 +235,26 @@ export class Question {
         };
       });
     }
+
+    this.initializeAnswers();
+    this.initializeOriginal();
   }
 
   private initializeAnswers() {
-    this.answer = this.createEmptyAnswers();
+    this.answer = this.createInitialAnswers();
   }
 
   private initializeOriginal() {
     const { options, ...rest } = this.settings;
 
+    const originalAnswer = this.createInitialAnswers();
+
+    const valuesAnswered = this.answer.valuesAnswered;
+
+    if (valuesAnswered) {
+      originalAnswer.response({ value: valuesAnswered });
+    }
+
     this.original = {
       title: this.title,
       description: this.description,
@@ -261,6 +262,7 @@ export class Question {
         ...rest,
         options: options?.map((option: string) => option),
       }),
+      answer: originalAnswer,
     };
   }
 
@@ -271,5 +273,13 @@ export class Question {
       ...rest,
       options: options?.map((option: string) => option),
     });
+
+    const valuesAnswered = this.answer.valuesAnswered;
+
+    this.initializeAnswers();
+
+    if (valuesAnswered) {
+      this.answer.response({ value: valuesAnswered });
+    }
   }
 }
diff --git a/argilla-frontend/v1/domain/entities/question/QuestionAnswer.ts b/argilla-frontend/v1/domain/entities/question/QuestionAnswer.ts
index c3fa86b2bc..0d7b4c99d8 100644
--- a/argilla-frontend/v1/domain/entities/question/QuestionAnswer.ts
+++ b/argilla-frontend/v1/domain/entities/question/QuestionAnswer.ts
@@ -22,6 +22,14 @@ export abstract class QuestionAnswer {
     this.fill(this._answer);
   }
 
+  isEqual(answer: QuestionAnswer) {
+    const isEqual =
+      JSON.stringify(this.valuesAnswered) ===
+      JSON.stringify(answer.valuesAnswered);
+
+    return isEqual;
+  }
+
   protected abstract fill(answer: Answer);
   abstract clear();
   abstract get isValid(): boolean;
@@ -99,7 +107,11 @@ export class SpanQuestionAnswer extends QuestionAnswer {
   }
 
   get valuesAnswered(): SpanAnswer[] {
-    return this.values;
+    return this.values.map((value) => ({
+      start: value.start,
+      end: value.end,
+      label: value.label,
+    }));
   }
 }
 
diff --git a/argilla-frontend/v1/domain/entities/record/Record.ts b/argilla-frontend/v1/domain/entities/record/Record.ts
index cf361492ee..33a0600630 100644
--- a/argilla-frontend/v1/domain/entities/record/Record.ts
+++ b/argilla-frontend/v1/domain/entities/record/Record.ts
@@ -76,15 +76,17 @@ export class Record {
   }
 
   answerWith(recordReference: Record) {
-    this.questions.forEach((question) => {
-      const questionReference = recordReference.questions.find(
-        (q) => q.id === question.id
-      );
+    this.questions
+      .filter((q) => !q.isSpanType)
+      .forEach((question) => {
+        const questionReference = recordReference.questions.find(
+          (q) => q.id === question.id
+        );
 
-      if (!questionReference) return;
+        if (!questionReference) return;
 
-      question.clone(questionReference);
-    });
+        question.clone(questionReference);
+      });
   }
 
   initialize() {
diff --git a/argilla-frontend/v1/domain/usecases/get-records-by-criteria-use-case.ts b/argilla-frontend/v1/domain/usecases/get-records-by-criteria-use-case.ts
index 3f8536284a..ed6b61f7f9 100644
--- a/argilla-frontend/v1/domain/usecases/get-records-by-criteria-use-case.ts
+++ b/argilla-frontend/v1/domain/usecases/get-records-by-criteria-use-case.ts
@@ -72,22 +72,25 @@ export class GetRecordsByCriteriaUseCase {
             )
           : null;
 
-        const suggestions = !criteria.page.isBulkMode
-          ? record.suggestions.map((suggestion) => {
-              const question = questions.find(
-                (q) => q.id === suggestion.question_id
-              );
-
-              return new Suggestion(
-                suggestion.id,
-                suggestion.question_id,
-                question.type,
-                suggestion.value,
-                suggestion.score,
-                suggestion.agent
-              );
-            })
-          : [];
+        const suggestions = record.suggestions
+          .map((suggestion) => {
+            const question = questions.find(
+              (q) => q.id === suggestion.question_id
+            );
+
+            if (criteria.page.isBulkMode && !question.isSpanType)
+              return undefined;
+
+            return new Suggestion(
+              suggestion.id,
+              suggestion.question_id,
+              question.type,
+              suggestion.value,
+              suggestion.score,
+              suggestion.agent
+            );
+          })
+          .filter(Boolean);
 
         return new Record(
           record.id,