Skip to content

WIP: feat/side panels redesign#1970

Draft
elizabetdev wants to merge 18 commits intomainfrom
feat/side-panels-redesign
Draft

WIP: feat/side panels redesign#1970
elizabetdev wants to merge 18 commits intomainfrom
feat/side-panels-redesign

Conversation

@elizabetdev
Copy link
Contributor

@elizabetdev elizabetdev commented Mar 23, 2026 •
edited
Loading

Side Panels Redesign (WIP)

Drawer & Layout

  • Responsive drawer sizing: Drawers open at 1000px on large screens (>1440px) or 80vw on smaller screens, with an inline drag handle for manual resizing and a full-width toggle
  • Single drawer navigation: Replaced stacked drawers (new drawer on top of previous) with in-place content replacement managed via sourceStack — all navigation happens within one drawer
  • Panel borders: Changed from 2px border all around to 1px border on the left side only (removed box-shadow)

Breadcrumb Navigation

  • Unified breadcrumb header: All panels (logs, traces, sessions) share a consistent header with back button, breadcrumbs, and action icons (share, resize, close)
  • Source-type icons: Breadcrumbs show IconConnection for traces, IconLogs for logs, IconDeviceLaptop for sessions
  • Deep link breadcrumbs: Full trail for deep navigation (e.g., Log → Trace → Surrounding Context), with truncation and tooltips for long labels
  • Tab restore on back: Navigating back from a trace view correctly restores the parent source's default tab (e.g., Overview for logs)

Trace Panel

  • Redesigned layout: Integrated span detail as a resizable split view alongside the waterfall chart (instead of a separate tab)
  • Horizontal scroll: Trace waterfall becomes horizontally scrollable when container width < 740px
  • Zoom shortcut: Moved "⌘/Ctrl + scroll to zoom" hint from the waterfall header to the bottom keyboard shortcuts section, with smaller Kbd elements

Log Panel

  • View Trace button: Styled as variant="secondary", size="compact-xs", positioned in the metadata line — only shown when the log has trace context
  • Copy Trace ID: ActionIcon with IconCopy next to View Trace (also available in trace panels) — hidden for logs without trace data
  • Surrounding context padding: Added var(--mantine-spacing-sm) padding to the log table in surrounding context

Session Panel

  • Unified drawer structure: SessionSidePanel refactored to use the same drawer chrome as logs/traces (sizing, resize drag bar, breadcrumbs, header actions)
  • In-drawer event navigation: Clicking a session event opens the event panel within the same drawer, with parentBreadcrumbs preserving the session label (e.g., "demo@example.com › HTTP GET")
  • Removed Portal sub-drawers: Session events no longer open in a separate Portal-based drawer

Components Created/Exported

  • SidePanelBreadcrumbs — new shared breadcrumb component with source icons, truncation, and navigation
  • SidePanelHeaderActions — exported for reuse (close, resize, share actions)
  • DBRowSidePanelInner — exported inner panel component for embedding in other drawers (e.g., session drawer)
  • DrawerUtils.getInitialDrawerWidthPercent() — shared sizing logic

Other

  • Type narrowing fixes for TSource union type across data and infra panels
  • Removed deprecated isNestedPanel and breadcrumbPath props
  • Coerce empty/falsy trace IDs to undefined so logs without trace data hide trace-related UI

@elizabetdev
feat: add responsive drawer sizing and inline resize handle
c7a64d5 
Add getInitialDrawerWidthPercent() for responsive drawer width,
expose setSize from useResizable hook, and add resizeHandleInline
CSS class for horizontal split views.

Made-with: Cursor
@elizabetdev
fix: add type narrowing for TSource union in data and infra panels
b3d5b1d 
Apply explicit source.kind checks before accessing properties that
only exist on specific source types (Log, Trace), fixing TypeScript
errors with the TSource union type.

Made-with: Cursor
@elizabetdev
feat: redesign trace panel with integrated span detail split view
faf3ade 
Replace the standalone span detail drawer with an inline resizable
split view showing Overview, Parsed, and Infrastructure tabs for
selected spans. Remove built-in resize from waterfall chart and use
flex layout for parent-controlled sizing.

Made-with: Cursor
@elizabetdev
feat: redesign side panel header with unified breadcrumb navigation
8bcf7ae 
Replace hand-rolled breadcrumbs and separate title with a unified
SidePanelBreadcrumbs component using Mantine Breadcrumbs. Shows
source-type icons (log/trace), truncates long labels with tooltips,
and merges cross-panel and in-panel navigation into one trail. Add
View Trace button, Copy Trace ID action, and fresh RowSidePanelContext
for nested panels to fix "Error loading row data" in context navigation.

Made-with: Cursor
@elizabetdev
refactor: remove deprecated isNestedPanel and breadcrumbPath props
4b1af57 
Clean up consumer files that referenced the old breadcrumb system.
These props are replaced by the new SidePanelBreadcrumbs component
and navStack-based navigation in DBRowSidePanel.

Made-with: Cursor
@elizabetdev
feat: add zoom keyboard shortcut hint to side panel
155a577 
Add Cmd/Ctrl + scroll to zoom shortcut to the keyboard
shortcuts display in LogSidePanelElements.

