Skip to content

Commit 2cb5687

Browse files
annavikannavik
committed
fix: cleanup
1 parent ef7ccec commit 2cb5687

19 files changed

Lines changed: 130 additions & 125 deletions

File tree

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

Lines changed: 53 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { useProjectDetails } from 'data-services/hooks/projects/useProjectDetail
44
import { ProjectDetails } from 'data-services/models/project-details'
55
import { InputValue } from 'design-system/components/input/input'
66
import { ChevronRightIcon, InfoIcon } from 'lucide-react'
7-
import { Button, buttonVariants, Switch, Tooltip } from 'nova-ui-kit'
7+
import { Button, buttonVariants, Popover, Switch } from 'nova-ui-kit'
88
import { Link, useParams } from 'react-router-dom'
99
import { APP_ROUTES } from 'utils/constants'
1010
import { STRING, translate } from 'utils/language'
@@ -50,59 +50,57 @@ export const DefaultFiltersTooltip = ({
5050
className?: string
5151
project: ProjectDetails
5252
}) => (
53-
<Tooltip.Provider delayDuration={0}>
54-
<Tooltip.Root>
55-
<Tooltip.Trigger asChild>
56-
<Button
57-
aria-label={translate(STRING.INFO)}
58-
className={className}
59-
size="icon"
60-
variant="ghost"
61-
>
62-
<InfoIcon className="w-4 h-4" />
63-
</Button>
64-
</Tooltip.Trigger>
65-
<Tooltip.Content className="p-4 max-w-xs">
66-
<div className="flex flex-col gap-4">
67-
<div className="flex flex-col gap-4 border-b border-border pb-4">
68-
<p className="body-small italic text-muted-foreground">
69-
Data is filtered by default based on global project configuration.
70-
</p>
71-
<FormRow>
72-
<InputValue
73-
label="Score threshold"
74-
value={project.settings.scoreThreshold}
75-
/>
76-
</FormRow>
77-
<FormRow>
78-
<InputValue
79-
label="Include taxa"
80-
value={project.settings.includeTaxa
81-
.map((taxon) => taxon.name)
82-
.join(', ')}
83-
/>
84-
<InputValue
85-
label="Exclude taxa"
86-
value={project.settings.excludeTaxa
87-
.map((taxon) => taxon.name)
88-
.join(', ')}
89-
/>
90-
</FormRow>
91-
</div>
92-
{project.canUpdate ? (
93-
<Link
94-
className={classNames(
95-
buttonVariants({ size: 'small', variant: 'ghost' }),
96-
'!w-auto self-end'
97-
)}
98-
to={APP_ROUTES.DEFAULT_FILTERS({ projectId: project.id })}
99-
>
100-
<span>{translate(STRING.CONFIGURE)}</span>
101-
<ChevronRightIcon className="w-4 h-4" />
102-
</Link>
103-
) : null}
53+
<Popover.Root>
54+
<Popover.Trigger asChild>
55+
<Button
56+
aria-label={translate(STRING.INFO)}
57+
className={className}
58+
size="icon"
59+
variant="ghost"
60+
>
61+
<InfoIcon className="w-4 h-4" />
62+
</Button>
63+
</Popover.Trigger>
64+
<Popover.Content className="p-4 max-w-xs">
65+
<div className="flex flex-col gap-4">
66+
<div className="flex flex-col gap-4 border-b border-border pb-4">
67+
<p className="body-small italic text-muted-foreground">
68+
{translate(STRING.MESSAGE_DEFAULT_FILTERS)}
69+
</p>
70+
<FormRow>
71+
<InputValue
72+
label="Score threshold"
73+
value={project.settings.scoreThreshold}
74+
/>
75+
</FormRow>
76+
<FormRow>
77+
<InputValue
78+
label="Include taxa"
79+
value={project.settings.includeTaxa
80+
.map((taxon) => taxon.name)
81+
.join(', ')}
82+
/>
83+
<InputValue
84+
label="Exclude taxa"
85+
value={project.settings.excludeTaxa
86+
.map((taxon) => taxon.name)
87+
.join(', ')}
88+
/>
89+
</FormRow>
10490
</div>
105-
</Tooltip.Content>
106-
</Tooltip.Root>
107-
</Tooltip.Provider>
91+
{project.canUpdate ? (
92+
<Link
93+
className={classNames(
94+
buttonVariants({ size: 'small', variant: 'ghost' }),
95+
'!w-auto self-end'
96+
)}
97+
to={APP_ROUTES.DEFAULT_FILTERS({ projectId: project.id })}
98+
>
99+
<span>{translate(STRING.CONFIGURE)}</span>
100+
<ChevronRightIcon className="w-4 h-4" />
101+
</Link>
102+
) : null}
103+
</div>
104+
</Popover.Content>
105+
</Popover.Root>
108106
)

