implemented selection highlighting of the bounding boxes in the info mode

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

@@ -185,8 +185,14 @@ export default {
   methods: {
 
     toggleInfoBox: function() {
-        this.$refs.info.toggle();
-        this.interaction = this.$refs.info.visible ? 'info-box' : false;
+      let infoBox = this.$refs.info;
+      infoBox.toggle();
+      if (infoBox.visible)
+        this.interaction = "info-box";
+      else {
+        this.interaction = false;
+        this.$refs.overlay.deselectAllBoxes()
+      }
     },
 
     selectCrop: function(event) {

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

@@ -35,6 +35,11 @@ export default {
     'labels',
     'shine'
   ],
+  data: function() {
+    return {
+      selected: false
+    }
+  },
   computed: {
     labelName: function () {
       if (!this.box || !this.box.label_id)
@@ -61,9 +66,16 @@ export default {
         }
       }
 
+      let bgAlpha = 0.6;
+      let borderAlpha = 0.8;
+      if (!this.selected) {
+        bgAlpha *= 0.5;
+        borderAlpha *= 0.5;
+      }
+
       return {
-        backgroundColor: `rgba(${color}, 0.3)`,
-        borderColor: `rgba(${color}, 0.4)`,
+        backgroundColor: `rgba(${color}, ${bgAlpha})`,
+        borderColor: `rgba(${color}, ${borderAlpha})`,
         top: this.position.y * 100 + '%',
         left: this.position.x * 100 + '%',
         width: this.position.w * 100 + '%',
@@ -103,6 +115,7 @@ export default {
       }
       if (this.croppable) {
         this.$emit('crop', this);
+        this.selected = true;
         event.stopPropagation();
       }
     },

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

@@ -6,6 +6,7 @@
 
     <annotation-box v-for="(box, index) in boundingBoxes"
                     v-bind:key="box.id"
+                    ref="box"
                     :box="box"
                     :position="box.data"
                     :draggable="interaction === 'move-box'"
@@ -41,7 +42,18 @@ import AnnotationBox from "@/components/media/annotation-box";
 export default {
   name: "annotation-overlay",
   components: {AnnotationBox},
-  props: ['file', 'position', 'size', 'interaction', 'filter', 'label', 'video', 'results', 'labels', 'zoom'],
+  props: [
+    'file',
+    'position',
+    'size',
+    'interaction',
+    'filter',
+    'label',
+    'video',
+    'results',
+    'labels',
+    'zoom'
+  ],
   data: function () {
     return {
       callback: false,
@@ -258,7 +270,17 @@ export default {
       }
     },
     crop: function (box) {
-        this.$emit('crop', box);
+      this.deselectAllBoxes();
+      if (box == undefined)
+        return;
+
+      this.$emit('crop', box);
+    },
+
+    deselectAllBoxes: function(){
+      this.$refs.box.forEach( child => {
+        child.selected = false;
+      })
     },
 
     zoomBox: function (index) {

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

@@ -66,10 +66,16 @@
 
         methods: {
             toggle: function () {
-                this.visible = !this.visible;
+              this.set_visible(!this.visible);
+            },
+
+            set_visible: function (visible) {
+              this.visible = visible;
+
+              if (!visible)
+                this.box = null;
 
-                if (!this.visible)
-                  this.box = null;
+              this.$emit("visibility-change", visible);
             },
 
             show: function (box_element) {