feat(sessions): sessions table on project page (#5204)

Arize-ai · Oct 29, 2024 · 60880e4 · 60880e4
1 parent ba9391f
commit 60880e4
Show file tree

Hide file tree

Showing 37 changed files with 2,492 additions and 442 deletions.
diff --git a/app/schema.graphql b/app/schema.graphql
@@ -1179,6 +1179,16 @@ type ProjectSession implements Node {
   """The Globally Unique ID of this object"""
   id: GlobalID!
   sessionId: String!
+  sessionUser: String
+  startTime: DateTime!
+  endTime: DateTime!
+
+  """Duration of the session in seconds"""
+  durationS: Float!
+  numTraces: Int!
+  firstInput: SpanIOValue
+  lastOutput: SpanIOValue
+  tokenUsage: TokenUsage!
   traces(first: Int = 50, last: Int, after: String, before: String): TraceConnection!
 }
 
@@ -1535,6 +1545,12 @@ type TimeSeriesDataPoint {
   value: Float
 }
 
+type TokenUsage {
+  prompt: Int!
+  completion: Int!
+  total: Int!
+}
+
 type ToolCallChunk {
   id: String!
   function: FunctionCallChunk!
@@ -1544,7 +1560,12 @@ type Trace implements Node {
   """The Globally Unique ID of this object"""
   id: GlobalID!
   traceId: String!
+  startTime: DateTime!
+  endTime: DateTime!
   projectId: GlobalID!
+  projectSessionId: GlobalID
+  session: ProjectSession
+  rootSpan: Span
   spans(first: Int = 50, last: Int, after: String, before: String): SpanConnection!
 
   """Annotations associated with the trace."""

diff --git a/app/src/Routes.tsx b/app/src/Routes.tsx
@@ -7,6 +7,7 @@ import { embeddingLoaderQuery$data } from "./pages/embedding/__generated__/embed
 import { Layout } from "./pages/Layout";
 import { spanPlaygroundPageLoaderQuery$data } from "./pages/playground/__generated__/spanPlaygroundPageLoaderQuery.graphql";
 import { projectLoaderQuery$data } from "./pages/project/__generated__/projectLoaderQuery.graphql";
+import { SessionPage } from "./pages/trace/SessionPage";
 import {
   APIsPage,
   AuthenticatedRoot,
@@ -117,6 +118,7 @@ const router = createBrowserRouter(
               <Route index element={<ProjectPage />} />
               <Route element={<ProjectPage />}>
                 <Route path="traces/:traceId" element={<TracePage />} />
+                <Route path="sessions/:sessionId" element={<SessionPage />} />
               </Route>
             </Route>
           </Route>

diff --git a/app/src/pages/project/ProjectPage.tsx b/app/src/pages/project/ProjectPage.tsx
@@ -19,8 +19,10 @@ import {
 } from "@phoenix/components/datetime";
 
 import { ProjectPageQuery } from "./__generated__/ProjectPageQuery.graphql";
+import { ProjectPageSessionsQuery as ProjectPageSessionsQueryType } from "./__generated__/ProjectPageSessionsQuery.graphql";
 import { ProjectPageSpansQuery as ProjectPageSpansQueryType } from "./__generated__/ProjectPageSpansQuery.graphql";
 import { ProjectPageHeader } from "./ProjectPageHeader";
+import { SessionsTable } from "./SessionsTable";
 import { SpanFilterConditionProvider } from "./SpanFilterConditionContext";
 import { SpansTable } from "./SpansTable";
 import { StreamToggle } from "./StreamToggle";
@@ -75,6 +77,14 @@ const ProjectPageSpansQuery = graphql`
   }
 `;
 
+const ProjectPageSessionsQuery = graphql`
+  query ProjectPageSessionsQuery($id: GlobalID!, $timeRange: TimeRange!) {
+    project: node(id: $id) {
+      ...SessionsTable_sessions
+    }
+  }
+`;
+
 export function ProjectPageContent({
   projectId,
   timeRange,
@@ -109,18 +119,35 @@ export function ProjectPageContent({
   );
   const [spansQueryReference, loadSpansQuery, disposeSpansQuery] =
     useQueryLoader<ProjectPageSpansQueryType>(ProjectPageSpansQuery);
+  const [sessionsQueryReference, loadSessionsQuery, disposeSessionsQuery] =
+    useQueryLoader<ProjectPageSessionsQueryType>(ProjectPageSessionsQuery);
   const onTabChange = useCallback(
     (index: number) => {
       if (index === 1) {
+        disposeSessionsQuery();
         loadSpansQuery({
           id: projectId as string,
           timeRange: timeRangeVariable,
         });
+      } else if (index === 2) {
+        disposeSpansQuery();
+        loadSessionsQuery({
+          id: projectId as string,
+          timeRange: timeRangeVariable,
+        });
       } else {
         disposeSpansQuery();
+        disposeSessionsQuery();
       }
     },
-    [disposeSpansQuery, loadSpansQuery, projectId, timeRangeVariable]
+    [
+      disposeSpansQuery,
+      loadSpansQuery,
+      disposeSessionsQuery,
+      loadSessionsQuery,
+      projectId,
+      timeRangeVariable,
+    ]
   );
   return (
     <main css={mainCSS}>
@@ -161,6 +188,22 @@ export function ProjectPageContent({
             );
           }}
         </TabPane>
+        <TabPane name="Sessions" title="Sessions">
+          {({ isSelected }) => {
+            return (
+              isSelected &&
+              sessionsQueryReference && (
+                <SpanFilterConditionProvider>
+                  <Suspense>
+                    <SessionsTabContent
+                      queryReference={sessionsQueryReference}
+                    />
+                  </Suspense>
+                </SpanFilterConditionProvider>
+              )
+            );
+          }}
+        </TabPane>
       </Tabs>
       <Suspense>
         <Outlet />
@@ -177,3 +220,12 @@ function SpansTabContent({
   const data = usePreloadedQuery(ProjectPageSpansQuery, queryReference);
   return <SpansTable project={data.project} />;
 }
+
+function SessionsTabContent({
+  queryReference,
+}: {
+  queryReference: PreloadedQuery<ProjectPageSessionsQueryType>;
+}) {
+  const data = usePreloadedQuery(ProjectPageSessionsQuery, queryReference);
+  return <SessionsTable project={data.project} />;
+}