@konfuzio/document-validation-ui 0.1.59-dev.0 → 0.1.59-dev.3

package/src/components/DocumentDashboard.vue

@@ -3,24 +3,19 @@
     <DocumentTopBar />
     <div :class="['dashboard-viewer', renameAndCategorize ? 'edit-mode' : '']">
       <DocumentThumbnails v-if="!editMode" ref="documentPages" />
-      <Split>
-        <SplitArea :size="50" :min-size="350">
+      <splitpanes class="default-theme">
+        <pane :size="50" :min-size="10">
           <ScrollingDocument
             ref="scrollingDocument"
             class="dashboard-document"
           />
-        </SplitArea>
-        <SplitArea :size="50" style="overflow-y: auto">
+        </pane>
+        <pane :size="50">
           <DocumentAnnotations v-if="!editMode" ref="annotations" />
           <DocumentEdit v-else ref="editView" />
-        </SplitArea>
-      </Split>
+        </pane>
+      </splitpanes>
 
-      <MultiAnnotationTableOverlay
-        v-if="showAnnSetTable"
-        :left="documentContainerLeftPadding"
-        :width="documentContainerWidth"
-      />
       <ChooseLabelSetModal
         v-if="showChooseLabelSetModal && showChooseLabelSetModal.show"
         :is-multiple-annotations="showChooseLabelSetModal.isMultipleAnnotations"
@@ -59,16 +54,15 @@ import { mapGetters, mapState } from "vuex";
 import { DocumentTopBar } from "./DocumentTopBar";
 import { ScrollingDocument } from "./DocumentPage";
 import { DocumentThumbnails } from "./DocumentThumbnails";
-import {
-  DocumentAnnotations,
-  MultiAnnotationTableOverlay,
-} from "./DocumentAnnotations";
+import { DocumentAnnotations } from "./DocumentAnnotations";
 import { DocumentEdit } from "./DocumentEdit";
 import ErrorMessage from "./ErrorMessage";
 import NotOptimizedViewportModal from "../components/DocumentModals/NotOptimizedViewportModal";
 import AnnotationDeletedModal from "../components/DocumentModals/AnnotationDeletedModal";
 import DocumentErrorModal from "../components/DocumentModals/DocumentErrorModal";
 import ChooseLabelSetModal from "../components/DocumentAnnotations/ChooseLabelSetModal";
