basic annotation rendering, beginning annotation editing

bats_ai/core/models/recording.py

@@ -34,7 +34,7 @@ def generate_spectrogram(self):
 
         # Plot and save the spectrogram
         plt.figure(figsize=(10, 4))
-        librosa.display.specshow(D, sr=sr, x_axis='time', y_axis='log')
+        librosa.display.specshow(D, sr=sr, x_axis='time', y_axis='linear')
         plt.colorbar(format='%+2.0f dB')
         plt.title('Spectrogram')
         plt.xlabel('Time')
@@ -49,4 +49,22 @@ def generate_spectrogram(self):
 
         plt.close()
 
-        return base64_image
+        start_time = 0.0
+        end_time = librosa.get_duration(y=y, sr=sr) * 1000  # in milliseconds
+        low_frequency = 0  # Set your desired low frequency
+        high_frequency = sr / 2  # Set your desired high frequency
+        image_width = 10 * 100  # 10 inches at 100 dpi
+        image_height = 4 * 100  # 4 inches at 100 dpi
+
+        # Return dictionary with all required fields
+        return {
+            'base64_spectrogram': base64_image,
+            'spectroInfo': {
+                'width': image_width,
+                'height': image_height,
+                'start_time': start_time,
+                'end_time': end_time,
+                'low_freq': low_frequency,
+                'high_freq': high_frequency,
+            },
+        }

bats_ai/core/views/annotations.py

@@ -0,0 +1,32 @@
+import logging
+
+from django.http import HttpRequest
+from ninja import Schema
+from ninja.errors import HttpError
+from ninja.pagination import RouterPaginated
+from oauth2_provider.models import AccessToken
+
+logger = logging.getLogger(__name__)
+
+
+router = RouterPaginated()
+
+
+class AnnotationSchema(Schema):
+    recording: int  # Foreign Key to index
+    owner_username: str
+    start_time: int
+    end_time: int
+    low_freq: int
+    high_freq: int
+    species: list[int]
+    comments: str
+
+
+def get_owner_id(request: HttpRequest):
+    token = request.headers.get('Authorization').replace('Bearer ', '')
+    token_found = AccessToken.objects.get(token=token)
+    if not token_found:
+        raise HttpError(401, 'Authentication credentials were not provided.')
+
+    return token_found.user.pk

bats_ai/core/views/recording.py

@@ -45,6 +45,7 @@ class AnnotationSchema(Schema):
     high_freq: int
     species: list[SpeciesSchema]
     comments: str
+    id: int
 
 
 def get_user(request: HttpRequest):
@@ -98,14 +99,22 @@ def get_recordings(request: HttpRequest):
 
 @router.get('/{id}/spectrogram')
 def get_spectrogram(request: HttpRequest, id: int):
+    user_id = get_user(request)
     try:
         recording = Recording.objects.get(pk=id)
     except Recording.DoesNotExist:
         return {'error': 'Recording not found'}
 
-    base64_spectrogram = recording.generate_spectrogram()
+    spectro_data = recording.generate_spectrogram()
+
+    annotations_qs = Annotations.objects.filter(recording=recording, owner=user_id)
 
-    return {'base64_spectrogram': base64_spectrogram}
+    # Serialize the annotations using AnnotationSchema
+    annotations_data = [
+        AnnotationSchema.from_orm(annotation).dict() for annotation in annotations_qs
+    ]
+    spectro_data['annotations'] = annotations_data
+    return spectro_data
 
 
 @router.get('/{id}/annotations')
@@ -118,7 +127,7 @@ def get_annotations(request: HttpRequest, id: int):
         return {'error': 'Recording not found'}
 
     # Query annotations associated with the recording
