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

minor design tweaks to the search page filters UI. (#1490)

Browse source 
Suggestions courtesy of @elizabetdev 

- ellipsis on filter names
- make clear button an icon
- add tooltip to icons

Before:
<img width="216" height="190" alt="Screenshot 2025-12-15 at 4 32 57 PM" src="https://github.com/user-attachments/assets/e9e911b1-c6a3-4d10-be64-f08d107cdea3" />

After:
<img width="295" height="173" alt="Screenshot 2025-12-15 at 4 30 40 PM" src="https://github.com/user-attachments/assets/a4766210-0f58-4aa1-bff0-09923a80beb4" />


Fixes HDX-2366
This commit is contained in:
Brandon Pereira 2025-12-16 08:46:48 -07:00 committed by GitHub
parent 28dd5cedf3
commit 80117ebf9a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 80 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/kind-flies-rush.md Normal file
View file

@ -0,0 +1,5 @@
---
"@hyperdx/app": patch
---
Minor UI Improvements in Search Filters UI

116
packages/app/src/components/DBSearchPageFilters.tsx
View file

@ -35,6 +35,7 @@ import {
IconChevronDown,
IconChevronRight,
IconChevronUp,
IconFilterOff,
IconPin,
IconPinFilled,
IconRefresh,
@ -199,7 +200,7 @@ export const FilterCheckbox = ({
gap="xs"
wrap="nowrap"
justify="space-between"
pe={'11px'}
pe={'4px'}
miw={0}
>
<Text
@ -239,16 +240,23 @@ export const FilterCheckbox = ({
data-testid={`filter-exclude-${label}`}
/>
)}
<TextButton
<ActionIcon
onClick={onClickPin}
label={pinned ? <IconPinFilled size={14} /> : <IconPin size={14} />}
size="xs"
variant="subtle"
color="gray"
aria-label={pinned ? 'Unpin field' : 'Pin field'}
role="checkbox"
aria-checked={pinned}
data-testid={`filter-pin-${label}`}
/>
>
{pinned ? <IconPinFilled size={12} /> : <IconPin size={12} />}
</ActionIcon>
</div>
{pinned && (
<Text size="xxs">
<Center me="1px">
<IconPinFilled size={12} />
</Text>
</Center>
)}
</div>
);
@ -578,6 +586,7 @@ export const FilterGroup = ({
p="0"
pr="xxxs"
data-testid="filter-group-control"
style={{ overflow: 'hidden' }}
classNames={{
chevron: 'm-0',
label: 'p-0',
@ -592,62 +601,87 @@ export const FilterGroup = ({
fz="xxs"
color="gray"
>
<Text size="xs" fw="500">
<Text size="xs" fw="500" truncate="end">
{name}
</Text>
</Tooltip>
</Accordion.Control>
<Group gap="xxxs" wrap="nowrap">
<Group gap={0} wrap="nowrap">
{!hasRange && (
<>
<ActionIcon
size="xs"
variant="subtle"
color="gray"
onClick={toggleShowDistributions}
title={
<Tooltip
label={
showDistributions
? 'Hide distribution'
: 'Show distribution'
? 'Hide Distribution'
: 'Show Distribution'
}
data-testid={`toggle-distribution-button-${name}`}
aria-checked={showDistributions}
role="checkbox"
position="top"
withArrow
fz="xxs"
color="gray"
>
{isFetchingDistribution ? (
<span className="spinner-border spinner-border-sm" />
) : showDistributions ? (
<IconChartBar size={14} />
) : (
<IconChartBarOff size={14} />
)}
</ActionIcon>
{onFieldPinClick && (
<ActionIcon
size="xs"
variant="subtle"
color="gray"
onClick={onFieldPinClick}
title={isFieldPinned ? 'Unpin field' : 'Pin field'}
me={'4px'}
onClick={toggleShowDistributions}
data-testid={`toggle-distribution-button-${name}`}
aria-checked={showDistributions}
role="checkbox"
>
{isFieldPinned ? (
<IconPinFilled size={14} />
{isFetchingDistribution ? (
<span className="spinner-border spinner-border-sm" />
) : showDistributions ? (
<IconChartBarOff size={14} />
) : (
<IconPin size={14} />
<IconChartBar size={14} />
)}
</ActionIcon>
</Tooltip>
{onFieldPinClick && (
<Tooltip
label={isFieldPinned ? 'Unpin Field' : 'Pin Field'}
position="top"
withArrow
fz="xxs"
color="gray"
>
<ActionIcon
size="xs"
variant="subtle"
color="gray"
onClick={onFieldPinClick}
>
{isFieldPinned ? (
<IconPinFilled size={14} />
) : (
<IconPin size={14} />
)}
</ActionIcon>
</Tooltip>
)}
</>
)}
{totalAppliedFiltersSize > 0 && (
<TextButton
label="Clear"
onClick={() => {
onClearClick();
setSearch('');
}}
/>
<Tooltip
label="Clear Filters"
position="top"
withArrow
fz="xxs"
color="gray"
>
<ActionIcon
size="xs"
variant="subtle"
color="gray"
onClick={() => {
onClearClick();
setSearch('');
}}
>
<IconFilterOff size={14} />
</ActionIcon>
</Tooltip>
)}
</Group>
</Center>