@konfuzio/document-validation-ui 0.1.5 → 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,8 +11,9 @@
         "
       >
         <ScrollingPage
-          v-for="page in editMode ? documentPagesListForEditMode : pages"
+          v-for="page in editMode ? pagesForPostprocess : pages"
           :key="page.number"
+          ref="scrollingPage"
           :page="page"
           :client-height="clientHeight"
           :scroll-top="scrollTop"
@@ -26,20 +27,23 @@
     </div>
     <Toolbar v-if="showToolbar" />
     <ActionBar v-if="showActionBar" />
+    <MultiAnnotationTableOverlay v-if="showAnnSetTable" />
   </div>
 </template>
 <script>
-import { mapState } from "vuex";
+import { mapState, mapGetters } from "vuex";
 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,
@@ -49,6 +53,8 @@ export default {
     return {
       scrollTop: 0,
       clientHeight: 0,
+      isScolling: false,
+      scrollTimeout: null,
     };
   },
 
@@ -57,9 +63,21 @@ export default {
       "recalculatingAnnotations",
       "selectedDocument",
       "loading",
+      "annotationSets",
     ]),
-    ...mapState("edit", ["editMode", "documentPagesListForEditMode"]),
-    ...mapState("display", ["scale", "documentActionBar"]),
+    ...mapState("edit", [
+      "editMode",
+      "documentPagesListForEditMode",
+      "pagesForPostprocess",
+    ]),
+    ...mapState("display", [
+      "scale",
+      "documentActionBar",
+      "pageChangedFromThumbnail",
+      "currentPage",
+      "showAnnSetTable",
+    ]),
+    ...mapGetters("display", ["visiblePageRange"]),
 
     pages() {
       if (this.selectedDocument) {
@@ -85,6 +103,9 @@ export default {
       this.scrollTop = 0;
     },
   },
+  mounted() {
+    this.$refs.scrollingDocument.addEventListener("scroll", this.handleScroll);
+  },
 
   methods: {
     updateScrollBounds() {
@@ -102,6 +123,24 @@ export default {
 
       this.$refs.scrollingDocument.scroll(scrollX, scrollY);
     },
+    handleScroll() {
+      if (this.pages.length === 1) return;
+
+      this.isScrolling = true;
+
+      clearTimeout(this.scrollTimeout);
+
+      this.scrollTimeout = setTimeout(() => {
+        this.isScrolling = false;
+
+        if (
+          this.pageChangedFromThumbnail &&
+          this.visiblePageRange[1] === this.currentPage
+        ) {
+          this.$store.dispatch("display/setPageChangedFromThumbnail", false);
+        }
+      }, 300);
+    },
   },
 };
 </script>

package/src/components/DocumentPage/ScrollingPage.vue

@@ -44,10 +44,12 @@ export default {
       previousFocusedAnnotation: null,
       previousY: null,
       pageBeingLoaded: false,
+      isScrolling: false,
     };
   },
 
   computed: {
+    ...mapState("display", ["pageChangedFromThumbnail"]),
     ...mapGetters("display", ["visiblePageRange", "bboxToRect"]),
     ...mapGetters("document", ["scrollDocumentToAnnotation"]),
 
@@ -117,15 +119,12 @@ export default {
       }
     },
     isElementFocused(focused) {
-      if (!this.loading && focused) {
+      if (!this.loading && focused && !this.pageChangedFromThumbnail) {
         this.$store.dispatch("display/updateCurrentPage", this.page.number);
       }
     },
     currentPage(number) {
-      if (
-        (this.page.number === number || this.page.number === number) &&
-        !this.isElementFocused
-      ) {
+      if (this.page.number === number && !this.isElementFocused) {
         this.$emit("page-jump", this.elementTop, 0);
       }
     },

package/src/components/DocumentThumbnails/DocumentThumbnails.vue

@@ -62,7 +62,7 @@ export default {
   },
   data() {
     return {
-      thumbnailClicked: false,
+      thumbnailClicked: null,
       previousScrollPosition: 0,
     };
   },
@@ -76,9 +76,10 @@ export default {
   },
   watch: {
     currentPage(newPage) {
-      if (newPage && !this.thumbnailClicked) {
-        this.scrollToThumbnail();
-      }
+      if (!newPage) return;
+
+      // handle thumbnail selection when scrolling the document
+      this.scrollToThumbnail(newPage);
     },
   },
   mounted() {
@@ -94,27 +95,29 @@ export default {
   methods: {
     /* Change page if not the currently open and not in modal */
     changePage(pageNumber) {
-      this.thumbnailClicked = true;
+      this.thumbnailClicked = pageNumber;
 
       if (
         !this.loading &&
         !this.recalculatingAnnotations &&
         pageNumber != this.currentPage
       ) {
-        this.$store.dispatch(
-          "display/updateCurrentPage",
-          parseInt(pageNumber, 10)
-        );
+        this.$store.dispatch("display/setPageChangedFromThumbnail", true);
+        this.$store.dispatch("display/updateCurrentPage", pageNumber);
       }
     },
 
-    scrollToThumbnail() {
+    scrollToThumbnail(page) {
       // select only the active thumbnail
       const selectedPage = this.$refs.docPage.filter((image) =>
         image.className.includes("selected")
       );
 
-      if (selectedPage && selectedPage[0]) {
+      if (page == this.thumbnailClicked) {
+        this.thumbnailClicked = null;
+      }
+
+      if (!this.thumbnailClicked && selectedPage && selectedPage[0]) {
         selectedPage[0].scrollIntoView();
       }
     },