From 8c2aded52aaa62dab5118537e22c14d1e567e793 Mon Sep 17 00:00:00 2001 From: Robbie Coomber Date: Wed, 8 Nov 2023 17:43:29 +0000 Subject: [PATCH] WIP --- frontend/src/queries/schema.ts | 1 + frontend/src/scenes/insights/insightLogic.ts | 2 ++ .../scenes/insights/views/BoldNumber/BoldNumber.tsx | 5 ++--- .../src/scenes/insights/views/WorldMap/WorldMap.tsx | 6 +++--- frontend/src/scenes/trends/Trends.tsx | 12 ++++++------ .../src/scenes/trends/viz/ActionsHorizontalBar.tsx | 2 +- frontend/src/scenes/trends/viz/ActionsLineGraph.tsx | 4 ++-- frontend/src/scenes/trends/viz/ActionsPie.tsx | 2 +- .../src/scenes/web-analytics/WebAnalyticsTile.tsx | 1 - .../src/scenes/web-analytics/webAnalyticsLogic.ts | 4 ++++ frontend/src/types.ts | 1 - 11 files changed, 22 insertions(+), 18 deletions(-) diff --git a/frontend/src/queries/schema.ts b/frontend/src/queries/schema.ts index 58b4dcd74a80eb..6e8fab0a961c94 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/scenes/insights/insightLogic.ts b/frontend/src/scenes/insights/insightLogic.ts index a38becc02327b6..64602c051f1529 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 5b4377c1124649..c3f01566841667 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 7dc387f0a8c48e..c96dff4a1b6cb1 100644 --- a/frontend/src/scenes/insights/views/WorldMap/WorldMap.tsx +++ b/frontend/src/scenes/insights/views/WorldMap/WorldMap.tsx @@ -205,14 +205,14 @@ export function WorldMap({ showPersonsModal = true }: 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 } = insightProps 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 +47,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 2e36cec9c6728e..017bde1423b7a7 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 9133487ea88916..9fe2c882f8dd12 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 22bd2da1ca3944..01a53d16dbc3ac 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 9be372daf262af..dc96e22832a124 100644 --- a/frontend/src/scenes/web-analytics/WebAnalyticsTile.tsx +++ b/frontend/src/scenes/web-analytics/WebAnalyticsTile.tsx @@ -193,7 +193,6 @@ export const WebStatsTrendTile = ({ query }: { query: InsightVizNode }): JSX.Ele }), }, }, - hidePersonsModal: true, }, } }, [onWorldMapClick]) diff --git a/frontend/src/scenes/web-analytics/webAnalyticsLogic.ts b/frontend/src/scenes/web-analytics/webAnalyticsLogic.ts index e87d8f25f12b76..12c5bc9771aab3 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, }, }, ], @@ -501,6 +504,7 @@ export const webAnalyticsLogic = kea([ filterTestAccounts: true, properties: webAnalyticsFilters, }, + hidePersonsModal: true, }, }, { diff --git a/frontend/src/types.ts b/frontend/src/types.ts index 42ff0452d796ca..15f9bb920cd56d 100644 --- a/frontend/src/types.ts +++ b/frontend/src/types.ts @@ -2102,7 +2102,6 @@ export interface InsightLogicProps { query?: InsightVizNode setQuery?: (node: InsightVizNode) => void - hidePersonsModal?: boolean /** chart-specific rendering context **/ chartRenderingMetadata?: ChartRenderingMetadata }