Setup score threshold filter for list views (#603)

* feat: use score threshold filter in occurrence list view * feat: use score threshold filter in species list view
RolnickLab · Oct 25, 2024 · 12990f2 · 12990f2
1 parent 0e86ada
commit 12990f2
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 30 deletions.
diff --git a/ui/src/components/applied-filters/applied-filters.module.scss b/ui/src/components/applied-filters/applied-filters.module.scss
@@ -3,6 +3,7 @@
 
 .appliedFilter {
   @include bubble-label();
+  background-color: $color-generic-white;
   display: flex;
   align-items: center;
   justify-content: center;

diff --git a/ui/src/components/applied-filters/applied-filters.tsx b/ui/src/components/applied-filters/applied-filters.tsx
@@ -6,8 +6,12 @@ import { IconType } from 'design-system/components/icon/icon'
 import { useFilters } from 'utils/useFilters'
 import styles from './applied-filters.module.scss'
 
-export const AppliedFilters = () => {
-  const { filters, clearFilter } = useFilters()
+interface AppliedFiltersProps {
+  defaultFilters?: { field: string; value: string }[]
+}
+
+export const AppliedFilters = ({ defaultFilters }: AppliedFiltersProps) => {
+  const { filters, clearFilter } = useFilters(defaultFilters)
 
   return (
     <>
@@ -18,12 +22,17 @@ export const AppliedFilters = () => {
             <span>
               {filter.label} {filter.value}
             </span>
-            <IconButton
-              customClass={styles.clearButton}
-              icon={IconType.Cross}
-              theme={IconButtonTheme.Plain}
-              onClick={() => clearFilter(filter.field)}
-            />
+            {!defaultFilters?.some(
+              (defaultFilter) =>
+                defaultFilter.field === filter.field && defaultFilter.value
+            ) && (
+              <IconButton
+                customClass={styles.clearButton}
+                icon={IconType.Cross}
+                theme={IconButtonTheme.Plain}
+                onClick={() => clearFilter(filter.field)}
+              />
+            )}
           </div>
         ))}
     </>

diff --git a/ui/src/design-system/components/page-header/page-header.tsx b/ui/src/design-system/components/page-header/page-header.tsx
@@ -9,22 +9,24 @@ import { Tooltip } from '../tooltip/tooltip'
 import styles from './page-header.module.scss'
 
 interface PageHeaderProps {
-  title: string
-  subTitle: string
-  tooltip?: string
-  isLoading?: boolean
+  defaultFilters?: { field: string; value: string }[]
   isFetching?: boolean
+  isLoading?: boolean
   showAppliedFilters?: boolean
+  subTitle: string
+  title: string
+  tooltip?: string
   children?: ReactNode
 }
 
 export const PageHeader = ({
-  title,
-  subTitle,
-  tooltip,
-  isLoading,
+  defaultFilters,
   isFetching,
+  isLoading,
   showAppliedFilters,
+  subTitle,
+  title,
+  tooltip,
   children,
 }: PageHeaderProps) => (
   <div className={styles.wrapper}>
@@ -44,7 +46,9 @@ export const PageHeader = ({
           </h2>
           {!isLoading && isFetching && <LoadingSpinner size={12} />}
         </div>
-        {showAppliedFilters && <AppliedFilters />}
+        {showAppliedFilters && (
+          <AppliedFilters defaultFilters={defaultFilters} />
+        )}
       </div>
     </div>
     <div className={styles.row}>{children}</div>

diff --git a/ui/src/pages/occurrences/occurrences.tsx b/ui/src/pages/occurrences/occurrences.tsx
@@ -28,9 +28,13 @@ import { columns } from './occurrence-columns'
 import { OccurrenceGallery } from './occurrence-gallery'
 import styles from './occurrences.module.scss'
 import { TaxonFilter } from './taxon-filter/taxon-filter'
+import { useUserPreferences } from 'utils/userPreferences/userPreferencesContext'
 
 export const Occurrences = () => {
   const { user } = useUser()
+  const {
+    userPreferences: { scoreThreshold },
+  } = useUserPreferences()
   const { projectId, id } = useParams()
   const { columnSettings, setColumnSettings } = useColumnSettings(
     'occurrences',
@@ -51,7 +55,10 @@ export const Occurrences = () => {
     order: 'desc',
   })
   const { pagination, setPage } = usePagination()
-  const { filters } = useFilters()
+  const defaultFilters = [
+    { field: 'classification_threshold', value: `${scoreThreshold}` },
+  ]
+  const { filters } = useFilters(defaultFilters)
   const { occurrences, total, isLoading, isFetching, error } = useOccurrences({
     projectId,
     pagination,
@@ -71,13 +78,14 @@ export const Occurrences = () => {
   return (
     <>
       <PageHeader
-        title={translate(STRING.NAV_ITEM_OCCURRENCES)}
+        defaultFilters={defaultFilters}
+        isFetching={isFetching}
+        isLoading={isLoading}
+        showAppliedFilters
         subTitle={translate(STRING.RESULTS, {
           total,
         })}
-        isLoading={isLoading}
-        isFetching={isFetching}
-        showAppliedFilters
+        title={translate(STRING.NAV_ITEM_OCCURRENCES)}
         tooltip={translate(STRING.TOOLTIP_OCCURRENCE)}
       >
         <TaxonFilter />

diff --git a/ui/src/pages/species/species.tsx b/ui/src/pages/species/species.tsx
@@ -23,12 +23,19 @@ import { useSort } from 'utils/useSort'
 import { columns } from './species-columns'
 import { SpeciesGallery } from './species-gallery'
 import styles from './species.module.scss'
+import { useUserPreferences } from 'utils/userPreferences/userPreferencesContext'
 
 export const Species = () => {
+  const {
+    userPreferences: { scoreThreshold },
+  } = useUserPreferences()
   const { projectId, id } = useParams()
   const { sort, setSort } = useSort({ field: 'name', order: 'asc' })
   const { pagination, setPage } = usePagination()
-  const { filters } = useFilters()
+  const defaultFilters = [
+    { field: 'classification_threshold', value: `${scoreThreshold}` },
+  ]
+  const { filters } = useFilters(defaultFilters)
   const { species, total, isLoading, isFetching, error } = useSpecies({
     projectId,
     sort,
@@ -44,13 +51,14 @@ export const Species = () => {
   return (
     <>
       <PageHeader
-        title={translate(STRING.NAV_ITEM_SPECIES)}
+        defaultFilters={defaultFilters}
+        isFetching={isFetching}
+        isLoading={isLoading}
+        showAppliedFilters
         subTitle={translate(STRING.RESULTS, {
           total,
         })}
-        isLoading={isLoading}
-        isFetching={isFetching}
-        showAppliedFilters
+        title={translate(STRING.NAV_ITEM_SPECIES)}
       >
         <TaxonFilter />
         <ToggleGroup

diff --git a/ui/src/utils/useFilters.ts b/ui/src/utils/useFilters.ts
@@ -21,6 +21,10 @@ const AVAILABLE_FILTERS = [
     label: 'Taxon',
     field: 'taxon',
   },
+  {
+    label: 'Score threshold',
+    field: 'classification_threshold',
+  },
   {
     label: 'Capture collection',
     field: 'collection',
@@ -31,15 +35,20 @@ const AVAILABLE_FILTERS = [
   },
 ]
 
-export const useFilters = () => {
+export const useFilters = (
+  defaultFilters?: { field: string; value: string }[]
+) => {
   const [searchParams, setSearchParams] = useSearchParams()
 
   const filters = AVAILABLE_FILTERS.map((filter) => {
-    const values = searchParams.getAll(filter.field)
+    const value = searchParams.getAll(filter.field)[0]
+    const defaultValue = defaultFilters?.find(
+      (defaultFilter) => defaultFilter.field === filter.field
+    )?.value
 
     return {
       ...filter,
-      value: values[0],
+      value: value ?? defaultValue,
     }
   })