feat(insights): trends hogql volume

cypress/e2e/trends.cy.ts

@@ -44,6 +44,22 @@ describe('Trends', () => {
         cy.get('[data-attr=math-property-select]').should('exist')
     })
 
+    it('Select HogQL expressions', () => {
+        cy.get('[data-attr=math-property-selector-0]').should('not.exist')
+
+        cy.get('[data-attr=math-selector-0]').click()
+        cy.get('[data-attr=math-total-0]').should('be.visible')
+
+        cy.get('[data-attr=math-node-hogql-expression-0]').click()
+        cy.get('[data-attr=math-hogql-select-0]').click()
+        cy.get('[data-attr=inline-hogql-editor]').click().clear().type('avg(1042) * 2048')
+        cy.contains('Update HogQL expression').click()
+
+        cy.get('[data-attr=chart-filter]').click()
+        cy.contains('Table').click()
+        cy.contains('2,134,016').should('exist')
+    })
+
     it('Apply specific filter on default pageview event', () => {
         cy.get('[data-attr=trend-element-subject-0]').click()
         cy.get('[data-attr=taxonomic-filter-searchfield]').click().type('Pageview')

ee/clickhouse/models/test/test_filters.py

@@ -250,6 +250,7 @@ def test_simplify_entities(self):
                         "type": "events",
                         "id": "$pageview",
                         "math": None,
+                        "math_hogql": None,
                         "math_property": None,
                         "math_group_type_index": None,
                         "custom_name": None,
@@ -275,6 +276,7 @@ def test_simplify_entities_with_group_math(self):
                         "type": "events",
                         "id": "$pageview",
                         "math": "unique_group",
+                        "math_hogql": None,
                         "math_property": None,
                         "math_group_type_index": 2,
                         "custom_name": None,

ee/clickhouse/queries/test/__snapshots__/test_paths.ambr

@@ -3704,7 +3704,7 @@
                    AND (event = '$pageview')
                    AND NOT path_item IN ['/bar/*/foo']
                    AND toTimeZone(timestamp, 'UTC') >= toDateTime('2012-01-01 00:00:00', 'UTC')
-                   AND toTimeZone(timestamp, 'UTC') <= toDateTime('2023-05-23 23:59:59', 'UTC')
+                   AND toTimeZone(timestamp, 'UTC') <= toDateTime('2023-05-24 23:59:59', 'UTC')
                  ORDER BY pdi.person_id,
                           e.timestamp)
               GROUP BY person_id) ARRAY
@@ -3784,7 +3784,7 @@
                    AND (event = '$pageview')
                    AND NOT path_item IN ['/bar/*/foo']
                    AND toTimeZone(timestamp, 'UTC') >= toDateTime('2012-01-01 00:00:00', 'UTC')
-                   AND toTimeZone(timestamp, 'UTC') <= toDateTime('2023-05-23 23:59:59', 'UTC')
+                   AND toTimeZone(timestamp, 'UTC') <= toDateTime('2023-05-24 23:59:59', 'UTC')
                  ORDER BY pdi.person_id,
                           e.timestamp)
               GROUP BY person_id) ARRAY
@@ -3863,7 +3863,7 @@
                  WHERE team_id = 2
                    AND (event = '$pageview')
                    AND toTimeZone(timestamp, 'UTC') >= toDateTime('2012-01-01 00:00:00', 'UTC')
-                   AND toTimeZone(timestamp, 'UTC') <= toDateTime('2023-05-23 23:59:59', 'UTC')
+                   AND toTimeZone(timestamp, 'UTC') <= toDateTime('2023-05-24 23:59:59', 'UTC')
                  ORDER BY pdi.person_id,
                           e.timestamp)
               GROUP BY person_id) ARRAY
@@ -3942,7 +3942,7 @@
                  WHERE team_id = 2
                    AND (event = '$screen')
                    AND toTimeZone(timestamp, 'UTC') >= toDateTime('2012-01-01 00:00:00', 'UTC')
