@konfuzio/document-validation-ui 0.1.12-dev.0 → 0.1.12-dev.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@konfuzio/document-validation-ui",
-  "version": "0.1.12-dev.0",
+  "version": "0.1.12-dev.2",
   "repository": "git://github.com:konfuzio-ai/document-validation-ui.git",
   "main": "dist/app.js",
   "scripts": {

package/src/assets/scss/document_annotations.scss

@@ -253,7 +253,7 @@
                 font-size: 14px;
                 color: $primary;
 
-                &.clicked {
+                &.clicked-ann {
                   font-weight: 400;
                   color: $text-lighter;
                 }

package/src/components/DocumentAnnotations/AnnotationContent.vue

@@ -6,12 +6,13 @@
       ref="contentEditable"
       :class="[
         'annotation-value',
+        'keyboard-nav',
         isLoading && 'saving-changes',
         showActionError &&
           editAnnotation &&
           editAnnotation.id === annotation.id &&
           'error-editing',
-        isAnnotationBeingEdited && 'clicked',
+        isAnnotationBeingEdited && 'clicked-ann',
       ]"
       role="textbox"
       :contenteditable="isAnnotationBeingEdited"
@@ -84,22 +85,10 @@ export default {
   },
 
   watch: {
-    editAnnotation(newAnnotation, oldAnnotation) {
+    isAnnotationBeingEdited(newState, oldState) {
       // verify if new annotation in edit mode is not this one and if this
       // one was selected before so we set the state to the previous one (like a cancel)
-
-      if (
-        !newAnnotation &&
-        oldAnnotation &&
-        oldAnnotation.id === this.annotation.id
-      ) {
-        this.handleCancel(true);
-      } else if (
-        newAnnotation &&
-        oldAnnotation &&
-        newAnnotation.id === this.annotation.id &&
-        newAnnotation.id !== oldAnnotation.id
-      ) {
+      if (!newState && oldState) {
         this.handleCancel();
       }
     },
@@ -170,14 +159,8 @@ export default {
         }
       }
     },
-    handleCancel(wasOutsideClick = false) {
-      if (wasOutsideClick) {
-        this.setText(this.span.offset_string);
-      } else {
-        this.$store.dispatch("selection/disableSelection");
-        this.$store.dispatch("document/endLoading");
-      }
-
+    handleCancel() {
+      this.setText(this.span.offset_string);
       this.isLoading = false;
       if (this.$refs.contentEditable) {
         this.$refs.contentEditable.blur();

package/src/components/DocumentAnnotations/AnnotationRow.vue

@@ -352,12 +352,8 @@ export default {
           return label.annotations;
         });
 
-      // Check if there are no annotations OR if there are annotations for the same label (grouped)
-      if (
-        annotations.length === 0 ||
-        (this.label.annotations.length > 1 && this.enableGroupingFeature)
-      )
-        return;
+      // Check if there are no annotations
+      if (annotations.length === 0) return;
 
       const found = annotations.find(
         (ann) => ann.id === this.annotation.id && !ann.revised

package/src/components/DocumentAnnotations/DocumentAnnotations.vue

@@ -17,7 +17,7 @@
       <EmptyState />
     </div>
 
-    <div v-else :class="['annotation-set-list']">
+    <div v-else ref="annotationList" :class="['annotation-set-list']">
       <div
         v-if="Object.entries(annotationSetsInTable()).length > 0"
         class="annotation-set-group"
@@ -162,7 +162,6 @@ export default {
       }
     },
     acceptAnnotation(newValue, oldValue) {
-      // TODO: rework this to be more generic
       if (!newValue && oldValue) {
         this.focusOnNextAnnotation();
         this.jumpToNextAnnotation = false;
@@ -177,9 +176,8 @@ export default {
   },
   methods: {
     focusOnNextAnnotation() {
-      const annotations = Array.from(
-        document.getElementsByClassName("annotation-value")
-      );
+      const annotations = this.createArray("keyboard-nav");
+
       if (annotations[this.count]) {
         annotations[this.count].click();
       } else {
@@ -221,31 +219,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 || 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(
@@ -254,10 +257,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;
@@ -275,24 +278,24 @@ export default {
           this.count = currentAnnIndex + 1;
         }
 
-        // Skip missing annotations
-        if (this.focusedAnnotationIsMarkedAsMissing(annotations, this.count)) {
-          for (let i = this.count; i < annotations.length; i++) {
-            if (!this.focusedAnnotationIsMarkedAsMissing(annotations, i)) {
-              break;
-            }
+        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++;
         }
 
-        if (!annotations[this.count]) return;
-
-        annotations[this.count].click();
-
         // 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
@@ -309,24 +312,27 @@ export default {
           this.count = currentAnnIndex - 1;
         }
 
-        // Skip missing annotations
-        if (this.focusedAnnotationIsMarkedAsMissing(annotations, this.count)) {
-          for (let i = this.count; i < annotations.length; i--) {
-            if (!this.focusedAnnotationIsMarkedAsMissing(annotations, i)) {
-              break;
-            }
+        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--;
         }
-
-        if (!annotations[this.count]) return;
-
-        annotations[this.count].click();
-
-        // scroll to current annotation if not empty
-        this.scrollToFocusedAnnotationFromKeyHandler();
-
-        this.count--;
       } else {
         // Check for ENTER or DELETE
         // Accept annotation
@@ -358,10 +364,6 @@ export default {
       }
     },
 
-    focusedAnnotationIsMarkedAsMissing(annotations, index) {
-      return annotations[index].classList.value.includes("missing-annotation");
-    },
-
     markAnnotationsAsMissing(label, labelSet, annotationSet, markAllMissing) {
       let missing;
 

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'"
@@ -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"
@@ -76,7 +79,7 @@ export default {
   },
   data() {
     return {
-      isMultipleAnnotations: false,
+      nonMultipleAnnotationsExtracted: false,
       acceptedAnnotationsGroupCounter: 0,
       showAnnotationsGroup: false,
     };
@@ -85,6 +88,7 @@ export default {
     ...mapState("document", [
       "sidebarAnnotationSelected",
       "enableGroupingFeature",
+      "hoveredAnnotationSet",
     ]),
     ...mapGetters("document", ["numberOfAcceptedAnnotationsInLabel"]),
     singleAnnotation() {
@@ -121,6 +125,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();
@@ -133,12 +147,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>

package/src/components/DocumentAnnotations/EmptyAnnotation.vue

@@ -11,8 +11,9 @@
           editAnnotation.id === emptyAnnotationId() &&
           'error-editing',
         !isEmptyAnnotationEditable() && !isMissingAnnotation && 'label-empty',
-        isAnnotationBeingEdited() && 'clicked',
+        isAnnotationBeingEdited() && 'clicked-ann',
         isMissingAnnotation && 'missing-annotation',
+        !isMissingAnnotation && 'keyboard-nav',
       ]"
       :contenteditable="isEmptyAnnotationEditable()"
       @keypress.enter="saveEmptyAnnotationChanges"

package/src/components/DocumentCategory.vue

@@ -104,6 +104,33 @@ export default {
       if (!this.splitMode) {
         return this.categoryName(this.selectedDocument.category);
       } else {
+        const missingCategory = this.updatedDocument.find(
+          (item) => !item.category
+        );
+
+        // if there is just 1 category in the project,
+        // and one or more sub-documents has no category,
+        // assign the only category by default
+        if (this.projectHasSingleCategory() && missingCategory) {
+          const updatedValuesForDocuments = this.updatedDocument.map(
+            (document) => {
+              if (!document.category && this.categories) {
+                document.category = this.categories[0].id;
+              }
+
+              return document;
+            }
+          );
+
+          // update the store state
+          // so that if the changes are saved the data sent to the API is updated
+          // instead of only handling the category name in this component
+          this.$store.dispatch(
+            "edit/setUpdatedDocument",
+            updatedValuesForDocuments
+          );
+        }
+
         const categoryName = this.categoryName(
           this.updatedDocument[this.index].category
         );

package/src/components/DocumentModals/DocumentErrorModal.vue

@@ -1,14 +1,16 @@
 <template>
   <section class="document-error-modal">
-    <b-modal v-model="isModalActive" :width="400">
+    <b-modal
+      v-model="isModalActive"
+      :width="400"
+      can-cancel="['x']"
+      :on-cancel="closeModal"
+    >
       <section class="modal-card-body">
         <div class="header">
           <div class="error-icon">
             <ErrorIcon class="icon" />
           </div>
-          <div class="btn-container" type="button" @click="closeModal">
-            <b-icon icon="xmark" class="close-btn" size="is-small" />
-          </div>
         </div>
         <div class="content">
           <h3>{{ $t("document_error_title") }}</h3>

package/src/components/DocumentPage/NewAnnotation.vue

@@ -127,7 +127,7 @@ const margin = 12;
 const widthOfPopup = 205;
 
 import { mapGetters, mapState } from "vuex";
-import { ChooseLabelSetModal } from "../DocumentAnnotations";
+import { MULTI_ANN_TABLE_FEATURE } from "../../constants";
 
 export default {
   props: {
@@ -271,7 +271,7 @@ export default {
     openAnnotationSetCreation() {
       this.$store.dispatch("display/showChooseLabelSetModal", {
         show: true,
-        isMultipleAnnotations: true,
+        isMultipleAnnotations: MULTI_ANN_TABLE_FEATURE,
         finish: this.chooseLabelSet,
       });
     },

package/src/store/document.js

@@ -34,6 +34,7 @@ const state = {
   newAcceptedAnnotations: null,
   serverError: false,
   splittingSuggestions: null,
+  enableGroupingFeature: true,
 };
 
 const getters = {
@@ -247,14 +248,11 @@ const getters = {
     const labels = [];
     const processedAnnotationSets = annotationSets.map((annotationSet) => {
       const annotationSetLabels = annotationSet.labels.map((label) => {
-        // filter label
-        const filteredLabel = getters.annotationsInLabelFiltered(label);
-
         // add annotations to the document array
-        annotations.push(...filteredLabel.annotations);
-        labels.push(filteredLabel);
+        annotations.push(...label.annotations);
+        labels.push(label);
         // add labels to the labels array
-        return filteredLabel;
+        return label;
       });
       annotationSet.labels = annotationSetLabels;
       return annotationSet;
@@ -475,12 +473,12 @@ const getters = {
           annotationsWithPendingReview.push(annotation);
         });
       }
-    });
 
-    // Check if we have grouped annotations by same label
-    if (state.enableGroupingFeature && label.annotations.length < 2) {
-      return annotationsWithPendingReview.length - label.annotations.length;
-    }
+      // Check if we have grouped annotations by same label
+      if (state.enableGroupingFeature && label.annotations.length < 2) {
+        return annotationsWithPendingReview.length - label.annotations.length;
+      }
+    });
 
     return annotationsWithPendingReview.length;
   },