@konfuzio/document-validation-ui 0.1.5-styles-refactor → 0.1.6-multi-ann-set

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"]),
   },
@@ -137,7 +139,7 @@ export default {
         customClass: "invisible-parent-modal",
         props: { isMultipleAnnotations: true },
         events: {
-          labelSet: this.chooseLabelSet,
+          labelSet: this.submitAnnotations,
         },
       });
     },
@@ -156,6 +158,48 @@ 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.$emit("finished");
+        });
+    },
+
     onButtonEnter() {
       this.$emit("buttonEnter");
     },
@@ -296,6 +340,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,274 @@
+<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"]),
+  },
+  watch: {
+    showAnnSetTable() {
+      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 = {};
+
+        annotationSet.labels.forEach((label) => {
+          if (label.annotations.length > 0) {
+            row[label.id] = label.annotations[0];
+            this.orderedAnnotations.push(label.annotations[0]);
+          }
+        });
+        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 = [];
+      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/ScrollingDocument.vue

@@ -11,7 +11,7 @@
         "
       >
         <ScrollingPage
-          v-for="page in editMode ? documentPagesListForEditMode : pages"
+          v-for="page in editMode ? pagesForPostprocess : pages"
           :key="page.number"
           ref="scrollingPage"
           :page="page"
@@ -27,6 +27,7 @@
     </div>
     <Toolbar v-if="showToolbar" />
     <ActionBar v-if="showActionBar" />
+    <MultiAnnotationTableOverlay v-if="showAnnSetTable" />
   </div>
 </template>
 <script>
@@ -35,12 +36,14 @@ import scroll from "../../directives/scroll";
 import ScrollingPage from "./ScrollingPage";
 import Toolbar from "./DocumentToolbar";
 import ActionBar from "./ActionBar";
+import MultiAnnotationTableOverlay from "./MultiAnnotationTableOverlay";
 
 export default {
   components: {
     ScrollingPage,
     Toolbar,
     ActionBar,
+    MultiAnnotationTableOverlay,
   },
   directives: {
     scroll,
@@ -60,13 +63,19 @@ export default {
       "recalculatingAnnotations",
       "selectedDocument",
       "loading",
+      "annotationSets",
+    ]),
+    ...mapState("edit", [
+      "editMode",
+      "documentPagesListForEditMode",
+      "pagesForPostprocess",
     ]),
-    ...mapState("edit", ["editMode", "documentPagesListForEditMode"]),
     ...mapState("display", [
       "scale",
       "documentActionBar",
       "pageChangedFromThumbnail",
       "currentPage",
+      "showAnnSetTable",
     ]),
     ...mapGetters("display", ["visiblePageRange"]),
 

package/src/components/DocumentTopBar/DocumentTopBarButtons.vue

@@ -27,28 +27,47 @@
       v-if="!editMode && !selectedDocument.is_reviewed && !publicView"
       class="finish-review-button-container"
     >
-      <ActionButtons
-        :finish-review-btn="annotationSets && annotationSets.length > 0"
-        :finish-disabled="finishDisabled"
-        :is-loading="isLoading"
-        @finish-review="handleFinishReview"
-      />
+      <b-tooltip
+        :active="finishDisabled"
+        position="is-bottom"
+        multilined
+        class="right-aligned finish-review"
+      >
+        <b-button
+          :class="['finish-review-btn', 'text-btn', 'primary-button']"
+          type="is-primary"
+          :disabled="finishDisabled"
+          @click.stop="handleFinishReview"
+        >
+          <span v-if="!isLoading">
+            {{ $t("finish_review") }}
+          </span>
+
+          <div v-else>
+            <b-notification :closable="false" :class="['loading-background']">
+              <b-loading :active="isLoading" :is-full-page="loadingOnFullPage">
+                <b-icon
+                  icon="spinner"
+                  class="fa-spin loading-icon-size spinner"
+                />
+              </b-loading>
+            </b-notification>
+          </div>
+        </b-button>
+
+        <template #content> {{ $t("disabled_finish_review") }} </template>
+      </b-tooltip>
     </div>
   </div>
 </template>
 
 <script>
 import { mapState } from "vuex";
-import ActionButtons from "../DocumentAnnotations/ActionButtons";
 
 export default {
   name: "DocumentTopBarButtons",
-  components: {
-    ActionButtons,
-  },
   data() {
     return {
-      finishReviewBtn: true,
       finishDisabled: true,
       emptyLabels: null,
       isLoading: false,
@@ -83,7 +102,6 @@ export default {
     this.finishDisabled = !this.finishedReview;
   },
   methods: {
-    /** EDIT MODE */
     closeEditMode() {
       this.$store.dispatch("edit/disableEditMode");
       this.$store.dispatch("edit/setSplitOverview", false);
@@ -105,24 +123,11 @@ export default {
         // Enable the "next" button to go to the overview
         this.$store.dispatch("edit/setSplitOverview", true);
         this.$store.dispatch("edit/setSelectedPages", null);
-      }
-
-      // If we are in the overview (so more than 1 doc)
-      // or in the edit mode (only 1 doc)
-      else if (this.updatedDocument) {
-        // Send update request to the backend
-        this.$store
-          .dispatch("edit/editDocument", this.updatedDocument)
-          .catch((error) => {
-            this.$store.dispatch("document/createErrorMessage", {
-              error,
-              serverErrorMessage: this.$t("server_error"),
-              defaultErrorMessage: this.$t("edit_error"),
-            });
-          });
-
-        // Close edit mode
-        this.closeEditMode();
+      } else {
+        // If we are in the overview (so more than 1 doc)
+        // or in the edit mode (only 1 doc)
+        // Show confirmation modal to user
+        this.$store.dispatch("edit/setShowEditConfirmationModal", true);
       }
     },
     handleFinishReview() {

package/src/components/DocumentTopBar/KeyboardActionsDescription.vue

@@ -38,7 +38,9 @@
 
               <div class="action-item">
                 <div class="key">{{ "DELETE" }}</div>
-                <div class="keyboard-action-text">{{ $t("delete_key") }}</div>
+                <div class="keyboard-action-text">
+                  {{ $t("missing_annotation") }}
+                </div>
               </div>
             </div>
           </div>