@konfuzio/document-validation-ui 0.2.0-dev.1 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@konfuzio/document-validation-ui",
-  "version": "0.2.0-dev.1",
+  "version": "0.2.0",
   "repository": "https://github.com/konfuzio-ai/document-validation-ui",
   "main": "dist/app.js",
   "scripts": {
@@ -35,7 +35,7 @@
     "sass-loader": "^16.0.5",
     "splitpanes": "^3.1.8",
     "vue": "^3.5.13",
-    "vue-i18n": "^10.0.5",
+    "vue-i18n": "^10.0.6",
     "vue-konva": "^3.2.0",
     "vue3-observe-visibility": "^1.0.3",
     "vuedraggable": "^4.1.0",

package/src/api.js

@@ -75,6 +75,18 @@ const makeFileRequest = (fileUrl) => {
         resolve(myBlob);
       })
       .catch((error) => {
+        if (error.response.status === 428) {
+          // retry request after 2 seconds
+          setTimeout(() => {
+            makeFileRequest(fileUrl)
+              .then((response) => {
+                resolve(response);
+              })
+              .catch((error) => {
+                reject(error);
+              });
+          }, 2000);
+        }
         reject(error);
       });
   });

package/src/assets/scss/annotation_action_buttons.scss

@@ -4,6 +4,23 @@
   align-items: center;
   gap: 6px;
 
+  .ann-nav-btns {
+    display: flex;
+    flex-direction: column;
+    color: variables.$grey-blue;
+    font-size: 14px;
+    text-align: center;
+    padding-right: 8px;
+
+    .button-icon {
+      width: 12px !important;
+      height: 12px !important;
+      &.is-link {
+        cursor: pointer !important;
+      }
+    }
+  }
+
   .button-action {
     padding: 0px;
     vertical-align: middle;
@@ -44,6 +61,10 @@
         width: 16px;
         height: 16px;
       }
+      &.angle-icon {
+        width: 12px;
+        height: 12px;
+      }
     }
 
     .button-text {
@@ -66,6 +87,7 @@
   .search-icon,
   .missing-icon,
   .link-icon,
+  .angle-icon,
   .spinner-icon {
     color: variables.$grey-blue;
   }

package/src/assets/scss/document_annotations.scss

@@ -3,11 +3,9 @@
 #document-annotations {
   font-family: variables.$font-family;
   background-color: variables.$background;
-  overflow-y: auto;
   position: relative;
   display: flex;
   flex-direction: column;
-  height: 100%;
 
   &.disabled {
     pointer-events: none;
@@ -217,7 +215,7 @@
                 bottom: 0px;
                 left: 4px;
                 right: 16px;
-                padding: 0 20%;
+                margin: 0 20%;
                 display: flex;
                 align-items: center;
                 border-radius: 8px;
@@ -379,17 +377,17 @@
                     outline: none;
                   }
 
-                  .label-empty {
-                    font-weight: 500;
-                    font-size: 14px;
-                    color: variables.$primary;
-                  }
-
                   .label-empty-clicked {
                     user-select: auto;
                     font-weight: 400;
                     color: variables.$text-lighter;
                   }
+
+                  .label-empty {
+                    font-weight: 500;
+                    font-size: 14px;
+                    color: variables.$primary;
+                  }
                 }
               }
 

package/src/assets/scss/document_dashboard.scss

@@ -23,6 +23,11 @@
       background-size: 9px 9px;
     }
 
