feat: toolbar event debugger (#26561)

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>

frontend/src/lib/taxonomy.tsx

@@ -92,6 +92,10 @@ export const CORE_FILTER_DEFINITIONS_BY_GROUP = {
             description: 'User interactions that were automatically captured.',
             examples: ['clicked button'],
         },
+        $$heatmap: {
+            label: 'Heatmap',
+            description: 'Heatmap events carry heatmap data to the backend, they do not contribute to event counts.',
+        },
         $copy_autocapture: {
             label: 'Clipboard autocapture',
             description: 'Selected text automatically captured when a user copies or cuts.',

frontend/src/scenes/session-recordings/components/PanelSettings.tsx

@@ -34,7 +34,7 @@ export function SettingsBar({
             className={clsx(
                 border === 'bottom' && 'border-b',
                 border === 'top' && 'border-t',
-                'flex flex-row w-full overflow-hidden font-light text-small bg-bg-3000',
+                'flex flex-row w-full overflow-hidden font-light text-xs bg-bg-3000 items-center',
                 className
             )}
         >

frontend/src/toolbar/Toolbar.stories.tsx

@@ -142,6 +142,12 @@ export const Experiments = (): JSX.Element => {
     return <BasicTemplate menu="experiments" />
 }
 
+export const ExperimentsDisabledInParent = (): JSX.Element => {
+    // fake that the host site posthog config disables web experiments
+    window.parent.posthog = { config: { disable_web_experiments: true } }
+    return <BasicTemplate menu="experiments" />
+}
+
 // Dark theme
 export const DefaultDark = (): JSX.Element => {
     return <BasicTemplate theme="dark" />

frontend/src/toolbar/bar/ToolbarMenu.tsx

@@ -3,22 +3,29 @@ import clsx from 'clsx'
 export type ToolbarMenuProps = {
     children: React.ReactNode
     className?: string
+    noPadding?: boolean
 }
 
 export function ToolbarMenu({ children, className }: ToolbarMenuProps): JSX.Element {
     return <div className={clsx('w-full h-full flex flex-col overflow-hidden', className)}>{children}</div>
 }
 
-ToolbarMenu.Header = function ToolbarMenuHeader({ children, className }: ToolbarMenuProps): JSX.Element {
-    return <div className={clsx('pt-1 px-1', className)}>{children}</div>
+ToolbarMenu.Header = function ToolbarMenuHeader({ children, className, noPadding }: ToolbarMenuProps): JSX.Element {
+    return <div className={clsx(!noPadding && 'px-1 pt-1', className)}>{children}</div>
 }
 
-ToolbarMenu.Body = function ToolbarMenuBody({ children, className }: ToolbarMenuProps): JSX.Element {
+ToolbarMenu.Body = function ToolbarMenuBody({ children, className, noPadding }: ToolbarMenuProps): JSX.Element {
     return (
-        <div className={clsx('flex flex-col flex-1 h-full overflow-y-auto px-1 min-h-20', className)}>{children}</div>
+        <div className={clsx(!noPadding && 'px-1', 'flex flex-col flex-1 h-full overflow-y-auto min-h-20', className)}>
+            {children}
+        </div>
     )
 }
 
-ToolbarMenu.Footer = function ToolbarMenufooter({ children, className }: ToolbarMenuProps): JSX.Element {
-    return <div className={clsx('flex flex-row items-center p-2 border-t gap-2', className)}>{children}</div>
+ToolbarMenu.Footer = function ToolbarMenufooter({ children, className, noPadding }: ToolbarMenuProps): JSX.Element {
+    return (
+        <div className={clsx(!noPadding && 'p-1', 'flex flex-row items-center border-t gap-2', className)}>
+            {children}
+        </div>
+    )
 }

frontend/src/toolbar/debug/EventDebugMenu.tsx

@@ -1,67 +1,133 @@
+import { BaseIcon, IconCheck, IconEye, IconLogomark, IconSearch, IconVideoCamera } from '@posthog/icons'
 import { useActions, useValues } from 'kea'
 import { AnimatedCollapsible } from 'lib/components/AnimatedCollapsible'
-import { TZLabel } from 'lib/components/TZLabel'
-import { LemonCheckbox } from 'lib/lemon-ui/LemonCheckbox'
+import { PropertyKeyInfo } from 'lib/components/PropertyKeyInfo'
+import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
+import { dayjs } from 'lib/dayjs'
+import { IconUnverifiedEvent } from 'lib/lemon-ui/icons'
 import { LemonInput } from 'lib/lemon-ui/LemonInput'
-import { LemonSegmentedButton } from 'lib/lemon-ui/LemonSegmentedButton'
+import { LemonMenuItem } from 'lib/lemon-ui/LemonMenu'
+import { SettingsBar, SettingsMenu, SettingsToggle } from 'scenes/session-recordings/components/PanelSettings'
 import { SimpleKeyValueList } from 'scenes/session-recordings/player/inspector/components/SimpleKeyValueList'
 
 import { eventDebugMenuLogic } from '~/toolbar/debug/eventDebugMenuLogic'
+import { EventType } from '~/types'
 
 import { ToolbarMenu } from '../bar/ToolbarMenu'
 
+function showEventMenuItem(
+    label: string,
+    count: number,
+    icon: JSX.Element,
+    isActive: boolean,
+    onClick: () => void
+): LemonMenuItem {
+    return {
+        label: (
+            <div className="w-full flex flex-row justify-between items-center">
+                <div className="flex flex-row items-center gap-1">
+                    {isActive ? <IconCheck /> : <BaseIcon />}
+                    {icon}
+                    {label}
+                </div>
+                <span
+                    // without setting fontVariant to none a single digit number between brackets gets rendered as a ligature 🤷
+                    // eslint-disable-next-line react/forbid-dom-props
+                    style={{ fontVariant: 'none' }}
+                >
+                    ({count})
+                </span>
+            </div>
+        ),
+        active: isActive,
+        onClick: onClick,
+    }
+}
+
+function EventTimestamp({ e }: { e: EventType }): JSX.Element {
+    const ts = dayjs(e.timestamp)
+
+    let formatString = 'HH:mm:ss'
+    // if we're watching events around midnight, show the day as well for yesterday's events
+    if (!ts.isSame(dayjs(), 'day')) {
+        formatString = 'ddd HH:mm:ss'
+    }
+
+    return (
+        <div>
+            <span>{ts.format(formatString)}</span>
+            <span className="text-xxs text-muted">{ts.format('.SSS')}</span>
+        </div>
+    )
+}
+
 export const EventDebugMenu = (): JSX.Element => {
     const {
-        searchType,
+        searchVisible,
         searchText,
-        filteredEvents,
         isCollapsedEventRow,
+        activeFilteredEvents,
+        searchFilteredEventsCount,
         expandedEvent,
-        showRecordingSnapshots,
-        snapshotCount,
-        eventCount,
-        filteredProperties,
+        selectedEventTypes,
     } = useValues(eventDebugMenuLogic)
-    const { setSearchType, markExpanded, setShowRecordingSnapshots, setSearchText } = useActions(eventDebugMenuLogic)
+    const { markExpanded, setSelectedEventType, setSearchText, setSearchVisible } = useActions(eventDebugMenuLogic)
 
+    const showEventsMenuItems = [
+        showEventMenuItem(
+            'PostHog Events',
+            searchFilteredEventsCount['posthog'],
+            <IconLogomark />,
+            selectedEventTypes.includes('posthog'),
+            () => setSelectedEventType('posthog', !selectedEventTypes.includes('posthog'))
+        ),
+        showEventMenuItem(
+            'Custom Events',
+            searchFilteredEventsCount['custom'],
+            <IconVideoCamera />,
+            selectedEventTypes.includes('custom'),
+            () => setSelectedEventType('custom', !selectedEventTypes.includes('custom'))
+        ),
+        showEventMenuItem(
+            'Replay Events',
+            searchFilteredEventsCount['snapshot'],
+            <IconUnverifiedEvent />,
+            selectedEventTypes.includes('snapshot'),
+            () => setSelectedEventType('snapshot', !selectedEventTypes.includes('snapshot'))
+        ),
+    ]
     return (
         <ToolbarMenu>
-            <ToolbarMenu.Header>
+            <ToolbarMenu.Header noPadding>
                 <div className="flex flex-col pb-2 space-y-1">
-                    <div className="flex flex-row justify-around items-center">
-                        <span className="text-xs">Seen {eventCount} events.</span>
-                        <LemonCheckbox
-                            checked={showRecordingSnapshots}
-                            onChange={(c) => setShowRecordingSnapshots(c)}
-                            label={`Show ${snapshotCount} snapshot events`}
-                            size="small"
-                        />
-                    </div>
                     <div className="flex justify-center flex-col">
-                        <div className="flex flex-row items-center justify-between space-x-2">
-                            <span>search:</span>
-                            <LemonSegmentedButton
-                                size="small"
-                                value={searchType}
-                                options={[
-                                    {
-                                        value: 'events',
-                                        label: 'events',
-                                    },
-                                    { value: 'properties', label: 'properties' },
-                                ]}
-                                onChange={setSearchType}
+                        <SettingsBar border="bottom" className="justify-end">
+                            <div className="flex-1 text-sm">
+                                View events from this page as they are sent to PostHog.
+                            </div>
+                            <SettingsToggle
+                                label="Search"
+                                icon={<IconSearch />}
+                                active={searchVisible}
+                                onClick={() => setSearchVisible(!searchVisible)}
                             />
-
-                            <LemonInput fullWidth={true} type="search" value={searchText} onChange={setSearchText} />
-                        </div>
+                        </SettingsBar>
+                        {searchVisible && (
+                            <LemonInput
+                                size="xsmall"
+                                fullWidth={true}
+                                type="search"
+                                value={searchText}
+                                onChange={setSearchText}
+                            />
+                        )}
                     </div>
                 </div>
             </ToolbarMenu.Header>
             <ToolbarMenu.Body>
                 <div className="flex flex-col space-y-1">
-                    {filteredEvents.length ? (
-                        filteredEvents.map((e) => {
+                    {activeFilteredEvents.length ? (
+                        activeFilteredEvents.map((e) => {
                             return (
                                 <div
                                     className="-mx-1 py-1 px-2 cursor-pointer"
@@ -70,23 +136,21 @@ export const EventDebugMenu = (): JSX.Element => {
                                         expandedEvent === e.uuid ? markExpanded(null) : markExpanded(e.uuid || null)
                                     }}
                                 >
-                                    <div className="flex flex-row justify-between">
-                                        <div>{e.event}</div>
-                                        <div>
-                                            <TZLabel time={e.timestamp} />
-                                        </div>
+                                    <div className="flex flex-row justify-between hover:bg-bg-light hover:text-text-3000-light">
+                                        <EventTimestamp e={e} />
+                                        <PropertyKeyInfo
+                                            value={e.event}
+                                            type={TaxonomicFilterGroupType.Events}
+                                            disableIcon={true}
+                                        />
                                     </div>
                                     <AnimatedCollapsible
                                         collapsed={e.uuid === undefined ? true : isCollapsedEventRow(e.uuid)}
                                     >
                                         <div className="my-1 ml-1 pl-2 border-l-2">
                                             <SimpleKeyValueList
-                                                item={filteredProperties(e.properties)}
-                                                emptyMessage={
-                                                    searchText && searchType === 'properties'
-                                                        ? 'No matching properties'
-                                                        : 'No properties'
-                                                }
+                                                item={e.properties}
+                                                emptyMessage={searchText ? 'No matching properties' : 'No properties'}
                                             />
                                         </div>
                                     </AnimatedCollapsible>
@@ -95,15 +159,22 @@ export const EventDebugMenu = (): JSX.Element => {
                         })
                     ) : (
                         <div className="px-4 py-2">
-                            {searchText && searchType === 'events'
-                                ? 'No events match your search.'
+                            {searchText && !!activeFilteredEvents.length
+                                ? 'Nothing matches your search.'
                                 : 'Interact with your page and then come back to the toolbar to see what events were generated.'}
                         </div>
                     )}
                 </div>
             </ToolbarMenu.Body>
-            <ToolbarMenu.Footer>
-                <span className="text-xs">View events from this page as they are sent to PostHog.</span>
+            <ToolbarMenu.Footer noPadding>
+                <SettingsBar border="top" className="justify-end">
+                    <SettingsMenu
+                        items={showEventsMenuItems}
+                        highlightWhenActive={false}
+                        icon={<IconEye />}
+                        label={`Showing ${activeFilteredEvents.length} events`}
+                    />
+                </SettingsBar>
             </ToolbarMenu.Footer>
         </ToolbarMenu>
     )