@konfuzio/document-validation-ui 0.1.32 → 0.1.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@konfuzio/document-validation-ui",
-  "version": "0.1.32",
+  "version": "0.1.34",
   "repository": "git://github.com:konfuzio-ai/document-validation-ui.git",
   "main": "dist/app.js",
   "scripts": {

package/src/assets/scss/document_annotations.scss

@@ -517,15 +517,14 @@
     }
 
     .accept-decline-container {
-      padding-right: 14px;
       display: flex;
       flex-direction: row;
+      gap: 6px;
       justify-content: center;
       button {
-        padding: 6px;
+        padding: 0px;
 
         .decline-icon {
-          padding: 6px;
           color: $red;
           vertical-align: middle;
         }

package/src/assets/scss/document_name.scss

@@ -6,6 +6,7 @@
   justify-content: center;
   gap: 12px;
   line-height: 20px;
+  width: 400px;
 
   .document-icon {
     display: flex;
@@ -17,6 +18,9 @@
   .document-name {
     display: inline-block;
     vertical-align: middle;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 
     &.is-editable {
       display: inline-block;
@@ -25,7 +29,6 @@
       border-radius: 8px;
       padding: 6px 14px 6px 14px;
       outline: 1px solid $grey-outline;
-      max-width: 420px;
     }
   }
 

package/src/assets/scss/document_top_bar.scss

@@ -35,7 +35,6 @@
     .center-bar-components {
       display: flex;
       align-items: center;
-      gap: 38px;
 
       &.single-component {
         flex: 1;

package/src/components/DocumentAnnotations/AnnotationActionButtons.vue

@@ -52,7 +52,7 @@
         type="is-ghost"
         @click.stop="decline"
       >
-        <b-icon icon="xmark" size="is-24" class="decline-icon" />
+        <b-icon icon="xmark" size="is-20" class="decline-icon" />
       </b-button>
       <b-button
         v-if="acceptBtn"
@@ -106,7 +106,6 @@
 import { mapGetters, mapState } from "vuex";
 import AcceptedCheckMark from "../../assets/images/AcceptedCheckMark";
 import { TEXT_BREAKPOINT_WIDTH } from "../../constants";
-import { setURLAnnotationHash } from "../../utils/utils";
 export default {
   name: "AnnotationActionButtons",
   components: {
@@ -150,7 +149,9 @@ export default {
   },
   data() {
     return {
-      showText: window.innerWidth > TEXT_BREAKPOINT_WIDTH,
+      showText:
+        window.innerWidth >
+        TEXT_BREAKPOINT_WIDTH(this.$i18n ? this.$i18n.locale : "en"),
     };
   },
   computed: {
@@ -186,7 +187,8 @@ export default {
       }
     },
     resize() {
-      this.showText = window.innerWidth > TEXT_BREAKPOINT_WIDTH;
+      this.showText =
+        window.innerWidth > TEXT_BREAKPOINT_WIDTH(this.$i18n.locale);
     },
     save() {
       this.$emit("save");

package/src/components/DocumentPage/BoxSelection.vue

@@ -52,18 +52,45 @@ export default {
         anchorSize: 6,
       };
     },
-    ...mapState("selection", ["selection", "isSelecting"]),
+    ...mapState("selection", [
+      "selection",
+      "isSelecting",
+      "elementSelected",
+      "spanSelection",
+    ]),
     ...mapGetters("display", ["clientToBbox"]),
-    ...mapGetters("selection", ["isSelectionValid"]),
+    ...mapGetters("selection", ["isSelectionValid", "entitiesOnSelection"]),
+  },
+  watch: {
+    isSelecting(isSelecting) {
+      if (!isSelecting) {
+        this.updateTransformer();
+        this.handleSelection();
+      }
+    },
   },
   mounted() {
-    this.updateTransformer();
-
-    if (this.selection.custom) {
-      this.getBoxSelectionContent();
+    if (!this.selection.custom) {
+      // if annotation was selected, then add transformer
+      this.updateTransformer();
     }
   },
   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();
+      }
+    },
     updateTransformer() {
       // here we need to manually attach or detach Transformer node
       const transformer = this.$refs.boxTransformer;
@@ -97,15 +124,17 @@ export default {
     },
 
     getBoxSelectionContent() {
-      const box = this.clientToBbox(
-        this.page,
-        this.selection.start,
-        this.selection.end
-      );
-      this.$store.dispatch("selection/getTextFromBboxes", {
-        box,
-        entities: false,
-      });
+      if (!this.isSelecting) {
+        const box = this.clientToBbox(
+          this.page,
+          this.selection.start,
+          this.selection.end
+        );
+        this.$store.dispatch("selection/getTextFromBboxes", {
+          box,
+          entities: false,
+        });
+      }
     },
 
     /**
@@ -144,7 +173,7 @@ export default {
       node.scaleX(1);
       node.scaleY(1);
 
-      this.getBoxSelectionContent();
+      this.handleSelection();
     },
     ...mapActions("selection", ["moveSelection"]),
   },

package/src/components/DocumentPage/DocumentPage.vue

@@ -62,7 +62,7 @@
           </template>
           <v-group v-if="!publicView || !isDocumentReviewed" ref="entities">
             <v-rect
-              v-for="(entity, index) in scaledEntities"
+              v-for="(entity, index) in scaledEntities(page.entities, page)"
               :key="index"
               :config="entityRect(entity)"
               @click="handleClickedEntity(entity)"
@@ -148,10 +148,13 @@
           />
         </v-label>
       </v-layer>
-      <v-layer v-if="isBoxSelection">
-        <box-selection :page="page" />
+      <v-layer v-if="page.number === selectionPage">
+        <box-selection
+          :page="page"
+          @createAnnotations="handleCreateAnnotationsFromSelection"
+        />
       </v-layer>
-      <v-layer v-else-if="isMultiSelection">
+      <v-layer v-if="isMultiSelection">
         <multi-ann-selection
           :page="page"
           @buttonEnter="onElementEnter"
@@ -224,19 +227,31 @@ export default {
       "annotationId",
     ]),
     ...mapState("edit", ["editMode"]),
-    ...mapGetters("display", ["visiblePageRange", "bboxToRect"]),
+    ...mapGetters("display", [
+      "visiblePageRange",
+      "bboxToRect",
+      "scaledEntities",
+    ]),
     ...mapGetters("selection", ["isSelectionValid", "isElementSelected"]),
     ...mapGetters("document", [
       "getAnnotationsFiltered",
       "isAnnotationInEditMode",
       "isDocumentReadyToBeReviewed",
-      "entitiesOnSelection",
       "isDocumentReviewed",
       "labelOfAnnotation",
       "isNegative",
     ]),
-
+    selectionPage() {
+      return this.selection && this.selection.pageNumber;
+    },
     isBoxSelection() {
+      if (!MULTI_ANN_TABLE_FEATURE) {
+        return (
+          true &&
+          this.selection &&
+          this.selection.pageNumber === this.currentPage
+        );
+      }
       return this.selection && !this.isSelecting && this.isElementSelected;
     },
     isMultiSelection() {
@@ -274,31 +289,6 @@ export default {
       return this.visiblePageRange.includes(this.page.number);
     },
 
-    /**
-     * We take the entities from the backend and resize them according
-     * to the `scale` (zoom), the `imageScale` (proportion between the original
-     * document and the served image) and `PIXEL_RATIO` (in case of retina displays).
-     * We also change the original bbox format to something that can be used with CSS.
-     * The original is stored inside the `original` property, since it can be reused
-     * when we're sending the entity to the backend for selection or saving.
-     */
-    scaledEntities() {
-      // entities are either not loaded yet or empty
-      if (!this.page.hasOwnProperty("entities") || !this.page.entities) {
-        return [];
-      }
-
-      return this.page.entities.map((entity) => {
-        const box = this.bboxToRect(this.page, entity);
-        return {
-          original: entity,
-          scaled: {
-            ...box,
-          },
-        };
-      });
-    },
-
     /**
      * A filtered version of `annotations` for the chosen page.
      * Include annotations that have *at least* one bbox in the page.
@@ -348,12 +338,12 @@ export default {
       }
     },
     scale() {
-      this.closePopups(true);
+      this.closePopups();
     },
     async selectedEntities(newValue) {
       if (!newValue) {
         this.$store.dispatch("selection/setSpanSelection", null);
-        this.closePopups(true);
+        this.closePopups();
       }
 
       await this.$store.dispatch("selection/getTextFromEntities", newValue);
@@ -365,7 +355,7 @@ export default {
     },
     searchEnabled(isEnabled) {
       if (isEnabled) {
-        this.closePopups(true);
+        this.closePopups();
       }
     },
   },
@@ -400,7 +390,15 @@ export default {
       )
         return;
 
-      this.closePopups();
+      if (
+        event.target.getParent() &&
+        event.target.getParent().className === "Transformer"
+      ) {
+        // if we are editing a box then close popups
+        this.closePopups();
+
+        return;
+      }
 
       // check if element and delegate to it
       if (
@@ -410,9 +408,7 @@ export default {
         event.target.name() === "multiAnnBoxTransformer" ||
         event.target.name() === "multiAnnButton" ||
         event.target.name() === "boxSelection" ||
-        event.target.name() === "boxTransformer" ||
-        (event.target.getParent() &&
-          event.target.getParent().className === "Transformer")
+        event.target.name() === "boxTransformer"
       ) {
         return;
       }
@@ -458,7 +454,32 @@ export default {
 
     handleFocusedAnnotation(annotation) {
       this.$store.dispatch("document/setAnnotationId", annotation.id);
-      this.closePopups(true);
+      this.closePopups();
+    },
+
+    handleCreateAnnotationsFromSelection(entities) {
+      if (
+        this.categorizeModalIsActive ||
+        this.publicView ||
+        this.isDocumentReviewed
+      )
+        return;
+      this.newAnnotation = [];
+      // this.endSelection();
+
+      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
+        );
+      } else {
+        this.$store.dispatch("selection/setSelectedEntities", null);
+      }
     },
 
     handleClickedEntity(entity) {
@@ -650,10 +671,8 @@ export default {
         y: rect.y,
       };
     },
-    closePopups(closeNewAnnotaton) {
-      if (closeNewAnnotaton) {
-        this.newAnnotation = [];
-      }
+    closePopups() {
+      this.newAnnotation = [];
     },
   },
 };

package/src/components/DocumentPage/NewAnnotation.vue

@@ -167,30 +167,47 @@ export default {
       "labelsFilteredForAnnotationCreation",
       "isNegative",
     ]),
-    ...mapState("selection", ["spanSelection"]),
+    ...mapState("selection", ["spanSelection", "selection"]),
     top() {
-      const top = this.newAnnotation[0].scaled.y - heightOfPopup; // subtract the height of the popup plus some margin
+      if (this.selection && this.selection.end) {
+        const top = this.selection.end.y + margin;
+        //check if the popup will not go off the container on the top
+        return top + heightOfPopup < this.containerHeight
+          ? top
+          : this.selection.end.y - heightOfPopup;
+      } else {
+        const top = this.newAnnotation[0].scaled.y - 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
-        ? top
-        : this.newAnnotation[0].scaled.y +
-            this.newAnnotation[0].scaled.height +
-            margin;
+        //check if the popup will not go off the container on the top
+        return this.newAnnotation[0].scaled.y > heightOfPopup
+          ? top
+          : this.newAnnotation[0].scaled.y +
+              this.newAnnotation[0].scaled.height +
+              margin;
+      }
     },
     left() {
-      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
-
-      //check if the popup will not go off the container
-      if (left + widthOfPopup > this.containerWidth) {
-        // on the right side
-        return this.containerWidth - widthOfPopup;
+      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
+          ? left
+          : this.containerWidth - widthOfPopup;
+        return this.selection.start.x;
       } else {
-        // on the left side
-        return left > 0 ? left : 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
+
+        //check if the popup will not go off the container
+        if (left + widthOfPopup > this.containerWidth) {
+          // on the right side
+          return this.containerWidth - widthOfPopup;
+        } else {
+          // on the left side
+          return left > 0 ? left : 0;
+        }
       }
     },
     textFromEntities() {
@@ -227,6 +244,7 @@ export default {
   methods: {
     close() {
       this.$store.dispatch("selection/setSelectedEntities", null);
+      this.$store.dispatch("selection/endSelection");
       this.$emit("close");
     },
     save() {

package/src/components/DocumentTopBar/DocumentName.vue

@@ -10,17 +10,26 @@
         <b-skeleton width="15px" height="22px" :rounded="false" />
       </ServerImage>
     </div>
-    <span class="file-name-section">
-      <span
-        :class="['document-name', isEditable && 'is-editable']"
-        :contenteditable="isEditable"
-        @input="handleInput"
-        @paste="handlePaste"
-        @keydown.enter="handleSave"
-        @blur="handleSave"
-        >{{ textContent }}</span
-      >
-    </span>
+    <b-tooltip
+      :label="fullText"
+      multilined
+      :active="isFileNameBiggerThanMaxSize && !isEditable"
+      size="is-large"
+      position="is-bottom"
+    >
+      <span class="file-name-section">
+        <span
+          :class="['document-name', isEditable && 'is-editable']"
+          :contenteditable="isEditable"
+          @input="handleInput"
+          @paste="handlePaste"
+          @keydown.enter="handleSave"
+          @blur="handleSave"
+          >{{ textContent }}</span
+        >
+      </span>
+    </b-tooltip>
+
     <div
       v-if="
         !publicView &&
@@ -84,6 +93,7 @@ export default {
   },
   data() {
     return {
+      maxFilenameChars: 26,
       isEditable: false,
       showEditBtn: true,
       showSaveBtn: false,
@@ -117,6 +127,20 @@ export default {
         return this.shortFilenameIfNeeded(this.dataFileName);
       }
     },
+    fullText() {
+      if (this.fileName) {
+        return this.fileName;
+      } else {
+        return this.dataFileName;
+      }
+    },
+    isFileNameBiggerThanMaxSize() {
+      if (this.fileName) {
+        return this.fileName.length >= this.maxFilenameChars;
+      } else {
+        return this.dataFileName.length >= this.maxFilenameChars;
+      }
+    },
   },
   updated() {
     const contentEditable = document.querySelector(".document-name");
@@ -137,15 +161,14 @@ export default {
   },
   methods: {
     shortFilenameIfNeeded(filename) {
-      if (
-        filename &&
-        (filename.length >= 70 ||
-          (filename.length >= 25 && !this.optimalResolution))
-      ) {
+      if (filename && filename.length >= this.maxFilenameChars) {
         return (
-          filename.substr(0, 20) +
+          filename.substr(0, this.maxFilenameChars / 2) +
           "..." +
-          filename.substr(filename.length - 10, filename.length)
+          filename.substr(
+            filename.length - this.maxFilenameChars / 2,
+            filename.length
+          )
         );
       }
       return filename;