Skip to content

Commit

Permalink
Add annotations in the aside
Browse files Browse the repository at this point in the history
  • Loading branch information
mikeldking committed Jul 30, 2024
1 parent 5553ec2 commit eaaef2f
Show file tree
Hide file tree
Showing 4 changed files with 151 additions and 27 deletions.
33 changes: 32 additions & 1 deletion app/src/pages/trace/SpanAside.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import React, { PropsWithChildren, useMemo } from "react";
import { graphql, useRefetchableFragment } from "react-relay";
import { css } from "@emotion/react";

import { Flex, Text, View } from "@arizeai/components";

import { AnnotationLabel } from "@phoenix/components/annotation";
import { LatencyText } from "@phoenix/components/trace/LatencyText";
import { SpanStatusCodeIcon } from "@phoenix/components/trace/SpanStatusCodeIcon";
import { TokenCount } from "@phoenix/components/trace/TokenCount";
Expand All @@ -12,8 +14,15 @@ import { fullTimeFormatter } from "@phoenix/utils/timeFormatUtils";
import { SpanAside_span$key } from "./__generated__/SpanAside_span.graphql";
import { SpanAsideSpanQuery } from "./__generated__/SpanAsideSpanQuery.graphql";

const annotationListCSS = css`
display: flex;
flex-direction: column;
gap: var(--ac-global-dimension-size-100);
align-items: flex-start;
`;

/**
*
* A component that shows the details of a span that is supplementary to the main span details
* @returns
*/
export function SpanAside(props: { span: SpanAside_span$key }) {
Expand All @@ -28,6 +37,13 @@ export function SpanAside(props: { span: SpanAside_span$key }) {
tokenCountTotal
tokenCountPrompt
tokenCountCompletion
spanAnnotations {
id
name
label
annotatorKind
score
}
}
`,
props.span
Expand All @@ -50,6 +66,8 @@ export function SpanAside(props: { span: SpanAside_span$key }) {
return endDate.getTime() - startDate.getTime();
}, [endDate, startDate]);
const statusColor = useSpanStatusCodeColor(code);
const annotations = data.spanAnnotations;
const hasAnnotations = annotations.length > 0;
return (
<View
padding="size-200"
Expand Down Expand Up @@ -96,6 +114,19 @@ export function SpanAside(props: { span: SpanAside_span$key }) {
/>
</LabeledValue>
) : null}
{hasAnnotations && (
<LabeledValue label="Feedback">
<Flex direction="row" gap="size-50">
<ul css={annotationListCSS}>
{annotations.map((annotation) => (
<li key={annotation.id}>
<AnnotationLabel annotation={annotation} />
</li>
))}
</ul>
</Flex>
</LabeledValue>
)}
</Flex>
</View>
);
Expand Down
65 changes: 53 additions & 12 deletions app/src/pages/trace/__generated__/SpanAsideSpanQuery.graphql.ts

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

71 changes: 61 additions & 10 deletions app/src/pages/trace/__generated__/SpanAside_span.graphql.ts

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

9 changes: 5 additions & 4 deletions app/src/pages/trace/__generated__/SpanDetailsQuery.graphql.ts

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit eaaef2f

Please sign in to comment.