Merge pull request #402 from konfuzio-ai/12557-search-ann-feature

Search Annotation List feature
konfuzio-ai · Sep 13, 2024 · 2abf87b · 2abf87b
2 parents a1f19cf + cfea481
commit 2abf87b
Show file tree

Hide file tree

Showing 9 changed files with 281 additions and 49 deletions.
diff --git a/src/assets/scss/document_annotations.scss b/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;
+        }
       }
     }
 

diff --git a/src/assets/scss/theme.scss b/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 {

diff --git a/src/components/DocumentAnnotations/AnnotationFilters.vue b/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>

diff --git a/src/components/DocumentAnnotations/DocumentAnnotations.vue b/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

diff --git a/src/components/DocumentAnnotations/EmptyState.vue b/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>
diff --git a/src/store/display.js b/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);