@konfuzio/document-validation-ui 0.1.24-dev.2 → 0.1.24-dev.4

package/package.json

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

package/src/assets/scss/document_annotations.scss

@@ -49,6 +49,17 @@
     overflow: auto;
     max-height: 100%;
 
+    #annotation-filters {
+      padding: 16px 16px 0px 16px;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-around;
+      gap: 12px;
+      span {
+        font-size: 14px;
+      }
+    }
+
     .annotation-set-group {
       .label-set-header {
         cursor: pointer;

package/src/components/DocumentAnnotations/AnnotationFilters.vue

@@ -0,0 +1,62 @@
+<template>
+  <div id="annotation-filters">
+    <b-switch v-model="feedbackNeeded" class="is-small">{{
+      $t("human_feedback_needed")
+    }}</b-switch>
+    <b-switch v-model="missingAnnotations" class="is-small">{{
+      $t("label_missing_annotations")
+    }}</b-switch>
+    <b-switch v-model="acceptedAnnotations" class="is-small">{{
+      $t("accepted_annotations")
+    }}</b-switch>
+  </div>
+</template>
+<script>
+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,
+      });
+    },
+  },
+};
+</script>
+
+<style
+  scoped
+  lang="scss"
+  src="../../assets/scss/document_annotations.scss"
+></style>

package/src/components/DocumentAnnotations/DocumentAnnotations.vue

@@ -19,12 +19,14 @@
       </div>
     </div>
 
-    <!-- When there's no annotations in the label -->
+    <!-- When there's no annotation sets -->
     <div v-else-if="annotationSets.length === 0" class="empty-annotation-sets">
       <EmptyState />
     </div>
 
     <div v-else ref="annotationList" :class="['annotation-set-list']">
+      <AnnotationFilters v-if="isDocumentEditable" />
+
       <div
         v-if="Object.entries(annotationSetsInTable()).length > 0"
         class="annotation-set-group"
@@ -148,6 +150,7 @@ import EmptyState from "./EmptyState";
 import ExtractingData from "./ExtractingData";
 import AnnotationSetActionButtons from "./AnnotationSetActionButtons";
 import DocumentLabel from "./DocumentLabel";
+import AnnotationFilters from "./AnnotationFilters";
 import LoadingAnnotations from "./LoadingAnnotations";
 import GridIcon from "../../assets/images/GridIcon";
 
@@ -162,6 +165,7 @@ export default {
     DocumentLabel,
     LoadingAnnotations,
     GridIcon,
+    AnnotationFilters,
   },
   data() {
     return {

package/src/locales/de.json

@@ -152,5 +152,8 @@
   "no_results": "Keine Ergebnisse",
   "search_below_minimum": "Mindestens 3 Zeichen",
   "search_in_document": "Suche im Dokument",
-  "document_details": "Einzelheiten"
+  "document_details": "Einzelheiten",
+  "human_feedback_needed": "Menschliches Feedback erforderlich",
+  "label_missing_annotations": "Fehlende Annotationen",
+  "accepted_annotations": "Akzeptierte Annotationen"
 }

package/src/locales/en.json

@@ -153,5 +153,8 @@
   "no_results": "No results",
   "search_below_minimum": "Minimum 3 characters",
   "search_in_document": "Search document",
-  "document_details": "Details"
+  "document_details": "Details",
+  "human_feedback_needed": "Human Feedback needed",
+  "label_missing_annotations": "Missing Annotations",
+  "accepted_annotations": "Accepted Annotations"
 }

package/src/locales/es.json

@@ -152,5 +152,8 @@
   "no_results": "Sin resultados",
   "search_below_minimum": "Mínimo 3 caracteres",
   "search_in_document": "Buscar en documento",
-  "document_details": "Detalles"
+  "document_details": "Detalles",
+  "human_feedback_needed": "Necesita feedback humano",
+  "label_missing_annotations": "Anotaciones faltantes",
+  "accepted_annotations": "Anotaciones aceptadas"
 }

package/src/store/document.js

@@ -270,28 +270,59 @@ const getters = {
   },
 
   /* Process annotations and extract labels and sets */
-  processAnnotationSets: (state, getters) => (annotationSets) => {
-    // group annotations for sidebar
-    const annotations = [];
-    const labels = [];
-    const processedAnnotationSets = annotationSets.map((annotationSet) => {
-      const annotationSetLabels = annotationSet.labels.map((label) => {
-        // add annotations to the document array
-        annotations.push(...label.annotations);
-        labels.push(label);
-        // add labels to the labels array
-        return label;
+  processAnnotationSets:
+    (state, getters) =>
+    (
+      annotationSets,
+      showEmpty = true,
+      showFeedbackNeeded = true,
+      showAccepted = true
+    ) => {
+      // group annotations for sidebar
+      let annotations = [];
+      let labels = [];
+      let processedAnnotationSets = [];
+      annotationSets.forEach((annotationSet) => {
+        labels = [];
+        annotationSet.labels.forEach((label) => {
+          const labelAnnotations = [];
+          let addLabel = false;
+          if (!showEmpty || !showFeedbackNeeded || !showAccepted) {
+            if (!label.annotations || label.annotations.length === 0) {
+              if (showEmpty) {
+                addLabel = true;
+              }
+            } else {
+              label.annotations.forEach((annotation) => {
+                if (showFeedbackNeeded && annotation.revised === false) {
+                  labelAnnotations.push(annotation);
+                  addLabel = true;
+                }
+                if (showAccepted && annotation.revised === true) {
+                  labelAnnotations.push(annotation);
+                  addLabel = true;
+                }
+              });
+            }
+          } else {
+            // add annotations to the document array
+            labelAnnotations.push(...label.annotations);
+            addLabel = true;
+          }
+          if (addLabel) {
+            labels.push({ ...label, annotations: labelAnnotations });
+          }
+          annotations.push(...labelAnnotations);
+        });
+        processedAnnotationSets.push({ ...annotationSet, labels });
       });
-      annotationSet.labels = annotationSetLabels;
-      return annotationSet;
-    });
 
-    return {
-      annotationSets: processedAnnotationSets,
-      labels,
-      annotations,
-    };
-  },
+      return {
+        annotationSets: processedAnnotationSets,
+        labels,
+        annotations,
+      };
+    },
 
   /* Checks if there are annotations correct in the document */
   documentHasCorrectAnnotations: (state) => {
@@ -755,6 +786,21 @@ 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,
@@ -1448,7 +1494,6 @@ const mutations = {
   SET_SERVER_ERROR: (state, value) => {
     state.serverError = value;
   },
-
   UPDATE_FILE_NAME: (state, value) => {
     state.selectedDocument.data_file_name = value;
   },