Editing Annotations

bats_ai/core/views/recording.py

@@ -48,6 +48,16 @@ class AnnotationSchema(Schema):
     id: int
 
 
+class UpdateAnnotationsSchema(Schema):
+    start_time: int | None
+    end_time: int | None
+    low_freq: int | None
+    high_freq: int | None
+    species: list[SpeciesSchema] | None
+    comments: str | None
+    id: int | None
+
+
 def get_user(request: HttpRequest):
     auth_header = request.headers.get('Authorization', None)
     if auth_header is not None:
@@ -179,7 +189,7 @@ def patch_annotation(
     request,
     recording_id: int,
     id: int,
-    annotation: AnnotationSchema,
+    annotation: UpdateAnnotationsSchema,
     species_ids: list[int],
 ):
     user_id = get_user(request)
@@ -193,11 +203,16 @@ def patch_annotation(
         return {'error': 'Annotation not found'}
 
     # Update annotation details
-    annotation_instance.start_time = annotation.start_time
-    annotation_instance.end_time = annotation.end_time
-    annotation_instance.low_freq = annotation.low_freq
-    annotation_instance.high_freq = annotation.high_freq
-    annotation_instance.comments = annotation.comments
+    if annotation.start_time:
+        annotation_instance.start_time = annotation.start_time
+    if annotation.end_time:
+        annotation_instance.end_time = annotation.end_time
+    if annotation.low_freq:
+        annotation_instance.low_freq = annotation.low_freq
+    if annotation.high_freq:
+        annotation_instance.high_freq = annotation.high_freq
+    if annotation.comments:
+        annotation_instance.comments = annotation.comments
     annotation_instance.save()
 
     # Clear existing species associations

client/package.json

@@ -21,13 +21,15 @@
     "d3": "^7.8.5",
     "django-s3-file-field": "^1.0.0",
     "geojs": "^1.11.1",
+    "lodash": "^4.17.21",
     "vue": "^3.3.1",
     "vue-router": "^4.0.12",
     "vuetify": "^3.3.12"
   },
   "devDependencies": {
     "@types/geojson": "^7946.0.13",
     "@types/jest": "^27.4.1",
+    "@types/lodash": "^4.14.202",
     "@vitejs/plugin-vue": "^2.2.0",
     "@vue/eslint-config-typescript": "^10.0.0",
     "@vuetify/vite-plugin": "^1.0.0-alpha.10",

client/src/api/api.ts

@@ -42,6 +42,7 @@
     genus: string;
     common_name: string;
     species_code_6?: string;
+    id: number;
 }
 
 export interface SpectrogramAnnotation {
@@ -50,8 +51,21 @@
     low_freq: number;
     high_freq: number;
     id: number;
+    editing?: boolean;
+    species?: Species[];
+    comments?: string;
 }
 
+export interface UpdateSpectrogramAnnotation {
+    start_time?: number;
+    end_time?: number;
+    low_freq?: number;
+    high_freq?: number;
+    id?: number;
+    editing?: boolean;
+    species?: Species[];
+    comments?: string;
+}
 
 export interface Spectrogram {
     'base64_spectrogram': string;
@@ -62,7 +76,7 @@
 
 }
 
 interface PaginatedNinjaResponse<T> {
     count: number,
     items: T[],
 }
@@ -106,9 +120,34 @@
     return axiosInstance.get<Spectrogram>(`/recording/${id}/spectrogram`);
 }
 
+async function getAnnotations(recordingId: string) {
+    return axiosInstance.get<SpectrogramAnnotation[]>(`/recording/${recordingId}/annotations`);
+
+}
+
+async function getSpecies() {
+    return axiosInstance.get<Species[]>('/species/');
+}
+
+async function patchAnnotation(recordingId: string, annotationId: number, annotation: UpdateSpectrogramAnnotation, speciesList: number[] = []) {
+    return axiosInstance.patch(`/recording/${recordingId}/annotations/${annotationId}`, { annotation, species_ids: speciesList});
+}
+
+async function putAnnotation(recordingId: string, annotation: UpdateSpectrogramAnnotation, speciesList: number[] = []) {
+    return axiosInstance.put<{message: string, id: number}>(`/recording/${recordingId}/annotations`, { annotation, species_ids: speciesList});
+}
+
+async function deleteAnnotation(recordingId: string, annotationId: number) {
+    return axiosInstance.delete(`/recording/${recordingId}/annotations/${annotationId}`);
+}
 
 export {
  uploadRecordingFile,
  getRecordings,
  getSpectrogram,
+ getSpecies,
+ getAnnotations,
+ patchAnnotation,
+ putAnnotation,
+ deleteAnnotation
 };

client/src/components/AnnotationEditor.vue

