feat(experiments): secondary metrics table

frontend/src/scenes/experiments/ExperimentNext.tsx

@@ -1,5 +1,6 @@
 import './Experiment.scss'
 
+import { LemonDivider } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
 
 import { ExperimentForm } from './ExperimentForm'
@@ -36,15 +37,17 @@ export function ExperimentView(): JSX.Element {
                         ) : experimentResults && experimentResults.insight ? (
                             <>
                                 <Overview />
-                                <ProgressBar />
-                                <Goal />
+                                <LemonDivider />
+                                <div className="flex">
+                                    <div className="w-1/2">
+                                        <Goal />
+                                    </div>
+
+                                    <div className="w-1/2 flex flex-col">
+                                        <ProgressBar />
+                                    </div>
+                                </div>
                                 <Results />
-                                <SecondaryMetricsTable
-                                    experimentId={experiment.id}
-                                    onMetricsChange={(metrics) => updateExperimentSecondaryMetrics(metrics)}
-                                    initialMetrics={experiment.secondary_metrics}
-                                    defaultAggregationType={experiment.parameters?.aggregation_group_type_index}
-                                />
                                 <ExperimentGoalModal experimentId={experimentId} />
                                 <ExperimentExposureModal experimentId={experimentId} />
                             </>
@@ -55,6 +58,12 @@ export function ExperimentView(): JSX.Element {
                                 {experiment.start_date && <NoResultsEmptyState />}
                             </>
                         )}
+                        <SecondaryMetricsTable
+                            experimentId={experiment.id}
+                            onMetricsChange={(metrics) => updateExperimentSecondaryMetrics(metrics)}
+                            initialMetrics={experiment.secondary_metrics}
+                            defaultAggregationType={experiment.parameters?.aggregation_group_type_index}
+                        />
                         <DistributionTable />
                         <ReleaseConditionsTable />
                     </>

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

@@ -204,8 +204,8 @@ export function Goal(): JSX.Element {
 
     return (
         <div>
-            <h2 className="font-semibold text-lg mb-1">Experiment goal</h2>
-            <div>
+            <h2 className="font-semibold text-lg mb-0">Experiment goal</h2>
+            <div className="text-muted text-xs">
                 This <b>{experimentInsightType === InsightType.FUNNELS ? 'funnel' : 'trend'}</b>{' '}
                 {experimentInsightType === InsightType.FUNNELS
                     ? 'experiment measures conversion through each step of the user journey.'

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

@@ -1,6 +1,5 @@
 import '../Experiment.scss'
 
-import { LemonDivider } from '@posthog/lemon-ui'
 import { useValues } from 'kea'
 import { getSeriesColor } from 'lib/colors'
 import { capitalizeFirstLetter } from 'lib/utils'
@@ -15,28 +14,18 @@ export function Overview(): JSX.Element {
         getIndexForVariant,
         experimentInsightType,
         sortedConversionRates,
-        highestProbabilityVariant,
+        getHighestProbabilityVariant,
         areResultsSignificant,
     } = useValues(experimentLogic)
 
-    function SignificanceText(): JSX.Element {
-        return (
-            <>
-                <span>Your results are&nbsp;</span>
-                <span className="font-semibold">{`${areResultsSignificant ? 'significant' : 'not significant'}`}.</span>
-            </>
-        )
-    }
-
-    if (experimentInsightType === InsightType.FUNNELS) {
-        const winningVariant = sortedConversionRates[0]
-        const secondBestVariant = sortedConversionRates[1]
-        const difference = winningVariant.conversionRate - secondBestVariant.conversionRate
+    function WinningVariantText(): JSX.Element {
+        if (experimentInsightType === InsightType.FUNNELS) {
+            const winningVariant = sortedConversionRates[0]
+            const secondBestVariant = sortedConversionRates[1]
+            const difference = winningVariant.conversionRate - secondBestVariant.conversionRate
 
-        return (
-            <div>
-                <h2 className="font-semibold text-lg">Summary</h2>
-                <div className="items-center inline-flex flex-wrap">
+            return (
+                <div className="items-center inline-flex">
                     <div
                         className="w-2 h-2 rounded-full mr-1"
                         // eslint-disable-next-line react/forbid-dom-props
@@ -57,20 +46,16 @@ export function Overview(): JSX.Element {
                     />
                     <span className="font-semibold">{capitalizeFirstLetter(secondBestVariant.key)}</span>
                     <span>).&nbsp;</span>
-                    <SignificanceText />
                 </div>
-            </div>
-        )
-    }
+            )
+        }
 
-    const index = getIndexForVariant(experimentResults, highestProbabilityVariant || '')
-    if (highestProbabilityVariant && index !== null && experimentResults) {
-        const { probability } = experimentResults
+        const highestProbabilityVariant = getHighestProbabilityVariant(experimentResults)
+        const index = getIndexForVariant(experimentResults, highestProbabilityVariant || '')
+        if (highestProbabilityVariant && index !== null && experimentResults) {
+            const { probability } = experimentResults
 
-        return (
-            <div>
-                <h2 className="font-semibold text-lg">Overview</h2>
-                <LemonDivider />
+            return (
                 <div className="items-center inline-flex">
                     <div
                         className="w-2 h-2 rounded-full mr-1"
@@ -85,11 +70,29 @@ export function Overview(): JSX.Element {
                         {`${(probability[highestProbabilityVariant] * 100).toFixed(2)}% probability`}&nbsp;
                     </span>
                     <span>of being best.&nbsp;</span>
-                    <SignificanceText />
                 </div>
-            </div>
+            )
+        }
+
+        return <></>
+    }
+
+    function SignificanceText(): JSX.Element {
+        return (
+            <>
+                <span>Your results are&nbsp;</span>
+                <span className="font-semibold">{`${areResultsSignificant ? 'significant' : 'not significant'}`}.</span>
+            </>
         )
     }
 
-    return <></>
+    return (
+        <div>
+            <h2 className="font-semibold text-lg">Summary</h2>
+            <div className="items-center inline-flex">
+                <WinningVariantText />
+                <SignificanceText />
+            </div>
+        </div>
+    )
 }

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

@@ -30,7 +30,12 @@ export function ProgressBar(): JSX.Element {
 
     return (
         <div>
-            <div className="mb-1 font-semibold">{`${
+            <h2 className="font-semibold text-lg mb-0">Data collection</h2>
+            <div className="text-muted text-xs">
+                Estimated target for the number of participants. Actual data may reveal significance earlier or later
+                than predicted.
+            </div>
+            <div className="mt-4 mb-1 font-semibold">{`${
                 experimentProgressPercent > 100 ? 100 : experimentProgressPercent.toFixed(2)
             }% complete`}</div>
             <LemonProgress