chore(editor-3000): extract datavizlogic

frontend/src/queries/nodes/DataVisualization/Components/Variables/variablesLogic.ts

@@ -37,7 +37,7 @@ export const variablesLogic = kea<variablesLogicType>([
         actions: [dataVisualizationLogic, ['setQuery', 'loadData'], variableDataLogic, ['getVariables']],
         values: [
             dataVisualizationLogic,
-            ['query', 'insightLogicProps'],
+            ['query', 'dashboardId'],
             variableDataLogic,
             ['variables', 'variablesLoading'],
             featureFlagLogic,
@@ -124,9 +124,9 @@ export const variablesLogic = kea<variablesLogicType>([
             },
         ],
         showVariablesBar: [
-            (state) => [state.insightLogicProps],
-            (insightLogicProps) => {
-                return !insightLogicProps.dashboardId
+            (state) => [state.dashboardId],
+            (dashboardId) => {
+                return !dashboardId
             },
         ],
     }),

frontend/src/queries/nodes/DataVisualization/Components/seriesBreakdownLogic.test.ts

@@ -3,7 +3,7 @@ import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 
 import { DataVisualizationNode, NodeKind } from '~/queries/schema'
 import { initKeaTests } from '~/test/init'
-import { ChartDisplayType } from '~/types'
+import { ChartDisplayType, ItemMode } from '~/types'
 
 import { dataNodeLogic } from '../../DataNode/dataNodeLogic'
 import { dataVisualizationLogic, DataVisualizationLogicProps } from '../dataVisualizationLogic'
@@ -63,10 +63,8 @@ const dummyDataVisualizationLogicProps: DataVisualizationLogicProps = {
     setQuery: (query) => {
         globalQuery = query
     },
-    insightLogicProps: {
-        cachedInsight: null,
-        dashboardItemId: 'new-test-SQL',
-    },
+    insightMode: ItemMode.View,
+    dataNodeCollectionId: 'new-test-SQL',
 }
 
 describe('seriesBreakdownLogic', () => {

frontend/src/queries/nodes/DataVisualization/DataVisualization.tsx

@@ -13,6 +13,7 @@ import { DatabaseTableTreeWithItems } from 'scenes/data-warehouse/external/DataW
 import { InsightErrorState } from 'scenes/insights/EmptyStates'
 import { insightDataLogic } from 'scenes/insights/insightDataLogic'
 import { insightLogic } from 'scenes/insights/insightLogic'
+import { insightSceneLogic } from 'scenes/insights/insightSceneLogic'
 import { HogQLBoldNumber } from 'scenes/insights/views/BoldNumber/BoldNumber'
 import { urls } from 'scenes/urls'
 
@@ -26,7 +27,7 @@ import {
     NodeKind,
 } from '~/queries/schema'
 import { QueryContext } from '~/queries/types'
-import { ChartDisplayType, ExporterFormat, InsightLogicProps } from '~/types'
+import { ChartDisplayType, ExportContext, ExporterFormat, InsightLogicProps } from '~/types'
 
 import { dataNodeLogic, DataNodeLogicProps } from '../DataNode/dataNodeLogic'
 import { DateRange } from '../DataNode/DateRange'
@@ -54,6 +55,7 @@ interface DataTableVisualizationProps {
     the data node logic becomes read only implicitly */
     cachedResults?: AnyResponseType
     readOnly?: boolean
+    exportContext?: ExportContext
     /** Dashboard variables to override the ones in the query */
     variablesOverride?: Record<string, HogQLVariable> | null
 }
@@ -78,10 +80,15 @@ export function DataTableVisualization({
     }
 
     const vizKey = insightVizDataNodeKey(insightProps)
+    const dataNodeCollectionId = insightVizDataCollectionId(insightProps, key)
+    const { insightMode } = useValues(insightSceneLogic)
     const dataVisualizationLogicProps: DataVisualizationLogicProps = {
         key: vizKey,
         query,
-        insightLogicProps: insightProps,
+        dashboardId: insightProps.dashboardId,
+        dataNodeCollectionId,
+        loadPriority: insightProps.loadPriority,
+        insightMode,
         setQuery,
         cachedResults,
         variablesOverride,
@@ -92,10 +99,13 @@ export function DataTableVisualization({
         key: vizKey,
         cachedResults,
         loadPriority: insightProps.loadPriority,
-        dataNodeCollectionId: insightVizDataCollectionId(insightProps, key),
+        dataNodeCollectionId,
         variablesOverride,
     }
 
+    const { insightProps: insightLogicProps } = useValues(insightLogic)
+    const { exportContext } = useValues(insightDataLogic(insightLogicProps))
+
     return (
         <BindLogic logic={dataNodeLogic} props={dataNodeLogicProps}>
             <BindLogic logic={dataVisualizationLogic} props={dataVisualizationLogicProps}>
@@ -112,6 +122,7 @@ export function DataTableVisualization({
                                 context={context}
                                 cachedResults={cachedResults}
                                 readOnly={readOnly}
+                                exportContext={exportContext}
                             />
                         </BindLogic>
                     </BindLogic>
@@ -123,8 +134,6 @@ export function DataTableVisualization({
 
 function InternalDataTableVisualization(props: DataTableVisualizationProps): JSX.Element {
     const { readOnly } = props
-    const { insightProps } = useValues(insightLogic)
-    const { exportContext } = useValues(insightDataLogic(insightProps))
 
     const {
         query,
@@ -228,7 +237,7 @@ function InternalDataTableVisualization(props: DataTableVisualizationProps): JSX
                                         tooltip="Visualization settings"
                                     />
 
-                                    {exportContext && (
+                                    {props.exportContext && (
                                         <ExportButton
                                             disabledReason={
                                                 visualizationType != ChartDisplayType.ActionsTable &&
@@ -238,11 +247,11 @@ function InternalDataTableVisualization(props: DataTableVisualizationProps): JSX
                                             items={[
                                                 {
                                                     export_format: ExporterFormat.CSV,
-                                                    export_context: exportContext,
+                                                    export_context: props.exportContext,
                                                 },
                                                 {
                                                     export_format: ExporterFormat.XLSX,
-                                                    export_context: exportContext,
+                                                    export_context: props.exportContext,
                                                 },
                                             ]}
                                         />

frontend/src/queries/nodes/DataVisualization/dataVisualizationLogic.ts

@@ -3,11 +3,9 @@ import { subscriptions } from 'kea-subscriptions'
 import { dayjs } from 'lib/dayjs'
 import { lightenDarkenColor, RGBToHex, uuid } from 'lib/utils'
 import mergeObject from 'lodash.merge'
-import { insightSceneLogic } from 'scenes/insights/insightSceneLogic'
 import { teamLogic } from 'scenes/teamLogic'
 
 import { themeLogic } from '~/layout/navigation-3000/themeLogic'
-import { insightVizDataCollectionId } from '~/queries/nodes/InsightViz/InsightViz'
 import {
     AnyResponseType,
     ChartAxis,
@@ -19,7 +17,7 @@ import {
     HogQLVariable,
 } from '~/queries/schema'
 import { QueryContext } from '~/queries/types'
-import { ChartDisplayType, InsightLogicProps, ItemMode } from '~/types'
+import { ChartDisplayType, DashboardType, ItemMode } from '~/types'
 
 import { dataNodeLogic } from '../DataNode/dataNodeLogic'
 import { getQueryFeatures, QueryFeature } from '../DataTable/queryFeatures'
@@ -64,11 +62,14 @@ export interface AxisSeries<T> {
 export interface DataVisualizationLogicProps {
     key: string
     query: DataVisualizationNode
+    insightMode: ItemMode
+    dataNodeCollectionId: string
     setQuery?: (node: DataVisualizationNode) => void
-    insightLogicProps: InsightLogicProps<DataVisualizationNode>
     context?: QueryContext<DataVisualizationNode>
     cachedResults?: AnyResponseType
     insightLoading?: boolean
+    dashboardId?: DashboardType['id']
+    loadPriority?: number
     /** Dashboard variables to override the ones in the query */
     variablesOverride?: Record<string, HogQLVariable> | null
 }
@@ -217,14 +218,12 @@ export const dataVisualizationLogic = kea<dataVisualizationLogicType>([
         values: [
             teamLogic,
             ['currentTeamId'],
-            insightSceneLogic,
-            ['insightMode'],
             dataNodeLogic({
                 cachedResults: props.cachedResults,
                 key: props.key,
                 query: props.query.source,
-                dataNodeCollectionId: insightVizDataCollectionId(props.insightLogicProps, props.key),
-                loadPriority: props.insightLogicProps.loadPriority,
+                dataNodeCollectionId: props.dataNodeCollectionId,
+                loadPriority: props.loadPriority,
                 variablesOverride: props.variablesOverride,
             }),
             ['response', 'responseLoading', 'responseError', 'queryCancelled'],
@@ -236,8 +235,8 @@ export const dataVisualizationLogic = kea<dataVisualizationLogicType>([
                 cachedResults: props.cachedResults,
                 key: props.key,
                 query: props.query.source,
-                dataNodeCollectionId: insightVizDataCollectionId(props.insightLogicProps, props.key),
-                loadPriority: props.insightLogicProps.loadPriority,
+                dataNodeCollectionId: props.dataNodeCollectionId,
+                loadPriority: props.loadPriority,
                 variablesOverride: props.variablesOverride,
             }),
             ['loadData'],
@@ -559,31 +558,31 @@ export const dataVisualizationLogic = kea<dataVisualizationLogicType>([
                 return columns.filter((n) => n.type.isNumerical)
             },
         ],
+        dashboardId: [() => [(_, props) => props.dashboardId], (dashboardId) => dashboardId ?? null],
         showEditingUI: [
-            (state, props) => [state.insightMode, props.insightLogicProps],
-            (insightMode, insightLogicProps) => {
-                if (insightLogicProps.dashboardId) {
+            (state, props) => [props.insightMode, state.dashboardId],
+            (insightMode, dashboardId) => {
+                if (dashboardId) {
                     return false
                 }
 
                 return insightMode == ItemMode.Edit
             },
         ],
-        insightLogicProps: [(_state, props) => [props.insightLogicProps], (insightLogicProps) => insightLogicProps],
         showResultControls: [
-            (state, props) => [state.insightMode, props.insightLogicProps],
-            (insightMode, insightLogicProps) => {
+            (state, props) => [props.insightMode, state.dashboardId],
+            (insightMode, dashboardId) => {
                 if (insightMode === ItemMode.Edit) {
                     return true
                 }
 
-                return !insightLogicProps.dashboardId
+                return !dashboardId
             },
         ],
         presetChartHeight: [
-            (_state, props) => [props.insightLogicProps],
-            (insightLogicProps) => {
-                return !insightLogicProps.dashboardId
+            (state) => [state.dashboardId],
+            (dashboardId) => {
+                return !dashboardId
             },
         ],
         sourceFeatures: [(_, props) => [props.query], (query): Set<QueryFeature> => getQueryFeatures(query.source)],