Pass in funnel_step_breakdown param for funnels breakdown persons mod…

…al (#5289) * pass in funnel_step_breakdown param for persons modal * add comment * allow clicking on drop off part of the funnel bar * fix funnel persons modal titling * small fixes * ellipses man
PostHog · Jul 22, 2021 · 8fba8cd · 8fba8cd
1 parent f72b1bc
commit 8fba8cd
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 9 deletions.
diff --git a/frontend/src/scenes/funnels/FunnelBarGraph.tsx b/frontend/src/scenes/funnels/FunnelBarGraph.tsx
@@ -343,7 +343,7 @@ export function FunnelBarGraph({ filters, dashboardItemId, color = 'white' }: Om
                                                     percentage={barSizePercentage}
                                                     name={breakdown.name}
                                                     onBarClick={() =>
-                                                        openPersonsModal(step, i + 1, step.breakdown_value)
+                                                        openPersonsModal(step, i + 1, breakdown.breakdown)
                                                     }
                                                     disabled={!!dashboardItemId}
                                                     layout={layout}
@@ -409,8 +409,16 @@ export function FunnelBarGraph({ filters, dashboardItemId, color = 'white' }: Om
                                         })}
                                         <div
                                             className="funnel-bar-empty-space"
+                                            onClick={() =>
+                                                clickhouseFeaturesEnabled &&
+                                                !dashboardItemId &&
+                                                openPersonsModal(step, -(i + 1))
+                                            } // dropoff value for steps is negative
                                             style={{
                                                 flex: `${100 - calcPercentage(breakdownSum, basisStep.count)} 100 0`,
+                                                cursor: `${
+                                                    clickhouseFeaturesEnabled && !dashboardItemId ? 'pointer' : ''
+                                                }`,
                                             }}
                                         />
                                     </>
@@ -462,7 +470,17 @@ export function FunnelBarGraph({ filters, dashboardItemId, color = 'white' }: Om
                                         />
                                         <div
                                             className="funnel-bar-empty-space"
-                                            style={{ flex: `${100 - step.conversionRates.fromBasisStep} 100 0` }}
+                                            onClick={() =>
+                                                clickhouseFeaturesEnabled &&
+                                                !dashboardItemId &&
+                                                openPersonsModal(step, -(i + 1))
+                                            } // dropoff value for steps is negative
+                                            style={{
+                                                flex: `${100 - step.conversionRates.fromBasisStep} 100 0`,
+                                                cursor: `${
+                                                    clickhouseFeaturesEnabled && !dashboardItemId ? 'pointer' : ''
+                                                }`,
+                                            }}
                                         />
                                     </>
                                 )}

diff --git a/frontend/src/scenes/funnels/funnelLogic.ts b/frontend/src/scenes/funnels/funnelLogic.ts
@@ -117,6 +117,7 @@ export const cleanFunnelParams = (filters: Partial<FilterType>, discardFiltersNo
         ...(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 } : {}),
+        ...(filters.funnel_step_breakdown ? { funnel_step_breakdown: filters.funnel_step_breakdown } : {}),
         interval: autocorrectInterval(filters),
         breakdown: breakdownEnabled ? filters.breakdown || undefined : undefined,
         breakdown_type: breakdownEnabled ? filters.breakdown_type || undefined : undefined,

diff --git a/frontend/src/scenes/trends/PersonModal.scss b/frontend/src/scenes/trends/PersonModal.scss
@@ -8,6 +8,16 @@
     .ant-btn {
         color: var(--primary);
     }
+
+    .ant-modal-title {
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .ant-modal-header {
+        padding: 16px 16px;
+        width: 575px;
+    }
 }
 
 .person-modal-properties {

diff --git a/frontend/src/scenes/trends/PersonModal.tsx b/frontend/src/scenes/trends/PersonModal.tsx
@@ -61,10 +61,14 @@ export function PersonModal({ visible, view, filters, onSaveCohort }: Props): JS
             ) : filters.display === 'ActionsBarValue' || filters.display === 'ActionsPie' ? (
                 `"${people?.label}"`
             ) : filters.insight === ViewType.FUNNELS ? (
-                <>
-                    Persons who {people?.funnelStep ?? 0 >= 0 ? 'completed' : 'dropped off at'} step #
-                    {Math.abs(people?.funnelStep ?? 0)} - <PropertyKeyInfo value={people?.label || ''} disablePopover />
-                </>
+                <span style={{ whiteSpace: 'nowrap' }}>
+                    <strong>
+                        Persons who {(people?.funnelStep ?? 0) >= 0 ? 'completed' : 'dropped off at'} step #
+                        {Math.abs(people?.funnelStep ?? 0)} -{' '}
+                        <PropertyKeyInfo value={people?.label || ''} disablePopover />{' '}
+                        {people?.breakdown_value && `- ${people.breakdown_value}`}
+                    </strong>
+                </span>
             ) : (
                 <>
                     <PropertyKeyInfo value={people?.label || ''} disablePopover /> on{' '}
@@ -78,7 +82,7 @@ export function PersonModal({ visible, view, filters, onSaveCohort }: Props): JS
 
     return (
         <Modal
-            title={<strong>{title}</strong>}
+            title={title}
             visible={visible}
             onOk={hidePeople}
             onCancel={hidePeople}

diff --git a/frontend/src/scenes/trends/personsModalLogic.ts b/frontend/src/scenes/trends/personsModalLogic.ts
@@ -144,7 +144,11 @@ export const personsModalLogic = kea<personsModalLogicType<PersonModalParams>>({
                         params = { ...filters, entrance_period_start, drop_off: false }
                     } else {
                         // regular funnel steps
-                        params = { ...filters, funnel_step: funnelStep }
+                        params = {
+                            ...filters,
+                            funnel_step: funnelStep,
+                            ...(breakdown_value && { funnel_step_breakdown: breakdown_value }),
+                        }
                     }
                     const cleanedParams = cleanFunnelParams(params)
                     const funnelParams = toParams(cleanedParams)
@@ -174,7 +178,16 @@ export const personsModalLogic = kea<personsModalLogicType<PersonModalParams>>({
             },
             loadMorePeople: async ({}, breakpoint) => {
                 if (values.people) {
-                    const { people: currPeople, count, action, label, day, breakdown_value, next } = values.people
+                    const {
+                        people: currPeople,
+                        count,
+                        action,
+                        label,
+                        day,
+                        breakdown_value,
+                        next,
+                        funnelStep,
+                    } = values.people
                     const people = await api.get(next)
                     breakpoint()
 
@@ -186,6 +199,7 @@ export const personsModalLogic = kea<personsModalLogicType<PersonModalParams>>({
                         day,
                         breakdown_value,
                         next: people.next,
+                        funnelStep,
                     }
                 }
                 return null

diff --git a/frontend/src/types.ts b/frontend/src/types.ts
@@ -641,6 +641,7 @@ export interface FilterType {
     funnel_viz_type?: string // parameter sent to funnels API for time conversion code path
     funnel_from_step?: number // used in time to convert: initial step index to compute time to convert
     funnel_to_step?: number // used in time to convert: ending step index to compute time to convert
+    funnel_step_breakdown?: string | number[] | number | null // used in steps breakdown: persons modal
     compare?: boolean
 }