feat(explore): Add attribute description throughout explore (#91829)

Zylphrex · web-flow · commit 471c00628156 · 2025-05-21T10:48:28.000-04:00
This adds the search bar style descriptions to various parts of explore
- in the visualize attribute dropdown
- in the group by drop down
- in the samples table editor

Close EXP-3
diff --git a/static/app/views/explore/components/attributeDetails.tsx b/static/app/views/explore/components/attributeDetails.tsx
@@ -0,0 +1,41 @@
+import type {ReactNode} from 'react';
+import styled from '@emotion/styled';
+
+import {t} from 'sentry/locale';
+import {space} from 'sentry/styles/space';
+import type {FieldKind} from 'sentry/utils/fields';
+import {getFieldDefinition} from 'sentry/utils/fields';
+
+interface AttributeDetailsProps {
+  column: string;
+  kind: FieldKind;
+  label: ReactNode;
+  type: 'span';
+}
+
+export function AttributeDetails({column, kind, label, type}: AttributeDetailsProps) {
+  const definition = getFieldDefinition(column, type, kind);
+  const description = definition?.desc ?? t('An attribute sent with one or more events');
+  return (
+    <Details>
+      <DetailsLabel>{label}</DetailsLabel>
+      <DetailsDescription>{description}</DetailsDescription>
+    </Details>
+  );
+}
+
+const Details = styled('div')`
+  padding: ${space(0.75)} ${space(1)};
+  max-width: 220px;
+  font-size: ${p => p.theme.fontSizeSmall};
+`;
+
+const DetailsLabel = styled('p')`
+  font-weight: ${p => p.theme.fontWeightBold};
+  word-break: break-all;
+  margin-bottom: ${space(1)};
+`;
+
+const DetailsDescription = styled('p')`
+  margin-bottom: 0px;
+`;
diff --git a/static/app/views/explore/hooks/useVisualizeFields.tsx b/static/app/views/explore/hooks/useVisualizeFields.tsx
@@ -2,12 +2,11 @@ import {useMemo} from 'react';
 
 import type {SelectOption} from 'sentry/components/core/compactSelect';
 import {defined} from 'sentry/utils';
-import {
-  type ParsedFunction,
-  parseFunction,
-  prettifyTagKey,
-} from 'sentry/utils/discover/fields';
-import {AggregationKey} from 'sentry/utils/fields';
+import type {ParsedFunction} from 'sentry/utils/discover/fields';
+import {parseFunction, prettifyTagKey} from 'sentry/utils/discover/fields';
+import {AggregationKey, FieldKind} from 'sentry/utils/fields';
+import {AttributeDetails} from 'sentry/views/explore/components/attributeDetails';
+import {TypeBadge} from 'sentry/views/explore/components/typeBadge';
 import {useSpanTags} from 'sentry/views/explore/contexts/spanTagsContext';
 
 interface Props {
@@ -37,6 +36,11 @@ export function useVisualizeFields({yAxis, yAxes}: Props) {
   }, [yAxes]);
 
   const fieldOptions: Array<SelectOption<string>> = useMemo(() => {
+    const kind =
+      parsedYAxis?.name === AggregationKey.COUNT_UNIQUE
+        ? FieldKind.TAG
+        : FieldKind.MEASUREMENT;
+
     const unknownOptions = parsedYAxes
       .flatMap(entry => {
         return entry.arguments;
@@ -46,13 +50,30 @@ export function useVisualizeFields({yAxis, yAxes}: Props) {
       });
 
     const options = [
-      ...unknownOptions.map(option => ({
-        label: prettifyTagKey(option),
-        value: option,
-        textValue: option,
-      })),
+      ...unknownOptions.map(option => {
+        const label = prettifyTagKey(option);
+        return {
+          label,
+          value: option,
+          textValue: option,
+          trailingItems: <TypeBadge kind={kind} />,
+          showDetailsInOverlay: true,
+          details: (
+            <AttributeDetails column={option} kind={kind} label={label} type="span" />
+          ),
+        };
+      }),
       ...Object.values(tags).map(tag => {
-        return {label: tag.name, value: tag.key, textValue: tag.name};
+        return {
+          label: tag.name,
+          value: tag.key,
+          textValue: tag.name,
+          trailingItems: <TypeBadge kind={kind} />,
+          showDetailsInOverlay: true,
+          details: (
+            <AttributeDetails column={tag.key} kind={kind} label={tag.name} type="span" />
+          ),
+        };
       }),
     ];
 
@@ -69,7 +90,7 @@ export function useVisualizeFields({yAxis, yAxes}: Props) {
     });
 
     return options;
-  }, [tags, parsedYAxes]);
+  }, [tags, parsedYAxes, parsedYAxis?.name]);
 
   return fieldOptions;
 }