+    .document-sidebar {
+      overflow-y: auto;
+      background-color: variables.$background;
+    }
+
     @media print {
       .dashboard-document {
         position: static;

package/src/components/DocumentAnnotations/AnnotationActionButtons.vue

@@ -1,5 +1,22 @@
 <template>
   <div class="action-buttons">
+    <!-- label multi false nav buttons -->
+    <b-tooltip
+      v-if="isLabelMultiFalseAndGroupOfAnns(label) && !showSave"
+      :delay="tooltipDelay"
+      position="is-left"
+      :label="$t('nav_label_anns')"
+    >
+      <div class="ann-nav-btns">
+        <span>{{ label.annotations.length }}</span>
+        <b-icon
+          icon="angle-down"
+          class="angle-icon center-icon button-icon is-link"
+          @click.stop="nextAnn"
+        />
+      </div>
+    </b-tooltip>
+
     <!-- link button -->
     <b-button
       v-if="showLink"
@@ -211,7 +228,10 @@ export default {
   },
   computed: {
     ...mapState("document", ["publicView"]),
-    ...mapGetters("document", ["isDocumentReviewed"]),
+    ...mapGetters("document", [
+      "isDocumentReviewed",
+      "isLabelMultiFalseAndGroupOfAnns",
+    ]),
     showHoverButton() {
       return (
         !this.isLoading &&
@@ -257,6 +277,12 @@ export default {
     link() {
       this.$emit("link");
     },
+    nextAnn() {
+      this.$store.dispatch(
+        "document/putNextAnnotationInLabelFirst",
+        this.label
+      );
+    },
   },
 };
 </script>

package/src/components/DocumentAnnotations/AnnotationRow.vue

@@ -171,6 +171,7 @@
       >
         <AnnotationActionButtons
           :annotation="annotation"
+          :label="label"
           :show-cancel="showCancelButton()"
           :show-accept="showAcceptButton()"
           :show-decline="showDeclineButton()"
@@ -257,7 +258,6 @@ export default {
       "editAnnotation",
       "annotationId",
       "hoveredAnnotationSet",
-      "enableGroupingFeature",
       "publicView",
       "newAcceptedAnnotations",
       "annotationsMarkedAsMissing",
@@ -691,12 +691,13 @@ export default {
 
       // check if annotation set was changed
       if (
-        (this.editAnnotation.annotationSet &&
+        !isToDecline &&
+        ((this.editAnnotation.annotationSet &&
           (this.editAnnotation.annotationSet.id !== this.annotationSet.id ||
             (this.editAnnotation.annotationSet.id == null &&
               this.labelSet.id !== this.editAnnotation.labelSet.id))) ||
-        (this.editAnnotation.label &&
-          this.editAnnotation.label.id !== this.label.id)
+          (this.editAnnotation.label &&
+            this.editAnnotation.label.id !== this.label.id))
       ) {
         // first delete annotation, then create new one
         this.$store

package/src/components/DocumentAnnotations/DocumentLabel.vue

@@ -1,43 +1,8 @@
 <template>
   <div class="label">
-    <div
-      v-if="isGroup"
-      :class="['label-group', !showAnnotationsGroup && 'keyboard-nav']"
-      @click.stop="toggleGroup"
-    >
-      <div class="label-group-left">
-        <b-icon
-          :icon="showAnnotationsGroup ? 'angle-up' : 'angle-down'"
-          size="is-16"
-          class="caret"
-        />
-        <div class="label-name">
-          <span>{{ `${label.name} (${label.annotations.length})` }}</span>
-        </div>
-      </div>
-      <div class="label-group-right">
-        <div v-if="!publicView" class="label-annotations-pending">
-          {{
-            `${label.annotations.length - acceptedAnnotationsGroupCounter} ${$t(
-              "annotations_pending"
-            )}`
-          }}
-        </div>
-        <div v-if="!publicView" class="label-annotations-accepted">
-          {{
-            `${acceptedAnnotationsGroupCounter} ${$t("annotations_accepted")}`
-          }}
-        </div>
-      </div>
-    </div>
-    <div
-      v-if="showAnnotationsGroup && annotationSet"
-      :class="isGroup && 'label-group-annotation-list'"
-    >
+    <div v-if="annotationSet">
       <AnnotationRow
-        v-for="(annotation, index) in hasAnnotations
-          ? label.annotations
-          : [singleAnnotation]"
+        v-for="(annotation, index) in annotationsToShow()"
         :key="index"
         :annotation="annotation"
         :label="label"
@@ -45,7 +10,7 @@
         :label-set="annotationSet.label_set"
       />
     </div>
-    <div v-else-if="showAnnotationsGroup && labelSet">
+    <div v-else-if="labelSet">
       <AnnotationRow :label="label" :label-set="labelSet" />
     </div>
   </div>
@@ -74,94 +39,19 @@ export default {
       required: true,
     },
   },
-  data() {
-    return {
-      nonMultipleAnnotationsExtracted: false,
-      acceptedAnnotationsGroupCounter: 0,
-      showAnnotationsGroup: false,
-    };
-  },
   computed: {
-    ...mapState("document", [
-      "annotationId",
-      "enableGroupingFeature",
-      "hoveredAnnotationSet",
-      "publicView",
+    ...mapState("document", ["annotationId", "publicView"]),
+    ...mapGetters("document", [
+      "numberOfAcceptedAnnotationsInLabel",
+      "isLabelMultiFalseAndGroupOfAnns",
     ]),
-    ...mapGetters("document", ["numberOfAcceptedAnnotationsInLabel"]),
-    singleAnnotation() {
-      if (this.label.annotations && this.label.annotations.length > 0) {
-        return this.label.annotations[0];
-      }
-      return null;
-    },
-    hasAnnotations() {
-      return this.label.annotations && this.label.annotations.length > 0;
-    },
-    isGroup() {
-      return this.enableGroupingFeature && this.nonMultipleAnnotationsExtracted;
-    },
-  },
-  watch: {
-    annotationId(newAnnotationId) {
-      this.checkAnnotationSelected(newAnnotationId);
-    },
-    hoveredAnnotationSet(newValue) {
-      // Check if there are some unrevised Annotations within the group
-      if (
-        newValue &&
-        newValue.type === "accept" &&
-        this.labelHasPendingAnnotations(newValue)
-      ) {
-        this.showAnnotationsGroup = true;
-      }
-    },
-  },
-  mounted() {
-    this.updateValues();
-    this.checkAnnotationSelected(this.annotationId);
-
-    if (this.publicView) {
-      this.showAnnotationsGroup = true;
-    }
-  },
-  updated() {
-    this.updateValues();
   },
   methods: {
-    checkAnnotationSelected(newAnnotationId) {
-      // check if annotation is inside a label group and open it
-      if (
-        this.enableGroupingFeature &&
-        !this.showAnnotationsGroup &&
-        newAnnotationId
-      ) {
-        const annotation = this.label.annotations.find(
-          (ann) => ann.id == newAnnotationId
-        );
-
-        if (annotation) {
-          this.showAnnotationsGroup = true;
-        }
-      }
-    },
-    toggleGroup() {
-      this.showAnnotationsGroup = !this.showAnnotationsGroup;
-    },
-    updateValues() {
-      // more than 1 Annotation extracted for a non multiple Label
-      this.nonMultipleAnnotationsExtracted =
-        this.label.annotations &&
-        this.label.annotations.length > 1 &&
-        !this.label.has_multiple_top_candidates;
-
-      if (this.nonMultipleAnnotationsExtracted) {
-        this.acceptedAnnotationsGroupCounter =
-          this.numberOfAcceptedAnnotationsInLabel(this.label);
-      }
-      if (!this.isGroup) {
-        // if not a group then show by default
-        this.showAnnotationsGroup = true;
+    annotationsToShow() {
+      if (this.isLabelMultiFalseAndGroupOfAnns(this.label)) {
+        return [this.label.annotations[0]];
+      } else {
+        return this.label.annotations;
       }
     },
     labelHasPendingAnnotations(hoveredSet) {

package/src/components/DocumentDashboard.vue

@@ -10,7 +10,7 @@
             class="dashboard-document"
           />
         </pane>
-        <pane :size="50">
+        <pane :size="50" class="document-sidebar">
           <DocumentAnnotations v-if="!editMode" ref="annotations" />
           <DocumentEdit v-else ref="editView" />
         </pane>

package/src/components/DocumentEdit/EditSidebar.vue

@@ -59,11 +59,6 @@
           />
           <div class="switch-info">
             <span class="switch-text">{{ $t("smart_split") }}</span>
-            <span
-              v-if="documentHasProposedSplit(selectedDocument)"
-              class="new-badge"
-              >{{ newText }}</span
-            >
           </div>
         </b-field>
       </b-tooltip>
@@ -93,7 +88,6 @@ export default {
     return {
       buttonDisabled: true,
       tooltipInfo: null,
-      newText: this.$t("new"),
       switchStatus: true,
     };
   },
@@ -129,9 +123,6 @@ export default {
     this.$nextTick(() => {
       this.switchStatus = this.splitSuggestionsEnabled;
       this.tooltipInfo = this.$t("no_splitting_suggestions");
-      if (this.newText) {
-        this.newText = this.$t("new").toUpperCase();
-      }
     });
   },
   methods: {

package/src/components/DocumentPage/AnnotationPopup.vue

@@ -17,6 +17,7 @@
         v-model="textFromEntities"
         class="popup-input"
         type="text"
+        :disabled="true"
       />
     </div>
     <b-dropdown

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(() => {

package/src/components/DocumentPage/ScrollingPage.vue

@@ -1,7 +1,7 @@
 <template>
-  <div>
+  <div v-observe-visibility="visibilityChanged">
     <DummyPage
-      v-if="!loadedPage || !pageInVisibleRange(page)"
+      v-if="!loadedPage"
       :width="page.size[0]"
       :height="page.size[1]"
     />
@@ -179,6 +179,14 @@ export default {
           this.pageBeingLoaded = false;
         });
     },
+    visibilityChanged(isVisible) {
+      if (isVisible && !this.loadedPage && !this.pageBeingLoaded) {
+        this.loadPage();
+      }
+      if (!isVisible && this.loadedPage) {
+        this.$store.dispatch("document/unloadDocumentPage", this.page.number);
+      }
+    },
     pageInVisibleRange(page) {
       return (
         this.currentPage === page.number ||

package/src/locales/de.json

@@ -166,5 +166,6 @@
   "checkbox_ann_details": "Für dieses Label wird ein Kästchen extrahiert.",
   "document_section": "Dokumentabschnitt",
   "label_size": "Spaltengröße:",
-  "powered_by": "betrieben von Konfuzio"
+  "powered_by": "betrieben von Konfuzio",
+  "nav_label_anns": "Durch Annotationen navigieren"
 }

package/src/locales/en.json

@@ -167,5 +167,6 @@
   "checkbox_ann_details": "A checkbox will be extracted for this label.",
   "document_section": "Document Section",
   "label_size": "Column size:",
-  "powered_by": "powered by Konfuzio"
+  "powered_by": "powered by Konfuzio",
+  "nav_label_anns": "Navigate through annotations"
 }

package/src/locales/es.json

@@ -166,5 +166,6 @@
   "checkbox_ann_details": "Se extraerá una casilla de verificación para esta etiqueta.",
   "document_section": "Sección del documento",
   "label_size": "Tamaño de columna:",
-  "powered_by": "impulsado por Konfuzio"
+  "powered_by": "impulsado por Konfuzio",
+  "nav_label_anns": "Navegar por las anotaciones"
 }

package/src/store/display.js

@@ -270,11 +270,8 @@ const actions = {
         commit("SET_SCALE", autoScale);
         break;
       case "all": {
-        commit(
-          "SET_SCALE",
-          getters.pageWidthScale(elementsWidth, client.width, viewport.width) -
-            0.5
-        );
+        const widthScale = getters.pageWidthScale(elementsWidth, client.width, viewport.width);
+        commit("SET_SCALE", widthScale);
         break;
       }
       case "custom": {