@konfuzio/document-validation-ui 0.1.14 → 0.1.16-dev.0

package/src/components/DocumentAnnotations/DocumentAnnotations.vue

@@ -1,33 +1,48 @@
 <template>
-  <div class="labels-sidebar">
+  <div id="labels-sidebar">
     <!-- When extracting annotations after editing -->
-    <div v-if="recalculatingAnnotations">
+    <div v-if="recalculatingAnnotations" class="extracting-data">
       <ExtractingData />
     </div>
 
     <!-- When document data is still loading -->
-    <div v-else-if="!annotationSets || loading">
-      <div v-for="n in numberOfLoadingAnnotations" :key="n">
+    <div v-else-if="!annotationSets || loading" class="document-annotations-loading">
+      <div v-for="n in numberOfLoadingAnnotations" :key="n" class="loading-annotation-set">
         <LoadingAnnotations />
       </div>
     </div>
 
     <!-- When there's no annotations in the label -->
-    <div v-else-if="annotationSets.length === 0">
-      <CategorizeModal v-if="!publicView" />
+    <div v-else-if="annotationSets.length === 0" class="empty-annotation-sets">
       <EmptyState />
     </div>
 
-    <div
-      v-else
-      :class="[
-        'annotation-set-list',
-        missingAnnotations.length && !publicView && 'showing-rejected',
-      ]"
-    >
-      <CategorizeModal v-if="!publicView" />
+    <div v-else ref="annotationList" :class="['annotation-set-list']">
       <div
-        v-for="(annotationSet, indexGroup) in annotationSets"
+        v-if="Object.entries(annotationSetsInTable()).length > 0"
+        class="annotation-set-group"
+      >
+        <div class="label-set-header">
+          <div class="label-set-name">{{ $t("table") }}</div>
+        </div>
+        <div
+          v-for="(tableSet, index) in Object.values(annotationSetsInTable())"
+          :key="index"
+          class="ann-set-table"
+          @click="openAnnotationSetTable(tableSet)"
+        >
+          <div class="ann-set-table-icon">
+            <GridIcon /><span class="ann-set-number">{{
+              tableSet.length
+            }}</span>
+          </div>
+          <span class="ann-set-table-label-set-name">{{
+            tableSet[0].label_set.name
+          }}</span>
+        </div>
+      </div>
+      <div
+        v-for="(annotationSet, indexGroup) in annotationSetsToShowInList()"
         :key="indexGroup"
         class="annotation-set-group"
       >
