fix(insights): fix display changes for standalone queries

PostHog · Oct 30, 2023 · 52c5684 · 52c5684
1 parent 537f476
commit 52c5684
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 50 deletions.
diff --git a/frontend/src/lib/components/ChartFilter/ChartFilter.tsx b/frontend/src/lib/components/ChartFilter/ChartFilter.tsx
@@ -1,5 +1,4 @@
 import { useActions, useValues } from 'kea'
-import { chartFilterLogic } from './chartFilterLogic'
 import {
     IconShowChart,
     IconCumulativeChart,
@@ -18,8 +17,8 @@ import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
 
 export function ChartFilter(): JSX.Element {
     const { insightProps } = useValues(insightLogic)
-    const { chartFilter } = useValues(chartFilterLogic(insightProps))
-    const { setChartFilter } = useActions(chartFilterLogic(insightProps))
+    const { display } = useValues(insightVizDataLogic(insightProps))
+    const { updateInsightFilter } = useActions(insightVizDataLogic(insightProps))
 
     const { isTrends, isSingleSeries, formula, breakdown } = useValues(insightVizDataLogic(insightProps))
 
@@ -109,9 +108,9 @@ export function ChartFilter(): JSX.Element {
     return (
         <LemonSelect
             key="2"
-            value={chartFilter || ChartDisplayType.ActionsLineGraph}
+            value={display || ChartDisplayType.ActionsLineGraph}
             onChange={(value) => {
-                setChartFilter(value as ChartDisplayType)
+                updateInsightFilter({ display: value })
             }}
             dropdownPlacement="bottom-end"
             optionTooltipPlacement="left"

diff --git a/frontend/src/lib/components/ChartFilter/chartFilterLogic.ts b/frontend/src/lib/components/ChartFilter/chartFilterLogic.ts
diff --git a/frontend/src/queries/utils.ts b/frontend/src/queries/utils.ts
@@ -232,7 +232,7 @@ export function dateRangeFor(node?: Node): DateRange | undefined {
     return undefined
 }
 
-const nodeKindToFilterProperty: Record<InsightNodeKind, InsightFilterProperty> = {
+export const nodeKindToFilterProperty: Record<InsightNodeKind, InsightFilterProperty> = {
     [NodeKind.TrendsQuery]: 'trendsFilter',
     [NodeKind.FunnelsQuery]: 'funnelsFilter',
     [NodeKind.RetentionQuery]: 'retentionFilter',

diff --git a/frontend/src/scenes/insights/insightVizDataLogic.ts b/frontend/src/scenes/insights/insightVizDataLogic.ts
@@ -10,6 +10,7 @@ import {
     InsightVizNode,
     Node,
     NodeKind,
+    TrendsFilter,
     TrendsQuery,
 } from '~/queries/schema'
 
@@ -27,6 +28,7 @@ import {
     isRetentionQuery,
     isStickinessQuery,
     isTrendsQuery,
+    nodeKindToFilterProperty,
 } from '~/queries/utils'
 import { NON_TIME_SERIES_DISPLAY_TYPES, PERCENT_STACK_VIEW_DISPLAY_TYPE } from 'lib/constants'
 import {
@@ -312,12 +314,20 @@ const handleQuerySourceUpdateSideEffects = (
     update: QuerySourceUpdate,
     currentState: InsightQueryNode
 ): QuerySourceUpdate => {
-    const mergedUpdate = { ...update }
+    const mergedUpdate = { ...update } as InsightQueryNode
 
     const maybeChangedSeries = (update as TrendsQuery).series || null
     const maybeChangedActiveUsersMath = maybeChangedSeries ? getActiveUsersMath(maybeChangedSeries) : null
+    const kind = (update as Partial<InsightQueryNode>).kind || currentState.kind
+    const insightFilter = currentState[nodeKindToFilterProperty[currentState.kind]] as Partial<InsightFilter>
+    const maybeChangedInsightFilter = update[nodeKindToFilterProperty[kind]] as Partial<InsightFilter>
+
     const interval = (currentState as TrendsQuery).interval
 
+    /*
+     * Series change side effects.
+     */
+
     // If the user just flipped an event action to use WAUs/MAUs math and their
     // current interval is unsupported by the math type, switch their interval
     // to an appropriate allowed interval and inform them of the change via a toast
@@ -335,6 +345,9 @@ const handleQuerySourceUpdateSideEffects = (
         }
     }
 
+    /*
+     * Date range change side effects.
+     */
     if (
         update.dateRange &&
         update.dateRange.date_from &&
@@ -369,5 +382,26 @@ const handleQuerySourceUpdateSideEffects = (
         }
     }
 
+    /*
+     * Display change side effects.
+     */
+    const display = (insightFilter as Partial<TrendsFilter>)?.display || ChartDisplayType.ActionsLineGraph
+    const maybeChangedDisplay =
+        (maybeChangedInsightFilter as Partial<TrendsFilter>)?.display || ChartDisplayType.ActionsLineGraph
+
+    // For the map, make sure we are breaking down by country
+    if (
+        kind === NodeKind.TrendsQuery &&
+        display !== maybeChangedDisplay &&
+        maybeChangedDisplay === ChartDisplayType.WorldMap
+    ) {
+        const math = (maybeChangedSeries || (currentState as TrendsQuery).series)?.[0].math
+
+        mergedUpdate['breakdown'] = {
+            breakdown: '$geoip_country_code',
+            breakdown_type: ['dau', 'weekly_active', 'monthly_active'].includes(math || '') ? 'person' : 'event',
+        }
+    }
+
     return mergedUpdate
 }