-
{`${identification.score.toPrecision(4)}`}
+}: IdentificationSummaryProps) => (
+
+
+ {user ? (
+
+ {user.image ? (
+
![]({user.image})
+ ) : (
+
+ )}
+ ) : (
+
)}
- {identification.terminal !== undefined && (
-
- {identification.terminal
- ? translate(STRING.TERMINAL_CLASSIFICATION)
- : translate(STRING.INTERMEDIATE_CLASSIFICATION)}
-
- )}
-
- {formattedTime}
-
+
+ {user?.name ?? translate(STRING.MACHINE_SUGGESTION)}
+
- )
-}
+ {identification.algorithm && (
+
+ {identification.algorithm.name}
+
+ )}
+ {identification.score && (
+
+
+ {translate(STRING.FIELD_LABEL_SCORE)}{' '}
+ {`${identification.score.toPrecision(4)}`}
+
+ {identification.terminal !== undefined && (
+
+ {' | '}
+ {identification.terminal
+ ? translate(STRING.TERMINAL_CLASSIFICATION)
+ : translate(STRING.INTERMEDIATE_CLASSIFICATION)}
+
+ )}
+
+ )}
+
+)
diff --git a/ui/src/pages/occurrence-details/algorithm-details/algorithm-details.module.scss b/ui/src/pages/occurrence-details/algorithm-details/algorithm-details.module.scss
deleted file mode 100644
index ec2482809..000000000
--- a/ui/src/pages/occurrence-details/algorithm-details/algorithm-details.module.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-@import 'src/design-system/variables/variables.scss';
-@import 'src/design-system/variables/colors.scss';
-@import 'src/design-system/variables/typography.scss';
-
-.algorithmDetails {
- display: block;
- @include mono();
- color: $color-neutral-600;
-}
diff --git a/ui/src/pages/occurrence-details/algorithm-details/algorithm-details.tsx b/ui/src/pages/occurrence-details/algorithm-details/algorithm-details.tsx
deleted file mode 100644
index d6dcbb807..000000000
--- a/ui/src/pages/occurrence-details/algorithm-details/algorithm-details.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Algorithm } from 'data-services/models/algorithm'
-import { Tooltip } from 'design-system/components/tooltip/tooltip'
-import styles from './algorithm-details.module.scss'
-
-export const AlgorithmDetails = ({ algorithm }: { algorithm: Algorithm }) => {
- if (!algorithm.description) {
- return
{algorithm.name}
- }
-
- return (
-
- {algorithm.name}
-
- )
-}
diff --git a/ui/src/pages/occurrence-details/identification-card/identification-card.module.scss b/ui/src/pages/occurrence-details/identification-card/identification-card.module.scss
index 5c402035d..33c814d77 100644
--- a/ui/src/pages/occurrence-details/identification-card/identification-card.module.scss
+++ b/ui/src/pages/occurrence-details/identification-card/identification-card.module.scss
@@ -11,6 +11,14 @@
overflow: hidden;
}
+.timestamp {
+ display: block;
+ color: $color-neutral-300;
+ padding: 4px 8px;
+ text-align: right;
+ @include paragraph-x-small();
+}
+
.header {
padding: 16px;
border-bottom: 1px solid $color-neutral-100;
diff --git a/ui/src/pages/occurrence-details/identification-card/identification-card.tsx b/ui/src/pages/occurrence-details/identification-card/identification-card.tsx
index 36c0d3521..d6f38d8e8 100644
--- a/ui/src/pages/occurrence-details/identification-card/identification-card.tsx
+++ b/ui/src/pages/occurrence-details/identification-card/identification-card.tsx
@@ -11,6 +11,7 @@ import { IdentificationSummary } from 'design-system/components/identification/i
import { useState } from 'react'
import { useParams } from 'react-router-dom'
import { APP_ROUTES } from 'utils/constants'
+import { getFormatedDateTimeString } from 'utils/date/getFormatedDateTimeString/getFormatedDateTimeString'
import { getAppRoute } from 'utils/getAppRoute'
import { STRING, translate } from 'utils/language'
import { UserInfo, UserPermission } from 'utils/user/types'
@@ -42,6 +43,9 @@ export const IdentificationCard = ({
)
const showAgree = !byCurrentUser && canAgree
const showDelete = byCurrentUser && canDelete
+ const formattedTime = getFormatedDateTimeString({
+ date: new Date(identification.createdAt),
+ })
if (deleteIdOpen) {
return (
@@ -53,50 +57,53 @@ export const IdentificationCard = ({
}
return (
-
-
- {identification.applied && (
-
- )}
-
-
-
-
- getAppRoute({
- to: APP_ROUTES.TAXON_DETAILS({
- projectId: projectId as string,
- taxonId: id,
- }),
- })
- }
- />
- {identification.comment && (
- "{identification.comment}"
- )}
-
- {showAgree && (
-
+
+
{formattedTime}
+
+
+ {identification.applied && (
+
)}
- {showDelete && (
- setDeleteIdOpen(true)}
- />
+
+
+
+
+ getAppRoute({
+ to: APP_ROUTES.TAXON_DETAILS({
+ projectId: projectId as string,
+ taxonId: id,
+ }),
+ })
+ }
+ />
+ {identification.comment && (
+ "{identification.comment}"
)}
+
+ {showAgree && (
+
+ )}
+ {showDelete && (
+
setDeleteIdOpen(true)}
+ />
+ )}
+
diff --git a/ui/src/pages/occurrence-details/occurrence-details.module.scss b/ui/src/pages/occurrence-details/occurrence-details.module.scss
index bae127649..6d77cea2f 100644
--- a/ui/src/pages/occurrence-details/occurrence-details.module.scss
+++ b/ui/src/pages/occurrence-details/occurrence-details.module.scss
@@ -73,7 +73,7 @@
.identifications {
display: grid;
grid-template-columns: 1fr;
- gap: 16px;
+ gap: 32px;
padding: 4px 0;
}