@@ -39,19 +54,29 @@
               )}`
             }}
           </div>
-          <div class="labelset-action-buttons">
-            <ActionButtons
-              :reject-all-empty-btn="true"
-              :annotation-set="annotationSet"
-              :accept-all-btn="true"
-              @reject-all-empty="
-                rejectMissingAnnotations(null, null, annotationSet, true)
+          <div
+            v-if="annotationSet.labels.length !== 0"
+            class="labelset-action-buttons"
+          >
+            <AnnotationSetActionButtons
+              :number-of-empty-labels-in-annotation-set="
+                emptyLabelsLength(annotationSet)
+              "
+              :number-of-pending-annotations-in-annotation-set="
+                annotationsWithPendingReviewLength(annotationSet)
               "
-              @hover-annotation-set-to-reject="
-                handleHoverAnnotationSet(annotationSet, 'reject')
+              @mark-all-empty-missing="
+                markAnnotationsAsMissing(null, null, annotationSet, true)
+              "
+              @hover-annotation-set-to-mark-missing="
+                handleHoverAnnotationSet(annotationSet, 'missing')
+              "
+              @leave-annotation-set-to-mark-missing="
+                handleHoverAnnotationSet(null)
+              "
+              @accept-all-pending-annotations="
+                acceptPendingAnnotationsInAnnotationSet(annotationSet)
               "
-              @leave-annotation-set-to-reject="handleHoverAnnotationSet(null)"
-              @accept-group="acceptGroup(annotationSet)"
               @hover-annotation-set-to-accept="
                 handleHoverAnnotationSet(annotationSet, 'accept')
               "
@@ -60,24 +85,34 @@
           </div>
         </div>
 
-        <div v-for="label in annotationSet.labels" :key="label.id">
-          <div v-if="labelNotRejected(annotationSet, label)" class="labels">
-            <DocumentLabel
-              :label="label"
-              :annotation-set="annotationSet"
-              :index-group="indexGroup"
-              @handle-reject="rejectMissingAnnotations"
-            />
+        <div v-if="annotationSet.labels.length > 0">
+          <div v-for="label in annotationSet.labels" :key="label.id">
+            <div
+              v-if="!(label.annotations.length === 0 && publicView)"
+              class="labels"
+            >
+              <DocumentLabel
+                :label="label"
+                :annotation-set="annotationSet"
+                :index-group="indexGroup"
+                @handle-missing-annotation="markAnnotationsAsMissing"
+              />
+            </div>
           </div>
         </div>
-      </div>
-    </div>
 
-    <div
-      v-if="!publicView && missingAnnotations.length"
-      class="rejected-labels-list"
-    >
-      <RejectedLabels :missing-annotations="missingAnnotations" />
+        <div v-if="annotationSet.labels.length === 0" class="no-labels">
+          <span> {{ $t("no_labels_in_set") }}</span>
+          <span v-if="!publicView" v-html="$t('link_to_add_labels')"></span>
+        </div>
+
+        <div
+          v-else-if="!annotationSetHasAnnotations(annotationSet) && publicView"
+          class="no-labels"
+        >
+          <span> {{ $t("no_annotations_in_annotation_set") }}</span>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -85,11 +120,10 @@
 import { mapGetters, mapState } from "vuex";
 import EmptyState from "./EmptyState";
 import ExtractingData from "./ExtractingData";
-import ActionButtons from "./ActionButtons";
+import AnnotationSetActionButtons from "./AnnotationSetActionButtons";
 import DocumentLabel from "./DocumentLabel";
-import RejectedLabels from "./RejectedLabels";
 import LoadingAnnotations from "./LoadingAnnotations";
-import CategorizeModal from "./CategorizeModal";
+import GridIcon from "../../assets/images/GridIcon";
 
 /**
  * This component loads all annotations for one document
@@ -98,11 +132,10 @@ export default {
   components: {
     EmptyState,
     ExtractingData,
-    ActionButtons,
+    AnnotationSetActionButtons,
     DocumentLabel,
-    RejectedLabels,
     LoadingAnnotations,
-    CategorizeModal,
+    GridIcon,
   },
   data() {
     return {
@@ -112,6 +145,7 @@ export default {
     };
   },
   computed: {
+    ...mapState("display", ["showAnnSetTable"]),
     ...mapState("document", [
       "documentId",
       "recalculatingAnnotations",
@@ -123,9 +157,17 @@ export default {
       "loading",
       "labels",
       "selectedDocument",
+      "splittingSuggestions",
     ]),
     ...mapGetters("category", ["category"]),
-    ...mapGetters("document", ["numberOfAnnotationSetGroup"]),
+    ...mapGetters("document", [
+      "numberOfAnnotationSetGroup",
+      "emptyLabelsLength",
+      "annotationsWithPendingReviewLength",
+      "annotationSetsToShowInList",
+      "annotationSetsInTable",
+      "isDocumentReviewed",
+    ]),
     isAnnotationBeingEdited() {
       return this.editAnnotation && this.editAnnotation.id;
     },
@@ -137,7 +179,6 @@ export default {
       }
     },
     acceptAnnotation(newValue, oldValue) {
-      // TODO: rework this to be more generic
       if (!newValue && oldValue) {
         this.focusOnNextAnnotation();
         this.jumpToNextAnnotation = false;
@@ -151,23 +192,17 @@ export default {
     window.removeEventListener("keydown", this.keyDownHandler);
   },
   methods: {
-    showMissingAnnotations() {
-      if (
-        (this.publicView &&
-          this.selectedDocument &&
-          this.selectedDocument.is_reviewed) ||
-        !this.publicView
-      ) {
-        return true;
-      } else {
-        return false;
-      }
+    annotationSetHasAnnotations(annotationSet) {
+      const found = annotationSet.labels.find(
+        (label) => label.annotations.length > 0
+      );
+
+      return found;
     },
 
     focusOnNextAnnotation() {
-      const annotations = Array.from(
-        document.getElementsByClassName("annotation-value")
-      );
+      const annotations = this.createArray("keyboard-nav");
+
       if (annotations[this.count]) {
         annotations[this.count].click();
       } else {
@@ -209,31 +244,36 @@ export default {
       }
     },
 
+    exitEditMode() {
+      this.count = 0;
+      this.$store.dispatch("document/resetEditAnnotation");
+      this.$store.dispatch("selection/disableSelection");
+      this.$store.dispatch("document/endLoading");
+    },
+
+    createArray(className) {
+      return Array.from(
+        this.$refs.annotationList.getElementsByClassName(className)
+      );
+    },
+
     keyDownHandler(event) {
       // only allow keyboard navigation if we are not in public view mode
-      if (this.publicView) return;
+      if (this.publicView || this.isDocumentReviewed) return;
 
-      // get out of edit mode and navigation
+      // Exit edit mode and navigation
       if (event.key === "Escape") {
-        this.count = 0;
-        this.$store.dispatch("document/resetEditAnnotation");
-        this.$store.dispatch("selection/disableSelection");
-        this.$store.dispatch("document/endLoading");
+        this.exitEditMode();
         return;
       }
 
       // Not allow starting edit mode with ArrowUp key
       if (event.key === "ArrowUp" && !this.isAnnotationBeingEdited) return;
+      // Get all the annotation elements
+      let annotations = this.createArray("keyboard-nav");
 
-      // Create an array from the elements selected
-      // for easier management of data
-      const annotations = Array.from(
-        document.getElementsByClassName("annotation-value")
-      );
       // Get clicked element to get the index
-      const clickedAnnotations = Array.from(
-        document.getElementsByClassName("clicked")
-      );
+      const clickedAnnotations = this.createArray("clicked-ann");
 
       // get index of currently active element
       const currentAnnIndex = annotations.findIndex(
@@ -242,10 +282,10 @@ export default {
 
       // navigate with the arrow up or down keys
       if (event.key === "ArrowDown") {
+        // Check if we are focusing on the Finish Review button
         if (this.count >= annotations.length) {
-          const finishBtn = Array.from(
-            document.getElementsByClassName("finish-review-btn")
-          );
+          const finishBtn = this.createArray("finish-review-btn");
+
           finishBtn[0].focus();
           this.$store.dispatch("document/resetEditAnnotation");
           this.count = 0;
@@ -263,12 +303,24 @@ export default {
           this.count = currentAnnIndex + 1;
         }
 
-        annotations[this.count].click();
+        const nextElement = annotations[this.count];
+        if (nextElement.className.includes("label-group")) {
+          // open group and then click on annotation
+          // index is the same since group is removed from keyboard nav
+          nextElement.click();
+          this.$nextTick(() => {
+            annotations = this.createArray("keyboard-nav");
+            annotations[this.count].click();
+            this.scrollToFocusedAnnotationFromKeyHandler();
+            this.count++;
+          });
+        } else if (annotations[this.count]) {
+          annotations[this.count].click();
+          this.scrollToFocusedAnnotationFromKeyHandler();
+          this.count++;
+        }
 
         // scroll to current annotation if not empty
-        this.scrollToFocusedAnnotationFromKeyHandler();
-
-        this.count++;
       } else if (event.key === "ArrowUp") {
         // Check if the event happened on the first element from the array
         // If so, reset count to 0
@@ -285,12 +337,27 @@ export default {
           this.count = currentAnnIndex - 1;
         }
 
-        annotations[this.count].click();
-
-        // scroll to current annotation if not empty
-        this.scrollToFocusedAnnotationFromKeyHandler();
-
-        this.count--;
+        const previousElement = annotations[this.count];
+        if (previousElement.className.includes("label-group")) {
+          // open group and then click on annotation
+          // index is the same since group is removed from keyboard nav
+          previousElement.click();
+          this.$nextTick(() => {
+            annotations = this.createArray("keyboard-nav");
+            // since we are going backwards, we need to go to the last annotation of group
+            const currentAnnIndex = annotations.findIndex(
+              (el) => el === clickedAnnotations[0]
+            );
+            this.count = currentAnnIndex - 1;
+            annotations[this.count].click();
+            this.scrollToFocusedAnnotationFromKeyHandler();
+            this.count--;
+          });
+        } else if (annotations[this.count]) {
+          annotations[this.count].click();
+          this.scrollToFocusedAnnotationFromKeyHandler();
+          this.count--;
+        }
       } else {
         // Check for ENTER or DELETE
         // Accept annotation
@@ -311,9 +378,9 @@ export default {
           annotations[currentAnnIndex].className.includes("label-empty") &&
           annotations[currentAnnIndex].className.includes("clicked")
         ) {
-          // Reject annotation
+          // Mark annotation as missing
           if (this.editAnnotation.id === annotations[currentAnnIndex].id) {
-            this.rejectMissingAnnotations();
+            this.markAnnotationsAsMissing();
           }
           this.jumpToNextAnnotation = true;
         } else {
@@ -322,45 +389,13 @@ export default {
       }
     },
 
-    labelNotRejected(annotationSet, label) {
-      // Check if the combined label and label set have been rejected
-      // or if the document is in public mode
-      if (
-        this.missingAnnotations.length === 0 ||
-        !this.showMissingAnnotations()
-      ) {
-        return true;
-      } else {
-        let found;
-
-        if (annotationSet && annotationSet.id) {
-          found = this.missingAnnotations.filter(
-            (el) =>
-              el.label === label.id && el.annotation_set === annotationSet.id
-          );
-        } else {
-          found = this.missingAnnotations.filter(
-            (el) =>
-              el.label === label.id &&
-              el.label_set === annotationSet.label_set.id
-          );
-        }
-
-        if (found.length !== 0) {
-          return false;
-        } else {
-          return true;
-        }
-      }
-    },
-
-    rejectMissingAnnotations(label, labelSet, annotationSet, rejectAll) {
-      let rejected;
+    markAnnotationsAsMissing(label, labelSet, annotationSet, markAllMissing) {
+      let missing;
 
-      if (label && labelSet && !rejectAll) {
-        // if single rejection is triggered by clicking the button
+      if (label && labelSet && !markAllMissing) {
+        // if annotation is marked as missing by clicking the button
 
-        rejected = [
+        missing = [
           {
             document: parseInt(this.documentId),
             label: label,
@@ -369,24 +404,26 @@ export default {
           },
         ];
       } else if (this.editAnnotation && this.editAnnotation.id !== null) {
-        // if single rejection is triggered from "delete" key
+        // if annotation is marked as missing from "delete" key
 
-        rejected = {
-          document: parseInt(this.documentId),
-          label: this.editAnnotation.label,
-          label_set: this.editAnnotation.labelSet,
-          annotation_set: this.editAnnotation.annotationSet,
-        };
-      } else if (annotationSet && rejectAll) {
-        // reject all labels in annotation set
+        missing = [
+          {
+            document: parseInt(this.documentId),
+            label: this.editAnnotation.label,
+            label_set: this.editAnnotation.labelSet,
+            annotation_set: this.editAnnotation.annotationSet,
+          },
+        ];
+      } else if (annotationSet && markAllMissing) {
+        // mark all annotations as missing in annotation set
 
         const allEmptyLabels = annotationSet.labels.filter(
           (label) => label.annotations.length === 0
         );
 
-        // Check if any of the empty annotations was already rejected individually
+        // Check if any of the empty annotations was already marked as missing individually
         // and remove them
-        const toReject = [];
+        const toMarkAsMissing = [];
 
         allEmptyLabels.map((label) => {
           const found = this.missingAnnotations.find(
@@ -397,11 +434,11 @@ export default {
           );
 
           if (!found) {
-            toReject.push(label);
+            toMarkAsMissing.push(label);
           }
         });
 
-        rejected = toReject.map((label) => {
+        missing = toMarkAsMissing.map((label) => {
           return {
             document: parseInt(this.documentId),
             label: label.id,
@@ -411,10 +448,10 @@ export default {
         });
       }
 
-      this.$store.dispatch("document/setRejectedMissingAnnotations", rejected);
+      this.$store.dispatch("document/setAnnotationsMarkedAsMissing", missing);
 
       this.$store
-        .dispatch("document/addMissingAnnotations", rejected)
+        .dispatch("document/addMissingAnnotations", missing)
         .then((response) => {
           if (response) {
             this.jumpToNextAnnotation = true;
@@ -430,7 +467,9 @@ export default {
           });
         })
         .finally(() => {
-          this.$store.dispatch("document/setRejectedMissingAnnotations", null);
+          this.$store.dispatch("document/setAnnotationsMarkedAsMissing", null);
+          this.$store.dispatch("document/resetEditAnnotation");
+          this.$store.dispatch("selection/disableSelection");
         });
     },
 
@@ -449,7 +488,7 @@ export default {
       this.$store.dispatch("document/setHoveredAnnotationSet", hovered);
     },
 
-    acceptGroup(annotationSet) {
+    acceptPendingAnnotationsInAnnotationSet(annotationSet) {
       const annotationsToAccept = [];
 
       annotationSet.labels.map((label) => {
@@ -480,6 +519,16 @@ export default {
           });
       }
     },
+
+    openAnnotationSetTable(tableSet) {
+      this.$store.dispatch("selection/disableSelection");
+      this.$store.dispatch("document/resetEditAnnotation");
+      if (this.showAnnSetTable && this.showAnnSetTable === tableSet) {
+        this.$store.dispatch("display/toggleAnnSetTable", tableSet);
+      } else {
+        this.$store.dispatch("display/showAnnSetTable", tableSet);
+      }
+    },
   },
 };
 </script>

package/src/components/DocumentAnnotations/DocumentLabel.vue

@@ -1,7 +1,10 @@
 <template>
   <div class="label">
-    <div v-if="enableGroupingFeature && isMultipleAnnotations">
-      <div class="label-group" @click.stop="toggleGroup">
+    <div v-if="enableGroupingFeature && nonMultipleAnnotationsExtracted">
+      <div
+        :class="['label-group', !showAnnotationsGroup && 'keyboard-nav']"
+        @click.stop="toggleGroup"
+      >
         <div class="label-group-left">
           <b-icon
             :icon="showAnnotationsGroup ? 'angle-up' : 'angle-down'"
@@ -12,14 +15,14 @@
           </div>
         </div>
         <div class="label-group-right">
-          <div class="label-annotations-pending">
+          <div v-if="!publicView" class="label-annotations-pending" >
             {{
               `${
                 label.annotations.length - acceptedAnnotationsGroupCounter
               } ${$t("annotations_pending")}`
             }}
           </div>
-          <div class="label-annotations-accepted">
+          <div v-if="!publicView" class="label-annotations-accepted">
             {{
               `${acceptedAnnotationsGroupCounter} ${$t("annotations_accepted")}`
             }}
@@ -36,7 +39,7 @@
         />
       </div>
     </div>
-    <div v-else-if="!enableGroupingFeature && hasAnnotations">
+    <div v-else-if="hasAnnotations">
       <AnnotationRow
         v-for="annotation in label.annotations"
         :key="annotation.id"
@@ -66,15 +69,17 @@ export default {
   components: { AnnotationRow },
   props: {
     label: {
+      type: Object,
       required: true,
     },
     annotationSet: {
+      type: Object,
       required: true,
     },
   },
   data() {
     return {
-      isMultipleAnnotations: false,
+      nonMultipleAnnotationsExtracted: false,
       acceptedAnnotationsGroupCounter: 0,
       showAnnotationsGroup: false,
     };
@@ -83,6 +88,8 @@ export default {
     ...mapState("document", [
       "sidebarAnnotationSelected",
       "enableGroupingFeature",
+      "hoveredAnnotationSet",
+      "publicView",
     ]),
     ...mapGetters("document", ["numberOfAcceptedAnnotationsInLabel"]),
     singleAnnotation() {
@@ -103,9 +110,18 @@ export default {
         !this.showAnnotationsGroup &&
         newSidebarAnnotationSelected
       ) {
+        let annotationSelected;
+
+        if (newSidebarAnnotationSelected.annotation) {
+          annotationSelected = newSidebarAnnotationSelected.annotation;
+        } else {
+          annotationSelected = newSidebarAnnotationSelected;
+        }
+
         const annotation = this.label.annotations.find(
-          (ann) => ann.id === newSidebarAnnotationSelected.id
+          (ann) => ann.id === annotationSelected.id
         );
+
         if (annotation) {
           this.showAnnotationsGroup = true;
           this.$store.dispatch("document/setSidebarAnnotationSelected", null);
@@ -119,6 +135,16 @@ export default {
         }
       }
     },
+    hoveredAnnotationSet(newValue) {
+      // Check if there are some unrevised Annotations within the group
+      if (
+        newValue &&
+        newValue.type === "accept" &&
+        this.labelHasPendingAnnotations(newValue)
+      ) {
+        this.showAnnotationsGroup = true;
+      }
+    },
   },
   mounted() {
     this.updateValues();
@@ -131,12 +157,23 @@ export default {
       this.showAnnotationsGroup = !this.showAnnotationsGroup;
     },
     updateValues() {
-      this.isMultipleAnnotations = this.label.annotations.length > 1;
-      if (this.isMultipleAnnotations) {
+      // more than 1 Annotation extracted for a non multiple Label
+      this.nonMultipleAnnotationsExtracted =
+        this.label.annotations.length > 1 &&
+        !this.label.has_multiple_top_candidates;
+
+      if (this.nonMultipleAnnotationsExtracted) {
         this.acceptedAnnotationsGroupCounter =
           this.numberOfAcceptedAnnotationsInLabel(this.label);
       }
     },
+    labelHasPendingAnnotations(hoveredSet) {
+      if (!hoveredSet) return;
+
+      const found = this.label.annotations.find((ann) => !ann.revised);
+
+      return this.annotationSet.id === hoveredSet.annotationSet.id && found;
+    },
   },
 };
 </script>