From d4083996802842cc96fb633ba8dddba6c223dc13 Mon Sep 17 00:00:00 2001
From: Bryon Lewis <61746913+BryonLewis@users.noreply.github.com>
Date: Tue, 29 Oct 2024 12:59:14 -0400
Subject: [PATCH] fix-presigned url (#104)

* fix-presigned url

* fix-presigned url

* adding admin viewing of compressed spectrograms

* linting

* fix compressed link
---
 bats_ai/core/admin/recording.py     |  14 ++++
 bats_ai/core/models/recording.py    |  22 ++++++
 bats_ai/core/views/guanometadata.py |   2 +-
 bats_ai/core/views/recording.py     |   4 --
 client/src/views/Spectrogram.vue    | 107 ++++++++++++++++++++--------
 5 files changed, 115 insertions(+), 34 deletions(-)

diff --git a/bats_ai/core/admin/recording.py b/bats_ai/core/admin/recording.py
index bb2d5d3..36bec2e 100644
--- a/bats_ai/core/admin/recording.py
+++ b/bats_ai/core/admin/recording.py
@@ -15,6 +15,7 @@ class RecordingAdmin(admin.ModelAdmin):
         'name',
         'audio_file',
         'spectrogram_status',
+        'compressed_spectrogram_status',
         'owner',
         'recorded_date',
         'recorded_time',
@@ -60,6 +61,19 @@ def spectrogram_status(self, recording: Recording):
             return link
         return None
 
+    @admin.display(
+        description='Compressed Spectrogram',
+        empty_value='Not computed',
+    )
+    def compressed_spectrogram_status(self, recording: Recording):
+        if recording.has_compressed_spectrogram:
+            spectrogram = recording.compressed_spectrogram
+            href = reverse('admin:core_compressedspectrogram_change', args=(spectrogram.pk,))
+            description = str(spectrogram)
+            link = mark_safe(f'<a href="{href}">{description}</a>')
+            return link
+        return None
+
     @admin.action(description='Compute Spectrograms')
     def compute_spectrograms(self, request: HttpRequest, queryset: QuerySet):
         counter = 0
diff --git a/bats_ai/core/models/recording.py b/bats_ai/core/models/recording.py
index 4eb3b42..39e5bb0 100644
--- a/bats_ai/core/models/recording.py
+++ b/bats_ai/core/models/recording.py
@@ -77,6 +77,28 @@ def spectrogram(self):
 
         return spectrogram
 
+    @property
+    def has_compressed_spectrogram(self):
+        return len(self.compressed_spectrograms) > 0
+
+    @property
+    def compressed_spectrograms(self):
+        from bats_ai.core.models import CompressedSpectrogram
+
+        query = CompressedSpectrogram.objects.filter(recording=self).order_by('-created')
+        return query.all()
+
+    @property
+    def compressed_spectrogram(self):
+        pass
+
+        compressed_spectrograms = self.compressed_spectrograms
+
+        assert len(compressed_spectrograms) >= 1
+        spectrogram = compressed_spectrograms[0]  # most recently created
+
+        return spectrogram
+
 
 @receiver(models.signals.pre_delete, sender=Recording)
 def delete_content(sender, instance, **kwargs):
diff --git a/bats_ai/core/views/guanometadata.py b/bats_ai/core/views/guanometadata.py
index 4a1b304..add1859 100644
--- a/bats_ai/core/views/guanometadata.py
+++ b/bats_ai/core/views/guanometadata.py
@@ -45,7 +45,7 @@ def default_data(
             'nabat_site_name': gfile.get('NABat|Site Name', None),
         }
         if (
-            nabat_fields['nabat_longitude'] and nabat_fields['nabat_longitude'] > 0
+            nabat_fields['nabat_longitude'] and float(nabat_fields['nabat_longitude']) > 0
         ):  # individuals don't put the - in the longitude
             nabat_fields['nabat_longitude'] = str(float(nabat_fields['nabat_longitude']) * -1)
         # Extract additional fields with conditionals
diff --git a/bats_ai/core/views/recording.py b/bats_ai/core/views/recording.py
index a56bcbb..e7c892c 100644
--- a/bats_ai/core/views/recording.py
+++ b/bats_ai/core/views/recording.py
@@ -342,10 +342,6 @@ def get_spectrogram_compressed(request: HttpRequest, id: int):
     except recording.DoesNotExist:
         return {'error': 'Recording does not exist'}
 
-    with colormap():
-        label, score, confs = compressed_spectrogram.predict()
-        print(label, score, confs)
-
     spectro_data = {
         'url': compressed_spectrogram.image_url,
         'spectroInfo': {
diff --git a/client/src/views/Spectrogram.vue b/client/src/views/Spectrogram.vue
index 88a3710..379d2ef 100644
--- a/client/src/views/Spectrogram.vue
+++ b/client/src/views/Spectrogram.vue
@@ -1,5 +1,13 @@
 <script lang="ts">
-import { computed, defineComponent, onMounted, onUnmounted, Ref, ref, watch } from "vue";
+import {
+  computed,
+  defineComponent,
+  onMounted,
+  onUnmounted,
+  Ref,
+  ref,
+  watch,
+} from "vue";
 import {
   getSpecies,
   getAnnotations,
@@ -57,16 +65,22 @@ export default defineComponent({
     const recordingInfo = ref(false);
     const getAnnotationsList = async (annotationId?: number) => {
       const response = await getAnnotations(props.id);
-      annotations.value = response.data.sort((a, b) => a.start_time - b.start_time);
+      annotations.value = response.data.sort(
+        (a, b) => a.start_time - b.start_time
+      );
       const tempResp = await getTemporalAnnotations(props.id);
-      temporalAnnotations.value = tempResp.data.sort((a, b) => a.start_time - b.start_time);
+      temporalAnnotations.value = tempResp.data.sort(
+        (a, b) => a.start_time - b.start_time
+      );
       if (annotationId !== undefined) {
         selectedId.value = annotationId;
       }
     };
     const selectedIndex = computed(() => {
       if (annotations.value && selectedId.value !== null) {
-        return annotations.value.findIndex((item) => item.id === selectedId.value);
+        return annotations.value.findIndex(
+          (item) => item.id === selectedId.value
+        );
       }
       return -1;
     });
@@ -88,18 +102,33 @@ export default defineComponent({
       const response = compressed.value
         ? await getSpectrogramCompressed(props.id)
         : await getSpectrogram(props.id);
-      if (response.data['url']) {
-        image.value.src = response.data['url'];
+      if (response.data["url"]) {
+        if (import.meta.env.PROD) {
+        const updateHost = `${window.location.protocol}//${window.location.hostname}/`;
+        const updatedURL = response.data["url"].replace(
+          "http://127.0.0.1:9000/",
+          updateHost
+        );
+        image.value.src = updatedURL.split("?")[0];
+        } else {
+          image.value.src = response.data['url'];
+        }
       } else {
         // TODO Error Out if there is no URL
-        console.error('No URL found for the spectrogram');
+        console.error("No URL found for the spectrogram");
       }
       image.value.onload = () => {
         loadedImage.value = true;
       };
       spectroInfo.value = response.data["spectroInfo"];
-      annotations.value = response.data["annotations"]?.sort((a, b) => a.start_time - b.start_time) || [];
-      temporalAnnotations.value = response.data["temporal"]?.sort((a, b) => a.start_time - b.start_time) || [];
+      annotations.value =
+        response.data["annotations"]?.sort(
+          (a, b) => a.start_time - b.start_time
+        ) || [];
+      temporalAnnotations.value =
+        response.data["temporal"]?.sort(
+          (a, b) => a.start_time - b.start_time
+        ) || [];
       if (response.data.currentUser) {
         currentUser.value = response.data.currentUser;
       }
@@ -116,14 +145,26 @@ export default defineComponent({
       selectedId.value = annotationId;
     };
     const selectedAnnotation = computed(() => {
-      if (selectedId.value !== null && selectedType.value === 'pulse' && annotations.value) {
-        const found = annotations.value.findIndex((item) => item.id === selectedId.value);
+      if (
+        selectedId.value !== null &&
+        selectedType.value === "pulse" &&
+        annotations.value
+      ) {
+        const found = annotations.value.findIndex(
+          (item) => item.id === selectedId.value
+        );
         if (found !== -1) {
           return annotations.value[found];
         }
       }
-      if (selectedId.value !== null && selectedType.value === 'sequence' && temporalAnnotations.value) {
-        const found = temporalAnnotations.value.findIndex((item) => item.id === selectedId.value);
+      if (
+        selectedId.value !== null &&
+        selectedType.value === "sequence" &&
+        temporalAnnotations.value
+      ) {
+        const found = temporalAnnotations.value.findIndex(
+          (item) => item.id === selectedId.value
+        );
         if (found !== -1) {
           return temporalAnnotations.value[found];
         }
@@ -133,9 +174,12 @@ export default defineComponent({
     watch(gridEnabled, () => {
       toggleLayerVisibility("grid");
     });
-    watch(() => props.id, () => {
-      loadData();
-    });
+    watch(
+      () => props.id,
+      () => {
+        loadData();
+      }
+    );
     onMounted(() => loadData());
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const parentGeoViewerRef: Ref<any> = ref(null);
@@ -169,7 +213,9 @@ export default defineComponent({
     const otherUsers = computed(() => Object.keys(otherUserAnnotations.value));
 
     const deleteChip = (item: string) => {
-      selectedUsers.value.splice(selectedUsers.value.findIndex((data) => data === item));
+      selectedUsers.value.splice(
+        selectedUsers.value.findIndex((data) => data === item)
+      );
       setSelectedUsers(selectedUsers.value);
     };
 
@@ -177,7 +223,13 @@ export default defineComponent({
       setSelectedUsers(selectedUsers.value);
     });
 
-    const processSelection = ({id, annotationType}: { id: number, annotationType: 'pulse' | 'sequence'}) => {
+    const processSelection = ({
+      id,
+      annotationType,
+    }: {
+      id: number;
+      annotationType: "pulse" | "sequence";
+    }) => {
       selectedId.value = id;
       selectedType.value = annotationType;
     };
@@ -233,10 +285,7 @@ export default defineComponent({
       <v-toolbar>
         <v-container>
           <v-row align="center">
-            <v-tooltip
-       
-              bottom
-            >
+            <v-tooltip bottom>
               <template #activator="{ props: subProps }">
                 <v-icon
                   v-bind="subProps"
@@ -246,11 +295,9 @@ export default defineComponent({
                   mdi-information-outline
                 </v-icon>
               </template>
-              <span>
-                Recording Information
-              </span>
+              <span> Recording Information </span>
             </v-tooltip>
- 
+
             <v-col cols="2">
               <div>
                 <b>Time:</b>
@@ -280,13 +327,15 @@ export default defineComponent({
               class="px-0"
               style="font-size: 20px"
             >
-              <div v-if="annotationState !== '' && annotationState !== 'disabled'">
+              <div
+                v-if="annotationState !== '' && annotationState !== 'disabled'"
+              >
                 <b>Mode:</b>
                 <span> {{ annotationState }}</span>
               </div>
             </v-col>
             <v-col
-              v-if="otherUsers.length && colorScale" 
+              v-if="otherUsers.length && colorScale"
               cols="3"
               class="ma-0 pa-0 pt-5"
             >
@@ -309,7 +358,7 @@ export default defineComponent({
                     text-color="gray"
                     @click:close="deleteChip(item.value)"
                   >
-                    {{ item.value.replace(/@.*/, '') }}
+                    {{ item.value.replace(/@.*/, "") }}
                   </v-chip>
                 </template>
               </v-select>