diff --git a/.changeset/hdx-3770-column-from-filter-panel.md b/.changeset/hdx-3770-column-from-filter-panel.md new file mode 100644 index 00000000..aff45225 --- /dev/null +++ b/.changeset/hdx-3770-column-from-filter-panel.md @@ -0,0 +1,5 @@ +--- +"@hyperdx/app": patch +--- + +feat: Add column toggle button to filter panel in DBSearchPage diff --git a/packages/app/src/DBSearchPage.tsx b/packages/app/src/DBSearchPage.tsx index 454a9bde..b07c2d4f 100644 --- a/packages/app/src/DBSearchPage.tsx +++ b/packages/app/src/DBSearchPage.tsx @@ -1769,6 +1769,8 @@ function DBSearchPage() { ? searchedSource.durationExpression : undefined) } + onColumnToggle={toggleColumn} + displayedColumns={displayedColumns} {...searchFilters} /> diff --git a/packages/app/src/components/DBSearchPageFilters.tsx b/packages/app/src/components/DBSearchPageFilters.tsx index ce4950f2..6f65f917 100644 --- a/packages/app/src/components/DBSearchPageFilters.tsx +++ b/packages/app/src/components/DBSearchPageFilters.tsx @@ -36,8 +36,10 @@ import { IconChevronRight, IconChevronUp, IconFilterOff, + IconMinus, IconPin, IconPinFilled, + IconPlus, IconRefresh, IconSearch, IconShadow, @@ -341,6 +343,8 @@ export type FilterGroupProps = { isPinned: (value: string | boolean) => boolean; onFieldPinClick?: VoidFunction; isFieldPinned?: boolean; + onColumnToggle?: VoidFunction; + isColumnDisplayed?: boolean; onLoadMore: (key: string) => void; loadMoreLoading: boolean; hasLoadedMore: boolean; @@ -349,7 +353,7 @@ export type FilterGroupProps = { chartConfig: BuilderChartConfigWithDateRange; isLive?: boolean; onRangeChange?: (range: { min: number; max: number }) => void; - distributionKey?: string; // Optional key to use for distribution queries, defaults to name + distributionKey?: string; }; export const FilterGroup = ({ @@ -365,6 +369,8 @@ export const FilterGroup = ({ onPinClick, onFieldPinClick, isFieldPinned, + onColumnToggle, + isColumnDisplayed, onLoadMore, loadMoreLoading, hasLoadedMore, @@ -641,6 +647,29 @@ export const FilterGroup = ({ )} + {onColumnToggle && ( + + + {isColumnDisplayed ? ( + + ) : ( + + )} + + + )} {onFieldPinClick && ( void; @@ -854,6 +885,8 @@ const DBSearchPageFiltersComponent = ({ denoiseResults: boolean; setDenoiseResults: (denoiseResults: boolean) => void; setFilterRange: (key: string, range: { min: number; max: number }) => void; + onColumnToggle?: (column: string) => void; + displayedColumns?: string[]; } & FilterStateHook) => { const setFilterValue = useCallback( ( @@ -1334,6 +1367,8 @@ const DBSearchPageFiltersComponent = ({ isPinned={(key, value) => isFilterPinned(key, value)} onFieldPinClick={key => toggleFieldPin(key)} isFieldPinned={key => isFieldPinned(key)} + onColumnToggle={onColumnToggle} + displayedColumns={displayedColumns} onLoadMore={loadMoreFilterValuesForKey} loadMoreLoading={group.children.reduce( (acc, child) => { @@ -1394,6 +1429,12 @@ const DBSearchPageFiltersComponent = ({ isPinned={value => isFilterPinned(facet.key, value)} onFieldPinClick={() => toggleFieldPin(facet.key)} isFieldPinned={isFieldPinned(facet.key)} + onColumnToggle={ + onColumnToggle + ? () => onColumnToggle(facet.key) + : undefined + } + isColumnDisplayed={displayedColumns?.includes(facet.key)} onLoadMore={loadMoreFilterValuesForKey} loadMoreLoading={loadMoreLoadingKeys.has(facet.key)} hasLoadedMore={Boolean(extraFacets[facet.key])} diff --git a/packages/app/src/components/DBSearchPageFilters/NestedFilterGroup.tsx b/packages/app/src/components/DBSearchPageFilters/NestedFilterGroup.tsx index 44d2e3bb..5dabad51 100644 --- a/packages/app/src/components/DBSearchPageFilters/NestedFilterGroup.tsx +++ b/packages/app/src/components/DBSearchPageFilters/NestedFilterGroup.tsx @@ -30,6 +30,8 @@ export type NestedFilterGroupProps = { isPinned: (key: string, value: string | boolean) => boolean; onFieldPinClick?: (key: string) => void; isFieldPinned?: (key: string) => boolean; + onColumnToggle?: (column: string) => void; + displayedColumns?: string[]; onLoadMore: (key: string) => void; loadMoreLoading: Record; hasLoadedMore: Record; @@ -51,6 +53,8 @@ export const NestedFilterGroup = ({ isPinned, onFieldPinClick, isFieldPinned, + onColumnToggle, + displayedColumns, onLoadMore, loadMoreLoading, hasLoadedMore, @@ -153,6 +157,12 @@ export const NestedFilterGroup = ({ isPinned={value => isPinned(child.key, value)} onFieldPinClick={() => onFieldPinClick?.(child.key)} isFieldPinned={isFieldPinned?.(child.key)} + onColumnToggle={ + onColumnToggle + ? () => onColumnToggle(child.key) + : undefined + } + isColumnDisplayed={displayedColumns?.includes(child.key)} onLoadMore={() => onLoadMore(child.key)} loadMoreLoading={loadMoreLoading[child.key] || false} hasLoadedMore={hasLoadedMore[child.key] || false}