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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@konfuzio/document-validation-ui",
-  "version": "0.2.0-dev.1",
+  "version": "0.2.0-dev.2",
   "repository": "https://github.com/konfuzio-ai/document-validation-ui",
   "main": "dist/app.js",
   "scripts": {

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/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/document.js

@@ -153,6 +153,31 @@ const getters = {
     return annotations.length > 0;
   },
 
+  /* Checks if the label has annotations to show */
+  isLabelMultiFalseAndGroupOfAnns: (state) => (label) => {
+    return (
+      label &&
+      label.annotations &&
+      label.annotations.length > 1 &&
+      !label.has_multiple_top_candidates &&
+      state.enableGroupingFeature
+    );
+  },
+
+  /* Returns the annotations ordered by highest confidence */
+  annotationsByConfidence: (state) => (annotations) => {
+    annotations.sort((a, b) => {
+      if (a.confidence < b.confidence) {
+        return -1;
+      } else if (a.confidence > b.confidence) {
+        return 1;
+      }
+      return 0;
+    });
+
+    return annotations;
+  },
+
   /* Checks if the document has an annotation set */
   annotationSetExists: (state) => (annotationSetId) => {
     return state.annotationSets.find((annSet) => annSet.id === annotationSetId);
@@ -256,11 +281,16 @@ const getters = {
   /* Get label for a given annotation */
   labelOfAnnotation: (state) => (annotationToFind) => {
     let foundLabel = null;
-    state.annotationSets.forEach((annotationSet) => {
-      annotationSet.labels.forEach((label) => {
-        label.annotations.forEach((annotation) => {
-          if (annotation.id === annotationToFind.id) {
-            foundLabel = label;
+    if (state.annotationSets) {
+      state.annotationSets.forEach((annotationSet) => {
+        annotationSet.labels.forEach((label) => {
+          label.annotations.forEach((annotation) => {
+            if (annotation.id === annotationToFind.id) {
+              foundLabel = label;
+              return;
+            }
+          });
+          if (foundLabel) {
             return;
           }
         });
@@ -268,14 +298,12 @@ const getters = {
           return;
         }
       });
-      if (foundLabel) {
-        return;
-      }
-    });
+    }
+
     return foundLabel;
   },
 
-  getAnnotationsFiltered: (state) => {
+  getAnnotationsFiltered: (state, getters) => {
     // group annotations for sidebar
     let annotations = [];
     let labels = [];
@@ -331,6 +359,18 @@ const getters = {
       return false;
     };
 
+    const sortByConfidenceOrByAnnotationSelected = (annotations) => {
+      annotations = getters.annotationsByConfidence(annotations);
+      if (state.annotationId) {
+        for (let i = 0; i < annotations.length; i++) {
+          if (state.annotationId == annotations[i].id) {
+            annotations.unshift(annotations.splice(i, 1)[0]);
+          }
+        }
+      }
+      return annotations;
+    };
+
     if (state.annotationSets) {
       state.annotationSets.forEach((annotationSet) => {
         labels = [];
@@ -350,6 +390,13 @@ const getters = {
             !state.annotationFilters.showFeedbackNeeded ||
             !state.annotationFilters.showAccepted
           ) {
+            if (!label.has_multiple_top_candidates) {
+              // if multi label = false, sort by confidence
+              label.annotations = sortByConfidenceOrByAnnotationSelected(
+                label.annotations
+              );
+            }
+
             label.annotations.forEach((annotation) => {
               if (
                 state.annotationFilters.showFeedbackNeeded &&
@@ -379,6 +426,12 @@ const getters = {
               }
             });
           } else {
+            if (!label.has_multiple_top_candidates) {
+              // if multi label = false, sort by confidence
+              label.annotations = sortByConfidenceOrByAnnotationSelected(
+                label.annotations
+              );
+            }
             // add annotations to the document array
             label.annotations.forEach((annotation) => {
               const added = addAnnotation(
@@ -963,6 +1016,15 @@ const actions = {
     commit("SET_DOC_ID", id);
   },
   setAnnotationId: ({ commit, dispatch, getters }, id) => {
+    if (id) {
+      // check if part of label with multi ann as false
+      const annotation = getters.annotationById(id);
+      const label = getters.labelOfAnnotation(annotation);
+      if (getters.isLabelMultiFalseAndGroupOfAnns(label)) {
+        dispatch("setAnnotationAsFirstInLabel", { label, annotation });
+      }
+    }
+
     commit("SET_ANNOTATION_ID", id);
     setURLAnnotationHash(id);
   },
@@ -1542,6 +1604,57 @@ const actions = {
   showAcceptedAnnotations({ commit }, show) {
     commit("SET_SHOW_ACCEPTED_ANNOTATIONS", show);
   },
+  setAnnotationAsFirstInLabel({ commit, state }, { label, annotation }) {
+    state.annotationSets.forEach((annotationSet) => {
+      annotationSet.labels.forEach((labelToFind) => {
+        if (labelToFind.id === label.id) {
+          if (labelToFind.annotations && labelToFind.annotations.length > 1) {
+            for (let i = 0; i < labelToFind.annotations.length; i++) {
+              if (labelToFind.annotations[i].id === annotation.id) {
+                labelToFind.annotations.unshift(
+                  labelToFind.annotations.splice(i, 1)[0]
+                );
+                commit("SET_ANNOTATIONS_IN_LABEL", {
+                  label: labelToFind,
+                  annotations: labelToFind.annotations,
+                });
+              }
+            }
+          }
+        }
+      });
+    });
+  },
+  putNextAnnotationInLabelFirst({ commit, state, dispatch }, label) {
+    dispatch("setAnnotationId", null);
+    let newFirstAnn = null;
+    state.annotationSets.forEach((annotationSet) => {
+      annotationSet.labels.forEach((labelToFind) => {
+        if (labelToFind.id === label.id) {
+          if (labelToFind.annotations && labelToFind.annotations.length > 1) {
+            const firstElement = labelToFind.annotations.shift();
+            labelToFind.annotations.push(firstElement);
+            commit("SET_ANNOTATIONS_IN_LABEL", {
+              label: labelToFind,
+              annotations: labelToFind.annotations,
+            });
+            newFirstAnn = labelToFind.annotations[0];
+          }
+        }
+      });
+    });
+
+    if (newFirstAnn) {
+      dispatch("setDocumentAnnotationSelected", {
+        annotation: newFirstAnn,
+        label: label,
+        span: newFirstAnn.span[0],
+        scrollTo: true,
+      });
+
+      dispatch("scrollToDocumentAnnotationSelected");
+    }
+  },
 };
 
 const mutations = {
@@ -1687,6 +1800,13 @@ const mutations = {
   SET_LABELS: (state, labels) => {
     state.labels = labels;
   },
+  SET_ANNOTATIONS_IN_LABEL: (state, { label, annotations }) => {
+    state.labels.forEach((labelToFind) => {
+      if (labelToFind.id === label.id) {
+        labelToFind.annotations = annotations;
+      }
+    });
+  },
   SET_EDIT_ANNOTATION: (state, editAnnotation) => {
     state.editAnnotation = editAnnotation;
   },