fix: Improve access to label list in Text Classification (#1916)

* fix: Improve access to label list in Text Classification

close #1804

This PR allows to see all labels whitout collapse when pagination size is 1 record in hand labeling view for Text Classifier.

* Enable keyword event on any active element

* lint

* get pagination size

* fix test

* restructure and rename

* change order and remove watch

* move to const the arrow keycodes

* rename cont to be more explicit

* remove button when pagination size 1

frontend/components/base/BasePagination.vue

@@ -194,14 +194,13 @@ export default {
       this.showOptions = false;
     },
     keyDown(event) {
+      const arrowRight = event.keyCode === 39;
+      const arrowLeft = event.keyCode === 37;
       if (!this.paginationSettings.disabledShortCutPagination) {
-        const elem = document.querySelector("body");
-        if (elem === document.activeElement) {
-          if (event.keyCode === 39) {
-            this.nextPage();
-          } else if (event.keyCode === 37) {
-            this.prevPage();
-          }
+        if (arrowRight) {
+          this.nextPage();
+        } else if (arrowLeft) {
+          this.prevPage();
         }
       }
     },

frontend/components/commons/header/filters/FiltersList.vue

@@ -264,7 +264,7 @@ export default {
     },
     selectGroup(group) {
       if (this.initialVisibleGroup === group) {
-        this.initialVisibleGroup =  null;
+        this.initialVisibleGroup = null;
       } else {
         this.initialVisibleGroup = group;
       }

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

@@ -30,19 +30,20 @@
           :show-score="true"
         />
       </span>
-
-      <base-button
-        v-if="visibleLabels.length < filteredLabels.length"
-        class="predictions__more secondary light small"
-        @click="expandLabels()"
-        >+{{ filteredLabels.length - visibleLabels.length }}</base-button
-      >
-      <base-button
-        v-else-if="visibleLabels.length > maxVisibleLabels"
-        class="predictions__more secondary light small"
-        @click="collapseLabels()"
-        >Show less</base-button
-      >
+      <template v-if="!allowToShowAllLabels">
+        <base-button
+          v-if="visibleLabels.length < filteredLabels.length"
+          class="predictions__more secondary light small"
+          @click="expandLabels()"
+          >+{{ filteredLabels.length - visibleLabels.length }}</base-button
+        >
+        <base-button
+          v-else-if="visibleLabels.length > maxVisibleLabels"
+          class="predictions__more secondary light small"
+          @click="collapseLabels()"
+          >Show less</base-button
+        >
+      </template>
     </div>
   </div>
 </template>
@@ -69,7 +70,7 @@ export default {
   idState() {
     return {
       searchText: "",
-      shownLabels: DatasetViewSettings.MAX_VISIBLE_LABELS,
+      shownLabels: this.maxVisibleLabels,
     };
   },
   computed: {
@@ -83,25 +84,33 @@ export default {
     },
     shownLabels: {
       get: function () {
-        return this.idState.shownLabels;
+        return this.allowToShowAllLabels
+          ? this.labels.length
+          : this.idState.shownLabels;
       },
       set: function (newValue) {
         this.idState.shownLabels = newValue;
       },
     },
-    labels() {
-      return this.record.prediction ? this.record.prediction.labels : [];
-    },
     maxVisibleLabels() {
       return DatasetViewSettings.MAX_VISIBLE_LABELS;
     },
+    visibleLabels() {
+      return this.filteredLabels.slice(0, this.shownLabels);
+    },
     filteredLabels() {
       return this.labels.filter((label) =>
         label.class.toLowerCase().match(this.searchText.toLowerCase())
       );
     },
-    visibleLabels() {
-      return this.filteredLabels.slice(0, this.shownLabels);
+    labels() {
+      return this.record.prediction ? this.record.prediction.labels : [];
+    },
+    allowToShowAllLabels() {
+      return this.paginationSize === 1 || false;
+    },
+    paginationSize() {
+      return this.dataset.viewSettings?.pagination?.size;
     },
     predictedAs() {
       return this.record.predicted_as;

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

@@ -39,26 +39,29 @@
         @change="updateLabels"
       >
       </classifier-annotation-button>
-
-      <base-button
-        v-if="visibleLabels.length < filteredLabels.length"
-        class="feedback-interactions__more secondary light"
-        @click="expandLabels()"
-        >+{{ filteredLabels.length - visibleLabels.length }}</base-button
-      >
-      <base-button
-        v-else-if="visibleLabels.length > maxVisibleLabels"
-        class="feedback-interactions__more secondary light"
-        @click="collapseLabels()"
-        >Show less</base-button
-      >
+      <template v-if="!allowToShowAllLabels">
+        <base-button
+          v-if="visibleLabels.length < filteredLabels.length"
+          class="feedback-interactions__more secondary light"
+          @click="expandLabels()"
+          >+{{ filteredLabels.length - visibleLabels.length }}</base-button
+        >
+        <base-button
+          v-else-if="
+            visibleLabels.length > maxVisibleLabels && !allowToShowAllLabels
+          "
+          class="feedback-interactions__more secondary light"
+          @click="collapseLabels()"
+          >Show less</base-button
+        >
+      </template>
     </div>
   </div>
 </template>
 <script>
 import { DatasetViewSettings } from "@/models/DatasetViewSettings";
 import { IdState } from "vue-virtual-scroller";
-import ClassifierAnnotationButton from "../ClassifierAnnotationButton.vue";
+import ClassifierAnnotationButton from "./ClassifierAnnotationButton.vue";
 
 export default {
   components: {
@@ -84,7 +87,7 @@ export default {
     return {
       searchText: "",
       selectedLabels: [],
-      shownLabels: DatasetViewSettings.MAX_VISIBLE_LABELS,
+      shownLabels: this.maxVisibleLabels,
     };
   },
   watch: {
@@ -113,7 +116,9 @@ export default {
     },
     shownLabels: {
       get: function () {
-        return this.idState.shownLabels;
+        return this.allowToShowAllLabels
+          ? this.sortedLabels.length
+          : this.idState.shownLabels;
       },
       set: function (newValue) {
         this.idState.shownLabels = newValue;
@@ -125,6 +130,37 @@ export default {
     isMultiLabel() {
       return this.dataset.isMultiLabel;
     },
+    visibleLabels() {
+      const numberOfSelectedLabels = this.filteredLabels.filter(
+        (l) => l.selected
+      ).length;
+      const availableNonSelected =
+        this.shownLabels < this.filteredLabels.length
+          ? this.shownLabels - numberOfSelectedLabels
+          : this.shownLabels;
+      let nonSelected = 0;
+      return this.filteredLabels.filter((l) => {
+        if (l.selected) {
+          return l;
+        } else {
+          if (nonSelected < availableNonSelected) {
+            nonSelected++;
+            return l;
+          }
+        }
+      });
+    },
+    filteredLabels() {
+      return this.sortedLabels.filter((label) =>
+        label.class.toLowerCase().match(this.searchText.toLowerCase())
+      );
+    },
+    sortedLabels() {
+      return this.labels.slice().sort((a, b) => (a.score > b.score ? -1 : 1));
+    },
+    appliedLabels() {
+      return this.labels.filter((l) => l.selected).map((label) => label.class);
+    },
     labels() {
       // Setup all record labels
       const labels = Object.assign(
@@ -156,42 +192,17 @@ export default {
         };
       });
     },
-    sortedLabels() {
-      return this.labels.slice().sort((a, b) => (a.score > b.score ? -1 : 1));
-    },
-    filteredLabels() {
-      return this.sortedLabels.filter((label) =>
-        label.class.toLowerCase().match(this.searchText.toLowerCase())
-      );
-    },
-    visibleLabels() {
-      const selectedLabels = this.filteredLabels.filter(
-        (l) => l.selected
-      ).length;
-      const availableNonSelected =
-        this.shownLabels < this.filteredLabels.length
-          ? this.shownLabels - selectedLabels
-          : this.shownLabels;
-      let nonSelected = 0;
-      return this.filteredLabels.filter((l) => {
-        if (l.selected) {
-          return l;
-        } else {
-          if (nonSelected < availableNonSelected) {
-            nonSelected++;
-            return l;
-          }
-        }
-      });
-    },
     annotationLabels() {
       return this.record.annotation ? this.record.annotation.labels : [];
     },
     predictionLabels() {
       return this.record.prediction ? this.record.prediction.labels : [];
     },
-    appliedLabels() {
-      return this.labels.filter((l) => l.selected).map((label) => label.class);
+    allowToShowAllLabels() {
+      return this.paginationSize === 1 || false;
+    },
+    paginationSize() {
+      return this.dataset.viewSettings?.pagination?.size;
     },
     predictedAs() {
       return this.record.predicted_as;

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

@@ -1,6 +1,6 @@
 import { shallowMount } from "@vue/test-utils";
 import ClassifierAnnotationArea from "./ClassifierAnnotationArea";
-import ClassifierAnnotationButton from "../ClassifierAnnotationButton";
+import ClassifierAnnotationButton from "./ClassifierAnnotationButton";
 import { TextClassificationRecord } from "@/models/TextClassification";
 
 let wrapper = null;