From 786785e650eda2ad7c8ccd20731d621eb05085e8 Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Fri, 13 Mar 2026 11:32:52 -0400
Subject: [PATCH 1/4] allow deletion of blank species annotation, persistent
 clearing of species

---
 bats_ai/core/views/recording_annotation.py    | 13 +++++++-----
 .../components/RecordingAnnotationEditor.vue  | 13 ++++++------
 client/src/components/SingleSpecieEditor.vue  | 20 ++++++++++++++++++-
 client/src/components/SpeciesEditor.vue       | 13 ++++++++++--
 4 files changed, 44 insertions(+), 15 deletions(-)

diff --git a/bats_ai/core/views/recording_annotation.py b/bats_ai/core/views/recording_annotation.py
index 3f6e9fa3..5be4e47f 100644
--- a/bats_ai/core/views/recording_annotation.py
+++ b/bats_ai/core/views/recording_annotation.py
@@ -206,17 +206,20 @@ def delete_recording_annotation(request: HttpRequest, pk: int):
         vetting_enabled = (
             configuration.mark_annotations_completed_enabled if configuration else False
         )
-        if vetting_enabled and not request.user.is_staff:
-            raise HttpError(
-                403, "Permission denied. Annotations cannot be deleted while vetting is enabled"
-            )
-
         annotation = RecordingAnnotation.objects.get(pk=pk)
 
         # Check permission: only the annotation owner may delete their own
         if annotation.owner != request.user:
             raise HttpError(403, "Permission denied.")
 
+        # In vetting mode, non-staff may only delete blank annotations (no species)
+        if vetting_enabled and not request.user.is_staff and annotation.species.exists():
+            raise HttpError(
+                403,
+                "Permission denied. Only blank annotations can be deleted "
+                "while vetting is enabled.",
+            )
+
         annotation.delete()
         return "Recording annotation deleted successfully."
     except RecordingAnnotation.DoesNotExist as e:
