Enable persons modal on funnel trends

frontend/src/lib/components/ChartFilter/ChartFilter.tsx

@@ -10,17 +10,19 @@ import {
     PieChartOutlined,
     TableOutlined,
 } from '@ant-design/icons'
-import { ChartDisplayType, FilterType, ViewType } from '~/types'
+import { ChartDisplayType, FilterType, FunnelVizType, ViewType } from '~/types'
+import { preflightLogic } from 'scenes/PreflightCheck/logic'
 
 interface ChartFilterProps {
     filters: FilterType
-    onChange: (chartFilter: ChartDisplayType) => void
+    onChange: (chartFilter: ChartDisplayType | FunnelVizType) => void
     disabled: boolean
 }
 
 export function ChartFilter({ filters, onChange, disabled }: ChartFilterProps): JSX.Element {
     const { chartFilter } = useValues(chartFilterLogic)
     const { setChartFilter } = useActions(chartFilterLogic)
+    const { preflight } = useValues(preflightLogic)
 
     const linearDisabled = !!filters.session && filters.session === 'dist'
     const cumulativeDisabled =
@@ -55,21 +57,28 @@ export function ChartFilter({ filters, onChange, disabled }: ChartFilterProps):
 
     const options =
         filters.insight === ViewType.FUNNELS
-            ? [
-                  {
-                      value: ChartDisplayType.FunnelViz,
-                      label: <Label icon={<OrderedListOutlined />}>Steps</Label>,
-                  },
-                  {
-                      value: ChartDisplayType.ActionsLineGraphLinear,
-                      label: (
-                          <Label icon={<LineChartOutlined />}>
-                              Trends
-                              <WarningTag>BETA</WarningTag>
-                          </Label>
-                      ),
-                  },
-              ]
+            ? preflight?.is_clickhouse_enabled
+                ? [
+                      {
+                          value: FunnelVizType.Steps,
+                          label: <Label icon={<OrderedListOutlined />}>Steps</Label>,
+                      },
+                      {
+                          value: FunnelVizType.Trends,
+                          label: (
+                              <Label icon={<LineChartOutlined />}>
+                                  Trends
+                                  <WarningTag>BETA</WarningTag>
+                              </Label>
+                          ),
+                      },
+                  ]
+                : [
+                      {
+                          value: FunnelVizType.Steps,
+                          label: <Label icon={<OrderedListOutlined />}>Steps</Label>,
+                      },
+                  ]
             : [
                   {
                       label: 'Line Chart',
@@ -117,7 +126,7 @@ export function ChartFilter({ filters, onChange, disabled }: ChartFilterProps):
             key="2"
             defaultValue={filters.display || defaultDisplay}
             value={chartFilter || defaultDisplay}
-            onChange={(value: ChartDisplayType) => {
+            onChange={(value: ChartDisplayType | FunnelVizType) => {
                 setChartFilter(value)
                 onChange(value)
             }}

frontend/src/lib/components/ChartFilter/chartFilterLogic.ts

@@ -2,43 +2,47 @@ import { kea } from 'kea'
 import { router } from 'kea-router'
 import { objectsEqual } from 'lib/utils'
 import { chartFilterLogicType } from './chartFilterLogicType'
-import { ChartDisplayType, ViewType } from '~/types'
+import { ChartDisplayType, FunnelVizType, ViewType } from '~/types'
 
 export const chartFilterLogic = kea<chartFilterLogicType>({
     actions: () => ({
-        setChartFilter: (filter: ChartDisplayType) => ({ filter }),
+        setChartFilter: (filter: ChartDisplayType | FunnelVizType) => ({ filter }),
     }),
     reducers: {
         chartFilter: [
-            null as null | ChartDisplayType,
+            null as null | ChartDisplayType | FunnelVizType,
             {
                 setChartFilter: (_, { filter }) => filter,
             },
         ],
     },
     listeners: ({ values }) => ({
-        setChartFilter: () => {
-            const { display, ...searchParams } = router.values.searchParams // eslint-disable-line
+        setChartFilter: ({ filter }) => {
+            const { display, funnel_viz_type, ...searchParams } = router.values.searchParams // eslint-disable-line
             const { pathname } = router.values.location
-            searchParams.display = values.chartFilter
-
-            if (!objectsEqual(display, values.chartFilter)) {
+            const isFunnelVizType = filter === 'steps' || filter === 'time_to_convert' || filter === 'trends'
+            if (isFunnelVizType) {
+                searchParams.funnel_viz_type = filter
+                searchParams.display = ChartDisplayType.FunnelViz
+            } else {
+                searchParams.display = values.chartFilter
+            }
+            if (
+                (!isFunnelVizType && !objectsEqual(display, values.chartFilter)) ||
+                (isFunnelVizType && !objectsEqual(funnel_viz_type, values.chartFilter))
+            ) {
                 router.actions.replace(pathname, searchParams)
             }
         },
     }),
     urlToAction: ({ actions }) => ({
-        '/insights': (_, { display, insight }) => {
-            if (display) {
+        '/insights': (_, { display, insight, funnel_viz_type }) => {
+            if (display && !funnel_viz_type) {
                 actions.setChartFilter(display)
             } else if (insight === ViewType.RETENTION) {
                 actions.setChartFilter(ChartDisplayType.ActionsTable)
             } else if (insight === ViewType.FUNNELS) {
-                if (display === ChartDisplayType.FunnelsTimeToConvert) {
-                    actions.setChartFilter(ChartDisplayType.FunnelsTimeToConvert)
-                } else {
-                    actions.setChartFilter(ChartDisplayType.FunnelViz)
-                }
+                actions.setChartFilter(funnel_viz_type)
             }
         },
     }),

frontend/src/lib/constants.tsx

@@ -11,7 +11,6 @@ export const ACTIONS_BAR_CHART = 'ActionsBar'
 export const ACTIONS_BAR_CHART_VALUE = 'ActionsBarValue'
 export const PATHS_VIZ = 'PathsViz'
 export const FUNNEL_VIZ = 'FunnelViz'
-export const FUNNELS_TIME_TO_CONVERT = 'FunnelsTimeToConvert'
 
 export enum OrganizationMembershipLevel {
     Member = 1,

frontend/src/scenes/dashboard/DashboardItem.tsx

@@ -40,7 +40,6 @@ import { ActionsBarValueGraph } from 'scenes/trends/viz'
 
 import relativeTime from 'dayjs/plugin/relativeTime'
 import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
-import { FunnelHistogram } from 'scenes/funnels/FunnelHistogram'
 
 dayjs.extend(relativeTime)
 
@@ -135,19 +134,6 @@ export const displayMap: Record<DisplayedType, DisplayProps> = {
             ).url
         },
     },
-    FunnelsTimeToConvert: {
-        className: 'funnel-time-to-convert',
-        element: FunnelHistogram,
-        icon: BarChartOutlined,
-        viewText: 'View time conversion',
-        link: ({ id, dashboard, name, filters }: DashboardItemType): string => {
-            return combineUrl(
-                `/insights`,
-                { insight: ViewType.FUNNELS, ...filters },
-                { fromItem: id, fromItemName: name, fromDashboard: dashboard }
-            ).url
-        },
-    },
     RetentionContainer: {
         className: 'retention',
         element: RetentionContainer,

frontend/src/scenes/funnels/FunnelCanvasLabel.tsx

@@ -1,14 +1,13 @@
 // This file contains funnel-related components that are used in the general insights scope
 import { useActions, useValues } from 'kea'
-import { FUNNELS_TIME_TO_CONVERT, FUNNEL_VIZ } from 'lib/constants'
 import { humanFriendlyDuration } from 'lib/utils'
 import React from 'react'
 import { Button } from 'antd'
 import { insightLogic } from 'scenes/insights/insightLogic'
 import { funnelLogic } from './funnelLogic'
 import './FunnelCanvasLabel.scss'
 import { chartFilterLogic } from 'lib/components/ChartFilter/chartFilterLogic'
-import { ChartDisplayType } from '~/types'
+import { FunnelVizType } from '~/types'
 
 export function FunnelCanvasLabel(): JSX.Element | null {
     const { stepsWithCount, histogramStep, totalConversionRate } = useValues(funnelLogic)
@@ -21,7 +20,7 @@ export function FunnelCanvasLabel(): JSX.Element | null {
 
     return (
         <div className="funnel-canvas-label">
-            {allFilters.display === FUNNEL_VIZ && (
+            {allFilters.funnel_viz_type === FunnelVizType.Steps && (
                 <>
                     <span className="text-muted-alt">Total conversion rate: </span>
                     <span>{totalConversionRate}%</span>
@@ -33,8 +32,8 @@ export function FunnelCanvasLabel(): JSX.Element | null {
                     <span className="text-muted-alt">Average time to convert: </span>
                     <Button
                         type="link"
-                        disabled={allFilters.display === FUNNELS_TIME_TO_CONVERT}
-                        onClick={() => setChartFilter(ChartDisplayType.FunnelsTimeToConvert)}
+                        disabled={allFilters.funnel_viz_type === FunnelVizType.TimeToConvert}
+                        onClick={() => setChartFilter(FunnelVizType.TimeToConvert)}
                     >
                         {humanFriendlyDuration(stepsWithCount[histogramStep]?.average_conversion_time)}
                     </Button>

frontend/src/scenes/funnels/FunnelHistogram.tsx

@@ -7,14 +7,14 @@ import { funnelLogic } from './funnelLogic'
 import { Histogram } from 'scenes/insights/Histogram'
 import { insightLogic } from 'scenes/insights/insightLogic'
 import './FunnelHistogram.scss'
-import { FUNNELS_TIME_TO_CONVERT } from 'lib/constants'
+import { FunnelVizType } from '~/types'
 
 export function FunnelHistogramHeader(): JSX.Element | null {
     const { stepsWithCount, stepReference, histogramStepsDropdown } = useValues(funnelLogic)
     const { changeHistogramStep } = useActions(funnelLogic)
     const { allFilters } = useValues(insightLogic)
 
-    if (allFilters.display !== FUNNELS_TIME_TO_CONVERT) {
+    if (allFilters.funnel_viz_type !== FunnelVizType.TimeToConvert) {
         return null
     }
 

frontend/src/scenes/funnels/FunnelViz.tsx

@@ -4,15 +4,16 @@ import FunnelGraph from 'funnel-graph-js'
 import { Loading, humanFriendlyDuration } from 'lib/utils'
 import { useActions, useValues, BindLogic } from 'kea'
 import { funnelLogic } from './funnelLogic'
-import { ACTIONS_LINE_GRAPH_LINEAR, FEATURE_FLAGS } from 'lib/constants'
+import { FEATURE_FLAGS } from 'lib/constants'
 import { LineGraph } from 'scenes/insights/LineGraph'
 import { FunnelBarGraph } from './FunnelBarGraph'
 import { router } from 'kea-router'
-import { InputNumber } from 'antd'
+import { InputNumber, Row } from 'antd'
 import { preflightLogic } from 'scenes/PreflightCheck/logic'
-import { ChartDisplayType, ChartParams } from '~/types'
+import { ChartParams, FunnelVizType } from '~/types'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import { FunnelHistogram } from './FunnelHistogram'
+import { personsModalLogic } from 'scenes/trends/personsModalLogic'
 import { FunnelEmptyState } from 'scenes/insights/EmptyStates'
 
 import './FunnelViz.scss'
@@ -36,6 +37,7 @@ export function FunnelViz({
         areFiltersValid,
     } = useValues(logic)
     const { loadResults: loadFunnel, loadConversionWindow } = useActions(logic)
+    const { loadPeople } = useActions(personsModalLogic)
     const {
         hashParams: { fromItem },
     } = useValues(router)
@@ -49,7 +51,7 @@ export function FunnelViz({
             !steps ||
             steps.length === 0 ||
             featureFlags[FEATURE_FLAGS.FUNNEL_BAR_VIZ] ||
-            filters.display === ACTIONS_LINE_GRAPH_LINEAR
+            filters.funnel_viz_type === FunnelVizType.Trends
         ) {
             return
         }
@@ -113,10 +115,10 @@ export function FunnelViz({
         )
     }
 
-    if (filters.display === ACTIONS_LINE_GRAPH_LINEAR) {
+    if (filters.funnel_viz_type === FunnelVizType.Trends) {
         return steps && steps.length > 0 && steps[0].labels ? (
             <>
-                <div style={{ position: 'absolute', marginTop: -20, textAlign: 'center', width: '90%' }}>
+                <Row style={{ marginTop: -16, justifyContent: 'center' }}>
                     {preflight?.is_clickhouse_enabled && (
                         <>
                             converted within&nbsp;
@@ -131,7 +133,7 @@ export function FunnelViz({
                         </>
                     )}
                     % converted from first to last step
-                </div>
+                </Row>
                 <LineGraph
                     data-attr="trend-line-graph-funnel"
                     type="line"
@@ -142,11 +144,25 @@ export function FunnelViz({
                     dashboardItemId={dashboardItemId || fromItem}
                     inSharedMode={inSharedMode}
                     percentage={true}
+                    onClick={
+                        dashboardItemId
+                            ? null
+                            : (point) => {
+                                  loadPeople({
+                                      action: { id: point.index, name: point.label, properties: [], type: 'actions' },
+                                      label: `Persons converted on ${point.label}`,
+                                      date_from: point.day,
+                                      date_to: point.day,
+                                      filters: filters,
+                                      saveOriginal: true,
+                                  })
+                              }
+                    }
                 />
             </>
         ) : null
     }
-    if (featureFlags[FEATURE_FLAGS.FUNNEL_BAR_VIZ] && filters.display == ChartDisplayType.FunnelsTimeToConvert) {
+    if (featureFlags[FEATURE_FLAGS.FUNNEL_BAR_VIZ] && filters.funnel_viz_type == FunnelVizType.TimeToConvert) {
         return timeConversionBins && timeConversionBins.length > 0 ? <FunnelHistogram /> : null
     }
 

frontend/src/scenes/funnels/funnelLogic.ts

@@ -11,7 +11,7 @@ import {
     EntityTypes,
     FilterType,
     FunnelStep,
-    ChartDisplayType,
+    FunnelVizType,
     FunnelResult,
     PathType,
     PersonType,
@@ -100,6 +100,8 @@ export const cleanFunnelParams = (filters: Partial<FilterType>): FilterType => {
         ...(filters.funnel_step ? { funnel_step: filters.funnel_step } : {}),
         ...(filters.funnel_viz_type ? { funnel_viz_type: filters.funnel_viz_type } : {}),
         ...(filters.funnel_step ? { funnel_to_step: filters.funnel_step } : {}),
+        ...(filters.entrance_period_start ? { entrance_period_start: filters.entrance_period_start } : {}),
+        ...(filters.drop_off ? { drop_off: filters.drop_off } : {}),
         interval: autocorrectInterval(filters),
         breakdown: filters.breakdown || undefined,
         breakdown_type: filters.breakdown_type || undefined,
@@ -179,12 +181,11 @@ export const funnelLogic = kea<funnelLogicType<LoadedRawFunnelResults, TimeStepO
                     }
 
                     async function loadBinsResults(): Promise<[number, number][]> {
-                        if (filters.display === ChartDisplayType.FunnelsTimeToConvert) {
+                        if (filters.funnel_viz_type === FunnelVizType.TimeToConvert) {
                             try {
                                 const binsResult = await pollFunnel<[number, number][]>({
                                     ...apiParams,
                                     ...(refresh ? { refresh } : {}),
-                                    funnel_viz_type: 'time_to_convert',
                                     funnel_to_step: histogramStep,
                                 })
                                 return binsResult.result

frontend/src/scenes/funnels/funnelUtils.ts

@@ -59,5 +59,5 @@ export function getSeriesPositionName(
 }
 
 export function humanizeStepCount(count: number): string {
-    return count > 9999 ? humanizeNumber(count, 2) : count.toLocaleString()
+    return count > 9999 ? humanizeNumber(count, 2) : count?.toLocaleString()
 }