Make it easier for users to upload and explore captures (#943)

* fix: make sure default station passes validation

* feat: setup dedicated capture view

* copy: streamline casing for default entities

* feat: setup and use image upload dialog

* feat: show get started information in project gallery

* copy: streamline select placeholders

* feat: navigate to project after creation

* fix: tweak capture links

* fix: tweak default column settings for collections

* copy: tweak wording

* fix: bring back jobs as main menu item

* fix: link to session detail

* fix: missing occurrence filter for single source images

---------

Co-authored-by: Michael Bunsen <notbot@gmail.com>

Author: annavik

ami/main/api/views.py

@@ -1080,6 +1080,7 @@ class OccurrenceViewSet(DefaultViewSet, ProjectMixin):
         "event",
         "deployment",
         "determination__rank",
+        "detections__source_image",
     ]
     ordering_fields = [
         "created_at",

ami/main/models.py

@@ -98,14 +98,14 @@ def get_media_url(path: str) -> str:
 
 def get_or_create_default_device(project: "Project") -> "Device":
     """Create a default device for a project."""
-    device, _created = Device.objects.get_or_create(name="Default device", project=project)
+    device, _created = Device.objects.get_or_create(name="Default Device", project=project)
     logger.info(f"Created default device for project {project}")
     return device
 
 
 def get_or_create_default_research_site(project: "Project") -> "Site":
     """Create a default research site for a project."""
-    site, _created = Site.objects.get_or_create(name="Default site", project=project)
+    site, _created = Site.objects.get_or_create(name="Default Site", project=project)
     logger.info(f"Created default research site for project {project}")
     return site
 
@@ -119,6 +119,8 @@ def get_or_create_default_deployment(
         project=project,
         research_site=site,
         device=device,
+        latitude=0,
+        longitude=0,
     )
     logger.info(f"Created default deployment for project {project}")
     return deployment

ui/src/app.tsx

@@ -17,7 +17,7 @@ import { Auth } from 'pages/auth/auth'
 import { Login } from 'pages/auth/login'
 import { ResetPassword } from 'pages/auth/reset-password'
 import { ResetPasswordConfirm } from 'pages/auth/reset-password-confirm'
-import { CollectionDetails } from 'pages/collection-details/collection-details'
+import { Captures } from 'pages/captures/captures'
 import { Deployments } from 'pages/deployments/deployments'
 import { Jobs } from 'pages/jobs/jobs'
 import { Occurrences } from 'pages/occurrences/occurrences'
@@ -108,7 +108,6 @@ export const App = () => (
             />
             <Route path="summary" element={<Summary />} />
             <Route path="collections" element={<Collections />} />
-            <Route path="collections/:id" element={<CollectionDetails />} />
             <Route path="exports/:id?" element={<Exports />} />
             <Route
               path="processing-services/:id?"
@@ -124,6 +123,7 @@ export const App = () => (
           </Route>
           <Route path="jobs/:id?" element={<Jobs />} />
           <Route path="deployments/:id?" element={<Deployments />} />
+          <Route path="captures" element={<Captures />} />
           <Route path="sessions" element={<Sessions />} />
           <Route path="sessions/:id" element={<SessionDetails />} />
           <Route path="occurrences/:id?" element={<Occurrences />} />

ui/src/components/filtering/filter-control.tsx

@@ -26,6 +26,7 @@ const ComponentMap: {
   best_determination_score: ScoreFilter,
   classification_threshold: ScoreFilter,
   collection: CollectionFilter,
+  collections: CollectionFilter,
   date_end: DateFilter,
   date_start: DateFilter,
   deployment: StationFilter,

ui/src/data-services/hooks/captures/useCaptures.ts

@@ -3,6 +3,7 @@ import { Capture, ServerCapture } from 'data-services/models/capture'
 import { FetchParams } from 'data-services/types'
 import { getFetchUrl } from 'data-services/utils'
 import { useMemo } from 'react'
+import { UserPermission } from 'utils/user/types'
 import { useAuthorizedQuery } from '../auth/useAuthorizedQuery'
 
 const convertServerRecord = (record: ServerCapture) => new Capture(record)
@@ -11,6 +12,7 @@ export const useCaptures = (
   params: FetchParams
 ): {
   captures?: Capture[]
+  userPermissions?: UserPermission[]
   total: number
   isLoading: boolean
   isFetching: boolean
@@ -20,6 +22,7 @@ export const useCaptures = (
 
   const { data, isLoading, isFetching, error } = useAuthorizedQuery<{
     results: ServerCapture[]
+    user_permissions?: UserPermission[]
     count: number
   }>({
     queryKey: [API_ROUTES.CAPTURES, params],
@@ -31,6 +34,7 @@ export const useCaptures = (
 
   return {
     captures,
+    userPermissions: data?.user_permissions,
     total: data?.count ?? 0,
     isLoading,
     isFetching,

ui/src/data-services/hooks/captures/useUploadCapture.ts

@@ -14,7 +14,7 @@ export const useUploadCapture = (onSuccess?: (id: string) => void) => {
   const { user } = useUser()
   const queryClient = useQueryClient()
 
-  const { mutate, isLoading, error, isSuccess } = useMutation({
+  const { mutateAsync, isLoading, error, isSuccess, reset } = useMutation({
     mutationFn: (fieldValues: UploadCaptureFieldValues) => {
       const data = new FormData()
       if (fieldValues.projectId) {
@@ -41,10 +41,12 @@ export const useUploadCapture = (onSuccess?: (id: string) => void) => {
       )
     },
     onSuccess: ({ data }) => {
+      queryClient.invalidateQueries([API_ROUTES.CAPTURES])
       queryClient.invalidateQueries([API_ROUTES.DEPLOYMENTS])
+      queryClient.invalidateQueries([API_ROUTES.SUMMARY])
       onSuccess?.(`${data.source_image.id}`)
     },
   })
 
-  return { uploadCapture: mutate, isLoading, error, isSuccess }
+  return { uploadCapture: mutateAsync, isLoading, error, isSuccess, reset }
 }

ui/src/data-services/hooks/captures/useUploadCaptures.ts

@@ -0,0 +1,64 @@
+import { useQueryClient } from '@tanstack/react-query'
+import { API_ROUTES, SUCCESS_TIMEOUT } from 'data-services/constants'
+import { useState } from 'react'
+import { useUploadCapture } from './useUploadCapture'
+
+type Result = PromiseSettledResult<any>
+
+const isRejected = (result: Result) => result.status === 'rejected'
+
+export const useUploadCaptures = (onSuccess?: () => void) => {
+  const queryClient = useQueryClient()
+  const [results, setResults] = useState<Result[]>()
+  const { uploadCapture, isLoading, isSuccess, reset } = useUploadCapture(
+    () => {
+      setTimeout(() => {
+        reset()
+      }, SUCCESS_TIMEOUT)
+    }
+  )
+
+  const error = results?.some(isRejected)
+    ? 'Not all images could not be uploaded, please retry.'
+    : undefined
+
+  return {
+    isLoading,
+    isSuccess,
+    error,
+    uploadCaptures: async (params: {
+      projectId: string
+      deploymentId: string
+      files: File[]
+    }) => {
+      const promises = params.files
+        .filter((_, index) => {
+          if (error) {
+            // Only retry rejected requests
+            return results?.[index]?.status === 'rejected'
+          }
+
+          return true
+        })
+        .map((file) =>
+          uploadCapture({
+            projectId: params.projectId,
+            deploymentId: params.deploymentId,
+            file,
+          })
+        )
+
+      setResults(undefined)
+      const updatesResults = await Promise.allSettled(promises)
+      setResults(updatesResults)
+
+      if (!updatesResults?.some(isRejected)) {
+        queryClient.invalidateQueries([API_ROUTES.CAPTURES])
+        queryClient.invalidateQueries([API_ROUTES.DEPLOYMENTS])
+        queryClient.invalidateQueries([API_ROUTES.SUMMARY])
+        queryClient.invalidateQueries([API_ROUTES.PROJECTS, params.projectId])
+        onSuccess?.()
+      }
+    },
+  }
+}

ui/src/data-services/hooks/projects/useCreateProject.ts

@@ -11,7 +11,7 @@ export const useCreateProject = (onSuccess?: () => void) => {
 
   const { mutateAsync, isLoading, isSuccess, reset, error } = useMutation({
     mutationFn: (fieldValues: any) =>
-      axios.post(
+      axios.post<{ id: number }>(
         `${API_URL}/${API_ROUTES.PROJECTS}/`,
         convertToServerFormData(fieldValues),
         {

ui/src/data-services/models/collection.ts

@@ -80,7 +80,8 @@ export class Collection extends Entity {
       this.numImagesWithDetections && this.numImages
         ? (this.numImagesWithDetections / this.numImages) * 100
         : 0
-    return `${this.numImagesWithDetections?.toLocaleString()} / ${this.numImages?.toLocaleString()} (${pct.toFixed(
+
+    return `${this.numImagesWithDetections?.toLocaleString()} (${pct.toFixed(
       0
     )}%)`
   }

ui/src/data-services/models/project-details.ts

@@ -1,3 +1,4 @@
+import { UserPermission } from 'utils/user/types'
 import { Project } from './project'
 
 export type ServerProject = any // TODO: Update this type
@@ -51,4 +52,8 @@ export class ProjectDetails extends Project {
   get summaryData(): SummaryData[] {
     return this._project.summary_data
   }
+
+  get userPermissions(): UserPermission[] {
+    return this._project.user_permissions
+  }
 }