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 {