-    annotations_qs = Annotations.objects.filter(recording=recording)
+    annotations_qs = Annotations.objects.filter(recording=recording, owner=user_id)
 
     # Serialize the annotations using AnnotationSchema
     annotations_data = [

bats_ai/core/views/species.py

@@ -19,6 +19,7 @@ class SpeciesSchema(Schema):
     species: str | None
     common_name: str | None
     species_code_6: str | None
+    pk: int = None
 
 
 @router.get('/')

client/src/App.vue

@@ -1,11 +1,9 @@
 <script lang="ts">
-import { defineComponent, inject, computed, ref, watch } from 'vue';
+import { defineComponent, inject, computed, ref } from 'vue';
 import OAuthClient from '@girder/oauth-client';
-import { useRoute } from 'vue-router';
 
 export default defineComponent({
   setup() {
-    const route = useRoute();
     const oauthClient = inject<OAuthClient>('oauthClient');
     if (oauthClient === undefined) {
       throw new Error('Must provide "oauthClient" into component.');

client/src/api/api.ts

@@ -1,7 +1,5 @@
 import axios from 'axios';
-import { GeoJsonObject } from 'geojson';
-import { createS3ffClient } from '../plugins/S3FileField';
-import { S3FileFieldProgressCallback } from 'django-s3-file-field';
+import { SpectroInfo } from '../components/geoJS/geoJSUtils';
 
 export interface PaginatedResponse<E> {
     count: number,
@@ -50,7 +48,7 @@ export interface SpectrogramAnnotation {
     start_time: number;
     end_time: number;
     low_freq: number;
-    high_feq: number;
+    high_freq: number;
     id: number;
 }
 
@@ -60,6 +58,7 @@ export interface Spectrogram {
     url?: string;
     filename?: string;
     annotations?: SpectrogramAnnotation[];
+    spectroInfo?: SpectroInfo;
 
 }
 

client/src/components/SpectrogramViewer.vue

@@ -1,29 +1,45 @@
 <script lang="ts">
 import { defineComponent, PropType, ref, Ref, watch } from "vue";
-import geo, { GeoEvent } from "geojs";
-import { useGeoJS } from './geoJS/geoJSUtils';
+import { SpectroInfo, useGeoJS } from './geoJS/geoJSUtils';
+import { SpectrogramAnnotation } from "../api/api";
+import LayerManager from "./geoJS/LayerManager.vue";
 
 export default defineComponent({
   name: "SpectroViewer",
+  components: {
+    LayerManager
+  },
   props: {
     image: {
       type: Object as PropType<HTMLImageElement>,
       required: true,
     },
+    spectroInfo: {
+      type: Object as PropType<SpectroInfo | undefined>,
+      default: () => undefined,
+    },
+    annotations: {
+      type: Array as PropType<SpectrogramAnnotation[]>,
+      default: () => [],
+    }
   },
   setup(props) {
     const containerRef: Ref<HTMLElement | undefined> = ref();
     const geoJS = useGeoJS();
+    const initialized  = ref(false);
 
     watch(containerRef, () => {
-      const { width, height } = props.image;
+      const { naturalWidth, naturalHeight } = props.image;
       if (containerRef.value)
-      geoJS.initializeViewer(containerRef.value, width, height);
-      geoJS.drawImage(props.image, width, height);
+      geoJS.initializeViewer(containerRef.value, naturalWidth, naturalHeight);
+      geoJS.drawImage(props.image, naturalWidth, naturalHeight);
+      initialized.value = true;
     });
 
     return {
       containerRef,
+      geoViewerRef: geoJS.getGeoViewer(),
+      initialized,
     };
   },
 });
@@ -36,6 +52,12 @@ export default defineComponent({
       ref="containerRef"
       class="playback-container"
     />
+    <layer-manager
+      v-if="initialized"
+      :geo-viewer-ref="geoViewerRef"
+      :spectro-info="spectroInfo"
+      :annotations="annotations"
+    />
   </div>
 </template>
 
@@ -49,6 +71,7 @@ export default defineComponent({
   z-index: 0;
   width:100vw;
   height: 100vh;
+  background-color: black;
 
   display: flex;
   flex-direction: column;

client/src/components/UploadRecording.vue

@@ -1,6 +1,5 @@
 <script lang="ts">
 import { defineComponent, ref, Ref } from 'vue';
-import { S3FileFieldProgress, S3FileFieldProgressState } from 'django-s3-file-field';
 import { RecordingMimeTypes } from '../constants';
 import useRequest from '../use/useRequest';
 import { uploadRecordingFile } from '../api/api';
@@ -51,6 +50,7 @@ export default defineComponent({
       emit('done');
     });
 
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const updateTime = (time: any)  => {
     recordedDate.value = new Date(time as string).toISOString().split('T')[0];
   };

client/src/components/geoJS/LayerManager.vue

@@ -1,29 +1,38 @@
 <script lang="ts">
-import { defineComponent, PropType } from 'vue';
+import { defineComponent, onMounted, PropType } from 'vue';
+import { SpectrogramAnnotation } from '../../api/api';
 import { SpectroInfo } from './geoJSUtils';
 import RectangleLayer from './layers/rectangleLayer';
 
 export default defineComponent({
     name:'LayerManager',
     props: {
-        geoJSRef: {
+        geoViewerRef: {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             type: Object as PropType<any>,
             required: true,
         },
         spectroInfo: {
-            type: Object as PropType<SpectroInfo>,
-            required: true,
+            type: Object as PropType<SpectroInfo | undefined>,
+            default: () => undefined
+        },
+        annotations: {
+            type: Array as PropType<SpectrogramAnnotation[]>,
+            default: () => [],
         }
     },
     setup(props) {
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
         const event = (type: string, data: any) => {
             // Will handle clicking, selecting and editing here
-            //console.log(type);
-            //console.log(data);
         };
-        const rectAnnotationLayer = new RectangleLayer(props.geoJSRef, event, props.spectroInfo);
+        onMounted(() => {
+            if (props.spectroInfo) {
+                const rectAnnotationLayer = new RectangleLayer(props.geoViewerRef, event, props.spectroInfo);
+                rectAnnotationLayer.formatData(props.annotations);
+                rectAnnotationLayer.redraw();
+            }
+        });
 
         return {
             

client/src/components/geoJS/geoJSUtils.ts

@@ -16,6 +16,10 @@ const useGeoJS = () => {
         right: 1,
     };
 
+    const getGeoViewer = () => {
+        return geoViewer;
+    };
+
     const initializeViewer = (sourceContainer: HTMLElement, width: number, height: number) => {
         container.value = sourceContainer;
         const params = geo.util.pixelCoordinateParams(
@@ -137,6 +141,7 @@ const useGeoJS = () => {
     };
 
     return {
+        getGeoViewer,
         initializeViewer,
         drawImage,
         resetMapDimensions,
@@ -156,23 +161,22 @@ export interface SpectroInfo {
 }
 function spectroToGeoJSon(annotation: SpectrogramAnnotation, spectroInfo: SpectroInfo): GeoJSON.Polygon  {
     //scale pixels to time and frequency ranges
-    const widthScale =  spectroInfo.width / (spectroInfo.end_time - spectroInfo.start_time);
+    const widthScale =   spectroInfo.width / (spectroInfo.end_time - spectroInfo.start_time);
     const heightScale = spectroInfo.height / (spectroInfo.high_freq - spectroInfo.low_freq);
     // Now we remap our annotation to pixel coordinates
-    const low_freq = annotation.low_freq * heightScale;
-    const high_freq = annotation.high_feq * heightScale;
+    const low_freq = spectroInfo.height - (annotation.low_freq * heightScale);
+    const high_freq = spectroInfo.height - (annotation.high_freq * heightScale);
     const start_time = annotation.start_time * widthScale;
     const end_time = annotation.end_time * widthScale;
-
     return {
         type: 'Polygon',
-        coordinates: [
+        coordinates: [  
             [
-              [start_time, high_freq],
               [start_time, low_freq],
-              [end_time, low_freq],
-              [end_time, high_freq],
               [start_time, high_freq],
+              [end_time, high_freq],
+              [end_time, low_freq],
+              [start_time, low_freq],
             ],
           ],