added mode tool tip

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

@@ -18,6 +18,7 @@
 
       <div class="media">
         <h3>{{current.path}}</h3>
+        <div class="mode-tooltip">{{modeTooltip()}}</div>
 
         <!-- image -->
         <img v-if="current.type === 'image'"
@@ -187,6 +188,39 @@ export default {
     }
   },
   methods: {
+
+    modeTooltip: function(){
+      let tip = "Selected mode";
+      switch (this.interaction) {
+        case "draw-box":
+          return `${tip}: draw bounding-box`;
+
+        case "estimate-box":
+          return `${tip}: estimate bounding-box`;
+
+        case "extreme-clicking":
+          return `${tip}: extreme clicking`;
+
+        case "move-box":
+          return `${tip}: move or resize bounding-box`;
+
+        case "label-box":
+          return `${tip}: label bounding-box as "${this.label.name}"`;
+
+        case "confirm-box":
+          return `${tip}: confirm bounding-box`;
+
+        case "remove-box":
+          return `${tip}: remove bounding-box`;
+
+        case "info-box":
+          return `${tip}: bounding-box info`;
+
+        default:
+          return "";
+      }
+    },
+
     resize: function () {
       const rect = this.$refs.root.getBoundingClientRect();
 
@@ -374,4 +408,11 @@ h3 {
   max-height: 5%;
   margin: 0.5em;
 }
+
+.mode-tooltip {
+  max-width: 100%;
+  max-height: 5%;
+  margin: 0.5em;
+}
+
 </style>