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}