feat(data-exploration): fix event table regressions

.github/workflows/ci-e2e.yml

@@ -248,6 +248,15 @@ jobs:
                   node-version: 18
                   cache: pnpm
 
+            - name: Restore Cypress binary from cache # actions/setup-node can only cache pnpm's global store
+              uses: actions/cache@v3
+              with:
+                  path: ~/.cache/Cypress
+                  key: ${{ runner.os }}-${{ hashFiles('pnpm-lock.yaml') }}
+
+            - name: Install package.json dependencies with pnpm
+              run: pnpm install --frozen-lockfile # This is primarily for Cypress
+
             - name: Stop/Start stack with Docker Compose
               run: |
                   docker compose -f docker-compose.dev.yml down

frontend/src/lib/components/PropertyFilters/propertyFilterLogic.ts

@@ -1,23 +1,23 @@
-import { kea } from 'kea'
+import { actions, kea, key, listeners, path, props, reducers, selectors } from 'kea'
 
 import type { propertyFilterLogicType } from './propertyFilterLogicType'
 import { AnyPropertyFilter } from '~/types'
 import { isValidPropertyFilter, parseProperties } from 'lib/components/PropertyFilters/utils'
 import { PropertyFilterLogicProps } from 'lib/components/PropertyFilters/types'
 
