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

package/src/components/DocumentDashboard.vue

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

package/src/components/DocumentEdit/EditPages.vue

@@ -7,64 +7,60 @@
       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"
     >
-      <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-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>
             <div
-              :class="[
-                'splitting-lines',
-                splittingLines &&
-                  splittingLines[index].page === element.number &&
-                  'active-split',
-              ]"
-              @click="handleSplittingLines(element.number, 'manual')"
+              v-if="
+                splittingLines && splittingLines[index].page === page.number
+              "
+              class="lines active-split"
             >
-              <div class="scissors-icon">
-                <b-icon icon="scissors" class="is-small" />
-              </div>
-              <div
-                v-if="
+              <SplitZigZag
+                :color="
                   splittingLines &&
-                  splittingLines[index].page === element.number
+                  splittingLines[index].origin &&
+                  splittingLines[index].origin === 'AI' &&
+                  splitSuggestionsEnabled
+                    ? 'green'
+                    : 'dark'
                 "
-                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 v-else class="lines not-active-split">
+              <SplitLines />
             </div>
-          </div>
-          <div class="bottom-section">
-            <span class="page-number">{{ element.number }}</span>
           </div>
         </div>
-      </template>
+        <div class="bottom-section">
+          <span class="page-number">{{ page.number }}</span>
+        </div>
+      </div>
     </draggable>
   </div>
 </template>
@@ -79,6 +75,7 @@ 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 {
@@ -136,9 +133,7 @@ export default {
     },
   },
   mounted() {
-    if (this.pagesForPostprocess.length > 0) {
-      this.editPages = this.pagesForPostprocess;
-    }
+    this.editPages = this.pagesForPostprocess;
   },
   methods: {
     deselect() {

package/src/components/DocumentPage/BoxSelection.vue

@@ -13,6 +13,11 @@
       ref="boxTransformer"
       :config="transformerConfig"
     />
+    <v-rect
+      v-if="selection.placeholderBox"
+      ref="placeholderSelection"
+      :config="placeholderConfig"
+    />
   </v-group>
 </template>
 
@@ -51,7 +56,21 @@ 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,
@@ -68,8 +87,7 @@ export default {
       "elementSelected",
       "spanSelection",
     ]),
-    ...mapState("document", ["editAnnotation"]),
-    ...mapGetters("display", ["clientToBbox", "scaledEntities"]),
+    ...mapGetters("display", ["clientToBbox"]),
     ...mapGetters("selection", ["isSelectionValid", "entitiesOnSelection"]),
   },
   watch: {
@@ -88,19 +106,19 @@ export default {
   },
   methods: {
     handleSelection() {
-      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,
-      });
+      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();
+      }
     },
     updateTransformer() {
       // here we need to manually attach or detach Transformer node
@@ -134,6 +152,21 @@ 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

package/src/components/DocumentPage/DocumentPage.vue

@@ -11,14 +11,26 @@
       page.number === currentPage && 'current-page',
     ]"
   >
-    <AnnotationPopup
-      v-if="!isSelecting && spanSelectionsForPage(page).length > 0"
-      :spans="spanSelectionsForPage(page)"
+    <NewAnnotation
+      v-if="newAnnotation && newAnnotation.length && !editAnnotation"
+      :new-annotation="newAnnotation"
       :container-width="scaledViewport.width"
       :container-height="scaledViewport.height"
       :page="page"
       @close="closePopups"
     />
+    <EditAnnotation
+      v-if="
+        editAnnotation &&
+        editAnnotation.pageNumber &&
+        editAnnotation.pageNumber === currentPage &&
+        selection
+      "
+      :edit-annotation="editAnnotation"
+      :page="page"
+      :container-width="scaledViewport.width"
+      :container-height="scaledViewport.height"
+    />
 
     <div
       v-if="showAnnotationLabel"
@@ -58,12 +70,7 @@
               }"
             ></v-rect>
           </template>
-          <v-group
-            v-if="
-              !categorizeModalIsActive || !publicView || !isDocumentReviewed
-            "
-            ref="entities"
-          >
+          <v-group v-if="!publicView || !isDocumentReviewed" ref="entities">
             <v-rect
               v-for="(entity, index) in scaledEntities(page.entities, page)"
               :key="index"
@@ -79,7 +86,7 @@
                 (bbox) => bbox.page_index + 1 == page.number
               )"
             >
-              <v-group>
+              <v-group :key="'ann' + annotation.id + '-' + index">
                 <v-rect
                   v-if="!isAnnotationInEditMode(annotation.id)"
                   :config="annotationRect(bbox, annotation.id)"
@@ -92,7 +99,7 @@
             <template
               v-if="annotation.metadata && annotation.metadata.checkbox"
             >
-              <v-group>
+              <v-group :key="'ann' + annotation.id + '-checkbox'">
                 <v-rect
                   v-if="!isAnnotationInEditMode(annotation.id)"
                   :config="
@@ -115,22 +122,12 @@
           </template>
         </template>
       </v-layer>
