diff --git a/ui/src/pages/algorithm-details/algorithm-evaluations.tsx b/ui/src/pages/algorithm-details/algorithm-evaluations.tsx
new file mode 100644
index 000000000..f3a50b0b2
--- /dev/null
+++ b/ui/src/pages/algorithm-details/algorithm-evaluations.tsx
@@ -0,0 +1,71 @@
+import { Algorithm, AlgorithmEvaluation } from 'data-services/models/algorithm'
+import {
+ BasicTableCell,
+ Table,
+ TableBackgroundTheme,
+ TableColumn,
+ TextAlign,
+} from 'nova-ui-kit'
+import { STRING, translate } from 'utils/language'
+
+const ACCURACY_DECIMALS = 2
+
+const accuracyLabel = (accuracy?: number) =>
+ accuracy !== undefined
+ ? accuracy.toFixed(ACCURACY_DECIMALS)
+ : translate(STRING.VALUE_NOT_AVAILABLE)
+
+export const columns: TableColumn
[] = [
+ {
+ id: 'occurrence-set',
+ name: translate(STRING.FIELD_LABEL_EVALUATION_SET),
+ renderCell: (item: AlgorithmEvaluation) => (
+
+ ),
+ },
+ {
+ id: 'accuracy',
+ name: translate(STRING.FIELD_LABEL_ACCURACY),
+ styles: {
+ textAlign: TextAlign.Right,
+ },
+ renderCell: (item: AlgorithmEvaluation) => (
+
+ ),
+ },
+ {
+ id: 'accuracy-by-species',
+ name: translate(STRING.FIELD_LABEL_ACCURACY_BY_SPECIES),
+ styles: {
+ textAlign: TextAlign.Right,
+ },
+ renderCell: (item: AlgorithmEvaluation) => (
+
+ ),
+ },
+ {
+ id: 'occurrences-scored',
+ name: translate(STRING.FIELD_LABEL_OCCURRENCES_SCORED),
+ styles: {
+ textAlign: TextAlign.Right,
+ },
+ renderCell: (item: AlgorithmEvaluation) => (
+
+ ),
+ },
+]
+
+export const AlgorithmEvaluations = ({
+ algorithm,
+}: {
+ algorithm: Algorithm
+}) => (
+
+)
diff --git a/ui/src/pages/species-details/species-details.tsx b/ui/src/pages/species-details/species-details.tsx
index 81e8c5f53..7e09b527e 100644
--- a/ui/src/pages/species-details/species-details.tsx
+++ b/ui/src/pages/species-details/species-details.tsx
@@ -5,7 +5,10 @@ import { TaxonDetails } from 'components/taxon-details/taxon-details'
import { Tag } from 'components/taxon-tags/tag'
import { TagsForm } from 'components/taxon-tags/tags-form'
import { useProjectDetails } from 'data-services/hooks/projects/useProjectDetails'
-import { SpeciesDetails as Species } from 'data-services/models/species-details'
+import {
+ AlgorithmPerformance,
+ SpeciesDetails as Species,
+} from 'data-services/models/species-details'
import { ExternalLinkIcon, LockIcon } from 'lucide-react'
import {
Box,
@@ -31,6 +34,19 @@ export const TABS = {
CHARTS: 'charts',
}
+const ACCURACY_DECIMALS = 2
+
+const performanceLabel = ({
+ algorithmName,
+ accuracy,
+ correct,
+ occurrencesScored,
+ occurrenceSetName,
+}: AlgorithmPerformance) =>
+ `${algorithmName}: ${accuracy.toFixed(
+ ACCURACY_DECIMALS
+ )} (${correct}/${occurrencesScored}) on ${occurrenceSetName}`
+
export const SpeciesDetails = ({
species,
selectedTab,
@@ -195,6 +211,26 @@ export const SpeciesDetails = ({
/>
+