Vetting progress UI (#293)

* Add settings for vetting

* Model submission status of recording annotations

* Add endpoint to get current user

* Show recording submission status in table view

* Don't filter out noise

The model can predict noise, so sorting it out of the species list can
lead to problems when loading/displaying that value in a list.

* Add endpoint to submit file-level annotations

* Allow submitting file annotations in interface

* Squash migrations

* Indicate when a file has been reviewed

* Format

* Show the current user's submitted label in sidebar

* Disable deletion for non-admin vetters

* Make 403 message more descriptive

* Show progress bar for submitted recordings

* Enable showing/hiding submitted recordings

* Toggle submitted recordings in sidebar

* Fix submission bug

Author: naglepuff

bats_ai/core/views/recording_annotation.py

@@ -201,7 +201,7 @@ def submit_recording_annotation(request: HttpRequest, id: int):
         annotation = RecordingAnnotation.objects.get(pk=id)
 
         # Check permission
-        if annotation.recording.owner != request.user:
+        if annotation.owner != request.user:
             raise HttpError(403, 'Permission denied.')
 
         annotation.submitted = True

client/src/components/RecordingList.vue

@@ -7,7 +7,15 @@ import  { EditingRecording } from './UploadRecording.vue';
 export default defineComponent({
   setup() {
 
-    const { sharedList, recordingList, currentUser, configuration } = useState();
+    const {
+      sharedList,
+      recordingList,
+      currentUser,
+      configuration,
+      showSubmittedRecordings,
+      myRecordingsDisplay,
+      sharedRecordingsDisplay,
+    } = useState();
     const editingRecording: Ref<EditingRecording | null> = ref(null);
 
     const fetchRecordings = async () => {
@@ -47,18 +55,27 @@ export default defineComponent({
         openPanel,
         userSubmittedAnnotation,
         configuration,
+        myRecordingsDisplay,
+        sharedRecordingsDisplay,
+        showSubmittedRecordings,
      };
   },
 });
 </script>
 
 <template>
   <v-expansion-panels v-model="openPanel">
+    <v-checkbox
+      v-if="configuration.mark_annotations_completed_enabled"
+      v-model="showSubmittedRecordings"
+      label="Show submitted recordings"
+      hide-details
+    />
     <v-expansion-panel>
       <v-expansion-panel-title>My Recordings</v-expansion-panel-title>
       <v-expansion-panel-text>
         <div
-          v-for="item in recordingList"
+          v-for="item in myRecordingsDisplay"
           :key="`public_${item.id}`"
         >
           <v-card class="pa-2 my-2">

client/src/use/useState.ts

@@ -1,4 +1,4 @@
-import { ref, Ref, watch } from "vue";
+import { computed, ref, Ref, watch } from "vue";
 import { useRouter } from 'vue-router';
 import { cloneDeep } from "lodash";
 import * as d3 from "d3";
@@ -158,6 +158,66 @@ export default function useState() {
     return router.currentRoute.value.fullPath.includes('nabat');
   }
 
+  const showSubmittedRecordings = ref(false);
+
+  const submittedMyRecordings = computed(() => {
+    const submittedByMe = recordingList.value.filter((recording: Recording) => {
+      const myAnnotations = recording.fileAnnotations.filter((annotation: FileAnnotation) => (
+        annotation.owner === currentUser.value && annotation.submitted
+      ));
+      return myAnnotations.length > 0;
+    });
+    return submittedByMe;
+  });
+
+  const submittedSharedRecordings = computed(() => {
+    const submittedByMe = sharedList.value.filter((recording: Recording) => {
+      const myAnnotations = recording.fileAnnotations.filter((annotation: FileAnnotation) => (
+        annotation.owner === currentUser.value && annotation.submitted
+      ));
+      return myAnnotations.length > 0;
+    });
+    return submittedByMe;
+  });
+
+  const unsubmittedMyRecordings = computed(() => {
+    const unsubmitted = recordingList.value.filter((recording: Recording) => {
+      const myAnnotations = recording.fileAnnotations.filter((annotation: FileAnnotation) => (
+        annotation.owner === currentUser.value && annotation.submitted
+      ));
+      return myAnnotations.length === 0;
+    });
+    return unsubmitted;
+  });
+
+  const unsubmittedSharedRecordings = computed(() => {
+    const unsubmitted = sharedList.value.filter((recording: Recording) => {
+      const myAnnotations = recording.fileAnnotations.filter((annotation: FileAnnotation) => (
+        annotation.owner === currentUser.value && annotation.submitted
+      ));
+      return myAnnotations.length === 0;
+    });
+    return unsubmitted;
+  });
+
+  // Use state to determine which recordings should be shown to the user
+  const myRecordingsDisplay = computed(() => {
+    if (!configuration.value.mark_annotations_completed_enabled) {
+      return recordingList.value;
+    } else {
+      return showSubmittedRecordings.value ? recordingList.value : unsubmittedMyRecordings.value;
+    }
+  });
+
+  const sharedRecordingsDisplay = computed(() => {
+    if (!configuration.value.mark_annotations_completed_enabled) {
+      return sharedList.value;
+    } else {
+      return showSubmittedRecordings.value ? sharedList.value : unsubmittedSharedRecordings.value;
+    }
+  });
+
+
 
   return {
     annotationState,
@@ -201,5 +261,12 @@ export default function useState() {
     scaledHeight,
     fixedAxes,
     toggleFixedAxes,
+    showSubmittedRecordings,
+    submittedMyRecordings,
+    submittedSharedRecordings,
+    unsubmittedMyRecordings,
+    unsubmittedSharedRecordings,
+    myRecordingsDisplay,
+    sharedRecordingsDisplay,
   };
 }

client/src/views/Recordings.vue

@@ -22,13 +22,13 @@ import RecordingAnnotationSummary from '@components/RecordingAnnotationSummary.v
 import { FilterFunction, InternalItem } from 'vuetify';
 
 export default defineComponent({
-    components: {
-        UploadRecording,
-        MapLocation,
-        BatchUploadRecording,
-        RecordingInfoDisplay,
-        RecordingAnnotationSummary,
-    },
+  components: {
+    UploadRecording,
+    MapLocation,
+    BatchUploadRecording,
+    RecordingInfoDisplay,
+    RecordingAnnotationSummary,
+  },
   setup() {
     const itemsPerPage = ref(-1);
     const {
@@ -38,6 +38,11 @@ export default defineComponent({
       currentUser,
       configuration,
       loadCurrentUser,
+      showSubmittedRecordings,
+      submittedMyRecordings,
+      submittedSharedRecordings,
+      myRecordingsDisplay,
+      sharedRecordingsDisplay,
     } = useState();
     const editingRecording: Ref<EditingRecording | null> = ref(null);
     let intervalRef: number | null = null;
@@ -231,6 +236,14 @@ export default defineComponent({
       }
     }
 
+    const recordingListStyles = computed(() => {
+      const sectionHeight = configuration.value.mark_annotations_completed_enabled ? '35vh' : '40vh';
+      return {
+        'height': sectionHeight,
+        'max-height': sectionHeight,
+      };
+    });
+
     onMounted(async () => {
       await loadCurrentUser();
       await fetchRecordingTags();
@@ -308,6 +321,12 @@ export default defineComponent({
         dataLoading,
         submittedForCurrentUser,
         configuration,
+        submittedMyRecordings,
+        submittedSharedRecordings,
+        recordingListStyles,
+        showSubmittedRecordings,
+        myRecordingsDisplay,
+        sharedRecordingsDisplay,
      };
   },
 });
@@ -321,26 +340,35 @@ export default defineComponent({
           My Recordings
         </div>
         <v-spacer />
-        <v-menu>
-          <template #activator="{ props }">
-            <v-btn
-              color="primary"
-              v-bind="props"
-            >
-              Upload <v-icon>mdi-chevron-down</v-icon>
-            </v-btn>
-          </template>
-          <v-list>
-            <v-list-item @click="uploadDialog=true">
-              <v-list-item-title>Upload Recording</v-list-item-title>
-            </v-list-item>
-            <v-list-item @click="batchUploadDialog=true">
-              <v-list-item-title>
-                Batch Upload
-              </v-list-item-title>
-            </v-list-item>
-          </v-list>
-        </v-menu>
+        <div class="d-flex justify-center align-center">
+          <v-checkbox
+            v-if="configuration.mark_annotations_completed_enabled"
+            v-model="showSubmittedRecordings"
+            class="mr-4"
+            label="Show submitted recordings"
+            hide-details
+          />
+          <v-menu>
+            <template #activator="{ props }">
+              <v-btn
+                color="primary"
+                v-bind="props"
+              >
+                Upload <v-icon>mdi-chevron-down</v-icon>
+              </v-btn>
+            </template>
+            <v-list>
+              <v-list-item @click="uploadDialog=true">
+                <v-list-item-title>Upload Recording</v-list-item-title>
+              </v-list-item>
+              <v-list-item @click="batchUploadDialog=true">
+                <v-list-item-title>
+                  Batch Upload
+                </v-list-item-title>
+              </v-list-item>
+            </v-list>
+          </v-menu>
+        </div>
       </v-row>
     </v-card-title>
     <v-card-text>
@@ -372,13 +400,14 @@ export default defineComponent({
       <v-data-table
         v-model:items-per-page="itemsPerPage"
         :headers="headers"
-        :items="recordingList"
+        :items="myRecordingsDisplay"
         :custom-filter="tagFilter"
         filter-keys="['tag']"
         :search="filterTags.length ? 'seach-active' : ''"
         density="compact"
         :loading="dataLoading"
         class="elevation-1 my-recordings"
+        :style="recordingListStyles"
       >
         <template #top>
           <div max-height="100px">
@@ -524,6 +553,21 @@ export default defineComponent({
         </template>
         <template #bottom />
       </v-data-table>
+      <div
+        v-if="recordingList.length && configuration.mark_annotations_completed_enabled"
+        class="d-flex justify-center align-center"
+      >
+        <v-progress-linear
+          height="10"
+          color="success"
+          :model-value="submittedMyRecordings.length"
+          min="0"
+          :max="recordingList.length"
+        />
+        <span class="ml-4 text-h6">
+          ({{ submittedMyRecordings.length }}/{{ recordingList.length }})
+        </span>
+      </div>
     </v-card-text>
     <v-dialog
       v-model="uploadDialog"
@@ -557,13 +601,14 @@ export default defineComponent({
       <v-data-table
         v-model:items-per-page="itemsPerPage"
         :headers="sharedHeaders"
-        :items="sharedList"
+        :items="sharedRecordingsDisplay"
         :custom-filter="sharedTagFilter"
         filter-keys="['tag']"
         :search="sharedFilterTags.length ? 'seach-active' : ''"
         :loading="dataLoading"
         density="compact"
         class="elevation-1 shared-recordings"
+        :style="recordingListStyles"
       >
         <template #top>
           <div max-height="100px">
@@ -683,19 +728,30 @@ export default defineComponent({
         </template>
         <template #bottom />
       </v-data-table>
+      <div
+        v-if="sharedList.length && configuration.mark_annotations_completed_enabled"
+        class="d-flex justify-center align-center"
+      >
+        <v-progress-linear
+          height="10"
+          color="success"
+          :model-value="submittedSharedRecordings.length"
+          min="0"
+          :max="sharedList.length"
+        />
+        <span class="ml-4 text-h6">
+          ({{ submittedSharedRecordings.length }}/{{ sharedList.length }})
+        </span>
+      </div>
     </v-card-text>
   </v-card>
 </template>
 
 <style scoped>
 .my-recordings {
-  height: 40vh;
-  max-height: 40vh;
   overflow-y:scroll;
 }
 .shared-recordings {
-  height: 40vh;
-  max-height: 40vh;
   overflow-y:scroll;
 }
 </style>