From 2ce322456c22444337017de8b1cd74ef92300bf8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Thomas=20Obermu=CC=88ller?= Date: Fri, 3 Jan 2025 11:39:37 +0100 Subject: [PATCH] feat(lifecycle): add personless events note to tooltip --- .../insights/InsightNav/InsightsNav.tsx | 8 +- .../scenes/saved-insights/SavedInsights.tsx | 160 ++++++++---------- 2 files changed, 74 insertions(+), 94 deletions(-) diff --git a/frontend/src/scenes/insights/InsightNav/InsightsNav.tsx b/frontend/src/scenes/insights/InsightNav/InsightsNav.tsx index 376432761566f..f5f9527be8859 100644 --- a/frontend/src/scenes/insights/InsightNav/InsightsNav.tsx +++ b/frontend/src/scenes/insights/InsightNav/InsightsNav.tsx @@ -26,7 +26,13 @@ export function InsightsNav(): JSX.Element { key: type, label: ( - + {label} diff --git a/frontend/src/scenes/saved-insights/SavedInsights.tsx b/frontend/src/scenes/saved-insights/SavedInsights.tsx index bd155048b0490..4fddc16e00b4a 100644 --- a/frontend/src/scenes/saved-insights/SavedInsights.tsx +++ b/frontend/src/scenes/saved-insights/SavedInsights.tsx @@ -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.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.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, }, @@ -368,6 +315,33 @@ export const QUERY_TYPES_METADATA: Record = { }, } +export const INSIGHT_TYPES_METADATA: Record = { + [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 = [ { value: 'All types', label: 'All types' }, ...Object.entries(INSIGHT_TYPES_METADATA).map(([value, meta]) => ({