feat: promoted keys in properties table

PostHog · Oct 30, 2024 · 3609856 · 3609856
1 parent 13f48d7
commit 3609856
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 29 deletions.
diff --git a/frontend/src/lib/components/PropertiesTable/PropertiesTable.tsx b/frontend/src/lib/components/PropertiesTable/PropertiesTable.tsx
@@ -12,6 +12,7 @@ import {
     CLOUD_INTERNAL_POSTHOG_PROPERTY_KEYS,
     CORE_FILTER_DEFINITIONS_BY_GROUP,
     getCoreFilterDefinition,
+    POSTHOG_EVENT_PROMOTED_PROPERTIES,
     PROPERTY_KEYS,
 } from 'lib/taxonomy'
 import { isObject, isURL } from 'lib/utils'
@@ -195,6 +196,11 @@ interface PropertiesTableType extends BasePropertyType {
     tableProps?: Partial<LemonTableProps<Record<string, any>>>
     highlightedKeys?: string[]
     type: PropertyDefinitionType
+    /**
+     * The container for these properties e.g. the event name of the event the properties are on
+     * Can be used for e.g. to promote particular properties when sorting the properties
+     */
+    parent?: string
 }
 
 export function PropertiesTable({
@@ -212,6 +218,7 @@ export function PropertiesTable({
     tableProps,
     highlightedKeys,
     type,
+    parent,
 }: PropertiesTableType): JSX.Element {
     const [searchTerm, setSearchTerm] = useState('')
     const { hidePostHogPropertiesInTable } = useValues(userPreferencesLogic)
@@ -248,6 +255,18 @@ export function PropertiesTable({
                 }
                 return 0
             })
+            if (parent) {
+                const promotedProperties = POSTHOG_EVENT_PROMOTED_PROPERTIES[parent]
+                const promotedItems = promotedProperties?.length
+                    ? entries
+                          .filter(([key]) => promotedProperties.includes(key))
+                          .sort((a, b) => promotedProperties.indexOf(a[0]) - promotedProperties.indexOf(b[0]))
+                    : []
+                const nonPromotedItems = promotedProperties?.length
+                    ? entries.filter(([key]) => !promotedProperties.includes(key))
+                    : entries
+                entries = [...promotedItems, ...nonPromotedItems]
+            }
         }
 
         if (searchTerm) {

diff --git a/frontend/src/lib/taxonomy.tsx b/frontend/src/lib/taxonomy.tsx
@@ -1493,6 +1493,24 @@ export const CLOUD_INTERNAL_POSTHOG_PROPERTY_KEYS = [
     'commit_sha',
 ]
 
+export const POSTHOG_EVENT_PROMOTED_PROPERTIES = {
+    $pageview: ['$current_url', 'title', '$referrer'],
+    $pageleave: ['$current_url', 'title', '$referrer'],
+    $groupidentify: ['$group_type', '$group_key', '$group_set'],
+    $screen: ['$screen_name'],
+    $web_vitals: [
+        '$web_vitals_FCP_value',
+        '$web_vitals_CLS_value',
+        '$web_vitals_INP_value',
+        '$web_vitals_LCP_value',
+        '$web_vitals_FCP_event',
+        '$web_vitals_CLS_event',
+        '$web_vitals_INP_event',
+        '$web_vitals_LCP_event',
+    ],
+    $set: ['$set', '$set_once'],
+}
+
 /** Return whether a given filter key is part of PostHog's core (marked by the PostHog logo). */
 export function isCoreFilter(key: string): boolean {
     return Object.values(CORE_FILTER_DEFINITIONS_BY_GROUP).some((mapping) => Object.keys(mapping).includes(key))

diff --git a/frontend/src/scenes/activity/explore/EventDetails.tsx b/frontend/src/scenes/activity/explore/EventDetails.tsx
@@ -61,6 +61,7 @@ export function EventDetails({ event, tableProps }: EventDetailsProps): JSX.Elem
                         tableProps={tableProps}
                         filterable
                         searchable
+                        parent={event.event}
                     />
                     {systemPropsCount > 0 && (
                         <LemonButton className="mb-2" onClick={() => setShowSystemProps(!showSystemProps)} size="small">

diff --git a/frontend/src/scenes/session-recordings/player/inspector/components/ItemEvent.tsx b/frontend/src/scenes/session-recordings/player/inspector/components/ItemEvent.tsx
@@ -6,6 +6,7 @@ import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
 import { TitledSnack } from 'lib/components/TitledSnack'
 import { IconOpenInNew } from 'lib/lemon-ui/icons'
 import { Spinner } from 'lib/lemon-ui/Spinner'
+import { POSTHOG_EVENT_PROMOTED_PROPERTIES } from 'lib/taxonomy'
 import { autoCaptureEventToDescription, capitalizeFirstLetter, isString } from 'lib/utils'
 import { insightUrlForEvent } from 'scenes/insights/utils'
 import { eventPropertyFilteringLogic } from 'scenes/session-recordings/player/inspector/components/eventPropertyFilteringLogic'
@@ -53,7 +54,7 @@ function SummarizeWebVitals({ properties }: { properties: Record<string, any> })
 
 export function ItemEvent({ item, expanded, setExpanded }: ItemEventProps): JSX.Element {
     const insightUrl = insightUrlForEvent(item.data)
-    const { promoteProperties, filterProperties } = useValues(eventPropertyFilteringLogic)
+    const { filterProperties } = useValues(eventPropertyFilteringLogic)
 
     const subValue =
         item.data.event === '$pageview' ? (
@@ -64,7 +65,7 @@ export function ItemEvent({ item, expanded, setExpanded }: ItemEventProps): JSX.
             <SummarizeWebVitals properties={item.data.properties} />
         ) : undefined
 
-    const promotedKeys = promoteProperties(item.data.event)
+    const promotedKeys = POSTHOG_EVENT_PROMOTED_PROPERTIES[item.data.event]
 
     return (
         <div data-attr="item-event">

diff --git a/.../src/scenes/session-recordings/player/inspector/components/eventPropertyFilteringLogic.ts b/.../src/scenes/session-recordings/player/inspector/components/eventPropertyFilteringLogic.ts
@@ -11,33 +11,6 @@ export const eventPropertyFilteringLogic = kea<eventPropertyFilteringLogicType>(
         values: [userPreferencesLogic, ['hidePostHogPropertiesInTable'], preflightLogic, ['isCloudOrDev']],
     }),
     selectors({
-        promoteProperties: [
-            () => [],
-            () => {
-                return (event: string): string[] | undefined => {
-                    if (['$pageview', '$pageleave'].includes(event)) {
-                        return ['$current_url', '$title', '$referrer']
-                    } else if (event === '$groupidentify') {
-                        return ['$group_type', '$group_key', '$group_set']
-                    } else if (event === '$screen') {
-                        return ['$screen_name']
-                    } else if (event === '$web_vitals') {
-                        return [
-                            '$web_vitals_FCP_value',
-                            '$web_vitals_CLS_value',
-                            '$web_vitals_INP_value',
-                            '$web_vitals_LCP_value',
-                            '$web_vitals_FCP_event',
-                            '$web_vitals_CLS_event',
-                            '$web_vitals_INP_event',
-                            '$web_vitals_LCP_event',
-                        ]
-                    } else if (event === '$set') {
-                        return ['$set', '$set_once']
-                    }
-                }
-            },
-        ],
         filterProperties: [
             (s) => [s.hidePostHogPropertiesInTable, s.isCloudOrDev],
             (hidePostHogPropertiesInTable, isCloudOrDev) => {