Conversation
Replace the centered lineage spinner with a three-node ELK graph. Keep known node names visible in focused lineage views. Generated-By: PostHog Desktop Task-Id: d30b63b9-ca68-4fde-bebe-e6cdbd9740a4
🤖 CI report✅ Trunk lane — non-backend laneThis PR is assigned to the non-backend lane. It does not run backend Python tests and may merge in parallel with PRs in other lanes.
|
| Function | Location | Complexity | Limit |
|---|---|---|---|
LineageNode |
products/data_modeling/frontend/lineage/LineageNode.tsx:194 |
42 | 10 |
QueryInfo |
frontend/src/scenes/data-warehouse/editor/output-pane-tabs/QueryInfo.tsx:38 |
40 | 10 |
LineageGraphContent |
products/data_modeling/frontend/lineage/LineageGraph.tsx:59 |
17 | 10 |
MetricLineagePanel |
products/data_catalog/frontend/MetricLineagePanel.tsx:74 |
12 | 10 |
✅ Duplication (Python) — clean
New Python code duplication introduced by this branch. Fails at 70+ tokens in app code, or 150+ tokens when both copies live in test files. Advisory while the gate proves itself: extract a shared helper instead of copying.
⚠️ Duplication (TypeScript) — 1 new duplicated block (worst 74 tokens)
New TypeScript code duplication introduced by this branch. Fails at 70+ tokens in app code, or 150+ tokens when both copies live in test files. Advisory while the gate proves itself: extract a shared helper instead of copying.
| First copy | Second copy | Lines | Tokens |
|---|---|---|---|
products/data_modeling/frontend/lineage/LineageNode.tsx:224 |
products/data_modeling/frontend/lineage/LineageNode.tsx:305 |
12 | 74 |
⚠️ Bundle size — 🔺 +9.1 KiB (+0.0%)
Uncompressed size of every built .js bundle, compared against the base branch.
Total: 68.97 MiB · 🔺 +9.1 KiB (+0.0%)
| File | Size | Δ vs base |
|---|---|---|
exporter/src/exporter/scenes/ExporterNotebookScene.js |
3.69 MiB | 🔺 +3.4 KiB (+0.1%) |
render-query/src/render-query/render-query.js |
20.18 MiB | 🔺 +2.4 KiB (+0.0%) |
posthog-app/_parent/products/signals/frontend/inbox/InboxScene.js |
491.0 KiB | 🔺 +1.8 KiB (+0.4%) |
Posted automatically by build-bundle-size-report · uncompressed bytes from dist-report
✅ Eager graph — within budget
How much code each root ships on the eager path — downloaded and parsed before the surface is interactive. Measured from the esbuild output chunks (post-tree-shake, static imports only); lazy import() / React.lazy chunks are not counted.
| Root | Eager (shipped) | Δ vs base | Budget |
|---|---|---|---|
entry (logged-out pages, app bootstrap)src/index.tsx |
1.58 MiB · 22 files | 🔺 +590 B (+0.0%) | █████████░ 85.8% of 1.84 MiB |
logged-out boot: index + App + bootApp (preloaded by every page, including /login)src/index.tsx + src/scenes/App.tsx + src/scenes/bootApp.ts |
3.52 MiB · 629 files | 🔺 +619 B (+0.0%) | █████████░ 87.4% of 4.03 MiB |
authenticated shell (every logged-in page)src/scenes/AuthenticatedShell.tsx |
7.35 MiB · 2,339 files | 🔺 +1.8 KiB (+0.0%) | █████████░ 88.1% of 8.34 MiB |
🟢 node_modules/monaco-editor/ stays out of src/index.tsx
🟢 src/lib/components/ActivityLog/describers stays out of src/index.tsx
🟢 [object Object] stays out of src/index.tsx
🟢 [object Object] stays out of src/index.tsx
🟢 node_modules/monaco-editor/ stays out of src/index.tsx + src/scenes/App.tsx + src/scenes/bootApp.ts
🟢 src/layout/navigation-3000/navigationLogic.tsx stays out of src/index.tsx + src/scenes/App.tsx + src/scenes/bootApp.ts
🟢 src/scenes/dashboard/dashboardLogic.tsx stays out of src/index.tsx + src/scenes/App.tsx + src/scenes/bootApp.ts
🟢 src/lib/lemon-ui/LemonMarkdown/ stays out of src/index.tsx + src/scenes/App.tsx + src/scenes/bootApp.ts
🟢 src/lib/components/RichContentEditor/ stays out of src/index.tsx + src/scenes/App.tsx + src/scenes/bootApp.ts
🟢 src/lib/components/CodeSnippet/ stays out of src/index.tsx + src/scenes/App.tsx + src/scenes/bootApp.ts
🟢 src/taxonomy/core-filter-definitions-by-group.json stays out of src/index.tsx + src/scenes/App.tsx + src/scenes/bootApp.ts
🟢 node_modules/monaco-editor/ stays out of src/scenes/AuthenticatedShell.tsx
🟢 src/lib/components/ActivityLog/describers stays out of src/scenes/AuthenticatedShell.tsx
🟢 [object Object] stays out of src/scenes/AuthenticatedShell.tsx
🟢 src/scenes/session-recordings/player/sessionRecordingPlayerLogic.ts stays out of src/scenes/AuthenticatedShell.tsx
🟢 [object Object] stays out of src/scenes/AuthenticatedShell.tsx
🟢 [object Object] stays out of src/scenes/AuthenticatedShell.tsx
🟢 [object Object] stays out of src/scenes/AuthenticatedShell.tsx
Largest files eagerly shipped from src/index.tsx
| Size | File |
|---|---|
| 126.8 KiB | ../node_modules/.pnpm/react-dom@18.3.1_react@18.3.1/node_modules/react-dom/cjs/react-dom.production.min.js |
| 24.6 KiB | ../node_modules/.pnpm/buffer@6.0.3/node_modules/buffer/index.js |
| 6.3 KiB | ../node_modules/.pnpm/react@18.3.1/node_modules/react/cjs/react.production.min.js |
| 4.5 KiB | ../node_modules/.pnpm/@jspm+core@2.1.0/node_modules/@jspm/core/nodelibs/browser/process.js |
| 3.9 KiB | ../node_modules/.pnpm/scheduler@0.23.2/node_modules/scheduler/cjs/scheduler.production.min.js |
| 1.4 KiB | ../node_modules/.pnpm/base64-js@1.5.1/node_modules/base64-js/index.js |
| 1.3 KiB | src/index.tsx |
| 1.3 KiB | src/RootErrorBoundary.tsx |
| 912 B | ../node_modules/.pnpm/ieee754@1.2.1/node_modules/ieee754/index.js |
| 854 B | src/scenes/ChunkLoadErrorBoundary.tsx |
Largest files eagerly shipped from src/index.tsx + src/scenes/App.tsx + src/scenes/bootApp.ts
| Size | File |
|---|---|
| 301.8 KiB | ../node_modules/.pnpm/posthog-js@1.434.14_@types+react@18.3.27_react@18.3.1/node_modules/posthog-js/dist/module.mjs |
| 216.9 KiB | ../node_modules/.pnpm/@posthog+icons@0.38.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@posthog/icons/dist/posthog-icons.es.js |
| 126.8 KiB | ../node_modules/.pnpm/react-dom@18.3.1_react@18.3.1/node_modules/react-dom/cjs/react-dom.production.min.js |
| 100.5 KiB | src/lib/api.ts |
| 88.5 KiB | src/products.tsx |
| 69.4 KiB | src/lib/lemon-ui/icons/icons.tsx |
| 40.1 KiB | src/lib/utils/eventUsageLogic.ts |
| 38.7 KiB | ../node_modules/.pnpm/@dnd-kit+core@6.0.8_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@dnd-kit/core/dist/core.esm.js |
| 33.9 KiB | ../node_modules/.pnpm/kea@4.0.0-pre.6_patch_hash=139b8d1f1304f9d9da452a9a1244c94ea679dbcb85687d8999563146879fb6f5_react@18.3.1/node_modules/kea/lib/index.cjs.js |
| 28.4 KiB | src/scenes/scenes.ts |
Largest files eagerly shipped from src/scenes/AuthenticatedShell.tsx
| Size | File |
|---|---|
| 301.8 KiB | ../node_modules/.pnpm/posthog-js@1.434.14_@types+react@18.3.27_react@18.3.1/node_modules/posthog-js/dist/module.mjs |
| 272.3 KiB | src/taxonomy/core-filter-definitions-by-group.json |
| 216.9 KiB | ../node_modules/.pnpm/@posthog+icons@0.38.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@posthog/icons/dist/posthog-icons.es.js |
| 153.7 KiB | ../node_modules/.pnpm/re2js@0.4.1/node_modules/re2js/build/index.esm.js |
| 126.8 KiB | ../node_modules/.pnpm/react-dom@18.3.1_react@18.3.1/node_modules/react-dom/cjs/react-dom.production.min.js |
| 100.5 KiB | src/lib/api.ts |
| 98.8 KiB | ../packages/quill/packages/quill/dist/index.js |
| 93.3 KiB | ../node_modules/.pnpm/prosemirror-view@1.40.1/node_modules/prosemirror-view/dist/index.js |
| 90.6 KiB | ../node_modules/.pnpm/@tiptap+core@3.20.6_@tiptap+pm@3.20.6/node_modules/@tiptap/core/dist/index.js |
| 88.5 KiB | src/products.tsx |
Posted automatically by check-eager-graph · sizes are eager output bytes (shipped, post-tree-shake) from the esbuild metafile · part of #32479
✅ Toolbar bundle — eager 2.16 MiB within budget
What the toolbar ships to customer pages, measured from the esbuild output (minified, post-tree-shake). The eager set is the entry plus everything statically imported from it — fetched before any feature runs; deferred chunks load lazily. The eager guardrail is 5.72 MiB. Each output file must also stay below 10 MB, where CloudFront stops compressing it. The module boundary is enforced separately by check-toolbar-graph.
| Metric | Size | Δ vs base | Budget |
|---|---|---|---|
| Eager (shipped) entry + static imports |
2.16 MiB · 19 files | 🔺 +590 B (+0.0%) | ████░░░░░░ 37.8% of 5.72 MiB |
| Deferred (lazy) | 2.10 MiB · 44 files | no change | n/a — loads on demand |
Loader dist/toolbar.js |
1.2 KiB | no change | █░░░░░░░░░ 6.0% of 19.5 KiB |
Largest eagerly-shipped chunks
| Size | File |
|---|---|
| 805.9 KiB | dist/toolbar/toolbar-app-5STLTNPX.css |
| 651.7 KiB | dist/toolbar/chunk-chunk-7ZORLPSY.js |
| 259.4 KiB | dist/toolbar/chunk-chunk-2FGAEFTI.js |
| 138.3 KiB | dist/toolbar/chunk-chunk-UA3V2PCC.js |
| 131.8 KiB | dist/toolbar/chunk-chunk-FDH2IBXT.js |
| 75.2 KiB | dist/toolbar/toolbar-app-SD4VQXWA.js |
| 69.0 KiB | dist/toolbar/chunk-chunk-TSAL54PB.js |
| 35.6 KiB | dist/toolbar/chunk-chunk-63EWNJRZ.js |
| 21.0 KiB | dist/toolbar/chunk-chunk-F5GDSM5D.js |
| 6.8 KiB | dist/toolbar/chunk-chunk-DV7IWQNF.js |
Posted automatically by check-toolbar-size · sizes are toolbar output bytes (shipped, post-tree-shake) from the esbuild metafile
✅ Dist folder size — 🔺 +190.1 KiB (+0.0%)
Total size of the built frontend/dist folder (all assets), compared against the base branch.
Total: 947.85 MiB · 🔺 +190.1 KiB (+0.0%)
|
[Medium risk] Adds loading skeleton UI to lineage graph displays. The PR appears safe to merge; no new actionable issue was identified. Reviews (2) · Last reviewed commit: "chore(visual): update storybook baseline..." |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
|
Navigate logical layers of code changes, visualize relationships, and explore their blast radius. Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthroughLineage loading views now display graphs with placeholder nodes instead of standalone spinners or skeletons in the updated cases. The graph can identify a focused node, applies layout and viewport settings, and exposes a screen-reader loading status. The changes also add loading-state stories and update the initial graph layout helper. Priority: ⬇️ Low Merge Risk: 🔵 Low · up to While lineage loads, a focused view may briefly show its previous center, and a removed animated placeholder may remain retained until its node unmounts. These are localized presentation and resource concerns, so the change is mergeable with follow-up awareness. Security Architecture ReviewSecurity architecture risk: 🔵 Low · up to The change is primarily a noninteractive loading display. No authorization bypass or new access to data was identified, but a previously focused name can briefly remain visible when the loading focus changes. Retained concerns Security review detailsSecurity Blast Radius
Trust Boundaries and Controls
Hardening Proposals
🚥 Pre-merge checks | ✅ 1✅ Passed checks (1 passed)
✨ Finishing Touches 💡 1📝 Generate docstrings
🧪 Generate unit tests (beta)
🛠️ Fix failing CI checks 💡
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Note
Quiet mode is enabled, so only the most important comments were posted inline. Other review comments are grouped below.
🟡 Other comments (2)
products/data_modeling/frontend/lineage/LineageGraphLoading.tsx-84-84 (1)
84-84: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winDiscard a layout when the loading center changes.
If
centerchanges while this component stays mounted,lineageGraphLogicretains the prior layout because its key uses unchanged node IDs. Line 84 displays the prior center name and type until the new ELK pass completes. Use the initial layout until the retained layout matches the current graph, or include the center identity in the logic key.products/data_modeling/frontend/lineage/LineageGraph.tsx-158-158 (1)
158-158: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winPreserve the known center in the explicit loading branch.
If a caller supplies
currentNodeIdand its node but omitsloadingCenter, this branch shows “Loading lineage...” instead of the known name and type. The layout-pending branch already resolves that node. Apply the same fallback here so both loading paths preserve the focused label.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository: PostHog/posthog/.coderabbit.yaml
Review profile: QUIET
Plan: Enterprise
Run ID: a5e1a89e-7c17-4e67-ad92-a4dd996a9806
📒 Files selected for processing (8)
frontend/src/scenes/data-warehouse/editor/output-pane-tabs/QueryInfo.tsxproducts/data_catalog/frontend/MetricLineagePanel.tsxproducts/data_modeling/frontend/lineage/LineageGraph.stories.tsxproducts/data_modeling/frontend/lineage/LineageGraph.tsxproducts/data_modeling/frontend/lineage/LineageGraphLoading.tsxproducts/data_modeling/frontend/lineage/LineageNode.tsxproducts/data_modeling/frontend/lineage/lineageGraphLogic.tsproducts/data_modeling/frontend/nodeDetail/NodeDetailLineage.tsx
Included review availability: This review used your included allowance. Your plan provides up to 12 included reviews per hour; 10 remain after this review.
Use two neutral placeholder nodes when the graph has no focused model. Add a reduced-motion-safe pulse to all loading nodes. Generated-By: PostHog Desktop Task-Id: d30b63b9-ca68-4fde-bebe-e6cdbd9740a4
The fallback layout was rebuilt on every render while ELK was pending, so its new identity refired the fit-view effect on unrelated updates. Generated-By: PostHog Desktop Task-Id: 696f17c3-2231-48d1-b752-e9947eec024b
There was a problem hiding this comment.
Note
Quiet mode is enabled, so only the most important comments were posted inline. Other review comments are grouped below.
🟡 Other comments (1)
products/data_modeling/frontend/lineage/LineageGraphLoading.tsx-91-95 (1)
91-95: 🔒 Security & Privacy | 🛡️ Detected with Advanced Tier | 🟡 Minor | ⚡ Quick winComplete the required Semgrep scan. The repository-wide command timed out after 120 seconds, so it did not produce a complete result. Rerun it to completion and address any findings before merge.
Source: Coding guidelines
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository: PostHog/posthog/.coderabbit.yaml
Review profile: QUIET
Plan: Enterprise
Run ID: e5a77708-df03-4dfa-85d3-5b0c94f9fac4
📒 Files selected for processing (1)
products/data_modeling/frontend/lineage/LineageGraphLoading.tsx
Included review availability: This review used your included allowance. Your plan provides up to 12 included reviews per hour; 7 remain after this review.
The three loading stories render skeleton nodes that never resolve, so the Storybook test runner's postVisit loader wait timed out on every run. Opt those stories out and wait for the rendered graph nodes instead. Generated-By: PostHog Desktop Task-Id: 696f17c3-2231-48d1-b752-e9947eec024b
|
Working through the three grouped CodeRabbit notes, since none of them opened a thread:
Semgrep scan. Ran Separately, the three red checks were mine, not flakes. 🦉 via talyn.dev |
There was a problem hiding this comment.
Note
Quiet mode is enabled, so only the most important comments were posted inline. Other review comments are grouped below.
🟡 Other comments (1)
products/data_modeling/frontend/lineage/LineageGraph.stories.tsx-88-88 (1)
88-88: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winWait for ELK layout completion before capture.
The runner waits for
.react-flow__node, page readiness, stable document dimensions, and a fixed one-second delay. It does not observe React Flow node positions or thelayoutComputedaction. If ELK takes longer than those generic waits, the snapshot may still containinitialLayout. Expose a DOM signal forlayout !== nulland wait for that signal.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository: PostHog/posthog/.coderabbit.yaml
Review profile: QUIET
Plan: Enterprise
Run ID: 3be6b878-9589-4cea-87f5-64a4b4701e1e
📒 Files selected for processing (1)
products/data_modeling/frontend/lineage/LineageGraph.stories.tsx
Included review availability: This review used your included allowance. Your plan provides up to 12 included reviews per hour; 7 remain after this review.
|
Everything I can fix from here is fixed. One gate is left and it needs a person. Updated for head Where CI stands on 79a0ef6: 102 checks pass. What needs approving — run a1f96514, 1476 snapshots, all 8 actionable ones from this PR:
I compared each image against the "After" screenshots in the description and they match, so the delta is this PR's intended change. I am not approving my own baselines. Worth a look before you do. In every focused capture the three nodes sit right of centre instead of fitted, and in the 975px metric panel the "Loading downstream..." node is clipped at the container edge. That is not a capture artifact: the screenshot in the PR description shows the same offset and the same clipping, so 🦉 via talyn.dev |
Visual review is the only thing left on this PREverything else on All 8 are this PR's own surfaces, nothing unrelated leaked in:
I pulled the PNGs and looked at them. The metric lineage pair is exactly the intended swap: the flat skeleton block becomes the three-node loading graph with One thing worth your eye before you approve, because approving bakes it into the baseline: in every captured frame the loading graph is not fitted to its container. It sits up and to the right of center, and in the metric panel's ~960px container the downstream node is clipped by the right edge. That looks like the screenshot landing before the So the call is yours on two things:
Also minor and entirely your call: Once you approve the run (or tell me to), everything else is ready. 🦉 via talyn.dev |
The loading node animates with an infinite pulse and always unmounts mid-animation, which pins the detached graph subtree through Chromium's DocumentTimeline. Attach useCancelAnimationsOnUnmount, as Spinner, LemonSkeleton and LemonTableLoader already do. Generated-By: PostHog Desktop Task-Id: 696f17c3-2231-48d1-b752-e9947eec024b
|
Applied in 79a0ef6. The report holds up: Called the hook unconditionally above the Left the 🦉 via talyn.dev |
There was a problem hiding this comment.
Note
Quiet mode is enabled, so only the most important comments were posted inline. Other review comments are grouped below.
🟡 Other comments (1)
products/data_modeling/frontend/lineage/LineageNode.tsx-197-197 (1)
197-197: 🩺 Stability & Availability | 🟡 Minor | ⚡ Quick winTie animation cleanup to the loading-card lifecycle.
LineageNoderemains mounted while React Flow updatesdata.state. The hook capturesref.currentonly whenLineageNodemounts, but the ref exists only in the loading branch. A resolved-to-loading transition can therefore capturenull, and a loading-to-resolved transition removes the animated card without running the hook cleanup. The detached card can remain retained by its runninganimate-pulseanimation.Move the loading branch into a child component that owns
useCancelAnimationsOnUnmount, or otherwise run cleanup when the loading card unmounts.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository: PostHog/posthog/.coderabbit.yaml
Review profile: QUIET
Plan: Enterprise
Run ID: b82bc5da-898b-4dea-96b8-a62e0cdbaf45
📒 Files selected for processing (1)
products/data_modeling/frontend/lineage/LineageNode.tsx
Included review availability: This review used your included allowance. Your plan provides up to 12 included reviews per hour; 6 remain after this review.
|
✅ Visual changes approved by @sakce — baseline updated in 2 changed, 6 new. Install the Visual Review Chrome extension to see visual review results at the top of your pull requests. |
8 updated Run: a1f96514-456e-4e75-8dda-30fc1909193d Co-authored-by: sakce <49978945+sakce@users.noreply.github.com>
🦔 Hogbox preview · ❌ build failedThe preview didn't come up for commit Previews are optional and never block merging. A failure here is often a hogland or tailnet hiccup rather than anything in your PR, so the check stays green and this comment is the status. |
This branch had an error being deployed
1 participant
Problem
People see a small spinner in a large canvas while a lineage graph loads its data or calculates its layout.
Changes
Before
After
Models graph
Focused graph
Dark mode
How did you test this code?
Release status
Automatic notifications
Docs update
None. This change only affects the loading presentation.
🤖 Agent context
Autonomy: Human-driven (agent-assisted)
Agent: PostHog Desktop, gpt-5.6-sol
/writing-ui-components,/writing-tests,/writing-user-facing-copy,/writing-code-comments, and/writing-pr-descriptions.Created with PostHog Desktop