@konfuzio/document-validation-ui 0.1.8-pre-release-2 → 0.1.8-pre-release-3

package/package.json

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

package/src/assets/scss/categorize_modal.scss

@@ -18,7 +18,7 @@
 
     .categorize-dropdown {
       width: 100%;
-      border: 1px solid #d0d5dd;
+      border: 1px solid $grey-outline;
       height: 40px;
       cursor: pointer;
       box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);

package/src/assets/scss/choose_label_set_modal.scss

@@ -18,7 +18,7 @@
 
     .label-set-dropdown {
       width: 100%;
-      border: 1px solid #d0d5dd;
+      border: 1px solid $grey-outline;
       height: 40px;
       cursor: pointer;
       box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);

package/src/assets/scss/document_category.scss

@@ -4,25 +4,30 @@
   cursor: pointer;
 
   &.split-mode {
-    border: 1px solid $grey-detail;
+    border: 1px solid $grey-outline;
     border-radius: 4px;
     background-color: $white;
+
+    &:hover {
+      border-color: $grey-outline-dark;
+      background-color: transparent;
+    }
   }
 
   &.disabled {
     cursor: not-allowed;
   }
 
+  &:not(.split-mode) {
+    .category-drop-down {
+      border-right: $component-border;
+    }
+  }
   .category-drop-down {
     display: flex;
     height: 100%;
     align-items: center;
     padding: 0 8px 0 14px;
-    border-right: $component-border;
-
-    &:hover {
-      background-color: $background;
-    }
 
     .caret-section {
       padding-top: 5px;

package/src/assets/scss/document_edit.scss

@@ -74,7 +74,7 @@
 
           &.active-split {
             .lines {
-              margin-left: 3px;
+              margin-left: 15px;
               margin-right: 3px;
               padding-right: 12px;
             }

package/src/assets/scss/main.scss

@@ -245,14 +245,19 @@ body {
 
       .dropdown-menu {
         padding-top: 0px;
+        min-width: 40px;
       }
 
-      a.dropdown-item.is-active {
-        background-color: $primary;
-      }
+      a.dropdown-item {
+        padding-right: 16px;
 
-      a.dropdown-item.is-disabled {
-        color: $grey-blue !important;
+        &.is-active {
+          background-color: $primary;
+        }
+
+        &.is-disabled {
+          color: $grey-blue !important;
+        }
       }
 
       &.dropdown-menu-animation {
@@ -296,6 +301,8 @@ body {
       }
 
       &.modal-400 {
+        position: absolute !important;
+
         .modal-content {
           max-width: 400px !important;
 
@@ -528,6 +535,12 @@ body {
         }
       }
 
+      &.full-height-tooltip {
+        .tooltip-trigger {
+          height: 100%;
+        }
+      }
+
       &.width-184 {
         .tooltip-content {
           width: 184px !important;
@@ -619,6 +632,7 @@ body {
       &.split-mode {
         .dropdown-trigger {
           font-size: 14px;
+          height: 38px;
         }
       }
 

package/src/assets/scss/variables.scss

@@ -19,6 +19,7 @@ $grey-low-opacity: rgba(133, 140, 154, 0.4);
 $grey-lighter-low-opacity: rgba(223, 224, 228, 0.5);
 $grey-lightest: #f0f0f0;
 $grey-outline: #d0d5dd;
+$grey-outline-dark: #b5b5b5;
 $grey-detail: #e1e1e1;
 $subtle-grey: #f2f4f7;
 $subtlest-grey: #e3e4e5;

package/src/components/DocumentAnnotations/AnnotationActionButtons.vue

@@ -11,7 +11,7 @@
 
     <!-- save button -->
     <b-button
-      v-if="saveBtn && !isLoading && !publicView && !documentIsReviewed"
+      v-if="saveBtn && !isLoading && !publicView && !isDocumentReviewed"
       :class="[
         'annotation-save-btn text-btn',
         actionBar && 'action-bar-save-btn',
@@ -25,7 +25,7 @@
 
     <!-- cancel button -->
     <b-button
-      v-if="cancelBtn && !isLoading && !documentIsReviewed"
+      v-if="cancelBtn && !isLoading && !isDocumentReviewed"
       class="is-small annotation-cancel-btn"
       icon-left="xmark"
       @click.stop="cancel"
@@ -39,7 +39,7 @@
         !saveBtn &&
         !cancelBtn &&
         !publicView &&
-        !documentIsReviewed
+        !isDocumentReviewed
       "
       class="missing-decline-button-container"
     >
@@ -60,7 +60,7 @@
         !saveBtn &&
         !cancelBtn &&
         !publicView &&
-        !documentIsReviewed
+        !isDocumentReviewed
       "
       class="annotation-accept-btn primary-button"
       type="is-primary"
@@ -77,7 +77,7 @@
         !cancelBtn &&
         !saveBtn &&
         !publicView &&
-        !documentIsReviewed
+        !isDocumentReviewed
       "
       class="missing-decline-button-container"
     >
@@ -92,7 +92,7 @@
 
     <!-- Restore not found annotations -->
     <b-button
-      v-if="restoreBtn && !isLoading && !publicView && !documentIsReviewed"
+      v-if="restoreBtn && !isLoading && !publicView && !isDocumentReviewed"
       class="restore-btn"
       type="is-primary"
       @click.stop="restore"
@@ -103,7 +103,7 @@
 </template>
 <script>
 /* Component for showing actions for each annotation row */
-import { mapState } from "vuex";
+import { mapGetters, mapState } from "vuex";
 export default {
   name: "AnnotationActionButtons",
   props: {
@@ -135,11 +135,8 @@ export default {
     },
   },
   computed: {
-    ...mapState("document", [
-      "publicView",
-      "missingAnnotations",
-      "documentIsReviewed",
-    ]),
+    ...mapState("document", ["publicView", "missingAnnotations"]),
+    ...mapGetters("document", ["isDocumentReviewed"]),
   },
   methods: {
     save() {

package/src/components/DocumentAnnotations/AnnotationContent.vue

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

package/src/components/DocumentAnnotations/AnnotationRow.vue

@@ -168,12 +168,12 @@ export default {
       "documentId",
       "showActionError",
       "missingAnnotations",
-      "documentIsReviewed",
     ]),
     ...mapState("selection", ["spanSelection", "elementSelected"]),
     ...mapGetters("document", [
       "isAnnotationInEditMode",
       "annotationIsNotFound",
+      "isDocumentReviewed",
     ]),
     ...mapGetters("selection", ["isValueArray"]),
     defaultSpan() {
@@ -426,7 +426,7 @@ export default {
       );
     },
     handleSaveChanges(decline) {
-      if (this.publicView || this.documentIsReviewed) return;
+      if (this.publicView || this.isDocumentReviewed) return;
 
       if (
         this.showAcceptButton() ||

package/src/components/DocumentAnnotations/AnnotationSetActionButtons.vue

@@ -2,7 +2,7 @@
   <div class="action-buttons">
     <!-- mark all empty labels as missing -->
     <div
-      v-if="!publicView && !documentIsReviewed"
+      v-if="!publicView && !isDocumentReviewed"
       class="missing-decline-button-container all-missing"
       @mouseenter="mouseenterAnnotationSet('missing')"
       @mouseleave="mouseleaveAnnotationSet"
@@ -19,7 +19,7 @@
 
     <!-- accept all pending annotations -->
     <div
-      v-if="!publicView && !documentIsReviewed"
+      v-if="!publicView && !isDocumentReviewed"
       class="accept-all"
       @mouseenter="mouseenterAnnotationSet('accept')"
       @mouseleave="mouseleaveAnnotationSet"
@@ -40,20 +40,23 @@
 <script>
 /* Component for showing actions for each Annotation Set */
 
-import { mapState } from "vuex";
+import { mapGetters, mapState } from "vuex";
 
 export default {
   name: "AnnotationSetActionButtons",
   props: {
     numberOfEmptyLabelsInAnnotationSet: {
       type: Number,
+      default: 0,
     },
     numberOfPendingAnnotationsInAnnotationSet: {
       type: Number,
+      default: 0,
     },
   },
   computed: {
-    ...mapState("document", ["publicView", "documentIsReviewed"]),
+    ...mapState("document", ["publicView"]),
+    ...mapGetters("document", ["isDocumentReviewed"]),
   },
   methods: {
     mouseenterAnnotationSet(type) {

package/src/components/DocumentAnnotations/CategorizeModal.vue

@@ -110,10 +110,12 @@ export default {
       "categorizeModalIsActive",
       "splittingSuggestions",
       "publicView",
-      "documentIsReviewed",
     ]),
     ...mapGetters("category", ["category", "projectHasSingleCategory"]),
-    ...mapGetters("document", ["categorizationIsConfirmed"]),
+    ...mapGetters("document", [
+      "categorizationIsConfirmed",
+      "isDocumentReviewed",
+    ]),
 
     singleCategoryInProject() {
       // if only 1 category in the project, we don't enable the dropdown
@@ -185,7 +187,7 @@ export default {
           (!category || (category && !this.splittingSuggestions)) &&
           !this.categorizationIsConfirmed &&
           !this.publicView &&
-          !this.documentIsReviewed;
+          !this.isDocumentReviewed;
       }
     },
     canCloseModal() {

package/src/components/DocumentAnnotations/DocumentAnnotations.vue

@@ -17,7 +17,7 @@
       <CategorizeModal
         v-if="
           !publicView &&
-          !documentIsReviewed &&
+          !isDocumentReviewed &&
           !waitingForSplittingConfirmation(selectedDocument)
         "
       />
@@ -25,7 +25,7 @@
     </div>
 
     <div v-else :class="['annotation-set-list']">
-      <CategorizeModal v-if="!publicView || !documentIsReviewed" />
+      <CategorizeModal v-if="!publicView || !isDocumentReviewed" />
       <div
         v-if="Object.entries(annotationSetsInTable()).length > 0"
         class="annotation-set-group"
@@ -148,7 +148,6 @@ export default {
       "labels",
       "selectedDocument",
       "splittingSuggestions",
-      "documentIsReviewed",
     ]),
     ...mapGetters("category", ["category"]),
     ...mapGetters("document", [
@@ -158,6 +157,7 @@ export default {
       "waitingForSplittingConfirmation",
       "annotationSetsToShowInList",
       "annotationSetsInTable",
+      "isDocumentReviewed",
     ]),
     isAnnotationBeingEdited() {
       return this.editAnnotation && this.editAnnotation.id;
@@ -231,7 +231,7 @@ export default {
 
     keyDownHandler(event) {
       // only allow keyboard navigation if we are not in public view mode
-      if (this.publicView || this.documentIsReviewed) return;
+      if (this.publicView || this.isDocumentReviewed) return;
 
       // get out of edit mode and navigation
       if (event.key === "Escape") {

package/src/components/DocumentAnnotations/EmptyAnnotation.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="empty-annotation">
     <span
-      v-if="!publicView && !documentIsReviewed"
+      v-if="!publicView && !isDocumentReviewed"
       :id="emptyAnnotationId()"
       ref="emptyAnnotation"
       :class="[
@@ -76,6 +76,7 @@ export default {
       "isAnnotationInEditMode",
       "getTextFromEntities",
       "annotationIsNotFound",
+      "isDocumentReviewed",
     ]),
     ...mapGetters("selection", ["isValueArray"]),
     ...mapState("selection", ["spanSelection", "elementSelected"]),
@@ -84,7 +85,6 @@ export default {
       "publicView",
       "selectedEntities",
       "showActionError",
-      "documentIsReviewed",
     ]),
   },
   watch: {
@@ -159,14 +159,14 @@ export default {
     handleEditEmptyAnnotation() {
       if (
         this.publicView ||
-        this.documentIsReviewed ||
+        this.isDocumentReviewed ||
         this.annotationIsNotFound(this.annotationSet, this.label)
       )
         return;
 
       if (
         !this.publicView &&
-        !this.documentIsReviewed &&
+        !this.isDocumentReviewed &&
         !this.isLoading &&
         this.elementSelected !== this.emptyAnnotationId()
       ) {
@@ -221,7 +221,7 @@ export default {
       }
     },
     saveEmptyAnnotationChanges(event) {
-      if (this.publicView || this.documentIsReviewed) return;
+      if (this.publicView || this.isDocumentReviewed) return;
 
       if (event) {
         event.preventDefault();

package/src/components/DocumentAnnotations/MultiAnnotationTableOverlay.vue

@@ -21,7 +21,7 @@
       @columndragleave="columndragleave"
     >
       <b-table-column
-        v-for="(item, index) in columns"
+        v-for="(item, index) in isLoading ? [columns[0]] : columns"
         :key="index"
         :field="item.field"
         :label="item.label.name"
@@ -31,14 +31,17 @@
             :ref="getDropdownReference(item)"
             aria-role="list"
             class="header-dropdown"
-            position="is-top-left"
+            position="is-top-right"
             :close-on-click="false"
             @active-change="(e) => onDropdownChange(item, e)"
           >
             <template #trigger="{ active }">
-              <DraggableIcon class="draggable" />
-              <span :class="active ? 'active' : ''">{{ column.label }} </span>
+              <DraggableIcon v-if="!isLoading" class="draggable" />
+              <span v-if="!isLoading" :class="active ? 'active' : ''"
+                >{{ column.label }}
+              </span>
               <b-icon
+                v-if="!isLoading"
                 :icon="active ? 'angle-up' : 'angle-down'"
                 size="is-small"
                 class="arrow"
@@ -63,7 +66,7 @@
                 :key="label.id"
                 aria-role="listitem"
                 :disabled="label.disabled"
-                ><span @click="changeLabel(item, label)">{{
+                ><span @click="!label.disabled && changeLabel(item, label)">{{
                   label.name
                 }}</span></b-dropdown-item
               >
@@ -73,7 +76,9 @@
 
         <template #default="props">
           <div class="annotations-table">
+            <b-skeleton v-if="isLoading" width="98%" height="90%" />
             <AnnotationRow
+              v-if="!isLoading"
               :annotation="props.row[item.field]"
               :label="item.label"
               :annotation-set="item.annotationSet"
@@ -120,6 +125,7 @@ export default {
       editingLabels: [],
       openDropdown: null,
       draggingColumnIndex: null,
+      isLoading: false,
     };
   },
   computed: {
@@ -136,6 +142,13 @@ export default {
       this.handleColumns();
       this.handleRows();
     },
+    columns(columns) {
+      if (!columns || (columns && columns.length === 0)) {
+        this.$store.dispatch("selection/disableSelection");
+        this.$store.dispatch("document/resetEditAnnotation");
+        this.$store.dispatch("display/showAnnSetTable", null);
+      }
+    },
   },
   mounted() {
     this.handleColumns();
@@ -212,6 +225,8 @@ export default {
     },
 
     async changeLabel(column, label) {
+      this.isLoading = true;
+      this.closeDropdown(column);
       for (let i = 0; i < this.rows.length; i++) {
         const annotationToUpdate = this.rows[i][column.label.id];
         await this.$store
@@ -227,12 +242,22 @@ export default {
             });
           });
       }
-      this.closeDropdown(column);
+      this.isLoading = false;
     },
 
     async deleteColumn(column) {
+      this.isLoading = true;
+      this.closeDropdown(column);
+
+      const annotationsToDelete = [];
       for (let i = 0; i < this.rows.length; i++) {
         const annotationToDelete = this.rows[i][column.label.id];
+        if (annotationToDelete && annotationToDelete.id) {
+          annotationsToDelete.push(annotationToDelete);
+        }
+      }
+
+      annotationsToDelete.forEach(async (annotationToDelete) => {
         await this.$store
           .dispatch("document/deleteAnnotation", {
             annotationId: annotationToDelete.id,
@@ -244,8 +269,9 @@ export default {
               defaultErrorMessage: this.$t("edit_error"),
             });
           });
-      }
-      this.closeDropdown(column);
+      });
+
+      this.isLoading = false;
     },
 
     onDropdownChange(column, open) {
@@ -253,7 +279,10 @@ export default {
       this.$store.dispatch("selection/disableSelection");
       this.$store.dispatch("document/resetEditAnnotation");
       if (open) {
-        if (this.openDropdown) {
+        if (
+          this.openDropdown &&
+          this.$refs[this.getDropdownReference(column)].length > 0
+        ) {
           this.$refs[this.openDropdown][0].toggle();
         }
         this.openDropdown = this.getDropdownReference(column);
@@ -265,7 +294,10 @@ export default {
     },
 
     closeDropdown(column) {
-      if (this.openDropdown) {
+      if (
+        this.openDropdown &&
+        this.$refs[this.getDropdownReference(column)].length > 0
+      ) {
         this.$refs[this.getDropdownReference(column)][0].toggle();
         this.openDropdown = null;
       }

package/src/components/DocumentCategory.vue

@@ -4,7 +4,11 @@
     :active="tooltipIsShown || dropdownIsDisabled"
     size="is-large"
     position="is-bottom"
-    :class="[editMode ? 'right-aligned full-height-tooltip' : 'left-aligned']"
+    :class="[
+      editMode
+        ? 'right-aligned full-height-tooltip'
+        : 'left-aligned full-height-tooltip',
+    ]"
     :close-delay="tooltipCloseDelay"
   >
     <template #content>

package/src/components/DocumentEdit/DocumentEdit.vue

@@ -184,17 +184,11 @@ export default {
       if (!this.splittingSuggestions) return;
 
       this.splittingSuggestions.map((item) => {
-        const firstPage = this.selectedDocument.pages.find(
-          (page) => page.id === item.pages[0].id
+        const lastPage = this.selectedDocument.pages.find(
+          (page) => page.id === item.pages[item.pages.length - 1].id
         );
 
-        if (firstPage.number === 1 && item.pages.length > 1) {
-          // only add the active splitting line from the 1st page of the second document
-          // since it's the first splitting point
-          return;
-        }
-
-        this.handleSplittingLines(firstPage.number, "AI");
+        this.handleSplittingLines(lastPage.number, "AI");
       });
     },
     applySplittingSuggestions(value) {
@@ -342,7 +336,7 @@ export default {
       );
 
       const singleSplittingSuggestion = this.splittingSuggestions.find(
-        (item) => item.pages[0].id === foundPage.id
+        (item) => item.pages[item.pages.length - 1].id === foundPage.id
       );
 
       return this.splittingSuggestions.indexOf(singleSplittingSuggestion);

package/src/components/DocumentModals/SplittingSuggestionsModal.vue

@@ -52,6 +52,7 @@ export default {
   },
   computed: {
     ...mapState("document", ["splittingSuggestions", "selectedDocument"]),
+    ...mapState("edit", ["editMode"]),
     ...mapGetters("document", ["waitingForSplittingConfirmation"]),
   },
   watch: {
@@ -60,6 +61,11 @@ export default {
         this.isModalActive = true;
       }
     },
+    editMode(newValue) {
+      if (!newValue) {
+        this.showModal();
+      }
+    },
     isModalActive(newValue) {
       if (newValue) {
         this.$nextTick(() => {
@@ -80,9 +86,7 @@ export default {
     },
   },
   mounted() {
-    if (this.splittingSuggestions) {
-      this.isModalActive = true;
-    }
+    this.showModal();
 
     this.$nextTick(() => {
       if (this.recommended) {
@@ -91,6 +95,14 @@ export default {
     });
   },
   methods: {
+    showModal() {
+      if (
+        this.splittingSuggestions &&
+        this.waitingForSplittingConfirmation(this.selectedDocument)
+      ) {
+        this.isModalActive = true;
+      }
+    },
     closeModal() {
       const updatedDocument = [
         {