@konfuzio/document-validation-ui 0.1.1

package/src/components/DocumentPage/MultiAnnSelection.vue

@@ -0,0 +1,302 @@
+<template>
+  <v-group>
+    <v-rect
+      ref="multiAnnBoxSelection"
+      :config="tableConfig"
+      :stroke-scale-enabled="false"
+      @dragstart="changeStart"
+      @dragend="onChange"
+      @transformstart="changeStart"
+      @transformend="onChange"
+    />
+    <v-transformer ref="multiAnnBoxTransformer" :config="transformerConfig" />
+    <v-label
+      v-if="showButton"
+      :config="buttonConfig"
+      @mouseenter="onButtonEnter"
+      @mouseleave="onButtonLeave"
+    >
+      <v-tag
+        :config="{
+          fill: '#7B61FF',
+          cornerRadius: 4,
+          name: 'tag',
+        }"
+      />
+      <v-text
+        :config="{
+          align: 'right',
+          width: buttonWidth,
+          ellipsis: true,
+          wrap: 'none',
+          padding: 8,
+          text: $t('new_multi_ann_title'),
+          fill: 'white',
+          fontSize: 14,
+          cursor: 'pointer',
+          name: 'multiAnnButton',
+        }"
+        @click="openMultiAnnotationModal"
+      />
+    </v-label>
+  </v-group>
+</template>
+
+<script>
+import { mapGetters, mapState, mapActions } from "vuex";
+import { ChooseLabelSetModal } from "../DocumentAnnotations";
+
+export default {
+  props: {
+    page: {
+      required: true,
+      type: Object,
+    },
+  },
+  data() {
+    const BUTTON_HEIGHT = 36;
+    const BUTTON_WIDTH = this.$i18n.locale === "de" ? 238 : 187;
+    return {
+      buttonWidth: BUTTON_WIDTH,
+      buttonHeight: BUTTON_HEIGHT,
+      isEditing: false,
+      showTable: false,
+      entities: [],
+    };
+  },
+  computed: {
+    showButton() {
+      return !this.isSelecting && !this.isEditing;
+    },
+    transformerConfig() {
+      return {
+        borderEnabled: false,
+        rotateEnabled: false,
+        ignoreStroke: true,
+        keepRatio: false,
+        anchorStroke: "#7B61FF",
+        anchorSize: 6,
+      };
+    },
+    tableConfig() {
+      return {
+        x: this.selection.start.x,
+        y: this.selection.start.y,
+        width: this.selection.end.x - this.selection.start.x,
+        height: this.selection.end.y - this.selection.start.y,
+        fill: this.isSelecting ? "#7B61FFB3" : "#7B61FF33",
+        stroke: this.isSelecting ? "transparent" : "#7B61FFB3",
+        strokeWidth: 1,
+        globalCompositeOperation: "multiply",
+        shadowForStrokeEnabled: false,
+        name: "multiAnnBoxSelection",
+        draggable: true,
+      };
+    },
+    buttonConfig() {
+      let x = this.selection.end.x;
+      let y = this.selection.end.y;
+      const marginTop = 4;
+
+      // check if selection was made from right to left
+      if (x < this.selection.start.x) {
+        x = this.selection.start.x;
+      }
+      if (y < this.selection.start.y) {
+        y = this.selection.start.y;
+      }
+
+      return {
+        x: x - this.buttonWidth,
+        y: y + marginTop,
+        height: this.buttonHeight,
+        width: this.buttonWidth,
+      };
+    },
+    ...mapState("selection", ["selection", "isSelecting"]),
+    ...mapGetters("display", ["clientToBbox"]),
+    ...mapGetters("document", ["entitiesOnSelection"]),
+  },
+  watch: {
+    isSelecting(newValue, oldValue) {
+      // if it ends selection
+      if (!newValue && oldValue) {
+        this.calculateEntities();
+        this.updateTransformer();
+      }
+    },
+  },
+  methods: {
+    openMultiAnnotationModal() {
+      this.$buefy.modal.open({
+        parent: this.$parent,
+        component: ChooseLabelSetModal,
+        hasModalCard: true,
+        trapFocus: true,
+        canCancel: false,
+        customClass: "invisible-parent-modal",
+        props: { isMultipleAnnotations: true },
+        events: {
+          labelSet: this.chooseLabelSet,
+        },
+      });
+    },
+    chooseLabelSet(labelSet) {
+      const tableSelection = {
+        labelSet,
+        position: {
+          x: this.selection.start.x,
+          y: this.selection.start.y,
+          width: this.selection.end.x - this.selection.start.x,
+          height: this.selection.end.y - this.selection.start.y,
+        },
+        entities: this.entities,
+      };
+      this.$store.dispatch("selection/disableSelection");
+      this.$emit("finished", tableSelection);
+    },
+
+    onButtonEnter() {
+      this.$emit("buttonEnter");
+    },
+
+    onButtonLeave() {
+      this.$emit("buttonLeave");
+    },
+    changeStart() {
+      this.isEditing = true;
+    },
+    /**
+     * This method is used for both transforms and drags since it just
+     * retrieves the rect's new attributes from the event and uses those
+     * to set the new selection state.
+     */
+    onChange(event) {
+      this.isEditing = false;
+
+      const { x, y, scaleX, scaleY, skewX, width, height } = event.target.attrs;
+      const realWidth = width * scaleX;
+      const realHeight = height * scaleY;
+      let start;
+      let end;
+
+      // we need to figure out if there's skewing going on, to fix start/end points
+      // (other cases appear to fix themselves automatically)
+      if (skewX >= 0) {
+        start = { x, y };
+        end = {
+          x: start.x + realWidth,
+          y: start.y + realHeight,
+        };
+      } else {
+        end = { x, y };
+        start = { x: end.x - realWidth, y: end.y - realHeight };
+      }
+
+      this.moveSelection({ start, end });
+
+      // reset node's everything after transform (we don't want to deal with that,
+      // just with regular x/y/width/height)
+      const node = this.$refs.multiAnnBoxSelection.getNode();
+      node.skewX(0);
+      node.skewY(0);
+      node.rotation(0);
+      node.scaleX(1);
+      node.scaleY(1);
+
+      this.calculateEntities();
+      this.updateTransformer();
+    },
+
+    updateTransformer() {
+      // here we need to manually attach or detach Transformer node
+      const transformer = this.$refs.multiAnnBoxTransformer;
+
+      // maybe we're out of sync and the transformer is not available, just return
+      if (!transformer) {
+        return;
+      }
+
+      const transformerNode = transformer.getNode();
+      const stage = transformerNode.getStage();
+      const selectedNode = stage.findOne(".multiAnnBoxSelection");
+
+      // do nothing if selected node is already attached
+      if (selectedNode === transformerNode.node()) {
+        return;
+      }
+
+      if (selectedNode) {
+        // attach to another node
+        transformerNode.nodes([selectedNode]);
+      } else {
+        // remove transformer
+        transformerNode.nodes([]);
+      }
+
+      transformerNode.getLayer().batchDraw();
+    },
+
+    calculateEntities() {
+      const box = this.clientToBbox(
+        this.page,
+        this.selection.start,
+        this.selection.end
+      );
+      const entities = this.entitiesOnSelection(box, this.page);
+
+      const offset = 4;
+      if (entities.length === 0) {
+        return;
+      }
+
+      const rows = [...new Set(entities.map((o) => o["top"]))];
+      rows.sort();
+
+      let joinRow = 0;
+      const jointRows = [];
+
+      // group entities that are near each other on Y axis
+      rows.forEach((row) => {
+        if (row - joinRow > offset) {
+          joinRow = row;
+          jointRows.push(row);
+        }
+      });
+
+      let cols = {};
+      jointRows.forEach((row) => {
+        const entityRow = [];
+        entities.forEach((item) => {
+          if (item.top === row || Math.abs(item.top - row) <= offset) {
+            entityRow.push(item);
+          }
+        });
+        entityRow.sort((a, b) => a.x0 - b.x0);
+
+        const finalRow = {};
+        let previousEntity = null;
+
+        // group entities that are near each other on X axis
+        entityRow.forEach((entity) => {
+          let xGroup = entity.x0;
+          if (previousEntity && previousEntity.x1 + offset > entity.x0) {
+            // compare to previous one
+            finalRow[previousEntity.xGroup].push(entity);
+            xGroup = previousEntity.xGroup;
+          } else {
+            finalRow[entity.x0] = [entity];
+          }
+          previousEntity = entity;
+          previousEntity.xGroup = xGroup;
+        });
+
+        cols[row] = finalRow;
+      });
+
+      this.entities = cols;
+    },
+    ...mapActions("selection", ["moveSelection"]),
+  },
+};
+</script>

