@konfuzio/document-validation-ui 0.1.21-dev.0 → 0.1.21

package/jest.config.js

@@ -1,4 +1,5 @@
 module.exports = {
   preset: "@vue/cli-plugin-unit-jest/presets/no-babel",
   setupFiles: ["./tests/setup.js"],
+  transformIgnorePatterns: ["node_modules/(?!axios)"],
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@konfuzio/document-validation-ui",
-  "version": "0.1.21-dev.0",
+  "version": "0.1.21",
   "repository": "git://github.com:konfuzio-ai/document-validation-ui.git",
   "main": "dist/app.js",
   "scripts": {
@@ -29,8 +29,7 @@
     "@fortawesome/vue-fontawesome": "^2.0.10",
     "@sentry/tracing": "^6.19.4",
     "@sentry/vue": "^6.2.0",
-    "axios": "^0.21.1",
-    "axios-extensions": "^3.1.6",
+    "axios": "^1.6.0",
     "bignumber.js": "^9.1.0",
     "buefy": "^0.9.22",
     "konva": "^8.3.13",

package/src/api.js

@@ -1,5 +1,4 @@
 import axios from "axios";
-import { cacheAdapterEnhancer } from "axios-extensions";
 
 let HTTP, FILE_REQUEST, authToken, appLocale;
 const DEFAULT_URL = "https://app.konfuzio.com";
@@ -15,7 +14,6 @@ HTTP = axios.create({
 FILE_REQUEST = axios.create({
   baseURL: FILE_URL || `${DEFAULT_URL}`,
   responseType: "blob",
-  adapter: cacheAdapterEnhancer(axios.defaults.adapter),
 });
 
 const setAuthToken = (token) => {
@@ -78,5 +76,5 @@ export default {
   setLocale,
   FILE_REQUEST,
   DEFAULT_URL,
-  FILE_URL
+  FILE_URL,
 };

package/src/assets/scss/new_annotation.scss

@@ -14,6 +14,10 @@
   padding: 8px;
   cursor: default;
 
+  &.small {
+    height: 142px;
+  }
+
   .popup-input {
     background-color: $text-color;
     color: $white;

package/src/components/DocumentAnnotations/AnnotationContent.vue

@@ -11,8 +11,8 @@
           editAnnotation &&
           editAnnotation.id === annotation.id &&
           'error-editing',
-        isAnnotationBeingEdited && 'clicked-ann'      
-        ]"
+        isAnnotationBeingEdited && 'clicked-ann',
+      ]"
       role="textbox"
       :contenteditable="isAnnotationBeingEdited"
       @click="handleEditAnnotation"
@@ -119,9 +119,10 @@ export default {
           .dispatch("document/setEditAnnotation", {
             id: this.annotation.id,
             index: this.spanIndex,
-            label: this.label.id,
-            labelSet: this.annotationSet.label_set.id,
-            annotationSet: this.annotationSet.id,
+            label: this.label,
+            labelSet: this.annotationSet.label_set,
+            annotationSet: this.annotationSet,
+            pageNumber: this.span.page_index + 1,
           })
           .then(() => {
             this.$refs.contentEditable.focus();

package/src/components/DocumentAnnotations/DocumentAnnotations.vue

@@ -420,9 +420,9 @@ export default {
         missing = [
           {
             document: parseInt(this.documentId),
-            label: this.editAnnotation.label,
-            label_set: this.editAnnotation.labelSet,
-            annotation_set: this.editAnnotation.annotationSet,
+            label: this.editAnnotation.label.id,
+            label_set: this.editAnnotation.labelSet.id,
+            annotation_set: this.editAnnotation.annotationSet.id,
           },
         ];
       } else if (annotationSet && markAllMissing) {

package/src/components/DocumentAnnotations/EmptyAnnotation.vue

@@ -152,9 +152,9 @@ export default {
         this.$store.dispatch("document/setEditAnnotation", {
           id: this.emptyAnnotationId(),
           index: this.spanIndex,
-          label: this.label.id,
-          labelSet: this.annotationSet.label_set.id,
-          annotationSet: this.annotationSet.id,
+          label: this.label,
+          labelSet: this.annotationSet.label_set,
+          annotationSet: this.annotationSet,
         });
       }
     },

package/src/components/DocumentPage/DocumentPage.vue

@@ -18,6 +18,17 @@
       :container-height="scaledViewport.height"
       @close="closePopups"
     />
+    <EditAnnotation
+      v-if="
+        editAnnotation &&
+        editAnnotation.pageNumber &&
+        editAnnotation.pageNumber === currentPage
+      "
+      :edit-annotation="editAnnotation"
+      :page="page"
+      :container-width="scaledViewport.width"
+      :container-height="scaledViewport.height"
+    />
 
     <AnnSetTableOptions v-if="showAnnSetTable" :page="page" />
 
@@ -127,6 +138,7 @@ import api from "../../api";
 import BoxSelection from "./BoxSelection";
 import MultiAnnSelection from "./MultiAnnSelection";
 import NewAnnotation from "./NewAnnotation";
+import EditAnnotation from "./EditAnnotation";
 import AnnSetTableOptions from "./AnnSetTableOptions";
 
 export default {
@@ -135,6 +147,7 @@ export default {
     BoxSelection,
     MultiAnnSelection,
     NewAnnotation,
+    EditAnnotation,
     AnnSetTableOptions,
   },
 
@@ -498,6 +511,7 @@ export default {
       if (this.newAnnotation && this.newAnnotation.length > 0) {
         entityIsSelected = this.newAnnotation.find((selectedEntity) => {
           return (
+            selectedEntity.original &&
             selectedEntity.original.offset_string ===
               entity.original.offset_string &&
             selectedEntity.original.x0 === entity.original.x0 &&

package/src/components/DocumentPage/EditAnnotation.vue

@@ -0,0 +1,340 @@
+<template>
+  <div
+    v-if="annotation"
+    class="annotation-popup small"
+    :style="{ left: `${left}px`, top: `${top}px` }"
+  >
+    <b-dropdown
+      v-model="selectedSet"
+      aria-role="list"
+      :class="[
+        'annotation-dropdown',
+        'no-padding-bottom',
+        setsList.length === 0 ? 'no-padding-top' : '',
+      ]"
+      scrollable
+    >
+      <template #trigger>
+        <b-button
+          :class="['popup-input', selectedSet ? '' : 'not-selected']"
+          type="is-text"
+        >
+          {{
+            selectedSet
+              ? `${selectedSet.label_set.name} ${
+                  selectedSet.id
+                    ? numberOfAnnotationSetGroup(selectedSet)
+                    : `(${$t("new")})`
+                }`
+              : $t("select_annotation_set")
+          }}
+          <span class="caret-icon">
+            <b-icon icon="angle-down" size="is-small" class="caret" />
+          </span>
+        </b-button>
+      </template>
+      <b-dropdown-item
+        v-for="(set, index) in setsList"
+        :key="`${set.label_set.id}_${index}`"
+        aria-role="listitem"
+        :value="set"
+      >
+        <span>{{
+          `${set.label_set.name} ${
+            set.id ? numberOfAnnotationSetGroup(set) : `(${$t("new")})`
+          }`
+        }}</span>
+      </b-dropdown-item>
+      <b-button
+        type="is-ghost"
+        :class="[
+          'add-ann-set',
+          'dropdown-item',
+          'no-icon-margin',
+          setsList.length > 0 ? 'has-border' : '',
+        ]"
+        icon-left="plus"
+        @click="openAnnotationSetCreation"
+      >
+        {{ $t("new_ann_set_title") }}
+      </b-button>
+    </b-dropdown>
+    <b-tooltip
+      multilined
+      :active="selectedSet && (!labelsFiltered || labelsFiltered.length === 0)"
+      size="is-large"
+      position="is-bottom"
+      class="bottom-aligned"
+      :close-delay="5000"
+    >
+      <b-dropdown
+        v-if="selectedLabel"
+        v-model="selectedLabel"
+        aria-role="list"
+        :disabled="!labelsFiltered || labelsFiltered.length === 0"
+        scrollable
+        class="label-dropdown annotation-dropdown"
+      >
+        <template #trigger>
+          <b-button
+            class="popup-input"
+            :disabled="!labelsFiltered"
+            type="is-text"
+          >
+            {{ selectedLabel.name }}
+            <span class="caret-icon">
+              <b-icon icon="angle-down" size="is-small" class="caret" />
+            </span>
+          </b-button>
+        </template>
+        <b-dropdown-item
+          v-for="label in labelsFiltered"
+          :key="label.id"
+          aria-role="listitem"
+          :value="label"
+        >
+          <span>{{ label.name }}</span>
+        </b-dropdown-item>
+      </b-dropdown>
+    </b-tooltip>
+    <div class="annotation-buttons">
+      <b-button
+        type="is-text"
+        class="cancel-button popup-button primary-button"
+        :label="$t('cancel')"
+        :disabled="loading"
+        @click.prevent="close"
+      />
+      <b-button
+        type="is-primary"
+        class="popup-button primary-button"
+        :label="$t('save')"
+        :disabled="loading || !spanSelection || !selectedLabel"
+        @click.prevent="save"
+      />
+    </div>
+  </div>
+</template>
+<script>
+/**
+ * This component is used to show a popup
+ * for creating a new annotation.
+ */
+const heightOfPopup = 142;
+const margin = 12;
+const widthOfPopup = 205;
+
+import { mapGetters, mapState } from "vuex";
+import { MULTI_ANN_TABLE_FEATURE } from "../../constants";
+
+export default {
+  props: {
+    editAnnotation: {
+      required: true,
+      type: Object,
+    },
+    page: {
+      required: true,
+      type: Object,
+    },
+    containerWidth: {
+      type: Number,
+      required: true,
+    },
+    containerHeight: {
+      type: Number,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      annotation: null,
+      selectedLabel: null,
+      selectedSet: null,
+      labelsFiltered: null,
+      loading: false,
+      isAnnSetModalShowing: false,
+      setsList: [],
+    };
+  },
+  computed: {
+    ...mapState("document", [
+      "annotationSets",
+      "annotations",
+      "labels",
+      "documentId",
+    ]),
+    ...mapGetters("document", [
+      "numberOfAnnotationSetGroup",
+      "labelsFilteredForAnnotationCreation",
+      "isNegative",
+    ]),
+    ...mapGetters("display", ["bboxToRect"]),
+    ...mapState("selection", ["selection", "spanSelection"]),
+    top() {
+      const top = this.selection.start.y - heightOfPopup; // subtract the height of the popup plus some margin
+
+      const height = this.selection.end.y - this.selection.start.y;
+
+      //check if the popup will not go off the container on the top
+      return this.selection.start.y > heightOfPopup
+        ? top
+        : this.selection.start.y + height + margin;
+    },
+    left() {
+      const width = this.selection.end.x - this.selection.start.x;
+
+      const left = this.selection.start.x + 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
+      if (left + widthOfPopup > this.containerWidth) {
+        // on the right side
+        return this.containerWidth - widthOfPopup;
+      } else {
+        // on the left side
+        return left > 0 ? left : 0;
+      }
+    },
+  },
+  watch: {
+    selectedSet(newValue) {
+      this.labelsFiltered = this.labelsFilteredForAnnotationCreation(newValue);
+    },
+    editAnnotation() {
+      this.loadInfo();
+    },
+  },
+  mounted() {
+    this.loadInfo();
+
+    setTimeout(() => {
+      // prevent click propagation when opening the popup
+      document.body.addEventListener("click", this.clickOutside);
+    }, 200);
+  },
+  destroyed() {
+    document.body.removeEventListener("click", this.clickOutside);
+  },
+  methods: {
+    loadInfo() {
+      this.setsList = [...this.annotationSets];
+
+      this.selectedSet = this.annotationSets.find(
+        (annSet) => annSet.id === this.editAnnotation.annotationSet.id
+      );
+
+      this.labelsFiltered = this.labelsFilteredForAnnotationCreation(
+        this.selectedSet
+      );
+
+      // if existing label is not able to be chosen we add it manually
+      if (!this.labelsFiltered.includes(this.editAnnotation.label)) {
+        this.labelsFiltered.push(this.editAnnotation.label);
+      }
+
+      this.selectedLabel = this.editAnnotation.label;
+
+      this.annotation = this.annotations.find(
+        (ann) => ann.id === this.editAnnotation.id
+      );
+    },
+    close() {
+      this.$store.dispatch("document/resetEditAnnotation");
+      this.$store.dispatch("selection/disableSelection");
+      this.$store.dispatch("selection/setSelectedEntities", null);
+      this.$emit("close");
+    },
+    async save() {
+      this.loading = true;
+
+      if (
+        this.editAnnotation.labelSet.id !== this.selectedSet.id ||
+        this.editAnnotation.label.id !== this.selectedLabel.id
+      ) {
+        // first delete annotation, then create new one
+        await this.$store
+          .dispatch("document/deleteAnnotation", {
+            annotationId: this.annotation.id,
+          })
+          .catch((error) => {
+            this.$store.dispatch("document/createErrorMessage", {
+              error,
+              serverErrorMessage: this.$t("server_error"),
+              defaultErrorMessage: this.$t("edit_error"),
+            });
+          });
+
+        const spans = this.annotation.span;
+        spans[this.editAnnotation.index] = this.spanSelection;
+
+        const annotationToCreate = {
+          document: this.documentId,
+          span: spans,
+          label: this.selectedLabel.id,
+          is_correct: true,
+          revised: false,
+        };
+
+        if (this.selectedSet.id) {
+          annotationToCreate.annotation_set = this.selectedSet.id;
+        } else {
+          annotationToCreate.label_set = this.selectedSet.label_set.id;
+        }
+
+        // check if the selected label already has a negative annotation
+        let negativeAnnotationId;
+
+        if (
+          this.selectedLabel.annotations &&
+          this.selectedLabel.annotations.length > 0
+        ) {
+          const negativeAnnotation = this.selectedLabel.annotations.find(
+            (annotation) => this.isNegative(annotation)
+          );
+
+          if (negativeAnnotation) {
+            negativeAnnotationId = negativeAnnotation.id;
+          }
+        }
+
+        this.$store
+          .dispatch("document/createAnnotation", {
+            annotation: annotationToCreate,
+            negativeAnnotationId: negativeAnnotationId,
+          })
+          .catch((error) => {
+            this.$store.dispatch("document/createErrorMessage", {
+              error,
+              serverErrorMessage: this.$t("server_error"),
+              defaultErrorMessage: this.$t("error_creating_annotation"),
+            });
+          })
+          .finally(() => {
+            this.close();
+            this.loading = false;
+          });
+      } else {
+        this.close();
+      }
+    },
+    chooseLabelSet(labelSet) {
+      const newSet = {
+        label_set: labelSet,
+        labels: labelSet.labels,
+        id: null,
+      };
+      this.setsList.push(newSet);
+      this.selectedSet = newSet;
+    },
+    openAnnotationSetCreation() {
+      this.$store.dispatch("display/showChooseLabelSetModal", {
+        show: true,
+        isMultipleAnnotations: MULTI_ANN_TABLE_FEATURE,
+        finish: this.chooseLabelSet,
+      });
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss" src="../../assets/scss/new_annotation.scss"></style>

package/src/components/DocumentPage/ScrollingPage.vue

@@ -112,7 +112,7 @@ export default {
         this.$nextTick(() => {
           // Scroll to the annotation
           this.scrollTo(
-            this.getYForBbox(this.documentAnnotationSelected.span),
+            this.getYForBbox(this.documentAnnotationSelected.span) - 100, // offset for edit annotation popup
             this.getXForBbox(this.documentAnnotationSelected.span)
           );
         });

package/src/store/display.js

@@ -90,39 +90,42 @@ const getters = {
     (state, getters) =>
     (page, bbox, hasOffset = false) => {
       const imageScale = getters.imageScale(page);
-      const { x0, x1, y0, y1 } = bbox;
-      const pageHeight = new BigNumber(page.original_size[1]);
-      const rect = {
-        // left
-        x: new BigNumber(x0)
-          .minus(hasOffset ? 1 : 0)
-          .times(state.scale)
-          .times(imageScale)
-          .div(PIXEL_RATIO)
-          .toNumber(),
-        // top
-        y: pageHeight
-          .minus(new BigNumber(y1))
-          .minus(hasOffset ? 17.1 : 0)
-          .times(state.scale)
-          .times(imageScale)
-          .div(PIXEL_RATIO)
-          .toNumber(),
-        width: new BigNumber(x1)
-          .minus(x0)
-          .abs()
-          .times(state.scale)
-          .times(imageScale)
-          .div(PIXEL_RATIO)
-          .toNumber(),
-        height: new BigNumber(y1)
-          .minus(y0)
-          .times(state.scale)
-          .times(imageScale)
-          .div(PIXEL_RATIO)
-          .toNumber(),
-      };
-      return rect;
+      if (bbox.x0 && bbox.y0) {
+        const { x0, x1, y0, y1 } = bbox;
+        const pageHeight = new BigNumber(page.original_size[1]);
+        const rect = {
+          // left
+          x: new BigNumber(x0)
+            .minus(hasOffset ? 1 : 0)
+            .times(state.scale)
+            .times(imageScale)
+            .div(PIXEL_RATIO)
+            .toNumber(),
+          // top
+          y: pageHeight
+            .minus(new BigNumber(y1))
+            .minus(hasOffset ? 17.1 : 0)
+            .times(state.scale)
+            .times(imageScale)
+            .div(PIXEL_RATIO)
+            .toNumber(),
+          width: new BigNumber(x1)
+            .minus(x0)
+            .abs()
+            .times(state.scale)
+            .times(imageScale)
+            .div(PIXEL_RATIO)
+            .toNumber(),
+          height: new BigNumber(y1)
+            .minus(y0)
+            .times(state.scale)
+            .times(imageScale)
+            .div(PIXEL_RATIO)
+            .toNumber(),
+        };
+        return rect;
+      }
+      return { x: 0, y: 0, width: 0, height: 0 };
     },
   clientToBbox: (state, getters) => (page, start, end) => {
     /**