feat: create experiment from a funnel

frontend/src/lib/utils/product-intents.ts

@@ -19,6 +19,7 @@ export enum ProductIntentContext {
     // Cross Sells
     TAXONOMIC_FILTER_EMPTY_STATE = 'taxonomic filter empty state',
     WEB_ANALYTICS_INSIGHT = 'web_analytics_insight',
+    CREATE_EXPERIMENT_FROM_FUNNEL_BUTTON = 'create experiment from funnel button',
 }
 
 export type ProductIntentMetadata = Record<string, unknown>

frontend/src/queries/utils.ts

@@ -512,3 +512,7 @@ export function isValidBreakdown(breakdownFilter?: BreakdownFilter | null): brea
             (breakdownFilter.breakdowns && breakdownFilter.breakdowns.length > 0))
     )
 }
+
+export function isValidQueryForExperiment(query: Node): boolean {
+    return isNodeWithSource(query) && isFunnelsQuery(query.source) && query.source.series.length >= 2
+}

frontend/src/scenes/experiments/ExperimentForm.tsx

@@ -1,5 +1,5 @@
 import { IconMagicWand, IconPlusSmall, IconTrash } from '@posthog/icons'
-import { LemonDivider, LemonInput, LemonTextArea, Tooltip } from '@posthog/lemon-ui'
+import { LemonBanner, LemonDivider, LemonInput, LemonTextArea, Tooltip } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
 import { Form, Group } from 'kea-forms'
 import { ExperimentVariantNumber } from 'lib/components/SeriesGlyph'
