diff --git a/.changeset/kind-flies-rush.md b/.changeset/kind-flies-rush.md new file mode 100644 index 000000000..3cfe0a632 --- /dev/null +++ b/.changeset/kind-flies-rush.md @@ -0,0 +1,5 @@ +--- +"@hyperdx/app": patch +--- + +Minor UI Improvements in Search Filters UI diff --git a/packages/app/src/components/DBSearchPageFilters.tsx b/packages/app/src/components/DBSearchPageFilters.tsx index 624b497c3..74ecdc7ed 100644 --- a/packages/app/src/components/DBSearchPageFilters.tsx +++ b/packages/app/src/components/DBSearchPageFilters.tsx @@ -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} > )} - : } + size="xs" + variant="subtle" + color="gray" + aria-label={pinned ? 'Unpin field' : 'Pin field'} + role="checkbox" + aria-checked={pinned} data-testid={`filter-pin-${label}`} - /> + > + {pinned ? : } + {pinned && ( - +
- +
)} ); @@ -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" > - + {name} - + {!hasRange && ( <> - - {isFetchingDistribution ? ( - - ) : showDistributions ? ( - - ) : ( - - )} - - {onFieldPinClick && ( - {isFieldPinned ? ( - + {isFetchingDistribution ? ( + + ) : showDistributions ? ( + ) : ( - + )} + + {onFieldPinClick && ( + + + {isFieldPinned ? ( + + ) : ( + + )} + + )} )} {totalAppliedFiltersSize > 0 && ( - { - onClearClick(); - setSearch(''); - }} - /> + + { + onClearClick(); + setSearch(''); + }} + > + + + )}