From b85b8645aabee07ac2d049a8e160541c4885562c Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Mon, 9 Dec 2024 09:51:59 -0500
Subject: [PATCH] adding file annotation to main recording view

---
 bats_ai/core/views/recording.py               |  35 ++++--
 bats_ai/core/views/recording_annotation.py    |   2 +-
 client/src/api/api.ts                         |   1 +
 client/src/components/AnnotationList.vue      |  57 ++++++---
 .../components/RecordingAnnotationSummary.vue | 108 ++++++++++++++++++
 client/src/views/Recordings.vue               |  35 ++++--
 6 files changed, 203 insertions(+), 35 deletions(-)
 create mode 100644 client/src/components/RecordingAnnotationSummary.vue

diff --git a/bats_ai/core/views/recording.py b/bats_ai/core/views/recording.py
index d0701d9..c935880 100644
--- a/bats_ai/core/views/recording.py
+++ b/bats_ai/core/views/recording.py
@@ -253,9 +253,12 @@ def get_recordings(request: HttpRequest, public: bool | None = None):
             .count()
         )
         recording['userAnnotations'] = unique_users_with_annotations
-        user_has_annotations = Annotations.objects.filter(
-            recording_id=recording['id'], owner=request.user
-        ).exists()
+        user_has_annotations = (
+            Annotations.objects.filter(recording_id=recording['id'], owner=request.user).exists()
+            or RecordingAnnotation.objects.filter(
+                recording_id=recording['id'], owner=request.user
+            ).exists()
+        )
         recording['userMadeAnnotations'] = user_has_annotations
 
     return list(recordings)
@@ -275,16 +278,30 @@ def get_recording(request: HttpRequest, id: int):
             recording['hasSpectrogram'] = Recording.objects.get(id=recording['id']).has_spectrogram
             if recording['recording_location']:
                 recording['recording_location'] = json.loads(recording['recording_location'].json)
