diff --git a/frontend/src/lib/components/PropertiesTable/PropertiesTable.tsx b/frontend/src/lib/components/PropertiesTable/PropertiesTable.tsx index 296317e5d7e7b..38a196bdf0e44 100644 --- a/frontend/src/lib/components/PropertiesTable/PropertiesTable.tsx +++ b/frontend/src/lib/components/PropertiesTable/PropertiesTable.tsx @@ -14,7 +14,7 @@ import { getCoreFilterDefinition, PROPERTY_KEYS, } from 'lib/taxonomy' -import { isURL } from 'lib/utils' +import { isObject, isURL } from 'lib/utils' import { useMemo, useState } from 'react' import { NewProperty } from 'scenes/persons/NewProperty' import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic' @@ -180,6 +180,7 @@ function ValueDisplay({ ) } + interface PropertiesTableType extends BasePropertyType { properties?: Record | Array> sortProperties?: boolean @@ -200,7 +201,7 @@ export function PropertiesTable({ properties, rootKey, onEdit, - sortProperties = false, + sortProperties = true, searchable = false, filterable = false, embedded = true, @@ -218,22 +219,36 @@ export function PropertiesTable({ const { isCloudOrDev } = useValues(preflightLogic) const objectProperties = useMemo(() => { - if (!properties || Array.isArray(properties)) { + if (!properties || Array.isArray(properties) || !isObject(properties)) { return [] } - let entries = Object.entries(properties).sort((a, b) => { - // if this is a posthog property we want to sort by its label - const left = getCoreFilterDefinition(a[0], TaxonomicFilterGroupType.EventProperties)?.label || a[0] - const right = getCoreFilterDefinition(b[0], TaxonomicFilterGroupType.EventProperties)?.label || b[0] - if (left < right) { - return -1 - } - if (left > right) { - return 1 - } - return 0 - }) + let entries = Object.entries(properties) + if (sortProperties) { + entries = entries.sort((a, b) => { + // if this is a posthog property we want to sort by its label + const propertyTypeMap: Record = { + [PropertyDefinitionType.Event]: TaxonomicFilterGroupType.EventProperties, + [PropertyDefinitionType.Person]: TaxonomicFilterGroupType.PersonProperties, + [PropertyDefinitionType.Group]: TaxonomicFilterGroupType.GroupsPrefix, + [PropertyDefinitionType.Session]: TaxonomicFilterGroupType.SessionProperties, + [PropertyDefinitionType.LogEntry]: TaxonomicFilterGroupType.LogEntries, + } + + const propertyType = propertyTypeMap[type] || TaxonomicFilterGroupType.EventProperties + + const left = getCoreFilterDefinition(a[0], propertyType)?.label || a[0] + const right = getCoreFilterDefinition(b[0], propertyType)?.label || b[0] + + if (left < right) { + return -1 + } + if (left > right) { + return 1 + } + return 0 + }) + } if (searchTerm) { const normalizedSearchTerm = searchTerm.toLowerCase() @@ -255,24 +270,7 @@ export function PropertiesTable({ }) } - if (sortProperties) { - entries.sort(([aKey], [bKey]) => { - if (highlightedKeys) { - const aHighlightValue = highlightedKeys.includes(aKey) ? 0 : 1 - const bHighlightValue = highlightedKeys.includes(bKey) ? 0 : 1 - if (aHighlightValue !== bHighlightValue) { - return aHighlightValue - bHighlightValue - } - } - - if (aKey.startsWith('$') && !bKey.startsWith('$')) { - return 1 - } else if (!aKey.startsWith('$') && bKey.startsWith('$')) { - return -1 - } - return aKey.localeCompare(bKey) - }) - } else if (highlightedKeys) { + if (highlightedKeys) { entries.sort(([aKey], [bKey]) => { const aHighlightValue = highlightedKeys.includes(aKey) ? 0 : 1 const bHighlightValue = highlightedKeys.includes(bKey) ? 0 : 1 diff --git a/frontend/src/scenes/session-recordings/player/sidebar/PlayerSidebarOverviewTab.tsx b/frontend/src/scenes/session-recordings/player/sidebar/PlayerSidebarOverviewTab.tsx index 03398584ac5ea..644cc2c20e17e 100644 --- a/frontend/src/scenes/session-recordings/player/sidebar/PlayerSidebarOverviewTab.tsx +++ b/frontend/src/scenes/session-recordings/player/sidebar/PlayerSidebarOverviewTab.tsx @@ -1,7 +1,9 @@ import { PersonDisplay } from '@posthog/apps-common' +import { IconInfo } from '@posthog/icons' import { useValues } from 'kea' import { PropertiesTable } from 'lib/components/PropertiesTable' import { LemonSkeleton } from 'lib/lemon-ui/LemonSkeleton' +import { Tooltip } from 'lib/lemon-ui/Tooltip' import { PlayerSidebarSessionSummary } from 'scenes/session-recordings/player/sidebar/PlayerSidebarSessionSummary' import { PropertyDefinitionType } from '~/types' @@ -19,6 +21,11 @@ export function PlayerSidebarOverviewTab(): JSX.Element {
+ +

+ Latest person properties +

+
{sessionPlayerMetaDataLoading ? ( @@ -31,6 +38,8 @@ export function PlayerSidebarOverviewTab(): JSX.Element { type={PropertyDefinitionType.Person} sortProperties embedded + filterable + className="mt-4" /> )}