@konfuzio/document-validation-ui 0.1.29-dev.0 → 0.1.29-dev.2

package/package.json

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

package/src/assets/scss/document_annotations.scss

@@ -516,8 +516,6 @@
         padding: 6px;
 
         .decline-icon {
-          height: 24px;
-          width: 24px;
           padding: 6px;
           color: $red;
           vertical-align: middle;

package/src/assets/scss/theme.scss

@@ -621,6 +621,20 @@
     margin: 0 !important;
   }
 
+  .icon.is-24 {
+    svg {
+      height: 24px;
+      width: 24px;
+    }
+  }
+
+  .icon.is-12 {
+    svg {
+      height: 12px;
+      width: 12px;
+    }
+  }
+
   .icon.is-small,
   .button .icon.is-small {
     width: 14px;

package/src/components/DocumentAnnotations/AnnotationActionButtons.vue

@@ -42,7 +42,7 @@
         type="is-ghost"
         @click.stop="decline"
       >
-        <b-icon icon="xmark" class="decline-icon" />
+        <b-icon icon="xmark" size="is-24" class="decline-icon" />
       </b-button>
       <b-button
         v-if="acceptBtn"
@@ -62,7 +62,7 @@
       <b-button type="is-ghost" class="missing-btn" @click.stop="markAsMissing">
         <span v-if="showText">{{ $t("missing_annotation") }}</span>
         <b-tooltip v-else position="is-left" :label="$t('missing_annotation')">
-          <b-icon icon="xmark" size="small" class="button-icon" />
+          <b-icon icon="xmark" size="is-small" class="button-icon" />
         </b-tooltip>
       </b-button>
       <b-button
@@ -72,7 +72,7 @@
       >
         <span v-if="showText">{{ $t("search_in_document") }}</span>
         <b-tooltip v-else position="is-left" :label="$t('search_in_document')">
-          <b-icon icon="search" size="small" class="button-icon" />
+          <b-icon icon="search" size="is-small" class="button-icon" />
         </b-tooltip>
       </b-button>
     </div>
@@ -86,7 +86,7 @@
     >
       <span v-if="showText">{{ $t("restore") }}</span>
       <b-tooltip v-else position="is-left" :label="$t('restore')">
-        <b-icon icon="trash-arrow-up" size="small" class="button-icon" />
+        <b-icon icon="trash-arrow-up" size="is-small" class="button-icon" />
       </b-tooltip>
     </b-button>
   </div>

package/src/components/DocumentAnnotations/AnnotationFilters.vue

@@ -1,12 +1,12 @@
 <template>
   <div id="annotation-filters">
-    <b-switch v-model="feedbackNeeded" class="is-small">{{
+    <b-switch v-model="annotationFilters.showFeedbackNeeded" class="is-small">{{
       $t("human_feedback_needed")
     }}</b-switch>
-    <b-switch v-model="missingAnnotations" class="is-small">{{
+    <b-switch v-model="annotationFilters.showEmpty" class="is-small">{{
       $t("label_missing_annotations")
     }}</b-switch>
-    <b-switch v-model="acceptedAnnotations" class="is-small">{{
+    <b-switch v-model="annotationFilters.showAccepted" class="is-small">{{
       $t("accepted_annotations")
     }}</b-switch>
   </div>
@@ -15,42 +15,8 @@
 import { mapState } from "vuex";
 export default {
   name: "AnnotationFilters",
-  data() {
-    return {
-      feedbackNeeded: true,
-      missingAnnotations: true,
-      acceptedAnnotations: true,
-      originalAnnotationSets: [],
-    };
-  },
   computed: {
-    ...mapState("document", ["annotationSets"]),
-  },
-  watch: {
-    feedbackNeeded() {
-      this.filterAnnotations();
-    },
-    missingAnnotations() {
-      this.filterAnnotations();
-    },
-    acceptedAnnotations() {
-      this.filterAnnotations();
-    },
-  },
-  mounted() {
-    this.originalAnnotationSets = JSON.parse(
-      JSON.stringify(this.annotationSets)
-    );
-  },
-  methods: {
-    filterAnnotations() {
-      this.$store.dispatch("document/filterAnnotations", {
-        originalAnnotationSets: this.originalAnnotationSets,
-        showEmpty: this.missingAnnotations,
-        showFeedbackNeeded: this.feedbackNeeded,
-        showAccepted: this.acceptedAnnotations,
-      });
-    },
+    ...mapState("document", ["annotationSets", "annotationFilters"]),
   },
 };
 </script>

package/src/components/DocumentAnnotations/DocumentAnnotations.vue

@@ -7,7 +7,7 @@
 
     <!-- When document data is still loading -->
     <div
-      v-else-if="!annotationSets || loading"
+      v-else-if="!getAnnotationsFiltered.annotationSets || loading"
       class="document-annotations-loading"
     >
       <div
@@ -20,7 +20,10 @@
     </div>
 
     <!-- When there's no annotation sets -->
-    <div v-else-if="annotationSets.length === 0" class="empty-annotation-sets">
+    <div
+      v-else-if="getAnnotationsFiltered.annotationSets.length === 0"
+      class="empty-annotation-sets"
+    >
       <EmptyState />
     </div>
 
@@ -51,7 +54,9 @@
         </div>
       </div>
       <div
-        v-for="(annotationSet, indexGroup) in annotationSets"
+        v-for="(
+          annotationSet, indexGroup
+        ) in getAnnotationsFiltered.annotationSets"
         :key="indexGroup"
         :class="[
           'annotation-set-group',
@@ -65,6 +70,7 @@
               :icon="
                 annotationSetsAccordion[indexGroup] ? 'angle-up' : 'angle-down'
               "
+              size="is-12"
             />
             {{
               `${annotationSet.label_set.name} ${numberOfAnnotationSetGroup(
@@ -178,13 +184,11 @@ export default {
   computed: {
     ...mapState("display", ["showAnnSetTable"]),
     ...mapState("document", [
+      "annotationSets",
       "documentId",
       "recalculatingAnnotations",
-      "missingAnnotations",
       "publicView",
-      "annotations",
       "editAnnotation",
-      "annotationSets",
       "loading",
       "labels",
       "selectedDocument",
@@ -193,6 +197,7 @@ export default {
     ]),
     ...mapGetters("document", [
       "numberOfAnnotationSetGroup",
+      "getAnnotationsFiltered",
       "emptyLabels",
       "notCorrectAnnotations",
       "annotationSetsInTable",
@@ -219,7 +224,10 @@ export default {
       }
     },
     annotationSets(newAnnotationSets, oldAnnotationSets) {
-      this.loadAccordions(newAnnotationSets, oldAnnotationSets);
+      this.loadAccordions(
+        this.getAnnotationsFiltered.annotationSets,
+        oldAnnotationSets
+      );
     },
     sidebarAnnotationSelected(annotation) {
       if (annotation) {
@@ -237,8 +245,8 @@ export default {
   },
   created() {
     window.addEventListener("keydown", this.keyDownHandler);
-    if (this.annotationSets) {
-      this.loadAccordions(this.annotationSets);
+    if (this.getAnnotationsFiltered.annotationSets) {
+      this.loadAccordions(this.getAnnotationsFiltered.annotationSets);
     }
   },
   destroyed() {
@@ -348,7 +356,7 @@ export default {
         }
       });
 
-      const currentAnnotation = this.annotations.find(
+      const currentAnnotation = this.getAnnotationsFiltered.annotations.find(
         (ann) => ann.id === this.editAnnotation.id
       );
 
@@ -488,9 +496,10 @@ export default {
         // Check for ENTER or DELETE
         // Accept annotation
         if (event.key === "Enter") {
-          if (!this.annotations || !this.editAnnotation) return;
+          if (!this.getAnnotationsFiltered.annotations || !this.editAnnotation)
+            return;
 
-          const currentAnn = this.annotations.find(
+          const currentAnn = this.getAnnotationsFiltered.annotations.find(
             (a) => a.id === this.editAnnotation.id
           );
 

package/src/components/DocumentPage/DocumentPage.vue

@@ -180,8 +180,33 @@ export default {
   },
 
   computed: {
-    ...mapState("display", ["currentPage", "showAnnSetTable"]),
-    ...mapGetters("document", ["isNegative"]),
+    ...mapState("selection", ["isSelecting", "selectedEntities"]),
+    ...mapState("display", [
+      "scale",
+      "categorizeModalIsActive",
+      "searchEnabled",
+      "currentPage",
+      "showAnnSetTable",
+    ]),
+    ...mapState("document", [
+      "documentAnnotationSelected",
+      "recalculatingAnnotations",
+      "editAnnotation",
+      "selectedDocument",
+      "publicView",
+    ]),
+    ...mapState("edit", ["editMode"]),
+    ...mapGetters("display", ["visiblePageRange", "bboxToRect"]),
+    ...mapGetters("selection", ["isSelectionValid", "isElementSelected"]),
+    ...mapGetters("document", [
+      "getAnnotationsFiltered",
+      "isAnnotationInEditMode",
+      "isDocumentReadyToBeReviewed",
+      "entitiesOnSelection",
+      "isDocumentReviewed",
+      "labelOfAnnotation",
+      "isNegative",
+    ]),
 
     isBoxSelection() {
       return this.selection && !this.isSelecting && this.isElementSelected;
@@ -254,8 +279,8 @@ export default {
      */
     pageAnnotations() {
       const annotations = [];
-      if (this.annotations) {
-        this.annotations.map((annotation) => {
+      if (this.getAnnotationsFiltered.annotations) {
+        this.getAnnotationsFiltered.annotations.map((annotation) => {
           if (
             annotation.span.find(
               (span) => span.page_index + 1 === this.page.number
@@ -287,31 +312,6 @@ export default {
         this.page.number
       );
     },
-
-    ...mapState("selection", ["isSelecting", "selectedEntities"]),
-    ...mapState("display", [
-      "scale",
-      "categorizeModalIsActive",
-      "searchEnabled",
-    ]),
-    ...mapState("document", [
-      "documentAnnotationSelected",
-      "recalculatingAnnotations",
-      "annotations",
-      "editAnnotation",
-      "selectedDocument",
-      "publicView",
-    ]),
-    ...mapState("edit", ["editMode"]),
-    ...mapGetters("display", ["visiblePageRange", "bboxToRect"]),
-    ...mapGetters("selection", ["isSelectionValid", "isElementSelected"]),
-    ...mapGetters("document", [
-      "isAnnotationInEditMode",
-      "isDocumentReadyToBeReviewed",
-      "entitiesOnSelection",
-      "isDocumentReviewed",
-      "labelOfAnnotation",
-    ]),
   },
   watch: {
     recalculatingAnnotations(newState) {

package/src/components/DocumentPage/DocumentToolbar.vue

@@ -29,13 +29,13 @@
         class="search-document icons"
         @click="toggleSearch"
       >
-        <b-icon icon="search" size="small" class="search-icon" />
+        <b-icon icon="search" size="is-small" class="search-icon" />
       </div>
 
       <div v-if="!publicView" class="download-file icons">
         <b-dropdown aria-role="list" position="is-top-right" scrollable>
           <template #trigger>
-            <b-icon icon="download" size="small" class="download-file" />
+            <b-icon icon="download" size="is-small" class="download-file" />
           </template>
 
           <b-dropdown-item

package/src/components/DocumentPage/SearchBar.vue

@@ -86,7 +86,6 @@ export default {
   },
   watch: {
     search(search) {
-      console.log("search", search);
       this.$store.dispatch("display/setCurrentSearch", search);
       if (search.length >= this.minSearchLength) {
         this.$store.dispatch("display/startSearchLoading");

package/src/components/DocumentTopBar/DocumentTopBar.vue

@@ -162,11 +162,12 @@ export default {
     },
     getPreviousAndNextDocuments() {
       // Only consider documents who have a status of "ready"
-      const filteredDocuments = this.documentsInProject.filter(
+      const filteredDocuments =
+        this.documentsInProject; /*this.documentsInProject.filter(
         (document) =>
           (this.reviewFilter && this.isDocumentReadyToBeReviewed(document)) ||
           this.waitingForSplittingConfirmation(document)
-      );
+      );*/
 
       if (!filteredDocuments) return;
 

package/src/store/document.js

@@ -35,6 +35,11 @@ const state = {
   serverError: false,
   splittingSuggestions: null,
   enableGroupingFeature: true,
+  annotationFilters: {
+    showFeedbackNeeded: true,
+    showEmpty: true,
+    showAccepted: true,
+  },
 };
 
 const getters = {
@@ -291,37 +296,41 @@ const getters = {
     return foundLabel;
   },
 
-  /* Process annotations and extract labels and sets */
-  processAnnotationSets:
-    (state, getters) =>
-    (
-      annotationSets,
-      showEmpty = true,
-      showFeedbackNeeded = true,
-      showAccepted = true
-    ) => {
-      // group annotations for sidebar
-      let annotations = [];
-      let labels = [];
-      let processedAnnotationSets = [];
-      let processedLabels = [];
-      annotationSets.forEach((annotationSet) => {
+  getAnnotationsFiltered: (state) => {
+    // group annotations for sidebar
+    let annotations = [];
+    let labels = [];
+    let processedAnnotationSets = [];
+    let processedLabels = [];
+
+    if (state.annotationSets) {
+      state.annotationSets.forEach((annotationSet) => {
         labels = [];
         annotationSet.labels.forEach((label) => {
           const labelAnnotations = [];
           let addLabel = false;
-          if (!showEmpty || !showFeedbackNeeded || !showAccepted) {
+          if (
+            !state.annotationFilters.showEmpty ||
+            !state.annotationFilters.showFeedbackNeeded ||
+            !state.annotationFilters.showAccepted
+          ) {
             if (!label.annotations || label.annotations.length === 0) {
-              if (showEmpty) {
+              if (state.annotationFilters.showEmpty) {
                 addLabel = true;
               }
             } else {
               label.annotations.forEach((annotation) => {
-                if (showFeedbackNeeded && annotation.revised === false) {
+                if (
+                  state.annotationFilters.showFeedbackNeeded &&
+                  annotation.revised === false
+                ) {
                   labelAnnotations.push(annotation);
                   addLabel = true;
                 }
-                if (showAccepted && annotation.revised === true) {
+                if (
+                  state.annotationFilters.showAccepted &&
+                  annotation.revised === true
+                ) {
                   labelAnnotations.push(annotation);
                   addLabel = true;
                 }
@@ -334,25 +343,48 @@ const getters = {
           }
           if (addLabel) {
             labels.push({ ...label, annotations: labelAnnotations });
-            let addProcessedLabel = true;
-            processedLabels.forEach((processedLabel) => {
-              if (processedLabel.id === label.id) {
-                addProcessedLabel = false;
-                return;
-              }
-            });
             processedLabels.push(label);
           }
           annotations.push(...labelAnnotations);
         });
         processedAnnotationSets.push({ ...annotationSet, labels });
       });
-      return {
-        annotationSets: processedAnnotationSets,
-        labels: processedLabels,
-        annotations,
-      };
-    },
+    }
+
+    return {
+      annotationSets: processedAnnotationSets,
+      labels: processedLabels,
+      annotations,
+    };
+  },
+
+  /* Process annotations and extract labels and sets */
+  processAnnotationSets: () => (annotationSets) => {
+    // group annotations for sidebar
+    let annotations = [];
+    let labels = [];
+    let processedAnnotationSets = [];
+    let processedLabels = [];
+
+    annotationSets.forEach((annotationSet) => {
+      labels = [];
+      annotationSet.labels.forEach((label) => {
+        const labelAnnotations = [];
+
+        // add annotations to the document array
+        labelAnnotations.push(...label.annotations);
+        labels.push({ ...label, annotations: labelAnnotations });
+        processedLabels.push(label);
+        annotations.push(...labelAnnotations);
+      });
+      processedAnnotationSets.push({ ...annotationSet, labels });
+    });
+    return {
+      annotationSets: processedAnnotationSets,
+      labels: processedLabels,
+      annotations,
+    };
+  },
 
   /* Checks if there are annotations correct in the document */
   documentHasCorrectAnnotations: (state) => {
@@ -816,21 +848,6 @@ const actions = {
   setSplittingSuggestions: ({ commit }, value) => {
     commit("SET_SPLITTING_SUGGESTIONS", value);
   },
-  filterAnnotations: (
-    { commit, getters },
-    { originalAnnotationSets, showEmpty, showFeedbackNeeded, showAccepted }
-  ) => {
-    const { labels, annotations, annotationSets } =
-      getters.processAnnotationSets(
-        originalAnnotationSets,
-        showEmpty,
-        showFeedbackNeeded,
-        showAccepted
-      );
-    commit("SET_ANNOTATION_SETS", annotationSets);
-    commit("SET_ANNOTATIONS", annotations);
-    commit("SET_LABELS", labels);
-  },
 
   /**
    * Actions that use HTTP requests always return the axios promise,