@konfuzio/document-validation-ui 0.1.39-dev.0 → 0.1.39

package/package.json

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

package/src/assets/scss/document_annotations.scss

@@ -49,14 +49,22 @@
     overflow: auto;
     height: 100vh;
 
-    #annotation-filters {
-      padding: 16px 16px 0px 16px;
+    .annotation-options {
       display: flex;
-      flex-direction: row;
-      justify-content: space-around;
-      gap: 12px;
-      span {
-        font-size: 14px;
+      justify-content: space-between;
+      flex-direction: column;
+      padding: 16px 16px 0px 16px;
+      gap: 16px;
+
+      #annotation-filters {
+        display: flex;
+        flex-direction: row;
+        width: 100%;
+        justify-content: space-around;
+        gap: 12px;
+        span {
+          font-size: 14px;
+        }
       }
     }
 

package/src/assets/scss/theme.scss

@@ -309,6 +309,28 @@
       }
     }
   }
+  .taginput-container {
+    &.is-focused {
+      box-shadow: none !important;
+      border-color: $primary !important;
+    }
+  }
+  .field {
+    input {
+      box-shadow: none !important;
+      &:focus {
+        border-color: $primary;
+      }
+    }
+    .control.has-icons-left {
+      .icon {
+        svg {
+          height: 20px;
+          width: 20px;
+        }
+      }
+    }
+  }
 
   .b-checkbox.checkbox {
     input[type="checkbox"] + .check {

package/src/components/DocumentAnnotations/AnnotationFilters.vue

@@ -1,22 +1,76 @@
 <template>
-  <div id="annotation-filters">
-    <b-switch v-model="annotationFilters.showFeedbackNeeded" class="is-small">{{
-      $t("human_feedback_needed")
-    }}</b-switch>
-    <b-switch v-model="annotationFilters.showEmpty" class="is-small">{{
-      $t("label_missing_annotations")
-    }}</b-switch>
-    <b-switch v-model="annotationFilters.showAccepted" class="is-small">{{
-      $t("accepted_annotations")
-    }}</b-switch>
+  <div class="annotation-options">
+    <div id="annotation-search">
+      <b-field>
+        <b-taginput
+          v-model="search"
+          ellipsis
+          icon="search"
+          :placeholder="$t('search')"
+        >
+          <template #tag="props">
+            <span>{{ labelNameForAnnotationId(props.tag) || props.tag }}</span>
+          </template>
+        </b-taginput>
+      </b-field>
+    </div>
+    <div id="annotation-filters">
+      <b-switch
+        v-model="annotationFilters.showFeedbackNeeded"
+        class="is-small"
+        >{{ $t("human_feedback_needed") }}</b-switch
+      >
+      <b-switch v-model="annotationFilters.showEmpty" class="is-small">{{
+        $t("label_missing_annotations")
+      }}</b-switch>
+      <b-switch v-model="annotationFilters.showAccepted" class="is-small">{{
+        $t("accepted_annotations")
+      }}</b-switch>
+    </div>
   </div>
 </template>
 <script>
-import { mapState } from "vuex";
+import { mapGetters, mapState } from "vuex";
 export default {
   name: "AnnotationFilters",
+  data() {
+    return {
+      search: [],
+    };
+  },
   computed: {
-    ...mapState("document", ["annotationSets", "annotationFilters"]),
+    ...mapState("document", [
+      "annotationSets",
+      "annotationFilters",
+      "annotationSearch",
+    ]),
+    ...mapGetters("document", ["annotationById", "labelOfAnnotation"]),
+  },
+
+  watch: {
+    search() {
+      if (this.search.length > 0) {
+        this.$emit("openAll");
+      }
+      if (this.search != this.annotationSearch) {
+        this.$store.dispatch("document/setAnnotationSearch", this.search);
+      }
+    },
+  },
+  mounted() {
+    this.search = this.annotationSearch;
+  },
+  methods: {
+    labelNameForAnnotationId(annotationId) {
+      const annotation = this.annotationById(Number(annotationId));
+      if (annotation) {
+        const label = this.labelOfAnnotation(annotation);
+        if (label) {
+          return label.name;
+        }
+      }
+      return false;
+    },
   },
 };
 </script>

package/src/components/DocumentAnnotations/DocumentAnnotations.vue

@@ -21,14 +21,30 @@
 
     <!-- When there's no annotation sets -->
     <div
-      v-else-if="getAnnotationsFiltered.annotationSets.length === 0"
+      v-else-if="
+        getAnnotationsFiltered.annotationSets.length === 0 &&
+        !isSearchingAnnotationList
+      "
       class="empty-annotation-sets"
     >
       <EmptyState />
     </div>
 
     <div v-else ref="annotationList" :class="['annotation-set-list']">
-      <AnnotationFilters v-if="isDocumentEditable" />
+      <AnnotationFilters
+        v-if="isDocumentEditable"
+        @openAll="openAllAccordions"
+      />
+
+      <div
+        v-if="
+          getAnnotationsFiltered.annotationSets.length === 0 &&
+          isSearchingAnnotationList
+        "
+        class="empty-annotation-sets"
+      >
+        <EmptyState :is-search="true" />
+      </div>
 
       <div
         v-if="Object.entries(annotationSetsInTable()).length > 0"
@@ -131,10 +147,19 @@
             </div>
           </div>
 
-          <div v-if="annotationSet.labels.length === 0" class="no-labels">
-            <span> {{ $t("no_labels_in_set") }}</span>
-            <!-- eslint-disable-next-line vue/no-v-html -->
-            <span v-if="isDocumentEditable" v-html="$t('link_to_add_labels')" />
+          <div v-else-if="annotationSet.labels.length === 0" class="no-labels">
+            <span>
+              {{
+                isSearchingAnnotationList
+                  ? $t("no_results")
+                  : $t("no_labels_in_set")
+              }}</span
+            >
+            <!-- eslint-disable vue/no-v-html -->
+            <span
+              v-if="isDocumentEditable && !isSearchingAnnotationList"
+              v-html="$t('link_to_add_labels')"
+            />
           </div>
 
           <div
@@ -205,6 +230,7 @@ export default {
       "isDocumentReviewed",
       "annotationSetOfAnnotation",
       "isAnnotationInAnnotationSet",
+      "isSearchingAnnotationList",
     ]),
     isAnnotationBeingEdited() {
       return this.editAnnotation && this.editAnnotation.id;
@@ -231,6 +257,12 @@ export default {
         oldAnnotationSets
       );
     },
+    getAnnotationsFiltered(newFiltered, oldFiltered) {
+      this.loadAccordions(
+        newFiltered.annotationSets,
+        oldFiltered.annotationSets
+      );
+    },
     annotationId(newAnnotationId) {
       if (newAnnotationId) {
         const annotationSet = this.annotationSetOfAnnotation(newAnnotationId);
@@ -255,6 +287,11 @@ export default {
     window.removeEventListener("keydown", this.keyDownHandler);
   },
   methods: {
+    annotationSetShouldAppear(annotationSet) {
+      return !(
+        annotationSet.labels.length === 0 && this.isSearchingAnnotationList
+      );
+    },
     toggleAccordion(index) {
       const newAnnotationSetsAccordion = [...this.annotationSetsAccordion];
       newAnnotationSetsAccordion[index] = !newAnnotationSetsAccordion[index];
@@ -288,11 +325,13 @@ export default {
           newAnnotationSets.forEach((newAnnotationSet) => {
             const existed = oldAnnotationSets.find(
               (oldAnnotationSet) =>
+                oldAnnotationSet &&
+                newAnnotationSet &&
                 oldAnnotationSet.id &&
                 newAnnotationSet.id &&
                 oldAnnotationSet.id === newAnnotationSet.id
             );
-            if (!existed && newAnnotationSet.id !== null) {
+            if (!existed && newAnnotationSet && newAnnotationSet.id !== null) {
               annotationSetsCreated.push(newAnnotationSet);
             }
           });
@@ -301,6 +340,7 @@ export default {
         newAnnotationSets.forEach((newAnnotationSet, index) => {
           const wasOpen = annotationSetsOpened.find(
             (annotationSetOpened) =>
+              annotationSetOpened &&
               annotationSetOpened.id &&
               newAnnotationSet.id &&
               newAnnotationSet.id === annotationSetOpened.id

package/src/components/DocumentAnnotations/EmptyState.vue

@@ -5,7 +5,7 @@
       <p class="title">
         {{ $t("no_label_sets_found") }}
       </p>
-      <p class="description">
+      <p v-if="!isSearch" class="description">
         {{ $t("no_label_sets_found_description") }}
       </p>
     </div>
@@ -15,7 +15,14 @@
 import EmptyStateImg from "../../assets/images/EmptyStateImg";
 export default {
   name: "EmptyState",
-  components: { EmptyStateImg }
+  components: { EmptyStateImg },
+  props: {
+    isSearch: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
 };
 </script>
 <style scoped lang="scss" src="../../assets/scss/empty_state.scss"></style>

package/src/store/display.js

@@ -7,17 +7,9 @@ import {
   MINIMUM_OPTIMIZED_APP_WIDTH,
 } from "../constants";
 
-const HTTP = myImports.HTTP;
+import { debounce } from "../utils/utils";
 
-const debounce = (cb, duration) => {
-  let timer;
-  return (...args) => {
-    clearTimeout(timer);
-    timer = setTimeout(() => {
-      cb(...args);
-    }, duration);
-  };
-};
+const HTTP = myImports.HTTP;
 
 const floor = (value, precision) => {
   const multiplier = Math.pow(10, precision || 0);

package/src/store/document.js

@@ -6,6 +6,8 @@ import {
   navigateToNewDocumentURL,
   getURLPath,
   setURLAnnotationHash,
+  setURLQueryParam,
+  debounce,
 } from "../utils/utils";
 
 const HTTP = myImports.HTTP;
@@ -53,6 +55,8 @@ const state = {
         ? false
         : true,
   },
+  annotationSearch:
+    (getURLQueryParam("search") && getURLQueryParam("search").split(",")) || [],
 };
 const getters = {
   /**
@@ -302,12 +306,60 @@ const getters = {
     let processedAnnotationSets = [];
     let processedLabels = [];
 
+    // search feature
+    const addAnnotation = (listToAdd, annotation, force) => {
+      if (force) {
+        listToAdd.push(annotation);
+        return true;
+      }
+      if (state.annotationSearch.length > 0) {
+        if (
+          annotation.offset_string &&
+          state.annotationSearch.find((search) =>
+            annotation.offset_string
+              .toLowerCase()
+              .includes(search.toLowerCase())
+          )
+        ) {
+          listToAdd.push(annotation);
+          return true;
+        } else if (
+          annotation.id &&
+          state.annotationSearch.find((search) => `${annotation.id}` === search)
+        ) {
+          listToAdd.push(annotation);
+          return true;
+        }
+      } else {
+        listToAdd.push(annotation);
+        return true;
+      }
+      return false;
+    };
+
+    const labelHasSearchText = (label) => {
+      if (state.annotationSearch.length > 0) {
+        if (
+          label.name &&
+          state.annotationSearch.find((search) =>
+            label.name.toLowerCase().includes(search.toLowerCase())
+          )
+        ) {
+          return true;
+        }
+      } else {
+        return false;
+      }
+      return false;
+    };
+
     if (state.annotationSets) {
       state.annotationSets.forEach((annotationSet) => {
         labels = [];
         annotationSet.labels.forEach((label) => {
           const labelAnnotations = [];
           let addLabel = false;
+          const labelHasSearch = labelHasSearchText(label);
           if (
             !state.annotationFilters.showEmpty ||
             !state.annotationFilters.showFeedbackNeeded ||
@@ -323,22 +375,42 @@ const getters = {
                   state.annotationFilters.showFeedbackNeeded &&
                   annotation.revised === false
                 ) {
-                  labelAnnotations.push(annotation);
-                  addLabel = true;
+                  const added = addAnnotation(
+                    labelAnnotations,
+                    annotation,
+                    labelHasSearch
+                  );
+                  if (added) {
+                    addLabel = true;
+                  }
                 }
                 if (
                   state.annotationFilters.showAccepted &&
                   annotation.revised === true
                 ) {
-                  labelAnnotations.push(annotation);
-                  addLabel = true;
+                  const added = addAnnotation(
+                    labelAnnotations,
+                    annotation,
+                    labelHasSearch
+                  );
+                  if (added) {
+                    addLabel = true;
+                  }
                 }
               });
             }
           } else {
             // add annotations to the document array
-            labelAnnotations.push(...label.annotations);
-            addLabel = true;
+            label.annotations.forEach((annotation) => {
+              const added = addAnnotation(
+                labelAnnotations,
+                annotation,
+                labelHasSearch
+              );
+              if (added) {
+                addLabel = true;
+              }
+            });
           }
           if (addLabel) {
             labels.push({ ...label, annotations: labelAnnotations });
@@ -346,7 +418,11 @@ const getters = {
           }
           annotations.push(...labelAnnotations);
         });
-        processedAnnotationSets.push({ ...annotationSet, labels });
+
+        // if in search do not add the annotation set
+        if (!(state.annotationSearch.length > 0 && labels.length === 0)) {
+          processedAnnotationSets.push({ ...annotationSet, labels });
+        }
       });
     }
 
@@ -484,6 +560,13 @@ const getters = {
       }
     },
 
+  /**
+   * Checks if it's currently searching for annotations
+   */
+  isSearchingAnnotationList: (state) => {
+    return state.annotationSearch && state.annotationSearch.length > 0;
+  },
+
   /**
    * Get number of empty labels per annotation set
    */
@@ -873,6 +956,9 @@ const actions = {
   setSplittingSuggestions: ({ commit }, value) => {
     commit("SET_SPLITTING_SUGGESTIONS", value);
   },
+  setAnnotationSearch: ({ commit }, value) => {
+    commit("SET_ANNOTATION_SEARCH", value);
+  },
 
   /**
    * Actions that use HTTP requests always return the axios promise,
@@ -1587,6 +1673,10 @@ const mutations = {
   SET_SPLITTING_SUGGESTIONS: (state, array) => {
     state.splittingSuggestions = array;
   },
+  SET_ANNOTATION_SEARCH: (state, search) => {
+    state.annotationSearch = search;
+    setURLQueryParam("search", search);
+  },
 };
 
 export default {

package/src/utils/utils.js

@@ -35,6 +35,19 @@ export function getURLValueFromHash(value) {
   return id;
 }
 
+export function setURLQueryParam(query, value, deleteParam = "") {
+  const url = new URL(window.location.href);
+  if (value != "") {
+    if (deleteParam != "") {
+      url.searchParams.delete(deleteParam);
+    }
+    url.searchParams.set(query, value);
+  } else {
+    url.searchParams.delete(query);
+  }
+  window.history.pushState(null, "", url.toString());
+}
+
 export function setURLAnnotationHash(annotationId) {
   if (annotationId) {
     window.location.hash = `ann${annotationId}`;
@@ -69,3 +82,13 @@ export function navigateToDocumentsList(path, projectId, userId) {
 export function isElementArray(element) {
   return Array.isArray(element);
 }
+
+export function debounce(cb, duration) {
+  let timer;
+  return (...args) => {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      cb(...args);
+    }, duration);
+  };
+}