Skip to content

Commit

Permalink
convert funnel property correlation table
Browse files Browse the repository at this point in the history
  • Loading branch information
@thmsobrmlr
thmsobrmlr committed Apr 5, 2023
1 parent c5299d9 commit 0adb43e
Show file tree
Hide file tree
Showing 3 changed files with 89 additions and 28 deletions.
19 changes: 9 additions & 10 deletions frontend/src/scenes/insights/views/Funnels/FunnelCorrelation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,18 +12,21 @@ import {
} from './FunnelCorrelationSkewWarning'
import { FunnelCorrelationTable, FunnelCorrelationTableDataExploration } from './FunnelCorrelationTable'
import { FunnelCorrelationFeedbackForm } from './FunnelCorrelationFeedbackForm'
import { FunnelPropertyCorrelationTable } from './FunnelPropertyCorrelationTable'
import {
FunnelPropertyCorrelationTable,
FunnelPropertyCorrelationTableDataExploration,
} from './FunnelPropertyCorrelationTable'
import { AvailableFeature } from '~/types'

import './FunnelCorrelation.scss'

export const FunnelCorrelation = (): JSX.Element | null => {
const { insightProps, isUsingDataExploration } = useValues(insightLogic)
const { insightProps, isUsingDataExploration: dx } = useValues(insightLogic)
const { steps: legacySteps } = useValues(funnelLogic(insightProps))
const { steps } = useValues(funnelDataLogic(insightProps))
useMountedLogic(funnelCorrelationUsageLogic(insightProps))

if (isUsingDataExploration ? steps.length <= 1 : legacySteps.length <= 1) {
if (dx ? steps.length <= 1 : legacySteps.length <= 1) {
return null
}

Expand All @@ -32,14 +35,10 @@ export const FunnelCorrelation = (): JSX.Element | null => {
<h2 className="my-4">Correlation analysis</h2>
<PayGateMini feature={AvailableFeature.CORRELATION_ANALYSIS}>
<div className="funnel-correlation">
{isUsingDataExploration ? (
<FunnelCorrelationSkewWarningDataExploration />
) : (
<FunnelCorrelationSkewWarning />
)}
{isUsingDataExploration ? <FunnelCorrelationTableDataExploration /> : <FunnelCorrelationTable />}
{dx ? <FunnelCorrelationSkewWarningDataExploration /> : <FunnelCorrelationSkewWarning />}
{dx ? <FunnelCorrelationTableDataExploration /> : <FunnelCorrelationTable />}
<FunnelCorrelationFeedbackForm />
{!isUsingDataExploration && <FunnelPropertyCorrelationTable />}
{dx ? <FunnelPropertyCorrelationTableDataExploration /> : <FunnelPropertyCorrelationTable />}
</div>
</PayGateMini>
</>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/scenes/insights/views/Funnels/FunnelCorrelationTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ export function FunnelCorrelationTableDataExploration(): JSX.Element | null {
const { loadedEventCorrelationsTableOnce } = useValues(funnelCorrelationLogic(insightProps))
const { loadEventCorrelations } = useActions(funnelCorrelationLogic(insightProps))

// Load correlations only if this component is mounted, and then reload if query changes
// Load correlations only if this component is mounted, and then reload if the query changes
useEffect(() => {
// We only automatically refresh results when the query changes after the user has manually asked for the first results to be loaded
if (loadedEventCorrelationsTableOnce) {
Expand Down
96 changes: 79 additions & 17 deletions frontend/src/scenes/insights/views/Funnels/FunnelPropertyCorrelationTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,12 @@ import Column from 'antd/lib/table/Column'
import { useActions, useValues } from 'kea'
import { RiseOutlined, FallOutlined, InfoCircleOutlined } from '@ant-design/icons'
import { funnelLogic } from 'scenes/funnels/funnelLogic'
import { FunnelCorrelation, FunnelCorrelationResultsType, FunnelCorrelationType } from '~/types'
import {
FunnelCorrelation,
FunnelCorrelationResultsType,
FunnelCorrelationType,
FunnelStepWithNestedBreakdown,
} from '~/types'
import Checkbox from 'antd/lib/checkbox/Checkbox'
import { insightLogic } from 'scenes/insights/insightLogic'
import { ValueInspectorButton } from 'scenes/funnels/ValueInspectorButton'
Expand All @@ -20,10 +25,79 @@ import { PropertyCorrelationActionsCell } from './CorrelationActionsCell'
import { funnelCorrelationUsageLogic } from 'scenes/funnels/funnelCorrelationUsageLogic'
import { parseDisplayNameForCorrelation } from 'scenes/funnels/funnelUtils'
import { funnelPropertyCorrelationLogic } from 'scenes/funnels/funnelPropertyCorrelationLogic'
import { Noun } from '~/models/groupsModel'
import { funnelDataLogic } from 'scenes/funnels/funnelDataLogic'

export function FunnelPropertyCorrelationTableDataExploration(): JSX.Element | null {
const { insightProps } = useValues(insightLogic)
const { steps, querySource, aggregationTargetLabel } = useValues(funnelDataLogic(insightProps))
const { loadedPropertyCorrelationsTableOnce, propertyNames, allProperties } = useValues(
funnelPropertyCorrelationLogic(insightProps)
)
const { loadPropertyCorrelations, setPropertyNames } = useActions(funnelPropertyCorrelationLogic(insightProps))

// Load correlations only if this component is mounted, and then reload if the query change
useEffect(() => {
// We only automatically refresh results when the query changes after the user has manually asked for the first results to be loaded
if (loadedPropertyCorrelationsTableOnce) {
if (propertyNames.length === 0) {
setPropertyNames(allProperties)
}

loadPropertyCorrelations({})
}
}, [querySource])

return (
<FunnelPropertyCorrelationTableComponent
steps={steps}
aggregation_group_type_index={querySource?.aggregation_group_type_index}
aggregationTargetLabel={aggregationTargetLabel}
/>
)
}

export function FunnelPropertyCorrelationTable(): JSX.Element | null {
const { insightProps } = useValues(insightLogic)
const { steps, filters, aggregationTargetLabel } = useValues(funnelLogic(insightProps))
const { loadedPropertyCorrelationsTableOnce, propertyNames, allProperties } = useValues(
funnelPropertyCorrelationLogic(insightProps)
)
const { loadPropertyCorrelations, setPropertyNames } = useActions(funnelPropertyCorrelationLogic(insightProps))

// Load correlations only if this component is mounted, and then reload if filters change
useEffect(() => {
// We only automatically refresh results when filters change after the user has manually asked for the first results to be loaded
if (loadedPropertyCorrelationsTableOnce) {
if (propertyNames.length === 0) {
setPropertyNames(allProperties)
}

loadPropertyCorrelations({})
}
}, [filters])

return (
<FunnelPropertyCorrelationTableComponent
steps={steps}
aggregation_group_type_index={filters?.aggregation_group_type_index}
aggregationTargetLabel={aggregationTargetLabel}
/>
)
}

type FunnelPropertyCorrelationTableComponentProps = {
steps: FunnelStepWithNestedBreakdown[]
aggregation_group_type_index?: number | undefined
aggregationTargetLabel: Noun
}

export function FunnelPropertyCorrelationTableComponent({
steps,
aggregation_group_type_index,
aggregationTargetLabel,
}: FunnelPropertyCorrelationTableComponentProps): JSX.Element | null {
const { insightProps } = useValues(insightLogic)
const { openCorrelationPersonsModal } = useActions(funnelLogic(insightProps))
const {
propertyCorrelationValues,
Expand All @@ -41,18 +115,6 @@ export function FunnelPropertyCorrelationTable(): JSX.Element | null {
const { correlationPropKey } = useValues(funnelCorrelationUsageLogic(insightProps))
const { reportCorrelationInteraction } = useActions(funnelCorrelationUsageLogic(insightProps))

// Load correlations only if this component is mounted, and then reload if filters change
useEffect(() => {
// We only automatically refresh results when filters change after the user has manually asked for the first results to be loaded
if (loadedPropertyCorrelationsTableOnce) {
if (propertyNames.length === 0) {
setPropertyNames(allProperties)
}

loadPropertyCorrelations({})
}
}, [filters])

const onClickCorrelationType = (correlationType: FunnelCorrelationType): void => {
if (propertyCorrelationTypes) {
if (propertyCorrelationTypes.includes(correlationType)) {
Expand Down Expand Up @@ -120,7 +182,7 @@ export function FunnelPropertyCorrelationTable(): JSX.Element | null {
</h4>
<div>
{capitalizeFirstLetter(aggregationTargetLabel.plural)}{' '}
{filters.aggregation_group_type_index != undefined ? 'that' : 'who'} converted were{' '}
{aggregation_group_type_index != undefined ? 'that' : 'who'} converted were{' '}
<mark>
<b>
{get_friendly_numeric_value(record.odds_ratio)}x {is_success ? 'more' : 'less'} likely
Expand Down Expand Up @@ -243,7 +305,7 @@ export function FunnelPropertyCorrelationTable(): JSX.Element | null {
Completed
<Tooltip
title={`${capitalizeFirstLetter(aggregationTargetLabel.plural)} ${
filters.aggregation_group_type_index != undefined ? 'that' : 'who'
aggregation_group_type_index != undefined ? 'that' : 'who'
} have this property and completed the entire funnel.`}
>
<InfoCircleOutlined className="column-info" />
Expand All @@ -263,8 +325,8 @@ export function FunnelPropertyCorrelationTable(): JSX.Element | null {
title={
<>
{capitalizeFirstLetter(aggregationTargetLabel.plural)}{' '}
{filters.aggregation_group_type_index != undefined ? 'that' : 'who'}{' '}
have this property and did <b>not complete</b> the entire funnel.
{aggregation_group_type_index != undefined ? 'that' : 'who'} have this
property and did <b>not complete</b> the entire funnel.
</>
}
>
Expand Down

0 comments on commit 0adb43e

Please sign in to comment.