added close button to the info box. bounding boxes now have a pointer as cursor.

webui/src/App.vue

@@ -148,3 +148,11 @@ export default {
   border-bottom: 1px solid rgba(0, 0, 0, 0.2);
 }
 </style>
+
+<style>
+
+.btn {
+  cursor: pointer;
+}
+
+</style>

webui/src/assets/icons/cross.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns="http://www.w3.org/2000/svg"
+   viewBox="0 0 16 16"
+   width="16"
+   height="16">
+  <path
+     d="M 13.675781 1.0898438 C 13.486976 1.0809964 13.287965 1.1509288 13.111328 1.3339844 L 7.7519531 6.6914062 L 2.390625 1.3300781 C 1.6712043 0.61050136 0.59785585 1.684079 1.3300781 2.390625 L 6.6914062 7.7519531 L 1.3320312 13.111328 C 0.60047528 13.818564 1.6860321 14.904097 2.3925781 14.171875 L 7.7519531 8.8125 L 13.109375 14.169922 C 13.816611 14.901478 14.902144 13.815921 14.169922 13.109375 L 8.8125 7.7519531 L 14.171875 2.3945312 C 14.711557 1.8549657 14.242196 1.1163858 13.675781 1.0898438 z "/>
+</svg>

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

@@ -57,6 +57,7 @@
                      :width="300"
                      :margin="10"
                      :labels="labels"
+                     @closed="infoBoxClosed"
                      />
     </template>
   </div>
@@ -199,6 +200,11 @@ export default {
         this.$refs.info.show(event);
     },
 
+    infoBoxClosed: function() {
+      this.interaction = false;
+      this.$refs.overlay.deselectAllBoxes()
+    },
+
     resize: function () {
       const rect = this.$refs.root.getBoundingClientRect();
 

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="annotation-box"
+  <div class="annotation-box btn"
        :style="style"
        :class="{draggable: draggable, shine: shine}"
        @mousedown.prevent="click" @touchstart.prevent="click">

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

@@ -1,12 +1,17 @@
 <template>
     <div v-if="visible" class="cropped-image">
-        <div class="image-container" :style="style">
-          <div v-if="box">
-            <h3>{{labelName}}</h3>
-            <img :src="src" ref="crop" alt="crop" />
-          </div>
-          <div v-else>Select a crop to show</div>
+      <div id="close_btn" class="btn"
+        @mousedown.prevent="close"
+        @touchstart.prevent="close">
+        <img alt="close button" src="@/assets/icons/cross.svg">
+      </div>
+      <div class="image-container" :style="style">
+        <div v-if="box">
+          <h3>{{labelName}}</h3>
+          <img :src="src" ref="crop" alt="crop" />
         </div>
+        <div v-else>Select a crop to show</div>
+      </div>
     </div>
 
 
@@ -81,6 +86,11 @@
             show: function (box_element) {
               this.box = box_element.box;
             },
+
+            close: function() {
+              this.set_visible(false);
+              this.$emit("closed");
+            }
         },
     }
 </script>
@@ -105,4 +115,11 @@
   border-style: solid;
 }
 
+#close_btn {
+  justify-content: right;
+  text-align: right;
+
+  margin:  5px;
+}
+
 </style>

webui/src/components/media/options-bar.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="options-bar">
     <div ref="draw_box"
-         class="image"
+         class="image btn"
          title="draw bounding box (Q)"
          :class="{active: interaction === 'draw-box'}"
          @click="$emit('interaction', 'draw-box')">
@@ -9,7 +9,7 @@
     </div>
 
     <div ref="extreme_clicking"
-         class="image"
+         class="image btn"
          title="extreme clicking (E)"
          :class="{active: interaction === 'extreme-clicking'}"
          @click="$emit('interaction', interaction === 'extreme-clicking' ? 'draw-box' : 'extreme-clicking')">
@@ -22,7 +22,7 @@
     <div class="spacer"/>
 
     <div ref="move_box"
-         class="image"
+         class="image btn"
          title="move and resize bounding box (R)"
          :class="{active: interaction === 'move-box'}"
          @click="$emit('interaction', 'move-box')">
@@ -31,7 +31,7 @@
 
     <div v-if="labelsEnabled"
          ref="labels"
-         class="image"
+         class="image btn"
          title="label bounding box (T)"
          :class="{active: interaction === 'label-box'}"
          @click="labelSelector=true">
@@ -44,7 +44,7 @@
                     @label="$emit('interaction', 'label-box'); $emit('label', $event)"/>
 
     <div ref="confirm_box"
-         class="image"
+         class="image btn"
          title="confirm bounding box (G)"
          :class="{active: interaction === 'confirm-box'}"
          @click="$emit('interaction', 'confirm-box')">
@@ -52,7 +52,7 @@
     </div>
 
     <div ref="remove_box"
-         class="image"
+         class="image btn"
          title="remove bounding box (F)"
          :class="{active: interaction === 'remove-box'}"
          @click="$emit('interaction', 'remove-box')">
@@ -62,7 +62,7 @@
     <div class="spacer"/>
 
     <div ref="crop_info"
-         class="image"
+         class="image btn"
          title="Show info of a bounding box (I)"
          :class="{active: interaction === 'info-box'}"
          @click="$emit('infoBox')">
@@ -70,7 +70,7 @@
     </div>
 
     <div ref="zoom_annotation"
-         class="image"
+         class="image btn"
          title="zoom bounding box (X)"
          :class="{active: interaction === 'zoom-box' || zoomBox}"
          @click="$emit(zoomBox ? 'unzoom' : 'interaction', 'zoom-box')">
@@ -78,14 +78,14 @@
     </div>
 
     <div ref="zoom_prev_annotation"
-         class="image"
+         class="image btn"
          title="zoom previous bounding box (C)"
          @click="$emit('prevzoom', true)">
       <img alt="zoom previous bounding box" src="@/assets/icons/chevron-left.svg">
     </div>
 
     <div ref="zoom_next_annotation"
-         class="image"
+         class="image btn"
          title="zoom next bounding box (V)"
          @click="$emit('nextzoom', true)">
       <img alt="zoom next bounding box" src="@/assets/icons/chevron-right.svg">
@@ -94,7 +94,7 @@
     <div class="spacer"/>
 
     <div ref="show_user_annotations"
-         class="image"
+         class="image btn"
          title="show user annotations"
          :class="{active: filter && filter.includes('user')}"
          @click="invertFilter('user')">
@@ -102,7 +102,7 @@
     </div>
 
     <div ref="show_pipeline_annotations"
-         class="image"
+         class="image btn"
          title="show pipeline annotations"
          :class="{active: filter && filter.includes('pipeline')}"
          @click="invertFilter('pipeline')">
@@ -112,7 +112,7 @@
     <div class="spacer"/>
 
     <div ref="create_predictions"
-         class="image"
+         class="image btn"
          title="create predictions (B)"
          :class="{active: isPredictionRunning}"
          @click="predict">
@@ -276,7 +276,7 @@ export default {
   justify-content: center;
   align-items: center;
 
-  cursor: pointer;
+  /*cursor: pointer;*/
 
   margin: 0.4rem;
   border: 1px solid whitesmoke;