fix(notebooks): handle updates in insight visualization component (#1…

…8641)
PostHog · Nov 23, 2023 · b7501b1 · b7501b1
1 parent c0c0f30
commit b7501b1
Showing 1 changed file with 14 additions and 5 deletions.
diff --git a/frontend/src/scenes/notebooks/Nodes/NotebookNodeQuery.tsx b/frontend/src/scenes/notebooks/Nodes/NotebookNodeQuery.tsx
@@ -26,7 +26,10 @@ const DEFAULT_QUERY: QuerySchema = {
     },
 }
 
-const Component = ({ attributes }: NotebookNodeProps<NotebookNodeQueryAttributes>): JSX.Element | null => {
+const Component = ({
+    attributes,
+    updateAttributes,
+}: NotebookNodeProps<NotebookNodeQueryAttributes>): JSX.Element | null => {
     const { query, nodeId } = attributes
     const nodeLogic = useMountedLogic(notebookNodeLogic)
     const { expanded } = useValues(nodeLogic)
@@ -86,10 +89,17 @@ const Component = ({ attributes }: NotebookNodeProps<NotebookNodeQueryAttributes
     return (
         <div className={clsx('flex flex-1 flex-col h-full')}>
             <Query
-                query={modifiedQuery}
                 // use separate keys for the settings and visualization to avoid conflicts with insightProps
                 uniqueKey={nodeId + '-component'}
-                readOnly={true}
+                query={modifiedQuery}
+                setQuery={(t) => {
+                    updateAttributes({
+                        query: {
+                            ...attributes.query,
+                            source: (t as DataTableNode | InsightVizNode).source,
+                        } as QuerySchema,
+                    })
+                }}
             />
         </div>
     )
@@ -180,10 +190,9 @@ export const Settings = ({
     ) : (
         <div className="p-3">
             <Query
-                query={modifiedQuery}
                 // use separate keys for the settings and visualization to avoid conflicts with insightProps
                 uniqueKey={attributes.nodeId + '-settings'}
-                readOnly={false}
+                query={modifiedQuery}
                 setQuery={(t) => {
                     updateAttributes({
                         query: {