@konfuzio/document-validation-ui 0.1.59-dev.3 → 0.1.60-dev.0

package/src/components/DocumentPage/{AnnotationPopup.vue → NewAnnotation.vue}

@@ -1,24 +1,10 @@
 <!-- eslint-disable vue/no-v-html -->
 <template>
-  <div
-    class="annotation-popup"
-    :style="{
-      left: `${left}px`,
-      top: `${top}px`,
-      height: `${heightOfPopup}px`,
-    }"
-  >
-    <div v-if="!editAnnotation">
-      <div v-if="spanLoading" class="popup-input">
-        <b-icon icon="spinner" class="fa-spin loading-icon-size spinner" />
-      </div>
-      <input
-        v-else
-        v-model="textFromEntities"
-        class="popup-input"
-        type="text"
-      />
+  <div class="annotation-popup" :style="{ left: `${left}px`, top: `${top}px` }">
+    <div v-if="!textFromEntities" class="popup-input">
+      <b-icon icon="spinner" class="fa-spin loading-icon-size spinner" />
     </div>
+    <input v-else v-model="textFromEntities" class="popup-input" type="text" />
     <b-dropdown
       v-model="selectedSet"
       :disabled="!textFromEntities"
@@ -41,19 +27,17 @@
           ]"
           type="is-text"
         >
-          <span class="input-text">
-            {{
-              selectedSet
-                ? `${selectedSet.label_set.name} ${
-                    selectedSet.id
-                      ? numberOfAnnotationSetGroup(selectedSet)
-                      : `${numberOfLabelSetGroup(selectedSet.label_set)} (${$t(
-                          "new"
-                        )})`
-                  }`
-                : $t("select_annotation_set")
-            }}</span
-          >
+          {{
+            selectedSet
+              ? `${selectedSet.label_set.name} ${
+                  selectedSet.id
+                    ? numberOfAnnotationSetGroup(selectedSet)
+                    : `${numberOfLabelSetGroup(selectedSet.label_set)} (${$t(
+                        "new"
+                      )})`
+                }`
+              : $t("select_annotation_set")
+          }}
           <span class="caret-icon">
             <b-icon icon="angle-down" size="is-small" class="caret" />
           </span>
@@ -88,6 +72,7 @@
       size="is-large"
       position="is-bottom"
       class="bottom-aligned"
+      :close-delay="5000"
     >
       <template #content>
         <div
@@ -114,13 +99,13 @@
             ]"
             type="is-text"
           >
-            <span class="input-text">{{
+            {{
               selectedLabel
                 ? selectedLabel.name
                 : labels && labels.length === 0
                 ? $t("no_labels_to_choose")
                 : $t("select_label")
-            }}</span>
+            }}
             <span class="caret-icon">
               <b-icon icon="angle-down" size="is-small" class="caret" />
             </span>
@@ -159,12 +144,15 @@
  * This component is used to show a popup
  * for creating a new annotation.
  */
