refactor(schema): camel case frontend-only settings and include in conversion

frontend/src/lib/components/UnitPicker/CustomUnitModal.tsx

@@ -12,11 +12,11 @@ function chooseFormativeElementValue(
     trendsFilter: TrendsFilter | null | undefined
 ): string {
     if (formativeElement === 'prefix') {
-        return trendsFilter?.aggregation_axis_prefix || ''
+        return trendsFilter?.aggregationAxisPrefix || ''
     }
 
     if (formativeElement === 'postfix') {
-        return trendsFilter?.aggregation_axis_postfix || ''
+        return trendsFilter?.aggregationAxisPostfix || ''
     }
 
     return ''

frontend/src/lib/components/UnitPicker/UnitPicker.tsx

@@ -29,7 +29,7 @@ export function UnitPicker(): JSX.Element {
     const { reportAxisUnitsChanged } = useActions(eventUsageLogic)
 
     const [isVisible, setIsVisible] = useState(false)
-    const [localAxisFormat, setLocalAxisFormat] = useState(trendsFilter?.aggregation_axis_format || undefined)
+    const [localAxisFormat, setLocalAxisFormat] = useState(trendsFilter?.aggregationAxisFormat || undefined)
     const [customUnitModal, setCustomUnitModal] = useState<'prefix' | 'postfix' | null>(null)
 
     const customUnitModalRef = useRef<HTMLDivElement | null>(null)
@@ -50,9 +50,9 @@ export function UnitPicker(): JSX.Element {
         setLocalAxisFormat(format)
 
         updateInsightFilter({
-            aggregation_axis_format: format,
-            aggregation_axis_prefix: prefix,
-            aggregation_axis_postfix: postfix,
+            aggregationAxisFormat: format,
+            aggregationAxisPrefix: prefix,
+            aggregationAxisPostfix: postfix,
         })
 
         reportAxisUnitsChanged({
@@ -72,11 +72,11 @@ export function UnitPicker(): JSX.Element {
         if (localAxisFormat) {
             displayValue = aggregationDisplayMap[localAxisFormat]
         }
-        if (trendsFilter?.aggregation_axis_prefix?.length) {
-            displayValue = `Prefix: ${trendsFilter?.aggregation_axis_prefix}`
+        if (trendsFilter?.aggregationAxisPrefix?.length) {
+            displayValue = `Prefix: ${trendsFilter?.aggregationAxisPrefix}`
         }
-        if (trendsFilter?.aggregation_axis_postfix?.length) {
-            displayValue = `Postfix: ${trendsFilter?.aggregation_axis_postfix}`
+        if (trendsFilter?.aggregationAxisPostfix?.length) {
+            displayValue = `Postfix: ${trendsFilter?.aggregationAxisPostfix}`
         }
         return displayValue
     }, [localAxisFormat, trendsFilter])
@@ -121,23 +121,23 @@ export function UnitPicker(): JSX.Element {
                                 <LemonButton
                                     onClick={() => setCustomUnitModal('prefix')}
                                     status="stealth"
-                                    active={!!trendsFilter?.aggregation_axis_prefix}
+                                    active={!!trendsFilter?.aggregationAxisPrefix}
                                     fullWidth
                                 >
                                     Custom prefix
-                                    {trendsFilter?.aggregation_axis_prefix
-                                        ? `: ${trendsFilter?.aggregation_axis_prefix}...`
+                                    {trendsFilter?.aggregationAxisPrefix
+                                        ? `: ${trendsFilter?.aggregationAxisPrefix}...`
                                         : '...'}
                                 </LemonButton>
                                 <LemonButton
                                     onClick={() => setCustomUnitModal('postfix')}
                                     status="stealth"
-                                    active={!!trendsFilter?.aggregation_axis_postfix}
+                                    active={!!trendsFilter?.aggregationAxisPostfix}
                                     fullWidth
                                 >
                                     Custom postfix
-                                    {trendsFilter?.aggregation_axis_postfix
-                                        ? `: ${trendsFilter?.aggregation_axis_postfix}...`
+                                    {trendsFilter?.aggregationAxisPostfix
+                                        ? `: ${trendsFilter?.aggregationAxisPostfix}...`
                                         : '...'}
                                 </LemonButton>
                             </>

frontend/src/lib/lemon-ui/LemonRow/LemonRow.tsx

@@ -5,7 +5,7 @@ import { Spinner } from '../Spinner/Spinner'
 import React from 'react'
 
 // Fix for function type inference in forwardRef, so that function components wrapped with forwardRef can be generic.
-// For some reason the @types/react definitons as React 16 and TS 4.9 don't work, because `P` (the props) is wrapped in
+// For some reason the @types/react definitions as React 16 and TS 4.9 don't work, because `P` (the props) is wrapped in
 // `Pick` (inside `React.PropsWithoutRef`), which breaks TypeScript's ability to reason about it as a generic type.
 // `Omit` has the same effect. It's probably fine to just use `P` directly in `ForwardRefExoticComponent`.
 declare module 'react' {

frontend/src/queries/nodes/InsightQuery/utils/filtersToQueryNode.test.ts

@@ -312,12 +312,12 @@ describe('filtersToQueryNode', () => {
                 kind: NodeKind.TrendsQuery,
                 trendsFilter: {
                     smoothing_intervals: 1,
-                    show_legend: true,
+                    showLegend: true,
                     hidden_legend_indexes: [0, 10],
                     compare: true,
-                    aggregation_axis_format: 'numeric',
-                    aggregation_axis_prefix: '£',
-                    aggregation_axis_postfix: '%',
+                    aggregationAxisFormat: 'numeric',
+                    aggregationAxisPrefix: '£',
+                    aggregationAxisPostfix: '%',
                     formula: 'A+B',
                     shown_as: ShownAsValue.VOLUME,
                     display: ChartDisplayType.ActionsAreaGraph,
@@ -369,7 +369,7 @@ describe('filtersToQueryNode', () => {
                     funnel_viz_type: FunnelVizType.Steps,
                     funnel_from_step: 1,
                     funnel_to_step: 2,
-                    funnel_step_reference: FunnelStepReference.total,
+                    funnelStepReference: FunnelStepReference.total,
                     breakdown_attribution_type: BreakdownAttributionType.AllSteps,
                     breakdown_attribution_value: 1,
                     bin_count: 'auto',
@@ -473,7 +473,6 @@ describe('filtersToQueryNode', () => {
                 insight: InsightType.STICKINESS,
                 compare: true,
                 show_legend: true,
-                hidden_legend_keys: { 0: true, 10: true },
                 shown_as: ShownAsValue.STICKINESS,
                 display: ChartDisplayType.ActionsLineGraph,
             }
@@ -484,8 +483,7 @@ describe('filtersToQueryNode', () => {
                 kind: NodeKind.StickinessQuery,
                 stickinessFilter: {
                     compare: true,
-                    show_legend: true,
-                    hidden_legend_indexes: [0, 10],
+                    showLegend: true,
                     shown_as: ShownAsValue.STICKINESS,
                     display: ChartDisplayType.ActionsLineGraph,
                 },

frontend/src/queries/nodes/InsightQuery/utils/filtersToQueryNode.ts

@@ -170,17 +170,17 @@ export const filtersToQueryNode = (filters: Partial<FilterType>): InsightQueryNo
     if (isTrendsFilter(filters) && isTrendsQuery(query)) {
         query.trendsFilter = objectCleanWithEmpty({
             smoothing_intervals: filters.smoothing_intervals,
-            show_legend: filters.show_legend,
+            showLegend: filters.show_legend,
             hidden_legend_indexes: cleanHiddenLegendIndexes(filters.hidden_legend_keys),
             compare: filters.compare,
-            aggregation_axis_format: filters.aggregation_axis_format,
-            aggregation_axis_prefix: filters.aggregation_axis_prefix,
-            aggregation_axis_postfix: filters.aggregation_axis_postfix,
+            aggregationAxisFormat: filters.aggregation_axis_format,
+            aggregationAxisPrefix: filters.aggregation_axis_prefix,
+            aggregationAxisPostfix: filters.aggregation_axis_postfix,
             formula: filters.formula,
             shown_as: filters.shown_as,
             display: filters.display,
-            show_values_on_series: filters.show_values_on_series,
-            show_percent_stack_view: filters.show_percent_stack_view,
+            showValuesOnSeries: filters.show_values_on_series,
+            showPercentStackView: filters.show_percent_stack_view,
         })
     }
 
@@ -190,7 +190,7 @@ export const filtersToQueryNode = (filters: Partial<FilterType>): InsightQueryNo
             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,
+            funnelStepReference: filters.funnel_step_reference,
             breakdown_attribution_type: filters.breakdown_attribution_type,
             breakdown_attribution_value: filters.breakdown_attribution_value,
             bin_count: filters.bin_count,
@@ -243,10 +243,8 @@ export const filtersToQueryNode = (filters: Partial<FilterType>): InsightQueryNo
         query.stickinessFilter = objectCleanWithEmpty({
             display: filters.display,
             compare: filters.compare,
-            show_legend: filters.show_legend,
-            hidden_legend_indexes: cleanHiddenLegendIndexes(filters.hidden_legend_keys),
             shown_as: filters.shown_as,
-            show_values_on_series: filters.show_values_on_series,
+            showValuesOnSeries: filters.show_values_on_series,
         })
     }
 
@@ -255,7 +253,7 @@ export const filtersToQueryNode = (filters: Partial<FilterType>): InsightQueryNo
         query.lifecycleFilter = objectCleanWithEmpty({
             shown_as: filters.shown_as,
             toggledLifecycles: filters.toggledLifecycles,
-            show_values_on_series: filters.show_values_on_series,
+            showValuesOnSeries: filters.show_values_on_series,
         })
     }
 

frontend/src/queries/nodes/InsightViz/InsightDisplayConfig.tsx

@@ -81,8 +81,8 @@ export function InsightDisplayConfig({ disableTable }: InsightDisplayConfigProps
         (showPercentStackView && isPercentStackViewOn ? 1 : 0) +
         (!isPercentStackViewOn &&
         showUnit &&
-        trendsFilter?.aggregation_axis_format &&
-        trendsFilter.aggregation_axis_format !== 'numeric'
+        trendsFilter?.aggregationAxisFormat &&
+        trendsFilter.aggregationAxisFormat !== 'numeric'
             ? 1
             : 0) +
         (hasLegend && showLegend ? 1 : 0)

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

@@ -96,29 +96,29 @@ export const getShownAs = (query: InsightQueryNode): ShownAsValue | undefined =>
 
 export const getShowLegend = (query: InsightQueryNode): boolean | undefined => {
     if (isStickinessQuery(query)) {
-        return query.stickinessFilter?.show_legend
+        return query.stickinessFilter?.showLegend
     } else if (isTrendsQuery(query)) {
-        return query.trendsFilter?.show_legend
+        return query.trendsFilter?.showLegend
     } else {
         return undefined
     }
 }
 
 export const getShowValueOnSeries = (query: InsightQueryNode): boolean | undefined => {
     if (isLifecycleQuery(query)) {
-        return query.lifecycleFilter?.show_values_on_series
+        return query.lifecycleFilter?.showValuesOnSeries
     } else if (isStickinessQuery(query)) {
-        return query.stickinessFilter?.show_values_on_series
+        return query.stickinessFilter?.showValuesOnSeries
     } else if (isTrendsQuery(query)) {
-        return query.trendsFilter?.show_values_on_series
+        return query.trendsFilter?.showValuesOnSeries
     } else {
         return undefined
     }
 }
 
 export const getShowPercentStackView = (query: InsightQueryNode): boolean | undefined => {
     if (isTrendsQuery(query)) {
-        return query.trendsFilter?.show_percent_stack_view
+        return query.trendsFilter?.showPercentStackView
     } else {
         return undefined
     }

frontend/src/queries/schema.json

@@ -911,6 +911,9 @@
                     },
                     "type": "array"
                 },
+                "funnelStepReference": {
+                    "$ref": "#/definitions/FunnelStepReference"
+                },
                 "funnel_aggregate_by_hogql": {
                     "type": "string"
                 },
@@ -920,9 +923,6 @@
                 "funnel_order_type": {
                     "$ref": "#/definitions/StepOrderValue"
                 },
-                "funnel_step_reference": {
-                    "$ref": "#/definitions/FunnelStepReference"
-                },
                 "funnel_to_step": {
                     "type": "number"
                 },
@@ -1297,7 +1297,7 @@
             "additionalProperties": false,
             "description": "`LifecycleFilterType` minus everything inherited from `FilterType`",
             "properties": {
-                "show_values_on_series": {
+                "showValuesOnSeries": {
                     "type": "boolean"
                 },
                 "shown_as": {
@@ -2012,10 +2012,10 @@
                     },
                     "type": "array"
                 },
-                "show_legend": {
+                "showLegend": {
                     "type": "boolean"
                 },
-                "show_values_on_series": {
+                "showValuesOnSeries": {
                     "type": "boolean"
                 },
                 "shown_as": {
@@ -2127,13 +2127,13 @@
             "additionalProperties": false,
             "description": "`TrendsFilterType` minus everything inherited from `FilterType` and `hidden_legend_keys` replaced by `hidden_legend_indexes`",
             "properties": {
-                "aggregation_axis_format": {
+                "aggregationAxisFormat": {
                     "$ref": "#/definitions/AggregationAxisFormat"
                 },
-                "aggregation_axis_postfix": {
+                "aggregationAxisPostfix": {
                     "type": "string"
                 },
-                "aggregation_axis_prefix": {
+                "aggregationAxisPrefix": {
                     "type": "string"
                 },
                 "breakdown_histogram_bin_count": {
@@ -2154,13 +2154,13 @@
                     },
                     "type": "array"
                 },
-                "show_legend": {
+                "showLegend": {
                     "type": "boolean"
                 },
-                "show_percent_stack_view": {
+                "showPercentStackView": {
                     "type": "boolean"
                 },
-                "show_values_on_series": {
+                "showValuesOnSeries": {
                     "type": "boolean"
                 },
                 "shown_as": {