feat: Add click-to-adhoc-filter to table charts (#3389)

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

@@ -547,7 +547,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

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

packages/app/src/HDXMultiSeriesTableChart.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useRef, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import Link from 'next/link';
 import cx from 'classnames';
 import {
@@ -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,11 +112,14 @@ 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;
   //we need a reference to the scrolling element for logic down below
-  const tableContainerRef = useRef<HTMLDivElement>(null);
+  const [tableContainer, setTableContainer] = useState<HTMLDivElement | null>(
+    null,
+  );
 
   const truncatedData = useMemo(() => {
     if (data.length > MAX_TABLE_ROWS) {
@@ -119,7 +129,7 @@ export const Table = ({
   }, [data]);
   const isTruncated = truncatedData.length === MAX_TABLE_ROWS;
 
-  const tableWidth = tableContainerRef.current?.clientWidth;
+  const tableWidth = tableContainer?.clientWidth;
   const numColumns = columns.filter(c => c.visible !== false).length + 1;
   const dataColumnsWidthPerc = columns
     .filter(c => c.visible !== false)
@@ -163,6 +173,7 @@ export const Table = ({
             sortingFn,
             color,
             colorRules,
+            filterKey,
           },
           i,
         ) =>
@@ -189,6 +200,29 @@ export const Table = ({
                 formattedValue = formatNumber(value, numberFormat);
               }
 
+              // Map / Array values render as JSON, which their `toString()`
+              // in a filter condition wouldn't match.
+              const isAdhocFilterable =
+                filterKey &&
+                onCellFilter &&
+                value != null &&
+                typeof value !== 'object';
+
+              const content: React.ReactNode = isAdhocFilterable ? (
+                <DBRowTableFieldWithPopover
+                  cellValue={value}
+                  columnName={filterKey}
+                  onPropertyAddClick={onCellFilter}
+                  wrapLinesEnabled={wrapLinesEnabled}
+                  tableContainerRef={tableContainer}
+                  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 +291,7 @@ export const Table = ({
                         data-testid="dashboard-table-row-action"
                         data-shape="external-link"
                       >
-                        {formattedValue}
+                        {content}
                       </a>
                     );
                   }
@@ -273,7 +307,7 @@ export const Table = ({
                       data-testid="dashboard-table-row-action"
                       data-shape="link"
                     >
-                      {formattedValue}
+                      {content}
                     </Link>
                   );
                 }
@@ -295,7 +329,7 @@ export const Table = ({
                     data-testid="dashboard-table-row-action"
                     data-shape="button"
                   >
-                    {formattedValue}
+                    {content}
                   </button>
                 );
               }
@@ -312,15 +346,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>
               );
             },
@@ -376,7 +410,7 @@ export const Table = ({
 
   const rowVirtualizer = useVirtualizer({
     count: rows.length,
-    getScrollElement: () => tableContainerRef.current,
+    getScrollElement: () => tableContainer,
     estimateSize: useCallback(() => 58, []),
     overscan: 10,
     paddingEnd: 20,
@@ -409,7 +443,7 @@ export const Table = ({
   return (
     <div
       className={cx('overflow-auto h-100', styles.tableWrapper, className)}
-      ref={tableContainerRef}
+      ref={setTableContainer}
     >
       <table
         className="w-100"

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,83 @@ 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('excludes 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("keeps row-action links' accessible name when cells are filterable", () => {
+      renderWithMantine(
+        <Table
+          data={filterData}
+          columns={filterColumns}
+          onCellFilter={jest.fn()}
+          getRowAction={() => ({
+            url: '/search?q=web',
+            description: 'Search HyperDX Logs',
+          })}
+          sorting={[]}
+          onSortingChange={() => {}}
+        />,
+      );
+
+      expect(screen.getByRole('link', { name: 'web' })).toBeInTheDocument();
+    });
+
+    it('offers no actions on columns without a filter key', async () => {
+      renderTable();
+
+      await userEvent.hover(screen.getByText('10'));
+
+      // The popover opens through a transition, so wait it out
+      await expect(
+        screen.findByRole('button', { name: 'Copy field value' }),
+      ).rejects.toThrow();
+    });
+
+    it('offers no actions on Map values', async () => {
+      renderTable();
+
+      await userEvent.hover(screen.getByText('{"a":"1"}'));
+
+      await expect(
+        screen.findByRole('button', { name: 'Copy field value' }),
+      ).rejects.toThrow();
+    });
+  });
 });

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
@@ -168,7 +185,6 @@ const DBRowTableFieldWithPopover = ({
             onMouseLeave={handleMouseLeave}
             onClick={handleClick}
             tabIndex={-1}
-            aria-hidden="true"
             style={{ cursor: 'pointer' }}
           >
             {children}