+const heightOfPopup = 192;
+const margin = 12;
+const widthOfPopup = 205;
 
 import { mapGetters, mapState } from "vuex";
 
 export default {
   props: {
-    spans: {
+    newAnnotation: {
       required: true,
       type: Array,
     },
@@ -183,9 +171,6 @@ export default {
   },
   data() {
     return {
-      heightOfPopup: 192,
-      margin: 12,
-      widthOfPopup: 205,
       selectedLabel: null,
       selectedSet: null,
       labels: null,
@@ -195,48 +180,51 @@ export default {
     };
   },
   computed: {
-    ...mapState("document", ["annotationSets", "documentId", "editAnnotation"]),
+    ...mapState("document", ["annotationSets", "documentId"]),
     ...mapGetters("document", [
       "numberOfAnnotationSetGroup",
       "numberOfLabelSetGroup",
       "labelsFilteredForAnnotationCreation",
     ]),
     ...mapState("display", ["showBranding"]),
-    ...mapGetters("display", ["clientToBbox", "bboxToRect"]),
-    ...mapState("selection", ["spanSelection", "selection", "spanLoading"]),
+    ...mapGetters("display", ["clientToBbox"]),
+    ...mapState("selection", ["spanSelection", "selection"]),
     top() {
       if (this.selection && this.selection.end) {
-        const top = this.selection.end.y + this.margin;
+        const top = this.selection.end.y + margin;
         //check if the popup will not go off the container on the top
-        return top + this.heightOfPopup < this.containerHeight
+        return top + heightOfPopup < this.containerHeight
           ? top
-          : this.selection.end.y - this.heightOfPopup;
+          : this.selection.end.y - heightOfPopup;
       } else {
-        const normalizedSpan = this.bboxToRect(this.page, this.spans[0]);
-        const top = normalizedSpan.y - this.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 normalizedSpan.y > this.heightOfPopup
+        return this.newAnnotation[0].scaled.y > heightOfPopup
           ? top
-          : normalizedSpan.y + normalizedSpan.height + this.margin;
+          : this.newAnnotation[0].scaled.y +
+              this.newAnnotation[0].scaled.height +
+              margin;
       }
     },
     left() {
       if (this.selection && this.selection.start && this.selection.end) {
         const left = this.selection.start.x;
         //check if the popup will not go off the container on the right
-        return left + this.widthOfPopup < this.containerWidth
+        return left + widthOfPopup < this.containerWidth
           ? left
-          : this.containerWidth - this.widthOfPopup;
+          : this.containerWidth - widthOfPopup;
+        return this.selection.start.x;
       } else {
-        const normalizedSpan = this.bboxToRect(this.page, this.spans[0]);
         const left =
-          normalizedSpan.x + normalizedSpan.width / 2 - this.widthOfPopup / 2; // add the entity half width to be centered and then subtract half the width of the popup
+          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
-        if (left + this.widthOfPopup > this.containerWidth) {
+        if (left + widthOfPopup > this.containerWidth) {
           // on the right side
-          return this.containerWidth - this.widthOfPopup;
+          return this.containerWidth - widthOfPopup;
         } else {
           // on the left side
           return left > 0 ? left : 0;
@@ -244,8 +232,10 @@ export default {
       }
     },
     textFromEntities() {
+      if (!this.spanSelection) return;
+
       let text = "";
-      this.spans.forEach((span) => {
+      this.spanSelection.forEach((span) => {
         text = `${text} ${span.offset_string}`;
       });
 
@@ -253,23 +243,17 @@ export default {
     },
   },
   watch: {
-    selectedSet(newValue, oldValue) {
+    selectedSet(newValue) {
       this.selectedLabel = null;
       this.labels = this.labelsFilteredForAnnotationCreation(newValue);
-      if (oldValue === null && this.editAnnotation) {
-        this.selectedLabel = this.editAnnotation.label;
-      } else if (this.labels.length === 1) {
+      if (this.labels.length === 1) {
         this.selectedLabel = this.labels[0];
       }
     },
   },
   mounted() {
     this.setsList = this.orderedSetList([...this.annotationSets]);
-
-    if (this.editAnnotation) {
-      this.heightOfPopup = 142;
-      this.selectedSet = this.editAnnotation.annotationSet;
-    } else if (this.setsList.length === 1) {
+    if (this.setsList.length === 1) {
       this.selectedSet = this.setsList[0];
     }
 
@@ -278,7 +262,7 @@ export default {
       document.body.addEventListener("click", this.clickOutside);
     }, 200);
   },
-  unmounted() {
+  destroyed() {
     document.body.removeEventListener("click", this.clickOutside);
   },
   methods: {
@@ -299,73 +283,61 @@ export default {
       return setsList;
     },
     close() {
-      if (this.editAnnotation) {
-        this.$store.dispatch("document/resetEditAnnotation");
-      }
-      this.$store.dispatch("selection/disableSelection");
+      this.$store.dispatch("selection/setSelectedEntities", null);
+      this.$store.dispatch("selection/endSelection");
       this.$emit("close");
     },
     save() {
-      if (this.editAnnotation) {
-        this.loading = true;
-        this.$store.dispatch("document/setEditAnnotation", {
-          id: this.editAnnotation.id,
-          index: this.editAnnotation.index,
-          label: this.selectedLabel,
-          labelSet: this.selectedSet.label_set,
-          annotationSet: this.selectedSet,
-          pageNumber: this.editAnnotation.pageNumber,
-        });
-
-        document.getElementById("save-ann").click();
-
-        return;
-      } else {
-        this.loading = true;
+      this.loading = true;
+      const span = this.newAnnotation.flatMap((ann) => {
+        return {
+          ...ann.original,
+          offset_string: ann.original.offset_string,
+        };
+      });
 
-        let selection_bbox = null;
+      let selection_bbox = null;
 
-        if (this.selection && this.selection.start && this.selection.end) {
-          selection_bbox = this.clientToBbox(
-            this.page,
-            this.selection.start,
-            this.selection.end
-          );
-        }
+      if (this.selection && this.selection.start && this.selection.end) {
+        selection_bbox = this.clientToBbox(
+          this.page,
+          this.selection.start,
+          this.selection.end
+        );
+      }
 
-        const annotationToCreate = {
-          document: this.documentId,
-          span: this.spans,
-          label: this.selectedLabel.id,
-          is_correct: true,
-          revised: false,
-        };
+      const annotationToCreate = {
+        document: this.documentId,
+        span: span,
+        label: this.selectedLabel.id,
+        is_correct: true,
+        revised: false,
+      };
 
-        if (selection_bbox) {
-          annotationToCreate.selection_bbox = selection_bbox;
-        }
+      if (selection_bbox) {
+        annotationToCreate.selection_bbox = selection_bbox;
+      }
 
-        if (this.selectedSet.id) {
-          annotationToCreate.annotation_set = this.selectedSet.id;
-        } else {
-          annotationToCreate.label_set = this.selectedSet.label_set.id;
-        }
-        this.$store
-          .dispatch("document/createAnnotation", {
-            annotation: annotationToCreate,
-          })
-          .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;
-          });
+      if (this.selectedSet.id) {
+        annotationToCreate.annotation_set = this.selectedSet.id;
+      } else {
+        annotationToCreate.label_set = this.selectedSet.label_set.id;
       }
+      this.$store
+        .dispatch("document/createAnnotation", {
+          annotation: annotationToCreate,
+        })
+        .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;
+        });
     },
     chooseLabelSet(labelSet) {
       // check if there's already a new entry for that label set to be created

package/src/components/DocumentPage/ScrollingPage.vue

@@ -1,7 +1,7 @@
 <template>
-  <div>
+  <div v-observe-visibility="visibilityChanged">
     <DummyPage
-      v-if="!loadedPage || !pageInVisibleRange(page)"
+      v-if="!loadedPage"
       :width="page.size[0]"
       :height="page.size[1]"
     />
@@ -179,6 +179,14 @@ export default {
           this.pageBeingLoaded = false;
         });
     },
+    visibilityChanged(isVisible) {
+      if (isVisible && !this.loadedPage && !this.pageBeingLoaded) {
+        this.loadPage();
+      }
+      if (!isVisible && this.loadedPage) {
+        this.$store.dispatch("document/unloadDocumentPage", this.page.number);
+      }
+    },
     pageInVisibleRange(page) {
       return (
         this.currentPage === page.number ||

package/src/components/DocumentThumbnails/LoadingThumbnail.vue

@@ -1,6 +1,9 @@
 <template>
-  <div class="loading-thumbnail">
-    <b-skeleton width="40px" height="57px" />
+  <div>
+    <b-skeleton
+      width="40px"
+      height="57px"
+    />
   </div>
 </template>
 
@@ -11,7 +14,7 @@
  */
 
 export default {
-  name: "LoadingThumbnail",
+  name: "LoadingThumbnail"
 };
 </script>
 

package/src/components/DocumentTopBar/DocumentTopBar.vue

@@ -159,7 +159,7 @@ export default {
   created() {
     window.addEventListener("resize", this.handleResize);
   },
-  unmounted() {
+  destroyed() {
     window.removeEventListener("resize", this.handleResize);
   },
   mounted() {
@@ -174,9 +174,7 @@ export default {
       this.$store.dispatch("document/setErrorMessageWidth", width);
     },
     handleResize() {
-      if (this.$refs.documentTopBar) {
-        this.setComponentWidth(this.$refs.documentTopBar.offsetWidth);
-      }
+      this.setComponentWidth(this.$refs.documentTopBar.offsetWidth);
     },
     getPreviousAndNextDocuments(filteredDocuments) {
       if (!filteredDocuments) return;

package/src/constants.js

@@ -2,4 +2,10 @@ export const PIXEL_RATIO = window.devicePixelRatio || 1;
 export const VIEWPORT_RATIO = 0.98;
 export const MINIMUM_APP_WIDTH = 600;
 export const MINIMUM_OPTIMIZED_APP_WIDTH = 950;
-export const TEXT_BREAKPOINT_WIDTH = 1800;
+export const TEXT_BREAKPOINT_WIDTH = (locale) => {
+  if (locale === "en") {
+    return 1350;
+  } else {
+    return 1800;
+  }
+};

package/src/i18n.js

@@ -1,4 +1,7 @@
-import { createI18n } from "vue-i18n";
+import Vue from "vue";
+import VueI18n from "vue-i18n";
+
+Vue.use(VueI18n);
 
 function loadLocaleMessages() {
   const locales = require.context(
@@ -17,7 +20,7 @@ function loadLocaleMessages() {
   return messages;
 }
 
-export const i18n = createI18n({
+export default new VueI18n({
   locale: process.env.VUE_APP_LOCALE || "en",
   fallbackLocale: "en",
   messages: loadLocaleMessages(),

package/src/main.js

@@ -1,26 +1,28 @@
 import App from "./components/App";
-import { createApp } from "vue";
+import Vue from "vue";
 import Buefy from "buefy";
 import VueKonva from "vue-konva";
-import { i18n } from "./i18n";
-import { store } from "./store";
-import VueObserveVisibility from "vue3-observe-visibility";
+import i18n from "./i18n";
+import store from "./store";
+import VueObserveVisibility from "vue-observe-visibility";
 import Icons from "./icons";
+import VueSplit from "vue-split-panel";
 
-const app = createApp();
-
-app.component("App", App);
-app.component("VueFontawesome", Icons);
-app.use(VueKonva);
-app.use(Buefy, {
+Vue.component("VueFontawesome", Icons);
+Vue.component("App", App);
+Vue.use(VueKonva);
+Vue.use(Buefy, {
   defaultIconPack: "fas",
   defaultIconComponent: "vue-fontawesome",
 });
-app.use(VueObserveVisibility);
-app.use(store);
-app.use(i18n);
+Vue.use(VueObserveVisibility);
+Vue.use(VueSplit);
 
 /**
  * Main entrypoint for the App
  */
-app.mount("#app");
+new Vue({
+  i18n,
+  store,
+  el: "#app",
+});

package/src/store/display.js

@@ -113,43 +113,32 @@ const getters = {
    * image rendering.
    */
   imageScale: (state) => (page) => {
-    if (
-      page.size &&
-      page.size.length > 0 &&
-      page.original_size &&
-      page.original_size.length > 0
-    ) {
-      return new BigNumber(page.size[0]).div(page.original_size[0]).toNumber();
-    }
-    return 0;
+    return new BigNumber(page.size[0]).div(page.original_size[0]).toNumber();
   },
   bboxToPoint:
     (state, getters) =>
     (page, point, hasOffset = false) => {
-      if (page && page.original_size && page.original_size.length > 1) {
-        const imageScale = getters.imageScale(page);
-        const { x, y } = point;
-        const pageHeight = new BigNumber(page.original_size[1]);
-        const newPoint = {
-          // left
-          x: new BigNumber(x)
-            .minus(hasOffset ? 1 : 0)
-            .times(state.scale)
-            .times(imageScale)
-            .div(PIXEL_RATIO)
-            .toNumber(),
-          // top
-          y: pageHeight
-            .minus(new BigNumber(y))
-            .minus(hasOffset ? 17.1 : 0)
-            .times(state.scale)
-            .times(imageScale)
-            .div(PIXEL_RATIO)
-            .toNumber(),
-        };
-        return newPoint;
-      }
-      return { x: 0, y: 0 };
+      const imageScale = getters.imageScale(page);
+      const { x, y } = point;
+      const pageHeight = new BigNumber(page.original_size[1]);
+      const newPoint = {
+        // left
+        x: new BigNumber(x)
+          .minus(hasOffset ? 1 : 0)
+          .times(state.scale)
+          .times(imageScale)
+          .div(PIXEL_RATIO)
+          .toNumber(),
+        // top
+        y: pageHeight
+          .minus(new BigNumber(y))
+          .minus(hasOffset ? 17.1 : 0)
+          .times(state.scale)
+          .times(imageScale)
+          .div(PIXEL_RATIO)
+          .toNumber(),
+      };
+      return newPoint;
     },
   bboxToRect:
     (state, getters) =>
@@ -270,11 +259,8 @@ const actions = {
         commit("SET_SCALE", autoScale);
         break;
       case "all": {
-        commit(
-          "SET_SCALE",
-          getters.pageWidthScale(elementsWidth, client.width, viewport.width) -
-            0.5
-        );
+        const widthScale = getters.pageWidthScale(elementsWidth, client.width, viewport.width);
+        commit("SET_SCALE", widthScale);
         break;
       }
       case "custom": {

package/src/store/document.js

@@ -1134,7 +1134,6 @@ const actions = {
     // Check if we first open the document dashboard or the edit mode
     if (
       !state.publicView &&
-      state.selectedDocument &&
       (!state.selectedDocument.category ||
         (!state.selectedDocument.category_is_revised &&
           !getters.documentHasCorrectAnnotations &&
@@ -1542,6 +1541,9 @@ const actions = {
   showAcceptedAnnotations({ commit }, show) {
     commit("SET_SHOW_ACCEPTED_ANNOTATIONS", show);
   },
+  unloadDocumentPage: ({ commit }, pageNumber) => {
+    commit("REMOVE_PAGE", pageNumber);
+  },
 };
 
 const mutations = {
@@ -1815,6 +1817,9 @@ const mutations = {
   SET_SHOW_FEEDBACK_NEEDED_ANNOTATIONS: (state, show) => {
     state.annotationFilters.showFeedbackNeeded = show;
   },
+  REMOVE_PAGE: (state, pageNumber) => {
+    state.pages = state.pages.filter((p) => p.number !== pageNumber);
+  },
 };
 
 export default {

package/src/store/index.js

@@ -1,4 +1,5 @@
-import { createStore } from "vuex";
+import Vue from "vue";
+import Vuex from "vuex";
 
 import display from "./display";
 import document from "./document";
@@ -7,13 +8,15 @@ import project from "./project";
 import selection from "./selection";
 import edit from "./edit";
 
-export const store = createStore({
+Vue.use(Vuex);
+
+export default new Vuex.Store({
   modules: {
     display,
     document,
     category,
     project,
     selection,
-    edit,
-  },
-});
+    edit
+  }
+});