@konfuzio/document-validation-ui 0.1.59-dev.1 → 0.2.0-dev.1

package/src/components/DocumentAnnotations/AnnotationActionButtons.vue

@@ -106,6 +106,7 @@
     <!-- 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"
@@ -205,9 +206,7 @@ export default {
   data() {
     return {
       tooltipDelay: 700,
-      showText:
-        window.innerWidth >
-        TEXT_BREAKPOINT_WIDTH(this.$i18n ? this.$i18n.locale : "en"),
+      showText: window.innerWidth > TEXT_BREAKPOINT_WIDTH,
     };
   },
   computed: {
@@ -227,13 +226,12 @@ export default {
     window.addEventListener("resize", this.resize);
   },
 
-  destroyed() {
+  unmounted() {
     window.removeEventListener("resize", this.resize);
   },
   methods: {
     resize() {
-      this.showText =
-        window.innerWidth > TEXT_BREAKPOINT_WIDTH(this.$i18n.locale);
+      this.showText = window.innerWidth > TEXT_BREAKPOINT_WIDTH;
     },
     search() {
       this.$emit("search");

package/src/components/DocumentAnnotations/AnnotationContent.vue

@@ -11,10 +11,10 @@
           editAnnotation &&
           editAnnotation.id === annotation.id &&
           'error-editing',
-        isAnnotationBeingEdited && 'clicked-ann',
+        isSpanBeingEdited && 'clicked-ann',
       ]"
       role="textbox"
-      :contenteditable="isAnnotationBeingEdited"
+      :contenteditable="isSpanBeingEdited"
       @click="handleEditAnnotation"
       @paste="handlePaste"
       @keypress.enter="saveAnnotationChanges"
@@ -61,11 +61,7 @@ export default {
     };
   },
   computed: {
-    ...mapGetters("document", [
-      "isAnnotationInEditMode",
-      "pageAtIndex",
-      "isDocumentReviewed",
-    ]),
+    ...mapGetters("document", ["isAnnotationInEditMode", "isDocumentReviewed"]),
     ...mapGetters("display", ["bboxToRect"]),
     ...mapState("document", [
       "editAnnotation",
@@ -74,19 +70,17 @@ export default {
       "newAcceptedAnnotations",
       "showActionError",
     ]),
-    isAnnotationBeingEdited() {
+    isSpanBeingEdited() {
       return this.isAnnotationInEditMode(this.annotation.id, this.spanIndex);
     },
+    isAnnotationBeingEdited() {
+      return (
+        this.editAnnotation && this.annotation.id === this.editAnnotation.id
+      );
+    },
   },
 
   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);
@@ -110,10 +104,15 @@ export default {
       if (
         !this.publicView &&
         !this.isDocumentReviewed &&
-        !this.isAnnotationBeingEdited &&
+        !this.isSpanBeingEdited &&
         !this.isLoading
       ) {
-        this.$store.dispatch("selection/selectElement", this.annotation.id);
+        if (!this.isAnnotationBeingEdited) {
+          this.$store.dispatch(
+            "selection/setSpanSelection",
+            this.annotation.span
+          );
+        }
 
         this.$store
           .dispatch("document/setEditAnnotation", {
@@ -125,44 +124,18 @@ export default {
             pageNumber: this.span.page_index + 1,
           })
           .then(() => {
-            this.$refs.contentEditable.focus();
+            if (this.$refs.contentEditable) {
+              this.$refs.contentEditable.focus();
+            }
           })
           .catch((error) => {
             console.log(error);
           });
-
-        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,
-          });
+        // 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,
+          ]);
         }
       }
     },
@@ -173,7 +146,7 @@ export default {
         this.$refs.contentEditable.blur();
       }
 
