feat(data-warehouse): modeling ui (#24587)

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>

frontend/src/layout/navigation-3000/Navigation.scss

@@ -52,6 +52,14 @@
         display: flex;
         flex-direction: column;
     }
+
+    &.Navigation3000__scene--canvas {
+        --scene-padding: 0px;
+
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+    }
 }
 
 // Navbar

frontend/src/layout/navigation-3000/Navigation.tsx

@@ -53,7 +53,8 @@ export function Navigation({
                     className={clsx(
                         'Navigation3000__scene',
                         // Hack - once we only have 3000 the "minimal" scenes should become "app-raw"
-                        sceneConfig?.layout === 'app-raw' && 'Navigation3000__scene--raw'
+                        sceneConfig?.layout === 'app-raw' && 'Navigation3000__scene--raw',
+                        sceneConfig?.layout === 'app-canvas' && 'Navigation3000__scene--canvas'
                     )}
                 >
                     {!sceneConfig?.hideBillingNotice && <BillingAlertsV2 />}

frontend/src/layout/navigation-3000/navigationLogic.tsx

@@ -510,6 +510,14 @@ export const navigation3000Logic = kea<navigation3000LogicType>([
                             icon: <IconServer />,
                             to: isUsingSidebar ? undefined : urls.dataWarehouse(),
                         },
+                        featureFlags[FEATURE_FLAGS.DATA_MODELING] && hasOnboardedAnyProduct
+                            ? {
+                                  identifier: Scene.DataModel,
+                                  label: 'Data model',
+                                  icon: <IconServer />,
+                                  to: isUsingSidebar ? undefined : urls.dataModel(),
+                              }
+                            : null,
                         hasOnboardedAnyProduct
                             ? {
                                   identifier: Scene.Pipeline,

frontend/src/lib/api.ts

@@ -2072,6 +2072,18 @@ const api = {
         ): Promise<DataWarehouseSavedQuery> {
             return await new ApiRequest().dataWarehouseSavedQuery(viewId).update({ data })
         },
+        async ancestors(viewId: DataWarehouseSavedQuery['id'], level?: number): Promise<Record<string, string[]>> {
+            return await new ApiRequest()
+                .dataWarehouseSavedQuery(viewId)
+                .withAction('ancestors')
+                .create({ data: { level } })
+        },
+        async descendants(viewId: DataWarehouseSavedQuery['id'], level?: number): Promise<Record<string, string[]>> {
+            return await new ApiRequest()
+                .dataWarehouseSavedQuery(viewId)
+                .withAction('descendants')
+                .create({ data: { level } })
+        },
     },
     externalDataSources: {
         async list(options?: ApiMethodOptions | undefined): Promise<PaginatedResponse<ExternalDataStripeSource>> {

frontend/src/lib/constants.tsx

@@ -211,6 +211,7 @@ export const FEATURE_FLAGS = {
     WEB_ANALYTICS_REPLAY: 'web-analytics-replay', // owner: @robbie-c
     BATCH_EXPORTS_POSTHOG_HTTP: 'posthog-http-batch-exports',
     EXPERIMENT_MAKE_DECISION: 'experiment-make-decision', // owner: @jurajmajerik #team-feature-success
+    DATA_MODELING: 'data-modeling', // owner: @EDsCODE #team-data-warehouse
     WEB_ANALYTICS_CONVERSION_GOALS: 'web-analytics-conversion-goals', // owner: @robbie-c
     WEB_ANALYTICS_LAST_CLICK: 'web-analytics-last-click', // owner: @robbie-c
 } as const

frontend/src/queries/schema.json

@@ -3444,6 +3444,9 @@
                 "hogql_value": {
                     "type": "string"
                 },
+                "id": {
+                    "type": "string"
+                },
                 "name": {
                     "type": "string"
                 },

frontend/src/queries/schema.ts

@@ -1693,6 +1693,7 @@ export interface DatabaseSchemaField {
     table?: string
     fields?: string[]
     chain?: (string | integer)[]
+    id?: string
 }
 
 export interface DatabaseSchemaTableCommon {

frontend/src/scenes/appScenes.ts

@@ -38,6 +38,7 @@ export const appScenes: Record<Scene, () => any> = {
     [Scene.Surveys]: () => import('./surveys/Surveys'),
     [Scene.Survey]: () => import('./surveys/Survey'),
     [Scene.SurveyTemplates]: () => import('./surveys/SurveyTemplates'),
+    [Scene.DataModel]: () => import('./data-model/DataModelScene'),
     [Scene.DataWarehouse]: () => import('./data-warehouse/external/DataWarehouseExternalScene'),
     [Scene.DataWarehouseTable]: () => import('./data-warehouse/new/NewSourceWizard'),
     [Scene.DataWarehouseExternal]: () => import('./data-warehouse/external/DataWarehouseExternalScene'),

frontend/src/scenes/data-model/DataModelScene.tsx

@@ -0,0 +1,27 @@
+import { useValues } from 'kea'
+import { ViewLinkModal } from 'scenes/data-warehouse/ViewLinkModal'
+import { SceneExport } from 'scenes/sceneTypes'
+
+import { dataModelSceneLogic } from './dataModelSceneLogic'
+import NodeCanvasWithTable from './NodeCanvasWithTable'
+
+export const scene: SceneExport = {
+    component: DataModelScene,
+    logic: dataModelSceneLogic,
+}
+
+export function DataModelScene(): JSX.Element {
+    const { simplifiedPersonFields, joinedFieldsAsNodes, allNodes } = useValues(dataModelSceneLogic)
+
+    return (
+        <>
+            <NodeCanvasWithTable
+                nodes={allNodes}
+                fixedFields={simplifiedPersonFields}
+                joinedFields={joinedFieldsAsNodes}
+                tableName="persons"
+            />
+            <ViewLinkModal />
+        </>
+    )
+}

frontend/src/scenes/data-model/Node.tsx

@@ -0,0 +1,20 @@
+interface NodeProps {
+    pref: (el: HTMLDivElement | null) => void
+    width?: string
+    height?: string
+    className?: string
+    children: React.ReactNode
+}
+
+function GenericNode({ pref, className = '', children }: NodeProps): JSX.Element {
+    return (
+        <div
+            ref={pref}
+            className={`flex max-w-[200px] px-4 py-3 justify-center items-center space-between gap-1 bg-bg-3000 border border-black border-2 rounded-lg truncate ${className}`}
+        >
+            {children}
+        </div>
+    )
+}
+
+export default GenericNode