Move annotation to a different category (#229)

* Add backend support for annotation update

* Return the new annotation from the update

* Pass allCategories prop to Category and Annotation

* Add annotation-update support in the client

* Bug fix - merge annotation data from the server with the current annotation

* Shorter category update logs

backend/webserver/api/annotations.py

@@ -19,6 +19,8 @@
 create_annotation.add_argument('keypoints', type=list, location='json')
 create_annotation.add_argument('color', location='json')
 
+update_annotation = reqparse.RequestParser()
+update_annotation.add_argument('category_id', type=int, location='json')
 
 @api.route('/')
 class Annotation(Resource):
@@ -90,6 +92,24 @@ def delete(self, annotation_id):
                           set__deleted_date=datetime.datetime.now())
         return {'success': True}
 
+    @api.expect(update_annotation)
+    @login_required
+    def put(self, annotation_id):
+        """ Updates an annotation by ID """
+        annotation = current_user.annotations.filter(id=annotation_id).first()
+
+        if annotation is None:
+            return { "message": "Invalid annotation id" }, 400
+
+        args = update_annotation.parse_args()
+
+        new_category_id = args.get('category_id')
+        annotation.update(category_id=new_category_id)
+        logger.info(
+            f'{current_user.username} has updated category for annotation (id: {annotation.id})'
+        )
+        newAnnotation = current_user.annotations.filter(id=annotation_id).first()
+        return query_util.fix_ids(newAnnotation)
 
 # @api.route('/<int:annotation_id>/mask')
 # class AnnotationMask(Resource):

client/src/components/annotator/Annotation.vue

@@ -94,7 +94,7 @@
                     <option :value="1">LABELED NOT VISIBLE</option>
                     <option :value="2">LABELED VISIBLE</option>
                   </select>
-                </div>  
+                </div>
               </div>
             </form>
           </div>
@@ -136,19 +136,31 @@
           <div class="modal-body">
             <form>
               <div class="form-group row">
-                <label class="col-sm-2 col-form-label">Color</label>
-                <div class="col-sm-9">
+                <label class="col-sm-3 col-form-label">Color</label>
+                <div class="col-sm-8">
                   <input v-model="color" type="color" class="form-control" />
                 </div>
               </div>
-
               <div class="form-group row">
-                <label class="col-sm-2 col-form-label">Name</label>
-                <div class="col-sm-9">
+                <label class="col-sm-3 col-form-label">Name</label>
+                <div class="col-sm-8">
                   <input v-model="name" class="form-control" />
                 </div>
               </div>
-
+              <div class="form-group row">
+                <label class="col-sm-3 col-form-label">Category</label>
+                <div class="col-sm-8">
+                  <select class="form-control" @change="setCategory">
+                    <option
+                      v-for="option in allCategories"
+                      :selected="annotation.category_id === option.value"
+                      :key="option.text"
+                    >
+                      {{ option.text }}
+                    </option>
+                  </select>
+                </div>
+              </div>
               <Metadata
                 :metadata="annotation.metadata"
                 ref="metadata"
@@ -236,6 +248,10 @@ export default {
     activeTool: {
       type: String,
       required: true
+    },
+    allCategories: {
+      type: Array,
+      default: () => []
     }
   },
   data() {
@@ -582,6 +598,18 @@ export default {
       this.compoundPath.fillColor = this.color;
       this.keypoints.color = this.darkHSL;
     },
+    setCategory(event) {
+      const newCategoryName = event.target.value;
+      const annotation = this.annotation;
+      const oldCategory = this.$parent.category;
+
+      this.$parent.$parent.updateAnnotationCategory(
+        annotation,
+        oldCategory,
+        newCategoryName
+      );
+      $(`#annotationSettings${annotation.id}`).modal("hide");
+    },
     export() {
       if (this.compoundPath == null) this.createCompoundPath();
 

client/src/components/annotator/Category.vue

@@ -76,8 +76,8 @@
         :active-tool="activeTool"
         :scale="scale"
         @deleted="annotationDeleted"
+        :all-categories="getCategoriesList"
       />
-
     </ul>
 
     <div
@@ -131,7 +131,6 @@
         </div>
       </div>
     </div>
-
   </div>
 </template>
 
@@ -181,6 +180,10 @@ export default {
     activeTool: {
       type: String,
       required: true
+    },
+    allCategories: {
+      type: Array,
+      required: true
     }
   },
   data: function() {
@@ -393,6 +396,12 @@ export default {
       if (search.length === 0) return true;
       return this.category.name.toLowerCase().includes(search);
     },
+    getCategoriesList() {
+      return this.allCategories.map(category => ({
+        value: category.id,
+        text: category.name
+      }));
+    },
     isCurrent() {
       return this.current.category === this.index;
     },

client/src/models/annotations.js

@@ -8,5 +8,8 @@ export default {
   },
   delete(id) {
     return axios.delete(`${baseURL}${id}`);
+  },
+  update(id, newParams) {
+    return axios.put(`${baseURL}${id}`, newParams);
   }
 };

client/src/views/Annotator.vue

@@ -125,6 +125,7 @@
             :simplify="simplify"
             :categorysearch="search"
             :category="category"
+            :all-categories="categories"
             :opacity="shapeOpacity"
             :hover="hover"
             :index="index"
@@ -202,7 +203,6 @@
         <span aria-hidden="true">&times;</span>
       </button>
     </div>
-
   </div>
 </template>
 
@@ -730,20 +730,23 @@ export default {
         category.showAnnotations = false;
       });
     },
-
-    addAnnotation(category, segments, keypoints) {
+    findCategoryByName(categoryName) {
+      let categoryComponent = this.$refs.category.find(
+        category =>
+          category.category.name.toLowerCase() === categoryName.toLowerCase()
+      );
+      if (!categoryComponent) return null;
+      return categoryComponent.category;
+    },
+    addAnnotation(categoryName, segments, keypoints) {
       segments = segments || [];
       keypoints = keypoints || [];
 
       if (keypoints.length == 0 && segments.length == 0) return;
 
-      category = this.$refs.category.find(
-        c => c.category.name.toLowerCase() === category.toLowerCase()
-      );
+      let category = this.findCategoryByName(categoryName);
       if (category == null) return;
 
-      category = category.category;
-
       Annotations.create({
         image_id: this.image.id,
         category_id: category.id,
@@ -755,6 +758,29 @@ export default {
       });
     },
 
+    updateAnnotationCategory(annotation, oldCategory, newCategoryName) {
+      const newCategory = this.findCategoryByName(newCategoryName);
+      if (!newCategory || !annotation) return;
+
+      Annotations.update(annotation.id, { category_id: newCategory.id }).then(
+        response => {
+          let newAnnotation = {
+            ...response.data,
+            ...annotation,
+            metadata: response.data.metadata,
+            category_id: newCategory.id
+          };
+
+          if (newAnnotation) {
+            oldCategory.annotations = oldCategory.annotations.filter(
+              a => a.id !== annotation.id
+            );
+            newCategory.annotations.push(newAnnotation);
+          }
+        }
+      );
+    },
+
     removeFromAnnotatingList() {
       if (this.user == null) return;