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

package/src/components/DocumentAnnotations/AnnotationDetails.vue

@@ -1,10 +1,10 @@
 <template>
   <b-tooltip
     :animated="false"
-    position="is-bottom"
-    class="left-aligned annotation-details"
+    :position="fromTable ? 'is-top' : 'is-bottom'"
+    :class="[!fromTable && 'left-aligned', 'annotation-details']"
   >
-    <div class="label-icon">
+    <div :class="['label-icon', fromTable && 'is-small']">
       <div v-if="created(annotation) || edited(annotation)">
         <div
           v-if="accepted(annotation)"
@@ -28,7 +28,13 @@
         </div>
       </div>
       <div
-        v-else-if="notFound(annotation)"
+        v-else-if="annotationIsNotFound(annotationSet, label)"
+        :class="['annotation-details-icon', animate ? 'animated-ripple' : '']"
+      >
+        <NotFoundIcon />
+      </div>
+      <div
+        v-else-if="notExtracted(annotation)"
         :class="[
           'annotation-details-icon',
           animate ? 'animated-ripple' : '',
@@ -100,7 +106,7 @@
               </div>
             </div>
             <div
-              v-else-if="notFound(annotation)"
+              v-else-if="notExtracted(annotation)"
               :class="[
                 'annotation-details-icon',
                 animate ? 'animated-ripple' : '',
@@ -143,6 +149,7 @@ import AcceptedCheckMark from "../../assets/images/AcceptedCheckMark";
 import QuestionMark from "../../assets/images/QuestionMark";
 import AcceptedUser from "../../assets/images/AcceptedUser";
 import UserIcon from "../../assets/images/UserIcon";
