@konfuzio/document-validation-ui 0.1.5 → 0.1.6-multi-ann-set-2

package/src/components/DocumentAnnotations/AnnotationSetActionButtons.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="action-buttons">
+    <!-- mark all empty labels as missing -->
+    <div
+      v-if="!publicView && !documentIsReviewed"
+      class="missing-decline-button-container all-missing"
+      @mouseenter="mouseenterAnnotationSet('missing')"
+      @mouseleave="mouseleaveAnnotationSet"
+    >
+      <b-button
+        type="is-ghost"
+        class="missing-decline-btn missing-btn all-missing-btn"
+        :disabled="numberOfEmptyLabelsInAnnotationSet === 0"
+        @click.stop="markAllAsMissing"
+      >
+        {{ $t("mark_all_missing") }} ({{ numberOfEmptyLabelsInAnnotationSet }})
+      </b-button>
+    </div>
+
+    <!-- accept all pending annotations -->
+    <div
+      v-if="!publicView && !documentIsReviewed"
+      class="accept-all"
+      @mouseenter="mouseenterAnnotationSet('accept')"
+      @mouseleave="mouseleaveAnnotationSet"
+    >
+      <b-button
+        type="is-primary"
+        class="accept-all-btn"
+        :disabled="numberOfPendingAnnotationsInAnnotationSet === 0"
+        @click.stop="acceptAllPending"
+      >
+        {{ $t("accept_group") }} ({{
+          numberOfPendingAnnotationsInAnnotationSet
+        }})
+      </b-button>
+    </div>
+  </div>
+</template>
+<script>
+/* Component for showing actions for each Annotation Set */
+
+import { mapState } from "vuex";
+
+export default {
+  name: "AnnotationSetActionButtons",
+  props: {
+    numberOfEmptyLabelsInAnnotationSet: {
+      type: Number,
+    },
+    numberOfPendingAnnotationsInAnnotationSet: {
+      type: Number,
+    },
+  },
+  computed: {
+    ...mapState("document", ["publicView", "documentIsReviewed"]),
+  },
+  methods: {
+    mouseenterAnnotationSet(type) {
+      if (type == "missing") {
+        this.$emit("hover-annotation-set-to-mark-missing");
+      }
+
+      if (type == "accept") {
+        this.$emit("hover-annotation-set-to-accept");
+      }
+    },
+    mouseleaveAnnotationSet() {
+      this.$emit("leave-annotation-set-to-accept");
+      this.$emit("leave-annotation-set-to-mark-missing");
+    },
+    markAllAsMissing() {
+      this.$emit("mark-all-empty-missing");
+    },
+    acceptAllPending() {
+      this.$emit("accept-all-pending-annotations");
+    },
+  },
+};
+</script>
+
+<style
+  scoped
+  lang="scss"
+  src="../../assets/scss/document_annotations.scss"
+></style>

package/src/components/DocumentAnnotations/CategorizeModal.vue

