Skip to content

Commit

Permalink
feat: saved insights settings in notebooks (#17373)
Browse files Browse the repository at this point in the history
* support insight viz nodes in notebooks
  • Loading branch information
daibhin authored Sep 12, 2023
1 parent 736b0fa commit 9ef1885
Show file tree
Hide file tree
Showing 9 changed files with 141 additions and 42 deletions.
Binary file modified frontend/__snapshots__/scenes-app-surveys--survey-view.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 4 additions & 4 deletions frontend/src/queries/nodes/DataTable/DataTable.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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} />
Expand All @@ -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} />
Expand Down
44 changes: 11 additions & 33 deletions frontend/src/queries/nodes/InsightViz/EditorFilters.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
@import '../../../styles/mixins';
@import '../../../styles/mixins';

.EditorFiltersWrapper {
flex-shrink: 0;
Expand Down Expand Up @@ -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 {
Expand All @@ -95,4 +62,15 @@
}
}
}

&.EditorFiltersWrapper--embedded {
margin-right: 0rem;

@include screen($xl) {
.EditorFilters {
width: 100%;
padding-right: 0rem;
}
}
}
}
25 changes: 25 additions & 0 deletions frontend/src/scenes/notebooks/Nodes/NotebookNodeQuery.scss
Original file line number Diff line number Diff line change
@@ -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;
}
}
}
13 changes: 9 additions & 4 deletions frontend/src/scenes/notebooks/Nodes/NotebookNodeQuery.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,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: {
Expand All @@ -35,7 +37,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
Expand Down Expand Up @@ -75,8 +77,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
Expand Down Expand Up @@ -111,7 +114,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', '')
Expand Down
5 changes: 5 additions & 0 deletions frontend/src/scenes/notebooks/Notebook/Notebook.scss
Original file line number Diff line number Diff line change
Expand Up @@ -142,6 +142,11 @@
position: sticky;
align-self: flex-start;
top: 65px;

&__content {
max-height: calc(100vh - 220px);
overflow: scroll;
}
}

.LemonTable__content > table > thead {
Expand Down
4 changes: 3 additions & 1 deletion frontend/src/scenes/notebooks/Notebook/NotebookSidebar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
import { actions, events, kea, key, listeners, path, props, reducers, selectors } from 'kea'
import { loaders } from 'kea-loaders'
import { NotebookListItemType, NotebookNodeType } from '~/types'

import api from 'lib/api'

import type { notebookCommentButtonLogicType } from './notebookCommentButtonLogicType'

export interface NotebookCommentButtonProps {
sessionRecordingId: string
startVisible: boolean
}

export const notebookCommentButtonLogic = kea<notebookCommentButtonLogicType>([
path((key) => ['scenes', 'session-recordings', 'NotebookCommentButton', 'multiNotebookCommentButtonLogic', key]),
props({} as NotebookCommentButtonProps),
key((props) => props.sessionRecordingId || 'no recording id yet'),
actions({
setShowPopover: (visible: boolean) => ({ visible }),
setSearchQuery: (query: string) => ({ query }),
loadContainingNotebooks: true,
loadAllNotebooks: true,
}),
reducers(({ props }) => ({
searchQuery: [
'',
{
setSearchQuery: (_, { query }) => query,
},
],
showPopover: [
props.startVisible,
{
setShowPopover: (_, { visible }) => visible,
},
],
})),
listeners(({ actions }) => ({
setSearchQuery: () => {
actions.loadAllNotebooks()
actions.loadContainingNotebooks()
},
})),
loaders(({ props, values }) => ({
allNotebooks: [
[] as NotebookListItemType[],
{
loadAllNotebooks: async (_, breakpoint) => {
breakpoint(100)
const response = await api.notebooks.list(undefined, undefined, values.searchQuery ?? undefined)
// TODO for simplicity we'll assume the results will fit into one page
return response.results
},
},
],
containingNotebooks: [
[] as NotebookListItemType[],
{
loadContainingNotebooks: async (_, breakpoint) => {
breakpoint(100)
const response = await api.notebooks.list(
[{ type: NotebookNodeType.Recording, attrs: { id: props.sessionRecordingId } }],
undefined,
values.searchQuery ?? undefined
)
// TODO for simplicity we'll assume the results will fit into one page
return response.results
},
},
],
})),
events(({ actions }) => ({
afterMount: () => {
actions.loadAllNotebooks()
actions.loadContainingNotebooks()
},
})),
selectors(() => ({
notebooksLoading: [
(s) => [s.allNotebooksLoading, s.containingNotebooksLoading],
(allNotebooksLoading, containingNotebooksLoading) => allNotebooksLoading || containingNotebooksLoading,
],
})),
])
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 9ef1885

Please sign in to comment.