Skip to content

Commit

Permalink
feat(sessions): add ability to navigate from trace to session
Browse files Browse the repository at this point in the history
  • Loading branch information
Parker-Stafford committed Oct 29, 2024
1 parent 98d5091 commit 1e292e8
Show file tree
Hide file tree
Showing 2 changed files with 43 additions and 11 deletions.
38 changes: 31 additions & 7 deletions app/src/pages/trace/TraceDetails.tsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import React, { PropsWithChildren, Suspense, useEffect, useMemo } from "react";
import { graphql, useLazyLoadQuery } from "react-relay";
import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
import { useSearchParams } from "react-router-dom";
import { useParams, useSearchParams } from "react-router-dom";
import { css } from "@emotion/react";

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

import { Loading } from "@phoenix/components";
import { Link, Loading } from "@phoenix/components";
import {
AnnotationLabel,
AnnotationTooltip,
Expand Down Expand Up @@ -64,6 +64,7 @@ export function TraceDetails(props: TraceDetailsProps) {
project: node(id: $id) {
... on Project {
trace(traceId: $traceId) {
projectSessionId
spans(first: 1000) {
edges {
span: node {
Expand Down Expand Up @@ -113,7 +114,7 @@ export function TraceDetails(props: TraceDetailsProps) {
return () => {
setSearchParams(
(searchParams) => {
searchParams.delete("spanNodeId");
searchParams.delete(SELECTED_SPAN_NODE_ID_URL_PARAM);
return searchParams;
},
{ replace: true }
Expand All @@ -131,7 +132,10 @@ export function TraceDetails(props: TraceDetailsProps) {
flex-direction: column;
`}
>
<TraceHeader rootSpan={rootSpan} />
<TraceHeader
rootSpan={rootSpan}
sessionId={data.project.trace?.projectSessionId}
/>
<PanelGroup
direction="horizontal"
autoSaveId="trace-panel-group"
Expand Down Expand Up @@ -175,7 +179,14 @@ export function TraceDetails(props: TraceDetailsProps) {
);
}

function TraceHeader({ rootSpan }: { rootSpan: Span | null }) {
function TraceHeader({
rootSpan,
sessionId,
}: {
rootSpan: Span | null;
sessionId?: string | null;
}) {
const { projectId } = useParams();
const { latencyMs, statusCode, spanAnnotations } = rootSpan ?? {
latencyMs: null,
statusCode: "UNSET",
Expand All @@ -185,7 +196,7 @@ function TraceHeader({ rootSpan }: { rootSpan: Span | null }) {
const statusColor = useSpanStatusCodeColor(statusCode);
return (
<View padding="size-200" borderBottomWidth="thin" borderBottomColor="dark">
<Flex direction="row" gap="size-400">
<Flex direction="row" gap="size-400" alignItems={"center"}>
<Flex direction="column">
<Text elementType="h3" textSize="medium" color="text-700">
Trace Status
Expand Down Expand Up @@ -233,6 +244,19 @@ function TraceHeader({ rootSpan }: { rootSpan: Span | null }) {
</Flex>
</Flex>
) : null}
{sessionId && (
<span
css={css`
margin-left: auto;
`}
>
<Link to={`/projects/${projectId}/sessions/${sessionId}`}>
<Flex alignItems={"center"}>
View Session <Icon svg={<Icons.ArrowIosForwardOutline />} />
</Flex>
</Link>
</span>
)}
</Flex>
</View>
);
Expand Down
16 changes: 12 additions & 4 deletions app/src/pages/trace/__generated__/TraceDetailsQuery.graphql.ts

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

0 comments on commit 1e292e8

Please sign in to comment.