feat: mini filters 4000 (#26329)

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

frontend/src/lib/lemon-ui/LemonCheckbox/LemonCheckbox.scss

@@ -104,6 +104,13 @@
             }
         }
 
+        &.LemonCheckbox--xsmall {
+            label {
+                min-height: 1.625rem;
+                padding: 0 0.375rem;
+            }
+        }
+
         .Field--error & {
             label {
                 border: 1px solid var(--danger);

frontend/src/lib/lemon-ui/LemonCheckbox/LemonCheckbox.tsx

@@ -18,7 +18,7 @@ export interface LemonCheckboxProps {
     className?: string
     labelClassName?: string
     fullWidth?: boolean
-    size?: 'small' | 'medium'
+    size?: 'xsmall' | 'small' | 'medium'
     bordered?: boolean
     /** @deprecated See https://github.com/PostHog/posthog/pull/9357#pullrequestreview-933783868. */
     color?: string

frontend/src/lib/lemon-ui/LemonMenu/LemonMenu.tsx

@@ -109,12 +109,21 @@ export function LemonMenu({
                 setTimeout(() => itemsRef?.current?.[activeItemIndex]?.current?.scrollIntoView({ block: 'center' }), 0)
             }
         },
+        // no need to update this when itemsRef changes
+        // eslint-disable-next-line react-hooks/exhaustive-deps
         [onVisibilityChange, activeItemIndex]
     )
 
     return (
         <LemonDropdown
-            overlay={<LemonMenuOverlay items={items} tooltipPlacement={tooltipPlacement} itemsRef={itemsRef} />}
+            overlay={
+                <LemonMenuOverlay
+                    buttonSize={dropdownProps.buttonSize || 'small'}
+                    items={items}
+                    tooltipPlacement={tooltipPlacement}
+                    itemsRef={itemsRef}
+                />
+            }
             closeOnClickInside
             referenceRef={referenceRef}
             onVisibilityChange={_onVisibilityChange}
@@ -128,7 +137,7 @@ export interface LemonMenuOverlayProps {
     tooltipPlacement?: TooltipProps['placement']
     itemsRef?: React.RefObject<React.RefObject<HTMLButtonElement>[]>
     /** @default 'small' */
-    buttonSize?: 'small' | 'medium'
+    buttonSize?: 'xsmall' | 'small' | 'medium'
 }
 
 export function LemonMenuOverlay({
@@ -159,7 +168,7 @@ export function LemonMenuOverlay({
 
 interface LemonMenuSectionListProps {
     sections: LemonMenuSection[]
-    buttonSize: 'small' | 'medium'
+    buttonSize: 'xsmall' | 'small' | 'medium'
     tooltipPlacement: TooltipProps['placement'] | undefined
     itemsRef: React.RefObject<React.RefObject<HTMLButtonElement>[]> | undefined
 }
@@ -208,7 +217,7 @@ export function LemonMenuSectionList({
 
 interface LemonMenuItemListProps {
     items: LemonMenuItem[]
-    buttonSize: 'small' | 'medium'
+    buttonSize: 'xsmall' | 'small' | 'medium'
     tooltipPlacement: TooltipProps['placement'] | undefined
     itemsRef: React.RefObject<React.RefObject<HTMLButtonElement>[]> | undefined
     itemIndexOffset?: number
@@ -241,7 +250,7 @@ export function LemonMenuItemList({
 
 interface LemonMenuItemButtonProps {
     item: LemonMenuItem
-    size: 'small' | 'medium'
+    size: 'xsmall' | 'small' | 'medium'
     tooltipPlacement: TooltipProps['placement'] | undefined
 }
 
@@ -280,8 +289,8 @@ const LemonMenuItemButton: FunctionComponent<LemonMenuItemButtonProps & React.Re
                     items={items}
                     tooltipPlacement={tooltipPlacement}
                     placement={placement || 'right-start'}
-                    closeOnClickInside={custom ? false : true}
-                    closeParentPopoverOnClickInside={custom ? false : true}
+                    closeOnClickInside={!custom}
+                    closeParentPopoverOnClickInside={!custom}
                 >
                     {button}
                 </LemonMenu>

frontend/src/lib/utils.tsx

@@ -501,6 +501,7 @@ export const humanFriendlyMilliseconds = (timestamp: number | undefined): string
 
     return `${(timestamp / 1000).toFixed(2)}s`
 }
+
 export function humanFriendlyDuration(
     d: string | number | null | undefined,
     {

frontend/src/lib/utils/eventUsageLogic.ts

@@ -18,6 +18,8 @@ import { Holdout } from 'scenes/experiments/holdoutsLogic'
 import { isFilterWithDisplay, isFunnelsFilter, isTrendsFilter } from 'scenes/insights/sharedUtils'
 import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
 import { EventIndex } from 'scenes/session-recordings/player/eventIndex'
+import { MiniFilterKey } from 'scenes/session-recordings/player/inspector/miniFiltersLogic'
+import { InspectorListItemType } from 'scenes/session-recordings/player/inspector/playerInspectorLogic'
 import { filtersFromUniversalFilterGroups } from 'scenes/session-recordings/utils'
 import { NewSurvey, SurveyTemplateType } from 'scenes/surveys/constants'
 import { userLogic } from 'scenes/userLogic'
@@ -63,7 +65,6 @@ import {
     RecordingUniversalFilters,
     Resource,
     SessionPlayerData,
-    SessionRecordingPlayerTab,
     SessionRecordingType,
     SessionRecordingUsageType,
     Survey,
@@ -442,11 +443,10 @@ export const eventUsageLogic = kea<eventUsageLogicType>([
         reportRecordingPlayerSeekbarEventHovered: true,
         reportRecordingPlayerSpeedChanged: (newSpeed: number) => ({ newSpeed }),
         reportRecordingPlayerSkipInactivityToggled: (skipInactivity: boolean) => ({ skipInactivity }),
-        reportRecordingInspectorTabViewed: (tab: SessionRecordingPlayerTab) => ({ tab }),
-        reportRecordingInspectorItemExpanded: (tab: SessionRecordingPlayerTab, index: number) => ({ tab, index }),
-        reportRecordingInspectorMiniFilterViewed: (tab: SessionRecordingPlayerTab, minifilterKey: string) => ({
-            tab,
+        reportRecordingInspectorItemExpanded: (tab: InspectorListItemType, index: number) => ({ tab, index }),
+        reportRecordingInspectorMiniFilterViewed: (minifilterKey: MiniFilterKey, enabled: boolean) => ({
             minifilterKey,
+            enabled,
         }),
         reportNextRecordingTriggered: (automatic: boolean) => ({
             automatic,
@@ -954,14 +954,11 @@ export const eventUsageLogic = kea<eventUsageLogicType>([
         reportRecordingPlayerSkipInactivityToggled: ({ skipInactivity }) => {
             posthog.capture('recording player skip inactivity toggled', { skip_inactivity: skipInactivity })
         },
-        reportRecordingInspectorTabViewed: ({ tab }) => {
-            posthog.capture('recording inspector tab viewed', { tab })
-        },
         reportRecordingInspectorItemExpanded: ({ tab, index }) => {
-            posthog.capture('recording inspector item expanded', { tab, index })
+            posthog.capture('recording inspector item expanded', { tab: 'replay-4000', type: tab, index })
         },
-        reportRecordingInspectorMiniFilterViewed: ({ tab, minifilterKey }) => {
-            posthog.capture('recording inspector minifilter selected', { tab, minifilterKey })
+        reportRecordingInspectorMiniFilterViewed: ({ minifilterKey, enabled }) => {
+            posthog.capture('recording inspector minifilter selected', { tab: 'replay-4000', enabled, minifilterKey })
         },
         reportNextRecordingTriggered: ({ automatic }) => {
             posthog.capture('recording next recording triggered', { automatic })

frontend/src/scenes/session-recordings/apm/components/PerformanceCard.tsx

@@ -193,18 +193,21 @@ function itemToPerformanceValues(item: PerformanceEvent): {
 
 export function PerformanceCardRow({ item }: { item: PerformanceEvent }): JSX.Element {
     const performanceValues = itemToPerformanceValues(item)
-
     return (
         <OverviewGrid>
-            {Object.entries(summaryMapping).map(([key, summary]) => (
-                <OverviewGridItem key={key} description={summary.description} label={summary.label}>
-                    <PerformanceDuration
-                        benchmarks={summary.scoreBenchmarks}
-                        value={performanceValues[key]}
-                        loading={summary.allowLoadingIndicator && !performanceValues.loaded}
-                    />
-                </OverviewGridItem>
-            ))}
+            {Object.entries(summaryMapping)
+                .filter(([key]) => performanceValues[key] !== undefined)
+                .map(([key, summary]) => {
+                    return (
+                        <OverviewGridItem key={key} description={summary.description} label={summary.label}>
+                            <PerformanceDuration
+                                benchmarks={summary.scoreBenchmarks}
+                                value={performanceValues[key]}
+                                loading={summary.allowLoadingIndicator && !performanceValues.loaded}
+                            />
+                        </OverviewGridItem>
+                    )
+                })}
         </OverviewGrid>
     )
 }
@@ -219,15 +222,17 @@ export function PerformanceCardDescriptions({
     const performanceValues = itemToPerformanceValues(item)
     return (
         <div className={clsx('p-2 text-xs border-t', !expanded && 'hidden')}>
-            {Object.entries(summaryMapping).map(([key, summary]) => (
-                <PerformanceCardDescription
-                    key={key}
-                    benchmarks={summary.scoreBenchmarks}
-                    description={summary.description}
-                    label={summary.label}
-                    value={performanceValues[key]}
-                />
-            ))}
+            {Object.entries(summaryMapping)
+                .filter(([key]) => performanceValues[key] !== undefined)
+                .map(([key, summary]) => (
+                    <PerformanceCardDescription
+                        key={key}
+                        benchmarks={summary.scoreBenchmarks}
+                        description={summary.description}
+                        label={summary.label}
+                        value={performanceValues[key]}
+                    />
+                ))}
         </div>
     )
 }

frontend/src/scenes/session-recordings/apm/performanceEventDataLogic.ts

@@ -4,19 +4,18 @@ import {
     initiatorToAssetTypeMapping,
     itemSizeInfo,
 } from 'scenes/session-recordings/apm/performance-event-utils'
-import { miniFiltersLogic } from 'scenes/session-recordings/player/inspector/miniFiltersLogic'
 import { InspectorListItemBase } from 'scenes/session-recordings/player/inspector/playerInspectorLogic'
 import {
     sessionRecordingDataLogic,
     SessionRecordingDataLogicProps,
 } from 'scenes/session-recordings/player/sessionRecordingDataLogic'
 
-import { PerformanceEvent, RecordingEventType, SessionRecordingPlayerTab } from '~/types'
+import { FilterableInspectorListItemTypes, PerformanceEvent, RecordingEventType } from '~/types'
 
 import type { performanceEventDataLogicType } from './performanceEventDataLogicType'
 
 export type InspectorListItemPerformance = InspectorListItemBase & {
-    type: SessionRecordingPlayerTab.NETWORK
+    type: FilterableInspectorListItemTypes.NETWORK
     data: PerformanceEvent
 }
 
@@ -105,12 +104,7 @@ export const performanceEventDataLogic = kea<performanceEventDataLogicType>([
     key((props: PerformanceEventDataLogicProps) => `${props.key}-${props.sessionRecordingId}`),
     connect((props: PerformanceEventDataLogicProps) => ({
         actions: [],
-        values: [
-            miniFiltersLogic,
-            ['showOnlyMatching', 'tab', 'miniFiltersByKey', 'searchQuery'],
-            sessionRecordingDataLogic(props),
-            ['sessionPlayerData', 'webVitalsEvents'],
-        ],
+        values: [sessionRecordingDataLogic(props), ['sessionPlayerData', 'webVitalsEvents']],
     })),
     selectors(() => ({
         allPerformanceEvents: [

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

@@ -0,0 +1,63 @@
+import { LemonButton, LemonButtonProps } from 'lib/lemon-ui/LemonButton'
+import { LemonMenu, LemonMenuItem, LemonMenuProps } from 'lib/lemon-ui/LemonMenu/LemonMenu'
+import { Tooltip } from 'lib/lemon-ui/Tooltip'
+
+/**
+ * TODO the lemon button font only has 700 and 800 weights available.
+ * Ideally these buttons would use more like 400 and 500 weights.
+ * or even 300 and 400 weights.
+ * when inactive / active respectively.
+ */
+
+interface SettingsMenuProps extends Omit<LemonMenuProps, 'items' | 'children'> {
+    label: string
+    items: LemonMenuItem[]
+    icon: JSX.Element
+    isAvailable?: boolean
+    whenUnavailable?: LemonMenuItem
+}
+
+export function SettingsMenu({
+    label,
+    items,
+    icon,
+    isAvailable = true,
+    whenUnavailable,
+    ...props
+}: SettingsMenuProps): JSX.Element {
+    const active = items.some((cf) => !!cf.active)
+    return (
+        <LemonMenu
+            buttonSize="xsmall"
+            closeOnClickInside={false}
+            items={isAvailable ? items : whenUnavailable ? [whenUnavailable] : []}
+            {...props}
+        >
+            <LemonButton status={active ? 'danger' : 'default'} size="xsmall" icon={icon}>
+                {label}
+            </LemonButton>
+        </LemonMenu>
+    )
+}
+
+export function SettingsToggle({
+    title,
+    icon,
+    label,
+    active,
+    ...props
+}: Omit<LemonButtonProps, 'status' | 'sideAction'> & {
+    active: boolean
+    title: string
+    icon?: JSX.Element | null
+    label: JSX.Element | string
+}): JSX.Element {
+    const button = (
+        <LemonButton icon={icon} size="xsmall" status={active ? 'danger' : 'default'} {...props}>
+            {label}
+        </LemonButton>
+    )
+
+    // otherwise the tooltip shows instead of the disabled reason
+    return props.disabledReason ? button : <Tooltip title={title}>{button}</Tooltip>
+}

frontend/src/scenes/session-recordings/player/PlayerSidebar.tsx

@@ -79,6 +79,7 @@ export function PlayerSidebar(): JSX.Element {
                                 label: capitalizeFirstLetter(tabId),
                             }))}
                             barClassName="mb-0"
+                            size="small"
                         />
                         <div className="flex flex-1 border-b shrink-0" />
                         <div className="flex gap-1 border-b end">

frontend/src/scenes/session-recordings/player/inspector/PlayerInspector.tsx

@@ -1,3 +1,4 @@
+import { PlayerInspectorBottomSettings } from 'scenes/session-recordings/player/inspector/PlayerInspectorBottomSettings'
 import { PlayerInspectorControls } from 'scenes/session-recordings/player/inspector/PlayerInspectorControls'
 import { PlayerInspectorList } from 'scenes/session-recordings/player/inspector/PlayerInspectorList'
 
@@ -6,6 +7,7 @@ export function PlayerInspector(): JSX.Element {
         <>
             <PlayerInspectorControls />
             <PlayerInspectorList />
+            <PlayerInspectorBottomSettings />
         </>
     )
 }