@@ -0,0 +1,116 @@
+<script lang="ts">
+import { computed, defineComponent, PropType, ref, Ref, watch } from "vue";
+import { SpectroInfo } from './geoJS/geoJSUtils';
+import { deleteAnnotation, patchAnnotation, Species, SpectrogramAnnotation } from "../api/api";
+
+export default defineComponent({
+  name: "AnnotationEditor",
+  components: {
+  },
+  props: {
+    spectroInfo: {
+      type: Object as PropType<SpectroInfo | undefined>,
+      default: () => undefined,
+    },
+    annotation: {
+      type: Object as PropType<SpectrogramAnnotation | null>,
+      default: () => null,
+    },
+    species: {
+        type: Array as PropType<Species[]>,
+        required: true,
+    },
+    recordingId: {
+        type: String,
+        required: true,
+    }
+  },
+  emits: ['update:annotation', 'delete:annotation'],
+  setup(props, { emit }) {
+    const speciesList = computed(() => {
+        return props.species.map((item) => (item.common_name));
+    });
+    const speciesEdit: Ref<string[]> = ref( props.annotation?.species?.map((item) => item.common_name) || []);
+    const comments: Ref<string> = ref(props.annotation?.comments || '');
+    watch(() => props.annotation, () => {
+        if (props.annotation?.species) {
+            speciesEdit.value = props.annotation.species.map((item) => item.common_name);
+        }
+        if (props.annotation?.comments) {
+            comments.value = props.annotation.comments;
+        }
+    });
+    const updateAnnotation = async () => {
+        if (props.annotation) {
+            // convert species names to Ids;
+            const speciesIds: number[] = [];
+            speciesEdit.value.forEach((item) => {
+                const found = props.species.find((specie) => specie.common_name === item);
+                if (found) {
+                    speciesIds.push(found.id);
+                }
+            });
+            await patchAnnotation(props.recordingId, props.annotation?.id, { ...props.annotation, comments: comments.value }, speciesIds );
+            // Signal to redownload the updated annotation values if possible
+            emit('update:annotation');
+        }
+
+    };
+
+    const deleteAnno = async () => {
+        if (props.annotation && props.recordingId) {
+            await deleteAnnotation(props.recordingId, props.annotation.id);
+            emit('delete:annotation');
+        }
+    };
+    return {
+        speciesList,
+        speciesEdit,
+        comments,
+        updateAnnotation,
+        deleteAnno
+    };
+  },
+});
+</script>
+
+<template>
+  <v-card>
+    <v-card-title>
+      <v-row class="pa-2">
+        Edit Annotations
+        <v-spacer />
+        <v-btn
+          size="x-small"
+          color="error"
+          class="mt-1"
+          @click="deleteAnno()"
+        >
+          Delete<v-icon>mdi-delete</v-icon>
+        </v-btn>
+      </v-row>
+    </v-card-title>
+    <v-row>
+      <v-select
+        v-model="speciesEdit"
+        multiple
+        closable-chips
+        chips
+        :items="speciesList"
+        label="Species"
+        @update:model-value="updateAnnotation()"
+      />
+    </v-row>
+    <v-row>
+      <v-textarea
+        v-model="comments"
+        label="Comments"
+        @change="updateAnnotation()"
+      />
+    </v-row>
+  </v-card>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

client/src/components/AnnotationList.vue

@@ -0,0 +1,115 @@
+<script lang="ts">
+import { defineComponent, PropType } from "vue";
+import { SpectroInfo } from './geoJS/geoJSUtils';
+import { SpectrogramAnnotation } from "../api/api";
+import useState from "../use/useState";
+
+export default defineComponent({
+  name: "AnnotationList",
+  components: {
+  },
+  props: {
+    spectroInfo: {
+      type: Object as PropType<SpectroInfo | undefined>,
+      default: () => undefined,
+    },
+    annotations: {
+      type: Array as PropType<SpectrogramAnnotation[]>,
+      default: () => [],
+    },
+    selectedId: {
+        type: Number as PropType<number | null>,
+        default: null,
+    }
+  },
+  emits: ['select'],
+  setup() {
+    const { annotationState, setAnnotationState } = useState();
+    return {
+        annotationState,
+        setAnnotationState,
+    };
+  },
+});
+</script>
+
+<template>
+  <v-card class="pa-0 ma-0">
+    <v-card-title>
+      <v-row class="pa-2">
+        Annotations
+        <v-spacer />
+        <v-btn
+          :disabled="annotationState === 'creating'"
+          @click="annotationState = 'creating'"
+        >
+          Add<v-icon>mdi-plus</v-icon>
+        </v-btn>
+      </v-row>
+    </v-card-title>
+    <v-list>
+      <v-list-item
+        v-for="annotation in annotations"
+        :key="annotation.id"
+        :class="{selected: annotation.id===selectedId}"
+        class="d-flex flex-column align-start"
+        @click="$emit('select', annotation.id)"
+      >
+        <v-row>
+          <v-col
+            class="annotation-id"
+          >
+            {{ annotation.id }}
+          </v-col>
+          <v-col class="annotation-time">
+            <span>{{ annotation.start_time }}ms to {{ annotation.end_time }}ms </span>
+          </v-col>
+          <v-col class="annotation-freq">
+            <span>{{ annotation.low_freq }}hz to {{ annotation.high_freq }}hz </span>
+          </v-col>
+        </v-row>
+        <v-row
+          v-for="item in annotation.species"
+          :key="`${annotation.id}_${item.common_name}`"
+        >
+          <v-col>
+            <div class="species-name">
+              {{ 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>
+</template>
+
+<style lang="scss" scoped>
+.annotation-id {
+    cursor:pointer;
+    text-decoration: underline;
+}
+.annotation-time {
+    font-size: 0.7em;
+}
+.annotation-freq {
+    font-size: 0.7em;
+}
+.species-name {
+    font-weight: bold;
+    font-size: 0.7em;
+}
+.species-hierarchy {
+    font-size: 0.5em;
+}
+.selected {
+    background-color: cyan;
+}
+</style>