diff --git a/static/app/views/explore/tables/columnEditorModal.tsx b/static/app/views/explore/tables/columnEditorModal.tsx
@@ -19,6 +19,7 @@ import type {TagCollection} from 'sentry/types/group';
 import {defined} from 'sentry/utils';
 import {classifyTagKey, prettifyTagKey} from 'sentry/utils/discover/fields';
 import {FieldKind} from 'sentry/utils/fields';
+import {AttributeDetails} from 'sentry/views/explore/components/attributeDetails';
 import {TypeBadge} from 'sentry/views/explore/components/typeBadge';
 import {DragNDropContext} from 'sentry/views/explore/contexts/dragNDropContext';
 import type {Column} from 'sentry/views/explore/hooks/useDragNDropColumns';
@@ -54,12 +55,18 @@ export function ColumnEditorModal({
             !stringTags.hasOwnProperty(column) && !numberTags.hasOwnProperty(column)
         )
         .map(column => {
+          const kind = classifyTagKey(column);
+          const label = prettifyTagKey(column);
           return {
-            label: prettifyTagKey(column),
+            label,
             value: column,
             textValue: column,
-            trailingItems: <TypeBadge kind={classifyTagKey(column)} />,
+            trailingItems: <TypeBadge kind={kind} />,
             key: `${column}-${classifyTagKey(column)}`,
+            showDetailsInOverlay: true,
+            details: (
+              <AttributeDetails column={column} kind={kind} label={label} type="span" />
+            ),
           };
         }),
       ...Object.values(stringTags).map(tag => {
@@ -69,6 +76,15 @@ export function ColumnEditorModal({
           textValue: tag.name,
           trailingItems: <TypeBadge kind={FieldKind.TAG} />,
           key: `${tag.key}-${FieldKind.TAG}`,
+          showDetailsInOverlay: true,
+          details: (
+            <AttributeDetails
+              column={tag.key}
+              kind={FieldKind.TAG}
+              label={tag.name}
+              type="span"
+            />
+          ),
         };
       }),
       ...Object.values(numberTags).map(tag => {
@@ -78,6 +94,15 @@ export function ColumnEditorModal({
           textValue: tag.name,
           trailingItems: <TypeBadge kind={FieldKind.MEASUREMENT} />,
           key: `${tag.key}-${FieldKind.MEASUREMENT}`,
+          showDetailsInOverlay: true,
+          details: (
+            <AttributeDetails
+              column={tag.key}
+              kind={FieldKind.TAG}
+              label={tag.name}
+              type="span"
+            />
+          ),
         };
       }),
     ];
diff --git a/static/app/views/explore/toolbar/toolbarGroupBy.tsx b/static/app/views/explore/toolbar/toolbarGroupBy.tsx
@@ -12,6 +12,9 @@ import {IconDelete} from 'sentry/icons/iconDelete';
 import {IconGrabbable} from 'sentry/icons/iconGrabbable';
 import {t} from 'sentry/locale';
 import {defined} from 'sentry/utils';
+import {classifyTagKey} from 'sentry/utils/discover/fields';
+import {AttributeDetails} from 'sentry/views/explore/components/attributeDetails';
+import {TypeBadge} from 'sentry/views/explore/components/typeBadge';
 import {DragNDropContext} from 'sentry/views/explore/contexts/dragNDropContext';
 import {
   useExploreGroupBys,
@@ -73,7 +76,17 @@ export function ToolbarGroupBy({autoSwitchToAggregates}: ToolbarGroupBy) {
         value: UNGROUPED,
         textValue: t('\u2014'),
       },
-      ...potentialOptions.map(key => ({label: key, value: key, textValue: key})),
+      ...potentialOptions.map(key => {
+        const kind = classifyTagKey(key);
+        return {
+          label: key,
+          value: key,
+          textValue: key,
+          trailingItems: <TypeBadge kind={kind} />,
+          showDetailsInOverlay: true,
+          details: <AttributeDetails column={key} kind={kind} label={key} type="span" />,
+        };
+      }),
     ];
   }, [groupBys, tags]);
 
