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

package/src/components/DocumentAnnotations/EmptyAnnotation.vue

@@ -10,32 +10,38 @@
           editAnnotation &&
           editAnnotation.id === emptyAnnotationId() &&
           'error-editing',
-        isEmptyAnnotationEditable() ? '' : 'label-empty',
+        !isEmptyAnnotationEditable() && !isMissingAnnotation && 'label-empty',
         isAnnotationBeingEdited() && 'clicked',
-        annotationIsNotFound(annotationSet, label) && 'missing-annotation',
+        isMissingAnnotation && 'missing-annotation',
       ]"
       :contenteditable="isEmptyAnnotationEditable()"
       @keypress.enter="saveEmptyAnnotationChanges"
       @click="handleEditEmptyAnnotation"
       @focus="handleEditEmptyAnnotation"
-    >
-      <span v-if="span && span.offset_string && isEmptyAnnotationEditable()">
-        {{ span.offset_string }}
-      </span>
+      ><!-- eslint-disable vue/no-v-html -->
       <span
-        v-else-if="annotationIsNotFound(annotationSet, label)"
-        class="not-found-text"
+        v-if="isFindingAnnotation"
+        v-html="$t('draw_box_document', { label_name: label.name })"
       >
+      </span>
+      <span v-else-if="isMissingAnnotation" class="not-found-text">
         {{ $t("missing_from_document") }}
       </span>
+      <span
+        v-else-if="span && span.offset_string && isEmptyAnnotationEditable()"
+      >
+        {{ span.offset_string }}
+      </span>
       <span v-else>
         {{ $t("no_data_found") }}
       </span>
+      <!--eslint-enable-->
     </span>
   </div>
 </template>
 <script>
 import { mapState, mapGetters } from "vuex";
