Skip to content

Commit

Permalink
chore(query-nodes): camel case funnels filter (#19828)
Browse files Browse the repository at this point in the history
  • Loading branch information
@thmsobrmlr
thmsobrmlr authored Jan 23, 2024
1 parent e774c99 commit 4aa36d8
Show file tree
Hide file tree
Showing 36 changed files with 513 additions and 325 deletions.
2 changes: 1 addition & 1 deletion frontend/src/queries/examples.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -204,7 +204,7 @@ const InsightFunnelsQuery: FunnelsQuery = {
},
series,
funnelsFilter: {
funnel_order_type: StepOrderValue.ORDERED,
funnelOrderType: StepOrderValue.ORDERED,
},
breakdownFilter: {
breakdown: '$geoip_country_code',
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/queries/nodes/InsightQuery/defaults.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export const funnelsQueryDefault: FunnelsQuery = {
},
],
funnelsFilter: {
funnel_viz_type: FunnelVizType.Steps,
funnelVizType: FunnelVizType.Steps,
},
}

Expand Down
28 changes: 14 additions & 14 deletions frontend/src/queries/nodes/InsightQuery/utils/filtersToQueryNode.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -381,20 +381,20 @@ describe('filtersToQueryNode', () => {
const query: FunnelsQuery = {
kind: NodeKind.FunnelsQuery,
funnelsFilter: {
funnel_viz_type: FunnelVizType.Steps,
funnel_from_step: 1,
funnel_to_step: 2,
funnel_step_reference: FunnelStepReference.total,
breakdown_attribution_type: BreakdownAttributionType.AllSteps,
breakdown_attribution_value: 1,
bin_count: 'auto',
funnel_window_interval_unit: FunnelConversionWindowTimeUnit.Day,
funnel_window_interval: 7,
funnel_order_type: StepOrderValue.ORDERED,
funnelVizType: FunnelVizType.Steps,
funnelFromStep: 1,
funnelToStep: 2,
funnelStepReference: FunnelStepReference.total,
breakdownAttributionType: BreakdownAttributionType.AllSteps,
breakdownAttributionValue: 1,
binCount: 'auto',
funnelWindowIntervalUnit: FunnelConversionWindowTimeUnit.Day,
funnelWindowInterval: 7,
funnelOrderType: StepOrderValue.ORDERED,
exclusions: [
{
funnel_from_step: 0,
funnel_to_step: 1,
funnelFromStep: 0,
funnelToStep: 1,
},
],
layout: FunnelLayout.horizontal,
Expand Down Expand Up @@ -1101,7 +1101,7 @@ describe('filtersToQueryNode', () => {
],
filterTestAccounts: true,
funnelsFilter: {
funnel_viz_type: FunnelVizType.Steps,
funnelVizType: FunnelVizType.Steps,
},
}
expect(result).toEqual(query)
Expand Down Expand Up @@ -1171,7 +1171,7 @@ describe('filtersToQueryNode', () => {
],
filterTestAccounts: true,
funnelsFilter: {
funnel_viz_type: FunnelVizType.Steps,
funnelVizType: FunnelVizType.Steps,
},
}
expect(result).toEqual(query)
Expand Down
31 changes: 19 additions & 12 deletions frontend/src/queries/nodes/InsightQuery/utils/filtersToQueryNode.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -277,20 +277,27 @@ export const filtersToQueryNode = (filters: Partial<FilterType>): InsightQueryNo
// funnels filter
if (isFunnelsFilter(filters) && isFunnelsQuery(query)) {
query.funnelsFilter = objectCleanWithEmpty({
funnel_viz_type: filters.funnel_viz_type,
funnel_from_step: filters.funnel_from_step,
funnel_to_step: filters.funnel_to_step,
funnel_step_reference: filters.funnel_step_reference,
breakdown_attribution_type: filters.breakdown_attribution_type,
breakdown_attribution_value: filters.breakdown_attribution_value,
bin_count: filters.bin_count,
funnel_window_interval_unit: filters.funnel_window_interval_unit,
funnel_window_interval: filters.funnel_window_interval,
funnel_order_type: filters.funnel_order_type,
exclusions: filters.exclusions,
funnelVizType: filters.funnel_viz_type,
funnelFromStep: filters.funnel_from_step,
funnelToStep: filters.funnel_to_step,
funnelStepReference: filters.funnel_step_reference,
breakdownAttributionType: filters.breakdown_attribution_type,
breakdownAttributionValue: filters.breakdown_attribution_value,
binCount: filters.bin_count,
funnelWindowIntervalUnit: filters.funnel_window_interval_unit,
funnelWindowInterval: filters.funnel_window_interval,
funnelOrderType: filters.funnel_order_type,
exclusions:
filters.exclusions !== undefined
? filters.exclusions.map(({ funnel_from_step, funnel_to_step, ...rest }) => ({
funnelFromStep: funnel_from_step,
funnelToStep: funnel_to_step,
...rest,
}))
: undefined,
layout: filters.layout,
hidden_legend_breakdowns: cleanHiddenLegendSeries(filters.hidden_legend_keys),
funnel_aggregate_by_hogql: filters.funnel_aggregate_by_hogql,
funnelAggregateByHogQL: filters.funnel_aggregate_by_hogql,
})
}

Expand Down
36 changes: 36 additions & 0 deletions frontend/src/queries/nodes/InsightQuery/utils/queryNodeToFilter.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import {
ActionsNode,
BreakdownFilter,
EventsNode,
FunnelsFilterLegacy,
InsightNodeKind,
InsightQueryNode,
LifecycleFilterLegacy,
Expand Down Expand Up @@ -155,6 +156,7 @@ export const queryNodeToFilter = (query: InsightQueryNode): Partial<FilterType>

// replace camel cased props with the snake cased variant
const camelCasedTrendsProps: TrendsFilterLegacy = {}
const camelCasedFunnelsProps: FunnelsFilterLegacy = {}
const camelCasedRetentionProps: RetentionFilterLegacy = {}
const camelCasedPathsProps: PathsFilterLegacy = {}
const camelCasedStickinessProps: StickinessFilterLegacy = {}
Expand All @@ -178,6 +180,39 @@ export const queryNodeToFilter = (query: InsightQueryNode): Partial<FilterType>
delete queryCopy.trendsFilter?.showPercentStackView
delete queryCopy.trendsFilter?.showLegend
delete queryCopy.trendsFilter?.showValuesOnSeries
} else if (isFunnelsQuery(queryCopy)) {
camelCasedFunnelsProps.exclusions = queryCopy.funnelsFilter?.exclusions
? queryCopy.funnelsFilter.exclusions.map(({ funnelFromStep, funnelToStep, ...rest }) => ({
funnel_from_step: funnelFromStep,
funnel_to_step: funnelToStep,
...rest,
}))
: undefined
camelCasedFunnelsProps.bin_count = queryCopy.funnelsFilter?.binCount
camelCasedFunnelsProps.breakdown_attribution_type = queryCopy.funnelsFilter?.breakdownAttributionType
camelCasedFunnelsProps.breakdown_attribution_value = queryCopy.funnelsFilter?.breakdownAttributionValue
camelCasedFunnelsProps.funnel_aggregate_by_hogql = queryCopy.funnelsFilter?.funnelAggregateByHogQL
camelCasedFunnelsProps.funnel_to_step = queryCopy.funnelsFilter?.funnelToStep
camelCasedFunnelsProps.funnel_from_step = queryCopy.funnelsFilter?.funnelFromStep
camelCasedFunnelsProps.funnel_order_type = queryCopy.funnelsFilter?.funnelOrderType
camelCasedFunnelsProps.funnel_viz_type = queryCopy.funnelsFilter?.funnelVizType
camelCasedFunnelsProps.funnel_window_interval = queryCopy.funnelsFilter?.funnelWindowInterval
camelCasedFunnelsProps.funnel_window_interval_unit = queryCopy.funnelsFilter?.funnelWindowIntervalUnit
// camelCasedFunnelsProps.hidden_legend_breakdowns = queryCopy.funnelsFilter?.hiddenLegendBreakdowns
camelCasedFunnelsProps.funnel_step_reference = queryCopy.funnelsFilter?.funnelStepReference
delete queryCopy.funnelsFilter?.exclusions
delete queryCopy.funnelsFilter?.binCount
delete queryCopy.funnelsFilter?.breakdownAttributionType
delete queryCopy.funnelsFilter?.breakdownAttributionValue
delete queryCopy.funnelsFilter?.funnelAggregateByHogQL
delete queryCopy.funnelsFilter?.funnelToStep
delete queryCopy.funnelsFilter?.funnelFromStep
delete queryCopy.funnelsFilter?.funnelOrderType
delete queryCopy.funnelsFilter?.funnelVizType
delete queryCopy.funnelsFilter?.funnelWindowInterval
delete queryCopy.funnelsFilter?.funnelWindowIntervalUnit
// delete queryCopy.funnelsFilter?.hiddenLegendBreakdowns
delete queryCopy.funnelsFilter?.funnelStepReference
} else if (isRetentionQuery(queryCopy)) {
camelCasedRetentionProps.retention_reference = queryCopy.retentionFilter?.retentionReference
camelCasedRetentionProps.retention_type = queryCopy.retentionFilter?.retentionType
Expand Down Expand Up @@ -228,6 +263,7 @@ export const queryNodeToFilter = (query: InsightQueryNode): Partial<FilterType>
delete queryCopy.lifecycleFilter?.showValuesOnSeries
}
Object.assign(filters, camelCasedTrendsProps)
Object.assign(filters, camelCasedFunnelsProps)
Object.assign(filters, camelCasedRetentionProps)
Object.assign(filters, camelCasedPathsProps)
Object.assign(filters, camelCasedStickinessProps)
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/queries/nodes/InsightViz/InsightVizDisplay.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -151,7 +151,7 @@ export function InsightVizDisplay({
timedOutQueryId === null &&
isFunnelWithEnoughSteps &&
hasFunnelResults &&
funnelsFilter?.funnel_viz_type === FunnelVizType.Steps &&
funnelsFilter?.funnelVizType === FunnelVizType.Steps &&
!disableTable
) {
return (
Expand Down
86 changes: 85 additions & 1 deletion frontend/src/queries/schema.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1317,6 +1317,36 @@
"type": "string"
},
"FunnelExclusion": {
"additionalProperties": false,
"properties": {
"custom_name": {
"type": ["string", "null"]
},
"funnelFromStep": {
"type": "number"
},
"funnelToStep": {
"type": "number"
},
"id": {
"type": ["string", "number", "null"]
},
"index": {
"type": "number"
},
"name": {
"type": ["string", "null"]
},
"order": {
"type": "number"
},
"type": {
"$ref": "#/definitions/EntityType"
}
},
"type": "object"
},
"FunnelExclusionLegacy": {
"additionalProperties": false,
"properties": {
"custom_name": {
Expand Down Expand Up @@ -1363,6 +1393,60 @@
"type": "string"
},
"FunnelsFilter": {
"additionalProperties": false,
"properties": {
"binCount": {
"$ref": "#/definitions/BinCountValue"
},
"breakdownAttributionType": {
"$ref": "#/definitions/BreakdownAttributionType"
},
"breakdownAttributionValue": {
"type": "number"
},
"exclusions": {
"items": {
"$ref": "#/definitions/FunnelExclusion"
},
"type": "array"
},
"funnelAggregateByHogQL": {
"type": "string"
},
"funnelFromStep": {
"type": "number"
},
"funnelOrderType": {
"$ref": "#/definitions/StepOrderValue"
},
"funnelStepReference": {
"$ref": "#/definitions/FunnelStepReference"
},
"funnelToStep": {
"type": "number"
},
"funnelVizType": {
"$ref": "#/definitions/FunnelVizType"
},
"funnelWindowInterval": {
"type": "number"
},
"funnelWindowIntervalUnit": {
"$ref": "#/definitions/FunnelConversionWindowTimeUnit"
},
"hidden_legend_breakdowns": {
"items": {
"type": "string"
},
"type": "array"
},
"layout": {
"$ref": "#/definitions/FunnelLayout"
}
},
"type": "object"
},
"FunnelsFilterLegacy": {
"additionalProperties": false,
"description": "`FunnelsFilterType` minus everything inherited from `FilterType` and persons modal related params and `hidden_legend_keys` replaced by `hidden_legend_breakdowns`",
"properties": {
Expand All @@ -1377,7 +1461,7 @@
},
"exclusions": {
"items": {
"$ref": "#/definitions/FunnelExclusion"
"$ref": "#/definitions/FunnelExclusionLegacy"
},
"type": "array"
},
Expand Down
21 changes: 20 additions & 1 deletion frontend/src/queries/schema.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
EventPropertyFilter,
EventType,
FilterType,
FunnelExclusion,
FunnelsFilterType,
GroupMathType,
HogQLMathType,
Expand Down Expand Up @@ -549,7 +550,7 @@ export interface TrendsQuery extends InsightsQueryBase {

/** `FunnelsFilterType` minus everything inherited from `FilterType` and persons modal related params
* and `hidden_legend_keys` replaced by `hidden_legend_breakdowns` */
export type FunnelsFilter = Omit<
export type FunnelsFilterLegacy = Omit<
FunnelsFilterType & { hidden_legend_breakdowns?: string[] },
| keyof FilterType
| 'hidden_legend_keys'
Expand All @@ -561,6 +562,24 @@ export type FunnelsFilter = Omit<
| 'funnel_step'
| 'funnel_custom_steps'
>

export type FunnelsFilter = {
exclusions?: FunnelExclusion[]
layout?: FunnelsFilterLegacy['layout']
binCount?: FunnelsFilterLegacy['bin_count']
breakdownAttributionType?: FunnelsFilterLegacy['breakdown_attribution_type']
breakdownAttributionValue?: FunnelsFilterLegacy['breakdown_attribution_value']
funnelAggregateByHogQL?: FunnelsFilterLegacy['funnel_aggregate_by_hogql']
funnelToStep?: FunnelsFilterLegacy['funnel_to_step']
funnelFromStep?: FunnelsFilterLegacy['funnel_from_step']
funnelOrderType?: FunnelsFilterLegacy['funnel_order_type']
funnelVizType?: FunnelsFilterLegacy['funnel_viz_type']
funnelWindowInterval?: FunnelsFilterLegacy['funnel_window_interval']
funnelWindowIntervalUnit?: FunnelsFilterLegacy['funnel_window_interval_unit']
hidden_legend_breakdowns?: FunnelsFilterLegacy['hidden_legend_breakdowns']
funnelStepReference?: FunnelsFilterLegacy['funnel_step_reference']
}

export interface FunnelsQuery extends InsightsQueryBase {
kind: NodeKind.FunnelsQuery
/** Granularity of the response. Can be one of `hour`, `day`, `week` or `month` */
Expand Down
10 changes: 5 additions & 5 deletions frontend/src/scenes/funnels/Funnel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,12 @@ import { FunnelHistogram } from './FunnelHistogram'
export function Funnel(props: ChartParams): JSX.Element {
const { insightProps } = useValues(insightLogic)
const { funnelsFilter } = useValues(funnelDataLogic(insightProps))
const { funnel_viz_type, layout } = funnelsFilter || {}
const { funnelVizType, layout } = funnelsFilter || {}

let viz: JSX.Element | null = null
if (funnel_viz_type == FunnelVizType.Trends) {
if (funnelVizType == FunnelVizType.Trends) {
viz = <FunnelLineGraph {...props} />
} else if (funnel_viz_type == FunnelVizType.TimeToConvert) {
} else if (funnelVizType == FunnelVizType.TimeToConvert) {
viz = <FunnelHistogram />
} else if ((layout || FunnelLayout.vertical) === FunnelLayout.vertical) {
viz = <FunnelBarChart {...props} />
Expand All @@ -30,8 +30,8 @@ export function Funnel(props: ChartParams): JSX.Element {

return (
<div
className={`FunnelInsight FunnelInsight--type-${funnel_viz_type?.toLowerCase()}${
funnel_viz_type === FunnelVizType.Steps ? '-' + (layout ?? FunnelLayout.vertical) : ''
className={`FunnelInsight FunnelInsight--type-${funnelVizType?.toLowerCase()}${
funnelVizType === FunnelVizType.Steps ? '-' + (layout ?? FunnelLayout.vertical) : ''
}`}
>
{viz}
Expand Down
8 changes: 4 additions & 4 deletions frontend/src/scenes/funnels/FunnelBarGraph/FunnelBarGraph.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export function FunnelBarGraph({
const { ref: graphRef, width } = useResizeObserver()

const steps = visibleStepsWithConversionMetrics
const stepReference = funnelsFilter?.funnel_step_reference || FunnelStepReference.total
const stepReference = funnelsFilter?.funnelStepReference || FunnelStepReference.total

const showPersonsModal = canOpenPersonModal && showPersonsModalProp

Expand Down Expand Up @@ -67,7 +67,7 @@ export function FunnelBarGraph({
<section key={step.order} className="funnel-step">
<div className="funnel-series-container">
<div className={`funnel-series-linebox ${showLineBefore ? 'before' : ''}`} />
{funnelsFilter?.funnel_order_type === StepOrderValue.UNORDERED ? (
{funnelsFilter?.funnelOrderType === StepOrderValue.UNORDERED ? (
<SeriesGlyph variant="funnel-step-glyph">
<IconInfinity style={{ fill: 'var(--primary_alt)', width: 14 }} />
</SeriesGlyph>
Expand All @@ -79,13 +79,13 @@ export function FunnelBarGraph({
<header>
<div className="flex items-center max-w-full grow">
<div className="funnel-step-title">
{funnelsFilter?.funnel_order_type === StepOrderValue.UNORDERED ? (
{funnelsFilter?.funnelOrderType === StepOrderValue.UNORDERED ? (
<span>Completed {step.order + 1} steps</span>
) : (
<EntityFilterInfo filter={getActionFilterFromFunnelStep(step)} />
)}
</div>
{funnelsFilter?.funnel_order_type !== StepOrderValue.UNORDERED &&
{funnelsFilter?.funnelOrderType !== StepOrderValue.UNORDERED &&
stepIndex > 0 &&
step.action_id === steps[stepIndex - 1].action_id && <DuplicateStepIndicator />}
<FunnelStepMore stepIndex={stepIndex} />
Expand Down
Loading

0 comments on commit 4aa36d8

Please sign in to comment.