feat(data-exploration): convert insight display config

frontend/src/lib/components/ChartFilter/ChartFilter.tsx

@@ -18,11 +18,9 @@ import { isTrendsFilter } from 'scenes/insights/sharedUtils'
 
 interface ChartFilterProps {
     filters: FilterType
-    onChange?: (chartFilter: ChartDisplayType) => void
-    disabled?: boolean
 }
 
-export function ChartFilter({ filters, onChange, disabled }: ChartFilterProps): JSX.Element {
+export function ChartFilter({ filters }: ChartFilterProps): JSX.Element {
     const { insightProps, isSingleSeries } = useValues(insightLogic)
     const { chartFilter } = useValues(chartFilterLogic(insightProps))
     const { setChartFilter } = useActions(chartFilterLogic(insightProps))
@@ -112,20 +110,21 @@ export function ChartFilter({ filters, onChange, disabled }: ChartFilterProps):
     ]
 
     return (
-        <LemonSelect
-            key="2"
-            value={chartFilter || ChartDisplayType.ActionsLineGraph}
-            onChange={(value) => {
-                setChartFilter(value as ChartDisplayType)
-                onChange?.(value as ChartDisplayType)
-            }}
-            dropdownPlacement="bottom-end"
-            optionTooltipPlacement="left"
-            dropdownMatchSelectWidth={false}
-            data-attr="chart-filter"
-            disabled={disabled}
-            options={options}
-            size="small"
-        />
+        <>
+            <span>Chart type</span>
+            <LemonSelect
+                key="2"
+                value={chartFilter || ChartDisplayType.ActionsLineGraph}
+                onChange={(value) => {
+                    setChartFilter(value as ChartDisplayType)
+                }}
+                dropdownPlacement="bottom-end"
+                optionTooltipPlacement="left"
+                dropdownMatchSelectWidth={false}
+                data-attr="chart-filter"
+                options={options}
+                size="small"
+            />
+        </>
     )
 }

frontend/src/lib/components/IntervalFilter/IntervalFilter.tsx

@@ -1,11 +1,10 @@
 import { intervalFilterLogic } from './intervalFilterLogic'
 import { useActions, useValues } from 'kea'
-import { InsightType, IntervalType } from '~/types'
+import { IntervalType } from '~/types'
 import { insightLogic } from 'scenes/insights/insightLogic'
 import { LemonSelect } from '@posthog/lemon-ui'
 
 interface InvertalFilterProps {
-    view: InsightType
     disabled?: boolean
 }
 
@@ -15,22 +14,27 @@ export function IntervalFilter({ disabled }: InvertalFilterProps): JSX.Element {
     const { setInterval } = useActions(intervalFilterLogic(insightProps))
 
     return (
-        <LemonSelect
-            size={'small'}
-            disabled={disabled}
-            value={interval || undefined}
-            dropdownMatchSelectWidth={false}
-            onChange={(value) => {
-                if (value) {
-                    setInterval(String(value) as IntervalType)
-                }
-            }}
-            data-attr="interval-filter"
-            options={Object.entries(enabledIntervals).map(([value, { label, disabledReason }]) => ({
-                value,
-                label,
-                disabledReason,
-            }))}
-        />
+        <>
+            <span>
+                <span className="hide-lte-md">grouped </span>by
+            </span>
+            <LemonSelect
+                size={'small'}
+                disabled={disabled}
+                value={interval || undefined}
+                dropdownMatchSelectWidth={false}
+                onChange={(value) => {
+                    if (value) {
+                        setInterval(String(value) as IntervalType)
+                    }
+                }}
+                data-attr="interval-filter"
+                options={Object.entries(enabledIntervals).map(([value, { label, disabledReason }]) => ({
+                    value,
+                    label,
+                    disabledReason,
+                }))}
+            />
+        </>
     )
 }

frontend/src/queries/nodes/InsightViz/EditorFilters.tsx

@@ -8,19 +8,10 @@ import {
     QueryEditorFilterProps,
     ChartDisplayType,
     AvailableFeature,
-    FunnelVizType,
 } from '~/types'
 import { insightLogic } from 'scenes/insights/insightLogic'
 import { userLogic } from 'scenes/userLogic'
 import { NON_BREAKDOWN_DISPLAY_TYPES } from 'lib/constants'
