diff --git a/frontend/src/queries/nodes/InsightViz/InsightContainer.tsx b/frontend/src/queries/nodes/InsightViz/InsightContainer.tsx index b43068107c582..b7148df4b6b66 100644 --- a/frontend/src/queries/nodes/InsightViz/InsightContainer.tsx +++ b/frontend/src/queries/nodes/InsightViz/InsightContainer.tsx @@ -36,15 +36,6 @@ import { FunnelCorrelation } from 'scenes/insights/views/Funnels/FunnelCorrelati import { InsightResultMetadata } from './InsightResultMetadata' import { Link } from '@posthog/lemon-ui' -const VIEW_MAP = { - [`${InsightType.TRENDS}`]: , - [`${InsightType.STICKINESS}`]: , - [`${InsightType.LIFECYCLE}`]: , - [`${InsightType.FUNNELS}`]: , - [`${InsightType.RETENTION}`]: , - [`${InsightType.PATHS}`]: , -} - export function InsightContainer({ disableHeader, disableTable, @@ -135,6 +126,25 @@ export function InsightContainer({ return null })() + function renderActiveView(): JSX.Element | null { + switch (activeView) { + case InsightType.TRENDS: + return + case InsightType.STICKINESS: + return + case InsightType.LIFECYCLE: + return + case InsightType.FUNNELS: + return + case InsightType.RETENTION: + return + case InsightType.PATHS: + return + default: + return null + } + } + function renderTable(): JSX.Element | null { if ( isFunnels && @@ -255,13 +265,13 @@ export function InsightContainer({ BlockingEmptyState ) : supportsDisplay && showLegend ? (
-
{VIEW_MAP[activeView]}
+
{renderActiveView()}
) : ( - VIEW_MAP[activeView] + renderActiveView() )} )} diff --git a/frontend/src/queries/nodes/InsightViz/InsightViz.tsx b/frontend/src/queries/nodes/InsightViz/InsightViz.tsx index 41bdbb0f0f278..80c3c66ca3ab6 100644 --- a/frontend/src/queries/nodes/InsightViz/InsightViz.tsx +++ b/frontend/src/queries/nodes/InsightViz/InsightViz.tsx @@ -36,11 +36,10 @@ let uniqueNode = 0 export function InsightViz({ uniqueKey, query, setQuery, context, readOnly }: InsightVizProps): JSX.Element { const [key] = useState(() => `InsightViz.${uniqueKey || uniqueNode++}`) - const insightProps: InsightLogicProps = { + const insightProps: InsightLogicProps = context?.insightProps || { dashboardItemId: `new-AdHoc.${key}`, query, setQuery, - ...(context?.insightProps || {}), } if (!insightProps.setQuery && setQuery) { diff --git a/frontend/src/queries/schema.ts b/frontend/src/queries/schema.ts index 58b4dcd74a80e..6e8fab0a961c9 100644 --- a/frontend/src/queries/schema.ts +++ b/frontend/src/queries/schema.ts @@ -398,6 +398,7 @@ interface InsightVizNodeViewProps { /** Query is embedded inside another bordered component */ embedded?: boolean suppressSessionAnalysisWarning?: boolean + hidePersonsModal?: boolean } /** Base class for insight query nodes. Should not be used directly. */ diff --git a/frontend/src/queries/types.ts b/frontend/src/queries/types.ts index 1a77b7536d1e0..f1e63d8f54549 100644 --- a/frontend/src/queries/types.ts +++ b/frontend/src/queries/types.ts @@ -1,4 +1,4 @@ -import { InsightLogicProps } from '~/types' +import { ChartDisplayType, InsightLogicProps, TrendResult } from '~/types' import { ComponentType, HTMLProps } from 'react' import { DataTableNode } from '~/queries/schema' @@ -15,6 +15,15 @@ export interface QueryContext { emptyStateHeading?: string emptyStateDetail?: string rowProps?: (record: unknown) => Omit, 'key'> + /** chart-specific rendering context **/ + chartRenderingMetadata?: ChartRenderingMetadata +} + +/** Pass custom rendering metadata to specific kinds of charts **/ +export interface ChartRenderingMetadata { + [ChartDisplayType.WorldMap]?: { + countryProps?: (countryCode: string, countryData: TrendResult | undefined) => Omit, 'key'> + } } export type QueryContextColumnTitleComponent = ComponentType<{ diff --git a/frontend/src/scenes/insights/insightLogic.ts b/frontend/src/scenes/insights/insightLogic.ts index a38becc02327b..825d1a1237265 100644 --- a/frontend/src/scenes/insights/insightLogic.ts +++ b/frontend/src/scenes/insights/insightLogic.ts @@ -51,6 +51,7 @@ import { isInsightVizNode } from '~/queries/utils' import { userLogic } from 'scenes/userLogic' import { transformLegacyHiddenLegendKeys } from 'scenes/funnels/funnelUtils' import { summarizeInsight } from 'scenes/insights/summarizeInsight' +import { InsightVizNode } from '~/queries/schema' const IS_TEST_MODE = process.env.NODE_ENV === 'test' export const UNSAVED_INSIGHT_MIN_REFRESH_INTERVAL_MINUTES = 3 @@ -540,6 +541,7 @@ export const insightLogic = kea([ ) }, ], + showPersonsModal: [() => [(_, p) => p.query], (query?: InsightVizNode) => !query || !query.hidePersonsModal], }), listeners(({ actions, selectors, values }) => ({ setFiltersMerge: ({ filters }) => { diff --git a/frontend/src/scenes/insights/views/BoldNumber/BoldNumber.tsx b/frontend/src/scenes/insights/views/BoldNumber/BoldNumber.tsx index 5b4377c112464..c3f0156684166 100644 --- a/frontend/src/scenes/insights/views/BoldNumber/BoldNumber.tsx +++ b/frontend/src/scenes/insights/views/BoldNumber/BoldNumber.tsx @@ -85,7 +85,6 @@ function useBoldNumberTooltip({ export function BoldNumber({ showPersonsModal = true }: ChartParams): JSX.Element { const { insightProps } = useValues(insightLogic) const { insightData, trendsFilter } = useValues(insightVizDataLogic(insightProps)) - const { hidePersonsModal } = insightProps const [isTooltipShown, setIsTooltipShown] = useState(false) const valueRef = useBoldNumberTooltip({ showPersonsModal, isTooltipShown }) @@ -100,7 +99,7 @@ export function BoldNumber({ showPersonsModal = true }: ChartParams): JSX.Elemen className={clsx('BoldNumber__value', showPersonsModal ? 'cursor-pointer' : 'cursor-default')} onClick={ // != is intentional to catch undefined too - showPersonsModal && !hidePersonsModal && resultSeries.aggregated_value != null + showPersonsModal && resultSeries.aggregated_value != null ? () => { if (resultSeries.persons?.url) { openPersonsModal({ @@ -118,7 +117,7 @@ export function BoldNumber({ showPersonsModal = true }: ChartParams): JSX.Elemen {formatAggregationAxisValue(trendsFilter, resultSeries.aggregated_value)} - {showComparison && } + {showComparison && } ) : ( diff --git a/frontend/src/scenes/insights/views/WorldMap/WorldMap.tsx b/frontend/src/scenes/insights/views/WorldMap/WorldMap.tsx index 7dc387f0a8c48..5532c46511627 100644 --- a/frontend/src/scenes/insights/views/WorldMap/WorldMap.tsx +++ b/frontend/src/scenes/insights/views/WorldMap/WorldMap.tsx @@ -201,18 +201,18 @@ const WorldMapSVG = React.memo( ) ) -export function WorldMap({ showPersonsModal = true }: ChartParams): JSX.Element { +export function WorldMap({ showPersonsModal = true, context }: ChartParams): JSX.Element { const { insightProps } = useValues(insightLogic) const { countryCodeToSeries, maxAggregatedValue } = useValues(worldMapLogic(insightProps)) const { showTooltip, hideTooltip, updateTooltipCoordinates } = useActions(worldMapLogic(insightProps)) - const { hidePersonsModal, chartRenderingMetadata } = insightProps + const { chartRenderingMetadata } = context const renderingMetadata = chartRenderingMetadata?.[ChartDisplayType.WorldMap] - const svgRef = useWorldMapTooltip(showPersonsModal && !hidePersonsModal) + const svgRef = useWorldMapTooltip(showPersonsModal) return ( + return } if (display === ChartDisplayType.BoldNumber) { - return + return } if (display === ChartDisplayType.ActionsTable) { const ActionsTable = InsightsTable @@ -47,13 +49,13 @@ export function TrendInsight({ view }: Props): JSX.Element { ) } if (display === ChartDisplayType.ActionsPie) { - return + return } if (display === ChartDisplayType.ActionsBarValue) { - return + return } if (display === ChartDisplayType.WorldMap) { - return + return } } diff --git a/frontend/src/scenes/trends/viz/ActionsHorizontalBar.tsx b/frontend/src/scenes/trends/viz/ActionsHorizontalBar.tsx index 2e36cec9c6728..017bde1423b7a 100644 --- a/frontend/src/scenes/trends/viz/ActionsHorizontalBar.tsx +++ b/frontend/src/scenes/trends/viz/ActionsHorizontalBar.tsx @@ -76,7 +76,7 @@ export function ActionsHorizontalBar({ inCardView, showPersonsModal = true }: Ch datasets={data} labels={data[0].labels} hiddenLegendKeys={hiddenLegendKeys} - showPersonsModal={showPersonsModal && !insightProps.hidePersonsModal} + showPersonsModal={showPersonsModal} trendsFilter={trendsFilter} formula={formula} showValueOnSeries={showValueOnSeries} diff --git a/frontend/src/scenes/trends/viz/ActionsLineGraph.tsx b/frontend/src/scenes/trends/viz/ActionsLineGraph.tsx index 9133487ea8891..9fe2c882f8dd1 100644 --- a/frontend/src/scenes/trends/viz/ActionsLineGraph.tsx +++ b/frontend/src/scenes/trends/viz/ActionsLineGraph.tsx @@ -52,7 +52,7 @@ export function ActionsLineGraph({ labels={(indexedResults[0] && indexedResults[0].labels) || []} inSharedMode={inSharedMode} labelGroupType={labelGroupType} - showPersonsModal={showPersonsModal && !insightProps.hidePersonsModal} + showPersonsModal={showPersonsModal} trendsFilter={trendsFilter} formula={formula} showValueOnSeries={showValueOnSeries} @@ -76,7 +76,7 @@ export function ActionsLineGraph({ isArea={display === ChartDisplayType.ActionsAreaGraph} incompletenessOffsetFromEnd={incompletenessOffsetFromEnd} onClick={ - !showPersonsModal || insightProps.hidePersonsModal || isMultiSeriesFormula(formula) + !showPersonsModal || isMultiSeriesFormula(formula) ? undefined : (payload) => { const { index, points, crossDataset } = payload diff --git a/frontend/src/scenes/trends/viz/ActionsPie.tsx b/frontend/src/scenes/trends/viz/ActionsPie.tsx index 22bd2da1ca394..01a53d16dbc3a 100644 --- a/frontend/src/scenes/trends/viz/ActionsPie.tsx +++ b/frontend/src/scenes/trends/viz/ActionsPie.tsx @@ -89,7 +89,7 @@ export function ActionsPie({ inSharedMode, inCardView, showPersonsModal = true } labels={data[0].labels} labelGroupType={labelGroupType} inSharedMode={!!inSharedMode} - showPersonsModal={showPersonsModal && !insightProps.hidePersonsModal} + showPersonsModal={showPersonsModal} trendsFilter={trendsFilter} formula={formula} showValueOnSeries={showValueOnSeries} diff --git a/frontend/src/scenes/web-analytics/WebAnalyticsTile.tsx b/frontend/src/scenes/web-analytics/WebAnalyticsTile.tsx index 9be372daf262a..0c63e6c866894 100644 --- a/frontend/src/scenes/web-analytics/WebAnalyticsTile.tsx +++ b/frontend/src/scenes/web-analytics/WebAnalyticsTile.tsx @@ -185,15 +185,12 @@ export const WebStatsTrendTile = ({ query }: { query: InsightVizNode }): JSX.Ele const context = useMemo((): QueryContext => { return { ...webAnalyticsDataTableQueryContext, - insightProps: { - chartRenderingMetadata: { - [ChartDisplayType.WorldMap]: { - countryProps: (countryCode) => ({ - onClick: () => onWorldMapClick(countryCode), - }), - }, + chartRenderingMetadata: { + [ChartDisplayType.WorldMap]: { + countryProps: (countryCode) => ({ + onClick: () => onWorldMapClick(countryCode), + }), }, - hidePersonsModal: true, }, } }, [onWorldMapClick]) diff --git a/frontend/src/scenes/web-analytics/webAnalyticsLogic.ts b/frontend/src/scenes/web-analytics/webAnalyticsLogic.ts index e87d8f25f12b7..5882c44e45d88 100644 --- a/frontend/src/scenes/web-analytics/webAnalyticsLogic.ts +++ b/frontend/src/scenes/web-analytics/webAnalyticsLogic.ts @@ -261,6 +261,7 @@ export const webAnalyticsLogic = kea([ filterTestAccounts: true, properties: webAnalyticsFilters, }, + hidePersonsModal: true, }, }, { @@ -288,6 +289,7 @@ export const webAnalyticsLogic = kea([ filterTestAccounts: true, properties: webAnalyticsFilters, }, + hidePersonsModal: true, }, }, { @@ -316,6 +318,7 @@ export const webAnalyticsLogic = kea([ properties: webAnalyticsFilters, }, suppressSessionAnalysisWarning: true, + hidePersonsModal: true, }, }, ], @@ -467,7 +470,6 @@ export const webAnalyticsLogic = kea([ }, ], }, - { layout: { colSpan: 6, @@ -501,6 +503,7 @@ export const webAnalyticsLogic = kea([ filterTestAccounts: true, properties: webAnalyticsFilters, }, + hidePersonsModal: true, }, }, { diff --git a/frontend/src/types.ts b/frontend/src/types.ts index 42ff0452d796c..895839b45170f 100644 --- a/frontend/src/types.ts +++ b/frontend/src/types.ts @@ -37,7 +37,6 @@ import { QueryContext } from '~/queries/types' import { JSONContent } from 'scenes/notebooks/Notebook/utils' import { DashboardCompatibleScenes } from 'lib/components/SceneDashboardChoice/sceneDashboardChoiceModalLogic' -import { HTMLProps } from 'react' export type Optional = Omit & { [K in keyof T]?: T[K] } @@ -2081,13 +2080,6 @@ export interface HistogramGraphDatum { label: string } -/** Pass custom rendering metadata to specific kinds of charts **/ -export interface ChartRenderingMetadata { - [ChartDisplayType.WorldMap]?: { - countryProps?: (countryCode: string, countryData: TrendResult | undefined) => Omit, 'key'> - } -} - // Shared between insightLogic, dashboardItemLogic, trendsLogic, funnelLogic, pathsLogic, retentionLogic export interface InsightLogicProps { /** currently persisted insight */ @@ -2101,10 +2093,6 @@ export interface InsightLogicProps { /** query when used as ad-hoc insight */ query?: InsightVizNode setQuery?: (node: InsightVizNode) => void - - hidePersonsModal?: boolean - /** chart-specific rendering context **/ - chartRenderingMetadata?: ChartRenderingMetadata } export interface SetInsightOptions {