feat(customers): Filter insight by person in PersonFeedCanvas

Author: arthurdedeus

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

@@ -9,11 +9,21 @@ import { insightDataLogic } from 'scenes/insights/insightDataLogic'
 import { insightLogic } from 'scenes/insights/insightLogic'
 import { useSummarizeInsight } from 'scenes/insights/summarizeInsight'
 import { createPostHogWidgetNode } from 'scenes/notebooks/Nodes/NodeWrapper'
+import { notebookLogic } from 'scenes/notebooks/Notebook/notebookLogic'
 import { urls } from 'scenes/urls'
 
 import { Query } from '~/queries/Query/Query'
 import { DataTableNode, InsightQueryNode, InsightVizNode, NodeKind, QuerySchema } from '~/queries/schema/schema-general'
-import { containsHogQLQuery, isHogQLQuery, isInsightVizNode, isNodeWithSource } from '~/queries/utils'
+import {
+    containsHogQLQuery,
+    isActorsQuery,
+    isDataTableNode,
+    isEventsQuery,
+    isHogQLQuery,
+    isInsightVizNode,
+    isNodeWithSource,
+    isSavedInsightNode,
+} from '~/queries/utils'
 import { InsightLogicProps, InsightShortId } from '~/types'
 
 import { NotebookNodeAttributeProperties, NotebookNodeProps, NotebookNodeType } from '../types'
