feat: change poe on an insight (PostHog#27987)

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

frontend/src/queries/nodes/InsightViz/EditorFilters.tsx

@@ -16,6 +16,7 @@ import { PathsExclusions } from 'scenes/insights/EditorFilters/PathsExclusions'
 import { PathsHogQL } from 'scenes/insights/EditorFilters/PathsHogQL'
 import { PathsTargetEnd, PathsTargetStart } from 'scenes/insights/EditorFilters/PathsTarget'
 import { PathsWildcardGroups } from 'scenes/insights/EditorFilters/PathsWildcardGroups'
+import { PoeFilter } from 'scenes/insights/EditorFilters/PoeFilter'
 import { RetentionSummary } from 'scenes/insights/EditorFilters/RetentionSummary'
 import { SamplingFilter } from 'scenes/insights/EditorFilters/SamplingFilter'
 import { insightLogic } from 'scenes/insights/insightLogic'
@@ -299,6 +300,16 @@ export function EditorFilters({ query, showing, embedded }: EditorFiltersProps):
                 },
             ]),
         },
+        {
+            title: 'PoE Override',
+            editorFilters: filterFalsy([
+                {
+                    key: 'poe',
+                    position: 'right',
+                    component: PoeFilter,
+                },
+            ]),
+        },
         {
             title: 'Sampling',
             editorFilters: filterFalsy([

frontend/src/scenes/insights/EditorFilters/PoeFilter.tsx

@@ -0,0 +1,39 @@
+import { LemonLabel, LemonSwitch } from '@posthog/lemon-ui'
+import { useActions, useValues } from 'kea'
+
+import { InsightLogicProps } from '~/types'
+
+import { poeFilterLogic } from './poeFilterLogic'
+
+interface PoeFilterProps {
+    insightProps: InsightLogicProps
+}
+
+export function PoeFilter({ insightProps }: PoeFilterProps): JSX.Element {
+    const { poeMode } = useValues(poeFilterLogic(insightProps))
+    const { setPoeMode } = useActions(poeFilterLogic(insightProps))
+
+    return (
+        <>
+            <div className="flex items-center gap-1">
+                <LemonLabel
+                    info="Overides the default person properties mode for this insight to use person properties from query time instead of from the time of the event. This can be useful for specific queries that require person data that comes in after the event in question, but it slows down performance considerably, so use it with care."
+                    infoLink="https://posthog.com/docs/how-posthog-works/queries#filtering-on-person-properties"
+                >
+                    Use person properties from query time
+                </LemonLabel>
+                <LemonSwitch
+                    className="m-2"
+                    onChange={(checked) => {
+                        if (checked) {
+                            setPoeMode('person_id_override_properties_joined')
+                        } else {
+                            setPoeMode(null)
+                        }
+                    }}
+                    checked={!!poeMode}
+                />
+            </div>
+        </>
+    )
+}

frontend/src/scenes/insights/EditorFilters/poeFilterLogic.ts

@@ -0,0 +1,49 @@
+import { actions, connect, kea, key, listeners, path, props, reducers } from 'kea'
+import { subscriptions } from 'kea-subscriptions'
+import { keyForInsightLogicProps } from 'scenes/insights/sharedUtils'
+
+import { HogQLQueryModifiers } from '~/queries/schema'
+import { InsightLogicProps } from '~/types'
+
+import { insightVizDataLogic } from '../insightVizDataLogic'
+import type { poeFilterLogicType } from './poeFilterLogicType'
+
+export type PoeModeTypes = HogQLQueryModifiers['personsOnEventsMode'] | null
+
+export const poeFilterLogic = kea<poeFilterLogicType>([
+    props({} as InsightLogicProps),
+    key(keyForInsightLogicProps('new')),
+    path((key) => ['scenes', 'insights', 'EditorFilters', 'poeFilterLogic', key]),
+    connect((props: InsightLogicProps) => ({
+        values: [insightVizDataLogic(props), ['querySource']],
+        actions: [insightVizDataLogic(props), ['updateQuerySource']],
+    })),
+    actions(() => ({
+        setPoeMode: (poeMode: PoeModeTypes) => ({ poeMode }),
+    })),
+    reducers({
+        poeMode: [
+            null as PoeModeTypes,
+            {
+                setPoeMode: (_, { poeMode }) => poeMode || null,
+            },
+        ],
+    }),
+    listeners(({ actions, values }) => ({
+        setPoeMode: () => {
+            actions.updateQuerySource({
+                modifiers: {
+                    personsOnEventsMode: values.poeMode || undefined,
+                },
+            })
+        },
+    })),
+    subscriptions(({ values, actions }) => ({
+        querySource: (querySource) => {
+            const newPoeMode = querySource?.modifiers?.personsOnEventsMode
+            if ((!!newPoeMode || !!values.poeMode) && newPoeMode != values.poeMode) {
+                actions.setPoeMode(newPoeMode)
+            }
+        },
+    })),
+])