+import { Splitpanes, Pane } from "splitpanes";
+import "splitpanes/dist/splitpanes.css";
 
 /**
  * This component shows the PDF pages in a scrolling component and
@@ -77,6 +71,8 @@ import ChooseLabelSetModal from "../components/DocumentAnnotations/ChooseLabelSe
 export default {
   name: "DocumentDashboard",
   components: {
+    Splitpanes,
+    Pane,
     DocumentTopBar,
     ScrollingDocument,
     DocumentThumbnails,
@@ -85,7 +81,6 @@ export default {
     ErrorMessage,
     NotOptimizedViewportModal,
     DocumentErrorModal,
-    MultiAnnotationTableOverlay,
     ChooseLabelSetModal,
     AnnotationDeletedModal,
   },
@@ -136,7 +131,7 @@ export default {
   mounted() {
     this.resizeObserver = new ResizeObserver(this.onDocumentResize);
   },
-  destroyed() {
+  unmounted() {
     if (this.$refs.scrollingDocument) {
       this.resizeObserver.unobserve(this.$refs.scrollingDocument.$el);
     }

package/src/components/DocumentEdit/EditPages.vue

@@ -7,60 +7,64 @@
       v-model="editPages"
       class="document-grid"
       easing="cubic-bezier(0.37, 0, 0.63, 1)"
+      item-key="id"
+      :move="checkMove"
       @start="dragging = true"
       @end="handleDragEnd"
-      @move="checkMove"
     >
-      <div
-        v-for="(page, index) in editPages"
-        :key="page.id"
-        class="image-section"
-        tabindex="0"
-      >
-        <div class="top-section">
-          <EditPageThumbnail
-            :page="page"
-            :index="index"
-            :rotation="getRotation(page.id)"
-          />
-          <div
-            :class="[
-              'splitting-lines',
-              splittingLines &&
-                splittingLines[index].page === page.number &&
-                'active-split',
-            ]"
-            @click="handleSplittingLines(page.number, 'manual')"
-          >
-            <div class="scissors-icon">
-              <b-icon icon="scissors" class="is-small" />
-            </div>
+      <template #item="{ element, index }">
+        <div
+          :id="element.id"
+          :key="element.id"
+          class="image-section"
+          tabindex="0"
+        >
+          <div class="top-section">
+            <EditPageThumbnail
+              :page="element"
+              :index="index"
+              :rotation="getRotation(element.id)"
+            />
             <div
-              v-if="
-                splittingLines && splittingLines[index].page === page.number
-              "
-              class="lines active-split"
+              :class="[
+                'splitting-lines',
+                splittingLines &&
+                  splittingLines[index].page === element.number &&
+                  'active-split',
+              ]"
+              @click="handleSplittingLines(element.number, 'manual')"
             >
-              <SplitZigZag
-                :color="
+              <div class="scissors-icon">
+                <b-icon icon="scissors" class="is-small" />
+              </div>
+              <div
+                v-if="
                   splittingLines &&
-                  splittingLines[index].origin &&
-                  splittingLines[index].origin === 'AI' &&
-                  splitSuggestionsEnabled
-                    ? 'green'
-                    : 'dark'
+                  splittingLines[index].page === element.number
                 "
-              />
-            </div>
-            <div v-else class="lines not-active-split">
-              <SplitLines />
+                class="lines active-split"
+              >
+                <SplitZigZag
+                  :color="
+                    splittingLines &&
+                    splittingLines[index].origin &&
+                    splittingLines[index].origin === 'AI' &&
+                    splitSuggestionsEnabled
+                      ? 'green'
+                      : 'dark'
+                  "
+                />
+              </div>
+              <div v-else class="lines not-active-split">
+                <SplitLines />
+              </div>
             </div>
           </div>
+          <div class="bottom-section">
+            <span class="page-number">{{ element.number }}</span>
+          </div>
         </div>
-        <div class="bottom-section">
-          <span class="page-number">{{ page.number }}</span>
-        </div>
-      </div>
+      </template>
     </draggable>
   </div>
 </template>
@@ -75,7 +79,6 @@ import { mapState } from "vuex";
 import SplitLines from "../../assets/images/SplitLines";
 import SplitZigZag from "../../assets/images/SplitZigZag";
 import EditPageThumbnail from "./EditPageThumbnail";
-
 import draggable from "vuedraggable";
 
 export default {
@@ -133,7 +136,9 @@ export default {
     },
   },
   mounted() {
-    this.editPages = this.pagesForPostprocess;
+    if (this.pagesForPostprocess.length > 0) {
+      this.editPages = this.pagesForPostprocess;
+    }
   },
   methods: {
     deselect() {

package/src/components/DocumentPage/{NewAnnotation.vue → AnnotationPopup.vue}

@@ -1,10 +1,24 @@
 <!-- eslint-disable vue/no-v-html -->
 <template>
-  <div class="annotation-popup" :style="{ left: `${left}px`, top: `${top}px` }">
-    <div v-if="!textFromEntities" class="popup-input">
-      <b-icon icon="spinner" class="fa-spin loading-icon-size spinner" />
+  <div
+    class="annotation-popup"
+    :style="{
+      left: `${left}px`,
+      top: `${top}px`,
+      height: `${heightOfPopup}px`,
+    }"
+  >
+    <div v-if="!editAnnotation">
+      <div v-if="spanLoading" class="popup-input">
+        <b-icon icon="spinner" class="fa-spin loading-icon-size spinner" />
+      </div>
+      <input
+        v-else
+        v-model="textFromEntities"
+        class="popup-input"
+        type="text"
+      />
     </div>
-    <input v-else v-model="textFromEntities" class="popup-input" type="text" />
     <b-dropdown
       v-model="selectedSet"
       :disabled="!textFromEntities"
@@ -27,17 +41,19 @@
           ]"
           type="is-text"
         >
-          {{
-            selectedSet
-              ? `${selectedSet.label_set.name} ${
-                  selectedSet.id
-                    ? numberOfAnnotationSetGroup(selectedSet)
-                    : `${numberOfLabelSetGroup(selectedSet.label_set)} (${$t(
-                        "new"
-                      )})`
-                }`
-              : $t("select_annotation_set")
-          }}
+          <span class="input-text">
+            {{
+              selectedSet
+                ? `${selectedSet.label_set.name} ${
+                    selectedSet.id
+                      ? numberOfAnnotationSetGroup(selectedSet)
+                      : `${numberOfLabelSetGroup(selectedSet.label_set)} (${$t(
+                          "new"
+                        )})`
+                  }`
+                : $t("select_annotation_set")
+            }}</span
+          >
           <span class="caret-icon">
             <b-icon icon="angle-down" size="is-small" class="caret" />
           </span>
@@ -72,7 +88,6 @@
       size="is-large"
       position="is-bottom"
       class="bottom-aligned"
-      :close-delay="5000"
     >
       <template #content>
         <div
@@ -99,13 +114,13 @@
             ]"
             type="is-text"
           >
-            {{
+            <span class="input-text">{{
               selectedLabel
                 ? selectedLabel.name
                 : labels && labels.length === 0
                 ? $t("no_labels_to_choose")
                 : $t("select_label")
-            }}
+            }}</span>
             <span class="caret-icon">
               <b-icon icon="angle-down" size="is-small" class="caret" />
             </span>
@@ -144,15 +159,12 @@
  * This component is used to show a popup
  * for creating a new annotation.
  */