‎ui/src/components/filtering/filters/verification-status-filter.tsx‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,24 +3,23 @@ import { STRING, translate } from 'utils/language'
33
import { booleanToString, stringToBoolean } from '../utils'
44
import { FilterProps } from './types'
55

6-
const OPTIONS = [
7-
{ value: true, label: translate(STRING.VERIFIED) },
8-
{ value: false, label: translate(STRING.NOT_VERIFIED) },
9-
]
10-
116
export const VerificationStatusFilter = ({
127
value: string,
138
onAdd,
149
}: FilterProps) => {
1510
const value = stringToBoolean(string)
11+
const options = [
12+
{ value: true, label: translate(STRING.VERIFIED) },
13+
{ value: false, label: translate(STRING.NOT_VERIFIED) },
14+
]
1615

1716
return (
1817
<Select.Root value={booleanToString(value)} onValueChange={onAdd}>
1918
<Select.Trigger>
2019
<Select.Value placeholder={translate(STRING.SELECT_PLACEHOLDER)} />
2120
</Select.Trigger>
2221
<Select.Content>
23-
{OPTIONS.map((option) => (
22+
{options.map((option) => (
2423
<Select.Item
2524
key={booleanToString(option.value)}
2625
value={booleanToString(option.value)}

‎ui/src/data-services/hooks/processing-services/useProcessingServiceDetails.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export const useProcessingServiceDetails = (
2020
} => {
2121
const { data, isLoading, isFetching, error } =
2222
useAuthorizedQuery<ProcessingService>({
23-
queryKey: [API_ROUTES.PROCESSING_SERVICES, id],
23+
queryKey: [API_ROUTES.PROCESSING_SERVICES, id, projectId],
2424
url: `${API_URL}/${API_ROUTES.PROCESSING_SERVICES}/${id}/?project_id=${projectId}`,
2525
})
2626

‎ui/src/design-system/components/table/table-header/table-header.module.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,10 @@
99
border-bottom: 2px solid $color-neutral-100;
1010
background-color: $color-neutral-50;
1111
text-align: left;
12+
13+
&.sticky {
14+
width: 100%;
15+
}
1216
}
1317

1418
.content {

‎ui/src/design-system/components/table/table-header/table-header.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,11 @@ import styles from './table-header.module.scss'
66

77
interface TableHeaderProps<T> {
88
column: TableColumn<T>
9+
onSortClick: () => void
910
sortable?: boolean
1011
sortSettings?: TableSortSettings
12+
sticky?: boolean
1113
visuallyHidden?: boolean
12-
onSortClick: () => void
1314
}
1415

1516
export const TableHeader = <T,>({
@@ -43,7 +44,9 @@ const BasicTableHeader = <T,>({
4344
textAlign: column.styles?.textAlign,
4445
width: column.styles?.width,
4546
}}
46-
className={styles.tableHeader}
47+
className={classNames(styles.tableHeader, {
48+
[styles.sticky]: column.sticky,
49+
})}
4750
>
4851
<BasicTooltip asChild content={column.tooltip}>
4952
<div
@@ -67,9 +70,9 @@ const BasicTableHeader = <T,>({
6770

6871
const SortableTableHeader = <T,>({
6972
column,
73+
onSortClick,
7074
sortSettings,
7175
visuallyHidden,
72-
onSortClick,
7376
}: TableHeaderProps<T>) => {
7477
const sortActive = sortSettings?.field === column.sortField
7578

@@ -87,6 +90,7 @@ const SortableTableHeader = <T,>({
8790
style={{ textAlign: column.styles?.textAlign }}
8891
className={classNames(styles.tableHeader, {
8992
[styles.active]: sortActive,
93+
[styles.sticky]: column.sticky,
9094
})}
9195
>
9296
<BasicTooltip asChild content={column.tooltip}>

‎ui/src/design-system/components/table/table/table.module.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,8 @@
9292
@media (hover: hover) {
9393
.tableContainer {
9494
tbody {
95-
tr:hover {
95+
tr:hover,
96+
tr:focus-within {
9697
background-color: $color-neutral-50;
9798

9899
td {

‎ui/src/design-system/components/table/table/table.tsx‎

Lines changed: 19 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -103,35 +103,22 @@ export const Table = <T extends { id: string }>({
103103
</div>
104104
</th>
105105
)}
106-
{columns
107-
.filter((column) => !column.sticky)
108-
.map((column) => (
109-
<TableHeader
110-
key={column.id}
111-
column={column}
112-
sortable={sortable}
113-
sortSettings={sortSettings}
114-
visuallyHidden={column.visuallyHidden}
115-
onSortClick={() => onSortClick(column)}
116-
/>
117-
))}
106+
{columns.map((column) => (
107+
<TableHeader
108+
key={column.id}
109+
column={column}
110+
onSortClick={() => onSortClick(column)}
111+
sortable={sortable}
112+
sortSettings={sortSettings}
113+
sticky={column.sticky}
114+
visuallyHidden={column.visuallyHidden}
115+
/>
116+
))}
118117
<th
119118
aria-hidden="true"
120119
className={tableHeaderStyles.tableHeader}
121120
style={{ width: '100%' }}
122121
/>
123-
{columns
124-
.filter((column) => column.sticky)
125-
.map((column) => (
126-
<TableHeader
127-
key={column.id}
128-
column={column}
129-
sortable={sortable}
130-
sortSettings={sortSettings}
131-
visuallyHidden={column.visuallyHidden}
132-
onSortClick={() => onSortClick(column)}
133-
/>
134-
))}
135122
</tr>
136123
</thead>
137124
<tbody>
@@ -153,21 +140,15 @@ export const Table = <T extends { id: string }>({
153140
</BasicTableCell>
154141
</td>
155142
)}
156-
{columns
157-
.filter((column) => !column.sticky)
158-
.map((column, columnIndex) => (
159-
<td key={column.id}>
160-
{column.renderCell(item, rowIndex, columnIndex)}
161-
</td>
162-
))}
143+
{columns.map((column, columnIndex) => (
144+
<td
145+
key={column.id}
146+
className={classNames({ [styles.sticky]: column.sticky })}
147+
>
148+
{column.renderCell(item, rowIndex, columnIndex)}
149+
</td>
150+
))}
163151
<td aria-hidden="true" />
164-
{columns
165-
.filter((column) => column.sticky)
166-
.map((column, columnIndex) => (
167-
<td key={column.id} className={styles.sticky}>
168-
{column.renderCell(item, rowIndex, columnIndex)}
169-
</td>
170-
))}
171152
</tr>
172153
))}
173154
</tbody>

‎ui/src/pages/algorithm-details/algorithm-details-dialog.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,6 @@ const AlgorithmDetailsContent = ({ algorithm }: { algorithm: Algorithm }) => (
7777
label={translate(STRING.FIELD_LABEL_TASK_TYPE)}
7878
value={algorithm.taskType}
7979
/>
80-
8180
<InputValue
8281
label={translate(STRING.FIELD_LABEL_CATEGORY_COUNT)}
8382
value={algorithm.categoryCount}

‎ui/src/pages/occurrences/occurrences-actions.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,8 @@ export const OccurrencesActions = ({
2424
return !agreed
2525
})
2626

27-
const canUpdate = occurrences[0]?.userPermissions.includes(
28-
UserPermission.Update
27+
const canUpdate = !occurrences.some(
28+
({ userPermissions }) => !userPermissions.includes(UserPermission.Update)
2929
)
3030

3131
if (!canUpdate) {
@@ -77,7 +77,7 @@ const Agree = ({
7777
occurrenceId: occurrence.id,
7878
taxonId: occurrence.determinationTaxon.id,
7979
})),
80-
[occurrences]
80+
[occurrences, userInfo?.id]
8181
)
8282

8383
const { createIdentifications, isLoading, isSuccess, error } =
@@ -95,9 +95,10 @@ const Agree = ({
9595
return (
9696
<BasicTooltip content={error}>
9797
<Button
98+
disabled={isLoading}
99+
onClick={() => createIdentifications(agreeParams)}
98100
size="small"
99101
variant="outline"
100-
onClick={() => createIdentifications(agreeParams)}
101102
>
102103
{error ? (
103104
<AlertCircleIcon className="w-4 h-4 mr-2 text-destructive" />

‎ui/src/pages/project/capture-sets/populate-capture-set.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export const PopulateCaptureSet = ({
3333
{error ? (
3434
<AlertCircleIcon className="w-4 h-4" />
3535
) : isLoading ? (
36-
<Loader2 className="w-4 h-4 ml-2 animate-spin" />
36+
<Loader2 className="w-4 h-4 animate-spin" />
3737
) : (
3838
<RefreshCcwIcon className="w-4 h-4" />
3939
)}

0 commit comments

Comments
 (0)