@@ -105,9 +105,20 @@ export default {
   },
   computed: {
     ...mapState("category", ["categories"]),
-    ...mapState("document", ["selectedDocument"]),
+    ...mapState("document", [
+      "selectedDocument",
+      "categorizeModalIsActive",
+      "splittingSuggestions",
+      "publicView",
+      "documentIsReviewed",
+    ]),
     ...mapGetters("category", ["category", "projectHasSingleCategory"]),
     ...mapGetters("document", ["categorizationIsConfirmed"]),
+
+    singleCategoryInProject() {
+      // if only 1 category in the project, we don't enable the dropdown
+      return this.categories && this.categories.length === 1;
+    },
   },
   watch: {
     selectedDocument(newValue) {
@@ -127,6 +138,13 @@ export default {
     show(newValue) {
       this.$store.dispatch("display/setCategorizeModalIsActive", newValue);
     },
+    categorizeModalIsActive(newValue) {
+      // Show modal after split suggestion modal
+      // if no category confirmed
+      if (newValue) {
+        this.show = newValue && !this.categorizationIsConfirmed;
+      }
+    },
   },
   mounted() {
     this.setDocumentValues();
@@ -159,7 +177,15 @@ export default {
         }
 
         this.selectedCategory = category;
-        this.show = !this.categorizationIsConfirmed;
+        this.documentCategory = category;
+
+        // By default, if the document has no category, the categorize modal is shown
+        // But if there is a category, we also need to check if there are splitting suggestions or not
+        this.show =
+          (!category || (category && !this.splittingSuggestions)) &&
+          !this.categorizationIsConfirmed &&
+          !this.publicView &&
+          !this.documentIsReviewed;
       }
     },
     canCloseModal() {

package/src/components/DocumentAnnotations/DocumentAnnotations.vue

@@ -14,20 +14,43 @@
 
     <!-- When there's no annotations in the label -->
     <div v-else-if="annotationSets.length === 0">
-      <CategorizeModal v-if="!publicView" />
+      <CategorizeModal
+        v-if="
+          !publicView &&
+          !documentIsReviewed &&
+          !waitingForSplittingConfirmation(selectedDocument)
+        "
+      />
       <EmptyState />
     </div>
 
-    <div
-      v-else
-      :class="[
-        'annotation-set-list',
-        missingAnnotations.length && !publicView && 'showing-rejected',
-      ]"
-    >
-      <CategorizeModal v-if="!publicView" />
+    <div v-else :class="['annotation-set-list']">
+      <CategorizeModal v-if="!publicView || !documentIsReviewed" />
       <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"
       >
@@ -40,18 +63,25 @@
             }}
           </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)
+            <AnnotationSetActionButtons
+              :number-of-empty-labels-in-annotation-set="
+                emptyLabelsLength(annotationSet)
+              "
+              :number-of-pending-annotations-in-annotation-set="
+                annotationsWithPendingReviewLength(annotationSet)
+              "
+              @mark-all-empty-missing="
+                markAnnotationsAsMissing(null, null, annotationSet, true)
               "
-              @hover-annotation-set-to-reject="
-                handleHoverAnnotationSet(annotationSet, 'reject')
+              @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')
               "
@@ -61,35 +91,28 @@
         </div>
 
         <div v-for="label in annotationSet.labels" :key="label.id">
-          <div v-if="labelNotRejected(annotationSet, label)" class="labels">
+          <div class="labels">
             <DocumentLabel
               :label="label"
               :annotation-set="annotationSet"
               :index-group="indexGroup"
-              @handle-reject="rejectMissingAnnotations"
+              @handle-missing-annotation="markAnnotationsAsMissing"
             />
           </div>
         </div>
       </div>
     </div>
-
-    <div
-      v-if="!publicView && missingAnnotations.length"
-      class="rejected-labels-list"
-    >
-      <RejectedLabels :missing-annotations="missingAnnotations" />
-    </div>
   </div>
 </template>
 <script>
 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 +121,11 @@ export default {
   components: {
     EmptyState,
     ExtractingData,
-    ActionButtons,
+    AnnotationSetActionButtons,
     DocumentLabel,
-    RejectedLabels,
     LoadingAnnotations,
     CategorizeModal,
+    GridIcon,
   },
   data() {
     return {
@@ -112,6 +135,7 @@ export default {
     };
   },
   computed: {
+    ...mapState("display", ["showAnnSetTable"]),
     ...mapState("document", [
       "documentId",
       "recalculatingAnnotations",
@@ -123,9 +147,18 @@ export default {
       "loading",
       "labels",
       "selectedDocument",
+      "splittingSuggestions",
+      "documentIsReviewed",
     ]),
     ...mapGetters("category", ["category"]),
-    ...mapGetters("document", ["numberOfAnnotationSetGroup"]),
+    ...mapGetters("document", [
+      "numberOfAnnotationSetGroup",
+      "emptyLabelsLength",
+      "annotationsWithPendingReviewLength",
+      "waitingForSplittingConfirmation",
+      "annotationSetsToShowInList",
+      "annotationSetsInTable",
+    ]),
     isAnnotationBeingEdited() {
       return this.editAnnotation && this.editAnnotation.id;
     },
@@ -151,19 +184,6 @@ 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;
-      }
-    },
-
     focusOnNextAnnotation() {
       const annotations = Array.from(
         document.getElementsByClassName("annotation-value")
@@ -211,7 +231,7 @@ export default {
 
     keyDownHandler(event) {
       // only allow keyboard navigation if we are not in public view mode
-      if (this.publicView) return;
+      if (this.publicView || this.documentIsReviewed) return;
 
       // get out of edit mode and navigation
       if (event.key === "Escape") {
@@ -263,6 +283,18 @@ 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;
+            }
+            this.count++;
+          }
+        }
+
+        if (!annotations[this.count]) return;
+
         annotations[this.count].click();
 
         // scroll to current annotation if not empty
@@ -285,6 +317,18 @@ 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;
+            }
+            this.count--;
+          }
+        }
+
+        if (!annotations[this.count]) return;
+
         annotations[this.count].click();
 
         // scroll to current annotation if not empty
@@ -311,9 +355,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 +366,17 @@ 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;
-        }
-      }
+    focusedAnnotationIsMarkedAsMissing(annotations, index) {
+      return annotations[index].classList.value.includes("missing-annotation");
     },
 
