feat: saved insights settings in notebooks

frontend/src/queries/nodes/DataTable/DataTable.tsx

@@ -65,8 +65,8 @@ let uniqueNode = 0
 
 export function DataTable({ uniqueKey, query, setQuery, context, cachedResults }: DataTableProps): JSX.Element {
     const uniqueNodeKey = useState(() => uniqueNode++)
-    const [vizKey] = useState(() => `DataTable.${uniqueKey || uniqueNodeKey}`)
     const [dataKey] = useState(() => `DataNode.${uniqueKey || uniqueNodeKey}`)
+    const [vizKey] = useState(() => `DataTable.${uniqueNodeKey}`)
 
     const dataNodeLogicProps: DataNodeLogicProps = {
         query: query.source,
@@ -374,9 +374,9 @@ export function DataTable({ uniqueKey, query, setQuery, context, cachedResults }
                         <HogQLQueryEditor query={query.source} setQuery={setQuerySource} />
                     ) : null}
                     {showFirstRow && (
-                        <div className="flex gap-4 items-center">
+                        <div className="flex gap-4 items-center flex-wrap">
                             {firstRowLeft}
-                            <div className="flex-1" />
+                            {firstRowLeft.length > 0 && firstRowRight.length > 0 ? <div className="flex-1" /> : null}
                             {firstRowRight}
                             {showOpenEditorButton && inlineEditorButtonOnRow === 1 && !isReadOnly ? (
                                 <OpenEditorButton query={query} />
@@ -387,7 +387,7 @@ export function DataTable({ uniqueKey, query, setQuery, context, cachedResults }
                     {showSecondRow && (
                         <div className="flex gap-4 items-center">
                             {secondRowLeft}
-                            <div className="flex-1" />
+                            {secondRowLeft.length > 0 && secondRowRight.length > 0 ? <div className="flex-1" /> : null}
                             {secondRowRight}
                             {showOpenEditorButton && inlineEditorButtonOnRow === 2 && !isReadOnly ? (
                                 <OpenEditorButton query={query} />

frontend/src/queries/nodes/InsightViz/EditorFilters.scss

@@ -1,5 +1,4 @@
 @import '../../../styles/mixins';
-@import '../../../styles/mixins';
 
 .EditorFiltersWrapper {
     flex-shrink: 0;
@@ -48,38 +47,6 @@
                 display: block;
                 padding-right: 1rem;
             }
-            &.anim--enter {
-                width: 0px;
-
-                .EditorFilters {
-                    transform: translateX(calc(-1 * var(--editor-panel-width)));
-                }
-            }
-
-            &.anim--enter-active {
-                width: var(--editor-panel-width);
-                transition: width 250ms;
-                .EditorFilters {
-                    transform: translateX(0px);
-                    transition: transform 250ms;
-                }
-            }
-
-            &.anim--exit {
-                width: var(--editor-panel-width);
-                .EditorFilters {
-                    transform: translateX(0px);
-                }
-            }
-
-            &.anim--exit-active {
-                width: 0px;
-                transition: width 250ms;
-                .EditorFilters {
-                    transform: translateX(calc(-1 * var(--editor-panel-width)));
-                    transition: transform 250ms;
-                }
-            }
         }
 
         .EditorFilters {
@@ -95,4 +62,15 @@
             }
         }
     }
+
+    &.EditorFiltersWrapper--embedded {
+        margin-right: 0rem;
+
+        @include screen($xl) {
+            .EditorFilters {
+                width: 100%;
+                padding-right: 0rem;
+            }
+        }
+    }
 }

frontend/src/scenes/notebooks/Nodes/NotebookNodeQuery.scss

@@ -0,0 +1,25 @@
+@import '../../../styles/mixins';
+
+// Here we override based on NotebookNode the ph-query styling, so
+// as to not change the global styling. We need the extra nesting to ensure we
+// are more specific than the other insights css
+
+.NotebookNode.ph-query {
+    .insights-graph-container {
+        .ant-card-body {
+            padding: 0;
+        }
+
+        .RetentionContainer {
+            .LineGraph {
+                position: relative;
+            }
+        }
+    }
+
+    .funnel-insights-container {
+        &.non-empty-state {
+            min-height: initial;
+        }
+    }
+}

frontend/src/scenes/notebooks/Nodes/NotebookNodeQuery.tsx

@@ -12,6 +12,8 @@ import { IconSettings } from 'lib/lemon-ui/icons'
 import { urls } from 'scenes/urls'
 import api from 'lib/api'
 
+import './NotebookNodeQuery.scss'
+
 const DEFAULT_QUERY: QuerySchema = {
     kind: NodeKind.DataTableNode,
     source: {
@@ -36,7 +38,7 @@ const Component = (props: NotebookNodeViewProps<NotebookNodeQueryAttributes>): J
             modifiedQuery.full = false
             modifiedQuery.showHogQLEditor = false
             modifiedQuery.embedded = true
-        } else if (NodeKind.InsightVizNode === modifiedQuery.kind) {
+        } else if (NodeKind.InsightVizNode === modifiedQuery.kind || NodeKind.SavedInsightNode === modifiedQuery.kind) {
             modifiedQuery.showFilters = false
             modifiedQuery.showHeader = false
             modifiedQuery.showTable = false
@@ -78,8 +80,9 @@ export const Settings = ({
             modifiedQuery.showOpenEditorButton = false
             modifiedQuery.showHogQLEditor = true
             modifiedQuery.showResultsTable = false
-            modifiedQuery.showReload = true
-        } else if (NodeKind.InsightVizNode === modifiedQuery.kind) {
+            modifiedQuery.showReload = false
+            modifiedQuery.showElapsedTime = false
+        } else if (NodeKind.InsightVizNode === modifiedQuery.kind || NodeKind.SavedInsightNode === modifiedQuery.kind) {
             modifiedQuery.showFilters = true
             modifiedQuery.showResults = false
             modifiedQuery.embedded = true
@@ -109,7 +112,9 @@ export const NotebookNodeQuery = createPostHogWidgetNode<NotebookNodeQueryAttrib
         let title = 'HogQL'
         if (NodeKind.SavedInsightNode === query.kind) {
             const response = await api.insights.loadInsight(query.shortId)
-            title = response.results[0].name || 'Saved insight'
+            title = response.results[0].name?.length
+                ? response.results[0].name
+                : response.results[0].derived_name || 'Saved insight'
         } else if (NodeKind.DataTableNode === query.kind) {
             if (query.source.kind) {
                 title = query.source.kind.replace('Node', '').replace('Query', '')

frontend/src/scenes/notebooks/Notebook/Notebook.scss

@@ -137,6 +137,11 @@
         position: sticky;
         align-self: flex-start;
         top: 65px;
+
+        &__content {
+            max-height: calc(100vh - 220px);
+            overflow: scroll;
+        }
     }
 
     .LemonTable__content > table > thead {

frontend/src/scenes/notebooks/Notebook/NotebookSidebar.tsx

@@ -34,7 +34,9 @@ export const Widgets = ({ logic }: { logic: BuiltLogic<notebookNodeLogicType> })
         <div className="NotebookNodeSettings__widgets space-y-2 w-full">
             {widgets.map(({ key, label, Component }) => (
                 <LemonWidget key={key} title={label} onClose={() => setWidgetsVisible(false)}>
-                    <Component attributes={nodeAttributes} updateAttributes={updateAttributes} />
+                    <div className="NotebookNodeSettings__widgets__content">
+                        <Component attributes={nodeAttributes} updateAttributes={updateAttributes} />
+                    </div>
                 </LemonWidget>
             ))}
         </div>