From a3feff32f028dcdb138bf4eaaa024ae5a2c464b1 Mon Sep 17 00:00:00 2001
From: Michael Nagler <mike.nagler@kitware.com>
Date: Tue, 30 Dec 2025 14:56:46 -0500
Subject: [PATCH 01/10] Allow Users to Submit Annotations (#281)

* Add settings for vetting

* Model submission status of recording annotations

* Add endpoint to get current user

* Show recording submission status in table view

* Don't filter out noise

The model can predict noise, so sorting it out of the species list can
lead to problems when loading/displaying that value in a list.

* Add endpoint to submit file-level annotations

* Allow submitting file annotations in interface

* Squash migrations

* Indicate when a file has been reviewed

* Format

* Show the current user's submitted label in sidebar

* Disable deletion for non-admin vetters

* Make 403 message more descriptive
---
 bats_ai/core/admin/recording_annotations.py   |  1 +
 ..._annotations_completed_enabled_and_more.py | 33 +++++++
 bats_ai/core/models/configuration.py          |  5 ++
 bats_ai/core/models/recording_annotation.py   |  4 +-
 bats_ai/core/views/configuration.py           | 16 ++++
 bats_ai/core/views/recording.py               | 16 +++-
 bats_ai/core/views/recording_annotation.py    | 36 +++++++-
 client/src/api/api.ts                         | 16 ++++
 .../components/RecordingAnnotationEditor.vue  | 87 +++++++++++++++++--
 .../src/components/RecordingAnnotations.vue   | 38 +++++++-
 client/src/components/RecordingList.vue       | 29 +++++--
 client/src/components/SpeciesEditor.vue       | 13 ++-
 client/src/use/useState.ts                    | 10 +++
 client/src/views/Admin.vue                    | 56 +++++++++++-
 client/src/views/Recordings.vue               | 77 +++++++++++++++-
 client/src/views/Spectrogram.vue              |  4 +-
 16 files changed, 413 insertions(+), 28 deletions(-)
 create mode 100644 bats_ai/core/migrations/0024_configuration_mark_annotations_completed_enabled_and_more.py

diff --git a/bats_ai/core/admin/recording_annotations.py b/bats_ai/core/admin/recording_annotations.py
index d83c31cb..705033e2 100644
--- a/bats_ai/core/admin/recording_annotations.py
+++ b/bats_ai/core/admin/recording_annotations.py
@@ -14,6 +14,7 @@ class RecordingAnnotationAdmin(admin.ModelAdmin):
         'additional_data',
         'comments',
         'model',
+        'submitted',
     ]
     list_select_related = True
     filter_horizontal = ('species',)  # or filter_vertical
diff --git a/bats_ai/core/migrations/0024_configuration_mark_annotations_completed_enabled_and_more.py b/bats_ai/core/migrations/0024_configuration_mark_annotations_completed_enabled_and_more.py
new file mode 100644
index 00000000..110c58c7
--- /dev/null
+++ b/bats_ai/core/migrations/0024_configuration_mark_annotations_completed_enabled_and_more.py
@@ -0,0 +1,33 @@
+# Generated by Django 4.2.23 on 2025-12-23 20:18
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('core', '0023_recordingtag_recording_tags_and_more'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='configuration',
+            name='mark_annotations_completed_enabled',
+            field=models.BooleanField(default=False),
+        ),
+        migrations.AddField(
+            model_name='configuration',
+            name='non_admin_upload_enabled',
+            field=models.BooleanField(default=True),
+        ),
+        migrations.AddField(
+            model_name='configuration',
+            name='show_my_recordings',
+            field=models.BooleanField(default=True),
+        ),
+        migrations.AddField(
+            model_name='recordingannotation',
+            name='submitted',
+            field=models.BooleanField(default=False),
+        ),
+    ]
diff --git a/bats_ai/core/models/configuration.py b/bats_ai/core/models/configuration.py
index 774831d8..9592f0f2 100644
--- a/bats_ai/core/models/configuration.py
+++ b/bats_ai/core/models/configuration.py
@@ -32,6 +32,11 @@ class AvailableColorScheme(models.TextChoices):
     # 18 characters is just enough for "rgb(255, 255, 255)"
     default_spectrogram_background_color = models.CharField(max_length=18, default='rgb(0, 0, 0)')
 
+    # Fields used for community vetting focused deployment of BatAI
+    non_admin_upload_enabled = models.BooleanField(default=True)
+    mark_annotations_completed_enabled = models.BooleanField(default=False)
+    show_my_recordings = models.BooleanField(default=True)
+
     def save(self, *args, **kwargs):
         # Ensure only one instance of Configuration exists
         if not Configuration.objects.exists() and not self.pk:
diff --git a/bats_ai/core/models/recording_annotation.py b/bats_ai/core/models/recording_annotation.py
index ab5d9b52..96dafb49 100644
--- a/bats_ai/core/models/recording_annotation.py
+++ b/bats_ai/core/models/recording_annotation.py
@@ -12,7 +12,8 @@ class RecordingAnnotation(TimeStampedModel, models.Model):
     owner = models.ForeignKey(User, on_delete=models.CASCADE)
     species = models.ManyToManyField(Species)
     comments = models.TextField(blank=True, null=True)
-    model = models.TextField(blank=True, null=True)  # AI Model information if inference used
+    # AI Model information if inference used, else "User Defined"
+    model = models.TextField(blank=True, null=True)
     confidence = models.FloatField(
         default=1.0,
         validators=[
@@ -24,3 +25,4 @@ class RecordingAnnotation(TimeStampedModel, models.Model):
     additional_data = models.JSONField(
         blank=True, null=True, help_text='Additional information about the models/data'
     )
+    submitted = models.BooleanField(default=False)
diff --git a/bats_ai/core/views/configuration.py b/bats_ai/core/views/configuration.py
index 5714688f..494beb58 100644
--- a/bats_ai/core/views/configuration.py
+++ b/bats_ai/core/views/configuration.py
@@ -22,6 +22,9 @@ class ConfigurationSchema(Schema):
     spectrogram_view: Configuration.SpectrogramViewMode
     default_color_scheme: Configuration.AvailableColorScheme
     default_spectrogram_background_color: str
+    non_admin_upload_enabled: bool
+    mark_annotations_completed_enabled: bool
+    show_my_recordings: bool
 
 
 # Endpoint to retrieve the configuration status
@@ -38,6 +41,9 @@ def get_configuration(request):
         spectrogram_view=config.spectrogram_view,
         default_color_scheme=config.default_color_scheme,
         default_spectrogram_background_color=config.default_spectrogram_background_color,
+        non_admin_upload_enabled=config.non_admin_upload_enabled,
+        mark_annotations_completed_enabled=config.mark_annotations_completed_enabled,
+        show_my_recordings=config.show_my_recordings,
         is_admin=request.user.is_authenticated and request.user.is_superuser,
     )
 
@@ -61,3 +67,13 @@ def check_is_admin(request):
     if request.user.is_authenticated:
         return {'is_admin': request.user.is_superuser}
     return {'is_admin': False}
+
+
+@router.get('/me')
+def get_current_user(request):
+    if request.user.is_authenticated:
+        return {
+            'email': request.user.email,
+            'name': request.user.username,
+        }
+    return {'email': '', 'name': ''}
diff --git a/bats_ai/core/views/recording.py b/bats_ai/core/views/recording.py
index 0bd8f35d..5e5076a5 100644
--- a/bats_ai/core/views/recording.py
+++ b/bats_ai/core/views/recording.py
@@ -76,6 +76,7 @@ class RecordingAnnotationSchema(Schema):
     confidence: float
     id: int | None = None
     hasDetails: bool
+    submitted: bool
 
     @classmethod
     def from_orm(cls, obj: RecordingAnnotation, **kwargs):
@@ -87,6 +88,7 @@ def from_orm(cls, obj: RecordingAnnotation, **kwargs):
             model=obj.model,
             id=obj.pk,
             hasDetails=obj.additional_data is not None,
+            submitted=obj.submitted,
         )
 
 
@@ -246,7 +248,9 @@ def delete_recording(
 
 
 @router.get('/')
-def get_recordings(request: HttpRequest, public: bool | None = None):
+def get_recordings(
+    request: HttpRequest, public: bool | None = None, exclude_submitted: bool | None = None
+):
     # Filter recordings based on the owner's id or public=True
     if public is not None and public:
         recordings = (
@@ -290,6 +294,16 @@ def get_recordings(request: HttpRequest, public: bool | None = None):
         )
         recording['userMadeAnnotations'] = user_has_annotations
 
+    if exclude_submitted:
+        recordings = [
+            recording
+            for recording in recordings
+            if not any(
+                annotation['submitted'] and annotation['owner'] == request.user.username
+                for annotation in recording['fileAnnotations']
+            )
+        ]
+
     return list(recordings)
 
 
diff --git a/bats_ai/core/views/recording_annotation.py b/bats_ai/core/views/recording_annotation.py
index e7924c63..d765d5c2 100644
--- a/bats_ai/core/views/recording_annotation.py
+++ b/bats_ai/core/views/recording_annotation.py
@@ -4,7 +4,7 @@
 from ninja import Router, Schema
 from ninja.errors import HttpError
 
-from bats_ai.core.models import Recording, RecordingAnnotation, Species
+from bats_ai.core.models import Configuration, Recording, RecordingAnnotation, Species
 from bats_ai.core.views.recording import SpeciesSchema
 
 logger = logging.getLogger(__name__)
@@ -20,6 +20,7 @@ class RecordingAnnotationSchema(Schema):
     owner: str
     confidence: float
     id: int | None = None
+    submitted: bool
     hasDetails: bool
 
     @classmethod
@@ -32,9 +33,11 @@ def from_orm(cls, obj: RecordingAnnotation, **kwargs):
             model=obj.model,
             id=obj.pk,
             hasDetails=obj.additional_data is not None,
+            submitted=obj.submitted,
         )
 
 
+# TODO: do we really need this? why can't we just always return the details?
 class RecordingAnnotationDetailsSchema(Schema):
     species: list[SpeciesSchema] | None
     comments: str | None = None
@@ -44,6 +47,7 @@ class RecordingAnnotationDetailsSchema(Schema):
     id: int | None = None
     details: dict
     hasDetails: bool
+    submitted: bool
 
     @classmethod
     def from_orm(cls, obj: RecordingAnnotation, **kwargs):
@@ -56,6 +60,7 @@ def from_orm(cls, obj: RecordingAnnotation, **kwargs):
             hasDetails=obj.additional_data is not None,
             details=obj.additional_data,
             id=obj.pk,
+            submitted=obj.submitted,
         )
 
 
@@ -168,6 +173,15 @@ def update_recording_annotation(
 @router.delete('/{id}', response={200: str})
 def delete_recording_annotation(request: HttpRequest, id: int):
     try:
+        configuration = Configuration.objects.first()
+        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=id)
 
         # Check permission
@@ -178,3 +192,23 @@ def delete_recording_annotation(request: HttpRequest, id: int):
         return 'Recording annotation deleted successfully.'
     except RecordingAnnotation.DoesNotExist:
         raise HttpError(404, 'Recording annotation not found.')
+
+
+# Submit endpoint
+@router.patch('/{id}/submit', response={200: dict})
+def submit_recording_annotation(request: HttpRequest, id: int):
+    try:
+        annotation = RecordingAnnotation.objects.get(pk=id)
+
+        # Check permission
+        if annotation.recording.owner != request.user:
+            raise HttpError(403, 'Permission denied.')
+
+        annotation.submitted = True
+        annotation.save()
+        return {
+            'id': id,
+            'submitted': annotation.submitted,
+        }
+    except RecordingAnnotation.DoesNotExist:
+        raise HttpError(404, 'Recording annotation not found.')
diff --git a/client/src/api/api.ts b/client/src/api/api.ts
index 3b13e655..246ce16d 100644
--- a/client/src/api/api.ts
+++ b/client/src/api/api.ts
@@ -100,6 +100,7 @@ export interface FileAnnotation {
   confidence: number;
   hasDetails: boolean;
   id: number;
+  submitted: boolean;
 }
 
 export interface FileAnnotationDetails {
@@ -395,6 +396,12 @@ async function deleteFileAnnotation(fileAnnotationId: number) {
   );
 }
 