+import { isElementArray } from "../../utils/utils";
 
 /**
  * This component is responsible for managing empty annotations (labels with no annotations).
@@ -65,80 +71,50 @@ export default {
       type: Boolean,
       required: false,
     },
-  },
-  data() {
-    return {
-      isLoading: false,
-    };
+    isMissingAnnotation: {
+      type: Boolean,
+      required: true,
+      default: false,
+    },
   },
   computed: {
-    ...mapGetters("document", [
-      "isAnnotationInEditMode",
-      "getTextFromEntities",
-      "annotationIsNotFound",
-      "isDocumentReviewed",
-    ]),
-    ...mapGetters("selection", ["isValueArray"]),
+    ...mapGetters("document", ["isAnnotationInEditMode", "isDocumentReviewed"]),
     ...mapState("selection", ["spanSelection", "elementSelected"]),
     ...mapState("document", [
       "editAnnotation",
       "publicView",
-      "selectedEntities",
       "showActionError",
     ]),
+    isFindingAnnotation() {
+      return (
+        this.editAnnotation &&
+        this.editAnnotation.id === this.emptyAnnotationId() &&
+        (!this.span || !this.span.offset_string)
+      );
+    },
   },
+
   watch: {
     span(newValue) {
       if (this.elementSelected === this.emptyAnnotationId() && newValue) {
-        if (this.isValueArray(newValue))
+        if (isElementArray(newValue))
           newValue.map((span) => {
             if (span.offset_string) {
               span.offset_string =
                 this.$refs.emptyAnnotation.textContent.trim();
               span.offset_string_original =
                 this.$refs.emptyAnnotation.textContent.trim();
-
-              this.setText(span.offset_string);
             }
           });
       }
     },
-    editAnnotation(newAnnotation, oldAnnotation) {
-      // verify if new annotation in edit mode is not this one and if this
-      // one was selected before so we set the state to the previous one (like a cancel)
-      if (oldAnnotation && oldAnnotation.id === this.emptyAnnotationId()) {
-        this.cancelEmptyAnnotation(true);
-      }
-    },
-    selectedEntities(newValue) {
-      if (!newValue && this.isAnnotationBeingEdited(this.emptyAnnotationId())) {
-        this.setText(
-          this.$t("draw_box_document", { label_name: this.label.name })
-        );
-        return;
-      }
-
-      if (
-        newValue &&
-        this.editAnnotation &&
-        this.emptyAnnotationId() === this.editAnnotation.id
-      ) {
-        const text = this.getTextFromEntities();
-        this.setText(text);
-      }
-    },
     spanSelection(newValue) {
-      if (this.elementSelected === this.emptyAnnotationId() && newValue) {
-        const isSpanArray = Array.isArray(newValue);
+      if (!newValue) return;
 
-        // Check if the bbox is empty
-        if (
-          (isSpanArray && !newValue[0].offset_string) ||
-          (!isSpanArray && !newValue.offset_string)
-        ) {
-          this.$store.dispatch("document/resetEditAnnotation");
-          this.$store.dispatch("selection/disableSelection");
-        }
+      //   // Check if the bbox has no string
+      if (newValue[0] && !newValue[0].offset_string) {
+        this.$store.dispatch("document/resetEditAnnotation");
+        this.$store.dispatch("selection/disableSelection");
       }
     },
   },
@@ -160,23 +136,22 @@ export default {
       if (
         this.publicView ||
         this.isDocumentReviewed ||
-        this.annotationIsNotFound(this.annotationSet, this.label)
+        this.isMissingAnnotation
       )
         return;
 
       if (
         !this.publicView &&
         !this.isDocumentReviewed &&
-        !this.isLoading &&
         this.elementSelected !== this.emptyAnnotationId()
       ) {
-        this.setText(
-          this.$t("draw_box_document", { label_name: this.label.name })
-        );
+        this.$store.dispatch("selection/disableSelection");
+        this.$store.dispatch("selection/setSelectedEntities", null);
         this.$store.dispatch(
           "selection/selectElement",
           this.emptyAnnotationId()
         );
+
         this.$store.dispatch("document/setEditAnnotation", {
           id: this.emptyAnnotationId(),
           index: this.spanIndex,
@@ -186,28 +161,10 @@ export default {
         });
       }
     },
-    cancelEmptyAnnotation(wasOutsideClick = false) {
-      if (wasOutsideClick) {
-        this.setText(this.$t("no_data_found"));
-      } else {
-        this.$store.dispatch("selection/disableSelection");
-      }
-
-      this.isLoading = false;
-      this.$store.dispatch("document/setSelectedEntities", null);
-
-      if (this.$refs.emptyAnnotation) {
-        this.$refs.emptyAnnotation.blur();
-      }
-    },
     isEmptyAnnotationEditable() {
-      if (this.selectedEntities && this.selectedEntities.length > 0) {
-        return (
-          this.elementSelected === this.emptyAnnotationId() && !this.isLoading
-        );
-      } else if (
+      if (
         (this.spanSelection && this.spanSelection[this.spanIndex] === 0) ||
-        this.annotationIsNotFound(this.annotationSet, this.label)
+        this.isMissingAnnotation
       ) {
         return false;
       } else {
@@ -215,8 +172,7 @@ export default {
           this.elementSelected === this.emptyAnnotationId() &&
           this.spanSelection &&
           this.spanSelection[this.spanIndex] &&
-          this.spanSelection[this.spanIndex].offset_string != null &&
-          !this.isLoading
+          this.spanSelection[this.spanIndex].offset_string != null
         );
       }
     },
@@ -230,9 +186,6 @@ export default {
       // API call handled in parent component - AnnotationRow
       this.$emit("save-empty-annotation-changes");
     },
-    setText(text) {
-      this.$refs.emptyAnnotation.innerHTML = text;
-    },
   },
 };
 </script>

package/src/components/DocumentDashboard.vue

@@ -36,7 +36,9 @@
     </div>
     <div
       v-if="
-        selectedDocument && waitingForSplittingConfirmation(selectedDocument)
+        selectedDocument &&
+        waitingForSplittingConfirmation(selectedDocument) &&
+        !documentBeingSplit
       "
     >
       <SplittingSuggestionsModal />
@@ -101,10 +103,11 @@ export default {
       "selectedDocument",
       "splittingSuggestions",
     ]),
-    ...mapState("edit", ["editMode", "splitOverview"]),
+    ...mapState("edit", ["editMode", "splitOverview", "documentBeingSplit"]),
     ...mapGetters("display", ["isMinimumWidth"]),
     ...mapGetters("document", ["waitingForSplittingConfirmation"]),
   },
+
   watch: {
     selectedDocument(newDocument, oldDocument) {
       if (newDocument && !oldDocument) {

package/src/components/DocumentEdit/DocumentEdit.vue

@@ -231,7 +231,11 @@ export default {
       const newPage = { page: page, origin: origin };
       const removedPage = { page: 0, origin: origin };
 
-      if (
+      if (this.splitSuggestionsEnabled && origin === "AI") {
+        // if manual suggestions were added but we enable automatic splitting,
+        // this last one takes over
+        this.splittingLines.splice(page - 1, 1, newPage);
+      } else if (
         page === this.splittingLines.length ||
         (!this.splitSuggestionsEnabled && !found && origin === "AI")
       ) {
@@ -239,10 +243,6 @@ export default {
         // Or if splitting is switched off, but some of the suggestion lines
         // were removed manually
         return;
-      } else if (this.splitSuggestionsEnabled && origin === "AI") {
-        // if manual suggestions were added but we enable automatic splitting,
-        // this last one takes over
-        this.splittingLines.splice(page - 1, 1, newPage);
       } else if (found) {
         // If splitting is switched off and we have manual splits,
         // those should stay unchanged

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

@@ -68,8 +68,8 @@
                 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>
@@ -221,7 +221,6 @@ export default {
           scaled: {
             ...box,
           },
-          clickSelected: false,
         };
       });
     },
@@ -258,6 +257,7 @@ export default {
       "isSelecting",
       "selectionFromBbox",
       "spanSelection",
+      "selectedEntities",
     ]),
     ...mapState("display", [
       "scale",
@@ -271,7 +271,6 @@ export default {
       "editAnnotation",
       "selectedDocument",
       "publicView",
-      "selectedEntities",
     ]),
     ...mapState("edit", ["editMode"]),
     ...mapGetters("display", ["visiblePageRange", "bboxToRect"]),
@@ -292,10 +291,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) {
@@ -390,10 +392,16 @@ export default {
       });
     },
 
-    handleClickedAnnotation(annotation) {
-      this.closePopups(true);
+    handleFocusedAnnotation(annotation, trigger) {
       this.$store.dispatch("document/resetEditAnnotation");
-      this.$store.dispatch("document/setSidebarAnnotationSelected", annotation);
+      this.$store.dispatch("document/setSidebarAnnotationSelected", {
+        annotation,
+        trigger,
+      });
+
+      if (trigger && trigger === "click") {
+        this.closePopups(true);
+      }
     },
 
     handleClickedEntity(entity) {
@@ -406,24 +414,22 @@ export default {
         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
       );
 
       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 {
@@ -432,11 +438,11 @@ 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);
       }
     },
 
@@ -492,10 +498,10 @@ export default {
       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
           );
         });
       }

package/src/components/DocumentPage/DocumentToolbar.vue

@@ -124,6 +124,9 @@ export default {
     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);
     },
@@ -132,12 +135,18 @@ export default {
         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);
     },
     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);
 
@@ -148,6 +157,11 @@ export default {
         this.$store.dispatch("display/updateScale", { scale });
       });
     },
+    cancelAnnotationEditMode() {
+      this.$store.dispatch("document/resetEditAnnotation");
+      this.$store.dispatch("selection/disableSelection");
+      this.$store.dispatch("selection/setSelectedEntities", null);
+    },
   },
 };
 </script>

package/src/components/DocumentPage/NewAnnotation.vue

@@ -110,7 +110,7 @@
         type="is-primary"
         class="popup-button primary-button"
         :label="$t('save')"
-        :disabled="loading || !getTextFromEntities || !selectedLabel"
+        :disabled="loading || !spanSelection || !selectedLabel"
         @click.prevent="save"
       />
     </div>
@@ -158,22 +158,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 +186,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 +218,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 = {

package/src/locales/de.json

@@ -3,7 +3,7 @@
   "no_label_sets_found_description": "In diesem Dokument sind keine Label Sets vorhanden.",
   "no_labels_found": "Keine Labels vorhanden",
   "no_labels_description": "In diesem Label Set sind keine Labels vorhanden.",
-  "resolution_not_supported": "Die App wird bei dieser Auflösung nicht unterstützt",
+  "resolution_not_supported": "Die aktuelle Auflösung wird nicht unterstützt",
   "upload_documents": "Laden Sie Ihre Dokumente hoch",
   "request_trial": "Fordern Sie Ihren Probezugang an",
   "warning_message": "Die KI kann nicht trainiert werden, wenn Sie den Text manuell ändern.",
@@ -26,11 +26,11 @@
   "invalid_email": "Bitte geben Sie eine gültige E-Mail-Adresse ein.",
   "members": "Mitglieder",
   "select": "Auswählen",
-  "document_successfully_handed": "Dokument erfolgreich übergeben an",
-  "handover_not_possible": "Eine Übergabe war nicht möglich. Bitte versuchen Sie es später erneut.",
-  "small_viewport_title": "Kleine Ansichtsfenstergröße",
-  "small_viewport_info": "Es tut uns leid, aber Konfuzio ist nicht für diese Ansichtsfenstergröße optimiert. Für eine bessere Bedienbarkeit öffnen Sie es bitte in einem größeren Ansichtsfenster.",
-  "ok": "Ok, verstanden",
+  "document_successfully_handed": "Dokument erfolgreich zugewiesen an",
+  "handover_not_possible": "Eine Zuweisung war nicht möglich. Bitte versuchen Sie es später erneut.",
+  "small_viewport_title": "Kleine Fenstergröße",
+  "small_viewport_info": "Es tut uns leid, aber Konfuzio ist nicht für diese Fenstergröße optimiert. Für eine bessere Bedienbarkeit öffnen Sie es bitte in einem größeren Ansichtsfenster.",
+  "ok": "Ok",
   "no_data_found": "Zum Bearbeiten anklicken...",
   "draw_box_document": "Find <i>{label_name}</i> in the document",
   "confidence": "Konfidenz",
@@ -52,9 +52,10 @@
   "missing_annotation": "Als fehlend markieren",
   "ann_exists": "Eine Annotation für dieses Label und Label-Set existiert bereits.",
   "lite_mode": "Schreibgeschützt",
-  "limited_functionalities": "Sie verwenden die schreibgeschützte Version mit begrenzten Funktionalitäten.",
+  "limited_functionalities": "Sie verwenden die schreibgeschützte Version mit begrenzte Funktionalität.",
   "split": "Aufteilen",
-  "reorder": "Umsortieren",
+  "reorder": "Sortieren",
+  "rotate": "Rotieren",
   "edit_error": "Die Änderungen konnten nicht gespeichert werden. Bitte versuchen Sie es später erneut.",
   "overview": "Übersicht",
   "select_pages": "Sie können nun Seiten drehen, neu sortieren und Dokumente splitten.",
@@ -116,7 +117,7 @@
   "split_modal_title": "Dokument aufteilen",
   "split_modal_body": "Wir haben Ihre Datei gescannt und <strong>{number_of_split_documents}</strong> verschiedene Dokumente gefunde. <strong>Wir empfehlen dringend,</strong> sie zu diesem Zeitpunkt aufzuteilen, da sonst alle Fortschritte, die Sie gemacht haben, aufgrund der erneuten Extraktion der Dokumentdaten verloren gehen.",
   "do_it_later": "Ich werde es später machen",
-  "review_now": "Jetzt reviewen",
+  "review_now": "Jetzt überprüfen",
   "recommended": "Empfohlen",
   "smart_split": "Smart Split",
   "smart_split_suggestions": "Unsere Smart Split-Vorschläge sind grün hervorgehoben",
@@ -125,10 +126,10 @@
   "splitting_warning": "Beachten Sie bitte, dass alle Annotationen, die Sie in diesem Dokument gemacht haben, nicht gespeichert werden, wenn Sie fortfahren.",
   "no": "Nein",
   "yes": "Ja",
-  "split_modal_no_suggestions": "Do you need to split the document? <strong>We strongly recommend</strong> splitting it at this stage, otherwise all the progress you’ve made will be lost in the future.",
+  "split_modal_no_suggestions": "Soll das Dokument geteilt werden? Wir <strong>empfehlen</strong> das Dokument jetzt zuteilen, da sonst alle Fortschritte, die in der Zwischenzeit gemacht werden,verloren gehen.",
   "missing_from_document": "Fehlt im Dokument",
-  "edit_label": "Edit label",
-  "delete_label": "Delete label",
-  "table": "Table",
-  "delete_table": "Delete table"
+  "edit_label": "Label editieren",
+  "delete_label": "Label löschen",
+  "table": "Tabelle",
+  "prepare_document": "Dokument vorbereiten"
 }

package/src/locales/en.json

@@ -131,6 +131,5 @@
   "missing_from_document": "Missing from the document",
   "edit_label": "Edit label",
   "delete_label": "Delete label",
-  "table": "Table",
-  "delete_table": "Delete table"
+  "table": "Table"
 }

package/src/locales/es.json

@@ -124,10 +124,12 @@
   "splitting_warning": "Ten en cuenta que se perderán las anotaciones que hayas confirmado en el documento.",
   "no": "No",
   "yes": "Sí",
-  "split_modal_no_suggestions": "Do you need to split the document? <strong>We strongly recommend</strong> splitting it at this stage, otherwise all the progress you’ve made will be lost in the future.",
+  "split_modal_no_suggestions": "¿Necesitas dividir el documento? <strong>Te recomendamos</strong> hacerlo en este momento, o de lo contrario se perderán los cambios realizados.",
   "missing_from_document": "Falta en el documento",
   "edit_label": "Edit label",
   "delete_label": "Delete label",
   "table": "Table",
-  "delete_table": "Delete table"
+  "new_multi_ann_description": "Selecciona un modelo de datos de los existentes, luego deselecciona las etiquetas que no existen en este documento.",
+  "new_multi_ann_title": "Crear múltiples anotaciones",
+  "prepare_document": "Prepara el documento"
 }

package/src/store/category.js

@@ -102,7 +102,7 @@ const actions = {
               state.documentsInProject[i]
             )
           ) {
-            dispatch("document/setDocumentError", true);
+            dispatch("document/setDocumentError", null, { root: true });
             // If error, add 1
             // Then go to next item
             errors += 1;