Address UI Feedback

client/src/App.vue

@@ -113,7 +113,7 @@ export default defineComponent({
         v-if="isNaBat"
         class="mx-3"
       >
-        NA Bat Spectrogram Viewer
+        NABat Spectrogram Viewer
       </h3>
       <v-spacer />
       <v-tooltip

client/src/components/RecordingAnnotationDetails.vue

@@ -52,7 +52,7 @@ export default defineComponent({
         <v-data-table
           :headers="[
             { title: 'Label', value: 'label', sortable: true },
-            { title: 'Value', value: 'value', sortable: true }
+            { title: 'Confidence', value: 'value', sortable: true }
           ]"
           :items="annotationData.confidences"
           :items-per-page="-1"

client/src/components/RecordingAnnotationEditor.vue

@@ -84,7 +84,7 @@ export default defineComponent({
 
     };
 
-    
+
 
     const deleteAnnotation = async () => {
       if (props.annotation && props.recordingId) {
@@ -108,7 +108,25 @@ export default defineComponent({
   <v-card>
     <v-card-title>
       <v-row class="pa-2">
-        Choose Labels
+        Choose Label
+        <v-tooltip
+          v-if="type === 'nabat'"
+          width="250"
+          right
+        >
+          <template #activator="{ props }">
+            <v-icon
+              v-bind="props"
+              size="x-small"
+            >
+              mdi-information
+            </v-icon>
+          </template>
+          <span>
+            Each user may only add one label per file. Once you have saved
+            your selection it may not be deleted.
+          </span>
+        </v-tooltip>
         <v-spacer />
         <v-btn
           v-if="type !== 'nabat'"
@@ -167,7 +185,7 @@ export default defineComponent({
           @change="updateAnnotation()"
         />
       </v-row>
-    </v-card-text> 
+    </v-card-text>
   </v-card>
 </template>
 

client/src/components/RecordingAnnotations.vue

@@ -38,15 +38,15 @@ export default defineComponent({
     const annotations: Ref<FileAnnotation[]> = ref([]);
     const detailsDialog = ref(false);
     const detailRecordingId = ref(-1);
-    const { configuration } = useState();
+    const { configuration, isNaBat } = useState();
 
     const setSelectedId = (annotation: FileAnnotation) => {
       selectedAnnotation.value = annotation;
     };
 
     const currentNaBatUser: Ref<string | null> = ref(null);
 
-    
+
 
     const loadFileAnnotations = async () => {
       if (props.type === 'nabat') {
@@ -116,6 +116,10 @@ export default defineComponent({
       return ( currentUserAnnotations.length > 0 && props.type === 'nabat');
     });
 
+    function getConfidenceLabelText(confidence: number) {
+      return `Confidence: ${confidence.toFixed(2)}`;
+    }
+
     return {
       selectedAnnotation,
       annotationState,
@@ -124,6 +128,8 @@ export default defineComponent({
       addAnnotation,
       updatedAnnotation,
       loadDetails,
+      getConfidenceLabelText,
+      isNaBat,
       detailsDialog,
       detailRecordingId,
       disableNaBatAnnotations,
@@ -135,12 +141,12 @@ export default defineComponent({
 
 <template>
   <div>
-    <v-row class="pa-2">
-      <v-col>
+    <v-row class="pa-4">
+      <v-col v-if="!isNaBat()">
         Annotations
       </v-col>
       <v-spacer />
-      <v-col>
+      <v-col v-if="!isNaBat() || !disableNaBatAnnotations">
         <v-btn
           :disabled="annotationState === 'creating' || disableNaBatAnnotations"
           @click="addAnnotation()"
@@ -172,7 +178,7 @@ export default defineComponent({
             </v-btn>
           </v-col>
           <v-col class="annotation-confidence">
-            <span>{{ annotation.confidence }} </span>
+            <span>{{ getConfidenceLabelText(annotation.confidence) }} </span>
           </v-col>
           <v-col class="annotation-model">
             <span>{{ annotation.model }} </span>

client/src/use/useState.ts

@@ -1,4 +1,5 @@
 import { ref, Ref, watch } from "vue";
+import { useRouter } from 'vue-router';
 import { cloneDeep } from "lodash";
 import * as d3 from "d3";
 import {
@@ -121,6 +122,17 @@ export default function useState() {
     configuration.value = (await getConfiguration()).data;
   }
 
+  /**
+   * Function used to determine whether or not we are currently looking
+   * at an NABat-specific view.
+   *
+   * returns `true` if looking at an NABat view, `false` otherwise
+   */
+  function isNaBat(): boolean {
+    const router = useRouter();
+    return router.currentRoute.value.fullPath.includes('nabat');
+  }
+
   return {
     annotationState,
     creationType,
@@ -137,6 +149,7 @@ export default function useState() {
     currentUser,
     setSelectedId,
     loadConfiguration,
+    isNaBat,
     // State Passing Elements
     annotations,
     configuration,