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> |
||
|---|---|---|
| .. | ||
| .storybook | ||
| pages | ||
| public | ||
| scripts | ||
| src | ||
| styles | ||
| tests/e2e | ||
| types | ||
| .Dockerignore | ||
| .env.development | ||
| .gitignore | ||
| .stylelintignore | ||
| CHANGELOG.md | ||
| Dockerfile | ||
| eslint.config.mjs | ||
| global-setup.js | ||
| jest.config.js | ||
| mdx.d.ts | ||
| next.config.mjs | ||
| package.json | ||
| playwright.config.ts | ||
| postcss.config.cjs | ||
| stylelint.config.mjs | ||
| tsconfig.build.json | ||
| tsconfig.json | ||
