Skip to content

feat(experiments): Show experiments using a shared metric on its edit page - #102790

Merged
trunk-io[bot] merged 3 commits into
masterfrom
experiments/shared-metric-linked-panel
Sep 18, 2026
Merged

trunk-io[bot] merged 3 commits into
masterfrom
experiments/shared-metric-linked-panel

Conversation

@jurajmajerik

Copy link
Copy Markdown
Contributor

Problem

The shared metric edit page does not show which experiments use the metric. That context only became visible at save or delete time, in the warning dialogs.

Changes

  • The edit page now shows a "Used in experiments" list next to the form, running experiments first with a Running tag, each linking to its experiment.
  • Wide main column: two-column layout, form left, list card right. The card scrolls internally past ~24 rows and stays put while the form scrolls.
  • Narrow main column (breaks on the container, so an open side panel triggers it too): the list becomes a collapsed row above the form; expanded, it scrolls inside a fixed height so a long list never buries the form.
  • Metrics used by no experiments, and the create and duplicate pages, render the form full width with no list.

Wide:

linked-wide

Narrow, collapsed and expanded:

linked-narrow

linked-narrow-open

How did you test this code?

  • Rendered all three states in a live app against seeded data (screenshots above): wide two-column, narrow collapsed, narrow expanded with the height cap.
  • Typecheck and lint pass. No new automated tests: the component is a presentation-only list over the linked_experiments field already covered by API tests.

Automatic notifications

  • Publish to changelog?

Docs update

None.

🤖 Agent context

Autonomy: Human-driven (agent-assisted)

Agent: Claude Code, Fable 5 (claude-fable-5)

Skills invoked: /wt, /writing-ui-components, /writing-user-facing-copy, /writing-tests, /reviewing-with-coderabbit, /writing-pr-descriptions, /run-posthog.

CodeRabbit CLI: signed out, so the PR opened without a local pass.

The list started in the scene side panel; it moved inline after the driver found the panel placement undiscoverable. Container queries (@min-[64rem]/main-content:) drive the column break per frontend rule 6.

@jurajmajerik jurajmajerik self-assigned this Sep 18, 2026
@trunk-io

trunk-io Bot commented Sep 18, 2026 •

Copy link
Copy Markdown

😎 Merged successfully - details.

@github-actions
github-actions Bot requested a deployment to preview-pr-102790 September 18, 2026 08:36 In progress
@github-actions

github-actions Bot commented Sep 18, 2026 •

Copy link
Copy Markdown
Contributor

🦔 Hogbox preview · ✅ ready

▶ Open the preview

🔑 Login test@posthog.com / 12345678 (demo data)
🧩 Running this PR's backend and frontend, on the PostHog :master base
🔗 Link stable across rebuilds — a re-push swaps the box underneath, the URL stays
🔒 Access tailnet only (PostHog VPN)
🛠️ Admin inspect & debug state in hogland
💤 Idle sleeps after ~30 min idle (snapshot to S3, zero node cost) and wakes on your next visit in ~30s, behind a brief "waking up" screen

commit 92ebae0 · box box-520f54f11096 · ready in 725s (push → usable) · build log · rebuilds on every push, torn down on close

@pr-assigner-resolver-posthog
pr-assigner-resolver-posthog Bot requested a review from a team September 18, 2026 08:36
@github-actions

github-actions Bot commented Sep 18, 2026 •

Copy link
Copy Markdown
Contributor

🤖 CI report

✅ Trunk lane — non-backend lane

This 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.

⚠️ Complexity (TypeScript) — 1 function above the limit (max 22)

Cyclomatic complexity above the limit in changed typescript files (10 for production files, 15 for test files). Warn only: worth simplifying when you next touch these functions.

Function Location Complexity Limit
SharedMetric frontend/src/scenes/experiments/SharedMetrics/SharedMetric.tsx:93 22 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) — clean

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.

⚠️ Bundle size — 🔺 +8.1 KiB (+0.0%)

Uncompressed size of every built .js bundle, compared against the base branch.

Total: 68.97 MiB · 🔺 +8.1 KiB (+0.0%)

File Size Δ vs base
posthog-app/_parent/products/ai_observability/frontend/prompts/LLMPromptScene.js 53.0 KiB 🔺 +4.3 KiB (+8.8%)
posthog-app/src/scenes/experiments/SharedMetrics/SharedMetric.js 20.1 KiB 🔺 +1.8 KiB (+9.5%)
render-query/src/render-query/render-query.js 21.74 MiB 🔺 +1.4 KiB (+0.0%)

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.55 MiB · 22 files 🔺 +895 B (+0.1%) ████████░░ 84.2% 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.54 MiB · 628 files 🔺 +895 B (+0.0%) █████████░ 87.9% of 4.03 MiB
authenticated shell (every logged-in page)
src/scenes/AuthenticatedShell.tsx
8.36 MiB · 2,758 files 🔺 +900 B (+0.0%) █████████░ 87.9% of 9.51 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

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
300.9 KiB ../node_modules/.pnpm/posthog-js@1.433.9_@types+react@18.3.27_react@18.3.1/node_modules/posthog-js/dist/module.mjs
267.7 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
104.2 KiB src/lib/api.ts
82.0 KiB src/products.tsx
68.5 KiB src/lib/lemon-ui/icons/icons.tsx
62.4 KiB src/lib/utils/eventUsageLogic.ts
38.8 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.2 KiB src/scenes/scenes.ts
Largest files eagerly shipped from src/scenes/AuthenticatedShell.tsx
Size File
300.9 KiB ../node_modules/.pnpm/posthog-js@1.433.9_@types+react@18.3.27_react@18.3.1/node_modules/posthog-js/dist/module.mjs
267.7 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
265.0 KiB src/taxonomy/core-filter-definitions-by-group.json
153.8 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
104.2 KiB src/lib/api.ts
98.4 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
82.0 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.35 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.35 MiB · 18 files 🔺 +900 B (+0.0%) ████░░░░░░ 41.0% of 5.72 MiB
Deferred (lazy) 2.09 MiB · 45 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
778.2 KiB dist/toolbar/toolbar-app-WSAXMU5Y.css
648.1 KiB dist/toolbar/chunk-chunk-6JZLDLAO.js
483.5 KiB dist/toolbar/chunk-chunk-WTPISITN.js
136.2 KiB dist/toolbar/chunk-chunk-AHPK75OO.js
131.8 KiB dist/toolbar/chunk-chunk-FDH2IBXT.js
72.4 KiB dist/toolbar/toolbar-app-TUY6TQQI.js
69.0 KiB dist/toolbar/chunk-chunk-TSAL54PB.js
35.6 KiB dist/toolbar/chunk-chunk-O6D7QWNK.js
21.0 KiB dist/toolbar/chunk-chunk-6AJZLGOD.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 — 🔺 +81.7 KiB (+0.0%)