package/src/components/DocumentPage/MultiAnnotationTablePopup.vue

@@ -0,0 +1,253 @@
+<template>
+  <div
+    class="multi-ann-table-popup"
+    :style="{
+      left: `${tablePosition.x}px`,
+      top: `${tablePosition.y - 22}px`,
+      width: `${tablePosition.width}px`,
+      height: `${tablePosition.height}px`,
+      maxWidth: `${pageSize.width}px`,
+      maxHeight: `${pageSize.height}px`,
+    }"
+  >
+    <b-table
+      ref="table"
+      class="full-height"
+      detail-icon="faScissors"
+      :data="rows"
+      :columns="columns"
+      :narrowed="true"
+      :bordered="true"
+      draggable-column
+      @columndragstart="columndragstart"
+      @columndrop="columndrop"
+      @columndragover="columndragover"
+      @columndragleave="columndragleave"
+    >
+    </b-table>
+  </div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+
+export default {
+  name: "MultiAnnotationTablePopup",
+
+  props: {
+    tablePosition: {
+      required: true,
+      type: Object,
+      default: null,
+    },
+    pageSize: {
+      required: true,
+      type: Object,
+      default: null,
+    },
+    labelSet: {
+      required: true,
+      type: Object,
+      default: null,
+    },
+    groupedEntities: {
+      required: true,
+      type: Object,
+      default: null,
+    },
+  },
+  data() {
+    const columns = this.labelSet.labels.map((label) => {
+      return {
+        field: `${label.id}`,
+        label: label.name,
+        centered: true,
+      };
+    });
+    return {
+      rows: [],
+      columns,
+      counter: 0,
+      draggingColumn: null,
+      draggingColumnIndex: null,
+      orderedEntities: [],
+    };
+  },
+  computed: {
+    ...mapState("document", ["documentId"]),
+  },
+  mounted() {
+    this.handleRows();
+    setTimeout(() => {
+      // prevent click propagation when opening the popup
+      document.body.addEventListener("click", this.clickOutside);
+      this.$refs.table.$el.scrollIntoView({
+        behavior: "smooth",
+        block: "nearest",
+        inline: "center",
+      });
+    }, 200);
+
+    // show action bar
+    this.$store.dispatch("display/showDocumentActionBar", {
+      show: true,
+      text: this.$t("drag_drop_columns_multi_ann"),
+      icon: "drag",
+      loading: false,
+      action: () => {
+        this.submitAnnotations();
+        this.$emit("close");
+      },
+    });
+  },
+  destroyed() {
+    this.$store.dispatch("display/showDocumentActionBar", { show: false });
+    this.$store.dispatch("selection/disableSelection");
+    document.body.removeEventListener("click", this.clickOutside);
+  },
+  methods: {
+    handleRows() {
+      this.rows = [];
+      this.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.groupedEntities).forEach(([key, groupedEntity]) => {
+        let row = null;
+        this.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,
+            };
+
+            this.orderedEntities.push(customEntity);
+          }
+        });
+        if (row !== null) {
+          rowIndex++;
+        }
+        this.rows.push(row);
+      });
+    },
+
+    clickOutside(event) {
+      if (!(this.$el == event.target || this.$el.contains(event.target))) {
+        this.$emit("close");
+      }
+    },
+    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 = {
+          document: this.documentId,
+          span: groupedEntity.spans,
+          label: groupedEntity.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"),
+              });
+
+              // set to true to only show 1 error
+              // the first time it appears
+              errorMessageShown = true;
+            }
+          });
+      }
+      this.$emit("close");
+    },
+    deleteRow(index) {
+      this.rows.splice(index, 1);
+    },
+
+    //#region Column Drag
+    columndragstart(payload) {
+      this.draggingColumn = payload.column;
+      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();
+    },
+    columndrop(payload) {
+      payload.event.target.closest("th").classList.remove("is-selected");
+      const droppedOnColumnIndex = payload.index;
+
+      const column = this.columns[this.draggingColumnIndex];
+      this.columns.splice(this.draggingColumnIndex, 1);
+      this.columns.splice(droppedOnColumnIndex, 0, column);
+      this.handleRows();
+    },
+    //#endregion
+  },
+};
+</script>
+<style
+  scoped
+  lang="scss"
+  src="../../assets/scss/multi_ann_table_popup.scss"
+></style>