UI-Improvements/Fixes (#137)

* non-compressed X-axis highlight, zooming legend fix, 2.5x default compressed

* cursor time compressed fix, axis length fix, edit column reorder in Recordings

* recording annotation details

* removing some commented out emits

* remove footer from details for inference annotations

* reference the outputs.tags instead of outputs.results

Author: BryonLewis

.github/workflows/cd.yaml

@@ -50,4 +50,4 @@ jobs:
           context: .
           platforms: linux/amd64
           push: true
-          tags: ${{ steps.image-tags.outputs.result }}
+          tags: ${{ steps.image-tags.outputs.tags }}

bats_ai/core/views/recording.py

@@ -69,6 +69,7 @@ class RecordingAnnotationSchema(Schema):
     owner: str
     confidence: float
     id: int | None = None
+    hasDetails: bool
 
     @classmethod
     def from_orm(cls, obj: RecordingAnnotation, **kwargs):
@@ -79,6 +80,7 @@ def from_orm(cls, obj: RecordingAnnotation, **kwargs):
             comments=obj.comments,
             model=obj.model,
             id=obj.pk,
+            hasDetails=obj.additional_data is not None,
         )
 
 

bats_ai/core/views/recording_annotation.py

@@ -20,6 +20,7 @@ class RecordingAnnotationSchema(Schema):
     owner: str
     confidence: float
     id: int | None = None
+    hasDetails: bool
 
     @classmethod
     def from_orm(cls, obj: RecordingAnnotation, **kwargs):
@@ -30,6 +31,31 @@ def from_orm(cls, obj: RecordingAnnotation, **kwargs):
             comments=obj.comments,
             model=obj.model,
             id=obj.pk,
+            hasDetails=obj.additional_data is not None,
+        )
+
+
+class RecordingAnnotationDetailsSchema(Schema):
+    species: list[SpeciesSchema] | None
+    comments: str | None = None
+    model: str | None = None
+    owner: str
+    confidence: float
+    id: int | None = None
+    details: dict
+    hasDetails: bool
+
+    @classmethod
+    def from_orm(cls, obj: RecordingAnnotation, **kwargs):
+        return cls(
+            species=[SpeciesSchema.from_orm(species) for species in obj.species.all()],
+            owner=obj.owner.username,
+            confidence=obj.confidence,
+            comments=obj.comments,
+            model=obj.model,
+            hasDetails=obj.additional_data is not None,
+            details=obj.additional_data,
+            id=obj.pk,
         )
 
 
@@ -62,6 +88,20 @@ def get_recording_annotation(request: HttpRequest, id: int):
         raise HttpError(404, 'Recording annotation not found.')
 
 
+@router.get('/{id}/details', response=RecordingAnnotationDetailsSchema)
+def get_recording_annotation_details(request: HttpRequest, id: int):
+    try:
+        annotation = RecordingAnnotation.objects.get(pk=id)
+
+        # Check permission
+        if annotation.recording.owner != request.user and not annotation.recording.public:
+            raise HttpError(403, 'Permission denied.')
+
+        return RecordingAnnotationDetailsSchema.from_orm(annotation).dict()
+    except RecordingAnnotation.DoesNotExist:
+        raise HttpError(404, 'Recording annotation not found.')
+
+
 @router.put('/', response={200: str})
 def create_recording_annotation(request: HttpRequest, data: CreateRecordingAnnotationSchema):
     try:

client/src/api/api.ts

@@ -115,9 +115,15 @@ export interface FileAnnotation {
     model?: string;
     owner: string;
     confidence: number;
+    hasDetails: boolean;
     id: number;
 }
 
