From 506e541872482ff98e043394141d2e02ce7a21b6 Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Fri, 13 Mar 2026 09:26:36 -0400
Subject: [PATCH 1/4] refactor recordings

---
 client/src/components/RecordingTable.vue | 653 +++++++++++++++++++
 client/src/views/Recordings.vue          | 765 ++---------------------
 2 files changed, 703 insertions(+), 715 deletions(-)
 create mode 100644 client/src/components/RecordingTable.vue

diff --git a/client/src/components/RecordingTable.vue b/client/src/components/RecordingTable.vue
new file mode 100644
index 00000000..56fa8e3d
--- /dev/null
+++ b/client/src/components/RecordingTable.vue
@@ -0,0 +1,653 @@
+<script lang="ts">
+import {
+  computed,
+  defineComponent,
+  ref,
+  type Ref,
+  onMounted,
+  watch,
+  type PropType,
+} from 'vue';
+import { getRecordings, type Recording, type FileAnnotation, type RecordingListParams } from '../api/api';
+import MapLocation from '@components/MapLocation.vue';
+import RecordingInfoDisplay from '@components/RecordingInfoDisplay.vue';
+import RecordingAnnotationSummary from '@components/RecordingAnnotationSummary.vue';
+import useState from '@use/useState';
+
+const SERVER_SORT_FIELDS: readonly string[] = ['id', 'name', 'created', 'modified', 'recorded_date', 'owner_username'];
+
+export interface RecordingTableHeader {
+  title: string;
+  key: string;
+  value: string;
+  sortable?: boolean;
+  valueFn?: (item: Recording) => boolean | string | number;
+}
+
+export default defineComponent({
+  name: 'RecordingTable',
+  components: {
+    MapLocation,
+    RecordingInfoDisplay,
+    RecordingAnnotationSummary,
+  },
+  props: {
+    variant: {
+      type: String as PropType<'my' | 'shared'>,
+      required: true,
+    },
+    editRecording: {
+      type: Function as PropType<(item: Recording) => void>,
+      default: undefined,
+    },
+    openDeleteRecordingDialog: {
+      type: Function as PropType<(recording: Recording) => void>,
+      default: undefined,
+    },
+  },
+  emits: [],
+  setup(props, { expose }) {
+    const {
+      configuration,
+      showSubmittedRecordings,
+      currentUser,
+      currentRecordingId,
+      recordingTagList,
+      filterTags,
+      sharedFilterTags,
+      saveFilterTags,
+      recordingList,
+      sharedList,
+    } = useState();
+
+    const sortBy: Ref<{ key: string; order: 'asc' | 'desc' }[]> = ref([{ key: 'created', order: 'desc' }]);
+    const loading = ref(false);
+    const totalCount = ref(0);
+    let intervalRef: number | null = null;
+
+    const filterTagsModel = computed({
+      get: () => (props.variant === 'my' ? filterTags.value : sharedFilterTags.value),
+      set: (v: string[]) => {
+        if (props.variant === 'my') {
+          filterTags.value = v;
+        } else {
+          sharedFilterTags.value = v;
+        }
+      },
+    });
+
+    const items = computed(() => (props.variant === 'my' ? recordingList.value : sharedList.value));
+
+    const recordingTagOptions = computed(() =>
+      recordingTagList.value.filter(Boolean)
+    );
+
+    const defaultColumnVisibilityMy: Record<string, boolean> = {
+      name: true,
+      annotation: true,
+      owner_username: true,
+      tag_text: true,
+      recorded_date: true,
+      public: true,
+      grts_cell_id: true,
+      comments: true,
+      userAnnotations: true,
+      edit: true,
+      submitted: true,
+      submittedLabel: true,
+      userMadeAnnotations: true,
+    };
+
+    const defaultColumnVisibilityShared: Record<string, boolean> = {
+      name: true,
+      annotation: true,
+      owner_username: false,
+      tag_text: true,
+      recorded_date: true,
+      public: false,
+      grts_cell_id: true,
+      comments: true,
+      userAnnotations: true,
+      edit: true,
+      submitted: true,
+      submittedLabel: true,
+      userMadeAnnotations: false,
+    };
+    function getStorageKey(variant: 'my' | 'shared'): string {
+      const user = currentUser.value || 'anonymous';
+      return `recordingTableColumns_${variant}_${user}`;
+    }
+
+    function loadColumnVisibility(variant: 'my' | 'shared'): Record<string, boolean> {
+      const base = variant === 'my' ? defaultColumnVisibilityMy : defaultColumnVisibilityShared;
+      if (typeof window === 'undefined') {
+        return { ...base };
+      }
+      try {
+        const raw = window.localStorage.getItem(getStorageKey(variant));
+        if (!raw) {
+          return { ...base };
+        }
+        const parsed = JSON.parse(raw) as Record<string, boolean>;
+        return { ...base, ...parsed };
+      } catch {
+        return { ...base };
+      }
+    }
+
+    const columnVisibilityMy = ref<Record<string, boolean>>(loadColumnVisibility('my'));
+    const columnVisibilityShared = ref<Record<string, boolean>>(loadColumnVisibility('shared'));
+
+    const baseHeadersMy: RecordingTableHeader[] = [
+      { title: 'Name', key: 'name', value: 'name', sortable: SERVER_SORT_FIELDS.includes('name') },
+      { title: 'Annotation', key: 'annotation', value: 'annotation', sortable: SERVER_SORT_FIELDS.includes('annotation') },
+      { title: 'Owner', key: 'owner_username', value: 'owner_username', sortable: SERVER_SORT_FIELDS.includes('owner_username') },
+      { title: 'Tags', key: 'tag_text', value: 'tag_text', sortable: SERVER_SORT_FIELDS.includes('tag_text') },
+      { title: 'Recorded Date', key: 'recorded_date', value: 'recorded_date', sortable: SERVER_SORT_FIELDS.includes('recorded_date') },
+      { title: 'Public', key: 'public', value: 'public', sortable: SERVER_SORT_FIELDS.includes('public') },
+      { title: 'GRTS CellId', key: 'grts_cell_id', value: 'grts_cell_id', sortable: SERVER_SORT_FIELDS.includes('grts_cell_id') },
+      { title: 'Details', key: 'comments', value: 'comments', sortable: SERVER_SORT_FIELDS.includes('comments') },
+      { title: 'User Pulse Annotations', key: 'userAnnotations', value: 'userAnnotations', sortable: SERVER_SORT_FIELDS.includes('userAnnotations') },
+      { title: 'Edit', key: 'edit', value: 'edit', sortable: false },
+    ];
+
+    const baseHeadersShared: RecordingTableHeader[] = [
+      { title: 'Name', key: 'name', value: 'name', sortable: SERVER_SORT_FIELDS.includes('name') },
+      { title: 'Annotation', key: 'annotation', value: 'annotation', sortable: SERVER_SORT_FIELDS.includes('annotation') },
+      { title: 'Owner', key: 'owner_username', value: 'owner_username', sortable: SERVER_SORT_FIELDS.includes('owner_username') },
+      { title: 'Tags', key: 'tag_text', value: 'tag_text', sortable: SERVER_SORT_FIELDS.includes('tag_text') },
+      { title: 'Recorded Date', key: 'recorded_date', value: 'recorded_date', sortable: SERVER_SORT_FIELDS.includes('recorded_date') },
+      { title: 'Public', key: 'public', value: 'public', sortable: SERVER_SORT_FIELDS.includes('public') },
+      { title: 'GRTS CellId', key: 'grts_cell_id', value: 'grts_cell_id', sortable: SERVER_SORT_FIELDS.includes('grts_cell_id') },
+      { title: 'Details', key: 'comments', value: 'comments', sortable: SERVER_SORT_FIELDS.includes('comments') },
+      { title: 'Annotated by Me', key: 'userMadeAnnotations', value: 'userMadeAnnotations', sortable: SERVER_SORT_FIELDS.includes('userMadeAnnotations') },
+    ];
+
+    const ORDER_MY = ['name', 'tag_text', 'grts_cell_id', 'submitted', 'recorded_date', 'owner_username', 'public', 'edit'];
+    const ORDER_SHARED = ['name', 'tag_text', 'grts_cell_id', 'submitted', 'recorded_date', 'public', 'userMadeAnnotations', 'owner_username'];
+
+    function getActiveColumnVisibility(): Record<string, boolean> {
+      return props.variant === 'my' ? columnVisibilityMy.value : columnVisibilityShared.value;
+    }
+
+    function isColumnVisible(key: string): boolean {
+      if (key === 'name' || key === 'edit') {
+        return true;
+      }
+      const visibility = getActiveColumnVisibility();
+      if (key in visibility) return visibility[key];
+      return true;
+    }
+
+    function saveColumnVisibility(variant: 'my' | 'shared') {
+      if (typeof window === 'undefined') {
+        return;
+      }
+      const key = getStorageKey(variant);
+      const visibility = variant === 'my' ? columnVisibilityMy.value : columnVisibilityShared.value;
+      try {
+        window.localStorage.setItem(key, JSON.stringify(visibility));
+      } catch {
+        // ignore storage errors
+      }
+    }
+
+    function setColumnVisible(key: string, value: boolean) {
+      if (key === 'name' || key === 'edit') {
+        return;
+      }
+      const targetRef = props.variant === 'my' ? columnVisibilityMy : columnVisibilityShared;
+      targetRef.value = { ...targetRef.value, [key]: value };
+      saveColumnVisibility(props.variant);
+    }
+
+    const rawHeaders = computed((): RecordingTableHeader[] => {
+      const base = props.variant === 'my' ? baseHeadersMy : baseHeadersShared;
+      let h = [...base];
+      if (configuration.value.mark_annotations_completed_enabled) {
+        h = h.filter((x) => !['comments', 'details', 'annotation', 'userAnnotations'].includes(x.key));
+        h.push({ title: 'Submission Status', key: 'submitted', value: 'submitted' });
+        if (showSubmittedRecordings.value) {
+          h.push({ title: 'My Submitted Label', key: 'submittedLabel', value: 'submittedLabel' });
+        }
+      }
+      const order = props.variant === 'my' ? ORDER_MY : ORDER_SHARED;
+      h.sort((a, b) => {
+        const ia = order.indexOf(a.key);
+        const ib = order.indexOf(b.key);
+        if (ia === -1 && ib === -1) return 0;
+        if (ia === -1) return 1;
+        if (ib === -1) return -1;
+        return ia - ib;
+      });
+      return h;
+    });
+
+    const headers = computed((): RecordingTableHeader[] => rawHeaders.value.filter((header) => isColumnVisible(header.key)));
+
+    function buildParams(options: { page: number; itemsPerPage: number; sortBy?: { key: string; order: string }[] }): RecordingListParams {
+      const sortByFirst = options.sortBy?.[0];
+      const sortKey = (sortByFirst?.key && (SERVER_SORT_FIELDS as readonly string[]).includes(sortByFirst.key))
+        ? sortByFirst.key
+        : 'created';
+      const sort_direction = sortByFirst?.order === 'asc' ? 'asc' : 'desc';
+      const tags = props.variant === 'my' ? filterTags.value : sharedFilterTags.value;
+      const params: RecordingListParams = {
+        page: options.page,
+        limit: options.itemsPerPage,
+        sort_by: sortKey as RecordingListParams['sort_by'],
+        sort_direction,
+        tags: tags.length ? tags : undefined,
+        exclude_submitted: configuration.value.mark_annotations_completed_enabled && !showSubmittedRecordings.value ? true : undefined,
+      };
+      if (props.variant === 'shared') {
+        params.public = true;
+      }
+      return params;
+    }
+
+    const lastOptions = ref<{ page: number; itemsPerPage: number; sortBy?: { key: string; order: string }[] }>({ page: 1, itemsPerPage: 20 });
+
+    async function fetchRecordings(options: { page: number; itemsPerPage: number; sortBy?: { key: string; order: string }[] }) {
+      const opts = { ...options, sortBy: options.sortBy ?? sortBy.value };
+      lastOptions.value = opts;
+      loading.value = true;
+      try {
+        const res = await getRecordings(props.variant === 'shared', buildParams(opts));
+        const list = res.data.items;
+        const count = res.data.count;
+        if (props.variant === 'my') {
+          recordingList.value = list;
+          let missingSpectro = false;
+          for (let i = 0; i < list.length; i += 1) {
+            if (!list[i].hasSpectrogram) {
+              missingSpectro = true;
+              break;
+            }
+          }
+          if (missingSpectro && intervalRef === null) {
+            intervalRef = setInterval(() => fetchRecordings(lastOptions.value), 5000);
+          } else if (!missingSpectro && intervalRef !== null) {
+            clearInterval(intervalRef);
+            intervalRef = null;
+          }
+        } else {
+          sharedList.value = list;
+        }
+        totalCount.value = count;
+      } finally {
+        loading.value = false;
+      }
+    }
+
+    function getItemLocation(item: Recording): { x: number; y: number } | undefined {
+      if (configuration.value.mark_annotations_completed_enabled) {
+        return undefined;
+      }
+      if (item.recording_location) {
+        return {
+          x: item.recording_location.coordinates[0],
+          y: item.recording_location.coordinates[1],
+        };
+      }
+      return undefined;
+    }
+
+    function getRowProps(data: { item: Recording }) {
+      return { class: { 'current-recording-row': data.item?.id === currentRecordingId.value } };
+    }
+
+    function currentUserSubmissionStatus(recording: Recording): number {
+      const userAnnotations = recording.fileAnnotations.filter((a: FileAnnotation) => (
+        a.owner === currentUser.value && a.model === 'User Defined'
+      ));
+      if (userAnnotations.find((a: FileAnnotation) => a.submitted)) return 1;
+      return userAnnotations.length ? 0 : -1;
+    }
+
+    function currentUserSubmissionLabel(recording: Recording): string {
+      const ann = recording.fileAnnotations.find((a: FileAnnotation) => (
+        a.owner === currentUser.value && a.submitted
+      ));
+      return ann?.species?.[0]?.species_code ?? '';
+    }
+
+    function addTagToFilter(tag: string) {
+      const arr = props.variant === 'my' ? filterTags : sharedFilterTags;
+      if (!arr.value.includes(tag)) {
+        arr.value = [...arr.value, tag];
+      }
+    }
+
+    type OptionsPayload = { page: number; itemsPerPage: number; sortBy?: { key: string; order: string }[] };
+    function onUpdateOptions(options: OptionsPayload) {
+      fetchRecordings(options);
+    }
+
+    function onUpdateSortBy(e: { key: string; order: 'asc' | 'desc' }[]) {
+      sortBy.value = e;
+    }
+
+    const tableClass = computed(() => (props.variant === 'my' ? 'my-recordings' : 'shared-recordings'));
+
+    const listStyles = computed(() => {
+      const markEnabled = configuration.value.mark_annotations_completed_enabled;
+      let sectionHeight = markEnabled ? '35vh' : '40vh';
+      if (props.variant === 'shared' && !configuration.value.is_admin && !configuration.value.non_admin_upload_enabled) {
+        sectionHeight = '75vh';
+      }
+      return { height: sectionHeight, 'max-height': sectionHeight };
+    });
+
+    const showTotalCount = computed(() => (
+      totalCount.value > 0
+      && configuration.value.mark_annotations_completed_enabled
+      && (props.variant === 'shared' || configuration.value.is_admin || configuration.value.non_admin_upload_enabled)
+    ));
+
+    watch(filterTagsModel, () => {
+      fetchRecordings(lastOptions.value);
+      saveFilterTags();
+    }, { deep: true });
+
+    watch(showSubmittedRecordings, () => {
+      fetchRecordings(lastOptions.value);
+    });
+
+    onMounted(() => {
+      fetchRecordings({ page: 1, itemsPerPage: 20 });
+    });
+
+    expose({ refetch: () => fetchRecordings(lastOptions.value) });
+
+    return {
+      sortBy,
+      headers,
+      items,
+      totalCount,
+      loading,
+      filterTagsModel,
+      recordingTagOptions,
+      configuration,
+      showSubmittedRecordings,
+      currentRecordingId,
+      getItemLocation,
+      getRowProps,
+      currentUserSubmissionStatus,
+      currentUserSubmissionLabel,
+      addTagToFilter,
+      onUpdateOptions,
+      onUpdateSortBy,
+      tableClass,
+      listStyles,
+      showTotalCount,
+      rawHeaders,
+      isColumnVisible,
+      setColumnVisible,
+    };
+  },
+});
+</script>
+
+<template>
+  <v-data-table-server
+    v-model:sort-by="sortBy"
+    :headers="headers"
+    :items="items"
+    :items-length="totalCount"
+    :loading="loading"
+    :row-props="getRowProps"
+    items-per-page="20"
+    :items-per-page-options="[{ value: 10, title: '10' }, { value: 20, title: '20' }, { value: 50, title: '50' }, { value: 100, title: '100' }]"
+    density="compact"
+    class="elevation-1"
+    :class="tableClass"
+    :style="listStyles"
+    @update:options="onUpdateOptions"
+    @update:sort-by="onUpdateSortBy"
+  >
+    <template #top>
+      <div
+        class="d-flex align-center"
+        max-height="100px"
+      >
+        <v-autocomplete
+          v-model="filterTagsModel"
+          :items="recordingTagOptions"
+          label="Filter recordings by tags"
+          autocomplete="off"
+          multiple
+          chips
+          closable-chips
+          clearable
+          class="flex-grow-1"
+        />
+        <v-menu>
+          <template #activator="{ props }">
+            <v-btn
+              v-bind="props"
+              icon
+              class="ml-2"
+              variant="text"
+            >
+              <v-icon>mdi-cog</v-icon>
+            </v-btn>
+          </template>
+          <v-list>
+            <v-list-subheader>Column visibility</v-list-subheader>
+            <v-list-item
+              v-for="header in rawHeaders"
+              :key="header.key"
+              @click.stop
+            >
+              <v-checkbox
+                :model-value="isColumnVisible(header.key)"
+                :label="header.title"
+                :disabled="header.key === 'name' || header.key === 'edit'"
+                hide-details
+                density="compact"
+                @update:model-value="(val) => setColumnVisible(header.key, !!val)"
+              />
+            </v-list-item>
+          </v-list>
+        </v-menu>
+      </div>
+    </template>
+
+    <template
+      v-if="variant === 'my' && editRecording && openDeleteRecordingDialog"
+      #item.edit="{ item }"
+    >
+      <v-icon @click="editRecording(item)">
+        mdi-pencil
+      </v-icon>
+      <v-icon
+        color="error"
+        @click="openDeleteRecordingDialog(item)"
+      >
+        mdi-delete
+      </v-icon>
+    </template>
+
+    <template #item.name="{ item }">
+      <router-link
+        v-if="item.hasSpectrogram || variant === 'shared'"
+        :to="`/recording/${item.id.toString()}/spectrogram`"
+      >
+        {{ item.name }}
+      </router-link>
+      <div v-else>
+        {{ item.name }}
+        <v-tooltip bottom>
+          <template #activator="{ props: subProps }">
+            <span v-bind="subProps">
+              <v-icon color="warning">mdi-alert</v-icon>
+              <v-icon>mdi-sync mdi-spin</v-icon>
+            </span>
+          </template>
+          <span>Waiting for spectrogram to be computed</span>
+        </v-tooltip>
+      </div>
+    </template>
+
+    <template #item.annotation="{ item }">
+      <RecordingAnnotationSummary :file-annotations="item.fileAnnotations" />
+    </template>
+
+    <template #item.tag_text="{ item }">
+      <span v-if="item.tags_text">
+        <v-tooltip text="Add to filter">
+          <template #activator="{ props: tooltipProps }">
+            <v-chip
+              v-for="tag in item.tags_text"
+              :key="tag"
+              size="small"
+              class="tag-filter-chip"
+              v-bind="tooltipProps"
+              @click.stop="addTagToFilter(tag)"
+            >
+              {{ tag }}
+            </v-chip>
+          </template>
+        </v-tooltip>
+      </span>
+    </template>
+
+    <template #item.recorded_date="{ item }">
+      {{ item.recorded_date }} {{ item.recorded_time }}
+    </template>
+
+    <template #item.grts_cell_id="{ item }">
+      <span class="d-flex align-center gap-1">
+        <div>{{ item.grts_cell_id ?? '—' }}</div>
+        <v-menu
+          v-if="item.recording_location || (configuration.mark_annotations_completed_enabled && item.grts_cell_id)"
+          open-on-hover
+          :close-on-content-click="false"
+        >
+          <template #activator="{ props }">
+            <v-icon 
+              v-bind="props" 
+              color="primary" 
+              class="ml-2"
+              size="x-large"
+            >
+              mdi-map
+            </v-icon>
+          </template>
+          <v-card>
+            <map-location
+              :editor="false"
+              :size="{ width: 400, height: 400 }"
+              :location="getItemLocation(item)"
+              :grts-cell-id="configuration.mark_annotations_completed_enabled ? item.grts_cell_id || undefined : undefined"
+            />
+          </v-card>
+        </v-menu>
+      </span>
+    </template>
+
+    <template #item.comments="{ item }">
+      <v-menu
+        v-if="item.comments !== undefined"
+        open-on-click
+        :close-on-content-click="false"
+      >
+        <template #activator="{ props }">
+          <v-icon v-bind="props">
+            mdi-information-outline
+          </v-icon>
+        </template>
+        <recording-info-display
+          :recording-info="item"
+          :minimal-metadata="configuration.mark_annotations_completed_enabled && variant === 'my'"
+          disable-button
+        />
+      </v-menu>
+    </template>
+
+    <template #item.public="{ item }">
+      <v-icon
+        v-if="item.public"
+        color="success"
+      >
+        mdi-check
+      </v-icon>
+      <v-icon
+        v-else
+        color="error"
+      >
+        mdi-close
+      </v-icon>
+    </template>
+
+    <template
+      v-if="variant === 'shared'"
+      #item.userMadeAnnotations="{ item }"
+    >
+      <v-icon
+        v-if="item.userMadeAnnotations"
+        color="success"
+      >
+        mdi-check
+      </v-icon>
+      <v-icon
+        v-else
+        color="error"
+      >
+        mdi-close
+      </v-icon>
+    </template>
+
+    <template
+      v-if="configuration.mark_annotations_completed_enabled"
+      #item.submitted="{ item }"
+    >
+      <v-tooltip v-if="currentUserSubmissionStatus(item) === 1">
+        <template #activator="{ props }">
+          <v-icon
+            v-bind="props"
+            color="success"
+          >
+            mdi-check
+          </v-icon>
+        </template>
+        You have submitted an annotation for this recording
+      </v-tooltip>
+      <v-tooltip v-else-if="currentUserSubmissionStatus(item) === 0">
+        <template #activator="{ props }">
+          <v-icon
+            v-bind="props"
+            color="warning"
+          >
+            mdi-circle-outline
+          </v-icon>
+        </template>
+        You have created an annotation, but it has not been submitted
+      </v-tooltip>
+      <v-tooltip v-else>
+        <template #activator="{ props }">
+          <v-icon
+            v-bind="props"
+            color="error"
+          >
+            mdi-close
+          </v-icon>
+        </template>
+        You have not created an annotation for this recording
+      </v-tooltip>
+    </template>
+    <template
+      v-if="configuration.mark_annotations_completed_enabled && showSubmittedRecordings"
+      #item.submittedLabel="{ item }"
+    >
+      {{ currentUserSubmissionLabel(item) }}
+    </template>
+  </v-data-table-server>
+</template>
+
+<style scoped>
+.tag-filter-chip {
+  cursor: pointer;
+}
+</style>
diff --git a/client/src/views/Recordings.vue b/client/src/views/Recordings.vue
index aa499c41..3007cc48 100644
--- a/client/src/views/Recordings.vue
+++ b/client/src/views/Recordings.vue
@@ -1,290 +1,36 @@
 <script lang="ts">
