fix(persons-modal): Correct series names in persons modal (#23723)

Co-authored-by: balanxiao <[email protected]> Co-authored-by: KrispyKris905 <[email protected]> Co-authored-by: Michael Matloka <[email protected]>
PostHog · Jul 16, 2024 · 42add0e · 42add0e
1 parent 95e2e2c
commit 42add0e
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 5 deletions.
diff --git a/frontend/src/queries/nodes/DataTable/InsightActorsQueryOptions.tsx b/frontend/src/queries/nodes/DataTable/InsightActorsQueryOptions.tsx
@@ -21,7 +21,7 @@ export function InsightActorsQueryOptions({ setQuery, query }: InsightActorsQuer
 
     return query && insightActorsQueryOptions ? (
         <>
-            {cleanedInsightActorsQueryOptions(insightActorsQueryOptions).map(([key, options]) => (
+            {cleanedInsightActorsQueryOptions(insightActorsQueryOptions, query).map(([key, options]) => (
                 <div key={key}>
                     <LemonSelect
                         fullWidth

diff --git a/frontend/src/scenes/trends/persons-modal/PersonsModal.tsx b/frontend/src/scenes/trends/persons-modal/PersonsModal.tsx
@@ -162,7 +162,7 @@ export function PersonsModal({
                     ) : null}
 
                     {query &&
-                        cleanedInsightActorsQueryOptions(insightActorsQueryOptions).map(([key, options]) =>
+                        cleanedInsightActorsQueryOptions(insightActorsQueryOptions, query).map(([key, options]) =>
                             key === 'breakdowns' ? (
                                 options.map(({ values }, index) => (
                                     <div key={`${key}_${index}`}>

diff --git a/frontend/src/scenes/trends/persons-modal/persons-modal-utils.tsx b/frontend/src/scenes/trends/persons-modal/persons-modal-utils.tsx
@@ -1,8 +1,10 @@
 import { PropertyKeyInfo } from 'lib/components/PropertyKeyInfo'
 import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
+import { getCoreFilterDefinition } from 'lib/taxonomy'
 import { pluralize } from 'lib/utils'
 
-import { InsightActorsQueryOptionsResponse } from '~/queries/schema'
+import { InsightActorsQuery, InsightActorsQueryOptionsResponse } from '~/queries/schema'
+import { isTrendsQuery } from '~/queries/utils'
 import { StepOrderValue } from '~/types'
 
 export const funnelTitle = (props: {
@@ -53,9 +55,29 @@ export const pathsTitle = (props: { mode: pathModes; label: string }): React.Rea
 }
 
 export const cleanedInsightActorsQueryOptions = (
-    insightActorsQueryOptions: InsightActorsQueryOptionsResponse | null
+    insightActorsQueryOptions: InsightActorsQueryOptionsResponse | null,
+    query: InsightActorsQuery
 ): [string, any[]][] => {
-    return Object.entries(insightActorsQueryOptions ?? {}).filter(([, value]) => {
+    const cleanedOptions = Object.entries(insightActorsQueryOptions ?? {}).filter(([, value]) => {
         return Array.isArray(value) && !!value.length
     })
+    const source = query?.source
+    const seriesNames = isTrendsQuery(source) ? source.series.map((s: any) => s.custom_name) : []
+    const cleanedOptionsWithAdjustedSeriesNames: [string, any[]][] = cleanedOptions.map(([key, value]) => {
+        if (key === 'series') {
+            return [
+                key,
+                value.map((v: any, index: number) => ({
+                    ...v,
+                    label:
+                        seriesNames[index] ??
+                        getCoreFilterDefinition(v.label, TaxonomicFilterGroupType.Events)?.label ??
+                        v.label,
+                })),
+            ]
+        }
+        return [key, value]
+    })
+
+    return cleanedOptionsWithAdjustedSeriesNames
 }