-            unique_users_with_annotations = (
+            annotation_owners = (
                 Annotations.objects.filter(recording_id=recording['id'])
-                .values('owner')
+                .values_list('owner', flat=True)
+                .distinct()
+            )
+            recording_annotation_owners = (
+                RecordingAnnotation.objects.filter(recording_id=recording['id'])
+                .values_list('owner', flat=True)
                 .distinct()
-                .count()
+            )
+
+            # Combine the sets of owners and count unique entries
+            unique_users_with_annotations = len(
+                set(annotation_owners).union(set(recording_annotation_owners))
             )
             recording['userAnnotations'] = unique_users_with_annotations
-            user_has_annotations = Annotations.objects.filter(
-                recording_id=recording['id'], owner=request.user
-            ).exists()
+            user_has_annotations = (
+                Annotations.objects.filter(
+                    recording_id=recording['id'], owner=request.user
+                ).exists()
+                or RecordingAnnotation.objects.filter(
+                    recording_id=recording['id'], owner=request.user
+                ).exists()
+            )
             recording['userMadeAnnotations'] = user_has_annotations
             fileAnnotations = RecordingAnnotation.objects.filter(recording=id).order_by(
                 'confidence'
diff --git a/bats_ai/core/views/recording_annotation.py b/bats_ai/core/views/recording_annotation.py
index 4f258c1..20fc06f 100644
--- a/bats_ai/core/views/recording_annotation.py
+++ b/bats_ai/core/views/recording_annotation.py
@@ -100,7 +100,7 @@ def update_recording_annotation(
         annotation = RecordingAnnotation.objects.get(pk=id)
 
         # Check permission
-        if annotation.recording.owner != request.user:
+        if annotation.recording.owner != request.user and not annotation.recording.public:
             raise HttpError(403, 'Permission denied.')
 
         # Update fields if provided
diff --git a/client/src/api/api.ts b/client/src/api/api.ts
index 858f54d..cbd5817 100644
--- a/client/src/api/api.ts
+++ b/client/src/api/api.ts
@@ -28,6 +28,7 @@ export interface Recording {
     userMadeAnnotations: boolean;
     userAnnotations: number;
     hasSpectrogram: boolean;
+    fileAnnotations: FileAnnotation[];
     site_name?: string;
     software?: string;
     detector?: string;
diff --git a/client/src/components/AnnotationList.vue b/client/src/components/AnnotationList.vue
index 1f9b55f..d06034b 100644
--- a/client/src/components/AnnotationList.vue
+++ b/client/src/components/AnnotationList.vue
@@ -89,24 +89,51 @@ export default defineComponent({
         class="ma-auto"
         @update:model-value="tabSwitch($event)"
       >
-        <v-tab
-          value="recording"
-          size="x-small"
+        <v-tooltip
+          location="bottom"
+          open-delay="400"
         >
-          Recording
-        </v-tab>
-        <v-tab
-          value="pulse"
-          size="x-small"
+          <template #activator="{ props }">
+            <v-tab
+              value="recording"
+              size="x-small"
+              v-bind="props"
+            >
+              Recording
+            </v-tab>
+          </template>
+          <span>Recording/File Level Species Annotations</span>
+        </v-tooltip>
+        <v-tooltip
+          location="bottom"
+          open-delay="400"
         >
-          Pulse
-        </v-tab>
-        <v-tab
-          value="sequence"
-          size="x-small"
+          <template #activator="{ props }">
+            <v-tab
+              value="sequence"
+              size="x-small"
+              v-bind="props"
+            >
+              Sequence
+            </v-tab>
+          </template>
+          <span>Sequence Level annotations (Approach/Search/Terminal/Social)</span>
+        </v-tooltip>
+        <v-tooltip
+          location="bottom"
+          open-delay="400"
         >
-          Sequence
-        </v-tab>
+          <template #activator="{ props }">
+            <v-tab
+              value="pulse"
+              size="x-small"
+              v-bind="props"
+            >
+              Pulse
+            </v-tab>
+          </template>
+          <span>Pulse Level Annotations (for a single pulse)</span>
+        </v-tooltip>
       </v-tabs>
     </v-row>
     <v-window v-model="tab">
diff --git a/client/src/components/RecordingAnnotationSummary.vue b/client/src/components/RecordingAnnotationSummary.vue
new file mode 100644
index 0000000..47489f4
--- /dev/null
+++ b/client/src/components/RecordingAnnotationSummary.vue
@@ -0,0 +1,108 @@
+<script lang="ts">
+import { defineComponent, onMounted, PropType, Ref } from "vue";
+import { SpectroInfo } from './geoJS/geoJSUtils';
+import useState from "../use/useState";
+import { watch, ref } from "vue";
+import AnnotationEditor from "./AnnotationEditor.vue";
+import { FileAnnotation, getFileAnnotations, putFileAnnotation, Species, SpectrogramAnnotation, SpectrogramTemporalAnnotation, UpdateFileAnnotation } from "../api/api";
+import RecordingAnnotationEditor from "./RecordingAnnotationEditor.vue";
+export default defineComponent({
+  name: "AnnotationList",
+  components: {
+    RecordingAnnotationEditor,
+  },
+  props: {
+    fileAnnotations: {
+      type: Array as PropType<FileAnnotation[]>,
+      required: true,
+    },
+  },
+  emits: [],
+  setup(props) {
+
+    return {
+    };
+  },
+});
+</script>
+
+<template>
+  <v-tooltip
+    v-if="fileAnnotations.length"
+    min-width="500"
+  >
+    <template #activator="{ props: subProps }">
+      <span>{{ fileAnnotations.length }} Annotations <v-icon v-bind="subProps">mdi-information-outline</v-icon></span>
+    </template>
+    <v-card>
+      <v-list>
+        <v-list-item
+          v-for="annotation in fileAnnotations"
+          :key="`${annotation.id}`"
+          class="annotation-item "
+        >
+          <v-row>
+            <v-col class="annotation-owner">
+              <span>{{ annotation.owner }}</span>
+            </v-col>
+            <v-col class="annotation-confidence">
+              <span>{{ annotation.confidence }} </span>
+            </v-col>
+            <v-col class="annotation-model">
+              <span>{{ annotation.model }} </span>
+            </v-col>
+          </v-row>
+          <v-row
+            v-for="item in annotation.species"
+            :key="`${annotation.id}_${item.common_name}`"
+            class="ma-0 pa-0"
+          >
+            <v-col class="ma-0 pa-0">
+              <div class="species-name">
+                {{ item.species_code || item.common_name }}
+              </div>
+              <div
+                v-if="item.family"
+                class="species-hierarchy"
+              >
+                <span> {{ item.family }}</span>
+                <span v-if="item.genus">-></span>
+                <span v-if="item.genus">{{ item.genus }}</span>
+              </div>
+            </v-col>
+          </v-row>
+        </v-list-item>
+      </v-list>
+    </v-card>
+  </v-tooltip>
+  <span v-else>
+    None
+  </span>
+</template>
+
+<style lang="scss" scoped>
+
+.annotation-owner {
+  font-size: 1em;
+}
+
+.annotation-confidence {
+  font-size: 1em;
+}
+
+.annotation-model {
+  font-size: 1em;
+}
+
+.annotation-item {
+  border: 1px solid gray;
+}
+.species-name {
+  font-weight: bold;
+  font-size: 1em;
+}
+
+.species-hierarchy {
+  font-size: 0.75em;
+}
+</style>
diff --git a/client/src/views/Recordings.vue b/client/src/views/Recordings.vue
index 9275072..50fa104 100644
--- a/client/src/views/Recordings.vue
+++ b/client/src/views/Recordings.vue
@@ -6,12 +6,14 @@ 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';
 export default defineComponent({
     components: {
         UploadRecording,
         MapLocation,
         BatchUploadRecording,
-        RecordingInfoDisplay
+        RecordingInfoDisplay,
+        RecordingAnnotationSummary,
     },
   setup() {
     const itemsPerPage = ref(-1);
@@ -26,11 +28,14 @@ export default defineComponent({
             title:'Edit',
             key:'edit',
         },
-
         {
             title:'Name',
             key:'name',
         },
+        {
+          title: 'Annotation',
+          key:'annotation'
+        },
         {
             title:'Owner',
             key:'owner_username',
@@ -39,10 +44,6 @@ export default defineComponent({
             title:'Recorded Date',
             key:'recorded_date',
         },
-        {
-            title:'Recorded Time',
-            key:'recorded_time',
-        },
         {
             title:'Public',
             key:'public',
@@ -71,6 +72,10 @@ export default defineComponent({
             title:'Name',
             key:'name',
         },
+        {
+          title: 'Annotation',
+          key:'annotation'
+        },
         {
             title:'Owner',
             key:'owner_username',
@@ -79,10 +84,6 @@ export default defineComponent({
             title:'Recorded Date',
             key:'recorded_date',
         },
-        {
-            title:'Recorded Time',
-            key:'recorded_time',
-        },
         {
             title:'Public',
             key:'public',
@@ -251,6 +252,14 @@ export default defineComponent({
             </v-tooltip>
           </div>
         </template>
+        <template #item.annotation="{ item }">
+          <RecordingAnnotationSummary :file-annotations="item.fileAnnotations" />
+        </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"
@@ -356,6 +365,12 @@ export default defineComponent({
             {{ item.name }}
           </router-link>
         </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"