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

Author: pulpdrew

.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,
@@ -143,6 +146,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';
@@ -172,6 +176,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, {
@@ -450,6 +455,7 @@ const Tile = ({
   showReleaseAnnotations,
   isLive,
   readOnly,
+  onFilter,
 
   // Properties forwarded by grid layout
   className,
@@ -485,6 +491,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;
@@ -662,6 +670,22 @@ 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 && (isLogSource(source) || isTraceSource(source))
+        ? {
+            onPropertyAddClick: (key, value, action) =>
+              onFilter(
+                [{ key, value: String(value) }],
+                action === 'exclude' ? 'exclude' : 'include',
+              ),
+            source,
+          }
+        : undefined,
+    [onFilter, source],
+  );
   const promqlFilters = useMemo(
     () => (filters ? getPromqlFilters(filters) : undefined),
     [filters],
@@ -1475,6 +1499,8 @@ const Tile = ({
                       queryKeyPrefix={'search'}
                       variant="default"
                       errorVariant="collapsible"
+                      context={searchRowContext}
+                      filterOnAliasedExpressions
                     />
                   </ChartContainer>
                 )}
@@ -1556,6 +1582,7 @@ const Tile = ({
       readOnly,
       tileVariables,
       variableNames,
+      searchRowContext,
     ],
   );
 
@@ -2006,6 +2033,7 @@ function DBDashboardPage({
     setFilterValue,
     adhocConditionsByFilterId,
     setAdhocConditions,
+    applyAdhocAction,
     setFilterValueEntries,
     filterValueEntries,
     ignoredFilterExpressions,
@@ -2467,6 +2495,25 @@ function DBDashboardPage({
     [where, whereLanguage, getFilterQueriesForSource],
   );
 
+  const getTileFilterHandler = useCallback(
+    (
+      chart: Tile,
+      sourceId: string | undefined,
+    ): TileFilterHandler | undefined => {
+      // The filter bar is hidden in kiosk mode, so a click would add conditions
+      // the viewer can't see or remove.
+      if (isKioskMode) return undefined;
+      const targetIds = getAdhocFilterTargetsForTile(
+        filters,
+        chart.config,
+        sourceId,
+      ).map(filter => filter.id);
+      if (targetIds.length === 0) return undefined;
+      return (entries, action) => applyAdhocAction(targetIds, entries, action);
+    },
+    [isKioskMode, filters, applyAdhocAction],
+  );
+
   const renderTileComponent = useCallback(
     (chart: Tile) => {
       // Resolve the tile's source ID so per-source-scoped filters can be
@@ -2486,6 +2533,7 @@ function DBDashboardPage({
             isRefreshEnabled ? granularityOverride : (granularity ?? undefined)
           }
           filters={getTileFilters(tileSourceId)}
+          onFilter={getTileFilterHandler(chart, tileSourceId)}
           variables={variables}
           unsatisfiedRequiredFilters={unsatisfiedRequiredFilters}
           onTimeRangeSelect={onTimeRangeSelect}
@@ -2588,6 +2636,7 @@ function DBDashboardPage({
       showAlertAnnotations,
       showReleaseAnnotations,
       getTileFilters,
+      getTileFilterHandler,
       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/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/DBRowTable.tsx

@@ -29,6 +29,7 @@ import {
   isJSDataTypeJSONStringifiable,
   JSDataType,
 } from '@hyperdx/common-utils/dist/clickhouse';
+import { quoteResultColumnNameIfNeeded } from '@hyperdx/common-utils/dist/core/metadata';
 import { splitAndTrimWithBracket } from '@hyperdx/common-utils/dist/core/utils';
 import {
   DENOISE_NOISE_THRESHOLD,
@@ -377,6 +378,7 @@ export const RawLogTable = memo(
     showExpandButton = true,
     enableRowSelection = false,
     selectionResetKey,
+    filterOnAliasedExpressions,
     onSelectedRowsChange,
     getRowWhere,
     variant = 'default',
@@ -397,7 +399,7 @@ export const RawLogTable = memo(
     tableId?: string;
     columnNameMap?: Record<string, string>;
     dedupRows?: boolean;
-    columnTypeMap: Map<string, { _type: JSDataType | null }>;
+    columnTypeMap: Map<string, { _type: JSDataType | null; type?: string }>;
 
     isError?: boolean;
     error?: ClickHouseQueryError | Error;
@@ -412,6 +414,11 @@ export const RawLogTable = memo(
     showExpandButton?: boolean;
     enableRowSelection?: boolean;
     selectionResetKey?: string;
+    /**
+     * Pass the expression behind an aliased column as the cell's filter key,
+     * for filters applied outside this query, where the alias isn't defined.
+     */
+    filterOnAliasedExpressions?: boolean;
     onSelectedRowsChange?: (hasSelectedRows: boolean) => void;
     renderRowDetails?: (row: {
       id: string;
@@ -513,6 +520,19 @@ export const RawLogTable = memo(
     // Get the alias map from the config so we resolve correct column ids
     const { data: aliasMap } = useAliasMapFromChartConfig(config);
 
+    const getCellFilterKey = useCallback(
+      (column: string | undefined) => {
+        if (!filterOnAliasedExpressions || column == null) return column;
+        // Cells hold ISO UTC timestamps, which never equal toString() of a
+        // DateTime (space-separated, in the column's timezone).
+        if (/\bDateTime/.test(columnTypeMap.get(column)?.type ?? '')) {
+          return undefined;
+        }
+        return aliasMap?.[column] ?? quoteResultColumnNameIfNeeded(column);
+      },
+      [filterOnAliasedExpressions, aliasMap, columnTypeMap],
+    );
+
     // Reset scroll when live tail is enabled for the first time
     const prevIsLive = usePrevious(isLive);
     useEffect(() => {
@@ -1271,10 +1291,10 @@ export const RawLogTable = memo(
                                       cellValue={cellValue}
                                       wrapLinesEnabled={wrapLinesEnabled}
                                       tableContainerRef={tableContainerRef}
-                                      columnName={
+                                      columnName={getCellFilterKey(
                                         (cell.column.columnDef.meta as any)
-                                          ?.column
-                                      }
+                                          ?.column,
+                                      )}
                                       isChart={
                                         (cell.column.columnDef.meta as any)
                                           ?.column === '__hdx_pattern_trend'
@@ -1587,6 +1607,7 @@ function selectColumnMapWithoutAdditionalKeys(
   string,
   {
     _type: JSDataType | null;
+    type: string;
   }
 > {
   if (selectMeta == null || additionalKeysLength == null) {
@@ -1624,6 +1645,7 @@ function DBSqlRowTableComponent({
   showExpandButton = true,
   enableRowSelection = false,
   selectionResetKey,
+  filterOnAliasedExpressions,
   onSelectedRowsChange,
   renderRowDetails,
   onSortingChange,
@@ -1658,6 +1680,7 @@ function DBSqlRowTableComponent({
   showExpandButton?: boolean;
   enableRowSelection?: boolean;
   selectionResetKey?: string;
+  filterOnAliasedExpressions?: boolean;
   onSelectedRowsChange?: (hasSelectedRows: boolean) => void;
   initialSortBy?: SortingState;
   onSortingChange?: (v: SortingState | null) => void;
@@ -1981,6 +2004,7 @@ function DBSqlRowTableComponent({
         showExpandButton={showExpandButton}
         enableRowSelection={enableRowSelection}
         selectionResetKey={selectionResetKey}
+        filterOnAliasedExpressions={filterOnAliasedExpressions}
         onSelectedRowsChange={onSelectedRowsChange}
         enableSorting={true}
         onSortingChange={_onSortingChange}

packages/app/src/components/DBSqlRowTableWithSidebar.tsx

@@ -54,6 +54,7 @@ interface Props {
   // it. Enabled by default; pass `false` to opt out.
   closeOnClickOutside?: boolean;
   keepOpenSelector?: string;
+  filterOnAliasedExpressions?: boolean;
 }
 
 // Clicking the results table (selecting/switching rows, scrolling) keeps the
@@ -84,6 +85,7 @@ export default function DBSqlRowTableWithSideBar({
   onResolvedColumnsChange,
   closeOnClickOutside = true,
   keepOpenSelector = DEFAULT_KEEP_OPEN_SELECTOR,
+  filterOnAliasedExpressions,
 }: Props) {
   const { data: sourceData } = useSource({ id: sourceId });
   const [rowId, setRowId] = useQueryState('rowWhere', parseAsStringEncoded);
@@ -163,6 +165,7 @@ export default function DBSqlRowTableWithSideBar({
         selectionResetKey={selectionResetKey}
         onSelectedRowsChange={onSelectedRowsChange}
         onResolvedColumnsChange={onResolvedColumnsChange}
+        filterOnAliasedExpressions={filterOnAliasedExpressions}
       />
     </RowSidePanelContext>
   );