diff --git a/frontend/src/scenes/insights/EditorFilters/PathsTarget.tsx b/frontend/src/scenes/insights/EditorFilters/PathsTarget.tsx index 73c5a243e180f..a716b2a962d96 100644 --- a/frontend/src/scenes/insights/EditorFilters/PathsTarget.tsx +++ b/frontend/src/scenes/insights/EditorFilters/PathsTarget.tsx @@ -6,6 +6,8 @@ import { IconFunnelVertical } from 'lib/lemon-ui/icons' import { LemonButton } from 'lib/lemon-ui/LemonButton' import { pathsDataLogic } from 'scenes/paths/pathsDataLogic' +import { queryNodeToFilter } from '~/queries/nodes/InsightQuery/utils/queryNodeToFilter' +import { FunnelsQuery } from '~/queries/schema' import { EditorFilterProps, FunnelPathType } from '~/types' export function PathsTargetStart(props: EditorFilterProps): JSX.Element { @@ -21,13 +23,14 @@ type PathTargetProps = { } & EditorFilterProps function PathsTarget({ position, insightProps }: PathTargetProps): JSX.Element { - const { pathsFilter, taxonomicGroupTypes } = useValues(pathsDataLogic(insightProps)) - const { updateInsightFilter } = useActions(pathsDataLogic(insightProps)) + const { pathsFilter, funnelPathsFilter, taxonomicGroupTypes } = useValues(pathsDataLogic(insightProps)) + const { updateInsightFilter, updateQuerySource } = useActions(pathsDataLogic(insightProps)) - const { funnelPaths, funnelFilter, startPoint, endPoint, pathGroupings } = pathsFilter || {} + const { startPoint, endPoint, pathGroupings } = pathsFilter || {} + const { funnelPathType, funnelSource, funnelStep } = funnelPathsFilter || {} - const overrideStartInput = funnelPaths && [FunnelPathType.between, FunnelPathType.after].includes(funnelPaths) - const overrideEndInput = funnelPaths && [FunnelPathType.between, FunnelPathType.before].includes(funnelPaths) + const overrideStartInput = funnelPathType && [FunnelPathType.between, FunnelPathType.after].includes(funnelPathType) + const overrideEndInput = funnelPathType && [FunnelPathType.between, FunnelPathType.before].includes(funnelPathType) const overrideInputs = overrideStartInput || overrideEndInput const key = position === 'start' ? 'startPoint' : 'endPoint' @@ -35,7 +38,7 @@ function PathsTarget({ position, insightProps }: PathTargetProps): JSX.Element { updateInsightFilter({ [key]: item }) } const onReset = (): void => { - updateInsightFilter({ [key]: undefined, funnelFilter: undefined, funnelPaths: undefined }) + updateQuerySource({ pathsFilter: { ...pathsFilter, [key]: undefined }, funnelPathsFilter: undefined }) } function _getStepNameAtIndex(filters: Record, index: number): string { @@ -50,14 +53,14 @@ function PathsTarget({ position, insightProps }: PathTargetProps): JSX.Element { return targetEntity?.name || '' } - function _getStepLabel(funnelFilters?: Record, index?: number, shift: number = 0): JSX.Element { - if (funnelFilters && index) { + function _getStepLabel(funnelSource?: FunnelsQuery, index?: number, shift: number = 0): JSX.Element { + if (funnelSource && index) { return (
{`${ index > 0 ? 'Funnel step ' + (index + shift) : 'Funnel dropoff ' + index * -1 - }: ${_getStepNameAtIndex(funnelFilters, index > 0 ? index + shift : index * -1)}`} + }: ${_getStepNameAtIndex(funnelSource, index > 0 ? index + shift : index * -1)}`}
) } else { @@ -66,12 +69,12 @@ function PathsTarget({ position, insightProps }: PathTargetProps): JSX.Element { } function getStartPointLabel(): JSX.Element { - if (funnelPaths) { - if (funnelPaths === FunnelPathType.after) { - return _getStepLabel(funnelFilter, funnelFilter?.funnel_step) - } else if (funnelPaths === FunnelPathType.between) { + if (funnelPathType) { + if (funnelPathType === FunnelPathType.after) { + return _getStepLabel(funnelSource, funnelStep) + } else if (funnelPathType === FunnelPathType.between) { // funnel_step targets the later of the 2 events when specifying between so the start point index is shifted back 1 - return _getStepLabel(funnelFilter, funnelFilter?.funnel_step, -1) + return _getStepLabel(funnelSource, funnelStep, -1) } else { return } @@ -85,9 +88,9 @@ function PathsTarget({ position, insightProps }: PathTargetProps): JSX.Element { } function getEndPointLabel(): JSX.Element { - if (funnelPaths) { - if (funnelPaths === FunnelPathType.before || funnelPaths === FunnelPathType.between) { - return _getStepLabel(funnelFilter, funnelFilter?.funnel_step) + if (funnelPathType) { + if (funnelPathType === FunnelPathType.before || funnelPathType === FunnelPathType.between) { + return _getStepLabel(funnelSource, funnelStep) } else { return } @@ -107,7 +110,7 @@ function PathsTarget({ position, insightProps }: PathTargetProps): JSX.Element { pathItem: startPoint, closeButtonEnabled: startPoint || overrideStartInput, disabled: overrideEndInput && !overrideStartInput, - funnelFilterLink: funnelFilter && overrideStartInput, + funnelFilterLink: funnelSource && overrideStartInput, }, end: { index: 1, @@ -115,7 +118,7 @@ function PathsTarget({ position, insightProps }: PathTargetProps): JSX.Element { pathItem: endPoint, closeButtonEnabled: endPoint || overrideEndInput, disabled: overrideStartInput && !overrideEndInput, - funnelFilterLink: funnelFilter && overrideEndInput, + funnelFilterLink: funnelSource && overrideEndInput, }, }[position] @@ -139,7 +142,10 @@ function PathsTarget({ position, insightProps }: PathTargetProps): JSX.Element { positionOptions.funnelFilterLink ? () => { router.actions.push( - combineUrl('/insights', encodeParams(funnelFilter as Record, '?')).url + combineUrl( + '/insights', + encodeParams(queryNodeToFilter(funnelSource as FunnelsQuery), '?') + ).url ) } : () => {} diff --git a/frontend/src/scenes/insights/insightVizDataLogic.ts b/frontend/src/scenes/insights/insightVizDataLogic.ts index a73ffdc89afa9..250ac40172add 100644 --- a/frontend/src/scenes/insights/insightVizDataLogic.ts +++ b/frontend/src/scenes/insights/insightVizDataLogic.ts @@ -178,6 +178,7 @@ export const insightVizDataLogic = kea([ pathsFilter: [(s) => [s.querySource], (q) => (isPathsQuery(q) ? q.pathsFilter : null)], stickinessFilter: [(s) => [s.querySource], (q) => (isStickinessQuery(q) ? q.stickinessFilter : null)], lifecycleFilter: [(s) => [s.querySource], (q) => (isLifecycleQuery(q) ? q.lifecycleFilter : null)], + funnelPathsFilter: [(s) => [s.querySource], (q) => (isPathsQuery(q) ? q.funnelPathsFilter : null)], isUsingSessionAnalysis: [ (s) => [s.series, s.breakdownFilter, s.properties], diff --git a/frontend/src/scenes/paths/pathsDataLogic.ts b/frontend/src/scenes/paths/pathsDataLogic.ts index 750490efc64f4..0e2edb8fb1b48 100644 --- a/frontend/src/scenes/paths/pathsDataLogic.ts +++ b/frontend/src/scenes/paths/pathsDataLogic.ts @@ -50,12 +50,13 @@ export const pathsDataLogic = kea([ 'insightDataLoading', 'insightDataError', 'pathsFilter', + 'funnelPathsFilter', 'dateRange', ], featureFlagLogic, ['featureFlags'], ], - actions: [insightVizDataLogic(props), ['updateInsightFilter']], + actions: [insightVizDataLogic(props), ['updateInsightFilter', 'updateQuerySource']], })), actions({