@konfuzio/document-validation-ui 0.1.14 → 0.1.15

package/src/components/DocumentPage/DocumentToolbar.vue

@@ -9,7 +9,7 @@
         class="top-aligned"
       >
         <div
-          v-if="!editMode && !publicView"
+          v-if="!editMode && !publicView && !isDocumentReviewed"
           :class="[
             'icons icons-left',
             editModeDisabled && 'edit-mode-disabled',
@@ -22,15 +22,51 @@
           <span class="edit-text">{{ $t("edit") }}</span>
         </div>
       </b-tooltip>
-      <div v-if="!editMode && !publicView" class="toolbar-divider" />
+      <div
+        v-if="!editMode && !publicView && !isDocumentReviewed"
+        class="toolbar-divider"
+      />
+
+      <div v-if="!publicView" class="download-file icons">
+        <b-dropdown aria-role="list" position="is-top-right" scrollable>
+          <template #trigger>
+            <b-icon icon="download" size="small" class="download-file" />
+          </template>
+
+          <b-dropdown-item aria-role="listitem" @click="handleDownloadFile()">{{
+            $t("original_file")
+          }}</b-dropdown-item>
+          <b-dropdown-item
+            aria-role="listitem"
+            @click="handleDownloadFile('ocr')"
+            >{{ $t("pdf_file") }}</b-dropdown-item
+          >
+        </b-dropdown>
+      </div>
+
+      <div v-if="!publicView" class="toolbar-divider" />
+
       <div class="icons icons-right">
-        <div class="fit-zoom icon" @click.prevent.stop="fitAuto">
+        <div
+          :class="[
+            'fit-zoom',
+            'icon',
+            currentPercentage === 50 && 'zoom-disabled',
+          ]"
+          @click.prevent.stop="fitAuto"
+        >
           <FitZoomIcon />
         </div>
-        <div class="zoom-in icon" @click.prevent.stop="zoomIn">
+        <div
+          :class="['zoom-in', 'icon', isZoomInExceeding && 'zoom-disabled']"
+          @click.prevent.stop="zoomIn"
+        >
           <PlusIcon />
         </div>
-        <div class="zoom-out icon" @click.prevent.stop="zoomOut">
+        <div
+          :class="['zoom-out icon', isZoomOutExceeding && 'zoom-disabled']"
+          @click.prevent.stop="zoomOut"
+        >
           <MinusIcon />
         </div>
         <div class="percentage">
@@ -47,6 +83,7 @@ import FitZoomIcon from "../../assets/images/FitZoomIcon";
 import PlusIcon from "../../assets/images/PlusIcon";
 import MinusIcon from "../../assets/images/MinusIcon";
 import EditDocIcon from "../../assets/images/EditDocIcon";