-                   AND toTimeZone(timestamp, 'UTC') <= toDateTime('2023-05-23 23:59:59', 'UTC')
+                   AND toTimeZone(timestamp, 'UTC') <= toDateTime('2023-05-24 23:59:59', 'UTC')
                  ORDER BY pdi.person_id,
                           e.timestamp)
               GROUP BY person_id) ARRAY
@@ -4021,7 +4021,7 @@
                  WHERE team_id = 2
                    AND (NOT event LIKE '$%')
                    AND toTimeZone(timestamp, 'UTC') >= toDateTime('2012-01-01 00:00:00', 'UTC')
-                   AND toTimeZone(timestamp, 'UTC') <= toDateTime('2023-05-23 23:59:59', 'UTC')
+                   AND toTimeZone(timestamp, 'UTC') <= toDateTime('2023-05-24 23:59:59', 'UTC')
                  ORDER BY pdi.person_id,
                           e.timestamp)
               GROUP BY person_id) ARRAY
@@ -4100,7 +4100,7 @@
                  WHERE team_id = 2
                    AND (event IN ['/custom1', '/custom2'])
                    AND toTimeZone(timestamp, 'UTC') >= toDateTime('2012-01-01 00:00:00', 'UTC')
-                   AND toTimeZone(timestamp, 'UTC') <= toDateTime('2023-05-23 23:59:59', 'UTC')
+                   AND toTimeZone(timestamp, 'UTC') <= toDateTime('2023-05-24 23:59:59', 'UTC')
                  ORDER BY pdi.person_id,
                           e.timestamp)
               GROUP BY person_id) ARRAY
@@ -4179,7 +4179,7 @@
                  WHERE team_id = 2
                    AND (event IN ['/custom3', 'blah'])
                    AND toTimeZone(timestamp, 'UTC') >= toDateTime('2012-01-01 00:00:00', 'UTC')
-                   AND toTimeZone(timestamp, 'UTC') <= toDateTime('2023-05-23 23:59:59', 'UTC')
+                   AND toTimeZone(timestamp, 'UTC') <= toDateTime('2023-05-24 23:59:59', 'UTC')
                  ORDER BY pdi.person_id,
                           e.timestamp)
               GROUP BY person_id) ARRAY
@@ -4260,7 +4260,7 @@
                         OR event = '$screen'
                         OR NOT event LIKE '$%')
                    AND toTimeZone(timestamp, 'UTC') >= toDateTime('2012-01-01 00:00:00', 'UTC')
-                   AND toTimeZone(timestamp, 'UTC') <= toDateTime('2023-05-23 23:59:59', 'UTC')
+                   AND toTimeZone(timestamp, 'UTC') <= toDateTime('2023-05-24 23:59:59', 'UTC')
                  ORDER BY pdi.person_id,
                           e.timestamp)
               GROUP BY person_id) ARRAY
@@ -4342,7 +4342,7 @@
                         OR NOT event LIKE '$%')
                    AND NOT path_item IN ['/custom1', '/1', '/2', '/3']
                    AND toTimeZone(timestamp, 'UTC') >= toDateTime('2012-01-01 00:00:00', 'UTC')
-                   AND toTimeZone(timestamp, 'UTC') <= toDateTime('2023-05-23 23:59:59', 'UTC')
+                   AND toTimeZone(timestamp, 'UTC') <= toDateTime('2023-05-24 23:59:59', 'UTC')
                  ORDER BY pdi.person_id,
                           e.timestamp)
               GROUP BY person_id) ARRAY
@@ -7954,7 +7954,7 @@
                     HAVING argMax(is_deleted, version) = 0) AS pdi ON e.distinct_id = pdi.distinct_id
                  WHERE team_id = 2
                    AND toTimeZone(timestamp, 'UTC') >= toDateTime('2012-01-01 00:00:00', 'UTC')
-                   AND toTimeZone(timestamp, 'UTC') <= toDateTime('2023-05-23 23:59:59', 'UTC')
+                   AND toTimeZone(timestamp, 'UTC') <= toDateTime('2023-05-24 23:59:59', 'UTC')
                  ORDER BY pdi.person_id,
                           e.timestamp)
               GROUP BY person_id) ARRAY
