Move chartRenderingMetadata out of InsightLogicProps

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}`]: <TrendInsight view={InsightType.TRENDS} />,
-    [`${InsightType.STICKINESS}`]: <TrendInsight view={InsightType.STICKINESS} />,
-    [`${InsightType.LIFECYCLE}`]: <TrendInsight view={InsightType.LIFECYCLE} />,
-    [`${InsightType.FUNNELS}`]: <FunnelInsight />,
-    [`${InsightType.RETENTION}`]: <RetentionContainer />,
-    [`${InsightType.PATHS}`]: <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 <TrendInsight view={InsightType.TRENDS} context={context} />
+            case InsightType.STICKINESS:
+                return <TrendInsight view={InsightType.STICKINESS} context={context} />
+            case InsightType.LIFECYCLE:
+                return <TrendInsight view={InsightType.LIFECYCLE} context={context} />
+            case InsightType.FUNNELS:
+                return <FunnelInsight />
+            case InsightType.RETENTION:
+                return <RetentionContainer />
+            case InsightType.PATHS:
+                return <Paths />
+            default:
+                return null
+        }
+    }
+
     function renderTable(): JSX.Element | null {
         if (
             isFunnels &&
@@ -255,13 +265,13 @@ export function InsightContainer({
                             BlockingEmptyState
                         ) : supportsDisplay && showLegend ? (
                             <div className="insights-graph-container-row flex flex-nowrap">
-                                <div className="insights-graph-container-row-left">{VIEW_MAP[activeView]}</div>
+                                <div className="insights-graph-container-row-left">{renderActiveView()}</div>
                                 <div className="insights-graph-container-row-right">
                                     <InsightLegend />
                                 </div>
                             </div>
                         ) : (
-                            VIEW_MAP[activeView]
+                            renderActiveView()
                         )}
                     </div>
                 )}

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) {

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. */

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<HTMLProps<HTMLTableRowElement>, '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<HTMLProps<SVGElement>, 'key'>
+    }
 }
 
 export type QueryContextColumnTitleComponent = ComponentType<{

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<insightLogicType>([
                 )
             },
         ],
+        showPersonsModal: [() => [(_, p) => p.query], (query?: InsightVizNode) => !query || !query.hidePersonsModal],
     }),
     listeners(({ actions, selectors, values }) => ({
         setFiltersMerge: ({ filters }) => {

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)}
                 </div>
             </Textfit>
-            {showComparison && <BoldNumberComparison showPersonsModal={showPersonsModal && !hidePersonsModal} />}
+            {showComparison && <BoldNumberComparison showPersonsModal={showPersonsModal} />}
         </div>
     ) : (
         <InsightEmptyState />

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 (
         <WorldMapSVG
-            showPersonsModal={showPersonsModal && !hidePersonsModal}
+            showPersonsModal={showPersonsModal}
             countryCodeToSeries={countryCodeToSeries}
             maxAggregatedValue={maxAggregatedValue}
             showTooltip={showTooltip}

frontend/src/scenes/trends/Trends.tsx

@@ -8,14 +8,16 @@ import { WorldMap } from 'scenes/insights/views/WorldMap'
 import { BoldNumber } from 'scenes/insights/views/BoldNumber'
 import { LemonButton } from '@posthog/lemon-ui'
 import { trendsDataLogic } from './trendsDataLogic'
+import { QueryContext } from '~/queries/types'
 
 interface Props {
     view: InsightType
+    context?: QueryContext
 }
 
-export function TrendInsight({ view }: Props): JSX.Element {
+export function TrendInsight({ view, context }: Props): JSX.Element {
     const { insightMode } = useValues(insightSceneLogic)
-    const { insightProps } = useValues(insightLogic)
+    const { insightProps, showPersonsModal } = useValues(insightLogic)
 
     const { display, series, breakdown, loadMoreBreakdownUrl, breakdownValuesLoading } = useValues(
         trendsDataLogic(insightProps)
@@ -30,10 +32,10 @@ export function TrendInsight({ view }: Props): JSX.Element {
             display === ChartDisplayType.ActionsAreaGraph ||
             display === ChartDisplayType.ActionsBar
         ) {
-            return <ActionsLineGraph />
+            return <ActionsLineGraph showPersonsModal={showPersonsModal} context={context} />
         }
         if (display === ChartDisplayType.BoldNumber) {
-            return <BoldNumber />
+            return <BoldNumber showPersonsModal={showPersonsModal} context={context} />
         }
         if (display === ChartDisplayType.ActionsTable) {
             const ActionsTable = InsightsTable
@@ -47,13 +49,13 @@ export function TrendInsight({ view }: Props): JSX.Element {
             )
         }
         if (display === ChartDisplayType.ActionsPie) {
-            return <ActionsPie />
+            return <ActionsPie showPersonsModal={showPersonsModal} context={context} />
         }
         if (display === ChartDisplayType.ActionsBarValue) {
-            return <ActionsHorizontalBar />
+            return <ActionsHorizontalBar showPersonsModal={showPersonsModal} context={context} />
         }
         if (display === ChartDisplayType.WorldMap) {
-            return <WorldMap />
+            return <WorldMap showPersonsModal={showPersonsModal} context={context} />
         }
     }
 

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}

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

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}

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])

frontend/src/scenes/web-analytics/webAnalyticsLogic.ts

@@ -261,6 +261,7 @@ export const webAnalyticsLogic = kea<webAnalyticsLogicType>([
                                         filterTestAccounts: true,
                                         properties: webAnalyticsFilters,
                                     },
+                                    hidePersonsModal: true,
                                 },
                             },
                             {
@@ -288,6 +289,7 @@ export const webAnalyticsLogic = kea<webAnalyticsLogicType>([
                                         filterTestAccounts: true,
                                         properties: webAnalyticsFilters,
                                     },
+                                    hidePersonsModal: true,
                                 },
                             },
                             {
@@ -316,6 +318,7 @@ export const webAnalyticsLogic = kea<webAnalyticsLogicType>([
                                         properties: webAnalyticsFilters,
                                     },
                                     suppressSessionAnalysisWarning: true,
+                                    hidePersonsModal: true,
                                 },
                             },
                         ],
@@ -467,7 +470,6 @@ export const webAnalyticsLogic = kea<webAnalyticsLogicType>([
                             },
                         ],
                     },
-
                     {
                         layout: {
                             colSpan: 6,
@@ -501,6 +503,7 @@ export const webAnalyticsLogic = kea<webAnalyticsLogicType>([
                                         filterTestAccounts: true,
                                         properties: webAnalyticsFilters,
                                     },
+                                    hidePersonsModal: true,
                                 },
                             },
                             {

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<T, K extends string | number | symbol> = Omit<T, K> & { [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<HTMLProps<SVGElement>, '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 {