diff --git a/frontend/__snapshots__/components-properties-table--properties-table--dark.png b/frontend/__snapshots__/components-properties-table--basic--dark.png similarity index 100% rename from frontend/__snapshots__/components-properties-table--properties-table--dark.png rename to frontend/__snapshots__/components-properties-table--basic--dark.png diff --git a/frontend/__snapshots__/components-properties-table--properties-table--light.png b/frontend/__snapshots__/components-properties-table--basic--light.png similarity index 100% rename from frontend/__snapshots__/components-properties-table--properties-table--light.png rename to frontend/__snapshots__/components-properties-table--basic--light.png diff --git a/frontend/__snapshots__/components-properties-table--dollar-properties-on-event--dark.png b/frontend/__snapshots__/components-properties-table--dollar-properties-on-event--dark.png new file mode 100644 index 0000000000000..7d66d6f54952b Binary files /dev/null and b/frontend/__snapshots__/components-properties-table--dollar-properties-on-event--dark.png differ diff --git a/frontend/__snapshots__/components-properties-table--dollar-properties-on-event--light.png b/frontend/__snapshots__/components-properties-table--dollar-properties-on-event--light.png new file mode 100644 index 0000000000000..dd0ee5931db75 Binary files /dev/null and b/frontend/__snapshots__/components-properties-table--dollar-properties-on-event--light.png differ diff --git a/frontend/__snapshots__/components-properties-table--dollar-properties-on-person--dark.png b/frontend/__snapshots__/components-properties-table--dollar-properties-on-person--dark.png new file mode 100644 index 0000000000000..610a20dc3a6af Binary files /dev/null and b/frontend/__snapshots__/components-properties-table--dollar-properties-on-person--dark.png differ diff --git a/frontend/__snapshots__/components-properties-table--dollar-properties-on-person--light.png b/frontend/__snapshots__/components-properties-table--dollar-properties-on-person--light.png new file mode 100644 index 0000000000000..8257003f48567 Binary files /dev/null and b/frontend/__snapshots__/components-properties-table--dollar-properties-on-person--light.png differ diff --git a/frontend/__snapshots__/scenes-app-events--event-explorer--dark.png b/frontend/__snapshots__/scenes-app-events--event-explorer--dark.png index 4b3b23d5b8ffa..e7e631b268a21 100644 Binary files a/frontend/__snapshots__/scenes-app-events--event-explorer--dark.png and b/frontend/__snapshots__/scenes-app-events--event-explorer--dark.png differ diff --git a/frontend/__snapshots__/scenes-app-events--event-explorer--light.png b/frontend/__snapshots__/scenes-app-events--event-explorer--light.png index 7f2fbaf603031..d4546830cc18f 100644 Binary files a/frontend/__snapshots__/scenes-app-events--event-explorer--light.png and b/frontend/__snapshots__/scenes-app-events--event-explorer--light.png differ diff --git a/frontend/__snapshots__/scenes-app-insights-error-empty-states--estimated-query-execution-time-too-long--light.png b/frontend/__snapshots__/scenes-app-insights-error-empty-states--estimated-query-execution-time-too-long--light.png index 002df84329f4d..c26b6b72f6571 100644 Binary files a/frontend/__snapshots__/scenes-app-insights-error-empty-states--estimated-query-execution-time-too-long--light.png and b/frontend/__snapshots__/scenes-app-insights-error-empty-states--estimated-query-execution-time-too-long--light.png differ diff --git a/frontend/src/lib/components/PropertiesTable/PropertiesTable.stories.tsx b/frontend/src/lib/components/PropertiesTable/PropertiesTable.stories.tsx index 732ff6542b17b..440000f5200b5 100644 --- a/frontend/src/lib/components/PropertiesTable/PropertiesTable.stories.tsx +++ b/frontend/src/lib/components/PropertiesTable/PropertiesTable.stories.tsx @@ -10,7 +10,7 @@ const meta: Meta = { } export default meta -export const PropertiesTable: StoryFn = () => { +export const Basic: StoryFn = () => { const properties = { name: 'John Doe', age: 30, @@ -25,3 +25,36 @@ export const PropertiesTable: StoryFn = () => { } return } + +export const DollarPropertiesOnEvent: StoryFn = () => { + const properties = { + pineapple_enjoyment_score: 3, + $browser: 'Chrome', + utm_campaign: 'summer_sale', + $geoip_country_code: 'US', + $set: { + $browser: 'Chrome', + utm_campaign: 'summer_sale', + $geoip_country_code: 'US', + }, + $set_once: { + $initial_browser: 'Chrome', + $initial_utm_campaign: 'summer_sale', + $initial_geoip_country_code: 'US', + }, + } + return +} + +export const DollarPropertiesOnPerson: StoryFn = () => { + const properties = { + pineapple_enjoyment_score: 3, + $browser: 'Chrome', + utm_campaign: 'summer_sale', + $geoip_country_code: 'US', + $initial_browser: 'Chrome', + $initial_utm_campaign: 'summer_sale', + $initial_geoip_country_code: 'US', + } + return +} diff --git a/frontend/src/lib/components/PropertiesTable/PropertiesTable.tsx b/frontend/src/lib/components/PropertiesTable/PropertiesTable.tsx index c867e11eae87e..021a9eca39145 100644 --- a/frontend/src/lib/components/PropertiesTable/PropertiesTable.tsx +++ b/frontend/src/lib/components/PropertiesTable/PropertiesTable.tsx @@ -22,6 +22,7 @@ import { PropertyDefinitionType, PropertyType } from '~/types' import { CopyToClipboardInline } from '../CopyToClipboard' import { PROPERTY_FILTER_TYPE_TO_TAXONOMIC_FILTER_GROUP_TYPE } from '../PropertyFilters/utils' import { PropertyKeyInfo } from '../PropertyKeyInfo' +import { TaxonomicFilterGroupType } from '../TaxonomicFilter/types' type HandledType = 'string' | 'number' | 'bigint' | 'boolean' | 'undefined' | 'null' type Type = HandledType | 'symbol' | 'object' | 'function' @@ -293,7 +294,11 @@ export function PropertiesTable({
) diff --git a/frontend/src/lib/taxonomy.tsx b/frontend/src/lib/taxonomy.tsx index 4f7d470271b63..a703ebf73046e 100644 --- a/frontend/src/lib/taxonomy.tsx +++ b/frontend/src/lib/taxonomy.tsx @@ -61,6 +61,14 @@ export const CORE_FILTER_DEFINITIONS_BY_GROUP = { label: 'Screen', description: 'When a user loads a screen in a mobile app.', }, + $set: { + label: 'Set', + description: 'Setting person properties.', + }, + $opt_in: { + label: 'Opt In', + description: 'When a user opts into analytics.', + }, $feature_flag_called: { label: 'Feature Flag Called', description: ( @@ -106,14 +114,6 @@ export const CORE_FILTER_DEFINITIONS_BY_GROUP = { label: 'Rageclick', description: 'A user has rapidly and repeatedly clicked in a single place', }, - $set: { - label: 'Set', - description: 'Person properties to be set', - }, - $set_once: { - label: 'Set Once', - description: 'Person properties to be set if not set already (i.e. first-touch)', - }, $exception: { label: 'Exception', description: 'Automatically captured exceptions from the client Sentry integration', @@ -178,6 +178,14 @@ export const CORE_FILTER_DEFINITIONS_BY_GROUP = { }, event_properties: { distinct_id: {} as CoreFilterDefinition, // Copied from metadata down below + $set: { + label: 'Set', + description: 'Person properties to be set', + }, + $set_once: { + label: 'Set Once', + description: 'Person properties to be set if not set already (i.e. first-touch)', + }, $pageview_id: { label: 'Pageview ID', description: "PostHog's internal ID for matching events to a pageview.", @@ -901,6 +909,7 @@ export const CORE_FILTER_DEFINITIONS_BY_GROUP = { }, }, } satisfies Partial>> + CORE_FILTER_DEFINITIONS_BY_GROUP.person_properties = Object.fromEntries( Object.entries(CORE_FILTER_DEFINITIONS_BY_GROUP.event_properties).flatMap(([key, value]) => eventToPersonProperties.has(key) || key.startsWith('$geoip_') diff --git a/frontend/src/scenes/session-recordings/player/inspector/components/ItemEvent.tsx b/frontend/src/scenes/session-recordings/player/inspector/components/ItemEvent.tsx index b4dd2a5785ac9..e851684d58874 100644 --- a/frontend/src/scenes/session-recordings/player/inspector/components/ItemEvent.tsx +++ b/frontend/src/scenes/session-recordings/player/inspector/components/ItemEvent.tsx @@ -1,6 +1,7 @@ import { LemonButton, LemonDivider } from '@posthog/lemon-ui' import { ErrorDisplay } from 'lib/components/Errors/ErrorDisplay' import { PropertyKeyInfo } from 'lib/components/PropertyKeyInfo' +import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types' import { IconOpenInNew } from 'lib/lemon-ui/icons' import { Spinner } from 'lib/lemon-ui/Spinner' import { autoCaptureEventToDescription, capitalizeFirstLetter } from 'lib/utils' @@ -34,6 +35,7 @@ export function ItemEvent({ item, expanded, setExpanded }: ItemEventProps): JSX. disablePopover ellipsis={true} value={capitalizeFirstLetter(autoCaptureEventToDescription(item.data))} + type={TaxonomicFilterGroupType.Events} /> {item.data.event === '$autocapture' ? (Autocapture) : null} {subValue ? (