AnnotationDetailsContent.tsx•2.9 kB
import { Flex, Text, View } from "@phoenix/components";
import { AnnotationColorSwatch } from "@phoenix/components/annotation/AnnotationColorSwatch";
import { Truncate } from "@phoenix/components/utility/Truncate";
import { floatFormatter } from "@phoenix/utils/numberFormatUtils";
import type { Annotation } from "./types";
/**
* A component that displays the details of a particular annotatio
*/
export function AnnotationDetailsContent({
annotation,
}: {
annotation: Annotation;
}) {
return (
<Flex
direction="column"
gap="size-100"
height="100%"
justifyContent="space-between"
>
<View>
<Flex direction="row" gap="size-100" alignItems="center">
<AnnotationColorSwatch annotationName={annotation.name} />
<Text weight="heavy" color="inherit" size="L" elementType="h3">
{annotation.name}
</Text>
</Flex>
<View paddingTop="size-100" minWidth="150px">
<Flex direction="row" justifyContent="space-between">
<Text weight="heavy" color="inherit">
label
</Text>
<Text color="inherit" title={annotation.label ?? undefined}>
<Truncate maxWidth="200px">{annotation.label || "--"}</Truncate>
</Text>
</Flex>
<Flex direction="row" justifyContent="space-between">
<Text weight="heavy" color="inherit">
score
</Text>
<Text color="inherit" fontFamily="mono">
{floatFormatter(annotation.score)}
</Text>
</Flex>
{annotation.annotatorKind ? (
<Flex direction="row" justifyContent="space-between">
<Text weight="heavy" color="inherit">
annotator kind
</Text>
<Text color="inherit">{annotation.annotatorKind}</Text>
</Flex>
) : null}
</View>
{annotation.explanation ? (
<View paddingTop="size-50">
<Flex direction="column">
<Text weight="heavy" color="inherit">
explanation
</Text>
<View maxHeight="300px" overflow="auto">
<Text color="inherit">{annotation.explanation}</Text>
</View>
</Flex>
</View>
) : null}
{annotation.createdAt ? (
<Flex
direction="row"
justifyContent="space-between"
wrap="wrap"
gap="size-100"
>
<Text weight="heavy" color="inherit">
created at
</Text>
<Text color="inherit">
{new Date(annotation.createdAt)
.toLocaleString()
.split(",")
.join(",\n")}
</Text>
</Flex>
) : null}
</View>
</Flex>
);
}