move resultCustomizations from query root to trendsFilter

frontend/src/queries/nodes/InsightViz/resultCustomizationsModalLogic.ts

@@ -9,6 +9,7 @@ import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
 import { keyForInsightLogicProps } from 'scenes/insights/sharedUtils'
 import {
     getFunnelDatasetKey,
+    getFunnelResultCustomizationColorToken,
     getTrendResultCustomizationColorToken,
     getTrendResultCustomizationKey,
 } from 'scenes/insights/utils'
@@ -38,7 +39,7 @@ export const resultCustomizationsModalLogic = kea<resultCustomizationsModalLogic
             featureFlagLogic,
             ['featureFlags'],
         ],
-        actions: [trendsDataLogic(props), ['updateResultCustomization'], insightVizDataLogic, ['updateInsightFilter']],
+        actions: [insightVizDataLogic, ['updateInsightFilter']],
     })),
 
     actions({
@@ -78,30 +79,65 @@ export const resultCustomizationsModalLogic = kea<resultCustomizationsModalLogic
             (localColorToken, colorTokenFromQuery): DataColorToken | null => localColorToken || colorTokenFromQuery,
         ],
         colorTokenFromQuery: [
-            (s) => [s.resultCustomizationBy, s.resultCustomizations, s.getTheme, s.dataset],
-            (resultCustomizationBy, resultCustomizations, getTheme, dataset): DataColorToken | null => {
+            (s) => [
+                s.isTrends,
+                s.isFunnels,
+                s.resultCustomizationBy,
+                s.trendsResultCustomizations,
+                s.funnelsResultCustomizations,
+                s.getTheme,
+                s.dataset,
+            ],
+            (
+                isTrends,
+                isFunnels,
+                resultCustomizationBy,
+                trendsResultCustomizations,
+                funnelsResultCustomizations,
+                getTheme,
+                dataset
+            ): DataColorToken | null => {
                 if (!dataset) {
                     return null
                 }
 
                 const theme = getTheme('posthog')
-                return getTrendResultCustomizationColorToken(
-                    resultCustomizationBy,
-                    resultCustomizations,
-                    theme,
-                    dataset
-                )
+
+                if (isTrends) {
+                    return getTrendResultCustomizationColorToken(
+                        resultCustomizationBy,
+                        trendsResultCustomizations,
+                        theme,
+                        dataset
+                    )
+                } else if (isFunnels) {
+                    return getFunnelResultCustomizationColorToken(funnelsResultCustomizations, theme, dataset)
+                }
+
+                return null
             },
         ],
         resultCustomizationBy: [
             (s) => [s.resultCustomizationByRaw],
             (resultCustomizationByRaw) => resultCustomizationByRaw || RESULT_CUSTOMIZATION_DEFAULT,
         ],
+        resultCustomizations: [
+            (s) => [s.isTrends, s.isFunnels, s.trendsResultCustomizations, s.funnelsResultCustomizations],
+            (isTrends, isFunnels, trendsResultCustomizations, funnelsResultCustomizations) => {
+                if (isTrends) {
+                    return trendsResultCustomizations
+                } else if (isFunnels) {
+                    return funnelsResultCustomizations
+                }
+
+                return null
+            },
+        ],
     }),
 
     listeners(({ actions, values }) => ({
         save: () => {
-            if (values.localColorToken == null) {
+            if (values.localColorToken == null || values.dataset == null) {
                 actions.closeModal()
                 return
             }
@@ -111,17 +147,22 @@ export const resultCustomizationsModalLogic = kea<resultCustomizationsModalLogic
                     values.resultCustomizationBy,
                     values.dataset as IndexedTrendResult
                 )
-                actions.updateResultCustomization(resultCustomizationKey, {
-                    assignmentBy: values.resultCustomizationBy,
-                    color: values.localColorToken,
+                actions.updateInsightFilter({
+                    resultCustomizations: {
+                        ...values.trendsResultCustomizations,
+                        [resultCustomizationKey]: {
+                            assignmentBy: values.resultCustomizationBy,
+                            color: values.localColorToken,
+                        },
+                    },
                 })
             }
 
             if (values.isFunnels) {
-                const resultCustomizationKey = getFunnelDatasetKey(values.dataset)
+                const resultCustomizationKey = getFunnelDatasetKey(values.dataset as FlattenedFunnelStepByBreakdown)
                 actions.updateInsightFilter({
                     resultCustomizations: {
-                        ...values.insightFilter?.resultCustomizations,
+                        ...values.funnelsResultCustomizations,
                         [resultCustomizationKey]: {
                             assignmentBy: ResultCustomizationBy.Value,
                             color: values.localColorToken,

frontend/src/queries/schema.json

@@ -6896,7 +6896,7 @@
                     "additionalProperties": {
                         "$ref": "#/definitions/ResultCustomizationByValue"
                     },
-                    "description": "Display configuration for the result datasets.",
+                    "description": "Customizations for the appearance of result datasets.",
                     "type": "object"
                 },
                 "useUdf": {
@@ -12715,7 +12715,29 @@
                     "type": "array"
                 },
                 "resultCustomizationBy": {
-                    "$ref": "#/definitions/ResultCustomizationBy"
+                    "$ref": "#/definitions/ResultCustomizationBy",
+                    "default": "value",
+                    "description": "Wether result datasets are associated by their values or by their order."
+                },
+                "resultCustomizations": {
+                    "anyOf": [
+                        {
+                            "additionalProperties": {
+                                "$ref": "#/definitions/ResultCustomizationByValue"
+                            },
+                            "type": "object"
+                        },
+                        {
+                            "additionalProperties": {
+                                "$ref": "#/definitions/ResultCustomizationByPosition"
+                            },
+                            "propertyNames": {
+                                "type": "string"
+                            },
+                            "type": "object"
+                        }
+                    ],
+                    "description": "Customizations for the appearance of result datasets."
                 },
                 "showAlertThresholdLines": {
                     "default": false,
@@ -12871,26 +12893,6 @@
                 "response": {
                     "$ref": "#/definitions/TrendsQueryResponse"
                 },
-                "resultCustomizations": {
-                    "anyOf": [
-                        {
-                            "additionalProperties": {
-                                "$ref": "#/definitions/ResultCustomizationByValue"
-                            },
-                            "type": "object"
-                        },
-                        {
-                            "additionalProperties": {
-                                "$ref": "#/definitions/ResultCustomizationByPosition"
-                            },
-                            "propertyNames": {
-                                "type": "string"
-                            },
-                            "type": "object"
-                        }
-                    ],
-                    "description": "Display configuration for the result datasets."
-                },
                 "samplingFactor": {
                     "description": "Sampling rate",
                     "type": ["number", "null"]

frontend/src/queries/schema.ts

@@ -872,7 +872,15 @@ export type TrendsFilter = {
     showPercentStackView?: TrendsFilterLegacy['show_percent_stack_view']
     yAxisScaleType?: TrendsFilterLegacy['y_axis_scale_type']
     hiddenLegendIndexes?: integer[]
+    /**
+     * Wether result datasets are associated by their values or by their order.
+     * @default value
+     **/
     resultCustomizationBy?: ResultCustomizationBy
+    /** Customizations for the appearance of result datasets. */
+    resultCustomizations?:
+        | Record<string, ResultCustomizationByValue>
+        | Record<numerical_key, ResultCustomizationByPosition>
 }
 
 export const TRENDS_FILTER_PROPERTIES = new Set<keyof TrendsFilter>([
@@ -929,10 +937,6 @@ export interface TrendsQuery extends InsightsQueryBase<TrendsQueryResponse> {
     breakdownFilter?: BreakdownFilter
     /** Compare to date range */
     compareFilter?: CompareFilter
-    /** Display configuration for the result datasets. */
-    resultCustomizations?:
-        | Record<string, ResultCustomizationByValue>
-        | Record<numerical_key, ResultCustomizationByPosition>
 }
 
 export type AssistantArrayPropertyFilterOperator = PropertyOperator.Exact | PropertyOperator.IsNot
@@ -1409,8 +1413,7 @@ export type FunnelsFilter = {
     /** @default total */
     funnelStepReference?: FunnelsFilterLegacy['funnel_step_reference']
     useUdf?: boolean
-
-    /** Display configuration for the result datasets. */
+    /** Customizations for the appearance of result datasets. */
     resultCustomizations?: Record<string, ResultCustomizationByValue>
 }
 

frontend/src/scenes/insights/insightVizDataLogic.ts

@@ -32,10 +32,6 @@ import {
     InsightQueryNode,
     Node,
     NodeKind,
-    numerical_key,
-    ResultCustomization,
-    ResultCustomizationByPosition,
-    ResultCustomizationByValue,
     TrendsFilter,
     TrendsQuery,
 } from '~/queries/schema'
@@ -104,7 +100,6 @@ export const insightVizDataLogic = kea<insightVizDataLogicType>([
         updateCompareFilter: (compareFilter: CompareFilter) => ({ compareFilter }),
         updateDisplay: (display: ChartDisplayType | undefined) => ({ display }),
         updateHiddenLegendIndexes: (hiddenLegendIndexes: number[] | undefined) => ({ hiddenLegendIndexes }),
-        updateResultCustomization: (key: number | string, config: ResultCustomization) => ({ key, config }),
         setTimedOutQueryId: (id: string | null) => ({ id }),
     }),
 
@@ -458,16 +453,6 @@ export const insightVizDataLogic = kea<insightVizDataLogicType>([
             actions.updateInsightFilter({ hiddenLegendIndexes })
         },
 
-        // legend entries
-        updateResultCustomization: ({ key, config }) => {
-            const update: Partial<TrendsQuery> = {
-                resultCustomizations: { ...values.resultCustomizations, [key]: config } as
-                    | Record<string, ResultCustomizationByValue>
-                    | Record<numerical_key, ResultCustomizationByPosition>,
-            }
-            actions.updateQuerySource(update)
-        },
-
         // data loading side effects i.e. diplaying loading screens for queries with longer duration
         loadData: async ({ queryId }, breakpoint) => {
             actions.setTimedOutQueryId(null)

frontend/src/scenes/insights/views/LineGraph/LineGraph.tsx

@@ -38,6 +38,7 @@ import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
 import { getTrendResultCustomizationColorToken } from 'scenes/insights/utils'
 import { PieChart } from 'scenes/insights/views/LineGraph/PieChart'
 import { createTooltipData } from 'scenes/insights/views/LineGraph/tooltip-data'
+import { trendsDataLogic } from 'scenes/trends/trendsDataLogic'
 
 import { ErrorBoundary } from '~/layout/ErrorBoundary'
 import { themeLogic } from '~/layout/navigation-3000/themeLogic'
@@ -290,9 +291,8 @@ export function LineGraph_({
     const { getTheme } = useValues(dataThemeLogic)
 
     const { insightProps, insight } = useValues(insightLogic)
-    const { timezone, isTrends, breakdownFilter, resultCustomizations, resultCustomizationBy } = useValues(
-        insightVizDataLogic(insightProps)
-    )
+    const { timezone, isTrends, breakdownFilter } = useValues(insightVizDataLogic(insightProps))
+    const { resultCustomizations, resultCustomizationBy } = useValues(trendsDataLogic(insightProps))
 
     const canvasRef = useRef<HTMLCanvasElement | null>(null)
     const [myLineChart, setMyLineChart] = useState<Chart<ChartType, any, string>>()

frontend/src/scenes/trends/trendsDataLogic.ts

@@ -73,13 +73,7 @@ export const trendsDataLogic = kea<trendsDataLogicType>([
         ],
         actions: [
             insightVizDataLogic(props),
-            [
-                'setInsightData',
-                'updateInsightFilter',
-                'updateBreakdownFilter',
-                'updateHiddenLegendIndexes',
-                'updateResultCustomization',
-            ],
+            ['setInsightData', 'updateInsightFilter', 'updateBreakdownFilter', 'updateHiddenLegendIndexes'],
         ],
     })),
 
@@ -253,6 +247,7 @@ export const trendsDataLogic = kea<trendsDataLogicType>([
                 return trendsFilter?.hiddenLegendIndexes || stickinessFilter?.hiddenLegendIndexes || []
             },
         ],
+        resultCustomizations: [(s) => [s.trendsFilter], (trendsFilter) => trendsFilter?.resultCustomizations],
     })),
 
     listeners(({ actions, values }) => ({

posthog/schema.py

@@ -1648,7 +1648,13 @@ class TrendsFilter(BaseModel):
     display: Optional[ChartDisplayType] = ChartDisplayType.ACTIONS_LINE_GRAPH
     formula: Optional[str] = None
     hiddenLegendIndexes: Optional[list[int]] = None
-    resultCustomizationBy: Optional[ResultCustomizationBy] = None
+    resultCustomizationBy: Optional[ResultCustomizationBy] = Field(
+        default=ResultCustomizationBy.VALUE,
+        description="Wether result datasets are associated by their values or by their order.",
+    )
+    resultCustomizations: Optional[
+        Union[dict[str, ResultCustomizationByValue], dict[str, ResultCustomizationByPosition]]
+    ] = Field(default=None, description="Customizations for the appearance of result datasets.")
     showAlertThresholdLines: Optional[bool] = False
     showLabelsOnSeries: Optional[bool] = None
     showLegend: Optional[bool] = False
@@ -5872,7 +5878,7 @@ class FunnelsFilter(BaseModel):
     hiddenLegendBreakdowns: Optional[list[str]] = None
     layout: Optional[FunnelLayout] = FunnelLayout.VERTICAL
     resultCustomizations: Optional[dict[str, ResultCustomizationByValue]] = Field(
-        default=None, description="Display configuration for the result datasets."
+        default=None, description="Customizations for the appearance of result datasets."
     )
     useUdf: Optional[bool] = None
 
@@ -6090,9 +6096,6 @@ class TrendsQuery(BaseModel):
         ]
     ] = Field(default=[], description="Property filters for all series")
     response: Optional[TrendsQueryResponse] = None
-    resultCustomizations: Optional[
-        Union[dict[str, ResultCustomizationByValue], dict[str, ResultCustomizationByPosition]]
-    ] = Field(default=None, description="Display configuration for the result datasets.")
     samplingFactor: Optional[float] = Field(default=None, description="Sampling rate")
     series: list[Union[EventsNode, ActionsNode, DataWarehouseNode]] = Field(
         ..., description="Events and actions to include"