replace intervalFilterLogic with insightVizDataLogic

PostHog · Oct 29, 2023 · bb3f9ff · bb3f9ff
1 parent eed58c7
commit bb3f9ff
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 60 deletions.
diff --git a/frontend/src/lib/components/IntervalFilter/IntervalFilter.tsx b/frontend/src/lib/components/IntervalFilter/IntervalFilter.tsx
@@ -3,15 +3,17 @@ 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 +26,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/insightVizDataLogic.ts b/frontend/src/scenes/insights/insightVizDataLogic.ts
@@ -41,6 +41,7 @@ import {
     getShowValueOnSeries,
 } from '~/queries/nodes/InsightViz/utils'
 import { DISPLAY_TYPES_WITHOUT_LEGEND } from 'lib/components/InsightLegend/utils'
+import { intervals } from 'lib/components/IntervalFilter/intervals'
 import { insightDataLogic, queryFromKind } from 'scenes/insights/insightDataLogic'
 
 import { sceneLogic } from 'scenes/sceneLogic'
@@ -195,6 +196,33 @@ export const insightVizDataLogic = kea<insightVizDataLogicType>([
             (series): BaseMathType.MonthlyActiveUsers | BaseMathType.WeeklyActiveUsers | null =>
                 getActiveUsersMath(series),
         ],
+        enabledIntervals: [
+            (s) => [s.activeUsersMath],
+            (activeUsersMath) => {
+                console.debug('enabledIntervals', activeUsersMath)
+                const enabledIntervals: Intervals = { ...intervals }
+
+                if (activeUsersMath) {
+                    // Disallow grouping by hour for WAUs/MAUs as it's an expensive query that produces a view that's not useful for users
+                    enabledIntervals.hour = {
+                        ...enabledIntervals.hour,
+                        disabledReason:
+                            'Grouping by hour is not supported on insights with weekly or monthly active users series.',
+                    }
+
+                    // Disallow grouping by month for WAUs as the resulting view is misleading to users
+                    if (activeUsersMath === BaseMathType.WeeklyActiveUsers) {
+                        enabledIntervals.month = {
+                            ...enabledIntervals.month,
+                            disabledReason:
+                                'Grouping by month is not supported on insights with weekly active users series.',
+                        }
+                    }
+                }
+
+                return enabledIntervals
+            },
+        ],
 
         erroredQueryId: [
             (s) => [s.insightDataError],