+export interface FileAnnotationDetails {
+    label: string;
+    score: number;
+    confidences: { label: string, value: string}[];
+}
 export interface UpdateFileAnnotation {
     recordingId?: number;
     species: number[] | null;
@@ -330,6 +336,10 @@ async function getFileAnnotations(recordingId: number) {
     return axiosInstance.get<FileAnnotation[]>(`recording/${recordingId}/recording-annotations`);
 }
 
+async function getFileAnnotationDetails(recordingId: number) {
+    return axiosInstance.get<(FileAnnotation & {details: FileAnnotationDetails })>(`recording-annotation/${recordingId}/details`);
+
+}
 
 async function putFileAnnotation(fileAnnotation: UpdateFileAnnotation) {
     return axiosInstance.put<{message: string, id: number}>(`/recording-annotation/`, { ...fileAnnotation });
@@ -421,4 +431,5 @@ export {
  deleteFileAnnotation,
  getConfiguration,
  patchConfiguration,
+ getFileAnnotationDetails,
 };

client/src/components/RecordingAnnotationDetails.vue

@@ -0,0 +1,61 @@
+<script lang="ts">
+import { defineComponent, ref, onMounted, PropType } from 'vue';
+import { FileAnnotationDetails, getFileAnnotationDetails } from '../api/api';
+
+export default defineComponent({
+  props: {
+    recordingId: {
+      type: Number as PropType<number>,
+      required: true,
+    },
+  },
+  emits: ['close'],
+  setup(props, { emit }) {
+    const annotationData = ref<FileAnnotationDetails | null>(null);
+    const loading = ref(true);
+
+    onMounted(async () => {
+      try {
+        const response = await getFileAnnotationDetails(props.recordingId);
+        annotationData.value = response.data.details;
+      } catch (error) {
+        console.error('Error fetching annotation details:', error);
+      } finally {
+        loading.value = false;
+      }
+    });
+
+    return { annotationData, loading, emit };
+  },
+});
+</script>
+
+<template>
+  <v-card v-if="annotationData">
+    <v-card-title>
+      <v-row dense>
+        Annotation Details
+        <v-spacer />
+        <v-icon @click="$emit('close')">
+          mdi-close
+        </v-icon>
+      </v-row>
+    </v-card-title>
+    <v-card-text>
+      <div>
+        <h3>{{ annotationData.label }} (Score: {{ annotationData.score.toFixed(2) }})</h3>
+        <v-data-table
+          :headers="[
+            { title: 'Label', value: 'label', sortable: true },
+            { title: 'Value', value: 'value', sortable: true }
+          ]"
+          :items="annotationData.confidences"
+          :items-per-page="-1"
+          density="compact"
+        >
+          <template #bottom />
+        </v-data-table>
+      </div>
+    </v-card-text>
+  </v-card>
+</template>

client/src/components/RecordingAnnotationEditor.vue

@@ -34,14 +34,14 @@ export default defineComponent({
 
     const speciesEdit: Ref<string[]> = ref( props.annotation?.species?.map((item) => item.species_code || item.common_name) || []);
     const comments: Ref<string> = ref(props.annotation?.comments || '');
-    const confidence: Ref<number> = ref(1.0);
+    const confidence: Ref<number> = ref(props.annotation?.confidence || 1.0);
 
     watch(() => props.annotation, () => {
         if (props.annotation?.species) {
             speciesEdit.value = props.annotation.species.map((item) => item.species_code || item.common_name);
         }
-        if (props.annotation?.comments) {
-            comments.value = props.annotation.comments;
+        if (props.annotation) {
+            comments.value = props.annotation.comments || '';
         }
         if (props.annotation) {
             confidence.value = props.annotation.confidence;

client/src/components/RecordingAnnotations.vue

@@ -3,10 +3,12 @@ import { defineComponent, onMounted, PropType, Ref } from "vue";
 import { ref } from "vue";
 import { FileAnnotation, getFileAnnotations, putFileAnnotation, Species, UpdateFileAnnotation } from "../api/api";
 import RecordingAnnotationEditor from "./RecordingAnnotationEditor.vue";
+import RecordingAnnotationDetails from "./RecordingAnnotationDetails.vue";
 export default defineComponent({
   name: "AnnotationList",
   components: {
     RecordingAnnotationEditor,
+    RecordingAnnotationDetails,
   },
   props: {
     species: {
@@ -23,6 +25,8 @@ export default defineComponent({
     const selectedAnnotation: Ref<null | FileAnnotation> = ref(null);
     const annotationState: Ref<'creating' | 'editing' | null> = ref(null);
     const annotations: Ref<FileAnnotation[]> = ref([]);
+    const detailsDialog = ref(false);
+    const detailRecordingId = ref(-1);
 
     const setSelectedId = (annotation: FileAnnotation) => {
       selectedAnnotation.value = annotation;
@@ -63,13 +67,21 @@ export default defineComponent({
       }
     };
 
+    const loadDetails = async (id: number) => {
+      detailRecordingId.value = id;
+      detailsDialog.value = true;
+    };
+
     return {
       selectedAnnotation,
       annotationState,
       annotations,
       setSelectedId,
       addAnnotation,
       updatedAnnotation,
+      loadDetails,
+      detailsDialog,
+      detailRecordingId,
     };
   },
 });
@@ -103,7 +115,14 @@ export default defineComponent({
       >
         <v-row>
           <v-col class="annotation-owner">
-            <span>{{ annotation.owner }}</span>
+            <div>{{ annotation.owner }}</div>
+            <v-btn
+              v-if="annotation.hasDetails"
+              size="small"
+              @click.stop.prevent="loadDetails(annotation.id)"
+            >
+              Details
+            </v-btn>
           </v-col>
           <v-col class="annotation-confidence">
             <span>{{ annotation.confidence }} </span>
@@ -142,6 +161,15 @@ export default defineComponent({
       @update:annotation="updatedAnnotation()"
       @delete:annotation="updatedAnnotation(true)"
     />
+    <v-dialog
+      v-model="detailsDialog"
+      width="600"
+    >
+      <RecordingAnnotationDetails
+        :recording-id="detailRecordingId"
+        @close="detailsDialog = false"
+      />
+    </v-dialog>
   </div>
 </template>