From 4d3d6d25aaac649c914e55d04f31a78e4283c663 Mon Sep 17 00:00:00 2001
From: Juraj Majerik <juro.majerik@gmail.com>
Date: Thu, 22 Aug 2024 17:27:03 +0200
Subject: [PATCH] chore(experiments): Trend results UI tweaks (#24482)

---
 .../scenes/experiments/ExperimentResult.tsx   | 15 ++----
 .../ExperimentView/SummaryTable.tsx           | 30 ++++++------
 .../scenes/experiments/experimentLogic.tsx    | 49 +++----------------
 3 files changed, 25 insertions(+), 69 deletions(-)

diff --git a/frontend/src/scenes/experiments/ExperimentResult.tsx b/frontend/src/scenes/experiments/ExperimentResult.tsx
index 69d0cc9aab959..4e29cfff81362 100644
--- a/frontend/src/scenes/experiments/ExperimentResult.tsx
+++ b/frontend/src/scenes/experiments/ExperimentResult.tsx
@@ -1,7 +1,7 @@
 import './Experiment.scss'
 
-import { IconArchive, IconInfo } from '@posthog/icons'
-import { LemonTable, Tooltip } from '@posthog/lemon-ui'
+import { IconArchive } from '@posthog/icons'
+import { LemonTable } from '@posthog/lemon-ui'
 import { useValues } from 'kea'
 import { EntityFilterInfo } from 'lib/components/EntityFilterInfo'
 import { FunnelLayout } from 'lib/constants'
@@ -31,7 +31,6 @@ export function ExperimentResult({ secondaryMetricId }: ExperimentResultProps):
         secondaryMetricResultsLoading,
         conversionRateForVariant,
         getIndexForVariant,
-        areTrendResultsConfusing,
         sortedExperimentResultVariants,
         experimentMathAggregationForTrends,
     } = useValues(experimentLogic)
@@ -166,15 +165,7 @@ export function ExperimentResult({ secondaryMetricId }: ExperimentResultProps):
                                                             </span>
                                                         </div>
                                                     </b>{' '}
-                                                    {countDataForVariant(targetResults, variant)}{' '}
-                                                    {areTrendResultsConfusing && idx === 0 && (
-                                                        <Tooltip
-                                                            placement="right"
-                                                            title="It might seem confusing that the best variant has lower absolute count, but this can happen when fewer people are exposed to this variant, so its relative count is higher."
-                                                        >
-                                                            <IconInfo className="py-1 px-0.5" />
-                                                        </Tooltip>
-                                                    )}
+                                                    {countDataForVariant(targetResults, variant)}
                                                 </div>
                                                 <div className="flex">
                                                     <b className="pr-1">Exposure:</b>{' '}
diff --git a/frontend/src/scenes/experiments/ExperimentView/SummaryTable.tsx b/frontend/src/scenes/experiments/ExperimentView/SummaryTable.tsx
index 2bc468cd7ee30..c97a94127bcd8 100644
--- a/frontend/src/scenes/experiments/ExperimentView/SummaryTable.tsx
+++ b/frontend/src/scenes/experiments/ExperimentView/SummaryTable.tsx
@@ -5,6 +5,7 @@ import { LemonTable, LemonTableColumns, Tooltip } from '@posthog/lemon-ui'
 import { useValues } from 'kea'
 import { EntityFilterInfo } from 'lib/components/EntityFilterInfo'
 import { LemonProgress } from 'lib/lemon-ui/LemonProgress'
