From 5e3a492499000755be3530dee56b3c6f24ccc52e Mon Sep 17 00:00:00 2001
From: naglepuff <mike.nagler@kitware.com>
Date: Mon, 10 Nov 2025 16:38:16 -0500
Subject: [PATCH 01/16] Add recording tag model

---
 bats_ai/api.py                                |  2 ++
 bats_ai/core/admin/__init__.py                |  2 ++
 bats_ai/core/admin/recording_tag.py           | 13 ++++++++
 ...023_recordingtag_recording_tag_and_more.py | 33 +++++++++++++++++++
 bats_ai/core/models/__init__.py               |  3 +-
 bats_ai/core/models/recording.py              | 16 +++++++--
 bats_ai/core/views/__init__.py                |  2 ++
 bats_ai/core/views/recording.py               | 28 +++++++++++-----
 bats_ai/core/views/recording_tag.py           | 21 ++++++++++++
 9 files changed, 108 insertions(+), 12 deletions(-)
 create mode 100644 bats_ai/core/admin/recording_tag.py
 create mode 100644 bats_ai/core/migrations/0023_recordingtag_recording_tag_and_more.py
 create mode 100644 bats_ai/core/views/recording_tag.py

diff --git a/bats_ai/api.py b/bats_ai/api.py
index f3599a92..4cd1c0bb 100644
--- a/bats_ai/api.py
+++ b/bats_ai/api.py
@@ -11,6 +11,7 @@
     ProcessingTaskRouter,
     RecordingAnnotationRouter,
     RecordingRouter,
+    RecordingTagRouter,
     SpeciesRouter,
 )
 from bats_ai.core.views.nabat import NABatConfigurationRouter, NABatRecordingRouter
@@ -42,5 +43,6 @@ def global_auth(request):
 api.add_router('/export-annotation/', ExportAnnotationRouter)
 api.add_router('/configuration/', ConfigurationRouter)
 api.add_router('/processing-task/', ProcessingTaskRouter)
+api.add_router('/recording-tag/', RecordingTagRouter)
 api.add_router('/nabat/recording/', NABatRecordingRouter)
 api.add_router('/nabat/configuration/', NABatConfigurationRouter)
diff --git a/bats_ai/core/admin/__init__.py b/bats_ai/core/admin/__init__.py
index 7fe6cc7c..fe5a419e 100644
--- a/bats_ai/core/admin/__init__.py
+++ b/bats_ai/core/admin/__init__.py
@@ -13,6 +13,7 @@
 from .processing_task import ProcessingTaskAdmin
 from .recording import RecordingAdmin
 from .recording_annotations import RecordingAnnotationAdmin
+from .recording_tag import RecordingTagAdmin
 from .sequence_annotations import SequenceAnnotationsAdmin
 from .species import SpeciesAdmin
 from .spectrogram import SpectrogramAdmin
@@ -28,6 +29,7 @@
     'GRTSCellsAdmin',
     'CompressedSpectrogramAdmin',
     'RecordingAnnotationAdmin',
+    'RecordingTagAdmin',
     'ProcessingTaskAdmin',
     'ConfigurationAdmin',
     'ExportedAnnotationFileAdmin',
diff --git a/bats_ai/core/admin/recording_tag.py b/bats_ai/core/admin/recording_tag.py
new file mode 100644
index 00000000..fc1cfa02
--- /dev/null
+++ b/bats_ai/core/admin/recording_tag.py
@@ -0,0 +1,13 @@
+from django.contrib import admin
+
+from bats_ai.core.models import RecordingTag
+
+
+@admin.register(RecordingTag)
+class RecordingTagAdmin(admin.ModelAdmin):
+    list_display = (
+        'id',
+        'user',
+        'text',
+    )
+    search_fields = ('id', 'user', 'text')
diff --git a/bats_ai/core/migrations/0023_recordingtag_recording_tag_and_more.py b/bats_ai/core/migrations/0023_recordingtag_recording_tag_and_more.py
new file mode 100644
index 00000000..3148f0a3
--- /dev/null
+++ b/bats_ai/core/migrations/0023_recordingtag_recording_tag_and_more.py
@@ -0,0 +1,33 @@
+# Generated by Django 4.2.23 on 2025-11-11 16:17
+
+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', '0022_rename_temporalannotations_sequenceannotations'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='RecordingTag',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('text', models.CharField(max_length=50)),
+                ('user', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to=settings.AUTH_USER_MODEL)),
+            ],
+        ),
+        migrations.AddField(
+            model_name='recording',
+            name='tag',
+            field=models.ForeignKey(null=True, on_delete=django.db.models.deletion.DO_NOTHING, to='core.recordingtag'),
+        ),
+        migrations.AddConstraint(
+            model_name='recordingtag',
+            constraint=models.UniqueConstraint(fields=('user', 'text'), name='unique_user_text_tag'),
+        ),
+    ]
diff --git a/bats_ai/core/models/__init__.py b/bats_ai/core/models/__init__.py
index 487fe7e4..ad11fab9 100644
--- a/bats_ai/core/models/__init__.py
+++ b/bats_ai/core/models/__init__.py
@@ -5,7 +5,7 @@
 from .grts_cells import GRTSCells
 from .image import Image
 from .processing_task import ProcessingTask, ProcessingTaskType
-from .recording import Recording
+from .recording import Recording, RecordingTag
 from .recording_annotation import RecordingAnnotation
 from .recording_annotation_status import RecordingAnnotationStatus
 from .sequence_annotations import SequenceAnnotations
@@ -17,6 +17,7 @@
     'Annotations',
     'Image',
     'Recording',
+    'RecordingTag',
     'RecordingAnnotationStatus',
     'Species',
     'Spectrogram',
diff --git a/bats_ai/core/models/recording.py b/bats_ai/core/models/recording.py
index c7c198a3..8ff6aa4f 100644
--- a/bats_ai/core/models/recording.py
+++ b/bats_ai/core/models/recording.py
@@ -10,6 +10,19 @@
 logger = logging.getLogger(__name__)
 
 
+class RecordingTag(models.Model):
+    user = models.ForeignKey(User, on_delete=models.CASCADE)
+    text = models.CharField(max_length=50)
+
+    class Meta:
+        constraints = [
+            models.UniqueConstraint(fields=['user', 'text'], name='unique_user_text_tag')
+        ]
+
+    def __str__(self):
+        return f'{self.text} ({self.user.username})'
+
+
 # TimeStampedModel also provides "created" and "modified" fields
 class Recording(TimeStampedModel, models.Model):
     name = models.CharField(max_length=255)
@@ -34,6 +47,7 @@ class Recording(TimeStampedModel, models.Model):
         Species, related_name='recording_official_species'
     )  # species that are detemrined by the owner or from annotations as official species list
     unusual_occurrences = models.TextField(blank=True, null=True)
+    tag = models.ForeignKey(RecordingTag, on_delete=models.DO_NOTHING, null=True)
 
     @property
     def has_spectrogram(self):
@@ -70,8 +84,6 @@ def compressed_spectrograms(self):
 
     @property
     def compressed_spectrogram(self):
-        pass
-
         compressed_spectrograms = self.compressed_spectrograms
 
         assert len(compressed_spectrograms) >= 1
diff --git a/bats_ai/core/views/__init__.py b/bats_ai/core/views/__init__.py
index e50c46c8..0be8ef80 100644
--- a/bats_ai/core/views/__init__.py
+++ b/bats_ai/core/views/__init__.py
@@ -6,6 +6,7 @@
 from .processing_tasks import router as ProcessingTaskRouter
 from .recording import router as RecordingRouter
 from .recording_annotation import router as RecordingAnnotationRouter
+from .recording_tag import router as RecordingTagRouter
 from .sequence_annotations import router as SequenceAnnotationRouter
 from .species import router as SpeciesRouter
 
@@ -20,4 +21,5 @@
     'ConfigurationRouter',
     'ProcessingTaskRouter',
     'ExportAnnotationRouter',
+    'RecordingTagRouter',
 ]
diff --git a/bats_ai/core/views/recording.py b/bats_ai/core/views/recording.py
index 536c3c2e..235137ab 100644
--- a/bats_ai/core/views/recording.py
+++ b/bats_ai/core/views/recording.py
@@ -16,9 +16,11 @@
     CompressedSpectrogram,
     Recording,
     RecordingAnnotation,
+    RecordingTag,
     SequenceAnnotations,
     Species,
 )
