Skip to content

Commit

Permalink
feat(insights): Enable person modals on dashboard (#24677)
Browse files Browse the repository at this point in the history 
Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Michael Matloka <[email protected]>
  • Loading branch information
@webjunkie @github-actions @Twixes
3 people authored Sep 23, 2024
1 parent c2d963c commit ba4f1af
Show file tree
Hide file tree
Showing 9 changed files with 91 additions and 32 deletions.
1 change: 1 addition & 0 deletions frontend/src/exporter/ExportedInsight/ExportedInsight.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,7 @@ export function ExportedInsight({
readOnly
context={{ insightProps: insightLogicProps }}
embedded
inSharedMode
/>
{showLegend && (
<div className="p-4">
Expand Down
1 change: 1 addition & 0 deletions frontend/src/lib/components/Cards/InsightCard/InsightCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -156,6 +156,7 @@ function InsightCardInternal(
}}
readOnly
embedded
inSharedMode={placement === DashboardPlacement.Public}
/>
</div>
</BindLogic>
Expand Down
5 changes: 4 additions & 1 deletion frontend/src/queries/Query/Query.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,12 +46,14 @@ export interface QueryProps<Q extends Node> {
readOnly?: boolean
/** Reduce UI elements to only show data */
embedded?: boolean
/** Disables modals and other things */
inSharedMode?: boolean
/** Dashboard filters to override the ones in the query */
filtersOverride?: DashboardFilter | null
}

export function Query<Q extends Node>(props: QueryProps<Q>): JSX.Element | null {
const { query: propsQuery, setQuery: propsSetQuery, readOnly, embedded, filtersOverride } = props
const { query: propsQuery, setQuery: propsSetQuery, readOnly, embedded, filtersOverride, inSharedMode } = props

const [localQuery, localSetQuery] = useState(propsQuery)
useEffect(() => {
Expand Down Expand Up @@ -113,6 +115,7 @@ export function Query<Q extends Node>(props: QueryProps<Q>): JSX.Element | null
readOnly={readOnly}
uniqueKey={uniqueKey}
embedded={embedded}
inSharedMode={inSharedMode}
filtersOverride={filtersOverride}
/>
)
Expand Down
3 changes: 3 additions & 0 deletions frontend/src/queries/nodes/InsightViz/InsightViz.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ type InsightVizProps = {
context?: QueryContext
readOnly?: boolean
embedded?: boolean
inSharedMode?: boolean
filtersOverride?: DashboardFilter | null
}

Expand All @@ -48,6 +49,7 @@ export function InsightViz({
context,
readOnly,
embedded,
inSharedMode,
filtersOverride,
}: InsightVizProps): JSX.Element {
const [key] = useState(() => `InsightViz.${uniqueKey || uniqueNode++}`)
Expand Down Expand Up @@ -101,6 +103,7 @@ export function InsightViz({
disableLastComputationRefresh={disableLastComputationRefresh}
showingResults={showingResults}
embedded={isEmbedded}
inSharedMode={inSharedMode}
/>
)

Expand Down
32 changes: 28 additions & 4 deletions frontend/src/queries/nodes/InsightViz/InsightVizDisplay.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ export function InsightVizDisplay({
insightMode,
context,
embedded,
inSharedMode,
}: {
disableHeader?: boolean
disableTable?: boolean
Expand All @@ -53,6 +54,7 @@ export function InsightVizDisplay({
insightMode?: ItemMode
context?: QueryContext
embedded: boolean
inSharedMode?: boolean
}): JSX.Element {
const { insightProps, canEditInsight } = useValues(insightLogic)

Expand Down Expand Up @@ -115,19 +117,41 @@ export function InsightVizDisplay({
function renderActiveView(): JSX.Element | null {
switch (activeView) {
case InsightType.TRENDS:
return <TrendInsight view={InsightType.TRENDS} context={context} embedded={embedded} />
return (
<TrendInsight
view={InsightType.TRENDS}
context={context}
embedded={embedded}
inSharedMode={inSharedMode}
/>
)
case InsightType.STICKINESS:
return <TrendInsight view={InsightType.STICKINESS} context={context} embedded={embedded} />
return (
<TrendInsight
view={InsightType.STICKINESS}
context={context}
embedded={embedded}
inSharedMode={inSharedMode}
/>
)
case InsightType.LIFECYCLE:
return <TrendInsight view={InsightType.LIFECYCLE} context={context} embedded={embedded} />
return (
<TrendInsight
view={InsightType.LIFECYCLE}
context={context}
embedded={embedded}
inSharedMode={inSharedMode}
/>
)
case InsightType.FUNNELS:
return <Funnel inCardView={embedded} />
return <Funnel inCardView={embedded} inSharedMode={inSharedMode} showPersonsModal={!inSharedMode} />
case InsightType.RETENTION:
return (
<RetentionContainer
context={context}
vizSpecificOptions={vizSpecificOptions?.[InsightType.RETENTION]}
inCardView={embedded}
inSharedMode={inSharedMode}
/>
)
case InsightType.PATHS:
Expand Down
18 changes: 3 additions & 15 deletions frontend/src/scenes/funnels/funnelPersonsModalLogic.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,19 +78,15 @@ export const funnelPersonsModalLogic = kea<funnelPersonsModalLogicType>([

selectors({
canOpenPersonModal: [
(s) => [s.funnelsFilter, s.isInDashboardContext],
(funnelsFilter, isInDashboardContext): boolean => {
return !isInDashboardContext && !funnelsFilter?.funnelAggregateByHogQL
(s) => [s.funnelsFilter],
(funnelsFilter): boolean => {
return !funnelsFilter?.funnelAggregateByHogQL
},
],
}),

listeners(({ values }) => ({
openPersonsModalForStep: ({ step, stepIndex, converted }) => {
if (values.isInDashboardContext) {
return
}

// Note - when in a legend the step.order is always 0 so we use stepIndex instead
const stepNo = typeof stepIndex === 'number' ? stepIndex + 1 : step.order + 1
const title = funnelTitle({
Expand All @@ -111,10 +107,6 @@ export const funnelPersonsModalLogic = kea<funnelPersonsModalLogicType>([
openPersonsModal({ title, query, additionalSelect: { matched_recordings: 'matched_recordings' } })
},
openPersonsModalForSeries: ({ step, series, converted }) => {
if (values.isInDashboardContext) {
return
}

const stepNo = step.order + 1
const breakdownValues = getBreakdownStepValues(series, series.order)
const title = funnelTitle({
Expand All @@ -137,10 +129,6 @@ export const funnelPersonsModalLogic = kea<funnelPersonsModalLogicType>([
openPersonsModal({ title, query, additionalSelect: { matched_recordings: 'matched_recordings' } })
},
openCorrelationPersonsModal: ({ correlation, success }) => {
if (values.isInDashboardContext) {
return
}

if (correlation.result_type === FunnelCorrelationResultsType.Properties) {
const { breakdown, breakdown_value } = parseBreakdownValue(correlation.event.event)
const title = funnelTitle({
Expand Down
9 changes: 6 additions & 3 deletions frontend/src/scenes/retention/RetentionContainer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,17 +22,20 @@ export function RetentionContainer({
return (
<div className="RetentionContainer">
{hideLineGraph ? (
<RetentionTable inCardView={inCardView} />
<>
<RetentionTable inSharedMode={inSharedMode} />
{!inSharedMode ? <RetentionModal /> : null}
</>
) : (
<>
<div className="RetentionContainer__graph">
<RetentionLineGraph inSharedMode={inSharedMode} />
</div>
<LemonDivider />
<div className="RetentionContainer__table overflow-x-auto">
<RetentionTable inCardView={inCardView} />
<RetentionTable inSharedMode={inSharedMode} />
</div>
<RetentionModal />
{!inSharedMode ? <RetentionModal /> : null}
</>
)}
</div>
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/scenes/retention/RetentionTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
import { retentionModalLogic } from './retentionModalLogic'
import { retentionTableLogic } from './retentionTableLogic'

export function RetentionTable({ inCardView = false }: { inCardView?: boolean }): JSX.Element | null {
export function RetentionTable({ inSharedMode = false }: { inSharedMode?: boolean }): JSX.Element | null {
const { insightProps } = useValues(insightLogic)
const { tableHeaders, tableRows, isLatestPeriod, hideSizeColumn, retentionVizOptions } = useValues(
retentionTableLogic(insightProps)
Expand Down Expand Up @@ -71,7 +71,7 @@ export function RetentionTable({ inCardView = false }: { inCardView?: boolean })
<tr
key={rowIndex}
onClick={() => {
if (!inCardView) {
if (!inSharedMode) {
openModal(rowIndex)
}
}}
Expand Down
50 changes: 43 additions & 7 deletions frontend/src/scenes/trends/Trends.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,13 @@ interface Props {
view: InsightType
context?: QueryContext
embedded?: boolean
inSharedMode?: boolean
}

export function TrendInsight({ view, context, embedded }: Props): JSX.Element {
export function TrendInsight({ view, context, embedded, inSharedMode }: Props): JSX.Element {
const { insightMode } = useValues(insightSceneLogic)
const { insightProps, showPersonsModal: insightLogicShowPersonsModal } = useValues(insightLogic)
const showPersonsModal = insightLogicShowPersonsModal && !embedded
const showPersonsModal = insightLogicShowPersonsModal && !inSharedMode

const { display, series, breakdownFilter, hasBreakdownMore, breakdownValuesLoading } = useValues(
trendsDataLogic(insightProps)
Expand All @@ -36,10 +37,24 @@ export function TrendInsight({ view, context, embedded }: Props): JSX.Element {
display === ChartDisplayType.ActionsAreaGraph ||
display === ChartDisplayType.ActionsBar
) {
return <ActionsLineGraph showPersonsModal={showPersonsModal} context={context} inCardView={embedded} />
return (
<ActionsLineGraph
showPersonsModal={showPersonsModal}
context={context}
inCardView={embedded}
inSharedMode={inSharedMode}
/>
)
}
if (display === ChartDisplayType.BoldNumber) {
return <BoldNumber showPersonsModal={showPersonsModal} context={context} inCardView={embedded} />
return (
<BoldNumber
showPersonsModal={showPersonsModal}
context={context}
inCardView={embedded}
inSharedMode={inSharedMode}
/>
)
}
if (display === ChartDisplayType.ActionsTable) {
const ActionsTable = InsightsTable
Expand All @@ -53,13 +68,34 @@ export function TrendInsight({ view, context, embedded }: Props): JSX.Element {
)
}
if (display === ChartDisplayType.ActionsPie) {
return <ActionsPie showPersonsModal={showPersonsModal} context={context} inCardView={embedded} />
return (
<ActionsPie
showPersonsModal={showPersonsModal}
context={context}
inCardView={embedded}
inSharedMode={inSharedMode}
/>
)
}
if (display === ChartDisplayType.ActionsBarValue) {
return <ActionsHorizontalBar showPersonsModal={showPersonsModal} context={context} inCardView={embedded} />
return (
<ActionsHorizontalBar
showPersonsModal={showPersonsModal}
context={context}
inCardView={embedded}
inSharedMode={inSharedMode}
/>
)
}
if (display === ChartDisplayType.WorldMap) {
return <WorldMap showPersonsModal={showPersonsModal} context={context} inCardView={embedded} />
return (
<WorldMap
showPersonsModal={showPersonsModal}
context={context}
inCardView={embedded}
inSharedMode={inSharedMode}
/>
)
}
}

Expand Down

0 comments on commit ba4f1af

Please sign in to comment.