Setup default filters form (#929)

* feat: setup default filters form

* fix: update project type

* chore: add db migration

---------

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

Author: annavik

ami/main/migrations/0070_alter_project_feature_flags.py

@@ -0,0 +1,29 @@
+# Generated by Django 4.2.10 on 2025-08-29 04:29
+
+import ami.main.models
+from django.db import migrations
+import django_pydantic_field.fields
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("main", "0069_merge_20250818_1201"),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name="project",
+            name="feature_flags",
+            field=django_pydantic_field.fields.PydanticSchemaField(
+                blank=True,
+                config=None,
+                default={
+                    "auto_process_manual_uploads": False,
+                    "default_filters": False,
+                    "reprocess_existing_detections": False,
+                    "tags": False,
+                },
+                schema=ami.main.models.ProjectFeatureFlags,
+            ),
+        ),
+    ]

ami/main/models.py

@@ -207,6 +207,7 @@ class ProjectFeatureFlags(pydantic.BaseModel):
     tags: bool = False  # Whether the project supports tagging taxa
     auto_process_manual_uploads: bool = False  # Whether to automatically process uploaded images
     reprocess_existing_detections: bool = False  # Whether to reprocess existing detections
+    default_filters: bool = False  # Whether to show default filters form in UI
 
 
 default_feature_flags = ProjectFeatureFlags()

ui/src/app.tsx

@@ -23,6 +23,7 @@ import { Jobs } from 'pages/jobs/jobs'
 import { Occurrences } from 'pages/occurrences/occurrences'
 import { Algorithms } from 'pages/project/algorithms/algorithms'
 import { Collections } from 'pages/project/collections/collections'
+import { DefaultFilters } from 'pages/project/default-filters/default-filters'
 import { Devices } from 'pages/project/entities/devices'
 import { Sites } from 'pages/project/entities/sites'
 import { Exports } from 'pages/project/exports/exports'
@@ -118,6 +119,7 @@ export const App = () => (
             <Route path="sites" element={<Sites />} />
             <Route path="devices" element={<Devices />} />
             <Route path="general" element={<General />} />
+            <Route path="default-filters" element={<DefaultFilters />} />
             <Route path="storage" element={<Storage />} />
           </Route>
           <Route path="jobs/:id?" element={<Jobs />} />

ui/src/components/taxon-search/add-taxon.tsx

@@ -0,0 +1,39 @@
+import { Taxon } from 'data-services/models/taxa'
+import { PlusIcon } from 'lucide-react'
+import { Button, Popover } from 'nova-ui-kit'
+import { useState } from 'react'
+import { TaxonSearch } from './taxon-search'
+
+export const AddTaxon = ({ onAdd }: { onAdd: (taxon?: Taxon) => void }) => {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <Popover.Root open={open} onOpenChange={setOpen}>
+      <Popover.Trigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className="w-full justify-between px-4 text-muted-foreground font-normal"
+        >
+          <>
+            <span>Add taxon</span>
+            <PlusIcon className="h-4 w-4 ml-2" />
+          </>
+        </Button>
+      </Popover.Trigger>
+      <Popover.Content
+        avoidCollisions={false}
+        className="w-auto p-0 overflow-hidden"
+        style={{ maxHeight: 'var(--radix-popover-content-available-height)' }}
+      >
+        <TaxonSearch
+          onTaxonChange={(taxon) => {
+            onAdd(taxon)
+            setOpen(false)
+          }}
+        />
+      </Popover.Content>
+    </Popover.Root>
+  )
+}

ui/src/components/taxon-search/taxon-select.tsx

