@konfuzio/document-validation-ui 0.1.11-dev.4 → 0.1.11-dev.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@konfuzio/document-validation-ui",
-  "version": "0.1.11-dev.4",
+  "version": "0.1.11-dev.6",
   "repository": "git://github.com:konfuzio-ai/document-validation-ui.git",
   "main": "dist/app.js",
   "scripts": {

package/src/components/DocumentAnnotations/AnnotationContent.vue

@@ -26,6 +26,7 @@
 
 <script>
 import { mapGetters, mapState } from "vuex";
+import { isElementArray } from "../../utils/utils";
 
 /**
  * This component is responsible for managing filled annotations.
@@ -80,13 +81,6 @@ export default {
     isAnnotationBeingEdited() {
       return this.isAnnotationInEditMode(this.annotation.id, this.spanIndex);
     },
-    annotationText() {
-      if (this.isAnnotationBeingEdited) {
-        return this.$refs.contentEditable.textContent.trim();
-      } else {
-        return this.span.offset_string;
-      }
-    },
   },
 
   watch: {
@@ -95,18 +89,33 @@ export default {
       // one was selected before so we set the state to the previous one (like a cancel)
 
       if (
+        !newAnnotation &&
         oldAnnotation &&
-        oldAnnotation.id === this.annotation.id &&
-        oldAnnotation.index === this.spanIndex
+        oldAnnotation.id === this.annotation.id
       ) {
         this.handleCancel(true);
+      } else if (
+        newAnnotation &&
+        oldAnnotation &&
+        newAnnotation.id === this.annotation.id &&
+        newAnnotation.id !== oldAnnotation.id
+      ) {
+        this.handleCancel();
       }
     },
+    span() {
+      // span content changed, ex. from click on entity
+      this.setText(this.span.offset_string);
+    },
   },
+
   methods: {
     setText(text) {
       this.$refs.contentEditable.textContent = text;
     },
+    getAnnotationText() {
+      return this.$refs.contentEditable.textContent.trim();
+    },
     handleEditAnnotation(event) {
       if (this.publicView || this.isDocumentReviewed) return;
 
@@ -187,39 +196,22 @@ export default {
         event.preventDefault();
       }
 
-      let index;
-      if (this.editAnnotation && this.editAnnotation.index) {
-        index = this.editAnnotation.index;
-      } else {
-        index = this.spanIndex;
-      }
-
-      let spans = [];
-
-      // Validate if we are deleting an Annotation that it's not multi-lined
-      let isToDelete =
-        this.annotationText.length === 0 &&
+      // Validate if we are declining an Annotation that is not multi-lined
+      // by deleting the content instead of clicking the 'decline' button
+      let isToDecline =
+        this.getAnnotationText().length === 0 &&
         (!isElementArray(this.annotation.span) ||
           this.annotation.span.length === 1);
 
-      if (!isToDelete) {
-        const span = this.createSpan();
-
-        spans = [...annotation.span];
-
-        spans[index] = span;
-
-        if (this.annotationText.length === 0) {
-          spans.splice(index, 1);
-        }
-      }
       // API call handled in parent component - AnnotationRow
-      this.$emit("save-annotation-changes", spans, isToDelete);
+      this.$emit("save-annotation-changes", isToDecline);
     },
-
     createSpan() {
+      const annotationText = this.getAnnotationText();
+      if (!annotationText) return;
+
       return {
-        offset_string: this.annotationText,
+        offset_string: annotationText,
         page_index: this.span.page_index,
         x0: this.span.x0,
         x1: this.span.x1,

package/src/components/DocumentAnnotations/AnnotationRow.vue

@@ -56,7 +56,7 @@
               :label="label"
               :annotation-set="annotationSet"
               :is-hovered="hoveredAnnotation"
-              @save-annotation-changes="saveAnnotationChanges"
+              @save-annotation-changes="handleSaveChanges"
             />
           </div>
         </div>
@@ -196,7 +196,6 @@ export default {
         this.isAnnotationInEditMode(this.annotationId())
       );
     },
-
     isAnnotation() {
       return (
         this.annotation &&
@@ -286,7 +285,7 @@ export default {
         this.isLoading = true;
       }
     },
-    spanSelection(newValue, oldValue) {
+    spanSelection(newValue) {
       // check if spanSelection has new value from entity selection
       // to stop loading after the text appears in the field
       if (newValue) {
@@ -412,7 +411,7 @@ export default {
       }
     },
     showSaveButton() {
-      if (!this.editAnnotation || this.isLoading || !this.spanSelection) return;
+      if (!this.editAnnotation || this.isLoading) return;
 
       // Check if it's an Annotation or Empty Annotation
       if (this.isAnnotation) {
@@ -445,6 +444,7 @@ export default {
     handleSaveChanges(decline) {
       if (this.publicView || this.isDocumentReviewed) return;
 
+      // Verify if we are editing a filled or empty annotation
       if (
         this.annotation &&
         (this.showAcceptButton() ||
@@ -454,14 +454,25 @@ export default {
             this.editAnnotation.index
           ))
       ) {
-        // retrieve all edited spans from every AnnotationContent component
         let spans = [];
-        Object.keys(this.$refs).forEach((ref) => {
-          if (ref.includes(`span_${this.annotation.id}`)) {
-            // call child component createSpan method
-            spans.push(this.$refs[ref][0].createSpan());
-          }
-        });
+
+        if (!decline) {
+          Object.keys(this.$refs).forEach((ref) => {
+            if (ref.includes(`span_${this.annotation.id}`)) {
+              const refElement = this.$refs[ref][0];
+              // call child component createSpan method
+              if (!refElement) return;
+
+              const span = refElement.createSpan();
+
+              // only add span if it's not null (offset_string not empty)
+              if (span) {
+                spans.push(span);
+              }
+            }
+          });
+        }
+
         this.saveAnnotationChanges(spans, decline);
       } else if (
         !this.annotation &&
@@ -494,7 +505,7 @@ export default {
           this.closedTag = null;
         });
     },
-    saveAnnotationChanges(spans, isToDeleteOrDecline) {
+    saveAnnotationChanges(spans, isToDecline) {
       // This function deals with declining Annotations
       // or editing an Annotation or a part of it (if multi line)
       this.isLoading = true;
@@ -503,7 +514,7 @@ export default {
       let storeAction; // if it will be 'delete' or 'patch'
 
       // Verify if we delete the entire Annotation or a part of the text
-      if (isToDeleteOrDecline) {
+      if (isToDecline || spans.length === 0) {
         storeAction = "document/deleteAnnotation";
       } else {
         // Editing the Annotation

package/src/components/DocumentPage/DocumentPage.vue

@@ -246,12 +246,7 @@ export default {
       );
     },
 
-    ...mapState("selection", [
-      "isSelecting",
-      "selectionFromBbox",
-      "spanSelection",
-      "selectedEntities",
-    ]),
+    ...mapState("selection", ["isSelecting", "selectedEntities"]),
     ...mapState("display", [
       "scale",
       "optimalScale",
@@ -416,6 +411,9 @@ export default {
           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(

package/src/store/selection.js

@@ -72,11 +72,18 @@ const actions = {
   },
 
   endSelection: ({ commit, state }, end) => {
-    const xDiff = Math.abs(state.selection.start.x - end.x);
-    const yDiff = Math.abs(state.selection.start.y - end.y);
-    // if start and end points are the same, or if we have a selection smaller than 5x5,
+    let xDiff;
+    let yDiff;
+
+    if (end) {
+      xDiff = Math.abs(state.selection.start.x - end.x);
+      yDiff = Math.abs(state.selection.start.y - end.y);
+    }
+
+    // if "end" is not provided, start and end points are the same, or if we have a selection smaller than 5x5,
     // just reset
     if (
+      !end ||
       (yDiff <= 5 && xDiff <= 5) ||
       (state.selection.start.x === end.x && state.selection.start.y == end.y)
     ) {