Draft
Conversation
Add getInitialDrawerWidthPercent() for responsive drawer width, expose setSize from useResizable hook, and add resizeHandleInline CSS class for horizontal split views. Made-with: Cursor
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
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
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
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
Add Cmd/Ctrl + scroll to zoom shortcut to the keyboard shortcuts display in LogSidePanelElements. Made-with: Cursor
Made-with: Cursor
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
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
Made-with: Cursor
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
Set a minWidth of 740px on the TimelineChart so the waterfall becomes horizontally scrollable instead of squished in narrow panels. Made-with: Cursor
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
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
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Contributor
Knip - Unused Code Analysis🔴 4 issues found Unused exports (3)
Unused exported types (1)
Knip finds unused files, dependencies, and exports in your codebase. |
Contributor
E2E Test Results❌ 2 tests failed • 129 passed • 3 skipped • 1065s
Tests ran across 4 shards in parallel. |
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
The Trace tab is no longer shown for log sources — trace functionality is accessed via the View Trace button instead. Made-with: Cursor
…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
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
Contributor
|
@elizabetdev - awesome redesign!
|
Add lockScroll={false} to both log/trace and session drawers so the
logs table behind the panel remains vertically scrollable.
Made-with: Cursor
…sign Made-with: Cursor # Conflicts: # packages/app/src/components/DBTraceWaterfallChart.tsx # packages/app/src/components/TimelineChart/TimelineChart.tsx
…h controls - Color-code span bars by service name using the chart palette - Add vertical color bar indicator next to each span label - Show error/warning icons instead of overriding bar color - Add expand/collapse depth controls (±1 level, expand/collapse all) - Make chevron icons more visible Made-with: Cursor
…der icon Move keyboard shortcuts from a dismissable footer bar to a modal accessible via a keyboard icon button next to the share icon. Made-with: Cursor
Full-width minimap with time ticks, service-colored span bars, and three interaction modes: brush to zoom, drag to pan, and edge resize. Styles extracted to SCSS module with reusable --color-viz-range-* design tokens for both HyperDX and ClickStack themes (dark + light). Made-with: Cursor
- Fix overlapping X-axis tick labels by capping max ticks in calculateInterval - Render grid lines behind bars and text by splitting TimelineXAxis into separate grid and header layers - Remove text from inside bars; show body text outside on row hover (Jaeger-style), positioned by available space - Use muted color for duration labels - Reduce minimap tick density for cleaner display Made-with: Cursor
Child count (e.g. (38)) now appears after the color bar instead of between chevron and bar. Service name uses default color, operation name uses dimmed color, pipe separator removed. Made-with: Cursor
…race panel header Remove duplicate trace ID display from trace panel (already in side panel header). Move Correlated Logs source selector into waterfall controls bar via headerExtra prop. Simplify trace panel layout. Made-with: Cursor
…store span panel actions - Replace text+icon action buttons with icon-only buttons using DBRowTableIconButton - Add Tooltip on hover for all actions (Add to Filters, Search, Column, Copy) - Fix span detail panel missing actions by forwarding parent RowSidePanelContext - Use subtler row hover highlight matching the log table style Made-with: Cursor
Dark themes use a stronger shadow (25% opacity), light themes use a subtler one (4% opacity). Applied to both log/trace and session drawers. Made-with: Cursor
…mpact log source selector - Add AI-style trace summary with streaming text animation (sparkle button) - Add double-click and reset button to minimap for clearing zoom - Make span detail tab bar full width with absolute-positioned close button - Add style prop to TabBar component - Compact log source selector with short label - Add blink keyframe animation to globals Made-with: Cursor
Replace descriptive-only summary with actionable insights: error root cause identification with exception messages, bottleneck detection for slow spans, and service hotspot analysis. Made-with: Cursor
Made-with: Cursor
Made-with: Cursor
…usability - Adjust right panel size in DBTracePanel from 40 to 35. - Set minimum width of right panel to 300 for better layout. - Replace SearchInputV2 with SearchWhereInput in DBTraceWaterfallChart for enhanced filtering capabilities. - Update filter submission logic to correctly handle trace and log filters. - Modify drawer width constants for better responsiveness on larger screens. Made-with: Cursor
Resolved conflicts by keeping side-panel redesign (navigation stacks, breadcrumbs, trace split view) and adopting main's useSource Metric filter in DBInfraPanel. Made-with: Cursor
…e variable naming - Removed ESLint disable comments related to react-hooks in multiple files to clean up the code. - Renamed `_subDrawerOpen` to `subDrawerOpen` for consistency in the SessionSidePanel component. - Updated the SidePanelHeaderActions component to accept additional props for better functionality. - Enhanced the SidePanelBreadcrumbs component by adding a back button and removing unused props. - Improved the DBTracePanel component by utilizing a ref for trace ID management. These changes aim to enhance code readability and maintainability.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This PR bundles the trace viewer and side-panel redesign. Below, workstreams are ordered roughly by product impact; each block is a natural candidate for a separate Linear issue (or sub-issues) if you split the branch.
1. Side panel shell — drawer & navigation
lockScroll={false}); drawer uses themed--shadow-drawer.SidePanelBreadcrumbs: source-kind icons (log / trace / session), truncation + tooltips, clickable trail forparentBreadcrumbs,sourceStack, andnavStack.2. Trace waterfall
TimelineXAxislayering).3. Trace minimap
4. Span details & trace summary
5. Trace panel layout & correlated logs
6. Design tokens
--color-viz-range-*(handle, grip, border, overlay, brush, brush-border) in HyperDX and ClickStack themes (dark + light).--shadow-drawerfor drawer elevation.7. Tests & housekeeping
Dependency note (for Linear)
Workstream 1 (drawer + breadcrumbs + header) is the foundation for 2–5 (everything renders inside that shell). 6 can ship incrementally with whichever UI consumes the tokens. 7 should follow the behavior it asserts.