warn users of things that can make insights slow

frontend/src/queries/nodes/DataNode/dataNodeLogic.ts

@@ -163,6 +163,7 @@ export const dataNodeLogic = kea<dataNodeLogicType>([
         setElapsedTime: (elapsedTime: number) => ({ elapsedTime }),
         setPollResponse: (status: QueryStatus | null) => ({ status }),
         setLocalCache: (response: Record<string, any>) => response,
+        setLoadingTime: (seconds: number) => ({ seconds }),
     }),
     loaders(({ actions, cache, values, props }) => ({
         response: [
@@ -477,6 +478,15 @@ export const dataNodeLogic = kea<dataNodeLogicType>([
                 setLocalCache: (state, response) => ({ ...state, ...response }),
             },
         ],
+        loadingTimeSeconds: [
+            0,
+            {
+                loadData: () => 0,
+                loadDataSuccess: () => 0,
+                loadDataFailure: () => 0,
+                setLoadingTime: (_, { seconds }) => seconds,
+            },
+        ],
     })),
     selectors(({ cache }) => ({
         variableOverridesAreSet: [
@@ -741,6 +751,20 @@ export const dataNodeLogic = kea<dataNodeLogicType>([
                 }, AUTOLOAD_INTERVAL)
             }
         },
+        dataLoading: (dataLoading) => {
+            if (cache.loadingTimer) {
+                window.clearInterval(cache.loadingTimer)
+                cache.loadingTimer = null
+            }
+
+            if (dataLoading) {
+                const startTime = Date.now()
+                cache.loadingTimer = window.setInterval(() => {
+                    const seconds = Math.floor((Date.now() - startTime) / 1000)
+                    actions.setLoadingTime(seconds)
+                }, 1000)
+            }
+        },
     })),
     afterMount(({ actions, props, cache }) => {
         cache.localResults = {}
@@ -759,7 +783,7 @@ export const dataNodeLogic = kea<dataNodeLogicType>([
             cancelQuery: actions.cancelQuery,
         })
     }),
