fix(bi): fix datavizlogic props (#26771)

PostHog · Dec 10, 2024 · c488a4c · c488a4c
1 parent bc7080e
commit c488a4c
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
diff --git a/frontend/src/queries/nodes/DataVisualization/DataVisualization.tsx b/frontend/src/queries/nodes/DataVisualization/DataVisualization.tsx
@@ -157,7 +157,7 @@ function InternalDataTableVisualization(props: DataTableVisualizationProps): JSX
 
     const setQuerySource = useCallback(
         (source: HogQLQuery) => props.setQuery?.({ ...props.query, source }),
-        [props.setQuery]
+        [props.setQuery, props.query]
     )
 
     let component: JSX.Element | null = null

diff --git a/frontend/src/queries/nodes/DataVisualization/dataVisualizationLogic.ts b/frontend/src/queries/nodes/DataVisualization/dataVisualizationLogic.ts
@@ -1,7 +1,7 @@
-import { actions, afterMount, connect, kea, key, listeners, path, props, reducers, selectors } from 'kea'
+import { actions, afterMount, connect, kea, key, listeners, path, props, propsChanged, reducers, selectors } from 'kea'
 import { subscriptions } from 'kea-subscriptions'
 import { dayjs } from 'lib/dayjs'
-import { lightenDarkenColor, RGBToHex, uuid } from 'lib/utils'
+import { lightenDarkenColor, objectsEqual, RGBToHex, uuid } from 'lib/utils'
 import mergeObject from 'lodash.merge'
 import { teamLogic } from 'scenes/teamLogic'
 
@@ -242,6 +242,11 @@ export const dataVisualizationLogic = kea<dataVisualizationLogicType>([
             ['loadData'],
         ],
     })),
+    propsChanged(({ actions, props }, oldProps) => {
+        if (props.query && !objectsEqual(props.query, oldProps.query)) {
+            actions._setQuery(props.query)
+        }
+    }),
     props({ query: { source: {} } } as DataVisualizationLogicProps),
     actions(({ values }) => ({
         setVisualizationType: (visualizationType: ChartDisplayType) => ({ visualizationType }),
@@ -280,12 +285,14 @@ export const dataVisualizationLogic = kea<dataVisualizationLogicType>([
             colorMode: values.isDarkModeOn ? 'dark' : 'light',
         }),
         setConditionalFormattingRulesPanelActiveKeys: (keys: string[]) => ({ keys }),
+        _setQuery: (node: DataVisualizationNode) => ({ node }),
     })),
     reducers(({ props }) => ({
         query: [
             props.query,
             {
                 setQuery: (_, { node }) => node,
+                _setQuery: (_, { node }) => node,
             },
         ],
         visualizationType: [