From 2e56f061e5c52535a0893f4befe61f97efa10866 Mon Sep 17 00:00:00 2001
From: Juraj Majerik <juro.majerik@gmail.com>
Date: Fri, 20 Dec 2024 10:34:51 +0100
Subject: [PATCH] update

---
 .../experiments/MetricsView/DeltaChart.tsx    | 75 +++++++++++++++----
 .../experiments/MetricsView/MetricsView.tsx   |  2 +-
 2 files changed, 60 insertions(+), 17 deletions(-)

diff --git a/frontend/src/scenes/experiments/MetricsView/DeltaChart.tsx b/frontend/src/scenes/experiments/MetricsView/DeltaChart.tsx
index 20e4c65d2cd81..08b475148375a 100644
--- a/frontend/src/scenes/experiments/MetricsView/DeltaChart.tsx
+++ b/frontend/src/scenes/experiments/MetricsView/DeltaChart.tsx
@@ -1,5 +1,5 @@
-import { IconActivity, IconGraph, IconPencil } from '@posthog/icons'
-import { LemonButton, LemonModal, LemonTag } from '@posthog/lemon-ui'
+import { IconActivity, IconGraph, IconMinus, IconPencil, IconTrending } from '@posthog/icons'
+import { LemonButton, LemonModal, LemonTag, LemonTagType, Tooltip } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
 import { humanFriendlyNumber } from 'lib/utils'
 import { useEffect, useRef, useState } from 'react'
@@ -70,8 +70,21 @@ export function DeltaChart({
     const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 })
     const [isModalOpen, setIsModalOpen] = useState(false)
 
-    const BAR_HEIGHT = 8
-    const BAR_PADDING = 10
+    const getScaleAddition = (variantCount: number): number => {
+        if (variantCount < 3) {
+            return 6
+        }
+        if (variantCount < 4) {
+            return 3
+        }
+        if (variantCount < 5) {
+            return 1
+        }
+        return 0
+    }
+
+    const BAR_HEIGHT = 8 + getScaleAddition(variants.length)
+    const BAR_PADDING = 10 + getScaleAddition(variants.length)
     const TICK_PANEL_HEIGHT = 20
     const VIEW_BOX_WIDTH = 800
     const HORIZONTAL_PADDING = 20
@@ -102,7 +115,7 @@ export function DeltaChart({
 
     const metricTitlePanelWidth = '20%'
     const variantsPanelWidth = '10%'
-    const detailedResultsPanelWidth = '10%'
+    const detailedResultsPanelWidth = '125px'
 
     const ticksSvgRef = useRef<SVGSVGElement>(null)
     const chartSvgRef = useRef<SVGSVGElement>(null)
@@ -677,19 +690,20 @@ export function DeltaChart({
                             height: `${chartSvgHeight}px`,
                             borderLeft: result ? `1px solid ${COLORS.BOUNDARY_LINES}` : 'none',
                             display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                            padding: '0 4px',
+                            flexDirection: 'column',
                         }}
                     >
-                        <LemonButton
-                            type="secondary"
-                            size="xsmall"
-                            icon={<IconGraph />}
-                            onClick={() => setIsModalOpen(true)}
-                        >
-                            Detailed results
-                        </LemonButton>
+                        <SignificanceHighlight metricIndex={metricIndex} />
+                        <div className="flex-1 flex items-center justify-center">
+                            <LemonButton
+                                type="secondary"
+                                size="xsmall"
+                                icon={<IconGraph />}
+                                onClick={() => setIsModalOpen(true)}
+                            >
+                                Detailed results
+                            </LemonButton>
+                        </div>
                     </div>
                 )}
             </div>
@@ -714,3 +728,32 @@ export function DeltaChart({
         </div>
     )
 }
+
+function SignificanceHighlight({ metricIndex = 0 }: { metricIndex?: number }): JSX.Element {
+    const { areResultsSignificant, significanceDetails } = useValues(experimentLogic)
+    const result: { color: LemonTagType; label: string } = areResultsSignificant(metricIndex)
+        ? { color: 'success', label: 'Significant' }
+        : { color: 'primary', label: 'Not significant' }
+
+    const inner = areResultsSignificant(metricIndex) ? (
+        <div className="bg-success-highlight text-success p-1 flex items-center gap-1">
+            <IconTrending fontSize={20} fontWeight={600} />
+            <span className="text-xs font-semibold">{result.label}</span>
+        </div>
+    ) : (
+        <div className="bg-warning-highlight text-warning p-1 flex items-center gap-1">
+            <IconMinus fontSize={20} fontWeight={600} />
+            <span className="text-xs font-semibold">{result.label}</span>
+        </div>
+    )
+
+    const details = significanceDetails(metricIndex)
+
+    return details ? (
+        <Tooltip title={details}>
+            <div className="cursor-pointer">{inner}</div>
+        </Tooltip>
+    ) : (
+        <div>{inner}</div>
+    )
+}
diff --git a/frontend/src/scenes/experiments/MetricsView/MetricsView.tsx b/frontend/src/scenes/experiments/MetricsView/MetricsView.tsx
index 3d56a7681b3ec..1e50c3d5369f3 100644
--- a/frontend/src/scenes/experiments/MetricsView/MetricsView.tsx
+++ b/frontend/src/scenes/experiments/MetricsView/MetricsView.tsx
@@ -126,7 +126,7 @@ export function MetricsView(): JSX.Element {
             </div>
             {metrics.length > 0 ? (
                 <div className="w-full overflow-x-auto">
-                    <div className="min-w-[800px]">
+                    <div className="min-w-[1000px]">
                         {metrics.map((metric, metricIndex) => {
                             const result = metricResults?.[metricIndex]
                             const isFirstMetric = metricIndex === 0