@@ -21,10 +21,11 @@ export const TaxonSelect = ({
     <Popover.Root open={open} onOpenChange={setOpen}>
       <Popover.Trigger asChild>
         <Button
-          variant="outline"
-          role="combobox"
           aria-expanded={open}
           className="w-full justify-between px-4 text-muted-foreground font-normal"
+          role="combobox"
+          type="button"
+          variant="outline"
         >
           <>
             <span>{triggerLabel}</span>

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

@@ -1,24 +1,27 @@
 import { API_ROUTES, API_URL } from 'data-services/constants'
-import { Project, ServerProject } from 'data-services/models/project'
+import { ServerProject } from 'data-services/models/project'
+import { ProjectDetails } from 'data-services/models/project-details'
 import { useMemo } from 'react'
 import { useAuthorizedQuery } from '../auth/useAuthorizedQuery'
 
-const convertServerRecord = (record: ServerProject) => new Project(record)
+const convertServerRecord = (record: ServerProject) =>
+  new ProjectDetails(record)
 
 export const useProjectDetails = (
   projectId: string,
   useInternalCache?: boolean
 ): {
-  project?: Project
+  project?: ProjectDetails
   isLoading: boolean
   isFetching: boolean
   error?: unknown
 } => {
-  const { data, isLoading, isFetching, error } = useAuthorizedQuery<Project>({
-    queryKey: [API_ROUTES.PROJECTS, projectId],
-    url: `${API_URL}/${API_ROUTES.PROJECTS}/${projectId}/`,
-    staleTime: useInternalCache ? Infinity : undefined,
-  })
+  const { data, isLoading, isFetching, error } =
+    useAuthorizedQuery<ProjectDetails>({
+      queryKey: [API_ROUTES.PROJECTS, projectId],
+      url: `${API_URL}/${API_ROUTES.PROJECTS}/${projectId}/`,
+      staleTime: useInternalCache ? Infinity : undefined,
+    })
 
   const project = useMemo(
     () => (data ? convertServerRecord(data) : undefined),

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

@@ -22,7 +22,7 @@ export const useUpdateProject = (id: string) => {
         }
       ),
     onSuccess: () => {
-      queryClient.invalidateQueries([API_ROUTES.PROJECTS])
+      queryClient.invalidateQueries([API_ROUTES.PROJECTS, id])
       setTimeout(reset, SUCCESS_TIMEOUT)
     },
   })

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

@@ -0,0 +1,42 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import axios from 'axios'
+import { API_ROUTES, API_URL, SUCCESS_TIMEOUT } from 'data-services/constants'
+import { getAuthHeader } from 'data-services/utils'
+import { useUser } from 'utils/user/userContext'
+
+const convertToServerFieldValues = (fieldValues: any) => ({
+  settings: {
+    session_time_gap_seconds: fieldValues.sessionTimeGapSeconds,
+    default_filters_score_threshold: fieldValues.scoreThreshold,
+    default_filters_include_taxa_ids: fieldValues.includeTaxa.map(
+      (taxon: any) => taxon.id
+    ),
+    default_filters_exclude_taxa_ids: fieldValues.excludeTaxa.map(
+      (taxon: any) => taxon.id
+    ),
+  },
+})
+
+export const useUpdateProjectSettings = (id: string) => {
+  const { user } = useUser()
+  const queryClient = useQueryClient()
+
+  const { mutateAsync, isLoading, isSuccess, reset, error } = useMutation({
+    mutationFn: (fieldValues: any) =>
+      axios.patch(
+        `${API_URL}/${API_ROUTES.PROJECTS}/${id}/`,
+        convertToServerFieldValues(fieldValues),
+        {
+          headers: {
+            ...getAuthHeader(user),
+          },
+        }
+      ),
+    onSuccess: () => {
+      queryClient.invalidateQueries([API_ROUTES.PROJECTS, id])
+      setTimeout(reset, SUCCESS_TIMEOUT)
+    },
+  })
+
+  return { updateProjectSettings: mutateAsync, isLoading, isSuccess, error }
+}

ui/src/data-services/hooks/taxa-tags/useAssignTags.ts

@@ -10,23 +10,18 @@ export const useAssignTags = (id: string, onSuccess?: () => void) => {
   const queryClient = useQueryClient()
 
   const { mutate, isLoading, error, isSuccess, reset } = useMutation({
-    mutationFn: ({ projectId, tags }: { projectId: string; tags: Tag[] }) => {
-      const data = new FormData()
-      data.append('tag_ids', JSON.stringify(tags.map((tag) => tag.id)))
-
-      return axios.post(
+    mutationFn: ({ projectId, tags }: { projectId: string; tags: Tag[] }) =>
+      axios.post(
         `${API_URL}/${API_ROUTES.SPECIES}/${id}/assign_tags/?project_id=${projectId}`,
-        JSON.stringify({
+        {
           tag_ids: tags.map((tag) => tag.id),
-        }),
+        },
         {
           headers: {
             ...getAuthHeader(user),
-            'Content-Type': 'application/json',
           },
         }
-      )
-    },
+      ),
     onSuccess: () => {
       queryClient.invalidateQueries([API_ROUTES.SPECIES])
       queryClient.invalidateQueries([API_ROUTES.SPECIES, id])

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

@@ -0,0 +1,54 @@
+import { Project } from './project'
+
+export type ServerProject = any // TODO: Update this type
+
+interface SummaryData {
+  title: string
+  data: {
+    x: (string | number)[]
+    y: number[]
+    tickvals?: (string | number)[]
+    ticktext?: string[]
+  }
+  type: any
+  orientation: 'h' | 'v'
+}
+
+interface Settings {
+  sessionTimeGapSeconds: number
+  scoreThreshold: number
+  includeTaxa: { id: string; name: string }[]
+  excludeTaxa: { id: string; name: string }[]
+}
+
+export class ProjectDetails extends Project {
+  public constructor(project: ServerProject) {
+    super(project)
+  }
+
+  get settings(): Settings {
+    const includeTaxa = this._project.settings.default_filters_include_taxa.map(
+      (taxon: any) => ({
+        id: `${taxon.id}`,
+        name: taxon.name,
+      })
+    )
+    const excludeTaxa = this._project.settings.default_filters_exclude_taxa.map(
+      (taxon: any) => ({
+        id: `${taxon.id}`,
+        name: taxon.name,
+      })
+    )
+
+    return {
+      sessionTimeGapSeconds: this._project.settings.session_time_gap_seconds,
+      scoreThreshold: this._project.settings.default_filters_score_threshold,
+      includeTaxa,
+      excludeTaxa,
+    }
+  }
+
+  get summaryData(): SummaryData[] {
+    return this._project.summary_data
+  }
+}