feat(delta): add clear selection button for heatmap

Co-authored-by: Alex Fedotyev <alex-fedotyev@users.noreply.github.com>

Author: cursoragent

packages/app/src/components/DBDeltaChart.tsx

@@ -5,15 +5,18 @@ import {
   Filter,
 } from '@hyperdx/common-utils/dist/types';
 import {
+  ActionIcon,
   Box,
   Code,
   Container,
   Divider,
   Flex,
   Pagination,
   Text,
+  Tooltip,
 } from '@mantine/core';
 import { useElementSize } from '@mantine/hooks';
+import { IconX } from '@tabler/icons-react';
 
 import { isAggregateFunction } from '@/ChartUtils';
 import { useQueriedChartConfig } from '@/hooks/useChartConfig';
@@ -52,6 +55,7 @@ export default function DBDeltaChart({
   yMin: rawYMin,
   yMax: rawYMax,
   onAddFilter,
+  onClearSelection,
   spanIdExpression,
   legendPrefix,
 }: {
@@ -62,6 +66,7 @@ export default function DBDeltaChart({
   yMin?: number | null;
   yMax?: number | null;
   onAddFilter?: AddFilterFn;
+  onClearSelection?: () => void;
   spanIdExpression?: string;
   legendPrefix?: React.ReactNode;
 }) {
@@ -516,6 +521,18 @@ export default function DBDeltaChart({
                 Background
               </Text>
             </Flex>
+            {onClearSelection && (
+              <Tooltip label="Clear selection">
+                <ActionIcon
+                  variant="secondary"
+                  size="xs"
+                  aria-label="Clear heatmap selection"
+                  onClick={onClearSelection}
+                >
+                  <IconX size={14} />
+                </ActionIcon>
+              </Tooltip>
+            )}
           </>
         ) : (
           <>

packages/app/src/components/Search/DBSearchHeatmapChart.tsx

@@ -79,17 +79,20 @@ export function DBSearchHeatmapChart({
   const [settingsOpened, settingsHandlers] = useDisclosure(false);
   const { colorScheme } = useMantineColorScheme();
   const palette = colorScheme === 'light' ? lightPalette : darkPalette;
+  const clearSelection = useCallback(() => {
+    setFields({ xMin: null, xMax: null, yMin: null, yMax: null });
+  }, [setFields]);
 
   // After applying a filter, clear the heatmap selection so the delta chart
   // resets instead of staying in comparison mode.
   const handleAddFilterAndClearSelection = useCallback<
     NonNullable<AddFilterFn>
   >(
     (property, value, action) => {
-      setFields({ xMin: null, xMax: null, yMin: null, yMax: null });
+      clearSelection();
       onAddFilter?.(property, value, action);
     },
-    [onAddFilter, setFields],
+    [clearSelection, onAddFilter],
   );
 
   return (
@@ -180,6 +183,7 @@ export function DBSearchHeatmapChart({
           onAddFilter={
             onAddFilter ? handleAddFilterAndClearSelection : undefined
           }
+          onClearSelection={clearSelection}
           spanIdExpression={source.spanIdExpression}
           legendPrefix={<ColorLegend colors={palette} />}
         />