feat: Add click-to-adhoc-filter to table charts

Author: pulpdrew

.changeset/adhoc-filter-click-table.md

@@ -0,0 +1,6 @@
+---
+'@hyperdx/common-utils': patch
+'@hyperdx/app': patch
+---
+
+feat: Filter table tile group-by cells into adhoc dashboard filters

packages/app/src/ChartUtils.tsx

@@ -542,7 +542,7 @@ function inferValueColumns(
   );
 }
 
-function inferGroupColumns(meta: Array<{ name: string; type: string }>) {
+export function inferGroupColumns(meta: Array<{ name: string; type: string }>) {
   return filterColumnMetaByType(meta, [
     JSDataType.String,
     JSDataType.Map,

packages/app/src/DBDashboardPage.tsx

@@ -1298,6 +1298,7 @@ const Tile = ({
                             })
                         : undefined
                     }
+                    onFilter={onFilter}
                   />
                 </Box>
               )}
@@ -1477,6 +1478,7 @@ const Tile = ({
       tileVariables,
       variableNames,
       searchRowContext,
+      onFilter,
     ],
   );
 

packages/app/src/HDXMultiSeriesTableChart.tsx

@@ -28,6 +28,9 @@ import { ColumnDef } from '@tanstack/react-table';
 import { useVirtualizer } from '@tanstack/react-virtual';
 
 import { CsvExportButton } from './components/CsvExportButton';
+import DBRowTableFieldWithPopover, {
+  type CellFilterHandler,
+} from './components/DBTable/DBRowTableFieldWithPopover';
 import TableHeader from './components/DBTable/TableHeader';
 import { useCsvExport } from './hooks/useCsvExport';
 import type { RowAction } from './hooks/useOnClickLinkBuilder';
@@ -61,6 +64,7 @@ export const Table = ({
   variant = 'default',
   alternateRowBackground = false,
   className,
+  onCellFilter,
 }: {
   data: any[];
   columns: {
@@ -78,6 +82,9 @@ export const Table = ({
     // Ordered conditional color rules evaluated against each cell's value
     // (last match wins). Resolves to `color` when no rule matches.
     colorRules?: ColorCondition[];
+    // Expression (or PromQL label) the column's values filter on. Cells of a
+    // column with a key offer filter / exclude actions via `onCellFilter`.
+    filterKey?: string;
   }[];
   groupColumnName?: string;
   // Returns the row click destination + a hover-hint description. When
@@ -105,6 +112,7 @@ export const Table = ({
   // Extra classes for the scroll container, e.g. `effect-pulse` while the
   // tile is refreshing.
   className?: string;
+  onCellFilter?: CellFilterHandler;
 }) => {
   const brandName = useBrandDisplayName();
   const MIN_COLUMN_WIDTH_PX = 100;
@@ -163,6 +171,7 @@ export const Table = ({
             sortingFn,
             color,
             colorRules,
+            filterKey,
           },
           i,
         ) =>
@@ -189,6 +198,27 @@ export const Table = ({
                 formattedValue = formatNumber(value, numberFormat);
               }
 
+              // Map / Array values render as JSON, which their `toString()`
+              // in a filter condition wouldn't match.
+              const content: React.ReactNode =
+                filterKey &&
+                onCellFilter &&
+                value != null &&
+                typeof value !== 'object' ? (
+                  <DBRowTableFieldWithPopover
+                    cellValue={value}
+                    columnName={filterKey}
+                    onPropertyAddClick={onCellFilter}
+                    wrapLinesEnabled={wrapLinesEnabled}
+                    tableContainerRef={tableContainerRef.current}
+                    inline
+                  >
+                    {formattedValue}
+                  </DBRowTableFieldWithPopover>
+                ) : (
+                  formattedValue
+                );
+
               // Resolve this cell's color from the column config: ordered
               // rules first (last match wins), then the column's static
               // color, else no override. ClickHouse serializes numeric
@@ -257,7 +287,7 @@ export const Table = ({
                         data-testid="dashboard-table-row-action"
                         data-shape="external-link"
                       >
-                        {formattedValue}
+                        {content}
                       </a>
                     );
                   }
@@ -273,7 +303,7 @@ export const Table = ({
                       data-testid="dashboard-table-row-action"
                       data-shape="link"
                     >
-                      {formattedValue}
+                      {content}
                     </Link>
                   );
                 }
@@ -295,7 +325,7 @@ export const Table = ({
                     data-testid="dashboard-table-row-action"
                     data-shape="button"
                   >
-                    {formattedValue}
+                    {content}
                   </button>
                 );
               }
@@ -312,15 +342,15 @@ export const Table = ({
                       data-testid="dashboard-table-row-action"
                       data-shape="link"
                     >
-                      {formattedValue}
+                      {content}
                     </Link>
                   );
                 }
               }
 
               return (
                 <div className={className} style={colorStyle}>
-                  {formattedValue}
+                  {content}
                 </div>
               );
             },

packages/app/src/__tests__/DBDashboardImportPage.test.tsx

@@ -27,6 +27,7 @@ jest.mock('next/router', () => ({
 jest.mock('nuqs', () => ({
   parseAsString: 'parseAsString',
   useQueryState: () => [null, jest.fn()],
+  createParser: (opts: object) => opts,
 }));
 jest.mock('../source', () => ({
   useSources: () => ({ data: mockSources }),

packages/app/src/__tests__/HDXMultiSeriesTableChart.test.tsx

@@ -566,4 +566,64 @@ describe('HDXMultiSeriesTableChart <Table>', () => {
       });
     });
   });
+
+  describe('cell filter actions', () => {
+    const filterColumns = [
+      { ...baseColumns[0], filterKey: 'ServiceName' },
+      baseColumns[1],
+      {
+        id: 'attrs',
+        dataKey: 'Attrs',
+        displayName: 'Attrs',
+        filterKey: 'Attrs',
+      },
+    ];
+    const filterData = [{ ServiceName: 'web', Count: 10, Attrs: { a: '1' } }];
+    const renderTable = (onCellFilter = jest.fn()) =>
+      renderWithMantine(
+        <Table
+          data={filterData}
+          columns={filterColumns}
+          onCellFilter={onCellFilter}
+          sorting={[]}
+          onSortingChange={() => {}}
+        />,
+      );
+
+    it('filters on and out of a value by its column filter key', async () => {
+      const onCellFilter = jest.fn();
+      renderTable(onCellFilter);
+
+      await userEvent.hover(screen.getByText('web'));
+      await userEvent.click(
+        await screen.findByRole('button', { name: 'Exclude this value' }),
+      );
+
+      expect(onCellFilter).toHaveBeenCalledWith(
+        'ServiceName',
+        'web',
+        'exclude',
+      );
+    });
+
+    it('offers no actions on columns without a filter key', async () => {
+      renderTable();
+
+      await userEvent.hover(screen.getByText('10'));
+
+      expect(
+        screen.queryByRole('button', { name: 'Copy field value' }),
+      ).toBeNull();
+    });
+
+    it('offers no actions on Map values', async () => {
+      renderTable();
+
+      await userEvent.hover(screen.getByText('{"a":"1"}'));
+
+      expect(
+        screen.queryByRole('button', { name: 'Copy field value' }),
+      ).toBeNull();
+    });
+  });
 });

packages/app/src/components/DBTable/DBRowTableFieldWithPopover.tsx

@@ -15,6 +15,13 @@ import { DBRowTableIconButton } from './DBRowTableIconButton';
 
 import styles from '@styles/LogTable.module.scss';
 
+/** Filter on (`include`) or out (`exclude`) a cell's value, by its column's filter key. */
+export type CellFilterHandler = (
+  key: string,
+  value: string,
+  action: 'include' | 'exclude',
+) => void;
+
 interface DBRowTableFieldWithPopoverProps {
   children: React.ReactNode;
   cellValue: unknown;
@@ -24,6 +31,10 @@ interface DBRowTableFieldWithPopoverProps {
   filterValue?: string;
   tableContainerRef: HTMLDivElement | null;
   isChart?: boolean;
+  /** Leaves out the cell padding, for tables that pad their own cells. */
+  inline?: boolean;
+  /** Overrides the side panel context's filter handler. */
+  onPropertyAddClick?: CellFilterHandler;
 }
 
 const DBRowTableFieldWithPopover = ({
@@ -34,6 +45,8 @@ const DBRowTableFieldWithPopover = ({
   columnName,
   filterValue,
   isChart = false,
+  inline = false,
+  onPropertyAddClick: onPropertyAddClickProp,
 }: DBRowTableFieldWithPopoverProps) => {
   const [opened, { close, open }] = useDisclosure(false);
   const [isCopied, setIsCopied] = useState(false);
@@ -54,7 +67,10 @@ const DBRowTableFieldWithPopover = ({
   }, []);
 
   // Get filter functionality from context
-  const { onPropertyAddClick } = use(RowSidePanelContext);
+  const { onPropertyAddClick: onPropertyAddClickContext } =
+    use(RowSidePanelContext);
+  const onPropertyAddClick =
+    onPropertyAddClickProp ?? onPropertyAddClickContext;
 
   // Check if we have both the column name and filter function available
   const canFilter = columnName && onPropertyAddClick && cellValue != null;
@@ -151,6 +167,7 @@ const DBRowTableFieldWithPopover = ({
         [styles.truncated]: !wrapLinesEnabled && !isChart,
         [styles.wrapped]: wrapLinesEnabled,
         [styles.chart]: isChart,
+        [styles.inline]: inline,
       })}
     >
       <Popover

packages/app/src/components/DBTableChart.tsx

@@ -25,17 +25,20 @@ import { getMinGranularitySeconds } from '@/hooks/useChartConfig';
 import { useMVOptimizationExplanation } from '@/hooks/useMVOptimizationExplanation';
 import useOffsetPaginatedQuery from '@/hooks/useOffsetPaginatedQuery';
 import { useOnClickLinkBuilder } from '@/hooks/useOnClickLinkBuilder';
+import { useResultColumnFilterKeys } from '@/hooks/useResultColumnFilterKeys';
 import {
   getBuilderValueColumnCount,
   useChartNumberFormats,
   useSource,
 } from '@/source';
+import type { TileFilterHandler } from '@/types';
 import { useIntersectionObserver } from '@/utils';
 
 import ChartContainer from './charts/ChartContainer';
 import ChartErrorState, {
   ChartErrorStateVariant,
 } from './charts/ChartErrorState';
+import type { CellFilterHandler } from './DBTable/DBRowTableFieldWithPopover';
 import { getClientSideSortingFn } from './DBTable/sorting';
 import MVOptimizationIndicator from './MaterializedViews/MVOptimizationIndicator';
 
@@ -53,6 +56,7 @@ export default function DBTableChart({
   showMVOptimizationIndicator = true,
   variant,
   errorVariant,
+  onFilter,
 }: {
   config: ChartConfigWithOptTimestamp;
   getRowSearchLink?: (row: any) => string | null;
@@ -67,6 +71,8 @@ export default function DBTableChart({
   showMVOptimizationIndicator?: boolean;
   variant?: TableVariant;
   errorVariant?: ChartErrorStateVariant;
+  /** When set, group-by cells offer filter / exclude actions for their value. */
+  onFilter?: TileFilterHandler;
 }) {
   const [sort, setSort] = useState<SortingState>([]);
 
@@ -194,6 +200,16 @@ export default function DBTableChart({
     return { colorByColumn, rulesByColumn };
   }, [data?.meta, queriedConfig]);
 
+  const filterKeyByColumn = useResultColumnFilterKeys({
+    config: queriedConfig,
+    meta: data?.meta,
+    enabled: !!onFilter,
+  });
+  const onCellFilter = useCallback<CellFilterHandler>(
+    (key, value, action) => onFilter?.([{ key, value }], action),
+    [onFilter],
+  );
+
   const columns = useMemo(() => {
     const rows = data?.data ?? [];
     if (rows.length === 0) {
@@ -253,11 +269,13 @@ export default function DBTableChart({
           ? undefined
           : rulesByColumn.get(key),
         sortingFn: getClientSideSortingFn(data?.meta, key),
+        filterKey: filterKeyByColumn.get(key),
       }));
   }, [
     data,
     queriedConfig,
     hiddenColumns,
+    filterKeyByColumn,
     aliasMap,
     formatByColumn,
     colorByColumn,
@@ -349,6 +367,10 @@ export default function DBTableChart({
           }
           onSortingChange={handleSortingChange}
           variant={variant}
+          // Placeholder rows belong to the previous query's columns
+          onCellFilter={
+            onFilter && !isPlaceholderData ? onCellFilter : undefined
+          }
           alternateRowBackground={!!queriedConfig.alternateRowBackground}
           className={isPlaceholderData ? 'effect-pulse' : undefined}
           tableBottom={

packages/app/src/components/__tests__/DBTableChart.test.tsx

@@ -54,6 +54,10 @@ jest.mock('@/hooks/useOnClickLinkBuilder', () => ({
   useOnClickLinkBuilder: jest.fn().mockReturnValue(null),
 }));
 
+jest.mock('@/hooks/useResultColumnFilterKeys', () => ({
+  useResultColumnFilterKeys: jest.fn(() => new Map()),
+}));
+
 jest.mock('../MaterializedViews/MVOptimizationIndicator', () =>
   jest.fn(() => null),
 );