feat: Added Canvas mode and node-children (#18129)

PostHog · Oct 25, 2023 · 29382cb · 29382cb
1 parent 46c0750
commit 29382cb
Show file tree

Hide file tree

Showing 28 changed files with 646 additions and 278 deletions.
diff --git a/frontend/__snapshots__/scenes-app-notebooks--recordings-playlist.png b/frontend/__snapshots__/scenes-app-notebooks--recordings-playlist.png
diff --git a/frontend/src/lib/constants.tsx b/frontend/src/lib/constants.tsx
@@ -165,6 +165,7 @@ export const FEATURE_FLAGS = {
     SURVEYS_PAYGATES: 'surveys-paygates',
     CONSOLE_RECORDING_SEARCH: 'console-recording-search', // owner: #team-monitoring
     PERSONS_HOGQL_QUERY: 'persons-hogql-query', // owner: @mariusandra
+    NOTEBOOK_CANVASES: 'notebook-canvases', // owner: #team-monitoring
     SESSION_RECORDING_SAMPLING: 'session-recording-sampling', // owner: #team-monitoring
 } as const
 export type FeatureFlagKey = (typeof FEATURE_FLAGS)[keyof typeof FEATURE_FLAGS]

diff --git a/frontend/src/queries/nodes/DataTable/renderColumn.tsx b/frontend/src/queries/nodes/DataTable/renderColumn.tsx
@@ -5,7 +5,7 @@ import { Link } from 'lib/lemon-ui/Link'
 import { TZLabel } from 'lib/components/TZLabel'
 import { Property } from 'lib/components/Property'
 import { urls } from 'scenes/urls'
-import { PersonDisplay } from 'scenes/persons/PersonDisplay'
+import { PersonDisplay, PersonDisplayProps } from 'scenes/persons/PersonDisplay'
 import { DataTableNode, EventsQueryPersonColumn, HasPropertiesNode } from '~/queries/schema'
 import { QueryContext } from '~/queries/types'
 
@@ -204,27 +204,29 @@ export function renderColumn(
             )
         }
         return <Property value={eventRecord.person?.properties?.[propertyKey]} />
-    } else if (key === 'person' && isEventsQuery(query.source)) {
-        const personRecord = value as EventsQueryPersonColumn
-        return personRecord.distinct_id ? (
-            <PersonDisplay withIcon person={personRecord} />
-        ) : (
-            <PersonDisplay noLink withIcon person={value} />
-        )
-    } else if (key === 'person' && isPersonsNode(query.source)) {
+    } else if (key === 'person') {
         const personRecord = record as PersonType
-        return (
-            <Link to={urls.personByDistinctId(personRecord.distinct_ids[0])}>
-                <PersonDisplay noLink withIcon person={personRecord} noPopover />
-            </Link>
-        )
-    } else if (key === 'person' && isPersonsQuery(query.source)) {
-        const personRecord = value as PersonType
-        return (
-            <Link to={urls.personByUUID(personRecord.id ?? '-')}>
-                <PersonDisplay noLink withIcon person={personRecord} noPopover />
-            </Link>
-        )
+
+        const displayProps: PersonDisplayProps = {
+            withIcon: true,
+            person: record as PersonType,
+            noPopover: true,
+        }
+
+        if (isEventsQuery(query.source)) {
+            displayProps.person = value.distinct_id ? (value as EventsQueryPersonColumn) : value
+            displayProps.noPopover = false // If we are in an events list, the popover experience is better
+        }
+
+        if (isPersonsNode(query.source) && personRecord.distinct_ids) {
+            displayProps.href = urls.personByDistinctId(personRecord.distinct_ids[0])
+        }
+
+        if (isPersonsQuery(query.source)) {
+            displayProps.href = urls.personByUUID(personRecord.id ?? '-')
+        }
+
+        return <PersonDisplay {...displayProps} />
     } else if (key === 'person.$delete' && (isPersonsNode(query.source) || isPersonsQuery(query.source))) {
         const personRecord = record as PersonType
         return <DeletePersonButton person={personRecord} />

diff --git a/frontend/src/scenes/appScenes.ts b/frontend/src/scenes/appScenes.ts
@@ -79,6 +79,7 @@ export const appScenes: Record<Scene, () => any> = {
     [Scene.Feedback]: () => import('./feedback/Feedback'),
     [Scene.Notebooks]: () => import('./notebooks/NotebooksScene'),
     [Scene.Notebook]: () => import('./notebooks/NotebookScene'),
+    [Scene.Canvas]: () => import('./notebooks/NotebookCanvasScene'),
     [Scene.Products]: () => import('./products/Products'),
     [Scene.Onboarding]: () => import('./onboarding/Onboarding'),
 }
diff --git a/frontend/src/scenes/notebooks/Nodes/NodeWrapper.scss b/frontend/src/scenes/notebooks/Nodes/NodeWrapper.scss
@@ -4,14 +4,14 @@
     --border-color: var(--border);
 
     transform: translate3d(0, 0, 0);
-    margin: 0.65rem 0px 0.35rem 0px;
 
     .NotebookNode__box {
         transform: translate3d(0, 0, 0);
         border: 1px solid var(--border-color);
         border-radius: var(--radius);
         background-color: var(--bg-light);
         transition: border 150ms linear, margin-bottom 150ms linear;
+        overflow: hidden;
 
         .NotebookNode__meta {
             display: flex;
@@ -33,24 +33,24 @@
         }
     }
 
-    .NotebookNode__actions {
+    .NotebookNode__gap {
         display: flex;
         gap: 0.25rem;
         overflow: hidden;
-
         transition: all 150ms linear 1000ms;
         opacity: 0;
-        height: 0;
-        margin-top: 0;
+        height: 1rem;
+        align-items: center;
     }
 
-    &:hover,
-    &--selected {
-        .NotebookNode__actions {
-            opacity: 1;
-            height: 2rem;
-            margin-top: 0.5rem;
-            transition: all 150ms linear;
+    &--has-actions {
+        &:hover,
+        &--selected {
+            .NotebookNode__gap {
+                opacity: 1;
+                height: 2.5rem;
+                transition: all 150ms linear;
+            }
         }
     }