+import api from "../../api";
 
 export default {
   name: "DocumentToolbar",
@@ -58,8 +95,8 @@ export default {
   },
   data() {
     return {
-      defaultScale: null,
       currentPercentage: 100,
+      maxPercentage: 500,
       defaultPercentage: 0.25,
       fitPercentage: 0.5,
       toolbarModalOpen: true,
@@ -75,7 +112,13 @@ export default {
       "recalculatingAnnotations",
       "publicView",
     ]),
-    ...mapGetters("document", ["documentCannotBeEdited"]),
+    ...mapGetters("document", ["documentCannotBeEdited", "isDocumentReviewed"]),
+    isZoomInExceeding() {
+      return this.currentPercentage === this.maxPercentage;
+    },
+    isZoomOutExceeding() {
+      return this.currentPercentage === this.defaultPercentage * 100;
+    },
   },
   watch: {
     selectedDocument(newValue) {
@@ -85,8 +128,6 @@ export default {
     },
   },
   mounted() {
-    this.defaultScale = this.scale;
-
     if (this.selectedDocument) {
       if (this.documentCannotBeEdited(this.selectedDocument)) {
         this.editModeDisabled = true;
@@ -103,33 +144,81 @@ export default {
   methods: {
     handleEdit() {
       if (this.editModeDisabled) return;
+      this.$store.dispatch("selection/disableSelection");
       this.$store.dispatch("edit/enableEditMode");
     },
     zoomIn() {
+      if (this.currentPercentage === this.maxPercentage) return;
+
+      // exit edit mode of Annotation if changing zoom during editing
+      this.cancelAnnotationEditMode();
       this.currentPercentage += this.defaultPercentage * 100;
-      this.updateScale((this.defaultScale * this.currentPercentage) / 100);
+      this.updateScale(this.scale + this.defaultPercentage);
     },
     zoomOut() {
-      if (this.currentPercentage === 25) {
+      if (this.currentPercentage === this.defaultPercentage * 100) {
         return;
       }
 
+      // exit edit mode of Annotation if changing zoom during editing
+      this.cancelAnnotationEditMode();
+
       this.currentPercentage -= this.defaultPercentage * 100;
-      this.updateScale((this.defaultScale * this.currentPercentage) / 100);
+      this.updateScale(this.scale - this.defaultPercentage);
     },
     fitAuto() {
-      if (this.currentPercentage === 50 || !this.defaultScale) return;
+      // exit edit mode of Annotation if changing zoom during editing
+      this.cancelAnnotationEditMode();
 
       // Always set to 50%
-      this.updateScale(this.defaultScale * this.fitPercentage);
-
-      this.currentPercentage = this.fitPercentage * 100;
+      this.currentPercentage = 50;
+      this.$store.dispatch("display/updateFit", "all");
     },
     updateScale(scale) {
       this.$store.dispatch("display/updateFit", "custom").then(() => {
         this.$store.dispatch("display/updateScale", { scale });
       });
     },
+    handleDownloadFile(fileType) {
+      let fileUrl;
+      // get the file name without the extension
+      let fileName = this.getFileName(this.selectedDocument.data_file_name);
+
+      if (fileType === "ocr") {
+        fileUrl = this.selectedDocument.file_url;
+        fileName = `${fileName}_${fileType}`;
+      } else {
+        fileUrl = `/doc/show-original/${this.selectedDocument.id}/`;
+      }
+
+      // Automatically download original or ocr files
+      return api
+        .makeFileRequest(fileUrl)
+        .then((myBlob) => {
+          const url = URL.createObjectURL(myBlob);
+          const link = document.createElement("a");
+          link.href = url;
+          link.setAttribute("download", fileName);
+          link.click();
+          URL.revokeObjectURL(link.href);
+        })
+        .catch((error) => {
+          this.$store.dispatch("document/createErrorMessage", {
+            error,
+            serverErrorMessage: this.$t("server_error"),
+            defaultErrorMessage: this.$t("error_downloading_file"),
+          });
+          console.log(error);
+        });
+    },
+    getFileName(fileName) {
+      return fileName.split(".").slice(0, -1).join(".");
+    },
+    cancelAnnotationEditMode() {
+      this.$store.dispatch("document/resetEditAnnotation");
+      this.$store.dispatch("selection/disableSelection");
+      this.$store.dispatch("selection/setSelectedEntities", null);
+    },
   },
 };
 </script>

package/src/components/DocumentPage/DummyPage.vue

@@ -20,18 +20,20 @@ import { PIXEL_RATIO } from "../../constants";
 export default {
   props: {
     width: {
-      default: 0
+      default: 0,
+      type: Number,
     },
     height: {
-      default: 0
-    }
+      default: 0,
+      type: Number,
+    },
   },
   computed: {
     ...mapState("display", ["scale"]),
     actualSizeViewport() {
       return {
         width: this.width * this.scale,
-        height: this.height * this.scale
+        height: this.height * this.scale,
       };
     },
 
@@ -39,7 +41,7 @@ export default {
       const { width: actualSizeWidth, height: actualSizeHeight } =
         this.actualSizeViewport;
       const [pixelWidth, pixelHeight] = [actualSizeWidth, actualSizeHeight].map(
-        dim => Math.ceil(dim / PIXEL_RATIO)
+        (dim) => Math.ceil(dim / PIXEL_RATIO)
       );
       return { width: pixelWidth, height: pixelHeight };
     },
@@ -47,7 +49,7 @@ export default {
     canvasStyle() {
       const { width, height } = this.scaledViewport;
       return `width: ${width}px; height: ${height}px; margin: 0 auto`;
-    }
-  }
+    },
+  },
 };
 </script>

package/src/components/DocumentPage/MultiAnnSelection.vue

@@ -44,7 +44,7 @@
 
 <script>
 import { mapGetters, mapState, mapActions } from "vuex";
-import { ChooseLabelSetModal } from "../DocumentAnnotations";
+import { table_reference_api } from "../../store/document";
 
 export default {
   props: {
@@ -105,15 +105,18 @@ export default {
       if (y < this.selection.start.y) {
         y = this.selection.start.y;
       }
+      x = x - this.buttonWidth;
+      y = y + marginTop;
 
       return {
-        x: x - this.buttonWidth,
-        y: y + marginTop,
+        x: x > 0 ? x : 0,
+        y: y > 0 ? y : 0,
         height: this.buttonHeight,
         width: this.buttonWidth,
       };
     },
     ...mapState("selection", ["selection", "isSelecting"]),
+    ...mapState("document", ["documentId"]),
     ...mapGetters("display", ["clientToBbox"]),
     ...mapGetters("document", ["entitiesOnSelection"]),
   },
@@ -128,32 +131,54 @@ export default {
   },
   methods: {
     openMultiAnnotationModal() {
-      this.$buefy.modal.open({
-        parent: this.$parent,
-        component: ChooseLabelSetModal,
-        hasModalCard: true,
-        trapFocus: true,
-        canCancel: false,
-        customClass: "invisible-parent-modal",
-        props: { isMultipleAnnotations: true },
-        events: {
-          labelSet: this.chooseLabelSet,
-        },
+      this.$store.dispatch("display/showChooseLabelSetModal", {
+        show: true,
+        isMultipleAnnotations: true,
+        finish: this.submitAnnotations,
       });
     },
-    chooseLabelSet(labelSet) {
-      const tableSelection = {
-        labelSet,
-        position: {
-          x: this.selection.start.x,
-          y: this.selection.start.y,
-          width: this.selection.end.x - this.selection.start.x,
-          height: this.selection.end.y - this.selection.start.y,
-        },
-        entities: this.entities,
-      };
-      this.$store.dispatch("selection/disableSelection");
-      this.$emit("finished", tableSelection);
+
+    async submitAnnotations(labelSet) {
+      const columns = labelSet.labels.map((label) => {
+        return {
+          field: `${label.id}`,
+          label: label.name,
+          centered: true,
+        };
+      });
+
+      const orderedEntities = this.processRows(columns);
+
+      const annotations = [];
+
+      orderedEntities.forEach((orderedEntity) => {
+        annotations.push({
+          document: this.documentId,
+          span: orderedEntity.spans,
+          label: orderedEntity.label_id,
+          is_correct: true,
+          revised: false,
+          label_set: labelSet.id,
+          set_reference: orderedEntity.row_index,
+          origin: table_reference_api,
+        });
+      });
+
+      this.$store
+        .dispatch("document/createAnnotation", annotations)
+        .then(() => {
+          this.$store.dispatch("selection/disableSelection");
+          this.$emit("finished");
+        })
+        .catch((error) => {
+          this.$store.dispatch("document/createErrorMessage", {
+            error,
+            serverErrorMessage: this.$t("server_error"),
+            defaultErrorMessage: this.$t("error_creating_multi_ann"),
+          });
+          this.$store.dispatch("selection/disableSelection");
+          this.$emit("finished");
+        });
     },
 
     onButtonEnter() {
@@ -296,6 +321,50 @@ export default {
 
       this.entities = cols;
     },
+
+    processRows(columns) {
+      const orderedEntities = []; // this will match the order of entities in the table so we have a way of tracking them once we submit
+      let rowIndex = 0;
+
+      Object.entries(this.entities).forEach(([key, groupedEntity]) => {
+        let row = null;
+        columns.forEach((column, index) => {
+          let spans = [];
+          if (
+            Object.entries(groupedEntity)[index] &&
+            Object.entries(groupedEntity)[index].length > 0
+          ) {
+            spans = Object.entries(groupedEntity)[index][1];
+          }
+          const entityExists = spans.length > 0;
+
+          let textContent = "";
+
+          spans.forEach((entity) => {
+            textContent = `${textContent} ${entity.offset_string}`;
+          });
+
+          row = {
+            ...row,
+            [column.field]: textContent,
+          };
+          if (entityExists) {
+            const customEntity = {
+              spans: [...spans],
+              label_id: column.field,
+              row_index: rowIndex,
+            };
+
+            orderedEntities.push(customEntity);
+          }
+        });
+        if (row !== null) {
+          rowIndex++;
+        }
+      });
+      return orderedEntities;
+    },
+
     ...mapActions("selection", ["moveSelection"]),
   },
 };

package/src/components/DocumentPage/NewAnnotation.vue

@@ -5,9 +5,11 @@
       v-model="selectedSet"
       aria-role="list"
       :class="[
+        'annotation-dropdown',
         'no-padding-bottom',
         setsList.length === 0 ? 'no-padding-top' : '',
       ]"
+      scrollable
     >
       <template #trigger>
         <b-button
@@ -69,7 +71,8 @@
         v-model="selectedLabel"
         aria-role="list"
         :disabled="!labels || labels.length === 0"
-        class="label-dropdown"
+        scrollable
+        class="label-dropdown annotation-dropdown"
       >
         <template #trigger>
           <b-button
@@ -110,7 +113,7 @@
         type="is-primary"
         class="popup-button primary-button"
         :label="$t('save')"
-        :disabled="loading || !getTextFromEntities || !selectedLabel"
+        :disabled="loading || !spanSelection || !selectedLabel"
         @click.prevent="save"
       />
     </div>
@@ -126,7 +129,7 @@ const margin = 12;
 const widthOfPopup = 205;
 
 import { mapGetters, mapState } from "vuex";
-import { ChooseLabelSetModal } from "../DocumentAnnotations";
+import { MULTI_ANN_TABLE_FEATURE } from "../../constants";
 
 export default {
   props: {
@@ -158,22 +161,22 @@ export default {
     ...mapGetters("document", [
       "numberOfAnnotationSetGroup",
       "labelsFilteredForAnnotationCreation",
-      "getTextFromEntities",
     ]),
+    ...mapState("selection", ["spanSelection"]),
     top() {
-      const top = this.newAnnotation[0].entity.scaled.y - heightOfPopup; // subtract the height of the popup plus some margin
+      const top = this.newAnnotation[0].scaled.y - heightOfPopup; // subtract the height of the popup plus some margin
 
       //check if the popup will not go off the container on the top
-      return this.newAnnotation[0].entity.scaled.y > heightOfPopup
+      return this.newAnnotation[0].scaled.y > heightOfPopup
         ? top
-        : this.newAnnotation[0].entity.scaled.y +
-            this.newAnnotation[0].entity.scaled.height +
+        : this.newAnnotation[0].scaled.y +
+            this.newAnnotation[0].scaled.height +
             margin;
     },
     left() {
       const left =
-        this.newAnnotation[0].entity.scaled.x +
-        this.newAnnotation[0].entity.scaled.width / 2 -
+        this.newAnnotation[0].scaled.x +
+        this.newAnnotation[0].scaled.width / 2 -
         widthOfPopup / 2; // add the entity half width to be centered and then subtract half the width of the popup
 
       //check if the popup will not go off the container
@@ -186,7 +189,15 @@ export default {
       }
     },
     textFromEntities() {
-      return this.getTextFromEntities();
+      if (!this.spanSelection) return;
+
+      // get array of all offset strings
+      let text = this.spanSelection.map((span) => {
+        return span.offset_string;
+      });
+
+      // join all the strings to become a single string of text
+      return text.join().split(",").join(" ");
     },
   },
   watch: {
@@ -210,13 +221,16 @@ export default {
   },
   methods: {
     close() {
-      this.$store.dispatch("document/setSelectedEntities", null);
+      this.$store.dispatch("selection/setSelectedEntities", null);
       this.$emit("close");
     },
     save() {
       this.loading = true;
       const span = this.newAnnotation.flatMap((ann) => {
-        return { ...ann.entity.original, offset_string: ann.content };
+        return {
+          ...ann.original,
+          offset_string: ann.original.offset_string,
+        };
       });
 
       const annotationToCreate = {
@@ -247,15 +261,7 @@ export default {
           this.loading = false;
         });
     },
-    disableLabelSetModalShowing() {
-      // timeout to stop propagation of click event
-      setTimeout(() => {
-        this.isAnnSetModalShowing = false;
-      }, 500);
-    },
     chooseLabelSet(labelSet) {
-      this.disableLabelSetModalShowing();
-
       const newSet = {
         label_set: labelSet,
         labels: labelSet.labels,
@@ -265,20 +271,10 @@ export default {
       this.selectedSet = newSet;
     },
     openAnnotationSetCreation() {
-      this.isAnnSetModalShowing = true;
-
-      this.$buefy.modal.open({
-        parent: this.$parent,
-        component: ChooseLabelSetModal,
-        hasModalCard: true,
-        trapFocus: true,
-        canCancel: false,
-        onCancel: this.disableLabelSetModalShowing,
-        customClass: "invisible-parent-modal",
-        events: {
-          labelSet: this.chooseLabelSet,
-          close: this.disableLabelSetModalShowing,
-        },
+      this.$store.dispatch("display/showChooseLabelSetModal", {
+        show: true,
+        isMultipleAnnotations: MULTI_ANN_TABLE_FEATURE,
+        finish: this.chooseLabelSet,
       });
     },
     setTooltipText() {

package/src/components/DocumentPage/ScrollingDocument.vue

@@ -11,8 +11,9 @@
         "
       >
         <ScrollingPage
-          v-for="page in editMode ? documentPagesListForEditMode : pages"
+          v-for="page in editMode ? pagesForPostprocess : pages"
           :key="page.number"
+          ref="scrollingPage"
           :page="page"
           :client-height="clientHeight"
           :scroll-top="scrollTop"
@@ -20,6 +21,7 @@
           @page-jump="onPageJump"
         />
       </div>
+
       <div v-else class="loading-page">
         <b-skeleton width="100%" height="1000px" />
       </div>
@@ -29,7 +31,7 @@
   </div>
 </template>
 <script>
-import { mapState } from "vuex";
+import { mapState, mapGetters } from "vuex";
 import scroll from "../../directives/scroll";
 import ScrollingPage from "./ScrollingPage";
 import Toolbar from "./DocumentToolbar";
@@ -49,6 +51,8 @@ export default {
     return {
       scrollTop: 0,
       clientHeight: 0,
+      isScolling: false,
+      scrollTimeout: null,
     };
   },
 
@@ -57,9 +61,20 @@ export default {
       "recalculatingAnnotations",
       "selectedDocument",
       "loading",
+      "annotationSets",
+    ]),
+    ...mapState("edit", [
+      "editMode",
+      "documentPagesListForEditMode",
+      "pagesForPostprocess",
+    ]),
+    ...mapState("display", [
+      "scale",
+      "documentActionBar",
+      "pageChangedFromThumbnail",
+      "currentPage",
     ]),
-    ...mapState("edit", ["editMode", "documentPagesListForEditMode"]),
-    ...mapState("display", ["scale", "documentActionBar"]),
+    ...mapGetters("display", ["visiblePageRange"]),
 
     pages() {
       if (this.selectedDocument) {
@@ -69,7 +84,12 @@ export default {
       }
     },
     showToolbar() {
-      return this.pages.length > 0 && this.scale && !this.documentActionBar;
+      return (
+        !this.loading &&
+        this.pages.length > 0 &&
+        this.scale &&
+        !this.documentActionBar
+      );
     },
     showActionBar() {
       return this.documentActionBar !== null;
@@ -80,6 +100,9 @@ export default {
       this.scrollTop = 0;
     },
   },
+  mounted() {
+    this.$refs.scrollingDocument.addEventListener("scroll", this.handleScroll);
+  },
 
   methods: {
     updateScrollBounds() {
@@ -97,6 +120,24 @@ export default {
 
       this.$refs.scrollingDocument.scroll(scrollX, scrollY);
     },
+    handleScroll() {
+      if (this.pages.length === 1) return;
+
+      this.isScrolling = true;
+
+      clearTimeout(this.scrollTimeout);
+
+      this.scrollTimeout = setTimeout(() => {
+        this.isScrolling = false;
+
+        if (
+          this.pageChangedFromThumbnail &&
+          this.visiblePageRange[1] === this.currentPage
+        ) {
+          this.$store.dispatch("display/setPageChangedFromThumbnail", false);
+        }
+      }, 300);
+    },
   },
 };
 </script>

package/src/components/DocumentPage/ScrollingPage.vue

@@ -44,10 +44,12 @@ export default {
       previousFocusedAnnotation: null,
       previousY: null,
       pageBeingLoaded: false,
+      isScrolling: false,
     };
   },
 
   computed: {
+    ...mapState("display", ["pageChangedFromThumbnail"]),
     ...mapGetters("display", ["visiblePageRange", "bboxToRect"]),
     ...mapGetters("document", ["scrollDocumentToAnnotation"]),
 
@@ -88,7 +90,7 @@ export default {
       return this.scrollTop + this.clientHeight;
     },
 
-    ...mapState("display", ["scale", "currentPage"]),
+    ...mapState("display", ["currentPage"]),
     ...mapState("document", ["pages", "documentAnnotationSelected", "loading"]),
     ...mapState("edit", ["editMode"]),
   },
@@ -117,15 +119,12 @@ export default {
       }
     },
     isElementFocused(focused) {
-      if (!this.loading && focused) {
+      if (!this.loading && focused && !this.pageChangedFromThumbnail) {
         this.$store.dispatch("display/updateCurrentPage", this.page.number);
       }
     },
     currentPage(number) {
-      if (
-        (this.page.number === number || this.page.number === number) &&
-        !this.isElementFocused
-      ) {
+      if (this.page.number === number && !this.isElementFocused) {
         this.$emit("page-jump", this.elementTop, 0);
       }
     },