Filtering options, closes #7

app/api/datasets.py

@@ -1,3 +1,4 @@
+from flask import request
 from flask_restplus import Namespace, Resource, reqparse
 from flask_login import login_required, current_user
 from werkzeug.datastructures import FileStorage
@@ -26,7 +27,7 @@
 page_data = reqparse.RequestParser()
 page_data.add_argument('page', default=1, type=int)
 page_data.add_argument('limit', default=20, type=int)
-page_data.add_argument('folder', required=False, default='', help='Folder for data')
+page_data.add_argument('folder', default='', help='Folder for data')
 
 delete_data = reqparse.RequestParser()
 delete_data.add_argument('fully', default=False, type=bool,
@@ -217,6 +218,25 @@ def get(self, dataset_id):
         page = args['page']
         folder = args['folder']
 
+        args = dict(request.args)
+        if args.get('limit') != None:
+            del args['limit']
+        if args.get('page') != None:
+            del args['page']
+        if args.get('folder') != None:
+            del args['folder']
+
+        query = {}
+        for key, value in args.items():
+            lower = value.lower()
+            if lower in ["true", "false"]:
+                value = json.loads(lower)
+
+            if len(lower) != 0:
+                query[key] = value
+
+        # print(query, flush=True)
+
         # Check if dataset exists
         dataset = current_user.datasets.filter(id=dataset_id, deleted=False).first()
         if dataset is None:
@@ -233,9 +253,9 @@ def get(self, dataset_id):
         if not os.path.exists(directory):
             return {'message': 'Directory does not exist.'}, 400
 
-        images = ImageModel.objects(dataset_id=dataset_id, path__startswith=directory, deleted=False) \
+        images = ImageModel.objects(dataset_id=dataset_id, path__startswith=directory, deleted=False, **query) \
             .order_by('file_name').only('id', 'file_name', 'annotating')
-
+        
         pagination = Pagination(images.count(), limit, page)
         images = query_util.fix_ids(images[pagination.start:pagination.end])
 

app/api/images.py

@@ -19,7 +19,6 @@
 image_all.add_argument('page', default=1, type=int)
 image_all.add_argument('perPage', default=50, type=int, required=False)
 
-
 image_upload = reqparse.RequestParser()
 image_upload.add_argument('image', location='files',
                           type=FileStorage, required=True,
@@ -47,7 +46,7 @@ def get(self):
         args = image_all.parse_args()
         per_page = args['perPage']
         page = args['page']-1
-        fields = args.get('fields', "")
+        fields = args.get('fields', '')
 
         images = current_user.images.filter(deleted=False)
         total = images.count()

client/src/components/PanelButtonSelect.vue

@@ -0,0 +1,53 @@
+<template>
+  <button
+    class="btn btn-outline-light tool-input-button"
+    @click="$emit('click', current.value)"
+  >
+    {{ current.name }}
+  </button>
+</template>
+
+<script>
+export default {
+  name: "PanelButton",
+  props: {
+    name: {
+      type: String,
+      required: true
+    },
+    options: {
+      type: Array,
+      required: true
+    },
+    default: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      currentIndex: this.default
+    }
+  }
+  computed: {
+    current() {
+      return this.options[this.currentIndex]
+    }
+  }
+};
+</script>
+
+<style scoped>
+.tool-input-button {
+  height: 20px;
+  border-color: #4b5162;
+  padding: 0 0 0 11px;
+  font-size: 12px;
+  width: 100%;
+}
+
+.tool-input-button:hover {
+  border-color: lightgray;
+  background-color: white;
+}
+</style>

client/src/components/annotator/panels/PanelInputString.vue → client/src/components/PanelInputString.vue

@@ -3,7 +3,11 @@
     <div class="input-group-prepend tool-option-pre">
       <span class="input-group-text tool-option-font">{{ name }}</span>
     </div>
-    <input v-model="localValue" class="form-control tool-option-input" />
+    <input
+      v-model="localValue"
+      class="form-control tool-option-input"
+      @keyup.enter="$emit('submit')"
+    />
   </div>
 </template>
 

client/src/components/annotator/Annotation.vue

@@ -267,14 +267,14 @@ export default {
         this.$emit("click", this.index);
       }
     },
