mirror of
https://github.com/hyperdxio/hyperdx
synced 2026-04-21 13:37:15 +00:00
fb8a7e990d
## Problem When a log pattern has thousands of sample events with large payloads, the `PatternSidePanel` renders all of them at once via `RawLogTable`, causing the page to freeze (HDX-3838). The root cause: up to 10,000 samples are fetched and grouped by pattern. A single pattern can accumulate thousands of rows, and passing all of them to `RawLogTable` at once causes excessive DOM rendering. ## Solution Limit the initial display in `PatternSidePanel` to **100 sample events**. If a pattern has more than 100 samples, a "Show all N samples" button is rendered below the table to let users load the full set on demand. ### Changes in `packages/app/src/components/PatternSidePanel.tsx`: - Added `INITIAL_LIMIT = 100` constant and `showAll` state - `displayedSamples` memo slices `pattern.samples` to the first 100 unless the user clicks "Show all" - Reset `showAll` to `false` when the `pattern` prop changes (user selects a different pattern) - Added a subtle Mantine `Button` below the table when there are more than 100 samples Linear Issue: [HDX-3838](https://linear.app/clickhouse/issue/HDX-3838/investigate-issues-with-large-log-payloads-causing-problems) <div><a href="https://cursor.com/agents/bc-b7a128cb-a5af-465d-862e-97359077eeaa"><picture><source media="(prefers-color-scheme: dark)" srcset="https://cursor.com/assets/images/open-in-web-dark.png"><source media="(prefers-color-scheme: light)" srcset="https://cursor.com/assets/images/open-in-web-light.png"><img alt="Open in Web" width="114" height="28" src="https://cursor.com/assets/images/open-in-web-dark.png"></picture></a> <a href="https://cursor.com/background-agent?bcId=bc-b7a128cb-a5af-465d-862e-97359077eeaa"><picture><source media="(prefers-color-scheme: dark)" srcset="https://cursor.com/assets/images/open-in-cursor-dark.png"><source media="(prefers-color-scheme: light)" srcset="https://cursor.com/assets/images/open-in-cursor-light.png"><img alt="Open in Cursor" width="131" height="28" src="https://cursor.com/assets/images/open-in-cursor-dark.png"></picture></a> </div> Co-authored-by: Cursor Agent <199161495+cursoragent@users.noreply.github.com> |
||
|---|---|---|
| .. | ||
| api | ||
| app | ||
| common-utils | ||
| otel-collector | ||
