fix(insights): fix date range changes for standalone queries (#18257)

PostHog · Nov 6, 2023 · 91cadb8 · 91cadb8
1 parent 01af460
commit 91cadb8
Show file tree

Hide file tree

Showing 7 changed files with 245 additions and 209 deletions.
diff --git a/frontend/src/lib/components/IntervalFilter/IntervalFilter.tsx b/frontend/src/lib/components/IntervalFilter/IntervalFilter.tsx
@@ -1,17 +1,17 @@
-import { intervalFilterLogic } from './intervalFilterLogic'
 import { useActions, useValues } from 'kea'
-import { IntervalType } from '~/types'
 import { insightLogic } from 'scenes/insights/insightLogic'
 import { LemonSelect } from '@posthog/lemon-ui'
+import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
+import { InsightQueryNode } from '~/queries/schema'
 
 interface IntervalFilterProps {
     disabled?: boolean
 }
 
 export function IntervalFilter({ disabled }: IntervalFilterProps): JSX.Element {
     const { insightProps } = useValues(insightLogic)
-    const { interval, enabledIntervals } = useValues(intervalFilterLogic(insightProps))
-    const { setInterval } = useActions(intervalFilterLogic(insightProps))
+    const { interval, enabledIntervals } = useValues(insightVizDataLogic(insightProps))
+    const { updateQuerySource } = useActions(insightVizDataLogic(insightProps))
 
     return (
         <>
@@ -24,9 +24,7 @@ export function IntervalFilter({ disabled }: IntervalFilterProps): JSX.Element {
                 value={interval || 'day'}
                 dropdownMatchSelectWidth={false}
                 onChange={(value) => {
-                    if (value) {
-                        setInterval(String(value) as IntervalType)
-                    }
+                    updateQuerySource({ interval: value } as Partial<InsightQueryNode>)
                 }}
                 data-attr="interval-filter"
                 options={Object.entries(enabledIntervals).map(([value, { label, disabledReason }]) => ({

diff --git a/frontend/src/lib/components/IntervalFilter/intervalFilterLogic.ts b/frontend/src/lib/components/IntervalFilter/intervalFilterLogic.ts
diff --git a/frontend/src/scenes/insights/filters/InsightDateFilter/InsightDateFilter.tsx b/frontend/src/scenes/insights/filters/InsightDateFilter/InsightDateFilter.tsx
@@ -1,28 +1,26 @@
 import { useValues, useActions } from 'kea'
-import { insightDateFilterLogic } from './insightDateFilterLogic'
 import { DateFilter } from 'lib/components/DateFilter/DateFilter'
 import { insightLogic } from 'scenes/insights/insightLogic'
 import { CalendarOutlined, InfoCircleOutlined } from '@ant-design/icons'
 import { Tooltip } from 'antd'
+import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
 
 type InsightDateFilterProps = {
     disabled: boolean
 }
 
 export function InsightDateFilter({ disabled }: InsightDateFilterProps): JSX.Element {
     const { insightProps } = useValues(insightLogic)
-    const {
-        dates: { dateFrom, dateTo },
-    } = useValues(insightDateFilterLogic(insightProps))
-    const { setDates } = useActions(insightDateFilterLogic(insightProps))
+    const { dateRange } = useValues(insightVizDataLogic(insightProps))
+    const { updateDateRange } = useActions(insightVizDataLogic(insightProps))
 
     return (
         <DateFilter
-            dateTo={dateTo ?? undefined}
-            dateFrom={dateFrom ?? '-7d' ?? undefined}
+            dateTo={dateRange?.date_to ?? undefined}
+            dateFrom={dateRange?.date_from ?? '-7d' ?? undefined}
             disabled={disabled}
-            onChange={(changedDateFrom, changedDateTo) => {
-                setDates(changedDateFrom, changedDateTo)
+            onChange={(date_from, date_to) => {
+                updateDateRange({ date_from, date_to })
             }}
             makeLabel={(key) => (
                 <>

diff --git a/frontend/src/scenes/insights/filters/InsightDateFilter/insightDateFilterLogic.ts b/frontend/src/scenes/insights/filters/InsightDateFilter/insightDateFilterLogic.ts
diff --git a/frontend/src/scenes/insights/insightCommandLogic.ts b/frontend/src/scenes/insights/insightCommandLogic.ts
@@ -6,7 +6,7 @@ import { RiseOutlined } from '@ant-design/icons'
 import { dateMapping } from 'lib/utils'
 import { InsightLogicProps } from '~/types'
 import { keyForInsightLogicProps } from 'scenes/insights/sharedUtils'
-import { insightDateFilterLogic } from 'scenes/insights/filters/InsightDateFilter/insightDateFilterLogic'
+import { insightVizDataLogic } from './insightVizDataLogic'
 
 const INSIGHT_COMMAND_SCOPE = 'insights'
 
@@ -15,11 +15,7 @@ export const insightCommandLogic = kea<insightCommandLogicType>([
     key(keyForInsightLogicProps('new')),
     path((key) => ['scenes', 'insights', 'insightCommandLogic', key]),
 
-    connect((props: InsightLogicProps) => [
-        commandPaletteLogic,
-        compareFilterLogic(props),
-        insightDateFilterLogic(props),
-    ]),
+    connect((props: InsightLogicProps) => [commandPaletteLogic, compareFilterLogic(props), insightVizDataLogic(props)]),
     events(({ props }) => ({
         afterMount: () => {
             const funnelCommands: Command[] = [
@@ -37,7 +33,10 @@ export const insightCommandLogic = kea<insightCommandLogicType>([
                             icon: RiseOutlined,
                             display: `Set Time Range to ${key}`,
                             executor: () => {
-                                insightDateFilterLogic(props).actions.setDates(values[0], values[1])
+                                insightVizDataLogic(props).actions.updateDateRange({
+                                    date_from: values[0],
+                                    date_to: values[1],
+                                })
                             },
                         })),
                     ],