Skip to content

Commit 3cc615f

Browse files
annavikmihow
annavik
and
mihow
authored
Add missing job filters (#645)
* feature: enable missing job filters on backend * feature: enable missing job filters on frontend * fix: tweak empty state * feature: add links from session details * fix: cleanup filter settings * chore: update formatting --------- Co-authored-by: Michael Bunsen <notbot@gmail.com>
1 parent c2dc819 commit 3cc615f

File tree

10 files changed

+70
-18
lines changed

10 files changed

+70
-18
lines changed

‎ami/jobs/views.py‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,9 @@ class JobViewSet(DefaultViewSet):
4747
"project",
4848
"deployment",
4949
"source_image_collection",
50+
"source_image_single",
5051
"pipeline",
52+
"job_type_key",
5153
]
5254
ordering_fields = [
5355
"name",

‎ui/src/components/empty-state/empty-state.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,13 @@ export const EmptyState = () => {
1414
: STRING.MESSAGE_NO_RESULTS
1515
)}
1616
</span>
17-
{activeFilters.length && (
17+
{activeFilters.length ? (
1818
<Button
1919
onClick={() => filters.map((filter) => clearFilter(filter.field))}
2020
>
2121
{translate(STRING.CLEAR_FILTERS)}
2222
</Button>
23-
)}
23+
) : null}
2424
</div>
2525
)
2626
}

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,21 +21,21 @@ const ComponentMap: {
2121
} = {
2222
algorithm: AlgorithmFilter,
2323
classification_threshold: ScoreFilter,
24-
date_start: DateFilter,
25-
date_end: DateFilter,
2624
collection: CollectionFilter,
25+
date_end: DateFilter,
26+
date_start: DateFilter,
2727
deployment: StationFilter,
2828
detections__source_image: ImageFilter,
2929
event: SessionFilter,
30-
pipeline: PipelineFilter,
30+
job_type_key: TypeFilter,
3131
not_algorithm: NotAlgorithmFilter,
32+
pipeline: PipelineFilter,
3233
source_image_collection: CollectionFilter,
3334
source_image_single: ImageFilter,
3435
status: StatusFilter,
3536
taxon: TaxonFilter,
36-
type: TypeFilter,
37-
verified: VerificationStatusFilter,
3837
verified_by_me: VerifiedByFilter,
38+
verified: VerificationStatusFilter,
3939
}
4040

