Skip to content

Commit 873f974

Browse files
vanessavmacvanessavmac
committed
UI improvements
1 parent daec86d commit 873f974

File tree

8 files changed

+103
-66
lines changed

8 files changed

+103
-66
lines changed

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { getFormatedDateTimeString } from 'utils/date/getFormatedDateTimeString/getFormatedDateTimeString'
2+
import { snakeCaseToSentenceCase } from 'utils/snakeCaseToSentenceCase'
23

34
export type ServerAlgorithm = any // TODO: Update this type
45

@@ -50,7 +51,7 @@ export class Algorithm {
5051
}
5152

5253
get taskType(): string {
53-
return this._algorithm.task_type
54+
return snakeCaseToSentenceCase(this._algorithm.task_type)
5455
}
5556

5657
get categoryMapURI(): string {

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,11 @@ export class Pipeline {
7575
})
7676
}
7777

78-
get versionLabel(): string {
78+
get versionLabel(): string | undefined {
79+
if (this._pipeline.version == undefined) {
80+
return undefined
81+
}
82+
7983
return this._pipeline.version_name?.length
8084
? `${this._pipeline.version} "${this._pipeline.version_name?.length}"`
8185
: `${this._pipeline.version}`

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

Lines changed: 35 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -64,8 +64,8 @@ const AlgorithmDetailsContent = ({ algorithm }: { algorithm: Algorithm }) => (
6464
</FormRow>
6565
<FormRow>
6666
<InputValue
67-
label={translate(STRING.FIELD_LABEL_KEY)}
68-
value={algorithm.key}
67+
label={translate(STRING.FIELD_LABEL_VERSION)}
68+
value={algorithm.version}
6969
/>
7070
<InputValue
7171
label={translate(STRING.FIELD_LABEL_TASK_TYPE)}
@@ -74,47 +74,50 @@ const AlgorithmDetailsContent = ({ algorithm }: { algorithm: Algorithm }) => (
7474
</FormRow>
7575

7676
<FormRow>
77-
<InputValue
78-
label={translate(STRING.FIELD_LABEL_CREATED_AT)}
79-
value={algorithm.createdAt}
80-
/>
81-
<InputValue
82-
label={translate(STRING.FIELD_LABEL_UPDATED_AT)}
83-
value={algorithm.updatedAt}
84-
/>
85-
</FormRow>
86-
<FormRow>
87-
<InputValue
88-
label={translate(STRING.FIELD_LABEL_VERSION)}
89-
value={algorithm.version}
90-
/>
9177
<InputValue
9278
label={translate(STRING.FIELD_LABEL_DESCRIPTION)}
9379
value={algorithm.description}
9480
/>
81+
<InputValue
82+
label={translate(STRING.FIELD_LABEL_CREATED_AT)}
83+
value={algorithm.createdAt}
84+
/>
9585
</FormRow>
9686
<FormRow>
9787
<InputValue
98-
label={translate(STRING.FIELD_LABEL_URI)}
99-
value={algorithm.uri || 'None'}
100-
to={algorithm.uri || undefined}
88+
label={translate(STRING.FIELD_LABEL_UPDATED_AT)}
89+
value={algorithm.updatedAt}
10190
/>
10291
</FormRow>
10392
</FormSection>
10493
{algorithm.categoryMapURI && (
105-
<FormSection title={translate(STRING.CATEGORY_MAP_DETAILS)}>
106-
<a
107-
className={buttonVariants({
108-
size: 'small',
109-
variant: 'outline',
110-
})}
111-
href={algorithm.categoryMapURI}
112-
rel="noreferrer"
113-
target="_blank"
114-
>
115-
<span>View category map API</span>
116-
<ExternalLinkIcon className="w-4 h-4 ml-2" />
117-
</a>
94+
<FormSection title={translate(STRING.EXTERNAL_RESOURCES)}>
95+
<div className="grid grid-cols-2 gap-4">
96+
<a
97+
className={buttonVariants({
98+
size: 'small',
99+
variant: 'outline',
100+
})}
101+
href={algorithm.uri}
102+
rel="noreferrer"
103+
target="_blank"
104+
>
105+
<span>{translate(STRING.FIELD_LABEL_ALGORITHM_URI)}</span>
106+
<ExternalLinkIcon className="w-4 h-4 ml-2" />
107+
</a>
108+
<a
109+
className={buttonVariants({
110+
size: 'small',
111+
variant: 'outline',
112+
})}
113+
href={algorithm.categoryMapURI}
114+
rel="noreferrer"
115+
target="_blank"
116+
>
117+
<span>{translate(STRING.FIELD_LABEL_CATEGORY_MAP_DETAILS)}</span>
118+
<ExternalLinkIcon className="w-4 h-4 ml-2" />
119+
</a>
120+
</div>
118121
</FormSection>
119122
)}
120123
</>

‎ui/src/pages/occurrence-details/identification-card/machine-prediction.tsx‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import {
1515
TaxonDetails,
1616
} from 'nova-ui-kit'
1717
import { ReactNode, useState } from 'react'
18-
import { Link, useParams } from 'react-router-dom'
18+
import { Link, useNavigate, useParams } from 'react-router-dom'
1919
import { APP_ROUTES } from 'utils/constants'
2020
import { getFormatedDateTimeString } from 'utils/date/getFormatedDateTimeString/getFormatedDateTimeString'
2121
import { getAppRoute } from 'utils/getAppRoute'
@@ -38,6 +38,8 @@ export const MachinePrediction = ({
3838
identification.id,
3939
open
4040
)
41+
const navigate = useNavigate()
42+
const { projectId } = useParams()
4143
const topN = classification?.topN.filter(
4244
({ taxon }) => taxon.id !== identification.taxon.id
4345
)
@@ -67,6 +69,17 @@ export const MachinePrediction = ({
6769
title={
6870
identification.algorithm?.name ?? translate(STRING.MACHINE_SUGGESTION)
6971
}
72+
onTitleClick={
73+
identification.algorithm
74+
? () =>
75+
navigate(
76+
APP_ROUTES.ALGORITHM_DETAILS({
77+
projectId: projectId as string,
78+
algorithmId: identification.algorithm?.id,
79+
})
80+
)
81+
: undefined
82+
}
7083
>
7184
<MachinePredictionDetails
7285
applied={identification.applied}

‎ui/src/pages/pipeline-details/pipeline-algorithms.tsx‎

Lines changed: 29 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,30 @@ import {
55
Table,
66
TableBackgroundTheme,
77
} from 'design-system/components/table/table/table'
8-
import { TableColumn } from 'design-system/components/table/types'
8+
import { CellTheme, TableColumn } from 'design-system/components/table/types'
9+
import { Link, useParams } from 'react-router-dom'
10+
import { APP_ROUTES } from 'utils/constants'
911
import { STRING, translate } from 'utils/language'
1012

11-
export const columns: TableColumn<Algorithm>[] = [
13+
export const columns: (projectId: string) => TableColumn<Algorithm>[] = (
14+
projectId: string
15+
) => [
1216
{
1317
id: 'name',
1418
name: translate(STRING.FIELD_LABEL_NAME),
1519
renderCell: (item: Algorithm) => (
16-
<BasicTableCell
17-
value={item.name}
18-
style={{ width: '240px', whiteSpace: 'normal' }}
19-
/>
20+
<Link
21+
to={APP_ROUTES.ALGORITHM_DETAILS({
22+
projectId: projectId,
23+
algorithmId: item.id,
24+
})}
25+
>
26+
<BasicTableCell
27+
value={item.name}
28+
style={{ width: '240px', whiteSpace: 'normal' }}
29+
theme={CellTheme.Primary}
30+
/>
31+
</Link>
2032
),
2133
},
2234
{
@@ -39,17 +51,16 @@ export const columns: TableColumn<Algorithm>[] = [
3951
name: translate(STRING.FIELD_LABEL_UPDATED_AT),
4052
renderCell: (item: Algorithm) => <BasicTableCell value={item.updatedAt} />,
4153
},
42-
{
43-
id: 'key',
44-
name: translate(STRING.FIELD_LABEL_SLUG),
45-
renderCell: (item: Algorithm) => <BasicTableCell value={item.key} />,
46-
},
4754
]
4855

49-
export const PipelineAlgorithms = ({ pipeline }: { pipeline: Pipeline }) => (
50-
<Table
51-
backgroundTheme={TableBackgroundTheme.White}
52-
items={pipeline.algorithms}
53-
columns={columns}
54-
/>
55-
)
56+
export const PipelineAlgorithms = ({ pipeline }: { pipeline: Pipeline }) => {
57+
const { projectId } = useParams()
58+
59+
return (
60+
<Table
61+
backgroundTheme={TableBackgroundTheme.White}
62+
items={pipeline.algorithms}
63+
columns={columns(projectId as string)}
64+
/>
65+
)
66+
}

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -54,23 +54,23 @@ const PipelineDetailsContent = ({ pipeline }: { pipeline: Pipeline }) => (
5454
<FormSection title={translate(STRING.SUMMARY)}>
5555
<FormRow>
5656
<InputValue
57-
label={translate(STRING.FIELD_LABEL_NAME)}
58-
value={pipeline.name}
57+
label={translate(STRING.FIELD_LABEL_ID)}
58+
value={pipeline.id}
5959
/>
6060
<InputValue
61-
label={translate(STRING.FIELD_LABEL_DESCRIPTION)}
62-
value={pipeline.description}
61+
label={translate(STRING.FIELD_LABEL_NAME)}
62+
value={pipeline.name}
6363
/>
6464
</FormRow>
6565
<FormRow>
66-
<InputValue
67-
label={translate(STRING.FIELD_LABEL_SLUG)}
68-
value={pipeline.slug}
69-
/>
7066
<InputValue
7167
label={translate(STRING.FIELD_LABEL_VERSION)}
7268
value={pipeline.versionLabel}
7369
/>
70+
<InputValue
71+
label={translate(STRING.FIELD_LABEL_DESCRIPTION)}
72+
value={pipeline.description}
73+
/>
7474
</FormRow>
7575
<FormRow>
7676
<InputValue

‎ui/src/pages/project/algorithms/algorithms-columns.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,10 @@ export const columns: (projectId: string) => TableColumn<Algorithm>[] = (
3333
id: 'description',
3434
name: 'Description',
3535
renderCell: (item: Algorithm) => (
36-
<BasicTableCell value={item.description} />
36+
<BasicTableCell
37+
value={item.description}
38+
style={{ width: '480px', whiteSpace: 'normal' }}
39+
/>
3740
),
3841
},
3942
{

‎ui/src/utils/language.ts‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@ export enum STRING {
6161
/* FIELD_LABEL */
6262
FIELD_LABEL_AVG_TEMP,
6363
FIELD_LABEL_BEST_SCORE,
64+
FIELD_LABEL_CATEGORY_MAP_DETAILS,
6465
FIELD_LABEL_CATEGORY_MAP_ID,
6566
FIELD_LABEL_CAPTURES,
6667
FIELD_LABEL_CAPTURES_WITH_DETECTIONS,
@@ -139,7 +140,7 @@ export enum STRING {
139140
FIELD_LABEL_TYPE,
140141
FIELD_LABEL_FIRST_DATE,
141142
FIELD_LABEL_LAST_DATE,
142-
FIELD_LABEL_URI,
143+
FIELD_LABEL_ALGORITHM_URI,
143144
FIELD_LABEL_UPDATED_AT,
144145
FIELD_LABEL_UPLOAD_CAPTURES,
145146
FIELD_LABEL_VERSION,
@@ -230,11 +231,11 @@ export enum STRING {
230231
APPLY_ID,
231232
APPLY_ID_SHORT,
232233
BACK_TO_LOGIN,
233-
CATEGORY_MAP_DETAILS,
234234
CLOSE,
235235
COLUMNS,
236236
CONNECTED,
237237
CONNECTING,
238+
EXTERNAL_RESOURCES,
238239
FORGOT_PASSWORD,
239240
FORGOT_PASSWORD_DETAILS,
240241
ID_APPLIED,
@@ -309,8 +310,10 @@ const ENGLISH_STRINGS: { [key in STRING]: string } = {
309310
[STRING.VIEW_PUBLIC_PROJECTS]: 'View public projects',
310311

311312
/* FIELD_LABEL */
313+
[STRING.FIELD_LABEL_ALGORITHM_URI]: 'Algorithm source',
312314
[STRING.FIELD_LABEL_AVG_TEMP]: 'Avg temp',
313315
[STRING.FIELD_LABEL_BEST_SCORE]: 'Best score',
316+
[STRING.FIELD_LABEL_CATEGORY_MAP_DETAILS]: 'Category map details',
314317
[STRING.FIELD_LABEL_CATEGORY_MAP_ID]: 'Category map ID',
315318
[STRING.FIELD_LABEL_CAPTURES]: 'Captures',
316319
[STRING.FIELD_LABEL_CAPTURES_WITH_DETECTIONS]: 'Captures w/detections',
@@ -390,7 +393,6 @@ const ENGLISH_STRINGS: { [key in STRING]: string } = {
390393
[STRING.FIELD_LABEL_FIRST_DATE]: 'First date',
391394
[STRING.FIELD_LABEL_LAST_DATE]: 'Last date',
392395
[STRING.FIELD_LABEL_UPLOAD_CAPTURES]: 'Upload images',
393-
[STRING.FIELD_LABEL_URI]: 'URI',
394396
[STRING.FIELD_LABEL_UPDATED_AT]: 'Updated at',
395397
[STRING.FIELD_LABEL_VERSION]: 'Version',
396398
[STRING.FIELD_LABEL_VERSION_NAME]: 'Version Name',
@@ -524,11 +526,11 @@ const ENGLISH_STRINGS: { [key in STRING]: string } = {
524526
[STRING.APPLY_ID]: 'Apply ID',
525527
[STRING.APPLY_ID_SHORT]: 'Apply',
526528
[STRING.BACK_TO_LOGIN]: 'Back to login',
527-
[STRING.CATEGORY_MAP_DETAILS]: 'Category map details',
528529
[STRING.CLOSE]: 'Close',
529530
[STRING.COLUMNS]: 'Columns',
530531
[STRING.CONNECTED]: 'Connected',
531532
[STRING.CONNECTING]: 'Connecting...',
533+
[STRING.EXTERNAL_RESOURCES]: 'External resources',
532534
[STRING.FORGOT_PASSWORD]: 'Forgot password?',
533535
[STRING.FORGOT_PASSWORD_DETAILS]: `No worries, we'll send you reset instructions.`,
534536
[STRING.ID_APPLIED]: 'ID applied',

0 commit comments

Comments
 (0)