Bug fix + improvements (#137)

* Added button to delete an annotation * Refactored modals into separate files * Moved annotationbar style to css file * Linked existing states to time in video * Fixed minor bug related to handler * Removed unnecessary spaces * Bug fix for empty dropdowns
antingshen · Feb 14, 2018 · 117f912 · 117f912
1 parent e122fda
commit 117f912
Show file tree

Hide file tree

Showing 9 changed files with 122 additions and 51 deletions.
diff --git a/annotator/static/annotation.js b/annotator/static/annotation.js
@@ -143,8 +143,14 @@ class Annotation {
 
         if (state)
             frame.state = state;
-        else if (frame.state === undefined)
-            frame.state = document.querySelector('#states option:checked').value;
+        else if (frame.state === undefined){
+            var statesDropdown = document.querySelector('#states option:checked');
+
+            if (statesDropdown != null)
+                frame.state = statesDropdown.value;
+            else
+                frame.state = "";
+        }
 
         // Update the closestIndex-th frame
         if (closestIndex != null) {

diff --git a/annotator/static/app.css b/annotator/static/app.css
@@ -174,6 +174,17 @@ div.imgplay {
     opacity: 0;
 }
 
+.list-group-item {
+    cursor: pointer;
+}
+
+.control-edit-label, .control-delete-annotation, .control-edit-state {
+    float: right;
+}
+
+.control-delete-annotation {
+    padding-right: 10px;
+}
 
 /* Uncategorized rules below */
 

diff --git a/annotator/static/player.js b/annotator/static/player.js
@@ -258,7 +258,16 @@ class Player {
                 $(this).triggerHandler('change-keyframes');
                 $('#edit-state-modal').modal('toggle');
             });
-
+
+            // Delete Annotation
+
+            $('#delete-annotation').on('click', (e) => {
+                var annotation = $(e.currentTarget).data('annotation');
+                this.deleteAnnotation(annotation);
+                $(this).triggerHandler('change-onscreen-annotations');
+                $(this).triggerHandler('change-keyframes');
+                $('#delete-annotation-modal').modal('toggle');
+            });
         });
     }
 

diff --git a/annotator/static/views/annotationbar.js b/annotator/static/views/annotationbar.js
@@ -78,18 +78,28 @@ class Annotationbar {
             + '</div>'
             + '</div>');
 
