feat(explore): Enabling searching attributes on group by (#104003)

This PR updates the Group By dropdown to support searching attributes
via the API dealing with the 3000 attribute limit issue.

Author: nsdeschenes

static/app/views/explore/components/toolbar/toolbarGroupBy/index.tsx

@@ -40,6 +40,9 @@ interface ToolbarGroupByDropdownProps {
   onColumnChange: (column: string) => void;
   onColumnDelete: () => void;
   options: Array<SelectOption<string>>;
+  loading?: boolean;
+  onClose?: () => void;
+  onSearch?: (search: string) => void;
 }
 
 export function ToolbarGroupByDropdown({
@@ -48,6 +51,9 @@ export function ToolbarGroupByDropdown({
   onColumnChange,
   onColumnDelete,
   options,
+  onSearch,
+  loading,
+  onClose,
 }: ToolbarGroupByDropdownProps) {
   const {attributes, listeners, setNodeRef, transform, transition} = useSortable({
     id: column.id,
@@ -88,6 +94,10 @@ export function ToolbarGroupByDropdown({
         searchable
         triggerProps={{children: label, style: {width: '100%'}}}
         menuWidth="300px"
+        menuTitle="Group By"
+        onSearch={onSearch}
+        onClose={onClose}
+        loading={loading}
       />
       {canDelete ? (
         <Button

static/app/views/explore/contexts/traceItemAttributeContext.tsx

@@ -37,6 +37,7 @@ type TraceItemAttributeConfig = {
   enabled: boolean;
   traceItemType: TraceItemDataset;
   projects?: Project[];
+  search?: string;
 };
 
 type TraceItemAttributeProviderProps = {
@@ -48,11 +49,13 @@ export function TraceItemAttributeProvider({
   traceItemType,
   enabled,
   projects,
+  search,
 }: TraceItemAttributeProviderProps) {
   const typedAttributesResult = useTraceItemAttributeConfig({
     traceItemType,
     enabled,
     projects,
+    search,
   });
 
   return (
@@ -66,13 +69,15 @@ function useTraceItemAttributeConfig({
   traceItemType,
   enabled,
   projects,
+  search,
 }: TraceItemAttributeConfig) {
   const {attributes: numberAttributes, isLoading: numberAttributesLoading} =
     useTraceItemAttributeKeys({
       enabled,
       type: 'number',
       traceItemType,
       projects,
+      search,
     });
 
   const {attributes: stringAttributes, isLoading: stringAttributesLoading} =
@@ -81,6 +86,7 @@ function useTraceItemAttributeConfig({
       type: 'string',
       traceItemType,
       projects,
+      search,
     });
 
   const allNumberAttributes = useMemo(() => {
@@ -106,7 +112,6 @@ function useTraceItemAttributeConfig({
       tag,
       {key: tag, name: tag, kind: FieldKind.TAG},
     ]);
-
     const secondaryAliases: TagCollection = Object.fromEntries(
       Object.values(stringAttributes ?? {})
         .flatMap(value => value.secondaryAliases ?? [])
@@ -117,7 +122,7 @@ function useTraceItemAttributeConfig({
       attributes: {...stringAttributes, ...Object.fromEntries(tags)},
       secondaryAliases,
     };
-  }, [traceItemType, stringAttributes]);
+  }, [stringAttributes, traceItemType]);
 
   return {
     number: allNumberAttributes.attributes,

static/app/views/explore/hooks/useTraceItemAttributeKeys.tsx

@@ -14,6 +14,7 @@ import type {UseTraceItemAttributeBaseProps} from 'sentry/views/explore/types';
 interface UseTraceItemAttributeKeysProps extends UseTraceItemAttributeBaseProps {
   enabled?: boolean;
   query?: string;
+  search?: string;
 }
 
 export function useTraceItemAttributeKeys({
@@ -22,6 +23,7 @@ export function useTraceItemAttributeKeys({
   traceItemType,
   projects,
   query,
+  search,
 }: UseTraceItemAttributeKeysProps) {
   const {selection} = usePageFilters();
 
@@ -53,8 +55,8 @@ export function useTraceItemAttributeKeys({
 
   const {data, isFetching, error} = useQuery<TagCollection>({
     enabled,
-    queryKey,
-    queryFn: () => getTraceItemAttributeKeys(),
+    queryKey: [...queryKey, search],
+    queryFn: () => getTraceItemAttributeKeys(search),
   });
 
   const previous = usePrevious(data, isFetching);

static/app/views/explore/spans/spansTab.spec.tsx

@@ -121,6 +121,24 @@ describe('SpansTabContent', () => {
         },
       }),
     });
+    MockApiClient.addMockResponse({
+      url: `/organizations/${organization.slug}/trace-items/attributes/`,
+      method: 'GET',
+      body: [],
+      match: [MockApiClient.matchQuery({attributeType: 'number'})],
+    });
+    MockApiClient.addMockResponse({
+      url: `/organizations/${organization.slug}/trace-items/attributes/`,
+      method: 'GET',
+      body: [
+        {
+          key: 'project',
+          name: 'project',
+          attributeSource: {source_type: 'sentry'},
+        },
+      ],
+      match: [MockApiClient.matchQuery({attributeType: 'string'})],
+    });
   });
 
   it('should fire analytics once per change', async () => {

static/app/views/explore/toolbar/index.spec.tsx

@@ -61,6 +61,29 @@ describe('ExploreToolbar', () => {
       url: `/organizations/${organization.slug}/trace-items/attributes/`,
       method: 'GET',
       body: [],
+      match: [MockApiClient.matchQuery({attributeType: 'number'})],
+    });
+    MockApiClient.addMockResponse({
+      url: `/organizations/${organization.slug}/trace-items/attributes/`,
+      method: 'GET',
+      body: [
+        {
+          key: 'span.op',
+          name: 'span.op',
+          attributeSource: {source_type: 'sentry'},
+        },
+        {
+          key: 'span.description',
+          name: 'span.description',
+          attributeSource: {source_type: 'sentry'},
+        },
+        {
+          key: 'project',
+          name: 'project',
+          attributeSource: {source_type: 'sentry'},
+        },
+      ],
+      match: [MockApiClient.matchQuery({attributeType: 'string'})],
     });
   });
 

static/app/views/explore/toolbar/toolbarGroupBy.tsx

@@ -1,6 +1,7 @@
-import {useCallback} from 'react';
+import {useCallback, useState} from 'react';
 
 import type {SelectOption} from 'sentry/components/core/compactSelect';
+import {useDebouncedValue} from 'sentry/utils/useDebouncedValue';
 import {
   ToolbarFooter,
   ToolbarSection,
@@ -13,6 +14,8 @@ import {
 import {DragNDropContext} from 'sentry/views/explore/contexts/dragNDropContext';
 import {Mode} from 'sentry/views/explore/contexts/pageParamsContext/mode';
 import {useTraceItemTags} from 'sentry/views/explore/contexts/spanTagsContext';
+import {TraceItemAttributeProvider} from 'sentry/views/explore/contexts/traceItemAttributeContext';
+import type {Column} from 'sentry/views/explore/hooks/useDragNDropColumns';
 import {useGroupByFields} from 'sentry/views/explore/hooks/useGroupByFields';
 import {TraceItemDataset} from 'sentry/views/explore/types';
 
@@ -22,16 +25,6 @@ interface ToolbarGroupByProps {
 }
 
 export function ToolbarGroupBy({groupBys, setGroupBys}: ToolbarGroupByProps) {
-  const {tags: numberTags} = useTraceItemTags('number');
-  const {tags: stringTags} = useTraceItemTags('string');
-
-  const options: Array<SelectOption<string>> = useGroupByFields({
-    groupBys,
-    numberTags,
-    stringTags,
-    traceItemType: TraceItemDataset.SPANS,
-  });
-
   const setGroupBysWithOp = useCallback(
     (columns: string[], op: 'insert' | 'update' | 'delete' | 'reorder') => {
       // automatically switch to aggregates mode when a group by is inserted/updated
@@ -50,13 +43,13 @@ export function ToolbarGroupBy({groupBys, setGroupBys}: ToolbarGroupByProps) {
         <ToolbarSection data-test-id="section-group-by">
           <ToolbarGroupByHeader />
           {editableColumns.map((column, i) => (
-            <ToolbarGroupByDropdown
+            <ToolbarGroupByItem
               key={column.id}
               canDelete={editableColumns.length > 1}
               column={column}
               onColumnChange={c => updateColumnAtIndex(i, c)}
               onColumnDelete={() => deleteColumnAtIndex(i)}
-              options={options}
+              groupBys={groupBys}
             />
           ))}
           <ToolbarFooter>
@@ -67,3 +60,80 @@ export function ToolbarGroupBy({groupBys, setGroupBys}: ToolbarGroupByProps) {
     </DragNDropContext>
   );
 }
+
+interface ToolbarGroupByItemProps {
+  canDelete: boolean;
+  column: Column<string>;
+  groupBys: readonly string[];
+  onColumnChange: (column: string) => void;
+  onColumnDelete: () => void;
+}
+
+function ToolbarGroupByItem({
+  groupBys,
+  canDelete,
+  column,
+  onColumnChange,
+  onColumnDelete,
+}: ToolbarGroupByItemProps) {
+  const [search, setSearch] = useState<string>('');
+  const debouncedSearch = useDebouncedValue(search, 200);
+
+  return (
+    <TraceItemAttributeProvider
+      enabled
+      traceItemType={TraceItemDataset.SPANS}
+      search={debouncedSearch}
+    >
+      <ToolbarGroupByItemContent
+        canDelete={canDelete}
+        column={column}
+        onColumnChange={onColumnChange}
+        onColumnDelete={onColumnDelete}
+        groupBys={groupBys}
+        onSearch={setSearch}
+        onClose={() => setSearch('')}
+      />
+    </TraceItemAttributeProvider>
+  );
+}
+
+interface ToolbarGroupByItemContentProps extends ToolbarGroupByItemProps {
+  onClose: () => void;
+  onSearch: (search: string) => void;
+}
+
+function ToolbarGroupByItemContent({
+  groupBys,
+  canDelete,
+  column,
+  onColumnChange,
+  onColumnDelete,
+  onSearch,
+  onClose,
+}: ToolbarGroupByItemContentProps) {
+  const {tags: numberTags, isLoading: numberTagsLoading} = useTraceItemTags('number');
+  const {tags: stringTags, isLoading: stringTagsLoading} = useTraceItemTags('string');
+
+  const options: Array<SelectOption<string>> = useGroupByFields({
+    groupBys,
+    numberTags,
+    stringTags,
+    traceItemType: TraceItemDataset.SPANS,
+  });
+
+  const loading = numberTagsLoading || stringTagsLoading;
+
+  return (
+    <ToolbarGroupByDropdown
+      column={column}
+      options={options}
+      loading={loading}
+      onClose={onClose}
+      onSearch={onSearch}
+      canDelete={canDelete}
+      onColumnChange={onColumnChange}
+      onColumnDelete={onColumnDelete}
+    />
+  );
+}