-      this.$store.dispatch("selection/setSelectedEntities", null);
+      this.$store.dispatch("selection/setSpanSelection", null);
     },
     handlePaste(event) {
       // TODO: modify to only paste plain text

package/src/components/DocumentAnnotations/AnnotationRow.vue

@@ -15,14 +15,13 @@
   >
     <div class="annotations-width-slider">
       <b-slider
-        :value="labelWidth"
+        v-model="labelContainerWidth"
         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
@@ -98,7 +97,12 @@
 
     <div class="annotation-row-right" :style="`width:${annotationWidth}%`">
       <div class="annotation-content">
-        <div v-if="annotation" class="annotation-items">
+        <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">
           <b-checkbox
             v-if="annotation.metadata && annotation.metadata.checkbox"
             v-model="isChecked"
@@ -129,7 +133,8 @@
         <div v-else>
           <div
             v-if="
-              spanSelection && isAnnotationInEditMode(currentAnnotationId())
+              spanSelection.length > 0 &&
+              isAnnotationInEditMode(currentAnnotationId())
             "
           >
             <EmptyAnnotation
@@ -244,6 +249,7 @@ export default {
       checkboxDefaultValue: checkboxValue,
       isCheckboxAvailable: false,
       isChecked: checkboxValue,
+      labelContainerWidth: 0,
     };
   },
   computed: {
@@ -261,8 +267,8 @@ export default {
     ]),
     ...mapState("selection", [
       "spanSelection",
-      "elementSelected",
       "selectedEntities",
+      "spanLoading",
     ]),
     ...mapState("display", ["labelWidth", "annotationWidth"]),
     ...mapState("project", ["showAnnotationTranslations"]),
@@ -319,6 +325,12 @@ export default {
     },
   },
   watch: {
+    labelWidth(width) {
+      this.labelContainerWidth = width;
+    },
+    labelContainerWidth(width) {
+      this.setLabelWidth(width);
+    },
     annotationId(newAnnotationId) {
       this.checkAnnotationSelection(newAnnotationId);
     },
@@ -383,6 +395,7 @@ export default {
   },
   mounted() {
     this.checkAnnotationSelection(this.annotationId);
+    this.labelContainerWidth = this.labelWidth;
   },
   methods: {
     ...mapActions("display", ["setLabelWidth"]),
@@ -438,9 +451,10 @@ export default {
 
       if (this.annotation && this.annotation.id) return this.annotation.id;
 
-      const setId = this.annotationSet
-        ? this.annotationSet.id
-        : this.labelSet.id;
+      const setId =
+        this.annotationSet && this.annotationSet.id
+          ? this.annotationSet.id
+          : this.labelSet.id;
 
       return `${setId}_${this.label.id}`;
     },
@@ -573,11 +587,8 @@ export default {
       } else {
         if (!this.isAnnotationInEditMode(this.currentAnnotationId())) return;
 
-        return (
-          this.elementSelected === this.currentAnnotationId() &&
-          this.spanSelection &&
-          Array.isArray(this.spanSelection)
-        );
+        // check if spans are selected
+        return this.spanSelection && this.spanSelection.length > 0;
       }
     },
     handleMissingAnnotation() {
@@ -678,44 +689,92 @@ export default {
         this.isLoading = true;
       }, 100);
 
-      let updatedString; // what will be sent to the API
-      let storeAction; // if it will be 'delete' or 'patch'
+      // 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;
+            }
 
-      // Verify if we delete the entire Annotation or a part of the text
-      if (isToDecline || spans.length === 0) {
-        storeAction = "document/deleteAnnotation";
+            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;
+              });
+          });
       } else {
-        // Editing the Annotation
-        // Deleting part of multi-line Annotation
-        storeAction = "document/updateAnnotation";
+        let updatedString; // what will be sent to the API
+        let storeAction; // if it will be 'delete' or 'patch'
 
-        updatedString = {
-          is_correct: true,
-          revised: true,
-          span: spans,
-        };
-      }
+        // 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,
+          };
+        }
 
-      // 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"),
+        // 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;
           });
-        })
-        .finally(() => {
-          this.$store.dispatch("document/resetEditAnnotation");
-          this.$store.dispatch("selection/disableSelection");
-          this.$store.dispatch("selection/setSelectedEntities", null);
-          this.isLoading = false;
-        });
+      }
     },
     saveEmptyAnnotationChanges() {
       let annotationToCreate;
@@ -760,10 +819,7 @@ export default {
     },
     handleCancelButton() {
       this.$store.dispatch("document/resetEditAnnotation");
-      if (this.elementSelected) {
-        this.$store.dispatch("selection/disableSelection");
-        this.$store.dispatch("selection/setSelectedEntities", null);
-      }
+      this.$store.dispatch("selection/disableSelection");
       this.isLoading = false;
     },
     enableLoading(annotations) {

package/src/components/DocumentAnnotations/DocumentAnnotations.vue

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

package/src/components/DocumentAnnotations/EmptyAnnotation.vue

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