-const heightOfPopup = 192;
-const margin = 12;
-const widthOfPopup = 205;
 
 import { mapGetters, mapState } from "vuex";
 
 export default {
   props: {
-    newAnnotation: {
+    spans: {
       required: true,
       type: Array,
     },
@@ -171,6 +183,9 @@ export default {
   },
   data() {
     return {
+      heightOfPopup: 192,
+      margin: 12,
+      widthOfPopup: 205,
       selectedLabel: null,
       selectedSet: null,
       labels: null,
@@ -180,51 +195,48 @@ export default {
     };
   },
   computed: {
-    ...mapState("document", ["annotationSets", "documentId"]),
+    ...mapState("document", ["annotationSets", "documentId", "editAnnotation"]),
     ...mapGetters("document", [
       "numberOfAnnotationSetGroup",
       "numberOfLabelSetGroup",
       "labelsFilteredForAnnotationCreation",
     ]),
     ...mapState("display", ["showBranding"]),
-    ...mapGetters("display", ["clientToBbox"]),
-    ...mapState("selection", ["spanSelection", "selection"]),
+    ...mapGetters("display", ["clientToBbox", "bboxToRect"]),
+    ...mapState("selection", ["spanSelection", "selection", "spanLoading"]),
     top() {
       if (this.selection && this.selection.end) {
-        const top = this.selection.end.y + margin;
+        const top = this.selection.end.y + this.margin;
         //check if the popup will not go off the container on the top
-        return top + heightOfPopup < this.containerHeight
+        return top + this.heightOfPopup < this.containerHeight
           ? top
-          : this.selection.end.y - heightOfPopup;
+          : this.selection.end.y - this.heightOfPopup;
       } else {
-        const top = this.newAnnotation[0].scaled.y - heightOfPopup; // subtract the height of the popup plus some margin
+        const normalizedSpan = this.bboxToRect(this.page, this.spans[0]);
+        const top = normalizedSpan.y - this.heightOfPopup; // subtract the height of the popup plus some margin
 
         //check if the popup will not go off the container on the top
-        return this.newAnnotation[0].scaled.y > heightOfPopup
+        return normalizedSpan.y > this.heightOfPopup
           ? top
-          : this.newAnnotation[0].scaled.y +
-              this.newAnnotation[0].scaled.height +
-              margin;
+          : normalizedSpan.y + normalizedSpan.height + this.margin;
       }
     },
     left() {
       if (this.selection && this.selection.start && this.selection.end) {
         const left = this.selection.start.x;
         //check if the popup will not go off the container on the right
-        return left + widthOfPopup < this.containerWidth
+        return left + this.widthOfPopup < this.containerWidth
           ? left
-          : this.containerWidth - widthOfPopup;
-        return this.selection.start.x;
+          : this.containerWidth - this.widthOfPopup;
       } else {
+        const normalizedSpan = this.bboxToRect(this.page, this.spans[0]);
         const left =
-          this.newAnnotation[0].scaled.x +
-          this.newAnnotation[0].scaled.width / 2 -
-          widthOfPopup / 2; // add the entity half width to be centered and then subtract half the width of the popup
+          normalizedSpan.x + normalizedSpan.width / 2 - this.widthOfPopup / 2; // add the entity half width to be centered and then subtract half the width of the popup
 
         //check if the popup will not go off the container
-        if (left + widthOfPopup > this.containerWidth) {
+        if (left + this.widthOfPopup > this.containerWidth) {
           // on the right side
-          return this.containerWidth - widthOfPopup;
+          return this.containerWidth - this.widthOfPopup;
         } else {
           // on the left side
           return left > 0 ? left : 0;
@@ -232,10 +244,8 @@ export default {
       }
     },
     textFromEntities() {
-      if (!this.spanSelection) return;
-
       let text = "";
-      this.spanSelection.forEach((span) => {
+      this.spans.forEach((span) => {
         text = `${text} ${span.offset_string}`;
       });
 
@@ -243,17 +253,23 @@ export default {
     },
   },
   watch: {
-    selectedSet(newValue) {
+    selectedSet(newValue, oldValue) {
       this.selectedLabel = null;
       this.labels = this.labelsFilteredForAnnotationCreation(newValue);
-      if (this.labels.length === 1) {
+      if (oldValue === null && this.editAnnotation) {
+        this.selectedLabel = this.editAnnotation.label;
+      } else if (this.labels.length === 1) {
         this.selectedLabel = this.labels[0];
       }
     },
   },
   mounted() {
     this.setsList = this.orderedSetList([...this.annotationSets]);
-    if (this.setsList.length === 1) {
+
+    if (this.editAnnotation) {
+      this.heightOfPopup = 142;
+      this.selectedSet = this.editAnnotation.annotationSet;
+    } else if (this.setsList.length === 1) {
       this.selectedSet = this.setsList[0];
     }
 
@@ -262,7 +278,7 @@ export default {
       document.body.addEventListener("click", this.clickOutside);
     }, 200);
   },
-  destroyed() {
+  unmounted() {
     document.body.removeEventListener("click", this.clickOutside);
   },
   methods: {
@@ -283,61 +299,73 @@ export default {
       return setsList;
     },
     close() {
-      this.$store.dispatch("selection/setSelectedEntities", null);
-      this.$store.dispatch("selection/endSelection");
+      if (this.editAnnotation) {
+        this.$store.dispatch("document/resetEditAnnotation");
+      }
+      this.$store.dispatch("selection/disableSelection");
       this.$emit("close");
     },
     save() {
-      this.loading = true;
-      const span = this.newAnnotation.flatMap((ann) => {
-        return {
-          ...ann.original,
-          offset_string: ann.original.offset_string,
-        };
-      });
+      if (this.editAnnotation) {
+        this.loading = true;
+        this.$store.dispatch("document/setEditAnnotation", {
+          id: this.editAnnotation.id,
+          index: this.editAnnotation.index,
+          label: this.selectedLabel,
+          labelSet: this.selectedSet.label_set,
+          annotationSet: this.selectedSet,
+          pageNumber: this.editAnnotation.pageNumber,
+        });
 
-      let selection_bbox = null;
+        document.getElementById("save-ann").click();
 
-      if (this.selection && this.selection.start && this.selection.end) {
-        selection_bbox = this.clientToBbox(
-          this.page,
-          this.selection.start,
-          this.selection.end
-        );
-      }
+        return;
+      } else {
+        this.loading = true;
 
-      const annotationToCreate = {
-        document: this.documentId,
-        span: span,
-        label: this.selectedLabel.id,
-        is_correct: true,
-        revised: false,
-      };
+        let selection_bbox = null;
 
-      if (selection_bbox) {
-        annotationToCreate.selection_bbox = selection_bbox;
-      }
+        if (this.selection && this.selection.start && this.selection.end) {
+          selection_bbox = this.clientToBbox(
+            this.page,
+            this.selection.start,
+            this.selection.end
+          );
+        }
 
-      if (this.selectedSet.id) {
-        annotationToCreate.annotation_set = this.selectedSet.id;
-      } else {
-        annotationToCreate.label_set = this.selectedSet.label_set.id;
-      }
-      this.$store
-        .dispatch("document/createAnnotation", {
-          annotation: annotationToCreate,
-        })
-        .catch((error) => {
-          this.$store.dispatch("document/createErrorMessage", {
-            error,
-            serverErrorMessage: this.$t("server_error"),
-            defaultErrorMessage: this.$t("error_creating_annotation"),
+        const annotationToCreate = {
+          document: this.documentId,
+          span: this.spans,
+          label: this.selectedLabel.id,
+          is_correct: true,
+          revised: false,
+        };
+
+        if (selection_bbox) {
+          annotationToCreate.selection_bbox = selection_bbox;
+        }
+
+        if (this.selectedSet.id) {
+          annotationToCreate.annotation_set = this.selectedSet.id;
+        } else {
+          annotationToCreate.label_set = this.selectedSet.label_set.id;
+        }
+        this.$store
+          .dispatch("document/createAnnotation", {
+            annotation: annotationToCreate,
+          })
+          .catch((error) => {
+            this.$store.dispatch("document/createErrorMessage", {
+              error,
+              serverErrorMessage: this.$t("server_error"),
+              defaultErrorMessage: this.$t("error_creating_annotation"),
+            });
+          })
+          .finally(() => {
+            this.close();
+            this.loading = false;
           });
-        })
-        .finally(() => {
-          this.close();
-          this.loading = false;
-        });
+      }
     },
     chooseLabelSet(labelSet) {
       // check if there's already a new entry for that label set to be created

package/src/components/DocumentPage/BoxSelection.vue

@@ -13,11 +13,6 @@
       ref="boxTransformer"
       :config="transformerConfig"
     />
-    <v-rect
-      v-if="selection.placeholderBox"
-      ref="placeholderSelection"
-      :config="placeholderConfig"
-    />
   </v-group>
 </template>
 
@@ -56,21 +51,7 @@ export default {
         draggable: true,
       };
     },
-    placeholderConfig() {
-      return {
-        x: this.selection.placeholderBox.x,
-        y: this.selection.placeholderBox.y,
-        width: this.selection.placeholderBox.width,
-        height: this.selection.placeholderBox.height,
-        fill: "transparent",
-        stroke: "#41af85",
-        strokeWidth: 3,
-        globalCompositeOperation: "multiply",
-        shadowForStrokeEnabled: false,
-        name: "placeholderSelection",
-        draggable: false,
-      };
-    },
+
     transformerConfig() {
       return {
         borderEnabled: false,
@@ -87,7 +68,8 @@ export default {
       "elementSelected",
       "spanSelection",
     ]),
-    ...mapGetters("display", ["clientToBbox"]),
+    ...mapState("document", ["editAnnotation"]),
+    ...mapGetters("display", ["clientToBbox", "scaledEntities"]),
     ...mapGetters("selection", ["isSelectionValid", "entitiesOnSelection"]),
   },
   watch: {
@@ -106,19 +88,19 @@ export default {
   },
   methods: {
     handleSelection() {
-      if (!this.elementSelected) {
-        const box = this.clientToBbox(
-          this.page,
-          this.selection.start,
-          this.selection.end
-        );
-        this.$emit(
-          "createAnnotations",
-          this.entitiesOnSelection(box, this.page)
-        );
-      } else {
-        this.getBoxSelectionContent();
-      }
+      const box = this.clientToBbox(
+        this.page,
+        this.selection.start,
+        this.selection.end
+      );
+
+      this.$store.dispatch("selection/entitySelection", {
+        entities: this.scaledEntities(
+          this.entitiesOnSelection(box, this.page),
+          this.page
+        ),
+        selection: box,
+      });
     },
     updateTransformer() {
       // here we need to manually attach or detach Transformer node
@@ -152,21 +134,6 @@ export default {
       transformerNode.getLayer().batchDraw();
     },
 
-    getBoxSelectionContent() {
-      if (!this.isSelecting) {
-        const box = this.clientToBbox(
-          this.page,
-          this.selection.start,
-          this.selection.end
-        );
-        this.$emit("selectEntities", this.entitiesOnSelection(box, this.page));
-        this.$store.dispatch("selection/getTextFromBboxes", {
-          box,
-          entities: false,
-        });
-      }
-    },
-
     /**
      * This method is used for both transforms and drags since it just
      * retrieves the rect's new attributes from the event and uses those