Elgato_dark/hyperdx
1
0
Fork 0
mirror of https://github.com/hyperdxio/hyperdx synced 2026-04-21 13:37:15 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

fix: Add option to display all events in search histogram bars (#1765)

Browse source 
Fixes: HDX-3456

Before:
<img width="215" height="254" alt="image" src="https://github.com/user-attachments/assets/54605b58-41d1-4851-b0eb-470076ad7f2e" />

After:
<img width="268" height="291" alt="image" src="https://github.com/user-attachments/assets/661a95f7-59a7-4ca5-afe4-9b4d20a9539a" />
This commit is contained in:
Tom Alexander 2026-02-20 10:10:09 -05:00 committed by GitHub
parent b676f268d9
commit 185d4e4008
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 45 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/fast-pens-walk.md Normal file
View file

@ -0,0 +1,5 @@
---
"@hyperdx/app": patch
---
fix: Add option to display all events in search histogram bars

83
packages/app/src/components/DBTimeChart.tsx
View file

@ -10,6 +10,7 @@ import {
import {
Button,
Code,
Divider,
Group,
Modal,
Popover,
@ -143,58 +144,54 @@ function ActiveTimeTooltip({
onClick={e => e.stopPropagation()}
onMouseDown={e => e.stopPropagation()}
>
{validPayloads.length <= 1 ? (
// Fallback scenario if limited data is available
<Stack gap="xs" style={{ maxHeight: '220px', overflowY: 'auto' }}>
<Link
data-testid="chart-view-events-link"
href={
buildSearchUrl(
validPayloads?.[0]?.dataKey,
validPayloads?.[0]?.value,
) ?? '/search'
}
href={buildSearchUrl() ?? '/search'}
onClick={onDismiss}
>
<Group gap="xs">
<IconSearch size={16} />
View Events
View All Events
</Group>
</Link>
) : (
<Stack gap="xs" style={{ maxHeight: '170px', overflowY: 'auto' }}>
<Text c="gray.5" size="xs">
View Events for:
</Text>
{validPayloads.map((payload, idx) => {
const seriesUrl = buildSearchUrl(
payload.dataKey,
payload.value,
);
return (
<Tooltip
key={idx}
label={payload.name}
withArrow
color="gray"
position="right"
>
<Link
data-testid={`chart-view-events-link-${payload.dataKey}`}
href={seriesUrl ?? '/search'}
onClick={onDismiss}
{validPayloads.length > 1 && (
<>
<Divider />
<Text c="gray.5" size="xs">
Filter by group:
</Text>
{validPayloads.map((payload, idx) => {
const seriesUrl = buildSearchUrl(
payload.dataKey,
payload.value,
);
return (
<Tooltip
key={idx}
label={payload.name}
withArrow
color="gray"
position="right"
>
<Group gap="xs">
<IconSearch size={12} />
<Text size="xs" truncate flex="1">
{payload.name}
</Text>
</Group>
</Link>
</Tooltip>
);
})}
</Stack>
)}
<Link
data-testid={`chart-view-events-link-${payload.dataKey}`}
href={seriesUrl ?? '/search'}
onClick={onDismiss}
>
<Group gap="xs">
<IconSearch size={12} />
<Text size="xs" truncate flex="1">
{payload.name}
</Text>
</Group>
</Link>
</Tooltip>
);
})}
</>
)}
</Stack>
</Popover.Dropdown>
</Popover>
</>