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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@konfuzio/document-validation-ui",
-  "version": "0.1.8",
+  "version": "0.1.9-pre-release-1",
   "repository": "git://github.com:konfuzio-ai/document-validation-ui.git",
   "main": "dist/app.js",
   "scripts": {

package/src/components/DocumentAnnotations/AnnotationContent.vue

@@ -21,9 +21,6 @@
     >
       {{ span.offset_string }}
     </span>
-    <span v-else class="annotation-value">
-      {{ span.offset_string }}
-    </span>
   </div>
 </template>
 
@@ -70,59 +67,34 @@ export default {
     ...mapGetters("document", [
       "isAnnotationInEditMode",
       "pageAtIndex",
-      "getTextFromEntities",
       "isDocumentReviewed",
     ]),
     ...mapGetters("display", ["bboxToRect"]),
-    ...mapGetters("selection", ["isValueArray"]),
     ...mapState("selection", ["spanSelection"]),
     ...mapState("document", [
       "editAnnotation",
       "publicView",
       "annotations",
       "newAcceptedAnnotations",
-      "selectedEntities",
       "showActionError",
     ]),
+
+    isAnnotationDeleted() {
+      return this.annotation.revised && !this.annotation.is_correct;
+    },
+    isAnnotationBeingEdited() {
+      return this.isAnnotationInEditMode(this.annotation.id, this.spanIndex);
+    },
     annotationText() {
       if (this.isAnnotationBeingEdited) {
-        if (this.selectedEntities && this.selectedEntities.length > 0) {
-          return this.getTextFromEntities();
-        }
         return this.$refs.contentEditable.textContent.trim();
       } else {
         return this.span.offset_string;
       }
     },
-    isAnnotationDeleted() {
-      return this.annotation.revised && !this.annotation.is_correct;
-    },
-    isAnnotationBeingEdited() {
-      return this.isAnnotationInEditMode(this.annotation.id, this.spanIndex);
-    },
   },
+
   watch: {
-    span(newValue) {
-      if (this.isAnnotationBeingEdited && newValue) {
-        if (this.isValueArray(newValue)) {
-          newValue.map((span) => {
-            if (
-              span.offset_string &&
-              span.offset_string !== this.span.offset_string
-            )
-              this.setText(span.offset_string);
-          });
-        } else {
-          if (
-            (newValue.offset_string &&
-              newValue.offset_string !== this.span.offset_string) ||
-            newValue.offset_string !==
-              this.$refs.contentEditable.textContent.trim()
-          )
-            this.setText(newValue.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)
@@ -135,16 +107,7 @@ export default {
         this.handleCancel(true);
       }
     },
-    selectedEntities(newValue) {
-      if (!newValue) return;
 
-      if (
-        this.editAnnotation &&
-        this.annotation.id === this.editAnnotation.id
-      ) {
-        this.setText(this.getTextFromEntities());
-      }
-    },
     saveChanges(newValue) {
       if (newValue) {
         this.saveAnnotationChanges();
@@ -169,6 +132,7 @@ export default {
         !this.isLoading
       ) {
         this.$store.dispatch("selection/selectElement", this.annotation.id);
+
         this.$store
           .dispatch("document/setEditAnnotation", {
             id: this.annotation.id,
@@ -221,7 +185,7 @@ export default {
         this.$refs.contentEditable.blur();
       }
 
-      this.$store.dispatch("document/setSelectedEntities", null);
+      this.$store.dispatch("selection/setSelectedEntities", null);
     },
     handlePaste(event) {
       // TODO: modify to only paste plain text
@@ -234,11 +198,18 @@ export default {
         event.preventDefault();
       }
 
+      let index;
+      if (this.editAnnotation && this.editAnnotation.index) {
+        index = this.editAnnotation.index;
+      } else {
+        index = this.spanIndex;
+      }
+
       // API call handled in parent component - AnnotationRow
       this.$emit(
         "save-annotation-changes",
         this.annotation,
-        this.spanIndex,
+        index,
         this.span,
         this.annotationText
       );

package/src/components/DocumentAnnotations/AnnotationRow.vue

@@ -71,6 +71,9 @@
               :annotation-set="annotationSet"
               :is-hovered="hoveredAnnotation"
               :save-changes="saveChanges"
+              :is-missing-annotation="
+                annotationIsNotFound(annotationSet, label)
+              "
               @save-empty-annotation-changes="saveEmptyAnnotationChanges"
             />
           </div>
@@ -80,6 +83,7 @@
             :annotation-set="annotationSet"
             :is-hovered="hoveredAnnotation"
             :save-changes="saveChanges"
+            :is-missing-annotation="annotationIsNotFound(annotationSet, label)"
             @save-empty-annotation-changes="saveEmptyAnnotationChanges"
           />
         </div>
@@ -110,6 +114,7 @@ import AnnotationDetails from "./AnnotationDetails";
 import AnnotationContent from "./AnnotationContent";
 import EmptyAnnotation from "./EmptyAnnotation";
 import AnnotationActionButtons from "./AnnotationActionButtons";
+import { isElementArray } from "../../utils/utils";
 
 export default {
   name: "AnnotationRow",
@@ -162,20 +167,22 @@ export default {
       "hoveredAnnotationSet",
       "enableGroupingFeature",
       "publicView",
-      "selectedEntities",
       "newAcceptedAnnotations",
       "annotationsMarkedAsMissing",
       "documentId",
       "showActionError",
       "missingAnnotations",
     ]),
-    ...mapState("selection", ["spanSelection", "elementSelected"]),
+    ...mapState("selection", [
+      "spanSelection",
+      "elementSelected",
+      "selectedEntities",
+    ]),
     ...mapGetters("document", [
       "isAnnotationInEditMode",
       "annotationIsNotFound",
       "isDocumentReviewed",
     ]),
-    ...mapGetters("selection", ["isValueArray"]),
     defaultSpan() {
       if (
         this.annotation &&
@@ -189,15 +196,11 @@ export default {
     spanForEditing() {
       return (
         this.spanSelection &&
-        this.isValueArray(this.spanSelection) &&
+        isElementArray(this.spanSelection) &&
         this.isAnnotationInEditMode(this.annotationId())
       );
     },
-    spanFromSelectedEntities() {
-      return this.selectedEntities.flatMap((ann) => {
-        return { ...ann.entity.original, offset_string: ann.content };
-      });
-    },
+
     isAnnotation() {
       return (
         this.annotation &&
@@ -277,7 +280,22 @@ export default {
         this.isLoading = false;
       }
     },
+    selectedEntities(newValue) {
+      if (!newValue) return;
+
+      if (this.isAnnotationInEditMode(this.annotationId())) {
+        this.isLoading = true;
+      }
+    },
+    spanSelection(newValue, oldValue) {
+      // check if spanSelection has new value from entity selection
+      // to stop loading after the text appears in the field
+      if (newValue) {
+        this.isLoading = false;
+      }
+    },
   },
+
   methods: {
     annotationId() {
       if (!this.annotationSet || !this.label) return;
@@ -391,7 +409,7 @@ export default {
       }
     },
     showSaveButton() {
-      if (!this.editAnnotation || this.isLoading) return;
+      if (!this.editAnnotation || this.isLoading || !this.spanSelection) return;
 
       // Check if it's an Annotation or Empty Annotation
       if (this.isAnnotation) {
@@ -399,22 +417,18 @@ export default {
       } else {
         if (!this.isAnnotationInEditMode(this.annotationId())) return;
 
-        // Check if an entity was selected instead of bbox
-        if (this.selectedEntities && this.selectedEntities.length > 0) {
-          return this.elementSelected === this.annotationId();
-        } else {
-          // Check if an entity was selected instead of bbox
-          return (
-            this.elementSelected === this.annotationId() &&
-            this.spanSelection &&
-            Array.isArray(this.spanSelection)
-          );
-        }
+        return (
+          this.elementSelected === this.annotationId() &&
+          this.spanSelection &&
+          Array.isArray(this.spanSelection)
+        );
       }
     },
     handleMissingAnnotation() {
       if (!this.label || !this.annotationSet) return;
 
+      this.isLoading = true;
+
       // will emit to the DocumentAnnotations component, where the method is handled
       // & dispatched to the store
       this.$parent.$emit(
@@ -475,77 +489,38 @@ export default {
     },
     handleSaveAnnotationChanges(
       annotation,
-      spanIndex,
+      index,
       annotationSpan,
-      annotationText
+      annotationContent
     ) {
-      let updatedString;
-
+      // This function deals with declining Annotations
+      // or editing an Annotation or a part of it (if multi line)
       this.isLoading = true;
 
-      // Check if we are deleting a single annotation that it's not multi-lined
-      let isToDelete =
-        annotationText.length === 0 &&
-        (!this.isValueArray(annotation.span) || annotation.span.length === 1);
+      let updatedString; // what will be sent to the API
+      let storeAction; // if it will be 'delete' or 'patch'
 
-      let storeAction;
+      // Validate if we are deleting an Annotation that it's not multi-lined
+      let isToDelete =
+        annotationContent.length === 0 &&
+        (!isElementArray(annotation.span) || annotation.span.length === 1);
 
+      // Verify if we delete the entire Annotation or a part of the text
       if (isToDelete || this.toDecline) {
         storeAction = "document/deleteAnnotation";
       } else {
+        // Editing the Annotation
+        // Deleting part of multi-line Annotation
         storeAction = "document/updateAnnotation";
 
         let spans = [...annotation.span];
 
-        // Validations to consider span as an array (multiline annotations) or object
-        if (annotationText.length === 0 && this.isValueArray(annotation.span)) {
-          // if the annotation content in one row was deleted
-          // check if it it part of an array
-          // to only remove that string
-          spans.splice(spanIndex, 1);
-        } else if (
-          this.spanSelection &&
-          this.isValueArray(this.spanSelection)
-        ) {
-          let span;
-
-          // Check if editing was from selecting an entity
-          if (this.selectedEntities && this.selectedEntities.length > 0) {
-            span = this.spanFromSelectedEntities;
-          } else {
-            spans = [...this.spanSelection];
-            span = this.createSpan(
-              this.spanSelection[spanIndex],
-              annotationText
-            );
-          }
+        const span = this.createSpan(annotationSpan, annotationContent);
 
-          // span is array, only update current one
-          spans[spanIndex] = {
-            ...spans[spanIndex],
-            span,
-          };
-        } else {
-          // if span is NOT an array, but an object
-          let span;
-
-          if (this.selectedEntities && this.selectedEntities.length > 0) {
-            spans = this.spanFromSelectedEntities;
-          } else if (this.spanSelection) {
-            span = this.createSpan(this.spanSelection, annotationText);
-
-            spans[spanIndex] = {
-              ...spans[spanIndex],
-              ...span,
-            };
-          } else {
-            span = this.createSpan(annotationSpan, annotationText);
-
-            spans[spanIndex] = {
-              ...spans[spanIndex],
-              ...span,
-            };
-          }
+        spans[index] = span;
+
+        if (annotationContent.length === 0) {
+          spans.splice(index, 1);
         }
 
         updatedString = {
@@ -571,13 +546,13 @@ export default {
         .finally(() => {
           this.$store.dispatch("document/resetEditAnnotation");
           this.$store.dispatch("selection/disableSelection");
-          this.$store.dispatch("document/setSelectedEntities", null);
+          this.$store.dispatch("selection/setSelectedEntities", null);
           this.toDecline = false;
         });
     },
-    createSpan(span, annotationText) {
+    createSpan(span, annotationContent) {
       return {
-        offset_string: annotationText,
+        offset_string: annotationContent,
         page_index: span.page_index,
         x0: span.x0,
         x1: span.x1,
@@ -589,18 +564,11 @@ export default {
     },
     saveEmptyAnnotationChanges() {
       let annotationToCreate;
-      let span;
-
-      if (this.selectedEntities && this.selectedEntities.length > 0) {
-        span = this.spanFromSelectedEntities;
-      } else {
-        span = this.spanSelection;
-      }
 
       if (this.annotationSet.id) {
         annotationToCreate = {
           document: this.documentId,
-          span: span,
+          span: this.spanSelection,
           label: this.label.id,
           annotation_set: this.annotationSet.id,
           is_correct: true,
@@ -610,7 +578,7 @@ export default {
         // if annotation set id is null
         annotationToCreate = {
           document: this.documentId,
-          span: span,
+          span: this.spanSelection,
           label: this.label.id,
           label_set: this.annotationSet.label_set.id,
           is_correct: true,
@@ -637,7 +605,7 @@ export default {
       this.$store.dispatch("document/resetEditAnnotation");
       if (this.elementSelected) {
         this.$store.dispatch("selection/disableSelection");
-        this.$store.dispatch("document/setSelectedEntities", null);
+        this.$store.dispatch("selection/setSelectedEntities", null);
       }
     },
     enableLoading(annotations) {

package/src/components/DocumentAnnotations/DocumentAnnotations.vue

@@ -385,14 +385,16 @@ export default {
           },
         ];
       } else if (this.editAnnotation && this.editAnnotation.id !== null) {
-        // iif annotation is marked as missing from "delete" key
+        // if annotation is marked as missing from "delete" key
 
-        missing = {
-          document: parseInt(this.documentId),
-          label: this.editAnnotation.label,
-          label_set: this.editAnnotation.labelSet,
-          annotation_set: this.editAnnotation.annotationSet,
-        };
+        missing = [
+          {
+            document: parseInt(this.documentId),
+            label: this.editAnnotation.label,
+            label_set: this.editAnnotation.labelSet,
+            annotation_set: this.editAnnotation.annotationSet,
+          },
+        ];
       } else if (annotationSet && markAllMissing) {
         // mark all annotations as missing in annotation set
 
@@ -447,6 +449,8 @@ export default {
         })
         .finally(() => {
           this.$store.dispatch("document/setAnnotationsMarkedAsMissing", null);
+          this.$store.dispatch("document/resetEditAnnotation");
+          this.$store.dispatch("selection/disableSelection");
         });
     },
 

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>