feat(experiments): detailed results for primary metrics

cypress/e2e/experiments.cy.ts

@@ -96,6 +96,7 @@ describe('Experiments', () => {
         cy.get('[data-attr="experiment-creation-date"]').contains('a few seconds ago').should('be.visible')
         cy.get('[data-attr="experiment-start-date"]').should('not.exist')
 
+        cy.wait(1000)
         cy.get('[data-attr="launch-experiment"]').first().click()
         cy.get('[data-attr="experiment-creation-date"]').should('not.exist')
         cy.get('[data-attr="experiment-start-date"]').contains('a few seconds ago').should('be.visible')
@@ -114,6 +115,7 @@ describe('Experiments', () => {
     it('move start date', () => {
         createExperimentInNewUi()
 
+        cy.wait(1000)
         cy.get('[data-attr="launch-experiment"]').first().click()
 
         cy.get('[data-attr="move-experiment-start-date"]').first().click()

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

@@ -6,6 +6,7 @@ import { WebExperimentImplementationDetails } from 'scenes/experiments/WebExperi
 
 import { ExperimentImplementationDetails } from '../ExperimentImplementationDetails'
 import { experimentLogic } from '../experimentLogic'
+import { PrimaryMetricModal } from '../Metrics/PrimaryMetricModal'
 import { MetricsView } from '../MetricsView/MetricsView'
 import {
     ExperimentLoadingAnimation,
@@ -129,6 +130,7 @@ export function ExperimentView(): JSX.Element {
                                 />
                             </>
                         )}
+                        <PrimaryMetricModal experimentId={experimentId} />
                         <DistributionModal experimentId={experimentId} />
                         <ReleaseConditionsModal experimentId={experimentId} />
                     </>

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

@@ -11,7 +11,6 @@ import { ExperimentFunnelsQuery, ExperimentTrendsQuery, FunnelsQuery, NodeKind,
 import { ActionFilter, AnyPropertyFilter, ChartDisplayType, Experiment, FilterType, InsightType } from '~/types'
 
 import { experimentLogic, getDefaultFilters, getDefaultFunnelsMetric } from '../experimentLogic'
-import { PrimaryMetricModal } from '../Metrics/PrimaryMetricModal'
 import { PrimaryTrendsExposureModal } from '../Metrics/PrimaryTrendsExposureModal'
 
 export function MetricDisplayTrends({ query }: { query: TrendsQuery | undefined }): JSX.Element {
@@ -341,7 +340,6 @@ export function Goal(): JSX.Element {
                         )}
                 </div>
             )}
-            <PrimaryMetricModal experimentId={experimentId} />
         </div>
     )
 }

frontend/src/scenes/experiments/MetricsView/DeltaChart.tsx

@@ -1,5 +1,5 @@
-import { IconActivity, IconPencil } from '@posthog/icons'
-import { LemonButton, LemonTag } from '@posthog/lemon-ui'
+import { IconActivity, IconGraph, IconPencil } from '@posthog/icons'
+import { LemonButton, LemonModal, LemonTag } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
 import { humanFriendlyNumber } from 'lib/utils'
 import { useEffect, useRef, useState } from 'react'
@@ -8,7 +8,7 @@ import { themeLogic } from '~/layout/navigation-3000/themeLogic'
 import { InsightType, TrendExperimentVariant } from '~/types'
 
 import { experimentLogic } from '../experimentLogic'
-import { VariantTag } from '../ExperimentView/components'
+import { ResultsQuery, VariantTag } from '../ExperimentView/components'
 import { NoResultEmptyState } from './NoResultEmptyState'
 
 function formatTickValue(value: number): string {
@@ -68,6 +68,7 @@ export function DeltaChart({
     const [tooltipData, setTooltipData] = useState<{ x: number; y: number; variant: string } | null>(null)
     const [emptyStateTooltipVisible, setEmptyStateTooltipVisible] = useState(true)
     const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 })
+    const [isModalOpen, setIsModalOpen] = useState(false)
 
     const BAR_HEIGHT = 8
     const BAR_PADDING = 10
@@ -101,6 +102,7 @@ export function DeltaChart({
 
     const metricTitlePanelWidth = '20%'
     const variantsPanelWidth = '10%'
+    const detailedResultsPanelWidth = '10%'
 
     const ticksSvgRef = useRef<SVGSVGElement>(null)
     const chartSvgRef = useRef<SVGSVGElement>(null)
@@ -184,7 +186,7 @@ export function DeltaChart({
                 {isFirstMetric && (
                     <svg
                         // eslint-disable-next-line react/forbid-dom-props
-                        style={{ height: `${ticksSvgHeight}px` }}
+                        style={{ height: `${ticksSvgHeight}px`, width: '100%' }}
                     />
                 )}
                 {isFirstMetric && <div className="w-full border-t border-border" />}
@@ -206,13 +208,12 @@ export function DeltaChart({
                     ))}
                 </div>
             </div>
-
             {/* SVGs container */}
             <div
                 // eslint-disable-next-line react/forbid-dom-props
                 style={{
                     display: 'inline-block',
-                    width: `calc(100% - ${metricTitlePanelWidth} - ${variantsPanelWidth})`,
+                    width: `calc(100% - ${metricTitlePanelWidth} - ${variantsPanelWidth} - ${detailedResultsPanelWidth})`,
                     verticalAlign: 'top',
                 }}
             >
@@ -407,15 +408,6 @@ export function DeltaChart({
                             y={chartHeight / 2 - 10} // Roughly center vertically
                             width="200"
                             height="20"
-                            onMouseEnter={(e) => {
-                                const rect = e.currentTarget.getBoundingClientRect()
-                                setTooltipPosition({
-                                    x: rect.left + rect.width / 2,
-                                    y: rect.top,
-                                })
-                                setEmptyStateTooltipVisible(true)
-                            }}
-                            onMouseLeave={() => setEmptyStateTooltipVisible(false)}
                         >
                             <div
                                 className="flex items-center justify-center text-muted cursor-default"
@@ -662,6 +654,63 @@ export function DeltaChart({
                     </div>
                 )}
             </div>
+            {/* Detailed results panel */}
+            <div
+                // eslint-disable-next-line react/forbid-dom-props
+                style={{
+                    display: 'inline-block',
+                    width: detailedResultsPanelWidth,
+                    verticalAlign: 'top',
+                }}
+            >
+                {isFirstMetric && (
+                    <svg
+                        // eslint-disable-next-line react/forbid-dom-props
+                        style={{ height: `${ticksSvgHeight}px`, width: '100%' }}
+                    />
+                )}
+                {isFirstMetric && <div className="w-full border-t border-border" />}
+                {result && (
+                    <div
+                        // eslint-disable-next-line react/forbid-dom-props
+                        style={{
+                            height: `${chartSvgHeight}px`,
+                            borderLeft: result ? `1px solid ${COLORS.BOUNDARY_LINES}` : 'none',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            padding: '0 4px',
+                        }}
+                    >
+                        <LemonButton
+                            type="secondary"
+                            size="xsmall"
+                            icon={<IconGraph />}
+                            onClick={() => setIsModalOpen(true)}
+                        >
+                            Detailed results
+                        </LemonButton>
+                    </div>
+                )}
+            </div>
+
+            <LemonModal
+                isOpen={isModalOpen}
+                onClose={() => setIsModalOpen(false)}
+                width={1200}
+                title={`Results for ${metric.name || 'Untitled metric'}`}
+                footer={
+                    <LemonButton
+                        form="secondary-metric-modal-form"
+                        type="secondary"
+                        onClick={() => setIsModalOpen(false)}
+                    >
+                        Close
+                    </LemonButton>
+                }
+            >
+                <ResultsQuery targetResults={result} showTable={true} />
+            </LemonModal>
         </div>
     )
 }