-    beforeUnmount(({ actions, props, values }) => {
+    beforeUnmount(({ actions, props, values, cache }) => {
         if (values.autoLoadRunning) {
             actions.stopAutoLoad()
         }
@@ -768,5 +792,9 @@ export const dataNodeLogic = kea<dataNodeLogicType>([
         }
 
         actions.unmountDataNode(props.key)
+        if (cache.loadingTimer) {
+            window.clearInterval(cache.loadingTimer)
+            cache.loadingTimer = null
+        }
     }),
 ])

frontend/src/scenes/insights/EmptyStates/EmptyStates.tsx

@@ -25,7 +25,7 @@ import { urls } from 'scenes/urls'
 import { actionsAndEventsToSeries } from '~/queries/nodes/InsightQuery/utils/filtersToQueryNode'
 import { seriesToActionsAndEvents } from '~/queries/nodes/InsightQuery/utils/queryNodeToFilter'
 import { FunnelsQuery, Node, QueryStatus } from '~/queries/schema'
-import { FilterType, InsightLogicProps, SavedInsightsTabs } from '~/types'
+import { FilterType, InsightLogicProps, SavedInsightsTabs, SlowQueryPossibilities } from '~/types'
 
 import { samplingFilterLogic } from '../EditorFilters/samplingFilterLogic'
 import { MathAvailability } from '../filters/ActionFilter/ActionFilterRow/ActionFilterRow'
@@ -245,6 +245,58 @@ export function StatelessInsightLoadingState({
     )
 }
 
+export function SlowQuerySuggestions({
+    slowQueryPossibilities,
+    insightProps,
+    suggestedSamplingPercentage,
+    samplingPercentage,
+    loadingTimeSeconds = 0,
+}: {
+    slowQueryPossibilities: SlowQueryPossibilities[]
+    insightProps: InsightLogicProps
+    suggestedSamplingPercentage?: number | null
+    samplingPercentage?: number | null
+    loadingTimeSeconds?: number | null
+}): JSX.Element | null {
+    const paragraphText = 'Need to speed things up? Steps to optimize this query:'
+    const codeClassName = 'border border-1 border-border-bold rounded-sm text-xs px-1 py-0.5'
+
+    return loadingTimeSeconds && loadingTimeSeconds > 7 ? (
+        <div>
+            <p data-attr="insight-loading-waiting-message" className="mb-2">
+                {paragraphText}
+            </p>
+            <ul className="mb-4 list-disc list-inside ml-4">
+                {slowQueryPossibilities.includes('all_events') ? (
+                    <li>
+                        Don't use the <code className={codeClassName}>All events</code> event type. Use a specific event
+                        instead.
+                    </li>
+                ) : null}
+                {slowQueryPossibilities.includes('first_time_for_user') ? (
+                    <li>
+                        When possible, avoid <code className={codeClassName}>First time for user</code> metric types.
+                    </li>
+                ) : null}
+                <li>Reduce the date range.</li>
+                {loadingTimeSeconds && loadingTimeSeconds > 12 && suggestedSamplingPercentage ? (
+                    <li>
+                        {samplingPercentage ? (
+                            <>
+                                Reduce volume further with <SamplingLink insightProps={insightProps} />.
+                            </>
+                        ) : (
+                            <>
+                                Turn on <SamplingLink insightProps={insightProps} />.
+                            </>
+                        )}
+                    </li>
+                ) : null}
+            </ul>
+        </div>
+    ) : null
+}
+
 export function InsightLoadingState({
     queryId,
     insightProps,
@@ -253,7 +305,9 @@ export function InsightLoadingState({
     insightProps: InsightLogicProps
 }): JSX.Element {
     const { suggestedSamplingPercentage, samplingPercentage } = useValues(samplingFilterLogic(insightProps))
-    const { insightPollResponse } = useValues(insightDataLogic(insightProps))
+    const { insightPollResponse, slowQueryPossibilities, insightLoadingTimeSeconds } = useValues(
+        insightDataLogic(insightProps)
+    )
     const { currentTeam } = useValues(teamLogic)
 
     const personsOnEventsMode =
@@ -273,24 +327,13 @@ export function InsightLoadingState({
                             </p>
                         </>
                     ) : (
-                        <>
-                            <p className="text-xs m-0">
-                                {suggestedSamplingPercentage && !samplingPercentage ? (
-                                    <span data-attr="insight-loading-waiting-message">
-                                        Need to speed things up? Try reducing the date range, removing breakdowns, or
-                                        turning on <SamplingLink insightProps={insightProps} />.
-                                    </span>
-                                ) : suggestedSamplingPercentage && samplingPercentage ? (
-                                    <>
-                                        Still waiting around? You must have lots of data! Kick it up a notch with{' '}
-                                        <SamplingLink insightProps={insightProps} />. Or try reducing the date range and
-                                        removing breakdowns.
-                                    </>
-                                ) : (
-                                    <>Need to speed things up? Try reducing the date range or removing breakdowns.</>
-                                )}
-                            </p>
-                        </>
+                        <SlowQuerySuggestions
+                            slowQueryPossibilities={slowQueryPossibilities}
+                            insightProps={insightProps}
+                            suggestedSamplingPercentage={suggestedSamplingPercentage}
+                            samplingPercentage={samplingPercentage}
+                            loadingTimeSeconds={insightLoadingTimeSeconds}
+                        />
                     )}
                 </div>
             }

frontend/src/scenes/insights/insightDataLogic.tsx

@@ -14,7 +14,7 @@ import { getDefaultQuery, queryFromKind } from '~/queries/nodes/InsightViz/utils
 import { queryExportContext } from '~/queries/query'
 import { DataVisualizationNode, InsightVizNode, Node, NodeKind } from '~/queries/schema/schema-general'
 import { isDataTableNode, isDataVisualizationNode, isHogQLQuery, isHogQuery, isInsightVizNode } from '~/queries/utils'
-import { ExportContext, InsightLogicProps, InsightType } from '~/types'
+import { ExportContext, InsightLogicProps, InsightType, SlowQueryPossibilities } from '~/types'
 
 import { teamLogic } from '../teamLogic'
 import type { insightDataLogicType } from './insightDataLogicType'
@@ -48,6 +48,7 @@ export const insightDataLogic = kea<insightDataLogicType>([
                 'query as insightQuery',
                 'response as insightDataRaw',
                 'dataLoading as insightDataLoading',
+                'loadingTimeSeconds as insightLoadingTimeSeconds',
                 'responseErrorObject as insightDataError',
                 'getInsightRefreshButtonDisabledReason',
                 'pollResponse as insightPollResponse',
@@ -187,6 +188,39 @@ export const insightDataLogic = kea<insightDataLogicType>([
                 return null
             },
         ],
+        isAllEventsQuery: [
+            (s) => [s.query],
+            (query) => {
+                return (
+                    query?.source?.kind === NodeKind.TrendsQuery &&
+                    query?.source?.series?.some((s) => s.name === 'All events')
+                )
+            },
+        ],
+        isFirstTimeForUserQuery: [
+            (s) => [s.query],
+            (query) => {
+                return (
+                    query?.source?.kind === NodeKind.TrendsQuery &&
+                    query?.source?.series?.some((s) =>
+                        ['first_matching_event_for_user', 'first_time_for_user'].includes(s.math)
+                    )
+                )
+            },
+        ],
+        slowQueryPossibilities: [
+            (s) => [s.isAllEventsQuery, s.isFirstTimeForUserQuery],
+            (isAllEventsQuery, isFirstTimeForUserQuery): SlowQueryPossibilities[] => {
+                const possibilities: SlowQueryPossibilities[] = []
+                if (isAllEventsQuery) {
+                    possibilities.push('all_events')
+                }
+                if (isFirstTimeForUserQuery) {
+                    possibilities.push('first_time_for_user')
+                }
+                return possibilities
+            },
+        ],
     }),
 
     listeners(({ actions, values }) => ({

frontend/src/types.ts

@@ -2230,6 +2230,8 @@ export enum RetentionPeriod {
     Month = 'Month',
 }
 
+export type SlowQueryPossibilities = 'all_events' | 'large_date_range' | 'first_time_for_user'
+
 // eslint-disable-next-line @typescript-eslint/no-duplicate-type-constituents
 export type BreakdownKeyType = integer | string | number | (integer | string | number)[] | null