feat(experiments): support multiple primary metrics

frontend/src/scenes/experiments/ExperimentView/ExperimentView.tsx

@@ -2,11 +2,13 @@ import '../Experiment.scss'
 
 import { LemonDivider, LemonTabs } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
+import { FEATURE_FLAGS } from 'lib/constants'
 import { PostHogFeature } from 'posthog-js/react'
 import { WebExperimentImplementationDetails } from 'scenes/experiments/WebExperimentImplementationDetails'
 
 import { ExperimentImplementationDetails } from '../ExperimentImplementationDetails'
 import { experimentLogic } from '../experimentLogic'
+import { MetricsView } from '../MetricsView/MetricsView'
 import {
     ExperimentLoadingAnimation,
     LoadingState,
@@ -25,7 +27,7 @@ import { Results } from './Results'
 import { SecondaryMetricsTable } from './SecondaryMetricsTable'
 
 const ResultsTab = (): JSX.Element => {
-    const { experiment, experimentResults } = useValues(experimentLogic)
+    const { experiment, experimentResults, featureFlags } = useValues(experimentLogic)
 
     const hasResultsInsight = experimentResults && experimentResults.insight
 
@@ -49,6 +51,7 @@ const ResultsTab = (): JSX.Element => {
                     )}
                 </>
             )}
+            {featureFlags[FEATURE_FLAGS.EXPERIMENTS_MULTIPLE_METRICS] && <MetricsView />}
             <SecondaryMetricsTable experimentId={experiment.id} />
         </div>
     )

frontend/src/scenes/experiments/ExperimentView/Goal.tsx

@@ -246,8 +246,7 @@ export function ExposureMetric({ experimentId }: { experimentId: Experiment['id'
 export function Goal(): JSX.Element {
     const { experiment, experimentId, getMetricType, experimentMathAggregationForTrends, hasGoalSet, featureFlags } =
         useValues(experimentLogic)
-    const { setExperiment, loadExperiment } = useActions(experimentLogic)
-    const [isModalOpen, setIsModalOpen] = useState(false)
+    const { setExperiment, openPrimaryMetricModal } = useActions(experimentLogic)
     const metricType = getMetricType(0)
 
     // :FLAG: CLEAN UP AFTER MIGRATION
@@ -298,7 +297,7 @@ export function Goal(): JSX.Element {
                                     filters: getDefaultFilters(InsightType.FUNNELS, undefined),
                                 })
                             }
-                            setIsModalOpen(true)
+                            openPrimaryMetricModal(0)
                         }}
                     >
                         Add goal
@@ -324,7 +323,7 @@ export function Goal(): JSX.Element {
                         ) : (
                             <MetricDisplayOld filters={experiment.filters} />
                         )}
-                        <LemonButton size="xsmall" type="secondary" onClick={() => setIsModalOpen(true)}>
+                        <LemonButton size="xsmall" type="secondary" onClick={() => openPrimaryMetricModal(0)}>
                             Change goal
                         </LemonButton>
                     </div>
@@ -342,14 +341,7 @@ export function Goal(): JSX.Element {
                         )}
                 </div>
             )}
-            <PrimaryMetricModal
-                experimentId={experimentId}
-                isOpen={isModalOpen}
-                onClose={() => {
-                    setIsModalOpen(false)
-                    loadExperiment()
-                }}
-            />
+            <PrimaryMetricModal experimentId={experimentId} />
         </div>
     )
 }

frontend/src/scenes/experiments/ExperimentView/Results.tsx

@@ -1,21 +1,18 @@
 import '../Experiment.scss'
 
 import { useValues } from 'kea'
-import { FEATURE_FLAGS } from 'lib/constants'
 
 import { experimentLogic } from '../experimentLogic'
 import { ResultsHeader, ResultsQuery } from './components'
