@konfuzio/document-validation-ui 0.1.14 → 0.1.16-dev.0

package/src/components/DocumentEdit/SplitInfoBar.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="split-info-bar">
+    <div class="bar-icon">
+      <StarIcon />
+    </div>
+    <span> {{ $t("smart_split_suggestions") }}</span>
+  </div>
+</template>
+
+<script>
+import StarIcon from "../../assets/images/StarIcon";
+
+export default {
+  name: "SplitInfoBar",
+  components: {
+    StarIcon,
+  },
+};
+</script>
+
+<style scoped lang="scss" src="../../assets/scss/document_edit.scss"></style>

package/src/components/DocumentEdit/index.js

@@ -1,4 +1,4 @@
 export { default as DocumentEdit } from "./DocumentEdit";
 export { default as EditSidebar } from "./EditSidebar";
 export { default as EditPages } from "./EditPages";
-export { default as SplitOverview } from "./SplitOverview";
+export { default as RenameAndCategorize } from "./RenameAndCategorize";

package/src/components/{DocumentError.vue → DocumentModals/DocumentErrorModal.vue}

@@ -1,14 +1,16 @@
 <template>
   <section class="document-error-modal">
-    <b-modal v-model="isModalActive" :width="400">
+    <b-modal
+      v-model="isModalActive"
+      :width="400"
+      :can-cancel="['x']"
+      :on-cancel="closeModal"
+    >
       <section class="modal-card-body">
         <div class="header">
           <div class="error-icon">
             <ErrorIcon class="icon" />
           </div>
-          <div class="btn-container" type="button" @click="closeModal">
-            <b-icon icon="xmark" class="close-btn" size="is-small" />
-          </div>
         </div>
         <div class="content">
           <h3>{{ $t("document_error_title") }}</h3>
@@ -29,11 +31,10 @@
 </template>
 
 <script>
