random sample toggle

PostHog · Sep 5, 2024 · 3b363aa · 3b363aa
1 parent 6965f88
commit 3b363aa
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 6 deletions.
diff --git a/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylistSettings.tsx b/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylistSettings.tsx
@@ -7,8 +7,8 @@ import { sessionRecordingsPlaylistLogic } from './sessionRecordingsPlaylistLogic
 export function SessionRecordingsPlaylistSettings(): JSX.Element {
     const { hideViewedRecordings } = useValues(playerSettingsLogic)
     const { setHideViewedRecordings } = useActions(playerSettingsLogic)
-    const { orderBy } = useValues(sessionRecordingsPlaylistLogic)
-    const { setOrderBy } = useActions(sessionRecordingsPlaylistLogic)
+    const { orderBy, randomSample } = useValues(sessionRecordingsPlaylistLogic)
+    const { setOrderBy, setRandomSample } = useActions(sessionRecordingsPlaylistLogic)
 
     return (
         <div className="relative flex flex-col gap-2 p-3 border-b">
@@ -20,6 +20,15 @@ export function SessionRecordingsPlaylistSettings(): JSX.Element {
                     onChange={() => setHideViewedRecordings(!hideViewedRecordings)}
                 />
             </div>
+            <div className="flex flex-row items-center justify-between space-x-2">
+                <span className="text-black font-medium">Random sample</span>
+                <LemonSwitch
+                    aria-label="Random sample"
+                    checked={randomSample}
+                    onChange={() => setRandomSample(!randomSample)}
+                    tooltip="Chooses a random sample of recordings matching the filters"
+                />
+            </div>
             <div className="flex flex-row items-center justify-between space-x-2">
                 <span className="text-black font-medium">Order by</span>
                 <LemonSelect

diff --git a/frontend/src/scenes/session-recordings/playlist/sessionRecordingsPlaylistLogic.ts b/frontend/src/scenes/session-recordings/playlist/sessionRecordingsPlaylistLogic.ts
@@ -296,7 +296,8 @@ export const sessionRecordingsPlaylistLogic = kea<sessionRecordingsPlaylistLogic
         setFilters: (filters: Partial<RecordingUniversalFilters>) => ({ filters }),
         setShowFilters: (showFilters: boolean) => ({ showFilters }),
         setShowSettings: (showSettings: boolean) => ({ showSettings }),
-        setOrderBy: (orderBy: RecordingsQuery['order']) => ({ orderBy }),
+        setOrderBy: (orderBy: Omit<RecordingsQuery['order'], 'random_sample'>) => ({ orderBy }),
+        setRandomSample: (sample: boolean) => ({ sample }),
         resetFilters: true,
         setSelectedRecordingId: (id: SessionRecordingType['id'] | null) => ({
             id,
@@ -359,7 +360,7 @@ export const sessionRecordingsPlaylistLogic = kea<sessionRecordingsPlaylistLogic
                     const params: RecordingsQuery = {
                         ...convertUniversalFiltersToRecordingsQuery(values.filters),
                         person_uuid: props.personUUID ?? '',
-                        order: values.orderBy,
+                        order: values.queryOrder,
                         limit: RECORDINGS_LIMIT,
                     }
 
@@ -387,7 +388,7 @@ export const sessionRecordingsPlaylistLogic = kea<sessionRecordingsPlaylistLogic
                                 ? values.sessionRecordingsResponse?.has_next ?? true
                                 : response.has_next,
                         results: response.results,
-                        order: values.orderBy,
+                        order: values.queryOrder,
                     }
                 },
             },
@@ -425,12 +426,19 @@ export const sessionRecordingsPlaylistLogic = kea<sessionRecordingsPlaylistLogic
     })),
     reducers(({ props }) => ({
         orderBy: [
-            'start_time' as RecordingsQuery['order'],
+            'start_time' as Omit<RecordingsQuery['order'], 'random_sample'>,
             { persist: true },
             {
                 setOrderBy: (_, { orderBy }) => orderBy,
             },
         ],
+        randomSample: [
+            false as boolean,
+            { persist: true },
+            {
+                setRandomSample: (_, { sample }) => sample,
+            },
+        ],
         sessionBeingSummarized: [
             null as null | SessionRecordingType['id'],
             {
@@ -566,6 +574,10 @@ export const sessionRecordingsPlaylistLogic = kea<sessionRecordingsPlaylistLogic
             actions.loadEventsHaveSessionId()
         },
 
+        setRandomSample: () => {
+            actions.loadSessionRecordings()
+        },
+
         setOrderBy: () => {
             actions.loadSessionRecordings()
         },
@@ -723,6 +735,13 @@ export const sessionRecordingsPlaylistLogic = kea<sessionRecordingsPlaylistLogic
             },
         ],
 
+        queryOrder: [
+            (s) => [s.orderBy, s.randomSample],
+            (orderBy, randomSample): RecordingsQuery['order'] => {
+                return randomSample ? 'random_sample' : orderBy
+            },
+        ],
+
         recordingsCount: [
             (s) => [s.pinnedRecordings, s.otherRecordings, s.showOtherRecordings],
             (pinnedRecordings, otherRecordings, showOtherRecordings): number => {