@konfuzio/document-validation-ui 0.1.14 → 0.1.15

package/src/components/DocumentAnnotations/EmptyAnnotation.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="empty-annotation">
     <span
-      v-if="!publicView"
+      v-if="!publicView && !isDocumentReviewed"
       :id="emptyAnnotationId()"
       ref="emptyAnnotation"
       :class="[
@@ -10,25 +10,39 @@
           editAnnotation &&
           editAnnotation.id === emptyAnnotationId() &&
           'error-editing',
-        isEmptyAnnotationEditable() ? '' : 'label-empty',
-        isAnnotationBeingEdited() && 'clicked',
+        !isEmptyAnnotationEditable() && !isMissingAnnotation && 'label-empty',
+        isAnnotationBeingEdited() && 'clicked-ann',
+        isMissingAnnotation && 'missing-annotation',
+        !isMissingAnnotation && 'keyboard-nav',
       ]"
       :contenteditable="isEmptyAnnotationEditable()"
       @keypress.enter="saveEmptyAnnotationChanges"
       @click="handleEditEmptyAnnotation"
       @focus="handleEditEmptyAnnotation"
-    >
-      <span v-if="span && span.offset_string && isEmptyAnnotationEditable()">
+      ><!-- eslint-disable vue/no-v-html -->
+      <span
+        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).
@@ -37,97 +51,71 @@ export default {
   name: "EmptyAnnotation",
   props: {
     label: {
+      type: Object,
       required: true,
     },
     annotationSet: {
+      type: Object,
       required: true,
     },
-
     span: {
+      type: Object,
+      default: null,
       required: false,
     },
     spanIndex: {
+      type: Number,
       required: false,
+      default: 0,
     },
-    saveChanges: {
+    isMissingAnnotation: {
       type: Boolean,
-      required: false,
+      required: true,
+      default: false,
     },
   },
-  data() {
-    return {
-      isLoading: false,
-    };
-  },
   computed: {
-    ...mapGetters("document", [
-      "isAnnotationInEditMode",
-      "getTextFromEntities",
-    ]),
-    ...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");
       }
     },
   },
