Limit log pattern examples to 100 in side panel

[MikeShi42]

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

  

[changeset-bot]

⚠️ No Changeset found

Latest commit: 919ac0d

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

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
hyperdx-oss	Ready	Preview, Comment	Mar 25, 2026 9:48pm

[github-actions]

Knip - Unused Code Analysis

⚪ No changes detected (182 issues on both main and PR)

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]

E2E Test Results

✅ All tests passed • 93 passed • 3 skipped • 984s

Status	Count
✅ Passed	93
❌ Failed	0
⚠️ Flaky	2
⏭️ Skipped	3

Tests ran across 4 shards in parallel.

View full report →

[github-actions]

PR Review

• ⚠️ INITIAL_LIMIT = 100 is declared inside the component body (line 95) → Move to module-level constant to avoid re-declaration on every render
• ⚠️ Button variant="subtle" may be a style guide mismatch — subtle is for "toolbar/utility controls" (collapse toggles, close buttons), while "Show all N samples" is more of a secondary CTA → Consider variant="link" or variant="secondary" per agent_docs/code_style.md

✅ No critical bugs or security issues. The core fix (limiting displayed rows, resetting on pattern change, on-demand "show all") is correct and well-implemented.