@@ -39,6 +49,7 @@ const Component = ({
     const nodeLogic = useMountedLogic(notebookNodeLogic)
     const { expanded } = useValues(nodeLogic)
     const { setTitlePlaceholder } = useActions(nodeLogic)
+    const { canvasFiltersOverride } = useValues(notebookLogic)
     const summarizeInsight = useSummarizeInsight()
 
     const insightLogicProps = {
@@ -77,17 +88,17 @@ const Component = ({
     }, [query, insightName])
 
     const modifiedQuery = useMemo(() => {
-        const modifiedQuery = { ...query, full: false }
+        let modifiedQuery = { ...query, full: false }
 
-        if (NodeKind.DataTableNode === modifiedQuery.kind || NodeKind.SavedInsightNode === modifiedQuery.kind) {
+        if (isDataTableNode(modifiedQuery) || isSavedInsightNode(modifiedQuery)) {
             modifiedQuery.showOpenEditorButton = false
             modifiedQuery.full = false
             modifiedQuery.showHogQLEditor = false
             modifiedQuery.embedded = true
             modifiedQuery.showTimings = false
         }
 
-        if (NodeKind.InsightVizNode === modifiedQuery.kind || NodeKind.SavedInsightNode === modifiedQuery.kind) {
+        if (isInsightVizNode(modifiedQuery) || isSavedInsightNode(modifiedQuery)) {
             modifiedQuery.showFilters = false
             modifiedQuery.showHeader = false
             modifiedQuery.showTable = false
@@ -96,7 +107,7 @@ const Component = ({
         }
 
         return modifiedQuery
-    }, [query])
+    }, [query, canvasFiltersOverride])
 
     if (!expanded) {
         return null
@@ -129,18 +140,21 @@ const Component = ({
 
 type NotebookNodeQueryAttributes = {
     query: QuerySchema
+    /* Wether canvasFiltersOverride is applied, as we should apply it only once  */
+    isDefaultFilterApplied: boolean
 }
 
 export const Settings = ({
     attributes,
     updateAttributes,
 }: NotebookNodeAttributeProperties<NotebookNodeQueryAttributes>): JSX.Element => {
-    const { query } = attributes
+    const { query, isDefaultFilterApplied } = attributes
+    const { canvasFiltersOverride } = useValues(notebookLogic)
 
     const modifiedQuery = useMemo(() => {
         const modifiedQuery = { ...query, full: false }
 
-        if (NodeKind.DataTableNode === modifiedQuery.kind || NodeKind.SavedInsightNode === modifiedQuery.kind) {
+        if (isDataTableNode(modifiedQuery) || isSavedInsightNode(modifiedQuery)) {
             modifiedQuery.showOpenEditorButton = false
             modifiedQuery.showHogQLEditor = true
             modifiedQuery.showResultsTable = false
@@ -160,18 +174,33 @@ export const Settings = ({
             modifiedQuery.showColumnConfigurator = true
         }
 
-        if (NodeKind.InsightVizNode === modifiedQuery.kind || NodeKind.SavedInsightNode === modifiedQuery.kind) {
+        if (isInsightVizNode(modifiedQuery) || isSavedInsightNode(modifiedQuery)) {
             modifiedQuery.showFilters = true
             modifiedQuery.showHeader = true
             modifiedQuery.showResults = false
             modifiedQuery.embedded = true
         }
 
+        if (
+            isInsightVizNode(modifiedQuery) &&
+            !isHogQLQuery(modifiedQuery.source) &&
+            !isActorsQuery(modifiedQuery.source) &&
+            !isDefaultFilterApplied
+        ) {
+            modifiedQuery.source.properties = canvasFiltersOverride
+            updateAttributes({ ...attributes, isDefaultFilterApplied: true })
+        }
+
+        if (isDataTableNode(modifiedQuery) && isEventsQuery(modifiedQuery.source) && !isDefaultFilterApplied) {
+            modifiedQuery.source.fixedProperties = canvasFiltersOverride
+            updateAttributes({ ...attributes, isDefaultFilterApplied: true })
+        }
+
         return modifiedQuery
-    }, [query])
+    }, [query, canvasFiltersOverride])
 
     const detachSavedInsight = (): void => {
-        if (attributes.query.kind === NodeKind.SavedInsightNode) {
+        if (isSavedInsightNode(attributes.query)) {
             const insightProps: InsightLogicProps = { dashboardItemId: attributes.query.shortId }
             const dataLogic = insightDataLogic.findMounted(insightProps)
 
@@ -181,7 +210,7 @@ export const Settings = ({
         }
     }
 
-    return attributes.query.kind === NodeKind.SavedInsightNode ? (
+    return isSavedInsightNode(attributes.query) ? (
         <div className="p-3 deprecated-space-y-2">
             <div className="text-lg font-semibold">Insight created outside of this notebook</div>
             <div>
@@ -241,9 +270,12 @@ export const NotebookNodeQuery = createPostHogWidgetNode<NotebookNodeQueryAttrib
         query: {
             default: DEFAULT_QUERY,
         },
+        isDefaultFilterApplied: {
+            default: false,
+        },
     },
     href: ({ query }) =>
-        query.kind === NodeKind.SavedInsightNode
+        isSavedInsightNode(query)
             ? urls.insightView(query.shortId)
             : isInsightVizNode(query)
               ? urls.insightNew({ query })
@@ -257,6 +289,7 @@ export const NotebookNodeQuery = createPostHogWidgetNode<NotebookNodeQueryAttrib
                     kind: NodeKind.SavedInsightNode,
                     shortId: match[1] as InsightShortId,
                 },
+                isDefaultFilterApplied: false,
             }
         },
     },

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

@@ -14,6 +14,7 @@ import { NotebookLogicProps, notebookLogic } from 'scenes/notebooks/Notebook/not
 
 import { ErrorBoundary } from '~/layout/ErrorBoundary'
 import { SCRATCHPAD_NOTEBOOK } from '~/models/notebooksModel'
+import { AnyPropertyFilter } from '~/types'
 
 import { AddInsightsToNotebookModal } from '../AddInsightsToNotebookModal/AddInsightsToNotebookModal'
 import { Editor } from './Editor'
@@ -28,6 +29,7 @@ export type NotebookProps = NotebookLogicProps & {
     initialAutofocus?: EditorFocusPosition
     initialContent?: JSONContent
     editable?: boolean
+    canvasFiltersOverride?: AnyPropertyFilter[]
 }
 
 export function Notebook({
@@ -36,8 +38,9 @@ export function Notebook({
     editable = true,
     initialAutofocus = 'start',
     initialContent,
+    canvasFiltersOverride,
 }: NotebookProps): JSX.Element {
-    const logicProps: NotebookLogicProps = { shortId, mode }
+    const logicProps: NotebookLogicProps = { shortId, mode, canvasFiltersOverride }
     const logic = notebookLogic(logicProps)
     const { notebook, notebookLoading, editor, conflictWarningVisible, isEditable, isTemplate, notebookMissing } =
         useValues(logic)

frontend/src/scenes/notebooks/Notebook/notebookLogic.ts

@@ -22,6 +22,7 @@ import {
     AccessControlLevel,
     AccessControlResourceType,
     ActivityScope,
+    AnyPropertyFilter,
     CommentType,
     InsightShortId,
     SidePanelTab,
@@ -51,6 +52,7 @@ export type NotebookLogicProps = {
     shortId: string
     mode?: NotebookLogicMode
     target?: NotebookTarget
+    canvasFiltersOverride?: AnyPropertyFilter[]
 }
 
 async function runWhenEditorIsReady(waitForEditor: () => boolean, fn: () => any): Promise<any> {
@@ -151,6 +153,7 @@ export const notebookLogic = kea<notebookLogicType>([
         setAccessDeniedToNotebook: true,
     }),
     reducers(({ props }) => ({
+        canvasFiltersOverride: [props.canvasFiltersOverride ?? ([] as AnyPropertyFilter[])],
         isShareModalOpen: [
             false,
             {

frontend/src/scenes/persons/PersonFeedCanvas.tsx

@@ -4,7 +4,7 @@ import { uuid } from 'lib/utils'
 import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
 import { Notebook } from 'scenes/notebooks/Notebook/Notebook'
 
-import { PersonType } from '~/types'
+import { AnyPropertyFilter, PersonType, PropertyFilterType, PropertyOperator } from '~/types'
 
 type PersonFeedCanvasProps = {
     person: PersonType
@@ -16,11 +16,21 @@ const PersonFeedCanvas = ({ person }: PersonFeedCanvasProps): JSX.Element => {
     const id = person.id
     const distinctId = person.distinct_ids[0]
 
+    const personFilter: AnyPropertyFilter[] = [
+        {
+            type: PropertyFilterType.EventMetadata,
+            key: 'person_id',
+            value: id,
+            operator: PropertyOperator.Exact,
+        },
+    ]
+
     return (
         <Notebook
             editable={false}
             shortId={`canvas-${id}`}
             mode="canvas"
+            canvasFiltersOverride={personFilter}
             initialContent={{
                 type: 'doc',
                 content: [