diff --git a/client/src/components/RecordingAnnotationEditor.vue b/client/src/components/RecordingAnnotationEditor.vue
index 7f0b359c..e7cc5d91 100644
--- a/client/src/components/RecordingAnnotationEditor.vue
+++ b/client/src/components/RecordingAnnotationEditor.vue
@@ -170,13 +170,11 @@ export default defineComponent({
     });
 
     const deleteEnabled = computed(() => {
-      return (
-        props.type !== 'nabat'
-        && (
-          configuration.value.is_admin
-          || !configuration.value.mark_annotations_completed_enabled
-        )
-      );
+      if (props.type === 'nabat') return false;
+      if (configuration.value.is_admin) return true;
+      if (!configuration.value.mark_annotations_completed_enabled) return true;
+      // In vetting mode, non-admins may only delete blank annotations
+      return speciesEdit.value.length === 0;
     });
 
     return {
@@ -267,6 +265,7 @@ export default defineComponent({
           :species-list="species"
           :disabled="annotation?.submitted || updatingAnnotation || deletingAnnotation"
           @update:model-value="onSpeciesModelValue"
+          @delete-blank-annotation="deleteAnnotation"
         />
       </v-row>
       <v-row v-if="type === 'nabat'">
diff --git a/client/src/components/SingleSpecieEditor.vue b/client/src/components/SingleSpecieEditor.vue
index 321a29ad..529dd35e 100644
--- a/client/src/components/SingleSpecieEditor.vue
+++ b/client/src/components/SingleSpecieEditor.vue
@@ -99,6 +99,14 @@ export default defineComponent({
     onMounted(() => window.addEventListener("keydown", speciesShortcut));
     onUnmounted(() => window.removeEventListener("keydown", speciesShortcut));
 
+    const onClearOrDeleteClick = () => {
+      if (selectedCode.value) {
+        selectedCode.value = null;
+      } else {
+        emit("delete");
+      }
+    };
+
     return {
       search,
       selectedCode,
@@ -106,6 +114,7 @@ export default defineComponent({
       customFilter,
       categoryColors,
       speciesAutocomplete,
+      onClearOrDeleteClick,
     };
   },
 });
@@ -129,7 +138,6 @@ export default defineComponent({
       item-value="species_code"
       :multiple="false"
       :custom-filter="customFilter"
-      clearable
       clear-on-select
       label="Select species"
       :menu-props="{ maxHeight: '300px', maxWidth: '400px' }"
@@ -138,6 +146,16 @@ export default defineComponent({
       density="compact"
       hide-details
     >
+      <template #append-inner>
+        <v-icon
+          size="small"
+          class="cursor-pointer"
+          :title="selectedCode ? 'Clear species' : 'Delete blank annotation'"
+          @click.stop="onClearOrDeleteClick"
+        >
+          mdi-close
+        </v-icon>
+      </template>
       <template #subheader="{ props: subProps }">
         <v-list-subheader
           class="font-weight-bold"
diff --git a/client/src/components/SpeciesEditor.vue b/client/src/components/SpeciesEditor.vue
index d927194a..ad497767 100644
--- a/client/src/components/SpeciesEditor.vue
+++ b/client/src/components/SpeciesEditor.vue
@@ -24,7 +24,7 @@ export default defineComponent({
       default: false,
     },
   },
-  emits: ["update:modelValue"],
+  emits: ["update:modelValue", "deleteBlankAnnotation"],
   setup(props, { emit }) {
     // Internal: one slot per row, at least one. Empty string = no selection in that slot.
     const localSpeciesList = ref<string[]>(
@@ -54,6 +54,14 @@ export default defineComponent({
       }
     }
 
+    function onSlotDelete(index: number) {
+      if (localSpeciesList.value.length <= 1 && (localSpeciesList.value[0] ?? "") === "") {
+        emit("deleteBlankAnnotation");
+      } else {
+        removeSpecies(index);
+      }
+    }
+
     function openAddSpeciesConfirm() {
       addSpeciesConfirmOpen.value = true;
     }
@@ -78,6 +86,7 @@ export default defineComponent({
     return {
       localSpeciesList,
       onSlotUpdate,
+      onSlotDelete,
       openAddSpeciesConfirm,
       closeAddSpeciesConfirm,
       confirmAddSpecies,
@@ -101,7 +110,7 @@ export default defineComponent({
         :disabled="disabled"
         :show-delete="localSpeciesList.length > 1"
         @update:model-value="onSlotUpdate(index, $event)"
-        @delete="removeSpecies(index)"
+        @delete="onSlotDelete(index)"
       />
     </div>
     <v-btn

From 9dc087247f8aeb2e4b111d40eefb4aa608deabff Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Fri, 13 Mar 2026 11:47:52 -0400
Subject: [PATCH 2/4] add comment button to vetting species

---
 .../components/RecordingAnnotationEditor.vue  |   9 ++
 client/src/components/SpeciesEditor.vue       | 130 +++++++++++++++---
 2 files changed, 122 insertions(+), 17 deletions(-)

diff --git a/client/src/components/RecordingAnnotationEditor.vue b/client/src/components/RecordingAnnotationEditor.vue
index e7cc5d91..63b7a989 100644
--- a/client/src/components/RecordingAnnotationEditor.vue
+++ b/client/src/components/RecordingAnnotationEditor.vue
@@ -113,6 +113,11 @@ export default defineComponent({
       updateAnnotation();
     };
 
+    const onSaveComment = (newComment: string) => {
+      comments.value = newComment;
+      updateAnnotation();
+    };
+
     const deleteAnnotation = async () => {
       if (props.annotation && props.recordingId) {
         deletingAnnotation.value = true;
@@ -186,6 +191,7 @@ export default defineComponent({
         comments,
         updateAnnotation,
         onSpeciesModelValue,
+        onSaveComment,
         deleteAnnotation,
         submitAnnotation,
         confirmSubmitAnnotation,
@@ -264,8 +270,11 @@ export default defineComponent({
           v-model="speciesEdit"
           :species-list="species"
           :disabled="annotation?.submitted || updatingAnnotation || deletingAnnotation"
+          :vetting-mode="configuration.mark_annotations_completed_enabled"
+          :annotation-comment="comments"
           @update:model-value="onSpeciesModelValue"
           @delete-blank-annotation="deleteAnnotation"
+          @save-comment="onSaveComment"
         />
       </v-row>
       <v-row v-if="type === 'nabat'">
diff --git a/client/src/components/SpeciesEditor.vue b/client/src/components/SpeciesEditor.vue
index ad497767..a622ccdf 100644
--- a/client/src/components/SpeciesEditor.vue
+++ b/client/src/components/SpeciesEditor.vue
@@ -23,14 +23,25 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    vettingMode: {
+      type: Boolean,
+      default: false,
+    },
+    annotationComment: {
+      type: String,
+      default: "",
+    },
+
   },
-  emits: ["update:modelValue", "deleteBlankAnnotation"],
+  emits: ["update:modelValue", "deleteBlankAnnotation", "saveComment"],
   setup(props, { emit }) {
     // Internal: one slot per row, at least one. Empty string = no selection in that slot.
     const localSpeciesList = ref<string[]>(
       props.modelValue?.length ? [...props.modelValue] : [""]
     );
     const addSpeciesConfirmOpen = ref(false);
+    const commentDialogOpen = ref(false);
+    const commentDraft = ref("");
 
     watch(
       () => props.modelValue,
@@ -83,6 +94,26 @@ export default defineComponent({
       emitValue();
     }
 
+    function openCommentDialog() {
+      commentDraft.value = props.annotationComment ?? "";
+      commentDialogOpen.value = true;
+    }
+
+    function closeCommentDialog() {
+      commentDialogOpen.value = false;
+    }
+
+    function saveComment() {
+      emit("saveComment", commentDraft.value);
+      closeCommentDialog();
+    }
+
+    function removeComment() {
+      commentDraft.value = "";
+      emit("saveComment", "");
+      closeCommentDialog();
+    }
+
     return {
       localSpeciesList,
       onSlotUpdate,
@@ -92,6 +123,12 @@ export default defineComponent({
       confirmAddSpecies,
       addSpeciesConfirmOpen,
       removeSpecies,
+      commentDialogOpen,
+      commentDraft,
+      openCommentDialog,
+      closeCommentDialog,
+      saveComment,
+      removeComment,
     };
   },
 });
@@ -113,22 +150,36 @@ export default defineComponent({
         @delete="onSlotDelete(index)"
       />
     </div>
-    <v-btn
-      v-tooltip="'Add another bat'"
-      size="small"
-      variant="outlined"
-      color="primary"
-      :disabled="disabled"
-      class="mt-1 mb-2"
-      @click="openAddSpeciesConfirm"
-    >
-      <v-icon start>
-        <v-icon>
-          mdi-plus
-        </v-icon>
-      </v-icon>
-      Add Bat
-    </v-btn>
+    <v-row dense class="mt-1 mb-2">
+      <v-col>
+      <v-btn
+        v-tooltip="'Add another bat'"
+        size="small"
+        variant="outlined"
+        color="primary"
+        :disabled="disabled"
+        @click="openAddSpeciesConfirm"
+      >
+        <v-icon start>mdi-plus</v-icon>
+        Add Bat
+      </v-btn>
+      </v-col>
+      <v-spacer />
+      <v-col>
+      <v-btn
+        v-if="vettingMode"
+        v-tooltip="annotationComment ? `Edit comment: ${annotationComment}` : 'Add optional comment to this annotation'"
+        size="small"
+        variant="outlined"
+        color="primary"
+        :disabled="disabled"
+        @click="openCommentDialog"
+      >
+        <v-icon start>{{ annotationComment ? 'mdi-pencil' : 'mdi-plus' }}</v-icon>
+        Comment
+      </v-btn>
+      </v-col>
+    </v-row>
     <v-dialog
       v-model="addSpeciesConfirmOpen"
       max-width="400"
@@ -157,6 +208,51 @@ export default defineComponent({
         </v-card-actions>
       </v-card>
     </v-dialog>
+    <v-dialog
+      v-model="commentDialogOpen"
+      max-width="500"
+      persistent
+    >
+      <v-card>
+        <v-card-title>Comment</v-card-title>
+        <v-card-text>
+          <p class="text-medium-emphasis mb-3">
+            This is an optional comment field that can be attached to the annotation.
+          </p>
+          <v-textarea
+            v-model="commentDraft"
+            label="Comment"
+            rows="4"
+            variant="outlined"
+            auto-grow
+          />
+        </v-card-text>
+        <v-card-actions>
+          <v-btn
+            v-if="commentDraft || annotationComment"
+            variant="text"
+            color="error"
+            @click="removeComment"
+          >
+            Remove comment
+          </v-btn>
+          <v-spacer />
+          <v-btn
+            variant="text"
+            @click="closeCommentDialog"
+          >
+            Cancel
+          </v-btn>
+          <v-btn
+            variant="flat"
+            color="primary"
+            @click="saveComment"
+          >
+            Save
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
   </div>
 </template>
 

From 23486183c2fda43dde1ad750c0e3ff4e1ab7bd38 Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Fri, 13 Mar 2026 11:51:38 -0400
Subject: [PATCH 3/4] formatting

---
 client/src/components/SpeciesEditor.vue | 55 ++++++++++++++-----------
 1 file changed, 31 insertions(+), 24 deletions(-)

diff --git a/client/src/components/SpeciesEditor.vue b/client/src/components/SpeciesEditor.vue
index a622ccdf..8447b21c 100644
--- a/client/src/components/SpeciesEditor.vue
+++ b/client/src/components/SpeciesEditor.vue
@@ -150,34 +150,41 @@ export default defineComponent({
         @delete="onSlotDelete(index)"
       />
     </div>
-    <v-row dense class="mt-1 mb-2">
+    <v-row
+      dense
+      class="mt-1 mb-2"
+    >
       <v-col>
-      <v-btn
-        v-tooltip="'Add another bat'"
-        size="small"
-        variant="outlined"
-        color="primary"
-        :disabled="disabled"
-        @click="openAddSpeciesConfirm"
-      >
-        <v-icon start>mdi-plus</v-icon>
-        Add Bat
-      </v-btn>
+        <v-btn
+          v-tooltip="'Add another bat'"
+          size="small"
+          variant="outlined"
+          color="primary"
+          :disabled="disabled"
+          @click="openAddSpeciesConfirm"
+        >
+          <v-icon start>
+            mdi-plus
+          </v-icon>
+          Add Bat
+        </v-btn>
       </v-col>
       <v-spacer />
       <v-col>
-      <v-btn
-        v-if="vettingMode"
-        v-tooltip="annotationComment ? `Edit comment: ${annotationComment}` : 'Add optional comment to this annotation'"
-        size="small"
-        variant="outlined"
-        color="primary"
-        :disabled="disabled"
-        @click="openCommentDialog"
-      >
-        <v-icon start>{{ annotationComment ? 'mdi-pencil' : 'mdi-plus' }}</v-icon>
-        Comment
-      </v-btn>
+        <v-btn
+          v-if="vettingMode"
+          v-tooltip="annotationComment ? `Edit comment: ${annotationComment}` : 'Add optional comment to this annotation'"
+          size="small"
+          variant="outlined"
+          color="primary"
+          :disabled="disabled"
+          @click="openCommentDialog"
+        >
+          <v-icon start>
+            {{ annotationComment ? 'mdi-pencil' : 'mdi-plus' }}
+          </v-icon>
+          Comment
+        </v-btn>
       </v-col>
     </v-row>
     <v-dialog

From 8492e2f8d74173a10b5a17701937300eb40fe13d Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Fri, 13 Mar 2026 12:12:28 -0400
Subject: [PATCH 4/4] prevent adding multiple annotations in vetting mode

---
 .../src/components/RecordingAnnotations.vue   | 45 ++++++++++++++++++-
 1 file changed, 44 insertions(+), 1 deletion(-)

diff --git a/client/src/components/RecordingAnnotations.vue b/client/src/components/RecordingAnnotations.vue
index 6fa5daff..31d7eae1 100644
--- a/client/src/components/RecordingAnnotations.vue
+++ b/client/src/components/RecordingAnnotations.vue
@@ -145,6 +145,26 @@ export default defineComponent({
       return ( currentUserAnnotations.length > 0 && props.type === 'nabat');
     });
 
+    const vettingMode = computed(() => configuration.value.mark_annotations_completed_enabled);
+    // Count all annotations owned by current user (submitted and unsubmitted) for vetting one-annotation limit
+    const userAnnotationCount = computed(() =>
+      annotations.value.filter(
+        (a: FileAnnotation) => a.owner === currentUser.value
+      ).length
+    );
+    const vettingModeAddDisabled = computed(() =>
+      vettingMode.value && userAnnotationCount.value > 0
+    );
+    const addButtonDisabled = computed(() =>
+      addingAnnotation.value || disableNaBatAnnotations.value || vettingModeAddDisabled.value
+    );
+    const addButtonTooltip = computed(() => {
+      if (vettingModeAddDisabled.value) {
+        return 'In vetting mode you may only add one annotation per recording.';
+      }
+      return '';
+    });
+
     function getConfidenceLabelText(confidence: number) {
       return `Confidence: ${confidence.toFixed(2)}`;
     }
@@ -167,6 +187,11 @@ export default defineComponent({
       userSubmittedAnnotationId,
       handleSubmitAnnotation,
       configuration,
+      addButtonDisabled,
+      addButtonTooltip,
+      userAnnotationCount,
+      vettingModeAddDisabled,
+      vettingMode,
     };
   },
 });
@@ -194,8 +219,26 @@ export default defineComponent({
       </v-col>
       <v-spacer />
       <v-col v-if="!isNaBat() || !disableNaBatAnnotations">
+        <v-tooltip
+          v-if="addButtonTooltip"
+          location="bottom"
+        >
+          <template #activator="{ props: tooltipProps }">
+            <div v-bind="tooltipProps">
+              <v-btn
+                :disabled="addButtonDisabled"
+                :loading="addingAnnotation"
+                @click="addAnnotation()"
+              >
+                Add<v-icon>mdi-plus</v-icon>
+              </v-btn>
+            </div>
+          </template>
+          {{ addButtonTooltip }}
+        </v-tooltip>
         <v-btn
-          :disabled="addingAnnotation || disableNaBatAnnotations"
+          v-else
+          :disabled="addButtonDisabled"
           :loading="addingAnnotation"
           @click="addAnnotation()"
         >