From 2048e41239d42f35de68fe78e7947ebe2b3957b1 Mon Sep 17 00:00:00 2001
From: keithCuniah <keithcuniah@gmail.com>
Date: Wed, 28 Sep 2022 13:31:37 +0200
Subject: [PATCH 1/8] code cleanning : not do too much thing in one line

---
 .../results/RecordTextClassification.vue           | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/frontend/components/text-classifier/results/RecordTextClassification.vue b/frontend/components/text-classifier/results/RecordTextClassification.vue
index 35a86a10fa..1942a64640 100644
--- a/frontend/components/text-classifier/results/RecordTextClassification.vue
+++ b/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,
           },
         ],
       });

From 0dc1877e3d9909a6d5fea965714567f30254188e Mon Sep 17 00:00:00 2001
From: keithCuniah <keithcuniah@gmail.com>
Date: Wed, 28 Sep 2022 13:32:02 +0200
Subject: [PATCH 2/8] update broken snapshot

---
 .../ClassifierAnnotationArea.spec.js.snap          | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/frontend/specs/components/text-classification/results/__snapshots__/ClassifierAnnotationArea.spec.js.snap b/frontend/specs/components/text-classification/results/__snapshots__/ClassifierAnnotationArea.spec.js.snap
index ea55cb75d4..dfd35782ed 100644
--- a/frontend/specs/components/text-classification/results/__snapshots__/ClassifierAnnotationArea.spec.js.snap
+++ b/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>

From 2d087e05d2f323fb918cec48a65c3bf5f79ad2b2 Mon Sep 17 00:00:00 2001
From: keithCuniah <keithcuniah@gmail.com>
Date: Wed, 28 Sep 2022 13:33:19 +0200
Subject: [PATCH 3/8] replacing the filteredLabels by labels and moving the
 component in one package for Classifier annotation components

---
 .../ClassifierAnnotationArea.vue                         | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)
 rename frontend/components/text-classifier/results/{ => classifier-annotation}/ClassifierAnnotationArea.vue (96%)

diff --git a/frontend/components/text-classifier/results/ClassifierAnnotationArea.vue b/frontend/components/text-classifier/results/classifier-annotation/ClassifierAnnotationArea.vue
similarity index 96%
rename from frontend/components/text-classifier/results/ClassifierAnnotationArea.vue
rename to frontend/components/text-classifier/results/classifier-annotation/ClassifierAnnotationArea.vue
index cd380ab624..b6596c2eb3 100644
--- a/frontend/components/text-classifier/results/ClassifierAnnotationArea.vue
+++ b/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;
 }

From 9bad2d48dc41ed95776907102c89464ceebd9521 Mon Sep 17 00:00:00 2001
From: keithCuniah <keithcuniah@gmail.com>
Date: Wed, 28 Sep 2022 13:33:39 +0200
Subject: [PATCH 4/8] update import in snapshot test

---
 .../results/ClassifierAnnotationArea.spec.js                    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/specs/components/text-classification/results/ClassifierAnnotationArea.spec.js b/frontend/specs/components/text-classification/results/ClassifierAnnotationArea.spec.js
index 08972e4374..6d3d409fd2 100644
--- a/frontend/specs/components/text-classification/results/ClassifierAnnotationArea.spec.js
+++ b/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";
 

From 62e6f366bb5c931e6c0e4b311de97e8b64b2b73a Mon Sep 17 00:00:00 2001
From: keithCuniah <keithcuniah@gmail.com>
Date: Wed, 28 Sep 2022 13:34:24 +0200
Subject: [PATCH 5/8] non regression test for ClassifierExplorationArea
 component

---
 .../classifierExplorationArea.spec.js         | 81 +++++++++++++++++++
 1 file changed, 81 insertions(+)
 create mode 100644 frontend/components/text-classifier/results/classifier-annotation/classifierExplorationArea.spec.js

