feat(funnels): Highlight significant deviations in new funnel viz

frontend/src/lib/components/LemonTable/LemonTable.tsx

@@ -33,7 +33,7 @@ export interface LemonTableProps<T extends Record<string, any>> {
     /** Which column to use for the row key, as an alternative to the default row index mechanism. */
     rowKey?: keyof T | ((record: T) => string | number)
     /** Class to append to each row. */
-    rowClassName?: string | ((record: T) => string)
+    rowClassName?: string | ((record: T) => string | null)
     /** Color to mark each row with. */
     rowRibbonColor?: string | ((record: T) => string | null)
     /** Status of each row. Defaults no status. */

frontend/src/lib/components/LemonTable/TableRow.tsx

@@ -8,7 +8,7 @@ export interface TableRowProps<T extends Record<string, any>> {
     record: T
     recordIndex: number
     rowKeyDetermined: string | number
-    rowClassNameDetermined: string | undefined
+    rowClassNameDetermined: string | null | undefined
     rowRibbonColorDetermined: string | null | undefined
     rowStatusDetermined: 'success' | 'warning' | 'danger' | 'highlighted' | undefined
     columnGroups: LemonTableColumnGroup<T>[]

frontend/src/lib/components/icons.tsx

@@ -437,9 +437,9 @@ export function IconGroupedEvents(props: React.SVGProps<SVGSVGElement>): JSX.Ele
 }
 
 /** Material Design Assistant Photo icon. */
-export function IconFlag(): JSX.Element {
+export function IconFlag(props: React.SVGProps<SVGSVGElement>): JSX.Element {
     return (
-        <svg fill="none" width="1em" height="1em" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <svg fill="none" width="1em" height="1em" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
             <path
                 d="m12.36 6 .08.39.32 1.61h5.24v6h-3.36l-.08-.39-.32-1.61h-7.24v-6zm1.64-2h-9v17h2v-7h5.6l.4 2h7v-10h-5.6z"
                 fill="currentColor"

frontend/src/scenes/funnels/funnelLogic.ts

@@ -65,10 +65,11 @@ import { groupsModel } from '~/models/groupsModel'
 import { dayjs } from 'lib/dayjs'
 import { lemonToast } from 'lib/components/lemonToast'
 
+/* Chosen via heuristics by eyeballing some values
+ * Assuming a normal distribution, then 90% of values are within 1.5 standard deviations of the mean
+ * which gives a ballpark of 1 highlighting every 10 breakdown values
+ */
 const DEVIATION_SIGNIFICANCE_MULTIPLIER = 1.5
-// Chosen via heuristics by eyeballing some values
-// Assuming a normal distribution, then 90% of values are within 1.5 standard deviations of the mean
-// which gives a ballpark of 1 highlighting every 10 breakdown values
 
 // List of events that should be excluded, if we don't have an explicit list of
 // excluded properties. Copied from
@@ -825,8 +826,8 @@ export const funnelLogic = kea<funnelLogicType<openPersonsModelProps>>({
                                         (stepsInBreakdown[stepsInBreakdown.length - 1]?.count ?? 0) /
                                         (stepsInBreakdown[0]?.count ?? 1),
                                 },
-                                significant: stepsInBreakdown.some((step) =>
-                                    step.significant ? Object.values(step.significant).some((val) => val) : false
+                                significant: stepsInBreakdown.some(
+                                    (step) => step.significant?.total || step.significant?.fromBasisStep
                                 ),
                             })
                         })

frontend/src/scenes/insights/Insight.scss

@@ -286,3 +286,12 @@ $funnel_canvas_background: #fff;
         }
     }
 }
+
+.significance-highlight {
+    display: inline-flex;
+    background: var(--primary);
+    color: var(--bg-light);
+    .LemonRow__icon {
+        color: var(--bg-light);
+    }
+}

frontend/src/scenes/insights/InsightTabs/FunnelTab/FunnelStepsTable.tsx

@@ -6,14 +6,15 @@ import { LemonTable, LemonTableColumn, LemonTableColumnGroup } from 'lib/compone
 import { BreakdownKeyType, FlattenedFunnelStepByBreakdown } from '~/types'
 import { EntityFilterInfo } from 'lib/components/EntityFilterInfo'
 import { formatDisplayPercentage, getSeriesColor, getVisibilityIndex } from 'scenes/funnels/funnelUtils'
