refactor(insights): remove query from editor filter props (#17963)

PostHog · Oct 23, 2023 · 9d36e03 · 9d36e03
1 parent de57c16
commit 9d36e03
Show file tree

Hide file tree

Showing 8 changed files with 43 additions and 59 deletions.
diff --git a/frontend/src/lib/components/IntervalFilter/IntervalFilter.tsx b/frontend/src/lib/components/IntervalFilter/IntervalFilter.tsx
@@ -21,7 +21,7 @@ export function IntervalFilter({ disabled }: IntervalFilterProps): JSX.Element {
             <LemonSelect
                 size={'small'}
                 disabled={disabled}
-                value={interval || undefined}
+                value={interval || 'day'}
                 dropdownMatchSelectWidth={false}
                 onChange={(value) => {
                     if (value) {

diff --git a/frontend/src/queries/nodes/InsightViz/EditorFilterGroup.tsx b/frontend/src/queries/nodes/InsightViz/EditorFilterGroup.tsx
@@ -16,7 +16,7 @@ export interface EditorFilterGroupProps {
     query: InsightQueryNode
 }
 
-export function EditorFilterGroup({ query, insightProps, editorFilterGroup }: EditorFilterGroupProps): JSX.Element {
+export function EditorFilterGroup({ insightProps, editorFilterGroup }: EditorFilterGroupProps): JSX.Element {
     const { title, count, defaultExpanded = true, editorFilters } = editorFilterGroup
     const [isRowExpanded, setIsRowExpanded] = useState(defaultExpanded)
 
@@ -50,17 +50,11 @@ export function EditorFilterGroup({ query, insightProps, editorFilterGroup }: Ed
                         return (
                             <div key={key}>
                                 <PureField
-                                    label={
-                                        typeof Label === 'function' ? (
-                                            <Label query={query} insightProps={insightProps} />
-                                        ) : (
-                                            Label
-                                        )
-                                    }
+                                    label={typeof Label === 'function' ? <Label insightProps={insightProps} /> : Label}
                                     info={tooltip}
                                     showOptional={showOptional}
                                 >
-                                    {Component ? <Component query={query} insightProps={insightProps} /> : null}
+                                    {Component ? <Component insightProps={insightProps} /> : null}
                                 </PureField>
                             </div>
                         )

diff --git a/frontend/src/queries/nodes/InsightViz/EditorFilters.tsx b/frontend/src/queries/nodes/InsightViz/EditorFilters.tsx
@@ -46,15 +46,29 @@ export interface EditorFiltersProps {
     embedded: boolean
 }
 
-export function EditorFilters({ query, showing, embedded }: EditorFiltersProps): JSX.Element {
+export function EditorFilters({ query, showing, embedded }: EditorFiltersProps): JSX.Element | null {
     const { user } = useValues(userLogic)
     const availableFeatures = user?.organization?.available_features || []
 
     const { insight, insightProps } = useValues(insightLogic)
-    const { isTrends, isFunnels, isRetention, isPaths, isLifecycle, isTrendsLike, display, breakdown, pathsFilter } =
-        useValues(insightVizDataLogic(insightProps))
+    const {
+        isTrends,
+        isFunnels,
+        isRetention,
+        isPaths,
+        isLifecycle,
+        isTrendsLike,
+        display,
+        breakdown,
+        pathsFilter,
+        querySource,
+    } = useValues(insightVizDataLogic(insightProps))
     const { isStepsFunnel } = useValues(funnelDataLogic(insightProps))
 
+    if (!querySource) {
+        return null
+    }
+
     const hasBreakdown =
         (isTrends && !NON_BREAKDOWN_DISPLAY_TYPES.includes(display || ChartDisplayType.ActionsLineGraph)) ||
         isStepsFunnel

diff --git a/frontend/src/queries/nodes/InsightViz/GlobalAndOrFilters.tsx b/frontend/src/queries/nodes/InsightViz/GlobalAndOrFilters.tsx
@@ -2,20 +2,17 @@ import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
 import { PropertyGroupFilters } from './PropertyGroupFilters/PropertyGroupFilters'
 import { useActions, useValues } from 'kea'
 import { groupsModel } from '~/models/groupsModel'
-import { TrendsQuery, StickinessQuery } from '~/queries/schema'
-import { isTrendsQuery } from '~/queries/utils'
 import { actionsModel } from '~/models/actionsModel'
 import { getAllEventNames } from './utils'
 import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
+import { EditorFilterProps } from '~/types'
+import { StickinessQuery, TrendsQuery } from '~/queries/schema'
 
-type GlobalAndOrFiltersProps = {
-    query: TrendsQuery | StickinessQuery
-}
-
-export function GlobalAndOrFilters({ query }: GlobalAndOrFiltersProps): JSX.Element {
+export function GlobalAndOrFilters({ insightProps }: EditorFilterProps): JSX.Element {
     const { actions: allActions } = useValues(actionsModel)
     const { groupsTaxonomicTypes } = useValues(groupsModel)
-    const { updateQuerySource } = useActions(insightVizDataLogic)
+    const { isTrends, querySource } = useValues(insightVizDataLogic(insightProps))
+    const { updateQuerySource } = useActions(insightVizDataLogic(insightProps))
 
     const taxonomicGroupTypes = [
         TaxonomicFilterGroupType.EventProperties,
@@ -24,16 +21,16 @@ export function GlobalAndOrFilters({ query }: GlobalAndOrFiltersProps): JSX.Elem
         ...groupsTaxonomicTypes,
         TaxonomicFilterGroupType.Cohorts,
         TaxonomicFilterGroupType.Elements,
-        ...(isTrendsQuery(query) ? [TaxonomicFilterGroupType.Sessions] : []),
+        ...(isTrends ? [TaxonomicFilterGroupType.Sessions] : []),
         TaxonomicFilterGroupType.HogQLExpression,
     ]
 
     return (
         <PropertyGroupFilters
             pageKey="insight-filters"
-            query={query}
+            query={querySource as TrendsQuery | StickinessQuery}
             setQuery={updateQuerySource}
-            eventNames={getAllEventNames(query, allActions)}
+            eventNames={getAllEventNames(querySource as TrendsQuery | StickinessQuery, allActions)}
             taxonomicGroupTypes={taxonomicGroupTypes}
             noTitle
         />

diff --git a/frontend/src/queries/nodes/InsightViz/LifecycleToggles.tsx b/frontend/src/queries/nodes/InsightViz/LifecycleToggles.tsx
@@ -1,7 +1,7 @@
-import { LifecycleQuery } from '~/queries/schema'
-import { LifecycleToggle } from '~/types'
+import { LifecycleFilter } from '~/queries/schema'
+import { EditorFilterProps, LifecycleToggle } from '~/types'
 import { LemonCheckbox, LemonLabel } from '@posthog/lemon-ui'
-import { useActions } from 'kea'
+import { useActions, useValues } from 'kea'
 import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
 
 const lifecycles: { name: LifecycleToggle; tooltip: string; color: string }[] = [
@@ -29,31 +29,18 @@ const lifecycles: { name: LifecycleToggle; tooltip: string; color: string }[] =
     },
 ]
 
-type LifecycleTogglesProps = {
-    query: LifecycleQuery
-}
-
 const DEFAULT_LIFECYCLE_TOGGLES: LifecycleToggle[] = ['new', 'returning', 'resurrecting', 'dormant']
 
-export function LifecycleToggles({ query }: LifecycleTogglesProps): JSX.Element {
-    const toggledLifecycles = query.lifecycleFilter?.toggledLifecycles || DEFAULT_LIFECYCLE_TOGGLES
-    const { updateQuerySource } = useActions(insightVizDataLogic)
-
-    const setToggledLifecycles = (lifecycles: LifecycleToggle[]): void => {
-        updateQuerySource({
-            ...query,
-            lifecycleFilter: {
-                ...query.lifecycleFilter,
-                toggledLifecycles: lifecycles,
-            },
-        } as LifecycleQuery)
-    }
+export function LifecycleToggles({ insightProps }: EditorFilterProps): JSX.Element {
+    const { insightFilter } = useValues(insightVizDataLogic(insightProps))
+    const { updateInsightFilter } = useActions(insightVizDataLogic(insightProps))
 
+    const toggledLifecycles = (insightFilter as LifecycleFilter)?.toggledLifecycles || DEFAULT_LIFECYCLE_TOGGLES
     const toggleLifecycle = (name: LifecycleToggle): void => {
         if (toggledLifecycles.includes(name)) {
-            setToggledLifecycles(toggledLifecycles.filter((n) => n !== name))
+            updateInsightFilter({ toggledLifecycles: toggledLifecycles.filter((n) => n !== name) })
         } else {
-            setToggledLifecycles([...toggledLifecycles, name])
+            updateInsightFilter({ toggledLifecycles: [...toggledLifecycles, name] })
         }
     }
 

diff --git a/frontend/src/queries/nodes/InsightViz/insightDisplayConfigLogic.ts b/frontend/src/queries/nodes/InsightViz/insightDisplayConfigLogic.ts
@@ -12,7 +12,7 @@ import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
 export const insightDisplayConfigLogic = kea<insightDisplayConfigLogicType>([
     props({} as InsightLogicProps),
     key(keyForInsightLogicProps('new')),
-    path((key) => ['scenes', 'insights', 'insightDataLogic', key]),
+    path((key) => ['queries', 'nodes', 'InsightViz', 'insightDisplayConfigLogic', key]),
 
     connect((props: InsightLogicProps) => ({
         values: [

diff --git a/frontend/src/scenes/experiments/MetricSelector.tsx b/frontend/src/scenes/experiments/MetricSelector.tsx
@@ -133,7 +133,7 @@ export function ExperimentInsightCreator({ insightProps }: { insightProps: Insig
                             <AggregationSelect insightProps={insightProps} hogqlAvailable />
                         </div>
                         <FunnelConversionWindowFilter insightProps={insightProps} />
-                        <AttributionSelect insightProps={insightProps} query={querySource as InsightQueryNode} />
+                        <AttributionSelect insightProps={insightProps} />
                     </>
                 )}
                 <TestAccountFilter query={querySource as InsightQueryNode} setQuery={updateQuerySource} />
@@ -142,7 +142,7 @@ export function ExperimentInsightCreator({ insightProps }: { insightProps: Insig
     )
 }
 
-export function AttributionSelect({ insightProps, query }: EditorFilterProps): JSX.Element {
+export function AttributionSelect({ insightProps }: EditorFilterProps): JSX.Element {
     return (
         <div className="flex items-center w-full gap-2">
             <span>
@@ -166,7 +166,7 @@ export function AttributionSelect({ insightProps, query }: EditorFilterProps): J
                     <InfoCircleOutlined className="info-indicator" />
                 </Tooltip>
             </span>
-            <Attribution insightProps={insightProps} query={query} />
+            <Attribution insightProps={insightProps} />
         </div>
     )
 }
diff --git a/frontend/src/types.ts b/frontend/src/types.ts
@@ -26,14 +26,7 @@ import { BehavioralFilterKey, BehavioralFilterType } from 'scenes/cohorts/Cohort
 import { LogicWrapper } from 'kea'
 import { AggregationAxisFormat } from 'scenes/insights/aggregationAxisFormat'
 import { Layout } from 'react-grid-layout'
-import {
-    DatabaseSchemaQueryResponseField,
-    HogQLQuery,
-    InsightQueryNode,
-    InsightVizNode,
-    Node,
-    QueryContext,
-} from './queries/schema'
+import { DatabaseSchemaQueryResponseField, HogQLQuery, InsightVizNode, Node, QueryContext } from './queries/schema'
 import { JSONContent } from 'scenes/notebooks/Notebook/utils'
 import { DashboardCompatibleScenes } from 'lib/components/SceneDashboardChoice/sceneDashboardChoiceModalLogic'
 
@@ -1816,7 +1809,6 @@ export enum RecordingWindowFilter {
 }
 
 export interface EditorFilterProps {
-    query: InsightQueryNode
     insightProps: InsightLogicProps
 }