@@ -15,14 +15,19 @@ import { experimentsLogic } from 'scenes/experiments/experimentsLogic'
 import { experimentLogic } from './experimentLogic'
 
 const ExperimentFormFields = (): JSX.Element => {
-    const { experiment, groupTypes, aggregationLabel } = useValues(experimentLogic)
+    const { experiment, groupTypes, aggregationLabel, hasPrimaryMetricSet } = useValues(experimentLogic)
     const { addVariant, removeExperimentGroup, setExperiment, createExperiment, setExperimentType } =
         useActions(experimentLogic)
     const { webExperimentsAvailable, unavailableFeatureFlagKeys } = useValues(experimentsLogic)
     const { groupsAccessStatus } = useValues(groupsAccessLogic)
 
     return (
         <div>
+            {hasPrimaryMetricSet && (
+                <LemonBanner type="info" className="my-4">
+                    Fill out the details below to create your experiment based off of the insight.
+                </LemonBanner>
+            )}
             <div className="space-y-8">
                 <div className="space-y-6 max-w-120">
                     <LemonField name="name" label="Name">

frontend/src/scenes/experiments/Metrics/MetricModal.tsx

@@ -4,7 +4,8 @@ import { useActions, useValues } from 'kea'
 import { ExperimentFunnelsQuery } from '~/queries/schema'
 import { Experiment, InsightType } from '~/types'
 
-import { experimentLogic, getDefaultFunnelsMetric, getDefaultTrendsMetric } from '../experimentLogic'
+import { experimentLogic } from '../experimentLogic'
+import { getDefaultFunnelsMetric, getDefaultTrendsMetric } from '../utils'
 import { FunnelsMetricForm } from './FunnelsMetricForm'
 import { TrendsMetricForm } from './TrendsMetricForm'
 

frontend/src/scenes/experiments/Metrics/MetricSourceModal.tsx

@@ -3,7 +3,8 @@ import { useActions, useValues } from 'kea'
 
 import { Experiment } from '~/types'
 
-import { experimentLogic, getDefaultFunnelsMetric } from '../experimentLogic'
+import { experimentLogic } from '../experimentLogic'
+import { getDefaultFunnelsMetric } from '../utils'
 
 export function MetricSourceModal({
     experimentId,

frontend/src/scenes/experiments/SharedMetrics/SharedMetric.tsx

@@ -6,10 +6,11 @@ import { SceneExport } from 'scenes/sceneTypes'
 import { themeLogic } from '~/layout/navigation-3000/themeLogic'
 import { NodeKind } from '~/queries/schema/schema-general'
 
-import { getDefaultFunnelsMetric, getDefaultTrendsMetric } from '../experimentLogic'
+import { getDefaultFunnelsMetric, getDefaultTrendsMetric } from '../utils'
 import { SharedFunnelsMetricForm } from './SharedFunnelsMetricForm'
 import { sharedMetricLogic } from './sharedMetricLogic'
 import { SharedTrendsMetricForm } from './SharedTrendsMetricForm'
+
 export const scene: SceneExport = {
     component: SharedMetric,
     logic: sharedMetricLogic,

frontend/src/scenes/experiments/SharedMetrics/sharedMetricLogic.tsx

@@ -7,7 +7,7 @@ import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
 
 import { UserBasicType } from '~/types'
 
-import { getDefaultTrendsMetric } from '../experimentLogic'
+import { getDefaultTrendsMetric } from '../utils'
 import type { sharedMetricLogicType } from './sharedMetricLogicType'
 import { sharedMetricsLogic } from './sharedMetricsLogic'
 

frontend/src/scenes/experiments/experimentLogic.tsx

@@ -3,7 +3,7 @@ import { forms } from 'kea-forms'
 import { loaders } from 'kea-loaders'
 import { router, urlToAction } from 'kea-router'
 import api from 'lib/api'
-import { EXPERIMENT_DEFAULT_DURATION, FunnelLayout } from 'lib/constants'
+import { EXPERIMENT_DEFAULT_DURATION } from 'lib/constants'
 import { dayjs } from 'lib/dayjs'
 import { lemonToast } from 'lib/lemon-ui/LemonToast/LemonToast'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
@@ -44,16 +44,13 @@ import {
     Breadcrumb,
     BreakdownAttributionType,
     BreakdownType,
-    ChartDisplayType,
     CohortType,
     CountPerActorMathType,
     DashboardType,
     Experiment,
     FeatureFlagType,
-    FunnelConversionWindowTimeUnit,
     FunnelExperimentVariant,
     FunnelStep,
-    FunnelVizType,
     InsightType,
     MultivariateFlagVariant,
     ProductKey,
@@ -623,6 +620,7 @@ export const experimentLogic = kea<experimentLogicType>([
                             },
                         }
                     )
+
                     if (response?.id) {
                         actions.updateExperiments(response)
                         actions.setEditExperiment(false)
@@ -1795,15 +1793,19 @@ export const experimentLogic = kea<experimentLogicType>([
         },
     })),
     urlToAction(({ actions, values }) => ({
-        '/experiments/:id': ({ id }, _, __, currentLocation, previousLocation) => {
+        '/experiments/:id': ({ id }, query, __, currentLocation, previousLocation) => {
             const didPathChange = currentLocation.initial || currentLocation.pathname !== previousLocation?.pathname
 
             actions.setEditExperiment(false)
 
             if (id && didPathChange) {
                 const parsedId = id === 'new' ? 'new' : parseInt(id)
                 if (parsedId === 'new') {
-                    actions.resetExperiment()
+                    actions.resetExperiment({
+                        ...NEW_EXPERIMENT,
+                        metrics: query.metric ? [query.metric] : [],
+                        name: query.name ?? '',
+                    })
                 }
                 if (parsedId !== 'new' && parsedId === values.experimentId) {
                     actions.loadExperiment()
@@ -1823,62 +1825,3 @@ export function percentageDistribution(variantCount: number): number[] {
     }
     return percentages
 }
-
-export function getDefaultTrendsMetric(): ExperimentTrendsQuery {
-    return {
-        kind: NodeKind.ExperimentTrendsQuery,
-        count_query: {
-            kind: NodeKind.TrendsQuery,
-            series: [
-                {
-                    kind: NodeKind.EventsNode,
-                    name: '$pageview',
-                    event: '$pageview',
-                },
-            ],
-            interval: 'day',
-            dateRange: {
-                date_from: dayjs().subtract(EXPERIMENT_DEFAULT_DURATION, 'day').format('YYYY-MM-DDTHH:mm'),
-                date_to: dayjs().endOf('d').format('YYYY-MM-DDTHH:mm'),
-                explicitDate: true,
-            },
-            trendsFilter: {
-                display: ChartDisplayType.ActionsLineGraph,
-            },
-            filterTestAccounts: true,
-        },
-    }
-}
-
-export function getDefaultFunnelsMetric(): ExperimentFunnelsQuery {
-    return {
-        kind: NodeKind.ExperimentFunnelsQuery,
-        funnels_query: {
-            kind: NodeKind.FunnelsQuery,
-            filterTestAccounts: true,
-            dateRange: {
-                date_from: dayjs().subtract(EXPERIMENT_DEFAULT_DURATION, 'day').format('YYYY-MM-DDTHH:mm'),
-                date_to: dayjs().endOf('d').format('YYYY-MM-DDTHH:mm'),
-                explicitDate: true,
-            },
-            series: [
-                {
-                    kind: NodeKind.EventsNode,
-                    event: '$pageview',
-                    name: '$pageview',
-                },
-                {
-                    kind: NodeKind.EventsNode,
-                    event: '$pageview',
-                    name: '$pageview',
-                },
-            ],
-            funnelsFilter: {
-                funnelVizType: FunnelVizType.Steps,
-                funnelWindowIntervalUnit: FunnelConversionWindowTimeUnit.Day,
-                funnelWindowInterval: 14,
-                layout: FunnelLayout.horizontal,
-            },
-        },
-    }
-}

frontend/src/scenes/experiments/utils.ts

@@ -1,13 +1,22 @@
 import { getSeriesColor } from 'lib/colors'
+import { EXPERIMENT_DEFAULT_DURATION, FunnelLayout } from 'lib/constants'
+import { dayjs } from 'lib/dayjs'
+import merge from 'lodash.merge'
 
 import { ExperimentFunnelsQuery, ExperimentTrendsQuery } from '~/queries/schema'
-import { AnyEntityNode, NodeKind } from '~/queries/schema/schema-general'
+import { AnyEntityNode, type FunnelsQuery, NodeKind, type TrendsQuery } from '~/queries/schema/schema-general'
+import { isFunnelsQuery, isTrendsQuery } from '~/queries/utils'
+import { isNodeWithSource, isValidQueryForExperiment } from '~/queries/utils'
 import {
+    ChartDisplayType,
     FeatureFlagFilters,
+    FunnelConversionWindowTimeUnit,
     FunnelTimeConversionMetrics,
+    FunnelVizType,
     InsightType,
     PropertyFilterType,
     PropertyOperator,
+    type QueryBasedInsightModel,
     TrendResult,
     UniversalFiltersGroupValue,
 } from '~/types'
@@ -177,3 +186,112 @@ export function getViewRecordingFilters(
     })
     return filters
 }
+
+export function getDefaultTrendsMetric(): ExperimentTrendsQuery {
+    return {
+        kind: NodeKind.ExperimentTrendsQuery,
+        count_query: {
+            kind: NodeKind.TrendsQuery,
+            series: [
+                {
+                    kind: NodeKind.EventsNode,
+                    name: '$pageview',
+                    event: '$pageview',
+                },
+            ],
+            interval: 'day',
+            dateRange: {
+                date_from: dayjs().subtract(EXPERIMENT_DEFAULT_DURATION, 'day').format('YYYY-MM-DDTHH:mm'),
+                date_to: dayjs().endOf('d').format('YYYY-MM-DDTHH:mm'),
+                explicitDate: true,
+            },
+            trendsFilter: {
+                display: ChartDisplayType.ActionsLineGraph,
+            },
+            filterTestAccounts: true,
+        },
+    }
+}
+
+export function getDefaultFunnelsMetric(): ExperimentFunnelsQuery {
+    return {
+        kind: NodeKind.ExperimentFunnelsQuery,
+        funnels_query: {
+            kind: NodeKind.FunnelsQuery,
+            filterTestAccounts: true,
+            dateRange: {
+                date_from: dayjs().subtract(EXPERIMENT_DEFAULT_DURATION, 'day').format('YYYY-MM-DDTHH:mm'),
+                date_to: dayjs().endOf('d').format('YYYY-MM-DDTHH:mm'),
+                explicitDate: true,
+            },
+            series: [
+                {
+                    kind: NodeKind.EventsNode,
+                    event: '$pageview',
+                    name: '$pageview',
+                },
+                {
+                    kind: NodeKind.EventsNode,
+                    event: '$pageview',
+                    name: '$pageview',
+                },
+            ],
+            funnelsFilter: {
+                funnelVizType: FunnelVizType.Steps,
+                funnelWindowIntervalUnit: FunnelConversionWindowTimeUnit.Day,
+                funnelWindowInterval: 14,
+                layout: FunnelLayout.horizontal,
+            },
+        },
+    }
+}
+
+export function getExperimentMetricFromInsight(
+    insight: QueryBasedInsightModel | null
+): ExperimentTrendsQuery | ExperimentFunnelsQuery | undefined {
+    if (!insight?.query || !isValidQueryForExperiment(insight?.query) || !isNodeWithSource(insight.query)) {
+        return undefined
+    }
+
+    const metricName = (insight?.name || insight?.derived_name) ?? undefined
+
+    if (isFunnelsQuery(insight.query.source)) {
+        const defaultFunnelsQuery = getDefaultFunnelsMetric().funnels_query
+
+        const funnelsQuery: FunnelsQuery = merge(defaultFunnelsQuery, {
+            series: insight.query.source.series,
+            funnelsFilter: {
+                funnelAggregateByHogQL: insight.query.source.funnelsFilter?.funnelAggregateByHogQL,
+                funnelWindowInterval: insight.query.source.funnelsFilter?.funnelWindowInterval,
+                funnelWindowIntervalUnit: insight.query.source.funnelsFilter?.funnelWindowIntervalUnit,
+                layout: insight.query.source.funnelsFilter?.layout,
+                breakdownAttributionType: insight.query.source.funnelsFilter?.breakdownAttributionType,
+                breakdownAttributionValue: insight.query.source.funnelsFilter?.breakdownAttributionValue,
+            },
+            filterTestAccounts: insight.query.source.filterTestAccounts,
+        })
+
+        return {
+            kind: NodeKind.ExperimentFunnelsQuery,
+            funnels_query: funnelsQuery,
+            name: metricName,
+        }
+    }
+
+    if (isTrendsQuery(insight.query.source)) {
+        const defaultTrendsQuery = getDefaultTrendsMetric().count_query
+
+        const trendsQuery: TrendsQuery = merge(defaultTrendsQuery, {
+            series: insight.query.source.series,
+            filterTestAccounts: insight.query.source.filterTestAccounts,
+        })
+
+        return {
+            kind: NodeKind.ExperimentTrendsQuery,
+            count_query: trendsQuery,
+            name: metricName,
+        }
+    }
+
+    return undefined
+}