moved all POST requests to the annotated image component

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

@@ -61,9 +61,12 @@
                             :crop="infoBox"
                             @labelSelector="openLabelSelector($event)"
                             @labelBox="labelBox"
-                            @removeBox="removeBox"
-                            @confirmBox="confirmBox"
+                            @newBox="newBox"
+                            @labelImage="labelImage"
+                            @remove="remove"
+                            @confirm="confirm"
                             @updateBox="updateBox"
+                            @estimateBox="estimateBox"
                             @crop="infoBox = $event"
                             :zoom="zoomBox"
                             @zoom="zoomBox = $event"/>
@@ -250,19 +253,38 @@ export default {
       this.$root.socket.post(`/results/${box_id}/label`,
         {label: label_id});
     },
-    removeBox: function(box_id,) {
-      this.$root.socket.post(`/results/${box_id}/remove`,
-        {remove: true});
+
+    newBox: function(file_id, data) {
+      this.$root.socket.post(`/data/${file_id}/results`,
+        {type: 'bounding-box', data: data});
     },
-    confirmBox: function(box_id) {
-      this.$root.socket.post(`/results/${box_id}/confirm`,
-        {confirm: true});
+
+    labelImage: function(file_id, label_id) {
+      this.$root.socket.post(`/data/${file_id}/results`,
+        {type: 'labeled-image', label: label_id});
     },
+
     updateBox: function(box_id, data) {
       this.$root.socket.post(`/results/${box_id}/data`,
         {data: data});
     },
 
+    estimateBox: function(file_id, coordinates) {
+      this.$root.socket.post(`/data/${file_id}/estimate`, coordinates);
+    },
+
+    // confirm either a bbox or image result
+    confirm: function(res_id) {
+      this.$root.socket.post(`/results/${res_id}/confirm`,
+        {confirm: true});
+    },
+    // remove either a bbox or image result
+    remove: function(res_id,) {
+      this.$root.socket.post(`/results/${res_id}/remove`,
+        {remove: true});
+    },
+
+
     modeTooltip: function(){
       let tip = "Current mode";
       switch (this.interaction) {

webui/src/components/media/annotation-box.vue

@@ -126,7 +126,7 @@ export default {
 
       if (this.deletable) {
         // TODO then / error
-        this.$emit("removeBox", this.box.identifier)
+        this.$emit("remove", this.box.identifier)
       }
       else if (this.draggable) {
         // TODO then / error
@@ -139,7 +139,7 @@ export default {
       }
       else if (this.confirmable) {
         // TODO then / error
-        this.$emit("confirmBox", this.box.identifier)
+        this.$emit("confirm", this.box.identifier)
       }
       else if (this.zoomable) {
         this.$emit('zoom', this.position);

webui/src/components/media/annotation-overlay.vue

@@ -28,8 +28,8 @@
                     @interaction="$emit('interaction', $event)"
                     @labelSelector="$emit('labelSelector', $event)"
                     @labelBox="labelBox"
-                    @removeBox="removeBox"
-                    @confirmBox="confirmBox"
+                    @remove="$emit('remove', $event)"
+                    @confirm="$emit('confirm', $event)"
                     @updateBox="updateBox"
                     @zoom="zoomBox(index, $event)"/>
 
@@ -173,24 +173,19 @@ export default {
         }
       }
       if (this.interaction === 'label-box') {
-        this.$root.socket.post(`/data/${this.file.identifier}/results`, {
-          type: 'labeled-image',
-          label: this.label.identifier
-        });
+        this.$emit("labelImage",
+          this.file.identifier,
+          this.label.identifier)
       }
       if (this.interaction === 'confirm-box') {
-        if (this.imageLabelResult) {
-          this.$root.socket.post(`/results/${this.imageLabelResult.identifier}/confirm`, {
-            confirm: true
-          });
-        }
+        if (this.imageLabelResult)
+          this.$emit("confirmImage", this.imageLabelResult.identifier);
+
       }
       if (this.interaction === 'remove-box') {
-        if (this.imageLabelResult) {
-          this.$root.socket.post(`/results/${this.imageLabelResult.identifier}/remove`, {
-            remove: true
-          });
-        }
+        if (this.imageLabelResult)
+          this.$emit("remove", this.imageLabelResult.identifier);
+
       }
     },
     track: function (event) {
@@ -216,7 +211,7 @@ export default {
 
       if (this.interaction === 'estimate-box'){
         const coordinates = this.getEventCoordinates(event);
-        this.$root.socket.post(`/data/${this.file.identifier}/estimate`, coordinates);
+        this.$emit("estimateBox", this.file.identifier, coordinates);
         return;
       }
 
@@ -226,10 +221,7 @@ export default {
           this.callback(this.current);
         else
             // TODO then / error
-          this.$root.socket.post(`/data/${this.file.identifier}/results`, {
-            type: 'bounding-box',
-            data: this.current
-          });
+          this.$emit("newBox", this.file.identifier, this.current);
       }
 
       this.callback = false;
@@ -306,21 +298,19 @@ export default {
       this.zoomed = index;
       this.$emit('zoom', this.boundingBoxes[index].data);
     },
+
     prevZoom: function () {
       this.zoomBox(this.zoomed - 1);
     },
+
     nextZoom: function () {
       this.zoomBox(this.zoomed + 1);
     },
+
     labelBox: function (box_id, label_id) {
       this.$emit('labelBox', box_id, label_id);
     },
-    removeBox: function (box_id) {
-      this.$emit('removeBox', box_id);
-    },
-    confirmBox: function (box_id) {
-      this.$emit('confirmBox', box_id);
-    },
+
     updateBox: function (box_id, data) {
       this.$emit('updateBox', box_id, data);
     },