-import { DeltaViz } from './DeltaViz'
 import { SummaryTable } from './SummaryTable'
 
 export function Results(): JSX.Element {
-    const { experimentResults, featureFlags } = useValues(experimentLogic)
+    const { experimentResults } = useValues(experimentLogic)
 
     return (
         <div>
             <ResultsHeader />
             <SummaryTable />
-            {featureFlags[FEATURE_FLAGS.EXPERIMENTS_MULTIPLE_METRICS] && <DeltaViz />}
             <ResultsQuery targetResults={experimentResults} showTable={true} />
         </div>
     )

frontend/src/scenes/experiments/ExperimentView/SecondaryMetricsTable.tsx

@@ -332,7 +332,7 @@ const AddSecondaryMetricButton = ({
         <LemonButton
             icon={<IconPlus />}
             type="secondary"
-            size="small"
+            size="xsmall"
             onClick={() => {
                 const newMetricsSecondary = [...experiment.metrics_secondary, getDefaultFunnelsMetric()]
                 setExperiment({

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

@@ -25,11 +25,15 @@ import {
 } from './Selectors'
 export function PrimaryGoalFunnels(): JSX.Element {
     const { currentTeam } = useValues(teamLogic)
-    const { experiment, isExperimentRunning, featureFlags } = useValues(experimentLogic)
+    const { experiment, isExperimentRunning, featureFlags, editingPrimaryMetricIndex } = useValues(experimentLogic)
     const { setExperiment, setFunnelsMetric } = useActions(experimentLogic)
     const hasFilters = (currentTeam?.test_account_filters || []).length > 0
 
-    const metricIdx = 0
+    if (!editingPrimaryMetricIndex && editingPrimaryMetricIndex !== 0) {
+        return <></>
+    }
+
+    const metricIdx = editingPrimaryMetricIndex
     const currentMetric = experiment.metrics[metricIdx] as ExperimentFunnelsQuery
 
     const actionFilterProps = {
@@ -261,7 +265,7 @@ export function PrimaryGoalFunnels(): JSX.Element {
                     checked={(() => {
                         // :FLAG: CLEAN UP AFTER MIGRATION
                         if (featureFlags[FEATURE_FLAGS.EXPERIMENTS_HOGQL]) {
-                            const val = (experiment.metrics[0] as ExperimentFunnelsQuery).funnels_query
+                            const val = (experiment.metrics[metricIdx] as ExperimentFunnelsQuery).funnels_query
                                 ?.filterTestAccounts
                             return hasFilters ? !!val : false
                         }

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

@@ -17,12 +17,16 @@ import { experimentLogic } from '../experimentLogic'
 import { commonActionFilterProps } from './Selectors'
 
 export function PrimaryGoalTrends(): JSX.Element {
-    const { experiment, isExperimentRunning, featureFlags } = useValues(experimentLogic)
+    const { experiment, isExperimentRunning, featureFlags, editingPrimaryMetricIndex } = useValues(experimentLogic)
     const { setExperiment, setTrendsMetric } = useActions(experimentLogic)
     const { currentTeam } = useValues(teamLogic)
     const hasFilters = (currentTeam?.test_account_filters || []).length > 0
 
-    const metricIdx = 0
+    if (!editingPrimaryMetricIndex && editingPrimaryMetricIndex !== 0) {
+        return <></>
+    }
+
+    const metricIdx = editingPrimaryMetricIndex
     const currentMetric = experiment.metrics[metricIdx] as ExperimentTrendsQuery
 
     return (

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

@@ -16,11 +16,17 @@ import { experimentLogic } from '../experimentLogic'
 import { commonActionFilterProps } from './Selectors'
 
 export function PrimaryGoalTrendsExposure(): JSX.Element {
-    const { experiment, isExperimentRunning, featureFlags } = useValues(experimentLogic)
+    const { experiment, isExperimentRunning, featureFlags, editingPrimaryMetricIndex } = useValues(experimentLogic)
     const { setExperiment, setTrendsExposureMetric } = useActions(experimentLogic)
     const { currentTeam } = useValues(teamLogic)
     const hasFilters = (currentTeam?.test_account_filters || []).length > 0
-    const currentMetric = experiment.metrics[0] as ExperimentTrendsQuery
+
+    if (!editingPrimaryMetricIndex && editingPrimaryMetricIndex !== 0) {
+        return <></>
+    }
+
+    const metricIdx = editingPrimaryMetricIndex
+    const currentMetric = experiment.metrics[metricIdx] as ExperimentTrendsQuery
 
     return (
         <>
@@ -43,7 +49,7 @@ export function PrimaryGoalTrendsExposure(): JSX.Element {
                         )
 
                         setTrendsExposureMetric({
-                            metricIdx: 0,
+                            metricIdx,
                             series,
                         })
                     } else {
@@ -109,7 +115,7 @@ export function PrimaryGoalTrendsExposure(): JSX.Element {
                         // :FLAG: CLEAN UP AFTER MIGRATION
                         if (featureFlags[FEATURE_FLAGS.EXPERIMENTS_HOGQL]) {
                             setTrendsExposureMetric({
-                                metricIdx: 0,
+                                metricIdx,
                                 filterTestAccounts: checked,
                             })
                         } else {

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

@@ -9,19 +9,24 @@ import { experimentLogic, getDefaultFilters, getDefaultFunnelsMetric, getDefault
 import { PrimaryGoalFunnels } from '../Metrics/PrimaryGoalFunnels'
 import { PrimaryGoalTrends } from '../Metrics/PrimaryGoalTrends'
 
-export function PrimaryMetricModal({
-    experimentId,
-    isOpen,
-    onClose,
-}: {
-    experimentId: Experiment['id']
-    isOpen: boolean
-    onClose: () => void
-}): JSX.Element {
-    const { experiment, experimentLoading, getMetricType, featureFlags } = useValues(experimentLogic({ experimentId }))
-    const { updateExperimentGoal, setExperiment } = useActions(experimentLogic({ experimentId }))
+export function PrimaryMetricModal({ experimentId }: { experimentId: Experiment['id'] }): JSX.Element {
+    const {
+        experiment,
+        experimentLoading,
+        getMetricType,
+        featureFlags,
+        isPrimaryMetricModalOpen,
+        editingPrimaryMetricIndex,
+    } = useValues(experimentLogic({ experimentId }))
+    const { updateExperimentGoal, setExperiment, closePrimaryMetricModal } = useActions(
+        experimentLogic({ experimentId })
+    )
+
+    if (!editingPrimaryMetricIndex && editingPrimaryMetricIndex !== 0) {
+        return <></>
+    }
 
-    const metricIdx = 0
+    const metricIdx = editingPrimaryMetricIndex
     const metricType = getMetricType(metricIdx)
 
     let funnelStepsLength = 0
@@ -34,31 +39,50 @@ export function PrimaryMetricModal({
 
     return (
         <LemonModal
-            isOpen={isOpen}
-            onClose={onClose}
+            isOpen={isPrimaryMetricModalOpen}
+            onClose={closePrimaryMetricModal}
             width={1000}
             title="Change experiment goal"
             footer={
-                <div className="flex items-center gap-2">
-                    <LemonButton form="edit-experiment-goal-form" type="secondary" onClick={onClose}>
-                        Cancel
-                    </LemonButton>
+                <div className="flex items-center w-full">
                     <LemonButton
-                        disabledReason={
-                            metricType === InsightType.FUNNELS &&
-                            funnelStepsLength < 2 &&
-                            'The experiment needs at least two funnel steps.'
-                        }
-                        form="edit-experiment-goal-form"
+                        type="secondary"
+                        status="danger"
                         onClick={() => {
+                            const newMetrics = experiment.metrics.filter((_, idx) => idx !== metricIdx)
+                            setExperiment({
+                                metrics: newMetrics,
+                            })
                             updateExperimentGoal(experiment.filters)
                         }}
-                        type="primary"
-                        loading={experimentLoading}
-                        data-attr="create-annotation-submit"
                     >
-                        Save
+                        Delete
                     </LemonButton>
+                    <div className="flex items-center gap-2 ml-auto">
+                        <LemonButton
+                            form="edit-experiment-goal-form"
+                            type="secondary"
+                            onClick={closePrimaryMetricModal}
+                        >
+                            Cancel
+                        </LemonButton>
+                        <LemonButton
+                            disabledReason={
+                                metricType === InsightType.FUNNELS &&
+                                funnelStepsLength < 2 &&
+                                'The experiment needs at least two funnel steps.'
+                            }
+                            form="edit-experiment-goal-form"
+                            onClick={() => {
+                                updateExperimentGoal(experiment.filters)
+                            }}
+                            type="primary"
+                            loading={experimentLoading}
+                            data-attr="create-annotation-submit"
+                        >
+                            Save
+                        </LemonButton>
+                    </div>
                 </div>
             }
         >