refactor(insights): remove filter based card content

frontend/src/exporter/ExportedInsight/ExportedInsight.tsx

@@ -2,7 +2,6 @@ import './ExportedInsight.scss'
 
 import clsx from 'clsx'
 import { BindLogic } from 'kea'
-import { FilterBasedCardContent } from 'lib/components/Cards/InsightCard/InsightCard'
 import { TopHeading } from 'lib/components/Cards/InsightCard/TopHeading'
 import { InsightLegend } from 'lib/components/InsightLegend/InsightLegend'
 import { SINGLE_SERIES_DISPLAY_TYPES } from 'lib/constants'
@@ -45,7 +44,7 @@ export function ExportedInsight({
 
     const insightLogicProps: InsightLogicProps = {
         dashboardItemId: insight.short_id,
-        cachedInsight: legacyInsight, // TODO: use query based insight here
+        cachedInsight: insight,
         doNotLoad: true,
     }
 
@@ -94,11 +93,13 @@ export function ExportedInsight({
                         'ExportedInsight__content--with-watermark': showWatermark,
                     })}
                 >
-                    {legacyInsight.query ? (
-                        <Query query={legacyInsight.query} cachedResults={legacyInsight} readOnly />
-                    ) : (
-                        <FilterBasedCardContent insight={legacyInsight} insightProps={insightLogicProps} />
-                    )}
+                    <Query
+                        query={insight.query}
+                        cachedResults={insight}
+                        readOnly
+                        context={{ insightProps: insightLogicProps }}
+                        embedded
+                    />
                     {showLegend && (
                         <div className="p-4">
                             <InsightLegend horizontal readOnly />

frontend/src/lib/api.ts

@@ -895,16 +895,14 @@ const api = {
     insights: {
         loadInsight(
             shortId: InsightModel['short_id'],
-            basic?: boolean,
-            refresh?: RefreshType
+            basic?: boolean
         ): Promise<PaginatedResponse<Partial<InsightModel>>> {
             return new ApiRequest()
                 .insights()
                 .withQueryString(
                     toParams({
                         short_id: encodeURIComponent(shortId),
-                        basic,
-                        refresh,
+                        basic: basic,
                     })
                 )
                 .get()

frontend/src/lib/components/Cards/InsightCard/InsightCard.stories.tsx

@@ -12,6 +12,7 @@ import EXAMPLE_LIFECYCLE from '../../../../mocks/fixtures/api/projects/team_id/i
 import EXAMPLE_RETENTION from '../../../../mocks/fixtures/api/projects/team_id/insights/retention.json'
 import EXAMPLE_STICKINESS from '../../../../mocks/fixtures/api/projects/team_id/insights/stickiness.json'
 import EXAMPLE_TRENDS from '../../../../mocks/fixtures/api/projects/team_id/insights/trendsLine.json'
+import EXAMPLE_TRENDS_BREAKDOWN_MANY from '../../../../mocks/fixtures/api/projects/team_id/insights/trendsLineBreakdownMany.json'
 import EXAMPLE_TRENDS_MULTI from '../../../../mocks/fixtures/api/projects/team_id/insights/trendsLineMulti.json'
 import EXAMPLE_TRENDS_PIE from '../../../../mocks/fixtures/api/projects/team_id/insights/trendsPie.json'
 import EXAMPLE_TRENDS_TABLE from '../../../../mocks/fixtures/api/projects/team_id/insights/trendsTable.json'
@@ -23,6 +24,7 @@ import { InsightCard as InsightCardComponent } from './index'
 const examples = [
     EXAMPLE_TRENDS,
     EXAMPLE_TRENDS_MULTI,
+    EXAMPLE_TRENDS_BREAKDOWN_MANY,
     EXAMPLE_TRENDS_HORIZONTAL_BAR,
     EXAMPLE_TRENDS_TABLE,
     EXAMPLE_TRENDS_PIE,

frontend/src/lib/components/Cards/InsightCard/InsightCard.tsx

@@ -3,127 +3,28 @@ import './InsightCard.scss'
 import clsx from 'clsx'
 import { BindLogic, useValues } from 'kea'
 import { Resizeable } from 'lib/components/Cards/CardMeta'
-import { LemonBanner } from 'lib/lemon-ui/LemonBanner'
-import { SpinnerOverlay } from 'lib/lemon-ui/Spinner/Spinner'
 import React, { useState } from 'react'
 import { Layout } from 'react-grid-layout'
-import { Funnel } from 'scenes/funnels/Funnel'
-import { funnelDataLogic } from 'scenes/funnels/funnelDataLogic'
-import {
-    FunnelSingleStepState,
-    InsightEmptyState,
-    InsightErrorState,
-    InsightTimeoutState,
-    InsightValidationError,
-} from 'scenes/insights/EmptyStates'
 import { insightDataLogic } from 'scenes/insights/insightDataLogic'
 import { insightLogic } from 'scenes/insights/insightLogic'
-import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
-import { isFilterWithDisplay, isFunnelsFilter, isPathsFilter, isRetentionFilter } from 'scenes/insights/sharedUtils'
-import { BoldNumber } from 'scenes/insights/views/BoldNumber'
-import { DashboardInsightsTable } from 'scenes/insights/views/InsightsTable/DashboardInsightsTable'
-import { WorldMap } from 'scenes/insights/views/WorldMap'
-import { Paths } from 'scenes/paths/Paths'
-import { RetentionContainer } from 'scenes/retention/RetentionContainer'
-import { ActionsHorizontalBar, ActionsLineGraph, ActionsPie } from 'scenes/trends/viz'
 
 import { ErrorBoundary } from '~/layout/ErrorBoundary'
 import { themeLogic } from '~/layout/navigation-3000/themeLogic'
-import { dataNodeLogic, DataNodeLogicProps } from '~/queries/nodes/DataNode/dataNodeLogic'
-import { filtersToQueryNode } from '~/queries/nodes/InsightQuery/utils/filtersToQueryNode'
-import { insightVizDataCollectionId, insightVizDataNodeKey } from '~/queries/nodes/InsightViz/InsightViz'
-import { getCachedResults, getQueryBasedInsightModel } from '~/queries/nodes/InsightViz/utils'
+import { getQueryBasedInsightModel } from '~/queries/nodes/InsightViz/utils'
 import { Query } from '~/queries/Query/Query'
-import { InsightQueryNode } from '~/queries/schema'
-import { QueryContext } from '~/queries/types'
 import {
-    ChartDisplayType,
-    ChartParams,
     DashboardBasicType,
     DashboardPlacement,
     DashboardTile,
     DashboardType,
-    FilterType,
     InsightColor,
     InsightLogicProps,
     InsightModel,
-    InsightType,
 } from '~/types'
 
 import { ResizeHandle1D, ResizeHandle2D } from '../handles'
 import { InsightMeta } from './InsightMeta'
 
-type DisplayedType = ChartDisplayType | 'RetentionContainer' | 'FunnelContainer' | 'PathsContainer'
-
-const displayMap: Record<
-    DisplayedType,
-    {
-        className: string
-        element: (props: ChartParams) => JSX.Element | null
-    }
-> = {
-    ActionsLineGraph: {
-        className: 'graph',
-        element: ActionsLineGraph,
-    },
-    ActionsLineGraphCumulative: {
-        className: 'graph',
-        element: ActionsLineGraph,
-    },
-    ActionsAreaGraph: {
-        className: 'graph',
-        element: ActionsLineGraph,
-    },
-    ActionsBar: {
-        className: 'bar',
-        element: ActionsLineGraph,
-    },
-    ActionsBarValue: {
-        className: 'bar',
-        element: ActionsHorizontalBar,
-    },
-    ActionsTable: {
-        className: 'table',
-        element: DashboardInsightsTable,
-    },
-    ActionsPie: {
-        className: 'pie',
-        element: ActionsPie,
-    },
-    FunnelContainer: {
-        className: 'funnel',
-        element: Funnel,
-    },
-    RetentionContainer: {
-        className: 'retention',
-        element: RetentionContainer,
-    },
-    PathsContainer: {
-        className: 'paths-viz',
-        element: Paths,
-    },
-    WorldMap: {
-        className: 'world-map',
-        element: WorldMap,
-    },
-    BoldNumber: {
-        className: 'bold-number',
-        element: BoldNumber,
-    },
-}
-
-function getDisplayedType(filters: Partial<FilterType>): DisplayedType {
-    return isRetentionFilter(filters)
-        ? 'RetentionContainer'
-        : isPathsFilter(filters)
-        ? 'PathsContainer'
-        : isFunnelsFilter(filters)
-        ? 'FunnelContainer'
-        : isFilterWithDisplay(filters)
-        ? filters.display || ChartDisplayType.ActionsLineGraph
-        : ChartDisplayType.ActionsLineGraph
-}
-
 export interface InsightCardProps extends Resizeable, React.HTMLAttributes<HTMLDivElement> {
     /** Insight to display. */
     insight: InsightModel
@@ -163,78 +64,6 @@ export interface InsightCardProps extends Resizeable, React.HTMLAttributes<HTMLD
     doNotLoad?: boolean
 }
 
-function VizComponentFallback(): JSX.Element {
-    return <LemonBanner type="warning">Unknown insight display type</LemonBanner>
-}
-
-export interface FilterBasedCardContentProps
-    extends Pick<InsightCardProps, 'insight' | 'loading' | 'apiErrored' | 'timedOut' | 'style' | 'stale'> {
-    insightProps: InsightLogicProps
-    tooFewFunnelSteps?: boolean
-    validationError?: string | null
-    empty?: boolean
-    setAreDetailsShown?: React.Dispatch<React.SetStateAction<boolean>>
-    /** pass in information from queries, e.g. what text to use for empty states*/
-    context?: QueryContext
-}
-
-export function FilterBasedCardContent({
-    insight,
-    insightProps,
-    loading,
-    setAreDetailsShown,
-    apiErrored,
-    timedOut,
-    empty,
-    tooFewFunnelSteps,
-    validationError,
-    context,
-    stale,
-}: FilterBasedCardContentProps): JSX.Element {
-    const displayedType = getDisplayedType(insight.filters)
-    const VizComponent = displayMap[displayedType]?.element || VizComponentFallback
-    const query: InsightQueryNode = filtersToQueryNode(insight.filters)
-    const key = insightVizDataNodeKey(insightProps)
-    const dataNodeLogicProps: DataNodeLogicProps = {
-        query,
-        key,
-        cachedResults: getCachedResults(insightProps.cachedInsight, query),
-        doNotLoad: insightProps.doNotLoad,
-        loadPriority: insightProps.loadPriority,
-        dataNodeCollectionId: insightVizDataCollectionId(insightProps, key),
-    }
-    return (
-        <BindLogic logic={dataNodeLogic} props={dataNodeLogicProps}>
-            <div
-                className="InsightCard__viz"
-                onClick={
-                    setAreDetailsShown
-                        ? () => {
-                              setAreDetailsShown?.(false)
-                          }
-                        : undefined
-                }
-            >
-                {stale && !loading && <SpinnerOverlay mode="editing" />}
-                {loading && <SpinnerOverlay />}
-                {tooFewFunnelSteps ? (
-                    <FunnelSingleStepState actionable={false} />
-                ) : validationError ? (
-                    <InsightValidationError query={query} detail={validationError} />
-                ) : empty ? (
-                    <InsightEmptyState heading={context?.emptyStateHeading} detail={context?.emptyStateDetail} />
-                ) : !loading && timedOut ? (
-                    <InsightTimeoutState />
-                ) : apiErrored && !loading ? (
-                    <InsightErrorState query={query} excludeDetail />
-                ) : (
-                    !apiErrored && <VizComponent inCardView={true} showPersonsModal={false} context={context} />
-                )}
-            </div>
-        </BindLogic>
-    )
-}
-
 function InsightCardInternal(
     {
         insight: legacyInsight,
@@ -278,9 +107,7 @@ function InsightCardInternal(
     }
 
     const { insightLoading } = useValues(insightLogic(insightLogicProps))
-    const { insightDataLoading, useQueryDashboardCards } = useValues(insightDataLogic(insightLogicProps))
-    const { hasFunnelResults } = useValues(funnelDataLogic(insightLogicProps))
-    const { isFunnelWithEnoughSteps, validationError } = useValues(insightVizDataLogic(insightLogicProps))
+    const { insightDataLoading } = useValues(insightDataLogic(insightLogicProps))
 
     if (insightLoading || insightDataLoading) {
         loading = true
@@ -317,39 +144,18 @@ function InsightCardInternal(
                         showDetailsControls={showDetailsControls}
                         moreButtons={moreButtons}
                     />
-                    {legacyInsight.query || useQueryDashboardCards ? (
-                        <div className="InsightCard__viz">
-                            <Query
-                                query={insight.query}
-                                cachedResults={legacyInsight}
-                                context={{
-                                    insightProps: insightLogicProps,
-                                }}
-                                stale={stale}
-                                readOnly
-                                embedded
-                            />
-                        </div>
-                    ) : (
-                        <FilterBasedCardContent
-                            insight={legacyInsight}
-                            insightProps={insightLogicProps}
-                            loading={loading}
+                    <div className="InsightCard__viz">
+                        <Query
+                            query={insight.query}
+                            cachedResults={legacyInsight}
+                            context={{
+                                insightProps: insightLogicProps,
+                            }}
                             stale={stale}
-                            setAreDetailsShown={setAreDetailsShown}
-                            apiErrored={apiErrored}
-                            timedOut={timedOut}
-                            empty={
-                                legacyInsight.filters.insight === InsightType.FUNNELS &&
-                                !hasFunnelResults &&
-                                !apiErrored
-                            }
-                            tooFewFunnelSteps={
-                                legacyInsight.filters.insight === InsightType.FUNNELS && !isFunnelWithEnoughSteps
-                            }
-                            validationError={validationError}
+                            readOnly
+                            embedded
                         />
-                    )}
+                    </div>
                 </BindLogic>
                 {showResizeHandles && (
                     <>