feat(Funnels): Make detailed results table for Funnels sortable (#30298)

Author: Sriram-bk

frontend/__snapshots__/scenes-app-insights-funnels--funnel-left-to-right--dark.png

@@ -7,6 +7,7 @@ import { LemonRow } from 'lib/lemon-ui/LemonRow'
 import { LemonTable, LemonTableColumn, LemonTableColumnGroup } from 'lib/lemon-ui/LemonTable'
 import { Lettermark, LettermarkColor } from 'lib/lemon-ui/Lettermark'
 import { humanFriendlyDuration, humanFriendlyNumber, percentage } from 'lib/utils'
+import { compare as compareFn } from 'natural-orderby'
 import { funnelDataLogic } from 'scenes/funnels/funnelDataLogic'
 import { funnelPersonsModalLogic } from 'scenes/funnels/funnelPersonsModalLogic'
 import { getVisibilityKey } from 'scenes/funnels/funnelUtils'
@@ -75,6 +76,31 @@ export function FunnelStepsTable(): JSX.Element | null {
                         />
                     ),
                     dataIndex: 'breakdown_value',
+                    sorter: (a: FlattenedFunnelStepByBreakdown, b: FlattenedFunnelStepByBreakdown) => {
+                        // Unwrap breakdown values to compare them properly
+                        const valueA = a.breakdown_value?.length == 1 ? a.breakdown_value[0] : a.breakdown_value
+                        const valueB = b.breakdown_value?.length == 1 ? b.breakdown_value[0] : b.breakdown_value
+
+                        // For numeric values, use numeric comparison
+                        if (typeof valueA === 'number' && typeof valueB === 'number') {
+                            return valueA - valueB
+                        }
+
+                        // For string values, use string comparison
+                        const labelA = formatBreakdownLabel(
+                            valueA,
+                            breakdownFilter,
+                            allCohorts.results,
+                            formatPropertyValueForDisplay
+                        )
+                        const labelB = formatBreakdownLabel(
+                            valueB,
+                            breakdownFilter,
+                            allCohorts.results,
+                            formatPropertyValueForDisplay
+                        )
+                        return compareFn()(labelA, labelB)
+                    },
                     render: function RenderBreakdownValue(
                         _: void,
                         breakdown: FlattenedFunnelStepByBreakdown
@@ -127,9 +153,12 @@ export function FunnelStepsTable(): JSX.Element | null {
                             conversion
                         </>
                     ),
+                    key: 'total_conversion',
                     render: (_: void, breakdown: FlattenedFunnelStepByBreakdown) =>
                         percentage(breakdown?.conversionRates?.total ?? 0, 2, true),
                     align: 'right',
+                    sorter: (a: FlattenedFunnelStepByBreakdown, b: FlattenedFunnelStepByBreakdown) =>
+                        (a?.conversionRates?.total ?? 0) - (b?.conversionRates?.total ?? 0),
                 },
             ],
         },
