feat(hogql): Events table based on hogql

frontend/src/lib/components/PropertyFilters/components/OperatorValueSelect.tsx

@@ -78,15 +78,14 @@ export function OperatorValueSelect({
 
     const [operators, setOperators] = useState([] as Array<PropertyOperator>)
     useEffect(() => {
-        const isAutocaptureElementProperty = propkey === 'selector'
         const operatorMapping: Record<string, string> = chooseOperatorMap(
-            isAutocaptureElementProperty ? PropertyType.Selector : propertyDefinition?.property_type
+            propkey === 'selector' || propkey === 'tag_name' ? PropertyType.Selector : propertyDefinition?.property_type
         )
-        setOperators(Object.keys(operatorMapping) as Array<PropertyOperator>)
+        const operators = Object.keys(operatorMapping) as Array<PropertyOperator>
+        setOperators(operators)
         if (currentOperator !== operator) {
             setCurrentOperator(startingOperator)
-        }
-        if (isAutocaptureElementProperty) {
+        } else if (!operators.includes(currentOperator)) {
             setCurrentOperator(PropertyOperator.Exact)
         }
     }, [propertyDefinition, propkey, operator])

frontend/src/queries/examples.ts

@@ -308,7 +308,21 @@ const HogQL: HogQLQuery = {
 const HogQLTable: DataTableNode = {
     kind: NodeKind.DataTableNode,
     full: true,
-    source: HogQL,
+    source: {
+        kind: NodeKind.HogQLQuery,
+        query: `   select event,
+          person.properties.email,
+          properties.$browser,
+          count()
+     from events
+    where timestamp > now () - interval 1 month
+      and person.properties.email is not null
+ group by event,
+          properties.$browser,
+          person.properties.email
+ order by count() desc
+    limit 100`,
+    },
 }
 
 export const examples: Record<string, Node> = {

frontend/src/queries/nodes/DataNode/dataNodeLogic.ts

@@ -223,8 +223,8 @@ export const dataNodeLogic = kea<dataNodeLogicType>([
                     return null
                 }
                 if (isEventsQuery(query) && !query.before) {
-                    const sortKey = query.orderBy?.[0] ?? '-timestamp'
-                    if (sortKey === '-timestamp') {
+                    const sortKey = query.orderBy?.[0] ?? 'timestamp DESC'
+                    if (sortKey === 'timestamp DESC') {
                         const sortColumnIndex = query.select
                             .map((hql) => removeExpressionComment(hql))
                             .indexOf('timestamp')
@@ -249,9 +249,9 @@ export const dataNodeLogic = kea<dataNodeLogicType>([
             (query, response, responseError, dataLoading): DataNode | null => {
                 if (isEventsQuery(query) && !responseError && !dataLoading) {
                     if ((response as EventsQuery['response'])?.hasMore) {
-                        const sortKey = query.orderBy?.[0] ?? '-timestamp'
+                        const sortKey = query.orderBy?.[0] ?? 'timestamp DESC'
                         const typedResults = (response as EventsQuery['response'])?.results
-                        if (sortKey === '-timestamp') {
+                        if (sortKey === 'timestamp DESC') {
                             const sortColumnIndex = query.select
                                 .map((hql) => removeExpressionComment(hql))
                                 .indexOf('timestamp')

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

@@ -45,7 +45,7 @@ export function ColumnConfigurator({ query, setQuery }: ColumnConfiguratorProps)
                 let orderBy = query.source.orderBy
                 if (orderBy && orderBy.length > 0) {
                     const orderColumn = removeExpressionComment(
-                        orderBy[0].startsWith('-') ? orderBy[0].slice(1) : orderBy[0]
+                        orderBy[0].endsWith(' DESC') ? orderBy[0].replace(/ DESC$/, '') : orderBy[0]
                     )
                     // the old orderBy column was removed, so remove it from the new query
                     if (!columns.some((c) => removeExpressionComment(c) === orderColumn)) {

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

@@ -133,7 +133,7 @@ export function DataTable({ query, setQuery, context }: DataTableProps): JSX.Ele
                                 if (hogQl && isEventsQuery(query.source)) {
                                     const isAggregation = isHogQlAggregation(hogQl)
                                     const isOrderBy = query.source?.orderBy?.[0] === key
-                                    const isDescOrderBy = query.source?.orderBy?.[0] === `-${key}`
+                                    const isDescOrderBy = query.source?.orderBy?.[0] === `${key} DESC`
                                     setQuery?.({
                                         ...query,
                                         source: {
@@ -143,7 +143,7 @@ export function DataTable({ query, setQuery, context }: DataTableProps): JSX.Ele
                                                 .filter((c) => (isAggregation ? c !== '*' : true)),
                                             orderBy:
                                                 isOrderBy || isDescOrderBy
-                                                    ? [isDescOrderBy ? `-${hogQl}` : hogQl]
+                                                    ? [isDescOrderBy ? `${hogQl} DESC` : hogQl]
                                                     : query.source?.orderBy,
                                         },
                                     })
@@ -173,14 +173,14 @@ export function DataTable({ query, setQuery, context }: DataTableProps): JSX.Ele
                                 </LemonButton>
                                 <LemonButton
                                     fullWidth
-                                    status={query.source?.orderBy?.[0] === `-${key}` ? 'primary' : 'stealth'}
+                                    status={query.source?.orderBy?.[0] === `${key} DESC` ? 'primary' : 'stealth'}
                                     data-attr="datatable-sort-desc"
                                     onClick={() => {
                                         setQuery?.({
                                             ...query,
                                             source: {
                                                 ...query.source,
-                                                orderBy: [`-${key}`],
+                                                orderBy: [`${key} DESC`],
                                             } as EventsQuery,
                                         })
                                     }}

frontend/src/queries/nodes/DataTable/dataTableLogic.test.ts

@@ -75,7 +75,7 @@ describe('dataTableLogic', () => {
         logic.mount()
         await expectLogic(logic).toMatchValues({
             sourceKind: NodeKind.EventsQuery,
-            orderBy: ['-timestamp'],
+            orderBy: ['timestamp DESC'],
         })
 
         // change props

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

@@ -53,7 +53,8 @@ export const dataTableLogic = kea<dataTableLogicType>([
         sourceKind: [(_, p) => [p.query], (query): NodeKind | null => query.source?.kind],
         orderBy: [
             (_, p) => [p.query],
-            (query): string[] | null => (isEventsQuery(query.source) ? query.source.orderBy || ['-timestamp'] : null),
+            (query): string[] | null =>
+                isEventsQuery(query.source) ? query.source.orderBy || ['timestamp DESC'] : null,
             { resultEqualityCheck: objectsEqual },
         ],
         columnsInResponse: [
@@ -79,7 +80,9 @@ export const dataTableLogic = kea<dataTableLogicType>([
                         }
 
                         const { results } = eventsQueryResponse
-                        const orderKey = orderBy?.[0]?.startsWith('-') ? orderBy[0].slice(1) : orderBy?.[0]
+                        const orderKey = orderBy?.[0]?.endsWith(' DESC')
+                            ? orderBy[0].replace(/ DESC$/, '')
+                            : orderBy?.[0]
                         const orderKeyIndex =
                             columnsInResponse?.findIndex(
                                 (column) =>

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

@@ -7,7 +7,7 @@ import { Property } from 'lib/components/Property'
 import { urls } from 'scenes/urls'
 import { PersonHeader } from 'scenes/persons/PersonHeader'
 import { DataTableNode, HasPropertiesNode, QueryContext } from '~/queries/schema'
-import { isEventsQuery, isPersonsNode } from '~/queries/utils'
+import { isEventsQuery, isHogQLQuery, isPersonsNode } from '~/queries/utils'
 import { combineUrl, router } from 'kea-router'
 import { CopyToClipboardInline } from 'lib/components/CopyToClipboard'
 import { DeletePersonButton } from '~/queries/nodes/PersonsNode/DeletePersonButton'
@@ -28,6 +28,18 @@ export function renderColumn(
         return <Spinner />
     } else if (value === errorColumn) {
         return <LemonTag color="red">Error</LemonTag>
+    } else if (isHogQLQuery(query.source)) {
+        if (typeof value === 'string') {
+            try {
+                if ((value.startsWith('{') && value.endsWith('}')) || (value.startsWith('[') && value.endsWith(']'))) {
+                    return <ReactJson src={JSON.parse(value)} name={key} collapsed={1} />
+                }
+            } catch (e) {}
+            if (value.match(/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}/)) {
+                return <TZLabel time={value} showSeconds />
+            }
+        }
+        return <Property value={value} />
     } else if (key === 'event' && isEventsQuery(query.source)) {
         const resultRow = record as any[]
         const eventRecord = query.source.select.includes('*') ? resultRow[query.source.select.indexOf('*')] : null

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

@@ -1,7 +1,7 @@
 import { PropertyFilterType } from '~/types'
 import { PropertyKeyInfo } from 'lib/components/PropertyKeyInfo'
 import { QueryContext, DataTableNode } from '~/queries/schema'
-import { isEventsQuery } from '~/queries/utils'
+import { isEventsQuery, isHogQLQuery } from '~/queries/utils'
 import { extractExpressionComment } from '~/queries/nodes/DataTable/utils'
 import { SortingIndicator } from 'lib/lemon-ui/LemonTable/sorting'
 
@@ -14,7 +14,9 @@ export function renderColumnMeta(key: string, query: DataTableNode, context?: Qu
     let width: number | undefined
     let title: JSX.Element | string | undefined
 
-    if (key === 'timestamp') {
+    if (isHogQLQuery(query.source)) {
+        title = key
+    } else if (key === 'timestamp') {
         title = 'Time'
     } else if (key === 'created_at') {
         title = 'First seen'

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

@@ -4,7 +4,7 @@ import { isEventsQuery } from '~/queries/utils'
 export const defaultDataTableEventColumns: HogQLExpression[] = [
     '*',
     'event',
-    'distinct_id',
+    'person',
     'coalesce(properties.$current_url, properties.$screen_name) -- Url / Screen',
     'properties.$lib',
     'timestamp',

frontend/src/scenes/events/eventsSceneLogic.tsx

@@ -15,7 +15,7 @@ export const getDefaultEventsSceneQuery = (): DataTableNode => ({
     source: {
         kind: NodeKind.EventsQuery,
         select: defaultDataTableColumns(NodeKind.EventsQuery),
-        orderBy: ['-timestamp'],
+        orderBy: ['timestamp DESC'],
         after: '-24h',
         limit: 100,
     },

posthog/api/action.py

@@ -236,7 +236,7 @@ def people(self, request: request.Request, *args: Any, **kwargs: Any) -> Respons
     def count(self, request: request.Request, **kwargs) -> Response:
         action = self.get_object()
         # NOTE: never accepts cohort parameters so no need for explicit person_id_joined_alias
-        hogql_context = HogQLContext()
+        hogql_context = HogQLContext(legacy_person_property_handling=True)
         query, params = format_action_filter(team_id=action.team_id, action=action, hogql_context=hogql_context)
         if query == "":
             return Response({"count": 0})

posthog/api/event.py

@@ -18,12 +18,8 @@
 from posthog.api.routing import StructuredViewSetMixin
 from posthog.client import query_with_columns, sync_execute
 from posthog.models import Element, Filter, Person
-from posthog.models.event.query_event_list import (
-    QUERY_DEFAULT_EXPORT_LIMIT,
-    QUERY_DEFAULT_LIMIT,
-    QUERY_MAXIMUM_LIMIT,
-    query_events_list,
-)
+from posthog.models.event.events_query import QUERY_DEFAULT_EXPORT_LIMIT, QUERY_DEFAULT_LIMIT, QUERY_MAXIMUM_LIMIT
+from posthog.models.event.query_event_list import query_events_list
 from posthog.models.event.sql import GET_CUSTOM_EVENTS, SELECT_ONE_EVENT_SQL
 from posthog.models.event.util import ClickhouseEventSerializer
 from posthog.models.person.util import get_persons_by_distinct_ids

posthog/api/query.py

@@ -16,7 +16,7 @@
 from posthog.cloud_utils import is_cloud
 from posthog.hogql.query import execute_hogql_query
 from posthog.models import Team, User
-from posthog.models.event.query_event_list import run_events_query
+from posthog.models.event.events_query import run_events_query
 from posthog.permissions import ProjectMembershipNecessaryPermissions, TeamMemberAccessPermission
 from posthog.rate_limit import ClickHouseBurstRateThrottle, ClickHouseSustainedRateThrottle
 from posthog.schema import EventsQuery, HogQLQuery