Add delete functionality for image annotations in question detail view

anatomy/templates/anatomy/question_detail.html

@@ -16,13 +16,21 @@
                             <div class="small">If important markers or arrows are not burned onto the image, please add annotations using the image annotation tool and click <em>Save Annotations</em>. Please note not all questions required image annotations in which case you can ignore this message.</div>
                         </div>
                     {% endif %}
-                    <div class="mt-3 d-flex justify-content-between align-items-start">
+                    <div class="mt-3 align-items-start">
-                        <details class="mb-0 flex-grow-1 me-2">
+                        <div class="col" style="min-width:0;">
-                            <summary class="small text-muted"><i class="bi bi-info-circle"></i> Image annotation help</summary>
+                            <details class="mb-0">
-                            <div class="small text-muted mt-2">Annotate the image using the right mouse button to click and drag an arrow. To remove an arrow drag it out of the image boundaries. Click <strong>Save Annotations</strong> to persist. If required use the middle button to zoom and the left button to pan.</div>
+                                <summary class="small text-muted"><i class="bi bi-info-circle"></i> Image annotation help</summary>
-                        </details>
+                                <div class="small text-muted mt-2">Annotate the image using the right mouse button to click and drag an arrow. To remove an arrow drag it out of the image boundaries. Click <strong>Save Annotations</strong> to persist. If required use the middle button to zoom and the left button to pan.</div>
-
+                            </details>
-                        <button id="save-annotations" class="btn btn-sm btn-primary">Save Annotations</button>
+                        </div>
+                        <div class="col-auto">
+                            <div class="d-flex gap-2">
+                                <button id="save-annotations" class="btn btn-sm btn-primary">Save Annotations</button>
+                                {% if can_edit %}
+                                    <button id="delete-annotations" class="btn btn-sm btn-outline-danger">Delete Annotations</button>
+                                {% endif %}
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -211,6 +219,29 @@
                         console.log('[Done]');
                     })
             })
+            $("#delete-annotations").click(function () {
+                if (!confirm('Clear saved annotations for this question? This cannot be undone.')) return;
+                $.ajax({
+                    url: "{% url 'anatomy:question_clear_annotation' pk=question.pk %}",
+                    data: {
+                        csrfmiddlewaretoken: "{{ csrf_token }}",
+                    },
+                    type: "POST",
+                    dataType: "json",
+                })
+                    .done(function (data) {
+                        if (data.status == "success") {
+                            toastr.info('Annotations cleared');
+                                // Optionally reload part of the page or remove the annotation overlay
+                            location.reload();
+                        } else {
+                            toastr.warning('Error clearing annotations');
+                        }
+                    })
+                    .fail(function () {
+                        toastr.warning('Error clearing annotations');
+                    });
+            });
         });
 
 

anatomy/urls.py

@@ -33,6 +33,11 @@ urlpatterns = [
         views.question_save_annotation,
         name="question_save_annotation",
     ),
+    path(
+        "question/<int:pk>/clear_annotation",
+        views.question_clear_annotation,
+        name="question_clear_annotation",
+    ),
     path(
         "question/<int:pk>/suggest_incorrect_answers",
         views.question_suggest_incorrect_answers,

anatomy/views.py

@@ -1504,6 +1504,17 @@ def question_save_annotation(request, pk):
         return JsonResponse(data, status=400)
 
 
+@user_is_author_or_anatomy_checker
+def question_clear_annotation(request, pk):
+    """Clear the stored image annotations for a question."""
+    if request.method == "POST":
+        question = get_object_or_404(AnatomyQuestion, pk=pk)
+        question.image_annotations = ""
+        question.save(update_fields=["image_annotations"])
+        return JsonResponse({"status": "success"}, status=200)
+    return JsonResponse({"status": "error"}, status=400)
+
+
 GenericExamViews = ExamViews(
     Exam, AnatomyQuestion, Answer, UserAnswer, "anatomy", "anatomy"
 )