@konfuzio/document-validation-ui 0.1.6-pre-release-1 → 0.1.6-pre-release-2

package/src/components/DocumentPage/DocumentPage.vue

@@ -3,7 +3,11 @@
     ref="pdfContainer"
     :class="[
       'pdf-page-container',
-      (categorizeModalIsActive || editMode || publicView) && 'default-cursor',
+      (categorizeModalIsActive ||
+        editMode ||
+        publicView ||
+        documentIsReviewed) &&
+        'default-cursor',
       page.number === currentPage && 'current-page',
     ]"
   >
@@ -23,6 +27,8 @@
       @close="closePopups"
     />
 
+    <AnnSetTableOptions v-if="showAnnSetTable" :page="page" />
+
     <v-stage
       v-if="image && scale"
       ref="stage"
@@ -42,7 +48,7 @@
           }"
         />
         <template v-if="pageInVisibleRange && !editMode">
-          <v-group v-if="!publicView" ref="entities">
+          <v-group v-if="!publicView || !documentIsReviewed" ref="entities">
             <v-rect
               v-for="(entity, index) in scaledEntities"
               :key="index"
@@ -70,7 +76,13 @@
           </template>
         </template>
       </v-layer>
-      <v-layer v-if="showFocusedAnnotation && !isSelecting">
+      <v-layer
+        v-if="
+          showFocusedAnnotation &&
+          !isSelecting &&
+          documentAnnotationSelected.labelName !== ''
+        "
+      >
         <v-label
           :key="`label${documentAnnotationSelected.id}`"
           :config="{
@@ -125,6 +137,7 @@ import BoxSelection from "./BoxSelection";
 import MultiAnnSelection from "./MultiAnnSelection";
 import NewAnnotation from "./NewAnnotation";
 import MultiAnnotationTablePopup from "./MultiAnnotationTablePopup";