Total size of the built frontend/dist folder (all assets), compared against the base branch.

Total: 1506.16 MiB · 🔺 +81.7 KiB (+0.0%)

✅ Playwright — all passed

All tests passed.

View test results →

@greptile-apps

greptile-apps Bot commented Sep 18, 2026

Copy link
Copy Markdown
Contributor

Retrigger

The behavior appears sound, but the explicit frontend component-reuse requirement must be satisfied before merging.

Reviews (1) · Last reviewed commit: "feat(experiments): two-column layout for..."

@coderabbitai

coderabbitai Bot commented Sep 18, 2026 •

Copy link
Copy Markdown
Contributor

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: QUIET

Plan: Enterprise

Run ID: e77acff3-c8f7-4ab9-a5ae-454efb9b7db5

📥 Commits

Reviewing files that changed from the base of the PR and between 30f9260 and 92ebae0.

📒 Files selected for processing (1)
  • frontend/src/scenes/experiments/SharedMetrics/SharedMetricLinkedExperiments.tsx

Included review availability: Your plan provides up to 12 included reviews per hour; 9 remain after this review.


📝 Walkthrough

Walkthrough

The change adds SharedMetricLinkedExperiments. The component hides when no experiments are linked, sorts running experiments first, and displays counts, links, and status tags. The metric editor uses a responsive two-column layout. During metric updates with linked experiments, it renders the linked-experiments panel beside the form.

Priority: ⬇️ Low

Merge Risk: ⚪ Minimal · up to 92eba

The linked-experiment panel receives valid data and links only on update pages; no merge-blocking risk was found.

🚥 Pre-merge checks | ✅ 1
✅ Passed checks (1 passed)
Check name Status Explanation
Description check ✅ Passed The description is complete and follows the repository template. It explains the problem, user-visible changes, responsive behavior, screenshots, testing, documentation status, and agent involvement. …
✨ Finishing Touches
📝 Generate docstrings
  • Commit to this branch
  • Create a new PR
🧪 Generate unit tests (beta)
  • Commit to this branch
  • Create a new PR

Comment @coderabbitai help to get the list of available commands.

@trunk-io

trunk-io Bot commented Sep 18, 2026 •

Copy link
Copy Markdown

Static Badge   Static Badge   Static Badge

Failed Test Failure Summary Logs
Scenes-App/SidePanels SidePanelNotebooks smoke-test The test timed out while waiting for a loading indicator or spinner to disappear. Logs ↗︎
Scenes-App/Replay Vision ScannersListEmpty smoke-test The test timed out while waiting for a condition to be true within 10 seconds. Logs ↗︎

View Full Report ↗︎ ⋅ Docs

@jurajmajerik jurajmajerik added the stamphog Request AI approval (no full review) label Sep 18, 2026

@stamphog stamphog Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Approved.

Purely presentational frontend addition (new list component + layout tweak) on the shared-metric edit page, no schema/API/auth/billing/dependency/CI surface touched; the greptile comment about "component reuse" is vague and unsupported by any concrete duplicate found in the codebase, and the bot's own 👍 on the current head suggests it isn't a live blocker.

  • Author wrote 0% of the modified lines and has 10 merged PRs in these paths (familiarity MODERATE).
  • 👍 on the PR from greptile-apps[bot].
Gate mechanics and policy version
Gate Result
prerequisites ✓ all clear
deny-list ✓ no deny categories matched
size ✓ 105L, 2F substantive — within ceiling
tier ✓ T1-agent / T1c-medium (105L, 2F, single-area, feat)
stamphog 2.0.0 .stamphog/policy.yml @ 92ebae0 · reviewed head 92ebae0

@trunk-io
trunk-io Bot merged commit 6d9ec16 into master Sep 18, 2026
236 checks passed
@trunk-io
trunk-io Bot deleted the experiments/shared-metric-linked-panel branch September 18, 2026 09:27
@deployment-status-posthog

deployment-status-posthog Bot commented Sep 18, 2026 •

Copy link
Copy Markdown

Deploy status

Environment Status Deployed At Workflow
dev ✅ Deployed 2026-09-18 09:45 UTC Run
prod-us ✅ Deployed 2026-09-18 09:56 UTC Run
prod-eu ✅ Deployed 2026-09-18 09:56 UTC Run

This branch was successfully deployed

1 active deployment
preview-pr-102790 — 92ebae0d Deployed Sep 18, 2026 by github-actions[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

stamphog Request AI approval (no full review)

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant