feat(llm-observability): list of traces

frontend/src/queries/nodes/DataNode/DateRange.tsx

@@ -1,13 +1,13 @@
 import { DateFilter } from 'lib/components/DateFilter/DateFilter'
 
-import { EventsQuery, HogQLQuery, SessionAttributionExplorerQuery } from '~/queries/schema'
-import { isEventsQuery, isHogQLQuery, isSessionAttributionExplorerQuery } from '~/queries/utils'
+import { EventsQuery, HogQLQuery, SessionAttributionExplorerQuery, TracesQuery } from '~/queries/schema'
+import { isEventsQuery, isHogQLQuery, isSessionAttributionExplorerQuery, isTracesQuery } from '~/queries/utils'
 
-interface DateRangeProps<Q extends EventsQuery | HogQLQuery | SessionAttributionExplorerQuery> {
+interface DateRangeProps<Q extends EventsQuery | HogQLQuery | SessionAttributionExplorerQuery | TracesQuery> {
     query: Q
     setQuery?: (query: Q) => void
 }
-export function DateRange<Q extends EventsQuery | HogQLQuery | SessionAttributionExplorerQuery>({
+export function DateRange<Q extends EventsQuery | HogQLQuery | SessionAttributionExplorerQuery | TracesQuery>({
     query,
     setQuery,
 }: DateRangeProps<Q>): JSX.Element | null {
@@ -27,6 +27,7 @@ export function DateRange<Q extends EventsQuery | HogQLQuery | SessionAttributio
             />
         )
     }
+
     if (isHogQLQuery(query) || isSessionAttributionExplorerQuery(query)) {
         return (
             <DateFilter
@@ -49,5 +50,25 @@ export function DateRange<Q extends EventsQuery | HogQLQuery | SessionAttributio
             />
         )
     }
+
+    if (isTracesQuery(query)) {
+        return (
+            <DateFilter
+                dateFrom={query.dateRange?.date_from ?? undefined}
+                dateTo={query.dateRange?.date_to ?? undefined}
+                onChange={(changedDateFrom, changedDateTo) => {
+                    const newQuery: Q = {
+                        ...query,
+                        dateRange: {
+                            date_from: changedDateFrom ?? undefined,
+                            date_to: changedDateTo ?? undefined,
+                        },
+                    }
+                    setQuery?.(newQuery)
+                }}
+            />
+        )
+    }
+
     return null
 }

frontend/src/queries/nodes/DataNode/TestAccountFilters.tsx

@@ -3,25 +3,25 @@ import { TestAccountFilterSwitch } from 'lib/components/TestAccountFiltersSwitch
 import { filterTestAccountsDefaultsLogic } from 'scenes/settings/environment/filterTestAccountDefaultsLogic'
 import { teamLogic } from 'scenes/teamLogic'
 
-import { DataNode, EventsQuery, HogQLQuery } from '~/queries/schema'
-import { isEventsQuery, isHogQLQuery } from '~/queries/utils'
+import { DataNode, EventsQuery, HogQLQuery, TracesQuery } from '~/queries/schema'
+import { isEventsQuery, isHogQLQuery, isTracesQuery } from '~/queries/utils'
 
 interface TestAccountFiltersProps {
     query: DataNode
-    setQuery?: (query: EventsQuery | HogQLQuery) => void
+    setQuery?: (query: EventsQuery | HogQLQuery | TracesQuery) => void
 }
 export function TestAccountFilters({ query, setQuery }: TestAccountFiltersProps): JSX.Element | null {
     const { currentTeam } = useValues(teamLogic)
     const hasFilters = (currentTeam?.test_account_filters || []).length > 0
     const { setLocalDefault } = useActions(filterTestAccountsDefaultsLogic)
 
-    if (!isEventsQuery(query) && !isHogQLQuery(query)) {
+    if (!isEventsQuery(query) && !isHogQLQuery(query) && !isTracesQuery(query)) {
         return null
     }
     const checked = hasFilters
         ? !!(isHogQLQuery(query)
               ? query.filters?.filterTestAccounts
-              : isEventsQuery(query)
+              : isEventsQuery(query) || isTracesQuery(query)
               ? query.filterTestAccounts
               : false)
         : false
@@ -36,9 +36,9 @@ export function TestAccountFilters({ query, setQuery }: TestAccountFiltersProps)
               }
               setQuery?.(newQuery)
           }
-        : isEventsQuery(query)
+        : isEventsQuery(query) || isTracesQuery(query)
         ? (checked: boolean) => {
-              const newQuery: EventsQuery = {
+              const newQuery: EventsQuery | TracesQuery = {
                   ...query,
                   filterTestAccounts: checked,
               }

frontend/src/queries/nodes/DataTable/DataTable.tsx

@@ -50,6 +50,7 @@ import {
     HogQLQuery,
     PersonsNode,
     SessionAttributionExplorerQuery,
+    TracesQuery,
 } from '~/queries/schema'
 import { QueryContext } from '~/queries/types'
 import {
@@ -388,8 +389,16 @@ export function DataTable({
     ].filter((column) => !query.hiddenColumns?.includes(column.dataIndex) && column.dataIndex !== '*')
 
     const setQuerySource = useCallback(
-        (source: EventsNode | EventsQuery | PersonsNode | ActorsQuery | HogQLQuery | SessionAttributionExplorerQuery) =>
-            setQuery?.({ ...query, source }),
+        (
+            source:
+                | EventsNode
+                | EventsQuery
+                | PersonsNode
+                | ActorsQuery
+                | HogQLQuery
+                | SessionAttributionExplorerQuery
+                | TracesQuery
+        ) => setQuery?.({ ...query, source }),
         [setQuery, query]
     )
 
@@ -410,7 +419,7 @@ export function DataTable({
         showDateRange && sourceFeatures.has(QueryFeature.dateRangePicker) ? (
             <DateRange
                 key="date-range"
-                query={query.source as HogQLQuery | EventsQuery | SessionAttributionExplorerQuery}
+                query={query.source as HogQLQuery | EventsQuery | SessionAttributionExplorerQuery | TracesQuery}
                 setQuery={setQuerySource}
             />
         ) : null,
@@ -423,7 +432,7 @@ export function DataTable({
         showPropertyFilter && sourceFeatures.has(QueryFeature.eventPropertyFilters) ? (
             <EventPropertyFilters
                 key="event-property"
-                query={query.source as EventsQuery | HogQLQuery | SessionAttributionExplorerQuery}
+                query={query.source as EventsQuery | HogQLQuery | SessionAttributionExplorerQuery | TracesQuery}
                 setQuery={setQuerySource}
                 taxonomicGroupTypes={Array.isArray(showPropertyFilter) ? showPropertyFilter : undefined}
             />

frontend/src/queries/nodes/DataTable/queryFeatures.ts

@@ -5,6 +5,7 @@ import {
     isHogQLQuery,
     isPersonsNode,
     isSessionAttributionExplorerQuery,
+    isTracesQuery,
     isWebExternalClicksQuery,
     isWebGoalsQuery,
     isWebOverviewQuery,
@@ -71,5 +72,11 @@ export function getQueryFeatures(query: Node): Set<QueryFeature> {
         features.add(QueryFeature.hideLoadNextButton)
     }
 
+    if (isTracesQuery(query)) {
+        features.add(QueryFeature.dateRangePicker)
+        features.add(QueryFeature.eventPropertyFilters)
+        features.add(QueryFeature.testAccountFilters)
+    }
+
     return features
 }

frontend/src/queries/nodes/DataTable/renderColumn.tsx

@@ -17,9 +17,9 @@ import { urls } from 'scenes/urls'
 import { errorColumn, loadingColumn } from '~/queries/nodes/DataTable/dataTableLogic'
 import { renderHogQLX } from '~/queries/nodes/HogQLX/render'
 import { DeletePersonButton } from '~/queries/nodes/PersonsNode/DeletePersonButton'
-import { DataTableNode, EventsQueryPersonColumn, HasPropertiesNode } from '~/queries/schema'
+import { DataTableNode, EventsQueryPersonColumn, HasPropertiesNode, LLMTracePerson } from '~/queries/schema'
 import { QueryContext } from '~/queries/types'
-import { isActorsQuery, isEventsQuery, isHogQLQuery, isPersonsNode, trimQuotes } from '~/queries/utils'
+import { isActorsQuery, isEventsQuery, isHogQLQuery, isPersonsNode, isTracesQuery, trimQuotes } from '~/queries/utils'
 import { AnyPropertyFilter, EventType, PersonType, PropertyFilterType, PropertyOperator } from '~/types'
 
 export function renderColumn(
@@ -236,6 +236,11 @@ export function renderColumn(
                 : urls.personByUUID(value.id)
         }
 
+        if (isTracesQuery(query.source)) {
+            displayProps.person = value.distinct_id ? (value as LLMTracePerson) : value
+            displayProps.noPopover = false // If we are in a traces list, the popover experience is better
+        }
+
         return <PersonDisplay {...displayProps} />
     } else if (key === 'group' && typeof value === 'object') {
         return <GroupActorDisplay actor={value} />

frontend/src/queries/nodes/EventsNode/EventPropertyFilters.tsx

@@ -4,25 +4,31 @@ import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
 import { useState } from 'react'
 
 import { groupsModel } from '~/models/groupsModel'
-import { EventsNode, EventsQuery, HogQLQuery, SessionAttributionExplorerQuery } from '~/queries/schema'
+import { EventsNode, EventsQuery, HogQLQuery, SessionAttributionExplorerQuery, TracesQuery } from '~/queries/schema'
 import { isHogQLQuery, isSessionAttributionExplorerQuery } from '~/queries/utils'
 import { AnyPropertyFilter } from '~/types'
 
-interface EventPropertyFiltersProps<Q extends EventsNode | EventsQuery | HogQLQuery | SessionAttributionExplorerQuery> {
+interface EventPropertyFiltersProps<
+    Q extends EventsNode | EventsQuery | HogQLQuery | SessionAttributionExplorerQuery | TracesQuery
+> {
     query: Q
     setQuery?: (query: Q) => void
     taxonomicGroupTypes?: TaxonomicFilterGroupType[]
 }
 
 let uniqueNode = 0
 export function EventPropertyFilters<
-    Q extends EventsNode | EventsQuery | HogQLQuery | SessionAttributionExplorerQuery
+    Q extends EventsNode | EventsQuery | HogQLQuery | SessionAttributionExplorerQuery | TracesQuery
 >({ query, setQuery, taxonomicGroupTypes }: EventPropertyFiltersProps<Q>): JSX.Element {
     const [id] = useState(() => uniqueNode++)
     const properties =
         isHogQLQuery(query) || isSessionAttributionExplorerQuery(query) ? query.filters?.properties : query.properties
     const eventNames =
-        isHogQLQuery(query) || isSessionAttributionExplorerQuery(query) ? [] : query.event ? [query.event] : []
+        isHogQLQuery(query) || isSessionAttributionExplorerQuery(query)
+            ? []
+            : 'event' in query && query.event
+            ? [query.event]
+            : []
     const { groupsTaxonomicTypes } = useValues(groupsModel)
 
     return !properties || Array.isArray(properties) ? (