-import { getActionFilterFromFunnelStep } from './funnelStepTableUtils'
+import { getActionFilterFromFunnelStep, getSignificanceFromBreakdownStep } from './funnelStepTableUtils'
 import { formatBreakdownLabel } from 'scenes/insights/InsightsTable/InsightsTable'
 import { cohortsModel } from '~/models/cohortsModel'
 import { LemonCheckbox } from 'lib/components/LemonCheckbox'
 import { Lettermark, LettermarkColor } from 'lib/components/Lettermark/Lettermark'
 import { LemonRow } from 'lib/components/LemonRow'
 import { humanFriendlyDuration } from 'lib/utils'
 import { ValueInspectorButton } from 'scenes/funnels/FunnelBarGraph'
+import { IconFlag } from 'lib/components/icons'
 
 export function FunnelStepsTable(): JSX.Element | null {
     const { insightProps } = useValues(insightLogic)
@@ -92,8 +93,23 @@ export function FunnelStepsTable(): JSX.Element | null {
                 },
                 {
                     title: 'Total conversion',
-                    render: (_: void, breakdown: FlattenedFunnelStepByBreakdown) =>
-                        formatDisplayPercentage(breakdown?.conversionRates?.total ?? 0, true),
+                    render: function RenderTotalConversion(
+                        _: void,
+                        breakdown: FlattenedFunnelStepByBreakdown
+                    ): JSX.Element | string {
+                        return getSignificanceFromBreakdownStep(breakdown, 0)?.total ? (
+                            <LemonRow
+                                className="significance-highlight"
+                                tooltip="Significantly different from other breakdown values"
+                                icon={<IconFlag />}
+                                compact
+                            >
+                                {formatDisplayPercentage(breakdown?.conversionRates?.total ?? 0, true)}
+                            </LemonRow>
+                        ) : (
+                            formatDisplayPercentage(breakdown?.conversionRates?.total ?? 0, true)
+                        )
+                    },
                     align: 'right',
                 },
             ],
@@ -132,8 +148,29 @@ export function FunnelStepsTable(): JSX.Element | null {
                 },
                 {
                     title: 'Rate',
-                    render: (_: void, breakdown: FlattenedFunnelStepByBreakdown) =>
-                        formatDisplayPercentage(breakdown.steps?.[stepIndex]?.conversionRates.fromPrevious ?? 0, true),
+                    render: function RenderRate(
+                        _: void,
+                        breakdown: FlattenedFunnelStepByBreakdown
+                    ): JSX.Element | string {
+                        return getSignificanceFromBreakdownStep(breakdown, step.order)?.fromBasisStep ? (
+                            <LemonRow
+                                className="significance-highlight"
+                                tooltip="Significantly different from other breakdown values"
+                                icon={<IconFlag />}
+                                compact
+                            >
+                                {formatDisplayPercentage(
+                                    breakdown.steps?.[step.order]?.conversionRates.fromBasisStep ?? 0,
+                                    true
+                                )}
+                            </LemonRow>
+                        ) : (
+                            formatDisplayPercentage(
+                                breakdown.steps?.[step.order]?.conversionRates.fromBasisStep ?? 0,
+                                true
+                            )
+                        )
+                    },
                     align: 'right',
                 },
                 ...(stepIndex === 0
@@ -165,7 +202,7 @@ export function FunnelStepsTable(): JSX.Element | null {
                               title: 'Rate',
                               render: (_: void, breakdown: FlattenedFunnelStepByBreakdown) =>
                                   formatDisplayPercentage(
-                                      1 - (breakdown.steps?.[stepIndex]?.conversionRates.fromPrevious ?? 0),
+                                      1 - (breakdown.steps?.[stepIndex]?.conversionRates.fromBasisStep ?? 0),
                                       true
                                   ),
                               align: 'right',
@@ -189,6 +226,8 @@ export function FunnelStepsTable(): JSX.Element | null {
             dataSource={flattenedBreakdowns}
             columns={columnsGrouped}
             loading={insightLoading}
+            rowKey="breakdownIndex"
+            rowStatus={(record) => (record.significant ? 'highlighted' : undefined)}
             rowRibbonColor={(series) =>
                 getSeriesColor(
                     series?.breakdownIndex,
@@ -197,7 +236,6 @@ export function FunnelStepsTable(): JSX.Element | null {
                     flattenedBreakdowns.length
                 )
             }
-            rowKey="breakdownIndex"
         />
     )
 }