fix: person replay overview

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({
         </div>
     )
 }
+
 interface PropertiesTableType extends BasePropertyType {
     properties?: Record<string, any> | Array<Record<string, any>>
     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, TaxonomicFilterGroupType> = {
+                    [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

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 {
             <PlayerSidebarOverviewGrid />
             <PlayerSidebarSessionSummary />
             <div className="font-bold bg-bg-light px-2 border-b py-3">
+                <Tooltip title="These are the person properties right now. They might have changed and not match the person properties at the time of recording.">
+                    <h2>
+                        Latest person properties <IconInfo />
+                    </h2>
+                </Tooltip>
                 <PersonDisplay person={sessionPerson} withIcon noPopover />
             </div>
             {sessionPlayerMetaDataLoading ? (
@@ -31,6 +38,8 @@ export function PlayerSidebarOverviewTab(): JSX.Element {
                     type={PropertyDefinitionType.Person}
                     sortProperties
                     embedded
+                    filterable
+                    className="mt-4"
                 />
             )}
         </div>