+import NotFoundIcon from "../../assets/images/NotFoundIcon";
 
 export default {
   name: "AnnotationDetails",
@@ -152,6 +159,7 @@ export default {
     AcceptedCheckMark,
     AcceptedUser,
     UserIcon,
+    NotFoundIcon,
   },
   props: {
     description: {
@@ -163,6 +171,18 @@ export default {
       type: Object,
       default: null,
     },
+    annotationSet: {
+      type: Object,
+      default: null,
+    },
+    label: {
+      type: Object,
+      default: null,
+    },
+    fromTable: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
@@ -172,11 +192,12 @@ export default {
   computed: {
     ...mapGetters("document", [
       "confidence",
-      "notFound",
+      "notExtracted",
       "created",
       "edited",
       "accepted",
       "getUser",
+      "annotationIsNotFound",
     ]),
   },
   watch: {
@@ -200,7 +221,7 @@ export default {
   },
   methods: {
     getText() {
-      if (this.notFound(this.annotation)) {
+      if (this.notExtracted(this.annotation)) {
         return this.$t("not_found_in_document");
       } else if (this.created(this.annotation)) {
         return this.getUser(this.annotation)

package/src/components/DocumentAnnotations/AnnotationRow.vue

@@ -3,19 +3,10 @@
     :class="[
       'annotation-row',
       isSelected && 'selected',
+      hoverEmptyLabelRows && 'hovered-empty-labels',
+      hoverPendingAnnotationRows && 'hovered-pending-annotations',
+      annotationIsNotFound(annotationSet, label) && 'missing',
       isAnnotationInEditMode(annotationId()) && 'editing',
-      hoveredAnnotationSet &&
-        hoveredAnnotationSet.type == 'reject' &&
-        annotationSet.id === hoveredAnnotationSet.annotationSet.id &&
-        annotationSet.label_set.id ===
-          hoveredAnnotationSet.annotationSet.label_set.id &&
-        hoveredEmptyLabels() === label.id &&
-        'hovered-empty-labels',
-      hoveredAnnotationSet &&
-        hoveredAnnotationSet.type == 'accept' &&
-        annotation &&
-        hoveredPendingAnnotations() === annotation.id &&
-        'hovered-pending-annotations',
     ]"
     @click="onAnnotationClick"
     @mouseover="hoveredAnnotation = annotationId()"
@@ -26,11 +17,23 @@
       @mouseenter="onAnnotationHoverEnter(defaultSpan)"
       @mouseleave="onAnnotationHoverLeave"
     >
-      <AnnotationDetails
-        :description="label.description"
-        :annotation="annotation"
-      />
-      <div class="label-name">
+      <div class="annotation-icon">
+        <AnnotationDetails
+          :description="label.description"
+          :annotation="annotation"
+          :annotation-set="annotationSet"
+          :label="label"
+          :from-table="fromTable"
+        />
+      </div>
+
+      <div
+        v-if="showLabel"
+        :class="[
+          'label-name',
+          annotationIsNotFound(annotationSet, label) && 'not-found-text',
+        ]"
+      >
         <span>{{ label.name }} </span>
       </div>
     </div>
@@ -81,19 +84,21 @@
           />
         </div>
       </div>
-      <div class="buttons-container">
-        <ActionButtons
+      <div v-if="showButtons" class="buttons-container">
+        <AnnotationActionButtons
           :cancel-btn="showCancelButton()"
-          :accept-btn="showAcceptAndDeclineButtons()"
-          :decline-btn="showAcceptAndDeclineButtons()"
-          :show-reject="showRejectButton()"
+          :accept-btn="showAcceptButton()"
+          :decline-btn="showDeclineButton()"
+          :show-missing-btn="showMissingButton()"
           :save-btn="showSaveButton()"
+          :restore-btn="showRestoreButton()"
           :is-loading="isLoading"
-          @reject="handleReject()"
+          @mark-as-missing="handleMissingAnnotation()"
           @save="handleSaveChanges()"
           @accept="handleSaveChanges()"
           @decline="handleSaveChanges(true)"
           @cancel="handleCancelButton()"
+          @restore="handleRestore()"
         />
       </div>
     </div>
@@ -104,7 +109,7 @@ import { mapGetters, mapState } from "vuex";
 import AnnotationDetails from "./AnnotationDetails";
 import AnnotationContent from "./AnnotationContent";
 import EmptyAnnotation from "./EmptyAnnotation";
-import ActionButtons from "./ActionButtons";
+import AnnotationActionButtons from "./AnnotationActionButtons";
 
 export default {
   name: "AnnotationRow",
@@ -112,7 +117,7 @@ export default {
     AnnotationDetails,
     AnnotationContent,
     EmptyAnnotation,
-    ActionButtons,
+    AnnotationActionButtons,
   },
   props: {
     annotationSet: {
@@ -127,6 +132,26 @@ export default {
       type: Object,
       default: null,
     },
+    showLabel: {
+      type: Boolean,
+      default: true,
+    },
+    showButtons: {
+      type: Boolean,
+      default: true,
+    },
+    isSmall: {
+      type: Boolean,
+      default: false,
+    },
+    showHover: {
+      type: Boolean,
+      default: true,
+    },
+    fromTable: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
@@ -147,12 +172,16 @@ export default {
       "publicView",
       "selectedEntities",
       "newAcceptedAnnotations",
-      "rejectedMissingAnnotations",
+      "annotationsMarkedAsMissing",
       "documentId",
       "showActionError",
+      "missingAnnotations",
     ]),
     ...mapState("selection", ["spanSelection", "elementSelected"]),
-    ...mapGetters("document", ["isAnnotationInEditMode"]),
+    ...mapGetters("document", [
+      "isAnnotationInEditMode",
+      "annotationIsNotFound",
+    ]),
     ...mapGetters("selection", ["isValueArray"]),
     defaultSpan() {
       if (
@@ -185,6 +214,25 @@ export default {
         )
       );
     },
+    hoverEmptyLabelRows() {
+      return (
+        this.hoveredAnnotationSet &&
+        this.hoveredAnnotationSet.type == "missing" &&
+        !this.annotationIsNotFound(this.annotationSet, this.label) &&
+        this.annotationSet.id === this.hoveredAnnotationSet.annotationSet.id &&
+        this.annotationSet.label_set.id ===
+          this.hoveredAnnotationSet.annotationSet.label_set.id &&
+        this.hoveredEmptyLabels() === this.label.id
+      );
+    },
+    hoverPendingAnnotationRows() {
+      return (
+        this.hoveredAnnotationSet &&
+        this.hoveredAnnotationSet.type == "accept" &&
+        this.annotation &&
+        this.hoveredPendingAnnotations() === this.annotation.id
+      );
+    },
   },
   watch: {
     sidebarAnnotationSelected(newSidebarAnnotationSelected) {
@@ -224,7 +272,7 @@ export default {
         this.isLoading = false;
       }
     },
-    rejectedMissingAnnotations(newValue) {
+    annotationsMarkedAsMissing(newValue) {
       if (newValue) {
         this.enableLoading();
       } else {
@@ -256,7 +304,7 @@ export default {
       if (span) {
         this.$store.dispatch("document/setDocumentAnnotationSelected", {
           annotation: this.annotation,
-          label: this.label,
+          label: this.fromTable ? null : this.label,
           span,
           scrollTo: false,
         });
@@ -266,11 +314,14 @@ export default {
       this.$store.dispatch("document/disableDocumentAnnotationSelected");
     },
     onAnnotationClick() {
+      if (!this.fromTable) {
+        this.$store.dispatch("display/showAnnSetTable", null);
+      }
       this.$store.dispatch("document/scrollToDocumentAnnotationSelected");
     },
     hoveredEmptyLabels() {
       // This method will change the style of the Empty Annotations in the same Label Set
-      // when the "Reject all" button is hovered
+      // when the "mark all as missing" button is hovered
       if (!this.hoveredAnnotationSet) return;
 
       const labels = this.hoveredAnnotationSet.annotationSet.labels.map(
@@ -309,7 +360,7 @@ export default {
         return null;
       }
     },
-    showAcceptAndDeclineButtons() {
+    showAcceptButton() {
       return (
         !this.isAnnotationInEditMode(this.annotationId()) &&
         this.annotation &&
@@ -317,11 +368,26 @@ export default {
         this.hoveredAnnotation === this.annotation.id
       );
     },
-    showRejectButton() {
+    showDeclineButton() {
+      return (
+        !this.isAnnotationInEditMode(this.annotationId()) &&
+        this.annotation &&
+        this.hoveredAnnotation === this.annotation.id
+      );
+    },
+    showMissingButton() {
       return (
         this.hoveredAnnotation &&
         !this.isAnnotationInEditMode(this.annotationId()) &&
-        !this.annotation
+        !this.annotation &&
+        !this.annotationIsNotFound(this.annotationSet, this.label)
+      );
+    },
+    showRestoreButton() {
+      return (
+        this.hoveredAnnotation &&
+        !this.isAnnotationInEditMode(this.annotationId()) &&
+        this.annotationIsNotFound(this.annotationSet, this.label)
       );
     },
     showCancelButton() {
@@ -353,13 +419,13 @@ export default {
         }
       }
     },
-    handleReject() {
+    handleMissingAnnotation() {
       if (!this.label || !this.annotationSet) return;
 
       // will emit to the DocumentAnnotations component, where the method is handled
       // & dispatched to the store
       this.$parent.$emit(
-        "handle-reject",
+        "handle-missing-annotation",
         this.label.id,
         this.annotationSet.label_set.id,
         this.annotationSet.id,
@@ -370,7 +436,8 @@ export default {
       if (this.publicView) return;
 
       if (
-        this.showAcceptAndDeclineButtons() ||
+        this.showAcceptButton() ||
+        this.showDeclineButton() ||
         this.isAnnotationInEditMode(
           this.annotationId(),
           this.editAnnotation.index
@@ -389,6 +456,30 @@ export default {
         this.saveEmptyAnnotationChanges();
       }
     },
+    handleRestore() {
+      this.isLoading = true;
+
+      const foundItem = this.missingAnnotations.find(
+        (item) =>
+          item.annotation_set === this.annotationSet.id &&
+          item.label === this.label.id &&
+          item.label_set === this.annotationSet.label_set.id
+      );
+
+      this.$store
+        .dispatch("document/deleteMissingAnnotation", foundItem.id)
+        .catch((error) => {
+          this.$store.dispatch("document/createErrorMessage", {
+            error,
+            serverErrorMessage: this.$t("server_error"),
+            defaultErrorMessage: this.$t("edit_error"),
+          });
+        })
+        .finally(() => {
+          this.isLoading = false;
+          this.closedTag = null;
+        });
+    },
     handleSaveAnnotationChanges(
       annotation,
       spanIndex,
@@ -575,15 +666,15 @@ export default {
 
       // Check for what empty annotations we want to show the loading
       // while waiting for it to be removed from the row
-      if (!this.rejectedMissingAnnotations) {
+      if (!this.annotationsMarkedAsMissing) {
         this.isLoading = false;
         this.saveChanges = false;
         return;
       }
 
-      if (this.rejectedMissingAnnotations.length > 0) {
-        this.rejectedMissingAnnotations.map((annotation) => {
-          // Check if the annotation set and label are rejected
+      if (this.annotationsMarkedAsMissing.length > 0) {
+        this.annotationsMarkedAsMissing.map((annotation) => {
+          // Check if the annotation set and label are marked as missing
           if (
             annotation.label_set === this.annotationSet.label_set.id &&
             annotation.annotation_set === this.annotationSet.id &&

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"
+      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"
+      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"]),
+  },
+  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,18 @@ export default {
   },
   computed: {
     ...mapState("category", ["categories"]),
-    ...mapState("document", ["selectedDocument"]),
+    ...mapState("document", [
+      "selectedDocument",
+      "categorizeModalIsActive",
+      "splittingSuggestions",
+    ]),
     ...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 +136,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 +175,13 @@ 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;
       }
     },
     canCloseModal() {