-import { mapState } from "vuex";
-import ErrorIcon from "../assets/images/ErrorIcon";
+import ErrorIcon from "../../assets/images/ErrorIcon";
 
 export default {
-  name: "DocumentError",
+  name: "DocumentErrorModal",
   components: {
     ErrorIcon,
   },
@@ -54,4 +55,4 @@ export default {
 };
 </script>
 
-<style scoped lang="scss" src="../assets/scss/document_error.scss"></style>
+<style scoped lang="scss" src="../../assets/scss/document_error.scss"></style>

package/src/components/{NotOptimizedViewportModal.vue → DocumentModals/NotOptimizedViewportModal.vue}

@@ -24,7 +24,7 @@
 </template>
 
 <script>
-import Illustration from "../assets/images/NotOptimizedIllustration";
+import Illustration from "../../assets/images/NotOptimizedIllustration";
 
 export default {
   name: "NotOptimizedViewportModal",
@@ -47,5 +47,5 @@ export default {
 <style
   scoped
   lang="scss"
-  src="../assets/scss/document_viewport_modal.scss"
+  src="../../assets/scss/document_viewport_modal.scss"
 ></style>

package/src/components/DocumentPage/ActionBar.vue

@@ -8,7 +8,7 @@
         {{ documentActionBar.text }}
       </div>
       <div v-if="documentActionBar.action" class="action-button">
-        <ActionButtons
+        <AnnotationActionButtons
           :save-btn="documentActionBar.action !== null"
           :is-loading="documentActionBar.loading"
           :action-bar="true"
@@ -21,14 +21,14 @@
 
 <script>
 import { mapState } from "vuex";
-import ActionButtons from "../DocumentAnnotations/ActionButtons";
+import AnnotationActionButtons from "../DocumentAnnotations/AnnotationActionButtons";
 import ActionIcon from "../../assets/images/ActionIcon";
 
 export default {
   name: "ActionBar",
   components: {
     ActionIcon,
-    ActionButtons,
+    AnnotationActionButtons,
   },
   computed: {
     ...mapState("display", ["documentActionBar"]),

package/src/components/DocumentPage/AnnSetTableOptions.vue

@@ -0,0 +1,110 @@
+<template>
+  <div
+    class="ann-set-table-header"
+    :style="{ left: `${coordinates.x}px`, top: `${coordinates.y}px` }"
+  >
+    <b-dropdown
+      aria-role="list"
+      class="ann-set-table-header-dropdown"
+      position="is-top-right"
+      scrollable
+    >
+      <template #trigger>
+        <span class="ann-set-label-set-name">{{ labelSetName }}</span>
+        <SettingsIcon />
+      </template>
+      <b-dropdown-item
+        aria-role="listitem"
+        class="delete-action"
+        @click="handleDelete()"
+      >
+        <span>{{ $t("delete_table") }}</span></b-dropdown-item
+      >
+    </b-dropdown>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapState } from "vuex";
+import SettingsIcon from "../../assets/images/SettingsIcon";
+
+export default {
+  name: "AnnSetTableOptions",
+  components: {
+    SettingsIcon,
+  },
+  props: {
+    page: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    ...mapGetters("document", [
+      "annotationSetsInTable",
+      "annotationsInAnnotationsSets",
+    ]),
+    ...mapGetters("display", ["bboxToPoint"]),
+    ...mapState("display", ["showAnnSetTable"]),
+    labelSetName() {
+      return this.showAnnSetTable[0].label_set.name;
+    },
+    coordinates() {
+      let xFinal = 0;
+      let yFinal = 0;
+      const paddingTop = 40;
+
+      this.showAnnSetTable.forEach((annotationSet) => {
+        if (annotationSet.labels) {
+          annotationSet.labels.forEach((label) => {
+            label.annotations.forEach((annotation) => {
+              annotation.span.forEach((span) => {
+                const { x, y } = this.bboxToPoint(this.page, {
+                  x: span.x0,
+                  y: span.y0,
+                });
+                if (xFinal === 0 || x < xFinal) {
+                  xFinal = x;
+                }
+                if (yFinal === 0 || y < yFinal) {
+                  yFinal = y - paddingTop;
+                }
+              });
+            });
+          });
+        }
+      });
+      return { x: xFinal, y: yFinal };
+    },
+  },
+  methods: {
+    handleDelete() {
+      const annotationsToDelete = this.annotationsInAnnotationsSets(
+        this.showAnnSetTable
+      );
+
+      for (let i = 0; i < annotationsToDelete.length; i++) {
+        const annotationToDelete = annotationsToDelete[i];
+        this.$store
+          .dispatch("document/deleteAnnotation", {
+            annotationId: annotationToDelete.id,
+          })
+          .catch((error) => {
+            this.$store.dispatch("document/createErrorMessage", {
+              error,
+              serverErrorMessage: this.$t("server_error"),
+              defaultErrorMessage: this.$t("edit_error"),
+            });
+          });
+      }
+      this.$store.dispatch("display/showAnnSetTable", null);
+    },
+  },
+};
+</script>
+
+<style
+  scoped
+  lang="scss"
+  src="../../assets/scss/ann_set_table_options.scss"
+></style>

package/src/components/DocumentPage/BoxSelection.vue

@@ -102,7 +102,10 @@ export default {
         this.selection.start,
         this.selection.end
       );
-      this.$store.dispatch("selection/getTextFromBboxes", box);
+      this.$store.dispatch("selection/getTextFromBboxes", {
+        box,
+        entities: false,
+      });
     },
 
     /**

package/src/components/DocumentPage/DocumentPage.vue

@@ -3,7 +3,12 @@
     ref="pdfContainer"
     :class="[
       'pdf-page-container',
-      (categorizeModalIsActive || editMode || publicView) && 'default-cursor',
+      (categorizeModalIsActive ||
+        editMode ||
+        publicView ||
+        isDocumentReviewed) &&
+        'default-cursor',
+      page.number === currentPage && 'current-page',
     ]"
   >
     <NewAnnotation
@@ -13,14 +18,8 @@
       :container-height="scaledViewport.height"
       @close="closePopups"
     />
-    <MultiAnnotationTablePopup
-      v-if="newMultiAnnotationSetTable"
-      :table-position="newMultiAnnotationSetTable.position"
-      :page-size="scaledViewport"
-      :label-set="newMultiAnnotationSetTable.labelSet"
-      :grouped-entities="newMultiAnnotationSetTable.entities"
-      @close="closePopups"
-    />
+
+    <AnnSetTableOptions v-if="showAnnSetTable" :page="page" />
 
     <v-stage
       v-if="image && scale"
@@ -41,7 +40,7 @@
           }"
         />
         <template v-if="pageInVisibleRange && !editMode">
-          <v-group v-if="!publicView" ref="entities">
+          <v-group v-if="!publicView || !isDocumentReviewed" ref="entities">
             <v-rect
               v-for="(entity, index) in scaledEntities"
               :key="index"
@@ -61,15 +60,21 @@
                 v-if="!isAnnotationInEditMode(annotation.id)"
                 :key="'ann' + annotation.id + '-' + index"
                 :config="annotationRect(bbox, annotation.id)"
-                @click="handleClickedAnnotation(annotation)"
-                @mouseenter="onElementEnter"
+                @click="handleFocusedAnnotation(annotation, 'click')"
+                @mouseenter="handleFocusedAnnotation(annotation)"
                 @mouseleave="onElementLeave"
               />
             </template>
           </template>
         </template>
       </v-layer>
-      <v-layer v-if="showFocusedAnnotation && !isSelecting">
+      <v-layer
+        v-if="
+          showFocusedAnnotation &&
+          !isSelecting &&
+          documentAnnotationSelected.labelName !== ''
+        "
+      >
         <v-label
           :key="`label${documentAnnotationSelected.id}`"
           :config="{
@@ -96,15 +101,14 @@
           />
         </v-label>
       </v-layer>
-      <v-layer v-if="selection && !isSelecting && isElementSelected">
+      <v-layer v-if="isBoxSelection">
         <box-selection :page="page" />
       </v-layer>
-      <v-layer v-else-if="selection && isSelectionValid">
+      <v-layer v-else-if="isMultiSelection">
         <multi-ann-selection
           :page="page"
           @buttonEnter="onElementEnter"
           @buttonLeave="onElementLeave"
-          @finished="handleMultiAnnSelectionFinished"
         />
       </v-layer>
     </v-stage>
@@ -118,12 +122,12 @@
 </template>
 <script>
 import { mapState, mapGetters, mapActions } from "vuex";
-import { PIXEL_RATIO } from "../../constants";
+import { PIXEL_RATIO, MULTI_ANN_TABLE_FEATURE } from "../../constants";
 import api from "../../api";
 import BoxSelection from "./BoxSelection";
 import MultiAnnSelection from "./MultiAnnSelection";
 import NewAnnotation from "./NewAnnotation";
-import MultiAnnotationTablePopup from "./MultiAnnotationTablePopup";
+import AnnSetTableOptions from "./AnnSetTableOptions";
 
 export default {
   name: "DocumentPage",
@@ -131,7 +135,7 @@ export default {
     BoxSelection,
     MultiAnnSelection,
     NewAnnotation,
-    MultiAnnotationTablePopup,
+    AnnSetTableOptions,
   },
 
   props: {
@@ -145,11 +149,18 @@ export default {
     return {
       image: null,
       newAnnotation: [],
-      newMultiAnnotationSetTable: null,
     };
   },
 
   computed: {
+    ...mapState("display", ["currentPage", "showAnnSetTable"]),
+
+    isBoxSelection() {
+      return this.selection && !this.isSelecting && this.isElementSelected;
+    },
+    isMultiSelection() {
+      return MULTI_ANN_TABLE_FEATURE && this.selection && this.isSelectionValid;
+    },
     showFocusedAnnotation() {
       return (
         this.documentAnnotationSelected &&
@@ -164,7 +175,6 @@ export default {
         height: this.page.size[1] * this.scale,
       };
     },
-
     scaledViewport() {
       const { width: actualSizeWidth, height: actualSizeHeight } =
         this.actualSizeViewport;
@@ -204,7 +214,6 @@ export default {
           scaled: {
             ...box,
           },
-          clickSelected: false,
         };
       });
     },
@@ -237,12 +246,8 @@ export default {
       );
     },
 
-    ...mapState("selection", [
-      "isSelecting",
-      "selectionFromBbox",
-      "spanSelection",
-    ]),
-    ...mapState("display", ["scale", "optimalScale"]),
+    ...mapState("selection", ["isSelecting", "selectedEntities"]),
+    ...mapState("display", ["scale", "categorizeModalIsActive"]),
     ...mapState("document", [
       "documentAnnotationSelected",
       "recalculatingAnnotations",
@@ -250,8 +255,6 @@ export default {
       "editAnnotation",
       "selectedDocument",
       "publicView",
-      "selectedEntities",
-      "categorizeModalIsActive",
     ]),
     ...mapState("edit", ["editMode"]),
     ...mapGetters("display", ["visiblePageRange", "bboxToRect"]),
@@ -260,6 +263,7 @@ export default {
       "isAnnotationInEditMode",
       "isDocumentReadyToBeReviewed",
       "entitiesOnSelection",
+      "isDocumentReviewed",
     ]),
   },
   watch: {
@@ -271,10 +275,13 @@ export default {
     scale() {
       this.closePopups(true);
     },
-    selectedEntities(newValue) {
+    async selectedEntities(newValue) {
       if (!newValue) {
+        this.$store.dispatch("selection/setSpanSelection", null);
         this.closePopups(true);
       }
+
+      await this.$store.dispatch("selection/getTextFromEntities", newValue);
     },
     page(newValue, oldValue) {
       if (newValue.image_url !== oldValue.image_url) {
@@ -305,7 +312,13 @@ export default {
     },
 
     onMouseDown(event) {
-      if (this.categorizeModalIsActive || this.editMode) return;
+      if (
+        this.categorizeModalIsActive ||
+        this.editMode ||
+        this.publicView ||
+        this.isDocumentReviewed
+      )
+        return;
 
       this.closePopups();
 
@@ -323,9 +336,6 @@ export default {
       ) {
         return;
       }
-      if (this.publicView) {
-        return;
-      }
 
       // anything else, we start selecting
 
@@ -366,34 +376,46 @@ export default {
       });
     },
 
-    handleClickedAnnotation(annotation) {
-      this.closePopups(true);
-      this.$store.dispatch("document/resetEditAnnotation");
-      this.$store.dispatch("document/setSidebarAnnotationSelected", annotation);
+    handleFocusedAnnotation(annotation, trigger) {
+      this.$store.dispatch("document/setSidebarAnnotationSelected", {
+        annotation,
+        trigger,
+      });
+
+      if (trigger && trigger === "click") {
+        this.closePopups(true);
+      }
     },
 
     handleClickedEntity(entity) {
-      if (!entity || this.categorizeModalIsActive) return;
+      if (
+        !entity ||
+        this.categorizeModalIsActive ||
+        this.publicView ||
+        this.isDocumentReviewed
+      )
+        return;
 
       // Check if we are creating a new Annotation
-      // or if we are editing an existing or empty one
-      const entityToAdd = {
-        entity,
-        content: entity.original.offset_string,
-      };
+      // or if we are removing a previously selected entity
+      // or editing empty one
+      const entityToAdd = entity;
 
       const found = this.newAnnotation.find(
         (ann) =>
-          ann.entity.scaled.width === entityToAdd.entity.scaled.width &&
-          ann.content === entityToAdd.content
+          ann.scaled.width === entityToAdd.scaled.width &&
+          ann.original.offset_string === entityToAdd.original.offset_string
       );
 
+      // reset the selection so that we don't have a drawn rectangle when editing based on entities
+      this.endSelection();
+
       if (found) {
         this.newAnnotation = [
           ...this.newAnnotation.filter(
             (ann) =>
-              ann.entity.scaled.width !== entityToAdd.entity.scaled.width &&
-              ann.content !== entityToAdd.content
+              ann.scaled.width !== entityToAdd.scaled.width &&
+              ann.original.offset_string !== entityToAdd.original.offset_string
           ),
         ];
       } else {
@@ -402,16 +424,21 @@ export default {
 
       if (this.newAnnotation.length > 0) {
         this.$store.dispatch(
-          "document/setSelectedEntities",
+          "selection/setSelectedEntities",
           this.newAnnotation
         );
       } else {
-        this.$store.dispatch("document/setSelectedEntities", null);
+        this.$store.dispatch("selection/setSelectedEntities", null);
       }
     },
 
     onElementEnter() {
-      if (!this.categorizeModalIsActive) {
+      if (
+        !this.categorizeModalIsActive &&
+        !this.publicView &&
+        !this.editMode &&
+        !this.isDocumentReviewed
+      ) {
         this.$refs.stage.$el.style.cursor = "pointer";
       }
     },
@@ -420,10 +447,6 @@ export default {
       this.$refs.stage.$el.style.cursor = "inherit";
     },
 
-    handleMultiAnnSelectionFinished(newMultiAnnotationSetTable) {
-      this.newMultiAnnotationSetTable = newMultiAnnotationSetTable;
-    },
-
     /**
      * Konva draws pages like this.
      */
@@ -432,19 +455,21 @@ export default {
         return;
       }
       const image = new Image();
-      api.IMG_REQUEST.get(
-        `${this.page.image_url}?${this.selectedDocument.downloaded_at}`
-      )
-        .then((response) => {
-          return response.data;
-        })
+      if (process.env.NODE_ENV === "test") {
+        return;
+      }
+      api
+        .makeFileRequest(
+          `${this.page.image_url}?${this.selectedDocument.downloaded_at}`
+        )
         .then((myBlob) => {
           image.src = URL.createObjectURL(myBlob);
           image.onload = () => {
             // set image only when it is loaded
             this.image = image;
           };
-        });
+        })
+        .catch((error) => {});
     },
 
     /**
@@ -452,13 +477,13 @@ export default {
      */
     entityRect(entity) {
       let entityIsSelected = false;
-      if (this.newAnnotation) {
+      if (this.newAnnotation && this.newAnnotation.length > 0) {
         entityIsSelected = this.newAnnotation.find((selectedEntity) => {
           return (
-            selectedEntity.entity.original.offset_string ===
+            selectedEntity.original.offset_string ===
               entity.original.offset_string &&
-            selectedEntity.entity.original.x0 === entity.original.x0 &&
-            selectedEntity.entity.original.y0 === entity.original.y0
+            selectedEntity.original.x0 === entity.original.x0 &&
+            selectedEntity.original.y0 === entity.original.y0
           );
         });
       }
@@ -514,7 +539,6 @@ export default {
       };
     },
     closePopups(closeNewAnnotaton) {
-      this.newMultiAnnotationSetTable = null;
       if (closeNewAnnotaton) {
         this.newAnnotation = [];
       }