-export const propertyFilterLogic = kea<propertyFilterLogicType>({
-    path: (key) => ['lib', 'components', 'PropertyFilters', 'propertyFilterLogic', key],
-    props: {} as PropertyFilterLogicProps,
-    key: (props) => props.pageKey,
+export const propertyFilterLogic = kea<propertyFilterLogicType>([
+    path((key) => ['lib', 'components', 'PropertyFilters', 'propertyFilterLogic', key]),
+    props({} as PropertyFilterLogicProps),
+    key((props) => props.pageKey),
 
-    actions: () => ({
+    actions({
         update: true,
         setFilter: (index: number, property: AnyPropertyFilter) => ({ index, property }),
         setFilters: (filters: AnyPropertyFilter[]) => ({ filters }),
         remove: (index: number) => ({ index }),
     }),
 
-    reducers: ({ props }) => ({
+    reducers(({ props }) => ({
         filters: [
             props.propertyFilters ? parseProperties(props.propertyFilters) : ([] as AnyPropertyFilter[]),
             {
@@ -39,9 +39,9 @@ export const propertyFilterLogic = kea<propertyFilterLogicType>({
                 },
             },
         ],
-    }),
+    })),
 
-    listeners: ({ actions, props, values }) => ({
+    listeners(({ actions, props, values }) => ({
         // Only send update if value is set to something
         setFilter: ({ property }) => {
             if (props.sendAllKeyUpdates) {
@@ -53,12 +53,11 @@ export const propertyFilterLogic = kea<propertyFilterLogicType>({
         remove: () => actions.update(),
         update: () => {
             const cleanedFilters = [...values.filters].filter(isValidPropertyFilter)
-
             props.onChange(cleanedFilters)
         },
-    }),
+    })),
 
-    selectors: {
+    selectors({
         filledFilters: [(s) => [s.filters], (filters) => filters.filter(isValidPropertyFilter)],
         filtersWithNew: [
             (s) => [s.filters],
@@ -70,5 +69,5 @@ export const propertyFilterLogic = kea<propertyFilterLogicType>({
                 }
             },
         ],
-    },
-})
+    }),
+])

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

@@ -12,7 +12,7 @@ import { EventRowActions } from '~/queries/nodes/DataTable/EventRowActions'
 import { DataTableExport } from '~/queries/nodes/DataTable/DataTableExport'
 import { Reload } from '~/queries/nodes/DataNode/Reload'
 import { LoadNext } from '~/queries/nodes/DataNode/LoadNext'
-import { renderTitle } from '~/queries/nodes/DataTable/renderTitle'
+import { renderColumnMeta } from '~/queries/nodes/DataTable/renderColumnMeta'
 import { renderColumn } from '~/queries/nodes/DataTable/renderColumn'
 import { AutoLoad } from '~/queries/nodes/DataNode/AutoLoad'
 import { dataTableLogic, DataTableLogicProps } from '~/queries/nodes/DataTable/dataTableLogic'
@@ -72,7 +72,7 @@ export function DataTable({ query, setQuery, context }: DataTableProps): JSX.Ele
     const lemonColumns: LemonTableColumn<EventType, keyof EventType | undefined>[] = [
         ...columns.map((key) => ({
             dataIndex: key as any,
-            title: renderTitle(key, context),
+            ...renderColumnMeta(key, context),
             render: function RenderDataTableColumn(_: any, record: EventType) {
                 return renderColumn(key, record, query, setQuery, context)
             },
@@ -85,6 +85,7 @@ export function DataTable({ query, setQuery, context }: DataTableProps): JSX.Ele
                       render: function RenderMore(_: any, record: EventType) {
                           return <EventRowActions event={record} />
                       },
+                      width: 0,
                   },
               ]
             : []),

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

@@ -29,6 +29,7 @@ export const dataTableLogic = kea<dataTableLogicType>([
                 return {
                     kind,
                     columns: columns,
+                    hiddenColumns: [],
                     source,
                     ...sortedKeys({
                         ...rest,

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

@@ -16,7 +16,12 @@ export function defaultDataTableColumns(query: DataNode): DataTableColumn[] {
 }
 
 export function defaultsForDataTable(query: DataTableNode, defaultColumns?: DataTableColumn[]): DataTableColumn[] {
-    return (
+    let columns =
         query.columns ?? (isEventsNode(query.source) ? defaultColumns : null) ?? defaultDataTableColumns(query.source)
-    )
+
+    if (query.hiddenColumns) {
+        columns = columns.filter((column) => !query.hiddenColumns?.includes(column))
+    }
+
+    return columns
 }

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

@@ -0,0 +1,33 @@
+import { PropertyFilterType } from '~/types'
+import { PropertyKeyInfo } from 'lib/components/PropertyKeyInfo'
+import { QueryContext } from '~/queries/schema'
+
+export interface ColumnMeta {
+    title?: JSX.Element | string
+    width?: number
+}
+
+export function renderColumnMeta(key: string, context?: QueryContext): ColumnMeta {
+    if (key === 'timestamp') {
+        return { title: 'Time' }
+    } else if (key === 'created_at') {
+        return { title: 'First seen' }
+    } else if (key === 'event') {
+        return { title: 'Event' }
+    } else if (key === 'person') {
+        return { title: 'Person' }
+    } else if (key === 'url') {
+        return { title: 'URL / Screen' }
+    } else if (key.startsWith('properties.')) {
+        return { title: <PropertyKeyInfo value={key.substring(11)} type={PropertyFilterType.Event} disableIcon /> }
+    } else if (key.startsWith('context.columns.')) {
+        return { title: context?.columns?.[key.substring(16)]?.title ?? key.substring(16).replace('_', ' ') }
+    } else if (key === 'person.$delete') {
+        return { title: '', width: 0 }
+    } else if (key.startsWith('person.properties.')) {
+        // NOTE: PropertyFilterType.Event is not a mistake. PropertyKeyInfo only knows events vs elements ¯\_(ツ)_/¯
+        return { title: <PropertyKeyInfo value={key.substring(18)} type={PropertyFilterType.Event} disableIcon /> }
+    } else {
+        return { title: key }
+    }
+}

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

@@ -10,7 +10,7 @@ interface EventPropertyFiltersProps {
 
 let uniqueNode = 0
 export function EventPropertyFilters({ query, setQuery }: EventPropertyFiltersProps): JSX.Element {
-    const [id] = useState(uniqueNode++)
+    const [id] = useState(() => uniqueNode++)
     return !query.properties || Array.isArray(query.properties) ? (
         <PropertyFilters
             propertyFilters={query.properties || []}

frontend/src/queries/query.ts

@@ -13,14 +13,25 @@ import {
     isTrendsFilter,
 } from 'scenes/insights/sharedUtils'
 import { toParams } from 'lib/utils'
+import { now } from 'lib/dayjs'
+
+const EVENTS_DAYS_FIRST_FETCH = 5
 
 // Return data for a given query
 export async function query<N extends DataNode = DataNode>(
     query: N,
     methodOptions?: ApiMethodOptions
 ): Promise<N['response']> {
     if (isEventsNode(query)) {
-        return await api.get(getEventsEndpoint(query))
+        if (!query.before && !query.after) {
+            const earlyResults = await api.get(
+                getEventsEndpoint({ ...query, after: now().subtract(EVENTS_DAYS_FIRST_FETCH, 'day').toISOString() })
+            )
+            if (earlyResults.results.length > 0) {
+                return earlyResults
+            }
+        }
+        return await api.get(getEventsEndpoint({ after: now().subtract(1, 'year').toISOString(), ...query }))
     } else if (isPersonsNode(query)) {
         return await api.get(getPersonsEndpoint(query))
     } else if (isLegacyQuery(query)) {
@@ -44,7 +55,7 @@ export function getEventsEndpoint(query: EventsNode): string {
             ...(query.before ? { before: query.before } : {}),
             ...(query.after ? { after: query.after } : {}),
         },
-        query.limit ?? 3500
+        query.limit ?? 100
     )
 }
 

frontend/src/queries/schema.ts

@@ -122,6 +122,8 @@ export interface DataTableNode extends Node {
     source: EventsNode | PersonsNode
     /** Columns shown in the table  */
     columns?: DataTableColumn[]
+    /** Columns that aren't shown in the table, even if in columns */
+    hiddenColumns?: DataTableColumn[]
     /** Include an event filter above the table (EventsNode only) */
     showEventFilter?: boolean
     /** Include a free text search field (PersonsNode only) */

frontend/src/scenes/cohorts/CohortEdit.tsx

@@ -199,6 +199,7 @@ export function CohortEdit({ id }: CohortLogicProps): JSX.Element {
                     </>
                 )}
 
+                {/* The typeof here is needed to pass the cohort id to the query below. Using `isNewCohort` won't work */}
                 {typeof cohort.id === 'number' && (
                     <>
                         <Divider />

frontend/src/scenes/persons/Person.tsx

@@ -163,6 +163,7 @@ export function Person(): JSX.Element | null {
                         <Query
                             query={{
                                 kind: NodeKind.DataTableNode,
+                                hiddenColumns: ['person'],
                                 source: {
                                     kind: NodeKind.EventsNode,
                                     personId: person.id,

package.json

@@ -81,7 +81,7 @@
         "expr-eval": "^2.0.2",
         "fast-deep-equal": "^3.1.3",
         "fuse.js": "^6.4.1",
-        "kea": "^3.0.4",
+        "kea": "^3.1.0",
         "kea-forms": "^3.0.3",
         "kea-loaders": "^3.0.0",
         "kea-localstorage": "^3.1.0",
@@ -192,8 +192,8 @@
         "cors": "^2.8.5",
         "css-loader": "^3.4.2",
         "cssnano": "^4.1.10",
-        "cypress": "^10.11.0",
-        "cypress-axe": "^1.0.0",
+        "cypress": "^11.0.0",
+        "cypress-axe": "^1.1.0",
         "cypress-terminal-report": "^4.1.2",
         "esbuild": "^0.14.54",
         "esbuild-jest": "^0.5.0",