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

package/src/components/DocumentAnnotations/AnnotationActionButtons.vue

@@ -106,7 +106,6 @@
     <!-- save button -->
     <b-button
       v-if="showSave"
-      id="save-ann"
       :class="`button-action ${showText ? 'is-button-text' : 'is-button-icon'}`"
       :type="showText ? 'is-primary' : 'is-ghost'"
       @click.stop="save"
@@ -206,7 +205,9 @@ export default {
   data() {
     return {
       tooltipDelay: 700,
-      showText: window.innerWidth > TEXT_BREAKPOINT_WIDTH,
+      showText:
+        window.innerWidth >
+        TEXT_BREAKPOINT_WIDTH(this.$i18n ? this.$i18n.locale : "en"),
     };
   },
   computed: {
@@ -226,12 +227,13 @@ export default {
     window.addEventListener("resize", this.resize);
   },
 
-  unmounted() {
+  destroyed() {
     window.removeEventListener("resize", this.resize);
   },
   methods: {
     resize() {
-      this.showText = window.innerWidth > TEXT_BREAKPOINT_WIDTH;
+      this.showText =
+        window.innerWidth > TEXT_BREAKPOINT_WIDTH(this.$i18n.locale);
     },
     search() {
       this.$emit("search");

package/src/components/DocumentAnnotations/AnnotationContent.vue

@@ -11,10 +11,10 @@
           editAnnotation &&
           editAnnotation.id === annotation.id &&
           'error-editing',
-        isSpanBeingEdited && 'clicked-ann',
+        isAnnotationBeingEdited && 'clicked-ann',
       ]"
       role="textbox"
-      :contenteditable="isSpanBeingEdited"
+      :contenteditable="isAnnotationBeingEdited"
       @click="handleEditAnnotation"
       @paste="handlePaste"
       @keypress.enter="saveAnnotationChanges"
@@ -61,7 +61,11 @@ export default {
     };
   },
   computed: {
-    ...mapGetters("document", ["isAnnotationInEditMode", "isDocumentReviewed"]),
+    ...mapGetters("document", [
+      "isAnnotationInEditMode",
+      "pageAtIndex",
+      "isDocumentReviewed",
+    ]),
     ...mapGetters("display", ["bboxToRect"]),
     ...mapState("document", [
       "editAnnotation",
@@ -70,17 +74,19 @@ export default {
       "newAcceptedAnnotations",
       "showActionError",
     ]),
-    isSpanBeingEdited() {
-      return this.isAnnotationInEditMode(this.annotation.id, this.spanIndex);
-    },
     isAnnotationBeingEdited() {
-      return (
-        this.editAnnotation && this.annotation.id === this.editAnnotation.id
-      );
+      return this.isAnnotationInEditMode(this.annotation.id, this.spanIndex);
     },
   },
 
   watch: {
+    isAnnotationBeingEdited(newState, oldState) {
+      // 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 (!newState && oldState) {
+        this.handleCancel();
+      }
+    },
     span() {
       // span content changed, ex. from click on entity
       this.setText(this.span.offset_string);
@@ -104,15 +110,10 @@ export default {
       if (
         !this.publicView &&
         !this.isDocumentReviewed &&
-        !this.isSpanBeingEdited &&
+        !this.isAnnotationBeingEdited &&
         !this.isLoading
       ) {
-        if (!this.isAnnotationBeingEdited) {
-          this.$store.dispatch(
-            "selection/setSpanSelection",
-            this.annotation.span
-          );
-        }
+        this.$store.dispatch("selection/selectElement", this.annotation.id);
 
         this.$store
           .dispatch("document/setEditAnnotation", {
@@ -124,18 +125,44 @@ export default {
             pageNumber: this.span.page_index + 1,
           })
           .then(() => {
-            if (this.$refs.contentEditable) {
-              this.$refs.contentEditable.focus();
-            }
+            this.$refs.contentEditable.focus();
           })
           .catch((error) => {
             console.log(error);
           });
-        // check if this is part of a group of spans to show the whole bounding box as a placeholder
-        if (this.annotation.selection_bbox && this.annotation.span.length > 1) {
-          this.$store.dispatch("selection/setPlaceholderSelection", [
-            this.annotation.selection_bbox,
-          ]);
+
+        const page = this.pageAtIndex(this.span.page_index);
+        if (page) {
+          const { x, y, width, height } = this.bboxToRect(page, this.span);
+
+          const selection = {
+            start: {
+              x,
+              y,
+            },
+            end: {
+              x: x + width,
+              y: y + height,
+            },
+            pageNumber: page.number,
+            custom: false,
+          };
+
+          // check if this is part of a group of spans to show the whole bounding box as a placeholder
+          if (
+            this.annotation.selection_bbox &&
+            this.annotation.span.length > 1
+          ) {
+            selection.placeholderBox = this.bboxToRect(
+              page,
+              this.annotation.selection_bbox
+            );
+          }
+
+          this.$store.dispatch("selection/setSelection", {
+            selection,
+            span: this.span,
+          });
         }
       }
     },
@@ -146,7 +173,7 @@ export default {
         this.$refs.contentEditable.blur();
       }
 
-      this.$store.dispatch("selection/setSpanSelection", null);
+      this.$store.dispatch("selection/setSelectedEntities", null);
     },
     handlePaste(event) {
       // TODO: modify to only paste plain text

package/src/components/DocumentAnnotations/AnnotationRow.vue

@@ -15,13 +15,14 @@
   >
     <div class="annotations-width-slider">
       <b-slider
-        v-model="labelContainerWidth"
+        :value="labelWidth"
         type="is-move"
         :min="20"
         :max="80"
         :custom-formatter="(val) => `${$t('label_size')} ${val}%`"
         class="is-full-height show-hover show-line"
         :disabled="isAnnotationInEditMode()"
+        @input="setLabelWidth"
       />
     </div>
     <div
@@ -97,12 +98,7 @@
 
     <div class="annotation-row-right" :style="`width:${annotationWidth}%`">
       <div class="annotation-content">
-        <div
-          v-if="isAnnotationInEditMode(currentAnnotationId()) && spanLoading"
-        >
-          <b-icon style="width: 16px" icon="spinner" class="fa-spin" />
-        </div>
-        <div v-else-if="annotation" class="annotation-items">
+        <div v-if="annotation" class="annotation-items">
           <b-checkbox
             v-if="annotation.metadata && annotation.metadata.checkbox"
             v-model="isChecked"
@@ -133,8 +129,7 @@
         <div v-else>
           <div
             v-if="
-              spanSelection.length > 0 &&
-              isAnnotationInEditMode(currentAnnotationId())
+              spanSelection && isAnnotationInEditMode(currentAnnotationId())
             "
           >
             <EmptyAnnotation
@@ -249,7 +244,6 @@ export default {
       checkboxDefaultValue: checkboxValue,
       isCheckboxAvailable: false,
       isChecked: checkboxValue,
-      labelContainerWidth: 0,
     };
   },
   computed: {
@@ -267,8 +261,8 @@ export default {
     ]),
     ...mapState("selection", [
       "spanSelection",
+      "elementSelected",
       "selectedEntities",
-      "spanLoading",
     ]),
     ...mapState("display", ["labelWidth", "annotationWidth"]),
     ...mapState("project", ["showAnnotationTranslations"]),
@@ -325,12 +319,6 @@ export default {
     },
   },
   watch: {
-    labelWidth(width) {
-      this.labelContainerWidth = width;
-    },
-    labelContainerWidth(width) {
-      this.setLabelWidth(width);
-    },
     annotationId(newAnnotationId) {
       this.checkAnnotationSelection(newAnnotationId);
     },
@@ -395,7 +383,6 @@ export default {
   },
   mounted() {
     this.checkAnnotationSelection(this.annotationId);
-    this.labelContainerWidth = this.labelWidth;
   },
   methods: {
     ...mapActions("display", ["setLabelWidth"]),
@@ -451,10 +438,9 @@ export default {
 
       if (this.annotation && this.annotation.id) return this.annotation.id;
 
-      const setId =
-        this.annotationSet && this.annotationSet.id
-          ? this.annotationSet.id
-          : this.labelSet.id;
+      const setId = this.annotationSet
+        ? this.annotationSet.id
+        : this.labelSet.id;
 
       return `${setId}_${this.label.id}`;
     },
@@ -587,8 +573,11 @@ export default {
       } else {
         if (!this.isAnnotationInEditMode(this.currentAnnotationId())) return;
 
-        // check if spans are selected
-        return this.spanSelection && this.spanSelection.length > 0;
+        return (
+          this.elementSelected === this.currentAnnotationId() &&
+          this.spanSelection &&
+          Array.isArray(this.spanSelection)
+        );
       }
     },
     handleMissingAnnotation() {
@@ -689,92 +678,44 @@ export default {
         this.isLoading = true;
       }, 100);
 
-      // check if annotation set was changed
-      if (
-        (this.editAnnotation.annotationSet &&
-          (this.editAnnotation.annotationSet.id !== this.annotationSet.id ||
-            (this.editAnnotation.annotationSet.id == null &&
-              this.labelSet.id !== this.editAnnotation.labelSet.id))) ||
-        (this.editAnnotation.label &&
-          this.editAnnotation.label.id !== this.label.id)
-      ) {
-        // first delete annotation, then create new one
-        this.$store
-          .dispatch("document/deleteAnnotation", {
-            annotationId: this.annotation.id,
-          })
-          .then(() => {
-            const annotationToCreate = {
-              document: this.documentId,
-              span: spans,
-              label: this.editAnnotation.label.id,
-              is_correct: true,
-              revised: false,
-            };
-
-            if (this.editAnnotation.annotationSet.id) {
-              annotationToCreate.annotation_set =
-                this.editAnnotation.annotationSet.id;
-            } else {
-              annotationToCreate.label_set = this.editAnnotation.labelSet.id;
-            }
+      let updatedString; // what will be sent to the API
+      let storeAction; // if it will be 'delete' or 'patch'
 
-            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.$store.dispatch("document/resetEditAnnotation");
-                this.$store.dispatch("selection/disableSelection");
-                this.loading = false;
-              });
-          });
+      // Verify if we delete the entire Annotation or a part of the text
+      if (isToDecline || spans.length === 0) {
+        storeAction = "document/deleteAnnotation";
       } else {
-        let updatedString; // what will be sent to the API
-        let storeAction; // if it will be 'delete' or 'patch'
+        // Editing the Annotation
+        // Deleting part of multi-line Annotation
+        storeAction = "document/updateAnnotation";
 
-        // Verify if we delete the entire Annotation or a part of the text
-        if (isToDecline || spans.length === 0) {
-          storeAction = "document/deleteAnnotation";
-        } else {
-          // Editing the Annotation
-          // Deleting part of multi-line Annotation
-          storeAction = "document/updateAnnotation";
-
-          updatedString = {
-            is_correct: true,
-            revised: true,
-            span: spans,
-          };
-        }
+        updatedString = {
+          is_correct: true,
+          revised: true,
+          span: spans,
+        };
+      }
 
-        // Send to the store for the http patch/delete request
-        this.$store
-          .dispatch(storeAction, {
-            updatedValues: updatedString,
-            annotationId: this.annotation.id,
-            annotationSet: this.annotationSet,
-          })
-          .catch((error) => {
-            this.$store.dispatch("document/createErrorMessage", {
-              error,
-              serverErrorMessage: this.$t("server_error"),
-              defaultErrorMessage: this.$t("edit_error"),
-            });
-          })
-          .finally(() => {
-            this.$store.dispatch("document/resetEditAnnotation");
-            this.$store.dispatch("selection/disableSelection");
-            this.isLoading = false;
+      // Send to the store for the http patch/delete request
+      this.$store
+        .dispatch(storeAction, {
+          updatedValues: updatedString,
+          annotationId: this.annotation.id,
+          annotationSet: this.annotationSet,
+        })
+        .catch((error) => {
+          this.$store.dispatch("document/createErrorMessage", {
+            error,
+            serverErrorMessage: this.$t("server_error"),
+            defaultErrorMessage: this.$t("edit_error"),
           });
-      }
+        })
+        .finally(() => {
+          this.$store.dispatch("document/resetEditAnnotation");
+          this.$store.dispatch("selection/disableSelection");
+          this.$store.dispatch("selection/setSelectedEntities", null);
+          this.isLoading = false;
+        });
     },
     saveEmptyAnnotationChanges() {
       let annotationToCreate;
@@ -819,7 +760,10 @@ export default {
     },
     handleCancelButton() {
       this.$store.dispatch("document/resetEditAnnotation");
-      this.$store.dispatch("selection/disableSelection");
+      if (this.elementSelected) {
+        this.$store.dispatch("selection/disableSelection");
+        this.$store.dispatch("selection/setSelectedEntities", null);
+      }
       this.isLoading = false;
     },
     enableLoading(annotations) {

package/src/components/DocumentAnnotations/DocumentAnnotations.vue

@@ -105,10 +105,7 @@
             </div>
           </div>
 
-          <b-collapse
-            :model-value="isAccordionOpen(annotationSet)"
-            animation="slide"
-          >
+          <b-collapse :open="isAccordionOpen(annotationSet)">
             <div
               v-if="annotationSet.labels.length > 0"
               class="annotation-sets-list"
@@ -197,7 +194,6 @@ export default {
 
   computed: {
     ...mapState("display", ["showAnnSetTable", "showBranding"]),
-    ...mapState("edit", ["editMode"]),
     ...mapState("document", [
       "annotationSets",
       "documentId",
@@ -225,7 +221,7 @@ export default {
       return this.editAnnotation && this.editAnnotation.id;
     },
     isDocumentEditable() {
-      return !this.publicView && !this.isDocumentReviewed && !this.editMode;
+      return !this.publicView && !this.isDocumentReviewed;
     },
   },
   watch: {
@@ -277,7 +273,7 @@ export default {
       this.loadAccordions(this.getAnnotationsFiltered.annotationSets);
     }
   },
-  unmounted() {
+  destroyed() {
     window.removeEventListener("keydown", this.keyDownHandler);
   },
   methods: {
@@ -408,11 +404,9 @@ export default {
     },
 
     createArray(className) {
-      if (this.$refs.annotationList) {
-        return Array.from(
-          this.$refs.annotationList.getElementsByClassName(className)
-        );
-      }
+      return Array.from(
+        this.$refs.annotationList.getElementsByClassName(className)
+      );
     },
 
     keyDownHandler(event) {

package/src/components/DocumentAnnotations/EmptyAnnotation.vue

@@ -1,33 +1,39 @@
 <template>
-  <div v-if="!publicView && !isDocumentReviewed" class="empty-annotation">
+  <div class="empty-annotation">
     <span
+      v-if="!publicView && !isDocumentReviewed"
       :id="emptyAnnotationId()"
       ref="emptyAnnotation"
       :class="[
         'annotation-value',
-        showActionError && isAnnotationBeingEdited() && 'error-editing',
+        showActionError &&
+          editAnnotation &&
+          editAnnotation.id === emptyAnnotationId() &&
+          'error-editing',
+        !isEmptyAnnotationEditable() && !isMissingAnnotation && 'label-empty',
         isAnnotationBeingEdited() && 'clicked-ann',
         isMissingAnnotation && 'missing-annotation',
         !isMissingAnnotation && 'keyboard-nav',
       ]"
-      :contenteditable="isAnnotationBeingEdited()"
+      :contenteditable="isEmptyAnnotationEditable()"
       @keypress.enter="saveEmptyAnnotationChanges"
       @click="handleEditEmptyAnnotation"
       @focus="handleEditEmptyAnnotation"
       ><!-- eslint-disable vue/no-v-html -->
       <span
         v-if="isFindingAnnotation"
-        class="label-empty-clicked"
         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">
+      <span
+        v-else-if="span && span.offset_string && isEmptyAnnotationEditable()"
+      >
         {{ span.offset_string }}
       </span>
-      <span v-else class="label-empty">
+      <span v-else>
         {{ $t("no_data_found") }}
       </span>
       <!--eslint-enable-->
@@ -36,6 +42,7 @@
 </template>
 <script>
 import { mapState, mapGetters } from "vuex";
+import { isElementArray } from "../../utils/utils";
 
 /**
  * This component is responsible for managing empty annotations (labels with no annotations).
@@ -73,7 +80,7 @@ export default {
   },
   computed: {
     ...mapGetters("document", ["isAnnotationInEditMode", "isDocumentReviewed"]),
-    ...mapState("selection", ["spanSelection"]),
+    ...mapState("selection", ["spanSelection", "elementSelected"]),
     ...mapState("document", [
       "editAnnotation",
       "publicView",
@@ -90,17 +97,17 @@ export default {
 
   watch: {
     span(newValue) {
-      // if (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();
-      //       }
-      //     });
-      // }
+      if (this.elementSelected === this.emptyAnnotationId() && 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();
+            }
+          });
+      }
     },
     spanSelection(newValue) {
       if (!newValue) return;
@@ -116,27 +123,59 @@ export default {
   methods: {
     emptyAnnotationId() {
       if ((!this.annotationSet && !this.labelSet) || !this.label) return;
-      const id =
-        this.annotationSet && this.annotationSet.id != null
-          ? this.annotationSet.id
-          : this.labelSet.id;
+
+      const id = this.annotationSet ? this.annotationSet.id : this.labelSet.id;
       return `${id}_${this.label.id}`;
     },
     isAnnotationBeingEdited() {
       return this.isAnnotationInEditMode(this.emptyAnnotationId());
     },
     handleEditEmptyAnnotation() {
-      if (this.isMissingAnnotation) return;
-      this.$store.dispatch("selection/disableSelection");
-      this.$store.dispatch("document/setEditAnnotation", {
-        id: this.emptyAnnotationId(),
-        index: this.spanIndex,
-        label: this.label,
-        labelSet: this.labelSet,
-        annotationSet: this.annotationSet,
-      });
+      if (
+        this.publicView ||
+        this.isDocumentReviewed ||
+        this.isMissingAnnotation
+      )
+        return;
+
+      if (
+        !this.publicView &&
+        !this.isDocumentReviewed &&
+        this.elementSelected !== this.emptyAnnotationId()
+      ) {
+        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,
+          label: this.label,
+          labelSet: this.labelSet,
+          annotationSet: this.annotationSet,
+        });
+      }
+    },
+    isEmptyAnnotationEditable() {
+      if (
+        (this.spanSelection && this.spanSelection[this.spanIndex] === 0) ||
+        this.isMissingAnnotation
+      ) {
+        return false;
+      } else {
+        return (
+          this.elementSelected === this.emptyAnnotationId() &&
+          this.spanSelection &&
+          this.spanSelection[this.spanIndex] &&
+          this.spanSelection[this.spanIndex].offset_string != null
+        );
+      }
     },
     saveEmptyAnnotationChanges(event) {
+      if (this.publicView || this.isDocumentReviewed) return;
+
       if (event) {
         event.preventDefault();
       }