Made-with: Cursor
@elizabetdev
style: auto-fix import order and formatting in DBTracePanel
2f9eec1 
Made-with: Cursor
@elizabetdev
feat: add Copy Trace ID functionality to DBRowSidePanel
d0f8d36 
Implemented a new Copy Trace ID button in the DBRowSidePanel for easier access to trace identifiers. Removed the zoom keyboard shortcut hint from LogSidePanelElements as part of the cleanup.

Made-with: Cursor
@elizabetdev
refactor: replace stacked drawers with single drawer navigation
40a8f42 
Instead of opening a second Drawer on top when clicking "View Trace",
replace content in-place using a sourceStack. Breadcrumbs track the
full navigation path (log → trace → surrounding context) and the back
button pops the stack. Also removes box-shadow from panel borders,
keeping only a 1px left border.

Made-with: Cursor
@elizabetdev
style: add padding to surrounding context table
c56c07d 
Made-with: Cursor
@elizabetdev
refactor: move zoom shortcut to bottom keyboard hints section
f5924ca 
Move the ⌘/Ctrl + scroll zoom hint from the trace waterfall chart
into the shared keyboard shortcuts bar. Use smaller Kbd elements
for a more compact appearance.

Made-with: Cursor
@elizabetdev
fix: add horizontal scroll to trace waterfall when narrow
26c0c17 
Set a minWidth of 740px on the TimelineChart so the waterfall
becomes horizontally scrollable instead of squished in narrow panels.

Made-with: Cursor
@elizabetdev
refactor: unify session drawer with log/trace drawer structure
b43aae7 
Refactors SessionSidePanel to reuse the same drawer chrome as
logs/traces (consistent sizing, resize drag bar, breadcrumbs, header
actions). Adds sourceStack-based in-drawer event navigation so clicking
a session event replaces content in-place with parentBreadcrumbs
preserving the session context in the breadcrumb trail.

Made-with: Cursor
@elizabetdev
fix: restore correct tab when navigating back from trace view
3187f77 
Track previous sourceStack length to reset the tab to the root source's
default (e.g. Overview for logs) when popping back, instead of keeping
the stale trace tab state.

Made-with: Cursor
@vercel
Copy link

vercel bot commented Mar 23, 2026 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
hyperdx-oss Ready Ready Preview, Comment Mar 23, 2026 6:50pm

Request Review

@changeset-bot
Copy link

changeset-bot bot commented Mar 23, 2026 •
edited
Loading

⚠️ No Changeset found

Latest commit: bf09ab5

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@github-actions
Copy link
Contributor

github-actions bot commented Mar 23, 2026 •
edited
Loading

Knip - Unused Code Analysis

🔴 +2 change in total issues (240 on main → 242 on PR)

Category main PR Diff
Unused files 9 9 0
Unused dependencies 14 14 0
Unused devDependencies 20 20 0
Unlisted dependencies 14 14 0
Unresolved imports 2 2 0
Unlisted binaries 2 2 0
Unused exports 132 133 +1 🔴
Unused exported types 41 42 +1 🔴
Unused enum members 2 2 0
Duplicate exports 4 4 0
What is this?

Knip finds unused files, dependencies, and exports in your codebase.
This comment compares the PR branch against main to detect regressions.

Run yarn knip locally to see full details.

@github-actions
Copy link
Contributor

github-actions bot commented Mar 23, 2026 •
edited
Loading

E2E Test Results

❌ 1 test failed • 91 passed • 3 skipped • 980s

Status Count
✅ Passed 91
❌ Failed 1
⚠️ Flaky 1
⏭️ Skipped 3

Tests ran across 4 shards in parallel.

View full report →

@elizabetdev
fix: hide View Trace and Trace ID for logs without trace context
4092756 
Coerce empty/falsy trace IDs to undefined so logs without actual trace
data don't show the View Trace button or Copy Trace ID action.

Made-with: Cursor
@elizabetdev
fix(e2e): remove trace tab from log side panel tab navigation test
3d12765 
The Trace tab is no longer shown for log sources — trace functionality
is accessed via the View Trace button instead.

Made-with: Cursor
@elizabetdev
fix: close button now closes entire session drawer instead of navigat…
3978652 
…ing back

Separate onClose (closes drawer) from onNavigateToParent (back to
session view) so the X button always dismisses the drawer while the
back button navigates to the parent session.

Made-with: Cursor
@elizabetdev
fix: reset tab to default when navigating to a new event
bf09ab5 
Always reset to the first tab (Overview for logs, Trace for traces)
when pushing to navStack, preventing the confusing state where
navigating from Surrounding Context opens a new event also on
Surrounding Context.

Made-with: Cursor
@alex-fedotyev
Copy link
Contributor

alex-fedotyev commented Mar 23, 2026

@elizabetdev - awesome redesign!
Sharing early feedback below:

  1. What do you think about idea to have large default size of the drawer for traces? Like 50-60% of the screen with larger potion of that for waterfall and the rest for the span details? And keep smaller default width for logs drawer, as it doesn't contain waterfall and needs less space.

  2. I feel that the border for the main drawer needs to be more visible, right now it is blending in being similar to the vertical lines in the waterfall itself.

image
  1. It used to be possible to filter by the various span values from overview and columnar views, but now it is only allowing to 'Copy'. Is that a bug a a choice in design?
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@elizabetdev @alex-fedotyev