feat(sessions): add ability to navigate from trace to session

app/src/pages/trace/TraceDetails.tsx

@@ -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,
@@ -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 {
@@ -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 }
@@ -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"
@@ -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",
@@ -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
@@ -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>
   );