Add pop-out button to open a section in its own tab (ticket 036)

Each of the four primary sections (Log viewer, Params, Metrics,
Dashboards) gets a PopOutButton next to its CollapseToggle/HelpIcon that
opens `?section=<id>` in a new tab via window.open. App.tsx branches on
that query param to render just the one section full-page, with no
NavMenu/FilterBar/sibling chrome — Metrics/Dashboards get the range that
was active at pop-out time via startMs/endMs query params (they have no
LogTimeline of their own to pick one), Params gets a small self-contained
params fetch since it has no LogPreview sibling to share state with, and
the popped-out Log viewer owns its own copy of the log/timeline polling
state.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XFUNZwCvz3kcod3352ZR2o
This commit is contained in:
Hugh Kaznowski
2026-09-05 16:49:12 +01:00
co-authored by Claude Sonnet 5
parent 7db1e0f055
commit 0c4b596e3c
6 changed files with 206 additions and 48 deletions
-42
View File
@@ -1,42 +0,0 @@
# 036 — Open a section in its own tab
## Summary
`App.tsx` has no routing at all — `NavMenu`, `FilterBar`, `LogTimeline` +
`LogPreview`, Params ([034](034-params-declaration-ui.md)), `Metrics`, and
`Dashboards` all render together in one fixed layout
(`webapp/src/App.tsx:94-108`). Add a small icon next to each section's
collapse toggle ([035](035-collapsible-sections.md)) that opens *just that
section* in a new browser tab — no `NavMenu`, no other sections — for
pop-out/multi-monitor use.
## Scope
- A "pop out" icon button in each of the four section headers (Log viewer,
Params, Metrics, Dashboards), alongside the collapse toggle and "?" help
icon.
- Clicking it opens a new tab (`window.open`, not same-tab navigation) at a
URL identifying that section, e.g. `?section=metrics`.
- Minimal client-side routing in `App.tsx`/`main.tsx`: when a `section`
query param is present, render only that one section full-page — no
`NavMenu`, no `FilterBar` unless the Log viewer section needs it, no
sibling sections.
- The standalone view keeps the section's own functionality intact (e.g. the
popped-out Metrics tab can still declare metrics; popped-out Dashboards
can still edit/autosave panels) — it's a layout change, not a read-only
view.
- The popped-out tab reflects the current `range` state (time range) at the
moment it's opened, passed via query params, since it has no `LogTimeline`
of its own to select one (unless the Log viewer section itself is what's
popped out).
## Acceptance criteria
- Clicking a section's pop-out icon opens a new tab showing only that
section, with no nav bar and no other sections.
- The popped-out section is fully functional (not a static snapshot).
- Closing the popped-out tab has no effect on the original tab's state.
## Depends on
- [035 — Collapsible primary UI sections](035-collapsible-sections.md)