-    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 +385,24 @@ export default {
           },
         ];
       } else if (this.editAnnotation && this.editAnnotation.id !== null) {
-        // if single rejection is triggered from "delete" key
+        // iif annotation is marked as missing from "delete" key
 
-        rejected = {
+        missing = {
           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
+      } 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 +413,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 +427,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 +446,7 @@ export default {
           });
         })
         .finally(() => {
-          this.$store.dispatch("document/setRejectedMissingAnnotations", null);
+          this.$store.dispatch("document/setAnnotationsMarkedAsMissing", null);
         });
     },
 
@@ -449,7 +465,7 @@ export default {
       this.$store.dispatch("document/setHoveredAnnotationSet", hovered);
     },
 
-    acceptGroup(annotationSet) {
+    acceptPendingAnnotationsInAnnotationSet(annotationSet) {
       const annotationsToAccept = [];
 
       annotationSet.labels.map((label) => {
@@ -480,6 +496,14 @@ export default {
           });
       }
     },
+
+    openAnnotationSetTable(tableSet) {
+      if (this.showAnnSetTable && this.showAnnSetTable === tableSet) {
+        this.$store.dispatch("display/toggleAnnSetTable", tableSet);
+      } else {
+        this.$store.dispatch("display/showAnnSetTable", tableSet);
+      }
+    },
   },
 };
 </script>

package/src/components/DocumentAnnotations/EmptyAnnotation.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="empty-annotation">
     <span
-      v-if="!publicView"
+      v-if="!publicView && !documentIsReviewed"
       :id="emptyAnnotationId()"
       ref="emptyAnnotation"
       :class="[
@@ -12,6 +12,7 @@
           'error-editing',
         isEmptyAnnotationEditable() ? '' : 'label-empty',
         isAnnotationBeingEdited() && 'clicked',
+        annotationIsNotFound(annotationSet, label) && 'missing-annotation',
       ]"
       :contenteditable="isEmptyAnnotationEditable()"
       @keypress.enter="saveEmptyAnnotationChanges"
@@ -21,6 +22,12 @@
       <span v-if="span && span.offset_string && isEmptyAnnotationEditable()">
         {{ span.offset_string }}
       </span>
+      <span
+        v-else-if="annotationIsNotFound(annotationSet, label)"
+        class="not-found-text"
+      >
+        {{ $t("missing_from_document") }}
+      </span>
       <span v-else>
         {{ $t("no_data_found") }}
       </span>