diff --git a/frontend/components/text-classifier/results/classifier-annotation/classifierExplorationArea.spec.js b/frontend/components/text-classifier/results/classifier-annotation/classifierExplorationArea.spec.js
new file mode 100644
index 0000000000..c91f3e6baa
--- /dev/null
+++ b/frontend/components/text-classifier/results/classifier-annotation/classifierExplorationArea.spec.js
@@ -0,0 +1,81 @@
+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 spyUpdateLabels = 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 () => {
+    const annotationButtons = wrapper.findComponent(ClassifierAnnotationButton);
+    const emittedValuesFromAnnotationButtons = ["label1"];
+    annotationButtons.vm.$emit("change", emittedValuesFromAnnotationButtons);
+    await wrapper.vm.$nextTick();
+    expect(spyUpdateLabels).toHaveBeenCalled();
+    expect(wrapper.vm.selectedLabels).toContain("label1");
+    expect(wrapper.vm.selectedLabels.length).toBe(1);
+    expect(wrapper.emitted("validate"));
+    expect(wrapper.emitted().validate[0]).toEqual([
+      { labels: emittedValuesFromAnnotationButtons },
+    ]);
+  });
+  it("emit the 2 annotations selected by the user to the parent component", async () => {
+    const annotationButtons = wrapper.findComponent(ClassifierAnnotationButton);
+    const emittedValuesFromAnnotationButtons = ["label1", "label2"];
+    annotationButtons.vm.$emit("change", emittedValuesFromAnnotationButtons);
+    await wrapper.vm.$nextTick();
+    expect(spyUpdateLabels).toHaveBeenCalled();
+    expect(wrapper.vm.selectedLabels).toContain("label1");
+    expect(wrapper.vm.selectedLabels).toContain("label2");
+    expect(wrapper.vm.selectedLabels.length).toBe(2);
+    expect(wrapper.emitted("validate"));
+    expect(wrapper.emitted().validate[0]).toEqual([
+      { labels: emittedValuesFromAnnotationButtons },
+    ]);
+  });
+  it("emit an empty list to the parent if the user have selected any annotations", async () => {
+    const annotationButtons = wrapper.findComponent(ClassifierAnnotationButton);
+    const emittedValuesFromAnnotationButtons = [];
+    annotationButtons.vm.$emit("change", emittedValuesFromAnnotationButtons);
+    await wrapper.vm.$nextTick();
+    expect(spyUpdateLabels).toHaveBeenCalled();
+    expect(wrapper.vm.selectedLabels.length).toBe(0);
+    expect(wrapper.emitted("validate"));
+    expect(wrapper.emitted().validate[0]).toEqual([
+      { labels: emittedValuesFromAnnotationButtons },
+    ]);
+  });
+});

From 77712c5b87ad73dc64c96753731b3199f19311ef Mon Sep 17 00:00:00 2001
From: keithCuniah <keithcuniah@gmail.com>
Date: Wed, 28 Sep 2022 15:07:25 +0200
Subject: [PATCH 6/8] code cleanning : remove duplicate code

---
 .../classifierExplorationArea.spec.js         | 61 +++++++++----------
 1 file changed, 29 insertions(+), 32 deletions(-)

diff --git a/frontend/components/text-classifier/results/classifier-annotation/classifierExplorationArea.spec.js b/frontend/components/text-classifier/results/classifier-annotation/classifierExplorationArea.spec.js
index c91f3e6baa..588c517668 100644
--- a/frontend/components/text-classifier/results/classifier-annotation/classifierExplorationArea.spec.js
+++ b/frontend/components/text-classifier/results/classifier-annotation/classifierExplorationArea.spec.js
@@ -19,7 +19,7 @@ const options = {
     },
   },
 };
