feat: create experiment from a funnel

frontend/src/queries/utils.ts

@@ -507,3 +507,10 @@ 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) || (isTrendsQuery(query.source) && query.source.series.length === 1))
+    )
+}

frontend/src/scenes/experiments/experimentLogic.tsx

@@ -10,6 +10,7 @@
 import { hasFormErrors, toParams } from 'lib/utils'
 import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
 import { addProjectIdIfMissing } from 'lib/utils/router-utils'
+import merge from 'lodash.merge'
 import {
     indexToVariantKeyFeatureFlagPayloads,
     variantKeyToIndexFeatureFlagPayloads,
@@ -18,6 +19,7 @@
 import { featureFlagsLogic } from 'scenes/feature-flags/featureFlagsLogic'
 import { funnelDataLogic } from 'scenes/funnels/funnelDataLogic'
 import { insightDataLogic } from 'scenes/insights/insightDataLogic'
+import { insightsApi } from 'scenes/insights/utils/api'
 import { cleanFilters, getDefaultEvent } from 'scenes/insights/utils/cleanFilters'
 import { projectLogic } from 'scenes/projectLogic'
 import { sceneLogic } from 'scenes/sceneLogic'
@@ -35,10 +37,14 @@
     ExperimentFunnelsQuery,
     ExperimentSignificanceCode,
     ExperimentTrendsQuery,
+    type FunnelsQuery,
     InsightQueryNode,
     InsightVizNode,
     NodeKind,
+    type TrendsQuery,
 } from '~/queries/schema/schema-general'
+import { isFunnelsQuery, isTrendsQuery } from '~/queries/utils'
+import { isNodeWithSource, isValidQueryForExperiment } from '~/queries/utils'
 import {
     Breadcrumb,
     BreakdownAttributionType,
@@ -55,10 +61,12 @@
     FunnelExperimentVariant,
     FunnelStep,
     FunnelVizType,
+    type InsightShortId,
     InsightType,
     MultivariateFlagVariant,
     ProductKey,
     PropertyMathType,
+    type QueryBasedInsightModel,
     TrendExperimentVariant,
     TrendResult,
     TrendsFilterType,
@@ -591,6 +599,10 @@
                 actions.touchExperimentField(`parameters.feature_flag_variants.${i}.key`)
             )
 
+            const insight = values.insight as QueryBasedInsightModel | null
+
+            const experimentMetric = getExperimentMetricFromInsight(insight)
+
             if (hasFormErrors(values.experimentErrors)) {
                 return
             }
@@ -618,6 +630,7 @@
                                 recommended_sample_size: recommendedSampleSize,
                                 minimum_detectable_effect: minimumDetectableEffect,
                             },
+                            metrics: experimentMetric ? [experimentMetric] : [],
                             ...(!draft && { start_date: dayjs() }),
                             // backwards compatibility: Remove any global properties set on the experiment.
                             // These were used to change feature flag targeting, but this is controlled directly
@@ -630,6 +643,7 @@
                             },
                         }
                     )
+
                     if (response?.id) {
                         actions.updateExperiments(response)
                         actions.setEditExperiment(false)
@@ -646,6 +660,7 @@
                             minimum_detectable_effect: minimumDetectableEffect,
                         },
                         ...(!draft && { start_date: dayjs() }),
+                        metrics: experimentMetric ? [experimentMetric] : [],
                     })
                     if (response) {
                         actions.reportExperimentCreated(response)
@@ -1034,6 +1049,12 @@
                 return response
             },
         },
+        insight: {
+            loadInsight: async (shortId: InsightShortId): Promise<QueryBasedInsightModel | null> => {
+                const insight = await insightsApi.getByShortId(shortId, undefined, 'async')
+                return insight
+            },
+        },
         metricResults: [
             null as (CachedExperimentTrendsQueryResponse | CachedExperimentFunnelsQueryResponse | null)[] | null,
             {
@@ -1048,7 +1069,7 @@
                         metrics = [...metrics, ...sharedMetrics]
                     }
 
-                    return (await Promise.all(
+                    return await Promise.all(
                         metrics.map(async (metric, index) => {
                             try {
                                 const queryWithExperimentId = {
@@ -1075,7 +1096,7 @@
                                 return null
                             }
                         })
-                    )) as (CachedExperimentTrendsQueryResponse | CachedExperimentFunnelsQueryResponse | null)[]
+                    )
                 },
             },
         ],
@@ -1093,7 +1114,7 @@
                         metrics = [...metrics, ...sharedMetrics]
                     }
 
-                    return (await Promise.all(
+                    return await Promise.all(
                         metrics.map(async (metric, index) => {
                             try {
                                 const queryWithExperimentId = {
@@ -1120,7 +1141,7 @@
                                 return null
                             }
                         })
-                    )) as (CachedExperimentTrendsQueryResponse | CachedExperimentFunnelsQueryResponse | null)[]
+                    )
                 },
             },
         ],
@@ -1812,19 +1833,26 @@
         },
     })),
     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,
