frontend selection

PostHog · Mar 14, 2024 · 150ffa2 · 150ffa2
1 parent e60f37d
commit 150ffa2
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 15 deletions.
diff --git a/frontend/src/queries/nodes/InsightViz/Breakdown.tsx b/frontend/src/queries/nodes/InsightViz/Breakdown.tsx
@@ -5,7 +5,7 @@ import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
 import { EditorFilterProps } from '~/types'
 
 export function Breakdown({ insightProps }: EditorFilterProps): JSX.Element {
-    const { breakdownFilter, display, isTrends, isDataWarehouseSeries } = useValues(insightVizDataLogic(insightProps))
+    const { breakdownFilter, display, isTrends } = useValues(insightVizDataLogic(insightProps))
     const { updateBreakdownFilter, updateDisplay } = useActions(insightVizDataLogic(insightProps))
 
     return (
@@ -14,7 +14,6 @@ export function Breakdown({ insightProps }: EditorFilterProps): JSX.Element {
             breakdownFilter={breakdownFilter}
             display={display}
             isTrends={isTrends}
-            isDataWarehouseSeries={isDataWarehouseSeries}
             updateBreakdownFilter={updateBreakdownFilter}
             updateDisplay={updateDisplay}
         />

diff --git a/frontend/src/scenes/insights/filters/BreakdownFilter/TaxonomicBreakdownButton.tsx b/frontend/src/scenes/insights/filters/BreakdownFilter/TaxonomicBreakdownButton.tsx
@@ -7,11 +7,7 @@ import { useState } from 'react'
 import { taxonomicBreakdownFilterLogic } from './taxonomicBreakdownFilterLogic'
 import { TaxonomicBreakdownPopover } from './TaxonomicBreakdownPopover'
 
-interface TaxonomicBreakdownButtonProps {
-    isDataWarehouseSeries?: boolean
-}
-
-export function TaxonomicBreakdownButton({ isDataWarehouseSeries }: TaxonomicBreakdownButtonProps): JSX.Element {
+export function TaxonomicBreakdownButton(): JSX.Element {
     const [open, setOpen] = useState(false)
 
     const { taxonomicBreakdownType } = useValues(taxonomicBreakdownFilterLogic)
@@ -24,9 +20,6 @@ export function TaxonomicBreakdownButton({ isDataWarehouseSeries }: TaxonomicBre
                 data-attr="add-breakdown-button"
                 onClick={() => setOpen(!open)}
                 sideIcon={null}
-                disabledReason={
-                    isDataWarehouseSeries ? 'Breakdowns are not available for data warehouse series' : undefined
-                }
             >
                 {taxonomicBreakdownType === TaxonomicFilterGroupType.CohortsWithAllUsers
                     ? 'Add cohort'

diff --git a/frontend/src/scenes/insights/filters/BreakdownFilter/TaxonomicBreakdownFilter.tsx b/frontend/src/scenes/insights/filters/BreakdownFilter/TaxonomicBreakdownFilter.tsx
@@ -12,7 +12,6 @@ export interface TaxonomicBreakdownFilterProps {
     breakdownFilter?: BreakdownFilter | null
     display?: ChartDisplayType | null
     isTrends: boolean
-    isDataWarehouseSeries: boolean
     updateBreakdownFilter: (breakdownFilter: BreakdownFilter) => void
     updateDisplay: (display: ChartDisplayType | undefined) => void
 }
@@ -22,7 +21,6 @@ export function TaxonomicBreakdownFilter({
     breakdownFilter,
     display,
     isTrends,
-    isDataWarehouseSeries,
     updateBreakdownFilter,
     updateDisplay,
 }: TaxonomicBreakdownFilterProps): JSX.Element {
@@ -49,7 +47,7 @@ export function TaxonomicBreakdownFilter({
         <BindLogic logic={taxonomicBreakdownFilterLogic} props={logicProps}>
             <div className="flex flex-wrap gap-2 items-center">
                 {tags}
-                {!hasNonCohortBreakdown && <TaxonomicBreakdownButton isDataWarehouseSeries={isDataWarehouseSeries} />}
+                {!hasNonCohortBreakdown && <TaxonomicBreakdownButton />}
             </div>
         </BindLogic>
     )

diff --git a/frontend/src/scenes/insights/filters/BreakdownFilter/TaxonomicBreakdownPopover.tsx b/frontend/src/scenes/insights/filters/BreakdownFilter/TaxonomicBreakdownPopover.tsx
@@ -19,7 +19,7 @@ export const TaxonomicBreakdownPopover = ({ open, setOpen, children }: Taxonomic
     const { groupsTaxonomicTypes } = useValues(groupsModel)
     const { taxonomicBreakdownType, includeSessions } = useValues(taxonomicBreakdownFilterLogic)
 
-    const { breakdownFilter } = useValues(taxonomicBreakdownFilterLogic)
+    const { breakdownFilter, currentDataWarehouseSchemaColumns } = useValues(taxonomicBreakdownFilterLogic)
     const { addBreakdown } = useActions(taxonomicBreakdownFilterLogic)
 
     const taxonomicGroupTypes = [
@@ -30,6 +30,7 @@ export const TaxonomicBreakdownPopover = ({ open, setOpen, children }: Taxonomic
         TaxonomicFilterGroupType.CohortsWithAllUsers,
         ...(includeSessions ? [TaxonomicFilterGroupType.Sessions] : []),
         TaxonomicFilterGroupType.HogQLExpression,
+        TaxonomicFilterGroupType.DataWarehouseProperties,
     ]
 
     return (
@@ -46,6 +47,7 @@ export const TaxonomicBreakdownPopover = ({ open, setOpen, children }: Taxonomic
                     }}
                     eventNames={allEventNames}
                     taxonomicGroupTypes={taxonomicGroupTypes}
+                    schemaColumns={currentDataWarehouseSchemaColumns}
                 />
             }
             visible={open}

diff --git a/frontend/src/scenes/insights/filters/BreakdownFilter/taxonomicBreakdownFilterLogic.ts b/frontend/src/scenes/insights/filters/BreakdownFilter/taxonomicBreakdownFilterLogic.ts
@@ -9,6 +9,7 @@ import {
     TaxonomicFilterGroupType,
     TaxonomicFilterValue,
 } from 'lib/components/TaxonomicFilter/types'
+import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
 import { keyForInsightLogicProps } from 'scenes/insights/sharedUtils'
 
 import { propertyDefinitionsModel } from '~/models/propertyDefinitionsModel'
@@ -35,7 +36,14 @@ export const taxonomicBreakdownFilterLogic = kea<taxonomicBreakdownFilterLogicTy
         // This is a hack to get `TaxonomicFilterGroupType` imported in `taxonomicBreakdownFilterLogicType.ts`
         __ignore: null as TaxonomicFilterGroupType | null,
     }),
-    connect(() => ({ values: [propertyDefinitionsModel, ['getPropertyDefinition']] })),
+    connect((props: TaxonomicBreakdownFilterLogicProps) => ({
+        values: [
+            insightVizDataLogic(props.insightProps),
+            ['currentDataWarehouseSchemaColumns'],
+            propertyDefinitionsModel,
+            ['getPropertyDefinition'],
+        ],
+    })),
     actions({
         addBreakdown: (breakdown: TaxonomicFilterValue, taxonomicGroup: TaxonomicFilterGroup) => ({
             breakdown,

diff --git a/frontend/src/scenes/insights/insightVizDataLogic.ts b/frontend/src/scenes/insights/insightVizDataLogic.ts
@@ -11,6 +11,7 @@ import {
 import { dayjs } from 'lib/dayjs'
 import { dateMapping } from 'lib/utils'
 import posthog from 'posthog-js'
+import { dataWarehouseSceneLogic } from 'scenes/data-warehouse/external/dataWarehouseSceneLogic'
 import { insightDataLogic, queryFromKind } from 'scenes/insights/insightDataLogic'
 import { keyForInsightLogicProps } from 'scenes/insights/sharedUtils'
 import { sceneLogic } from 'scenes/sceneLogic'
@@ -32,6 +33,8 @@ import {
 } from '~/queries/nodes/InsightViz/utils'
 import {
     BreakdownFilter,
+    DatabaseSchemaQueryResponseField,
+    DataWarehouseNode,
     DateRange,
     FunnelExclusionSteps,
     FunnelsQuery,
@@ -79,6 +82,8 @@ export const insightVizDataLogic = kea<insightVizDataLogicType>([
             ['query', 'insightQuery', 'insightData', 'insightDataLoading', 'insightDataError'],
             filterTestAccountsDefaultsLogic,
             ['filterTestAccountsDefault'],
+            dataWarehouseSceneLogic,
+            ['externalTablesMap'],
         ],
         actions: [
             insightLogic,
@@ -222,6 +227,17 @@ export const insightVizDataLogic = kea<insightVizDataLogicType>([
             },
         ],
 
+        currentDataWarehouseSchemaColumns: [
+            (s) => [s.series, s.isSingleSeries, s.isDataWarehouseSeries, s.externalTablesMap],
+            (series, isSingleSeries, isDataWarehouseSeries, externalTablesMap): DatabaseSchemaQueryResponseField[] => {
+                if (!series || series.length === 0 || !isSingleSeries || !isDataWarehouseSeries) {
+                    return []
+                }
+
+                return externalTablesMap[(series[0] as DataWarehouseNode).table_name].columns
+            },
+        ],
+
         valueOnSeries: [
             (s) => [s.isTrends, s.isStickiness, s.isLifecycle, s.insightFilter],
             (isTrends, isStickiness, isLifecycle, insightFilter): boolean => {