fix: Search tag reset prior annotation (#1736)

Closes #1711

Also, add some none regression unit test with Jest

(cherry picked from commit fcd6c81)

frontend/components/text-classifier/results/RecordTextClassification.vue

@@ -105,18 +105,20 @@ export default {
     },
 
     async validateLabels({ labels }) {
+      const annotation = {
+        labels: labels.map((label) => ({
+          class: label,
+          score: 1.0,
+        })),
+      };
+
       await this.validateAnnotations({
         dataset: this.dataset,
         agent: this.$auth.user.username,
         records: [
           {
             ...this.record,
-            annotation: {
-              labels: labels.map((label) => ({
-                class: label,
-                score: 1.0,
-              })),
-            },
+            annotation,
           },
         ],
       });

frontend/components/text-classifier/results/ClassifierAnnotationArea.vue → frontend/components/text-classifier/results/classifier-annotation/ClassifierAnnotationArea.vue

@@ -58,8 +58,12 @@
 <script>
 import { DatasetViewSettings } from "@/models/DatasetViewSettings";
 import { IdState } from "vue-virtual-scroller";
+import ClassifierAnnotationButton from "../ClassifierAnnotationButton.vue";
 
 export default {
+  components: {
+    ClassifierAnnotationButton,
+  },
   mixins: [
     IdState({
       // You can customize this
@@ -187,9 +191,7 @@ export default {
       return this.record.prediction ? this.record.prediction.labels : [];
     },
     appliedLabels() {
-      return this.filteredLabels
-        .filter((l) => l.selected)
-        .map((label) => label.class);
+      return this.labels.filter((l) => l.selected).map((label) => label.class);
     },
     predictedAs() {
       return this.record.predicted_as;
@@ -224,7 +226,6 @@ export default {
 </script>
 <style lang="scss" scoped>
 %item {
-  // width: calc(25% - 5px);
   min-width: 80px;
   max-width: 238px;
 }

frontend/components/text-classifier/results/classifier-annotation/classifierExplorationArea.spec.js

@@ -0,0 +1,77 @@
+import { shallowMount } from "@vue/test-utils";
+import ClassifierAnnotationArea from "./ClassifierAnnotationArea";
+import ClassifierAnnotationButton from "../ClassifierAnnotationButton";
+import { TextClassificationRecord } from "@/models/TextClassification";
+
+let wrapper = null;
+const options = {
+  propsData: {
+    record: new TextClassificationRecord({
+      inputs: { text: "My text", multi_label: false },
+    }),
+    dataset: {
+      task: "TextClassification",
+      isMultiLabel: true,
+      viewSettings: {
+        annotationEnabled: false,
+      },
+      labels: ["label1"], // WARNING, if labels is empty then the ClassifierAnnotationButton will no be render => test 2/3/4/5 will failed
+    },
+  },
+};
+const spyUpdateLabelsMethod = jest.spyOn(
+  ClassifierAnnotationArea.methods,
+  "updateLabels"
+);
+beforeEach(() => {
+  wrapper = shallowMount(ClassifierAnnotationArea, options);
+});
+
+afterEach(() => {
+  wrapper.destroy();
+});
+
+describe("ClassifierAnnotationAreaComponent", () => {
+  it("render the component", () => {
+    expect(wrapper.is(ClassifierAnnotationArea)).toBe(true);
+  });
+  it("render the child component if props labels is not empty", () => {
+    const annotationButtons = wrapper.findComponent(ClassifierAnnotationButton);
+    expect(annotationButtons.exists()).toBe(true);
+  });
+  it("emit the 2 annotations selected by the user to the parent component", async () => {
+    testIfEmittedValuesFromValidateEventIsEqualToUserSelectedAnnotations([
+      "label1",
+    ]);
+  });
+  it("emit the 2 annotations selected by the user to the parent component", async () => {
+    testIfEmittedValuesFromValidateEventIsEqualToUserSelectedAnnotations([
+      "label1",
+      "label2",
+    ]);
+  });
+  it("emit an empty list to the parent if the user have selected any annotations", async () => {
+    testIfEmittedValuesFromValidateEventIsEqualToUserSelectedAnnotations([]);
+  });
+});
+
+const testIfEmittedValuesFromValidateEventIsEqualToUserSelectedAnnotations =
+  async (selectedAnnotations) => {
+    const annotationButtons = wrapper.findComponent(ClassifierAnnotationButton);
+    const emittedValuesFromAnnotationButtons = selectedAnnotations;
+    annotationButtons.vm.$emit("change", emittedValuesFromAnnotationButtons);
+    await wrapper.vm.$nextTick();
+    expect(spyUpdateLabelsMethod).toHaveBeenCalled();
+    if (selectedAnnotations.length) {
+      selectedAnnotations.forEach((annotation) => {
+        expect(wrapper.vm.selectedLabels).toContain(annotation);
+      });
+    }
+    expect(wrapper.vm.selectedLabels.length).toBe(
+      emittedValuesFromAnnotationButtons.length
+    );
+    expect(wrapper.emitted("validate"));
+    expect(wrapper.emitted().validate[0]).toEqual([
+      { labels: emittedValuesFromAnnotationButtons },
+    ]);
+  };

frontend/specs/components/text-classification/results/ClassifierAnnotationArea.spec.js

@@ -1,5 +1,5 @@
 import { mount } from "@vue/test-utils";
-import Component from "@/components/text-classifier/results/ClassifierAnnotationArea";
+import Component from "@/components/text-classifier/results/classifier-annotation/ClassifierAnnotationArea";
 
 import { TextClassificationRecord } from "@/models/TextClassification";
 

frontend/specs/components/text-classification/results/__snapshots__/ClassifierAnnotationArea.spec.js.snap

@@ -4,8 +4,18 @@ exports[`ClassifierAnnotationArea renders properly 1`] = `
 <div class="annotation-area">
   <!---->
   <div class="feedback-interactions">
-    <classifier-annotation-button id="A" label="[object Object]" data-title="A" value="A" class="label-button"></classifier-annotation-button>
-    <classifier-annotation-button id="B" label="[object Object]" data-title="B" value="B" class="label-button"></classifier-annotation-button>
+    <div class="re-annotation-button single label-button" data-title="A"><label for="A" class="button"><span title="A" class="annotation-button-data__text">A
+    </span>
+        <!---->
+      </label>
+      <div tabindex="0" class="annotation-button-container"><input id="A" type="checkbox" value="A"></div>
+    </div>
+    <div class="re-annotation-button single label-button" data-title="B"><label for="B" class="button"><span title="B" class="annotation-button-data__text">B
+    </span>
+        <!---->
+      </label>
+      <div tabindex="0" class="annotation-button-container"><input id="B" type="checkbox" value="B"></div>
+    </div>
     <!---->
   </div>
 </div>