Created new component for annotation filters

src/assets/scss/document_annotations.scss

@@ -49,6 +49,13 @@
     overflow: auto;
     max-height: 100%;
 
+    #annotation-filters {
+      padding: 16px;
+      span {
+        font-size: 14px;
+      }
+    }
+
     .annotation-set-group {
       .label-set-header {
         cursor: pointer;

src/components/DocumentAnnotations/AnnotationFilters.vue

@@ -0,0 +1,34 @@
+<template>
+  <div id="annotation-filters">
+    <b-switch v-model="feedbackNeeded" class="is-small"
+      >Human Feedback needed</b-switch
+    >
+    <b-switch v-model="missingAnnotations" class="is-small"
+      >Missing Annotations</b-switch
+    >
+    <b-switch v-model="acceptedAnnotations" class="is-small"
+      >Accepted Annotations</b-switch
+    >
+  </div>
+</template>
+<script>
+import { mapGetters, mapState } from "vuex";
+export default {
+  name: "AnnotationFilters",
+  data() {
+    return {
+      feedbackNeeded: true,
+      missingAnnotations: true,
+      acceptedAnnotations: true,
+    };
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style
+  scoped
+  lang="scss"
+  src="../../assets/scss/document_annotations.scss"
+></style>

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 {