-    onMouseEnter(event) {
+    onMouseEnter() {
       if (this.compoundPath == null) return;
 
       this.compoundPath.selected = true;
     },
-    onMouseLeave(event) {
+    onMouseLeave() {
       if (this.compoundPath == null) return;
-      
+
       this.compoundPath.selected = false;
     },
     getCompoundPath() {

client/src/components/annotator/panels/BrushPanel.vue

@@ -15,8 +15,8 @@
 </template>
 
 <script>
-import PanelInputString from "@/components/annotator/panels/PanelInputString";
-import PanelInputNumber from "@/components/annotator/panels/PanelInputNumber";
+import PanelInputString from "@/components/PanelInputString";
+import PanelInputNumber from "@/components/PanelInputNumber";
 
 export default {
   name: "BrushPanel",

client/src/components/annotator/panels/EraserPanel.vue

@@ -15,8 +15,8 @@
 </template>
 
 <script>
-import PanelInputString from "@/components/annotator/panels/PanelInputString";
-import PanelInputNumber from "@/components/annotator/panels/PanelInputNumber";
+import PanelInputString from "@/components/PanelInputString";
+import PanelInputNumber from "@/components/PanelInputNumber";
 
 export default {
   name: "EraserPanel",

client/src/components/annotator/panels/MagicWandPanel.vue

@@ -18,7 +18,7 @@
 </template>
 
 <script>
-import PanelInputNumber from "@/components/annotator/panels/PanelInputNumber";
+import PanelInputNumber from "@/components/PanelInputNumber";
 
 export default {
   name: "MagicWandPanel",

client/src/components/annotator/panels/PolygonPanel.vue

@@ -31,10 +31,10 @@
 </template>
 
 <script>
-import PanelButton from "@/components/annotator/panels/PanelButton";
-import PanelToggle from "@/components/annotator/panels/PanelToggle";
-import PanelInputString from "@/components/annotator/panels/PanelInputString";
-import PanelInputNumber from "@/components/annotator/panels/PanelInputNumber";
+import PanelButton from "@/components/PanelButton";
+import PanelToggle from "@/components/PanelToggle";
+import PanelInputString from "@/components/PanelInputString";
+import PanelInputNumber from "@/components/PanelInputNumber";
 
 export default {
   name: "PolygonPanel",

client/src/components/annotator/panels/SelectPanel.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import PanelToggle from "@/components/annotator/panels/PanelToggle";
+import PanelToggle from "@/components/PanelToggle";
 
 export default {
   name: "SelectPanel",

client/src/views/Dataset.vue

@@ -130,7 +130,11 @@
       <div
         class="sidebar-section"
         style="max-height: 30%; color: lightgray"
-      ></div>
+      >
+        <PanelString name="Contains" v-model="query.file_name__icontains" @submit="updatePage" />
+        <PanelToggle name="Show Annotated" v-model="panel.showAnnotated" />
+        <PanelToggle name="Show Not Annotated" v-model="panel.showNotAnnotated" />
+      </div>
     </div>
 
     <div class="modal fade" tabindex="-1" role="dialog" id="generateDataset">
@@ -232,12 +236,19 @@ import toastrs from "@/mixins/toastrs";
 import Dataset from "@/models/datasets";
 import ImageCard from "@/components/cards/ImageCard";
 import Pagination from "@/components/Pagination";
+import PanelString from "@/components/PanelInputString";
+import PanelToggle from "@/components/PanelToggle";
 
 import { mapMutations } from "vuex";
 
 export default {
   name: "Dataset",
-  components: { ImageCard, Pagination },
+  components: {
+    ImageCard,
+    Pagination,
+    PanelString,
+    PanelToggle
+  },
   mixins: [toastrs],
   props: {
     identifier: {
@@ -282,6 +293,14 @@ export default {
       exporting: {
         progress: 0,
         id: null
+      },
+      query: {
+        file_name__icontains: "",
+        ...this.$route.query
+      },
+      panel: {
+        showAnnotated: true,
+        showNotAnnotated: true
       }
     };
   },
@@ -302,7 +321,9 @@ export default {
       Dataset.getData(this.dataset.id, {
         page: page,
         limit: this.limit,
-        folder: this.folders.join("/")
+        folder: this.folders.join("/"),
+        ...this.query,
+        annotated: this.queryAnnotated
       })
         .then(response => {
           let data = response.data;
@@ -385,6 +406,17 @@ export default {
       this.sidebar.canResize = false;
     }
   },
+  computed: {
+    queryAnnotated() {
+      let showAnnotated = this.panel.showAnnotated;
+      let showNotAnnotated = this.panel.showNotAnnotated;
+      
+      if (showAnnotated && showNotAnnotated) return null
+      if (!showAnnotated && !showNotAnnotated) return " ";
+
+      return showAnnotated;
+    }
+  },
   sockets: {
     taskProgress(data) {
       if (data.id === this.scan.id) {
@@ -414,6 +446,7 @@ export default {
     }
   },
   watch: {
+    queryAnnotated() { this.updatePage() },
     folders() {
       this.updatePage();
     },