feat(data-exploration): person and cohort tables

frontend/src/queries/QueryRunner/QueryRunner.tsx

@@ -0,0 +1,30 @@
+import { Query } from '~/queries/Query/Query'
+import { useEffect, useState } from 'react'
+import { QueryEditor } from '~/queries/QueryEditor/QueryEditor'
+import { Node } from '~/queries/schema'
+
+export interface QueryRunnerProps {
+    /** The query to render */
+    query: Node | string
+}
+
+export function QueryRunner(props: QueryRunnerProps): JSX.Element {
+    const [queryString, setQueryString] = useState(
+        typeof props.query === 'string' ? props.query : JSON.stringify(props.query)
+    )
+    useEffect(() => {
+        const newQueryString = typeof props.query === 'string' ? props.query : JSON.stringify(props.query)
+        if (newQueryString !== queryString) {
+            setQueryString(newQueryString)
+        }
+    }, [queryString])
+
+    return (
+        <>
+            <QueryEditor query={queryString} setQuery={setQueryString} />
+            <div className="p-4">
+                <Query key={queryString} query={queryString} />
+            </div>
+        </>
+    )
+}

frontend/src/queries/examples.ts

@@ -1,29 +1,29 @@
 // This file contains example queries, used in storybook and in the /query interface.
 import {
-    EventsNode,
+    ActionsNode,
     DataTableNode,
+    EventsNode,
+    FunnelsQuery,
     LegacyQuery,
+    LifecycleQuery,
     Node,
     NodeKind,
-    TrendsQuery,
-    FunnelsQuery,
-    RetentionQuery,
-    ActionsNode,
     PathsQuery,
+    PersonsNode,
+    RetentionQuery,
     StickinessQuery,
-    LifecycleQuery,
+    TrendsQuery,
 } from '~/queries/schema'
 import {
     ChartDisplayType,
+    FilterLogicalOperator,
     InsightType,
     PropertyFilterType,
+    PropertyGroupFilter,
     PropertyOperator,
-    // PropertyMathType,
-    FilterLogicalOperator,
     StepOrderValue,
-    PropertyGroupFilter,
 } from '~/types'
