Tweak collection views (#896)

annavik · web-flow · commit 634cbe080da4 · 2025-07-21T18:01:12.000-07:00
* fix: tweak collection labels

* feat: make it possible to sort collections by id

* feat: make it possible to specify column settings for collections

* chore: use Nova button component for "Register new" actions
diff --git a/ami/main/api/views.py b/ami/main/api/views.py
@@ -644,6 +644,7 @@ class SourceImageCollectionViewSet(DefaultViewSet, ProjectMixin):
     ]
     filterset_fields = ["method"]
     ordering_fields = [
+        "id",
         "created_at",
         "updated_at",
         "name",
diff --git a/ui/src/design-system/components/table/column-settings/column-settings.tsx b/ui/src/design-system/components/table/column-settings/column-settings.tsx
@@ -1,7 +1,7 @@
-import { Button } from 'design-system/components/button/button'
 import { Checkbox } from 'design-system/components/checkbox/checkbox'
-import { IconType } from 'design-system/components/icon/icon'
 import * as Popover from 'design-system/components/popover/popover'
+import { ChevronDownIcon } from 'lucide-react'
+import { Button } from 'nova-ui-kit'
 import { STRING, translate } from 'utils/language'
 import styles from './column-settings.module.scss'
 
@@ -18,11 +18,10 @@ export const ColumnSettings = ({
 }: ColumnSettingsProps) => (
   <Popover.Root>
     <Popover.Trigger>
-      <Button
-        label={translate(STRING.COLUMNS)}
-        icon={IconType.ToggleDown}
-        customClass={styles.triggerButton}
-      />
+      <Button variant="outline" size="small">
+        <span>{translate(STRING.COLUMNS)}</span>
+        <ChevronDownIcon className="w-4 h-4" />
+      </Button>
     </Popover.Trigger>
     <Popover.Content
       ariaCloselabel={translate(STRING.CLOSE)}
diff --git a/ui/src/pages/deployment-details/new-deployment-dialog.tsx b/ui/src/pages/deployment-details/new-deployment-dialog.tsx
@@ -1,8 +1,8 @@
 import { useCreateDeployment } from 'data-services/hooks/deployments/useCreateDeployment'
 import { DeploymentDetails } from 'data-services/models/deployment-details'
-import { Button } from 'design-system/components/button/button'
 import * as Dialog from 'design-system/components/dialog/dialog'
-import { IconType } from 'design-system/components/icon/icon'
+import { PlusIcon } from 'lucide-react'
+import { Button } from 'nova-ui-kit'
 import { useState } from 'react'
 import { useParams } from 'react-router-dom'
 import { STRING, translate } from 'utils/language'
@@ -24,7 +24,10 @@ export const NewDeploymentDialog = () => {
   return (
     <Dialog.Root open={isOpen} onOpenChange={setIsOpen}>
       <Dialog.Trigger>
-        <Button label={label} icon={IconType.Plus} />
+        <Button size="small" variant="outline">
+          <PlusIcon className="w-4 h-4" />
+          <span>{label}</span>
+        </Button>
       </Dialog.Trigger>
       <Dialog.Content ariaCloselabel={translate(STRING.CLOSE)}>
         <DeploymentDetailsForm
diff --git a/ui/src/pages/job-details/new-job-dialog.tsx b/ui/src/pages/job-details/new-job-dialog.tsx
@@ -1,7 +1,7 @@
 import { useCreateJob } from 'data-services/hooks/jobs/useCreateJob'
-import { Button, ButtonTheme } from 'design-system/components/button/button'
 import * as Dialog from 'design-system/components/dialog/dialog'
-import { IconType } from 'design-system/components/icon/icon'
+import { PlusIcon } from 'lucide-react'
+import { Button } from 'nova-ui-kit'
 import { useState } from 'react'
 import { useParams } from 'react-router-dom'
 import { STRING, translate } from 'utils/language'
@@ -26,11 +26,10 @@ export const NewJobDialog = () => {
   return (
     <Dialog.Root open={isOpen} onOpenChange={setIsOpen}>
       <Dialog.Trigger>
-        <Button
-          label={label}
-          icon={IconType.Plus}
-          theme={ButtonTheme.Default}
-        />
+        <Button size="small" variant="outline">
+          <PlusIcon className="w-4 h-4" />
+          <span>{label}</span>
+        </Button>
       </Dialog.Trigger>
       <Dialog.Content ariaCloselabel={translate(STRING.CLOSE)}>
         <Dialog.Header title={label} />
diff --git a/ui/src/pages/project-details/new-project-dialog.tsx b/ui/src/pages/project-details/new-project-dialog.tsx
@@ -1,8 +1,8 @@
 import { useCreateProject } from 'data-services/hooks/projects/useCreateProject'
 import { Project } from 'data-services/models/project'
-import { Button, ButtonTheme } from 'design-system/components/button/button'
 import * as Dialog from 'design-system/components/dialog/dialog'
-import { IconType } from 'design-system/components/icon/icon'
+import { PlusIcon } from 'lucide-react'
+import { Button } from 'nova-ui-kit'
 import { useState } from 'react'
 import { STRING, translate } from 'utils/language'
 import { ProjectDetailsForm } from './project-details-form'
@@ -29,11 +29,10 @@ export const NewProjectDialog = () => {
   return (
     <Dialog.Root open={isOpen} onOpenChange={setIsOpen}>
       <Dialog.Trigger>
-        <Button
-          label={label}
-          icon={IconType.Plus}
-          theme={ButtonTheme.Default}
-        />
+        <Button size="small" variant="outline">
+          <PlusIcon className="w-4 h-4" />
+          <span>{label}</span>
+        </Button>
       </Dialog.Trigger>
       <Dialog.Content ariaCloselabel={translate(STRING.CLOSE)}>
         <Dialog.Header title={label} />
diff --git a/ui/src/pages/project/collections/collection-columns.tsx b/ui/src/pages/project/collections/collection-columns.tsx
@@ -23,9 +23,8 @@ export const columns: (projectId: string) => TableColumn<Collection>[] = (
   {
     id: 'id',
     name: translate(STRING.FIELD_LABEL_ID),
-    renderCell: (item: Collection) => (
-      <BasicTableCell value={item.id} theme={CellTheme.Primary} />
-    ),
+    sortField: 'id',
+    renderCell: (item: Collection) => <BasicTableCell value={item.id} />,
   },
   {
     id: 'name',
diff --git a/ui/src/pages/project/collections/collections.tsx b/ui/src/pages/project/collections/collections.tsx
@@ -2,22 +2,34 @@ import { API_ROUTES } from 'data-services/constants'
 import { useCollections } from 'data-services/hooks/collections/useCollections'
 import { PageHeader } from 'design-system/components/page-header/page-header'
 import { PaginationBar } from 'design-system/components/pagination-bar/pagination-bar'
+import { ColumnSettings } from 'design-system/components/table/column-settings/column-settings'
 import { Table } from 'design-system/components/table/table/table'
 import { TableSortSettings } from 'design-system/components/table/types'
 import { NewEntityDialog } from 'pages/project/entities/new-entity-dialog'
 import { useEffect, useState } from 'react'
 import { useParams } from 'react-router-dom'
 import { STRING, translate } from 'utils/language'
+import { useColumnSettings } from 'utils/useColumnSettings'
 import { usePagination } from 'utils/usePagination'
 import { UserPermission } from 'utils/user/types'
 import { columns } from './collection-columns'
 
 export const Collections = () => {
   const { projectId } = useParams()
   const [sort, setSort] = useState<TableSortSettings | undefined>({
-    field: 'created_at',
-    order: 'desc',
+    field: 'id',
+    order: 'asc',
   })
+  const { columnSettings, setColumnSettings } = useColumnSettings(
+    'collections',
+    {
+      id: true,
+      name: true,
+      settings: true,
+      'captures-with-detections': true,
+      status: true,
+    }
+  )
   const { pagination, setPage } = usePagination()
   const [poll, setPoll] = useState(false)
   const { collections, userPermissions, total, isLoading, isFetching, error } =
@@ -51,6 +63,11 @@ export const Collections = () => {
         isFetching={isFetching}
         tooltip={translate(STRING.TOOLTIP_COLLECTION)}
       >
+        <ColumnSettings
+          columns={columns(projectId as string)}
+          columnSettings={columnSettings}
+          onColumnSettingsChange={setColumnSettings}
+        />
         {canCreate && (
           <NewEntityDialog
             collection={API_ROUTES.COLLECTIONS}
@@ -59,7 +76,14 @@ export const Collections = () => {
         )}
       </PageHeader>
       <Table
-        columns={columns(projectId as string)}
+        columns={columns(projectId as string).filter((column) => {
+          // Always show action column
+          if (column.id === 'actions') {
+            return true
+          }
+
+          return !!columnSettings[column.id]
+        })}
         error={error}
         isLoading={isLoading}
         items={collections}
diff --git a/ui/src/pages/project/entities/details-form/collection-details-form.tsx b/ui/src/pages/project/entities/details-form/collection-details-form.tsx
@@ -86,7 +86,7 @@ const config: FormConfig = {
     },
   },
   'kwargs.max_num': {
-    label: 'Max number of images',
+    label: 'Max number of captures',
     rules: {
       min: 0,
       validate: (value) => {
@@ -113,7 +113,7 @@ const config: FormConfig = {
     },
   },
   'kwargs.size': {
-    label: 'Size',
+    label: 'Number of captures',
     rules: {
       min: 0,
       required: true,

Original file line number	Diff line number	Diff line change
`@@ -644,6 +644,7 @@ class SourceImageCollectionViewSet(DefaultViewSet, ProjectMixin):`
`644`	`644`	`]`
`645`	`645`	`filterset_fields = ["method"]`
`646`	`646`	`ordering_fields = [`
	`647`	`+ "id",`
`647`	`648`	`"created_at",`
`648`	`649`	`"updated_at",`
`649`	`650`	`"name",`
Original file line number	Diff line number	Diff line change
`@@ -23,9 +23,8 @@ export const columns: (projectId: string) => TableColumn<Collection>[] = (`
`23`	`23`	`{`
`24`	`24`	`id: 'id',`
`25`	`25`	`name: translate(STRING.FIELD_LABEL_ID),`
`26`		`- renderCell: (item: Collection) => (`
`27`		`- <BasicTableCell value={item.id} theme={CellTheme.Primary} />`
`28`		`- ),`
	`26`	`+ sortField: 'id',`
	`27`	`+ renderCell: (item: Collection) => <BasicTableCell value={item.id} />,`
`29`	`28`	`},`
`30`	`29`	`{`
`31`	`30`	`id: 'name',`