@@ -8752,7 +8752,7 @@
                  WHERE team_id = 2
                    AND (event = '$pageview')
                    AND toTimeZone(timestamp, 'UTC') >= toDateTime('2012-01-01 00:00:00', 'UTC')
-                   AND toTimeZone(timestamp, 'UTC') <= toDateTime('2023-05-23 23:59:59', 'UTC')
+                   AND toTimeZone(timestamp, 'UTC') <= toDateTime('2023-05-24 23:59:59', 'UTC')
                  ORDER BY pdi.person_id,
                           e.timestamp)
               GROUP BY person_id) ARRAY
@@ -9983,7 +9983,7 @@
                  WHERE team_id = 2
                    AND (event = '$pageview')
                    AND toTimeZone(timestamp, 'UTC') >= toDateTime('2012-01-01 00:00:00', 'UTC')
-                   AND toTimeZone(timestamp, 'UTC') <= toDateTime('2023-05-23 23:59:59', 'UTC')
+                   AND toTimeZone(timestamp, 'UTC') <= toDateTime('2023-05-24 23:59:59', 'UTC')
                  ORDER BY pdi.person_id,
                           e.timestamp)
               GROUP BY person_id) ARRAY
@@ -10300,7 +10300,7 @@
                  WHERE team_id = 2
                    AND (event = '$pageview')
                    AND toTimeZone(timestamp, 'UTC') >= toDateTime('2012-01-01 00:00:00', 'UTC')
-                   AND toTimeZone(timestamp, 'UTC') <= toDateTime('2023-05-23 23:59:59', 'UTC')
+                   AND toTimeZone(timestamp, 'UTC') <= toDateTime('2023-05-24 23:59:59', 'UTC')
                  ORDER BY pdi.person_id,
                           e.timestamp)
               GROUP BY person_id) ARRAY

ee/clickhouse/queries/test/test_breakdown_props.py

@@ -396,7 +396,7 @@ def test_breakdown_with_math_property_session(self):
                 ],
             }
         )
-        aggregate_operation, _, _ = process_math(filter.entities[0], self.team)
+        aggregate_operation, _, _ = process_math(filter.entities[0], self.team, filter=filter)
 
         result = get_breakdown_prop_values(filter, filter.entities[0], aggregate_operation, self.team)
         # test should come first, based on aggregate operation, even if absolute count of events for

ee/clickhouse/views/test/test_clickhouse_trends.py

@@ -272,6 +272,7 @@ def test_can_specify_number_of_smoothing_intervals(client: Client):
                         "name": "$pageview",
                         "custom_name": None,
                         "math": None,
+                        "math_hogql": None,
                         "math_property": None,
                         "math_group_type_index": ANY,
                         "properties": {},

ee/tasks/test/test_calculate_cohort.py

@@ -59,6 +59,7 @@ def test_create_stickiness_cohort(self, _insert_cohort_from_insight_filter):
                         "name": "$pageview",
                         "custom_name": None,
                         "math": None,
+                        "math_hogql": None,
                         "math_property": None,
                         "math_group_type_index": None,
                         "properties": [],
@@ -131,6 +132,7 @@ def test_create_trends_cohort(self, _insert_cohort_from_insight_filter):
                         "order": 0,
                         "name": "$pageview",
                         "math": None,
+                        "math_hogql": None,
                         "math_property": None,
                         "math_group_type_index": None,
                         "properties": [],
@@ -233,6 +235,7 @@ def test_create_trends_cohort_arg_test(self, _insert_cohort_from_insight_filter)
                         "order": 0,
                         "name": "$pageview",
                         "math": None,
+                        "math_hogql": None,
                         "math_property": None,
                         "math_group_type_index": None,
                         "properties": [],
@@ -300,6 +303,7 @@ def test_create_funnels_cohort(self, _insert_cohort_from_insight_filter):
                         "type": "events",
                         "order": 0,
                         "properties": [],