@@ -68,6 +75,7 @@ export default {
     ...mapGetters("document", [
       "isAnnotationInEditMode",
       "getTextFromEntities",
+      "annotationIsNotFound",
     ]),
     ...mapGetters("selection", ["isValueArray"]),
     ...mapState("selection", ["spanSelection", "elementSelected"]),
@@ -76,6 +84,7 @@ export default {
       "publicView",
       "selectedEntities",
       "showActionError",
+      "documentIsReviewed",
     ]),
   },
   watch: {
@@ -133,6 +142,7 @@ export default {
       }
     },
   },
+
   methods: {
     emptyAnnotationId() {
       if (!this.annotationSet || !this.label) return;
@@ -147,10 +157,16 @@ export default {
       return this.isAnnotationInEditMode(this.emptyAnnotationId());
     },
     handleEditEmptyAnnotation() {
-      if (this.publicView) return;
+      if (
+        this.publicView ||
+        this.documentIsReviewed ||
+        this.annotationIsNotFound(this.annotationSet, this.label)
+      )
+        return;
 
       if (
         !this.publicView &&
+        !this.documentIsReviewed &&
         !this.isLoading &&
         this.elementSelected !== this.emptyAnnotationId()
       ) {
@@ -190,8 +206,8 @@ export default {
           this.elementSelected === this.emptyAnnotationId() && !this.isLoading
         );
       } else if (
-        this.spanSelection &&
-        this.spanSelection[this.spanIndex] === 0
+        (this.spanSelection && this.spanSelection[this.spanIndex] === 0) ||
+        this.annotationIsNotFound(this.annotationSet, this.label)
       ) {
         return false;
       } else {
@@ -205,7 +221,7 @@ export default {
       }
     },
     saveEmptyAnnotationChanges(event) {
-      if (this.publicView) return;
+      if (this.publicView || this.documentIsReviewed) return;
 
       if (event) {
         event.preventDefault();

package/src/components/DocumentAnnotations/ExtractingData.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="data-extraction-container">
     <div class="loading-container">
-      <ActionButtons
+      <AnnotationActionButtons
         :is-loading="true"
         :save-btn="false"
         :cancel-btn="false"
@@ -19,11 +19,11 @@
   </div>
 </template>
 <script>
-import ActionButtons from "./ActionButtons";
+import AnnotationActionButtons from "./AnnotationActionButtons";
 
 export default {
   name: "ExtractingData",
-  components: { ActionButtons }
+  components: { AnnotationActionButtons },
 };
 </script>
 <style scoped lang="scss" src="../../assets/scss/extracting_data.scss"></style>

package/src/components/DocumentAnnotations/index.js

@@ -3,6 +3,5 @@ export { default as AnnotationContent } from "./AnnotationContent";
 export { default as EmptyAnnotation } from "./EmptyAnnotation";
 export { default as DocumentLabel } from "./DocumentLabel";
 export { default as AnnotationDetails } from "./AnnotationDetails";
-export { default as RejectedLabels } from "./RejectedLabels";
 export { default as ChooseLabelSetModal } from "./ChooseLabelSetModal";
 export { default as AnnotationRow } from "./AnnotationRow";

package/src/components/DocumentCategory.vue

@@ -29,11 +29,7 @@
               {{ $t("category") }}
             </p>
             <div class="category-name">
-              {{
-                !splitMode
-                  ? categoryName(selectedDocument.category)
-                  : categoryName(updatedDocument[index].category)
-              }}
+              {{ setCategoryDefaultText }}
             </div>
           </div>
           <div :class="[!splitMode && 'caret-section']">
@@ -102,6 +98,18 @@ export default {
     ...mapState("document", ["selectedDocument", "annotations"]),
     ...mapState("category", ["categories"]),
     ...mapState("edit", ["editMode", "updatedDocument"]),
+
+    setCategoryDefaultText() {
+      if (!this.splitMode) {
+        return this.categoryName(this.selectedDocument.category);
+      } else {
+        const categoryName = this.categoryName(
+          this.updatedDocument[this.index].category
+        );
+
+        return categoryName ? categoryName : this.$t("choose_category");
+      }
+    },
   },
   watch: {
     categories(newValue) {