-      <v-layer>
-        <template
-          v-for="(span, index) in spanSelectionsForPage(page)"
-          :key="index"
-        >
-          <span-selection :id="index" :span="span" :page="page" />
-        </template>
-        <template
-          v-for="(span, index) in placeholderSelectionForPage(page)"
-          :key="`${index}_placeholder`"
-        >
-          <placeholder-selection :span="span" :page="page" />
-        </template>
-        <template v-if="page.number === selectionPage">
-          <box-selection :page="page" />
-        </template>
+      <v-layer v-if="page.number === selectionPage">
+        <box-selection
+          :page="page"
+          @createAnnotations="handleCreateAnnotationsFromSelection"
+          @selectEntities="handleEntitiesFromSelection"
+        />
       </v-layer>
     </v-stage>
     <b-skeleton
@@ -146,18 +143,16 @@ import { mapState, mapGetters, mapActions } from "vuex";
 import { PIXEL_RATIO } from "../../constants";
 import api from "../../api";
 import BoxSelection from "./BoxSelection";
-import SpanSelection from "./SpanSelection";
-import PlaceholderSelection from "./PlaceholderSelection";
-import AnnotationPopup from "./AnnotationPopup";
+import NewAnnotation from "./NewAnnotation";
+import EditAnnotation from "./EditAnnotation";
 import AnnSetTableOptions from "./AnnSetTableOptions";
 
 export default {
   name: "DocumentPage",
   components: {
     BoxSelection,
-    SpanSelection,
-    PlaceholderSelection,
-    AnnotationPopup,
+    NewAnnotation,
+    EditAnnotation,
     AnnSetTableOptions,
   },
 
@@ -176,15 +171,12 @@ export default {
   data() {
     return {
       image: null,
+      newAnnotation: [],
     };
   },
 
   computed: {
-    ...mapState("selection", [
-      "selectedEntities",
-      "spanSelection",
-      "isSelecting",
-    ]),
+    ...mapState("selection", ["isSelecting", "selectedEntities"]),
     ...mapState("display", [
       "scale",
       "categorizeModalIsActive",
@@ -195,6 +187,7 @@ export default {
     ...mapState("document", [
       "documentAnnotationSelected",
       "recalculatingAnnotations",
+      "editAnnotation",
       "selectedDocument",
       "publicView",
       "annotationId",
@@ -205,11 +198,7 @@ export default {
       "bboxToRect",
       "scaledEntities",
     ]),
-    ...mapGetters("selection", [
-      "isSelectionValid",
-      "spanSelectionsForPage",
-      "placeholderSelectionForPage",
-    ]),
+    ...mapGetters("selection", ["isSelectionValid", "isElementSelected"]),
     ...mapGetters("document", [
       "getAnnotationsFiltered",
       "isAnnotationInEditMode",
@@ -314,7 +303,12 @@ export default {
     scale() {
       this.closePopups();
     },
-
+    selectedEntities(newValue) {
+      if (!newValue) {
+        this.$store.dispatch("selection/setSpanSelection", null);
+        this.closePopups();
+      }
+    },
     page(newValue, oldValue) {
       if (newValue.image_url !== oldValue.image_url) {
         this.drawPage(true);
@@ -343,6 +337,7 @@ export default {
     isAnnotationFocused(annotationId) {
       return (
         this.documentAnnotationSelected &&
+        !this.isElementSelected &&
         annotationId === this.documentAnnotationSelected.id
       );
     },
@@ -358,8 +353,7 @@ export default {
 
       if (
         event.target.getParent() &&
-        event.target.getParent().className === "Transformer" &&
-        !event.target.name().includes("anchor")
+        event.target.getParent().className === "Transformer"
       ) {
         // if we are editing a box then close popups
         this.closePopups();
@@ -375,10 +369,7 @@ export default {
         event.target.name() === "multiAnnBoxTransformer" ||
         event.target.name() === "multiAnnButton" ||
         event.target.name() === "boxSelection" ||
-        event.target.name() === "boxTransformer" ||
-        event.target.name().includes("spanSelection") ||
-        event.target.name().includes("spanTransformer") ||
-        event.target.name().includes("anchor")
+        event.target.name() === "boxTransformer"
       ) {
         return;
       }
@@ -427,8 +418,104 @@ export default {
       this.closePopups();
     },
 
+    handleCreateAnnotationsFromSelection(entities) {
+      if (
+        this.categorizeModalIsActive ||
+        this.publicView ||
+        this.isDocumentReviewed
+      )
+        return;
+      this.newAnnotation = [];
+
+      const normalizedEntities = this.scaledEntities(entities, this.page);
+      if (normalizedEntities) {
+        this.newAnnotation.push(...normalizedEntities);
+      }
+
+      if (this.newAnnotation.length > 0) {
+        this.$store.dispatch(
+          "selection/setSelectedEntities",
+          this.newAnnotation
+        );
+        this.$store.dispatch(
+          "selection/getTextFromEntities",
+          this.newAnnotation
+        );
+      } else {
+        this.$store.dispatch("selection/setSelectedEntities", null);
+      }
+    },
+
+    handleEntitiesFromSelection(entities) {
+      if (
+        this.categorizeModalIsActive ||
+        this.publicView ||
+        this.isDocumentReviewed
+      )
+        return;
+
+      const normalizedEntities = this.scaledEntities(entities, this.page);
+      if (normalizedEntities.length > 0) {
+        this.$store.dispatch(
+          "selection/setSelectedEntities",
+          normalizedEntities
+        );
+        this.$store.dispatch(
+          "selection/getTextFromEntities",
+          normalizedEntities
+        );
+      } else {
+        this.$store.dispatch("selection/setSelectedEntities", null);
+      }
+    },
+
     handleClickedEntity(entity) {
-      this.$store.dispatch("selection/entityClick", entity);
+      if (
+        !entity ||
+        this.categorizeModalIsActive ||
+        this.publicView ||
+        this.isDocumentReviewed
+      )
+        return;
+
+      // Check if we are creating a new Annotation
+      // or if we are removing a previously selected entity
+      // or editing empty one
+      const entityToAdd = entity;
+
+      const found = this.newAnnotation.find(
+        (ann) =>
+          ann.scaled.width === entityToAdd.scaled.width &&
+          ann.original.offset_string === entityToAdd.original.offset_string
+      );
+
+      // reset the selection so that we don't have a drawn rectangle when editing based on entities
+      this.endSelection();
+
+      if (found) {
+        this.newAnnotation = [
+          ...this.newAnnotation.filter(
+            (ann) =>
+              ann.scaled.width !== entityToAdd.scaled.width &&
+              ann.original.offset_string !== entityToAdd.original.offset_string
+          ),
+        ];
+      } else {
+        this.newAnnotation.push(entityToAdd);
+      }
+
+      if (this.newAnnotation.length > 0) {
+        this.$store.dispatch(
+          "selection/setSelectedEntities",
+          this.newAnnotation
+        );
+        this.$store.dispatch(
+          "selection/getTextFromEntities",
+          this.newAnnotation
+        );
+      } else {
+        this.$store.dispatch("selection/setSelectedEntities", null);
+      }
     },
 
     onElementEnter(annotation = null, span = null) {
@@ -506,11 +593,24 @@ export default {
      * Builds the konva config object for the entity.
      */
     entityRect(entity) {
+      let entityIsSelected = false;
+      if (this.selectedEntities && this.selectedEntities.length > 0) {
+        entityIsSelected = this.selectedEntities.find((selectedEntity) => {
+          return (
+            selectedEntity.original &&
+            selectedEntity.original.offset_string ===
+              entity.original.offset_string &&
+            selectedEntity.original.x0 === entity.original.x0 &&
+            selectedEntity.original.y0 === entity.original.y0
+          );
+        });
+      }
+
       return {
         stroke: "#ccc",
         strokeWidth: 1,
         dash: [5, 2],
-        fill: "transparent",
+        fill: entityIsSelected ? "#67E9B7" : "transparent",
         globalCompositeOperation: "multiply",
         transformsEnabled: "position",
         hitStrokeWidth: 0,
@@ -576,10 +676,7 @@ export default {
       }
     },
     closePopups() {
-      this.$store.dispatch("selection/entitySelection", {
-        entities: [],
-        selection: null,
-      });
+      this.newAnnotation = [];
     },
   },
 };

package/src/components/DocumentPage/DocumentToolbar.vue

@@ -105,6 +105,7 @@ export default {
   data() {
     return {
       currentPercentage: 100,
+      fitWidthScale: 1, // baseline for 100%
       maxPercentage: 500,
       defaultPercentage: 0.25,
       fitPercentage: 0.5,
@@ -136,6 +137,13 @@ export default {
         this.editModeDisabled = true;
       }
     },
+    scale(newScale) {
+      if (this.fitWidthScale > 0) {
+        this.currentPercentage = Math.round((newScale / this.fitWidthScale) * 100);
+      } else {
+        this.currentPercentage = Math.round(newScale * 100);
+      }
+    },
   },
   mounted() {
     if (this.selectedDocument) {
@@ -178,12 +186,13 @@ export default {
       this.updateScale(this.scale - this.defaultPercentage);
     },
     fitAuto() {
-      // exit edit mode of Annotation if changing zoom during editing
       this.cancelAnnotationEditMode();
-
-      // Always set to 50%
-      this.currentPercentage = 50;
-      this.$store.dispatch("display/updateFit", "all");
+      this.$store.dispatch("display/updateFit", "all").then(() => {
+        this.$nextTick(() => {
+          this.fitWidthScale = this.scale;
+          this.currentPercentage = 100;
+        });
+      });
     },
     updateScale(scale) {
       this.$store.dispatch("display/updateFit", "custom").then(() => {
@@ -225,6 +234,7 @@ export default {
     cancelAnnotationEditMode() {
       this.$store.dispatch("document/resetEditAnnotation");
       this.$store.dispatch("selection/disableSelection");
+      this.$store.dispatch("selection/setSelectedEntities", null);
     },
   },
 };