-        var editType = $("<span class='control-edit-label glyphicon glyphicon-edit' style='float: right;' \
+        var editLabel = $("<span class='control-edit-label glyphicon glyphicon-edit' \
                         role='button' class='btn' data-toggle='modal' data-target='#edit-label-modal'></span>")
                         .click(() => { $(this).triggerHandler('control-edit-label', {"annotation": annotation}); });
 
-        $(html).find('h4').append(editType);
+        var deleteAnnotation = $("<span class='control-delete-annotation glyphicon glyphicon-trash' \
+                        role='button' class='btn' data-toggle='modal' data-target='#delete-annotation-modal'></span>")
+                        .click(() => { $(this).triggerHandler('control-delete-annotation', {"annotation": annotation}); });
+
+        $(html).find('h4').append(editLabel);
+        $(html).find('h4').append(deleteAnnotation);
 
         var keyframesList = $(html).find("ul");
+
         for (let keyframe of annotation.keyframes) {
-            var editState = $("<span class='glyphicon glyphicon-edit' style='float: right;' \
+            var editState = $("<span class='control-edit-state glyphicon glyphicon-edit' \
                         role='button' class='btn' data-toggle='modal' data-target='#edit-state-modal'></span>")
                         .click(() => { $(this).triggerHandler('control-edit-state', {"annotation": annotation, "keyframe": keyframe}); });
-            $(keyframesList).append("<li class='list-group-item'>" + keyframe.time + ": " + keyframe.state + "</li>") 
+
+            var link = $("<li class='list-group-item'><a>" + keyframe.time + ": " + keyframe.state + "</a></li>");
+            $(link).find('a').click(() => { $(this).triggerHandler('jump-to-time', keyframe.time); });
+
+            $(keyframesList).append(link);
             $(keyframesList).find("li:last").append(editState);
         }
 

diff --git a/annotator/static/views/player.js b/annotator/static/views/player.js
@@ -229,11 +229,15 @@ class PlayerView {
 
             // keyframebar => video
             $(this.keyframebar).on('jump-to-time', (e, time) => this.jumpToTimeAndPause(time));
+            $(this.annotationbar).on('jump-to-time', (e, time) => this.jumpToTimeAndPause(time));
 
             // edit annotation
             $(this.annotationbar).on('control-edit-label', (e, data) => this.loadEditLabelModal(data));
             $(this.annotationbar).on('control-edit-state', (e, data) => this.loadEditStateModal(data));
-
+
+            // delete annotation
+            $(this.annotationbar).on('control-delete-annotation', (e, data) => this.loadDeleteAnnotationModal(data));
+
             // controls => video
             this.$on('control-play-pause', 'click', (event) => {this.playPause()});
             this.$on('control-step-backward', 'click', (event) => {this.video.previousFrame()});
@@ -322,6 +326,11 @@ class PlayerView {
         $('#edit-state-modal').find('#change-state').data("keyframe", keyframe);
     }
 
+    loadDeleteAnnotationModal(data) {
+        var annotation = data.annotation;
+        $('#delete-annotation-modal').find('#delete-annotation').data("annotation", annotation);
+    }
+
     // Time control
     stepforward() {
         $(this).trigger('step-forward-keyframe');

diff --git a/annotator/templates/modals/delete_annotation_modal.html b/annotator/templates/modals/delete_annotation_modal.html
@@ -0,0 +1,18 @@
+<!-- Delete Annotaion Modal -->
+    <div class="modal fade" id="delete-annotation-modal" tabindex="-1" role="dialog" aria-labelledby="label" aria-hidden="true">
+      <div class="modal-dialog">
+        <div class="modal-content">
+          <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+            <h4 class="modal-title" id="label">Delete Annotation</h4>
+          </div>
+          <div class="modal-body">
+            <p>Are you sure you want to delete this annotation?</p>
+          </div>
+          <div class="modal-footer">
+            <a href="#" class="btn" data-dismiss="modal">Cancel</a>
+            <a href="#" class="btn btn-primary" id="delete-annotation">Delete</a>
+          </div>
+        </div>
+      </div>
+    </div>
diff --git a/annotator/templates/modals/edit_label_modal.html b/annotator/templates/modals/edit_label_modal.html
@@ -0,0 +1,24 @@
+<!-- Edit Label Modal -->
+    <div class="modal fade" id="edit-label-modal" tabindex="-1" role="dialog" aria-labelledby="label" aria-hidden="true">
+      <div class="modal-dialog">
+        <div class="modal-content">
+          <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+            <h4 class="modal-title" id="label">Edit Annotation Label</h4>
+          </div>
+          <div class="modal-body">
+            <select name="edit-label" id="edit-label">
+              {% for label in label_data %}
+              <option style="background-color: #{{label.color}}" value="{{label.name}}">
+                {{label.name}}
+              </option>
+              {% endfor %}
+            </select>
+          </div>
+          <div class="modal-footer">
+            <a href="#" class="btn" data-dismiss="modal">Cancel</a>
+            <a href="#" class="btn btn-primary" id="change-label">Change Label</a>
+          </div>
+        </div>
+      </div>
+    </div>
diff --git a/annotator/templates/modals/edit_state_modal.html b/annotator/templates/modals/edit_state_modal.html
@@ -0,0 +1,19 @@
+<!-- Edit State Modal -->
+    <div class="modal fade" id="edit-state-modal" tabindex="-1" role="dialog" aria-labelledby="state" aria-hidden="true">
+      <div class="modal-dialog">
+        <div class="modal-content">
+          <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+            <h4 class="modal-title" id="state">Edit Keyframe State</h4>
+          </div>
+          <div class="modal-body">
+            <p id="annotation-label"> </p>
+            <select name="edit-state" id="edit-state"> </select>
+          </div>
+          <div class="modal-footer">
+            <a href="#" class="btn" data-dismiss="modal">Cancel</a>
+            <a href="#" class="btn btn-primary" id="change-state">Change State</a>
+          </div>
+        </div>
+      </div>
+    </div>
diff --git a/annotator/templates/video.html b/annotator/templates/video.html
@@ -47,11 +47,15 @@
         alert("Error initializing XMLHttpRequest!");
 
     function getStates() {
+      var labelsDropdown = document.getElementById("labels");
+
+      if (labelsDropdown != null) {
         var labelName = document.getElementById("labels").value;
         var url = "/get_states?label_name=" + escape(labelName);
         request.open("GET", url, true);
         request.onreadystatechange = updatePage;
         request.send(null);
+      }       
     }
 
     // what to do when http ready state changes
@@ -201,50 +205,11 @@ <h2>Preview Mode: Please accept HIT before working</h2>
     <div class="player-annotationbar col-md-3 panel-group" id="accordion" style="padding-right: 30px; overflow-y: scroll; height: 100%;">
     </div>
 
-    <!-- Edit Label Modal -->
-    <div class="modal fade" id="edit-label-modal" tabindex="-1" role="dialog" aria-labelledby="label" aria-hidden="true">
-      <div class="modal-dialog">
-        <div class="modal-content">
-          <div class="modal-header">
-            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-            <h4 class="modal-title" id="label">Edit Annotation Label</h4>
-          </div>
-          <div class="modal-body">
-            <select name="edit-label" id="edit-label">
-              {% for label in label_data %}
-              <option style="background-color: #{{label.color}}" value="{{label.name}}">
-                {{label.name}}
-              </option>
-              {% endfor %}
-            </select>
-          </div>
-          <div class="modal-footer">
-            <a href="#" class="btn" data-dismiss="modal">Cancel</a>
-            <a href="#" class="btn btn-primary" id="change-label">Change Label</a>
-          </div>
-        </div>
-      </div>
-    </div>
 
-    <!-- Edit State Modal -->
-    <div class="modal fade" id="edit-state-modal" tabindex="-1" role="dialog" aria-labelledby="state" aria-hidden="true">
-      <div class="modal-dialog">
-        <div class="modal-content">
-          <div class="modal-header">
-            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-            <h4 class="modal-title" id="state">Edit Keyframe State</h4>
-          </div>
-          <div class="modal-body">
-            <p id="annotation-label"> </p>
-            <select name="edit-state" id="edit-state"> </select>
-          </div>
-          <div class="modal-footer">
-            <a href="#" class="btn" data-dismiss="modal">Cancel</a>
-            <a href="#" class="btn btn-primary" id="change-state">Change State</a>
-          </div>
-        </div>
-      </div>
-    </div>
+{% include "modals/edit_label_modal.html" %}   
+{% include "modals/edit_state_modal.html" %}   
+
+{% include "modals/delete_annotation_modal.html" %}   
 
 {% include "modals/generic_modal.html" %}
 {% include "modals/instructions.html" %}