Skip to content

Commit

Permalink
feat(lifecycle): add personless events note to tooltip
Browse files Browse the repository at this point in the history
  • Loading branch information
@thmsobrmlr
thmsobrmlr committed Jan 3, 2025
1 parent 2f05e8c commit 2ce3224
Show file tree
Hide file tree
Showing 2 changed files with 74 additions and 94 deletions.
8 changes: 7 additions & 1 deletion frontend/src/scenes/insights/InsightNav/InsightsNav.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,13 @@ export function InsightsNav(): JSX.Element {
key: type,
label: (
<Link to={insightTypeURL[type]} preventClick data-attr={dataAttr}>
<Tooltip placement="top" title={INSIGHT_TYPES_METADATA[type].description}>
<Tooltip
placement="top"
title={
INSIGHT_TYPES_METADATA[type].tooltipDescription ||
INSIGHT_TYPES_METADATA[type].description
}
>
<span>{label}</span>
</Tooltip>
</Link>
Expand Down
160 changes: 67 additions & 93 deletions frontend/src/scenes/saved-insights/SavedInsights.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,281 +67,228 @@ interface NewInsightButtonProps {
export interface InsightTypeMetadata {
name: string
description?: string
/** Override the description on the insight page tab, for additional info. */
tooltipDescription?: string
icon: (props?: any) => JSX.Element | null
inMenu: boolean
}

export const INSIGHT_TYPES_METADATA: Record<InsightType, InsightTypeMetadata> = {
[InsightType.TRENDS]: {
name: 'Trends',
description: 'Visualize and break down how actions or events vary over time.',
icon: IconTrends,
inMenu: true,
},
[InsightType.FUNNELS]: {
name: 'Funnel',
description: 'Discover how many users complete or drop out of a sequence of actions.',
icon: IconFunnels,
inMenu: true,
},
[InsightType.RETENTION]: {
name: 'Retention',
description: 'See how many users return on subsequent days after an initial action.',
icon: IconRetention,
inMenu: true,
},
[InsightType.PATHS]: {
name: 'Paths',
description: 'Trace the journeys users take within your product and where they drop off.',
icon: IconUserPaths,
inMenu: true,
},
[InsightType.STICKINESS]: {
name: 'Stickiness',
description: 'See what keeps users coming back by viewing the interval between repeated actions.',
icon: IconStickiness,
inMenu: true,
},
[InsightType.LIFECYCLE]: {
name: 'Lifecycle',
description: 'Understand growth by breaking down new, resurrected, returning and dormant users.',
icon: IconLifecycle,
inMenu: true,
},
[InsightType.SQL]: {
name: 'SQL',
description: 'Use HogQL to query your data.',
icon: IconHogQL,
inMenu: true,
},
[InsightType.JSON]: {
name: 'Custom',
description: 'Save components powered by our JSON query language.',
icon: IconBrackets,
inMenu: true,
},
[InsightType.HOG]: {
name: 'Hog',
description: 'Use Hog to query your data.',
icon: IconHogQL,
inMenu: true,
},
}

export const QUERY_TYPES_METADATA: Record<NodeKind, InsightTypeMetadata> = {
[NodeKind.TrendsQuery]: {
name: 'Trends',
description: 'Visualize and break down how actions or events vary over time',
description: 'Visualize and break down how actions or events vary over time.',
icon: IconTrends,
inMenu: true,
},
[NodeKind.FunnelsQuery]: {
name: 'Funnel',
description: 'Discover how many users complete or drop out of a sequence of actions',
description: 'Discover how many users complete or drop out of a sequence of actions.',
icon: IconFunnels,
inMenu: true,
},
[NodeKind.RetentionQuery]: {
name: 'Retention',
description: 'See how many users return on subsequent days after an initial action',
description: 'See how many users return on subsequent days after an initial action.',
icon: IconRetention,
inMenu: true,
},
[NodeKind.PathsQuery]: {
name: 'Paths',
description: 'Trace the journeys users take within your product and where they drop off',
description: 'Trace the journeys users take within your product and where they drop off.',
icon: IconUserPaths,
inMenu: true,
},
[NodeKind.StickinessQuery]: {
name: 'Stickiness',
description: 'See what keeps users coming back by viewing the interval between repeated actions',
description: 'See what keeps users coming back by viewing the interval between repeated actions.',
icon: IconStickiness,
inMenu: true,
},
[NodeKind.LifecycleQuery]: {
name: 'Lifecycle',
description: 'Understand growth by breaking down new, resurrected, returning and dormant users',
description: 'Understand growth by breaking down new, resurrected, returning and dormant users.',
tooltipDescription:
"Understand growth by breaking down new, resurrected, returning and dormant users. Doesn't include any users only seen in anonymous events.",
icon: IconLifecycle,
inMenu: true,
},
[NodeKind.FunnelCorrelationQuery]: {
name: 'Funnel Correlation',
description: 'See which events or properties correlate to a funnel result',
description: 'See which events or properties correlate to a funnel result.',
icon: IconCorrelationAnalysis,
inMenu: false,
},
[NodeKind.EventsNode]: {
name: 'Events',
description: 'List and explore events',
description: 'List and explore events.',
icon: IconCursor,
inMenu: true,
},
[NodeKind.ActionsNode]: {
name: 'Actions',
description: 'List and explore actions',
description: 'List and explore actions.',
icon: IconAction,
inMenu: true,
},
[NodeKind.DataWarehouseNode]: {
name: 'Data Warehouse',
description: 'List and explore data warehouse tables',
description: 'List and explore data warehouse tables.',
icon: IconTableChart,
inMenu: true,
},
[NodeKind.EventsQuery]: {
name: 'Events Query',
description: 'List and explore events',
description: 'List and explore events.',
icon: IconCursor,
inMenu: true,
},
[NodeKind.PersonsNode]: {
name: 'Persons',
description: 'List and explore your persons',
description: 'List and explore your persons.',
icon: IconPerson,
inMenu: true,
},
[NodeKind.ActorsQuery]: {
name: 'Persons',
description: 'List of persons matching specified conditions',
description: 'List of persons matching specified conditions.',
icon: IconPerson,
inMenu: false,
},
[NodeKind.InsightActorsQuery]: {
name: 'Persons',
description: 'List of persons matching specified conditions, derived from an insight',
description: 'List of persons matching specified conditions, derived from an insight.',
icon: IconPerson,
inMenu: false,
},
[NodeKind.InsightActorsQueryOptions]: {
name: 'Persons',
description: 'Options for InsightActorsQueryt',
description: 'Options for InsightActorsQuery.',
icon: IconPerson,
inMenu: false,
},
[NodeKind.FunnelsActorsQuery]: {
name: 'Persons',
description: 'List of persons matching specified conditions, derived from an insight',
description: 'List of persons matching specified conditions, derived from an insight.',
icon: IconPerson,
inMenu: false,
},
[NodeKind.FunnelCorrelationActorsQuery]: {
name: 'Persons',
description: 'List of persons matching specified conditions, derived from an insight',
description: 'List of persons matching specified conditions, derived from an insight.',
icon: IconPerson,
inMenu: false,
},
[NodeKind.DataTableNode]: {
name: 'Data table',
description: 'Slice and dice your data in a table',
description: 'Slice and dice your data in a table.',
icon: IconTableChart,
inMenu: true,
},
[NodeKind.DataVisualizationNode]: {
name: 'Data visualization',
description: 'Slice and dice your data in a table or chart',
description: 'Slice and dice your data in a table or chart.',
icon: IconTableChart,
inMenu: false,
},
[NodeKind.SavedInsightNode]: {
name: 'Insight visualization by short id',
description: 'View your insights',
description: 'View your insights.',
icon: IconGraph,
inMenu: true,
},
[NodeKind.InsightVizNode]: {
name: 'Insight visualization',
description: 'View your insights',
description: 'View your insights.',
icon: IconGraph,
inMenu: true,
},
[NodeKind.SessionsTimelineQuery]: {
name: 'Sessions',
description: 'Sessions timeline query',
description: 'Sessions timeline query.',
icon: IconTrends,
inMenu: true,
},
[NodeKind.HogQLQuery]: {
name: 'HogQL',
description: 'Direct HogQL query',
description: 'Direct HogQL query.',
icon: IconBrackets,
inMenu: true,
},
[NodeKind.HogQLMetadata]: {
name: 'HogQL Metadata',
description: 'Metadata for a HogQL query',
description: 'Metadata for a HogQL query.',
icon: IconHogQL,
inMenu: true,
},
[NodeKind.HogQLAutocomplete]: {
name: 'HogQL Autocomplete',
description: 'Autocomplete for the HogQL query editor',
description: 'Autocomplete for the HogQL query editor.',
icon: IconHogQL,
inMenu: false,
},
[NodeKind.DatabaseSchemaQuery]: {
name: 'Database Schema',
description: 'Introspect the PostHog database schema',
description: 'Introspect the PostHog database schema.',
icon: IconHogQL,
inMenu: true,
},
[NodeKind.WebOverviewQuery]: {
name: 'Overview Stats',
description: 'View overview stats for a website',
description: 'View overview stats for a website.',
icon: IconPieChart,
inMenu: true,
},
[NodeKind.WebStatsTableQuery]: {
name: 'Web Table',
description: 'A table of results from web analytics, with a breakdown',
description: 'A table of results from web analytics, with a breakdown.',
icon: IconPieChart,
inMenu: true,
},
[NodeKind.WebGoalsQuery]: {
name: 'Goals',
description: 'View goal conversions',
description: 'View goal conversions.',
icon: IconPieChart,
inMenu: true,
},
[NodeKind.WebExternalClicksTableQuery]: {
name: 'External click urls',
description: 'View clicks on external links',
description: 'View clicks on external links.',
icon: IconPieChart,
inMenu: true,
},
[NodeKind.HogQuery]: {
name: 'Hog',
description: 'Hog query',
description: 'Hog query.',
icon: IconHogQL,
inMenu: true,
},
[NodeKind.SessionAttributionExplorerQuery]: {
name: 'Session Attribution',
description: 'Session Attribution Explorer',
description: 'Session Attribution Explorer.',
icon: IconPieChart,
inMenu: true,
},
[NodeKind.ErrorTrackingQuery]: {
name: 'Error Tracking',
description: 'List and explore exception groups',
description: 'List and explore exception groups.',
icon: IconWarning,
inMenu: false,
},
[NodeKind.RecordingsQuery]: {
name: 'Session Recordings',
description: 'View available recordings',
description: 'View available recordings.',
icon: IconVideoCamera,
inMenu: false,
},
[NodeKind.ExperimentTrendsQuery]: {
name: 'Experiment Trends Result',
description: 'View experiment trend result',
description: 'View experiment trend result.',
icon: IconFlask,
inMenu: false,
},
[NodeKind.ExperimentFunnelsQuery]: {
name: 'Experiment Funnels Result',
description: 'View experiment funnel result',
description: 'View experiment funnel result.',
icon: IconFlask,
inMenu: false,
},
Expand All @@ -368,6 +315,33 @@ export const QUERY_TYPES_METADATA: Record<NodeKind, InsightTypeMetadata> = {
},
}

export const INSIGHT_TYPES_METADATA: Record<InsightType, InsightTypeMetadata> = {
[InsightType.TRENDS]: QUERY_TYPES_METADATA[NodeKind.TrendsQuery],
[InsightType.FUNNELS]: QUERY_TYPES_METADATA[NodeKind.FunnelsQuery],
[InsightType.RETENTION]: QUERY_TYPES_METADATA[NodeKind.RetentionQuery],
[InsightType.PATHS]: QUERY_TYPES_METADATA[NodeKind.PathsQuery],
[InsightType.STICKINESS]: QUERY_TYPES_METADATA[NodeKind.StickinessQuery],
[InsightType.LIFECYCLE]: QUERY_TYPES_METADATA[NodeKind.LifecycleQuery],
[InsightType.SQL]: {
name: 'SQL',
description: 'Use HogQL to query your data.',
icon: IconHogQL,
inMenu: true,
},
[InsightType.JSON]: {
name: 'Custom',
description: 'Save components powered by our JSON query language.',
icon: IconBrackets,
inMenu: true,
},
[InsightType.HOG]: {
name: 'Hog',
description: 'Use Hog to query your data.',
icon: IconHogQL,
inMenu: true,
},
}

export const INSIGHT_TYPE_OPTIONS: LemonSelectOptions<string> = [
{ value: 'All types', label: 'All types' },
...Object.entries(INSIGHT_TYPES_METADATA).map(([value, meta]) => ({
Expand Down

0 comments on commit 2ce3224

Please sign in to comment.