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

package/src/components/App.vue

@@ -1,13 +1,13 @@
 <template>
-  <div class="app-container">
-    <DocumentsList />
+  <div class="dv-ui-app-container dv-ui-theme">
+    <DocumentsList v-if="showDocumentsList" />
     <DocumentDashboard />
   </div>
 </template>
 <script>
 import DocumentDashboard from "./DocumentDashboard";
 import { DocumentsList } from "./DocumentsList";
-import { changeDocumentURL, getURLQueryParam } from "../utils/utils";
+import { getURLQueryParam, getURLPath } from "../utils/utils";
 import API from "../api";
 
 export default {
@@ -49,6 +49,8 @@ export default {
     documentId() {
       if (getURLQueryParam("document")) {
         return getURLQueryParam("document");
+      } else if (getURLPath("docs")) {
+        return getURLPath("docs");
       } else if (process.env.VUE_APP_DOCUMENT_ID) {
         return process.env.VUE_APP_DOCUMENT_ID;
       } else if (this.document) {
@@ -86,6 +88,9 @@ export default {
         return true;
       }
     },
+    showDocumentsList() {
+      return process.env.VUE_APP_SHOW_DOCUMENTS_LIST;
+    },
   },
   created() {
     // locale config
@@ -106,6 +111,7 @@ export default {
     });
 
     // Add observer for class added to HTML tag when Buefy modals are mounted
+    // TODO: check defaultModalScroll property in Buefy constructor https://buefy.org/documentation/constructor-options
     const htmlTag = document.documentElement;
     const observer = new MutationObserver(function (mutations) {
       mutations.forEach(function (mutation) {

package/src/components/DocumentAnnotations/AnnotationActionButtons.vue

@@ -0,0 +1,171 @@
+<template>
+  <div class="action-buttons">
+    <!-- loading -->
+    <div v-if="isLoading">
+      <b-notification :closable="false" class="loading-background">
+        <b-loading :active="isLoading" :is-full-page="false">
+          <b-icon icon="spinner" class="fa-spin loading-icon-size spinner" />
+        </b-loading>
+      </b-notification>
+    </div>
+
+    <!-- save button -->
+    <b-button
+      v-if="saveBtn && !isLoading && !publicView && !documentIsReviewed"
+      :class="[
+        'annotation-save-btn text-btn',
+        actionBar && 'action-bar-save-btn',
+        actionBar ? 'tertiary-button' : 'primary-button',
+      ]"
+      type="is-primary"
+      @click.stop="save"
+    >
+      {{ $t("save") }}
+    </b-button>
+
+    <!-- cancel button -->
+    <b-button
+      v-if="cancelBtn && !isLoading && !documentIsReviewed"
+      class="is-small annotation-cancel-btn"
+      icon-left="xmark"
+      @click.stop="cancel"
+    />
+
+    <!-- decline button -->
+    <div
+      v-if="
+        declineBtn &&
+        !isLoading &&
+        !saveBtn &&
+        !cancelBtn &&
+        !publicView &&
+        !documentIsReviewed
+      "
+      class="missing-decline-button-container"
+    >
+      <b-button
+        type="is-ghost"
+        class="missing-decline-btn decline-btn"
+        @click.stop="decline"
+      >
+        {{ $t("decline") }}
+      </b-button>
+    </div>
+
+    <!-- accept button -->
+    <b-button
+      v-if="
+        acceptBtn &&
+        !isLoading &&
+        !saveBtn &&
+        !cancelBtn &&
+        !publicView &&
+        !documentIsReviewed
+      "
+      class="annotation-accept-btn primary-button"
+      type="is-primary"
+      @click.stop="accept"
+    >
+      {{ $t("accept") }}
+    </b-button>
+
+    <!-- missing button -->
+    <div
+      v-if="
+        showMissingBtn &&
+        !isLoading &&
+        !cancelBtn &&
+        !saveBtn &&
+        !publicView &&
+        !documentIsReviewed
+      "
+      class="missing-decline-button-container"
+    >
+      <b-button
+        type="is-ghost"
+        class="missing-decline-btn missing-btn"
+        @click.stop="markAsMissing"
+      >
+        {{ $t("missing_annotation") }}
+      </b-button>
+    </div>
+
+    <!-- Restore not found annotations -->
+    <b-button
+      v-if="restoreBtn && !isLoading && !publicView && !documentIsReviewed"
+      class="restore-btn"
+      type="is-primary"
+      @click.stop="restore"
+    >
+      {{ $t("restore") }}
+    </b-button>
+  </div>
+</template>
+<script>
+/* Component for showing actions for each annotation row */
+import { mapState } from "vuex";
+export default {
+  name: "AnnotationActionButtons",
+  props: {
+    saveBtn: {
+      type: Boolean,
+    },
+    cancelBtn: {
+      type: Boolean,
+    },
+    showMissingBtn: {
+      type: Boolean,
+    },
+    isLoading: {
+      type: Boolean,
+    },
+    acceptBtn: {
+      type: Boolean,
+    },
+    declineBtn: {
+      type: Boolean,
+    },
+    actionBar: {
+      type: Boolean,
+      required: false,
+    },
+    restoreBtn: {
+      type: Boolean,
+      required: false,
+    },
+  },
+  computed: {
+    ...mapState("document", [
+      "publicView",
+      "missingAnnotations",
+      "documentIsReviewed",
+    ]),
+  },
+  methods: {
+    save() {
+      this.$emit("save");
+    },
+    cancel() {
+      this.$emit("cancel");
+    },
+    accept() {
+      this.$emit("accept");
+    },
+    markAsMissing() {
+      this.$emit("mark-as-missing");
+    },
+    decline() {
+      this.$emit("decline");
+    },
+    restore() {
+      this.$emit("restore");
+    },
+  },
+};
+</script>
+
+<style
+  scoped
+  lang="scss"
+  src="../../assets/scss/document_annotations.scss"
+></style>

package/src/components/DocumentAnnotations/AnnotationContent.vue

@@ -1,7 +1,7 @@
 <template>
   <div :id="annotation.id" ref="annotation" class="annotation">
     <span
-      v-if="!publicView"
+      v-if="!publicView || !documentIsReviewed"
       :id="annotation.id"
       ref="contentEditable"
       :class="[
@@ -82,6 +82,7 @@ export default {
       "newAcceptedAnnotations",
       "selectedEntities",
       "showActionError",
+      "documentIsReviewed",
     ]),
     annotationText() {
       if (this.isAnnotationBeingEdited) {
@@ -155,7 +156,7 @@ export default {
       this.$refs.contentEditable.textContent = text;
     },
     handleEditAnnotation(event) {
-      if (this.publicView) return;
+      if (this.publicView || this.documentIsReviewed) return;
 
       if (event) {
         event.preventDefault();
@@ -163,6 +164,7 @@ export default {
 
       if (
         !this.publicView &&
+        !this.documentIsReviewed &&
         !this.isAnnotationBeingEdited &&
         !this.isLoading
       ) {
@@ -226,7 +228,7 @@ export default {
       event.preventDefault();
     },
     saveAnnotationChanges(event) {
-      if (this.publicView) return;
+      if (this.publicView || this.documentIsReviewed) return;
 
       if (event) {
         event.preventDefault();

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,17 @@ export default {
       "publicView",
       "selectedEntities",
       "newAcceptedAnnotations",
-      "rejectedMissingAnnotations",
+      "annotationsMarkedAsMissing",
       "documentId",
       "showActionError",
+      "missingAnnotations",
+      "documentIsReviewed",
     ]),
     ...mapState("selection", ["spanSelection", "elementSelected"]),
-    ...mapGetters("document", ["isAnnotationInEditMode"]),
+    ...mapGetters("document", [
+      "isAnnotationInEditMode",
+      "annotationIsNotFound",
+    ]),
     ...mapGetters("selection", ["isValueArray"]),
     defaultSpan() {
       if (
@@ -185,6 +215,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 +273,7 @@ export default {
         this.isLoading = false;
       }
     },
-    rejectedMissingAnnotations(newValue) {
+    annotationsMarkedAsMissing(newValue) {
       if (newValue) {
         this.enableLoading();
       } else {
@@ -256,7 +305,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 +315,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 +361,7 @@ export default {
         return null;
       }
     },
-    showAcceptAndDeclineButtons() {
+    showAcceptButton() {
       return (
         !this.isAnnotationInEditMode(this.annotationId()) &&
         this.annotation &&
@@ -317,11 +369,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 +420,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,
@@ -367,10 +434,11 @@ export default {
       );
     },
     handleSaveChanges(decline) {
-      if (this.publicView) return;
+      if (this.publicView || this.documentIsReviewed) return;
 
       if (
-        this.showAcceptAndDeclineButtons() ||
+        this.showAcceptButton() ||
+        this.showDeclineButton() ||
         this.isAnnotationInEditMode(
           this.annotationId(),
           this.editAnnotation.index
@@ -389,6 +457,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 +667,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 &&