updated label filter logic

webui/src/components/media/annotated-image.vue

@@ -280,7 +280,10 @@ export default {
           return `${tip}: move or resize`;
 
         case "label-box":
-          return `${tip}: tag as "${this.label.name}"`;
+          if (this.label.identifier !== null)
+            return `${tip}: remove tag`;
+          else
+            return `${tip}: tag as "${this.label.name}"`;
 
         case "confirm-box":
           return `${tip}: confirm`;

webui/src/components/media/label-selector.vue

@@ -6,7 +6,7 @@
     <div v-if="results.length > 0" class="labels">
       <div v-for="(label, index) in results" v-bind:key="label.identifier"
            class="label selectable"
-           :class="{selected: index === selectedIndex}"
+           :class="{selected: index === selectedIndex, visible: label.is_visible}"
            @click="select(label)">
         <div class="hierarchy" v-if="label.hierarchy_level">
           {{ label.hierarchy_level }}
@@ -46,7 +46,9 @@ export default {
   data: function () {
     return {
       search: '',
-      selectedIndex: 0
+      selectedIndex: 0,
+      minSearchChars: 2,
+      deleteLabel: {identifier: null, name: 'None'}
     }
   },
   computed: {
@@ -70,14 +72,14 @@ export default {
       });
     },
     results: function () {
-      const search = this.search.toLowerCase();
+      let labs = [this.deleteLabel, ...this.sortedLabels];
+      labs.forEach(l => {l.is_visible = true });
+      return labs;
+    },
 
-      return [{
-        identifier: null,
-        name: 'None'
-      }, ...this.sortedLabels]
-          .filter(l => !this.search || !l.identifier || l.name.toLowerCase().includes(search));
-    }
+    n_visible: function () {
+      return this.results.filter(l => l.is_visible).length;
+    },
   },
   methods: {
     keypress: function (event) {
@@ -86,8 +88,8 @@ export default {
       switch (event.key) {
         case 'ArrowDown':
           this.selectedIndex += 1;
-          if (this.selectedIndex >= this.results.length)
-            this.selectedIndex = this.results.length - 1;
+          if (this.selectedIndex >= this.n_visible)
+            this.selectedIndex = this.n_visible - 1;
           break;
 
         case 'ArrowUp':
@@ -105,10 +107,18 @@ export default {
           break;
 
         default:
-          this.selectedIndex = Math.min(1, this.results.length - 1);
+          this.selectedIndex = Math.min(1, this.n_visible - 1);
           break;
       }
     },
+
+
+    setVisibility: function (search) {
+      console.log(search);
+      this.results.forEach(l => {
+        l.is_visible = !search || !l.identifier || l.name.toLowerCase().includes(search);
+      });
+    },
     select: function (label) {
       this.$emit('label', label);
       this.closeDelayed();
@@ -116,6 +126,16 @@ export default {
     closeDelayed: function () {
       setTimeout(() => this.$emit('close', true), 100);
     }
+  },
+  watch: {
+    search: function(newVal) {
+      let query = "";
+
+      if (newVal.length >= this.minSearchChars)
+        query = newVal.toLowerCase();
+
+      this.setVisibility(query);
+    }
   }
 }
 </script>
@@ -142,6 +162,11 @@ input {
 
 .label {
   padding: 0.25rem 0;
+  display: none;
+}
+
+.label.visible{
+  display: inherit;
 }
 
 .label:not(:last-child) {
@@ -158,4 +183,5 @@ input {
   font-size: 77%;
   opacity: 0.8;
 }
+
 </style>