basic adding/editing user based file level annotations

client/src/api/api.ts

@@ -119,7 +119,7 @@ export interface FileAnnotation {
 
 export interface UpdateFileAnnotation {
     recordingId?: number;
-    species_list: number[] | null;
+    species: number[] | null;
     comments?: string;
     model?: string;
     confidence: number;
@@ -336,11 +336,11 @@ async function getFileAnnotations(recordingId: number) {
 
 
 async function putFileAnnotation(fileAnnotation: UpdateFileAnnotation) {
-    return axiosInstance.put<{message: string, id: number}>(`/recording-annotation`, { fileAnnotation });
+    return axiosInstance.put<{message: string, id: number}>(`/recording-annotation/`, { ...fileAnnotation });
 }
 
 async function patchFileAnnotation(fileAnnotationId: number, fileAnnotation: UpdateFileAnnotation) {
-    return axiosInstance.patch<{message: string, id: number}>(`/recording-annotation/${fileAnnotationId}`, { fileAnnotation });
+    return axiosInstance.patch<{message: string, id: number}>(`/recording-annotation/${fileAnnotationId}`, { ...fileAnnotation });
 }
 
 async function deleteFileAnnotation(fileAnnotationId: number) {

client/src/components/AnnotationList.vue

@@ -33,7 +33,7 @@ export default defineComponent({
   emits: ['select', 'update:annotation', 'delete:annotation'],
   setup() {
     const { creationType, annotationState, setAnnotationState, annotations, temporalAnnotations, selectedId, selectedType, setSelectedId, sideTab } = useState();
-    const tab = ref('pulse');
+    const tab = ref('recording');
     const scrollToId = (id: number) => {
     const el = document.getElementById(`annotation-${id}`);
     if (el) {

client/src/components/RecordingAnnotationEditor.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
 import { computed, defineComponent, PropType, ref, Ref, watch } from "vue";
 import { SpectroInfo } from './geoJS/geoJSUtils';
-import { deleteAnnotation, deleteFileAnnotation, deleteTemporalAnnotation, FileAnnotation, patchAnnotation, patchTemporalAnnotation, Species, SpectrogramAnnotation, SpectrogramTemporalAnnotation } from "../api/api";
+import { deleteAnnotation, deleteFileAnnotation, deleteTemporalAnnotation, FileAnnotation, patchAnnotation, patchFileAnnotation, patchTemporalAnnotation, Species, SpectrogramAnnotation, SpectrogramTemporalAnnotation, UpdateFileAnnotation } from "../api/api";
 import useState from "../use/useState";
 import SpeciesInfo from "./SpeciesInfo.vue";
 export default defineComponent({
@@ -58,12 +58,16 @@ export default defineComponent({
                     speciesIds.push(found.id);
                 }
             });
-            const updateType = type.value.join('+');
-            if (selectedType.value === 'pulse') {
-              await patchAnnotation(props.recordingId, props.annotation?.id, { ...props.annotation, comments: comments.value, confidence: confidence.value }, speciesIds );
-            } else if (selectedType.value === 'sequence') {
-              await patchTemporalAnnotation(props.recordingId, props.annotation.id, {...props.annotation, comments: comments.value, type: updateType }, speciesIds);
-            }
+
+            const updateAnnotation: UpdateFileAnnotation = {
+              recordingId: props.recordingId,
+              comments: comments.value,
+              confidence: confidence.value,
+              model: 'User Defined',
+              species: speciesIds,
+              id: props.annotation.id,
+            };
+            await patchFileAnnotation(props.annotation.id, updateAnnotation);
             // Signal to redownload the updated annotation values if possible
             emit('update:annotation');
         }
@@ -79,6 +83,7 @@ export default defineComponent({
     return {
         speciesList,
         speciesEdit,
+        confidence,
         comments,
         updateAnnotation,
         deleteAnno
@@ -122,6 +127,16 @@ export default defineComponent({
           @update:model-value="updateAnnotation()"
         />
       </v-row>
+      <v-row>
+        <v-slider
+          v-model="confidence"
+          min="0"
+          max="1"
+          step="0.01"
+          :label="`Confidence (${confidence.toFixed(2)})`"
+          @end="updateAnnotation()"
+        />
+      </v-row>
       <v-row>
         <v-textarea
           v-model="comments"

client/src/components/RecordingAnnotations.vue

@@ -13,12 +13,12 @@ export default defineComponent({
   },
   props: {
     species: {
-        type: Array as PropType<Species[]>,
-        required: true,
+      type: Array as PropType<Species[]>,
+      required: true,
     },
     recordingId: {
-        type: Number,
-        required: true,
+      type: Number,
+      required: true,
     }
   },
   emits: [],
@@ -40,30 +40,30 @@ export default defineComponent({
     const addAnnotation = async () => {
       const newAnnotation: UpdateFileAnnotation = {
         recordingId: props.recordingId,
-        species_list: [],
-    comments: '',
-    model: 'User Defined',
-    confidence: 1.0,
+        species: [],
+        comments: '',
+        model: 'User Defined',
+        confidence: 1.0,
 
       };
       await putFileAnnotation(newAnnotation);
       await loadFileAnnotations();
       if (annotations.value.length) {
-        setSelectedId(annotations.value[annotations.value.length-1]);
+        setSelectedId(annotations.value[annotations.value.length - 1]);
       }
     };
 
-    const updatedAnnotation = async (deleted=false) => {
-     annotations.value = (await getFileAnnotations(props.recordingId)).data;
-     if (selectedAnnotation.value) {
-      const found = annotations.value.find((item) => selectedAnnotation.value?.id === item.id);
-      if (found) {
-        selectedAnnotation.value = found;
+    const updatedAnnotation = async (deleted = false) => {
+      annotations.value = (await getFileAnnotations(props.recordingId)).data;
+      if (selectedAnnotation.value) {
+        const found = annotations.value.find((item) => selectedAnnotation.value?.id === item.id);
+        if (found) {
+          selectedAnnotation.value = found;
+        }
+      }
+      if (deleted) {
+        selectedAnnotation.value = null;
       }
-     }
-     if (deleted) {
-      selectedAnnotation.value = null;
-     }
     };
 
     return {
@@ -88,7 +88,7 @@ export default defineComponent({
       <v-col>
         <v-btn
           :disabled="annotationState === 'creating'"
-          @click="addAnnotation;"
+          @click="addAnnotation()"
         >
           Add<v-icon>mdi-plus</v-icon>
         </v-btn>
@@ -100,7 +100,7 @@ export default defineComponent({
         v-for="annotation in annotations"
         :id="`annotation-${annotation.id}`"
         :key="annotation.id"
-        :class="{selected: annotation.id===selectedAnnotation?.id}"
+        :class="{ selected: annotation.id === selectedAnnotation?.id }"
         class="annotation-item"
         @click="setSelectedId(annotation)"
       >
@@ -143,45 +143,53 @@ export default defineComponent({
       :annotation="selectedAnnotation"
       class="mt-4"
       @update:annotation="updatedAnnotation()"
-      @delete:annotation="updatedAnnotation()"
+      @delete:annotation="updatedAnnotation(true)"
     />
   </div>
 </template>
 
 <style lang="scss" scoped>
 .annotation-id {
-    cursor:pointer;
-    text-decoration: underline;
+  cursor: pointer;
+  text-decoration: underline;
 }
+
 .annotation-owner {
-    font-size: 1em;
+  font-size: 1em;
 }
+
 .annotation-confidence {
-    font-size: 1em;
+  font-size: 1em;
 }
+
 .annotation-model {
-    font-size: 1em;
+  font-size: 1em;
 }
+
 .annotation-item {
   border: 1px solid gray;
 }
+
 .species-name {
-    font-weight: bold;
-    font-size: 1em;
+  font-weight: bold;
+  font-size: 1em;
 }
+
 .species-hierarchy {
-    font-size: 0.75em;
+  font-size: 0.75em;
 }
+
 .selected {
-    background-color: cyan;
+  background-color: cyan;
 }
+
 .annotation-list {
   max-height: 60vh;
   overflow-y: auto;
 }
+
 .recording-list {
   max-height: 85vh;
   overflow-y: auto;
 }
-
 </style>