diff --git a/frontend/src/scenes/notebooks/Notebook/Notebook.scss b/frontend/src/scenes/notebooks/Notebook/Notebook.scss
index 589e733a028c2..c6906e0a76f8a 100644
--- a/frontend/src/scenes/notebooks/Notebook/Notebook.scss
+++ b/frontend/src/scenes/notebooks/Notebook/Notebook.scss
@@ -145,7 +145,7 @@
&__content {
max-height: calc(100vh - 220px);
- overflow: scroll;
+ overflow: auto;
}
}
diff --git a/frontend/src/scenes/notebooks/Notebook/SlashCommands.tsx b/frontend/src/scenes/notebooks/Notebook/SlashCommands.tsx
index 5ecd3b7951a2b..87d5ee8c1e5c2 100644
--- a/frontend/src/scenes/notebooks/Notebook/SlashCommands.tsx
+++ b/frontend/src/scenes/notebooks/Notebook/SlashCommands.tsx
@@ -3,7 +3,19 @@ import Suggestion from '@tiptap/suggestion'
import { ReactRenderer } from '@tiptap/react'
import { LemonButton, LemonDivider, lemonToast } from '@posthog/lemon-ui'
-import { IconCohort, IconQueryEditor, IconRecording, IconTableChart, IconUploadFile } from 'lib/lemon-ui/icons'
+import {
+ IconCohort,
+ IconRecording,
+ IconTableChart,
+ IconUploadFile,
+ InsightSQLIcon,
+ InsightsFunnelsIcon,
+ InsightsLifecycleIcon,
+ InsightsPathsIcon,
+ InsightsRetentionIcon,
+ InsightsStickinessIcon,
+ InsightsTrendsIcon,
+} from 'lib/lemon-ui/icons'
import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useState } from 'react'
import { EditorCommands, EditorRange } from './utils'
import { NotebookNodeType } from '~/types'
@@ -57,10 +69,179 @@ const TEXT_CONTROLS: SlashCommandsItem[] = [
]
const SLASH_COMMANDS: SlashCommandsItem[] = [
+ {
+ title: 'Trend',
+ search: 'trend insight',
+ icon: ,
+ command: (chain) =>
+ chain.insertContent({
+ type: NotebookNodeType.Query,
+ attrs: {
+ query: {
+ kind: 'InsightVizNode',
+ source: {
+ kind: 'TrendsQuery',
+ filterTestAccounts: false,
+ series: [
+ {
+ kind: 'EventsNode',
+ event: '$pageview',
+ name: '$pageview',
+ math: 'total',
+ },
+ ],
+ interval: 'day',
+ trendsFilter: {
+ display: 'ActionsLineGraph',
+ },
+ },
+ },
+ },
+ }),
+ },
+ {
+ title: 'Funnel',
+ search: 'funnel insight',
+ icon: ,
+ command: (chain) =>
+ chain.insertContent({
+ type: NotebookNodeType.Query,
+ attrs: {
+ query: {
+ kind: 'InsightVizNode',
+ source: {
+ kind: 'FunnelsQuery',
+ series: [
+ {
+ kind: 'EventsNode',
+ name: '$pageview',
+ event: '$pageview',
+ },
+ {
+ kind: 'EventsNode',
+ name: '$pageview',
+ event: '$pageview',
+ },
+ ],
+ funnelsFilter: {
+ funnel_viz_type: 'steps',
+ },
+ },
+ },
+ },
+ }),
+ },
+ {
+ title: 'Retention',
+ search: 'retention insight',
+ icon: ,
+ command: (chain) =>
+ chain.insertContent({
+ type: NotebookNodeType.Query,
+ attrs: {
+ query: {
+ kind: 'InsightVizNode',
+ source: {
+ kind: 'RetentionQuery',
+ retentionFilter: {
+ period: 'Day',
+ total_intervals: 11,
+ target_entity: {
+ id: '$pageview',
+ name: '$pageview',
+ type: 'events',
+ },
+ returning_entity: {
+ id: '$pageview',
+ name: '$pageview',
+ type: 'events',
+ },
+ retention_type: 'retention_first_time',
+ },
+ },
+ },
+ },
+ }),
+ },
+ {
+ title: 'Paths',
+ search: 'paths insight',
+ icon: ,
+ command: (chain) =>
+ chain.insertContent({
+ type: NotebookNodeType.Query,
+ attrs: {
+ query: {
+ kind: 'InsightVizNode',
+ source: {
+ kind: 'PathsQuery',
+ pathsFilter: {
+ include_event_types: ['$pageview'],
+ },
+ },
+ },
+ },
+ }),
+ },
+ {
+ title: 'Stickiness',
+ search: 'stickiness insight',
+ icon: ,
+ command: (chain) =>
+ chain.insertContent({
+ type: NotebookNodeType.Query,
+ attrs: {
+ query: {
+ kind: 'InsightVizNode',
+ source: {
+ kind: 'StickinessQuery',
+ series: [
+ {
+ kind: 'EventsNode',
+ name: '$pageview',
+ event: '$pageview',
+ math: 'total',
+ },
+ ],
+ stickinessFilter: {},
+ },
+ },
+ },
+ }),
+ },
+ {
+ title: 'Lifecycle',
+ search: 'lifecycle insight',
+ icon: ,
+ command: (chain) =>
+ chain.insertContent({
+ type: NotebookNodeType.Query,
+ attrs: {
+ query: {
+ kind: 'InsightVizNode',
+ source: {
+ kind: 'LifecycleQuery',
+ series: [
+ {
+ kind: 'EventsNode',
+ name: '$pageview',
+ event: '$pageview',
+ math: 'total',
+ },
+ ],
+ lifecycleFilter: {
+ shown_as: 'Lifecycle',
+ },
+ },
+ full: true,
+ },
+ },
+ }),
+ },
{
title: 'HogQL',
search: 'sql',
- icon: ,
+ icon: ,
command: (chain) =>
chain.insertContent({ type: NotebookNodeType.Query, attrs: { query: examples['HogQLTable'] } }),
},