feat: Support click-to-adhoc-filter on search tiles

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

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

packages/app/src/DBDashboardPage.tsx

@@ -34,7 +34,10 @@ import {
   Granularity,
   isTimeSeriesDisplayType,
 } from '@hyperdx/common-utils/dist/core/utils';
-import { getBlockingRequiredFilterNames } from '@hyperdx/common-utils/dist/dashboardFilterValues';
+import {
+  getAdhocFilterTargetsForTile,
+  getBlockingRequiredFilterNames,
+} from '@hyperdx/common-utils/dist/dashboardFilterValues';
 import {
   getPromqlFilters,
   getSqlFilters,
@@ -127,6 +130,7 @@ import {
 } from '@tabler/icons-react';
 
 import { IsolatedChartSyncProvider } from '@/chartSync';
+import { getAllowedSourceKinds } from '@/components/ChartEditor/utils';
 import { mergeAnnotations } from '@/components/charts/chartAnnotations';
 import { ContactSupportText } from '@/components/ContactSupportText';
 import {
@@ -148,6 +152,7 @@ import { DashboardKioskHeader } from '@/components/DashboardKioskHeader';
 import DashboardTableOfContents from '@/components/DashboardTableOfContents';
 import EditTimeChartForm from '@/components/DBEditTimeChartForm';
 import DBNumberChart from '@/components/DBNumberChart';
+import type { RowSidePanelContextProps } from '@/components/DBRowSidePanel';
 import DBTableChart from '@/components/DBTableChart';
 import { DBTimeChart } from '@/components/DBTimeChart';
 import { FavoriteButton } from '@/components/FavoriteButton';
@@ -177,6 +182,7 @@ import useDashboardContainers, {
 import { useDashboardKioskMode } from '@/hooks/useDashboardKioskMode';
 import { useReleaseAnnotations } from '@/hooks/useReleaseAnnotations';
 import { QueryAttributionProvider } from '@/queryAttribution';
+import type { TileFilterHandler } from '@/types';
 import { calculateNextTilePosition, makeId } from '@/utils/tilePositioning';
 
 import ChartContainer, {
@@ -447,6 +453,7 @@ const Tile = ({
   showReleaseAnnotations,
   isLive,
   readOnly,
+  onFilter,
 
   // Properties forwarded by grid layout
   className,
@@ -482,6 +489,8 @@ const Tile = ({
   showReleaseAnnotations?: boolean;
   isLive?: boolean;
   readOnly?: boolean;
+  /** Set when an ad hoc filter broadcasts to this tile; clicked values update it. */
+  onFilter?: TileFilterHandler;
 
   // Properties forwarded by grid layout
   className?: string;
@@ -659,6 +668,30 @@ const Tile = ({
     () => (filters ? getSqlFilters(filters) : undefined),
     [filters],
   );
+
+  // `source` keeps the handler off rows from other sources, e.g. a linked trace
+  const searchRowContext = useMemo<RowSidePanelContextProps | undefined>(
+    () =>
+      onFilter &&
+      source &&
+      getAllowedSourceKinds({
+        configType: 'builder',
+        displayType: DisplayType.Search,
+      }).includes(source.kind)
+        ? {
+            // Only the cell popover passes an action; the side panel's
+            // "Add to filters" passes none and shouldn't toggle a condition off.
+            onPropertyAddClick: (key, value, action) =>
+              onFilter(
+                [{ key, value: String(value) }],
+                action === 'include' || action === 'exclude' ? action : 'add',
+              ),
+            source,
+            isAdhocFilterTarget: true,
+          }
+        : undefined,
+    [onFilter, source],
+  );
   const promqlFilters = useMemo(
     () => (filters ? getPromqlFilters(filters) : undefined),
     [filters],
@@ -1379,6 +1412,7 @@ const Tile = ({
                       queryKeyPrefix={'search'}
                       variant="default"
                       errorVariant="collapsible"
+                      context={searchRowContext}
                     />
                   </ChartContainer>
                 )}
@@ -1460,6 +1494,7 @@ const Tile = ({
       readOnly,
       tileVariables,
       variableNames,
+      searchRowContext,
     ],
   );
 
@@ -1910,6 +1945,7 @@ function DBDashboardPage({
     setFilterValue,
     adhocConditionsByFilterId,
     setAdhocConditions,
+    applyAdhocAction,
     setFilterValueEntries,
     filterValueEntries,
     ignoredFilterExpressions,
@@ -2348,6 +2384,30 @@ function DBDashboardPage({
     [where, whereLanguage, getFilterQueriesForSource],
   );
 
+  // Built once per tile list so each tile's `onFilter` keeps its identity
+  // across renders; a fresh closure would rebuild the tile's row-panel context
+  // and re-render every cell in its search table.
+  const tileFilterHandlers = useMemo(() => {
+    const handlers = new Map<string, TileFilterHandler>();
+    // The filter bar is hidden in kiosk mode, so a click would add conditions
+    // the viewer can't see or remove.
+    if (isKioskMode) return handlers;
+    for (const tile of dashboard?.tiles ?? []) {
+      const sourceId = 'source' in tile.config ? tile.config.source : undefined;
+      const targetIds = getAdhocFilterTargetsForTile(
+        filters,
+        tile.config,
+        sourceId,
+      ).map(filter => filter.id);
+      if (targetIds.length > 0) {
+        handlers.set(tile.id, (entries, action) =>
+          applyAdhocAction(targetIds, entries, action),
+        );
+      }
+    }
+    return handlers;
+  }, [isKioskMode, dashboard?.tiles, filters, applyAdhocAction]);
+
   const renderTileComponent = useCallback(
     (chart: Tile) => {
       // Resolve the tile's source ID so per-source-scoped filters can be
@@ -2367,6 +2427,7 @@ function DBDashboardPage({
             isRefreshEnabled ? granularityOverride : (granularity ?? undefined)
           }
           filters={getTileFilters(tileSourceId)}
+          onFilter={tileFilterHandlers.get(chart.id)}
           variables={variables}
           unsatisfiedRequiredFilters={unsatisfiedRequiredFilters}
           onTimeRangeSelect={onTimeRangeSelect}
@@ -2469,6 +2530,7 @@ function DBDashboardPage({
       showAlertAnnotations,
       showReleaseAnnotations,
       getTileFilters,
+      tileFilterHandlers,
       variables,
       unsatisfiedRequiredFilters,
       moveTargetContainers,

packages/app/src/components/AdhocDashboardFilter/AdhocDashboardFilter.tsx

@@ -15,7 +15,6 @@ import {
   Text,
   Tooltip,
 } from '@mantine/core';
-import { notifications } from '@mantine/notifications';
 import { IconPlus } from '@tabler/icons-react';
 
 import {
@@ -25,6 +24,10 @@ import {
 import { FilterPill, getFilterOperatorDisplay } from '@/components/FilterPill';
 
 import { AdhocConditionEditor } from './AdhocConditionEditor';
+import {
+  notifyAdhocConditionTooLong,
+  notifyAdhocFilterFull,
+} from './notifications';
 
 type AdhocDashboardFilterProps = {
   filter: AdhocDashboardFilterType;
@@ -47,12 +50,7 @@ export function AdhocDashboardFilter({
 
   const toggleAdding = () => {
     if (isAtLimit) {
-      notifications.show({
-        id: `adhoc-filter-full-${filter.id}`,
-        color: 'yellow',
-        title: `${filter.name} is full`,
-        message: `A filter holds up to ${ADHOC_FILTER_MAX_CONDITIONS} conditions. Remove one to add another.`,
-      });
+      notifyAdhocFilterFull(filter);
       return;
     }
     setIsAdding(!isAdding);
@@ -61,13 +59,7 @@ export function AdhocDashboardFilter({
   // lose the filter's others on reload. Keep the editor open to fix it instead.
   const isStorable = (condition: AdhocFilterCondition) => {
     if (AdhocFilterConditionSchema.safeParse(condition).success) return true;
-    const maxLength = AdhocFilterConditionSchema.shape.value.maxLength;
-    notifications.show({
-      id: `adhoc-filter-too-long-${filter.id}`,
-      color: 'yellow',
-      title: 'Condition is too long',
-      message: `Keys and values can be up to ${maxLength?.toLocaleString()} characters.`,
-    });
+    notifyAdhocConditionTooLong(filter);
     return false;
   };
   const replace = (index: number, condition: AdhocFilterCondition) =>

packages/app/src/components/AdhocDashboardFilter/__tests__/useAdhocFilterOptions.test.tsx

@@ -75,6 +75,27 @@ describe('getSqlSourceKeys', () => {
       ),
     ).toEqual(['ServiceName', "LogAttributes['1']", 'Body.`user`.`id`']);
   });
+
+  it('leaves out DateTime keys, whose values never match toString()', () => {
+    expect(
+      getSqlSourceKeys(
+        [
+          {
+            path: ['Timestamp'],
+            type: 'DateTime64(9)',
+            jsType: JSDataType.Date,
+          },
+          { path: ['Day'], type: 'Date', jsType: JSDataType.Date },
+          { path: ['Body', 'ts'], type: 'DateTime', jsType: JSDataType.Date },
+        ],
+        [
+          column('Timestamp', 'DateTime64(9)'),
+          column('Day', 'Date'),
+          column('Body', 'JSON'),
+        ],
+      ),
+    ).toEqual(['Day']);
+  });
 });
 
 describe('getSqlSourceColumnKeys', () => {
@@ -87,6 +108,15 @@ describe('getSqlSourceColumnKeys', () => {
     ).toEqual(['ServiceName']);
   });
 
+  it('leaves out DateTime columns', () => {
+    expect(
+      getSqlSourceColumnKeys([
+        column('Timestamp', "DateTime64(9, 'UTC')"),
+        column('Day', 'Date'),
+      ]),
+    ).toEqual(['Day']);
+  });
+
   it('quotes column names that are not bare identifiers', () => {
     expect(getSqlSourceColumnKeys([column('service-name', 'String')])).toEqual([
       '`service-name`',

packages/app/src/components/AdhocDashboardFilter/notifications.ts

@@ -0,0 +1,29 @@
+import {
+  ADHOC_FILTER_MAX_CONDITIONS,
+  AdhocDashboardFilter,
+  AdhocFilterConditionSchema,
+} from '@hyperdx/common-utils/dist/types';
+import { notifications } from '@mantine/notifications';
+
+export function notifyAdhocFilterFull(
+  filter: Pick<AdhocDashboardFilter, 'id' | 'name'>,
+) {
+  notifications.show({
+    id: `adhoc-filter-full-${filter.id}`,
+    color: 'yellow',
+    title: `${filter.name} is full`,
+    message: `A filter holds up to ${ADHOC_FILTER_MAX_CONDITIONS} conditions. Remove one to add another.`,
+  });
+}
+
+export function notifyAdhocConditionTooLong(
+  filter: Pick<AdhocDashboardFilter, 'id'>,
+) {
+  const maxLength = AdhocFilterConditionSchema.shape.value.maxLength;
+  notifications.show({
+    id: `adhoc-filter-too-long-${filter.id}`,
+    color: 'yellow',
+    title: 'Condition is too long',
+    message: `Keys and values can be up to ${maxLength?.toLocaleString()} characters.`,
+  });
+}

packages/app/src/components/AdhocDashboardFilter/useAdhocFilterOptions.ts

@@ -8,7 +8,10 @@ import {
   QueryAttribution,
 } from '@hyperdx/common-utils/dist/clickhouse';
 import { Field, tcFromSource } from '@hyperdx/common-utils/dist/core/metadata';
-import { getAdhocFilterSourceKinds } from '@hyperdx/common-utils/dist/filters';
+import {
+  getAdhocFilterSourceKinds,
+  isAdhocComparableDataType,
+} from '@hyperdx/common-utils/dist/filters';
 import {
   AdhocDashboardFilter,
   TSource,
@@ -63,16 +66,22 @@ export function getSqlSourceKeys(fields: Field[], columns: ColumnMeta[]) {
   const jsonColumns = columnNames([JSDataType.JSON]);
   const mapColumns = columnNames([JSDataType.Map]);
   const keys = fields
-    .filter(field => field.path.length > 1 || isJSDataTypeScalar(field.jsType))
+    .filter(
+      field =>
+        (field.path.length > 1 || isJSDataTypeScalar(field.jsType)) &&
+        isAdhocComparableDataType(field.type),
+    )
     .map(field => mergePath(field.path, jsonColumns, mapColumns));
   return toQuotedKeys(keys, columns);
 }
 
 /** A SQL source's scalar columns, the only keys known without field metadata. */
 export function getSqlSourceColumnKeys(columns: ColumnMeta[]) {
   const keys = columns
-    .filter(column =>
-      isJSDataTypeScalar(convertCHDataTypeToJSType(column.type)),
+    .filter(
+      column =>
+        isJSDataTypeScalar(convertCHDataTypeToJSType(column.type)) &&
+        isAdhocComparableDataType(column.type),
     )
     .map(column => column.name);
   return toQuotedKeys(keys, columns);

packages/app/src/components/DBRowSidePanel.tsx

@@ -111,8 +111,13 @@ export type RowSidePanelContextProps = {
   dbSqlRowTableConfig?: BuilderChartConfigWithDateRange;
   isChildModalOpen?: boolean;
   setChildModalOpen?: (open: boolean) => void;
-  source?: TLogSource | TTraceSource;
+  source?: TSource;
   onOpenLinkedTrace?: (link: SpanLinkData) => void;
+  /**
+   * onPropertyAddClick updates ad hoc dashboard filters. Tables shape
+   * each cell's key and value for that with getAdhocCellCondition.
+   */
+  isAdhocFilterTarget?: boolean;
 };
 
 export const RowSidePanelContext = createContext<RowSidePanelContextProps>({});