fix(notebooks): fix insight updates in notebooks (#18569)

PostHog · Nov 13, 2023 · 03498b2 · 03498b2
1 parent f7438a6
commit 03498b2
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 51 deletions.
diff --git a/frontend/src/scenes/insights/EditorFilters/ValueOnSeriesFilter.tsx b/frontend/src/scenes/insights/EditorFilters/ValueOnSeriesFilter.tsx
@@ -1,18 +1,20 @@
 import { useActions, useValues } from 'kea'
 import { LemonCheckbox } from 'lib/lemon-ui/LemonCheckbox'
 import { insightLogic } from '../insightLogic'
-import { valueOnSeriesFilterLogic } from './valueOnSeriesFilterLogic'
+import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
 
 export function ValueOnSeriesFilter(): JSX.Element {
     const { insightProps } = useValues(insightLogic)
-    const { valueOnSeries } = useValues(valueOnSeriesFilterLogic(insightProps))
-    const { setValueOnSeries } = useActions(valueOnSeriesFilterLogic(insightProps))
+    const { valueOnSeries } = useValues(insightVizDataLogic(insightProps))
+    const { updateInsightFilter } = useActions(insightVizDataLogic(insightProps))
 
     return (
         <LemonCheckbox
             className="p-1 px-2"
             checked={valueOnSeries}
-            onChange={setValueOnSeries}
+            onChange={(checked) => {
+                updateInsightFilter({ show_values_on_series: checked })
+            }}
             label={<span className="font-normal">Show values on series</span>}
             size="small"
         />

diff --git a/frontend/src/scenes/insights/EditorFilters/valueOnSeriesFilterLogic.ts b/frontend/src/scenes/insights/EditorFilters/valueOnSeriesFilterLogic.ts
diff --git a/frontend/src/scenes/insights/insightVizDataLogic.ts b/frontend/src/scenes/insights/insightVizDataLogic.ts
@@ -1,6 +1,6 @@
 import posthog from 'posthog-js'
 import { actions, connect, kea, key, listeners, path, props, selectors, reducers } from 'kea'
-import { BaseMathType, ChartDisplayType, InsightLogicProps, IntervalType } from '~/types'
+import { BaseMathType, ChartDisplayType, InsightLogicProps, IntervalType, TrendsFilterType } from '~/types'
 import { keyForInsightLogicProps } from 'scenes/insights/sharedUtils'
 import {
     BreakdownFilter,
@@ -188,6 +188,20 @@ export const insightVizDataLogic = kea<insightVizDataLogicType>([
             },
         ],
 
+        valueOnSeries: [
+            (s) => [s.isTrends, s.isStickiness, s.isLifecycle, s.insightFilter],
+            (isTrends, isStickiness, isLifecycle, insightFilter): boolean => {
+                return !!(
+                    ((isTrends || isStickiness || isLifecycle) &&
+                        (insightFilter as TrendsFilterType)?.show_values_on_series) ||
+                    // pie charts have value checked by default
+                    (isTrends &&
+                        (insightFilter as TrendsFilterType)?.display === ChartDisplayType.ActionsPie &&
+                        (insightFilter as TrendsFilterType)?.show_values_on_series === undefined)
+                )
+            },
+        ],
+
         hasLegend: [
             (s) => [s.isTrends, s.isStickiness, s.display],
             (isTrends, isStickiness, display) =>

diff --git a/frontend/src/scenes/insights/views/LineGraph/LineGraph.tsx b/frontend/src/scenes/insights/views/LineGraph/LineGraph.tsx
@@ -733,7 +733,7 @@ export function LineGraph_({
         })
         setMyLineChart(newChart)
         return () => newChart.destroy()
-    }, [datasets, hiddenLegendKeys, isDarkModeOn])
+    }, [datasets, hiddenLegendKeys, isDarkModeOn, trendsFilter, formula, showValueOnSeries, showPercentStackView])
 
     return (
         <div

diff --git a/frontend/src/scenes/notebooks/Nodes/NotebookNodeQuery.tsx b/frontend/src/scenes/notebooks/Nodes/NotebookNodeQuery.tsx
@@ -88,7 +88,12 @@ const Component = ({ attributes }: NotebookNodeProps<NotebookNodeQueryAttributes
         <div
             className={clsx('flex flex-1 flex-col', NodeKind.DataTableNode === modifiedQuery.kind && 'overflow-hidden')}
         >
-            <Query query={modifiedQuery} uniqueKey={nodeId} readOnly={true} />
+            <Query
+                query={modifiedQuery}
+                // use separate keys for the settings and visualization to avoid conflicts with insightProps
+                uniqueKey={nodeId + '-component'}
+                readOnly={true}
+            />
         </div>
     )
 }
@@ -127,6 +132,7 @@ export const Settings = ({
 
         if (NodeKind.InsightVizNode === modifiedQuery.kind || NodeKind.SavedInsightNode === modifiedQuery.kind) {
             modifiedQuery.showFilters = true
+            modifiedQuery.showHeader = true
             modifiedQuery.showResults = false
             modifiedQuery.embedded = true
         }
@@ -178,7 +184,8 @@ export const Settings = ({
         <div className="p-3">
             <Query
                 query={modifiedQuery}
-                uniqueKey={attributes.nodeId}
+                // use separate keys for the settings and visualization to avoid conflicts with insightProps
+                uniqueKey={attributes.nodeId + '-settings'}
                 readOnly={false}
                 setQuery={(t) => {
                     updateAttributes({