feat(data-exploration): replace trendsLogic with trendsDataLogic

frontend/src/lib/colors.ts

@@ -52,7 +52,7 @@ export function getColorVar(variable: string): string {
  */
 export function getSeriesColor(
     index: number | undefined = 0,
-    comparePrevious: boolean = false,
+    comparePrevious: boolean | null = false,
     asBackgroundHighlight?: boolean
 ): string {
     const adjustedIndex = (comparePrevious ? Math.floor(index / 2) : index) % dataColorVars.length

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

@@ -11,21 +11,18 @@ import {
     IconPublic,
 } from 'lib/lemon-ui/icons'
 
-import { ChartDisplayType, FilterType, TrendsFilterType } from '~/types'
+import { ChartDisplayType } from '~/types'
 import { insightLogic } from 'scenes/insights/insightLogic'
 import { LemonSelect, LemonSelectOptions } from '@posthog/lemon-ui'
-import { isTrendsFilter } from 'scenes/insights/sharedUtils'
+import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
 
-interface ChartFilterProps {
-    filters: FilterType
-}
-
-export function ChartFilter({ filters }: ChartFilterProps): JSX.Element {
-    const { insightProps, isSingleSeries } = useValues(insightLogic)
+export function ChartFilter(): JSX.Element {
+    const { insightProps } = useValues(insightLogic)
     const { chartFilter } = useValues(chartFilterLogic(insightProps))
     const { setChartFilter } = useActions(chartFilterLogic(insightProps))
 
-    const isTrends = isTrendsFilter(filters)
+    const { isTrends, isSingleSeries, formula, breakdown } = useValues(insightVizDataLogic(insightProps))
+
     const trendsOnlyDisabledReason = !isTrends ? 'This type is only available in Trends.' : undefined
     const singleSeriesOnlyDisabledReason = !isSingleSeries
         ? 'This type currently only supports insights with one series, and this insight has multiple series.'
@@ -96,11 +93,11 @@ export function ChartFilter({ filters }: ChartFilterProps): JSX.Element {
                     tooltip: 'Visualize data by country.',
                     disabledReason:
                         trendsOnlyDisabledReason ||
-                        ((filters as TrendsFilterType).formula
+                        (formula
                             ? "This type isn't available, because it doesn't support formulas."
-                            : !!filters.breakdown &&
-                              filters.breakdown !== '$geoip_country_code' &&
-                              filters.breakdown !== '$geoip_country_name'
+                            : !!breakdown?.breakdown &&
+                              breakdown.breakdown !== '$geoip_country_code' &&
+                              breakdown.breakdown !== '$geoip_country_name'
                             ? "This type isn't available, because there's a breakdown other than by Country Code or Country Name properties."
                             : undefined),
                 },

frontend/src/lib/components/ChartFilter/chartFilterLogic.ts

@@ -1,57 +1,28 @@
 import { kea } from 'kea'
-import { objectsEqual } from 'lib/utils'
 import type { chartFilterLogicType } from './chartFilterLogicType'
-import { ChartDisplayType, InsightLogicProps, TrendsFilterType } from '~/types'
-import {
-    isFilterWithDisplay,
-    isStickinessFilter,
-    isTrendsFilter,
-    keyForInsightLogicProps,
-} from 'scenes/insights/sharedUtils'
-import { insightLogic } from 'scenes/insights/insightLogic'
+import { ChartDisplayType, InsightLogicProps } from '~/types'
+import { keyForInsightLogicProps } from 'scenes/insights/sharedUtils'
 import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
 
 export const chartFilterLogic = kea<chartFilterLogicType>({
     props: {} as InsightLogicProps,
     key: keyForInsightLogicProps('new'),
     path: (key) => ['lib', 'components', 'ChartFilter', 'chartFilterLogic', key],
     connect: (props: InsightLogicProps) => ({
-        actions: [
-            insightLogic(props),
-            ['setFilters'],
-            insightVizDataLogic(props),
-            ['updateInsightFilter', 'updateBreakdown'],
-        ],
-        values: [
-            insightLogic(props),
-            ['filters'],
-            insightVizDataLogic(props),
-            ['isTrends', 'isStickiness', 'display', 'series'],
-        ],
+        actions: [insightVizDataLogic(props), ['updateInsightFilter', 'updateBreakdown']],
+        values: [insightVizDataLogic(props), ['isTrends', 'isStickiness', 'display', 'series']],
     }),
 
     actions: () => ({
         setChartFilter: (chartFilter: ChartDisplayType) => ({ chartFilter }),
     }),
 
     selectors: {
-        chartFilter: [
-            (s) => [s.filters],
-            (filters): ChartDisplayType | null => {
-                return (isFilterWithDisplay(filters) ? filters.display : null) || null
-            },
-        ],
+        chartFilter: [(s) => [s.display], (display): ChartDisplayType | null | undefined => display],
     },
 
     listeners: ({ actions, values }) => ({
         setChartFilter: ({ chartFilter }) => {
-            if (isTrendsFilter(values.filters) || isStickinessFilter(values.filters)) {
-                if (!objectsEqual(values.filters.display, chartFilter)) {
-                    const newFilteres: Partial<TrendsFilterType> = { ...values.filters, display: chartFilter }
-                    actions.setFilters(newFilteres)
-                }
-            }
-
             const { isTrends, isStickiness, display, series } = values
             const newDisplay = chartFilter as ChartDisplayType
 

frontend/src/lib/components/CompareFilter/CompareFilter.tsx

@@ -16,7 +16,7 @@ export function CompareFilter(): JSX.Element | null {
     return (
         <LemonCheckbox
             onChange={setCompare}
-            checked={compare}
+            checked={!!compare}
             disabled={disabled}
             label={<span className="font-normal">Compare to previous time period</span>}
             bordered

frontend/src/lib/components/CompareFilter/compareFilterLogic.ts

@@ -1,26 +1,22 @@
 import { kea } from 'kea'
-import { objectsEqual } from 'lib/utils'
-import { ChartDisplayType, InsightLogicProps, InsightType, TrendsFilterType } from '~/types'
+import { ChartDisplayType, InsightLogicProps } from '~/types'
 import type { compareFilterLogicType } from './compareFilterLogicType'
-import { isStickinessFilter, keyForInsightLogicProps } from 'scenes/insights/sharedUtils'
+import { keyForInsightLogicProps } from 'scenes/insights/sharedUtils'
 import { insightLogic } from 'scenes/insights/insightLogic'
-import { isTrendsFilter } from 'scenes/insights/sharedUtils'
-import { StickinessFilter, TrendsFilter } from '~/queries/schema'
-import { filterForQuery, isInsightQueryNode } from '~/queries/utils'
 import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
 
 export const compareFilterLogic = kea<compareFilterLogicType>({
     props: {} as InsightLogicProps,
     key: keyForInsightLogicProps('new'),
     path: (key) => ['lib', 'components', 'CompareFilter', 'compareFilterLogic', key],
     connect: (props: InsightLogicProps) => ({
-        actions: [insightLogic(props), ['setFilters'], insightVizDataLogic(props), ['updateInsightFilter']],
         values: [
             insightLogic(props),
-            ['filters as inflightFilters', 'canEditInsight'],
+            ['canEditInsight'],
             insightVizDataLogic(props),
-            ['querySource'],
+            ['compare', 'display', 'insightFilter', 'isLifecycle', 'dateRange'],
         ],
+        actions: [insightVizDataLogic(props), ['updateInsightFilter']],
     }),
 
     actions: () => ({
@@ -29,42 +25,19 @@ export const compareFilterLogic = kea<compareFilterLogicType>({
     }),
 
     selectors: {
-        filters: [
-            (s) => [s.inflightFilters],
-            (inflightFilters): Partial<TrendsFilterType> =>
-                inflightFilters && (isTrendsFilter(inflightFilters) || isStickinessFilter(inflightFilters))
-                    ? inflightFilters
-                    : {},
-        ],
-        compare: [
-            (s) => [s.filters],
-            (filters) => filters && (isTrendsFilter(filters) || isStickinessFilter(filters)) && !!filters.compare,
-        ],
         disabled: [
-            (s) => [s.filters, s.canEditInsight],
-            ({ insight, date_from, display }, canEditInsight) =>
+            (s) => [s.canEditInsight, s.isLifecycle, s.display, s.dateRange],
+            (canEditInsight, isLifecycle, display, dateRange) =>
                 !canEditInsight ||
-                insight === InsightType.LIFECYCLE ||
+                isLifecycle ||
                 display === ChartDisplayType.WorldMap ||
-                date_from === 'all',
+                dateRange?.date_from === 'all',
         ],
     },
 
     listeners: ({ values, actions }) => ({
         setCompare: ({ compare }) => {
-            if (!objectsEqual(compare, values.compare)) {
-                const newFilters: Partial<TrendsFilterType> = { ...values.filters, compare }
-                actions.setFilters(newFilters)
-            }
-
-            if (isInsightQueryNode(values.querySource)) {
-                const currentCompare = (
-                    filterForQuery(values.querySource) as TrendsFilter | StickinessFilter | undefined
-                )?.compare
-                if (currentCompare !== compare) {
-                    actions.updateInsightFilter({ compare })
-                }
-            }
+            actions.updateInsightFilter({ compare })
         },
         toggleCompare: () => {
             actions.setCompare(!values.compare)

frontend/src/lib/components/InsightLegend/InsightLegend.tsx

@@ -1,10 +1,10 @@
 import './InsightLegend.scss'
 import { useActions, useValues } from 'kea'
 import { insightLogic } from 'scenes/insights/insightLogic'
-import { trendsLogic } from 'scenes/trends/trendsLogic'
 import clsx from 'clsx'
 import { InsightLegendRow } from './InsightLegendRow'
-import { shouldShowLegend, shouldHighlightThisRow } from './utils'
+import { shouldHighlightThisRow } from './utils'
+import { trendsDataLogic } from 'scenes/trends/trendsDataLogic'
 
 export interface InsightLegendProps {
     readOnly?: boolean
@@ -13,12 +13,13 @@ export interface InsightLegendProps {
 }
 
 export function InsightLegend({ horizontal, inCardView, readOnly = false }: InsightLegendProps): JSX.Element | null {
-    const { insightProps, filters, highlightedSeries, isSingleSeries } = useValues(insightLogic)
-    const logic = trendsLogic(insightProps)
-    const { indexedResults, hiddenLegendKeys } = useValues(logic)
-    const { toggleVisibility } = useActions(logic)
+    const { insightProps, highlightedSeries, hiddenLegendKeys } = useValues(insightLogic)
+    const { toggleVisibility } = useActions(insightLogic)
+    const { indexedResults, compare, display, trendsFilter, hasLegend, isSingleSeries } = useValues(
+        trendsDataLogic(insightProps)
+    )
 
-    return shouldShowLegend(filters) ? (
+    return hasLegend ? (
         <div
             className={clsx('InsightLegendMenu', 'flex overflow-auto border rounded', {
                 'InsightLegendMenu--horizontal': horizontal,
@@ -37,7 +38,9 @@ export function InsightLegend({ horizontal, inCardView, readOnly = false }: Insi
                             hasMultipleSeries={!isSingleSeries}
                             highlighted={shouldHighlightThisRow(hiddenLegendKeys, index, highlightedSeries)}
                             toggleVisibility={toggleVisibility}
-                            filters={filters}
+                            compare={compare}
+                            display={display}
+                            trendsFilter={trendsFilter}
                         />
                     ))}
             </div>

frontend/src/lib/components/InsightLegend/InsightLegendRow.tsx

@@ -2,29 +2,35 @@ import { InsightLabel } from 'lib/components/InsightLabel'
 import { getSeriesColor } from 'lib/colors'
 import { LemonCheckbox } from 'lib/lemon-ui/LemonCheckbox'
 import { formatCompareLabel } from 'scenes/insights/views/InsightsTable/columns/SeriesColumn'
-import { ChartDisplayType, FilterType } from '~/types'
+import { ChartDisplayType } from '~/types'
 import { formatAggregationAxisValue } from 'scenes/insights/aggregationAxisFormat'
 import { IndexedTrendResult } from 'scenes/trends/types'
 import { useEffect, useRef } from 'react'
-import { isTrendsFilter } from 'scenes/insights/sharedUtils'
+import { TrendsFilter } from '~/queries/schema'
+
+type InsightLegendRowProps = {
+    hiddenLegendKeys: Record<string, boolean | undefined>
+    rowIndex: number
+    item: IndexedTrendResult
+    hasMultipleSeries: boolean
+    toggleVisibility: (index: number) => void
+    compare?: boolean | null
+    display?: ChartDisplayType | null
+    trendsFilter?: TrendsFilter | null
+    highlighted: boolean
+}
 
 export function InsightLegendRow({
     hiddenLegendKeys,
     rowIndex,
     item,
     hasMultipleSeries,
     toggleVisibility,
-    filters,
+    compare,
+    display,
+    trendsFilter,
     highlighted,
-}: {
-    hiddenLegendKeys: Record<string, boolean | undefined>
-    rowIndex: number
-    item: IndexedTrendResult
-    hasMultipleSeries: boolean
-    toggleVisibility: (index: number) => void
-    filters: Partial<FilterType>
-    highlighted: boolean
-}): JSX.Element {
+}: InsightLegendRowProps): JSX.Element {
     const highlightStyle: Record<string, any> = highlighted
         ? {
               style: { backgroundColor: getSeriesColor(item.seriesIndex, false, true) },
@@ -38,8 +44,6 @@ export function InsightLegendRow({
         }
     }, [highlighted])
 
-    const compare = isTrendsFilter(filters) && !!filters.compare
-
     return (
         <div key={item.id} className="InsightLegendMenu-item p-2 flex flex-row" ref={rowRef} {...highlightStyle}>
             <div className="grow">
@@ -64,8 +68,10 @@ export function InsightLegendRow({
                     }
                 />
             </div>
-            {isTrendsFilter(filters) && filters.display === ChartDisplayType.ActionsPie && (
-                <div className="text-muted grow-0">{formatAggregationAxisValue(filters, item.aggregated_value)}</div>
+            {display === ChartDisplayType.ActionsPie && (
+                <div className="text-muted grow-0">
+                    {formatAggregationAxisValue(trendsFilter, item.aggregated_value)}
+                </div>
             )}
         </div>
     )

frontend/src/lib/components/InsightLegend/utils.ts

@@ -1,16 +1,12 @@
-import { ChartDisplayType, FilterType } from '~/types'
-import { isFilterWithDisplay } from 'scenes/insights/sharedUtils'
+import { ChartDisplayType } from '~/types'
 
-export const displayTypesWithoutLegend = [
+export const DISPLAY_TYPES_WITHOUT_LEGEND = [
     ChartDisplayType.WorldMap,
     ChartDisplayType.ActionsTable,
     ChartDisplayType.BoldNumber,
     ChartDisplayType.ActionsBarValue,
 ]
 
-export const shouldShowLegend = (filters: Partial<FilterType>): boolean =>
-    isFilterWithDisplay(filters) && !!filters.display && !displayTypesWithoutLegend.includes(filters.display)
-
 export function shouldHighlightThisRow(
     hiddenLegendKeys: Record<string, boolean | undefined>,
     rowIndex: number,