Skip to content

Commit

Permalink
prefer event properties to person properties
Browse files Browse the repository at this point in the history
  • Loading branch information
pauldambra committed Jan 1, 2025
1 parent 9a7d825 commit 5c3aa89
Show file tree
Hide file tree
Showing 3 changed files with 63 additions and 33 deletions.
32 changes: 22 additions & 10 deletions frontend/src/scenes/session-recordings/player/playerMetaLogic.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ import { SimpleTimeLabel } from '../components/SimpleTimeLabel'
import { sessionRecordingsListPropertiesLogic } from '../playlist/sessionRecordingsListPropertiesLogic'
import type { playerMetaLogicType } from './playerMetaLogicType'

const browserPropertyKeys = ['$geoip_country_code', '$browser', '$device_type', '$os']
const browserPropertyKeys = ['$geoip_country_code', '$browser', '$device_type', '$os', '$referring_domain']
const mobilePropertyKeys = ['$geoip_country_code', '$device_type', '$os_name']
const recordingPropertyKeys = ['click_count', 'keypress_count', 'console_error_count'] as const

Expand Down Expand Up @@ -85,6 +85,11 @@ export const playerMetaLogic = kea<playerMetaLogicType>([
},
})),
selectors(() => ({
loading: [
(s) => [s.sessionPlayerMetaDataLoading, s.recordingPropertiesLoading],
(sessionPlayerMetaDataLoading, recordingPropertiesLoading) =>
sessionPlayerMetaDataLoading || recordingPropertiesLoading,
],
sessionPerson: [
(s) => [s.sessionPlayerData],
(playerData): PersonType | null => {
Expand Down Expand Up @@ -183,8 +188,8 @@ export const playerMetaLogic = kea<playerMetaLogicType>([
},
],
overviewItems: [
(s) => [s.sessionPlayerMetaData, s.startTime, s.endTime],
(sessionPlayerMetaData, startTime, endTime) => {
(s) => [s.sessionPlayerMetaData, s.startTime, s.endTime, s.recordingPropertiesById],
(sessionPlayerMetaData, startTime, endTime, recordingPropertiesById) => {
const items: OverviewItem[] = []
if (startTime) {
items.push({
Expand Down Expand Up @@ -220,24 +225,31 @@ export const playerMetaLogic = kea<playerMetaLogicType>([
}
})

const recordingProperties = sessionPlayerMetaData?.id
? recordingPropertiesById[sessionPlayerMetaData?.id] || {}
: {}
const personProperties = sessionPlayerMetaData?.person?.properties ?? {}

const deviceType = personProperties['$device_type'] || personProperties['$initial_device_type']
const deviceType =
recordingProperties['$device_type'] ||
personProperties['$device_type'] ||
personProperties['$initial_device_type']
const deviceTypePropertyKeys = deviceType === 'Mobile' ? mobilePropertyKeys : browserPropertyKeys

deviceTypePropertyKeys.forEach((property) => {
if (personProperties[property]) {
const value = personProperties[property]
if (recordingProperties[property] || personProperties[property]) {
const propertyType = recordingProperties[property]
? TaxonomicFilterGroupType.EventProperties
: TaxonomicFilterGroupType.PersonProperties
const value = recordingProperties[property] || personProperties[property]

const tooltipTitle =
property === '$geoip_country_code' && value in countryCodeToName
? countryCodeToName[value as keyof typeof countryCodeToName]
: value

items.push({
label:
getCoreFilterDefinition(property, TaxonomicFilterGroupType.PersonProperties)?.label ??
property,
label: getCoreFilterDefinition(property, propertyType)?.label ?? property,
value,
tooltipTitle,
type: 'property',
Expand All @@ -252,7 +264,7 @@ export const playerMetaLogic = kea<playerMetaLogicType>([
})),
listeners(({ actions, values, props }) => ({
loadRecordingMetaSuccess: () => {
if (values.sessionPlayerMetaData && !values.recordingPropertiesLoading) {
if (values.sessionPlayerMetaData) {
actions.maybeLoadPropertiesForSessions([values.sessionPlayerMetaData])
}
},
Expand Down
Original file line number Diff line number Diff line change
@@ -1,32 +1,42 @@
import { useValues } from 'kea'
import { PropertyIcon } from 'lib/components/PropertyIcon'
import { LemonSkeleton } from 'lib/lemon-ui/LemonSkeleton'

import { OverviewGrid, OverviewGridItem } from '../../components/OverviewGrid'
import { playerMetaLogic } from '../playerMetaLogic'
import { sessionRecordingPlayerLogic } from '../sessionRecordingPlayerLogic'

export function PlayerSidebarOverviewGrid(): JSX.Element {
const { logicProps } = useValues(sessionRecordingPlayerLogic)
const { overviewItems } = useValues(playerMetaLogic(logicProps))
const { overviewItems, loading } = useValues(playerMetaLogic(logicProps))

return (
<div className="rounded border bg-bg-light m-2">
<OverviewGrid>
{overviewItems.map((item) => (
<OverviewGridItem
key={item.label}
description={item.tooltipTitle}
label={item.label}
icon={item.icon}
>
{item.type === 'property' ? (
<PropertyIcon property={item.property} value={item.value} />
) : (
item.value
)}
</OverviewGridItem>
))}
</OverviewGrid>
{loading ? (
<div className="flex flex-col space-y-1 px-1 py-0.5">
<LemonSkeleton.Row repeat={6} className="h-5" />
</div>
) : (
<OverviewGrid>
{overviewItems.map((item) => {
return (
<OverviewGridItem
key={item.label}
description={item.tooltipTitle}
label={item.label}
icon={item.icon}
>
<div className="flex flex-row items-center space-x-2">
{item.type === 'property' && (
<PropertyIcon property={item.property} value={item.value} />
)}
<span>{item.value}</span>
</div>
</OverviewGridItem>
)
})}
</OverviewGrid>
)}
</div>
)
}
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,8 @@ export const sessionRecordingsListPropertiesLogic = kea<sessionRecordingsListPro
any(properties.$browser) as $browser,
any(properties.$device_type) as $device_type,
any(properties.$os) as $os,
any(properties.$os_name) as $os_name
any(properties.$os_name) as $os_name ,
argMin(properties.$referring_domain, timestamp) as $referring_domain
FROM events
WHERE event IN ${Object.keys(CORE_FILTER_DEFINITIONS_BY_GROUP['events'])}
AND session_id IN ${sessionIds}
Expand All @@ -64,12 +65,19 @@ export const sessionRecordingsListPropertiesLogic = kea<sessionRecordingsListPro
actions.reportRecordingsListPropertiesFetched(loadTimeMs)

breakpoint()
return (response.results || []).map(
(x: any): SessionRecordingPropertiesType => ({
return (response.results || []).map((x: any): SessionRecordingPropertiesType => {
return {
id: x[0],
properties: JSON.parse(x[1] || '{}'),
})
)
properties: {
$geoip_country_code: x[1],
$browser: x[2],
$device_type: x[3],
$os: x[4],
$os_name: x[5],
$referring_domain: x[6],
},
}
})
},
},
],
Expand Down

0 comments on commit 5c3aa89

Please sign in to comment.