Show more algorithm details in occurrence identification history (#378)

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

@@ -27,6 +27,10 @@ export class Algorithm {
     return this._algorithm.name
   }
 
+  get url(): string {
+    return this._algorithm.url
+  }
+
   get updatedAt(): string | undefined {
     if (!this._algorithm.updated_at) {
       return undefined

ui/src/data-services/models/occurrence-details.ts

@@ -1,6 +1,7 @@
 import _ from 'lodash'
 import { getFormatedTimeString } from 'utils/date/getFormatedTimeString/getFormatedTimeString'
 import { UserPermission } from 'utils/user/types'
+import { Algorithm } from './algorithm'
 import { Occurrence, ServerOccurrence } from './occurrence'
 import { Taxon } from './taxa'
 
@@ -12,6 +13,7 @@ export interface Identification {
   overridden?: boolean
   taxon: Taxon
   comment?: string
+  algorithm?: Algorithm
   userPermissions: UserPermission[]
   createdAt: string
 }
@@ -26,6 +28,7 @@ export interface HumanIdentification extends Identification {
 }
 
 export interface MachinePrediction extends Identification {
+  algorithm: Algorithm
   score: number
 }
 
@@ -80,6 +83,7 @@ export class OccurrenceDetails extends Occurrence {
           overridden,
           taxon,
           score: p.score,
+          algorithm: p.algorithm,
           userPermissions: p.user_permissions,
           createdAt: p.created_at,
         }

ui/src/design-system/variables/typography.scss

@@ -110,3 +110,9 @@
   line-height: 15px;
   text-transform: uppercase;
 }
+
+@mixin mono {
+  @include paragraph-xx-small();
+  font-family: monospace;
+  font-weight: 400;
+}

ui/src/pages/occurrence-details/algorithm-details/algorithm-details.module.scss

@@ -0,0 +1,10 @@
+@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();
+    padding-bottom: 2px;
+    color: $color-neutral-600;
+}

ui/src/pages/occurrence-details/algorithm-details/algorithm-details.tsx

@@ -0,0 +1,13 @@
+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 | undefined }) => {
+    return algorithm ? (
+        <Tooltip content={`id: ${algorithm.id} created: ${algorithm.description} jobs: `}>
+            <div className={styles.algorithmDetails}>
+                {algorithm.name}
+            </div>
+        </Tooltip>
+    ) : null
+}

ui/src/pages/occurrence-details/identification-card/identification-card.module.scss

@@ -13,6 +13,7 @@
 .content {
   display: flex;
   flex-direction: column;
+  gap: 12px;
   padding: 16px;
   position: relative;
 }

ui/src/pages/occurrence-details/identification-card/identification-card.tsx

@@ -16,6 +16,7 @@ import { STRING, translate } from 'utils/language'
 import { UserInfo, UserPermission } from 'utils/user/types'
 import { Agree } from '../agree/agree'
 import { userAgreed } from '../agree/userAgreed'
+import { AlgorithmDetails } from '../algorithm-details/algorithm-details'
 import { StatusLabel } from '../status-label/status-label'
 import styles from './identification-card.module.scss'
 
@@ -61,6 +62,7 @@ export const IdentificationCard = ({
           {identification.applied && (
             <StatusLabel label={translate(STRING.ID_APPLIED)} />
           )}
+          <AlgorithmDetails algorithm={identification.algorithm} />
           <TaxonInfo
             overridden={identification.overridden}
             taxon={identification.taxon}