-import {
-  computed,
-  defineComponent,
-  ref,
-  Ref,
-  onMounted,
-  watch,
-} from 'vue';
-import {
-  deleteRecording,
-  getRecordings,
-  Recording,
-  FileAnnotation,
-  getRecordingTags,
-  type RecordingListParams,
-} from '../api/api';
+import { defineComponent, ref, Ref, onMounted } from 'vue';
+import { deleteRecording, Recording, getRecordingTags } from '../api/api';
 import UploadRecording, { EditingRecording } from '@components/UploadRecording.vue';
-import MapLocation from '@components/MapLocation.vue';
 import useState from '@use/useState';
 import BatchUploadRecording from '@components/BatchUploadRecording.vue';
-import RecordingInfoDisplay from '@components/RecordingInfoDisplay.vue';
-import RecordingAnnotationSummary from '@components/RecordingAnnotationSummary.vue';
-
-/* Sort fields supported by the recordings list API (RecordingListQuerySchema.sort_by) */
-const SERVER_SORT_FIELDS: readonly string[] = ['id', 'name', 'created', 'modified', 'recorded_date', 'owner_username'];
+import RecordingTable from '@components/RecordingTable.vue';
 
 export default defineComponent({
   components: {
     UploadRecording,
-    MapLocation,
     BatchUploadRecording,
-    RecordingInfoDisplay,
-    RecordingAnnotationSummary,
+    RecordingTable,
   },
   setup() {
-    const {
-      sharedList,
-      recordingList,
-      recordingTagList,
-      currentUser,
-      currentRecordingId,
-      configuration,
-      showSubmittedRecordings,
-      myRecordingsDisplay,
-      sharedRecordingsDisplay,
-      filterTags,
-      sharedFilterTags,
-      saveFilterTags,
-    } = useState();
+    const { configuration, showSubmittedRecordings, recordingTagList } = useState();
     const editingRecording: Ref<EditingRecording | null> = ref(null);
-    let intervalRef: number | null = null;
-
-    const totalMyCount = ref(0);
-    const totalSharedCount = ref(0);
-    const lastMyOptions = ref<{ page: number; itemsPerPage: number; sortBy?: { key: string; order: string }[] }>({ page: 1, itemsPerPage: 20 });
-    const lastSharedOptions = ref<{ page: number; itemsPerPage: number; sortBy?: { key: string; order: string }[] }>({ page: 1, itemsPerPage: 20 });
-
     const uploadDialog = ref(false);
     const batchUploadDialog = ref(false);
-    const sortByMy = ref<{ key: string; order: 'asc' | 'desc' }[]>([{ key: 'created', order: 'desc' }]);
-    const sortByShared = ref<{ key: string; order: 'asc' | 'desc' }[]>([{ key: 'created', order: 'desc' }]);
-
-    const myRecordingsLoading = ref(false);
-    const sharedRecordingsLoading = ref(false);
-
-    const headers: Ref<{
-      title: string;
-      key: string;
-      value: string;
-      sortable?: boolean;
-      valueFn?: (item: Recording) => boolean | string | number;
-    }[]> = ref([
-        { title: 'Name', key: 'name', value: 'name', sortable: SERVER_SORT_FIELDS.includes('name') },
-        { title: 'Annotation', key: 'annotation', value: 'annotation', sortable: SERVER_SORT_FIELDS.includes('annotation') },
-        { title: 'Owner', key: 'owner_username', value: 'owner_username', sortable: SERVER_SORT_FIELDS.includes('owner_username') },
-        { title: 'Tags', key: 'tag_text', value: 'tag_text', sortable: SERVER_SORT_FIELDS.includes('tag_text') },
-        { title: 'Recorded Date', key: 'recorded_date', value: 'recorded_date', sortable: SERVER_SORT_FIELDS.includes('recorded_date') },
-        { title: 'Public', key: 'public', value: 'public', sortable: SERVER_SORT_FIELDS.includes('public') },
-        { title: 'GRTS CellId', key: 'grts_cell_id', value: 'grts_cell_id', sortable: SERVER_SORT_FIELDS.includes('grts_cell_id') },
-        { title: 'Location', key: 'recording_location', value: 'recording_location', sortable: SERVER_SORT_FIELDS.includes('recording_location') },
-        { title: 'Details', key: 'comments', value: 'comments', sortable: SERVER_SORT_FIELDS.includes('comments') },
-        { title: 'User Pulse Annotations', key: 'userAnnotations', value: 'userAnnotations', sortable: SERVER_SORT_FIELDS.includes('userAnnotations') },
-        { title: 'Edit', key: 'edit', value: 'edit', sortable: false },
-    ]);
-
-    const sharedHeaders = ref([
-        { title: 'Name', key: 'name', value: 'name', sortable: SERVER_SORT_FIELDS.includes('name') },
-        { title: 'Annotation', key: 'annotation', value: 'annotation', sortable: SERVER_SORT_FIELDS.includes('annotation') },
-        { title: 'Owner', key: 'owner_username', value: 'owner_username', sortable: SERVER_SORT_FIELDS.includes('owner_username') },
-        { title: 'Tags', key: 'tag_text', value: 'tag_text', sortable: SERVER_SORT_FIELDS.includes('tag_text') },
-        { title: 'Recorded Date', key: 'recorded_date', value: 'recorded_date', sortable: SERVER_SORT_FIELDS.includes('recorded_date') },
-        { title: 'Public', key: 'public', value: 'public', sortable: SERVER_SORT_FIELDS.includes('public') },
-        { title: 'GRTS CellId', key: 'grts_cell_id', value: 'grts_cell_id', sortable: SERVER_SORT_FIELDS.includes('grts_cell_id') },
-        { title: 'Location', key: 'recording_location', value: 'recording_location' },
-        { title: 'Details', key: 'comments', value: 'comments', sortable: SERVER_SORT_FIELDS.includes('comments') },
-        { title: 'Annotated by Me', key: 'userMadeAnnotations', value: 'userMadeAnnotations', sortable: SERVER_SORT_FIELDS.includes('userMadeAnnotations') },
-    ]);
-
-    function buildMyParams(options: { page: number; itemsPerPage: number; sortBy?: { key: string; order: string }[] }): RecordingListParams {
-      const sortByFirst = options.sortBy?.[0];
-      const sortBy = (sortByFirst?.key && (SERVER_SORT_FIELDS as readonly string[]).includes(sortByFirst.key))
-        ? sortByFirst.key
-        : 'created';
-      const sort_direction = sortByFirst?.order === 'asc' ? 'asc' : 'desc';
-      return {
-        page: options.page,
-        limit: options.itemsPerPage,
-        sort_by: sortBy as RecordingListParams['sort_by'],
-        sort_direction,
-        tags: filterTags.value.length ? filterTags.value : undefined,
-        exclude_submitted: configuration.value.mark_annotations_completed_enabled && !showSubmittedRecordings.value ? true : undefined,
-      };
-    }
-
-    function buildSharedParams(options: { page: number; itemsPerPage: number; sortBy?: { key: string; order: string }[] }): RecordingListParams {
-      const sortByFirst = options.sortBy?.[0];
-      const sortBy = (sortByFirst?.key && (SERVER_SORT_FIELDS as readonly string[]).includes(sortByFirst.key))
-        ? sortByFirst.key
-        : 'created';
-      const sort_direction = sortByFirst?.order === 'asc' ? 'asc' : 'desc';
-      return {
-        public: true,
-        page: options.page,
-        limit: options.itemsPerPage,
-        sort_by: sortBy as RecordingListParams['sort_by'],
-        sort_direction,
-        tags: sharedFilterTags.value.length ? sharedFilterTags.value : undefined,
-        exclude_submitted: configuration.value.mark_annotations_completed_enabled && !showSubmittedRecordings.value ? true : undefined,
-      };
-    }
-
-    const fetchMyRecordings = async (options: { page: number; itemsPerPage: number; sortBy?: { key: string; order: string }[] }) => {
-      const opts = { ...options, sortBy: options.sortBy ?? sortByMy.value };
-      lastMyOptions.value = opts;
-      myRecordingsLoading.value = true;
-      try {
-        const res = await getRecordings(false, buildMyParams(opts));
-        recordingList.value = res.data.items;
-        totalMyCount.value = res.data.count;
-        let missingSpectro = false;
-        for (let i = 0; i < recordingList.value.length; i += 1) {
-          if (!recordingList.value[i].hasSpectrogram) {
-            missingSpectro = true;
-            break;
-          }
-        }
-        if (missingSpectro && intervalRef === null) {
-          intervalRef = setInterval(() => fetchMyRecordings(lastMyOptions.value), 5000);
-        } else if (!missingSpectro && intervalRef !== null) {
-          clearInterval(intervalRef);
-          intervalRef = null;
-        }
-      } finally {
-        myRecordingsLoading.value = false;
-      }
-    };
-
-    const fetchSharedRecordings = async (options: { page: number; itemsPerPage: number; sortBy?: { key: string; order: string }[] }) => {
-      const opts = { ...options, sortBy: options.sortBy ?? sortByShared.value };
-      lastSharedOptions.value = opts;
-      sharedRecordingsLoading.value = true;
-      try {
-        const res = await getRecordings(true, buildSharedParams(opts));
-        sharedList.value = res.data.items;
-        totalSharedCount.value = res.data.count;
-      } finally {
-        sharedRecordingsLoading.value = false;
-      }
-    };
-
-    watch(showSubmittedRecordings, () => {
-      fetchMyRecordings(lastMyOptions.value);
-      fetchSharedRecordings(lastSharedOptions.value);
-      if (!showSubmittedRecordings.value) {
-        sharedHeaders.value = sharedHeaders.value.filter((header) => header.key !== 'submittedLabel');
-        headers.value = headers.value.filter((header) => header.key !== 'submittedLabel');
-      } else {
-        const submittedLabelHeader = { title: 'My Submitted Label', key: 'submittedLabel', value: 'submittedLabel' };
-        sharedHeaders.value.push(submittedLabelHeader);
-        headers.value.push(submittedLabelHeader);
-      }
-    });
+    const deleteDialogOpen = ref(false);
+    const recordingToDelete: Ref<Recording | null> = ref(null);
+    const myRecordingsTableRef = ref<{ refetch?: () => void } | null>(null);
 
-    const fetchRecordingTags = async () => {
+    async function fetchRecordingTags() {
       const tags = await getRecordingTags();
       recordingTagList.value = tags.data;
-    };
-
-    const recordingTagOptions = computed(() =>
-      recordingTagList.value.map((t) => t.text).filter(Boolean)
-    );
-
-    function currentUserSubmissionStatus(recording: Recording) {
-      const userAnnotations = recording.fileAnnotations.filter((annotation: FileAnnotation) => (
-        annotation.owner === currentUser.value && annotation.model === 'User Defined'
-      ));
-      if (userAnnotations.find((annotation: FileAnnotation) => annotation.submitted)) {
-        return 1;
-      }
-      return userAnnotations.length ? 0 : -1;
     }
 
-
-    function currentUserSubmissionLabel(recording: Recording) {
-      const userSubmittedAnnotation = recording.fileAnnotations.find((annotation: FileAnnotation) => (
-        annotation.owner === currentUser.value && annotation.submitted
-      ));
-      return userSubmittedAnnotation?.species[0]?.species_code || '';
-    }
-
-    function addSubmittedColumns() {
-      if (configuration.value.mark_annotations_completed_enabled) {
-        const submittedHeader = { title: 'Submission Status', key: 'submitted', value: 'submitted' };
-        const myLabelHeader = { title: 'My Submitted Label', key: 'submittedLabel', value: 'submittedLabel' };
-        headers.value.push(submittedHeader);
-        sharedHeaders.value.push(submittedHeader);
-        if (showSubmittedRecordings.value) {
-          headers.value.push(myLabelHeader);
-          sharedHeaders.value.push(myLabelHeader);
-        }
-      }
-    }
-
-    function hideDetailedMetadataColumns() {
-      if (!configuration.value.mark_annotations_completed_enabled) return;
-      const filterDetailedMetadataFunction = (val: { key: string }) => (
-        !['comments', 'details', 'annotation', 'userAnnotations'].includes(val.key)
-      );
-      headers.value = headers.value.filter(filterDetailedMetadataFunction);
-      sharedHeaders.value = sharedHeaders.value.filter(filterDetailedMetadataFunction);
-    }
-
-    const myRecordingListStyles = computed(() => {
-      const sectionHeight = configuration.value.mark_annotations_completed_enabled ? '35vh' : '40vh';
-      return {
-        'height': sectionHeight,
-        'max-height': sectionHeight,
-      };
-    });
-
-    const sharedRecordingListStyles = computed(() => {
-      let sectionHeight: string;
-      if (configuration.value.mark_annotations_completed_enabled) {
-        sectionHeight = '35vh';
-      } else {
-        sectionHeight = '40vh';
-      }
-      if (!configuration.value.is_admin && !configuration.value.non_admin_upload_enabled) {
-        sectionHeight = '75vh';
-      }
-      return {
-        'height': sectionHeight,
-        'max-height': sectionHeight,
-      };
-    });
-
-    onMounted(async () => {
-      await fetchRecordingTags();
-      addSubmittedColumns();
-      hideDetailedMetadataColumns();
-      await fetchMyRecordings({ page: 1, itemsPerPage: 20 });
-      await fetchSharedRecordings({ page: 1, itemsPerPage: 20 });
-    });
-
-    watch(
-      filterTags,
-      () => {
-        fetchMyRecordings(lastMyOptions.value);
-        saveFilterTags();
-      },
-      { deep: true }
-    );
-    watch(
-      sharedFilterTags,
-      () => {
-        fetchSharedRecordings(lastSharedOptions.value);
-        saveFilterTags();
-      },
-      { deep: true }
-    );
-
     const uploadDone = () => {
-        uploadDialog.value = false;
-        batchUploadDialog.value = false;
-        editingRecording.value = null;
-        fetchMyRecordings(lastMyOptions.value);
+      uploadDialog.value = false;
+      batchUploadDialog.value = false;
+      editingRecording.value = null;
+      myRecordingsTableRef.value?.refetch?.();
     };
 
     const editRecording = (item: Recording) => {
@@ -303,80 +49,47 @@ export default defineComponent({
         unusualOccurrences: item.unusual_occurrences,
       };
       if (item.recording_location) {
-        const [ lon, lat ] = item.recording_location.coordinates;
-        editingRecording.value['location'] = {lat, lon};
+        const [lon, lat] = item.recording_location.coordinates;
+        editingRecording.value['location'] = { lat, lon };
       }
       if (item.tags_text) {
         editingRecording.value.tags = item.tags_text.filter((tag: string) => !!tag);
       }
       uploadDialog.value = true;
     };
-    const deleteDialogOpen = ref(false);
-    const recordingToDelete: Ref<Recording | null> = ref(null);
+
     const openDeleteRecordingDialog = (recording: Recording) => {
       deleteDialogOpen.value = true;
       recordingToDelete.value = recording;
     };
+
     const deleteOneRecording = async () => {
       if (deleteDialogOpen.value && recordingToDelete.value) {
         deleteDialogOpen.value = false;
         await deleteRecording(recordingToDelete.value.id);
         recordingToDelete.value = null;
-        fetchMyRecordings(lastMyOptions.value);
+        myRecordingsTableRef.value?.refetch?.();
       }
     };
 
-    function getItemLocation(item: Recording) {
-      if (configuration.value.mark_annotations_completed_enabled) {
-        return undefined;
-      } else if (item.recording_location) {
-        return {
-          x: item.recording_location.coordinates[0],
-          y: item.recording_location.coordinates[1],
-        };
-      }
-      return undefined;
-    }
-
-    const getRowProps = (data: { item: Recording }) => ({ class: { 'current-recording-row': data.item?.id === currentRecordingId.value } });
+    onMounted(() => {
+      fetchRecordingTags();
+    });
 
     return {
-        headers,
-        sharedHeaders,
-        recordingList,
-        sharedList,
-        totalMyCount,
-        totalSharedCount,
-        uploadDialog,
-        batchUploadDialog,
-        filterTags,
-        sharedFilterTags,
-        recordingTagOptions,
-        uploadDone,
-        editRecording,
-        deleteOneRecording,
-        deleteDialogOpen,
-        openDeleteRecordingDialog,
-        recordingToDelete,
-        editingRecording,
-        myRecordingsLoading,
-        sharedRecordingsLoading,
-        currentUserSubmissionLabel,
-        currentUserSubmissionStatus,
-        configuration,
-        myRecordingListStyles,
-        sharedRecordingListStyles,
-        showSubmittedRecordings,
-        myRecordingsDisplay,
-        sharedRecordingsDisplay,
-        fetchMyRecordings,
-        fetchSharedRecordings,
-        sortByMy,
-        sortByShared,
-        getItemLocation,
-        currentRecordingId,
-        getRowProps,
-      };
+      configuration,
+      showSubmittedRecordings,
+      uploadDialog,
+      batchUploadDialog,
+      deleteDialogOpen,
+      recordingToDelete,
+      editingRecording,
+      myRecordingsTableRef,
+      uploadDone,
+      editRecording,
+      openDeleteRecordingDialog,
+      deleteOneRecording,
+    };
   },
 });
 </script>
@@ -406,13 +119,11 @@ export default defineComponent({
               </v-btn>
             </template>
             <v-list>
-              <v-list-item @click="uploadDialog=true">
+              <v-list-item @click="uploadDialog = true">
                 <v-list-item-title>Upload Recording</v-list-item-title>
               </v-list-item>
-              <v-list-item @click="batchUploadDialog=true">
-                <v-list-item-title>
-                  Batch Upload
-                </v-list-item-title>
+              <v-list-item @click="batchUploadDialog = true">
+                <v-list-item-title>Batch Upload</v-list-item-title>
               </v-list-item>
             </v-list>
           </v-menu>
@@ -445,205 +156,13 @@ export default defineComponent({
           </v-card-actions>
         </v-card>
       </v-dialog>
-      <v-data-table-server
+      <recording-table
         v-if="configuration.is_admin || configuration.non_admin_upload_enabled"
-        v-model:sort-by="sortByMy"
-        :headers="headers"
-        :items="recordingList"
-        :items-length="totalMyCount"
-        :loading="myRecordingsLoading"
-        :row-props="getRowProps"
-        items-per-page="20"
-        :items-per-page-options="[{ value: 10, title: '10' }, { value: 20, title: '20' }, { value: 50, title: '50' }, { value: 100, title: '100' }]"
-        density="compact"
-        class="elevation-1 my-recordings"
-        :style="myRecordingListStyles"
-        @update:options="fetchMyRecordings"
-      >
-        <template #top>
-          <div max-height="100px">
-            <v-combobox
-              v-model="filterTags"
-              :items="recordingTagOptions"
-              label="Filter recordings by tags"
-              multiple
-              chips
-              closable-chips
-              clearable
-            />
-          </div>
-        </template>
-        <template #item.edit="{ item }">
-          <v-icon @click="editRecording(item)">
-            mdi-pencil
-          </v-icon>
-          <v-icon
-            color="error"
-            @click="openDeleteRecordingDialog(item)"
-          >
-            mdi-delete
-          </v-icon>
-        </template>
-
-        <template #item.name="{ item }">
-          <router-link
-            v-if="item.hasSpectrogram"
-            :to="`/recording/${item.id.toString()}/spectrogram`"
-          >
-            {{ item.name }}
-          </router-link>
-          <div v-else>
-            {{ item.name }}
-            <v-tooltip bottom>
-              <template #activator="{ props: subProps }">
-                <span v-bind="subProps">
-                  <v-icon color="warning">mdi-alert</v-icon>
-                  <v-icon>mdi-sync mdi-spin</v-icon>
-                </span>
-              </template>
-              <span>Waiting for spectrogram to be computed</span>
-            </v-tooltip>
-          </div>
-        </template>
-        <template #item.annotation="{ item }">
-          <RecordingAnnotationSummary :file-annotations="item.fileAnnotations" />
-        </template>
-
-        <template #item.tag_text="{ item }">
-          <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 }">
-          {{ item.recorded_date }} {{ item.recorded_time }}
-        </template>
-
-        <template #item.recording_location="{ item }">
-          <v-menu
-            v-if="item.recording_location || (configuration.mark_annotations_completed_enabled && item.grts_cell_id)"
-            open-on-hover
-            :close-on-content-click="false"
-          >
-            <template #activator="{ props }">
-              <v-icon v-bind="props">
-                mdi-map
-              </v-icon>
-            </template>
-            <v-card>
-              <map-location
-                :editor="false"
-                :size="{width: 400, height: 400}"
-                :location="getItemLocation(item)"
-                :grts-cell-id="configuration.mark_annotations_completed_enabled ? item.grts_cell_id || undefined : undefined"
-              />
-            </v-card>
-          </v-menu>
-          <v-icon
-            v-else
-            color="error"
-          >
-            mdi-close
-          </v-icon>
-        </template>
-
-        <template #item.comments="{ item }">
-          <v-menu
-            v-if="item.comments !== undefined"
-            open-on-click
-            :close-on-content-click="false"
-          >
-            <template #activator="{ props }">
-              <v-icon v-bind="props">
-                mdi-information-outline
-              </v-icon>
-            </template>
-            <recording-info-display
-              :recording-info="item"
-              :minimal-metadata="configuration.mark_annotations_completed_enabled"
-              disable-button
-            />
-          </v-menu>
-        </template>
-
-        <template #item.public="{ item }">
-          <v-icon
-            v-if="item.public"
-            color="success"
-          >
-            mdi-check
-          </v-icon>
-          <v-icon
-            v-else
-            color="error"
-          >
-            mdi-close
-          </v-icon>
-        </template>
-
-        <template
-          v-if="configuration.mark_annotations_completed_enabled"
-          #item.submitted="{ item }"
-        >
-          <v-tooltip v-if="currentUserSubmissionStatus(item) === 1">
-            <template #activator="{ props }">
-              <v-icon
-                v-bind="props"
-                color="success"
-              >
-                mdi-check
-              </v-icon>
-            </template>
-            You have submitted an annotation for this recording
-          </v-tooltip>
-          <v-tooltip v-else-if="currentUserSubmissionStatus(item) === 0">
-            <template #activator="{ props }">
-              <v-icon
-                v-bind="props"
-                color="warning"
-              >
-                mdi-circle-outline
-              </v-icon>
-            </template>
-            You have created an annotation, but it has not been submitted
-          </v-tooltip>
-          <v-tooltip v-else>
-            <template #activator="{ props }">
-              <v-icon
-                v-bind="props"
-                color="error"
-              >
-                mdi-close
-              </v-icon>
-            </template>
-            You have not created an annotation for this recording
-          </v-tooltip>
-        </template>
-        <template
-          v-if="configuration.mark_annotations_completed_enabled && showSubmittedRecordings"
-          #item.submittedLabel="{ item }"
-        >
-          {{ currentUserSubmissionLabel(item) }}
-        </template>
-      </v-data-table-server>
-      <div
-        v-if="
-          totalMyCount > 0
-            && configuration.mark_annotations_completed_enabled
-            && (configuration.is_admin || configuration.non_admin_upload_enabled)
-        "
-        class="d-flex justify-center align-center"
-      >
-        <span class="text-body-2">
-          Total: {{ totalMyCount }} recording{{ totalMyCount !== 1 ? 's' : '' }}
-        </span>
-      </div>
+        ref="myRecordingsTableRef"
+        variant="my"
+        :edit-recording="editRecording"
+        :open-delete-recording-dialog="openDeleteRecordingDialog"
+      />
     </v-card-text>
     <v-dialog
       v-model="uploadDialog"
@@ -668,206 +187,22 @@ export default defineComponent({
   <v-card>
     <v-card-title>
       <v-row class="py-2">
-        <div>
-          Shared
-        </div>
+        <div>Shared</div>
       </v-row>
     </v-card-title>
     <v-card-text>
-      <v-data-table-server
-        v-model:sort-by="sortByShared"
-        :headers="sharedHeaders"
-        :items="sharedList"
-        :items-length="totalSharedCount"
-        :loading="sharedRecordingsLoading"
-        :row-props="getRowProps"
-        items-per-page="20"
-        :items-per-page-options="[{ value: 10, title: '10' }, { value: 20, title: '20' }, { value: 50, title: '50' }, { value: 100, title: '100' }]"
-        density="compact"
-        class="elevation-1 shared-recordings"
-        :style="sharedRecordingListStyles"
-        @update:options="fetchSharedRecordings"
-      >
-        <template #top>
-          <div max-height="100px">
-            <v-combobox
-              v-model="sharedFilterTags"
-              :items="recordingTagOptions"
-              label="Filter recordings by tags"
-              multiple
-              chips
-              closable-chips
-              clearable
-            />
-          </div>
-        </template>
-        <template #item.name="{ item }">
-          <router-link
-            :to="`/recording/${item.id.toString()}/spectrogram`"
-          >
-            {{ item.name }}
-          </router-link>
-        </template>
-
-        <template #item.tag_text="{ item }">
-          <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 }">
-          {{ item.recorded_date }} {{ item.recorded_time }}
-        </template>
-        <template #item.annotation="{ item }">
-          <RecordingAnnotationSummary :file-annotations="item.fileAnnotations" />
-        </template>
-        <template #item.public="{ item }">
-          <v-icon
-            v-if="item.public"
-            color="success"
-          >
-            mdi-check
-          </v-icon>
-          <v-icon
-            v-else
-            color="error"
-          >
-            mdi-close
-          </v-icon>
-        </template>
-        <template #item.recording_location="{ item }">
-          <v-menu
-            v-if="item.recording_location || (configuration.mark_annotations_completed_enabled && item.grts_cell_id)"
-            open-on-hover
-            :close-on-content-click="false"
-          >
-            <template #activator="{ props }">
-              <v-icon v-bind="props">
-                mdi-map
-              </v-icon>
-            </template>
-            <v-card>
-              <map-location
-                :editor="false"
-                :size="{width: 400, height: 400}"
-                :location="getItemLocation(item)"
-                :grts-cell-id="configuration.mark_annotations_completed_enabled ? item.grts_cell_id || undefined : undefined"
-              />
-            </v-card>
-          </v-menu>
-          <v-icon
-            v-else
-            color="error"
-          >
-            mdi-close
-          </v-icon>
-        </template>
-
-        <template #item.comments="{ item }">
-          <v-menu
-            v-if="item.comments !== undefined"
-            open-on-click
-            :close-on-content-click="false"
-          >
-            <template #activator="{ props }">
-              <v-icon v-bind="props">
-                mdi-information-outline
-              </v-icon>
-            </template>
-            <recording-info-display
-              :recording-info="item"
-              disable-button
-            />
-          </v-menu>
-        </template>
-
-        <template #item.userMadeAnnotations="{ item }">
-          <v-icon
-            v-if="item.userMadeAnnotations"
-            color="success"
-          >
-            mdi-check
-          </v-icon>
-          <v-icon
-            v-else
-            color="error"
-          >
-            mdi-close
-          </v-icon>
-        </template>
-
-        <template
-          v-if="configuration.mark_annotations_completed_enabled"
-          #item.submitted="{ item }"
-        >
-          <v-tooltip v-if="currentUserSubmissionStatus(item) === 1">
-            <template #activator="{ props }">
-              <v-icon
-                v-bind="props"
-                color="success"
-              >
-                mdi-check
-              </v-icon>
-            </template>
-            You have submitted an annotation for this recording
-          </v-tooltip>
-          <v-tooltip v-else-if="currentUserSubmissionStatus(item) === 0">
-            <template #activator="{ props }">
-              <v-icon
-                v-bind="props"
-                color="warning"
-              >
-                mdi-circle-outline
-              </v-icon>
-            </template>
-            You have created an annotation, but it has not been submitted
-          </v-tooltip>
-          <v-tooltip v-else>
-            <template #activator="{ props }">
-              <v-icon
-                v-bind="props"
-                color="error"
-              >
-                mdi-close
-              </v-icon>
-            </template>
-            You have not created an annotation for this recording
-          </v-tooltip>
-        </template>
-        <template
-          v-if="configuration.mark_annotations_completed_enabled && showSubmittedRecordings"
-          #item.submittedLabel="{ item }"
-        >
-          {{ currentUserSubmissionLabel(item) }}
-        </template>
-      </v-data-table-server>
-      <div
-        v-if="totalSharedCount > 0 && configuration.mark_annotations_completed_enabled"
-        class="d-flex justify-center align-center"
-      >
-        <span class="text-body-2">
-          Total: {{ totalSharedCount }} recording{{ totalSharedCount !== 1 ? 's' : '' }}
-        </span>
-      </div>
+      <recording-table variant="shared" />
     </v-card-text>
   </v-card>
 </template>
 
 <style scoped>
-.my-recordings {
-  overflow-y:scroll;
-}
-.shared-recordings {
-  overflow-y:scroll;
+:deep(.my-recordings),
+:deep(.shared-recordings) {
+  overflow-y: scroll;
 }
-.my-recordings :deep(tr.current-recording-row),
-.shared-recordings :deep(tr.current-recording-row) {
+:deep(.my-recordings tr.current-recording-row),
+:deep(.shared-recordings tr.current-recording-row) {
   border: 2px solid rgb(var(--v-theme-primary));
   box-sizing: border-box;
 }

From 4b669c615c432ea1069deb162b5d055e14245287 Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Fri, 13 Mar 2026 09:26:59 -0400
Subject: [PATCH 2/4] simplify recording tags and enable all users to see tags

---
 bats_ai/core/views/recording_tag.py             | 15 ++++++++++++---
 client/src/api/api.ts                           |  7 +------
 client/src/components/BatchRecordingElement.vue |  2 +-
 client/src/components/BatchUploadRecording.vue  |  4 ++--
 client/src/components/UploadRecording.vue       |  4 ++--
 client/src/use/useState.ts                      |  6 ++----
 6 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/bats_ai/core/views/recording_tag.py b/bats_ai/core/views/recording_tag.py
index 3ab4a175..c490b941 100644
--- a/bats_ai/core/views/recording_tag.py
+++ b/bats_ai/core/views/recording_tag.py
@@ -1,5 +1,6 @@
 from __future__ import annotations
 
+from django.db.models import Q
 from django.http import Http404, HttpRequest
 from ninja import Schema
 from ninja.pagination import RouterPaginated
@@ -17,7 +18,15 @@ class RecordingTagSchema(Schema):
 
 @router.get("/")
 def get_recording_tags(request: HttpRequest):
-    user = request.user
-    if not user:
+    if not request.user:
         return Http404()
-    return list(RecordingTag.objects.filter(user=request.user).values())
+    # User's own tags + tags on public recordings (so non-admins get suggestions when filtering shared list).
+    qs = (
+        RecordingTag.objects.filter(
+            Q(user=request.user) | Q(recording__public=True)
+        )
+        .exclude(text="")
+        .values_list("text", flat=True)
+        .distinct()
+    )
+    return list(qs)
diff --git a/client/src/api/api.ts b/client/src/api/api.ts
index 907df0ab..b479d2b5 100644
--- a/client/src/api/api.ts
+++ b/client/src/api/api.ts
@@ -273,11 +273,6 @@ interface GRTSCellBbox {
   };
 }
 
-export interface RecordingTag {
-  id: number;
-  text: string;
-  user_id: number;
-}
 
 /** Params for paginated recording list (v-data-table-server compatible). */
 export interface RecordingListParams {
@@ -358,7 +353,7 @@ async function getUnsubmittedNeighbors(
 }
 
 async function getRecordingTags() {
-  return axiosInstance.get<RecordingTag[]>(`/recording-tag/`);
+  return axiosInstance.get<string[]>(`/recording-tag/`);
 }
 
 async function deleteRecording(id: number) {
diff --git a/client/src/components/BatchRecordingElement.vue b/client/src/components/BatchRecordingElement.vue
index 8f8e1c0f..3ac9a8fb 100644
--- a/client/src/components/BatchRecordingElement.vue
+++ b/client/src/components/BatchRecordingElement.vue
@@ -36,7 +36,7 @@ export default defineComponent({
   emits: ["done", "cancel", "update", "delete"],
   setup(props, { emit }) {
     const { recordingTagList } = useState();
-    const tagOptions = computed(() => recordingTagList.value.map((tag) => tag.text));
+    const tagOptions = computed(() => [...recordingTagList.value]);
     const initialTags = props.editing ? props.editing.tags : [];
     const currentTags: Ref<string[] | undefined> = ref(initialTags);
     const dateAdapter = useDate();
diff --git a/client/src/components/BatchUploadRecording.vue b/client/src/components/BatchUploadRecording.vue
index c92fe6c4..40c15e5b 100644
--- a/client/src/components/BatchUploadRecording.vue
+++ b/client/src/components/BatchUploadRecording.vue
@@ -2,7 +2,7 @@
 import { computed, defineComponent, ref, Ref, watch } from 'vue';
 import { RecordingMimeTypes } from '../constants';
 import useRequest from '@use/useRequest';
-import { UploadLocation, uploadRecordingFile, getCellLocation, RecordingFileParameters, getGuanoMetadata, RecordingTag } from '../api/api';
+import { UploadLocation, uploadRecordingFile, getCellLocation, RecordingFileParameters, getGuanoMetadata } from '../api/api';
 import BatchRecordingElement, { BatchRecording } from './BatchRecordingElement.vue';
 import { cloneDeep } from 'lodash';
 import { extractDateTimeComponents, getCurrentTime } from '@use/useUtils';
@@ -24,7 +24,7 @@ export default defineComponent({
   emits: ['done', 'cancel'],
   setup(props, { emit }) {
     const { recordingTagList } = useState();
-    const tagOptions = computed(() => recordingTagList.value.map((tag: RecordingTag) => tag.text));
+    const tagOptions = computed(() => [...recordingTagList.value]);
 
     const fileInputEl: Ref<HTMLInputElement | null> = ref(null);
     const fileModel: Ref<File | undefined> = ref();
diff --git a/client/src/components/UploadRecording.vue b/client/src/components/UploadRecording.vue
index 0082324c..a2ee4fb9 100644
--- a/client/src/components/UploadRecording.vue
+++ b/client/src/components/UploadRecording.vue
@@ -8,7 +8,7 @@ import {
 } from 'vue';
 import { RecordingMimeTypes } from '../constants';
 import useRequest from '@use/useRequest';
-import { UploadLocation, uploadRecordingFile, patchRecording, getCellLocation, getCellfromLocation, getGuanoMetadata, RecordingFileParameters, RecordingTag } from '../api/api';
+import { UploadLocation, uploadRecordingFile, patchRecording, getCellLocation, getCellfromLocation, getGuanoMetadata, RecordingFileParameters } from '../api/api';
 import MapLocation from './MapLocation.vue';
 import { useDate } from 'vuetify';
 import { getCurrentTime, extractDateTimeComponents } from '@use/useUtils';
@@ -44,7 +44,7 @@ export default defineComponent({
   emits: ['done', 'cancel'],
   setup(props, { emit }) {
     const { recordingTagList } = useState();
-    const tagOptions = computed(() => recordingTagList.value.map((tag: RecordingTag) => tag.text));
+    const tagOptions = computed(() => [...recordingTagList.value]);
     const initialTags = props.editing ? props.editing.tags : undefined;
     const currentTags: Ref<string[]> = ref(initialTags || []);
 
diff --git a/client/src/use/useState.ts b/client/src/use/useState.ts
index 45425c00..7d100607 100644
--- a/client/src/use/useState.ts
+++ b/client/src/use/useState.ts
@@ -10,7 +10,6 @@ import {
   Recording,
   SpectrogramAnnotation,
   SpectrogramSequenceAnnotation,
-  RecordingTag,
   getComputedPulseContour,
   ComputedPulseContour,
   getVettingDetailsForUser,
@@ -52,7 +51,7 @@ const otherUserAnnotations: Ref<OtherUserAnnotations> = ref({});
 const sharedList: Ref<Recording[]> = ref([]);
 const recordingList: Ref<Recording[]> = ref([]);
 const currentRecordingId: Ref<number | undefined> = ref(undefined);
-const recordingTagList: Ref<RecordingTag[]> = ref([]);
+const recordingTagList: Ref<string[]> = ref([]);
 const nextShared: Ref<Recording | false> = ref(false);
 const scaledVals: Ref<{ x: number; y: number }> = ref({ x: 1, y: 1 });
 const viewCompressedOverlay = ref(false);
@@ -116,6 +115,7 @@ const SHARED_FILTER_TAG_STORAGE_KEY = 'bataiSharedFilterTags';
 
 const filterTags: Ref<string[]> = ref([]);
 const sharedFilterTags: Ref<string[]> = ref([]);
+const showSubmittedRecordings = ref(false);
 
 /** Current spectrogram recording filename (for app bar display). Set by Spectrogram view, cleared when not on spectrogram. */
 const spectrogramFilename: Ref<string> = ref("");
@@ -196,8 +196,6 @@ export default function useState() {
     return router.currentRoute.value.fullPath.includes('nabat');
   }
 
-  const showSubmittedRecordings = ref(false);
-
   // Server filters by exclude_submitted when "Show submitted" is unchecked; we refetch on toggle.
   const myRecordingsDisplay = computed(() => recordingList.value);
   const sharedRecordingsDisplay = computed(() => sharedList.value);

From e17fc202a8edd6eeaf55c749bbfe931ef024d973 Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Fri, 13 Mar 2026 09:42:06 -0400
Subject: [PATCH 3/4] simplify recording tag list

---
 bats_ai/core/views/recording_tag.py | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/bats_ai/core/views/recording_tag.py b/bats_ai/core/views/recording_tag.py
index c490b941..c68366e8 100644
--- a/bats_ai/core/views/recording_tag.py
+++ b/bats_ai/core/views/recording_tag.py
@@ -3,7 +3,7 @@
 from django.db.models import Q
 from django.http import Http404, HttpRequest
 from ninja import Schema
-from ninja.pagination import RouterPaginated
+from ninja.pagination import Router
 
 from bats_ai.core.models import RecordingTag
 
@@ -13,20 +13,18 @@ class RecordingTagSchema(Schema):
     user: int
 
 
-router = RouterPaginated()
+router = Router()
 
 
-@router.get("/")
+@router.get("/", response=list[str])
 def get_recording_tags(request: HttpRequest):
     if not request.user:
         return Http404()
     # User's own tags + tags on public recordings (so non-admins get suggestions when filtering shared list).
-    qs = (
+    return list(
         RecordingTag.objects.filter(
             Q(user=request.user) | Q(recording__public=True)
         )
-        .exclude(text="")
         .values_list("text", flat=True)
         .distinct()
     )
-    return list(qs)

From 91e27a214ea10d0cd933aae3094320da70c52086 Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Fri, 13 Mar 2026 09:46:53 -0400
Subject: [PATCH 4/4] linting

---
 bats_ai/core/views/recording_tag.py | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/bats_ai/core/views/recording_tag.py b/bats_ai/core/views/recording_tag.py
index c68366e8..d9d512d1 100644
--- a/bats_ai/core/views/recording_tag.py
+++ b/bats_ai/core/views/recording_tag.py
@@ -20,11 +20,9 @@ class RecordingTagSchema(Schema):
 def get_recording_tags(request: HttpRequest):
     if not request.user:
         return Http404()
-    # User's own tags + tags on public recordings (so non-admins get suggestions when filtering shared list).
+    # User's own tags + tags on public recordings
     return list(
-        RecordingTag.objects.filter(
-            Q(user=request.user) | Q(recording__public=True)
-        )
+        RecordingTag.objects.filter(Q(user=request.user) | Q(recording__public=True))
         .values_list("text", flat=True)
         .distinct()
     )