+from bats_ai.core.views.recording_tag import RecordingTagSchema
 from bats_ai.core.views.sequence_annotations import (
     SequenceAnnotationSchema,
     UpdateSequenceAnnotationSchema,
@@ -43,6 +45,7 @@ class RecordingSchema(Schema):
     recording_location: str | None
     grts_cell_id: int | None
     grts_cell: int | None
+    tag: RecordingTagSchema | None
 
 
 class RecordingUploadSchema(Schema):
@@ -51,15 +54,16 @@ class RecordingUploadSchema(Schema):
     recorded_time: str
     equipment: str | None
     comments: str | None
-    latitude: float = None
-    longitude: float = None
-    gridCellId: int = None
-    publicVal: bool = None
-    site_name: str = None
-    software: str = None
-    detector: str = None
-    species_list: str = None
-    unusual_occurrences: str = None
+    latitude: float | None
+    longitude: float | None
+    gridCellId: int | None
+    publicVal: bool | None
+    site_name: str | None
+    software: str | None
+    detector: str | None
+    species_list: str | None
+    unusual_occurrences: str | None
+    tag: str | None
 
 
 class RecordingAnnotationSchema(Schema):
@@ -150,6 +154,9 @@ def create_recording(
         species_list=payload.species_list,
         unusual_occurrences=payload.unusual_occurrences,
     )
+    if payload.tag:
+        tag, _ = RecordingTag.objects.get_or_create(user=request.user, text=payload.tag)
+        recording.tag = tag
 
     recording.save()
     # Start generating recording as soon as created
@@ -193,6 +200,9 @@ def update_recording(request: HttpRequest, id: int, recording_data: RecordingUpl
         recording.species_list = recording_data.species_list
     if recording_data.unusual_occurrences:
         recording.unusual_occurrences = recording_data.unusual_occurrences
+    if recording_data.tag:
+        tag, _ = RecordingTag.objects.get_or_create(user=request.user, text=recording_data.tag)
+        recording.tag = tag
 
     recording.save()
 
diff --git a/bats_ai/core/views/recording_tag.py b/bats_ai/core/views/recording_tag.py
new file mode 100644
index 00000000..52903fb5
--- /dev/null
+++ b/bats_ai/core/views/recording_tag.py
@@ -0,0 +1,21 @@
+from django.http import Http404, HttpRequest
+from ninja import Schema
+from ninja.pagination import RouterPaginated
+
+from bats_ai.core.models import RecordingTag
+
+
+class RecordingTagSchema(Schema):
+    text: str
+    user: int
+
+
+router = RouterPaginated()
+
+
+@router.get('/')
+def get_recording_tags(request: HttpRequest):
+    user = request.user
+    if not user:
+        return Http404()
+    return list(RecordingTag.objects.filter(user=request.user).values())

From 21bf3d26204c62195424b2ae41e242b16f02f310 Mon Sep 17 00:00:00 2001
From: naglepuff <mike.nagler@kitware.com>
Date: Tue, 11 Nov 2025 14:58:09 -0500
Subject: [PATCH 02/16] Include tag text in recordings response

---
 bats_ai/core/views/recording.py | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/bats_ai/core/views/recording.py b/bats_ai/core/views/recording.py
index 235137ab..3c073aff 100644
--- a/bats_ai/core/views/recording.py
+++ b/bats_ai/core/views/recording.py
@@ -5,7 +5,7 @@
 from django.contrib.auth.models import User
 from django.contrib.gis.geos import Point
 from django.core.files.storage import default_storage
-from django.db.models import Q
+from django.db.models import F, Q
 from django.http import HttpRequest
 from ninja import File, Form, Schema
 from ninja.files import UploadedFile
@@ -240,10 +240,15 @@ def get_recordings(request: HttpRequest, public: bool | None = None):
         recordings = (
             Recording.objects.filter(public=True)
             .exclude(Q(owner=request.user) | Q(spectrogram__isnull=True))
+            .annotate(tag_text=F('tag__text'))
             .values()
         )
     else:
-        recordings = Recording.objects.filter(owner=request.user).values()
+        recordings = (
+            Recording.objects.filter(owner=request.user)
+            .annotate(tag_text=F('tag__text'))
+            .values()
+        )
 
     # TODO with larger dataset it may be better to do this in a queryset instead of python
     for recording in recordings:

From fd285cdceccdeefe6262658513d8df133238a7f7 Mon Sep 17 00:00:00 2001
From: naglepuff <mike.nagler@kitware.com>
Date: Tue, 11 Nov 2025 15:34:43 -0500
Subject: [PATCH 03/16] Add tag to recording tables

---
 client/src/api/api.ts                     |  12 ++
 client/src/components/UploadRecording.vue |  31 ++++-
 client/src/use/useState.ts                |   3 +
 client/src/views/Recordings.vue           | 146 ++++++++++++++--------
 4 files changed, 134 insertions(+), 58 deletions(-)

diff --git a/client/src/api/api.ts b/client/src/api/api.ts
index 0b65104d..b5540452 100644
--- a/client/src/api/api.ts
+++ b/client/src/api/api.ts
@@ -27,6 +27,7 @@ export interface Recording {
   detector?: string;
   species_list?: string;
   unusual_occurrences?: string;
+  tag_text: string | null;
 }
 
 export interface Species {
@@ -154,6 +155,7 @@ export interface RecordingFileParameters {
   detector?: string;
   species_list?: string;
   unusual_occurrences?: string;
+  tag?: string;
 }
 
 async function uploadRecordingFile(file: File, params: RecordingFileParameters) {
@@ -250,12 +252,21 @@ interface GRTSCellCenter {
   error?: string;
 }
 
+export interface RecordingTag {
+  id: number;
+  text: string;
+  user_id: number;
+}
+
 async function getRecordings(getPublic = false) {
   return axiosInstance.get<Recording[]>(`/recording/?public=${getPublic}`);
 }
 async function getRecording(id: string) {
   return axiosInstance.get<Recording>(`/recording/${id}/`);
 }
+async function getRecordingTags() {
+  return axiosInstance.get<RecordingTag[]>(`/recording-tag/`);
+}
 
 async function deleteRecording(id: number) {
   return axiosInstance.delete<DeletionResponse>(`/recording/${id}`);
@@ -523,4 +534,5 @@ export {
   getFilteredProcessingTasks,
   getFileAnnotationDetails,
   getExportStatus,
+  getRecordingTags,
 };
diff --git a/client/src/components/UploadRecording.vue b/client/src/components/UploadRecording.vue
index b97c8cca..851926ac 100644
--- a/client/src/components/UploadRecording.vue
+++ b/client/src/components/UploadRecording.vue
@@ -1,11 +1,19 @@
 <script lang="ts">
-import { defineComponent, PropType, ref, Ref } from 'vue';
+import {
+  computed,
+  defineComponent,
+  PropType,
+  ref,
+  Ref,
+} from 'vue';
 import { RecordingMimeTypes } from '../constants';
 import useRequest from '@use/useRequest';
-import { UploadLocation, uploadRecordingFile, patchRecording, getCellLocation, getCellfromLocation, getGuanoMetadata, RecordingFileParameters } from '../api/api';
+import { UploadLocation, uploadRecordingFile, patchRecording, getCellLocation, getCellfromLocation, getGuanoMetadata, RecordingFileParameters, RecordingTag } from '../api/api';
 import MapLocation from './MapLocation.vue';
 import { useDate } from 'vuetify/lib/framework.mjs';
 import { getCurrentTime, extractDateTimeComponents } from '@use/useUtils';
+import useState from '@use/useState';
+
 export interface EditingRecording {
   id: number;
   name: string;
@@ -34,6 +42,10 @@ export default defineComponent({
   },
   emits: ['done', 'cancel'],
   setup(props, { emit }) {
+    const { recordingTagList } = useState();
+    const tagOptions = computed(() => recordingTagList.value.map((tag: RecordingTag) => tag.text));
+    const currentTag: Ref<string | undefined> = ref(undefined)
+
     const dateAdapter = useDate();
     const fileInputEl: Ref<HTMLInputElement | null> = ref(null);
     const fileModel: Ref<File | undefined> = ref();
@@ -220,6 +232,7 @@ export default defineComponent({
           comments: comments.value,
           publicVal: publicVal.value,
           location,
+          tag: currentTag.value,
           site_name: siteName.value,
           software: software.value,
           detector: detector.value,
@@ -257,7 +270,7 @@ export default defineComponent({
         latitude.value = result.data.latitude;
         longitude.value = result.data.longitude;
         triggerUpdateMap();
-        
+
       }
     }
   };
@@ -275,6 +288,8 @@ export default defineComponent({
       progressState,
       uploadProgress,
       name,
+      tagOptions,
+      currentTag,
       equipment,
       comments,
       recordedDate,
@@ -384,6 +399,16 @@ export default defineComponent({
                 :rules="[ v => !!v || 'Requires a name']"
               />
             </v-row>
+            <v-row>
+              <v-combobox
+                v-model="currentTag"
+                clearable
+                chips
+                label="Tag"
+                hint="Give this recording a tag for searching and filtering"
+                :items="tagOptions"
+              />
+            </v-row>
             <v-row>
               <v-checkbox
                 v-model="publicVal"
diff --git a/client/src/use/useState.ts b/client/src/use/useState.ts
index 94cd9557..b6250cbf 100644
--- a/client/src/use/useState.ts
+++ b/client/src/use/useState.ts
@@ -9,6 +9,7 @@ import {
   Recording,
   SpectrogramAnnotation,
   SpectrogramSequenceAnnotation,
+  RecordingTag,
 } from "../api/api";
 import {
   interpolateCividis,
@@ -45,6 +46,7 @@ const sequenceAnnotations: Ref<SpectrogramSequenceAnnotation[]> = ref([]);
 const otherUserAnnotations: Ref<OtherUserAnnotations> = ref({});
 const sharedList: Ref<Recording[]> = ref([]);
 const recordingList: Ref<Recording[]> = ref([]);
+const recordingTagList: Ref<RecordingTag[]> = ref([]);
 const nextShared: Ref<Recording | false> = ref(false);
 const scaledVals: Ref<{ x: number; y: number }> = ref({ x: 1, y: 1 });
 const viewCompressedOverlay = ref(false);
@@ -180,6 +182,7 @@ export default function useState() {
     selectedType,
     sharedList,
     recordingList,
+    recordingTagList,
     nextShared,
     scaledVals,
     viewCompressedOverlay,
diff --git a/client/src/views/Recordings.vue b/client/src/views/Recordings.vue
index 230ba0f5..c48557f8 100644
--- a/client/src/views/Recordings.vue
+++ b/client/src/views/Recordings.vue
@@ -1,6 +1,11 @@
 <script lang="ts">
 import { defineComponent, ref, Ref, onMounted } from 'vue';
-import { deleteRecording, getRecordings, Recording } from '../api/api';
+import {
+  deleteRecording,
+  getRecordings,
+  Recording ,
+  getRecordingTags,
+} from '../api/api';
 import UploadRecording, { EditingRecording } from '@components/UploadRecording.vue';
 import MapLocation from '@components/MapLocation.vue';
 import useState from '@use/useState';
@@ -17,7 +22,7 @@ export default defineComponent({
     },
   setup() {
     const itemsPerPage = ref(-1);
-    const { sharedList, recordingList } = useState();
+    const { sharedList, recordingList, recordingTagList } = useState();
     const editingRecording: Ref<EditingRecording | null> = ref(null);
     let intervalRef: number | null = null;
 
@@ -25,28 +30,32 @@ export default defineComponent({
     const batchUploadDialog = ref(false);
     const headers = ref([
         {
-            title:'Name',
-            key:'name',
+          title:'Name',
+          key: 'name',
         },
         {
           title: 'Annotation',
-          key:'annotation'
+          key: 'annotation',
         },
         {
-            title:'Owner',
-            key:'owner_username',
+          title:'Owner',
+          key:'owner_username',
         },
         {
-            title:'Recorded Date',
-            key:'recorded_date',
+          title: 'Tag',
+          key: 'tag_text',
         },
         {
-            title:'Public',
-            key:'public',
+          title:'Recorded Date',
+          key:'recorded_date',
         },
         {
-            title:'GRTS CellId',
-            key:'grts_cell_id',
+          title:'Public',
+          key:'public',
+        },
+        {
+          title:'GRTS CellId',
+          key:'grts_cell_id',
         },
 
         {
@@ -58,79 +67,94 @@ export default defineComponent({
           key:'comments'
         },
         {
-            title:'Users Annotated',
-            key:'userAnnotations',
+          title:'Users Annotated',
+          key:'userAnnotations',
         },
         {
-            title:'Edit',
-            key:'edit',
+          title:'Edit',
+          key:'edit',
         },
     ]);
 
     const sharedHeaders = ref([
         {
-            title:'Name',
-            key:'name',
+          title: 'Name',
+          key: 'name',
         },
         {
           title: 'Annotation',
-          key:'annotation'
+          key: 'annotation'
+        },
+        {
+          title: 'Owner',
+          key: 'owner_username',
         },
         {
-            title:'Owner',
-            key:'owner_username',
+          title: 'Tag',
+          key: 'tag_text',
         },
         {
-            title:'Recorded Date',
-            key:'recorded_date',
+          title: 'Recorded Date',
+          key: 'recorded_date',
         },
         {
-            title:'Public',
-            key:'public',
+          title: 'Public',
+          key: 'public',
         },
         {
-            title:'GRTS CellId',
-            key:'grts_cell_id',
+          title: 'GRTS CellId',
+          key: 'grts_cell_id',
         },
         {
           title: 'Location',
-          key:'details'
+          key: 'details'
         },
         {
           title: 'Details',
-          key:'comments'
+          key: 'comments'
         },
-
         {
-            title:'Annotated by Me',
-            key:'userMadeAnnotations',
+          title: 'Annotated by Me',
+          key: 'userMadeAnnotations',
         },
     ]);
+    const dataLoading = ref(false);
     const fetchRecordings = async () => {
-        const recordings = await getRecordings();
-        recordingList.value = recordings.data;
-        // If we have a spectrogram being generated we need to refresh on an interval
-        let missingSpectro = false;
-        for (let i =0; i< recordingList.value.length; i+=1) {
-          if (!recordingList.value[i].hasSpectrogram) {
-            missingSpectro = true;
-            break;
-          }
+      dataLoading.value = true;
+      const recordings = await getRecordings();
+      recordingList.value = recordings.data;
+      // If we have a spectrogram being generated we need to refresh on an interval
+      let missingSpectro = false;
+      for (let i =0; i< recordingList.value.length; i+=1) {
+        if (!recordingList.value[i].hasSpectrogram) {
+          missingSpectro = true;
+          break;
         }
-        if (missingSpectro) {
-          if (intervalRef === null) {
-            intervalRef = setInterval(() => fetchRecordings(), 5000);
-          }
-        } else  {
-          if (intervalRef !== null) {
-            clearInterval(intervalRef);
-          }
+      }
+      if (missingSpectro) {
+        if (intervalRef === null) {
+          intervalRef = setInterval(() => fetchRecordings(), 5000);
         }
-        const shared = await getRecordings(true);
-        sharedList.value = shared.data;
-
+      } else  {
+        if (intervalRef !== null) {
+          clearInterval(intervalRef);
+        }
+      }
+      const shared = await getRecordings(true);
+      sharedList.value = shared.data;
+      dataLoading.value = false;
     };
-    onMounted(() => fetchRecordings());
+    const fetchRecordingTags = async () => {
+      dataLoading.value = true;
+      const tags = await getRecordingTags();
+      recordingTagList.value = tags.data;
+      dataLoading.value = false;
+    };
+    onMounted(async () => {
+      await fetchRecordingTags();
+      await fetchRecordings();
+    });
+
 
     const uploadDone = () => {
         uploadDialog.value = false;
@@ -190,6 +214,7 @@ export default defineComponent({
         openDeleteRecordingDialog,
         recordingToDelete,
         editingRecording,
+        dataLoading,
      };
   },
 });
@@ -237,7 +262,7 @@ export default defineComponent({
           <v-card-actions class="pa-4">
             <v-btn
               variant="flat"
-              @click="deleteRecordingDialog = false"
+              @click="deleteDialogOpen = false"
             >
               Cancel
             </v-btn>
@@ -256,6 +281,7 @@ export default defineComponent({
         :headers="headers"
         :items="recordingList"
         density="compact"
+        :loading="dataLoading"
         class="elevation-1 my-recordings"
       >
         <template #item.edit="{ item }">
@@ -294,6 +320,15 @@ export default defineComponent({
           <RecordingAnnotationSummary :file-annotations="item.fileAnnotations" />
         </template>
 
+        <template #item.tag_text="{ item }">
+          <v-chip
+            v-if="item.tag_text"
+            size="small"
+          >
+            {{ item.tag_text }}
+          </v-chip>
+        </template>
+
         <template #item.recorded_date="{ item }">
           {{ item.recorded_date }} {{ item.recorded_time }}
         </template>
@@ -393,6 +428,7 @@ export default defineComponent({
         v-model:items-per-page="itemsPerPage"
         :headers="sharedHeaders"
         :items="sharedList"
+        :loading="dataLoading"
         density="compact"
         class="elevation-1 shared-recordings"
       >

From e5bf253d227797151b2f830e9ac5d947d1b501af Mon Sep 17 00:00:00 2001
From: naglepuff <mike.nagler@kitware.com>
Date: Tue, 11 Nov 2025 16:22:50 -0500
Subject: [PATCH 04/16] Enable adding tag via recording edit button

---
 bats_ai/core/views/recording.py           | 4 ++--
 client/src/api/api.ts                     | 1 +
 client/src/components/UploadRecording.vue | 3 +--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/bats_ai/core/views/recording.py b/bats_ai/core/views/recording.py
index 3c073aff..b3803be2 100644
--- a/bats_ai/core/views/recording.py
+++ b/bats_ai/core/views/recording.py
@@ -56,14 +56,14 @@ class RecordingUploadSchema(Schema):
     comments: str | None
     latitude: float | None
     longitude: float | None
-    gridCellId: int | None
+    gridCellId: int | None = None
     publicVal: bool | None
     site_name: str | None
     software: str | None
     detector: str | None
     species_list: str | None
     unusual_occurrences: str | None
-    tag: str | None
+    tag: str | None = None
 
 
 class RecordingAnnotationSchema(Schema):
diff --git a/client/src/api/api.ts b/client/src/api/api.ts
index b5540452..929fe027 100644
--- a/client/src/api/api.ts
+++ b/client/src/api/api.ts
@@ -228,6 +228,7 @@ async function patchRecording(recordingId: number, params: RecordingFileParamete
       latitude,
       longitude,
       gridCellId,
+      tag: params.tag,
       site_name: params.site_name,
       software: params.software,
       detector: params.detector,
diff --git a/client/src/components/UploadRecording.vue b/client/src/components/UploadRecording.vue
index 851926ac..9d4ab0d5 100644
--- a/client/src/components/UploadRecording.vue
+++ b/client/src/components/UploadRecording.vue
@@ -44,7 +44,7 @@ export default defineComponent({
   setup(props, { emit }) {
     const { recordingTagList } = useState();
     const tagOptions = computed(() => recordingTagList.value.map((tag: RecordingTag) => tag.text));
-    const currentTag: Ref<string | undefined> = ref(undefined)
+    const currentTag: Ref<string | undefined> = ref(undefined);
 
     const dateAdapter = useDate();
     const fileInputEl: Ref<HTMLInputElement | null> = ref(null);
@@ -239,7 +239,6 @@ export default defineComponent({
           species_list: speciesList.value,
           unusual_occurrences: unusualOccurrences.value,
         };
-
         await patchRecording(props.editing.id, fileUploadParams);
         emit('done');
       } else {

From 409a8ff486641d8399ff6789b6f2cb5f4d2bf4c8 Mon Sep 17 00:00:00 2001
From: naglepuff <mike.nagler@kitware.com>
Date: Wed, 12 Nov 2025 17:30:56 -0500
Subject: [PATCH 05/16] Enable filtering by one or more tags

---
 client/src/views/Recordings.vue | 82 ++++++++++++++++++++++++++++++++-
 1 file changed, 81 insertions(+), 1 deletion(-)

diff --git a/client/src/views/Recordings.vue b/client/src/views/Recordings.vue
index c48557f8..855aa058 100644
--- a/client/src/views/Recordings.vue
+++ b/client/src/views/Recordings.vue
@@ -1,5 +1,11 @@
 <script lang="ts">
-import { defineComponent, ref, Ref, onMounted } from 'vue';
+import {
+  computed,
+  defineComponent,
+  ref,
+  Ref,
+  onMounted,
+} from 'vue';
 import {
   deleteRecording,
   getRecordings,
@@ -12,6 +18,7 @@ import useState from '@use/useState';
 import BatchUploadRecording from '@components/BatchUploadRecording.vue';
 import RecordingInfoDisplay from '@components/RecordingInfoDisplay.vue';
 import RecordingAnnotationSummary from '@components/RecordingAnnotationSummary.vue';
+import { FilterFunction } from 'vuetify';
 export default defineComponent({
     components: {
         UploadRecording,
@@ -144,12 +151,49 @@ export default defineComponent({
       sharedList.value = shared.data;
       dataLoading.value = false;
     };
+
     const fetchRecordingTags = async () => {
       dataLoading.value = true;
       const tags = await getRecordingTags();
       recordingTagList.value = tags.data;
       dataLoading.value = false;
     };
+
+    const filterTags: Ref<string[]> = ref([]);
+    const sharedFilterTags: Ref<string[]> = ref([]);
+    const recordingTags = computed(() => {
+      const tags = recordingList.value
+        .map((recording: Recording) => recording.tag_text)
+        .filter((tag: string | null) => tag !== null);
+      return [...new Set(tags)];
+    });
+    const sharedRecordingTags = computed(() => {
+      const tags = sharedList.value
+        .map((recording: Recording) => recording.tag_text)
+        .filter((tag: string | null) => tag !== null);
+      return [...new Set(tags)];
+    });
+    const tagFilter: FilterFunction = (value: string, search: string, item: any) => {
+      if (filterTags.value.length === 0) {
+        return true;
+      }
+      const itemTag = item?.columns?.tag_text;
+      if (itemTag && filterTags.value.includes(itemTag)) {
+        return true;
+      }
+      return false;
+    };
+    const sharedTagFilter: FilterFunction = (value: string, search: string, item: any) => {
+      if (filterTags.value.length === 0) {
+        return true;
+      }
+      const itemTag = item?.columns?.tag_text;
+      if (itemTag && sharedFilterTags.value.includes(itemTag)) {
+        return true;
+      }
+      return false;
+    };
+
     onMounted(async () => {
       await fetchRecordingTags();
       await fetchRecordings();
@@ -207,6 +251,12 @@ export default defineComponent({
         sharedList,
         uploadDialog,
         batchUploadDialog,
+        tagFilter,
+        sharedTagFilter,
+        filterTags,
+        sharedFilterTags,
+        recordingTags,
+        sharedRecordingTags,
         uploadDone,
         editRecording,
         deleteOneRecording,
@@ -280,10 +330,25 @@ export default defineComponent({
         v-model:items-per-page="itemsPerPage"
         :headers="headers"
         :items="recordingList"
+        :custom-filter="tagFilter"
+        filter-keys="['tag']"
+        :search="filterTags.length ? 'seach-active' : ''"
         density="compact"
         :loading="dataLoading"
         class="elevation-1 my-recordings"
       >
+        <template #top>
+          <div max-height="100px">
+            <v-combobox
+              v-model="filterTags"
+              :items="recordingTags"
+              label="Filter recordings by tag"
+              multiple
+              chips
+              closable-chips
+            />
+          </div>
+        </template>
         <template #item.edit="{ item }">
           <v-icon @click="editRecording(item)">
             mdi-pencil
@@ -428,10 +493,25 @@ export default defineComponent({
         v-model:items-per-page="itemsPerPage"
         :headers="sharedHeaders"
         :items="sharedList"
+        :custom-filter="sharedTagFilter"
+        filter-keys="['tag']"
+        :search="sharedFilterTags.length ? 'seach-active' : ''"
         :loading="dataLoading"
         density="compact"
         class="elevation-1 shared-recordings"
       >
+        <template #top>
+          <div max-height="100px">
+            <v-combobox
+              v-model="sharedFilterTags"
+              :items="sharedRecordingTags"
+              label="Filter recordings by tag"
+              multiple
+              chips
+              closable-chips
+            />
+          </div>
+        </template>
         <template #item.name="{ item }">
           <router-link
             :to="`/recording/${item.id.toString()}/spectrogram`"

From bd2fa11cdad242f62c0d918b5980d5680bdb2005 Mon Sep 17 00:00:00 2001
From: naglepuff <mike.nagler@kitware.com>
Date: Thu, 13 Nov 2025 13:11:09 -0500
Subject: [PATCH 06/16] Save tags on upload

---
 bats_ai/core/views/recording.py               | 20 +++++------
 client/src/api/api.ts                         |  4 +++
 .../src/components/BatchRecordingElement.vue  | 33 +++++++++++++++++--
 .../src/components/BatchUploadRecording.vue   | 28 +++++++++++++---
 client/src/components/UploadRecording.vue     |  5 ++-
 client/src/views/Recordings.vue               |  3 ++
 6 files changed, 76 insertions(+), 17 deletions(-)

diff --git a/bats_ai/core/views/recording.py b/bats_ai/core/views/recording.py
index b3803be2..6ba82efd 100644
--- a/bats_ai/core/views/recording.py
+++ b/bats_ai/core/views/recording.py
@@ -52,17 +52,17 @@ class RecordingUploadSchema(Schema):
     name: str
     recorded_date: str
     recorded_time: str
-    equipment: str | None
-    comments: str | None
-    latitude: float | None
-    longitude: float | None
+    equipment: str | None = None
+    comments: str | None = None
+    latitude: float | None = None
+    longitude: float | None = None
     gridCellId: int | None = None
-    publicVal: bool | None
-    site_name: str | None
-    software: str | None
-    detector: str | None
-    species_list: str | None
-    unusual_occurrences: str | None
+    publicVal: bool | None = None
+    site_name: str | None = None
+    software: str | None = None
+    detector: str | None = None
+    species_list: str | None = None
+    unusual_occurrences: str | None = None
     tag: str | None = None
 
 
diff --git a/client/src/api/api.ts b/client/src/api/api.ts
index 929fe027..8e039693 100644
--- a/client/src/api/api.ts
+++ b/client/src/api/api.ts
@@ -191,6 +191,9 @@ async function uploadRecordingFile(file: File, params: RecordingFileParameters)
   if (params.unusual_occurrences) {
     formData.append("unusual_occurrences", params.unusual_occurrences);
   }
+  if (params.tag) {
+    formData.append("tag", params.tag);
+  }
   const recordingParams = {
     name: params.name,
     equipment: params.equipment,
@@ -200,6 +203,7 @@ async function uploadRecordingFile(file: File, params: RecordingFileParameters)
     detector: params.detector,
     species_list: params.species_list,
     unusual_occurrences: params.unusual_occurrences,
+    tag: params.tag,
   };
   const payloadBlob = new Blob([JSON.stringify(recordingParams)], { type: "application/json" });
   formData.append("payload", payloadBlob);
diff --git a/client/src/components/BatchRecordingElement.vue b/client/src/components/BatchRecordingElement.vue
index ad50148c..24d65b74 100644
--- a/client/src/components/BatchRecordingElement.vue
+++ b/client/src/components/BatchRecordingElement.vue
@@ -1,10 +1,11 @@
 <script lang="ts">
-import { defineComponent, PropType, ref, Ref, watch } from "vue";
+import { computed, defineComponent, PropType, ref, Ref, watch } from "vue";
 import { RecordingMimeTypes } from "../constants";
 import { getCellLocation, getCellfromLocation, getGuanoMetadata } from "../api/api";
 import MapLocation from "./MapLocation.vue";
 import { useDate } from "vuetify/lib/framework.mjs";
 import { getCurrentTime, extractDateTimeComponents } from '@use/useUtils';
+import useState from '@use/useState';
 export interface BatchRecording {
   name: string;
   file: File;
@@ -20,6 +21,7 @@ export interface BatchRecording {
   detector?: string;
   speciesList?: string;
   unusualOccurrences?: string;
+  tag?: string;
 }
 export default defineComponent({
   components: {
@@ -33,6 +35,10 @@ export default defineComponent({
   },
   emits: ["done", "cancel", "update", "delete"],
   setup(props, { emit }) {
+    const { recordingTagList } = useState();
+    const tagOptions = computed(() => recordingTagList.value.map((tag) => tag.text));
+    const initialTag = props.editing ? props.editing.tag : undefined;
+    const currentTag: Ref<string | undefined> = ref(initialTag);
     const dateAdapter = useDate();
     const fileInputEl: Ref<HTMLInputElement | null> = ref(null);
     const fileModel: Ref<File | undefined> = ref(props.editing.file);
@@ -217,8 +223,10 @@ export default defineComponent({
         recordedTime,
         fileModel,
         publicVal,
+        currentTag,
       ],
       () => {
+        console.log('updated');
         //Data has been updated we emit the updated recording value
         if (fileModel.value) {
           const newRecording: BatchRecording = {
@@ -231,6 +239,9 @@ export default defineComponent({
             file: fileModel.value,
             public: publicVal.value,
           };
+          if (currentTag.value) {
+            newRecording.tag = currentTag.value;
+          }
           if (latitude.value && longitude.value) {
             newRecording.location = {
               lat: latitude.value,
@@ -242,10 +253,16 @@ export default defineComponent({
       }
     );
 
-    watch([() => props.editing.comments, () => props.editing.equipment, () => props.editing.public], () => {
+    watch([
+      () => props.editing.comments,
+      () => props.editing.equipment,
+      () => props.editing.public,
+      () => props.editing.tag,
+    ], () => {
         publicVal.value = props.editing.public;
         equipment.value = props.editing.equipment;
         comments.value = props.editing.comments;
+        currentTag.value = props.editing.tag;
     });
 
     return {
@@ -266,6 +283,8 @@ export default defineComponent({
       publicVal,
       updateMap,
       recordedTime,
+      tagOptions,
+      currentTag,
       // Guano Metadata
       siteName,
       software,
@@ -337,6 +356,16 @@ export default defineComponent({
               :rules="[(v) => !!v || 'Requires a name']"
             />
           </v-row>
+          <v-row>
+            <v-combobox
+              v-model="currentTag"
+              clearable
+              chips
+              label="Tag"
+              hint="Set a tag for this batch of recordings"
+              :items="tagOptions"
+            />
+          </v-row>
           <v-row>
             <v-checkbox
               v-model="publicVal"
diff --git a/client/src/components/BatchUploadRecording.vue b/client/src/components/BatchUploadRecording.vue
index 29c37888..4be59802 100644
--- a/client/src/components/BatchUploadRecording.vue
+++ b/client/src/components/BatchUploadRecording.vue
@@ -1,11 +1,12 @@
 <script lang="ts">
-import { defineComponent, ref, Ref, watch } from 'vue';
+import { computed, defineComponent, ref, Ref, watch } from 'vue';
 import { RecordingMimeTypes } from '../constants';
 import useRequest from '@use/useRequest';
-import { UploadLocation, uploadRecordingFile, getCellLocation, RecordingFileParameters, getGuanoMetadata } from '../api/api';
+import { UploadLocation, uploadRecordingFile, getCellLocation, RecordingFileParameters, getGuanoMetadata, RecordingTag } from '../api/api';
 import BatchRecordingElement, { BatchRecording } from './BatchRecordingElement.vue';
 import { cloneDeep } from 'lodash';
 import { extractDateTimeComponents, getCurrentTime } from '@use/useUtils';
+import useState from '@use/useState';
 
 
 interface AutoFillResult {
@@ -22,6 +23,9 @@ export default defineComponent({
   },
   emits: ['done', 'cancel'],
   setup(props, { emit }) {
+    const { recordingTagList } = useState();
+    const tagOptions = computed(() => recordingTagList.value.map((tag: RecordingTag) => tag.text));
+
     const fileInputEl: Ref<HTMLInputElement | null> = ref(null);
     const fileModel: Ref<File | undefined> = ref();
     const recordings: Ref<BatchRecording[]> = ref([]);
@@ -33,6 +37,7 @@ export default defineComponent({
     const globalPublic = ref(false);
     const globalEquipment = ref('');
     const globalComments = ref('');
+    const globalTag = ref(undefined as undefined | string);
 
     const autoFill = async (filename: string) => {
 
@@ -162,7 +167,7 @@ export default defineComponent({
           detector: fileElement.detector,
           species_list: fileElement.speciesList,
           unusual_occurrences: fileElement.unusualOccurrences,
-
+          tag: fileElement.tag,
         };
         await uploadRecordingFile(file, fileUploadParams);
         recordings.value.splice(0, 1);
@@ -225,7 +230,7 @@ export default defineComponent({
       recordings.value = updatedRecordings;
     };
 
-    watch([globalPublic, globalComments, globalEquipment], () => {
+    watch([globalPublic, globalComments, globalEquipment, globalTag], () => {
       const newResults: BatchRecording[] = [];
         recordings.value.forEach((item) => {
           item.public = globalPublic.value;
@@ -235,12 +240,15 @@ export default defineComponent({
           if (globalEquipment.value) {
             item.equipment = globalEquipment.value;
           }
+          item.tag = globalTag.value || undefined;
           newResults.push(item);
         });
       recordings.value = newResults;
     });
 
     return {
+      tagOptions,
+      globalTag,
       errorText,
       fileModel,
       fileInputEl,
@@ -320,6 +328,18 @@ export default defineComponent({
                   </v-btn>
                 </v-row>
 
+                <v-row>
+                  <v-combobox
+                    v-model="globalTag"
+                    class="mt-2"
+                    clearable
+                    chips
+                    label="Tag"
+                    hint="Set a tag for this batch of recordings"
+                    :items="tagOptions"
+                  />
+                </v-row>
+
                 <v-row>
                   <v-checkbox
                     v-model="globalPublic"
diff --git a/client/src/components/UploadRecording.vue b/client/src/components/UploadRecording.vue
index 9d4ab0d5..c2da07ab 100644
--- a/client/src/components/UploadRecording.vue
+++ b/client/src/components/UploadRecording.vue
@@ -28,6 +28,7 @@ export interface EditingRecording {
   detector?: string;
   speciesList?: string;
   unusualOccurrences?: string;
+  tag?: string;
 }
 
 export default defineComponent({
@@ -44,7 +45,8 @@ export default defineComponent({
   setup(props, { emit }) {
     const { recordingTagList } = useState();
     const tagOptions = computed(() => recordingTagList.value.map((tag: RecordingTag) => tag.text));
-    const currentTag: Ref<string | undefined> = ref(undefined);
+    const initialTag = props.editing ? props.editing.tag : undefined;
+    const currentTag: Ref<string | undefined> = ref(initialTag);
 
     const dateAdapter = useDate();
     const fileInputEl: Ref<HTMLInputElement | null> = ref(null);
@@ -160,6 +162,7 @@ export default defineComponent({
           comments: comments.value,
           publicVal: publicVal.value,
           location,
+          tag: currentTag.value,
           site_name: siteName.value,
           software: software.value,
           detector: detector.value,
diff --git a/client/src/views/Recordings.vue b/client/src/views/Recordings.vue
index 855aa058..0eb50859 100644
--- a/client/src/views/Recordings.vue
+++ b/client/src/views/Recordings.vue
@@ -226,6 +226,9 @@ export default defineComponent({
         const [ lon, lat ] = item.recording_location.coordinates;
         editingRecording.value['location'] = {lat, lon};
       }
+      if (item.tag_text) {
+        editingRecording.value.tag = item.tag_text;
+      }
       uploadDialog.value = true;
     };
     const deleteDialogOpen = ref(false);

From 68f00cfaa7fb676ce06d182fed8787e8b1bdcde9 Mon Sep 17 00:00:00 2001
From: naglepuff <mike.nagler@kitware.com>
Date: Thu, 13 Nov 2025 13:24:43 -0500
Subject: [PATCH 07/16] Format and linting

---
 ...023_recordingtag_recording_tag_and_more.py | 22 +++++++++++++++----
 bats_ai/core/views/recording.py               |  4 +---
 .../src/components/BatchRecordingElement.vue  |  1 -
 client/src/views/Recordings.vue               |  2 ++
 4 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/bats_ai/core/migrations/0023_recordingtag_recording_tag_and_more.py b/bats_ai/core/migrations/0023_recordingtag_recording_tag_and_more.py
index 3148f0a3..1dd7d97a 100644
--- a/bats_ai/core/migrations/0023_recordingtag_recording_tag_and_more.py
+++ b/bats_ai/core/migrations/0023_recordingtag_recording_tag_and_more.py
@@ -16,18 +16,32 @@ class Migration(migrations.Migration):
         migrations.CreateModel(
             name='RecordingTag',
             fields=[
-                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                (
+                    'id',
+                    models.BigAutoField(
+                        auto_created=True, primary_key=True, serialize=False, verbose_name='ID'
+                    ),
+                ),
                 ('text', models.CharField(max_length=50)),
-                ('user', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to=settings.AUTH_USER_MODEL)),
+                (
+                    'user',
+                    models.ForeignKey(
+                        on_delete=django.db.models.deletion.CASCADE, to=settings.AUTH_USER_MODEL
+                    ),
+                ),
             ],
         ),
         migrations.AddField(
             model_name='recording',
             name='tag',
-            field=models.ForeignKey(null=True, on_delete=django.db.models.deletion.DO_NOTHING, to='core.recordingtag'),
+            field=models.ForeignKey(
+                null=True, on_delete=django.db.models.deletion.DO_NOTHING, to='core.recordingtag'
+            ),
         ),
         migrations.AddConstraint(
             model_name='recordingtag',
-            constraint=models.UniqueConstraint(fields=('user', 'text'), name='unique_user_text_tag'),
+            constraint=models.UniqueConstraint(
+                fields=('user', 'text'), name='unique_user_text_tag'
+            ),
         ),
     ]
diff --git a/bats_ai/core/views/recording.py b/bats_ai/core/views/recording.py
index 6ba82efd..53cb0bca 100644
--- a/bats_ai/core/views/recording.py
+++ b/bats_ai/core/views/recording.py
@@ -245,9 +245,7 @@ def get_recordings(request: HttpRequest, public: bool | None = None):
         )
     else:
         recordings = (
-            Recording.objects.filter(owner=request.user)
-            .annotate(tag_text=F('tag__text'))
-            .values()
+            Recording.objects.filter(owner=request.user).annotate(tag_text=F('tag__text')).values()
         )
 
     # TODO with larger dataset it may be better to do this in a queryset instead of python
diff --git a/client/src/components/BatchRecordingElement.vue b/client/src/components/BatchRecordingElement.vue
index 24d65b74..8166db7f 100644
--- a/client/src/components/BatchRecordingElement.vue
+++ b/client/src/components/BatchRecordingElement.vue
@@ -226,7 +226,6 @@ export default defineComponent({
         currentTag,
       ],
       () => {
-        console.log('updated');
         //Data has been updated we emit the updated recording value
         if (fileModel.value) {
           const newRecording: BatchRecording = {
diff --git a/client/src/views/Recordings.vue b/client/src/views/Recordings.vue
index 0eb50859..f8cd1be1 100644
--- a/client/src/views/Recordings.vue
+++ b/client/src/views/Recordings.vue
@@ -173,6 +173,7 @@ export default defineComponent({
         .filter((tag: string | null) => tag !== null);
       return [...new Set(tags)];
     });
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const tagFilter: FilterFunction = (value: string, search: string, item: any) => {
       if (filterTags.value.length === 0) {
         return true;
@@ -183,6 +184,7 @@ export default defineComponent({
       }
       return false;
     };
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const sharedTagFilter: FilterFunction = (value: string, search: string, item: any) => {
       if (filterTags.value.length === 0) {
         return true;

From d30cc7202f4d181d1b81d8de0a2e43e6fe4b5781 Mon Sep 17 00:00:00 2001
From: naglepuff <mike.nagler@kitware.com>
Date: Fri, 14 Nov 2025 10:50:05 -0500
Subject: [PATCH 08/16] Fix typing for custom filter functions

---
 client/src/views/Recordings.vue | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/client/src/views/Recordings.vue b/client/src/views/Recordings.vue
index f8cd1be1..498c401e 100644
--- a/client/src/views/Recordings.vue
+++ b/client/src/views/Recordings.vue
@@ -18,7 +18,7 @@ import useState from '@use/useState';
 import BatchUploadRecording from '@components/BatchUploadRecording.vue';
 import RecordingInfoDisplay from '@components/RecordingInfoDisplay.vue';
 import RecordingAnnotationSummary from '@components/RecordingAnnotationSummary.vue';
-import { FilterFunction } from 'vuetify';
+import { FilterFunction, InternalItem } from 'vuetify';
 export default defineComponent({
     components: {
         UploadRecording,
@@ -173,23 +173,21 @@ export default defineComponent({
         .filter((tag: string | null) => tag !== null);
       return [...new Set(tags)];
     });
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const tagFilter: FilterFunction = (value: string, search: string, item: any) => {
+    const tagFilter: FilterFunction = (value: string, search: string, item?: InternalItem<Recording>) => {
       if (filterTags.value.length === 0) {
         return true;
       }
-      const itemTag = item?.columns?.tag_text;
+      const itemTag = item?.raw.tag_text;
       if (itemTag && filterTags.value.includes(itemTag)) {
         return true;
       }
       return false;
     };
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const sharedTagFilter: FilterFunction = (value: string, search: string, item: any) => {
+    const sharedTagFilter: FilterFunction = (value: string, search: string, item?: InternalItem<Recording>) => {
       if (filterTags.value.length === 0) {
         return true;
       }
-      const itemTag = item?.columns?.tag_text;
+      const itemTag = item?.raw.tag_text;
       if (itemTag && sharedFilterTags.value.includes(itemTag)) {
         return true;
       }
@@ -201,7 +199,6 @@ export default defineComponent({
       await fetchRecordings();
     });
 
-
     const uploadDone = () => {
         uploadDialog.value = false;
         batchUploadDialog.value = false;

From 34a09ab35ecc2c707619f2b35f544cb07aa7c059 Mon Sep 17 00:00:00 2001
From: naglepuff <mike.nagler@kitware.com>
Date: Mon, 17 Nov 2025 16:55:22 -0500
Subject: [PATCH 09/16] Add recording count to recording tag admin

---
 bats_ai/core/admin/recording_tag.py | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/bats_ai/core/admin/recording_tag.py b/bats_ai/core/admin/recording_tag.py
index fc1cfa02..bc7158b4 100644
--- a/bats_ai/core/admin/recording_tag.py
+++ b/bats_ai/core/admin/recording_tag.py
@@ -1,4 +1,5 @@
 from django.contrib import admin
+from django.db.models import Count
 
 from bats_ai.core.models import RecordingTag
 
@@ -9,5 +10,16 @@ class RecordingTagAdmin(admin.ModelAdmin):
         'id',
         'user',
         'text',
+        'recording_count',
     )
     search_fields = ('id', 'user', 'text')
+
+    def get_queryset(self, request):
+        qs = super().get_queryset(request)
+        return qs.annotate(_recording_count=Count('recording'))
+
+    def recording_count(self, obj):
+        return obj._recording_count
+
+    recording_count.short_description = 'Number of recordings'
+    recording_count.admin_order_field = '_recording_count'

From f315b0c192dbbeb582028cd18c3e1a39b3b120cc Mon Sep 17 00:00:00 2001
From: naglepuff <mike.nagler@kitware.com>
Date: Tue, 25 Nov 2025 11:38:36 -0500
Subject: [PATCH 10/16] Make tag relationship many to many

---
 ...024_remove_recording_tag_recording_tags.py | 22 +++++++
 bats_ai/core/models/recording.py              |  2 +-
 bats_ai/core/views/recording.py               | 35 +++++++----
 client/src/api/api.ts                         | 12 ++--
 .../src/components/BatchRecordingElement.vue  | 22 ++++---
 .../src/components/BatchUploadRecording.vue   | 18 +++---
 client/src/components/UploadRecording.vue     | 45 ++++++-------
 client/src/views/Recordings.vue               | 63 +++++++++++--------
 8 files changed, 133 insertions(+), 86 deletions(-)
 create mode 100644 bats_ai/core/migrations/0024_remove_recording_tag_recording_tags.py

diff --git a/bats_ai/core/migrations/0024_remove_recording_tag_recording_tags.py b/bats_ai/core/migrations/0024_remove_recording_tag_recording_tags.py
new file mode 100644
index 00000000..0fddd03a
--- /dev/null
+++ b/bats_ai/core/migrations/0024_remove_recording_tag_recording_tags.py
@@ -0,0 +1,22 @@
+# Generated by Django 4.2.23 on 2025-11-25 15:33
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('core', '0023_recordingtag_recording_tag_and_more'),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name='recording',
+            name='tag',
+        ),
+        migrations.AddField(
+            model_name='recording',
+            name='tags',
+            field=models.ManyToManyField(to='core.recordingtag'),
+        ),
+    ]
diff --git a/bats_ai/core/models/recording.py b/bats_ai/core/models/recording.py
index 8ff6aa4f..4f81e7b0 100644
--- a/bats_ai/core/models/recording.py
+++ b/bats_ai/core/models/recording.py
@@ -47,7 +47,7 @@ class Recording(TimeStampedModel, models.Model):
         Species, related_name='recording_official_species'
     )  # species that are detemrined by the owner or from annotations as official species list
     unusual_occurrences = models.TextField(blank=True, null=True)
-    tag = models.ForeignKey(RecordingTag, on_delete=models.DO_NOTHING, null=True)
+    tags = models.ManyToManyField(RecordingTag)
 
     @property
     def has_spectrogram(self):
diff --git a/bats_ai/core/views/recording.py b/bats_ai/core/views/recording.py
index 53cb0bca..e798f060 100644
--- a/bats_ai/core/views/recording.py
+++ b/bats_ai/core/views/recording.py
@@ -1,11 +1,13 @@
 from datetime import datetime
 import json
 import logging
+from typing import List, Optional
 
 from django.contrib.auth.models import User
 from django.contrib.gis.geos import Point
+from django.contrib.postgres.aggregates import ArrayAgg
 from django.core.files.storage import default_storage
-from django.db.models import F, Q
+from django.db.models import Q
 from django.http import HttpRequest
 from ninja import File, Form, Schema
 from ninja.files import UploadedFile
@@ -45,7 +47,7 @@ class RecordingSchema(Schema):
     recording_location: str | None
     grts_cell_id: int | None
     grts_cell: int | None
-    tag: RecordingTagSchema | None
+    tags: list[RecordingTagSchema] = []
 
 
 class RecordingUploadSchema(Schema):
@@ -63,7 +65,7 @@ class RecordingUploadSchema(Schema):
     detector: str | None = None
     species_list: str | None = None
     unusual_occurrences: str | None = None
-    tag: str | None = None
+    tags: Optional[List[str]] = None
 
 
 class RecordingAnnotationSchema(Schema):
@@ -154,9 +156,12 @@ def create_recording(
         species_list=payload.species_list,
         unusual_occurrences=payload.unusual_occurrences,
     )
-    if payload.tag:
-        tag, _ = RecordingTag.objects.get_or_create(user=request.user, text=payload.tag)
-        recording.tag = tag
+    recording.save()
+
+    if payload.tags:
+        for tag in payload.tags:
+            tag, _ = RecordingTag.objects.get_or_create(user=request.user, text=tag)
+            recording.tags.add(tag)
 
     recording.save()
     # Start generating recording as soon as created
@@ -200,9 +205,10 @@ def update_recording(request: HttpRequest, id: int, recording_data: RecordingUpl
         recording.species_list = recording_data.species_list
     if recording_data.unusual_occurrences:
         recording.unusual_occurrences = recording_data.unusual_occurrences
-    if recording_data.tag:
-        tag, _ = RecordingTag.objects.get_or_create(user=request.user, text=recording_data.tag)
-        recording.tag = tag
+    if recording_data.tags:
+        for tag in recording_data.tags:
+            tag, _ = RecordingTag.objects.get_or_create(user=request.user, text=tag)
+        recording.tags.add(tag)
 
     recording.save()
 
@@ -240,12 +246,14 @@ def get_recordings(request: HttpRequest, public: bool | None = None):
         recordings = (
             Recording.objects.filter(public=True)
             .exclude(Q(owner=request.user) | Q(spectrogram__isnull=True))
-            .annotate(tag_text=F('tag__text'))
+            .annotate(tags_text=ArrayAgg('tags__text'))
             .values()
         )
     else:
         recordings = (
-            Recording.objects.filter(owner=request.user).annotate(tag_text=F('tag__text')).values()
+            Recording.objects.filter(owner=request.user)
+            .annotate(tags_text=ArrayAgg('tags__text'))
+            .values()
         )
 
     # TODO with larger dataset it may be better to do this in a queryset instead of python
@@ -283,7 +291,9 @@ def get_recordings(request: HttpRequest, public: bool | None = None):
 def get_recording(request: HttpRequest, id: int):
     # Filter recordings based on the owner's id or public=True
     try:
-        recordings = Recording.objects.filter(pk=id).values()
+        recordings = (
+            Recording.objects.filter(pk=id).annotate(tags_text=ArrayAgg('tags__text')).values()
+        )
         if len(recordings) > 0:
             recording = recordings[0]
 
@@ -325,7 +335,6 @@ def get_recording(request: HttpRequest, id: int):
                 RecordingAnnotationSchema.from_orm(fileAnnotation).dict()
                 for fileAnnotation in fileAnnotations
             ]
-
             return recording
         else:
             return {'error': 'Recording not found'}
diff --git a/client/src/api/api.ts b/client/src/api/api.ts
index 8e039693..3b13e655 100644
--- a/client/src/api/api.ts
+++ b/client/src/api/api.ts
@@ -27,7 +27,7 @@ export interface Recording {
   detector?: string;
   species_list?: string;
   unusual_occurrences?: string;
-  tag_text: string | null;
+  tags_text?: string[];
 }
 
 export interface Species {
@@ -155,7 +155,7 @@ export interface RecordingFileParameters {
   detector?: string;
   species_list?: string;
   unusual_occurrences?: string;
-  tag?: string;
+  tags?: string[];
 }
 
 async function uploadRecordingFile(file: File, params: RecordingFileParameters) {
@@ -191,8 +191,8 @@ async function uploadRecordingFile(file: File, params: RecordingFileParameters)
   if (params.unusual_occurrences) {
     formData.append("unusual_occurrences", params.unusual_occurrences);
   }
-  if (params.tag) {
-    formData.append("tag", params.tag);
+  if (params.tags) {
+    params.tags.forEach((tag: string) => formData.append("tags", tag));
   }
   const recordingParams = {
     name: params.name,
@@ -203,7 +203,7 @@ async function uploadRecordingFile(file: File, params: RecordingFileParameters)
     detector: params.detector,
     species_list: params.species_list,
     unusual_occurrences: params.unusual_occurrences,
-    tag: params.tag,
+    tags: params.tags,
   };
   const payloadBlob = new Blob([JSON.stringify(recordingParams)], { type: "application/json" });
   formData.append("payload", payloadBlob);
@@ -232,7 +232,7 @@ async function patchRecording(recordingId: number, params: RecordingFileParamete
       latitude,
       longitude,
       gridCellId,
-      tag: params.tag,
+      tags: params.tags,
       site_name: params.site_name,
       software: params.software,
       detector: params.detector,
diff --git a/client/src/components/BatchRecordingElement.vue b/client/src/components/BatchRecordingElement.vue
index 8166db7f..44b451ce 100644
--- a/client/src/components/BatchRecordingElement.vue
+++ b/client/src/components/BatchRecordingElement.vue
@@ -21,7 +21,7 @@ export interface BatchRecording {
   detector?: string;
   speciesList?: string;
   unusualOccurrences?: string;
-  tag?: string;
+  tags?: string[];
 }
 export default defineComponent({
   components: {
@@ -37,8 +37,8 @@ export default defineComponent({
   setup(props, { emit }) {
     const { recordingTagList } = useState();
     const tagOptions = computed(() => recordingTagList.value.map((tag) => tag.text));
-    const initialTag = props.editing ? props.editing.tag : undefined;
-    const currentTag: Ref<string | undefined> = ref(initialTag);
+    const initialTags = props.editing ? props.editing.tags : [];
+    const currentTags: Ref<string[] | undefined> = ref(initialTags);
     const dateAdapter = useDate();
     const fileInputEl: Ref<HTMLInputElement | null> = ref(null);
     const fileModel: Ref<File | undefined> = ref(props.editing.file);
@@ -223,7 +223,7 @@ export default defineComponent({
         recordedTime,
         fileModel,
         publicVal,
-        currentTag,
+        currentTags,
       ],
       () => {
         //Data has been updated we emit the updated recording value
@@ -238,8 +238,8 @@ export default defineComponent({
             file: fileModel.value,
             public: publicVal.value,
           };
-          if (currentTag.value) {
-            newRecording.tag = currentTag.value;
+          if (currentTags.value) {
+            newRecording.tags = currentTags.value;
           }
           if (latitude.value && longitude.value) {
             newRecording.location = {
@@ -256,12 +256,12 @@ export default defineComponent({
       () => props.editing.comments,
       () => props.editing.equipment,
       () => props.editing.public,
-      () => props.editing.tag,
+      () => props.editing.tags,
     ], () => {
         publicVal.value = props.editing.public;
         equipment.value = props.editing.equipment;
         comments.value = props.editing.comments;
-        currentTag.value = props.editing.tag;
+        currentTags.value = props.editing.tags;
     });
 
     return {
@@ -283,7 +283,7 @@ export default defineComponent({
       updateMap,
       recordedTime,
       tagOptions,
-      currentTag,
+      currentTags,
       // Guano Metadata
       siteName,
       software,
@@ -357,9 +357,11 @@ export default defineComponent({
           </v-row>
           <v-row>
             <v-combobox
-              v-model="currentTag"
+              v-model="currentTags"
               clearable
+              multiple
               chips
+              closable-chips
               label="Tag"
               hint="Set a tag for this batch of recordings"
               :items="tagOptions"
diff --git a/client/src/components/BatchUploadRecording.vue b/client/src/components/BatchUploadRecording.vue
index 4be59802..f9726f46 100644
--- a/client/src/components/BatchUploadRecording.vue
+++ b/client/src/components/BatchUploadRecording.vue
@@ -37,7 +37,7 @@ export default defineComponent({
     const globalPublic = ref(false);
     const globalEquipment = ref('');
     const globalComments = ref('');
-    const globalTag = ref(undefined as undefined | string);
+    const globalTags = ref([] as string[]);
 
     const autoFill = async (filename: string) => {
 
@@ -167,7 +167,7 @@ export default defineComponent({
           detector: fileElement.detector,
           species_list: fileElement.speciesList,
           unusual_occurrences: fileElement.unusualOccurrences,
-          tag: fileElement.tag,
+          tags: fileElement.tags,
         };
         await uploadRecordingFile(file, fileUploadParams);
         recordings.value.splice(0, 1);
@@ -230,7 +230,7 @@ export default defineComponent({
       recordings.value = updatedRecordings;
     };
 
-    watch([globalPublic, globalComments, globalEquipment, globalTag], () => {
+    watch([globalPublic, globalComments, globalEquipment, globalTags], () => {
       const newResults: BatchRecording[] = [];
         recordings.value.forEach((item) => {
           item.public = globalPublic.value;
@@ -240,15 +240,15 @@ export default defineComponent({
           if (globalEquipment.value) {
             item.equipment = globalEquipment.value;
           }
-          item.tag = globalTag.value || undefined;
+          item.tags = globalTags.value;
           newResults.push(item);
         });
       recordings.value = newResults;
-    });
+    }, { deep: true });
 
     return {
       tagOptions,
-      globalTag,
+      globalTags,
       errorText,
       fileModel,
       fileInputEl,
@@ -330,13 +330,15 @@ export default defineComponent({
 
                 <v-row>
                   <v-combobox
-                    v-model="globalTag"
+                    v-model="globalTags"
+                    :items="tagOptions"
                     class="mt-2"
+                    multiple
                     clearable
                     chips
+                    closable-chips
                     label="Tag"
                     hint="Set a tag for this batch of recordings"
-                    :items="tagOptions"
                   />
                 </v-row>
 
diff --git a/client/src/components/UploadRecording.vue b/client/src/components/UploadRecording.vue
index c2da07ab..2c529f15 100644
--- a/client/src/components/UploadRecording.vue
+++ b/client/src/components/UploadRecording.vue
@@ -28,7 +28,7 @@ export interface EditingRecording {
   detector?: string;
   speciesList?: string;
   unusualOccurrences?: string;
-  tag?: string;
+  tags?: string[];
 }
 
 export default defineComponent({
@@ -45,8 +45,8 @@ export default defineComponent({
   setup(props, { emit }) {
     const { recordingTagList } = useState();
     const tagOptions = computed(() => recordingTagList.value.map((tag: RecordingTag) => tag.text));
-    const initialTag = props.editing ? props.editing.tag : undefined;
-    const currentTag: Ref<string | undefined> = ref(initialTag);
+    const initialTags = props.editing ? props.editing.tags : undefined;
+    const currentTags: Ref<string[]> = ref(initialTags || []);
 
     const dateAdapter = useDate();
     const fileInputEl: Ref<HTMLInputElement | null> = ref(null);
@@ -155,21 +155,20 @@ export default defineComponent({
         location['gridCellId'] = gridCellId.value;
       }
       const fileUploadParams: RecordingFileParameters = {
-          name: name.value,
-          recorded_date: recordedDate.value,
-          recorded_time: recordedTime.value,
-          equipment: equipment.value,
-          comments: comments.value,
-          publicVal: publicVal.value,
-          location,
-          tag: currentTag.value,
-          site_name: siteName.value,
-          software: software.value,
-          detector: detector.value,
-          species_list: speciesList.value,
-          unusual_occurrences: unusualOccurrences.value,
-        };
-
+        name: name.value,
+        recorded_date: recordedDate.value,
+        recorded_time: recordedTime.value,
+        equipment: equipment.value,
+        comments: comments.value,
+        publicVal: publicVal.value,
+        location,
+        tags: currentTags.value,
+        site_name: siteName.value,
+        software: software.value,
+        detector: detector.value,
+        species_list: speciesList.value,
+        unusual_occurrences: unusualOccurrences.value,
+      };
       await uploadRecordingFile(file, fileUploadParams);
       emit('done');
     });
@@ -235,7 +234,7 @@ export default defineComponent({
           comments: comments.value,
           publicVal: publicVal.value,
           location,
-          tag: currentTag.value,
+          tags: currentTags.value,
           site_name: siteName.value,
           software: software.value,
           detector: detector.value,
@@ -291,7 +290,7 @@ export default defineComponent({
       uploadProgress,
       name,
       tagOptions,
-      currentTag,
+      currentTags,
       equipment,
       comments,
       recordedDate,
@@ -403,12 +402,14 @@ export default defineComponent({
             </v-row>
             <v-row>
               <v-combobox
-                v-model="currentTag"
+                v-model="currentTags"
+                :items="tagOptions"
+                multiple
                 clearable
                 chips
+                closable-chips
                 label="Tag"
                 hint="Give this recording a tag for searching and filtering"
-                :items="tagOptions"
               />
             </v-row>
             <v-row>
diff --git a/client/src/views/Recordings.vue b/client/src/views/Recordings.vue
index 498c401e..80fb68fb 100644
--- a/client/src/views/Recordings.vue
+++ b/client/src/views/Recordings.vue
@@ -19,6 +19,7 @@ import BatchUploadRecording from '@components/BatchUploadRecording.vue';
 import RecordingInfoDisplay from '@components/RecordingInfoDisplay.vue';
 import RecordingAnnotationSummary from '@components/RecordingAnnotationSummary.vue';
 import { FilterFunction, InternalItem } from 'vuetify';
+import { VListItemSubtitle } from 'vuetify/lib/components';
 export default defineComponent({
     components: {
         UploadRecording,
@@ -162,36 +163,42 @@ export default defineComponent({
     const filterTags: Ref<string[]> = ref([]);
     const sharedFilterTags: Ref<string[]> = ref([]);
     const recordingTags = computed(() => {
-      const tags = recordingList.value
-        .map((recording: Recording) => recording.tag_text)
-        .filter((tag: string | null) => tag !== null);
-      return [...new Set(tags)];
+      const tags = new Set();
+      recordingList.value.forEach((recording: Recording) => {
+        recording.tags_text?.forEach((tag: string) => {
+          if (tag) {
+            tags.add(tag);
+          }
+        });
+      });
+      return Array.from(tags);
     });
     const sharedRecordingTags = computed(() => {
-      const tags = sharedList.value
-        .map((recording: Recording) => recording.tag_text)
-        .filter((tag: string | null) => tag !== null);
-      return [...new Set(tags)];
+      const tags = new Set();
+      sharedList.value.forEach((recording: Recording) => {
+        recording.tags_text?.forEach((tag: string) => {
+          if (tag) {
+            tags.add(tag);
+          }
+        });
+      });
+      return Array.from(tags);
     });
     const tagFilter: FilterFunction = (value: string, search: string, item?: InternalItem<Recording>) => {
       if (filterTags.value.length === 0) {
         return true;
       }
-      const itemTag = item?.raw.tag_text;
-      if (itemTag && filterTags.value.includes(itemTag)) {
-        return true;
-      }
-      return false;
+      const filterTagSet = new Set(filterTags.value);
+      const itemTagSet = new Set(item?.raw.tags_text);
+      return filterTagSet.intersection(itemTagSet).size > 0;
     };
     const sharedTagFilter: FilterFunction = (value: string, search: string, item?: InternalItem<Recording>) => {
       if (filterTags.value.length === 0) {
         return true;
       }
-      const itemTag = item?.raw.tag_text;
-      if (itemTag && sharedFilterTags.value.includes(itemTag)) {
-        return true;
-      }
-      return false;
+      const filterTagSet = new Set(filterTags.value);
+      const itemTagSet = new Set(item?.raw.tags_text);
+      return filterTagSet.intersection(itemTagSet).size > 0;
     };
 
     onMounted(async () => {
@@ -225,8 +232,8 @@ export default defineComponent({
         const [ lon, lat ] = item.recording_location.coordinates;
         editingRecording.value['location'] = {lat, lon};
       }
-      if (item.tag_text) {
-        editingRecording.value.tag = item.tag_text;
+      if (item.tags_text) {
+        editingRecording.value.tags = item.tags_text.filter((tag: string) => !!tag);
       }
       uploadDialog.value = true;
     };
@@ -348,6 +355,7 @@ export default defineComponent({
               multiple
               chips
               closable-chips
+              clearable
             />
           </div>
         </template>
@@ -388,12 +396,15 @@ export default defineComponent({
         </template>
 
         <template #item.tag_text="{ item }">
-          <v-chip
-            v-if="item.tag_text"
-            size="small"
-          >
-            {{ item.tag_text }}
-          </v-chip>
+          <span v-if="item.tags_text">
+            <v-chip
+              v-for="tag in item.tags_text"
+              :key="tag"
+              size="small"
+            >
+              {{ tag }}
+            </v-chip>
+          </span>
         </template>
 
         <template #item.recorded_date="{ item }">

From 7d735c56e7bdfe0e0b0c890fdd2c91cc2ecccf7f Mon Sep 17 00:00:00 2001
From: naglepuff <mike.nagler@kitware.com>
Date: Wed, 26 Nov 2025 10:04:22 -0500
Subject: [PATCH 11/16] Use the plural for tag in the UI

---
 client/src/components/BatchRecordingElement.vue |  4 ++--
 client/src/components/BatchUploadRecording.vue  |  4 ++--
 client/src/components/UploadRecording.vue       |  4 ++--
 client/src/views/Recordings.vue                 | 11 +++++------
 4 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/client/src/components/BatchRecordingElement.vue b/client/src/components/BatchRecordingElement.vue
index 44b451ce..75379ae8 100644
--- a/client/src/components/BatchRecordingElement.vue
+++ b/client/src/components/BatchRecordingElement.vue
@@ -362,8 +362,8 @@ export default defineComponent({
               multiple
               chips
               closable-chips
-              label="Tag"
-              hint="Set a tag for this batch of recordings"
+              label="Tags"
+              hint="Set one or more tags for this recording"
               :items="tagOptions"
             />
           </v-row>
diff --git a/client/src/components/BatchUploadRecording.vue b/client/src/components/BatchUploadRecording.vue
index f9726f46..c92fe6c4 100644
--- a/client/src/components/BatchUploadRecording.vue
+++ b/client/src/components/BatchUploadRecording.vue
@@ -337,8 +337,8 @@ export default defineComponent({
                     clearable
                     chips
                     closable-chips
-                    label="Tag"
-                    hint="Set a tag for this batch of recordings"
+                    label="Tags"
+                    hint="Set one or more tags for this batch of recordings"
                   />
                 </v-row>
 
diff --git a/client/src/components/UploadRecording.vue b/client/src/components/UploadRecording.vue
index 2c529f15..6c7c9a5d 100644
--- a/client/src/components/UploadRecording.vue
+++ b/client/src/components/UploadRecording.vue
@@ -408,8 +408,8 @@ export default defineComponent({
                 clearable
                 chips
                 closable-chips
-                label="Tag"
-                hint="Give this recording a tag for searching and filtering"
+                label="Tags"
+                hint="Give this recording one or more tags for filtering"
               />
             </v-row>
             <v-row>
diff --git a/client/src/views/Recordings.vue b/client/src/views/Recordings.vue
index 80fb68fb..250f087b 100644
--- a/client/src/views/Recordings.vue
+++ b/client/src/views/Recordings.vue
@@ -19,7 +19,7 @@ import BatchUploadRecording from '@components/BatchUploadRecording.vue';
 import RecordingInfoDisplay from '@components/RecordingInfoDisplay.vue';
 import RecordingAnnotationSummary from '@components/RecordingAnnotationSummary.vue';
 import { FilterFunction, InternalItem } from 'vuetify';
-import { VListItemSubtitle } from 'vuetify/lib/components';
+
 export default defineComponent({
     components: {
         UploadRecording,
@@ -50,7 +50,7 @@ export default defineComponent({
           key:'owner_username',
         },
         {
-          title: 'Tag',
+          title: 'Tags',
           key: 'tag_text',
         },
         {
@@ -65,7 +65,6 @@ export default defineComponent({
           title:'GRTS CellId',
           key:'grts_cell_id',
         },
-
         {
           title: 'Location',
           key:'recording_location'
@@ -98,7 +97,7 @@ export default defineComponent({
           key: 'owner_username',
         },
         {
-          title: 'Tag',
+          title: 'Tags',
           key: 'tag_text',
         },
         {
@@ -351,7 +350,7 @@ export default defineComponent({
             <v-combobox
               v-model="filterTags"
               :items="recordingTags"
-              label="Filter recordings by tag"
+              label="Filter recordings by tags"
               multiple
               chips
               closable-chips
@@ -518,7 +517,7 @@ export default defineComponent({
             <v-combobox
               v-model="sharedFilterTags"
               :items="sharedRecordingTags"
-              label="Filter recordings by tag"
+              label="Filter recordings by tags"
               multiple
               chips
               closable-chips

From 4d82b089df09a96891dea1cff96e9ba5620c1164 Mon Sep 17 00:00:00 2001
From: naglepuff <mike.nagler@kitware.com>
Date: Mon, 1 Dec 2025 15:32:20 -0500
Subject: [PATCH 12/16] Squash migrations

---
 ...3_recordingtag_recording_tags_and_more.py} |  8 +++----
 ...024_remove_recording_tag_recording_tags.py | 22 -------------------
 2 files changed, 3 insertions(+), 27 deletions(-)
 rename bats_ai/core/migrations/{0023_recordingtag_recording_tag_and_more.py => 0023_recordingtag_recording_tags_and_more.py} (84%)
 delete mode 100644 bats_ai/core/migrations/0024_remove_recording_tag_recording_tags.py

diff --git a/bats_ai/core/migrations/0023_recordingtag_recording_tag_and_more.py b/bats_ai/core/migrations/0023_recordingtag_recording_tags_and_more.py
similarity index 84%
rename from bats_ai/core/migrations/0023_recordingtag_recording_tag_and_more.py
rename to bats_ai/core/migrations/0023_recordingtag_recording_tags_and_more.py
index 1dd7d97a..69abb8a4 100644
--- a/bats_ai/core/migrations/0023_recordingtag_recording_tag_and_more.py
+++ b/bats_ai/core/migrations/0023_recordingtag_recording_tags_and_more.py
@@ -1,4 +1,4 @@
-# Generated by Django 4.2.23 on 2025-11-11 16:17
+# Generated by Django 4.2.23 on 2025-12-01 20:32
 
 from django.conf import settings
 from django.db import migrations, models
@@ -33,10 +33,8 @@ class Migration(migrations.Migration):
         ),
         migrations.AddField(
             model_name='recording',
-            name='tag',
-            field=models.ForeignKey(
-                null=True, on_delete=django.db.models.deletion.DO_NOTHING, to='core.recordingtag'
-            ),
+            name='tags',
+            field=models.ManyToManyField(to='core.recordingtag'),
         ),
         migrations.AddConstraint(
             model_name='recordingtag',
diff --git a/bats_ai/core/migrations/0024_remove_recording_tag_recording_tags.py b/bats_ai/core/migrations/0024_remove_recording_tag_recording_tags.py
deleted file mode 100644
index 0fddd03a..00000000
--- a/bats_ai/core/migrations/0024_remove_recording_tag_recording_tags.py
+++ /dev/null
@@ -1,22 +0,0 @@
-# Generated by Django 4.2.23 on 2025-11-25 15:33
-
-from django.db import migrations, models
-
-
-class Migration(migrations.Migration):
-
-    dependencies = [
-        ('core', '0023_recordingtag_recording_tag_and_more'),
-    ]
-
-    operations = [
-        migrations.RemoveField(
-            model_name='recording',
-            name='tag',
-        ),
-        migrations.AddField(
-            model_name='recording',
-            name='tags',
-            field=models.ManyToManyField(to='core.recordingtag'),
-        ),
-    ]

From 8159e920e08973abc28d23474bdc6707d913b924 Mon Sep 17 00:00:00 2001
From: Michael Nagler <mike.nagler@kitware.com>
Date: Mon, 1 Dec 2025 15:33:29 -0500
Subject: [PATCH 13/16] Fix tag assignment in patch recording

Co-authored-by: Bryon Lewis
<61746913+BryonLewis@users.noreply.github.com>
---
 bats_ai/core/views/recording.py | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/bats_ai/core/views/recording.py b/bats_ai/core/views/recording.py
index e798f060..d4b5552f 100644
--- a/bats_ai/core/views/recording.py
+++ b/bats_ai/core/views/recording.py
@@ -206,9 +206,15 @@ def update_recording(request: HttpRequest, id: int, recording_data: RecordingUpl
     if recording_data.unusual_occurrences:
         recording.unusual_occurrences = recording_data.unusual_occurrences
     if recording_data.tags:
+        existing_tags = recording.tags.all()
         for tag in recording_data.tags:
             tag, _ = RecordingTag.objects.get_or_create(user=request.user, text=tag)
-        recording.tags.add(tag)
+            if tag not in existing_tags:
+                recording.tags.add(tag)
+        # Remove any tags that are not in the updated list
+        for existing_tag in existing_tags:
+            if existing_tag.text not in recording_data.tags:
+                recording.tags.remove(existing_tag)
 
     recording.save()
 

From 91c91b506ffb424abc1157cbff038fe7707d6c7c Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Thu, 4 Dec 2025 09:07:48 -0500
Subject: [PATCH 14/16] add client side percentage noise filter

---
 client/src/components/ColorSchemeDialog.vue   |  2 +-
 .../components/TransparencyFilterControl.vue  | 66 ++++++++++++++++++
 client/src/components/geoJS/LayerManager.vue  | 67 +++++++++++++++++--
 client/src/components/geoJS/geoJSUtils.ts     |  6 +-
 client/src/use/useState.ts                    |  3 +
 client/src/views/NABat/NABatSpectrogram.vue   |  5 ++
 client/src/views/Spectrogram.vue              |  5 ++
 7 files changed, 146 insertions(+), 8 deletions(-)
 create mode 100644 client/src/components/TransparencyFilterControl.vue

diff --git a/client/src/components/ColorSchemeDialog.vue b/client/src/components/ColorSchemeDialog.vue
index 874e8512..9a102e6c 100644
--- a/client/src/components/ColorSchemeDialog.vue
+++ b/client/src/components/ColorSchemeDialog.vue
@@ -41,7 +41,7 @@ watch(colorScheme, () => {
         <template #activator="{ props: tooltipProps }">
           <v-icon
             v-bind="{ ...modalProps, ...tooltipProps }"
-            size="25"
+            size="30"
           >
             mdi-palette
           </v-icon>
diff --git a/client/src/components/TransparencyFilterControl.vue b/client/src/components/TransparencyFilterControl.vue
new file mode 100644
index 00000000..db359ad1
--- /dev/null
+++ b/client/src/components/TransparencyFilterControl.vue
@@ -0,0 +1,66 @@
+<script lang="ts">
+import { defineComponent } from "vue";
+import useState from "@use/useState";
+
+export default defineComponent({
+  name: "TransparencyFilterControl",
+  setup() {
+    const { transparencyThreshold } = useState();
+
+    return {
+      transparencyThreshold,
+    };
+  },
+});
+</script>
+
+<template>
+  <v-menu
+    location="bottom"
+    :close-on-content-click="false"
+    open-on-hover
+  >
+    <template #activator="{ props: menuProps }">
+        <v-badge
+        :content="`${transparencyThreshold}%`"
+        :model-value="transparencyThreshold > 0"
+        location="bottom right"
+        color="primary"
+        :offset-x="10"
+        >
+        <v-icon
+            v-bind="menuProps"
+            size="30"
+            class="mx-3"
+            :color="transparencyThreshold > 0 ? 'blue' : ''"
+        >
+            mdi-opacity
+        </v-icon>
+        </v-badge>
+    </template>
+    <v-card
+      min-width="200"
+    >
+      <v-card-title class="text-subtitle-1">
+        Noise Filter {{ transparencyThreshold }}%
+      </v-card-title>
+      <v-card-text>
+        <p>Removes amplitudes below the percentage</p>
+        <v-slider
+          v-model="transparencyThreshold"
+          min="0"
+          max="100"
+          step="1"
+          track-color="grey"
+          color="primary"
+          hide-details
+        >
+          <template #thumb-label="{ modelValue }">
+            {{ modelValue }}%
+          </template>
+        </v-slider>
+      </v-card-text>
+    </v-card>
+  </v-menu>
+</template>
+
diff --git a/client/src/components/geoJS/LayerManager.vue b/client/src/components/geoJS/LayerManager.vue
index 266952a0..9b5fab6b 100644
--- a/client/src/components/geoJS/LayerManager.vue
+++ b/client/src/components/geoJS/LayerManager.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { defineComponent, nextTick, onMounted, onUnmounted, PropType, Ref, ref, watch } from "vue";
+import { defineComponent, nextTick, onMounted, onUnmounted, PropType, Ref, ref, watch, computed } from "vue";
 import * as d3 from "d3";
 import { SpectrogramAnnotation, SpectrogramSequenceAnnotation } from "../../api/api";
 import {
@@ -72,6 +72,7 @@ export default defineComponent({
       drawingBoundingBox,
       boundingBoxError,
       fixedAxes,
+      transparencyThreshold,
     } = useState();
     const selectedAnnotationId: Ref<null | number> = ref(null);
     const hoveredAnnotationId: Ref<null | number> = ref(null);
@@ -726,6 +727,33 @@ export default defineComponent({
     const gValues = ref('');
     const bValues = ref('');
 
+
+    function getTransparencyTableValues() {
+      // transparencyThreshold is expected to be 0-100 (percentage)
+      // Convert to normalized 0-1
+      const t = (transparencyThreshold.value ?? 0) / 100;
+
+      // quick edge cases
+      if (t <= 0) {
+        // threshold 0% → everything visible (alpha=1)
+        return "1";
+      }
+      if (t >= 1) {
+        // threshold 100% → everything transparent (alpha=0)
+        return "0";
+      }
+      // number of discrete steps (higher = sharper but costlier)
+      const numSteps = 50;
+      // which index is the last 'transparent' bucket
+      const thresholdStep = Math.floor(t * (numSteps - 1));
+
+      const values: string[] = [];
+      for (let i = 0; i < numSteps; i++) {
+        // for i <= thresholdStep set transparent (0), else opaque (1)
+        values.push(i <= thresholdStep ? "0" : "1");
+      }
+      return values.join(" ");
+    }
     function updateColorFilter() {
       if (!backgroundColor.value.includes(',')) {
         // convert rgb(0 0 0) to rgb(0, 0, 0)
@@ -775,7 +803,6 @@ export default defineComponent({
 
     watch([backgroundColor, colorScheme], updateColorFilter);
 
-
     watch(fixedAxes, setAxes);
 
     return {
@@ -787,6 +814,7 @@ export default defineComponent({
       rValues,
       gValues,
       bValues,
+      getTransparencyTableValues,
     };
   },
 });
@@ -819,16 +847,43 @@ export default defineComponent({
     height="0"
     style="position: absolute; top: -1px; left: -1px;"
   >
-    <filter id="apply-color-scheme">
-      <!-- convert to grayscale -->
+    <filter id="svg-filters">
       <feColorMatrix
         type="saturate"
         values="0"
         result="grayscale"
       />
 
-      <!-- apply color scheme -->
-      <feComponentTransfer>
+      <feColorMatrix
+        in="grayscale"
+        type="matrix"
+        values="0.2126 0.7152 0.0722 0 0
+                0.2126 0.7152 0.0722 0 0
+                0.2126 0.7152 0.0722 0 0
+                0 0 0 1 0"
+        result="sourceGraphic"
+      />
+      
+      <feColorMatrix
+        in="SourceGraphic"
+        type="luminanceToAlpha"
+        result="luminance"
+      />
+      <feComponentTransfer in="luminance" result="transparency-mask">
+        <feFuncA
+          type="discrete"
+          :tableValues="getTransparencyTableValues()"
+        />
+      </feComponentTransfer>
+
+      <feComposite
+        in="grayscale"
+        in2="transparency-mask"
+        operator="in"
+        result="grayscale-with-transparency"
+      />
+
+      <feComponentTransfer in="grayscale-with-transparency">
         <feFuncR
           type="table"
           :tableValues="rValues"
diff --git a/client/src/components/geoJS/geoJSUtils.ts b/client/src/components/geoJS/geoJSUtils.ts
index 2d7bfe6b..a6b465c8 100644
--- a/client/src/components/geoJS/geoJSUtils.ts
+++ b/client/src/components/geoJS/geoJSUtils.ts
@@ -121,7 +121,11 @@ const useGeoJS = () => {
       });
     }
     clearQuadFeatures();
-    quadFeatureLayer.node().css("filter", "url(#apply-color-scheme)");
+    // Apply combined filter that includes:
+    // 1. Grayscale conversion
+    // 2. Transparency threshold (based on original pixel intensity)
+    // 3. Color scheme application
+    quadFeatureLayer.node().css("filter", "url(#svg-filters)");
     for (let i = 0; i < imageCount; i += 1) {
       quadFeatures.push(quadFeatureLayer.createFeature("quad"));
     }
diff --git a/client/src/use/useState.ts b/client/src/use/useState.ts
index b6250cbf..c8a44063 100644
--- a/client/src/use/useState.ts
+++ b/client/src/use/useState.ts
@@ -79,6 +79,8 @@ const toggleFixedAxes = () => {
   fixedAxes.value = !fixedAxes.value;
 };
 
+const transparencyThreshold = ref(0); // 0-100 percentage
+
 type AnnotationState = "" | "editing" | "creating" | "disabled";
 export default function useState() {
   const setAnnotationState = (state: AnnotationState) => {
@@ -191,5 +193,6 @@ export default function useState() {
     scaledHeight,
     fixedAxes,
     toggleFixedAxes,
+    transparencyThreshold,
   };
 }
diff --git a/client/src/views/NABat/NABatSpectrogram.vue b/client/src/views/NABat/NABatSpectrogram.vue
index 9f0dbf86..7eb5fe35 100644
--- a/client/src/views/NABat/NABatSpectrogram.vue
+++ b/client/src/views/NABat/NABatSpectrogram.vue
@@ -20,6 +20,7 @@ import ThumbnailViewer from "@components/ThumbnailViewer.vue";
 import useState from "@use/useState";
 import ColorPickerMenu from "@components/ColorPickerMenu.vue";
 import ColorSchemeSelect from "@components/ColorSchemeSelect.vue";
+import TransparencyFilterControl from "@/components/TransparencyFilterControl.vue";
 import RecordingInfoDialog from "@components/RecordingInfoDialog.vue";
 import RecordingAnnotations from "@components/RecordingAnnotations.vue";
 import { usePrompt } from '@use/prompt-service';
@@ -34,6 +35,7 @@ export default defineComponent({
     RecordingAnnotations,
     ColorPickerMenu,
     ColorSchemeSelect,
+    TransparencyFilterControl,
   },
   props: {
     id: {
@@ -463,6 +465,9 @@ export default defineComponent({
                 tooltip-text="Spectrogram background color"
               />
             </div>
+            <div class="mt-4 mr-3">
+              <transparency-filter-control />
+            </div>
           </v-row>
         </v-container>
       </v-toolbar>
diff --git a/client/src/views/Spectrogram.vue b/client/src/views/Spectrogram.vue
index abbcc4a2..ff870f24 100644
--- a/client/src/views/Spectrogram.vue
+++ b/client/src/views/Spectrogram.vue
@@ -24,6 +24,7 @@ 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 TransparencyFilterControl from "@/components/TransparencyFilterControl.vue";
 import useState from "@use/useState";
 import RecordingInfoDialog from "@components/RecordingInfoDialog.vue";
 export default defineComponent({
@@ -36,6 +37,7 @@ export default defineComponent({
     RecordingList,
     OtherUserAnnotationsDialog,
     ColorSchemeDialog,
+    TransparencyFilterControl,
   },
   props: {
     id: {
@@ -546,6 +548,9 @@ export default defineComponent({
             <div class="mt-4">
               <color-scheme-dialog />
             </div>
+            <div class="mt-4 mr-3">
+              <transparency-filter-control />
+            </div>
           </v-row>
         </v-container>
       </v-toolbar>

From 16f5f4637cc4ceb16e1a6df180120eff781bcd83 Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Thu, 4 Dec 2025 09:15:31 -0500
Subject: [PATCH 15/16] minor fixes

---
 client/src/components/geoJS/LayerManager.vue | 2 +-
 client/src/views/Recordings.vue              | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/src/components/geoJS/LayerManager.vue b/client/src/components/geoJS/LayerManager.vue
index 9b5fab6b..aa5ec328 100644
--- a/client/src/components/geoJS/LayerManager.vue
+++ b/client/src/components/geoJS/LayerManager.vue
@@ -865,7 +865,7 @@ export default defineComponent({
       />
       
       <feColorMatrix
-        in="SourceGraphic"
+        in="sourceGraphic"
         type="luminanceToAlpha"
         result="luminance"
       />
diff --git a/client/src/views/Recordings.vue b/client/src/views/Recordings.vue
index 250f087b..82432180 100644
--- a/client/src/views/Recordings.vue
+++ b/client/src/views/Recordings.vue
@@ -192,10 +192,10 @@ export default defineComponent({
       return filterTagSet.intersection(itemTagSet).size > 0;
     };
     const sharedTagFilter: FilterFunction = (value: string, search: string, item?: InternalItem<Recording>) => {
-      if (filterTags.value.length === 0) {
+      if (sharedFilterTags.value.length === 0) {
         return true;
       }
-      const filterTagSet = new Set(filterTags.value);
+      const filterTagSet = new Set(sharedFilterTags.value);
       const itemTagSet = new Set(item?.raw.tags_text);
       return filterTagSet.intersection(itemTagSet).size > 0;
     };

From ee2112095550c65fc79784b962909932e9160f3a Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Mon, 8 Dec 2025 08:24:51 -0500
Subject: [PATCH 16/16] increasing steps

---
 client/src/components/geoJS/LayerManager.vue | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/client/src/components/geoJS/LayerManager.vue b/client/src/components/geoJS/LayerManager.vue
index aa5ec328..e41225b1 100644
--- a/client/src/components/geoJS/LayerManager.vue
+++ b/client/src/components/geoJS/LayerManager.vue
@@ -743,7 +743,7 @@ export default defineComponent({
         return "0";
       }
       // number of discrete steps (higher = sharper but costlier)
-      const numSteps = 50;
+      const numSteps = 100;
       // which index is the last 'transparent' bucket
       const thresholdStep = Math.floor(t * (numSteps - 1));
 
@@ -869,9 +869,11 @@ export default defineComponent({
         type="luminanceToAlpha"
         result="luminance"
       />
-      <feComponentTransfer in="luminance" result="transparency-mask">
+      <feComponentTransfer
+        in="luminance"
+        result="transparency-mask">
         <feFuncA
-          type="discrete"
+          type="table"
           :tableValues="getTransparencyTableValues()"
         />
       </feComponentTransfer>