@@ -146,6 +175,7 @@ export function FunnelStepsTable(): JSX.Element | null {
             children: [
                 {
                     title: stepIndex === 0 ? 'Entered' : 'Converted',
+                    key: `step_${stepIndex}_conversion`,
                     render: function RenderCompleted(
                         _: void,
                         breakdown: FlattenedFunnelStepByBreakdown
@@ -166,14 +196,16 @@ export function FunnelStepsTable(): JSX.Element | null {
                             ))
                         )
                     },
-
                     align: 'right',
+                    sorter: (a: FlattenedFunnelStepByBreakdown, b: FlattenedFunnelStepByBreakdown) =>
+                        (a.steps?.[stepIndex]?.count ?? 0) - (b.steps?.[stepIndex]?.count ?? 0),
                 },
                 ...(stepIndex === 0
                     ? []
                     : [
                           {
-                              title: 'Dropped off',
+                              title: 'Dropped off',
+                              key: `step_${stepIndex}_dropoff`,
                               render: function RenderDropped(
                                   _: void,
                                   breakdown: FlattenedFunnelStepByBreakdown
@@ -199,6 +231,9 @@ export function FunnelStepsTable(): JSX.Element | null {
                                   )
                               },
                               align: 'right',
+                              sorter: (a: FlattenedFunnelStepByBreakdown, b: FlattenedFunnelStepByBreakdown) =>
+                                  (a.steps?.[stepIndex]?.droppedOffFromPrevious ?? 0) -
+                                  (b.steps?.[stepIndex]?.droppedOffFromPrevious ?? 0),
                           },
                       ]),
                 {
@@ -209,6 +244,7 @@ export function FunnelStepsTable(): JSX.Element | null {
                             so&nbsp;far
                         </>
                     ),
+                    key: `step_${stepIndex}_conversion_so_far`,
                     render: function RenderConversionSoFar(
                         _: void,
                         breakdown: FlattenedFunnelStepByBreakdown
@@ -228,6 +264,9 @@ export function FunnelStepsTable(): JSX.Element | null {
                         )
                     },
                     align: 'right',
+                    sorter: (a: FlattenedFunnelStepByBreakdown, b: FlattenedFunnelStepByBreakdown) =>
+                        (a.steps?.[step.order]?.conversionRates.total ?? 0) -
+                        (b.steps?.[step.order]?.conversionRates.total ?? 0),
                 },
                 ...(stepIndex === 0
                     ? []
@@ -240,6 +279,7 @@ export function FunnelStepsTable(): JSX.Element | null {
                                       from&nbsp;previous
                                   </>
                               ),
+                              key: `step_${stepIndex}_conversion_from_prev`,
                               render: function RenderConversionFromPrevious(
                                   _: void,
                                   breakdown: FlattenedFunnelStepByBreakdown
@@ -268,6 +308,9 @@ export function FunnelStepsTable(): JSX.Element | null {
                                   )
                               },
                               align: 'right',
+                              sorter: (a: FlattenedFunnelStepByBreakdown, b: FlattenedFunnelStepByBreakdown) =>
+                                  (a.steps?.[step.order]?.conversionRates.fromPrevious ?? 0) -
+                                  (b.steps?.[step.order]?.conversionRates.fromPrevious ?? 0),
                           },
                           {
                               title: (
@@ -277,6 +320,7 @@ export function FunnelStepsTable(): JSX.Element | null {
                                       time
                                   </>
                               ),
+                              key: `step_${stepIndex}_median_time`,
                               render: (_: void, breakdown: FlattenedFunnelStepByBreakdown) =>
                                   breakdown.steps?.[step.order]?.median_conversion_time != undefined
                                       ? humanFriendlyDuration(breakdown.steps[step.order].median_conversion_time, {
@@ -286,6 +330,9 @@ export function FunnelStepsTable(): JSX.Element | null {
                               align: 'right',
                               width: 0,
                               className: 'whitespace-nowrap',
+                              sorter: (a: FlattenedFunnelStepByBreakdown, b: FlattenedFunnelStepByBreakdown) =>
+                                  (a.steps?.[step.order]?.median_conversion_time ?? 0) -
+                                  (b.steps?.[step.order]?.median_conversion_time ?? 0),
                           },
                           {
                               title: (
@@ -295,6 +342,7 @@ export function FunnelStepsTable(): JSX.Element | null {
                                       time
                                   </>
                               ),
+                              key: `step_${stepIndex}_average_time`,
                               render: (_: void, breakdown: FlattenedFunnelStepByBreakdown) =>
                                   breakdown.steps?.[step.order]?.average_conversion_time != undefined
                                       ? humanFriendlyDuration(breakdown.steps[step.order].average_conversion_time, {
@@ -304,6 +352,9 @@ export function FunnelStepsTable(): JSX.Element | null {
                               align: 'right',
                               width: 0,
                               className: 'whitespace-nowrap',
+                              sorter: (a: FlattenedFunnelStepByBreakdown, b: FlattenedFunnelStepByBreakdown) =>
+                                  (a.steps?.[step.order]?.average_conversion_time ?? 0) -
+                                  (b.steps?.[step.order]?.average_conversion_time ?? 0),
                           },
                       ]),
             ] as LemonTableColumn<FlattenedFunnelStepByBreakdown, keyof FlattenedFunnelStepByBreakdown>[],
@@ -319,6 +370,7 @@ export function FunnelStepsTable(): JSX.Element | null {
             rowStatus={(record) => (record.significant ? 'highlighted' : null)}
             rowRibbonColor={getFunnelsColor}
             firstColumnSticky
+            useURLForSorting
         />
     )
 }