+import { humanFriendlyNumber } from 'lib/utils'
 
 import {
     _FunnelExperimentResults,
@@ -27,7 +28,6 @@ export function SummaryTable(): JSX.Element {
         conversionRateForVariant,
         experimentMathAggregationForTrends,
         countDataForVariant,
-        areTrendResultsConfusing,
         getHighestProbabilityVariant,
     } = useValues(experimentLogic)
 
@@ -64,27 +64,25 @@ export function SummaryTable(): JSX.Element {
                     </span>
                 </div>
             ),
-            render: function Key(_, item, index): JSX.Element {
-                return (
-                    <div className="flex">
-                        {countDataForVariant(experimentResults, item.key)}{' '}
-                        {areTrendResultsConfusing && index === 0 && (
-                            <Tooltip
-                                placement="right"
-                                title="It might seem confusing that the best variant has lower absolute count, but this can happen when fewer people are exposed to this variant, so its relative count is higher."
-                            >
-                                <IconInfo className="py-1 px-0.5 text-lg" />
-                            </Tooltip>
-                        )}
-                    </div>
-                )
+            render: function Key(_, variant): JSX.Element {
+                const count = countDataForVariant(experimentResults, variant.key)
+                if (!count) {
+                    return <>—</>
+                }
+
+                return <div className="flex">{humanFriendlyNumber(count)}</div>
             },
         })
         columns.push({
             key: 'exposure',
             title: 'Exposure',
             render: function Key(_, variant): JSX.Element {
-                return <div>{exposureCountDataForVariant(experimentResults, variant.key)}</div>
+                const exposure = exposureCountDataForVariant(experimentResults, variant.key)
+                if (!exposure) {
+                    return <>—</>
+                }
+
+                return <div>{humanFriendlyNumber(exposure)}</div>
             },
         })
         columns.push({
diff --git a/frontend/src/scenes/experiments/experimentLogic.tsx b/frontend/src/scenes/experiments/experimentLogic.tsx
index 9f35001c8b175..2583872689995 100644
--- a/frontend/src/scenes/experiments/experimentLogic.tsx
+++ b/frontend/src/scenes/experiments/experimentLogic.tsx
@@ -1151,19 +1151,18 @@ export const experimentLogic = kea<experimentLogicType>([
         countDataForVariant: [
             (s) => [s.experimentMathAggregationForTrends],
             (experimentMathAggregationForTrends) =>
-                (experimentResults: Partial<ExperimentResults['result']> | null, variant: string): string => {
+                (experimentResults: Partial<ExperimentResults['result']> | null, variant: string): number | null => {
                     const usingMathAggregationType = experimentMathAggregationForTrends(
                         experimentResults?.filters || {}
                     )
-                    const errorResult = '--'
                     if (!experimentResults || !experimentResults.insight) {
-                        return errorResult
+                        return null
                     }
                     const variantResults = (experimentResults.insight as TrendResult[]).find(
                         (variantTrend: TrendResult) => variantTrend.breakdown_value === variant
                     )
                     if (!variantResults) {
-                        return errorResult
+                        return null
                     }
 
                     let result = variantResults.count
@@ -1190,35 +1189,26 @@ export const experimentLogic = kea<experimentLogicType>([
                         }
                     }
 
-                    if (result % 1 !== 0) {
-                        // not an integer, so limit to 2 digits post decimal
-                        return result.toFixed(2)
-                    }
-                    return result.toString()
+                    return result
                 },
         ],
         exposureCountDataForVariant: [
             () => [],
             () =>
-                (experimentResults: Partial<ExperimentResults['result']> | null, variant: string): string => {
-                    const errorResult = '--'
+                (experimentResults: Partial<ExperimentResults['result']> | null, variant: string): number | null => {
                     if (!experimentResults || !experimentResults.variants) {
-                        return errorResult
+                        return null
                     }
                     const variantResults = (experimentResults.variants as TrendExperimentVariant[]).find(
                         (variantTrend: TrendExperimentVariant) => variantTrend.key === variant
                     )
                     if (!variantResults || !variantResults.absolute_exposure) {
-                        return errorResult
+                        return null
                     }
 
                     const result = variantResults.absolute_exposure
 
-                    if (result % 1 !== 0) {
-                        // not an integer, so limit to 2 digits post decimal
-                        return result.toFixed(2)
-                    }
-                    return result.toString()
+                    return result
                 },
         ],
         getHighestProbabilityVariant: [
@@ -1232,29 +1222,6 @@ export const experimentLogic = kea<experimentLogicType>([
                 }
             },
         ],
-        areTrendResultsConfusing: [
-            (s) => [s.experimentResults, s.getHighestProbabilityVariant],
-            (experimentResults, getHighestProbabilityVariant): boolean => {
-                // Results are confusing when the top variant has a lower
-                // absolute count than other variants. This happens because
-                // exposure is invisible to the user
-                if (!experimentResults) {
-                    return false
-                }
-
-                // find variant with highest count
-                const variantResults: TrendResult = (experimentResults?.insight as TrendResult[]).reduce(
-                    (bestVariant, currentVariant) =>
-                        currentVariant.count > bestVariant.count ? currentVariant : bestVariant,
-                    { count: 0, breakdown_value: '' } as TrendResult
-                )
-                if (!variantResults.count) {
-                    return false
-                }
-
-                return variantResults.breakdown_value !== getHighestProbabilityVariant(experimentResults)
-            },
-        ],
         sortedExperimentResultVariants: [
             (s) => [s.experimentResults, s.experiment],
             (experimentResults, experiment): string[] => {