Use tags to get next/prev unreviewed files (#363)

* Make tags available to all components

* Pass current tags to unreviewed neighbor endpoint

* Use tags for sidebar recording list

* Simplify next/prev filter by tag logic

* Indicate when a tag filter is active

* Add tag text template to shared list

Author: naglepuff

client/src/App.vue

@@ -21,6 +21,7 @@ export default defineComponent({
       configuration ,
       loadCurrentUser,
       loadReviewerMaterials,
+      loadFilterTags,
     } = useState();
     const getShared = async () => {
       sharedList.value = (await getRecordings(true)).data.items;
@@ -55,6 +56,7 @@ export default defineComponent({
     };
     onMounted(async () => {
       checkLogin();
+      loadFilterTags();
     });
     router.afterEach((guard) => {
       if (guard.path.includes("spectrogram")) {

client/src/components/RecordingList.vue

@@ -15,6 +15,8 @@ export default defineComponent({
       showSubmittedRecordings,
       myRecordingsDisplay,
       sharedRecordingsDisplay,
+      filterTags,
+      sharedFilterTags,
     } = useState();
     const editingRecording: Ref<EditingRecording | null> = ref(null);
 
@@ -33,9 +35,9 @@ export default defineComponent({
 
     const fetchRecordings = async () => {
       const params = buildListParams();
-      const recordings = await getRecordings(false, params);
+      const recordings = await getRecordings(false, { ...params, tags: filterTags.value });
       recordingList.value = recordings.data.items;
-      const shared = await getRecordings(true, { ...params, public: true });
+      const shared = await getRecordings(true, { ...params, public: true, tags: sharedFilterTags.value });
       sharedList.value = shared.data.items;
     };
     onMounted(() => fetchRecordings());

client/src/use/useState.ts

@@ -111,6 +111,12 @@ const reviewerMaterials = ref('');
 
 const transparencyThreshold = ref(0); // 0-100 percentage
 
+const FILTER_TAG_STORAGE_KEY = 'bataiFilterTags';
+const SHARED_FILTER_TAG_STORAGE_KEY = 'bataiSharedFilterTags';
+
+const filterTags: Ref<string[]> = ref([]);
+const sharedFilterTags: Ref<string[]> = ref([]);
+
 type AnnotationState = "" | "editing" | "creating" | "disabled";
 export default function useState() {
   const setAnnotationState = (state: AnnotationState) => {
@@ -204,6 +210,17 @@ export default function useState() {
     }
   }
 
+  function saveFilterTags() {
+    localStorage.setItem(FILTER_TAG_STORAGE_KEY, JSON.stringify(filterTags.value));
+    localStorage.setItem(SHARED_FILTER_TAG_STORAGE_KEY, JSON.stringify(sharedFilterTags.value));
+  }
+
+  function loadFilterTags() {
+    filterTags.value = JSON.parse(localStorage.getItem(FILTER_TAG_STORAGE_KEY) || '[]');
+    sharedFilterTags.value = JSON.parse(localStorage.getItem(SHARED_FILTER_TAG_STORAGE_KEY) || '[]');
+
+  }
+
   return {
     annotationState,
     creationType,
@@ -264,5 +281,9 @@ export default function useState() {
     loadReviewerMaterials,
     viewMaskOverlay,
     maskOverlayOpacity,
+    filterTags,
+    sharedFilterTags,
+    saveFilterTags,
+    loadFilterTags,
   };
 }

client/src/views/Recordings.vue

@@ -43,6 +43,9 @@ export default defineComponent({
       showSubmittedRecordings,
       myRecordingsDisplay,
       sharedRecordingsDisplay,
+      filterTags,
+      sharedFilterTags,
+      saveFilterTags,
     } = useState();
     const editingRecording: Ref<EditingRecording | null> = ref(null);
     let intervalRef: number | null = null;
@@ -183,8 +186,6 @@ export default defineComponent({
       recordingTagList.value = tags.data;
     };
 
-    const filterTags: Ref<string[]> = ref([]);
-    const sharedFilterTags: Ref<string[]> = ref([]);
     const recordingTagOptions = computed(() =>
       recordingTagList.value.map((t) => t.text).filter(Boolean)
     );
@@ -198,7 +199,7 @@ export default defineComponent({
       }
       return userAnnotations.length ? 0 : -1;
     }
-    
+
 
     function currentUserSubmissionLabel(recording: Recording) {
       const userSubmittedAnnotation = recording.fileAnnotations.find((annotation: FileAnnotation) => (
@@ -216,7 +217,7 @@ export default defineComponent({
         if (showSubmittedRecordings.value) {
           headers.value.push(myLabelHeader);
           sharedHeaders.value.push(myLabelHeader);
-        } 
+        }
       }
     }
 
@@ -261,8 +262,22 @@ export default defineComponent({
       await fetchSharedRecordings({ page: 1, itemsPerPage: 20 });
     });
 
-    watch(filterTags, () => fetchMyRecordings(lastMyOptions.value), { deep: true });
-    watch(sharedFilterTags, () => fetchSharedRecordings(lastSharedOptions.value), { deep: true });
+    watch(
+      filterTags,
+      () => {
+        fetchMyRecordings(lastMyOptions.value);
+        saveFilterTags();
+      },
+      { deep: true }
+    );
+    watch(
+      sharedFilterTags,
+      () => {
+        fetchSharedRecordings(lastSharedOptions.value);
+        saveFilterTags();
+      },
+      { deep: true }
+    );
 
     const uploadDone = () => {
         uploadDialog.value = false;
@@ -673,6 +688,19 @@ export default defineComponent({
             {{ item.name }}
           </router-link>
         </template>
+
+        <template #item.tag_text="{ item }">
+          <span v-if="item.tags_text">
+            <v-chip
+              v-for="tag in item.tags_text"
+              :key="tag"
+              size="small"
+            >
+              {{ tag }}
+            </v-chip>
+          </span>
+        </template>
+
         <template #item.recorded_date="{ item }">
           {{ item.recorded_date }} {{ item.recorded_time }}
         </template>

client/src/views/Spectrogram.vue

@@ -87,6 +87,8 @@ export default defineComponent({
       clearContours,
       currentRecordingId,
       viewMaskOverlay,
+      filterTags,
+      sharedFilterTags,
     } = useState();
     const {
       clearPulseMetadata,
@@ -139,6 +141,8 @@ export default defineComponent({
       }
     };
 
+    const combinedTags = computed(() => Array.from (new Set([...filterTags.value, ...sharedFilterTags.value])));
+
     const loading = ref(false);
     const spectrogramData: Ref<Spectrogram | null> = ref(null);
     const loadData = async () => {
@@ -219,9 +223,11 @@ export default defineComponent({
 
       if (configuration.value.mark_annotations_completed_enabled) {
         try {
+          const tags = Array.from(new Set([...filterTags.value, ...sharedFilterTags.value]));
           const neighborsRes = await getUnsubmittedNeighbors(parseInt(props.id, 10), {
             sort_by: 'created',
             sort_direction: 'desc',
+            tags: tags,
           });
           nextUnsubmittedId.value = neighborsRes.data.next_id;
           previousUnsubmittedId.value = neighborsRes.data.previous_id;
@@ -378,6 +384,7 @@ export default defineComponent({
       fixedAxes,
       toggleFixedAxes,
       contoursLoading,
+      combinedTags,
       // Other user selection
       otherUserAnnotations,
       sequenceAnnotations,
@@ -674,42 +681,64 @@ export default defineComponent({
       <v-card>
         <v-card-title>
           <v-row dense>
-            <v-spacer />
-            <v-tooltip bottom>
-              <template #activator="{ props: subProps }">
-                <v-btn
-                  v-bind="subProps"
-                  :variant="sideTab === 'recordings' ? 'flat' : 'outlined'"
-                  :color="sideTab === 'recordings' ? 'primary' : ''"
-                  class="mx-2"
-                  size="small"
-                  @click="sideTab = 'recordings'"
-                >
-                  Recordings
-                </v-btn>
-              </template>
-              <span>
-                View Recordings in sideTab
-              </span>
-            </v-tooltip>
-            <v-tooltip bottom>
-              <template #activator="{ props: subProps }">
-                <v-btn
-                  v-bind="subProps"
-                  :variant="sideTab === 'annotations' ? 'flat' : 'outlined'"
-                  :color="sideTab === 'annotations' ? 'primary' : ''"
-                  class="mx-2"
-                  size="small"
-                  @click="sideTab = 'annotations'"
+            <v-col cols="2">
+              <v-tooltip v-if="combinedTags.length">
+                <template #activator="{ props: subProps }">
+                  <v-icon v-bind="subProps">
+                    mdi-filter
+                  </v-icon>
+                </template>
+                Filtering by:
+                <v-chip
+                  v-for="tag in combinedTags"
+                  :key="tag"
                 >
-                  Annotations
-                </v-btn>
-              </template>
-              <span>
-                View Annotations in sideTab
-              </span>
-            </v-tooltip>
-            <v-spacer />
+                  {{ tag }}
+                </v-chip>
+              </v-tooltip>
+              <v-spacer v-else />
+            </v-col>
+            <v-col cols="4">
+              <v-tooltip bottom>
+                <template #activator="{ props: subProps }">
+                  <v-btn
+                    v-bind="subProps"
+                    :variant="sideTab === 'recordings' ? 'flat' : 'outlined'"
+                    :color="sideTab === 'recordings' ? 'primary' : ''"
+                    class="mx-2"
+                    size="small"
+                    @click="sideTab = 'recordings'"
+                  >
+                    Recordings
+                  </v-btn>
+                </template>
+                <span>
+                  View Recordings in sideTab
+                </span>
+              </v-tooltip>
+            </v-col>
+            <v-col cols="4">
+              <v-tooltip bottom>
+                <template #activator="{ props: subProps }">
+                  <v-btn
+                    v-bind="subProps"
+                    :variant="sideTab === 'annotations' ? 'flat' : 'outlined'"
+                    :color="sideTab === 'annotations' ? 'primary' : ''"
+                    class="mx-2"
+                    size="small"
+                    @click="sideTab = 'annotations'"
+                  >
+                    Annotations
+                  </v-btn>
+                </template>
+                <span>
+                  View Annotations in sideTab
+                </span>
+              </v-tooltip>
+            </v-col>
+            <v-col>
+              <v-spacer />
+            </v-col>
           </v-row>
         </v-card-title>
         <v-card-text class="pa-0">