Improve bulk identification workflow (#841)

* feat: extend list of recent labels

* fix: do not invalidate queries until all ids are saved

---------

Co-authored-by: Anna Viklund <annamariaviklund@gmail.com>

Author: mihow

ui/src/data-services/hooks/identifications/useCreateIdentification.ts

@@ -15,7 +15,10 @@ const convertToServerFieldValues = (
   comment: fieldValues.comment,
 })
 
-export const useCreateIdentification = (onSuccess?: () => void) => {
+export const useCreateIdentification = (
+  onSuccess?: () => void,
+  invalidate: boolean = true
+) => {
   const { user } = useUser()
   const queryClient = useQueryClient()
 
@@ -29,8 +32,10 @@ export const useCreateIdentification = (onSuccess?: () => void) => {
         }
       ),
     onSuccess: () => {
-      queryClient.invalidateQueries([API_ROUTES.IDENTIFICATIONS])
-      queryClient.invalidateQueries([API_ROUTES.OCCURRENCES])
+      if (invalidate) {
+        queryClient.invalidateQueries([API_ROUTES.IDENTIFICATIONS])
+        queryClient.invalidateQueries([API_ROUTES.OCCURRENCES])
+      }
       onSuccess?.()
     },
   })

ui/src/data-services/hooks/identifications/useCreateIdentifications.ts

@@ -1,18 +1,20 @@
-import { SUCCESS_TIMEOUT } from 'data-services/constants'
+import { useQueryClient } from '@tanstack/react-query'
+import { API_ROUTES, SUCCESS_TIMEOUT } from 'data-services/constants'
 import { useEffect, useState } from 'react'
 import { IdentificationFieldValues } from './types'
 import { useCreateIdentification } from './useCreateIdentification'
 
 export const useCreateIdentifications = (
   params: IdentificationFieldValues[]
 ) => {
+  const queryClient = useQueryClient()
   const [results, setResults] = useState<PromiseSettledResult<any>[]>()
   const { createIdentification, isLoading, isSuccess, reset } =
     useCreateIdentification(() => {
       setTimeout(() => {
         reset()
       }, SUCCESS_TIMEOUT)
-    })
+    }, false)
 
   const numRejected = results?.filter(
     (result) => result.status === 'rejected'
@@ -47,6 +49,8 @@ export const useCreateIdentifications = (
       setResults(undefined)
       const result = await Promise.allSettled(promises)
       setResults(result)
+      queryClient.invalidateQueries([API_ROUTES.IDENTIFICATIONS])
+      queryClient.invalidateQueries([API_ROUTES.OCCURRENCES])
     },
   }
 }

ui/src/pages/occurrence-details/reject-id/useRecentOptions.ts

@@ -1,7 +1,7 @@
 import { useUserPreferences } from 'utils/userPreferences/userPreferencesContext'
 import { REJECT_OPTIONS } from './constants'
 
-const DISPLAY_LIST_SIZE = 1 // Limit how many identifications are displayed
+const DISPLAY_LIST_SIZE = 5 // Limit how many identifications are displayed
 const STORAGE_LIST_SIZE = 5 // Limit how many identifications are stored
 
 export const useRecentIdentifications = () => {