+
   methods: {
     emptyAnnotationId() {
       if (!this.annotationSet || !this.label) return;
@@ -142,20 +130,25 @@ export default {
       return this.isAnnotationInEditMode(this.emptyAnnotationId());
     },
     handleEditEmptyAnnotation() {
-      if (this.publicView) return;
+      if (
+        this.publicView ||
+        this.isDocumentReviewed ||
+        this.isMissingAnnotation
+      )
+        return;
 
       if (
         !this.publicView &&
-        !this.isLoading &&
+        !this.isDocumentReviewed &&
         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,
@@ -165,28 +158,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 (
-        this.spanSelection &&
-        this.spanSelection[this.spanIndex] === 0
+      if (
+        (this.spanSelection && this.spanSelection[this.spanIndex] === 0) ||
+        this.isMissingAnnotation
       ) {
         return false;
       } else {
@@ -194,13 +169,12 @@ 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
         );
       }
     },
     saveEmptyAnnotationChanges(event) {
-      if (this.publicView) return;
+      if (this.publicView || this.isDocumentReviewed) return;
 
       if (event) {
         event.preventDefault();
@@ -209,9 +183,6 @@ export default {
       // API call handled in parent component - AnnotationRow
       this.$emit("save-empty-annotation-changes");
     },
-    setText(text) {
-      this.$refs.emptyAnnotation.innerHTML = text;
-    },
   },
 };
 </script>

package/src/components/DocumentAnnotations/ExtractingData.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="data-extraction-container">
     <div class="loading-container">
-      <ActionButtons
+      <AnnotationActionButtons
         :is-loading="true"
         :save-btn="false"
         :cancel-btn="false"
@@ -9,21 +9,33 @@
     </div>
     <div class="data-extraction-text">
       <p class="title">
-        {{ $t("data_being_extracted") }}
+        <span v-if="redirectingUser"> {{ $t("wait_title") }}</span>
+        <span v-else>
+          {{ $t("data_being_extracted") }}
+        </span>
       </p>
       <div class="description">
-        <p>{{ $t("analysing_document") }}</p>
-        <p>{{ $t("few_minutes") }}</p>
+        <span v-if="redirectingUser">
+          <p>{{ $t("redirecting_to_documents_list") }}</p>
+        </span>
+        <span v-else>
+          <p>{{ $t("analysing_document") }}</p>
+          <p>{{ $t("few_minutes") }}</p>
+        </span>
       </div>
     </div>
   </div>
 </template>
 <script>
-import ActionButtons from "./ActionButtons";
+import { mapState } from "vuex";
+import AnnotationActionButtons from "./AnnotationActionButtons";
 
 export default {
   name: "ExtractingData",
-  components: { ActionButtons }
+  components: { AnnotationActionButtons },
+  computed: {
+    ...mapState("edit", ["redirectingUser"]),
+  },
 };
 </script>
 <style scoped lang="scss" src="../../assets/scss/extracting_data.scss"></style>

package/src/components/DocumentAnnotations/MultiAnnotationTableOverlay.vue

@@ -0,0 +1,337 @@
+<template>
+  <div
+    class="multi-ann-table-overlay"
+    :style="{
+      left: `${left}px`,
+      width: `${width === 0 ? '100%' : `${width}px`}`,
+    }"
+  >
+    <b-table
+      ref="table"
+      class="multi-ann-set-table dark-header header-32"
+      detail-icon="faScissors"
+      :data="rows"
+      :sticky-header="true"
+      :narrowed="true"
+      :bordered="false"
+      draggable-column
+      @columndragstart="columndragstart"
+      @columndrop="columndrop"
+      @columndragover="columndragover"
+      @columndragleave="columndragleave"
+    >
+      <b-table-column
+        v-for="(item, index) in isLoading ? [columns[0]] : columns"
+        :key="index"
+        :field="item.field"
+        :label="item.label.name"
+      >
+        <template #header="{ column }">
+          <b-dropdown
+            :ref="getDropdownReference(item)"
+            aria-role="list"
+            class="header-dropdown"
+            position="is-top-right"
+            :close-on-click="false"
+            scrollable
+            @active-change="(e) => onDropdownChange(item, e)"
+          >
+            <template #trigger="{ active }">
+              <DraggableIcon v-if="!isLoading" class="draggable" />
+              <span v-if="!isLoading" :class="active ? 'active' : ''"
+                >{{ column.label }}
+              </span>
+              <b-icon
+                v-if="!isLoading"
+                :icon="active ? 'angle-up' : 'angle-down'"
+                size="is-small"
+                class="arrow"
+              />
+            </template>
+
+            <div v-if="editingLabels.length === 0">
+              <b-dropdown-item aria-role="listitem" @click="editLabel(item)"
+                ><span>{{ $t("edit_label") }}</span></b-dropdown-item
+              >
+              <b-dropdown-item
+                aria-role="listitem"
+                class="delete-action"
+                @click="deleteColumn(item)"
+              >
+                <span>{{ $t("delete_label") }}</span></b-dropdown-item
+              >
+            </div>
+            <div v-else>
+              <b-dropdown-item
+                v-for="label in editingLabels"
+                :key="label.id"
+                aria-role="listitem"
+                :disabled="label.disabled"
+                ><span @click="!label.disabled && changeLabel(item, label)">{{
+                  label.name
+                }}</span></b-dropdown-item
+              >
+            </div>
+          </b-dropdown>
+        </template>
+
+        <template #default="props">
+          <div class="annotations-table">
+            <b-skeleton v-if="isLoading" width="98%" height="90%" />
+            <AnnotationRow
+              v-if="!isLoading"
+              :annotation="props.row[item.field]"
+              :label="item.label"
+              :annotation-set="item.annotationSet"
+              :show-label="false"
+              :show-buttons="false"
+              :is-small="true"
+              :from-table="true"
+            />
+          </div>
+        </template>
+      </b-table-column>
+    </b-table>
+  </div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+import AnnotationRow from "../DocumentAnnotations/AnnotationRow";
+import DraggableIcon from "../../assets/images/DraggableIcon";
+
+export default {
+  name: "MultiAnnotationTableOverlay",
+  components: {
+    AnnotationRow,
+    DraggableIcon,
+  },
+  props: {
+    left: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+    width: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      rows: [],
+      columns: [],
+      orderedAnnotations: [],
+      editingLabels: [],
+      openDropdown: null,
+      draggingColumnIndex: null,
+      isLoading: false,
+    };
+  },
+  computed: {
+    ...mapState("display", ["showAnnSetTable"]),
+    ...mapState("document", ["annotations"]),
+  },
+  watch: {
+    showAnnSetTable() {
+      this.handleColumns();
+      this.handleRows();
+    },
+    annotations() {
+      // if there's a change in the annotations content, we update the table
+      this.handleColumns();
+      this.handleRows();
+    },
+    columns(columns) {
+      if (!columns || (columns && columns.length === 0)) {
+        this.$store.dispatch("selection/disableSelection");
+        this.$store.dispatch("document/resetEditAnnotation");
+        this.$store.dispatch("display/showAnnSetTable", null);
+      }
+    },
+  },
+  mounted() {
+    this.handleColumns();
+    this.handleRows();
+  },
+  methods: {
+    getDropdownReference(column) {
+      return `editDropdown_${column.field}`;
+    },
+    handleColumns() {
+      this.columns = [];
+      const labelAlreadyExists = (label) => {
+        return (
+          this.columns.length > 0 &&
+          this.columns.find((a) => a.field === `${label.id}`) != undefined
+        );
+      };
+
+      this.showAnnSetTable.forEach((annotationSet) => {
+        annotationSet.labels.forEach((label) => {
+          if (!labelAlreadyExists(label) && label.annotations.length > 0) {
+            const column = {
+              field: `${label.id}`,
+              label: label,
+              annotationSet,
+              centered: false,
+            };
+            this.columns.push(column);
+          }
+        });
+      });
+    },
+
+    handleRows() {
+      this.rows = [];
+      this.orderedAnnotations = [];
+
+      this.showAnnSetTable.forEach((annotationSet) => {
+        let row = {};
+        let toAdd = false; // to not push empty labels
+
+        annotationSet.labels.forEach((label) => {
+          if (label.annotations.length > 0) {
+            row[label.id] = label.annotations[0];
+            this.orderedAnnotations.push(label.annotations[0]);
+            toAdd = true;
+          }
+        });
+        if (toAdd) {
+          this.rows.push(row);
+        }
+      });
+    },
+
+    async editLabel(column) {
+      this.$store
+        .dispatch(
+          "project/fetchLabelSetDetails",
+          column.annotationSet.label_set.id
+        )
+        .then(async (labelSet) => {
+          this.editingLabels = [];
+
+          labelSet.labels.forEach((label) => {
+            const dropdownLabel = {
+              ...label,
+              disabled:
+                this.columns.find((column) => column.label.id === label.id) !==
+                undefined,
+            };
+            this.editingLabels.push(dropdownLabel);
+          });
+        });
+    },
+
+    async changeLabel(column, label) {
+      this.isLoading = true;
+      this.closeDropdown(column);
+      for (let i = 0; i < this.rows.length; i++) {
+        const annotationToUpdate = this.rows[i][column.label.id];
+        await this.$store
+          .dispatch("document/updateAnnotation", {
+            annotationId: annotationToUpdate.id,
+            updatedValues: { label: label.id },
+          })
+          .catch((error) => {
+            this.$store.dispatch("document/createErrorMessage", {
+              error,
+              serverErrorMessage: this.$t("server_error"),
+              defaultErrorMessage: this.$t("edit_error"),
+            });
+          });
+      }
+      this.isLoading = false;
+    },
+
+    async deleteColumn(column) {
+      this.isLoading = true;
+      this.closeDropdown(column);
+
+      const annotationsToDelete = [];
+      for (let i = 0; i < this.rows.length; i++) {
+        const annotationToDelete = this.rows[i][column.label.id];
+        if (annotationToDelete && annotationToDelete.id) {
+          annotationsToDelete.push(annotationToDelete);
+        }
+      }
+
+      annotationsToDelete.forEach(async (annotationToDelete) => {
+        await this.$store
+          .dispatch("document/deleteAnnotation", {
+            annotationId: annotationToDelete.id,
+          })
+          .catch((error) => {
+            this.$store.dispatch("document/createErrorMessage", {
+              error,
+              serverErrorMessage: this.$t("server_error"),
+              defaultErrorMessage: this.$t("edit_error"),
+            });
+          });
+      });
+
+      this.isLoading = false;
+    },
+
+    onDropdownChange(column, open) {
+      this.editingLabels = [];
+      this.$store.dispatch("selection/disableSelection");
+      this.$store.dispatch("document/resetEditAnnotation");
+      if (open) {
+        if (
+          this.openDropdown &&
+          this.$refs[this.getDropdownReference(column)].length > 0
+        ) {
+          this.$refs[this.openDropdown][0].toggle();
+        }
+        this.openDropdown = this.getDropdownReference(column);
+      } else {
+        if (this.openDropdown === this.getDropdownReference(column)) {
+          this.openDropdown = null;
+        }
+      }
+    },
+
+    closeDropdown(column) {
+      if (
+        this.openDropdown &&
+        this.$refs[this.getDropdownReference(column)].length > 0
+      ) {
+        this.$refs[this.getDropdownReference(column)][0].toggle();
+        this.openDropdown = null;
+      }
+    },
+
+    columndragstart(payload) {
+      this.draggingColumnIndex = payload.index;
+      payload.event.dataTransfer.effectAllowed = "copy";
+    },
+    columndragover(payload) {
+      payload.event.dataTransfer.dropEffect = "copy";
+      payload.event.target.closest("th").classList.add("is-selected");
+      payload.event.preventDefault();
+    },
+    columndragleave(payload) {
+      payload.event.target.closest("th").classList.remove("is-selected");
+      payload.event.preventDefault();
+    },
+    async columndrop(payload) {
+      payload.event.target.closest("th").classList.remove("is-selected");
+      const droppedOnColumnIndex = payload.index;
+
+      const draggingColumn = this.columns[this.draggingColumnIndex];
+      const droppedColumn = this.columns[droppedOnColumnIndex];
+
+      await this.changeLabel(draggingColumn, droppedColumn.label);
+      await this.changeLabel(droppedColumn, draggingColumn.label);
+    },
+  },
+};
+</script>
+<style
+  scoped
+  lang="scss"
+  src="../../assets/scss/multi_ann_table_overlay.scss"
+></style>

package/src/components/DocumentAnnotations/index.js

@@ -3,6 +3,6 @@ export { default as AnnotationContent } from "./AnnotationContent";
 export { default as EmptyAnnotation } from "./EmptyAnnotation";
 export { default as DocumentLabel } from "./DocumentLabel";
 export { default as AnnotationDetails } from "./AnnotationDetails";
-export { default as RejectedLabels } from "./RejectedLabels";
 export { default as ChooseLabelSetModal } from "./ChooseLabelSetModal";
 export { default as AnnotationRow } from "./AnnotationRow";
+export { default as MultiAnnotationTableOverlay } from "./MultiAnnotationTableOverlay";