+                        "math_hogql": None,
                         "math_property": None,
                     },
                     {
@@ -309,6 +313,7 @@ def test_create_funnels_cohort(self, _insert_cohort_from_insight_filter):
                         "type": "events",
                         "order": 1,
                         "properties": [],
+                        "math_hogql": None,
                         "math_property": None,
                     },
                 ]
@@ -332,7 +337,7 @@ def test_create_funnels_cohort(self, _insert_cohort_from_insight_filter):
             cohort_id,
             {
                 "insight": "FUNNELS",
-                "events": '[{"id": "$pageview", "math": null, "name": "$pageview", "type": "events", "order": 0, "properties": [], "math_property": null}, {"id": "$another_view", "math": null, "name": "$another_view", "type": "events", "order": 1, "properties": [], "math_property": null}]',
+                "events": '[{"id": "$pageview", "math": null, "name": "$pageview", "type": "events", "order": 0, "properties": [], "math_hogql": null, "math_property": null}, {"id": "$another_view", "math": null, "name": "$another_view", "type": "events", "order": 1, "properties": [], "math_hogql": null, "math_property": null}]',
                 "display": "FunnelViz",
                 "interval": "day",
                 "layout": "horizontal",

frontend/src/lib/components/Cards/InsightCard/InsightDetails.tsx

@@ -146,16 +146,23 @@ function SeriesDisplay({
                     {insightType !== InsightType.FUNNELS && (
                         <div>
                             counted by{' '}
-                            {mathDefinition?.category === MathCategory.PropertyValue && filter.math_property && (
+                            {mathDefinition?.category === MathCategory.HogQLExpression ? (
+                                filter.math_hogql
+                            ) : (
                                 <>
-                                    {' '}
-                                    event's
-                                    <span className="SeriesDisplay__raw-name">
-                                        <PropertyKeyInfo value={filter.math_property} />
-                                    </span>
+                                    {mathDefinition?.category === MathCategory.PropertyValue &&
+                                        filter.math_property && (
+                                            <>
+                                                {' '}
+                                                event's
+                                                <span className="SeriesDisplay__raw-name">
+                                                    <PropertyKeyInfo value={filter.math_property} />
+                                                </span>
+                                            </>
+                                        )}
+                                    <b>{mathDefinition?.name.toLowerCase()}</b>
                                 </>
                             )}
-                            <b>{mathDefinition?.name.toLowerCase()}</b>
                         </div>
                     )}
                     {filter.properties && filter.properties.length > 0 && (

frontend/src/lib/components/HogQLEditor/HogQLEditor.stories.tsx

@@ -0,0 +1,29 @@
+import { ComponentStory, Meta } from '@storybook/react'
+import { HogQLEditor } from './HogQLEditor'
+import { useState } from 'react'
+
+export default {
+    title: 'Components/HogQLEditor',
+    component: HogQLEditor,
+} as Meta<typeof HogQLEditor>
+
+const Template: ComponentStory<typeof HogQLEditor> = (props): JSX.Element => {
+    const [value, onChange] = useState(props.value ?? "countIf(properties.$browser = 'Chrome')")
+    return <HogQLEditor {...props} value={value} onChange={onChange} />
+}
+
+export const HogQLEditor_ = Template.bind({})
+HogQLEditor_.args = {}
+
+export const NoValue = Template.bind({})
+NoValue.args = {
+    value: '',
+    disableAutoFocus: true,
+}
+
+export const NoValuePersonPropertiesDisabled = Template.bind({})
+NoValuePersonPropertiesDisabled.args = {
+    disablePersonProperties: true,
+    value: '',
+    disableAutoFocus: true,
+}

frontend/src/lib/components/HogQLEditor/HogQLEditor.tsx

@@ -0,0 +1,76 @@
+import { useEffect, useState } from 'react'
+import { LemonTextArea } from 'lib/lemon-ui/LemonTextArea/LemonTextArea'
+import { CLICK_OUTSIDE_BLOCK_CLASS } from 'lib/hooks/useOutsideClickHandler'
+import { LemonButton } from 'lib/lemon-ui/LemonButton'
+
+export interface HogQLEditorProps {
+    onChange: (value: string) => void
+    value: string | undefined
+    disablePersonProperties?: boolean
+    disableAutoFocus?: boolean
+    disableCmdEnter?: boolean
+    submitText?: string
+    placeholder?: string
+}
+
+export function HogQLEditor({
+    onChange,
+    value,
+    disablePersonProperties,
+    disableAutoFocus,
+    disableCmdEnter,
+    submitText,
+    placeholder,
+}: HogQLEditorProps): JSX.Element {
+    const [localValue, setLocalValue] = useState(value || '')
+    useEffect(() => {
+        setLocalValue(value || '')
+    }, [value])
+
+    return (
+        <>
+            <LemonTextArea
+                data-attr="inline-hogql-editor"
+                value={localValue || ''}
+                onChange={(newValue) => setLocalValue(newValue)}
+                autoFocus={!disableAutoFocus}
+                onFocus={
+                    disableAutoFocus
+                        ? undefined
+                        : (e) => {
+                              e.target.selectionStart = localValue.length // Focus at the end of the input
+                          }
+                }
+                onPressCmdEnter={disableCmdEnter ? undefined : () => onChange(localValue)}
+                className={`font-mono ${CLICK_OUTSIDE_BLOCK_CLASS}`}
+                minRows={6}
+                maxRows={6}
+                placeholder={
+                    placeholder ??
+                    (disablePersonProperties
+                        ? "Enter HogQL expression, such as:\n- properties.$current_url\n- toInt(properties.`Long Field Name`) * 10\n- concat(event, ' ', distinct_id)\n- if(1 < 2, 'small', 'large')"
+                        : "Enter HogQL Expression, such as:\n- properties.$current_url\n- person.properties.$geoip_country_name\n- toInt(properties.`Long Field Name`) * 10\n- concat(event, ' ', distinct_id)\n- if(1 < 2, 'small', 'large')")
+                }
+            />
+            <LemonButton
+                fullWidth
+                type="primary"
+                onClick={() => onChange(localValue)}
+                disabledReason={!localValue ? 'Please enter a HogQL expression' : undefined}
+                center
+            >
+                {submitText ?? 'Update HogQL expression'}
+            </LemonButton>
+            <div className="flex">
+                {disablePersonProperties ? (
+                    <div className="flex-1 text-muted">NB: person.properties can't be used here.</div>
+                ) : null}
+                <div className={`${disablePersonProperties ? '' : 'w-full '}text-right ${CLICK_OUTSIDE_BLOCK_CLASS}`}>
+                    <a href="https://posthog.com/manual/hogql" target={'_blank'}>
+                        Learn more about HogQL
+                    </a>
+                </div>
+            </div>
+        </>
+    )
+}

frontend/src/lib/components/InsightLabel/index.tsx

@@ -45,10 +45,11 @@ interface InsightsLabelProps {
 interface MathTagProps {
     math: string | undefined
     mathProperty: string | undefined
+    mathHogQL: string | undefined
     mathGroupTypeIndex: number | null | undefined
 }
 
-function MathTag({ math, mathProperty, mathGroupTypeIndex }: MathTagProps): JSX.Element {
+function MathTag({ math, mathProperty, mathHogQL, mathGroupTypeIndex }: MathTagProps): JSX.Element {
     const { mathDefinitions } = useValues(mathsLogic)
     const { aggregationLabel } = useValues(groupsModel)
 
@@ -74,6 +75,9 @@ function MathTag({ math, mathProperty, mathGroupTypeIndex }: MathTagProps): JSX.
             </>
         )
     }
+    if (math === 'hogql') {
+        return <Tag>{String(mathHogQL)}</Tag>
+    }
     return <Tag>{capitalizeFirstLetter(math)}</Tag>
 }
 
@@ -153,6 +157,7 @@ export function InsightLabel({
                         <MathTag
                             math={action?.math}
                             mathProperty={action?.math_property}
+                            mathHogQL={action?.math_hogql}
                             mathGroupTypeIndex={action?.math_group_type_index}
                         />
                     )}