Skip to content

Commit

Permalink
feat: detach saved insights in notebooks (#17443)
Browse files Browse the repository at this point in the history
  • Loading branch information
daibhin authored Sep 18, 2023
1 parent 6f81059 commit a352a5b
Show file tree
Hide file tree
Showing 3 changed files with 73 additions and 34 deletions.
50 changes: 26 additions & 24 deletions frontend/src/scenes/notebooks/Nodes/NodeWrapper.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -156,33 +156,35 @@ export function NodeWrapper<T extends CustomNotebookNodeAttributes>({
<span className="flex-1 cursor-pointer">{title}</span>
</LemonButton>

{parsedHref && <LemonButton size="small" icon={<IconLink />} to={parsedHref} />}
<div className="flex space-x-1">
{parsedHref && <LemonButton size="small" icon={<IconLink />} to={parsedHref} />}

{expandable && (
<LemonButton
onClick={() => setExpanded(!expanded)}
size="small"
icon={expanded ? <IconUnfoldLess /> : <IconUnfoldMore />}
/>
)}
{expandable && (
<LemonButton
onClick={() => setExpanded(!expanded)}
size="small"
icon={expanded ? <IconUnfoldLess /> : <IconUnfoldMore />}
/>
)}

{widgets.length > 0 ? (
<LemonButton
onClick={() => setIsShowingSidebar(!isShowingSidebar)}
size="small"
icon={<IconFilter />}
active={isShowingSidebar && selected}
/>
) : null}
{widgets.length > 0 ? (
<LemonButton
onClick={() => setIsShowingSidebar(!isShowingSidebar)}
size="small"
icon={<IconFilter />}
active={isShowingSidebar && selected}
/>
) : null}

{isEditable && (
<LemonButton
onClick={() => deleteNode()}
size="small"
status="danger"
icon={<IconClose />}
/>
)}
{isEditable && (
<LemonButton
onClick={() => deleteNode()}
size="small"
status="danger"
icon={<IconClose />}
/>
)}
</div>
</div>
<div
ref={contentRef}
Expand Down
52 changes: 47 additions & 5 deletions frontend/src/scenes/notebooks/Nodes/NotebookNodeQuery.tsx
Original file line number Diff line number Diff line change
@@ -1,17 +1,19 @@
import { Query } from '~/queries/Query/Query'
import { DataTableNode, InsightVizNode, NodeKind, QuerySchema } from '~/queries/schema'
import { createPostHogWidgetNode } from 'scenes/notebooks/Nodes/NodeWrapper'
import { InsightLogicProps, InsightShortId, NotebookNodeType } from '~/types'
import { useMountedLogic, useValues } from 'kea'
import { InsightShortId, NotebookNodeType } from '~/types'
import { useMemo } from 'react'
import { notebookNodeLogic } from './notebookNodeLogic'
import { NotebookNodeViewProps, NotebookNodeAttributeProperties } from '../Notebook/utils'
import { containsHogQLQuery, isHogQLQuery, isNodeWithSource } from '~/queries/utils'
import { LemonButton } from '@posthog/lemon-ui'
import clsx from 'clsx'
import { urls } from 'scenes/urls'
import api from 'lib/api'
import { containsHogQLQuery, isHogQLQuery, isNodeWithSource } from '~/queries/utils'

import './NotebookNodeQuery.scss'
import { insightDataLogic } from 'scenes/insights/insightDataLogic'

const DEFAULT_QUERY: QuerySchema = {
kind: NodeKind.DataTableNode,
Expand All @@ -30,7 +32,7 @@ const Component = (props: NotebookNodeViewProps<NotebookNodeQueryAttributes>): J
const { expanded } = useValues(nodeLogic)

const modifiedQuery = useMemo(() => {
const modifiedQuery = { ...query }
const modifiedQuery = { ...query, full: false }

if (NodeKind.DataTableNode === modifiedQuery.kind || NodeKind.SavedInsightNode === modifiedQuery.kind) {
// We don't want to show the insights button for now
Expand Down Expand Up @@ -75,7 +77,7 @@ export const Settings = ({
const { query } = attributes

const modifiedQuery = useMemo(() => {
const modifiedQuery = { ...query }
const modifiedQuery = { ...query, full: false }

if (NodeKind.DataTableNode === modifiedQuery.kind || NodeKind.SavedInsightNode === modifiedQuery.kind) {
// We don't want to show the insights button for now
Expand All @@ -95,7 +97,47 @@ export const Settings = ({
return modifiedQuery
}, [query])

return (
const detachSavedInsight = (): void => {
if (attributes.query.kind === NodeKind.SavedInsightNode) {
const insightProps: InsightLogicProps = { dashboardItemId: attributes.query.shortId }
const dataLogic = insightDataLogic.findMounted(insightProps)

if (dataLogic) {
updateAttributes({ query: dataLogic.values.query as QuerySchema })
}
}
}

return attributes.query.kind === NodeKind.SavedInsightNode ? (
<div className="p-3 space-y-2">
<div className="text-lg font-semibold">Insight created outside of this notebook</div>
<div>
Changes made to the original insight will be reflected in the notebook. Or you can detach from the
insight to make changes independently in the notebook.
</div>

<div className="space-y-2">
<LemonButton
center={true}
type="secondary"
fullWidth
className="flex flex-1"
to={urls.insightEdit(attributes.query.shortId)}
>
Edit the insight
</LemonButton>
<LemonButton
center={true}
fullWidth
type="secondary"
className="flex flex-1"
onClick={detachSavedInsight}
>
Detach from insight
</LemonButton>
</div>
</div>
) : (
<div className="p-3">
<Query
query={modifiedQuery}
Expand Down
5 changes: 0 additions & 5 deletions frontend/src/scenes/notebooks/Notebook/Notebook.scss
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,6 @@
.NotebookSidebar {
position: relative;
width: 0px;
margin-top: 3.6rem; // Account for title
transition: width var(--notebook-popover-transition-properties);

.NotebookSidebar__content {
Expand All @@ -147,10 +146,6 @@
}

.NotebookNodeSettings__widgets {
position: sticky;
align-self: flex-start;
top: 65px;

&__content {
max-height: calc(100vh - 220px);
overflow: auto;
Expand Down

0 comments on commit a352a5b

Please sign in to comment.