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

package/src/components/DocumentAnnotations/DocumentAnnotations.vue

@@ -14,20 +14,39 @@
 
     <!-- When there's no annotations in the label -->
     <div v-else-if="annotationSets.length === 0">
-      <CategorizeModal v-if="!publicView" />
+      <CategorizeModal
+        v-if="!publicView && !waitingForSplittingConfirmation(selectedDocument)"
+      />
       <EmptyState />
     </div>
 
-    <div
-      v-else
-      :class="[
-        'annotation-set-list',
-        missingAnnotations.length && !publicView && 'showing-rejected',
-      ]"
-    >
+    <div v-else :class="['annotation-set-list']">
       <CategorizeModal v-if="!publicView" />
       <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 +59,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)
               "
-              @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')
               "
@@ -61,35 +87,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 +117,11 @@ export default {
   components: {
     EmptyState,
     ExtractingData,
-    ActionButtons,
+    AnnotationSetActionButtons,
     DocumentLabel,
-    RejectedLabels,
     LoadingAnnotations,
     CategorizeModal,
+    GridIcon,
   },
   data() {
     return {
@@ -112,6 +131,7 @@ export default {
     };
   },
   computed: {
+    ...mapState("display", ["showAnnSetTable"]),
     ...mapState("document", [
       "documentId",
       "recalculatingAnnotations",
@@ -123,9 +143,17 @@ export default {
       "loading",
       "labels",
       "selectedDocument",
+      "splittingSuggestions",
     ]),
     ...mapGetters("category", ["category"]),
-    ...mapGetters("document", ["numberOfAnnotationSetGroup"]),
+    ...mapGetters("document", [
+      "numberOfAnnotationSetGroup",
+      "emptyLabelsLength",
+      "annotationsWithPendingReviewLength",
+      "waitingForSplittingConfirmation",
+      "annotationSetsToShowInList",
+      "annotationSetsInTable",
+    ]),
     isAnnotationBeingEdited() {
       return this.editAnnotation && this.editAnnotation.id;
     },
@@ -263,6 +291,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 +325,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 +363,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 +374,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 +393,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 +421,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 +435,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 +454,7 @@ export default {
           });
         })
         .finally(() => {
-          this.$store.dispatch("document/setRejectedMissingAnnotations", null);
+          this.$store.dispatch("document/setAnnotationsMarkedAsMissing", null);
         });
     },
 
@@ -449,7 +473,7 @@ export default {
       this.$store.dispatch("document/setHoveredAnnotationSet", hovered);
     },
 
-    acceptGroup(annotationSet) {
+    acceptPendingAnnotationsInAnnotationSet(annotationSet) {
       const annotationsToAccept = [];
 
       annotationSet.labels.map((label) => {
@@ -480,6 +504,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

@@ -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"]),
@@ -133,6 +141,7 @@ export default {
       }
     },
   },
+
   methods: {
     emptyAnnotationId() {
       if (!this.annotationSet || !this.label) return;
@@ -147,7 +156,11 @@ export default {
       return this.isAnnotationInEditMode(this.emptyAnnotationId());
     },
     handleEditEmptyAnnotation() {
-      if (this.publicView) return;
+      if (
+        this.publicView ||
+        this.annotationIsNotFound(this.annotationSet, this.label)
+      )
+        return;
 
       if (
         !this.publicView &&
@@ -190,8 +203,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 {

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) {

package/src/components/DocumentDashboard.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="dashboard">
     <DocumentTopBar />
-    <div :class="['dashboard-viewer', editMode ? 'edit-mode' : '']">
+    <div :class="['dashboard-viewer', splitOverview ? 'edit-mode' : '']">
       <DocumentThumbnails v-if="!editMode" ref="documentPages" />
       <ScrollingDocument ref="scrollingDocument" class="dashboard-document" />
       <DocumentAnnotations v-if="!editMode" ref="annotations" />
@@ -18,7 +18,7 @@
       </transition>
     </div>
     <div v-if="showDocumentError" class="error-modal">
-      <DocumentError />
+      <DocumentErrorModal />
     </div>
     <div v-if="!optimalResolution" class="not-optimized">
       <NotOptimizedViewportModal />
@@ -28,6 +28,13 @@
         {{ $t("resolution_not_supported") }}
       </div>
     </div>
+    <div
+      v-if="
+        selectedDocument && waitingForSplittingConfirmation(selectedDocument)
+      "
+    >
+      <SplittingSuggestionsModal />
+    </div>
   </div>
 </template>
 
@@ -39,8 +46,9 @@ import { DocumentThumbnails } from "./DocumentThumbnails";
 import { DocumentAnnotations } from "./DocumentAnnotations";
 import { DocumentEdit } from "./DocumentEdit";
 import ErrorMessage from "./ErrorMessage";
-import NotOptimizedViewportModal from "./NotOptimizedViewportModal";
-import DocumentError from "./DocumentError";
+import NotOptimizedViewportModal from "../components/DocumentModals/NotOptimizedViewportModal";
+import DocumentErrorModal from "../components/DocumentModals/DocumentErrorModal";
+import SplittingSuggestionsModal from "../components/DocumentModals/SplittingSuggestionsModal";
 
 /**
  * This component shows the PDF pages in a scrolling component and
@@ -56,7 +64,8 @@ export default {
     DocumentEdit,
     ErrorMessage,
     NotOptimizedViewportModal,
-    DocumentError,
+    DocumentErrorModal,
+    SplittingSuggestionsModal,
   },
   data() {
     return {
@@ -77,9 +86,11 @@ export default {
       "showDocumentError",
       "errorMessageWidth",
       "selectedDocument",
+      "splittingSuggestions",
     ]),
-    ...mapState("edit", ["editMode"]),
+    ...mapState("edit", ["editMode", "splitOverview"]),
     ...mapGetters("display", ["isMinimumWidth"]),
+    ...mapGetters("document", ["waitingForSplittingConfirmation"]),
   },
   watch: {
     selectedDocument(newDocument, oldDocument) {