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

package/src/components/DocumentAnnotations/AnnotationActionButtons.vue

@@ -1,5 +1,22 @@
 <template>
   <div class="action-buttons">
+    <!-- label multi false nav buttons -->
+    <b-tooltip
+      v-if="isLabelMultiFalseAndGroupOfAnns(label) && !showSave"
+      :delay="tooltipDelay"
+      position="is-left"
+      :label="$t('nav_label_anns')"
+    >
+      <div class="ann-nav-btns">
+        <span>{{ label.annotations.length }}</span>
+        <b-icon
+          icon="angle-down"
+          class="angle-icon center-icon button-icon is-link"
+          @click.stop="nextAnn"
+        />
+      </div>
+    </b-tooltip>
+
     <!-- link button -->
     <b-button
       v-if="showLink"
@@ -106,6 +123,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,14 +223,15 @@ 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: {
     ...mapState("document", ["publicView"]),
-    ...mapGetters("document", ["isDocumentReviewed"]),
+    ...mapGetters("document", [
+      "isDocumentReviewed",
+      "isLabelMultiFalseAndGroupOfAnns",
+    ]),
     showHoverButton() {
       return (
         !this.isLoading &&
@@ -227,13 +246,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");
@@ -259,6 +277,12 @@ export default {
     link() {
       this.$emit("link");
     },
+    nextAnn() {
+      this.$store.dispatch(
+        "document/putNextAnnotationInLabelFirst",
+        this.label
+      );
+    },
   },
 };
 </script>

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
@@ -166,6 +171,7 @@
       >
         <AnnotationActionButtons
           :annotation="annotation"
+          :label="label"
           :show-cancel="showCancelButton()"
           :show-accept="showAcceptButton()"
           :show-decline="showDeclineButton()"
@@ -244,6 +250,7 @@ export default {
       checkboxDefaultValue: checkboxValue,
       isCheckboxAvailable: false,
       isChecked: checkboxValue,
+      labelContainerWidth: 0,
     };
   },
   computed: {
@@ -251,7 +258,6 @@ export default {
       "editAnnotation",
       "annotationId",
       "hoveredAnnotationSet",
-      "enableGroupingFeature",
       "publicView",
       "newAcceptedAnnotations",
       "annotationsMarkedAsMissing",
@@ -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,93 @@ 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 (
+        !isToDecline &&
+        ((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 +820,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/DocumentLabel.vue

@@ -1,43 +1,8 @@
 <template>
   <div class="label">
-    <div
-      v-if="isGroup"
-      :class="['label-group', !showAnnotationsGroup && 'keyboard-nav']"
-      @click.stop="toggleGroup"
-    >
-      <div class="label-group-left">
-        <b-icon
-          :icon="showAnnotationsGroup ? 'angle-up' : 'angle-down'"
-          size="is-16"
-          class="caret"
-        />
-        <div class="label-name">
-          <span>{{ `${label.name} (${label.annotations.length})` }}</span>
-        </div>
-      </div>
-      <div class="label-group-right">
-        <div v-if="!publicView" class="label-annotations-pending">
-          {{
-            `${label.annotations.length - acceptedAnnotationsGroupCounter} ${$t(
-              "annotations_pending"
-            )}`
-          }}
-        </div>
-        <div v-if="!publicView" class="label-annotations-accepted">
-          {{
-            `${acceptedAnnotationsGroupCounter} ${$t("annotations_accepted")}`
-          }}
-        </div>
-      </div>
-    </div>
-    <div
-      v-if="showAnnotationsGroup && annotationSet"
-      :class="isGroup && 'label-group-annotation-list'"
-    >
+    <div v-if="annotationSet">
       <AnnotationRow
-        v-for="(annotation, index) in hasAnnotations
-          ? label.annotations
-          : [singleAnnotation]"
+        v-for="(annotation, index) in annotationsToShow()"
         :key="index"
         :annotation="annotation"
         :label="label"
@@ -45,7 +10,7 @@
         :label-set="annotationSet.label_set"
       />
     </div>
-    <div v-else-if="showAnnotationsGroup && labelSet">
+    <div v-else-if="labelSet">
       <AnnotationRow :label="label" :label-set="labelSet" />
     </div>
   </div>
@@ -74,94 +39,19 @@ export default {
       required: true,
     },
   },
-  data() {
-    return {
-      nonMultipleAnnotationsExtracted: false,
-      acceptedAnnotationsGroupCounter: 0,
-      showAnnotationsGroup: false,
-    };
-  },
   computed: {
-    ...mapState("document", [
-      "annotationId",
-      "enableGroupingFeature",
-      "hoveredAnnotationSet",
-      "publicView",
+    ...mapState("document", ["annotationId", "publicView"]),
+    ...mapGetters("document", [
+      "numberOfAcceptedAnnotationsInLabel",
+      "isLabelMultiFalseAndGroupOfAnns",
     ]),
-    ...mapGetters("document", ["numberOfAcceptedAnnotationsInLabel"]),
-    singleAnnotation() {
-      if (this.label.annotations && this.label.annotations.length > 0) {
-        return this.label.annotations[0];
-      }
-      return null;
-    },
-    hasAnnotations() {
-      return this.label.annotations && this.label.annotations.length > 0;
-    },
-    isGroup() {
-      return this.enableGroupingFeature && this.nonMultipleAnnotationsExtracted;
-    },
-  },
-  watch: {
-    annotationId(newAnnotationId) {
-      this.checkAnnotationSelected(newAnnotationId);
-    },
-    hoveredAnnotationSet(newValue) {
-      // Check if there are some unrevised Annotations within the group
-      if (
-        newValue &&
-        newValue.type === "accept" &&
-        this.labelHasPendingAnnotations(newValue)
-      ) {
-        this.showAnnotationsGroup = true;
-      }
-    },
-  },
-  mounted() {
-    this.updateValues();
-    this.checkAnnotationSelected(this.annotationId);
-
-    if (this.publicView) {
-      this.showAnnotationsGroup = true;
-    }
-  },
-  updated() {
-    this.updateValues();
   },
   methods: {
-    checkAnnotationSelected(newAnnotationId) {
-      // check if annotation is inside a label group and open it
-      if (
-        this.enableGroupingFeature &&
-        !this.showAnnotationsGroup &&
-        newAnnotationId
-      ) {
-        const annotation = this.label.annotations.find(
-          (ann) => ann.id == newAnnotationId
-        );
-
-        if (annotation) {
-          this.showAnnotationsGroup = true;
-        }
-      }
-    },
-    toggleGroup() {
-      this.showAnnotationsGroup = !this.showAnnotationsGroup;
-    },
-    updateValues() {
-      // more than 1 Annotation extracted for a non multiple Label
-      this.nonMultipleAnnotationsExtracted =
-        this.label.annotations &&
-        this.label.annotations.length > 1 &&
-        !this.label.has_multiple_top_candidates;
-
-      if (this.nonMultipleAnnotationsExtracted) {
-        this.acceptedAnnotationsGroupCounter =
-          this.numberOfAcceptedAnnotationsInLabel(this.label);
-      }
-      if (!this.isGroup) {
-        // if not a group then show by default
-        this.showAnnotationsGroup = true;
+    annotationsToShow() {
+      if (this.isLabelMultiFalseAndGroupOfAnns(this.label)) {
+        return [this.label.annotations[0]];
+      } else {
+        return this.label.annotations;
       }
     },
     labelHasPendingAnnotations(hoveredSet) {