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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@konfuzio/document-validation-ui",
-  "version": "0.1.8",
+  "version": "0.1.9-pre-release-2",
   "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/AnnotationDetails.vue

@@ -3,9 +3,10 @@
     :animated="false"
     :position="fromTable ? 'is-top' : 'is-bottom'"
     :class="[!fromTable && 'left-aligned', 'annotation-details']"
+    :active="!publicView"
   >
     <div :class="['label-icon', fromTable && 'is-small']">
-      <div v-if="created(annotation) || edited(annotation)">
+      <div v-if="(created(annotation) || edited(annotation)) && !publicView">
         <div
           v-if="accepted(annotation)"
           :class="[
@@ -28,13 +29,13 @@
         </div>
       </div>
       <div
-        v-else-if="annotationIsNotFound(annotationSet, label)"
+        v-else-if="annotationIsNotFound(annotationSet, label) && !publicView"
         :class="['annotation-details-icon', animate ? 'animated-ripple' : '']"
       >
         <NotFoundIcon />
       </div>
       <div
-        v-else-if="notExtracted(annotation)"
+        v-else-if="notExtracted(annotation) && !publicView"
         :class="[
           'annotation-details-icon',
           animate ? 'animated-ripple' : '',
@@ -45,7 +46,7 @@
       </div>
       <div v-else>
         <div
-          v-if="accepted(annotation)"
+          v-if="accepted(annotation) && !publicView"
           :class="[
             'annotation-details-icon success',
             animate ? 'animated-ripple' : '',
@@ -143,7 +144,7 @@
   </b-tooltip>
 </template>
 <script>
-import { mapGetters } from "vuex";
+import { mapGetters, mapState } from "vuex";
 import CheckMark from "../../assets/images/CheckMark";
 import AcceptedCheckMark from "../../assets/images/AcceptedCheckMark";
 import QuestionMark from "../../assets/images/QuestionMark";
@@ -199,6 +200,7 @@ export default {
       "getUser",
       "annotationIsNotFound",
     ]),
+    ...mapState("document", ["publicView"]),
   },
   watch: {
     annotation(newAnnotation, oldAnnotation) {

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 &&
@@ -232,24 +235,28 @@ export default {
       if (
         newSidebarAnnotationSelected &&
         this.annotation &&
-        this.annotation.id === newSidebarAnnotationSelected.id
+        this.annotation.id === newSidebarAnnotationSelected.annotation.id
       ) {
         clearTimeout(this.annotationAnimationTimeout);
 
-        const runAnimation = () => {
-          this.$el.scrollIntoView({
-            behavior: "smooth",
-            block: "center",
-            inline: "nearest",
-          });
-          this.isSelected = true;
-          // remove annotation selection after some time
-          this.annotationAnimationTimeout = setTimeout(() => {
-            this.$store.dispatch("document/setSidebarAnnotationSelected", null);
-            this.isSelected = false;
-          }, 1500);
-        };
-        runAnimation();
+        this.isSelected = true;
+        // remove annotation selection after some time
+        this.annotationAnimationTimeout = setTimeout(() => {
+          this.$store.dispatch("document/setSidebarAnnotationSelected", null);
+          this.isSelected = false;
+        }, 1500);
+
+        // Check if sidebarAnnotationSelected changed from a click or hover
+        if (newSidebarAnnotationSelected.trigger === "click") {
+          const runAnimation = () => {
+            this.$el.scrollIntoView({
+              behavior: "smooth",
+              block: "center",
+              inline: "nearest",
+            });
+          };
+          runAnimation();
+        }
       }
     },
     editAnnotation(newValue) {
@@ -277,7 +284,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;
@@ -355,6 +377,7 @@ export default {
     },
     showAcceptButton() {
       return (
+        !this.editAnnotation &&
         !this.isAnnotationInEditMode(this.annotationId()) &&
         this.annotation &&
         !this.annotation.revised &&
@@ -363,6 +386,7 @@ export default {
     },
     showDeclineButton() {
       return (
+        !this.editAnnotation &&
         !this.isAnnotationInEditMode(this.annotationId()) &&
         this.annotation &&
         this.hoveredAnnotation === this.annotation.id
@@ -370,6 +394,7 @@ export default {
     },
     showMissingButton() {
       return (
+        !this.editAnnotation &&
         this.hoveredAnnotation &&
         !this.isAnnotationInEditMode(this.annotationId()) &&
         !this.annotation &&
@@ -378,6 +403,7 @@ export default {
     },
     showRestoreButton() {
       return (
+        !this.editAnnotation &&
         this.hoveredAnnotation &&
         !this.isAnnotationInEditMode(this.annotationId()) &&
         this.annotationIsNotFound(this.annotationSet, this.label)
@@ -391,7 +417,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 +425,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 +497,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 +554,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 +572,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 +586,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 +613,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

@@ -91,7 +91,10 @@
         </div>
 
         <div v-for="label in annotationSet.labels" :key="label.id">
-          <div class="labels">
+          <div
+            class="labels"
+            v-if="!(label.annotations.length === 0 && publicView)"
+          >
             <DocumentLabel
               :label="label"
               :annotation-set="annotationSet"
@@ -385,14 +388,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 +452,8 @@ export default {
         })
         .finally(() => {
           this.$store.dispatch("document/setAnnotationsMarkedAsMissing", null);
+          this.$store.dispatch("document/resetEditAnnotation");
+          this.$store.dispatch("selection/disableSelection");
         });
     },