-const spyUpdateLabels = jest.spyOn(
+const spyUpdateLabelsMethod = jest.spyOn(
   ClassifierAnnotationArea.methods,
   "updateLabels"
 );
@@ -40,42 +40,39 @@ describe("ClassifierAnnotationAreaComponent", () => {
     expect(annotationButtons.exists()).toBe(true);
   });
   it("emit the 2 annotations selected by the user to the parent component", async () => {
-    const annotationButtons = wrapper.findComponent(ClassifierAnnotationButton);
-    const emittedValuesFromAnnotationButtons = ["label1"];
-    annotationButtons.vm.$emit("change", emittedValuesFromAnnotationButtons);
-    await wrapper.vm.$nextTick();
-    expect(spyUpdateLabels).toHaveBeenCalled();
-    expect(wrapper.vm.selectedLabels).toContain("label1");
-    expect(wrapper.vm.selectedLabels.length).toBe(1);
-    expect(wrapper.emitted("validate"));
-    expect(wrapper.emitted().validate[0]).toEqual([
-      { labels: emittedValuesFromAnnotationButtons },
+    testIfEmittedValuesFromValidateEventIsEqualToUserSelectedAnnotations([
+      "label1",
     ]);
   });
   it("emit the 2 annotations selected by the user to the parent component", async () => {
-    const annotationButtons = wrapper.findComponent(ClassifierAnnotationButton);
-    const emittedValuesFromAnnotationButtons = ["label1", "label2"];
-    annotationButtons.vm.$emit("change", emittedValuesFromAnnotationButtons);
-    await wrapper.vm.$nextTick();
-    expect(spyUpdateLabels).toHaveBeenCalled();
-    expect(wrapper.vm.selectedLabels).toContain("label1");
-    expect(wrapper.vm.selectedLabels).toContain("label2");
-    expect(wrapper.vm.selectedLabels.length).toBe(2);
-    expect(wrapper.emitted("validate"));
-    expect(wrapper.emitted().validate[0]).toEqual([
-      { labels: emittedValuesFromAnnotationButtons },
+    testIfEmittedValuesFromValidateEventIsEqualToUserSelectedAnnotations([
+      "label1",
+      "label2",
     ]);
   });
   it("emit an empty list to the parent if the user have selected any annotations", async () => {
-    const annotationButtons = wrapper.findComponent(ClassifierAnnotationButton);
-    const emittedValuesFromAnnotationButtons = [];
-    annotationButtons.vm.$emit("change", emittedValuesFromAnnotationButtons);
-    await wrapper.vm.$nextTick();
-    expect(spyUpdateLabels).toHaveBeenCalled();
-    expect(wrapper.vm.selectedLabels.length).toBe(0);
-    expect(wrapper.emitted("validate"));
-    expect(wrapper.emitted().validate[0]).toEqual([
-      { labels: emittedValuesFromAnnotationButtons },
-    ]);
+    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.lenth) {
+    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 },
+  ]);
+};

From 425b804c95de5530078458bbd6e3a52394555446 Mon Sep 17 00:00:00 2001
From: keithCuniah <keithcuniah@gmail.com>
Date: Wed, 28 Sep 2022 15:36:42 +0200
Subject: [PATCH 7/8] code review

---
 .../classifier-annotation/classifierExplorationArea.spec.js     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/components/text-classifier/results/classifier-annotation/classifierExplorationArea.spec.js b/frontend/components/text-classifier/results/classifier-annotation/classifierExplorationArea.spec.js
index 588c517668..ee694ec421 100644
--- a/frontend/components/text-classifier/results/classifier-annotation/classifierExplorationArea.spec.js
+++ b/frontend/components/text-classifier/results/classifier-annotation/classifierExplorationArea.spec.js
@@ -63,7 +63,7 @@ const testIfEmittedValuesFromValidateEventIsEqualToUserSelectedAnnotations = asy
   annotationButtons.vm.$emit("change", emittedValuesFromAnnotationButtons);
   await wrapper.vm.$nextTick();
   expect(spyUpdateLabelsMethod).toHaveBeenCalled();
-  if (selectedAnnotations.lenth) {
+  if (selectedAnnotations.length) {
     selectedAnnotations.forEach((annotation) => {
       expect(wrapper.vm.selectedLabels).toContain(annotation);
     });

From a97723c0bd3fe16ee8dcd11a7c63f1ad092d714f Mon Sep 17 00:00:00 2001
From: keithCuniah <keithcuniah@gmail.com>
Date: Wed, 28 Sep 2022 15:45:23 +0200
Subject: [PATCH 8/8] eslint correction

---
 .../classifierExplorationArea.spec.js         | 41 +++++++++----------
 1 file changed, 20 insertions(+), 21 deletions(-)

diff --git a/frontend/components/text-classifier/results/classifier-annotation/classifierExplorationArea.spec.js b/frontend/components/text-classifier/results/classifier-annotation/classifierExplorationArea.spec.js
index ee694ec421..485450b2ea 100644
--- a/frontend/components/text-classifier/results/classifier-annotation/classifierExplorationArea.spec.js
+++ b/frontend/components/text-classifier/results/classifier-annotation/classifierExplorationArea.spec.js
@@ -55,24 +55,23 @@ describe("ClassifierAnnotationAreaComponent", () => {
   });
 });
 
-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 },
-  ]);
-};
+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 },
+    ]);
+  };