+import AnnSetTableOptions from "./AnnSetTableOptions";
 
 export default {
   name: "DocumentPage",
@@ -133,6 +146,7 @@ export default {
     MultiAnnSelection,
     NewAnnotation,
     MultiAnnotationTablePopup,
+    AnnSetTableOptions,
   },
 
   props: {
@@ -151,7 +165,7 @@ export default {
   },
 
   computed: {
-    ...mapState("display", ["currentPage"]),
+    ...mapState("display", ["currentPage", "showAnnSetTable"]),
 
     showFocusedAnnotation() {
       return (
@@ -258,6 +272,7 @@ export default {
       "selectedDocument",
       "publicView",
       "selectedEntities",
+      "documentIsReviewed",
     ]),
     ...mapState("edit", ["editMode"]),
     ...mapGetters("display", ["visiblePageRange", "bboxToRect"]),
@@ -311,7 +326,13 @@ export default {
     },
 
     onMouseDown(event) {
-      if (this.categorizeModalIsActive || this.editMode) return;
+      if (
+        this.categorizeModalIsActive ||
+        this.editMode ||
+        this.publicView ||
+        this.documentIsReviewed
+      )
+        return;
 
       this.closePopups();
 
@@ -329,9 +350,6 @@ export default {
       ) {
         return;
       }
-      if (this.publicView) {
-        return;
-      }
 
       // anything else, we start selecting
 
@@ -379,7 +397,13 @@ export default {
     },
 
     handleClickedEntity(entity) {
-      if (!entity || this.categorizeModalIsActive) return;
+      if (
+        !entity ||
+        this.categorizeModalIsActive ||
+        this.publicView ||
+        this.documentIsReviewed
+      )
+        return;
 
       // Check if we are creating a new Annotation
       // or if we are editing an existing or empty one
@@ -417,7 +441,12 @@ export default {
     },
 
     onElementEnter() {
-      if (!this.categorizeModalIsActive) {
+      if (
+        !this.categorizeModalIsActive &&
+        !this.publicView &&
+        !this.editMode &&
+        !this.documentIsReviewed
+      ) {
         this.$refs.stage.$el.style.cursor = "pointer";
       }
     },

package/src/components/DocumentPage/DocumentToolbar.vue

@@ -9,7 +9,7 @@
         class="top-aligned"
       >
         <div
-          v-if="!editMode && !publicView"
+          v-if="!editMode && !publicView && !documentIsReviewed"
           :class="[
             'icons icons-left',
             editModeDisabled && 'edit-mode-disabled',
@@ -22,7 +22,10 @@
           <span class="edit-text">{{ $t("edit") }}</span>
         </div>
       </b-tooltip>
-      <div v-if="!editMode && !publicView" class="toolbar-divider" />
+      <div
+        v-if="!editMode && !publicView && !documentIsReviewed"
+        class="toolbar-divider"
+      />
       <div class="icons icons-right">
         <div class="fit-zoom icon" @click.prevent.stop="fitAuto">
           <FitZoomIcon />
@@ -74,6 +77,7 @@ export default {
       "selectedDocument",
       "recalculatingAnnotations",
       "publicView",
+      "documentIsReviewed",
     ]),
     ...mapGetters("document", ["documentCannotBeEdited"]),
   },

package/src/components/DocumentPage/MultiAnnSelection.vue

@@ -45,6 +45,7 @@
 <script>
 import { mapGetters, mapState, mapActions } from "vuex";
 import { ChooseLabelSetModal } from "../DocumentAnnotations";
+import { table_reference_api } from "../../store/document";
 
 export default {
   props: {
@@ -114,6 +115,7 @@ export default {
       };
     },
     ...mapState("selection", ["selection", "isSelecting"]),
+    ...mapState("document", ["documentId"]),
     ...mapGetters("display", ["clientToBbox"]),
     ...mapGetters("document", ["entitiesOnSelection"]),
   },
@@ -134,14 +136,15 @@ export default {
         hasModalCard: true,
         trapFocus: true,
         canCancel: false,
-        customClass: "invisible-parent-modal",
+        customClass: "dv-ui-theme invisible-parent-modal",
         props: { isMultipleAnnotations: true },
         events: {
-          labelSet: this.chooseLabelSet,
+          labelSet: this.submitAnnotations,
         },
       });
     },
     chooseLabelSet(labelSet) {
+      // TODO: deprecated with new multi ann set table
       const tableSelection = {
         labelSet,
         position: {
@@ -156,6 +159,49 @@ export default {
       this.$emit("finished", tableSelection);
     },
 
+    async submitAnnotations(labelSet) {
+      const columns = labelSet.labels.map((label) => {
+        return {
+          field: `${label.id}`,
+          label: label.name,
+          centered: true,
+        };
+      });
+
+      const orderedEntities = this.processRows(columns);
+
+      const annotations = [];
+
+      orderedEntities.forEach((orderedEntity) => {
+        annotations.push({
+          document: this.documentId,
+          span: orderedEntity.spans,
+          label: orderedEntity.label_id,
+          is_correct: true,
+          revised: false,
+          label_set: labelSet.id,
+          set_reference: orderedEntity.row_index,
+          origin: table_reference_api,
+        });
+      });
+
+      this.$store
+        .dispatch("document/createAnnotation", annotations)
+        .then(() => {
+          this.$store.dispatch("selection/disableSelection");
+          this.$emit("finished");
+        })
+        .catch((error) => {
+          this.$store.dispatch("document/createErrorMessage", {
+            error,
+            serverErrorMessage: this.$t("server_error"),
+            defaultErrorMessage: this.$t("error_creating_multi_ann"),
+          });
+          this.$store.dispatch("selection/disableSelection");
+          this.$emit("finished");
+        });
+    },
+
     onButtonEnter() {
       this.$emit("buttonEnter");
     },
@@ -296,6 +342,50 @@ export default {
 
       this.entities = cols;
     },
+
+    processRows(columns) {
+      const orderedEntities = []; // this will match the order of entities in the table so we have a way of tracking them once we submit
+      let rowIndex = 0;
+
+      Object.entries(this.entities).forEach(([key, groupedEntity]) => {
+        let row = null;
+        columns.forEach((column, index) => {
+          let spans = [];
+          if (
+            Object.entries(groupedEntity)[index] &&
+            Object.entries(groupedEntity)[index].length > 0
+          ) {
+            spans = Object.entries(groupedEntity)[index][1];
+          }
+          const entityExists = spans.length > 0;
+
+          let textContent = "";
+
+          spans.forEach((entity) => {
+            textContent = `${textContent} ${entity.offset_string}`;
+          });
+
+          row = {
+            ...row,
+            [column.field]: textContent,
+          };
+          if (entityExists) {
+            const customEntity = {
+              spans: [...spans],
+              label_id: column.field,
+              row_index: rowIndex,
+            };
+
+            orderedEntities.push(customEntity);
+          }
+        });
+        if (row !== null) {
+          rowIndex++;
+        }
+      });
+      return orderedEntities;
+    },
+
     ...mapActions("selection", ["moveSelection"]),
   },
 };

package/src/components/DocumentPage/MultiAnnotationTableOverlay.vue

@@ -0,0 +1,286 @@
+<template>
+  <div class="multi-ann-table-overlay">
+    <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 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-left"
+            :close-on-click="false"
+            @active-change="(e) => onDropdownChange(item, e)"
+          >
+            <template #trigger="{ active }">
+              <DraggableIcon class="draggable" />
+              <span :class="active ? 'active' : ''">{{ column.label }} </span>
+              <b-icon
+                :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="changeLabel(item, label)">{{
+                  label.name
+                }}</span></b-dropdown-item
+              >
+            </div>
+          </b-dropdown>
+        </template>
+
+        <template #default="props">
+          <div class="annotations-table">
+            <AnnotationRow
+              :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: "MultiAnnotationTablePopup",
+  components: {
+    AnnotationRow,
+    DraggableIcon,
+  },
+  data() {
+    return {
+      rows: [],
+      columns: [],
+      orderedAnnotations: [],
+      editingLabels: [],
+      openDropdown: null,
+      draggingColumnIndex: null,
+    };
+  },
+  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();
+    },
+  },
+  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) {
+      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.closeDropdown(column);
+    },
+
+    async deleteColumn(column) {
+      for (let i = 0; i < this.rows.length; i++) {
+        const annotationToDelete = this.rows[i][column.label.id];
+        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.closeDropdown(column);
+    },
+
+    onDropdownChange(column, open) {
+      this.editingLabels = [];
+      this.$store.dispatch("selection/disableSelection");
+      this.$store.dispatch("document/resetEditAnnotation");
+      if (open) {
+        if (this.openDropdown) {
+          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)][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/DocumentPage/MultiAnnotationTablePopup.vue

@@ -156,63 +156,36 @@ export default {
       }
     },
     async submitAnnotations() {
-      let errorMessageShown = false;
-      let previousAnnotationSetId = null;
-      let previousRowIndex = 0;
-
       this.$store.dispatch("display/showDocumentActionBar", {
         show: true,
         loading: false,
         action: true,
       });
 
-      // traditional for to await for every request
-      for (let i = 0; i < this.orderedEntities.length; i++) {
-        const groupedEntity = this.orderedEntities[i];
-
-        const annotationToCreate = {
+      this.orderedEntities.forEach((orderedEntity) => {
+        annotations.push({
           document: this.documentId,
-          span: groupedEntity.spans,
-          label: groupedEntity.label_id,
+          span: orderedEntity.spans,
+          label: orderedEntity.label_id,
           is_correct: true,
           revised: false,
-        };
-
-        if (groupedEntity.row_index !== previousRowIndex) {
-          // if line changed then reset annotation set
-          previousAnnotationSetId = null;
-        }
-        previousRowIndex = groupedEntity.row_index;
-
-        if (previousAnnotationSetId) {
-          annotationToCreate.annotation_set = previousAnnotationSetId;
-        } else {
-          annotationToCreate.label_set = this.labelSet.id;
-        }
-
-        await this.$store
-          .dispatch("document/createAnnotation", annotationToCreate)
-          .then((response) => {
-            if (response) {
-              // set ann set id to use on the next labels on the same row
-              previousAnnotationSetId = response.data.annotation_set;
-            }
-          })
-          .catch((error) => {
-            if (!errorMessageShown) {
-              this.$store.dispatch("document/createErrorMessage", {
-                error,
-                serverErrorMessage: this.$t("server_error"),
-                defaultErrorMessage: this.$t("error_creating_multi_ann"),
-              });
+          label_set: labelSet.id,
+          set_reference: orderedEntity.row_index,
+        });
+      });
 
-              // set to true to only show 1 error
-              // the first time it appears
-              errorMessageShown = true;
-            }
+      this.$store
+        .dispatch("document/createAnnotation", annotations)
+        .then(() => {
+          this.$emit("close");
+        })
+        .catch((error) => {
+          this.$store.dispatch("document/createErrorMessage", {
+            error,
+            serverErrorMessage: this.$t("server_error"),
+            defaultErrorMessage: this.$t("error_creating_multi_ann"),
           });
-      }
-      this.$emit("close");
+        });
     },
     deleteRow(index) {
       this.rows.splice(index, 1);

package/src/components/DocumentPage/NewAnnotation.vue

@@ -274,7 +274,7 @@ export default {
         trapFocus: true,
         canCancel: false,
         onCancel: this.disableLabelSetModalShowing,
-        customClass: "invisible-parent-modal",
+        customClass: "dv-ui-theme invisible-parent-modal",
         events: {
           labelSet: this.chooseLabelSet,
           close: this.disableLabelSetModalShowing,