+                        name: query.name ?? '',
+                    })
                 }
                 if (parsedId !== 'new' && parsedId === values.experimentId) {
                     actions.loadExperiment()
                 }
+
+                if (query.insight) {
+                    actions.loadInsight(query.insight as InsightShortId)
+                }
             }
         },
     })),
@@ -1947,3 +1975,52 @@
         },
     }
 }
+
+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,
+            },
+            filterTestAccounts: insight.query.source.filterTestAccounts,
+            aggregation_group_type_index: insight.query.source.aggregation_group_type_index,
+        })
+
+        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
+}

frontend/src/scenes/funnels/FunnelCanvasLabel.tsx

@@ -1,18 +1,20 @@
-import { IconInfo } from '@posthog/icons'
-import { Link } from '@posthog/lemon-ui'
+import { IconInfo, IconTestTube } from '@posthog/icons'
+import { LemonButton, Link } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
 import { Tooltip } from 'lib/lemon-ui/Tooltip'
 import { humanFriendlyDuration, percentage } from 'lib/utils'
 import React from 'react'
 import { insightLogic } from 'scenes/insights/insightLogic'
 import { FunnelStepsPicker } from 'scenes/insights/views/Funnels/FunnelStepsPicker'
+import { urls } from 'scenes/urls'
 
 import { FunnelVizType } from '~/types'
 
 import { funnelDataLogic } from './funnelDataLogic'
 
 export function FunnelCanvasLabel(): JSX.Element | null {
-    const { insightProps } = useValues(insightLogic)
+    const { insightProps, insight, supportsCreatingExperiment } = useValues(insightLogic)
+
     const { conversionMetrics, aggregationTargetLabel, funnelsFilter } = useValues(funnelDataLogic(insightProps))
     const { updateInsightFilter } = useActions(funnelDataLogic(insightProps))
 
@@ -66,6 +68,24 @@ export function FunnelCanvasLabel(): JSX.Element | null {
                   </>,
               ]
             : []),
+
+        ...(supportsCreatingExperiment
+            ? [
+                  <LemonButton
+                      key="run-experiment"
+                      icon={<IconTestTube />}
+                      type="secondary"
+                      data-attr="create-experiment-from-insight"
+                      size="xsmall"
+                      to={urls.experiment('new', {
+                          insight: insight.short_id ?? undefined,
+                          name: (insight.name || insight.derived_name) ?? undefined,
+                      })}
+                  >
+                      Run Experiment
+                  </LemonButton>,
+              ]
+            : []),
     ]
 
     return (

frontend/src/scenes/insights/InsightPageHeader.tsx

@@ -366,7 +366,6 @@ export function InsightPageHeader({ insightLogicProps }: { insightLogicProps: In
                                 <AddToDashboard insight={insight} setOpenModal={setAddToDashboardModalOpenModal} />
                             </>
                         )}
-
                         {insightMode !== ItemMode.Edit ? (
                             canEditInsight && (
                                 <LemonButton

frontend/src/scenes/insights/insightLogic.tsx

@@ -22,6 +22,7 @@
 import { insightsModel } from '~/models/insightsModel'
 import { tagsModel } from '~/models/tagsModel'
 import { DashboardFilter, HogQLVariable, Node } from '~/queries/schema'
+import { isValidQueryForExperiment } from '~/queries/utils'
 import { InsightLogicProps, InsightShortId, ItemMode, QueryBasedInsightModel, SetInsightOptions } from '~/types'
 
 import { teamLogic } from '../teamLogic'
@@ -317,6 +318,7 @@
             },
         ],
         showPersonsModal: [() => [(s) => s.query], (query) => !query || !query.hidePersonsModal],
+        supportsCreatingExperiment: [(s) => [s.insight], (insight) => isValidQueryForExperiment(insight.query)],
     }),
     listeners(({ actions, values }) => ({
         saveInsight: async ({ redirectToViewMode }) => {

frontend/src/scenes/urls.ts

@@ -1,5 +1,6 @@
 import { combineUrl } from 'kea-router'
 import { AlertType } from 'lib/components/Alerts/types'
+import { toParams } from 'lib/utils'
 import { getCurrentTeamId } from 'lib/utils/getAppContext'
 
 import { ExportOptions } from '~/exporter/types'
@@ -159,7 +160,13 @@ export const urls = {
         `/groups/${groupTypeIndex}/${encode ? encodeURIComponent(groupKey) : groupKey}${tab ? `/${tab}` : ''}`,
     cohort: (id: string | number): string => `/cohorts/${id}`,
     cohorts: (): string => '/cohorts',
-    experiment: (id: string | number): string => `/experiments/${id}`,
+    experiment: (
+        id: string | number,
+        options?: {
+            insight?: string
+            name?: string
+        }
+    ): string => `/experiments/${id}${options ? `?${toParams(options)}` : ''}`,
     experiments: (): string => '/experiments',
     experimentsSharedMetrics: (): string => '/experiments/shared-metrics',
     experimentsSharedMetric: (id: string | number): string => `/experiments/shared-metrics/${id}`,