-import {
-    isTrendsQuery,
-    isFunnelsQuery,
-    isPathsQuery,
-    isStickinessQuery,
-    isRetentionQuery,
-    isLifecycleQuery,
-} from '~/queries/utils'
 
 import { InsightQueryNode } from '~/queries/schema'
 import { EditorFilterGroup } from './EditorFilterGroup'
@@ -31,7 +22,6 @@ import { TrendsSeriesLabel } from './TrendsSeriesLabel'
 import { TrendsFormulaLabel } from './TrendsFormulaLabel'
 import { TrendsFormula } from './TrendsFormula'
 import { Breakdown } from './Breakdown'
-import { getBreakdown, getDisplay } from './utils'
 import { PathsEventsTypesDataExploration } from 'scenes/insights/EditorFilters/PathsEventTypes'
 import {
     PathsTargetEndDataExploration,
@@ -45,6 +35,8 @@ import { FunnelsQueryStepsDataExploration } from 'scenes/insights/EditorFilters/
 import { AttributionDataExploration } from 'scenes/insights/EditorFilters/AttributionFilter'
 import { FunnelsAdvancedDataExploration } from 'scenes/insights/EditorFilters/FunnelsAdvanced'
 import { RetentionSummaryDataExploration } from 'scenes/insights/EditorFilters/RetentionSummary'
+import { insightDataLogic } from 'scenes/insights/insightDataLogic'
+import { funnelDataLogic } from 'scenes/funnels/funnelDataLogic'
 export interface EditorFiltersProps {
     query: InsightQueryNode
     setQuery: (node: InsightQueryNode) => void
@@ -55,22 +47,16 @@ export function EditorFilters({ query, setQuery }: EditorFiltersProps): JSX.Elem
     const availableFeatures = user?.organization?.available_features || []
 
     const { insight, insightProps, filterPropertiesCount } = useValues(insightLogic)
-
-    const isTrends = isTrendsQuery(query)
-    const isFunnels = isFunnelsQuery(query)
-    const isRetention = isRetentionQuery(query)
-    const isPaths = isPathsQuery(query)
-    const isStickiness = isStickinessQuery(query)
-    const isLifecycle = isLifecycleQuery(query)
-    const isTrendsLike = isTrends || isLifecycle || isStickiness
-    const display = getDisplay(query)
-    const breakdown = getBreakdown(query)
+    const { isTrends, isFunnels, isRetention, isPaths, isLifecycle, isTrendsLike, display, breakdown } = useValues(
+        insightDataLogic(insightProps)
+    )
+    const { isStepsFunnel } = useValues(funnelDataLogic(insightProps))
 
     const hasBreakdown =
         (isTrends && !NON_BREAKDOWN_DISPLAY_TYPES.includes(display || ChartDisplayType.ActionsLineGraph)) ||
-        (isFunnels && query.funnelsFilter?.funnel_viz_type === FunnelVizType.Steps)
+        isStepsFunnel
     const hasPathsAdvanced = availableFeatures.includes(AvailableFeature.PATHS_ADVANCED)
-    const hasAttribution = isFunnels && query.funnelsFilter?.funnel_viz_type === FunnelVizType.Steps
+    const hasAttribution = isStepsFunnel
 
     const showFilters = true // TODO: implement with insightVizLogic
 

frontend/src/queries/nodes/InsightViz/InsightContainer.tsx

@@ -1,5 +1,5 @@
 import { Card, Col, Row } from 'antd'
-import { InsightDisplayConfig } from 'scenes/insights/InsightDisplayConfig'
+import { InsightDisplayConfig } from './InsightDisplayConfig'
 import { FunnelCanvasLabel } from 'scenes/funnels/FunnelCanvasLabel'
 import {
     // ChartDisplayType,
@@ -207,16 +207,7 @@ export function InsightContainer({
             ) : null} */}
             {/* These are filters that are reused between insight features. They each have generic logic that updates the url */}
             <Card
-                title={
-                    disableHeader ? null : (
-                        <InsightDisplayConfig
-                            activeView={activeView as InsightType}
-                            insightMode={insightMode || ItemMode.View}
-                            filters={filters}
-                            disableTable={!!disableTable}
-                        />
-                    )
-                }
+                title={disableHeader ? null : <InsightDisplayConfig disableTable={!!disableTable} />}
                 data-attr="insights-graph"
                 className="insights-graph-container"
             >

frontend/src/queries/nodes/InsightViz/InsightDisplayConfig.tsx

@@ -0,0 +1,111 @@
+import { PropsWithChildren, ReactNode } from 'react'
+import { useActions, useValues } from 'kea'
+
+import { insightLogic } from 'scenes/insights/insightLogic'
+import { insightDisplayConfigLogic } from './insightDisplayConfigLogic'
+
+import { InsightDateFilter } from 'scenes/insights/filters/InsightDateFilter'
+import { IntervalFilter } from 'lib/components/IntervalFilter'
+import { SmoothingFilter } from 'lib/components/SmoothingFilter/SmoothingFilter'
+import { RetentionDatePickerDataExploration } from 'scenes/insights/RetentionDatePicker'
+import { RetentionReferencePickerDataExploration } from 'scenes/insights/filters/RetentionReferencePicker'
+import { PathStepPickerDataExploration } from 'scenes/insights/views/Paths/PathStepPicker'
+import { CompareFilter } from 'lib/components/CompareFilter/CompareFilter'
+import { UnitPicker } from 'lib/components/UnitPicker/UnitPicker'
+import { ChartFilter } from 'lib/components/ChartFilter'
+import { FunnelDisplayLayoutPickerDataExploration } from 'scenes/insights/views/Funnels/FunnelDisplayLayoutPicker'
+// import { FunnelBinsPicker } from 'scenes/insights/views/Funnels/FunnelBinsPicker'
+
+interface InsightDisplayConfigProps {
+    disableTable: boolean
+}
+
+export function InsightDisplayConfig({ disableTable }: InsightDisplayConfigProps): JSX.Element {
+    const { insightProps, filters } = useValues(insightLogic)
+    const { setFilters } = useActions(insightLogic)
+    const {
+        showDateRange,
+        disableDateRange,
+        showCompare,
+        showUnit,
+        showChart,
+        showInterval,
+        showSmoothing,
+        showRetention,
+        showPaths,
+        showFunnelDisplayLayout,
+        // showFunnelBins,
+    } = useValues(insightDisplayConfigLogic(insightProps))
+
+    return (
+        <div className="flex justify-between items-center flex-wrap" data-attr="insight-filters">
+            <div className="flex items-center space-x-2 flex-wrap my-2">
+                {showDateRange && !disableTable && (
+                    <ConfigFilter>
+                        <InsightDateFilter disabled={disableDateRange} />
+                    </ConfigFilter>
+                )}
+
+                {showInterval && (
+                    <ConfigFilter>
+                        <IntervalFilter />
+                    </ConfigFilter>
+                )}
+
+                {showSmoothing && (
+                    <ConfigFilter>
+                        <SmoothingFilter />
+                    </ConfigFilter>
+                )}
+
+                {showRetention && (
+                    <ConfigFilter>
+                        <RetentionDatePickerDataExploration />
+                        <RetentionReferencePickerDataExploration />
+                    </ConfigFilter>
+                )}
+
+                {showPaths && (
+                    <ConfigFilter>
+                        <PathStepPickerDataExploration />
+                    </ConfigFilter>
+                )}
+
+                {showCompare && (
+                    <ConfigFilter>
+                        <CompareFilter />
+                    </ConfigFilter>
+                )}
+            </div>
+            <div className="flex items-center space-x-4 flex-wrap my-2">
+                {showUnit && (
+                    <ConfigFilter>
+                        <UnitPicker filters={filters} setFilters={setFilters} />
+                    </ConfigFilter>
+                )}
+
+                {showChart && (
+                    <ConfigFilter>
+                        <ChartFilter filters={filters} />
+                    </ConfigFilter>
+                )}
+
+                {showFunnelDisplayLayout && (
+                    <ConfigFilter>
+                        <FunnelDisplayLayoutPickerDataExploration />
+                    </ConfigFilter>
+                )}
+
+                {/* {showFunnelBins && (
+                    <ConfigFilter>
+                        <FunnelBinsPicker />
+                    </ConfigFilter>
+                )} */}
+            </div>
+        </div>
+    )
+}
+
+function ConfigFilter(props: PropsWithChildren<ReactNode>): JSX.Element {
+    return <span className="space-x-2 flex items-center text-sm">{props.children}</span>
+}

frontend/src/queries/nodes/InsightViz/insightDisplayConfigLogic.ts

@@ -0,0 +1,73 @@
+import { kea, props, key, path, selectors, connect } from 'kea'
+import { ChartDisplayType, InsightLogicProps } from '~/types'
+import { keyForInsightLogicProps } from 'scenes/insights/sharedUtils'
+
+import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
+import { insightDataLogic } from 'scenes/insights/insightDataLogic'
+import { funnelDataLogic } from 'scenes/funnels/funnelDataLogic'
+import { FEATURE_FLAGS, NON_TIME_SERIES_DISPLAY_TYPES } from 'lib/constants'
+
+import type { insightDisplayConfigLogicType } from './insightDisplayConfigLogicType'
+
+export const insightDisplayConfigLogic = kea<insightDisplayConfigLogicType>([
+    props({} as InsightLogicProps),
+    key(keyForInsightLogicProps('new')),
+    path((key) => ['scenes', 'insights', 'insightDataLogic', key]),
+
+    connect((props: InsightLogicProps) => ({
+        values: [
+            featureFlagLogic,
+            ['featureFlags'],
+            insightDataLogic(props),
+            [
+                'isTrends',
+                'isFunnels',
+                'isRetention',
+                'isPaths',
+                'isStickiness',
+                'isLifecycle',
+                'supportsDisplay',
+                'display',
+                'breakdown',
+                'trendsFilter',
+            ],
+            funnelDataLogic(props),
+            ['isEmptyFunnel', 'isStepsFunnel', 'isTimeToConvertFunnel', 'isTrendsFunnel'],
+        ],
+    })),
+
+    selectors({
+        showDateRange: [(s) => [s.isRetention], (isRetention) => !isRetention],
+        disableDateRange: [
+            (s) => [s.isFunnels, s.isEmptyFunnel],
+            (isFunnels, isEmptyFunnel) => isFunnels && !!isEmptyFunnel,
+        ],
+        showCompare: [
+            (s) => [s.isTrends, s.isStickiness, s.display],
+            (isTrends, isStickiness, display) =>
+                (isTrends && display !== ChartDisplayType.ActionsAreaGraph) || isStickiness,
+        ],
+        showUnit: [(s) => [s.supportsDisplay, s.isTrends], (supportsDisplay, isTrends) => supportsDisplay && isTrends],
+        showChart: [(s) => [s.supportsDisplay], (supportsDisplay) => supportsDisplay],
+        showInterval: [
+            (s) => [s.isTrends, s.isStickiness, s.isLifecycle, s.isTrendsFunnel, s.display],
+            (isTrends, isStickiness, isLifecycle, isTrendsFunnel, display) =>
+                isTrendsFunnel ||
+                isLifecycle ||
+                ((isTrends || isStickiness) && !(display && NON_TIME_SERIES_DISPLAY_TYPES.includes(display))),
+        ],
+        showSmoothing: [
+            (s) => [s.isTrends, s.breakdown, s.display, s.trendsFilter, s.featureFlags],
+            (isTrends, breakdown, display, trendsFilter, featureFlags) =>
+                isTrends &&
+                !breakdown?.breakdown_type &&
+                !trendsFilter?.compare &&
+                (!display || display === ChartDisplayType.ActionsLineGraph) &&
+                featureFlags[FEATURE_FLAGS.SMOOTHING_INTERVAL],
+        ],
+        showRetention: [(s) => [s.isRetention], (isRetention) => !!isRetention],
+        showPaths: [(s) => [s.isPaths], (isPaths) => !!isPaths],
+        showFunnelDisplayLayout: [(s) => [s.isStepsFunnel], (isStepsFunnel) => !!isStepsFunnel],
+        showFunnelBins: [(s) => [s.isTimeToConvertFunnel], (isTimeToConvertFunnel) => !!isTimeToConvertFunnel],
+    }),
+])