+async function submitFileAnnotation(fileAnnotationId: number) {
+  return axiosInstance.patch<{ id: number, submitted: boolean }>(
+    `recording-annotation/${fileAnnotationId}/submit`
+  );
+}
+
 interface CellIDReponse {
   grid_cell_id?: number;
   error?: string;
@@ -414,6 +421,9 @@ export interface ConfigurationSettings {
   is_admin?: boolean;
   default_color_scheme: string;
   default_spectrogram_background_color: string;
+  non_admin_upload_enabled: boolean;
+  mark_annotations_completed_enabled: boolean;
+  show_my_recordings: boolean;
 }
 
 export type Configuration = ConfigurationSettings & { is_admin: boolean };
@@ -425,6 +435,10 @@ async function patchConfiguration(config: ConfigurationSettings) {
   return axiosInstance.patch("/configuration/", { ...config });
 }
 
+async function getCurrentUser() {
+  return axiosInstance.get<{name: string, email: string}>("/configuration/me");
+}
+
 export interface ProcessingTask {
   id: number;
   created: string;
@@ -531,6 +545,7 @@ export {
   putFileAnnotation,
   patchFileAnnotation,
   deleteFileAnnotation,
+  submitFileAnnotation,
   getConfiguration,
   patchConfiguration,
   getProcessingTasks,
@@ -540,4 +555,5 @@ export {
   getFileAnnotationDetails,
   getExportStatus,
   getRecordingTags,
+  getCurrentUser,
 };
diff --git a/client/src/components/RecordingAnnotationEditor.vue b/client/src/components/RecordingAnnotationEditor.vue
index d731e511..59d2b062 100644
--- a/client/src/components/RecordingAnnotationEditor.vue
+++ b/client/src/components/RecordingAnnotationEditor.vue
@@ -1,8 +1,16 @@
 <script lang="ts">
-import { defineComponent, PropType, ref, Ref, watch } from "vue";
+import { computed, defineComponent, PropType, ref, Ref, watch } from "vue";
 import { SpectroInfo } from './geoJS/geoJSUtils';
-import { deleteFileAnnotation, FileAnnotation, patchFileAnnotation, Species, UpdateFileAnnotation } from "../api/api";
+import {
+  deleteFileAnnotation,
+  FileAnnotation,
+  patchFileAnnotation,
+  Species,
+  UpdateFileAnnotation,
+  submitFileAnnotation,
+} from "../api/api";
 import { deleteNABatFileAnnotation, patchNABatFileAnnotationLocal } from "../api/NABatApi";
+import useState from "@use/useState";
 import SpeciesInfo from "./SpeciesInfo.vue";
 import SpeciesEditor from "./SpeciesEditor.vue";
 import SpeciesNABatSave from "./SpeciesNABatSave.vue";
@@ -38,10 +46,14 @@ export default defineComponent({
       type: String as PropType<'nabat' | null>,
       default: () => null,
     },
+    submittedAnnotationId: {
+      type: Number as PropType<number | undefined>,
+      default: () => undefined,
+    },
   },
   emits: ['update:annotation', 'delete:annotation'],
   setup(props, { emit }) {
-
+    const { configuration, currentUser } = useState();
     const speciesEdit: Ref<string[]> = ref( props.annotation?.species?.map((item) => item.species_code || item.common_name) || []);
     const comments: Ref<string> = ref(props.annotation?.comments || '');
     const confidence: Ref<number> = ref(props.annotation?.confidence || 1.0);
@@ -84,21 +96,59 @@ export default defineComponent({
 
     };
 
-
-
     const deleteAnnotation = async () => {
       if (props.annotation && props.recordingId) {
             props.type === 'nabat' ? await deleteNABatFileAnnotation(props.annotation.id, props.apiToken, props.recordingId) : await deleteFileAnnotation(props.annotation.id,);
             emit('delete:annotation');
         }
     };
+
+    const submitAnnotation = async () => {
+      if (props.annotation && props.recordingId) {
+        await submitFileAnnotation(props.annotation.id);
+        emit('update:annotation');
+      }
+    };
+
+    const canSubmit = computed(() => (
+      props.annotation
+      && props.annotation.owner === currentUser.value
+      && props.annotation.model === 'User Defined'
+      && configuration.value.mark_annotations_completed_enabled
+    ));
+
+    const submissionTooltip = computed(() => {
+      if (props.submittedAnnotationId !== undefined && props.submittedAnnotationId !== props.annotation?.id) {
+        return 'You have already submitted a different annotation for this recording.';
+      }
+      if (props.annotation && props.annotation.submitted) {
+        return 'This annotation has been submitted. This cannot be undone.';
+      }
+      return 'Submit this annotation. This action cannot be undone.';
+    });
+
+    const deleteEnabled = computed(() => {
+      return (
+        props.type !== 'nabat'
+        && (
+          configuration.value.is_admin
+          || !configuration.value.mark_annotations_completed_enabled
+        )
+      );
+    });
+
     return {
         speciesEdit,
         confidence,
         comments,
         updateAnnotation,
         deleteAnnotation,
+        submitAnnotation,
         singleSpecies,
+        configuration,
+        canSubmit,
+        submissionTooltip,
+        deleteEnabled,
     };
   },
 });
@@ -129,7 +179,7 @@ export default defineComponent({
         </v-tooltip>
         <v-spacer />
         <v-btn
-          v-if="type !== 'nabat'"
+          v-if="deleteEnabled"
           size="x-small"
           color="error"
           class="mt-1"
@@ -152,6 +202,7 @@ export default defineComponent({
           :key="`species_${annotation?.id}`"
           v-model="speciesEdit"
           :species-list="species"
+          :disabled="annotation?.submitted"
           @update:model-value="updateAnnotation()"
         />
       </v-row>
@@ -177,7 +228,7 @@ export default defineComponent({
         />
       </v-row>
       <v-row
-        v-if="type !== 'nabat'"
+        v-if="type !== 'nabat' && !configuration.mark_annotations_completed_enabled"
       >
         <v-textarea
           v-model="comments"
@@ -185,6 +236,28 @@ export default defineComponent({
           @change="updateAnnotation()"
         />
       </v-row>
+      <v-row v-if="canSubmit">
+        <v-tooltip>
+          <template #activator="{ props }">
+            <div
+              v-bind="props"
+            >
+              <v-btn
+                flat
+                color="primary"
+                :disabled="annotation.submitted || (submittedAnnotationId !== undefined && annotation.id !== submittedAnnotationId)"
+                @click="submitAnnotation"
+              >
+                Submit
+                <template #append>
+                  <v-icon>mdi-check</v-icon>
+                </template>
+              </v-btn>
+            </div>
+          </template>
+          {{ submissionTooltip }}
+        </v-tooltip>
+      </v-row>
     </v-card-text>
   </v-card>
 </template>
diff --git a/client/src/components/RecordingAnnotations.vue b/client/src/components/RecordingAnnotations.vue
index f1889494..5ae57589 100644
--- a/client/src/components/RecordingAnnotations.vue
+++ b/client/src/components/RecordingAnnotations.vue
@@ -38,7 +38,7 @@ export default defineComponent({
     const annotations: Ref<FileAnnotation[]> = ref([]);
     const detailsDialog = ref(false);
     const detailRecordingId = ref(-1);
-    const { configuration, isNaBat } = useState();
+    const { configuration, isNaBat, currentUser } = useState();
 
     const setSelectedId = (annotation: FileAnnotation) => {
       selectedAnnotation.value = annotation;
@@ -68,7 +68,6 @@ export default defineComponent({
           }
         }
       }
-
     });
 
     const addAnnotation = async () => {
@@ -108,6 +107,15 @@ export default defineComponent({
 
     const isAdmin = computed(() => configuration.value.is_admin);
 
+    const userSubmittedAnnotationId = computed(() => {
+      if (!configuration.value.mark_annotations_completed_enabled) {
+        return undefined;
+      }
+      const userAnnotations = annotations.value.filter((annotation: FileAnnotation) => annotation.owner === currentUser.value);
+      const submittedAnnotation = userAnnotations.find((annotation: FileAnnotation) => annotation.submitted);
+      return submittedAnnotation?.id;
+    });
+
     const disableNaBatAnnotations = computed(() => {
       const currentUserAnnotations = annotations.value.filter((item) => item.owner === currentNaBatUser.value);
       if (isAdmin.value && props.type === 'nabat' && !props.apiToken) {
@@ -134,6 +142,7 @@ export default defineComponent({
       detailRecordingId,
       disableNaBatAnnotations,
       currentNaBatUser,
+      userSubmittedAnnotationId,
     };
   },
 });
@@ -142,8 +151,22 @@ export default defineComponent({
 <template>
   <div>
     <v-row class="pa-4">
-      <v-col v-if="!isNaBat()">
-        Annotations
+      <v-col
+        v-if="!isNaBat()"
+        cols="6"
+      >
+        <v-row>
+          Annotations
+        </v-row>
+        <v-row
+          v-if="userSubmittedAnnotationId"
+          class="mt-8"
+        >
+          <b>File Reviewed</b>
+          <v-icon color="success">
+            mdi-check
+          </v-icon>
+        </v-row>
       </v-col>
       <v-spacer />
       <v-col v-if="!isNaBat() || !disableNaBatAnnotations">
@@ -183,6 +206,12 @@ export default defineComponent({
           <v-col class="annotation-model">
             <span>{{ annotation.model }} </span>
           </v-col>
+          <v-col v-if="annotation.submitted">
+            Submitted
+            <v-icon color="success">
+              mdi-check
+            </v-icon>
+          </v-col>
         </v-row>
         <v-row
           v-for="item in annotation.species"
@@ -211,6 +240,7 @@ export default defineComponent({
       :recording-id="recordingId"
       :annotation="selectedAnnotation"
       :api-token="apiToken"
+      :submitted-annotation-id="userSubmittedAnnotationId"
       :type="type"
       class="mt-4"
       @update:annotation="updatedAnnotation()"
diff --git a/client/src/components/RecordingList.vue b/client/src/components/RecordingList.vue
index 3cb0e3aa..ef15a5dd 100644
--- a/client/src/components/RecordingList.vue
+++ b/client/src/components/RecordingList.vue
@@ -1,15 +1,13 @@
 <script lang="ts">
 import { defineComponent, ref, Ref, onMounted, computed } from 'vue';
-import { getRecordings } from '../api/api';
+import { FileAnnotation, getRecordings, Recording, Species } from '../api/api';
 import useState from '@use/useState';
 import  { EditingRecording } from './UploadRecording.vue';
 
 export default defineComponent({
-    components: {
-    },
   setup() {
 
-    const { sharedList, recordingList } = useState();
+    const { sharedList, recordingList, currentUser, configuration } = useState();
     const editingRecording: Ref<EditingRecording | null> = ref(null);
 
     const fetchRecordings = async () => {
@@ -30,6 +28,16 @@ export default defineComponent({
         return sharedList.value;
     });
 
+    const userSubmittedAnnotation = (recording: Recording) => {
+      const userSubmittedAnnotations = recording.fileAnnotations.filter((annotation: FileAnnotation) => (
+        annotation.owner === currentUser.value && annotation.submitted
+      ));
+      if (userSubmittedAnnotations.length === 0 || userSubmittedAnnotations[0].species.length === 0) {
+        return undefined;
+      }
+      return userSubmittedAnnotations[0].species.map((specie: Species) => specie.species_code).join(', ');
+    };
+
     return {
         recordingList,
         sharedList,
@@ -37,6 +45,8 @@ export default defineComponent({
         filtered,
         editingRecording,
         openPanel,
+        userSubmittedAnnotation,
+        configuration,
      };
   },
 });
@@ -83,6 +93,15 @@ export default defineComponent({
                 </div>
               </v-col>
             </v-row>
+            <v-row
+              v-if="configuration.mark_annotations_completed_enabled && userSubmittedAnnotation(item)"
+              dense
+            >
+              <v-col>
+                <b>My label: </b>
+                <span>{{ userSubmittedAnnotation(item) }}</span>
+              </v-col>
+            </v-row>
           </v-card>
         </div>
       </v-expansion-panel-text>
@@ -151,4 +170,4 @@ export default defineComponent({
 .v-expansion-panel-text__wrapper {
     padding: 0 !important;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/client/src/components/SpeciesEditor.vue b/client/src/components/SpeciesEditor.vue
index 7daaf8f9..aa994404 100644
--- a/client/src/components/SpeciesEditor.vue
+++ b/client/src/components/SpeciesEditor.vue
@@ -13,6 +13,14 @@ export default defineComponent({
       type: Array as PropType<Species[]>,
       default: () => [],
     },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    multiple: {
+      type: Boolean,
+      default: true,
+    },
   },
   emits: ['update:modelValue'],
 
@@ -121,7 +129,7 @@ export default defineComponent({
     :items="groupedItems"
     item-title="species_code"
     item-value="species_code"
-    multiple
+    :multiple="multiple"
     chips
     closable-chips
     :custom-filter="customFilter"
@@ -129,6 +137,7 @@ export default defineComponent({
     clear-on-select
     label="Select Labels"
     :menu-props="{ maxHeight: '300px', maxWidth: '400px' }"
+    :disabled="disabled"
   >
     <template #subheader="{ props }">
       <v-list-subheader
@@ -175,7 +184,7 @@ export default defineComponent({
           <v-card-title
             :class="categoryColors[item.raw.category] ? `bg-${categoryColors[item.raw.category]}` : ''"
           >
-            {{ item.raw.category.toUpperCase() }}
+            {{ item.raw.category?.toUpperCase() }}
           </v-card-title>
           <v-card-text>
             <v-list>
diff --git a/client/src/use/useState.ts b/client/src/use/useState.ts
index b6250cbf..04b7aa92 100644
--- a/client/src/use/useState.ts
+++ b/client/src/use/useState.ts
@@ -5,6 +5,7 @@ import * as d3 from "d3";
 import {
   Configuration,
   getConfiguration,
+  getCurrentUser,
   OtherUserAnnotations,
   Recording,
   SpectrogramAnnotation,
@@ -60,6 +61,9 @@ const configuration: Ref<Configuration> = ref({
   default_color_scheme: "inferno",
   default_spectrogram_background_color: "rgb(0, 0, 0)",
   is_admin: false,
+  mark_annotations_completed_enabled: false,
+  non_admin_upload_enabled: true,
+  show_my_recordings: true,
 });
 const scaledWidth = ref(0);
 const scaledHeight = ref(0);
@@ -138,6 +142,11 @@ export default function useState() {
     configuration.value = (await getConfiguration()).data;
   }
 
+  async function loadCurrentUser() {
+    const userInfo = (await getCurrentUser()).data;
+    currentUser.value = userInfo.name;
+  }
+
   /**
    * Function used to determine whether or not we are currently looking
    * at an NABat-specific view.
@@ -172,6 +181,7 @@ export default function useState() {
     currentUser,
     setSelectedId,
     loadConfiguration,
+    loadCurrentUser,
     isNaBat,
     // State Passing Elements
     annotations,
diff --git a/client/src/views/Admin.vue b/client/src/views/Admin.vue
index 32a4c5e2..3f8975fc 100644
--- a/client/src/views/Admin.vue
+++ b/client/src/views/Admin.vue
@@ -15,7 +15,7 @@ export default defineComponent({
   },
   setup() {
     // Reactive state for the settings
-    const tab: Ref<'admin' | 'nabat'> = ref('admin');
+    const tab: Ref<'admin' | 'nabat' | 'vetting'> = ref('admin');
     const { colorSchemes, configuration, loadConfiguration } = useState();
     const settings = reactive({
       displayPulseAnnotations: configuration.value.display_pulse_annotations,
@@ -25,6 +25,9 @@ export default defineComponent({
       spectrogramView: configuration.value.spectrogram_view,
       defaultColorScheme: configuration.value.default_color_scheme,
       defaultBackgroundColor: configuration.value.default_spectrogram_background_color,
+      nonAdminUploadEnabled: configuration.value.non_admin_upload_enabled,
+      markAnnotationsCompletedEnabled: configuration.value.mark_annotations_completed_enabled,
+      showMyRecordings: configuration.value.show_my_recordings,
     });
     const spectrogramViewOptions = [
       { title: 'Compressed', value: 'compressed' },
@@ -37,7 +40,9 @@ export default defineComponent({
       settings.spectrogramXStretch = configuration.value.spectrogram_x_stretch;
       settings.defaultColorScheme = configuration.value.default_color_scheme;
       settings.defaultBackgroundColor = configuration.value.default_spectrogram_background_color;
-      settings.spectrogramView = configuration.value.spectrogram_view;
+      settings.nonAdminUploadEnabled = configuration.value.non_admin_upload_enabled;
+      settings.markAnnotationsCompletedEnabled = configuration.value.mark_annotations_completed_enabled;
+      settings.showMyRecordings = configuration.value.show_my_recordings;
     });
     // Function to save the settings
     const saveSettings = async () => {
@@ -50,6 +55,9 @@ export default defineComponent({
         default_color_scheme: settings.defaultColorScheme,
         default_spectrogram_background_color: settings.defaultBackgroundColor,
         spectrogram_view: settings.spectrogramView,
+        non_admin_upload_enabled: settings.nonAdminUploadEnabled,
+        mark_annotations_completed_enabled: settings.markAnnotationsCompletedEnabled,
+        show_my_recordings: settings.showMyRecordings,
       });
       loadConfiguration();
     };
@@ -83,6 +91,12 @@ export default defineComponent({
       >
         NABat Admin
       </v-tab>
+      <v-tab
+        value="vetting"
+        size="small"
+      >
+        Vetting
+      </v-tab>
     </v-tabs>
 
     <v-window v-model="tab">
@@ -180,6 +194,44 @@ export default defineComponent({
       <v-window-item value="nabat">
         <NABatAdmin />
       </v-window-item>
+      <v-window-item value="vetting">
+        <v-card-title>Vetting</v-card-title>
+        <v-card-text>
+          <v-row>
+            <v-switch
+              v-model="settings.nonAdminUploadEnabled"
+              :color="settings.nonAdminUploadEnabled ? 'primary': ''"
+              label="Allow uploads by non-admin users"
+            />
+          </v-row>
+          <v-row>
+            <v-switch
+              v-model="settings.markAnnotationsCompletedEnabled"
+              :color="settings.markAnnotationsCompletedEnabled ? 'primary' : ''"
+              label="Enable submitting file-level annotations by marking them complete"
+            />
+          </v-row>
+          <v-row>
+            <v-switch
+              v-model="settings.showMyRecordings"
+              :color="settings.showMyRecordings ? 'primary' : ''"
+              label="Show a separate list for a user's own recordings"
+            />
+          </v-row>
+        </v-card-text>
+        <v-card-actions>
+          <v-row>
+            <v-btn
+              color="primary"
+              variant="outlined"
+              class="mx-2"
+              @click="saveSettings"
+            >
+              Save
+            </v-btn>
+          </v-row>
+        </v-card-actions>
+      </v-window-item>
     </v-window>
   </v-card>
 </template>
diff --git a/client/src/views/Recordings.vue b/client/src/views/Recordings.vue
index 250f087b..3efd914c 100644
--- a/client/src/views/Recordings.vue
+++ b/client/src/views/Recordings.vue
@@ -9,7 +9,8 @@ import {
 import {
   deleteRecording,
   getRecordings,
-  Recording ,
+  Recording,
+  FileAnnotation,
   getRecordingTags,
 } from '../api/api';
 import UploadRecording, { EditingRecording } from '@components/UploadRecording.vue';
@@ -30,13 +31,24 @@ export default defineComponent({
     },
   setup() {
     const itemsPerPage = ref(-1);
-    const { sharedList, recordingList, recordingTagList } = useState();
+    const {
+      sharedList,
+      recordingList,
+      recordingTagList,
+      currentUser,
+      configuration,
+      loadCurrentUser,
+    } = useState();
     const editingRecording: Ref<EditingRecording | null> = ref(null);
     let intervalRef: number | null = null;
 
     const uploadDialog = ref(false);
     const batchUploadDialog = ref(false);
-    const headers = ref([
+    const headers: Ref<{
+      title: string,
+      key: string,
+      value?: (item: Recording) => boolean | string | number,
+    }[]> = ref([
         {
           title:'Name',
           key: 'name',
@@ -200,9 +212,30 @@ export default defineComponent({
       return filterTagSet.intersection(itemTagSet).size > 0;
     };
 
+    function submittedForCurrentUser(recording: Recording) {
+      const userSubmittedAnnotations = recording.fileAnnotations.filter((annotation: FileAnnotation) => (
+        annotation.owner === currentUser.value && annotation.submitted
+      ));
+      return userSubmittedAnnotations.length > 0;
+    }
+
+    function addSubmittedColumn() {
+      if (configuration.value.mark_annotations_completed_enabled) {
+        const submittedHeader = {
+          title: 'Submitted',
+          key: 'submitted',
+          value: submittedForCurrentUser,
+        };
+        headers.value.push(submittedHeader);
+        sharedHeaders.value.push(submittedHeader);
+      }
+    }
+
     onMounted(async () => {
+      await loadCurrentUser();
       await fetchRecordingTags();
       await fetchRecordings();
+      addSubmittedColumn();
     });
 
     const uploadDone = () => {
@@ -273,6 +306,8 @@ export default defineComponent({
         recordingToDelete,
         editingRecording,
         dataLoading,
+        submittedForCurrentUser,
+        configuration,
      };
   },
 });
@@ -469,6 +504,24 @@ export default defineComponent({
             mdi-close
           </v-icon>
         </template>
+
+        <template
+          v-if="configuration.mark_annotations_completed_enabled"
+          #item.submitted="{ item }"
+        >
+          <v-icon
+            v-if="submittedForCurrentUser(item)"
+            color="success"
+          >
+            mdi-check
+          </v-icon>
+          <v-icon
+            v-else
+            color="error"
+          >
+            mdi-close
+          </v-icon>
+        </template>
         <template #bottom />
       </v-data-table>
     </v-card-text>
@@ -610,6 +663,24 @@ export default defineComponent({
             mdi-close
           </v-icon>
         </template>
+
+        <template
+          v-if="configuration.mark_annotations_completed_enabled"
+          #item.submitted="{ item }"
+        >
+          <v-icon
+            v-if="submittedForCurrentUser(item)"
+            color="success"
+          >
+            mdi-check
+          </v-icon>
+          <v-icon
+            v-else
+            color="error"
+          >
+            mdi-close
+          </v-icon>
+        </template>
         <template #bottom />
       </v-data-table>
     </v-card-text>
diff --git a/client/src/views/Spectrogram.vue b/client/src/views/Spectrogram.vue
index abbcc4a2..5cfef021 100644
--- a/client/src/views/Spectrogram.vue
+++ b/client/src/views/Spectrogram.vue
@@ -162,8 +162,8 @@ export default defineComponent({
       }
       const speciesResponse = await getSpecies();
       // Removing NOISE species from list and any duplicates
-      speciesList.value = speciesResponse.data.filter(
-        (value, index, self) => value.species_code !== "NOISE" && index === self.findIndex((t) => t.species_code === value.species_code)
+      speciesList.value = speciesResponse.data .filter(
+        (value, index, self) => index === self.findIndex((t) => t.species_code === value.species_code)
       );
       if (response.data.otherUsers && spectroInfo.value) {
         // We have other users so we should grab the other user annotations

From cf700d5a0489f22bb5b7b9665bd96e29b06052f5 Mon Sep 17 00:00:00 2001
From: Michael Nagler <mike.nagler@kitware.com>
Date: Wed, 31 Dec 2025 16:37:02 -0500
Subject: [PATCH 02/10] Vetting progress UI (#293)

* Add settings for vetting

* Model submission status of recording annotations

* Add endpoint to get current user

* Show recording submission status in table view

* Don't filter out noise

The model can predict noise, so sorting it out of the species list can
lead to problems when loading/displaying that value in a list.

* Add endpoint to submit file-level annotations

* Allow submitting file annotations in interface

* Squash migrations

* Indicate when a file has been reviewed

* Format

* Show the current user's submitted label in sidebar

* Disable deletion for non-admin vetters

* Make 403 message more descriptive

* Show progress bar for submitted recordings

* Enable showing/hiding submitted recordings

* Toggle submitted recordings in sidebar

* Fix submission bug
---
 bats_ai/core/views/recording_annotation.py |   2 +-
 client/src/components/RecordingList.vue    |  21 +++-
 client/src/use/useState.ts                 |  69 +++++++++++-
 client/src/views/Recordings.vue            | 122 +++++++++++++++------
 4 files changed, 177 insertions(+), 37 deletions(-)

diff --git a/bats_ai/core/views/recording_annotation.py b/bats_ai/core/views/recording_annotation.py
index d765d5c2..834714be 100644
--- a/bats_ai/core/views/recording_annotation.py
+++ b/bats_ai/core/views/recording_annotation.py
@@ -201,7 +201,7 @@ def submit_recording_annotation(request: HttpRequest, id: int):
         annotation = RecordingAnnotation.objects.get(pk=id)
 
         # Check permission
-        if annotation.recording.owner != request.user:
+        if annotation.owner != request.user:
             raise HttpError(403, 'Permission denied.')
 
         annotation.submitted = True
diff --git a/client/src/components/RecordingList.vue b/client/src/components/RecordingList.vue
index ef15a5dd..9b3469e0 100644
--- a/client/src/components/RecordingList.vue
+++ b/client/src/components/RecordingList.vue
@@ -7,7 +7,15 @@ import  { EditingRecording } from './UploadRecording.vue';
 export default defineComponent({
   setup() {
 
-    const { sharedList, recordingList, currentUser, configuration } = useState();
+    const {
+      sharedList,
+      recordingList,
+      currentUser,
+      configuration,
+      showSubmittedRecordings,
+      myRecordingsDisplay,
+      sharedRecordingsDisplay,
+    } = useState();
     const editingRecording: Ref<EditingRecording | null> = ref(null);
 
     const fetchRecordings = async () => {
@@ -47,6 +55,9 @@ export default defineComponent({
         openPanel,
         userSubmittedAnnotation,
         configuration,
+        myRecordingsDisplay,
+        sharedRecordingsDisplay,
+        showSubmittedRecordings,
      };
   },
 });
@@ -54,11 +65,17 @@ export default defineComponent({
 
 <template>
   <v-expansion-panels v-model="openPanel">
+    <v-checkbox
+      v-if="configuration.mark_annotations_completed_enabled"
+      v-model="showSubmittedRecordings"
+      label="Show submitted recordings"
+      hide-details
+    />
     <v-expansion-panel>
       <v-expansion-panel-title>My Recordings</v-expansion-panel-title>
       <v-expansion-panel-text>
         <div
-          v-for="item in recordingList"
+          v-for="item in myRecordingsDisplay"
           :key="`public_${item.id}`"
         >
           <v-card class="pa-2 my-2">
diff --git a/client/src/use/useState.ts b/client/src/use/useState.ts
index 04b7aa92..ca632fba 100644
--- a/client/src/use/useState.ts
+++ b/client/src/use/useState.ts
@@ -1,4 +1,4 @@
-import { ref, Ref, watch } from "vue";
+import { computed, ref, Ref, watch } from "vue";
 import { useRouter } from 'vue-router';
 import { cloneDeep } from "lodash";
 import * as d3 from "d3";
@@ -158,6 +158,66 @@ export default function useState() {
     return router.currentRoute.value.fullPath.includes('nabat');
   }
 
+  const showSubmittedRecordings = ref(false);
+
+  const submittedMyRecordings = computed(() => {
+    const submittedByMe = recordingList.value.filter((recording: Recording) => {
+      const myAnnotations = recording.fileAnnotations.filter((annotation: FileAnnotation) => (
+        annotation.owner === currentUser.value && annotation.submitted
+      ));
+      return myAnnotations.length > 0;
+    });
+    return submittedByMe;
+  });
+
+  const submittedSharedRecordings = computed(() => {
+    const submittedByMe = sharedList.value.filter((recording: Recording) => {
+      const myAnnotations = recording.fileAnnotations.filter((annotation: FileAnnotation) => (
+        annotation.owner === currentUser.value && annotation.submitted
+      ));
+      return myAnnotations.length > 0;
+    });
+    return submittedByMe;
+  });
+
+  const unsubmittedMyRecordings = computed(() => {
+    const unsubmitted = recordingList.value.filter((recording: Recording) => {
+      const myAnnotations = recording.fileAnnotations.filter((annotation: FileAnnotation) => (
+        annotation.owner === currentUser.value && annotation.submitted
+      ));
+      return myAnnotations.length === 0;
+    });
+    return unsubmitted;
+  });
+
+  const unsubmittedSharedRecordings = computed(() => {
+    const unsubmitted = sharedList.value.filter((recording: Recording) => {
+      const myAnnotations = recording.fileAnnotations.filter((annotation: FileAnnotation) => (
+        annotation.owner === currentUser.value && annotation.submitted
+      ));
+      return myAnnotations.length === 0;
+    });
+    return unsubmitted;
+  });
+
+  // Use state to determine which recordings should be shown to the user
+  const myRecordingsDisplay = computed(() => {
+    if (!configuration.value.mark_annotations_completed_enabled) {
+      return recordingList.value;
+    } else {
+      return showSubmittedRecordings.value ? recordingList.value : unsubmittedMyRecordings.value;
+    }
+  });
+
+  const sharedRecordingsDisplay = computed(() => {
+    if (!configuration.value.mark_annotations_completed_enabled) {
+      return sharedList.value;
+    } else {
+      return showSubmittedRecordings.value ? sharedList.value : unsubmittedSharedRecordings.value;
+    }
+  });
+
+
 
   return {
     annotationState,
@@ -201,5 +261,12 @@ export default function useState() {
     scaledHeight,
     fixedAxes,
     toggleFixedAxes,
+    showSubmittedRecordings,
+    submittedMyRecordings,
+    submittedSharedRecordings,
+    unsubmittedMyRecordings,
+    unsubmittedSharedRecordings,
+    myRecordingsDisplay,
+    sharedRecordingsDisplay,
   };
 }
diff --git a/client/src/views/Recordings.vue b/client/src/views/Recordings.vue
index 3efd914c..451fed5e 100644
--- a/client/src/views/Recordings.vue
+++ b/client/src/views/Recordings.vue
@@ -22,13 +22,13 @@ import RecordingAnnotationSummary from '@components/RecordingAnnotationSummary.v
 import { FilterFunction, InternalItem } from 'vuetify';
 
 export default defineComponent({
-    components: {
-        UploadRecording,
-        MapLocation,
-        BatchUploadRecording,
-        RecordingInfoDisplay,
-        RecordingAnnotationSummary,
-    },
+  components: {
+    UploadRecording,
+    MapLocation,
+    BatchUploadRecording,
+    RecordingInfoDisplay,
+    RecordingAnnotationSummary,
+  },
   setup() {
     const itemsPerPage = ref(-1);
     const {
@@ -38,6 +38,11 @@ export default defineComponent({
       currentUser,
       configuration,
       loadCurrentUser,
+      showSubmittedRecordings,
+      submittedMyRecordings,
+      submittedSharedRecordings,
+      myRecordingsDisplay,
+      sharedRecordingsDisplay,
     } = useState();
     const editingRecording: Ref<EditingRecording | null> = ref(null);
     let intervalRef: number | null = null;
@@ -231,6 +236,14 @@ export default defineComponent({
       }
     }
 
+    const recordingListStyles = computed(() => {
+      const sectionHeight = configuration.value.mark_annotations_completed_enabled ? '35vh' : '40vh';
+      return {
+        'height': sectionHeight,
+        'max-height': sectionHeight,
+      };
+    });
+
     onMounted(async () => {
       await loadCurrentUser();
       await fetchRecordingTags();
@@ -308,6 +321,12 @@ export default defineComponent({
         dataLoading,
         submittedForCurrentUser,
         configuration,
+        submittedMyRecordings,
+        submittedSharedRecordings,
+        recordingListStyles,
+        showSubmittedRecordings,
+        myRecordingsDisplay,
+        sharedRecordingsDisplay,
      };
   },
 });
@@ -321,26 +340,35 @@ export default defineComponent({
           My Recordings
         </div>
         <v-spacer />
-        <v-menu>
-          <template #activator="{ props }">
-            <v-btn
-              color="primary"
-              v-bind="props"
-            >
-              Upload <v-icon>mdi-chevron-down</v-icon>
-            </v-btn>
-          </template>
-          <v-list>
-            <v-list-item @click="uploadDialog=true">
-              <v-list-item-title>Upload Recording</v-list-item-title>
-            </v-list-item>
-            <v-list-item @click="batchUploadDialog=true">
-              <v-list-item-title>
-                Batch Upload
-              </v-list-item-title>
-            </v-list-item>
-          </v-list>
-        </v-menu>
+        <div class="d-flex justify-center align-center">
+          <v-checkbox
+            v-if="configuration.mark_annotations_completed_enabled"
+            v-model="showSubmittedRecordings"
+            class="mr-4"
+            label="Show submitted recordings"
+            hide-details
+          />
+          <v-menu>
+            <template #activator="{ props }">
+              <v-btn
+                color="primary"
+                v-bind="props"
+              >
+                Upload <v-icon>mdi-chevron-down</v-icon>
+              </v-btn>
+            </template>
+            <v-list>
+              <v-list-item @click="uploadDialog=true">
+                <v-list-item-title>Upload Recording</v-list-item-title>
+              </v-list-item>
+              <v-list-item @click="batchUploadDialog=true">
+                <v-list-item-title>
+                  Batch Upload
+                </v-list-item-title>
+              </v-list-item>
+            </v-list>
+          </v-menu>
+        </div>
       </v-row>
     </v-card-title>
     <v-card-text>
@@ -372,13 +400,14 @@ export default defineComponent({
       <v-data-table
         v-model:items-per-page="itemsPerPage"
         :headers="headers"
-        :items="recordingList"
+        :items="myRecordingsDisplay"
         :custom-filter="tagFilter"
         filter-keys="['tag']"
         :search="filterTags.length ? 'seach-active' : ''"
         density="compact"
         :loading="dataLoading"
         class="elevation-1 my-recordings"
+        :style="recordingListStyles"
       >
         <template #top>
           <div max-height="100px">
@@ -524,6 +553,21 @@ export default defineComponent({
         </template>
         <template #bottom />
       </v-data-table>
+      <div
+        v-if="recordingList.length && configuration.mark_annotations_completed_enabled"
+        class="d-flex justify-center align-center"
+      >
+        <v-progress-linear
+          height="10"
+          color="success"
+          :model-value="submittedMyRecordings.length"
+          min="0"
+          :max="recordingList.length"
+        />
+        <span class="ml-4 text-h6">
+          ({{ submittedMyRecordings.length }}/{{ recordingList.length }})
+        </span>
+      </div>
     </v-card-text>
     <v-dialog
       v-model="uploadDialog"
@@ -557,13 +601,14 @@ export default defineComponent({
       <v-data-table
         v-model:items-per-page="itemsPerPage"
         :headers="sharedHeaders"
-        :items="sharedList"
+        :items="sharedRecordingsDisplay"
         :custom-filter="sharedTagFilter"
         filter-keys="['tag']"
         :search="sharedFilterTags.length ? 'seach-active' : ''"
         :loading="dataLoading"
         density="compact"
         class="elevation-1 shared-recordings"
+        :style="recordingListStyles"
       >
         <template #top>
           <div max-height="100px">
@@ -683,19 +728,30 @@ export default defineComponent({
         </template>
         <template #bottom />
       </v-data-table>
+      <div
+        v-if="sharedList.length && configuration.mark_annotations_completed_enabled"
+        class="d-flex justify-center align-center"
+      >
+        <v-progress-linear
+          height="10"
+          color="success"
+          :model-value="submittedSharedRecordings.length"
+          min="0"
+          :max="sharedList.length"
+        />
+        <span class="ml-4 text-h6">
+          ({{ submittedSharedRecordings.length }}/{{ sharedList.length }})
+        </span>
+      </div>
     </v-card-text>
   </v-card>
 </template>
 
 <style scoped>
 .my-recordings {
-  height: 40vh;
-  max-height: 40vh;
   overflow-y:scroll;
 }
 .shared-recordings {
-  height: 40vh;
-  max-height: 40vh;
   overflow-y:scroll;
 }
 </style>

From 2dc0ce6542d877f9b01c57736f6ffb321c2ee095 Mon Sep 17 00:00:00 2001
From: Michael Nagler <mike.nagler@kitware.com>
Date: Mon, 5 Jan 2026 12:12:46 -0500
Subject: [PATCH 03/10] Navigate through unreviewed files (#294)

* Add settings for vetting

* Model submission status of recording annotations

* Add endpoint to get current user

* Show recording submission status in table view

* Don't filter out noise

The model can predict noise, so sorting it out of the species list can
lead to problems when loading/displaying that value in a list.

* Add endpoint to submit file-level annotations

* Allow submitting file annotations in interface

* Squash migrations

* Indicate when a file has been reviewed

* Format

* Show the current user's submitted label in sidebar

* Disable deletion for non-admin vetters

* Make 403 message more descriptive

* Show progress bar for submitted recordings

* Enable showing/hiding submitted recordings

* Toggle submitted recordings in sidebar

* Fix submission bug

* Add button to go to next unreviewed file

* Add function to get next unreviewed recording

* Navigate between unreviewed files

* Display a message when there are no files to review

* Reset selected annotation when recording changes
---
 .../components/RecordingAnnotationEditor.vue  |  6 +-
 .../src/components/RecordingAnnotations.vue   | 20 ++++-
 client/src/components/RecordingList.vue       | 17 ++--
 client/src/use/useState.ts                    | 73 +++++++++++++++++
 client/src/views/Spectrogram.vue              | 80 +++++++++++++++++++
 5 files changed, 185 insertions(+), 11 deletions(-)

diff --git a/client/src/components/RecordingAnnotationEditor.vue b/client/src/components/RecordingAnnotationEditor.vue
index 59d2b062..501a370e 100644
--- a/client/src/components/RecordingAnnotationEditor.vue
+++ b/client/src/components/RecordingAnnotationEditor.vue
@@ -51,7 +51,7 @@ export default defineComponent({
       default: () => undefined,
     },
   },
-  emits: ['update:annotation', 'delete:annotation'],
+  emits: ['update:annotation', 'delete:annotation', 'submit:annotation'],
   setup(props, { emit }) {
     const { configuration, currentUser } = useState();
     const speciesEdit: Ref<string[]> = ref( props.annotation?.species?.map((item) => item.species_code || item.common_name) || []);
@@ -105,8 +105,8 @@ export default defineComponent({
 
     const submitAnnotation = async () => {
       if (props.annotation && props.recordingId) {
-        await submitFileAnnotation(props.annotation.id);
-        emit('update:annotation');
+        const response = await submitFileAnnotation(props.annotation.id);
+        emit('submit:annotation', props.annotation, response.data.submitted);
       }
     };
 
diff --git a/client/src/components/RecordingAnnotations.vue b/client/src/components/RecordingAnnotations.vue
index 5ae57589..6951b98a 100644
--- a/client/src/components/RecordingAnnotations.vue
+++ b/client/src/components/RecordingAnnotations.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { computed, defineComponent, onMounted, PropType, Ref } from "vue";
+import { computed, defineComponent, onMounted, PropType, Ref, watch } from "vue";
 import { ref } from "vue";
 import { FileAnnotation, getFileAnnotations, putFileAnnotation, Species, UpdateFileAnnotation } from "@api/api";
 import RecordingAnnotationEditor from "./RecordingAnnotationEditor.vue";
@@ -38,7 +38,7 @@ export default defineComponent({
     const annotations: Ref<FileAnnotation[]> = ref([]);
     const detailsDialog = ref(false);
     const detailRecordingId = ref(-1);
-    const { configuration, isNaBat, currentUser } = useState();
+    const { configuration, isNaBat, currentUser, markAnnotationSubmitted } = useState();
 
     const setSelectedId = (annotation: FileAnnotation) => {
       selectedAnnotation.value = annotation;
@@ -56,6 +56,11 @@ export default defineComponent({
       }
     };
 
+    watch(() => props.recordingId, async () => {
+      selectedAnnotation.value = null;
+      await loadFileAnnotations();
+    });
+
     onMounted(async () => {
       await loadFileAnnotations();
       if (props.type  === 'nabat') {
@@ -100,6 +105,15 @@ export default defineComponent({
       }
     };
 
+    function handleSubmitAnnotation(annotation: FileAnnotation, submitSuccess: boolean) {
+      if (submitSuccess) {
+        annotation.submitted = true;
+        // Also update submitted status on the recording object
+        // This forces recomputation of allRecordings
+        markAnnotationSubmitted(props.recordingId, annotation.id);
+      }
+    }
+
     const loadDetails = async (id: number) => {
       detailRecordingId.value = id;
       detailsDialog.value = true;
@@ -143,6 +157,7 @@ export default defineComponent({
       disableNaBatAnnotations,
       currentNaBatUser,
       userSubmittedAnnotationId,
+      handleSubmitAnnotation,
     };
   },
 });
@@ -245,6 +260,7 @@ export default defineComponent({
       class="mt-4"
       @update:annotation="updatedAnnotation()"
       @delete:annotation="updatedAnnotation(true)"
+      @submit:annotation="handleSubmitAnnotation"
     />
     <v-dialog
       v-model="detailsDialog"
diff --git a/client/src/components/RecordingList.vue b/client/src/components/RecordingList.vue
index 9b3469e0..2bebcfb4 100644
--- a/client/src/components/RecordingList.vue
+++ b/client/src/components/RecordingList.vue
@@ -65,12 +65,17 @@ export default defineComponent({
 
 <template>
   <v-expansion-panels v-model="openPanel">
-    <v-checkbox
-      v-if="configuration.mark_annotations_completed_enabled"
-      v-model="showSubmittedRecordings"
-      label="Show submitted recordings"
-      hide-details
-    />
+    <v-col v-if="configuration.mark_annotations_completed_enabled">
+      <v-row>
+        <v-col>
+          <v-checkbox
+            v-model="showSubmittedRecordings"
+            label="Show submitted recordings"
+            hide-details
+          />
+        </v-col>
+      </v-row>
+    </v-col>
     <v-expansion-panel>
       <v-expansion-panel-title>My Recordings</v-expansion-panel-title>
       <v-expansion-panel-text>
diff --git a/client/src/use/useState.ts b/client/src/use/useState.ts
index ca632fba..cd5fba69 100644
--- a/client/src/use/useState.ts
+++ b/client/src/use/useState.ts
@@ -11,6 +11,7 @@ import {
   SpectrogramAnnotation,
   SpectrogramSequenceAnnotation,
   RecordingTag,
+  FileAnnotation,
 } from "../api/api";
 import {
   interpolateCividis,
@@ -47,6 +48,7 @@ const sequenceAnnotations: Ref<SpectrogramSequenceAnnotation[]> = ref([]);
 const otherUserAnnotations: Ref<OtherUserAnnotations> = ref({});
 const sharedList: Ref<Recording[]> = ref([]);
 const recordingList: Ref<Recording[]> = ref([]);
+const currentRecordingId: Ref<number | undefined> = ref(undefined);
 const recordingTagList: Ref<RecordingTag[]> = ref([]);
 const nextShared: Ref<Recording | false> = ref(false);
 const scaledVals: Ref<{ x: number; y: number }> = ref({ x: 1, y: 1 });
@@ -217,7 +219,74 @@ export default function useState() {
     }
   });
 
+  function hasSubmittedAnnotation(recording: Recording): boolean {
+    return recording.fileAnnotations.some((annotation: FileAnnotation) => (
+      annotation.owner === currentUser.value && annotation.submitted
+    ));
+  }
+
+  const allRecordings = computed(() => {
+    const recordings = recordingList.value.concat(sharedList.value);
+    return recordings.map((recording: Recording) => {
+      const isSubmitted = recording.fileAnnotations.some((annotation: FileAnnotation) => (
+        annotation.owner === currentUser.value && annotation.submitted
+      ));
+      return {
+        ...recording,
+        submitted: isSubmitted,
+      };
+    });
+  });
+
+  function markAnnotationSubmitted(recordingId: number, annotationId: number) {
+    const recording = allRecordings.value.find((recording: Recording) => recording.id === recordingId);
+    if (!recording) return;
+    const annotation = recording.fileAnnotations.find((annotation: FileAnnotation) => annotation.id === annotationId);
+    if (!annotation) return;
+    annotation.submitted = true;
+  }
+
+  const nextUnsubmittedRecordingId = computed(() => {
+    if (allRecordings.value.length === 0) {
+      return undefined;
+    }
+    const startingIndex = allRecordings.value.findIndex((recording: Recording) => recording.id === currentRecordingId.value) || 0;
+
+    for (let i = startingIndex + 1; i < allRecordings.value.length; i++) {
+      if (!hasSubmittedAnnotation(allRecordings.value[i])) {
+        return allRecordings.value[i].id;
+      }
+    }
 
+    for (let i = 0; i < startingIndex; i++) {
+      if (!hasSubmittedAnnotation(allRecordings.value[i])) {
+        return allRecordings.value[i].id;
+      }
+    }
+
+    return undefined;
+  });
+
+  const previousUnsubmittedRecordingId = computed(() =>{
+    if (allRecordings.value.length === 0) {
+      return undefined;
+    }
+    const startingIndex = allRecordings.value.findIndex((recording: Recording) => recording.id === currentRecordingId.value) || 0;
+
+    for (let i = startingIndex -1; i >= 0; i--) {
+      if (!hasSubmittedAnnotation(allRecordings.value[i])) {
+        return allRecordings.value[i].id;
+      }
+    }
+
+    for (let i = allRecordings.value.length - 1; i > startingIndex; i--) {
+      if (!hasSubmittedAnnotation(allRecordings.value[i])) {
+        return allRecordings.value[i].id;
+      }
+    }
+
+    return undefined;
+  });
 
   return {
     annotationState,
@@ -268,5 +337,9 @@ export default function useState() {
     unsubmittedSharedRecordings,
     myRecordingsDisplay,
     sharedRecordingsDisplay,
+    nextUnsubmittedRecordingId,
+    previousUnsubmittedRecordingId,
+    markAnnotationSubmitted,
+    currentRecordingId,
   };
 }
diff --git a/client/src/views/Spectrogram.vue b/client/src/views/Spectrogram.vue
index 5cfef021..5c4830a5 100644
--- a/client/src/views/Spectrogram.vue
+++ b/client/src/views/Spectrogram.vue
@@ -8,6 +8,7 @@ import {
   ref,
   watch,
 } from "vue";
+import { useRouter } from "vue-router";
 import {
   getSpecies,
   getAnnotations,
@@ -70,7 +71,11 @@ export default defineComponent({
       toggleDrawingBoundingBox,
       fixedAxes,
       toggleFixedAxes,
+      nextUnsubmittedRecordingId,
+      previousUnsubmittedRecordingId,
+      currentRecordingId,
     } = useState();
+    const router = useRouter();
     const images: Ref<HTMLImageElement[]> = ref([]);
     const spectroInfo: Ref<SpectroInfo | undefined> = ref();
     const speciesList: Ref<Species[]> = ref([]);
@@ -117,6 +122,7 @@ export default defineComponent({
     const loading = ref(false);
     const loadData = async () => {
       loading.value = true;
+      currentRecordingId.value = parseInt(props.id);
       loadedImage.value = false;
       const response = compressed.value
         ? await getSpectrogramCompressed(props.id)
@@ -264,7 +270,16 @@ export default defineComponent({
       viewCompressedOverlay.value = !viewCompressedOverlay.value;
     };
 
+    function goToNextUnreviewed() {
+      router.push({path: `/recording/${nextUnsubmittedRecordingId.value}/spectrogram`, replace: true });
+    }
+
+    function goToPreviousUnreviewed() {
+      router.push({ path: `/recording/${previousUnsubmittedRecordingId.value}/spectrogram`, replace: true });
+    }
+
     return {
+      configuration,
       annotationState,
       compressed,
       loadedImage,
@@ -308,6 +323,10 @@ export default defineComponent({
       colorScale,
       scaledVals,
       recordingInfo,
+      // Vetting
+      goToNextUnreviewed,
+      goToPreviousUnreviewed,
+      nextUnsubmittedRecordingId,
     };
   },
 });
@@ -614,6 +633,67 @@ export default defineComponent({
           </v-row>
         </v-card-title>
         <v-card-text class="pa-0">
+          <div
+            v-if="configuration.mark_annotations_completed_enabled"
+          >
+            <v-col>
+              <v-row>
+                <v-col>
+                  <span class="text-h6">
+                    Vetting Controls
+                  </span>
+                  <v-tooltip>
+                    <template #activator="{ props }">
+                      <v-icon
+                        v-bind="props"
+                        class="pb-2"
+                        size="medium"
+                      >
+                        mdi-help-circle
+                      </v-icon>
+                    </template>
+                    Navigate between unreviewed files
+                  </v-tooltip>
+                </v-col>
+              </v-row>
+              <v-row v-if="nextUnsubmittedRecordingId">
+                <v-col>
+                  <v-btn
+                    flat
+                    color="primary"
+                    @click="goToPreviousUnreviewed"
+                  >
+                    Prev
+                    <template #prepend>
+                      <v-icon>mdi-arrow-left</v-icon>
+                    </template>
+                  </v-btn>
+                </v-col>
+                <v-spacer />
+                <v-col>
+                  <v-btn
+                    flat
+                    color="primary"
+                    @click="goToNextUnreviewed"
+                  >
+                    Next
+                    <template #append>
+                      <v-icon>mdi-arrow-right</v-icon>
+                    </template>
+                  </v-btn>
+                </v-col>
+              </v-row>
+              <v-row v-else>
+                <v-col>
+                  There are no more files to review
+                </v-col>
+              </v-row>
+              <v-divider
+
+                class="my-2"
+              />
+            </v-col>
+          </div>
           <div v-if="sideTab === 'annotations'">
             <annotation-list
               :annotations="annotations"

From a253a0e86d1dfa50a957a58028fa68c5116a3a34 Mon Sep 17 00:00:00 2001
From: Michael Nagler <mike.nagler@kitware.com>
Date: Tue, 6 Jan 2026 10:31:05 -0500
Subject: [PATCH 04/10] Show a user their submitted labels (#295)

* Show submission status and label in sidebar

* Show user submitted label in Recordings view
---
 client/src/components/RecordingList.vue | 54 ++++++++++++++++++++++---
 client/src/views/Recordings.vue         | 27 ++++++++-----
 2 files changed, 65 insertions(+), 16 deletions(-)

diff --git a/client/src/components/RecordingList.vue b/client/src/components/RecordingList.vue
index 2bebcfb4..2a57554d 100644
--- a/client/src/components/RecordingList.vue
+++ b/client/src/components/RecordingList.vue
@@ -30,10 +30,13 @@ export default defineComponent({
     const openPanel = ref(1);
     const filtered = ref(true);
     const modifiedList = computed(() => {
-        if (filtered.value) {
-            return sharedList.value.filter((item) => !item.userMadeAnnotations);
-        }
-        return sharedList.value;
+      if (configuration.value.mark_annotations_completed_enabled) {
+        return sharedRecordingsDisplay.value;
+      }
+      if (filtered.value) {
+          return sharedList.value.filter((item) => !item.userMadeAnnotations);
+      }
+      return sharedList.value;
     });
 
     const userSubmittedAnnotation = (recording: Recording) => {
@@ -120,6 +123,23 @@ export default defineComponent({
               dense
             >
               <v-col>
+                <div>
+                  <b>Submitted: </b>
+                  <v-icon
+                    v-if="userSubmittedAnnotation(item)"
+                    color="success"
+                  >
+                    mdi-check
+                  </v-icon>
+                  <v-icon
+                    v-else
+                    color="error"
+                  >
+                    mdi-close
+                  </v-icon>
+                </div>
+              </v-col>
+              <v-col v-if="userSubmittedAnnotation(item)">
                 <b>My label: </b>
                 <span>{{ userSubmittedAnnotation(item) }}</span>
               </v-col>
@@ -132,6 +152,7 @@ export default defineComponent({
       <v-expansion-panel-title>Public</v-expansion-panel-title>
       <v-expansion-panel-text class="ma-0 pa-0">
         <v-switch
+          v-if="!configuration.mark_annotations_completed_enabled"
           v-model="filtered"
           label="Filter Annotated"
           dense
@@ -159,7 +180,7 @@ export default defineComponent({
               </v-col>
             </v-row>
             <v-row dense>
-              <v-col>
+              <v-col v-if="!configuration.mark_annotations_completed_enabled">
                 <div>
                   <b>Annotated:</b>
                   <v-icon
@@ -176,6 +197,29 @@ export default defineComponent({
                   </v-icon>
                 </div>
               </v-col>
+              <v-col v-else>
+                <div>
+                  <b>Submitted: </b>
+                  <v-icon
+                    v-if="userSubmittedAnnotation(item)"
+                    color="success"
+                  >
+                    mdi-check
+                  </v-icon>
+                  <v-icon
+                    v-else
+                    color="error"
+                  >
+                    mdi-close
+                  </v-icon>
+                </div>
+              </v-col>
+              <v-col
+                v-if="configuration.mark_annotations_completed_enabled && userSubmittedAnnotation(item)"
+              >
+                <b>My label: </b>
+                <span>{{ userSubmittedAnnotation(item) }}</span>
+              </v-col>
             </v-row>
           </v-card>
         </div>
diff --git a/client/src/views/Recordings.vue b/client/src/views/Recordings.vue
index 451fed5e..df7458ce 100644
--- a/client/src/views/Recordings.vue
+++ b/client/src/views/Recordings.vue
@@ -217,22 +217,27 @@ export default defineComponent({
       return filterTagSet.intersection(itemTagSet).size > 0;
     };
 
-    function submittedForCurrentUser(recording: Recording) {
-      const userSubmittedAnnotations = recording.fileAnnotations.filter((annotation: FileAnnotation) => (
+    function currentUserSubmission(recording: Recording) {
+      const userSubmittedAnnotation = recording.fileAnnotations.find((annotation: FileAnnotation) => (
         annotation.owner === currentUser.value && annotation.submitted
       ));
-      return userSubmittedAnnotations.length > 0;
+      return userSubmittedAnnotation?.species[0]?.species_code;
     }
 
-    function addSubmittedColumn() {
+    function addSubmittedColumns() {
       if (configuration.value.mark_annotations_completed_enabled) {
         const submittedHeader = {
           title: 'Submitted',
           key: 'submitted',
-          value: submittedForCurrentUser,
+          value: currentUserSubmission,
         };
-        headers.value.push(submittedHeader);
-        sharedHeaders.value.push(submittedHeader);
+        const myLabelHeader = {
+          title: 'My Submitted Label',
+          key: 'submittedLabel',
+          value: currentUserSubmission,
+        };
+        headers.value.push(submittedHeader, myLabelHeader);
+        sharedHeaders.value.push(submittedHeader, myLabelHeader);
       }
     }
 
@@ -248,7 +253,7 @@ export default defineComponent({
       await loadCurrentUser();
       await fetchRecordingTags();
       await fetchRecordings();
-      addSubmittedColumn();
+      addSubmittedColumns();
     });
 
     const uploadDone = () => {
@@ -319,7 +324,7 @@ export default defineComponent({
         recordingToDelete,
         editingRecording,
         dataLoading,
-        submittedForCurrentUser,
+        currentUserSubmission,
         configuration,
         submittedMyRecordings,
         submittedSharedRecordings,
@@ -539,7 +544,7 @@ export default defineComponent({
           #item.submitted="{ item }"
         >
           <v-icon
-            v-if="submittedForCurrentUser(item)"
+            v-if="currentUserSubmission(item)"
             color="success"
           >
             mdi-check
@@ -714,7 +719,7 @@ export default defineComponent({
           #item.submitted="{ item }"
         >
           <v-icon
-            v-if="submittedForCurrentUser(item)"
+            v-if="currentUserSubmission(item)"
             color="success"
           >
             mdi-check

From 0214dd389add0a9eef72832aafc2f73bf78b08ce Mon Sep 17 00:00:00 2001
From: Michael Nagler <mike.nagler@kitware.com>
Date: Thu, 8 Jan 2026 16:24:59 -0500
Subject: [PATCH 05/10] Hide detailed metadata in vetting mode (#296)

* In vetting mode, hide detailed metadata fields

* Hide annotation summary in vetting mode

* Show GRTS cell bounding box for vetters

* Indicate pending submissions

* Update title for pulse annotation column
---
 bats_ai/core/views/grts_cells.py              | 36 +++++++++++++
 client/src/api/api.ts                         | 18 +++++++
 client/src/components/MapLocation.vue         | 39 ++++++++++++--
 client/src/components/RecordingInfoDialog.vue |  4 ++
 .../src/components/RecordingInfoDisplay.vue   | 28 +++++++---
 client/src/views/Recordings.vue               | 52 ++++++++++++++++---
 6 files changed, 158 insertions(+), 19 deletions(-)

diff --git a/bats_ai/core/views/grts_cells.py b/bats_ai/core/views/grts_cells.py
index 95a3c078..67e578a3 100644
--- a/bats_ai/core/views/grts_cells.py
+++ b/bats_ai/core/views/grts_cells.py
@@ -81,3 +81,39 @@ def custom_sort_key(cell):
         return JsonResponse({'latitude': center_latitude, 'longitude': center_longitude})
     except GRTSCells.DoesNotExist:
         return JsonResponse({'error': f'Cell with cellId={id} does not exist'}, status=200)
+
+
+@router.get('/{id}/bbox')
+def get_grts_cell_bbox(request: HttpRequest, id: int):
+    try:
+        cells = GRTSCells.objects.filter(grts_cell_id=id)
+        custom_order = GRTSCells.sort_order()
+
+        def custom_sort_key(cell):
+            return custom_order.index(cell.sample_frame_id)
+
+        sorted_cells = sorted(cells, key=custom_sort_key)
+        cell = sorted_cells[0]
+        geom = cell.geom_4326
+
+        min_x, min_y, max_x, max_y = geom.extent
+
+        geojson = {
+            'type': 'Feature',
+            'geometry': {
+                'type': 'Polygon',
+                'coordinates': [
+                    [min_x, min_y],
+                    [min_x, max_y],
+                    [max_x, max_y],
+                    [max_x, min_y],
+                ],
+            },
+            'properties': {
+                'grts_cell_id': id,
+                'annotationType': 'rectangle',
+            },
+        }
+        return JsonResponse(geojson)
+    except (GRTSCells.DoesNotExist, IndexError):
+        return JsonResponse({'error': f'Cell with id {id} does not exist'}, status=200)
diff --git a/client/src/api/api.ts b/client/src/api/api.ts
index 246ce16d..4faae6f5 100644
--- a/client/src/api/api.ts
+++ b/client/src/api/api.ts
@@ -258,6 +258,18 @@ interface GRTSCellCenter {
   error?: string;
 }
 
+interface GRTSCellBbox {
+  type: string;
+  geometry: {
+    type: string;
+    coordinates: number[][];
+  };
+  properties: {
+    grts_cell_id: number;
+    annotationType: string;
+  };
+}
+
 export interface RecordingTag {
   id: number;
   text: string;
@@ -367,6 +379,11 @@ async function getOtherUserAnnotations(recordingId: string) {
 async function getCellLocation(cellId: number, quadrant?: "SW" | "NE" | "NW" | "SE") {
   return axiosInstance.get<GRTSCellCenter>(`/grts/${cellId}`, { params: { quadrant } });
 }
+
+async function getCellBbox(cellId: number) {
+  return await axiosInstance.get<GRTSCellBbox>(`/grts/${cellId}/bbox`);
+}
+
 async function getFileAnnotations(recordingId: number) {
   return axiosInstance.get<FileAnnotation[]>(`recording/${recordingId}/recording-annotations`);
 }
@@ -539,6 +556,7 @@ export {
   deleteAnnotation,
   deleteSequenceAnnotation,
   getCellLocation,
+  getCellBbox,
   getCellfromLocation,
   getGuanoMetadata,
   getFileAnnotations,
diff --git a/client/src/components/MapLocation.vue b/client/src/components/MapLocation.vue
index d23d04d5..3da9499f 100644
--- a/client/src/components/MapLocation.vue
+++ b/client/src/components/MapLocation.vue
@@ -2,6 +2,7 @@
 <script lang="ts">
 import { defineComponent, PropType, Ref, ref, onMounted } from "vue";
 import { watch } from "vue";
+import { getCellBbox } from "@api/api";
 import geo, { GeoEvent } from "geojs";
 
 export default defineComponent({
@@ -20,6 +21,10 @@ export default defineComponent({
       type: Object as PropType<{ x?: number; y?: number } | undefined>,
       default: () => undefined,
     },
+    grtsCellId: {
+      type: Number,
+      default: undefined,
+    },
     updateMap: {
       type: Number,
       default: 0,
@@ -32,23 +37,49 @@ export default defineComponent({
     const map: Ref<any> = ref();
     const mapLayer: Ref<any> = ref();
     const markerLayer: Ref<any> = ref();
+    const bboxLayer: Ref<any> = ref();
     const markerFeature: Ref<any> = ref();
+    const bboxFeature: Ref<any> = ref();
     const markerLocation: Ref<{ x: number; y: number } | null> = ref(null);
     const uiLayer: Ref<any> = ref();
     const mounted = ref(false);
-    onMounted((() => mounted.value = true));
-    watch(mapRef, () => {
+
+    onMounted(async () => {
+      mounted.value = true;
+    });
+    watch(mapRef, async () => {
       if (mapRef.value) {
         const centerPoint = props.location && props.location.x && props.location.y ? props.location : usCenter;
         const zoomLevel = props.location && props.location.x && props.location.y ? 6 : 3;
         map.value = geo.map({ node: mapRef.value, center: centerPoint, zoom: zoomLevel });
         mapLayer.value = map.value.createLayer("osm");
         markerLayer.value = map.value.createLayer("feature", { features: ["marker"] });
+        bboxLayer.value = map.value.createLayer("feature", { features: ["polygon"] });
         uiLayer.value = map.value.createLayer("ui");
         markerFeature.value = markerLayer.value.createFeature("marker");
+        bboxFeature.value = bboxLayer.value.createFeature("polygon");
         uiLayer.value.createWidget('slider');
 
-        if (props.location?.x && props.location?.y) {
+
+        if (props.grtsCellId !== undefined) {
+          const annotation = await getCellBbox(props.grtsCellId);
+          const coordinates = annotation.data.geometry.coordinates;
+          const data = coordinates.map((point: number[]) => ({ x: point[0], y: point[1] }));
+          data.push({ x: coordinates[0][0], y: coordinates[0][1] });
+          bboxFeature.value.data([data]).style({
+            stroke: true,
+            strokeWidth: 1,
+            strokeColor: 'black',
+            fill: false,
+          }).draw();
+          bboxLayer.value.draw();
+          const center = {
+            x: (data[0].x + data[2].x) / 2,
+            y: (data[0].y + data[1].y) / 2
+          };
+          map.value.center(center);
+          map.value.zoom(9);
+        } else if (props.location?.x && props.location?.y) {
             markerLocation.value = { x: props.location?.x, y: props.location.y };
             markerFeature.value
               .data([markerLocation.value])
@@ -104,8 +135,8 @@ export default defineComponent({
                 rotateWithMap: false,
               })
               .draw();
-              const centerPoint = props.location && props.location.x && props.location.y ? props.location : usCenter;
               const zoomLevel = props.location && props.location.x && props.location.y ? 6 : 3;
+              const centerPoint = props.location && props.location.x && props.location.y ? props.location : usCenter;
               if (map.value) {
                 map.value.zoom(zoomLevel);
                 map.value.center(centerPoint);
diff --git a/client/src/components/RecordingInfoDialog.vue b/client/src/components/RecordingInfoDialog.vue
index 4e6fc240..ed619f77 100644
--- a/client/src/components/RecordingInfoDialog.vue
+++ b/client/src/components/RecordingInfoDialog.vue
@@ -1,6 +1,7 @@
 <script lang="ts">
 import { defineComponent, onMounted, ref, Ref, watch } from 'vue';
 import { getRecording, Recording } from '../api/api';
+import useState from '@use/useState';
 import RecordingInfoDisplay from './RecordingInfoDisplay.vue';
 
 
@@ -17,6 +18,7 @@ export default defineComponent({
   emits: ['close'],
   setup(props) {
     const recordingInfo: Ref<Recording | null> = ref(null);
+    const { configuration } = useState();
 
     const loadData = async () => {
       const recording = getRecording(props.id);
@@ -26,6 +28,7 @@ export default defineComponent({
     onMounted(() => loadData());
     return {
       recordingInfo,
+      configuration,
     };
   },
 });
@@ -35,6 +38,7 @@ export default defineComponent({
   <recording-info-display
     v-if="recordingInfo"
     :recording-info="recordingInfo"
+    :minimal-metadata="configuration.mark_annotations_completed_enabled"
     @close="$emit('close')"
   />
 </template>
diff --git a/client/src/components/RecordingInfoDisplay.vue b/client/src/components/RecordingInfoDisplay.vue
index 6ee1c43f..5dc3dcc9 100644
--- a/client/src/components/RecordingInfoDisplay.vue
+++ b/client/src/components/RecordingInfoDisplay.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { defineComponent, PropType } from 'vue';
+import { computed, defineComponent, PropType } from 'vue';
 import { Recording } from '../api/api';
 import MapLocation from './MapLocation.vue';
 
@@ -16,12 +16,25 @@ export default defineComponent({
     disableButton: {
       type: Boolean,
       default: false,
+    },
+    minimalMetadata: {
+      type: Boolean,
+      default: false,
     }
   },
   emits: ['close'],
-  setup() {
+  setup(props) {
+    const location = computed(() => {
+      if (!props.minimalMetadata && props.recordingInfo.recording_location) {
+        return {
+          x: props.recordingInfo.recording_location.coordinates[0],
+          y:props.recordingInfo.recording_location.coordinates[1]
+        };
+      }
+      return undefined;
+    });
     return {
-
+      location,
     };
   },
 });
@@ -42,10 +55,10 @@ export default defineComponent({
       <v-row>
         <div><b>Time:</b><span>{{ recordingInfo.recorded_date }}</span> <span> {{ recordingInfo.recorded_time }}</span></div>
       </v-row>
-      <v-row>
+      <v-row v-if="!minimalMetadata">
         <div><b>Equipment:</b><span>{{ recordingInfo.equipment || 'None' }}</span></div>
       </v-row>
-      <v-row>
+      <v-row v-if="!minimalMetadata">
         <div><b>Comments:</b><span>{{ recordingInfo.comments || 'None' }}</span></div>
       </v-row>
       <v-row>
@@ -56,11 +69,12 @@ export default defineComponent({
         <map-location
           :editor="false"
           :size="{width: 400, height: 400}"
-          :location="{ x: recordingInfo.recording_location.coordinates[0], y:recordingInfo.recording_location.coordinates[1]}"
+          :location="location"
+          :grts-cell-id="recordingInfo.grts_cell_id || undefined"
         />
         <v-spacer />
       </v-row>
-      
+
       <div
         v-if="recordingInfo.site_name"
         class="mt-5"
diff --git a/client/src/views/Recordings.vue b/client/src/views/Recordings.vue
index df7458ce..ef15dbc4 100644
--- a/client/src/views/Recordings.vue
+++ b/client/src/views/Recordings.vue
@@ -91,7 +91,7 @@ export default defineComponent({
           key:'comments'
         },
         {
-          title:'Users Annotated',
+          title:'User Pulse Annotations',
           key:'userAnnotations',
         },
         {
@@ -217,6 +217,16 @@ export default defineComponent({
       return filterTagSet.intersection(itemTagSet).size > 0;
     };
 
+    function currentUserSubmissionStatus(recording: Recording) {
+      const userAnnotations = recording.fileAnnotations.filter((annotation: FileAnnotation) => (
+        annotation.owner === currentUser.value && annotation.model === 'User Defined'
+      ));
+      if (userAnnotations.find((annotation: FileAnnotation) => annotation.submitted)) {
+        return 1;
+      }
+      return userAnnotations.length ? 0 : -1;
+    }
+
     function currentUserSubmission(recording: Recording) {
       const userSubmittedAnnotation = recording.fileAnnotations.find((annotation: FileAnnotation) => (
         annotation.owner === currentUser.value && annotation.submitted
@@ -227,9 +237,9 @@ export default defineComponent({
     function addSubmittedColumns() {
       if (configuration.value.mark_annotations_completed_enabled) {
         const submittedHeader = {
-          title: 'Submitted',
+          title: 'Submission Status',
           key: 'submitted',
-          value: currentUserSubmission,
+          value: currentUserSubmissionStatus,
         };
         const myLabelHeader = {
           title: 'My Submitted Label',
@@ -241,6 +251,15 @@ export default defineComponent({
       }
     }
 
+    function hideDetailedMetadataColumns() {
+      if (!configuration.value.mark_annotations_completed_enabled) return;
+      const filterDetailedMetadataFunction = (val: { key: string }) => (
+        !['comments', 'details', 'annotation', 'userAnnotations'].includes(val.key)
+      );
+      headers.value = headers.value.filter(filterDetailedMetadataFunction);
+      sharedHeaders.value = sharedHeaders.value.filter(filterDetailedMetadataFunction);
+    }
+
     const recordingListStyles = computed(() => {
       const sectionHeight = configuration.value.mark_annotations_completed_enabled ? '35vh' : '40vh';
       return {
@@ -250,10 +269,11 @@ export default defineComponent({
     });
 
     onMounted(async () => {
+      addSubmittedColumns();
+      hideDetailedMetadataColumns();
       await loadCurrentUser();
       await fetchRecordingTags();
       await fetchRecordings();
-      addSubmittedColumns();
     });
 
     const uploadDone = () => {
@@ -325,6 +345,7 @@ export default defineComponent({
         editingRecording,
         dataLoading,
         currentUserSubmission,
+        currentUserSubmissionStatus,
         configuration,
         submittedMyRecordings,
         submittedSharedRecordings,
@@ -495,6 +516,7 @@ export default defineComponent({
                 :editor="false"
                 :size="{width: 400, height: 400}"
                 :location="{ x: item.recording_location.coordinates[0], y: item.recording_location.coordinates[1]}"
+                :grts-cell-id="configuration.mark_annotations_completed_enabled ? item.grts_cell_id || undefined : undefined"
               />
             </v-card>
           </v-menu>
@@ -519,6 +541,7 @@ export default defineComponent({
             </template>
             <recording-info-display
               :recording-info="item"
+              :minimal-metadata="configuration.mark_annotations_completed_enabled"
               disable-button
             />
           </v-menu>
@@ -544,17 +567,23 @@ export default defineComponent({
           #item.submitted="{ item }"
         >
           <v-icon
-            v-if="currentUserSubmission(item)"
+            v-if="currentUserSubmissionStatus(item) === 1"
             color="success"
           >
             mdi-check
           </v-icon>
           <v-icon
-            v-else
+            v-else-if="currentUserSubmissionStatus(item) === -1"
             color="error"
           >
             mdi-close
           </v-icon>
+          <v-icon
+            v-else
+            color="warning"
+          >
+            mdi-circle-outline
+          </v-icon>
         </template>
         <template #bottom />
       </v-data-table>
@@ -670,6 +699,7 @@ export default defineComponent({
                 :editor="false"
                 :size="{width: 400, height: 400}"
                 :location="{ x: item.recording_location.coordinates[0], y: item.recording_location.coordinates[1]}"
+                :grts-cell-id="configuration.mark_annotations_completed_enabled ? item.grts_cell_id || undefined : undefined"
               />
             </v-card>
           </v-menu>
@@ -719,17 +749,23 @@ export default defineComponent({
           #item.submitted="{ item }"
         >
           <v-icon
-            v-if="currentUserSubmission(item)"
+            v-if="currentUserSubmissionStatus(item) === 1"
             color="success"
           >
             mdi-check
           </v-icon>
           <v-icon
-            v-else
+            v-else-if="currentUserSubmissionStatus(item) === -1"
             color="error"
           >
             mdi-close
           </v-icon>
+          <v-icon
+            v-else
+            color="warning"
+          >
+            mdi-circle-outline
+          </v-icon>
         </template>
         <template #bottom />
       </v-data-table>

From 9ed4aaac648715d65e72fe24bd8dfb2e0c284d9d Mon Sep 17 00:00:00 2001
From: Michael Nagler <mike.nagler@kitware.com>
Date: Mon, 12 Jan 2026 16:19:14 -0500
Subject: [PATCH 06/10] Hide "my recordings" if non-admins can't upload (#298)

* Hide "my recordings" if non-admins can't upload

* Add missing semicolon

Co-authored-by: Bryon Lewis <61746913+BryonLewis@users.noreply.github.com>

* Hide progress bar for my recordings when needed

---------

Co-authored-by: Bryon Lewis <61746913+BryonLewis@users.noreply.github.com>
---
 client/src/components/RecordingList.vue |  2 +-
 client/src/views/Recordings.vue         | 40 +++++++++++++++++++------
 2 files changed, 32 insertions(+), 10 deletions(-)

diff --git a/client/src/components/RecordingList.vue b/client/src/components/RecordingList.vue
index 2a57554d..0dce3ecd 100644
--- a/client/src/components/RecordingList.vue
+++ b/client/src/components/RecordingList.vue
@@ -79,7 +79,7 @@ export default defineComponent({
         </v-col>
       </v-row>
     </v-col>
-    <v-expansion-panel>
+    <v-expansion-panel v-if="configuration.is_admin || configuration.non_admin_upload_enabled">
       <v-expansion-panel-title>My Recordings</v-expansion-panel-title>
       <v-expansion-panel-text>
         <div
diff --git a/client/src/views/Recordings.vue b/client/src/views/Recordings.vue
index ef15dbc4..28d93cc5 100644
--- a/client/src/views/Recordings.vue
+++ b/client/src/views/Recordings.vue
@@ -12,6 +12,7 @@ import {
   Recording,
   FileAnnotation,
   getRecordingTags,
+  getConfiguration,
 } from '../api/api';
 import UploadRecording, { EditingRecording } from '@components/UploadRecording.vue';
 import MapLocation from '@components/MapLocation.vue';
@@ -260,7 +261,7 @@ export default defineComponent({
       sharedHeaders.value = sharedHeaders.value.filter(filterDetailedMetadataFunction);
     }
 
-    const recordingListStyles = computed(() => {
+    const myRecordingListStyles = computed(() => {
       const sectionHeight = configuration.value.mark_annotations_completed_enabled ? '35vh' : '40vh';
       return {
         'height': sectionHeight,
@@ -268,6 +269,22 @@ export default defineComponent({
       };
     });
 
+    const sharedRecordingListStyles = computed(() => {
+      let sectionHeight: string;
+      if (configuration.value.mark_annotations_completed_enabled) {
+        sectionHeight = '35vh';
+      } else {
+        sectionHeight = '40vh';
+      }
+      if (!configuration.value.is_admin && !configuration.value.non_admin_upload_enabled) {
+        sectionHeight = '75vh';
+      }
+      return {
+        'height': sectionHeight,
+        'max-height': sectionHeight,
+      };
+    });
+
     onMounted(async () => {
       addSubmittedColumns();
       hideDetailedMetadataColumns();
@@ -349,7 +366,8 @@ export default defineComponent({
         configuration,
         submittedMyRecordings,
         submittedSharedRecordings,
-        recordingListStyles,
+        myRecordingListStyles,
+        sharedRecordingListStyles,
         showSubmittedRecordings,
         myRecordingsDisplay,
         sharedRecordingsDisplay,
@@ -361,20 +379,19 @@ export default defineComponent({
 <template>
   <v-card>
     <v-card-title>
-      <v-row class="py-2">
-        <div>
+      <v-row>
+        <div v-if="configuration.is_admin || configuration.non_admin_upload_enabled">
           My Recordings
         </div>
         <v-spacer />
         <div class="d-flex justify-center align-center">
           <v-checkbox
-            v-if="configuration.mark_annotations_completed_enabled"
             v-model="showSubmittedRecordings"
             class="mr-4"
             label="Show submitted recordings"
             hide-details
           />
-          <v-menu>
+          <v-menu v-if="configuration.is_admin || configuration.non_admin_upload_enabled">
             <template #activator="{ props }">
               <v-btn
                 color="primary"
@@ -424,6 +441,7 @@ export default defineComponent({
         </v-card>
       </v-dialog>
       <v-data-table
+        v-if="configuration.is_admin || configuration.non_admin_upload_enabled"
         v-model:items-per-page="itemsPerPage"
         :headers="headers"
         :items="myRecordingsDisplay"
@@ -433,7 +451,7 @@ export default defineComponent({
         density="compact"
         :loading="dataLoading"
         class="elevation-1 my-recordings"
-        :style="recordingListStyles"
+        :style="myRecordingListStyles"
       >
         <template #top>
           <div max-height="100px">
@@ -588,7 +606,11 @@ export default defineComponent({
         <template #bottom />
       </v-data-table>
       <div
-        v-if="recordingList.length && configuration.mark_annotations_completed_enabled"
+        v-if="
+          recordingList.length
+            && configuration.mark_annotations_completed_enabled
+            && (configuration.is_admin || configuration.non_admin_upload_enabled)
+        "
         class="d-flex justify-center align-center"
       >
         <v-progress-linear
@@ -642,7 +664,7 @@ export default defineComponent({
         :loading="dataLoading"
         density="compact"
         class="elevation-1 shared-recordings"
-        :style="recordingListStyles"
+        :style="sharedRecordingListStyles"
       >
         <template #top>
           <div max-height="100px">

From 366944a3a2db280d4afbfbc52ad9927eb9b7bb08 Mon Sep 17 00:00:00 2001
From: Michael Nagler <mike.nagler@kitware.com>
Date: Wed, 14 Jan 2026 12:17:04 -0500
Subject: [PATCH 07/10] Allow users to add reference materials (#297)

* Allow users to add reference materials

* Model vetting details per user

* Update vetting details from front end

* Use separate component for reference materials

* Add length check and test to API layer

* Swap position of close/save for consistency

* Use correct max length value for vuetify rule

Co-authored-by: Bryon Lewis <61746913+BryonLewis@users.noreply.github.com>

---------

Co-authored-by: Bryon Lewis <61746913+BryonLewis@users.noreply.github.com>
---
 bats_ai/api.py                                |   2 +
 bats_ai/core/admin/__init__.py                |   2 +
 bats_ai/core/admin/vetting_details.py         |  13 ++
 .../0025_vettingdetails_and_more.py           |  41 +++++++
 bats_ai/core/models/__init__.py               |   2 +
 bats_ai/core/models/vetting_details.py        |  20 +++
 bats_ai/core/tests/conftest.py                |  14 ++-
 bats_ai/core/tests/factories.py               |  11 ++
 bats_ai/core/tests/test_vetting_details.py    | 114 ++++++++++++++++++
 bats_ai/core/views/__init__.py                |   2 +
 bats_ai/core/views/configuration.py           |   1 +
 bats_ai/core/views/vetting_details.py         |  62 ++++++++++
 client/src/App.vue                            |  14 ++-
 client/src/api/api.ts                         |  35 +++++-
 .../components/ReferenceMaterialsDialog.vue   |  79 ++++++++++++
 client/src/use/useState.ts                    |  19 +++
 client/src/views/Recordings.vue               |   2 -
 client/src/views/Spectrogram.vue              |   9 +-
 18 files changed, 435 insertions(+), 7 deletions(-)
 create mode 100644 bats_ai/core/admin/vetting_details.py
 create mode 100644 bats_ai/core/migrations/0025_vettingdetails_and_more.py
 create mode 100644 bats_ai/core/models/vetting_details.py
 create mode 100644 bats_ai/core/tests/test_vetting_details.py
 create mode 100644 bats_ai/core/views/vetting_details.py
 create mode 100644 client/src/components/ReferenceMaterialsDialog.vue

diff --git a/bats_ai/api.py b/bats_ai/api.py
index 4cd1c0bb..9b1cc1ca 100644
--- a/bats_ai/api.py
+++ b/bats_ai/api.py
@@ -13,6 +13,7 @@
     RecordingRouter,
     RecordingTagRouter,
     SpeciesRouter,
+    VettingRouter,
 )
 from bats_ai.core.views.nabat import NABatConfigurationRouter, NABatRecordingRouter
 
@@ -46,3 +47,4 @@ def global_auth(request):
 api.add_router('/recording-tag/', RecordingTagRouter)
 api.add_router('/nabat/recording/', NABatRecordingRouter)
 api.add_router('/nabat/configuration/', NABatConfigurationRouter)
+api.add_router('/vetting/', VettingRouter)
diff --git a/bats_ai/core/admin/__init__.py b/bats_ai/core/admin/__init__.py
index fe5a419e..748798fd 100644
--- a/bats_ai/core/admin/__init__.py
+++ b/bats_ai/core/admin/__init__.py
@@ -18,6 +18,7 @@
 from .species import SpeciesAdmin
 from .spectrogram import SpectrogramAdmin
 from .spectrogram_image import SpectrogramImageAdmin
+from .vetting_details import VettingDetailsAdmin
 
 __all__ = [
     'AnnotationsAdmin',
@@ -34,6 +35,7 @@
     'ConfigurationAdmin',
     'ExportedAnnotationFileAdmin',
     'SpectrogramImageAdmin',
+    'VettingDetailsAdmin',
     # NABat Models
     'NABatRecordingAnnotationAdmin',
     'NABatCompressedSpectrogramAdmin',
diff --git a/bats_ai/core/admin/vetting_details.py b/bats_ai/core/admin/vetting_details.py
new file mode 100644
index 00000000..a350c879
--- /dev/null
+++ b/bats_ai/core/admin/vetting_details.py
@@ -0,0 +1,13 @@
+from django.contrib import admin
+
+from bats_ai.core.models import VettingDetails
+
+
+@admin.register(VettingDetails)
+class VettingDetailsAdmin(admin.ModelAdmin):
+    list_display = [
+        'pk',
+        'user',
+        # 'reference_materials',
+    ]
+    search_fields = ('user',)
diff --git a/bats_ai/core/migrations/0025_vettingdetails_and_more.py b/bats_ai/core/migrations/0025_vettingdetails_and_more.py
new file mode 100644
index 00000000..967f5481
--- /dev/null
+++ b/bats_ai/core/migrations/0025_vettingdetails_and_more.py
@@ -0,0 +1,41 @@
+# Generated by Django 4.2.23 on 2026-01-08 18:57
+
+from django.conf import settings
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        migrations.swappable_dependency(settings.AUTH_USER_MODEL),
+        ('core', '0024_configuration_mark_annotations_completed_enabled_and_more'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='VettingDetails',
+            fields=[
+                (
+                    'id',
+                    models.BigAutoField(
+                        auto_created=True, primary_key=True, serialize=False, verbose_name='ID'
+                    ),
+                ),
+                ('reference_materials', models.TextField(blank=True)),
+                (
+                    'user',
+                    models.OneToOneField(
+                        on_delete=django.db.models.deletion.CASCADE, to=settings.AUTH_USER_MODEL
+                    ),
+                ),
+            ],
+        ),
+        migrations.AddConstraint(
+            model_name='vettingdetails',
+            constraint=models.CheckConstraint(
+                check=models.Q(('reference_materials__length__lte', 2000)),
+                name='reference_materials_max_2000',
+            ),
+        ),
+    ]
diff --git a/bats_ai/core/models/__init__.py b/bats_ai/core/models/__init__.py
index ad11fab9..01dee04a 100644
--- a/bats_ai/core/models/__init__.py
+++ b/bats_ai/core/models/__init__.py
@@ -12,6 +12,7 @@
 from .species import Species
 from .spectrogram import Spectrogram
 from .spectrogram_image import SpectrogramImage
+from .vetting_details import VettingDetails
 
 __all__ = [
     'Annotations',
@@ -30,4 +31,5 @@
     'ProcessingTaskType',
     'ExportedAnnotationFile',
     'SpectrogramImage',
+    'VettingDetails',
 ]
diff --git a/bats_ai/core/models/vetting_details.py b/bats_ai/core/models/vetting_details.py
new file mode 100644
index 00000000..41f84fcd
--- /dev/null
+++ b/bats_ai/core/models/vetting_details.py
@@ -0,0 +1,20 @@
+from django.contrib.auth.models import User
+from django.db import models
+from django.db.models import Q
+from django.db.models.functions import Length
+
+models.TextField.register_lookup(Length, 'length')
+
+
+class VettingDetails(models.Model):
+    user = models.OneToOneField(User, on_delete=models.CASCADE)
+    reference_materials = models.TextField(blank=True)
+
+    class Meta:
+        constraints = [
+            models.CheckConstraint(
+                # TODO change to 'condition' in Django v6
+                check=Q(reference_materials__length__lte=2000),
+                name='reference_materials_max_2000',
+            )
+        ]
diff --git a/bats_ai/core/tests/conftest.py b/bats_ai/core/tests/conftest.py
index d6545dc3..d1c5e8fe 100644
--- a/bats_ai/core/tests/conftest.py
+++ b/bats_ai/core/tests/conftest.py
@@ -2,7 +2,9 @@
 from django.test import Client
 import pytest
 
-from .factories import SuperuserFactory, UserFactory
+from bats_ai.core.models import VettingDetails
+
+from .factories import SuperuserFactory, UserFactory, VettingDetailsFactory
 
 
 @pytest.fixture
@@ -32,3 +34,13 @@ def authorized_client(superuser: User) -> Client:
     client = Client()
     client.force_login(user=superuser)
     return client
+
+
+@pytest.fixture
+def vetting_details(user: User) -> VettingDetails:
+    return VettingDetailsFactory(user=user)
+
+
+@pytest.fixture
+def random_user_vetting_details() -> VettingDetails:
+    return VettingDetailsFactory(user=UserFactory())
diff --git a/bats_ai/core/tests/factories.py b/bats_ai/core/tests/factories.py
index ccb88e77..708fbacf 100644
--- a/bats_ai/core/tests/factories.py
+++ b/bats_ai/core/tests/factories.py
@@ -1,6 +1,8 @@
 from django.contrib.auth.models import User
 import factory.django
 
+from bats_ai.core.models import VettingDetails
+
 
 class UserFactory(factory.django.DjangoModelFactory[User]):
     class Meta:
@@ -28,3 +30,12 @@ class Meta:
     def _create(cls, model_class, *args, **kwargs):
         manager = cls._get_manager(model_class)
         return manager.create_superuser(*args, **kwargs)
+
+
+class VettingDetailsFactory(factory.django.DjangoModelFactory[VettingDetails]):
+
+    class Meta:
+        model = VettingDetails
+
+    user = factory.SubFactory(UserFactory)
+    reference_materials = factory.Faker('paragraph', nb_sentences=3)
diff --git a/bats_ai/core/tests/test_vetting_details.py b/bats_ai/core/tests/test_vetting_details.py
new file mode 100644
index 00000000..e5537267
--- /dev/null
+++ b/bats_ai/core/tests/test_vetting_details.py
@@ -0,0 +1,114 @@
+import pytest
+
+from .factories import UserFactory, VettingDetailsFactory
+
+
+@pytest.mark.parametrize(
+    'client_fixture,status_code',
+    [
+        ('client', 401),
+        ('authenticated_client', 200),
+        ('authorized_client', 200),
+    ],
+)
+@pytest.mark.django_db
+def test_get_vetting_details(client_fixture, status_code, user, vetting_details, request):
+    api_client = request.getfixturevalue(client_fixture)
+    resp = api_client.get(f'/api/v1/vetting/user/{user.id}')
+    assert resp.status_code == status_code
+    if status_code == 200:
+        assert resp.json()['reference_materials'] == vetting_details.reference_materials
+
+
+@pytest.mark.django_db
+def test_get_vetting_details_other_user(authenticated_client):
+    other_user = UserFactory()
+    VettingDetailsFactory(user=other_user)
+    resp = authenticated_client.get(f'/api/v1/vetting/user/{other_user.id}')
+    assert resp.status_code == 404
+
+
+@pytest.mark.django_db
+def test_create_vetting_details(client):
+    test_text = 'foo'
+    data = {'reference_materials': test_text}
+    test_user = UserFactory()
+    client.force_login(user=test_user)
+    resp = client.post(
+        f'/api/v1/vetting/user/{test_user.id}', data=data, content_type='application/json'
+    )
+    assert resp.status_code == 200
+    assert resp.json()['user_id'] == test_user.id
+
+
+@pytest.mark.parametrize(
+    'client_fixture,status_code',
+    [
+        ('authenticated_client', 404),
+        ('authorized_client', 200),
+    ],
+)
+@pytest.mark.django_db
+def test_create_vetting_details_other_user(client_fixture, status_code, request):
+    api_client = request.getfixturevalue(client_fixture)
+    test_text = 'foo'
+    data = {'reference_materials': test_text}
+    other_user = UserFactory()
+    resp = api_client.post(
+        f'/api/v1/vetting/user/{other_user.id}', data=data, content_type='application/json'
+    )
+    assert resp.status_code == status_code
+    if status_code == 200:
+        assert resp.json()['reference_materials'] == test_text
+
+
+@pytest.mark.django_db
+def test_update_vetting_details(client):
+    test_text = 'bar'
+    data = {'reference_materials': 'bar'}
+    test_user = UserFactory()
+    VettingDetailsFactory(user=test_user, reference_materials='foo')
+    client.force_login(test_user)
+
+    initial_resp = client.get(f'/api/v1/vetting/user/{test_user.id}')
+    assert initial_resp.status_code == 200
+
+    resp = client.post(
+        f'/api/v1/vetting/user/{test_user.id}', data=data, content_type='application/json'
+    )
+    assert resp.status_code == 200
+
+    new_details_response = client.get(f'/api/v1/vetting/user/{test_user.id}')
+    assert new_details_response.status_code == 200
+    assert new_details_response.json()['reference_materials'] == test_text
+
+
+@pytest.mark.parametrize(
+    'client_fixture,status_code',
+    [
+        ('authenticated_client', 404),
+        ('authorized_client', 200),
+    ],
+)
+@pytest.mark.django_db
+def test_update_vetting_details_other_user(
+    client_fixture, status_code, random_user_vetting_details, request
+):
+    api_client = request.getfixturevalue(client_fixture)
+    resp = api_client.post(
+        f'/api/v1/vetting/user/{random_user_vetting_details.user.id}',
+        data={'reference_materials': 'foo'},
+        content_type='application/json',
+    )
+    assert resp.status_code == status_code
+
+
+@pytest.mark.django_db
+def test_update_vetting_details_length_constraint(authorized_client, random_user_vetting_details):
+    data = {'reference_materials': 'a' * 2001}
+    resp = authorized_client.post(
+        f'/api/v1/vetting/user/{random_user_vetting_details.user.id}',
+        data=data,
+        content_type='application/json',
+    )
+    assert resp.status_code == 400
diff --git a/bats_ai/core/views/__init__.py b/bats_ai/core/views/__init__.py
index 0be8ef80..ea390e46 100644
--- a/bats_ai/core/views/__init__.py
+++ b/bats_ai/core/views/__init__.py
@@ -9,6 +9,7 @@
 from .recording_tag import router as RecordingTagRouter
 from .sequence_annotations import router as SequenceAnnotationRouter
 from .species import router as SpeciesRouter
+from .vetting_details import router as VettingRouter
 
 __all__ = [
     'RecordingRouter',
@@ -22,4 +23,5 @@
     'ProcessingTaskRouter',
     'ExportAnnotationRouter',
     'RecordingTagRouter',
+    'VettingRouter',
 ]
diff --git a/bats_ai/core/views/configuration.py b/bats_ai/core/views/configuration.py
index 494beb58..be7c66f1 100644
--- a/bats_ai/core/views/configuration.py
+++ b/bats_ai/core/views/configuration.py
@@ -75,5 +75,6 @@ def get_current_user(request):
         return {
             'email': request.user.email,
             'name': request.user.username,
+            'id': request.user.id,
         }
     return {'email': '', 'name': ''}
diff --git a/bats_ai/core/views/vetting_details.py b/bats_ai/core/views/vetting_details.py
new file mode 100644
index 00000000..38a9d5eb
--- /dev/null
+++ b/bats_ai/core/views/vetting_details.py
@@ -0,0 +1,62 @@
+from django.http import Http404, HttpRequest, HttpResponseBadRequest
+from ninja import Schema
+from ninja.pagination import RouterPaginated
+
+from bats_ai.core.models import VettingDetails
+
+router = RouterPaginated()
+
+
+class VettingDetailsSchema(Schema):
+    id: int
+    user_id: int
+    reference_materials: str
+
+    @classmethod
+    def from_orm(cls, obj):
+        print(obj)
+        return cls(id=obj.id, reference_materials=obj.reference_materials, user_id=obj.user_id)
+
+
+class UpdateVettingDetailsSchema(Schema):
+    reference_materials: str
+
+
+@router.get('/user/{user_id}', response=VettingDetailsSchema)
+def get_vetting_details_for_user(request: HttpRequest, user_id: int):
+    details = VettingDetails.objects.filter(user_id=user_id).first()
+
+    if not details:
+        raise Http404()
+
+    if details.user != request.user and not request.user.is_staff:
+        # Don't leak user IDs, prefer to return a 404 over a 403
+        raise Http404
+
+    return details
+
+
+@router.post('/user/{user_id}', response=VettingDetailsSchema)
+def update_or_create_vetting_details_for_user(
+    request: HttpRequest,
+    payload: UpdateVettingDetailsSchema,
+    user_id: int,
+):
+    if not (request.user.pk == user_id or request.user.is_staff):
+        raise Http404
+
+    if len(payload.reference_materials) > 2000:
+        return HttpResponseBadRequest(
+            'reference_materials exceeds maximum length of 2000 characters'
+        )
+
+    details = VettingDetails.objects.filter(user_id=user_id).first()
+
+    if not details:
+        details = VettingDetails(user=request.user, reference_materials=payload.reference_materials)
+    else:
+        details.reference_materials = payload.reference_materials
+
+    details.save()
+
+    return details
diff --git a/client/src/App.vue b/client/src/App.vue
index 3f6ae304..c7d25f30 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -12,7 +12,15 @@ export default defineComponent({
     const oauthClient = inject<OAuthClient>("oauthClient");
     const router = useRouter();
     const route = useRoute();
-    const { nextShared, sharedList, sideTab, loadConfiguration, configuration } = useState();
+    const {
+      nextShared,
+      sharedList,
+      sideTab,
+      loadConfiguration,
+      configuration ,
+      loadCurrentUser,
+      loadReviewerMaterials,
+    } = useState();
     const getShared = async () => {
       sharedList.value = (await getRecordings(true)).data;
     };
@@ -24,7 +32,9 @@ export default defineComponent({
     const checkLogin = async () => {
       if (oauthClient.isLoggedIn) {
         loginText.value = "Logout";
-        loadConfiguration();
+        await loadConfiguration();
+        await loadCurrentUser();
+        await loadReviewerMaterials();
         if (sharedList.value.length === 0) {
           getShared();
         }
diff --git a/client/src/api/api.ts b/client/src/api/api.ts
index 4faae6f5..497fff5e 100644
--- a/client/src/api/api.ts
+++ b/client/src/api/api.ts
@@ -1,4 +1,5 @@
 import axios from "axios";
+import { AxiosError } from "axios";
 import { SpectroInfo } from "@components/geoJS/geoJSUtils";
 
 export interface Recording {
@@ -453,7 +454,7 @@ async function patchConfiguration(config: ConfigurationSettings) {
 }
 
 async function getCurrentUser() {
-  return axiosInstance.get<{name: string, email: string}>("/configuration/me");
+  return axiosInstance.get<{name: string, email: string, id: number}>("/configuration/me");
 }
 
 export interface ProcessingTask {
@@ -537,6 +538,36 @@ async function getExportStatus(exportId: number) {
   return result.data;
 }
 
+export interface VettingDetails {
+  id: number;
+  user_id: number;
+  reference_materials: string;
+}
+
+export interface UpdateVettingDetails {
+  reference_Materials: string;
+}
+
+async function getVettingDetailsForUser(userId: number) {
+  try {
+    const result = await axiosInstance.get<VettingDetails>(`/vetting/user/${userId}`);
+    return result.data;
+  } catch (err) {
+    const error = err as AxiosError;
+    if (error.response?.status === 404) {
+      return null;
+    }
+    throw err;
+  }
+}
+
+async function createOrUpdateVettingDetailsForUser(userId: number, referenceMaterials: string) {
+  return await axiosInstance.post<UpdateVettingDetails, VettingDetails>(
+    `/vetting/user/${userId}`,
+    { 'reference_materials': referenceMaterials }
+  );
+}
+
 export {
   uploadRecordingFile,
   getRecordings,
@@ -574,4 +605,6 @@ export {
   getExportStatus,
   getRecordingTags,
   getCurrentUser,
+  getVettingDetailsForUser,
+  createOrUpdateVettingDetailsForUser,
 };
diff --git a/client/src/components/ReferenceMaterialsDialog.vue b/client/src/components/ReferenceMaterialsDialog.vue
new file mode 100644
index 00000000..665ddce9
--- /dev/null
+++ b/client/src/components/ReferenceMaterialsDialog.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { createOrUpdateVettingDetailsForUser } from '@api/api';
+import useState from '@use/useState';
+
+const { currentUserId, reviewerMaterials } = useState();
+
+const referenceDialog = ref(false);
+const reviewerMaterialsDisplay = ref('');
+const valid = ref(true);
+const error = ref('');
+
+async function saveReviewerMaterials() {
+  if (!currentUserId.value || !valid.value) return;
+  try {
+    const details = await createOrUpdateVettingDetailsForUser(currentUserId.value, reviewerMaterialsDisplay.value);
+    reviewerMaterials.value = details.reference_materials;
+  } catch(err) {
+    error.value = 'There was a problem saving your changes. Please try again';
+  }
+}
+
+watch(reviewerMaterials, () => reviewerMaterialsDisplay.value = reviewerMaterials.value);
+
+</script>
+
+<template>
+  <v-dialog
+    v-model="referenceDialog"
+    max-width="50%"
+  >
+    <template #activator="{ props }">
+      <v-btn
+        v-bind="props"
+      >
+        Add reference materials
+      </v-btn>
+    </template>
+    <v-card>
+      <v-card-title>
+        Reference Materials
+      </v-card-title>
+      <v-card-text>
+        <v-form
+          v-model="valid"
+        >
+          <v-textarea
+            v-model="reviewerMaterialsDisplay"
+            placeholder="Describe any reference materials used during labeling"
+            :rules="[
+              v => v.length <= 2000 || 'Only 2000 characters are allowed'
+            ]"
+            counter="2000"
+          />
+          <span
+            v-if="error"
+          >
+            <v-icon color="error">mdi-alert-circle-outline</v-icon>
+            {{ error }}
+          </span>
+        </v-form>
+      </v-card-text>
+      <v-card-actions>
+        <v-btn
+          @click="referenceDialog = false"
+        >
+          Close
+        </v-btn>
+        <v-btn
+          color="primary"
+          :disabled="!valid"
+          @click="saveReviewerMaterials"
+        >
+          Save
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
diff --git a/client/src/use/useState.ts b/client/src/use/useState.ts
index cd5fba69..d17f7ac8 100644
--- a/client/src/use/useState.ts
+++ b/client/src/use/useState.ts
@@ -12,6 +12,7 @@ import {
   SpectrogramSequenceAnnotation,
   RecordingTag,
   FileAnnotation,
+  getVettingDetailsForUser,
 } from "../api/api";
 import {
   interpolateCividis,
@@ -41,6 +42,7 @@ const colorScheme: Ref<{ value: string; title: string; scheme: (input: number) =
 const backgroundColor = ref("rgb(0, 0, 0)");
 const selectedUsers: Ref<string[]> = ref([]);
 const currentUser: Ref<string> = ref("");
+const currentUserId: Ref<number | undefined> = ref(undefined);
 const selectedId: Ref<number | null> = ref(null);
 const selectedType: Ref<"pulse" | "sequence"> = ref("pulse");
 const annotations: Ref<SpectrogramAnnotation[]> = ref([]);
@@ -85,6 +87,8 @@ const toggleFixedAxes = () => {
   fixedAxes.value = !fixedAxes.value;
 };
 
+const reviewerMaterials = ref('');
+
 type AnnotationState = "" | "editing" | "creating" | "disabled";
 export default function useState() {
   const setAnnotationState = (state: AnnotationState) => {
@@ -147,6 +151,7 @@ export default function useState() {
   async function loadCurrentUser() {
     const userInfo = (await getCurrentUser()).data;
     currentUser.value = userInfo.name;
+    currentUserId.value = userInfo.id;
   }
 
   /**
@@ -288,6 +293,17 @@ export default function useState() {
     return undefined;
   });
 
+  async function loadReviewerMaterials() {
+    // Only make this request if vetting is enabled and a user is logged in
+    if (!configuration.value.mark_annotations_completed_enabled) return;
+    if (currentUserId.value === undefined) return;
+
+    const vettingDetails = await getVettingDetailsForUser(currentUserId.value);
+    if (vettingDetails) {
+      reviewerMaterials.value = vettingDetails.reference_materials;
+    }
+  }
+
   return {
     annotationState,
     creationType,
@@ -308,6 +324,7 @@ export default function useState() {
     setSelectedUsers,
     selectedUsers,
     currentUser,
+    currentUserId,
     setSelectedId,
     loadConfiguration,
     loadCurrentUser,
@@ -341,5 +358,7 @@ export default function useState() {
     previousUnsubmittedRecordingId,
     markAnnotationSubmitted,
     currentRecordingId,
+    reviewerMaterials,
+    loadReviewerMaterials,
   };
 }
diff --git a/client/src/views/Recordings.vue b/client/src/views/Recordings.vue
index 28d93cc5..e780b3c6 100644
--- a/client/src/views/Recordings.vue
+++ b/client/src/views/Recordings.vue
@@ -38,7 +38,6 @@ export default defineComponent({
       recordingTagList,
       currentUser,
       configuration,
-      loadCurrentUser,
       showSubmittedRecordings,
       submittedMyRecordings,
       submittedSharedRecordings,
@@ -288,7 +287,6 @@ export default defineComponent({
     onMounted(async () => {
       addSubmittedColumns();
       hideDetailedMetadataColumns();
-      await loadCurrentUser();
       await fetchRecordingTags();
       await fetchRecordings();
     });
diff --git a/client/src/views/Spectrogram.vue b/client/src/views/Spectrogram.vue
index 5c4830a5..cc4f8d2a 100644
--- a/client/src/views/Spectrogram.vue
+++ b/client/src/views/Spectrogram.vue
@@ -25,8 +25,9 @@ import ThumbnailViewer from "@components/ThumbnailViewer.vue";
 import RecordingList from "@components/RecordingList.vue";
 import OtherUserAnnotationsDialog from "@/components/OtherUserAnnotationsDialog.vue";
 import ColorSchemeDialog from "@/components/ColorSchemeDialog.vue";
-import useState from "@use/useState";
 import RecordingInfoDialog from "@components/RecordingInfoDialog.vue";
+import ReferenceMaterialsDialog from "@/components/ReferenceMaterialsDialog.vue";
+import useState from "@use/useState";
 export default defineComponent({
   name: "Spectrogram",
   components: {
@@ -37,6 +38,7 @@ export default defineComponent({
     RecordingList,
     OtherUserAnnotationsDialog,
     ColorSchemeDialog,
+    ReferenceMaterialsDialog,
   },
   props: {
     id: {
@@ -656,6 +658,11 @@ export default defineComponent({
                   </v-tooltip>
                 </v-col>
               </v-row>
+              <v-row>
+                <v-col>
+                  <reference-materials-dialog />
+                </v-col>
+              </v-row>
               <v-row v-if="nextUnsubmittedRecordingId">
                 <v-col>
                   <v-btn

From 8dd9592cb28d9be0d2c1b264a96ee44be125af4a Mon Sep 17 00:00:00 2001
From: Michael Nagler <mike.nagler@kitware.com>
Date: Thu, 15 Jan 2026 12:47:57 -0500
Subject: [PATCH 08/10] Vetting workflow feedback (#301)

* Make return type compatable for column definition

* Add scale widget to location map

* Fix casing for kHz

* Fix scrolling in spectrogram sidebar

* Add tooltip to submission status

* Ensure configuration is loaded before column check
---
 client/src/App.vue                            |   4 +-
 client/src/components/AnnotationList.vue      | 123 ++++---
 client/src/components/MapLocation.vue         |   3 +
 .../src/components/RecordingAnnotations.vue   |  10 -
 client/src/components/RecordingList.vue       | 336 ++++++++++--------
 .../src/components/geoJS/layers/axesLayer.ts  |   2 +-
 .../geoJS/layers/boundingBoxLayer.ts          |   4 +-
 .../geoJS/layers/measureToolLayer.ts          |   2 +-
 client/src/views/Recordings.vue               |  57 +--
 client/src/views/Spectrogram.vue              |  44 +--
 10 files changed, 317 insertions(+), 268 deletions(-)

diff --git a/client/src/App.vue b/client/src/App.vue
index c7d25f30..823ef327 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -32,7 +32,6 @@ export default defineComponent({
     const checkLogin = async () => {
       if (oauthClient.isLoggedIn) {
         loginText.value = "Logout";
-        await loadConfiguration();
         await loadCurrentUser();
         await loadReviewerMaterials();
         if (sharedList.value.length === 0) {
@@ -52,7 +51,8 @@ export default defineComponent({
         oauthClient.redirectToLogin();
       }
     };
-    onMounted(() => {
+    onMounted(async () => {
+      await loadConfiguration();
       checkLogin();
     });
     router.afterEach((guard) => {
diff --git a/client/src/components/AnnotationList.vue b/client/src/components/AnnotationList.vue
index dd89abf2..daa606ad 100644
--- a/client/src/components/AnnotationList.vue
+++ b/client/src/components/AnnotationList.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import { computed, defineComponent, PropType, CSSProperties } from "vue";
 import { SpectroInfo } from './geoJS/geoJSUtils';
 import useState from "@use/useState";
 import { watch, ref } from "vue";
@@ -32,51 +32,77 @@ export default defineComponent({
   },
   emits: ['select', 'update:annotation', 'delete:annotation'],
   setup() {
-    const { creationType, annotationState, setAnnotationState, annotations, sequenceAnnotations, selectedId, selectedType, setSelectedId, sideTab, configuration } = useState();
+    const {
+      creationType,
+      annotationState,
+      setAnnotationState,
+      annotations,
+      sequenceAnnotations,
+      selectedId,
+      selectedType,
+      setSelectedId,
+      sideTab,
+      configuration,
+    } = useState();
     const tab = ref('recording');
     const scrollToId = (id: number) => {
-    const el = document.getElementById(`annotation-${id}`);
-    if (el) {
-      el.scrollIntoView({block: 'end', behavior: 'smooth'});
-    }
-  };
-  watch(selectedId, () => {
-    tab.value = selectedType.value;
-    if (selectedId.value !== null) {
-      scrollToId(selectedId.value);
-    }
-  });
-  watch(selectedType, () => {
-    tab.value = selectedType.value;
-  });
-  const pulseEnabled = computed(() => configuration.value.display_pulse_annotations);
-  const sequenceEnabled = computed(() => configuration.value.display_sequence_annotations);
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const tabSwitch = (event: any) => {
-    // On tab switches we want to deselect the curret annotation
-    if (['sequence', 'pulse'].includes(event)) {
-      tab.value = event as 'sequence' | 'pulse';
-      selectedType.value = event as 'sequence' | 'pulse';
-      selectedId.value = null;
-    } else {
-      tab.value = 'recording';
-    }
-  };
+      const el = document.getElementById(`annotation-${id}`);
+      if (el) {
+        el.scrollIntoView({block: 'end', behavior: 'smooth'});
+      }
+    };
+    watch(selectedId, () => {
+      tab.value = selectedType.value;
+      if (selectedId.value !== null) {
+        scrollToId(selectedId.value);
+      }
+    });
+    watch(selectedType, () => {
+      tab.value = selectedType.value;
+    });
+    const pulseEnabled = computed(() => configuration.value.display_pulse_annotations);
+    const sequenceEnabled = computed(() => configuration.value.display_sequence_annotations);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const tabSwitch = (event: any) => {
+      // On tab switches we want to deselect the curret annotation
+      if (['sequence', 'pulse'].includes(event)) {
+        tab.value = event as 'sequence' | 'pulse';
+        selectedType.value = event as 'sequence' | 'pulse';
+        selectedId.value = null;
+      } else {
+        tab.value = 'recording';
+      }
+    };
+
+    const styles = computed<CSSProperties>(() => {
+      const appBarHeight = 64;
+      const sidebarOptionsHeight = 36;
+      const vettingOptionsHeight = 161;
+      let offset = appBarHeight + sidebarOptionsHeight;
+      if (configuration.value.mark_annotations_completed_enabled) {
+        offset += vettingOptionsHeight;
+      }
+      return {
+        'max-height': `calc(100vh - ${offset}px)`,
+        'overflow-y': 'auto'
+      };
+    });
 
     return {
-        annotationState,
-        annotations,
-        creationType,
-        sequenceAnnotations,
-        selectedId,
-        selectedType,
-        setAnnotationState,
-        setSelectedId,
-        tabSwitch,
-        tab,
-        sideTab,
-        pulseEnabled,
-        sequenceEnabled,
+      annotationState,
+      annotations,
+      creationType,
+      sequenceAnnotations,
+      selectedId,
+      selectedType,
+      setAnnotationState,
+      setSelectedId,
+      tabSwitch,
+      tab,
+      sideTab,
+      pulseEnabled,
+      sequenceEnabled,
+      styles,
     };
   },
 });
@@ -85,7 +111,7 @@ export default defineComponent({
 <template>
   <div
     class="pa-2"
-    :class="{'annotation-list': ['pulse','sequence'].includes(tab),'recording-list': !['pulse','sequence'].includes(tab)}"
+    :style="styles"
   >
     <v-row dense>
       <v-tabs
@@ -256,7 +282,7 @@ export default defineComponent({
         </v-list>
       </v-window-item>
       <v-window-item value="recording">
-        <RecordingAnnotations 
+        <RecordingAnnotations
           :species="species"
           :recording-id="parseInt(recordingId)"
         />
@@ -298,13 +324,4 @@ export default defineComponent({
 .selected {
     background-color: cyan;
 }
-.annotation-list {
-  max-height: 60vh;
-  overflow-y: auto;
-}
-.recording-list {
-  max-height: 85vh;
-  overflow-y: auto;
-}
-
 </style>
diff --git a/client/src/components/MapLocation.vue b/client/src/components/MapLocation.vue
index 3da9499f..24714a54 100644
--- a/client/src/components/MapLocation.vue
+++ b/client/src/components/MapLocation.vue
@@ -59,6 +59,9 @@ export default defineComponent({
         markerFeature.value = markerLayer.value.createFeature("marker");
         bboxFeature.value = bboxLayer.value.createFeature("polygon");
         uiLayer.value.createWidget('slider');
+        uiLayer.value.createWidget('scale', {
+          position: { bottom: 10, left: 10},
+        });
 
 
         if (props.grtsCellId !== undefined) {
diff --git a/client/src/components/RecordingAnnotations.vue b/client/src/components/RecordingAnnotations.vue
index 6951b98a..a167ec8e 100644
--- a/client/src/components/RecordingAnnotations.vue
+++ b/client/src/components/RecordingAnnotations.vue
@@ -309,14 +309,4 @@ export default defineComponent({
 .selected {
   background-color: cyan;
 }
-
-.annotation-list {
-  max-height: 85vh;
-  overflow-y: auto;
-}
-
-.recording-list {
-  max-height: 85vh;
-  overflow-y: auto;
-}
 </style>
diff --git a/client/src/components/RecordingList.vue b/client/src/components/RecordingList.vue
index 0dce3ecd..39b4f458 100644
--- a/client/src/components/RecordingList.vue
+++ b/client/src/components/RecordingList.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { defineComponent, ref, Ref, onMounted, computed } from 'vue';
+import { defineComponent, ref, Ref, onMounted, computed, CSSProperties } from 'vue';
 import { FileAnnotation, getRecordings, Recording, Species } from '../api/api';
 import useState from '@use/useState';
 import  { EditingRecording } from './UploadRecording.vue';
@@ -49,159 +49,76 @@ export default defineComponent({
       return userSubmittedAnnotations[0].species.map((specie: Species) => specie.species_code).join(', ');
     };
 
+    const styles = computed<CSSProperties>(() => {
+      const appBarHeight = 64;
+      const sidebarOptionsHeight = 36;
+      const vettingOptionsHeight = 161;
+      const showSubmittedHeight = 80;
+      let offset = appBarHeight + sidebarOptionsHeight;
+      if (configuration.value.mark_annotations_completed_enabled) {
+        offset += (vettingOptionsHeight + showSubmittedHeight);
+      }
+      return {
+        'max-height': `calc(100vh - ${offset}px)`,
+        'overflow-y': 'auto'
+      };
+    });
+
     return {
-        recordingList,
-        sharedList,
-        modifiedList,
-        filtered,
-        editingRecording,
-        openPanel,
-        userSubmittedAnnotation,
-        configuration,
-        myRecordingsDisplay,
-        sharedRecordingsDisplay,
-        showSubmittedRecordings,
+      recordingList,
+      sharedList,
+      modifiedList,
+      filtered,
+      editingRecording,
+      openPanel,
+      userSubmittedAnnotation,
+      configuration,
+      myRecordingsDisplay,
+      sharedRecordingsDisplay,
+      showSubmittedRecordings,
+      styles,
      };
   },
 });
 </script>
 
 <template>
-  <v-expansion-panels v-model="openPanel">
-    <v-col v-if="configuration.mark_annotations_completed_enabled">
-      <v-row>
-        <v-col>
-          <v-checkbox
-            v-model="showSubmittedRecordings"
-            label="Show submitted recordings"
-            hide-details
-          />
-        </v-col>
-      </v-row>
-    </v-col>
-    <v-expansion-panel v-if="configuration.is_admin || configuration.non_admin_upload_enabled">
-      <v-expansion-panel-title>My Recordings</v-expansion-panel-title>
-      <v-expansion-panel-text>
-        <div
-          v-for="item in myRecordingsDisplay"
-          :key="`public_${item.id}`"
-        >
-          <v-card class="pa-2 my-2">
-            <v-row dense>
-              <v-col class="text-left">
-                <b>Name:</b><router-link
-                  :to="`/recording/${item.id.toString()}/spectrogram`"
-                >
-                  {{ item.name }}
-                </router-link>
-              </v-col>
-            </v-row>
-            <v-row dense>
-              <v-col>
-                <b>Public:</b>
-                <v-icon
-                  v-if="item.public"
-                  color="success"
-                >
-                  mdi-check
-                </v-icon>
-                <v-icon
-                  v-else
-                  color="error"
-                >
-                  mdi-close
-                </v-icon>
-              </v-col>
-              <v-col>
-                <div>
-                  <b class="pr-1">Annotations:</b>{{ item.userAnnotations }}
-                </div>
-              </v-col>
-            </v-row>
-            <v-row
-              v-if="configuration.mark_annotations_completed_enabled && userSubmittedAnnotation(item)"
-              dense
-            >
-              <v-col>
-                <div>
-                  <b>Submitted: </b>
-                  <v-icon
-                    v-if="userSubmittedAnnotation(item)"
-                    color="success"
-                  >
-                    mdi-check
-                  </v-icon>
-                  <v-icon
-                    v-else
-                    color="error"
-                  >
-                    mdi-close
-                  </v-icon>
-                </div>
-              </v-col>
-              <v-col v-if="userSubmittedAnnotation(item)">
-                <b>My label: </b>
-                <span>{{ userSubmittedAnnotation(item) }}</span>
-              </v-col>
-            </v-row>
-          </v-card>
-        </div>
-      </v-expansion-panel-text>
-    </v-expansion-panel>
-    <v-expansion-panel>
-      <v-expansion-panel-title>Public</v-expansion-panel-title>
-      <v-expansion-panel-text class="ma-0 pa-0">
-        <v-switch
-          v-if="!configuration.mark_annotations_completed_enabled"
-          v-model="filtered"
-          label="Filter Annotated"
-          dense
+  <div>
+    <v-row v-if="configuration.mark_annotations_completed_enabled">
+      <v-col>
+        <v-checkbox
+          v-model="showSubmittedRecordings"
+          label="Show submitted recordings"
+          hide-details
         />
-        <div
-          v-for="item in modifiedList"
-          :key="`public_${item.id}`"
-        >
-          <v-card class="pa-2 my-2">
-            <v-row dense>
-              <v-col class="text-left">
-                <b class="pr-1">Name:</b>
-                <router-link
-                  :to="`/recording/${item.id.toString()}/spectrogram`"
-                >
-                  {{ item.name }}
-                </router-link>
-              </v-col>
-            </v-row>
-            <v-row dense>
-              <v-col>
-                <div style="font-size:0.75em">
-                  <b>Owner:</b> {{ item.owner_username }}
-                </div>
-              </v-col>
-            </v-row>
-            <v-row dense>
-              <v-col v-if="!configuration.mark_annotations_completed_enabled">
-                <div>
-                  <b>Annotated:</b>
-                  <v-icon
-                    v-if="item.userMadeAnnotations"
-                    color="success"
-                  >
-                    mdi-check
-                  </v-icon>
-                  <v-icon
-                    v-else
-                    color="error"
+      </v-col>
+    </v-row>
+    <v-expansion-panels
+      v-model="openPanel"
+      :style="styles"
+    >
+      <v-expansion-panel v-if="configuration.is_admin || configuration.non_admin_upload_enabled">
+        <v-expansion-panel-title>My Recordings</v-expansion-panel-title>
+        <v-expansion-panel-text>
+          <div
+            v-for="item in myRecordingsDisplay"
+            :key="`public_${item.id}`"
+          >
+            <v-card class="pa-2 my-2">
+              <v-row dense>
+                <v-col class="text-left">
+                  <b>Name:</b><router-link
+                    :to="`/recording/${item.id.toString()}/spectrogram`"
                   >
-                    mdi-close
-                  </v-icon>
-                </div>
-              </v-col>
-              <v-col v-else>
-                <div>
-                  <b>Submitted: </b>
+                    {{ item.name }}
+                  </router-link>
+                </v-col>
+              </v-row>
+              <v-row dense>
+                <v-col>
+                  <b>Public:</b>
                   <v-icon
-                    v-if="userSubmittedAnnotation(item)"
+                    v-if="item.public"
                     color="success"
                   >
                     mdi-check
@@ -212,20 +129,122 @@ export default defineComponent({
                   >
                     mdi-close
                   </v-icon>
-                </div>
-              </v-col>
-              <v-col
+                </v-col>
+                <v-col>
+                  <div>
+                    <b class="pr-1">Annotations:</b>{{ item.userAnnotations }}
+                  </div>
+                </v-col>
+              </v-row>
+              <v-row
                 v-if="configuration.mark_annotations_completed_enabled && userSubmittedAnnotation(item)"
+                dense
               >
-                <b>My label: </b>
-                <span>{{ userSubmittedAnnotation(item) }}</span>
-              </v-col>
-            </v-row>
-          </v-card>
-        </div>
-      </v-expansion-panel-text>
-    </v-expansion-panel>
-  </v-expansion-panels>
+                <v-col>
+                  <div>
+                    <b>Submitted: </b>
+                    <v-icon
+                      v-if="userSubmittedAnnotation(item)"
+                      color="success"
+                    >
+                      mdi-check
+                    </v-icon>
+                    <v-icon
+                      v-else
+                      color="error"
+                    >
+                      mdi-close
+                    </v-icon>
+                  </div>
+                </v-col>
+                <v-col v-if="userSubmittedAnnotation(item)">
+                  <b>My label: </b>
+                  <span>{{ userSubmittedAnnotation(item) }}</span>
+                </v-col>
+              </v-row>
+            </v-card>
+          </div>
+        </v-expansion-panel-text>
+      </v-expansion-panel>
+      <v-expansion-panel>
+        <v-expansion-panel-title>Public</v-expansion-panel-title>
+        <v-expansion-panel-text class="ma-0 pa-0">
+          <v-switch
+            v-if="!configuration.mark_annotations_completed_enabled"
+            v-model="filtered"
+            label="Filter Annotated"
+            dense
+          />
+          <div
+            v-for="item in modifiedList"
+            :key="`public_${item.id}`"
+          >
+            <v-card class="pa-2 my-2">
+              <v-row dense>
+                <v-col class="text-left">
+                  <b class="pr-1">Name:</b>
+                  <router-link
+                    :to="`/recording/${item.id.toString()}/spectrogram`"
+                  >
+                    {{ item.name }}
+                  </router-link>
+                </v-col>
+              </v-row>
+              <v-row dense>
+                <v-col>
+                  <div style="font-size:0.75em">
+                    <b>Owner:</b> {{ item.owner_username }}
+                  </div>
+                </v-col>
+              </v-row>
+              <v-row dense>
+                <v-col v-if="!configuration.mark_annotations_completed_enabled">
+                  <div>
+                    <b>Annotated:</b>
+                    <v-icon
+                      v-if="item.userMadeAnnotations"
+                      color="success"
+                    >
+                      mdi-check
+                    </v-icon>
+                    <v-icon
+                      v-else
+                      color="error"
+                    >
+                      mdi-close
+                    </v-icon>
+                  </div>
+                </v-col>
+                <v-col v-else>
+                  <div>
+                    <b>Submitted: </b>
+                    <v-icon
+                      v-if="userSubmittedAnnotation(item)"
+                      color="success"
+                    >
+                      mdi-check
+                    </v-icon>
+                    <v-icon
+                      v-else
+                      color="error"
+                    >
+                      mdi-close
+                    </v-icon>
+                  </div>
+                </v-col>
+                <v-col
+                  v-if="configuration.mark_annotations_completed_enabled && userSubmittedAnnotation(item)"
+                >
+                  <b>My label: </b>
+                  <span>{{ userSubmittedAnnotation(item) }}</span>
+                </v-col>
+              </v-row>
+            </v-card>
+          </div>
+        </v-expansion-panel-text>
+      </v-expansion-panel>
+    </v-expansion-panels>
+  </div>
 </template>
 
 <style scoped>
@@ -236,4 +255,9 @@ export default defineComponent({
 .v-expansion-panel-text__wrapper {
     padding: 0 !important;
 }
+
+.overflow-recordings {
+  max-height: 50vh;
+  overflow-y: auto;
+}
 </style>
diff --git a/client/src/components/geoJS/layers/axesLayer.ts b/client/src/components/geoJS/layers/axesLayer.ts
index 7b0218fe..03a5acb3 100644
--- a/client/src/components/geoJS/layers/axesLayer.ts
+++ b/client/src/components/geoJS/layers/axesLayer.ts
@@ -289,7 +289,7 @@ export default class AxesLayer extends BaseTextLayer<TickTextData> {
       this.lineData.push(line);
 
       this.textData.push({
-        text: `${(tick.value / 1000).toFixed(0)}KHz`,
+        text: `${(tick.value / 1000).toFixed(0)}kHz`,
         x: gcsTextStart,
         y,
         textAlign: 'left',
diff --git a/client/src/components/geoJS/layers/boundingBoxLayer.ts b/client/src/components/geoJS/layers/boundingBoxLayer.ts
index 86616116..d8bb31ad 100644
--- a/client/src/components/geoJS/layers/boundingBoxLayer.ts
+++ b/client/src/components/geoJS/layers/boundingBoxLayer.ts
@@ -118,14 +118,14 @@ export default class BoundingBoxLayer extends BaseTextLayer<BoundingBoxTextData>
         textBaseline: 'top',
       },
       {
-        text: `${(lowFreq / 1000).toFixed(1)}KHz`,
+        text: `${(lowFreq / 1000).toFixed(1)}kHz`,
         x: coordinates[3][0] + 5,
         y: coordinates[3][1],
         textAlign: 'start',
         textBaseline: 'middle',
       },
       {
-        text: `${(highFreq / 1000).toFixed(1)}KHz`,
+        text: `${(highFreq / 1000).toFixed(1)}kHz`,
         x: coordinates[2][0] + 5,
         y: coordinates[2][1],
         textAlign: 'start',
diff --git a/client/src/components/geoJS/layers/measureToolLayer.ts b/client/src/components/geoJS/layers/measureToolLayer.ts
index 17ffef4f..b132e1e4 100644
--- a/client/src/components/geoJS/layers/measureToolLayer.ts
+++ b/client/src/components/geoJS/layers/measureToolLayer.ts
@@ -164,7 +164,7 @@ export default class MeasureToolLayer extends BaseTextLayer<TextData> {
     const frequency = height - this.yValue >= 0
       ? ((height - newY) * (this.spectroInfo.high_freq - this.spectroInfo.low_freq)) / height / 1000 + this.spectroInfo.low_freq / 1000
       : -1;
-    const textValue = `${frequency.toFixed(1)}KHz`;
+    const textValue = `${frequency.toFixed(1)}kHz`;
     const { x: textX, y: textY } = this._getTextCoordinates();
     this.textData = [
       {
diff --git a/client/src/views/Recordings.vue b/client/src/views/Recordings.vue
index e780b3c6..995b02e8 100644
--- a/client/src/views/Recordings.vue
+++ b/client/src/views/Recordings.vue
@@ -231,7 +231,7 @@ export default defineComponent({
       const userSubmittedAnnotation = recording.fileAnnotations.find((annotation: FileAnnotation) => (
         annotation.owner === currentUser.value && annotation.submitted
       ));
-      return userSubmittedAnnotation?.species[0]?.species_code;
+      return userSubmittedAnnotation?.species[0]?.species_code || '';
     }
 
     function addSubmittedColumns() {
@@ -285,10 +285,10 @@ export default defineComponent({
     });
 
     onMounted(async () => {
-      addSubmittedColumns();
-      hideDetailedMetadataColumns();
       await fetchRecordingTags();
       await fetchRecordings();
+      addSubmittedColumns();
+      hideDetailedMetadataColumns();
     });
 
     const uploadDone = () => {
@@ -582,24 +582,39 @@ export default defineComponent({
           v-if="configuration.mark_annotations_completed_enabled"
           #item.submitted="{ item }"
         >
-          <v-icon
-            v-if="currentUserSubmissionStatus(item) === 1"
-            color="success"
-          >
-            mdi-check
-          </v-icon>
-          <v-icon
-            v-else-if="currentUserSubmissionStatus(item) === -1"
-            color="error"
-          >
-            mdi-close
-          </v-icon>
-          <v-icon
-            v-else
-            color="warning"
-          >
-            mdi-circle-outline
-          </v-icon>
+          <v-tooltip v-if="currentUserSubmissionStatus(item) === 1">
+            <template #activator="{ props }">
+              <v-icon
+                v-bind="props"
+                color="success"
+              >
+                mdi-check
+              </v-icon>
+            </template>
+            You have submitted an annotation for this recording
+          </v-tooltip>
+          <v-tooltip v-else-if="currentUserSubmissionStatus(item) === 0">
+            <template #activator="{ props }">
+              <v-icon
+                v-bind="props"
+                color="warning"
+              >
+                mdi-circle-outline
+              </v-icon>
+            </template>
+            You have created an annotation, but it has not been submitted
+          </v-tooltip>
+          <v-tooltip v-else>
+            <template #activator="{ props }">
+              <v-icon
+                v-bind="props"
+                color="error"
+              >
+                mdi-close
+              </v-icon>
+            </template>
+            You have not created an annotation for this recording
+          </v-tooltip>
         </template>
         <template #bottom />
       </v-data-table>
diff --git a/client/src/views/Spectrogram.vue b/client/src/views/Spectrogram.vue
index cc4f8d2a..0d0a1ccb 100644
--- a/client/src/views/Spectrogram.vue
+++ b/client/src/views/Spectrogram.vue
@@ -639,8 +639,8 @@ export default defineComponent({
             v-if="configuration.mark_annotations_completed_enabled"
           >
             <v-col>
-              <v-row>
-                <v-col>
+              <v-row dense>
+                <v-col dense>
                   <span class="text-h6">
                     Vetting Controls
                   </span>
@@ -658,12 +658,15 @@ export default defineComponent({
                   </v-tooltip>
                 </v-col>
               </v-row>
-              <v-row>
+              <v-row dense>
                 <v-col>
                   <reference-materials-dialog />
                 </v-col>
               </v-row>
-              <v-row v-if="nextUnsubmittedRecordingId">
+              <v-row
+                v-if="nextUnsubmittedRecordingId"
+                dense
+              >
                 <v-col>
                   <v-btn
                     flat
@@ -701,24 +704,21 @@ export default defineComponent({
               />
             </v-col>
           </div>
-          <div v-if="sideTab === 'annotations'">
-            <annotation-list
-              :annotations="annotations"
-              :sequence-annotations="sequenceAnnotations"
-              :selected-annotation="selectedAnnotation"
-              :species="speciesList"
-              :recording-id="id"
-              @select="processSelection($event)"
-              @update:annotation="getAnnotationsList()"
-              @delete:annotation="
-                getAnnotationsList();
-                selectedId = null;
-              "
-            />
-          </div>
-          <div v-else-if="sideTab === 'recordings'">
-            <recording-list />
-          </div>
+          <annotation-list
+            v-if="sideTab === 'annotations'"
+            :annotations="annotations"
+            :sequence-annotations="sequenceAnnotations"
+            :selected-annotation="selectedAnnotation"
+            :species="speciesList"
+            :recording-id="id"
+            @select="processSelection($event)"
+            @update:annotation="getAnnotationsList()"
+            @delete:annotation="
+              getAnnotationsList();
+              selectedId = null;
+            "
+          />
+          <recording-list v-else />
         </v-card-text>
       </v-card>
     </v-col>

From f816b4518ecf8597964860c7185e7d5c03edb70f Mon Sep 17 00:00:00 2001
From: naglepuff <mike.nagler@kitware.com>
Date: Thu, 15 Jan 2026 13:06:39 -0500
Subject: [PATCH 09/10] Remove unused setting and remake migrations

---
 ..._annotations_completed_enabled_and_more.py | 33 -------------------
 ...annotations_completed_enabled_and_more.py} | 19 +++++++++--
 bats_ai/core/models/configuration.py          |  1 -
 bats_ai/core/views/configuration.py           |  2 --
 client/src/api/api.ts                         |  1 -
 client/src/use/useState.ts                    |  1 -
 client/src/views/Admin.vue                    | 10 ------
 7 files changed, 17 insertions(+), 50 deletions(-)
 delete mode 100644 bats_ai/core/migrations/0024_configuration_mark_annotations_completed_enabled_and_more.py
 rename bats_ai/core/migrations/{0025_vettingdetails_and_more.py => 0025_configuration_mark_annotations_completed_enabled_and_more.py} (65%)

diff --git a/bats_ai/core/migrations/0024_configuration_mark_annotations_completed_enabled_and_more.py b/bats_ai/core/migrations/0024_configuration_mark_annotations_completed_enabled_and_more.py
deleted file mode 100644
index 110c58c7..00000000
--- a/bats_ai/core/migrations/0024_configuration_mark_annotations_completed_enabled_and_more.py
+++ /dev/null
@@ -1,33 +0,0 @@
-# Generated by Django 4.2.23 on 2025-12-23 20:18
-
-from django.db import migrations, models
-
-
-class Migration(migrations.Migration):
-
-    dependencies = [
-        ('core', '0023_recordingtag_recording_tags_and_more'),
-    ]
-
-    operations = [
-        migrations.AddField(
-            model_name='configuration',
-            name='mark_annotations_completed_enabled',
-            field=models.BooleanField(default=False),
-        ),
-        migrations.AddField(
-            model_name='configuration',
-            name='non_admin_upload_enabled',
-            field=models.BooleanField(default=True),
-        ),
-        migrations.AddField(
-            model_name='configuration',
-            name='show_my_recordings',
-            field=models.BooleanField(default=True),
-        ),
-        migrations.AddField(
-            model_name='recordingannotation',
-            name='submitted',
-            field=models.BooleanField(default=False),
-        ),
-    ]
diff --git a/bats_ai/core/migrations/0025_vettingdetails_and_more.py b/bats_ai/core/migrations/0025_configuration_mark_annotations_completed_enabled_and_more.py
similarity index 65%
rename from bats_ai/core/migrations/0025_vettingdetails_and_more.py
rename to bats_ai/core/migrations/0025_configuration_mark_annotations_completed_enabled_and_more.py
index 967f5481..b92dee56 100644
--- a/bats_ai/core/migrations/0025_vettingdetails_and_more.py
+++ b/bats_ai/core/migrations/0025_configuration_mark_annotations_completed_enabled_and_more.py
@@ -1,4 +1,4 @@
-# Generated by Django 4.2.23 on 2026-01-08 18:57
+# Generated by Django 4.2.23 on 2026-01-15 18:06
 
 from django.conf import settings
 from django.db import migrations, models
@@ -9,10 +9,25 @@ class Migration(migrations.Migration):
 
     dependencies = [
         migrations.swappable_dependency(settings.AUTH_USER_MODEL),
-        ('core', '0024_configuration_mark_annotations_completed_enabled_and_more'),
+        ('core', '0024_delete_image'),
     ]
 
     operations = [
+        migrations.AddField(
+            model_name='configuration',
+            name='mark_annotations_completed_enabled',
+            field=models.BooleanField(default=False),
+        ),
+        migrations.AddField(
+            model_name='configuration',
+            name='non_admin_upload_enabled',
+            field=models.BooleanField(default=True),
+        ),
+        migrations.AddField(
+            model_name='recordingannotation',
+            name='submitted',
+            field=models.BooleanField(default=False),
+        ),
         migrations.CreateModel(
             name='VettingDetails',
             fields=[
diff --git a/bats_ai/core/models/configuration.py b/bats_ai/core/models/configuration.py
index 9592f0f2..7bdcfc65 100644
--- a/bats_ai/core/models/configuration.py
+++ b/bats_ai/core/models/configuration.py
@@ -35,7 +35,6 @@ class AvailableColorScheme(models.TextChoices):
     # Fields used for community vetting focused deployment of BatAI
     non_admin_upload_enabled = models.BooleanField(default=True)
     mark_annotations_completed_enabled = models.BooleanField(default=False)
-    show_my_recordings = models.BooleanField(default=True)
 
     def save(self, *args, **kwargs):
         # Ensure only one instance of Configuration exists
diff --git a/bats_ai/core/views/configuration.py b/bats_ai/core/views/configuration.py
index be7c66f1..d3034a0d 100644
--- a/bats_ai/core/views/configuration.py
+++ b/bats_ai/core/views/configuration.py
@@ -24,7 +24,6 @@ class ConfigurationSchema(Schema):
     default_spectrogram_background_color: str
     non_admin_upload_enabled: bool
     mark_annotations_completed_enabled: bool
-    show_my_recordings: bool
 
 
 # Endpoint to retrieve the configuration status
@@ -43,7 +42,6 @@ def get_configuration(request):
         default_spectrogram_background_color=config.default_spectrogram_background_color,
         non_admin_upload_enabled=config.non_admin_upload_enabled,
         mark_annotations_completed_enabled=config.mark_annotations_completed_enabled,
-        show_my_recordings=config.show_my_recordings,
         is_admin=request.user.is_authenticated and request.user.is_superuser,
     )
 
diff --git a/client/src/api/api.ts b/client/src/api/api.ts
index 497fff5e..102f3462 100644
--- a/client/src/api/api.ts
+++ b/client/src/api/api.ts
@@ -441,7 +441,6 @@ export interface ConfigurationSettings {
   default_spectrogram_background_color: string;
   non_admin_upload_enabled: boolean;
   mark_annotations_completed_enabled: boolean;
-  show_my_recordings: boolean;
 }
 
 export type Configuration = ConfigurationSettings & { is_admin: boolean };
diff --git a/client/src/use/useState.ts b/client/src/use/useState.ts
index d17f7ac8..ab55f8eb 100644
--- a/client/src/use/useState.ts
+++ b/client/src/use/useState.ts
@@ -67,7 +67,6 @@ const configuration: Ref<Configuration> = ref({
   is_admin: false,
   mark_annotations_completed_enabled: false,
   non_admin_upload_enabled: true,
-  show_my_recordings: true,
 });
 const scaledWidth = ref(0);
 const scaledHeight = ref(0);
diff --git a/client/src/views/Admin.vue b/client/src/views/Admin.vue
index 3f8975fc..689a71b5 100644
--- a/client/src/views/Admin.vue
+++ b/client/src/views/Admin.vue
@@ -27,7 +27,6 @@ export default defineComponent({
       defaultBackgroundColor: configuration.value.default_spectrogram_background_color,
       nonAdminUploadEnabled: configuration.value.non_admin_upload_enabled,
       markAnnotationsCompletedEnabled: configuration.value.mark_annotations_completed_enabled,
-      showMyRecordings: configuration.value.show_my_recordings,
     });
     const spectrogramViewOptions = [
       { title: 'Compressed', value: 'compressed' },
@@ -42,7 +41,6 @@ export default defineComponent({
       settings.defaultBackgroundColor = configuration.value.default_spectrogram_background_color;
       settings.nonAdminUploadEnabled = configuration.value.non_admin_upload_enabled;
       settings.markAnnotationsCompletedEnabled = configuration.value.mark_annotations_completed_enabled;
-      settings.showMyRecordings = configuration.value.show_my_recordings;
     });
     // Function to save the settings
     const saveSettings = async () => {
@@ -57,7 +55,6 @@ export default defineComponent({
         spectrogram_view: settings.spectrogramView,
         non_admin_upload_enabled: settings.nonAdminUploadEnabled,
         mark_annotations_completed_enabled: settings.markAnnotationsCompletedEnabled,
-        show_my_recordings: settings.showMyRecordings,
       });
       loadConfiguration();
     };
@@ -211,13 +208,6 @@ export default defineComponent({
               label="Enable submitting file-level annotations by marking them complete"
             />
           </v-row>
-          <v-row>
-            <v-switch
-              v-model="settings.showMyRecordings"
-              :color="settings.showMyRecordings ? 'primary' : ''"
-              label="Show a separate list for a user's own recordings"
-            />
-          </v-row>
         </v-card-text>
         <v-card-actions>
           <v-row>

From 849ac8e99862e192ccde79c4dda32add4937adbb Mon Sep 17 00:00:00 2001
From: naglepuff <mike.nagler@kitware.com>
Date: Thu, 15 Jan 2026 13:54:38 -0500
Subject: [PATCH 10/10] Use tooltip in shared list

---
 client/src/views/Recordings.vue | 51 +++++++++++++++++++++------------
 1 file changed, 33 insertions(+), 18 deletions(-)

diff --git a/client/src/views/Recordings.vue b/client/src/views/Recordings.vue
index 995b02e8..0fb79dd8 100644
--- a/client/src/views/Recordings.vue
+++ b/client/src/views/Recordings.vue
@@ -783,24 +783,39 @@ export default defineComponent({
           v-if="configuration.mark_annotations_completed_enabled"
           #item.submitted="{ item }"
         >
-          <v-icon
-            v-if="currentUserSubmissionStatus(item) === 1"
-            color="success"
-          >
-            mdi-check
-          </v-icon>
-          <v-icon
-            v-else-if="currentUserSubmissionStatus(item) === -1"
-            color="error"
-          >
-            mdi-close
-          </v-icon>
-          <v-icon
-            v-else
-            color="warning"
-          >
-            mdi-circle-outline
-          </v-icon>
+          <v-tooltip v-if="currentUserSubmissionStatus(item) === 1">
+            <template #activator="{ props }">
+              <v-icon
+                v-bind="props"
+                color="success"
+              >
+                mdi-check
+              </v-icon>
+            </template>
+            You have submitted an annotation for this recording
+          </v-tooltip>
+          <v-tooltip v-else-if="currentUserSubmissionStatus(item) === 0">
+            <template #activator="{ props }">
+              <v-icon
+                v-bind="props"
+                color="warning"
+              >
+                mdi-circle-outline
+              </v-icon>
+            </template>
+            You have created an annotation, but it has not been submitted
+          </v-tooltip>
+          <v-tooltip v-else>
+            <template #activator="{ props }">
+              <v-icon
+                v-bind="props"
+                color="error"
+              >
+                mdi-close
+              </v-icon>
+            </template>
+            You have not created an annotation for this recording
+          </v-tooltip>
         </template>
         <template #bottom />
       </v-data-table>