4141
interface FilterControlProps {

‎ui/src/data-services/models/capture.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,10 @@ export class Capture {
101101
return this._capture.detections_count ?? 0
102102
}
103103

104+
get numJobs(): number {
105+
return this._capture.jobs?.length ?? 0
106+
}
107+
104108
get numOccurrences(): number {
105109
return this._capture.occurrences_count ?? 0
106110
}

‎ui/src/pages/jobs/jobs.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -54,13 +54,11 @@ export const Jobs = () => {
5454
<div className="flex flex-col gap-6 md:flex-row">
5555
<div className="space-y-6">
5656
<FilterSection defaultOpen>
57+
<FilterControl field="source_image_single" readonly />
5758
<FilterControl field="status" />
58-
{/* TODO: Uncomment when supported by backend */}
59-
{/* <FilterControl field="type" /> */}
59+
<FilterControl field="job_type_key" />
6060
<FilterControl field="deployment" />
6161
<FilterControl field="pipeline" />
62-
{/* TODO: Uncomment when supported by backend */}
63-
{/* <FilterControl field="source_image_single" readonly /> */}
6462
<FilterControl field="source_image_collection" />
6563
</FilterSection>
6664
</div>

‎ui/src/pages/session-details/playback/capture-details/capture-details.module.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,15 @@
4040
display: block;
4141
@include paragraph-x-small();
4242
color: $color-generic-white;
43+
44+
&.bubble {
45+
height: auto;
46+
padding: 6px 8px 4px;
47+
border-radius: 4px;
48+
border: 1px solid $color-neutral-600;
49+
background-color: $color-neutral-600;
50+
font-weight: 600;
51+
}
4352
}
4453

4554
@media only screen and (max-width: $small-screen-breakpoint) {

‎ui/src/pages/session-details/playback/capture-details/capture-details.tsx‎

Lines changed: 38 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import classNames from 'classnames'
12
import { useStarCapture } from 'data-services/hooks/captures/useStarCapture'
23
import { usePipelines } from 'data-services/hooks/pipelines/usePipelines'
34
import { useProjectDetails } from 'data-services/hooks/projects/useProjectDetails'
@@ -10,7 +11,9 @@ import { IconType } from 'design-system/components/icon/icon'
1011
import { Select, SelectTheme } from 'design-system/components/select/select'
1112
import { Tooltip } from 'design-system/components/tooltip/tooltip'
1213
import { useState } from 'react'
13-
import { useParams } from 'react-router-dom'
14+
import { Link, useParams } from 'react-router-dom'
15+
import { APP_ROUTES } from 'utils/constants'
16+
import { getAppRoute } from 'utils/getAppRoute'
1417
import { STRING, translate } from 'utils/language'
1518
import { useUser } from 'utils/user/userContext'
1619
import styles from './capture-details.module.scss'
@@ -24,6 +27,7 @@ export const CaptureDetails = ({
2427
captureId: string
2528
}) => {
2629
const { user } = useUser()
30+
const { projectId } = useParams()
2731

2832
if (!capture) {
2933
return null
@@ -69,6 +73,25 @@ export const CaptureDetails = ({
6973
<JobControls capture={capture} />
7074
</div>
7175
)}
76+
<div>
77+
<span className={styles.label}>
78+
{translate(STRING.FIELD_LABEL_JOBS)}
79+
</span>
80+
<Link
81+
to={getAppRoute({
82+
to: APP_ROUTES.JOBS({
83+
projectId: projectId as string,
84+
}),
85+
filters: {
86+
source_image_single: capture.id,
87+
},
88+
})}
89+
>
90+
<span className={classNames(styles.value, styles.bubble)}>
91+
{capture.numJobs}
92+
</span>
93+
</Link>
94+
</div>
7295
<div>
7396
<span className={styles.label}>
7497
{translate(STRING.FIELD_LABEL_DETECTIONS)}
@@ -79,7 +102,20 @@ export const CaptureDetails = ({
79102
<span className={styles.label}>
80103
{translate(STRING.FIELD_LABEL_OCCURRENCES)}
81104
</span>
82-
<span className={styles.value}>{capture.numOccurrences}</span>
105+
<Link
106+
to={getAppRoute({
107+
to: APP_ROUTES.OCCURRENCES({
108+
projectId: projectId as string,
109+
}),
110+
filters: {
111+
detections__source_image: capture.id,
112+
},
113+
})}
114+
>
115+
<span className={classNames(styles.value, styles.bubble)}>
116+
{capture.numOccurrences}
117+
</span>
118+
</Link>
83119
</div>
84120
<div>
85121
<span className={styles.label}>

‎ui/src/utils/getAppRoute.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ type FilterType =
77
| 'taxon'
88
| 'timestamp'
99
| 'collection'
10+
| 'source_image_single'
1011

1112
export const getAppRoute = ({
1213
to,

‎ui/src/utils/language.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,7 @@ export enum STRING {
7878
FIELD_LABEL_ID,
7979
FIELD_LABEL_IMAGE,
8080
FIELD_LABEL_ICON,
81+
FIELD_LABEL_JOBS,
8182
FIELD_LABEL_LAST_SYNCED,
8283
FIELD_LABEL_LATITUDE,
8384
FIELD_LABEL_LOCATION,
@@ -298,6 +299,7 @@ const ENGLISH_STRINGS: { [key in STRING]: string } = {
298299
[STRING.FIELD_LABEL_ID]: 'ID',
299300
[STRING.FIELD_LABEL_IMAGE]: 'Cover image',
300301
[STRING.FIELD_LABEL_ICON]: 'Icon',
302+
[STRING.FIELD_LABEL_JOBS]: 'Jobs',
301303
[STRING.FIELD_LABEL_LAST_SYNCED]: 'Last synced with data source',
302304
[STRING.FIELD_LABEL_LATITUDE]: 'Latitude',
303305
[STRING.FIELD_LABEL_LOCATION]: 'Location',

‎ui/src/utils/useFilters.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export const AVAILABLE_FILTERS = [
1515
},
1616
{
1717
label: 'Collection',
18-
field: 'source_image_collection', // This is for viewing Jobs by collection. @TODO can we update this key to "collection" to streamline?
18+
field: 'source_image_collection', // This is for viewing Jobs by collection. @TODO: Can we update this key to "collection" to streamline?
1919
},
2020
{
2121
label: 'Station',
@@ -30,8 +30,8 @@ export const AVAILABLE_FILTERS = [
3030
field: 'date_start',
3131
},
3232
{
33-
label: 'Image',
34-
field: 'detections__source_image', // TODO: Can we update this key to "source_image" to streamline?
33+
label: 'Source image',
34+
field: 'detections__source_image', // This is for viewing Occurrences by source image. @TODO: Can we update this key to "source_image" to streamline?
3535
},
3636
{
3737
label: 'Session',
@@ -51,15 +51,15 @@ export const AVAILABLE_FILTERS = [
5151
},
5252
{
5353
label: 'Source image',
54-
field: 'source_image_single', // TODO: Can we update this key to "source_image" to streamline?
54+
field: 'source_image_single', // This is for viewing Jobs by source image. @TODO: Can we update this key to "source_image" to streamline?
5555
},
5656
{
5757
label: 'Status',
5858
field: 'status',
5959
},
6060
{
6161
label: 'Type',
62-
field: 'type',
62+
field: 'job_type_key',
6363
},
6464
{
6565
label: 'Verification status',

0 commit comments

Comments
 (0)