From df11cf6c680c5401114a744dbb680de534f7a75c Mon Sep 17 00:00:00 2001
From: Michael Matloka <dev@twixes.com>
Date: Tue, 8 Nov 2022 16:36:01 +0100
Subject: [PATCH] fix(trends): Show appropriate nested math value immediately
 (#12679)

---
 .../ActionFilterRow/ActionFilterRow.tsx       | 36 +++++++++++--------
 1 file changed, 21 insertions(+), 15 deletions(-)

diff --git a/frontend/src/scenes/insights/filters/ActionFilter/ActionFilterRow/ActionFilterRow.tsx b/frontend/src/scenes/insights/filters/ActionFilter/ActionFilterRow/ActionFilterRow.tsx
index af084c26f60..328bfac184d 100644
--- a/frontend/src/scenes/insights/filters/ActionFilter/ActionFilterRow/ActionFilterRow.tsx
+++ b/frontend/src/scenes/insights/filters/ActionFilter/ActionFilterRow/ActionFilterRow.tsx
@@ -414,18 +414,29 @@ interface MathSelectorProps {
     style?: React.CSSProperties
 }
 
-function useMathSelectorOptions(
-    index: number,
-    mathAvailability: MathAvailability,
-    onMathSelect: (index: number, value: any) => any
-): LemonSelectOptions<string> {
+function isPropertyValueMath(math: string | undefined): math is PropertyMathType {
+    return !!math && math in PROPERTY_MATH_DEFINITIONS
+}
+
+function isCountPerActorMath(math: string | undefined): math is CountPerActorMathType {
+    return !!math && math in COUNT_PER_ACTOR_MATH_DEFINITIONS
+}
+
+function useMathSelectorOptions({
+    math,
+    index,
+    mathAvailability,
+    onMathSelect,
+}: MathSelectorProps): LemonSelectOptions<string> {
     const { needsUpgradeForGroups, canStartUsingGroups, staticMathDefinitions, staticActorsOnlyMathDefinitions } =
         useValues(mathsLogic)
     const { featureFlags } = useValues(featureFlagLogic)
 
-    const [propertyMathTypeShown, setPropertyMathTypeShown] = useState<PropertyMathType>(PropertyMathType.Average)
+    const [propertyMathTypeShown, setPropertyMathTypeShown] = useState<PropertyMathType>(
+        isPropertyValueMath(math) ? math : PropertyMathType.Average
+    )
     const [countPerActorMathTypeShown, setCountPerActorMathTypeShown] = useState<CountPerActorMathType>(
-        CountPerActorMathType.Average
+        isCountPerActorMath(math) ? math : CountPerActorMathType.Average
     )
 
     const options: LemonSelectOption<string>[] = Object.entries(
@@ -508,14 +519,9 @@ function useMathSelectorOptions(
     ]
 }
 
-function MathSelector({
-    math,
-    mathGroupTypeIndex,
-    mathAvailability,
-    index,
-    onMathSelect,
-}: MathSelectorProps): JSX.Element {
-    const options = useMathSelectorOptions(index, mathAvailability, onMathSelect)
+function MathSelector(props: MathSelectorProps): JSX.Element {
+    const options = useMathSelectorOptions(props)
+    const { math, mathGroupTypeIndex, index, onMathSelect } = props
 
     const mathType = apiValueToMathType(math, mathGroupTypeIndex)