wip: new replay panels

frontend/src/lib/components/DateFilter/DateFilter.tsx

@@ -35,6 +35,7 @@ export interface DateFilterProps {
     dateOptions?: DateMappingOption[]
     isDateFormatted?: boolean
     size?: LemonButtonProps['size']
+    type?: LemonButtonProps['type']
     dropdownPlacement?: Placement
     /* True when we're not dealing with ranges, but a single date / relative date */
     isFixedDateMode?: boolean
@@ -60,6 +61,7 @@ export function DateFilter({
     dateOptions = dateMapping,
     isDateFormatted = true,
     size,
+    type,
     dropdownPlacement = 'bottom-start',
     max,
     isFixedDateMode = false,
@@ -242,7 +244,7 @@ export function DateFilter({
             <LemonButton
                 id="daterange_selector"
                 size={size ?? 'small'}
-                type="secondary"
+                type={type ?? 'secondary'}
                 disabledReason={disabledReason}
                 data-attr="date-filter"
                 icon={<IconCalendar />}

frontend/src/lib/constants.tsx

@@ -238,6 +238,7 @@ export const FEATURE_FLAGS = {
     CDP_ACTIVITY_LOG_NOTIFICATIONS: 'cdp-activity-log-notifications', // owner: #team-cdp
     COOKIELESS_SERVER_HASH_MODE_SETTING: 'cookieless-server-hash-mode-setting', // owner: @robbie-c #team-web-analytics
     INSIGHT_COLORS: 'insight-colors', // owner @thmsobrmlr #team-product-analytics
+    SESSION_REPLAY_PANELS_UI: 'session-replay-panels-ui', // owner: @pauldambra #team-replay
 } as const
 export type FeatureFlagKey = (typeof FEATURE_FLAGS)[keyof typeof FEATURE_FLAGS]
 

frontend/src/scenes/notebooks/Nodes/NotebookNodePlaylist.tsx

@@ -2,7 +2,6 @@ import { createPostHogWidgetNode } from 'scenes/notebooks/Nodes/NodeWrapper'
 import { FilterType, NotebookNodeType, RecordingUniversalFilters, ReplayTabs } from '~/types'
 import {
     DEFAULT_RECORDING_FILTERS,
-    SessionRecordingPlaylistLogicProps,
     convertLegacyFiltersToUniversalFilters,
     sessionRecordingsPlaylistLogic,
 } from 'scenes/session-recordings/playlist/sessionRecordingsPlaylistLogic'
@@ -17,6 +16,7 @@ import { sessionRecordingPlayerLogic } from 'scenes/session-recordings/player/se
 import { IconComment } from 'lib/lemon-ui/icons'
 import { sessionRecordingPlayerLogicType } from 'scenes/session-recordings/player/sessionRecordingPlayerLogicType'
 import { RecordingsUniversalFilters } from 'scenes/session-recordings/filters/RecordingsUniversalFilters'
+import { SessionRecordingPlaylistLogicProps } from 'scenes/session-recordings/types'
 
 const Component = ({
     attributes,

frontend/src/scenes/session-recordings/PanelUI.tsx

@@ -0,0 +1,78 @@
+import './SessionReplay.scss'
+
+import clsx from 'clsx'
+import { useValues } from 'kea'
+import { sessionRecordingsPlaylistLogic } from 'scenes/session-recordings/playlist/sessionRecordingsPlaylistLogic'
+
+import { PanelFilters } from './panels/Filters'
+import { PanelOverview } from './panels/Overview'
+import { PanelPlayback } from './panels/Playback'
+import { PanelPlaylist } from './panels/Playlist'
+import { PlayerInspector } from './player/inspector/PlayerInspector'
+
+export function PanelsUI(): JSX.Element {
+    const workspaceConfig = { overview: false, inspector: true }
+
+    const { activeSessionRecordingId } = useValues(sessionRecordingsPlaylistLogic({ updateSearchParams: true }))
+
+    return (
+        <PanelLayout className="SessionReplay__layout">
+            <PanelContainer primary={false} className="PanelLayout__secondary flex-col">
+                <Panel primary={false}>
+                    <PanelFilters />
+                </Panel>
+                <Panel primary className="PanelLayout__playlist overflow-y-auto flex-1 border w-full">
+                    <PanelPlaylist />
+                </Panel>
+            </PanelContainer>
+
+            <PanelContainer primary className="PanelLayout__primary">
+                {workspaceConfig.overview && (
+                    <PanelContainer primary={false} className="w-full">
+                        <Panel primary className="PanelLayout__overview">
+                            <PanelOverview />
+                        </Panel>
+                    </PanelContainer>
+                )}
+                <PanelContainer primary className="w-full PanelLayout__main">
+                    <Panel primary className="PanelLayout__playback">
+                        <PanelPlayback />
+                    </Panel>
+                    {workspaceConfig.inspector && (
+                        <Panel primary={false} className="PanelLayout__inspector flex flex-col">
+                            {/*TODO: this only works because we're not using a playerkey yet*/}
+                            <PlayerInspector sessionRecordingId={activeSessionRecordingId} />
+                        </Panel>
+                    )}
+                </PanelContainer>
+            </PanelContainer>
+        </PanelLayout>
+    )
+}
+
+function PanelLayout(props: Omit<PanelContainerProps, 'primary'>): JSX.Element {
+    return <PanelContainer {...props} primary={false} />
+}
+
+type PanelContainerProps = {
+    children: React.ReactNode
+    primary: boolean
+    className?: string
+}
+
+function PanelContainer({ children, primary, className }: PanelContainerProps): JSX.Element {
+    return <div className={clsx('flex flex-wrap gap-2', primary && 'flex-1', className)}>{children}</div>
+}
+
+function Panel({
+    className,
+    primary,
+    children,
+}: {
+    className?: string
+    primary: boolean
+    collapsed?: boolean
+    children: JSX.Element
+}): JSX.Element {
+    return <div className={clsx(primary && 'flex-1', 'border', className)}>{children}</div>
+}

frontend/src/scenes/session-recordings/SessionRecordings.tsx

@@ -7,6 +7,7 @@ import {
     AuthorizedUrlListType,
     defaultAuthorizedUrlProperties,
 } from 'lib/components/AuthorizedUrlList/authorizedUrlListLogic'
+import { FlaggedFeature } from 'lib/components/FlaggedFeature'
 import { PageHeader } from 'lib/components/PageHeader'
 import { upgradeModalLogic } from 'lib/components/UpgradeModal/upgradeModalLogic'
 import { VersionCheckerBanner } from 'lib/components/VersionChecker/VersionCheckerBanner'
@@ -26,6 +27,7 @@ import { urls } from 'scenes/urls'
 import { sidePanelSettingsLogic } from '~/layout/navigation-3000/sidepanel/panels/sidePanelSettingsLogic'
 import { AvailableFeature, NotebookNodeType, ReplayTabs } from '~/types'
 
+import { PanelsUI } from './PanelUI'
 import { createPlaylist } from './playlist/playlistUtils'
 import { SessionRecordingsPlaylist } from './playlist/SessionRecordingsPlaylist'
 import { SavedSessionRecordingPlaylists } from './saved-playlists/SavedSessionRecordingPlaylists'
@@ -195,9 +197,16 @@ function MainPanel(): JSX.Element {
             {!tab ? (
                 <Spinner />
             ) : tab === ReplayTabs.Home ? (
-                <div className="SessionRecordingPlaylistHeightWrapper">
-                    <SessionRecordingsPlaylist updateSearchParams />
-                </div>
+                <>
+                    <FlaggedFeature flag={FEATURE_FLAGS.SESSION_REPLAY_PANELS_UI} match={true}>
+                        <PanelsUI />
+                    </FlaggedFeature>
+                    <FlaggedFeature flag={FEATURE_FLAGS.SESSION_REPLAY_PANELS_UI} match={false}>
+                        <div className="SessionRecordingPlaylistHeightWrapper">
+                            <SessionRecordingsPlaylist updateSearchParams />
+                        </div>
+                    </FlaggedFeature>
+                </>
             ) : tab === ReplayTabs.Playlists ? (
                 <SavedSessionRecordingPlaylists tab={ReplayTabs.Playlists} />
             ) : tab === ReplayTabs.Templates ? (

frontend/src/scenes/session-recordings/SessionReplay.scss

@@ -0,0 +1,101 @@
+.SessionReplay__layout {
+    --session-recordings-tabs-height: 62px;
+    --session-recordings-panel-height: calc(
+        100vh - var(--breadcrumbs-height-full) - var(--scene-padding) - var(--scene-padding-bottom) -
+            var(--session-recordings-tabs-height)
+    );
+    --panel-gap: 0.5rem;
+    --panel-playlist-min-width: 350px;
+    --panel-filters-min-width: 350px;
+    --panel-playback-min-width: 300px;
+    --panel-inspector-min-width: 200px;
+    --container-primary-min-width: max(var(--panel-playback-min-width), var(--panel-inspector-min-width));
+    --container-secondary-min-width: max(var(--panel-playlist-min-width), var(--panel-filters-min-width));
+    --container-secondary-max-width: 200px;
+
+    height: var(--session-recordings-panel-height);
+    container: replay-panel-layout / inline-size;
+
+    .PanelLayout__primary {
+        container: replay-primary-panels / inline-size;
+        flex: 1 1 0% !important;
+        min-width: var(--container-primary-min-width);
+    }
+
+    .PanelLayout__playlist {
+        flex: 1 1 0% !important;
+        min-width: var(--panel-playlist-min-width);
+    }
+
+    .PanelLayout__playback {
+        flex: 1 1 0% !important;
+        min-width: var(--panel-playback-min-width);
+        min-height: 300px;
+    }
+
+    .PanelLayout__inspector {
+        min-width: var(--panel-inspector-min-width);
+    }
+
+    .UniversalFilterButton {
+        height: 1.75rem;
+        font-size: smaller;
+    }
+
+    .PanelLayout__Panel {
+        &--collapsed {
+            width: 40px;
+            min-width: unset;
+            height: 40px;
+        }
+    }
+
+    // All primary panels horizontally stacked
+    // var(--panel-playback-min-width) + var(--panel-inspector-min-width) + var(--panel-gap) + var(--panel-gap)
+    @container replay-panel-layout (width >= 1040px) {
+        .PanelLayout__inspector {
+            height: 100%;
+            overflow-y: auto;
+        }
+
+        .PanelLayout__primary {
+            flex-direction: column;
+        }
+    }
+
+    // Primary panels vertically stacked
+    // var(--panel-playback-min-width) + var(--panel-inspector-min-width) + var(--panel-gap) + var(--panel-gap)
+    @container replay-panel-layout (width < 1040px) {
+        .PanelLayout__inspector {
+            width: 100%;
+        }
+    }
+
+    // Layout vertically stacked
+    @container replay-panel-layout (width < 508px) {
+        // var(--container-primary-min-width) + var(--container-secondary-min-width) + var(--panel-gap)
+        .PanelLayout__secondary {
+            width: 100%;
+        }
+
+        .PanelLayout__playlist {
+            max-height: 150px;
+        }
+    }
+
+    @container replay-panel-layout (width > 508px) {
+        // var(--container-primary-min-width) + var(--container-secondary-min-width) + var(--panel-gap)
+        .PanelLayout__secondary {
+            min-width: var(--container-secondary-min-width);
+            max-width: var(--container-secondary-max-width);
+            height: 100%;
+        }
+    }
+
+    @container replay-panel-layout (508px < width < 1040px) {
+        .PanelLayout__primary {
+            height: 100%;
+            overflow-y: auto;
+        }
+    }
+}

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

@@ -2,17 +2,13 @@ import { actions, afterMount, connect, kea, key, path, props, reducers, selector
 import { humanFriendlyMilliseconds } from 'lib/utils'
 import { performanceEventDataLogic } from 'scenes/session-recordings/apm/performanceEventDataLogic'
 import { percentagesWithinEventRange } from 'scenes/session-recordings/apm/waterfall/TimingBar'
-import {
-    sessionRecordingDataLogic,
-    SessionRecordingDataLogicProps,
-} from 'scenes/session-recordings/player/sessionRecordingDataLogic'
+import { sessionRecordingDataLogic } from 'scenes/session-recordings/player/sessionRecordingDataLogic'
+import { NetworkViewLogicProps } from 'scenes/session-recordings/types'
 
 import { PerformanceEvent } from '~/types'
 
 import type { networkViewLogicType } from './networkViewLogicType'
 
-export interface NetworkViewLogicProps extends SessionRecordingDataLogicProps {}
-
 export const networkViewLogic = kea<networkViewLogicType>([
     path(['scenes', 'session-recordings', 'apm', 'networkViewLogic']),
     key((props) => `network-view-${props.sessionRecordingId}`),
@@ -21,7 +17,7 @@ export const networkViewLogic = kea<networkViewLogicType>([
         values: [
             sessionRecordingDataLogic(props),
             ['sessionPlayerData', 'sessionPlayerMetaData', 'snapshotsLoading', 'sessionPlayerMetaDataLoading'],
-            performanceEventDataLogic({ key: props.sessionRecordingId, sessionRecordingId: props.sessionRecordingId }),
+            performanceEventDataLogic(props),
             ['allPerformanceEvents', 'sizeBreakdown'],
         ],
         actions: [sessionRecordingDataLogic(props), ['loadSnapshots', 'maybeLoadRecordingMeta']],

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

@@ -5,10 +5,8 @@ import {
     itemSizeInfo,
 } from 'scenes/session-recordings/apm/performance-event-utils'
 import { InspectorListItemBase } from 'scenes/session-recordings/player/inspector/playerInspectorLogic'
-import {
-    sessionRecordingDataLogic,
-    SessionRecordingDataLogicProps,
-} from 'scenes/session-recordings/player/sessionRecordingDataLogic'
+import { sessionRecordingDataLogic } from 'scenes/session-recordings/player/sessionRecordingDataLogic'
+import { PerformanceEventDataLogicProps } from 'scenes/session-recordings/types'
 
 import { FilterableInspectorListItemTypes, PerformanceEvent, RecordingEventType } from '~/types'
 
@@ -19,10 +17,6 @@ export type InspectorListItemPerformance = InspectorListItemBase & {
     data: PerformanceEvent
 }
 
-export interface PerformanceEventDataLogicProps extends SessionRecordingDataLogicProps {
-    key?: string
-}
-
 /** it's pretty quick to sort an already sorted list */
 function sortPerformanceEvents(events: PerformanceEvent[]): PerformanceEvent[] {
     return events.sort((a, b) => (a.timestamp.valueOf() > b.timestamp.valueOf() ? 1 : -1))
@@ -101,7 +95,7 @@ function matchWebVitalsEvents(
 export const performanceEventDataLogic = kea<performanceEventDataLogicType>([
     path(['scenes', 'session-recordings', 'apm', 'performanceEventDataLogic']),
     props({} as PerformanceEventDataLogicProps),
-    key((props: PerformanceEventDataLogicProps) => `${props.key}-${props.sessionRecordingId}`),
+    key((props: PerformanceEventDataLogicProps) => props.sessionRecordingId),
     connect((props: PerformanceEventDataLogicProps) => ({
         actions: [],
         values: [sessionRecordingDataLogic(props), ['sessionPlayerData', 'webVitalsEvents']],

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-xs bg-bg-3000 items-center',
+                'flex flex-row w-full overflow-hidden font-light text-xs bg-bg-3000 items-center overflow-x-auto',
                 className
             )}
         >

frontend/src/scenes/session-recordings/filters/DurationFilter.tsx

@@ -1,4 +1,4 @@
-import { LemonButton } from '@posthog/lemon-ui'
+import { LemonButton, LemonButtonProps } from '@posthog/lemon-ui'
 import { convertSecondsToDuration, DurationPicker } from 'lib/components/DurationPicker/DurationPicker'
 import { OperatorSelect } from 'lib/components/PropertyFilters/components/OperatorValueSelect'
 import { Popover } from 'lib/lemon-ui/Popover/Popover'
@@ -12,6 +12,8 @@ interface Props {
     durationTypeFilter: DurationType
     onChange: (recordingDurationFilter: RecordingDurationFilter, durationType: DurationType) => void
     pageKey: string
+    size?: LemonButtonProps['size']
+    type?: LemonButtonProps['type']
 }
 
 const durationTypeMapping: Record<DurationType, string> = {
@@ -31,7 +33,13 @@ export const humanFriendlyDurationFilter = (
     return `${operator} ${duration.timeValue || 0} ${durationDescription}${unit}`
 }
 
-export function DurationFilter({ recordingDurationFilter, durationTypeFilter, onChange }: Props): JSX.Element {
+export function DurationFilter({
+    recordingDurationFilter,
+    durationTypeFilter,
+    onChange,
+    size,
+    type,
+}: Props): JSX.Element {
     const [isOpen, setIsOpen] = useState(false)
     const durationString = useMemo(
         () => humanFriendlyDurationFilter(recordingDurationFilter, durationTypeFilter),
@@ -69,8 +77,8 @@ export function DurationFilter({ recordingDurationFilter, durationTypeFilter, on
             }
         >
             <LemonButton
-                type="secondary"
-                size="small"
+                type={type ?? 'secondary'}
+                size={size ?? 'small'}
                 onClick={() => {
                     setIsOpen(true)
                 }}