Move chartRenderingMetadata out of InsightLogicProps

PostHog · Nov 9, 2023 · 39a9ce1 · 39a9ce1
1 parent 8c2aded
commit 39a9ce1
Show file tree

Hide file tree

Showing 9 changed files with 48 additions and 42 deletions.
diff --git 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}`]: <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>
                 )}

diff --git 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/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<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<{

diff --git a/frontend/src/scenes/insights/insightLogic.ts b/frontend/src/scenes/insights/insightLogic.ts
@@ -541,7 +541,7 @@ export const insightLogic = kea<insightLogicType>([
                 )
             },
         ],
-        showPersonsModal: [() => [(_, p) => p.query], (query?: InsightVizNode) => query && query.hidePersonsModal],
+        showPersonsModal: [() => [(_, p) => p.query], (query?: InsightVizNode) => !query || !query.hidePersonsModal],
     }),
     listeners(({ actions, selectors, values }) => ({
         setFiltersMerge: ({ filters }) => {

diff --git a/frontend/src/scenes/insights/views/WorldMap/WorldMap.tsx b/frontend/src/scenes/insights/views/WorldMap/WorldMap.tsx
@@ -201,11 +201,11 @@ 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 { chartRenderingMetadata } = insightProps
+    const { chartRenderingMetadata } = context
     const renderingMetadata = chartRenderingMetadata?.[ChartDisplayType.WorldMap]
 
     const svgRef = useWorldMapTooltip(showPersonsModal)

diff --git a/frontend/src/scenes/trends/Trends.tsx b/frontend/src/scenes/trends/Trends.tsx
@@ -8,12 +8,14 @@ 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, showPersonsModal } = useValues(insightLogic)
 
@@ -30,10 +32,10 @@ export function TrendInsight({ view }: Props): JSX.Element {
             display === ChartDisplayType.ActionsAreaGraph ||
             display === ChartDisplayType.ActionsBar
         ) {
-            return <ActionsLineGraph showPersonsModal={showPersonsModal} />
+            return <ActionsLineGraph showPersonsModal={showPersonsModal} context={context} />
         }
         if (display === ChartDisplayType.BoldNumber) {
-            return <BoldNumber showPersonsModal={showPersonsModal} />
+            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 showPersonsModal={showPersonsModal} />
+            return <ActionsPie showPersonsModal={showPersonsModal} context={context} />
         }
         if (display === ChartDisplayType.ActionsBarValue) {
-            return <ActionsHorizontalBar showPersonsModal={showPersonsModal} />
+            return <ActionsHorizontalBar showPersonsModal={showPersonsModal} context={context} />
         }
         if (display === ChartDisplayType.WorldMap) {
-            return <WorldMap showPersonsModal={showPersonsModal} />
+            return <WorldMap showPersonsModal={showPersonsModal} context={context} />
         }
     }
 

diff --git a/frontend/src/scenes/web-analytics/WebAnalyticsTile.tsx b/frontend/src/scenes/web-analytics/WebAnalyticsTile.tsx
@@ -185,13 +185,11 @@ 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),
+                    }),
                 },
             },
         }

diff --git a/frontend/src/scenes/web-analytics/webAnalyticsLogic.ts b/frontend/src/scenes/web-analytics/webAnalyticsLogic.ts
@@ -470,7 +470,6 @@ export const webAnalyticsLogic = kea<webAnalyticsLogicType>([
                             },
                         ],
                     },
-
                     {
                         layout: {
                             colSpan: 6,

diff --git 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<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,9 +2093,6 @@ export interface InsightLogicProps {
     /** query when used as ad-hoc insight */
     query?: InsightVizNode
     setQuery?: (node: InsightVizNode) => void
-
-    /** chart-specific rendering context **/
-    chartRenderingMetadata?: ChartRenderingMetadata
 }
 
 export interface SetInsightOptions {
-Original file line number
+Diff line change
@@ Expand Up @@
                                 },
                             ],
                         },
                         {
                             layout: {
                                 colSpan: 6,
@@ Expand Down @@