feat(web-analytics): Add option to change group by in SessionAttribut…

…ionExplorer (#23603)

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>

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

@@ -1,13 +1,13 @@
 import { DateFilter } from 'lib/components/DateFilter/DateFilter'
 
-import { EventsQuery, HogQLQuery } from '~/queries/schema'
-import { isEventsQuery, isHogQLQuery } from '~/queries/utils'
+import { EventsQuery, HogQLQuery, SessionAttributionExplorerQuery } from '~/queries/schema'
+import { isEventsQuery, isHogQLQuery, isSessionAttributionExplorerQuery } from '~/queries/utils'
 
-interface DateRangeProps<Q extends EventsQuery | HogQLQuery> {
+interface DateRangeProps<Q extends EventsQuery | HogQLQuery | SessionAttributionExplorerQuery> {
     query: Q
     setQuery?: (query: Q) => void
 }
-export function DateRange<Q extends EventsQuery | HogQLQuery>({
+export function DateRange<Q extends EventsQuery | HogQLQuery | SessionAttributionExplorerQuery>({
     query,
     setQuery,
 }: DateRangeProps<Q>): JSX.Element | null {
@@ -27,7 +27,7 @@ export function DateRange<Q extends EventsQuery | HogQLQuery>({
             />
         )
     }
-    if (isHogQLQuery(query)) {
+    if (isHogQLQuery(query) || isSessionAttributionExplorerQuery(query)) {
         return (
             <DateFilter
                 size="medium"

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

@@ -53,6 +53,7 @@ import {
     EventsQuery,
     HogQLQuery,
     PersonsNode,
+    SessionAttributionExplorerQuery,
 } from '~/queries/schema'
 import { QueryContext } from '~/queries/types'
 import {
@@ -385,7 +386,8 @@ export function DataTable({ uniqueKey, query, setQuery, context, cachedResults }
     ].filter((column) => !query.hiddenColumns?.includes(column.dataIndex) && column.dataIndex !== '*')
 
     const setQuerySource = useCallback(
-        (source: EventsNode | EventsQuery | PersonsNode | ActorsQuery | HogQLQuery) => setQuery?.({ ...query, source }),
+        (source: EventsNode | EventsQuery | PersonsNode | ActorsQuery | HogQLQuery | SessionAttributionExplorerQuery) =>
+            setQuery?.({ ...query, source }),
         [setQuery]
     )
 
@@ -404,7 +406,11 @@ export function DataTable({ uniqueKey, query, setQuery, context, cachedResults }
             />
         ) : null,
         showDateRange && sourceFeatures.has(QueryFeature.dateRangePicker) ? (
-            <DateRange key="date-range" query={query.source as HogQLQuery | EventsQuery} setQuery={setQuerySource} />
+            <DateRange
+                key="date-range"
+                query={query.source as HogQLQuery | EventsQuery | SessionAttributionExplorerQuery}
+                setQuery={setQuerySource}
+            />
         ) : null,
         showEventFilter && sourceFeatures.has(QueryFeature.eventNameFilter) ? (
             <EventName key="event-name" query={query.source as EventsQuery} setQuery={setQuerySource} />
@@ -415,7 +421,7 @@ export function DataTable({ uniqueKey, query, setQuery, context, cachedResults }
         showPropertyFilter && sourceFeatures.has(QueryFeature.eventPropertyFilters) ? (
             <EventPropertyFilters
                 key="event-property"
-                query={query.source as EventsQuery}
+                query={query.source as EventsQuery | HogQLQuery | SessionAttributionExplorerQuery}
                 setQuery={setQuerySource}
                 taxonomicGroupTypes={Array.isArray(showPropertyFilter) ? showPropertyFilter : undefined}
             />

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

@@ -4,6 +4,7 @@ import {
     isEventsQuery,
     isHogQLQuery,
     isPersonsNode,
+    isSessionAttributionExplorerQuery,
     isWebOverviewQuery,
     isWebStatsTableQuery,
     isWebTopClicksQuery,
@@ -29,7 +30,7 @@ export enum QueryFeature {
 export function getQueryFeatures(query: Node): Set<QueryFeature> {
     const features = new Set<QueryFeature>()
 
-    if (isHogQLQuery(query) || isEventsQuery(query)) {
+    if (isHogQLQuery(query) || isEventsQuery(query) || isSessionAttributionExplorerQuery(query)) {
         features.add(QueryFeature.dateRangePicker)
         features.add(QueryFeature.columnsInResponse)
         features.add(QueryFeature.eventPropertyFilters)

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

@@ -229,10 +229,14 @@ export function renderColumn(
     } else if (key.startsWith('context.columns.')) {
         const columnName = trimQuotes(key.substring(16)) // 16 = "context.columns.".length
         const Component = context?.columns?.[columnName]?.render
-        return Component ? <Component record={record} columnName={columnName} value={value} query={query} /> : ''
+        return Component ? (
+            <Component record={record} columnName={columnName} value={value} query={query} />
+        ) : (
+            String(value)
+        )
     } else if (context?.columns?.[key]) {
         const Component = context?.columns?.[key]?.render
-        return Component ? <Component record={record} columnName={key} value={value} query={query} /> : ''
+        return Component ? <Component record={record} columnName={key} value={value} query={query} /> : String(value)
     } else if (key === 'id' && (isPersonsNode(query.source) || isActorsQuery(query.source))) {
         return (
             <CopyToClipboardInline

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

@@ -2,25 +2,25 @@ import { PropertyFilters } from 'lib/components/PropertyFilters/PropertyFilters'
 import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
 import { useState } from 'react'
 
-import { EventsNode, EventsQuery, HogQLQuery } from '~/queries/schema'
-import { isHogQLQuery } from '~/queries/utils'
+import { EventsNode, EventsQuery, HogQLQuery, SessionAttributionExplorerQuery } from '~/queries/schema'
+import { isHogQLQuery, isSessionAttributionExplorerQuery } from '~/queries/utils'
 import { AnyPropertyFilter } from '~/types'
 
-interface EventPropertyFiltersProps<Q extends EventsNode | EventsQuery | HogQLQuery> {
+interface EventPropertyFiltersProps<Q extends EventsNode | EventsQuery | HogQLQuery | SessionAttributionExplorerQuery> {
     query: Q
     setQuery?: (query: Q) => void
     taxonomicGroupTypes?: TaxonomicFilterGroupType[]
 }
 
 let uniqueNode = 0
-export function EventPropertyFilters<Q extends EventsNode | EventsQuery | HogQLQuery>({
-    query,
-    setQuery,
-    taxonomicGroupTypes,
-}: EventPropertyFiltersProps<Q>): JSX.Element {
+export function EventPropertyFilters<
+    Q extends EventsNode | EventsQuery | HogQLQuery | SessionAttributionExplorerQuery
+>({ query, setQuery, taxonomicGroupTypes }: EventPropertyFiltersProps<Q>): JSX.Element {
     const [id] = useState(() => uniqueNode++)
-    const properties = isHogQLQuery(query) ? query.filters?.properties : query.properties
-    const eventNames = isHogQLQuery(query) ? [] : query.event ? [query.event] : []
+    const properties =
+        isHogQLQuery(query) || isSessionAttributionExplorerQuery(query) ? query.filters?.properties : query.properties
+    const eventNames =
+        isHogQLQuery(query) || isSessionAttributionExplorerQuery(query) ? [] : query.event ? [query.event] : []
 
     return !properties || Array.isArray(properties) ? (
         <PropertyFilters
@@ -36,7 +36,7 @@ export function EventPropertyFilters<Q extends EventsNode | EventsQuery | HogQLQ
                 ]
             }
             onChange={(value: AnyPropertyFilter[]) => {
-                if (isHogQLQuery(query)) {
+                if (isHogQLQuery(query) || isSessionAttributionExplorerQuery(query)) {
                     setQuery?.({ ...query, filters: { ...(query.filters ?? {}), properties: value } })
                 } else {
                     setQuery?.({ ...query, properties: value })