-import { defaultDataTableStringColumns } from '~/queries/nodes/DataTable/defaults'
+import { defaultDataTableColumns } from '~/queries/nodes/DataTable/defaults'
 import { ShownAsValue } from '~/lib/constants'
 
 const Events: EventsNode = {
@@ -36,9 +36,39 @@ const Events: EventsNode = {
 
 const EventsTable: DataTableNode = {
     kind: NodeKind.DataTableNode,
-    columns: defaultDataTableStringColumns,
+    columns: defaultDataTableColumns({ kind: NodeKind.EventsNode }),
     source: Events,
 }
+const EventsTableFull: DataTableNode = {
+    ...EventsTable,
+    showPropertyFilter: true,
+    showEventFilter: true,
+    showExport: true,
+    showReload: true,
+    showColumnConfigurator: true,
+    showEventsBufferWarning: true,
+}
+
+const Persons: PersonsNode = {
+    kind: NodeKind.PersonsNode,
+    properties: [
+        { type: PropertyFilterType.Person, key: '$browser', operator: PropertyOperator.Exact, value: 'Chrome' },
+    ],
+}
+
+const PersonsTable: DataTableNode = {
+    kind: NodeKind.DataTableNode,
+    columns: defaultDataTableColumns({ kind: NodeKind.PersonsNode }),
+    source: Persons,
+}
+
+const PersonsTableFull: DataTableNode = {
+    ...PersonsTable,
+    showSearch: true,
+    showPropertyFilter: true,
+    showExport: true,
+    showReload: true,
+}
 
 const LegacyTrendsQuery: LegacyQuery = {
     kind: NodeKind.LegacyQuery,
@@ -196,6 +226,10 @@ const InsightLifecycleQuery: LifecycleQuery = {
 export const examples: Record<string, Node> = {
     Events,
     EventsTable,
+    EventsTableFull,
+    Persons,
+    PersonsTable,
+    PersonsTableFull,
     LegacyTrendsQuery,
     InsightTrendsQuery,
     InsightFunnelsQuery,

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

@@ -0,0 +1,36 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import { QueryRunner } from '~/queries/QueryRunner/QueryRunner'
+import { examples } from '~/queries/examples'
+import { mswDecorator } from '~/mocks/browser'
+import events from './__mocks__/EventsNode.json'
+import persons from './__mocks__/PersonsNode.json'
+
+export default {
+    title: 'Queries/DataNode',
+    component: QueryRunner,
+    parameters: {
+        chromatic: { disableSnapshot: false },
+        layout: 'fullscreen',
+        options: { showPanel: false },
+        viewMode: 'story',
+    },
+    argTypes: {
+        query: { defaultValue: {} },
+    },
+    decorators: [
+        mswDecorator({
+            get: {
+                '/api/projects/:projectId/events': events,
+                '/api/projects/:projectId/persons': persons,
+            },
+        }),
+    ],
+} as ComponentMeta<typeof QueryRunner>
+
+const QueryTemplate: ComponentStory<typeof QueryRunner> = QueryRunner
+
+export const Events = QueryTemplate.bind({})
+Events.args = { query: examples['Events'] }
+
+export const Persons = QueryTemplate.bind({})
+Persons.args = { query: examples['Persons'] }

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

@@ -1,13 +1,15 @@
 import MonacoEditor from '@monaco-editor/react'
 import { useState } from 'react'
 import { AutoSizer } from 'react-virtualized/dist/es/AutoSizer'
-import { DataNode as DataNodeType } from '~/queries/schema'
+import { DataNode as DataNodeType, DataTableNode, Node } from '~/queries/schema'
 import { useValues } from 'kea'
 import { dataNodeLogic } from '~/queries/nodes/DataNode/dataNodeLogic'
 import { Spinner } from 'lib/components/Spinner/Spinner'
+import { InlineEditorButton } from '~/queries/nodes/Node/InlineEditorButton'
 
 interface DataNodeProps {
     query: DataNodeType
+    setQuery?: (node: DataTableNode) => void
 }
 
 let uniqueNode = 0
@@ -18,19 +20,28 @@ export function DataNode(props: DataNodeProps): JSX.Element {
     const logic = dataNodeLogic({ ...props, key })
     const { response, responseLoading } = useValues(logic)
 
-    return responseLoading ? (
-        <Spinner />
-    ) : (
-        <AutoSizer disableWidth>
-            {({ height }) => (
-                <MonacoEditor
-                    theme="vs-light"
-                    className="border"
-                    language={'json'}
-                    value={JSON.stringify(response, null, 2)}
-                    height={Math.max(height, 300)}
-                />
+    return (
+        <div className="relative">
+            <div className="absolute right-0 z-10 p-1 mr-3">
+                <InlineEditorButton query={props.query} setQuery={props.setQuery as (node: Node) => void} />
+            </div>
+            {responseLoading ? (
+                <div className="text-2xl">
+                    <Spinner />
+                </div>
+            ) : (
+                <AutoSizer disableWidth>
+                    {({ height }) => (
+                        <MonacoEditor
+                            theme="vs-light"
+                            className="border"
+                            language={'json'}
+                            value={JSON.stringify(response, null, 2)}
+                            height={Math.max(height, 300)}
+                        />
+                    )}
+                </AutoSizer>
             )}
-        </AutoSizer>
+        </div>
     )
 }

frontend/src/queries/nodes/DataNode/__mocks__/PersonsNode.json

@@ -0,0 +1,58 @@
+{
+    "results": [
+        {
+            "type": "person",
+            "id": "0184ae06-9d4a-0000-2b26-a771725cc751",
+            "uuid": "0184ae06-9d4a-0000-2b26-a771725cc751",
+            "created_at": "2022-11-25T09:02:59.900000Z",
+            "properties": {
+                "$os": "Mac OS X",
+                "email": "marius@posthog.com",
+                "$browser": "Chrome",
+                "$referrer": "http://localhost:8000/events",
+                "$initial_os": "Mac OS X",
+                "$geoip_latitude": -33.8715,
+                "$browser_version": 107,
+                "$geoip_city_name": "Sydney",
+                "$geoip_longitude": 151.2006,
+                "$geoip_time_zone": "Australia/Sydney",
+                "$initial_browser": "Chrome",
+                "$initial_pathname": "/ingestion",
+                "$initial_referrer": "http://localhost:8000/dashboard",
+                "$referring_domain": "localhost:8000",
+                "$geoip_postal_code": "2000",
+                "$geoip_country_code": "AU",
+                "$geoip_country_name": "Australia",
+                "$initial_current_url": "http://localhost:8000/ingestion",
+                "$initial_device_type": "Desktop",
+                "$geoip_continent_code": "OC",
+                "$geoip_continent_name": "Oceania",
+                "$initial_geoip_latitude": -33.8715,
+                "$initial_browser_version": 107,
+                "$initial_geoip_city_name": "Sydney",
+                "$initial_geoip_longitude": 151.2006,
+                "$initial_geoip_time_zone": "Australia/Sydney",
+                "$geoip_subdivision_1_code": "NSW",
+                "$geoip_subdivision_1_name": "New South Wales",
+                "$initial_referring_domain": "localhost:8000",
+                "$initial_geoip_postal_code": "2000",
+                "$initial_geoip_country_code": "AU",
+                "$initial_geoip_country_name": "Australia",
+                "$initial_geoip_continent_code": "OC",
+                "$initial_geoip_continent_name": "Oceania",
+                "$initial_geoip_subdivision_1_code": "NSW",
+                "$initial_geoip_subdivision_1_name": "New South Wales"
+            },
+            "is_identified": true,
+            "name": "marius@posthog.com",
+            "distinct_ids": [
+                "184ae069d181757-0c7310c8ee02fe-18525635-201b88-184ae069d192e7c",
+                "FXFWiYV3IHFXVo2DuWESQmHvywBwAEIJpvr0KrHiM2J"
+            ],
+            "matched_recordings": [],
+            "value_at_data_point": null
+        }
+    ],
+    "next": null,
+    "previous": null
+}

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

@@ -3,7 +3,7 @@ import { loaders } from 'kea-loaders'
 import type { dataNodeLogicType } from './dataNodeLogicType'
 import { DataNode, EventsNode } from '~/queries/schema'
 import { query } from '~/queries/query'
-import { isEventsNode } from '~/queries/utils'
+import { isEventsNode, isPersonsNode } from '~/queries/utils'
 import { subscriptions } from 'kea-subscriptions'
 import { objectsEqual } from 'lib/utils'
 import clsx from 'clsx'
@@ -124,7 +124,7 @@ export const dataNodeLogic = kea<dataNodeLogicType>([
             (s) => [s.query, s.response],
             (query, response) => {
                 return (
-                    isEventsNode(query) &&
+                    (isEventsNode(query) || isPersonsNode(query)) &&
                     (response as EventsNode['response'])?.next &&
                     ((response as EventsNode['response'])?.results?.length ?? 0) > 0
                 )

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

@@ -20,8 +20,8 @@ import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
 import { TeamMembershipLevel } from 'lib/constants'
 import { useState } from 'react'
 import { columnConfiguratorLogic, ColumnConfiguratorLogicProps } from './columnConfiguratorLogic'
-import { defaultDataTableStringColumns } from '../defaults'
-import { DataTableNode } from '~/queries/schema'
+import { defaultDataTableColumns } from '../defaults'
+import { DataTableNode, NodeKind } from '~/queries/schema'
 import { LemonModal } from 'lib/components/LemonModal'
 import { PropertyFilterType } from '~/types'
 import { PropertyFilterIcon } from 'lib/components/PropertyFilters/components/PropertyFilterIcon'
@@ -104,7 +104,7 @@ function ColumnConfiguratorModal(): JSX.Element {
         }
 
         return (
-            <div className={clsx(['SelectedColumn', 'selected'])} style={{ height: `${rowItemHeight}px` }}>
+            <div className={clsx(['SelectedColumn', 'selected'])} style={{ height: rowItemHeight }}>
                 <DragHandle />
                 {columnType && <PropertyFilterIcon type={columnType} />}
                 <PropertyKeyInfo className="ml-1" value={columnKey} />
@@ -160,7 +160,10 @@ function ColumnConfiguratorModal(): JSX.Element {
             footer={
                 <>
                     <div className="flex-1">
-                        <LemonButton type="secondary" onClick={() => setColumns(defaultDataTableStringColumns)}>
+                        <LemonButton
+                            type="secondary"
+                            onClick={() => setColumns(defaultDataTableColumns({ kind: NodeKind.EventsNode }))}
+                        >
                             Reset to defaults
                         </LemonButton>
                     </div>