diff --git a/frontend/src/exporter/ExportedInsight/ExportedInsight.tsx b/frontend/src/exporter/ExportedInsight/ExportedInsight.tsx index 0304a7db954b1..d472f19bd107b 100644 --- a/frontend/src/exporter/ExportedInsight/ExportedInsight.tsx +++ b/frontend/src/exporter/ExportedInsight/ExportedInsight.tsx @@ -1,7 +1,7 @@ import { ChartDisplayType, InsightLogicProps, InsightModel } from '~/types' import { BindLogic } from 'kea' import { insightLogic } from 'scenes/insights/insightLogic' -import { InsightViz } from 'lib/components/Cards/InsightCard/InsightCard' +import { FilterBasedCardContent } from 'lib/components/Cards/InsightCard/InsightCard' import './ExportedInsight.scss' import { FriendlyLogo } from '~/toolbar/assets/FriendlyLogo' import { InsightLegend } from 'lib/components/InsightLegend/InsightLegend' @@ -91,7 +91,11 @@ export function ExportedInsight({ ) ) : ( - + )} {showLegend ? (
diff --git a/frontend/src/lib/components/Cards/InsightCard/InsightCard.tsx b/frontend/src/lib/components/Cards/InsightCard/InsightCard.tsx index c686e30e77b09..3a0161c9d3844 100644 --- a/frontend/src/lib/components/Cards/InsightCard/InsightCard.tsx +++ b/frontend/src/lib/components/Cards/InsightCard/InsightCard.tsx @@ -1,6 +1,5 @@ import clsx from 'clsx' -import { BindLogic, useActions, useValues } from 'kea' -import { capitalizeFirstLetter } from 'lib/utils' +import { BindLogic, useValues } from 'kea' import React, { useEffect, useState } from 'react' import { Layout } from 'react-grid-layout' import { @@ -11,8 +10,6 @@ import { InsightTimeoutState, } from 'scenes/insights/EmptyStates' import { insightLogic } from 'scenes/insights/insightLogic' -import { urls } from 'scenes/urls' -import { dashboardsModel } from '~/models/dashboardsModel' import { ChartDisplayType, ChartParams, @@ -20,36 +17,23 @@ import { DashboardPlacement, DashboardTile, DashboardType, - ExporterFormat, FilterType, InsightColor, InsightLogicProps, InsightModel, InsightType, } from '~/types' -import { Splotch, SplotchColor } from 'lib/lemon-ui/Splotch' -import { LemonButton, LemonButtonWithDropdown } from 'lib/lemon-ui/LemonButton' -import { LemonDivider } from 'lib/lemon-ui/LemonDivider' -import { Link } from 'lib/lemon-ui/Link' -import { ObjectTags } from 'lib/components/ObjectTags/ObjectTags' import { ResizeHandle1D, ResizeHandle2D } from '../handles' import './InsightCard.scss' -import { InsightDetails } from './InsightDetails' import { funnelLogic } from 'scenes/funnels/funnelLogic' import { ActionsHorizontalBar, ActionsLineGraph, ActionsPie } from 'scenes/trends/viz' import { DashboardInsightsTable } from 'scenes/insights/views/InsightsTable/DashboardInsightsTable' import { Funnel } from 'scenes/funnels/Funnel' import { RetentionContainer } from 'scenes/retention/RetentionContainer' import { Paths } from 'scenes/paths/Paths' -import { eventUsageLogic } from 'lib/utils/eventUsageLogic' -import { groupsModel } from '~/models/groupsModel' -import { cohortsModel } from '~/models/cohortsModel' -import { mathsLogic } from 'scenes/trends/mathsLogic' import { WorldMap } from 'scenes/insights/views/WorldMap' import { LemonBanner } from 'lib/lemon-ui/LemonBanner' -import { UserActivityIndicator } from '../../UserActivityIndicator/UserActivityIndicator' -import { ExportButton } from 'lib/components/ExportButton/ExportButton' import { BoldNumber } from 'scenes/insights/views/BoldNumber' import { SpinnerOverlay } from 'lib/lemon-ui/Spinner/Spinner' import { @@ -59,16 +43,15 @@ import { isRetentionFilter, isTrendsFilter, } from 'scenes/insights/sharedUtils' -import { CardMeta, Resizeable } from 'lib/components/Cards/CardMeta' -import { DashboardPrivilegeLevel, FEATURE_FLAGS } from 'lib/constants' +import { Resizeable } from 'lib/components/Cards/CardMeta' import { Query } from '~/queries/Query/Query' -import { PieChartFilled } from '@ant-design/icons' -import { Tooltip } from 'lib/lemon-ui/Tooltip' import { QueriesUnsupportedHere } from 'lib/components/Cards/InsightCard/QueriesUnsupportedHere' -import { featureFlagLogic } from 'lib/logic/featureFlagLogic' -import { TopHeading } from 'lib/components/Cards/InsightCard/TopHeading' -import { summarizeInsight } from 'scenes/insights/summarizeInsight' import { QueryContext } from '~/queries/schema' +import { InsightMeta } from './InsightMeta' +import { dataNodeLogic, DataNodeLogicProps } from '~/queries/nodes/DataNode/dataNodeLogic' +import { filtersToQueryNode } from '~/queries/nodes/InsightQuery/utils/filtersToQueryNode' +import { insightVizDataNodeKey } from '~/queries/nodes/InsightViz/InsightViz' +import { getCachedResults } from '~/queries/nodes/InsightViz/utils' type DisplayedType = ChartDisplayType | 'RetentionContainer' | 'FunnelContainer' | 'PathsContainer' @@ -173,252 +156,13 @@ export interface InsightCardProps extends Resizeable, React.HTMLAttributes { - /** - * Optional callback to update height of the primary InsightMeta div. Allow for coordinating InsightViz height - * with InsightMeta in a way that makes it possible for meta to overlay viz in expanded (InsightDetails) state. - */ - setPrimaryHeight?: (primaryHeight: number | undefined) => void - areDetailsShown?: boolean - setAreDetailsShown?: React.Dispatch> -} - -function InsightMeta({ - insight, - ribbonColor, - dashboardId, - updateColor, - removeFromDashboard, - deleteWithUndo, - refresh, - rename, - duplicate, - moveToDashboard, - setPrimaryHeight, - areDetailsShown, - setAreDetailsShown, - showEditingControls = true, - showDetailsControls = true, - moreButtons, -}: InsightMetaProps): JSX.Element { - const { short_id, name, dashboards } = insight - const { exporterResourceParams, insightProps } = useValues(insightLogic) - const { reportDashboardItemRefreshed } = useActions(eventUsageLogic) - const { aggregationLabel } = useValues(groupsModel) - const { cohortsById } = useValues(cohortsModel) - const { nameSortedDashboards } = useValues(dashboardsModel) - const { mathDefinitions } = useValues(mathsLogic) - const { featureFlags } = useValues(featureFlagLogic) - - const otherDashboards = nameSortedDashboards.filter((d) => !dashboards?.includes(d.id)) - const editable = insight.effective_privilege_level >= DashboardPrivilegeLevel.CanEdit - - // not all interactions are currently implemented for queries - const allInteractionsAllowed = !insight.query - - const summary = summarizeInsight(insight.query, insight.filters, { - aggregationLabel, - cohortsById, - mathDefinitions, - isUsingDashboardQueries: !!featureFlags[FEATURE_FLAGS.HOGQL], - }) - - return ( - } - meta={ - <> - -

- {name || {summary}} -

- - - {!!insight.description &&
{insight.description}
} - {insight.tags && insight.tags.length > 0 && } - - - } - metaDetails={} - samplingNotice={ - insight.filters.sampling_factor && insight.filters.sampling_factor < 1 ? ( - - - - ) : null - } - moreButtons={ - <> - {allInteractionsAllowed && ( - <> - - View - - {refresh && ( - { - refresh() - reportDashboardItemRefreshed(insight) - }} - fullWidth - > - Refresh - - )} - - )} - {editable && updateColor && ( - ( - updateColor(availableColor)} - icon={ - availableColor !== InsightColor.White ? ( - - ) : null - } - fullWidth - > - {availableColor !== InsightColor.White - ? capitalizeFirstLetter(availableColor) - : 'No color'} - - )), - placement: 'right-start', - fallbackPlacements: ['left-start'], - actionable: true, - closeParentPopoverOnClickInside: true, - }} - fullWidth - > - Set color - - )} - {editable && moveToDashboard && otherDashboards.length > 0 && ( - ( - { - moveToDashboard(otherDashboard) - }} - fullWidth - > - {otherDashboard.name || Untitled} - - )), - placement: 'right-start', - fallbackPlacements: ['left-start'], - actionable: true, - closeParentPopoverOnClickInside: true, - }} - fullWidth - > - Move to - - )} - - {editable && allInteractionsAllowed && ( - - Edit - - )} - {editable && ( - - Rename - - )} - - Duplicate - - - {exporterResourceParams ? ( - - ) : null} - {moreButtons && ( - <> - - {moreButtons} - - )} - {editable && ( - <> - - {removeFromDashboard ? ( - - Remove from dashboard - - ) : allInteractionsAllowed ? ( - - Delete insight - - ) : null} - - )} - - } - /> - ) -} - function VizComponentFallback(): JSX.Element { return Unknown insight display type } -export interface InsightVizProps +export interface FilterBasedCardContentProps extends Pick { + insightProps: InsightLogicProps tooFewFunnelSteps?: boolean invalidFunnelExclusion?: boolean empty?: boolean @@ -427,8 +171,9 @@ export interface InsightVizProps context?: QueryContext } -export function InsightViz({ +export function FilterBasedCardContent({ insight, + insightProps, loading, setAreDetailsShown, style, @@ -438,10 +183,15 @@ export function InsightViz({ tooFewFunnelSteps, invalidFunnelExclusion, context, -}: InsightVizProps): JSX.Element { +}: FilterBasedCardContentProps): JSX.Element { const displayedType = getDisplayedType(insight.filters) const VizComponent = displayMap[displayedType]?.element || VizComponentFallback - + const query = filtersToQueryNode(insight.filters) + const dataNodeLogicProps: DataNodeLogicProps = { + query, + key: insightVizDataNodeKey(insightProps), + cachedResults: getCachedResults(insightProps.cachedInsight, query), + } useEffect(() => { // If displaying a BoldNumber Trends insight, we need to fire the window resize event // Without this, the value is only autosized before `metaPrimaryHeight` is determined, so it's wrong @@ -456,37 +206,39 @@ export function InsightViz({ }, [style?.height]) return ( -
{ - setAreDetailsShown?.(false) - } - : undefined - } - > - {loading && } - {tooFewFunnelSteps ? ( - - ) : invalidFunnelExclusion ? ( - - ) : empty ? ( - - ) : !loading && timedOut ? ( - - ) : apiErrored && !loading ? ( - - ) : ( - !apiErrored && - )} -
+ +
{ + setAreDetailsShown?.(false) + } + : undefined + } + > + {loading && } + {tooFewFunnelSteps ? ( + + ) : invalidFunnelExclusion ? ( + + ) : empty ? ( + + ) : !loading && timedOut ? ( + + ) : apiErrored && !loading ? ( + + ) : ( + !apiErrored && + )} +
+ ) } @@ -613,8 +365,9 @@ function InsightCardInternal( )}
) : ( - { + /** + * Optional callback to update height of the primary InsightMeta div. Allow for coordinating InsightViz height + * with InsightMeta in a way that makes it possible for meta to overlay viz in expanded (InsightDetails) state. + */ + setPrimaryHeight?: (primaryHeight: number | undefined) => void + areDetailsShown?: boolean + setAreDetailsShown?: React.Dispatch> +} + +export function InsightMeta({ + insight, + ribbonColor, + dashboardId, + updateColor, + removeFromDashboard, + deleteWithUndo, + refresh, + rename, + duplicate, + moveToDashboard, + setPrimaryHeight, + areDetailsShown, + setAreDetailsShown, + showEditingControls = true, + showDetailsControls = true, + moreButtons, +}: InsightMetaProps): JSX.Element { + const { short_id, name, dashboards } = insight + const { exporterResourceParams, insightProps } = useValues(insightLogic) + const { reportDashboardItemRefreshed } = useActions(eventUsageLogic) + const { aggregationLabel } = useValues(groupsModel) + const { cohortsById } = useValues(cohortsModel) + const { nameSortedDashboards } = useValues(dashboardsModel) + const { mathDefinitions } = useValues(mathsLogic) + const { featureFlags } = useValues(featureFlagLogic) + + const otherDashboards = nameSortedDashboards.filter((d) => !dashboards?.includes(d.id)) + const editable = insight.effective_privilege_level >= DashboardPrivilegeLevel.CanEdit + + // not all interactions are currently implemented for queries + const allInteractionsAllowed = !insight.query + + const summary = summarizeInsight(insight.query, insight.filters, { + aggregationLabel, + cohortsById, + mathDefinitions, + isUsingDashboardQueries: !!featureFlags[FEATURE_FLAGS.HOGQL], + }) + + return ( + } + meta={ + <> + +

+ {name || {summary}} +

+ + + {!!insight.description &&
{insight.description}
} + {insight.tags && insight.tags.length > 0 && } + + + } + metaDetails={} + samplingNotice={ + insight.filters.sampling_factor && insight.filters.sampling_factor < 1 ? ( + + + + ) : null + } + moreButtons={ + <> + {allInteractionsAllowed && ( + <> + + View + + {refresh && ( + { + refresh() + reportDashboardItemRefreshed(insight) + }} + fullWidth + > + Refresh + + )} + + )} + {editable && updateColor && ( + ( + updateColor(availableColor)} + icon={ + availableColor !== InsightColor.White ? ( + + ) : null + } + fullWidth + > + {availableColor !== InsightColor.White + ? capitalizeFirstLetter(availableColor) + : 'No color'} + + )), + placement: 'right-start', + fallbackPlacements: ['left-start'], + actionable: true, + closeParentPopoverOnClickInside: true, + }} + fullWidth + > + Set color + + )} + {editable && moveToDashboard && otherDashboards.length > 0 && ( + ( + { + moveToDashboard(otherDashboard) + }} + fullWidth + > + {otherDashboard.name || Untitled} + + )), + placement: 'right-start', + fallbackPlacements: ['left-start'], + actionable: true, + closeParentPopoverOnClickInside: true, + }} + fullWidth + > + Move to + + )} + + {editable && allInteractionsAllowed && ( + + Edit + + )} + {editable && ( + + Rename + + )} + + Duplicate + + + {exporterResourceParams ? ( + + ) : null} + {moreButtons && ( + <> + + {moreButtons} + + )} + {editable && ( + <> + + {removeFromDashboard ? ( + + Remove from dashboard + + ) : allInteractionsAllowed ? ( + + Delete insight + + ) : null} + + )} + + } + /> + ) +} diff --git a/frontend/src/queries/nodes/DataNode/dataNodeLogic.ts b/frontend/src/queries/nodes/DataNode/dataNodeLogic.ts index 24aeda338a100..db829c683b6b7 100644 --- a/frontend/src/queries/nodes/DataNode/dataNodeLogic.ts +++ b/frontend/src/queries/nodes/DataNode/dataNodeLogic.ts @@ -26,6 +26,7 @@ import { removeExpressionComment } from '~/queries/nodes/DataTable/utils' import { userLogic } from 'scenes/userLogic' import { UNSAVED_INSIGHT_MIN_REFRESH_INTERVAL_MINUTES } from 'scenes/insights/insightLogic' import { teamLogic } from 'scenes/teamLogic' +import equal from 'fast-deep-equal' export interface DataNodeLogicProps { key: string @@ -44,14 +45,17 @@ export const dataNodeLogic = kea([ }), props({} as DataNodeLogicProps), key((props) => props.key), - propsChanged(({ actions, props }, oldProps) => { + propsChanged(({ actions, props, values }, oldProps) => { if (props.query?.kind && oldProps.query?.kind && props.query.kind !== oldProps.query.kind) { actions.clearResponse() } if (props.query?.kind && !objectsEqual(props.query, oldProps.query) && !props.cachedResults) { actions.loadData() } - if (props.cachedResults && oldProps.cachedResults == null) { + if ( + props.cachedResults && + (!values.response || (oldProps.cachedResults && !equal(props.cachedResults, oldProps.cachedResults))) + ) { actions.setResponse(props.cachedResults) } }), diff --git a/frontend/src/queries/nodes/InsightViz/InsightViz.tsx b/frontend/src/queries/nodes/InsightViz/InsightViz.tsx index 1d73b834f45d7..451c485e3fb43 100644 --- a/frontend/src/queries/nodes/InsightViz/InsightViz.tsx +++ b/frontend/src/queries/nodes/InsightViz/InsightViz.tsx @@ -1,6 +1,5 @@ import { BindLogic, useValues } from 'kea' import clsx from 'clsx' -import equal from 'fast-deep-equal' import { insightLogic } from 'scenes/insights/insightLogic' import { insightSceneLogic } from 'scenes/insights/insightSceneLogic' @@ -11,31 +10,9 @@ import { InsightQueryNode, InsightVizNode, QueryContext } from '../../schema' import { InsightContainer } from './InsightContainer' import { EditorFilters } from './EditorFilters' -import { InsightLogicProps, InsightModel, ItemMode } from '~/types' +import { InsightLogicProps, ItemMode } from '~/types' import { keyForInsightLogicProps } from 'scenes/insights/sharedUtils' -import { filtersToQueryNode } from '../InsightQuery/utils/filtersToQueryNode' - -const getCachedResults = ( - cachedInsight: Partial | undefined | null, - query: InsightQueryNode -): Partial | undefined => { - if ( - !cachedInsight || - cachedInsight.result === null || - cachedInsight.result === undefined || - cachedInsight.filters === undefined - ) { - return undefined - } - - // only set the cached result when the filters match the currently set ones - const cachedQueryNode = filtersToQueryNode(cachedInsight.filters) - if (!equal(cachedQueryNode, query)) { - return undefined - } - - return cachedInsight -} +import { getCachedResults } from './utils' /** The key for the dataNodeLogic mounted by an InsightViz for insight of insightProps */ export const insightVizDataNodeKey = (insightProps: InsightLogicProps): string => { diff --git a/frontend/src/queries/nodes/InsightViz/utils.ts b/frontend/src/queries/nodes/InsightViz/utils.ts index fa327c9780697..2af7b61c06bcb 100644 --- a/frontend/src/queries/nodes/InsightViz/utils.ts +++ b/frontend/src/queries/nodes/InsightViz/utils.ts @@ -1,5 +1,5 @@ import { ActionsNode, BreakdownFilter, EventsNode, InsightQueryNode, TrendsQuery } from '~/queries/schema' -import { ActionType, ChartDisplayType, IntervalType } from '~/types' +import { ActionType, ChartDisplayType, InsightModel, IntervalType } from '~/types' import { seriesToActionsAndEvents } from '../InsightQuery/utils/queryNodeToFilter' import { getEventNamesForAction } from 'lib/utils' import { @@ -8,6 +8,8 @@ import { isStickinessQuery, isTrendsQuery, } from '~/queries/utils' +import { filtersToQueryNode } from '../InsightQuery/utils/filtersToQueryNode' +import equal from 'fast-deep-equal' export const getAllEventNames = (query: InsightQueryNode, allActions: ActionType[]): string[] => { const { actions, events } = seriesToActionsAndEvents((query as TrendsQuery).series || []) @@ -77,3 +79,25 @@ export const getBreakdown = (query: InsightQueryNode): BreakdownFilter | undefin return undefined } } + +export const getCachedResults = ( + cachedInsight: Partial | undefined | null, + query: InsightQueryNode +): Partial | undefined => { + if ( + !cachedInsight || + cachedInsight.result === null || + cachedInsight.result === undefined || + cachedInsight.filters === undefined + ) { + return undefined + } + + // only set the cached result when the filters match the currently set ones + const cachedQueryNode = filtersToQueryNode(cachedInsight.filters) + if (!equal(cachedQueryNode, query)) { + return undefined + } + + return cachedInsight +} diff --git a/frontend/src/scenes/insights/insightVizDataLogic.ts b/frontend/src/scenes/insights/insightVizDataLogic.ts index 2b2c27e580684..190b608e11d32 100644 --- a/frontend/src/scenes/insights/insightVizDataLogic.ts +++ b/frontend/src/scenes/insights/insightVizDataLogic.ts @@ -65,7 +65,12 @@ export const insightVizDataLogic = kea([ ['query'], // TODO: need to pass empty query here, as otherwise dataNodeLogic will throw dataNodeLogic({ key: insightVizDataNodeKey(props), query: {} as DataNode }), - ['response as insightData', 'dataLoading as insightDataLoading', 'responseErrorObject as insightDataError'], + [ + 'response as insightData', + 'dataLoading as insightDataLoading', + 'responseErrorObject as insightDataError', + 'query as insightQuery', + ], filterTestAccountsDefaultsLogic, ['filterTestAccountsDefault'], ], diff --git a/frontend/src/scenes/retention/RetentionLineGraph.tsx b/frontend/src/scenes/retention/RetentionLineGraph.tsx index 96ee0dacec807..d100e6b208a65 100644 --- a/frontend/src/scenes/retention/RetentionLineGraph.tsx +++ b/frontend/src/scenes/retention/RetentionLineGraph.tsx @@ -1,7 +1,6 @@ import { useActions, useValues } from 'kea' import { insightLogic } from 'scenes/insights/insightLogic' -import { retentionLogic } from './retentionLogic' import { retentionLineGraphLogic } from './retentionLineGraphLogic' import { retentionModalLogic } from './retentionModalLogic' @@ -16,8 +15,9 @@ interface RetentionLineGraphProps { export function RetentionLineGraph({ inSharedMode = false }: RetentionLineGraphProps): JSX.Element | null { const { insightProps } = useValues(insightLogic) - const { filters } = useValues(retentionLogic(insightProps)) - const { trendSeries, incompletenessOffsetFromEnd } = useValues(retentionLineGraphLogic(insightProps)) + const { trendSeries, incompletenessOffsetFromEnd, aggregationGroupTypeIndex } = useValues( + retentionLineGraphLogic(insightProps) + ) const { openModal } = useActions(retentionModalLogic(insightProps)) if (trendSeries.length === 0) { @@ -33,7 +33,7 @@ export function RetentionLineGraph({ inSharedMode = false }: RetentionLineGraphP isInProgress={incompletenessOffsetFromEnd < 0} inSharedMode={!!inSharedMode} showPersonsModal={false} - labelGroupType={filters.aggregation_group_type_index ?? 'people'} + labelGroupType={aggregationGroupTypeIndex} filters={{ aggregation_axis_format: 'percentage' }} tooltip={{ rowCutoff: 11, // 11 time units is hardcoded into retention insights diff --git a/frontend/src/scenes/retention/retentionLineGraphLogic.ts b/frontend/src/scenes/retention/retentionLineGraphLogic.ts index d962c675c6c10..f0624e1599954 100644 --- a/frontend/src/scenes/retention/retentionLineGraphLogic.ts +++ b/frontend/src/scenes/retention/retentionLineGraphLogic.ts @@ -17,7 +17,12 @@ export const retentionLineGraphLogic = kea({ key: keyForInsightLogicProps(DEFAULT_RETENTION_LOGIC_KEY), path: (key) => ['scenes', 'retention', 'retentionLineGraphLogic', key], connect: (props: InsightLogicProps) => ({ - values: [insightVizDataLogic(props), ['retentionFilter', 'dateRange'], retentionLogic(props), ['results']], + values: [ + insightVizDataLogic(props), + ['querySource', 'dateRange', 'retentionFilter'], + retentionLogic(props), + ['results'], + ], }), selectors: { @@ -109,5 +114,12 @@ export const retentionLineGraphLogic = kea({ } }, ], + + aggregationGroupTypeIndex: [ + (s) => [s.querySource], + (querySource) => { + return querySource?.aggregation_group_type_index ?? 'people' + }, + ], }, }) diff --git a/frontend/src/scenes/retention/retentionLogic.ts b/frontend/src/scenes/retention/retentionLogic.ts index dc5bedf2009fa..5f5ae5f7fd75f 100644 --- a/frontend/src/scenes/retention/retentionLogic.ts +++ b/frontend/src/scenes/retention/retentionLogic.ts @@ -1,10 +1,9 @@ import { kea } from 'kea' -import { insightLogic } from 'scenes/insights/insightLogic' import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic' import { keyForInsightLogicProps } from 'scenes/insights/sharedUtils' -import { isRetentionFilter } from 'scenes/insights/sharedUtils' import { RetentionTablePayload } from 'scenes/retention/types' -import { InsightLogicProps, InsightType, RetentionFilterType } from '~/types' +import { isRetentionQuery } from '~/queries/utils' +import { InsightLogicProps } from '~/types' import type { retentionLogicType } from './retentionLogicType' @@ -15,24 +14,14 @@ export const retentionLogic = kea({ key: keyForInsightLogicProps(DEFAULT_RETENTION_LOGIC_KEY), path: (key) => ['scenes', 'retention', 'retentionLogic', key], connect: (props: InsightLogicProps) => ({ - values: [ - insightLogic(props), - ['filters as inflightFilters', 'insight'], - insightVizDataLogic(props), - ['querySource'], - ], + values: [insightVizDataLogic(props), ['insightQuery', 'insightData', 'querySource']], }), selectors: { - filters: [ - (s) => [s.inflightFilters], - (inflightFilters): Partial => - inflightFilters && isRetentionFilter(inflightFilters) ? inflightFilters : {}, - ], results: [ // Take the insight result, and cast it to `RetentionTablePayload[]` - (s) => [s.insight], - ({ filters, result }): RetentionTablePayload[] => { - return filters?.insight === InsightType.RETENTION ? result ?? [] : [] + (s) => [s.insightQuery, s.insightData], + (insightQuery, insightData): RetentionTablePayload[] => { + return isRetentionQuery(insightQuery) ? insightData?.result ?? [] : [] }, ], }, diff --git a/frontend/src/scenes/retention/retentionPeopleLogic.ts b/frontend/src/scenes/retention/retentionPeopleLogic.ts index 4d165d82e63c6..06b2fae8c10e5 100644 --- a/frontend/src/scenes/retention/retentionPeopleLogic.ts +++ b/frontend/src/scenes/retention/retentionPeopleLogic.ts @@ -6,7 +6,6 @@ import { RetentionTablePeoplePayload } from 'scenes/retention/types' import { InsightLogicProps } from '~/types' import { queryNodeToFilter } from '~/queries/nodes/InsightQuery/utils/queryNodeToFilter' -import { insightLogic } from 'scenes/insights/insightLogic' import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic' import type { retentionPeopleLogicType } from './retentionPeopleLogicType' @@ -19,7 +18,7 @@ export const retentionPeopleLogic = kea({ path: (key) => ['scenes', 'retention', 'retentionPeopleLogic', key], connect: (props: InsightLogicProps) => ({ values: [insightVizDataLogic(props), ['querySource']], - actions: [insightLogic(props), ['loadResultsSuccess']], + actions: [insightVizDataLogic(props), ['loadDataSuccess']], }), actions: () => ({ clearPeople: true, @@ -53,7 +52,7 @@ export const retentionPeopleLogic = kea({ ], }, listeners: ({ actions, values }) => ({ - loadResultsSuccess: async () => { + loadDataSuccess: async () => { // clear people when changing the insight filters actions.clearPeople() },